diff --git a/docs/_fabric-native-components.jsx b/docs/_fabric-native-components.jsx
index fc6a3171a4f..69bc6f31268 100644
--- a/docs/_fabric-native-components.jsx
+++ b/docs/_fabric-native-components.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import IOSContent from './fabric-native-components-ios.md';
 import AndroidContent from './fabric-native-components-android.md';
 
diff --git a/docs/_integration-with-existing-apps-ios.md b/docs/_integration-with-existing-apps-ios.md
index 4b95571538b..1670717d84f 100644
--- a/docs/_integration-with-existing-apps-ios.md
+++ b/docs/_integration-with-existing-apps-ios.md
@@ -159,7 +159,7 @@ AppRegistry.registerComponent('HelloWorld', () => App);
 Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX](<https://en.wikipedia.org/wiki/JSX_(JavaScript)>) expressions. It contains the root React Native component that we will integrate into our iOS application (<RNTemplateRepoLink href="template/App.tsx">link</RNTemplateRepoLink>):
 
 ```tsx
-import React from 'react';
+import {type JSX} from 'react';
 import {
   SafeAreaView,
   ScrollView,
@@ -177,7 +177,7 @@ import {
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
 
-function App(): React.JSX.Element {
+function App(): JSX.Element {
   const isDarkMode = useColorScheme() === 'dark';
 
   const backgroundStyle = {
diff --git a/docs/_integration-with-existing-apps-kotlin.md b/docs/_integration-with-existing-apps-kotlin.md
index 23414c63a3b..6ce02c4133b 100644
--- a/docs/_integration-with-existing-apps-kotlin.md
+++ b/docs/_integration-with-existing-apps-kotlin.md
@@ -192,7 +192,7 @@ AppRegistry.registerComponent('HelloWorld', () => App);
 Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX](<https://en.wikipedia.org/wiki/JSX_(JavaScript)>) expressions. It contains the root React Native component that we will integrate into our Android application (<RNTemplateRepoLink href="template/App.tsx">link</RNTemplateRepoLink>):
 
 ```tsx
-import React from 'react';
+import {type JSX} from 'react';
 import {
   SafeAreaView,
   ScrollView,
@@ -202,7 +202,6 @@ import {
   useColorScheme,
   View,
 } from 'react-native';
-
 import {
   Colors,
   DebugInstructions,
@@ -210,7 +209,7 @@ import {
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
 
-function App(): React.JSX.Element {
+function App(): JSX.Element {
   const isDarkMode = useColorScheme() === 'dark';
 
   const backgroundStyle = {
diff --git a/docs/_turbo-native-modules-components.jsx b/docs/_turbo-native-modules-components.jsx
index 1bb5a1b5edb..9b17f011728 100644
--- a/docs/_turbo-native-modules-components.jsx
+++ b/docs/_turbo-native-modules-components.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import IOSContent from './turbo-native-modules-ios.md';
 import AndroidContent from './turbo-native-modules-android.md';
 
diff --git a/docs/accessibilityinfo.md b/docs/accessibilityinfo.md
index af69fbcfec3..4cebdadb1b3 100644
--- a/docs/accessibilityinfo.md
+++ b/docs/accessibilityinfo.md
@@ -8,7 +8,7 @@ Sometimes it's useful to know whether or not the device has a screen reader that
 ## Example
 
 ```SnackPlayer name=AccessibilityInfo%20Example&supportedPlatforms=android,ios
-import React, {useState, useEffect} from 'react';
+import {useState, useEffect} from 'react';
 import {AccessibilityInfo, Text, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/docs/actionsheetios.md b/docs/actionsheetios.md
index 30d1d6afea5..d4294c35d18 100644
--- a/docs/actionsheetios.md
+++ b/docs/actionsheetios.md
@@ -8,7 +8,7 @@ Displays native to iOS [Action Sheet](https://developer.apple.com/design/human-i
 ## Example
 
 ```SnackPlayer name=ActionSheetIOS%20Example&supportedPlatforms=ios
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {ActionSheetIOS, Button, StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/docs/activityindicator.md b/docs/activityindicator.md
index c9d03b73021..9b1445cbf5e 100644
--- a/docs/activityindicator.md
+++ b/docs/activityindicator.md
@@ -8,7 +8,6 @@ Displays a circular loading indicator.
 ## Example
 
 ```SnackPlayer name=ActivityIndicator%20Example
-import React from 'react';
 import {ActivityIndicator, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/docs/alert.md b/docs/alert.md
index c80b62fb7a6..78b1c412e66 100644
--- a/docs/alert.md
+++ b/docs/alert.md
@@ -12,7 +12,6 @@ This is an API that works both on Android and iOS and can show static alerts. Al
 ## Example
 
 ```SnackPlayer name=Alert%20Example&supportedPlatforms=ios,android
-import React from 'react';
 import {StyleSheet, Button, Alert} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -81,7 +80,6 @@ The cancel event can be handled by providing an `onDismiss` callback property in
 ### Example <div className="label android">Android</div>
 
 ```SnackPlayer name=Alert%20Android%20Dissmissable%20Example&supportedPlatforms=android
-import React from 'react';
 import {StyleSheet, Button, Alert} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/docs/animated.md b/docs/animated.md
index d4ba867028b..fce79ffaf57 100644
--- a/docs/animated.md
+++ b/docs/animated.md
@@ -16,7 +16,6 @@ Don't modify the animated value directly. You can use the [`useRef` Hook](https:
 The following example contains a `View` which will fade in and fade out based on the animated value `fadeAnim`
 
 ```SnackPlayer name=Animated%20Example
-import React from 'react';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 import {
   Animated,
diff --git a/docs/animatedvaluexy.md b/docs/animatedvaluexy.md
index 6cb44808ccf..e5ddd564489 100644
--- a/docs/animatedvaluexy.md
+++ b/docs/animatedvaluexy.md
@@ -8,7 +8,7 @@ title: Animated.ValueXY
 ## Example
 
 ```SnackPlayer name=Animated.ValueXY%20Example
-import React, {useRef} from 'react';
+import {useRef} from 'react';
 import {Animated, PanResponder, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/docs/animations.md b/docs/animations.md
index ccdaa5a32bb..321c8a0b2e1 100644
--- a/docs/animations.md
+++ b/docs/animations.md
@@ -21,7 +21,7 @@ For example, a container view that fades in when it is mounted may look like thi
 <TabItem value="javascript">
 
 ```SnackPlayer ext=js
-import React, {useEffect, useRef} from 'react';
+import {useEffect, useRef} from 'react';
 import {Animated, Text, View} from 'react-native';
 
 const FadeInView = props => {
@@ -74,12 +74,12 @@ export default () => {
 <TabItem value="typescript">
 
 ```SnackPlayer ext=tsx
-import React, {useEffect, useRef, type PropsWithChildren} from 'react';
+import {useEffect, useRef, type PropsWithChildren, type FC} from 'react';
 import {Animated, Text, View, type ViewStyle} from 'react-native';
 
 type FadeInViewProps = PropsWithChildren<{style: ViewStyle}>;
 
-const FadeInView: React.FC<FadeInViewProps> = props => {
+const FadeInView: FC<FadeInViewProps> = props => {
   const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
 
   useEffect(() => {
@@ -309,7 +309,6 @@ The following example implements a horizontal scrolling carousel where the scrol
 #### ScrollView with Animated Event Example
 
 ```SnackPlayer name=Animated&supportedPlatforms=ios,android
-import React from 'react';
 import {
   ScrollView,
   Text,
@@ -452,7 +451,7 @@ onPanResponderMove={Animated.event(
 #### PanResponder with Animated Event Example
 
 ```SnackPlayer name=Animated
-import React, {useRef} from 'react';
+import {useRef} from 'react';
 import {Animated, View, StyleSheet, PanResponder, Text} from 'react-native';
 
 const App = () => {
@@ -593,7 +592,7 @@ UIManager.setLayoutAnimationEnabledExperimental(true);
 ```
 
 ```SnackPlayer name=LayoutAnimations
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {
   NativeModules,
   LayoutAnimation,
diff --git a/docs/appstate.md b/docs/appstate.md
index b776907d3e1..fb4188f6cf1 100644
--- a/docs/appstate.md
+++ b/docs/appstate.md
@@ -28,7 +28,7 @@ If you are using the legacy architecture, `currentState` will be `null` at launc
 :::
 
 ```SnackPlayer name=AppState%20Example
-import React, {useRef, useState, useEffect} from 'react';
+import {useRef, useState, useEffect} from 'react';
 import {AppState, StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/docs/backhandler.md b/docs/backhandler.md
index c3c7c937541..1d096c71a13 100644
--- a/docs/backhandler.md
+++ b/docs/backhandler.md
@@ -52,7 +52,7 @@ subscription.remove();
 The following example implements a scenario where you confirm if the user wants to exit the app:
 
 ```SnackPlayer name=BackHandler&supportedPlatforms=android
-import React, {useEffect} from 'react';
+import {useEffect} from 'react';
 import {Text, StyleSheet, BackHandler, Alert} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/docs/button.md b/docs/button.md
index 9fc529fc863..23501057f52 100644
--- a/docs/button.md
+++ b/docs/button.md
@@ -19,7 +19,6 @@ If this button doesn't look right for your app, you can build your own button us
 ## Example
 
 ```SnackPlayer name=Button%20Example&ext=js
-import React from 'react';
 import {StyleSheet, Button, View, Text, Alert, Platform} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/docs/communication-android.md b/docs/communication-android.md
index f78dc84cf65..35aab358818 100644
--- a/docs/communication-android.md
+++ b/docs/communication-android.md
@@ -67,7 +67,6 @@ class MainActivity : ReactActivity() {
 </Tabs>
 
 ```tsx
-import React from 'react';
 import {View, Image} from 'react-native';
 
 export default class ImageBrowserApp extends React.Component {
diff --git a/docs/communication-ios.md b/docs/communication-ios.md
index f82cae7e620..89a64ff9b4c 100644
--- a/docs/communication-ios.md
+++ b/docs/communication-ios.md
@@ -33,7 +33,6 @@ RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
 ```
 
 ```tsx
-import React from 'react';
 import {View, Image} from 'react-native';
 
 export default class ImageBrowserApp extends React.Component {
diff --git a/docs/dimensions.md b/docs/dimensions.md
index 9ebb8561739..c9c6b70c613 100644
--- a/docs/dimensions.md
+++ b/docs/dimensions.md
@@ -27,7 +27,7 @@ If you are targeting foldable devices or devices which can change the screen siz
 ## Example
 
 ```SnackPlayer name=Dimensions%20Example
-import React, {useState, useEffect} from 'react';
+import {useState, useEffect} from 'react';
 import {StyleSheet, Text, Dimensions} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/docs/document-nodes.md b/docs/document-nodes.md
index 978ef87a1f8..5f8a6e073a6 100644
--- a/docs/document-nodes.md
+++ b/docs/document-nodes.md
@@ -6,7 +6,7 @@ title: Document nodes
 Document nodes represent a complete native view tree. Apps using native navigation would provide a separate document node for each screen. Apps not using native navigation would generally provide a single document for the whole app (similar to single-page apps on Web).
 
 ```SnackPlayer ext=js&name=Document%20instance%20example
-import * as React from 'react';
+import {useEffect, useRef} from 'react';
 import {Text, TextInput, View} from 'react-native';
 
 function MyComponent(props) {
@@ -19,9 +19,9 @@ function MyComponent(props) {
 }
 
 export default function AccessingDocument() {
-  const ref = React.useRef(null);
+  const ref = useRef(null);
 
-  React.useEffect(() => {
+  useEffect(() => {
     // Get the main text input in the screen and focus it after initial load.
     const element = ref.current;
     const doc = element.ownerDocument;
diff --git a/docs/drawerlayoutandroid.md b/docs/drawerlayoutandroid.md
index 3714318df5c..079f50b60a6 100644
--- a/docs/drawerlayoutandroid.md
+++ b/docs/drawerlayoutandroid.md
@@ -13,7 +13,7 @@ React component that wraps the platform `DrawerLayout` (Android only). The Drawe
 <TabItem value="javascript">
 
 ```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android&ext=js
-import React, {useRef, useState} from 'react';
+import {useRef, useState} from 'react';
 import {Button, DrawerLayoutAndroid, Text, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -86,7 +86,7 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android&ext=tsx
-import React, {useRef, useState} from 'react';
+import {useRef, useState} from 'react';
 import {
   Button,
   DrawerLayoutAndroid,
diff --git a/docs/easing.md b/docs/easing.md
index bb31dd0e4fa..f20e2644f4d 100644
--- a/docs/easing.md
+++ b/docs/easing.md
@@ -49,7 +49,7 @@ The following helpers are used to modify other easing functions.
 <TabItem value="javascript">
 
 ```SnackPlayer name=Easing%20Demo&ext=js
-import React, {useRef} from 'react';
+import {useRef} from 'react';
 import {
   Animated,
   Easing,
@@ -209,7 +209,7 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Easing%20Demo&ext=tsx
-import React, {useRef} from 'react';
+import {useRef} from 'react';
 import {
   Animated,
   Easing,
diff --git a/docs/element-nodes.md b/docs/element-nodes.md
index 654c870b37f..53c05835199 100644
--- a/docs/element-nodes.md
+++ b/docs/element-nodes.md
@@ -8,14 +8,14 @@ Element nodes represent native components in the native view tree (similar to [E
 They are provided by all native components, and by many built-in components, via refs:
 
 ```SnackPlayer ext=js&name=Element%20instances%20example
-import * as React from 'react';
-import { View, SafeAreaView, StyleSheet, Text } from 'react-native';
+import {useEffect, useRef, useState} from 'react';
+import {View, SafeAreaView, StyleSheet, Text} from 'react-native';
 
 const ViewWithRefs = () => {
-  const ref = React.useRef(null);
-  const [viewInfo, setViewInfo] = React.useState('');
+  const ref = useRef(null);
+  const [viewInfo, setViewInfo] = useState('');
 
-  React.useEffect(() => {
+  useEffect(() => {
     // `element` is an object implementing the interface described here.
     const element = ref.current;
     const rect = JSON.stringify(element.getBoundingClientRect());
diff --git a/docs/fabric-native-components.md b/docs/fabric-native-components.md
index 2a509a7174e..6efdd572e92 100644
--- a/docs/fabric-native-components.md
+++ b/docs/fabric-native-components.md
@@ -172,7 +172,6 @@ This guide shows you how to create a Native Component that only works with the N
 Finally, you can use the new component in your app. Update your generated `App.tsx` to:
 
 ```javascript title="Demo/App.tsx"
-import React from 'react';
 import {Alert, StyleSheet, View} from 'react-native';
 import WebView from './specs/WebViewNativeComponent';
 
diff --git a/docs/flatlist.md b/docs/flatlist.md
index 56505e27ca8..7bc9884fa34 100644
--- a/docs/flatlist.md
+++ b/docs/flatlist.md
@@ -26,7 +26,6 @@ If you need section support, use [`<SectionList>`](sectionlist.md).
 <TabItem value="javascript">
 
 ```SnackPlayer name=Simple%20FlatList%20Example&ext=js
-import React from 'react';
 import {View, FlatList, StyleSheet, Text, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -86,7 +85,6 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Simple%20FlatList%20Example&ext=tsx
-import React from 'react';
 import {View, FlatList, StyleSheet, Text, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -158,7 +156,7 @@ More complex, selectable example below.
 <TabItem value="javascript">
 
 ```SnackPlayer name=flatlist-selectable&ext=js
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {
   FlatList,
   StatusBar,
@@ -242,7 +240,7 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=flatlist-selectable&ext=tsx
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {
   FlatList,
   StatusBar,
diff --git a/docs/flexbox.md b/docs/flexbox.md
index 039a7bdf60b..c98c516714d 100644
--- a/docs/flexbox.md
+++ b/docs/flexbox.md
@@ -21,7 +21,6 @@ The defaults are different, with `flexDirection` defaulting to `column` instead
 In the following example, the red, orange, and green views are all children in the container view that has `flex: 1` set. The red view uses `flex: 1` , the orange view uses `flex: 2`, and the green view uses `flex: 3` . **1+2+3 = 6**, which means that the red view will get `1/6` of the space, the orange `2/6` of the space, and the green `3/6` of the space.
 
 ```SnackPlayer name=Flex%20Example
-import React from 'react';
 import {StyleSheet, View} from 'react-native';
 
 const Flex = () => {
@@ -69,7 +68,7 @@ You can learn more [here](https://www.yogalayout.dev/docs/styling/flex-direction
 <TabItem value="javascript">
 
 ```SnackPlayer name=Flex%20Direction&ext=js
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 
 const FlexDirectionBasics = () => {
@@ -168,7 +167,7 @@ export default FlexDirectionBasics;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Flex%20Direction&ext=tsx
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import type {PropsWithChildren} from 'react';
 
@@ -286,7 +285,7 @@ Layout [`direction`](layout-props#direction) specifies the direction in which ch
 <TabItem value="javascript">
 
 ```SnackPlayer name=Flex%20Direction&ext=js
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
 
 const DirectionLayout = () => {
@@ -385,7 +384,7 @@ export default DirectionLayout;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Flex%20Direction&ext=tsx
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
 import type {PropsWithChildren} from 'react';
 
@@ -513,7 +512,7 @@ You can learn more [here](https://www.yogalayout.dev/docs/styling/justify-conten
 <TabItem value="javascript">
 
 ```SnackPlayer name=Justify%20Content&ext=js
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
 
 const JustifyContentBasics = () => {
@@ -619,7 +618,7 @@ export default JustifyContentBasics;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Justify%20Content&ext=tsx
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
 import type {PropsWithChildren} from 'react';
 
@@ -756,7 +755,7 @@ You can learn more [here](https://www.yogalayout.dev/docs/styling/align-items-se
 <TabItem value="javascript">
 
 ```SnackPlayer name=Align%20Items&ext=js
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
 
 const AlignItemsLayout = () => {
@@ -865,7 +864,7 @@ export default AlignItemsLayout;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Align%20Items&ext=tsx
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
 import type {PropsWithChildren} from 'react';
 
@@ -989,7 +988,7 @@ export default AlignItemsLayout;
 <TabItem value="javascript">
 
 ```SnackPlayer name=Align%20Self&ext=js
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
 
 const AlignSelfLayout = () => {
@@ -1099,7 +1098,7 @@ export default AlignSelfLayout;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Align%20Self&ext=tsx
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
 import type {PropsWithChildren} from 'react';
 import type {FlexAlignType} from 'react-native';
@@ -1241,7 +1240,7 @@ You can learn more [here](https://www.yogalayout.dev/docs/styling/align-content)
 <TabItem value="javascript">
 
 ```SnackPlayer name=Align%20Content&ext=js
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
 
 const AlignContentLayout = () => {
@@ -1353,7 +1352,7 @@ export default AlignContentLayout;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Align%20Content&ext=tsx
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
 import type {PropsWithChildren} from 'react';
 
@@ -1482,7 +1481,7 @@ When wrapping lines, `alignContent` can be used to specify how the lines are pla
 <TabItem value="javascript">
 
 ```SnackPlayer name=Flex%20Wrap&ext=js
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
 
 const FlexWrapLayout = () => {
@@ -1585,7 +1584,7 @@ export default FlexWrapLayout;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Flex%20Wrap&ext=tsx
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
 import type {PropsWithChildren} from 'react';
 
@@ -1713,7 +1712,7 @@ You can learn more [here](https://www.yogalayout.dev/docs/styling/flex-basis-gro
 <TabItem value="javascript">
 
 ```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink&ext=js
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {View, Text, TextInput, StyleSheet} from 'react-native';
 
 const App = () => {
@@ -1887,7 +1886,7 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink&ext=tsx
-import React, {useState} from 'react';
+import {useState, type Dispatch, type SetStateAction} from 'react';
 import {View, Text, TextInput, StyleSheet} from 'react-native';
 import type {ViewStyle} from 'react-native';
 
@@ -1962,7 +1961,7 @@ const App = () => {
 
 type BoxInfoProps = ViewStyle & {
   color: string;
-  setStyle: React.Dispatch<React.SetStateAction<ViewStyle>>;
+  setStyle: Dispatch<SetStateAction<ViewStyle>>;
 };
 
 const BoxInfo = ({
@@ -2086,7 +2085,7 @@ You can use `flexWrap` and `alignContent` along with `gap` to add consistent spa
 <TabItem value="javascript">
 
 ```SnackPlayer name=Row%20Gap%20and%20Column%20Gap&ext=js
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {View, Text, StyleSheet, TextInput} from 'react-native';
 
 const RowGapAndColumnGap = () => {
@@ -2188,7 +2187,7 @@ export default RowGapAndColumnGap;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Row%20Gap%20and%20Column%20Gap&ext=tsx
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {View, Text, StyleSheet, TextInput} from 'react-native';
 import type {PropsWithChildren} from 'react';
 
@@ -2313,7 +2312,7 @@ Both `width` and `height` can take the following values:
 <TabItem value="javascript">
 
 ```SnackPlayer name=Width%20and%20Height&ext=js
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -2439,7 +2438,7 @@ export default WidthHeightBasics;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Width%20and%20Height&ext=tsx
-import React, {useState, PropsWithChildren} from 'react';
+import {useState, PropsWithChildren} from 'react';
 import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -2589,7 +2588,7 @@ The `position` type of an element defines how it is positioned relative to eithe
 <TabItem value="javascript">
 
 ```SnackPlayer name=Position&ext=js
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
 
 const PositionLayout = () => {
@@ -2719,7 +2718,7 @@ export default PositionLayout;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Position&ext=tsx
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
 import type {PropsWithChildren} from 'react';
 
diff --git a/docs/handling-text-input.md b/docs/handling-text-input.md
index 6db00cae840..c6f249bb31f 100644
--- a/docs/handling-text-input.md
+++ b/docs/handling-text-input.md
@@ -8,7 +8,7 @@ title: Handling Text Input
 For example, let's say that as the user types, you're translating their words into a different language. In this new language, every single word is written the same way: 🍕. So the sentence "Hello there Bob" would be translated as "🍕 🍕 🍕".
 
 ```SnackPlayer name=Handling%20Text%20Input
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {Text, TextInput, View} from 'react-native';
 
 const PizzaTranslator = () => {
diff --git a/docs/handling-touches.md b/docs/handling-touches.md
index 612287f6e10..b9604b393c0 100644
--- a/docs/handling-touches.md
+++ b/docs/handling-touches.md
@@ -25,7 +25,6 @@ This will render a blue label on iOS, and a blue rounded rectangle with light te
 Go ahead and play around with the `Button` component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right and then clicking on "Tap to Play" to preview the app.
 
 ```SnackPlayer name=Button%20Basics
-import React from 'react';
 import {Alert, Button, StyleSheet, View} from 'react-native';
 
 const ButtonBasics = () => {
@@ -86,7 +85,6 @@ In some cases, you may want to detect when a user presses and holds a view for a
 Let's see all of these in action:
 
 ```SnackPlayer name=Touchables
-import React from 'react';
 import {
   Alert,
   Platform,
diff --git a/docs/height-and-width.md b/docs/height-and-width.md
index 485667831cd..b768626716e 100644
--- a/docs/height-and-width.md
+++ b/docs/height-and-width.md
@@ -10,7 +10,6 @@ A component's height and width determine its size on the screen.
 The general way to set the dimensions of a component is by adding a fixed `width` and `height` to style. All dimensions in React Native are unitless, and represent density-independent pixels.
 
 ```SnackPlayer name=Height%20and%20Width
-import React from 'react';
 import {View} from 'react-native';
 
 const FixedDimensionsBasics = () => {
@@ -59,7 +58,6 @@ A component can only expand to fill available space if its parent has dimensions
 :::
 
 ```SnackPlayer name=Flex%20Dimensions
-import React from 'react';
 import {View} from 'react-native';
 
 const FlexDimensionsBasics = () => {
@@ -85,7 +83,6 @@ After you can control a component's size, the next step is to [learn how to lay
 If you want to fill a certain portion of the screen, but you _don't_ want to use the `flex` layout, you _can_ use **percentage values** in the component's style. Similar to flex dimensions, percentage dimensions require parent with a defined size.
 
 ```SnackPlayer name=Percentage%20Dimensions
-import React from 'react';
 import {View} from 'react-native';
 
 const PercentageDimensionsBasics = () => {
diff --git a/docs/i18nmanager.md b/docs/i18nmanager.md
index 80ccd2ccd72..106b03fc111 100644
--- a/docs/i18nmanager.md
+++ b/docs/i18nmanager.md
@@ -14,7 +14,6 @@ The `I18nManager` module provides utilities for managing Right-to-Left (RTL) lay
 If you absolutely position elements to align with other flexbox elements, they may not align in RTL languages. Using `isRTL` can be used to adjust alignment or animations.
 
 ```SnackPlayer name=I18nManager%20Change%20Absolute%20Positions%20And%20Animations
-import React from 'react';
 import {I18nManager, Text, View} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -43,7 +42,7 @@ export default App;
 ### During Development
 
 ```SnackPlayer name=I18nManager%20During%20Development
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {Alert, I18nManager, StyleSheet, Switch, Text, View} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/docs/image-style-props.md b/docs/image-style-props.md
index efa0dc725e1..cbf19f996f9 100644
--- a/docs/image-style-props.md
+++ b/docs/image-style-props.md
@@ -8,7 +8,6 @@ title: Image Style Props
 ### Image Resize Mode
 
 ```SnackPlayer name=Image%20Resize%20Modes%20Example
-import React from 'react';
 import {View, Image, Text, StyleSheet, ScrollView} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -82,7 +81,6 @@ export default DisplayAnImageWithStyle;
 ### Image Border
 
 ```SnackPlayer name=Style%20BorderWidth%20and%20BorderColor%20Example
-import React from 'react';
 import {Image, StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -118,7 +116,6 @@ export default DisplayAnImageWithStyle;
 ### Image Border Radius
 
 ```SnackPlayer name=Style%20Border%20Radius%20Example
-import React from 'react';
 import {View, Image, StyleSheet, Text, ScrollView} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -184,7 +181,6 @@ export default DisplayAnImageWithStyle;
 ### Image Tint
 
 ```SnackPlayer name=Style%20tintColor%20Function%20Component
-import React from 'react';
 import {Image, StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/docs/image.md b/docs/image.md
index 5f6a2a5b1ad..3f83be8c19c 100644
--- a/docs/image.md
+++ b/docs/image.md
@@ -14,7 +14,6 @@ For network and data images, you will need to manually specify the dimensions of
 ## Examples
 
 ```SnackPlayer name=Image%20Example
-import React from 'react';
 import {Image, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -61,7 +60,6 @@ export default DisplayAnImage;
 You can also add `style` to an image:
 
 ```SnackPlayer name=Styled%20Image%20Example
-import React from 'react';
 import {Image, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/docs/imagebackground.md b/docs/imagebackground.md
index 6670fd3b632..d3d40b2a844 100644
--- a/docs/imagebackground.md
+++ b/docs/imagebackground.md
@@ -12,7 +12,6 @@ Note that you must specify some width and height style attributes.
 ## Example
 
 ```SnackPlayer name=ImageBackground
-import React from 'react';
 import {ImageBackground, StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/docs/improvingux.md b/docs/improvingux.md
index 462f5f0ce1c..4b8e807c6c4 100644
--- a/docs/improvingux.md
+++ b/docs/improvingux.md
@@ -21,7 +21,7 @@ Check out [`TextInput` docs](textinput.md) for more configuration options.
 <TabItem value="javascript">
 
 ```SnackPlayer name=TextInput%20form%20example&ext=js
-import React, {useState, useRef} from 'react';
+import {useState, useRef} from 'react';
 import {
   Alert,
   Text,
@@ -115,7 +115,7 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=TextInput%20form%20example&ext=tsx
-import React, {useState, useRef} from 'react';
+import {useState, useRef} from 'react';
 import {
   Alert,
   Text,
@@ -216,7 +216,7 @@ Software keyboard takes almost half of the screen. If you have interactive eleme
 <TabItem value="javascript">
 
 ```SnackPlayer name=KeyboardAvoidingView%20example&ext=js
-import React, {useState, useRef} from 'react';
+import {useState, useRef} from 'react';
 import {
   Alert,
   Text,
@@ -313,7 +313,7 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=KeyboardAvoidingView%20example&ext=tsx
-import React, {useState, useRef} from 'react';
+import {useState, useRef} from 'react';
 import {
   Alert,
   Text,
@@ -414,7 +414,6 @@ export default App;
 On mobile phones it's hard to be very precise when pressing buttons. Make sure all interactive elements are 44x44 or larger. One way to do this is to leave enough space for the element, `padding`, `minWidth` and `minHeight` style values can be useful for that. Alternatively, you can use [`hitSlop` prop](touchablewithoutfeedback.md#hitslop) to increase interactive area without affecting the layout. Here's a demo:
 
 ```SnackPlayer name=HitSlop%20example
-import React from 'react';
 import {
   Text,
   StatusBar,
@@ -493,7 +492,6 @@ export default App;
 Android API 21+ uses the material design ripple to provide user with feedback when they touch an interactable area on the screen. React Native exposes this through the [`TouchableNativeFeedback` component](touchablenativefeedback.md). Using this touchable effect instead of opacity or highlight will often make your app feel much more fitting on the platform. That said, you need to be careful when using it because it doesn't work on iOS or on Android API < 21, so you will need to fallback to using one of the other Touchable components on iOS. You can use a library like [react-native-platform-touchable](https://github.com/react-community/react-native-platform-touchable) to handle the platform differences for you.
 
 ```SnackPlayer name=Android%20Ripple%20example&supportedPlatforms=android
-import React from 'react';
 import {
   TouchableNativeFeedback,
   TouchableOpacity,
diff --git a/docs/inputaccessoryview.md b/docs/inputaccessoryview.md
index a4f56532fa4..30c86719e14 100644
--- a/docs/inputaccessoryview.md
+++ b/docs/inputaccessoryview.md
@@ -8,7 +8,7 @@ A component which enables customization of the keyboard input accessory view on
 To use this component wrap your custom toolbar with the InputAccessoryView component, and set a `nativeID`. Then, pass that `nativeID` as the `inputAccessoryViewID` of whatever `TextInput` you desire. A basic example:
 
 ```SnackPlayer name=InputAccessoryView&supportedPlatforms=ios
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {
   Button,
   InputAccessoryView,
diff --git a/docs/interactionmanager.md b/docs/interactionmanager.md
index 8eac16a4b70..75328f17894 100644
--- a/docs/interactionmanager.md
+++ b/docs/interactionmanager.md
@@ -51,7 +51,7 @@ By default, queued tasks are executed together in a loop in one `setImmediate` b
 <TabItem value="javascript">
 
 ```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useEffect} from 'react';
+import {useEffect} from 'react';
 import {
   Alert,
   Animated,
@@ -133,7 +133,7 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useEffect} from 'react';
+import {useEffect} from 'react';
 import {
   Alert,
   Animated,
@@ -224,7 +224,7 @@ export default App;
 <TabItem value="javascript">
 
 ```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useEffect} from 'react';
+import {useEffect} from 'react';
 import {
   Alert,
   Animated,
@@ -300,7 +300,7 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useEffect} from 'react';
+import {useEffect} from 'react';
 import {
   Alert,
   Animated,
diff --git a/docs/intro-react-native-components.md b/docs/intro-react-native-components.md
index eb585964154..2f3a1449d28 100644
--- a/docs/intro-react-native-components.md
+++ b/docs/intro-react-native-components.md
@@ -43,7 +43,6 @@ React Native has many Core Components for everything from controls to activity i
 In the next section, you will start combining these Core Components to learn about how React works. Have a play with them here now!
 
 ```SnackPlayer name=Hello%20World
-import React from 'react';
 import {View, Text, Image, ScrollView, TextInput} from 'react-native';
 
 const App = () => {
diff --git a/docs/introduction.md b/docs/introduction.md
index ba782cd838c..2752b80327b 100644
--- a/docs/introduction.md
+++ b/docs/introduction.md
@@ -30,7 +30,6 @@ While we do our best to assume no prior knowledge of React, Android, or iOS deve
 This introduction lets you get started immediately in your browser with interactive examples like this one:
 
 ```SnackPlayer name=Hello%20World
-import React from 'react';
 import {Text, View} from 'react-native';
 
 const YourApp = () => {
diff --git a/docs/javascript-environment.md b/docs/javascript-environment.md
index ab041dd34cd..d66b5a996de 100644
--- a/docs/javascript-environment.md
+++ b/docs/javascript-environment.md
@@ -41,7 +41,7 @@ A full list of React Native's enabled transformations can be found in [@react-na
   <TableRow name="for…of" code="for (var num of [1, 2, 3]) {...};" url="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of" />
   <TableRow name="Function Name" code="let number = x => x;" url="https://babeljs.io/docs/en/babel-plugin-transform-function-name" />
   <TableRow name="Literals" code="const b = 0b11; const o = 0o7; const u = 'Hello\u{000A}\u{0009}!';" url="https://babeljs.io/docs/en/babel-plugin-transform-literals" />
-  <TableRow name="Modules" code="import React, {Component} from 'react';" url="https://babeljs.io/docs/learn-es2015/#modules" />
+  <TableRow name="Modules" code="import {Component} from 'react';" url="https://babeljs.io/docs/learn-es2015/#modules" />
   <TableRow name="Object Concise Method" code="const obj = {method() { return 10; }};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
   <TableRow name="Object Short Notation" code="const name = 'vjeux'; const obj = {name};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
   <TableRow name="Parameters" code="function test(x = 'hello', {a, b}, ...args) {}" url="https://babeljs.io/docs/en/babel-plugin-transform-parameters" />
diff --git a/docs/keyboard.md b/docs/keyboard.md
index 8560ce4999d..c4951b2058c 100644
--- a/docs/keyboard.md
+++ b/docs/keyboard.md
@@ -10,7 +10,7 @@ title: Keyboard
 The Keyboard module allows you to listen for native events and react to them, as well as make changes to the keyboard, like dismissing it.
 
 ```SnackPlayer name=Keyboard%20Example&supportedPlatforms=ios,android
-import React, {useState, useEffect} from 'react';
+import {useState, useEffect} from 'react';
 import {Keyboard, Text, TextInput, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/docs/keyboardavoidingview.md b/docs/keyboardavoidingview.md
index 55cce32cf54..cc650dd0f57 100644
--- a/docs/keyboardavoidingview.md
+++ b/docs/keyboardavoidingview.md
@@ -8,7 +8,6 @@ This component will automatically adjust its height, position, or bottom padding
 ## Example
 
 ```SnackPlayer name=KeyboardAvoidingView&supportedPlatforms=android,ios
-import React from 'react';
 import {
   View,
   KeyboardAvoidingView,
diff --git a/docs/layout-props.md b/docs/layout-props.md
index b3673e0c849..36797b8dc86 100644
--- a/docs/layout-props.md
+++ b/docs/layout-props.md
@@ -17,7 +17,7 @@ The following example shows how different properties can affect or shape a React
 <TabItem value="javascript">
 
 ```SnackPlayer name=LayoutProps%20Example&ext=js
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {Button, ScrollView, StyleSheet, Text, View} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -190,7 +190,7 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=LayoutProps%20Example&ext=tsx
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {
   Button,
   ScrollView,
diff --git a/docs/layoutanimation.md b/docs/layoutanimation.md
index 911a247c8c7..b69454098f6 100644
--- a/docs/layoutanimation.md
+++ b/docs/layoutanimation.md
@@ -20,7 +20,7 @@ if (Platform.OS === 'android') {
 ## Example
 
 ```SnackPlayer name=LayoutAnimation%20Example&supportedPlatforms=android,ios
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {
   LayoutAnimation,
   Platform,
@@ -134,7 +134,7 @@ Helper that creates an object (with `create`, `update`, and `delete` fields) to
 **Example:**
 
 ```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {
   View,
   Platform,
@@ -263,7 +263,7 @@ Calls `configureNext()` with `Presets.spring`.
 **Example:**
 
 ```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {
   View,
   Platform,
diff --git a/docs/legacy/direct-manipulation.md b/docs/legacy/direct-manipulation.md
index b3e7e063414..bc7953e544b 100644
--- a/docs/legacy/direct-manipulation.md
+++ b/docs/legacy/direct-manipulation.md
@@ -67,7 +67,6 @@ Composite components are not backed by a native view, so you cannot call `setNat
 <TabItem value="javascript">
 
 ```SnackPlayer name=setNativeProps%20with%20Composite%20Components&ext=js
-import React from 'react';
 import {Text, TouchableOpacity, View} from 'react-native';
 
 const MyButton = props => (
@@ -89,7 +88,6 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=setNativeProps%20with%20Composite%20Components&ext=tsx
-import React from 'react';
 import {Text, TouchableOpacity, View} from 'react-native';
 
 const MyButton = (props: {label: string}) => (
@@ -120,10 +118,10 @@ Since the `setNativeProps` method exists on any ref to a `View` component, it is
 <TabItem value="javascript">
 
 ```SnackPlayer name=Forwarding%20setNativeProps&ext=js
-import React from 'react';
+import {forwardRef} from 'react';
 import {Text, TouchableOpacity, View} from 'react-native';
 
-const MyButton = React.forwardRef((props, ref) => (
+const MyButton = forwardRef((props, ref) => (
   <View {...props} ref={ref} style={{marginTop: 50}}>
     <Text>{props.label}</Text>
   </View>
@@ -142,10 +140,10 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Forwarding%20setNativeProps&ext=tsx
-import React from 'react';
+import {forwardRef} from 'react';
 import {Text, TouchableOpacity, View} from 'react-native';
 
-const MyButton = React.forwardRef<View, {label: string}>((props, ref) => (
+const MyButton = forwardRef<View, {label: string}>((props, ref) => (
   <View {...props} ref={ref} style={{marginTop: 50}}>
     <Text>{props.label}</Text>
   </View>
@@ -175,7 +173,6 @@ Another very common use case of `setNativeProps` is to edit the value of the Tex
 <TabItem value="javascript">
 
 ```SnackPlayer name=Clear%20text&ext=js
-import React from 'react';
 import {useCallback, useRef} from 'react';
 import {
   StyleSheet,
@@ -223,7 +220,6 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Clear%20text&ext=tsx
-import React from 'react';
 import {useCallback, useRef} from 'react';
 import {
   StyleSheet,
@@ -320,7 +316,7 @@ This method can also be called with a `relativeToNativeNode` handler (instead of
 <TabItem value="javascript">
 
 ```SnackPlayer name=measureLayout%20example&supportedPlatforms=android,ios&ext=js
-import React, {useEffect, useRef, useState} from 'react';
+import {useEffect, useRef, useState} from 'react';
 import {Text, View, StyleSheet} from 'react-native';
 
 const App = () => {
@@ -373,7 +369,7 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=measureLayout%20example&ext=tsx
-import React, {useEffect, useRef, useState} from 'react';
+import {useEffect, useRef, useState} from 'react';
 import {Text, View, StyleSheet} from 'react-native';
 
 type Measurements = {
diff --git a/docs/legacy/native-components-android.md b/docs/legacy/native-components-android.md
index 9443d854c53..d1b853213e0 100644
--- a/docs/legacy/native-components-android.md
+++ b/docs/legacy/native-components-android.md
@@ -831,7 +831,7 @@ export const MyViewManager =
 II. Then implement custom View calling the `create` method:
 
 ```tsx title="MyView.tsx"
-import React, {useEffect, useRef} from 'react';
+import {useEffect, useRef} from 'react';
 import {
   PixelRatio,
   UIManager,
diff --git a/docs/legacy/native-modules-android.md b/docs/legacy/native-modules-android.md
index 82fe222f628..cec5857a441 100644
--- a/docs/legacy/native-modules-android.md
+++ b/docs/legacy/native-modules-android.md
@@ -315,7 +315,6 @@ At this point, you have set up the basic scaffolding for your native module in A
 Find a place in your application where you would like to add a call to the native module’s `createCalendarEvent()` method. Below is an example of a component, `NewModuleButton` you can add in your app. You can invoke the native module inside `NewModuleButton`'s `onPress()` function.
 
 ```tsx
-import React from 'react';
 import {NativeModules, Button} from 'react-native';
 
 const NewModuleButton = () => {
diff --git a/docs/legacy/native-modules-ios.md b/docs/legacy/native-modules-ios.md
index 6c33c64ec75..d3239e16a90 100644
--- a/docs/legacy/native-modules-ios.md
+++ b/docs/legacy/native-modules-ios.md
@@ -141,7 +141,6 @@ At this point you have set up the basic scaffolding for your native module in iO
 Find a place in your application where you would like to add a call to the native module’s `createCalendarEvent()` method. Below is an example of a component, `NewModuleButton` you can add in your app. You can invoke the native module inside `NewModuleButton`'s `onPress()` function.
 
 ```tsx
-import React from 'react';
 import {Button} from 'react-native';
 
 const NewModuleButton = () => {
diff --git a/docs/linking.md b/docs/linking.md
index ff9c1e1121e..308d1660d61 100644
--- a/docs/linking.md
+++ b/docs/linking.md
@@ -137,7 +137,7 @@ You can handle these events with `Linking.getInitialURL()` - it returns a Promis
 <TabItem value="javascript">
 
 ```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useCallback} from 'react';
+import {useCallback} from 'react';
 import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
 
 const supportedURL = 'https://google.com';
@@ -185,7 +185,7 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useCallback} from 'react';
+import {useCallback} from 'react';
 import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
 
 const supportedURL = 'https://google.com';
@@ -243,7 +243,7 @@ export default App;
 <TabItem value="javascript">
 
 ```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useCallback} from 'react';
+import {useCallback} from 'react';
 import {Button, Linking, StyleSheet, View} from 'react-native';
 
 const OpenSettingsButton = ({children}) => {
@@ -278,7 +278,7 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useCallback} from 'react';
+import {useCallback} from 'react';
 import {Button, Linking, StyleSheet, View} from 'react-native';
 
 type OpenSettingsButtonProps = {
@@ -322,7 +322,7 @@ export default App;
 <TabItem value="javascript">
 
 ```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useState, useEffect} from 'react';
+import {useState, useEffect} from 'react';
 import {Linking, StyleSheet, Text, View} from 'react-native';
 
 const useInitialURL = () => {
@@ -376,7 +376,7 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useState, useEffect} from 'react';
+import {useState, useEffect} from 'react';
 import {Linking, StyleSheet, Text, View} from 'react-native';
 
 const useInitialURL = () => {
@@ -435,7 +435,7 @@ export default App;
 <TabItem value="javascript">
 
 ```SnackPlayer name=Linking%20Example&supportedPlatforms=android&ext=js
-import React, {useCallback} from 'react';
+import {useCallback} from 'react';
 import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
 
 const SendIntentButton = ({action, extras, children}) => {
@@ -485,7 +485,7 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Linking%20Example&ext=tsx
-import React, {useCallback} from 'react';
+import {useCallback} from 'react';
 import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
 
 type SendIntentButtonProps = {
diff --git a/docs/modal.md b/docs/modal.md
index 45be2531592..4ad9af1381f 100644
--- a/docs/modal.md
+++ b/docs/modal.md
@@ -8,7 +8,7 @@ The Modal component is a basic way to present content above an enclosing view.
 ## Example
 
 ```SnackPlayer name=Modal&supportedPlatforms=android,ios
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {Alert, Modal, StyleSheet, Text, Pressable, View} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/docs/navigation.md b/docs/navigation.md
index 363b48b1261..4d9586bf801 100644
--- a/docs/navigation.md
+++ b/docs/navigation.md
@@ -64,7 +64,6 @@ Now you are ready to build and run your app on the device/simulator.
 Now you can create an app with a home screen and a profile screen:
 
 ```tsx
-import * as React from 'react';
 import {createStaticNavigation} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 
diff --git a/docs/network.md b/docs/network.md
index ac014628da1..005db77962b 100644
--- a/docs/network.md
+++ b/docs/network.md
@@ -78,7 +78,7 @@ Don't forget to catch any errors that may be thrown by `fetch`, otherwise they w
 <TabItem value="javascript">
 
 ```SnackPlayer name=Fetch%20Example&ext=js
-import React, {useEffect, useState} from 'react';
+import {useEffect, useState} from 'react';
 import {ActivityIndicator, FlatList, Text, View} from 'react-native';
 
 const App = () => {
@@ -127,7 +127,7 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Fetch%20Example&ext=tsx
-import React, {useEffect, useState} from 'react';
+import {useEffect, useState} from 'react';
 import {ActivityIndicator, FlatList, Text, View} from 'react-native';
 
 type Movie = {
diff --git a/docs/optimizing-flatlist-configuration.md b/docs/optimizing-flatlist-configuration.md
index a81ec0c6cf6..9ce09c365df 100644
--- a/docs/optimizing-flatlist-configuration.md
+++ b/docs/optimizing-flatlist-configuration.md
@@ -98,7 +98,7 @@ The heavier your components are, the slower they render. Avoid heavy images (use
 `React.memo()` creates a memoized component that will be re-rendered only when the props passed to the component change. We can use this function to optimize the components in the FlatList.
 
 ```tsx
-import React, {memo} from 'react';
+import {memo} from 'react';
 import {View, Text} from 'react-native';
 
 const MyListItem = memo(
diff --git a/docs/panresponder.md b/docs/panresponder.md
index fa6d8b8ee4e..c7197248416 100644
--- a/docs/panresponder.md
+++ b/docs/panresponder.md
@@ -34,7 +34,7 @@ A `gestureState` object has the following:
 
 ```tsx
 const ExampleComponent = () => {
-  const panResponder = React.useRef(
+  const panResponder = useRef(
     PanResponder.create({
       // Ask to be the responder:
       onStartShouldSetPanResponder: (evt, gestureState) => true,
@@ -81,7 +81,7 @@ const ExampleComponent = () => {
 `PanResponder` works with `Animated` API to help build complex gestures in the UI. The following example contains an animated `View` component which can be dragged freely across the screen
 
 ```SnackPlayer name=PanResponder
-import React, {useRef} from 'react';
+import {useRef} from 'react';
 import {Animated, View, StyleSheet, PanResponder, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/docs/permissionsandroid.md b/docs/permissionsandroid.md
index ec1f486ba37..4e93941ad1f 100644
--- a/docs/permissionsandroid.md
+++ b/docs/permissionsandroid.md
@@ -17,7 +17,6 @@ If a user has previously turned off a permission that you prompt for, the OS wil
 ### Example
 
 ```SnackPlayer name=PermissionsAndroid%20Example&supportedPlatforms=android
-import React from 'react';
 import {
   Button,
   PermissionsAndroid,
diff --git a/docs/pixelratio.md b/docs/pixelratio.md
index 64e4eded49f..f298a8e73ab 100644
--- a/docs/pixelratio.md
+++ b/docs/pixelratio.md
@@ -30,7 +30,6 @@ In React Native, everything in JavaScript and within the layout engine works wit
 ## Example
 
 ```SnackPlayer name=PixelRatio%20Example
-import React from 'react';
 import {
   Image,
   PixelRatio,
diff --git a/docs/platform.md b/docs/platform.md
index 79f435ccd56..b8642658a84 100644
--- a/docs/platform.md
+++ b/docs/platform.md
@@ -6,7 +6,6 @@ title: Platform
 ## Example
 
 ```SnackPlayer name=Platform%20API%20Example&supportedPlatforms=ios,android
-import React from 'react';
 import {Platform, StyleSheet, Text, ScrollView} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/docs/platformcolor.md b/docs/platformcolor.md
index 17371f76c26..040c6d2c18a 100644
--- a/docs/platformcolor.md
+++ b/docs/platformcolor.md
@@ -46,7 +46,6 @@ If you’re familiar with design systems, another way of thinking about this is
 ## Example
 
 ```SnackPlayer name=PlatformColor%20Example&supportedPlatforms=android,ios
-import React from 'react';
 import {Platform, PlatformColor, StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/docs/pressable.md b/docs/pressable.md
index 70480cfd719..5c1a0933fc0 100644
--- a/docs/pressable.md
+++ b/docs/pressable.md
@@ -47,7 +47,7 @@ The touch area never extends past the parent view bounds and the Z-index of sibl
 ## Example
 
 ```SnackPlayer name=Pressable
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {Pressable, StyleSheet, Text, View} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/docs/progressbarandroid.md b/docs/progressbarandroid.md
index 4f165d86c46..f8810dc541a 100644
--- a/docs/progressbarandroid.md
+++ b/docs/progressbarandroid.md
@@ -12,7 +12,6 @@ Android-only React component used to indicate that the app is loading or there i
 ### Example
 
 ```SnackPlayer name=ProgressBarAndroid&supportedPlatforms=android
-import React from 'react';
 import {View, StyleSheet, ProgressBarAndroid, Text} from 'react-native';
 
 const App = () => {
diff --git a/docs/props.md b/docs/props.md
index 490eb214632..8b24d6dd9f1 100644
--- a/docs/props.md
+++ b/docs/props.md
@@ -10,7 +10,6 @@ Most components can be customized when they are created, with different paramete
 For example, one basic React Native component is the `Image`. When you create an image, you can use a prop named `source` to control what image it shows.
 
 ```SnackPlayer name=Props
-import React from 'react';
 import {Image} from 'react-native';
 
 const Bananas = () => {
@@ -33,7 +32,6 @@ Your own components can also use `props`. This lets you make a single component
 <TabItem value="javascript">
 
 ```SnackPlayer name=Props&ext=js
-import React from 'react';
 import {Text, View} from 'react-native';
 
 const Greeting = props => {
@@ -61,7 +59,6 @@ export default LotsOfGreetings;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Props&ext=tsx
-import React from 'react';
 import {Text, View} from 'react-native';
 
 type GreetingProps = {
diff --git a/docs/refreshcontrol.md b/docs/refreshcontrol.md
index 7f7faab6744..87fac2e1690 100644
--- a/docs/refreshcontrol.md
+++ b/docs/refreshcontrol.md
@@ -8,14 +8,14 @@ This component is used inside a ScrollView or ListView to add pull to refresh fu
 ## Example
 
 ```SnackPlayer name=RefreshControl&supportedPlatforms=ios,android
-import React from 'react';
+import {useCallback, useState} from 'react';
 import {RefreshControl, ScrollView, StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
 const App = () => {
-  const [refreshing, setRefreshing] = React.useState(false);
+  const [refreshing, setRefreshing] = useState(false);
 
-  const onRefresh = React.useCallback(() => {
+  const onRefresh = useCallback(() => {
     setRefreshing(true);
     setTimeout(() => {
       setRefreshing(false);
diff --git a/docs/safeareaview.md b/docs/safeareaview.md
index fd0d2d479c3..b8373e905a2 100644
--- a/docs/safeareaview.md
+++ b/docs/safeareaview.md
@@ -16,7 +16,6 @@ The purpose of `SafeAreaView` is to render content within the safe area boundari
 To use, wrap your top level view with a `SafeAreaView` with a `flex: 1` style applied to it. You may also want to use a background color that matches your application's design.
 
 ```SnackPlayer name=SafeAreaView&supportedPlatforms=ios
-import React from 'react';
 import {StyleSheet, Text, SafeAreaView} from 'react-native';
 
 const App = () => {
diff --git a/docs/scrollview.md b/docs/scrollview.md
index f24d99073cc..aec1d79a36b 100644
--- a/docs/scrollview.md
+++ b/docs/scrollview.md
@@ -22,7 +22,6 @@ This is where `FlatList` comes into play. `FlatList` renders items lazily, when
 ## Example
 
 ```SnackPlayer name=ScrollView%20Example
-import React from 'react';
 import {StyleSheet, Text, ScrollView, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/docs/sectionlist.md b/docs/sectionlist.md
index d0e9519a301..ead40b211b9 100644
--- a/docs/sectionlist.md
+++ b/docs/sectionlist.md
@@ -21,7 +21,6 @@ If you don't need section support and want a simpler interface, use [`<FlatList>
 ## Example
 
 ```SnackPlayer name=SectionList%20Example
-import React from 'react';
 import {StyleSheet, Text, View, SectionList, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/docs/settings.md b/docs/settings.md
index 01c0533d813..0a5dc85032f 100644
--- a/docs/settings.md
+++ b/docs/settings.md
@@ -8,7 +8,7 @@ title: Settings
 ## Example
 
 ```SnackPlayer name=Settings%20Example&supportedPlatforms=ios
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {Button, Settings, StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/docs/shadow-props.md b/docs/shadow-props.md
index d5e8a037059..7dcaa331e79 100644
--- a/docs/shadow-props.md
+++ b/docs/shadow-props.md
@@ -9,7 +9,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con
 <TabItem value="javascript">
 
 ```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=js&dependencies=@react-native-community/slider
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {Text, View, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 import Slider from '@react-native-community/slider';
@@ -110,7 +110,7 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=tsx&dependencies=@react-native-community/slider
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {Text, View, StyleSheet} from 'react-native';
 import Slider, {SliderProps} from '@react-native-community/slider';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
diff --git a/docs/share.md b/docs/share.md
index 1fc5823361f..46d0f858435 100644
--- a/docs/share.md
+++ b/docs/share.md
@@ -11,7 +11,6 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con
 <TabItem value="javascript">
 
 ```SnackPlayer name=Example&supportedPlatforms=ios,android&ext=js
-import React from 'react';
 import {Alert, Share, Button} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -51,7 +50,6 @@ export default ShareExample;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Example&supportedPlatforms=ios,android&ext=tsx
-import React from 'react';
 import {Alert, Share, Button} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/docs/state.md b/docs/state.md
index bc162f44b40..b8a1959af5f 100644
--- a/docs/state.md
+++ b/docs/state.md
@@ -15,7 +15,7 @@ For example, let's say we want to make text that blinks all the time. The text i
 <TabItem value="javascript">
 
 ```SnackPlayer name=State&ext=js
-import React, {useState, useEffect} from 'react';
+import {useState, useEffect} from 'react';
 import {Text, View} from 'react-native';
 
 const Blink = props => {
@@ -54,7 +54,7 @@ export default BlinkApp;
 <TabItem value="typescript">
 
 ```SnackPlayer name=State&ext=tsx
-import React, {useState, useEffect} from 'react';
+import {useState, useEffect} from 'react';
 import {Text, View} from 'react-native';
 
 type BlinkProps = {
diff --git a/docs/statusbar.md b/docs/statusbar.md
index 6345e7bf4ef..b1d5c210ed6 100644
--- a/docs/statusbar.md
+++ b/docs/statusbar.md
@@ -15,7 +15,7 @@ It is possible to have multiple `StatusBar` components mounted at the same time.
 <TabItem value="javascript">
 
 ```SnackPlayer name=StatusBar%20Component%20Example&supportedPlatforms=android,ios&ext=js
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {
   Button,
   Platform,
@@ -123,7 +123,7 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=StatusBar%20Component%20Example&supportedPlatforms=android,ios&ext=tsx
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {
   Button,
   Platform,
diff --git a/docs/style.md b/docs/style.md
index d847c0597cb..4890db4fbfa 100644
--- a/docs/style.md
+++ b/docs/style.md
@@ -10,7 +10,6 @@ The `style` prop can be a plain old JavaScript object. That's what we usually us
 As a component grows in complexity, it is often cleaner to use `StyleSheet.create` to define several styles in one place. Here's an example:
 
 ```SnackPlayer name=Style
-import React from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 
 const LotsOfStyles = () => {
diff --git a/docs/stylesheet.md b/docs/stylesheet.md
index 78918aeb374..1ac0eab9880 100644
--- a/docs/stylesheet.md
+++ b/docs/stylesheet.md
@@ -6,7 +6,6 @@ title: StyleSheet
 A StyleSheet is an abstraction similar to CSS StyleSheets.
 
 ```SnackPlayer name=StyleSheet
-import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -62,7 +61,6 @@ static compose(style1: Object, style2: Object): Object | Object[];
 Combines two styles such that `style2` will override any styles in `style1`. If either style is falsy, the other one is returned without allocating an array, saving allocations and maintaining reference equality for PureComponent checks.
 
 ```SnackPlayer name=Compose
-import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -123,7 +121,6 @@ static flatten(style: Array<Object extends Record<string, ViewStyle | ImageStyle
 Flattens an array of style objects, into one aggregated style object.
 
 ```SnackPlayer name=Flatten
-import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -196,7 +193,6 @@ Sets a function to use to pre-process a style property value. This is used inter
 A very common pattern is to create overlays with position absolute and zero positioning (`position: 'absolute', left: 0, right: 0, top: 0, bottom: 0`), so `absoluteFill` can be used for convenience and to reduce duplication of these repeated styles. If you want, absoluteFill can be used to create a customized entry in a StyleSheet, e.g.:
 
 ```SnackPlayer name=absoluteFill
-import React from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -257,7 +253,6 @@ export default App;
 This is defined as the width of a thin line on the platform. It can be used as the thickness of a border or division between two elements. Example:
 
 ```SnackPlayer name=hairlineWidth
-import React from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 
 const App = () => (
diff --git a/docs/switch.md b/docs/switch.md
index 4f9055c6256..891847d7fee 100644
--- a/docs/switch.md
+++ b/docs/switch.md
@@ -10,7 +10,7 @@ This is a controlled component that requires an `onValueChange` callback that up
 ## Example
 
 ```SnackPlayer name=Switch&supportedPlatforms=android,ios
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {Switch, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/docs/systrace.md b/docs/systrace.md
index 53cfd62c7a9..9aa54fe8e18 100644
--- a/docs/systrace.md
+++ b/docs/systrace.md
@@ -10,7 +10,6 @@ title: Systrace
 `Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Capture the non-Timed JS events in EasyProfiler.
 
 ```SnackPlayer name=Systrace%20Example
-import React from 'react';
 import {Button, Text, View, StyleSheet, Systrace} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/docs/text-nodes.md b/docs/text-nodes.md
index 63f195ea4b5..17d372c86e5 100644
--- a/docs/text-nodes.md
+++ b/docs/text-nodes.md
@@ -6,14 +6,14 @@ title: Text nodes
 Text nodes represent raw text content on the tree (similar to [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text) nodes on Web). They are not directly accessible via `refs`, but can be accessed using methods like [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes) on element refs.
 
 ```SnackPlayer ext=js&name=Text%20instances%20example
-import * as React from 'react';
-import { SafeAreaView, StyleSheet, Text } from 'react-native';
+import {useEffect, useRef, useState} from 'react';
+import {SafeAreaView, StyleSheet, Text} from 'react-native';
 
 const TextWithRefs = () => {
-  const ref = React.useRef(null);
-  const [viewInfo, setViewInfo] = React.useState('');
+  const ref = useRef(null);
+  const [viewInfo, setViewInfo] = useState('');
 
-  React.useEffect(() => {
+  useEffect(() => {
     // `textElement` is an object implementing the interface described here.
     const textElement = ref.current;
     const textNode = textElement.childNodes[0];
diff --git a/docs/text-style-props.md b/docs/text-style-props.md
index 64ffc4ef816..227fccadbf4 100644
--- a/docs/text-style-props.md
+++ b/docs/text-style-props.md
@@ -11,7 +11,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con
 <TabItem value="javascript">
 
 ```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=js&dependencies=@react-native-community/slider
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {
   FlatList,
   Platform,
@@ -372,7 +372,7 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=tsx&dependencies=@react-native-community/slider
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {
   FlatList,
   Platform,
diff --git a/docs/text.md b/docs/text.md
index 3112485639c..b637552bfa5 100644
--- a/docs/text.md
+++ b/docs/text.md
@@ -10,7 +10,7 @@ A React component for displaying text.
 In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines:
 
 ```SnackPlayer name=Text%20Function%20Component%20Example
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {Text, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -59,7 +59,6 @@ export default TextInANest;
 Both Android and iOS allow you to display formatted text by annotating ranges of a string with specific formatting like bold or colored text (`NSAttributedString` on iOS, `SpannableString` on Android). In practice, this is very tedious. For React Native, we decided to use the web paradigm for this, where you can nest text to achieve the same effect.
 
 ```SnackPlayer name=Nested%20Text%20Example
-import React from 'react';
 import {Text, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/docs/textinput.md b/docs/textinput.md
index c1d62e96278..379f4e5da37 100644
--- a/docs/textinput.md
+++ b/docs/textinput.md
@@ -8,13 +8,13 @@ A foundational component for inputting text into the app via a keyboard. Props p
 The most basic use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. A minimal example:
 
 ```SnackPlayer name=TextInput%20Example
-import React from 'react';
+import {useState} from 'react';
 import {StyleSheet, TextInput} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
 const TextInputExample = () => {
-  const [text, onChangeText] = React.useState('Useless Text');
-  const [number, onChangeNumber] = React.useState('');
+  const [text, onChangeText] = useState('Useless Text');
+  const [number, onChangeNumber] = useState('');
 
   return (
     <SafeAreaProvider>
@@ -53,12 +53,12 @@ Two methods exposed via the native element are `.focus()` and `.blur()` that wil
 Note that some props are only available with `multiline={true/false}`. Additionally, border styles that apply to only one side of the element (e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if `multiline=true`. To achieve the same effect, you can wrap your `TextInput` in a `View`:
 
 ```SnackPlayer name=Multiline%20TextInput%20Example
-import React from 'react';
+import {useState} from 'react';
 import {TextInput, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
 const MultilineTextInputExample = () => {
-  const [value, onChangeText] = React.useState('Useless Multiline Placeholder');
+  const [value, onChangeText] = useState('Useless Multiline Placeholder');
 
   // If you type something in the text box that is a color,
   // the background will change to that color.
diff --git a/docs/the-new-architecture/custom-cxx-types.md b/docs/the-new-architecture/custom-cxx-types.md
index 94db3e21b3f..edc490b8070 100644
--- a/docs/the-new-architecture/custom-cxx-types.md
+++ b/docs/the-new-architecture/custom-cxx-types.md
@@ -173,8 +173,8 @@ First, we need to update the `App.tsx` file to use the new method from the Turbo
 
 ```diff title="App.tsx"
 // ...
-+ const [cubicSource, setCubicSource] = React.useState('')
-+ const [cubicRoot, setCubicRoot] = React.useState(0)
++ const [cubicSource, setCubicSource] = useState('')
++ const [cubicRoot, setCubicRoot] = useState(0)
   return (
     <SafeAreaView style={styles.container}>
       <View>
@@ -366,9 +366,9 @@ To test the code in the app, we have to modify the `App.tsx` file.
 2. Replace the body of the `App()` function with the following code:
 
 ```tsx title="App.tsx (App function body replacement)"
-const [street, setStreet] = React.useState('');
-const [num, setNum] = React.useState('');
-const [isValidAddress, setIsValidAddress] = React.useState<
+const [street, setStreet] = useState('');
+const [num, setNum] = useState('');
+const [isValidAddress, setIsValidAddress] = useState<
   boolean | null
 >(null);
 
diff --git a/docs/the-new-architecture/direct-manipulation.md b/docs/the-new-architecture/direct-manipulation.md
index 6708a643cba..6035b6a64b7 100644
--- a/docs/the-new-architecture/direct-manipulation.md
+++ b/docs/the-new-architecture/direct-manipulation.md
@@ -26,7 +26,6 @@ For example, the following code demonstrates editing the input when you tap a bu
 <TabItem value="javascript">
 
 ```SnackPlayer name=setNativeProps%20on%20TextInput&ext=js
-import React from 'react';
 import {useCallback, useRef} from 'react';
 import {
   StyleSheet,
@@ -74,7 +73,6 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Clear%20text&ext=tsx
-import React from 'react';
 import {useCallback, useRef} from 'react';
 import {
   StyleSheet,
diff --git a/docs/the-new-architecture/fabric-component-native-commands.md b/docs/the-new-architecture/fabric-component-native-commands.md
index ca87360ba3a..5cb5dbd6710 100644
--- a/docs/the-new-architecture/fabric-component-native-commands.md
+++ b/docs/the-new-architecture/fabric-component-native-commands.md
@@ -107,7 +107,6 @@ Now you can use the command in the the app.
 Open the `App.tsx` file and modify it as it follows:
 
 ```diff title="App.tsx"
-import React from 'react';
 -import {Alert, StyleSheet, View} from 'react-native';
 -import WebView from '../specs/WebViewNativeComponent';
 +import {Alert, StyleSheet, Pressable, Text, View} from 'react-native';
@@ -186,7 +185,6 @@ export default App;
 Open the `App.tsx` file and modify it as it follows:
 
 ```diff title="App.jsx"
-import React from 'react';
 -import {Alert, StyleSheet, View} from 'react-native';
 -import WebView from '../specs/WebViewNativeComponent';
 +import {Alert, StyleSheet, Pressable, Text, View} from 'react-native';
diff --git a/docs/the-new-architecture/layout-measurements.md b/docs/the-new-architecture/layout-measurements.md
index cc693a99b0c..715cd42aee7 100644
--- a/docs/the-new-architecture/layout-measurements.md
+++ b/docs/the-new-architecture/layout-measurements.md
@@ -10,7 +10,7 @@ Typical code will look like this:
 
 ```tsx
 function AComponent(children) {
-  const targetRef = React.useRef(null)
+  const targetRef = useRef(null)
 
   useLayoutEffect(() => {
     targetRef.current?.measure((x, y, width, height, pageX, pageY) => {
diff --git a/docs/the-new-architecture/native-modules-custom-events.md b/docs/the-new-architecture/native-modules-custom-events.md
index 0af5bb95957..c44bbf93c16 100644
--- a/docs/the-new-architecture/native-modules-custom-events.md
+++ b/docs/the-new-architecture/native-modules-custom-events.md
@@ -134,7 +134,6 @@ Now, it's time to update the code of the App to handle the new event.
 Open the `App.tsx` file and modify it as it follows:
 
 ```diff title="App.tsx"
-import React from 'react';
 import {
 + Alert,
 + EventSubscription,
diff --git a/docs/the-new-architecture/pure-cxx-modules.md b/docs/the-new-architecture/pure-cxx-modules.md
index b7c08196290..06a11572201 100644
--- a/docs/the-new-architecture/pure-cxx-modules.md
+++ b/docs/the-new-architecture/pure-cxx-modules.md
@@ -423,7 +423,7 @@ It's now time to access our C++ Turbo Native Module from JS. To do so, we have t
 2. Replace the content of the template with the following code:
 
 ```tsx title="App.tsx"
-import React from 'react';
+import {type JSX, useState} from 'react';
 import {
   Button,
   SafeAreaView,
@@ -434,9 +434,9 @@ import {
 } from 'react-native';
 import SampleTurboModule from './specs/NativeSampleModule';
 
-function App(): React.JSX.Element {
-  const [value, setValue] = React.useState('');
-  const [reversedValue, setReversedValue] = React.useState('');
+function App(): JSX.Element {
+  const [value, setValue] = useState('');
+  const [reversedValue, setReversedValue] = useState('');
 
   const onPress = () => {
     const revString = SampleTurboModule.reverseString(value);
diff --git a/docs/toastandroid.md b/docs/toastandroid.md
index 0d7a569235d..07f2b7b20cd 100644
--- a/docs/toastandroid.md
+++ b/docs/toastandroid.md
@@ -17,7 +17,6 @@ Starting with Android 11 (API level 30), setting the gravity has no effect on te
 :::
 
 ```SnackPlayer name=Toast%20Android%20API%20Example&supportedPlatforms=android
-import React from 'react';
 import {StyleSheet, ToastAndroid, Button, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/docs/touchablehighlight.md b/docs/touchablehighlight.md
index 98ea0823783..b34916e0aa4 100644
--- a/docs/touchablehighlight.md
+++ b/docs/touchablehighlight.md
@@ -33,7 +33,7 @@ function MyComponent(props: MyComponentProps) {
 ## Example
 
 ```SnackPlayer name=TouchableHighlight%20Example
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {StyleSheet, Text, TouchableHighlight, View} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/docs/touchablenativefeedback.md b/docs/touchablenativefeedback.md
index a7465b9f2ed..b44f68365e9 100644
--- a/docs/touchablenativefeedback.md
+++ b/docs/touchablenativefeedback.md
@@ -16,7 +16,7 @@ Background drawable of native feedback touchable can be customized with `backgro
 ## Example
 
 ```SnackPlayer name=TouchableNativeFeedback%20Android%20Component%20Example&supportedPlatforms=android
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {Text, View, StyleSheet, TouchableNativeFeedback} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/docs/touchableopacity.md b/docs/touchableopacity.md
index 72af0bc5f49..b48209f5a44 100644
--- a/docs/touchableopacity.md
+++ b/docs/touchableopacity.md
@@ -14,7 +14,7 @@ Opacity is controlled by wrapping the children in an `Animated.View`, which is a
 ## Example
 
 ```SnackPlayer name=TouchableOpacity%20Example
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/docs/touchablewithoutfeedback.md b/docs/touchablewithoutfeedback.md
index c7e875156df..bd2d68fcb42 100644
--- a/docs/touchablewithoutfeedback.md
+++ b/docs/touchablewithoutfeedback.md
@@ -30,7 +30,7 @@ function MyComponent(props: MyComponentProps) {
 ## Example
 
 ```SnackPlayer name=TouchableWithoutFeedback
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {StyleSheet, TouchableWithoutFeedback, Text, View} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/docs/transforms.md b/docs/transforms.md
index 92a75671719..13d17d82103 100644
--- a/docs/transforms.md
+++ b/docs/transforms.md
@@ -8,7 +8,6 @@ Transforms are style properties that will help you modify the appearance and pos
 ## Example
 
 ```SnackPlayer name=Transforms%20Example
-import React from 'react';
 import {ScrollView, StyleSheet, Text, View} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -279,7 +278,7 @@ The `transformOrigin` property sets the origin for a view's transformations. The
 # Example
 
 ```SnackPlayer name=TransformOrigin%20Example
-import React, {useEffect, useRef} from 'react';
+import {useEffect, useRef} from 'react';
 import {Animated, View, StyleSheet, Easing} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/docs/troubleshooting.md b/docs/troubleshooting.md
index 811302be504..540f38b984f 100644
--- a/docs/troubleshooting.md
+++ b/docs/troubleshooting.md
@@ -91,7 +91,6 @@ To revert the `User Search Header Paths` and `Header Search Paths` build setting
 React Native implements a polyfill for WebSockets. These [polyfills](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Core/InitializeCore.js) are initialized as part of the react-native module that you include in your application through `import React from 'react'`. If you load another module that requires WebSockets, such as [Firebase](https://github.com/facebook/react-native/issues/3645), be sure to load/require it after react-native:
 
 ```
-import React from 'react';
 import Firebase from 'firebase';
 ```
 
diff --git a/docs/turbo-native-modules.md b/docs/turbo-native-modules.md
index eeef8624578..4d97e5bbb7a 100644
--- a/docs/turbo-native-modules.md
+++ b/docs/turbo-native-modules.md
@@ -166,7 +166,7 @@ The `TurboModuleRegistry` supports 2 modes of retrieving a Turbo Native Module:
 - `getEnforcing<T>(name: string): T` which will throw an exception if the Turbo Native Module is unavailable. This assumes the module is always available.
 
 ```tsx title="App.tsx"
-import React from 'react';
+import {useEffect, useState, type JSX} from 'react';
 import {
   SafeAreaView,
   StyleSheet,
@@ -179,14 +179,14 @@ import NativeLocalStorage from './specs/NativeLocalStorage';
 
 const EMPTY = '<empty>';
 
-function App(): React.JSX.Element {
-  const [value, setValue] = React.useState<string | null>(null);
+function App(): JSX.Element {
+  const [value, setValue] = useState<string | null>(null);
 
-  const [editingValue, setEditingValue] = React.useState<
-    string | null
-  >(null);
+  const [editingValue, setEditingValue] = useState<string | null>(
+    null,
+  );
 
-  React.useEffect(() => {
+  useEffect(() => {
     const storedValue = NativeLocalStorage?.getItem('myKey');
     setValue(storedValue ?? '');
   }, []);
diff --git a/docs/tutorial.md b/docs/tutorial.md
index d1a92919cd7..80c79e1ed8e 100644
--- a/docs/tutorial.md
+++ b/docs/tutorial.md
@@ -14,7 +14,6 @@ Let's do this thing.
 In accordance with the ancient traditions of our people, we must first build an app that does nothing except say "Hello, world!". Here it is:
 
 ```SnackPlayer name=Hello%20World
-import React from 'react';
 import {Text, View} from 'react-native';
 
 const HelloWorldApp = () => {
@@ -67,7 +66,6 @@ Your own components can also use `props`. This lets you make a single component
 <TabItem value="javascript">
 
 ```SnackPlayer name=Hello%20Props&ext=js
-import React from 'react';
 import {Text, View, StyleSheet} from 'react-native';
 
 const styles = StyleSheet.create({
@@ -101,7 +99,6 @@ export default LotsOfGreetings;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Hello%20Props&ext=tsx
-import React from 'react';
 import {Text, View, StyleSheet} from 'react-native';
 
 const styles = StyleSheet.create({
@@ -157,9 +154,9 @@ In a React component, the props are the variables that we pass from a parent com
 <div className="two-columns">
 
 ```tsx
-// ReactJS Counter Example using Hooks!
+// React Counter Example using Hooks!
 
-import React, {useState} from 'react';
+import {useState} from 'react';
 
 
 
@@ -190,7 +187,7 @@ const App = () => {
 ```tsx
 // React Native Counter Example using Hooks!
 
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {View, Text, Button, StyleSheet} from 'react-native';
 
 const App = () => {
@@ -224,7 +221,7 @@ As shown above, there is no difference in handling the `state` between [React](h
 In the following example we will show the same above counter example using classes.
 
 ```SnackPlayer name=Hello%20Classes
-import React, {Component} from 'react';
+import {Component} from 'react';
 import {StyleSheet, TouchableOpacity, Text, View} from 'react-native';
 
 class App extends Component {
diff --git a/docs/usecolorscheme.md b/docs/usecolorscheme.md
index 42f16f775d7..14b7becabe8 100644
--- a/docs/usecolorscheme.md
+++ b/docs/usecolorscheme.md
@@ -20,7 +20,6 @@ The `useColorScheme` React hook provides and subscribes to color scheme updates
 ## Example
 
 ```SnackPlayer
-import React from 'react';
 import {Text, StyleSheet, useColorScheme} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/docs/usewindowdimensions.md b/docs/usewindowdimensions.md
index 92bb1931d32..3e8a8077370 100644
--- a/docs/usewindowdimensions.md
+++ b/docs/usewindowdimensions.md
@@ -16,7 +16,6 @@ const {height, width} = useWindowDimensions();
 ## Example
 
 ```SnackPlayer name=useWindowDimensions&supportedPlatforms=ios,android
-import React from 'react';
 import {StyleSheet, Text, useWindowDimensions} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/docs/using-a-listview.md b/docs/using-a-listview.md
index cf13fa66a6c..a5a04f40279 100644
--- a/docs/using-a-listview.md
+++ b/docs/using-a-listview.md
@@ -12,7 +12,6 @@ The `FlatList` component requires two props: `data` and `renderItem`. `data` is
 This example creates a basic `FlatList` of hardcoded data. Each item in the `data` props is rendered as a `Text` component. The `FlatListBasics` component then renders the `FlatList` and all `Text` components.
 
 ```SnackPlayer name=FlatList%20Basics
-import React from 'react';
 import {FlatList, StyleSheet, Text, View} from 'react-native';
 
 const styles = StyleSheet.create({
@@ -55,7 +54,6 @@ export default FlatListBasics;
 If you want to render a set of data broken into logical sections, maybe with section headers, similar to `UITableView` on iOS, then a [SectionList](sectionlist.md) is the way to go.
 
 ```SnackPlayer name=SectionList%20Basics
-import React from 'react';
 import {SectionList, StyleSheet, Text, View} from 'react-native';
 
 const styles = StyleSheet.create({
diff --git a/docs/using-a-scrollview.md b/docs/using-a-scrollview.md
index e4de6207a71..3ffae817bf0 100644
--- a/docs/using-a-scrollview.md
+++ b/docs/using-a-scrollview.md
@@ -8,7 +8,6 @@ The [ScrollView](scrollview.md) is a generic scrolling container that can contai
 This example creates a vertical `ScrollView` with both images and text mixed together.
 
 ```SnackPlayer name=Using%20ScrollView
-import React from 'react';
 import {Image, ScrollView, Text} from 'react-native';
 
 const logo = {
diff --git a/docs/vibration.md b/docs/vibration.md
index 44a0af2db43..bdb564ab331 100644
--- a/docs/vibration.md
+++ b/docs/vibration.md
@@ -8,7 +8,6 @@ Vibrates the device.
 ## Example
 
 ```SnackPlayer name=Vibration%20Example&supportedPlatforms=ios,android
-import React from 'react';
 import {
   Button,
   Platform,
diff --git a/docs/view-style-props.md b/docs/view-style-props.md
index 431557883ad..562aa837ad5 100644
--- a/docs/view-style-props.md
+++ b/docs/view-style-props.md
@@ -9,7 +9,6 @@ import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameFor
 ### Example
 
 ```SnackPlayer name=ViewStyleProps
-import React from 'react';
 import {View, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/docs/view.md b/docs/view.md
index 3fd3c7fb4bd..405218dcc9b 100644
--- a/docs/view.md
+++ b/docs/view.md
@@ -12,7 +12,6 @@ The most fundamental component for building a UI, `View` is a container that sup
 This example creates a `View` that wraps two boxes with color and a text component in a row with padding.
 
 ```SnackPlayer name=View%20Example
-import React from 'react';
 import {View, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/docs/virtualizedlist.md b/docs/virtualizedlist.md
index e0a31ffb2e2..7cb55d1b5d7 100644
--- a/docs/virtualizedlist.md
+++ b/docs/virtualizedlist.md
@@ -15,7 +15,6 @@ Virtualization massively improves memory consumption and performance of large li
 <TabItem value="javascript">
 
 ```SnackPlayer name=VirtualizedListExample&ext=js
-import React from 'react';
 import {View, VirtualizedList, StyleSheet, Text, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -71,7 +70,6 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=VirtualizedListExample&ext=tsx
-import React from 'react';
 import {View, VirtualizedList, StyleSheet, Text, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.80/_fabric-native-components.jsx b/website/versioned_docs/version-0.80/_fabric-native-components.jsx
index fc6a3171a4f..69bc6f31268 100644
--- a/website/versioned_docs/version-0.80/_fabric-native-components.jsx
+++ b/website/versioned_docs/version-0.80/_fabric-native-components.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import IOSContent from './fabric-native-components-ios.md';
 import AndroidContent from './fabric-native-components-android.md';
 
diff --git a/website/versioned_docs/version-0.80/_integration-with-existing-apps-ios.md b/website/versioned_docs/version-0.80/_integration-with-existing-apps-ios.md
index 33d02fe901d..1509c3e72f0 100644
--- a/website/versioned_docs/version-0.80/_integration-with-existing-apps-ios.md
+++ b/website/versioned_docs/version-0.80/_integration-with-existing-apps-ios.md
@@ -1,650 +1,650 @@
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-## Key Concepts
-
-The keys to integrating React Native components into your iOS application are to:
-
-1. Set up the correct directory structure.
-2. Install the necessary NPM dependencies.
-3. Adding React Native to your Podfile configuration.
-4. Writing the TypeScript code for your first React Native screen.
-5. Integrate React Native with your iOS code using a `RCTRootView`.
-6. Testing your integration by running the bundler and seeing your app in action.
-
-## Using the Community Template
-
-While you follow this guide, we suggest you to use the [React Native Community Template](https://github.com/react-native-community/template/) as reference. The template contains a **minimal iOS app** and will help you understanding how to integrate React Native into an existing iOS app.
-
-## Prerequisites
-
-Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](getting-started-without-a-framework) to configure your development environment for building React Native apps for iOS.
-This guide also assumes you're familiar with the basics of iOS development such as creating a `UIViewController` and editing the `Podfile` file.
-
-### 1. Set up directory structure
-
-To ensure a smooth experience, create a new folder for your integrated React Native project, then **move your existing iOS project** to the `/ios` subfolder.
-
-## 2. Install NPM dependencies
-
-Go to the root directory and run the following command:
-
-```shell
-curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.78-stable/template/package.json
-```
-
-This will copy the `package.json` [file from the Community template](https://github.com/react-native-community/template/blob/0.78-stable/template/package.json) to your project.
-
-Next, install the NPM packages by running:
-
-<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
-<TabItem value="npm">
-
-```shell
-npm install
-```
-
-</TabItem>
-<TabItem value="yarn">
-
-```shell
-yarn install
-```
-
-</TabItem>
-</Tabs>
-
-Installation process has created a new `node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
-
-Add `node_modules/` to your `.gitignore` file (here the [Community default one](https://github.com/react-native-community/template/blob/0.78-stable/template/_gitignore)).
-
-### 3. Install Development tools
-
-### Command Line Tools for Xcode
-
-Install the Command Line Tools. Choose **Settings... (or Preferences...)** in the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.
-
-![Xcode Command Line Tools](/docs/assets/GettingStartedXcodeCommandLineTools.png)
-
-### CocoaPods
-
-[CocoaPods](https://cocoapods.org) is a package management tool for iOS and macOS development. We use it to add the actual React Native framework code locally into your current project.
-
-We recommend installing CocoaPods using [Homebrew](https://brew.sh/):
-
-```shell
-brew install cocoapods
-```
-
-## 4. Adding React Native to your app
-
-### Configuring CocoaPods
-
-To configure CocoaPods, we need two files:
-
-- A **Gemfile** that defines which Ruby dependencies we need.
-- A **Podfile** that defines how to properly install our dependencies.
-
-For the **Gemfile**, go to the root directory of your project and run this command
-
-```sh
-curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.78-stable/template/Gemfile
-```
-
-This will download the Gemfile from the template.
-
-:::note
-If you created your project with Xcode 16, you need to update the Gemfile as it follows:
-
-```diff
--gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
-+gem 'cocoapods', '1.16.2'
-gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
--gem 'xcodeproj', '< 1.26.0'
-+gem 'xcodeproj', '1.27.0'
-```
-
-Xcode 16 generates a project in a slightly different ways from previous versions of Xcode, and you need the latest CocoaPods and Xcodeproj gems to make it work properly.
-:::
-
-Similarly, for the **Podfile**, go to the `ios` folder of your project and run
-
-```sh
-curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.78-stable/template/ios/Podfile
-```
-
-Please use the Community Template as a reference point for the [Gemfile](https://github.com/react-native-community/template/blob/0.78-stable/template/Gemfile) and for the [Podfile](https://github.com/react-native-community/template/blob/0.78-stable/template/ios/Podfile).
-
-:::note
-Remember to change [this line](https://github.com/react-native-community/template/blob/0.78-stable/template/ios/Podfile#L17).
-:::
-
-Now, we need to run a couple of extra commands to install the Ruby gems and the Pods.
-Navigate to the `ios` folder and run the following commands:
-
-```sh
-bundle install
-bundle exec pod install
-```
-
-The first command will install the Ruby dependencies and the second command will actually integrate the React Native code in your application so that your iOS files can import the React Native headers.
-
-## 5. Writing the TypeScript Code
-
-Now we will actually modify the native iOS application to integrate React Native.
-
-The first bit of code we will write is the actual React Native code for the new screen that will be integrated into our application.
-
-### Create a `index.js` file
-
-First, create an empty `index.js` file in the root of your React Native project.
-
-`index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `import`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it.
-
-Our `index.js` should look as follows (here the [Community template file as reference](https://github.com/react-native-community/template/blob/0.78-stable/template/index.js)):
-
-```js
-import {AppRegistry} from 'react-native';
-import App from './App';
-
-AppRegistry.registerComponent('HelloWorld', () => App);
-```
-
-### Create a `App.tsx` file
-
-Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX](<https://en.wikipedia.org/wiki/JSX_(JavaScript)>) expressions. It contains the root React Native component that we will integrate into our iOS application ([link](https://github.com/react-native-community/template/blob/0.78-stable/template/App.tsx)):
-
-```tsx
-import React from 'react';
-import {
-  SafeAreaView,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  useColorScheme,
-  View,
-} from 'react-native';
-
-import {
-  Colors,
-  DebugInstructions,
-  Header,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
-function App(): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
-
-  return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundStyle.backgroundColor}
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
-        <View
-          style={{
-            backgroundColor: isDarkMode
-              ? Colors.black
-              : Colors.white,
-            padding: 24,
-          }}>
-          <Text style={styles.title}>Step One</Text>
-          <Text>
-            Edit <Text style={styles.bold}>App.tsx</Text> to
-            change this screen and see your edits.
-          </Text>
-          <Text style={styles.title}>See your changes</Text>
-          <ReloadInstructions />
-          <Text style={styles.title}>Debug</Text>
-          <DebugInstructions />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  title: {
-    fontSize: 24,
-    fontWeight: '600',
-  },
-  bold: {
-    fontWeight: '700',
-  },
-});
-
-export default App;
-```
-
-Here the [Community template file as reference](https://github.com/react-native-community/template/blob/0.78-stable/template/App.tsx)
-
-## 5. Integrating with your iOS code
-
-We now need to add some native code in order to start the React Native runtime and tell it to render our React components.
-
-### Requirements
-
-React Native initialization is now unbound to any specific part of an iOS app.
-
-React Native can be initialized using a class called `RCTReactNativeFactory`, that takes care of handling the React Native lifecycle for you.
-
-Once the class is initialized, you can either start a React Native view providing a `UIWindow` object, or you can ask for the factory to generate a `UIView` that you can load in any `UIViewController.`
-
-In the following example, we will create a ViewController that can load a React Native view as it's `view`.
-
-#### Create the ReactViewController
-
-Create a new file from template (<kbd>⌘</kbd>+<kbd>N</kbd>) and choose the Cocoa Touch Class template.
-
-Make sure to select `UIViewController` as the "Subclass of" field.
-
-<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
-<TabItem value="objc">
-
-Now open the `ReactViewController.m` file and apply the following changes
-
-```diff title="ReactViewController.m"
-#import "ReactViewController.h"
-+#import <React/RCTBundleURLProvider.h>
-+#import <RCTReactNativeFactory.h>
-+#import <RCTDefaultReactNativeFactoryDelegate.h>
-+#import <RCTAppDependencyProvider.h>
-
-
-@interface ReactViewController ()
-
-@end
-
-+@interface ReactNativeFactoryDelegate: RCTDefaultReactNativeFactoryDelegate
-+@end
-
--@implementation ReactViewController
-+@implementation ReactViewController {
-+  RCTReactNativeFactory *_factory;
-+  id<RCTReactNativeFactoryDelegate> _factoryDelegate;
-+}
-
- - (void)viewDidLoad {
-     [super viewDidLoad];
-     // Do any additional setup after loading the view.
-+    _factoryDelegate = [ReactNativeFactoryDelegate new];
-+    _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new];
-+    _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate];
-+    self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"];
- }
-
-@end
-
-+@implementation ReactNativeFactoryDelegate
-+
-+- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
-+{
-+  return [self bundleURL];
-+}
-+
-+- (NSURL *)bundleURL
-+{
-+#if DEBUG
-+  return [RCTBundleURLProvider.sharedSettings jsBundleURLForBundleRoot:@"index"];
-+#else
-+  return [NSBundle.mainBundle URLForResource:@"main" withExtension:@"jsbundle"];
-+#endif
-+}
-
-@end
-
-```
-
-</TabItem>
-<TabItem value="swift">
-
-Now open the `ReactViewController.swift` file and apply the following changes
-
-```diff title="ReactViewController.swift"
-import UIKit
-+import React
-+import React_RCTAppDelegate
-+import ReactAppDependencyProvider
-
-class ReactViewController: UIViewController {
-+  var reactNativeFactory: RCTReactNativeFactory?
-+  var reactNativeFactoryDelegate: RCTReactNativeFactoryDelegate?
-
-  override func viewDidLoad() {
-    super.viewDidLoad()
-+    reactNativeFactoryDelegate = ReactNativeDelegate()
-+    reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider()
-+    reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!)
-+    view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld")
-
-  }
-}
-
-+class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {
-+    override func sourceURL(for bridge: RCTBridge) -> URL? {
-+      self.bundleURL()
-+    }
-+
-+    override func bundleURL() -> URL? {
-+      #if DEBUG
-+      RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
-+      #else
-+      Bundle.main.url(forResource: "main", withExtension: "jsbundle")
-+      #endif
-+    }
-+
-+}
-```
-
-</TabItem>
-</Tabs>
-
-#### Presenting a React Native view in a rootViewController
-
-Finally, we can present our React Native view. To do so, we need a new View Controller that can host a view in which we can load the JS content.
-We already have the initial `ViewController`, and we can make it present the `ReactViewController`. There are several ways to do so, depending on your app. For this example, we assume that you have a button that presents React Native modally.
-
-<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
-<TabItem value="objc">
-
-```diff title="ViewController.m"
-#import "ViewController.h"
-+#import "ReactViewController.h"
-
-@interface ViewController ()
-
-@end
-
-- @implementation ViewController
-+@implementation ViewController {
-+  ReactViewController *reactViewController;
-+}
-
- - (void)viewDidLoad {
-   [super viewDidLoad];
-   // Do any additional setup after loading the view.
-   self.view.backgroundColor = UIColor.systemBackgroundColor;
-+  UIButton *button = [UIButton new];
-+  [button setTitle:@"Open React Native" forState:UIControlStateNormal];
-+  [button setTitleColor:UIColor.systemBlueColor forState:UIControlStateNormal];
-+  [button setTitleColor:UIColor.blueColor forState:UIControlStateHighlighted];
-+  [button addTarget:self action:@selector(presentReactNative) forControlEvents:UIControlEventTouchUpInside];
-+  [self.view addSubview:button];
-
-+  button.translatesAutoresizingMaskIntoConstraints = NO;
-+  [NSLayoutConstraint activateConstraints:@[
-+    [button.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor],
-+    [button.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor],
-+    [button.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor],
-+    [button.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
-+  ]];
- }
-
-+- (void)presentReactNative
-+{
-+  if (reactViewController == NULL) {
-+    reactViewController = [ReactViewController new];
-+  }
-+  [self presentViewController:reactViewController animated:YES];
-+}
-
-@end
-```
-
-</TabItem>
-<TabItem value="swift">
-
-```diff title="ViewController.swift"
-import UIKit
-
-class ViewController: UIViewController {
-
-+  var reactViewController: ReactViewController?
-
-  override func viewDidLoad() {
-    super.viewDidLoad()
-    // Do any additional setup after loading the view.
-    self.view.backgroundColor = .systemBackground
-
-+    let button = UIButton()
-+    button.setTitle("Open React Native", for: .normal)
-+    button.setTitleColor(.systemBlue, for: .normal)
-+    button.setTitleColor(.blue, for: .highlighted)
-+    button.addAction(UIAction { [weak self] _ in
-+      guard let self else { return }
-+      if reactViewController == nil {
-+       reactViewController = ReactViewController()
-+      }
-+      present(reactViewController!, animated: true)
-+    }, for: .touchUpInside)
-+    self.view.addSubview(button)
-+
-+    button.translatesAutoresizingMaskIntoConstraints = false
-+    NSLayoutConstraint.activate([
-+      button.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
-+      button.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
-+      button.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
-+      button.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
-+    ])
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-Make sure to disable the Sandbox scripting. To achieve this, in Xcode, click on your app, then on build settings. Filter for script and set the `User Script Sandboxing` to `NO`. This step is needed to properly switch between the Debug and Release version of the [Hermes engine](https://github.com/facebook/hermes/blob/main/README.md) that we ship with React Native.
-
-![Disable Sandboxing](/docs/assets/disable-sandboxing.png)
-
-Finally, make sure to add the `UIViewControllerBasedStatusBarAppearance` key into your `Info.plist` file, with value of `NO`.
-
-![Disable UIViewControllerBasedStatusBarAppearance](/docs/assets/disable-UIViewControllerBasedStatusBarAppearance.png)
-
-## 6. Test your integration
-
-You have completed all the basic steps to integrate React Native with your application. Now we will start the [Metro bundler](https://metrobundler.dev/) to build your TypeScript application code into a bundle. Metro's HTTP server shares the bundle from `localhost` on your developer environment to a simulator or device. This allows for [hot reloading](https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading).
-
-First, you need to create a `metro.config.js` file in the root of your project as follows:
-
-```js
-const {getDefaultConfig} = require('@react-native/metro-config');
-module.exports = getDefaultConfig(__dirname);
-```
-
-You can checkout the [metro.config.js file](https://github.com/react-native-community/template/blob/0.78-stable/template/metro.config.js) from the Community template file as reference.
-
-Then, you need to create a `.watchmanconfig` file in the root of your project. The file must contain an empty json object:
-
-```sh
-echo {} > .watchmanconfig
-```
-
-Once you have the configurations file in place, you can run the bundler. Run the following command in the root directory of your project:
-
-<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
-<TabItem value="npm">
-
-```shell
-npm start
-```
-
-</TabItem>
-<TabItem value="yarn">
-
-```shell
-yarn start
-```
-
-</TabItem>
-</Tabs>
-
-Now build and run your iOS app as normal.
-
-Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display:
-
-<center><img src="/docs/assets/EmbeddedAppIOS078.gif" width="300" /></center>
-
-### Creating a release build in Xcode
-
-You can use Xcode to create your release builds too! The only additional step is to add a script that is executed when the app is built to package your JS and images into the iOS application.
-
-1. In Xcode, select your application
-2. Click on `Build Phases`
-3. Click on the `+` in the top left corner and select `New Run Script Phase`
-4. Click on the `Run Script` line and rename the Script to `Bundle React Native code and images`
-5. Paste in the text box the following script
-
-```sh title="Build React Native code and image"
-set -e
-
-WITH_ENVIRONMENT="$REACT_NATIVE_PATH/scripts/xcode/with-environment.sh"
-REACT_NATIVE_XCODE="$REACT_NATIVE_PATH/scripts/react-native-xcode.sh"
-
-/bin/sh -c "$WITH_ENVIRONMENT $REACT_NATIVE_XCODE"
-```
-
-6. Drag and drop the script before the one called `[CP] Embed Pods Frameworks`.
-
-Now, if you build your app for Release, it will work as expected.
-
-## 7. Passing initial props to the React Native view
-
-In some case, you'd like to pass some information from the Native app to JavaScript. For example, you might want to pass the user id of the currently logged user to React Native, together with a token that can be used to retrieve information from a database.
-
-This is possible by using the `initialProperties` parameter of the `view(withModuleName:initialProperty)` overload of the `RCTReactNativeFactory` class. The following steps shows you how to do it.
-
-### Update the App.tsx file to read the initial properties.
-
-Open the `App.tsx` file and add the following code:
-
-```diff title="App.tsx"
-import {
-  Colors,
-  DebugInstructions,
-  Header,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
--function App(): React.JSX.Element {
-+function App(props): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
-
-  return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundStyle.backgroundColor}
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
--       <View
--         style={{
--           backgroundColor: isDarkMode
--             ? Colors.black
--             : Colors.white,
--           padding: 24,
--         }}>
--         <Text style={styles.title}>Step One</Text>
--         <Text>
--           Edit <Text style={styles.bold}>App.tsx</Text> to
--           change this screen and see your edits.
--         </Text>
--         <Text style={styles.title}>See your changes</Text>
--         <ReloadInstructions />
--         <Text style={styles.title}>Debug</Text>
--         <DebugInstructions />
-+         <Text style={styles.title}>UserID: {props.userID}</Text>
-+         <Text style={styles.title}>Token: {props.token}</Text>
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  title: {
-    fontSize: 24,
-    fontWeight: '600',
-+   marginLeft: 20,
-  },
-  bold: {
-    fontWeight: '700',
-  },
-});
-
-export default App;
-```
-
-These changes will tell React Native that your App component is now accepting some properties. The `RCTreactNativeFactory` will take care of passing them to the component when it's rendered.
-
-### Update the Native code to pass the initial properties to JavaScript.
-
-<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
-<TabItem value="objc">
-
-Modify the `ReactViewController.mm` to pass the initial properties to JavaScript.
-
-```diff title="ReactViewController.mm"
- - (void)viewDidLoad {
-   [super viewDidLoad];
-   // Do any additional setup after loading the view.
-
-   _factoryDelegate = [ReactNativeFactoryDelegate new];
-   _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new];
-   _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate];
--  self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"];
-+  self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld" initialProperties:@{
-+    @"userID": @"12345678",
-+    @"token": @"secretToken"
-+  }];
-}
-```
-
-</TabItem>
-<TabItem value="swift">
-
-Modify the `ReactViewController.swift` to pass the initial properties to the React Native view.
-
-```diff title="ReactViewController.swift"
-  override func viewDidLoad() {
-    super.viewDidLoad()
-    reactNativeFactoryDelegate = ReactNativeDelegate()
-    reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider()
-    reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!)
--   view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld")
-+   view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld" initialProperties: [
-+     "userID": "12345678",
-+     "token": "secretToken"
-+])
-
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-3. Run your app once again. You should see the following screen after you present the `ReactViewController`:
-
-<center>
-  <img src="/docs/assets/brownfield-with-initial-props.png" width="30%" height="30%"/>
-</center>
-
-## Now what?
-
-At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native.
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+## Key Concepts
+
+The keys to integrating React Native components into your iOS application are to:
+
+1. Set up the correct directory structure.
+2. Install the necessary NPM dependencies.
+3. Adding React Native to your Podfile configuration.
+4. Writing the TypeScript code for your first React Native screen.
+5. Integrate React Native with your iOS code using a `RCTRootView`.
+6. Testing your integration by running the bundler and seeing your app in action.
+
+## Using the Community Template
+
+While you follow this guide, we suggest you to use the [React Native Community Template](https://github.com/react-native-community/template/) as reference. The template contains a **minimal iOS app** and will help you understanding how to integrate React Native into an existing iOS app.
+
+## Prerequisites
+
+Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](getting-started-without-a-framework) to configure your development environment for building React Native apps for iOS.
+This guide also assumes you're familiar with the basics of iOS development such as creating a `UIViewController` and editing the `Podfile` file.
+
+### 1. Set up directory structure
+
+To ensure a smooth experience, create a new folder for your integrated React Native project, then **move your existing iOS project** to the `/ios` subfolder.
+
+## 2. Install NPM dependencies
+
+Go to the root directory and run the following command:
+
+```shell
+curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.78-stable/template/package.json
+```
+
+This will copy the `package.json` [file from the Community template](https://github.com/react-native-community/template/blob/0.78-stable/template/package.json) to your project.
+
+Next, install the NPM packages by running:
+
+<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
+<TabItem value="npm">
+
+```shell
+npm install
+```
+
+</TabItem>
+<TabItem value="yarn">
+
+```shell
+yarn install
+```
+
+</TabItem>
+</Tabs>
+
+Installation process has created a new `node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
+
+Add `node_modules/` to your `.gitignore` file (here the [Community default one](https://github.com/react-native-community/template/blob/0.78-stable/template/_gitignore)).
+
+### 3. Install Development tools
+
+### Command Line Tools for Xcode
+
+Install the Command Line Tools. Choose **Settings... (or Preferences...)** in the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.
+
+![Xcode Command Line Tools](/docs/assets/GettingStartedXcodeCommandLineTools.png)
+
+### CocoaPods
+
+[CocoaPods](https://cocoapods.org) is a package management tool for iOS and macOS development. We use it to add the actual React Native framework code locally into your current project.
+
+We recommend installing CocoaPods using [Homebrew](https://brew.sh/):
+
+```shell
+brew install cocoapods
+```
+
+## 4. Adding React Native to your app
+
+### Configuring CocoaPods
+
+To configure CocoaPods, we need two files:
+
+- A **Gemfile** that defines which Ruby dependencies we need.
+- A **Podfile** that defines how to properly install our dependencies.
+
+For the **Gemfile**, go to the root directory of your project and run this command
+
+```sh
+curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.78-stable/template/Gemfile
+```
+
+This will download the Gemfile from the template.
+
+:::note
+If you created your project with Xcode 16, you need to update the Gemfile as it follows:
+
+```diff
+-gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
++gem 'cocoapods', '1.16.2'
+gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
+-gem 'xcodeproj', '< 1.26.0'
++gem 'xcodeproj', '1.27.0'
+```
+
+Xcode 16 generates a project in a slightly different ways from previous versions of Xcode, and you need the latest CocoaPods and Xcodeproj gems to make it work properly.
+:::
+
+Similarly, for the **Podfile**, go to the `ios` folder of your project and run
+
+```sh
+curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.78-stable/template/ios/Podfile
+```
+
+Please use the Community Template as a reference point for the [Gemfile](https://github.com/react-native-community/template/blob/0.78-stable/template/Gemfile) and for the [Podfile](https://github.com/react-native-community/template/blob/0.78-stable/template/ios/Podfile).
+
+:::note
+Remember to change [this line](https://github.com/react-native-community/template/blob/0.78-stable/template/ios/Podfile#L17).
+:::
+
+Now, we need to run a couple of extra commands to install the Ruby gems and the Pods.
+Navigate to the `ios` folder and run the following commands:
+
+```sh
+bundle install
+bundle exec pod install
+```
+
+The first command will install the Ruby dependencies and the second command will actually integrate the React Native code in your application so that your iOS files can import the React Native headers.
+
+## 5. Writing the TypeScript Code
+
+Now we will actually modify the native iOS application to integrate React Native.
+
+The first bit of code we will write is the actual React Native code for the new screen that will be integrated into our application.
+
+### Create a `index.js` file
+
+First, create an empty `index.js` file in the root of your React Native project.
+
+`index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `import`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it.
+
+Our `index.js` should look as follows (here the [Community template file as reference](https://github.com/react-native-community/template/blob/0.78-stable/template/index.js)):
+
+```js
+import {AppRegistry} from 'react-native';
+import App from './App';
+
+AppRegistry.registerComponent('HelloWorld', () => App);
+```
+
+### Create a `App.tsx` file
+
+Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX](<https://en.wikipedia.org/wiki/JSX_(JavaScript)>) expressions. It contains the root React Native component that we will integrate into our iOS application ([link](https://github.com/react-native-community/template/blob/0.78-stable/template/App.tsx)):
+
+```tsx
+import {type JSX} from 'react';
+import {
+  SafeAreaView,
+  ScrollView,
+  StatusBar,
+  StyleSheet,
+  Text,
+  useColorScheme,
+  View,
+} from 'react-native';
+
+import {
+  Colors,
+  DebugInstructions,
+  Header,
+  ReloadInstructions,
+} from 'react-native/Libraries/NewAppScreen';
+
+function App(): JSX.Element {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const backgroundStyle = {
+    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+  };
+
+  return (
+    <SafeAreaView style={backgroundStyle}>
+      <StatusBar
+        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
+        backgroundColor={backgroundStyle.backgroundColor}
+      />
+      <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        style={backgroundStyle}>
+        <Header />
+        <View
+          style={{
+            backgroundColor: isDarkMode
+              ? Colors.black
+              : Colors.white,
+            padding: 24,
+          }}>
+          <Text style={styles.title}>Step One</Text>
+          <Text>
+            Edit <Text style={styles.bold}>App.tsx</Text> to
+            change this screen and see your edits.
+          </Text>
+          <Text style={styles.title}>See your changes</Text>
+          <ReloadInstructions />
+          <Text style={styles.title}>Debug</Text>
+          <DebugInstructions />
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 24,
+    fontWeight: '600',
+  },
+  bold: {
+    fontWeight: '700',
+  },
+});
+
+export default App;
+```
+
+Here the [Community template file as reference](https://github.com/react-native-community/template/blob/0.78-stable/template/App.tsx)
+
+## 5. Integrating with your iOS code
+
+We now need to add some native code in order to start the React Native runtime and tell it to render our React components.
+
+### Requirements
+
+React Native initialization is now unbound to any specific part of an iOS app.
+
+React Native can be initialized using a class called `RCTReactNativeFactory`, that takes care of handling the React Native lifecycle for you.
+
+Once the class is initialized, you can either start a React Native view providing a `UIWindow` object, or you can ask for the factory to generate a `UIView` that you can load in any `UIViewController.`
+
+In the following example, we will create a ViewController that can load a React Native view as it's `view`.
+
+#### Create the ReactViewController
+
+Create a new file from template (<kbd>⌘</kbd>+<kbd>N</kbd>) and choose the Cocoa Touch Class template.
+
+Make sure to select `UIViewController` as the "Subclass of" field.
+
+<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
+<TabItem value="objc">
+
+Now open the `ReactViewController.m` file and apply the following changes
+
+```diff title="ReactViewController.m"
+#import "ReactViewController.h"
++#import <React/RCTBundleURLProvider.h>
++#import <RCTReactNativeFactory.h>
++#import <RCTDefaultReactNativeFactoryDelegate.h>
++#import <RCTAppDependencyProvider.h>
+
+
+@interface ReactViewController ()
+
+@end
+
++@interface ReactNativeFactoryDelegate: RCTDefaultReactNativeFactoryDelegate
++@end
+
+-@implementation ReactViewController
++@implementation ReactViewController {
++  RCTReactNativeFactory *_factory;
++  id<RCTReactNativeFactoryDelegate> _factoryDelegate;
++}
+
+ - (void)viewDidLoad {
+     [super viewDidLoad];
+     // Do any additional setup after loading the view.
++    _factoryDelegate = [ReactNativeFactoryDelegate new];
++    _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new];
++    _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate];
++    self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"];
+ }
+
+@end
+
++@implementation ReactNativeFactoryDelegate
++
++- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
++{
++  return [self bundleURL];
++}
++
++- (NSURL *)bundleURL
++{
++#if DEBUG
++  return [RCTBundleURLProvider.sharedSettings jsBundleURLForBundleRoot:@"index"];
++#else
++  return [NSBundle.mainBundle URLForResource:@"main" withExtension:@"jsbundle"];
++#endif
++}
+
+@end
+
+```
+
+</TabItem>
+<TabItem value="swift">
+
+Now open the `ReactViewController.swift` file and apply the following changes
+
+```diff title="ReactViewController.swift"
+import UIKit
++import React
++import React_RCTAppDelegate
++import ReactAppDependencyProvider
+
+class ReactViewController: UIViewController {
++  var reactNativeFactory: RCTReactNativeFactory?
++  var reactNativeFactoryDelegate: RCTReactNativeFactoryDelegate?
+
+  override func viewDidLoad() {
+    super.viewDidLoad()
++    reactNativeFactoryDelegate = ReactNativeDelegate()
++    reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider()
++    reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!)
++    view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld")
+
+  }
+}
+
++class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {
++    override func sourceURL(for bridge: RCTBridge) -> URL? {
++      self.bundleURL()
++    }
++
++    override func bundleURL() -> URL? {
++      #if DEBUG
++      RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
++      #else
++      Bundle.main.url(forResource: "main", withExtension: "jsbundle")
++      #endif
++    }
++
++}
+```
+
+</TabItem>
+</Tabs>
+
+#### Presenting a React Native view in a rootViewController
+
+Finally, we can present our React Native view. To do so, we need a new View Controller that can host a view in which we can load the JS content.
+We already have the initial `ViewController`, and we can make it present the `ReactViewController`. There are several ways to do so, depending on your app. For this example, we assume that you have a button that presents React Native modally.
+
+<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
+<TabItem value="objc">
+
+```diff title="ViewController.m"
+#import "ViewController.h"
++#import "ReactViewController.h"
+
+@interface ViewController ()
+
+@end
+
+- @implementation ViewController
++@implementation ViewController {
++  ReactViewController *reactViewController;
++}
+
+ - (void)viewDidLoad {
+   [super viewDidLoad];
+   // Do any additional setup after loading the view.
+   self.view.backgroundColor = UIColor.systemBackgroundColor;
++  UIButton *button = [UIButton new];
++  [button setTitle:@"Open React Native" forState:UIControlStateNormal];
++  [button setTitleColor:UIColor.systemBlueColor forState:UIControlStateNormal];
++  [button setTitleColor:UIColor.blueColor forState:UIControlStateHighlighted];
++  [button addTarget:self action:@selector(presentReactNative) forControlEvents:UIControlEventTouchUpInside];
++  [self.view addSubview:button];
+
++  button.translatesAutoresizingMaskIntoConstraints = NO;
++  [NSLayoutConstraint activateConstraints:@[
++    [button.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor],
++    [button.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor],
++    [button.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor],
++    [button.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
++  ]];
+ }
+
++- (void)presentReactNative
++{
++  if (reactViewController == NULL) {
++    reactViewController = [ReactViewController new];
++  }
++  [self presentViewController:reactViewController animated:YES];
++}
+
+@end
+```
+
+</TabItem>
+<TabItem value="swift">
+
+```diff title="ViewController.swift"
+import UIKit
+
+class ViewController: UIViewController {
+
++  var reactViewController: ReactViewController?
+
+  override func viewDidLoad() {
+    super.viewDidLoad()
+    // Do any additional setup after loading the view.
+    self.view.backgroundColor = .systemBackground
+
++    let button = UIButton()
++    button.setTitle("Open React Native", for: .normal)
++    button.setTitleColor(.systemBlue, for: .normal)
++    button.setTitleColor(.blue, for: .highlighted)
++    button.addAction(UIAction { [weak self] _ in
++      guard let self else { return }
++      if reactViewController == nil {
++       reactViewController = ReactViewController()
++      }
++      present(reactViewController!, animated: true)
++    }, for: .touchUpInside)
++    self.view.addSubview(button)
++
++    button.translatesAutoresizingMaskIntoConstraints = false
++    NSLayoutConstraint.activate([
++      button.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
++      button.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
++      button.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
++      button.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
++    ])
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+Make sure to disable the Sandbox scripting. To achieve this, in Xcode, click on your app, then on build settings. Filter for script and set the `User Script Sandboxing` to `NO`. This step is needed to properly switch between the Debug and Release version of the [Hermes engine](https://github.com/facebook/hermes/blob/main/README.md) that we ship with React Native.
+
+![Disable Sandboxing](/docs/assets/disable-sandboxing.png)
+
+Finally, make sure to add the `UIViewControllerBasedStatusBarAppearance` key into your `Info.plist` file, with value of `NO`.
+
+![Disable UIViewControllerBasedStatusBarAppearance](/docs/assets/disable-UIViewControllerBasedStatusBarAppearance.png)
+
+## 6. Test your integration
+
+You have completed all the basic steps to integrate React Native with your application. Now we will start the [Metro bundler](https://metrobundler.dev/) to build your TypeScript application code into a bundle. Metro's HTTP server shares the bundle from `localhost` on your developer environment to a simulator or device. This allows for [hot reloading](https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading).
+
+First, you need to create a `metro.config.js` file in the root of your project as follows:
+
+```js
+const {getDefaultConfig} = require('@react-native/metro-config');
+module.exports = getDefaultConfig(__dirname);
+```
+
+You can checkout the [metro.config.js file](https://github.com/react-native-community/template/blob/0.78-stable/template/metro.config.js) from the Community template file as reference.
+
+Then, you need to create a `.watchmanconfig` file in the root of your project. The file must contain an empty json object:
+
+```sh
+echo {} > .watchmanconfig
+```
+
+Once you have the configurations file in place, you can run the bundler. Run the following command in the root directory of your project:
+
+<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
+<TabItem value="npm">
+
+```shell
+npm start
+```
+
+</TabItem>
+<TabItem value="yarn">
+
+```shell
+yarn start
+```
+
+</TabItem>
+</Tabs>
+
+Now build and run your iOS app as normal.
+
+Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display:
+
+<center><img src="/docs/assets/EmbeddedAppIOS078.gif" width="300" /></center>
+
+### Creating a release build in Xcode
+
+You can use Xcode to create your release builds too! The only additional step is to add a script that is executed when the app is built to package your JS and images into the iOS application.
+
+1. In Xcode, select your application
+2. Click on `Build Phases`
+3. Click on the `+` in the top left corner and select `New Run Script Phase`
+4. Click on the `Run Script` line and rename the Script to `Bundle React Native code and images`
+5. Paste in the text box the following script
+
+```sh title="Build React Native code and image"
+set -e
+
+WITH_ENVIRONMENT="$REACT_NATIVE_PATH/scripts/xcode/with-environment.sh"
+REACT_NATIVE_XCODE="$REACT_NATIVE_PATH/scripts/react-native-xcode.sh"
+
+/bin/sh -c "$WITH_ENVIRONMENT $REACT_NATIVE_XCODE"
+```
+
+6. Drag and drop the script before the one called `[CP] Embed Pods Frameworks`.
+
+Now, if you build your app for Release, it will work as expected.
+
+## 7. Passing initial props to the React Native view
+
+In some case, you'd like to pass some information from the Native app to JavaScript. For example, you might want to pass the user id of the currently logged user to React Native, together with a token that can be used to retrieve information from a database.
+
+This is possible by using the `initialProperties` parameter of the `view(withModuleName:initialProperty)` overload of the `RCTReactNativeFactory` class. The following steps shows you how to do it.
+
+### Update the App.tsx file to read the initial properties.
+
+Open the `App.tsx` file and add the following code:
+
+```diff title="App.tsx"
+import {
+  Colors,
+  DebugInstructions,
+  Header,
+  ReloadInstructions,
+} from 'react-native/Libraries/NewAppScreen';
+
+-function App(): React.JSX.Element {
++function App(props): React.JSX.Element {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const backgroundStyle = {
+    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+  };
+
+  return (
+    <SafeAreaView style={backgroundStyle}>
+      <StatusBar
+        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
+        backgroundColor={backgroundStyle.backgroundColor}
+      />
+      <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        style={backgroundStyle}>
+        <Header />
+-       <View
+-         style={{
+-           backgroundColor: isDarkMode
+-             ? Colors.black
+-             : Colors.white,
+-           padding: 24,
+-         }}>
+-         <Text style={styles.title}>Step One</Text>
+-         <Text>
+-           Edit <Text style={styles.bold}>App.tsx</Text> to
+-           change this screen and see your edits.
+-         </Text>
+-         <Text style={styles.title}>See your changes</Text>
+-         <ReloadInstructions />
+-         <Text style={styles.title}>Debug</Text>
+-         <DebugInstructions />
++         <Text style={styles.title}>UserID: {props.userID}</Text>
++         <Text style={styles.title}>Token: {props.token}</Text>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 24,
+    fontWeight: '600',
++   marginLeft: 20,
+  },
+  bold: {
+    fontWeight: '700',
+  },
+});
+
+export default App;
+```
+
+These changes will tell React Native that your App component is now accepting some properties. The `RCTreactNativeFactory` will take care of passing them to the component when it's rendered.
+
+### Update the Native code to pass the initial properties to JavaScript.
+
+<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
+<TabItem value="objc">
+
+Modify the `ReactViewController.mm` to pass the initial properties to JavaScript.
+
+```diff title="ReactViewController.mm"
+ - (void)viewDidLoad {
+   [super viewDidLoad];
+   // Do any additional setup after loading the view.
+
+   _factoryDelegate = [ReactNativeFactoryDelegate new];
+   _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new];
+   _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate];
+-  self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"];
++  self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld" initialProperties:@{
++    @"userID": @"12345678",
++    @"token": @"secretToken"
++  }];
+}
+```
+
+</TabItem>
+<TabItem value="swift">
+
+Modify the `ReactViewController.swift` to pass the initial properties to the React Native view.
+
+```diff title="ReactViewController.swift"
+  override func viewDidLoad() {
+    super.viewDidLoad()
+    reactNativeFactoryDelegate = ReactNativeDelegate()
+    reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider()
+    reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!)
+-   view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld")
++   view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld" initialProperties: [
++     "userID": "12345678",
++     "token": "secretToken"
++])
+
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+3. Run your app once again. You should see the following screen after you present the `ReactViewController`:
+
+<center>
+  <img src="/docs/assets/brownfield-with-initial-props.png" width="30%" height="30%"/>
+</center>
+
+## Now what?
+
+At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native.
diff --git a/website/versioned_docs/version-0.80/_integration-with-existing-apps-kotlin.md b/website/versioned_docs/version-0.80/_integration-with-existing-apps-kotlin.md
index 72f8337f33f..586d6c4054c 100644
--- a/website/versioned_docs/version-0.80/_integration-with-existing-apps-kotlin.md
+++ b/website/versioned_docs/version-0.80/_integration-with-existing-apps-kotlin.md
@@ -1,506 +1,505 @@
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-## Key Concepts
-
-The keys to integrating React Native components into your Android application are to:
-
-1. Set up the correct directory structure.
-2. Install the necessary NPM dependencies.
-3. Adding React Native to your Gradle configuration.
-4. Writing the TypeScript code for your first React Native screen.
-5. Integrate React Native with your Android code using a ReactActivity.
-6. Testing your integration by running the bundler and seeing your app in action.
-
-## Using the Community Template
-
-While you follow this guide, we suggest you to use the [React Native Community Template](https://github.com/react-native-community/template/) as reference. The template contains a **minimal Android app** and will help you understanding how to integrate React Native into an existing Android app.
-
-## Prerequisites
-
-Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](getting-started-without-a-framework) to configure your development environment for building React Native apps for Android.
-This guide also assumes you're familiar with the basics of Android development such as creating Activities and editing the `AndroidManifest.xml` file.
-
-## 1. Set up directory structure
-
-To ensure a smooth experience, create a new folder for your integrated React Native project, then **move your existing Android project** to the `/android` subfolder.
-
-## 2. Install NPM dependencies
-
-Go to the root directory and run the following command:
-
-```shell
-curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.75-stable/template/package.json
-```
-
-This will copy the `package.json` [file from the Community template](https://github.com/react-native-community/template/blob/0.75-stable/template/package.json) to your project.
-
-Next, install the NPM packages by running:
-
-<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
-<TabItem value="npm">
-
-```shell
-npm install
-```
-
-</TabItem>
-<TabItem value="yarn">
-
-```shell
-yarn install
-```
-
-</TabItem>
-</Tabs>
-
-Installation process has created a new `node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
-
-Add `node_modules/` to your `.gitignore` file (here the [Community default one](https://github.com/react-native-community/template/blob/0.75-stable/template/_gitignore)).
-
-## 3. Adding React Native to your app
-
-### Configuring Gradle
-
-React Native uses the React Native Gradle Plugin to configure your dependencies and project setup.
-
-First, let's edit your `settings.gradle` file by adding those lines (as suggested from the [Community template](https://github.com/react-native-community/template/blob/0.77-stable/template/android/settings.gradle)):
-
-```groovy
-// Configures the React Native Gradle Settings plugin used for autolinking
-pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
-plugins { id("com.facebook.react.settings") }
-extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
-// If using .gradle.kts files:
-// extensions.configure<com.facebook.react.ReactSettingsExtension> { autolinkLibrariesFromCommand() }
-includeBuild("../node_modules/@react-native/gradle-plugin")
-
-// Include your existing Gradle modules here.
-// include(":app")
-```
-
-Then you need to open your top level `build.gradle` and include this line (as suggested from the [Community template](https://github.com/react-native-community/template/blob/0.77-stable/template/android/build.gradle)):
-
-```diff
-buildscript {
-    repositories {
-        google()
-        mavenCentral()
-    }
-    dependencies {
-        classpath("com.android.tools.build:gradle:7.3.1")
-+       classpath("com.facebook.react:react-native-gradle-plugin")
-    }
-}
-```
-
-This makes sure the React Native Gradle Plugin (RNGP) is available inside your project.
-Finally, add those lines inside your Applications's `build.gradle` file (it's a different `build.gradle` file usually inside your `app` folder - you can use the [Community template file as reference](https://github.com/react-native-community/template/blob/0.77-stable/template/android/app/build.gradle)):
-
-```diff
-apply plugin: "com.android.application"
-+apply plugin: "com.facebook.react"
-
-repositories {
-    mavenCentral()
-}
-
-dependencies {
-    // Other dependencies here
-+   // Note: we intentionally don't specify the version number here as RNGP will take care of it.
-+   // If you don't use the RNGP, you'll have to specify version manually.
-+   implementation("com.facebook.react:react-android")
-+   implementation("com.facebook.react:hermes-android")
-}
-
-+react {
-+   // Needed to enable Autolinking - https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
-+   autolinkLibrariesWithApp()
-+}
-```
-
-Finally, open your application `gradle.properties` files and add the following line (here the [Community template file as reference](https://github.com/react-native-community/template/blob/0.77-stable/template/android/gradle.properties)):
-
-```diff
-+reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
-+newArchEnabled=true
-+hermesEnabled=true
-```
-
-### Configuring your manifest
-
-First, make sure you have the Internet permission in your `AndroidManifest.xml`:
-
-```diff
-<manifest xmlns:android="http://schemas.android.com/apk/res/android">
-
-+   <uses-permission android:name="android.permission.INTERNET" />
-
-    <application
-      android:name=".MainApplication">
-    </application>
-</manifest>
-```
-
-Then you need to enable [cleartext traffic](https://developer.android.com/training/articles/security-config#CleartextTrafficPermitted) in your **debug** `AndroidManifest.xml`:
-
-```diff
-<?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools">
-
-    <application
-+       android:usesCleartextTraffic="true"
-+       tools:targetApi="28"
-    />
-</manifest>
-```
-
-As usual, here the AndroidManifest.xml file from the Community template to use as a reference: [main](https://github.com/react-native-community/template/blob/0.77-stable/template/android/app/src/main/AndroidManifest.xml) and [debug](https://github.com/react-native-community/template/blob/0.77-stable/template/android/app/src/debug/AndroidManifest.xml)
-
-This is needed as your application will communicate with your local bundler, [Metro](https://metrobundler.dev/), via HTTP.
-
-Make sure you add this only to your **debug** manifest.
-
-## 4. Writing the TypeScript Code
-
-Now we will actually modify the native Android application to integrate React Native.
-
-The first bit of code we will write is the actual React Native code for the new screen that will be integrated into our application.
-
-### Create a `index.js` file
-
-First, create an empty `index.js` file in the root of your React Native project.
-
-`index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `import`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it.
-
-Our index.js should look as follows (here the [Community template file as reference](https://github.com/react-native-community/template/blob/0.77-stable/template/index.js)):
-
-```js
-import {AppRegistry} from 'react-native';
-import App from './App';
-
-AppRegistry.registerComponent('HelloWorld', () => App);
-```
-
-### Create a `App.tsx` file
-
-Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX](<https://en.wikipedia.org/wiki/JSX_(JavaScript)>) expressions. It contains the root React Native component that we will integrate into our Android application ([link](https://github.com/react-native-community/template/blob/0.77-stable/template/App.tsx)):
-
-```tsx
-import React from 'react';
-import {
-  SafeAreaView,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  useColorScheme,
-  View,
-} from 'react-native';
-
-import {
-  Colors,
-  DebugInstructions,
-  Header,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
-function App(): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
-
-  return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundStyle.backgroundColor}
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
-        <View
-          style={{
-            backgroundColor: isDarkMode
-              ? Colors.black
-              : Colors.white,
-            padding: 24,
-          }}>
-          <Text style={styles.title}>Step One</Text>
-          <Text>
-            Edit <Text style={styles.bold}>App.tsx</Text> to
-            change this screen and see your edits.
-          </Text>
-          <Text style={styles.title}>See your changes</Text>
-          <ReloadInstructions />
-          <Text style={styles.title}>Debug</Text>
-          <DebugInstructions />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  title: {
-    fontSize: 24,
-    fontWeight: '600',
-  },
-  bold: {
-    fontWeight: '700',
-  },
-});
-
-export default App;
-```
-
-Here the [Community template file as reference](https://github.com/react-native-community/template/blob/0.77-stable/template/App.tsx)
-
-## 5. Integrating with your Android code
-
-We now need to add some native code in order to start the React Native runtime and tell it to render our React components.
-
-### Updating your Application class
-
-First, we need to update your `Application` class to properly initialize React Native as follows:
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-
-<TabItem value="java">
-
-```diff
-package <your-package-here>;
-
-import android.app.Application;
-+import com.facebook.react.PackageList;
-+import com.facebook.react.ReactApplication;
-+import com.facebook.react.ReactHost;
-+import com.facebook.react.ReactNativeHost;
-+import com.facebook.react.ReactPackage;
-+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
-+import com.facebook.react.defaults.DefaultReactHost;
-+import com.facebook.react.defaults.DefaultReactNativeHost;
-+import com.facebook.soloader.SoLoader;
-+import com.facebook.react.soloader.OpenSourceMergedSoMapping
-+import java.util.List;
-
--class MainApplication extends Application {
-+class MainApplication extends Application implements ReactApplication {
-+ @Override
-+ public ReactNativeHost getReactNativeHost() {
-+   return new DefaultReactNativeHost(this) {
-+     @Override
-+     protected List<ReactPackage> getPackages() { return new PackageList(this).getPackages(); }
-+     @Override
-+     protected String getJSMainModuleName() { return "index"; }
-+     @Override
-+     public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; }
-+     @Override
-+     protected boolean isNewArchEnabled() { return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; }
-+     @Override
-+     protected Boolean isHermesEnabled() { return BuildConfig.IS_HERMES_ENABLED; }
-+   };
-+ }
-
-+ @Override
-+ public ReactHost getReactHost() {
-+   return DefaultReactHost.getDefaultReactHost(getApplicationContext(), getReactNativeHost());
-+ }
-
-  @Override
-  public void onCreate() {
-    super.onCreate();
-+   SoLoader.init(this, OpenSourceMergedSoMapping);
-+   if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
-+     DefaultNewArchitectureEntryPoint.load();
-+   }
-  }
-}
-```
-
-</TabItem>
-
-<TabItem value="kotlin">
-
-```diff
-// package <your-package-here>
-
-import android.app.Application
-+import com.facebook.react.PackageList
-+import com.facebook.react.ReactApplication
-+import com.facebook.react.ReactHost
-+import com.facebook.react.ReactNativeHost
-+import com.facebook.react.ReactPackage
-+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
-+import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
-+import com.facebook.react.defaults.DefaultReactNativeHost
-+import com.facebook.soloader.SoLoader
-+import com.facebook.react.soloader.OpenSourceMergedSoMapping
-
--class MainApplication : Application() {
-+class MainApplication : Application(), ReactApplication {
-
-+ override val reactNativeHost: ReactNativeHost =
-+      object : DefaultReactNativeHost(this) {
-+        override fun getPackages(): List<ReactPackage> = PackageList(this).packages
-+        override fun getJSMainModuleName(): String = "index"
-+        override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
-+        override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
-+        override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
-+      }
-
-+ override val reactHost: ReactHost
-+   get() = getDefaultReactHost(applicationContext, reactNativeHost)
-
-  override fun onCreate() {
-    super.onCreate()
-+   SoLoader.init(this, OpenSourceMergedSoMapping)
-+   if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
-+     load()
-+   }
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-As usual, here the [MainApplication.kt Community template file as reference](https://github.com/react-native-community/template/blob/0.77-stable/template/android/app/src/main/java/com/helloworld/MainApplication.kt)
-
-#### Creating a `ReactActivity`
-
-Finally, we need to create a new `Activity` that will extend `ReactActivity` and host the React Native code. This activity will be responsible for starting the React Native runtime and rendering the React component.
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-
-<TabItem value="java">
-
-```java
-// package <your-package-here>;
-
-import com.facebook.react.ReactActivity;
-import com.facebook.react.ReactActivityDelegate;
-import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
-import com.facebook.react.defaults.DefaultReactActivityDelegate;
-
-public class MyReactActivity extends ReactActivity {
-
-    @Override
-    protected String getMainComponentName() {
-        return "HelloWorld";
-    }
-
-    @Override
-    protected ReactActivityDelegate createReactActivityDelegate() {
-        return new DefaultReactActivityDelegate(this, getMainComponentName(), DefaultNewArchitectureEntryPoint.getFabricEnabled());
-    }
-}
-```
-
-</TabItem>
-
-<TabItem value="kotlin">
-
-```kotlin
-// package <your-package-here>
-
-import com.facebook.react.ReactActivity
-import com.facebook.react.ReactActivityDelegate
-import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
-import com.facebook.react.defaults.DefaultReactActivityDelegate
-
-class MyReactActivity : ReactActivity() {
-
-    override fun getMainComponentName(): String = "HelloWorld"
-
-    override fun createReactActivityDelegate(): ReactActivityDelegate =
-        DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
-}
-```
-
-</TabItem>
-</Tabs>
-
-As usual, here the [MainActivity.kt Community template file as reference](https://github.com/react-native-community/template/blob/0.77-stable/template/android/app/src/main/java/com/helloworld/MainApplication.kt)
-
-Whenever you create a new Activity, you need to add it to your `AndroidManifest.xml` file. You also need set the theme of `MyReactActivity` to `Theme.AppCompat.Light.NoActionBar` (or to any non-ActionBar theme) as otherwise your application will render an ActionBar on top of your React Native screen:
-
-```diff
-<manifest xmlns:android="http://schemas.android.com/apk/res/android">
-
-    <uses-permission android:name="android.permission.INTERNET" />
-
-    <application
-      android:name=".MainApplication">
-
-+     <activity
-+       android:name=".MyReactActivity"
-+       android:label="@string/app_name"
-+       android:theme="@style/Theme.AppCompat.Light.NoActionBar">
-+     </activity>
-    </application>
-</manifest>
-```
-
-Now your activity is ready to run some JavaScript code.
-
-## 6. Test your integration
-
-You have completed all the basic steps to integrate React Native with your application. Now we will start the [Metro bundler](https://metrobundler.dev/) to build your TypeScript application code into a bundle. Metro's HTTP server shares the bundle from `localhost` on your developer environment to a simulator or device. This allows for [hot reloading](https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading).
-
-First, you need to create a `metro.config.js` file in the root of your project as follows:
-
-```js
-const {getDefaultConfig} = require('@react-native/metro-config');
-module.exports = getDefaultConfig(__dirname);
-```
-
-You can checkout the [metro.config.js file](https://github.com/react-native-community/template/blob/0.77-stable/template/metro.config.js) from the Community template file as reference.
-
-Once you have the config file in place, you can run the bundler. Run the following command in the root directory of your project:
-
-<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
-<TabItem value="npm">
-
-```shell
-npm start
-```
-
-</TabItem>
-<TabItem value="yarn">
-
-```shell
-yarn start
-```
-
-</TabItem>
-</Tabs>
-
-Now build and run your Android app as normal.
-
-Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display:
-
-<center><img src="/docs/assets/EmbeddedAppAndroidVideo.gif" width="300" /></center>
-
-### Creating a release build in Android Studio
-
-You can use Android Studio to create your release builds too! It’s as quick as creating release builds of your previously-existing native Android app.
-
-The React Native Gradle Plugin will take care of bundling the JS code inside your APK/App Bundle.
-
-If you're not using Android Studio, you can create a release build with:
-
-```
-cd android
-# For a Release APK
-./gradlew :app:assembleRelease
-# For a Release AAB
-./gradlew :app:bundleRelease
-```
-
-### Now what?
-
-At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native.
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+## Key Concepts
+
+The keys to integrating React Native components into your Android application are to:
+
+1. Set up the correct directory structure.
+2. Install the necessary NPM dependencies.
+3. Adding React Native to your Gradle configuration.
+4. Writing the TypeScript code for your first React Native screen.
+5. Integrate React Native with your Android code using a ReactActivity.
+6. Testing your integration by running the bundler and seeing your app in action.
+
+## Using the Community Template
+
+While you follow this guide, we suggest you to use the [React Native Community Template](https://github.com/react-native-community/template/) as reference. The template contains a **minimal Android app** and will help you understanding how to integrate React Native into an existing Android app.
+
+## Prerequisites
+
+Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](getting-started-without-a-framework) to configure your development environment for building React Native apps for Android.
+This guide also assumes you're familiar with the basics of Android development such as creating Activities and editing the `AndroidManifest.xml` file.
+
+## 1. Set up directory structure
+
+To ensure a smooth experience, create a new folder for your integrated React Native project, then **move your existing Android project** to the `/android` subfolder.
+
+## 2. Install NPM dependencies
+
+Go to the root directory and run the following command:
+
+```shell
+curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.75-stable/template/package.json
+```
+
+This will copy the `package.json` [file from the Community template](https://github.com/react-native-community/template/blob/0.75-stable/template/package.json) to your project.
+
+Next, install the NPM packages by running:
+
+<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
+<TabItem value="npm">
+
+```shell
+npm install
+```
+
+</TabItem>
+<TabItem value="yarn">
+
+```shell
+yarn install
+```
+
+</TabItem>
+</Tabs>
+
+Installation process has created a new `node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
+
+Add `node_modules/` to your `.gitignore` file (here the [Community default one](https://github.com/react-native-community/template/blob/0.75-stable/template/_gitignore)).
+
+## 3. Adding React Native to your app
+
+### Configuring Gradle
+
+React Native uses the React Native Gradle Plugin to configure your dependencies and project setup.
+
+First, let's edit your `settings.gradle` file by adding those lines (as suggested from the [Community template](https://github.com/react-native-community/template/blob/0.77-stable/template/android/settings.gradle)):
+
+```groovy
+// Configures the React Native Gradle Settings plugin used for autolinking
+pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
+plugins { id("com.facebook.react.settings") }
+extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
+// If using .gradle.kts files:
+// extensions.configure<com.facebook.react.ReactSettingsExtension> { autolinkLibrariesFromCommand() }
+includeBuild("../node_modules/@react-native/gradle-plugin")
+
+// Include your existing Gradle modules here.
+// include(":app")
+```
+
+Then you need to open your top level `build.gradle` and include this line (as suggested from the [Community template](https://github.com/react-native-community/template/blob/0.77-stable/template/android/build.gradle)):
+
+```diff
+buildscript {
+    repositories {
+        google()
+        mavenCentral()
+    }
+    dependencies {
+        classpath("com.android.tools.build:gradle:7.3.1")
++       classpath("com.facebook.react:react-native-gradle-plugin")
+    }
+}
+```
+
+This makes sure the React Native Gradle Plugin (RNGP) is available inside your project.
+Finally, add those lines inside your Applications's `build.gradle` file (it's a different `build.gradle` file usually inside your `app` folder - you can use the [Community template file as reference](https://github.com/react-native-community/template/blob/0.77-stable/template/android/app/build.gradle)):
+
+```diff
+apply plugin: "com.android.application"
++apply plugin: "com.facebook.react"
+
+repositories {
+    mavenCentral()
+}
+
+dependencies {
+    // Other dependencies here
++   // Note: we intentionally don't specify the version number here as RNGP will take care of it.
++   // If you don't use the RNGP, you'll have to specify version manually.
++   implementation("com.facebook.react:react-android")
++   implementation("com.facebook.react:hermes-android")
+}
+
++react {
++   // Needed to enable Autolinking - https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
++   autolinkLibrariesWithApp()
++}
+```
+
+Finally, open your application `gradle.properties` files and add the following line (here the [Community template file as reference](https://github.com/react-native-community/template/blob/0.77-stable/template/android/gradle.properties)):
+
+```diff
++reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
++newArchEnabled=true
++hermesEnabled=true
+```
+
+### Configuring your manifest
+
+First, make sure you have the Internet permission in your `AndroidManifest.xml`:
+
+```diff
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
++   <uses-permission android:name="android.permission.INTERNET" />
+
+    <application
+      android:name=".MainApplication">
+    </application>
+</manifest>
+```
+
+Then you need to enable [cleartext traffic](https://developer.android.com/training/articles/security-config#CleartextTrafficPermitted) in your **debug** `AndroidManifest.xml`:
+
+```diff
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <application
++       android:usesCleartextTraffic="true"
++       tools:targetApi="28"
+    />
+</manifest>
+```
+
+As usual, here the AndroidManifest.xml file from the Community template to use as a reference: [main](https://github.com/react-native-community/template/blob/0.77-stable/template/android/app/src/main/AndroidManifest.xml) and [debug](https://github.com/react-native-community/template/blob/0.77-stable/template/android/app/src/debug/AndroidManifest.xml)
+
+This is needed as your application will communicate with your local bundler, [Metro](https://metrobundler.dev/), via HTTP.
+
+Make sure you add this only to your **debug** manifest.
+
+## 4. Writing the TypeScript Code
+
+Now we will actually modify the native Android application to integrate React Native.
+
+The first bit of code we will write is the actual React Native code for the new screen that will be integrated into our application.
+
+### Create a `index.js` file
+
+First, create an empty `index.js` file in the root of your React Native project.
+
+`index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `import`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it.
+
+Our index.js should look as follows (here the [Community template file as reference](https://github.com/react-native-community/template/blob/0.77-stable/template/index.js)):
+
+```js
+import {AppRegistry} from 'react-native';
+import App from './App';
+
+AppRegistry.registerComponent('HelloWorld', () => App);
+```
+
+### Create a `App.tsx` file
+
+Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX](<https://en.wikipedia.org/wiki/JSX_(JavaScript)>) expressions. It contains the root React Native component that we will integrate into our Android application ([link](https://github.com/react-native-community/template/blob/0.77-stable/template/App.tsx)):
+
+```tsx
+import {type JSX} from 'react';
+import {
+  SafeAreaView,
+  ScrollView,
+  StatusBar,
+  StyleSheet,
+  Text,
+  useColorScheme,
+  View,
+} from 'react-native';
+import {
+  Colors,
+  DebugInstructions,
+  Header,
+  ReloadInstructions,
+} from 'react-native/Libraries/NewAppScreen';
+
+function App(): JSX.Element {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const backgroundStyle = {
+    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+  };
+
+  return (
+    <SafeAreaView style={backgroundStyle}>
+      <StatusBar
+        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
+        backgroundColor={backgroundStyle.backgroundColor}
+      />
+      <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        style={backgroundStyle}>
+        <Header />
+        <View
+          style={{
+            backgroundColor: isDarkMode
+              ? Colors.black
+              : Colors.white,
+            padding: 24,
+          }}>
+          <Text style={styles.title}>Step One</Text>
+          <Text>
+            Edit <Text style={styles.bold}>App.tsx</Text> to
+            change this screen and see your edits.
+          </Text>
+          <Text style={styles.title}>See your changes</Text>
+          <ReloadInstructions />
+          <Text style={styles.title}>Debug</Text>
+          <DebugInstructions />
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 24,
+    fontWeight: '600',
+  },
+  bold: {
+    fontWeight: '700',
+  },
+});
+
+export default App;
+```
+
+Here the [Community template file as reference](https://github.com/react-native-community/template/blob/0.77-stable/template/App.tsx)
+
+## 5. Integrating with your Android code
+
+We now need to add some native code in order to start the React Native runtime and tell it to render our React components.
+
+### Updating your Application class
+
+First, we need to update your `Application` class to properly initialize React Native as follows:
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+
+<TabItem value="java">
+
+```diff
+package <your-package-here>;
+
+import android.app.Application;
++import com.facebook.react.PackageList;
++import com.facebook.react.ReactApplication;
++import com.facebook.react.ReactHost;
++import com.facebook.react.ReactNativeHost;
++import com.facebook.react.ReactPackage;
++import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
++import com.facebook.react.defaults.DefaultReactHost;
++import com.facebook.react.defaults.DefaultReactNativeHost;
++import com.facebook.soloader.SoLoader;
++import com.facebook.react.soloader.OpenSourceMergedSoMapping
++import java.util.List;
+
+-class MainApplication extends Application {
++class MainApplication extends Application implements ReactApplication {
++ @Override
++ public ReactNativeHost getReactNativeHost() {
++   return new DefaultReactNativeHost(this) {
++     @Override
++     protected List<ReactPackage> getPackages() { return new PackageList(this).getPackages(); }
++     @Override
++     protected String getJSMainModuleName() { return "index"; }
++     @Override
++     public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; }
++     @Override
++     protected boolean isNewArchEnabled() { return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; }
++     @Override
++     protected Boolean isHermesEnabled() { return BuildConfig.IS_HERMES_ENABLED; }
++   };
++ }
+
++ @Override
++ public ReactHost getReactHost() {
++   return DefaultReactHost.getDefaultReactHost(getApplicationContext(), getReactNativeHost());
++ }
+
+  @Override
+  public void onCreate() {
+    super.onCreate();
++   SoLoader.init(this, OpenSourceMergedSoMapping);
++   if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
++     DefaultNewArchitectureEntryPoint.load();
++   }
+  }
+}
+```
+
+</TabItem>
+
+<TabItem value="kotlin">
+
+```diff
+// package <your-package-here>
+
+import android.app.Application
++import com.facebook.react.PackageList
++import com.facebook.react.ReactApplication
++import com.facebook.react.ReactHost
++import com.facebook.react.ReactNativeHost
++import com.facebook.react.ReactPackage
++import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
++import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
++import com.facebook.react.defaults.DefaultReactNativeHost
++import com.facebook.soloader.SoLoader
++import com.facebook.react.soloader.OpenSourceMergedSoMapping
+
+-class MainApplication : Application() {
++class MainApplication : Application(), ReactApplication {
+
++ override val reactNativeHost: ReactNativeHost =
++      object : DefaultReactNativeHost(this) {
++        override fun getPackages(): List<ReactPackage> = PackageList(this).packages
++        override fun getJSMainModuleName(): String = "index"
++        override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
++        override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
++        override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
++      }
+
++ override val reactHost: ReactHost
++   get() = getDefaultReactHost(applicationContext, reactNativeHost)
+
+  override fun onCreate() {
+    super.onCreate()
++   SoLoader.init(this, OpenSourceMergedSoMapping)
++   if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
++     load()
++   }
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+As usual, here the [MainApplication.kt Community template file as reference](https://github.com/react-native-community/template/blob/0.77-stable/template/android/app/src/main/java/com/helloworld/MainApplication.kt)
+
+#### Creating a `ReactActivity`
+
+Finally, we need to create a new `Activity` that will extend `ReactActivity` and host the React Native code. This activity will be responsible for starting the React Native runtime and rendering the React component.
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+
+<TabItem value="java">
+
+```java
+// package <your-package-here>;
+
+import com.facebook.react.ReactActivity;
+import com.facebook.react.ReactActivityDelegate;
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
+import com.facebook.react.defaults.DefaultReactActivityDelegate;
+
+public class MyReactActivity extends ReactActivity {
+
+    @Override
+    protected String getMainComponentName() {
+        return "HelloWorld";
+    }
+
+    @Override
+    protected ReactActivityDelegate createReactActivityDelegate() {
+        return new DefaultReactActivityDelegate(this, getMainComponentName(), DefaultNewArchitectureEntryPoint.getFabricEnabled());
+    }
+}
+```
+
+</TabItem>
+
+<TabItem value="kotlin">
+
+```kotlin
+// package <your-package-here>
+
+import com.facebook.react.ReactActivity
+import com.facebook.react.ReactActivityDelegate
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
+import com.facebook.react.defaults.DefaultReactActivityDelegate
+
+class MyReactActivity : ReactActivity() {
+
+    override fun getMainComponentName(): String = "HelloWorld"
+
+    override fun createReactActivityDelegate(): ReactActivityDelegate =
+        DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
+}
+```
+
+</TabItem>
+</Tabs>
+
+As usual, here the [MainActivity.kt Community template file as reference](https://github.com/react-native-community/template/blob/0.77-stable/template/android/app/src/main/java/com/helloworld/MainApplication.kt)
+
+Whenever you create a new Activity, you need to add it to your `AndroidManifest.xml` file. You also need set the theme of `MyReactActivity` to `Theme.AppCompat.Light.NoActionBar` (or to any non-ActionBar theme) as otherwise your application will render an ActionBar on top of your React Native screen:
+
+```diff
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <uses-permission android:name="android.permission.INTERNET" />
+
+    <application
+      android:name=".MainApplication">
+
++     <activity
++       android:name=".MyReactActivity"
++       android:label="@string/app_name"
++       android:theme="@style/Theme.AppCompat.Light.NoActionBar">
++     </activity>
+    </application>
+</manifest>
+```
+
+Now your activity is ready to run some JavaScript code.
+
+## 6. Test your integration
+
+You have completed all the basic steps to integrate React Native with your application. Now we will start the [Metro bundler](https://metrobundler.dev/) to build your TypeScript application code into a bundle. Metro's HTTP server shares the bundle from `localhost` on your developer environment to a simulator or device. This allows for [hot reloading](https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading).
+
+First, you need to create a `metro.config.js` file in the root of your project as follows:
+
+```js
+const {getDefaultConfig} = require('@react-native/metro-config');
+module.exports = getDefaultConfig(__dirname);
+```
+
+You can checkout the [metro.config.js file](https://github.com/react-native-community/template/blob/0.77-stable/template/metro.config.js) from the Community template file as reference.
+
+Once you have the config file in place, you can run the bundler. Run the following command in the root directory of your project:
+
+<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
+<TabItem value="npm">
+
+```shell
+npm start
+```
+
+</TabItem>
+<TabItem value="yarn">
+
+```shell
+yarn start
+```
+
+</TabItem>
+</Tabs>
+
+Now build and run your Android app as normal.
+
+Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display:
+
+<center><img src="/docs/assets/EmbeddedAppAndroidVideo.gif" width="300" /></center>
+
+### Creating a release build in Android Studio
+
+You can use Android Studio to create your release builds too! It’s as quick as creating release builds of your previously-existing native Android app.
+
+The React Native Gradle Plugin will take care of bundling the JS code inside your APK/App Bundle.
+
+If you're not using Android Studio, you can create a release build with:
+
+```
+cd android
+# For a Release APK
+./gradlew :app:assembleRelease
+# For a Release AAB
+./gradlew :app:bundleRelease
+```
+
+### Now what?
+
+At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native.
diff --git a/website/versioned_docs/version-0.80/_turbo-native-modules-components.jsx b/website/versioned_docs/version-0.80/_turbo-native-modules-components.jsx
index 1bb5a1b5edb..9b17f011728 100644
--- a/website/versioned_docs/version-0.80/_turbo-native-modules-components.jsx
+++ b/website/versioned_docs/version-0.80/_turbo-native-modules-components.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import IOSContent from './turbo-native-modules-ios.md';
 import AndroidContent from './turbo-native-modules-android.md';
 
diff --git a/website/versioned_docs/version-0.80/accessibilityinfo.md b/website/versioned_docs/version-0.80/accessibilityinfo.md
index fab883898c3..c42fda62a2c 100644
--- a/website/versioned_docs/version-0.80/accessibilityinfo.md
+++ b/website/versioned_docs/version-0.80/accessibilityinfo.md
@@ -1,290 +1,290 @@
----
-id: accessibilityinfo
-title: AccessibilityInfo
----
-
-Sometimes it's useful to know whether or not the device has a screen reader that is currently active. The `AccessibilityInfo` API is designed for this purpose. You can use it to query the current state of the screen reader as well as to register to be notified when the state of the screen reader changes.
-
-## Example
-
-```SnackPlayer name=AccessibilityInfo%20Example&supportedPlatforms=android,ios
-import React, {useState, useEffect} from 'react';
-import {AccessibilityInfo, Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false);
-  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
-
-  useEffect(() => {
-    const reduceMotionChangedSubscription = AccessibilityInfo.addEventListener(
-      'reduceMotionChanged',
-      isReduceMotionEnabled => {
-        setReduceMotionEnabled(isReduceMotionEnabled);
-      },
-    );
-    const screenReaderChangedSubscription = AccessibilityInfo.addEventListener(
-      'screenReaderChanged',
-      isScreenReaderEnabled => {
-        setScreenReaderEnabled(isScreenReaderEnabled);
-      },
-    );
-
-    AccessibilityInfo.isReduceMotionEnabled().then(isReduceMotionEnabled => {
-      setReduceMotionEnabled(isReduceMotionEnabled);
-    });
-    AccessibilityInfo.isScreenReaderEnabled().then(isScreenReaderEnabled => {
-      setScreenReaderEnabled(isScreenReaderEnabled);
-    });
-
-    return () => {
-      reduceMotionChangedSubscription.remove();
-      screenReaderChangedSubscription.remove();
-    };
-  }, []);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.status}>
-          The reduce motion is {reduceMotionEnabled ? 'enabled' : 'disabled'}.
-        </Text>
-        <Text style={styles.status}>
-          The screen reader is {screenReaderEnabled ? 'enabled' : 'disabled'}.
-        </Text>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  status: {
-    margin: 30,
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Methods
-
-### `addEventListener()`
-
-```tsx
-static addEventListener(
-  eventName: AccessibilityChangeEventName | AccessibilityAnnouncementEventName,
-  handler: (
-    event: AccessibilityChangeEvent | AccessibilityAnnouncementFinishedEvent,
-  ) => void,
-): EmitterSubscription;
-```
-
-Add an event handler. Supported events:
-
-| Event name                                                                               | Description                                                                                                                                                                                                                                                                                              |
-| ---------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `accessibilityServiceChanged`<br/><div className="label two-lines android">Android</div> | Fires when some services such as TalkBack, other Android assistive technologies, and third-party accessibility services are enabled. The argument to the event handler is a boolean. The boolean is `true` when a some accessibility services is enabled and `false` otherwise.                          |
-| `announcementFinished`<br/><div className="label two-lines ios">iOS</div>                | Fires when the screen reader has finished making an announcement. The argument to the event handler is a dictionary with these keys:<ul><li>`announcement`: The string announced by the screen reader.</li><li>`success`: A boolean indicating whether the announcement was successfully made.</li></ul> |
-| `boldTextChanged`<br/><div className="label two-lines ios">iOS</div>                     | 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`<br/><div className="label two-lines ios">iOS</div>                    | 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`<br/><div className="label two-lines ios">iOS</div>                 | 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.                                  |
-| `reduceTransparencyChanged`<br/><div className="label two-lines ios">iOS</div>           | 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.                                                                                                         |
-| `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.                                                                                                                          |
-
----
-
-### `announceForAccessibility()`
-
-```tsx
-static announceForAccessibility(announcement: string);
-```
-
-Post a string to be announced by the screen reader.
-
----
-
-### `announceForAccessibilityWithOptions()`
-
-```tsx
-static announceForAccessibilityWithOptions(
-  announcement: string,
-  options: {queue?: boolean},
-);
-```
-
-Post a string to be announced by the screen reader with modification options. By default announcements will interrupt any existing speech, but on iOS they can be queued behind existing speech by setting `queue` to `true` in the options object.
-
-**Parameters:**
-
-| Name                                                              | Type   | Description                                                                                  |
-| ----------------------------------------------------------------- | ------ | -------------------------------------------------------------------------------------------- |
-| announcement <div className="label basic required">Required</div> | string | The string to be announced                                                                   |
-| options <div className="label basic required">Required</div>      | object | `queue` - queue the announcement behind existing speech <div className="label ios">iOS</div> |
-
----
-
-### `getRecommendedTimeoutMillis()` <div className="label android">Android</div>
-
-```tsx
-static getRecommendedTimeoutMillis(originalTimeout: number): Promise<number>;
-```
-
-Gets the timeout in millisecond that the user needs.
-This value is set in "Time to take action (Accessibility timeout)" of "Accessibility" settings.
-
-**Parameters:**
-
-| Name                                                                 | Type   | Description                                                                           |
-| -------------------------------------------------------------------- | ------ | ------------------------------------------------------------------------------------- |
-| originalTimeout <div className="label basic required">Required</div> | number | The timeout to return if "Accessibility timeout" is not set. Specify in milliseconds. |
-
----
-
-### `isAccessibilityServiceEnabled()` <div className="label android">Android</div>
-
-```tsx
-static isAccessibilityServiceEnabled(): Promise<boolean>;
-```
-
-Check whether any accessibility service is enabled. This includes TalkBack but also any third-party accessibility app that may be installed. To only check whether TalkBack is enabled, use [isScreenReaderEnabled](#isscreenreaderenabled). Returns a promise which resolves to a boolean. The result is `true` when some accessibility services is enabled and `false` otherwise.
-
-> **Note**: Please use [isScreenReaderEnabled](#isscreenreaderenabled) if you only want to check the status of TalkBack.
-
----
-
-### `isBoldTextEnabled()` <div className="label ios">iOS</div>
-
-```tsx
-static isBoldTextEnabled(): Promise<boolean>:
-```
-
-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()` <div className="label ios">iOS</div>
-
-```tsx
-static isGrayscaleEnabled(): Promise<boolean>;
-```
-
-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()` <div className="label ios">iOS</div>
-
-```tsx
-static isInvertColorsEnabled(): Promise<boolean>;
-```
-
-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()`
-
-```tsx
-static isReduceMotionEnabled(): Promise<boolean>;
-```
-
-Query whether reduce motion is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when reduce motion is enabled and `false` otherwise.
-
----
-
-### `isReduceTransparencyEnabled()` <div className="label ios">iOS</div>
-
-```tsx
-static isReduceTransparencyEnabled(): Promise<boolean>;
-```
-
-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()`
-
-```tsx
-static isScreenReaderEnabled(): Promise<boolean>;
-```
-
-Query whether a screen reader is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when a screen reader is enabled and `false` otherwise.
-
----
-
-### `isHighTextContrastEnabled()` <div className="label android">Android</div>
-
-```tsx
-static isHighTextContrastEnabled(): Promise<boolean>
-```
-
-Query whether high text contrast is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when high text contrast is enabled and `false` otherwise.
-
----
-
-### `isDarkerSystemColorsEnabled()` <div className="label ios">iOS</div>
-
-```tsx
-static isDarkerSystemColorsEnabled(): Promise<boolean>
-```
-
-Query whether dark system colors is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when dark system colors is enabled and `false` otherwise.
-
----
-
-### `prefersCrossFadeTransitions()` <div className="label ios">iOS</div>
-
-```tsx
-static prefersCrossFadeTransitions(): Promise<boolean>;
-```
-
-Query whether reduce motion and prefer cross-fade transitions settings are currently enabled. Returns a promise which resolves to a boolean. The result is `true` when prefer cross-fade transitions is enabled and `false` otherwise.
-
----
-
-### `setAccessibilityFocus()`
-
-:::warning[Deprecated]
-Prefer using `sendAccessibilityEvent` with eventType `focus` instead.
-:::
-
-```tsx
-static setAccessibilityFocus(reactTag: number);
-```
-
-Set accessibility focus to a React component.
-
-On Android, this calls `UIManager.sendAccessibilityEvent` method with passed `reactTag` and `UIManager.AccessibilityEventTypes.typeViewFocused` arguments.
-
-:::note
-Make sure that any `View` you want to receive the accessibility focus has `accessible={true}`.
-:::
-
----
-
-### `sendAccessibilityEvent()`
-
-```tsx
-static sendAccessibilityEvent(host: HostInstance, eventType: AccessibilityEventTypes);
-```
-
-Imperatively trigger an accessibility event on a React component, like changing the focused element for a screen reader.
-
-:::note
-Make sure that any `View` you want to receive the accessibility focus has `accessible={true}`.
-:::
-
-| Name                                                           | Type                    | Description                                                                                                            |
-| -------------------------------------------------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------- |
-| host <div className="label basic required">Required</div>      | HostInstance            | The component ref to send the event to.                                                                                |
-| eventType <div className="label basic required">Required</div> | AccessibilityEventTypes | One of `'click'` (Android only), `'focus'`, `'viewHoverEnter'` (Android only), or `'windowStateChange'` (Android only) |
+---
+id: accessibilityinfo
+title: AccessibilityInfo
+---
+
+Sometimes it's useful to know whether or not the device has a screen reader that is currently active. The `AccessibilityInfo` API is designed for this purpose. You can use it to query the current state of the screen reader as well as to register to be notified when the state of the screen reader changes.
+
+## Example
+
+```SnackPlayer name=AccessibilityInfo%20Example&supportedPlatforms=android,ios
+import {useState, useEffect} from 'react';
+import {AccessibilityInfo, Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false);
+  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
+
+  useEffect(() => {
+    const reduceMotionChangedSubscription = AccessibilityInfo.addEventListener(
+      'reduceMotionChanged',
+      isReduceMotionEnabled => {
+        setReduceMotionEnabled(isReduceMotionEnabled);
+      },
+    );
+    const screenReaderChangedSubscription = AccessibilityInfo.addEventListener(
+      'screenReaderChanged',
+      isScreenReaderEnabled => {
+        setScreenReaderEnabled(isScreenReaderEnabled);
+      },
+    );
+
+    AccessibilityInfo.isReduceMotionEnabled().then(isReduceMotionEnabled => {
+      setReduceMotionEnabled(isReduceMotionEnabled);
+    });
+    AccessibilityInfo.isScreenReaderEnabled().then(isScreenReaderEnabled => {
+      setScreenReaderEnabled(isScreenReaderEnabled);
+    });
+
+    return () => {
+      reduceMotionChangedSubscription.remove();
+      screenReaderChangedSubscription.remove();
+    };
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.status}>
+          The reduce motion is {reduceMotionEnabled ? 'enabled' : 'disabled'}.
+        </Text>
+        <Text style={styles.status}>
+          The screen reader is {screenReaderEnabled ? 'enabled' : 'disabled'}.
+        </Text>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  status: {
+    margin: 30,
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+  eventName: AccessibilityChangeEventName | AccessibilityAnnouncementEventName,
+  handler: (
+    event: AccessibilityChangeEvent | AccessibilityAnnouncementFinishedEvent,
+  ) => void,
+): EmitterSubscription;
+```
+
+Add an event handler. Supported events:
+
+| Event name                                                                               | Description                                                                                                                                                                                                                                                                                              |
+| ---------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `accessibilityServiceChanged`<br/><div className="label two-lines android">Android</div> | Fires when some services such as TalkBack, other Android assistive technologies, and third-party accessibility services are enabled. The argument to the event handler is a boolean. The boolean is `true` when a some accessibility services is enabled and `false` otherwise.                          |
+| `announcementFinished`<br/><div className="label two-lines ios">iOS</div>                | Fires when the screen reader has finished making an announcement. The argument to the event handler is a dictionary with these keys:<ul><li>`announcement`: The string announced by the screen reader.</li><li>`success`: A boolean indicating whether the announcement was successfully made.</li></ul> |
+| `boldTextChanged`<br/><div className="label two-lines ios">iOS</div>                     | 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`<br/><div className="label two-lines ios">iOS</div>                    | 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`<br/><div className="label two-lines ios">iOS</div>                 | 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.                                  |
+| `reduceTransparencyChanged`<br/><div className="label two-lines ios">iOS</div>           | 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.                                                                                                         |
+| `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.                                                                                                                          |
+
+---
+
+### `announceForAccessibility()`
+
+```tsx
+static announceForAccessibility(announcement: string);
+```
+
+Post a string to be announced by the screen reader.
+
+---
+
+### `announceForAccessibilityWithOptions()`
+
+```tsx
+static announceForAccessibilityWithOptions(
+  announcement: string,
+  options: {queue?: boolean},
+);
+```
+
+Post a string to be announced by the screen reader with modification options. By default announcements will interrupt any existing speech, but on iOS they can be queued behind existing speech by setting `queue` to `true` in the options object.
+
+**Parameters:**
+
+| Name                                                              | Type   | Description                                                                                  |
+| ----------------------------------------------------------------- | ------ | -------------------------------------------------------------------------------------------- |
+| announcement <div className="label basic required">Required</div> | string | The string to be announced                                                                   |
+| options <div className="label basic required">Required</div>      | object | `queue` - queue the announcement behind existing speech <div className="label ios">iOS</div> |
+
+---
+
+### `getRecommendedTimeoutMillis()` <div className="label android">Android</div>
+
+```tsx
+static getRecommendedTimeoutMillis(originalTimeout: number): Promise<number>;
+```
+
+Gets the timeout in millisecond that the user needs.
+This value is set in "Time to take action (Accessibility timeout)" of "Accessibility" settings.
+
+**Parameters:**
+
+| Name                                                                 | Type   | Description                                                                           |
+| -------------------------------------------------------------------- | ------ | ------------------------------------------------------------------------------------- |
+| originalTimeout <div className="label basic required">Required</div> | number | The timeout to return if "Accessibility timeout" is not set. Specify in milliseconds. |
+
+---
+
+### `isAccessibilityServiceEnabled()` <div className="label android">Android</div>
+
+```tsx
+static isAccessibilityServiceEnabled(): Promise<boolean>;
+```
+
+Check whether any accessibility service is enabled. This includes TalkBack but also any third-party accessibility app that may be installed. To only check whether TalkBack is enabled, use [isScreenReaderEnabled](#isscreenreaderenabled). Returns a promise which resolves to a boolean. The result is `true` when some accessibility services is enabled and `false` otherwise.
+
+> **Note**: Please use [isScreenReaderEnabled](#isscreenreaderenabled) if you only want to check the status of TalkBack.
+
+---
+
+### `isBoldTextEnabled()` <div className="label ios">iOS</div>
+
+```tsx
+static isBoldTextEnabled(): Promise<boolean>:
+```
+
+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()` <div className="label ios">iOS</div>
+
+```tsx
+static isGrayscaleEnabled(): Promise<boolean>;
+```
+
+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()` <div className="label ios">iOS</div>
+
+```tsx
+static isInvertColorsEnabled(): Promise<boolean>;
+```
+
+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()`
+
+```tsx
+static isReduceMotionEnabled(): Promise<boolean>;
+```
+
+Query whether reduce motion is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when reduce motion is enabled and `false` otherwise.
+
+---
+
+### `isReduceTransparencyEnabled()` <div className="label ios">iOS</div>
+
+```tsx
+static isReduceTransparencyEnabled(): Promise<boolean>;
+```
+
+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()`
+
+```tsx
+static isScreenReaderEnabled(): Promise<boolean>;
+```
+
+Query whether a screen reader is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when a screen reader is enabled and `false` otherwise.
+
+---
+
+### `isHighTextContrastEnabled()` <div className="label android">Android</div>
+
+```tsx
+static isHighTextContrastEnabled(): Promise<boolean>
+```
+
+Query whether high text contrast is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when high text contrast is enabled and `false` otherwise.
+
+---
+
+### `isDarkerSystemColorsEnabled()` <div className="label ios">iOS</div>
+
+```tsx
+static isDarkerSystemColorsEnabled(): Promise<boolean>
+```
+
+Query whether dark system colors is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when dark system colors is enabled and `false` otherwise.
+
+---
+
+### `prefersCrossFadeTransitions()` <div className="label ios">iOS</div>
+
+```tsx
+static prefersCrossFadeTransitions(): Promise<boolean>;
+```
+
+Query whether reduce motion and prefer cross-fade transitions settings are currently enabled. Returns a promise which resolves to a boolean. The result is `true` when prefer cross-fade transitions is enabled and `false` otherwise.
+
+---
+
+### `setAccessibilityFocus()`
+
+:::warning[Deprecated]
+Prefer using `sendAccessibilityEvent` with eventType `focus` instead.
+:::
+
+```tsx
+static setAccessibilityFocus(reactTag: number);
+```
+
+Set accessibility focus to a React component.
+
+On Android, this calls `UIManager.sendAccessibilityEvent` method with passed `reactTag` and `UIManager.AccessibilityEventTypes.typeViewFocused` arguments.
+
+:::note
+Make sure that any `View` you want to receive the accessibility focus has `accessible={true}`.
+:::
+
+---
+
+### `sendAccessibilityEvent()`
+
+```tsx
+static sendAccessibilityEvent(host: HostInstance, eventType: AccessibilityEventTypes);
+```
+
+Imperatively trigger an accessibility event on a React component, like changing the focused element for a screen reader.
+
+:::note
+Make sure that any `View` you want to receive the accessibility focus has `accessible={true}`.
+:::
+
+| Name                                                           | Type                    | Description                                                                                                            |
+| -------------------------------------------------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| host <div className="label basic required">Required</div>      | HostInstance            | The component ref to send the event to.                                                                                |
+| eventType <div className="label basic required">Required</div> | AccessibilityEventTypes | One of `'click'` (Android only), `'focus'`, `'viewHoverEnter'` (Android only), or `'windowStateChange'` (Android only) |
diff --git a/website/versioned_docs/version-0.80/actionsheetios.md b/website/versioned_docs/version-0.80/actionsheetios.md
index 3640d4de160..ef129850796 100644
--- a/website/versioned_docs/version-0.80/actionsheetios.md
+++ b/website/versioned_docs/version-0.80/actionsheetios.md
@@ -1,142 +1,142 @@
----
-id: actionsheetios
-title: ActionSheetIOS
----
-
-Displays native to iOS [Action Sheet](https://developer.apple.com/design/human-interface-guidelines/action-sheets) component.
-
-## Example
-
-```SnackPlayer name=ActionSheetIOS%20Example&supportedPlatforms=ios
-import React, {useState} from 'react';
-import {ActionSheetIOS, Button, StyleSheet, Text} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [result, setResult] = useState('🔮');
-
-  const onPress = () =>
-    ActionSheetIOS.showActionSheetWithOptions(
-      {
-        options: ['Cancel', 'Generate number', 'Reset'],
-        destructiveButtonIndex: 2,
-        cancelButtonIndex: 0,
-        userInterfaceStyle: 'dark',
-      },
-      buttonIndex => {
-        if (buttonIndex === 0) {
-          // cancel action
-        } else if (buttonIndex === 1) {
-          setResult(String(Math.floor(Math.random() * 100) + 1));
-        } else if (buttonIndex === 2) {
-          setResult('🔮');
-        }
-      },
-    );
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.result}>{result}</Text>
-        <Button onPress={onPress} title="Show Action Sheet" />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  result: {
-    fontSize: 64,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
-# Reference
-
-## Methods
-
-### `showActionSheetWithOptions()`
-
-```tsx
-static showActionSheetWithOptions: (
-  options: ActionSheetIOSOptions,
-  callback: (buttonIndex: number) => void,
-);
-```
-
-Display an iOS action sheet. The `options` object must contain one or more of:
-
-- `options` (array of strings) - a list of button titles (required)
-- `cancelButtonIndex` (int) - index of cancel button in `options`
-- `cancelButtonTintColor` (string) - the [color](colors) used for the change the text color of the cancel button
-- `destructiveButtonIndex` (int or array of ints) - indices of destructive buttons in `options`
-- `title` (string) - a title to show above the action sheet
-- `message` (string) - a message to show below the title
-- `anchor` (number) - the node to which the action sheet should be anchored (used for iPad)
-- `tintColor` (string) - the [color](colors) used for non-destructive button titles
-- `disabledButtonIndices` (array of numbers) - a list of button indices which should be disabled
-- `userInterfaceStyle` (string) - the interface style used for the action sheet, can be set to `light` or `dark`, otherwise the default system style will be used
-
-The 'callback' function takes one parameter, the zero-based index of the selected item.
-
-Minimal example:
-
-```tsx
-ActionSheetIOS.showActionSheetWithOptions(
-  {
-    options: ['Cancel', 'Remove'],
-    destructiveButtonIndex: 1,
-    cancelButtonIndex: 0,
-  },
-  buttonIndex => {
-    if (buttonIndex === 1) {
-      /* destructive action */
-    }
-  },
-);
-```
-
----
-
-### `dismissActionSheet()`
-
-```tsx
-static dismissActionSheet();
-```
-
-Dismisses the most upper iOS action sheet presented, if no action sheet is present a warning is displayed.
-
----
-
-### `showShareActionSheetWithOptions()`
-
-```tsx
-static showShareActionSheetWithOptions: (
-  options: ShareActionSheetIOSOptions,
-  failureCallback: (error: Error) => void,
-  successCallback: (success: boolean, method: string) => void,
-);
-```
-
-Display the iOS share sheet. The `options` object should contain one or both of `message` and `url` and can additionally have a `subject` or `excludedActivityTypes`:
-
-- `url` (string) - a URL to share
-- `message` (string) - a message to share
-- `subject` (string) - a subject for the message
-- `excludedActivityTypes` (array) - the activities to exclude from the ActionSheet
-
-> **Note:** If `url` points to a local file, or is a base64-encoded uri, the file it points to will be loaded and shared directly. In this way, you can share images, videos, PDF files, etc. If `url` points to a remote file or address it must conform to URL format as described in [RFC 2396](https://www.ietf.org/rfc/rfc2396.txt). For example, a web URL without a proper protocol (HTTP/HTTPS) will not be shared.
-
-The 'failureCallback' function takes one parameter, an error object. The only property defined on this object is an optional `stack` property of type `string`.
-
-The 'successCallback' function takes two parameters:
-
-- a boolean value signifying success or failure
-- a string that, in the case of success, indicates the method of sharing
+---
+id: actionsheetios
+title: ActionSheetIOS
+---
+
+Displays native to iOS [Action Sheet](https://developer.apple.com/design/human-interface-guidelines/action-sheets) component.
+
+## Example
+
+```SnackPlayer name=ActionSheetIOS%20Example&supportedPlatforms=ios
+import {useState} from 'react';
+import {ActionSheetIOS, Button, StyleSheet, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [result, setResult] = useState('🔮');
+
+  const onPress = () =>
+    ActionSheetIOS.showActionSheetWithOptions(
+      {
+        options: ['Cancel', 'Generate number', 'Reset'],
+        destructiveButtonIndex: 2,
+        cancelButtonIndex: 0,
+        userInterfaceStyle: 'dark',
+      },
+      buttonIndex => {
+        if (buttonIndex === 0) {
+          // cancel action
+        } else if (buttonIndex === 1) {
+          setResult(String(Math.floor(Math.random() * 100) + 1));
+        } else if (buttonIndex === 2) {
+          setResult('🔮');
+        }
+      },
+    );
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.result}>{result}</Text>
+        <Button onPress={onPress} title="Show Action Sheet" />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  result: {
+    fontSize: 64,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+# Reference
+
+## Methods
+
+### `showActionSheetWithOptions()`
+
+```tsx
+static showActionSheetWithOptions: (
+  options: ActionSheetIOSOptions,
+  callback: (buttonIndex: number) => void,
+);
+```
+
+Display an iOS action sheet. The `options` object must contain one or more of:
+
+- `options` (array of strings) - a list of button titles (required)
+- `cancelButtonIndex` (int) - index of cancel button in `options`
+- `cancelButtonTintColor` (string) - the [color](colors) used for the change the text color of the cancel button
+- `destructiveButtonIndex` (int or array of ints) - indices of destructive buttons in `options`
+- `title` (string) - a title to show above the action sheet
+- `message` (string) - a message to show below the title
+- `anchor` (number) - the node to which the action sheet should be anchored (used for iPad)
+- `tintColor` (string) - the [color](colors) used for non-destructive button titles
+- `disabledButtonIndices` (array of numbers) - a list of button indices which should be disabled
+- `userInterfaceStyle` (string) - the interface style used for the action sheet, can be set to `light` or `dark`, otherwise the default system style will be used
+
+The 'callback' function takes one parameter, the zero-based index of the selected item.
+
+Minimal example:
+
+```tsx
+ActionSheetIOS.showActionSheetWithOptions(
+  {
+    options: ['Cancel', 'Remove'],
+    destructiveButtonIndex: 1,
+    cancelButtonIndex: 0,
+  },
+  buttonIndex => {
+    if (buttonIndex === 1) {
+      /* destructive action */
+    }
+  },
+);
+```
+
+---
+
+### `dismissActionSheet()`
+
+```tsx
+static dismissActionSheet();
+```
+
+Dismisses the most upper iOS action sheet presented, if no action sheet is present a warning is displayed.
+
+---
+
+### `showShareActionSheetWithOptions()`
+
+```tsx
+static showShareActionSheetWithOptions: (
+  options: ShareActionSheetIOSOptions,
+  failureCallback: (error: Error) => void,
+  successCallback: (success: boolean, method: string) => void,
+);
+```
+
+Display the iOS share sheet. The `options` object should contain one or both of `message` and `url` and can additionally have a `subject` or `excludedActivityTypes`:
+
+- `url` (string) - a URL to share
+- `message` (string) - a message to share
+- `subject` (string) - a subject for the message
+- `excludedActivityTypes` (array) - the activities to exclude from the ActionSheet
+
+> **Note:** If `url` points to a local file, or is a base64-encoded uri, the file it points to will be loaded and shared directly. In this way, you can share images, videos, PDF files, etc. If `url` points to a remote file or address it must conform to URL format as described in [RFC 2396](https://www.ietf.org/rfc/rfc2396.txt). For example, a web URL without a proper protocol (HTTP/HTTPS) will not be shared.
+
+The 'failureCallback' function takes one parameter, an error object. The only property defined on this object is an optional `stack` property of type `string`.
+
+The 'successCallback' function takes two parameters:
+
+- a boolean value signifying success or failure
+- a string that, in the case of success, indicates the method of sharing
diff --git a/website/versioned_docs/version-0.80/activityindicator.md b/website/versioned_docs/version-0.80/activityindicator.md
index fc8edca4e25..cab2b647e77 100644
--- a/website/versioned_docs/version-0.80/activityindicator.md
+++ b/website/versioned_docs/version-0.80/activityindicator.md
@@ -8,7 +8,6 @@ Displays a circular loading indicator.
 ## Example
 
 ```SnackPlayer name=ActivityIndicator%20Example
-import React from 'react';
 import {ActivityIndicator, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.80/alert.md b/website/versioned_docs/version-0.80/alert.md
index c80b62fb7a6..78b1c412e66 100644
--- a/website/versioned_docs/version-0.80/alert.md
+++ b/website/versioned_docs/version-0.80/alert.md
@@ -12,7 +12,6 @@ This is an API that works both on Android and iOS and can show static alerts. Al
 ## Example
 
 ```SnackPlayer name=Alert%20Example&supportedPlatforms=ios,android
-import React from 'react';
 import {StyleSheet, Button, Alert} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -81,7 +80,6 @@ The cancel event can be handled by providing an `onDismiss` callback property in
 ### Example <div className="label android">Android</div>
 
 ```SnackPlayer name=Alert%20Android%20Dissmissable%20Example&supportedPlatforms=android
-import React from 'react';
 import {StyleSheet, Button, Alert} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.80/animated.md b/website/versioned_docs/version-0.80/animated.md
index bc8b57ecff9..f1745453570 100644
--- a/website/versioned_docs/version-0.80/animated.md
+++ b/website/versioned_docs/version-0.80/animated.md
@@ -13,8 +13,7 @@ The core workflow for creating an animation is to create an `Animated.Value`, ho
 
 The following example contains a `View` which will fade in and fade out based on the animated value `fadeAnim`
 
-```SnackPlayer name=Animated%20Example&supportedPlatforms=ios,android
-import React, {useRef} from 'react';
+```SnackPlayer name=Animated%20Example
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 import {
   Animated,
@@ -22,11 +21,12 @@ import {
   View,
   StyleSheet,
   Button,
+  useAnimatedValue,
 } from 'react-native';
 
 const App = () => {
   // fadeAnim will be used as the value for opacity. Initial Value: 0
-  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const fadeAnim = useAnimatedValue(0);
 
   const fadeIn = () => {
     // Will change fadeAnim value to 1 in 5 seconds
diff --git a/website/versioned_docs/version-0.80/animatedvaluexy.md b/website/versioned_docs/version-0.80/animatedvaluexy.md
index 6cb44808ccf..8135c12354a 100644
--- a/website/versioned_docs/version-0.80/animatedvaluexy.md
+++ b/website/versioned_docs/version-0.80/animatedvaluexy.md
@@ -1,227 +1,227 @@
----
-id: animatedvaluexy
-title: Animated.ValueXY
----
-
-2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal [`Animated.Value`](animatedvalue), but multiplexed. Contains two regular `Animated.Value`s under the hood.
-
-## Example
-
-```SnackPlayer name=Animated.ValueXY%20Example
-import React, {useRef} from 'react';
-import {Animated, PanResponder, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const DraggableView = () => {
-  const pan = useRef(new Animated.ValueXY()).current;
-
-  const panResponder = PanResponder.create({
-    onStartShouldSetPanResponder: () => true,
-    onPanResponderMove: Animated.event([
-      null,
-      {
-        dx: pan.x, // x,y are Animated.Value
-        dy: pan.y,
-      },
-    ]),
-    onPanResponderRelease: () => {
-      Animated.spring(
-        pan, // Auto-multiplexed
-        {toValue: {x: 0, y: 0}, useNativeDriver: true}, // Back to zero
-      ).start();
-    },
-  });
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Animated.View
-          {...panResponder.panHandlers}
-          style={[pan.getLayout(), styles.box]}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  box: {
-    backgroundColor: '#61dafb',
-    width: 80,
-    height: 80,
-    borderRadius: 4,
-  },
-});
-
-export default DraggableView;
-```
-
----
-
-# Reference
-
-## Methods
-
-### `setValue()`
-
-```tsx
-setValue(value: {x: number; y: number});
-```
-
-Directly set the value. This will stop any animations running on the value and update all the bound properties.
-
-**Parameters:**
-
-| Name  | Type                     | Required | Description |
-| ----- | ------------------------ | -------- | ----------- |
-| value | `{x: number; y: number}` | Yes      | Value       |
-
----
-
-### `setOffset()`
-
-```tsx
-setOffset(offset: {x: number; y: number});
-```
-
-Sets an offset that is applied on top of whatever value is set, whether via `setValue`, an animation, or `Animated.event`. Useful for compensating things like the start of a pan gesture.
-
-**Parameters:**
-
-| Name   | Type                     | Required | Description  |
-| ------ | ------------------------ | -------- | ------------ |
-| offset | `{x: number; y: number}` | Yes      | Offset value |
-
----
-
-### `flattenOffset()`
-
-```tsx
-flattenOffset();
-```
-
-Merges the offset value into the base value and resets the offset to zero. The final output of the value is unchanged.
-
----
-
-### `extractOffset()`
-
-```tsx
-extractOffset();
-```
-
-Sets the offset value to the base value, and resets the base value to zero. The final output of the value is unchanged.
-
----
-
-### `addListener()`
-
-```tsx
-addListener(callback: (value: {x: number; y: number}) => void);
-```
-
-Adds an asynchronous listener to the value so you can observe updates from animations. This is useful because there is no way to synchronously read the value because it might be driven natively.
-
-Returns a string that serves as an identifier for the listener.
-
-**Parameters:**
-
-| Name     | Type     | Required | Description                                                                                 |
-| -------- | -------- | -------- | ------------------------------------------------------------------------------------------- |
-| callback | function | Yes      | The callback function which will receive an object with a `value` key set to the new value. |
-
----
-
-### `removeListener()`
-
-```tsx
-removeListener(id: string);
-```
-
-Unregister a listener. The `id` param shall match the identifier previously returned by `addListener()`.
-
-**Parameters:**
-
-| Name | Type   | Required | Description                        |
-| ---- | ------ | -------- | ---------------------------------- |
-| id   | string | Yes      | Id for the listener being removed. |
-
----
-
-### `removeAllListeners()`
-
-```tsx
-removeAllListeners();
-```
-
-Remove all registered listeners.
-
----
-
-### `stopAnimation()`
-
-```tsx
-stopAnimation(callback?: (value: {x: number; y: number}) => void);
-```
-
-Stops any running animation or tracking. `callback` is invoked with the final value after stopping the animation, which is useful for updating state to match the animation position with layout.
-
-**Parameters:**
-
-| Name     | Type     | Required | Description                                   |
-| -------- | -------- | -------- | --------------------------------------------- |
-| callback | function | No       | A function that will receive the final value. |
-
----
-
-### `resetAnimation()`
-
-```tsx
-resetAnimation(callback?: (value: {x: number; y: number}) => void);
-```
-
-Stops any animation and resets the value to its original.
-
-**Parameters:**
-
-| Name     | Type     | Required | Description                                      |
-| -------- | -------- | -------- | ------------------------------------------------ |
-| callback | function | No       | A function that will receive the original value. |
-
----
-
-### `getLayout()`
-
-```tsx
-getLayout(): {left: Animated.Value, top: Animated.Value};
-```
-
-Converts `{x, y}` into `{left, top}` for use in style, e.g.
-
-```tsx
-style={this.state.anim.getLayout()}
-```
-
----
-
-### `getTranslateTransform()`
-
-```tsx
-getTranslateTransform(): [
-  {translateX: Animated.Value},
-  {translateY: Animated.Value},
-];
-```
-
-Converts `{x, y}` into a useable translation transform, e.g.
-
-```tsx
-style={{
-  transform: this.state.anim.getTranslateTransform()
-}}
-```
+---
+id: animatedvaluexy
+title: Animated.ValueXY
+---
+
+2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal [`Animated.Value`](animatedvalue), but multiplexed. Contains two regular `Animated.Value`s under the hood.
+
+## Example
+
+```SnackPlayer name=Animated.ValueXY%20Example
+import {useRef} from 'react';
+import {Animated, PanResponder, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const DraggableView = () => {
+  const pan = useRef(new Animated.ValueXY()).current;
+
+  const panResponder = PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onPanResponderMove: Animated.event([
+      null,
+      {
+        dx: pan.x, // x,y are Animated.Value
+        dy: pan.y,
+      },
+    ]),
+    onPanResponderRelease: () => {
+      Animated.spring(
+        pan, // Auto-multiplexed
+        {toValue: {x: 0, y: 0}, useNativeDriver: true}, // Back to zero
+      ).start();
+    },
+  });
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Animated.View
+          {...panResponder.panHandlers}
+          style={[pan.getLayout(), styles.box]}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  box: {
+    backgroundColor: '#61dafb',
+    width: 80,
+    height: 80,
+    borderRadius: 4,
+  },
+});
+
+export default DraggableView;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `setValue()`
+
+```tsx
+setValue(value: {x: number; y: number});
+```
+
+Directly set the value. This will stop any animations running on the value and update all the bound properties.
+
+**Parameters:**
+
+| Name  | Type                     | Required | Description |
+| ----- | ------------------------ | -------- | ----------- |
+| value | `{x: number; y: number}` | Yes      | Value       |
+
+---
+
+### `setOffset()`
+
+```tsx
+setOffset(offset: {x: number; y: number});
+```
+
+Sets an offset that is applied on top of whatever value is set, whether via `setValue`, an animation, or `Animated.event`. Useful for compensating things like the start of a pan gesture.
+
+**Parameters:**
+
+| Name   | Type                     | Required | Description  |
+| ------ | ------------------------ | -------- | ------------ |
+| offset | `{x: number; y: number}` | Yes      | Offset value |
+
+---
+
+### `flattenOffset()`
+
+```tsx
+flattenOffset();
+```
+
+Merges the offset value into the base value and resets the offset to zero. The final output of the value is unchanged.
+
+---
+
+### `extractOffset()`
+
+```tsx
+extractOffset();
+```
+
+Sets the offset value to the base value, and resets the base value to zero. The final output of the value is unchanged.
+
+---
+
+### `addListener()`
+
+```tsx
+addListener(callback: (value: {x: number; y: number}) => void);
+```
+
+Adds an asynchronous listener to the value so you can observe updates from animations. This is useful because there is no way to synchronously read the value because it might be driven natively.
+
+Returns a string that serves as an identifier for the listener.
+
+**Parameters:**
+
+| Name     | Type     | Required | Description                                                                                 |
+| -------- | -------- | -------- | ------------------------------------------------------------------------------------------- |
+| callback | function | Yes      | The callback function which will receive an object with a `value` key set to the new value. |
+
+---
+
+### `removeListener()`
+
+```tsx
+removeListener(id: string);
+```
+
+Unregister a listener. The `id` param shall match the identifier previously returned by `addListener()`.
+
+**Parameters:**
+
+| Name | Type   | Required | Description                        |
+| ---- | ------ | -------- | ---------------------------------- |
+| id   | string | Yes      | Id for the listener being removed. |
+
+---
+
+### `removeAllListeners()`
+
+```tsx
+removeAllListeners();
+```
+
+Remove all registered listeners.
+
+---
+
+### `stopAnimation()`
+
+```tsx
+stopAnimation(callback?: (value: {x: number; y: number}) => void);
+```
+
+Stops any running animation or tracking. `callback` is invoked with the final value after stopping the animation, which is useful for updating state to match the animation position with layout.
+
+**Parameters:**
+
+| Name     | Type     | Required | Description                                   |
+| -------- | -------- | -------- | --------------------------------------------- |
+| callback | function | No       | A function that will receive the final value. |
+
+---
+
+### `resetAnimation()`
+
+```tsx
+resetAnimation(callback?: (value: {x: number; y: number}) => void);
+```
+
+Stops any animation and resets the value to its original.
+
+**Parameters:**
+
+| Name     | Type     | Required | Description                                      |
+| -------- | -------- | -------- | ------------------------------------------------ |
+| callback | function | No       | A function that will receive the original value. |
+
+---
+
+### `getLayout()`
+
+```tsx
+getLayout(): {left: Animated.Value, top: Animated.Value};
+```
+
+Converts `{x, y}` into `{left, top}` for use in style, e.g.
+
+```tsx
+style={this.state.anim.getLayout()}
+```
+
+---
+
+### `getTranslateTransform()`
+
+```tsx
+getTranslateTransform(): [
+  {translateX: Animated.Value},
+  {translateY: Animated.Value},
+];
+```
+
+Converts `{x, y}` into a useable translation transform, e.g.
+
+```tsx
+style={{
+  transform: this.state.anim.getTranslateTransform()
+}}
+```
diff --git a/website/versioned_docs/version-0.80/animations.md b/website/versioned_docs/version-0.80/animations.md
index 74cb7650287..321c8a0b2e1 100644
--- a/website/versioned_docs/version-0.80/animations.md
+++ b/website/versioned_docs/version-0.80/animations.md
@@ -21,7 +21,7 @@ For example, a container view that fades in when it is mounted may look like thi
 <TabItem value="javascript">
 
 ```SnackPlayer ext=js
-import React, {useEffect, useRef} from 'react';
+import {useEffect, useRef} from 'react';
 import {Animated, Text, View} from 'react-native';
 
 const FadeInView = props => {
@@ -74,12 +74,12 @@ export default () => {
 <TabItem value="typescript">
 
 ```SnackPlayer ext=tsx
-import React, {useEffect, useRef, type PropsWithChildren} from 'react';
+import {useEffect, useRef, type PropsWithChildren, type FC} from 'react';
 import {Animated, Text, View, type ViewStyle} from 'react-native';
 
 type FadeInViewProps = PropsWithChildren<{style: ViewStyle}>;
 
-const FadeInView: React.FC<FadeInViewProps> = props => {
+const FadeInView: FC<FadeInViewProps> = props => {
   const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
 
   useEffect(() => {
@@ -309,7 +309,6 @@ The following example implements a horizontal scrolling carousel where the scrol
 #### ScrollView with Animated Event Example
 
 ```SnackPlayer name=Animated&supportedPlatforms=ios,android
-import React from 'react';
 import {
   ScrollView,
   Text,
@@ -452,7 +451,7 @@ onPanResponderMove={Animated.event(
 #### PanResponder with Animated Event Example
 
 ```SnackPlayer name=Animated
-import React, {useRef} from 'react';
+import {useRef} from 'react';
 import {Animated, View, StyleSheet, PanResponder, Text} from 'react-native';
 
 const App = () => {
@@ -549,7 +548,7 @@ The native driver also works with `Animated.event`. This is especially useful fo
 </Animated.ScrollView>
 ```
 
-You can see the native driver in action by running the [RNTester app](https://github.com/facebook/react-native/blob/main/packages/rn-tester/), then loading the Native Animated Example. You can also take a look at the [source code](https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js) to learn how these examples were produced.
+You can see the native driver in action by running the [RNTester app](https://github.com/facebook/react-native/blob/main/packages/rn-tester/), then loading the Native Animated Example. You can also take a look at the [source code](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js) to learn how these examples were produced.
 
 #### Caveats
 
@@ -592,8 +591,8 @@ Note that in order to get this to work on **Android** you need to set the follow
 UIManager.setLayoutAnimationEnabledExperimental(true);
 ```
 
-```SnackPlayer name=LayoutAnimations&supportedPlatforms=ios,android
-import React, {useState} from 'react';
+```SnackPlayer name=LayoutAnimations
+import {useState} from 'react';
 import {
   NativeModules,
   LayoutAnimation,
@@ -622,9 +621,7 @@ export default function App() {
 
   return (
     <View style={styles.container}>
-      <View
-        style={[styles.box, {width: state.w, height: state.h}]}
-      />
+      <View style={[styles.box, {width: state.w, height: state.h}]} />
       <TouchableOpacity onPress={onPress}>
         <View style={styles.button}>
           <Text style={styles.buttonText}>Press me!</Text>
diff --git a/website/versioned_docs/version-0.80/appstate.md b/website/versioned_docs/version-0.80/appstate.md
index b776907d3e1..4980ef439da 100644
--- a/website/versioned_docs/version-0.80/appstate.md
+++ b/website/versioned_docs/version-0.80/appstate.md
@@ -1,122 +1,122 @@
----
-id: appstate
-title: AppState
----
-
-`AppState` can tell you if the app is in the foreground or background, and notify you when the state changes.
-
-AppState is frequently used to determine the intent and proper behavior when handling push notifications.
-
-### App States
-
-- `active` - The app is running in the foreground
-- `background` - The app is running in the background. The user is either:
-  - in another app
-  - on the home screen
-  - [Android] on another `Activity`, including temporary system activities such
-    as autofill credential pickers (even if launched by your app or the system)
-- [iOS] `inactive` - This is a state that occurs when transitioning between foreground & background, and during periods of inactivity such as entering the multitasking view, opening the Notification Center or in the event of an incoming call.
-
-For more information, see [Apple's documentation](https://developer.apple.com/documentation/uikit/app_and_scenes/managing_your_app_s_life_cycle)
-
-## Basic Usage
-
-To see the current state, you can check `AppState.currentState`, which will be kept up-to-date.
-
-:::info
-If you are using the legacy architecture, `currentState` will be `null` at launch until it is retrieved asynchronously from the native side.
-:::
-
-```SnackPlayer name=AppState%20Example
-import React, {useRef, useState, useEffect} from 'react';
-import {AppState, StyleSheet, Text} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const AppStateExample = () => {
-  const appState = useRef(AppState.currentState);
-  const [appStateVisible, setAppStateVisible] = useState(appState.current);
-
-  useEffect(() => {
-    const subscription = AppState.addEventListener('change', nextAppState => {
-      if (
-        appState.current.match(/inactive|background/) &&
-        nextAppState === 'active'
-      ) {
-        console.log('App has come to the foreground!');
-      }
-
-      appState.current = nextAppState;
-      setAppStateVisible(appState.current);
-      console.log('AppState', appState.current);
-    });
-
-    return () => {
-      subscription.remove();
-    };
-  }, []);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>Current state is: {appStateVisible}</Text>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default AppStateExample;
-```
-
-This example will only ever appear to say "Current state is: active" because the app is only visible to the user when in the `active` state. If you want to experiment with the code we recommend to use your own device instead of embedded preview.
-
----
-
-# Reference
-
-## Events
-
-### `change`
-
-This event is received when the app state has changed. The listener is called with one of [the current app state values](appstate#app-states).
-
-### `memoryWarning` <div className="label ios">iOS</div>
-
-Fires when the app receives a memory warning from the operating system.
-
-### `focus` <div className="label android">Android</div>
-
-Received when the app gains focus (the user is interacting with the app).
-
-### `blur` <div className="label android">Android</div>
-
-Received when the user is not actively interacting with the app. Useful in situations when the user pulls down the [notification drawer](https://developer.android.com/guide/topics/ui/notifiers/notifications#bar-and-drawer). `AppState` won't change but the `blur` event will get fired.
-
-## Methods
-
-### `addEventListener()`
-
-```tsx
-static addEventListener(
-  type: AppStateEvent,
-  listener: (state: AppStateStatus) => void,
-): NativeEventSubscription;
-```
-
-Sets up a function that will be called whenever the specified event type on AppState occurs. Valid values for `eventType` are
-[listed above](#events). Returns the `EventSubscription`.
-
-## Properties
-
-### `currentState`
-
-```tsx
-static currentState: AppStateStatus;
-```
+---
+id: appstate
+title: AppState
+---
+
+`AppState` can tell you if the app is in the foreground or background, and notify you when the state changes.
+
+AppState is frequently used to determine the intent and proper behavior when handling push notifications.
+
+### App States
+
+- `active` - The app is running in the foreground
+- `background` - The app is running in the background. The user is either:
+  - in another app
+  - on the home screen
+  - [Android] on another `Activity`, including temporary system activities such
+    as autofill credential pickers (even if launched by your app or the system)
+- [iOS] `inactive` - This is a state that occurs when transitioning between foreground & background, and during periods of inactivity such as entering the multitasking view, opening the Notification Center or in the event of an incoming call.
+
+For more information, see [Apple's documentation](https://developer.apple.com/documentation/uikit/app_and_scenes/managing_your_app_s_life_cycle)
+
+## Basic Usage
+
+To see the current state, you can check `AppState.currentState`, which will be kept up-to-date.
+
+:::info
+If you are using the legacy architecture, `currentState` will be `null` at launch until it is retrieved asynchronously from the native side.
+:::
+
+```SnackPlayer name=AppState%20Example
+import {useRef, useState, useEffect} from 'react';
+import {AppState, StyleSheet, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const AppStateExample = () => {
+  const appState = useRef(AppState.currentState);
+  const [appStateVisible, setAppStateVisible] = useState(appState.current);
+
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', nextAppState => {
+      if (
+        appState.current.match(/inactive|background/) &&
+        nextAppState === 'active'
+      ) {
+        console.log('App has come to the foreground!');
+      }
+
+      appState.current = nextAppState;
+      setAppStateVisible(appState.current);
+      console.log('AppState', appState.current);
+    });
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>Current state is: {appStateVisible}</Text>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default AppStateExample;
+```
+
+This example will only ever appear to say "Current state is: active" because the app is only visible to the user when in the `active` state. If you want to experiment with the code we recommend to use your own device instead of embedded preview.
+
+---
+
+# Reference
+
+## Events
+
+### `change`
+
+This event is received when the app state has changed. The listener is called with one of [the current app state values](appstate#app-states).
+
+### `memoryWarning` <div className="label ios">iOS</div>
+
+Fires when the app receives a memory warning from the operating system.
+
+### `focus` <div className="label android">Android</div>
+
+Received when the app gains focus (the user is interacting with the app).
+
+### `blur` <div className="label android">Android</div>
+
+Received when the user is not actively interacting with the app. Useful in situations when the user pulls down the [notification drawer](https://developer.android.com/guide/topics/ui/notifiers/notifications#bar-and-drawer). `AppState` won't change but the `blur` event will get fired.
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+  type: AppStateEvent,
+  listener: (state: AppStateStatus) => void,
+): NativeEventSubscription;
+```
+
+Sets up a function that will be called whenever the specified event type on AppState occurs. Valid values for `eventType` are
+[listed above](#events). Returns the `EventSubscription`.
+
+## Properties
+
+### `currentState`
+
+```tsx
+static currentState: AppStateStatus;
+```
diff --git a/website/versioned_docs/version-0.80/backhandler.md b/website/versioned_docs/version-0.80/backhandler.md
index 66f0a212faa..4061b19a2ff 100644
--- a/website/versioned_docs/version-0.80/backhandler.md
+++ b/website/versioned_docs/version-0.80/backhandler.md
@@ -1,134 +1,134 @@
----
-id: backhandler
-title: BackHandler
----
-
-The Backhandler API detects hardware button presses for back navigation, lets you register event listeners for the system's back action, and lets you control how your application responds. It is Android-only.
-
-The event subscriptions are called in reverse order (i.e. the last registered subscription is called first).
-
-- **If one subscription returns true,** then subscriptions registered earlier will not be called.
-- **If no subscription returns true or none are registered,** it programmatically invokes the default back button functionality to exit the app.
-
-> **Warning for modal users:** If your app shows an opened `Modal`, `BackHandler` will not publish any events ([see `Modal` docs](modal#onrequestclose)).
-
-## Pattern
-
-```tsx
-const subscription = BackHandler.addEventListener(
-  'hardwareBackPress',
-  function () {
-    /**
-     * this.onMainScreen and this.goBack are just examples,
-     * you need to use your own implementation here.
-     *
-     * Typically you would use the navigator here to go to the last state.
-     */
-
-    if (!this.onMainScreen()) {
-      this.goBack();
-      /**
-       * When true is returned the event will not be bubbled up
-       * & no other back action will execute
-       */
-      return true;
-    }
-    /**
-     * Returning false will let the event to bubble up & let other event listeners
-     * or the system's default back action to be executed.
-     */
-    return false;
-  },
-);
-
-// Unsubscribe the listener on unmount
-subscription.remove();
-```
-
-## Example
-
-The following example implements a scenario where you confirm if the user wants to exit the app:
-
-```SnackPlayer name=BackHandler&supportedPlatforms=android
-import React, {useEffect} from 'react';
-import {Text, StyleSheet, BackHandler, Alert} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  useEffect(() => {
-    const backAction = () => {
-      Alert.alert('Hold on!', 'Are you sure you want to go back?', [
-        {
-          text: 'Cancel',
-          onPress: () => null,
-          style: 'cancel',
-        },
-        {text: 'YES', onPress: () => BackHandler.exitApp()},
-      ]);
-      return true;
-    };
-
-    const backHandler = BackHandler.addEventListener(
-      'hardwareBackPress',
-      backAction,
-    );
-
-    return () => backHandler.remove();
-  }, []);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.text}>Click Back button!</Text>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  text: {
-    fontSize: 18,
-    fontWeight: 'bold',
-  },
-});
-
-export default App;
-```
-
-`BackHandler.addEventListener` creates an event listener & returns a `NativeEventSubscription` object which should be cleared using `NativeEventSubscription.remove` method.
-
-## Usage with React Navigation
-
-If you are using React Navigation to navigate across different screens, you can follow their guide on [Custom Android back button behaviour](https://reactnavigation.org/docs/custom-android-back-button-handling/)
-
-## Backhandler hook
-
-[React Native Hooks](https://github.com/react-native-community/hooks#usebackhandler) has a nice `useBackHandler` hook which will simplify the process of setting up event listeners.
-
----
-
-# Reference
-
-## Methods
-
-### `addEventListener()`
-
-```tsx
-static addEventListener(
-  eventName: BackPressEventName,
-  handler: () => boolean | null | undefined,
-): NativeEventSubscription;
-```
-
----
-
-### `exitApp()`
-
-```tsx
-static exitApp();
-```
+---
+id: backhandler
+title: BackHandler
+---
+
+The Backhandler API detects hardware button presses for back navigation, lets you register event listeners for the system's back action, and lets you control how your application responds. It is Android-only.
+
+The event subscriptions are called in reverse order (i.e. the last registered subscription is called first).
+
+- **If one subscription returns true,** then subscriptions registered earlier will not be called.
+- **If no subscription returns true or none are registered,** it programmatically invokes the default back button functionality to exit the app.
+
+> **Warning for modal users:** If your app shows an opened `Modal`, `BackHandler` will not publish any events ([see `Modal` docs](modal#onrequestclose)).
+
+## Pattern
+
+```tsx
+const subscription = BackHandler.addEventListener(
+  'hardwareBackPress',
+  function () {
+    /**
+     * this.onMainScreen and this.goBack are just examples,
+     * you need to use your own implementation here.
+     *
+     * Typically you would use the navigator here to go to the last state.
+     */
+
+    if (!this.onMainScreen()) {
+      this.goBack();
+      /**
+       * When true is returned the event will not be bubbled up
+       * & no other back action will execute
+       */
+      return true;
+    }
+    /**
+     * Returning false will let the event to bubble up & let other event listeners
+     * or the system's default back action to be executed.
+     */
+    return false;
+  },
+);
+
+// Unsubscribe the listener on unmount
+subscription.remove();
+```
+
+## Example
+
+The following example implements a scenario where you confirm if the user wants to exit the app:
+
+```SnackPlayer name=BackHandler&supportedPlatforms=android
+import {useEffect} from 'react';
+import {Text, StyleSheet, BackHandler, Alert} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  useEffect(() => {
+    const backAction = () => {
+      Alert.alert('Hold on!', 'Are you sure you want to go back?', [
+        {
+          text: 'Cancel',
+          onPress: () => null,
+          style: 'cancel',
+        },
+        {text: 'YES', onPress: () => BackHandler.exitApp()},
+      ]);
+      return true;
+    };
+
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      backAction,
+    );
+
+    return () => backHandler.remove();
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.text}>Click Back button!</Text>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+});
+
+export default App;
+```
+
+`BackHandler.addEventListener` creates an event listener & returns a `NativeEventSubscription` object which should be cleared using `NativeEventSubscription.remove` method.
+
+## Usage with React Navigation
+
+If you are using React Navigation to navigate across different screens, you can follow their guide on [Custom Android back button behaviour](https://reactnavigation.org/docs/custom-android-back-button-handling/)
+
+## Backhandler hook
+
+[React Native Hooks](https://github.com/react-native-community/hooks#usebackhandler) has a nice `useBackHandler` hook which will simplify the process of setting up event listeners.
+
+---
+
+# Reference
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+  eventName: BackPressEventName,
+  handler: () => boolean | null | undefined,
+): NativeEventSubscription;
+```
+
+---
+
+### `exitApp()`
+
+```tsx
+static exitApp();
+```
diff --git a/website/versioned_docs/version-0.80/button.md b/website/versioned_docs/version-0.80/button.md
index cfed6819d28..23501057f52 100644
--- a/website/versioned_docs/version-0.80/button.md
+++ b/website/versioned_docs/version-0.80/button.md
@@ -18,13 +18,20 @@ If this button doesn't look right for your app, you can build your own button us
 
 ## Example
 
-```SnackPlayer name=Button%20Example
-import React from 'react';
-import {StyleSheet, Button, View, Text, Alert} from 'react-native';
+```SnackPlayer name=Button%20Example&ext=js
+import {StyleSheet, Button, View, Text, Alert, Platform} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
 const Separator = () => <View style={styles.separator} />;
 
+function showAlert(message) {
+  if (Platform.OS === 'web') {
+    window.alert(message);
+  } else {
+    Alert.alert(message);
+  }
+}
+
 const App = () => (
   <SafeAreaProvider>
     <SafeAreaView style={styles.container}>
@@ -35,7 +42,7 @@ const App = () => (
         </Text>
         <Button
           title="Press me"
-          onPress={() => Alert.alert('Simple Button pressed')}
+          onPress={() => showAlert('Simple Button pressed')}
         />
       </View>
       <Separator />
@@ -48,7 +55,7 @@ const App = () => (
         <Button
           title="Press me"
           color="#f194ff"
-          onPress={() => Alert.alert('Button with adjusted color pressed')}
+          onPress={() => showAlert('Button with adjusted color pressed')}
         />
       </View>
       <Separator />
@@ -59,7 +66,7 @@ const App = () => (
         <Button
           title="Press me"
           disabled
-          onPress={() => Alert.alert('Cannot press this one')}
+          onPress={() => showAlert('Cannot press this one')}
         />
       </View>
       <Separator />
@@ -70,11 +77,11 @@ const App = () => (
         <View style={styles.fixToText}>
           <Button
             title="Left button"
-            onPress={() => Alert.alert('Left button pressed')}
+            onPress={() => showAlert('Left button pressed')}
           />
           <Button
             title="Right button"
-            onPress={() => Alert.alert('Right button pressed')}
+            onPress={() => showAlert('Right button pressed')}
           />
         </View>
       </View>
diff --git a/website/versioned_docs/version-0.80/communication-android.md b/website/versioned_docs/version-0.80/communication-android.md
index e7108577837..64a265dd701 100644
--- a/website/versioned_docs/version-0.80/communication-android.md
+++ b/website/versioned_docs/version-0.80/communication-android.md
@@ -67,7 +67,6 @@ class MainActivity : ReactActivity() {
 </Tabs>
 
 ```tsx
-import React from 'react';
 import {View, Image} from 'react-native';
 
 export default class ImageBrowserApp extends React.Component {
diff --git a/website/versioned_docs/version-0.80/communication-ios.md b/website/versioned_docs/version-0.80/communication-ios.md
index f82cae7e620..89a64ff9b4c 100644
--- a/website/versioned_docs/version-0.80/communication-ios.md
+++ b/website/versioned_docs/version-0.80/communication-ios.md
@@ -33,7 +33,6 @@ RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
 ```
 
 ```tsx
-import React from 'react';
 import {View, Image} from 'react-native';
 
 export default class ImageBrowserApp extends React.Component {
diff --git a/website/versioned_docs/version-0.80/dimensions.md b/website/versioned_docs/version-0.80/dimensions.md
index cf329d65f01..d548e2c0b47 100644
--- a/website/versioned_docs/version-0.80/dimensions.md
+++ b/website/versioned_docs/version-0.80/dimensions.md
@@ -1,150 +1,150 @@
----
-id: dimensions
-title: Dimensions
----
-
-> [`useWindowDimensions`](usewindowdimensions) is the preferred API for React components. Unlike `Dimensions`, it updates as the window's dimensions update. This works nicely with the React paradigm.
-
-```tsx
-import {Dimensions} from 'react-native';
-```
-
-You can get the application window's width and height using the following code:
-
-```tsx
-const windowWidth = Dimensions.get('window').width;
-const windowHeight = Dimensions.get('window').height;
-```
-
-> Although dimensions are available immediately, they may change (e.g due to device rotation, foldable devices etc) so any rendering logic or styles that depend on these constants should try to call this function on every render, rather than caching the value (for example, using inline styles rather than setting a value in a `StyleSheet`).
-
-If you are targeting foldable devices or devices which can change the screen size or app window size, you can use the event listener available in the Dimensions module as shown in the below example.
-
-## Example
-
-```SnackPlayer name=Dimensions%20Example
-import React, {useState, useEffect} from 'react';
-import {StyleSheet, Text, Dimensions} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const windowDimensions = Dimensions.get('window');
-const screenDimensions = Dimensions.get('screen');
-
-const App = () => {
-  const [dimensions, setDimensions] = useState({
-    window: windowDimensions,
-    screen: screenDimensions,
-  });
-
-  useEffect(() => {
-    const subscription = Dimensions.addEventListener(
-      'change',
-      ({window, screen}) => {
-        setDimensions({window, screen});
-      },
-    );
-    return () => subscription?.remove();
-  });
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.header}>Window Dimensions</Text>
-        {Object.entries(dimensions.window).map(([key, value]) => (
-          <Text>
-            {key} - {value}
-          </Text>
-        ))}
-        <Text style={styles.header}>Screen Dimensions</Text>
-        {Object.entries(dimensions.screen).map(([key, value]) => (
-          <Text>
-            {key} - {value}
-          </Text>
-        ))}
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  header: {
-    fontSize: 16,
-    marginVertical: 10,
-  },
-});
-
-export default App;
-```
-
-# Reference
-
-## Methods
-
-### `addEventListener()`
-
-```tsx
-static addEventListener(
-  type: 'change',
-  handler: ({
-    window,
-    screen,
-  }: DimensionsValue) => void,
-): EmitterSubscription;
-```
-
-Add an event handler. Supported events:
-
-- `change`: Fires when a property within the `Dimensions` object changes. The argument to the event handler is a [`DimensionsValue`](#dimensionsvalue) type object.
-
----
-
-### `get()`
-
-```tsx
-static get(dim: 'window' | 'screen'): ScaledSize;
-```
-
-Initial dimensions are set before `runApplication` is called so they should be available before any other require's are run, but may be updated later.
-
-Example: `const {height, width} = Dimensions.get('window');`
-
-**Parameters:**
-
-| Name                                                               | Type   | Description                                                                       |
-| ------------------------------------------------------------------ | ------ | --------------------------------------------------------------------------------- |
-| dim <div className="label basic required two-lines">Required</div> | string | Name of dimension as defined when calling `set`. Returns value for the dimension. |
-
-> For Android the `window` dimension will exclude the size used by the `status bar` (if not translucent) and `bottom navigation bar`
-
----
-
-## Type Definitions
-
-### DimensionsValue
-
-**Properties:**
-
-| Name   | Type                                | Description                             |
-| ------ | ----------------------------------- | --------------------------------------- |
-| window | [ScaledSize](dimensions#scaledsize) | Size of the visible Application window. |
-| screen | [ScaledSize](dimensions#scaledsize) | Size of the device's screen.            |
-
-### ScaledSize
-
-| Type   |
-| ------ |
-| object |
-
-**Properties:**
-
-| Name      | Type   |
-| --------- | ------ |
-| width     | number |
-| height    | number |
-| scale     | number |
-| fontScale | number |
+---
+id: dimensions
+title: Dimensions
+---
+
+> [`useWindowDimensions`](usewindowdimensions) is the preferred API for React components. Unlike `Dimensions`, it updates as the window's dimensions update. This works nicely with the React paradigm.
+
+```tsx
+import {Dimensions} from 'react-native';
+```
+
+You can get the application window's width and height using the following code:
+
+```tsx
+const windowWidth = Dimensions.get('window').width;
+const windowHeight = Dimensions.get('window').height;
+```
+
+> Although dimensions are available immediately, they may change (e.g due to device rotation, foldable devices etc) so any rendering logic or styles that depend on these constants should try to call this function on every render, rather than caching the value (for example, using inline styles rather than setting a value in a `StyleSheet`).
+
+If you are targeting foldable devices or devices which can change the screen size or app window size, you can use the event listener available in the Dimensions module as shown in the below example.
+
+## Example
+
+```SnackPlayer name=Dimensions%20Example
+import {useState, useEffect} from 'react';
+import {StyleSheet, Text, Dimensions} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const windowDimensions = Dimensions.get('window');
+const screenDimensions = Dimensions.get('screen');
+
+const App = () => {
+  const [dimensions, setDimensions] = useState({
+    window: windowDimensions,
+    screen: screenDimensions,
+  });
+
+  useEffect(() => {
+    const subscription = Dimensions.addEventListener(
+      'change',
+      ({window, screen}) => {
+        setDimensions({window, screen});
+      },
+    );
+    return () => subscription?.remove();
+  });
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.header}>Window Dimensions</Text>
+        {Object.entries(dimensions.window).map(([key, value]) => (
+          <Text>
+            {key} - {value}
+          </Text>
+        ))}
+        <Text style={styles.header}>Screen Dimensions</Text>
+        {Object.entries(dimensions.screen).map(([key, value]) => (
+          <Text>
+            {key} - {value}
+          </Text>
+        ))}
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  header: {
+    fontSize: 16,
+    marginVertical: 10,
+  },
+});
+
+export default App;
+```
+
+# Reference
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+  type: 'change',
+  handler: ({
+    window,
+    screen,
+  }: DimensionsValue) => void,
+): EmitterSubscription;
+```
+
+Add an event handler. Supported events:
+
+- `change`: Fires when a property within the `Dimensions` object changes. The argument to the event handler is a [`DimensionsValue`](#dimensionsvalue) type object.
+
+---
+
+### `get()`
+
+```tsx
+static get(dim: 'window' | 'screen'): ScaledSize;
+```
+
+Initial dimensions are set before `runApplication` is called so they should be available before any other require's are run, but may be updated later.
+
+Example: `const {height, width} = Dimensions.get('window');`
+
+**Parameters:**
+
+| Name                                                               | Type   | Description                                                                       |
+| ------------------------------------------------------------------ | ------ | --------------------------------------------------------------------------------- |
+| dim <div className="label basic required two-lines">Required</div> | string | Name of dimension as defined when calling `set`. Returns value for the dimension. |
+
+> For Android the `window` dimension will exclude the size used by the `status bar` (if not translucent) and `bottom navigation bar`
+
+---
+
+## Type Definitions
+
+### DimensionsValue
+
+**Properties:**
+
+| Name   | Type                                | Description                             |
+| ------ | ----------------------------------- | --------------------------------------- |
+| window | [ScaledSize](dimensions#scaledsize) | Size of the visible Application window. |
+| screen | [ScaledSize](dimensions#scaledsize) | Size of the device's screen.            |
+
+### ScaledSize
+
+| Type   |
+| ------ |
+| object |
+
+**Properties:**
+
+| Name      | Type   |
+| --------- | ------ |
+| width     | number |
+| height    | number |
+| scale     | number |
+| fontScale | number |
diff --git a/website/versioned_docs/version-0.80/drawerlayoutandroid.md b/website/versioned_docs/version-0.80/drawerlayoutandroid.md
index 3714318df5c..76b4c507c6a 100644
--- a/website/versioned_docs/version-0.80/drawerlayoutandroid.md
+++ b/website/versioned_docs/version-0.80/drawerlayoutandroid.md
@@ -1,323 +1,323 @@
----
-id: drawerlayoutandroid
-title: DrawerLayoutAndroid
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-React component that wraps the platform `DrawerLayout` (Android only). The Drawer (typically used for navigation) is rendered with `renderNavigationView` and direct children are the main view (where your content goes). The navigation view is initially not visible on the screen, but can be pulled in from the side of the window specified by the `drawerPosition` prop and its width can be set by the `drawerWidth` prop.
-
-## Example
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android&ext=js
-import React, {useRef, useState} from 'react';
-import {Button, DrawerLayoutAndroid, Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const drawer = useRef(null);
-  const [drawerPosition, setDrawerPosition] = useState('left');
-  const changeDrawerPosition = () => {
-    if (drawerPosition === 'left') {
-      setDrawerPosition('right');
-    } else {
-      setDrawerPosition('left');
-    }
-  };
-
-  const navigationView = () => (
-    <SafeAreaView style={[styles.container, styles.navigationContainer]}>
-      <Text style={styles.paragraph}>I'm in the Drawer!</Text>
-      <Button
-        title="Close drawer"
-        onPress={() => drawer.current.closeDrawer()}
-      />
-    </SafeAreaView>
-  );
-
-  return (
-    <SafeAreaProvider>
-      <DrawerLayoutAndroid
-        ref={drawer}
-        drawerWidth={300}
-        drawerPosition={drawerPosition}
-        renderNavigationView={navigationView}>
-        <SafeAreaView style={styles.container}>
-          <Text style={styles.paragraph}>Drawer on the {drawerPosition}!</Text>
-          <Button
-            title="Change Drawer Position"
-            onPress={() => changeDrawerPosition()}
-          />
-          <Text style={styles.paragraph}>
-            Swipe from the side or press button below to see it!
-          </Text>
-          <Button
-            title="Open drawer"
-            onPress={() => drawer.current.openDrawer()}
-          />
-        </SafeAreaView>
-      </DrawerLayoutAndroid>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingHorizontal: 16,
-  },
-  navigationContainer: {
-    backgroundColor: '#ecf0f1',
-  },
-  paragraph: {
-    padding: 16,
-    fontSize: 15,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android&ext=tsx
-import React, {useRef, useState} from 'react';
-import {
-  Button,
-  DrawerLayoutAndroid,
-  Text,
-  StyleSheet,
-  View,
-} from 'react-native';
-
-const App = () => {
-  const drawer = useRef<DrawerLayoutAndroid>(null);
-  const [drawerPosition, setDrawerPosition] = useState<'left' | 'right'>(
-    'left',
-  );
-  const changeDrawerPosition = () => {
-    if (drawerPosition === 'left') {
-      setDrawerPosition('right');
-    } else {
-      setDrawerPosition('left');
-    }
-  };
-
-  const navigationView = () => (
-    <View style={[styles.container, styles.navigationContainer]}>
-      <Text style={styles.paragraph}>I'm in the Drawer!</Text>
-      <Button
-        title="Close drawer"
-        onPress={() => drawer.current?.closeDrawer()}
-      />
-    </View>
-  );
-
-  return (
-    <DrawerLayoutAndroid
-      ref={drawer}
-      drawerWidth={300}
-      drawerPosition={drawerPosition}
-      renderNavigationView={navigationView}>
-      <View style={styles.container}>
-        <Text style={styles.paragraph}>Drawer on the {drawerPosition}!</Text>
-        <Button
-          title="Change Drawer Position"
-          onPress={() => changeDrawerPosition()}
-        />
-        <Text style={styles.paragraph}>
-          Swipe from the side or press button below to see it!
-        </Text>
-        <Button
-          title="Open drawer"
-          onPress={() => drawer.current?.openDrawer()}
-        />
-      </View>
-    </DrawerLayoutAndroid>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 16,
-  },
-  navigationContainer: {
-    backgroundColor: '#ecf0f1',
-  },
-  paragraph: {
-    padding: 16,
-    fontSize: 15,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
----
-
-# Reference
-
-## Props
-
-### [View Props](view.md#props)
-
-Inherits [View Props](view.md#props).
-
----
-
-### `drawerBackgroundColor`
-
-Specifies the background color of the drawer. The default value is `white`. If you want to set the opacity of the drawer, use rgba. Example:
-
-```tsx
-return (
-  <DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)" />
-);
-```
-
-| Type               | Required |
-| ------------------ | -------- |
-| [color](colors.md) | No       |
-
----
-
-### `drawerLockMode`
-
-Specifies the lock mode of the drawer. The drawer can be locked in 3 states:
-
-- unlocked (default), meaning that the drawer will respond (open/close) to touch gestures.
-- locked-closed, meaning that the drawer will stay closed and not respond to gestures.
-- locked-open, meaning that the drawer will stay opened and not respond to gestures. The drawer may still be opened and closed programmatically (`openDrawer`/`closeDrawer`).
-
-| Type                                             | Required |
-| ------------------------------------------------ | -------- |
-| enum('unlocked', 'locked-closed', 'locked-open') | No       |
-
----
-
-### `drawerPosition`
-
-Specifies the side of the screen from which the drawer will slide in. By default it is set to `left`.
-
-| Type                  | Required |
-| --------------------- | -------- |
-| enum('left', 'right') | No       |
-
----
-
-### `drawerWidth`
-
-Specifies the width of the drawer, more precisely the width of the view that be pulled in from the edge of the window.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `keyboardDismissMode`
-
-Determines whether the keyboard gets dismissed in response to a drag.
-
-- 'none' (the default), drags do not dismiss the keyboard.
-- 'on-drag', the keyboard is dismissed when a drag begins.
-
-| Type                    | Required |
-| ----------------------- | -------- |
-| enum('none', 'on-drag') | No       |
-
----
-
-### `onDrawerClose`
-
-Function called whenever the navigation view has been closed.
-
-| Type     | Required |
-| -------- | -------- |
-| function | No       |
-
----
-
-### `onDrawerOpen`
-
-Function called whenever the navigation view has been opened.
-
-| Type     | Required |
-| -------- | -------- |
-| function | No       |
-
----
-
-### `onDrawerSlide`
-
-Function called whenever there is an interaction with the navigation view.
-
-| Type     | Required |
-| -------- | -------- |
-| function | No       |
-
----
-
-### `onDrawerStateChanged`
-
-Function called when the drawer state has changed. The drawer can be in 3 states:
-
-- idle, meaning there is no interaction with the navigation view happening at the time
-- dragging, meaning there is currently an interaction with the navigation view
-- settling, meaning that there was an interaction with the navigation view, and the navigation view is now finishing its closing or opening animation
-
-| Type     | Required |
-| -------- | -------- |
-| function | No       |
-
----
-
-### `renderNavigationView`
-
-The navigation view that will be rendered to the side of the screen and can be pulled in.
-
-| Type     | Required |
-| -------- | -------- |
-| function | Yes      |
-
----
-
-### `statusBarBackgroundColor`
-
-Make the drawer take the entire screen and draw the background of the status bar to allow it to open over the status bar. It will only have an effect on API 21+.
-
-| Type               | Required |
-| ------------------ | -------- |
-| [color](colors.md) | No       |
-
-## Methods
-
-### `closeDrawer()`
-
-```tsx
-closeDrawer();
-```
-
-Closes the drawer.
-
----
-
-### `openDrawer()`
-
-```tsx
-openDrawer();
-```
-
-Opens the drawer.
+---
+id: drawerlayoutandroid
+title: DrawerLayoutAndroid
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+React component that wraps the platform `DrawerLayout` (Android only). The Drawer (typically used for navigation) is rendered with `renderNavigationView` and direct children are the main view (where your content goes). The navigation view is initially not visible on the screen, but can be pulled in from the side of the window specified by the `drawerPosition` prop and its width can be set by the `drawerWidth` prop.
+
+## Example
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android&ext=js
+import {useRef, useState} from 'react';
+import {Button, DrawerLayoutAndroid, Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const drawer = useRef(null);
+  const [drawerPosition, setDrawerPosition] = useState('left');
+  const changeDrawerPosition = () => {
+    if (drawerPosition === 'left') {
+      setDrawerPosition('right');
+    } else {
+      setDrawerPosition('left');
+    }
+  };
+
+  const navigationView = () => (
+    <SafeAreaView style={[styles.container, styles.navigationContainer]}>
+      <Text style={styles.paragraph}>I'm in the Drawer!</Text>
+      <Button
+        title="Close drawer"
+        onPress={() => drawer.current.closeDrawer()}
+      />
+    </SafeAreaView>
+  );
+
+  return (
+    <SafeAreaProvider>
+      <DrawerLayoutAndroid
+        ref={drawer}
+        drawerWidth={300}
+        drawerPosition={drawerPosition}
+        renderNavigationView={navigationView}>
+        <SafeAreaView style={styles.container}>
+          <Text style={styles.paragraph}>Drawer on the {drawerPosition}!</Text>
+          <Button
+            title="Change Drawer Position"
+            onPress={() => changeDrawerPosition()}
+          />
+          <Text style={styles.paragraph}>
+            Swipe from the side or press button below to see it!
+          </Text>
+          <Button
+            title="Open drawer"
+            onPress={() => drawer.current.openDrawer()}
+          />
+        </SafeAreaView>
+      </DrawerLayoutAndroid>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 16,
+  },
+  navigationContainer: {
+    backgroundColor: '#ecf0f1',
+  },
+  paragraph: {
+    padding: 16,
+    fontSize: 15,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android&ext=tsx
+import {useRef, useState} from 'react';
+import {
+  Button,
+  DrawerLayoutAndroid,
+  Text,
+  StyleSheet,
+  View,
+} from 'react-native';
+
+const App = () => {
+  const drawer = useRef<DrawerLayoutAndroid>(null);
+  const [drawerPosition, setDrawerPosition] = useState<'left' | 'right'>(
+    'left',
+  );
+  const changeDrawerPosition = () => {
+    if (drawerPosition === 'left') {
+      setDrawerPosition('right');
+    } else {
+      setDrawerPosition('left');
+    }
+  };
+
+  const navigationView = () => (
+    <View style={[styles.container, styles.navigationContainer]}>
+      <Text style={styles.paragraph}>I'm in the Drawer!</Text>
+      <Button
+        title="Close drawer"
+        onPress={() => drawer.current?.closeDrawer()}
+      />
+    </View>
+  );
+
+  return (
+    <DrawerLayoutAndroid
+      ref={drawer}
+      drawerWidth={300}
+      drawerPosition={drawerPosition}
+      renderNavigationView={navigationView}>
+      <View style={styles.container}>
+        <Text style={styles.paragraph}>Drawer on the {drawerPosition}!</Text>
+        <Button
+          title="Change Drawer Position"
+          onPress={() => changeDrawerPosition()}
+        />
+        <Text style={styles.paragraph}>
+          Swipe from the side or press button below to see it!
+        </Text>
+        <Button
+          title="Open drawer"
+          onPress={() => drawer.current?.openDrawer()}
+        />
+      </View>
+    </DrawerLayoutAndroid>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 16,
+  },
+  navigationContainer: {
+    backgroundColor: '#ecf0f1',
+  },
+  paragraph: {
+    padding: 16,
+    fontSize: 15,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+---
+
+# Reference
+
+## Props
+
+### [View Props](view.md#props)
+
+Inherits [View Props](view.md#props).
+
+---
+
+### `drawerBackgroundColor`
+
+Specifies the background color of the drawer. The default value is `white`. If you want to set the opacity of the drawer, use rgba. Example:
+
+```tsx
+return (
+  <DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)" />
+);
+```
+
+| Type               | Required |
+| ------------------ | -------- |
+| [color](colors.md) | No       |
+
+---
+
+### `drawerLockMode`
+
+Specifies the lock mode of the drawer. The drawer can be locked in 3 states:
+
+- unlocked (default), meaning that the drawer will respond (open/close) to touch gestures.
+- locked-closed, meaning that the drawer will stay closed and not respond to gestures.
+- locked-open, meaning that the drawer will stay opened and not respond to gestures. The drawer may still be opened and closed programmatically (`openDrawer`/`closeDrawer`).
+
+| Type                                             | Required |
+| ------------------------------------------------ | -------- |
+| enum('unlocked', 'locked-closed', 'locked-open') | No       |
+
+---
+
+### `drawerPosition`
+
+Specifies the side of the screen from which the drawer will slide in. By default it is set to `left`.
+
+| Type                  | Required |
+| --------------------- | -------- |
+| enum('left', 'right') | No       |
+
+---
+
+### `drawerWidth`
+
+Specifies the width of the drawer, more precisely the width of the view that be pulled in from the edge of the window.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `keyboardDismissMode`
+
+Determines whether the keyboard gets dismissed in response to a drag.
+
+- 'none' (the default), drags do not dismiss the keyboard.
+- 'on-drag', the keyboard is dismissed when a drag begins.
+
+| Type                    | Required |
+| ----------------------- | -------- |
+| enum('none', 'on-drag') | No       |
+
+---
+
+### `onDrawerClose`
+
+Function called whenever the navigation view has been closed.
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `onDrawerOpen`
+
+Function called whenever the navigation view has been opened.
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `onDrawerSlide`
+
+Function called whenever there is an interaction with the navigation view.
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `onDrawerStateChanged`
+
+Function called when the drawer state has changed. The drawer can be in 3 states:
+
+- idle, meaning there is no interaction with the navigation view happening at the time
+- dragging, meaning there is currently an interaction with the navigation view
+- settling, meaning that there was an interaction with the navigation view, and the navigation view is now finishing its closing or opening animation
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `renderNavigationView`
+
+The navigation view that will be rendered to the side of the screen and can be pulled in.
+
+| Type     | Required |
+| -------- | -------- |
+| function | Yes      |
+
+---
+
+### `statusBarBackgroundColor`
+
+Make the drawer take the entire screen and draw the background of the status bar to allow it to open over the status bar. It will only have an effect on API 21+.
+
+| Type               | Required |
+| ------------------ | -------- |
+| [color](colors.md) | No       |
+
+## Methods
+
+### `closeDrawer()`
+
+```tsx
+closeDrawer();
+```
+
+Closes the drawer.
+
+---
+
+### `openDrawer()`
+
+```tsx
+openDrawer();
+```
+
+Opens the drawer.
diff --git a/website/versioned_docs/version-0.80/easing.md b/website/versioned_docs/version-0.80/easing.md
index 9202bd6b550..f20e2644f4d 100644
--- a/website/versioned_docs/version-0.80/easing.md
+++ b/website/versioned_docs/version-0.80/easing.md
@@ -48,8 +48,8 @@ The following helpers are used to modify other easing functions.
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=Easing%20Demo&ext=js&supportedPlatforms=ios,android
-import React, {useRef} from 'react';
+```SnackPlayer name=Easing%20Demo&ext=js
+import {useRef} from 'react';
 import {
   Animated,
   Easing,
@@ -209,7 +209,7 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Easing%20Demo&ext=tsx
-import React, {useRef} from 'react';
+import {useRef} from 'react';
 import {
   Animated,
   Easing,
diff --git a/website/versioned_docs/version-0.80/fabric-native-components.md b/website/versioned_docs/version-0.80/fabric-native-components.md
index 2a509a7174e..6efdd572e92 100644
--- a/website/versioned_docs/version-0.80/fabric-native-components.md
+++ b/website/versioned_docs/version-0.80/fabric-native-components.md
@@ -172,7 +172,6 @@ This guide shows you how to create a Native Component that only works with the N
 Finally, you can use the new component in your app. Update your generated `App.tsx` to:
 
 ```javascript title="Demo/App.tsx"
-import React from 'react';
 import {Alert, StyleSheet, View} from 'react-native';
 import WebView from './specs/WebViewNativeComponent';
 
diff --git a/website/versioned_docs/version-0.80/flatlist.md b/website/versioned_docs/version-0.80/flatlist.md
index 6c299ca26bb..ce21d77b67a 100644
--- a/website/versioned_docs/version-0.80/flatlist.md
+++ b/website/versioned_docs/version-0.80/flatlist.md
@@ -1,855 +1,853 @@
----
-id: flatlist
-title: FlatList
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-A performant interface for rendering basic, flat lists, supporting the most handy features:
-
-- Fully cross-platform.
-- Optional horizontal mode.
-- Configurable viewability callbacks.
-- Header support.
-- Footer support.
-- Separator support.
-- Pull to Refresh.
-- Scroll loading.
-- ScrollToIndex support.
-- Multiple column support.
-
-If you need section support, use [`<SectionList>`](sectionlist.md).
-
-## Example
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Simple%20FlatList%20Example&ext=js
-import React from 'react';
-import {View, FlatList, StyleSheet, Text, StatusBar} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const DATA = [
-  {
-    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
-    title: 'First Item',
-  },
-  {
-    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
-    title: 'Second Item',
-  },
-  {
-    id: '58694a0f-3da1-471f-bd96-145571e29d72',
-    title: 'Third Item',
-  },
-];
-
-const Item = ({title}) => (
-  <View style={styles.item}>
-    <Text style={styles.title}>{title}</Text>
-  </View>
-);
-
-const App = () => (
-  <SafeAreaProvider>
-    <SafeAreaView style={styles.container}>
-      <FlatList
-        data={DATA}
-        renderItem={({item}) => <Item title={item.title} />}
-        keyExtractor={item => item.id}
-      />
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: StatusBar.currentHeight || 0,
-  },
-  item: {
-    backgroundColor: '#f9c2ff',
-    padding: 20,
-    marginVertical: 8,
-    marginHorizontal: 16,
-  },
-  title: {
-    fontSize: 32,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Simple%20FlatList%20Example&ext=tsx
-import React from 'react';
-import {View, FlatList, StyleSheet, Text, StatusBar} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const DATA = [
-  {
-    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
-    title: 'First Item',
-  },
-  {
-    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
-    title: 'Second Item',
-  },
-  {
-    id: '58694a0f-3da1-471f-bd96-145571e29d72',
-    title: 'Third Item',
-  },
-];
-
-type ItemProps = {title: string};
-
-const Item = ({title}: ItemProps) => (
-  <View style={styles.item}>
-    <Text style={styles.title}>{title}</Text>
-  </View>
-);
-
-const App = () => (
-  <SafeAreaProvider>
-    <SafeAreaView style={styles.container}>
-      <FlatList
-        data={DATA}
-        renderItem={({item}) => <Item title={item.title} />}
-        keyExtractor={item => item.id}
-      />
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: StatusBar.currentHeight || 0,
-  },
-  item: {
-    backgroundColor: '#f9c2ff',
-    padding: 20,
-    marginVertical: 8,
-    marginHorizontal: 16,
-  },
-  title: {
-    fontSize: 32,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-To render multiple columns, use the [`numColumns`](flatlist.md#numcolumns) prop. Using this approach instead of a `flexWrap` layout can prevent conflicts with the item height logic.
-
-More complex, selectable example below.
-
-- By passing `extraData={selectedId}` to `FlatList` we make sure `FlatList` itself will re-render when the state changes. Without setting this prop, `FlatList` would not know it needs to re-render any items because it is a `PureComponent` and the prop comparison will not show any changes.
-- `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=flatlist-selectable&ext=js
-import React, {useState} from 'react';
-import {
-  FlatList,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const DATA = [
-  {
-    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
-    title: 'First Item',
-  },
-  {
-    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
-    title: 'Second Item',
-  },
-  {
-    id: '58694a0f-3da1-471f-bd96-145571e29d72',
-    title: 'Third Item',
-  },
-];
-
-const Item = ({item, onPress, backgroundColor, textColor}) => (
-  <TouchableOpacity onPress={onPress} style={[styles.item, {backgroundColor}]}>
-    <Text style={[styles.title, {color: textColor}]}>{item.title}</Text>
-  </TouchableOpacity>
-);
-
-const App = () => {
-  const [selectedId, setSelectedId] = useState();
-
-  const renderItem = ({item}) => {
-    const backgroundColor = item.id === selectedId ? '#6e3b6e' : '#f9c2ff';
-    const color = item.id === selectedId ? 'white' : 'black';
-
-    return (
-      <Item
-        item={item}
-        onPress={() => setSelectedId(item.id)}
-        backgroundColor={backgroundColor}
-        textColor={color}
-      />
-    );
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <FlatList
-          data={DATA}
-          renderItem={renderItem}
-          keyExtractor={item => item.id}
-          extraData={selectedId}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: StatusBar.currentHeight || 0,
-  },
-  item: {
-    padding: 20,
-    marginVertical: 8,
-    marginHorizontal: 16,
-  },
-  title: {
-    fontSize: 32,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=flatlist-selectable&ext=tsx
-import React, {useState} from 'react';
-import {
-  FlatList,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-type ItemData = {
-  id: string;
-  title: string;
-};
-
-const DATA: ItemData[] = [
-  {
-    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
-    title: 'First Item',
-  },
-  {
-    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
-    title: 'Second Item',
-  },
-  {
-    id: '58694a0f-3da1-471f-bd96-145571e29d72',
-    title: 'Third Item',
-  },
-];
-
-type ItemProps = {
-  item: ItemData;
-  onPress: () => void;
-  backgroundColor: string;
-  textColor: string;
-};
-
-const Item = ({item, onPress, backgroundColor, textColor}: ItemProps) => (
-  <TouchableOpacity onPress={onPress} style={[styles.item, {backgroundColor}]}>
-    <Text style={[styles.title, {color: textColor}]}>{item.title}</Text>
-  </TouchableOpacity>
-);
-
-const App = () => {
-  const [selectedId, setSelectedId] = useState<string>();
-
-  const renderItem = ({item}: {item: ItemData}) => {
-    const backgroundColor = item.id === selectedId ? '#6e3b6e' : '#f9c2ff';
-    const color = item.id === selectedId ? 'white' : 'black';
-
-    return (
-      <Item
-        item={item}
-        onPress={() => setSelectedId(item.id)}
-        backgroundColor={backgroundColor}
-        textColor={color}
-      />
-    );
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <FlatList
-          data={DATA}
-          renderItem={renderItem}
-          keyExtractor={item => item.id}
-          extraData={selectedId}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: StatusBar.currentHeight || 0,
-  },
-  item: {
-    padding: 20,
-    marginVertical: 8,
-    marginHorizontal: 16,
-  },
-  title: {
-    fontSize: 32,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-This is a convenience wrapper around [`<VirtualizedList>`](virtualizedlist.md), and thus inherits its props (as well as those of [`<ScrollView>`](scrollview.md)) that aren't explicitly listed here, along with the following caveats:
-
-- Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.
-- This is a `PureComponent` which means that it will not re-render if `props` remain shallow-equal. Make sure that everything your `renderItem` function depends on is passed as a prop (e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on changes. This includes the `data` prop and parent component state.
-- In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes.
-- By default, the list looks for a `key` prop on each item and uses that for the React key. Alternatively, you can provide a custom `keyExtractor` prop.
-
----
-
-# Reference
-
-## Props
-
-### [VirtualizedList Props](virtualizedlist.md#props)
-
-Inherits [VirtualizedList Props](virtualizedlist.md#props).
-
----
-
-### <div className="label required basic">Required</div> **`renderItem`**
-
-```tsx
-renderItem({
-  item: ItemT,
-  index: number,
-  separators: {
-    highlight: () => void;
-    unhighlight: () => void;
-    updateProps: (select: 'leading' | 'trailing', newProps: any) => void;
-  }
-}): JSX.Element;
-```
-
-Takes an item from `data` and renders it into the list.
-
-Provides additional metadata like `index` if you need it, as well as a more generic `separators.updateProps` function which let you set whatever props you want to change the rendering of either the leading separator or trailing separator in case the more common `highlight` and `unhighlight` (which set the `highlighted: boolean` prop) are insufficient for your use case.
-
-| Type     |
-| -------- |
-| function |
-
-- `item` (Object): The item from `data` being rendered.
-- `index` (number): The index corresponding to this item in the `data` array.
-- `separators` (Object)
-  - `highlight` (Function)
-  - `unhighlight` (Function)
-  - `updateProps` (Function)
-    - `select` (enum('leading', 'trailing'))
-    - `newProps` (Object)
-
-Example usage:
-
-```tsx
-<FlatList
-  ItemSeparatorComponent={
-    Platform.OS !== 'android' &&
-    (({highlighted}) => (
-      <View
-        style={[style.separator, highlighted && {marginLeft: 0}]}
-      />
-    ))
-  }
-  data={[{title: 'Title Text', key: 'item1'}]}
-  renderItem={({item, index, separators}) => (
-    <TouchableHighlight
-      key={item.key}
-      onPress={() => this._onPress(item)}
-      onShowUnderlay={separators.highlight}
-      onHideUnderlay={separators.unhighlight}>
-      <View style={{backgroundColor: 'white'}}>
-        <Text>{item.title}</Text>
-      </View>
-    </TouchableHighlight>
-  )}
-/>
-```
-
----
-
-### <div className="label required basic">Required</div> **`data`**
-
-An array (or array-like list) of items to render. Other data types can be used by targeting [`VirtualizedList`](virtualizedlist.md) directly.
-
-| Type      |
-| --------- |
-| ArrayLike |
-
----
-
-### `ItemSeparatorComponent`
-
-Rendered in between each item, but not at the top or bottom. By default, `highlighted` and `leadingItem` props are provided. `renderItem` provides `separators.highlight`/`unhighlight` which will update the `highlighted` prop, but you can also add custom props with `separators.updateProps`. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
-
-| Type                         |
-| ---------------------------- |
-| component, function, element |
-
----
-
-### `ListEmptyComponent`
-
-Rendered when the list is empty. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
-
-| Type               |
-| ------------------ |
-| component, element |
-
----
-
-### `ListFooterComponent`
-
-Rendered at the bottom of all the items. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
-
-| Type               |
-| ------------------ |
-| component, element |
-
----
-
-### `ListFooterComponentStyle`
-
-Styling for internal View for `ListFooterComponent`.
-
-| Type                           |
-| ------------------------------ |
-| [View Style](view-style-props) |
-
----
-
-### `ListHeaderComponent`
-
-Rendered at the top of all the items. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
-
-| Type               |
-| ------------------ |
-| component, element |
-
----
-
-### `ListHeaderComponentStyle`
-
-Styling for internal View for `ListHeaderComponent`.
-
-| Type                           |
-| ------------------------------ |
-| [View Style](view-style-props) |
-
----
-
-### `columnWrapperStyle`
-
-Optional custom style for multi-item rows generated when `numColumns > 1`.
-
-| Type                           |
-| ------------------------------ |
-| [View Style](view-style-props) |
-
----
-
-### `extraData`
-
-A marker property for telling the list to re-render (since it implements `PureComponent`). If any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the `data` prop, stick it here and treat it immutably.
-
-| Type |
-| ---- |
-| any  |
-
----
-
-### `getItemLayout`
-
-```tsx
-(data, index) => {length: number, offset: number, index: number}
-```
-
-`getItemLayout` is an optional optimization that allows skipping the measurement of dynamic content if you know the size (height or width) of items ahead of time. `getItemLayout` is efficient if you have fixed size items, for example:
-
-```tsx
-  getItemLayout={(data, index) => (
-    {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
-  )}
-```
-
-Adding `getItemLayout` can be a great performance boost for lists of several hundred items. Remember to include separator length (height or width) in your offset calculation if you specify `ItemSeparatorComponent`.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `horizontal`
-
-If `true`, renders items next to each other horizontally instead of stacked vertically.
-
-| Type    |
-| ------- |
-| boolean |
-
----
-
-### `initialNumToRender`
-
-How many items to render in the initial batch. This should be enough to fill the screen but not much more. Note these items will never be unmounted as part of the windowed rendering in order to improve perceived performance of scroll-to-top actions.
-
-| Type   | Default |
-| ------ | ------- |
-| number | `10`    |
-
----
-
-### `initialScrollIndex`
-
-Instead of starting at the top with the first item, start at `initialScrollIndex`. This disables the "scroll to top" optimization that keeps the first `initialNumToRender` items always rendered and immediately renders the items starting at this initial index. Requires `getItemLayout` to be implemented.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `inverted`
-
-Reverses the direction of scroll. Uses scale transforms of `-1`.
-
-| Type    |
-| ------- |
-| boolean |
-
----
-
-### `keyExtractor`
-
-```tsx
-(item: ItemT, index: number) => string;
-```
-
-Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks `item.key`, then `item.id`, and then falls back to using the index, like React does.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `numColumns`
-
-Multiple columns can only be rendered with `horizontal={false}` and will zig-zag like a `flexWrap` layout. Items should all be the same height - masonry layouts are not supported.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `onRefresh`
-
-```tsx
-() => void;
-```
-
-If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the `refreshing` prop correctly.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onViewableItemsChanged`
-
-Called when the viewability of rows changes, as defined by the `viewabilityConfig` prop.
-
-| Type                                                                                                  |
-| ----------------------------------------------------------------------------------------------------- |
-| `md (callback: {changed: [ViewToken](viewtoken)[], viewableItems: [ViewToken](viewtoken)[]} => void;` |
-
----
-
-### `progressViewOffset`
-
-Set this when offset is needed for the loading indicator to show correctly.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `refreshing`
-
-Set this true while waiting for new data from a refresh.
-
-| Type    |
-| ------- |
-| boolean |
-
----
-
-### `removeClippedSubviews`
-
-This may improve scroll performance for large lists. On Android the default value is `true`.
-
-> Note: May have bugs (missing content) in some circumstances - use at your own risk.
-
-| Type    |
-| ------- |
-| boolean |
-
----
-
-### `viewabilityConfig`
-
-See [`ViewabilityHelper.js`](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Lists/ViewabilityHelper.js) for flow type and further documentation.
-
-| Type              |
-| ----------------- |
-| ViewabilityConfig |
-
-`viewabilityConfig` takes a type `ViewabilityConfig` an object with following properties
-
-| Property                         | Type    |
-| -------------------------------- | ------- |
-| minimumViewTime                  | number  |
-| viewAreaCoveragePercentThreshold | number  |
-| itemVisiblePercentThreshold      | number  |
-| waitForInteraction               | boolean |
-
-At least one of the `viewAreaCoveragePercentThreshold` or `itemVisiblePercentThreshold` is required. This needs to be done in the `constructor` to avoid following error ([ref](https://github.com/facebook/react-native/issues/17408)):
-
-```
-  Error: Changing viewabilityConfig on the fly is not supported
-```
-
-```tsx
-constructor (props) {
-  super(props)
-
-  this.viewabilityConfig = {
-      waitForInteraction: true,
-      viewAreaCoveragePercentThreshold: 95
-  }
-}
-```
-
-```tsx
-<FlatList
-    viewabilityConfig={this.viewabilityConfig}
-  ...
-```
-
-#### minimumViewTime
-
-Minimum amount of time (in milliseconds) that an item must be physically viewable before the viewability callback will be fired. A high number means that scrolling through content without stopping will not mark the content as viewable.
-
-#### viewAreaCoveragePercentThreshold
-
-Percent of viewport that must be covered for a partially occluded item to count as "viewable", 0-100. Fully visible items are always considered viewable. A value of 0 means that a single pixel in the viewport makes the item viewable, and a value of 100 means that an item must be either entirely visible or cover the entire viewport to count as viewable.
-
-#### itemVisiblePercentThreshold
-
-Similar to `viewAreaCoveragePercentThreshold`, but considers the percent of the item that is visible, rather than the fraction of the viewable area it covers.
-
-#### waitForInteraction
-
-Nothing is considered viewable until the user scrolls or `recordInteraction` is called after render.
-
----
-
-### `viewabilityConfigCallbackPairs`
-
-List of `ViewabilityConfig`/`onViewableItemsChanged` pairs. A specific `onViewableItemsChanged` will be called when its corresponding `ViewabilityConfig`'s conditions are met. See `ViewabilityHelper.js` for flow type and further documentation.
-
-| Type                                   |
-| -------------------------------------- |
-| array of ViewabilityConfigCallbackPair |
-
-## Methods
-
-### `flashScrollIndicators()`
-
-```tsx
-flashScrollIndicators();
-```
-
-Displays the scroll indicators momentarily.
-
----
-
-### `getNativeScrollRef()`
-
-```tsx
-getNativeScrollRef(): React.ElementRef<typeof ScrollViewComponent>;
-```
-
-Provides a reference to the underlying scroll component
-
----
-
-### `getScrollResponder()`
-
-```tsx
-getScrollResponder(): ScrollResponderMixin;
-```
-
-Provides a handle to the underlying scroll responder.
-
----
-
-### `getScrollableNode()`
-
-```tsx
-getScrollableNode(): any;
-```
-
-Provides a handle to the underlying scroll node.
-
-### `scrollToEnd()`
-
-```tsx
-scrollToEnd(params?: {animated?: boolean});
-```
-
-Scrolls to the end of the content. May be janky without `getItemLayout` prop.
-
-**Parameters:**
-
-| Name   | Type   |
-| ------ | ------ |
-| params | object |
-
-Valid `params` keys are:
-
-- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
-
----
-
-### `scrollToIndex()`
-
-```tsx
-scrollToIndex: (params: {
-  index: number;
-  animated?: boolean;
-  viewOffset?: number;
-  viewPosition?: number;
-});
-```
-
-Scrolls to the item at the specified index such that it is positioned in the viewable area such that `viewPosition` 0 places it at the top, 1 at the bottom, and 0.5 centered in the middle.
-
-> Note: Cannot scroll to locations outside the render window without specifying the `getItemLayout` prop.
-
-**Parameters:**
-
-| Name                                                        | Type   |
-| ----------------------------------------------------------- | ------ |
-| params <div className="label basic required">Required</div> | object |
-
-Valid `params` keys are:
-
-- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
-- 'index' (number) - The index to scroll to. Required.
-- 'viewOffset' (number) - A fixed number of pixels to offset the final target position.
-- 'viewPosition' (number) - A value of `0` places the item specified by index at the top, `1` at the bottom, and `0.5` centered in the middle.
-
----
-
-### `scrollToItem()`
-
-```tsx
-scrollToItem(params: {
-  animated?: ?boolean,
-  item: Item,
-  viewPosition?: number,
-});
-```
-
-Requires linear scan through data - use `scrollToIndex` instead if possible.
-
-> Note: Cannot scroll to locations outside the render window without specifying the `getItemLayout` prop.
-
-**Parameters:**
-
-| Name                                                        | Type   |
-| ----------------------------------------------------------- | ------ |
-| params <div className="label basic required">Required</div> | object |
-
-Valid `params` keys are:
-
-- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
-- 'item' (object) - The item to scroll to. Required.
-- 'viewPosition' (number)
-
----
-
-### `scrollToOffset()`
-
-```tsx
-scrollToOffset(params: {
-  offset: number;
-  animated?: boolean;
-});
-```
-
-Scroll to a specific content pixel offset in the list.
-
-**Parameters:**
-
-| Name                                                        | Type   |
-| ----------------------------------------------------------- | ------ |
-| params <div className="label basic required">Required</div> | object |
-
-Valid `params` keys are:
-
-- 'offset' (number) - The offset to scroll to. In case of `horizontal` being true, the offset is the x-value, in any other case the offset is the y-value. Required.
-- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
+---
+id: flatlist
+title: FlatList
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+A performant interface for rendering basic, flat lists, supporting the most handy features:
+
+- Fully cross-platform.
+- Optional horizontal mode.
+- Configurable viewability callbacks.
+- Header support.
+- Footer support.
+- Separator support.
+- Pull to Refresh.
+- Scroll loading.
+- ScrollToIndex support.
+- Multiple column support.
+
+If you need section support, use [`<SectionList>`](sectionlist.md).
+
+## Example
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Simple%20FlatList%20Example&ext=js
+import {View, FlatList, StyleSheet, Text, StatusBar} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const DATA = [
+  {
+    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
+    title: 'First Item',
+  },
+  {
+    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
+    title: 'Second Item',
+  },
+  {
+    id: '58694a0f-3da1-471f-bd96-145571e29d72',
+    title: 'Third Item',
+  },
+];
+
+const Item = ({title}) => (
+  <View style={styles.item}>
+    <Text style={styles.title}>{title}</Text>
+  </View>
+);
+
+const App = () => (
+  <SafeAreaProvider>
+    <SafeAreaView style={styles.container}>
+      <FlatList
+        data={DATA}
+        renderItem={({item}) => <Item title={item.title} />}
+        keyExtractor={item => item.id}
+      />
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: StatusBar.currentHeight || 0,
+  },
+  item: {
+    backgroundColor: '#f9c2ff',
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Simple%20FlatList%20Example&ext=tsx
+import {View, FlatList, StyleSheet, Text, StatusBar} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const DATA = [
+  {
+    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
+    title: 'First Item',
+  },
+  {
+    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
+    title: 'Second Item',
+  },
+  {
+    id: '58694a0f-3da1-471f-bd96-145571e29d72',
+    title: 'Third Item',
+  },
+];
+
+type ItemProps = {title: string};
+
+const Item = ({title}: ItemProps) => (
+  <View style={styles.item}>
+    <Text style={styles.title}>{title}</Text>
+  </View>
+);
+
+const App = () => (
+  <SafeAreaProvider>
+    <SafeAreaView style={styles.container}>
+      <FlatList
+        data={DATA}
+        renderItem={({item}) => <Item title={item.title} />}
+        keyExtractor={item => item.id}
+      />
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: StatusBar.currentHeight || 0,
+  },
+  item: {
+    backgroundColor: '#f9c2ff',
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+To render multiple columns, use the [`numColumns`](flatlist.md#numcolumns) prop. Using this approach instead of a `flexWrap` layout can prevent conflicts with the item height logic.
+
+More complex, selectable example below.
+
+- By passing `extraData={selectedId}` to `FlatList` we make sure `FlatList` itself will re-render when the state changes. Without setting this prop, `FlatList` would not know it needs to re-render any items because it is a `PureComponent` and the prop comparison will not show any changes.
+- `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=flatlist-selectable&ext=js
+import {useState} from 'react';
+import {
+  FlatList,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const DATA = [
+  {
+    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
+    title: 'First Item',
+  },
+  {
+    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
+    title: 'Second Item',
+  },
+  {
+    id: '58694a0f-3da1-471f-bd96-145571e29d72',
+    title: 'Third Item',
+  },
+];
+
+const Item = ({item, onPress, backgroundColor, textColor}) => (
+  <TouchableOpacity onPress={onPress} style={[styles.item, {backgroundColor}]}>
+    <Text style={[styles.title, {color: textColor}]}>{item.title}</Text>
+  </TouchableOpacity>
+);
+
+const App = () => {
+  const [selectedId, setSelectedId] = useState();
+
+  const renderItem = ({item}) => {
+    const backgroundColor = item.id === selectedId ? '#6e3b6e' : '#f9c2ff';
+    const color = item.id === selectedId ? 'white' : 'black';
+
+    return (
+      <Item
+        item={item}
+        onPress={() => setSelectedId(item.id)}
+        backgroundColor={backgroundColor}
+        textColor={color}
+      />
+    );
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <FlatList
+          data={DATA}
+          renderItem={renderItem}
+          keyExtractor={item => item.id}
+          extraData={selectedId}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: StatusBar.currentHeight || 0,
+  },
+  item: {
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=flatlist-selectable&ext=tsx
+import {useState} from 'react';
+import {
+  FlatList,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+type ItemData = {
+  id: string;
+  title: string;
+};
+
+const DATA: ItemData[] = [
+  {
+    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
+    title: 'First Item',
+  },
+  {
+    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
+    title: 'Second Item',
+  },
+  {
+    id: '58694a0f-3da1-471f-bd96-145571e29d72',
+    title: 'Third Item',
+  },
+];
+
+type ItemProps = {
+  item: ItemData;
+  onPress: () => void;
+  backgroundColor: string;
+  textColor: string;
+};
+
+const Item = ({item, onPress, backgroundColor, textColor}: ItemProps) => (
+  <TouchableOpacity onPress={onPress} style={[styles.item, {backgroundColor}]}>
+    <Text style={[styles.title, {color: textColor}]}>{item.title}</Text>
+  </TouchableOpacity>
+);
+
+const App = () => {
+  const [selectedId, setSelectedId] = useState<string>();
+
+  const renderItem = ({item}: {item: ItemData}) => {
+    const backgroundColor = item.id === selectedId ? '#6e3b6e' : '#f9c2ff';
+    const color = item.id === selectedId ? 'white' : 'black';
+
+    return (
+      <Item
+        item={item}
+        onPress={() => setSelectedId(item.id)}
+        backgroundColor={backgroundColor}
+        textColor={color}
+      />
+    );
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <FlatList
+          data={DATA}
+          renderItem={renderItem}
+          keyExtractor={item => item.id}
+          extraData={selectedId}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: StatusBar.currentHeight || 0,
+  },
+  item: {
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+This is a convenience wrapper around [`<VirtualizedList>`](virtualizedlist.md), and thus inherits its props (as well as those of [`<ScrollView>`](scrollview.md)) that aren't explicitly listed here, along with the following caveats:
+
+- Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.
+- This is a `PureComponent` which means that it will not re-render if `props` remain shallow-equal. Make sure that everything your `renderItem` function depends on is passed as a prop (e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on changes. This includes the `data` prop and parent component state.
+- In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes.
+- By default, the list looks for a `key` prop on each item and uses that for the React key. Alternatively, you can provide a custom `keyExtractor` prop.
+
+---
+
+# Reference
+
+## Props
+
+### [VirtualizedList Props](virtualizedlist.md#props)
+
+Inherits [VirtualizedList Props](virtualizedlist.md#props).
+
+---
+
+### <div className="label required basic">Required</div> **`renderItem`**
+
+```tsx
+renderItem({
+  item: ItemT,
+  index: number,
+  separators: {
+    highlight: () => void;
+    unhighlight: () => void;
+    updateProps: (select: 'leading' | 'trailing', newProps: any) => void;
+  }
+}): JSX.Element;
+```
+
+Takes an item from `data` and renders it into the list.
+
+Provides additional metadata like `index` if you need it, as well as a more generic `separators.updateProps` function which let you set whatever props you want to change the rendering of either the leading separator or trailing separator in case the more common `highlight` and `unhighlight` (which set the `highlighted: boolean` prop) are insufficient for your use case.
+
+| Type     |
+| -------- |
+| function |
+
+- `item` (Object): The item from `data` being rendered.
+- `index` (number): The index corresponding to this item in the `data` array.
+- `separators` (Object)
+  - `highlight` (Function)
+  - `unhighlight` (Function)
+  - `updateProps` (Function)
+    - `select` (enum('leading', 'trailing'))
+    - `newProps` (Object)
+
+Example usage:
+
+```tsx
+<FlatList
+  ItemSeparatorComponent={
+    Platform.OS !== 'android' &&
+    (({highlighted}) => (
+      <View
+        style={[style.separator, highlighted && {marginLeft: 0}]}
+      />
+    ))
+  }
+  data={[{title: 'Title Text', key: 'item1'}]}
+  renderItem={({item, index, separators}) => (
+    <TouchableHighlight
+      key={item.key}
+      onPress={() => this._onPress(item)}
+      onShowUnderlay={separators.highlight}
+      onHideUnderlay={separators.unhighlight}>
+      <View style={{backgroundColor: 'white'}}>
+        <Text>{item.title}</Text>
+      </View>
+    </TouchableHighlight>
+  )}
+/>
+```
+
+---
+
+### <div className="label required basic">Required</div> **`data`**
+
+An array (or array-like list) of items to render. Other data types can be used by targeting [`VirtualizedList`](virtualizedlist.md) directly.
+
+| Type      |
+| --------- |
+| ArrayLike |
+
+---
+
+### `ItemSeparatorComponent`
+
+Rendered in between each item, but not at the top or bottom. By default, `highlighted` and `leadingItem` props are provided. `renderItem` provides `separators.highlight`/`unhighlight` which will update the `highlighted` prop, but you can also add custom props with `separators.updateProps`. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
+
+| Type                         |
+| ---------------------------- |
+| component, function, element |
+
+---
+
+### `ListEmptyComponent`
+
+Rendered when the list is empty. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
+
+| Type               |
+| ------------------ |
+| component, element |
+
+---
+
+### `ListFooterComponent`
+
+Rendered at the bottom of all the items. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
+
+| Type               |
+| ------------------ |
+| component, element |
+
+---
+
+### `ListFooterComponentStyle`
+
+Styling for internal View for `ListFooterComponent`.
+
+| Type                           |
+| ------------------------------ |
+| [View Style](view-style-props) |
+
+---
+
+### `ListHeaderComponent`
+
+Rendered at the top of all the items. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
+
+| Type               |
+| ------------------ |
+| component, element |
+
+---
+
+### `ListHeaderComponentStyle`
+
+Styling for internal View for `ListHeaderComponent`.
+
+| Type                           |
+| ------------------------------ |
+| [View Style](view-style-props) |
+
+---
+
+### `columnWrapperStyle`
+
+Optional custom style for multi-item rows generated when `numColumns > 1`.
+
+| Type                           |
+| ------------------------------ |
+| [View Style](view-style-props) |
+
+---
+
+### `extraData`
+
+A marker property for telling the list to re-render (since it implements `PureComponent`). If any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the `data` prop, stick it here and treat it immutably.
+
+| Type |
+| ---- |
+| any  |
+
+---
+
+### `getItemLayout`
+
+```tsx
+(data, index) => {length: number, offset: number, index: number}
+```
+
+`getItemLayout` is an optional optimization that allows skipping the measurement of dynamic content if you know the size (height or width) of items ahead of time. `getItemLayout` is efficient if you have fixed size items, for example:
+
+```tsx
+  getItemLayout={(data, index) => (
+    {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
+  )}
+```
+
+Adding `getItemLayout` can be a great performance boost for lists of several hundred items. Remember to include separator length (height or width) in your offset calculation if you specify `ItemSeparatorComponent`.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `horizontal`
+
+If `true`, renders items next to each other horizontally instead of stacked vertically.
+
+| Type    |
+| ------- |
+| boolean |
+
+---
+
+### `initialNumToRender`
+
+How many items to render in the initial batch. This should be enough to fill the screen but not much more. Note these items will never be unmounted as part of the windowed rendering in order to improve perceived performance of scroll-to-top actions.
+
+| Type   | Default |
+| ------ | ------- |
+| number | `10`    |
+
+---
+
+### `initialScrollIndex`
+
+Instead of starting at the top with the first item, start at `initialScrollIndex`. This disables the "scroll to top" optimization that keeps the first `initialNumToRender` items always rendered and immediately renders the items starting at this initial index. Requires `getItemLayout` to be implemented.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `inverted`
+
+Reverses the direction of scroll. Uses scale transforms of `-1`.
+
+| Type    |
+| ------- |
+| boolean |
+
+---
+
+### `keyExtractor`
+
+```tsx
+(item: ItemT, index: number) => string;
+```
+
+Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks `item.key`, then `item.id`, and then falls back to using the index, like React does.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `numColumns`
+
+Multiple columns can only be rendered with `horizontal={false}` and will zig-zag like a `flexWrap` layout. Items should all be the same height - masonry layouts are not supported.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `onRefresh`
+
+```tsx
+() => void;
+```
+
+If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the `refreshing` prop correctly.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onViewableItemsChanged`
+
+Called when the viewability of rows changes, as defined by the `viewabilityConfig` prop.
+
+| Type                                                                                                  |
+| ----------------------------------------------------------------------------------------------------- |
+| `md (callback: {changed: [ViewToken](viewtoken)[], viewableItems: [ViewToken](viewtoken)[]} => void;` |
+
+---
+
+### `progressViewOffset`
+
+Set this when offset is needed for the loading indicator to show correctly.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `refreshing`
+
+Set this true while waiting for new data from a refresh.
+
+| Type    |
+| ------- |
+| boolean |
+
+---
+
+### `removeClippedSubviews`
+
+This may improve scroll performance for large lists. On Android the default value is `true`.
+
+> Note: May have bugs (missing content) in some circumstances - use at your own risk.
+
+| Type    |
+| ------- |
+| boolean |
+
+---
+
+### `viewabilityConfig`
+
+See [`ViewabilityHelper.js`](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Lists/ViewabilityHelper.js) for flow type and further documentation.
+
+| Type              |
+| ----------------- |
+| ViewabilityConfig |
+
+`viewabilityConfig` takes a type `ViewabilityConfig` an object with following properties
+
+| Property                         | Type    |
+| -------------------------------- | ------- |
+| minimumViewTime                  | number  |
+| viewAreaCoveragePercentThreshold | number  |
+| itemVisiblePercentThreshold      | number  |
+| waitForInteraction               | boolean |
+
+At least one of the `viewAreaCoveragePercentThreshold` or `itemVisiblePercentThreshold` is required. This needs to be done in the `constructor` to avoid following error ([ref](https://github.com/facebook/react-native/issues/17408)):
+
+```
+  Error: Changing viewabilityConfig on the fly is not supported
+```
+
+```tsx
+constructor (props) {
+  super(props)
+
+  this.viewabilityConfig = {
+      waitForInteraction: true,
+      viewAreaCoveragePercentThreshold: 95
+  }
+}
+```
+
+```tsx
+<FlatList
+    viewabilityConfig={this.viewabilityConfig}
+  ...
+```
+
+#### minimumViewTime
+
+Minimum amount of time (in milliseconds) that an item must be physically viewable before the viewability callback will be fired. A high number means that scrolling through content without stopping will not mark the content as viewable.
+
+#### viewAreaCoveragePercentThreshold
+
+Percent of viewport that must be covered for a partially occluded item to count as "viewable", 0-100. Fully visible items are always considered viewable. A value of 0 means that a single pixel in the viewport makes the item viewable, and a value of 100 means that an item must be either entirely visible or cover the entire viewport to count as viewable.
+
+#### itemVisiblePercentThreshold
+
+Similar to `viewAreaCoveragePercentThreshold`, but considers the percent of the item that is visible, rather than the fraction of the viewable area it covers.
+
+#### waitForInteraction
+
+Nothing is considered viewable until the user scrolls or `recordInteraction` is called after render.
+
+---
+
+### `viewabilityConfigCallbackPairs`
+
+List of `ViewabilityConfig`/`onViewableItemsChanged` pairs. A specific `onViewableItemsChanged` will be called when its corresponding `ViewabilityConfig`'s conditions are met. See `ViewabilityHelper.js` for flow type and further documentation.
+
+| Type                                   |
+| -------------------------------------- |
+| array of ViewabilityConfigCallbackPair |
+
+## Methods
+
+### `flashScrollIndicators()`
+
+```tsx
+flashScrollIndicators();
+```
+
+Displays the scroll indicators momentarily.
+
+---
+
+### `getNativeScrollRef()`
+
+```tsx
+getNativeScrollRef(): React.ElementRef<typeof ScrollViewComponent>;
+```
+
+Provides a reference to the underlying scroll component
+
+---
+
+### `getScrollResponder()`
+
+```tsx
+getScrollResponder(): ScrollResponderMixin;
+```
+
+Provides a handle to the underlying scroll responder.
+
+---
+
+### `getScrollableNode()`
+
+```tsx
+getScrollableNode(): any;
+```
+
+Provides a handle to the underlying scroll node.
+
+### `scrollToEnd()`
+
+```tsx
+scrollToEnd(params?: {animated?: boolean});
+```
+
+Scrolls to the end of the content. May be janky without `getItemLayout` prop.
+
+**Parameters:**
+
+| Name   | Type   |
+| ------ | ------ |
+| params | object |
+
+Valid `params` keys are:
+
+- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
+
+---
+
+### `scrollToIndex()`
+
+```tsx
+scrollToIndex: (params: {
+  index: number;
+  animated?: boolean;
+  viewOffset?: number;
+  viewPosition?: number;
+});
+```
+
+Scrolls to the item at the specified index such that it is positioned in the viewable area such that `viewPosition` 0 places it at the top, 1 at the bottom, and 0.5 centered in the middle.
+
+> Note: Cannot scroll to locations outside the render window without specifying the `getItemLayout` prop.
+
+**Parameters:**
+
+| Name                                                        | Type   |
+| ----------------------------------------------------------- | ------ |
+| params <div className="label basic required">Required</div> | object |
+
+Valid `params` keys are:
+
+- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
+- 'index' (number) - The index to scroll to. Required.
+- 'viewOffset' (number) - A fixed number of pixels to offset the final target position.
+- 'viewPosition' (number) - A value of `0` places the item specified by index at the top, `1` at the bottom, and `0.5` centered in the middle.
+
+---
+
+### `scrollToItem()`
+
+```tsx
+scrollToItem(params: {
+  animated?: ?boolean,
+  item: Item,
+  viewPosition?: number,
+});
+```
+
+Requires linear scan through data - use `scrollToIndex` instead if possible.
+
+> Note: Cannot scroll to locations outside the render window without specifying the `getItemLayout` prop.
+
+**Parameters:**
+
+| Name                                                        | Type   |
+| ----------------------------------------------------------- | ------ |
+| params <div className="label basic required">Required</div> | object |
+
+Valid `params` keys are:
+
+- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
+- 'item' (object) - The item to scroll to. Required.
+- 'viewPosition' (number)
+
+---
+
+### `scrollToOffset()`
+
+```tsx
+scrollToOffset(params: {
+  offset: number;
+  animated?: boolean;
+});
+```
+
+Scroll to a specific content pixel offset in the list.
+
+**Parameters:**
+
+| Name                                                        | Type   |
+| ----------------------------------------------------------- | ------ |
+| params <div className="label basic required">Required</div> | object |
+
+Valid `params` keys are:
+
+- 'offset' (number) - The offset to scroll to. In case of `horizontal` being true, the offset is the x-value, in any other case the offset is the y-value. Required.
+- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
diff --git a/website/versioned_docs/version-0.80/flexbox.md b/website/versioned_docs/version-0.80/flexbox.md
index 039a7bdf60b..b745c9684ef 100644
--- a/website/versioned_docs/version-0.80/flexbox.md
+++ b/website/versioned_docs/version-0.80/flexbox.md
@@ -1,2884 +1,2883 @@
----
-id: flexbox
-title: Layout with Flexbox
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-A component can specify the layout of its children using the Flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes.
-
-You will normally use a combination of `flexDirection`, `alignItems`, and `justifyContent` to achieve the right layout.
-
-:::caution
-Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions.
-The defaults are different, with `flexDirection` defaulting to `column` instead of `row`, `alignContent` defaulting to `flex-start` instead of `stretch`, `flexShrink` defaulting to `0` instead of `1`, the `flex` parameter only supporting a single number.
-:::
-
-## Flex
-
-[`flex`](layout-props#flex) will define how your items are going to **“fill”** over the available space along your main axis. Space will be divided according to each element's flex property.
-
-In the following example, the red, orange, and green views are all children in the container view that has `flex: 1` set. The red view uses `flex: 1` , the orange view uses `flex: 2`, and the green view uses `flex: 3` . **1+2+3 = 6**, which means that the red view will get `1/6` of the space, the orange `2/6` of the space, and the green `3/6` of the space.
-
-```SnackPlayer name=Flex%20Example
-import React from 'react';
-import {StyleSheet, View} from 'react-native';
-
-const Flex = () => {
-  return (
-    <View
-      style={[
-        styles.container,
-        {
-          // Try setting `flexDirection` to `"row"`.
-          flexDirection: 'column',
-        },
-      ]}>
-      <View style={{flex: 1, backgroundColor: 'red'}} />
-      <View style={{flex: 2, backgroundColor: 'darkorange'}} />
-      <View style={{flex: 3, backgroundColor: 'green'}} />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 20,
-  },
-});
-
-export default Flex;
-```
-
-## Flex Direction
-
-[`flexDirection`](layout-props#flexdirection) controls the direction in which the children of a node are laid out. This is also referred to as the main axis. The cross axis is the axis perpendicular to the main axis, or the axis which the wrapping lines are laid out in.
-
-- `column` (**default value**) Align children from top to bottom. If wrapping is enabled, then the next line will start to the right of the first item on the top of the container.
-
-- `row` Align children from left to right. If wrapping is enabled, then the next line will start under the first item on the left of the container.
-
-- `column-reverse` Align children from bottom to top. If wrapping is enabled, then the next line will start to the right of the first item on the bottom of the container.
-
-- `row-reverse` Align children from right to left. If wrapping is enabled, then the next line will start under the first item on the right of the container.
-
-You can learn more [here](https://www.yogalayout.dev/docs/styling/flex-direction).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Flex%20Direction&ext=js
-import React, {useState} from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
-
-const FlexDirectionBasics = () => {
-  const [flexDirection, setflexDirection] = useState('column');
-
-  return (
-    <PreviewLayout
-      label="flexDirection"
-      values={['column', 'row', 'column-reverse', 'row-reverse']}
-      selectedValue={flexDirection}
-      setSelectedValue={setflexDirection}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default FlexDirectionBasics;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Flex%20Direction&ext=tsx
-import React, {useState} from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const FlexDirectionBasics = () => {
-  const [flexDirection, setflexDirection] = useState('column');
-
-  return (
-    <PreviewLayout
-      label="flexDirection"
-      values={['column', 'row', 'column-reverse', 'row-reverse']}
-      selectedValue={flexDirection}
-      setSelectedValue={setflexDirection}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default FlexDirectionBasics;
-```
-
-</TabItem>
-</Tabs>
-
-## Layout Direction
-
-Layout [`direction`](layout-props#direction) specifies the direction in which children and text in a hierarchy should be laid out. Layout direction also affects what edge `start` and `end` refer to. By default, React Native lays out with LTR layout direction. In this mode `start` refers to left and `end` refers to right.
-
-- `LTR` (**default value**) Text and children are laid out from left to right. Margin and padding applied to the start of an element are applied on the left side.
-
-- `RTL` Text and children are laid out from right to left. Margin and padding applied to the start of an element are applied on the right side.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Flex%20Direction&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const DirectionLayout = () => {
-  const [direction, setDirection] = useState('ltr');
-
-  return (
-    <PreviewLayout
-      label="direction"
-      selectedValue={direction}
-      values={['ltr', 'rtl']}
-      setSelectedValue={setDirection}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default DirectionLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Flex%20Direction&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const DirectionLayout = () => {
-  const [direction, setDirection] = useState('ltr');
-
-  return (
-    <PreviewLayout
-      label="direction"
-      selectedValue={direction}
-      values={['ltr', 'rtl']}
-      setSelectedValue={setDirection}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default DirectionLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## Justify Content
-
-[`justifyContent`](layout-props#justifycontent) describes how to align children within the main axis of their container. For example, you can use this property to center a child horizontally within a container with `flexDirection` set to `row` or vertically within a container with `flexDirection` set to `column`.
-
-- `flex-start`(**default value**) Align children of a container to the start of the container's main axis.
-
-- `flex-end` Align children of a container to the end of the container's main axis.
-
-- `center` Align children of a container in the center of the container's main axis.
-
-- `space-between` Evenly space off children across the container's main axis, distributing the remaining space between the children.
-
-- `space-around` Evenly space off children across the container's main axis, distributing the remaining space around the children. Compared to `space-between`, using `space-around` will result in space being distributed to the beginning of the first child and end of the last child.
-
-- `space-evenly` Evenly distribute children within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.
-
-You can learn more [here](https://www.yogalayout.dev/docs/styling/justify-content).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Justify%20Content&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const JustifyContentBasics = () => {
-  const [justifyContent, setJustifyContent] = useState('flex-start');
-
-  return (
-    <PreviewLayout
-      label="justifyContent"
-      selectedValue={justifyContent}
-      values={[
-        'flex-start',
-        'flex-end',
-        'center',
-        'space-between',
-        'space-around',
-        'space-evenly',
-      ]}
-      setSelectedValue={setJustifyContent}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default JustifyContentBasics;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Justify%20Content&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const JustifyContentBasics = () => {
-  const [justifyContent, setJustifyContent] = useState('flex-start');
-
-  return (
-    <PreviewLayout
-      label="justifyContent"
-      selectedValue={justifyContent}
-      values={[
-        'flex-start',
-        'flex-end',
-        'center',
-        'space-between',
-        'space-around',
-        'space-evenly',
-      ]}
-      setSelectedValue={setJustifyContent}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default JustifyContentBasics;
-```
-
-</TabItem>
-</Tabs>
-
-## Align Items
-
-[`alignItems`](layout-props#alignitems) describes how to align children along the cross axis of their container. It is very similar to `justifyContent` but instead of applying to the main axis, `alignItems` applies to the cross axis.
-
-- `stretch` (**default value**) Stretch children of a container to match the `height` of the container's cross axis.
-
-- `flex-start` Align children of a container to the start of the container's cross axis.
-
-- `flex-end` Align children of a container to the end of the container's cross axis.
-
-- `center` Align children of a container in the center of the container's cross axis.
-
-- `baseline` Align children of a container along a common baseline. Individual children can be set to be the reference baseline for their parents.
-
-:::info
-For `stretch` to have an effect, children must not have a fixed dimension along the secondary axis. In the following example, setting `alignItems: stretch` does nothing until the `width: 50` is removed from the children.
-:::
-
-You can learn more [here](https://www.yogalayout.dev/docs/styling/align-items-self).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Align%20Items&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const AlignItemsLayout = () => {
-  const [alignItems, setAlignItems] = useState('stretch');
-
-  return (
-    <PreviewLayout
-      label="alignItems"
-      selectedValue={alignItems}
-      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
-      setSelectedValue={setAlignItems}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View
-        style={[
-          styles.box,
-          {
-            backgroundColor: 'steelblue',
-            width: 'auto',
-            minWidth: 50,
-          },
-        ]}
-      />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignItemsLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Align%20Items&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const AlignItemsLayout = () => {
-  const [alignItems, setAlignItems] = useState('stretch');
-
-  return (
-    <PreviewLayout
-      label="alignItems"
-      selectedValue={alignItems}
-      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
-      setSelectedValue={setAlignItems}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View
-        style={[
-          styles.box,
-          {
-            backgroundColor: 'steelblue',
-            width: 'auto',
-            minWidth: 50,
-          },
-        ]}
-      />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignItemsLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## Align Self
-
-[`alignSelf`](layout-props#alignself) has the same options and effect as `alignItems` but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent. `alignSelf` overrides any option set by the parent with `alignItems`.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Align%20Self&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const AlignSelfLayout = () => {
-  const [alignSelf, setAlignSelf] = useState('stretch');
-
-  return (
-    <PreviewLayout
-      label="alignSelf"
-      selectedValue={alignSelf}
-      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
-      setSelectedValue={setAlignSelf}>
-      <View
-        style={[
-          styles.box,
-          {
-            alignSelf,
-            width: 'auto',
-            minWidth: 50,
-            backgroundColor: 'powderblue',
-          },
-        ]}
-      />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={styles.container}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignSelfLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Align%20Self&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-import type {FlexAlignType} from 'react-native';
-
-const AlignSelfLayout = () => {
-  const [alignSelf, setAlignSelf] = useState<FlexAlignType>('stretch');
-
-  return (
-    <PreviewLayout
-      label="alignSelf"
-      selectedValue={alignSelf}
-      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
-      setSelectedValue={setAlignSelf}>
-      <View
-        style={[
-          styles.box,
-          {
-            alignSelf,
-            width: 'auto',
-            minWidth: 50,
-            backgroundColor: 'powderblue',
-          },
-        ]}
-      />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: FlexAlignType[];
-  selectedValue: string;
-  setSelectedValue: (value: FlexAlignType) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={styles.container}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignSelfLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## Align Content
-
-[alignContent](layout-props#aligncontent) defines the distribution of lines along the cross-axis. This only has effect when items are wrapped to multiple lines using `flexWrap`.
-
-- `flex-start` (**default value**) Align wrapped lines to the start of the container's cross axis.
-
-- `flex-end` Align wrapped lines to the end of the container's cross axis.
-
-- `stretch` (_default value when using Yoga on the web_) Stretch wrapped lines to match the height of the container's cross axis.
-
-- `center` Align wrapped lines in the center of the container's cross axis.
-
-- `space-between` Evenly space wrapped lines across the container's cross axis, distributing the remaining space between the lines.
-
-- `space-around` Evenly space wrapped lines across the container's cross axis, distributing the remaining space around the lines. Each end of the container has a half-sized space compared to the space between items.
-
-- `space-evenly` Evenly space wrapped lines across the container's cross axis, distributing the remaining space around the lines. Each space is the same size.
-
-You can learn more [here](https://www.yogalayout.dev/docs/styling/align-content).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Align%20Content&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const AlignContentLayout = () => {
-  const [alignContent, setAlignContent] = useState('flex-start');
-
-  return (
-    <PreviewLayout
-      label="alignContent"
-      selectedValue={alignContent}
-      values={[
-        'flex-start',
-        'flex-end',
-        'stretch',
-        'center',
-        'space-between',
-        'space-around',
-      ]}
-      setSelectedValue={setAlignContent}>
-      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
-      <View style={[styles.box, {backgroundColor: 'orange'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
-      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'purple'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexWrap: 'wrap',
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignContentLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Align%20Content&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const AlignContentLayout = () => {
-  const [alignContent, setAlignContent] = useState('flex-start');
-
-  return (
-    <PreviewLayout
-      label="alignContent"
-      selectedValue={alignContent}
-      values={[
-        'flex-start',
-        'flex-end',
-        'stretch',
-        'center',
-        'space-between',
-        'space-around',
-      ]}
-      setSelectedValue={setAlignContent}>
-      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
-      <View style={[styles.box, {backgroundColor: 'orange'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
-      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'purple'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexWrap: 'wrap',
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignContentLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## Flex Wrap
-
-The [`flexWrap`](layout-props#flexwrap) property is set on containers and it controls what happens when children overflow the size of the container along the main axis. By default, children are forced into a single line (which can shrink elements). If wrapping is allowed, items are wrapped into multiple lines along the main axis if needed.
-
-When wrapping lines, `alignContent` can be used to specify how the lines are placed in the container. Learn more [here](https://www.yogalayout.dev/docs/styling/flex-wrap).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Flex%20Wrap&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const FlexWrapLayout = () => {
-  const [flexWrap, setFlexWrap] = useState('wrap');
-
-  return (
-    <PreviewLayout
-      label="flexWrap"
-      selectedValue={flexWrap}
-      values={['wrap', 'nowrap']}
-      setSelectedValue={setFlexWrap}>
-      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
-      <View style={[styles.box, {backgroundColor: 'orange'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
-      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'purple'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default FlexWrapLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Flex%20Wrap&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const FlexWrapLayout = () => {
-  const [flexWrap, setFlexWrap] = useState('wrap');
-
-  return (
-    <PreviewLayout
-      label="flexWrap"
-      selectedValue={flexWrap}
-      values={['wrap', 'nowrap']}
-      setSelectedValue={setFlexWrap}>
-      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
-      <View style={[styles.box, {backgroundColor: 'orange'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
-      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'purple'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default FlexWrapLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## Flex Basis, Grow, and Shrink
-
-- [`flexBasis`](layout-props#flexbasis) is an axis-independent way of providing the default size of an item along the main axis. Setting the `flexBasis` of a child is similar to setting the `width` of that child if its parent is a container with `flexDirection: row` or setting the `height` of a child if its parent is a container with `flexDirection: column`. The `flexBasis` of an item is the default size of that item, the size of the item before any `flexGrow` and `flexShrink` calculations are performed.
-
-- [`flexGrow`](layout-props#flexgrow) describes how much space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
-
-  `flexGrow` accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the children’s `flexGrow` values.
-
-- [`flexShrink`](layout-props#flexshrink) describes how to shrink children along the main axis in the case in which the total size of the children overflows the size of the container on the main axis. `flexShrink` is very similar to `flexGrow` and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed.
-
-  `flexShrink` accepts any floating point value >= 0, with 0 being the default value (on the web, the default is 1). A container will shrink its children weighted by the children’s `flexShrink` values.
-
-You can learn more [here](https://www.yogalayout.dev/docs/styling/flex-basis-grow-shrink).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink&ext=js
-import React, {useState} from 'react';
-import {View, Text, TextInput, StyleSheet} from 'react-native';
-
-const App = () => {
-  const [powderblue, setPowderblue] = useState({
-    flexGrow: 0,
-    flexShrink: 1,
-    flexBasis: 'auto',
-  });
-  const [skyblue, setSkyblue] = useState({
-    flexGrow: 1,
-    flexShrink: 0,
-    flexBasis: 100,
-  });
-  const [steelblue, setSteelblue] = useState({
-    flexGrow: 0,
-    flexShrink: 1,
-    flexBasis: 200,
-  });
-  return (
-    <View style={styles.container}>
-      <View
-        style={[
-          styles.container,
-          {
-            flexDirection: 'row',
-            alignContent: 'space-between',
-          },
-        ]}>
-        <BoxInfo color="powderblue" {...powderblue} setStyle={setPowderblue} />
-        <BoxInfo color="skyblue" {...skyblue} setStyle={setSkyblue} />
-        <BoxInfo color="steelblue" {...steelblue} setStyle={setSteelblue} />
-      </View>
-      <View style={styles.previewContainer}>
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: powderblue.flexBasis,
-              flexGrow: powderblue.flexGrow,
-              flexShrink: powderblue.flexShrink,
-              backgroundColor: 'powderblue',
-            },
-          ]}
-        />
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: skyblue.flexBasis,
-              flexGrow: skyblue.flexGrow,
-              flexShrink: skyblue.flexShrink,
-              backgroundColor: 'skyblue',
-            },
-          ]}
-        />
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: steelblue.flexBasis,
-              flexGrow: steelblue.flexGrow,
-              flexShrink: steelblue.flexShrink,
-              backgroundColor: 'steelblue',
-            },
-          ]}
-        />
-      </View>
-    </View>
-  );
-};
-
-const BoxInfo = ({color, flexBasis, flexShrink, setStyle, flexGrow}) => (
-  <View style={[styles.row, {flexDirection: 'column'}]}>
-    <View
-      style={[
-        styles.boxLabel,
-        {
-          backgroundColor: color,
-        },
-      ]}>
-      <Text
-        style={{
-          color: '#fff',
-          fontWeight: '500',
-          textAlign: 'center',
-        }}>
-        Box
-      </Text>
-    </View>
-    <Text style={styles.label}>flexBasis</Text>
-    <TextInput
-      value={flexBasis}
-      style={styles.input}
-      onChangeText={fB =>
-        setStyle(value => ({
-          ...value,
-          flexBasis: isNaN(parseInt(fB, 10)) ? 'auto' : parseInt(fB, 10),
-        }))
-      }
-    />
-    <Text style={styles.label}>flexShrink</Text>
-    <TextInput
-      value={flexShrink}
-      style={styles.input}
-      onChangeText={fS =>
-        setStyle(value => ({
-          ...value,
-          flexShrink: isNaN(parseInt(fS, 10)) ? undefined : parseInt(fS, 10),
-        }))
-      }
-    />
-    <Text style={styles.label}>flexGrow</Text>
-    <TextInput
-      value={flexGrow}
-      style={styles.input}
-      onChangeText={fG =>
-        setStyle(value => ({
-          ...value,
-          flexGrow: isNaN(parseInt(fG, 10)) ? undefined : parseInt(fG, 10),
-        }))
-      }
-    />
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingHorizontal: 10,
-  },
-  box: {
-    flex: 1,
-    height: 50,
-    width: 50,
-  },
-  boxLabel: {
-    minWidth: 80,
-    padding: 8,
-    borderRadius: 4,
-    marginTop: 8,
-  },
-  label: {
-    marginTop: 6,
-    fontSize: 16,
-    fontWeight: '100',
-  },
-  previewContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    backgroundColor: 'aliceblue',
-  },
-  row: {
-    flex: 1,
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    marginBottom: 10,
-  },
-  input: {
-    borderBottomWidth: 1,
-    paddingVertical: 3,
-    width: 50,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink&ext=tsx
-import React, {useState} from 'react';
-import {View, Text, TextInput, StyleSheet} from 'react-native';
-import type {ViewStyle} from 'react-native';
-
-const App = () => {
-  const [powderblue, setPowderblue] = useState<ViewStyle>({
-    flexGrow: 0,
-    flexShrink: 1,
-    flexBasis: 'auto',
-  });
-  const [skyblue, setSkyblue] = useState<ViewStyle>({
-    flexGrow: 1,
-    flexShrink: 0,
-    flexBasis: 100,
-  });
-  const [steelblue, setSteelblue] = useState<ViewStyle>({
-    flexGrow: 0,
-    flexShrink: 1,
-    flexBasis: 200,
-  });
-  return (
-    <View style={styles.container}>
-      <View
-        style={[
-          styles.container,
-          {
-            flexDirection: 'row',
-            alignContent: 'space-between',
-          },
-        ]}>
-        <BoxInfo color="powderblue" {...powderblue} setStyle={setPowderblue} />
-        <BoxInfo color="skyblue" {...skyblue} setStyle={setSkyblue} />
-        <BoxInfo color="steelblue" {...steelblue} setStyle={setSteelblue} />
-      </View>
-      <View style={styles.previewContainer}>
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: powderblue.flexBasis,
-              flexGrow: powderblue.flexGrow,
-              flexShrink: powderblue.flexShrink,
-              backgroundColor: 'powderblue',
-            },
-          ]}
-        />
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: skyblue.flexBasis,
-              flexGrow: skyblue.flexGrow,
-              flexShrink: skyblue.flexShrink,
-              backgroundColor: 'skyblue',
-            },
-          ]}
-        />
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: steelblue.flexBasis,
-              flexGrow: steelblue.flexGrow,
-              flexShrink: steelblue.flexShrink,
-              backgroundColor: 'steelblue',
-            },
-          ]}
-        />
-      </View>
-    </View>
-  );
-};
-
-type BoxInfoProps = ViewStyle & {
-  color: string;
-  setStyle: React.Dispatch<React.SetStateAction<ViewStyle>>;
-};
-
-const BoxInfo = ({
-  color,
-  flexBasis,
-  flexShrink,
-  setStyle,
-  flexGrow,
-}: BoxInfoProps) => (
-  <View style={[styles.row, {flexDirection: 'column'}]}>
-    <View
-      style={[
-        styles.boxLabel,
-        {
-          backgroundColor: color,
-        },
-      ]}>
-      <Text
-        style={{
-          color: '#fff',
-          fontWeight: '500',
-          textAlign: 'center',
-        }}>
-        Box
-      </Text>
-    </View>
-    <Text style={styles.label}>flexBasis</Text>
-    <TextInput
-      value={String(flexBasis)}
-      style={styles.input}
-      onChangeText={fB =>
-        setStyle(value => ({
-          ...value,
-          flexBasis: isNaN(parseInt(fB, 10)) ? 'auto' : parseInt(fB, 10),
-        }))
-      }
-    />
-    <Text style={styles.label}>flexShrink</Text>
-    <TextInput
-      value={String(flexShrink)}
-      style={styles.input}
-      onChangeText={fS =>
-        setStyle(value => ({
-          ...value,
-          flexShrink: isNaN(parseInt(fS, 10)) ? undefined : parseInt(fS, 10),
-        }))
-      }
-    />
-    <Text style={styles.label}>flexGrow</Text>
-    <TextInput
-      value={String(flexGrow)}
-      style={styles.input}
-      onChangeText={fG =>
-        setStyle(value => ({
-          ...value,
-          flexGrow: isNaN(parseInt(fG, 10)) ? undefined : parseInt(fG, 10),
-        }))
-      }
-    />
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingHorizontal: 10,
-  },
-  box: {
-    flex: 1,
-    height: 50,
-    width: 50,
-  },
-  boxLabel: {
-    minWidth: 80,
-    padding: 8,
-    borderRadius: 4,
-    marginTop: 8,
-  },
-  label: {
-    marginTop: 6,
-    fontSize: 16,
-    fontWeight: '100',
-  },
-  previewContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    backgroundColor: 'aliceblue',
-  },
-  row: {
-    flex: 1,
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    marginBottom: 10,
-  },
-  input: {
-    borderBottomWidth: 1,
-    paddingVertical: 3,
-    width: 50,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-## Row Gap, Column Gap and Gap
-
-- [`rowGap`](layout-props#rowgap) sets the size of the gap (gutter) between an element's rows.
-
-- [`columnGap`](layout-props#columngap) sets the size of the gap (gutter) between an element's columns.
-
-- [`gap`](layout-props#gap) sets the size of the gap (gutter) between rows and columns. It is a shorthand for `rowGap` and `columnGap`.
-
-You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Row%20Gap%20and%20Column%20Gap&ext=js
-import React, {useState} from 'react';
-import {View, Text, StyleSheet, TextInput} from 'react-native';
-
-const RowGapAndColumnGap = () => {
-  const [rowGap, setRowGap] = useState(10);
-  const [columnGap, setColumnGap] = useState(10);
-
-  return (
-    <PreviewLayout
-      columnGap={columnGap}
-      handleColumnGapChange={setColumnGap}
-      rowGap={rowGap}
-      handleRowGapChange={setRowGap}>
-      <View style={[styles.box, styles.box1]} />
-      <View style={[styles.box, styles.box2]} />
-      <View style={[styles.box, styles.box3]} />
-      <View style={[styles.box, styles.box4]} />
-      <View style={[styles.box, styles.box5]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  children,
-  handleColumnGapChange,
-  handleRowGapChange,
-  rowGap,
-  columnGap,
-}) => (
-  <View style={styles.previewContainer}>
-    <View style={styles.inputContainer}>
-      <View style={styles.itemsCenter}>
-        <Text>Row Gap</Text>
-        <TextInput
-          style={styles.input}
-          value={rowGap}
-          onChangeText={v => handleRowGapChange(Number(v))}
-        />
-      </View>
-      <View style={styles.itemsCenter}>
-        <Text>Column Gap</Text>
-        <TextInput
-          style={styles.input}
-          value={columnGap}
-          onChangeText={v => handleColumnGapChange(Number(v))}
-        />
-      </View>
-    </View>
-    <View style={[styles.container, {rowGap, columnGap}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  itemsCenter: {alignItems: 'center'},
-  inputContainer: {
-    gap: 4,
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-  },
-  previewContainer: {padding: 10, flex: 1},
-  input: {
-    borderBottomWidth: 1,
-    paddingVertical: 3,
-    width: 50,
-    textAlign: 'center',
-  },
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-    flexWrap: 'wrap',
-    alignContent: 'flex-start',
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  box1: {
-    backgroundColor: 'orangered',
-  },
-  box2: {
-    backgroundColor: 'orange',
-  },
-  box3: {
-    backgroundColor: 'mediumseagreen',
-  },
-  box4: {
-    backgroundColor: 'deepskyblue',
-  },
-  box5: {
-    backgroundColor: 'mediumturquoise',
-  },
-});
-
-export default RowGapAndColumnGap;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Row%20Gap%20and%20Column%20Gap&ext=tsx
-import React, {useState} from 'react';
-import {View, Text, StyleSheet, TextInput} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const RowGapAndColumnGap = () => {
-  const [rowGap, setRowGap] = useState(10);
-  const [columnGap, setColumnGap] = useState(10);
-
-  return (
-    <PreviewLayout
-      columnGap={columnGap}
-      handleColumnGapChange={setColumnGap}
-      rowGap={rowGap}
-      handleRowGapChange={setRowGap}>
-      <View style={[styles.box, styles.box1]} />
-      <View style={[styles.box, styles.box2]} />
-      <View style={[styles.box, styles.box3]} />
-      <View style={[styles.box, styles.box4]} />
-      <View style={[styles.box, styles.box5]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  columnGap: number;
-  handleColumnGapChange: (gap: number) => void;
-  rowGap: number;
-  handleRowGapChange: (gap: number) => void;
-}>;
-
-const PreviewLayout = ({
-  children,
-  handleColumnGapChange,
-  handleRowGapChange,
-  rowGap,
-  columnGap,
-}: PreviewLayoutProps) => (
-  <View style={styles.previewContainer}>
-    <View style={styles.inputContainer}>
-      <View style={styles.itemsCenter}>
-        <Text>Row Gap</Text>
-        <TextInput
-          style={styles.input}
-          value={String(rowGap)}
-          onChangeText={v => handleRowGapChange(Number(v))}
-        />
-      </View>
-      <View style={styles.itemsCenter}>
-        <Text>Column Gap</Text>
-        <TextInput
-          style={styles.input}
-          value={String(columnGap)}
-          onChangeText={v => handleColumnGapChange(Number(v))}
-        />
-      </View>
-    </View>
-    <View style={[styles.container, {rowGap, columnGap}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  itemsCenter: {alignItems: 'center'},
-  inputContainer: {
-    gap: 4,
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-  },
-  previewContainer: {padding: 10, flex: 1},
-  input: {
-    borderBottomWidth: 1,
-    paddingVertical: 3,
-    width: 50,
-    textAlign: 'center',
-  },
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-    flexWrap: 'wrap',
-    alignContent: 'flex-start',
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  box1: {
-    backgroundColor: 'orangered',
-  },
-  box2: {
-    backgroundColor: 'orange',
-  },
-  box3: {
-    backgroundColor: 'mediumseagreen',
-  },
-  box4: {
-    backgroundColor: 'deepskyblue',
-  },
-  box5: {
-    backgroundColor: 'mediumturquoise',
-  },
-});
-
-export default RowGapAndColumnGap;
-```
-
-</TabItem>
-</Tabs>
-
-## Width and Height
-
-The `width` property specifies the width of an element's content area. Similarly, the `height` property specifies the height of an element's content area.
-
-Both `width` and `height` can take the following values:
-
-- `auto` (**default value**) React Native calculates the width/height for the element based on its content, whether that is other children, text, or an image.
-
-- `pixels` Defines the width/height in absolute pixels. Depending on other styles set on the component, this may or may not be the final dimension of the node.
-
-- `percentage` Defines the width or height in percentage of its parent's width or height, respectively.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Width%20and%20Height&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const WidthHeightBasics = () => {
-  const [widthType, setWidthType] = useState('auto');
-  const [heightType, setHeightType] = useState('auto');
-
-  return (
-    <PreviewLayout
-      widthType={widthType}
-      heightType={heightType}
-      widthValues={['auto', 300, '80%']}
-      heightValues={['auto', 200, '60%']}
-      setWidthType={setWidthType}
-      setHeightType={setHeightType}>
-      <View
-        style={{
-          alignSelf: 'flex-start',
-          backgroundColor: 'aliceblue',
-          height: heightType,
-          width: widthType,
-          padding: 15,
-        }}>
-        <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-        <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-        <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-      </View>
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  children,
-  widthType,
-  heightType,
-  widthValues,
-  heightValues,
-  setWidthType,
-  setHeightType,
-}) => (
-  <SafeAreaProvider>
-    <SafeAreaView style={{flex: 1, padding: 10}}>
-      <View style={styles.row}>
-        <Text style={styles.label}>width </Text>
-        {widthValues.map(value => (
-          <TouchableOpacity
-            key={value}
-            onPress={() => setWidthType(value)}
-            style={[styles.button, widthType === value && styles.selected]}>
-            <Text
-              style={[
-                styles.buttonLabel,
-                widthType === value && styles.selectedLabel,
-              ]}>
-              {value}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </View>
-      <View style={styles.row}>
-        <Text style={styles.label}>height </Text>
-        {heightValues.map(value => (
-          <TouchableOpacity
-            key={value}
-            onPress={() => setHeightType(value)}
-            style={[styles.button, heightType === value && styles.selected]}>
-            <Text
-              style={[
-                styles.buttonLabel,
-                heightType === value && styles.selectedLabel,
-              ]}>
-              {value}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </View>
-      {children}
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    padding: 8,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginRight: 10,
-    marginBottom: 10,
-  },
-  selected: {
-    backgroundColor: 'coral',
-    shadowOpacity: 0,
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default WidthHeightBasics;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Width%20and%20Height&ext=tsx
-import React, {useState, PropsWithChildren} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-type Dimension = 'auto' | `${number}%` | number;
-
-const WidthHeightBasics = () => {
-  const [widthType, setWidthType] = useState<Dimension>('auto');
-  const [heightType, setHeightType] = useState<Dimension>('auto');
-
-  return (
-    <PreviewLayout
-      widthType={widthType}
-      heightType={heightType}
-      widthValues={['auto', 300, '80%']}
-      heightValues={['auto', 200, '60%']}
-      setWidthType={setWidthType}
-      setHeightType={setHeightType}>
-      <View
-        style={{
-          alignSelf: 'flex-start',
-          backgroundColor: 'aliceblue',
-          height: heightType,
-          width: widthType,
-          padding: 15,
-        }}>
-        <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-        <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-        <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-      </View>
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  widthType: Dimension;
-  heightType: Dimension;
-  widthValues: Dimension[];
-  heightValues: Dimension[];
-  setWidthType: (value: Dimension) => void;
-  setHeightType: (value: Dimension) => void;
-}>;
-
-const PreviewLayout = ({
-  children,
-  widthType,
-  heightType,
-  widthValues,
-  heightValues,
-  setWidthType,
-  setHeightType,
-}: PreviewLayoutProps) => (
-  <SafeAreaProvider>
-    <SafeAreaView style={{flex: 1, padding: 10}}>
-      <View style={styles.row}>
-        <Text style={styles.label}>width </Text>
-        {widthValues.map(value => (
-          <TouchableOpacity
-            key={value}
-            onPress={() => setWidthType(value)}
-            style={[styles.button, widthType === value && styles.selected]}>
-            <Text
-              style={[
-                styles.buttonLabel,
-                widthType === value && styles.selectedLabel,
-              ]}>
-              {value}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </View>
-      <View style={styles.row}>
-        <Text style={styles.label}>height </Text>
-        {heightValues.map(value => (
-          <TouchableOpacity
-            key={value}
-            onPress={() => setHeightType(value)}
-            style={[styles.button, heightType === value && styles.selected]}>
-            <Text
-              style={[
-                styles.buttonLabel,
-                heightType === value && styles.selectedLabel,
-              ]}>
-              {value}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </View>
-      {children}
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    padding: 8,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginRight: 10,
-    marginBottom: 10,
-  },
-  selected: {
-    backgroundColor: 'coral',
-    shadowOpacity: 0,
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default WidthHeightBasics;
-```
-
-</TabItem>
-</Tabs>
-
-## Position
-
-The `position` type of an element defines how it is positioned relative to either itself, its parent, or its [containing block](./flexbox.md#the-containing-block).
-
-- `relative` (**default value**) By default, an element is positioned relatively. This means an element is positioned according to the normal flow of the layout, and then offset relative to that position based on the values of `top`, `right`, `bottom`, and `left`. The offset does not affect the position of any sibling or parent elements.
-
-- `absolute` When positioned absolutely, an element doesn't take part in the normal layout flow. It is instead laid out independent of its siblings. The position is determined based on the `top`, `right`, `bottom`, and `left` values. These values will position the element relative to its containing block.
-
-- `static` When positioned statically, an element is positioned according to the normal flow of layout, and will ignore the `top`, `right`, `bottom`, and `left` values. This `position` will also cause the element to not form a containing block for absolute descendants, unless some other superceding style prop is present (e.g. `transform`). This allows `absolute` elements to be positioned to something that is not their parent. Note that **`static` is only available on the New Architecture**.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Position&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const PositionLayout = () => {
-  const [position, setPosition] = useState('relative');
-
-  return (
-    <PreviewLayout
-      label="position"
-      selectedValue={position}
-      values={['relative', 'absolute', 'static']}
-      setSelectedValue={setPosition}>
-      <View
-        style={[
-          styles.box,
-          {
-            top: 25,
-            left: 25,
-            position,
-            backgroundColor: 'powderblue',
-          },
-        ]}
-      />
-      <View
-        style={[
-          styles.box,
-          {
-            top: 50,
-            left: 50,
-            position,
-            backgroundColor: 'skyblue',
-          },
-        ]}
-      />
-      <View
-        style={[
-          styles.box,
-          {
-            top: 75,
-            left: 75,
-            position,
-            backgroundColor: 'steelblue',
-          },
-        ]}
-      />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={styles.container}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default PositionLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Position&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const PositionLayout = () => {
-  const [position, setPosition] = useState<'relative' | 'absolute' | 'static'>(
-    'relative',
-  );
-
-  return (
-    <PreviewLayout
-      label="position"
-      selectedValue={position}
-      values={['relative', 'absolute', 'static']}
-      setSelectedValue={setPosition}>
-      <View
-        style={[
-          styles.box,
-          {
-            top: 25,
-            left: 25,
-            position,
-            backgroundColor: 'powderblue',
-          },
-        ]}
-      />
-      <View
-        style={[
-          styles.box,
-          {
-            top: 50,
-            left: 50,
-            position,
-            backgroundColor: 'skyblue',
-          },
-        ]}
-      />
-      <View
-        style={[
-          styles.box,
-          {
-            top: 75,
-            left: 75,
-            position,
-            backgroundColor: 'steelblue',
-          },
-        ]}
-      />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: Array<'relative' | 'absolute' | 'static'>;
-  selectedValue: string;
-  setSelectedValue: (value: 'relative' | 'absolute' | 'static') => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={styles.container}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default PositionLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## The Containing Block
-
-The containing block of an element is an ancestor element which controls its position and size.
-The way containing blocks work in React Native is very similar to [how they work on the web](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block), with some simplifications due to the lack of some web features.
-
-The `top`, `right`, `bottom`, and `left` values of an absolutely positioned element will be
-relative to its containing block.
-
-Percentage lengths (e.g.: `width: '50%'` or `padding: '10%'`) applied to absolutely positioned elements will be calculated relatively to the size of its containing block. For example, if the containing block is 100 points wide, then `width: 50%` on an absolutely positioned element will cause it to be 50 points wide.
-
-The following list will help you determine the containing block of any given element:
-
-- If that element has a `position` type of `relative` or `static`, then its containing block is its parent.
-- If that element has a `position` type of `absolute`, then its containing block is the nearest ancestor in which one of the following is true:
-  - It has a `position` type other than `static`
-  - It has a `transform`
-
-## Going Deeper
-
-Check out the interactive [yoga playground](https://www.yogalayout.dev/playground) that you can use to get a better understanding of flexbox.
-
-We've covered the basics, but there are many other styles you may need for layouts. The full list of props that control layout is documented [here](./layout-props.md).
-
-Additionally, you can see some examples from [Wix Engineers](https://medium.com/wix-engineering/the-full-react-native-layout-cheat-sheet-a4147802405c).
+---
+id: flexbox
+title: Layout with Flexbox
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+A component can specify the layout of its children using the Flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes.
+
+You will normally use a combination of `flexDirection`, `alignItems`, and `justifyContent` to achieve the right layout.
+
+:::caution
+Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions.
+The defaults are different, with `flexDirection` defaulting to `column` instead of `row`, `alignContent` defaulting to `flex-start` instead of `stretch`, `flexShrink` defaulting to `0` instead of `1`, the `flex` parameter only supporting a single number.
+:::
+
+## Flex
+
+[`flex`](layout-props#flex) will define how your items are going to **“fill”** over the available space along your main axis. Space will be divided according to each element's flex property.
+
+In the following example, the red, orange, and green views are all children in the container view that has `flex: 1` set. The red view uses `flex: 1` , the orange view uses `flex: 2`, and the green view uses `flex: 3` . **1+2+3 = 6**, which means that the red view will get `1/6` of the space, the orange `2/6` of the space, and the green `3/6` of the space.
+
+```SnackPlayer name=Flex%20Example
+import {StyleSheet, View} from 'react-native';
+
+const Flex = () => {
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          // Try setting `flexDirection` to `"row"`.
+          flexDirection: 'column',
+        },
+      ]}>
+      <View style={{flex: 1, backgroundColor: 'red'}} />
+      <View style={{flex: 2, backgroundColor: 'darkorange'}} />
+      <View style={{flex: 3, backgroundColor: 'green'}} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+  },
+});
+
+export default Flex;
+```
+
+## Flex Direction
+
+[`flexDirection`](layout-props#flexdirection) controls the direction in which the children of a node are laid out. This is also referred to as the main axis. The cross axis is the axis perpendicular to the main axis, or the axis which the wrapping lines are laid out in.
+
+- `column` (**default value**) Align children from top to bottom. If wrapping is enabled, then the next line will start to the right of the first item on the top of the container.
+
+- `row` Align children from left to right. If wrapping is enabled, then the next line will start under the first item on the left of the container.
+
+- `column-reverse` Align children from bottom to top. If wrapping is enabled, then the next line will start to the right of the first item on the bottom of the container.
+
+- `row-reverse` Align children from right to left. If wrapping is enabled, then the next line will start under the first item on the right of the container.
+
+You can learn more [here](https://www.yogalayout.dev/docs/styling/flex-direction).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Flex%20Direction&ext=js
+import {useState} from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+
+const FlexDirectionBasics = () => {
+  const [flexDirection, setflexDirection] = useState('column');
+
+  return (
+    <PreviewLayout
+      label="flexDirection"
+      values={['column', 'row', 'column-reverse', 'row-reverse']}
+      selectedValue={flexDirection}
+      setSelectedValue={setflexDirection}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default FlexDirectionBasics;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Flex%20Direction&ext=tsx
+import {useState} from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const FlexDirectionBasics = () => {
+  const [flexDirection, setflexDirection] = useState('column');
+
+  return (
+    <PreviewLayout
+      label="flexDirection"
+      values={['column', 'row', 'column-reverse', 'row-reverse']}
+      selectedValue={flexDirection}
+      setSelectedValue={setflexDirection}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default FlexDirectionBasics;
+```
+
+</TabItem>
+</Tabs>
+
+## Layout Direction
+
+Layout [`direction`](layout-props#direction) specifies the direction in which children and text in a hierarchy should be laid out. Layout direction also affects what edge `start` and `end` refer to. By default, React Native lays out with LTR layout direction. In this mode `start` refers to left and `end` refers to right.
+
+- `LTR` (**default value**) Text and children are laid out from left to right. Margin and padding applied to the start of an element are applied on the left side.
+
+- `RTL` Text and children are laid out from right to left. Margin and padding applied to the start of an element are applied on the right side.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Flex%20Direction&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const DirectionLayout = () => {
+  const [direction, setDirection] = useState('ltr');
+
+  return (
+    <PreviewLayout
+      label="direction"
+      selectedValue={direction}
+      values={['ltr', 'rtl']}
+      setSelectedValue={setDirection}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default DirectionLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Flex%20Direction&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const DirectionLayout = () => {
+  const [direction, setDirection] = useState('ltr');
+
+  return (
+    <PreviewLayout
+      label="direction"
+      selectedValue={direction}
+      values={['ltr', 'rtl']}
+      setSelectedValue={setDirection}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default DirectionLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## Justify Content
+
+[`justifyContent`](layout-props#justifycontent) describes how to align children within the main axis of their container. For example, you can use this property to center a child horizontally within a container with `flexDirection` set to `row` or vertically within a container with `flexDirection` set to `column`.
+
+- `flex-start`(**default value**) Align children of a container to the start of the container's main axis.
+
+- `flex-end` Align children of a container to the end of the container's main axis.
+
+- `center` Align children of a container in the center of the container's main axis.
+
+- `space-between` Evenly space off children across the container's main axis, distributing the remaining space between the children.
+
+- `space-around` Evenly space off children across the container's main axis, distributing the remaining space around the children. Compared to `space-between`, using `space-around` will result in space being distributed to the beginning of the first child and end of the last child.
+
+- `space-evenly` Evenly distribute children within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.
+
+You can learn more [here](https://www.yogalayout.dev/docs/styling/justify-content).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Justify%20Content&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const JustifyContentBasics = () => {
+  const [justifyContent, setJustifyContent] = useState('flex-start');
+
+  return (
+    <PreviewLayout
+      label="justifyContent"
+      selectedValue={justifyContent}
+      values={[
+        'flex-start',
+        'flex-end',
+        'center',
+        'space-between',
+        'space-around',
+        'space-evenly',
+      ]}
+      setSelectedValue={setJustifyContent}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default JustifyContentBasics;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Justify%20Content&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const JustifyContentBasics = () => {
+  const [justifyContent, setJustifyContent] = useState('flex-start');
+
+  return (
+    <PreviewLayout
+      label="justifyContent"
+      selectedValue={justifyContent}
+      values={[
+        'flex-start',
+        'flex-end',
+        'center',
+        'space-between',
+        'space-around',
+        'space-evenly',
+      ]}
+      setSelectedValue={setJustifyContent}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default JustifyContentBasics;
+```
+
+</TabItem>
+</Tabs>
+
+## Align Items
+
+[`alignItems`](layout-props#alignitems) describes how to align children along the cross axis of their container. It is very similar to `justifyContent` but instead of applying to the main axis, `alignItems` applies to the cross axis.
+
+- `stretch` (**default value**) Stretch children of a container to match the `height` of the container's cross axis.
+
+- `flex-start` Align children of a container to the start of the container's cross axis.
+
+- `flex-end` Align children of a container to the end of the container's cross axis.
+
+- `center` Align children of a container in the center of the container's cross axis.
+
+- `baseline` Align children of a container along a common baseline. Individual children can be set to be the reference baseline for their parents.
+
+:::info
+For `stretch` to have an effect, children must not have a fixed dimension along the secondary axis. In the following example, setting `alignItems: stretch` does nothing until the `width: 50` is removed from the children.
+:::
+
+You can learn more [here](https://www.yogalayout.dev/docs/styling/align-items-self).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Align%20Items&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const AlignItemsLayout = () => {
+  const [alignItems, setAlignItems] = useState('stretch');
+
+  return (
+    <PreviewLayout
+      label="alignItems"
+      selectedValue={alignItems}
+      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
+      setSelectedValue={setAlignItems}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View
+        style={[
+          styles.box,
+          {
+            backgroundColor: 'steelblue',
+            width: 'auto',
+            minWidth: 50,
+          },
+        ]}
+      />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignItemsLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Align%20Items&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const AlignItemsLayout = () => {
+  const [alignItems, setAlignItems] = useState('stretch');
+
+  return (
+    <PreviewLayout
+      label="alignItems"
+      selectedValue={alignItems}
+      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
+      setSelectedValue={setAlignItems}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View
+        style={[
+          styles.box,
+          {
+            backgroundColor: 'steelblue',
+            width: 'auto',
+            minWidth: 50,
+          },
+        ]}
+      />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignItemsLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## Align Self
+
+[`alignSelf`](layout-props#alignself) has the same options and effect as `alignItems` but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent. `alignSelf` overrides any option set by the parent with `alignItems`.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Align%20Self&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const AlignSelfLayout = () => {
+  const [alignSelf, setAlignSelf] = useState('stretch');
+
+  return (
+    <PreviewLayout
+      label="alignSelf"
+      selectedValue={alignSelf}
+      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
+      setSelectedValue={setAlignSelf}>
+      <View
+        style={[
+          styles.box,
+          {
+            alignSelf,
+            width: 'auto',
+            minWidth: 50,
+            backgroundColor: 'powderblue',
+          },
+        ]}
+      />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={styles.container}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignSelfLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Align%20Self&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+import type {FlexAlignType} from 'react-native';
+
+const AlignSelfLayout = () => {
+  const [alignSelf, setAlignSelf] = useState<FlexAlignType>('stretch');
+
+  return (
+    <PreviewLayout
+      label="alignSelf"
+      selectedValue={alignSelf}
+      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
+      setSelectedValue={setAlignSelf}>
+      <View
+        style={[
+          styles.box,
+          {
+            alignSelf,
+            width: 'auto',
+            minWidth: 50,
+            backgroundColor: 'powderblue',
+          },
+        ]}
+      />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: FlexAlignType[];
+  selectedValue: string;
+  setSelectedValue: (value: FlexAlignType) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={styles.container}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignSelfLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## Align Content
+
+[alignContent](layout-props#aligncontent) defines the distribution of lines along the cross-axis. This only has effect when items are wrapped to multiple lines using `flexWrap`.
+
+- `flex-start` (**default value**) Align wrapped lines to the start of the container's cross axis.
+
+- `flex-end` Align wrapped lines to the end of the container's cross axis.
+
+- `stretch` (_default value when using Yoga on the web_) Stretch wrapped lines to match the height of the container's cross axis.
+
+- `center` Align wrapped lines in the center of the container's cross axis.
+
+- `space-between` Evenly space wrapped lines across the container's cross axis, distributing the remaining space between the lines.
+
+- `space-around` Evenly space wrapped lines across the container's cross axis, distributing the remaining space around the lines. Each end of the container has a half-sized space compared to the space between items.
+
+- `space-evenly` Evenly space wrapped lines across the container's cross axis, distributing the remaining space around the lines. Each space is the same size.
+
+You can learn more [here](https://www.yogalayout.dev/docs/styling/align-content).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Align%20Content&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const AlignContentLayout = () => {
+  const [alignContent, setAlignContent] = useState('flex-start');
+
+  return (
+    <PreviewLayout
+      label="alignContent"
+      selectedValue={alignContent}
+      values={[
+        'flex-start',
+        'flex-end',
+        'stretch',
+        'center',
+        'space-between',
+        'space-around',
+      ]}
+      setSelectedValue={setAlignContent}>
+      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
+      <View style={[styles.box, {backgroundColor: 'orange'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
+      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'purple'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexWrap: 'wrap',
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignContentLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Align%20Content&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const AlignContentLayout = () => {
+  const [alignContent, setAlignContent] = useState('flex-start');
+
+  return (
+    <PreviewLayout
+      label="alignContent"
+      selectedValue={alignContent}
+      values={[
+        'flex-start',
+        'flex-end',
+        'stretch',
+        'center',
+        'space-between',
+        'space-around',
+      ]}
+      setSelectedValue={setAlignContent}>
+      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
+      <View style={[styles.box, {backgroundColor: 'orange'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
+      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'purple'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexWrap: 'wrap',
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignContentLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## Flex Wrap
+
+The [`flexWrap`](layout-props#flexwrap) property is set on containers and it controls what happens when children overflow the size of the container along the main axis. By default, children are forced into a single line (which can shrink elements). If wrapping is allowed, items are wrapped into multiple lines along the main axis if needed.
+
+When wrapping lines, `alignContent` can be used to specify how the lines are placed in the container. Learn more [here](https://www.yogalayout.dev/docs/styling/flex-wrap).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Flex%20Wrap&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const FlexWrapLayout = () => {
+  const [flexWrap, setFlexWrap] = useState('wrap');
+
+  return (
+    <PreviewLayout
+      label="flexWrap"
+      selectedValue={flexWrap}
+      values={['wrap', 'nowrap']}
+      setSelectedValue={setFlexWrap}>
+      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
+      <View style={[styles.box, {backgroundColor: 'orange'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
+      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'purple'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default FlexWrapLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Flex%20Wrap&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const FlexWrapLayout = () => {
+  const [flexWrap, setFlexWrap] = useState('wrap');
+
+  return (
+    <PreviewLayout
+      label="flexWrap"
+      selectedValue={flexWrap}
+      values={['wrap', 'nowrap']}
+      setSelectedValue={setFlexWrap}>
+      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
+      <View style={[styles.box, {backgroundColor: 'orange'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
+      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'purple'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default FlexWrapLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## Flex Basis, Grow, and Shrink
+
+- [`flexBasis`](layout-props#flexbasis) is an axis-independent way of providing the default size of an item along the main axis. Setting the `flexBasis` of a child is similar to setting the `width` of that child if its parent is a container with `flexDirection: row` or setting the `height` of a child if its parent is a container with `flexDirection: column`. The `flexBasis` of an item is the default size of that item, the size of the item before any `flexGrow` and `flexShrink` calculations are performed.
+
+- [`flexGrow`](layout-props#flexgrow) describes how much space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
+
+  `flexGrow` accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the children’s `flexGrow` values.
+
+- [`flexShrink`](layout-props#flexshrink) describes how to shrink children along the main axis in the case in which the total size of the children overflows the size of the container on the main axis. `flexShrink` is very similar to `flexGrow` and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed.
+
+  `flexShrink` accepts any floating point value >= 0, with 0 being the default value (on the web, the default is 1). A container will shrink its children weighted by the children’s `flexShrink` values.
+
+You can learn more [here](https://www.yogalayout.dev/docs/styling/flex-basis-grow-shrink).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink&ext=js
+import {useState} from 'react';
+import {View, Text, TextInput, StyleSheet} from 'react-native';
+
+const App = () => {
+  const [powderblue, setPowderblue] = useState({
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: 'auto',
+  });
+  const [skyblue, setSkyblue] = useState({
+    flexGrow: 1,
+    flexShrink: 0,
+    flexBasis: 100,
+  });
+  const [steelblue, setSteelblue] = useState({
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: 200,
+  });
+  return (
+    <View style={styles.container}>
+      <View
+        style={[
+          styles.container,
+          {
+            flexDirection: 'row',
+            alignContent: 'space-between',
+          },
+        ]}>
+        <BoxInfo color="powderblue" {...powderblue} setStyle={setPowderblue} />
+        <BoxInfo color="skyblue" {...skyblue} setStyle={setSkyblue} />
+        <BoxInfo color="steelblue" {...steelblue} setStyle={setSteelblue} />
+      </View>
+      <View style={styles.previewContainer}>
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: powderblue.flexBasis,
+              flexGrow: powderblue.flexGrow,
+              flexShrink: powderblue.flexShrink,
+              backgroundColor: 'powderblue',
+            },
+          ]}
+        />
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: skyblue.flexBasis,
+              flexGrow: skyblue.flexGrow,
+              flexShrink: skyblue.flexShrink,
+              backgroundColor: 'skyblue',
+            },
+          ]}
+        />
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: steelblue.flexBasis,
+              flexGrow: steelblue.flexGrow,
+              flexShrink: steelblue.flexShrink,
+              backgroundColor: 'steelblue',
+            },
+          ]}
+        />
+      </View>
+    </View>
+  );
+};
+
+const BoxInfo = ({color, flexBasis, flexShrink, setStyle, flexGrow}) => (
+  <View style={[styles.row, {flexDirection: 'column'}]}>
+    <View
+      style={[
+        styles.boxLabel,
+        {
+          backgroundColor: color,
+        },
+      ]}>
+      <Text
+        style={{
+          color: '#fff',
+          fontWeight: '500',
+          textAlign: 'center',
+        }}>
+        Box
+      </Text>
+    </View>
+    <Text style={styles.label}>flexBasis</Text>
+    <TextInput
+      value={flexBasis}
+      style={styles.input}
+      onChangeText={fB =>
+        setStyle(value => ({
+          ...value,
+          flexBasis: isNaN(parseInt(fB, 10)) ? 'auto' : parseInt(fB, 10),
+        }))
+      }
+    />
+    <Text style={styles.label}>flexShrink</Text>
+    <TextInput
+      value={flexShrink}
+      style={styles.input}
+      onChangeText={fS =>
+        setStyle(value => ({
+          ...value,
+          flexShrink: isNaN(parseInt(fS, 10)) ? undefined : parseInt(fS, 10),
+        }))
+      }
+    />
+    <Text style={styles.label}>flexGrow</Text>
+    <TextInput
+      value={flexGrow}
+      style={styles.input}
+      onChangeText={fG =>
+        setStyle(value => ({
+          ...value,
+          flexGrow: isNaN(parseInt(fG, 10)) ? undefined : parseInt(fG, 10),
+        }))
+      }
+    />
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 10,
+  },
+  box: {
+    flex: 1,
+    height: 50,
+    width: 50,
+  },
+  boxLabel: {
+    minWidth: 80,
+    padding: 8,
+    borderRadius: 4,
+    marginTop: 8,
+  },
+  label: {
+    marginTop: 6,
+    fontSize: 16,
+    fontWeight: '100',
+  },
+  previewContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    backgroundColor: 'aliceblue',
+  },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  input: {
+    borderBottomWidth: 1,
+    paddingVertical: 3,
+    width: 50,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink&ext=tsx
+import {useState, type Dispatch, type SetStateAction} from 'react';
+import {View, Text, TextInput, StyleSheet} from 'react-native';
+import type {ViewStyle} from 'react-native';
+
+const App = () => {
+  const [powderblue, setPowderblue] = useState<ViewStyle>({
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: 'auto',
+  });
+  const [skyblue, setSkyblue] = useState<ViewStyle>({
+    flexGrow: 1,
+    flexShrink: 0,
+    flexBasis: 100,
+  });
+  const [steelblue, setSteelblue] = useState<ViewStyle>({
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: 200,
+  });
+  return (
+    <View style={styles.container}>
+      <View
+        style={[
+          styles.container,
+          {
+            flexDirection: 'row',
+            alignContent: 'space-between',
+          },
+        ]}>
+        <BoxInfo color="powderblue" {...powderblue} setStyle={setPowderblue} />
+        <BoxInfo color="skyblue" {...skyblue} setStyle={setSkyblue} />
+        <BoxInfo color="steelblue" {...steelblue} setStyle={setSteelblue} />
+      </View>
+      <View style={styles.previewContainer}>
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: powderblue.flexBasis,
+              flexGrow: powderblue.flexGrow,
+              flexShrink: powderblue.flexShrink,
+              backgroundColor: 'powderblue',
+            },
+          ]}
+        />
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: skyblue.flexBasis,
+              flexGrow: skyblue.flexGrow,
+              flexShrink: skyblue.flexShrink,
+              backgroundColor: 'skyblue',
+            },
+          ]}
+        />
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: steelblue.flexBasis,
+              flexGrow: steelblue.flexGrow,
+              flexShrink: steelblue.flexShrink,
+              backgroundColor: 'steelblue',
+            },
+          ]}
+        />
+      </View>
+    </View>
+  );
+};
+
+type BoxInfoProps = ViewStyle & {
+  color: string;
+  setStyle: Dispatch<SetStateAction<ViewStyle>>;
+};
+
+const BoxInfo = ({
+  color,
+  flexBasis,
+  flexShrink,
+  setStyle,
+  flexGrow,
+}: BoxInfoProps) => (
+  <View style={[styles.row, {flexDirection: 'column'}]}>
+    <View
+      style={[
+        styles.boxLabel,
+        {
+          backgroundColor: color,
+        },
+      ]}>
+      <Text
+        style={{
+          color: '#fff',
+          fontWeight: '500',
+          textAlign: 'center',
+        }}>
+        Box
+      </Text>
+    </View>
+    <Text style={styles.label}>flexBasis</Text>
+    <TextInput
+      value={String(flexBasis)}
+      style={styles.input}
+      onChangeText={fB =>
+        setStyle(value => ({
+          ...value,
+          flexBasis: isNaN(parseInt(fB, 10)) ? 'auto' : parseInt(fB, 10),
+        }))
+      }
+    />
+    <Text style={styles.label}>flexShrink</Text>
+    <TextInput
+      value={String(flexShrink)}
+      style={styles.input}
+      onChangeText={fS =>
+        setStyle(value => ({
+          ...value,
+          flexShrink: isNaN(parseInt(fS, 10)) ? undefined : parseInt(fS, 10),
+        }))
+      }
+    />
+    <Text style={styles.label}>flexGrow</Text>
+    <TextInput
+      value={String(flexGrow)}
+      style={styles.input}
+      onChangeText={fG =>
+        setStyle(value => ({
+          ...value,
+          flexGrow: isNaN(parseInt(fG, 10)) ? undefined : parseInt(fG, 10),
+        }))
+      }
+    />
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 10,
+  },
+  box: {
+    flex: 1,
+    height: 50,
+    width: 50,
+  },
+  boxLabel: {
+    minWidth: 80,
+    padding: 8,
+    borderRadius: 4,
+    marginTop: 8,
+  },
+  label: {
+    marginTop: 6,
+    fontSize: 16,
+    fontWeight: '100',
+  },
+  previewContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    backgroundColor: 'aliceblue',
+  },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  input: {
+    borderBottomWidth: 1,
+    paddingVertical: 3,
+    width: 50,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+## Row Gap, Column Gap and Gap
+
+- [`rowGap`](layout-props#rowgap) sets the size of the gap (gutter) between an element's rows.
+
+- [`columnGap`](layout-props#columngap) sets the size of the gap (gutter) between an element's columns.
+
+- [`gap`](layout-props#gap) sets the size of the gap (gutter) between rows and columns. It is a shorthand for `rowGap` and `columnGap`.
+
+You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Row%20Gap%20and%20Column%20Gap&ext=js
+import {useState} from 'react';
+import {View, Text, StyleSheet, TextInput} from 'react-native';
+
+const RowGapAndColumnGap = () => {
+  const [rowGap, setRowGap] = useState(10);
+  const [columnGap, setColumnGap] = useState(10);
+
+  return (
+    <PreviewLayout
+      columnGap={columnGap}
+      handleColumnGapChange={setColumnGap}
+      rowGap={rowGap}
+      handleRowGapChange={setRowGap}>
+      <View style={[styles.box, styles.box1]} />
+      <View style={[styles.box, styles.box2]} />
+      <View style={[styles.box, styles.box3]} />
+      <View style={[styles.box, styles.box4]} />
+      <View style={[styles.box, styles.box5]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  children,
+  handleColumnGapChange,
+  handleRowGapChange,
+  rowGap,
+  columnGap,
+}) => (
+  <View style={styles.previewContainer}>
+    <View style={styles.inputContainer}>
+      <View style={styles.itemsCenter}>
+        <Text>Row Gap</Text>
+        <TextInput
+          style={styles.input}
+          value={rowGap}
+          onChangeText={v => handleRowGapChange(Number(v))}
+        />
+      </View>
+      <View style={styles.itemsCenter}>
+        <Text>Column Gap</Text>
+        <TextInput
+          style={styles.input}
+          value={columnGap}
+          onChangeText={v => handleColumnGapChange(Number(v))}
+        />
+      </View>
+    </View>
+    <View style={[styles.container, {rowGap, columnGap}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  itemsCenter: {alignItems: 'center'},
+  inputContainer: {
+    gap: 4,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+  previewContainer: {padding: 10, flex: 1},
+  input: {
+    borderBottomWidth: 1,
+    paddingVertical: 3,
+    width: 50,
+    textAlign: 'center',
+  },
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+    flexWrap: 'wrap',
+    alignContent: 'flex-start',
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  box1: {
+    backgroundColor: 'orangered',
+  },
+  box2: {
+    backgroundColor: 'orange',
+  },
+  box3: {
+    backgroundColor: 'mediumseagreen',
+  },
+  box4: {
+    backgroundColor: 'deepskyblue',
+  },
+  box5: {
+    backgroundColor: 'mediumturquoise',
+  },
+});
+
+export default RowGapAndColumnGap;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Row%20Gap%20and%20Column%20Gap&ext=tsx
+import {useState} from 'react';
+import {View, Text, StyleSheet, TextInput} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const RowGapAndColumnGap = () => {
+  const [rowGap, setRowGap] = useState(10);
+  const [columnGap, setColumnGap] = useState(10);
+
+  return (
+    <PreviewLayout
+      columnGap={columnGap}
+      handleColumnGapChange={setColumnGap}
+      rowGap={rowGap}
+      handleRowGapChange={setRowGap}>
+      <View style={[styles.box, styles.box1]} />
+      <View style={[styles.box, styles.box2]} />
+      <View style={[styles.box, styles.box3]} />
+      <View style={[styles.box, styles.box4]} />
+      <View style={[styles.box, styles.box5]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  columnGap: number;
+  handleColumnGapChange: (gap: number) => void;
+  rowGap: number;
+  handleRowGapChange: (gap: number) => void;
+}>;
+
+const PreviewLayout = ({
+  children,
+  handleColumnGapChange,
+  handleRowGapChange,
+  rowGap,
+  columnGap,
+}: PreviewLayoutProps) => (
+  <View style={styles.previewContainer}>
+    <View style={styles.inputContainer}>
+      <View style={styles.itemsCenter}>
+        <Text>Row Gap</Text>
+        <TextInput
+          style={styles.input}
+          value={String(rowGap)}
+          onChangeText={v => handleRowGapChange(Number(v))}
+        />
+      </View>
+      <View style={styles.itemsCenter}>
+        <Text>Column Gap</Text>
+        <TextInput
+          style={styles.input}
+          value={String(columnGap)}
+          onChangeText={v => handleColumnGapChange(Number(v))}
+        />
+      </View>
+    </View>
+    <View style={[styles.container, {rowGap, columnGap}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  itemsCenter: {alignItems: 'center'},
+  inputContainer: {
+    gap: 4,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+  previewContainer: {padding: 10, flex: 1},
+  input: {
+    borderBottomWidth: 1,
+    paddingVertical: 3,
+    width: 50,
+    textAlign: 'center',
+  },
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+    flexWrap: 'wrap',
+    alignContent: 'flex-start',
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  box1: {
+    backgroundColor: 'orangered',
+  },
+  box2: {
+    backgroundColor: 'orange',
+  },
+  box3: {
+    backgroundColor: 'mediumseagreen',
+  },
+  box4: {
+    backgroundColor: 'deepskyblue',
+  },
+  box5: {
+    backgroundColor: 'mediumturquoise',
+  },
+});
+
+export default RowGapAndColumnGap;
+```
+
+</TabItem>
+</Tabs>
+
+## Width and Height
+
+The `width` property specifies the width of an element's content area. Similarly, the `height` property specifies the height of an element's content area.
+
+Both `width` and `height` can take the following values:
+
+- `auto` (**default value**) React Native calculates the width/height for the element based on its content, whether that is other children, text, or an image.
+
+- `pixels` Defines the width/height in absolute pixels. Depending on other styles set on the component, this may or may not be the final dimension of the node.
+
+- `percentage` Defines the width or height in percentage of its parent's width or height, respectively.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Width%20and%20Height&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const WidthHeightBasics = () => {
+  const [widthType, setWidthType] = useState('auto');
+  const [heightType, setHeightType] = useState('auto');
+
+  return (
+    <PreviewLayout
+      widthType={widthType}
+      heightType={heightType}
+      widthValues={['auto', 300, '80%']}
+      heightValues={['auto', 200, '60%']}
+      setWidthType={setWidthType}
+      setHeightType={setHeightType}>
+      <View
+        style={{
+          alignSelf: 'flex-start',
+          backgroundColor: 'aliceblue',
+          height: heightType,
+          width: widthType,
+          padding: 15,
+        }}>
+        <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+        <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+        <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+      </View>
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  children,
+  widthType,
+  heightType,
+  widthValues,
+  heightValues,
+  setWidthType,
+  setHeightType,
+}) => (
+  <SafeAreaProvider>
+    <SafeAreaView style={{flex: 1, padding: 10}}>
+      <View style={styles.row}>
+        <Text style={styles.label}>width </Text>
+        {widthValues.map(value => (
+          <TouchableOpacity
+            key={value}
+            onPress={() => setWidthType(value)}
+            style={[styles.button, widthType === value && styles.selected]}>
+            <Text
+              style={[
+                styles.buttonLabel,
+                widthType === value && styles.selectedLabel,
+              ]}>
+              {value}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+      <View style={styles.row}>
+        <Text style={styles.label}>height </Text>
+        {heightValues.map(value => (
+          <TouchableOpacity
+            key={value}
+            onPress={() => setHeightType(value)}
+            style={[styles.button, heightType === value && styles.selected]}>
+            <Text
+              style={[
+                styles.buttonLabel,
+                heightType === value && styles.selectedLabel,
+              ]}>
+              {value}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+      {children}
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    padding: 8,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginRight: 10,
+    marginBottom: 10,
+  },
+  selected: {
+    backgroundColor: 'coral',
+    shadowOpacity: 0,
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default WidthHeightBasics;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Width%20and%20Height&ext=tsx
+import {useState, PropsWithChildren} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+type Dimension = 'auto' | `${number}%` | number;
+
+const WidthHeightBasics = () => {
+  const [widthType, setWidthType] = useState<Dimension>('auto');
+  const [heightType, setHeightType] = useState<Dimension>('auto');
+
+  return (
+    <PreviewLayout
+      widthType={widthType}
+      heightType={heightType}
+      widthValues={['auto', 300, '80%']}
+      heightValues={['auto', 200, '60%']}
+      setWidthType={setWidthType}
+      setHeightType={setHeightType}>
+      <View
+        style={{
+          alignSelf: 'flex-start',
+          backgroundColor: 'aliceblue',
+          height: heightType,
+          width: widthType,
+          padding: 15,
+        }}>
+        <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+        <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+        <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+      </View>
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  widthType: Dimension;
+  heightType: Dimension;
+  widthValues: Dimension[];
+  heightValues: Dimension[];
+  setWidthType: (value: Dimension) => void;
+  setHeightType: (value: Dimension) => void;
+}>;
+
+const PreviewLayout = ({
+  children,
+  widthType,
+  heightType,
+  widthValues,
+  heightValues,
+  setWidthType,
+  setHeightType,
+}: PreviewLayoutProps) => (
+  <SafeAreaProvider>
+    <SafeAreaView style={{flex: 1, padding: 10}}>
+      <View style={styles.row}>
+        <Text style={styles.label}>width </Text>
+        {widthValues.map(value => (
+          <TouchableOpacity
+            key={value}
+            onPress={() => setWidthType(value)}
+            style={[styles.button, widthType === value && styles.selected]}>
+            <Text
+              style={[
+                styles.buttonLabel,
+                widthType === value && styles.selectedLabel,
+              ]}>
+              {value}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+      <View style={styles.row}>
+        <Text style={styles.label}>height </Text>
+        {heightValues.map(value => (
+          <TouchableOpacity
+            key={value}
+            onPress={() => setHeightType(value)}
+            style={[styles.button, heightType === value && styles.selected]}>
+            <Text
+              style={[
+                styles.buttonLabel,
+                heightType === value && styles.selectedLabel,
+              ]}>
+              {value}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+      {children}
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    padding: 8,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginRight: 10,
+    marginBottom: 10,
+  },
+  selected: {
+    backgroundColor: 'coral',
+    shadowOpacity: 0,
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default WidthHeightBasics;
+```
+
+</TabItem>
+</Tabs>
+
+## Position
+
+The `position` type of an element defines how it is positioned relative to either itself, its parent, or its [containing block](./flexbox.md#the-containing-block).
+
+- `relative` (**default value**) By default, an element is positioned relatively. This means an element is positioned according to the normal flow of the layout, and then offset relative to that position based on the values of `top`, `right`, `bottom`, and `left`. The offset does not affect the position of any sibling or parent elements.
+
+- `absolute` When positioned absolutely, an element doesn't take part in the normal layout flow. It is instead laid out independent of its siblings. The position is determined based on the `top`, `right`, `bottom`, and `left` values. These values will position the element relative to its containing block.
+
+- `static` When positioned statically, an element is positioned according to the normal flow of layout, and will ignore the `top`, `right`, `bottom`, and `left` values. This `position` will also cause the element to not form a containing block for absolute descendants, unless some other superceding style prop is present (e.g. `transform`). This allows `absolute` elements to be positioned to something that is not their parent. Note that **`static` is only available on the New Architecture**.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Position&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const PositionLayout = () => {
+  const [position, setPosition] = useState('relative');
+
+  return (
+    <PreviewLayout
+      label="position"
+      selectedValue={position}
+      values={['relative', 'absolute', 'static']}
+      setSelectedValue={setPosition}>
+      <View
+        style={[
+          styles.box,
+          {
+            top: 25,
+            left: 25,
+            position,
+            backgroundColor: 'powderblue',
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.box,
+          {
+            top: 50,
+            left: 50,
+            position,
+            backgroundColor: 'skyblue',
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.box,
+          {
+            top: 75,
+            left: 75,
+            position,
+            backgroundColor: 'steelblue',
+          },
+        ]}
+      />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={styles.container}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default PositionLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Position&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const PositionLayout = () => {
+  const [position, setPosition] = useState<'relative' | 'absolute' | 'static'>(
+    'relative',
+  );
+
+  return (
+    <PreviewLayout
+      label="position"
+      selectedValue={position}
+      values={['relative', 'absolute', 'static']}
+      setSelectedValue={setPosition}>
+      <View
+        style={[
+          styles.box,
+          {
+            top: 25,
+            left: 25,
+            position,
+            backgroundColor: 'powderblue',
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.box,
+          {
+            top: 50,
+            left: 50,
+            position,
+            backgroundColor: 'skyblue',
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.box,
+          {
+            top: 75,
+            left: 75,
+            position,
+            backgroundColor: 'steelblue',
+          },
+        ]}
+      />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: Array<'relative' | 'absolute' | 'static'>;
+  selectedValue: string;
+  setSelectedValue: (value: 'relative' | 'absolute' | 'static') => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={styles.container}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default PositionLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## The Containing Block
+
+The containing block of an element is an ancestor element which controls its position and size.
+The way containing blocks work in React Native is very similar to [how they work on the web](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block), with some simplifications due to the lack of some web features.
+
+The `top`, `right`, `bottom`, and `left` values of an absolutely positioned element will be
+relative to its containing block.
+
+Percentage lengths (e.g.: `width: '50%'` or `padding: '10%'`) applied to absolutely positioned elements will be calculated relatively to the size of its containing block. For example, if the containing block is 100 points wide, then `width: 50%` on an absolutely positioned element will cause it to be 50 points wide.
+
+The following list will help you determine the containing block of any given element:
+
+- If that element has a `position` type of `relative` or `static`, then its containing block is its parent.
+- If that element has a `position` type of `absolute`, then its containing block is the nearest ancestor in which one of the following is true:
+  - It has a `position` type other than `static`
+  - It has a `transform`
+
+## Going Deeper
+
+Check out the interactive [yoga playground](https://www.yogalayout.dev/playground) that you can use to get a better understanding of flexbox.
+
+We've covered the basics, but there are many other styles you may need for layouts. The full list of props that control layout is documented [here](./layout-props.md).
+
+Additionally, you can see some examples from [Wix Engineers](https://medium.com/wix-engineering/the-full-react-native-layout-cheat-sheet-a4147802405c).
diff --git a/website/versioned_docs/version-0.80/handling-text-input.md b/website/versioned_docs/version-0.80/handling-text-input.md
index 2345d089c7e..32b778af713 100644
--- a/website/versioned_docs/version-0.80/handling-text-input.md
+++ b/website/versioned_docs/version-0.80/handling-text-input.md
@@ -1,46 +1,46 @@
----
-id: handling-text-input
-title: Handling Text Input
----
-
-[`TextInput`](textinput#content) is a [Core Component](intro-react-native-components) that allows the user to enter text. It has an `onChangeText` prop that takes a function to be called every time the text changed, and an `onSubmitEditing` prop that takes a function to be called when the text is submitted.
-
-For example, let's say that as the user types, you're translating their words into a different language. In this new language, every single word is written the same way: 🍕. So the sentence "Hello there Bob" would be translated as "🍕 🍕 🍕".
-
-```SnackPlayer name=Handling%20Text%20Input
-import React, {useState} from 'react';
-import {Text, TextInput, View} from 'react-native';
-
-const PizzaTranslator = () => {
-  const [text, setText] = useState('');
-  return (
-    <View style={{flex: 1, justifyContent: 'center'}}>
-      <TextInput
-        placeholder="Type here to translate!"
-        onChangeText={newText => setText(newText)}
-        defaultValue={text}
-        style={{
-          height: 40,
-          padding: 5,
-          marginHorizontal: 8,
-          borderWidth: 1,
-        }}
-      />
-      <Text style={{padding: 10, fontSize: 42}}>
-        {text
-          .split(' ')
-          .map(word => word && '🍕')
-          .join(' ')}
-      </Text>
-    </View>
-  );
-};
-
-export default PizzaTranslator;
-```
-
-In this example, we store `text` in the state, because it changes over time.
-
-There are a lot more things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the [React docs on controlled components](https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable), or the [reference docs for TextInput](textinput.md).
-
-Text input is one of the ways the user interacts with the app. Next, let's look at another type of input and [learn how to handle touches](handling-touches.md).
+---
+id: handling-text-input
+title: Handling Text Input
+---
+
+[`TextInput`](textinput#content) is a [Core Component](intro-react-native-components) that allows the user to enter text. It has an `onChangeText` prop that takes a function to be called every time the text changed, and an `onSubmitEditing` prop that takes a function to be called when the text is submitted.
+
+For example, let's say that as the user types, you're translating their words into a different language. In this new language, every single word is written the same way: 🍕. So the sentence "Hello there Bob" would be translated as "🍕 🍕 🍕".
+
+```SnackPlayer name=Handling%20Text%20Input
+import {useState} from 'react';
+import {Text, TextInput, View} from 'react-native';
+
+const PizzaTranslator = () => {
+  const [text, setText] = useState('');
+  return (
+    <View style={{flex: 1, justifyContent: 'center'}}>
+      <TextInput
+        placeholder="Type here to translate!"
+        onChangeText={newText => setText(newText)}
+        defaultValue={text}
+        style={{
+          height: 40,
+          padding: 5,
+          marginHorizontal: 8,
+          borderWidth: 1,
+        }}
+      />
+      <Text style={{padding: 10, fontSize: 42}}>
+        {text
+          .split(' ')
+          .map(word => word && '🍕')
+          .join(' ')}
+      </Text>
+    </View>
+  );
+};
+
+export default PizzaTranslator;
+```
+
+In this example, we store `text` in the state, because it changes over time.
+
+There are a lot more things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the [React docs on controlled components](https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable), or the [reference docs for TextInput](textinput.md).
+
+Text input is one of the ways the user interacts with the app. Next, let's look at another type of input and [learn how to handle touches](handling-touches.md).
diff --git a/website/versioned_docs/version-0.80/handling-touches.md b/website/versioned_docs/version-0.80/handling-touches.md
index 612287f6e10..b9604b393c0 100644
--- a/website/versioned_docs/version-0.80/handling-touches.md
+++ b/website/versioned_docs/version-0.80/handling-touches.md
@@ -25,7 +25,6 @@ This will render a blue label on iOS, and a blue rounded rectangle with light te
 Go ahead and play around with the `Button` component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right and then clicking on "Tap to Play" to preview the app.
 
 ```SnackPlayer name=Button%20Basics
-import React from 'react';
 import {Alert, Button, StyleSheet, View} from 'react-native';
 
 const ButtonBasics = () => {
@@ -86,7 +85,6 @@ In some cases, you may want to detect when a user presses and holds a view for a
 Let's see all of these in action:
 
 ```SnackPlayer name=Touchables
-import React from 'react';
 import {
   Alert,
   Platform,
diff --git a/website/versioned_docs/version-0.80/height-and-width.md b/website/versioned_docs/version-0.80/height-and-width.md
index 485667831cd..b768626716e 100644
--- a/website/versioned_docs/version-0.80/height-and-width.md
+++ b/website/versioned_docs/version-0.80/height-and-width.md
@@ -10,7 +10,6 @@ A component's height and width determine its size on the screen.
 The general way to set the dimensions of a component is by adding a fixed `width` and `height` to style. All dimensions in React Native are unitless, and represent density-independent pixels.
 
 ```SnackPlayer name=Height%20and%20Width
-import React from 'react';
 import {View} from 'react-native';
 
 const FixedDimensionsBasics = () => {
@@ -59,7 +58,6 @@ A component can only expand to fill available space if its parent has dimensions
 :::
 
 ```SnackPlayer name=Flex%20Dimensions
-import React from 'react';
 import {View} from 'react-native';
 
 const FlexDimensionsBasics = () => {
@@ -85,7 +83,6 @@ After you can control a component's size, the next step is to [learn how to lay
 If you want to fill a certain portion of the screen, but you _don't_ want to use the `flex` layout, you _can_ use **percentage values** in the component's style. Similar to flex dimensions, percentage dimensions require parent with a defined size.
 
 ```SnackPlayer name=Percentage%20Dimensions
-import React from 'react';
 import {View} from 'react-native';
 
 const PercentageDimensionsBasics = () => {
diff --git a/website/versioned_docs/version-0.80/i18nmanager.md b/website/versioned_docs/version-0.80/i18nmanager.md
index 66841b845d4..5e79f72174e 100644
--- a/website/versioned_docs/version-0.80/i18nmanager.md
+++ b/website/versioned_docs/version-0.80/i18nmanager.md
@@ -1,165 +1,164 @@
----
-id: i18nmanager
-title: I18nManager
----
-
-# I18nManager
-
-The `I18nManager` module provides utilities for managing Right-to-Left (RTL) layout support for languages like Arabic, Hebrew, and others. It provides methods to control RTL behavior and check the current layout direction.
-
-## Examples
-
-### Change positions and animations based on RTL
-
-If you absolutely position elements to align with other flexbox elements, they may not align in RTL languages. Using `isRTL` can be used to adjust alignment or animations.
-
-```SnackPlayer name=I18nManager%20Change%20Absolute%20Positions%20And%20Animations
-import React from 'react';
-import {I18nManager, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  // Change to `true` to see the effect in a non-RTL language
-  const isRTL = I18nManager.isRTL;
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView>
-        <View style={{ position: 'absolute', left: isRTL ? undefined : 0, right: isRTL ? 0 : undefined }}>
-          {isRTL ? (
-            <Text>Back &gt;</Text>
-          ) : (
-            <Text>&lt; Back</Text>
-          )}
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-export default App;
-```
-
-### During Development
-
-```SnackPlayer name=I18nManager%20During%20Development
-import React, {useState} from 'react';
-import {Alert, I18nManager, StyleSheet, Switch, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [rtl, setRTL] = useState(I18nManager.isRTL);
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView>
-        <View style={styles.container}>
-          <View style={styles.forceRtl}>
-            <Text>Force RTL in Development:</Text>
-            <Switch value={rtl} onValueChange={(value) => {
-              setRTL(value);
-              I18nManager.forceRTL(value);
-              Alert.alert(
-                'Reload this page',
-                'Please reload this page to change the UI direction! ' +
-                  'All examples in this app will be affected. ' +
-                  'Check them out to see what they look like in RTL layout.',
-              );
-            }} />
-          </View>
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    padding: 20,
-  },
-  forceRtl: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-# Reference
-
-## Properties
-
-### `isRTL`
-
-```typescript
-static isRTL: boolean;
-```
-
-A boolean value indicating whether the app is currently in RTL layout mode.
-
-The value of `isRTL` is determined by the following logic:
-
-- If `forceRTL` is `true`, `isRTL` returns `true`
-- If `allowRTL` is `false`, `isRTL` returns `false`
-- Otherwise, `isRTL` will be `true` given the following:
-  - **iOS:**
-    - The user-preferred language on the device is an RTL language
-    - The application-defined localizations include the user-chosen language (as defined in the Xcode project file (`knownRegions = (...)`)
-  - **Android:**
-    - The user-preferred language on the device is an RTL language
-    - The application's `AndroidManifest.xml` defines `android:supportsRTL="true"` on the `<application>` element
-
-### `doLeftAndRightSwapInRTL`
-
-```typescript
-static doLeftAndRightSwapInRTL: boolean;
-```
-
-A boolean value indicating whether left and right style properties should be automatically swapped when in RTL mode. When enabled, left becomes right and right becomes left in RTL layouts.
-
-## Methods
-
-### `allowRTL()`
-
-```typescript
-static allowRTL: (allowRTL: boolean) => void;
-```
-
-Enables or disables RTL layout support for the application.
-
-**Parameters:**
-
-- `allowRTL` (boolean): Whether to allow RTL layout
-
-**Important Notes:**
-
-- Changes take effect on the next application start, not immediately
-- This setting is persisted across app restarts
-
-### `forceRTL()`
-
-```typescript
-static forceRTL: (forced: boolean) => void;
-```
-
-Forces the app to use RTL layout regardless of the device language settings. This is primarily useful for testing RTL layouts during development.
-
-Avoid forcing RTL in production apps as it requires a full app restart to take effect, which makes for a poor user-experience.
-
-**Parameters:**
-
-- `forced` (boolean): Whether to force RTL layout
-
-**Important Notes:**
-
-- Changes take full effect on the next application start, not immediately
-- The setting is persisted across app restarts
-- Only meant for development and testing. In production, you should either disallow RTL fully or handle it appropriately (see `isRTL`)
-
-### `swapLeftAndRightInRTL()`
-
-```typescript
-static swapLeftAndRightInRTL: (swapLeftAndRight: boolean) => void;
-```
-
-Swap left and right style properties in RTL mode. When enabled, left becomes right and right becomes left in RTL layouts. Does not affect the value of `isRTL`.
+---
+id: i18nmanager
+title: I18nManager
+---
+
+# I18nManager
+
+The `I18nManager` module provides utilities for managing Right-to-Left (RTL) layout support for languages like Arabic, Hebrew, and others. It provides methods to control RTL behavior and check the current layout direction.
+
+## Examples
+
+### Change positions and animations based on RTL
+
+If you absolutely position elements to align with other flexbox elements, they may not align in RTL languages. Using `isRTL` can be used to adjust alignment or animations.
+
+```SnackPlayer name=I18nManager%20Change%20Absolute%20Positions%20And%20Animations
+import {I18nManager, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  // Change to `true` to see the effect in a non-RTL language
+  const isRTL = I18nManager.isRTL;
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView>
+        <View style={{ position: 'absolute', left: isRTL ? undefined : 0, right: isRTL ? 0 : undefined }}>
+          {isRTL ? (
+            <Text>Back &gt;</Text>
+          ) : (
+            <Text>&lt; Back</Text>
+          )}
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+export default App;
+```
+
+### During Development
+
+```SnackPlayer name=I18nManager%20During%20Development
+import {useState} from 'react';
+import {Alert, I18nManager, StyleSheet, Switch, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [rtl, setRTL] = useState(I18nManager.isRTL);
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView>
+        <View style={styles.container}>
+          <View style={styles.forceRtl}>
+            <Text>Force RTL in Development:</Text>
+            <Switch value={rtl} onValueChange={(value) => {
+              setRTL(value);
+              I18nManager.forceRTL(value);
+              Alert.alert(
+                'Reload this page',
+                'Please reload this page to change the UI direction! ' +
+                  'All examples in this app will be affected. ' +
+                  'Check them out to see what they look like in RTL layout.',
+              );
+            }} />
+          </View>
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 20,
+  },
+  forceRtl: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+# Reference
+
+## Properties
+
+### `isRTL`
+
+```typescript
+static isRTL: boolean;
+```
+
+A boolean value indicating whether the app is currently in RTL layout mode.
+
+The value of `isRTL` is determined by the following logic:
+
+- If `forceRTL` is `true`, `isRTL` returns `true`
+- If `allowRTL` is `false`, `isRTL` returns `false`
+- Otherwise, `isRTL` will be `true` given the following:
+  - **iOS:**
+    - The user-preferred language on the device is an RTL language
+    - The application-defined localizations include the user-chosen language (as defined in the Xcode project file (`knownRegions = (...)`)
+  - **Android:**
+    - The user-preferred language on the device is an RTL language
+    - The application's `AndroidManifest.xml` defines `android:supportsRTL="true"` on the `<application>` element
+
+### `doLeftAndRightSwapInRTL`
+
+```typescript
+static doLeftAndRightSwapInRTL: boolean;
+```
+
+A boolean value indicating whether left and right style properties should be automatically swapped when in RTL mode. When enabled, left becomes right and right becomes left in RTL layouts.
+
+## Methods
+
+### `allowRTL()`
+
+```typescript
+static allowRTL: (allowRTL: boolean) => void;
+```
+
+Enables or disables RTL layout support for the application.
+
+**Parameters:**
+
+- `allowRTL` (boolean): Whether to allow RTL layout
+
+**Important Notes:**
+
+- Changes take effect on the next application start, not immediately
+- This setting is persisted across app restarts
+
+### `forceRTL()`
+
+```typescript
+static forceRTL: (forced: boolean) => void;
+```
+
+Forces the app to use RTL layout regardless of the device language settings. This is primarily useful for testing RTL layouts during development.
+
+Avoid forcing RTL in production apps as it requires a full app restart to take effect, which makes for a poor user-experience.
+
+**Parameters:**
+
+- `forced` (boolean): Whether to force RTL layout
+
+**Important Notes:**
+
+- Changes take full effect on the next application start, not immediately
+- The setting is persisted across app restarts
+- Only meant for development and testing. In production, you should either disallow RTL fully or handle it appropriately (see `isRTL`)
+
+### `swapLeftAndRightInRTL()`
+
+```typescript
+static swapLeftAndRightInRTL: (swapLeftAndRight: boolean) => void;
+```
+
+Swap left and right style properties in RTL mode. When enabled, left becomes right and right becomes left in RTL layouts. Does not affect the value of `isRTL`.
diff --git a/website/versioned_docs/version-0.80/image-style-props.md b/website/versioned_docs/version-0.80/image-style-props.md
index efa0dc725e1..cbf19f996f9 100644
--- a/website/versioned_docs/version-0.80/image-style-props.md
+++ b/website/versioned_docs/version-0.80/image-style-props.md
@@ -8,7 +8,6 @@ title: Image Style Props
 ### Image Resize Mode
 
 ```SnackPlayer name=Image%20Resize%20Modes%20Example
-import React from 'react';
 import {View, Image, Text, StyleSheet, ScrollView} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -82,7 +81,6 @@ export default DisplayAnImageWithStyle;
 ### Image Border
 
 ```SnackPlayer name=Style%20BorderWidth%20and%20BorderColor%20Example
-import React from 'react';
 import {Image, StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -118,7 +116,6 @@ export default DisplayAnImageWithStyle;
 ### Image Border Radius
 
 ```SnackPlayer name=Style%20Border%20Radius%20Example
-import React from 'react';
 import {View, Image, StyleSheet, Text, ScrollView} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -184,7 +181,6 @@ export default DisplayAnImageWithStyle;
 ### Image Tint
 
 ```SnackPlayer name=Style%20tintColor%20Function%20Component
-import React from 'react';
 import {Image, StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.80/image.md b/website/versioned_docs/version-0.80/image.md
index 71094b8af79..721b717e555 100644
--- a/website/versioned_docs/version-0.80/image.md
+++ b/website/versioned_docs/version-0.80/image.md
@@ -12,7 +12,6 @@ This example shows fetching and displaying an image from local storage as well a
 ## Examples
 
 ```SnackPlayer name=Image%20Example
-import React from 'react';
 import {Image, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -59,7 +58,6 @@ export default DisplayAnImage;
 You can also add `style` to an image:
 
 ```SnackPlayer name=Styled%20Image%20Example
-import React from 'react';
 import {Image, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.80/imagebackground.md b/website/versioned_docs/version-0.80/imagebackground.md
index eba3b41b683..91dbbf40b34 100644
--- a/website/versioned_docs/version-0.80/imagebackground.md
+++ b/website/versioned_docs/version-0.80/imagebackground.md
@@ -12,7 +12,6 @@ Note that you must specify some width and height style attributes.
 ## Example
 
 ```SnackPlayer name=ImageBackground
-import React from 'react';
 import {ImageBackground, StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.80/improvingux.md b/website/versioned_docs/version-0.80/improvingux.md
index 462f5f0ce1c..96bd508791f 100644
--- a/website/versioned_docs/version-0.80/improvingux.md
+++ b/website/versioned_docs/version-0.80/improvingux.md
@@ -1,596 +1,594 @@
----
-id: improvingux
-title: Improving User Experience
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-## Configure text inputs
-
-Entering text on touch phone is a challenge - small screen, software keyboard. But based on what kind of data you need, you can make it easier by properly configuring the text inputs:
-
-- Focus the first field automatically
-- Use placeholder text as an example of expected data format
-- Enable or disable autocapitalization and autocorrect
-- Choose keyboard type (e.g. email, numeric)
-- Make sure the return button focuses the next field or submits the form
-
-Check out [`TextInput` docs](textinput.md) for more configuration options.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=TextInput%20form%20example&ext=js
-import React, {useState, useRef} from 'react';
-import {
-  Alert,
-  Text,
-  StatusBar,
-  TextInput,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const App = () => {
-  const emailInput = useRef(null);
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-
-  const submit = () => {
-    Alert.alert(
-      `Welcome, ${name}! Confirmation email has been sent to ${email}`,
-    );
-  };
-
-  return (
-    <View style={styles.container}>
-      <StatusBar barStyle="light-content" />
-      <View style={styles.header}>
-        <Text style={styles.description}>
-          This demo shows how using available TextInput customizations can make
-          forms much easier to use. Try completing the form and notice that
-          different fields have specific optimizations and the return key
-          changes from focusing next input to submitting the form.
-        </Text>
-      </View>
-      <TextInput
-        style={styles.input}
-        value={name}
-        onChangeText={text => setName(text)}
-        placeholder="Full Name"
-        autoFocus={true}
-        autoCapitalize="words"
-        autoCorrect={true}
-        keyboardType="default"
-        returnKeyType="next"
-        onSubmitEditing={() => emailInput.current.focus()}
-        blurOnSubmit={false}
-      />
-      <TextInput
-        style={styles.input}
-        value={email}
-        onChangeText={text => setEmail(text)}
-        ref={emailInput}
-        placeholder="email@example.com"
-        autoCapitalize="none"
-        autoCorrect={false}
-        keyboardType="email-address"
-        returnKeyType="send"
-        onSubmitEditing={submit}
-        blurOnSubmit={true}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    paddingTop: 64,
-    padding: 20,
-    backgroundColor: '#282c34',
-  },
-  description: {
-    fontSize: 14,
-    color: 'white',
-  },
-  input: {
-    margin: 20,
-    marginBottom: 0,
-    height: 34,
-    paddingHorizontal: 10,
-    borderRadius: 4,
-    borderColor: '#ccc',
-    borderWidth: 1,
-    fontSize: 16,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=TextInput%20form%20example&ext=tsx
-import React, {useState, useRef} from 'react';
-import {
-  Alert,
-  Text,
-  StatusBar,
-  TextInput,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const App = () => {
-  const emailInput = useRef<TextInput>(null);
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-
-  const submit = () => {
-    Alert.alert(
-      `Welcome, ${name}! Confirmation email has been sent to ${email}`,
-    );
-  };
-
-  return (
-    <View style={styles.container}>
-      <StatusBar barStyle="light-content" />
-      <View style={styles.header}>
-        <Text style={styles.description}>
-          This demo shows how using available TextInput customizations can make
-          forms much easier to use. Try completing the form and notice that
-          different fields have specific optimizations and the return key
-          changes from focusing next input to submitting the form.
-        </Text>
-      </View>
-      <TextInput
-        style={styles.input}
-        value={name}
-        onChangeText={text => setName(text)}
-        placeholder="Full Name"
-        autoFocus={true}
-        autoCapitalize="words"
-        autoCorrect={true}
-        keyboardType="default"
-        returnKeyType="next"
-        onSubmitEditing={() => emailInput.current?.focus()}
-        blurOnSubmit={false}
-      />
-      <TextInput
-        style={styles.input}
-        value={email}
-        onChangeText={text => setEmail(text)}
-        ref={emailInput}
-        placeholder="email@example.com"
-        autoCapitalize="none"
-        autoCorrect={false}
-        keyboardType="email-address"
-        returnKeyType="send"
-        onSubmitEditing={submit}
-        blurOnSubmit={true}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    paddingTop: 64,
-    padding: 20,
-    backgroundColor: '#282c34',
-  },
-  description: {
-    fontSize: 14,
-    color: 'white',
-  },
-  input: {
-    margin: 20,
-    marginBottom: 0,
-    height: 34,
-    paddingHorizontal: 10,
-    borderRadius: 4,
-    borderColor: '#ccc',
-    borderWidth: 1,
-    fontSize: 16,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-## Manage layout when keyboard is visible
-
-Software keyboard takes almost half of the screen. If you have interactive elements that can get covered by the keyboard, make sure they are still accessible by using the [`KeyboardAvoidingView` component](keyboardavoidingview.md).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=KeyboardAvoidingView%20example&ext=js
-import React, {useState, useRef} from 'react';
-import {
-  Alert,
-  Text,
-  Button,
-  StatusBar,
-  TextInput,
-  KeyboardAvoidingView,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const App = () => {
-  const emailInput = useRef(null);
-  const [email, setEmail] = useState('');
-
-  const submit = () => {
-    emailInput.current.blur();
-    Alert.alert(`Confirmation email has been sent to ${email}`);
-  };
-
-  return (
-    <View style={styles.container}>
-      <StatusBar barStyle="light-content" />
-      <View style={styles.header}>
-        <Text style={styles.description}>
-          This demo shows how to avoid covering important UI elements with the
-          software keyboard. Focus the email input below and notice that the
-          Sign Up button and the text adjusted positions to make sure they are
-          not hidden under the keyboard.
-        </Text>
-      </View>
-      <KeyboardAvoidingView behavior="padding" style={styles.form}>
-        <TextInput
-          style={styles.input}
-          value={email}
-          onChangeText={text => setEmail(text)}
-          ref={emailInput}
-          placeholder="email@example.com"
-          autoCapitalize="none"
-          autoCorrect={false}
-          keyboardType="email-address"
-          returnKeyType="send"
-          onSubmitEditing={submit}
-          blurOnSubmit={true}
-        />
-        <View>
-          <Button title="Sign Up" onPress={submit} />
-          <Text style={styles.legal}>Some important legal fine print here</Text>
-        </View>
-      </KeyboardAvoidingView>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    paddingTop: 64,
-    padding: 20,
-    backgroundColor: '#282c34',
-  },
-  description: {
-    fontSize: 14,
-    color: 'white',
-  },
-  input: {
-    margin: 20,
-    marginBottom: 0,
-    height: 34,
-    paddingHorizontal: 10,
-    borderRadius: 4,
-    borderColor: '#ccc',
-    borderWidth: 1,
-    fontSize: 16,
-  },
-  legal: {
-    margin: 10,
-    color: '#333',
-    fontSize: 12,
-    textAlign: 'center',
-  },
-  form: {
-    flex: 1,
-    justifyContent: 'space-between',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=KeyboardAvoidingView%20example&ext=tsx
-import React, {useState, useRef} from 'react';
-import {
-  Alert,
-  Text,
-  Button,
-  StatusBar,
-  TextInput,
-  KeyboardAvoidingView,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const App = () => {
-  const emailInput = useRef<TextInput>(null);
-  const [email, setEmail] = useState('');
-
-  const submit = () => {
-    emailInput.current?.blur();
-    Alert.alert(`Confirmation email has been sent to ${email}`);
-  };
-
-  return (
-    <View style={styles.container}>
-      <StatusBar barStyle="light-content" />
-      <View style={styles.header}>
-        <Text style={styles.description}>
-          This demo shows how to avoid covering important UI elements with the
-          software keyboard. Focus the email input below and notice that the
-          Sign Up button and the text adjusted positions to make sure they are
-          not hidden under the keyboard.
-        </Text>
-      </View>
-      <KeyboardAvoidingView behavior="padding" style={styles.form}>
-        <TextInput
-          style={styles.input}
-          value={email}
-          onChangeText={text => setEmail(text)}
-          ref={emailInput}
-          placeholder="email@example.com"
-          autoCapitalize="none"
-          autoCorrect={false}
-          keyboardType="email-address"
-          returnKeyType="send"
-          onSubmitEditing={submit}
-          blurOnSubmit={true}
-        />
-        <View>
-          <Button title="Sign Up" onPress={submit} />
-          <Text style={styles.legal}>Some important legal fine print here</Text>
-        </View>
-      </KeyboardAvoidingView>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    paddingTop: 64,
-    padding: 20,
-    backgroundColor: '#282c34',
-  },
-  description: {
-    fontSize: 14,
-    color: 'white',
-  },
-  input: {
-    margin: 20,
-    marginBottom: 0,
-    height: 34,
-    paddingHorizontal: 10,
-    borderRadius: 4,
-    borderColor: '#ccc',
-    borderWidth: 1,
-    fontSize: 16,
-  },
-  legal: {
-    margin: 10,
-    color: '#333',
-    fontSize: 12,
-    textAlign: 'center',
-  },
-  form: {
-    flex: 1,
-    justifyContent: 'space-between',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-## Make tappable areas larger
-
-On mobile phones it's hard to be very precise when pressing buttons. Make sure all interactive elements are 44x44 or larger. One way to do this is to leave enough space for the element, `padding`, `minWidth` and `minHeight` style values can be useful for that. Alternatively, you can use [`hitSlop` prop](touchablewithoutfeedback.md#hitslop) to increase interactive area without affecting the layout. Here's a demo:
-
-```SnackPlayer name=HitSlop%20example
-import React from 'react';
-import {
-  Text,
-  StatusBar,
-  TouchableOpacity,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <StatusBar barStyle="light-content" />
-      <View style={styles.header}>
-        <Text style={styles.description}>
-          This demo shows how using hitSlop can make interactive elements much
-          easier to tap without changing their layout and size. Try pressing
-          each button quickly multiple times and notice which one is easier to
-          hit.
-        </Text>
-      </View>
-      <View style={styles.content}>
-        <TouchableOpacity>
-          <Text style={styles.label}>Without hitSlop</Text>
-        </TouchableOpacity>
-        <View style={styles.separator} />
-        <View style={styles.preview}>
-          <TouchableOpacity
-            hitSlop={{top: 20, left: 20, bottom: 20, right: 20}}>
-            <Text style={styles.label}>With hitSlop</Text>
-          </TouchableOpacity>
-        </View>
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    paddingTop: 64,
-    padding: 20,
-    backgroundColor: '#282c34',
-  },
-  description: {
-    fontSize: 14,
-    color: 'white',
-  },
-  content: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  label: {
-    fontSize: 18,
-    color: '#336699',
-    textAlign: 'center',
-    borderColor: '#ddd',
-    borderWidth: 1,
-  },
-  separator: {
-    height: 50,
-  },
-  preview: {
-    padding: 20,
-    backgroundColor: '#f6f6f6',
-  },
-});
-
-export default App;
-```
-
-## Use Android Ripple
-
-Android API 21+ uses the material design ripple to provide user with feedback when they touch an interactable area on the screen. React Native exposes this through the [`TouchableNativeFeedback` component](touchablenativefeedback.md). Using this touchable effect instead of opacity or highlight will often make your app feel much more fitting on the platform. That said, you need to be careful when using it because it doesn't work on iOS or on Android API < 21, so you will need to fallback to using one of the other Touchable components on iOS. You can use a library like [react-native-platform-touchable](https://github.com/react-community/react-native-platform-touchable) to handle the platform differences for you.
-
-```SnackPlayer name=Android%20Ripple%20example&supportedPlatforms=android
-import React from 'react';
-import {
-  TouchableNativeFeedback,
-  TouchableOpacity,
-  TouchableHighlight,
-  Platform,
-  Text,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const SUPPORTS_NATIVE_FEEDBACK =
-  Platform.OS === 'android' && Platform.Version >= 21;
-
-const noop = () => {};
-const defaultHitSlop = {top: 15, bottom: 15, right: 15, left: 15};
-
-const ButtonsWithNativeFeedback = () => (
-  <View style={styles.buttonContainer}>
-    <TouchableNativeFeedback
-      onPress={noop}
-      background={TouchableNativeFeedback.Ripple('#06bcee', false)}
-      hitSlop={defaultHitSlop}>
-      <View style={styles.button}>
-        <Text style={styles.text}>This is a ripple respecting borders</Text>
-      </View>
-    </TouchableNativeFeedback>
-    <TouchableNativeFeedback
-      onPress={noop}
-      background={TouchableNativeFeedback.Ripple('#06bcee', true)}
-      hitSlop={defaultHitSlop}>
-      <View style={styles.button}>
-        <Text style={styles.text}>
-          This is ripple without borders, this is more useful for icons, eg: in
-          tab bar
-        </Text>
-      </View>
-    </TouchableNativeFeedback>
-  </View>
-);
-
-const Buttons = () => (
-  <View style={styles.buttonContainer}>
-    <TouchableOpacity
-      style={styles.button}
-      onPress={noop}
-      hitSlop={defaultHitSlop}>
-      <Text style={styles.text}>This is opacity</Text>
-    </TouchableOpacity>
-    <TouchableHighlight
-      style={styles.button}
-      onPress={noop}
-      hitSlop={defaultHitSlop}
-      underlayColor="#06bcee">
-      <Text style={styles.text}>This is highlight</Text>
-    </TouchableHighlight>
-  </View>
-);
-
-const App = () => (
-  <View style={styles.container}>
-    {SUPPORTS_NATIVE_FEEDBACK ? <ButtonsWithNativeFeedback /> : <Buttons />}
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingTop: 64,
-    backgroundColor: '#fff',
-  },
-  buttonContainer: {
-    margin: 24,
-  },
-  text: {
-    fontSize: 20,
-    color: '#fff',
-    fontWeight: 'bold',
-  },
-  button: {
-    padding: 25,
-    borderRadius: 5,
-    backgroundColor: '#000',
-    marginBottom: 30,
-  },
-});
-
-export default App;
-```
-
-## Screen orientation lock
-
-Multiple screen orientations should work fine by default unless you're using `Dimensions` API and don't handle orientation changes. If you don't want to support multiple screen orientations, you can lock the screen orientation to either portrait or landscape.
-
-On iOS, in the General tab and Deployment Info section of Xcode enable the Device Orientation you want to support (ensure you have selected iPhone from the Devices menu when making the changes). For Android, open the AndroidManifest.xml file and within the activity element add `'android:screenOrientation="portrait"'` to lock to portrait or `'android:screenOrientation="landscape"'` to lock to landscape.
-
-# Learn more
-
-[Material Design](https://material.io/) and [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines) are great resources for learning more about designing for mobile platforms.
+---
+id: improvingux
+title: Improving User Experience
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+## Configure text inputs
+
+Entering text on touch phone is a challenge - small screen, software keyboard. But based on what kind of data you need, you can make it easier by properly configuring the text inputs:
+
+- Focus the first field automatically
+- Use placeholder text as an example of expected data format
+- Enable or disable autocapitalization and autocorrect
+- Choose keyboard type (e.g. email, numeric)
+- Make sure the return button focuses the next field or submits the form
+
+Check out [`TextInput` docs](textinput.md) for more configuration options.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=TextInput%20form%20example&ext=js
+import {useState, useRef} from 'react';
+import {
+  Alert,
+  Text,
+  StatusBar,
+  TextInput,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const App = () => {
+  const emailInput = useRef(null);
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+
+  const submit = () => {
+    Alert.alert(
+      `Welcome, ${name}! Confirmation email has been sent to ${email}`,
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="light-content" />
+      <View style={styles.header}>
+        <Text style={styles.description}>
+          This demo shows how using available TextInput customizations can make
+          forms much easier to use. Try completing the form and notice that
+          different fields have specific optimizations and the return key
+          changes from focusing next input to submitting the form.
+        </Text>
+      </View>
+      <TextInput
+        style={styles.input}
+        value={name}
+        onChangeText={text => setName(text)}
+        placeholder="Full Name"
+        autoFocus={true}
+        autoCapitalize="words"
+        autoCorrect={true}
+        keyboardType="default"
+        returnKeyType="next"
+        onSubmitEditing={() => emailInput.current.focus()}
+        blurOnSubmit={false}
+      />
+      <TextInput
+        style={styles.input}
+        value={email}
+        onChangeText={text => setEmail(text)}
+        ref={emailInput}
+        placeholder="email@example.com"
+        autoCapitalize="none"
+        autoCorrect={false}
+        keyboardType="email-address"
+        returnKeyType="send"
+        onSubmitEditing={submit}
+        blurOnSubmit={true}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 64,
+    padding: 20,
+    backgroundColor: '#282c34',
+  },
+  description: {
+    fontSize: 14,
+    color: 'white',
+  },
+  input: {
+    margin: 20,
+    marginBottom: 0,
+    height: 34,
+    paddingHorizontal: 10,
+    borderRadius: 4,
+    borderColor: '#ccc',
+    borderWidth: 1,
+    fontSize: 16,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=TextInput%20form%20example&ext=tsx
+import {useState, useRef} from 'react';
+import {
+  Alert,
+  Text,
+  StatusBar,
+  TextInput,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const App = () => {
+  const emailInput = useRef<TextInput>(null);
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+
+  const submit = () => {
+    Alert.alert(
+      `Welcome, ${name}! Confirmation email has been sent to ${email}`,
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="light-content" />
+      <View style={styles.header}>
+        <Text style={styles.description}>
+          This demo shows how using available TextInput customizations can make
+          forms much easier to use. Try completing the form and notice that
+          different fields have specific optimizations and the return key
+          changes from focusing next input to submitting the form.
+        </Text>
+      </View>
+      <TextInput
+        style={styles.input}
+        value={name}
+        onChangeText={text => setName(text)}
+        placeholder="Full Name"
+        autoFocus={true}
+        autoCapitalize="words"
+        autoCorrect={true}
+        keyboardType="default"
+        returnKeyType="next"
+        onSubmitEditing={() => emailInput.current?.focus()}
+        blurOnSubmit={false}
+      />
+      <TextInput
+        style={styles.input}
+        value={email}
+        onChangeText={text => setEmail(text)}
+        ref={emailInput}
+        placeholder="email@example.com"
+        autoCapitalize="none"
+        autoCorrect={false}
+        keyboardType="email-address"
+        returnKeyType="send"
+        onSubmitEditing={submit}
+        blurOnSubmit={true}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 64,
+    padding: 20,
+    backgroundColor: '#282c34',
+  },
+  description: {
+    fontSize: 14,
+    color: 'white',
+  },
+  input: {
+    margin: 20,
+    marginBottom: 0,
+    height: 34,
+    paddingHorizontal: 10,
+    borderRadius: 4,
+    borderColor: '#ccc',
+    borderWidth: 1,
+    fontSize: 16,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+## Manage layout when keyboard is visible
+
+Software keyboard takes almost half of the screen. If you have interactive elements that can get covered by the keyboard, make sure they are still accessible by using the [`KeyboardAvoidingView` component](keyboardavoidingview.md).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=KeyboardAvoidingView%20example&ext=js
+import {useState, useRef} from 'react';
+import {
+  Alert,
+  Text,
+  Button,
+  StatusBar,
+  TextInput,
+  KeyboardAvoidingView,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const App = () => {
+  const emailInput = useRef(null);
+  const [email, setEmail] = useState('');
+
+  const submit = () => {
+    emailInput.current.blur();
+    Alert.alert(`Confirmation email has been sent to ${email}`);
+  };
+
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="light-content" />
+      <View style={styles.header}>
+        <Text style={styles.description}>
+          This demo shows how to avoid covering important UI elements with the
+          software keyboard. Focus the email input below and notice that the
+          Sign Up button and the text adjusted positions to make sure they are
+          not hidden under the keyboard.
+        </Text>
+      </View>
+      <KeyboardAvoidingView behavior="padding" style={styles.form}>
+        <TextInput
+          style={styles.input}
+          value={email}
+          onChangeText={text => setEmail(text)}
+          ref={emailInput}
+          placeholder="email@example.com"
+          autoCapitalize="none"
+          autoCorrect={false}
+          keyboardType="email-address"
+          returnKeyType="send"
+          onSubmitEditing={submit}
+          blurOnSubmit={true}
+        />
+        <View>
+          <Button title="Sign Up" onPress={submit} />
+          <Text style={styles.legal}>Some important legal fine print here</Text>
+        </View>
+      </KeyboardAvoidingView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 64,
+    padding: 20,
+    backgroundColor: '#282c34',
+  },
+  description: {
+    fontSize: 14,
+    color: 'white',
+  },
+  input: {
+    margin: 20,
+    marginBottom: 0,
+    height: 34,
+    paddingHorizontal: 10,
+    borderRadius: 4,
+    borderColor: '#ccc',
+    borderWidth: 1,
+    fontSize: 16,
+  },
+  legal: {
+    margin: 10,
+    color: '#333',
+    fontSize: 12,
+    textAlign: 'center',
+  },
+  form: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=KeyboardAvoidingView%20example&ext=tsx
+import {useState, useRef} from 'react';
+import {
+  Alert,
+  Text,
+  Button,
+  StatusBar,
+  TextInput,
+  KeyboardAvoidingView,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const App = () => {
+  const emailInput = useRef<TextInput>(null);
+  const [email, setEmail] = useState('');
+
+  const submit = () => {
+    emailInput.current?.blur();
+    Alert.alert(`Confirmation email has been sent to ${email}`);
+  };
+
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="light-content" />
+      <View style={styles.header}>
+        <Text style={styles.description}>
+          This demo shows how to avoid covering important UI elements with the
+          software keyboard. Focus the email input below and notice that the
+          Sign Up button and the text adjusted positions to make sure they are
+          not hidden under the keyboard.
+        </Text>
+      </View>
+      <KeyboardAvoidingView behavior="padding" style={styles.form}>
+        <TextInput
+          style={styles.input}
+          value={email}
+          onChangeText={text => setEmail(text)}
+          ref={emailInput}
+          placeholder="email@example.com"
+          autoCapitalize="none"
+          autoCorrect={false}
+          keyboardType="email-address"
+          returnKeyType="send"
+          onSubmitEditing={submit}
+          blurOnSubmit={true}
+        />
+        <View>
+          <Button title="Sign Up" onPress={submit} />
+          <Text style={styles.legal}>Some important legal fine print here</Text>
+        </View>
+      </KeyboardAvoidingView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 64,
+    padding: 20,
+    backgroundColor: '#282c34',
+  },
+  description: {
+    fontSize: 14,
+    color: 'white',
+  },
+  input: {
+    margin: 20,
+    marginBottom: 0,
+    height: 34,
+    paddingHorizontal: 10,
+    borderRadius: 4,
+    borderColor: '#ccc',
+    borderWidth: 1,
+    fontSize: 16,
+  },
+  legal: {
+    margin: 10,
+    color: '#333',
+    fontSize: 12,
+    textAlign: 'center',
+  },
+  form: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+## Make tappable areas larger
+
+On mobile phones it's hard to be very precise when pressing buttons. Make sure all interactive elements are 44x44 or larger. One way to do this is to leave enough space for the element, `padding`, `minWidth` and `minHeight` style values can be useful for that. Alternatively, you can use [`hitSlop` prop](touchablewithoutfeedback.md#hitslop) to increase interactive area without affecting the layout. Here's a demo:
+
+```SnackPlayer name=HitSlop%20example
+import {
+  Text,
+  StatusBar,
+  TouchableOpacity,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="light-content" />
+      <View style={styles.header}>
+        <Text style={styles.description}>
+          This demo shows how using hitSlop can make interactive elements much
+          easier to tap without changing their layout and size. Try pressing
+          each button quickly multiple times and notice which one is easier to
+          hit.
+        </Text>
+      </View>
+      <View style={styles.content}>
+        <TouchableOpacity>
+          <Text style={styles.label}>Without hitSlop</Text>
+        </TouchableOpacity>
+        <View style={styles.separator} />
+        <View style={styles.preview}>
+          <TouchableOpacity
+            hitSlop={{top: 20, left: 20, bottom: 20, right: 20}}>
+            <Text style={styles.label}>With hitSlop</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 64,
+    padding: 20,
+    backgroundColor: '#282c34',
+  },
+  description: {
+    fontSize: 14,
+    color: 'white',
+  },
+  content: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  label: {
+    fontSize: 18,
+    color: '#336699',
+    textAlign: 'center',
+    borderColor: '#ddd',
+    borderWidth: 1,
+  },
+  separator: {
+    height: 50,
+  },
+  preview: {
+    padding: 20,
+    backgroundColor: '#f6f6f6',
+  },
+});
+
+export default App;
+```
+
+## Use Android Ripple
+
+Android API 21+ uses the material design ripple to provide user with feedback when they touch an interactable area on the screen. React Native exposes this through the [`TouchableNativeFeedback` component](touchablenativefeedback.md). Using this touchable effect instead of opacity or highlight will often make your app feel much more fitting on the platform. That said, you need to be careful when using it because it doesn't work on iOS or on Android API < 21, so you will need to fallback to using one of the other Touchable components on iOS. You can use a library like [react-native-platform-touchable](https://github.com/react-community/react-native-platform-touchable) to handle the platform differences for you.
+
+```SnackPlayer name=Android%20Ripple%20example&supportedPlatforms=android
+import {
+  TouchableNativeFeedback,
+  TouchableOpacity,
+  TouchableHighlight,
+  Platform,
+  Text,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const SUPPORTS_NATIVE_FEEDBACK =
+  Platform.OS === 'android' && Platform.Version >= 21;
+
+const noop = () => {};
+const defaultHitSlop = {top: 15, bottom: 15, right: 15, left: 15};
+
+const ButtonsWithNativeFeedback = () => (
+  <View style={styles.buttonContainer}>
+    <TouchableNativeFeedback
+      onPress={noop}
+      background={TouchableNativeFeedback.Ripple('#06bcee', false)}
+      hitSlop={defaultHitSlop}>
+      <View style={styles.button}>
+        <Text style={styles.text}>This is a ripple respecting borders</Text>
+      </View>
+    </TouchableNativeFeedback>
+    <TouchableNativeFeedback
+      onPress={noop}
+      background={TouchableNativeFeedback.Ripple('#06bcee', true)}
+      hitSlop={defaultHitSlop}>
+      <View style={styles.button}>
+        <Text style={styles.text}>
+          This is ripple without borders, this is more useful for icons, eg: in
+          tab bar
+        </Text>
+      </View>
+    </TouchableNativeFeedback>
+  </View>
+);
+
+const Buttons = () => (
+  <View style={styles.buttonContainer}>
+    <TouchableOpacity
+      style={styles.button}
+      onPress={noop}
+      hitSlop={defaultHitSlop}>
+      <Text style={styles.text}>This is opacity</Text>
+    </TouchableOpacity>
+    <TouchableHighlight
+      style={styles.button}
+      onPress={noop}
+      hitSlop={defaultHitSlop}
+      underlayColor="#06bcee">
+      <Text style={styles.text}>This is highlight</Text>
+    </TouchableHighlight>
+  </View>
+);
+
+const App = () => (
+  <View style={styles.container}>
+    {SUPPORTS_NATIVE_FEEDBACK ? <ButtonsWithNativeFeedback /> : <Buttons />}
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: 64,
+    backgroundColor: '#fff',
+  },
+  buttonContainer: {
+    margin: 24,
+  },
+  text: {
+    fontSize: 20,
+    color: '#fff',
+    fontWeight: 'bold',
+  },
+  button: {
+    padding: 25,
+    borderRadius: 5,
+    backgroundColor: '#000',
+    marginBottom: 30,
+  },
+});
+
+export default App;
+```
+
+## Screen orientation lock
+
+Multiple screen orientations should work fine by default unless you're using `Dimensions` API and don't handle orientation changes. If you don't want to support multiple screen orientations, you can lock the screen orientation to either portrait or landscape.
+
+On iOS, in the General tab and Deployment Info section of Xcode enable the Device Orientation you want to support (ensure you have selected iPhone from the Devices menu when making the changes). For Android, open the AndroidManifest.xml file and within the activity element add `'android:screenOrientation="portrait"'` to lock to portrait or `'android:screenOrientation="landscape"'` to lock to landscape.
+
+# Learn more
+
+[Material Design](https://material.io/) and [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines) are great resources for learning more about designing for mobile platforms.
diff --git a/website/versioned_docs/version-0.80/inputaccessoryview.md b/website/versioned_docs/version-0.80/inputaccessoryview.md
index a4f56532fa4..76220b4fd7c 100644
--- a/website/versioned_docs/version-0.80/inputaccessoryview.md
+++ b/website/versioned_docs/version-0.80/inputaccessoryview.md
@@ -1,98 +1,98 @@
----
-id: inputaccessoryview
-title: InputAccessoryView
----
-
-A component which enables customization of the keyboard input accessory view on iOS. The input accessory view is displayed above the keyboard whenever a `TextInput` has focus. This component can be used to create custom toolbars.
-
-To use this component wrap your custom toolbar with the InputAccessoryView component, and set a `nativeID`. Then, pass that `nativeID` as the `inputAccessoryViewID` of whatever `TextInput` you desire. A basic example:
-
-```SnackPlayer name=InputAccessoryView&supportedPlatforms=ios
-import React, {useState} from 'react';
-import {
-  Button,
-  InputAccessoryView,
-  ScrollView,
-  TextInput,
-  StyleSheet,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const inputAccessoryViewID = 'uniqueID';
-const initialText = '';
-
-const App = () => {
-  const [text, setText] = useState(initialText);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <ScrollView keyboardDismissMode="interactive">
-          <TextInput
-            style={styles.textInput}
-            inputAccessoryViewID={inputAccessoryViewID}
-            onChangeText={setText}
-            value={text}
-            placeholder={'Please type here…'}
-          />
-        </ScrollView>
-      </SafeAreaView>
-      <InputAccessoryView nativeID={inputAccessoryViewID}>
-        <Button onPress={() => setText(initialText)} title="Clear text" />
-      </InputAccessoryView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: 20,
-  },
-  textInput: {
-    padding: 16,
-    borderColor: 'black',
-    borderWidth: 1,
-  },
-});
-
-export default App;
-```
-
-This component can also be used to create sticky text inputs (text inputs which are anchored to the top of the keyboard). To do this, wrap a `TextInput` with the `InputAccessoryView` component, and don't set a `nativeID`. For an example, look at [InputAccessoryViewExample.js](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/InputAccessoryView/InputAccessoryViewExample.js).
-
----
-
-# Reference
-
-## Props
-
-### `backgroundColor`
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `nativeID`
-
-An ID which is used to associate this `InputAccessoryView` to specified TextInput(s).
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `style`
-
-| Type                              |
-| --------------------------------- |
-| [View Style](view-style-props.md) |
-
-# Known issues
-
-- [react-native#18997](https://github.com/facebook/react-native/issues/18997): Doesn't support multiline `TextInput`
-- [react-native#20157](https://github.com/facebook/react-native/issues/20157): Can't use with a bottom tab bar
+---
+id: inputaccessoryview
+title: InputAccessoryView
+---
+
+A component which enables customization of the keyboard input accessory view on iOS. The input accessory view is displayed above the keyboard whenever a `TextInput` has focus. This component can be used to create custom toolbars.
+
+To use this component wrap your custom toolbar with the InputAccessoryView component, and set a `nativeID`. Then, pass that `nativeID` as the `inputAccessoryViewID` of whatever `TextInput` you desire. A basic example:
+
+```SnackPlayer name=InputAccessoryView&supportedPlatforms=ios
+import {useState} from 'react';
+import {
+  Button,
+  InputAccessoryView,
+  ScrollView,
+  TextInput,
+  StyleSheet,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const inputAccessoryViewID = 'uniqueID';
+const initialText = '';
+
+const App = () => {
+  const [text, setText] = useState(initialText);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <ScrollView keyboardDismissMode="interactive">
+          <TextInput
+            style={styles.textInput}
+            inputAccessoryViewID={inputAccessoryViewID}
+            onChangeText={setText}
+            value={text}
+            placeholder={'Please type here…'}
+          />
+        </ScrollView>
+      </SafeAreaView>
+      <InputAccessoryView nativeID={inputAccessoryViewID}>
+        <Button onPress={() => setText(initialText)} title="Clear text" />
+      </InputAccessoryView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 20,
+  },
+  textInput: {
+    padding: 16,
+    borderColor: 'black',
+    borderWidth: 1,
+  },
+});
+
+export default App;
+```
+
+This component can also be used to create sticky text inputs (text inputs which are anchored to the top of the keyboard). To do this, wrap a `TextInput` with the `InputAccessoryView` component, and don't set a `nativeID`. For an example, look at [InputAccessoryViewExample.js](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/InputAccessoryView/InputAccessoryViewExample.js).
+
+---
+
+# Reference
+
+## Props
+
+### `backgroundColor`
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `nativeID`
+
+An ID which is used to associate this `InputAccessoryView` to specified TextInput(s).
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `style`
+
+| Type                              |
+| --------------------------------- |
+| [View Style](view-style-props.md) |
+
+# Known issues
+
+- [react-native#18997](https://github.com/facebook/react-native/issues/18997): Doesn't support multiline `TextInput`
+- [react-native#20157](https://github.com/facebook/react-native/issues/20157): Can't use with a bottom tab bar
diff --git a/website/versioned_docs/version-0.80/interactionmanager.md b/website/versioned_docs/version-0.80/interactionmanager.md
index f127d4569c8..73e45d179f2 100644
--- a/website/versioned_docs/version-0.80/interactionmanager.md
+++ b/website/versioned_docs/version-0.80/interactionmanager.md
@@ -1,422 +1,422 @@
----
-id: interactionmanager
-title: 🗑️ InteractionManager
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-:::warning[Deprecated]
-Avoid long-running work and use `requestIdleCallback` instead.
-:::
-
-InteractionManager allows long-running work to be scheduled after any interactions/animations have completed. In particular, this allows JavaScript animations to run smoothly.
-
-Applications can schedule tasks to run after interactions with the following:
-
-```tsx
-InteractionManager.runAfterInteractions(() => {
-  // ...long-running synchronous task...
-});
-```
-
-Compare this to other scheduling alternatives:
-
-- `requestAnimationFrame()` for code that animates a view over time.
-- `setImmediate/setTimeout()` run code later, note this may delay animations.
-- `runAfterInteractions()` run code later, without delaying active animations.
-
-The touch handling system considers one or more active touches to be an 'interaction' and will delay `runAfterInteractions()` callbacks until all touches have ended or been cancelled.
-
-InteractionManager also allows applications to register animations by creating an interaction 'handle' on animation start, and clearing it upon completion:
-
-```tsx
-const handle = InteractionManager.createInteractionHandle();
-// run animation... (`runAfterInteractions` tasks are queued)
-// later, on animation completion:
-InteractionManager.clearInteractionHandle(handle);
-// queued tasks run if all handles were cleared
-```
-
-`runAfterInteractions` takes either a plain callback function, or a `PromiseTask` object with a `gen` method that returns a `Promise`. If a `PromiseTask` is supplied, then it is fully resolved (including asynchronous dependencies that also schedule more tasks via `runAfterInteractions`) before starting on the next task that might have been queued up synchronously earlier.
-
-By default, queued tasks are executed together in a loop in one `setImmediate` batch. If `setDeadline` is called with a positive number, then tasks will only be executed until the deadline (in terms of js event loop run time) approaches, at which point execution will yield via setTimeout, allowing events such as touches to start interactions and block queued tasks from executing, making apps more responsive.
-
----
-
-## Example
-
-### Basic
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useEffect} from 'react';
-import {
-  Alert,
-  Animated,
-  InteractionManager,
-  Platform,
-  StyleSheet,
-  Text,
-  useAnimatedValue,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
-
-const useFadeIn = (duration = 5000) => {
-  const opacity = useAnimatedValue(0);
-
-  // Running the animation when the component is mounted
-  useEffect(() => {
-    // Animated.timing() create a interaction handle by default, if you want to disabled that
-    // behaviour you can set isInteraction to false to disabled that.
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration,
-      useNativeDriver: true,
-    }).start();
-  }, [duration, opacity]);
-
-  return opacity;
-};
-
-const Ball = ({onShown}) => {
-  const opacity = useFadeIn();
-
-  // Running a method after the animation
-  useEffect(() => {
-    const interactionPromise = InteractionManager.runAfterInteractions(() =>
-      onShown(),
-    );
-    return () => interactionPromise.cancel();
-  }, [onShown]);
-
-  return <Animated.View style={[styles.ball, {opacity}]} />;
-};
-
-const App = () => {
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>{instructions}</Text>
-        <Ball onShown={() => Alert.alert('Animation is done')} />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  ball: {
-    width: 100,
-    height: 100,
-    backgroundColor: 'salmon',
-    borderRadius: 100,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useEffect} from 'react';
-import {
-  Alert,
-  Animated,
-  InteractionManager,
-  Platform,
-  StyleSheet,
-  Text,
-  useAnimatedValue,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
-
-const useFadeIn = (duration = 5000) => {
-  const opacity = useAnimatedValue(0);
-
-  // Running the animation when the component is mounted
-  useEffect(() => {
-    // Animated.timing() create a interaction handle by default, if you want to disabled that
-    // behaviour you can set isInteraction to false to disabled that.
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration,
-      useNativeDriver: true,
-    }).start();
-  }, [duration, opacity]);
-
-  return opacity;
-};
-
-type BallProps = {
-  onShown: () => void;
-};
-
-const Ball = ({onShown}: BallProps) => {
-  const opacity = useFadeIn();
-
-  // Running a method after the animation
-  useEffect(() => {
-    const interactionPromise = InteractionManager.runAfterInteractions(() =>
-      onShown(),
-    );
-    return () => interactionPromise.cancel();
-  }, [onShown]);
-
-  return <Animated.View style={[styles.ball, {opacity}]} />;
-};
-
-const App = () => {
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>{instructions}</Text>
-        <Ball onShown={() => Alert.alert('Animation is done')} />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  ball: {
-    width: 100,
-    height: 100,
-    backgroundColor: 'salmon',
-    borderRadius: 100,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### Advanced
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useEffect} from 'react';
-import {
-  Alert,
-  Animated,
-  InteractionManager,
-  Platform,
-  StyleSheet,
-  Text,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
-
-// You can create a custom interaction/animation and add
-// support for InteractionManager
-const useCustomInteraction = (timeLocked = 2000) => {
-  useEffect(() => {
-    const handle = InteractionManager.createInteractionHandle();
-
-    setTimeout(
-      () => InteractionManager.clearInteractionHandle(handle),
-      timeLocked,
-    );
-
-    return () => InteractionManager.clearInteractionHandle(handle);
-  }, [timeLocked]);
-};
-
-const Ball = ({onInteractionIsDone}) => {
-  useCustomInteraction();
-
-  // Running a method after the interaction
-  useEffect(() => {
-    InteractionManager.runAfterInteractions(() => onInteractionIsDone());
-  }, [onInteractionIsDone]);
-
-  return <Animated.View style={[styles.ball]} />;
-};
-
-const App = () => {
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>{instructions}</Text>
-        <Ball onInteractionIsDone={() => Alert.alert('Interaction is done')} />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  ball: {
-    width: 100,
-    height: 100,
-    backgroundColor: 'salmon',
-    borderRadius: 100,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useEffect} from 'react';
-import {
-  Alert,
-  Animated,
-  InteractionManager,
-  Platform,
-  StyleSheet,
-  Text,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
-
-// You can create a custom interaction/animation and add
-// support for InteractionManager
-const useCustomInteraction = (timeLocked = 2000) => {
-  useEffect(() => {
-    const handle = InteractionManager.createInteractionHandle();
-
-    setTimeout(
-      () => InteractionManager.clearInteractionHandle(handle),
-      timeLocked,
-    );
-
-    return () => InteractionManager.clearInteractionHandle(handle);
-  }, [timeLocked]);
-};
-
-type BallProps = {
-  onInteractionIsDone: () => void;
-};
-
-const Ball = ({onInteractionIsDone}: BallProps) => {
-  useCustomInteraction();
-
-  // Running a method after the interaction
-  useEffect(() => {
-    InteractionManager.runAfterInteractions(() => onInteractionIsDone());
-  }, [onInteractionIsDone]);
-
-  return <Animated.View style={[styles.ball]} />;
-};
-
-const App = () => {
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>{instructions}</Text>
-        <Ball onInteractionIsDone={() => Alert.alert('Interaction is done')} />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  ball: {
-    width: 100,
-    height: 100,
-    backgroundColor: 'salmon',
-    borderRadius: 100,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-# Reference
-
-## Methods
-
-### `runAfterInteractions()`
-
-```tsx
-static runAfterInteractions(task?: (() => any) | SimpleTask | PromiseTask);
-```
-
-Schedule a function to run after all interactions have completed. Returns a cancellable "promise".
-
----
-
-### `createInteractionHandle()`
-
-```tsx
-static createInteractionHandle(): Handle;
-```
-
-Notify manager that an interaction has started.
-
----
-
-### `clearInteractionHandle()`
-
-```tsx
-static clearInteractionHandle(handle: Handle);
-```
-
-Notify manager that an interaction has completed.
-
----
-
-### `setDeadline()`
-
-```tsx
-static setDeadline(deadline: number);
-```
-
-A positive number will use setTimeout to schedule any tasks after the eventLoopRunningTime hits the deadline value, otherwise all tasks will be executed in one setImmediate batch (default).
+---
+id: interactionmanager
+title: 🗑️ InteractionManager
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+:::warning[Deprecated]
+Avoid long-running work and use `requestIdleCallback` instead.
+:::
+
+InteractionManager allows long-running work to be scheduled after any interactions/animations have completed. In particular, this allows JavaScript animations to run smoothly.
+
+Applications can schedule tasks to run after interactions with the following:
+
+```tsx
+InteractionManager.runAfterInteractions(() => {
+  // ...long-running synchronous task...
+});
+```
+
+Compare this to other scheduling alternatives:
+
+- `requestAnimationFrame()` for code that animates a view over time.
+- `setImmediate/setTimeout()` run code later, note this may delay animations.
+- `runAfterInteractions()` run code later, without delaying active animations.
+
+The touch handling system considers one or more active touches to be an 'interaction' and will delay `runAfterInteractions()` callbacks until all touches have ended or been cancelled.
+
+InteractionManager also allows applications to register animations by creating an interaction 'handle' on animation start, and clearing it upon completion:
+
+```tsx
+const handle = InteractionManager.createInteractionHandle();
+// run animation... (`runAfterInteractions` tasks are queued)
+// later, on animation completion:
+InteractionManager.clearInteractionHandle(handle);
+// queued tasks run if all handles were cleared
+```
+
+`runAfterInteractions` takes either a plain callback function, or a `PromiseTask` object with a `gen` method that returns a `Promise`. If a `PromiseTask` is supplied, then it is fully resolved (including asynchronous dependencies that also schedule more tasks via `runAfterInteractions`) before starting on the next task that might have been queued up synchronously earlier.
+
+By default, queued tasks are executed together in a loop in one `setImmediate` batch. If `setDeadline` is called with a positive number, then tasks will only be executed until the deadline (in terms of js event loop run time) approaches, at which point execution will yield via setTimeout, allowing events such as touches to start interactions and block queued tasks from executing, making apps more responsive.
+
+---
+
+## Example
+
+### Basic
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=js
+import {useEffect} from 'react';
+import {
+  Alert,
+  Animated,
+  InteractionManager,
+  Platform,
+  StyleSheet,
+  Text,
+  useAnimatedValue,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const instructions = Platform.select({
+  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
+  android:
+    'Double tap R on your keyboard to reload,\n' +
+    'Shake or press menu button for dev menu',
+});
+
+const useFadeIn = (duration = 5000) => {
+  const opacity = useAnimatedValue(0);
+
+  // Running the animation when the component is mounted
+  useEffect(() => {
+    // Animated.timing() create a interaction handle by default, if you want to disabled that
+    // behaviour you can set isInteraction to false to disabled that.
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration,
+      useNativeDriver: true,
+    }).start();
+  }, [duration, opacity]);
+
+  return opacity;
+};
+
+const Ball = ({onShown}) => {
+  const opacity = useFadeIn();
+
+  // Running a method after the animation
+  useEffect(() => {
+    const interactionPromise = InteractionManager.runAfterInteractions(() =>
+      onShown(),
+    );
+    return () => interactionPromise.cancel();
+  }, [onShown]);
+
+  return <Animated.View style={[styles.ball, {opacity}]} />;
+};
+
+const App = () => {
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>{instructions}</Text>
+        <Ball onShown={() => Alert.alert('Animation is done')} />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  ball: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'salmon',
+    borderRadius: 100,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=tsx
+import {useEffect} from 'react';
+import {
+  Alert,
+  Animated,
+  InteractionManager,
+  Platform,
+  StyleSheet,
+  Text,
+  useAnimatedValue,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const instructions = Platform.select({
+  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
+  android:
+    'Double tap R on your keyboard to reload,\n' +
+    'Shake or press menu button for dev menu',
+});
+
+const useFadeIn = (duration = 5000) => {
+  const opacity = useAnimatedValue(0);
+
+  // Running the animation when the component is mounted
+  useEffect(() => {
+    // Animated.timing() create a interaction handle by default, if you want to disabled that
+    // behaviour you can set isInteraction to false to disabled that.
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration,
+      useNativeDriver: true,
+    }).start();
+  }, [duration, opacity]);
+
+  return opacity;
+};
+
+type BallProps = {
+  onShown: () => void;
+};
+
+const Ball = ({onShown}: BallProps) => {
+  const opacity = useFadeIn();
+
+  // Running a method after the animation
+  useEffect(() => {
+    const interactionPromise = InteractionManager.runAfterInteractions(() =>
+      onShown(),
+    );
+    return () => interactionPromise.cancel();
+  }, [onShown]);
+
+  return <Animated.View style={[styles.ball, {opacity}]} />;
+};
+
+const App = () => {
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>{instructions}</Text>
+        <Ball onShown={() => Alert.alert('Animation is done')} />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  ball: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'salmon',
+    borderRadius: 100,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### Advanced
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=js
+import {useEffect} from 'react';
+import {
+  Alert,
+  Animated,
+  InteractionManager,
+  Platform,
+  StyleSheet,
+  Text,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const instructions = Platform.select({
+  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
+  android:
+    'Double tap R on your keyboard to reload,\n' +
+    'Shake or press menu button for dev menu',
+});
+
+// You can create a custom interaction/animation and add
+// support for InteractionManager
+const useCustomInteraction = (timeLocked = 2000) => {
+  useEffect(() => {
+    const handle = InteractionManager.createInteractionHandle();
+
+    setTimeout(
+      () => InteractionManager.clearInteractionHandle(handle),
+      timeLocked,
+    );
+
+    return () => InteractionManager.clearInteractionHandle(handle);
+  }, [timeLocked]);
+};
+
+const Ball = ({onInteractionIsDone}) => {
+  useCustomInteraction();
+
+  // Running a method after the interaction
+  useEffect(() => {
+    InteractionManager.runAfterInteractions(() => onInteractionIsDone());
+  }, [onInteractionIsDone]);
+
+  return <Animated.View style={[styles.ball]} />;
+};
+
+const App = () => {
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>{instructions}</Text>
+        <Ball onInteractionIsDone={() => Alert.alert('Interaction is done')} />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  ball: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'salmon',
+    borderRadius: 100,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=tsx
+import {useEffect} from 'react';
+import {
+  Alert,
+  Animated,
+  InteractionManager,
+  Platform,
+  StyleSheet,
+  Text,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const instructions = Platform.select({
+  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
+  android:
+    'Double tap R on your keyboard to reload,\n' +
+    'Shake or press menu button for dev menu',
+});
+
+// You can create a custom interaction/animation and add
+// support for InteractionManager
+const useCustomInteraction = (timeLocked = 2000) => {
+  useEffect(() => {
+    const handle = InteractionManager.createInteractionHandle();
+
+    setTimeout(
+      () => InteractionManager.clearInteractionHandle(handle),
+      timeLocked,
+    );
+
+    return () => InteractionManager.clearInteractionHandle(handle);
+  }, [timeLocked]);
+};
+
+type BallProps = {
+  onInteractionIsDone: () => void;
+};
+
+const Ball = ({onInteractionIsDone}: BallProps) => {
+  useCustomInteraction();
+
+  // Running a method after the interaction
+  useEffect(() => {
+    InteractionManager.runAfterInteractions(() => onInteractionIsDone());
+  }, [onInteractionIsDone]);
+
+  return <Animated.View style={[styles.ball]} />;
+};
+
+const App = () => {
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>{instructions}</Text>
+        <Ball onInteractionIsDone={() => Alert.alert('Interaction is done')} />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  ball: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'salmon',
+    borderRadius: 100,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+# Reference
+
+## Methods
+
+### `runAfterInteractions()`
+
+```tsx
+static runAfterInteractions(task?: (() => any) | SimpleTask | PromiseTask);
+```
+
+Schedule a function to run after all interactions have completed. Returns a cancellable "promise".
+
+---
+
+### `createInteractionHandle()`
+
+```tsx
+static createInteractionHandle(): Handle;
+```
+
+Notify manager that an interaction has started.
+
+---
+
+### `clearInteractionHandle()`
+
+```tsx
+static clearInteractionHandle(handle: Handle);
+```
+
+Notify manager that an interaction has completed.
+
+---
+
+### `setDeadline()`
+
+```tsx
+static setDeadline(deadline: number);
+```
+
+A positive number will use setTimeout to schedule any tasks after the eventLoopRunningTime hits the deadline value, otherwise all tasks will be executed in one setImmediate batch (default).
diff --git a/website/versioned_docs/version-0.80/intro-react-native-components.md b/website/versioned_docs/version-0.80/intro-react-native-components.md
index eb585964154..2f3a1449d28 100644
--- a/website/versioned_docs/version-0.80/intro-react-native-components.md
+++ b/website/versioned_docs/version-0.80/intro-react-native-components.md
@@ -43,7 +43,6 @@ React Native has many Core Components for everything from controls to activity i
 In the next section, you will start combining these Core Components to learn about how React works. Have a play with them here now!
 
 ```SnackPlayer name=Hello%20World
-import React from 'react';
 import {View, Text, Image, ScrollView, TextInput} from 'react-native';
 
 const App = () => {
diff --git a/website/versioned_docs/version-0.80/introduction.md b/website/versioned_docs/version-0.80/introduction.md
index cd807674a16..94e27bb5eaa 100644
--- a/website/versioned_docs/version-0.80/introduction.md
+++ b/website/versioned_docs/version-0.80/introduction.md
@@ -28,7 +28,6 @@ To work with React Native, you will need to have an understanding of JavaScript
 This introduction lets you get started immediately in your browser with interactive examples like this one:
 
 ```SnackPlayer name=Hello%20World
-import React from 'react';
 import {Text, View} from 'react-native';
 
 const YourApp = () => {
diff --git a/website/versioned_docs/version-0.80/javascript-environment.md b/website/versioned_docs/version-0.80/javascript-environment.md
index ab041dd34cd..2149516a93b 100644
--- a/website/versioned_docs/version-0.80/javascript-environment.md
+++ b/website/versioned_docs/version-0.80/javascript-environment.md
@@ -1,109 +1,109 @@
----
-id: javascript-environment
-title: JavaScript Environment
----
-
-import TableRow from '@site/core/TableRowWithCodeBlock';
-
-## JavaScript Runtime
-
-When using React Native, you're going to be running your JavaScript code in up to three environments:
-
-- In most cases, React Native will use [Hermes](hermes), an open-source JavaScript engine optimized for React Native.
-- If Hermes is disabled, React Native will use [JavaScriptCore](https://trac.webkit.org/wiki/JavaScriptCore), the JavaScript engine that powers Safari. Note that on iOS, JavaScriptCore does not use JIT due to the absence of writable executable memory in iOS apps.
-- When using Chrome debugging, all JavaScript code runs within Chrome itself, communicating with native code via WebSockets. Chrome uses [V8](https://v8.dev/) as its JavaScript engine.
-
-While these environments are very similar, you may end up hitting some inconsistencies. It is best to avoid relying on specifics of any runtime.
-
-## JavaScript Syntax Transformers
-
-Syntax transformers make writing code more enjoyable by allowing you to use new JavaScript syntax without having to wait for support on all interpreters.
-
-React Native ships with the [Babel JavaScript compiler](https://babeljs.io). Check [Babel documentation](https://babeljs.io/docs/plugins/#transform-plugins) on its supported transformations for more details.
-
-A full list of React Native's enabled transformations can be found in [@react-native/babel-preset](https://github.com/facebook/react-native/tree/main/packages/react-native-babel-preset).
-
-<table>
-<thead>
-  <tr><th>Transformation</th><th>Code</th></tr>
-</thead>
-<tbody>
-  <tr><td className="table-heading" colSpan="2">ECMAScript 5</td></tr>
-  <TableRow name="Reserved Words" code="promise.catch(function() {...});" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2015 (ES6)</td></tr>
-  <TableRow name="Arrow functions" code="<C onPress={() => this.setState({pressed: true})} />" url="https://babeljs.io/docs/learn-es2015/#arrows" />
-  <TableRow name="Block scoping" code="let greeting = 'hi';" url="https://babeljs.io/docs/learn-es2015/#let-const" />
-  <TableRow name="Call spread" code="Math.max(...array);" url="https://babeljs.io/docs/learn-es2015/#default-rest-spread" />
-  <TableRow name="Classes" code="class C extends React.Component {render() { return <View />; }}" url="https://babeljs.io/docs/learn-es2015/#classes" />
-  <TableRow name="Computed Properties" code="const key = 'abc'; const obj = {[key]: 10};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
-  <TableRow name="Constants" code="const answer = 42;" url="https://babeljs.io/docs/learn-es2015/#let-const" />
-  <TableRow name="Destructuring" code="const {isActive, style} = this.props;" url="https://babeljs.io/docs/learn-es2015/#destructuring" />
-  <TableRow name="for…of" code="for (var num of [1, 2, 3]) {...};" url="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of" />
-  <TableRow name="Function Name" code="let number = x => x;" url="https://babeljs.io/docs/en/babel-plugin-transform-function-name" />
-  <TableRow name="Literals" code="const b = 0b11; const o = 0o7; const u = 'Hello\u{000A}\u{0009}!';" url="https://babeljs.io/docs/en/babel-plugin-transform-literals" />
-  <TableRow name="Modules" code="import React, {Component} from 'react';" url="https://babeljs.io/docs/learn-es2015/#modules" />
-  <TableRow name="Object Concise Method" code="const obj = {method() { return 10; }};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
-  <TableRow name="Object Short Notation" code="const name = 'vjeux'; const obj = {name};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
-  <TableRow name="Parameters" code="function test(x = 'hello', {a, b}, ...args) {}" url="https://babeljs.io/docs/en/babel-plugin-transform-parameters" />
-  <TableRow name="Rest Params" code="function(type, ...args) {};" url="https://github.com/sebmarkbage/ecmascript-rest-spread" />
-  <TableRow name="Shorthand Properties" code="const o = {a, b, c};" url="https://babeljs.io/docs/en/babel-plugin-transform-shorthand-properties" />
-  <TableRow name="Sticky Regex" code="const a = /o+/y;" url="https://babeljs.io/docs/en/babel-plugin-transform-sticky-regex" />
-  <TableRow name="Template Literals" code="const who = 'world'; const str = `Hello ${who}`;" url="https://babeljs.io/docs/learn-es2015/#template-strings" />
-  <TableRow name="Unicode Regex" code="const string = 'foo💩bar'; const match = string.match(/foo(.)bar/u);" url="https://babeljs.io/docs/en/babel-plugin-transform-unicode-regex" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2016 (ES7)</td></tr>
-  <TableRow name="Exponentiation Operator" code="let x = 10 ** 2;" url="https://babeljs.io/docs/en/babel-plugin-transform-exponentiation-operator" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2017 (ES8)</td></tr>
-  <TableRow name="Async Functions" code="async function doStuffAsync() {const foo = await doOtherStuffAsync();};" url="https://github.com/tc39/ecmascript-asyncawait" />
-  <TableRow name="Function Trailing Comma" code="function f(a, b, c,) {};" url="https://github.com/jeffmo/es-trailing-function-commas" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2018 (ES9)</td></tr>
-  <TableRow name="Object Spread" code="const extended = {...obj, a: 10};" url="https://github.com/tc39/proposal-object-rest-spread" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2019 (ES10)</td></tr>
-  <TableRow name="Optional Catch Binding" code="try {throw 0; } catch { doSomethingWhichDoesNotCareAboutTheValueThrown();}" url="https://babeljs.io/docs/en/babel-plugin-proposal-optional-catch-binding" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2020 (ES11)</td></tr>
-  <TableRow name="Dynamic Imports" code="const package = await import('package'); package.function()" url="https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import" />
-  <TableRow name="Nullish Coalescing Operator" code="const foo = object.foo ?? 'default';" url="https://babeljs.io/docs/en/babel-plugin-proposal-nullish-coalescing-operator" />
-  <TableRow name="Optional Chaining" code="const name = obj.user?.name;" url="https://github.com/tc39/proposal-optional-chaining" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2022 (ES13)</td></tr>
-  <TableRow name="Class Fields" code="class Bork {static a = 'foo'; static b; x = 'bar'; y;}" url="https://babeljs.io/docs/en/babel-plugin-proposal-class-properties" />
-  <tr><td className="table-heading" colSpan="2">Stage 1 Proposal</td></tr>
-  <TableRow name="Export Default From" code="export v from 'mod';" url="https://babeljs.io/docs/en/babel-plugin-proposal-export-default-from" />
-  <tr><td className="table-heading" colSpan="2">Miscellaneous</td></tr>
-  <TableRow name="Babel Template" code="template(`const %%importName%% = require(%%source%%);`);" url="https://babeljs.io/docs/en/babel-template" />
-  <TableRow name="Flow" code="function foo(x: ?number): string {};" url="https://flowtype.org/" />
-  <TableRow name="ESM to CJS" code="export default 42;" url="https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs" />
-  <TableRow name="JSX" code="<View style={{color: 'red'}} />" url="https://react.dev/learn/writing-markup-with-jsx" />
-  <TableRow name="Object Assign" code="Object.assign(a, b);" url="https://babeljs.io/docs/en/babel-plugin-transform-object-assign" />
-  <TableRow name="React Display Name" code="const bar = createReactClass({});" url="https://babeljs.io/docs/en/babel-plugin-transform-react-display-name" />
-  <TableRow name="TypeScript" code="function foo(x: {hello: true, target: 'react native!'}): string {};" url="https://www.typescriptlang.org/" />
-</tbody>
-</table>
-
-## Polyfills
-
-Many standard functions are also available on all the supported JavaScript runtimes.
-
-#### Browser
-
-- [CommonJS `require`](https://nodejs.org/docs/latest/api/modules.html)
-- `md [console.{log, warn, error, info, debug, trace, table, group, groupCollapsed, groupEnd}](https://developer.chrome.com/devtools/docs/console-api)`
-- [`XMLHttpRequest`, `fetch`](network.md#content)
-- [`{set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame`](timers.md#content)
-
-#### ECMAScript 2015 (ES6)
-
-- [`Array.from`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from)
-- `md Array.prototype.{[find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find), [findIndex](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)}`
-- [`Object.assign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
-- `md String.prototype.{[startsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith), [endsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith), [repeat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat), [includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes)}`
-
-#### ECMAScript 2016 (ES7)
-
-- `md Array.prototype.[includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)`
-
-#### ECMAScript 2017 (ES8)
-
-- `md Object.{[entries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries), [values](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values)}`
-
-#### Specific
-
-- `__DEV__`
+---
+id: javascript-environment
+title: JavaScript Environment
+---
+
+import TableRow from '@site/core/TableRowWithCodeBlock';
+
+## JavaScript Runtime
+
+When using React Native, you're going to be running your JavaScript code in up to three environments:
+
+- In most cases, React Native will use [Hermes](hermes), an open-source JavaScript engine optimized for React Native.
+- If Hermes is disabled, React Native will use [JavaScriptCore](https://trac.webkit.org/wiki/JavaScriptCore), the JavaScript engine that powers Safari. Note that on iOS, JavaScriptCore does not use JIT due to the absence of writable executable memory in iOS apps.
+- When using Chrome debugging, all JavaScript code runs within Chrome itself, communicating with native code via WebSockets. Chrome uses [V8](https://v8.dev/) as its JavaScript engine.
+
+While these environments are very similar, you may end up hitting some inconsistencies. It is best to avoid relying on specifics of any runtime.
+
+## JavaScript Syntax Transformers
+
+Syntax transformers make writing code more enjoyable by allowing you to use new JavaScript syntax without having to wait for support on all interpreters.
+
+React Native ships with the [Babel JavaScript compiler](https://babeljs.io). Check [Babel documentation](https://babeljs.io/docs/plugins/#transform-plugins) on its supported transformations for more details.
+
+A full list of React Native's enabled transformations can be found in [@react-native/babel-preset](https://github.com/facebook/react-native/tree/main/packages/react-native-babel-preset).
+
+<table>
+<thead>
+  <tr><th>Transformation</th><th>Code</th></tr>
+</thead>
+<tbody>
+  <tr><td className="table-heading" colSpan="2">ECMAScript 5</td></tr>
+  <TableRow name="Reserved Words" code="promise.catch(function() {...});" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2015 (ES6)</td></tr>
+  <TableRow name="Arrow functions" code="<C onPress={() => this.setState({pressed: true})} />" url="https://babeljs.io/docs/learn-es2015/#arrows" />
+  <TableRow name="Block scoping" code="let greeting = 'hi';" url="https://babeljs.io/docs/learn-es2015/#let-const" />
+  <TableRow name="Call spread" code="Math.max(...array);" url="https://babeljs.io/docs/learn-es2015/#default-rest-spread" />
+  <TableRow name="Classes" code="class C extends React.Component {render() { return <View />; }}" url="https://babeljs.io/docs/learn-es2015/#classes" />
+  <TableRow name="Computed Properties" code="const key = 'abc'; const obj = {[key]: 10};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
+  <TableRow name="Constants" code="const answer = 42;" url="https://babeljs.io/docs/learn-es2015/#let-const" />
+  <TableRow name="Destructuring" code="const {isActive, style} = this.props;" url="https://babeljs.io/docs/learn-es2015/#destructuring" />
+  <TableRow name="for…of" code="for (var num of [1, 2, 3]) {...};" url="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of" />
+  <TableRow name="Function Name" code="let number = x => x;" url="https://babeljs.io/docs/en/babel-plugin-transform-function-name" />
+  <TableRow name="Literals" code="const b = 0b11; const o = 0o7; const u = 'Hello\u{000A}\u{0009}!';" url="https://babeljs.io/docs/en/babel-plugin-transform-literals" />
+  <TableRow name="Modules" code="import {Component} from 'react';" url="https://babeljs.io/docs/learn-es2015/#modules" />
+  <TableRow name="Object Concise Method" code="const obj = {method() { return 10; }};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
+  <TableRow name="Object Short Notation" code="const name = 'vjeux'; const obj = {name};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
+  <TableRow name="Parameters" code="function test(x = 'hello', {a, b}, ...args) {}" url="https://babeljs.io/docs/en/babel-plugin-transform-parameters" />
+  <TableRow name="Rest Params" code="function(type, ...args) {};" url="https://github.com/sebmarkbage/ecmascript-rest-spread" />
+  <TableRow name="Shorthand Properties" code="const o = {a, b, c};" url="https://babeljs.io/docs/en/babel-plugin-transform-shorthand-properties" />
+  <TableRow name="Sticky Regex" code="const a = /o+/y;" url="https://babeljs.io/docs/en/babel-plugin-transform-sticky-regex" />
+  <TableRow name="Template Literals" code="const who = 'world'; const str = `Hello ${who}`;" url="https://babeljs.io/docs/learn-es2015/#template-strings" />
+  <TableRow name="Unicode Regex" code="const string = 'foo💩bar'; const match = string.match(/foo(.)bar/u);" url="https://babeljs.io/docs/en/babel-plugin-transform-unicode-regex" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2016 (ES7)</td></tr>
+  <TableRow name="Exponentiation Operator" code="let x = 10 ** 2;" url="https://babeljs.io/docs/en/babel-plugin-transform-exponentiation-operator" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2017 (ES8)</td></tr>
+  <TableRow name="Async Functions" code="async function doStuffAsync() {const foo = await doOtherStuffAsync();};" url="https://github.com/tc39/ecmascript-asyncawait" />
+  <TableRow name="Function Trailing Comma" code="function f(a, b, c,) {};" url="https://github.com/jeffmo/es-trailing-function-commas" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2018 (ES9)</td></tr>
+  <TableRow name="Object Spread" code="const extended = {...obj, a: 10};" url="https://github.com/tc39/proposal-object-rest-spread" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2019 (ES10)</td></tr>
+  <TableRow name="Optional Catch Binding" code="try {throw 0; } catch { doSomethingWhichDoesNotCareAboutTheValueThrown();}" url="https://babeljs.io/docs/en/babel-plugin-proposal-optional-catch-binding" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2020 (ES11)</td></tr>
+  <TableRow name="Dynamic Imports" code="const package = await import('package'); package.function()" url="https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import" />
+  <TableRow name="Nullish Coalescing Operator" code="const foo = object.foo ?? 'default';" url="https://babeljs.io/docs/en/babel-plugin-proposal-nullish-coalescing-operator" />
+  <TableRow name="Optional Chaining" code="const name = obj.user?.name;" url="https://github.com/tc39/proposal-optional-chaining" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2022 (ES13)</td></tr>
+  <TableRow name="Class Fields" code="class Bork {static a = 'foo'; static b; x = 'bar'; y;}" url="https://babeljs.io/docs/en/babel-plugin-proposal-class-properties" />
+  <tr><td className="table-heading" colSpan="2">Stage 1 Proposal</td></tr>
+  <TableRow name="Export Default From" code="export v from 'mod';" url="https://babeljs.io/docs/en/babel-plugin-proposal-export-default-from" />
+  <tr><td className="table-heading" colSpan="2">Miscellaneous</td></tr>
+  <TableRow name="Babel Template" code="template(`const %%importName%% = require(%%source%%);`);" url="https://babeljs.io/docs/en/babel-template" />
+  <TableRow name="Flow" code="function foo(x: ?number): string {};" url="https://flowtype.org/" />
+  <TableRow name="ESM to CJS" code="export default 42;" url="https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs" />
+  <TableRow name="JSX" code="<View style={{color: 'red'}} />" url="https://react.dev/learn/writing-markup-with-jsx" />
+  <TableRow name="Object Assign" code="Object.assign(a, b);" url="https://babeljs.io/docs/en/babel-plugin-transform-object-assign" />
+  <TableRow name="React Display Name" code="const bar = createReactClass({});" url="https://babeljs.io/docs/en/babel-plugin-transform-react-display-name" />
+  <TableRow name="TypeScript" code="function foo(x: {hello: true, target: 'react native!'}): string {};" url="https://www.typescriptlang.org/" />
+</tbody>
+</table>
+
+## Polyfills
+
+Many standard functions are also available on all the supported JavaScript runtimes.
+
+#### Browser
+
+- [CommonJS `require`](https://nodejs.org/docs/latest/api/modules.html)
+- `md [console.{log, warn, error, info, debug, trace, table, group, groupCollapsed, groupEnd}](https://developer.chrome.com/devtools/docs/console-api)`
+- [`XMLHttpRequest`, `fetch`](network.md#content)
+- [`{set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame`](timers.md#content)
+
+#### ECMAScript 2015 (ES6)
+
+- [`Array.from`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from)
+- `md Array.prototype.{[find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find), [findIndex](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)}`
+- [`Object.assign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
+- `md String.prototype.{[startsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith), [endsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith), [repeat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat), [includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes)}`
+
+#### ECMAScript 2016 (ES7)
+
+- `md Array.prototype.[includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)`
+
+#### ECMAScript 2017 (ES8)
+
+- `md Object.{[entries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries), [values](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values)}`
+
+#### Specific
+
+- `__DEV__`
diff --git a/website/versioned_docs/version-0.80/keyboard.md b/website/versioned_docs/version-0.80/keyboard.md
index f09f30b85aa..613f221af94 100644
--- a/website/versioned_docs/version-0.80/keyboard.md
+++ b/website/versioned_docs/version-0.80/keyboard.md
@@ -1,144 +1,144 @@
----
-id: keyboard
-title: Keyboard
----
-
-`Keyboard` module to control keyboard events.
-
-### Usage
-
-The Keyboard module allows you to listen for native events and react to them, as well as make changes to the keyboard, like dismissing it.
-
-```SnackPlayer name=Keyboard%20Example&supportedPlatforms=ios,android
-import React, {useState, useEffect} from 'react';
-import {Keyboard, Text, TextInput, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const Example = () => {
-  const [keyboardStatus, setKeyboardStatus] = useState('Keyboard Hidden');
-
-  useEffect(() => {
-    const showSubscription = Keyboard.addListener('keyboardDidShow', () => {
-      setKeyboardStatus('Keyboard Shown');
-    });
-    const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
-      setKeyboardStatus('Keyboard Hidden');
-    });
-
-    return () => {
-      showSubscription.remove();
-      hideSubscription.remove();
-    };
-  }, []);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={style.container}>
-        <TextInput
-          style={style.input}
-          placeholder="Click here…"
-          onSubmitEditing={Keyboard.dismiss}
-        />
-        <Text style={style.status}>{keyboardStatus}</Text>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const style = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 36,
-  },
-  input: {
-    padding: 10,
-    borderWidth: 0.5,
-    borderRadius: 4,
-  },
-  status: {
-    padding: 16,
-    textAlign: 'center',
-  },
-});
-
-export default Example;
-```
-
----
-
-# Reference
-
-## Methods
-
-### `addListener()`
-
-```tsx
-static addListener: (
-  eventType: KeyboardEventName,
-  listener: KeyboardEventListener,
-) => EmitterSubscription;
-```
-
-The `addListener` function connects a JavaScript function to an identified native keyboard notification event.
-
-This function then returns the reference to the listener.
-
-**Parameters:**
-
-| Name                                                                     | Type     | Description                                                                    |
-| ------------------------------------------------------------------------ | -------- | ------------------------------------------------------------------------------ |
-| eventName <div className="label basic two-lines required">Required</div> | string   | The string that identifies the event you're listening for. See the list below. |
-| callback <div className="label basic two-lines required">Required</div>  | function | The function to be called when the event fires                                 |
-
-**`eventName`**
-
-This can be any of the following:
-
-- `keyboardWillShow`
-- `keyboardDidShow`
-- `keyboardWillHide`
-- `keyboardDidHide`
-- `keyboardWillChangeFrame`
-- `keyboardDidChangeFrame`
-
-> Note that only `keyboardDidShow` and `keyboardDidHide` events are available on Android. The events will not be fired when using Android 10 and under if your activity has `android:windowSoftInputMode` set to `adjustNothing`.
-
----
-
-### `dismiss()`
-
-```tsx
-static dismiss();
-```
-
-Dismisses the active keyboard and removes focus.
-
----
-
-### `scheduleLayoutAnimation`
-
-```tsx
-static scheduleLayoutAnimation(event: KeyboardEvent);
-```
-
-Useful for syncing TextInput (or other keyboard accessory view) size of position changes with keyboard movements.
-
----
-
-### `isVisible()`
-
-```tsx
-static isVisible(): boolean;
-```
-
-Whether the keyboard is last known to be visible.
-
----
-
-### `metrics()`
-
-```tsx
-static metrics(): KeyboardMetrics | undefined;
-```
-
-Return the metrics of the soft-keyboard if visible.
+---
+id: keyboard
+title: Keyboard
+---
+
+`Keyboard` module to control keyboard events.
+
+### Usage
+
+The Keyboard module allows you to listen for native events and react to them, as well as make changes to the keyboard, like dismissing it.
+
+```SnackPlayer name=Keyboard%20Example&supportedPlatforms=ios,android
+import {useState, useEffect} from 'react';
+import {Keyboard, Text, TextInput, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const Example = () => {
+  const [keyboardStatus, setKeyboardStatus] = useState('Keyboard Hidden');
+
+  useEffect(() => {
+    const showSubscription = Keyboard.addListener('keyboardDidShow', () => {
+      setKeyboardStatus('Keyboard Shown');
+    });
+    const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
+      setKeyboardStatus('Keyboard Hidden');
+    });
+
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={style.container}>
+        <TextInput
+          style={style.input}
+          placeholder="Click here…"
+          onSubmitEditing={Keyboard.dismiss}
+        />
+        <Text style={style.status}>{keyboardStatus}</Text>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const style = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 36,
+  },
+  input: {
+    padding: 10,
+    borderWidth: 0.5,
+    borderRadius: 4,
+  },
+  status: {
+    padding: 16,
+    textAlign: 'center',
+  },
+});
+
+export default Example;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `addListener()`
+
+```tsx
+static addListener: (
+  eventType: KeyboardEventName,
+  listener: KeyboardEventListener,
+) => EmitterSubscription;
+```
+
+The `addListener` function connects a JavaScript function to an identified native keyboard notification event.
+
+This function then returns the reference to the listener.
+
+**Parameters:**
+
+| Name                                                                     | Type     | Description                                                                    |
+| ------------------------------------------------------------------------ | -------- | ------------------------------------------------------------------------------ |
+| eventName <div className="label basic two-lines required">Required</div> | string   | The string that identifies the event you're listening for. See the list below. |
+| callback <div className="label basic two-lines required">Required</div>  | function | The function to be called when the event fires                                 |
+
+**`eventName`**
+
+This can be any of the following:
+
+- `keyboardWillShow`
+- `keyboardDidShow`
+- `keyboardWillHide`
+- `keyboardDidHide`
+- `keyboardWillChangeFrame`
+- `keyboardDidChangeFrame`
+
+> Note that only `keyboardDidShow` and `keyboardDidHide` events are available on Android. The events will not be fired when using Android 10 and under if your activity has `android:windowSoftInputMode` set to `adjustNothing`.
+
+---
+
+### `dismiss()`
+
+```tsx
+static dismiss();
+```
+
+Dismisses the active keyboard and removes focus.
+
+---
+
+### `scheduleLayoutAnimation`
+
+```tsx
+static scheduleLayoutAnimation(event: KeyboardEvent);
+```
+
+Useful for syncing TextInput (or other keyboard accessory view) size of position changes with keyboard movements.
+
+---
+
+### `isVisible()`
+
+```tsx
+static isVisible(): boolean;
+```
+
+Whether the keyboard is last known to be visible.
+
+---
+
+### `metrics()`
+
+```tsx
+static metrics(): KeyboardMetrics | undefined;
+```
+
+Return the metrics of the soft-keyboard if visible.
diff --git a/website/versioned_docs/version-0.80/keyboardavoidingview.md b/website/versioned_docs/version-0.80/keyboardavoidingview.md
index b77375008f8..b8966e4132c 100644
--- a/website/versioned_docs/version-0.80/keyboardavoidingview.md
+++ b/website/versioned_docs/version-0.80/keyboardavoidingview.md
@@ -8,7 +8,6 @@ This component will automatically adjust its height, position, or bottom padding
 ## Example
 
 ```SnackPlayer name=KeyboardAvoidingView&supportedPlatforms=android,ios
-import React from 'react';
 import {
   View,
   KeyboardAvoidingView,
diff --git a/website/versioned_docs/version-0.80/layout-props.md b/website/versioned_docs/version-0.80/layout-props.md
index b3673e0c849..0d10649d7d6 100644
--- a/website/versioned_docs/version-0.80/layout-props.md
+++ b/website/versioned_docs/version-0.80/layout-props.md
@@ -1,1360 +1,1360 @@
----
-id: layout-props
-title: Layout Props
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-:::info
-More detailed examples about those properties can be found on the [Layout with Flexbox](flexbox) page.
-:::
-
-### Example
-
-The following example shows how different properties can affect or shape a React Native layout. You can try for example to add or remove squares from the UI while changing the values of the property `flexWrap`.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=LayoutProps%20Example&ext=js
-import React, {useState} from 'react';
-import {Button, ScrollView, StyleSheet, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [flexDirection, setFlexDirection] = useState(0);
-  const [justifyContent, setJustifyContent] = useState(0);
-  const [alignItems, setAlignItems] = useState(0);
-  const [direction, setDirection] = useState(0);
-  const [wrap, setWrap] = useState(0);
-
-  const [squares, setSquares] = useState([<Square />, <Square />, <Square />]);
-
-  const hookedStyles = {
-    flexDirection: flexDirections[flexDirection],
-    justifyContent: justifyContents[justifyContent],
-    alignItems: alignItemsArr[alignItems],
-    direction: directions[direction],
-    flexWrap: wraps[wrap],
-  };
-
-  const changeSetting = (value, options, setterFunction) => {
-    if (value === options.length - 1) {
-      setterFunction(0);
-      return;
-    }
-    setterFunction(value + 1);
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={[styles.container, styles.playingSpace, hookedStyles]}>
-          {squares.map(elem => elem)}
-        </View>
-        <ScrollView style={styles.layoutContainer}>
-          <View style={styles.controlSpace}>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Flex Direction"
-                onPress={() =>
-                  changeSetting(flexDirection, flexDirections, setFlexDirection)
-                }
-              />
-              <Text style={styles.text}>{flexDirections[flexDirection]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Justify Content"
-                onPress={() =>
-                  changeSetting(
-                    justifyContent,
-                    justifyContents,
-                    setJustifyContent,
-                  )
-                }
-              />
-              <Text style={styles.text}>{justifyContents[justifyContent]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Align Items"
-                onPress={() =>
-                  changeSetting(alignItems, alignItemsArr, setAlignItems)
-                }
-              />
-              <Text style={styles.text}>{alignItemsArr[alignItems]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Direction"
-                onPress={() =>
-                  changeSetting(direction, directions, setDirection)
-                }
-              />
-              <Text style={styles.text}>{directions[direction]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Flex Wrap"
-                onPress={() => changeSetting(wrap, wraps, setWrap)}
-              />
-              <Text style={styles.text}>{wraps[wrap]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Add Square"
-                onPress={() => setSquares([...squares, <Square />])}
-              />
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Delete Square"
-                onPress={() =>
-                  setSquares(squares.filter((v, i) => i !== squares.length - 1))
-                }
-              />
-            </View>
-          </View>
-        </ScrollView>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const flexDirections = ['row', 'row-reverse', 'column', 'column-reverse'];
-const justifyContents = [
-  'flex-start',
-  'flex-end',
-  'center',
-  'space-between',
-  'space-around',
-  'space-evenly',
-];
-const alignItemsArr = [
-  'flex-start',
-  'flex-end',
-  'center',
-  'stretch',
-  'baseline',
-];
-const wraps = ['nowrap', 'wrap', 'wrap-reverse'];
-const directions = ['inherit', 'ltr', 'rtl'];
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  layoutContainer: {
-    flex: 0.5,
-  },
-  playingSpace: {
-    backgroundColor: 'white',
-    borderColor: 'blue',
-    borderWidth: 3,
-    overflow: 'hidden',
-  },
-  controlSpace: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  buttonView: {
-    width: '50%',
-    padding: 10,
-  },
-  text: {
-    textAlign: 'center',
-  },
-});
-
-const Square = () => (
-  <View
-    style={{
-      width: 50,
-      height: 50,
-      backgroundColor: randomHexColor(),
-    }}
-  />
-);
-
-const randomHexColor = () => {
-  return '#000000'.replace(/0/g, () => {
-    return Math.round(Math.random() * 14).toString(16);
-  });
-};
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=LayoutProps%20Example&ext=tsx
-import React, {useState} from 'react';
-import {
-  Button,
-  ScrollView,
-  StyleSheet,
-  Text,
-  View,
-  FlexAlignType,
-  FlexStyle,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [flexDirection, setFlexDirection] = useState(0);
-  const [justifyContent, setJustifyContent] = useState(0);
-  const [alignItems, setAlignItems] = useState(0);
-  const [direction, setDirection] = useState(0);
-  const [wrap, setWrap] = useState(0);
-
-  const [squares, setSquares] = useState([<Square />, <Square />, <Square />]);
-
-  const hookedStyles = {
-    flexDirection: flexDirections[flexDirection],
-    justifyContent: justifyContents[justifyContent],
-    alignItems: alignItemsArr[alignItems],
-    direction: directions[direction],
-    flexWrap: wraps[wrap],
-  } as FlexStyle;
-
-  const changeSetting = (
-    value: number,
-    options: any[],
-    setterFunction: (index: number) => void,
-  ) => {
-    if (value === options.length - 1) {
-      setterFunction(0);
-      return;
-    }
-    setterFunction(value + 1);
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={[styles.container, styles.playingSpace, hookedStyles]}>
-          {squares.map(elem => elem)}
-        </View>
-        <ScrollView style={styles.layoutContainer}>
-          <View style={styles.controlSpace}>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Flex Direction"
-                onPress={() =>
-                  changeSetting(flexDirection, flexDirections, setFlexDirection)
-                }
-              />
-              <Text style={styles.text}>{flexDirections[flexDirection]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Justify Content"
-                onPress={() =>
-                  changeSetting(
-                    justifyContent,
-                    justifyContents,
-                    setJustifyContent,
-                  )
-                }
-              />
-              <Text style={styles.text}>{justifyContents[justifyContent]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Align Items"
-                onPress={() =>
-                  changeSetting(alignItems, alignItemsArr, setAlignItems)
-                }
-              />
-              <Text style={styles.text}>{alignItemsArr[alignItems]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Direction"
-                onPress={() =>
-                  changeSetting(direction, directions, setDirection)
-                }
-              />
-              <Text style={styles.text}>{directions[direction]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Flex Wrap"
-                onPress={() => changeSetting(wrap, wraps, setWrap)}
-              />
-              <Text style={styles.text}>{wraps[wrap]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Add Square"
-                onPress={() => setSquares([...squares, <Square />])}
-              />
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Delete Square"
-                onPress={() =>
-                  setSquares(squares.filter((v, i) => i !== squares.length - 1))
-                }
-              />
-            </View>
-          </View>
-        </ScrollView>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const flexDirections = [
-  'row',
-  'row-reverse',
-  'column',
-  'column-reverse',
-] as FlexStyle['flexDirection'][];
-const justifyContents = [
-  'flex-start',
-  'flex-end',
-  'center',
-  'space-between',
-  'space-around',
-  'space-evenly',
-] as FlexStyle['justifyContent'][];
-const alignItemsArr = [
-  'flex-start',
-  'flex-end',
-  'center',
-  'stretch',
-  'baseline',
-] as FlexAlignType[];
-const wraps = ['nowrap', 'wrap', 'wrap-reverse'];
-const directions = ['inherit', 'ltr', 'rtl'];
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  layoutContainer: {
-    flex: 0.5,
-  },
-  playingSpace: {
-    backgroundColor: 'white',
-    borderColor: 'blue',
-    borderWidth: 3,
-    overflow: 'hidden',
-  },
-  controlSpace: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  buttonView: {
-    width: '50%',
-    padding: 10,
-  },
-  text: {
-    textAlign: 'center',
-  },
-});
-
-const Square = () => (
-  <View
-    style={{
-      width: 50,
-      height: 50,
-      backgroundColor: randomHexColor(),
-    }}
-  />
-);
-
-const randomHexColor = () => {
-  return '#000000'.replace(/0/g, () => {
-    return Math.round(Math.random() * 14).toString(16);
-  });
-};
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
----
-
-# Reference
-
-## Props
-
-### `alignContent`
-
-`alignContent` controls how rows align in the cross direction, overriding the `alignContent` of the parent.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) for more details.
-
-| Type                                                                                                 | Required |
-| ---------------------------------------------------------------------------------------------------- | -------- |
-| enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around', 'space-evenly') | No       |
-
----
-
-### `alignItems`
-
-`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS (default: stretch).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) for more details.
-
-| Type                                                            | Required |
-| --------------------------------------------------------------- | -------- |
-| enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline') | No       |
-
----
-
-### `alignSelf`
-
-`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS (default: auto).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) for more details.
-
-| Type                                                                    | Required |
-| ----------------------------------------------------------------------- | -------- |
-| enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline') | No       |
-
----
-
-### `aspectRatio`
-
-Aspect ratio controls the size of the undefined dimension of a node.
-
-- On a node with a set width/height, aspect ratio controls the size of the unset dimension
-- On a node with a set flex basis, aspect ratio controls the size of the node in the cross axis if unset
-- On a node with a measure function, aspect ratio works as though the measure function measures the flex basis
-- On a node with flex grow/shrink, aspect ratio controls the size of the node in the cross axis if unset
-- Aspect ratio takes min/max dimensions into account
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `borderBottomWidth`
-
-`borderBottomWidth` works like `border-bottom-width` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderEndWidth`
-
-When direction is `ltr`, `borderEndWidth` is equivalent to `borderRightWidth`. When direction is `rtl`, `borderEndWidth` is equivalent to `borderLeftWidth`.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderLeftWidth`
-
-`borderLeftWidth` works like `border-left-width` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderRightWidth`
-
-`borderRightWidth` works like `border-right-width` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderStartWidth`
-
-When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. When direction is `rtl`, `borderStartWidth` is equivalent to `borderRightWidth`.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderTopWidth`
-
-`borderTopWidth` works like `border-top-width` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderWidth`
-
-`borderWidth` works like `border-width` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `bottom`
-
-`bottom` is the number of logical pixels to offset the bottom edge of this component.
-
-It works similarly to `bottom` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) for more details of how `bottom` affects layout.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `boxSizing`
-
-`boxSizing` defines how the element's various sizing props (`width`, `height`, `minWidth`, `minHeight`, etc.) are computed. If `boxSizing` is `border-box`, these sizes apply to the border box of the element. If it is `content-box`, they apply to the content box of the element. The default value is `border-box`. The [web documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) is a good source of information if you wish to learn more about how this prop works.
-
-| Type                              | Required |
-| --------------------------------- | -------- |
-| enum('border-box', 'content-box') | No       |
-
----
-
-### `columnGap`
-
-`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `direction`
-
-`direction` specifies the directional flow of the user interface. The default is `inherit`, except for root node which will have value based on the current locale.
-
-See [MDN CSS Reference](https://www.yogalayout.dev/docs/styling/layout-direction) for more details.
-
-| Type                          | Required |
-| ----------------------------- | -------- |
-| enum('inherit', 'ltr', 'rtl') | No       |
-
----
-
-### `display`
-
-`display` sets the display type of this component.
-
-It works similarly to `display` in CSS but only supports the values 'flex', 'none', and 'contents'. The default is `flex`.
-
-| Type                             | Required |
-| -------------------------------- | -------- |
-| enum('none', 'flex', 'contents') | No       |
-
----
-
-### `end`
-
-When the direction is `ltr`, `end` is equivalent to `right`. When the direction is `rtl`, `end` is equivalent to `left`.
-
-This style takes precedence over the `left` and `right` styles.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `flex`
-
-In React Native `flex` does not work the same way that it does in CSS. `flex` is a number rather than a string, and it works according to the [Yoga](https://github.com/facebook/yoga) layout engine.
-
-When `flex` is a positive number, it makes the component flexible, and it will be sized proportional to its flex value. So a component with `flex` set to `2` will take twice the space as a component with `flex` set to 1. `flex: <positive number>` equates to `flexGrow: <positive number>, flexShrink: 1, flexBasis: 0`.
-
-When `flex` is `0`, the component is sized according to `width` and `height`, and it is inflexible.
-
-When `flex` is `-1`, the component is normally sized according to `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`.
-
-`flexGrow`, `flexShrink`, and `flexBasis` work the same as in CSS.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `flexBasis`
-
-`flexBasis` is an axis-independent way of providing the default size of an item along the main axis. Setting the `flexBasis` of a child is similar to setting the `width` of that child if its parent is a container with `flexDirection: row` or setting the `height` of a child if its parent is a container with `flexDirection: column`. The `flexBasis` of an item is the default size of that item, the size of the item before any `flexGrow` and `flexShrink` calculations are performed.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `flexDirection`
-
-`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) for more details.
-
-| Type                                                   | Required |
-| ------------------------------------------------------ | -------- |
-| enum('row', 'row-reverse', 'column', 'column-reverse') | No       |
-
----
-
-### `flexGrow`
-
-`flexGrow` describes how any space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
-
-`flexGrow` accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the children’s `flexGrow` values.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `flexShrink`
-
-[`flexShrink`](layout-props#flexshrink) describes how to shrink children along the main axis in the case in which the total size of the children overflows the size of the container on the main axis. `flexShrink` is very similar to `flexGrow` and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed.
-
-`flexShrink` accepts any floating point value >= 0, with 0 being the default value. A container will shrink its children weighted by the children’s `flexShrink` values.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `flexWrap`
-
-`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS (default: nowrap).
-
-Note it does not work anymore with `alignItems: stretch` (the default), so you may want to use `alignItems: flex-start` for example (breaking change details: https://github.com/facebook/react-native/releases/tag/v0.28.0).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) for more details.
-
-| Type                                   | Required |
-| -------------------------------------- | -------- |
-| enum('wrap', 'nowrap', 'wrap-reverse') | No       |
-
----
-
-### `gap`
-
-`gap` works like `gap` in CSS. Only pixel units are supported in React Native.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `height`
-
-`height` sets the height of this component.
-
-It works similarly to `height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/height) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `inset`
-
-:::note
-`inset` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Setting `inset` has the same effect as setting each of `top`, `bottom`, `right` and `left` props.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/inset) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetBlock`
-
-:::note
-`insetBlock` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Equivalent to [`top`](layout-props#top) and [`bottom`](layout-props#bottom).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetBlockEnd`
-
-:::note
-`insetBlockEnd` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Equivalent to [`bottom`](layout-props#bottom).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetBlockStart`
-
-:::note
-`insetBlockStart` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Equivalent to [`top`](layout-props#top).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetInline`
-
-:::note
-`insetInline` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Equivalent to [`right`](layout-props#right) and [`left`](layout-props#left).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetInlineEnd`
-
-:::note
-`insetInlineEnd` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-When direction is `ltr`, `insetInlineEnd` is equivalent to [`right`](layout-props#right). When direction is `rtl`, `insetInlineEnd` is equivalent to [`left`](layout-props#left).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetInlineStart`
-
-:::note
-`insetInlineStart` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-When direction is `ltr`, `insetInlineStart` is equivalent to [`left`](layout-props#left). When direction is `rtl`, `insetInlineStart` is equivalent to [`right`](layout-props#right).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `isolation`
-
-:::note
-`isolation` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-`isolation` lets you form a [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context).
-
-There are two values:
-
-- `auto` (default): Does nothing.
-- `isolate`: Forms a stacking context.
-
-| Type                    | Required |
-| ----------------------- | -------- |
-| enum('auto', 'isolate') | No       |
-
----
-
-### `justifyContent`
-
-`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS (default: flex-start).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) for more details.
-
-| Type                                                                                      | Required |
-| ----------------------------------------------------------------------------------------- | -------- |
-| enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly') | No       |
-
----
-
-### `left`
-
-`left` is the number of logical pixels to offset the left edge of this component.
-
-It works similarly to `left` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/left) for more details of how `left` affects layout.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `margin`
-
-Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginBottom`
-
-`marginBottom` works like `margin-bottom` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginBlock`
-
-Equivalent to [`marginVertical`](layout-props#marginvertical).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginBlockEnd`
-
-Equivalent to [`marginBottom`](layout-props#marginbottom).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginBlockStart`
-
-Equivalent to [`marginTop`](layout-props#margintop).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginEnd`
-
-When direction is `ltr`, `marginEnd` is equivalent to `marginRight`. When direction is `rtl`, `marginEnd` is equivalent to `marginLeft`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginHorizontal`
-
-Setting `marginHorizontal` has the same effect as setting both `marginLeft` and `marginRight`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginInline`
-
-Equivalent to [`marginHorizontal`](layout-props#marginhorizontal).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginInlineEnd`
-
-When direction is `ltr`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginRight`). When direction is `rtl`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginLeft`).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginInlineStart`
-
-When direction is `ltr`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginLeft`). When direction is `rtl`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginRight`).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginLeft`
-
-`marginLeft` works like `margin-left` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginRight`
-
-`marginRight` works like `margin-right` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginStart`
-
-When direction is `ltr`, `marginStart` is equivalent to `marginLeft`. When direction is `rtl`, `marginStart` is equivalent to `marginRight`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginTop`
-
-`marginTop` works like `margin-top` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginVertical`
-
-Setting `marginVertical` has the same effect as setting both `marginTop` and `marginBottom`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `maxHeight`
-
-`maxHeight` is the maximum height for this component, in logical pixels.
-
-It works similarly to `max-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `maxWidth`
-
-`maxWidth` is the maximum width for this component, in logical pixels.
-
-It works similarly to `max-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `minHeight`
-
-`minHeight` is the minimum height for this component, in logical pixels.
-
-It works similarly to `min-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `minWidth`
-
-`minWidth` is the minimum width for this component, in logical pixels.
-
-It works similarly to `min-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `overflow`
-
-`overflow` controls how children are measured and displayed. `overflow: hidden` causes views to be clipped while `overflow: scroll` causes views to be measured independently of their parents' main axis. It works like `overflow` in CSS (default: visible).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) for more details.
-
-| Type                                | Required |
-| ----------------------------------- | -------- |
-| enum('visible', 'hidden', 'scroll') | No       |
-
----
-
-### `padding`
-
-Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingBottom`
-
-`paddingBottom` works like `padding-bottom` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingBlock`
-
-Equivalent to [`paddingVertical`](layout-props#paddingvertical).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingBlockEnd`
-
-Equivalent to [`paddingBottom`](layout-props#paddingbottom).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingBlockStart`
-
-Equivalent to [`paddingTop`](layout-props#paddingtop).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingEnd`
-
-When direction is `ltr`, `paddingEnd` is equivalent to `paddingRight`. When direction is `rtl`, `paddingEnd` is equivalent to `paddingLeft`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingHorizontal`
-
-Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRight`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingInline`
-
-Equivalent to [`paddingHorizontal`](layout-props#paddinghorizontal).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingInlineEnd`
-
-When direction is `ltr`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingRight`). When direction is `rtl`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingLeft`).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingInlineStart`
-
-When direction is `ltr`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingLeft`). When direction is `rtl`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingRight`).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingLeft`
-
-`paddingLeft` works like `padding-left` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingRight`
-
-`paddingRight` works like `padding-right` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingStart`
-
-When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`. When direction is `rtl`, `paddingStart` is equivalent to `paddingRight`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingTop`
-
-`paddingTop` works like `padding-top` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingVertical`
-
-Setting `paddingVertical` is like setting both of `paddingTop` and `paddingBottom`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `position`
-
-`position` in React Native is similar to [regular CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/position), but everything is set to `relative` by default.
-
-`relative` will position an element according to the normal flow of the layout. Insets (`top`, `bottom`, `left`, `right`) will offset relative to this layout.
-
-`absolute` takes the element out of the normal flow of the layout. Insets will offset relative to its [containing block](./flexbox.md#the-containing-block).
-
-`static` will position an element according to the normal flow of the layout. Insets will have no effect.
-`static` elements do not form a containing block for absolute descendants.
-
-For more information, see the [Layout with Flexbox docs](./flexbox.md#position). Also, [the Yoga documentation](https://www.yogalayout.dev/docs/styling/position) has more details on how `position` differs between React Native and CSS.
-
-| Type                                   | Required |
-| -------------------------------------- | -------- |
-| enum('absolute', 'relative', 'static') | No       |
-
----
-
-### `right`
-
-`right` is the number of logical pixels to offset the right edge of this component.
-
-It works similarly to `right` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) for more details of how `right` affects layout.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `rowGap`
-
-`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `start`
-
-When the direction is `ltr`, `start` is equivalent to `left`. When the direction is `rtl`, `start` is equivalent to `right`.
-
-This style takes precedence over the `left`, `right`, and `end` styles.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `top`
-
-`top` is the number of logical pixels to offset the top edge of this component.
-
-It works similarly to `top` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/top) for more details of how `top` affects layout.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `width`
-
-`width` sets the width of this component.
-
-It works similarly to `width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/width) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `zIndex`
-
-`zIndex` controls which components display on top of others. Normally, you don't use `zIndex`. Components render according to their order in the document tree, so later components draw over earlier ones. `zIndex` may be useful if you have animations or custom modal interfaces where you don't want this behavior.
-
-It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball.
-
-On iOS, `zIndex` may require `View`s to be siblings of each other for it to work as expected.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
+---
+id: layout-props
+title: Layout Props
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+:::info
+More detailed examples about those properties can be found on the [Layout with Flexbox](flexbox) page.
+:::
+
+### Example
+
+The following example shows how different properties can affect or shape a React Native layout. You can try for example to add or remove squares from the UI while changing the values of the property `flexWrap`.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=LayoutProps%20Example&ext=js
+import {useState} from 'react';
+import {Button, ScrollView, StyleSheet, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [flexDirection, setFlexDirection] = useState(0);
+  const [justifyContent, setJustifyContent] = useState(0);
+  const [alignItems, setAlignItems] = useState(0);
+  const [direction, setDirection] = useState(0);
+  const [wrap, setWrap] = useState(0);
+
+  const [squares, setSquares] = useState([<Square />, <Square />, <Square />]);
+
+  const hookedStyles = {
+    flexDirection: flexDirections[flexDirection],
+    justifyContent: justifyContents[justifyContent],
+    alignItems: alignItemsArr[alignItems],
+    direction: directions[direction],
+    flexWrap: wraps[wrap],
+  };
+
+  const changeSetting = (value, options, setterFunction) => {
+    if (value === options.length - 1) {
+      setterFunction(0);
+      return;
+    }
+    setterFunction(value + 1);
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={[styles.container, styles.playingSpace, hookedStyles]}>
+          {squares.map(elem => elem)}
+        </View>
+        <ScrollView style={styles.layoutContainer}>
+          <View style={styles.controlSpace}>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Flex Direction"
+                onPress={() =>
+                  changeSetting(flexDirection, flexDirections, setFlexDirection)
+                }
+              />
+              <Text style={styles.text}>{flexDirections[flexDirection]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Justify Content"
+                onPress={() =>
+                  changeSetting(
+                    justifyContent,
+                    justifyContents,
+                    setJustifyContent,
+                  )
+                }
+              />
+              <Text style={styles.text}>{justifyContents[justifyContent]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Align Items"
+                onPress={() =>
+                  changeSetting(alignItems, alignItemsArr, setAlignItems)
+                }
+              />
+              <Text style={styles.text}>{alignItemsArr[alignItems]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Direction"
+                onPress={() =>
+                  changeSetting(direction, directions, setDirection)
+                }
+              />
+              <Text style={styles.text}>{directions[direction]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Flex Wrap"
+                onPress={() => changeSetting(wrap, wraps, setWrap)}
+              />
+              <Text style={styles.text}>{wraps[wrap]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Add Square"
+                onPress={() => setSquares([...squares, <Square />])}
+              />
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Delete Square"
+                onPress={() =>
+                  setSquares(squares.filter((v, i) => i !== squares.length - 1))
+                }
+              />
+            </View>
+          </View>
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const flexDirections = ['row', 'row-reverse', 'column', 'column-reverse'];
+const justifyContents = [
+  'flex-start',
+  'flex-end',
+  'center',
+  'space-between',
+  'space-around',
+  'space-evenly',
+];
+const alignItemsArr = [
+  'flex-start',
+  'flex-end',
+  'center',
+  'stretch',
+  'baseline',
+];
+const wraps = ['nowrap', 'wrap', 'wrap-reverse'];
+const directions = ['inherit', 'ltr', 'rtl'];
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  layoutContainer: {
+    flex: 0.5,
+  },
+  playingSpace: {
+    backgroundColor: 'white',
+    borderColor: 'blue',
+    borderWidth: 3,
+    overflow: 'hidden',
+  },
+  controlSpace: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  buttonView: {
+    width: '50%',
+    padding: 10,
+  },
+  text: {
+    textAlign: 'center',
+  },
+});
+
+const Square = () => (
+  <View
+    style={{
+      width: 50,
+      height: 50,
+      backgroundColor: randomHexColor(),
+    }}
+  />
+);
+
+const randomHexColor = () => {
+  return '#000000'.replace(/0/g, () => {
+    return Math.round(Math.random() * 14).toString(16);
+  });
+};
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=LayoutProps%20Example&ext=tsx
+import {useState} from 'react';
+import {
+  Button,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+  FlexAlignType,
+  FlexStyle,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [flexDirection, setFlexDirection] = useState(0);
+  const [justifyContent, setJustifyContent] = useState(0);
+  const [alignItems, setAlignItems] = useState(0);
+  const [direction, setDirection] = useState(0);
+  const [wrap, setWrap] = useState(0);
+
+  const [squares, setSquares] = useState([<Square />, <Square />, <Square />]);
+
+  const hookedStyles = {
+    flexDirection: flexDirections[flexDirection],
+    justifyContent: justifyContents[justifyContent],
+    alignItems: alignItemsArr[alignItems],
+    direction: directions[direction],
+    flexWrap: wraps[wrap],
+  } as FlexStyle;
+
+  const changeSetting = (
+    value: number,
+    options: any[],
+    setterFunction: (index: number) => void,
+  ) => {
+    if (value === options.length - 1) {
+      setterFunction(0);
+      return;
+    }
+    setterFunction(value + 1);
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={[styles.container, styles.playingSpace, hookedStyles]}>
+          {squares.map(elem => elem)}
+        </View>
+        <ScrollView style={styles.layoutContainer}>
+          <View style={styles.controlSpace}>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Flex Direction"
+                onPress={() =>
+                  changeSetting(flexDirection, flexDirections, setFlexDirection)
+                }
+              />
+              <Text style={styles.text}>{flexDirections[flexDirection]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Justify Content"
+                onPress={() =>
+                  changeSetting(
+                    justifyContent,
+                    justifyContents,
+                    setJustifyContent,
+                  )
+                }
+              />
+              <Text style={styles.text}>{justifyContents[justifyContent]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Align Items"
+                onPress={() =>
+                  changeSetting(alignItems, alignItemsArr, setAlignItems)
+                }
+              />
+              <Text style={styles.text}>{alignItemsArr[alignItems]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Direction"
+                onPress={() =>
+                  changeSetting(direction, directions, setDirection)
+                }
+              />
+              <Text style={styles.text}>{directions[direction]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Flex Wrap"
+                onPress={() => changeSetting(wrap, wraps, setWrap)}
+              />
+              <Text style={styles.text}>{wraps[wrap]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Add Square"
+                onPress={() => setSquares([...squares, <Square />])}
+              />
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Delete Square"
+                onPress={() =>
+                  setSquares(squares.filter((v, i) => i !== squares.length - 1))
+                }
+              />
+            </View>
+          </View>
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const flexDirections = [
+  'row',
+  'row-reverse',
+  'column',
+  'column-reverse',
+] as FlexStyle['flexDirection'][];
+const justifyContents = [
+  'flex-start',
+  'flex-end',
+  'center',
+  'space-between',
+  'space-around',
+  'space-evenly',
+] as FlexStyle['justifyContent'][];
+const alignItemsArr = [
+  'flex-start',
+  'flex-end',
+  'center',
+  'stretch',
+  'baseline',
+] as FlexAlignType[];
+const wraps = ['nowrap', 'wrap', 'wrap-reverse'];
+const directions = ['inherit', 'ltr', 'rtl'];
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  layoutContainer: {
+    flex: 0.5,
+  },
+  playingSpace: {
+    backgroundColor: 'white',
+    borderColor: 'blue',
+    borderWidth: 3,
+    overflow: 'hidden',
+  },
+  controlSpace: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  buttonView: {
+    width: '50%',
+    padding: 10,
+  },
+  text: {
+    textAlign: 'center',
+  },
+});
+
+const Square = () => (
+  <View
+    style={{
+      width: 50,
+      height: 50,
+      backgroundColor: randomHexColor(),
+    }}
+  />
+);
+
+const randomHexColor = () => {
+  return '#000000'.replace(/0/g, () => {
+    return Math.round(Math.random() * 14).toString(16);
+  });
+};
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+---
+
+# Reference
+
+## Props
+
+### `alignContent`
+
+`alignContent` controls how rows align in the cross direction, overriding the `alignContent` of the parent.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) for more details.
+
+| Type                                                                                                 | Required |
+| ---------------------------------------------------------------------------------------------------- | -------- |
+| enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around', 'space-evenly') | No       |
+
+---
+
+### `alignItems`
+
+`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS (default: stretch).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) for more details.
+
+| Type                                                            | Required |
+| --------------------------------------------------------------- | -------- |
+| enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline') | No       |
+
+---
+
+### `alignSelf`
+
+`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS (default: auto).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) for more details.
+
+| Type                                                                    | Required |
+| ----------------------------------------------------------------------- | -------- |
+| enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline') | No       |
+
+---
+
+### `aspectRatio`
+
+Aspect ratio controls the size of the undefined dimension of a node.
+
+- On a node with a set width/height, aspect ratio controls the size of the unset dimension
+- On a node with a set flex basis, aspect ratio controls the size of the node in the cross axis if unset
+- On a node with a measure function, aspect ratio works as though the measure function measures the flex basis
+- On a node with flex grow/shrink, aspect ratio controls the size of the node in the cross axis if unset
+- Aspect ratio takes min/max dimensions into account
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `borderBottomWidth`
+
+`borderBottomWidth` works like `border-bottom-width` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderEndWidth`
+
+When direction is `ltr`, `borderEndWidth` is equivalent to `borderRightWidth`. When direction is `rtl`, `borderEndWidth` is equivalent to `borderLeftWidth`.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderLeftWidth`
+
+`borderLeftWidth` works like `border-left-width` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderRightWidth`
+
+`borderRightWidth` works like `border-right-width` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderStartWidth`
+
+When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. When direction is `rtl`, `borderStartWidth` is equivalent to `borderRightWidth`.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderTopWidth`
+
+`borderTopWidth` works like `border-top-width` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderWidth`
+
+`borderWidth` works like `border-width` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `bottom`
+
+`bottom` is the number of logical pixels to offset the bottom edge of this component.
+
+It works similarly to `bottom` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) for more details of how `bottom` affects layout.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `boxSizing`
+
+`boxSizing` defines how the element's various sizing props (`width`, `height`, `minWidth`, `minHeight`, etc.) are computed. If `boxSizing` is `border-box`, these sizes apply to the border box of the element. If it is `content-box`, they apply to the content box of the element. The default value is `border-box`. The [web documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) is a good source of information if you wish to learn more about how this prop works.
+
+| Type                              | Required |
+| --------------------------------- | -------- |
+| enum('border-box', 'content-box') | No       |
+
+---
+
+### `columnGap`
+
+`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `direction`
+
+`direction` specifies the directional flow of the user interface. The default is `inherit`, except for root node which will have value based on the current locale.
+
+See [MDN CSS Reference](https://www.yogalayout.dev/docs/styling/layout-direction) for more details.
+
+| Type                          | Required |
+| ----------------------------- | -------- |
+| enum('inherit', 'ltr', 'rtl') | No       |
+
+---
+
+### `display`
+
+`display` sets the display type of this component.
+
+It works similarly to `display` in CSS but only supports the values 'flex', 'none', and 'contents'. The default is `flex`.
+
+| Type                             | Required |
+| -------------------------------- | -------- |
+| enum('none', 'flex', 'contents') | No       |
+
+---
+
+### `end`
+
+When the direction is `ltr`, `end` is equivalent to `right`. When the direction is `rtl`, `end` is equivalent to `left`.
+
+This style takes precedence over the `left` and `right` styles.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `flex`
+
+In React Native `flex` does not work the same way that it does in CSS. `flex` is a number rather than a string, and it works according to the [Yoga](https://github.com/facebook/yoga) layout engine.
+
+When `flex` is a positive number, it makes the component flexible, and it will be sized proportional to its flex value. So a component with `flex` set to `2` will take twice the space as a component with `flex` set to 1. `flex: <positive number>` equates to `flexGrow: <positive number>, flexShrink: 1, flexBasis: 0`.
+
+When `flex` is `0`, the component is sized according to `width` and `height`, and it is inflexible.
+
+When `flex` is `-1`, the component is normally sized according to `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`.
+
+`flexGrow`, `flexShrink`, and `flexBasis` work the same as in CSS.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `flexBasis`
+
+`flexBasis` is an axis-independent way of providing the default size of an item along the main axis. Setting the `flexBasis` of a child is similar to setting the `width` of that child if its parent is a container with `flexDirection: row` or setting the `height` of a child if its parent is a container with `flexDirection: column`. The `flexBasis` of an item is the default size of that item, the size of the item before any `flexGrow` and `flexShrink` calculations are performed.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `flexDirection`
+
+`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) for more details.
+
+| Type                                                   | Required |
+| ------------------------------------------------------ | -------- |
+| enum('row', 'row-reverse', 'column', 'column-reverse') | No       |
+
+---
+
+### `flexGrow`
+
+`flexGrow` describes how any space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
+
+`flexGrow` accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the children’s `flexGrow` values.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `flexShrink`
+
+[`flexShrink`](layout-props#flexshrink) describes how to shrink children along the main axis in the case in which the total size of the children overflows the size of the container on the main axis. `flexShrink` is very similar to `flexGrow` and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed.
+
+`flexShrink` accepts any floating point value >= 0, with 0 being the default value. A container will shrink its children weighted by the children’s `flexShrink` values.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `flexWrap`
+
+`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS (default: nowrap).
+
+Note it does not work anymore with `alignItems: stretch` (the default), so you may want to use `alignItems: flex-start` for example (breaking change details: https://github.com/facebook/react-native/releases/tag/v0.28.0).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) for more details.
+
+| Type                                   | Required |
+| -------------------------------------- | -------- |
+| enum('wrap', 'nowrap', 'wrap-reverse') | No       |
+
+---
+
+### `gap`
+
+`gap` works like `gap` in CSS. Only pixel units are supported in React Native.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `height`
+
+`height` sets the height of this component.
+
+It works similarly to `height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/height) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `inset`
+
+:::note
+`inset` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Setting `inset` has the same effect as setting each of `top`, `bottom`, `right` and `left` props.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/inset) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetBlock`
+
+:::note
+`insetBlock` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Equivalent to [`top`](layout-props#top) and [`bottom`](layout-props#bottom).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetBlockEnd`
+
+:::note
+`insetBlockEnd` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Equivalent to [`bottom`](layout-props#bottom).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetBlockStart`
+
+:::note
+`insetBlockStart` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Equivalent to [`top`](layout-props#top).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetInline`
+
+:::note
+`insetInline` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Equivalent to [`right`](layout-props#right) and [`left`](layout-props#left).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetInlineEnd`
+
+:::note
+`insetInlineEnd` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+When direction is `ltr`, `insetInlineEnd` is equivalent to [`right`](layout-props#right). When direction is `rtl`, `insetInlineEnd` is equivalent to [`left`](layout-props#left).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetInlineStart`
+
+:::note
+`insetInlineStart` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+When direction is `ltr`, `insetInlineStart` is equivalent to [`left`](layout-props#left). When direction is `rtl`, `insetInlineStart` is equivalent to [`right`](layout-props#right).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `isolation`
+
+:::note
+`isolation` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+`isolation` lets you form a [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context).
+
+There are two values:
+
+- `auto` (default): Does nothing.
+- `isolate`: Forms a stacking context.
+
+| Type                    | Required |
+| ----------------------- | -------- |
+| enum('auto', 'isolate') | No       |
+
+---
+
+### `justifyContent`
+
+`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS (default: flex-start).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) for more details.
+
+| Type                                                                                      | Required |
+| ----------------------------------------------------------------------------------------- | -------- |
+| enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly') | No       |
+
+---
+
+### `left`
+
+`left` is the number of logical pixels to offset the left edge of this component.
+
+It works similarly to `left` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/left) for more details of how `left` affects layout.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `margin`
+
+Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginBottom`
+
+`marginBottom` works like `margin-bottom` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginBlock`
+
+Equivalent to [`marginVertical`](layout-props#marginvertical).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginBlockEnd`
+
+Equivalent to [`marginBottom`](layout-props#marginbottom).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginBlockStart`
+
+Equivalent to [`marginTop`](layout-props#margintop).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginEnd`
+
+When direction is `ltr`, `marginEnd` is equivalent to `marginRight`. When direction is `rtl`, `marginEnd` is equivalent to `marginLeft`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginHorizontal`
+
+Setting `marginHorizontal` has the same effect as setting both `marginLeft` and `marginRight`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginInline`
+
+Equivalent to [`marginHorizontal`](layout-props#marginhorizontal).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginInlineEnd`
+
+When direction is `ltr`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginRight`). When direction is `rtl`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginLeft`).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginInlineStart`
+
+When direction is `ltr`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginLeft`). When direction is `rtl`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginRight`).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginLeft`
+
+`marginLeft` works like `margin-left` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginRight`
+
+`marginRight` works like `margin-right` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginStart`
+
+When direction is `ltr`, `marginStart` is equivalent to `marginLeft`. When direction is `rtl`, `marginStart` is equivalent to `marginRight`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginTop`
+
+`marginTop` works like `margin-top` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginVertical`
+
+Setting `marginVertical` has the same effect as setting both `marginTop` and `marginBottom`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `maxHeight`
+
+`maxHeight` is the maximum height for this component, in logical pixels.
+
+It works similarly to `max-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `maxWidth`
+
+`maxWidth` is the maximum width for this component, in logical pixels.
+
+It works similarly to `max-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `minHeight`
+
+`minHeight` is the minimum height for this component, in logical pixels.
+
+It works similarly to `min-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `minWidth`
+
+`minWidth` is the minimum width for this component, in logical pixels.
+
+It works similarly to `min-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `overflow`
+
+`overflow` controls how children are measured and displayed. `overflow: hidden` causes views to be clipped while `overflow: scroll` causes views to be measured independently of their parents' main axis. It works like `overflow` in CSS (default: visible).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) for more details.
+
+| Type                                | Required |
+| ----------------------------------- | -------- |
+| enum('visible', 'hidden', 'scroll') | No       |
+
+---
+
+### `padding`
+
+Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingBottom`
+
+`paddingBottom` works like `padding-bottom` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingBlock`
+
+Equivalent to [`paddingVertical`](layout-props#paddingvertical).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingBlockEnd`
+
+Equivalent to [`paddingBottom`](layout-props#paddingbottom).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingBlockStart`
+
+Equivalent to [`paddingTop`](layout-props#paddingtop).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingEnd`
+
+When direction is `ltr`, `paddingEnd` is equivalent to `paddingRight`. When direction is `rtl`, `paddingEnd` is equivalent to `paddingLeft`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingHorizontal`
+
+Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRight`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingInline`
+
+Equivalent to [`paddingHorizontal`](layout-props#paddinghorizontal).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingInlineEnd`
+
+When direction is `ltr`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingRight`). When direction is `rtl`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingLeft`).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingInlineStart`
+
+When direction is `ltr`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingLeft`). When direction is `rtl`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingRight`).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingLeft`
+
+`paddingLeft` works like `padding-left` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingRight`
+
+`paddingRight` works like `padding-right` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingStart`
+
+When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`. When direction is `rtl`, `paddingStart` is equivalent to `paddingRight`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingTop`
+
+`paddingTop` works like `padding-top` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingVertical`
+
+Setting `paddingVertical` is like setting both of `paddingTop` and `paddingBottom`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `position`
+
+`position` in React Native is similar to [regular CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/position), but everything is set to `relative` by default.
+
+`relative` will position an element according to the normal flow of the layout. Insets (`top`, `bottom`, `left`, `right`) will offset relative to this layout.
+
+`absolute` takes the element out of the normal flow of the layout. Insets will offset relative to its [containing block](./flexbox.md#the-containing-block).
+
+`static` will position an element according to the normal flow of the layout. Insets will have no effect.
+`static` elements do not form a containing block for absolute descendants.
+
+For more information, see the [Layout with Flexbox docs](./flexbox.md#position). Also, [the Yoga documentation](https://www.yogalayout.dev/docs/styling/position) has more details on how `position` differs between React Native and CSS.
+
+| Type                                   | Required |
+| -------------------------------------- | -------- |
+| enum('absolute', 'relative', 'static') | No       |
+
+---
+
+### `right`
+
+`right` is the number of logical pixels to offset the right edge of this component.
+
+It works similarly to `right` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) for more details of how `right` affects layout.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `rowGap`
+
+`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `start`
+
+When the direction is `ltr`, `start` is equivalent to `left`. When the direction is `rtl`, `start` is equivalent to `right`.
+
+This style takes precedence over the `left`, `right`, and `end` styles.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `top`
+
+`top` is the number of logical pixels to offset the top edge of this component.
+
+It works similarly to `top` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/top) for more details of how `top` affects layout.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `width`
+
+`width` sets the width of this component.
+
+It works similarly to `width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/width) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `zIndex`
+
+`zIndex` controls which components display on top of others. Normally, you don't use `zIndex`. Components render according to their order in the document tree, so later components draw over earlier ones. `zIndex` may be useful if you have animations or custom modal interfaces where you don't want this behavior.
+
+It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball.
+
+On iOS, `zIndex` may require `View`s to be siblings of each other for it to work as expected.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
diff --git a/website/versioned_docs/version-0.80/layoutanimation.md b/website/versioned_docs/version-0.80/layoutanimation.md
index 911a247c8c7..24a7d060d1e 100644
--- a/website/versioned_docs/version-0.80/layoutanimation.md
+++ b/website/versioned_docs/version-0.80/layoutanimation.md
@@ -1,358 +1,358 @@
----
-id: layoutanimation
-title: LayoutAnimation
----
-
-Automatically animates views to their new positions when the next layout happens.
-
-A common way to use this API is to call it before updating the state hook in functional components and calling `setState` in class components.
-
-Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`:
-
-```js
-if (Platform.OS === 'android') {
-  if (UIManager.setLayoutAnimationEnabledExperimental) {
-    UIManager.setLayoutAnimationEnabledExperimental(true);
-  }
-}
-```
-
-## Example
-
-```SnackPlayer name=LayoutAnimation%20Example&supportedPlatforms=android,ios
-import React, {useState} from 'react';
-import {
-  LayoutAnimation,
-  Platform,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  UIManager,
-  View,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-if (
-  Platform.OS === 'android' &&
-  UIManager.setLayoutAnimationEnabledExperimental
-) {
-  UIManager.setLayoutAnimationEnabledExperimental(true);
-}
-const App = () => {
-  const [expanded, setExpanded] = useState(false);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={style.container}>
-        <TouchableOpacity
-          onPress={() => {
-            LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
-            setExpanded(!expanded);
-          }}>
-          <Text>Press me to {expanded ? 'collapse' : 'expand'}!</Text>
-        </TouchableOpacity>
-        {expanded && (
-          <View style={style.tile}>
-            <Text>I disappear sometimes!</Text>
-          </View>
-        )}
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const style = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    gap: 16,
-  },
-  tile: {
-    backgroundColor: 'lightgrey',
-    borderWidth: 0.5,
-    borderColor: '#d6d7da',
-    padding: 4,
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Methods
-
-### `configureNext()`
-
-```tsx
-static configureNext(
-  config: LayoutAnimationConfig,
-  onAnimationDidEnd?: () => void,
-  onAnimationDidFail?: () => void,
-);
-```
-
-Schedules an animation to happen on the next layout.
-
-#### Parameters:
-
-| Name               | Type     | Required | Description                         |
-| ------------------ | -------- | -------- | ----------------------------------- |
-| config             | object   | Yes      | See config description below.       |
-| onAnimationDidEnd  | function | No       | Called when the animation finished. |
-| onAnimationDidFail | function | No       | Called when the animation failed.   |
-
-The `config` parameter is an object with the keys below. [`create`](layoutanimation.md#create) returns a valid object for `config`, and the [`Presets`](layoutanimation.md#presets) objects can also all be passed as the `config`.
-
-- `duration` in milliseconds
-- `create`, optional config for animating in new views
-- `update`, optional config for animating views that have been updated
-- `delete`, optional config for animating views as they are removed
-
-The config that's passed to `create`, `update`, or `delete` has the following keys:
-
-- `type`, the [animation type](layoutanimation.md#types) to use
-- `property`, the [layout property](layoutanimation.md#properties) to animate (optional, but recommended for `create` and `delete`)
-- `springDamping` (number, optional and only for use with `type: Type.spring`)
-- `initialVelocity` (number, optional)
-- `delay` (number, optional)
-- `duration` (number, optional)
-
----
-
-### `create()`
-
-```tsx
-static create(duration, type, creationProp)
-```
-
-Helper that creates an object (with `create`, `update`, and `delete` fields) to pass into [`configureNext`](layoutanimation.md#configurenext). The `type` parameter is an [animation type](layoutanimation.md#types), and the `creationProp` parameter is a [layout property](layoutanimation.md#properties).
-
-**Example:**
-
-```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios
-import React, {useState} from 'react';
-import {
-  View,
-  Platform,
-  UIManager,
-  LayoutAnimation,
-  StyleSheet,
-  Button,
-} from 'react-native';
-
-if (
-  Platform.OS === 'android' &&
-  UIManager.setLayoutAnimationEnabledExperimental
-) {
-  UIManager.setLayoutAnimationEnabledExperimental(true);
-}
-
-const App = () => {
-  const [boxPosition, setBoxPosition] = useState('left');
-
-  const toggleBox = () => {
-    LayoutAnimation.configureNext({
-      duration: 500,
-      create: {type: 'linear', property: 'opacity'},
-      update: {type: 'spring', springDamping: 0.4},
-      delete: {type: 'linear', property: 'opacity'},
-    });
-    setBoxPosition(boxPosition === 'left' ? 'right' : 'left');
-  };
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.buttonContainer}>
-        <Button title="Toggle Layout" onPress={toggleBox} />
-      </View>
-      <View
-        style={[styles.box, boxPosition === 'left' ? null : styles.moveRight]}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'flex-start',
-    justifyContent: 'center',
-  },
-  box: {
-    height: 100,
-    width: 100,
-    borderRadius: 5,
-    margin: 8,
-    backgroundColor: 'blue',
-  },
-  moveRight: {
-    alignSelf: 'flex-end',
-    height: 200,
-    width: 200,
-  },
-  buttonContainer: {
-    alignSelf: 'center',
-  },
-});
-
-export default App;
-```
-
-## Properties
-
-### Types
-
-An enumeration of animation types to be used in the [`create`](layoutanimation.md#create) method, or in the `create`/`update`/`delete` configs for [`configureNext`](layoutanimation.md#configurenext). (example usage: `LayoutAnimation.Types.easeIn`)
-
-| Types         |
-| ------------- |
-| spring        |
-| linear        |
-| easeInEaseOut |
-| easeIn        |
-| easeOut       |
-| keyboard      |
-
----
-
-### Properties
-
-An enumeration of layout properties to be animated to be used in the [`create`](layoutanimation.md#create) method, or in the `create`/`update`/`delete` configs for [`configureNext`](layoutanimation.md#configurenext). (example usage: `LayoutAnimation.Properties.opacity`)
-
-| Properties |
-| ---------- |
-| opacity    |
-| scaleX     |
-| scaleY     |
-| scaleXY    |
-
----
-
-### Presets
-
-A set of predefined animation configs to pass into [`configureNext`](layoutanimation.md#configurenext).
-
-| Presets       | Value                                                                                                                                                          |
-| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| easeInEaseOut | `create(300, 'easeInEaseOut', 'opacity')`                                                                                                                      |
-| linear        | `create(500, 'linear', 'opacity')`                                                                                                                             |
-| spring        | `{duration: 700, create: {type: 'linear', property: 'opacity'}, update: {type: 'spring', springDamping: 0.4}, delete: {type: 'linear', property: 'opacity'} }` |
-
----
-
-### `easeInEaseOut`
-
-Calls `configureNext()` with `Presets.easeInEaseOut`.
-
----
-
-### `linear`
-
-Calls `configureNext()` with `Presets.linear`.
-
----
-
-### `spring`
-
-Calls `configureNext()` with `Presets.spring`.
-
-**Example:**
-
-```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios
-import React, {useState} from 'react';
-import {
-  View,
-  Platform,
-  UIManager,
-  LayoutAnimation,
-  StyleSheet,
-  Button,
-} from 'react-native';
-
-if (
-  Platform.OS === 'android' &&
-  UIManager.setLayoutAnimationEnabledExperimental
-) {
-  UIManager.setLayoutAnimationEnabledExperimental(true);
-}
-
-const App = () => {
-  const [firstBoxPosition, setFirstBoxPosition] = useState('left');
-  const [secondBoxPosition, setSecondBoxPosition] = useState('left');
-  const [thirdBoxPosition, setThirdBoxPosition] = useState('left');
-
-  const toggleFirstBox = () => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-    setFirstBoxPosition(firstBoxPosition === 'left' ? 'right' : 'left');
-  };
-
-  const toggleSecondBox = () => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
-    setSecondBoxPosition(secondBoxPosition === 'left' ? 'right' : 'left');
-  };
-
-  const toggleThirdBox = () => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
-    setThirdBoxPosition(thirdBoxPosition === 'left' ? 'right' : 'left');
-  };
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.buttonContainer}>
-        <Button title="EaseInEaseOut" onPress={toggleFirstBox} />
-      </View>
-      <View
-        style={[
-          styles.box,
-          firstBoxPosition === 'left' ? null : styles.moveRight,
-        ]}
-      />
-      <View style={styles.buttonContainer}>
-        <Button title="Linear" onPress={toggleSecondBox} />
-      </View>
-      <View
-        style={[
-          styles.box,
-          secondBoxPosition === 'left' ? null : styles.moveRight,
-        ]}
-      />
-      <View style={styles.buttonContainer}>
-        <Button title="Spring" onPress={toggleThirdBox} />
-      </View>
-      <View
-        style={[
-          styles.box,
-          thirdBoxPosition === 'left' ? null : styles.moveRight,
-        ]}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'flex-start',
-    justifyContent: 'center',
-  },
-  box: {
-    height: 100,
-    width: 100,
-    borderRadius: 5,
-    margin: 8,
-    backgroundColor: 'blue',
-  },
-  moveRight: {
-    alignSelf: 'flex-end',
-  },
-  buttonContainer: {
-    alignSelf: 'center',
-  },
-});
-
-export default App;
-```
+---
+id: layoutanimation
+title: LayoutAnimation
+---
+
+Automatically animates views to their new positions when the next layout happens.
+
+A common way to use this API is to call it before updating the state hook in functional components and calling `setState` in class components.
+
+Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`:
+
+```js
+if (Platform.OS === 'android') {
+  if (UIManager.setLayoutAnimationEnabledExperimental) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+  }
+}
+```
+
+## Example
+
+```SnackPlayer name=LayoutAnimation%20Example&supportedPlatforms=android,ios
+import {useState} from 'react';
+import {
+  LayoutAnimation,
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  UIManager,
+  View,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+if (
+  Platform.OS === 'android' &&
+  UIManager.setLayoutAnimationEnabledExperimental
+) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+const App = () => {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={style.container}>
+        <TouchableOpacity
+          onPress={() => {
+            LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
+            setExpanded(!expanded);
+          }}>
+          <Text>Press me to {expanded ? 'collapse' : 'expand'}!</Text>
+        </TouchableOpacity>
+        {expanded && (
+          <View style={style.tile}>
+            <Text>I disappear sometimes!</Text>
+          </View>
+        )}
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const style = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 16,
+  },
+  tile: {
+    backgroundColor: 'lightgrey',
+    borderWidth: 0.5,
+    borderColor: '#d6d7da',
+    padding: 4,
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `configureNext()`
+
+```tsx
+static configureNext(
+  config: LayoutAnimationConfig,
+  onAnimationDidEnd?: () => void,
+  onAnimationDidFail?: () => void,
+);
+```
+
+Schedules an animation to happen on the next layout.
+
+#### Parameters:
+
+| Name               | Type     | Required | Description                         |
+| ------------------ | -------- | -------- | ----------------------------------- |
+| config             | object   | Yes      | See config description below.       |
+| onAnimationDidEnd  | function | No       | Called when the animation finished. |
+| onAnimationDidFail | function | No       | Called when the animation failed.   |
+
+The `config` parameter is an object with the keys below. [`create`](layoutanimation.md#create) returns a valid object for `config`, and the [`Presets`](layoutanimation.md#presets) objects can also all be passed as the `config`.
+
+- `duration` in milliseconds
+- `create`, optional config for animating in new views
+- `update`, optional config for animating views that have been updated
+- `delete`, optional config for animating views as they are removed
+
+The config that's passed to `create`, `update`, or `delete` has the following keys:
+
+- `type`, the [animation type](layoutanimation.md#types) to use
+- `property`, the [layout property](layoutanimation.md#properties) to animate (optional, but recommended for `create` and `delete`)
+- `springDamping` (number, optional and only for use with `type: Type.spring`)
+- `initialVelocity` (number, optional)
+- `delay` (number, optional)
+- `duration` (number, optional)
+
+---
+
+### `create()`
+
+```tsx
+static create(duration, type, creationProp)
+```
+
+Helper that creates an object (with `create`, `update`, and `delete` fields) to pass into [`configureNext`](layoutanimation.md#configurenext). The `type` parameter is an [animation type](layoutanimation.md#types), and the `creationProp` parameter is a [layout property](layoutanimation.md#properties).
+
+**Example:**
+
+```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios
+import {useState} from 'react';
+import {
+  View,
+  Platform,
+  UIManager,
+  LayoutAnimation,
+  StyleSheet,
+  Button,
+} from 'react-native';
+
+if (
+  Platform.OS === 'android' &&
+  UIManager.setLayoutAnimationEnabledExperimental
+) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+const App = () => {
+  const [boxPosition, setBoxPosition] = useState('left');
+
+  const toggleBox = () => {
+    LayoutAnimation.configureNext({
+      duration: 500,
+      create: {type: 'linear', property: 'opacity'},
+      update: {type: 'spring', springDamping: 0.4},
+      delete: {type: 'linear', property: 'opacity'},
+    });
+    setBoxPosition(boxPosition === 'left' ? 'right' : 'left');
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.buttonContainer}>
+        <Button title="Toggle Layout" onPress={toggleBox} />
+      </View>
+      <View
+        style={[styles.box, boxPosition === 'left' ? null : styles.moveRight]}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+  },
+  box: {
+    height: 100,
+    width: 100,
+    borderRadius: 5,
+    margin: 8,
+    backgroundColor: 'blue',
+  },
+  moveRight: {
+    alignSelf: 'flex-end',
+    height: 200,
+    width: 200,
+  },
+  buttonContainer: {
+    alignSelf: 'center',
+  },
+});
+
+export default App;
+```
+
+## Properties
+
+### Types
+
+An enumeration of animation types to be used in the [`create`](layoutanimation.md#create) method, or in the `create`/`update`/`delete` configs for [`configureNext`](layoutanimation.md#configurenext). (example usage: `LayoutAnimation.Types.easeIn`)
+
+| Types         |
+| ------------- |
+| spring        |
+| linear        |
+| easeInEaseOut |
+| easeIn        |
+| easeOut       |
+| keyboard      |
+
+---
+
+### Properties
+
+An enumeration of layout properties to be animated to be used in the [`create`](layoutanimation.md#create) method, or in the `create`/`update`/`delete` configs for [`configureNext`](layoutanimation.md#configurenext). (example usage: `LayoutAnimation.Properties.opacity`)
+
+| Properties |
+| ---------- |
+| opacity    |
+| scaleX     |
+| scaleY     |
+| scaleXY    |
+
+---
+
+### Presets
+
+A set of predefined animation configs to pass into [`configureNext`](layoutanimation.md#configurenext).
+
+| Presets       | Value                                                                                                                                                          |
+| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| easeInEaseOut | `create(300, 'easeInEaseOut', 'opacity')`                                                                                                                      |
+| linear        | `create(500, 'linear', 'opacity')`                                                                                                                             |
+| spring        | `{duration: 700, create: {type: 'linear', property: 'opacity'}, update: {type: 'spring', springDamping: 0.4}, delete: {type: 'linear', property: 'opacity'} }` |
+
+---
+
+### `easeInEaseOut`
+
+Calls `configureNext()` with `Presets.easeInEaseOut`.
+
+---
+
+### `linear`
+
+Calls `configureNext()` with `Presets.linear`.
+
+---
+
+### `spring`
+
+Calls `configureNext()` with `Presets.spring`.
+
+**Example:**
+
+```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios
+import {useState} from 'react';
+import {
+  View,
+  Platform,
+  UIManager,
+  LayoutAnimation,
+  StyleSheet,
+  Button,
+} from 'react-native';
+
+if (
+  Platform.OS === 'android' &&
+  UIManager.setLayoutAnimationEnabledExperimental
+) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+const App = () => {
+  const [firstBoxPosition, setFirstBoxPosition] = useState('left');
+  const [secondBoxPosition, setSecondBoxPosition] = useState('left');
+  const [thirdBoxPosition, setThirdBoxPosition] = useState('left');
+
+  const toggleFirstBox = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setFirstBoxPosition(firstBoxPosition === 'left' ? 'right' : 'left');
+  };
+
+  const toggleSecondBox = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
+    setSecondBoxPosition(secondBoxPosition === 'left' ? 'right' : 'left');
+  };
+
+  const toggleThirdBox = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
+    setThirdBoxPosition(thirdBoxPosition === 'left' ? 'right' : 'left');
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.buttonContainer}>
+        <Button title="EaseInEaseOut" onPress={toggleFirstBox} />
+      </View>
+      <View
+        style={[
+          styles.box,
+          firstBoxPosition === 'left' ? null : styles.moveRight,
+        ]}
+      />
+      <View style={styles.buttonContainer}>
+        <Button title="Linear" onPress={toggleSecondBox} />
+      </View>
+      <View
+        style={[
+          styles.box,
+          secondBoxPosition === 'left' ? null : styles.moveRight,
+        ]}
+      />
+      <View style={styles.buttonContainer}>
+        <Button title="Spring" onPress={toggleThirdBox} />
+      </View>
+      <View
+        style={[
+          styles.box,
+          thirdBoxPosition === 'left' ? null : styles.moveRight,
+        ]}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+  },
+  box: {
+    height: 100,
+    width: 100,
+    borderRadius: 5,
+    margin: 8,
+    backgroundColor: 'blue',
+  },
+  moveRight: {
+    alignSelf: 'flex-end',
+  },
+  buttonContainer: {
+    alignSelf: 'center',
+  },
+});
+
+export default App;
+```
diff --git a/website/versioned_docs/version-0.80/legacy/direct-manipulation.md b/website/versioned_docs/version-0.80/legacy/direct-manipulation.md
index b3e7e063414..9ba739abb15 100644
--- a/website/versioned_docs/version-0.80/legacy/direct-manipulation.md
+++ b/website/versioned_docs/version-0.80/legacy/direct-manipulation.md
@@ -1,444 +1,440 @@
----
-id: direct-manipulation
-title: Direct Manipulation
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-It is sometimes necessary to make changes directly to a component without using state/props to trigger a re-render of the entire subtree. When using React in the browser for example, you sometimes need to directly modify a DOM node, and the same is true for views in mobile apps. `setNativeProps` is the React Native equivalent to setting properties directly on a DOM node.
-
-:::caution
-Use `setNativeProps` when frequent re-rendering creates a performance bottleneck!
-
-Direct manipulation will not be a tool that you reach for frequently. You will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views.
-`setNativeProps` is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about.
-
-Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate).
-:::
-
-## setNativeProps with TouchableOpacity
-
-[TouchableOpacity](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js) uses `setNativeProps` internally to update the opacity of its child component:
-
-```tsx
-const viewRef = useRef<View>();
-const setOpacityTo = useCallback(value => {
-  // Redacted: animation related code
-  viewRef.current.setNativeProps({
-    opacity: value,
-  });
-}, []);
-```
-
-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:
-
-```tsx
-<TouchableOpacity onPress={handlePress}>
-  <View>
-    <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:
-
-```tsx
-const [buttonOpacity, setButtonOpacity] = useState(1);
-return (
-  <TouchableOpacity
-    onPressIn={() => setButtonOpacity(0.5)}
-    onPressOut={() => setButtonOpacity(1)}>
-    <View style={{opacity: buttonOpacity}}>
-      <Text>Press me!</Text>
-    </View>
-  </TouchableOpacity>
-);
-```
-
-This is computationally intensive compared to the original example - React needs to re-render the component hierarchy each time the opacity changes, even though other properties of the view and its children haven't changed. Usually this overhead isn't a concern but when performing continuous animations and responding to gestures, judiciously optimizing your components can improve your animations' fidelity.
-
-If you look at the implementation of `setNativeProps` in [NativeMethodsMixin](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js) you will notice that it is a wrapper around `RCTUIManager.updateView` - this is the exact same function call that results from re-rendering - see [receiveComponent in ReactNativeBaseComponent](https://github.com/facebook/react-native/blob/fb2ec1ea47c53c2e7b873acb1cb46192ac74274e/Libraries/Renderer/oss/ReactNativeRenderer-prod.js#L5793-L5813).
-
-## Composite components and setNativeProps
-
-Composite components are not backed by a native view, so you cannot call `setNativeProps` on them. Consider this example:
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=setNativeProps%20with%20Composite%20Components&ext=js
-import React from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
-
-const MyButton = props => (
-  <View style={{marginTop: 50}}>
-    <Text>{props.label}</Text>
-  </View>
-);
-
-const App = () => (
-  <TouchableOpacity>
-    <MyButton label="Press me!" />
-  </TouchableOpacity>
-);
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=setNativeProps%20with%20Composite%20Components&ext=tsx
-import React from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
-
-const MyButton = (props: {label: string}) => (
-  <View style={{marginTop: 50}}>
-    <Text>{props.label}</Text>
-  </View>
-);
-
-const App = () => (
-  <TouchableOpacity>
-    <MyButton label="Press me!" />
-  </TouchableOpacity>
-);
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-If you run this you will immediately see this error: `Touchable child must either be native or forward setNativeProps to a native component`. This occurs because `MyButton` isn't directly backed by a native view whose opacity should be set. You can think about it like this: if you define a component with `createReactClass` you would not expect to be able to set a style prop on it and have that work - you would need to pass the style prop down to a child, unless you are wrapping a native component. Similarly, we are going to forward `setNativeProps` to a native-backed child component.
-
-#### Forward setNativeProps to a child
-
-Since the `setNativeProps` method exists on any ref to a `View` component, it is enough to forward a ref on your custom component to one of the `<View />` components that it renders. This means that a call to `setNativeProps` on the custom component will have the same effect as if you called `setNativeProps` on the wrapped `View` component itself.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Forwarding%20setNativeProps&ext=js
-import React from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
-
-const MyButton = React.forwardRef((props, ref) => (
-  <View {...props} ref={ref} style={{marginTop: 50}}>
-    <Text>{props.label}</Text>
-  </View>
-));
-
-const App = () => (
-  <TouchableOpacity>
-    <MyButton label="Press me!" />
-  </TouchableOpacity>
-);
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Forwarding%20setNativeProps&ext=tsx
-import React from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
-
-const MyButton = React.forwardRef<View, {label: string}>((props, ref) => (
-  <View {...props} ref={ref} style={{marginTop: 50}}>
-    <Text>{props.label}</Text>
-  </View>
-));
-
-const App = () => (
-  <TouchableOpacity>
-    <MyButton label="Press me!" />
-  </TouchableOpacity>
-);
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-You can now use `MyButton` inside of `TouchableOpacity`!
-
-You may have noticed that we passed all of the props down to the child view using `{...props}`. The reason for this is that `TouchableOpacity` is actually a composite component, and so in addition to depending on `setNativeProps` on its child, it also requires that the child perform touch handling. To do this, it passes on [various props](view.md#onmoveshouldsetresponder) that call back to the `TouchableOpacity` component. `TouchableHighlight`, in contrast, is backed by a native view and only requires that we implement `setNativeProps`.
-
-## setNativeProps to edit TextInput value
-
-Another very common use case of `setNativeProps` is to edit the value of the TextInput. The `controlled` prop of TextInput can sometimes drop characters when the `bufferDelay` is low and the user types very quickly. Some developers prefer to skip this prop entirely and instead use `setNativeProps` to directly manipulate the TextInput value when necessary. For example, the following code demonstrates editing the input when you tap a button:
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Clear%20text&ext=js
-import React from 'react';
-import {useCallback, useRef} from 'react';
-import {
-  StyleSheet,
-  TextInput,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-
-const App = () => {
-  const inputRef = useRef(null);
-  const editText = useCallback(() => {
-    inputRef.current.setNativeProps({text: 'Edited Text'});
-  }, []);
-
-  return (
-    <View style={styles.container}>
-      <TextInput ref={inputRef} style={styles.input} />
-      <TouchableOpacity onPress={editText}>
-        <Text>Edit text</Text>
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  input: {
-    height: 50,
-    width: 200,
-    marginHorizontal: 20,
-    borderWidth: 1,
-    borderColor: '#ccc',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Clear%20text&ext=tsx
-import React from 'react';
-import {useCallback, useRef} from 'react';
-import {
-  StyleSheet,
-  TextInput,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-
-const App = () => {
-  const inputRef = useRef<TextInput>(null);
-  const editText = useCallback(() => {
-    inputRef.current?.setNativeProps({text: 'Edited Text'});
-  }, []);
-
-  return (
-    <View style={styles.container}>
-      <TextInput ref={inputRef} style={styles.input} />
-      <TouchableOpacity onPress={editText}>
-        <Text>Edit text</Text>
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  input: {
-    height: 50,
-    width: 200,
-    marginHorizontal: 20,
-    borderWidth: 1,
-    borderColor: '#ccc',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-You can use the [`clear`](../textinput#clear) method to clear the `TextInput` which clears the current input text using the same approach.
-
-## Avoiding conflicts with the render function
-
-If you update a property that is also managed by the render function, you might end up with some unpredictable and confusing bugs because anytime the component re-renders and that property changes, whatever value was previously set from `setNativeProps` will be completely ignored and overridden.
-
-## setNativeProps & shouldComponentUpdate
-
-By [intelligently applying `shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`.
-
-## Other native methods
-
-The methods described here are available on most of the default components provided by React Native. Note, however, that they are _not_ available on composite components that aren't directly backed by a native view. This will generally include most components that you define in your own app.
-
-### measure(callback)
-
-Determines the location on screen, width, and height in the viewport of the given view and returns the values via an async callback. If successful, the callback will be called with the following arguments:
-
-- x
-- y
-- width
-- height
-- pageX
-- pageY
-
-Note that these measurements are not available until after the rendering has been completed in native. If you need the measurements as soon as possible and you don't need `pageX` and `pageY`, consider using the [`onLayout`](view.md#onlayout) property instead.
-
-Also the width and height returned by `measure()` are the width and height of the component in the viewport. If you need the actual size of the component, consider using the [`onLayout`](view.md#onlayout) property instead.
-
-### measureInWindow(callback)
-
-Determines the location of the given view in the window and returns the values via an async callback. If the React root view is embedded in another native view, this will give you the absolute coordinates. If successful, the callback will be called with the following arguments:
-
-- x
-- y
-- width
-- height
-
-### measureLayout(relativeToNativeComponentRef, onSuccess, onFail)
-
-Like `measure()`, but measures the view relative to an ancestor, specified with `relativeToNativeComponentRef` reference. This means that the returned coordinates are relative to the origin `x`, `y` of the ancestor view.
-
-:::note
-This method can also be called with a `relativeToNativeNode` handler (instead of reference), but this variant is obsolete with the new architecture.
-:::
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=measureLayout%20example&supportedPlatforms=android,ios&ext=js
-import React, {useEffect, useRef, useState} from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-
-const App = () => {
-  const textContainerRef = useRef(null);
-  const textRef = useRef(null);
-  const [measure, setMeasure] = useState(null);
-
-  useEffect(() => {
-    if (textRef.current && textContainerRef.current) {
-      textRef.current.measureLayout(
-        textContainerRef.current,
-        (left, top, width, height) => {
-          setMeasure({left, top, width, height});
-        },
-      );
-    }
-  }, [measure]);
-
-  return (
-    <View style={styles.container}>
-      <View ref={textContainerRef} style={styles.textContainer}>
-        <Text ref={textRef}>Where am I? (relative to the text container)</Text>
-      </View>
-      <Text style={styles.measure}>{JSON.stringify(measure)}</Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  textContainer: {
-    backgroundColor: '#61dafb',
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 12,
-  },
-  measure: {
-    textAlign: 'center',
-    padding: 12,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=measureLayout%20example&ext=tsx
-import React, {useEffect, useRef, useState} from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-
-type Measurements = {
-  left: number;
-  top: number;
-  width: number;
-  height: number;
-};
-
-const App = () => {
-  const textContainerRef = useRef<View>(null);
-  const textRef = useRef<Text>(null);
-  const [measure, setMeasure] = useState<Measurements | null>(null);
-
-  useEffect(() => {
-    if (textRef.current && textContainerRef.current) {
-      textRef.current?.measureLayout(
-        textContainerRef.current,
-        (left, top, width, height) => {
-          setMeasure({left, top, width, height});
-        },
-        () => {
-          console.error('measurement failed');
-        },
-      );
-    }
-  }, [measure]);
-
-  return (
-    <View style={styles.container}>
-      <View ref={textContainerRef} style={styles.textContainer}>
-        <Text ref={textRef}>Where am I? (relative to the text container)</Text>
-      </View>
-      <Text style={styles.measure}>{JSON.stringify(measure)}</Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  textContainer: {
-    backgroundColor: '#61dafb',
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 12,
-  },
-  measure: {
-    textAlign: 'center',
-    padding: 12,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### focus()
-
-Requests focus for the given input or view. The exact behavior triggered will depend on the platform and type of view.
-
-### blur()
-
-Removes focus from an input or view. This is the opposite of `focus()`.
+---
+id: direct-manipulation
+title: Direct Manipulation
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+It is sometimes necessary to make changes directly to a component without using state/props to trigger a re-render of the entire subtree. When using React in the browser for example, you sometimes need to directly modify a DOM node, and the same is true for views in mobile apps. `setNativeProps` is the React Native equivalent to setting properties directly on a DOM node.
+
+:::caution
+Use `setNativeProps` when frequent re-rendering creates a performance bottleneck!
+
+Direct manipulation will not be a tool that you reach for frequently. You will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views.
+`setNativeProps` is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about.
+
+Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate).
+:::
+
+## setNativeProps with TouchableOpacity
+
+[TouchableOpacity](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js) uses `setNativeProps` internally to update the opacity of its child component:
+
+```tsx
+const viewRef = useRef<View>();
+const setOpacityTo = useCallback(value => {
+  // Redacted: animation related code
+  viewRef.current.setNativeProps({
+    opacity: value,
+  });
+}, []);
+```
+
+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:
+
+```tsx
+<TouchableOpacity onPress={handlePress}>
+  <View>
+    <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:
+
+```tsx
+const [buttonOpacity, setButtonOpacity] = useState(1);
+return (
+  <TouchableOpacity
+    onPressIn={() => setButtonOpacity(0.5)}
+    onPressOut={() => setButtonOpacity(1)}>
+    <View style={{opacity: buttonOpacity}}>
+      <Text>Press me!</Text>
+    </View>
+  </TouchableOpacity>
+);
+```
+
+This is computationally intensive compared to the original example - React needs to re-render the component hierarchy each time the opacity changes, even though other properties of the view and its children haven't changed. Usually this overhead isn't a concern but when performing continuous animations and responding to gestures, judiciously optimizing your components can improve your animations' fidelity.
+
+If you look at the implementation of `setNativeProps` in [NativeMethodsMixin](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js) you will notice that it is a wrapper around `RCTUIManager.updateView` - this is the exact same function call that results from re-rendering - see [receiveComponent in ReactNativeBaseComponent](https://github.com/facebook/react-native/blob/fb2ec1ea47c53c2e7b873acb1cb46192ac74274e/Libraries/Renderer/oss/ReactNativeRenderer-prod.js#L5793-L5813).
+
+## Composite components and setNativeProps
+
+Composite components are not backed by a native view, so you cannot call `setNativeProps` on them. Consider this example:
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=setNativeProps%20with%20Composite%20Components&ext=js
+import {Text, TouchableOpacity, View} from 'react-native';
+
+const MyButton = props => (
+  <View style={{marginTop: 50}}>
+    <Text>{props.label}</Text>
+  </View>
+);
+
+const App = () => (
+  <TouchableOpacity>
+    <MyButton label="Press me!" />
+  </TouchableOpacity>
+);
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=setNativeProps%20with%20Composite%20Components&ext=tsx
+import {Text, TouchableOpacity, View} from 'react-native';
+
+const MyButton = (props: {label: string}) => (
+  <View style={{marginTop: 50}}>
+    <Text>{props.label}</Text>
+  </View>
+);
+
+const App = () => (
+  <TouchableOpacity>
+    <MyButton label="Press me!" />
+  </TouchableOpacity>
+);
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+If you run this you will immediately see this error: `Touchable child must either be native or forward setNativeProps to a native component`. This occurs because `MyButton` isn't directly backed by a native view whose opacity should be set. You can think about it like this: if you define a component with `createReactClass` you would not expect to be able to set a style prop on it and have that work - you would need to pass the style prop down to a child, unless you are wrapping a native component. Similarly, we are going to forward `setNativeProps` to a native-backed child component.
+
+#### Forward setNativeProps to a child
+
+Since the `setNativeProps` method exists on any ref to a `View` component, it is enough to forward a ref on your custom component to one of the `<View />` components that it renders. This means that a call to `setNativeProps` on the custom component will have the same effect as if you called `setNativeProps` on the wrapped `View` component itself.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Forwarding%20setNativeProps&ext=js
+import {forwardRef} from 'react';
+import {Text, TouchableOpacity, View} from 'react-native';
+
+const MyButton = forwardRef((props, ref) => (
+  <View {...props} ref={ref} style={{marginTop: 50}}>
+    <Text>{props.label}</Text>
+  </View>
+));
+
+const App = () => (
+  <TouchableOpacity>
+    <MyButton label="Press me!" />
+  </TouchableOpacity>
+);
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Forwarding%20setNativeProps&ext=tsx
+import {forwardRef} from 'react';
+import {Text, TouchableOpacity, View} from 'react-native';
+
+const MyButton = forwardRef<View, {label: string}>((props, ref) => (
+  <View {...props} ref={ref} style={{marginTop: 50}}>
+    <Text>{props.label}</Text>
+  </View>
+));
+
+const App = () => (
+  <TouchableOpacity>
+    <MyButton label="Press me!" />
+  </TouchableOpacity>
+);
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+You can now use `MyButton` inside of `TouchableOpacity`!
+
+You may have noticed that we passed all of the props down to the child view using `{...props}`. The reason for this is that `TouchableOpacity` is actually a composite component, and so in addition to depending on `setNativeProps` on its child, it also requires that the child perform touch handling. To do this, it passes on [various props](view.md#onmoveshouldsetresponder) that call back to the `TouchableOpacity` component. `TouchableHighlight`, in contrast, is backed by a native view and only requires that we implement `setNativeProps`.
+
+## setNativeProps to edit TextInput value
+
+Another very common use case of `setNativeProps` is to edit the value of the TextInput. The `controlled` prop of TextInput can sometimes drop characters when the `bufferDelay` is low and the user types very quickly. Some developers prefer to skip this prop entirely and instead use `setNativeProps` to directly manipulate the TextInput value when necessary. For example, the following code demonstrates editing the input when you tap a button:
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Clear%20text&ext=js
+import {useCallback, useRef} from 'react';
+import {
+  StyleSheet,
+  TextInput,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+const App = () => {
+  const inputRef = useRef(null);
+  const editText = useCallback(() => {
+    inputRef.current.setNativeProps({text: 'Edited Text'});
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <TextInput ref={inputRef} style={styles.input} />
+      <TouchableOpacity onPress={editText}>
+        <Text>Edit text</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  input: {
+    height: 50,
+    width: 200,
+    marginHorizontal: 20,
+    borderWidth: 1,
+    borderColor: '#ccc',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Clear%20text&ext=tsx
+import {useCallback, useRef} from 'react';
+import {
+  StyleSheet,
+  TextInput,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+const App = () => {
+  const inputRef = useRef<TextInput>(null);
+  const editText = useCallback(() => {
+    inputRef.current?.setNativeProps({text: 'Edited Text'});
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <TextInput ref={inputRef} style={styles.input} />
+      <TouchableOpacity onPress={editText}>
+        <Text>Edit text</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  input: {
+    height: 50,
+    width: 200,
+    marginHorizontal: 20,
+    borderWidth: 1,
+    borderColor: '#ccc',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+You can use the [`clear`](../textinput#clear) method to clear the `TextInput` which clears the current input text using the same approach.
+
+## Avoiding conflicts with the render function
+
+If you update a property that is also managed by the render function, you might end up with some unpredictable and confusing bugs because anytime the component re-renders and that property changes, whatever value was previously set from `setNativeProps` will be completely ignored and overridden.
+
+## setNativeProps & shouldComponentUpdate
+
+By [intelligently applying `shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`.
+
+## Other native methods
+
+The methods described here are available on most of the default components provided by React Native. Note, however, that they are _not_ available on composite components that aren't directly backed by a native view. This will generally include most components that you define in your own app.
+
+### measure(callback)
+
+Determines the location on screen, width, and height in the viewport of the given view and returns the values via an async callback. If successful, the callback will be called with the following arguments:
+
+- x
+- y
+- width
+- height
+- pageX
+- pageY
+
+Note that these measurements are not available until after the rendering has been completed in native. If you need the measurements as soon as possible and you don't need `pageX` and `pageY`, consider using the [`onLayout`](view.md#onlayout) property instead.
+
+Also the width and height returned by `measure()` are the width and height of the component in the viewport. If you need the actual size of the component, consider using the [`onLayout`](view.md#onlayout) property instead.
+
+### measureInWindow(callback)
+
+Determines the location of the given view in the window and returns the values via an async callback. If the React root view is embedded in another native view, this will give you the absolute coordinates. If successful, the callback will be called with the following arguments:
+
+- x
+- y
+- width
+- height
+
+### measureLayout(relativeToNativeComponentRef, onSuccess, onFail)
+
+Like `measure()`, but measures the view relative to an ancestor, specified with `relativeToNativeComponentRef` reference. This means that the returned coordinates are relative to the origin `x`, `y` of the ancestor view.
+
+:::note
+This method can also be called with a `relativeToNativeNode` handler (instead of reference), but this variant is obsolete with the new architecture.
+:::
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=measureLayout%20example&supportedPlatforms=android,ios&ext=js
+import {useEffect, useRef, useState} from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+
+const App = () => {
+  const textContainerRef = useRef(null);
+  const textRef = useRef(null);
+  const [measure, setMeasure] = useState(null);
+
+  useEffect(() => {
+    if (textRef.current && textContainerRef.current) {
+      textRef.current.measureLayout(
+        textContainerRef.current,
+        (left, top, width, height) => {
+          setMeasure({left, top, width, height});
+        },
+      );
+    }
+  }, [measure]);
+
+  return (
+    <View style={styles.container}>
+      <View ref={textContainerRef} style={styles.textContainer}>
+        <Text ref={textRef}>Where am I? (relative to the text container)</Text>
+      </View>
+      <Text style={styles.measure}>{JSON.stringify(measure)}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  textContainer: {
+    backgroundColor: '#61dafb',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 12,
+  },
+  measure: {
+    textAlign: 'center',
+    padding: 12,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=measureLayout%20example&ext=tsx
+import {useEffect, useRef, useState} from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+
+type Measurements = {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+};
+
+const App = () => {
+  const textContainerRef = useRef<View>(null);
+  const textRef = useRef<Text>(null);
+  const [measure, setMeasure] = useState<Measurements | null>(null);
+
+  useEffect(() => {
+    if (textRef.current && textContainerRef.current) {
+      textRef.current?.measureLayout(
+        textContainerRef.current,
+        (left, top, width, height) => {
+          setMeasure({left, top, width, height});
+        },
+        () => {
+          console.error('measurement failed');
+        },
+      );
+    }
+  }, [measure]);
+
+  return (
+    <View style={styles.container}>
+      <View ref={textContainerRef} style={styles.textContainer}>
+        <Text ref={textRef}>Where am I? (relative to the text container)</Text>
+      </View>
+      <Text style={styles.measure}>{JSON.stringify(measure)}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  textContainer: {
+    backgroundColor: '#61dafb',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 12,
+  },
+  measure: {
+    textAlign: 'center',
+    padding: 12,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### focus()
+
+Requests focus for the given input or view. The exact behavior triggered will depend on the platform and type of view.
+
+### blur()
+
+Removes focus from an input or view. This is the opposite of `focus()`.
diff --git a/website/versioned_docs/version-0.80/legacy/native-components-android.md b/website/versioned_docs/version-0.80/legacy/native-components-android.md
index 9443d854c53..53d9854dca8 100644
--- a/website/versioned_docs/version-0.80/legacy/native-components-android.md
+++ b/website/versioned_docs/version-0.80/legacy/native-components-android.md
@@ -1,873 +1,873 @@
----
-id: native-components-android
-title: Android Native UI Components
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-import NativeDeprecated from '../the-new-architecture/\_markdown_native_deprecation.mdx'
-
-<NativeDeprecated />
-
-There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application.
-
-Like the native module guide, this too is a more advanced guide that assumes you are somewhat familiar with Android SDK programming. This guide will show you how to build a native UI component, walking you through the implementation of a subset of the existing `ImageView` component available in the core React Native library.
-
-:::info
-You can also setup local library containing native component with one command. Read the guide to [Local libraries setup](local-library-setup) for more details.
-:::
-
-## ImageView example
-
-For this example we are going to walk through the implementation requirements to allow the use of ImageViews in JavaScript.
-
-Native views are created and manipulated by extending `ViewManager` or more commonly `SimpleViewManager` . A `SimpleViewManager` is convenient in this case because it applies common properties such as background color, opacity, and Flexbox layout.
-
-These subclasses are essentially singletons - only one instance of each is created by the bridge. They send native views to the `NativeViewHierarchyManager`, which delegates back to them to set and update the properties of the views as necessary. The `ViewManagers` are also typically the delegates for the views, sending events back to JavaScript via the bridge.
-
-To send a view:
-
-1. Create the ViewManager subclass.
-2. Implement the `createViewInstance` method
-3. Expose view property setters using `@ReactProp` (or `@ReactPropGroup`) annotation
-4. Register the manager in `createViewManagers` of the applications package.
-5. Implement the JavaScript module
-
-### 1. Create the `ViewManager` subclass
-
-In this example we create view manager class `ReactImageManager` that extends `SimpleViewManager` of type `ReactImageView`. `ReactImageView` is the type of object managed by the manager, this will be the custom native view. Name returned by `getName` is used to reference the native view type from JavaScript.
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-class ReactImageManager(
-    private val callerContext: ReactApplicationContext
-) : SimpleViewManager<ReactImageView>() {
-
-  override fun getName() = REACT_CLASS
-
-  companion object {
-    const val REACT_CLASS = "RCTImageView"
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-public class ReactImageManager extends SimpleViewManager<ReactImageView> {
-
-  public static final String REACT_CLASS = "RCTImageView";
-  ReactApplicationContext mCallerContext;
-
-  public ReactImageManager(ReactApplicationContext reactContext) {
-    mCallerContext = reactContext;
-  }
-
-  @Override
-  public String getName() {
-    return REACT_CLASS;
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 2. Implement method `createViewInstance`
-
-Views are created in the `createViewInstance` method, the view should initialize itself in its default state, any properties will be set via a follow up call to `updateView.`
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-  override fun createViewInstance(context: ThemedReactContext) =
-      ReactImageView(context, Fresco.newDraweeControllerBuilder(), null, callerContext)
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-  @Override
-  public ReactImageView createViewInstance(ThemedReactContext context) {
-    return new ReactImageView(context, Fresco.newDraweeControllerBuilder(), null, mCallerContext);
-  }
-```
-
-</TabItem>
-</Tabs>
-
-### 3. Expose view property setters using `@ReactProp` (or `@ReactPropGroup`) annotation
-
-Properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with `@ReactProp` (or `@ReactPropGroup`). Setter method should take view to be updated (of the current view type) as a first argument and property value as a second argument. Setter should be public and not return a value (i.e. return type should be `void` in Java or `Unit` in Kotlin). Property type sent to JS is determined automatically based on the type of value argument of the setter. The following type of values are currently supported (in Java): `boolean`, `int`, `float`, `double`, `String`, `Boolean`, `Integer`, `ReadableArray`, `ReadableMap`. The corresponding types in Kotlin are `Boolean`, `Int`, `Float`, `Double`, `String`, `ReadableArray`, `ReadableMap`.
-
-Annotation `@ReactProp` has one obligatory argument `name` of type `String`. Name assigned to the `@ReactProp` annotation linked to the setter method is used to reference the property on JS side.
-
-Except from `name`, `@ReactProp` annotation may take following optional arguments: `defaultBoolean`, `defaultInt`, `defaultFloat`. Those arguments should be of the corresponding type (accordingly `boolean`, `int`, `float` in Java and `Boolean`, `Int`, `Float` in Kotlin) and the value provided will be passed to the setter method in case when the property that the setter is referencing has been removed from the component. Note that "default" values are only provided for primitive types, in case when setter is of some complex type, `null` will be provided as a default value in case when corresponding property gets removed.
-
-Setter declaration requirements for methods annotated with `@ReactPropGroup` are different than for `@ReactProp`, please refer to the `@ReactPropGroup` annotation class docs for more information about it. **IMPORTANT!** in ReactJS updating the property value will result in setter method call. Note that one of the ways we can update component is by removing properties that have been set before. In that case setter method will be called as well to notify view manager that property has changed. In that case "default" value will be provided (for primitive types "default" value can be specified using `defaultBoolean`, `defaultFloat`, etc. arguments of `@ReactProp` annotation, for complex types setter will be called with value set to `null`).
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-  @ReactProp(name = "src")
-  fun setSrc(view: ReactImageView, sources: ReadableArray?) {
-    view.setSource(sources)
-  }
-
-  @ReactProp(name = "borderRadius", defaultFloat = 0f)
-  override fun setBorderRadius(view: ReactImageView, borderRadius: Float) {
-    view.setBorderRadius(borderRadius)
-  }
-
-  @ReactProp(name = ViewProps.RESIZE_MODE)
-  fun setResizeMode(view: ReactImageView, resizeMode: String?) {
-    view.setScaleType(ImageResizeMode.toScaleType(resizeMode))
-  }
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-  @ReactProp(name = "src")
-  public void setSrc(ReactImageView view, @Nullable ReadableArray sources) {
-    view.setSource(sources);
-  }
-
-  @ReactProp(name = "borderRadius", defaultFloat = 0f)
-  public void setBorderRadius(ReactImageView view, float borderRadius) {
-    view.setBorderRadius(borderRadius);
-  }
-
-  @ReactProp(name = ViewProps.RESIZE_MODE)
-  public void setResizeMode(ReactImageView view, @Nullable String resizeMode) {
-    view.setScaleType(ImageResizeMode.toScaleType(resizeMode));
-  }
-```
-
-</TabItem>
-</Tabs>
-
-### 4. Register the `ViewManager`
-
-The final step is to register the ViewManager to the application, this happens in a similar way to [Native Modules](native-modules-android.md), via the applications package member function `createViewManagers`.
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-  override fun createViewManagers(
-      reactContext: ReactApplicationContext
-  ) = listOf(ReactImageManager(reactContext))
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-  @Override
-  public List<ViewManager> createViewManagers(
-                            ReactApplicationContext reactContext) {
-    return Arrays.<ViewManager>asList(
-      new ReactImageManager(reactContext)
-    );
-  }
-```
-
-</TabItem>
-</Tabs>
-
-### 5. Implement the JavaScript module
-
-The very final step is to create the JavaScript module that defines the interface layer between Java/Kotlin and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using TypeScript, Flow, or plain old comments).
-
-```tsx title="ImageView.tsx"
-import {requireNativeComponent} from 'react-native';
-
-/**
- * Composes `View`.
- *
- * - src: Array<{url: string}>
- * - borderRadius: number
- * - resizeMode: 'cover' | 'contain' | 'stretch'
- */
-export default requireNativeComponent('RCTImageView');
-```
-
-The `requireNativeComponent` function takes the name of the native view. Note that if your component needs to do anything more sophisticated (e.g. custom event handling), you should wrap the native component in another React component. This is illustrated in the `MyCustomView` example below.
-
-## Events
-
-So now we know how to expose native view components that we can control freely from JS, but how do we deal with events from the user, like pinch-zooms or panning? When a native event occurs the native code should issue an event to the JavaScript representation of the View, and the two views are linked with the value returned from the `getId()` method.
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-class MyCustomView(context: Context) : View(context) {
-  ...
-  fun onReceiveNativeEvent() {
-    val event = Arguments.createMap().apply {
-      putString("message", "MyMessage")
-    }
-    val reactContext = context as ReactContext
-    reactContext
-        .getJSModule(RCTEventEmitter::class.java)
-        .receiveEvent(id, "topChange", event)
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-class MyCustomView extends View {
-   ...
-   public void onReceiveNativeEvent() {
-      WritableMap event = Arguments.createMap();
-      event.putString("message", "MyMessage");
-      ReactContext reactContext = (ReactContext)getContext();
-      reactContext
-          .getJSModule(RCTEventEmitter.class)
-          .receiveEvent(getId(), "topChange", event);
-    }
-}
-```
-
-</TabItem>
-</Tabs>
-
-To map the `topChange` event name to the `onChange` callback prop in JavaScript, register it by overriding the `getExportedCustomBubblingEventTypeConstants` method in your `ViewManager`:
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-class ReactImageManager : SimpleViewManager<MyCustomView>() {
-  ...
-  override fun getExportedCustomBubblingEventTypeConstants(): Map<String, Any> {
-    return mapOf(
-      "topChange" to mapOf(
-        "phasedRegistrationNames" to mapOf(
-          "bubbled" to "onChange"
-        )
-      )
-    )
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-public class ReactImageManager extends SimpleViewManager<MyCustomView> {
-    ...
-    public Map getExportedCustomBubblingEventTypeConstants() {
-        return MapBuilder.builder().put(
-            "topChange",
-            MapBuilder.of(
-                "phasedRegistrationNames",
-                MapBuilder.of("bubbled", "onChange")
-            )
-        ).build();
-    }
-}
-```
-
-</TabItem>
-</Tabs>
-
-This callback is invoked with the raw event, which we typically process in the wrapper component to make a simpler API:
-
-```tsx {8-11,13-17} title="MyCustomView.tsx"
-import {useCallback} from 'react';
-import {requireNativeComponent} from 'react-native';
-
-const RCTMyCustomView = requireNativeComponent('RCTMyCustomView');
-
-export default function MyCustomView(props: {
-  // ...
-  /**
-   * Callback that is called continuously when the user is dragging the map.
-   */
-  onChangeMessage: (message: string) => unknown;
-}) {
-  const onChange = useCallback(
-    event => {
-      props.onChangeMessage?.(event.nativeEvent.message);
-    },
-    [props.onChangeMessage],
-  );
-
-  return <RCTMyCustomView {...props} onChange={onChange} />;
-}
-```
-
-## Integration with an Android Fragment example
-
-In order to integrate existing Native UI elements to your React Native app, you might need to use Android Fragments to give you a more granular control over your native component than returning a `View` from your `ViewManager`. You will need this if you want to add custom logic that is tied to your view with the help of [lifecycle methods](https://developer.android.com/guide/fragments/lifecycle), such as `onViewCreated`, `onPause`, `onResume`. The following steps will show you how to do it:
-
-### 1. Create an example custom view
-
-First, let's create a `CustomView` class which extends `FrameLayout` (the content of this view can be any view that you'd like to render)
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin title="CustomView.kt"
-// replace with your package
-package com.mypackage
-
-import android.content.Context
-import android.graphics.Color
-import android.widget.FrameLayout
-import android.widget.TextView
-
-class CustomView(context: Context) : FrameLayout(context) {
-  init {
-    // set padding and background color
-    setPadding(16,16,16,16)
-    setBackgroundColor(Color.parseColor("#5FD3F3"))
-
-    // add default text view
-    addView(TextView(context).apply {
-      text = "Welcome to Android Fragments with React Native."
-    })
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java title="CustomView.java"
-// replace with your package
-package com.mypackage;
-
-import android.content.Context;
-import android.graphics.Color;
-import android.widget.FrameLayout;
-import android.widget.ImageView;
-import android.widget.TextView;
-
-import androidx.annotation.NonNull;
-
-public class CustomView extends FrameLayout {
-  public CustomView(@NonNull Context context) {
-    super(context);
-    // set padding and background color
-    this.setPadding(16,16,16,16);
-    this.setBackgroundColor(Color.parseColor("#5FD3F3"));
-
-    // add default text view
-    TextView text = new TextView(context);
-    text.setText("Welcome to Android Fragments with React Native.");
-    this.addView(text);
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 2. Create a `Fragment`
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin title="MyFragment.kt"
-// replace with your package
-package com.mypackage
-
-import android.os.Bundle
-import android.view.LayoutInflater
-import android.view.View
-import android.view.ViewGroup
-import androidx.fragment.app.Fragment
-
-// replace with your view's import
-import com.mypackage.CustomView
-
-class MyFragment : Fragment() {
-  private lateinit var customView: CustomView
-
-  override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
-    super.onCreateView(inflater, container, savedInstanceState)
-    customView = CustomView(requireNotNull(context))
-    return customView // this CustomView could be any view that you want to render
-  }
-
-  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
-    super.onViewCreated(view, savedInstanceState)
-    // do any logic that should happen in an `onCreate` method, e.g:
-    // customView.onCreate(savedInstanceState);
-  }
-
-  override fun onPause() {
-    super.onPause()
-    // do any logic that should happen in an `onPause` method
-    // e.g.: customView.onPause();
-  }
-
-  override fun onResume() {
-    super.onResume()
-    // do any logic that should happen in an `onResume` method
-    // e.g.: customView.onResume();
-  }
-
-  override fun onDestroy() {
-    super.onDestroy()
-    // do any logic that should happen in an `onDestroy` method
-    // e.g.: customView.onDestroy();
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java title="MyFragment.java"
-// replace with your package
-package com.mypackage;
-
-import android.os.Bundle;
-import android.view.LayoutInflater;
-import android.view.View;
-import android.view.ViewGroup;
-import androidx.fragment.app.Fragment;
-
-// replace with your view's import
-import com.mypackage.CustomView;
-
-public class MyFragment extends Fragment {
-    CustomView customView;
-
-    @Override
-    public View onCreateView(LayoutInflater inflater, ViewGroup parent, Bundle savedInstanceState) {
-        super.onCreateView(inflater, parent, savedInstanceState);
-        customView = new CustomView(this.getContext());
-        return customView; // this CustomView could be any view that you want to render
-    }
-
-    @Override
-    public void onViewCreated(View view, Bundle savedInstanceState) {
-        super.onViewCreated(view, savedInstanceState);
-        // do any logic that should happen in an `onCreate` method, e.g:
-        // customView.onCreate(savedInstanceState);
-    }
-
-    @Override
-    public void onPause() {
-        super.onPause();
-        // do any logic that should happen in an `onPause` method
-        // e.g.: customView.onPause();
-    }
-
-    @Override
-    public void onResume() {
-        super.onResume();
-       // do any logic that should happen in an `onResume` method
-       // e.g.: customView.onResume();
-    }
-
-    @Override
-    public void onDestroy() {
-        super.onDestroy();
-        // do any logic that should happen in an `onDestroy` method
-        // e.g.: customView.onDestroy();
-    }
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 3. Create the `ViewManager` subclass
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin title="MyViewManager.kt"
-// replace with your package
-package com.mypackage
-
-import android.view.Choreographer
-import android.view.View
-import android.view.ViewGroup
-import android.widget.FrameLayout
-import androidx.fragment.app.FragmentActivity
-import com.facebook.react.bridge.ReactApplicationContext
-import com.facebook.react.bridge.ReadableArray
-import com.facebook.react.uimanager.ThemedReactContext
-import com.facebook.react.uimanager.ViewGroupManager
-import com.facebook.react.uimanager.annotations.ReactPropGroup
-
-class MyViewManager(
-    private val reactContext: ReactApplicationContext
-) : ViewGroupManager<FrameLayout>() {
-  private var propWidth: Int? = null
-  private var propHeight: Int? = null
-
-  override fun getName() = REACT_CLASS
-
-  /**
-   * Return a FrameLayout which will later hold the Fragment
-   */
-  override fun createViewInstance(reactContext: ThemedReactContext) =
-      FrameLayout(reactContext)
-
-  /**
-   * Map the "create" command to an integer
-   */
-  override fun getCommandsMap() = mapOf("create" to COMMAND_CREATE)
-
-  /**
-   * Handle "create" command (called from JS) and call createFragment method
-   */
-  override fun receiveCommand(
-      root: FrameLayout,
-      commandId: String,
-      args: ReadableArray?
-  ) {
-    super.receiveCommand(root, commandId, args)
-    val reactNativeViewId = requireNotNull(args).getInt(0)
-
-    when (commandId.toInt()) {
-      COMMAND_CREATE -> createFragment(root, reactNativeViewId)
-    }
-  }
-
-  @ReactPropGroup(names = ["width", "height"], customType = "Style")
-  fun setStyle(view: FrameLayout, index: Int, value: Int) {
-    if (index == 0) propWidth = value
-    if (index == 1) propHeight = value
-  }
-
-  /**
-   * Replace your React Native view with a custom fragment
-   */
-  fun createFragment(root: FrameLayout, reactNativeViewId: Int) {
-    val parentView = root.findViewById<ViewGroup>(reactNativeViewId)
-    setupLayout(parentView)
-
-    val myFragment = MyFragment()
-    val activity = reactContext.currentActivity as FragmentActivity
-    activity.supportFragmentManager
-        .beginTransaction()
-        .replace(reactNativeViewId, myFragment, reactNativeViewId.toString())
-        .commit()
-  }
-
-  fun setupLayout(view: View) {
-    Choreographer.getInstance().postFrameCallback(object: Choreographer.FrameCallback {
-      override fun doFrame(frameTimeNanos: Long) {
-        manuallyLayoutChildren(view)
-        view.viewTreeObserver.dispatchOnGlobalLayout()
-        Choreographer.getInstance().postFrameCallback(this)
-      }
-    })
-  }
-
-  /**
-   * Layout all children properly
-   */
-  private fun manuallyLayoutChildren(view: View) {
-    // propWidth and propHeight coming from react-native props
-    val width = requireNotNull(propWidth)
-    val height = requireNotNull(propHeight)
-
-    view.measure(
-        View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
-        View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY))
-
-    view.layout(0, 0, width, height)
-  }
-
-  companion object {
-    private const val REACT_CLASS = "MyViewManager"
-    private const val COMMAND_CREATE = 1
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java title="MyViewManager.java"
-// replace with your package
-package com.mypackage;
-
-import android.view.Choreographer;
-import android.view.View;
-import android.view.ViewGroup;
-import android.widget.FrameLayout;
-
-import androidx.annotation.NonNull;
-import androidx.annotation.Nullable;
-import androidx.fragment.app.FragmentActivity;
-
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.ReadableArray;
-import com.facebook.react.common.MapBuilder;
-import com.facebook.react.uimanager.annotations.ReactProp;
-import com.facebook.react.uimanager.annotations.ReactPropGroup;
-import com.facebook.react.uimanager.ViewGroupManager;
-import com.facebook.react.uimanager.ThemedReactContext;
-
-import java.util.Map;
-
-public class MyViewManager extends ViewGroupManager<FrameLayout> {
-
-  public static final String REACT_CLASS = "MyViewManager";
-  public final int COMMAND_CREATE = 1;
-  private int propWidth;
-  private int propHeight;
-
-  ReactApplicationContext reactContext;
-
-  public MyViewManager(ReactApplicationContext reactContext) {
-    this.reactContext = reactContext;
-  }
-
-  @Override
-  public String getName() {
-    return REACT_CLASS;
-  }
-
-  /**
-   * Return a FrameLayout which will later hold the Fragment
-   */
-  @Override
-  public FrameLayout createViewInstance(ThemedReactContext reactContext) {
-    return new FrameLayout(reactContext);
-  }
-
-  /**
-   * Map the "create" command to an integer
-   */
-  @Nullable
-  @Override
-  public Map<String, Integer> getCommandsMap() {
-    return MapBuilder.of("create", COMMAND_CREATE);
-  }
-
-  /**
-   * Handle "create" command (called from JS) and call createFragment method
-   */
-  @Override
-  public void receiveCommand(
-    @NonNull FrameLayout root,
-    String commandId,
-    @Nullable ReadableArray args
-  ) {
-    super.receiveCommand(root, commandId, args);
-    int reactNativeViewId = args.getInt(0);
-    int commandIdInt = Integer.parseInt(commandId);
-
-    switch (commandIdInt) {
-      case COMMAND_CREATE:
-        createFragment(root, reactNativeViewId);
-        break;
-      default: {}
-    }
-  }
-
-  @ReactPropGroup(names = {"width", "height"}, customType = "Style")
-  public void setStyle(FrameLayout view, int index, Integer value) {
-    if (index == 0) {
-      propWidth = value;
-    }
-
-    if (index == 1) {
-      propHeight = value;
-    }
-  }
-
-  /**
-   * Replace your React Native view with a custom fragment
-   */
-  public void createFragment(FrameLayout root, int reactNativeViewId) {
-    ViewGroup parentView = (ViewGroup) root.findViewById(reactNativeViewId);
-    setupLayout(parentView);
-
-    final MyFragment myFragment = new MyFragment();
-    FragmentActivity activity = (FragmentActivity) reactContext.getCurrentActivity();
-    activity.getSupportFragmentManager()
-            .beginTransaction()
-            .replace(reactNativeViewId, myFragment, String.valueOf(reactNativeViewId))
-            .commit();
-  }
-
-  public void setupLayout(View view) {
-    Choreographer.getInstance().postFrameCallback(new Choreographer.FrameCallback() {
-      @Override
-      public void doFrame(long frameTimeNanos) {
-        manuallyLayoutChildren(view);
-        view.getViewTreeObserver().dispatchOnGlobalLayout();
-        Choreographer.getInstance().postFrameCallback(this);
-      }
-    });
-  }
-
-  /**
-   * Layout all children properly
-   */
-  public void manuallyLayoutChildren(View view) {
-      // propWidth and propHeight coming from react-native props
-      int width = propWidth;
-      int height = propHeight;
-
-      view.measure(
-              View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
-              View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY));
-
-      view.layout(0, 0, width, height);
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 4. Register the `ViewManager`
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin title="MyPackage.kt"
-// replace with your package
-package com.mypackage
-
-import com.facebook.react.ReactPackage
-import com.facebook.react.bridge.ReactApplicationContext
-import com.facebook.react.uimanager.ViewManager
-
-class MyPackage : ReactPackage {
-  ...
-  override fun createViewManagers(
-      reactContext: ReactApplicationContext
-  ) = listOf(MyViewManager(reactContext))
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java title="MyPackage.java"
-// replace with your package
-package com.mypackage;
-
-import com.facebook.react.ReactPackage;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.uimanager.ViewManager;
-
-import java.util.Arrays;
-import java.util.List;
-
-public class MyPackage implements ReactPackage {
-
-   @Override
-   public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
-       return Arrays.<ViewManager>asList(
-            new MyViewManager(reactContext)
-       );
-   }
-
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 5. Register the `Package`
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin title="MainApplication.kt"
-override fun getPackages(): List<ReactPackage> =
-    PackageList(this).packages.apply {
-        // Packages that cannot be autolinked yet can be added manually here, for example:
-        // add(MyReactNativePackage())
-        add(MyAppPackage())
-    }
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java title="MainApplication.java"
-@Override
-protected List<ReactPackage> getPackages() {
-    List<ReactPackage> packages = new PackageList(this).getPackages();
-    // Packages that cannot be autolinked yet can be added manually here, for example:
-    // packages.add(new MyReactNativePackage());
-    packages.add(new MyAppPackage());
-    return packages;
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 6. Implement the JavaScript module
-
-I. Start with custom View manager:
-
-```tsx title="MyViewManager.tsx"
-import {requireNativeComponent} from 'react-native';
-
-export const MyViewManager =
-  requireNativeComponent('MyViewManager');
-```
-
-II. Then implement custom View calling the `create` method:
-
-```tsx title="MyView.tsx"
-import React, {useEffect, useRef} from 'react';
-import {
-  PixelRatio,
-  UIManager,
-  findNodeHandle,
-} from 'react-native';
-
-import {MyViewManager} from './my-view-manager';
-
-const createFragment = viewId =>
-  UIManager.dispatchViewManagerCommand(
-    viewId,
-    // we are calling the 'create' command
-    UIManager.MyViewManager.Commands.create.toString(),
-    [viewId],
-  );
-
-export const MyView = () => {
-  const ref = useRef(null);
-
-  useEffect(() => {
-    const viewId = findNodeHandle(ref.current);
-    createFragment(viewId);
-  }, []);
-
-  return (
-    <MyViewManager
-      style={{
-        // converts dpi to px, provide desired height
-        height: PixelRatio.getPixelSizeForLayoutSize(200),
-        // converts dpi to px, provide desired width
-        width: PixelRatio.getPixelSizeForLayoutSize(200),
-      }}
-      ref={ref}
-    />
-  );
-};
-```
-
-If you want to expose property setters using `@ReactProp` (or `@ReactPropGroup`) annotation see the [ImageView example](#imageview-example) above.
+---
+id: native-components-android
+title: Android Native UI Components
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+import NativeDeprecated from '../the-new-architecture/\_markdown_native_deprecation.mdx'
+
+<NativeDeprecated />
+
+There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application.
+
+Like the native module guide, this too is a more advanced guide that assumes you are somewhat familiar with Android SDK programming. This guide will show you how to build a native UI component, walking you through the implementation of a subset of the existing `ImageView` component available in the core React Native library.
+
+:::info
+You can also setup local library containing native component with one command. Read the guide to [Local libraries setup](local-library-setup) for more details.
+:::
+
+## ImageView example
+
+For this example we are going to walk through the implementation requirements to allow the use of ImageViews in JavaScript.
+
+Native views are created and manipulated by extending `ViewManager` or more commonly `SimpleViewManager` . A `SimpleViewManager` is convenient in this case because it applies common properties such as background color, opacity, and Flexbox layout.
+
+These subclasses are essentially singletons - only one instance of each is created by the bridge. They send native views to the `NativeViewHierarchyManager`, which delegates back to them to set and update the properties of the views as necessary. The `ViewManagers` are also typically the delegates for the views, sending events back to JavaScript via the bridge.
+
+To send a view:
+
+1. Create the ViewManager subclass.
+2. Implement the `createViewInstance` method
+3. Expose view property setters using `@ReactProp` (or `@ReactPropGroup`) annotation
+4. Register the manager in `createViewManagers` of the applications package.
+5. Implement the JavaScript module
+
+### 1. Create the `ViewManager` subclass
+
+In this example we create view manager class `ReactImageManager` that extends `SimpleViewManager` of type `ReactImageView`. `ReactImageView` is the type of object managed by the manager, this will be the custom native view. Name returned by `getName` is used to reference the native view type from JavaScript.
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+class ReactImageManager(
+    private val callerContext: ReactApplicationContext
+) : SimpleViewManager<ReactImageView>() {
+
+  override fun getName() = REACT_CLASS
+
+  companion object {
+    const val REACT_CLASS = "RCTImageView"
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+public class ReactImageManager extends SimpleViewManager<ReactImageView> {
+
+  public static final String REACT_CLASS = "RCTImageView";
+  ReactApplicationContext mCallerContext;
+
+  public ReactImageManager(ReactApplicationContext reactContext) {
+    mCallerContext = reactContext;
+  }
+
+  @Override
+  public String getName() {
+    return REACT_CLASS;
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 2. Implement method `createViewInstance`
+
+Views are created in the `createViewInstance` method, the view should initialize itself in its default state, any properties will be set via a follow up call to `updateView.`
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+  override fun createViewInstance(context: ThemedReactContext) =
+      ReactImageView(context, Fresco.newDraweeControllerBuilder(), null, callerContext)
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+  @Override
+  public ReactImageView createViewInstance(ThemedReactContext context) {
+    return new ReactImageView(context, Fresco.newDraweeControllerBuilder(), null, mCallerContext);
+  }
+```
+
+</TabItem>
+</Tabs>
+
+### 3. Expose view property setters using `@ReactProp` (or `@ReactPropGroup`) annotation
+
+Properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with `@ReactProp` (or `@ReactPropGroup`). Setter method should take view to be updated (of the current view type) as a first argument and property value as a second argument. Setter should be public and not return a value (i.e. return type should be `void` in Java or `Unit` in Kotlin). Property type sent to JS is determined automatically based on the type of value argument of the setter. The following type of values are currently supported (in Java): `boolean`, `int`, `float`, `double`, `String`, `Boolean`, `Integer`, `ReadableArray`, `ReadableMap`. The corresponding types in Kotlin are `Boolean`, `Int`, `Float`, `Double`, `String`, `ReadableArray`, `ReadableMap`.
+
+Annotation `@ReactProp` has one obligatory argument `name` of type `String`. Name assigned to the `@ReactProp` annotation linked to the setter method is used to reference the property on JS side.
+
+Except from `name`, `@ReactProp` annotation may take following optional arguments: `defaultBoolean`, `defaultInt`, `defaultFloat`. Those arguments should be of the corresponding type (accordingly `boolean`, `int`, `float` in Java and `Boolean`, `Int`, `Float` in Kotlin) and the value provided will be passed to the setter method in case when the property that the setter is referencing has been removed from the component. Note that "default" values are only provided for primitive types, in case when setter is of some complex type, `null` will be provided as a default value in case when corresponding property gets removed.
+
+Setter declaration requirements for methods annotated with `@ReactPropGroup` are different than for `@ReactProp`, please refer to the `@ReactPropGroup` annotation class docs for more information about it. **IMPORTANT!** in ReactJS updating the property value will result in setter method call. Note that one of the ways we can update component is by removing properties that have been set before. In that case setter method will be called as well to notify view manager that property has changed. In that case "default" value will be provided (for primitive types "default" value can be specified using `defaultBoolean`, `defaultFloat`, etc. arguments of `@ReactProp` annotation, for complex types setter will be called with value set to `null`).
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+  @ReactProp(name = "src")
+  fun setSrc(view: ReactImageView, sources: ReadableArray?) {
+    view.setSource(sources)
+  }
+
+  @ReactProp(name = "borderRadius", defaultFloat = 0f)
+  override fun setBorderRadius(view: ReactImageView, borderRadius: Float) {
+    view.setBorderRadius(borderRadius)
+  }
+
+  @ReactProp(name = ViewProps.RESIZE_MODE)
+  fun setResizeMode(view: ReactImageView, resizeMode: String?) {
+    view.setScaleType(ImageResizeMode.toScaleType(resizeMode))
+  }
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+  @ReactProp(name = "src")
+  public void setSrc(ReactImageView view, @Nullable ReadableArray sources) {
+    view.setSource(sources);
+  }
+
+  @ReactProp(name = "borderRadius", defaultFloat = 0f)
+  public void setBorderRadius(ReactImageView view, float borderRadius) {
+    view.setBorderRadius(borderRadius);
+  }
+
+  @ReactProp(name = ViewProps.RESIZE_MODE)
+  public void setResizeMode(ReactImageView view, @Nullable String resizeMode) {
+    view.setScaleType(ImageResizeMode.toScaleType(resizeMode));
+  }
+```
+
+</TabItem>
+</Tabs>
+
+### 4. Register the `ViewManager`
+
+The final step is to register the ViewManager to the application, this happens in a similar way to [Native Modules](native-modules-android.md), via the applications package member function `createViewManagers`.
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+  override fun createViewManagers(
+      reactContext: ReactApplicationContext
+  ) = listOf(ReactImageManager(reactContext))
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+  @Override
+  public List<ViewManager> createViewManagers(
+                            ReactApplicationContext reactContext) {
+    return Arrays.<ViewManager>asList(
+      new ReactImageManager(reactContext)
+    );
+  }
+```
+
+</TabItem>
+</Tabs>
+
+### 5. Implement the JavaScript module
+
+The very final step is to create the JavaScript module that defines the interface layer between Java/Kotlin and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using TypeScript, Flow, or plain old comments).
+
+```tsx title="ImageView.tsx"
+import {requireNativeComponent} from 'react-native';
+
+/**
+ * Composes `View`.
+ *
+ * - src: Array<{url: string}>
+ * - borderRadius: number
+ * - resizeMode: 'cover' | 'contain' | 'stretch'
+ */
+export default requireNativeComponent('RCTImageView');
+```
+
+The `requireNativeComponent` function takes the name of the native view. Note that if your component needs to do anything more sophisticated (e.g. custom event handling), you should wrap the native component in another React component. This is illustrated in the `MyCustomView` example below.
+
+## Events
+
+So now we know how to expose native view components that we can control freely from JS, but how do we deal with events from the user, like pinch-zooms or panning? When a native event occurs the native code should issue an event to the JavaScript representation of the View, and the two views are linked with the value returned from the `getId()` method.
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+class MyCustomView(context: Context) : View(context) {
+  ...
+  fun onReceiveNativeEvent() {
+    val event = Arguments.createMap().apply {
+      putString("message", "MyMessage")
+    }
+    val reactContext = context as ReactContext
+    reactContext
+        .getJSModule(RCTEventEmitter::class.java)
+        .receiveEvent(id, "topChange", event)
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+class MyCustomView extends View {
+   ...
+   public void onReceiveNativeEvent() {
+      WritableMap event = Arguments.createMap();
+      event.putString("message", "MyMessage");
+      ReactContext reactContext = (ReactContext)getContext();
+      reactContext
+          .getJSModule(RCTEventEmitter.class)
+          .receiveEvent(getId(), "topChange", event);
+    }
+}
+```
+
+</TabItem>
+</Tabs>
+
+To map the `topChange` event name to the `onChange` callback prop in JavaScript, register it by overriding the `getExportedCustomBubblingEventTypeConstants` method in your `ViewManager`:
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+class ReactImageManager : SimpleViewManager<MyCustomView>() {
+  ...
+  override fun getExportedCustomBubblingEventTypeConstants(): Map<String, Any> {
+    return mapOf(
+      "topChange" to mapOf(
+        "phasedRegistrationNames" to mapOf(
+          "bubbled" to "onChange"
+        )
+      )
+    )
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+public class ReactImageManager extends SimpleViewManager<MyCustomView> {
+    ...
+    public Map getExportedCustomBubblingEventTypeConstants() {
+        return MapBuilder.builder().put(
+            "topChange",
+            MapBuilder.of(
+                "phasedRegistrationNames",
+                MapBuilder.of("bubbled", "onChange")
+            )
+        ).build();
+    }
+}
+```
+
+</TabItem>
+</Tabs>
+
+This callback is invoked with the raw event, which we typically process in the wrapper component to make a simpler API:
+
+```tsx {8-11,13-17} title="MyCustomView.tsx"
+import {useCallback} from 'react';
+import {requireNativeComponent} from 'react-native';
+
+const RCTMyCustomView = requireNativeComponent('RCTMyCustomView');
+
+export default function MyCustomView(props: {
+  // ...
+  /**
+   * Callback that is called continuously when the user is dragging the map.
+   */
+  onChangeMessage: (message: string) => unknown;
+}) {
+  const onChange = useCallback(
+    event => {
+      props.onChangeMessage?.(event.nativeEvent.message);
+    },
+    [props.onChangeMessage],
+  );
+
+  return <RCTMyCustomView {...props} onChange={onChange} />;
+}
+```
+
+## Integration with an Android Fragment example
+
+In order to integrate existing Native UI elements to your React Native app, you might need to use Android Fragments to give you a more granular control over your native component than returning a `View` from your `ViewManager`. You will need this if you want to add custom logic that is tied to your view with the help of [lifecycle methods](https://developer.android.com/guide/fragments/lifecycle), such as `onViewCreated`, `onPause`, `onResume`. The following steps will show you how to do it:
+
+### 1. Create an example custom view
+
+First, let's create a `CustomView` class which extends `FrameLayout` (the content of this view can be any view that you'd like to render)
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin title="CustomView.kt"
+// replace with your package
+package com.mypackage
+
+import android.content.Context
+import android.graphics.Color
+import android.widget.FrameLayout
+import android.widget.TextView
+
+class CustomView(context: Context) : FrameLayout(context) {
+  init {
+    // set padding and background color
+    setPadding(16,16,16,16)
+    setBackgroundColor(Color.parseColor("#5FD3F3"))
+
+    // add default text view
+    addView(TextView(context).apply {
+      text = "Welcome to Android Fragments with React Native."
+    })
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java title="CustomView.java"
+// replace with your package
+package com.mypackage;
+
+import android.content.Context;
+import android.graphics.Color;
+import android.widget.FrameLayout;
+import android.widget.ImageView;
+import android.widget.TextView;
+
+import androidx.annotation.NonNull;
+
+public class CustomView extends FrameLayout {
+  public CustomView(@NonNull Context context) {
+    super(context);
+    // set padding and background color
+    this.setPadding(16,16,16,16);
+    this.setBackgroundColor(Color.parseColor("#5FD3F3"));
+
+    // add default text view
+    TextView text = new TextView(context);
+    text.setText("Welcome to Android Fragments with React Native.");
+    this.addView(text);
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 2. Create a `Fragment`
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin title="MyFragment.kt"
+// replace with your package
+package com.mypackage
+
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import androidx.fragment.app.Fragment
+
+// replace with your view's import
+import com.mypackage.CustomView
+
+class MyFragment : Fragment() {
+  private lateinit var customView: CustomView
+
+  override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
+    super.onCreateView(inflater, container, savedInstanceState)
+    customView = CustomView(requireNotNull(context))
+    return customView // this CustomView could be any view that you want to render
+  }
+
+  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+    super.onViewCreated(view, savedInstanceState)
+    // do any logic that should happen in an `onCreate` method, e.g:
+    // customView.onCreate(savedInstanceState);
+  }
+
+  override fun onPause() {
+    super.onPause()
+    // do any logic that should happen in an `onPause` method
+    // e.g.: customView.onPause();
+  }
+
+  override fun onResume() {
+    super.onResume()
+    // do any logic that should happen in an `onResume` method
+    // e.g.: customView.onResume();
+  }
+
+  override fun onDestroy() {
+    super.onDestroy()
+    // do any logic that should happen in an `onDestroy` method
+    // e.g.: customView.onDestroy();
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java title="MyFragment.java"
+// replace with your package
+package com.mypackage;
+
+import android.os.Bundle;
+import android.view.LayoutInflater;
+import android.view.View;
+import android.view.ViewGroup;
+import androidx.fragment.app.Fragment;
+
+// replace with your view's import
+import com.mypackage.CustomView;
+
+public class MyFragment extends Fragment {
+    CustomView customView;
+
+    @Override
+    public View onCreateView(LayoutInflater inflater, ViewGroup parent, Bundle savedInstanceState) {
+        super.onCreateView(inflater, parent, savedInstanceState);
+        customView = new CustomView(this.getContext());
+        return customView; // this CustomView could be any view that you want to render
+    }
+
+    @Override
+    public void onViewCreated(View view, Bundle savedInstanceState) {
+        super.onViewCreated(view, savedInstanceState);
+        // do any logic that should happen in an `onCreate` method, e.g:
+        // customView.onCreate(savedInstanceState);
+    }
+
+    @Override
+    public void onPause() {
+        super.onPause();
+        // do any logic that should happen in an `onPause` method
+        // e.g.: customView.onPause();
+    }
+
+    @Override
+    public void onResume() {
+        super.onResume();
+       // do any logic that should happen in an `onResume` method
+       // e.g.: customView.onResume();
+    }
+
+    @Override
+    public void onDestroy() {
+        super.onDestroy();
+        // do any logic that should happen in an `onDestroy` method
+        // e.g.: customView.onDestroy();
+    }
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 3. Create the `ViewManager` subclass
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin title="MyViewManager.kt"
+// replace with your package
+package com.mypackage
+
+import android.view.Choreographer
+import android.view.View
+import android.view.ViewGroup
+import android.widget.FrameLayout
+import androidx.fragment.app.FragmentActivity
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.annotations.ReactPropGroup
+
+class MyViewManager(
+    private val reactContext: ReactApplicationContext
+) : ViewGroupManager<FrameLayout>() {
+  private var propWidth: Int? = null
+  private var propHeight: Int? = null
+
+  override fun getName() = REACT_CLASS
+
+  /**
+   * Return a FrameLayout which will later hold the Fragment
+   */
+  override fun createViewInstance(reactContext: ThemedReactContext) =
+      FrameLayout(reactContext)
+
+  /**
+   * Map the "create" command to an integer
+   */
+  override fun getCommandsMap() = mapOf("create" to COMMAND_CREATE)
+
+  /**
+   * Handle "create" command (called from JS) and call createFragment method
+   */
+  override fun receiveCommand(
+      root: FrameLayout,
+      commandId: String,
+      args: ReadableArray?
+  ) {
+    super.receiveCommand(root, commandId, args)
+    val reactNativeViewId = requireNotNull(args).getInt(0)
+
+    when (commandId.toInt()) {
+      COMMAND_CREATE -> createFragment(root, reactNativeViewId)
+    }
+  }
+
+  @ReactPropGroup(names = ["width", "height"], customType = "Style")
+  fun setStyle(view: FrameLayout, index: Int, value: Int) {
+    if (index == 0) propWidth = value
+    if (index == 1) propHeight = value
+  }
+
+  /**
+   * Replace your React Native view with a custom fragment
+   */
+  fun createFragment(root: FrameLayout, reactNativeViewId: Int) {
+    val parentView = root.findViewById<ViewGroup>(reactNativeViewId)
+    setupLayout(parentView)
+
+    val myFragment = MyFragment()
+    val activity = reactContext.currentActivity as FragmentActivity
+    activity.supportFragmentManager
+        .beginTransaction()
+        .replace(reactNativeViewId, myFragment, reactNativeViewId.toString())
+        .commit()
+  }
+
+  fun setupLayout(view: View) {
+    Choreographer.getInstance().postFrameCallback(object: Choreographer.FrameCallback {
+      override fun doFrame(frameTimeNanos: Long) {
+        manuallyLayoutChildren(view)
+        view.viewTreeObserver.dispatchOnGlobalLayout()
+        Choreographer.getInstance().postFrameCallback(this)
+      }
+    })
+  }
+
+  /**
+   * Layout all children properly
+   */
+  private fun manuallyLayoutChildren(view: View) {
+    // propWidth and propHeight coming from react-native props
+    val width = requireNotNull(propWidth)
+    val height = requireNotNull(propHeight)
+
+    view.measure(
+        View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
+        View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY))
+
+    view.layout(0, 0, width, height)
+  }
+
+  companion object {
+    private const val REACT_CLASS = "MyViewManager"
+    private const val COMMAND_CREATE = 1
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java title="MyViewManager.java"
+// replace with your package
+package com.mypackage;
+
+import android.view.Choreographer;
+import android.view.View;
+import android.view.ViewGroup;
+import android.widget.FrameLayout;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+import androidx.fragment.app.FragmentActivity;
+
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReadableArray;
+import com.facebook.react.common.MapBuilder;
+import com.facebook.react.uimanager.annotations.ReactProp;
+import com.facebook.react.uimanager.annotations.ReactPropGroup;
+import com.facebook.react.uimanager.ViewGroupManager;
+import com.facebook.react.uimanager.ThemedReactContext;
+
+import java.util.Map;
+
+public class MyViewManager extends ViewGroupManager<FrameLayout> {
+
+  public static final String REACT_CLASS = "MyViewManager";
+  public final int COMMAND_CREATE = 1;
+  private int propWidth;
+  private int propHeight;
+
+  ReactApplicationContext reactContext;
+
+  public MyViewManager(ReactApplicationContext reactContext) {
+    this.reactContext = reactContext;
+  }
+
+  @Override
+  public String getName() {
+    return REACT_CLASS;
+  }
+
+  /**
+   * Return a FrameLayout which will later hold the Fragment
+   */
+  @Override
+  public FrameLayout createViewInstance(ThemedReactContext reactContext) {
+    return new FrameLayout(reactContext);
+  }
+
+  /**
+   * Map the "create" command to an integer
+   */
+  @Nullable
+  @Override
+  public Map<String, Integer> getCommandsMap() {
+    return MapBuilder.of("create", COMMAND_CREATE);
+  }
+
+  /**
+   * Handle "create" command (called from JS) and call createFragment method
+   */
+  @Override
+  public void receiveCommand(
+    @NonNull FrameLayout root,
+    String commandId,
+    @Nullable ReadableArray args
+  ) {
+    super.receiveCommand(root, commandId, args);
+    int reactNativeViewId = args.getInt(0);
+    int commandIdInt = Integer.parseInt(commandId);
+
+    switch (commandIdInt) {
+      case COMMAND_CREATE:
+        createFragment(root, reactNativeViewId);
+        break;
+      default: {}
+    }
+  }
+
+  @ReactPropGroup(names = {"width", "height"}, customType = "Style")
+  public void setStyle(FrameLayout view, int index, Integer value) {
+    if (index == 0) {
+      propWidth = value;
+    }
+
+    if (index == 1) {
+      propHeight = value;
+    }
+  }
+
+  /**
+   * Replace your React Native view with a custom fragment
+   */
+  public void createFragment(FrameLayout root, int reactNativeViewId) {
+    ViewGroup parentView = (ViewGroup) root.findViewById(reactNativeViewId);
+    setupLayout(parentView);
+
+    final MyFragment myFragment = new MyFragment();
+    FragmentActivity activity = (FragmentActivity) reactContext.getCurrentActivity();
+    activity.getSupportFragmentManager()
+            .beginTransaction()
+            .replace(reactNativeViewId, myFragment, String.valueOf(reactNativeViewId))
+            .commit();
+  }
+
+  public void setupLayout(View view) {
+    Choreographer.getInstance().postFrameCallback(new Choreographer.FrameCallback() {
+      @Override
+      public void doFrame(long frameTimeNanos) {
+        manuallyLayoutChildren(view);
+        view.getViewTreeObserver().dispatchOnGlobalLayout();
+        Choreographer.getInstance().postFrameCallback(this);
+      }
+    });
+  }
+
+  /**
+   * Layout all children properly
+   */
+  public void manuallyLayoutChildren(View view) {
+      // propWidth and propHeight coming from react-native props
+      int width = propWidth;
+      int height = propHeight;
+
+      view.measure(
+              View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
+              View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY));
+
+      view.layout(0, 0, width, height);
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 4. Register the `ViewManager`
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin title="MyPackage.kt"
+// replace with your package
+package com.mypackage
+
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+
+class MyPackage : ReactPackage {
+  ...
+  override fun createViewManagers(
+      reactContext: ReactApplicationContext
+  ) = listOf(MyViewManager(reactContext))
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java title="MyPackage.java"
+// replace with your package
+package com.mypackage;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.Arrays;
+import java.util.List;
+
+public class MyPackage implements ReactPackage {
+
+   @Override
+   public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
+       return Arrays.<ViewManager>asList(
+            new MyViewManager(reactContext)
+       );
+   }
+
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 5. Register the `Package`
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin title="MainApplication.kt"
+override fun getPackages(): List<ReactPackage> =
+    PackageList(this).packages.apply {
+        // Packages that cannot be autolinked yet can be added manually here, for example:
+        // add(MyReactNativePackage())
+        add(MyAppPackage())
+    }
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java title="MainApplication.java"
+@Override
+protected List<ReactPackage> getPackages() {
+    List<ReactPackage> packages = new PackageList(this).getPackages();
+    // Packages that cannot be autolinked yet can be added manually here, for example:
+    // packages.add(new MyReactNativePackage());
+    packages.add(new MyAppPackage());
+    return packages;
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 6. Implement the JavaScript module
+
+I. Start with custom View manager:
+
+```tsx title="MyViewManager.tsx"
+import {requireNativeComponent} from 'react-native';
+
+export const MyViewManager =
+  requireNativeComponent('MyViewManager');
+```
+
+II. Then implement custom View calling the `create` method:
+
+```tsx title="MyView.tsx"
+import {useEffect, useRef} from 'react';
+import {
+  PixelRatio,
+  UIManager,
+  findNodeHandle,
+} from 'react-native';
+
+import {MyViewManager} from './my-view-manager';
+
+const createFragment = viewId =>
+  UIManager.dispatchViewManagerCommand(
+    viewId,
+    // we are calling the 'create' command
+    UIManager.MyViewManager.Commands.create.toString(),
+    [viewId],
+  );
+
+export const MyView = () => {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const viewId = findNodeHandle(ref.current);
+    createFragment(viewId);
+  }, []);
+
+  return (
+    <MyViewManager
+      style={{
+        // converts dpi to px, provide desired height
+        height: PixelRatio.getPixelSizeForLayoutSize(200),
+        // converts dpi to px, provide desired width
+        width: PixelRatio.getPixelSizeForLayoutSize(200),
+      }}
+      ref={ref}
+    />
+  );
+};
+```
+
+If you want to expose property setters using `@ReactProp` (or `@ReactPropGroup`) annotation see the [ImageView example](#imageview-example) above.
diff --git a/website/versioned_docs/version-0.80/legacy/native-modules-android.md b/website/versioned_docs/version-0.80/legacy/native-modules-android.md
index 87b91e9e36c..b512f6e20a5 100644
--- a/website/versioned_docs/version-0.80/legacy/native-modules-android.md
+++ b/website/versioned_docs/version-0.80/legacy/native-modules-android.md
@@ -311,7 +311,6 @@ At this point, you have set up the basic scaffolding for your native module in A
 Find a place in your application where you would like to add a call to the native module’s `createCalendarEvent()` method. Below is an example of a component, `NewModuleButton` you can add in your app. You can invoke the native module inside `NewModuleButton`'s `onPress()` function.
 
 ```tsx
-import React from 'react';
 import {NativeModules, Button} from 'react-native';
 
 const NewModuleButton = () => {
diff --git a/website/versioned_docs/version-0.80/legacy/native-modules-ios.md b/website/versioned_docs/version-0.80/legacy/native-modules-ios.md
index 94899bf83c9..b93efe1df24 100644
--- a/website/versioned_docs/version-0.80/legacy/native-modules-ios.md
+++ b/website/versioned_docs/version-0.80/legacy/native-modules-ios.md
@@ -139,7 +139,6 @@ At this point you have set up the basic scaffolding for your native module in iO
 Find a place in your application where you would like to add a call to the native module’s `createCalendarEvent()` method. Below is an example of a component, `NewModuleButton` you can add in your app. You can invoke the native module inside `NewModuleButton`'s `onPress()` function.
 
 ```tsx
-import React from 'react';
 import {Button} from 'react-native';
 
 const NewModuleButton = () => {
diff --git a/website/versioned_docs/version-0.80/linking.md b/website/versioned_docs/version-0.80/linking.md
index ae351b9f484..1e041b84d1c 100644
--- a/website/versioned_docs/version-0.80/linking.md
+++ b/website/versioned_docs/version-0.80/linking.md
@@ -1,671 +1,671 @@
----
-id: linking
-title: Linking
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-`Linking` gives you a general interface to interact with both incoming and outgoing app links.
-
-Every Link (URL) has a URL Scheme, some websites are prefixed with `https://` or `http://` and the `http` is the URL Scheme. Let's call it scheme for short.
-
-In addition to `https`, you're likely also familiar with the `mailto` scheme. When you open a link with the mailto scheme, your operating system will open an installed mail application. Similarly, there are schemes for making phone calls and sending SMS. Read more about [built-in URL](#built-in-url-schemes) schemes below.
-
-Like using the mailto scheme, it's possible to link to other applications by using custom url schemes. For example, when you get a **Magic Link** email from Slack, the **Launch Slack** button is an anchor tag with an href that looks something like: `slack://secret/magic-login/other-secret`. Like with Slack, you can tell the operating system that you want to handle a custom scheme. When the Slack app opens, it receives the URL that was used to open it. This is often referred to as deep linking. Read more about how to [get the deep link](#get-the-deep-link) into your app.
-
-A custom URL scheme isn't the only way to open your application on mobile. For example, if you want to email someone a link to be opened on mobile, using a custom URL scheme isn't ideal because the user might open the email on a desktop, where the link wouldn't work. Instead, you should use standard `https` links, such as `https://www.myapp.io/records/1234546`. On mobile, these links can be configured to open your app. On Android, this feature is called **Deep Links**, while on iOS, it is known as **Universal Links**.
-
-### Built-in URL Schemes
-
-As mentioned in the introduction, there are some URL schemes for core functionality that exist on every platform. The following is a non-exhaustive list, but covers the most commonly used schemes.
-
-| Scheme           | Description                                | iOS | Android |
-| ---------------- | ------------------------------------------ | --- | ------- |
-| `mailto`         | Open mail app, eg: mailto: hello@world.dev | ✅  | ✅      |
-| `tel`            | Open phone app, eg: tel:+123456789         | ✅  | ✅      |
-| `sms`            | Open SMS app, eg: sms:+123456789           | ✅  | ✅      |
-| `https` / `http` | Open web browser app, eg: https://expo.dev | ✅  | ✅      |
-
-### Enabling Deep Links
-
-<div className="banner-native-code-required">
-  <h3>Projects with Native Code Only</h3>
-  <p>The following section only applies to projects with native code exposed. If you are using the managed Expo workflow, see the guide on <a href="https://docs.expo.dev/guides/linking/">Linking</a> in the Expo documentation for the appropriate alternative.</p>
-</div>
-
-If you want to enable deep links in your app, please read the below guide:
-
-<Tabs groupId="syntax" queryString defaultValue={constants.defaultPlatform} values={constants.platforms}>
-<TabItem value="android">
-
-> For instructions on how to add support for deep linking on Android, refer to [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](https://developer.android.com/training/app-indexing/deep-linking.html#adding-filters).
-
-If you wish to receive the intent in an existing instance of MainActivity, you may set the `launchMode` of MainActivity to `singleTask` in `AndroidManifest.xml`. See [`<activity>`](https://developer.android.com/guide/topics/manifest/activity-element.html) documentation for more information.
-
-```xml
-<activity
-  android:name=".MainActivity"
-  android:launchMode="singleTask">
-```
-
-</TabItem>
-<TabItem value="ios">
-
-> **NOTE:** On iOS, you'll need to add the `LinkingIOS` folder into your header search paths as described in step 3 [here](linking-libraries-ios#step-3). If you also want to listen to incoming app links during your app's execution, you'll need to add the following lines to your `*AppDelegate.m`:
-
-<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
-<TabItem value="objc">
-
-```objc title="AppDelegate.mm"
-// iOS 9.x or newer
-#import <React/RCTLinkingManager.h>
-
-- (BOOL)application:(UIApplication *)application
-   openURL:(NSURL *)url
-   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
-{
-  return [RCTLinkingManager application:application openURL:url options:options];
-}
-```
-
-If your app is using [Universal Links](https://developer.apple.com/ios/universal-links/), you'll need to add the following code as well:
-
-```objc title="AppDelegate.mm"
-- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
- restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
-{
- return [RCTLinkingManager application:application
-                  continueUserActivity:userActivity
-                    restorationHandler:restorationHandler];
-}
-```
-
-</TabItem>
-<TabItem value="swift">
-
-```swift title="AppDelegate.swift"
-func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
-  return RCTLinkingManager.application(app, open: url, options: options)
-}
-```
-
-If your app is using [Universal Links](https://developer.apple.com/ios/universal-links/), you'll need to add the following code as well:
-
-```swift title="AppDelegate.swift"
-func application(
-  _ application: UIApplication,
-  continue userActivity: NSUserActivity,
-  restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
-    return RCTLinkingManager.application(
-      application,
-      continue: userActivity,
-      restorationHandler: restorationHandler
-    )
-  }
-```
-
-</TabItem>
-</Tabs>
-
-</TabItem>
-</Tabs>
-
-### Handling Deep Links
-
-There are two ways to handle URLs that open your app.
-
-#### 1. If the app is already open, the app is foregrounded and a Linking 'url' event is fired
-
-You can handle these events with `Linking.addEventListener('url', callback)` - it calls `callback({url})` with the linked URL
-
-#### 2. If the app is not already open, it is opened and the url is passed in as the initialURL
-
-You can handle these events with `Linking.getInitialURL()` - it returns a Promise that resolves to the URL, if there is one.
-
----
-
-## Example
-
-### Open Links and Deep Links (Universal Links)
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useCallback} from 'react';
-import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
-
-const supportedURL = 'https://google.com';
-
-const unsupportedURL = 'slack://open?team=123456';
-
-const OpenURLButton = ({url, children}) => {
-  const handlePress = useCallback(async () => {
-    // Checking if the link is supported for links with custom URL scheme.
-    const supported = await Linking.canOpenURL(url);
-
-    if (supported) {
-      // Opening the link with some app, if the URL scheme is "http" the web link should be opened
-      // by some browser in the mobile
-      await Linking.openURL(url);
-    } else {
-      Alert.alert(`Don't know how to open this URL: ${url}`);
-    }
-  }, [url]);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <OpenURLButton url={supportedURL}>Open Supported URL</OpenURLButton>
-      <OpenURLButton url={unsupportedURL}>Open Unsupported URL</OpenURLButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useCallback} from 'react';
-import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
-
-const supportedURL = 'https://google.com';
-
-const unsupportedURL = 'slack://open?team=123456';
-
-type OpenURLButtonProps = {
-  url: string;
-  children: string;
-};
-
-const OpenURLButton = ({url, children}: OpenURLButtonProps) => {
-  const handlePress = useCallback(async () => {
-    // Checking if the link is supported for links with custom URL scheme.
-    const supported = await Linking.canOpenURL(url);
-
-    if (supported) {
-      // Opening the link with some app, if the URL scheme is "http" the web link should be opened
-      // by some browser in the mobile
-      await Linking.openURL(url);
-    } else {
-      Alert.alert(`Don't know how to open this URL: ${url}`);
-    }
-  }, [url]);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <OpenURLButton url={supportedURL}>Open Supported URL</OpenURLButton>
-      <OpenURLButton url={unsupportedURL}>Open Unsupported URL</OpenURLButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### Open Custom Settings
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useCallback} from 'react';
-import {Button, Linking, StyleSheet, View} from 'react-native';
-
-const OpenSettingsButton = ({children}) => {
-  const handlePress = useCallback(async () => {
-    // Open the custom settings if the app has one
-    await Linking.openSettings();
-  }, []);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <OpenSettingsButton>Open Settings</OpenSettingsButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useCallback} from 'react';
-import {Button, Linking, StyleSheet, View} from 'react-native';
-
-type OpenSettingsButtonProps = {
-  children: string;
-};
-
-const OpenSettingsButton = ({children}: OpenSettingsButtonProps) => {
-  const handlePress = useCallback(async () => {
-    // Open the custom settings if the app has one
-    await Linking.openSettings();
-  }, []);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <OpenSettingsButton>Open Settings</OpenSettingsButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### Get the Deep Link
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useState, useEffect} from 'react';
-import {Linking, StyleSheet, Text, View} from 'react-native';
-
-const useInitialURL = () => {
-  const [url, setUrl] = useState(null);
-  const [processing, setProcessing] = useState(true);
-
-  useEffect(() => {
-    const getUrlAsync = async () => {
-      // Get the deep link used to open the app
-      const initialUrl = await Linking.getInitialURL();
-
-      // The setTimeout is just for testing purpose
-      setTimeout(() => {
-        setUrl(initialUrl);
-        setProcessing(false);
-      }, 1000);
-    };
-
-    getUrlAsync();
-  }, []);
-
-  return {url, processing};
-};
-
-const App = () => {
-  const {url: initialUrl, processing} = useInitialURL();
-
-  return (
-    <View style={styles.container}>
-      <Text>
-        {processing
-          ? 'Processing the initial url from a deep link'
-          : `The deep link is: ${initialUrl || 'None'}`}
-      </Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useState, useEffect} from 'react';
-import {Linking, StyleSheet, Text, View} from 'react-native';
-
-const useInitialURL = () => {
-  const [url, setUrl] = useState<string | null>(null);
-  const [processing, setProcessing] = useState(true);
-
-  useEffect(() => {
-    const getUrlAsync = async () => {
-      // Get the deep link used to open the app
-      const initialUrl = await Linking.getInitialURL();
-
-      // The setTimeout is just for testing purpose
-      setTimeout(() => {
-        setUrl(initialUrl);
-        setProcessing(false);
-      }, 1000);
-    };
-
-    getUrlAsync();
-  }, []);
-
-  return {url, processing};
-};
-
-const App = () => {
-  const {url: initialUrl, processing} = useInitialURL();
-
-  return (
-    <View style={styles.container}>
-      <Text>
-        {processing
-          ? 'Processing the initial url from a deep link'
-          : `The deep link is: ${initialUrl || 'None'}`}
-      </Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### Send Intents (Android)
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=android&ext=js
-import React, {useCallback} from 'react';
-import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
-
-const SendIntentButton = ({action, extras, children}) => {
-  const handlePress = useCallback(async () => {
-    try {
-      await Linking.sendIntent(action, extras);
-    } catch (e) {
-      Alert.alert(e.message);
-    }
-  }, [action, extras]);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <SendIntentButton action="android.intent.action.POWER_USAGE_SUMMARY">
-        Power Usage Summary
-      </SendIntentButton>
-      <SendIntentButton
-        action="android.settings.APP_NOTIFICATION_SETTINGS"
-        extras={[
-          {
-            key: 'android.provider.extra.APP_PACKAGE',
-            value: 'com.facebook.katana',
-          },
-        ]}>
-        App Notification Settings
-      </SendIntentButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Linking%20Example&ext=tsx
-import React, {useCallback} from 'react';
-import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
-
-type SendIntentButtonProps = {
-  action: string;
-  children: string;
-  extras?: Array<{
-    key: string;
-    value: string | number | boolean;
-  }>;
-};
-
-const SendIntentButton = ({
-  action,
-  extras,
-  children,
-}: SendIntentButtonProps) => {
-  const handlePress = useCallback(async () => {
-    try {
-      await Linking.sendIntent(action, extras);
-    } catch (e: any) {
-      Alert.alert(e.message);
-    }
-  }, [action, extras]);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <SendIntentButton action="android.intent.action.POWER_USAGE_SUMMARY">
-        Power Usage Summary
-      </SendIntentButton>
-      <SendIntentButton
-        action="android.settings.APP_NOTIFICATION_SETTINGS"
-        extras={[
-          {
-            key: 'android.provider.extra.APP_PACKAGE',
-            value: 'com.facebook.katana',
-          },
-        ]}>
-        App Notification Settings
-      </SendIntentButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-# Reference
-
-## Methods
-
-### `addEventListener()`
-
-```tsx
-static addEventListener(
-  type: 'url',
-  handler: (event: {url: string}) => void,
-): EmitterSubscription;
-```
-
-Add a handler to Linking changes by listening to the `url` event type and providing the handler.
-
----
-
-### `canOpenURL()`
-
-```tsx
-static canOpenURL(url: string): Promise<boolean>;
-```
-
-Determine whether or not an installed app can handle a given URL.
-
-The method returns a `Promise` object. When it is determined whether or not the given URL can be handled, the promise is resolved and the first parameter is whether or not it can be opened.
-
-The `Promise` will reject on Android if it was impossible to check if the URL can be opened or when targeting Android 11 (SDK 30) if you didn't specify the relevant intent queries in `AndroidManifest.xml`. Similarly on iOS, the promise will reject if you didn't add the specific scheme in the `LSApplicationQueriesSchemes` key inside `Info.plist` (see bellow).
-
-**Parameters:**
-
-| Name                                                     | Type   | Description      |
-| -------------------------------------------------------- | ------ | ---------------- |
-| url <div className="label basic required">Required</div> | string | The URL to open. |
-
-> For web URLs, the protocol (`"http://"`, `"https://"`) must be set accordingly!
-
-> This method has limitations on iOS 9+. From [the official Apple documentation](https://developer.apple.com/documentation/uikit/uiapplication/1622952-canopenurl):
->
-> - If your app is linked against an earlier version of iOS but is running in iOS 9.0 or later, you can call this method up to 50 times. After reaching that limit, subsequent calls always resolve to `false`. If the user reinstalls or upgrades the app, iOS resets the limit.
->
-> As of iOS 9, your app also needs to provide the `LSApplicationQueriesSchemes` key inside `Info.plist` or `canOpenURL()` will always resolve to `false`.
-
-> When targeting Android 11 (SDK 30) you must specify the intents for the schemes you want to handle in `AndroidManifest.xml`. A list of common intents can be found [here](https://developer.android.com/guide/components/intents-common).
->
-> For example to handle `https` schemes the following needs to be added to your manifest:
->
-> ```
-> <manifest ...>
->     <queries>
->         <intent>
->             <action android:name="android.intent.action.VIEW" />
->             <data android:scheme="https"/>
->         </intent>
->     </queries>
-> </manifest>
-> ```
-
----
-
-### `getInitialURL()`
-
-```tsx
-static getInitialURL(): Promise<string | null>;
-```
-
-If the app launch was triggered by an app link, it will give the link url, otherwise it will give `null`.
-
-> To support deep linking on Android, refer https://developer.android.com/training/app-indexing/deep-linking.html#handling-intents
-
-> getInitialURL may return `null` when Remote JS Debugging is active. Disable the debugger to ensure it gets passed.
-
----
-
-### `openSettings()`
-
-```tsx
-static openSettings(): Promise<void>;
-```
-
-Open the Settings app and displays the app’s custom settings, if it has any.
-
----
-
-### `openURL()`
-
-```tsx
-static openURL(url: string): Promise<any>;
-```
-
-Try to open the given `url` with any of the installed apps.
-
-You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386" on Android or "https://maps.apple.com/?ll=37.484847,-122.148386" on iOS), a contact, or any other URL that can be opened with the installed apps.
-
-The method returns a `Promise` object. If the user confirms the open dialog or the url automatically opens, the promise is resolved. If the user cancels the open dialog or there are no registered applications for the url, the promise is rejected.
-
-**Parameters:**
-
-| Name                                                     | Type   | Description      |
-| -------------------------------------------------------- | ------ | ---------------- |
-| url <div className="label basic required">Required</div> | string | The URL to open. |
-
-> This method will fail if the system doesn't know how to open the specified URL. If you're passing in a non-http(s) URL, it's best to check `canOpenURL()` first.
-
-> For web URLs, the protocol (`"http://"`, `"https://"`) must be set accordingly!
-
-> This method may behave differently in a simulator e.g. `"tel:"` links are not able to be handled in the iOS simulator as there's no access to the dialer app.
-
----
-
-### `sendIntent()` <div className="label android">Android</div>
-
-```tsx
-static sendIntent(
-  action: string,
-  extras?: Array<{key: string; value: string | number | boolean}>,
-): Promise<void>;
-```
-
-Launch an Android intent with extras.
-
-**Parameters:**
-
-| Name                                                        | Type                                                       |
-| ----------------------------------------------------------- | ---------------------------------------------------------- |
-| action <div className="label basic required">Required</div> | string                                                     |
-| extras                                                      | `Array<{key: string, value: string ｜ number ｜ boolean}>` |
+---
+id: linking
+title: Linking
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+`Linking` gives you a general interface to interact with both incoming and outgoing app links.
+
+Every Link (URL) has a URL Scheme, some websites are prefixed with `https://` or `http://` and the `http` is the URL Scheme. Let's call it scheme for short.
+
+In addition to `https`, you're likely also familiar with the `mailto` scheme. When you open a link with the mailto scheme, your operating system will open an installed mail application. Similarly, there are schemes for making phone calls and sending SMS. Read more about [built-in URL](#built-in-url-schemes) schemes below.
+
+Like using the mailto scheme, it's possible to link to other applications by using custom url schemes. For example, when you get a **Magic Link** email from Slack, the **Launch Slack** button is an anchor tag with an href that looks something like: `slack://secret/magic-login/other-secret`. Like with Slack, you can tell the operating system that you want to handle a custom scheme. When the Slack app opens, it receives the URL that was used to open it. This is often referred to as deep linking. Read more about how to [get the deep link](#get-the-deep-link) into your app.
+
+A custom URL scheme isn't the only way to open your application on mobile. For example, if you want to email someone a link to be opened on mobile, using a custom URL scheme isn't ideal because the user might open the email on a desktop, where the link wouldn't work. Instead, you should use standard `https` links, such as `https://www.myapp.io/records/1234546`. On mobile, these links can be configured to open your app. On Android, this feature is called **Deep Links**, while on iOS, it is known as **Universal Links**.
+
+### Built-in URL Schemes
+
+As mentioned in the introduction, there are some URL schemes for core functionality that exist on every platform. The following is a non-exhaustive list, but covers the most commonly used schemes.
+
+| Scheme           | Description                                | iOS | Android |
+| ---------------- | ------------------------------------------ | --- | ------- |
+| `mailto`         | Open mail app, eg: mailto: hello@world.dev | ✅  | ✅      |
+| `tel`            | Open phone app, eg: tel:+123456789         | ✅  | ✅      |
+| `sms`            | Open SMS app, eg: sms:+123456789           | ✅  | ✅      |
+| `https` / `http` | Open web browser app, eg: https://expo.dev | ✅  | ✅      |
+
+### Enabling Deep Links
+
+<div className="banner-native-code-required">
+  <h3>Projects with Native Code Only</h3>
+  <p>The following section only applies to projects with native code exposed. If you are using the managed Expo workflow, see the guide on <a href="https://docs.expo.dev/guides/linking/">Linking</a> in the Expo documentation for the appropriate alternative.</p>
+</div>
+
+If you want to enable deep links in your app, please read the below guide:
+
+<Tabs groupId="syntax" queryString defaultValue={constants.defaultPlatform} values={constants.platforms}>
+<TabItem value="android">
+
+> For instructions on how to add support for deep linking on Android, refer to [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](https://developer.android.com/training/app-indexing/deep-linking.html#adding-filters).
+
+If you wish to receive the intent in an existing instance of MainActivity, you may set the `launchMode` of MainActivity to `singleTask` in `AndroidManifest.xml`. See [`<activity>`](https://developer.android.com/guide/topics/manifest/activity-element.html) documentation for more information.
+
+```xml
+<activity
+  android:name=".MainActivity"
+  android:launchMode="singleTask">
+```
+
+</TabItem>
+<TabItem value="ios">
+
+> **NOTE:** On iOS, you'll need to add the `LinkingIOS` folder into your header search paths as described in step 3 [here](linking-libraries-ios#step-3). If you also want to listen to incoming app links during your app's execution, you'll need to add the following lines to your `*AppDelegate.m`:
+
+<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
+<TabItem value="objc">
+
+```objc title="AppDelegate.mm"
+// iOS 9.x or newer
+#import <React/RCTLinkingManager.h>
+
+- (BOOL)application:(UIApplication *)application
+   openURL:(NSURL *)url
+   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
+{
+  return [RCTLinkingManager application:application openURL:url options:options];
+}
+```
+
+If your app is using [Universal Links](https://developer.apple.com/ios/universal-links/), you'll need to add the following code as well:
+
+```objc title="AppDelegate.mm"
+- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
+ restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
+{
+ return [RCTLinkingManager application:application
+                  continueUserActivity:userActivity
+                    restorationHandler:restorationHandler];
+}
+```
+
+</TabItem>
+<TabItem value="swift">
+
+```swift title="AppDelegate.swift"
+func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
+  return RCTLinkingManager.application(app, open: url, options: options)
+}
+```
+
+If your app is using [Universal Links](https://developer.apple.com/ios/universal-links/), you'll need to add the following code as well:
+
+```swift title="AppDelegate.swift"
+func application(
+  _ application: UIApplication,
+  continue userActivity: NSUserActivity,
+  restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
+    return RCTLinkingManager.application(
+      application,
+      continue: userActivity,
+      restorationHandler: restorationHandler
+    )
+  }
+```
+
+</TabItem>
+</Tabs>
+
+</TabItem>
+</Tabs>
+
+### Handling Deep Links
+
+There are two ways to handle URLs that open your app.
+
+#### 1. If the app is already open, the app is foregrounded and a Linking 'url' event is fired
+
+You can handle these events with `Linking.addEventListener('url', callback)` - it calls `callback({url})` with the linked URL
+
+#### 2. If the app is not already open, it is opened and the url is passed in as the initialURL
+
+You can handle these events with `Linking.getInitialURL()` - it returns a Promise that resolves to the URL, if there is one.
+
+---
+
+## Example
+
+### Open Links and Deep Links (Universal Links)
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
+import {useCallback} from 'react';
+import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
+
+const supportedURL = 'https://google.com';
+
+const unsupportedURL = 'slack://open?team=123456';
+
+const OpenURLButton = ({url, children}) => {
+  const handlePress = useCallback(async () => {
+    // Checking if the link is supported for links with custom URL scheme.
+    const supported = await Linking.canOpenURL(url);
+
+    if (supported) {
+      // Opening the link with some app, if the URL scheme is "http" the web link should be opened
+      // by some browser in the mobile
+      await Linking.openURL(url);
+    } else {
+      Alert.alert(`Don't know how to open this URL: ${url}`);
+    }
+  }, [url]);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <OpenURLButton url={supportedURL}>Open Supported URL</OpenURLButton>
+      <OpenURLButton url={unsupportedURL}>Open Unsupported URL</OpenURLButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
+import {useCallback} from 'react';
+import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
+
+const supportedURL = 'https://google.com';
+
+const unsupportedURL = 'slack://open?team=123456';
+
+type OpenURLButtonProps = {
+  url: string;
+  children: string;
+};
+
+const OpenURLButton = ({url, children}: OpenURLButtonProps) => {
+  const handlePress = useCallback(async () => {
+    // Checking if the link is supported for links with custom URL scheme.
+    const supported = await Linking.canOpenURL(url);
+
+    if (supported) {
+      // Opening the link with some app, if the URL scheme is "http" the web link should be opened
+      // by some browser in the mobile
+      await Linking.openURL(url);
+    } else {
+      Alert.alert(`Don't know how to open this URL: ${url}`);
+    }
+  }, [url]);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <OpenURLButton url={supportedURL}>Open Supported URL</OpenURLButton>
+      <OpenURLButton url={unsupportedURL}>Open Unsupported URL</OpenURLButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### Open Custom Settings
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
+import {useCallback} from 'react';
+import {Button, Linking, StyleSheet, View} from 'react-native';
+
+const OpenSettingsButton = ({children}) => {
+  const handlePress = useCallback(async () => {
+    // Open the custom settings if the app has one
+    await Linking.openSettings();
+  }, []);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <OpenSettingsButton>Open Settings</OpenSettingsButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
+import {useCallback} from 'react';
+import {Button, Linking, StyleSheet, View} from 'react-native';
+
+type OpenSettingsButtonProps = {
+  children: string;
+};
+
+const OpenSettingsButton = ({children}: OpenSettingsButtonProps) => {
+  const handlePress = useCallback(async () => {
+    // Open the custom settings if the app has one
+    await Linking.openSettings();
+  }, []);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <OpenSettingsButton>Open Settings</OpenSettingsButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### Get the Deep Link
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
+import {useState, useEffect} from 'react';
+import {Linking, StyleSheet, Text, View} from 'react-native';
+
+const useInitialURL = () => {
+  const [url, setUrl] = useState(null);
+  const [processing, setProcessing] = useState(true);
+
+  useEffect(() => {
+    const getUrlAsync = async () => {
+      // Get the deep link used to open the app
+      const initialUrl = await Linking.getInitialURL();
+
+      // The setTimeout is just for testing purpose
+      setTimeout(() => {
+        setUrl(initialUrl);
+        setProcessing(false);
+      }, 1000);
+    };
+
+    getUrlAsync();
+  }, []);
+
+  return {url, processing};
+};
+
+const App = () => {
+  const {url: initialUrl, processing} = useInitialURL();
+
+  return (
+    <View style={styles.container}>
+      <Text>
+        {processing
+          ? 'Processing the initial url from a deep link'
+          : `The deep link is: ${initialUrl || 'None'}`}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
+import {useState, useEffect} from 'react';
+import {Linking, StyleSheet, Text, View} from 'react-native';
+
+const useInitialURL = () => {
+  const [url, setUrl] = useState<string | null>(null);
+  const [processing, setProcessing] = useState(true);
+
+  useEffect(() => {
+    const getUrlAsync = async () => {
+      // Get the deep link used to open the app
+      const initialUrl = await Linking.getInitialURL();
+
+      // The setTimeout is just for testing purpose
+      setTimeout(() => {
+        setUrl(initialUrl);
+        setProcessing(false);
+      }, 1000);
+    };
+
+    getUrlAsync();
+  }, []);
+
+  return {url, processing};
+};
+
+const App = () => {
+  const {url: initialUrl, processing} = useInitialURL();
+
+  return (
+    <View style={styles.container}>
+      <Text>
+        {processing
+          ? 'Processing the initial url from a deep link'
+          : `The deep link is: ${initialUrl || 'None'}`}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### Send Intents (Android)
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=android&ext=js
+import {useCallback} from 'react';
+import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
+
+const SendIntentButton = ({action, extras, children}) => {
+  const handlePress = useCallback(async () => {
+    try {
+      await Linking.sendIntent(action, extras);
+    } catch (e) {
+      Alert.alert(e.message);
+    }
+  }, [action, extras]);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <SendIntentButton action="android.intent.action.POWER_USAGE_SUMMARY">
+        Power Usage Summary
+      </SendIntentButton>
+      <SendIntentButton
+        action="android.settings.APP_NOTIFICATION_SETTINGS"
+        extras={[
+          {
+            key: 'android.provider.extra.APP_PACKAGE',
+            value: 'com.facebook.katana',
+          },
+        ]}>
+        App Notification Settings
+      </SendIntentButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Linking%20Example&ext=tsx
+import {useCallback} from 'react';
+import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
+
+type SendIntentButtonProps = {
+  action: string;
+  children: string;
+  extras?: Array<{
+    key: string;
+    value: string | number | boolean;
+  }>;
+};
+
+const SendIntentButton = ({
+  action,
+  extras,
+  children,
+}: SendIntentButtonProps) => {
+  const handlePress = useCallback(async () => {
+    try {
+      await Linking.sendIntent(action, extras);
+    } catch (e: any) {
+      Alert.alert(e.message);
+    }
+  }, [action, extras]);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <SendIntentButton action="android.intent.action.POWER_USAGE_SUMMARY">
+        Power Usage Summary
+      </SendIntentButton>
+      <SendIntentButton
+        action="android.settings.APP_NOTIFICATION_SETTINGS"
+        extras={[
+          {
+            key: 'android.provider.extra.APP_PACKAGE',
+            value: 'com.facebook.katana',
+          },
+        ]}>
+        App Notification Settings
+      </SendIntentButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+# Reference
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+  type: 'url',
+  handler: (event: {url: string}) => void,
+): EmitterSubscription;
+```
+
+Add a handler to Linking changes by listening to the `url` event type and providing the handler.
+
+---
+
+### `canOpenURL()`
+
+```tsx
+static canOpenURL(url: string): Promise<boolean>;
+```
+
+Determine whether or not an installed app can handle a given URL.
+
+The method returns a `Promise` object. When it is determined whether or not the given URL can be handled, the promise is resolved and the first parameter is whether or not it can be opened.
+
+The `Promise` will reject on Android if it was impossible to check if the URL can be opened or when targeting Android 11 (SDK 30) if you didn't specify the relevant intent queries in `AndroidManifest.xml`. Similarly on iOS, the promise will reject if you didn't add the specific scheme in the `LSApplicationQueriesSchemes` key inside `Info.plist` (see bellow).
+
+**Parameters:**
+
+| Name                                                     | Type   | Description      |
+| -------------------------------------------------------- | ------ | ---------------- |
+| url <div className="label basic required">Required</div> | string | The URL to open. |
+
+> For web URLs, the protocol (`"http://"`, `"https://"`) must be set accordingly!
+
+> This method has limitations on iOS 9+. From [the official Apple documentation](https://developer.apple.com/documentation/uikit/uiapplication/1622952-canopenurl):
+>
+> - If your app is linked against an earlier version of iOS but is running in iOS 9.0 or later, you can call this method up to 50 times. After reaching that limit, subsequent calls always resolve to `false`. If the user reinstalls or upgrades the app, iOS resets the limit.
+>
+> As of iOS 9, your app also needs to provide the `LSApplicationQueriesSchemes` key inside `Info.plist` or `canOpenURL()` will always resolve to `false`.
+
+> When targeting Android 11 (SDK 30) you must specify the intents for the schemes you want to handle in `AndroidManifest.xml`. A list of common intents can be found [here](https://developer.android.com/guide/components/intents-common).
+>
+> For example to handle `https` schemes the following needs to be added to your manifest:
+>
+> ```
+> <manifest ...>
+>     <queries>
+>         <intent>
+>             <action android:name="android.intent.action.VIEW" />
+>             <data android:scheme="https"/>
+>         </intent>
+>     </queries>
+> </manifest>
+> ```
+
+---
+
+### `getInitialURL()`
+
+```tsx
+static getInitialURL(): Promise<string | null>;
+```
+
+If the app launch was triggered by an app link, it will give the link url, otherwise it will give `null`.
+
+> To support deep linking on Android, refer https://developer.android.com/training/app-indexing/deep-linking.html#handling-intents
+
+> getInitialURL may return `null` when Remote JS Debugging is active. Disable the debugger to ensure it gets passed.
+
+---
+
+### `openSettings()`
+
+```tsx
+static openSettings(): Promise<void>;
+```
+
+Open the Settings app and displays the app’s custom settings, if it has any.
+
+---
+
+### `openURL()`
+
+```tsx
+static openURL(url: string): Promise<any>;
+```
+
+Try to open the given `url` with any of the installed apps.
+
+You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386" on Android or "https://maps.apple.com/?ll=37.484847,-122.148386" on iOS), a contact, or any other URL that can be opened with the installed apps.
+
+The method returns a `Promise` object. If the user confirms the open dialog or the url automatically opens, the promise is resolved. If the user cancels the open dialog or there are no registered applications for the url, the promise is rejected.
+
+**Parameters:**
+
+| Name                                                     | Type   | Description      |
+| -------------------------------------------------------- | ------ | ---------------- |
+| url <div className="label basic required">Required</div> | string | The URL to open. |
+
+> This method will fail if the system doesn't know how to open the specified URL. If you're passing in a non-http(s) URL, it's best to check `canOpenURL()` first.
+
+> For web URLs, the protocol (`"http://"`, `"https://"`) must be set accordingly!
+
+> This method may behave differently in a simulator e.g. `"tel:"` links are not able to be handled in the iOS simulator as there's no access to the dialer app.
+
+---
+
+### `sendIntent()` <div className="label android">Android</div>
+
+```tsx
+static sendIntent(
+  action: string,
+  extras?: Array<{key: string; value: string | number | boolean}>,
+): Promise<void>;
+```
+
+Launch an Android intent with extras.
+
+**Parameters:**
+
+| Name                                                        | Type                                                       |
+| ----------------------------------------------------------- | ---------------------------------------------------------- |
+| action <div className="label basic required">Required</div> | string                                                     |
+| extras                                                      | `Array<{key: string, value: string ｜ number ｜ boolean}>` |
diff --git a/website/versioned_docs/version-0.80/modal.md b/website/versioned_docs/version-0.80/modal.md
index 3c1231a6ee0..463f47fd400 100644
--- a/website/versioned_docs/version-0.80/modal.md
+++ b/website/versioned_docs/version-0.80/modal.md
@@ -1,255 +1,255 @@
----
-id: modal
-title: Modal
----
-
-The Modal component is a basic way to present content above an enclosing view.
-
-## Example
-
-```SnackPlayer name=Modal&supportedPlatforms=android,ios
-import React, {useState} from 'react';
-import {Alert, Modal, StyleSheet, Text, Pressable, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [modalVisible, setModalVisible] = useState(false);
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.centeredView}>
-        <Modal
-          animationType="slide"
-          transparent={true}
-          visible={modalVisible}
-          onRequestClose={() => {
-            Alert.alert('Modal has been closed.');
-            setModalVisible(!modalVisible);
-          }}>
-          <View style={styles.centeredView}>
-            <View style={styles.modalView}>
-              <Text style={styles.modalText}>Hello World!</Text>
-              <Pressable
-                style={[styles.button, styles.buttonClose]}
-                onPress={() => setModalVisible(!modalVisible)}>
-                <Text style={styles.textStyle}>Hide Modal</Text>
-              </Pressable>
-            </View>
-          </View>
-        </Modal>
-        <Pressable
-          style={[styles.button, styles.buttonOpen]}
-          onPress={() => setModalVisible(true)}>
-          <Text style={styles.textStyle}>Show Modal</Text>
-        </Pressable>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  centeredView: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  modalView: {
-    margin: 20,
-    backgroundColor: 'white',
-    borderRadius: 20,
-    padding: 35,
-    alignItems: 'center',
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 4,
-    elevation: 5,
-  },
-  button: {
-    borderRadius: 20,
-    padding: 10,
-    elevation: 2,
-  },
-  buttonOpen: {
-    backgroundColor: '#F194FF',
-  },
-  buttonClose: {
-    backgroundColor: '#2196F3',
-  },
-  textStyle: {
-    color: 'white',
-    fontWeight: 'bold',
-    textAlign: 'center',
-  },
-  modalText: {
-    marginBottom: 15,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Props
-
-### [View Props](view.md#props)
-
-Inherits [View Props](view.md#props).
-
----
-
-### `animated`
-
-> **Deprecated.** Use the [`animationType`](modal.md#animationtype) prop instead.
-
----
-
-### `animationType`
-
-The `animationType` prop controls how the modal animates.
-
-Possible values:
-
-- `slide` slides in from the bottom
-- `fade` fades into view
-- `none` appears without an animation
-
-| Type                                | Default |
-| ----------------------------------- | ------- |
-| enum(`'none'`, `'slide'`, `'fade'`) | `none`  |
-
----
-
-### `backdropColor`
-
-The `backdropColor` of the modal (or background color of the modal's container.) Defaults to `white` if not provided and transparent is `false`. Ignored if `transparent` is `true`.
-
-| Type            | Default |
-| --------------- | ------- |
-| [color](colors) | white   |
-
----
-
-### `hardwareAccelerated` <div className="label android">Android</div>
-
-The `hardwareAccelerated` prop controls whether to force hardware acceleration for the underlying window.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `navigationBarTranslucent` <div className="label android">Android</div>
-
-The `navigationBarTranslucent` prop determines whether your modal should go under the system navigation bar. However, `statusBarTranslucent` also needs to be set to `true` to make navigation bar translucent.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `onDismiss` <div className="label ios">iOS</div>
-
-The `onDismiss` prop allows passing a function that will be called once the modal has been dismissed.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onOrientationChange` <div className="label ios">iOS</div>
-
-The `onOrientationChange` callback is called when the orientation changes while the modal is being displayed. The orientation provided is only 'portrait' or 'landscape'. This callback is also called on initial render, regardless of the current orientation.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onRequestClose`
-
-The `onRequestClose` callback is called when the user taps the hardware back button on Android or the menu button on Apple TV. Because of this required prop, be aware that `BackHandler` events will not be emitted as long as the modal is open.
-On iOS, this callback is called when a Modal is being dismissed using a drag gesture when `presentationStyle` is `pageSheet` or `formSheet`
-
-| Type                                                                                                                                                                                           |
-| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| function <div className="label basic required">Required</div><div className="label android">Android</div><div className="label tv">TV</div><hr />function <div className="label ios">iOS</div> |
-
----
-
-### `onShow`
-
-The `onShow` prop allows passing a function that will be called once the modal has been shown.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `presentationStyle` <div className="label ios">iOS</div>
-
-The `presentationStyle` prop controls how the modal appears (generally on larger devices such as iPad or plus-sized iPhones). See https://developer.apple.com/reference/uikit/uimodalpresentationstyle for details.
-
-Possible values:
-
-- `fullScreen` covers the screen completely
-- `pageSheet` covers portrait-width view centered (only on larger devices)
-- `formSheet` covers narrow-width view centered (only on larger devices)
-- `overFullScreen` covers the screen completely, but allows transparency
-
-| Type                                                                   | Default                                                                             |
-| ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
-| enum(`'fullScreen'`, `'pageSheet'`, `'formSheet'`, `'overFullScreen'`) | `fullScreen` if `transparent={false}`<hr />`overFullScreen` if `transparent={true}` |
-
----
-
-### `statusBarTranslucent` <div className="label android">Android</div>
-
-The `statusBarTranslucent` prop determines whether your modal should go under the system statusbar.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `supportedOrientations` <div className="label ios">iOS</div>
-
-The `supportedOrientations` prop allows the modal to be rotated to any of the specified orientations. On iOS, the modal is still restricted by what's specified in your app's Info.plist's UISupportedInterfaceOrientations field.
-
-> When using `presentationStyle` of `pageSheet` or `formSheet`, this property will be ignored by iOS.
-
-| Type                                                                                                           | Default        |
-| -------------------------------------------------------------------------------------------------------------- | -------------- |
-| array of enums(`'portrait'`, `'portrait-upside-down'`, `'landscape'`, `'landscape-left'`, `'landscape-right'`) | `['portrait']` |
-
----
-
-### `transparent`
-
-The `transparent` prop determines whether your modal will fill the entire view. Setting this to `true` will render the modal over a transparent background.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `visible`
-
-The `visible` prop determines whether your modal is visible.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `true`  |
+---
+id: modal
+title: Modal
+---
+
+The Modal component is a basic way to present content above an enclosing view.
+
+## Example
+
+```SnackPlayer name=Modal&supportedPlatforms=android,ios
+import {useState} from 'react';
+import {Alert, Modal, StyleSheet, Text, Pressable, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [modalVisible, setModalVisible] = useState(false);
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.centeredView}>
+        <Modal
+          animationType="slide"
+          transparent={true}
+          visible={modalVisible}
+          onRequestClose={() => {
+            Alert.alert('Modal has been closed.');
+            setModalVisible(!modalVisible);
+          }}>
+          <View style={styles.centeredView}>
+            <View style={styles.modalView}>
+              <Text style={styles.modalText}>Hello World!</Text>
+              <Pressable
+                style={[styles.button, styles.buttonClose]}
+                onPress={() => setModalVisible(!modalVisible)}>
+                <Text style={styles.textStyle}>Hide Modal</Text>
+              </Pressable>
+            </View>
+          </View>
+        </Modal>
+        <Pressable
+          style={[styles.button, styles.buttonOpen]}
+          onPress={() => setModalVisible(true)}>
+          <Text style={styles.textStyle}>Show Modal</Text>
+        </Pressable>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  centeredView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalView: {
+    margin: 20,
+    backgroundColor: 'white',
+    borderRadius: 20,
+    padding: 35,
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  button: {
+    borderRadius: 20,
+    padding: 10,
+    elevation: 2,
+  },
+  buttonOpen: {
+    backgroundColor: '#F194FF',
+  },
+  buttonClose: {
+    backgroundColor: '#2196F3',
+  },
+  textStyle: {
+    color: 'white',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  modalText: {
+    marginBottom: 15,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Props
+
+### [View Props](view.md#props)
+
+Inherits [View Props](view.md#props).
+
+---
+
+### `animated`
+
+> **Deprecated.** Use the [`animationType`](modal.md#animationtype) prop instead.
+
+---
+
+### `animationType`
+
+The `animationType` prop controls how the modal animates.
+
+Possible values:
+
+- `slide` slides in from the bottom
+- `fade` fades into view
+- `none` appears without an animation
+
+| Type                                | Default |
+| ----------------------------------- | ------- |
+| enum(`'none'`, `'slide'`, `'fade'`) | `none`  |
+
+---
+
+### `backdropColor`
+
+The `backdropColor` of the modal (or background color of the modal's container.) Defaults to `white` if not provided and transparent is `false`. Ignored if `transparent` is `true`.
+
+| Type            | Default |
+| --------------- | ------- |
+| [color](colors) | white   |
+
+---
+
+### `hardwareAccelerated` <div className="label android">Android</div>
+
+The `hardwareAccelerated` prop controls whether to force hardware acceleration for the underlying window.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `navigationBarTranslucent` <div className="label android">Android</div>
+
+The `navigationBarTranslucent` prop determines whether your modal should go under the system navigation bar. However, `statusBarTranslucent` also needs to be set to `true` to make navigation bar translucent.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `onDismiss` <div className="label ios">iOS</div>
+
+The `onDismiss` prop allows passing a function that will be called once the modal has been dismissed.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onOrientationChange` <div className="label ios">iOS</div>
+
+The `onOrientationChange` callback is called when the orientation changes while the modal is being displayed. The orientation provided is only 'portrait' or 'landscape'. This callback is also called on initial render, regardless of the current orientation.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onRequestClose`
+
+The `onRequestClose` callback is called when the user taps the hardware back button on Android or the menu button on Apple TV. Because of this required prop, be aware that `BackHandler` events will not be emitted as long as the modal is open.
+On iOS, this callback is called when a Modal is being dismissed using a drag gesture when `presentationStyle` is `pageSheet` or `formSheet`
+
+| Type                                                                                                                                                                                           |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| function <div className="label basic required">Required</div><div className="label android">Android</div><div className="label tv">TV</div><hr />function <div className="label ios">iOS</div> |
+
+---
+
+### `onShow`
+
+The `onShow` prop allows passing a function that will be called once the modal has been shown.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `presentationStyle` <div className="label ios">iOS</div>
+
+The `presentationStyle` prop controls how the modal appears (generally on larger devices such as iPad or plus-sized iPhones). See https://developer.apple.com/reference/uikit/uimodalpresentationstyle for details.
+
+Possible values:
+
+- `fullScreen` covers the screen completely
+- `pageSheet` covers portrait-width view centered (only on larger devices)
+- `formSheet` covers narrow-width view centered (only on larger devices)
+- `overFullScreen` covers the screen completely, but allows transparency
+
+| Type                                                                   | Default                                                                             |
+| ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
+| enum(`'fullScreen'`, `'pageSheet'`, `'formSheet'`, `'overFullScreen'`) | `fullScreen` if `transparent={false}`<hr />`overFullScreen` if `transparent={true}` |
+
+---
+
+### `statusBarTranslucent` <div className="label android">Android</div>
+
+The `statusBarTranslucent` prop determines whether your modal should go under the system statusbar.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `supportedOrientations` <div className="label ios">iOS</div>
+
+The `supportedOrientations` prop allows the modal to be rotated to any of the specified orientations. On iOS, the modal is still restricted by what's specified in your app's Info.plist's UISupportedInterfaceOrientations field.
+
+> When using `presentationStyle` of `pageSheet` or `formSheet`, this property will be ignored by iOS.
+
+| Type                                                                                                           | Default        |
+| -------------------------------------------------------------------------------------------------------------- | -------------- |
+| array of enums(`'portrait'`, `'portrait-upside-down'`, `'landscape'`, `'landscape-left'`, `'landscape-right'`) | `['portrait']` |
+
+---
+
+### `transparent`
+
+The `transparent` prop determines whether your modal will fill the entire view. Setting this to `true` will render the modal over a transparent background.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `visible`
+
+The `visible` prop determines whether your modal is visible.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `true`  |
diff --git a/website/versioned_docs/version-0.80/navigation.md b/website/versioned_docs/version-0.80/navigation.md
index 363b48b1261..4d9586bf801 100644
--- a/website/versioned_docs/version-0.80/navigation.md
+++ b/website/versioned_docs/version-0.80/navigation.md
@@ -64,7 +64,6 @@ Now you are ready to build and run your app on the device/simulator.
 Now you can create an app with a home screen and a profile screen:
 
 ```tsx
-import * as React from 'react';
 import {createStaticNavigation} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 
diff --git a/website/versioned_docs/version-0.80/network.md b/website/versioned_docs/version-0.80/network.md
index dbf64704451..4cc4b9fcf31 100644
--- a/website/versioned_docs/version-0.80/network.md
+++ b/website/versioned_docs/version-0.80/network.md
@@ -1,274 +1,274 @@
----
-id: network
-title: Networking
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may need to fetch a chunk of static content from another server.
-
-## Using Fetch
-
-React Native provides the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) for your networking needs. Fetch will seem familiar if you have used `XMLHttpRequest` or other networking APIs before. You may refer to MDN's guide on [Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) for additional information.
-
-### Making requests
-
-In order to fetch content from an arbitrary URL, you can pass the URL to fetch:
-
-```ts
-fetch('https://mywebsite.com/mydata.json');
-```
-
-Fetch also takes an optional second argument that allows you to customize the HTTP request. You may want to specify additional headers, or make a POST request:
-
-```ts
-fetch('https://mywebsite.com/endpoint/', {
-  method: 'POST',
-  headers: {
-    Accept: 'application/json',
-    'Content-Type': 'application/json',
-  },
-  body: JSON.stringify({
-    firstParam: 'yourValue',
-    secondParam: 'yourOtherValue',
-  }),
-});
-```
-
-Take a look at the [Fetch Request docs](https://developer.mozilla.org/en-US/docs/Web/API/Request) for a full list of properties.
-
-### Handling the response
-
-The above examples show how you can make a request. In many cases, you will want to do something with the response.
-
-Networking is an inherently asynchronous operation. Fetch method will return a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that makes it straightforward to write code that works in an asynchronous manner:
-
-```ts
-const getMoviesFromApi = () => {
-  return fetch('https://reactnative.dev/movies.json')
-    .then(response => response.json())
-    .then(json => {
-      return json.movies;
-    })
-    .catch(error => {
-      console.error(error);
-    });
-};
-```
-
-You can also use the `async` / `await` syntax in a React Native app:
-
-```ts
-const getMoviesFromApiAsync = async () => {
-  try {
-    const response = await fetch(
-      'https://reactnative.dev/movies.json',
-    );
-    const json = await response.json();
-    return json.movies;
-  } catch (error) {
-    console.error(error);
-  }
-};
-```
-
-Don't forget to catch any errors that may be thrown by `fetch`, otherwise they will be dropped silently.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Fetch%20Example&ext=js
-import React, {useEffect, useState} from 'react';
-import {ActivityIndicator, FlatList, Text, View} from 'react-native';
-
-const App = () => {
-  const [isLoading, setLoading] = useState(true);
-  const [data, setData] = useState([]);
-
-  const getMovies = async () => {
-    try {
-      const response = await fetch('https://reactnative.dev/movies.json');
-      const json = await response.json();
-      setData(json.movies);
-    } catch (error) {
-      console.error(error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    getMovies();
-  }, []);
-
-  return (
-    <View style={{flex: 1, padding: 24}}>
-      {isLoading ? (
-        <ActivityIndicator />
-      ) : (
-        <FlatList
-          data={data}
-          keyExtractor={({id}) => id}
-          renderItem={({item}) => (
-            <Text>
-              {item.title}, {item.releaseYear}
-            </Text>
-          )}
-        />
-      )}
-    </View>
-  );
-};
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Fetch%20Example&ext=tsx
-import React, {useEffect, useState} from 'react';
-import {ActivityIndicator, FlatList, Text, View} from 'react-native';
-
-type Movie = {
-  id: string;
-  title: string;
-  releaseYear: string;
-};
-
-const App = () => {
-  const [isLoading, setLoading] = useState(true);
-  const [data, setData] = useState<Movie[]>([]);
-
-  const getMovies = async () => {
-    try {
-      const response = await fetch('https://reactnative.dev/movies.json');
-      const json = await response.json();
-      setData(json.movies);
-    } catch (error) {
-      console.error(error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    getMovies();
-  }, []);
-
-  return (
-    <View style={{flex: 1, padding: 24}}>
-      {isLoading ? (
-        <ActivityIndicator />
-      ) : (
-        <FlatList
-          data={data}
-          keyExtractor={({id}) => id}
-          renderItem={({item}) => (
-            <Text>
-              {item.title}, {item.releaseYear}
-            </Text>
-          )}
-        />
-      )}
-    </View>
-  );
-};
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-> By default, iOS 9.0 or later enforce App Transport Security (ATS). ATS requires any HTTP connection to use HTTPS. If you need to fetch from a cleartext URL (one that begins with `http`) you will first need to [add an ATS exception](integration-with-existing-apps.md#test-your-integration). If you know ahead of time what domains you will need access to, it is more secure to add exceptions only for those domains; if the domains are not known until runtime you can [disable ATS completely](publishing-to-app-store.md#1-enable-app-transport-security). Note however that from January 2017, [Apple's App Store review will require reasonable justification for disabling ATS](https://forums.developer.apple.com/thread/48979). See [Apple's documentation](https://developer.apple.com/library/ios/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html#//apple_ref/doc/uid/TP40009251-SW33) for more information.
-
-> On Android, as of API Level 28, clear text traffic is also blocked by default. This behaviour can be overridden by setting [`android:usesCleartextTraffic`](https://developer.android.com/guide/topics/manifest/application-element#usesCleartextTraffic) in the app manifest file.
-
-## Using Other Networking Libraries
-
-The [XMLHttpRequest API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) is built into React Native. This means that you can use third party libraries such as [frisbee](https://github.com/niftylettuce/frisbee) or [axios](https://github.com/axios/axios) that depend on it, or you can use the XMLHttpRequest API directly if you prefer.
-
-```ts
-const request = new XMLHttpRequest();
-request.onreadystatechange = e => {
-  if (request.readyState !== 4) {
-    return;
-  }
-
-  if (request.status === 200) {
-    console.log('success', request.responseText);
-  } else {
-    console.warn('error');
-  }
-};
-
-request.open('GET', 'https://mywebsite.com/endpoint/');
-request.send();
-```
-
-> The security model for XMLHttpRequest is different than on web as there is no concept of [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) in native apps.
-
-## WebSocket Support
-
-React Native also supports [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket), a protocol which provides full-duplex communication channels over a single TCP connection.
-
-```ts
-const ws = new WebSocket('ws://host.com/path');
-
-ws.onopen = () => {
-  // connection opened
-  ws.send('something'); // send a message
-};
-
-ws.onmessage = e => {
-  // a message was received
-  console.log(e.data);
-};
-
-ws.onerror = e => {
-  // an error occurred
-  console.log(e.message);
-};
-
-ws.onclose = e => {
-  // connection closed
-  console.log(e.code, e.reason);
-};
-```
-
-## Known Issues with `fetch` and cookie based authentication
-
-The following options are currently not working with `fetch`
-
-- `redirect:manual`
-- `credentials:omit`
-
-* Having same name headers on Android will result in only the latest one being present. A temporary solution can be found here: https://github.com/facebook/react-native/issues/18837#issuecomment-398779994.
-* Cookie based authentication is currently unstable. You can view some of the issues raised here: https://github.com/facebook/react-native/issues/23185
-* As a minimum on iOS, when redirected through a `302`, if a `Set-Cookie` header is present, the cookie is not set properly. Since the redirect cannot be handled manually this might cause a scenario where infinite requests occur if the redirect is the result of an expired session.
-
-## Configuring NSURLSession on iOS
-
-For some applications it may be appropriate to provide a custom `NSURLSessionConfiguration` for the underlying `NSURLSession` that is used for network requests in a React Native application running on iOS. For instance, one may need to set a custom user agent string for all network requests coming from the app or supply `NSURLSession` with an ephemeral `NSURLSessionConfiguration`. The function `RCTSetCustomNSURLSessionConfigurationProvider` allows for such customization. Remember to add the following import to the file in which `RCTSetCustomNSURLSessionConfigurationProvider` will be called:
-
-```objectivec
-#import <React/RCTHTTPRequestHandler.h>
-```
-
-`RCTSetCustomNSURLSessionConfigurationProvider` should be called early in the application life cycle such that it is readily available when needed by React, for instance:
-
-```objectivec
--(void)application:(__unused UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
-
-  // set RCTSetCustomNSURLSessionConfigurationProvider
-  RCTSetCustomNSURLSessionConfigurationProvider(^NSURLSessionConfiguration *{
-     NSURLSessionConfiguration *configuration = [NSURLSessionConfiguration defaultSessionConfiguration];
-     // configure the session
-     return configuration;
-  });
-
-  // set up React
-  _bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
-}
-```
+---
+id: network
+title: Networking
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may need to fetch a chunk of static content from another server.
+
+## Using Fetch
+
+React Native provides the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) for your networking needs. Fetch will seem familiar if you have used `XMLHttpRequest` or other networking APIs before. You may refer to MDN's guide on [Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) for additional information.
+
+### Making requests
+
+In order to fetch content from an arbitrary URL, you can pass the URL to fetch:
+
+```ts
+fetch('https://mywebsite.com/mydata.json');
+```
+
+Fetch also takes an optional second argument that allows you to customize the HTTP request. You may want to specify additional headers, or make a POST request:
+
+```ts
+fetch('https://mywebsite.com/endpoint/', {
+  method: 'POST',
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json',
+  },
+  body: JSON.stringify({
+    firstParam: 'yourValue',
+    secondParam: 'yourOtherValue',
+  }),
+});
+```
+
+Take a look at the [Fetch Request docs](https://developer.mozilla.org/en-US/docs/Web/API/Request) for a full list of properties.
+
+### Handling the response
+
+The above examples show how you can make a request. In many cases, you will want to do something with the response.
+
+Networking is an inherently asynchronous operation. Fetch method will return a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that makes it straightforward to write code that works in an asynchronous manner:
+
+```ts
+const getMoviesFromApi = () => {
+  return fetch('https://reactnative.dev/movies.json')
+    .then(response => response.json())
+    .then(json => {
+      return json.movies;
+    })
+    .catch(error => {
+      console.error(error);
+    });
+};
+```
+
+You can also use the `async` / `await` syntax in a React Native app:
+
+```ts
+const getMoviesFromApiAsync = async () => {
+  try {
+    const response = await fetch(
+      'https://reactnative.dev/movies.json',
+    );
+    const json = await response.json();
+    return json.movies;
+  } catch (error) {
+    console.error(error);
+  }
+};
+```
+
+Don't forget to catch any errors that may be thrown by `fetch`, otherwise they will be dropped silently.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Fetch%20Example&ext=js
+import {useEffect, useState} from 'react';
+import {ActivityIndicator, FlatList, Text, View} from 'react-native';
+
+const App = () => {
+  const [isLoading, setLoading] = useState(true);
+  const [data, setData] = useState([]);
+
+  const getMovies = async () => {
+    try {
+      const response = await fetch('https://reactnative.dev/movies.json');
+      const json = await response.json();
+      setData(json.movies);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    getMovies();
+  }, []);
+
+  return (
+    <View style={{flex: 1, padding: 24}}>
+      {isLoading ? (
+        <ActivityIndicator />
+      ) : (
+        <FlatList
+          data={data}
+          keyExtractor={({id}) => id}
+          renderItem={({item}) => (
+            <Text>
+              {item.title}, {item.releaseYear}
+            </Text>
+          )}
+        />
+      )}
+    </View>
+  );
+};
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Fetch%20Example&ext=tsx
+import {useEffect, useState} from 'react';
+import {ActivityIndicator, FlatList, Text, View} from 'react-native';
+
+type Movie = {
+  id: string;
+  title: string;
+  releaseYear: string;
+};
+
+const App = () => {
+  const [isLoading, setLoading] = useState(true);
+  const [data, setData] = useState<Movie[]>([]);
+
+  const getMovies = async () => {
+    try {
+      const response = await fetch('https://reactnative.dev/movies.json');
+      const json = await response.json();
+      setData(json.movies);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    getMovies();
+  }, []);
+
+  return (
+    <View style={{flex: 1, padding: 24}}>
+      {isLoading ? (
+        <ActivityIndicator />
+      ) : (
+        <FlatList
+          data={data}
+          keyExtractor={({id}) => id}
+          renderItem={({item}) => (
+            <Text>
+              {item.title}, {item.releaseYear}
+            </Text>
+          )}
+        />
+      )}
+    </View>
+  );
+};
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+> By default, iOS 9.0 or later enforce App Transport Security (ATS). ATS requires any HTTP connection to use HTTPS. If you need to fetch from a cleartext URL (one that begins with `http`) you will first need to [add an ATS exception](integration-with-existing-apps.md#test-your-integration). If you know ahead of time what domains you will need access to, it is more secure to add exceptions only for those domains; if the domains are not known until runtime you can [disable ATS completely](publishing-to-app-store.md#1-enable-app-transport-security). Note however that from January 2017, [Apple's App Store review will require reasonable justification for disabling ATS](https://forums.developer.apple.com/thread/48979). See [Apple's documentation](https://developer.apple.com/library/ios/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html#//apple_ref/doc/uid/TP40009251-SW33) for more information.
+
+> On Android, as of API Level 28, clear text traffic is also blocked by default. This behaviour can be overridden by setting [`android:usesCleartextTraffic`](https://developer.android.com/guide/topics/manifest/application-element#usesCleartextTraffic) in the app manifest file.
+
+## Using Other Networking Libraries
+
+The [XMLHttpRequest API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) is built into React Native. This means that you can use third party libraries such as [frisbee](https://github.com/niftylettuce/frisbee) or [axios](https://github.com/axios/axios) that depend on it, or you can use the XMLHttpRequest API directly if you prefer.
+
+```ts
+const request = new XMLHttpRequest();
+request.onreadystatechange = e => {
+  if (request.readyState !== 4) {
+    return;
+  }
+
+  if (request.status === 200) {
+    console.log('success', request.responseText);
+  } else {
+    console.warn('error');
+  }
+};
+
+request.open('GET', 'https://mywebsite.com/endpoint/');
+request.send();
+```
+
+> The security model for XMLHttpRequest is different than on web as there is no concept of [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) in native apps.
+
+## WebSocket Support
+
+React Native also supports [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket), a protocol which provides full-duplex communication channels over a single TCP connection.
+
+```ts
+const ws = new WebSocket('ws://host.com/path');
+
+ws.onopen = () => {
+  // connection opened
+  ws.send('something'); // send a message
+};
+
+ws.onmessage = e => {
+  // a message was received
+  console.log(e.data);
+};
+
+ws.onerror = e => {
+  // an error occurred
+  console.log(e.message);
+};
+
+ws.onclose = e => {
+  // connection closed
+  console.log(e.code, e.reason);
+};
+```
+
+## Known Issues with `fetch` and cookie based authentication
+
+The following options are currently not working with `fetch`
+
+- `redirect:manual`
+- `credentials:omit`
+
+* Having same name headers on Android will result in only the latest one being present. A temporary solution can be found here: https://github.com/facebook/react-native/issues/18837#issuecomment-398779994.
+* Cookie based authentication is currently unstable. You can view some of the issues raised here: https://github.com/facebook/react-native/issues/23185
+* As a minimum on iOS, when redirected through a `302`, if a `Set-Cookie` header is present, the cookie is not set properly. Since the redirect cannot be handled manually this might cause a scenario where infinite requests occur if the redirect is the result of an expired session.
+
+## Configuring NSURLSession on iOS
+
+For some applications it may be appropriate to provide a custom `NSURLSessionConfiguration` for the underlying `NSURLSession` that is used for network requests in a React Native application running on iOS. For instance, one may need to set a custom user agent string for all network requests coming from the app or supply `NSURLSession` with an ephemeral `NSURLSessionConfiguration`. The function `RCTSetCustomNSURLSessionConfigurationProvider` allows for such customization. Remember to add the following import to the file in which `RCTSetCustomNSURLSessionConfigurationProvider` will be called:
+
+```objectivec
+#import <React/RCTHTTPRequestHandler.h>
+```
+
+`RCTSetCustomNSURLSessionConfigurationProvider` should be called early in the application life cycle such that it is readily available when needed by React, for instance:
+
+```objectivec
+-(void)application:(__unused UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
+
+  // set RCTSetCustomNSURLSessionConfigurationProvider
+  RCTSetCustomNSURLSessionConfigurationProvider(^NSURLSessionConfiguration *{
+     NSURLSessionConfiguration *configuration = [NSURLSessionConfiguration defaultSessionConfiguration];
+     // configure the session
+     return configuration;
+  });
+
+  // set up React
+  _bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
+}
+```
diff --git a/website/versioned_docs/version-0.80/optimizing-flatlist-configuration.md b/website/versioned_docs/version-0.80/optimizing-flatlist-configuration.md
index d51f1ab9bc4..3c04bd07e77 100644
--- a/website/versioned_docs/version-0.80/optimizing-flatlist-configuration.md
+++ b/website/versioned_docs/version-0.80/optimizing-flatlist-configuration.md
@@ -1,155 +1,155 @@
----
-id: optimizing-flatlist-configuration
-title: Optimizing Flatlist Configuration
----
-
-## Terms
-
-- **VirtualizedList:** The component behind `FlatList` (React Native's implementation of the [`Virtual List`](https://bvaughn.github.io/react-virtualized/#/components/List) concept.)
-
-- **Memory consumption:** How much information about your list is being stored in memory, which could lead to an app crash.
-
-- **Responsiveness:** Application ability to respond to interactions. Low responsiveness, for instance, is when you touch on a component and it waits a bit to respond, instead of responding immediately as expected.
-
-- **Blank areas:** When `VirtualizedList` can't render your items fast enough, you may enter a part of your list with non-rendered components that appear as blank space.
-
-- **Viewport:** The visible area of content that is rendered to pixels.
-
-- **Window:** The area in which items should be mounted, which is generally much larger than the viewport.
-
-## Props
-
-Here are a list of props that can help to improve `FlatList` performance:
-
-### removeClippedSubviews
-
-| Type    | Default                              |
-| ------- | ------------------------------------ |
-| Boolean | `true` on Android, otherwise `false` |
-
-If `true`, views that are outside of the viewport are automatically detached from the native view hierarchy.
-
-**Pros:** This reduces time spent on the main thread, and thus reduces the risk of dropped frames, by excluding views outside of the viewport from the native rendering and drawing traversals.
-
-**Cons:** Be aware that this implementation can have bugs, such as missing content (mainly observed on iOS), especially if you are doing complex things with transforms and/or absolute positioning. Also note this does not save significant memory because the views are not deallocated, only detached.
-
-### maxToRenderPerBatch
-
-| Type   | Default |
-| ------ | ------- |
-| Number | 10      |
-
-It is a `VirtualizedList` prop that can be passed through `FlatList`. This controls the amount of items rendered per batch, which is the next chunk of items rendered on every scroll.
-
-**Pros:** Setting a bigger number means less visual blank areas when scrolling (increases the fill rate).
-
-**Cons:** More items per batch means longer periods of JavaScript execution potentially blocking other event processing, like presses, hurting responsiveness.
-
-### updateCellsBatchingPeriod
-
-| Type   | Default |
-| ------ | ------- |
-| Number | 50      |
-
-While `maxToRenderPerBatch` tells the amount of items rendered per batch, setting `updateCellsBatchingPeriod` tells your `VirtualizedList` the delay in milliseconds between batch renders (how frequently your component will be rendering the windowed items).
-
-**Pros:** Combining this prop with `maxToRenderPerBatch` gives you the power to, for example, render more items in a less frequent batch, or less items in a more frequent batch.
-
-**Cons:** Less frequent batches may cause blank areas, More frequent batches may cause responsiveness issues.
-
-### initialNumToRender
-
-| Type   | Default |
-| ------ | ------- |
-| Number | 10      |
-
-The initial amount of items to render.
-
-**Pros:** Define precise number of items that would cover the screen for every device. This can be a big performance boost for the initial render.
-
-**Cons:** Setting a low `initialNumToRender` may cause blank areas, especially if it's too small to cover the viewport on initial render.
-
-### windowSize
-
-| Type   | Default |
-| ------ | ------- |
-| Number | 21      |
-
-The number passed here is a measurement unit where 1 is equivalent to your viewport height. The default value is 21 (10 viewports above, 10 below, and one in between).
-
-**Pros:** Bigger `windowSize` will result in less chance of seeing blank space while scrolling. On the other hand, smaller `windowSize` will result in fewer items mounted simultaneously, saving memory.
-
-**Cons:** For a bigger `windowSize`, you will have more memory consumption. For a lower `windowSize`, you will have a bigger chance of seeing blank areas.
-
-## List items
-
-Below are some tips about list item components. They are the core of your list, so they need to be fast.
-
-### Use basic components
-
-The more complex your components are, the slower they will render. Try to avoid a lot of logic and nesting in your list items. If you are reusing this list item component a lot in your app, create a component only for your big lists and make them with as little logic and nesting as possible.
-
-### Use light components
-
-The heavier your components are, the slower they render. Avoid heavy images (use a cropped version or thumbnail for list items, as small as possible). Talk to your design team, use as little effects and interactions and information as possible in your list. Show them in your item's detail.
-
-### Use `memo()`
-
-`React.memo()` creates a memoized component that will be re-rendered only when the props passed to the component change. We can use this function to optimize the components in the FlatList.
-
-```tsx
-import React, {memo} from 'react';
-import {View, Text} from 'react-native';
-
-const MyListItem = memo(
-  ({title}: {title: string}) => (
-    <View>
-      <Text>{title}</Text>
-    </View>
-  ),
-  (prevProps, nextProps) => {
-    return prevProps.title === nextProps.title;
-  },
-);
-
-export default MyListItem;
-```
-
-In this example, we have determined that MyListItem should be re-rendered only when the title changes. We passed the comparison function as the second argument to React.memo() so that the component is re-rendered only when the specified prop is changed. If the comparison function returns true, the component will not be re-rendered.
-
-### Use cached optimized images
-
-You can use the community packages (such as [@d11/react-native-fast-image](https://github.com/ds-horizon/react-native-fast-image) from [Dream11](https://github.com/ds-horizon)) for more performant images. Every image in your list is a `new Image()` instance. The faster it reaches the `loaded` hook, the faster your JavaScript thread will be free again.
-
-### Use getItemLayout
-
-If all your list item components have the same height (or width, for a horizontal list), providing the [getItemLayout](flatlist#getitemlayout) prop removes the need for your `FlatList` to manage async layout calculations. This is a very desirable optimization technique.
-
-If your components have dynamic size and you really need performance, consider asking your design team if they may think of a redesign in order to perform better.
-
-### Use keyExtractor or key
-
-You can set the [`keyExtractor`](flatlist#keyextractor) to your `FlatList` component. This prop is used for caching and as the React `key` to track item re-ordering.
-
-You can also use a `key` prop in your item component.
-
-### Avoid anonymous function on renderItem
-
-For functional components, move the `renderItem` function outside of the returned JSX. Also, ensure that it is wrapped in a `useCallback` hook to prevent it from being recreated each render.
-
-For class components, move the `renderItem` function outside of the render function, so it won't recreate itself each time the render function is called.
-
-```tsx
-const renderItem = useCallback(({item}) => (
-   <View key={item.key}>
-      <Text>{item.title}</Text>
-   </View>
- ), []);
-
-return (
-  // ...
-
-  <FlatList data={items} renderItem={renderItem} />;
-  // ...
-);
-```
+---
+id: optimizing-flatlist-configuration
+title: Optimizing Flatlist Configuration
+---
+
+## Terms
+
+- **VirtualizedList:** The component behind `FlatList` (React Native's implementation of the [`Virtual List`](https://bvaughn.github.io/react-virtualized/#/components/List) concept.)
+
+- **Memory consumption:** How much information about your list is being stored in memory, which could lead to an app crash.
+
+- **Responsiveness:** Application ability to respond to interactions. Low responsiveness, for instance, is when you touch on a component and it waits a bit to respond, instead of responding immediately as expected.
+
+- **Blank areas:** When `VirtualizedList` can't render your items fast enough, you may enter a part of your list with non-rendered components that appear as blank space.
+
+- **Viewport:** The visible area of content that is rendered to pixels.
+
+- **Window:** The area in which items should be mounted, which is generally much larger than the viewport.
+
+## Props
+
+Here are a list of props that can help to improve `FlatList` performance:
+
+### removeClippedSubviews
+
+| Type    | Default                              |
+| ------- | ------------------------------------ |
+| Boolean | `true` on Android, otherwise `false` |
+
+If `true`, views that are outside of the viewport are automatically detached from the native view hierarchy.
+
+**Pros:** This reduces time spent on the main thread, and thus reduces the risk of dropped frames, by excluding views outside of the viewport from the native rendering and drawing traversals.
+
+**Cons:** Be aware that this implementation can have bugs, such as missing content (mainly observed on iOS), especially if you are doing complex things with transforms and/or absolute positioning. Also note this does not save significant memory because the views are not deallocated, only detached.
+
+### maxToRenderPerBatch
+
+| Type   | Default |
+| ------ | ------- |
+| Number | 10      |
+
+It is a `VirtualizedList` prop that can be passed through `FlatList`. This controls the amount of items rendered per batch, which is the next chunk of items rendered on every scroll.
+
+**Pros:** Setting a bigger number means less visual blank areas when scrolling (increases the fill rate).
+
+**Cons:** More items per batch means longer periods of JavaScript execution potentially blocking other event processing, like presses, hurting responsiveness.
+
+### updateCellsBatchingPeriod
+
+| Type   | Default |
+| ------ | ------- |
+| Number | 50      |
+
+While `maxToRenderPerBatch` tells the amount of items rendered per batch, setting `updateCellsBatchingPeriod` tells your `VirtualizedList` the delay in milliseconds between batch renders (how frequently your component will be rendering the windowed items).
+
+**Pros:** Combining this prop with `maxToRenderPerBatch` gives you the power to, for example, render more items in a less frequent batch, or less items in a more frequent batch.
+
+**Cons:** Less frequent batches may cause blank areas, More frequent batches may cause responsiveness issues.
+
+### initialNumToRender
+
+| Type   | Default |
+| ------ | ------- |
+| Number | 10      |
+
+The initial amount of items to render.
+
+**Pros:** Define precise number of items that would cover the screen for every device. This can be a big performance boost for the initial render.
+
+**Cons:** Setting a low `initialNumToRender` may cause blank areas, especially if it's too small to cover the viewport on initial render.
+
+### windowSize
+
+| Type   | Default |
+| ------ | ------- |
+| Number | 21      |
+
+The number passed here is a measurement unit where 1 is equivalent to your viewport height. The default value is 21 (10 viewports above, 10 below, and one in between).
+
+**Pros:** Bigger `windowSize` will result in less chance of seeing blank space while scrolling. On the other hand, smaller `windowSize` will result in fewer items mounted simultaneously, saving memory.
+
+**Cons:** For a bigger `windowSize`, you will have more memory consumption. For a lower `windowSize`, you will have a bigger chance of seeing blank areas.
+
+## List items
+
+Below are some tips about list item components. They are the core of your list, so they need to be fast.
+
+### Use basic components
+
+The more complex your components are, the slower they will render. Try to avoid a lot of logic and nesting in your list items. If you are reusing this list item component a lot in your app, create a component only for your big lists and make them with as little logic and nesting as possible.
+
+### Use light components
+
+The heavier your components are, the slower they render. Avoid heavy images (use a cropped version or thumbnail for list items, as small as possible). Talk to your design team, use as little effects and interactions and information as possible in your list. Show them in your item's detail.
+
+### Use `memo()`
+
+`React.memo()` creates a memoized component that will be re-rendered only when the props passed to the component change. We can use this function to optimize the components in the FlatList.
+
+```tsx
+import {memo} from 'react';
+import {View, Text} from 'react-native';
+
+const MyListItem = memo(
+  ({title}: {title: string}) => (
+    <View>
+      <Text>{title}</Text>
+    </View>
+  ),
+  (prevProps, nextProps) => {
+    return prevProps.title === nextProps.title;
+  },
+);
+
+export default MyListItem;
+```
+
+In this example, we have determined that MyListItem should be re-rendered only when the title changes. We passed the comparison function as the second argument to React.memo() so that the component is re-rendered only when the specified prop is changed. If the comparison function returns true, the component will not be re-rendered.
+
+### Use cached optimized images
+
+You can use the community packages (such as [@d11/react-native-fast-image](https://github.com/ds-horizon/react-native-fast-image) from [Dream11](https://github.com/ds-horizon)) for more performant images. Every image in your list is a `new Image()` instance. The faster it reaches the `loaded` hook, the faster your JavaScript thread will be free again.
+
+### Use getItemLayout
+
+If all your list item components have the same height (or width, for a horizontal list), providing the [getItemLayout](flatlist#getitemlayout) prop removes the need for your `FlatList` to manage async layout calculations. This is a very desirable optimization technique.
+
+If your components have dynamic size and you really need performance, consider asking your design team if they may think of a redesign in order to perform better.
+
+### Use keyExtractor or key
+
+You can set the [`keyExtractor`](flatlist#keyextractor) to your `FlatList` component. This prop is used for caching and as the React `key` to track item re-ordering.
+
+You can also use a `key` prop in your item component.
+
+### Avoid anonymous function on renderItem
+
+For functional components, move the `renderItem` function outside of the returned JSX. Also, ensure that it is wrapped in a `useCallback` hook to prevent it from being recreated each render.
+
+For class components, move the `renderItem` function outside of the render function, so it won't recreate itself each time the render function is called.
+
+```tsx
+const renderItem = useCallback(({item}) => (
+   <View key={item.key}>
+      <Text>{item.title}</Text>
+   </View>
+ ), []);
+
+return (
+  // ...
+
+  <FlatList data={items} renderItem={renderItem} />;
+  // ...
+);
+```
diff --git a/website/versioned_docs/version-0.80/panresponder.md b/website/versioned_docs/version-0.80/panresponder.md
index fa6d8b8ee4e..eabd919aa1e 100644
--- a/website/versioned_docs/version-0.80/panresponder.md
+++ b/website/versioned_docs/version-0.80/panresponder.md
@@ -1,177 +1,177 @@
----
-id: panresponder
-title: PanResponder
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-`PanResponder` reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize basic multi-touch gestures.
-
-By default, `PanResponder` holds an `InteractionManager` handle to block long-running JS events from interrupting active gestures.
-
-It provides a predictable wrapper of the responder handlers provided by the [gesture responder system](gesture-responder-system.md). For each handler, it provides a new `gestureState` object alongside the native event object:
-
-```
-onPanResponderMove: (event, gestureState) => {}
-```
-
-A native event is a synthetic touch event with form of [PressEvent](pressevent).
-
-A `gestureState` object has the following:
-
-- `stateID` - ID of the gestureState- persisted as long as there's at least one touch on screen
-- `moveX` - the latest screen coordinates of the recently-moved touch
-- `moveY` - the latest screen coordinates of the recently-moved touch
-- `x0` - the screen coordinates of the responder grant
-- `y0` - the screen coordinates of the responder grant
-- `dx` - accumulated distance of the gesture since the touch started
-- `dy` - accumulated distance of the gesture since the touch started
-- `vx` - current velocity of the gesture
-- `vy` - current velocity of the gesture
-- `numberActiveTouches` - Number of touches currently on screen
-
-## Usage Pattern
-
-```tsx
-const ExampleComponent = () => {
-  const panResponder = React.useRef(
-    PanResponder.create({
-      // Ask to be the responder:
-      onStartShouldSetPanResponder: (evt, gestureState) => true,
-      onStartShouldSetPanResponderCapture: (evt, gestureState) =>
-        true,
-      onMoveShouldSetPanResponder: (evt, gestureState) => true,
-      onMoveShouldSetPanResponderCapture: (evt, gestureState) =>
-        true,
-
-      onPanResponderGrant: (evt, gestureState) => {
-        // The gesture has started. Show visual feedback so the user knows
-        // what is happening!
-        // gestureState.d{x,y} will be set to zero now
-      },
-      onPanResponderMove: (evt, gestureState) => {
-        // The most recent move distance is gestureState.move{X,Y}
-        // The accumulated gesture distance since becoming responder is
-        // gestureState.d{x,y}
-      },
-      onPanResponderTerminationRequest: (evt, gestureState) =>
-        true,
-      onPanResponderRelease: (evt, gestureState) => {
-        // The user has released all touches while this view is the
-        // responder. This typically means a gesture has succeeded
-      },
-      onPanResponderTerminate: (evt, gestureState) => {
-        // Another component has become the responder, so this gesture
-        // should be cancelled
-      },
-      onShouldBlockNativeResponder: (evt, gestureState) => {
-        // Returns whether this component should block native components from becoming the JS
-        // responder. Returns true by default. Is currently only supported on android.
-        return true;
-      },
-    }),
-  ).current;
-
-  return <View {...panResponder.panHandlers} />;
-};
-```
-
-## Example
-
-`PanResponder` works with `Animated` API to help build complex gestures in the UI. The following example contains an animated `View` component which can be dragged freely across the screen
-
-```SnackPlayer name=PanResponder
-import React, {useRef} from 'react';
-import {Animated, View, StyleSheet, PanResponder, Text} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const pan = useRef(new Animated.ValueXY()).current;
-
-  const panResponder = useRef(
-    PanResponder.create({
-      onMoveShouldSetPanResponder: () => true,
-      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
-      onPanResponderRelease: () => {
-        pan.extractOffset();
-      },
-    }),
-  ).current;
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.titleText}>Drag this box!</Text>
-        <Animated.View
-          style={{
-            transform: [{translateX: pan.x}, {translateY: pan.y}],
-          }}
-          {...panResponder.panHandlers}>
-          <View style={styles.box} />
-        </Animated.View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  titleText: {
-    fontSize: 14,
-    lineHeight: 24,
-    fontWeight: 'bold',
-  },
-  box: {
-    height: 150,
-    width: 150,
-    backgroundColor: 'blue',
-    borderRadius: 5,
-  },
-});
-
-export default App;
-```
-
-Try the [PanResponder example in RNTester](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js).
-
----
-
-# Reference
-
-## Methods
-
-### `create()`
-
-```tsx
-static create(config: PanResponderCallbacks): PanResponderInstance;
-```
-
-**Parameters:**
-
-| Name                                                        | Type   | Description |
-| ----------------------------------------------------------- | ------ | ----------- |
-| config <div className="label basic required">Required</div> | object | Refer below |
-
-The `config` object provides enhanced versions of all of the responder callbacks that provide not only the [`PressEvent`](pressevent), but also the `PanResponder` gesture state, by replacing the word `Responder` with `PanResponder` in each of the typical `onResponder*` callbacks. For example, the `config` object would look like:
-
-- `onMoveShouldSetPanResponder: (e, gestureState) => {...}`
-- `onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}`
-- `onStartShouldSetPanResponder: (e, gestureState) => {...}`
-- `onStartShouldSetPanResponderCapture: (e, gestureState) => {...}`
-- `onPanResponderReject: (e, gestureState) => {...}`
-- `onPanResponderGrant: (e, gestureState) => {...}`
-- `onPanResponderStart: (e, gestureState) => {...}`
-- `onPanResponderEnd: (e, gestureState) => {...}`
-- `onPanResponderRelease: (e, gestureState) => {...}`
-- `onPanResponderMove: (e, gestureState) => {...}`
-- `onPanResponderTerminate: (e, gestureState) => {...}`
-- `onPanResponderTerminationRequest: (e, gestureState) => {...}`
-- `onShouldBlockNativeResponder: (e, gestureState) => {...}`
-
-In general, for events that have capture equivalents, we update the gestureState once in the capture phase and can use it in the bubble phase as well.
-
-Be careful with `onStartShould*` callbacks. They only reflect updated `gestureState` for start/end events that bubble/capture to the Node. Once the node is the responder, you can rely on every start/end event being processed by the gesture and `gestureState` being updated accordingly. (numberActiveTouches) may not be totally accurate unless you are the responder.
+---
+id: panresponder
+title: PanResponder
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+`PanResponder` reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize basic multi-touch gestures.
+
+By default, `PanResponder` holds an `InteractionManager` handle to block long-running JS events from interrupting active gestures.
+
+It provides a predictable wrapper of the responder handlers provided by the [gesture responder system](gesture-responder-system.md). For each handler, it provides a new `gestureState` object alongside the native event object:
+
+```
+onPanResponderMove: (event, gestureState) => {}
+```
+
+A native event is a synthetic touch event with form of [PressEvent](pressevent).
+
+A `gestureState` object has the following:
+
+- `stateID` - ID of the gestureState- persisted as long as there's at least one touch on screen
+- `moveX` - the latest screen coordinates of the recently-moved touch
+- `moveY` - the latest screen coordinates of the recently-moved touch
+- `x0` - the screen coordinates of the responder grant
+- `y0` - the screen coordinates of the responder grant
+- `dx` - accumulated distance of the gesture since the touch started
+- `dy` - accumulated distance of the gesture since the touch started
+- `vx` - current velocity of the gesture
+- `vy` - current velocity of the gesture
+- `numberActiveTouches` - Number of touches currently on screen
+
+## Usage Pattern
+
+```tsx
+const ExampleComponent = () => {
+  const panResponder = useRef(
+    PanResponder.create({
+      // Ask to be the responder:
+      onStartShouldSetPanResponder: (evt, gestureState) => true,
+      onStartShouldSetPanResponderCapture: (evt, gestureState) =>
+        true,
+      onMoveShouldSetPanResponder: (evt, gestureState) => true,
+      onMoveShouldSetPanResponderCapture: (evt, gestureState) =>
+        true,
+
+      onPanResponderGrant: (evt, gestureState) => {
+        // The gesture has started. Show visual feedback so the user knows
+        // what is happening!
+        // gestureState.d{x,y} will be set to zero now
+      },
+      onPanResponderMove: (evt, gestureState) => {
+        // The most recent move distance is gestureState.move{X,Y}
+        // The accumulated gesture distance since becoming responder is
+        // gestureState.d{x,y}
+      },
+      onPanResponderTerminationRequest: (evt, gestureState) =>
+        true,
+      onPanResponderRelease: (evt, gestureState) => {
+        // The user has released all touches while this view is the
+        // responder. This typically means a gesture has succeeded
+      },
+      onPanResponderTerminate: (evt, gestureState) => {
+        // Another component has become the responder, so this gesture
+        // should be cancelled
+      },
+      onShouldBlockNativeResponder: (evt, gestureState) => {
+        // Returns whether this component should block native components from becoming the JS
+        // responder. Returns true by default. Is currently only supported on android.
+        return true;
+      },
+    }),
+  ).current;
+
+  return <View {...panResponder.panHandlers} />;
+};
+```
+
+## Example
+
+`PanResponder` works with `Animated` API to help build complex gestures in the UI. The following example contains an animated `View` component which can be dragged freely across the screen
+
+```SnackPlayer name=PanResponder
+import {useRef} from 'react';
+import {Animated, View, StyleSheet, PanResponder, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const pan = useRef(new Animated.ValueXY()).current;
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
+      onPanResponderRelease: () => {
+        pan.extractOffset();
+      },
+    }),
+  ).current;
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.titleText}>Drag this box!</Text>
+        <Animated.View
+          style={{
+            transform: [{translateX: pan.x}, {translateY: pan.y}],
+          }}
+          {...panResponder.panHandlers}>
+          <View style={styles.box} />
+        </Animated.View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  titleText: {
+    fontSize: 14,
+    lineHeight: 24,
+    fontWeight: 'bold',
+  },
+  box: {
+    height: 150,
+    width: 150,
+    backgroundColor: 'blue',
+    borderRadius: 5,
+  },
+});
+
+export default App;
+```
+
+Try the [PanResponder example in RNTester](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js).
+
+---
+
+# Reference
+
+## Methods
+
+### `create()`
+
+```tsx
+static create(config: PanResponderCallbacks): PanResponderInstance;
+```
+
+**Parameters:**
+
+| Name                                                        | Type   | Description |
+| ----------------------------------------------------------- | ------ | ----------- |
+| config <div className="label basic required">Required</div> | object | Refer below |
+
+The `config` object provides enhanced versions of all of the responder callbacks that provide not only the [`PressEvent`](pressevent), but also the `PanResponder` gesture state, by replacing the word `Responder` with `PanResponder` in each of the typical `onResponder*` callbacks. For example, the `config` object would look like:
+
+- `onMoveShouldSetPanResponder: (e, gestureState) => {...}`
+- `onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}`
+- `onStartShouldSetPanResponder: (e, gestureState) => {...}`
+- `onStartShouldSetPanResponderCapture: (e, gestureState) => {...}`
+- `onPanResponderReject: (e, gestureState) => {...}`
+- `onPanResponderGrant: (e, gestureState) => {...}`
+- `onPanResponderStart: (e, gestureState) => {...}`
+- `onPanResponderEnd: (e, gestureState) => {...}`
+- `onPanResponderRelease: (e, gestureState) => {...}`
+- `onPanResponderMove: (e, gestureState) => {...}`
+- `onPanResponderTerminate: (e, gestureState) => {...}`
+- `onPanResponderTerminationRequest: (e, gestureState) => {...}`
+- `onShouldBlockNativeResponder: (e, gestureState) => {...}`
+
+In general, for events that have capture equivalents, we update the gestureState once in the capture phase and can use it in the bubble phase as well.
+
+Be careful with `onStartShould*` callbacks. They only reflect updated `gestureState` for start/end events that bubble/capture to the Node. Once the node is the responder, you can rely on every start/end event being processed by the gesture and `gestureState` being updated accordingly. (numberActiveTouches) may not be totally accurate unless you are the responder.
diff --git a/website/versioned_docs/version-0.80/permissionsandroid.md b/website/versioned_docs/version-0.80/permissionsandroid.md
index ec1f486ba37..4e93941ad1f 100644
--- a/website/versioned_docs/version-0.80/permissionsandroid.md
+++ b/website/versioned_docs/version-0.80/permissionsandroid.md
@@ -17,7 +17,6 @@ If a user has previously turned off a permission that you prompt for, the OS wil
 ### Example
 
 ```SnackPlayer name=PermissionsAndroid%20Example&supportedPlatforms=android
-import React from 'react';
 import {
   Button,
   PermissionsAndroid,
diff --git a/website/versioned_docs/version-0.80/pixelratio.md b/website/versioned_docs/version-0.80/pixelratio.md
index 64e4eded49f..f298a8e73ab 100644
--- a/website/versioned_docs/version-0.80/pixelratio.md
+++ b/website/versioned_docs/version-0.80/pixelratio.md
@@ -30,7 +30,6 @@ In React Native, everything in JavaScript and within the layout engine works wit
 ## Example
 
 ```SnackPlayer name=PixelRatio%20Example
-import React from 'react';
 import {
   Image,
   PixelRatio,
diff --git a/website/versioned_docs/version-0.80/platform.md b/website/versioned_docs/version-0.80/platform.md
index aefb269e53a..ac521b1044b 100644
--- a/website/versioned_docs/version-0.80/platform.md
+++ b/website/versioned_docs/version-0.80/platform.md
@@ -6,7 +6,6 @@ title: Platform
 ## Example
 
 ```SnackPlayer name=Platform%20API%20Example&supportedPlatforms=ios,android
-import React from 'react';
 import {Platform, StyleSheet, Text, ScrollView} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.80/platformcolor.md b/website/versioned_docs/version-0.80/platformcolor.md
index d087f3327d8..3c7e06bb991 100644
--- a/website/versioned_docs/version-0.80/platformcolor.md
+++ b/website/versioned_docs/version-0.80/platformcolor.md
@@ -44,7 +44,6 @@ For a full list of the types of system colors supported, see:
 ## Example
 
 ```SnackPlayer name=PlatformColor%20Example&supportedPlatforms=android,ios
-import React from 'react';
 import {Platform, PlatformColor, StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.80/pressable.md b/website/versioned_docs/version-0.80/pressable.md
index 08ac6f44307..c1e16669f1c 100644
--- a/website/versioned_docs/version-0.80/pressable.md
+++ b/website/versioned_docs/version-0.80/pressable.md
@@ -1,264 +1,264 @@
----
-id: pressable
-title: Pressable
----
-
-Pressable is a Core Component wrapper that can detect various stages of press interactions on any of its defined children.
-
-```tsx
-<Pressable onPress={onPressFunction}>
-  <Text>I'm pressable!</Text>
-</Pressable>
-```
-
-## How it works
-
-On an element wrapped by `Pressable`:
-
-- [`onPressIn`](#onpressin) is called when a press is activated.
-- [`onPressOut`](#onpressout) is called when the press gesture is deactivated.
-
-After pressing [`onPressIn`](#onpressin), one of two things will happen:
-
-1. The person will remove their finger, triggering [`onPressOut`](#onpressout) followed by [`onPress`](#onpress).
-2. If the person leaves their finger longer than 500 milliseconds before removing it, [`onLongPress`](#onlongpress) is triggered. ([`onPressOut`](#onpressout) will still fire when they remove their finger.)
-
-<img src="/docs/assets/d_pressable_pressing.svg" width="1000" alt="Diagram of the onPress events in sequence." />
-
-Fingers are not the most precise instruments, and it is common for users to accidentally activate the wrong element or miss the activation area. To help, `Pressable` has an optional `HitRect` you can use to define how far a touch can register away from the wrapped element. Presses can start anywhere within a `HitRect`.
-
-`PressRect` allows presses to move beyond the element and its `HitRect` while maintaining activation and being eligible for a "press"—think of sliding your finger slowly away from a button you're pressing down on.
-
-> The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
-
-<figure>
-  <img src="/docs/assets/d_pressable_anatomy.svg" width="1000" alt="Diagram of HitRect and PressRect and how they work." />
-  <figcaption>
-    You can set <code>HitRect</code> with <code>hitSlop</code> and set <code>PressRect</code> with <code>pressRetentionOffset</code>.
-  </figcaption>
-</figure>
-
-> `Pressable` uses React Native's `Pressability` API. For more information around the state machine flow of Pressability and how it works, check out the implementation for [Pressability](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Pressability/Pressability.js#L350).
-
-## Example
-
-```SnackPlayer name=Pressable
-import React, {useState} from 'react';
-import {Pressable, StyleSheet, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [timesPressed, setTimesPressed] = useState(0);
-
-  let textLog = '';
-  if (timesPressed > 1) {
-    textLog = timesPressed + 'x onPress';
-  } else if (timesPressed > 0) {
-    textLog = 'onPress';
-  }
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Pressable
-          onPress={() => {
-            setTimesPressed(current => current + 1);
-          }}
-          style={({pressed}) => [
-            {
-              backgroundColor: pressed ? 'rgb(210, 230, 255)' : 'white',
-            },
-            styles.wrapperCustom,
-          ]}>
-          {({pressed}) => (
-            <Text style={styles.text}>{pressed ? 'Pressed!' : 'Press Me'}</Text>
-          )}
-        </Pressable>
-        <View style={styles.logBox}>
-          <Text testID="pressable_press_console">{textLog}</Text>
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  text: {
-    fontSize: 16,
-  },
-  wrapperCustom: {
-    borderRadius: 8,
-    padding: 6,
-  },
-  logBox: {
-    padding: 20,
-    margin: 10,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: '#f0f0f0',
-    backgroundColor: '#f9f9f9',
-  },
-});
-
-export default App;
-```
-
-## Props
-
-### `android_disableSound` <div className="label android">Android</div>
-
-If true, doesn't play Android system sound on press.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
-### `android_ripple` <div className="label android">Android</div>
-
-Enables the Android ripple effect and configures its properties.
-
-| Type                                   |
-| -------------------------------------- |
-| [RippleConfig](pressable#rippleconfig) |
-
-### `children`
-
-Either children or a function that receives a boolean reflecting whether the component is currently pressed.
-
-| Type                     |
-| ------------------------ |
-| [React Node](react-node) |
-
-### `unstable_pressDelay`
-
-Duration (in milliseconds) to wait after press down before calling `onPressIn`.
-
-| Type   |
-| ------ |
-| number |
-
-### `delayLongPress`
-
-Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
-
-| Type   | Default |
-| ------ | ------- |
-| number | `500`   |
-
-### `disabled`
-
-Whether the press behavior is disabled.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
-### `hitSlop`
-
-Sets additional distance outside of element in which a press can be detected.
-
-| Type                   |
-| ---------------------- |
-| [Rect](rect) or number |
-
-### `onHoverIn`
-
-Called when the hover is activated to provide visual feedback.
-
-| Type                                                                                                      |
-| --------------------------------------------------------------------------------------------------------- |
-| `md ({ nativeEvent: [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) }) => void` |
-
-### `onHoverOut`
-
-Called when the hover is deactivated to undo visual feedback.
-
-| Type                                                                                                      |
-| --------------------------------------------------------------------------------------------------------- |
-| `md ({ nativeEvent: [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) }) => void` |
-
-### `onLongPress`
-
-Called if the time after `onPressIn` lasts longer than 500 milliseconds. This time period can be customized with [`delayLongPress`](#delaylongpress).
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
-### `onPress`
-
-Called after `onPressOut`.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
-### `onPressIn`
-
-Called immediately when a touch is engaged, before `onPressOut` and `onPress`.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
-### `onPressMove`
-
-Called when the press location moves.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
-### `onPressOut`
-
-Called when a touch is released.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
-### `pressRetentionOffset`
-
-Additional distance outside of this view in which a touch is considered a press before `onPressOut` is triggered.
-
-| Type                   | Default                                      |
-| ---------------------- | -------------------------------------------- |
-| [Rect](rect) or number | `{bottom: 30, left: 20, right: 20, top: 20}` |
-
-### `style`
-
-Either view styles or a function that receives a boolean reflecting whether the component is currently pressed and returns view styles.
-
-| Type                                                                                            |
-| ----------------------------------------------------------------------------------------------- |
-| [View Style](view-style-props) or `md ({ pressed: boolean }) => [View Style](view-style-props)` |
-
-### `testOnly_pressed`
-
-Used only for documentation or testing (e.g. snapshot testing).
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
-## Type Definitions
-
-### RippleConfig
-
-Ripple effect configuration for the `android_ripple` property.
-
-| Type   |
-| ------ |
-| object |
-
-**Properties:**
-
-| Name       | Type            | Required | Description                                                                                                                                                                                                                                                  |
-| ---------- | --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| color      | [color](colors) | No       | Defines the color of the ripple effect.                                                                                                                                                                                                                      |
-| borderless | boolean         | No       | Defines if ripple effect should not include border.                                                                                                                                                                                                          |
-| radius     | number          | No       | Defines the radius of the ripple effect.                                                                                                                                                                                                                     |
-| foreground | boolean         | No       | Set to true to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them. |
+---
+id: pressable
+title: Pressable
+---
+
+Pressable is a Core Component wrapper that can detect various stages of press interactions on any of its defined children.
+
+```tsx
+<Pressable onPress={onPressFunction}>
+  <Text>I'm pressable!</Text>
+</Pressable>
+```
+
+## How it works
+
+On an element wrapped by `Pressable`:
+
+- [`onPressIn`](#onpressin) is called when a press is activated.
+- [`onPressOut`](#onpressout) is called when the press gesture is deactivated.
+
+After pressing [`onPressIn`](#onpressin), one of two things will happen:
+
+1. The person will remove their finger, triggering [`onPressOut`](#onpressout) followed by [`onPress`](#onpress).
+2. If the person leaves their finger longer than 500 milliseconds before removing it, [`onLongPress`](#onlongpress) is triggered. ([`onPressOut`](#onpressout) will still fire when they remove their finger.)
+
+<img src="/docs/assets/d_pressable_pressing.svg" width="1000" alt="Diagram of the onPress events in sequence." />
+
+Fingers are not the most precise instruments, and it is common for users to accidentally activate the wrong element or miss the activation area. To help, `Pressable` has an optional `HitRect` you can use to define how far a touch can register away from the wrapped element. Presses can start anywhere within a `HitRect`.
+
+`PressRect` allows presses to move beyond the element and its `HitRect` while maintaining activation and being eligible for a "press"—think of sliding your finger slowly away from a button you're pressing down on.
+
+> The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
+
+<figure>
+  <img src="/docs/assets/d_pressable_anatomy.svg" width="1000" alt="Diagram of HitRect and PressRect and how they work." />
+  <figcaption>
+    You can set <code>HitRect</code> with <code>hitSlop</code> and set <code>PressRect</code> with <code>pressRetentionOffset</code>.
+  </figcaption>
+</figure>
+
+> `Pressable` uses React Native's `Pressability` API. For more information around the state machine flow of Pressability and how it works, check out the implementation for [Pressability](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Pressability/Pressability.js#L350).
+
+## Example
+
+```SnackPlayer name=Pressable
+import {useState} from 'react';
+import {Pressable, StyleSheet, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [timesPressed, setTimesPressed] = useState(0);
+
+  let textLog = '';
+  if (timesPressed > 1) {
+    textLog = timesPressed + 'x onPress';
+  } else if (timesPressed > 0) {
+    textLog = 'onPress';
+  }
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Pressable
+          onPress={() => {
+            setTimesPressed(current => current + 1);
+          }}
+          style={({pressed}) => [
+            {
+              backgroundColor: pressed ? 'rgb(210, 230, 255)' : 'white',
+            },
+            styles.wrapperCustom,
+          ]}>
+          {({pressed}) => (
+            <Text style={styles.text}>{pressed ? 'Pressed!' : 'Press Me'}</Text>
+          )}
+        </Pressable>
+        <View style={styles.logBox}>
+          <Text testID="pressable_press_console">{textLog}</Text>
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 16,
+  },
+  wrapperCustom: {
+    borderRadius: 8,
+    padding: 6,
+  },
+  logBox: {
+    padding: 20,
+    margin: 10,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: '#f0f0f0',
+    backgroundColor: '#f9f9f9',
+  },
+});
+
+export default App;
+```
+
+## Props
+
+### `android_disableSound` <div className="label android">Android</div>
+
+If true, doesn't play Android system sound on press.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+### `android_ripple` <div className="label android">Android</div>
+
+Enables the Android ripple effect and configures its properties.
+
+| Type                                   |
+| -------------------------------------- |
+| [RippleConfig](pressable#rippleconfig) |
+
+### `children`
+
+Either children or a function that receives a boolean reflecting whether the component is currently pressed.
+
+| Type                     |
+| ------------------------ |
+| [React Node](react-node) |
+
+### `unstable_pressDelay`
+
+Duration (in milliseconds) to wait after press down before calling `onPressIn`.
+
+| Type   |
+| ------ |
+| number |
+
+### `delayLongPress`
+
+Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
+
+| Type   | Default |
+| ------ | ------- |
+| number | `500`   |
+
+### `disabled`
+
+Whether the press behavior is disabled.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+### `hitSlop`
+
+Sets additional distance outside of element in which a press can be detected.
+
+| Type                   |
+| ---------------------- |
+| [Rect](rect) or number |
+
+### `onHoverIn`
+
+Called when the hover is activated to provide visual feedback.
+
+| Type                                                                                                      |
+| --------------------------------------------------------------------------------------------------------- |
+| `md ({ nativeEvent: [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) }) => void` |
+
+### `onHoverOut`
+
+Called when the hover is deactivated to undo visual feedback.
+
+| Type                                                                                                      |
+| --------------------------------------------------------------------------------------------------------- |
+| `md ({ nativeEvent: [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) }) => void` |
+
+### `onLongPress`
+
+Called if the time after `onPressIn` lasts longer than 500 milliseconds. This time period can be customized with [`delayLongPress`](#delaylongpress).
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+### `onPress`
+
+Called after `onPressOut`.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+### `onPressIn`
+
+Called immediately when a touch is engaged, before `onPressOut` and `onPress`.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+### `onPressMove`
+
+Called when the press location moves.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+### `onPressOut`
+
+Called when a touch is released.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+### `pressRetentionOffset`
+
+Additional distance outside of this view in which a touch is considered a press before `onPressOut` is triggered.
+
+| Type                   | Default                                      |
+| ---------------------- | -------------------------------------------- |
+| [Rect](rect) or number | `{bottom: 30, left: 20, right: 20, top: 20}` |
+
+### `style`
+
+Either view styles or a function that receives a boolean reflecting whether the component is currently pressed and returns view styles.
+
+| Type                                                                                            |
+| ----------------------------------------------------------------------------------------------- |
+| [View Style](view-style-props) or `md ({ pressed: boolean }) => [View Style](view-style-props)` |
+
+### `testOnly_pressed`
+
+Used only for documentation or testing (e.g. snapshot testing).
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+## Type Definitions
+
+### RippleConfig
+
+Ripple effect configuration for the `android_ripple` property.
+
+| Type   |
+| ------ |
+| object |
+
+**Properties:**
+
+| Name       | Type            | Required | Description                                                                                                                                                                                                                                                  |
+| ---------- | --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| color      | [color](colors) | No       | Defines the color of the ripple effect.                                                                                                                                                                                                                      |
+| borderless | boolean         | No       | Defines if ripple effect should not include border.                                                                                                                                                                                                          |
+| radius     | number          | No       | Defines the radius of the ripple effect.                                                                                                                                                                                                                     |
+| foreground | boolean         | No       | Set to true to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them. |
diff --git a/website/versioned_docs/version-0.80/progressbarandroid.md b/website/versioned_docs/version-0.80/progressbarandroid.md
index b44a68c8101..4a7363fdff3 100644
--- a/website/versioned_docs/version-0.80/progressbarandroid.md
+++ b/website/versioned_docs/version-0.80/progressbarandroid.md
@@ -10,7 +10,6 @@ Android-only React component used to indicate that the app is loading or there i
 ### Example
 
 ```SnackPlayer name=ProgressBarAndroid&supportedPlatforms=android
-import React from 'react';
 import {View, StyleSheet, ProgressBarAndroid, Text} from 'react-native';
 
 const App = () => {
diff --git a/website/versioned_docs/version-0.80/props.md b/website/versioned_docs/version-0.80/props.md
index 490eb214632..8b24d6dd9f1 100644
--- a/website/versioned_docs/version-0.80/props.md
+++ b/website/versioned_docs/version-0.80/props.md
@@ -10,7 +10,6 @@ Most components can be customized when they are created, with different paramete
 For example, one basic React Native component is the `Image`. When you create an image, you can use a prop named `source` to control what image it shows.
 
 ```SnackPlayer name=Props
-import React from 'react';
 import {Image} from 'react-native';
 
 const Bananas = () => {
@@ -33,7 +32,6 @@ Your own components can also use `props`. This lets you make a single component
 <TabItem value="javascript">
 
 ```SnackPlayer name=Props&ext=js
-import React from 'react';
 import {Text, View} from 'react-native';
 
 const Greeting = props => {
@@ -61,7 +59,6 @@ export default LotsOfGreetings;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Props&ext=tsx
-import React from 'react';
 import {Text, View} from 'react-native';
 
 type GreetingProps = {
diff --git a/website/versioned_docs/version-0.80/refreshcontrol.md b/website/versioned_docs/version-0.80/refreshcontrol.md
index e7f8fea5e83..d09d3aad46c 100644
--- a/website/versioned_docs/version-0.80/refreshcontrol.md
+++ b/website/versioned_docs/version-0.80/refreshcontrol.md
@@ -1,165 +1,165 @@
----
-id: refreshcontrol
-title: RefreshControl
----
-
-This component is used inside a ScrollView or ListView to add pull to refresh functionality. When the ScrollView is at `scrollY: 0`, swiping down triggers an `onRefresh` event.
-
-## Example
-
-```SnackPlayer name=RefreshControl&supportedPlatforms=ios,android
-import React from 'react';
-import {RefreshControl, ScrollView, StyleSheet, Text} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [refreshing, setRefreshing] = React.useState(false);
-
-  const onRefresh = React.useCallback(() => {
-    setRefreshing(true);
-    setTimeout(() => {
-      setRefreshing(false);
-    }, 2000);
-  }, []);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <ScrollView
-          contentContainerStyle={styles.scrollView}
-          refreshControl={
-            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-          }>
-          <Text>Pull down to see RefreshControl indicator</Text>
-        </ScrollView>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  scrollView: {
-    flex: 1,
-    backgroundColor: 'pink',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-
-export default App;
-```
-
-> Note: `refreshing` is a controlled prop, this is why it needs to be set to `true` in the `onRefresh` function otherwise the refresh indicator will stop immediately.
-
----
-
-# Reference
-
-## Props
-
-### [View Props](view.md#props)
-
-Inherits [View Props](view.md#props).
-
----
-
-### <div className="label required basic">Required</div>**`refreshing`**
-
-Whether the view should be indicating an active refresh.
-
-| Type    |
-| ------- |
-| boolean |
-
----
-
-### `colors` <div className="label android">Android</div>
-
-The colors (at least one) that will be used to draw the refresh indicator.
-
-| Type                         |
-| ---------------------------- |
-| array of [colors](colors.md) |
-
----
-
-### `enabled` <div className="label android">Android</div>
-
-Whether the pull to refresh functionality is enabled.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `true`  |
-
----
-
-### `onRefresh`
-
-Called when the view starts refreshing.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `progressBackgroundColor` <div className="label android">Android</div>
-
-The background color of the refresh indicator.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `progressViewOffset`
-
-Progress view top offset.
-
-| Type   | Default |
-| ------ | ------- |
-| number | `0`     |
-
----
-
-### `size` <div className="label android">Android</div>
-
-Size of the refresh indicator.
-
-| Type                         | Default     |
-| ---------------------------- | ----------- |
-| enum(`'default'`, `'large'`) | `'default'` |
-
----
-
-### `tintColor` <div className="label ios">iOS</div>
-
-The color of the refresh indicator.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `title` <div className="label ios">iOS</div>
-
-The title displayed under the refresh indicator.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `titleColor` <div className="label ios">iOS</div>
-
-The color of the refresh indicator title.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
+---
+id: refreshcontrol
+title: RefreshControl
+---
+
+This component is used inside a ScrollView or ListView to add pull to refresh functionality. When the ScrollView is at `scrollY: 0`, swiping down triggers an `onRefresh` event.
+
+## Example
+
+```SnackPlayer name=RefreshControl&supportedPlatforms=ios,android
+import {useCallback, useState} from 'react';
+import {RefreshControl, ScrollView, StyleSheet, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [refreshing, setRefreshing] = useState(false);
+
+  const onRefresh = useCallback(() => {
+    setRefreshing(true);
+    setTimeout(() => {
+      setRefreshing(false);
+    }, 2000);
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <ScrollView
+          contentContainerStyle={styles.scrollView}
+          refreshControl={
+            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+          }>
+          <Text>Pull down to see RefreshControl indicator</Text>
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollView: {
+    flex: 1,
+    backgroundColor: 'pink',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default App;
+```
+
+> Note: `refreshing` is a controlled prop, this is why it needs to be set to `true` in the `onRefresh` function otherwise the refresh indicator will stop immediately.
+
+---
+
+# Reference
+
+## Props
+
+### [View Props](view.md#props)
+
+Inherits [View Props](view.md#props).
+
+---
+
+### <div className="label required basic">Required</div>**`refreshing`**
+
+Whether the view should be indicating an active refresh.
+
+| Type    |
+| ------- |
+| boolean |
+
+---
+
+### `colors` <div className="label android">Android</div>
+
+The colors (at least one) that will be used to draw the refresh indicator.
+
+| Type                         |
+| ---------------------------- |
+| array of [colors](colors.md) |
+
+---
+
+### `enabled` <div className="label android">Android</div>
+
+Whether the pull to refresh functionality is enabled.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `true`  |
+
+---
+
+### `onRefresh`
+
+Called when the view starts refreshing.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `progressBackgroundColor` <div className="label android">Android</div>
+
+The background color of the refresh indicator.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `progressViewOffset`
+
+Progress view top offset.
+
+| Type   | Default |
+| ------ | ------- |
+| number | `0`     |
+
+---
+
+### `size` <div className="label android">Android</div>
+
+Size of the refresh indicator.
+
+| Type                         | Default     |
+| ---------------------------- | ----------- |
+| enum(`'default'`, `'large'`) | `'default'` |
+
+---
+
+### `tintColor` <div className="label ios">iOS</div>
+
+The color of the refresh indicator.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `title` <div className="label ios">iOS</div>
+
+The title displayed under the refresh indicator.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `titleColor` <div className="label ios">iOS</div>
+
+The color of the refresh indicator title.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
diff --git a/website/versioned_docs/version-0.80/safeareaview.md b/website/versioned_docs/version-0.80/safeareaview.md
index 16c3acdd33b..49b4e76f209 100644
--- a/website/versioned_docs/version-0.80/safeareaview.md
+++ b/website/versioned_docs/version-0.80/safeareaview.md
@@ -12,7 +12,6 @@ The purpose of `SafeAreaView` is to render content within the safe area boundari
 To use, wrap your top level view with a `SafeAreaView` with a `flex: 1` style applied to it. You may also want to use a background color that matches your application's design.
 
 ```SnackPlayer name=SafeAreaView&supportedPlatforms=ios
-import React from 'react';
 import {StyleSheet, Text, SafeAreaView} from 'react-native';
 
 const App = () => {
diff --git a/website/versioned_docs/version-0.80/scrollview.md b/website/versioned_docs/version-0.80/scrollview.md
index c08c4476f3c..6e77d76fc7b 100644
--- a/website/versioned_docs/version-0.80/scrollview.md
+++ b/website/versioned_docs/version-0.80/scrollview.md
@@ -22,7 +22,6 @@ This is where `FlatList` comes into play. `FlatList` renders items lazily, when
 ## Example
 
 ```SnackPlayer name=ScrollView%20Example
-import React from 'react';
 import {StyleSheet, Text, ScrollView, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.80/sectionlist.md b/website/versioned_docs/version-0.80/sectionlist.md
index 9fe404005dd..3b2796fef80 100644
--- a/website/versioned_docs/version-0.80/sectionlist.md
+++ b/website/versioned_docs/version-0.80/sectionlist.md
@@ -21,7 +21,6 @@ If you don't need section support and want a simpler interface, use [`<FlatList>
 ## Example
 
 ```SnackPlayer name=SectionList%20Example
-import React from 'react';
 import {StyleSheet, Text, View, SectionList, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.80/segmentedcontrolios.md b/website/versioned_docs/version-0.80/segmentedcontrolios.md
index 2eb3d140912..92e3f077034 100644
--- a/website/versioned_docs/version-0.80/segmentedcontrolios.md
+++ b/website/versioned_docs/version-0.80/segmentedcontrolios.md
@@ -14,7 +14,7 @@ The selected index can be changed on the fly by assigning the selectedIndex prop
 ## Example
 
 ```SnackPlayer name=SegmentedControlIOS%20Example&supportedPlatforms=ios&ext=js
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {SegmentedControlIOS, StyleSheet, Text, View} from 'react-native';
 
 const App = () => {
diff --git a/website/versioned_docs/version-0.80/settings.md b/website/versioned_docs/version-0.80/settings.md
index 9eb5b19accd..ddeaf51c7e6 100644
--- a/website/versioned_docs/version-0.80/settings.md
+++ b/website/versioned_docs/version-0.80/settings.md
@@ -1,101 +1,101 @@
----
-id: settings
-title: Settings
----
-
-`Settings` serves as a wrapper for [`NSUserDefaults`](https://developer.apple.com/documentation/foundation/nsuserdefaults), a persistent key-value store available only on iOS.
-
-## Example
-
-```SnackPlayer name=Settings%20Example&supportedPlatforms=ios
-import React, {useState} from 'react';
-import {Button, Settings, StyleSheet, Text} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [data, setData] = useState(() => Settings.get('data'));
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>Stored value:</Text>
-        <Text style={styles.value}>{data}</Text>
-        <Button
-          onPress={() => {
-            Settings.set({data: 'React'});
-            setData(Settings.get('data'));
-          }}
-          title="Store 'React'"
-        />
-        <Button
-          onPress={() => {
-            Settings.set({data: 'Native'});
-            setData(Settings.get('data'));
-          }}
-          title="Store 'Native'"
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  value: {
-    fontSize: 24,
-    marginVertical: 12,
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Methods
-
-### `clearWatch()`
-
-```tsx
-static clearWatch(watchId: number);
-```
-
-`watchId` is the number returned by `watchKeys()` when the subscription was originally configured.
-
----
-
-### `get()`
-
-```tsx
-static get(key: string): any;
-```
-
-Get the current value for a given `key` in `NSUserDefaults`.
-
----
-
-### `set()`
-
-```tsx
-static set(settings: Record<string, any>);
-```
-
-Set one or more values in `NSUserDefaults`.
-
----
-
-### `watchKeys()`
-
-```tsx
-static watchKeys(keys: string | array<string>, callback: () => void): number;
-```
-
-Subscribe to be notified when the value for any of the keys specified by the `keys` parameter has been changed in `NSUserDefaults`. Returns a `watchId` number that may be used with `clearWatch()` to unsubscribe.
-
-> **Note:** `watchKeys()` by design ignores internal `set()` calls and fires callback only on changes preformed outside of React Native code.
+---
+id: settings
+title: Settings
+---
+
+`Settings` serves as a wrapper for [`NSUserDefaults`](https://developer.apple.com/documentation/foundation/nsuserdefaults), a persistent key-value store available only on iOS.
+
+## Example
+
+```SnackPlayer name=Settings%20Example&supportedPlatforms=ios
+import {useState} from 'react';
+import {Button, Settings, StyleSheet, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [data, setData] = useState(() => Settings.get('data'));
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>Stored value:</Text>
+        <Text style={styles.value}>{data}</Text>
+        <Button
+          onPress={() => {
+            Settings.set({data: 'React'});
+            setData(Settings.get('data'));
+          }}
+          title="Store 'React'"
+        />
+        <Button
+          onPress={() => {
+            Settings.set({data: 'Native'});
+            setData(Settings.get('data'));
+          }}
+          title="Store 'Native'"
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  value: {
+    fontSize: 24,
+    marginVertical: 12,
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `clearWatch()`
+
+```tsx
+static clearWatch(watchId: number);
+```
+
+`watchId` is the number returned by `watchKeys()` when the subscription was originally configured.
+
+---
+
+### `get()`
+
+```tsx
+static get(key: string): any;
+```
+
+Get the current value for a given `key` in `NSUserDefaults`.
+
+---
+
+### `set()`
+
+```tsx
+static set(settings: Record<string, any>);
+```
+
+Set one or more values in `NSUserDefaults`.
+
+---
+
+### `watchKeys()`
+
+```tsx
+static watchKeys(keys: string | array<string>, callback: () => void): number;
+```
+
+Subscribe to be notified when the value for any of the keys specified by the `keys` parameter has been changed in `NSUserDefaults`. Returns a `watchId` number that may be used with `clearWatch()` to unsubscribe.
+
+> **Note:** `watchKeys()` by design ignores internal `set()` calls and fires callback only on changes preformed outside of React Native code.
diff --git a/website/versioned_docs/version-0.80/shadow-props.md b/website/versioned_docs/version-0.80/shadow-props.md
index d5e8a037059..91553622bd3 100644
--- a/website/versioned_docs/version-0.80/shadow-props.md
+++ b/website/versioned_docs/version-0.80/shadow-props.md
@@ -1,285 +1,285 @@
----
-id: shadow-props
-title: Shadow Props
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=js&dependencies=@react-native-community/slider
-import React, {useState} from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-import Slider from '@react-native-community/slider';
-
-const ShadowPropSlider = ({label, value, ...props}) => {
-  return (
-    <>
-      <Text>
-        {label} ({value.toFixed(2)})
-      </Text>
-      <Slider step={1} value={value} {...props} />
-    </>
-  );
-};
-
-const App = () => {
-  const [shadowOffsetWidth, setShadowOffsetWidth] = useState(0);
-  const [shadowOffsetHeight, setShadowOffsetHeight] = useState(0);
-  const [shadowRadius, setShadowRadius] = useState(0);
-  const [shadowOpacity, setShadowOpacity] = useState(0.1);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View
-          style={[
-            styles.square,
-            {
-              shadowOffset: {
-                width: shadowOffsetWidth,
-                height: -shadowOffsetHeight,
-              },
-              shadowOpacity,
-              shadowRadius,
-            },
-          ]}
-        />
-        <View style={styles.controls}>
-          <ShadowPropSlider
-            label="shadowOffset - X"
-            minimumValue={-50}
-            maximumValue={50}
-            value={shadowOffsetWidth}
-            onValueChange={setShadowOffsetWidth}
-          />
-          <ShadowPropSlider
-            label="shadowOffset - Y"
-            minimumValue={-50}
-            maximumValue={50}
-            value={shadowOffsetHeight}
-            onValueChange={setShadowOffsetHeight}
-          />
-          <ShadowPropSlider
-            label="shadowRadius"
-            minimumValue={0}
-            maximumValue={100}
-            value={shadowRadius}
-            onValueChange={setShadowRadius}
-          />
-          <ShadowPropSlider
-            label="shadowOpacity"
-            minimumValue={0}
-            maximumValue={1}
-            step={0.05}
-            value={shadowOpacity}
-            onValueChange={val => setShadowOpacity(val)}
-          />
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'space-around',
-    backgroundColor: '#ecf0f1',
-    padding: 8,
-  },
-  square: {
-    alignSelf: 'center',
-    backgroundColor: 'white',
-    borderRadius: 4,
-    height: 150,
-    shadowColor: 'black',
-    width: 150,
-  },
-  controls: {
-    paddingHorizontal: 12,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=tsx&dependencies=@react-native-community/slider
-import React, {useState} from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-import Slider, {SliderProps} from '@react-native-community/slider';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-type ShadowPropSliderProps = SliderProps & {
-  label: string;
-};
-
-const ShadowPropSlider = ({label, value, ...props}: ShadowPropSliderProps) => {
-  return (
-    <>
-      <Text>
-        {label} ({value?.toFixed(2)})
-      </Text>
-      <Slider step={1} value={value} {...props} />
-    </>
-  );
-};
-
-const App = () => {
-  const [shadowOffsetWidth, setShadowOffsetWidth] = useState(0);
-  const [shadowOffsetHeight, setShadowOffsetHeight] = useState(0);
-  const [shadowRadius, setShadowRadius] = useState(0);
-  const [shadowOpacity, setShadowOpacity] = useState(0.1);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View
-          style={[
-            styles.square,
-            {
-              shadowOffset: {
-                width: shadowOffsetWidth,
-                height: -shadowOffsetHeight,
-              },
-              shadowOpacity,
-              shadowRadius,
-            },
-          ]}
-        />
-        <View style={styles.controls}>
-          <ShadowPropSlider
-            label="shadowOffset - X"
-            minimumValue={-50}
-            maximumValue={50}
-            value={shadowOffsetWidth}
-            onValueChange={setShadowOffsetWidth}
-          />
-          <ShadowPropSlider
-            label="shadowOffset - Y"
-            minimumValue={-50}
-            maximumValue={50}
-            value={shadowOffsetHeight}
-            onValueChange={setShadowOffsetHeight}
-          />
-          <ShadowPropSlider
-            label="shadowRadius"
-            minimumValue={0}
-            maximumValue={100}
-            value={shadowRadius}
-            onValueChange={setShadowRadius}
-          />
-          <ShadowPropSlider
-            label="shadowOpacity"
-            minimumValue={0}
-            maximumValue={1}
-            step={0.05}
-            value={shadowOpacity}
-            onValueChange={val => setShadowOpacity(val)}
-          />
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'space-around',
-    backgroundColor: '#ecf0f1',
-    padding: 8,
-  },
-  square: {
-    alignSelf: 'center',
-    backgroundColor: 'white',
-    borderRadius: 4,
-    height: 150,
-    shadowColor: 'black',
-    width: 150,
-  },
-  controls: {
-    paddingHorizontal: 12,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
----
-
-# Reference
-
-There are 3 sets of shadow APIs in React Native:
-
-- `boxShadow`: A View style prop and a spec-compliant implementation of the [web style prop of the same name](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow).
-- `dropShadow`: A specific filter function available as part of the [`filter`](./view-style-props#filter) View style prop.
-- Various `shadow` props (`shadowColor`, `shadowOffset`, `shadowOpacity`, `shadowRadius`): These map directly to their native counterparts exposed by the platform-level APIs.
-
-The difference between `dropShadow` and `boxShadow` are as follows:
-
-- `dropShadow` exists as part of `filter`, whereas `boxShadow` is a standalone style prop.
-- `dropShadow` is an alpha mask, so only pixels with a positive alpha value will "cast" a shadow. `boxShadow` will cast around the border box of the element no matter it's contents (unless it is inset).
-- `dropShadow` is only available on Android, `boxShadow` is available on iOS and Android.
-- `dropShadow` cannot be inset like `boxShadow`.
-- `dropShadow` does not have the `spreadDistance` argument like `boxShadow`.
-
-Both `boxShadow` and `dropShadow` are generally more capable than the `shadow` props. The `shadow` props, however, map to native platform-level APIs, so if you only need a straightforward shadow these props are recommended. Note that only `shadowColor` works on both Android and iOS, all other `shadow` props only work on iOS.
-
-## Props
-
-### `boxShadow`
-
-See [View Style Props](./view-style-props#boxshadow) for documentation.
-
-### `dropShadow` <div className="label android">Android</div>
-
-See [View Style Props](./view-style-props#filter) for documentation.
-
-### `shadowColor`
-
-Sets the drop shadow color.
-
-This property will only work on Android API 28 and above. For similar functionality on lower Android APIs, use the [`elevation` property](view-style-props#elevation-android).
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `shadowOffset` <div className="label ios">iOS</div>
-
-Sets the drop shadow offset.
-
-| Type                                     |
-| ---------------------------------------- |
-| object: `{width: number,height: number}` |
-
----
-
-### `shadowOpacity` <div className="label ios">iOS</div>
-
-Sets the drop shadow opacity (multiplied by the color's alpha component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `shadowRadius` <div className="label ios">iOS</div>
-
-Sets the drop shadow blur radius.
-
-| Type   |
-| ------ |
-| number |
+---
+id: shadow-props
+title: Shadow Props
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=js&dependencies=@react-native-community/slider
+import {useState} from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+import Slider from '@react-native-community/slider';
+
+const ShadowPropSlider = ({label, value, ...props}) => {
+  return (
+    <>
+      <Text>
+        {label} ({value.toFixed(2)})
+      </Text>
+      <Slider step={1} value={value} {...props} />
+    </>
+  );
+};
+
+const App = () => {
+  const [shadowOffsetWidth, setShadowOffsetWidth] = useState(0);
+  const [shadowOffsetHeight, setShadowOffsetHeight] = useState(0);
+  const [shadowRadius, setShadowRadius] = useState(0);
+  const [shadowOpacity, setShadowOpacity] = useState(0.1);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View
+          style={[
+            styles.square,
+            {
+              shadowOffset: {
+                width: shadowOffsetWidth,
+                height: -shadowOffsetHeight,
+              },
+              shadowOpacity,
+              shadowRadius,
+            },
+          ]}
+        />
+        <View style={styles.controls}>
+          <ShadowPropSlider
+            label="shadowOffset - X"
+            minimumValue={-50}
+            maximumValue={50}
+            value={shadowOffsetWidth}
+            onValueChange={setShadowOffsetWidth}
+          />
+          <ShadowPropSlider
+            label="shadowOffset - Y"
+            minimumValue={-50}
+            maximumValue={50}
+            value={shadowOffsetHeight}
+            onValueChange={setShadowOffsetHeight}
+          />
+          <ShadowPropSlider
+            label="shadowRadius"
+            minimumValue={0}
+            maximumValue={100}
+            value={shadowRadius}
+            onValueChange={setShadowRadius}
+          />
+          <ShadowPropSlider
+            label="shadowOpacity"
+            minimumValue={0}
+            maximumValue={1}
+            step={0.05}
+            value={shadowOpacity}
+            onValueChange={val => setShadowOpacity(val)}
+          />
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'space-around',
+    backgroundColor: '#ecf0f1',
+    padding: 8,
+  },
+  square: {
+    alignSelf: 'center',
+    backgroundColor: 'white',
+    borderRadius: 4,
+    height: 150,
+    shadowColor: 'black',
+    width: 150,
+  },
+  controls: {
+    paddingHorizontal: 12,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=tsx&dependencies=@react-native-community/slider
+import {useState} from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+import Slider, {SliderProps} from '@react-native-community/slider';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+type ShadowPropSliderProps = SliderProps & {
+  label: string;
+};
+
+const ShadowPropSlider = ({label, value, ...props}: ShadowPropSliderProps) => {
+  return (
+    <>
+      <Text>
+        {label} ({value?.toFixed(2)})
+      </Text>
+      <Slider step={1} value={value} {...props} />
+    </>
+  );
+};
+
+const App = () => {
+  const [shadowOffsetWidth, setShadowOffsetWidth] = useState(0);
+  const [shadowOffsetHeight, setShadowOffsetHeight] = useState(0);
+  const [shadowRadius, setShadowRadius] = useState(0);
+  const [shadowOpacity, setShadowOpacity] = useState(0.1);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View
+          style={[
+            styles.square,
+            {
+              shadowOffset: {
+                width: shadowOffsetWidth,
+                height: -shadowOffsetHeight,
+              },
+              shadowOpacity,
+              shadowRadius,
+            },
+          ]}
+        />
+        <View style={styles.controls}>
+          <ShadowPropSlider
+            label="shadowOffset - X"
+            minimumValue={-50}
+            maximumValue={50}
+            value={shadowOffsetWidth}
+            onValueChange={setShadowOffsetWidth}
+          />
+          <ShadowPropSlider
+            label="shadowOffset - Y"
+            minimumValue={-50}
+            maximumValue={50}
+            value={shadowOffsetHeight}
+            onValueChange={setShadowOffsetHeight}
+          />
+          <ShadowPropSlider
+            label="shadowRadius"
+            minimumValue={0}
+            maximumValue={100}
+            value={shadowRadius}
+            onValueChange={setShadowRadius}
+          />
+          <ShadowPropSlider
+            label="shadowOpacity"
+            minimumValue={0}
+            maximumValue={1}
+            step={0.05}
+            value={shadowOpacity}
+            onValueChange={val => setShadowOpacity(val)}
+          />
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'space-around',
+    backgroundColor: '#ecf0f1',
+    padding: 8,
+  },
+  square: {
+    alignSelf: 'center',
+    backgroundColor: 'white',
+    borderRadius: 4,
+    height: 150,
+    shadowColor: 'black',
+    width: 150,
+  },
+  controls: {
+    paddingHorizontal: 12,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+---
+
+# Reference
+
+There are 3 sets of shadow APIs in React Native:
+
+- `boxShadow`: A View style prop and a spec-compliant implementation of the [web style prop of the same name](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow).
+- `dropShadow`: A specific filter function available as part of the [`filter`](./view-style-props#filter) View style prop.
+- Various `shadow` props (`shadowColor`, `shadowOffset`, `shadowOpacity`, `shadowRadius`): These map directly to their native counterparts exposed by the platform-level APIs.
+
+The difference between `dropShadow` and `boxShadow` are as follows:
+
+- `dropShadow` exists as part of `filter`, whereas `boxShadow` is a standalone style prop.
+- `dropShadow` is an alpha mask, so only pixels with a positive alpha value will "cast" a shadow. `boxShadow` will cast around the border box of the element no matter it's contents (unless it is inset).
+- `dropShadow` is only available on Android, `boxShadow` is available on iOS and Android.
+- `dropShadow` cannot be inset like `boxShadow`.
+- `dropShadow` does not have the `spreadDistance` argument like `boxShadow`.
+
+Both `boxShadow` and `dropShadow` are generally more capable than the `shadow` props. The `shadow` props, however, map to native platform-level APIs, so if you only need a straightforward shadow these props are recommended. Note that only `shadowColor` works on both Android and iOS, all other `shadow` props only work on iOS.
+
+## Props
+
+### `boxShadow`
+
+See [View Style Props](./view-style-props#boxshadow) for documentation.
+
+### `dropShadow` <div className="label android">Android</div>
+
+See [View Style Props](./view-style-props#filter) for documentation.
+
+### `shadowColor`
+
+Sets the drop shadow color.
+
+This property will only work on Android API 28 and above. For similar functionality on lower Android APIs, use the [`elevation` property](view-style-props#elevation-android).
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `shadowOffset` <div className="label ios">iOS</div>
+
+Sets the drop shadow offset.
+
+| Type                                     |
+| ---------------------------------------- |
+| object: `{width: number,height: number}` |
+
+---
+
+### `shadowOpacity` <div className="label ios">iOS</div>
+
+Sets the drop shadow opacity (multiplied by the color's alpha component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `shadowRadius` <div className="label ios">iOS</div>
+
+Sets the drop shadow blur radius.
+
+| Type   |
+| ------ |
+| number |
diff --git a/website/versioned_docs/version-0.80/share.md b/website/versioned_docs/version-0.80/share.md
index 1fc5823361f..46d0f858435 100644
--- a/website/versioned_docs/version-0.80/share.md
+++ b/website/versioned_docs/version-0.80/share.md
@@ -11,7 +11,6 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con
 <TabItem value="javascript">
 
 ```SnackPlayer name=Example&supportedPlatforms=ios,android&ext=js
-import React from 'react';
 import {Alert, Share, Button} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -51,7 +50,6 @@ export default ShareExample;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Example&supportedPlatforms=ios,android&ext=tsx
-import React from 'react';
 import {Alert, Share, Button} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.80/state.md b/website/versioned_docs/version-0.80/state.md
index bc162f44b40..ebf3ec14336 100644
--- a/website/versioned_docs/version-0.80/state.md
+++ b/website/versioned_docs/version-0.80/state.md
@@ -1,103 +1,103 @@
----
-id: state
-title: State
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-There are two types of data that control a component: `props` and `state`. `props` are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use `state`.
-
-In general, you should initialize `state` in the constructor, and then call `setState` when you want to change it.
-
-For example, let's say we want to make text that blinks all the time. The text itself gets set once when the blinking component gets created, so the text itself is a `prop`. The "whether the text is currently on or off" changes over time, so that should be kept in `state`.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=State&ext=js
-import React, {useState, useEffect} from 'react';
-import {Text, View} from 'react-native';
-
-const Blink = props => {
-  const [isShowingText, setIsShowingText] = useState(true);
-
-  useEffect(() => {
-    const toggle = setInterval(() => {
-      setIsShowingText(!isShowingText);
-    }, 1000);
-
-    return () => clearInterval(toggle);
-  });
-
-  if (!isShowingText) {
-    return null;
-  }
-
-  return <Text>{props.text}</Text>;
-};
-
-const BlinkApp = () => {
-  return (
-    <View style={{marginTop: 50}}>
-      <Blink text="I love to blink" />
-      <Blink text="Yes blinking is so great" />
-      <Blink text="Why did they ever take this out of HTML" />
-      <Blink text="Look at me look at me look at me" />
-    </View>
-  );
-};
-
-export default BlinkApp;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=State&ext=tsx
-import React, {useState, useEffect} from 'react';
-import {Text, View} from 'react-native';
-
-type BlinkProps = {
-  text: string;
-};
-
-const Blink = (props: BlinkProps) => {
-  const [isShowingText, setIsShowingText] = useState(true);
-
-  useEffect(() => {
-    const toggle = setInterval(() => {
-      setIsShowingText(!isShowingText);
-    }, 1000);
-
-    return () => clearInterval(toggle);
-  });
-
-  if (!isShowingText) {
-    return null;
-  }
-
-  return <Text>{props.text}</Text>;
-};
-
-const BlinkApp = () => {
-  return (
-    <View style={{marginTop: 50}}>
-      <Blink text="I love to blink" />
-      <Blink text="Yes blinking is so great" />
-      <Blink text="Why did they ever take this out of HTML" />
-      <Blink text="Look at me look at me look at me" />
-    </View>
-  );
-};
-
-export default BlinkApp;
-```
-
-</TabItem>
-</Tabs>
-
-In a real application, you probably won't be setting state with a timer. You might set state when you have new data from the server, or from user input. You can also use a state container like [Redux](https://redux.js.org/) or [MobX](https://mobx.js.org/) to control your data flow. In that case you would use Redux or MobX to modify your state rather than calling `setState` directly.
-
-When setState is called, BlinkApp will re-render its Component. By calling setState within the Timer, the component will re-render every time the Timer ticks.
-
-State works the same way as it does in React, so for more details on handling state, you can look at the [React.Component API](https://react.dev/reference/react/Component#setstate). At this point, you may have noticed that most of our examples use the default text color. To customize the text color, you will have to [learn about Style](style.md).
+---
+id: state
+title: State
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+There are two types of data that control a component: `props` and `state`. `props` are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use `state`.
+
+In general, you should initialize `state` in the constructor, and then call `setState` when you want to change it.
+
+For example, let's say we want to make text that blinks all the time. The text itself gets set once when the blinking component gets created, so the text itself is a `prop`. The "whether the text is currently on or off" changes over time, so that should be kept in `state`.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=State&ext=js
+import {useState, useEffect} from 'react';
+import {Text, View} from 'react-native';
+
+const Blink = props => {
+  const [isShowingText, setIsShowingText] = useState(true);
+
+  useEffect(() => {
+    const toggle = setInterval(() => {
+      setIsShowingText(!isShowingText);
+    }, 1000);
+
+    return () => clearInterval(toggle);
+  });
+
+  if (!isShowingText) {
+    return null;
+  }
+
+  return <Text>{props.text}</Text>;
+};
+
+const BlinkApp = () => {
+  return (
+    <View style={{marginTop: 50}}>
+      <Blink text="I love to blink" />
+      <Blink text="Yes blinking is so great" />
+      <Blink text="Why did they ever take this out of HTML" />
+      <Blink text="Look at me look at me look at me" />
+    </View>
+  );
+};
+
+export default BlinkApp;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=State&ext=tsx
+import {useState, useEffect} from 'react';
+import {Text, View} from 'react-native';
+
+type BlinkProps = {
+  text: string;
+};
+
+const Blink = (props: BlinkProps) => {
+  const [isShowingText, setIsShowingText] = useState(true);
+
+  useEffect(() => {
+    const toggle = setInterval(() => {
+      setIsShowingText(!isShowingText);
+    }, 1000);
+
+    return () => clearInterval(toggle);
+  });
+
+  if (!isShowingText) {
+    return null;
+  }
+
+  return <Text>{props.text}</Text>;
+};
+
+const BlinkApp = () => {
+  return (
+    <View style={{marginTop: 50}}>
+      <Blink text="I love to blink" />
+      <Blink text="Yes blinking is so great" />
+      <Blink text="Why did they ever take this out of HTML" />
+      <Blink text="Look at me look at me look at me" />
+    </View>
+  );
+};
+
+export default BlinkApp;
+```
+
+</TabItem>
+</Tabs>
+
+In a real application, you probably won't be setting state with a timer. You might set state when you have new data from the server, or from user input. You can also use a state container like [Redux](https://redux.js.org/) or [MobX](https://mobx.js.org/) to control your data flow. In that case you would use Redux or MobX to modify your state rather than calling `setState` directly.
+
+When setState is called, BlinkApp will re-render its Component. By calling setState within the Timer, the component will re-render every time the Timer ticks.
+
+State works the same way as it does in React, so for more details on handling state, you can look at the [React.Component API](https://react.dev/reference/react/Component#setstate). At this point, you may have noticed that most of our examples use the default text color. To customize the text color, you will have to [learn about Style](style.md).
diff --git a/website/versioned_docs/version-0.80/statusbar.md b/website/versioned_docs/version-0.80/statusbar.md
index 93810f7b0e0..97686cf2260 100644
--- a/website/versioned_docs/version-0.80/statusbar.md
+++ b/website/versioned_docs/version-0.80/statusbar.md
@@ -1,513 +1,513 @@
----
-id: statusbar
-title: StatusBar
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-Component to control the app's status bar. The status bar is the zone, typically at the top of the screen, that displays the current time, Wi-Fi and cellular network information, battery level and/or other status icons.
-
-### 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.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=StatusBar%20Component%20Example&supportedPlatforms=android,ios&ext=js
-import React, {useState} from 'react';
-import {
-  Button,
-  Platform,
-  StatusBar,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const STYLES = ['default', 'dark-content', 'light-content'];
-const TRANSITIONS = ['fade', 'slide', 'none'];
-
-const App = () => {
-  const [hidden, setHidden] = useState(false);
-  const [statusBarStyle, setStatusBarStyle] = useState(STYLES[0]);
-  const [statusBarTransition, setStatusBarTransition] = useState(
-    TRANSITIONS[0],
-  );
-
-  const changeStatusBarVisibility = () => setHidden(!hidden);
-
-  const changeStatusBarStyle = () => {
-    const styleId = STYLES.indexOf(statusBarStyle) + 1;
-    if (styleId === STYLES.length) {
-      setStatusBarStyle(STYLES[0]);
-    } else {
-      setStatusBarStyle(STYLES[styleId]);
-    }
-  };
-
-  const changeStatusBarTransition = () => {
-    const transition = TRANSITIONS.indexOf(statusBarTransition) + 1;
-    if (transition === TRANSITIONS.length) {
-      setStatusBarTransition(TRANSITIONS[0]);
-    } else {
-      setStatusBarTransition(TRANSITIONS[transition]);
-    }
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <StatusBar
-          animated={true}
-          backgroundColor="#61dafb"
-          barStyle={statusBarStyle}
-          showHideTransition={statusBarTransition}
-          hidden={hidden}
-        />
-        <Text style={styles.textStyle}>
-          StatusBar Visibility:{'\n'}
-          {hidden ? 'Hidden' : 'Visible'}
-        </Text>
-        <Text style={styles.textStyle}>
-          StatusBar Style:{'\n'}
-          {statusBarStyle}
-        </Text>
-        {Platform.OS === 'ios' ? (
-          <Text style={styles.textStyle}>
-            StatusBar Transition:{'\n'}
-            {statusBarTransition}
-          </Text>
-        ) : null}
-        <View style={styles.buttonsContainer}>
-          <Button
-            title="Toggle StatusBar"
-            onPress={changeStatusBarVisibility}
-          />
-          <Button
-            title="Change StatusBar Style"
-            onPress={changeStatusBarStyle}
-          />
-          {Platform.OS === 'ios' ? (
-            <Button
-              title="Change StatusBar Transition"
-              onPress={changeStatusBarTransition}
-            />
-          ) : null}
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    backgroundColor: '#ECF0F1',
-  },
-  buttonsContainer: {
-    padding: 10,
-  },
-  textStyle: {
-    textAlign: 'center',
-    marginBottom: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=StatusBar%20Component%20Example&supportedPlatforms=android,ios&ext=tsx
-import React, {useState} from 'react';
-import {
-  Button,
-  Platform,
-  StatusBar,
-  StyleSheet,
-  Text,
-  View,
-  StatusBarStyle,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const STYLES = ['default', 'dark-content', 'light-content'] as const;
-const TRANSITIONS = ['fade', 'slide', 'none'] as const;
-
-const App = () => {
-  const [hidden, setHidden] = useState(false);
-  const [statusBarStyle, setStatusBarStyle] = useState<StatusBarStyle>(
-    STYLES[0],
-  );
-  const [statusBarTransition, setStatusBarTransition] = useState<
-    'fade' | 'slide' | 'none'
-  >(TRANSITIONS[0]);
-
-  const changeStatusBarVisibility = () => setHidden(!hidden);
-
-  const changeStatusBarStyle = () => {
-    const styleId = STYLES.indexOf(statusBarStyle) + 1;
-    if (styleId === STYLES.length) {
-      setStatusBarStyle(STYLES[0]);
-    } else {
-      setStatusBarStyle(STYLES[styleId]);
-    }
-  };
-
-  const changeStatusBarTransition = () => {
-    const transition = TRANSITIONS.indexOf(statusBarTransition) + 1;
-    if (transition === TRANSITIONS.length) {
-      setStatusBarTransition(TRANSITIONS[0]);
-    } else {
-      setStatusBarTransition(TRANSITIONS[transition]);
-    }
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <StatusBar
-          animated={true}
-          backgroundColor="#61dafb"
-          barStyle={statusBarStyle}
-          showHideTransition={statusBarTransition}
-          hidden={hidden}
-        />
-        <Text style={styles.textStyle}>
-          StatusBar Visibility:{'\n'}
-          {hidden ? 'Hidden' : 'Visible'}
-        </Text>
-        <Text style={styles.textStyle}>
-          StatusBar Style:{'\n'}
-          {statusBarStyle}
-        </Text>
-        {Platform.OS === 'ios' ? (
-          <Text style={styles.textStyle}>
-            StatusBar Transition:{'\n'}
-            {statusBarTransition}
-          </Text>
-        ) : null}
-        <View style={styles.buttonsContainer}>
-          <Button
-            title="Toggle StatusBar"
-            onPress={changeStatusBarVisibility}
-          />
-          <Button
-            title="Change StatusBar Style"
-            onPress={changeStatusBarStyle}
-          />
-          {Platform.OS === 'ios' ? (
-            <Button
-              title="Change StatusBar Transition"
-              onPress={changeStatusBarTransition}
-            />
-          ) : null}
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    backgroundColor: '#ECF0F1',
-  },
-  buttonsContainer: {
-    padding: 10,
-  },
-  textStyle: {
-    textAlign: 'center',
-    marginBottom: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### 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.
-
----
-
-# Reference
-
-## Constants
-
-### `currentHeight` <div className="label android">Android</div>
-
-The height of the status bar, which includes the notch height, if present.
-
----
-
-## Props
-
-### `animated`
-
-If the transition between status bar property changes should be animated. Supported for `backgroundColor`, `barStyle` and `hidden` properties.
-
-| Type    | Required | Default |
-| ------- | -------- | ------- |
-| boolean | No       | `false` |
-
----
-
-### `backgroundColor` <div className="label android">Android</div>
-
-The background color of the status bar.
-
-:::warning
-Due to edge-to-edge enforcement introduced in Android 15, setting background color of the status bar is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
-:::
-
-| Type            | Required | Default                                                                |
-| --------------- | -------- | ---------------------------------------------------------------------- |
-| [color](colors) | No       | default system StatusBar background color, or `'black'` if not defined |
-
----
-
-### `barStyle`
-
-Sets the color of the status bar text.
-
-On Android, this will only have an impact on API versions 23 and above.
-
-| Type                                       | Required | Default     |
-| ------------------------------------------ | -------- | ----------- |
-| [StatusBarStyle](statusbar#statusbarstyle) | No       | `'default'` |
-
----
-
-### `hidden`
-
-If the status bar is hidden.
-
-| Type    | Required | Default |
-| ------- | -------- | ------- |
-| boolean | No       | `false` |
-
----
-
-### `networkActivityIndicatorVisible` <div className="label ios">iOS</div>
-
-If the network activity indicator should be visible.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
----
-
-### `showHideTransition` <div className="label ios">iOS</div>
-
-The transition effect when showing and hiding the status bar using the `hidden` prop.
-
-| Type                                               | Default  |
-| -------------------------------------------------- | -------- |
-| [StatusBarAnimation](statusbar#statusbaranimation) | `'fade'` |
-
----
-
-### `translucent` <div className="label android">Android</div>
-
-If the status bar is translucent. When translucent is set to `true`, the app will draw under the status bar. This is useful when using a semi transparent status bar color.
-
-:::warning
-Due to edge-to-edge enforcement introduced in Android 15, setting the status bar as translucent is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
-:::
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
-## Methods
-
-### `popStackEntry()`
-
-```tsx
-static popStackEntry(entry: StatusBarProps);
-```
-
-Get and remove the last StatusBar entry from the stack.
-
-**Parameters:**
-
-| Name                                                       | Type | Description                           |
-| ---------------------------------------------------------- | ---- | ------------------------------------- |
-| entry <div className="label basic required">Required</div> | any  | Entry returned from `pushStackEntry`. |
-
----
-
-### `pushStackEntry()`
-
-```tsx
-static pushStackEntry(props: StatusBarProps): StatusBarProps;
-```
-
-Push a StatusBar entry onto the stack. The return value should be passed to `popStackEntry` when complete.
-
-**Parameters:**
-
-| Name                                                       | Type | Description                                                      |
-| ---------------------------------------------------------- | ---- | ---------------------------------------------------------------- |
-| props <div className="label basic required">Required</div> | any  | Object containing the StatusBar props to use in the stack entry. |
-
----
-
-### `replaceStackEntry()`
-
-```tsx
-static replaceStackEntry(
-  entry: StatusBarProps,
-  props: StatusBarProps
-): StatusBarProps;
-```
-
-Replace an existing StatusBar stack entry with new props.
-
-**Parameters:**
-
-| Name                                                       | Type | Description                                                                  |
-| ---------------------------------------------------------- | ---- | ---------------------------------------------------------------------------- |
-| entry <div className="label basic required">Required</div> | any  | Entry returned from `pushStackEntry` to replace.                             |
-| props <div className="label basic required">Required</div> | any  | Object containing the StatusBar props to use in the replacement stack entry. |
-
----
-
-### `setBackgroundColor()` <div className="label android">Android</div>
-
-```tsx
-static setBackgroundColor(color: ColorValue, animated?: boolean);
-```
-
-Set the background color for the status bar.
-
-:::warning
-Due to edge-to-edge enforcement introduced in Android 15, setting background color of the status bar is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
-:::
-
-**Parameters:**
-
-| Name                                                       | Type    | Description               |
-| ---------------------------------------------------------- | ------- | ------------------------- |
-| color <div className="label basic required">Required</div> | string  | Background color.         |
-| animated                                                   | boolean | Animate the style change. |
-
----
-
-### `setBarStyle()`
-
-```tsx
-static setBarStyle(style: StatusBarStyle, animated?: boolean);
-```
-
-Set the status bar style.
-
-**Parameters:**
-
-| Name                                                       | Type                                       | Description               |
-| ---------------------------------------------------------- | ------------------------------------------ | ------------------------- |
-| style <div className="label basic required">Required</div> | [StatusBarStyle](statusbar#statusbarstyle) | Status bar style to set.  |
-| animated                                                   | boolean                                    | Animate the style change. |
-
----
-
-### `setHidden()`
-
-```tsx
-static setHidden(hidden: boolean, animation?: StatusBarAnimation);
-```
-
-Show or hide the status bar.
-
-**Parameters:**
-
-| Name                                                        | Type                                               | Description                                             |
-| ----------------------------------------------------------- | -------------------------------------------------- | ------------------------------------------------------- |
-| hidden <div className="label basic required">Required</div> | boolean                                            | Hide the status bar.                                    |
-| animation <div className="label ios">iOS</div>              | [StatusBarAnimation](statusbar#statusbaranimation) | Animation when changing the status bar hidden property. |
-
----
-
-### 🗑️ `setNetworkActivityIndicatorVisible()` <div className="label ios">iOS</div>
-
-:::warning[Deprecated]
-The status bar network activity indicator is not supported in iOS 13 and later. This will be removed in a future release.
-:::
-
-```tsx
-static setNetworkActivityIndicatorVisible(visible: boolean);
-```
-
-Control the visibility of the network activity indicator.
-
-**Parameters:**
-
-| Name                                                         | Type    | Description         |
-| ------------------------------------------------------------ | ------- | ------------------- |
-| visible <div className="label basic required">Required</div> | boolean | Show the indicator. |
-
----
-
-### `setTranslucent()` <div className="label android">Android</div>
-
-```tsx
-static setTranslucent(translucent: boolean);
-```
-
-Control the translucency of the status bar.
-
-:::warning
-Due to edge-to-edge enforcement introduced in Android 15, setting the status bar as translucent is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
-:::
-
-**Parameters:**
-
-| Name                                                             | Type    | Description         |
-| ---------------------------------------------------------------- | ------- | ------------------- |
-| translucent <div className="label basic required">Required</div> | boolean | Set as translucent. |
-
-## Type Definitions
-
-### StatusBarAnimation
-
-Status bar animation type for transitions on the iOS.
-
-| Type |
-| ---- |
-| enum |
-
-**Constants:**
-
-| Value     | Type   | Description     |
-| --------- | ------ | --------------- |
-| `'fade'`  | string | Fade animation  |
-| `'slide'` | string | Slide animation |
-| `'none'`  | string | No animation    |
-
----
-
-### StatusBarStyle
-
-Status bar style type.
-
-| Type |
-| ---- |
-| enum |
-
-**Constants:**
-
-| Value             | Type   | Description                                                |
-| ----------------- | ------ | ---------------------------------------------------------- |
-| `'default'`       | string | Default status bar style (dark for iOS, light for Android) |
-| `'light-content'` | string | White texts and icons                                      |
-| `'dark-content'`  | string | Dark texts and icons (requires API>=23 on Android)         |
+---
+id: statusbar
+title: StatusBar
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+Component to control the app's status bar. The status bar is the zone, typically at the top of the screen, that displays the current time, Wi-Fi and cellular network information, battery level and/or other status icons.
+
+### 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.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=StatusBar%20Component%20Example&supportedPlatforms=android,ios&ext=js
+import {useState} from 'react';
+import {
+  Button,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const STYLES = ['default', 'dark-content', 'light-content'];
+const TRANSITIONS = ['fade', 'slide', 'none'];
+
+const App = () => {
+  const [hidden, setHidden] = useState(false);
+  const [statusBarStyle, setStatusBarStyle] = useState(STYLES[0]);
+  const [statusBarTransition, setStatusBarTransition] = useState(
+    TRANSITIONS[0],
+  );
+
+  const changeStatusBarVisibility = () => setHidden(!hidden);
+
+  const changeStatusBarStyle = () => {
+    const styleId = STYLES.indexOf(statusBarStyle) + 1;
+    if (styleId === STYLES.length) {
+      setStatusBarStyle(STYLES[0]);
+    } else {
+      setStatusBarStyle(STYLES[styleId]);
+    }
+  };
+
+  const changeStatusBarTransition = () => {
+    const transition = TRANSITIONS.indexOf(statusBarTransition) + 1;
+    if (transition === TRANSITIONS.length) {
+      setStatusBarTransition(TRANSITIONS[0]);
+    } else {
+      setStatusBarTransition(TRANSITIONS[transition]);
+    }
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <StatusBar
+          animated={true}
+          backgroundColor="#61dafb"
+          barStyle={statusBarStyle}
+          showHideTransition={statusBarTransition}
+          hidden={hidden}
+        />
+        <Text style={styles.textStyle}>
+          StatusBar Visibility:{'\n'}
+          {hidden ? 'Hidden' : 'Visible'}
+        </Text>
+        <Text style={styles.textStyle}>
+          StatusBar Style:{'\n'}
+          {statusBarStyle}
+        </Text>
+        {Platform.OS === 'ios' ? (
+          <Text style={styles.textStyle}>
+            StatusBar Transition:{'\n'}
+            {statusBarTransition}
+          </Text>
+        ) : null}
+        <View style={styles.buttonsContainer}>
+          <Button
+            title="Toggle StatusBar"
+            onPress={changeStatusBarVisibility}
+          />
+          <Button
+            title="Change StatusBar Style"
+            onPress={changeStatusBarStyle}
+          />
+          {Platform.OS === 'ios' ? (
+            <Button
+              title="Change StatusBar Transition"
+              onPress={changeStatusBarTransition}
+            />
+          ) : null}
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: '#ECF0F1',
+  },
+  buttonsContainer: {
+    padding: 10,
+  },
+  textStyle: {
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=StatusBar%20Component%20Example&supportedPlatforms=android,ios&ext=tsx
+import {useState} from 'react';
+import {
+  Button,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  Text,
+  View,
+  StatusBarStyle,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const STYLES = ['default', 'dark-content', 'light-content'] as const;
+const TRANSITIONS = ['fade', 'slide', 'none'] as const;
+
+const App = () => {
+  const [hidden, setHidden] = useState(false);
+  const [statusBarStyle, setStatusBarStyle] = useState<StatusBarStyle>(
+    STYLES[0],
+  );
+  const [statusBarTransition, setStatusBarTransition] = useState<
+    'fade' | 'slide' | 'none'
+  >(TRANSITIONS[0]);
+
+  const changeStatusBarVisibility = () => setHidden(!hidden);
+
+  const changeStatusBarStyle = () => {
+    const styleId = STYLES.indexOf(statusBarStyle) + 1;
+    if (styleId === STYLES.length) {
+      setStatusBarStyle(STYLES[0]);
+    } else {
+      setStatusBarStyle(STYLES[styleId]);
+    }
+  };
+
+  const changeStatusBarTransition = () => {
+    const transition = TRANSITIONS.indexOf(statusBarTransition) + 1;
+    if (transition === TRANSITIONS.length) {
+      setStatusBarTransition(TRANSITIONS[0]);
+    } else {
+      setStatusBarTransition(TRANSITIONS[transition]);
+    }
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <StatusBar
+          animated={true}
+          backgroundColor="#61dafb"
+          barStyle={statusBarStyle}
+          showHideTransition={statusBarTransition}
+          hidden={hidden}
+        />
+        <Text style={styles.textStyle}>
+          StatusBar Visibility:{'\n'}
+          {hidden ? 'Hidden' : 'Visible'}
+        </Text>
+        <Text style={styles.textStyle}>
+          StatusBar Style:{'\n'}
+          {statusBarStyle}
+        </Text>
+        {Platform.OS === 'ios' ? (
+          <Text style={styles.textStyle}>
+            StatusBar Transition:{'\n'}
+            {statusBarTransition}
+          </Text>
+        ) : null}
+        <View style={styles.buttonsContainer}>
+          <Button
+            title="Toggle StatusBar"
+            onPress={changeStatusBarVisibility}
+          />
+          <Button
+            title="Change StatusBar Style"
+            onPress={changeStatusBarStyle}
+          />
+          {Platform.OS === 'ios' ? (
+            <Button
+              title="Change StatusBar Transition"
+              onPress={changeStatusBarTransition}
+            />
+          ) : null}
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: '#ECF0F1',
+  },
+  buttonsContainer: {
+    padding: 10,
+  },
+  textStyle: {
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### 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.
+
+---
+
+# Reference
+
+## Constants
+
+### `currentHeight` <div className="label android">Android</div>
+
+The height of the status bar, which includes the notch height, if present.
+
+---
+
+## Props
+
+### `animated`
+
+If the transition between status bar property changes should be animated. Supported for `backgroundColor`, `barStyle` and `hidden` properties.
+
+| Type    | Required | Default |
+| ------- | -------- | ------- |
+| boolean | No       | `false` |
+
+---
+
+### `backgroundColor` <div className="label android">Android</div>
+
+The background color of the status bar.
+
+:::warning
+Due to edge-to-edge enforcement introduced in Android 15, setting background color of the status bar is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
+:::
+
+| Type            | Required | Default                                                                |
+| --------------- | -------- | ---------------------------------------------------------------------- |
+| [color](colors) | No       | default system StatusBar background color, or `'black'` if not defined |
+
+---
+
+### `barStyle`
+
+Sets the color of the status bar text.
+
+On Android, this will only have an impact on API versions 23 and above.
+
+| Type                                       | Required | Default     |
+| ------------------------------------------ | -------- | ----------- |
+| [StatusBarStyle](statusbar#statusbarstyle) | No       | `'default'` |
+
+---
+
+### `hidden`
+
+If the status bar is hidden.
+
+| Type    | Required | Default |
+| ------- | -------- | ------- |
+| boolean | No       | `false` |
+
+---
+
+### `networkActivityIndicatorVisible` <div className="label ios">iOS</div>
+
+If the network activity indicator should be visible.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+---
+
+### `showHideTransition` <div className="label ios">iOS</div>
+
+The transition effect when showing and hiding the status bar using the `hidden` prop.
+
+| Type                                               | Default  |
+| -------------------------------------------------- | -------- |
+| [StatusBarAnimation](statusbar#statusbaranimation) | `'fade'` |
+
+---
+
+### `translucent` <div className="label android">Android</div>
+
+If the status bar is translucent. When translucent is set to `true`, the app will draw under the status bar. This is useful when using a semi transparent status bar color.
+
+:::warning
+Due to edge-to-edge enforcement introduced in Android 15, setting the status bar as translucent is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
+:::
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+## Methods
+
+### `popStackEntry()`
+
+```tsx
+static popStackEntry(entry: StatusBarProps);
+```
+
+Get and remove the last StatusBar entry from the stack.
+
+**Parameters:**
+
+| Name                                                       | Type | Description                           |
+| ---------------------------------------------------------- | ---- | ------------------------------------- |
+| entry <div className="label basic required">Required</div> | any  | Entry returned from `pushStackEntry`. |
+
+---
+
+### `pushStackEntry()`
+
+```tsx
+static pushStackEntry(props: StatusBarProps): StatusBarProps;
+```
+
+Push a StatusBar entry onto the stack. The return value should be passed to `popStackEntry` when complete.
+
+**Parameters:**
+
+| Name                                                       | Type | Description                                                      |
+| ---------------------------------------------------------- | ---- | ---------------------------------------------------------------- |
+| props <div className="label basic required">Required</div> | any  | Object containing the StatusBar props to use in the stack entry. |
+
+---
+
+### `replaceStackEntry()`
+
+```tsx
+static replaceStackEntry(
+  entry: StatusBarProps,
+  props: StatusBarProps
+): StatusBarProps;
+```
+
+Replace an existing StatusBar stack entry with new props.
+
+**Parameters:**
+
+| Name                                                       | Type | Description                                                                  |
+| ---------------------------------------------------------- | ---- | ---------------------------------------------------------------------------- |
+| entry <div className="label basic required">Required</div> | any  | Entry returned from `pushStackEntry` to replace.                             |
+| props <div className="label basic required">Required</div> | any  | Object containing the StatusBar props to use in the replacement stack entry. |
+
+---
+
+### `setBackgroundColor()` <div className="label android">Android</div>
+
+```tsx
+static setBackgroundColor(color: ColorValue, animated?: boolean);
+```
+
+Set the background color for the status bar.
+
+:::warning
+Due to edge-to-edge enforcement introduced in Android 15, setting background color of the status bar is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
+:::
+
+**Parameters:**
+
+| Name                                                       | Type    | Description               |
+| ---------------------------------------------------------- | ------- | ------------------------- |
+| color <div className="label basic required">Required</div> | string  | Background color.         |
+| animated                                                   | boolean | Animate the style change. |
+
+---
+
+### `setBarStyle()`
+
+```tsx
+static setBarStyle(style: StatusBarStyle, animated?: boolean);
+```
+
+Set the status bar style.
+
+**Parameters:**
+
+| Name                                                       | Type                                       | Description               |
+| ---------------------------------------------------------- | ------------------------------------------ | ------------------------- |
+| style <div className="label basic required">Required</div> | [StatusBarStyle](statusbar#statusbarstyle) | Status bar style to set.  |
+| animated                                                   | boolean                                    | Animate the style change. |
+
+---
+
+### `setHidden()`
+
+```tsx
+static setHidden(hidden: boolean, animation?: StatusBarAnimation);
+```
+
+Show or hide the status bar.
+
+**Parameters:**
+
+| Name                                                        | Type                                               | Description                                             |
+| ----------------------------------------------------------- | -------------------------------------------------- | ------------------------------------------------------- |
+| hidden <div className="label basic required">Required</div> | boolean                                            | Hide the status bar.                                    |
+| animation <div className="label ios">iOS</div>              | [StatusBarAnimation](statusbar#statusbaranimation) | Animation when changing the status bar hidden property. |
+
+---
+
+### 🗑️ `setNetworkActivityIndicatorVisible()` <div className="label ios">iOS</div>
+
+:::warning[Deprecated]
+The status bar network activity indicator is not supported in iOS 13 and later. This will be removed in a future release.
+:::
+
+```tsx
+static setNetworkActivityIndicatorVisible(visible: boolean);
+```
+
+Control the visibility of the network activity indicator.
+
+**Parameters:**
+
+| Name                                                         | Type    | Description         |
+| ------------------------------------------------------------ | ------- | ------------------- |
+| visible <div className="label basic required">Required</div> | boolean | Show the indicator. |
+
+---
+
+### `setTranslucent()` <div className="label android">Android</div>
+
+```tsx
+static setTranslucent(translucent: boolean);
+```
+
+Control the translucency of the status bar.
+
+:::warning
+Due to edge-to-edge enforcement introduced in Android 15, setting the status bar as translucent is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
+:::
+
+**Parameters:**
+
+| Name                                                             | Type    | Description         |
+| ---------------------------------------------------------------- | ------- | ------------------- |
+| translucent <div className="label basic required">Required</div> | boolean | Set as translucent. |
+
+## Type Definitions
+
+### StatusBarAnimation
+
+Status bar animation type for transitions on the iOS.
+
+| Type |
+| ---- |
+| enum |
+
+**Constants:**
+
+| Value     | Type   | Description     |
+| --------- | ------ | --------------- |
+| `'fade'`  | string | Fade animation  |
+| `'slide'` | string | Slide animation |
+| `'none'`  | string | No animation    |
+
+---
+
+### StatusBarStyle
+
+Status bar style type.
+
+| Type |
+| ---- |
+| enum |
+
+**Constants:**
+
+| Value             | Type   | Description                                                |
+| ----------------- | ------ | ---------------------------------------------------------- |
+| `'default'`       | string | Default status bar style (dark for iOS, light for Android) |
+| `'light-content'` | string | White texts and icons                                      |
+| `'dark-content'`  | string | Dark texts and icons (requires API>=23 on Android)         |
diff --git a/website/versioned_docs/version-0.80/style.md b/website/versioned_docs/version-0.80/style.md
index d847c0597cb..4890db4fbfa 100644
--- a/website/versioned_docs/version-0.80/style.md
+++ b/website/versioned_docs/version-0.80/style.md
@@ -10,7 +10,6 @@ The `style` prop can be a plain old JavaScript object. That's what we usually us
 As a component grows in complexity, it is often cleaner to use `StyleSheet.create` to define several styles in one place. Here's an example:
 
 ```SnackPlayer name=Style
-import React from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 
 const LotsOfStyles = () => {
diff --git a/website/versioned_docs/version-0.80/stylesheet.md b/website/versioned_docs/version-0.80/stylesheet.md
index d160a22edc6..e332c0fa6d3 100644
--- a/website/versioned_docs/version-0.80/stylesheet.md
+++ b/website/versioned_docs/version-0.80/stylesheet.md
@@ -6,7 +6,6 @@ title: StyleSheet
 A StyleSheet is an abstraction similar to CSS StyleSheets.
 
 ```SnackPlayer name=StyleSheet
-import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -62,7 +61,6 @@ static compose(style1: Object, style2: Object): Object | Object[];
 Combines two styles such that `style2` will override any styles in `style1`. If either style is falsy, the other one is returned without allocating an array, saving allocations and maintaining reference equality for PureComponent checks.
 
 ```SnackPlayer name=Compose
-import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -123,7 +121,6 @@ static flatten(style: Array<Object extends Record<string, ViewStyle | ImageStyle
 Flattens an array of style objects, into one aggregated style object.
 
 ```SnackPlayer name=Flatten
-import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -194,7 +191,6 @@ Sets a function to use to pre-process a style property value. This is used inter
 A very common pattern is to create overlays with position absolute and zero positioning (`position: 'absolute', left: 0, right: 0, top: 0, bottom: 0`), so `absoluteFill` can be used for convenience and to reduce duplication of these repeated styles. If you want, absoluteFill can be used to create a customized entry in a StyleSheet, e.g.:
 
 ```SnackPlayer name=absoluteFill
-import React from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -319,7 +315,6 @@ export default App;
 This is defined as the width of a thin line on the platform. It can be used as the thickness of a border or division between two elements. Example:
 
 ```SnackPlayer name=hairlineWidth
-import React from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 
 const App = () => (
diff --git a/website/versioned_docs/version-0.80/switch.md b/website/versioned_docs/version-0.80/switch.md
index fcbaae7b1de..43ae6904740 100644
--- a/website/versioned_docs/version-0.80/switch.md
+++ b/website/versioned_docs/version-0.80/switch.md
@@ -1,127 +1,127 @@
----
-id: switch
-title: Switch
----
-
-Renders a boolean input.
-
-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=Switch&supportedPlatforms=android,ios
-import React, {useState} from 'react';
-import {Switch, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [isEnabled, setIsEnabled] = useState(false);
-  const toggleSwitch = () => setIsEnabled(previousState => !previousState);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Switch
-          trackColor={{false: '#767577', true: '#81b0ff'}}
-          thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
-          ios_backgroundColor="#3e3e3e"
-          onValueChange={toggleSwitch}
-          value={isEnabled}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Props
-
-### [View Props](view.md#props)
-
-Inherits [View Props](view.md#props).
-
----
-
-### `disabled`
-
-If true the user won't be able to toggle the switch.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `ios_backgroundColor` <div className="label ios">iOS</div>
-
-On iOS, custom color for the background. This background color can be seen either when the switch value is `false` or when the switch is disabled (and the switch is translucent).
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `onChange`
-
-Invoked when the user tries to change the value of the switch. Receives the change event as an argument. If you want to only receive the new value, use `onValueChange` instead.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onValueChange`
-
-Invoked when the user tries to change the value of the switch. Receives the new value as an argument. If you want to instead receive an event, use `onChange`.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `thumbColor`
-
-Color of the foreground switch grip. If this is set on iOS, the switch grip will lose its drop shadow.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `trackColor`
-
-Custom colors for the switch track.
-
-_iOS_: When the switch value is `false`, the track shrinks into the border. If you want to change the color of the background exposed by the shrunken track, use [`ios_backgroundColor`](switch.md#ios_backgroundColor).
-
-| Type                                                         |
-| ------------------------------------------------------------ |
-| `md object: {false: [color](colors), true: [color](colors)}` |
-
----
-
-### `value`
-
-The value of the switch. If true the switch will be turned on. Default value is false.
-
-| Type |
-| ---- |
-| bool |
+---
+id: switch
+title: Switch
+---
+
+Renders a boolean input.
+
+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=Switch&supportedPlatforms=android,ios
+import {useState} from 'react';
+import {Switch, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [isEnabled, setIsEnabled] = useState(false);
+  const toggleSwitch = () => setIsEnabled(previousState => !previousState);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Switch
+          trackColor={{false: '#767577', true: '#81b0ff'}}
+          thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
+          ios_backgroundColor="#3e3e3e"
+          onValueChange={toggleSwitch}
+          value={isEnabled}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Props
+
+### [View Props](view.md#props)
+
+Inherits [View Props](view.md#props).
+
+---
+
+### `disabled`
+
+If true the user won't be able to toggle the switch.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `ios_backgroundColor` <div className="label ios">iOS</div>
+
+On iOS, custom color for the background. This background color can be seen either when the switch value is `false` or when the switch is disabled (and the switch is translucent).
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `onChange`
+
+Invoked when the user tries to change the value of the switch. Receives the change event as an argument. If you want to only receive the new value, use `onValueChange` instead.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onValueChange`
+
+Invoked when the user tries to change the value of the switch. Receives the new value as an argument. If you want to instead receive an event, use `onChange`.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `thumbColor`
+
+Color of the foreground switch grip. If this is set on iOS, the switch grip will lose its drop shadow.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `trackColor`
+
+Custom colors for the switch track.
+
+_iOS_: When the switch value is `false`, the track shrinks into the border. If you want to change the color of the background exposed by the shrunken track, use [`ios_backgroundColor`](switch.md#ios_backgroundColor).
+
+| Type                                                         |
+| ------------------------------------------------------------ |
+| `md object: {false: [color](colors), true: [color](colors)}` |
+
+---
+
+### `value`
+
+The value of the switch. If true the switch will be turned on. Default value is false.
+
+| Type |
+| ---- |
+| bool |
diff --git a/website/versioned_docs/version-0.80/systrace.md b/website/versioned_docs/version-0.80/systrace.md
index 53cfd62c7a9..9aa54fe8e18 100644
--- a/website/versioned_docs/version-0.80/systrace.md
+++ b/website/versioned_docs/version-0.80/systrace.md
@@ -10,7 +10,6 @@ title: Systrace
 `Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Capture the non-Timed JS events in EasyProfiler.
 
 ```SnackPlayer name=Systrace%20Example
-import React from 'react';
 import {Button, Text, View, StyleSheet, Systrace} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.80/text-style-props.md b/website/versioned_docs/version-0.80/text-style-props.md
index 28fb5b36c76..501d8b6df08 100644
--- a/website/versioned_docs/version-0.80/text-style-props.md
+++ b/website/versioned_docs/version-0.80/text-style-props.md
@@ -1,961 +1,961 @@
----
-id: text-style-props
-title: Text Style Props
----
-
-### Example
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=js&dependencies=@react-native-community/slider
-import React, {useState} from 'react';
-import {
-  FlatList,
-  Platform,
-  ScrollView,
-  StyleSheet,
-  Switch,
-  Text,
-  TouchableWithoutFeedback,
-  View,
-} from 'react-native';
-import Slider from '@react-native-community/slider';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const fontStyles = ['normal', 'italic'];
-const fontVariants = [
-  undefined,
-  'small-caps',
-  'oldstyle-nums',
-  'lining-nums',
-  'tabular-nums',
-  'proportional-nums',
-];
-const fontWeights = [
-  'normal',
-  'bold',
-  '100',
-  '200',
-  '300',
-  '400',
-  '500',
-  '600',
-  '700',
-  '800',
-  '900',
-];
-const textAlignments = ['auto', 'left', 'right', 'center', 'justify'];
-const textDecorationLines = [
-  'none',
-  'underline',
-  'line-through',
-  'underline line-through',
-];
-const textDecorationStyles = ['solid', 'double', 'dotted', 'dashed'];
-const textTransformations = ['none', 'uppercase', 'lowercase', 'capitalize'];
-const textAlignmentsVertical = ['auto', 'top', 'bottom', 'center'];
-const writingDirections = ['auto', 'ltr', 'rtl'];
-
-const App = () => {
-  const [fontSize, setFontSize] = useState(20);
-  const [fontStyleIdx, setFontStyleIdx] = useState(0);
-  const [fontWeightIdx, setFontWeightIdx] = useState(0);
-  const [lineHeight, setLineHeight] = useState(24);
-  const [textAlignIdx, setTextAlignIdx] = useState(0);
-  const [textDecorationLineIdx, setTextDecorationLineIdx] = useState(0);
-  const [includeFontPadding, setIncludeFontPadding] = useState(false);
-  const [textVerticalAlignIdx, setTextVerticalAlignIdx] = useState(0);
-  const [fontVariantIdx, setFontVariantIdx] = useState(0);
-  const [letterSpacing, setLetterSpacing] = useState(0);
-  const [textDecorationStyleIdx, setTextDecorationStyleIdx] = useState(0);
-  const [textTransformIdx, setTextTransformIdx] = useState(0);
-  const [writingDirectionIdx, setWritingDirectionIdx] = useState(0);
-  const [textShadowRadius, setTextShadowRadius] = useState(0);
-  const [textShadowOffset, setTextShadowOffset] = useState({
-    height: 0,
-    width: 0,
-  });
-
-  const [, ...validFontVariants] = fontVariants;
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.pargraphWrapper}>
-          <Text
-            style={[
-              styles.paragraph,
-              {
-                fontSize,
-                fontStyle: fontStyles[fontStyleIdx],
-                fontWeight: fontWeights[fontWeightIdx],
-                lineHeight,
-                textAlign: textAlignments[textAlignIdx],
-                textDecorationLine: textDecorationLines[textDecorationLineIdx],
-                textTransform: textTransformations[textTransformIdx],
-                textAlignVertical: textAlignmentsVertical[textVerticalAlignIdx],
-                fontVariant:
-                  fontVariantIdx === 0
-                    ? undefined
-                    : [validFontVariants[fontVariantIdx - 1]],
-                letterSpacing,
-                includeFontPadding,
-                textDecorationStyle:
-                  textDecorationStyles[textDecorationStyleIdx],
-                writingDirection: writingDirections[writingDirectionIdx],
-                textShadowOffset,
-                textShadowRadius,
-              },
-            ]}>
-            Lorem Ipsum is simply dummy text of the printing and typesetting
-            industry. 112 Likes
-          </Text>
-        </View>
-        <ScrollView style={{padding: 12}}>
-          <View>
-            <Text>Common platform properties</Text>
-            <CustomSlider
-              label="Text Shadow Offset - Height"
-              value={textShadowOffset.height}
-              minimumValue={-40}
-              maximumValue={40}
-              handleValueChange={val =>
-                setTextShadowOffset(prev => ({...prev, height: val}))
-              }
-            />
-            <CustomSlider
-              label="Text Shadow Offset - Width"
-              value={textShadowOffset.width}
-              minimumValue={-40}
-              maximumValue={40}
-              handleValueChange={val =>
-                setTextShadowOffset(prev => ({...prev, width: val}))
-              }
-            />
-            <CustomSlider
-              label="Font Size"
-              value={fontSize}
-              maximumValue={40}
-              handleValueChange={setFontSize}
-            />
-            <CustomPicker
-              label="Font Style"
-              data={fontStyles}
-              currentIndex={fontStyleIdx}
-              onSelected={setFontStyleIdx}
-            />
-            <CustomPicker
-              label="Font Weight"
-              data={fontWeights}
-              currentIndex={fontWeightIdx}
-              onSelected={setFontWeightIdx}
-            />
-            <CustomSlider
-              label="Line Height"
-              value={lineHeight}
-              minimumValue={10}
-              maximumValue={50}
-              handleValueChange={setLineHeight}
-            />
-            <CustomPicker
-              label="Text Align"
-              data={textAlignments}
-              currentIndex={textAlignIdx}
-              onSelected={setTextAlignIdx}
-            />
-            <CustomPicker
-              label="Text Decoration Line"
-              data={textDecorationLines}
-              currentIndex={textDecorationLineIdx}
-              onSelected={setTextDecorationLineIdx}
-            />
-            <CustomSlider
-              label="Text Shadow Radius"
-              value={textShadowRadius}
-              handleValueChange={setTextShadowRadius}
-            />
-            <CustomPicker
-              label="Font Variant"
-              data={fontVariants}
-              currentIndex={fontVariantIdx}
-              onSelected={setFontVariantIdx}
-            />
-            <CustomSlider
-              label="Letter Spacing"
-              step={0.1}
-              value={letterSpacing}
-              handleValueChange={setLetterSpacing}
-            />
-            <CustomPicker
-              label="Text Transform"
-              data={textTransformations}
-              currentIndex={textTransformIdx}
-              onSelected={setTextTransformIdx}
-            />
-          </View>
-          {Platform.OS === 'android' && (
-            <View style={styles.platformContainer}>
-              <Text style={styles.platformContainerTitle}>
-                Android only properties
-              </Text>
-              <CustomPicker
-                label="Text Vertical Align"
-                data={textAlignmentsVertical}
-                currentIndex={textVerticalAlignIdx}
-                onSelected={setTextVerticalAlignIdx}
-              />
-              <CustomSwitch
-                label="Include Font Padding"
-                handleValueChange={setIncludeFontPadding}
-                value={includeFontPadding}
-              />
-            </View>
-          )}
-          {Platform.OS === 'ios' && (
-            <View style={styles.platformContainer}>
-              <Text style={styles.platformContainerTitle}>
-                iOS only properties
-              </Text>
-              <CustomPicker
-                label="Text Decoration Style"
-                data={textDecorationStyles}
-                currentIndex={textDecorationStyleIdx}
-                onSelected={setTextDecorationStyleIdx}
-              />
-              <CustomPicker
-                label="Writing Direction"
-                data={writingDirections}
-                currentIndex={writingDirectionIdx}
-                onSelected={setWritingDirectionIdx}
-              />
-            </View>
-          )}
-        </ScrollView>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const CustomSwitch = ({label, handleValueChange, value}) => {
-  return (
-    <>
-      <Text style={styles.title}>{label}</Text>
-      <View style={{alignItems: 'flex-start'}}>
-        <Switch
-          trackColor={{false: '#767577', true: '#DAA520'}}
-          thumbColor={value ? '#DAA520' : '#f4f3f4'}
-          onValueChange={handleValueChange}
-          value={value}
-        />
-      </View>
-    </>
-  );
-};
-
-const CustomSlider = ({
-  label,
-  handleValueChange,
-  step = 1,
-  minimumValue = 0,
-  maximumValue = 10,
-  value,
-}) => {
-  return (
-    <>
-      {label && (
-        <Text style={styles.title}>{`${label} (${value.toFixed(2)})`}</Text>
-      )}
-      <View style={styles.wrapperHorizontal}>
-        <Slider
-          thumbTintColor="#06bcee"
-          minimumTrackTintColor="#64d7ffbb"
-          minimumValue={minimumValue}
-          maximumValue={maximumValue}
-          step={step}
-          onValueChange={handleValueChange}
-          value={value}
-        />
-      </View>
-    </>
-  );
-};
-
-const CustomPicker = ({label, data, currentIndex, onSelected}) => {
-  return (
-    <>
-      <Text style={styles.title}>{label}</Text>
-      <View style={styles.wrapperHorizontal}>
-        <FlatList
-          bounces
-          horizontal
-          data={data}
-          keyExtractor={item => String(item)}
-          renderItem={({item, index}) => {
-            const selected = index === currentIndex;
-            return (
-              <TouchableWithoutFeedback onPress={() => onSelected(index)}>
-                <View
-                  style={[
-                    styles.itemStyleHorizontal,
-                    selected && styles.itemSelectedStyleHorizontal,
-                  ]}>
-                  <Text
-                    style={{
-                      textAlign: 'center',
-                      color: selected ? 'black' : 'grey',
-                      fontWeight: selected ? 'bold' : 'normal',
-                    }}>
-                    {item + ''}
-                  </Text>
-                </View>
-              </TouchableWithoutFeedback>
-            );
-          }}
-        />
-      </View>
-    </>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  pargraphWrapper: {
-    backgroundColor: 'black',
-  },
-  paragraph: {
-    color: '#fff',
-    textDecorationColor: 'yellow',
-    textShadowColor: 'red',
-    textShadowRadius: 1,
-    padding: 24,
-  },
-  wrapperHorizontal: {
-    justifyContent: 'center',
-    color: 'black',
-  },
-  itemStyleHorizontal: {
-    marginRight: 10,
-    height: 50,
-    padding: 8,
-    borderWidth: 1,
-    borderColor: 'grey',
-    borderRadius: 8,
-    textAlign: 'center',
-    justifyContent: 'center',
-  },
-  itemSelectedStyleHorizontal: {
-    borderWidth: 2,
-    borderColor: '#06bcee',
-  },
-  platformContainer: {
-    marginTop: 8,
-    borderTopWidth: 1,
-  },
-  platformContainerTitle: {
-    marginTop: 8,
-  },
-  title: {
-    fontWeight: 'bold',
-    marginVertical: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=tsx&dependencies=@react-native-community/slider
-import React, {useState} from 'react';
-import {
-  FlatList,
-  Platform,
-  ScrollView,
-  StyleSheet,
-  Switch,
-  Text,
-  TouchableWithoutFeedback,
-  View,
-  TextStyle,
-} from 'react-native';
-import Slider from '@react-native-community/slider';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [fontSize, setFontSize] = useState(20);
-  const [fontStyleIdx, setFontStyleIdx] = useState(0);
-  const [fontWeightIdx, setFontWeightIdx] = useState(0);
-  const [lineHeight, setLineHeight] = useState(24);
-  const [textAlignIdx, setTextAlignIdx] = useState(0);
-  const [textDecorationLineIdx, setTextDecorationLineIdx] = useState(0);
-  const [includeFontPadding, setIncludeFontPadding] = useState(false);
-  const [textVerticalAlignIdx, setTextVerticalAlignIdx] = useState(0);
-  const [fontVariantIdx, setFontVariantIdx] = useState(0);
-  const [letterSpacing, setLetterSpacing] = useState(0);
-  const [textDecorationStyleIdx, setTextDecorationStyleIdx] = useState(0);
-  const [textTransformIdx, setTextTransformIdx] = useState(0);
-  const [writingDirectionIdx, setWritingDirectionIdx] = useState(0);
-  const [textShadowRadius, setTextShadowRadius] = useState(0);
-  const [textShadowOffset, setTextShadowOffset] = useState({
-    height: 0,
-    width: 0,
-  });
-
-  const [, ...validFontVariants] = fontVariants;
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.pargraphWrapper}>
-          <Text
-            style={[
-              styles.paragraph,
-              {
-                fontSize,
-                fontStyle: fontStyles[fontStyleIdx],
-                fontWeight: fontWeights[fontWeightIdx],
-                lineHeight,
-                textAlign: textAlignments[textAlignIdx],
-                textDecorationLine: textDecorationLines[textDecorationLineIdx],
-                textTransform: textTransformations[textTransformIdx],
-                textAlignVertical: textAlignmentsVertical[textVerticalAlignIdx],
-                fontVariant:
-                  fontVariantIdx === 0
-                    ? undefined
-                    : [validFontVariants[fontVariantIdx - 1]],
-                letterSpacing,
-                includeFontPadding,
-                textDecorationStyle:
-                  textDecorationStyles[textDecorationStyleIdx],
-                writingDirection: writingDirections[writingDirectionIdx],
-                textShadowOffset,
-                textShadowRadius,
-              } as TextStyle,
-            ]}>
-            Lorem Ipsum is simply dummy text of the printing and typesetting
-            industry. 112 Likes
-          </Text>
-        </View>
-        <ScrollView style={{padding: 12}}>
-          <View>
-            <Text>Common platform properties</Text>
-            <CustomSlider
-              label="Text Shadow Offset - Height"
-              value={textShadowOffset.height}
-              minimumValue={-40}
-              maximumValue={40}
-              handleValueChange={(val: number) =>
-                setTextShadowOffset(prev => ({...prev, height: val}))
-              }
-            />
-            <CustomSlider
-              label="Text Shadow Offset - Width"
-              value={textShadowOffset.width}
-              minimumValue={-40}
-              maximumValue={40}
-              handleValueChange={(val: number) =>
-                setTextShadowOffset(prev => ({...prev, width: val}))
-              }
-            />
-            <CustomSlider
-              label="Font Size"
-              value={fontSize}
-              maximumValue={40}
-              handleValueChange={setFontSize}
-            />
-            <CustomPicker
-              label="Font Style"
-              data={fontStyles}
-              currentIndex={fontStyleIdx}
-              onSelected={setFontStyleIdx}
-            />
-            <CustomPicker
-              label="Font Weight"
-              data={fontWeights}
-              currentIndex={fontWeightIdx}
-              onSelected={setFontWeightIdx}
-            />
-            <CustomSlider
-              label="Line Height"
-              value={lineHeight}
-              minimumValue={10}
-              maximumValue={50}
-              handleValueChange={setLineHeight}
-            />
-            <CustomPicker
-              label="Text Align"
-              data={textAlignments}
-              currentIndex={textAlignIdx}
-              onSelected={setTextAlignIdx}
-            />
-            <CustomPicker
-              label="Text Decoration Line"
-              data={textDecorationLines}
-              currentIndex={textDecorationLineIdx}
-              onSelected={setTextDecorationLineIdx}
-            />
-            <CustomSlider
-              label="Text Shadow Radius"
-              value={textShadowRadius}
-              handleValueChange={setTextShadowRadius}
-            />
-            <CustomPicker
-              label="Font Variant"
-              data={fontVariants}
-              currentIndex={fontVariantIdx}
-              onSelected={setFontVariantIdx}
-            />
-            <CustomSlider
-              label="Letter Spacing"
-              step={0.1}
-              value={letterSpacing}
-              handleValueChange={setLetterSpacing}
-            />
-            <CustomPicker
-              label="Text Transform"
-              data={textTransformations}
-              currentIndex={textTransformIdx}
-              onSelected={setTextTransformIdx}
-            />
-          </View>
-          {Platform.OS === 'android' && (
-            <View style={styles.platformContainer}>
-              <Text style={styles.platformContainerTitle}>
-                Android only properties
-              </Text>
-              <CustomPicker
-                label="Text Vertical Align"
-                data={textAlignmentsVertical}
-                currentIndex={textVerticalAlignIdx}
-                onSelected={setTextVerticalAlignIdx}
-              />
-              <CustomSwitch
-                label="Include Font Padding"
-                handleValueChange={setIncludeFontPadding}
-                value={includeFontPadding}
-              />
-            </View>
-          )}
-          {Platform.OS === 'ios' && (
-            <View style={styles.platformContainer}>
-              <Text style={styles.platformContainerTitle}>
-                iOS only properties
-              </Text>
-              <CustomPicker
-                label="Text Decoration Style"
-                data={textDecorationStyles}
-                currentIndex={textDecorationStyleIdx}
-                onSelected={setTextDecorationStyleIdx}
-              />
-              <CustomPicker
-                label="Writing Direction"
-                data={writingDirections}
-                currentIndex={writingDirectionIdx}
-                onSelected={setWritingDirectionIdx}
-              />
-            </View>
-          )}
-        </ScrollView>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-type CustomSwitchProps = {
-  label: string;
-  value: boolean;
-  handleValueChange: (value: boolean) => void;
-};
-
-const CustomSwitch = ({label, handleValueChange, value}: CustomSwitchProps) => {
-  return (
-    <>
-      <Text style={styles.title}>{label}</Text>
-      <View style={{alignItems: 'flex-start'}}>
-        <Switch
-          trackColor={{false: '#767577', true: '#DAA520'}}
-          thumbColor={value ? '#DAA520' : '#f4f3f4'}
-          onValueChange={handleValueChange}
-          value={value}
-        />
-      </View>
-    </>
-  );
-};
-
-type CustomSliderProps = {
-  label: string;
-  value: number;
-  handleValueChange: (value: number) => void;
-  step?: number;
-  minimumValue?: number;
-  maximumValue?: number;
-};
-
-const CustomSlider = ({
-  label,
-  handleValueChange,
-  step = 1,
-  minimumValue = 0,
-  maximumValue = 10,
-  value,
-}: CustomSliderProps) => {
-  return (
-    <>
-      {label && (
-        <Text style={styles.title}>{`${label} (${value.toFixed(2)})`}</Text>
-      )}
-      <View style={styles.wrapperHorizontal}>
-        <Slider
-          thumbTintColor="#06bcee"
-          minimumTrackTintColor="#64d7ffbb"
-          minimumValue={minimumValue}
-          maximumValue={maximumValue}
-          step={step}
-          onValueChange={handleValueChange}
-          value={value}
-        />
-      </View>
-    </>
-  );
-};
-
-type CustomPickerProps = {
-  label: string;
-  data?: ArrayLike<any> | null;
-  currentIndex: number;
-  onSelected: (index: number) => void;
-};
-
-const CustomPicker = ({
-  label,
-  data,
-  currentIndex,
-  onSelected,
-}: CustomPickerProps) => {
-  return (
-    <>
-      <Text style={styles.title}>{label}</Text>
-      <View style={styles.wrapperHorizontal}>
-        <FlatList
-          horizontal
-          data={data}
-          keyExtractor={item => String(item)}
-          renderItem={({item, index}: {item: string; index: number}) => {
-            const selected = index === currentIndex;
-            return (
-              <TouchableWithoutFeedback onPress={() => onSelected(index)}>
-                <View
-                  style={[
-                    styles.itemStyleHorizontal,
-                    selected && styles.itemSelectedStyleHorizontal,
-                  ]}>
-                  <Text
-                    style={{
-                      textAlign: 'center',
-                      color: selected ? 'black' : 'grey',
-                      fontWeight: selected ? 'bold' : 'normal',
-                    }}>
-                    {item + ''}
-                  </Text>
-                </View>
-              </TouchableWithoutFeedback>
-            );
-          }}
-        />
-      </View>
-    </>
-  );
-};
-
-const fontStyles = ['normal', 'italic'];
-const fontVariants = [
-  undefined,
-  'small-caps',
-  'oldstyle-nums',
-  'lining-nums',
-  'tabular-nums',
-  'proportional-nums',
-];
-const fontWeights = [
-  'normal',
-  'bold',
-  '100',
-  '200',
-  '300',
-  '400',
-  '500',
-  '600',
-  '700',
-  '800',
-  '900',
-];
-const textAlignments = ['auto', 'left', 'right', 'center', 'justify'];
-const textDecorationLines = [
-  'none',
-  'underline',
-  'line-through',
-  'underline line-through',
-];
-const textDecorationStyles = ['solid', 'double', 'dotted', 'dashed'];
-const textTransformations = ['none', 'uppercase', 'lowercase', 'capitalize'];
-const textAlignmentsVertical = ['auto', 'top', 'bottom', 'center'];
-const writingDirections = ['auto', 'ltr', 'rtl'];
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  pargraphWrapper: {
-    backgroundColor: 'black',
-  },
-  paragraph: {
-    color: '#fff',
-    textDecorationColor: 'yellow',
-    textShadowColor: 'red',
-    textShadowRadius: 1,
-    padding: 24,
-  },
-  wrapperHorizontal: {
-    justifyContent: 'center',
-    color: 'black',
-  },
-  itemStyleHorizontal: {
-    marginRight: 10,
-    height: 50,
-    padding: 8,
-    borderWidth: 1,
-    borderColor: 'grey',
-    borderRadius: 8,
-    textAlign: 'center',
-    justifyContent: 'center',
-  },
-  itemSelectedStyleHorizontal: {
-    borderWidth: 2,
-    borderColor: '#06bcee',
-  },
-  platformContainer: {
-    marginTop: 8,
-    borderTopWidth: 1,
-  },
-  platformContainerTitle: {
-    marginTop: 8,
-  },
-  title: {
-    fontWeight: 'bold',
-    marginVertical: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-# Reference
-
-## Props
-
-### `color`
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `fontFamily`
-
-| Type   |
-| ------ |
-| string |
-
-The generic font families `system-ui`, `ui-sans-serif`, `ui-serif`, `ui-monospace`, and `ui-rounded` are supported on iOS.
-
----
-
-### `fontSize`
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `fontStyle`
-
-| Type                         |
-| ---------------------------- |
-| enum(`'normal'`, `'italic'`) |
-
----
-
-### `fontWeight`
-
-Specifies font weight. The values `'normal'` and `'bold'` are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen.
-
-| Type                                                                                                                  | Default    |
-| --------------------------------------------------------------------------------------------------------------------- | ---------- |
-| enum(`'normal'`, `'bold'`, `'100'`, `'200'`, `'300'`, `'400'`, `'500'`, `'600'`, `'700'`, `'800'`, `'900'`) or number | `'normal'` |
-
----
-
-### `includeFontPadding` <div className="label android">Android</div>
-
-Set to `false` to remove extra font padding intended to make space for certain ascenders / descenders. With some fonts, this padding can make text look slightly misaligned when centered vertically. For best results also set `textAlignVertical` to `center`.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `true`  |
-
----
-
-### `fontVariant`
-
-Allows you to set all the font variants for a font. Can be set by using an array of enums or a space-separated string e.g. `'small-caps common-ligatures'`.
-
-<table>
-  <thead>
-    <tr>
-      <th colspan="5">Type</th>
-      <th>Default</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td colspan="5">
-        array of enum(`'common-ligatures'`, `'contextual'`, `'discretionary-ligatures'`, `'historical-ligatures'`, `'lining-nums'`, `'no-common-ligatures'`, `'no-contextual'`, `'no-discretionary-ligatures'`, `'no-historical-ligatures'`, `'oldstyle-nums'`, `'proportional-nums'`, `'small-caps'`, `'stylistic-eight'`, `'stylistic-eighteen'`, `'stylistic-eleven'`, `'stylistic-fifteen'`, `'stylistic-five'`, `'stylistic-four'`, `'stylistic-fourteen'`, `'stylistic-nine'`, `'stylistic-nineteen'`, `'stylistic-one'`, `'stylistic-seven'`, `'stylistic-seventeen'`, `'stylistic-six'`, `'stylistic-sixteen'`, `'stylistic-ten'`, `'stylistic-thirteen'`, `'stylistic-three'`, `'stylistic-twelve'`, `'stylistic-twenty'`, `'stylistic-two'`, `'tabular-nums'`) or string
-      </td>
-      <td>`[]`</td>
-    </tr>
-  </tbody>
-</table>
-
----
-
-### `letterSpacing`
-
-Increase or decrease the spacing between characters. By default there is no extra letter spacing.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `lineHeight`
-
-Numeric value that controls the vertical spacing between lines of text within a text element. It specifies the distance between the baselines of consecutive lines of text.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `textAlign`
-
-Specifies text alignment. On Android, the value 'justify' is only supported on Oreo (8.0) or above (API level >= 26). The value will fallback to `left` on lower Android versions.
-
-| Type                                                         | Default  |
-| ------------------------------------------------------------ | -------- |
-| enum(`'auto'`, `'left'`, `'right'`, `'center'`, `'justify'`) | `'auto'` |
-
----
-
-### `textAlignVertical` <div className="label android">Android</div>
-
-An alias for `verticalAlign` style prop, if you use both properties, `verticalAlign` will take precedence over `textAlignVertical`
-
-| Type                                            | Default  |
-| ----------------------------------------------- | -------- |
-| enum(`'auto'`, `'top'`, `'bottom'`, `'center'`) | `'auto'` |
-
----
-
-### `textDecorationColor` <div className="label ios">iOS</div>
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `textDecorationLine`
-
-| Type                                                                        | Default  |
-| --------------------------------------------------------------------------- | -------- |
-| enum(`'none'`, `'underline'`, `'line-through'`, `'underline line-through'`) | `'none'` |
-
----
-
-### `textDecorationStyle` <div className="label ios">iOS</div>
-
-| Type                                                | Default   |
-| --------------------------------------------------- | --------- |
-| enum(`'solid'`, `'double'`, `'dotted'`, `'dashed'`) | `'solid'` |
-
----
-
-### `textShadowColor`
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `textShadowOffset`
-
-| Type                                        |
-| ------------------------------------------- |
-| object: `{width?: number, height?: number}` |
-
----
-
-### `textShadowRadius`
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `textTransform`
-
-| Type                                                         | Default  |
-| ------------------------------------------------------------ | -------- |
-| enum(`'none'`, `'uppercase'`, `'lowercase'`, `'capitalize'`) | `'none'` |
-
----
-
-### `verticalAlign` <div className="label android">Android</div>
-
-| Type                                            | Default  |
-| ----------------------------------------------- | -------- |
-| enum(`'auto'`, `'top'`, `'bottom'`, `'middle'`) | `'auto'` |
-
----
-
-### `writingDirection` <div className="label ios">iOS</div>
-
-| Type                             | Default  |
-| -------------------------------- | -------- |
-| enum(`'auto'`, `'ltr'`, `'rtl'`) | `'auto'` |
-
----
-
-### `userSelect`
-
-It allows the user to select text and to use the native copy and paste functionality. Has precedence over the `selectable` prop.
-
-| Type                                                     | Default |
-| -------------------------------------------------------- | ------- |
-| enum(`'auto'`, `'text'`, `'none'`, `'contain'`, `'all'`) | `none`  |
+---
+id: text-style-props
+title: Text Style Props
+---
+
+### Example
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=js&dependencies=@react-native-community/slider
+import {useState} from 'react';
+import {
+  FlatList,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Switch,
+  Text,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+import Slider from '@react-native-community/slider';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const fontStyles = ['normal', 'italic'];
+const fontVariants = [
+  undefined,
+  'small-caps',
+  'oldstyle-nums',
+  'lining-nums',
+  'tabular-nums',
+  'proportional-nums',
+];
+const fontWeights = [
+  'normal',
+  'bold',
+  '100',
+  '200',
+  '300',
+  '400',
+  '500',
+  '600',
+  '700',
+  '800',
+  '900',
+];
+const textAlignments = ['auto', 'left', 'right', 'center', 'justify'];
+const textDecorationLines = [
+  'none',
+  'underline',
+  'line-through',
+  'underline line-through',
+];
+const textDecorationStyles = ['solid', 'double', 'dotted', 'dashed'];
+const textTransformations = ['none', 'uppercase', 'lowercase', 'capitalize'];
+const textAlignmentsVertical = ['auto', 'top', 'bottom', 'center'];
+const writingDirections = ['auto', 'ltr', 'rtl'];
+
+const App = () => {
+  const [fontSize, setFontSize] = useState(20);
+  const [fontStyleIdx, setFontStyleIdx] = useState(0);
+  const [fontWeightIdx, setFontWeightIdx] = useState(0);
+  const [lineHeight, setLineHeight] = useState(24);
+  const [textAlignIdx, setTextAlignIdx] = useState(0);
+  const [textDecorationLineIdx, setTextDecorationLineIdx] = useState(0);
+  const [includeFontPadding, setIncludeFontPadding] = useState(false);
+  const [textVerticalAlignIdx, setTextVerticalAlignIdx] = useState(0);
+  const [fontVariantIdx, setFontVariantIdx] = useState(0);
+  const [letterSpacing, setLetterSpacing] = useState(0);
+  const [textDecorationStyleIdx, setTextDecorationStyleIdx] = useState(0);
+  const [textTransformIdx, setTextTransformIdx] = useState(0);
+  const [writingDirectionIdx, setWritingDirectionIdx] = useState(0);
+  const [textShadowRadius, setTextShadowRadius] = useState(0);
+  const [textShadowOffset, setTextShadowOffset] = useState({
+    height: 0,
+    width: 0,
+  });
+
+  const [, ...validFontVariants] = fontVariants;
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.pargraphWrapper}>
+          <Text
+            style={[
+              styles.paragraph,
+              {
+                fontSize,
+                fontStyle: fontStyles[fontStyleIdx],
+                fontWeight: fontWeights[fontWeightIdx],
+                lineHeight,
+                textAlign: textAlignments[textAlignIdx],
+                textDecorationLine: textDecorationLines[textDecorationLineIdx],
+                textTransform: textTransformations[textTransformIdx],
+                textAlignVertical: textAlignmentsVertical[textVerticalAlignIdx],
+                fontVariant:
+                  fontVariantIdx === 0
+                    ? undefined
+                    : [validFontVariants[fontVariantIdx - 1]],
+                letterSpacing,
+                includeFontPadding,
+                textDecorationStyle:
+                  textDecorationStyles[textDecorationStyleIdx],
+                writingDirection: writingDirections[writingDirectionIdx],
+                textShadowOffset,
+                textShadowRadius,
+              },
+            ]}>
+            Lorem Ipsum is simply dummy text of the printing and typesetting
+            industry. 112 Likes
+          </Text>
+        </View>
+        <ScrollView style={{padding: 12}}>
+          <View>
+            <Text>Common platform properties</Text>
+            <CustomSlider
+              label="Text Shadow Offset - Height"
+              value={textShadowOffset.height}
+              minimumValue={-40}
+              maximumValue={40}
+              handleValueChange={val =>
+                setTextShadowOffset(prev => ({...prev, height: val}))
+              }
+            />
+            <CustomSlider
+              label="Text Shadow Offset - Width"
+              value={textShadowOffset.width}
+              minimumValue={-40}
+              maximumValue={40}
+              handleValueChange={val =>
+                setTextShadowOffset(prev => ({...prev, width: val}))
+              }
+            />
+            <CustomSlider
+              label="Font Size"
+              value={fontSize}
+              maximumValue={40}
+              handleValueChange={setFontSize}
+            />
+            <CustomPicker
+              label="Font Style"
+              data={fontStyles}
+              currentIndex={fontStyleIdx}
+              onSelected={setFontStyleIdx}
+            />
+            <CustomPicker
+              label="Font Weight"
+              data={fontWeights}
+              currentIndex={fontWeightIdx}
+              onSelected={setFontWeightIdx}
+            />
+            <CustomSlider
+              label="Line Height"
+              value={lineHeight}
+              minimumValue={10}
+              maximumValue={50}
+              handleValueChange={setLineHeight}
+            />
+            <CustomPicker
+              label="Text Align"
+              data={textAlignments}
+              currentIndex={textAlignIdx}
+              onSelected={setTextAlignIdx}
+            />
+            <CustomPicker
+              label="Text Decoration Line"
+              data={textDecorationLines}
+              currentIndex={textDecorationLineIdx}
+              onSelected={setTextDecorationLineIdx}
+            />
+            <CustomSlider
+              label="Text Shadow Radius"
+              value={textShadowRadius}
+              handleValueChange={setTextShadowRadius}
+            />
+            <CustomPicker
+              label="Font Variant"
+              data={fontVariants}
+              currentIndex={fontVariantIdx}
+              onSelected={setFontVariantIdx}
+            />
+            <CustomSlider
+              label="Letter Spacing"
+              step={0.1}
+              value={letterSpacing}
+              handleValueChange={setLetterSpacing}
+            />
+            <CustomPicker
+              label="Text Transform"
+              data={textTransformations}
+              currentIndex={textTransformIdx}
+              onSelected={setTextTransformIdx}
+            />
+          </View>
+          {Platform.OS === 'android' && (
+            <View style={styles.platformContainer}>
+              <Text style={styles.platformContainerTitle}>
+                Android only properties
+              </Text>
+              <CustomPicker
+                label="Text Vertical Align"
+                data={textAlignmentsVertical}
+                currentIndex={textVerticalAlignIdx}
+                onSelected={setTextVerticalAlignIdx}
+              />
+              <CustomSwitch
+                label="Include Font Padding"
+                handleValueChange={setIncludeFontPadding}
+                value={includeFontPadding}
+              />
+            </View>
+          )}
+          {Platform.OS === 'ios' && (
+            <View style={styles.platformContainer}>
+              <Text style={styles.platformContainerTitle}>
+                iOS only properties
+              </Text>
+              <CustomPicker
+                label="Text Decoration Style"
+                data={textDecorationStyles}
+                currentIndex={textDecorationStyleIdx}
+                onSelected={setTextDecorationStyleIdx}
+              />
+              <CustomPicker
+                label="Writing Direction"
+                data={writingDirections}
+                currentIndex={writingDirectionIdx}
+                onSelected={setWritingDirectionIdx}
+              />
+            </View>
+          )}
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const CustomSwitch = ({label, handleValueChange, value}) => {
+  return (
+    <>
+      <Text style={styles.title}>{label}</Text>
+      <View style={{alignItems: 'flex-start'}}>
+        <Switch
+          trackColor={{false: '#767577', true: '#DAA520'}}
+          thumbColor={value ? '#DAA520' : '#f4f3f4'}
+          onValueChange={handleValueChange}
+          value={value}
+        />
+      </View>
+    </>
+  );
+};
+
+const CustomSlider = ({
+  label,
+  handleValueChange,
+  step = 1,
+  minimumValue = 0,
+  maximumValue = 10,
+  value,
+}) => {
+  return (
+    <>
+      {label && (
+        <Text style={styles.title}>{`${label} (${value.toFixed(2)})`}</Text>
+      )}
+      <View style={styles.wrapperHorizontal}>
+        <Slider
+          thumbTintColor="#06bcee"
+          minimumTrackTintColor="#64d7ffbb"
+          minimumValue={minimumValue}
+          maximumValue={maximumValue}
+          step={step}
+          onValueChange={handleValueChange}
+          value={value}
+        />
+      </View>
+    </>
+  );
+};
+
+const CustomPicker = ({label, data, currentIndex, onSelected}) => {
+  return (
+    <>
+      <Text style={styles.title}>{label}</Text>
+      <View style={styles.wrapperHorizontal}>
+        <FlatList
+          bounces
+          horizontal
+          data={data}
+          keyExtractor={item => String(item)}
+          renderItem={({item, index}) => {
+            const selected = index === currentIndex;
+            return (
+              <TouchableWithoutFeedback onPress={() => onSelected(index)}>
+                <View
+                  style={[
+                    styles.itemStyleHorizontal,
+                    selected && styles.itemSelectedStyleHorizontal,
+                  ]}>
+                  <Text
+                    style={{
+                      textAlign: 'center',
+                      color: selected ? 'black' : 'grey',
+                      fontWeight: selected ? 'bold' : 'normal',
+                    }}>
+                    {item + ''}
+                  </Text>
+                </View>
+              </TouchableWithoutFeedback>
+            );
+          }}
+        />
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  pargraphWrapper: {
+    backgroundColor: 'black',
+  },
+  paragraph: {
+    color: '#fff',
+    textDecorationColor: 'yellow',
+    textShadowColor: 'red',
+    textShadowRadius: 1,
+    padding: 24,
+  },
+  wrapperHorizontal: {
+    justifyContent: 'center',
+    color: 'black',
+  },
+  itemStyleHorizontal: {
+    marginRight: 10,
+    height: 50,
+    padding: 8,
+    borderWidth: 1,
+    borderColor: 'grey',
+    borderRadius: 8,
+    textAlign: 'center',
+    justifyContent: 'center',
+  },
+  itemSelectedStyleHorizontal: {
+    borderWidth: 2,
+    borderColor: '#06bcee',
+  },
+  platformContainer: {
+    marginTop: 8,
+    borderTopWidth: 1,
+  },
+  platformContainerTitle: {
+    marginTop: 8,
+  },
+  title: {
+    fontWeight: 'bold',
+    marginVertical: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=tsx&dependencies=@react-native-community/slider
+import {useState} from 'react';
+import {
+  FlatList,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Switch,
+  Text,
+  TouchableWithoutFeedback,
+  View,
+  TextStyle,
+} from 'react-native';
+import Slider from '@react-native-community/slider';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [fontSize, setFontSize] = useState(20);
+  const [fontStyleIdx, setFontStyleIdx] = useState(0);
+  const [fontWeightIdx, setFontWeightIdx] = useState(0);
+  const [lineHeight, setLineHeight] = useState(24);
+  const [textAlignIdx, setTextAlignIdx] = useState(0);
+  const [textDecorationLineIdx, setTextDecorationLineIdx] = useState(0);
+  const [includeFontPadding, setIncludeFontPadding] = useState(false);
+  const [textVerticalAlignIdx, setTextVerticalAlignIdx] = useState(0);
+  const [fontVariantIdx, setFontVariantIdx] = useState(0);
+  const [letterSpacing, setLetterSpacing] = useState(0);
+  const [textDecorationStyleIdx, setTextDecorationStyleIdx] = useState(0);
+  const [textTransformIdx, setTextTransformIdx] = useState(0);
+  const [writingDirectionIdx, setWritingDirectionIdx] = useState(0);
+  const [textShadowRadius, setTextShadowRadius] = useState(0);
+  const [textShadowOffset, setTextShadowOffset] = useState({
+    height: 0,
+    width: 0,
+  });
+
+  const [, ...validFontVariants] = fontVariants;
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.pargraphWrapper}>
+          <Text
+            style={[
+              styles.paragraph,
+              {
+                fontSize,
+                fontStyle: fontStyles[fontStyleIdx],
+                fontWeight: fontWeights[fontWeightIdx],
+                lineHeight,
+                textAlign: textAlignments[textAlignIdx],
+                textDecorationLine: textDecorationLines[textDecorationLineIdx],
+                textTransform: textTransformations[textTransformIdx],
+                textAlignVertical: textAlignmentsVertical[textVerticalAlignIdx],
+                fontVariant:
+                  fontVariantIdx === 0
+                    ? undefined
+                    : [validFontVariants[fontVariantIdx - 1]],
+                letterSpacing,
+                includeFontPadding,
+                textDecorationStyle:
+                  textDecorationStyles[textDecorationStyleIdx],
+                writingDirection: writingDirections[writingDirectionIdx],
+                textShadowOffset,
+                textShadowRadius,
+              } as TextStyle,
+            ]}>
+            Lorem Ipsum is simply dummy text of the printing and typesetting
+            industry. 112 Likes
+          </Text>
+        </View>
+        <ScrollView style={{padding: 12}}>
+          <View>
+            <Text>Common platform properties</Text>
+            <CustomSlider
+              label="Text Shadow Offset - Height"
+              value={textShadowOffset.height}
+              minimumValue={-40}
+              maximumValue={40}
+              handleValueChange={(val: number) =>
+                setTextShadowOffset(prev => ({...prev, height: val}))
+              }
+            />
+            <CustomSlider
+              label="Text Shadow Offset - Width"
+              value={textShadowOffset.width}
+              minimumValue={-40}
+              maximumValue={40}
+              handleValueChange={(val: number) =>
+                setTextShadowOffset(prev => ({...prev, width: val}))
+              }
+            />
+            <CustomSlider
+              label="Font Size"
+              value={fontSize}
+              maximumValue={40}
+              handleValueChange={setFontSize}
+            />
+            <CustomPicker
+              label="Font Style"
+              data={fontStyles}
+              currentIndex={fontStyleIdx}
+              onSelected={setFontStyleIdx}
+            />
+            <CustomPicker
+              label="Font Weight"
+              data={fontWeights}
+              currentIndex={fontWeightIdx}
+              onSelected={setFontWeightIdx}
+            />
+            <CustomSlider
+              label="Line Height"
+              value={lineHeight}
+              minimumValue={10}
+              maximumValue={50}
+              handleValueChange={setLineHeight}
+            />
+            <CustomPicker
+              label="Text Align"
+              data={textAlignments}
+              currentIndex={textAlignIdx}
+              onSelected={setTextAlignIdx}
+            />
+            <CustomPicker
+              label="Text Decoration Line"
+              data={textDecorationLines}
+              currentIndex={textDecorationLineIdx}
+              onSelected={setTextDecorationLineIdx}
+            />
+            <CustomSlider
+              label="Text Shadow Radius"
+              value={textShadowRadius}
+              handleValueChange={setTextShadowRadius}
+            />
+            <CustomPicker
+              label="Font Variant"
+              data={fontVariants}
+              currentIndex={fontVariantIdx}
+              onSelected={setFontVariantIdx}
+            />
+            <CustomSlider
+              label="Letter Spacing"
+              step={0.1}
+              value={letterSpacing}
+              handleValueChange={setLetterSpacing}
+            />
+            <CustomPicker
+              label="Text Transform"
+              data={textTransformations}
+              currentIndex={textTransformIdx}
+              onSelected={setTextTransformIdx}
+            />
+          </View>
+          {Platform.OS === 'android' && (
+            <View style={styles.platformContainer}>
+              <Text style={styles.platformContainerTitle}>
+                Android only properties
+              </Text>
+              <CustomPicker
+                label="Text Vertical Align"
+                data={textAlignmentsVertical}
+                currentIndex={textVerticalAlignIdx}
+                onSelected={setTextVerticalAlignIdx}
+              />
+              <CustomSwitch
+                label="Include Font Padding"
+                handleValueChange={setIncludeFontPadding}
+                value={includeFontPadding}
+              />
+            </View>
+          )}
+          {Platform.OS === 'ios' && (
+            <View style={styles.platformContainer}>
+              <Text style={styles.platformContainerTitle}>
+                iOS only properties
+              </Text>
+              <CustomPicker
+                label="Text Decoration Style"
+                data={textDecorationStyles}
+                currentIndex={textDecorationStyleIdx}
+                onSelected={setTextDecorationStyleIdx}
+              />
+              <CustomPicker
+                label="Writing Direction"
+                data={writingDirections}
+                currentIndex={writingDirectionIdx}
+                onSelected={setWritingDirectionIdx}
+              />
+            </View>
+          )}
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+type CustomSwitchProps = {
+  label: string;
+  value: boolean;
+  handleValueChange: (value: boolean) => void;
+};
+
+const CustomSwitch = ({label, handleValueChange, value}: CustomSwitchProps) => {
+  return (
+    <>
+      <Text style={styles.title}>{label}</Text>
+      <View style={{alignItems: 'flex-start'}}>
+        <Switch
+          trackColor={{false: '#767577', true: '#DAA520'}}
+          thumbColor={value ? '#DAA520' : '#f4f3f4'}
+          onValueChange={handleValueChange}
+          value={value}
+        />
+      </View>
+    </>
+  );
+};
+
+type CustomSliderProps = {
+  label: string;
+  value: number;
+  handleValueChange: (value: number) => void;
+  step?: number;
+  minimumValue?: number;
+  maximumValue?: number;
+};
+
+const CustomSlider = ({
+  label,
+  handleValueChange,
+  step = 1,
+  minimumValue = 0,
+  maximumValue = 10,
+  value,
+}: CustomSliderProps) => {
+  return (
+    <>
+      {label && (
+        <Text style={styles.title}>{`${label} (${value.toFixed(2)})`}</Text>
+      )}
+      <View style={styles.wrapperHorizontal}>
+        <Slider
+          thumbTintColor="#06bcee"
+          minimumTrackTintColor="#64d7ffbb"
+          minimumValue={minimumValue}
+          maximumValue={maximumValue}
+          step={step}
+          onValueChange={handleValueChange}
+          value={value}
+        />
+      </View>
+    </>
+  );
+};
+
+type CustomPickerProps = {
+  label: string;
+  data?: ArrayLike<any> | null;
+  currentIndex: number;
+  onSelected: (index: number) => void;
+};
+
+const CustomPicker = ({
+  label,
+  data,
+  currentIndex,
+  onSelected,
+}: CustomPickerProps) => {
+  return (
+    <>
+      <Text style={styles.title}>{label}</Text>
+      <View style={styles.wrapperHorizontal}>
+        <FlatList
+          horizontal
+          data={data}
+          keyExtractor={item => String(item)}
+          renderItem={({item, index}: {item: string; index: number}) => {
+            const selected = index === currentIndex;
+            return (
+              <TouchableWithoutFeedback onPress={() => onSelected(index)}>
+                <View
+                  style={[
+                    styles.itemStyleHorizontal,
+                    selected && styles.itemSelectedStyleHorizontal,
+                  ]}>
+                  <Text
+                    style={{
+                      textAlign: 'center',
+                      color: selected ? 'black' : 'grey',
+                      fontWeight: selected ? 'bold' : 'normal',
+                    }}>
+                    {item + ''}
+                  </Text>
+                </View>
+              </TouchableWithoutFeedback>
+            );
+          }}
+        />
+      </View>
+    </>
+  );
+};
+
+const fontStyles = ['normal', 'italic'];
+const fontVariants = [
+  undefined,
+  'small-caps',
+  'oldstyle-nums',
+  'lining-nums',
+  'tabular-nums',
+  'proportional-nums',
+];
+const fontWeights = [
+  'normal',
+  'bold',
+  '100',
+  '200',
+  '300',
+  '400',
+  '500',
+  '600',
+  '700',
+  '800',
+  '900',
+];
+const textAlignments = ['auto', 'left', 'right', 'center', 'justify'];
+const textDecorationLines = [
+  'none',
+  'underline',
+  'line-through',
+  'underline line-through',
+];
+const textDecorationStyles = ['solid', 'double', 'dotted', 'dashed'];
+const textTransformations = ['none', 'uppercase', 'lowercase', 'capitalize'];
+const textAlignmentsVertical = ['auto', 'top', 'bottom', 'center'];
+const writingDirections = ['auto', 'ltr', 'rtl'];
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  pargraphWrapper: {
+    backgroundColor: 'black',
+  },
+  paragraph: {
+    color: '#fff',
+    textDecorationColor: 'yellow',
+    textShadowColor: 'red',
+    textShadowRadius: 1,
+    padding: 24,
+  },
+  wrapperHorizontal: {
+    justifyContent: 'center',
+    color: 'black',
+  },
+  itemStyleHorizontal: {
+    marginRight: 10,
+    height: 50,
+    padding: 8,
+    borderWidth: 1,
+    borderColor: 'grey',
+    borderRadius: 8,
+    textAlign: 'center',
+    justifyContent: 'center',
+  },
+  itemSelectedStyleHorizontal: {
+    borderWidth: 2,
+    borderColor: '#06bcee',
+  },
+  platformContainer: {
+    marginTop: 8,
+    borderTopWidth: 1,
+  },
+  platformContainerTitle: {
+    marginTop: 8,
+  },
+  title: {
+    fontWeight: 'bold',
+    marginVertical: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+# Reference
+
+## Props
+
+### `color`
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `fontFamily`
+
+| Type   |
+| ------ |
+| string |
+
+The generic font families `system-ui`, `ui-sans-serif`, `ui-serif`, `ui-monospace`, and `ui-rounded` are supported on iOS.
+
+---
+
+### `fontSize`
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `fontStyle`
+
+| Type                         |
+| ---------------------------- |
+| enum(`'normal'`, `'italic'`) |
+
+---
+
+### `fontWeight`
+
+Specifies font weight. The values `'normal'` and `'bold'` are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen.
+
+| Type                                                                                                                  | Default    |
+| --------------------------------------------------------------------------------------------------------------------- | ---------- |
+| enum(`'normal'`, `'bold'`, `'100'`, `'200'`, `'300'`, `'400'`, `'500'`, `'600'`, `'700'`, `'800'`, `'900'`) or number | `'normal'` |
+
+---
+
+### `includeFontPadding` <div className="label android">Android</div>
+
+Set to `false` to remove extra font padding intended to make space for certain ascenders / descenders. With some fonts, this padding can make text look slightly misaligned when centered vertically. For best results also set `textAlignVertical` to `center`.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `true`  |
+
+---
+
+### `fontVariant`
+
+Allows you to set all the font variants for a font. Can be set by using an array of enums or a space-separated string e.g. `'small-caps common-ligatures'`.
+
+<table>
+  <thead>
+    <tr>
+      <th colspan="5">Type</th>
+      <th>Default</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="5">
+        array of enum(`'common-ligatures'`, `'contextual'`, `'discretionary-ligatures'`, `'historical-ligatures'`, `'lining-nums'`, `'no-common-ligatures'`, `'no-contextual'`, `'no-discretionary-ligatures'`, `'no-historical-ligatures'`, `'oldstyle-nums'`, `'proportional-nums'`, `'small-caps'`, `'stylistic-eight'`, `'stylistic-eighteen'`, `'stylistic-eleven'`, `'stylistic-fifteen'`, `'stylistic-five'`, `'stylistic-four'`, `'stylistic-fourteen'`, `'stylistic-nine'`, `'stylistic-nineteen'`, `'stylistic-one'`, `'stylistic-seven'`, `'stylistic-seventeen'`, `'stylistic-six'`, `'stylistic-sixteen'`, `'stylistic-ten'`, `'stylistic-thirteen'`, `'stylistic-three'`, `'stylistic-twelve'`, `'stylistic-twenty'`, `'stylistic-two'`, `'tabular-nums'`) or string
+      </td>
+      <td>`[]`</td>
+    </tr>
+  </tbody>
+</table>
+
+---
+
+### `letterSpacing`
+
+Increase or decrease the spacing between characters. By default there is no extra letter spacing.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `lineHeight`
+
+Numeric value that controls the vertical spacing between lines of text within a text element. It specifies the distance between the baselines of consecutive lines of text.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `textAlign`
+
+Specifies text alignment. On Android, the value 'justify' is only supported on Oreo (8.0) or above (API level >= 26). The value will fallback to `left` on lower Android versions.
+
+| Type                                                         | Default  |
+| ------------------------------------------------------------ | -------- |
+| enum(`'auto'`, `'left'`, `'right'`, `'center'`, `'justify'`) | `'auto'` |
+
+---
+
+### `textAlignVertical` <div className="label android">Android</div>
+
+An alias for `verticalAlign` style prop, if you use both properties, `verticalAlign` will take precedence over `textAlignVertical`
+
+| Type                                            | Default  |
+| ----------------------------------------------- | -------- |
+| enum(`'auto'`, `'top'`, `'bottom'`, `'center'`) | `'auto'` |
+
+---
+
+### `textDecorationColor` <div className="label ios">iOS</div>
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `textDecorationLine`
+
+| Type                                                                        | Default  |
+| --------------------------------------------------------------------------- | -------- |
+| enum(`'none'`, `'underline'`, `'line-through'`, `'underline line-through'`) | `'none'` |
+
+---
+
+### `textDecorationStyle` <div className="label ios">iOS</div>
+
+| Type                                                | Default   |
+| --------------------------------------------------- | --------- |
+| enum(`'solid'`, `'double'`, `'dotted'`, `'dashed'`) | `'solid'` |
+
+---
+
+### `textShadowColor`
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `textShadowOffset`
+
+| Type                                        |
+| ------------------------------------------- |
+| object: `{width?: number, height?: number}` |
+
+---
+
+### `textShadowRadius`
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `textTransform`
+
+| Type                                                         | Default  |
+| ------------------------------------------------------------ | -------- |
+| enum(`'none'`, `'uppercase'`, `'lowercase'`, `'capitalize'`) | `'none'` |
+
+---
+
+### `verticalAlign` <div className="label android">Android</div>
+
+| Type                                            | Default  |
+| ----------------------------------------------- | -------- |
+| enum(`'auto'`, `'top'`, `'bottom'`, `'middle'`) | `'auto'` |
+
+---
+
+### `writingDirection` <div className="label ios">iOS</div>
+
+| Type                             | Default  |
+| -------------------------------- | -------- |
+| enum(`'auto'`, `'ltr'`, `'rtl'`) | `'auto'` |
+
+---
+
+### `userSelect`
+
+It allows the user to select text and to use the native copy and paste functionality. Has precedence over the `selectable` prop.
+
+| Type                                                     | Default |
+| -------------------------------------------------------- | ------- |
+| enum(`'auto'`, `'text'`, `'none'`, `'contain'`, `'all'`) | `none`  |
diff --git a/website/versioned_docs/version-0.80/text.md b/website/versioned_docs/version-0.80/text.md
index 45fdd2bb8a6..29bf33e79cf 100644
--- a/website/versioned_docs/version-0.80/text.md
+++ b/website/versioned_docs/version-0.80/text.md
@@ -1,771 +1,770 @@
----
-id: text
-title: Text
----
-
-A React component for displaying text.
-
-`Text` supports nesting, styling, and touch handling.
-
-In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines:
-
-```SnackPlayer name=Text%20Function%20Component%20Example
-import React, {useState} from 'react';
-import {Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const TextInANest = () => {
-  const [titleText, setTitleText] = useState("Bird's Nest");
-  const bodyText = 'This is not really a bird nest.';
-
-  const onPressTitle = () => {
-    setTitleText("Bird's Nest [pressed]");
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.baseText}>
-          <Text style={styles.titleText} onPress={onPressTitle}>
-            {titleText}
-            {'\n'}
-            {'\n'}
-          </Text>
-          <Text numberOfLines={5}>{bodyText}</Text>
-        </Text>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  baseText: {
-    fontFamily: 'Cochin',
-  },
-  titleText: {
-    fontSize: 20,
-    fontWeight: 'bold',
-  },
-});
-
-export default TextInANest;
-```
-
-## Nested text
-
-Both Android and iOS allow you to display formatted text by annotating ranges of a string with specific formatting like bold or colored text (`NSAttributedString` on iOS, `SpannableString` on Android). In practice, this is very tedious. For React Native, we decided to use the web paradigm for this, where you can nest text to achieve the same effect.
-
-```SnackPlayer name=Nested%20Text%20Example
-import React from 'react';
-import {Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const BoldAndBeautiful = () => (
-  <SafeAreaProvider>
-    <SafeAreaView style={styles.container}>
-      <Text style={styles.baseText}>
-        I am bold
-        <Text style={styles.innerText}> and red</Text>
-      </Text>
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  baseText: {
-    fontWeight: 'bold',
-  },
-  innerText: {
-    color: 'red',
-  },
-});
-
-export default BoldAndBeautiful;
-```
-
-Behind the scenes, React Native converts this to a flat `NSAttributedString` or `SpannableString` that contains the following information:
-
-```
-"I am bold and red"
-0-9: bold
-9-17: bold, red
-```
-
-## 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.
-
-```tsx
-<Text>
-  <Text>First part and </Text>
-  <Text>second part</Text>
-</Text>
-// Text container: the text will be inline, if the space allows it
-// |First part and second part|
-
-// otherwise, the text will flow as if it was one
-// |First part |
-// |and second |
-// |part       |
-
-<View>
-  <Text>First part and </Text>
-  <Text>second part</Text>
-</View>
-// View container: each text is its own block
-// |First part and|
-// |second part   |
-
-// otherwise, the text will flow in its own block
-// |First part |
-// |and        |
-// |second part|
-```
-
-## Limited Style Inheritance
-
-On the web, the usual way to set a font family and size for the entire document is to take advantage of inherited CSS properties like so:
-
-```css
-html {
-  font-family:
-    'lucida grande', tahoma, verdana, arial, sans-serif;
-  font-size: 11px;
-  color: #141823;
-}
-```
-
-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>`.
-
-```tsx
-// BAD: will raise exception, can't have a text node as child of a <View>
-<View>
-  Some text
-</View>
-
-// GOOD
-<View>
-  <Text>
-    Some text
-  </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.
-
-```tsx
-<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:
-
-```tsx
-const MyAppHeaderText = ({children}) => {
-  return (
-    <MyAppText>
-      <Text style={{fontSize: 20}}>{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.
-
-```tsx
-<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:
-
-- (Developer) React components are designed with strong isolation in mind: You should be able to drop a component anywhere in your application, trusting that as long as the props are the same, it will look and behave the same way. Text properties that could inherit from outside of the props would break this isolation.
-
-- (Implementor) The implementation of React Native is also simplified. We do not need to have a `fontFamily` field on every single element, and we do not need to potentially traverse the tree up to the root every time we display a text node. The style inheritance is only encoded inside of the native Text component and doesn't leak to other components or the system itself.
-
----
-
-# Reference
-
-## Props
-
-### `accessibilityHint`
-
-An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityLanguage` <div className="label ios">iOS</div>
-
-A value indicating which language should be used by the screen reader when the user interacts with the element. It should follow the [BCP 47 specification](https://www.rfc-editor.org/info/bcp47).
-
-See the [iOS `accessibilityLanguage` doc](https://developer.apple.com/documentation/objectivec/nsobject/1615192-accessibilitylanguage) for more information.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityLabel`
-
-Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the `Text` nodes separated by space.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityRole`
-
-Tells the screen reader to treat the currently focused on element as having a specific role.
-
-On iOS, these roles map to corresponding Accessibility Traits. Image button has the same functionality as if the trait was set to both 'image' and 'button'. See the [Accessibility guide](accessibility.md#accessibilitytraits-ios) for more information.
-
-On Android, these roles have similar functionality on TalkBack as adding Accessibility Traits does on Voiceover in iOS
-
-| Type                                                 |
-| ---------------------------------------------------- |
-| [AccessibilityRole](accessibility#accessibilityrole) |
-
----
-
-### `accessibilityState`
-
-Tells the screen reader to treat the currently focused on element as being in a specific state.
-
-You can provide one state, no state, or multiple states. The states must be passed in through an object, e.g. `{selected: true, disabled: true}`.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| [AccessibilityState](accessibility#accessibilitystate) |
-
----
-
-### `accessibilityActions`
-
-Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The `accessibilityActions` property should contain a list of action objects. Each action object should contain the field name and label.
-
-See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
-
-| Type  | Required |
-| ----- | -------- |
-| array | No       |
-
----
-
-### `onAccessibilityAction`
-
-Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.
-
-See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
-
-| Type     | Required |
-| -------- | -------- |
-| function | No       |
-
----
-
-### `accessible`
-
-When set to `true`, indicates that the view is an accessibility element.
-
-See the [Accessibility guide](accessibility#accessible-ios-android) for more information.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `true`  |
-
----
-
-### `adjustsFontSizeToFit`
-
-Specifies whether fonts should be scaled down automatically to fit given style constraints.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
----
-
-### `allowFontScaling`
-
-Specifies whether fonts should scale to respect Text Size accessibility settings.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `true`  |
-
----
-
-### `android_hyphenationFrequency` <div className="label android">Android</div>
-
-Sets the frequency of automatic hyphenation to use when determining word breaks on Android API Level 23+.
-
-| Type                                | Default  |
-| ----------------------------------- | -------- |
-| enum(`'none'`, `'normal'`,`'full'`) | `'none'` |
-
----
-
-### `aria-busy`
-
-Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-checked`
-
-Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
-| Type             | Default |
-| ---------------- | ------- |
-| boolean, 'mixed' | false   |
-
----
-
-### `aria-disabled`
-
-Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-expanded`
-
-Indicates whether an expandable element is currently expanded or collapsed.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-label`
-
-Defines a string value that labels an interactive element.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `aria-selected`
-
-Indicates whether a selectable element is currently selected or not.
-
-| Type    |
-| ------- |
-| boolean |
-
-### `dataDetectorType` <div className="label android">Android</div>
-
-Determines the types of data converted to clickable URLs in the text element. By default, no data types are detected.
-
-You can provide only one type.
-
-| Type                                                          | Default  |
-| ------------------------------------------------------------- | -------- |
-| enum(`'phoneNumber'`, `'link'`, `'email'`, `'none'`, `'all'`) | `'none'` |
-
----
-
-### `disabled` <div className="label android">Android</div>
-
-Specifies the disabled state of the text view for testing purposes.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `dynamicTypeRamp` <div className="label ios">iOS</div>
-
-The [Dynamic Type](https://developer.apple.com/documentation/uikit/uifont/scaling_fonts_automatically) ramp to apply to this element on iOS.
-
-| Type                                                                                                                                                     | Default  |
-| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
-| enum(`'caption2'`, `'caption1'`, `'footnote'`, `'subheadline'`, `'callout'`, `'body'`, `'headline'`, `'title3'`, `'title2'`, `'title1'`, `'largeTitle'`) | `'body'` |
-
----
-
-### `ellipsizeMode`
-
-When `numberOfLines` is set, this prop defines how the text will be truncated. `numberOfLines` must be set in conjunction with this prop.
-
-This can be one of the following values:
-
-- `head` - The line is displayed so that the end fits in the container and the missing text at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz"
-- `middle` - The line is displayed so that the beginning and end fit in the container and the missing text in the middle is indicated by an ellipsis glyph. "ab...yz"
-- `tail` - The line is displayed so that the beginning fits in the container and the missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..."
-- `clip` - Lines are not drawn past the edge of the text container.
-
-> On Android, when `numberOfLines` is set to a value higher than `1`, only `tail` value will work correctly.
-
-| Type                                           | Default |
-| ---------------------------------------------- | ------- |
-| enum(`'head'`, `'middle'`, `'tail'`, `'clip'`) | `tail`  |
-
----
-
-### `id`
-
-Used to locate this view from native code. Has precedence over `nativeID` prop.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `maxFontSizeMultiplier`
-
-Specifies the largest possible scale a font can reach when `allowFontScaling` is enabled. Possible values:
-
-- `null/undefined`: inherit from the parent node or the global default (0)
-- `0`: no max, ignore parent/global default
-- `>= 1`: sets the `maxFontSizeMultiplier` of this node to this value
-
-| Type   | Default     |
-| ------ | ----------- |
-| number | `undefined` |
-
----
-
-### `minimumFontScale`
-
-Specifies the smallest possible scale a font can reach when `adjustsFontSizeToFit` is enabled. (values 0.01-1.0).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nativeID`
-
-Used to locate this view from native code.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `numberOfLines`
-
-Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. Setting this property to `0` will result in unsetting this value, which means that no lines restriction will be applied.
-
-This prop is commonly used with `ellipsizeMode`.
-
-| Type   | Default |
-| ------ | ------- |
-| number | `0`     |
-
----
-
-### `onLayout`
-
-Invoked on mount and on layout changes.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
-
----
-
-### `onLongPress`
-
-This function is called on long press.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onMoveShouldSetResponder`
-
-Does this view want to "claim" touch responsiveness? This is called for every touch move on the `View` when it is not the responder.
-
-| Type                                                      |
-| --------------------------------------------------------- |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
-
----
-
-### `onPress`
-
-Function called on user press, triggered after `onPressOut`.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onPressIn`
-
-Called immediately when a touch is engaged, before `onPressOut` and `onPress`.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onPressOut`
-
-Called when a touch is released.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onResponderGrant`
-
-The View is now responding to touch events. This is the time to highlight and show the user what is happening.
-
-On Android, return true from this callback to prevent any other native components from becoming responder until this responder terminates.
-
-| Type                                                              |
-| ----------------------------------------------------------------- |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void ｜ boolean` |
-
----
-
-### `onResponderMove`
-
-The user is moving their finger.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onResponderRelease`
-
-Fired at the end of the touch.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onResponderTerminate`
-
-The responder has been taken from the `View`. Might be taken by other views after a call to `onResponderTerminationRequest`, or might be taken by the OS without asking (e.g., happens with control center/ notification center on iOS)
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onResponderTerminationRequest`
-
-Some other `View` wants to become a responder and is asking this `View` to release its responder. Returning `true` allows its release.
-
-| Type                                                      |
-| --------------------------------------------------------- |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
-
----
-
-### `onStartShouldSetResponderCapture`
-
-If a parent `View` wants to prevent a child `View` from becoming a responder on a touch start, it should have this handler which returns `true`.
-
-| Type                                                      |
-| --------------------------------------------------------- |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
-
----
-
-### `onTextLayout`
-
-Invoked on Text layout change.
-
-| Type                                                 |
-| ---------------------------------------------------- |
-| ([`TextLayoutEvent`](text#textlayoutevent)) => mixed |
-
----
-
-### `pressRetentionOffset`
-
-When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations.
-
-| Type                 |
-| -------------------- |
-| [Rect](rect), number |
-
----
-
-### `role`
-
-`role` communicates the purpose of a component to the user of an assistive technology. Has precedence over the [`accessibilityRole`](text#accessibilityrole) prop.
-
-| Type                       |
-| -------------------------- |
-| [Role](accessibility#role) |
-
----
-
-### `selectable`
-
-Lets the user select text, to use the native copy and paste functionality.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
----
-
-### `selectionColor` <div className="label android">Android</div>
-
-The highlight color of the text.
-
-| Type            |
-| --------------- |
-| [color](colors) |
-
----
-
-### `style`
-
-| Type                                                                 |
-| -------------------------------------------------------------------- |
-| [Text Style](text-style-props), [View Style Props](view-style-props) |
-
----
-
-### `suppressHighlighting` <div className="label ios">iOS</div>
-
-When `true`, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
----
-
-### `testID`
-
-Used to locate this view in end-to-end tests.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `textBreakStrategy` <div className="label android">Android</div>
-
-Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced`.
-
-| Type                                            | Default       |
-| ----------------------------------------------- | ------------- |
-| enum(`'simple'`, `'highQuality'`, `'balanced'`) | `highQuality` |
-
----
-
-### `lineBreakStrategyIOS` <div className="label ios">iOS</div>
-
-Set line break strategy on iOS 14+. Possible values are `none`, `standard`, `hangul-word` and `push-out`.
-
-| Type                                                        | Default  |
-| ----------------------------------------------------------- | -------- |
-| enum(`'none'`, `'standard'`, `'hangul-word'`, `'push-out'`) | `'none'` |
-
-## Type Definitions
-
-### TextLayout
-
-`TextLayout` object is a part of [`TextLayoutEvent`](text#textlayoutevent) callback and contains the measurement data for `Text` line.
-
-#### Example
-
-```js
-{
-    capHeight: 10.496,
-    ascender: 14.624,
-    descender: 4,
-    width: 28.224,
-    height: 18.624,
-    xHeight: 6.048,
-    x: 0,
-    y: 0
-}
-```
-
-#### Properties
-
-| Name      | Type   | Optional | Description                                                         |
-| --------- | ------ | -------- | ------------------------------------------------------------------- |
-| ascender  | number | No       | The line ascender height after the text layout changes.             |
-| capHeight | number | No       | Height of capital letter above the baseline.                        |
-| descender | number | No       | The line descender height after the text layout changes.            |
-| height    | number | No       | Height of the line after the text layout changes.                   |
-| width     | number | No       | Width of the line after the text layout changes.                    |
-| x         | number | No       | Line X coordinate inside the Text component.                        |
-| xHeight   | number | No       | Distance between the baseline and median of the line (corpus size). |
-| y         | number | No       | Line Y coordinate inside the Text component.                        |
-
-### TextLayoutEvent
-
-`TextLayoutEvent` object is returned in the callback as a result of a component layout change. It contains a key called `lines` with a value which is an array containing [`TextLayout`](text#textlayout) object corresponded to every rendered text line.
-
-#### Example
-
-```js
-{
-  lines: [
-    TextLayout,
-    TextLayout,
-    // ...
-  ];
-  target: 1127;
-}
-```
-
-#### Properties
-
-| Name   | Type                                    | Optional | Description                                           |
-| ------ | --------------------------------------- | -------- | ----------------------------------------------------- |
-| lines  | array of [TextLayout](text#textlayout)s | No       | Provides the TextLayout data for every rendered line. |
-| target | number                                  | No       | The node id of the element.                           |
+---
+id: text
+title: Text
+---
+
+A React component for displaying text.
+
+`Text` supports nesting, styling, and touch handling.
+
+In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines:
+
+```SnackPlayer name=Text%20Function%20Component%20Example
+import {useState} from 'react';
+import {Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const TextInANest = () => {
+  const [titleText, setTitleText] = useState("Bird's Nest");
+  const bodyText = 'This is not really a bird nest.';
+
+  const onPressTitle = () => {
+    setTitleText("Bird's Nest [pressed]");
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.baseText}>
+          <Text style={styles.titleText} onPress={onPressTitle}>
+            {titleText}
+            {'\n'}
+            {'\n'}
+          </Text>
+          <Text numberOfLines={5}>{bodyText}</Text>
+        </Text>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  baseText: {
+    fontFamily: 'Cochin',
+  },
+  titleText: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+});
+
+export default TextInANest;
+```
+
+## Nested text
+
+Both Android and iOS allow you to display formatted text by annotating ranges of a string with specific formatting like bold or colored text (`NSAttributedString` on iOS, `SpannableString` on Android). In practice, this is very tedious. For React Native, we decided to use the web paradigm for this, where you can nest text to achieve the same effect.
+
+```SnackPlayer name=Nested%20Text%20Example
+import {Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const BoldAndBeautiful = () => (
+  <SafeAreaProvider>
+    <SafeAreaView style={styles.container}>
+      <Text style={styles.baseText}>
+        I am bold
+        <Text style={styles.innerText}> and red</Text>
+      </Text>
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  baseText: {
+    fontWeight: 'bold',
+  },
+  innerText: {
+    color: 'red',
+  },
+});
+
+export default BoldAndBeautiful;
+```
+
+Behind the scenes, React Native converts this to a flat `NSAttributedString` or `SpannableString` that contains the following information:
+
+```
+"I am bold and red"
+0-9: bold
+9-17: bold, red
+```
+
+## 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.
+
+```tsx
+<Text>
+  <Text>First part and </Text>
+  <Text>second part</Text>
+</Text>
+// Text container: the text will be inline, if the space allows it
+// |First part and second part|
+
+// otherwise, the text will flow as if it was one
+// |First part |
+// |and second |
+// |part       |
+
+<View>
+  <Text>First part and </Text>
+  <Text>second part</Text>
+</View>
+// View container: each text is its own block
+// |First part and|
+// |second part   |
+
+// otherwise, the text will flow in its own block
+// |First part |
+// |and        |
+// |second part|
+```
+
+## Limited Style Inheritance
+
+On the web, the usual way to set a font family and size for the entire document is to take advantage of inherited CSS properties like so:
+
+```css
+html {
+  font-family:
+    'lucida grande', tahoma, verdana, arial, sans-serif;
+  font-size: 11px;
+  color: #141823;
+}
+```
+
+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>`.
+
+```tsx
+// BAD: will raise exception, can't have a text node as child of a <View>
+<View>
+  Some text
+</View>
+
+// GOOD
+<View>
+  <Text>
+    Some text
+  </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.
+
+```tsx
+<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:
+
+```tsx
+const MyAppHeaderText = ({children}) => {
+  return (
+    <MyAppText>
+      <Text style={{fontSize: 20}}>{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.
+
+```tsx
+<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:
+
+- (Developer) React components are designed with strong isolation in mind: You should be able to drop a component anywhere in your application, trusting that as long as the props are the same, it will look and behave the same way. Text properties that could inherit from outside of the props would break this isolation.
+
+- (Implementor) The implementation of React Native is also simplified. We do not need to have a `fontFamily` field on every single element, and we do not need to potentially traverse the tree up to the root every time we display a text node. The style inheritance is only encoded inside of the native Text component and doesn't leak to other components or the system itself.
+
+---
+
+# Reference
+
+## Props
+
+### `accessibilityHint`
+
+An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityLanguage` <div className="label ios">iOS</div>
+
+A value indicating which language should be used by the screen reader when the user interacts with the element. It should follow the [BCP 47 specification](https://www.rfc-editor.org/info/bcp47).
+
+See the [iOS `accessibilityLanguage` doc](https://developer.apple.com/documentation/objectivec/nsobject/1615192-accessibilitylanguage) for more information.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityLabel`
+
+Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the `Text` nodes separated by space.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityRole`
+
+Tells the screen reader to treat the currently focused on element as having a specific role.
+
+On iOS, these roles map to corresponding Accessibility Traits. Image button has the same functionality as if the trait was set to both 'image' and 'button'. See the [Accessibility guide](accessibility.md#accessibilitytraits-ios) for more information.
+
+On Android, these roles have similar functionality on TalkBack as adding Accessibility Traits does on Voiceover in iOS
+
+| Type                                                 |
+| ---------------------------------------------------- |
+| [AccessibilityRole](accessibility#accessibilityrole) |
+
+---
+
+### `accessibilityState`
+
+Tells the screen reader to treat the currently focused on element as being in a specific state.
+
+You can provide one state, no state, or multiple states. The states must be passed in through an object, e.g. `{selected: true, disabled: true}`.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| [AccessibilityState](accessibility#accessibilitystate) |
+
+---
+
+### `accessibilityActions`
+
+Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The `accessibilityActions` property should contain a list of action objects. Each action object should contain the field name and label.
+
+See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
+
+| Type  | Required |
+| ----- | -------- |
+| array | No       |
+
+---
+
+### `onAccessibilityAction`
+
+Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.
+
+See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `accessible`
+
+When set to `true`, indicates that the view is an accessibility element.
+
+See the [Accessibility guide](accessibility#accessible-ios-android) for more information.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `true`  |
+
+---
+
+### `adjustsFontSizeToFit`
+
+Specifies whether fonts should be scaled down automatically to fit given style constraints.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+---
+
+### `allowFontScaling`
+
+Specifies whether fonts should scale to respect Text Size accessibility settings.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `true`  |
+
+---
+
+### `android_hyphenationFrequency` <div className="label android">Android</div>
+
+Sets the frequency of automatic hyphenation to use when determining word breaks on Android API Level 23+.
+
+| Type                                | Default  |
+| ----------------------------------- | -------- |
+| enum(`'none'`, `'normal'`,`'full'`) | `'none'` |
+
+---
+
+### `aria-busy`
+
+Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-checked`
+
+Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
+
+| Type             | Default |
+| ---------------- | ------- |
+| boolean, 'mixed' | false   |
+
+---
+
+### `aria-disabled`
+
+Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-expanded`
+
+Indicates whether an expandable element is currently expanded or collapsed.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-label`
+
+Defines a string value that labels an interactive element.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `aria-selected`
+
+Indicates whether a selectable element is currently selected or not.
+
+| Type    |
+| ------- |
+| boolean |
+
+### `dataDetectorType` <div className="label android">Android</div>
+
+Determines the types of data converted to clickable URLs in the text element. By default, no data types are detected.
+
+You can provide only one type.
+
+| Type                                                          | Default  |
+| ------------------------------------------------------------- | -------- |
+| enum(`'phoneNumber'`, `'link'`, `'email'`, `'none'`, `'all'`) | `'none'` |
+
+---
+
+### `disabled` <div className="label android">Android</div>
+
+Specifies the disabled state of the text view for testing purposes.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `dynamicTypeRamp` <div className="label ios">iOS</div>
+
+The [Dynamic Type](https://developer.apple.com/documentation/uikit/uifont/scaling_fonts_automatically) ramp to apply to this element on iOS.
+
+| Type                                                                                                                                                     | Default  |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
+| enum(`'caption2'`, `'caption1'`, `'footnote'`, `'subheadline'`, `'callout'`, `'body'`, `'headline'`, `'title3'`, `'title2'`, `'title1'`, `'largeTitle'`) | `'body'` |
+
+---
+
+### `ellipsizeMode`
+
+When `numberOfLines` is set, this prop defines how the text will be truncated. `numberOfLines` must be set in conjunction with this prop.
+
+This can be one of the following values:
+
+- `head` - The line is displayed so that the end fits in the container and the missing text at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz"
+- `middle` - The line is displayed so that the beginning and end fit in the container and the missing text in the middle is indicated by an ellipsis glyph. "ab...yz"
+- `tail` - The line is displayed so that the beginning fits in the container and the missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..."
+- `clip` - Lines are not drawn past the edge of the text container.
+
+> On Android, when `numberOfLines` is set to a value higher than `1`, only `tail` value will work correctly.
+
+| Type                                           | Default |
+| ---------------------------------------------- | ------- |
+| enum(`'head'`, `'middle'`, `'tail'`, `'clip'`) | `tail`  |
+
+---
+
+### `id`
+
+Used to locate this view from native code. Has precedence over `nativeID` prop.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `maxFontSizeMultiplier`
+
+Specifies the largest possible scale a font can reach when `allowFontScaling` is enabled. Possible values:
+
+- `null/undefined`: inherit from the parent node or the global default (0)
+- `0`: no max, ignore parent/global default
+- `>= 1`: sets the `maxFontSizeMultiplier` of this node to this value
+
+| Type   | Default     |
+| ------ | ----------- |
+| number | `undefined` |
+
+---
+
+### `minimumFontScale`
+
+Specifies the smallest possible scale a font can reach when `adjustsFontSizeToFit` is enabled. (values 0.01-1.0).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nativeID`
+
+Used to locate this view from native code.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `numberOfLines`
+
+Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. Setting this property to `0` will result in unsetting this value, which means that no lines restriction will be applied.
+
+This prop is commonly used with `ellipsizeMode`.
+
+| Type   | Default |
+| ------ | ------- |
+| number | `0`     |
+
+---
+
+### `onLayout`
+
+Invoked on mount and on layout changes.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
+
+---
+
+### `onLongPress`
+
+This function is called on long press.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onMoveShouldSetResponder`
+
+Does this view want to "claim" touch responsiveness? This is called for every touch move on the `View` when it is not the responder.
+
+| Type                                                      |
+| --------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
+
+---
+
+### `onPress`
+
+Function called on user press, triggered after `onPressOut`.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onPressIn`
+
+Called immediately when a touch is engaged, before `onPressOut` and `onPress`.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onPressOut`
+
+Called when a touch is released.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onResponderGrant`
+
+The View is now responding to touch events. This is the time to highlight and show the user what is happening.
+
+On Android, return true from this callback to prevent any other native components from becoming responder until this responder terminates.
+
+| Type                                                              |
+| ----------------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void ｜ boolean` |
+
+---
+
+### `onResponderMove`
+
+The user is moving their finger.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onResponderRelease`
+
+Fired at the end of the touch.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onResponderTerminate`
+
+The responder has been taken from the `View`. Might be taken by other views after a call to `onResponderTerminationRequest`, or might be taken by the OS without asking (e.g., happens with control center/ notification center on iOS)
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onResponderTerminationRequest`
+
+Some other `View` wants to become a responder and is asking this `View` to release its responder. Returning `true` allows its release.
+
+| Type                                                      |
+| --------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
+
+---
+
+### `onStartShouldSetResponderCapture`
+
+If a parent `View` wants to prevent a child `View` from becoming a responder on a touch start, it should have this handler which returns `true`.
+
+| Type                                                      |
+| --------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
+
+---
+
+### `onTextLayout`
+
+Invoked on Text layout change.
+
+| Type                                                 |
+| ---------------------------------------------------- |
+| ([`TextLayoutEvent`](text#textlayoutevent)) => mixed |
+
+---
+
+### `pressRetentionOffset`
+
+When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations.
+
+| Type                 |
+| -------------------- |
+| [Rect](rect), number |
+
+---
+
+### `role`
+
+`role` communicates the purpose of a component to the user of an assistive technology. Has precedence over the [`accessibilityRole`](text#accessibilityrole) prop.
+
+| Type                       |
+| -------------------------- |
+| [Role](accessibility#role) |
+
+---
+
+### `selectable`
+
+Lets the user select text, to use the native copy and paste functionality.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+---
+
+### `selectionColor` <div className="label android">Android</div>
+
+The highlight color of the text.
+
+| Type            |
+| --------------- |
+| [color](colors) |
+
+---
+
+### `style`
+
+| Type                                                                 |
+| -------------------------------------------------------------------- |
+| [Text Style](text-style-props), [View Style Props](view-style-props) |
+
+---
+
+### `suppressHighlighting` <div className="label ios">iOS</div>
+
+When `true`, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+---
+
+### `testID`
+
+Used to locate this view in end-to-end tests.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `textBreakStrategy` <div className="label android">Android</div>
+
+Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced`.
+
+| Type                                            | Default       |
+| ----------------------------------------------- | ------------- |
+| enum(`'simple'`, `'highQuality'`, `'balanced'`) | `highQuality` |
+
+---
+
+### `lineBreakStrategyIOS` <div className="label ios">iOS</div>
+
+Set line break strategy on iOS 14+. Possible values are `none`, `standard`, `hangul-word` and `push-out`.
+
+| Type                                                        | Default  |
+| ----------------------------------------------------------- | -------- |
+| enum(`'none'`, `'standard'`, `'hangul-word'`, `'push-out'`) | `'none'` |
+
+## Type Definitions
+
+### TextLayout
+
+`TextLayout` object is a part of [`TextLayoutEvent`](text#textlayoutevent) callback and contains the measurement data for `Text` line.
+
+#### Example
+
+```js
+{
+    capHeight: 10.496,
+    ascender: 14.624,
+    descender: 4,
+    width: 28.224,
+    height: 18.624,
+    xHeight: 6.048,
+    x: 0,
+    y: 0
+}
+```
+
+#### Properties
+
+| Name      | Type   | Optional | Description                                                         |
+| --------- | ------ | -------- | ------------------------------------------------------------------- |
+| ascender  | number | No       | The line ascender height after the text layout changes.             |
+| capHeight | number | No       | Height of capital letter above the baseline.                        |
+| descender | number | No       | The line descender height after the text layout changes.            |
+| height    | number | No       | Height of the line after the text layout changes.                   |
+| width     | number | No       | Width of the line after the text layout changes.                    |
+| x         | number | No       | Line X coordinate inside the Text component.                        |
+| xHeight   | number | No       | Distance between the baseline and median of the line (corpus size). |
+| y         | number | No       | Line Y coordinate inside the Text component.                        |
+
+### TextLayoutEvent
+
+`TextLayoutEvent` object is returned in the callback as a result of a component layout change. It contains a key called `lines` with a value which is an array containing [`TextLayout`](text#textlayout) object corresponded to every rendered text line.
+
+#### Example
+
+```js
+{
+  lines: [
+    TextLayout,
+    TextLayout,
+    // ...
+  ];
+  target: 1127;
+}
+```
+
+#### Properties
+
+| Name   | Type                                    | Optional | Description                                           |
+| ------ | --------------------------------------- | -------- | ----------------------------------------------------- |
+| lines  | array of [TextLayout](text#textlayout)s | No       | Provides the TextLayout data for every rendered line. |
+| target | number                                  | No       | The node id of the element.                           |
diff --git a/website/versioned_docs/version-0.80/textinput.md b/website/versioned_docs/version-0.80/textinput.md
index 1086ec3d8e9..b3c88a37b31 100644
--- a/website/versioned_docs/version-0.80/textinput.md
+++ b/website/versioned_docs/version-0.80/textinput.md
@@ -1,1138 +1,1138 @@
----
-id: textinput
-title: TextInput
----
-
-A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.
-
-The most basic use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. A minimal example:
-
-```SnackPlayer name=TextInput%20Example
-import React from 'react';
-import {StyleSheet, TextInput} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const TextInputExample = () => {
-  const [text, onChangeText] = React.useState('Useless Text');
-  const [number, onChangeNumber] = React.useState('');
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView>
-        <TextInput
-          style={styles.input}
-          onChangeText={onChangeText}
-          value={text}
-        />
-        <TextInput
-          style={styles.input}
-          onChangeText={onChangeNumber}
-          value={number}
-          placeholder="useless placeholder"
-          keyboardType="numeric"
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  input: {
-    height: 40,
-    margin: 12,
-    borderWidth: 1,
-    padding: 10,
-  },
-});
-
-export default TextInputExample;
-```
-
-Two methods exposed via the native element are `.focus()` and `.blur()` that will focus or blur the TextInput programmatically.
-
-Note that some props are only available with `multiline={true/false}`. Additionally, border styles that apply to only one side of the element (e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if `multiline=true`. To achieve the same effect, you can wrap your `TextInput` in a `View`:
-
-```SnackPlayer name=Multiline%20TextInput%20Example
-import React from 'react';
-import {TextInput, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const MultilineTextInputExample = () => {
-  const [value, onChangeText] = React.useState('Useless Multiline Placeholder');
-
-  // If you type something in the text box that is a color,
-  // the background will change to that color.
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView
-        style={{
-          flex: 1,
-          backgroundColor: value.toLowerCase(),
-        }}>
-        <TextInput
-          editable
-          multiline
-          numberOfLines={4}
-          maxLength={40}
-          onChangeText={text => onChangeText(text)}
-          value={value}
-          style={styles.textInput}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  textInput: {
-    padding: 10,
-    borderColor: '#000',
-    borderWidth: 1,
-    margin: 12,
-  },
-});
-
-export default MultilineTextInputExample;
-```
-
-`TextInput` has a border at the bottom of its view by default. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this are to either not set height explicitly, in which case the system will take care of displaying the border in the correct position, or to not display the border by setting `underlineColorAndroid` to transparent.
-
-Note that on Android performing text selection in an input can change the app's activity `windowSoftInputMode` param to `adjustResize`. This may cause issues with components that have position: 'absolute' while the keyboard is active. To avoid this behavior either specify `windowSoftInputMode` in AndroidManifest.xml ( https://developer.android.com/guide/topics/manifest/activity-element.html ) or control this param programmatically with native code.
-
----
-
-# Reference
-
-## Props
-
-### [View Props](view.md#props)
-
-Inherits [View Props](view.md#props).
-
----
-
-### `allowFontScaling`
-
-Specifies whether fonts should scale to respect Text Size accessibility settings. The default is `true`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `autoCapitalize`
-
-Tells `TextInput` to automatically capitalize certain characters. This property is not supported by some keyboard types such as `name-phone-pad`.
-
-- `characters`: all characters.
-- `words`: first letter of each word.
-- `sentences`: first letter of each sentence (_default_).
-- `none`: don't auto capitalize anything.
-
-| Type                                             |
-| ------------------------------------------------ |
-| enum('none', 'sentences', 'words', 'characters') |
-
----
-
-### `autoComplete`
-
-Specifies autocomplete hints for the system, so it can provide autofill. On Android, the system will always attempt to offer autofill by using heuristics to identify the type of content. To disable autocomplete, set `autoComplete` to `off`.
-
-The following values work across platforms:
-
-- `additional-name`
-- `address-line1`
-- `address-line2`
-- `birthdate-day` (iOS 17+)
-- `birthdate-full` (iOS 17+)
-- `birthdate-month` (iOS 17+)
-- `birthdate-year` (iOS 17+)
-- `cc-csc` (iOS 17+)
-- `cc-exp` (iOS 17+)
-- `cc-exp-day` (iOS 17+)
-- `cc-exp-month` (iOS 17+)
-- `cc-exp-year` (iOS 17+)
-- `cc-number`
-- `country`
-- `current-password`
-- `email`
-- `family-name`
-- `given-name`
-- `honorific-prefix`
-- `honorific-suffix`
-- `name`
-- `new-password`
-- `off`
-- `one-time-code`
-- `postal-code`
-- `street-address`
-- `tel`
-- `username`
-
-<div className="label basic ios">iOS</div>
-
-The following values work on iOS only:
-
-- `cc-family-name` (iOS 17+)
-- `cc-given-name` (iOS 17+)
-- `cc-middle-name` (iOS 17+)
-- `cc-name` (iOS 17+)
-- `cc-type` (iOS 17+)
-- `nickname`
-- `organization`
-- `organization-title`
-- `url`
-
-<div className="label basic android">Android</div>
-
-The following values work on Android only:
-
-- `gender`
-- `name-family`
-- `name-given`
-- `name-middle`
-- `name-middle-initial`
-- `name-prefix`
-- `name-suffix`
-- `password`
-- `password-new`
-- `postal-address`
-- `postal-address-country`
-- `postal-address-extended`
-- `postal-address-extended-postal-code`
-- `postal-address-locality`
-- `postal-address-region`
-- `sms-otp`
-- `tel-country-code`
-- `tel-device`
-- `tel-national`
-- `username-new`
-
-| Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| enum('additional-name', 'address-line1', 'address-line2', 'birthdate-day', 'birthdate-full', 'birthdate-month', 'birthdate-year', 'cc-csc', 'cc-exp', 'cc-exp-day', 'cc-exp-month', 'cc-exp-year', 'cc-number', 'country', 'current-password', 'email', 'family-name', 'given-name', 'honorific-prefix', 'honorific-suffix', 'name', 'new-password', 'off', 'one-time-code', 'postal-code', 'street-address', 'tel', 'username', 'cc-family-name', 'cc-given-name', 'cc-middle-name', 'cc-name', 'cc-type', 'nickname', 'organization', 'organization-title', 'url', 'gender', 'name-family', 'name-given', 'name-middle', 'name-middle-initial', 'name-prefix', 'name-suffix', 'password', 'password-new', 'postal-address', 'postal-address-country', 'postal-address-extended', 'postal-address-extended-postal-code', 'postal-address-locality', 'postal-address-region', 'sms-otp', 'tel-country-code', 'tel-device', 'tel-national', 'username-new') |
-
----
-
-### `autoCorrect`
-
-If `false`, disables auto-correct. The default value is `true`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `autoFocus`
-
-If `true`, focuses the input. The default value is `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `blurOnSubmit`
-
-> **Deprecated.** Note that `submitBehavior` now takes the place of `blurOnSubmit` and will override any behavior defined by `blurOnSubmit`. See [submitBehavior](textinput#submitbehavior)
-
-If `true`, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting `blurOnSubmit` to `true` means that pressing return will blur the field and trigger the `onSubmitEditing` event instead of inserting a newline into the field.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `caretHidden`
-
-If `true`, caret is hidden. The default value is `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `clearButtonMode` <div className="label ios">iOS</div>
-
-When the clear button should appear on the right side of the text view. This property is supported only for single-line TextInput component. The default value is `never`.
-
-| Type                                                       |
-| ---------------------------------------------------------- |
-| enum('never', 'while-editing', 'unless-editing', 'always') |
-
----
-
-### `clearTextOnFocus` <div className="label ios">iOS</div>
-
-If `true`, clears the text field automatically when editing begins.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `contextMenuHidden`
-
-If `true`, context menu is hidden. The default value is `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `dataDetectorTypes` <div className="label ios">iOS</div>
-
-Determines the types of data converted to clickable URLs in the text input. Only valid if `multiline={true}` and `editable={false}`. By default no data types are detected.
-
-You can provide one type or an array of many types.
-
-Possible values for `dataDetectorTypes` are:
-
-- `'phoneNumber'`
-- `'link'`
-- `'address'`
-- `'calendarEvent'`
-- `'none'`
-- `'all'`
-
-| Type                                                                                                                                                     |
-| -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), ,array of enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all') |
-
----
-
-### `defaultValue`
-
-Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.
-
-| Type   |
-| ------ |
-| string |
-
-### `disableKeyboardShortcuts` <div className="label ios">iOS</div>
-
-If `true`, the keyboard shortcuts (undo/redo and copy buttons) are disabled.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `cursorColor` <div className="label android">Android</div>
-
-When provided it will set the color of the cursor (or "caret") in the component. Unlike the behavior of `selectionColor` the cursor color will be set independently from the color of the text selection box.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `disableFullscreenUI` <div className="label android">Android</div>
-
-When `false`, if there is a small amount of space available around a text input (e.g. landscape orientation on a phone), the OS may choose to have the user edit the text inside of a full screen text input mode. When `true`, this feature is disabled and users will always edit the text directly inside of the text input. Defaults to `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `editable`
-
-If `false`, text is not editable. The default value is `true`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `enablesReturnKeyAutomatically` <div className="label ios">iOS</div>
-
-If `true`, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `enterKeyHint`
-
-Determines what text should be shown to the return key. Has precedence over the `returnKeyType` prop.
-
-The following values work across platforms:
-
-- `done`
-- `next`
-- `search`
-- `send`
-- `go`
-
-_Android Only_
-
-The following values work on Android only:
-
-- `previous`
-
-_iOS Only_
-
-The following values work on iOS only:
-
-- `enter`
-
-| Type                                                              |
-| ----------------------------------------------------------------- |
-| enum('enter', 'done', 'next', 'previous', 'search', 'send', 'go') |
-
----
-
-### `importantForAutofill` <div className="label android">Android</div>
-
-Tells the operating system whether the individual fields in your app should be included in a view structure for autofill purposes on Android API Level 26+. Possible values are `auto`, `no`, `noExcludeDescendants`, `yes`, and `yesExcludeDescendants`. The default value is `auto`.
-
-- `auto`: Let the Android System use its heuristics to determine if the view is important for autofill.
-- `no`: This view isn't important for autofill.
-- `noExcludeDescendants`: This view and its children aren't important for autofill.
-- `yes`: This view is important for autofill.
-- `yesExcludeDescendants`: This view is important for autofill, but its children aren't important for autofill.
-
-| Type                                                                       |
-| -------------------------------------------------------------------------- |
-| enum('auto', 'no', 'noExcludeDescendants', 'yes', 'yesExcludeDescendants') |
-
----
-
-### `inlineImageLeft` <div className="label android">Android</div>
-
-If defined, the provided image resource will be rendered on the left. The image resource must be inside `/android/app/src/main/res/drawable` and referenced like
-
-```
-<TextInput
- inlineImageLeft='search_icon'
-/>
-```
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `inlineImagePadding` <div className="label android">Android</div>
-
-Padding between the inline image, if any, and the text input itself.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `inputAccessoryViewID` <div className="label ios">iOS</div>
-
-An optional identifier which links a custom [InputAccessoryView](inputaccessoryview.md) to this text input. The InputAccessoryView is rendered above the keyboard when this text input is focused.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `inputAccessoryViewButtonLabel` <div className="label ios">iOS</div>
-
-An optional label that overrides the default [InputAccessoryView](inputaccessoryview.md) button label.
-
-By default, the default button label is not localized. Use this property to provide a localized version.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `inputMode`
-
-Works like the `inputmode` attribute in HTML, it determines which keyboard to open, e.g. `numeric` and has precedence over `keyboardType`.
-
-Support the following values:
-
-- `none`
-- `text`
-- `decimal`
-- `numeric`
-- `tel`
-- `search`
-- `email`
-- `url`
-
-| Type                                                                        |
-| --------------------------------------------------------------------------- |
-| enum('decimal', 'email', 'none', 'numeric', 'search', 'tel', 'text', 'url') |
-
----
-
-### `keyboardAppearance` <div className="label ios">iOS</div>
-
-Determines the color of the keyboard.
-
-| Type                             |
-| -------------------------------- |
-| enum('default', 'light', 'dark') |
-
----
-
-### `keyboardType`
-
-Determines which keyboard to open, e.g.`numeric`.
-
-See screenshots of all the types [here](https://davidl.fr/blog/keyboard-react-native-ios-android#all-react-native-keyboard-type-examples-i-os-on-the-left-android-on-the-right).
-
-The following values work across platforms:
-
-- `default`
-- `number-pad`
-- `decimal-pad`
-- `numeric`
-- `email-address`
-- `phone-pad`
-- `url`
-
-_iOS Only_
-
-The following values work on iOS only:
-
-- `ascii-capable`
-- `numbers-and-punctuation`
-- `name-phone-pad`
-- `twitter`
-- `web-search`
-
-_Android Only_
-
-The following values work on Android only:
-
-- `visible-password`
-
-| Type                                                                                                                                                                                                    |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', 'visible-password') |
-
----
-
-### `lineBreakModeIOS` <div className="label ios">iOS</div>
-
-Set line break mode on iOS. Possible values are `wordWrapping`, `char`, `clip`, `head`, `middle` and `tail`.
-
-| Type                                                                       | Default          |
-| -------------------------------------------------------------------------- | ---------------- |
-| enum(`'wordWrapping'`, `'char'`, `'clip'`, `'head'`, `'middle'`, `'tail'`) | `'wordWrapping'` |
-
----
-
-### `lineBreakStrategyIOS` <div className="label ios">iOS</div>
-
-Set line break strategy on iOS 14+. Possible values are `none`, `standard`, `hangul-word` and `push-out`.
-
-| Type                                                        | Default  |
-| ----------------------------------------------------------- | -------- |
-| enum(`'none'`, `'standard'`, `'hangul-word'`, `'push-out'`) | `'none'` |
-
----
-
-### `maxFontSizeMultiplier`
-
-Specifies largest possible scale a font can reach when `allowFontScaling` is enabled. Possible values:
-
-- `null/undefined` (default): inherit from the parent node or the global default (0)
-- `0`: no max, ignore parent/global default
-- `>= 1`: sets the `maxFontSizeMultiplier` of this node to this value
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `maxLength`
-
-Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `multiline`
-
-If `true`, the text input can be multiple lines. The default value is `false`.
-
-:::note
-It is important to note that this aligns the text to the top on iOS, and centers it on Android. Use with `textAlignVertical` set to `top` for the same behavior in both platforms.
-:::
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `numberOfLines`
-
-:::note
-`numberOfLines` on iOS is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Sets the maximum number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `onBlur`
-
-Callback that is called when the text input is blurred.
-
-> Note: If you are attempting to access the `text` value from `nativeEvent` keep in mind that the resulting value you get can be `undefined` which can cause unintended errors. If you are trying to find the last value of TextInput, you can use the [`onEndEditing`](textinput#onendediting) event, which is fired upon completion of editing.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
-
----
-
-### `onChange`
-
-Callback that is called when the text input's text changes.
-
-| Type                                                  |
-| ----------------------------------------------------- |
-| (`{nativeEvent: {eventCount, target, text}}`) => void |
-
----
-
-### `onChangeText`
-
-Callback that is called when the text input's text changes. Changed text is passed as a single string argument to the callback handler.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onContentSizeChange`
-
-Callback that is called when the text input's content size changes.
-
-Only called for multiline text inputs.
-
-| Type                                                       |
-| ---------------------------------------------------------- |
-| (`{nativeEvent: {contentSize: {width, height} }}`) => void |
-
----
-
-### `onEndEditing`
-
-Callback that is called when text input ends.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onPressIn`
-
-Callback that is called when a touch is engaged.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onPressOut`
-
-Callback that is called when a touch is released.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onFocus`
-
-Callback that is called when the text input is focused.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
-
----
-
-### `onKeyPress`
-
-Callback that is called when a key is pressed. This will be called with object where `keyValue` is `'Enter'` or `'Backspace'` for respective keys and the typed-in character otherwise including `' '` for space. Fires before `onChange` callbacks. Note: on Android only the inputs from soft keyboard are handled, not the hardware keyboard inputs.
-
-| Type                                        |
-| ------------------------------------------- |
-| (`{nativeEvent: {key: keyValue} }`) => void |
-
----
-
-### `onLayout`
-
-Invoked on mount and on layout changes.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
-
----
-
-### `onScroll`
-
-Invoked on content scroll. May also contain other properties from `ScrollEvent` but on Android `contentSize` is not provided for performance reasons.
-
-| Type                                                |
-| --------------------------------------------------- |
-| (`{nativeEvent: {contentOffset: {x, y} }}`) => void |
-
----
-
-### `onSelectionChange`
-
-Callback that is called when the text input selection is changed.
-
-| Type                                                  |
-| ----------------------------------------------------- |
-| (`{nativeEvent: {selection: {start, end} }}`) => void |
-
----
-
-### `onSubmitEditing`
-
-Callback that is called when the text input's submit button is pressed.
-
-| Type                                                  |
-| ----------------------------------------------------- |
-| (`{nativeEvent: {text, eventCount, target}}`) => void |
-
-Note that on iOS this method isn't called when using `keyboardType="phone-pad"`.
-
----
-
-### `placeholder`
-
-The string that will be rendered before text input has been entered.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `placeholderTextColor`
-
-The text color of the placeholder string.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `readOnly`
-
-If `true`, text is not editable. The default value is `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `returnKeyLabel` <div className="label android">Android</div>
-
-Sets the return key to the label. Use it instead of `returnKeyType`.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `returnKeyType`
-
-Determines how the return key should look. On Android you can also use `returnKeyLabel`.
-
-_Cross platform_
-
-The following values work across platforms:
-
-- `done`
-- `go`
-- `next`
-- `search`
-- `send`
-
-_Android Only_
-
-The following values work on Android only:
-
-- `none`
-- `previous`
-
-_iOS Only_
-
-The following values work on iOS only:
-
-- `default`
-- `emergency-call`
-- `google`
-- `join`
-- `route`
-- `yahoo`
-
-| Type                                                                                                                              |
-| --------------------------------------------------------------------------------------------------------------------------------- |
-| enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo') |
-
-### `rejectResponderTermination` <div className="label ios">iOS</div>
-
-If `true`, allows TextInput to pass touch events to the parent component. This allows components such as SwipeableListView to be swipeable from the TextInput on iOS, as is the case on Android by default. If `false`, TextInput always asks to handle the input (except when disabled). The default value is `true`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `rows` <div className="label android">Android</div>
-
-Sets the number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `scrollEnabled` <div className="label ios">iOS</div>
-
-If `false`, scrolling of the text view will be disabled. The default value is `true`. Only works with `multiline={true}`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `secureTextEntry`
-
-If `true`, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is `false`. Does not work with `multiline={true}`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `selection`
-
-The start and end of the text input's selection. Set start and end to the same value to position the cursor.
-
-| Type                                  |
-| ------------------------------------- |
-| object: `{start: number,end: number}` |
-
----
-
-### `selectionColor`
-
-The highlight, selection handle and cursor color of the text input.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `selectionHandleColor` <div className="label android">Android</div>
-
-Sets the color of the selection handle. Unlike `selectionColor`, it allows the selection handle color to be customized independently of the selection's color.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `selectTextOnFocus`
-
-If `true`, all text will automatically be selected on focus.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `showSoftInputOnFocus`
-
-When `false`, it will prevent the soft keyboard from showing when the field is focused. The default value is `true`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `smartInsertDelete` <div className="label ios">iOS</div>
-
-If `false`, the iOS system will not insert an extra space after a paste operation neither delete one or two spaces after a cut or delete operation.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `true`  |
-
----
-
-### `spellCheck` <div className="label ios">iOS</div>
-
-If `false`, disables spell-check style (i.e. red underlines). The default value is inherited from `autoCorrect`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `submitBehavior`
-
-When the return key is pressed,
-
-For single line inputs:
-
-- `'newline'` defaults to `'blurAndSubmit'`
-- `undefined` defaults to `'blurAndSubmit'`
-
-For multiline inputs:
-
-- `'newline'` adds a newline
-- `undefined` defaults to `'newline'`
-
-For both single line and multiline inputs:
-
-- `'submit'` will only send a submit event and not blur the input
-- `'blurAndSubmit`' will both blur the input and send a submit event
-
-| Type                                       |
-| ------------------------------------------ |
-| enum('submit', 'blurAndSubmit', 'newline') |
-
----
-
-### `textAlign`
-
-Align the input text to the left, center, or right sides of the input field.
-
-Possible values for `textAlign` are:
-
-- `left`
-- `center`
-- `right`
-
-| Type                            |
-| ------------------------------- |
-| enum('left', 'center', 'right') |
-
----
-
-### `textContentType` <div className="label ios">iOS</div>
-
-Give the keyboard and the system information about the expected semantic meaning for the content that users enter.
-
-:::note
-[`autoComplete`](#autocomplete), provides the same functionality and is available for all platforms. You can use [`Platform.select`](/docs/next/platform#select) for differing platform behaviors.
-
-Avoid using both `textContentType` and `autoComplete`. For backwards compatibility, `textContentType` takes precedence when both properties are set.
-:::
-
-You can set `textContentType` to `username` or `password` to enable autofill of login details from the device keychain.
-
-`newPassword` can be used to indicate a new password input the user may want to save in the keychain, and `oneTimeCode` can be used to indicate that a field can be autofilled by a code arriving in an SMS.
-
-To disable autofill, set `textContentType` to `none`.
-
-Possible values for `textContentType` are:
-
-- `none`
-- `addressCity`
-- `addressCityAndState`
-- `addressState`
-- `birthdate` (iOS 17+)
-- `birthdateDay` (iOS 17+)
-- `birthdateMonth` (iOS 17+)
-- `birthdateYear` (iOS 17+)
-- `countryName`
-- `creditCardExpiration` (iOS 17+)
-- `creditCardExpirationMonth` (iOS 17+)
-- `creditCardExpirationYear` (iOS 17+)
-- `creditCardFamilyName` (iOS 17+)
-- `creditCardGivenName` (iOS 17+)
-- `creditCardMiddleName` (iOS 17+)
-- `creditCardName` (iOS 17+)
-- `creditCardNumber`
-- `creditCardSecurityCode` (iOS 17+)
-- `creditCardType` (iOS 17+)
-- `emailAddress`
-- `familyName`
-- `fullStreetAddress`
-- `givenName`
-- `jobTitle`
-- `location`
-- `middleName`
-- `name`
-- `namePrefix`
-- `nameSuffix`
-- `newPassword`
-- `nickname`
-- `oneTimeCode`
-- `organizationName`
-- `password`
-- `postalCode`
-- `streetAddressLine1`
-- `streetAddressLine2`
-- `sublocality`
-- `telephoneNumber`
-- `URL`
-- `username`
-
-| Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| enum('none', 'addressCity', 'addressCityAndState', 'addressState', 'birthdate', 'birthdateDay', 'birthdateMonth', 'birthdateYear', 'countryName', 'creditCardExpiration', 'creditCardExpirationMonth', 'creditCardExpirationYear', 'creditCardFamilyName', 'creditCardGivenName', 'creditCardMiddleName', 'creditCardName', 'creditCardNumber', 'creditCardSecurityCode', 'creditCardType', 'emailAddress', 'familyName', 'fullStreetAddress', 'givenName', 'jobTitle', 'location', 'middleName', 'name', 'namePrefix', 'nameSuffix', 'newPassword', 'nickname', 'oneTimeCode', 'organizationName', 'password', 'postalCode', 'streetAddressLine1', 'streetAddressLine2', 'sublocality', 'telephoneNumber', 'URL', 'username') |
-
----
-
-### `passwordRules` <div className="label ios">iOS</div>
-
-When using `textContentType` as `newPassword` on iOS we can let the OS know the minimum requirements of the password so that it can generate one that will satisfy them. In order to create a valid string for `PasswordRules` take a look to the [Apple Docs](https://developer.apple.com/password-rules/).
-
-> If passwords generation dialog doesn't appear please make sure that:
->
-> - AutoFill is enabled: **Settings** → **Passwords & Accounts** → toggle "On" the **AutoFill Passwords**,
-> - iCloud Keychain is used: **Settings** → **Apple ID** → **iCloud** → **Keychain** → toggle "On" the **iCloud Keychain**.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `style`
-
-Note that not all Text styles are supported, an incomplete list of what is not supported includes:
-
-- `borderLeftWidth`
-- `borderTopWidth`
-- `borderRightWidth`
-- `borderBottomWidth`
-- `borderTopLeftRadius`
-- `borderTopRightRadius`
-- `borderBottomRightRadius`
-- `borderBottomLeftRadius`
-
-[Styles](style.md)
-
-| Type                  |
-| --------------------- |
-| [Text](text.md#style) |
-
----
-
-### `textBreakStrategy` <div className="label android">Android</div>
-
-Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced` The default value is `highQuality`.
-
-| Type                                      |
-| ----------------------------------------- |
-| enum('simple', 'highQuality', 'balanced') |
-
----
-
-### `underlineColorAndroid` <div className="label android">Android</div>
-
-The color of the `TextInput` underline.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `value`
-
-The value to show for the text input. `TextInput` is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker.
-
-| Type   |
-| ------ |
-| string |
-
-## Methods
-
-### `.focus()`
-
-```tsx
-focus();
-```
-
-Makes the native input request focus.
-
-### `.blur()`
-
-```tsx
-blur();
-```
-
-Makes the native input lose focus.
-
-### `clear()`
-
-```tsx
-clear();
-```
-
-Removes all text from the `TextInput`.
-
----
-
-### `isFocused()`
-
-```tsx
-isFocused(): boolean;
-```
-
-Returns `true` if the input is currently focused; `false` otherwise.
-
-# Known issues
-
-- [react-native#19096](https://github.com/facebook/react-native/issues/19096): Doesn't support Android's `onKeyPreIme`.
-- [react-native#19366](https://github.com/facebook/react-native/issues/19366): Calling .focus() after closing Android's keyboard via back button doesn't bring keyboard up again.
-- [react-native#26799](https://github.com/facebook/react-native/issues/26799): Doesn't support Android's `secureTextEntry` when `keyboardType="email-address"` or `keyboardType="phone-pad"`.
+---
+id: textinput
+title: TextInput
+---
+
+A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.
+
+The most basic use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. A minimal example:
+
+```SnackPlayer name=TextInput%20Example
+import {useState} from 'react';
+import {StyleSheet, TextInput} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const TextInputExample = () => {
+  const [text, onChangeText] = useState('Useless Text');
+  const [number, onChangeNumber] = useState('');
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView>
+        <TextInput
+          style={styles.input}
+          onChangeText={onChangeText}
+          value={text}
+        />
+        <TextInput
+          style={styles.input}
+          onChangeText={onChangeNumber}
+          value={number}
+          placeholder="useless placeholder"
+          keyboardType="numeric"
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  input: {
+    height: 40,
+    margin: 12,
+    borderWidth: 1,
+    padding: 10,
+  },
+});
+
+export default TextInputExample;
+```
+
+Two methods exposed via the native element are `.focus()` and `.blur()` that will focus or blur the TextInput programmatically.
+
+Note that some props are only available with `multiline={true/false}`. Additionally, border styles that apply to only one side of the element (e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if `multiline=true`. To achieve the same effect, you can wrap your `TextInput` in a `View`:
+
+```SnackPlayer name=Multiline%20TextInput%20Example
+import {useState} from 'react';
+import {TextInput, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const MultilineTextInputExample = () => {
+  const [value, onChangeText] = useState('Useless Multiline Placeholder');
+
+  // If you type something in the text box that is a color,
+  // the background will change to that color.
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView
+        style={{
+          flex: 1,
+          backgroundColor: value.toLowerCase(),
+        }}>
+        <TextInput
+          editable
+          multiline
+          numberOfLines={4}
+          maxLength={40}
+          onChangeText={text => onChangeText(text)}
+          value={value}
+          style={styles.textInput}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  textInput: {
+    padding: 10,
+    borderColor: '#000',
+    borderWidth: 1,
+    margin: 12,
+  },
+});
+
+export default MultilineTextInputExample;
+```
+
+`TextInput` has a border at the bottom of its view by default. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this are to either not set height explicitly, in which case the system will take care of displaying the border in the correct position, or to not display the border by setting `underlineColorAndroid` to transparent.
+
+Note that on Android performing text selection in an input can change the app's activity `windowSoftInputMode` param to `adjustResize`. This may cause issues with components that have position: 'absolute' while the keyboard is active. To avoid this behavior either specify `windowSoftInputMode` in AndroidManifest.xml ( https://developer.android.com/guide/topics/manifest/activity-element.html ) or control this param programmatically with native code.
+
+---
+
+# Reference
+
+## Props
+
+### [View Props](view.md#props)
+
+Inherits [View Props](view.md#props).
+
+---
+
+### `allowFontScaling`
+
+Specifies whether fonts should scale to respect Text Size accessibility settings. The default is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `autoCapitalize`
+
+Tells `TextInput` to automatically capitalize certain characters. This property is not supported by some keyboard types such as `name-phone-pad`.
+
+- `characters`: all characters.
+- `words`: first letter of each word.
+- `sentences`: first letter of each sentence (_default_).
+- `none`: don't auto capitalize anything.
+
+| Type                                             |
+| ------------------------------------------------ |
+| enum('none', 'sentences', 'words', 'characters') |
+
+---
+
+### `autoComplete`
+
+Specifies autocomplete hints for the system, so it can provide autofill. On Android, the system will always attempt to offer autofill by using heuristics to identify the type of content. To disable autocomplete, set `autoComplete` to `off`.
+
+The following values work across platforms:
+
+- `additional-name`
+- `address-line1`
+- `address-line2`
+- `birthdate-day` (iOS 17+)
+- `birthdate-full` (iOS 17+)
+- `birthdate-month` (iOS 17+)
+- `birthdate-year` (iOS 17+)
+- `cc-csc` (iOS 17+)
+- `cc-exp` (iOS 17+)
+- `cc-exp-day` (iOS 17+)
+- `cc-exp-month` (iOS 17+)
+- `cc-exp-year` (iOS 17+)
+- `cc-number`
+- `country`
+- `current-password`
+- `email`
+- `family-name`
+- `given-name`
+- `honorific-prefix`
+- `honorific-suffix`
+- `name`
+- `new-password`
+- `off`
+- `one-time-code`
+- `postal-code`
+- `street-address`
+- `tel`
+- `username`
+
+<div className="label basic ios">iOS</div>
+
+The following values work on iOS only:
+
+- `cc-family-name` (iOS 17+)
+- `cc-given-name` (iOS 17+)
+- `cc-middle-name` (iOS 17+)
+- `cc-name` (iOS 17+)
+- `cc-type` (iOS 17+)
+- `nickname`
+- `organization`
+- `organization-title`
+- `url`
+
+<div className="label basic android">Android</div>
+
+The following values work on Android only:
+
+- `gender`
+- `name-family`
+- `name-given`
+- `name-middle`
+- `name-middle-initial`
+- `name-prefix`
+- `name-suffix`
+- `password`
+- `password-new`
+- `postal-address`
+- `postal-address-country`
+- `postal-address-extended`
+- `postal-address-extended-postal-code`
+- `postal-address-locality`
+- `postal-address-region`
+- `sms-otp`
+- `tel-country-code`
+- `tel-device`
+- `tel-national`
+- `username-new`
+
+| Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| enum('additional-name', 'address-line1', 'address-line2', 'birthdate-day', 'birthdate-full', 'birthdate-month', 'birthdate-year', 'cc-csc', 'cc-exp', 'cc-exp-day', 'cc-exp-month', 'cc-exp-year', 'cc-number', 'country', 'current-password', 'email', 'family-name', 'given-name', 'honorific-prefix', 'honorific-suffix', 'name', 'new-password', 'off', 'one-time-code', 'postal-code', 'street-address', 'tel', 'username', 'cc-family-name', 'cc-given-name', 'cc-middle-name', 'cc-name', 'cc-type', 'nickname', 'organization', 'organization-title', 'url', 'gender', 'name-family', 'name-given', 'name-middle', 'name-middle-initial', 'name-prefix', 'name-suffix', 'password', 'password-new', 'postal-address', 'postal-address-country', 'postal-address-extended', 'postal-address-extended-postal-code', 'postal-address-locality', 'postal-address-region', 'sms-otp', 'tel-country-code', 'tel-device', 'tel-national', 'username-new') |
+
+---
+
+### `autoCorrect`
+
+If `false`, disables auto-correct. The default value is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `autoFocus`
+
+If `true`, focuses the input. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `blurOnSubmit`
+
+> **Deprecated.** Note that `submitBehavior` now takes the place of `blurOnSubmit` and will override any behavior defined by `blurOnSubmit`. See [submitBehavior](textinput#submitbehavior)
+
+If `true`, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting `blurOnSubmit` to `true` means that pressing return will blur the field and trigger the `onSubmitEditing` event instead of inserting a newline into the field.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `caretHidden`
+
+If `true`, caret is hidden. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `clearButtonMode` <div className="label ios">iOS</div>
+
+When the clear button should appear on the right side of the text view. This property is supported only for single-line TextInput component. The default value is `never`.
+
+| Type                                                       |
+| ---------------------------------------------------------- |
+| enum('never', 'while-editing', 'unless-editing', 'always') |
+
+---
+
+### `clearTextOnFocus` <div className="label ios">iOS</div>
+
+If `true`, clears the text field automatically when editing begins.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `contextMenuHidden`
+
+If `true`, context menu is hidden. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `dataDetectorTypes` <div className="label ios">iOS</div>
+
+Determines the types of data converted to clickable URLs in the text input. Only valid if `multiline={true}` and `editable={false}`. By default no data types are detected.
+
+You can provide one type or an array of many types.
+
+Possible values for `dataDetectorTypes` are:
+
+- `'phoneNumber'`
+- `'link'`
+- `'address'`
+- `'calendarEvent'`
+- `'none'`
+- `'all'`
+
+| Type                                                                                                                                                     |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), ,array of enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all') |
+
+---
+
+### `defaultValue`
+
+Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.
+
+| Type   |
+| ------ |
+| string |
+
+### `disableKeyboardShortcuts` <div className="label ios">iOS</div>
+
+If `true`, the keyboard shortcuts (undo/redo and copy buttons) are disabled.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `cursorColor` <div className="label android">Android</div>
+
+When provided it will set the color of the cursor (or "caret") in the component. Unlike the behavior of `selectionColor` the cursor color will be set independently from the color of the text selection box.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `disableFullscreenUI` <div className="label android">Android</div>
+
+When `false`, if there is a small amount of space available around a text input (e.g. landscape orientation on a phone), the OS may choose to have the user edit the text inside of a full screen text input mode. When `true`, this feature is disabled and users will always edit the text directly inside of the text input. Defaults to `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `editable`
+
+If `false`, text is not editable. The default value is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `enablesReturnKeyAutomatically` <div className="label ios">iOS</div>
+
+If `true`, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `enterKeyHint`
+
+Determines what text should be shown to the return key. Has precedence over the `returnKeyType` prop.
+
+The following values work across platforms:
+
+- `done`
+- `next`
+- `search`
+- `send`
+- `go`
+
+_Android Only_
+
+The following values work on Android only:
+
+- `previous`
+
+_iOS Only_
+
+The following values work on iOS only:
+
+- `enter`
+
+| Type                                                              |
+| ----------------------------------------------------------------- |
+| enum('enter', 'done', 'next', 'previous', 'search', 'send', 'go') |
+
+---
+
+### `importantForAutofill` <div className="label android">Android</div>
+
+Tells the operating system whether the individual fields in your app should be included in a view structure for autofill purposes on Android API Level 26+. Possible values are `auto`, `no`, `noExcludeDescendants`, `yes`, and `yesExcludeDescendants`. The default value is `auto`.
+
+- `auto`: Let the Android System use its heuristics to determine if the view is important for autofill.
+- `no`: This view isn't important for autofill.
+- `noExcludeDescendants`: This view and its children aren't important for autofill.
+- `yes`: This view is important for autofill.
+- `yesExcludeDescendants`: This view is important for autofill, but its children aren't important for autofill.
+
+| Type                                                                       |
+| -------------------------------------------------------------------------- |
+| enum('auto', 'no', 'noExcludeDescendants', 'yes', 'yesExcludeDescendants') |
+
+---
+
+### `inlineImageLeft` <div className="label android">Android</div>
+
+If defined, the provided image resource will be rendered on the left. The image resource must be inside `/android/app/src/main/res/drawable` and referenced like
+
+```
+<TextInput
+ inlineImageLeft='search_icon'
+/>
+```
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `inlineImagePadding` <div className="label android">Android</div>
+
+Padding between the inline image, if any, and the text input itself.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `inputAccessoryViewID` <div className="label ios">iOS</div>
+
+An optional identifier which links a custom [InputAccessoryView](inputaccessoryview.md) to this text input. The InputAccessoryView is rendered above the keyboard when this text input is focused.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `inputAccessoryViewButtonLabel` <div className="label ios">iOS</div>
+
+An optional label that overrides the default [InputAccessoryView](inputaccessoryview.md) button label.
+
+By default, the default button label is not localized. Use this property to provide a localized version.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `inputMode`
+
+Works like the `inputmode` attribute in HTML, it determines which keyboard to open, e.g. `numeric` and has precedence over `keyboardType`.
+
+Support the following values:
+
+- `none`
+- `text`
+- `decimal`
+- `numeric`
+- `tel`
+- `search`
+- `email`
+- `url`
+
+| Type                                                                        |
+| --------------------------------------------------------------------------- |
+| enum('decimal', 'email', 'none', 'numeric', 'search', 'tel', 'text', 'url') |
+
+---
+
+### `keyboardAppearance` <div className="label ios">iOS</div>
+
+Determines the color of the keyboard.
+
+| Type                             |
+| -------------------------------- |
+| enum('default', 'light', 'dark') |
+
+---
+
+### `keyboardType`
+
+Determines which keyboard to open, e.g.`numeric`.
+
+See screenshots of all the types [here](https://davidl.fr/blog/keyboard-react-native-ios-android#all-react-native-keyboard-type-examples-i-os-on-the-left-android-on-the-right).
+
+The following values work across platforms:
+
+- `default`
+- `number-pad`
+- `decimal-pad`
+- `numeric`
+- `email-address`
+- `phone-pad`
+- `url`
+
+_iOS Only_
+
+The following values work on iOS only:
+
+- `ascii-capable`
+- `numbers-and-punctuation`
+- `name-phone-pad`
+- `twitter`
+- `web-search`
+
+_Android Only_
+
+The following values work on Android only:
+
+- `visible-password`
+
+| Type                                                                                                                                                                                                    |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', 'visible-password') |
+
+---
+
+### `lineBreakModeIOS` <div className="label ios">iOS</div>
+
+Set line break mode on iOS. Possible values are `wordWrapping`, `char`, `clip`, `head`, `middle` and `tail`.
+
+| Type                                                                       | Default          |
+| -------------------------------------------------------------------------- | ---------------- |
+| enum(`'wordWrapping'`, `'char'`, `'clip'`, `'head'`, `'middle'`, `'tail'`) | `'wordWrapping'` |
+
+---
+
+### `lineBreakStrategyIOS` <div className="label ios">iOS</div>
+
+Set line break strategy on iOS 14+. Possible values are `none`, `standard`, `hangul-word` and `push-out`.
+
+| Type                                                        | Default  |
+| ----------------------------------------------------------- | -------- |
+| enum(`'none'`, `'standard'`, `'hangul-word'`, `'push-out'`) | `'none'` |
+
+---
+
+### `maxFontSizeMultiplier`
+
+Specifies largest possible scale a font can reach when `allowFontScaling` is enabled. Possible values:
+
+- `null/undefined` (default): inherit from the parent node or the global default (0)
+- `0`: no max, ignore parent/global default
+- `>= 1`: sets the `maxFontSizeMultiplier` of this node to this value
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `maxLength`
+
+Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `multiline`
+
+If `true`, the text input can be multiple lines. The default value is `false`.
+
+:::note
+It is important to note that this aligns the text to the top on iOS, and centers it on Android. Use with `textAlignVertical` set to `top` for the same behavior in both platforms.
+:::
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `numberOfLines`
+
+:::note
+`numberOfLines` on iOS is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Sets the maximum number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `onBlur`
+
+Callback that is called when the text input is blurred.
+
+> Note: If you are attempting to access the `text` value from `nativeEvent` keep in mind that the resulting value you get can be `undefined` which can cause unintended errors. If you are trying to find the last value of TextInput, you can use the [`onEndEditing`](textinput#onendediting) event, which is fired upon completion of editing.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
+
+---
+
+### `onChange`
+
+Callback that is called when the text input's text changes.
+
+| Type                                                  |
+| ----------------------------------------------------- |
+| (`{nativeEvent: {eventCount, target, text}}`) => void |
+
+---
+
+### `onChangeText`
+
+Callback that is called when the text input's text changes. Changed text is passed as a single string argument to the callback handler.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onContentSizeChange`
+
+Callback that is called when the text input's content size changes.
+
+Only called for multiline text inputs.
+
+| Type                                                       |
+| ---------------------------------------------------------- |
+| (`{nativeEvent: {contentSize: {width, height} }}`) => void |
+
+---
+
+### `onEndEditing`
+
+Callback that is called when text input ends.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onPressIn`
+
+Callback that is called when a touch is engaged.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onPressOut`
+
+Callback that is called when a touch is released.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onFocus`
+
+Callback that is called when the text input is focused.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
+
+---
+
+### `onKeyPress`
+
+Callback that is called when a key is pressed. This will be called with object where `keyValue` is `'Enter'` or `'Backspace'` for respective keys and the typed-in character otherwise including `' '` for space. Fires before `onChange` callbacks. Note: on Android only the inputs from soft keyboard are handled, not the hardware keyboard inputs.
+
+| Type                                        |
+| ------------------------------------------- |
+| (`{nativeEvent: {key: keyValue} }`) => void |
+
+---
+
+### `onLayout`
+
+Invoked on mount and on layout changes.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
+
+---
+
+### `onScroll`
+
+Invoked on content scroll. May also contain other properties from `ScrollEvent` but on Android `contentSize` is not provided for performance reasons.
+
+| Type                                                |
+| --------------------------------------------------- |
+| (`{nativeEvent: {contentOffset: {x, y} }}`) => void |
+
+---
+
+### `onSelectionChange`
+
+Callback that is called when the text input selection is changed.
+
+| Type                                                  |
+| ----------------------------------------------------- |
+| (`{nativeEvent: {selection: {start, end} }}`) => void |
+
+---
+
+### `onSubmitEditing`
+
+Callback that is called when the text input's submit button is pressed.
+
+| Type                                                  |
+| ----------------------------------------------------- |
+| (`{nativeEvent: {text, eventCount, target}}`) => void |
+
+Note that on iOS this method isn't called when using `keyboardType="phone-pad"`.
+
+---
+
+### `placeholder`
+
+The string that will be rendered before text input has been entered.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `placeholderTextColor`
+
+The text color of the placeholder string.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `readOnly`
+
+If `true`, text is not editable. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `returnKeyLabel` <div className="label android">Android</div>
+
+Sets the return key to the label. Use it instead of `returnKeyType`.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `returnKeyType`
+
+Determines how the return key should look. On Android you can also use `returnKeyLabel`.
+
+_Cross platform_
+
+The following values work across platforms:
+
+- `done`
+- `go`
+- `next`
+- `search`
+- `send`
+
+_Android Only_
+
+The following values work on Android only:
+
+- `none`
+- `previous`
+
+_iOS Only_
+
+The following values work on iOS only:
+
+- `default`
+- `emergency-call`
+- `google`
+- `join`
+- `route`
+- `yahoo`
+
+| Type                                                                                                                              |
+| --------------------------------------------------------------------------------------------------------------------------------- |
+| enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo') |
+
+### `rejectResponderTermination` <div className="label ios">iOS</div>
+
+If `true`, allows TextInput to pass touch events to the parent component. This allows components such as SwipeableListView to be swipeable from the TextInput on iOS, as is the case on Android by default. If `false`, TextInput always asks to handle the input (except when disabled). The default value is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `rows` <div className="label android">Android</div>
+
+Sets the number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `scrollEnabled` <div className="label ios">iOS</div>
+
+If `false`, scrolling of the text view will be disabled. The default value is `true`. Only works with `multiline={true}`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `secureTextEntry`
+
+If `true`, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is `false`. Does not work with `multiline={true}`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `selection`
+
+The start and end of the text input's selection. Set start and end to the same value to position the cursor.
+
+| Type                                  |
+| ------------------------------------- |
+| object: `{start: number,end: number}` |
+
+---
+
+### `selectionColor`
+
+The highlight, selection handle and cursor color of the text input.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `selectionHandleColor` <div className="label android">Android</div>
+
+Sets the color of the selection handle. Unlike `selectionColor`, it allows the selection handle color to be customized independently of the selection's color.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `selectTextOnFocus`
+
+If `true`, all text will automatically be selected on focus.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `showSoftInputOnFocus`
+
+When `false`, it will prevent the soft keyboard from showing when the field is focused. The default value is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `smartInsertDelete` <div className="label ios">iOS</div>
+
+If `false`, the iOS system will not insert an extra space after a paste operation neither delete one or two spaces after a cut or delete operation.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `true`  |
+
+---
+
+### `spellCheck` <div className="label ios">iOS</div>
+
+If `false`, disables spell-check style (i.e. red underlines). The default value is inherited from `autoCorrect`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `submitBehavior`
+
+When the return key is pressed,
+
+For single line inputs:
+
+- `'newline'` defaults to `'blurAndSubmit'`
+- `undefined` defaults to `'blurAndSubmit'`
+
+For multiline inputs:
+
+- `'newline'` adds a newline
+- `undefined` defaults to `'newline'`
+
+For both single line and multiline inputs:
+
+- `'submit'` will only send a submit event and not blur the input
+- `'blurAndSubmit`' will both blur the input and send a submit event
+
+| Type                                       |
+| ------------------------------------------ |
+| enum('submit', 'blurAndSubmit', 'newline') |
+
+---
+
+### `textAlign`
+
+Align the input text to the left, center, or right sides of the input field.
+
+Possible values for `textAlign` are:
+
+- `left`
+- `center`
+- `right`
+
+| Type                            |
+| ------------------------------- |
+| enum('left', 'center', 'right') |
+
+---
+
+### `textContentType` <div className="label ios">iOS</div>
+
+Give the keyboard and the system information about the expected semantic meaning for the content that users enter.
+
+:::note
+[`autoComplete`](#autocomplete), provides the same functionality and is available for all platforms. You can use [`Platform.select`](/docs/next/platform#select) for differing platform behaviors.
+
+Avoid using both `textContentType` and `autoComplete`. For backwards compatibility, `textContentType` takes precedence when both properties are set.
+:::
+
+You can set `textContentType` to `username` or `password` to enable autofill of login details from the device keychain.
+
+`newPassword` can be used to indicate a new password input the user may want to save in the keychain, and `oneTimeCode` can be used to indicate that a field can be autofilled by a code arriving in an SMS.
+
+To disable autofill, set `textContentType` to `none`.
+
+Possible values for `textContentType` are:
+
+- `none`
+- `addressCity`
+- `addressCityAndState`
+- `addressState`
+- `birthdate` (iOS 17+)
+- `birthdateDay` (iOS 17+)
+- `birthdateMonth` (iOS 17+)
+- `birthdateYear` (iOS 17+)
+- `countryName`
+- `creditCardExpiration` (iOS 17+)
+- `creditCardExpirationMonth` (iOS 17+)
+- `creditCardExpirationYear` (iOS 17+)
+- `creditCardFamilyName` (iOS 17+)
+- `creditCardGivenName` (iOS 17+)
+- `creditCardMiddleName` (iOS 17+)
+- `creditCardName` (iOS 17+)
+- `creditCardNumber`
+- `creditCardSecurityCode` (iOS 17+)
+- `creditCardType` (iOS 17+)
+- `emailAddress`
+- `familyName`
+- `fullStreetAddress`
+- `givenName`
+- `jobTitle`
+- `location`
+- `middleName`
+- `name`
+- `namePrefix`
+- `nameSuffix`
+- `newPassword`
+- `nickname`
+- `oneTimeCode`
+- `organizationName`
+- `password`
+- `postalCode`
+- `streetAddressLine1`
+- `streetAddressLine2`
+- `sublocality`
+- `telephoneNumber`
+- `URL`
+- `username`
+
+| Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| enum('none', 'addressCity', 'addressCityAndState', 'addressState', 'birthdate', 'birthdateDay', 'birthdateMonth', 'birthdateYear', 'countryName', 'creditCardExpiration', 'creditCardExpirationMonth', 'creditCardExpirationYear', 'creditCardFamilyName', 'creditCardGivenName', 'creditCardMiddleName', 'creditCardName', 'creditCardNumber', 'creditCardSecurityCode', 'creditCardType', 'emailAddress', 'familyName', 'fullStreetAddress', 'givenName', 'jobTitle', 'location', 'middleName', 'name', 'namePrefix', 'nameSuffix', 'newPassword', 'nickname', 'oneTimeCode', 'organizationName', 'password', 'postalCode', 'streetAddressLine1', 'streetAddressLine2', 'sublocality', 'telephoneNumber', 'URL', 'username') |
+
+---
+
+### `passwordRules` <div className="label ios">iOS</div>
+
+When using `textContentType` as `newPassword` on iOS we can let the OS know the minimum requirements of the password so that it can generate one that will satisfy them. In order to create a valid string for `PasswordRules` take a look to the [Apple Docs](https://developer.apple.com/password-rules/).
+
+> If passwords generation dialog doesn't appear please make sure that:
+>
+> - AutoFill is enabled: **Settings** → **Passwords & Accounts** → toggle "On" the **AutoFill Passwords**,
+> - iCloud Keychain is used: **Settings** → **Apple ID** → **iCloud** → **Keychain** → toggle "On" the **iCloud Keychain**.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `style`
+
+Note that not all Text styles are supported, an incomplete list of what is not supported includes:
+
+- `borderLeftWidth`
+- `borderTopWidth`
+- `borderRightWidth`
+- `borderBottomWidth`
+- `borderTopLeftRadius`
+- `borderTopRightRadius`
+- `borderBottomRightRadius`
+- `borderBottomLeftRadius`
+
+[Styles](style.md)
+
+| Type                  |
+| --------------------- |
+| [Text](text.md#style) |
+
+---
+
+### `textBreakStrategy` <div className="label android">Android</div>
+
+Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced` The default value is `highQuality`.
+
+| Type                                      |
+| ----------------------------------------- |
+| enum('simple', 'highQuality', 'balanced') |
+
+---
+
+### `underlineColorAndroid` <div className="label android">Android</div>
+
+The color of the `TextInput` underline.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `value`
+
+The value to show for the text input. `TextInput` is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker.
+
+| Type   |
+| ------ |
+| string |
+
+## Methods
+
+### `.focus()`
+
+```tsx
+focus();
+```
+
+Makes the native input request focus.
+
+### `.blur()`
+
+```tsx
+blur();
+```
+
+Makes the native input lose focus.
+
+### `clear()`
+
+```tsx
+clear();
+```
+
+Removes all text from the `TextInput`.
+
+---
+
+### `isFocused()`
+
+```tsx
+isFocused(): boolean;
+```
+
+Returns `true` if the input is currently focused; `false` otherwise.
+
+# Known issues
+
+- [react-native#19096](https://github.com/facebook/react-native/issues/19096): Doesn't support Android's `onKeyPreIme`.
+- [react-native#19366](https://github.com/facebook/react-native/issues/19366): Calling .focus() after closing Android's keyboard via back button doesn't bring keyboard up again.
+- [react-native#26799](https://github.com/facebook/react-native/issues/26799): Doesn't support Android's `secureTextEntry` when `keyboardType="email-address"` or `keyboardType="phone-pad"`.
diff --git a/website/versioned_docs/version-0.80/the-new-architecture/custom-cxx-types.md b/website/versioned_docs/version-0.80/the-new-architecture/custom-cxx-types.md
index f580f0df8eb..f4ad10f8161 100644
--- a/website/versioned_docs/version-0.80/the-new-architecture/custom-cxx-types.md
+++ b/website/versioned_docs/version-0.80/the-new-architecture/custom-cxx-types.md
@@ -173,8 +173,8 @@ First, we need to update the `App.tsx` file to use the new method from the Turbo
 
 ```diff title="App.tsx"
 // ...
-+ const [cubicSource, setCubicSource] = React.useState('')
-+ const [cubicRoot, setCubicRoot] = React.useState(0)
++ const [cubicSource, setCubicSource] = useState('')
++ const [cubicRoot, setCubicRoot] = useState(0)
   return (
     <SafeAreaView style={styles.container}>
       <View>
@@ -366,9 +366,9 @@ To test the code in the app, we have to modify the `App.tsx` file.
 2. Replace the body of the `App()` function with the following code:
 
 ```ts title="App.tsx (App function body replacement)"
-const [street, setStreet] = React.useState('');
-const [num, setNum] = React.useState('');
-const [isValidAddress, setIsValidAddress] = React.useState<
+const [street, setStreet] = useState('');
+const [num, setNum] = useState('');
+const [isValidAddress, setIsValidAddress] = useState<
   boolean | null
 >(null);
 
diff --git a/website/versioned_docs/version-0.80/the-new-architecture/direct-manipulation.md b/website/versioned_docs/version-0.80/the-new-architecture/direct-manipulation.md
index 6708a643cba..6035b6a64b7 100644
--- a/website/versioned_docs/version-0.80/the-new-architecture/direct-manipulation.md
+++ b/website/versioned_docs/version-0.80/the-new-architecture/direct-manipulation.md
@@ -26,7 +26,6 @@ For example, the following code demonstrates editing the input when you tap a bu
 <TabItem value="javascript">
 
 ```SnackPlayer name=setNativeProps%20on%20TextInput&ext=js
-import React from 'react';
 import {useCallback, useRef} from 'react';
 import {
   StyleSheet,
@@ -74,7 +73,6 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Clear%20text&ext=tsx
-import React from 'react';
 import {useCallback, useRef} from 'react';
 import {
   StyleSheet,
diff --git a/website/versioned_docs/version-0.80/the-new-architecture/fabric-component-native-commands.md b/website/versioned_docs/version-0.80/the-new-architecture/fabric-component-native-commands.md
index ca87360ba3a..5cb5dbd6710 100644
--- a/website/versioned_docs/version-0.80/the-new-architecture/fabric-component-native-commands.md
+++ b/website/versioned_docs/version-0.80/the-new-architecture/fabric-component-native-commands.md
@@ -107,7 +107,6 @@ Now you can use the command in the the app.
 Open the `App.tsx` file and modify it as it follows:
 
 ```diff title="App.tsx"
-import React from 'react';
 -import {Alert, StyleSheet, View} from 'react-native';
 -import WebView from '../specs/WebViewNativeComponent';
 +import {Alert, StyleSheet, Pressable, Text, View} from 'react-native';
@@ -186,7 +185,6 @@ export default App;
 Open the `App.tsx` file and modify it as it follows:
 
 ```diff title="App.jsx"
-import React from 'react';
 -import {Alert, StyleSheet, View} from 'react-native';
 -import WebView from '../specs/WebViewNativeComponent';
 +import {Alert, StyleSheet, Pressable, Text, View} from 'react-native';
diff --git a/website/versioned_docs/version-0.80/the-new-architecture/layout-measurements.md b/website/versioned_docs/version-0.80/the-new-architecture/layout-measurements.md
index cc693a99b0c..715cd42aee7 100644
--- a/website/versioned_docs/version-0.80/the-new-architecture/layout-measurements.md
+++ b/website/versioned_docs/version-0.80/the-new-architecture/layout-measurements.md
@@ -10,7 +10,7 @@ Typical code will look like this:
 
 ```tsx
 function AComponent(children) {
-  const targetRef = React.useRef(null)
+  const targetRef = useRef(null)
 
   useLayoutEffect(() => {
     targetRef.current?.measure((x, y, width, height, pageX, pageY) => {
diff --git a/website/versioned_docs/version-0.80/the-new-architecture/native-modules-custom-events.md b/website/versioned_docs/version-0.80/the-new-architecture/native-modules-custom-events.md
index 0af5bb95957..c44bbf93c16 100644
--- a/website/versioned_docs/version-0.80/the-new-architecture/native-modules-custom-events.md
+++ b/website/versioned_docs/version-0.80/the-new-architecture/native-modules-custom-events.md
@@ -134,7 +134,6 @@ Now, it's time to update the code of the App to handle the new event.
 Open the `App.tsx` file and modify it as it follows:
 
 ```diff title="App.tsx"
-import React from 'react';
 import {
 + Alert,
 + EventSubscription,
diff --git a/website/versioned_docs/version-0.80/the-new-architecture/pure-cxx-modules.md b/website/versioned_docs/version-0.80/the-new-architecture/pure-cxx-modules.md
index 440dfbe553d..de4e3aa886e 100644
--- a/website/versioned_docs/version-0.80/the-new-architecture/pure-cxx-modules.md
+++ b/website/versioned_docs/version-0.80/the-new-architecture/pure-cxx-modules.md
@@ -1,502 +1,502 @@
-import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameForCurrentVersion';
-import {getCurrentVersion} from '@site/src/getCurrentVersion';
-import CodeBlock from '@theme/CodeBlock';
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-# Cross-Platform Native Modules (C++)
-
-Writing a module in C++ is the best way to share platform-agnostic code between Android and iOS. With pure C++ modules, you can write your logic only once and reuse it right away from all the platforms, without the need of writing platform-specific code.
-
-In this guide, we will go through the creation of a pure C++ Turbo Native Module:
-
-1. Create the JS specs
-2. Configure Codegen to generate the scaffolding
-3. Implement the Native logic
-4. Register the module in the Android and iOS application
-5. Test your changes in JS
-
-The rest of this guide assumes that you have created your application running the command:
-
-<CodeBlock language="bash" title="shell">
-{`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`}
-</CodeBlock>
-
-## 1. Create the JS specs
-
-Pure C++ Turbo Native Modules are Turbo Native Modules. They need a specification file (also called spec file) so that Codegen can create the scaffolding code for us. The specification file is also what we use to access the Turbo Native Module in JS.
-
-Spec files need to be written in a typed JS dialect. React Native currently supports Flow or TypeScript.
-
-1. Inside the root folder of your app, create a new folder called `specs`.
-2. Create a new file called `NativeSampleModule.ts` with the following code:
-
-:::warning
-All Native Turbo Module spec files must have the prefix `Native`, otherwise Codegen will ignore them.
-:::
-
-<Tabs groupId="tnm-specs" queryString defaultValue={constants.defaultJavaScriptSpecLanguages} values={constants.javaScriptSpecLanguages}>
-<TabItem value="flow">
-
-```ts title="specs/NativeSampleModule.ts"
-// @flow
-import type {TurboModule} from 'react-native'
-import { TurboModuleRegistry } from "react-native";
-
-export interface Spec extends TurboModule {
-  +reverseString: (input: string) => string;
-}
-
-export default (TurboModuleRegistry.getEnforcing<Spec>(
-  "NativeSampleModule"
-): Spec);
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```ts title="specs/NativeSampleModule.ts"
-import {TurboModule, TurboModuleRegistry} from 'react-native';
-
-export interface Spec extends TurboModule {
-  readonly reverseString: (input: string) => string;
-}
-
-export default TurboModuleRegistry.getEnforcing<Spec>(
-  'NativeSampleModule',
-);
-```
-
-</TabItem>
-</Tabs>
-
-## 2. Configure Codegen
-
-The next step is to configure [Codegen](what-is-codegen.mdx) in your `package.json`. Update the file to include:
-
-```json title="package.json"
-     "start": "react-native start",
-     "test": "jest"
-   },
-   // highlight-add-start
-   "codegenConfig": {
-     "name": "AppSpecs",
-     "type": "modules",
-     "jsSrcsDir": "specs",
-     "android": {
-       "javaPackageName": "com.sampleapp.specs"
-     }
-   },
-   // highlight-add-end
-   "dependencies": {
-```
-
-This configuration tells Codegen to look for spec files in the `specs` folder. It also instructs Codegen to only generate code for `modules` and to namespace the generated code as `AppSpecs`.
-
-## 3. Write the Native Code
-
-Writing a C++ Turbo Native Module allows you to share the code between Android and iOS. Therefore we will be writing the code once, and we will look into what changes we need to apply to the platforms so that the C++ code can be picked up.
-
-1. Create a folder named `shared` at the same level as the `android` and `ios` folders.
-2. Inside the `shared` folder, create a new file called `NativeSampleModule.h`.
-
-   ```cpp title="shared/NativeSampleModule.h"
-   #pragma once
-
-   #include <AppSpecsJSI.h>
-
-   #include <memory>
-   #include <string>
-
-   namespace facebook::react {
-
-   class NativeSampleModule : public NativeSampleModuleCxxSpec<NativeSampleModule> {
-   public:
-     NativeSampleModule(std::shared_ptr<CallInvoker> jsInvoker);
-
-     std::string reverseString(jsi::Runtime& rt, std::string input);
-   };
-
-   } // namespace facebook::react
-
-   ```
-
-3. Inside the `shared` folder, create a new file called `NativeSampleModule.cpp`.
-
-   ```cpp title="shared/NativeSampleModule.cpp"
-   #include "NativeSampleModule.h"
-
-   namespace facebook::react {
-
-   NativeSampleModule::NativeSampleModule(std::shared_ptr<CallInvoker> jsInvoker)
-       : NativeSampleModuleCxxSpec(std::move(jsInvoker)) {}
-
-   std::string NativeSampleModule::reverseString(jsi::Runtime& rt, std::string input) {
-     return std::string(input.rbegin(), input.rend());
-   }
-
-   } // namespace facebook::react
-   ```
-
-Let's have a look at the two files we created:
-
-- The `NativeSampleModule.h` file is the header file for a Pure C++ TurboModule. The `include` statements make sure that we include the specs that will be created by Codegen and that contains the interface and the base class we need to implement.
-- The module lives in the `facebook::react` namespace to have access to all the types that live in that namespace.
-- The class `NativeSampleModule` is the actual Turbo Native Module class and it extends the `NativeSampleModuleCxxSpec` class which contains some glue code and boilerplate code to let this class behave as a Turbo Native Module.
-- Finally, we have the constructor, that accepts a pointer to the `CallInvoker`, to communicate with JS if needed and the function's prototype we have to implement.
-
-The `NativeSampleModule.cpp` file is the actual implementation of our Turbo Native Module and implements the constructor and the method that we declared in the specs.
-
-## 4. Register the Module in the platform
-
-The next steps will let us register the module in the platform. This is the step that exposes the native code to JS so that the React Native application can finally call the native methods from the JS layer.
-
-This is the only time when we will have to write some platform-specific code.
-
-### Android
-
-To make sure that the Android app can effectively build the C++ Turbo Native Module, we need to:
-
-1. Create a `CMakeLists.txt` to access our C++ code.
-2. Modify `build.gradle` to point to the newly created `CMakeLists.txt` file.
-3. Create an `OnLoad.cpp` file in our Android app to register the new Turbo Native Module.
-
-#### 1. Create the `CMakeLists.txt` file
-
-Android uses CMake to build. CMake needs to access the files we defined in our shared folder to be able to build them.
-
-1. Create a new folder `SampleApp/android/app/src/main/jni`. The `jni` folder is where the C++ side of Android lives.
-2. Create a `CMakeLists.txt` file and add this context:
-
-```shell title="CMakeLists.txt"
-cmake_minimum_required(VERSION 3.13)
-
-# Define the library name here.
-project(appmodules)
-
-# This file includes all the necessary to let you build your React Native application
-include(${REACT_ANDROID_DIR}/cmake-utils/ReactNative-application.cmake)
-
-# Define where the additional source code lives. We need to crawl back the jni, main, src, app, android folders
-target_sources(${CMAKE_PROJECT_NAME} PRIVATE ../../../../../shared/NativeSampleModule.cpp)
-
-# Define where CMake can find the additional header files. We need to crawl back the jni, main, src, app, android folders
-target_include_directories(${CMAKE_PROJECT_NAME} PUBLIC ../../../../../shared)
-```
-
-The CMake file does the following things:
-
-- Defines the `appmodules` library, where all the app C++ code will be included.
-- Loads the base React Native's CMake file.
-- Adds the Module C++ source code that we need to build with the `target_sources` directives. By default React Native will already populate the `appmodules` library with default sources, here we include our custom one. You can see that we need to crawl back from the `jni` folder to the `shared` folder where our C++ Turbo Module lives.
-- Specifies where CMake can find the module header files. Also in this case we need to crawl back from the `jni` folder.
-
-#### 2. Modify `build.gradle` to include the custom C++ code
-
-Gradle is the tool that orchestrates the Android build. We need to tell it where it can find the `CMake` files to build the Turbo Native Module.
-
-1. Open the `SampleApp/android/app/build.gradle` file.
-2. Add the following block into the Gradle file, within the existing `android` block:
-
-```diff title="android/app/build.gradle"
-    buildTypes {
-        debug {
-            signingConfig signingConfigs.debug
-        }
-        release {
-            // Caution! In production, you need to generate your own keystore file.
-            // see https://reactnative.dev/docs/signed-apk-android.
-            signingConfig signingConfigs.debug
-            minifyEnabled enableProguardInReleaseBuilds
-            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
-        }
-    }
-
-+   externalNativeBuild {
-+       cmake {
-+           path "src/main/jni/CMakeLists.txt"
-+       }
-+   }
-}
-```
-
-This block tells the Gradle file where to look for the CMake file. The path is relative to the folder where the `build.gradle` file lives, so we need to add the path to the `CMakeLists.txt` files in the `jni` folder.
-
-#### 3. Register the new Turbo Native Module
-
-The final step is to register the new C++ Turbo Native Module in the runtime, so that when JS requires the C++ Turbo Native Module, the app knows where to find it and can return it.
-
-1. From the folder `SampleApp/android/app/src/main/jni`, run the following command:
-
-<CodeBlock language="sh" title="shell">
-{`curl -O https://raw.githubusercontent.com/facebook/react-native/${getCoreBranchNameForCurrentVersion()}/packages/react-native/ReactAndroid/cmake-utils/default-app-setup/OnLoad.cpp`}
-</CodeBlock>
-
-2. Then, modify this file as follows:
-
-```diff title="android/app/src/main/jni/OnLoad.cpp"
-#include <DefaultComponentsRegistry.h>
-#include <DefaultTurboModuleManagerDelegate.h>
-#include <autolinking.h>
-#include <fbjni/fbjni.h>
-#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
-#include <rncore.h>
-
-+ // Include the NativeSampleModule header
-+ #include <NativeSampleModule.h>
-
-//...
-
-std::shared_ptr<TurboModule> cxxModuleProvider(
-    const std::string& name,
-    const std::shared_ptr<CallInvoker>& jsInvoker) {
-  // Here you can provide your CXX Turbo Modules coming from
-  // either your application or from external libraries. The approach to follow
-  // is similar to the following (for a module called `NativeCxxModuleExample`):
-  //
-  // if (name == NativeCxxModuleExample::kModuleName) {
-  //   return std::make_shared<NativeCxxModuleExample>(jsInvoker);
-  // }
-
-+  // This code registers the module so that when the JS side asks for it, the app can return it
-+  if (name == NativeSampleModule::kModuleName) {
-+    return std::make_shared<NativeSampleModule>(jsInvoker);
-+  }
-
-  // And we fallback to the CXX module providers autolinked
-  return autolinking_cxxModuleProvider(name, jsInvoker);
-}
-
-// leave the rest of the file
-```
-
-These steps download the original `OnLoad.cpp` file from React Native, so that we can safely override it to load the C++ Turbo Native Module in the app.
-
-Once we downloaded the file, we can modify it by:
-
-- Including the header file that points to our module
-- Registering the Turbo Native Module so that when JS requires it, the app can return it.
-
-Now, you can run `yarn android` from the project root to see your app building successfully.
-
-### iOS
-
-To make sure that the iOS app can effectively build the C++ Turbo Native Module, we need to:
-
-1. Install pods and run Codegen.
-2. Add the `shared` folder to our iOS project.
-3. Register the C++ Turbo Native Module in the application.
-
-#### 1. Install Pods and Run Codegen.
-
-The first step we need to run is the usual steps we run every time we have to prepare our iOS application. CocoaPods is the tool we use to setup and install React Native dependencies and, as part of the process, it will also run Codegen for us.
-
-```bash
-cd ios
-bundle install
-bundle exec pod install
-```
-
-#### 2. Add the shared folder to the iOS project
-
-This step adds the `shared` folder to the project to make it visible to Xcode.
-
-1. Open the CocoaPods generated Xcode Workspace.
-
-```bash
-cd ios
-open SampleApp.xcworkspace
-```
-
-2. Click on the `SampleApp` project on the left and select `Add files to "Sample App"...`.
-
-![Add Files to Sample App...](/docs/assets/AddFilesToXcode1.png)
-
-3. Select the `shared` folder and click on `Add`.
-
-![Add Files to Sample App...](/docs/assets/AddFilesToXcode2.png)
-
-If you did everything right, your project on the left should look like this:
-
-![Xcode Project](/docs/assets/CxxTMGuideXcodeProject.png)
-
-#### 3. Registering the Cxx Turbo Native Module in your app
-
-To register a pure Cxx Turbo Native Module in your app, you need to:
-
-1. Create a `ModuleProvider` for the Native Module
-2. Configure the `package.json` to associate the JS module name with the ModuleProvider class.
-
-The ModuleProvider is an Objective-C++ that glues together the Pure C++ module with the rest of your iOS App.
-
-##### 3.1 Create the ModuleProvider
-
-1. From Xcode, select the `SampleApp` project and press <kbd>⌘</kbd> + <kbd>N</kbd> to create a new file.
-2. Select the `Cocoa Touch Class` template
-3. Add the name `NativeSampleModuleProvider` (keep the other field as `Subclass of: NSObject` and `Language: Objective-C`)
-4. Click Next to generate the files.
-5. Rename the `NativeSampleModuleProvider.m` to `NativeSampleModuleProvider.mm`. The `mm` extension denotes an Objective-C++ file.
-6. Implement the content of the `NativeSampleModuleProvider.h` with the following:
-
-```objc title="NativeSampleModuleProvider.h"
-
-#import <Foundation/Foundation.h>
-#import <ReactCommon/RCTTurboModule.h>
-
-NS_ASSUME_NONNULL_BEGIN
-
-@interface NativeSampleModuleProvider : NSObject <RCTModuleProvider>
-
-@end
-
-NS_ASSUME_NONNULL_END
-```
-
-This declares a `NativeSampleModuleProvider` object that conforms to the `RCTModuleProvider` protocol.
-
-7. Implement the content of the `NativeSampleModuleProvider.mm` with the following:
-
-```objc title="NativeSampleModuleProvider.mm"
-
-#import "NativeSampleModuleProvider.h"
-#import <ReactCommon/CallInvoker.h>
-#import <ReactCommon/TurboModule.h>
-#import "NativeSampleModule.h"
-
-@implementation NativeSampleModuleProvider
-
-- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
-    (const facebook::react::ObjCTurboModule::InitParams &)params
-{
-  return std::make_shared<facebook::react::NativeSampleModule>(params.jsInvoker);
-}
-
-@end
-```
-
-This code implements the `RCTModuleProvider` protocol by creating the pure C++ `NativeSampleModule` when the `getTurboModule:` method is called.
-
-##### 3.2 Update the package.json
-
-The last step consists in updating the `package.json` to tell React Native about the link between the JS specs of the Native Module and the concrete implementation of those spec in native code.
-
-Modify the `package.json` as it follows:
-
-```json title="package.json"
-     "start": "react-native start",
-     "test": "jest"
-   },
-   "codegenConfig": {
-     "name": "AppSpecs",
-     "type": "modules",
-     "jsSrcsDir": "specs",
-     "android": {
-       "javaPackageName": "com.sampleapp.specs"
-     // highlight-add-start
-     },
-     "ios": {
-        "modulesProvider": {
-          "NativeSampleModule":  "NativeSampleModuleProvider"
-        }
-     }
-     // highlight-add-end
-   },
-
-   "dependencies": {
-```
-
-At this point, you need to re-install the pods to make sure that codegen runs again to generate the new files:
-
-```bash
-# from the ios folder
-bundle exec pod install
-open SampleApp.xcworkspace
-```
-
-If you now build your application from Xcode, you should be able to build successfully.
-
-## 5. Testing your Code
-
-It's now time to access our C++ Turbo Native Module from JS. To do so, we have to modify the `App.tsx` file to import the Turbo Native Module and to call it in our code.
-
-1. Open the `App.tsx` file.
-2. Replace the content of the template with the following code:
-
-```tsx title="App.tsx"
-import React from 'react';
-import {
-  Button,
-  SafeAreaView,
-  StyleSheet,
-  Text,
-  TextInput,
-  View,
-} from 'react-native';
-import SampleTurboModule from './specs/NativeSampleModule';
-
-function App(): React.JSX.Element {
-  const [value, setValue] = React.useState('');
-  const [reversedValue, setReversedValue] = React.useState('');
-
-  const onPress = () => {
-    const revString = SampleTurboModule.reverseString(value);
-    setReversedValue(revString);
-  };
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <View>
-        <Text style={styles.title}>
-          Welcome to C++ Turbo Native Module Example
-        </Text>
-        <Text>Write down here the text you want to reverse</Text>
-        <TextInput
-          style={styles.textInput}
-          placeholder="Write your text here"
-          onChangeText={setValue}
-          value={value}
-        />
-        <Button title="Reverse" onPress={onPress} />
-        <Text>Reversed text: {reversedValue}</Text>
-      </View>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  title: {
-    fontSize: 18,
-    marginBottom: 20,
-  },
-  textInput: {
-    borderColor: 'black',
-    borderWidth: 1,
-    borderRadius: 5,
-    padding: 10,
-    marginTop: 10,
-  },
-});
-
-export default App;
-```
-
-The interesting lines in this app are:
-
-- `import SampleTurboModule from './specs/NativeSampleModule';`: this line imports the Turbo Native Module in the app,
-- `const revString = SampleTurboModule.reverseString(value);` in the `onPress` callback: this is how you can use the Turbo Native Module in your app.
-
-:::warning
-For the sake of this example and to keep it as short as possible, we directly imported the spec file in our app.
-The best practice in this case is to create a separate file to wrap the specs and use that file into your application.
-This allows you to prepare the input for the specs and gives you more control over them in JS.
-:::
-
-Congratulations, you wrote your first C++ Turbo Native Module!
-
-| <center>Android</center>                                                                             | <center>iOS</center>                                                                          |
-| ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
-| <center><img src="/docs/assets/CxxGuideAndroidVideo.gif" alt="Android Video" height="600"/></center> | <center><img src="/docs/assets/CxxGuideIOSVideo.gif" alt="iOS video" height="600" /></center> |
+import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameForCurrentVersion';
+import {getCurrentVersion} from '@site/src/getCurrentVersion';
+import CodeBlock from '@theme/CodeBlock';
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+# Cross-Platform Native Modules (C++)
+
+Writing a module in C++ is the best way to share platform-agnostic code between Android and iOS. With pure C++ modules, you can write your logic only once and reuse it right away from all the platforms, without the need of writing platform-specific code.
+
+In this guide, we will go through the creation of a pure C++ Turbo Native Module:
+
+1. Create the JS specs
+2. Configure Codegen to generate the scaffolding
+3. Implement the Native logic
+4. Register the module in the Android and iOS application
+5. Test your changes in JS
+
+The rest of this guide assumes that you have created your application running the command:
+
+<CodeBlock language="bash" title="shell">
+{`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`}
+</CodeBlock>
+
+## 1. Create the JS specs
+
+Pure C++ Turbo Native Modules are Turbo Native Modules. They need a specification file (also called spec file) so that Codegen can create the scaffolding code for us. The specification file is also what we use to access the Turbo Native Module in JS.
+
+Spec files need to be written in a typed JS dialect. React Native currently supports Flow or TypeScript.
+
+1. Inside the root folder of your app, create a new folder called `specs`.
+2. Create a new file called `NativeSampleModule.ts` with the following code:
+
+:::warning
+All Native Turbo Module spec files must have the prefix `Native`, otherwise Codegen will ignore them.
+:::
+
+<Tabs groupId="tnm-specs" queryString defaultValue={constants.defaultJavaScriptSpecLanguages} values={constants.javaScriptSpecLanguages}>
+<TabItem value="flow">
+
+```ts title="specs/NativeSampleModule.ts"
+// @flow
+import type {TurboModule} from 'react-native'
+import { TurboModuleRegistry } from "react-native";
+
+export interface Spec extends TurboModule {
+  +reverseString: (input: string) => string;
+}
+
+export default (TurboModuleRegistry.getEnforcing<Spec>(
+  "NativeSampleModule"
+): Spec);
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```ts title="specs/NativeSampleModule.ts"
+import {TurboModule, TurboModuleRegistry} from 'react-native';
+
+export interface Spec extends TurboModule {
+  readonly reverseString: (input: string) => string;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>(
+  'NativeSampleModule',
+);
+```
+
+</TabItem>
+</Tabs>
+
+## 2. Configure Codegen
+
+The next step is to configure [Codegen](what-is-codegen.mdx) in your `package.json`. Update the file to include:
+
+```json title="package.json"
+     "start": "react-native start",
+     "test": "jest"
+   },
+   // highlight-add-start
+   "codegenConfig": {
+     "name": "AppSpecs",
+     "type": "modules",
+     "jsSrcsDir": "specs",
+     "android": {
+       "javaPackageName": "com.sampleapp.specs"
+     }
+   },
+   // highlight-add-end
+   "dependencies": {
+```
+
+This configuration tells Codegen to look for spec files in the `specs` folder. It also instructs Codegen to only generate code for `modules` and to namespace the generated code as `AppSpecs`.
+
+## 3. Write the Native Code
+
+Writing a C++ Turbo Native Module allows you to share the code between Android and iOS. Therefore we will be writing the code once, and we will look into what changes we need to apply to the platforms so that the C++ code can be picked up.
+
+1. Create a folder named `shared` at the same level as the `android` and `ios` folders.
+2. Inside the `shared` folder, create a new file called `NativeSampleModule.h`.
+
+   ```cpp title="shared/NativeSampleModule.h"
+   #pragma once
+
+   #include <AppSpecsJSI.h>
+
+   #include <memory>
+   #include <string>
+
+   namespace facebook::react {
+
+   class NativeSampleModule : public NativeSampleModuleCxxSpec<NativeSampleModule> {
+   public:
+     NativeSampleModule(std::shared_ptr<CallInvoker> jsInvoker);
+
+     std::string reverseString(jsi::Runtime& rt, std::string input);
+   };
+
+   } // namespace facebook::react
+
+   ```
+
+3. Inside the `shared` folder, create a new file called `NativeSampleModule.cpp`.
+
+   ```cpp title="shared/NativeSampleModule.cpp"
+   #include "NativeSampleModule.h"
+
+   namespace facebook::react {
+
+   NativeSampleModule::NativeSampleModule(std::shared_ptr<CallInvoker> jsInvoker)
+       : NativeSampleModuleCxxSpec(std::move(jsInvoker)) {}
+
+   std::string NativeSampleModule::reverseString(jsi::Runtime& rt, std::string input) {
+     return std::string(input.rbegin(), input.rend());
+   }
+
+   } // namespace facebook::react
+   ```
+
+Let's have a look at the two files we created:
+
+- The `NativeSampleModule.h` file is the header file for a Pure C++ TurboModule. The `include` statements make sure that we include the specs that will be created by Codegen and that contains the interface and the base class we need to implement.
+- The module lives in the `facebook::react` namespace to have access to all the types that live in that namespace.
+- The class `NativeSampleModule` is the actual Turbo Native Module class and it extends the `NativeSampleModuleCxxSpec` class which contains some glue code and boilerplate code to let this class behave as a Turbo Native Module.
+- Finally, we have the constructor, that accepts a pointer to the `CallInvoker`, to communicate with JS if needed and the function's prototype we have to implement.
+
+The `NativeSampleModule.cpp` file is the actual implementation of our Turbo Native Module and implements the constructor and the method that we declared in the specs.
+
+## 4. Register the Module in the platform
+
+The next steps will let us register the module in the platform. This is the step that exposes the native code to JS so that the React Native application can finally call the native methods from the JS layer.
+
+This is the only time when we will have to write some platform-specific code.
+
+### Android
+
+To make sure that the Android app can effectively build the C++ Turbo Native Module, we need to:
+
+1. Create a `CMakeLists.txt` to access our C++ code.
+2. Modify `build.gradle` to point to the newly created `CMakeLists.txt` file.
+3. Create an `OnLoad.cpp` file in our Android app to register the new Turbo Native Module.
+
+#### 1. Create the `CMakeLists.txt` file
+
+Android uses CMake to build. CMake needs to access the files we defined in our shared folder to be able to build them.
+
+1. Create a new folder `SampleApp/android/app/src/main/jni`. The `jni` folder is where the C++ side of Android lives.
+2. Create a `CMakeLists.txt` file and add this context:
+
+```shell title="CMakeLists.txt"
+cmake_minimum_required(VERSION 3.13)
+
+# Define the library name here.
+project(appmodules)
+
+# This file includes all the necessary to let you build your React Native application
+include(${REACT_ANDROID_DIR}/cmake-utils/ReactNative-application.cmake)
+
+# Define where the additional source code lives. We need to crawl back the jni, main, src, app, android folders
+target_sources(${CMAKE_PROJECT_NAME} PRIVATE ../../../../../shared/NativeSampleModule.cpp)
+
+# Define where CMake can find the additional header files. We need to crawl back the jni, main, src, app, android folders
+target_include_directories(${CMAKE_PROJECT_NAME} PUBLIC ../../../../../shared)
+```
+
+The CMake file does the following things:
+
+- Defines the `appmodules` library, where all the app C++ code will be included.
+- Loads the base React Native's CMake file.
+- Adds the Module C++ source code that we need to build with the `target_sources` directives. By default React Native will already populate the `appmodules` library with default sources, here we include our custom one. You can see that we need to crawl back from the `jni` folder to the `shared` folder where our C++ Turbo Module lives.
+- Specifies where CMake can find the module header files. Also in this case we need to crawl back from the `jni` folder.
+
+#### 2. Modify `build.gradle` to include the custom C++ code
+
+Gradle is the tool that orchestrates the Android build. We need to tell it where it can find the `CMake` files to build the Turbo Native Module.
+
+1. Open the `SampleApp/android/app/build.gradle` file.
+2. Add the following block into the Gradle file, within the existing `android` block:
+
+```diff title="android/app/build.gradle"
+    buildTypes {
+        debug {
+            signingConfig signingConfigs.debug
+        }
+        release {
+            // Caution! In production, you need to generate your own keystore file.
+            // see https://reactnative.dev/docs/signed-apk-android.
+            signingConfig signingConfigs.debug
+            minifyEnabled enableProguardInReleaseBuilds
+            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+        }
+    }
+
++   externalNativeBuild {
++       cmake {
++           path "src/main/jni/CMakeLists.txt"
++       }
++   }
+}
+```
+
+This block tells the Gradle file where to look for the CMake file. The path is relative to the folder where the `build.gradle` file lives, so we need to add the path to the `CMakeLists.txt` files in the `jni` folder.
+
+#### 3. Register the new Turbo Native Module
+
+The final step is to register the new C++ Turbo Native Module in the runtime, so that when JS requires the C++ Turbo Native Module, the app knows where to find it and can return it.
+
+1. From the folder `SampleApp/android/app/src/main/jni`, run the following command:
+
+<CodeBlock language="sh" title="shell">
+{`curl -O https://raw.githubusercontent.com/facebook/react-native/${getCoreBranchNameForCurrentVersion()}/packages/react-native/ReactAndroid/cmake-utils/default-app-setup/OnLoad.cpp`}
+</CodeBlock>
+
+2. Then, modify this file as follows:
+
+```diff title="android/app/src/main/jni/OnLoad.cpp"
+#include <DefaultComponentsRegistry.h>
+#include <DefaultTurboModuleManagerDelegate.h>
+#include <autolinking.h>
+#include <fbjni/fbjni.h>
+#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
+#include <rncore.h>
+
++ // Include the NativeSampleModule header
++ #include <NativeSampleModule.h>
+
+//...
+
+std::shared_ptr<TurboModule> cxxModuleProvider(
+    const std::string& name,
+    const std::shared_ptr<CallInvoker>& jsInvoker) {
+  // Here you can provide your CXX Turbo Modules coming from
+  // either your application or from external libraries. The approach to follow
+  // is similar to the following (for a module called `NativeCxxModuleExample`):
+  //
+  // if (name == NativeCxxModuleExample::kModuleName) {
+  //   return std::make_shared<NativeCxxModuleExample>(jsInvoker);
+  // }
+
++  // This code registers the module so that when the JS side asks for it, the app can return it
++  if (name == NativeSampleModule::kModuleName) {
++    return std::make_shared<NativeSampleModule>(jsInvoker);
++  }
+
+  // And we fallback to the CXX module providers autolinked
+  return autolinking_cxxModuleProvider(name, jsInvoker);
+}
+
+// leave the rest of the file
+```
+
+These steps download the original `OnLoad.cpp` file from React Native, so that we can safely override it to load the C++ Turbo Native Module in the app.
+
+Once we downloaded the file, we can modify it by:
+
+- Including the header file that points to our module
+- Registering the Turbo Native Module so that when JS requires it, the app can return it.
+
+Now, you can run `yarn android` from the project root to see your app building successfully.
+
+### iOS
+
+To make sure that the iOS app can effectively build the C++ Turbo Native Module, we need to:
+
+1. Install pods and run Codegen.
+2. Add the `shared` folder to our iOS project.
+3. Register the C++ Turbo Native Module in the application.
+
+#### 1. Install Pods and Run Codegen.
+
+The first step we need to run is the usual steps we run every time we have to prepare our iOS application. CocoaPods is the tool we use to setup and install React Native dependencies and, as part of the process, it will also run Codegen for us.
+
+```bash
+cd ios
+bundle install
+bundle exec pod install
+```
+
+#### 2. Add the shared folder to the iOS project
+
+This step adds the `shared` folder to the project to make it visible to Xcode.
+
+1. Open the CocoaPods generated Xcode Workspace.
+
+```bash
+cd ios
+open SampleApp.xcworkspace
+```
+
+2. Click on the `SampleApp` project on the left and select `Add files to "Sample App"...`.
+
+![Add Files to Sample App...](/docs/assets/AddFilesToXcode1.png)
+
+3. Select the `shared` folder and click on `Add`.
+
+![Add Files to Sample App...](/docs/assets/AddFilesToXcode2.png)
+
+If you did everything right, your project on the left should look like this:
+
+![Xcode Project](/docs/assets/CxxTMGuideXcodeProject.png)
+
+#### 3. Registering the Cxx Turbo Native Module in your app
+
+To register a pure Cxx Turbo Native Module in your app, you need to:
+
+1. Create a `ModuleProvider` for the Native Module
+2. Configure the `package.json` to associate the JS module name with the ModuleProvider class.
+
+The ModuleProvider is an Objective-C++ that glues together the Pure C++ module with the rest of your iOS App.
+
+##### 3.1 Create the ModuleProvider
+
+1. From Xcode, select the `SampleApp` project and press <kbd>⌘</kbd> + <kbd>N</kbd> to create a new file.
+2. Select the `Cocoa Touch Class` template
+3. Add the name `NativeSampleModuleProvider` (keep the other field as `Subclass of: NSObject` and `Language: Objective-C`)
+4. Click Next to generate the files.
+5. Rename the `NativeSampleModuleProvider.m` to `NativeSampleModuleProvider.mm`. The `mm` extension denotes an Objective-C++ file.
+6. Implement the content of the `NativeSampleModuleProvider.h` with the following:
+
+```objc title="NativeSampleModuleProvider.h"
+
+#import <Foundation/Foundation.h>
+#import <ReactCommon/RCTTurboModule.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface NativeSampleModuleProvider : NSObject <RCTModuleProvider>
+
+@end
+
+NS_ASSUME_NONNULL_END
+```
+
+This declares a `NativeSampleModuleProvider` object that conforms to the `RCTModuleProvider` protocol.
+
+7. Implement the content of the `NativeSampleModuleProvider.mm` with the following:
+
+```objc title="NativeSampleModuleProvider.mm"
+
+#import "NativeSampleModuleProvider.h"
+#import <ReactCommon/CallInvoker.h>
+#import <ReactCommon/TurboModule.h>
+#import "NativeSampleModule.h"
+
+@implementation NativeSampleModuleProvider
+
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
+    (const facebook::react::ObjCTurboModule::InitParams &)params
+{
+  return std::make_shared<facebook::react::NativeSampleModule>(params.jsInvoker);
+}
+
+@end
+```
+
+This code implements the `RCTModuleProvider` protocol by creating the pure C++ `NativeSampleModule` when the `getTurboModule:` method is called.
+
+##### 3.2 Update the package.json
+
+The last step consists in updating the `package.json` to tell React Native about the link between the JS specs of the Native Module and the concrete implementation of those spec in native code.
+
+Modify the `package.json` as it follows:
+
+```json title="package.json"
+     "start": "react-native start",
+     "test": "jest"
+   },
+   "codegenConfig": {
+     "name": "AppSpecs",
+     "type": "modules",
+     "jsSrcsDir": "specs",
+     "android": {
+       "javaPackageName": "com.sampleapp.specs"
+     // highlight-add-start
+     },
+     "ios": {
+        "modulesProvider": {
+          "NativeSampleModule":  "NativeSampleModuleProvider"
+        }
+     }
+     // highlight-add-end
+   },
+
+   "dependencies": {
+```
+
+At this point, you need to re-install the pods to make sure that codegen runs again to generate the new files:
+
+```bash
+# from the ios folder
+bundle exec pod install
+open SampleApp.xcworkspace
+```
+
+If you now build your application from Xcode, you should be able to build successfully.
+
+## 5. Testing your Code
+
+It's now time to access our C++ Turbo Native Module from JS. To do so, we have to modify the `App.tsx` file to import the Turbo Native Module and to call it in our code.
+
+1. Open the `App.tsx` file.
+2. Replace the content of the template with the following code:
+
+```tsx title="App.tsx"
+import {type JSX, useState} from 'react';
+import {
+  Button,
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+import SampleTurboModule from './specs/NativeSampleModule';
+
+function App(): JSX.Element {
+  const [value, setValue] = useState('');
+  const [reversedValue, setReversedValue] = useState('');
+
+  const onPress = () => {
+    const revString = SampleTurboModule.reverseString(value);
+    setReversedValue(revString);
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View>
+        <Text style={styles.title}>
+          Welcome to C++ Turbo Native Module Example
+        </Text>
+        <Text>Write down here the text you want to reverse</Text>
+        <TextInput
+          style={styles.textInput}
+          placeholder="Write your text here"
+          onChangeText={setValue}
+          value={value}
+        />
+        <Button title="Reverse" onPress={onPress} />
+        <Text>Reversed text: {reversedValue}</Text>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 18,
+    marginBottom: 20,
+  },
+  textInput: {
+    borderColor: 'black',
+    borderWidth: 1,
+    borderRadius: 5,
+    padding: 10,
+    marginTop: 10,
+  },
+});
+
+export default App;
+```
+
+The interesting lines in this app are:
+
+- `import SampleTurboModule from './specs/NativeSampleModule';`: this line imports the Turbo Native Module in the app,
+- `const revString = SampleTurboModule.reverseString(value);` in the `onPress` callback: this is how you can use the Turbo Native Module in your app.
+
+:::warning
+For the sake of this example and to keep it as short as possible, we directly imported the spec file in our app.
+The best practice in this case is to create a separate file to wrap the specs and use that file into your application.
+This allows you to prepare the input for the specs and gives you more control over them in JS.
+:::
+
+Congratulations, you wrote your first C++ Turbo Native Module!
+
+| <center>Android</center>                                                                             | <center>iOS</center>                                                                          |
+| ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
+| <center><img src="/docs/assets/CxxGuideAndroidVideo.gif" alt="Android Video" height="600"/></center> | <center><img src="/docs/assets/CxxGuideIOSVideo.gif" alt="iOS video" height="600" /></center> |
diff --git a/website/versioned_docs/version-0.80/toastandroid.md b/website/versioned_docs/version-0.80/toastandroid.md
index 9ca5e906d71..d898525a6fd 100644
--- a/website/versioned_docs/version-0.80/toastandroid.md
+++ b/website/versioned_docs/version-0.80/toastandroid.md
@@ -15,7 +15,6 @@ The `showWithGravityAndOffset(message, duration, gravity, xOffset, yOffset)` met
 > Starting with Android 11 (API level 30), setting the gravity has no effect on text toasts. Read about the changes [here](https://developer.android.com/about/versions/11/behavior-changes-11#text-toast-api-changes).
 
 ```SnackPlayer name=Toast%20Android%20API%20Example&supportedPlatforms=android
-import React from 'react';
 import {StyleSheet, ToastAndroid, Button, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.80/touchablehighlight.md b/website/versioned_docs/version-0.80/touchablehighlight.md
index b5427ecbd2b..2019e858b01 100644
--- a/website/versioned_docs/version-0.80/touchablehighlight.md
+++ b/website/versioned_docs/version-0.80/touchablehighlight.md
@@ -1,207 +1,207 @@
----
-id: touchablehighlight
-title: TouchableHighlight
----
-
-> If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
-
-A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view.
-
-The underlay comes from wrapping the child in a new View, which can affect layout, and sometimes cause unwanted visual artifacts if not used correctly, for example if the backgroundColor of the wrapped view isn't explicitly set to an opaque color.
-
-TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View.
-
-```tsx
-function MyComponent(props: MyComponentProps) {
-  return (
-    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
-      <Text>My Component</Text>
-    </View>
-  );
-}
-
-<TouchableHighlight
-  activeOpacity={0.6}
-  underlayColor="#DDDDDD"
-  onPress={() => alert('Pressed!')}>
-  <MyComponent />
-</TouchableHighlight>;
-```
-
-## Example
-
-```SnackPlayer name=TouchableHighlight%20Example
-import React, {useState} from 'react';
-import {StyleSheet, Text, TouchableHighlight, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const TouchableHighlightExample = () => {
-  const [count, setCount] = useState(0);
-  const onPress = () => setCount(count + 1);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <TouchableHighlight onPress={onPress}>
-          <View style={styles.button}>
-            <Text>Touch Here</Text>
-          </View>
-        </TouchableHighlight>
-        <View style={styles.countContainer}>
-          <Text style={styles.countText}>{count || null}</Text>
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: 10,
-  },
-  button: {
-    alignItems: 'center',
-    backgroundColor: '#DDDDDD',
-    padding: 10,
-  },
-  countContainer: {
-    alignItems: 'center',
-    padding: 10,
-  },
-  countText: {
-    color: '#FF00FF',
-  },
-});
-
-export default TouchableHighlightExample;
-```
-
----
-
-# Reference
-
-## Props
-
-### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
-
-Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
-
----
-
-### `activeOpacity`
-
-Determines what the opacity of the wrapped view should be when touch is active. The value should be between 0 and 1. Defaults to 0.85. Requires `underlayColor` to be set.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `onHideUnderlay`
-
-Called immediately after the underlay is hidden.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onShowUnderlay`
-
-Called immediately after the underlay is shown.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `style`
-
-| Type       |
-| ---------- |
-| View.style |
-
----
-
-### `underlayColor`
-
-The color of the underlay that will show through when the touch is active.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `hasTVPreferredFocus` <div className="label ios">iOS</div>
-
-_(Apple TV only)_ TV preferred focus (see documentation for the View component).
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `nextFocusDown` <div className="label android">Android</div>
-
-TV next focus down (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusForward` <div className="label android">Android</div>
-
-TV next focus forward (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusLeft` <div className="label android">Android</div>
-
-TV next focus left (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusRight` <div className="label android">Android</div>
-
-TV next focus right (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusUp` <div className="label android">Android</div>
-
-TV next focus up (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `testOnly_pressed`
-
-Handy for snapshot tests.
-
-| Type |
-| ---- |
-| bool |
+---
+id: touchablehighlight
+title: TouchableHighlight
+---
+
+> If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
+
+A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view.
+
+The underlay comes from wrapping the child in a new View, which can affect layout, and sometimes cause unwanted visual artifacts if not used correctly, for example if the backgroundColor of the wrapped view isn't explicitly set to an opaque color.
+
+TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View.
+
+```tsx
+function MyComponent(props: MyComponentProps) {
+  return (
+    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
+      <Text>My Component</Text>
+    </View>
+  );
+}
+
+<TouchableHighlight
+  activeOpacity={0.6}
+  underlayColor="#DDDDDD"
+  onPress={() => alert('Pressed!')}>
+  <MyComponent />
+</TouchableHighlight>;
+```
+
+## Example
+
+```SnackPlayer name=TouchableHighlight%20Example
+import {useState} from 'react';
+import {StyleSheet, Text, TouchableHighlight, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const TouchableHighlightExample = () => {
+  const [count, setCount] = useState(0);
+  const onPress = () => setCount(count + 1);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <TouchableHighlight onPress={onPress}>
+          <View style={styles.button}>
+            <Text>Touch Here</Text>
+          </View>
+        </TouchableHighlight>
+        <View style={styles.countContainer}>
+          <Text style={styles.countText}>{count || null}</Text>
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#DDDDDD',
+    padding: 10,
+  },
+  countContainer: {
+    alignItems: 'center',
+    padding: 10,
+  },
+  countText: {
+    color: '#FF00FF',
+  },
+});
+
+export default TouchableHighlightExample;
+```
+
+---
+
+# Reference
+
+## Props
+
+### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
+
+Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
+
+---
+
+### `activeOpacity`
+
+Determines what the opacity of the wrapped view should be when touch is active. The value should be between 0 and 1. Defaults to 0.85. Requires `underlayColor` to be set.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `onHideUnderlay`
+
+Called immediately after the underlay is hidden.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onShowUnderlay`
+
+Called immediately after the underlay is shown.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `style`
+
+| Type       |
+| ---------- |
+| View.style |
+
+---
+
+### `underlayColor`
+
+The color of the underlay that will show through when the touch is active.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `hasTVPreferredFocus` <div className="label ios">iOS</div>
+
+_(Apple TV only)_ TV preferred focus (see documentation for the View component).
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `nextFocusDown` <div className="label android">Android</div>
+
+TV next focus down (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusForward` <div className="label android">Android</div>
+
+TV next focus forward (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusLeft` <div className="label android">Android</div>
+
+TV next focus left (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusRight` <div className="label android">Android</div>
+
+TV next focus right (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusUp` <div className="label android">Android</div>
+
+TV next focus up (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `testOnly_pressed`
+
+Handy for snapshot tests.
+
+| Type |
+| ---- |
+| bool |
diff --git a/website/versioned_docs/version-0.80/touchablenativefeedback.md b/website/versioned_docs/version-0.80/touchablenativefeedback.md
index 4cb291a607b..e61782dc669 100644
--- a/website/versioned_docs/version-0.80/touchablenativefeedback.md
+++ b/website/versioned_docs/version-0.80/touchablenativefeedback.md
@@ -1,217 +1,217 @@
----
-id: touchablenativefeedback
-title: TouchableNativeFeedback
----
-
-> If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
-
-A wrapper for making views respond properly to touches (Android only). On Android this component uses native state drawable to display touch feedback.
-
-At the moment it only supports having a single View instance as a child node, as it's implemented by replacing that View with another instance of RCTView node with some additional properties set.
-
-Background drawable of native feedback touchable can be customized with `background` property.
-
-## Example
-
-```SnackPlayer name=TouchableNativeFeedback%20Android%20Component%20Example&supportedPlatforms=android
-import React, {useState} from 'react';
-import {Text, View, StyleSheet, TouchableNativeFeedback} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [rippleColor, setRippleColor] = useState(randomHexColor());
-  const [rippleOverflow, setRippleOverflow] = useState(false);
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <TouchableNativeFeedback
-          onPress={() => {
-            setRippleColor(randomHexColor());
-            setRippleOverflow(!rippleOverflow);
-          }}
-          background={TouchableNativeFeedback.Ripple(
-            rippleColor,
-            rippleOverflow,
-          )}>
-          <View style={styles.touchable}>
-            <Text style={styles.text}>TouchableNativeFeedback</Text>
-          </View>
-        </TouchableNativeFeedback>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const randomHexColor = () => {
-  return '#000000'.replace(/0/g, function () {
-    return Math.round(Math.random() * 16).toString(16);
-  });
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    backgroundColor: 'black',
-    paddingHorizontal: 20,
-  },
-  touchable: {
-    flex: 0.33,
-    justifyContent: 'center',
-    backgroundColor: '#eeeeee',
-    borderColor: 'black',
-    borderWidth: 1,
-  },
-  text: {
-    alignSelf: 'center',
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Props
-
-### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
-
-Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
-
----
-
-### `background`
-
-Determines the type of background drawable that's going to be used to display feedback. It takes an object with `type` property and extra data depending on the `type`. It's recommended to use one of the static methods to generate that dictionary.
-
-| Type               |
-| ------------------ |
-| backgroundPropType |
-
----
-
-### `useForeground`
-
-Set to true to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them.
-
-Check TouchableNativeFeedback.canUseNativeForeground() first, as this is only available on Android 6.0 and above. If you try to use this on older versions you will get a warning and fallback to background.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `hasTVPreferredFocus` <div className="label android">Android</div>
-
-TV preferred focus (see documentation for the View component).
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `nextFocusDown` <div className="label android">Android</div>
-
-TV next focus down (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusForward` <div className="label android">Android</div>
-
-TV next focus forward (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusLeft` <div className="label android">Android</div>
-
-TV next focus left (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusRight` <div className="label android">Android</div>
-
-TV next focus right (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusUp` <div className="label android">Android</div>
-
-TV next focus up (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
-## Methods
-
-### `SelectableBackground()`
-
-```tsx
-static SelectableBackground(
-  rippleRadius: number | null,
-): ThemeAttributeBackgroundPropType;
-```
-
-Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.
-
----
-
-### `SelectableBackgroundBorderless()`
-
-```tsx
-static SelectableBackgroundBorderless(
-  rippleRadius: number | null,
-): ThemeAttributeBackgroundPropType;
-```
-
-Creates an object that represent android theme's default background for borderless selectable elements (`?android:attr/selectableItemBackgroundBorderless`). Available on android API level 21+. `rippleRadius` parameter controls the radius of the ripple effect.
-
----
-
-### `Ripple()`
-
-```tsx
-static Ripple(
-  color: ColorValue,
-  borderless: boolean,
-  rippleRadius?: number | null,
-): RippleBackgroundPropType;
-```
-
-Creates an object that represents ripple drawable with specified color (as a string). If property `borderless` evaluates to true the ripple will render outside of the view bounds (see native actionbar buttons as an example of that behavior). This background type is available on Android API level 21+.
-
-**Parameters:**
-
-| Name         | Type    | Required | Description                                 |
-| ------------ | ------- | -------- | ------------------------------------------- |
-| color        | string  | Yes      | The ripple color                            |
-| borderless   | boolean | Yes      | If the ripple can render outside its bounds |
-| rippleRadius | ?number | No       | controls the radius of the ripple effect    |
-
----
-
-### `canUseNativeForeground()`
-
-```tsx
-static canUseNativeForeground(): boolean;
-```
+---
+id: touchablenativefeedback
+title: TouchableNativeFeedback
+---
+
+> If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
+
+A wrapper for making views respond properly to touches (Android only). On Android this component uses native state drawable to display touch feedback.
+
+At the moment it only supports having a single View instance as a child node, as it's implemented by replacing that View with another instance of RCTView node with some additional properties set.
+
+Background drawable of native feedback touchable can be customized with `background` property.
+
+## Example
+
+```SnackPlayer name=TouchableNativeFeedback%20Android%20Component%20Example&supportedPlatforms=android
+import {useState} from 'react';
+import {Text, View, StyleSheet, TouchableNativeFeedback} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [rippleColor, setRippleColor] = useState(randomHexColor());
+  const [rippleOverflow, setRippleOverflow] = useState(false);
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <TouchableNativeFeedback
+          onPress={() => {
+            setRippleColor(randomHexColor());
+            setRippleOverflow(!rippleOverflow);
+          }}
+          background={TouchableNativeFeedback.Ripple(
+            rippleColor,
+            rippleOverflow,
+          )}>
+          <View style={styles.touchable}>
+            <Text style={styles.text}>TouchableNativeFeedback</Text>
+          </View>
+        </TouchableNativeFeedback>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const randomHexColor = () => {
+  return '#000000'.replace(/0/g, function () {
+    return Math.round(Math.random() * 16).toString(16);
+  });
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: 'black',
+    paddingHorizontal: 20,
+  },
+  touchable: {
+    flex: 0.33,
+    justifyContent: 'center',
+    backgroundColor: '#eeeeee',
+    borderColor: 'black',
+    borderWidth: 1,
+  },
+  text: {
+    alignSelf: 'center',
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Props
+
+### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
+
+Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
+
+---
+
+### `background`
+
+Determines the type of background drawable that's going to be used to display feedback. It takes an object with `type` property and extra data depending on the `type`. It's recommended to use one of the static methods to generate that dictionary.
+
+| Type               |
+| ------------------ |
+| backgroundPropType |
+
+---
+
+### `useForeground`
+
+Set to true to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them.
+
+Check TouchableNativeFeedback.canUseNativeForeground() first, as this is only available on Android 6.0 and above. If you try to use this on older versions you will get a warning and fallback to background.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `hasTVPreferredFocus` <div className="label android">Android</div>
+
+TV preferred focus (see documentation for the View component).
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `nextFocusDown` <div className="label android">Android</div>
+
+TV next focus down (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusForward` <div className="label android">Android</div>
+
+TV next focus forward (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusLeft` <div className="label android">Android</div>
+
+TV next focus left (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusRight` <div className="label android">Android</div>
+
+TV next focus right (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusUp` <div className="label android">Android</div>
+
+TV next focus up (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+## Methods
+
+### `SelectableBackground()`
+
+```tsx
+static SelectableBackground(
+  rippleRadius: number | null,
+): ThemeAttributeBackgroundPropType;
+```
+
+Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.
+
+---
+
+### `SelectableBackgroundBorderless()`
+
+```tsx
+static SelectableBackgroundBorderless(
+  rippleRadius: number | null,
+): ThemeAttributeBackgroundPropType;
+```
+
+Creates an object that represent android theme's default background for borderless selectable elements (`?android:attr/selectableItemBackgroundBorderless`). Available on android API level 21+. `rippleRadius` parameter controls the radius of the ripple effect.
+
+---
+
+### `Ripple()`
+
+```tsx
+static Ripple(
+  color: ColorValue,
+  borderless: boolean,
+  rippleRadius?: number | null,
+): RippleBackgroundPropType;
+```
+
+Creates an object that represents ripple drawable with specified color (as a string). If property `borderless` evaluates to true the ripple will render outside of the view bounds (see native actionbar buttons as an example of that behavior). This background type is available on Android API level 21+.
+
+**Parameters:**
+
+| Name         | Type    | Required | Description                                 |
+| ------------ | ------- | -------- | ------------------------------------------- |
+| color        | string  | Yes      | The ripple color                            |
+| borderless   | boolean | Yes      | If the ripple can render outside its bounds |
+| rippleRadius | ?number | No       | controls the radius of the ripple effect    |
+
+---
+
+### `canUseNativeForeground()`
+
+```tsx
+static canUseNativeForeground(): boolean;
+```
diff --git a/website/versioned_docs/version-0.80/touchableopacity.md b/website/versioned_docs/version-0.80/touchableopacity.md
index 90bd4693681..ab460e71c2f 100644
--- a/website/versioned_docs/version-0.80/touchableopacity.md
+++ b/website/versioned_docs/version-0.80/touchableopacity.md
@@ -1,143 +1,143 @@
----
-id: touchableopacity
-title: TouchableOpacity
----
-
-> If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
-
-A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it.
-
-Opacity is controlled by wrapping the children in an `Animated.View`, which is added to the view hierarchy. Be aware that this can affect layout.
-
-## Example
-
-```SnackPlayer name=TouchableOpacity%20Example
-import React, {useState} from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [count, setCount] = useState(0);
-  const onPress = () => setCount(prevCount => prevCount + 1);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.countContainer}>
-          <Text>Count: {count}</Text>
-        </View>
-        <TouchableOpacity style={styles.button} onPress={onPress}>
-          <Text>Press Here</Text>
-        </TouchableOpacity>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: 10,
-  },
-  button: {
-    alignItems: 'center',
-    backgroundColor: '#DDDDDD',
-    padding: 10,
-  },
-  countContainer: {
-    alignItems: 'center',
-    padding: 10,
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Props
-
-### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
-
-Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
-
----
-
-### `style`
-
-| Type                           |
-| ------------------------------ |
-| [View.style](view-style-props) |
-
----
-
-### `activeOpacity`
-
-Determines what the opacity of the wrapped view should be when touch is active. Defaults to `0.2`.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `hasTVPreferredFocus` <div className="label ios">iOS</div>
-
-_(Apple TV only)_ TV preferred focus (see documentation for the View component).
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `nextFocusDown` <div className="label android">Android</div>
-
-TV next focus down (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusForward` <div className="label android">Android</div>
-
-TV next focus forward (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusLeft` <div className="label android">Android</div>
-
-TV next focus left (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusRight` <div className="label android">Android</div>
-
-TV next focus right (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusUp` <div className="label android">Android</div>
-
-TV next focus up (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
+---
+id: touchableopacity
+title: TouchableOpacity
+---
+
+> If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
+
+A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it.
+
+Opacity is controlled by wrapping the children in an `Animated.View`, which is added to the view hierarchy. Be aware that this can affect layout.
+
+## Example
+
+```SnackPlayer name=TouchableOpacity%20Example
+import {useState} from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [count, setCount] = useState(0);
+  const onPress = () => setCount(prevCount => prevCount + 1);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.countContainer}>
+          <Text>Count: {count}</Text>
+        </View>
+        <TouchableOpacity style={styles.button} onPress={onPress}>
+          <Text>Press Here</Text>
+        </TouchableOpacity>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#DDDDDD',
+    padding: 10,
+  },
+  countContainer: {
+    alignItems: 'center',
+    padding: 10,
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Props
+
+### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
+
+Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
+
+---
+
+### `style`
+
+| Type                           |
+| ------------------------------ |
+| [View.style](view-style-props) |
+
+---
+
+### `activeOpacity`
+
+Determines what the opacity of the wrapped view should be when touch is active. Defaults to `0.2`.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `hasTVPreferredFocus` <div className="label ios">iOS</div>
+
+_(Apple TV only)_ TV preferred focus (see documentation for the View component).
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `nextFocusDown` <div className="label android">Android</div>
+
+TV next focus down (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusForward` <div className="label android">Android</div>
+
+TV next focus forward (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusLeft` <div className="label android">Android</div>
+
+TV next focus left (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusRight` <div className="label android">Android</div>
+
+TV next focus right (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusUp` <div className="label android">Android</div>
+
+TV next focus up (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
diff --git a/website/versioned_docs/version-0.80/touchablewithoutfeedback.md b/website/versioned_docs/version-0.80/touchablewithoutfeedback.md
index 2764327ad1b..04352611d98 100644
--- a/website/versioned_docs/version-0.80/touchablewithoutfeedback.md
+++ b/website/versioned_docs/version-0.80/touchablewithoutfeedback.md
@@ -1,527 +1,527 @@
----
-id: touchablewithoutfeedback
-title: TouchableWithoutFeedback
----
-
-> If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
-
-Do not use unless you have a very good reason. All elements that respond to press should have a visual feedback when touched.
-
-`TouchableWithoutFeedback` supports only one child. If you wish to have several child components, wrap them in a View. Importantly, `TouchableWithoutFeedback` works by cloning its child and applying responder props to it. It is therefore required that any intermediary components pass through those props to the underlying React Native component.
-
-## Usage Pattern
-
-```tsx
-function MyComponent(props: MyComponentProps) {
-  return (
-    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
-      <Text>My Component</Text>
-    </View>
-  );
-}
-
-<TouchableWithoutFeedback onPress={() => alert('Pressed!')}>
-  <MyComponent />
-</TouchableWithoutFeedback>;
-```
-
-## Example
-
-```SnackPlayer name=TouchableWithoutFeedback
-import React, {useState} from 'react';
-import {StyleSheet, TouchableWithoutFeedback, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const TouchableWithoutFeedbackExample = () => {
-  const [count, setCount] = useState(0);
-
-  const onPress = () => {
-    setCount(count + 1);
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.countContainer}>
-          <Text style={styles.countText}>Count: {count}</Text>
-        </View>
-        <TouchableWithoutFeedback onPress={onPress}>
-          <View style={styles.button}>
-            <Text>Touch Here</Text>
-          </View>
-        </TouchableWithoutFeedback>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: 10,
-  },
-  button: {
-    alignItems: 'center',
-    backgroundColor: '#DDDDDD',
-    padding: 10,
-  },
-  countContainer: {
-    alignItems: 'center',
-    padding: 10,
-  },
-  countText: {
-    color: '#FF00FF',
-  },
-});
-
-export default TouchableWithoutFeedbackExample;
-```
-
----
-
-# Reference
-
-## Props
-
-### `accessibilityIgnoresInvertColors` <div className="label ios">iOS</div>
-
-A value indicating this view should or should not be inverted when color inversion is turned on. A value of `true` will tell the view to not be inverted even if color inversion is turned on.
-
-See the [Accessibility guide](accessibility.md#accessibilityignoresinvertcolors) for more information.
-
-| Type    |
-| ------- |
-| Boolean |
-
----
-
-### `accessible`
-
-When `true`, indicates that the view is an accessibility element. By default, all the touchable elements are accessible.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `accessibilityLabel`
-
-Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the `Text` nodes separated by space.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityLanguage` <div className="label ios">iOS</div>
-
-A value indicating which language should be used by the screen reader when the user interacts with the element. It should follow the [BCP 47 specification](https://www.rfc-editor.org/info/bcp47).
-
-See the [iOS `accessibilityLanguage` doc](https://developer.apple.com/documentation/objectivec/nsobject/1615192-accessibilitylanguage) for more information.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityHint`
-
-An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityRole`
-
-`accessibilityRole` communicates the purpose of a component to the user of an assistive technology.
-
-`accessibilityRole` can be one of the following:
-
-- `'none'` - Used when the element has no role.
-- `'button'` - Used when the element should be treated as a button.
-- `'link'` - Used when the element should be treated as a link.
-- `'search'` - Used when the text field element should also be treated as a search field.
-- `'image'` - Used when the element should be treated as an image. Can be combined with button or link, for example.
-- `'keyboardkey'` - Used when the element acts as a keyboard key.
-- `'text'` - Used when the element should be treated as static text that cannot change.
-- `'adjustable'` - Used when an element can be "adjusted" (e.g. a slider).
-- `'imagebutton'` - Used when the element should be treated as a button and is also an image.
-- `'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.
-- `'alert'` - Used when an element contains important text to be presented to the user.
-- `'checkbox'` - Used when an element represents a checkbox which can be checked, unchecked, or have mixed checked state.
-- `'combobox'` - Used when an element represents a combo box, which allows the user to select among several choices.
-- `'menu'` - Used when the component is a menu of choices.
-- `'menubar'` - Used when a component is a container of multiple menus.
-- `'menuitem'` - Used to represent an item within a menu.
-- `'progressbar'` - Used to represent a component which indicates progress of a task.
-- `'radio'` - Used to represent a radio button.
-- `'radiogroup'` - Used to represent a group of radio buttons.
-- `'scrollbar'` - Used to represent a scroll bar.
-- `'spinbutton'` - Used to represent a button which opens a list of choices.
-- `'switch'` - Used to represent a switch which can be turned on and off.
-- `'tab'` - Used to represent a tab.
-- `'tablist'` - Used to represent a list of tabs.
-- `'timer'` - Used to represent a timer.
-- `'toolbar'` - Used to represent a tool bar (a container of action buttons or components).
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityState`
-
-Describes the current state of a component to the user of an assistive technology.
-
-See the [Accessibility guide](accessibility.md#accessibilitystate-ios-android) for more information.
-
-| Type                                                                                             |
-| ------------------------------------------------------------------------------------------------ |
-| object: `{disabled: bool, selected: bool, checked: bool or 'mixed', busy: bool, expanded: bool}` |
-
----
-
-### `accessibilityActions`
-
-Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The `accessibilityActions` property should contain a list of action objects. Each action object should contain the field name and label.
-
-See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
-
-| Type  |
-| ----- |
-| array |
-
----
-
-### `aria-busy`
-
-Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-checked`
-
-Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
-| Type             | Default |
-| ---------------- | ------- |
-| boolean, 'mixed' | false   |
-
----
-
-### `aria-disabled`
-
-Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-expanded`
-
-Indicates whether an expandable element is currently expanded or collapsed.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-hidden`
-
-Indicates whether the element is hidden from assistive technologies.
-
-For example, in a window that contains sibling views `A` and `B`, setting `aria-hidden` to `true` on view `B` causes VoiceOver to ignore the `B` element and its children.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-label`
-
-Defines a string value that labels an interactive element.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `aria-live` <div className="label android">Android</div>
-
-Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
-
-- **off** Accessibility services should not announce changes to this view.
-- **polite** Accessibility services should announce changes to this view.
-- **assertive** Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
-
-| Type                                     | Default |
-| ---------------------------------------- | ------- |
-| enum(`'assertive'`, `'off'`, `'polite'`) | `'off'` |
-
----
-
-### `aria-modal` <div className="label ios">iOS</div>
-
-Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. Has precedence over the [`accessibilityViewIsModal`](#accessibilityviewismodal-ios) prop.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-selected`
-
-Indicates whether a selectable element is currently selected or not.
-
-| Type    |
-| ------- |
-| boolean |
-
-### `onAccessibilityAction`
-
-Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.
-
-See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `accessibilityValue`
-
-Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
-See the [Accessibility guide](accessibility.md#accessibilityvalue-ios-android) for more information.
-
-| Type                                                            |
-| --------------------------------------------------------------- |
-| object: `{min: number, max: number, now: number, text: string}` |
-
----
-
-### `aria-valuemax`
-
-Represents the maximum value for range-based components, such as sliders and progress bars. Has precedence over the `max` value in the `accessibilityValue` prop.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `aria-valuemin`
-
-Represents the minimum value for range-based components, such as sliders and progress bars. Has precedence over the `min` value in the `accessibilityValue` prop.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `aria-valuenow`
-
-Represents the current value for range-based components, such as sliders and progress bars. Has precedence over the `now` value in the `accessibilityValue` prop.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `aria-valuetext`
-
-Represents the textual description of the component. Has precedence over the `text` value in the `accessibilityValue` prop.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `delayLongPress`
-
-Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `delayPressIn`
-
-Duration (in milliseconds), from the start of the touch, before `onPressIn` is called.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `delayPressOut`
-
-Duration (in milliseconds), from the release of the touch, before `onPressOut` is called.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `disabled`
-
-If true, disable all interactions for this component.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `hitSlop`
-
-This defines how far your touch can start away from the button. This is added to `pressRetentionOffset` when moving off of the button.
-
-> The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
-
-| Type                   |
-| ---------------------- |
-| [Rect](rect) or number |
-
-### `id`
-
-Used to locate this view from native code. Has precedence over `nativeID` prop.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `onBlur`
-
-Invoked when the item loses focus.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
-
----
-
-### `onFocus`
-
-Invoked when the item receives focus.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
-
----
-
-### `onLayout`
-
-Invoked on mount and on layout changes.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
-
----
-
-### `onLongPress`
-
-Called if the time after `onPressIn` lasts longer than 370 milliseconds. This time period can be customized with [`delayLongPress`](#delaylongpress).
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onPress`
-
-Called when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock). The first function argument is an event in form of [PressEvent](pressevent).
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onPressIn`
-
-Called as soon as the touchable element is pressed and invoked even before onPress. This can be useful when making network requests. The first function argument is an event in form of [PressEvent](pressevent).
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onPressOut`
-
-Called as soon as the touch is released even before onPress. The first function argument is an event in form of [PressEvent](pressevent).
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `pressRetentionOffset`
-
-When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations.
-
-| Type                   |
-| ---------------------- |
-| [Rect](rect) or number |
-
----
-
-### `nativeID`
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `testID`
-
-Used to locate this view in end-to-end tests.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `touchSoundDisabled` <div className="label android">Android</div>
-
-If true, doesn't play a system sound on touch.
-
-| Type    |
-| ------- |
-| Boolean |
+---
+id: touchablewithoutfeedback
+title: TouchableWithoutFeedback
+---
+
+> If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
+
+Do not use unless you have a very good reason. All elements that respond to press should have a visual feedback when touched.
+
+`TouchableWithoutFeedback` supports only one child. If you wish to have several child components, wrap them in a View. Importantly, `TouchableWithoutFeedback` works by cloning its child and applying responder props to it. It is therefore required that any intermediary components pass through those props to the underlying React Native component.
+
+## Usage Pattern
+
+```tsx
+function MyComponent(props: MyComponentProps) {
+  return (
+    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
+      <Text>My Component</Text>
+    </View>
+  );
+}
+
+<TouchableWithoutFeedback onPress={() => alert('Pressed!')}>
+  <MyComponent />
+</TouchableWithoutFeedback>;
+```
+
+## Example
+
+```SnackPlayer name=TouchableWithoutFeedback
+import {useState} from 'react';
+import {StyleSheet, TouchableWithoutFeedback, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const TouchableWithoutFeedbackExample = () => {
+  const [count, setCount] = useState(0);
+
+  const onPress = () => {
+    setCount(count + 1);
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.countContainer}>
+          <Text style={styles.countText}>Count: {count}</Text>
+        </View>
+        <TouchableWithoutFeedback onPress={onPress}>
+          <View style={styles.button}>
+            <Text>Touch Here</Text>
+          </View>
+        </TouchableWithoutFeedback>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#DDDDDD',
+    padding: 10,
+  },
+  countContainer: {
+    alignItems: 'center',
+    padding: 10,
+  },
+  countText: {
+    color: '#FF00FF',
+  },
+});
+
+export default TouchableWithoutFeedbackExample;
+```
+
+---
+
+# Reference
+
+## Props
+
+### `accessibilityIgnoresInvertColors` <div className="label ios">iOS</div>
+
+A value indicating this view should or should not be inverted when color inversion is turned on. A value of `true` will tell the view to not be inverted even if color inversion is turned on.
+
+See the [Accessibility guide](accessibility.md#accessibilityignoresinvertcolors) for more information.
+
+| Type    |
+| ------- |
+| Boolean |
+
+---
+
+### `accessible`
+
+When `true`, indicates that the view is an accessibility element. By default, all the touchable elements are accessible.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `accessibilityLabel`
+
+Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the `Text` nodes separated by space.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityLanguage` <div className="label ios">iOS</div>
+
+A value indicating which language should be used by the screen reader when the user interacts with the element. It should follow the [BCP 47 specification](https://www.rfc-editor.org/info/bcp47).
+
+See the [iOS `accessibilityLanguage` doc](https://developer.apple.com/documentation/objectivec/nsobject/1615192-accessibilitylanguage) for more information.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityHint`
+
+An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityRole`
+
+`accessibilityRole` communicates the purpose of a component to the user of an assistive technology.
+
+`accessibilityRole` can be one of the following:
+
+- `'none'` - Used when the element has no role.
+- `'button'` - Used when the element should be treated as a button.
+- `'link'` - Used when the element should be treated as a link.
+- `'search'` - Used when the text field element should also be treated as a search field.
+- `'image'` - Used when the element should be treated as an image. Can be combined with button or link, for example.
+- `'keyboardkey'` - Used when the element acts as a keyboard key.
+- `'text'` - Used when the element should be treated as static text that cannot change.
+- `'adjustable'` - Used when an element can be "adjusted" (e.g. a slider).
+- `'imagebutton'` - Used when the element should be treated as a button and is also an image.
+- `'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.
+- `'alert'` - Used when an element contains important text to be presented to the user.
+- `'checkbox'` - Used when an element represents a checkbox which can be checked, unchecked, or have mixed checked state.
+- `'combobox'` - Used when an element represents a combo box, which allows the user to select among several choices.
+- `'menu'` - Used when the component is a menu of choices.
+- `'menubar'` - Used when a component is a container of multiple menus.
+- `'menuitem'` - Used to represent an item within a menu.
+- `'progressbar'` - Used to represent a component which indicates progress of a task.
+- `'radio'` - Used to represent a radio button.
+- `'radiogroup'` - Used to represent a group of radio buttons.
+- `'scrollbar'` - Used to represent a scroll bar.
+- `'spinbutton'` - Used to represent a button which opens a list of choices.
+- `'switch'` - Used to represent a switch which can be turned on and off.
+- `'tab'` - Used to represent a tab.
+- `'tablist'` - Used to represent a list of tabs.
+- `'timer'` - Used to represent a timer.
+- `'toolbar'` - Used to represent a tool bar (a container of action buttons or components).
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityState`
+
+Describes the current state of a component to the user of an assistive technology.
+
+See the [Accessibility guide](accessibility.md#accessibilitystate-ios-android) for more information.
+
+| Type                                                                                             |
+| ------------------------------------------------------------------------------------------------ |
+| object: `{disabled: bool, selected: bool, checked: bool or 'mixed', busy: bool, expanded: bool}` |
+
+---
+
+### `accessibilityActions`
+
+Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The `accessibilityActions` property should contain a list of action objects. Each action object should contain the field name and label.
+
+See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
+
+| Type  |
+| ----- |
+| array |
+
+---
+
+### `aria-busy`
+
+Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-checked`
+
+Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
+
+| Type             | Default |
+| ---------------- | ------- |
+| boolean, 'mixed' | false   |
+
+---
+
+### `aria-disabled`
+
+Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-expanded`
+
+Indicates whether an expandable element is currently expanded or collapsed.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-hidden`
+
+Indicates whether the element is hidden from assistive technologies.
+
+For example, in a window that contains sibling views `A` and `B`, setting `aria-hidden` to `true` on view `B` causes VoiceOver to ignore the `B` element and its children.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-label`
+
+Defines a string value that labels an interactive element.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `aria-live` <div className="label android">Android</div>
+
+Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
+
+- **off** Accessibility services should not announce changes to this view.
+- **polite** Accessibility services should announce changes to this view.
+- **assertive** Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
+
+| Type                                     | Default |
+| ---------------------------------------- | ------- |
+| enum(`'assertive'`, `'off'`, `'polite'`) | `'off'` |
+
+---
+
+### `aria-modal` <div className="label ios">iOS</div>
+
+Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. Has precedence over the [`accessibilityViewIsModal`](#accessibilityviewismodal-ios) prop.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-selected`
+
+Indicates whether a selectable element is currently selected or not.
+
+| Type    |
+| ------- |
+| boolean |
+
+### `onAccessibilityAction`
+
+Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.
+
+See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `accessibilityValue`
+
+Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
+
+See the [Accessibility guide](accessibility.md#accessibilityvalue-ios-android) for more information.
+
+| Type                                                            |
+| --------------------------------------------------------------- |
+| object: `{min: number, max: number, now: number, text: string}` |
+
+---
+
+### `aria-valuemax`
+
+Represents the maximum value for range-based components, such as sliders and progress bars. Has precedence over the `max` value in the `accessibilityValue` prop.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `aria-valuemin`
+
+Represents the minimum value for range-based components, such as sliders and progress bars. Has precedence over the `min` value in the `accessibilityValue` prop.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `aria-valuenow`
+
+Represents the current value for range-based components, such as sliders and progress bars. Has precedence over the `now` value in the `accessibilityValue` prop.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `aria-valuetext`
+
+Represents the textual description of the component. Has precedence over the `text` value in the `accessibilityValue` prop.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `delayLongPress`
+
+Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `delayPressIn`
+
+Duration (in milliseconds), from the start of the touch, before `onPressIn` is called.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `delayPressOut`
+
+Duration (in milliseconds), from the release of the touch, before `onPressOut` is called.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `disabled`
+
+If true, disable all interactions for this component.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `hitSlop`
+
+This defines how far your touch can start away from the button. This is added to `pressRetentionOffset` when moving off of the button.
+
+> The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
+
+| Type                   |
+| ---------------------- |
+| [Rect](rect) or number |
+
+### `id`
+
+Used to locate this view from native code. Has precedence over `nativeID` prop.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `onBlur`
+
+Invoked when the item loses focus.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
+
+---
+
+### `onFocus`
+
+Invoked when the item receives focus.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
+
+---
+
+### `onLayout`
+
+Invoked on mount and on layout changes.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
+
+---
+
+### `onLongPress`
+
+Called if the time after `onPressIn` lasts longer than 370 milliseconds. This time period can be customized with [`delayLongPress`](#delaylongpress).
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onPress`
+
+Called when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock). The first function argument is an event in form of [PressEvent](pressevent).
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onPressIn`
+
+Called as soon as the touchable element is pressed and invoked even before onPress. This can be useful when making network requests. The first function argument is an event in form of [PressEvent](pressevent).
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onPressOut`
+
+Called as soon as the touch is released even before onPress. The first function argument is an event in form of [PressEvent](pressevent).
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `pressRetentionOffset`
+
+When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations.
+
+| Type                   |
+| ---------------------- |
+| [Rect](rect) or number |
+
+---
+
+### `nativeID`
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `testID`
+
+Used to locate this view in end-to-end tests.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `touchSoundDisabled` <div className="label android">Android</div>
+
+If true, doesn't play a system sound on touch.
+
+| Type    |
+| ------- |
+| Boolean |
diff --git a/website/versioned_docs/version-0.80/transforms.md b/website/versioned_docs/version-0.80/transforms.md
index d3ed78c59f7..d04f53227db 100644
--- a/website/versioned_docs/version-0.80/transforms.md
+++ b/website/versioned_docs/version-0.80/transforms.md
@@ -1,399 +1,398 @@
----
-id: transforms
-title: Transforms
----
-
-Transforms are style properties that will help you modify the appearance and position of your components using 2D or 3D transformations. However, once you apply transforms, the layouts remain the same around the transformed component hence it might overlap with the nearby components. You can apply margin to the transformed component, the nearby components or padding to the container to prevent such overlaps.
-
-## Example
-
-```SnackPlayer name=Transforms%20Example
-import React from 'react';
-import {ScrollView, StyleSheet, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => (
-  <SafeAreaProvider>
-    <SafeAreaView style={styles.container}>
-      <ScrollView contentContainerStyle={styles.scrollContentContainer}>
-        <View style={styles.box}>
-          <Text style={styles.text}>Original Object</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{scale: 2}],
-            },
-          ]}>
-          <Text style={styles.text}>Scale by 2</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{scaleX: 2}],
-            },
-          ]}>
-          <Text style={styles.text}>ScaleX by 2</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{scaleY: 2}],
-            },
-          ]}>
-          <Text style={styles.text}>ScaleY by 2</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{rotate: '45deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>Rotate by 45 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{rotateX: '45deg'}, {rotateZ: '45deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>Rotate X&Z by 45 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{rotateY: '45deg'}, {rotateZ: '45deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>Rotate Y&Z by 45 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{skewX: '45deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>SkewX by 45 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{skewY: '45deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>SkewY by 45 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{skewX: '30deg'}, {skewY: '30deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>Skew X&Y by 30 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{translateX: -50}],
-            },
-          ]}>
-          <Text style={styles.text}>TranslateX by -50 </Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{translateY: 50}],
-            },
-          ]}>
-          <Text style={styles.text}>TranslateY by 50 </Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [
-                {
-                  matrix: [1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
-                },
-              ],
-            },
-          ]}>
-          <Text style={styles.text}>Matrix Transform</Text>
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  scrollContentContainer: {
-    alignItems: 'center',
-    paddingBottom: 60,
-  },
-  box: {
-    height: 100,
-    width: 100,
-    borderRadius: 5,
-    marginVertical: 40,
-    backgroundColor: '#61dafb',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  text: {
-    fontSize: 14,
-    fontWeight: 'bold',
-    margin: 8,
-    color: '#000',
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Transform
-
-`transform` accepts an array of transformation objects or space-separated string values. Each object specifies the property that will be transformed as the key, and the value to use in the transformation. Objects should not be combined. Use a single key/value pair per object.
-
-The rotate transformations require a string so that the transform may be expressed in degrees (deg) or radians (rad). For example:
-
-```js
-{
-  transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}],
-}
-```
-
-The same could also be achieved using a space-separated string:
-
-```js
-{
-  transform: 'rotateX(45deg) rotateZ(0.785398rad)',
-}
-```
-
-The skew transformations require a string so that the transform may be expressed in degrees (deg). For example:
-
-```js
-{
-  transform: [{skewX: '45deg'}],
-}
-```
-
-### Matrix Transform
-
-The `matrix` transform accepts a 4x4 transformation matrix as an array of 16 numbers. This allows you to apply complex transformations that combine translation, rotation, scaling, and skewing in a single operation.
-
-The matrix is specified in column-major order:
-
-```js
-{
-  transform: [
-    {
-      matrix: [
-        scaleX,
-        skewY,
-        0,
-        0,
-        skewX,
-        scaleY,
-        0,
-        0,
-        0,
-        0,
-        1,
-        0,
-        translateX,
-        translateY,
-        0,
-        1,
-      ],
-    },
-  ];
-}
-```
-
-For example, to apply a combination of scale and skew:
-
-```js
-{
-  transform: [
-    {
-      matrix: [
-        1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
-      ],
-    },
-  ];
-}
-```
-
-:::note
-Matrix transforms are useful when you need to apply pre-calculated transformation matrices, such as those from animation libraries or when building UI editor applications. For basic transformations, it's recommended to use the individual transform properties (scale, rotate, translate, etc.) as they are more readable.
-:::
-
-| Type                                                                                                                                                                                                                                                                                                          | Required |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
-| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number}`, `{translateY: number}`, `{skewX: string}`, `{skewY: string}` or string | No       |
-
----
-
-### `decomposedMatrix`, `rotation`, `scaleX`, `scaleY`, `transformMatrix`, `translateX`, `translateY`
-
-:::warning[Deprecated]
-Use the [`transform`](transforms#transform) prop instead.
-:::
-
-## Transform Origin
-
-The `transformOrigin` property sets the origin for a view's transformations. The transform origin is the point around which a transformation is applied. By default, the origin of a transform is `center`.
-
-# Example
-
-```SnackPlayer name=TransformOrigin%20Example
-import React, {useEffect, useRef} from 'react';
-import {Animated, View, StyleSheet, Easing} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const rotateAnim = useRef(new Animated.Value(0)).current;
-
-  useEffect(() => {
-    Animated.loop(
-      Animated.timing(rotateAnim, {
-        toValue: 1,
-        duration: 5000,
-        easing: Easing.linear,
-        useNativeDriver: true,
-      }),
-    ).start();
-  }, [rotateAnim]);
-
-  const spin = rotateAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '360deg'],
-  });
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.transformOriginWrapper}>
-          <Animated.View
-            style={[
-              styles.transformOriginView,
-              {
-                transform: [{rotate: spin}],
-              },
-            ]}
-          />
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  transformOriginWrapper: {
-    borderWidth: 1,
-    borderColor: 'rgba(0, 0, 0, 0.5)',
-  },
-  transformOriginView: {
-    backgroundColor: 'pink',
-    width: 100,
-    height: 100,
-    transformOrigin: 'top',
-  },
-});
-
-export default App;
-```
-
-### Values
-
-Transform origin supports `px`, `percentage` and keywords `top`, `left`, `right`, `bottom`, `center` values.
-
-The `transformOrigin` property may be specified using one, two, or three values, where each value represents an offset.
-
-#### One-value syntax:
-
-- The value must be a `px`, a `percentage`, or one of the keywords `left`, `center`, `right`, `top`, and `bottom`.
-
-```js
-{
-  transformOrigin: '20px',
-  transformOrigin: 'bottom',
-}
-```
-
-#### Two-value syntax:
-
-- First value (x-offset) must be a `px`, a `percentage`, or one of the keywords `left`, `center`, and `right`.
-- The second value (y-offset) must be a `px`, a `percentage`, or one of the keywords `top`, `center`, and `bottom`.
-
-```js
-{
-  transformOrigin: '10px 2px',
-  transformOrigin: 'left top',
-  transformOrigin: 'top right',
-}
-```
-
-#### Three-value syntax:
-
-- The first two values are the same as for the two-value syntax.
-- The third value (z-offset) must be a `px`. It always represents the Z offset.
-
-```js
-{
-  transformOrigin: '2px 30% 10px',
-  transformOrigin: 'right bottom 20px',
-}
-```
-
-#### Array syntax
-
-`transformOrigin` also supports an array syntax. It makes it convenient to use it with Animated APIs. It also avoids string parsing, so should be more efficient.
-
-```js
-{
-  // Using numeric values
-  transformOrigin: [10, 30, 40],
-  // Mixing numeric and percentage values
-  transformOrigin: [10, '20%', 0],
-}
-```
-
-You may refer to MDN's guide on [Transform origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin) for additional information.
+---
+id: transforms
+title: Transforms
+---
+
+Transforms are style properties that will help you modify the appearance and position of your components using 2D or 3D transformations. However, once you apply transforms, the layouts remain the same around the transformed component hence it might overlap with the nearby components. You can apply margin to the transformed component, the nearby components or padding to the container to prevent such overlaps.
+
+## Example
+
+```SnackPlayer name=Transforms%20Example
+import {ScrollView, StyleSheet, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => (
+  <SafeAreaProvider>
+    <SafeAreaView style={styles.container}>
+      <ScrollView contentContainerStyle={styles.scrollContentContainer}>
+        <View style={styles.box}>
+          <Text style={styles.text}>Original Object</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{scale: 2}],
+            },
+          ]}>
+          <Text style={styles.text}>Scale by 2</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{scaleX: 2}],
+            },
+          ]}>
+          <Text style={styles.text}>ScaleX by 2</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{scaleY: 2}],
+            },
+          ]}>
+          <Text style={styles.text}>ScaleY by 2</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{rotate: '45deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>Rotate by 45 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{rotateX: '45deg'}, {rotateZ: '45deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>Rotate X&Z by 45 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{rotateY: '45deg'}, {rotateZ: '45deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>Rotate Y&Z by 45 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{skewX: '45deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>SkewX by 45 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{skewY: '45deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>SkewY by 45 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{skewX: '30deg'}, {skewY: '30deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>Skew X&Y by 30 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{translateX: -50}],
+            },
+          ]}>
+          <Text style={styles.text}>TranslateX by -50 </Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{translateY: 50}],
+            },
+          ]}>
+          <Text style={styles.text}>TranslateY by 50 </Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [
+                {
+                  matrix: [1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
+                },
+              ],
+            },
+          ]}>
+          <Text style={styles.text}>Matrix Transform</Text>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollContentContainer: {
+    alignItems: 'center',
+    paddingBottom: 60,
+  },
+  box: {
+    height: 100,
+    width: 100,
+    borderRadius: 5,
+    marginVertical: 40,
+    backgroundColor: '#61dafb',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    margin: 8,
+    color: '#000',
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Transform
+
+`transform` accepts an array of transformation objects or space-separated string values. Each object specifies the property that will be transformed as the key, and the value to use in the transformation. Objects should not be combined. Use a single key/value pair per object.
+
+The rotate transformations require a string so that the transform may be expressed in degrees (deg) or radians (rad). For example:
+
+```js
+{
+  transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}],
+}
+```
+
+The same could also be achieved using a space-separated string:
+
+```js
+{
+  transform: 'rotateX(45deg) rotateZ(0.785398rad)',
+}
+```
+
+The skew transformations require a string so that the transform may be expressed in degrees (deg). For example:
+
+```js
+{
+  transform: [{skewX: '45deg'}],
+}
+```
+
+### Matrix Transform
+
+The `matrix` transform accepts a 4x4 transformation matrix as an array of 16 numbers. This allows you to apply complex transformations that combine translation, rotation, scaling, and skewing in a single operation.
+
+The matrix is specified in column-major order:
+
+```js
+{
+  transform: [
+    {
+      matrix: [
+        scaleX,
+        skewY,
+        0,
+        0,
+        skewX,
+        scaleY,
+        0,
+        0,
+        0,
+        0,
+        1,
+        0,
+        translateX,
+        translateY,
+        0,
+        1,
+      ],
+    },
+  ];
+}
+```
+
+For example, to apply a combination of scale and skew:
+
+```js
+{
+  transform: [
+    {
+      matrix: [
+        1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
+      ],
+    },
+  ];
+}
+```
+
+:::note
+Matrix transforms are useful when you need to apply pre-calculated transformation matrices, such as those from animation libraries or when building UI editor applications. For basic transformations, it's recommended to use the individual transform properties (scale, rotate, translate, etc.) as they are more readable.
+:::
+
+| Type                                                                                                                                                                                                                                                                                                          | Required |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
+| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number}`, `{translateY: number}`, `{skewX: string}`, `{skewY: string}` or string | No       |
+
+---
+
+### `decomposedMatrix`, `rotation`, `scaleX`, `scaleY`, `transformMatrix`, `translateX`, `translateY`
+
+:::warning[Deprecated]
+Use the [`transform`](transforms#transform) prop instead.
+:::
+
+## Transform Origin
+
+The `transformOrigin` property sets the origin for a view's transformations. The transform origin is the point around which a transformation is applied. By default, the origin of a transform is `center`.
+
+# Example
+
+```SnackPlayer name=TransformOrigin%20Example
+import {useEffect, useRef} from 'react';
+import {Animated, View, StyleSheet, Easing} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const rotateAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.timing(rotateAnim, {
+        toValue: 1,
+        duration: 5000,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      }),
+    ).start();
+  }, [rotateAnim]);
+
+  const spin = rotateAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.transformOriginWrapper}>
+          <Animated.View
+            style={[
+              styles.transformOriginView,
+              {
+                transform: [{rotate: spin}],
+              },
+            ]}
+          />
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  transformOriginWrapper: {
+    borderWidth: 1,
+    borderColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  transformOriginView: {
+    backgroundColor: 'pink',
+    width: 100,
+    height: 100,
+    transformOrigin: 'top',
+  },
+});
+
+export default App;
+```
+
+### Values
+
+Transform origin supports `px`, `percentage` and keywords `top`, `left`, `right`, `bottom`, `center` values.
+
+The `transformOrigin` property may be specified using one, two, or three values, where each value represents an offset.
+
+#### One-value syntax:
+
+- The value must be a `px`, a `percentage`, or one of the keywords `left`, `center`, `right`, `top`, and `bottom`.
+
+```js
+{
+  transformOrigin: '20px',
+  transformOrigin: 'bottom',
+}
+```
+
+#### Two-value syntax:
+
+- First value (x-offset) must be a `px`, a `percentage`, or one of the keywords `left`, `center`, and `right`.
+- The second value (y-offset) must be a `px`, a `percentage`, or one of the keywords `top`, `center`, and `bottom`.
+
+```js
+{
+  transformOrigin: '10px 2px',
+  transformOrigin: 'left top',
+  transformOrigin: 'top right',
+}
+```
+
+#### Three-value syntax:
+
+- The first two values are the same as for the two-value syntax.
+- The third value (z-offset) must be a `px`. It always represents the Z offset.
+
+```js
+{
+  transformOrigin: '2px 30% 10px',
+  transformOrigin: 'right bottom 20px',
+}
+```
+
+#### Array syntax
+
+`transformOrigin` also supports an array syntax. It makes it convenient to use it with Animated APIs. It also avoids string parsing, so should be more efficient.
+
+```js
+{
+  // Using numeric values
+  transformOrigin: [10, 30, 40],
+  // Mixing numeric and percentage values
+  transformOrigin: [10, '20%', 0],
+}
+```
+
+You may refer to MDN's guide on [Transform origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin) for additional information.
diff --git a/website/versioned_docs/version-0.80/troubleshooting.md b/website/versioned_docs/version-0.80/troubleshooting.md
index a5cad6078f0..d6dba7895e8 100644
--- a/website/versioned_docs/version-0.80/troubleshooting.md
+++ b/website/versioned_docs/version-0.80/troubleshooting.md
@@ -91,7 +91,6 @@ To revert the `User Search Header Paths` and `Header Search Paths` build setting
 React Native implements a polyfill for WebSockets. These [polyfills](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Core/InitializeCore.js) are initialized as part of the react-native module that you include in your application through `import React from 'react'`. If you load another module that requires WebSockets, such as [Firebase](https://github.com/facebook/react-native/issues/3645), be sure to load/require it after react-native:
 
 ```
-import React from 'react';
 import Firebase from 'firebase';
 ```
 
diff --git a/website/versioned_docs/version-0.80/turbo-native-modules.md b/website/versioned_docs/version-0.80/turbo-native-modules.md
index a6a67db2335..8c77475e05c 100644
--- a/website/versioned_docs/version-0.80/turbo-native-modules.md
+++ b/website/versioned_docs/version-0.80/turbo-native-modules.md
@@ -1,256 +1,256 @@
----
-id: turbo-native-modules-introduction
-title: 'Native Modules: Introduction'
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-import {TurboNativeModulesAndroid, TurboNativeModulesIOS} from './\_turbo-native-modules-components';
-
-# Native Modules
-
-Your React Native application code may need to interact with native platform APIs that aren't provided by React Native or an existing library. You can write the integration code yourself using a **Turbo Native Module**. This guide will show you how to write one.
-
-The basic steps are:
-
-1. **define a typed JavaScript specification** using one of the most popular JavaScript type annotation languages: Flow or TypeScript;
-2. **configure your dependency management system to run Codegen**, which converts the specification into native language interfaces;
-3. **write your application code** using your specification; and
-4. **write your native platform code using the generated interfaces** to write and hook your native code into the React Native runtime environment.
-
-Lets work through each of these steps by building an example Turbo Native Module. The rest of this guide assume that you have created your application running the command:
-
-```shell
-npx @react-native-community/cli@latest init TurboModuleExample --version 0.76.0
-```
-
-## Native Persistent Storage
-
-This guide will show you how to write an implementation of the [Web Storage API](https://html.spec.whatwg.org/multipage/webstorage.html#dom-localstorage-dev): `localStorage`. The API is relatable to a React developer who might be writing application code on your project.
-
-To make this work on mobile, we need to use Android and iOS APIs:
-
-- Android: [SharedPreferences](https://developer.android.com/reference/android/content/SharedPreferences), and
-- iOS: [NSUserDefaults](https://developer.apple.com/documentation/foundation/nsuserdefaults).
-
-### 1. Declare Typed Specification
-
-React Native provides a tool called [Codegen](/the-new-architecture/what-is-codegen.mdx), which takes a specification written in TypeScript or Flow and generates platform specific code for Android and iOS. The specification declares the methods and data types that will pass back and forth between your native code and the React Native JavaScript runtime. A Turbo Native Module is both your specification, the native code you write, and the Codegen interfaces generated from your specification.
-
-To create a specs file:
-
-1. Inside the root folder of your app, create a new folder called `specs`.
-2. Create a new file called `NativeLocalStorage.ts`.
-
-:::info
-You can see all of the types you can use in your specification and the native types that are generated in the [Appendix](/appendix.md) documentation.
-:::
-
-:::info
-If you want to change the name of your module and the related specs file, make sure to always use 'Native' as prefix (e.g. `NativeStorage` or `NativeUsersDefault`).
-:::
-
-Here is an implementation of the `localStorage` specification:
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultJavaScriptSpecLanguage} values={constants.javaScriptSpecLanguages}>
-<TabItem value="typescript">
-
-```typescript title="specs/NativeLocalStorage.ts"
-import type {TurboModule} from 'react-native';
-import {TurboModuleRegistry} from 'react-native';
-
-export interface Spec extends TurboModule {
-  setItem(value: string, key: string): void;
-  getItem(key: string): string | null;
-  removeItem(key: string): void;
-  clear(): void;
-}
-
-export default TurboModuleRegistry.getEnforcing<Spec>(
-  'NativeLocalStorage',
-);
-```
-
-</TabItem>
-<TabItem value="flow">
-
-```flow title="NativeLocalStorage.js"
-import type {TurboModule} from 'react-native';
-import {TurboModule, TurboModuleRegistry} from 'react-native';
-
-export interface Spec extends TurboModule {
-  setItem(value: string, key: string): void;
-  getItem(key: string): ?string;
-  removeItem(key: string): void;
-  clear(): void;
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 2. Configure Codegen to run
-
-The specification is used by the React Native Codegen tools to generate platform specific interfaces and boilerplate for us. To do this, Codegen needs to know where to find our specification and what to do with it. Update your `package.json` to include:
-
-```json title="package.json"
-     "start": "react-native start",
-     "test": "jest"
-   },
-   // highlight-add-start
-   "codegenConfig": {
-     "name": "NativeLocalStorageSpec",
-     "type": "modules",
-     "jsSrcsDir": "specs",
-     "android": {
-       "javaPackageName": "com.nativelocalstorage"
-     }
-   },
-   // highlight-add-end
-   "dependencies": {
-```
-
-With everything wired up for Codegen, we need to prepare our native code to hook into our generated code.
-
-<Tabs groupId="platforms" queryString defaultValue={constants.defaultPlatform}>
-<TabItem value="android" label="Android">
-Codegen is executed through the `generateCodegenArtifactsFromSchema` Gradle task:
-
-```bash
-cd android
-./gradlew generateCodegenArtifactsFromSchema
-
-BUILD SUCCESSFUL in 837ms
-14 actionable tasks: 3 executed, 11 up-to-date
-```
-
-This is automatically run when you build your Android application.
-</TabItem>
-<TabItem value="ios" label="iOS">
-Codegen is run as part of the script phases that's automatically added to the project generated by CocoaPods.
-
-```bash
-cd ios
-bundle install
-bundle exec pod install
-```
-
-The output will look like this:
-
-```shell
-...
-Framework build type is static library
-[Codegen] Adding script_phases to ReactCodegen.
-[Codegen] Generating ./build/generated/ios/ReactCodegen.podspec.json
-[Codegen] Analyzing /Users/me/src/TurboModuleExample/package.json
-[Codegen] Searching for codegen-enabled libraries in the app.
-[Codegen] Found TurboModuleExample
-[Codegen] Searching for codegen-enabled libraries in the project dependencies.
-[Codegen] Found react-native
-...
-```
-
-</TabItem>
-</Tabs>
-
-### 3. Write Application Code using the Turbo Native Module
-
-Using `NativeLocalStorage`, here’s a modified `App.tsx` that includes some text we want persisted, an input field and some buttons to update this value.
-
-The `TurboModuleRegistry` supports 2 modes of retrieving a Turbo Native Module:
-
-- `get<T>(name: string): T | null` which will return `null` if the Turbo Native Module is unavailable.
-- `getEnforcing<T>(name: string): T` which will throw an exception if the Turbo Native Module is unavailable. This assumes the module is always available.
-
-```tsx title="App.tsx"
-import React from 'react';
-import {
-  SafeAreaView,
-  StyleSheet,
-  Text,
-  TextInput,
-  Button,
-} from 'react-native';
-
-import NativeLocalStorage from './specs/NativeLocalStorage';
-
-const EMPTY = '<empty>';
-
-function App(): React.JSX.Element {
-  const [value, setValue] = React.useState<string | null>(null);
-
-  const [editingValue, setEditingValue] = React.useState<
-    string | null
-  >(null);
-
-  React.useEffect(() => {
-    const storedValue = NativeLocalStorage?.getItem('myKey');
-    setValue(storedValue ?? '');
-  }, []);
-
-  function saveValue() {
-    NativeLocalStorage?.setItem(editingValue ?? EMPTY, 'myKey');
-    setValue(editingValue);
-  }
-
-  function clearAll() {
-    NativeLocalStorage?.clear();
-    setValue('');
-  }
-
-  function deleteValue() {
-    NativeLocalStorage?.removeItem('myKey');
-    setValue('');
-  }
-
-  return (
-    <SafeAreaView style={{flex: 1}}>
-      <Text style={styles.text}>
-        Current stored value is: {value ?? 'No Value'}
-      </Text>
-      <TextInput
-        placeholder="Enter the text you want to store"
-        style={styles.textInput}
-        onChangeText={setEditingValue}
-      />
-      <Button title="Save" onPress={saveValue} />
-      <Button title="Delete" onPress={deleteValue} />
-      <Button title="Clear" onPress={clearAll} />
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  text: {
-    margin: 10,
-    fontSize: 20,
-  },
-  textInput: {
-    margin: 10,
-    height: 40,
-    borderColor: 'black',
-    borderWidth: 1,
-    paddingLeft: 5,
-    paddingRight: 5,
-    borderRadius: 5,
-  },
-});
-
-export default App;
-```
-
-### 4. Write your Native Platform code
-
-With everything prepared, we're going to start writing native platform code. We do this in 2 parts:
-
-:::note
-This guide shows you how to create a Turbo Native Module that only works with the New Architecture. If you need to support both the New Architecture and the Legacy Architecture, please refer to our [backwards compatibility guide](https://github.com/reactwg/react-native-new-architecture/blob/main/docs/backwards-compat.md).
-:::
-
-<Tabs groupId="platforms" queryString defaultValue={constants.defaultPlatform}>
-    <TabItem value="android" label="Android">
-        <TurboNativeModulesAndroid />
-    </TabItem>
-    <TabItem value="ios" label="iOS">
-        <TurboNativeModulesIOS/>
-    </TabItem>
-</Tabs>
+---
+id: turbo-native-modules-introduction
+title: 'Native Modules: Introduction'
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+import {TurboNativeModulesAndroid, TurboNativeModulesIOS} from './\_turbo-native-modules-components';
+
+# Native Modules
+
+Your React Native application code may need to interact with native platform APIs that aren't provided by React Native or an existing library. You can write the integration code yourself using a **Turbo Native Module**. This guide will show you how to write one.
+
+The basic steps are:
+
+1. **define a typed JavaScript specification** using one of the most popular JavaScript type annotation languages: Flow or TypeScript;
+2. **configure your dependency management system to run Codegen**, which converts the specification into native language interfaces;
+3. **write your application code** using your specification; and
+4. **write your native platform code using the generated interfaces** to write and hook your native code into the React Native runtime environment.
+
+Lets work through each of these steps by building an example Turbo Native Module. The rest of this guide assume that you have created your application running the command:
+
+```shell
+npx @react-native-community/cli@latest init TurboModuleExample --version 0.76.0
+```
+
+## Native Persistent Storage
+
+This guide will show you how to write an implementation of the [Web Storage API](https://html.spec.whatwg.org/multipage/webstorage.html#dom-localstorage-dev): `localStorage`. The API is relatable to a React developer who might be writing application code on your project.
+
+To make this work on mobile, we need to use Android and iOS APIs:
+
+- Android: [SharedPreferences](https://developer.android.com/reference/android/content/SharedPreferences), and
+- iOS: [NSUserDefaults](https://developer.apple.com/documentation/foundation/nsuserdefaults).
+
+### 1. Declare Typed Specification
+
+React Native provides a tool called [Codegen](/the-new-architecture/what-is-codegen.mdx), which takes a specification written in TypeScript or Flow and generates platform specific code for Android and iOS. The specification declares the methods and data types that will pass back and forth between your native code and the React Native JavaScript runtime. A Turbo Native Module is both your specification, the native code you write, and the Codegen interfaces generated from your specification.
+
+To create a specs file:
+
+1. Inside the root folder of your app, create a new folder called `specs`.
+2. Create a new file called `NativeLocalStorage.ts`.
+
+:::info
+You can see all of the types you can use in your specification and the native types that are generated in the [Appendix](/appendix.md) documentation.
+:::
+
+:::info
+If you want to change the name of your module and the related specs file, make sure to always use 'Native' as prefix (e.g. `NativeStorage` or `NativeUsersDefault`).
+:::
+
+Here is an implementation of the `localStorage` specification:
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultJavaScriptSpecLanguage} values={constants.javaScriptSpecLanguages}>
+<TabItem value="typescript">
+
+```typescript title="specs/NativeLocalStorage.ts"
+import type {TurboModule} from 'react-native';
+import {TurboModuleRegistry} from 'react-native';
+
+export interface Spec extends TurboModule {
+  setItem(value: string, key: string): void;
+  getItem(key: string): string | null;
+  removeItem(key: string): void;
+  clear(): void;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>(
+  'NativeLocalStorage',
+);
+```
+
+</TabItem>
+<TabItem value="flow">
+
+```flow title="NativeLocalStorage.js"
+import type {TurboModule} from 'react-native';
+import {TurboModule, TurboModuleRegistry} from 'react-native';
+
+export interface Spec extends TurboModule {
+  setItem(value: string, key: string): void;
+  getItem(key: string): ?string;
+  removeItem(key: string): void;
+  clear(): void;
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 2. Configure Codegen to run
+
+The specification is used by the React Native Codegen tools to generate platform specific interfaces and boilerplate for us. To do this, Codegen needs to know where to find our specification and what to do with it. Update your `package.json` to include:
+
+```json title="package.json"
+     "start": "react-native start",
+     "test": "jest"
+   },
+   // highlight-add-start
+   "codegenConfig": {
+     "name": "NativeLocalStorageSpec",
+     "type": "modules",
+     "jsSrcsDir": "specs",
+     "android": {
+       "javaPackageName": "com.nativelocalstorage"
+     }
+   },
+   // highlight-add-end
+   "dependencies": {
+```
+
+With everything wired up for Codegen, we need to prepare our native code to hook into our generated code.
+
+<Tabs groupId="platforms" queryString defaultValue={constants.defaultPlatform}>
+<TabItem value="android" label="Android">
+Codegen is executed through the `generateCodegenArtifactsFromSchema` Gradle task:
+
+```bash
+cd android
+./gradlew generateCodegenArtifactsFromSchema
+
+BUILD SUCCESSFUL in 837ms
+14 actionable tasks: 3 executed, 11 up-to-date
+```
+
+This is automatically run when you build your Android application.
+</TabItem>
+<TabItem value="ios" label="iOS">
+Codegen is run as part of the script phases that's automatically added to the project generated by CocoaPods.
+
+```bash
+cd ios
+bundle install
+bundle exec pod install
+```
+
+The output will look like this:
+
+```shell
+...
+Framework build type is static library
+[Codegen] Adding script_phases to ReactCodegen.
+[Codegen] Generating ./build/generated/ios/ReactCodegen.podspec.json
+[Codegen] Analyzing /Users/me/src/TurboModuleExample/package.json
+[Codegen] Searching for codegen-enabled libraries in the app.
+[Codegen] Found TurboModuleExample
+[Codegen] Searching for codegen-enabled libraries in the project dependencies.
+[Codegen] Found react-native
+...
+```
+
+</TabItem>
+</Tabs>
+
+### 3. Write Application Code using the Turbo Native Module
+
+Using `NativeLocalStorage`, here’s a modified `App.tsx` that includes some text we want persisted, an input field and some buttons to update this value.
+
+The `TurboModuleRegistry` supports 2 modes of retrieving a Turbo Native Module:
+
+- `get<T>(name: string): T | null` which will return `null` if the Turbo Native Module is unavailable.
+- `getEnforcing<T>(name: string): T` which will throw an exception if the Turbo Native Module is unavailable. This assumes the module is always available.
+
+```tsx title="App.tsx"
+import {useEffect, useState, type JSX} from 'react';
+import {
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  TextInput,
+  Button,
+} from 'react-native';
+
+import NativeLocalStorage from './specs/NativeLocalStorage';
+
+const EMPTY = '<empty>';
+
+function App(): JSX.Element {
+  const [value, setValue] = useState<string | null>(null);
+
+  const [editingValue, setEditingValue] = useState<string | null>(
+    null,
+  );
+
+  useEffect(() => {
+    const storedValue = NativeLocalStorage?.getItem('myKey');
+    setValue(storedValue ?? '');
+  }, []);
+
+  function saveValue() {
+    NativeLocalStorage?.setItem(editingValue ?? EMPTY, 'myKey');
+    setValue(editingValue);
+  }
+
+  function clearAll() {
+    NativeLocalStorage?.clear();
+    setValue('');
+  }
+
+  function deleteValue() {
+    NativeLocalStorage?.removeItem('myKey');
+    setValue('');
+  }
+
+  return (
+    <SafeAreaView style={{flex: 1}}>
+      <Text style={styles.text}>
+        Current stored value is: {value ?? 'No Value'}
+      </Text>
+      <TextInput
+        placeholder="Enter the text you want to store"
+        style={styles.textInput}
+        onChangeText={setEditingValue}
+      />
+      <Button title="Save" onPress={saveValue} />
+      <Button title="Delete" onPress={deleteValue} />
+      <Button title="Clear" onPress={clearAll} />
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  text: {
+    margin: 10,
+    fontSize: 20,
+  },
+  textInput: {
+    margin: 10,
+    height: 40,
+    borderColor: 'black',
+    borderWidth: 1,
+    paddingLeft: 5,
+    paddingRight: 5,
+    borderRadius: 5,
+  },
+});
+
+export default App;
+```
+
+### 4. Write your Native Platform code
+
+With everything prepared, we're going to start writing native platform code. We do this in 2 parts:
+
+:::note
+This guide shows you how to create a Turbo Native Module that only works with the New Architecture. If you need to support both the New Architecture and the Legacy Architecture, please refer to our [backwards compatibility guide](https://github.com/reactwg/react-native-new-architecture/blob/main/docs/backwards-compat.md).
+:::
+
+<Tabs groupId="platforms" queryString defaultValue={constants.defaultPlatform}>
+    <TabItem value="android" label="Android">
+        <TurboNativeModulesAndroid />
+    </TabItem>
+    <TabItem value="ios" label="iOS">
+        <TurboNativeModulesIOS/>
+    </TabItem>
+</Tabs>
diff --git a/website/versioned_docs/version-0.80/tutorial.md b/website/versioned_docs/version-0.80/tutorial.md
index 2430a828bcc..70b2a40706c 100644
--- a/website/versioned_docs/version-0.80/tutorial.md
+++ b/website/versioned_docs/version-0.80/tutorial.md
@@ -1,270 +1,267 @@
----
-id: tutorial
-title: Learn the Basics
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-React Native is like React, but it uses native components instead of web components as building blocks. So to understand the basic structure of a React Native app, you need to understand some of the basic React concepts, like JSX, components, `state`, and `props`. If you already know React, you still need to learn some React Native specific stuff, like the native components. This tutorial is aimed at all audiences, whether you have React experience or not.
-
-Let's do this thing.
-
-## Hello World
-
-In accordance with the ancient traditions of our people, we must first build an app that does nothing except say "Hello, world!". Here it is:
-
-```SnackPlayer name=Hello%20World
-import React from 'react';
-import {Text, View} from 'react-native';
-
-const HelloWorldApp = () => {
-  return (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}>
-      <Text>Hello, world!</Text>
-    </View>
-  );
-};
-export default HelloWorldApp;
-```
-
-If you are feeling curious, you can play around with sample code directly in the web simulators. You can also paste it into your `App.js` file to create a real app on your local machine.
-
-## What's going on here?
-
-1. First of all, we need to import `React` to be able to use `JSX`, which will then be transformed to the native components of each platform.
-2. On line 2, we import the `Text` and `View` components from `react-native`
-
-Then we define the `HelloWorldApp` function, which is a [function component](https://react.dev/reference/react/Component) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child.
-
-The `Text` component allows us to render a text, while the `View` component renders a container. This container has several styles applied, let's analyze what each one is doing.
-
-The first style that we find is `flex: 1`, the [`flex`](layout-props#flex) prop will define how your items are going to "fill" over the available space along your main axis. Since we only have one container, it will take all the available space of the parent component. In this case, it is the only component, so it will take all the available screen space.
-
-The following style is [`justifyContent`](layout-props#justifycontent): "center". This aligns children of a container in the center of the container's main axis. Finally, we have [`alignItems`](layout-props#alignitems): "center", which aligns children of a container in the center of the container's cross axis.
-
-Some of the things in here might not look like JavaScript to you. Don't panic. _This is the future_.
-
-First of all, ES2015 (also known as ES6) is a set of improvements to JavaScript that is now part of the official standard, but not yet supported by all browsers, so often it isn't used yet in web development. React Native ships with ES2015 support, so you can use this stuff without worrying about compatibility. `import`, `export`, `const` and `from` in the example above are all ES2015 features. If you aren't familiar with ES2015, you can probably pick it up by reading through sample code like this tutorial has. If you want, [this page](https://babeljs.io/learn-es2015/) has a good overview of ES2015 features.
-
-The other unusual thing in this code example is `<View><Text>Hello world!</Text></View>`. This is JSX - a syntax for embedding XML within JavaScript. Many frameworks use a specialized templating language which lets you embed code inside markup language. In React, this is reversed. JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like `<div>` or `<span>`, you use React components. In this case, `<Text>` is a [Core Component](intro-react-native-components) that displays some text and `View` is like the `<div>` or `<span>`.
-
-## Components
-
-So this code is defining `HelloWorldApp`, a new `Component`. When you're building a React Native app, you'll be making new components a lot. Anything you see on the screen is some sort of component.
-
-## Props
-
-Most components can be customized when they are created, with different parameters. These creation parameters are called props.
-
-Your own components can also use `props`. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place. Refer to `props.YOUR_PROP_NAME` in your functional components or `this.props.YOUR_PROP_NAME` in your class components. Here's an example:
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Hello%20Props&ext=js
-import React from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-
-const styles = StyleSheet.create({
-  center: {
-    alignItems: 'center',
-  },
-});
-
-const Greeting = props => {
-  return (
-    <View style={styles.center}>
-      <Text>Hello {props.name}!</Text>
-    </View>
-  );
-};
-
-const LotsOfGreetings = () => {
-  return (
-    <View style={[styles.center, {top: 50}]}>
-      <Greeting name="Rexxar" />
-      <Greeting name="Jaina" />
-      <Greeting name="Valeera" />
-    </View>
-  );
-};
-
-export default LotsOfGreetings;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Hello%20Props&ext=tsx
-import React from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-
-const styles = StyleSheet.create({
-  center: {
-    alignItems: 'center',
-  },
-});
-
-type GreetingProps = {
-  name: string;
-};
-
-const Greeting = (props: GreetingProps) => {
-  return (
-    <View style={styles.center}>
-      <Text>Hello {props.name}!</Text>
-    </View>
-  );
-};
-
-const LotsOfGreetings = () => {
-  return (
-    <View style={[styles.center, {top: 50}]}>
-      <Greeting name="Rexxar" />
-      <Greeting name="Jaina" />
-      <Greeting name="Valeera" />
-    </View>
-  );
-};
-
-export default LotsOfGreetings;
-```
-
-</TabItem>
-</Tabs>
-
-Using `name` as a prop lets us customize the `Greeting` component, so we can reuse that component for each of our greetings. This example also uses the `Greeting` component in JSX. The power to do this is what makes React so cool.
-
-The other new thing going on here is the [`View`](view.md) component. A [`View`](view.md) is useful as a container for other components, to help control style and layout.
-
-With `props` and the basic [`Text`](text.md), [`Image`](image.md), and [`View`](view.md) components, you can build a wide variety of static screens. To learn how to make your app change over time, you need to [learn about State](#state).
-
-## State
-
-Unlike props [that are read-only](https://react.dev/reference/react/Component#props) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else.
-
-#### What's the difference between state and props in React?
-
-In a React component, the props are the variables that we pass from a parent component to a child component. Similarly, the state are also variables, with the difference that they are not passed as parameters, but rather that the component initializes and manages them internally.
-
-#### Are there differences between React and React Native to handle the state?
-
-<div className="two-columns">
-
-```tsx
-// ReactJS Counter Example using Hooks!
-
-import React, {useState} from 'react';
-
-
-
-const App = () => {
-  const [count, setCount] = useState(0);
-
-  return (
-    <div className="container">
-      <p>You clicked {count} times</p>
-      <button
-        onClick={() => setCount(count + 1)}>
-        Click me!
-      </button>
-    </div>
-  );
-};
-
-
-// CSS
-.container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-```
-
-```tsx
-// React Native Counter Example using Hooks!
-
-import React, {useState} from 'react';
-import {View, Text, Button, StyleSheet} from 'react-native';
-
-const App = () => {
-  const [count, setCount] = useState(0);
-
-  return (
-    <View style={styles.container}>
-      <Text>You clicked {count} times</Text>
-      <Button
-        onPress={() => setCount(count + 1)}
-        title="Click me!"
-      />
-    </View>
-  );
-};
-
-// React Native Styles
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-```
-
-</div>
-
-As shown above, there is no difference in handling the `state` between [React](https://react.dev/learn/state-a-components-memory) and `React Native`. You can use the state of your components both in classes and in functional components using [hooks](https://reactjs.org/docs/hooks-intro.html)!
-
-In the following example we will show the same above counter example using classes.
-
-```SnackPlayer name=Hello%20Classes
-import React, {Component} from 'react';
-import {StyleSheet, TouchableOpacity, Text, View} from 'react-native';
-
-class App extends Component {
-  state = {
-    count: 0,
-  };
-
-  onPress = () => {
-    this.setState({
-      count: this.state.count + 1,
-    });
-  };
-
-  render() {
-    return (
-      <View style={styles.container}>
-        <TouchableOpacity style={styles.button} onPress={this.onPress}>
-          <Text>Click me</Text>
-        </TouchableOpacity>
-        <View>
-          <Text>You clicked {this.state.count} times</Text>
-        </View>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  button: {
-    alignItems: 'center',
-    backgroundColor: '#DDDDDD',
-    padding: 10,
-    marginBottom: 10,
-  },
-});
-
-export default App;
-```
+---
+id: tutorial
+title: Learn the Basics
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+React Native is like React, but it uses native components instead of web components as building blocks. So to understand the basic structure of a React Native app, you need to understand some of the basic React concepts, like JSX, components, `state`, and `props`. If you already know React, you still need to learn some React Native specific stuff, like the native components. This tutorial is aimed at all audiences, whether you have React experience or not.
+
+Let's do this thing.
+
+## Hello World
+
+In accordance with the ancient traditions of our people, we must first build an app that does nothing except say "Hello, world!". Here it is:
+
+```SnackPlayer name=Hello%20World
+import {Text, View} from 'react-native';
+
+const HelloWorldApp = () => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}>
+      <Text>Hello, world!</Text>
+    </View>
+  );
+};
+export default HelloWorldApp;
+```
+
+If you are feeling curious, you can play around with sample code directly in the web simulators. You can also paste it into your `App.js` file to create a real app on your local machine.
+
+## What's going on here?
+
+1. First of all, we need to import `React` to be able to use `JSX`, which will then be transformed to the native components of each platform.
+2. On line 2, we import the `Text` and `View` components from `react-native`
+
+Then we define the `HelloWorldApp` function, which is a [function component](https://react.dev/reference/react/Component) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child.
+
+The `Text` component allows us to render a text, while the `View` component renders a container. This container has several styles applied, let's analyze what each one is doing.
+
+The first style that we find is `flex: 1`, the [`flex`](layout-props#flex) prop will define how your items are going to "fill" over the available space along your main axis. Since we only have one container, it will take all the available space of the parent component. In this case, it is the only component, so it will take all the available screen space.
+
+The following style is [`justifyContent`](layout-props#justifycontent): "center". This aligns children of a container in the center of the container's main axis. Finally, we have [`alignItems`](layout-props#alignitems): "center", which aligns children of a container in the center of the container's cross axis.
+
+Some of the things in here might not look like JavaScript to you. Don't panic. _This is the future_.
+
+First of all, ES2015 (also known as ES6) is a set of improvements to JavaScript that is now part of the official standard, but not yet supported by all browsers, so often it isn't used yet in web development. React Native ships with ES2015 support, so you can use this stuff without worrying about compatibility. `import`, `export`, `const` and `from` in the example above are all ES2015 features. If you aren't familiar with ES2015, you can probably pick it up by reading through sample code like this tutorial has. If you want, [this page](https://babeljs.io/learn-es2015/) has a good overview of ES2015 features.
+
+The other unusual thing in this code example is `<View><Text>Hello world!</Text></View>`. This is JSX - a syntax for embedding XML within JavaScript. Many frameworks use a specialized templating language which lets you embed code inside markup language. In React, this is reversed. JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like `<div>` or `<span>`, you use React components. In this case, `<Text>` is a [Core Component](intro-react-native-components) that displays some text and `View` is like the `<div>` or `<span>`.
+
+## Components
+
+So this code is defining `HelloWorldApp`, a new `Component`. When you're building a React Native app, you'll be making new components a lot. Anything you see on the screen is some sort of component.
+
+## Props
+
+Most components can be customized when they are created, with different parameters. These creation parameters are called props.
+
+Your own components can also use `props`. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place. Refer to `props.YOUR_PROP_NAME` in your functional components or `this.props.YOUR_PROP_NAME` in your class components. Here's an example:
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Hello%20Props&ext=js
+import {Text, View, StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  center: {
+    alignItems: 'center',
+  },
+});
+
+const Greeting = props => {
+  return (
+    <View style={styles.center}>
+      <Text>Hello {props.name}!</Text>
+    </View>
+  );
+};
+
+const LotsOfGreetings = () => {
+  return (
+    <View style={[styles.center, {top: 50}]}>
+      <Greeting name="Rexxar" />
+      <Greeting name="Jaina" />
+      <Greeting name="Valeera" />
+    </View>
+  );
+};
+
+export default LotsOfGreetings;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Hello%20Props&ext=tsx
+import {Text, View, StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  center: {
+    alignItems: 'center',
+  },
+});
+
+type GreetingProps = {
+  name: string;
+};
+
+const Greeting = (props: GreetingProps) => {
+  return (
+    <View style={styles.center}>
+      <Text>Hello {props.name}!</Text>
+    </View>
+  );
+};
+
+const LotsOfGreetings = () => {
+  return (
+    <View style={[styles.center, {top: 50}]}>
+      <Greeting name="Rexxar" />
+      <Greeting name="Jaina" />
+      <Greeting name="Valeera" />
+    </View>
+  );
+};
+
+export default LotsOfGreetings;
+```
+
+</TabItem>
+</Tabs>
+
+Using `name` as a prop lets us customize the `Greeting` component, so we can reuse that component for each of our greetings. This example also uses the `Greeting` component in JSX. The power to do this is what makes React so cool.
+
+The other new thing going on here is the [`View`](view.md) component. A [`View`](view.md) is useful as a container for other components, to help control style and layout.
+
+With `props` and the basic [`Text`](text.md), [`Image`](image.md), and [`View`](view.md) components, you can build a wide variety of static screens. To learn how to make your app change over time, you need to [learn about State](#state).
+
+## State
+
+Unlike props [that are read-only](https://react.dev/reference/react/Component#props) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else.
+
+#### What's the difference between state and props in React?
+
+In a React component, the props are the variables that we pass from a parent component to a child component. Similarly, the state are also variables, with the difference that they are not passed as parameters, but rather that the component initializes and manages them internally.
+
+#### Are there differences between React and React Native to handle the state?
+
+<div className="two-columns">
+
+```tsx
+// React Counter Example using Hooks!
+
+import {useState} from 'react';
+
+
+
+const App = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="container">
+      <p>You clicked {count} times</p>
+      <button
+        onClick={() => setCount(count + 1)}>
+        Click me!
+      </button>
+    </div>
+  );
+};
+
+
+// CSS
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+```
+
+```tsx
+// React Native Counter Example using Hooks!
+
+import {useState} from 'react';
+import {View, Text, Button, StyleSheet} from 'react-native';
+
+const App = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <View style={styles.container}>
+      <Text>You clicked {count} times</Text>
+      <Button
+        onPress={() => setCount(count + 1)}
+        title="Click me!"
+      />
+    </View>
+  );
+};
+
+// React Native Styles
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+```
+
+</div>
+
+As shown above, there is no difference in handling the `state` between [React](https://react.dev/learn/state-a-components-memory) and `React Native`. You can use the state of your components both in classes and in functional components using [hooks](https://reactjs.org/docs/hooks-intro.html)!
+
+In the following example we will show the same above counter example using classes.
+
+```SnackPlayer name=Hello%20Classes
+import {Component} from 'react';
+import {StyleSheet, TouchableOpacity, Text, View} from 'react-native';
+
+class App extends Component {
+  state = {
+    count: 0,
+  };
+
+  onPress = () => {
+    this.setState({
+      count: this.state.count + 1,
+    });
+  };
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <TouchableOpacity style={styles.button} onPress={this.onPress}>
+          <Text>Click me</Text>
+        </TouchableOpacity>
+        <View>
+          <Text>You clicked {this.state.count} times</Text>
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#DDDDDD',
+    padding: 10,
+    marginBottom: 10,
+  },
+});
+
+export default App;
+```
diff --git a/website/versioned_docs/version-0.80/usecolorscheme.md b/website/versioned_docs/version-0.80/usecolorscheme.md
index 4d326283eeb..70620f7b6d1 100644
--- a/website/versioned_docs/version-0.80/usecolorscheme.md
+++ b/website/versioned_docs/version-0.80/usecolorscheme.md
@@ -20,7 +20,6 @@ The `useColorScheme` React hook provides and subscribes to color scheme updates
 ## Example
 
 ```SnackPlayer
-import React from 'react';
 import {Text, StyleSheet, useColorScheme} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.80/usewindowdimensions.md b/website/versioned_docs/version-0.80/usewindowdimensions.md
index 92bb1931d32..3e8a8077370 100644
--- a/website/versioned_docs/version-0.80/usewindowdimensions.md
+++ b/website/versioned_docs/version-0.80/usewindowdimensions.md
@@ -16,7 +16,6 @@ const {height, width} = useWindowDimensions();
 ## Example
 
 ```SnackPlayer name=useWindowDimensions&supportedPlatforms=ios,android
-import React from 'react';
 import {StyleSheet, Text, useWindowDimensions} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.80/using-a-listview.md b/website/versioned_docs/version-0.80/using-a-listview.md
index 878344e305d..a1db56a557a 100644
--- a/website/versioned_docs/version-0.80/using-a-listview.md
+++ b/website/versioned_docs/version-0.80/using-a-listview.md
@@ -12,7 +12,6 @@ The `FlatList` component requires two props: `data` and `renderItem`. `data` is
 This example creates a basic `FlatList` of hardcoded data. Each item in the `data` props is rendered as a `Text` component. The `FlatListBasics` component then renders the `FlatList` and all `Text` components.
 
 ```SnackPlayer name=FlatList%20Basics
-import React from 'react';
 import {FlatList, StyleSheet, Text, View} from 'react-native';
 
 const styles = StyleSheet.create({
@@ -55,7 +54,6 @@ export default FlatListBasics;
 If you want to render a set of data broken into logical sections, maybe with section headers, similar to `UITableView`s on iOS, then a [SectionList](sectionlist.md) is the way to go.
 
 ```SnackPlayer name=SectionList%20Basics
-import React from 'react';
 import {SectionList, StyleSheet, Text, View} from 'react-native';
 
 const styles = StyleSheet.create({
diff --git a/website/versioned_docs/version-0.80/using-a-scrollview.md b/website/versioned_docs/version-0.80/using-a-scrollview.md
index e4de6207a71..3ffae817bf0 100644
--- a/website/versioned_docs/version-0.80/using-a-scrollview.md
+++ b/website/versioned_docs/version-0.80/using-a-scrollview.md
@@ -8,7 +8,6 @@ The [ScrollView](scrollview.md) is a generic scrolling container that can contai
 This example creates a vertical `ScrollView` with both images and text mixed together.
 
 ```SnackPlayer name=Using%20ScrollView
-import React from 'react';
 import {Image, ScrollView, Text} from 'react-native';
 
 const logo = {
diff --git a/website/versioned_docs/version-0.80/vibration.md b/website/versioned_docs/version-0.80/vibration.md
index 1105767002c..b6d0c72693f 100644
--- a/website/versioned_docs/version-0.80/vibration.md
+++ b/website/versioned_docs/version-0.80/vibration.md
@@ -8,7 +8,6 @@ Vibrates the device.
 ## Example
 
 ```SnackPlayer name=Vibration%20Example&supportedPlatforms=ios,android
-import React from 'react';
 import {
   Button,
   Platform,
diff --git a/website/versioned_docs/version-0.80/view-style-props.md b/website/versioned_docs/version-0.80/view-style-props.md
index 95895752dca..391b8212b5f 100644
--- a/website/versioned_docs/version-0.80/view-style-props.md
+++ b/website/versioned_docs/version-0.80/view-style-props.md
@@ -9,7 +9,6 @@ import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameFor
 ### Example
 
 ```SnackPlayer name=ViewStyleProps
-import React from 'react';
 import {View, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.80/view.md b/website/versioned_docs/version-0.80/view.md
index 75a78380471..5ecbd8bdd52 100644
--- a/website/versioned_docs/version-0.80/view.md
+++ b/website/versioned_docs/version-0.80/view.md
@@ -10,7 +10,6 @@ The most fundamental component for building a UI, `View` is a container that sup
 This example creates a `View` that wraps two boxes with color and a text component in a row with padding.
 
 ```SnackPlayer name=View%20Example
-import React from 'react';
 import {View, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.80/virtualizedlist.md b/website/versioned_docs/version-0.80/virtualizedlist.md
index 1bf19aa1806..3349ab7cbc6 100644
--- a/website/versioned_docs/version-0.80/virtualizedlist.md
+++ b/website/versioned_docs/version-0.80/virtualizedlist.md
@@ -15,7 +15,6 @@ Virtualization massively improves memory consumption and performance of large li
 <TabItem value="javascript">
 
 ```SnackPlayer name=VirtualizedListExample&ext=js
-import React from 'react';
 import {View, VirtualizedList, StyleSheet, Text, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -71,7 +70,6 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=VirtualizedListExample&ext=tsx
-import React from 'react';
 import {View, VirtualizedList, StyleSheet, Text, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.81/_fabric-native-components.jsx b/website/versioned_docs/version-0.81/_fabric-native-components.jsx
index fc6a3171a4f..69bc6f31268 100644
--- a/website/versioned_docs/version-0.81/_fabric-native-components.jsx
+++ b/website/versioned_docs/version-0.81/_fabric-native-components.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import IOSContent from './fabric-native-components-ios.md';
 import AndroidContent from './fabric-native-components-android.md';
 
diff --git a/website/versioned_docs/version-0.81/_integration-with-existing-apps-ios.md b/website/versioned_docs/version-0.81/_integration-with-existing-apps-ios.md
index 4b95571538b..f28e3c48bf9 100644
--- a/website/versioned_docs/version-0.81/_integration-with-existing-apps-ios.md
+++ b/website/versioned_docs/version-0.81/_integration-with-existing-apps-ios.md
@@ -1,655 +1,655 @@
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import constants from '@site/core/TabsConstants';
-import CodeBlock from '@theme/CodeBlock';
-import RNTemplateRepoLink from '@site/core/RNTemplateRepoLink';
-import {getTemplateBranchNameForCurrentVersion} from '@site/src/getTemplateBranchNameForCurrentVersion';
-
-## Key Concepts
-
-The keys to integrating React Native components into your iOS application are to:
-
-1. Set up the correct directory structure.
-2. Install the necessary NPM dependencies.
-3. Adding React Native to your Podfile configuration.
-4. Writing the TypeScript code for your first React Native screen.
-5. Integrate React Native with your iOS code using a `RCTRootView`.
-6. Testing your integration by running the bundler and seeing your app in action.
-
-## Using the Community Template
-
-While you follow this guide, we suggest you to use the [React Native Community Template](https://github.com/react-native-community/template/) as reference. The template contains a **minimal iOS app** and will help you understanding how to integrate React Native into an existing iOS app.
-
-## Prerequisites
-
-Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](getting-started-without-a-framework) to configure your development environment for building React Native apps for iOS.
-This guide also assumes you're familiar with the basics of iOS development such as creating a `UIViewController` and editing the `Podfile` file.
-
-### 1. Set up directory structure
-
-To ensure a smooth experience, create a new folder for your integrated React Native project, then **move your existing iOS project** to the `/ios` subfolder.
-
-## 2. Install NPM dependencies
-
-Go to the root directory and run the following command:
-
-<CodeBlock language="bash" title="shell">
-{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/package.json`}
-</CodeBlock>
-
-This will copy the `package.json` <RNTemplateRepoLink href="template/package.json">file from the Community template</RNTemplateRepoLink> to your project.
-
-Next, install the NPM packages by running:
-
-<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
-<TabItem value="npm">
-
-```shell
-npm install
-```
-
-</TabItem>
-<TabItem value="yarn">
-
-```shell
-yarn install
-```
-
-</TabItem>
-</Tabs>
-
-Installation process has created a new `node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
-
-Add `node_modules/` to your `.gitignore` file (here the <RNTemplateRepoLink href="template/_gitignore">Community default one</RNTemplateRepoLink>).
-
-### 3. Install Development tools
-
-### Command Line Tools for Xcode
-
-Install the Command Line Tools. Choose **Settings... (or Preferences...)** in the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.
-
-![Xcode Command Line Tools](/docs/assets/GettingStartedXcodeCommandLineTools.png)
-
-### CocoaPods
-
-[CocoaPods](https://cocoapods.org) is a package management tool for iOS and macOS development. We use it to add the actual React Native framework code locally into your current project.
-
-We recommend installing CocoaPods using [Homebrew](https://brew.sh/):
-
-```shell
-brew install cocoapods
-```
-
-## 4. Adding React Native to your app
-
-### Configuring CocoaPods
-
-To configure CocoaPods, we need two files:
-
-- A **Gemfile** that defines which Ruby dependencies we need.
-- A **Podfile** that defines how to properly install our dependencies.
-
-For the **Gemfile**, go to the root directory of your project and run this command
-
-<CodeBlock language="bash" title="shell">
-{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/Gemfile`}
-</CodeBlock>
-
-This will download the Gemfile from the template.
-
-:::note
-If you created your project with Xcode 16, you need to update the Gemfile as it follows:
-
-```diff
--gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
-+gem 'cocoapods', '1.16.2'
-gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
--gem 'xcodeproj', '< 1.26.0'
-+gem 'xcodeproj', '1.27.0'
-```
-
-Xcode 16 generates a project in a slightly different ways from previous versions of Xcode, and you need the latest CocoaPods and Xcodeproj gems to make it work properly.
-:::
-
-Similarly, for the **Podfile**, go to the `ios` folder of your project and run
-
-<CodeBlock language="bash" title="shell">
-{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/ios/Podfile`}
-</CodeBlock>
-
-Please use the Community Template as a reference point for the <RNTemplateRepoLink href="template/Gemfile">Gemfile</RNTemplateRepoLink> and for the <RNTemplateRepoLink href="template/ios/Podfile">Podfile</RNTemplateRepoLink>.
-
-:::note
-Remember to change <RNTemplateRepoLink href="template/ios/Podfile#L17">this line</RNTemplateRepoLink>.
-:::
-
-Now, we need to run a couple of extra commands to install the Ruby gems and the Pods.
-Navigate to the `ios` folder and run the following commands:
-
-```sh
-bundle install
-bundle exec pod install
-```
-
-The first command will install the Ruby dependencies and the second command will actually integrate the React Native code in your application so that your iOS files can import the React Native headers.
-
-## 5. Writing the TypeScript Code
-
-Now we will actually modify the native iOS application to integrate React Native.
-
-The first bit of code we will write is the actual React Native code for the new screen that will be integrated into our application.
-
-### Create a `index.js` file
-
-First, create an empty `index.js` file in the root of your React Native project.
-
-`index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `import`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it.
-
-Our `index.js` should look as follows (here the <RNTemplateRepoLink href="template/index.js">Community template file as reference</RNTemplateRepoLink>):
-
-```js
-import {AppRegistry} from 'react-native';
-import App from './App';
-
-AppRegistry.registerComponent('HelloWorld', () => App);
-```
-
-### Create a `App.tsx` file
-
-Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX](<https://en.wikipedia.org/wiki/JSX_(JavaScript)>) expressions. It contains the root React Native component that we will integrate into our iOS application (<RNTemplateRepoLink href="template/App.tsx">link</RNTemplateRepoLink>):
-
-```tsx
-import React from 'react';
-import {
-  SafeAreaView,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  useColorScheme,
-  View,
-} from 'react-native';
-
-import {
-  Colors,
-  DebugInstructions,
-  Header,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
-function App(): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
-
-  return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundStyle.backgroundColor}
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
-        <View
-          style={{
-            backgroundColor: isDarkMode
-              ? Colors.black
-              : Colors.white,
-            padding: 24,
-          }}>
-          <Text style={styles.title}>Step One</Text>
-          <Text>
-            Edit <Text style={styles.bold}>App.tsx</Text> to
-            change this screen and see your edits.
-          </Text>
-          <Text style={styles.title}>See your changes</Text>
-          <ReloadInstructions />
-          <Text style={styles.title}>Debug</Text>
-          <DebugInstructions />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  title: {
-    fontSize: 24,
-    fontWeight: '600',
-  },
-  bold: {
-    fontWeight: '700',
-  },
-});
-
-export default App;
-```
-
-Here is the <RNTemplateRepoLink href="template/App.tsx">Community template file as reference</RNTemplateRepoLink>.
-
-## 5. Integrating with your iOS code
-
-We now need to add some native code in order to start the React Native runtime and tell it to render our React components.
-
-### Requirements
-
-React Native initialization is now unbound to any specific part of an iOS app.
-
-React Native can be initialized using a class called `RCTReactNativeFactory`, that takes care of handling the React Native lifecycle for you.
-
-Once the class is initialized, you can either start a React Native view providing a `UIWindow` object, or you can ask for the factory to generate a `UIView` that you can load in any `UIViewController.`
-
-In the following example, we will create a ViewController that can load a React Native view as it's `view`.
-
-#### Create the ReactViewController
-
-Create a new file from template (<kbd>⌘</kbd>+<kbd>N</kbd>) and choose the Cocoa Touch Class template.
-
-Make sure to select `UIViewController` as the "Subclass of" field.
-
-<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
-<TabItem value="objc">
-
-Now open the `ReactViewController.m` file and apply the following changes
-
-```diff title="ReactViewController.m"
-#import "ReactViewController.h"
-+#import <React/RCTBundleURLProvider.h>
-+#import <RCTReactNativeFactory.h>
-+#import <RCTDefaultReactNativeFactoryDelegate.h>
-+#import <RCTAppDependencyProvider.h>
-
-
-@interface ReactViewController ()
-
-@end
-
-+@interface ReactNativeFactoryDelegate: RCTDefaultReactNativeFactoryDelegate
-+@end
-
--@implementation ReactViewController
-+@implementation ReactViewController {
-+  RCTReactNativeFactory *_factory;
-+  id<RCTReactNativeFactoryDelegate> _factoryDelegate;
-+}
-
- - (void)viewDidLoad {
-     [super viewDidLoad];
-     // Do any additional setup after loading the view.
-+    _factoryDelegate = [ReactNativeFactoryDelegate new];
-+    _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new];
-+    _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate];
-+    self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"];
- }
-
-@end
-
-+@implementation ReactNativeFactoryDelegate
-+
-+- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
-+{
-+  return [self bundleURL];
-+}
-+
-+- (NSURL *)bundleURL
-+{
-+#if DEBUG
-+  return [RCTBundleURLProvider.sharedSettings jsBundleURLForBundleRoot:@"index"];
-+#else
-+  return [NSBundle.mainBundle URLForResource:@"main" withExtension:@"jsbundle"];
-+#endif
-+}
-
-@end
-
-```
-
-</TabItem>
-<TabItem value="swift">
-
-Now open the `ReactViewController.swift` file and apply the following changes
-
-```diff title="ReactViewController.swift"
-import UIKit
-+import React
-+import React_RCTAppDelegate
-+import ReactAppDependencyProvider
-
-class ReactViewController: UIViewController {
-+  var reactNativeFactory: RCTReactNativeFactory?
-+  var reactNativeFactoryDelegate: RCTReactNativeFactoryDelegate?
-
-  override func viewDidLoad() {
-    super.viewDidLoad()
-+    reactNativeFactoryDelegate = ReactNativeDelegate()
-+    reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider()
-+    reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!)
-+    view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld")
-
-  }
-}
-
-+class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {
-+    override func sourceURL(for bridge: RCTBridge) -> URL? {
-+      self.bundleURL()
-+    }
-+
-+    override func bundleURL() -> URL? {
-+      #if DEBUG
-+      RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
-+      #else
-+      Bundle.main.url(forResource: "main", withExtension: "jsbundle")
-+      #endif
-+    }
-+
-+}
-```
-
-</TabItem>
-</Tabs>
-
-#### Presenting a React Native view in a rootViewController
-
-Finally, we can present our React Native view. To do so, we need a new View Controller that can host a view in which we can load the JS content.
-We already have the initial `ViewController`, and we can make it present the `ReactViewController`. There are several ways to do so, depending on your app. For this example, we assume that you have a button that presents React Native modally.
-
-<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
-<TabItem value="objc">
-
-```diff title="ViewController.m"
-#import "ViewController.h"
-+#import "ReactViewController.h"
-
-@interface ViewController ()
-
-@end
-
-- @implementation ViewController
-+@implementation ViewController {
-+  ReactViewController *reactViewController;
-+}
-
- - (void)viewDidLoad {
-   [super viewDidLoad];
-   // Do any additional setup after loading the view.
-   self.view.backgroundColor = UIColor.systemBackgroundColor;
-+  UIButton *button = [UIButton new];
-+  [button setTitle:@"Open React Native" forState:UIControlStateNormal];
-+  [button setTitleColor:UIColor.systemBlueColor forState:UIControlStateNormal];
-+  [button setTitleColor:UIColor.blueColor forState:UIControlStateHighlighted];
-+  [button addTarget:self action:@selector(presentReactNative) forControlEvents:UIControlEventTouchUpInside];
-+  [self.view addSubview:button];
-
-+  button.translatesAutoresizingMaskIntoConstraints = NO;
-+  [NSLayoutConstraint activateConstraints:@[
-+    [button.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor],
-+    [button.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor],
-+    [button.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor],
-+    [button.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
-+  ]];
- }
-
-+- (void)presentReactNative
-+{
-+  if (reactViewController == NULL) {
-+    reactViewController = [ReactViewController new];
-+  }
-+  [self presentViewController:reactViewController animated:YES];
-+}
-
-@end
-```
-
-</TabItem>
-<TabItem value="swift">
-
-```diff title="ViewController.swift"
-import UIKit
-
-class ViewController: UIViewController {
-
-+  var reactViewController: ReactViewController?
-
-  override func viewDidLoad() {
-    super.viewDidLoad()
-    // Do any additional setup after loading the view.
-    self.view.backgroundColor = .systemBackground
-
-+    let button = UIButton()
-+    button.setTitle("Open React Native", for: .normal)
-+    button.setTitleColor(.systemBlue, for: .normal)
-+    button.setTitleColor(.blue, for: .highlighted)
-+    button.addAction(UIAction { [weak self] _ in
-+      guard let self else { return }
-+      if reactViewController == nil {
-+       reactViewController = ReactViewController()
-+      }
-+      present(reactViewController!, animated: true)
-+    }, for: .touchUpInside)
-+    self.view.addSubview(button)
-+
-+    button.translatesAutoresizingMaskIntoConstraints = false
-+    NSLayoutConstraint.activate([
-+      button.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
-+      button.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
-+      button.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
-+      button.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
-+    ])
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-Make sure to disable the Sandbox scripting. To achieve this, in Xcode, click on your app, then on build settings. Filter for script and set the `User Script Sandboxing` to `NO`. This step is needed to properly switch between the Debug and Release version of the [Hermes engine](https://github.com/facebook/hermes/blob/main/README.md) that we ship with React Native.
-
-![Disable Sandboxing](/docs/assets/disable-sandboxing.png)
-
-Finally, make sure to add the `UIViewControllerBasedStatusBarAppearance` key into your `Info.plist` file, with value of `NO`.
-
-![Disable UIViewControllerBasedStatusBarAppearance](/docs/assets/disable-UIViewControllerBasedStatusBarAppearance.png)
-
-## 6. Test your integration
-
-You have completed all the basic steps to integrate React Native with your application. Now we will start the [Metro bundler](https://metrobundler.dev/) to build your TypeScript application code into a bundle. Metro's HTTP server shares the bundle from `localhost` on your developer environment to a simulator or device. This allows for [hot reloading](https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading).
-
-First, you need to create a `metro.config.js` file in the root of your project as follows:
-
-```js
-const {getDefaultConfig} = require('@react-native/metro-config');
-module.exports = getDefaultConfig(__dirname);
-```
-
-You can checkout the <RNTemplateRepoLink href="template/metro.config.js">`metro.config.js` file</RNTemplateRepoLink> from the Community template file as reference.
-
-Then, you need to create a `.watchmanconfig` file in the root of your project. The file must contain an empty json object:
-
-```sh
-echo {} > .watchmanconfig
-```
-
-Once you have the configuration file in place, you can run the bundler. Run the following command in the root directory of your project:
-
-<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
-<TabItem value="npm">
-
-```shell
-npm start
-```
-
-</TabItem>
-<TabItem value="yarn">
-
-```shell
-yarn start
-```
-
-</TabItem>
-</Tabs>
-
-Now build and run your iOS app as normal.
-
-Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display:
-
-<center><img src="/docs/assets/EmbeddedAppIOS078.gif" width="300" /></center>
-
-### Creating a release build in Xcode
-
-You can use Xcode to create your release builds too! The only additional step is to add a script that is executed when the app is built to package your JS and images into the iOS application.
-
-1. In Xcode, select your application
-2. Click on `Build Phases`
-3. Click on the `+` in the top left corner and select `New Run Script Phase`
-4. Click on the `Run Script` line and rename the Script to `Bundle React Native code and images`
-5. Paste in the text box the following script
-
-```sh title="Build React Native code and image"
-set -e
-
-WITH_ENVIRONMENT="$REACT_NATIVE_PATH/scripts/xcode/with-environment.sh"
-REACT_NATIVE_XCODE="$REACT_NATIVE_PATH/scripts/react-native-xcode.sh"
-
-/bin/sh -c "$WITH_ENVIRONMENT $REACT_NATIVE_XCODE"
-```
-
-6. Drag and drop the script before the one called `[CP] Embed Pods Frameworks`.
-
-Now, if you build your app for Release, it will work as expected.
-
-## 7. Passing initial props to the React Native view
-
-In some case, you'd like to pass some information from the Native app to JavaScript. For example, you might want to pass the user id of the currently logged user to React Native, together with a token that can be used to retrieve information from a database.
-
-This is possible by using the `initialProperties` parameter of the `view(withModuleName:initialProperty)` overload of the `RCTReactNativeFactory` class. The following steps shows you how to do it.
-
-### Update the App.tsx file to read the initial properties.
-
-Open the `App.tsx` file and add the following code:
-
-```diff title="App.tsx"
-import {
-  Colors,
-  DebugInstructions,
-  Header,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
--function App(): React.JSX.Element {
-+function App(props): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
-
-  return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundStyle.backgroundColor}
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
--       <View
--         style={{
--           backgroundColor: isDarkMode
--             ? Colors.black
--             : Colors.white,
--           padding: 24,
--         }}>
--         <Text style={styles.title}>Step One</Text>
--         <Text>
--           Edit <Text style={styles.bold}>App.tsx</Text> to
--           change this screen and see your edits.
--         </Text>
--         <Text style={styles.title}>See your changes</Text>
--         <ReloadInstructions />
--         <Text style={styles.title}>Debug</Text>
--         <DebugInstructions />
-+         <Text style={styles.title}>UserID: {props.userID}</Text>
-+         <Text style={styles.title}>Token: {props.token}</Text>
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  title: {
-    fontSize: 24,
-    fontWeight: '600',
-+   marginLeft: 20,
-  },
-  bold: {
-    fontWeight: '700',
-  },
-});
-
-export default App;
-```
-
-These changes will tell React Native that your App component is now accepting some properties. The `RCTreactNativeFactory` will take care of passing them to the component when it's rendered.
-
-### Update the Native code to pass the initial properties to JavaScript.
-
-<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
-<TabItem value="objc">
-
-Modify the `ReactViewController.mm` to pass the initial properties to JavaScript.
-
-```diff title="ReactViewController.mm"
- - (void)viewDidLoad {
-   [super viewDidLoad];
-   // Do any additional setup after loading the view.
-
-   _factoryDelegate = [ReactNativeFactoryDelegate new];
-   _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new];
-   _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate];
--  self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"];
-+  self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld" initialProperties:@{
-+    @"userID": @"12345678",
-+    @"token": @"secretToken"
-+  }];
-}
-```
-
-</TabItem>
-<TabItem value="swift">
-
-Modify the `ReactViewController.swift` to pass the initial properties to the React Native view.
-
-```diff title="ReactViewController.swift"
-  override func viewDidLoad() {
-    super.viewDidLoad()
-    reactNativeFactoryDelegate = ReactNativeDelegate()
-    reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider()
-    reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!)
--   view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld")
-+   view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld" initialProperties: [
-+     "userID": "12345678",
-+     "token": "secretToken"
-+])
-
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-3. Run your app once again. You should see the following screen after you present the `ReactViewController`:
-
-<center>
-  <img src="/docs/assets/brownfield-with-initial-props.png" width="30%" height="30%"/>
-</center>
-
-## Now what?
-
-At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native.
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import constants from '@site/core/TabsConstants';
+import CodeBlock from '@theme/CodeBlock';
+import RNTemplateRepoLink from '@site/core/RNTemplateRepoLink';
+import {getTemplateBranchNameForCurrentVersion} from '@site/src/getTemplateBranchNameForCurrentVersion';
+
+## Key Concepts
+
+The keys to integrating React Native components into your iOS application are to:
+
+1. Set up the correct directory structure.
+2. Install the necessary NPM dependencies.
+3. Adding React Native to your Podfile configuration.
+4. Writing the TypeScript code for your first React Native screen.
+5. Integrate React Native with your iOS code using a `RCTRootView`.
+6. Testing your integration by running the bundler and seeing your app in action.
+
+## Using the Community Template
+
+While you follow this guide, we suggest you to use the [React Native Community Template](https://github.com/react-native-community/template/) as reference. The template contains a **minimal iOS app** and will help you understanding how to integrate React Native into an existing iOS app.
+
+## Prerequisites
+
+Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](getting-started-without-a-framework) to configure your development environment for building React Native apps for iOS.
+This guide also assumes you're familiar with the basics of iOS development such as creating a `UIViewController` and editing the `Podfile` file.
+
+### 1. Set up directory structure
+
+To ensure a smooth experience, create a new folder for your integrated React Native project, then **move your existing iOS project** to the `/ios` subfolder.
+
+## 2. Install NPM dependencies
+
+Go to the root directory and run the following command:
+
+<CodeBlock language="bash" title="shell">
+{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/package.json`}
+</CodeBlock>
+
+This will copy the `package.json` <RNTemplateRepoLink href="template/package.json">file from the Community template</RNTemplateRepoLink> to your project.
+
+Next, install the NPM packages by running:
+
+<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
+<TabItem value="npm">
+
+```shell
+npm install
+```
+
+</TabItem>
+<TabItem value="yarn">
+
+```shell
+yarn install
+```
+
+</TabItem>
+</Tabs>
+
+Installation process has created a new `node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
+
+Add `node_modules/` to your `.gitignore` file (here the <RNTemplateRepoLink href="template/_gitignore">Community default one</RNTemplateRepoLink>).
+
+### 3. Install Development tools
+
+### Command Line Tools for Xcode
+
+Install the Command Line Tools. Choose **Settings... (or Preferences...)** in the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.
+
+![Xcode Command Line Tools](/docs/assets/GettingStartedXcodeCommandLineTools.png)
+
+### CocoaPods
+
+[CocoaPods](https://cocoapods.org) is a package management tool for iOS and macOS development. We use it to add the actual React Native framework code locally into your current project.
+
+We recommend installing CocoaPods using [Homebrew](https://brew.sh/):
+
+```shell
+brew install cocoapods
+```
+
+## 4. Adding React Native to your app
+
+### Configuring CocoaPods
+
+To configure CocoaPods, we need two files:
+
+- A **Gemfile** that defines which Ruby dependencies we need.
+- A **Podfile** that defines how to properly install our dependencies.
+
+For the **Gemfile**, go to the root directory of your project and run this command
+
+<CodeBlock language="bash" title="shell">
+{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/Gemfile`}
+</CodeBlock>
+
+This will download the Gemfile from the template.
+
+:::note
+If you created your project with Xcode 16, you need to update the Gemfile as it follows:
+
+```diff
+-gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
++gem 'cocoapods', '1.16.2'
+gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
+-gem 'xcodeproj', '< 1.26.0'
++gem 'xcodeproj', '1.27.0'
+```
+
+Xcode 16 generates a project in a slightly different ways from previous versions of Xcode, and you need the latest CocoaPods and Xcodeproj gems to make it work properly.
+:::
+
+Similarly, for the **Podfile**, go to the `ios` folder of your project and run
+
+<CodeBlock language="bash" title="shell">
+{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/ios/Podfile`}
+</CodeBlock>
+
+Please use the Community Template as a reference point for the <RNTemplateRepoLink href="template/Gemfile">Gemfile</RNTemplateRepoLink> and for the <RNTemplateRepoLink href="template/ios/Podfile">Podfile</RNTemplateRepoLink>.
+
+:::note
+Remember to change <RNTemplateRepoLink href="template/ios/Podfile#L17">this line</RNTemplateRepoLink>.
+:::
+
+Now, we need to run a couple of extra commands to install the Ruby gems and the Pods.
+Navigate to the `ios` folder and run the following commands:
+
+```sh
+bundle install
+bundle exec pod install
+```
+
+The first command will install the Ruby dependencies and the second command will actually integrate the React Native code in your application so that your iOS files can import the React Native headers.
+
+## 5. Writing the TypeScript Code
+
+Now we will actually modify the native iOS application to integrate React Native.
+
+The first bit of code we will write is the actual React Native code for the new screen that will be integrated into our application.
+
+### Create a `index.js` file
+
+First, create an empty `index.js` file in the root of your React Native project.
+
+`index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `import`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it.
+
+Our `index.js` should look as follows (here the <RNTemplateRepoLink href="template/index.js">Community template file as reference</RNTemplateRepoLink>):
+
+```js
+import {AppRegistry} from 'react-native';
+import App from './App';
+
+AppRegistry.registerComponent('HelloWorld', () => App);
+```
+
+### Create a `App.tsx` file
+
+Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX](<https://en.wikipedia.org/wiki/JSX_(JavaScript)>) expressions. It contains the root React Native component that we will integrate into our iOS application (<RNTemplateRepoLink href="template/App.tsx">link</RNTemplateRepoLink>):
+
+```tsx
+import {type JSX} from 'react';
+import {
+  SafeAreaView,
+  ScrollView,
+  StatusBar,
+  StyleSheet,
+  Text,
+  useColorScheme,
+  View,
+} from 'react-native';
+
+import {
+  Colors,
+  DebugInstructions,
+  Header,
+  ReloadInstructions,
+} from 'react-native/Libraries/NewAppScreen';
+
+function App(): JSX.Element {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const backgroundStyle = {
+    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+  };
+
+  return (
+    <SafeAreaView style={backgroundStyle}>
+      <StatusBar
+        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
+        backgroundColor={backgroundStyle.backgroundColor}
+      />
+      <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        style={backgroundStyle}>
+        <Header />
+        <View
+          style={{
+            backgroundColor: isDarkMode
+              ? Colors.black
+              : Colors.white,
+            padding: 24,
+          }}>
+          <Text style={styles.title}>Step One</Text>
+          <Text>
+            Edit <Text style={styles.bold}>App.tsx</Text> to
+            change this screen and see your edits.
+          </Text>
+          <Text style={styles.title}>See your changes</Text>
+          <ReloadInstructions />
+          <Text style={styles.title}>Debug</Text>
+          <DebugInstructions />
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 24,
+    fontWeight: '600',
+  },
+  bold: {
+    fontWeight: '700',
+  },
+});
+
+export default App;
+```
+
+Here is the <RNTemplateRepoLink href="template/App.tsx">Community template file as reference</RNTemplateRepoLink>.
+
+## 5. Integrating with your iOS code
+
+We now need to add some native code in order to start the React Native runtime and tell it to render our React components.
+
+### Requirements
+
+React Native initialization is now unbound to any specific part of an iOS app.
+
+React Native can be initialized using a class called `RCTReactNativeFactory`, that takes care of handling the React Native lifecycle for you.
+
+Once the class is initialized, you can either start a React Native view providing a `UIWindow` object, or you can ask for the factory to generate a `UIView` that you can load in any `UIViewController.`
+
+In the following example, we will create a ViewController that can load a React Native view as it's `view`.
+
+#### Create the ReactViewController
+
+Create a new file from template (<kbd>⌘</kbd>+<kbd>N</kbd>) and choose the Cocoa Touch Class template.
+
+Make sure to select `UIViewController` as the "Subclass of" field.
+
+<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
+<TabItem value="objc">
+
+Now open the `ReactViewController.m` file and apply the following changes
+
+```diff title="ReactViewController.m"
+#import "ReactViewController.h"
++#import <React/RCTBundleURLProvider.h>
++#import <RCTReactNativeFactory.h>
++#import <RCTDefaultReactNativeFactoryDelegate.h>
++#import <RCTAppDependencyProvider.h>
+
+
+@interface ReactViewController ()
+
+@end
+
++@interface ReactNativeFactoryDelegate: RCTDefaultReactNativeFactoryDelegate
++@end
+
+-@implementation ReactViewController
++@implementation ReactViewController {
++  RCTReactNativeFactory *_factory;
++  id<RCTReactNativeFactoryDelegate> _factoryDelegate;
++}
+
+ - (void)viewDidLoad {
+     [super viewDidLoad];
+     // Do any additional setup after loading the view.
++    _factoryDelegate = [ReactNativeFactoryDelegate new];
++    _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new];
++    _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate];
++    self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"];
+ }
+
+@end
+
++@implementation ReactNativeFactoryDelegate
++
++- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
++{
++  return [self bundleURL];
++}
++
++- (NSURL *)bundleURL
++{
++#if DEBUG
++  return [RCTBundleURLProvider.sharedSettings jsBundleURLForBundleRoot:@"index"];
++#else
++  return [NSBundle.mainBundle URLForResource:@"main" withExtension:@"jsbundle"];
++#endif
++}
+
+@end
+
+```
+
+</TabItem>
+<TabItem value="swift">
+
+Now open the `ReactViewController.swift` file and apply the following changes
+
+```diff title="ReactViewController.swift"
+import UIKit
++import React
++import React_RCTAppDelegate
++import ReactAppDependencyProvider
+
+class ReactViewController: UIViewController {
++  var reactNativeFactory: RCTReactNativeFactory?
++  var reactNativeFactoryDelegate: RCTReactNativeFactoryDelegate?
+
+  override func viewDidLoad() {
+    super.viewDidLoad()
++    reactNativeFactoryDelegate = ReactNativeDelegate()
++    reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider()
++    reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!)
++    view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld")
+
+  }
+}
+
++class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {
++    override func sourceURL(for bridge: RCTBridge) -> URL? {
++      self.bundleURL()
++    }
++
++    override func bundleURL() -> URL? {
++      #if DEBUG
++      RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
++      #else
++      Bundle.main.url(forResource: "main", withExtension: "jsbundle")
++      #endif
++    }
++
++}
+```
+
+</TabItem>
+</Tabs>
+
+#### Presenting a React Native view in a rootViewController
+
+Finally, we can present our React Native view. To do so, we need a new View Controller that can host a view in which we can load the JS content.
+We already have the initial `ViewController`, and we can make it present the `ReactViewController`. There are several ways to do so, depending on your app. For this example, we assume that you have a button that presents React Native modally.
+
+<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
+<TabItem value="objc">
+
+```diff title="ViewController.m"
+#import "ViewController.h"
++#import "ReactViewController.h"
+
+@interface ViewController ()
+
+@end
+
+- @implementation ViewController
++@implementation ViewController {
++  ReactViewController *reactViewController;
++}
+
+ - (void)viewDidLoad {
+   [super viewDidLoad];
+   // Do any additional setup after loading the view.
+   self.view.backgroundColor = UIColor.systemBackgroundColor;
++  UIButton *button = [UIButton new];
++  [button setTitle:@"Open React Native" forState:UIControlStateNormal];
++  [button setTitleColor:UIColor.systemBlueColor forState:UIControlStateNormal];
++  [button setTitleColor:UIColor.blueColor forState:UIControlStateHighlighted];
++  [button addTarget:self action:@selector(presentReactNative) forControlEvents:UIControlEventTouchUpInside];
++  [self.view addSubview:button];
+
++  button.translatesAutoresizingMaskIntoConstraints = NO;
++  [NSLayoutConstraint activateConstraints:@[
++    [button.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor],
++    [button.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor],
++    [button.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor],
++    [button.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
++  ]];
+ }
+
++- (void)presentReactNative
++{
++  if (reactViewController == NULL) {
++    reactViewController = [ReactViewController new];
++  }
++  [self presentViewController:reactViewController animated:YES];
++}
+
+@end
+```
+
+</TabItem>
+<TabItem value="swift">
+
+```diff title="ViewController.swift"
+import UIKit
+
+class ViewController: UIViewController {
+
++  var reactViewController: ReactViewController?
+
+  override func viewDidLoad() {
+    super.viewDidLoad()
+    // Do any additional setup after loading the view.
+    self.view.backgroundColor = .systemBackground
+
++    let button = UIButton()
++    button.setTitle("Open React Native", for: .normal)
++    button.setTitleColor(.systemBlue, for: .normal)
++    button.setTitleColor(.blue, for: .highlighted)
++    button.addAction(UIAction { [weak self] _ in
++      guard let self else { return }
++      if reactViewController == nil {
++       reactViewController = ReactViewController()
++      }
++      present(reactViewController!, animated: true)
++    }, for: .touchUpInside)
++    self.view.addSubview(button)
++
++    button.translatesAutoresizingMaskIntoConstraints = false
++    NSLayoutConstraint.activate([
++      button.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
++      button.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
++      button.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
++      button.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
++    ])
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+Make sure to disable the Sandbox scripting. To achieve this, in Xcode, click on your app, then on build settings. Filter for script and set the `User Script Sandboxing` to `NO`. This step is needed to properly switch between the Debug and Release version of the [Hermes engine](https://github.com/facebook/hermes/blob/main/README.md) that we ship with React Native.
+
+![Disable Sandboxing](/docs/assets/disable-sandboxing.png)
+
+Finally, make sure to add the `UIViewControllerBasedStatusBarAppearance` key into your `Info.plist` file, with value of `NO`.
+
+![Disable UIViewControllerBasedStatusBarAppearance](/docs/assets/disable-UIViewControllerBasedStatusBarAppearance.png)
+
+## 6. Test your integration
+
+You have completed all the basic steps to integrate React Native with your application. Now we will start the [Metro bundler](https://metrobundler.dev/) to build your TypeScript application code into a bundle. Metro's HTTP server shares the bundle from `localhost` on your developer environment to a simulator or device. This allows for [hot reloading](https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading).
+
+First, you need to create a `metro.config.js` file in the root of your project as follows:
+
+```js
+const {getDefaultConfig} = require('@react-native/metro-config');
+module.exports = getDefaultConfig(__dirname);
+```
+
+You can checkout the <RNTemplateRepoLink href="template/metro.config.js">`metro.config.js` file</RNTemplateRepoLink> from the Community template file as reference.
+
+Then, you need to create a `.watchmanconfig` file in the root of your project. The file must contain an empty json object:
+
+```sh
+echo {} > .watchmanconfig
+```
+
+Once you have the configuration file in place, you can run the bundler. Run the following command in the root directory of your project:
+
+<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
+<TabItem value="npm">
+
+```shell
+npm start
+```
+
+</TabItem>
+<TabItem value="yarn">
+
+```shell
+yarn start
+```
+
+</TabItem>
+</Tabs>
+
+Now build and run your iOS app as normal.
+
+Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display:
+
+<center><img src="/docs/assets/EmbeddedAppIOS078.gif" width="300" /></center>
+
+### Creating a release build in Xcode
+
+You can use Xcode to create your release builds too! The only additional step is to add a script that is executed when the app is built to package your JS and images into the iOS application.
+
+1. In Xcode, select your application
+2. Click on `Build Phases`
+3. Click on the `+` in the top left corner and select `New Run Script Phase`
+4. Click on the `Run Script` line and rename the Script to `Bundle React Native code and images`
+5. Paste in the text box the following script
+
+```sh title="Build React Native code and image"
+set -e
+
+WITH_ENVIRONMENT="$REACT_NATIVE_PATH/scripts/xcode/with-environment.sh"
+REACT_NATIVE_XCODE="$REACT_NATIVE_PATH/scripts/react-native-xcode.sh"
+
+/bin/sh -c "$WITH_ENVIRONMENT $REACT_NATIVE_XCODE"
+```
+
+6. Drag and drop the script before the one called `[CP] Embed Pods Frameworks`.
+
+Now, if you build your app for Release, it will work as expected.
+
+## 7. Passing initial props to the React Native view
+
+In some case, you'd like to pass some information from the Native app to JavaScript. For example, you might want to pass the user id of the currently logged user to React Native, together with a token that can be used to retrieve information from a database.
+
+This is possible by using the `initialProperties` parameter of the `view(withModuleName:initialProperty)` overload of the `RCTReactNativeFactory` class. The following steps shows you how to do it.
+
+### Update the App.tsx file to read the initial properties.
+
+Open the `App.tsx` file and add the following code:
+
+```diff title="App.tsx"
+import {
+  Colors,
+  DebugInstructions,
+  Header,
+  ReloadInstructions,
+} from 'react-native/Libraries/NewAppScreen';
+
+-function App(): React.JSX.Element {
++function App(props): React.JSX.Element {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const backgroundStyle = {
+    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+  };
+
+  return (
+    <SafeAreaView style={backgroundStyle}>
+      <StatusBar
+        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
+        backgroundColor={backgroundStyle.backgroundColor}
+      />
+      <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        style={backgroundStyle}>
+        <Header />
+-       <View
+-         style={{
+-           backgroundColor: isDarkMode
+-             ? Colors.black
+-             : Colors.white,
+-           padding: 24,
+-         }}>
+-         <Text style={styles.title}>Step One</Text>
+-         <Text>
+-           Edit <Text style={styles.bold}>App.tsx</Text> to
+-           change this screen and see your edits.
+-         </Text>
+-         <Text style={styles.title}>See your changes</Text>
+-         <ReloadInstructions />
+-         <Text style={styles.title}>Debug</Text>
+-         <DebugInstructions />
++         <Text style={styles.title}>UserID: {props.userID}</Text>
++         <Text style={styles.title}>Token: {props.token}</Text>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 24,
+    fontWeight: '600',
++   marginLeft: 20,
+  },
+  bold: {
+    fontWeight: '700',
+  },
+});
+
+export default App;
+```
+
+These changes will tell React Native that your App component is now accepting some properties. The `RCTreactNativeFactory` will take care of passing them to the component when it's rendered.
+
+### Update the Native code to pass the initial properties to JavaScript.
+
+<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
+<TabItem value="objc">
+
+Modify the `ReactViewController.mm` to pass the initial properties to JavaScript.
+
+```diff title="ReactViewController.mm"
+ - (void)viewDidLoad {
+   [super viewDidLoad];
+   // Do any additional setup after loading the view.
+
+   _factoryDelegate = [ReactNativeFactoryDelegate new];
+   _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new];
+   _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate];
+-  self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"];
++  self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld" initialProperties:@{
++    @"userID": @"12345678",
++    @"token": @"secretToken"
++  }];
+}
+```
+
+</TabItem>
+<TabItem value="swift">
+
+Modify the `ReactViewController.swift` to pass the initial properties to the React Native view.
+
+```diff title="ReactViewController.swift"
+  override func viewDidLoad() {
+    super.viewDidLoad()
+    reactNativeFactoryDelegate = ReactNativeDelegate()
+    reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider()
+    reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!)
+-   view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld")
++   view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld" initialProperties: [
++     "userID": "12345678",
++     "token": "secretToken"
++])
+
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+3. Run your app once again. You should see the following screen after you present the `ReactViewController`:
+
+<center>
+  <img src="/docs/assets/brownfield-with-initial-props.png" width="30%" height="30%"/>
+</center>
+
+## Now what?
+
+At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native.
diff --git a/website/versioned_docs/version-0.81/_integration-with-existing-apps-kotlin.md b/website/versioned_docs/version-0.81/_integration-with-existing-apps-kotlin.md
index 23414c63a3b..c5f7d6bc4a6 100644
--- a/website/versioned_docs/version-0.81/_integration-with-existing-apps-kotlin.md
+++ b/website/versioned_docs/version-0.81/_integration-with-existing-apps-kotlin.md
@@ -1,511 +1,510 @@
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import constants from '@site/core/TabsConstants';
-import CodeBlock from '@theme/CodeBlock';
-import RNTemplateRepoLink from '@site/core/RNTemplateRepoLink';
-import {getTemplateBranchNameForCurrentVersion} from '@site/src/getTemplateBranchNameForCurrentVersion';
-
-## Key Concepts
-
-The keys to integrating React Native components into your Android application are to:
-
-1. Set up the correct directory structure.
-2. Install the necessary NPM dependencies.
-3. Adding React Native to your Gradle configuration.
-4. Writing the TypeScript code for your first React Native screen.
-5. Integrate React Native with your Android code using a ReactActivity.
-6. Testing your integration by running the bundler and seeing your app in action.
-
-## Using the Community Template
-
-While you follow this guide, we suggest you to use the [React Native Community Template](https://github.com/react-native-community/template/) as reference. The template contains a **minimal Android app** and will help you understanding how to integrate React Native into an existing Android app.
-
-## Prerequisites
-
-Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](getting-started-without-a-framework) to configure your development environment for building React Native apps for Android.
-This guide also assumes you're familiar with the basics of Android development such as creating Activities and editing the `AndroidManifest.xml` file.
-
-## 1. Set up directory structure
-
-To ensure a smooth experience, create a new folder for your integrated React Native project, then **move your existing Android project** to the `/android` subfolder.
-
-## 2. Install NPM dependencies
-
-Go to the root directory and run the following command:
-
-<CodeBlock language="bash" title="shell">
-{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/package.json`}
-</CodeBlock>
-
-This will copy the `package.json` <RNTemplateRepoLink href="template/package.json">file from the Community template</RNTemplateRepoLink> to your project.
-
-Next, install the NPM packages by running:
-
-<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
-<TabItem value="npm">
-
-```shell
-npm install
-```
-
-</TabItem>
-<TabItem value="yarn">
-
-```shell
-yarn install
-```
-
-</TabItem>
-</Tabs>
-
-Installation process has created a new `node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
-
-Add `node_modules/` to your `.gitignore` file (here the <RNTemplateRepoLink href="template/_gitignore">Community default one</RNTemplateRepoLink>).
-
-## 3. Adding React Native to your app
-
-### Configuring Gradle
-
-React Native uses the React Native Gradle Plugin to configure your dependencies and project setup.
-
-First, let's edit your `settings.gradle` file by adding those lines (as suggested from the <RNTemplateRepoLink href="template/android/settings.gradle">Community template</RNTemplateRepoLink>):
-
-```groovy
-// Configures the React Native Gradle Settings plugin used for autolinking
-pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
-plugins { id("com.facebook.react.settings") }
-extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
-// If using .gradle.kts files:
-// extensions.configure<com.facebook.react.ReactSettingsExtension> { autolinkLibrariesFromCommand() }
-includeBuild("../node_modules/@react-native/gradle-plugin")
-
-// Include your existing Gradle modules here.
-// include(":app")
-```
-
-Then you need to open your top level `build.gradle` and include this line (as suggested from the <RNTemplateRepoLink href="template/android/build.gradle">Community template</RNTemplateRepoLink>):
-
-```diff
-buildscript {
-    repositories {
-        google()
-        mavenCentral()
-    }
-    dependencies {
-        classpath("com.android.tools.build:gradle:7.3.1")
-+       classpath("com.facebook.react:react-native-gradle-plugin")
-    }
-}
-```
-
-This makes sure the React Native Gradle Plugin (RNGP) is available inside your project.
-Finally, add those lines inside your Applications's `build.gradle` file (it's a different `build.gradle` file usually inside your `app` folder - you can use the <RNTemplateRepoLink href="template/android/build.gradle">Community template file as reference</RNTemplateRepoLink>):
-
-```diff
-apply plugin: "com.android.application"
-+apply plugin: "com.facebook.react"
-
-repositories {
-    mavenCentral()
-}
-
-dependencies {
-    // Other dependencies here
-+   // Note: we intentionally don't specify the version number here as RNGP will take care of it.
-+   // If you don't use the RNGP, you'll have to specify version manually.
-+   implementation("com.facebook.react:react-android")
-+   implementation("com.facebook.react:hermes-android")
-}
-
-+react {
-+   // Needed to enable Autolinking - https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
-+   autolinkLibrariesWithApp()
-+}
-```
-
-Finally, open your application `gradle.properties` files and add the following line (here the <RNTemplateRepoLink href="template/android/gradle.properties">Community template file as reference</RNTemplateRepoLink>):
-
-```diff
-+reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
-+newArchEnabled=true
-+hermesEnabled=true
-```
-
-### Configuring your manifest
-
-First, make sure you have the Internet permission in your `AndroidManifest.xml`:
-
-```diff
-<manifest xmlns:android="http://schemas.android.com/apk/res/android">
-
-+   <uses-permission android:name="android.permission.INTERNET" />
-
-    <application
-      android:name=".MainApplication">
-    </application>
-</manifest>
-```
-
-Then you need to enable [cleartext traffic](https://developer.android.com/training/articles/security-config#CleartextTrafficPermitted) in your **debug** `AndroidManifest.xml`:
-
-```diff
-<?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools">
-
-    <application
-+       android:usesCleartextTraffic="true"
-+       tools:targetApi="28"
-    />
-</manifest>
-```
-
-As usual, here the AndroidManifest.xml file from the Community template to use as a reference: <RNTemplateRepoLink href="template/android/app/src/main/AndroidManifest.xml">main</RNTemplateRepoLink> and <RNTemplateRepoLink href="template/android/app/src/debug/AndroidManifest.xml">debug</RNTemplateRepoLink>.
-
-This is needed as your application will communicate with your local bundler, [Metro](https://metrobundler.dev/), via HTTP.
-
-Make sure you add this only to your **debug** manifest.
-
-## 4. Writing the TypeScript Code
-
-Now we will actually modify the native Android application to integrate React Native.
-
-The first bit of code we will write is the actual React Native code for the new screen that will be integrated into our application.
-
-### Create a `index.js` file
-
-First, create an empty `index.js` file in the root of your React Native project.
-
-`index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `import`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it.
-
-Our index.js should look as follows (here the <RNTemplateRepoLink href="template/index.js">Community template file as reference</RNTemplateRepoLink>):
-
-```js
-import {AppRegistry} from 'react-native';
-import App from './App';
-
-AppRegistry.registerComponent('HelloWorld', () => App);
-```
-
-### Create a `App.tsx` file
-
-Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX](<https://en.wikipedia.org/wiki/JSX_(JavaScript)>) expressions. It contains the root React Native component that we will integrate into our Android application (<RNTemplateRepoLink href="template/App.tsx">link</RNTemplateRepoLink>):
-
-```tsx
-import React from 'react';
-import {
-  SafeAreaView,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  useColorScheme,
-  View,
-} from 'react-native';
-
-import {
-  Colors,
-  DebugInstructions,
-  Header,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
-function App(): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
-
-  return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundStyle.backgroundColor}
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
-        <View
-          style={{
-            backgroundColor: isDarkMode
-              ? Colors.black
-              : Colors.white,
-            padding: 24,
-          }}>
-          <Text style={styles.title}>Step One</Text>
-          <Text>
-            Edit <Text style={styles.bold}>App.tsx</Text> to
-            change this screen and see your edits.
-          </Text>
-          <Text style={styles.title}>See your changes</Text>
-          <ReloadInstructions />
-          <Text style={styles.title}>Debug</Text>
-          <DebugInstructions />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  title: {
-    fontSize: 24,
-    fontWeight: '600',
-  },
-  bold: {
-    fontWeight: '700',
-  },
-});
-
-export default App;
-```
-
-Here is the <RNTemplateRepoLink href="template/App.tsx">Community template file as reference</RNTemplateRepoLink>.
-
-## 5. Integrating with your Android code
-
-We now need to add some native code in order to start the React Native runtime and tell it to render our React components.
-
-### Updating your Application class
-
-First, we need to update your `Application` class to properly initialize React Native as follows:
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-
-<TabItem value="java">
-
-```diff
-package <your-package-here>;
-
-import android.app.Application;
-+import com.facebook.react.PackageList;
-+import com.facebook.react.ReactApplication;
-+import com.facebook.react.ReactHost;
-+import com.facebook.react.ReactNativeHost;
-+import com.facebook.react.ReactPackage;
-+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
-+import com.facebook.react.defaults.DefaultReactHost;
-+import com.facebook.react.defaults.DefaultReactNativeHost;
-+import com.facebook.soloader.SoLoader;
-+import com.facebook.react.soloader.OpenSourceMergedSoMapping
-+import java.util.List;
-
--class MainApplication extends Application {
-+class MainApplication extends Application implements ReactApplication {
-+ @Override
-+ public ReactNativeHost getReactNativeHost() {
-+   return new DefaultReactNativeHost(this) {
-+     @Override
-+     protected List<ReactPackage> getPackages() { return new PackageList(this).getPackages(); }
-+     @Override
-+     protected String getJSMainModuleName() { return "index"; }
-+     @Override
-+     public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; }
-+     @Override
-+     protected boolean isNewArchEnabled() { return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; }
-+     @Override
-+     protected Boolean isHermesEnabled() { return BuildConfig.IS_HERMES_ENABLED; }
-+   };
-+ }
-
-+ @Override
-+ public ReactHost getReactHost() {
-+   return DefaultReactHost.getDefaultReactHost(getApplicationContext(), getReactNativeHost());
-+ }
-
-  @Override
-  public void onCreate() {
-    super.onCreate();
-+   SoLoader.init(this, OpenSourceMergedSoMapping);
-+   if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
-+     DefaultNewArchitectureEntryPoint.load();
-+   }
-  }
-}
-```
-
-</TabItem>
-
-<TabItem value="kotlin">
-
-```diff
-// package <your-package-here>
-
-import android.app.Application
-+import com.facebook.react.PackageList
-+import com.facebook.react.ReactApplication
-+import com.facebook.react.ReactHost
-+import com.facebook.react.ReactNativeHost
-+import com.facebook.react.ReactPackage
-+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
-+import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
-+import com.facebook.react.defaults.DefaultReactNativeHost
-+import com.facebook.soloader.SoLoader
-+import com.facebook.react.soloader.OpenSourceMergedSoMapping
-
--class MainApplication : Application() {
-+class MainApplication : Application(), ReactApplication {
-
-+ override val reactNativeHost: ReactNativeHost =
-+      object : DefaultReactNativeHost(this) {
-+        override fun getPackages(): List<ReactPackage> = PackageList(this).packages
-+        override fun getJSMainModuleName(): String = "index"
-+        override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
-+        override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
-+        override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
-+      }
-
-+ override val reactHost: ReactHost
-+   get() = getDefaultReactHost(applicationContext, reactNativeHost)
-
-  override fun onCreate() {
-    super.onCreate()
-+   SoLoader.init(this, OpenSourceMergedSoMapping)
-+   if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
-+     load()
-+   }
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-As usual, here the <RNTemplateRepoLink href="template/android/app/src/main/java/com/helloworld/MainApplication.kt">`MainApplication.kt` Community template file as reference</RNTemplateRepoLink>.
-
-#### Creating a `ReactActivity`
-
-Finally, we need to create a new `Activity` that will extend `ReactActivity` and host the React Native code. This activity will be responsible for starting the React Native runtime and rendering the React component.
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-
-<TabItem value="java">
-
-```java
-// package <your-package-here>;
-
-import com.facebook.react.ReactActivity;
-import com.facebook.react.ReactActivityDelegate;
-import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
-import com.facebook.react.defaults.DefaultReactActivityDelegate;
-
-public class MyReactActivity extends ReactActivity {
-
-    @Override
-    protected String getMainComponentName() {
-        return "HelloWorld";
-    }
-
-    @Override
-    protected ReactActivityDelegate createReactActivityDelegate() {
-        return new DefaultReactActivityDelegate(this, getMainComponentName(), DefaultNewArchitectureEntryPoint.getFabricEnabled());
-    }
-}
-```
-
-</TabItem>
-
-<TabItem value="kotlin">
-
-```kotlin
-// package <your-package-here>
-
-import com.facebook.react.ReactActivity
-import com.facebook.react.ReactActivityDelegate
-import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
-import com.facebook.react.defaults.DefaultReactActivityDelegate
-
-class MyReactActivity : ReactActivity() {
-
-    override fun getMainComponentName(): String = "HelloWorld"
-
-    override fun createReactActivityDelegate(): ReactActivityDelegate =
-        DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
-}
-```
-
-</TabItem>
-</Tabs>
-
-As usual, here the <RNTemplateRepoLink href="template/android/app/src/main/java/com/helloworld/MainActivity.kt">`MainActivity.kt` Community template file as reference</RNTemplateRepoLink>.
-
-Whenever you create a new Activity, you need to add it to your `AndroidManifest.xml` file. You also need set the theme of `MyReactActivity` to `Theme.AppCompat.Light.NoActionBar` (or to any non-ActionBar theme) as otherwise your application will render an ActionBar on top of your React Native screen:
-
-```diff
-<manifest xmlns:android="http://schemas.android.com/apk/res/android">
-
-    <uses-permission android:name="android.permission.INTERNET" />
-
-    <application
-      android:name=".MainApplication">
-
-+     <activity
-+       android:name=".MyReactActivity"
-+       android:label="@string/app_name"
-+       android:theme="@style/Theme.AppCompat.Light.NoActionBar">
-+     </activity>
-    </application>
-</manifest>
-```
-
-Now your activity is ready to run some JavaScript code.
-
-## 6. Test your integration
-
-You have completed all the basic steps to integrate React Native with your application. Now we will start the [Metro bundler](https://metrobundler.dev/) to build your TypeScript application code into a bundle. Metro's HTTP server shares the bundle from `localhost` on your developer environment to a simulator or device. This allows for [hot reloading](https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading).
-
-First, you need to create a `metro.config.js` file in the root of your project as follows:
-
-```js
-const {getDefaultConfig} = require('@react-native/metro-config');
-module.exports = getDefaultConfig(__dirname);
-```
-
-You can checkout the <RNTemplateRepoLink href="template/metro.config.js">`metro.config.js` file</RNTemplateRepoLink> from the Community template file as reference.
-
-Once you have the configuration file in place, you can run the bundler. Run the following command in the root directory of your project:
-
-<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
-<TabItem value="npm">
-
-```shell
-npm start
-```
-
-</TabItem>
-<TabItem value="yarn">
-
-```shell
-yarn start
-```
-
-</TabItem>
-</Tabs>
-
-Now build and run your Android app as normal.
-
-Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display:
-
-<center><img src="/docs/assets/EmbeddedAppAndroidVideo.gif" width="300" /></center>
-
-### Creating a release build in Android Studio
-
-You can use Android Studio to create your release builds too! It’s as quick as creating release builds of your previously-existing native Android app.
-
-The React Native Gradle Plugin will take care of bundling the JS code inside your APK/App Bundle.
-
-If you're not using Android Studio, you can create a release build with:
-
-```
-cd android
-# For a Release APK
-./gradlew :app:assembleRelease
-# For a Release AAB
-./gradlew :app:bundleRelease
-```
-
-### Now what?
-
-At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native.
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import constants from '@site/core/TabsConstants';
+import CodeBlock from '@theme/CodeBlock';
+import RNTemplateRepoLink from '@site/core/RNTemplateRepoLink';
+import {getTemplateBranchNameForCurrentVersion} from '@site/src/getTemplateBranchNameForCurrentVersion';
+
+## Key Concepts
+
+The keys to integrating React Native components into your Android application are to:
+
+1. Set up the correct directory structure.
+2. Install the necessary NPM dependencies.
+3. Adding React Native to your Gradle configuration.
+4. Writing the TypeScript code for your first React Native screen.
+5. Integrate React Native with your Android code using a ReactActivity.
+6. Testing your integration by running the bundler and seeing your app in action.
+
+## Using the Community Template
+
+While you follow this guide, we suggest you to use the [React Native Community Template](https://github.com/react-native-community/template/) as reference. The template contains a **minimal Android app** and will help you understanding how to integrate React Native into an existing Android app.
+
+## Prerequisites
+
+Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](getting-started-without-a-framework) to configure your development environment for building React Native apps for Android.
+This guide also assumes you're familiar with the basics of Android development such as creating Activities and editing the `AndroidManifest.xml` file.
+
+## 1. Set up directory structure
+
+To ensure a smooth experience, create a new folder for your integrated React Native project, then **move your existing Android project** to the `/android` subfolder.
+
+## 2. Install NPM dependencies
+
+Go to the root directory and run the following command:
+
+<CodeBlock language="bash" title="shell">
+{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/package.json`}
+</CodeBlock>
+
+This will copy the `package.json` <RNTemplateRepoLink href="template/package.json">file from the Community template</RNTemplateRepoLink> to your project.
+
+Next, install the NPM packages by running:
+
+<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
+<TabItem value="npm">
+
+```shell
+npm install
+```
+
+</TabItem>
+<TabItem value="yarn">
+
+```shell
+yarn install
+```
+
+</TabItem>
+</Tabs>
+
+Installation process has created a new `node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
+
+Add `node_modules/` to your `.gitignore` file (here the <RNTemplateRepoLink href="template/_gitignore">Community default one</RNTemplateRepoLink>).
+
+## 3. Adding React Native to your app
+
+### Configuring Gradle
+
+React Native uses the React Native Gradle Plugin to configure your dependencies and project setup.
+
+First, let's edit your `settings.gradle` file by adding those lines (as suggested from the <RNTemplateRepoLink href="template/android/settings.gradle">Community template</RNTemplateRepoLink>):
+
+```groovy
+// Configures the React Native Gradle Settings plugin used for autolinking
+pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
+plugins { id("com.facebook.react.settings") }
+extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
+// If using .gradle.kts files:
+// extensions.configure<com.facebook.react.ReactSettingsExtension> { autolinkLibrariesFromCommand() }
+includeBuild("../node_modules/@react-native/gradle-plugin")
+
+// Include your existing Gradle modules here.
+// include(":app")
+```
+
+Then you need to open your top level `build.gradle` and include this line (as suggested from the <RNTemplateRepoLink href="template/android/build.gradle">Community template</RNTemplateRepoLink>):
+
+```diff
+buildscript {
+    repositories {
+        google()
+        mavenCentral()
+    }
+    dependencies {
+        classpath("com.android.tools.build:gradle:7.3.1")
++       classpath("com.facebook.react:react-native-gradle-plugin")
+    }
+}
+```
+
+This makes sure the React Native Gradle Plugin (RNGP) is available inside your project.
+Finally, add those lines inside your Applications's `build.gradle` file (it's a different `build.gradle` file usually inside your `app` folder - you can use the <RNTemplateRepoLink href="template/android/build.gradle">Community template file as reference</RNTemplateRepoLink>):
+
+```diff
+apply plugin: "com.android.application"
++apply plugin: "com.facebook.react"
+
+repositories {
+    mavenCentral()
+}
+
+dependencies {
+    // Other dependencies here
++   // Note: we intentionally don't specify the version number here as RNGP will take care of it.
++   // If you don't use the RNGP, you'll have to specify version manually.
++   implementation("com.facebook.react:react-android")
++   implementation("com.facebook.react:hermes-android")
+}
+
++react {
++   // Needed to enable Autolinking - https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
++   autolinkLibrariesWithApp()
++}
+```
+
+Finally, open your application `gradle.properties` files and add the following line (here the <RNTemplateRepoLink href="template/android/gradle.properties">Community template file as reference</RNTemplateRepoLink>):
+
+```diff
++reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
++newArchEnabled=true
++hermesEnabled=true
+```
+
+### Configuring your manifest
+
+First, make sure you have the Internet permission in your `AndroidManifest.xml`:
+
+```diff
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
++   <uses-permission android:name="android.permission.INTERNET" />
+
+    <application
+      android:name=".MainApplication">
+    </application>
+</manifest>
+```
+
+Then you need to enable [cleartext traffic](https://developer.android.com/training/articles/security-config#CleartextTrafficPermitted) in your **debug** `AndroidManifest.xml`:
+
+```diff
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <application
++       android:usesCleartextTraffic="true"
++       tools:targetApi="28"
+    />
+</manifest>
+```
+
+As usual, here the AndroidManifest.xml file from the Community template to use as a reference: <RNTemplateRepoLink href="template/android/app/src/main/AndroidManifest.xml">main</RNTemplateRepoLink> and <RNTemplateRepoLink href="template/android/app/src/debug/AndroidManifest.xml">debug</RNTemplateRepoLink>.
+
+This is needed as your application will communicate with your local bundler, [Metro](https://metrobundler.dev/), via HTTP.
+
+Make sure you add this only to your **debug** manifest.
+
+## 4. Writing the TypeScript Code
+
+Now we will actually modify the native Android application to integrate React Native.
+
+The first bit of code we will write is the actual React Native code for the new screen that will be integrated into our application.
+
+### Create a `index.js` file
+
+First, create an empty `index.js` file in the root of your React Native project.
+
+`index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `import`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it.
+
+Our index.js should look as follows (here the <RNTemplateRepoLink href="template/index.js">Community template file as reference</RNTemplateRepoLink>):
+
+```js
+import {AppRegistry} from 'react-native';
+import App from './App';
+
+AppRegistry.registerComponent('HelloWorld', () => App);
+```
+
+### Create a `App.tsx` file
+
+Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX](<https://en.wikipedia.org/wiki/JSX_(JavaScript)>) expressions. It contains the root React Native component that we will integrate into our Android application (<RNTemplateRepoLink href="template/App.tsx">link</RNTemplateRepoLink>):
+
+```tsx
+import {type JSX} from 'react';
+import {
+  SafeAreaView,
+  ScrollView,
+  StatusBar,
+  StyleSheet,
+  Text,
+  useColorScheme,
+  View,
+} from 'react-native';
+import {
+  Colors,
+  DebugInstructions,
+  Header,
+  ReloadInstructions,
+} from 'react-native/Libraries/NewAppScreen';
+
+function App(): JSX.Element {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const backgroundStyle = {
+    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+  };
+
+  return (
+    <SafeAreaView style={backgroundStyle}>
+      <StatusBar
+        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
+        backgroundColor={backgroundStyle.backgroundColor}
+      />
+      <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        style={backgroundStyle}>
+        <Header />
+        <View
+          style={{
+            backgroundColor: isDarkMode
+              ? Colors.black
+              : Colors.white,
+            padding: 24,
+          }}>
+          <Text style={styles.title}>Step One</Text>
+          <Text>
+            Edit <Text style={styles.bold}>App.tsx</Text> to
+            change this screen and see your edits.
+          </Text>
+          <Text style={styles.title}>See your changes</Text>
+          <ReloadInstructions />
+          <Text style={styles.title}>Debug</Text>
+          <DebugInstructions />
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 24,
+    fontWeight: '600',
+  },
+  bold: {
+    fontWeight: '700',
+  },
+});
+
+export default App;
+```
+
+Here is the <RNTemplateRepoLink href="template/App.tsx">Community template file as reference</RNTemplateRepoLink>.
+
+## 5. Integrating with your Android code
+
+We now need to add some native code in order to start the React Native runtime and tell it to render our React components.
+
+### Updating your Application class
+
+First, we need to update your `Application` class to properly initialize React Native as follows:
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+
+<TabItem value="java">
+
+```diff
+package <your-package-here>;
+
+import android.app.Application;
++import com.facebook.react.PackageList;
++import com.facebook.react.ReactApplication;
++import com.facebook.react.ReactHost;
++import com.facebook.react.ReactNativeHost;
++import com.facebook.react.ReactPackage;
++import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
++import com.facebook.react.defaults.DefaultReactHost;
++import com.facebook.react.defaults.DefaultReactNativeHost;
++import com.facebook.soloader.SoLoader;
++import com.facebook.react.soloader.OpenSourceMergedSoMapping
++import java.util.List;
+
+-class MainApplication extends Application {
++class MainApplication extends Application implements ReactApplication {
++ @Override
++ public ReactNativeHost getReactNativeHost() {
++   return new DefaultReactNativeHost(this) {
++     @Override
++     protected List<ReactPackage> getPackages() { return new PackageList(this).getPackages(); }
++     @Override
++     protected String getJSMainModuleName() { return "index"; }
++     @Override
++     public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; }
++     @Override
++     protected boolean isNewArchEnabled() { return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; }
++     @Override
++     protected Boolean isHermesEnabled() { return BuildConfig.IS_HERMES_ENABLED; }
++   };
++ }
+
++ @Override
++ public ReactHost getReactHost() {
++   return DefaultReactHost.getDefaultReactHost(getApplicationContext(), getReactNativeHost());
++ }
+
+  @Override
+  public void onCreate() {
+    super.onCreate();
++   SoLoader.init(this, OpenSourceMergedSoMapping);
++   if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
++     DefaultNewArchitectureEntryPoint.load();
++   }
+  }
+}
+```
+
+</TabItem>
+
+<TabItem value="kotlin">
+
+```diff
+// package <your-package-here>
+
+import android.app.Application
++import com.facebook.react.PackageList
++import com.facebook.react.ReactApplication
++import com.facebook.react.ReactHost
++import com.facebook.react.ReactNativeHost
++import com.facebook.react.ReactPackage
++import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
++import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
++import com.facebook.react.defaults.DefaultReactNativeHost
++import com.facebook.soloader.SoLoader
++import com.facebook.react.soloader.OpenSourceMergedSoMapping
+
+-class MainApplication : Application() {
++class MainApplication : Application(), ReactApplication {
+
++ override val reactNativeHost: ReactNativeHost =
++      object : DefaultReactNativeHost(this) {
++        override fun getPackages(): List<ReactPackage> = PackageList(this).packages
++        override fun getJSMainModuleName(): String = "index"
++        override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
++        override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
++        override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
++      }
+
++ override val reactHost: ReactHost
++   get() = getDefaultReactHost(applicationContext, reactNativeHost)
+
+  override fun onCreate() {
+    super.onCreate()
++   SoLoader.init(this, OpenSourceMergedSoMapping)
++   if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
++     load()
++   }
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+As usual, here the <RNTemplateRepoLink href="template/android/app/src/main/java/com/helloworld/MainApplication.kt">`MainApplication.kt` Community template file as reference</RNTemplateRepoLink>.
+
+#### Creating a `ReactActivity`
+
+Finally, we need to create a new `Activity` that will extend `ReactActivity` and host the React Native code. This activity will be responsible for starting the React Native runtime and rendering the React component.
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+
+<TabItem value="java">
+
+```java
+// package <your-package-here>;
+
+import com.facebook.react.ReactActivity;
+import com.facebook.react.ReactActivityDelegate;
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
+import com.facebook.react.defaults.DefaultReactActivityDelegate;
+
+public class MyReactActivity extends ReactActivity {
+
+    @Override
+    protected String getMainComponentName() {
+        return "HelloWorld";
+    }
+
+    @Override
+    protected ReactActivityDelegate createReactActivityDelegate() {
+        return new DefaultReactActivityDelegate(this, getMainComponentName(), DefaultNewArchitectureEntryPoint.getFabricEnabled());
+    }
+}
+```
+
+</TabItem>
+
+<TabItem value="kotlin">
+
+```kotlin
+// package <your-package-here>
+
+import com.facebook.react.ReactActivity
+import com.facebook.react.ReactActivityDelegate
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
+import com.facebook.react.defaults.DefaultReactActivityDelegate
+
+class MyReactActivity : ReactActivity() {
+
+    override fun getMainComponentName(): String = "HelloWorld"
+
+    override fun createReactActivityDelegate(): ReactActivityDelegate =
+        DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
+}
+```
+
+</TabItem>
+</Tabs>
+
+As usual, here the <RNTemplateRepoLink href="template/android/app/src/main/java/com/helloworld/MainActivity.kt">`MainActivity.kt` Community template file as reference</RNTemplateRepoLink>.
+
+Whenever you create a new Activity, you need to add it to your `AndroidManifest.xml` file. You also need set the theme of `MyReactActivity` to `Theme.AppCompat.Light.NoActionBar` (or to any non-ActionBar theme) as otherwise your application will render an ActionBar on top of your React Native screen:
+
+```diff
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <uses-permission android:name="android.permission.INTERNET" />
+
+    <application
+      android:name=".MainApplication">
+
++     <activity
++       android:name=".MyReactActivity"
++       android:label="@string/app_name"
++       android:theme="@style/Theme.AppCompat.Light.NoActionBar">
++     </activity>
+    </application>
+</manifest>
+```
+
+Now your activity is ready to run some JavaScript code.
+
+## 6. Test your integration
+
+You have completed all the basic steps to integrate React Native with your application. Now we will start the [Metro bundler](https://metrobundler.dev/) to build your TypeScript application code into a bundle. Metro's HTTP server shares the bundle from `localhost` on your developer environment to a simulator or device. This allows for [hot reloading](https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading).
+
+First, you need to create a `metro.config.js` file in the root of your project as follows:
+
+```js
+const {getDefaultConfig} = require('@react-native/metro-config');
+module.exports = getDefaultConfig(__dirname);
+```
+
+You can checkout the <RNTemplateRepoLink href="template/metro.config.js">`metro.config.js` file</RNTemplateRepoLink> from the Community template file as reference.
+
+Once you have the configuration file in place, you can run the bundler. Run the following command in the root directory of your project:
+
+<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
+<TabItem value="npm">
+
+```shell
+npm start
+```
+
+</TabItem>
+<TabItem value="yarn">
+
+```shell
+yarn start
+```
+
+</TabItem>
+</Tabs>
+
+Now build and run your Android app as normal.
+
+Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display:
+
+<center><img src="/docs/assets/EmbeddedAppAndroidVideo.gif" width="300" /></center>
+
+### Creating a release build in Android Studio
+
+You can use Android Studio to create your release builds too! It’s as quick as creating release builds of your previously-existing native Android app.
+
+The React Native Gradle Plugin will take care of bundling the JS code inside your APK/App Bundle.
+
+If you're not using Android Studio, you can create a release build with:
+
+```
+cd android
+# For a Release APK
+./gradlew :app:assembleRelease
+# For a Release AAB
+./gradlew :app:bundleRelease
+```
+
+### Now what?
+
+At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native.
diff --git a/website/versioned_docs/version-0.81/_turbo-native-modules-components.jsx b/website/versioned_docs/version-0.81/_turbo-native-modules-components.jsx
index 1bb5a1b5edb..9b17f011728 100644
--- a/website/versioned_docs/version-0.81/_turbo-native-modules-components.jsx
+++ b/website/versioned_docs/version-0.81/_turbo-native-modules-components.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import IOSContent from './turbo-native-modules-ios.md';
 import AndroidContent from './turbo-native-modules-android.md';
 
diff --git a/website/versioned_docs/version-0.81/accessibilityinfo.md b/website/versioned_docs/version-0.81/accessibilityinfo.md
index fab883898c3..c42fda62a2c 100644
--- a/website/versioned_docs/version-0.81/accessibilityinfo.md
+++ b/website/versioned_docs/version-0.81/accessibilityinfo.md
@@ -1,290 +1,290 @@
----
-id: accessibilityinfo
-title: AccessibilityInfo
----
-
-Sometimes it's useful to know whether or not the device has a screen reader that is currently active. The `AccessibilityInfo` API is designed for this purpose. You can use it to query the current state of the screen reader as well as to register to be notified when the state of the screen reader changes.
-
-## Example
-
-```SnackPlayer name=AccessibilityInfo%20Example&supportedPlatforms=android,ios
-import React, {useState, useEffect} from 'react';
-import {AccessibilityInfo, Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false);
-  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
-
-  useEffect(() => {
-    const reduceMotionChangedSubscription = AccessibilityInfo.addEventListener(
-      'reduceMotionChanged',
-      isReduceMotionEnabled => {
-        setReduceMotionEnabled(isReduceMotionEnabled);
-      },
-    );
-    const screenReaderChangedSubscription = AccessibilityInfo.addEventListener(
-      'screenReaderChanged',
-      isScreenReaderEnabled => {
-        setScreenReaderEnabled(isScreenReaderEnabled);
-      },
-    );
-
-    AccessibilityInfo.isReduceMotionEnabled().then(isReduceMotionEnabled => {
-      setReduceMotionEnabled(isReduceMotionEnabled);
-    });
-    AccessibilityInfo.isScreenReaderEnabled().then(isScreenReaderEnabled => {
-      setScreenReaderEnabled(isScreenReaderEnabled);
-    });
-
-    return () => {
-      reduceMotionChangedSubscription.remove();
-      screenReaderChangedSubscription.remove();
-    };
-  }, []);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.status}>
-          The reduce motion is {reduceMotionEnabled ? 'enabled' : 'disabled'}.
-        </Text>
-        <Text style={styles.status}>
-          The screen reader is {screenReaderEnabled ? 'enabled' : 'disabled'}.
-        </Text>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  status: {
-    margin: 30,
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Methods
-
-### `addEventListener()`
-
-```tsx
-static addEventListener(
-  eventName: AccessibilityChangeEventName | AccessibilityAnnouncementEventName,
-  handler: (
-    event: AccessibilityChangeEvent | AccessibilityAnnouncementFinishedEvent,
-  ) => void,
-): EmitterSubscription;
-```
-
-Add an event handler. Supported events:
-
-| Event name                                                                               | Description                                                                                                                                                                                                                                                                                              |
-| ---------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `accessibilityServiceChanged`<br/><div className="label two-lines android">Android</div> | Fires when some services such as TalkBack, other Android assistive technologies, and third-party accessibility services are enabled. The argument to the event handler is a boolean. The boolean is `true` when a some accessibility services is enabled and `false` otherwise.                          |
-| `announcementFinished`<br/><div className="label two-lines ios">iOS</div>                | Fires when the screen reader has finished making an announcement. The argument to the event handler is a dictionary with these keys:<ul><li>`announcement`: The string announced by the screen reader.</li><li>`success`: A boolean indicating whether the announcement was successfully made.</li></ul> |
-| `boldTextChanged`<br/><div className="label two-lines ios">iOS</div>                     | 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`<br/><div className="label two-lines ios">iOS</div>                    | 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`<br/><div className="label two-lines ios">iOS</div>                 | 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.                                  |
-| `reduceTransparencyChanged`<br/><div className="label two-lines ios">iOS</div>           | 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.                                                                                                         |
-| `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.                                                                                                                          |
-
----
-
-### `announceForAccessibility()`
-
-```tsx
-static announceForAccessibility(announcement: string);
-```
-
-Post a string to be announced by the screen reader.
-
----
-
-### `announceForAccessibilityWithOptions()`
-
-```tsx
-static announceForAccessibilityWithOptions(
-  announcement: string,
-  options: {queue?: boolean},
-);
-```
-
-Post a string to be announced by the screen reader with modification options. By default announcements will interrupt any existing speech, but on iOS they can be queued behind existing speech by setting `queue` to `true` in the options object.
-
-**Parameters:**
-
-| Name                                                              | Type   | Description                                                                                  |
-| ----------------------------------------------------------------- | ------ | -------------------------------------------------------------------------------------------- |
-| announcement <div className="label basic required">Required</div> | string | The string to be announced                                                                   |
-| options <div className="label basic required">Required</div>      | object | `queue` - queue the announcement behind existing speech <div className="label ios">iOS</div> |
-
----
-
-### `getRecommendedTimeoutMillis()` <div className="label android">Android</div>
-
-```tsx
-static getRecommendedTimeoutMillis(originalTimeout: number): Promise<number>;
-```
-
-Gets the timeout in millisecond that the user needs.
-This value is set in "Time to take action (Accessibility timeout)" of "Accessibility" settings.
-
-**Parameters:**
-
-| Name                                                                 | Type   | Description                                                                           |
-| -------------------------------------------------------------------- | ------ | ------------------------------------------------------------------------------------- |
-| originalTimeout <div className="label basic required">Required</div> | number | The timeout to return if "Accessibility timeout" is not set. Specify in milliseconds. |
-
----
-
-### `isAccessibilityServiceEnabled()` <div className="label android">Android</div>
-
-```tsx
-static isAccessibilityServiceEnabled(): Promise<boolean>;
-```
-
-Check whether any accessibility service is enabled. This includes TalkBack but also any third-party accessibility app that may be installed. To only check whether TalkBack is enabled, use [isScreenReaderEnabled](#isscreenreaderenabled). Returns a promise which resolves to a boolean. The result is `true` when some accessibility services is enabled and `false` otherwise.
-
-> **Note**: Please use [isScreenReaderEnabled](#isscreenreaderenabled) if you only want to check the status of TalkBack.
-
----
-
-### `isBoldTextEnabled()` <div className="label ios">iOS</div>
-
-```tsx
-static isBoldTextEnabled(): Promise<boolean>:
-```
-
-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()` <div className="label ios">iOS</div>
-
-```tsx
-static isGrayscaleEnabled(): Promise<boolean>;
-```
-
-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()` <div className="label ios">iOS</div>
-
-```tsx
-static isInvertColorsEnabled(): Promise<boolean>;
-```
-
-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()`
-
-```tsx
-static isReduceMotionEnabled(): Promise<boolean>;
-```
-
-Query whether reduce motion is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when reduce motion is enabled and `false` otherwise.
-
----
-
-### `isReduceTransparencyEnabled()` <div className="label ios">iOS</div>
-
-```tsx
-static isReduceTransparencyEnabled(): Promise<boolean>;
-```
-
-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()`
-
-```tsx
-static isScreenReaderEnabled(): Promise<boolean>;
-```
-
-Query whether a screen reader is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when a screen reader is enabled and `false` otherwise.
-
----
-
-### `isHighTextContrastEnabled()` <div className="label android">Android</div>
-
-```tsx
-static isHighTextContrastEnabled(): Promise<boolean>
-```
-
-Query whether high text contrast is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when high text contrast is enabled and `false` otherwise.
-
----
-
-### `isDarkerSystemColorsEnabled()` <div className="label ios">iOS</div>
-
-```tsx
-static isDarkerSystemColorsEnabled(): Promise<boolean>
-```
-
-Query whether dark system colors is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when dark system colors is enabled and `false` otherwise.
-
----
-
-### `prefersCrossFadeTransitions()` <div className="label ios">iOS</div>
-
-```tsx
-static prefersCrossFadeTransitions(): Promise<boolean>;
-```
-
-Query whether reduce motion and prefer cross-fade transitions settings are currently enabled. Returns a promise which resolves to a boolean. The result is `true` when prefer cross-fade transitions is enabled and `false` otherwise.
-
----
-
-### `setAccessibilityFocus()`
-
-:::warning[Deprecated]
-Prefer using `sendAccessibilityEvent` with eventType `focus` instead.
-:::
-
-```tsx
-static setAccessibilityFocus(reactTag: number);
-```
-
-Set accessibility focus to a React component.
-
-On Android, this calls `UIManager.sendAccessibilityEvent` method with passed `reactTag` and `UIManager.AccessibilityEventTypes.typeViewFocused` arguments.
-
-:::note
-Make sure that any `View` you want to receive the accessibility focus has `accessible={true}`.
-:::
-
----
-
-### `sendAccessibilityEvent()`
-
-```tsx
-static sendAccessibilityEvent(host: HostInstance, eventType: AccessibilityEventTypes);
-```
-
-Imperatively trigger an accessibility event on a React component, like changing the focused element for a screen reader.
-
-:::note
-Make sure that any `View` you want to receive the accessibility focus has `accessible={true}`.
-:::
-
-| Name                                                           | Type                    | Description                                                                                                            |
-| -------------------------------------------------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------- |
-| host <div className="label basic required">Required</div>      | HostInstance            | The component ref to send the event to.                                                                                |
-| eventType <div className="label basic required">Required</div> | AccessibilityEventTypes | One of `'click'` (Android only), `'focus'`, `'viewHoverEnter'` (Android only), or `'windowStateChange'` (Android only) |
+---
+id: accessibilityinfo
+title: AccessibilityInfo
+---
+
+Sometimes it's useful to know whether or not the device has a screen reader that is currently active. The `AccessibilityInfo` API is designed for this purpose. You can use it to query the current state of the screen reader as well as to register to be notified when the state of the screen reader changes.
+
+## Example
+
+```SnackPlayer name=AccessibilityInfo%20Example&supportedPlatforms=android,ios
+import {useState, useEffect} from 'react';
+import {AccessibilityInfo, Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false);
+  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
+
+  useEffect(() => {
+    const reduceMotionChangedSubscription = AccessibilityInfo.addEventListener(
+      'reduceMotionChanged',
+      isReduceMotionEnabled => {
+        setReduceMotionEnabled(isReduceMotionEnabled);
+      },
+    );
+    const screenReaderChangedSubscription = AccessibilityInfo.addEventListener(
+      'screenReaderChanged',
+      isScreenReaderEnabled => {
+        setScreenReaderEnabled(isScreenReaderEnabled);
+      },
+    );
+
+    AccessibilityInfo.isReduceMotionEnabled().then(isReduceMotionEnabled => {
+      setReduceMotionEnabled(isReduceMotionEnabled);
+    });
+    AccessibilityInfo.isScreenReaderEnabled().then(isScreenReaderEnabled => {
+      setScreenReaderEnabled(isScreenReaderEnabled);
+    });
+
+    return () => {
+      reduceMotionChangedSubscription.remove();
+      screenReaderChangedSubscription.remove();
+    };
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.status}>
+          The reduce motion is {reduceMotionEnabled ? 'enabled' : 'disabled'}.
+        </Text>
+        <Text style={styles.status}>
+          The screen reader is {screenReaderEnabled ? 'enabled' : 'disabled'}.
+        </Text>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  status: {
+    margin: 30,
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+  eventName: AccessibilityChangeEventName | AccessibilityAnnouncementEventName,
+  handler: (
+    event: AccessibilityChangeEvent | AccessibilityAnnouncementFinishedEvent,
+  ) => void,
+): EmitterSubscription;
+```
+
+Add an event handler. Supported events:
+
+| Event name                                                                               | Description                                                                                                                                                                                                                                                                                              |
+| ---------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `accessibilityServiceChanged`<br/><div className="label two-lines android">Android</div> | Fires when some services such as TalkBack, other Android assistive technologies, and third-party accessibility services are enabled. The argument to the event handler is a boolean. The boolean is `true` when a some accessibility services is enabled and `false` otherwise.                          |
+| `announcementFinished`<br/><div className="label two-lines ios">iOS</div>                | Fires when the screen reader has finished making an announcement. The argument to the event handler is a dictionary with these keys:<ul><li>`announcement`: The string announced by the screen reader.</li><li>`success`: A boolean indicating whether the announcement was successfully made.</li></ul> |
+| `boldTextChanged`<br/><div className="label two-lines ios">iOS</div>                     | 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`<br/><div className="label two-lines ios">iOS</div>                    | 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`<br/><div className="label two-lines ios">iOS</div>                 | 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.                                  |
+| `reduceTransparencyChanged`<br/><div className="label two-lines ios">iOS</div>           | 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.                                                                                                         |
+| `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.                                                                                                                          |
+
+---
+
+### `announceForAccessibility()`
+
+```tsx
+static announceForAccessibility(announcement: string);
+```
+
+Post a string to be announced by the screen reader.
+
+---
+
+### `announceForAccessibilityWithOptions()`
+
+```tsx
+static announceForAccessibilityWithOptions(
+  announcement: string,
+  options: {queue?: boolean},
+);
+```
+
+Post a string to be announced by the screen reader with modification options. By default announcements will interrupt any existing speech, but on iOS they can be queued behind existing speech by setting `queue` to `true` in the options object.
+
+**Parameters:**
+
+| Name                                                              | Type   | Description                                                                                  |
+| ----------------------------------------------------------------- | ------ | -------------------------------------------------------------------------------------------- |
+| announcement <div className="label basic required">Required</div> | string | The string to be announced                                                                   |
+| options <div className="label basic required">Required</div>      | object | `queue` - queue the announcement behind existing speech <div className="label ios">iOS</div> |
+
+---
+
+### `getRecommendedTimeoutMillis()` <div className="label android">Android</div>
+
+```tsx
+static getRecommendedTimeoutMillis(originalTimeout: number): Promise<number>;
+```
+
+Gets the timeout in millisecond that the user needs.
+This value is set in "Time to take action (Accessibility timeout)" of "Accessibility" settings.
+
+**Parameters:**
+
+| Name                                                                 | Type   | Description                                                                           |
+| -------------------------------------------------------------------- | ------ | ------------------------------------------------------------------------------------- |
+| originalTimeout <div className="label basic required">Required</div> | number | The timeout to return if "Accessibility timeout" is not set. Specify in milliseconds. |
+
+---
+
+### `isAccessibilityServiceEnabled()` <div className="label android">Android</div>
+
+```tsx
+static isAccessibilityServiceEnabled(): Promise<boolean>;
+```
+
+Check whether any accessibility service is enabled. This includes TalkBack but also any third-party accessibility app that may be installed. To only check whether TalkBack is enabled, use [isScreenReaderEnabled](#isscreenreaderenabled). Returns a promise which resolves to a boolean. The result is `true` when some accessibility services is enabled and `false` otherwise.
+
+> **Note**: Please use [isScreenReaderEnabled](#isscreenreaderenabled) if you only want to check the status of TalkBack.
+
+---
+
+### `isBoldTextEnabled()` <div className="label ios">iOS</div>
+
+```tsx
+static isBoldTextEnabled(): Promise<boolean>:
+```
+
+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()` <div className="label ios">iOS</div>
+
+```tsx
+static isGrayscaleEnabled(): Promise<boolean>;
+```
+
+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()` <div className="label ios">iOS</div>
+
+```tsx
+static isInvertColorsEnabled(): Promise<boolean>;
+```
+
+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()`
+
+```tsx
+static isReduceMotionEnabled(): Promise<boolean>;
+```
+
+Query whether reduce motion is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when reduce motion is enabled and `false` otherwise.
+
+---
+
+### `isReduceTransparencyEnabled()` <div className="label ios">iOS</div>
+
+```tsx
+static isReduceTransparencyEnabled(): Promise<boolean>;
+```
+
+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()`
+
+```tsx
+static isScreenReaderEnabled(): Promise<boolean>;
+```
+
+Query whether a screen reader is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when a screen reader is enabled and `false` otherwise.
+
+---
+
+### `isHighTextContrastEnabled()` <div className="label android">Android</div>
+
+```tsx
+static isHighTextContrastEnabled(): Promise<boolean>
+```
+
+Query whether high text contrast is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when high text contrast is enabled and `false` otherwise.
+
+---
+
+### `isDarkerSystemColorsEnabled()` <div className="label ios">iOS</div>
+
+```tsx
+static isDarkerSystemColorsEnabled(): Promise<boolean>
+```
+
+Query whether dark system colors is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when dark system colors is enabled and `false` otherwise.
+
+---
+
+### `prefersCrossFadeTransitions()` <div className="label ios">iOS</div>
+
+```tsx
+static prefersCrossFadeTransitions(): Promise<boolean>;
+```
+
+Query whether reduce motion and prefer cross-fade transitions settings are currently enabled. Returns a promise which resolves to a boolean. The result is `true` when prefer cross-fade transitions is enabled and `false` otherwise.
+
+---
+
+### `setAccessibilityFocus()`
+
+:::warning[Deprecated]
+Prefer using `sendAccessibilityEvent` with eventType `focus` instead.
+:::
+
+```tsx
+static setAccessibilityFocus(reactTag: number);
+```
+
+Set accessibility focus to a React component.
+
+On Android, this calls `UIManager.sendAccessibilityEvent` method with passed `reactTag` and `UIManager.AccessibilityEventTypes.typeViewFocused` arguments.
+
+:::note
+Make sure that any `View` you want to receive the accessibility focus has `accessible={true}`.
+:::
+
+---
+
+### `sendAccessibilityEvent()`
+
+```tsx
+static sendAccessibilityEvent(host: HostInstance, eventType: AccessibilityEventTypes);
+```
+
+Imperatively trigger an accessibility event on a React component, like changing the focused element for a screen reader.
+
+:::note
+Make sure that any `View` you want to receive the accessibility focus has `accessible={true}`.
+:::
+
+| Name                                                           | Type                    | Description                                                                                                            |
+| -------------------------------------------------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| host <div className="label basic required">Required</div>      | HostInstance            | The component ref to send the event to.                                                                                |
+| eventType <div className="label basic required">Required</div> | AccessibilityEventTypes | One of `'click'` (Android only), `'focus'`, `'viewHoverEnter'` (Android only), or `'windowStateChange'` (Android only) |
diff --git a/website/versioned_docs/version-0.81/actionsheetios.md b/website/versioned_docs/version-0.81/actionsheetios.md
index 3640d4de160..ef129850796 100644
--- a/website/versioned_docs/version-0.81/actionsheetios.md
+++ b/website/versioned_docs/version-0.81/actionsheetios.md
@@ -1,142 +1,142 @@
----
-id: actionsheetios
-title: ActionSheetIOS
----
-
-Displays native to iOS [Action Sheet](https://developer.apple.com/design/human-interface-guidelines/action-sheets) component.
-
-## Example
-
-```SnackPlayer name=ActionSheetIOS%20Example&supportedPlatforms=ios
-import React, {useState} from 'react';
-import {ActionSheetIOS, Button, StyleSheet, Text} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [result, setResult] = useState('🔮');
-
-  const onPress = () =>
-    ActionSheetIOS.showActionSheetWithOptions(
-      {
-        options: ['Cancel', 'Generate number', 'Reset'],
-        destructiveButtonIndex: 2,
-        cancelButtonIndex: 0,
-        userInterfaceStyle: 'dark',
-      },
-      buttonIndex => {
-        if (buttonIndex === 0) {
-          // cancel action
-        } else if (buttonIndex === 1) {
-          setResult(String(Math.floor(Math.random() * 100) + 1));
-        } else if (buttonIndex === 2) {
-          setResult('🔮');
-        }
-      },
-    );
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.result}>{result}</Text>
-        <Button onPress={onPress} title="Show Action Sheet" />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  result: {
-    fontSize: 64,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
-# Reference
-
-## Methods
-
-### `showActionSheetWithOptions()`
-
-```tsx
-static showActionSheetWithOptions: (
-  options: ActionSheetIOSOptions,
-  callback: (buttonIndex: number) => void,
-);
-```
-
-Display an iOS action sheet. The `options` object must contain one or more of:
-
-- `options` (array of strings) - a list of button titles (required)
-- `cancelButtonIndex` (int) - index of cancel button in `options`
-- `cancelButtonTintColor` (string) - the [color](colors) used for the change the text color of the cancel button
-- `destructiveButtonIndex` (int or array of ints) - indices of destructive buttons in `options`
-- `title` (string) - a title to show above the action sheet
-- `message` (string) - a message to show below the title
-- `anchor` (number) - the node to which the action sheet should be anchored (used for iPad)
-- `tintColor` (string) - the [color](colors) used for non-destructive button titles
-- `disabledButtonIndices` (array of numbers) - a list of button indices which should be disabled
-- `userInterfaceStyle` (string) - the interface style used for the action sheet, can be set to `light` or `dark`, otherwise the default system style will be used
-
-The 'callback' function takes one parameter, the zero-based index of the selected item.
-
-Minimal example:
-
-```tsx
-ActionSheetIOS.showActionSheetWithOptions(
-  {
-    options: ['Cancel', 'Remove'],
-    destructiveButtonIndex: 1,
-    cancelButtonIndex: 0,
-  },
-  buttonIndex => {
-    if (buttonIndex === 1) {
-      /* destructive action */
-    }
-  },
-);
-```
-
----
-
-### `dismissActionSheet()`
-
-```tsx
-static dismissActionSheet();
-```
-
-Dismisses the most upper iOS action sheet presented, if no action sheet is present a warning is displayed.
-
----
-
-### `showShareActionSheetWithOptions()`
-
-```tsx
-static showShareActionSheetWithOptions: (
-  options: ShareActionSheetIOSOptions,
-  failureCallback: (error: Error) => void,
-  successCallback: (success: boolean, method: string) => void,
-);
-```
-
-Display the iOS share sheet. The `options` object should contain one or both of `message` and `url` and can additionally have a `subject` or `excludedActivityTypes`:
-
-- `url` (string) - a URL to share
-- `message` (string) - a message to share
-- `subject` (string) - a subject for the message
-- `excludedActivityTypes` (array) - the activities to exclude from the ActionSheet
-
-> **Note:** If `url` points to a local file, or is a base64-encoded uri, the file it points to will be loaded and shared directly. In this way, you can share images, videos, PDF files, etc. If `url` points to a remote file or address it must conform to URL format as described in [RFC 2396](https://www.ietf.org/rfc/rfc2396.txt). For example, a web URL without a proper protocol (HTTP/HTTPS) will not be shared.
-
-The 'failureCallback' function takes one parameter, an error object. The only property defined on this object is an optional `stack` property of type `string`.
-
-The 'successCallback' function takes two parameters:
-
-- a boolean value signifying success or failure
-- a string that, in the case of success, indicates the method of sharing
+---
+id: actionsheetios
+title: ActionSheetIOS
+---
+
+Displays native to iOS [Action Sheet](https://developer.apple.com/design/human-interface-guidelines/action-sheets) component.
+
+## Example
+
+```SnackPlayer name=ActionSheetIOS%20Example&supportedPlatforms=ios
+import {useState} from 'react';
+import {ActionSheetIOS, Button, StyleSheet, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [result, setResult] = useState('🔮');
+
+  const onPress = () =>
+    ActionSheetIOS.showActionSheetWithOptions(
+      {
+        options: ['Cancel', 'Generate number', 'Reset'],
+        destructiveButtonIndex: 2,
+        cancelButtonIndex: 0,
+        userInterfaceStyle: 'dark',
+      },
+      buttonIndex => {
+        if (buttonIndex === 0) {
+          // cancel action
+        } else if (buttonIndex === 1) {
+          setResult(String(Math.floor(Math.random() * 100) + 1));
+        } else if (buttonIndex === 2) {
+          setResult('🔮');
+        }
+      },
+    );
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.result}>{result}</Text>
+        <Button onPress={onPress} title="Show Action Sheet" />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  result: {
+    fontSize: 64,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+# Reference
+
+## Methods
+
+### `showActionSheetWithOptions()`
+
+```tsx
+static showActionSheetWithOptions: (
+  options: ActionSheetIOSOptions,
+  callback: (buttonIndex: number) => void,
+);
+```
+
+Display an iOS action sheet. The `options` object must contain one or more of:
+
+- `options` (array of strings) - a list of button titles (required)
+- `cancelButtonIndex` (int) - index of cancel button in `options`
+- `cancelButtonTintColor` (string) - the [color](colors) used for the change the text color of the cancel button
+- `destructiveButtonIndex` (int or array of ints) - indices of destructive buttons in `options`
+- `title` (string) - a title to show above the action sheet
+- `message` (string) - a message to show below the title
+- `anchor` (number) - the node to which the action sheet should be anchored (used for iPad)
+- `tintColor` (string) - the [color](colors) used for non-destructive button titles
+- `disabledButtonIndices` (array of numbers) - a list of button indices which should be disabled
+- `userInterfaceStyle` (string) - the interface style used for the action sheet, can be set to `light` or `dark`, otherwise the default system style will be used
+
+The 'callback' function takes one parameter, the zero-based index of the selected item.
+
+Minimal example:
+
+```tsx
+ActionSheetIOS.showActionSheetWithOptions(
+  {
+    options: ['Cancel', 'Remove'],
+    destructiveButtonIndex: 1,
+    cancelButtonIndex: 0,
+  },
+  buttonIndex => {
+    if (buttonIndex === 1) {
+      /* destructive action */
+    }
+  },
+);
+```
+
+---
+
+### `dismissActionSheet()`
+
+```tsx
+static dismissActionSheet();
+```
+
+Dismisses the most upper iOS action sheet presented, if no action sheet is present a warning is displayed.
+
+---
+
+### `showShareActionSheetWithOptions()`
+
+```tsx
+static showShareActionSheetWithOptions: (
+  options: ShareActionSheetIOSOptions,
+  failureCallback: (error: Error) => void,
+  successCallback: (success: boolean, method: string) => void,
+);
+```
+
+Display the iOS share sheet. The `options` object should contain one or both of `message` and `url` and can additionally have a `subject` or `excludedActivityTypes`:
+
+- `url` (string) - a URL to share
+- `message` (string) - a message to share
+- `subject` (string) - a subject for the message
+- `excludedActivityTypes` (array) - the activities to exclude from the ActionSheet
+
+> **Note:** If `url` points to a local file, or is a base64-encoded uri, the file it points to will be loaded and shared directly. In this way, you can share images, videos, PDF files, etc. If `url` points to a remote file or address it must conform to URL format as described in [RFC 2396](https://www.ietf.org/rfc/rfc2396.txt). For example, a web URL without a proper protocol (HTTP/HTTPS) will not be shared.
+
+The 'failureCallback' function takes one parameter, an error object. The only property defined on this object is an optional `stack` property of type `string`.
+
+The 'successCallback' function takes two parameters:
+
+- a boolean value signifying success or failure
+- a string that, in the case of success, indicates the method of sharing
diff --git a/website/versioned_docs/version-0.81/activityindicator.md b/website/versioned_docs/version-0.81/activityindicator.md
index fc8edca4e25..cab2b647e77 100644
--- a/website/versioned_docs/version-0.81/activityindicator.md
+++ b/website/versioned_docs/version-0.81/activityindicator.md
@@ -8,7 +8,6 @@ Displays a circular loading indicator.
 ## Example
 
 ```SnackPlayer name=ActivityIndicator%20Example
-import React from 'react';
 import {ActivityIndicator, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.81/alert.md b/website/versioned_docs/version-0.81/alert.md
index c80b62fb7a6..78b1c412e66 100644
--- a/website/versioned_docs/version-0.81/alert.md
+++ b/website/versioned_docs/version-0.81/alert.md
@@ -12,7 +12,6 @@ This is an API that works both on Android and iOS and can show static alerts. Al
 ## Example
 
 ```SnackPlayer name=Alert%20Example&supportedPlatforms=ios,android
-import React from 'react';
 import {StyleSheet, Button, Alert} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -81,7 +80,6 @@ The cancel event can be handled by providing an `onDismiss` callback property in
 ### Example <div className="label android">Android</div>
 
 ```SnackPlayer name=Alert%20Android%20Dissmissable%20Example&supportedPlatforms=android
-import React from 'react';
 import {StyleSheet, Button, Alert} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.81/animated.md b/website/versioned_docs/version-0.81/animated.md
index e20ad3ee247..fce79ffaf57 100644
--- a/website/versioned_docs/version-0.81/animated.md
+++ b/website/versioned_docs/version-0.81/animated.md
@@ -7,14 +7,15 @@ The `Animated` library is designed to make animations fluid, powerful, and painl
 
 The core workflow for creating an animation is to create an `Animated.Value`, hook it up to one or more style attributes of an animated component, and then drive updates via animations using `Animated.timing()`.
 
-> Don't modify the animated value directly. You can use the [`useRef` Hook](https://react.dev/reference/react/useRef) to return a mutable ref object. This ref object's `current` property is initialized as the given argument and persists throughout the component lifecycle.
+:::note
+Don't modify the animated value directly. You can use the [`useRef` Hook](https://react.dev/reference/react/useRef) to return a mutable ref object. This ref object's `current` property is initialized as the given argument and persists throughout the component lifecycle.
+:::
 
 ## Example
 
 The following example contains a `View` which will fade in and fade out based on the animated value `fadeAnim`
 
 ```SnackPlayer name=Animated%20Example
-import React, {useRef} from 'react';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 import {
   Animated,
@@ -22,11 +23,12 @@ import {
   View,
   StyleSheet,
   Button,
+  useAnimatedValue,
 } from 'react-native';
 
 const App = () => {
   // fadeAnim will be used as the value for opacity. Initial Value: 0
-  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const fadeAnim = useAnimatedValue(0);
 
   const fadeIn = () => {
     // Will change fadeAnim value to 1 in 5 seconds
diff --git a/website/versioned_docs/version-0.81/animatedvaluexy.md b/website/versioned_docs/version-0.81/animatedvaluexy.md
index 6cb44808ccf..8135c12354a 100644
--- a/website/versioned_docs/version-0.81/animatedvaluexy.md
+++ b/website/versioned_docs/version-0.81/animatedvaluexy.md
@@ -1,227 +1,227 @@
----
-id: animatedvaluexy
-title: Animated.ValueXY
----
-
-2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal [`Animated.Value`](animatedvalue), but multiplexed. Contains two regular `Animated.Value`s under the hood.
-
-## Example
-
-```SnackPlayer name=Animated.ValueXY%20Example
-import React, {useRef} from 'react';
-import {Animated, PanResponder, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const DraggableView = () => {
-  const pan = useRef(new Animated.ValueXY()).current;
-
-  const panResponder = PanResponder.create({
-    onStartShouldSetPanResponder: () => true,
-    onPanResponderMove: Animated.event([
-      null,
-      {
-        dx: pan.x, // x,y are Animated.Value
-        dy: pan.y,
-      },
-    ]),
-    onPanResponderRelease: () => {
-      Animated.spring(
-        pan, // Auto-multiplexed
-        {toValue: {x: 0, y: 0}, useNativeDriver: true}, // Back to zero
-      ).start();
-    },
-  });
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Animated.View
-          {...panResponder.panHandlers}
-          style={[pan.getLayout(), styles.box]}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  box: {
-    backgroundColor: '#61dafb',
-    width: 80,
-    height: 80,
-    borderRadius: 4,
-  },
-});
-
-export default DraggableView;
-```
-
----
-
-# Reference
-
-## Methods
-
-### `setValue()`
-
-```tsx
-setValue(value: {x: number; y: number});
-```
-
-Directly set the value. This will stop any animations running on the value and update all the bound properties.
-
-**Parameters:**
-
-| Name  | Type                     | Required | Description |
-| ----- | ------------------------ | -------- | ----------- |
-| value | `{x: number; y: number}` | Yes      | Value       |
-
----
-
-### `setOffset()`
-
-```tsx
-setOffset(offset: {x: number; y: number});
-```
-
-Sets an offset that is applied on top of whatever value is set, whether via `setValue`, an animation, or `Animated.event`. Useful for compensating things like the start of a pan gesture.
-
-**Parameters:**
-
-| Name   | Type                     | Required | Description  |
-| ------ | ------------------------ | -------- | ------------ |
-| offset | `{x: number; y: number}` | Yes      | Offset value |
-
----
-
-### `flattenOffset()`
-
-```tsx
-flattenOffset();
-```
-
-Merges the offset value into the base value and resets the offset to zero. The final output of the value is unchanged.
-
----
-
-### `extractOffset()`
-
-```tsx
-extractOffset();
-```
-
-Sets the offset value to the base value, and resets the base value to zero. The final output of the value is unchanged.
-
----
-
-### `addListener()`
-
-```tsx
-addListener(callback: (value: {x: number; y: number}) => void);
-```
-
-Adds an asynchronous listener to the value so you can observe updates from animations. This is useful because there is no way to synchronously read the value because it might be driven natively.
-
-Returns a string that serves as an identifier for the listener.
-
-**Parameters:**
-
-| Name     | Type     | Required | Description                                                                                 |
-| -------- | -------- | -------- | ------------------------------------------------------------------------------------------- |
-| callback | function | Yes      | The callback function which will receive an object with a `value` key set to the new value. |
-
----
-
-### `removeListener()`
-
-```tsx
-removeListener(id: string);
-```
-
-Unregister a listener. The `id` param shall match the identifier previously returned by `addListener()`.
-
-**Parameters:**
-
-| Name | Type   | Required | Description                        |
-| ---- | ------ | -------- | ---------------------------------- |
-| id   | string | Yes      | Id for the listener being removed. |
-
----
-
-### `removeAllListeners()`
-
-```tsx
-removeAllListeners();
-```
-
-Remove all registered listeners.
-
----
-
-### `stopAnimation()`
-
-```tsx
-stopAnimation(callback?: (value: {x: number; y: number}) => void);
-```
-
-Stops any running animation or tracking. `callback` is invoked with the final value after stopping the animation, which is useful for updating state to match the animation position with layout.
-
-**Parameters:**
-
-| Name     | Type     | Required | Description                                   |
-| -------- | -------- | -------- | --------------------------------------------- |
-| callback | function | No       | A function that will receive the final value. |
-
----
-
-### `resetAnimation()`
-
-```tsx
-resetAnimation(callback?: (value: {x: number; y: number}) => void);
-```
-
-Stops any animation and resets the value to its original.
-
-**Parameters:**
-
-| Name     | Type     | Required | Description                                      |
-| -------- | -------- | -------- | ------------------------------------------------ |
-| callback | function | No       | A function that will receive the original value. |
-
----
-
-### `getLayout()`
-
-```tsx
-getLayout(): {left: Animated.Value, top: Animated.Value};
-```
-
-Converts `{x, y}` into `{left, top}` for use in style, e.g.
-
-```tsx
-style={this.state.anim.getLayout()}
-```
-
----
-
-### `getTranslateTransform()`
-
-```tsx
-getTranslateTransform(): [
-  {translateX: Animated.Value},
-  {translateY: Animated.Value},
-];
-```
-
-Converts `{x, y}` into a useable translation transform, e.g.
-
-```tsx
-style={{
-  transform: this.state.anim.getTranslateTransform()
-}}
-```
+---
+id: animatedvaluexy
+title: Animated.ValueXY
+---
+
+2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal [`Animated.Value`](animatedvalue), but multiplexed. Contains two regular `Animated.Value`s under the hood.
+
+## Example
+
+```SnackPlayer name=Animated.ValueXY%20Example
+import {useRef} from 'react';
+import {Animated, PanResponder, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const DraggableView = () => {
+  const pan = useRef(new Animated.ValueXY()).current;
+
+  const panResponder = PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onPanResponderMove: Animated.event([
+      null,
+      {
+        dx: pan.x, // x,y are Animated.Value
+        dy: pan.y,
+      },
+    ]),
+    onPanResponderRelease: () => {
+      Animated.spring(
+        pan, // Auto-multiplexed
+        {toValue: {x: 0, y: 0}, useNativeDriver: true}, // Back to zero
+      ).start();
+    },
+  });
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Animated.View
+          {...panResponder.panHandlers}
+          style={[pan.getLayout(), styles.box]}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  box: {
+    backgroundColor: '#61dafb',
+    width: 80,
+    height: 80,
+    borderRadius: 4,
+  },
+});
+
+export default DraggableView;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `setValue()`
+
+```tsx
+setValue(value: {x: number; y: number});
+```
+
+Directly set the value. This will stop any animations running on the value and update all the bound properties.
+
+**Parameters:**
+
+| Name  | Type                     | Required | Description |
+| ----- | ------------------------ | -------- | ----------- |
+| value | `{x: number; y: number}` | Yes      | Value       |
+
+---
+
+### `setOffset()`
+
+```tsx
+setOffset(offset: {x: number; y: number});
+```
+
+Sets an offset that is applied on top of whatever value is set, whether via `setValue`, an animation, or `Animated.event`. Useful for compensating things like the start of a pan gesture.
+
+**Parameters:**
+
+| Name   | Type                     | Required | Description  |
+| ------ | ------------------------ | -------- | ------------ |
+| offset | `{x: number; y: number}` | Yes      | Offset value |
+
+---
+
+### `flattenOffset()`
+
+```tsx
+flattenOffset();
+```
+
+Merges the offset value into the base value and resets the offset to zero. The final output of the value is unchanged.
+
+---
+
+### `extractOffset()`
+
+```tsx
+extractOffset();
+```
+
+Sets the offset value to the base value, and resets the base value to zero. The final output of the value is unchanged.
+
+---
+
+### `addListener()`
+
+```tsx
+addListener(callback: (value: {x: number; y: number}) => void);
+```
+
+Adds an asynchronous listener to the value so you can observe updates from animations. This is useful because there is no way to synchronously read the value because it might be driven natively.
+
+Returns a string that serves as an identifier for the listener.
+
+**Parameters:**
+
+| Name     | Type     | Required | Description                                                                                 |
+| -------- | -------- | -------- | ------------------------------------------------------------------------------------------- |
+| callback | function | Yes      | The callback function which will receive an object with a `value` key set to the new value. |
+
+---
+
+### `removeListener()`
+
+```tsx
+removeListener(id: string);
+```
+
+Unregister a listener. The `id` param shall match the identifier previously returned by `addListener()`.
+
+**Parameters:**
+
+| Name | Type   | Required | Description                        |
+| ---- | ------ | -------- | ---------------------------------- |
+| id   | string | Yes      | Id for the listener being removed. |
+
+---
+
+### `removeAllListeners()`
+
+```tsx
+removeAllListeners();
+```
+
+Remove all registered listeners.
+
+---
+
+### `stopAnimation()`
+
+```tsx
+stopAnimation(callback?: (value: {x: number; y: number}) => void);
+```
+
+Stops any running animation or tracking. `callback` is invoked with the final value after stopping the animation, which is useful for updating state to match the animation position with layout.
+
+**Parameters:**
+
+| Name     | Type     | Required | Description                                   |
+| -------- | -------- | -------- | --------------------------------------------- |
+| callback | function | No       | A function that will receive the final value. |
+
+---
+
+### `resetAnimation()`
+
+```tsx
+resetAnimation(callback?: (value: {x: number; y: number}) => void);
+```
+
+Stops any animation and resets the value to its original.
+
+**Parameters:**
+
+| Name     | Type     | Required | Description                                      |
+| -------- | -------- | -------- | ------------------------------------------------ |
+| callback | function | No       | A function that will receive the original value. |
+
+---
+
+### `getLayout()`
+
+```tsx
+getLayout(): {left: Animated.Value, top: Animated.Value};
+```
+
+Converts `{x, y}` into `{left, top}` for use in style, e.g.
+
+```tsx
+style={this.state.anim.getLayout()}
+```
+
+---
+
+### `getTranslateTransform()`
+
+```tsx
+getTranslateTransform(): [
+  {translateX: Animated.Value},
+  {translateY: Animated.Value},
+];
+```
+
+Converts `{x, y}` into a useable translation transform, e.g.
+
+```tsx
+style={{
+  transform: this.state.anim.getTranslateTransform()
+}}
+```
diff --git a/website/versioned_docs/version-0.81/animations.md b/website/versioned_docs/version-0.81/animations.md
index f4438b7a0a8..df8bf08b256 100644
--- a/website/versioned_docs/version-0.81/animations.md
+++ b/website/versioned_docs/version-0.81/animations.md
@@ -1,675 +1,674 @@
----
-id: animations
-title: Animations
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface.
-
-React Native provides two complementary animation systems: [`Animated`](animations#animated-api) for granular and interactive control of specific values, and [`LayoutAnimation`](animations#layoutanimation-api) for animated global layout transactions.
-
-## `Animated` API
-
-The [`Animated`](animated) API is designed to concisely express a wide variety of interesting animation and interaction patterns in a very performant way. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and `start`/`stop` methods to control time-based animation execution.
-
-`Animated` exports six animatable component types: `View`, `Text`, `Image`, `ScrollView`, `FlatList` and `SectionList`, but you can also create your own using `Animated.createAnimatedComponent()`.
-
-For example, a container view that fades in when it is mounted may look like this:
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer ext=js
-import React, {useEffect, useRef} from 'react';
-import {Animated, Text, View} from 'react-native';
-
-const FadeInView = props => {
-  const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
-
-  useEffect(() => {
-    Animated.timing(fadeAnim, {
-      toValue: 1,
-      duration: 10000,
-      useNativeDriver: true,
-    }).start();
-  }, [fadeAnim]);
-
-  return (
-    <Animated.View // Special animatable View
-      style={{
-        ...props.style,
-        opacity: fadeAnim, // Bind opacity to animated value
-      }}>
-      {props.children}
-    </Animated.View>
-  );
-};
-
-// You can then use your `FadeInView` in place of a `View` in your components:
-export default () => {
-  return (
-    <View
-      style={{
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}>
-      <FadeInView
-        style={{
-          width: 250,
-          height: 50,
-          backgroundColor: 'powderblue',
-        }}>
-        <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>
-          Fading in
-        </Text>
-      </FadeInView>
-    </View>
-  );
-};
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer ext=tsx
-import React, {useEffect, useRef, type PropsWithChildren} from 'react';
-import {Animated, Text, View, type ViewStyle} from 'react-native';
-
-type FadeInViewProps = PropsWithChildren<{style: ViewStyle}>;
-
-const FadeInView: React.FC<FadeInViewProps> = props => {
-  const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
-
-  useEffect(() => {
-    Animated.timing(fadeAnim, {
-      toValue: 1,
-      duration: 10000,
-      useNativeDriver: true,
-    }).start();
-  }, [fadeAnim]);
-
-  return (
-    <Animated.View // Special animatable View
-      style={{
-        ...props.style,
-        opacity: fadeAnim, // Bind opacity to animated value
-      }}>
-      {props.children}
-    </Animated.View>
-  );
-};
-
-// You can then use your `FadeInView` in place of a `View` in your components:
-export default () => {
-  return (
-    <View
-      style={{
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}>
-      <FadeInView
-        style={{
-          width: 250,
-          height: 50,
-          backgroundColor: 'powderblue',
-        }}>
-        <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>
-          Fading in
-        </Text>
-      </FadeInView>
-    </View>
-  );
-};
-```
-
-</TabItem>
-</Tabs>
-
-Let's break down what's happening here. In the `FadeInView` render method, a new `Animated.Value` called `fadeAnim` is initialized with `useRef`. The opacity property on the `View` is mapped to this animated value. Behind the scenes, the numeric value is extracted and used to set opacity.
-
-When the component mounts, the opacity is set to 0. Then, an easing animation is started on the `fadeAnim` animated value, which will update all of its dependent mappings (in this case, only the opacity) on each frame as the value animates to the final value of 1.
-
-This is done in an optimized way that is faster than calling `setState` and re-rendering. Because the entire configuration is declarative, we will be able to implement further optimizations that serialize the configuration and runs the animation on a high-priority thread.
-
-### Configuring animations
-
-Animations are heavily configurable. Custom and predefined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.
-
-`Animated` provides several animation types, the most commonly used one being [`Animated.timing()`](animated#timing). It supports animating a value over time using one of various predefined easing functions, or you can use your own. Easing functions are typically used in animation to convey gradual acceleration and deceleration of objects.
-
-By default, `timing` will use an easeInOut curve that conveys gradual acceleration to full speed and concludes by gradually decelerating to a stop. You can specify a different easing function by passing an `easing` parameter. Custom `duration` or even a `delay` before the animation starts is also supported.
-
-For example, if we want to create a 2-second long animation of an object that slightly backs up before moving to its final position:
-
-```tsx
-Animated.timing(this.state.xPosition, {
-  toValue: 100,
-  easing: Easing.back(),
-  duration: 2000,
-  useNativeDriver: true,
-}).start();
-```
-
-Take a look at the [Configuring animations](animated#configuring-animations) section of the `Animated` API reference to learn more about all the config parameters supported by the built-in animations.
-
-### Composing animations
-
-Animations can be combined and played in sequence or in parallel. Sequential animations can play immediately after the previous animation has finished, or they can start after a specified delay. The `Animated` API provides several methods, such as `sequence()` and `delay()`, each of which take an array of animations to execute and automatically calls `start()`/`stop()` as needed.
-
-For example, the following animation coasts to a stop, then it springs back while twirling in parallel:
-
-```tsx
-Animated.sequence([
-  // decay, then spring to start and twirl
-  Animated.decay(position, {
-    // coast to a stop
-    velocity: {x: gestureState.vx, y: gestureState.vy}, // velocity from gesture release
-    deceleration: 0.997,
-    useNativeDriver: true,
-  }),
-  Animated.parallel([
-    // after decay, in parallel:
-    Animated.spring(position, {
-      toValue: {x: 0, y: 0}, // return to start
-      useNativeDriver: true,
-    }),
-    Animated.timing(twirl, {
-      // and twirl
-      toValue: 360,
-      useNativeDriver: true,
-    }),
-  ]),
-]).start(); // start the sequence group
-```
-
-If one animation is stopped or interrupted, then all other animations in the group are also stopped. `Animated.parallel` has a `stopTogether` option that can be set to `false` to disable this.
-
-You can find a full list of composition methods in the [Composing animations](animated#composing-animations) section of the `Animated` API reference.
-
-### Combining animated values
-
-You can [combine two animated values](animated#combining-animated-values) via addition, multiplication, division, or modulo to make a new animated value.
-
-There are some cases where an animated value needs to invert another animated value for calculation. An example is inverting a scale (2x --> 0.5x):
-
-```tsx
-const a = new Animated.Value(1);
-const b = Animated.divide(1, a);
-
-Animated.spring(a, {
-  toValue: 2,
-  useNativeDriver: true,
-}).start();
-```
-
-### Interpolation
-
-Each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.
-
-A basic mapping to convert a 0-1 range to a 0-100 range would be:
-
-```tsx
-value.interpolate({
-  inputRange: [0, 1],
-  outputRange: [0, 100],
-});
-```
-
-For example, you may want to think about your `Animated.Value` as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying `style` from the example above like so:
-
-```tsx
-  style={{
-    opacity: this.state.fadeAnim, // Binds directly
-    transform: [{
-      translateY: this.state.fadeAnim.interpolate({
-        inputRange: [0, 1],
-        outputRange: [150, 0]  // 0 : 150, 0.5 : 75, 1 : 0
-      }),
-    }],
-  }}
-```
-
-[`interpolate()`](animated#interpolate) supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
-
-```tsx
-value.interpolate({
-  inputRange: [-300, -100, 0, 100, 101],
-  outputRange: [300, 0, 1, 0, 0],
-});
-```
-
-Which would map like so:
-
-```
-Input | Output
-------|-------
-  -400|    450
-  -300|    300
-  -200|    150
-  -100|      0
-   -50|    0.5
-     0|      1
-    50|    0.5
-   100|      0
-   101|      0
-   200|      0
-```
-
-`interpolate()` also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
-
-```tsx
-value.interpolate({
-  inputRange: [0, 360],
-  outputRange: ['0deg', '360deg'],
-});
-```
-
-`interpolate()` also supports arbitrary easing functions, many of which are already implemented in the [`Easing`](easing) module. `interpolate()` also has configurable behavior for extrapolating the `outputRange`. You can set the extrapolation by setting the `extrapolate`, `extrapolateLeft`, or `extrapolateRight` options. The default value is `extend` but you can use `clamp` to prevent the output value from exceeding `outputRange`.
-
-### Tracking dynamic values
-
-Animated values can also track other values by setting the `toValue` of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a `spring()` pinned on another animated value, or with `timing()` and a `duration` of 0 for rigid tracking. They can also be composed with interpolations:
-
-```tsx
-Animated.spring(follower, {toValue: leader}).start();
-Animated.timing(opacity, {
-  toValue: pan.x.interpolate({
-    inputRange: [0, 300],
-    outputRange: [1, 0],
-  }),
-  useNativeDriver: true,
-}).start();
-```
-
-The `leader` and `follower` animated values would be implemented using `Animated.ValueXY()`. `ValueXY` is a handy way to deal with 2D interactions, such as panning or dragging. It is a basic wrapper that contains two `Animated.Value` instances and some helper functions that call through to them, making `ValueXY` a drop-in replacement for `Value` in many cases. It allows us to track both x and y values in the example above.
-
-### Tracking gestures
-
-Gestures, like panning or scrolling, and other events can map directly to animated values using [`Animated.event`](animated#event). This is done with a structured map syntax so that values can be extracted from complex event objects. The first level is an array to allow mapping across multiple args, and that array contains nested objects.
-
-For example, when working with horizontal scrolling gestures, you would do the following in order to map `event.nativeEvent.contentOffset.x` to `scrollX` (an `Animated.Value`):
-
-```tsx
- onScroll={Animated.event(
-   // scrollX = e.nativeEvent.contentOffset.x
-   [{nativeEvent: {
-        contentOffset: {
-          x: scrollX
-        }
-      }
-    }]
- )}
-```
-
-The following example implements a horizontal scrolling carousel where the scroll position indicators are animated using the `Animated.event` used in the `ScrollView`
-
-#### ScrollView with Animated Event Example
-
-```SnackPlayer name=Animated&supportedPlatforms=ios,android
-import React from 'react';
-import {
-  ScrollView,
-  Text,
-  StyleSheet,
-  View,
-  ImageBackground,
-  Animated,
-  useWindowDimensions,
-  useAnimatedValue,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const images = new Array(6).fill(
-  'https://images.unsplash.com/photo-1556740749-887f6717d7e4',
-);
-
-const App = () => {
-  const scrollX = useAnimatedValue(0);
-
-  const {width: windowWidth} = useWindowDimensions();
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.scrollContainer}>
-          <ScrollView
-            horizontal={true}
-            pagingEnabled
-            showsHorizontalScrollIndicator={false}
-            onScroll={Animated.event([
-              {
-                nativeEvent: {
-                  contentOffset: {
-                    x: scrollX,
-                  },
-                },
-              },
-            ])}
-            scrollEventThrottle={1}>
-            {images.map((image, imageIndex) => {
-              return (
-                <View
-                  style={{width: windowWidth, height: 250}}
-                  key={imageIndex}>
-                  <ImageBackground source={{uri: image}} style={styles.card}>
-                    <View style={styles.textContainer}>
-                      <Text style={styles.infoText}>
-                        {'Image - ' + imageIndex}
-                      </Text>
-                    </View>
-                  </ImageBackground>
-                </View>
-              );
-            })}
-          </ScrollView>
-          <View style={styles.indicatorContainer}>
-            {images.map((image, imageIndex) => {
-              const width = scrollX.interpolate({
-                inputRange: [
-                  windowWidth * (imageIndex - 1),
-                  windowWidth * imageIndex,
-                  windowWidth * (imageIndex + 1),
-                ],
-                outputRange: [8, 16, 8],
-                extrapolate: 'clamp',
-              });
-              return (
-                <Animated.View
-                  key={imageIndex}
-                  style={[styles.normalDot, {width}]}
-                />
-              );
-            })}
-          </View>
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  scrollContainer: {
-    height: 300,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  card: {
-    flex: 1,
-    marginVertical: 4,
-    marginHorizontal: 16,
-    borderRadius: 5,
-    overflow: 'hidden',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  textContainer: {
-    backgroundColor: 'rgba(0,0,0, 0.7)',
-    paddingHorizontal: 24,
-    paddingVertical: 8,
-    borderRadius: 5,
-  },
-  infoText: {
-    color: 'white',
-    fontSize: 16,
-    fontWeight: 'bold',
-  },
-  normalDot: {
-    height: 8,
-    width: 8,
-    borderRadius: 4,
-    backgroundColor: 'silver',
-    marginHorizontal: 4,
-  },
-  indicatorContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-
-export default App;
-```
-
-When using `PanResponder`, you could use the following code to extract the x and y positions from `gestureState.dx` and `gestureState.dy`. We use a `null` in the first position of the array, as we are only interested in the second argument passed to the `PanResponder` handler, which is the `gestureState`.
-
-```tsx
-onPanResponderMove={Animated.event(
-  [null, // ignore the native event
-  // extract dx and dy from gestureState
-  // like 'pan.x = gestureState.dx, pan.y = gestureState.dy'
-  {dx: pan.x, dy: pan.y}
-])}
-```
-
-#### PanResponder with Animated Event Example
-
-```SnackPlayer name=Animated
-import React, {useRef} from 'react';
-import {Animated, View, StyleSheet, PanResponder, Text} from 'react-native';
-
-const App = () => {
-  const pan = useRef(new Animated.ValueXY()).current;
-  const panResponder = useRef(
-    PanResponder.create({
-      onMoveShouldSetPanResponder: () => true,
-      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
-      onPanResponderRelease: () => {
-        Animated.spring(pan, {
-          toValue: {x: 0, y: 0},
-          useNativeDriver: true,
-        }).start();
-      },
-    }),
-  ).current;
-
-  return (
-    <View style={styles.container}>
-      <Text style={styles.titleText}>Drag & Release this box!</Text>
-      <Animated.View
-        style={{
-          transform: [{translateX: pan.x}, {translateY: pan.y}],
-        }}
-        {...panResponder.panHandlers}>
-        <View style={styles.box} />
-      </Animated.View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  titleText: {
-    fontSize: 14,
-    lineHeight: 24,
-    fontWeight: 'bold',
-  },
-  box: {
-    height: 150,
-    width: 150,
-    backgroundColor: 'blue',
-    borderRadius: 5,
-  },
-});
-
-export default App;
-```
-
-### Responding to the current animation value
-
-You may notice that there is no clear way to read the current value while animating. This is because the value may only be known in the native runtime due to optimizations. If you need to run JavaScript in response to the current value, there are two approaches:
-
-- `spring.stopAnimation(callback)` will stop the animation and invoke `callback` with the final value. This is useful when making gesture transitions.
-- `spring.addListener(callback)` will invoke `callback` asynchronously while the animation is running, providing a recent value. This is useful for triggering state changes, for example snapping a bobble to a new option as the user drags it closer, because these larger state changes are less sensitive to a few frames of lag compared to continuous gestures like panning which need to run at 60 fps.
-
-`Animated` is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Check out `Animated.Value.addListener` as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.
-
-### Using the native driver
-
-The `Animated` API is designed to be serializable. By using the [native driver](/blog/2017/02/14/using-native-driver-for-animated), we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.
-
-Using the native driver for normal animations can be accomplished by setting `useNativeDriver: true` in animation config when starting it. Animations without a `useNativeDriver` property will default to false for legacy reasons, but emit a warning (and typechecking error in TypeScript).
-
-```tsx
-Animated.timing(this.state.animatedValue, {
-  toValue: 1,
-  duration: 500,
-  useNativeDriver: true, // <-- Set this to true
-}).start();
-```
-
-Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
-
-The native driver also works with `Animated.event`. This is especially useful for animations that follow the scroll position as without the native driver, the animation will always run a frame behind the gesture due to the async nature of React Native.
-
-```tsx
-<Animated.ScrollView // <-- Use the Animated ScrollView wrapper
-  onScroll={Animated.event(
-    [
-      {
-        nativeEvent: {
-          contentOffset: {y: this.state.animatedValue},
-        },
-      },
-    ],
-    {useNativeDriver: true}, // <-- Set this to true
-  )}>
-  {content}
-</Animated.ScrollView>
-```
-
-You can see the native driver in action by running the [RNTester app](https://github.com/facebook/react-native/blob/main/packages/rn-tester/), then loading the Native Animated Example. You can also take a look at the [source code](https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js) to learn how these examples were produced.
-
-#### Caveats
-
-Not everything you can do with `Animated` is currently supported by the native driver. The main limitation is that you can only animate non-layout properties: things like `transform` and `opacity` will work, but Flexbox and position properties will not. When using `Animated.event`, it will only work with direct events and not bubbling events. This means it does not work with `PanResponder` but does work with things like `ScrollView#onScroll`.
-
-When an animation is running, it can prevent `VirtualizedList` components from rendering more rows. If you need to run a long or looping animation while the user is scrolling through a list, you can use `isInteraction: false` in your animation's config to prevent this issue.
-
-### Bear in mind
-
-While using transform styles such as `rotateY`, `rotateX`, and others ensure the transform style `perspective` is in place. At this time some animations may not render on Android without it. Example below.
-
-```tsx
-<Animated.View
-  style={{
-    transform: [
-      {scale: this.state.scale},
-      {rotateY: this.state.rotateY},
-      {perspective: 1000}, // without this line this Animation will not render on Android while working fine on iOS
-    ],
-  }}
-/>
-```
-
-### Additional examples
-
-The RNTester app has various examples of `Animated` in use:
-
-- [AnimatedGratuitousApp](https://github.com/facebook/react-native/tree/main/packages/rn-tester/js/examples/AnimatedGratuitousApp)
-- [NativeAnimationsExample](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js)
-
-## `LayoutAnimation` API
-
-`LayoutAnimation` allows you to globally configure `create` and `update` animations that will be used for all views in the next render/layout cycle. This is useful for doing Flexbox layout updates without bothering to measure or calculate specific properties in order to animate them directly, and is especially useful when layout changes may affect ancestors, for example a "see more" expansion that also increases the size of the parent and pushes down the row below which would otherwise require explicit coordination between the components in order to animate them all in sync.
-
-Note that although `LayoutAnimation` is very powerful and can be quite useful, it provides much less control than `Animated` and other animation libraries, so you may need to use another approach if you can't get `LayoutAnimation` to do what you want.
-
-Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`:
-
-```tsx
-UIManager.setLayoutAnimationEnabledExperimental(true);
-```
-
-```SnackPlayer name=LayoutAnimations
-import React, {useState} from 'react';
-import {
-  NativeModules,
-  LayoutAnimation,
-  Text,
-  TouchableOpacity,
-  StyleSheet,
-  View,
-} from 'react-native';
-
-const {UIManager} = NativeModules;
-
-UIManager.setLayoutAnimationEnabledExperimental &&
-  UIManager.setLayoutAnimationEnabledExperimental(true);
-
-export default function App() {
-  const [state, setState] = useState({
-    w: 100,
-    h: 100,
-  });
-
-  const onPress = () => {
-    // Animate the update
-    LayoutAnimation.spring();
-    setState({w: state.w + 15, h: state.h + 15});
-  };
-
-  return (
-    <View style={styles.container}>
-      <View
-        style={[styles.box, {width: state.w, height: state.h}]}
-      />
-      <TouchableOpacity onPress={onPress}>
-        <View style={styles.button}>
-          <Text style={styles.buttonText}>Press me!</Text>
-        </View>
-      </TouchableOpacity>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  box: {
-    width: 200,
-    height: 200,
-    backgroundColor: 'red',
-  },
-  button: {
-    backgroundColor: 'black',
-    paddingHorizontal: 20,
-    paddingVertical: 15,
-    marginTop: 15,
-  },
-  buttonText: {
-    color: '#fff',
-    fontWeight: 'bold',
-  },
-});
-```
-
-This example uses a preset value, you can customize the animations as you need, see [LayoutAnimation.js](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/LayoutAnimation/LayoutAnimation.js) for more information.
-
-## Additional notes
-
-### `requestAnimationFrame`
-
-`requestAnimationFrame` is a polyfill from the browser that you might be familiar with. It accepts a function as its only argument and calls that function before the next repaint. It is an essential building block for animations that underlies all of the JavaScript-based animation APIs. In general, you shouldn't need to call this yourself - the animation APIs will manage frame updates for you.
-
-### `setNativeProps`
-
-As mentioned [in the Direct Manipulation section](legacy/direct-manipulation), `setNativeProps` allows us to modify properties of native-backed components (components that are actually backed by native views, unlike composite components) directly, without having to `setState` and re-render the component hierarchy.
-
-We could use this in the Rebound example to update the scale - this might be helpful if the component that we are updating is deeply nested and hasn't been optimized with `shouldComponentUpdate`.
-
-If you find your animations with dropping frames (performing below 60 frames per second), look into using `setNativeProps` or `shouldComponentUpdate` to optimize them. Or you could run the animations on the UI thread rather than the JavaScript thread [with the useNativeDriver option](/blog/2017/02/14/using-native-driver-for-animated). You may also want to defer any computationally intensive work until after animations are complete, using the [InteractionManager](interactionmanager). You can monitor the frame rate by using the In-App Dev Menu "FPS Monitor" tool.
+---
+id: animations
+title: Animations
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface.
+
+React Native provides two complementary animation systems: [`Animated`](animations#animated-api) for granular and interactive control of specific values, and [`LayoutAnimation`](animations#layoutanimation-api) for animated global layout transactions.
+
+## `Animated` API
+
+The [`Animated`](animated) API is designed to concisely express a wide variety of interesting animation and interaction patterns in a very performant way. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and `start`/`stop` methods to control time-based animation execution.
+
+`Animated` exports six animatable component types: `View`, `Text`, `Image`, `ScrollView`, `FlatList` and `SectionList`, but you can also create your own using `Animated.createAnimatedComponent()`.
+
+For example, a container view that fades in when it is mounted may look like this:
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer ext=js
+import {useEffect, useRef} from 'react';
+import {Animated, Text, View} from 'react-native';
+
+const FadeInView = props => {
+  const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
+
+  useEffect(() => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 10000,
+      useNativeDriver: true,
+    }).start();
+  }, [fadeAnim]);
+
+  return (
+    <Animated.View // Special animatable View
+      style={{
+        ...props.style,
+        opacity: fadeAnim, // Bind opacity to animated value
+      }}>
+      {props.children}
+    </Animated.View>
+  );
+};
+
+// You can then use your `FadeInView` in place of a `View` in your components:
+export default () => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+      <FadeInView
+        style={{
+          width: 250,
+          height: 50,
+          backgroundColor: 'powderblue',
+        }}>
+        <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>
+          Fading in
+        </Text>
+      </FadeInView>
+    </View>
+  );
+};
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer ext=tsx
+import {useEffect, useRef, type PropsWithChildren, type FC} from 'react';
+import {Animated, Text, View, type ViewStyle} from 'react-native';
+
+type FadeInViewProps = PropsWithChildren<{style: ViewStyle}>;
+
+const FadeInView: FC<FadeInViewProps> = props => {
+  const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
+
+  useEffect(() => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 10000,
+      useNativeDriver: true,
+    }).start();
+  }, [fadeAnim]);
+
+  return (
+    <Animated.View // Special animatable View
+      style={{
+        ...props.style,
+        opacity: fadeAnim, // Bind opacity to animated value
+      }}>
+      {props.children}
+    </Animated.View>
+  );
+};
+
+// You can then use your `FadeInView` in place of a `View` in your components:
+export default () => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+      <FadeInView
+        style={{
+          width: 250,
+          height: 50,
+          backgroundColor: 'powderblue',
+        }}>
+        <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>
+          Fading in
+        </Text>
+      </FadeInView>
+    </View>
+  );
+};
+```
+
+</TabItem>
+</Tabs>
+
+Let's break down what's happening here. In the `FadeInView` render method, a new `Animated.Value` called `fadeAnim` is initialized with `useRef`. The opacity property on the `View` is mapped to this animated value. Behind the scenes, the numeric value is extracted and used to set opacity.
+
+When the component mounts, the opacity is set to 0. Then, an easing animation is started on the `fadeAnim` animated value, which will update all of its dependent mappings (in this case, only the opacity) on each frame as the value animates to the final value of 1.
+
+This is done in an optimized way that is faster than calling `setState` and re-rendering. Because the entire configuration is declarative, we will be able to implement further optimizations that serialize the configuration and runs the animation on a high-priority thread.
+
+### Configuring animations
+
+Animations are heavily configurable. Custom and predefined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.
+
+`Animated` provides several animation types, the most commonly used one being [`Animated.timing()`](animated#timing). It supports animating a value over time using one of various predefined easing functions, or you can use your own. Easing functions are typically used in animation to convey gradual acceleration and deceleration of objects.
+
+By default, `timing` will use an easeInOut curve that conveys gradual acceleration to full speed and concludes by gradually decelerating to a stop. You can specify a different easing function by passing an `easing` parameter. Custom `duration` or even a `delay` before the animation starts is also supported.
+
+For example, if we want to create a 2-second long animation of an object that slightly backs up before moving to its final position:
+
+```tsx
+Animated.timing(this.state.xPosition, {
+  toValue: 100,
+  easing: Easing.back(),
+  duration: 2000,
+  useNativeDriver: true,
+}).start();
+```
+
+Take a look at the [Configuring animations](animated#configuring-animations) section of the `Animated` API reference to learn more about all the config parameters supported by the built-in animations.
+
+### Composing animations
+
+Animations can be combined and played in sequence or in parallel. Sequential animations can play immediately after the previous animation has finished, or they can start after a specified delay. The `Animated` API provides several methods, such as `sequence()` and `delay()`, each of which take an array of animations to execute and automatically calls `start()`/`stop()` as needed.
+
+For example, the following animation coasts to a stop, then it springs back while twirling in parallel:
+
+```tsx
+Animated.sequence([
+  // decay, then spring to start and twirl
+  Animated.decay(position, {
+    // coast to a stop
+    velocity: {x: gestureState.vx, y: gestureState.vy}, // velocity from gesture release
+    deceleration: 0.997,
+    useNativeDriver: true,
+  }),
+  Animated.parallel([
+    // after decay, in parallel:
+    Animated.spring(position, {
+      toValue: {x: 0, y: 0}, // return to start
+      useNativeDriver: true,
+    }),
+    Animated.timing(twirl, {
+      // and twirl
+      toValue: 360,
+      useNativeDriver: true,
+    }),
+  ]),
+]).start(); // start the sequence group
+```
+
+If one animation is stopped or interrupted, then all other animations in the group are also stopped. `Animated.parallel` has a `stopTogether` option that can be set to `false` to disable this.
+
+You can find a full list of composition methods in the [Composing animations](animated#composing-animations) section of the `Animated` API reference.
+
+### Combining animated values
+
+You can [combine two animated values](animated#combining-animated-values) via addition, multiplication, division, or modulo to make a new animated value.
+
+There are some cases where an animated value needs to invert another animated value for calculation. An example is inverting a scale (2x --> 0.5x):
+
+```tsx
+const a = new Animated.Value(1);
+const b = Animated.divide(1, a);
+
+Animated.spring(a, {
+  toValue: 2,
+  useNativeDriver: true,
+}).start();
+```
+
+### Interpolation
+
+Each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.
+
+A basic mapping to convert a 0-1 range to a 0-100 range would be:
+
+```tsx
+value.interpolate({
+  inputRange: [0, 1],
+  outputRange: [0, 100],
+});
+```
+
+For example, you may want to think about your `Animated.Value` as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying `style` from the example above like so:
+
+```tsx
+  style={{
+    opacity: this.state.fadeAnim, // Binds directly
+    transform: [{
+      translateY: this.state.fadeAnim.interpolate({
+        inputRange: [0, 1],
+        outputRange: [150, 0]  // 0 : 150, 0.5 : 75, 1 : 0
+      }),
+    }],
+  }}
+```
+
+[`interpolate()`](animated#interpolate) supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
+
+```tsx
+value.interpolate({
+  inputRange: [-300, -100, 0, 100, 101],
+  outputRange: [300, 0, 1, 0, 0],
+});
+```
+
+Which would map like so:
+
+```
+Input | Output
+------|-------
+  -400|    450
+  -300|    300
+  -200|    150
+  -100|      0
+   -50|    0.5
+     0|      1
+    50|    0.5
+   100|      0
+   101|      0
+   200|      0
+```
+
+`interpolate()` also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
+
+```tsx
+value.interpolate({
+  inputRange: [0, 360],
+  outputRange: ['0deg', '360deg'],
+});
+```
+
+`interpolate()` also supports arbitrary easing functions, many of which are already implemented in the [`Easing`](easing) module. `interpolate()` also has configurable behavior for extrapolating the `outputRange`. You can set the extrapolation by setting the `extrapolate`, `extrapolateLeft`, or `extrapolateRight` options. The default value is `extend` but you can use `clamp` to prevent the output value from exceeding `outputRange`.
+
+### Tracking dynamic values
+
+Animated values can also track other values by setting the `toValue` of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a `spring()` pinned on another animated value, or with `timing()` and a `duration` of 0 for rigid tracking. They can also be composed with interpolations:
+
+```tsx
+Animated.spring(follower, {toValue: leader}).start();
+Animated.timing(opacity, {
+  toValue: pan.x.interpolate({
+    inputRange: [0, 300],
+    outputRange: [1, 0],
+  }),
+  useNativeDriver: true,
+}).start();
+```
+
+The `leader` and `follower` animated values would be implemented using `Animated.ValueXY()`. `ValueXY` is a handy way to deal with 2D interactions, such as panning or dragging. It is a basic wrapper that contains two `Animated.Value` instances and some helper functions that call through to them, making `ValueXY` a drop-in replacement for `Value` in many cases. It allows us to track both x and y values in the example above.
+
+### Tracking gestures
+
+Gestures, like panning or scrolling, and other events can map directly to animated values using [`Animated.event`](animated#event). This is done with a structured map syntax so that values can be extracted from complex event objects. The first level is an array to allow mapping across multiple args, and that array contains nested objects.
+
+For example, when working with horizontal scrolling gestures, you would do the following in order to map `event.nativeEvent.contentOffset.x` to `scrollX` (an `Animated.Value`):
+
+```tsx
+ onScroll={Animated.event(
+   // scrollX = e.nativeEvent.contentOffset.x
+   [{nativeEvent: {
+        contentOffset: {
+          x: scrollX
+        }
+      }
+    }]
+ )}
+```
+
+The following example implements a horizontal scrolling carousel where the scroll position indicators are animated using the `Animated.event` used in the `ScrollView`
+
+#### ScrollView with Animated Event Example
+
+```SnackPlayer name=Animated&supportedPlatforms=ios,android
+import {
+  ScrollView,
+  Text,
+  StyleSheet,
+  View,
+  ImageBackground,
+  Animated,
+  useWindowDimensions,
+  useAnimatedValue,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const images = new Array(6).fill(
+  'https://images.unsplash.com/photo-1556740749-887f6717d7e4',
+);
+
+const App = () => {
+  const scrollX = useAnimatedValue(0);
+
+  const {width: windowWidth} = useWindowDimensions();
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.scrollContainer}>
+          <ScrollView
+            horizontal={true}
+            pagingEnabled
+            showsHorizontalScrollIndicator={false}
+            onScroll={Animated.event([
+              {
+                nativeEvent: {
+                  contentOffset: {
+                    x: scrollX,
+                  },
+                },
+              },
+            ])}
+            scrollEventThrottle={1}>
+            {images.map((image, imageIndex) => {
+              return (
+                <View
+                  style={{width: windowWidth, height: 250}}
+                  key={imageIndex}>
+                  <ImageBackground source={{uri: image}} style={styles.card}>
+                    <View style={styles.textContainer}>
+                      <Text style={styles.infoText}>
+                        {'Image - ' + imageIndex}
+                      </Text>
+                    </View>
+                  </ImageBackground>
+                </View>
+              );
+            })}
+          </ScrollView>
+          <View style={styles.indicatorContainer}>
+            {images.map((image, imageIndex) => {
+              const width = scrollX.interpolate({
+                inputRange: [
+                  windowWidth * (imageIndex - 1),
+                  windowWidth * imageIndex,
+                  windowWidth * (imageIndex + 1),
+                ],
+                outputRange: [8, 16, 8],
+                extrapolate: 'clamp',
+              });
+              return (
+                <Animated.View
+                  key={imageIndex}
+                  style={[styles.normalDot, {width}]}
+                />
+              );
+            })}
+          </View>
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  scrollContainer: {
+    height: 300,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  card: {
+    flex: 1,
+    marginVertical: 4,
+    marginHorizontal: 16,
+    borderRadius: 5,
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  textContainer: {
+    backgroundColor: 'rgba(0,0,0, 0.7)',
+    paddingHorizontal: 24,
+    paddingVertical: 8,
+    borderRadius: 5,
+  },
+  infoText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  normalDot: {
+    height: 8,
+    width: 8,
+    borderRadius: 4,
+    backgroundColor: 'silver',
+    marginHorizontal: 4,
+  },
+  indicatorContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default App;
+```
+
+When using `PanResponder`, you could use the following code to extract the x and y positions from `gestureState.dx` and `gestureState.dy`. We use a `null` in the first position of the array, as we are only interested in the second argument passed to the `PanResponder` handler, which is the `gestureState`.
+
+```tsx
+onPanResponderMove={Animated.event(
+  [null, // ignore the native event
+  // extract dx and dy from gestureState
+  // like 'pan.x = gestureState.dx, pan.y = gestureState.dy'
+  {dx: pan.x, dy: pan.y}
+])}
+```
+
+#### PanResponder with Animated Event Example
+
+```SnackPlayer name=Animated
+import {useRef} from 'react';
+import {Animated, View, StyleSheet, PanResponder, Text} from 'react-native';
+
+const App = () => {
+  const pan = useRef(new Animated.ValueXY()).current;
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
+      onPanResponderRelease: () => {
+        Animated.spring(pan, {
+          toValue: {x: 0, y: 0},
+          useNativeDriver: true,
+        }).start();
+      },
+    }),
+  ).current;
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.titleText}>Drag & Release this box!</Text>
+      <Animated.View
+        style={{
+          transform: [{translateX: pan.x}, {translateY: pan.y}],
+        }}
+        {...panResponder.panHandlers}>
+        <View style={styles.box} />
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  titleText: {
+    fontSize: 14,
+    lineHeight: 24,
+    fontWeight: 'bold',
+  },
+  box: {
+    height: 150,
+    width: 150,
+    backgroundColor: 'blue',
+    borderRadius: 5,
+  },
+});
+
+export default App;
+```
+
+### Responding to the current animation value
+
+You may notice that there is no clear way to read the current value while animating. This is because the value may only be known in the native runtime due to optimizations. If you need to run JavaScript in response to the current value, there are two approaches:
+
+- `spring.stopAnimation(callback)` will stop the animation and invoke `callback` with the final value. This is useful when making gesture transitions.
+- `spring.addListener(callback)` will invoke `callback` asynchronously while the animation is running, providing a recent value. This is useful for triggering state changes, for example snapping a bobble to a new option as the user drags it closer, because these larger state changes are less sensitive to a few frames of lag compared to continuous gestures like panning which need to run at 60 fps.
+
+`Animated` is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Check out `Animated.Value.addListener` as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.
+
+### Using the native driver
+
+The `Animated` API is designed to be serializable. By using the [native driver](/blog/2017/02/14/using-native-driver-for-animated), we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.
+
+Using the native driver for normal animations can be accomplished by setting `useNativeDriver: true` in animation config when starting it. Animations without a `useNativeDriver` property will default to false for legacy reasons, but emit a warning (and typechecking error in TypeScript).
+
+```tsx
+Animated.timing(this.state.animatedValue, {
+  toValue: 1,
+  duration: 500,
+  useNativeDriver: true, // <-- Set this to true
+}).start();
+```
+
+Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
+
+The native driver also works with `Animated.event`. This is especially useful for animations that follow the scroll position as without the native driver, the animation will always run a frame behind the gesture due to the async nature of React Native.
+
+```tsx
+<Animated.ScrollView // <-- Use the Animated ScrollView wrapper
+  onScroll={Animated.event(
+    [
+      {
+        nativeEvent: {
+          contentOffset: {y: this.state.animatedValue},
+        },
+      },
+    ],
+    {useNativeDriver: true}, // <-- Set this to true
+  )}>
+  {content}
+</Animated.ScrollView>
+```
+
+You can see the native driver in action by running the [RNTester app](https://github.com/facebook/react-native/blob/main/packages/rn-tester/), then loading the Native Animated Example. You can also take a look at the [source code](https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js) to learn how these examples were produced.
+
+#### Caveats
+
+Not everything you can do with `Animated` is currently supported by the native driver. The main limitation is that you can only animate non-layout properties: things like `transform` and `opacity` will work, but Flexbox and position properties will not. When using `Animated.event`, it will only work with direct events and not bubbling events. This means it does not work with `PanResponder` but does work with things like `ScrollView#onScroll`.
+
+When an animation is running, it can prevent `VirtualizedList` components from rendering more rows. If you need to run a long or looping animation while the user is scrolling through a list, you can use `isInteraction: false` in your animation's config to prevent this issue.
+
+### Bear in mind
+
+While using transform styles such as `rotateY`, `rotateX`, and others ensure the transform style `perspective` is in place. At this time some animations may not render on Android without it. Example below.
+
+```tsx
+<Animated.View
+  style={{
+    transform: [
+      {scale: this.state.scale},
+      {rotateY: this.state.rotateY},
+      {perspective: 1000}, // without this line this Animation will not render on Android while working fine on iOS
+    ],
+  }}
+/>
+```
+
+### Additional examples
+
+The RNTester app has various examples of `Animated` in use:
+
+- [AnimatedGratuitousApp](https://github.com/facebook/react-native/tree/main/packages/rn-tester/js/examples/AnimatedGratuitousApp)
+- [NativeAnimationsExample](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js)
+
+## `LayoutAnimation` API
+
+`LayoutAnimation` allows you to globally configure `create` and `update` animations that will be used for all views in the next render/layout cycle. This is useful for doing Flexbox layout updates without bothering to measure or calculate specific properties in order to animate them directly, and is especially useful when layout changes may affect ancestors, for example a "see more" expansion that also increases the size of the parent and pushes down the row below which would otherwise require explicit coordination between the components in order to animate them all in sync.
+
+Note that although `LayoutAnimation` is very powerful and can be quite useful, it provides much less control than `Animated` and other animation libraries, so you may need to use another approach if you can't get `LayoutAnimation` to do what you want.
+
+Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`:
+
+```tsx
+UIManager.setLayoutAnimationEnabledExperimental(true);
+```
+
+```SnackPlayer name=LayoutAnimations
+import {useState} from 'react';
+import {
+  NativeModules,
+  LayoutAnimation,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  View,
+} from 'react-native';
+
+const {UIManager} = NativeModules;
+
+UIManager.setLayoutAnimationEnabledExperimental &&
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+
+export default function App() {
+  const [state, setState] = useState({
+    w: 100,
+    h: 100,
+  });
+
+  const onPress = () => {
+    // Animate the update
+    LayoutAnimation.spring();
+    setState({w: state.w + 15, h: state.h + 15});
+  };
+
+  return (
+    <View style={styles.container}>
+      <View
+        style={[styles.box, {width: state.w, height: state.h}]}
+      />
+      <TouchableOpacity onPress={onPress}>
+        <View style={styles.button}>
+          <Text style={styles.buttonText}>Press me!</Text>
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  box: {
+    width: 200,
+    height: 200,
+    backgroundColor: 'red',
+  },
+  button: {
+    backgroundColor: 'black',
+    paddingHorizontal: 20,
+    paddingVertical: 15,
+    marginTop: 15,
+  },
+  buttonText: {
+    color: '#fff',
+    fontWeight: 'bold',
+  },
+});
+```
+
+This example uses a preset value, you can customize the animations as you need, see [LayoutAnimation.js](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/LayoutAnimation/LayoutAnimation.js) for more information.
+
+## Additional notes
+
+### `requestAnimationFrame`
+
+`requestAnimationFrame` is a polyfill from the browser that you might be familiar with. It accepts a function as its only argument and calls that function before the next repaint. It is an essential building block for animations that underlies all of the JavaScript-based animation APIs. In general, you shouldn't need to call this yourself - the animation APIs will manage frame updates for you.
+
+### `setNativeProps`
+
+As mentioned [in the Direct Manipulation section](legacy/direct-manipulation), `setNativeProps` allows us to modify properties of native-backed components (components that are actually backed by native views, unlike composite components) directly, without having to `setState` and re-render the component hierarchy.
+
+We could use this in the Rebound example to update the scale - this might be helpful if the component that we are updating is deeply nested and hasn't been optimized with `shouldComponentUpdate`.
+
+If you find your animations with dropping frames (performing below 60 frames per second), look into using `setNativeProps` or `shouldComponentUpdate` to optimize them. Or you could run the animations on the UI thread rather than the JavaScript thread [with the useNativeDriver option](/blog/2017/02/14/using-native-driver-for-animated). You may also want to defer any computationally intensive work until after animations are complete, using the [InteractionManager](interactionmanager). You can monitor the frame rate by using the In-App Dev Menu "FPS Monitor" tool.
diff --git a/website/versioned_docs/version-0.81/appstate.md b/website/versioned_docs/version-0.81/appstate.md
index b776907d3e1..4980ef439da 100644
--- a/website/versioned_docs/version-0.81/appstate.md
+++ b/website/versioned_docs/version-0.81/appstate.md
@@ -1,122 +1,122 @@
----
-id: appstate
-title: AppState
----
-
-`AppState` can tell you if the app is in the foreground or background, and notify you when the state changes.
-
-AppState is frequently used to determine the intent and proper behavior when handling push notifications.
-
-### App States
-
-- `active` - The app is running in the foreground
-- `background` - The app is running in the background. The user is either:
-  - in another app
-  - on the home screen
-  - [Android] on another `Activity`, including temporary system activities such
-    as autofill credential pickers (even if launched by your app or the system)
-- [iOS] `inactive` - This is a state that occurs when transitioning between foreground & background, and during periods of inactivity such as entering the multitasking view, opening the Notification Center or in the event of an incoming call.
-
-For more information, see [Apple's documentation](https://developer.apple.com/documentation/uikit/app_and_scenes/managing_your_app_s_life_cycle)
-
-## Basic Usage
-
-To see the current state, you can check `AppState.currentState`, which will be kept up-to-date.
-
-:::info
-If you are using the legacy architecture, `currentState` will be `null` at launch until it is retrieved asynchronously from the native side.
-:::
-
-```SnackPlayer name=AppState%20Example
-import React, {useRef, useState, useEffect} from 'react';
-import {AppState, StyleSheet, Text} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const AppStateExample = () => {
-  const appState = useRef(AppState.currentState);
-  const [appStateVisible, setAppStateVisible] = useState(appState.current);
-
-  useEffect(() => {
-    const subscription = AppState.addEventListener('change', nextAppState => {
-      if (
-        appState.current.match(/inactive|background/) &&
-        nextAppState === 'active'
-      ) {
-        console.log('App has come to the foreground!');
-      }
-
-      appState.current = nextAppState;
-      setAppStateVisible(appState.current);
-      console.log('AppState', appState.current);
-    });
-
-    return () => {
-      subscription.remove();
-    };
-  }, []);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>Current state is: {appStateVisible}</Text>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default AppStateExample;
-```
-
-This example will only ever appear to say "Current state is: active" because the app is only visible to the user when in the `active` state. If you want to experiment with the code we recommend to use your own device instead of embedded preview.
-
----
-
-# Reference
-
-## Events
-
-### `change`
-
-This event is received when the app state has changed. The listener is called with one of [the current app state values](appstate#app-states).
-
-### `memoryWarning` <div className="label ios">iOS</div>
-
-Fires when the app receives a memory warning from the operating system.
-
-### `focus` <div className="label android">Android</div>
-
-Received when the app gains focus (the user is interacting with the app).
-
-### `blur` <div className="label android">Android</div>
-
-Received when the user is not actively interacting with the app. Useful in situations when the user pulls down the [notification drawer](https://developer.android.com/guide/topics/ui/notifiers/notifications#bar-and-drawer). `AppState` won't change but the `blur` event will get fired.
-
-## Methods
-
-### `addEventListener()`
-
-```tsx
-static addEventListener(
-  type: AppStateEvent,
-  listener: (state: AppStateStatus) => void,
-): NativeEventSubscription;
-```
-
-Sets up a function that will be called whenever the specified event type on AppState occurs. Valid values for `eventType` are
-[listed above](#events). Returns the `EventSubscription`.
-
-## Properties
-
-### `currentState`
-
-```tsx
-static currentState: AppStateStatus;
-```
+---
+id: appstate
+title: AppState
+---
+
+`AppState` can tell you if the app is in the foreground or background, and notify you when the state changes.
+
+AppState is frequently used to determine the intent and proper behavior when handling push notifications.
+
+### App States
+
+- `active` - The app is running in the foreground
+- `background` - The app is running in the background. The user is either:
+  - in another app
+  - on the home screen
+  - [Android] on another `Activity`, including temporary system activities such
+    as autofill credential pickers (even if launched by your app or the system)
+- [iOS] `inactive` - This is a state that occurs when transitioning between foreground & background, and during periods of inactivity such as entering the multitasking view, opening the Notification Center or in the event of an incoming call.
+
+For more information, see [Apple's documentation](https://developer.apple.com/documentation/uikit/app_and_scenes/managing_your_app_s_life_cycle)
+
+## Basic Usage
+
+To see the current state, you can check `AppState.currentState`, which will be kept up-to-date.
+
+:::info
+If you are using the legacy architecture, `currentState` will be `null` at launch until it is retrieved asynchronously from the native side.
+:::
+
+```SnackPlayer name=AppState%20Example
+import {useRef, useState, useEffect} from 'react';
+import {AppState, StyleSheet, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const AppStateExample = () => {
+  const appState = useRef(AppState.currentState);
+  const [appStateVisible, setAppStateVisible] = useState(appState.current);
+
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', nextAppState => {
+      if (
+        appState.current.match(/inactive|background/) &&
+        nextAppState === 'active'
+      ) {
+        console.log('App has come to the foreground!');
+      }
+
+      appState.current = nextAppState;
+      setAppStateVisible(appState.current);
+      console.log('AppState', appState.current);
+    });
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>Current state is: {appStateVisible}</Text>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default AppStateExample;
+```
+
+This example will only ever appear to say "Current state is: active" because the app is only visible to the user when in the `active` state. If you want to experiment with the code we recommend to use your own device instead of embedded preview.
+
+---
+
+# Reference
+
+## Events
+
+### `change`
+
+This event is received when the app state has changed. The listener is called with one of [the current app state values](appstate#app-states).
+
+### `memoryWarning` <div className="label ios">iOS</div>
+
+Fires when the app receives a memory warning from the operating system.
+
+### `focus` <div className="label android">Android</div>
+
+Received when the app gains focus (the user is interacting with the app).
+
+### `blur` <div className="label android">Android</div>
+
+Received when the user is not actively interacting with the app. Useful in situations when the user pulls down the [notification drawer](https://developer.android.com/guide/topics/ui/notifiers/notifications#bar-and-drawer). `AppState` won't change but the `blur` event will get fired.
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+  type: AppStateEvent,
+  listener: (state: AppStateStatus) => void,
+): NativeEventSubscription;
+```
+
+Sets up a function that will be called whenever the specified event type on AppState occurs. Valid values for `eventType` are
+[listed above](#events). Returns the `EventSubscription`.
+
+## Properties
+
+### `currentState`
+
+```tsx
+static currentState: AppStateStatus;
+```
diff --git a/website/versioned_docs/version-0.81/backhandler.md b/website/versioned_docs/version-0.81/backhandler.md
index 66f0a212faa..4061b19a2ff 100644
--- a/website/versioned_docs/version-0.81/backhandler.md
+++ b/website/versioned_docs/version-0.81/backhandler.md
@@ -1,134 +1,134 @@
----
-id: backhandler
-title: BackHandler
----
-
-The Backhandler API detects hardware button presses for back navigation, lets you register event listeners for the system's back action, and lets you control how your application responds. It is Android-only.
-
-The event subscriptions are called in reverse order (i.e. the last registered subscription is called first).
-
-- **If one subscription returns true,** then subscriptions registered earlier will not be called.
-- **If no subscription returns true or none are registered,** it programmatically invokes the default back button functionality to exit the app.
-
-> **Warning for modal users:** If your app shows an opened `Modal`, `BackHandler` will not publish any events ([see `Modal` docs](modal#onrequestclose)).
-
-## Pattern
-
-```tsx
-const subscription = BackHandler.addEventListener(
-  'hardwareBackPress',
-  function () {
-    /**
-     * this.onMainScreen and this.goBack are just examples,
-     * you need to use your own implementation here.
-     *
-     * Typically you would use the navigator here to go to the last state.
-     */
-
-    if (!this.onMainScreen()) {
-      this.goBack();
-      /**
-       * When true is returned the event will not be bubbled up
-       * & no other back action will execute
-       */
-      return true;
-    }
-    /**
-     * Returning false will let the event to bubble up & let other event listeners
-     * or the system's default back action to be executed.
-     */
-    return false;
-  },
-);
-
-// Unsubscribe the listener on unmount
-subscription.remove();
-```
-
-## Example
-
-The following example implements a scenario where you confirm if the user wants to exit the app:
-
-```SnackPlayer name=BackHandler&supportedPlatforms=android
-import React, {useEffect} from 'react';
-import {Text, StyleSheet, BackHandler, Alert} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  useEffect(() => {
-    const backAction = () => {
-      Alert.alert('Hold on!', 'Are you sure you want to go back?', [
-        {
-          text: 'Cancel',
-          onPress: () => null,
-          style: 'cancel',
-        },
-        {text: 'YES', onPress: () => BackHandler.exitApp()},
-      ]);
-      return true;
-    };
-
-    const backHandler = BackHandler.addEventListener(
-      'hardwareBackPress',
-      backAction,
-    );
-
-    return () => backHandler.remove();
-  }, []);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.text}>Click Back button!</Text>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  text: {
-    fontSize: 18,
-    fontWeight: 'bold',
-  },
-});
-
-export default App;
-```
-
-`BackHandler.addEventListener` creates an event listener & returns a `NativeEventSubscription` object which should be cleared using `NativeEventSubscription.remove` method.
-
-## Usage with React Navigation
-
-If you are using React Navigation to navigate across different screens, you can follow their guide on [Custom Android back button behaviour](https://reactnavigation.org/docs/custom-android-back-button-handling/)
-
-## Backhandler hook
-
-[React Native Hooks](https://github.com/react-native-community/hooks#usebackhandler) has a nice `useBackHandler` hook which will simplify the process of setting up event listeners.
-
----
-
-# Reference
-
-## Methods
-
-### `addEventListener()`
-
-```tsx
-static addEventListener(
-  eventName: BackPressEventName,
-  handler: () => boolean | null | undefined,
-): NativeEventSubscription;
-```
-
----
-
-### `exitApp()`
-
-```tsx
-static exitApp();
-```
+---
+id: backhandler
+title: BackHandler
+---
+
+The Backhandler API detects hardware button presses for back navigation, lets you register event listeners for the system's back action, and lets you control how your application responds. It is Android-only.
+
+The event subscriptions are called in reverse order (i.e. the last registered subscription is called first).
+
+- **If one subscription returns true,** then subscriptions registered earlier will not be called.
+- **If no subscription returns true or none are registered,** it programmatically invokes the default back button functionality to exit the app.
+
+> **Warning for modal users:** If your app shows an opened `Modal`, `BackHandler` will not publish any events ([see `Modal` docs](modal#onrequestclose)).
+
+## Pattern
+
+```tsx
+const subscription = BackHandler.addEventListener(
+  'hardwareBackPress',
+  function () {
+    /**
+     * this.onMainScreen and this.goBack are just examples,
+     * you need to use your own implementation here.
+     *
+     * Typically you would use the navigator here to go to the last state.
+     */
+
+    if (!this.onMainScreen()) {
+      this.goBack();
+      /**
+       * When true is returned the event will not be bubbled up
+       * & no other back action will execute
+       */
+      return true;
+    }
+    /**
+     * Returning false will let the event to bubble up & let other event listeners
+     * or the system's default back action to be executed.
+     */
+    return false;
+  },
+);
+
+// Unsubscribe the listener on unmount
+subscription.remove();
+```
+
+## Example
+
+The following example implements a scenario where you confirm if the user wants to exit the app:
+
+```SnackPlayer name=BackHandler&supportedPlatforms=android
+import {useEffect} from 'react';
+import {Text, StyleSheet, BackHandler, Alert} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  useEffect(() => {
+    const backAction = () => {
+      Alert.alert('Hold on!', 'Are you sure you want to go back?', [
+        {
+          text: 'Cancel',
+          onPress: () => null,
+          style: 'cancel',
+        },
+        {text: 'YES', onPress: () => BackHandler.exitApp()},
+      ]);
+      return true;
+    };
+
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      backAction,
+    );
+
+    return () => backHandler.remove();
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.text}>Click Back button!</Text>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+});
+
+export default App;
+```
+
+`BackHandler.addEventListener` creates an event listener & returns a `NativeEventSubscription` object which should be cleared using `NativeEventSubscription.remove` method.
+
+## Usage with React Navigation
+
+If you are using React Navigation to navigate across different screens, you can follow their guide on [Custom Android back button behaviour](https://reactnavigation.org/docs/custom-android-back-button-handling/)
+
+## Backhandler hook
+
+[React Native Hooks](https://github.com/react-native-community/hooks#usebackhandler) has a nice `useBackHandler` hook which will simplify the process of setting up event listeners.
+
+---
+
+# Reference
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+  eventName: BackPressEventName,
+  handler: () => boolean | null | undefined,
+): NativeEventSubscription;
+```
+
+---
+
+### `exitApp()`
+
+```tsx
+static exitApp();
+```
diff --git a/website/versioned_docs/version-0.81/button.md b/website/versioned_docs/version-0.81/button.md
index cfed6819d28..23501057f52 100644
--- a/website/versioned_docs/version-0.81/button.md
+++ b/website/versioned_docs/version-0.81/button.md
@@ -18,13 +18,20 @@ If this button doesn't look right for your app, you can build your own button us
 
 ## Example
 
-```SnackPlayer name=Button%20Example
-import React from 'react';
-import {StyleSheet, Button, View, Text, Alert} from 'react-native';
+```SnackPlayer name=Button%20Example&ext=js
+import {StyleSheet, Button, View, Text, Alert, Platform} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
 const Separator = () => <View style={styles.separator} />;
 
+function showAlert(message) {
+  if (Platform.OS === 'web') {
+    window.alert(message);
+  } else {
+    Alert.alert(message);
+  }
+}
+
 const App = () => (
   <SafeAreaProvider>
     <SafeAreaView style={styles.container}>
@@ -35,7 +42,7 @@ const App = () => (
         </Text>
         <Button
           title="Press me"
-          onPress={() => Alert.alert('Simple Button pressed')}
+          onPress={() => showAlert('Simple Button pressed')}
         />
       </View>
       <Separator />
@@ -48,7 +55,7 @@ const App = () => (
         <Button
           title="Press me"
           color="#f194ff"
-          onPress={() => Alert.alert('Button with adjusted color pressed')}
+          onPress={() => showAlert('Button with adjusted color pressed')}
         />
       </View>
       <Separator />
@@ -59,7 +66,7 @@ const App = () => (
         <Button
           title="Press me"
           disabled
-          onPress={() => Alert.alert('Cannot press this one')}
+          onPress={() => showAlert('Cannot press this one')}
         />
       </View>
       <Separator />
@@ -70,11 +77,11 @@ const App = () => (
         <View style={styles.fixToText}>
           <Button
             title="Left button"
-            onPress={() => Alert.alert('Left button pressed')}
+            onPress={() => showAlert('Left button pressed')}
           />
           <Button
             title="Right button"
-            onPress={() => Alert.alert('Right button pressed')}
+            onPress={() => showAlert('Right button pressed')}
           />
         </View>
       </View>
diff --git a/website/versioned_docs/version-0.81/communication-android.md b/website/versioned_docs/version-0.81/communication-android.md
index f78dc84cf65..35aab358818 100644
--- a/website/versioned_docs/version-0.81/communication-android.md
+++ b/website/versioned_docs/version-0.81/communication-android.md
@@ -67,7 +67,6 @@ class MainActivity : ReactActivity() {
 </Tabs>
 
 ```tsx
-import React from 'react';
 import {View, Image} from 'react-native';
 
 export default class ImageBrowserApp extends React.Component {
diff --git a/website/versioned_docs/version-0.81/communication-ios.md b/website/versioned_docs/version-0.81/communication-ios.md
index f82cae7e620..89a64ff9b4c 100644
--- a/website/versioned_docs/version-0.81/communication-ios.md
+++ b/website/versioned_docs/version-0.81/communication-ios.md
@@ -33,7 +33,6 @@ RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
 ```
 
 ```tsx
-import React from 'react';
 import {View, Image} from 'react-native';
 
 export default class ImageBrowserApp extends React.Component {
diff --git a/website/versioned_docs/version-0.81/dimensions.md b/website/versioned_docs/version-0.81/dimensions.md
index cf329d65f01..d548e2c0b47 100644
--- a/website/versioned_docs/version-0.81/dimensions.md
+++ b/website/versioned_docs/version-0.81/dimensions.md
@@ -1,150 +1,150 @@
----
-id: dimensions
-title: Dimensions
----
-
-> [`useWindowDimensions`](usewindowdimensions) is the preferred API for React components. Unlike `Dimensions`, it updates as the window's dimensions update. This works nicely with the React paradigm.
-
-```tsx
-import {Dimensions} from 'react-native';
-```
-
-You can get the application window's width and height using the following code:
-
-```tsx
-const windowWidth = Dimensions.get('window').width;
-const windowHeight = Dimensions.get('window').height;
-```
-
-> Although dimensions are available immediately, they may change (e.g due to device rotation, foldable devices etc) so any rendering logic or styles that depend on these constants should try to call this function on every render, rather than caching the value (for example, using inline styles rather than setting a value in a `StyleSheet`).
-
-If you are targeting foldable devices or devices which can change the screen size or app window size, you can use the event listener available in the Dimensions module as shown in the below example.
-
-## Example
-
-```SnackPlayer name=Dimensions%20Example
-import React, {useState, useEffect} from 'react';
-import {StyleSheet, Text, Dimensions} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const windowDimensions = Dimensions.get('window');
-const screenDimensions = Dimensions.get('screen');
-
-const App = () => {
-  const [dimensions, setDimensions] = useState({
-    window: windowDimensions,
-    screen: screenDimensions,
-  });
-
-  useEffect(() => {
-    const subscription = Dimensions.addEventListener(
-      'change',
-      ({window, screen}) => {
-        setDimensions({window, screen});
-      },
-    );
-    return () => subscription?.remove();
-  });
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.header}>Window Dimensions</Text>
-        {Object.entries(dimensions.window).map(([key, value]) => (
-          <Text>
-            {key} - {value}
-          </Text>
-        ))}
-        <Text style={styles.header}>Screen Dimensions</Text>
-        {Object.entries(dimensions.screen).map(([key, value]) => (
-          <Text>
-            {key} - {value}
-          </Text>
-        ))}
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  header: {
-    fontSize: 16,
-    marginVertical: 10,
-  },
-});
-
-export default App;
-```
-
-# Reference
-
-## Methods
-
-### `addEventListener()`
-
-```tsx
-static addEventListener(
-  type: 'change',
-  handler: ({
-    window,
-    screen,
-  }: DimensionsValue) => void,
-): EmitterSubscription;
-```
-
-Add an event handler. Supported events:
-
-- `change`: Fires when a property within the `Dimensions` object changes. The argument to the event handler is a [`DimensionsValue`](#dimensionsvalue) type object.
-
----
-
-### `get()`
-
-```tsx
-static get(dim: 'window' | 'screen'): ScaledSize;
-```
-
-Initial dimensions are set before `runApplication` is called so they should be available before any other require's are run, but may be updated later.
-
-Example: `const {height, width} = Dimensions.get('window');`
-
-**Parameters:**
-
-| Name                                                               | Type   | Description                                                                       |
-| ------------------------------------------------------------------ | ------ | --------------------------------------------------------------------------------- |
-| dim <div className="label basic required two-lines">Required</div> | string | Name of dimension as defined when calling `set`. Returns value for the dimension. |
-
-> For Android the `window` dimension will exclude the size used by the `status bar` (if not translucent) and `bottom navigation bar`
-
----
-
-## Type Definitions
-
-### DimensionsValue
-
-**Properties:**
-
-| Name   | Type                                | Description                             |
-| ------ | ----------------------------------- | --------------------------------------- |
-| window | [ScaledSize](dimensions#scaledsize) | Size of the visible Application window. |
-| screen | [ScaledSize](dimensions#scaledsize) | Size of the device's screen.            |
-
-### ScaledSize
-
-| Type   |
-| ------ |
-| object |
-
-**Properties:**
-
-| Name      | Type   |
-| --------- | ------ |
-| width     | number |
-| height    | number |
-| scale     | number |
-| fontScale | number |
+---
+id: dimensions
+title: Dimensions
+---
+
+> [`useWindowDimensions`](usewindowdimensions) is the preferred API for React components. Unlike `Dimensions`, it updates as the window's dimensions update. This works nicely with the React paradigm.
+
+```tsx
+import {Dimensions} from 'react-native';
+```
+
+You can get the application window's width and height using the following code:
+
+```tsx
+const windowWidth = Dimensions.get('window').width;
+const windowHeight = Dimensions.get('window').height;
+```
+
+> Although dimensions are available immediately, they may change (e.g due to device rotation, foldable devices etc) so any rendering logic or styles that depend on these constants should try to call this function on every render, rather than caching the value (for example, using inline styles rather than setting a value in a `StyleSheet`).
+
+If you are targeting foldable devices or devices which can change the screen size or app window size, you can use the event listener available in the Dimensions module as shown in the below example.
+
+## Example
+
+```SnackPlayer name=Dimensions%20Example
+import {useState, useEffect} from 'react';
+import {StyleSheet, Text, Dimensions} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const windowDimensions = Dimensions.get('window');
+const screenDimensions = Dimensions.get('screen');
+
+const App = () => {
+  const [dimensions, setDimensions] = useState({
+    window: windowDimensions,
+    screen: screenDimensions,
+  });
+
+  useEffect(() => {
+    const subscription = Dimensions.addEventListener(
+      'change',
+      ({window, screen}) => {
+        setDimensions({window, screen});
+      },
+    );
+    return () => subscription?.remove();
+  });
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.header}>Window Dimensions</Text>
+        {Object.entries(dimensions.window).map(([key, value]) => (
+          <Text>
+            {key} - {value}
+          </Text>
+        ))}
+        <Text style={styles.header}>Screen Dimensions</Text>
+        {Object.entries(dimensions.screen).map(([key, value]) => (
+          <Text>
+            {key} - {value}
+          </Text>
+        ))}
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  header: {
+    fontSize: 16,
+    marginVertical: 10,
+  },
+});
+
+export default App;
+```
+
+# Reference
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+  type: 'change',
+  handler: ({
+    window,
+    screen,
+  }: DimensionsValue) => void,
+): EmitterSubscription;
+```
+
+Add an event handler. Supported events:
+
+- `change`: Fires when a property within the `Dimensions` object changes. The argument to the event handler is a [`DimensionsValue`](#dimensionsvalue) type object.
+
+---
+
+### `get()`
+
+```tsx
+static get(dim: 'window' | 'screen'): ScaledSize;
+```
+
+Initial dimensions are set before `runApplication` is called so they should be available before any other require's are run, but may be updated later.
+
+Example: `const {height, width} = Dimensions.get('window');`
+
+**Parameters:**
+
+| Name                                                               | Type   | Description                                                                       |
+| ------------------------------------------------------------------ | ------ | --------------------------------------------------------------------------------- |
+| dim <div className="label basic required two-lines">Required</div> | string | Name of dimension as defined when calling `set`. Returns value for the dimension. |
+
+> For Android the `window` dimension will exclude the size used by the `status bar` (if not translucent) and `bottom navigation bar`
+
+---
+
+## Type Definitions
+
+### DimensionsValue
+
+**Properties:**
+
+| Name   | Type                                | Description                             |
+| ------ | ----------------------------------- | --------------------------------------- |
+| window | [ScaledSize](dimensions#scaledsize) | Size of the visible Application window. |
+| screen | [ScaledSize](dimensions#scaledsize) | Size of the device's screen.            |
+
+### ScaledSize
+
+| Type   |
+| ------ |
+| object |
+
+**Properties:**
+
+| Name      | Type   |
+| --------- | ------ |
+| width     | number |
+| height    | number |
+| scale     | number |
+| fontScale | number |
diff --git a/website/versioned_docs/version-0.81/drawerlayoutandroid.md b/website/versioned_docs/version-0.81/drawerlayoutandroid.md
index 3714318df5c..76b4c507c6a 100644
--- a/website/versioned_docs/version-0.81/drawerlayoutandroid.md
+++ b/website/versioned_docs/version-0.81/drawerlayoutandroid.md
@@ -1,323 +1,323 @@
----
-id: drawerlayoutandroid
-title: DrawerLayoutAndroid
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-React component that wraps the platform `DrawerLayout` (Android only). The Drawer (typically used for navigation) is rendered with `renderNavigationView` and direct children are the main view (where your content goes). The navigation view is initially not visible on the screen, but can be pulled in from the side of the window specified by the `drawerPosition` prop and its width can be set by the `drawerWidth` prop.
-
-## Example
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android&ext=js
-import React, {useRef, useState} from 'react';
-import {Button, DrawerLayoutAndroid, Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const drawer = useRef(null);
-  const [drawerPosition, setDrawerPosition] = useState('left');
-  const changeDrawerPosition = () => {
-    if (drawerPosition === 'left') {
-      setDrawerPosition('right');
-    } else {
-      setDrawerPosition('left');
-    }
-  };
-
-  const navigationView = () => (
-    <SafeAreaView style={[styles.container, styles.navigationContainer]}>
-      <Text style={styles.paragraph}>I'm in the Drawer!</Text>
-      <Button
-        title="Close drawer"
-        onPress={() => drawer.current.closeDrawer()}
-      />
-    </SafeAreaView>
-  );
-
-  return (
-    <SafeAreaProvider>
-      <DrawerLayoutAndroid
-        ref={drawer}
-        drawerWidth={300}
-        drawerPosition={drawerPosition}
-        renderNavigationView={navigationView}>
-        <SafeAreaView style={styles.container}>
-          <Text style={styles.paragraph}>Drawer on the {drawerPosition}!</Text>
-          <Button
-            title="Change Drawer Position"
-            onPress={() => changeDrawerPosition()}
-          />
-          <Text style={styles.paragraph}>
-            Swipe from the side or press button below to see it!
-          </Text>
-          <Button
-            title="Open drawer"
-            onPress={() => drawer.current.openDrawer()}
-          />
-        </SafeAreaView>
-      </DrawerLayoutAndroid>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingHorizontal: 16,
-  },
-  navigationContainer: {
-    backgroundColor: '#ecf0f1',
-  },
-  paragraph: {
-    padding: 16,
-    fontSize: 15,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android&ext=tsx
-import React, {useRef, useState} from 'react';
-import {
-  Button,
-  DrawerLayoutAndroid,
-  Text,
-  StyleSheet,
-  View,
-} from 'react-native';
-
-const App = () => {
-  const drawer = useRef<DrawerLayoutAndroid>(null);
-  const [drawerPosition, setDrawerPosition] = useState<'left' | 'right'>(
-    'left',
-  );
-  const changeDrawerPosition = () => {
-    if (drawerPosition === 'left') {
-      setDrawerPosition('right');
-    } else {
-      setDrawerPosition('left');
-    }
-  };
-
-  const navigationView = () => (
-    <View style={[styles.container, styles.navigationContainer]}>
-      <Text style={styles.paragraph}>I'm in the Drawer!</Text>
-      <Button
-        title="Close drawer"
-        onPress={() => drawer.current?.closeDrawer()}
-      />
-    </View>
-  );
-
-  return (
-    <DrawerLayoutAndroid
-      ref={drawer}
-      drawerWidth={300}
-      drawerPosition={drawerPosition}
-      renderNavigationView={navigationView}>
-      <View style={styles.container}>
-        <Text style={styles.paragraph}>Drawer on the {drawerPosition}!</Text>
-        <Button
-          title="Change Drawer Position"
-          onPress={() => changeDrawerPosition()}
-        />
-        <Text style={styles.paragraph}>
-          Swipe from the side or press button below to see it!
-        </Text>
-        <Button
-          title="Open drawer"
-          onPress={() => drawer.current?.openDrawer()}
-        />
-      </View>
-    </DrawerLayoutAndroid>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 16,
-  },
-  navigationContainer: {
-    backgroundColor: '#ecf0f1',
-  },
-  paragraph: {
-    padding: 16,
-    fontSize: 15,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
----
-
-# Reference
-
-## Props
-
-### [View Props](view.md#props)
-
-Inherits [View Props](view.md#props).
-
----
-
-### `drawerBackgroundColor`
-
-Specifies the background color of the drawer. The default value is `white`. If you want to set the opacity of the drawer, use rgba. Example:
-
-```tsx
-return (
-  <DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)" />
-);
-```
-
-| Type               | Required |
-| ------------------ | -------- |
-| [color](colors.md) | No       |
-
----
-
-### `drawerLockMode`
-
-Specifies the lock mode of the drawer. The drawer can be locked in 3 states:
-
-- unlocked (default), meaning that the drawer will respond (open/close) to touch gestures.
-- locked-closed, meaning that the drawer will stay closed and not respond to gestures.
-- locked-open, meaning that the drawer will stay opened and not respond to gestures. The drawer may still be opened and closed programmatically (`openDrawer`/`closeDrawer`).
-
-| Type                                             | Required |
-| ------------------------------------------------ | -------- |
-| enum('unlocked', 'locked-closed', 'locked-open') | No       |
-
----
-
-### `drawerPosition`
-
-Specifies the side of the screen from which the drawer will slide in. By default it is set to `left`.
-
-| Type                  | Required |
-| --------------------- | -------- |
-| enum('left', 'right') | No       |
-
----
-
-### `drawerWidth`
-
-Specifies the width of the drawer, more precisely the width of the view that be pulled in from the edge of the window.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `keyboardDismissMode`
-
-Determines whether the keyboard gets dismissed in response to a drag.
-
-- 'none' (the default), drags do not dismiss the keyboard.
-- 'on-drag', the keyboard is dismissed when a drag begins.
-
-| Type                    | Required |
-| ----------------------- | -------- |
-| enum('none', 'on-drag') | No       |
-
----
-
-### `onDrawerClose`
-
-Function called whenever the navigation view has been closed.
-
-| Type     | Required |
-| -------- | -------- |
-| function | No       |
-
----
-
-### `onDrawerOpen`
-
-Function called whenever the navigation view has been opened.
-
-| Type     | Required |
-| -------- | -------- |
-| function | No       |
-
----
-
-### `onDrawerSlide`
-
-Function called whenever there is an interaction with the navigation view.
-
-| Type     | Required |
-| -------- | -------- |
-| function | No       |
-
----
-
-### `onDrawerStateChanged`
-
-Function called when the drawer state has changed. The drawer can be in 3 states:
-
-- idle, meaning there is no interaction with the navigation view happening at the time
-- dragging, meaning there is currently an interaction with the navigation view
-- settling, meaning that there was an interaction with the navigation view, and the navigation view is now finishing its closing or opening animation
-
-| Type     | Required |
-| -------- | -------- |
-| function | No       |
-
----
-
-### `renderNavigationView`
-
-The navigation view that will be rendered to the side of the screen and can be pulled in.
-
-| Type     | Required |
-| -------- | -------- |
-| function | Yes      |
-
----
-
-### `statusBarBackgroundColor`
-
-Make the drawer take the entire screen and draw the background of the status bar to allow it to open over the status bar. It will only have an effect on API 21+.
-
-| Type               | Required |
-| ------------------ | -------- |
-| [color](colors.md) | No       |
-
-## Methods
-
-### `closeDrawer()`
-
-```tsx
-closeDrawer();
-```
-
-Closes the drawer.
-
----
-
-### `openDrawer()`
-
-```tsx
-openDrawer();
-```
-
-Opens the drawer.
+---
+id: drawerlayoutandroid
+title: DrawerLayoutAndroid
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+React component that wraps the platform `DrawerLayout` (Android only). The Drawer (typically used for navigation) is rendered with `renderNavigationView` and direct children are the main view (where your content goes). The navigation view is initially not visible on the screen, but can be pulled in from the side of the window specified by the `drawerPosition` prop and its width can be set by the `drawerWidth` prop.
+
+## Example
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android&ext=js
+import {useRef, useState} from 'react';
+import {Button, DrawerLayoutAndroid, Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const drawer = useRef(null);
+  const [drawerPosition, setDrawerPosition] = useState('left');
+  const changeDrawerPosition = () => {
+    if (drawerPosition === 'left') {
+      setDrawerPosition('right');
+    } else {
+      setDrawerPosition('left');
+    }
+  };
+
+  const navigationView = () => (
+    <SafeAreaView style={[styles.container, styles.navigationContainer]}>
+      <Text style={styles.paragraph}>I'm in the Drawer!</Text>
+      <Button
+        title="Close drawer"
+        onPress={() => drawer.current.closeDrawer()}
+      />
+    </SafeAreaView>
+  );
+
+  return (
+    <SafeAreaProvider>
+      <DrawerLayoutAndroid
+        ref={drawer}
+        drawerWidth={300}
+        drawerPosition={drawerPosition}
+        renderNavigationView={navigationView}>
+        <SafeAreaView style={styles.container}>
+          <Text style={styles.paragraph}>Drawer on the {drawerPosition}!</Text>
+          <Button
+            title="Change Drawer Position"
+            onPress={() => changeDrawerPosition()}
+          />
+          <Text style={styles.paragraph}>
+            Swipe from the side or press button below to see it!
+          </Text>
+          <Button
+            title="Open drawer"
+            onPress={() => drawer.current.openDrawer()}
+          />
+        </SafeAreaView>
+      </DrawerLayoutAndroid>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 16,
+  },
+  navigationContainer: {
+    backgroundColor: '#ecf0f1',
+  },
+  paragraph: {
+    padding: 16,
+    fontSize: 15,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android&ext=tsx
+import {useRef, useState} from 'react';
+import {
+  Button,
+  DrawerLayoutAndroid,
+  Text,
+  StyleSheet,
+  View,
+} from 'react-native';
+
+const App = () => {
+  const drawer = useRef<DrawerLayoutAndroid>(null);
+  const [drawerPosition, setDrawerPosition] = useState<'left' | 'right'>(
+    'left',
+  );
+  const changeDrawerPosition = () => {
+    if (drawerPosition === 'left') {
+      setDrawerPosition('right');
+    } else {
+      setDrawerPosition('left');
+    }
+  };
+
+  const navigationView = () => (
+    <View style={[styles.container, styles.navigationContainer]}>
+      <Text style={styles.paragraph}>I'm in the Drawer!</Text>
+      <Button
+        title="Close drawer"
+        onPress={() => drawer.current?.closeDrawer()}
+      />
+    </View>
+  );
+
+  return (
+    <DrawerLayoutAndroid
+      ref={drawer}
+      drawerWidth={300}
+      drawerPosition={drawerPosition}
+      renderNavigationView={navigationView}>
+      <View style={styles.container}>
+        <Text style={styles.paragraph}>Drawer on the {drawerPosition}!</Text>
+        <Button
+          title="Change Drawer Position"
+          onPress={() => changeDrawerPosition()}
+        />
+        <Text style={styles.paragraph}>
+          Swipe from the side or press button below to see it!
+        </Text>
+        <Button
+          title="Open drawer"
+          onPress={() => drawer.current?.openDrawer()}
+        />
+      </View>
+    </DrawerLayoutAndroid>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 16,
+  },
+  navigationContainer: {
+    backgroundColor: '#ecf0f1',
+  },
+  paragraph: {
+    padding: 16,
+    fontSize: 15,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+---
+
+# Reference
+
+## Props
+
+### [View Props](view.md#props)
+
+Inherits [View Props](view.md#props).
+
+---
+
+### `drawerBackgroundColor`
+
+Specifies the background color of the drawer. The default value is `white`. If you want to set the opacity of the drawer, use rgba. Example:
+
+```tsx
+return (
+  <DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)" />
+);
+```
+
+| Type               | Required |
+| ------------------ | -------- |
+| [color](colors.md) | No       |
+
+---
+
+### `drawerLockMode`
+
+Specifies the lock mode of the drawer. The drawer can be locked in 3 states:
+
+- unlocked (default), meaning that the drawer will respond (open/close) to touch gestures.
+- locked-closed, meaning that the drawer will stay closed and not respond to gestures.
+- locked-open, meaning that the drawer will stay opened and not respond to gestures. The drawer may still be opened and closed programmatically (`openDrawer`/`closeDrawer`).
+
+| Type                                             | Required |
+| ------------------------------------------------ | -------- |
+| enum('unlocked', 'locked-closed', 'locked-open') | No       |
+
+---
+
+### `drawerPosition`
+
+Specifies the side of the screen from which the drawer will slide in. By default it is set to `left`.
+
+| Type                  | Required |
+| --------------------- | -------- |
+| enum('left', 'right') | No       |
+
+---
+
+### `drawerWidth`
+
+Specifies the width of the drawer, more precisely the width of the view that be pulled in from the edge of the window.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `keyboardDismissMode`
+
+Determines whether the keyboard gets dismissed in response to a drag.
+
+- 'none' (the default), drags do not dismiss the keyboard.
+- 'on-drag', the keyboard is dismissed when a drag begins.
+
+| Type                    | Required |
+| ----------------------- | -------- |
+| enum('none', 'on-drag') | No       |
+
+---
+
+### `onDrawerClose`
+
+Function called whenever the navigation view has been closed.
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `onDrawerOpen`
+
+Function called whenever the navigation view has been opened.
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `onDrawerSlide`
+
+Function called whenever there is an interaction with the navigation view.
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `onDrawerStateChanged`
+
+Function called when the drawer state has changed. The drawer can be in 3 states:
+
+- idle, meaning there is no interaction with the navigation view happening at the time
+- dragging, meaning there is currently an interaction with the navigation view
+- settling, meaning that there was an interaction with the navigation view, and the navigation view is now finishing its closing or opening animation
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `renderNavigationView`
+
+The navigation view that will be rendered to the side of the screen and can be pulled in.
+
+| Type     | Required |
+| -------- | -------- |
+| function | Yes      |
+
+---
+
+### `statusBarBackgroundColor`
+
+Make the drawer take the entire screen and draw the background of the status bar to allow it to open over the status bar. It will only have an effect on API 21+.
+
+| Type               | Required |
+| ------------------ | -------- |
+| [color](colors.md) | No       |
+
+## Methods
+
+### `closeDrawer()`
+
+```tsx
+closeDrawer();
+```
+
+Closes the drawer.
+
+---
+
+### `openDrawer()`
+
+```tsx
+openDrawer();
+```
+
+Opens the drawer.
diff --git a/website/versioned_docs/version-0.81/easing.md b/website/versioned_docs/version-0.81/easing.md
index bb31dd0e4fa..097da0dfc8a 100644
--- a/website/versioned_docs/version-0.81/easing.md
+++ b/website/versioned_docs/version-0.81/easing.md
@@ -1,568 +1,568 @@
----
-id: easing
-title: Easing
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-The `Easing` module implements common easing functions. This module is used by [`Animated.timing()`](animated.md#timing) to convey physically believable motion in animations.
-
-You can find a visualization of some common easing functions at https://easings.net/
-
-### Predefined animations
-
-The `Easing` module provides several predefined animations through the following methods:
-
-- [`back`](easing.md#back) provides a basic animation where the object goes slightly back before moving forward
-- [`bounce`](easing.md#bounce) provides a bouncing animation
-- [`ease`](easing.md#ease) provides a basic inertial animation
-- [`elastic`](easing.md#elastic) provides a basic spring interaction
-
-### Standard functions
-
-Three standard easing functions are provided:
-
-- [`linear`](easing.md#linear)
-- [`quad`](easing.md#quad)
-- [`cubic`](easing.md#cubic)
-
-The [`poly`](easing.md#poly) function can be used to implement quartic, quintic, and other higher power functions.
-
-### Additional functions
-
-Additional mathematical functions are provided by the following methods:
-
-- [`bezier`](easing.md#bezier) provides a cubic bezier curve
-- [`circle`](easing.md#circle) provides a circular function
-- [`sin`](easing.md#sin) provides a sinusoidal function
-- [`exp`](easing.md#exp) provides an exponential function
-
-The following helpers are used to modify other easing functions.
-
-- [`in`](easing.md#in) runs an easing function forwards
-- [`inOut`](easing.md#inout) makes any easing function symmetrical
-- [`out`](easing.md#out) runs an easing function backwards
-
-## Example
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Easing%20Demo&ext=js
-import React, {useRef} from 'react';
-import {
-  Animated,
-  Easing,
-  SectionList,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const opacity = useRef(new Animated.Value(0)).current;
-
-  const animate = easing => {
-    opacity.setValue(0);
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration: 1200,
-      easing,
-      useNativeDriver: false,
-    }).start();
-  };
-
-  const size = opacity.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 80],
-  });
-
-  const animatedStyles = [
-    styles.box,
-    {
-      opacity,
-      width: size,
-      height: size,
-    },
-  ];
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container} edges={['right', 'top', 'left']}>
-        <StatusBar hidden={true} />
-        <Text style={styles.title}>
-          Press rows below to preview the Easing!
-        </Text>
-        <View style={styles.boxContainer}>
-          <Animated.View style={animatedStyles} />
-        </View>
-        <SectionList
-          style={styles.list}
-          sections={SECTIONS}
-          keyExtractor={item => item.title}
-          renderItem={({item}) => (
-            <TouchableOpacity
-              onPress={() => animate(item.easing)}
-              style={styles.listRow}>
-              <Text>{item.title}</Text>
-            </TouchableOpacity>
-          )}
-          renderSectionHeader={({section: {title}}) => (
-            <Text style={styles.listHeader}>{title}</Text>
-          )}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const SECTIONS = [
-  {
-    title: 'Predefined animations',
-    data: [
-      {title: 'Bounce', easing: Easing.bounce},
-      {title: 'Ease', easing: Easing.ease},
-      {title: 'Elastic', easing: Easing.elastic(4)},
-    ],
-  },
-  {
-    title: 'Standard functions',
-    data: [
-      {title: 'Linear', easing: Easing.linear},
-      {title: 'Quad', easing: Easing.quad},
-      {title: 'Cubic', easing: Easing.cubic},
-    ],
-  },
-  {
-    title: 'Additional functions',
-    data: [
-      {
-        title: 'Bezier',
-        easing: Easing.bezier(0, 2, 1, -1),
-      },
-      {title: 'Circle', easing: Easing.circle},
-      {title: 'Sin', easing: Easing.sin},
-      {title: 'Exp', easing: Easing.exp},
-    ],
-  },
-  {
-    title: 'Combinations',
-    data: [
-      {
-        title: 'In + Bounce',
-        easing: Easing.in(Easing.bounce),
-      },
-      {
-        title: 'Out + Exp',
-        easing: Easing.out(Easing.exp),
-      },
-      {
-        title: 'InOut + Elastic',
-        easing: Easing.inOut(Easing.elastic(1)),
-      },
-    ],
-  },
-];
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#20232a',
-  },
-  title: {
-    marginTop: 10,
-    textAlign: 'center',
-    color: '#61dafb',
-  },
-  boxContainer: {
-    height: 160,
-    alignItems: 'center',
-  },
-  box: {
-    marginTop: 32,
-    borderRadius: 4,
-    backgroundColor: '#61dafb',
-  },
-  list: {
-    backgroundColor: '#fff',
-  },
-  listHeader: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    backgroundColor: '#f4f4f4',
-    color: '#999',
-    fontSize: 12,
-    textTransform: 'uppercase',
-  },
-  listRow: {
-    padding: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Easing%20Demo&ext=tsx
-import React, {useRef} from 'react';
-import {
-  Animated,
-  Easing,
-  SectionList,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-  type EasingFunction,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const opacity = useRef(new Animated.Value(0)).current;
-
-  const animate = (easing: EasingFunction) => {
-    opacity.setValue(0);
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration: 1200,
-      easing,
-      useNativeDriver: false,
-    }).start();
-  };
-
-  const size = opacity.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 80],
-  });
-
-  const animatedStyles = [
-    styles.box,
-    {
-      opacity,
-      width: size,
-      height: size,
-    },
-  ];
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container} edges={['right', 'top', 'left']}>
-        <StatusBar hidden={true} />
-        <Text style={styles.title}>
-          Press rows below to preview the Easing!
-        </Text>
-        <View style={styles.boxContainer}>
-          <Animated.View style={animatedStyles} />
-        </View>
-        <SectionList
-          style={styles.list}
-          sections={SECTIONS}
-          keyExtractor={item => item.title}
-          renderItem={({item}) => (
-            <TouchableOpacity
-              onPress={() => animate(item.easing)}
-              style={styles.listRow}>
-              <Text>{item.title}</Text>
-            </TouchableOpacity>
-          )}
-          renderSectionHeader={({section: {title}}) => (
-            <Text style={styles.listHeader}>{title}</Text>
-          )}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const SECTIONS = [
-  {
-    title: 'Predefined animations',
-    data: [
-      {title: 'Bounce', easing: Easing.bounce},
-      {title: 'Ease', easing: Easing.ease},
-      {title: 'Elastic', easing: Easing.elastic(4)},
-    ],
-  },
-  {
-    title: 'Standard functions',
-    data: [
-      {title: 'Linear', easing: Easing.linear},
-      {title: 'Quad', easing: Easing.quad},
-      {title: 'Cubic', easing: Easing.cubic},
-    ],
-  },
-  {
-    title: 'Additional functions',
-    data: [
-      {
-        title: 'Bezier',
-        easing: Easing.bezier(0, 2, 1, -1),
-      },
-      {title: 'Circle', easing: Easing.circle},
-      {title: 'Sin', easing: Easing.sin},
-      {title: 'Exp', easing: Easing.exp},
-    ],
-  },
-  {
-    title: 'Combinations',
-    data: [
-      {
-        title: 'In + Bounce',
-        easing: Easing.in(Easing.bounce),
-      },
-      {
-        title: 'Out + Exp',
-        easing: Easing.out(Easing.exp),
-      },
-      {
-        title: 'InOut + Elastic',
-        easing: Easing.inOut(Easing.elastic(1)),
-      },
-    ],
-  },
-];
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#20232a',
-  },
-  title: {
-    marginTop: 10,
-    textAlign: 'center',
-    color: '#61dafb',
-  },
-  boxContainer: {
-    height: 160,
-    alignItems: 'center',
-  },
-  box: {
-    marginTop: 32,
-    borderRadius: 4,
-    backgroundColor: '#61dafb',
-  },
-  list: {
-    backgroundColor: '#fff',
-  },
-  listHeader: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    backgroundColor: '#f4f4f4',
-    color: '#999',
-    fontSize: 12,
-    textTransform: 'uppercase',
-  },
-  listRow: {
-    padding: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
----
-
-# Reference
-
-## Methods
-
-### `step0()`
-
-```tsx
-static step0(n: number);
-```
-
-A stepping function, returns 1 for any positive value of `n`.
-
----
-
-### `step1()`
-
-```tsx
-static step1(n: number);
-```
-
-A stepping function, returns 1 if `n` is greater than or equal to 1.
-
----
-
-### `linear()`
-
-```tsx
-static linear(t: number);
-```
-
-A linear function, `f(t) = t`. Position correlates to elapsed time one to one.
-
-https://cubic-bezier.com/#0,0,1,1
-
----
-
-### `ease()`
-
-```tsx
-static ease(t: number);
-```
-
-A basic inertial interaction, similar to an object slowly accelerating to speed.
-
-https://cubic-bezier.com/#.42,0,1,1
-
----
-
-### `quad()`
-
-```tsx
-static quad(t: number);
-```
-
-A quadratic function, `f(t) = t * t`. Position equals the square of elapsed time.
-
-https://easings.net/#easeInQuad
-
----
-
-### `cubic()`
-
-```tsx
-static cubic(t: number);
-```
-
-A cubic function, `f(t) = t * t * t`. Position equals the cube of elapsed time.
-
-https://easings.net/#easeInCubic
-
----
-
-### `poly()`
-
-```tsx
-static poly(n: number);
-```
-
-A power function. Position is equal to the Nth power of elapsed time.
-
-n = 4: https://easings.net/#easeInQuart n = 5: https://easings.net/#easeInQuint
-
----
-
-### `sin()`
-
-```tsx
-static sin(t: number);
-```
-
-A sinusoidal function.
-
-https://easings.net/#easeInSine
-
----
-
-### `circle()`
-
-```tsx
-static circle(t: number);
-```
-
-A circular function.
-
-https://easings.net/#easeInCirc
-
----
-
-### `exp()`
-
-```tsx
-static exp(t: number);
-```
-
-An exponential function.
-
-https://easings.net/#easeInExpo
-
----
-
-### `elastic()`
-
-```tsx
-static elastic(bounciness: number);
-```
-
-A basic elastic interaction, similar to a spring oscillating back and forth.
-
-Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.
-
-https://easings.net/#easeInElastic
-
----
-
-### `back()`
-
-```tsx
-static back(s)
-```
-
-Use with `Animated.parallel()` to create a basic effect where the object animates back slightly as the animation starts.
-
----
-
-### `bounce()`
-
-```tsx
-static bounce(t: number);
-```
-
-Provides a basic bouncing effect.
-
-https://easings.net/#easeInBounce
-
----
-
-### `bezier()`
-
-```tsx
-static bezier(x1: number, y1: number, x2: number, y2: number);
-```
-
-Provides a cubic bezier curve, equivalent to CSS Transitions' `transition-timing-function`.
-
-A useful tool to visualize cubic bezier curves can be found at https://cubic-bezier.com/
-
----
-
-### `in()`
-
-```tsx
-static in(easing: number);
-```
-
-Runs an easing function forwards.
-
----
-
-### `out()`
-
-```tsx
-static out(easing: number);
-```
-
-Runs an easing function backwards.
-
----
-
-### `inOut()`
-
-```tsx
-static inOut(easing: number);
-```
-
-Makes any easing function symmetrical. The easing function will run forwards for half of the duration, then backwards for the rest of the duration.
+---
+id: easing
+title: Easing
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+The `Easing` module implements common easing functions. This module is used by [`Animated.timing()`](animated.md#timing) to convey physically believable motion in animations.
+
+You can find a visualization of some common easing functions at https://easings.net/
+
+### Predefined animations
+
+The `Easing` module provides several predefined animations through the following methods:
+
+- [`back`](easing.md#back) provides a basic animation where the object goes slightly back before moving forward
+- [`bounce`](easing.md#bounce) provides a bouncing animation
+- [`ease`](easing.md#ease) provides a basic inertial animation
+- [`elastic`](easing.md#elastic) provides a basic spring interaction
+
+### Standard functions
+
+Three standard easing functions are provided:
+
+- [`linear`](easing.md#linear)
+- [`quad`](easing.md#quad)
+- [`cubic`](easing.md#cubic)
+
+The [`poly`](easing.md#poly) function can be used to implement quartic, quintic, and other higher power functions.
+
+### Additional functions
+
+Additional mathematical functions are provided by the following methods:
+
+- [`bezier`](easing.md#bezier) provides a cubic bezier curve
+- [`circle`](easing.md#circle) provides a circular function
+- [`sin`](easing.md#sin) provides a sinusoidal function
+- [`exp`](easing.md#exp) provides an exponential function
+
+The following helpers are used to modify other easing functions.
+
+- [`in`](easing.md#in) runs an easing function forwards
+- [`inOut`](easing.md#inout) makes any easing function symmetrical
+- [`out`](easing.md#out) runs an easing function backwards
+
+## Example
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Easing%20Demo&ext=js
+import {useRef} from 'react';
+import {
+  Animated,
+  Easing,
+  SectionList,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  const animate = easing => {
+    opacity.setValue(0);
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration: 1200,
+      easing,
+      useNativeDriver: false,
+    }).start();
+  };
+
+  const size = opacity.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 80],
+  });
+
+  const animatedStyles = [
+    styles.box,
+    {
+      opacity,
+      width: size,
+      height: size,
+    },
+  ];
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container} edges={['right', 'top', 'left']}>
+        <StatusBar hidden={true} />
+        <Text style={styles.title}>
+          Press rows below to preview the Easing!
+        </Text>
+        <View style={styles.boxContainer}>
+          <Animated.View style={animatedStyles} />
+        </View>
+        <SectionList
+          style={styles.list}
+          sections={SECTIONS}
+          keyExtractor={item => item.title}
+          renderItem={({item}) => (
+            <TouchableOpacity
+              onPress={() => animate(item.easing)}
+              style={styles.listRow}>
+              <Text>{item.title}</Text>
+            </TouchableOpacity>
+          )}
+          renderSectionHeader={({section: {title}}) => (
+            <Text style={styles.listHeader}>{title}</Text>
+          )}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const SECTIONS = [
+  {
+    title: 'Predefined animations',
+    data: [
+      {title: 'Bounce', easing: Easing.bounce},
+      {title: 'Ease', easing: Easing.ease},
+      {title: 'Elastic', easing: Easing.elastic(4)},
+    ],
+  },
+  {
+    title: 'Standard functions',
+    data: [
+      {title: 'Linear', easing: Easing.linear},
+      {title: 'Quad', easing: Easing.quad},
+      {title: 'Cubic', easing: Easing.cubic},
+    ],
+  },
+  {
+    title: 'Additional functions',
+    data: [
+      {
+        title: 'Bezier',
+        easing: Easing.bezier(0, 2, 1, -1),
+      },
+      {title: 'Circle', easing: Easing.circle},
+      {title: 'Sin', easing: Easing.sin},
+      {title: 'Exp', easing: Easing.exp},
+    ],
+  },
+  {
+    title: 'Combinations',
+    data: [
+      {
+        title: 'In + Bounce',
+        easing: Easing.in(Easing.bounce),
+      },
+      {
+        title: 'Out + Exp',
+        easing: Easing.out(Easing.exp),
+      },
+      {
+        title: 'InOut + Elastic',
+        easing: Easing.inOut(Easing.elastic(1)),
+      },
+    ],
+  },
+];
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#20232a',
+  },
+  title: {
+    marginTop: 10,
+    textAlign: 'center',
+    color: '#61dafb',
+  },
+  boxContainer: {
+    height: 160,
+    alignItems: 'center',
+  },
+  box: {
+    marginTop: 32,
+    borderRadius: 4,
+    backgroundColor: '#61dafb',
+  },
+  list: {
+    backgroundColor: '#fff',
+  },
+  listHeader: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    backgroundColor: '#f4f4f4',
+    color: '#999',
+    fontSize: 12,
+    textTransform: 'uppercase',
+  },
+  listRow: {
+    padding: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Easing%20Demo&ext=tsx
+import {useRef} from 'react';
+import {
+  Animated,
+  Easing,
+  SectionList,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  type EasingFunction,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  const animate = (easing: EasingFunction) => {
+    opacity.setValue(0);
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration: 1200,
+      easing,
+      useNativeDriver: false,
+    }).start();
+  };
+
+  const size = opacity.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 80],
+  });
+
+  const animatedStyles = [
+    styles.box,
+    {
+      opacity,
+      width: size,
+      height: size,
+    },
+  ];
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container} edges={['right', 'top', 'left']}>
+        <StatusBar hidden={true} />
+        <Text style={styles.title}>
+          Press rows below to preview the Easing!
+        </Text>
+        <View style={styles.boxContainer}>
+          <Animated.View style={animatedStyles} />
+        </View>
+        <SectionList
+          style={styles.list}
+          sections={SECTIONS}
+          keyExtractor={item => item.title}
+          renderItem={({item}) => (
+            <TouchableOpacity
+              onPress={() => animate(item.easing)}
+              style={styles.listRow}>
+              <Text>{item.title}</Text>
+            </TouchableOpacity>
+          )}
+          renderSectionHeader={({section: {title}}) => (
+            <Text style={styles.listHeader}>{title}</Text>
+          )}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const SECTIONS = [
+  {
+    title: 'Predefined animations',
+    data: [
+      {title: 'Bounce', easing: Easing.bounce},
+      {title: 'Ease', easing: Easing.ease},
+      {title: 'Elastic', easing: Easing.elastic(4)},
+    ],
+  },
+  {
+    title: 'Standard functions',
+    data: [
+      {title: 'Linear', easing: Easing.linear},
+      {title: 'Quad', easing: Easing.quad},
+      {title: 'Cubic', easing: Easing.cubic},
+    ],
+  },
+  {
+    title: 'Additional functions',
+    data: [
+      {
+        title: 'Bezier',
+        easing: Easing.bezier(0, 2, 1, -1),
+      },
+      {title: 'Circle', easing: Easing.circle},
+      {title: 'Sin', easing: Easing.sin},
+      {title: 'Exp', easing: Easing.exp},
+    ],
+  },
+  {
+    title: 'Combinations',
+    data: [
+      {
+        title: 'In + Bounce',
+        easing: Easing.in(Easing.bounce),
+      },
+      {
+        title: 'Out + Exp',
+        easing: Easing.out(Easing.exp),
+      },
+      {
+        title: 'InOut + Elastic',
+        easing: Easing.inOut(Easing.elastic(1)),
+      },
+    ],
+  },
+];
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#20232a',
+  },
+  title: {
+    marginTop: 10,
+    textAlign: 'center',
+    color: '#61dafb',
+  },
+  boxContainer: {
+    height: 160,
+    alignItems: 'center',
+  },
+  box: {
+    marginTop: 32,
+    borderRadius: 4,
+    backgroundColor: '#61dafb',
+  },
+  list: {
+    backgroundColor: '#fff',
+  },
+  listHeader: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    backgroundColor: '#f4f4f4',
+    color: '#999',
+    fontSize: 12,
+    textTransform: 'uppercase',
+  },
+  listRow: {
+    padding: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+---
+
+# Reference
+
+## Methods
+
+### `step0()`
+
+```tsx
+static step0(n: number);
+```
+
+A stepping function, returns 1 for any positive value of `n`.
+
+---
+
+### `step1()`
+
+```tsx
+static step1(n: number);
+```
+
+A stepping function, returns 1 if `n` is greater than or equal to 1.
+
+---
+
+### `linear()`
+
+```tsx
+static linear(t: number);
+```
+
+A linear function, `f(t) = t`. Position correlates to elapsed time one to one.
+
+https://cubic-bezier.com/#0,0,1,1
+
+---
+
+### `ease()`
+
+```tsx
+static ease(t: number);
+```
+
+A basic inertial interaction, similar to an object slowly accelerating to speed.
+
+https://cubic-bezier.com/#.42,0,1,1
+
+---
+
+### `quad()`
+
+```tsx
+static quad(t: number);
+```
+
+A quadratic function, `f(t) = t * t`. Position equals the square of elapsed time.
+
+https://easings.net/#easeInQuad
+
+---
+
+### `cubic()`
+
+```tsx
+static cubic(t: number);
+```
+
+A cubic function, `f(t) = t * t * t`. Position equals the cube of elapsed time.
+
+https://easings.net/#easeInCubic
+
+---
+
+### `poly()`
+
+```tsx
+static poly(n: number);
+```
+
+A power function. Position is equal to the Nth power of elapsed time.
+
+n = 4: https://easings.net/#easeInQuart n = 5: https://easings.net/#easeInQuint
+
+---
+
+### `sin()`
+
+```tsx
+static sin(t: number);
+```
+
+A sinusoidal function.
+
+https://easings.net/#easeInSine
+
+---
+
+### `circle()`
+
+```tsx
+static circle(t: number);
+```
+
+A circular function.
+
+https://easings.net/#easeInCirc
+
+---
+
+### `exp()`
+
+```tsx
+static exp(t: number);
+```
+
+An exponential function.
+
+https://easings.net/#easeInExpo
+
+---
+
+### `elastic()`
+
+```tsx
+static elastic(bounciness: number);
+```
+
+A basic elastic interaction, similar to a spring oscillating back and forth.
+
+Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.
+
+https://easings.net/#easeInElastic
+
+---
+
+### `back()`
+
+```tsx
+static back(s)
+```
+
+Use with `Animated.parallel()` to create a basic effect where the object animates back slightly as the animation starts.
+
+---
+
+### `bounce()`
+
+```tsx
+static bounce(t: number);
+```
+
+Provides a basic bouncing effect.
+
+https://easings.net/#easeInBounce
+
+---
+
+### `bezier()`
+
+```tsx
+static bezier(x1: number, y1: number, x2: number, y2: number);
+```
+
+Provides a cubic bezier curve, equivalent to CSS Transitions' `transition-timing-function`.
+
+A useful tool to visualize cubic bezier curves can be found at https://cubic-bezier.com/
+
+---
+
+### `in()`
+
+```tsx
+static in(easing: number);
+```
+
+Runs an easing function forwards.
+
+---
+
+### `out()`
+
+```tsx
+static out(easing: number);
+```
+
+Runs an easing function backwards.
+
+---
+
+### `inOut()`
+
+```tsx
+static inOut(easing: number);
+```
+
+Makes any easing function symmetrical. The easing function will run forwards for half of the duration, then backwards for the rest of the duration.
diff --git a/website/versioned_docs/version-0.81/fabric-native-components.md b/website/versioned_docs/version-0.81/fabric-native-components.md
index 2a509a7174e..6efdd572e92 100644
--- a/website/versioned_docs/version-0.81/fabric-native-components.md
+++ b/website/versioned_docs/version-0.81/fabric-native-components.md
@@ -172,7 +172,6 @@ This guide shows you how to create a Native Component that only works with the N
 Finally, you can use the new component in your app. Update your generated `App.tsx` to:
 
 ```javascript title="Demo/App.tsx"
-import React from 'react';
 import {Alert, StyleSheet, View} from 'react-native';
 import WebView from './specs/WebViewNativeComponent';
 
diff --git a/website/versioned_docs/version-0.81/flatlist.md b/website/versioned_docs/version-0.81/flatlist.md
index 6d4efbd72cc..17e73868f6b 100644
--- a/website/versioned_docs/version-0.81/flatlist.md
+++ b/website/versioned_docs/version-0.81/flatlist.md
@@ -1,857 +1,855 @@
----
-id: flatlist
-title: FlatList
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-A performant interface for rendering basic, flat lists, supporting the most handy features:
-
-- Fully cross-platform.
-- Optional horizontal mode.
-- Configurable viewability callbacks.
-- Header support.
-- Footer support.
-- Separator support.
-- Pull to Refresh.
-- Scroll loading.
-- ScrollToIndex support.
-- Multiple column support.
-
-If you need section support, use [`<SectionList>`](sectionlist.md).
-
-## Example
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Simple%20FlatList%20Example&ext=js
-import React from 'react';
-import {View, FlatList, StyleSheet, Text, StatusBar} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const DATA = [
-  {
-    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
-    title: 'First Item',
-  },
-  {
-    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
-    title: 'Second Item',
-  },
-  {
-    id: '58694a0f-3da1-471f-bd96-145571e29d72',
-    title: 'Third Item',
-  },
-];
-
-const Item = ({title}) => (
-  <View style={styles.item}>
-    <Text style={styles.title}>{title}</Text>
-  </View>
-);
-
-const App = () => (
-  <SafeAreaProvider>
-    <SafeAreaView style={styles.container}>
-      <FlatList
-        data={DATA}
-        renderItem={({item}) => <Item title={item.title} />}
-        keyExtractor={item => item.id}
-      />
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: StatusBar.currentHeight || 0,
-  },
-  item: {
-    backgroundColor: '#f9c2ff',
-    padding: 20,
-    marginVertical: 8,
-    marginHorizontal: 16,
-  },
-  title: {
-    fontSize: 32,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Simple%20FlatList%20Example&ext=tsx
-import React from 'react';
-import {View, FlatList, StyleSheet, Text, StatusBar} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const DATA = [
-  {
-    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
-    title: 'First Item',
-  },
-  {
-    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
-    title: 'Second Item',
-  },
-  {
-    id: '58694a0f-3da1-471f-bd96-145571e29d72',
-    title: 'Third Item',
-  },
-];
-
-type ItemProps = {title: string};
-
-const Item = ({title}: ItemProps) => (
-  <View style={styles.item}>
-    <Text style={styles.title}>{title}</Text>
-  </View>
-);
-
-const App = () => (
-  <SafeAreaProvider>
-    <SafeAreaView style={styles.container}>
-      <FlatList
-        data={DATA}
-        renderItem={({item}) => <Item title={item.title} />}
-        keyExtractor={item => item.id}
-      />
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: StatusBar.currentHeight || 0,
-  },
-  item: {
-    backgroundColor: '#f9c2ff',
-    padding: 20,
-    marginVertical: 8,
-    marginHorizontal: 16,
-  },
-  title: {
-    fontSize: 32,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-To render multiple columns, use the [`numColumns`](flatlist.md#numcolumns) prop. Using this approach instead of a `flexWrap` layout can prevent conflicts with the item height logic.
-
-More complex, selectable example below.
-
-- By passing `extraData={selectedId}` to `FlatList` we make sure `FlatList` itself will re-render when the state changes. Without setting this prop, `FlatList` would not know it needs to re-render any items because it is a `PureComponent` and the prop comparison will not show any changes.
-- `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=flatlist-selectable&ext=js
-import React, {useState} from 'react';
-import {
-  FlatList,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const DATA = [
-  {
-    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
-    title: 'First Item',
-  },
-  {
-    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
-    title: 'Second Item',
-  },
-  {
-    id: '58694a0f-3da1-471f-bd96-145571e29d72',
-    title: 'Third Item',
-  },
-];
-
-const Item = ({item, onPress, backgroundColor, textColor}) => (
-  <TouchableOpacity onPress={onPress} style={[styles.item, {backgroundColor}]}>
-    <Text style={[styles.title, {color: textColor}]}>{item.title}</Text>
-  </TouchableOpacity>
-);
-
-const App = () => {
-  const [selectedId, setSelectedId] = useState();
-
-  const renderItem = ({item}) => {
-    const backgroundColor = item.id === selectedId ? '#6e3b6e' : '#f9c2ff';
-    const color = item.id === selectedId ? 'white' : 'black';
-
-    return (
-      <Item
-        item={item}
-        onPress={() => setSelectedId(item.id)}
-        backgroundColor={backgroundColor}
-        textColor={color}
-      />
-    );
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <FlatList
-          data={DATA}
-          renderItem={renderItem}
-          keyExtractor={item => item.id}
-          extraData={selectedId}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: StatusBar.currentHeight || 0,
-  },
-  item: {
-    padding: 20,
-    marginVertical: 8,
-    marginHorizontal: 16,
-  },
-  title: {
-    fontSize: 32,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=flatlist-selectable&ext=tsx
-import React, {useState} from 'react';
-import {
-  FlatList,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-type ItemData = {
-  id: string;
-  title: string;
-};
-
-const DATA: ItemData[] = [
-  {
-    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
-    title: 'First Item',
-  },
-  {
-    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
-    title: 'Second Item',
-  },
-  {
-    id: '58694a0f-3da1-471f-bd96-145571e29d72',
-    title: 'Third Item',
-  },
-];
-
-type ItemProps = {
-  item: ItemData;
-  onPress: () => void;
-  backgroundColor: string;
-  textColor: string;
-};
-
-const Item = ({item, onPress, backgroundColor, textColor}: ItemProps) => (
-  <TouchableOpacity onPress={onPress} style={[styles.item, {backgroundColor}]}>
-    <Text style={[styles.title, {color: textColor}]}>{item.title}</Text>
-  </TouchableOpacity>
-);
-
-const App = () => {
-  const [selectedId, setSelectedId] = useState<string>();
-
-  const renderItem = ({item}: {item: ItemData}) => {
-    const backgroundColor = item.id === selectedId ? '#6e3b6e' : '#f9c2ff';
-    const color = item.id === selectedId ? 'white' : 'black';
-
-    return (
-      <Item
-        item={item}
-        onPress={() => setSelectedId(item.id)}
-        backgroundColor={backgroundColor}
-        textColor={color}
-      />
-    );
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <FlatList
-          data={DATA}
-          renderItem={renderItem}
-          keyExtractor={item => item.id}
-          extraData={selectedId}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: StatusBar.currentHeight || 0,
-  },
-  item: {
-    padding: 20,
-    marginVertical: 8,
-    marginHorizontal: 16,
-  },
-  title: {
-    fontSize: 32,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-This is a convenience wrapper around [`<VirtualizedList>`](virtualizedlist.md), and thus inherits its props (as well as those of [`<ScrollView>`](scrollview.md)) that aren't explicitly listed here, along with the following caveats:
-
-- Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.
-- This is a `PureComponent` which means that it will not re-render if `props` remain shallow-equal. Make sure that everything your `renderItem` function depends on is passed as a prop (e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on changes. This includes the `data` prop and parent component state.
-- In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes.
-- By default, the list looks for a `key` prop on each item and uses that for the React key. Alternatively, you can provide a custom `keyExtractor` prop.
-
----
-
-# Reference
-
-## Props
-
-### [VirtualizedList Props](virtualizedlist.md#props)
-
-Inherits [VirtualizedList Props](virtualizedlist.md#props).
-
----
-
-### <div className="label required basic">Required</div> **`renderItem`**
-
-```tsx
-renderItem({
-  item: ItemT,
-  index: number,
-  separators: {
-    highlight: () => void;
-    unhighlight: () => void;
-    updateProps: (select: 'leading' | 'trailing', newProps: any) => void;
-  }
-}): JSX.Element;
-```
-
-Takes an item from `data` and renders it into the list.
-
-Provides additional metadata like `index` if you need it, as well as a more generic `separators.updateProps` function which let you set whatever props you want to change the rendering of either the leading separator or trailing separator in case the more common `highlight` and `unhighlight` (which set the `highlighted: boolean` prop) are insufficient for your use case.
-
-| Type     |
-| -------- |
-| function |
-
-- `item` (Object): The item from `data` being rendered.
-- `index` (number): The index corresponding to this item in the `data` array.
-- `separators` (Object)
-  - `highlight` (Function)
-  - `unhighlight` (Function)
-  - `updateProps` (Function)
-    - `select` (enum('leading', 'trailing'))
-    - `newProps` (Object)
-
-Example usage:
-
-```tsx
-<FlatList
-  ItemSeparatorComponent={
-    Platform.OS !== 'android' &&
-    (({highlighted}) => (
-      <View
-        style={[style.separator, highlighted && {marginLeft: 0}]}
-      />
-    ))
-  }
-  data={[{title: 'Title Text', key: 'item1'}]}
-  renderItem={({item, index, separators}) => (
-    <TouchableHighlight
-      key={item.key}
-      onPress={() => this._onPress(item)}
-      onShowUnderlay={separators.highlight}
-      onHideUnderlay={separators.unhighlight}>
-      <View style={{backgroundColor: 'white'}}>
-        <Text>{item.title}</Text>
-      </View>
-    </TouchableHighlight>
-  )}
-/>
-```
-
----
-
-### <div className="label required basic">Required</div> **`data`**
-
-An array (or array-like list) of items to render. Other data types can be used by targeting [`VirtualizedList`](virtualizedlist.md) directly.
-
-| Type      |
-| --------- |
-| ArrayLike |
-
----
-
-### `ItemSeparatorComponent`
-
-Rendered in between each item, but not at the top or bottom. By default, `highlighted` and `leadingItem` props are provided. `renderItem` provides `separators.highlight`/`unhighlight` which will update the `highlighted` prop, but you can also add custom props with `separators.updateProps`. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
-
-| Type                         |
-| ---------------------------- |
-| component, function, element |
-
----
-
-### `ListEmptyComponent`
-
-Rendered when the list is empty. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
-
-| Type               |
-| ------------------ |
-| component, element |
-
----
-
-### `ListFooterComponent`
-
-Rendered at the bottom of all the items. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
-
-| Type               |
-| ------------------ |
-| component, element |
-
----
-
-### `ListFooterComponentStyle`
-
-Styling for internal View for `ListFooterComponent`.
-
-| Type                           |
-| ------------------------------ |
-| [View Style](view-style-props) |
-
----
-
-### `ListHeaderComponent`
-
-Rendered at the top of all the items. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
-
-| Type               |
-| ------------------ |
-| component, element |
-
----
-
-### `ListHeaderComponentStyle`
-
-Styling for internal View for `ListHeaderComponent`.
-
-| Type                           |
-| ------------------------------ |
-| [View Style](view-style-props) |
-
----
-
-### `columnWrapperStyle`
-
-Optional custom style for multi-item rows generated when `numColumns > 1`.
-
-| Type                           |
-| ------------------------------ |
-| [View Style](view-style-props) |
-
----
-
-### `extraData`
-
-A marker property for telling the list to re-render (since it implements `PureComponent`). If any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the `data` prop, stick it here and treat it immutably.
-
-| Type |
-| ---- |
-| any  |
-
----
-
-### `getItemLayout`
-
-```tsx
-(data, index) => {length: number, offset: number, index: number}
-```
-
-`getItemLayout` is an optional optimization that allows skipping the measurement of dynamic content if you know the size (height or width) of items ahead of time. `getItemLayout` is efficient if you have fixed size items, for example:
-
-```tsx
-  getItemLayout={(data, index) => (
-    {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
-  )}
-```
-
-Adding `getItemLayout` can be a great performance boost for lists of several hundred items. Remember to include separator length (height or width) in your offset calculation if you specify `ItemSeparatorComponent`.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `horizontal`
-
-If `true`, renders items next to each other horizontally instead of stacked vertically.
-
-| Type    |
-| ------- |
-| boolean |
-
----
-
-### `initialNumToRender`
-
-How many items to render in the initial batch. This should be enough to fill the screen but not much more. Note these items will never be unmounted as part of the windowed rendering in order to improve perceived performance of scroll-to-top actions.
-
-| Type   | Default |
-| ------ | ------- |
-| number | `10`    |
-
----
-
-### `initialScrollIndex`
-
-Instead of starting at the top with the first item, start at `initialScrollIndex`. This disables the "scroll to top" optimization that keeps the first `initialNumToRender` items always rendered and immediately renders the items starting at this initial index. Requires `getItemLayout` to be implemented.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `inverted`
-
-Reverses the direction of scroll. Uses scale transforms of `-1`.
-
-| Type    |
-| ------- |
-| boolean |
-
----
-
-### `keyExtractor`
-
-```tsx
-(item: ItemT, index: number) => string;
-```
-
-Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks `item.key`, then `item.id`, and then falls back to using the index, like React does.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `numColumns`
-
-Multiple columns can only be rendered with `horizontal={false}` and will zig-zag like a `flexWrap` layout. Items should all be the same height - masonry layouts are not supported.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `onRefresh`
-
-```tsx
-() => void;
-```
-
-If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the `refreshing` prop correctly.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onViewableItemsChanged`
-
-Called when the viewability of rows changes, as defined by the `viewabilityConfig` prop.
-
-| Type                                                                                                  |
-| ----------------------------------------------------------------------------------------------------- |
-| `md (callback: {changed: [ViewToken](viewtoken)[], viewableItems: [ViewToken](viewtoken)[]} => void;` |
-
----
-
-### `progressViewOffset`
-
-Set this when offset is needed for the loading indicator to show correctly.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `refreshing`
-
-Set this true while waiting for new data from a refresh.
-
-| Type    |
-| ------- |
-| boolean |
-
----
-
-### `removeClippedSubviews`
-
-:::warning
-Using this property may lead to bugs (missing content) in some circumstances - use at your own risk.
-:::
-
-When `true`, offscreen child views are removed from their native backing superview when offscreen. This may improve scroll performance for large lists. On Android the default value is `true`.
-
-| Type    |
-| ------- |
-| boolean |
-
----
-
-### `viewabilityConfig`
-
-See [`ViewabilityHelper.js`](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Lists/ViewabilityHelper.js) for flow type and further documentation.
-
-| Type              |
-| ----------------- |
-| ViewabilityConfig |
-
-`viewabilityConfig` takes a type `ViewabilityConfig` an object with following properties
-
-| Property                         | Type    |
-| -------------------------------- | ------- |
-| minimumViewTime                  | number  |
-| viewAreaCoveragePercentThreshold | number  |
-| itemVisiblePercentThreshold      | number  |
-| waitForInteraction               | boolean |
-
-At least one of the `viewAreaCoveragePercentThreshold` or `itemVisiblePercentThreshold` is required. This needs to be done in the `constructor` to avoid following error ([ref](https://github.com/facebook/react-native/issues/17408)):
-
-```
-  Error: Changing viewabilityConfig on the fly is not supported
-```
-
-```tsx
-constructor (props) {
-  super(props)
-
-  this.viewabilityConfig = {
-      waitForInteraction: true,
-      viewAreaCoveragePercentThreshold: 95
-  }
-}
-```
-
-```tsx
-<FlatList
-    viewabilityConfig={this.viewabilityConfig}
-  ...
-```
-
-#### minimumViewTime
-
-Minimum amount of time (in milliseconds) that an item must be physically viewable before the viewability callback will be fired. A high number means that scrolling through content without stopping will not mark the content as viewable.
-
-#### viewAreaCoveragePercentThreshold
-
-Percent of viewport that must be covered for a partially occluded item to count as "viewable", 0-100. Fully visible items are always considered viewable. A value of 0 means that a single pixel in the viewport makes the item viewable, and a value of 100 means that an item must be either entirely visible or cover the entire viewport to count as viewable.
-
-#### itemVisiblePercentThreshold
-
-Similar to `viewAreaCoveragePercentThreshold`, but considers the percent of the item that is visible, rather than the fraction of the viewable area it covers.
-
-#### waitForInteraction
-
-Nothing is considered viewable until the user scrolls or `recordInteraction` is called after render.
-
----
-
-### `viewabilityConfigCallbackPairs`
-
-List of `ViewabilityConfig`/`onViewableItemsChanged` pairs. A specific `onViewableItemsChanged` will be called when its corresponding `ViewabilityConfig`'s conditions are met. See `ViewabilityHelper.js` for flow type and further documentation.
-
-| Type                                   |
-| -------------------------------------- |
-| array of ViewabilityConfigCallbackPair |
-
-## Methods
-
-### `flashScrollIndicators()`
-
-```tsx
-flashScrollIndicators();
-```
-
-Displays the scroll indicators momentarily.
-
----
-
-### `getNativeScrollRef()`
-
-```tsx
-getNativeScrollRef(): React.ElementRef<typeof ScrollViewComponent>;
-```
-
-Provides a reference to the underlying scroll component
-
----
-
-### `getScrollResponder()`
-
-```tsx
-getScrollResponder(): ScrollResponderMixin;
-```
-
-Provides a handle to the underlying scroll responder.
-
----
-
-### `getScrollableNode()`
-
-```tsx
-getScrollableNode(): any;
-```
-
-Provides a handle to the underlying scroll node.
-
-### `scrollToEnd()`
-
-```tsx
-scrollToEnd(params?: {animated?: boolean});
-```
-
-Scrolls to the end of the content. May be janky without `getItemLayout` prop.
-
-**Parameters:**
-
-| Name   | Type   |
-| ------ | ------ |
-| params | object |
-
-Valid `params` keys are:
-
-- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
-
----
-
-### `scrollToIndex()`
-
-```tsx
-scrollToIndex: (params: {
-  index: number;
-  animated?: boolean;
-  viewOffset?: number;
-  viewPosition?: number;
-});
-```
-
-Scrolls to the item at the specified index such that it is positioned in the viewable area such that `viewPosition` 0 places it at the top, 1 at the bottom, and 0.5 centered in the middle.
-
-> Note: Cannot scroll to locations outside the render window without specifying the `getItemLayout` prop.
-
-**Parameters:**
-
-| Name                                                        | Type   |
-| ----------------------------------------------------------- | ------ |
-| params <div className="label basic required">Required</div> | object |
-
-Valid `params` keys are:
-
-- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
-- 'index' (number) - The index to scroll to. Required.
-- 'viewOffset' (number) - A fixed number of pixels to offset the final target position.
-- 'viewPosition' (number) - A value of `0` places the item specified by index at the top, `1` at the bottom, and `0.5` centered in the middle.
-
----
-
-### `scrollToItem()`
-
-```tsx
-scrollToItem(params: {
-  animated?: ?boolean,
-  item: Item,
-  viewPosition?: number,
-});
-```
-
-Requires linear scan through data - use `scrollToIndex` instead if possible.
-
-> Note: Cannot scroll to locations outside the render window without specifying the `getItemLayout` prop.
-
-**Parameters:**
-
-| Name                                                        | Type   |
-| ----------------------------------------------------------- | ------ |
-| params <div className="label basic required">Required</div> | object |
-
-Valid `params` keys are:
-
-- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
-- 'item' (object) - The item to scroll to. Required.
-- 'viewPosition' (number)
-
----
-
-### `scrollToOffset()`
-
-```tsx
-scrollToOffset(params: {
-  offset: number;
-  animated?: boolean;
-});
-```
-
-Scroll to a specific content pixel offset in the list.
-
-**Parameters:**
-
-| Name                                                        | Type   |
-| ----------------------------------------------------------- | ------ |
-| params <div className="label basic required">Required</div> | object |
-
-Valid `params` keys are:
-
-- 'offset' (number) - The offset to scroll to. In case of `horizontal` being true, the offset is the x-value, in any other case the offset is the y-value. Required.
-- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
+---
+id: flatlist
+title: FlatList
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+A performant interface for rendering basic, flat lists, supporting the most handy features:
+
+- Fully cross-platform.
+- Optional horizontal mode.
+- Configurable viewability callbacks.
+- Header support.
+- Footer support.
+- Separator support.
+- Pull to Refresh.
+- Scroll loading.
+- ScrollToIndex support.
+- Multiple column support.
+
+If you need section support, use [`<SectionList>`](sectionlist.md).
+
+## Example
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Simple%20FlatList%20Example&ext=js
+import {View, FlatList, StyleSheet, Text, StatusBar} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const DATA = [
+  {
+    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
+    title: 'First Item',
+  },
+  {
+    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
+    title: 'Second Item',
+  },
+  {
+    id: '58694a0f-3da1-471f-bd96-145571e29d72',
+    title: 'Third Item',
+  },
+];
+
+const Item = ({title}) => (
+  <View style={styles.item}>
+    <Text style={styles.title}>{title}</Text>
+  </View>
+);
+
+const App = () => (
+  <SafeAreaProvider>
+    <SafeAreaView style={styles.container}>
+      <FlatList
+        data={DATA}
+        renderItem={({item}) => <Item title={item.title} />}
+        keyExtractor={item => item.id}
+      />
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: StatusBar.currentHeight || 0,
+  },
+  item: {
+    backgroundColor: '#f9c2ff',
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Simple%20FlatList%20Example&ext=tsx
+import {View, FlatList, StyleSheet, Text, StatusBar} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const DATA = [
+  {
+    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
+    title: 'First Item',
+  },
+  {
+    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
+    title: 'Second Item',
+  },
+  {
+    id: '58694a0f-3da1-471f-bd96-145571e29d72',
+    title: 'Third Item',
+  },
+];
+
+type ItemProps = {title: string};
+
+const Item = ({title}: ItemProps) => (
+  <View style={styles.item}>
+    <Text style={styles.title}>{title}</Text>
+  </View>
+);
+
+const App = () => (
+  <SafeAreaProvider>
+    <SafeAreaView style={styles.container}>
+      <FlatList
+        data={DATA}
+        renderItem={({item}) => <Item title={item.title} />}
+        keyExtractor={item => item.id}
+      />
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: StatusBar.currentHeight || 0,
+  },
+  item: {
+    backgroundColor: '#f9c2ff',
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+To render multiple columns, use the [`numColumns`](flatlist.md#numcolumns) prop. Using this approach instead of a `flexWrap` layout can prevent conflicts with the item height logic.
+
+More complex, selectable example below.
+
+- By passing `extraData={selectedId}` to `FlatList` we make sure `FlatList` itself will re-render when the state changes. Without setting this prop, `FlatList` would not know it needs to re-render any items because it is a `PureComponent` and the prop comparison will not show any changes.
+- `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=flatlist-selectable&ext=js
+import {useState} from 'react';
+import {
+  FlatList,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const DATA = [
+  {
+    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
+    title: 'First Item',
+  },
+  {
+    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
+    title: 'Second Item',
+  },
+  {
+    id: '58694a0f-3da1-471f-bd96-145571e29d72',
+    title: 'Third Item',
+  },
+];
+
+const Item = ({item, onPress, backgroundColor, textColor}) => (
+  <TouchableOpacity onPress={onPress} style={[styles.item, {backgroundColor}]}>
+    <Text style={[styles.title, {color: textColor}]}>{item.title}</Text>
+  </TouchableOpacity>
+);
+
+const App = () => {
+  const [selectedId, setSelectedId] = useState();
+
+  const renderItem = ({item}) => {
+    const backgroundColor = item.id === selectedId ? '#6e3b6e' : '#f9c2ff';
+    const color = item.id === selectedId ? 'white' : 'black';
+
+    return (
+      <Item
+        item={item}
+        onPress={() => setSelectedId(item.id)}
+        backgroundColor={backgroundColor}
+        textColor={color}
+      />
+    );
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <FlatList
+          data={DATA}
+          renderItem={renderItem}
+          keyExtractor={item => item.id}
+          extraData={selectedId}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: StatusBar.currentHeight || 0,
+  },
+  item: {
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=flatlist-selectable&ext=tsx
+import {useState} from 'react';
+import {
+  FlatList,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+type ItemData = {
+  id: string;
+  title: string;
+};
+
+const DATA: ItemData[] = [
+  {
+    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
+    title: 'First Item',
+  },
+  {
+    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
+    title: 'Second Item',
+  },
+  {
+    id: '58694a0f-3da1-471f-bd96-145571e29d72',
+    title: 'Third Item',
+  },
+];
+
+type ItemProps = {
+  item: ItemData;
+  onPress: () => void;
+  backgroundColor: string;
+  textColor: string;
+};
+
+const Item = ({item, onPress, backgroundColor, textColor}: ItemProps) => (
+  <TouchableOpacity onPress={onPress} style={[styles.item, {backgroundColor}]}>
+    <Text style={[styles.title, {color: textColor}]}>{item.title}</Text>
+  </TouchableOpacity>
+);
+
+const App = () => {
+  const [selectedId, setSelectedId] = useState<string>();
+
+  const renderItem = ({item}: {item: ItemData}) => {
+    const backgroundColor = item.id === selectedId ? '#6e3b6e' : '#f9c2ff';
+    const color = item.id === selectedId ? 'white' : 'black';
+
+    return (
+      <Item
+        item={item}
+        onPress={() => setSelectedId(item.id)}
+        backgroundColor={backgroundColor}
+        textColor={color}
+      />
+    );
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <FlatList
+          data={DATA}
+          renderItem={renderItem}
+          keyExtractor={item => item.id}
+          extraData={selectedId}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: StatusBar.currentHeight || 0,
+  },
+  item: {
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+This is a convenience wrapper around [`<VirtualizedList>`](virtualizedlist.md), and thus inherits its props (as well as those of [`<ScrollView>`](scrollview.md)) that aren't explicitly listed here, along with the following caveats:
+
+- Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.
+- This is a `PureComponent` which means that it will not re-render if `props` remain shallow-equal. Make sure that everything your `renderItem` function depends on is passed as a prop (e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on changes. This includes the `data` prop and parent component state.
+- In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes.
+- By default, the list looks for a `key` prop on each item and uses that for the React key. Alternatively, you can provide a custom `keyExtractor` prop.
+
+---
+
+# Reference
+
+## Props
+
+### [VirtualizedList Props](virtualizedlist.md#props)
+
+Inherits [VirtualizedList Props](virtualizedlist.md#props).
+
+---
+
+### <div className="label required basic">Required</div> **`renderItem`**
+
+```tsx
+renderItem({
+  item: ItemT,
+  index: number,
+  separators: {
+    highlight: () => void;
+    unhighlight: () => void;
+    updateProps: (select: 'leading' | 'trailing', newProps: any) => void;
+  }
+}): JSX.Element;
+```
+
+Takes an item from `data` and renders it into the list.
+
+Provides additional metadata like `index` if you need it, as well as a more generic `separators.updateProps` function which let you set whatever props you want to change the rendering of either the leading separator or trailing separator in case the more common `highlight` and `unhighlight` (which set the `highlighted: boolean` prop) are insufficient for your use case.
+
+| Type     |
+| -------- |
+| function |
+
+- `item` (Object): The item from `data` being rendered.
+- `index` (number): The index corresponding to this item in the `data` array.
+- `separators` (Object)
+  - `highlight` (Function)
+  - `unhighlight` (Function)
+  - `updateProps` (Function)
+    - `select` (enum('leading', 'trailing'))
+    - `newProps` (Object)
+
+Example usage:
+
+```tsx
+<FlatList
+  ItemSeparatorComponent={
+    Platform.OS !== 'android' &&
+    (({highlighted}) => (
+      <View
+        style={[style.separator, highlighted && {marginLeft: 0}]}
+      />
+    ))
+  }
+  data={[{title: 'Title Text', key: 'item1'}]}
+  renderItem={({item, index, separators}) => (
+    <TouchableHighlight
+      key={item.key}
+      onPress={() => this._onPress(item)}
+      onShowUnderlay={separators.highlight}
+      onHideUnderlay={separators.unhighlight}>
+      <View style={{backgroundColor: 'white'}}>
+        <Text>{item.title}</Text>
+      </View>
+    </TouchableHighlight>
+  )}
+/>
+```
+
+---
+
+### <div className="label required basic">Required</div> **`data`**
+
+An array (or array-like list) of items to render. Other data types can be used by targeting [`VirtualizedList`](virtualizedlist.md) directly.
+
+| Type      |
+| --------- |
+| ArrayLike |
+
+---
+
+### `ItemSeparatorComponent`
+
+Rendered in between each item, but not at the top or bottom. By default, `highlighted` and `leadingItem` props are provided. `renderItem` provides `separators.highlight`/`unhighlight` which will update the `highlighted` prop, but you can also add custom props with `separators.updateProps`. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
+
+| Type                         |
+| ---------------------------- |
+| component, function, element |
+
+---
+
+### `ListEmptyComponent`
+
+Rendered when the list is empty. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
+
+| Type               |
+| ------------------ |
+| component, element |
+
+---
+
+### `ListFooterComponent`
+
+Rendered at the bottom of all the items. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
+
+| Type               |
+| ------------------ |
+| component, element |
+
+---
+
+### `ListFooterComponentStyle`
+
+Styling for internal View for `ListFooterComponent`.
+
+| Type                           |
+| ------------------------------ |
+| [View Style](view-style-props) |
+
+---
+
+### `ListHeaderComponent`
+
+Rendered at the top of all the items. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
+
+| Type               |
+| ------------------ |
+| component, element |
+
+---
+
+### `ListHeaderComponentStyle`
+
+Styling for internal View for `ListHeaderComponent`.
+
+| Type                           |
+| ------------------------------ |
+| [View Style](view-style-props) |
+
+---
+
+### `columnWrapperStyle`
+
+Optional custom style for multi-item rows generated when `numColumns > 1`.
+
+| Type                           |
+| ------------------------------ |
+| [View Style](view-style-props) |
+
+---
+
+### `extraData`
+
+A marker property for telling the list to re-render (since it implements `PureComponent`). If any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the `data` prop, stick it here and treat it immutably.
+
+| Type |
+| ---- |
+| any  |
+
+---
+
+### `getItemLayout`
+
+```tsx
+(data, index) => {length: number, offset: number, index: number}
+```
+
+`getItemLayout` is an optional optimization that allows skipping the measurement of dynamic content if you know the size (height or width) of items ahead of time. `getItemLayout` is efficient if you have fixed size items, for example:
+
+```tsx
+  getItemLayout={(data, index) => (
+    {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
+  )}
+```
+
+Adding `getItemLayout` can be a great performance boost for lists of several hundred items. Remember to include separator length (height or width) in your offset calculation if you specify `ItemSeparatorComponent`.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `horizontal`
+
+If `true`, renders items next to each other horizontally instead of stacked vertically.
+
+| Type    |
+| ------- |
+| boolean |
+
+---
+
+### `initialNumToRender`
+
+How many items to render in the initial batch. This should be enough to fill the screen but not much more. Note these items will never be unmounted as part of the windowed rendering in order to improve perceived performance of scroll-to-top actions.
+
+| Type   | Default |
+| ------ | ------- |
+| number | `10`    |
+
+---
+
+### `initialScrollIndex`
+
+Instead of starting at the top with the first item, start at `initialScrollIndex`. This disables the "scroll to top" optimization that keeps the first `initialNumToRender` items always rendered and immediately renders the items starting at this initial index. Requires `getItemLayout` to be implemented.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `inverted`
+
+Reverses the direction of scroll. Uses scale transforms of `-1`.
+
+| Type    |
+| ------- |
+| boolean |
+
+---
+
+### `keyExtractor`
+
+```tsx
+(item: ItemT, index: number) => string;
+```
+
+Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks `item.key`, then `item.id`, and then falls back to using the index, like React does.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `numColumns`
+
+Multiple columns can only be rendered with `horizontal={false}` and will zig-zag like a `flexWrap` layout. Items should all be the same height - masonry layouts are not supported.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `onRefresh`
+
+```tsx
+() => void;
+```
+
+If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the `refreshing` prop correctly.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onViewableItemsChanged`
+
+Called when the viewability of rows changes, as defined by the `viewabilityConfig` prop.
+
+| Type                                                                                                  |
+| ----------------------------------------------------------------------------------------------------- |
+| `md (callback: {changed: [ViewToken](viewtoken)[], viewableItems: [ViewToken](viewtoken)[]} => void;` |
+
+---
+
+### `progressViewOffset`
+
+Set this when offset is needed for the loading indicator to show correctly.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `refreshing`
+
+Set this true while waiting for new data from a refresh.
+
+| Type    |
+| ------- |
+| boolean |
+
+---
+
+### `removeClippedSubviews`
+
+:::warning
+Using this property may lead to bugs (missing content) in some circumstances - use at your own risk.
+:::
+
+When `true`, offscreen child views are removed from their native backing superview when offscreen. This may improve scroll performance for large lists. On Android the default value is `true`.
+
+| Type    |
+| ------- |
+| boolean |
+
+---
+
+### `viewabilityConfig`
+
+See [`ViewabilityHelper.js`](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Lists/ViewabilityHelper.js) for flow type and further documentation.
+
+| Type              |
+| ----------------- |
+| ViewabilityConfig |
+
+`viewabilityConfig` takes a type `ViewabilityConfig` an object with following properties
+
+| Property                         | Type    |
+| -------------------------------- | ------- |
+| minimumViewTime                  | number  |
+| viewAreaCoveragePercentThreshold | number  |
+| itemVisiblePercentThreshold      | number  |
+| waitForInteraction               | boolean |
+
+At least one of the `viewAreaCoveragePercentThreshold` or `itemVisiblePercentThreshold` is required. This needs to be done in the `constructor` to avoid following error ([ref](https://github.com/facebook/react-native/issues/17408)):
+
+```
+  Error: Changing viewabilityConfig on the fly is not supported
+```
+
+```tsx
+constructor (props) {
+  super(props)
+
+  this.viewabilityConfig = {
+      waitForInteraction: true,
+      viewAreaCoveragePercentThreshold: 95
+  }
+}
+```
+
+```tsx
+<FlatList
+    viewabilityConfig={this.viewabilityConfig}
+  ...
+```
+
+#### minimumViewTime
+
+Minimum amount of time (in milliseconds) that an item must be physically viewable before the viewability callback will be fired. A high number means that scrolling through content without stopping will not mark the content as viewable.
+
+#### viewAreaCoveragePercentThreshold
+
+Percent of viewport that must be covered for a partially occluded item to count as "viewable", 0-100. Fully visible items are always considered viewable. A value of 0 means that a single pixel in the viewport makes the item viewable, and a value of 100 means that an item must be either entirely visible or cover the entire viewport to count as viewable.
+
+#### itemVisiblePercentThreshold
+
+Similar to `viewAreaCoveragePercentThreshold`, but considers the percent of the item that is visible, rather than the fraction of the viewable area it covers.
+
+#### waitForInteraction
+
+Nothing is considered viewable until the user scrolls or `recordInteraction` is called after render.
+
+---
+
+### `viewabilityConfigCallbackPairs`
+
+List of `ViewabilityConfig`/`onViewableItemsChanged` pairs. A specific `onViewableItemsChanged` will be called when its corresponding `ViewabilityConfig`'s conditions are met. See `ViewabilityHelper.js` for flow type and further documentation.
+
+| Type                                   |
+| -------------------------------------- |
+| array of ViewabilityConfigCallbackPair |
+
+## Methods
+
+### `flashScrollIndicators()`
+
+```tsx
+flashScrollIndicators();
+```
+
+Displays the scroll indicators momentarily.
+
+---
+
+### `getNativeScrollRef()`
+
+```tsx
+getNativeScrollRef(): React.ElementRef<typeof ScrollViewComponent>;
+```
+
+Provides a reference to the underlying scroll component
+
+---
+
+### `getScrollResponder()`
+
+```tsx
+getScrollResponder(): ScrollResponderMixin;
+```
+
+Provides a handle to the underlying scroll responder.
+
+---
+
+### `getScrollableNode()`
+
+```tsx
+getScrollableNode(): any;
+```
+
+Provides a handle to the underlying scroll node.
+
+### `scrollToEnd()`
+
+```tsx
+scrollToEnd(params?: {animated?: boolean});
+```
+
+Scrolls to the end of the content. May be janky without `getItemLayout` prop.
+
+**Parameters:**
+
+| Name   | Type   |
+| ------ | ------ |
+| params | object |
+
+Valid `params` keys are:
+
+- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
+
+---
+
+### `scrollToIndex()`
+
+```tsx
+scrollToIndex: (params: {
+  index: number;
+  animated?: boolean;
+  viewOffset?: number;
+  viewPosition?: number;
+});
+```
+
+Scrolls to the item at the specified index such that it is positioned in the viewable area such that `viewPosition` 0 places it at the top, 1 at the bottom, and 0.5 centered in the middle.
+
+> Note: Cannot scroll to locations outside the render window without specifying the `getItemLayout` prop.
+
+**Parameters:**
+
+| Name                                                        | Type   |
+| ----------------------------------------------------------- | ------ |
+| params <div className="label basic required">Required</div> | object |
+
+Valid `params` keys are:
+
+- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
+- 'index' (number) - The index to scroll to. Required.
+- 'viewOffset' (number) - A fixed number of pixels to offset the final target position.
+- 'viewPosition' (number) - A value of `0` places the item specified by index at the top, `1` at the bottom, and `0.5` centered in the middle.
+
+---
+
+### `scrollToItem()`
+
+```tsx
+scrollToItem(params: {
+  animated?: ?boolean,
+  item: Item,
+  viewPosition?: number,
+});
+```
+
+Requires linear scan through data - use `scrollToIndex` instead if possible.
+
+> Note: Cannot scroll to locations outside the render window without specifying the `getItemLayout` prop.
+
+**Parameters:**
+
+| Name                                                        | Type   |
+| ----------------------------------------------------------- | ------ |
+| params <div className="label basic required">Required</div> | object |
+
+Valid `params` keys are:
+
+- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
+- 'item' (object) - The item to scroll to. Required.
+- 'viewPosition' (number)
+
+---
+
+### `scrollToOffset()`
+
+```tsx
+scrollToOffset(params: {
+  offset: number;
+  animated?: boolean;
+});
+```
+
+Scroll to a specific content pixel offset in the list.
+
+**Parameters:**
+
+| Name                                                        | Type   |
+| ----------------------------------------------------------- | ------ |
+| params <div className="label basic required">Required</div> | object |
+
+Valid `params` keys are:
+
+- 'offset' (number) - The offset to scroll to. In case of `horizontal` being true, the offset is the x-value, in any other case the offset is the y-value. Required.
+- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
diff --git a/website/versioned_docs/version-0.81/flexbox.md b/website/versioned_docs/version-0.81/flexbox.md
index 039a7bdf60b..b745c9684ef 100644
--- a/website/versioned_docs/version-0.81/flexbox.md
+++ b/website/versioned_docs/version-0.81/flexbox.md
@@ -1,2884 +1,2883 @@
----
-id: flexbox
-title: Layout with Flexbox
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-A component can specify the layout of its children using the Flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes.
-
-You will normally use a combination of `flexDirection`, `alignItems`, and `justifyContent` to achieve the right layout.
-
-:::caution
-Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions.
-The defaults are different, with `flexDirection` defaulting to `column` instead of `row`, `alignContent` defaulting to `flex-start` instead of `stretch`, `flexShrink` defaulting to `0` instead of `1`, the `flex` parameter only supporting a single number.
-:::
-
-## Flex
-
-[`flex`](layout-props#flex) will define how your items are going to **“fill”** over the available space along your main axis. Space will be divided according to each element's flex property.
-
-In the following example, the red, orange, and green views are all children in the container view that has `flex: 1` set. The red view uses `flex: 1` , the orange view uses `flex: 2`, and the green view uses `flex: 3` . **1+2+3 = 6**, which means that the red view will get `1/6` of the space, the orange `2/6` of the space, and the green `3/6` of the space.
-
-```SnackPlayer name=Flex%20Example
-import React from 'react';
-import {StyleSheet, View} from 'react-native';
-
-const Flex = () => {
-  return (
-    <View
-      style={[
-        styles.container,
-        {
-          // Try setting `flexDirection` to `"row"`.
-          flexDirection: 'column',
-        },
-      ]}>
-      <View style={{flex: 1, backgroundColor: 'red'}} />
-      <View style={{flex: 2, backgroundColor: 'darkorange'}} />
-      <View style={{flex: 3, backgroundColor: 'green'}} />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 20,
-  },
-});
-
-export default Flex;
-```
-
-## Flex Direction
-
-[`flexDirection`](layout-props#flexdirection) controls the direction in which the children of a node are laid out. This is also referred to as the main axis. The cross axis is the axis perpendicular to the main axis, or the axis which the wrapping lines are laid out in.
-
-- `column` (**default value**) Align children from top to bottom. If wrapping is enabled, then the next line will start to the right of the first item on the top of the container.
-
-- `row` Align children from left to right. If wrapping is enabled, then the next line will start under the first item on the left of the container.
-
-- `column-reverse` Align children from bottom to top. If wrapping is enabled, then the next line will start to the right of the first item on the bottom of the container.
-
-- `row-reverse` Align children from right to left. If wrapping is enabled, then the next line will start under the first item on the right of the container.
-
-You can learn more [here](https://www.yogalayout.dev/docs/styling/flex-direction).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Flex%20Direction&ext=js
-import React, {useState} from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
-
-const FlexDirectionBasics = () => {
-  const [flexDirection, setflexDirection] = useState('column');
-
-  return (
-    <PreviewLayout
-      label="flexDirection"
-      values={['column', 'row', 'column-reverse', 'row-reverse']}
-      selectedValue={flexDirection}
-      setSelectedValue={setflexDirection}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default FlexDirectionBasics;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Flex%20Direction&ext=tsx
-import React, {useState} from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const FlexDirectionBasics = () => {
-  const [flexDirection, setflexDirection] = useState('column');
-
-  return (
-    <PreviewLayout
-      label="flexDirection"
-      values={['column', 'row', 'column-reverse', 'row-reverse']}
-      selectedValue={flexDirection}
-      setSelectedValue={setflexDirection}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default FlexDirectionBasics;
-```
-
-</TabItem>
-</Tabs>
-
-## Layout Direction
-
-Layout [`direction`](layout-props#direction) specifies the direction in which children and text in a hierarchy should be laid out. Layout direction also affects what edge `start` and `end` refer to. By default, React Native lays out with LTR layout direction. In this mode `start` refers to left and `end` refers to right.
-
-- `LTR` (**default value**) Text and children are laid out from left to right. Margin and padding applied to the start of an element are applied on the left side.
-
-- `RTL` Text and children are laid out from right to left. Margin and padding applied to the start of an element are applied on the right side.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Flex%20Direction&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const DirectionLayout = () => {
-  const [direction, setDirection] = useState('ltr');
-
-  return (
-    <PreviewLayout
-      label="direction"
-      selectedValue={direction}
-      values={['ltr', 'rtl']}
-      setSelectedValue={setDirection}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default DirectionLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Flex%20Direction&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const DirectionLayout = () => {
-  const [direction, setDirection] = useState('ltr');
-
-  return (
-    <PreviewLayout
-      label="direction"
-      selectedValue={direction}
-      values={['ltr', 'rtl']}
-      setSelectedValue={setDirection}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default DirectionLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## Justify Content
-
-[`justifyContent`](layout-props#justifycontent) describes how to align children within the main axis of their container. For example, you can use this property to center a child horizontally within a container with `flexDirection` set to `row` or vertically within a container with `flexDirection` set to `column`.
-
-- `flex-start`(**default value**) Align children of a container to the start of the container's main axis.
-
-- `flex-end` Align children of a container to the end of the container's main axis.
-
-- `center` Align children of a container in the center of the container's main axis.
-
-- `space-between` Evenly space off children across the container's main axis, distributing the remaining space between the children.
-
-- `space-around` Evenly space off children across the container's main axis, distributing the remaining space around the children. Compared to `space-between`, using `space-around` will result in space being distributed to the beginning of the first child and end of the last child.
-
-- `space-evenly` Evenly distribute children within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.
-
-You can learn more [here](https://www.yogalayout.dev/docs/styling/justify-content).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Justify%20Content&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const JustifyContentBasics = () => {
-  const [justifyContent, setJustifyContent] = useState('flex-start');
-
-  return (
-    <PreviewLayout
-      label="justifyContent"
-      selectedValue={justifyContent}
-      values={[
-        'flex-start',
-        'flex-end',
-        'center',
-        'space-between',
-        'space-around',
-        'space-evenly',
-      ]}
-      setSelectedValue={setJustifyContent}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default JustifyContentBasics;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Justify%20Content&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const JustifyContentBasics = () => {
-  const [justifyContent, setJustifyContent] = useState('flex-start');
-
-  return (
-    <PreviewLayout
-      label="justifyContent"
-      selectedValue={justifyContent}
-      values={[
-        'flex-start',
-        'flex-end',
-        'center',
-        'space-between',
-        'space-around',
-        'space-evenly',
-      ]}
-      setSelectedValue={setJustifyContent}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default JustifyContentBasics;
-```
-
-</TabItem>
-</Tabs>
-
-## Align Items
-
-[`alignItems`](layout-props#alignitems) describes how to align children along the cross axis of their container. It is very similar to `justifyContent` but instead of applying to the main axis, `alignItems` applies to the cross axis.
-
-- `stretch` (**default value**) Stretch children of a container to match the `height` of the container's cross axis.
-
-- `flex-start` Align children of a container to the start of the container's cross axis.
-
-- `flex-end` Align children of a container to the end of the container's cross axis.
-
-- `center` Align children of a container in the center of the container's cross axis.
-
-- `baseline` Align children of a container along a common baseline. Individual children can be set to be the reference baseline for their parents.
-
-:::info
-For `stretch` to have an effect, children must not have a fixed dimension along the secondary axis. In the following example, setting `alignItems: stretch` does nothing until the `width: 50` is removed from the children.
-:::
-
-You can learn more [here](https://www.yogalayout.dev/docs/styling/align-items-self).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Align%20Items&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const AlignItemsLayout = () => {
-  const [alignItems, setAlignItems] = useState('stretch');
-
-  return (
-    <PreviewLayout
-      label="alignItems"
-      selectedValue={alignItems}
-      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
-      setSelectedValue={setAlignItems}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View
-        style={[
-          styles.box,
-          {
-            backgroundColor: 'steelblue',
-            width: 'auto',
-            minWidth: 50,
-          },
-        ]}
-      />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignItemsLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Align%20Items&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const AlignItemsLayout = () => {
-  const [alignItems, setAlignItems] = useState('stretch');
-
-  return (
-    <PreviewLayout
-      label="alignItems"
-      selectedValue={alignItems}
-      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
-      setSelectedValue={setAlignItems}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View
-        style={[
-          styles.box,
-          {
-            backgroundColor: 'steelblue',
-            width: 'auto',
-            minWidth: 50,
-          },
-        ]}
-      />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignItemsLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## Align Self
-
-[`alignSelf`](layout-props#alignself) has the same options and effect as `alignItems` but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent. `alignSelf` overrides any option set by the parent with `alignItems`.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Align%20Self&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const AlignSelfLayout = () => {
-  const [alignSelf, setAlignSelf] = useState('stretch');
-
-  return (
-    <PreviewLayout
-      label="alignSelf"
-      selectedValue={alignSelf}
-      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
-      setSelectedValue={setAlignSelf}>
-      <View
-        style={[
-          styles.box,
-          {
-            alignSelf,
-            width: 'auto',
-            minWidth: 50,
-            backgroundColor: 'powderblue',
-          },
-        ]}
-      />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={styles.container}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignSelfLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Align%20Self&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-import type {FlexAlignType} from 'react-native';
-
-const AlignSelfLayout = () => {
-  const [alignSelf, setAlignSelf] = useState<FlexAlignType>('stretch');
-
-  return (
-    <PreviewLayout
-      label="alignSelf"
-      selectedValue={alignSelf}
-      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
-      setSelectedValue={setAlignSelf}>
-      <View
-        style={[
-          styles.box,
-          {
-            alignSelf,
-            width: 'auto',
-            minWidth: 50,
-            backgroundColor: 'powderblue',
-          },
-        ]}
-      />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: FlexAlignType[];
-  selectedValue: string;
-  setSelectedValue: (value: FlexAlignType) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={styles.container}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignSelfLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## Align Content
-
-[alignContent](layout-props#aligncontent) defines the distribution of lines along the cross-axis. This only has effect when items are wrapped to multiple lines using `flexWrap`.
-
-- `flex-start` (**default value**) Align wrapped lines to the start of the container's cross axis.
-
-- `flex-end` Align wrapped lines to the end of the container's cross axis.
-
-- `stretch` (_default value when using Yoga on the web_) Stretch wrapped lines to match the height of the container's cross axis.
-
-- `center` Align wrapped lines in the center of the container's cross axis.
-
-- `space-between` Evenly space wrapped lines across the container's cross axis, distributing the remaining space between the lines.
-
-- `space-around` Evenly space wrapped lines across the container's cross axis, distributing the remaining space around the lines. Each end of the container has a half-sized space compared to the space between items.
-
-- `space-evenly` Evenly space wrapped lines across the container's cross axis, distributing the remaining space around the lines. Each space is the same size.
-
-You can learn more [here](https://www.yogalayout.dev/docs/styling/align-content).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Align%20Content&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const AlignContentLayout = () => {
-  const [alignContent, setAlignContent] = useState('flex-start');
-
-  return (
-    <PreviewLayout
-      label="alignContent"
-      selectedValue={alignContent}
-      values={[
-        'flex-start',
-        'flex-end',
-        'stretch',
-        'center',
-        'space-between',
-        'space-around',
-      ]}
-      setSelectedValue={setAlignContent}>
-      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
-      <View style={[styles.box, {backgroundColor: 'orange'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
-      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'purple'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexWrap: 'wrap',
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignContentLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Align%20Content&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const AlignContentLayout = () => {
-  const [alignContent, setAlignContent] = useState('flex-start');
-
-  return (
-    <PreviewLayout
-      label="alignContent"
-      selectedValue={alignContent}
-      values={[
-        'flex-start',
-        'flex-end',
-        'stretch',
-        'center',
-        'space-between',
-        'space-around',
-      ]}
-      setSelectedValue={setAlignContent}>
-      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
-      <View style={[styles.box, {backgroundColor: 'orange'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
-      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'purple'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexWrap: 'wrap',
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignContentLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## Flex Wrap
-
-The [`flexWrap`](layout-props#flexwrap) property is set on containers and it controls what happens when children overflow the size of the container along the main axis. By default, children are forced into a single line (which can shrink elements). If wrapping is allowed, items are wrapped into multiple lines along the main axis if needed.
-
-When wrapping lines, `alignContent` can be used to specify how the lines are placed in the container. Learn more [here](https://www.yogalayout.dev/docs/styling/flex-wrap).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Flex%20Wrap&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const FlexWrapLayout = () => {
-  const [flexWrap, setFlexWrap] = useState('wrap');
-
-  return (
-    <PreviewLayout
-      label="flexWrap"
-      selectedValue={flexWrap}
-      values={['wrap', 'nowrap']}
-      setSelectedValue={setFlexWrap}>
-      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
-      <View style={[styles.box, {backgroundColor: 'orange'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
-      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'purple'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default FlexWrapLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Flex%20Wrap&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const FlexWrapLayout = () => {
-  const [flexWrap, setFlexWrap] = useState('wrap');
-
-  return (
-    <PreviewLayout
-      label="flexWrap"
-      selectedValue={flexWrap}
-      values={['wrap', 'nowrap']}
-      setSelectedValue={setFlexWrap}>
-      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
-      <View style={[styles.box, {backgroundColor: 'orange'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
-      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'purple'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default FlexWrapLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## Flex Basis, Grow, and Shrink
-
-- [`flexBasis`](layout-props#flexbasis) is an axis-independent way of providing the default size of an item along the main axis. Setting the `flexBasis` of a child is similar to setting the `width` of that child if its parent is a container with `flexDirection: row` or setting the `height` of a child if its parent is a container with `flexDirection: column`. The `flexBasis` of an item is the default size of that item, the size of the item before any `flexGrow` and `flexShrink` calculations are performed.
-
-- [`flexGrow`](layout-props#flexgrow) describes how much space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
-
-  `flexGrow` accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the children’s `flexGrow` values.
-
-- [`flexShrink`](layout-props#flexshrink) describes how to shrink children along the main axis in the case in which the total size of the children overflows the size of the container on the main axis. `flexShrink` is very similar to `flexGrow` and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed.
-
-  `flexShrink` accepts any floating point value >= 0, with 0 being the default value (on the web, the default is 1). A container will shrink its children weighted by the children’s `flexShrink` values.
-
-You can learn more [here](https://www.yogalayout.dev/docs/styling/flex-basis-grow-shrink).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink&ext=js
-import React, {useState} from 'react';
-import {View, Text, TextInput, StyleSheet} from 'react-native';
-
-const App = () => {
-  const [powderblue, setPowderblue] = useState({
-    flexGrow: 0,
-    flexShrink: 1,
-    flexBasis: 'auto',
-  });
-  const [skyblue, setSkyblue] = useState({
-    flexGrow: 1,
-    flexShrink: 0,
-    flexBasis: 100,
-  });
-  const [steelblue, setSteelblue] = useState({
-    flexGrow: 0,
-    flexShrink: 1,
-    flexBasis: 200,
-  });
-  return (
-    <View style={styles.container}>
-      <View
-        style={[
-          styles.container,
-          {
-            flexDirection: 'row',
-            alignContent: 'space-between',
-          },
-        ]}>
-        <BoxInfo color="powderblue" {...powderblue} setStyle={setPowderblue} />
-        <BoxInfo color="skyblue" {...skyblue} setStyle={setSkyblue} />
-        <BoxInfo color="steelblue" {...steelblue} setStyle={setSteelblue} />
-      </View>
-      <View style={styles.previewContainer}>
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: powderblue.flexBasis,
-              flexGrow: powderblue.flexGrow,
-              flexShrink: powderblue.flexShrink,
-              backgroundColor: 'powderblue',
-            },
-          ]}
-        />
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: skyblue.flexBasis,
-              flexGrow: skyblue.flexGrow,
-              flexShrink: skyblue.flexShrink,
-              backgroundColor: 'skyblue',
-            },
-          ]}
-        />
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: steelblue.flexBasis,
-              flexGrow: steelblue.flexGrow,
-              flexShrink: steelblue.flexShrink,
-              backgroundColor: 'steelblue',
-            },
-          ]}
-        />
-      </View>
-    </View>
-  );
-};
-
-const BoxInfo = ({color, flexBasis, flexShrink, setStyle, flexGrow}) => (
-  <View style={[styles.row, {flexDirection: 'column'}]}>
-    <View
-      style={[
-        styles.boxLabel,
-        {
-          backgroundColor: color,
-        },
-      ]}>
-      <Text
-        style={{
-          color: '#fff',
-          fontWeight: '500',
-          textAlign: 'center',
-        }}>
-        Box
-      </Text>
-    </View>
-    <Text style={styles.label}>flexBasis</Text>
-    <TextInput
-      value={flexBasis}
-      style={styles.input}
-      onChangeText={fB =>
-        setStyle(value => ({
-          ...value,
-          flexBasis: isNaN(parseInt(fB, 10)) ? 'auto' : parseInt(fB, 10),
-        }))
-      }
-    />
-    <Text style={styles.label}>flexShrink</Text>
-    <TextInput
-      value={flexShrink}
-      style={styles.input}
-      onChangeText={fS =>
-        setStyle(value => ({
-          ...value,
-          flexShrink: isNaN(parseInt(fS, 10)) ? undefined : parseInt(fS, 10),
-        }))
-      }
-    />
-    <Text style={styles.label}>flexGrow</Text>
-    <TextInput
-      value={flexGrow}
-      style={styles.input}
-      onChangeText={fG =>
-        setStyle(value => ({
-          ...value,
-          flexGrow: isNaN(parseInt(fG, 10)) ? undefined : parseInt(fG, 10),
-        }))
-      }
-    />
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingHorizontal: 10,
-  },
-  box: {
-    flex: 1,
-    height: 50,
-    width: 50,
-  },
-  boxLabel: {
-    minWidth: 80,
-    padding: 8,
-    borderRadius: 4,
-    marginTop: 8,
-  },
-  label: {
-    marginTop: 6,
-    fontSize: 16,
-    fontWeight: '100',
-  },
-  previewContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    backgroundColor: 'aliceblue',
-  },
-  row: {
-    flex: 1,
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    marginBottom: 10,
-  },
-  input: {
-    borderBottomWidth: 1,
-    paddingVertical: 3,
-    width: 50,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink&ext=tsx
-import React, {useState} from 'react';
-import {View, Text, TextInput, StyleSheet} from 'react-native';
-import type {ViewStyle} from 'react-native';
-
-const App = () => {
-  const [powderblue, setPowderblue] = useState<ViewStyle>({
-    flexGrow: 0,
-    flexShrink: 1,
-    flexBasis: 'auto',
-  });
-  const [skyblue, setSkyblue] = useState<ViewStyle>({
-    flexGrow: 1,
-    flexShrink: 0,
-    flexBasis: 100,
-  });
-  const [steelblue, setSteelblue] = useState<ViewStyle>({
-    flexGrow: 0,
-    flexShrink: 1,
-    flexBasis: 200,
-  });
-  return (
-    <View style={styles.container}>
-      <View
-        style={[
-          styles.container,
-          {
-            flexDirection: 'row',
-            alignContent: 'space-between',
-          },
-        ]}>
-        <BoxInfo color="powderblue" {...powderblue} setStyle={setPowderblue} />
-        <BoxInfo color="skyblue" {...skyblue} setStyle={setSkyblue} />
-        <BoxInfo color="steelblue" {...steelblue} setStyle={setSteelblue} />
-      </View>
-      <View style={styles.previewContainer}>
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: powderblue.flexBasis,
-              flexGrow: powderblue.flexGrow,
-              flexShrink: powderblue.flexShrink,
-              backgroundColor: 'powderblue',
-            },
-          ]}
-        />
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: skyblue.flexBasis,
-              flexGrow: skyblue.flexGrow,
-              flexShrink: skyblue.flexShrink,
-              backgroundColor: 'skyblue',
-            },
-          ]}
-        />
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: steelblue.flexBasis,
-              flexGrow: steelblue.flexGrow,
-              flexShrink: steelblue.flexShrink,
-              backgroundColor: 'steelblue',
-            },
-          ]}
-        />
-      </View>
-    </View>
-  );
-};
-
-type BoxInfoProps = ViewStyle & {
-  color: string;
-  setStyle: React.Dispatch<React.SetStateAction<ViewStyle>>;
-};
-
-const BoxInfo = ({
-  color,
-  flexBasis,
-  flexShrink,
-  setStyle,
-  flexGrow,
-}: BoxInfoProps) => (
-  <View style={[styles.row, {flexDirection: 'column'}]}>
-    <View
-      style={[
-        styles.boxLabel,
-        {
-          backgroundColor: color,
-        },
-      ]}>
-      <Text
-        style={{
-          color: '#fff',
-          fontWeight: '500',
-          textAlign: 'center',
-        }}>
-        Box
-      </Text>
-    </View>
-    <Text style={styles.label}>flexBasis</Text>
-    <TextInput
-      value={String(flexBasis)}
-      style={styles.input}
-      onChangeText={fB =>
-        setStyle(value => ({
-          ...value,
-          flexBasis: isNaN(parseInt(fB, 10)) ? 'auto' : parseInt(fB, 10),
-        }))
-      }
-    />
-    <Text style={styles.label}>flexShrink</Text>
-    <TextInput
-      value={String(flexShrink)}
-      style={styles.input}
-      onChangeText={fS =>
-        setStyle(value => ({
-          ...value,
-          flexShrink: isNaN(parseInt(fS, 10)) ? undefined : parseInt(fS, 10),
-        }))
-      }
-    />
-    <Text style={styles.label}>flexGrow</Text>
-    <TextInput
-      value={String(flexGrow)}
-      style={styles.input}
-      onChangeText={fG =>
-        setStyle(value => ({
-          ...value,
-          flexGrow: isNaN(parseInt(fG, 10)) ? undefined : parseInt(fG, 10),
-        }))
-      }
-    />
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingHorizontal: 10,
-  },
-  box: {
-    flex: 1,
-    height: 50,
-    width: 50,
-  },
-  boxLabel: {
-    minWidth: 80,
-    padding: 8,
-    borderRadius: 4,
-    marginTop: 8,
-  },
-  label: {
-    marginTop: 6,
-    fontSize: 16,
-    fontWeight: '100',
-  },
-  previewContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    backgroundColor: 'aliceblue',
-  },
-  row: {
-    flex: 1,
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    marginBottom: 10,
-  },
-  input: {
-    borderBottomWidth: 1,
-    paddingVertical: 3,
-    width: 50,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-## Row Gap, Column Gap and Gap
-
-- [`rowGap`](layout-props#rowgap) sets the size of the gap (gutter) between an element's rows.
-
-- [`columnGap`](layout-props#columngap) sets the size of the gap (gutter) between an element's columns.
-
-- [`gap`](layout-props#gap) sets the size of the gap (gutter) between rows and columns. It is a shorthand for `rowGap` and `columnGap`.
-
-You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Row%20Gap%20and%20Column%20Gap&ext=js
-import React, {useState} from 'react';
-import {View, Text, StyleSheet, TextInput} from 'react-native';
-
-const RowGapAndColumnGap = () => {
-  const [rowGap, setRowGap] = useState(10);
-  const [columnGap, setColumnGap] = useState(10);
-
-  return (
-    <PreviewLayout
-      columnGap={columnGap}
-      handleColumnGapChange={setColumnGap}
-      rowGap={rowGap}
-      handleRowGapChange={setRowGap}>
-      <View style={[styles.box, styles.box1]} />
-      <View style={[styles.box, styles.box2]} />
-      <View style={[styles.box, styles.box3]} />
-      <View style={[styles.box, styles.box4]} />
-      <View style={[styles.box, styles.box5]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  children,
-  handleColumnGapChange,
-  handleRowGapChange,
-  rowGap,
-  columnGap,
-}) => (
-  <View style={styles.previewContainer}>
-    <View style={styles.inputContainer}>
-      <View style={styles.itemsCenter}>
-        <Text>Row Gap</Text>
-        <TextInput
-          style={styles.input}
-          value={rowGap}
-          onChangeText={v => handleRowGapChange(Number(v))}
-        />
-      </View>
-      <View style={styles.itemsCenter}>
-        <Text>Column Gap</Text>
-        <TextInput
-          style={styles.input}
-          value={columnGap}
-          onChangeText={v => handleColumnGapChange(Number(v))}
-        />
-      </View>
-    </View>
-    <View style={[styles.container, {rowGap, columnGap}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  itemsCenter: {alignItems: 'center'},
-  inputContainer: {
-    gap: 4,
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-  },
-  previewContainer: {padding: 10, flex: 1},
-  input: {
-    borderBottomWidth: 1,
-    paddingVertical: 3,
-    width: 50,
-    textAlign: 'center',
-  },
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-    flexWrap: 'wrap',
-    alignContent: 'flex-start',
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  box1: {
-    backgroundColor: 'orangered',
-  },
-  box2: {
-    backgroundColor: 'orange',
-  },
-  box3: {
-    backgroundColor: 'mediumseagreen',
-  },
-  box4: {
-    backgroundColor: 'deepskyblue',
-  },
-  box5: {
-    backgroundColor: 'mediumturquoise',
-  },
-});
-
-export default RowGapAndColumnGap;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Row%20Gap%20and%20Column%20Gap&ext=tsx
-import React, {useState} from 'react';
-import {View, Text, StyleSheet, TextInput} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const RowGapAndColumnGap = () => {
-  const [rowGap, setRowGap] = useState(10);
-  const [columnGap, setColumnGap] = useState(10);
-
-  return (
-    <PreviewLayout
-      columnGap={columnGap}
-      handleColumnGapChange={setColumnGap}
-      rowGap={rowGap}
-      handleRowGapChange={setRowGap}>
-      <View style={[styles.box, styles.box1]} />
-      <View style={[styles.box, styles.box2]} />
-      <View style={[styles.box, styles.box3]} />
-      <View style={[styles.box, styles.box4]} />
-      <View style={[styles.box, styles.box5]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  columnGap: number;
-  handleColumnGapChange: (gap: number) => void;
-  rowGap: number;
-  handleRowGapChange: (gap: number) => void;
-}>;
-
-const PreviewLayout = ({
-  children,
-  handleColumnGapChange,
-  handleRowGapChange,
-  rowGap,
-  columnGap,
-}: PreviewLayoutProps) => (
-  <View style={styles.previewContainer}>
-    <View style={styles.inputContainer}>
-      <View style={styles.itemsCenter}>
-        <Text>Row Gap</Text>
-        <TextInput
-          style={styles.input}
-          value={String(rowGap)}
-          onChangeText={v => handleRowGapChange(Number(v))}
-        />
-      </View>
-      <View style={styles.itemsCenter}>
-        <Text>Column Gap</Text>
-        <TextInput
-          style={styles.input}
-          value={String(columnGap)}
-          onChangeText={v => handleColumnGapChange(Number(v))}
-        />
-      </View>
-    </View>
-    <View style={[styles.container, {rowGap, columnGap}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  itemsCenter: {alignItems: 'center'},
-  inputContainer: {
-    gap: 4,
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-  },
-  previewContainer: {padding: 10, flex: 1},
-  input: {
-    borderBottomWidth: 1,
-    paddingVertical: 3,
-    width: 50,
-    textAlign: 'center',
-  },
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-    flexWrap: 'wrap',
-    alignContent: 'flex-start',
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  box1: {
-    backgroundColor: 'orangered',
-  },
-  box2: {
-    backgroundColor: 'orange',
-  },
-  box3: {
-    backgroundColor: 'mediumseagreen',
-  },
-  box4: {
-    backgroundColor: 'deepskyblue',
-  },
-  box5: {
-    backgroundColor: 'mediumturquoise',
-  },
-});
-
-export default RowGapAndColumnGap;
-```
-
-</TabItem>
-</Tabs>
-
-## Width and Height
-
-The `width` property specifies the width of an element's content area. Similarly, the `height` property specifies the height of an element's content area.
-
-Both `width` and `height` can take the following values:
-
-- `auto` (**default value**) React Native calculates the width/height for the element based on its content, whether that is other children, text, or an image.
-
-- `pixels` Defines the width/height in absolute pixels. Depending on other styles set on the component, this may or may not be the final dimension of the node.
-
-- `percentage` Defines the width or height in percentage of its parent's width or height, respectively.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Width%20and%20Height&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const WidthHeightBasics = () => {
-  const [widthType, setWidthType] = useState('auto');
-  const [heightType, setHeightType] = useState('auto');
-
-  return (
-    <PreviewLayout
-      widthType={widthType}
-      heightType={heightType}
-      widthValues={['auto', 300, '80%']}
-      heightValues={['auto', 200, '60%']}
-      setWidthType={setWidthType}
-      setHeightType={setHeightType}>
-      <View
-        style={{
-          alignSelf: 'flex-start',
-          backgroundColor: 'aliceblue',
-          height: heightType,
-          width: widthType,
-          padding: 15,
-        }}>
-        <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-        <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-        <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-      </View>
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  children,
-  widthType,
-  heightType,
-  widthValues,
-  heightValues,
-  setWidthType,
-  setHeightType,
-}) => (
-  <SafeAreaProvider>
-    <SafeAreaView style={{flex: 1, padding: 10}}>
-      <View style={styles.row}>
-        <Text style={styles.label}>width </Text>
-        {widthValues.map(value => (
-          <TouchableOpacity
-            key={value}
-            onPress={() => setWidthType(value)}
-            style={[styles.button, widthType === value && styles.selected]}>
-            <Text
-              style={[
-                styles.buttonLabel,
-                widthType === value && styles.selectedLabel,
-              ]}>
-              {value}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </View>
-      <View style={styles.row}>
-        <Text style={styles.label}>height </Text>
-        {heightValues.map(value => (
-          <TouchableOpacity
-            key={value}
-            onPress={() => setHeightType(value)}
-            style={[styles.button, heightType === value && styles.selected]}>
-            <Text
-              style={[
-                styles.buttonLabel,
-                heightType === value && styles.selectedLabel,
-              ]}>
-              {value}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </View>
-      {children}
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    padding: 8,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginRight: 10,
-    marginBottom: 10,
-  },
-  selected: {
-    backgroundColor: 'coral',
-    shadowOpacity: 0,
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default WidthHeightBasics;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Width%20and%20Height&ext=tsx
-import React, {useState, PropsWithChildren} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-type Dimension = 'auto' | `${number}%` | number;
-
-const WidthHeightBasics = () => {
-  const [widthType, setWidthType] = useState<Dimension>('auto');
-  const [heightType, setHeightType] = useState<Dimension>('auto');
-
-  return (
-    <PreviewLayout
-      widthType={widthType}
-      heightType={heightType}
-      widthValues={['auto', 300, '80%']}
-      heightValues={['auto', 200, '60%']}
-      setWidthType={setWidthType}
-      setHeightType={setHeightType}>
-      <View
-        style={{
-          alignSelf: 'flex-start',
-          backgroundColor: 'aliceblue',
-          height: heightType,
-          width: widthType,
-          padding: 15,
-        }}>
-        <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-        <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-        <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-      </View>
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  widthType: Dimension;
-  heightType: Dimension;
-  widthValues: Dimension[];
-  heightValues: Dimension[];
-  setWidthType: (value: Dimension) => void;
-  setHeightType: (value: Dimension) => void;
-}>;
-
-const PreviewLayout = ({
-  children,
-  widthType,
-  heightType,
-  widthValues,
-  heightValues,
-  setWidthType,
-  setHeightType,
-}: PreviewLayoutProps) => (
-  <SafeAreaProvider>
-    <SafeAreaView style={{flex: 1, padding: 10}}>
-      <View style={styles.row}>
-        <Text style={styles.label}>width </Text>
-        {widthValues.map(value => (
-          <TouchableOpacity
-            key={value}
-            onPress={() => setWidthType(value)}
-            style={[styles.button, widthType === value && styles.selected]}>
-            <Text
-              style={[
-                styles.buttonLabel,
-                widthType === value && styles.selectedLabel,
-              ]}>
-              {value}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </View>
-      <View style={styles.row}>
-        <Text style={styles.label}>height </Text>
-        {heightValues.map(value => (
-          <TouchableOpacity
-            key={value}
-            onPress={() => setHeightType(value)}
-            style={[styles.button, heightType === value && styles.selected]}>
-            <Text
-              style={[
-                styles.buttonLabel,
-                heightType === value && styles.selectedLabel,
-              ]}>
-              {value}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </View>
-      {children}
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    padding: 8,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginRight: 10,
-    marginBottom: 10,
-  },
-  selected: {
-    backgroundColor: 'coral',
-    shadowOpacity: 0,
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default WidthHeightBasics;
-```
-
-</TabItem>
-</Tabs>
-
-## Position
-
-The `position` type of an element defines how it is positioned relative to either itself, its parent, or its [containing block](./flexbox.md#the-containing-block).
-
-- `relative` (**default value**) By default, an element is positioned relatively. This means an element is positioned according to the normal flow of the layout, and then offset relative to that position based on the values of `top`, `right`, `bottom`, and `left`. The offset does not affect the position of any sibling or parent elements.
-
-- `absolute` When positioned absolutely, an element doesn't take part in the normal layout flow. It is instead laid out independent of its siblings. The position is determined based on the `top`, `right`, `bottom`, and `left` values. These values will position the element relative to its containing block.
-
-- `static` When positioned statically, an element is positioned according to the normal flow of layout, and will ignore the `top`, `right`, `bottom`, and `left` values. This `position` will also cause the element to not form a containing block for absolute descendants, unless some other superceding style prop is present (e.g. `transform`). This allows `absolute` elements to be positioned to something that is not their parent. Note that **`static` is only available on the New Architecture**.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Position&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const PositionLayout = () => {
-  const [position, setPosition] = useState('relative');
-
-  return (
-    <PreviewLayout
-      label="position"
-      selectedValue={position}
-      values={['relative', 'absolute', 'static']}
-      setSelectedValue={setPosition}>
-      <View
-        style={[
-          styles.box,
-          {
-            top: 25,
-            left: 25,
-            position,
-            backgroundColor: 'powderblue',
-          },
-        ]}
-      />
-      <View
-        style={[
-          styles.box,
-          {
-            top: 50,
-            left: 50,
-            position,
-            backgroundColor: 'skyblue',
-          },
-        ]}
-      />
-      <View
-        style={[
-          styles.box,
-          {
-            top: 75,
-            left: 75,
-            position,
-            backgroundColor: 'steelblue',
-          },
-        ]}
-      />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={styles.container}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default PositionLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Position&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const PositionLayout = () => {
-  const [position, setPosition] = useState<'relative' | 'absolute' | 'static'>(
-    'relative',
-  );
-
-  return (
-    <PreviewLayout
-      label="position"
-      selectedValue={position}
-      values={['relative', 'absolute', 'static']}
-      setSelectedValue={setPosition}>
-      <View
-        style={[
-          styles.box,
-          {
-            top: 25,
-            left: 25,
-            position,
-            backgroundColor: 'powderblue',
-          },
-        ]}
-      />
-      <View
-        style={[
-          styles.box,
-          {
-            top: 50,
-            left: 50,
-            position,
-            backgroundColor: 'skyblue',
-          },
-        ]}
-      />
-      <View
-        style={[
-          styles.box,
-          {
-            top: 75,
-            left: 75,
-            position,
-            backgroundColor: 'steelblue',
-          },
-        ]}
-      />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: Array<'relative' | 'absolute' | 'static'>;
-  selectedValue: string;
-  setSelectedValue: (value: 'relative' | 'absolute' | 'static') => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={styles.container}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default PositionLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## The Containing Block
-
-The containing block of an element is an ancestor element which controls its position and size.
-The way containing blocks work in React Native is very similar to [how they work on the web](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block), with some simplifications due to the lack of some web features.
-
-The `top`, `right`, `bottom`, and `left` values of an absolutely positioned element will be
-relative to its containing block.
-
-Percentage lengths (e.g.: `width: '50%'` or `padding: '10%'`) applied to absolutely positioned elements will be calculated relatively to the size of its containing block. For example, if the containing block is 100 points wide, then `width: 50%` on an absolutely positioned element will cause it to be 50 points wide.
-
-The following list will help you determine the containing block of any given element:
-
-- If that element has a `position` type of `relative` or `static`, then its containing block is its parent.
-- If that element has a `position` type of `absolute`, then its containing block is the nearest ancestor in which one of the following is true:
-  - It has a `position` type other than `static`
-  - It has a `transform`
-
-## Going Deeper
-
-Check out the interactive [yoga playground](https://www.yogalayout.dev/playground) that you can use to get a better understanding of flexbox.
-
-We've covered the basics, but there are many other styles you may need for layouts. The full list of props that control layout is documented [here](./layout-props.md).
-
-Additionally, you can see some examples from [Wix Engineers](https://medium.com/wix-engineering/the-full-react-native-layout-cheat-sheet-a4147802405c).
+---
+id: flexbox
+title: Layout with Flexbox
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+A component can specify the layout of its children using the Flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes.
+
+You will normally use a combination of `flexDirection`, `alignItems`, and `justifyContent` to achieve the right layout.
+
+:::caution
+Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions.
+The defaults are different, with `flexDirection` defaulting to `column` instead of `row`, `alignContent` defaulting to `flex-start` instead of `stretch`, `flexShrink` defaulting to `0` instead of `1`, the `flex` parameter only supporting a single number.
+:::
+
+## Flex
+
+[`flex`](layout-props#flex) will define how your items are going to **“fill”** over the available space along your main axis. Space will be divided according to each element's flex property.
+
+In the following example, the red, orange, and green views are all children in the container view that has `flex: 1` set. The red view uses `flex: 1` , the orange view uses `flex: 2`, and the green view uses `flex: 3` . **1+2+3 = 6**, which means that the red view will get `1/6` of the space, the orange `2/6` of the space, and the green `3/6` of the space.
+
+```SnackPlayer name=Flex%20Example
+import {StyleSheet, View} from 'react-native';
+
+const Flex = () => {
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          // Try setting `flexDirection` to `"row"`.
+          flexDirection: 'column',
+        },
+      ]}>
+      <View style={{flex: 1, backgroundColor: 'red'}} />
+      <View style={{flex: 2, backgroundColor: 'darkorange'}} />
+      <View style={{flex: 3, backgroundColor: 'green'}} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+  },
+});
+
+export default Flex;
+```
+
+## Flex Direction
+
+[`flexDirection`](layout-props#flexdirection) controls the direction in which the children of a node are laid out. This is also referred to as the main axis. The cross axis is the axis perpendicular to the main axis, or the axis which the wrapping lines are laid out in.
+
+- `column` (**default value**) Align children from top to bottom. If wrapping is enabled, then the next line will start to the right of the first item on the top of the container.
+
+- `row` Align children from left to right. If wrapping is enabled, then the next line will start under the first item on the left of the container.
+
+- `column-reverse` Align children from bottom to top. If wrapping is enabled, then the next line will start to the right of the first item on the bottom of the container.
+
+- `row-reverse` Align children from right to left. If wrapping is enabled, then the next line will start under the first item on the right of the container.
+
+You can learn more [here](https://www.yogalayout.dev/docs/styling/flex-direction).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Flex%20Direction&ext=js
+import {useState} from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+
+const FlexDirectionBasics = () => {
+  const [flexDirection, setflexDirection] = useState('column');
+
+  return (
+    <PreviewLayout
+      label="flexDirection"
+      values={['column', 'row', 'column-reverse', 'row-reverse']}
+      selectedValue={flexDirection}
+      setSelectedValue={setflexDirection}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default FlexDirectionBasics;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Flex%20Direction&ext=tsx
+import {useState} from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const FlexDirectionBasics = () => {
+  const [flexDirection, setflexDirection] = useState('column');
+
+  return (
+    <PreviewLayout
+      label="flexDirection"
+      values={['column', 'row', 'column-reverse', 'row-reverse']}
+      selectedValue={flexDirection}
+      setSelectedValue={setflexDirection}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default FlexDirectionBasics;
+```
+
+</TabItem>
+</Tabs>
+
+## Layout Direction
+
+Layout [`direction`](layout-props#direction) specifies the direction in which children and text in a hierarchy should be laid out. Layout direction also affects what edge `start` and `end` refer to. By default, React Native lays out with LTR layout direction. In this mode `start` refers to left and `end` refers to right.
+
+- `LTR` (**default value**) Text and children are laid out from left to right. Margin and padding applied to the start of an element are applied on the left side.
+
+- `RTL` Text and children are laid out from right to left. Margin and padding applied to the start of an element are applied on the right side.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Flex%20Direction&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const DirectionLayout = () => {
+  const [direction, setDirection] = useState('ltr');
+
+  return (
+    <PreviewLayout
+      label="direction"
+      selectedValue={direction}
+      values={['ltr', 'rtl']}
+      setSelectedValue={setDirection}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default DirectionLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Flex%20Direction&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const DirectionLayout = () => {
+  const [direction, setDirection] = useState('ltr');
+
+  return (
+    <PreviewLayout
+      label="direction"
+      selectedValue={direction}
+      values={['ltr', 'rtl']}
+      setSelectedValue={setDirection}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default DirectionLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## Justify Content
+
+[`justifyContent`](layout-props#justifycontent) describes how to align children within the main axis of their container. For example, you can use this property to center a child horizontally within a container with `flexDirection` set to `row` or vertically within a container with `flexDirection` set to `column`.
+
+- `flex-start`(**default value**) Align children of a container to the start of the container's main axis.
+
+- `flex-end` Align children of a container to the end of the container's main axis.
+
+- `center` Align children of a container in the center of the container's main axis.
+
+- `space-between` Evenly space off children across the container's main axis, distributing the remaining space between the children.
+
+- `space-around` Evenly space off children across the container's main axis, distributing the remaining space around the children. Compared to `space-between`, using `space-around` will result in space being distributed to the beginning of the first child and end of the last child.
+
+- `space-evenly` Evenly distribute children within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.
+
+You can learn more [here](https://www.yogalayout.dev/docs/styling/justify-content).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Justify%20Content&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const JustifyContentBasics = () => {
+  const [justifyContent, setJustifyContent] = useState('flex-start');
+
+  return (
+    <PreviewLayout
+      label="justifyContent"
+      selectedValue={justifyContent}
+      values={[
+        'flex-start',
+        'flex-end',
+        'center',
+        'space-between',
+        'space-around',
+        'space-evenly',
+      ]}
+      setSelectedValue={setJustifyContent}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default JustifyContentBasics;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Justify%20Content&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const JustifyContentBasics = () => {
+  const [justifyContent, setJustifyContent] = useState('flex-start');
+
+  return (
+    <PreviewLayout
+      label="justifyContent"
+      selectedValue={justifyContent}
+      values={[
+        'flex-start',
+        'flex-end',
+        'center',
+        'space-between',
+        'space-around',
+        'space-evenly',
+      ]}
+      setSelectedValue={setJustifyContent}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default JustifyContentBasics;
+```
+
+</TabItem>
+</Tabs>
+
+## Align Items
+
+[`alignItems`](layout-props#alignitems) describes how to align children along the cross axis of their container. It is very similar to `justifyContent` but instead of applying to the main axis, `alignItems` applies to the cross axis.
+
+- `stretch` (**default value**) Stretch children of a container to match the `height` of the container's cross axis.
+
+- `flex-start` Align children of a container to the start of the container's cross axis.
+
+- `flex-end` Align children of a container to the end of the container's cross axis.
+
+- `center` Align children of a container in the center of the container's cross axis.
+
+- `baseline` Align children of a container along a common baseline. Individual children can be set to be the reference baseline for their parents.
+
+:::info
+For `stretch` to have an effect, children must not have a fixed dimension along the secondary axis. In the following example, setting `alignItems: stretch` does nothing until the `width: 50` is removed from the children.
+:::
+
+You can learn more [here](https://www.yogalayout.dev/docs/styling/align-items-self).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Align%20Items&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const AlignItemsLayout = () => {
+  const [alignItems, setAlignItems] = useState('stretch');
+
+  return (
+    <PreviewLayout
+      label="alignItems"
+      selectedValue={alignItems}
+      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
+      setSelectedValue={setAlignItems}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View
+        style={[
+          styles.box,
+          {
+            backgroundColor: 'steelblue',
+            width: 'auto',
+            minWidth: 50,
+          },
+        ]}
+      />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignItemsLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Align%20Items&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const AlignItemsLayout = () => {
+  const [alignItems, setAlignItems] = useState('stretch');
+
+  return (
+    <PreviewLayout
+      label="alignItems"
+      selectedValue={alignItems}
+      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
+      setSelectedValue={setAlignItems}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View
+        style={[
+          styles.box,
+          {
+            backgroundColor: 'steelblue',
+            width: 'auto',
+            minWidth: 50,
+          },
+        ]}
+      />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignItemsLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## Align Self
+
+[`alignSelf`](layout-props#alignself) has the same options and effect as `alignItems` but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent. `alignSelf` overrides any option set by the parent with `alignItems`.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Align%20Self&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const AlignSelfLayout = () => {
+  const [alignSelf, setAlignSelf] = useState('stretch');
+
+  return (
+    <PreviewLayout
+      label="alignSelf"
+      selectedValue={alignSelf}
+      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
+      setSelectedValue={setAlignSelf}>
+      <View
+        style={[
+          styles.box,
+          {
+            alignSelf,
+            width: 'auto',
+            minWidth: 50,
+            backgroundColor: 'powderblue',
+          },
+        ]}
+      />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={styles.container}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignSelfLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Align%20Self&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+import type {FlexAlignType} from 'react-native';
+
+const AlignSelfLayout = () => {
+  const [alignSelf, setAlignSelf] = useState<FlexAlignType>('stretch');
+
+  return (
+    <PreviewLayout
+      label="alignSelf"
+      selectedValue={alignSelf}
+      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
+      setSelectedValue={setAlignSelf}>
+      <View
+        style={[
+          styles.box,
+          {
+            alignSelf,
+            width: 'auto',
+            minWidth: 50,
+            backgroundColor: 'powderblue',
+          },
+        ]}
+      />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: FlexAlignType[];
+  selectedValue: string;
+  setSelectedValue: (value: FlexAlignType) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={styles.container}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignSelfLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## Align Content
+
+[alignContent](layout-props#aligncontent) defines the distribution of lines along the cross-axis. This only has effect when items are wrapped to multiple lines using `flexWrap`.
+
+- `flex-start` (**default value**) Align wrapped lines to the start of the container's cross axis.
+
+- `flex-end` Align wrapped lines to the end of the container's cross axis.
+
+- `stretch` (_default value when using Yoga on the web_) Stretch wrapped lines to match the height of the container's cross axis.
+
+- `center` Align wrapped lines in the center of the container's cross axis.
+
+- `space-between` Evenly space wrapped lines across the container's cross axis, distributing the remaining space between the lines.
+
+- `space-around` Evenly space wrapped lines across the container's cross axis, distributing the remaining space around the lines. Each end of the container has a half-sized space compared to the space between items.
+
+- `space-evenly` Evenly space wrapped lines across the container's cross axis, distributing the remaining space around the lines. Each space is the same size.
+
+You can learn more [here](https://www.yogalayout.dev/docs/styling/align-content).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Align%20Content&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const AlignContentLayout = () => {
+  const [alignContent, setAlignContent] = useState('flex-start');
+
+  return (
+    <PreviewLayout
+      label="alignContent"
+      selectedValue={alignContent}
+      values={[
+        'flex-start',
+        'flex-end',
+        'stretch',
+        'center',
+        'space-between',
+        'space-around',
+      ]}
+      setSelectedValue={setAlignContent}>
+      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
+      <View style={[styles.box, {backgroundColor: 'orange'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
+      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'purple'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexWrap: 'wrap',
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignContentLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Align%20Content&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const AlignContentLayout = () => {
+  const [alignContent, setAlignContent] = useState('flex-start');
+
+  return (
+    <PreviewLayout
+      label="alignContent"
+      selectedValue={alignContent}
+      values={[
+        'flex-start',
+        'flex-end',
+        'stretch',
+        'center',
+        'space-between',
+        'space-around',
+      ]}
+      setSelectedValue={setAlignContent}>
+      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
+      <View style={[styles.box, {backgroundColor: 'orange'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
+      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'purple'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexWrap: 'wrap',
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignContentLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## Flex Wrap
+
+The [`flexWrap`](layout-props#flexwrap) property is set on containers and it controls what happens when children overflow the size of the container along the main axis. By default, children are forced into a single line (which can shrink elements). If wrapping is allowed, items are wrapped into multiple lines along the main axis if needed.
+
+When wrapping lines, `alignContent` can be used to specify how the lines are placed in the container. Learn more [here](https://www.yogalayout.dev/docs/styling/flex-wrap).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Flex%20Wrap&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const FlexWrapLayout = () => {
+  const [flexWrap, setFlexWrap] = useState('wrap');
+
+  return (
+    <PreviewLayout
+      label="flexWrap"
+      selectedValue={flexWrap}
+      values={['wrap', 'nowrap']}
+      setSelectedValue={setFlexWrap}>
+      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
+      <View style={[styles.box, {backgroundColor: 'orange'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
+      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'purple'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default FlexWrapLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Flex%20Wrap&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const FlexWrapLayout = () => {
+  const [flexWrap, setFlexWrap] = useState('wrap');
+
+  return (
+    <PreviewLayout
+      label="flexWrap"
+      selectedValue={flexWrap}
+      values={['wrap', 'nowrap']}
+      setSelectedValue={setFlexWrap}>
+      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
+      <View style={[styles.box, {backgroundColor: 'orange'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
+      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'purple'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default FlexWrapLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## Flex Basis, Grow, and Shrink
+
+- [`flexBasis`](layout-props#flexbasis) is an axis-independent way of providing the default size of an item along the main axis. Setting the `flexBasis` of a child is similar to setting the `width` of that child if its parent is a container with `flexDirection: row` or setting the `height` of a child if its parent is a container with `flexDirection: column`. The `flexBasis` of an item is the default size of that item, the size of the item before any `flexGrow` and `flexShrink` calculations are performed.
+
+- [`flexGrow`](layout-props#flexgrow) describes how much space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
+
+  `flexGrow` accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the children’s `flexGrow` values.
+
+- [`flexShrink`](layout-props#flexshrink) describes how to shrink children along the main axis in the case in which the total size of the children overflows the size of the container on the main axis. `flexShrink` is very similar to `flexGrow` and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed.
+
+  `flexShrink` accepts any floating point value >= 0, with 0 being the default value (on the web, the default is 1). A container will shrink its children weighted by the children’s `flexShrink` values.
+
+You can learn more [here](https://www.yogalayout.dev/docs/styling/flex-basis-grow-shrink).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink&ext=js
+import {useState} from 'react';
+import {View, Text, TextInput, StyleSheet} from 'react-native';
+
+const App = () => {
+  const [powderblue, setPowderblue] = useState({
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: 'auto',
+  });
+  const [skyblue, setSkyblue] = useState({
+    flexGrow: 1,
+    flexShrink: 0,
+    flexBasis: 100,
+  });
+  const [steelblue, setSteelblue] = useState({
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: 200,
+  });
+  return (
+    <View style={styles.container}>
+      <View
+        style={[
+          styles.container,
+          {
+            flexDirection: 'row',
+            alignContent: 'space-between',
+          },
+        ]}>
+        <BoxInfo color="powderblue" {...powderblue} setStyle={setPowderblue} />
+        <BoxInfo color="skyblue" {...skyblue} setStyle={setSkyblue} />
+        <BoxInfo color="steelblue" {...steelblue} setStyle={setSteelblue} />
+      </View>
+      <View style={styles.previewContainer}>
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: powderblue.flexBasis,
+              flexGrow: powderblue.flexGrow,
+              flexShrink: powderblue.flexShrink,
+              backgroundColor: 'powderblue',
+            },
+          ]}
+        />
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: skyblue.flexBasis,
+              flexGrow: skyblue.flexGrow,
+              flexShrink: skyblue.flexShrink,
+              backgroundColor: 'skyblue',
+            },
+          ]}
+        />
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: steelblue.flexBasis,
+              flexGrow: steelblue.flexGrow,
+              flexShrink: steelblue.flexShrink,
+              backgroundColor: 'steelblue',
+            },
+          ]}
+        />
+      </View>
+    </View>
+  );
+};
+
+const BoxInfo = ({color, flexBasis, flexShrink, setStyle, flexGrow}) => (
+  <View style={[styles.row, {flexDirection: 'column'}]}>
+    <View
+      style={[
+        styles.boxLabel,
+        {
+          backgroundColor: color,
+        },
+      ]}>
+      <Text
+        style={{
+          color: '#fff',
+          fontWeight: '500',
+          textAlign: 'center',
+        }}>
+        Box
+      </Text>
+    </View>
+    <Text style={styles.label}>flexBasis</Text>
+    <TextInput
+      value={flexBasis}
+      style={styles.input}
+      onChangeText={fB =>
+        setStyle(value => ({
+          ...value,
+          flexBasis: isNaN(parseInt(fB, 10)) ? 'auto' : parseInt(fB, 10),
+        }))
+      }
+    />
+    <Text style={styles.label}>flexShrink</Text>
+    <TextInput
+      value={flexShrink}
+      style={styles.input}
+      onChangeText={fS =>
+        setStyle(value => ({
+          ...value,
+          flexShrink: isNaN(parseInt(fS, 10)) ? undefined : parseInt(fS, 10),
+        }))
+      }
+    />
+    <Text style={styles.label}>flexGrow</Text>
+    <TextInput
+      value={flexGrow}
+      style={styles.input}
+      onChangeText={fG =>
+        setStyle(value => ({
+          ...value,
+          flexGrow: isNaN(parseInt(fG, 10)) ? undefined : parseInt(fG, 10),
+        }))
+      }
+    />
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 10,
+  },
+  box: {
+    flex: 1,
+    height: 50,
+    width: 50,
+  },
+  boxLabel: {
+    minWidth: 80,
+    padding: 8,
+    borderRadius: 4,
+    marginTop: 8,
+  },
+  label: {
+    marginTop: 6,
+    fontSize: 16,
+    fontWeight: '100',
+  },
+  previewContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    backgroundColor: 'aliceblue',
+  },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  input: {
+    borderBottomWidth: 1,
+    paddingVertical: 3,
+    width: 50,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink&ext=tsx
+import {useState, type Dispatch, type SetStateAction} from 'react';
+import {View, Text, TextInput, StyleSheet} from 'react-native';
+import type {ViewStyle} from 'react-native';
+
+const App = () => {
+  const [powderblue, setPowderblue] = useState<ViewStyle>({
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: 'auto',
+  });
+  const [skyblue, setSkyblue] = useState<ViewStyle>({
+    flexGrow: 1,
+    flexShrink: 0,
+    flexBasis: 100,
+  });
+  const [steelblue, setSteelblue] = useState<ViewStyle>({
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: 200,
+  });
+  return (
+    <View style={styles.container}>
+      <View
+        style={[
+          styles.container,
+          {
+            flexDirection: 'row',
+            alignContent: 'space-between',
+          },
+        ]}>
+        <BoxInfo color="powderblue" {...powderblue} setStyle={setPowderblue} />
+        <BoxInfo color="skyblue" {...skyblue} setStyle={setSkyblue} />
+        <BoxInfo color="steelblue" {...steelblue} setStyle={setSteelblue} />
+      </View>
+      <View style={styles.previewContainer}>
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: powderblue.flexBasis,
+              flexGrow: powderblue.flexGrow,
+              flexShrink: powderblue.flexShrink,
+              backgroundColor: 'powderblue',
+            },
+          ]}
+        />
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: skyblue.flexBasis,
+              flexGrow: skyblue.flexGrow,
+              flexShrink: skyblue.flexShrink,
+              backgroundColor: 'skyblue',
+            },
+          ]}
+        />
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: steelblue.flexBasis,
+              flexGrow: steelblue.flexGrow,
+              flexShrink: steelblue.flexShrink,
+              backgroundColor: 'steelblue',
+            },
+          ]}
+        />
+      </View>
+    </View>
+  );
+};
+
+type BoxInfoProps = ViewStyle & {
+  color: string;
+  setStyle: Dispatch<SetStateAction<ViewStyle>>;
+};
+
+const BoxInfo = ({
+  color,
+  flexBasis,
+  flexShrink,
+  setStyle,
+  flexGrow,
+}: BoxInfoProps) => (
+  <View style={[styles.row, {flexDirection: 'column'}]}>
+    <View
+      style={[
+        styles.boxLabel,
+        {
+          backgroundColor: color,
+        },
+      ]}>
+      <Text
+        style={{
+          color: '#fff',
+          fontWeight: '500',
+          textAlign: 'center',
+        }}>
+        Box
+      </Text>
+    </View>
+    <Text style={styles.label}>flexBasis</Text>
+    <TextInput
+      value={String(flexBasis)}
+      style={styles.input}
+      onChangeText={fB =>
+        setStyle(value => ({
+          ...value,
+          flexBasis: isNaN(parseInt(fB, 10)) ? 'auto' : parseInt(fB, 10),
+        }))
+      }
+    />
+    <Text style={styles.label}>flexShrink</Text>
+    <TextInput
+      value={String(flexShrink)}
+      style={styles.input}
+      onChangeText={fS =>
+        setStyle(value => ({
+          ...value,
+          flexShrink: isNaN(parseInt(fS, 10)) ? undefined : parseInt(fS, 10),
+        }))
+      }
+    />
+    <Text style={styles.label}>flexGrow</Text>
+    <TextInput
+      value={String(flexGrow)}
+      style={styles.input}
+      onChangeText={fG =>
+        setStyle(value => ({
+          ...value,
+          flexGrow: isNaN(parseInt(fG, 10)) ? undefined : parseInt(fG, 10),
+        }))
+      }
+    />
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 10,
+  },
+  box: {
+    flex: 1,
+    height: 50,
+    width: 50,
+  },
+  boxLabel: {
+    minWidth: 80,
+    padding: 8,
+    borderRadius: 4,
+    marginTop: 8,
+  },
+  label: {
+    marginTop: 6,
+    fontSize: 16,
+    fontWeight: '100',
+  },
+  previewContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    backgroundColor: 'aliceblue',
+  },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  input: {
+    borderBottomWidth: 1,
+    paddingVertical: 3,
+    width: 50,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+## Row Gap, Column Gap and Gap
+
+- [`rowGap`](layout-props#rowgap) sets the size of the gap (gutter) between an element's rows.
+
+- [`columnGap`](layout-props#columngap) sets the size of the gap (gutter) between an element's columns.
+
+- [`gap`](layout-props#gap) sets the size of the gap (gutter) between rows and columns. It is a shorthand for `rowGap` and `columnGap`.
+
+You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Row%20Gap%20and%20Column%20Gap&ext=js
+import {useState} from 'react';
+import {View, Text, StyleSheet, TextInput} from 'react-native';
+
+const RowGapAndColumnGap = () => {
+  const [rowGap, setRowGap] = useState(10);
+  const [columnGap, setColumnGap] = useState(10);
+
+  return (
+    <PreviewLayout
+      columnGap={columnGap}
+      handleColumnGapChange={setColumnGap}
+      rowGap={rowGap}
+      handleRowGapChange={setRowGap}>
+      <View style={[styles.box, styles.box1]} />
+      <View style={[styles.box, styles.box2]} />
+      <View style={[styles.box, styles.box3]} />
+      <View style={[styles.box, styles.box4]} />
+      <View style={[styles.box, styles.box5]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  children,
+  handleColumnGapChange,
+  handleRowGapChange,
+  rowGap,
+  columnGap,
+}) => (
+  <View style={styles.previewContainer}>
+    <View style={styles.inputContainer}>
+      <View style={styles.itemsCenter}>
+        <Text>Row Gap</Text>
+        <TextInput
+          style={styles.input}
+          value={rowGap}
+          onChangeText={v => handleRowGapChange(Number(v))}
+        />
+      </View>
+      <View style={styles.itemsCenter}>
+        <Text>Column Gap</Text>
+        <TextInput
+          style={styles.input}
+          value={columnGap}
+          onChangeText={v => handleColumnGapChange(Number(v))}
+        />
+      </View>
+    </View>
+    <View style={[styles.container, {rowGap, columnGap}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  itemsCenter: {alignItems: 'center'},
+  inputContainer: {
+    gap: 4,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+  previewContainer: {padding: 10, flex: 1},
+  input: {
+    borderBottomWidth: 1,
+    paddingVertical: 3,
+    width: 50,
+    textAlign: 'center',
+  },
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+    flexWrap: 'wrap',
+    alignContent: 'flex-start',
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  box1: {
+    backgroundColor: 'orangered',
+  },
+  box2: {
+    backgroundColor: 'orange',
+  },
+  box3: {
+    backgroundColor: 'mediumseagreen',
+  },
+  box4: {
+    backgroundColor: 'deepskyblue',
+  },
+  box5: {
+    backgroundColor: 'mediumturquoise',
+  },
+});
+
+export default RowGapAndColumnGap;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Row%20Gap%20and%20Column%20Gap&ext=tsx
+import {useState} from 'react';
+import {View, Text, StyleSheet, TextInput} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const RowGapAndColumnGap = () => {
+  const [rowGap, setRowGap] = useState(10);
+  const [columnGap, setColumnGap] = useState(10);
+
+  return (
+    <PreviewLayout
+      columnGap={columnGap}
+      handleColumnGapChange={setColumnGap}
+      rowGap={rowGap}
+      handleRowGapChange={setRowGap}>
+      <View style={[styles.box, styles.box1]} />
+      <View style={[styles.box, styles.box2]} />
+      <View style={[styles.box, styles.box3]} />
+      <View style={[styles.box, styles.box4]} />
+      <View style={[styles.box, styles.box5]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  columnGap: number;
+  handleColumnGapChange: (gap: number) => void;
+  rowGap: number;
+  handleRowGapChange: (gap: number) => void;
+}>;
+
+const PreviewLayout = ({
+  children,
+  handleColumnGapChange,
+  handleRowGapChange,
+  rowGap,
+  columnGap,
+}: PreviewLayoutProps) => (
+  <View style={styles.previewContainer}>
+    <View style={styles.inputContainer}>
+      <View style={styles.itemsCenter}>
+        <Text>Row Gap</Text>
+        <TextInput
+          style={styles.input}
+          value={String(rowGap)}
+          onChangeText={v => handleRowGapChange(Number(v))}
+        />
+      </View>
+      <View style={styles.itemsCenter}>
+        <Text>Column Gap</Text>
+        <TextInput
+          style={styles.input}
+          value={String(columnGap)}
+          onChangeText={v => handleColumnGapChange(Number(v))}
+        />
+      </View>
+    </View>
+    <View style={[styles.container, {rowGap, columnGap}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  itemsCenter: {alignItems: 'center'},
+  inputContainer: {
+    gap: 4,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+  previewContainer: {padding: 10, flex: 1},
+  input: {
+    borderBottomWidth: 1,
+    paddingVertical: 3,
+    width: 50,
+    textAlign: 'center',
+  },
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+    flexWrap: 'wrap',
+    alignContent: 'flex-start',
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  box1: {
+    backgroundColor: 'orangered',
+  },
+  box2: {
+    backgroundColor: 'orange',
+  },
+  box3: {
+    backgroundColor: 'mediumseagreen',
+  },
+  box4: {
+    backgroundColor: 'deepskyblue',
+  },
+  box5: {
+    backgroundColor: 'mediumturquoise',
+  },
+});
+
+export default RowGapAndColumnGap;
+```
+
+</TabItem>
+</Tabs>
+
+## Width and Height
+
+The `width` property specifies the width of an element's content area. Similarly, the `height` property specifies the height of an element's content area.
+
+Both `width` and `height` can take the following values:
+
+- `auto` (**default value**) React Native calculates the width/height for the element based on its content, whether that is other children, text, or an image.
+
+- `pixels` Defines the width/height in absolute pixels. Depending on other styles set on the component, this may or may not be the final dimension of the node.
+
+- `percentage` Defines the width or height in percentage of its parent's width or height, respectively.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Width%20and%20Height&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const WidthHeightBasics = () => {
+  const [widthType, setWidthType] = useState('auto');
+  const [heightType, setHeightType] = useState('auto');
+
+  return (
+    <PreviewLayout
+      widthType={widthType}
+      heightType={heightType}
+      widthValues={['auto', 300, '80%']}
+      heightValues={['auto', 200, '60%']}
+      setWidthType={setWidthType}
+      setHeightType={setHeightType}>
+      <View
+        style={{
+          alignSelf: 'flex-start',
+          backgroundColor: 'aliceblue',
+          height: heightType,
+          width: widthType,
+          padding: 15,
+        }}>
+        <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+        <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+        <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+      </View>
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  children,
+  widthType,
+  heightType,
+  widthValues,
+  heightValues,
+  setWidthType,
+  setHeightType,
+}) => (
+  <SafeAreaProvider>
+    <SafeAreaView style={{flex: 1, padding: 10}}>
+      <View style={styles.row}>
+        <Text style={styles.label}>width </Text>
+        {widthValues.map(value => (
+          <TouchableOpacity
+            key={value}
+            onPress={() => setWidthType(value)}
+            style={[styles.button, widthType === value && styles.selected]}>
+            <Text
+              style={[
+                styles.buttonLabel,
+                widthType === value && styles.selectedLabel,
+              ]}>
+              {value}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+      <View style={styles.row}>
+        <Text style={styles.label}>height </Text>
+        {heightValues.map(value => (
+          <TouchableOpacity
+            key={value}
+            onPress={() => setHeightType(value)}
+            style={[styles.button, heightType === value && styles.selected]}>
+            <Text
+              style={[
+                styles.buttonLabel,
+                heightType === value && styles.selectedLabel,
+              ]}>
+              {value}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+      {children}
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    padding: 8,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginRight: 10,
+    marginBottom: 10,
+  },
+  selected: {
+    backgroundColor: 'coral',
+    shadowOpacity: 0,
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default WidthHeightBasics;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Width%20and%20Height&ext=tsx
+import {useState, PropsWithChildren} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+type Dimension = 'auto' | `${number}%` | number;
+
+const WidthHeightBasics = () => {
+  const [widthType, setWidthType] = useState<Dimension>('auto');
+  const [heightType, setHeightType] = useState<Dimension>('auto');
+
+  return (
+    <PreviewLayout
+      widthType={widthType}
+      heightType={heightType}
+      widthValues={['auto', 300, '80%']}
+      heightValues={['auto', 200, '60%']}
+      setWidthType={setWidthType}
+      setHeightType={setHeightType}>
+      <View
+        style={{
+          alignSelf: 'flex-start',
+          backgroundColor: 'aliceblue',
+          height: heightType,
+          width: widthType,
+          padding: 15,
+        }}>
+        <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+        <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+        <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+      </View>
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  widthType: Dimension;
+  heightType: Dimension;
+  widthValues: Dimension[];
+  heightValues: Dimension[];
+  setWidthType: (value: Dimension) => void;
+  setHeightType: (value: Dimension) => void;
+}>;
+
+const PreviewLayout = ({
+  children,
+  widthType,
+  heightType,
+  widthValues,
+  heightValues,
+  setWidthType,
+  setHeightType,
+}: PreviewLayoutProps) => (
+  <SafeAreaProvider>
+    <SafeAreaView style={{flex: 1, padding: 10}}>
+      <View style={styles.row}>
+        <Text style={styles.label}>width </Text>
+        {widthValues.map(value => (
+          <TouchableOpacity
+            key={value}
+            onPress={() => setWidthType(value)}
+            style={[styles.button, widthType === value && styles.selected]}>
+            <Text
+              style={[
+                styles.buttonLabel,
+                widthType === value && styles.selectedLabel,
+              ]}>
+              {value}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+      <View style={styles.row}>
+        <Text style={styles.label}>height </Text>
+        {heightValues.map(value => (
+          <TouchableOpacity
+            key={value}
+            onPress={() => setHeightType(value)}
+            style={[styles.button, heightType === value && styles.selected]}>
+            <Text
+              style={[
+                styles.buttonLabel,
+                heightType === value && styles.selectedLabel,
+              ]}>
+              {value}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+      {children}
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    padding: 8,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginRight: 10,
+    marginBottom: 10,
+  },
+  selected: {
+    backgroundColor: 'coral',
+    shadowOpacity: 0,
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default WidthHeightBasics;
+```
+
+</TabItem>
+</Tabs>
+
+## Position
+
+The `position` type of an element defines how it is positioned relative to either itself, its parent, or its [containing block](./flexbox.md#the-containing-block).
+
+- `relative` (**default value**) By default, an element is positioned relatively. This means an element is positioned according to the normal flow of the layout, and then offset relative to that position based on the values of `top`, `right`, `bottom`, and `left`. The offset does not affect the position of any sibling or parent elements.
+
+- `absolute` When positioned absolutely, an element doesn't take part in the normal layout flow. It is instead laid out independent of its siblings. The position is determined based on the `top`, `right`, `bottom`, and `left` values. These values will position the element relative to its containing block.
+
+- `static` When positioned statically, an element is positioned according to the normal flow of layout, and will ignore the `top`, `right`, `bottom`, and `left` values. This `position` will also cause the element to not form a containing block for absolute descendants, unless some other superceding style prop is present (e.g. `transform`). This allows `absolute` elements to be positioned to something that is not their parent. Note that **`static` is only available on the New Architecture**.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Position&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const PositionLayout = () => {
+  const [position, setPosition] = useState('relative');
+
+  return (
+    <PreviewLayout
+      label="position"
+      selectedValue={position}
+      values={['relative', 'absolute', 'static']}
+      setSelectedValue={setPosition}>
+      <View
+        style={[
+          styles.box,
+          {
+            top: 25,
+            left: 25,
+            position,
+            backgroundColor: 'powderblue',
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.box,
+          {
+            top: 50,
+            left: 50,
+            position,
+            backgroundColor: 'skyblue',
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.box,
+          {
+            top: 75,
+            left: 75,
+            position,
+            backgroundColor: 'steelblue',
+          },
+        ]}
+      />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={styles.container}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default PositionLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Position&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const PositionLayout = () => {
+  const [position, setPosition] = useState<'relative' | 'absolute' | 'static'>(
+    'relative',
+  );
+
+  return (
+    <PreviewLayout
+      label="position"
+      selectedValue={position}
+      values={['relative', 'absolute', 'static']}
+      setSelectedValue={setPosition}>
+      <View
+        style={[
+          styles.box,
+          {
+            top: 25,
+            left: 25,
+            position,
+            backgroundColor: 'powderblue',
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.box,
+          {
+            top: 50,
+            left: 50,
+            position,
+            backgroundColor: 'skyblue',
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.box,
+          {
+            top: 75,
+            left: 75,
+            position,
+            backgroundColor: 'steelblue',
+          },
+        ]}
+      />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: Array<'relative' | 'absolute' | 'static'>;
+  selectedValue: string;
+  setSelectedValue: (value: 'relative' | 'absolute' | 'static') => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={styles.container}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default PositionLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## The Containing Block
+
+The containing block of an element is an ancestor element which controls its position and size.
+The way containing blocks work in React Native is very similar to [how they work on the web](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block), with some simplifications due to the lack of some web features.
+
+The `top`, `right`, `bottom`, and `left` values of an absolutely positioned element will be
+relative to its containing block.
+
+Percentage lengths (e.g.: `width: '50%'` or `padding: '10%'`) applied to absolutely positioned elements will be calculated relatively to the size of its containing block. For example, if the containing block is 100 points wide, then `width: 50%` on an absolutely positioned element will cause it to be 50 points wide.
+
+The following list will help you determine the containing block of any given element:
+
+- If that element has a `position` type of `relative` or `static`, then its containing block is its parent.
+- If that element has a `position` type of `absolute`, then its containing block is the nearest ancestor in which one of the following is true:
+  - It has a `position` type other than `static`
+  - It has a `transform`
+
+## Going Deeper
+
+Check out the interactive [yoga playground](https://www.yogalayout.dev/playground) that you can use to get a better understanding of flexbox.
+
+We've covered the basics, but there are many other styles you may need for layouts. The full list of props that control layout is documented [here](./layout-props.md).
+
+Additionally, you can see some examples from [Wix Engineers](https://medium.com/wix-engineering/the-full-react-native-layout-cheat-sheet-a4147802405c).
diff --git a/website/versioned_docs/version-0.81/handling-text-input.md b/website/versioned_docs/version-0.81/handling-text-input.md
index 2345d089c7e..32b778af713 100644
--- a/website/versioned_docs/version-0.81/handling-text-input.md
+++ b/website/versioned_docs/version-0.81/handling-text-input.md
@@ -1,46 +1,46 @@
----
-id: handling-text-input
-title: Handling Text Input
----
-
-[`TextInput`](textinput#content) is a [Core Component](intro-react-native-components) that allows the user to enter text. It has an `onChangeText` prop that takes a function to be called every time the text changed, and an `onSubmitEditing` prop that takes a function to be called when the text is submitted.
-
-For example, let's say that as the user types, you're translating their words into a different language. In this new language, every single word is written the same way: 🍕. So the sentence "Hello there Bob" would be translated as "🍕 🍕 🍕".
-
-```SnackPlayer name=Handling%20Text%20Input
-import React, {useState} from 'react';
-import {Text, TextInput, View} from 'react-native';
-
-const PizzaTranslator = () => {
-  const [text, setText] = useState('');
-  return (
-    <View style={{flex: 1, justifyContent: 'center'}}>
-      <TextInput
-        placeholder="Type here to translate!"
-        onChangeText={newText => setText(newText)}
-        defaultValue={text}
-        style={{
-          height: 40,
-          padding: 5,
-          marginHorizontal: 8,
-          borderWidth: 1,
-        }}
-      />
-      <Text style={{padding: 10, fontSize: 42}}>
-        {text
-          .split(' ')
-          .map(word => word && '🍕')
-          .join(' ')}
-      </Text>
-    </View>
-  );
-};
-
-export default PizzaTranslator;
-```
-
-In this example, we store `text` in the state, because it changes over time.
-
-There are a lot more things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the [React docs on controlled components](https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable), or the [reference docs for TextInput](textinput.md).
-
-Text input is one of the ways the user interacts with the app. Next, let's look at another type of input and [learn how to handle touches](handling-touches.md).
+---
+id: handling-text-input
+title: Handling Text Input
+---
+
+[`TextInput`](textinput#content) is a [Core Component](intro-react-native-components) that allows the user to enter text. It has an `onChangeText` prop that takes a function to be called every time the text changed, and an `onSubmitEditing` prop that takes a function to be called when the text is submitted.
+
+For example, let's say that as the user types, you're translating their words into a different language. In this new language, every single word is written the same way: 🍕. So the sentence "Hello there Bob" would be translated as "🍕 🍕 🍕".
+
+```SnackPlayer name=Handling%20Text%20Input
+import {useState} from 'react';
+import {Text, TextInput, View} from 'react-native';
+
+const PizzaTranslator = () => {
+  const [text, setText] = useState('');
+  return (
+    <View style={{flex: 1, justifyContent: 'center'}}>
+      <TextInput
+        placeholder="Type here to translate!"
+        onChangeText={newText => setText(newText)}
+        defaultValue={text}
+        style={{
+          height: 40,
+          padding: 5,
+          marginHorizontal: 8,
+          borderWidth: 1,
+        }}
+      />
+      <Text style={{padding: 10, fontSize: 42}}>
+        {text
+          .split(' ')
+          .map(word => word && '🍕')
+          .join(' ')}
+      </Text>
+    </View>
+  );
+};
+
+export default PizzaTranslator;
+```
+
+In this example, we store `text` in the state, because it changes over time.
+
+There are a lot more things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the [React docs on controlled components](https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable), or the [reference docs for TextInput](textinput.md).
+
+Text input is one of the ways the user interacts with the app. Next, let's look at another type of input and [learn how to handle touches](handling-touches.md).
diff --git a/website/versioned_docs/version-0.81/handling-touches.md b/website/versioned_docs/version-0.81/handling-touches.md
index 612287f6e10..b9604b393c0 100644
--- a/website/versioned_docs/version-0.81/handling-touches.md
+++ b/website/versioned_docs/version-0.81/handling-touches.md
@@ -25,7 +25,6 @@ This will render a blue label on iOS, and a blue rounded rectangle with light te
 Go ahead and play around with the `Button` component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right and then clicking on "Tap to Play" to preview the app.
 
 ```SnackPlayer name=Button%20Basics
-import React from 'react';
 import {Alert, Button, StyleSheet, View} from 'react-native';
 
 const ButtonBasics = () => {
@@ -86,7 +85,6 @@ In some cases, you may want to detect when a user presses and holds a view for a
 Let's see all of these in action:
 
 ```SnackPlayer name=Touchables
-import React from 'react';
 import {
   Alert,
   Platform,
diff --git a/website/versioned_docs/version-0.81/height-and-width.md b/website/versioned_docs/version-0.81/height-and-width.md
index 485667831cd..b768626716e 100644
--- a/website/versioned_docs/version-0.81/height-and-width.md
+++ b/website/versioned_docs/version-0.81/height-and-width.md
@@ -10,7 +10,6 @@ A component's height and width determine its size on the screen.
 The general way to set the dimensions of a component is by adding a fixed `width` and `height` to style. All dimensions in React Native are unitless, and represent density-independent pixels.
 
 ```SnackPlayer name=Height%20and%20Width
-import React from 'react';
 import {View} from 'react-native';
 
 const FixedDimensionsBasics = () => {
@@ -59,7 +58,6 @@ A component can only expand to fill available space if its parent has dimensions
 :::
 
 ```SnackPlayer name=Flex%20Dimensions
-import React from 'react';
 import {View} from 'react-native';
 
 const FlexDimensionsBasics = () => {
@@ -85,7 +83,6 @@ After you can control a component's size, the next step is to [learn how to lay
 If you want to fill a certain portion of the screen, but you _don't_ want to use the `flex` layout, you _can_ use **percentage values** in the component's style. Similar to flex dimensions, percentage dimensions require parent with a defined size.
 
 ```SnackPlayer name=Percentage%20Dimensions
-import React from 'react';
 import {View} from 'react-native';
 
 const PercentageDimensionsBasics = () => {
diff --git a/website/versioned_docs/version-0.81/i18nmanager.md b/website/versioned_docs/version-0.81/i18nmanager.md
index 66841b845d4..5e79f72174e 100644
--- a/website/versioned_docs/version-0.81/i18nmanager.md
+++ b/website/versioned_docs/version-0.81/i18nmanager.md
@@ -1,165 +1,164 @@
----
-id: i18nmanager
-title: I18nManager
----
-
-# I18nManager
-
-The `I18nManager` module provides utilities for managing Right-to-Left (RTL) layout support for languages like Arabic, Hebrew, and others. It provides methods to control RTL behavior and check the current layout direction.
-
-## Examples
-
-### Change positions and animations based on RTL
-
-If you absolutely position elements to align with other flexbox elements, they may not align in RTL languages. Using `isRTL` can be used to adjust alignment or animations.
-
-```SnackPlayer name=I18nManager%20Change%20Absolute%20Positions%20And%20Animations
-import React from 'react';
-import {I18nManager, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  // Change to `true` to see the effect in a non-RTL language
-  const isRTL = I18nManager.isRTL;
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView>
-        <View style={{ position: 'absolute', left: isRTL ? undefined : 0, right: isRTL ? 0 : undefined }}>
-          {isRTL ? (
-            <Text>Back &gt;</Text>
-          ) : (
-            <Text>&lt; Back</Text>
-          )}
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-export default App;
-```
-
-### During Development
-
-```SnackPlayer name=I18nManager%20During%20Development
-import React, {useState} from 'react';
-import {Alert, I18nManager, StyleSheet, Switch, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [rtl, setRTL] = useState(I18nManager.isRTL);
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView>
-        <View style={styles.container}>
-          <View style={styles.forceRtl}>
-            <Text>Force RTL in Development:</Text>
-            <Switch value={rtl} onValueChange={(value) => {
-              setRTL(value);
-              I18nManager.forceRTL(value);
-              Alert.alert(
-                'Reload this page',
-                'Please reload this page to change the UI direction! ' +
-                  'All examples in this app will be affected. ' +
-                  'Check them out to see what they look like in RTL layout.',
-              );
-            }} />
-          </View>
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    padding: 20,
-  },
-  forceRtl: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-# Reference
-
-## Properties
-
-### `isRTL`
-
-```typescript
-static isRTL: boolean;
-```
-
-A boolean value indicating whether the app is currently in RTL layout mode.
-
-The value of `isRTL` is determined by the following logic:
-
-- If `forceRTL` is `true`, `isRTL` returns `true`
-- If `allowRTL` is `false`, `isRTL` returns `false`
-- Otherwise, `isRTL` will be `true` given the following:
-  - **iOS:**
-    - The user-preferred language on the device is an RTL language
-    - The application-defined localizations include the user-chosen language (as defined in the Xcode project file (`knownRegions = (...)`)
-  - **Android:**
-    - The user-preferred language on the device is an RTL language
-    - The application's `AndroidManifest.xml` defines `android:supportsRTL="true"` on the `<application>` element
-
-### `doLeftAndRightSwapInRTL`
-
-```typescript
-static doLeftAndRightSwapInRTL: boolean;
-```
-
-A boolean value indicating whether left and right style properties should be automatically swapped when in RTL mode. When enabled, left becomes right and right becomes left in RTL layouts.
-
-## Methods
-
-### `allowRTL()`
-
-```typescript
-static allowRTL: (allowRTL: boolean) => void;
-```
-
-Enables or disables RTL layout support for the application.
-
-**Parameters:**
-
-- `allowRTL` (boolean): Whether to allow RTL layout
-
-**Important Notes:**
-
-- Changes take effect on the next application start, not immediately
-- This setting is persisted across app restarts
-
-### `forceRTL()`
-
-```typescript
-static forceRTL: (forced: boolean) => void;
-```
-
-Forces the app to use RTL layout regardless of the device language settings. This is primarily useful for testing RTL layouts during development.
-
-Avoid forcing RTL in production apps as it requires a full app restart to take effect, which makes for a poor user-experience.
-
-**Parameters:**
-
-- `forced` (boolean): Whether to force RTL layout
-
-**Important Notes:**
-
-- Changes take full effect on the next application start, not immediately
-- The setting is persisted across app restarts
-- Only meant for development and testing. In production, you should either disallow RTL fully or handle it appropriately (see `isRTL`)
-
-### `swapLeftAndRightInRTL()`
-
-```typescript
-static swapLeftAndRightInRTL: (swapLeftAndRight: boolean) => void;
-```
-
-Swap left and right style properties in RTL mode. When enabled, left becomes right and right becomes left in RTL layouts. Does not affect the value of `isRTL`.
+---
+id: i18nmanager
+title: I18nManager
+---
+
+# I18nManager
+
+The `I18nManager` module provides utilities for managing Right-to-Left (RTL) layout support for languages like Arabic, Hebrew, and others. It provides methods to control RTL behavior and check the current layout direction.
+
+## Examples
+
+### Change positions and animations based on RTL
+
+If you absolutely position elements to align with other flexbox elements, they may not align in RTL languages. Using `isRTL` can be used to adjust alignment or animations.
+
+```SnackPlayer name=I18nManager%20Change%20Absolute%20Positions%20And%20Animations
+import {I18nManager, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  // Change to `true` to see the effect in a non-RTL language
+  const isRTL = I18nManager.isRTL;
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView>
+        <View style={{ position: 'absolute', left: isRTL ? undefined : 0, right: isRTL ? 0 : undefined }}>
+          {isRTL ? (
+            <Text>Back &gt;</Text>
+          ) : (
+            <Text>&lt; Back</Text>
+          )}
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+export default App;
+```
+
+### During Development
+
+```SnackPlayer name=I18nManager%20During%20Development
+import {useState} from 'react';
+import {Alert, I18nManager, StyleSheet, Switch, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [rtl, setRTL] = useState(I18nManager.isRTL);
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView>
+        <View style={styles.container}>
+          <View style={styles.forceRtl}>
+            <Text>Force RTL in Development:</Text>
+            <Switch value={rtl} onValueChange={(value) => {
+              setRTL(value);
+              I18nManager.forceRTL(value);
+              Alert.alert(
+                'Reload this page',
+                'Please reload this page to change the UI direction! ' +
+                  'All examples in this app will be affected. ' +
+                  'Check them out to see what they look like in RTL layout.',
+              );
+            }} />
+          </View>
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 20,
+  },
+  forceRtl: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+# Reference
+
+## Properties
+
+### `isRTL`
+
+```typescript
+static isRTL: boolean;
+```
+
+A boolean value indicating whether the app is currently in RTL layout mode.
+
+The value of `isRTL` is determined by the following logic:
+
+- If `forceRTL` is `true`, `isRTL` returns `true`
+- If `allowRTL` is `false`, `isRTL` returns `false`
+- Otherwise, `isRTL` will be `true` given the following:
+  - **iOS:**
+    - The user-preferred language on the device is an RTL language
+    - The application-defined localizations include the user-chosen language (as defined in the Xcode project file (`knownRegions = (...)`)
+  - **Android:**
+    - The user-preferred language on the device is an RTL language
+    - The application's `AndroidManifest.xml` defines `android:supportsRTL="true"` on the `<application>` element
+
+### `doLeftAndRightSwapInRTL`
+
+```typescript
+static doLeftAndRightSwapInRTL: boolean;
+```
+
+A boolean value indicating whether left and right style properties should be automatically swapped when in RTL mode. When enabled, left becomes right and right becomes left in RTL layouts.
+
+## Methods
+
+### `allowRTL()`
+
+```typescript
+static allowRTL: (allowRTL: boolean) => void;
+```
+
+Enables or disables RTL layout support for the application.
+
+**Parameters:**
+
+- `allowRTL` (boolean): Whether to allow RTL layout
+
+**Important Notes:**
+
+- Changes take effect on the next application start, not immediately
+- This setting is persisted across app restarts
+
+### `forceRTL()`
+
+```typescript
+static forceRTL: (forced: boolean) => void;
+```
+
+Forces the app to use RTL layout regardless of the device language settings. This is primarily useful for testing RTL layouts during development.
+
+Avoid forcing RTL in production apps as it requires a full app restart to take effect, which makes for a poor user-experience.
+
+**Parameters:**
+
+- `forced` (boolean): Whether to force RTL layout
+
+**Important Notes:**
+
+- Changes take full effect on the next application start, not immediately
+- The setting is persisted across app restarts
+- Only meant for development and testing. In production, you should either disallow RTL fully or handle it appropriately (see `isRTL`)
+
+### `swapLeftAndRightInRTL()`
+
+```typescript
+static swapLeftAndRightInRTL: (swapLeftAndRight: boolean) => void;
+```
+
+Swap left and right style properties in RTL mode. When enabled, left becomes right and right becomes left in RTL layouts. Does not affect the value of `isRTL`.
diff --git a/website/versioned_docs/version-0.81/image-style-props.md b/website/versioned_docs/version-0.81/image-style-props.md
index efa0dc725e1..cbf19f996f9 100644
--- a/website/versioned_docs/version-0.81/image-style-props.md
+++ b/website/versioned_docs/version-0.81/image-style-props.md
@@ -8,7 +8,6 @@ title: Image Style Props
 ### Image Resize Mode
 
 ```SnackPlayer name=Image%20Resize%20Modes%20Example
-import React from 'react';
 import {View, Image, Text, StyleSheet, ScrollView} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -82,7 +81,6 @@ export default DisplayAnImageWithStyle;
 ### Image Border
 
 ```SnackPlayer name=Style%20BorderWidth%20and%20BorderColor%20Example
-import React from 'react';
 import {Image, StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -118,7 +116,6 @@ export default DisplayAnImageWithStyle;
 ### Image Border Radius
 
 ```SnackPlayer name=Style%20Border%20Radius%20Example
-import React from 'react';
 import {View, Image, StyleSheet, Text, ScrollView} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -184,7 +181,6 @@ export default DisplayAnImageWithStyle;
 ### Image Tint
 
 ```SnackPlayer name=Style%20tintColor%20Function%20Component
-import React from 'react';
 import {Image, StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.81/image.md b/website/versioned_docs/version-0.81/image.md
index 71094b8af79..721b717e555 100644
--- a/website/versioned_docs/version-0.81/image.md
+++ b/website/versioned_docs/version-0.81/image.md
@@ -12,7 +12,6 @@ This example shows fetching and displaying an image from local storage as well a
 ## Examples
 
 ```SnackPlayer name=Image%20Example
-import React from 'react';
 import {Image, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -59,7 +58,6 @@ export default DisplayAnImage;
 You can also add `style` to an image:
 
 ```SnackPlayer name=Styled%20Image%20Example
-import React from 'react';
 import {Image, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.81/imagebackground.md b/website/versioned_docs/version-0.81/imagebackground.md
index eba3b41b683..91dbbf40b34 100644
--- a/website/versioned_docs/version-0.81/imagebackground.md
+++ b/website/versioned_docs/version-0.81/imagebackground.md
@@ -12,7 +12,6 @@ Note that you must specify some width and height style attributes.
 ## Example
 
 ```SnackPlayer name=ImageBackground
-import React from 'react';
 import {ImageBackground, StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.81/improvingux.md b/website/versioned_docs/version-0.81/improvingux.md
index 462f5f0ce1c..96bd508791f 100644
--- a/website/versioned_docs/version-0.81/improvingux.md
+++ b/website/versioned_docs/version-0.81/improvingux.md
@@ -1,596 +1,594 @@
----
-id: improvingux
-title: Improving User Experience
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-## Configure text inputs
-
-Entering text on touch phone is a challenge - small screen, software keyboard. But based on what kind of data you need, you can make it easier by properly configuring the text inputs:
-
-- Focus the first field automatically
-- Use placeholder text as an example of expected data format
-- Enable or disable autocapitalization and autocorrect
-- Choose keyboard type (e.g. email, numeric)
-- Make sure the return button focuses the next field or submits the form
-
-Check out [`TextInput` docs](textinput.md) for more configuration options.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=TextInput%20form%20example&ext=js
-import React, {useState, useRef} from 'react';
-import {
-  Alert,
-  Text,
-  StatusBar,
-  TextInput,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const App = () => {
-  const emailInput = useRef(null);
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-
-  const submit = () => {
-    Alert.alert(
-      `Welcome, ${name}! Confirmation email has been sent to ${email}`,
-    );
-  };
-
-  return (
-    <View style={styles.container}>
-      <StatusBar barStyle="light-content" />
-      <View style={styles.header}>
-        <Text style={styles.description}>
-          This demo shows how using available TextInput customizations can make
-          forms much easier to use. Try completing the form and notice that
-          different fields have specific optimizations and the return key
-          changes from focusing next input to submitting the form.
-        </Text>
-      </View>
-      <TextInput
-        style={styles.input}
-        value={name}
-        onChangeText={text => setName(text)}
-        placeholder="Full Name"
-        autoFocus={true}
-        autoCapitalize="words"
-        autoCorrect={true}
-        keyboardType="default"
-        returnKeyType="next"
-        onSubmitEditing={() => emailInput.current.focus()}
-        blurOnSubmit={false}
-      />
-      <TextInput
-        style={styles.input}
-        value={email}
-        onChangeText={text => setEmail(text)}
-        ref={emailInput}
-        placeholder="email@example.com"
-        autoCapitalize="none"
-        autoCorrect={false}
-        keyboardType="email-address"
-        returnKeyType="send"
-        onSubmitEditing={submit}
-        blurOnSubmit={true}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    paddingTop: 64,
-    padding: 20,
-    backgroundColor: '#282c34',
-  },
-  description: {
-    fontSize: 14,
-    color: 'white',
-  },
-  input: {
-    margin: 20,
-    marginBottom: 0,
-    height: 34,
-    paddingHorizontal: 10,
-    borderRadius: 4,
-    borderColor: '#ccc',
-    borderWidth: 1,
-    fontSize: 16,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=TextInput%20form%20example&ext=tsx
-import React, {useState, useRef} from 'react';
-import {
-  Alert,
-  Text,
-  StatusBar,
-  TextInput,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const App = () => {
-  const emailInput = useRef<TextInput>(null);
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-
-  const submit = () => {
-    Alert.alert(
-      `Welcome, ${name}! Confirmation email has been sent to ${email}`,
-    );
-  };
-
-  return (
-    <View style={styles.container}>
-      <StatusBar barStyle="light-content" />
-      <View style={styles.header}>
-        <Text style={styles.description}>
-          This demo shows how using available TextInput customizations can make
-          forms much easier to use. Try completing the form and notice that
-          different fields have specific optimizations and the return key
-          changes from focusing next input to submitting the form.
-        </Text>
-      </View>
-      <TextInput
-        style={styles.input}
-        value={name}
-        onChangeText={text => setName(text)}
-        placeholder="Full Name"
-        autoFocus={true}
-        autoCapitalize="words"
-        autoCorrect={true}
-        keyboardType="default"
-        returnKeyType="next"
-        onSubmitEditing={() => emailInput.current?.focus()}
-        blurOnSubmit={false}
-      />
-      <TextInput
-        style={styles.input}
-        value={email}
-        onChangeText={text => setEmail(text)}
-        ref={emailInput}
-        placeholder="email@example.com"
-        autoCapitalize="none"
-        autoCorrect={false}
-        keyboardType="email-address"
-        returnKeyType="send"
-        onSubmitEditing={submit}
-        blurOnSubmit={true}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    paddingTop: 64,
-    padding: 20,
-    backgroundColor: '#282c34',
-  },
-  description: {
-    fontSize: 14,
-    color: 'white',
-  },
-  input: {
-    margin: 20,
-    marginBottom: 0,
-    height: 34,
-    paddingHorizontal: 10,
-    borderRadius: 4,
-    borderColor: '#ccc',
-    borderWidth: 1,
-    fontSize: 16,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-## Manage layout when keyboard is visible
-
-Software keyboard takes almost half of the screen. If you have interactive elements that can get covered by the keyboard, make sure they are still accessible by using the [`KeyboardAvoidingView` component](keyboardavoidingview.md).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=KeyboardAvoidingView%20example&ext=js
-import React, {useState, useRef} from 'react';
-import {
-  Alert,
-  Text,
-  Button,
-  StatusBar,
-  TextInput,
-  KeyboardAvoidingView,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const App = () => {
-  const emailInput = useRef(null);
-  const [email, setEmail] = useState('');
-
-  const submit = () => {
-    emailInput.current.blur();
-    Alert.alert(`Confirmation email has been sent to ${email}`);
-  };
-
-  return (
-    <View style={styles.container}>
-      <StatusBar barStyle="light-content" />
-      <View style={styles.header}>
-        <Text style={styles.description}>
-          This demo shows how to avoid covering important UI elements with the
-          software keyboard. Focus the email input below and notice that the
-          Sign Up button and the text adjusted positions to make sure they are
-          not hidden under the keyboard.
-        </Text>
-      </View>
-      <KeyboardAvoidingView behavior="padding" style={styles.form}>
-        <TextInput
-          style={styles.input}
-          value={email}
-          onChangeText={text => setEmail(text)}
-          ref={emailInput}
-          placeholder="email@example.com"
-          autoCapitalize="none"
-          autoCorrect={false}
-          keyboardType="email-address"
-          returnKeyType="send"
-          onSubmitEditing={submit}
-          blurOnSubmit={true}
-        />
-        <View>
-          <Button title="Sign Up" onPress={submit} />
-          <Text style={styles.legal}>Some important legal fine print here</Text>
-        </View>
-      </KeyboardAvoidingView>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    paddingTop: 64,
-    padding: 20,
-    backgroundColor: '#282c34',
-  },
-  description: {
-    fontSize: 14,
-    color: 'white',
-  },
-  input: {
-    margin: 20,
-    marginBottom: 0,
-    height: 34,
-    paddingHorizontal: 10,
-    borderRadius: 4,
-    borderColor: '#ccc',
-    borderWidth: 1,
-    fontSize: 16,
-  },
-  legal: {
-    margin: 10,
-    color: '#333',
-    fontSize: 12,
-    textAlign: 'center',
-  },
-  form: {
-    flex: 1,
-    justifyContent: 'space-between',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=KeyboardAvoidingView%20example&ext=tsx
-import React, {useState, useRef} from 'react';
-import {
-  Alert,
-  Text,
-  Button,
-  StatusBar,
-  TextInput,
-  KeyboardAvoidingView,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const App = () => {
-  const emailInput = useRef<TextInput>(null);
-  const [email, setEmail] = useState('');
-
-  const submit = () => {
-    emailInput.current?.blur();
-    Alert.alert(`Confirmation email has been sent to ${email}`);
-  };
-
-  return (
-    <View style={styles.container}>
-      <StatusBar barStyle="light-content" />
-      <View style={styles.header}>
-        <Text style={styles.description}>
-          This demo shows how to avoid covering important UI elements with the
-          software keyboard. Focus the email input below and notice that the
-          Sign Up button and the text adjusted positions to make sure they are
-          not hidden under the keyboard.
-        </Text>
-      </View>
-      <KeyboardAvoidingView behavior="padding" style={styles.form}>
-        <TextInput
-          style={styles.input}
-          value={email}
-          onChangeText={text => setEmail(text)}
-          ref={emailInput}
-          placeholder="email@example.com"
-          autoCapitalize="none"
-          autoCorrect={false}
-          keyboardType="email-address"
-          returnKeyType="send"
-          onSubmitEditing={submit}
-          blurOnSubmit={true}
-        />
-        <View>
-          <Button title="Sign Up" onPress={submit} />
-          <Text style={styles.legal}>Some important legal fine print here</Text>
-        </View>
-      </KeyboardAvoidingView>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    paddingTop: 64,
-    padding: 20,
-    backgroundColor: '#282c34',
-  },
-  description: {
-    fontSize: 14,
-    color: 'white',
-  },
-  input: {
-    margin: 20,
-    marginBottom: 0,
-    height: 34,
-    paddingHorizontal: 10,
-    borderRadius: 4,
-    borderColor: '#ccc',
-    borderWidth: 1,
-    fontSize: 16,
-  },
-  legal: {
-    margin: 10,
-    color: '#333',
-    fontSize: 12,
-    textAlign: 'center',
-  },
-  form: {
-    flex: 1,
-    justifyContent: 'space-between',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-## Make tappable areas larger
-
-On mobile phones it's hard to be very precise when pressing buttons. Make sure all interactive elements are 44x44 or larger. One way to do this is to leave enough space for the element, `padding`, `minWidth` and `minHeight` style values can be useful for that. Alternatively, you can use [`hitSlop` prop](touchablewithoutfeedback.md#hitslop) to increase interactive area without affecting the layout. Here's a demo:
-
-```SnackPlayer name=HitSlop%20example
-import React from 'react';
-import {
-  Text,
-  StatusBar,
-  TouchableOpacity,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <StatusBar barStyle="light-content" />
-      <View style={styles.header}>
-        <Text style={styles.description}>
-          This demo shows how using hitSlop can make interactive elements much
-          easier to tap without changing their layout and size. Try pressing
-          each button quickly multiple times and notice which one is easier to
-          hit.
-        </Text>
-      </View>
-      <View style={styles.content}>
-        <TouchableOpacity>
-          <Text style={styles.label}>Without hitSlop</Text>
-        </TouchableOpacity>
-        <View style={styles.separator} />
-        <View style={styles.preview}>
-          <TouchableOpacity
-            hitSlop={{top: 20, left: 20, bottom: 20, right: 20}}>
-            <Text style={styles.label}>With hitSlop</Text>
-          </TouchableOpacity>
-        </View>
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    paddingTop: 64,
-    padding: 20,
-    backgroundColor: '#282c34',
-  },
-  description: {
-    fontSize: 14,
-    color: 'white',
-  },
-  content: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  label: {
-    fontSize: 18,
-    color: '#336699',
-    textAlign: 'center',
-    borderColor: '#ddd',
-    borderWidth: 1,
-  },
-  separator: {
-    height: 50,
-  },
-  preview: {
-    padding: 20,
-    backgroundColor: '#f6f6f6',
-  },
-});
-
-export default App;
-```
-
-## Use Android Ripple
-
-Android API 21+ uses the material design ripple to provide user with feedback when they touch an interactable area on the screen. React Native exposes this through the [`TouchableNativeFeedback` component](touchablenativefeedback.md). Using this touchable effect instead of opacity or highlight will often make your app feel much more fitting on the platform. That said, you need to be careful when using it because it doesn't work on iOS or on Android API < 21, so you will need to fallback to using one of the other Touchable components on iOS. You can use a library like [react-native-platform-touchable](https://github.com/react-community/react-native-platform-touchable) to handle the platform differences for you.
-
-```SnackPlayer name=Android%20Ripple%20example&supportedPlatforms=android
-import React from 'react';
-import {
-  TouchableNativeFeedback,
-  TouchableOpacity,
-  TouchableHighlight,
-  Platform,
-  Text,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const SUPPORTS_NATIVE_FEEDBACK =
-  Platform.OS === 'android' && Platform.Version >= 21;
-
-const noop = () => {};
-const defaultHitSlop = {top: 15, bottom: 15, right: 15, left: 15};
-
-const ButtonsWithNativeFeedback = () => (
-  <View style={styles.buttonContainer}>
-    <TouchableNativeFeedback
-      onPress={noop}
-      background={TouchableNativeFeedback.Ripple('#06bcee', false)}
-      hitSlop={defaultHitSlop}>
-      <View style={styles.button}>
-        <Text style={styles.text}>This is a ripple respecting borders</Text>
-      </View>
-    </TouchableNativeFeedback>
-    <TouchableNativeFeedback
-      onPress={noop}
-      background={TouchableNativeFeedback.Ripple('#06bcee', true)}
-      hitSlop={defaultHitSlop}>
-      <View style={styles.button}>
-        <Text style={styles.text}>
-          This is ripple without borders, this is more useful for icons, eg: in
-          tab bar
-        </Text>
-      </View>
-    </TouchableNativeFeedback>
-  </View>
-);
-
-const Buttons = () => (
-  <View style={styles.buttonContainer}>
-    <TouchableOpacity
-      style={styles.button}
-      onPress={noop}
-      hitSlop={defaultHitSlop}>
-      <Text style={styles.text}>This is opacity</Text>
-    </TouchableOpacity>
-    <TouchableHighlight
-      style={styles.button}
-      onPress={noop}
-      hitSlop={defaultHitSlop}
-      underlayColor="#06bcee">
-      <Text style={styles.text}>This is highlight</Text>
-    </TouchableHighlight>
-  </View>
-);
-
-const App = () => (
-  <View style={styles.container}>
-    {SUPPORTS_NATIVE_FEEDBACK ? <ButtonsWithNativeFeedback /> : <Buttons />}
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingTop: 64,
-    backgroundColor: '#fff',
-  },
-  buttonContainer: {
-    margin: 24,
-  },
-  text: {
-    fontSize: 20,
-    color: '#fff',
-    fontWeight: 'bold',
-  },
-  button: {
-    padding: 25,
-    borderRadius: 5,
-    backgroundColor: '#000',
-    marginBottom: 30,
-  },
-});
-
-export default App;
-```
-
-## Screen orientation lock
-
-Multiple screen orientations should work fine by default unless you're using `Dimensions` API and don't handle orientation changes. If you don't want to support multiple screen orientations, you can lock the screen orientation to either portrait or landscape.
-
-On iOS, in the General tab and Deployment Info section of Xcode enable the Device Orientation you want to support (ensure you have selected iPhone from the Devices menu when making the changes). For Android, open the AndroidManifest.xml file and within the activity element add `'android:screenOrientation="portrait"'` to lock to portrait or `'android:screenOrientation="landscape"'` to lock to landscape.
-
-# Learn more
-
-[Material Design](https://material.io/) and [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines) are great resources for learning more about designing for mobile platforms.
+---
+id: improvingux
+title: Improving User Experience
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+## Configure text inputs
+
+Entering text on touch phone is a challenge - small screen, software keyboard. But based on what kind of data you need, you can make it easier by properly configuring the text inputs:
+
+- Focus the first field automatically
+- Use placeholder text as an example of expected data format
+- Enable or disable autocapitalization and autocorrect
+- Choose keyboard type (e.g. email, numeric)
+- Make sure the return button focuses the next field or submits the form
+
+Check out [`TextInput` docs](textinput.md) for more configuration options.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=TextInput%20form%20example&ext=js
+import {useState, useRef} from 'react';
+import {
+  Alert,
+  Text,
+  StatusBar,
+  TextInput,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const App = () => {
+  const emailInput = useRef(null);
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+
+  const submit = () => {
+    Alert.alert(
+      `Welcome, ${name}! Confirmation email has been sent to ${email}`,
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="light-content" />
+      <View style={styles.header}>
+        <Text style={styles.description}>
+          This demo shows how using available TextInput customizations can make
+          forms much easier to use. Try completing the form and notice that
+          different fields have specific optimizations and the return key
+          changes from focusing next input to submitting the form.
+        </Text>
+      </View>
+      <TextInput
+        style={styles.input}
+        value={name}
+        onChangeText={text => setName(text)}
+        placeholder="Full Name"
+        autoFocus={true}
+        autoCapitalize="words"
+        autoCorrect={true}
+        keyboardType="default"
+        returnKeyType="next"
+        onSubmitEditing={() => emailInput.current.focus()}
+        blurOnSubmit={false}
+      />
+      <TextInput
+        style={styles.input}
+        value={email}
+        onChangeText={text => setEmail(text)}
+        ref={emailInput}
+        placeholder="email@example.com"
+        autoCapitalize="none"
+        autoCorrect={false}
+        keyboardType="email-address"
+        returnKeyType="send"
+        onSubmitEditing={submit}
+        blurOnSubmit={true}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 64,
+    padding: 20,
+    backgroundColor: '#282c34',
+  },
+  description: {
+    fontSize: 14,
+    color: 'white',
+  },
+  input: {
+    margin: 20,
+    marginBottom: 0,
+    height: 34,
+    paddingHorizontal: 10,
+    borderRadius: 4,
+    borderColor: '#ccc',
+    borderWidth: 1,
+    fontSize: 16,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=TextInput%20form%20example&ext=tsx
+import {useState, useRef} from 'react';
+import {
+  Alert,
+  Text,
+  StatusBar,
+  TextInput,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const App = () => {
+  const emailInput = useRef<TextInput>(null);
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+
+  const submit = () => {
+    Alert.alert(
+      `Welcome, ${name}! Confirmation email has been sent to ${email}`,
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="light-content" />
+      <View style={styles.header}>
+        <Text style={styles.description}>
+          This demo shows how using available TextInput customizations can make
+          forms much easier to use. Try completing the form and notice that
+          different fields have specific optimizations and the return key
+          changes from focusing next input to submitting the form.
+        </Text>
+      </View>
+      <TextInput
+        style={styles.input}
+        value={name}
+        onChangeText={text => setName(text)}
+        placeholder="Full Name"
+        autoFocus={true}
+        autoCapitalize="words"
+        autoCorrect={true}
+        keyboardType="default"
+        returnKeyType="next"
+        onSubmitEditing={() => emailInput.current?.focus()}
+        blurOnSubmit={false}
+      />
+      <TextInput
+        style={styles.input}
+        value={email}
+        onChangeText={text => setEmail(text)}
+        ref={emailInput}
+        placeholder="email@example.com"
+        autoCapitalize="none"
+        autoCorrect={false}
+        keyboardType="email-address"
+        returnKeyType="send"
+        onSubmitEditing={submit}
+        blurOnSubmit={true}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 64,
+    padding: 20,
+    backgroundColor: '#282c34',
+  },
+  description: {
+    fontSize: 14,
+    color: 'white',
+  },
+  input: {
+    margin: 20,
+    marginBottom: 0,
+    height: 34,
+    paddingHorizontal: 10,
+    borderRadius: 4,
+    borderColor: '#ccc',
+    borderWidth: 1,
+    fontSize: 16,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+## Manage layout when keyboard is visible
+
+Software keyboard takes almost half of the screen. If you have interactive elements that can get covered by the keyboard, make sure they are still accessible by using the [`KeyboardAvoidingView` component](keyboardavoidingview.md).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=KeyboardAvoidingView%20example&ext=js
+import {useState, useRef} from 'react';
+import {
+  Alert,
+  Text,
+  Button,
+  StatusBar,
+  TextInput,
+  KeyboardAvoidingView,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const App = () => {
+  const emailInput = useRef(null);
+  const [email, setEmail] = useState('');
+
+  const submit = () => {
+    emailInput.current.blur();
+    Alert.alert(`Confirmation email has been sent to ${email}`);
+  };
+
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="light-content" />
+      <View style={styles.header}>
+        <Text style={styles.description}>
+          This demo shows how to avoid covering important UI elements with the
+          software keyboard. Focus the email input below and notice that the
+          Sign Up button and the text adjusted positions to make sure they are
+          not hidden under the keyboard.
+        </Text>
+      </View>
+      <KeyboardAvoidingView behavior="padding" style={styles.form}>
+        <TextInput
+          style={styles.input}
+          value={email}
+          onChangeText={text => setEmail(text)}
+          ref={emailInput}
+          placeholder="email@example.com"
+          autoCapitalize="none"
+          autoCorrect={false}
+          keyboardType="email-address"
+          returnKeyType="send"
+          onSubmitEditing={submit}
+          blurOnSubmit={true}
+        />
+        <View>
+          <Button title="Sign Up" onPress={submit} />
+          <Text style={styles.legal}>Some important legal fine print here</Text>
+        </View>
+      </KeyboardAvoidingView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 64,
+    padding: 20,
+    backgroundColor: '#282c34',
+  },
+  description: {
+    fontSize: 14,
+    color: 'white',
+  },
+  input: {
+    margin: 20,
+    marginBottom: 0,
+    height: 34,
+    paddingHorizontal: 10,
+    borderRadius: 4,
+    borderColor: '#ccc',
+    borderWidth: 1,
+    fontSize: 16,
+  },
+  legal: {
+    margin: 10,
+    color: '#333',
+    fontSize: 12,
+    textAlign: 'center',
+  },
+  form: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=KeyboardAvoidingView%20example&ext=tsx
+import {useState, useRef} from 'react';
+import {
+  Alert,
+  Text,
+  Button,
+  StatusBar,
+  TextInput,
+  KeyboardAvoidingView,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const App = () => {
+  const emailInput = useRef<TextInput>(null);
+  const [email, setEmail] = useState('');
+
+  const submit = () => {
+    emailInput.current?.blur();
+    Alert.alert(`Confirmation email has been sent to ${email}`);
+  };
+
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="light-content" />
+      <View style={styles.header}>
+        <Text style={styles.description}>
+          This demo shows how to avoid covering important UI elements with the
+          software keyboard. Focus the email input below and notice that the
+          Sign Up button and the text adjusted positions to make sure they are
+          not hidden under the keyboard.
+        </Text>
+      </View>
+      <KeyboardAvoidingView behavior="padding" style={styles.form}>
+        <TextInput
+          style={styles.input}
+          value={email}
+          onChangeText={text => setEmail(text)}
+          ref={emailInput}
+          placeholder="email@example.com"
+          autoCapitalize="none"
+          autoCorrect={false}
+          keyboardType="email-address"
+          returnKeyType="send"
+          onSubmitEditing={submit}
+          blurOnSubmit={true}
+        />
+        <View>
+          <Button title="Sign Up" onPress={submit} />
+          <Text style={styles.legal}>Some important legal fine print here</Text>
+        </View>
+      </KeyboardAvoidingView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 64,
+    padding: 20,
+    backgroundColor: '#282c34',
+  },
+  description: {
+    fontSize: 14,
+    color: 'white',
+  },
+  input: {
+    margin: 20,
+    marginBottom: 0,
+    height: 34,
+    paddingHorizontal: 10,
+    borderRadius: 4,
+    borderColor: '#ccc',
+    borderWidth: 1,
+    fontSize: 16,
+  },
+  legal: {
+    margin: 10,
+    color: '#333',
+    fontSize: 12,
+    textAlign: 'center',
+  },
+  form: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+## Make tappable areas larger
+
+On mobile phones it's hard to be very precise when pressing buttons. Make sure all interactive elements are 44x44 or larger. One way to do this is to leave enough space for the element, `padding`, `minWidth` and `minHeight` style values can be useful for that. Alternatively, you can use [`hitSlop` prop](touchablewithoutfeedback.md#hitslop) to increase interactive area without affecting the layout. Here's a demo:
+
+```SnackPlayer name=HitSlop%20example
+import {
+  Text,
+  StatusBar,
+  TouchableOpacity,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="light-content" />
+      <View style={styles.header}>
+        <Text style={styles.description}>
+          This demo shows how using hitSlop can make interactive elements much
+          easier to tap without changing their layout and size. Try pressing
+          each button quickly multiple times and notice which one is easier to
+          hit.
+        </Text>
+      </View>
+      <View style={styles.content}>
+        <TouchableOpacity>
+          <Text style={styles.label}>Without hitSlop</Text>
+        </TouchableOpacity>
+        <View style={styles.separator} />
+        <View style={styles.preview}>
+          <TouchableOpacity
+            hitSlop={{top: 20, left: 20, bottom: 20, right: 20}}>
+            <Text style={styles.label}>With hitSlop</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 64,
+    padding: 20,
+    backgroundColor: '#282c34',
+  },
+  description: {
+    fontSize: 14,
+    color: 'white',
+  },
+  content: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  label: {
+    fontSize: 18,
+    color: '#336699',
+    textAlign: 'center',
+    borderColor: '#ddd',
+    borderWidth: 1,
+  },
+  separator: {
+    height: 50,
+  },
+  preview: {
+    padding: 20,
+    backgroundColor: '#f6f6f6',
+  },
+});
+
+export default App;
+```
+
+## Use Android Ripple
+
+Android API 21+ uses the material design ripple to provide user with feedback when they touch an interactable area on the screen. React Native exposes this through the [`TouchableNativeFeedback` component](touchablenativefeedback.md). Using this touchable effect instead of opacity or highlight will often make your app feel much more fitting on the platform. That said, you need to be careful when using it because it doesn't work on iOS or on Android API < 21, so you will need to fallback to using one of the other Touchable components on iOS. You can use a library like [react-native-platform-touchable](https://github.com/react-community/react-native-platform-touchable) to handle the platform differences for you.
+
+```SnackPlayer name=Android%20Ripple%20example&supportedPlatforms=android
+import {
+  TouchableNativeFeedback,
+  TouchableOpacity,
+  TouchableHighlight,
+  Platform,
+  Text,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const SUPPORTS_NATIVE_FEEDBACK =
+  Platform.OS === 'android' && Platform.Version >= 21;
+
+const noop = () => {};
+const defaultHitSlop = {top: 15, bottom: 15, right: 15, left: 15};
+
+const ButtonsWithNativeFeedback = () => (
+  <View style={styles.buttonContainer}>
+    <TouchableNativeFeedback
+      onPress={noop}
+      background={TouchableNativeFeedback.Ripple('#06bcee', false)}
+      hitSlop={defaultHitSlop}>
+      <View style={styles.button}>
+        <Text style={styles.text}>This is a ripple respecting borders</Text>
+      </View>
+    </TouchableNativeFeedback>
+    <TouchableNativeFeedback
+      onPress={noop}
+      background={TouchableNativeFeedback.Ripple('#06bcee', true)}
+      hitSlop={defaultHitSlop}>
+      <View style={styles.button}>
+        <Text style={styles.text}>
+          This is ripple without borders, this is more useful for icons, eg: in
+          tab bar
+        </Text>
+      </View>
+    </TouchableNativeFeedback>
+  </View>
+);
+
+const Buttons = () => (
+  <View style={styles.buttonContainer}>
+    <TouchableOpacity
+      style={styles.button}
+      onPress={noop}
+      hitSlop={defaultHitSlop}>
+      <Text style={styles.text}>This is opacity</Text>
+    </TouchableOpacity>
+    <TouchableHighlight
+      style={styles.button}
+      onPress={noop}
+      hitSlop={defaultHitSlop}
+      underlayColor="#06bcee">
+      <Text style={styles.text}>This is highlight</Text>
+    </TouchableHighlight>
+  </View>
+);
+
+const App = () => (
+  <View style={styles.container}>
+    {SUPPORTS_NATIVE_FEEDBACK ? <ButtonsWithNativeFeedback /> : <Buttons />}
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: 64,
+    backgroundColor: '#fff',
+  },
+  buttonContainer: {
+    margin: 24,
+  },
+  text: {
+    fontSize: 20,
+    color: '#fff',
+    fontWeight: 'bold',
+  },
+  button: {
+    padding: 25,
+    borderRadius: 5,
+    backgroundColor: '#000',
+    marginBottom: 30,
+  },
+});
+
+export default App;
+```
+
+## Screen orientation lock
+
+Multiple screen orientations should work fine by default unless you're using `Dimensions` API and don't handle orientation changes. If you don't want to support multiple screen orientations, you can lock the screen orientation to either portrait or landscape.
+
+On iOS, in the General tab and Deployment Info section of Xcode enable the Device Orientation you want to support (ensure you have selected iPhone from the Devices menu when making the changes). For Android, open the AndroidManifest.xml file and within the activity element add `'android:screenOrientation="portrait"'` to lock to portrait or `'android:screenOrientation="landscape"'` to lock to landscape.
+
+# Learn more
+
+[Material Design](https://material.io/) and [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines) are great resources for learning more about designing for mobile platforms.
diff --git a/website/versioned_docs/version-0.81/inputaccessoryview.md b/website/versioned_docs/version-0.81/inputaccessoryview.md
index a4f56532fa4..76220b4fd7c 100644
--- a/website/versioned_docs/version-0.81/inputaccessoryview.md
+++ b/website/versioned_docs/version-0.81/inputaccessoryview.md
@@ -1,98 +1,98 @@
----
-id: inputaccessoryview
-title: InputAccessoryView
----
-
-A component which enables customization of the keyboard input accessory view on iOS. The input accessory view is displayed above the keyboard whenever a `TextInput` has focus. This component can be used to create custom toolbars.
-
-To use this component wrap your custom toolbar with the InputAccessoryView component, and set a `nativeID`. Then, pass that `nativeID` as the `inputAccessoryViewID` of whatever `TextInput` you desire. A basic example:
-
-```SnackPlayer name=InputAccessoryView&supportedPlatforms=ios
-import React, {useState} from 'react';
-import {
-  Button,
-  InputAccessoryView,
-  ScrollView,
-  TextInput,
-  StyleSheet,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const inputAccessoryViewID = 'uniqueID';
-const initialText = '';
-
-const App = () => {
-  const [text, setText] = useState(initialText);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <ScrollView keyboardDismissMode="interactive">
-          <TextInput
-            style={styles.textInput}
-            inputAccessoryViewID={inputAccessoryViewID}
-            onChangeText={setText}
-            value={text}
-            placeholder={'Please type here…'}
-          />
-        </ScrollView>
-      </SafeAreaView>
-      <InputAccessoryView nativeID={inputAccessoryViewID}>
-        <Button onPress={() => setText(initialText)} title="Clear text" />
-      </InputAccessoryView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: 20,
-  },
-  textInput: {
-    padding: 16,
-    borderColor: 'black',
-    borderWidth: 1,
-  },
-});
-
-export default App;
-```
-
-This component can also be used to create sticky text inputs (text inputs which are anchored to the top of the keyboard). To do this, wrap a `TextInput` with the `InputAccessoryView` component, and don't set a `nativeID`. For an example, look at [InputAccessoryViewExample.js](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/InputAccessoryView/InputAccessoryViewExample.js).
-
----
-
-# Reference
-
-## Props
-
-### `backgroundColor`
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `nativeID`
-
-An ID which is used to associate this `InputAccessoryView` to specified TextInput(s).
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `style`
-
-| Type                              |
-| --------------------------------- |
-| [View Style](view-style-props.md) |
-
-# Known issues
-
-- [react-native#18997](https://github.com/facebook/react-native/issues/18997): Doesn't support multiline `TextInput`
-- [react-native#20157](https://github.com/facebook/react-native/issues/20157): Can't use with a bottom tab bar
+---
+id: inputaccessoryview
+title: InputAccessoryView
+---
+
+A component which enables customization of the keyboard input accessory view on iOS. The input accessory view is displayed above the keyboard whenever a `TextInput` has focus. This component can be used to create custom toolbars.
+
+To use this component wrap your custom toolbar with the InputAccessoryView component, and set a `nativeID`. Then, pass that `nativeID` as the `inputAccessoryViewID` of whatever `TextInput` you desire. A basic example:
+
+```SnackPlayer name=InputAccessoryView&supportedPlatforms=ios
+import {useState} from 'react';
+import {
+  Button,
+  InputAccessoryView,
+  ScrollView,
+  TextInput,
+  StyleSheet,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const inputAccessoryViewID = 'uniqueID';
+const initialText = '';
+
+const App = () => {
+  const [text, setText] = useState(initialText);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <ScrollView keyboardDismissMode="interactive">
+          <TextInput
+            style={styles.textInput}
+            inputAccessoryViewID={inputAccessoryViewID}
+            onChangeText={setText}
+            value={text}
+            placeholder={'Please type here…'}
+          />
+        </ScrollView>
+      </SafeAreaView>
+      <InputAccessoryView nativeID={inputAccessoryViewID}>
+        <Button onPress={() => setText(initialText)} title="Clear text" />
+      </InputAccessoryView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 20,
+  },
+  textInput: {
+    padding: 16,
+    borderColor: 'black',
+    borderWidth: 1,
+  },
+});
+
+export default App;
+```
+
+This component can also be used to create sticky text inputs (text inputs which are anchored to the top of the keyboard). To do this, wrap a `TextInput` with the `InputAccessoryView` component, and don't set a `nativeID`. For an example, look at [InputAccessoryViewExample.js](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/InputAccessoryView/InputAccessoryViewExample.js).
+
+---
+
+# Reference
+
+## Props
+
+### `backgroundColor`
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `nativeID`
+
+An ID which is used to associate this `InputAccessoryView` to specified TextInput(s).
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `style`
+
+| Type                              |
+| --------------------------------- |
+| [View Style](view-style-props.md) |
+
+# Known issues
+
+- [react-native#18997](https://github.com/facebook/react-native/issues/18997): Doesn't support multiline `TextInput`
+- [react-native#20157](https://github.com/facebook/react-native/issues/20157): Can't use with a bottom tab bar
diff --git a/website/versioned_docs/version-0.81/interactionmanager.md b/website/versioned_docs/version-0.81/interactionmanager.md
index f127d4569c8..73e45d179f2 100644
--- a/website/versioned_docs/version-0.81/interactionmanager.md
+++ b/website/versioned_docs/version-0.81/interactionmanager.md
@@ -1,422 +1,422 @@
----
-id: interactionmanager
-title: 🗑️ InteractionManager
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-:::warning[Deprecated]
-Avoid long-running work and use `requestIdleCallback` instead.
-:::
-
-InteractionManager allows long-running work to be scheduled after any interactions/animations have completed. In particular, this allows JavaScript animations to run smoothly.
-
-Applications can schedule tasks to run after interactions with the following:
-
-```tsx
-InteractionManager.runAfterInteractions(() => {
-  // ...long-running synchronous task...
-});
-```
-
-Compare this to other scheduling alternatives:
-
-- `requestAnimationFrame()` for code that animates a view over time.
-- `setImmediate/setTimeout()` run code later, note this may delay animations.
-- `runAfterInteractions()` run code later, without delaying active animations.
-
-The touch handling system considers one or more active touches to be an 'interaction' and will delay `runAfterInteractions()` callbacks until all touches have ended or been cancelled.
-
-InteractionManager also allows applications to register animations by creating an interaction 'handle' on animation start, and clearing it upon completion:
-
-```tsx
-const handle = InteractionManager.createInteractionHandle();
-// run animation... (`runAfterInteractions` tasks are queued)
-// later, on animation completion:
-InteractionManager.clearInteractionHandle(handle);
-// queued tasks run if all handles were cleared
-```
-
-`runAfterInteractions` takes either a plain callback function, or a `PromiseTask` object with a `gen` method that returns a `Promise`. If a `PromiseTask` is supplied, then it is fully resolved (including asynchronous dependencies that also schedule more tasks via `runAfterInteractions`) before starting on the next task that might have been queued up synchronously earlier.
-
-By default, queued tasks are executed together in a loop in one `setImmediate` batch. If `setDeadline` is called with a positive number, then tasks will only be executed until the deadline (in terms of js event loop run time) approaches, at which point execution will yield via setTimeout, allowing events such as touches to start interactions and block queued tasks from executing, making apps more responsive.
-
----
-
-## Example
-
-### Basic
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useEffect} from 'react';
-import {
-  Alert,
-  Animated,
-  InteractionManager,
-  Platform,
-  StyleSheet,
-  Text,
-  useAnimatedValue,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
-
-const useFadeIn = (duration = 5000) => {
-  const opacity = useAnimatedValue(0);
-
-  // Running the animation when the component is mounted
-  useEffect(() => {
-    // Animated.timing() create a interaction handle by default, if you want to disabled that
-    // behaviour you can set isInteraction to false to disabled that.
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration,
-      useNativeDriver: true,
-    }).start();
-  }, [duration, opacity]);
-
-  return opacity;
-};
-
-const Ball = ({onShown}) => {
-  const opacity = useFadeIn();
-
-  // Running a method after the animation
-  useEffect(() => {
-    const interactionPromise = InteractionManager.runAfterInteractions(() =>
-      onShown(),
-    );
-    return () => interactionPromise.cancel();
-  }, [onShown]);
-
-  return <Animated.View style={[styles.ball, {opacity}]} />;
-};
-
-const App = () => {
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>{instructions}</Text>
-        <Ball onShown={() => Alert.alert('Animation is done')} />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  ball: {
-    width: 100,
-    height: 100,
-    backgroundColor: 'salmon',
-    borderRadius: 100,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useEffect} from 'react';
-import {
-  Alert,
-  Animated,
-  InteractionManager,
-  Platform,
-  StyleSheet,
-  Text,
-  useAnimatedValue,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
-
-const useFadeIn = (duration = 5000) => {
-  const opacity = useAnimatedValue(0);
-
-  // Running the animation when the component is mounted
-  useEffect(() => {
-    // Animated.timing() create a interaction handle by default, if you want to disabled that
-    // behaviour you can set isInteraction to false to disabled that.
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration,
-      useNativeDriver: true,
-    }).start();
-  }, [duration, opacity]);
-
-  return opacity;
-};
-
-type BallProps = {
-  onShown: () => void;
-};
-
-const Ball = ({onShown}: BallProps) => {
-  const opacity = useFadeIn();
-
-  // Running a method after the animation
-  useEffect(() => {
-    const interactionPromise = InteractionManager.runAfterInteractions(() =>
-      onShown(),
-    );
-    return () => interactionPromise.cancel();
-  }, [onShown]);
-
-  return <Animated.View style={[styles.ball, {opacity}]} />;
-};
-
-const App = () => {
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>{instructions}</Text>
-        <Ball onShown={() => Alert.alert('Animation is done')} />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  ball: {
-    width: 100,
-    height: 100,
-    backgroundColor: 'salmon',
-    borderRadius: 100,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### Advanced
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useEffect} from 'react';
-import {
-  Alert,
-  Animated,
-  InteractionManager,
-  Platform,
-  StyleSheet,
-  Text,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
-
-// You can create a custom interaction/animation and add
-// support for InteractionManager
-const useCustomInteraction = (timeLocked = 2000) => {
-  useEffect(() => {
-    const handle = InteractionManager.createInteractionHandle();
-
-    setTimeout(
-      () => InteractionManager.clearInteractionHandle(handle),
-      timeLocked,
-    );
-
-    return () => InteractionManager.clearInteractionHandle(handle);
-  }, [timeLocked]);
-};
-
-const Ball = ({onInteractionIsDone}) => {
-  useCustomInteraction();
-
-  // Running a method after the interaction
-  useEffect(() => {
-    InteractionManager.runAfterInteractions(() => onInteractionIsDone());
-  }, [onInteractionIsDone]);
-
-  return <Animated.View style={[styles.ball]} />;
-};
-
-const App = () => {
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>{instructions}</Text>
-        <Ball onInteractionIsDone={() => Alert.alert('Interaction is done')} />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  ball: {
-    width: 100,
-    height: 100,
-    backgroundColor: 'salmon',
-    borderRadius: 100,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useEffect} from 'react';
-import {
-  Alert,
-  Animated,
-  InteractionManager,
-  Platform,
-  StyleSheet,
-  Text,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
-
-// You can create a custom interaction/animation and add
-// support for InteractionManager
-const useCustomInteraction = (timeLocked = 2000) => {
-  useEffect(() => {
-    const handle = InteractionManager.createInteractionHandle();
-
-    setTimeout(
-      () => InteractionManager.clearInteractionHandle(handle),
-      timeLocked,
-    );
-
-    return () => InteractionManager.clearInteractionHandle(handle);
-  }, [timeLocked]);
-};
-
-type BallProps = {
-  onInteractionIsDone: () => void;
-};
-
-const Ball = ({onInteractionIsDone}: BallProps) => {
-  useCustomInteraction();
-
-  // Running a method after the interaction
-  useEffect(() => {
-    InteractionManager.runAfterInteractions(() => onInteractionIsDone());
-  }, [onInteractionIsDone]);
-
-  return <Animated.View style={[styles.ball]} />;
-};
-
-const App = () => {
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>{instructions}</Text>
-        <Ball onInteractionIsDone={() => Alert.alert('Interaction is done')} />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  ball: {
-    width: 100,
-    height: 100,
-    backgroundColor: 'salmon',
-    borderRadius: 100,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-# Reference
-
-## Methods
-
-### `runAfterInteractions()`
-
-```tsx
-static runAfterInteractions(task?: (() => any) | SimpleTask | PromiseTask);
-```
-
-Schedule a function to run after all interactions have completed. Returns a cancellable "promise".
-
----
-
-### `createInteractionHandle()`
-
-```tsx
-static createInteractionHandle(): Handle;
-```
-
-Notify manager that an interaction has started.
-
----
-
-### `clearInteractionHandle()`
-
-```tsx
-static clearInteractionHandle(handle: Handle);
-```
-
-Notify manager that an interaction has completed.
-
----
-
-### `setDeadline()`
-
-```tsx
-static setDeadline(deadline: number);
-```
-
-A positive number will use setTimeout to schedule any tasks after the eventLoopRunningTime hits the deadline value, otherwise all tasks will be executed in one setImmediate batch (default).
+---
+id: interactionmanager
+title: 🗑️ InteractionManager
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+:::warning[Deprecated]
+Avoid long-running work and use `requestIdleCallback` instead.
+:::
+
+InteractionManager allows long-running work to be scheduled after any interactions/animations have completed. In particular, this allows JavaScript animations to run smoothly.
+
+Applications can schedule tasks to run after interactions with the following:
+
+```tsx
+InteractionManager.runAfterInteractions(() => {
+  // ...long-running synchronous task...
+});
+```
+
+Compare this to other scheduling alternatives:
+
+- `requestAnimationFrame()` for code that animates a view over time.
+- `setImmediate/setTimeout()` run code later, note this may delay animations.
+- `runAfterInteractions()` run code later, without delaying active animations.
+
+The touch handling system considers one or more active touches to be an 'interaction' and will delay `runAfterInteractions()` callbacks until all touches have ended or been cancelled.
+
+InteractionManager also allows applications to register animations by creating an interaction 'handle' on animation start, and clearing it upon completion:
+
+```tsx
+const handle = InteractionManager.createInteractionHandle();
+// run animation... (`runAfterInteractions` tasks are queued)
+// later, on animation completion:
+InteractionManager.clearInteractionHandle(handle);
+// queued tasks run if all handles were cleared
+```
+
+`runAfterInteractions` takes either a plain callback function, or a `PromiseTask` object with a `gen` method that returns a `Promise`. If a `PromiseTask` is supplied, then it is fully resolved (including asynchronous dependencies that also schedule more tasks via `runAfterInteractions`) before starting on the next task that might have been queued up synchronously earlier.
+
+By default, queued tasks are executed together in a loop in one `setImmediate` batch. If `setDeadline` is called with a positive number, then tasks will only be executed until the deadline (in terms of js event loop run time) approaches, at which point execution will yield via setTimeout, allowing events such as touches to start interactions and block queued tasks from executing, making apps more responsive.
+
+---
+
+## Example
+
+### Basic
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=js
+import {useEffect} from 'react';
+import {
+  Alert,
+  Animated,
+  InteractionManager,
+  Platform,
+  StyleSheet,
+  Text,
+  useAnimatedValue,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const instructions = Platform.select({
+  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
+  android:
+    'Double tap R on your keyboard to reload,\n' +
+    'Shake or press menu button for dev menu',
+});
+
+const useFadeIn = (duration = 5000) => {
+  const opacity = useAnimatedValue(0);
+
+  // Running the animation when the component is mounted
+  useEffect(() => {
+    // Animated.timing() create a interaction handle by default, if you want to disabled that
+    // behaviour you can set isInteraction to false to disabled that.
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration,
+      useNativeDriver: true,
+    }).start();
+  }, [duration, opacity]);
+
+  return opacity;
+};
+
+const Ball = ({onShown}) => {
+  const opacity = useFadeIn();
+
+  // Running a method after the animation
+  useEffect(() => {
+    const interactionPromise = InteractionManager.runAfterInteractions(() =>
+      onShown(),
+    );
+    return () => interactionPromise.cancel();
+  }, [onShown]);
+
+  return <Animated.View style={[styles.ball, {opacity}]} />;
+};
+
+const App = () => {
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>{instructions}</Text>
+        <Ball onShown={() => Alert.alert('Animation is done')} />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  ball: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'salmon',
+    borderRadius: 100,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=tsx
+import {useEffect} from 'react';
+import {
+  Alert,
+  Animated,
+  InteractionManager,
+  Platform,
+  StyleSheet,
+  Text,
+  useAnimatedValue,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const instructions = Platform.select({
+  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
+  android:
+    'Double tap R on your keyboard to reload,\n' +
+    'Shake or press menu button for dev menu',
+});
+
+const useFadeIn = (duration = 5000) => {
+  const opacity = useAnimatedValue(0);
+
+  // Running the animation when the component is mounted
+  useEffect(() => {
+    // Animated.timing() create a interaction handle by default, if you want to disabled that
+    // behaviour you can set isInteraction to false to disabled that.
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration,
+      useNativeDriver: true,
+    }).start();
+  }, [duration, opacity]);
+
+  return opacity;
+};
+
+type BallProps = {
+  onShown: () => void;
+};
+
+const Ball = ({onShown}: BallProps) => {
+  const opacity = useFadeIn();
+
+  // Running a method after the animation
+  useEffect(() => {
+    const interactionPromise = InteractionManager.runAfterInteractions(() =>
+      onShown(),
+    );
+    return () => interactionPromise.cancel();
+  }, [onShown]);
+
+  return <Animated.View style={[styles.ball, {opacity}]} />;
+};
+
+const App = () => {
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>{instructions}</Text>
+        <Ball onShown={() => Alert.alert('Animation is done')} />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  ball: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'salmon',
+    borderRadius: 100,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### Advanced
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=js
+import {useEffect} from 'react';
+import {
+  Alert,
+  Animated,
+  InteractionManager,
+  Platform,
+  StyleSheet,
+  Text,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const instructions = Platform.select({
+  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
+  android:
+    'Double tap R on your keyboard to reload,\n' +
+    'Shake or press menu button for dev menu',
+});
+
+// You can create a custom interaction/animation and add
+// support for InteractionManager
+const useCustomInteraction = (timeLocked = 2000) => {
+  useEffect(() => {
+    const handle = InteractionManager.createInteractionHandle();
+
+    setTimeout(
+      () => InteractionManager.clearInteractionHandle(handle),
+      timeLocked,
+    );
+
+    return () => InteractionManager.clearInteractionHandle(handle);
+  }, [timeLocked]);
+};
+
+const Ball = ({onInteractionIsDone}) => {
+  useCustomInteraction();
+
+  // Running a method after the interaction
+  useEffect(() => {
+    InteractionManager.runAfterInteractions(() => onInteractionIsDone());
+  }, [onInteractionIsDone]);
+
+  return <Animated.View style={[styles.ball]} />;
+};
+
+const App = () => {
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>{instructions}</Text>
+        <Ball onInteractionIsDone={() => Alert.alert('Interaction is done')} />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  ball: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'salmon',
+    borderRadius: 100,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=tsx
+import {useEffect} from 'react';
+import {
+  Alert,
+  Animated,
+  InteractionManager,
+  Platform,
+  StyleSheet,
+  Text,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const instructions = Platform.select({
+  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
+  android:
+    'Double tap R on your keyboard to reload,\n' +
+    'Shake or press menu button for dev menu',
+});
+
+// You can create a custom interaction/animation and add
+// support for InteractionManager
+const useCustomInteraction = (timeLocked = 2000) => {
+  useEffect(() => {
+    const handle = InteractionManager.createInteractionHandle();
+
+    setTimeout(
+      () => InteractionManager.clearInteractionHandle(handle),
+      timeLocked,
+    );
+
+    return () => InteractionManager.clearInteractionHandle(handle);
+  }, [timeLocked]);
+};
+
+type BallProps = {
+  onInteractionIsDone: () => void;
+};
+
+const Ball = ({onInteractionIsDone}: BallProps) => {
+  useCustomInteraction();
+
+  // Running a method after the interaction
+  useEffect(() => {
+    InteractionManager.runAfterInteractions(() => onInteractionIsDone());
+  }, [onInteractionIsDone]);
+
+  return <Animated.View style={[styles.ball]} />;
+};
+
+const App = () => {
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>{instructions}</Text>
+        <Ball onInteractionIsDone={() => Alert.alert('Interaction is done')} />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  ball: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'salmon',
+    borderRadius: 100,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+# Reference
+
+## Methods
+
+### `runAfterInteractions()`
+
+```tsx
+static runAfterInteractions(task?: (() => any) | SimpleTask | PromiseTask);
+```
+
+Schedule a function to run after all interactions have completed. Returns a cancellable "promise".
+
+---
+
+### `createInteractionHandle()`
+
+```tsx
+static createInteractionHandle(): Handle;
+```
+
+Notify manager that an interaction has started.
+
+---
+
+### `clearInteractionHandle()`
+
+```tsx
+static clearInteractionHandle(handle: Handle);
+```
+
+Notify manager that an interaction has completed.
+
+---
+
+### `setDeadline()`
+
+```tsx
+static setDeadline(deadline: number);
+```
+
+A positive number will use setTimeout to schedule any tasks after the eventLoopRunningTime hits the deadline value, otherwise all tasks will be executed in one setImmediate batch (default).
diff --git a/website/versioned_docs/version-0.81/intro-react-native-components.md b/website/versioned_docs/version-0.81/intro-react-native-components.md
index eb585964154..2f3a1449d28 100644
--- a/website/versioned_docs/version-0.81/intro-react-native-components.md
+++ b/website/versioned_docs/version-0.81/intro-react-native-components.md
@@ -43,7 +43,6 @@ React Native has many Core Components for everything from controls to activity i
 In the next section, you will start combining these Core Components to learn about how React works. Have a play with them here now!
 
 ```SnackPlayer name=Hello%20World
-import React from 'react';
 import {View, Text, Image, ScrollView, TextInput} from 'react-native';
 
 const App = () => {
diff --git a/website/versioned_docs/version-0.81/introduction.md b/website/versioned_docs/version-0.81/introduction.md
index ba782cd838c..2752b80327b 100644
--- a/website/versioned_docs/version-0.81/introduction.md
+++ b/website/versioned_docs/version-0.81/introduction.md
@@ -30,7 +30,6 @@ While we do our best to assume no prior knowledge of React, Android, or iOS deve
 This introduction lets you get started immediately in your browser with interactive examples like this one:
 
 ```SnackPlayer name=Hello%20World
-import React from 'react';
 import {Text, View} from 'react-native';
 
 const YourApp = () => {
diff --git a/website/versioned_docs/version-0.81/javascript-environment.md b/website/versioned_docs/version-0.81/javascript-environment.md
index ab041dd34cd..2149516a93b 100644
--- a/website/versioned_docs/version-0.81/javascript-environment.md
+++ b/website/versioned_docs/version-0.81/javascript-environment.md
@@ -1,109 +1,109 @@
----
-id: javascript-environment
-title: JavaScript Environment
----
-
-import TableRow from '@site/core/TableRowWithCodeBlock';
-
-## JavaScript Runtime
-
-When using React Native, you're going to be running your JavaScript code in up to three environments:
-
-- In most cases, React Native will use [Hermes](hermes), an open-source JavaScript engine optimized for React Native.
-- If Hermes is disabled, React Native will use [JavaScriptCore](https://trac.webkit.org/wiki/JavaScriptCore), the JavaScript engine that powers Safari. Note that on iOS, JavaScriptCore does not use JIT due to the absence of writable executable memory in iOS apps.
-- When using Chrome debugging, all JavaScript code runs within Chrome itself, communicating with native code via WebSockets. Chrome uses [V8](https://v8.dev/) as its JavaScript engine.
-
-While these environments are very similar, you may end up hitting some inconsistencies. It is best to avoid relying on specifics of any runtime.
-
-## JavaScript Syntax Transformers
-
-Syntax transformers make writing code more enjoyable by allowing you to use new JavaScript syntax without having to wait for support on all interpreters.
-
-React Native ships with the [Babel JavaScript compiler](https://babeljs.io). Check [Babel documentation](https://babeljs.io/docs/plugins/#transform-plugins) on its supported transformations for more details.
-
-A full list of React Native's enabled transformations can be found in [@react-native/babel-preset](https://github.com/facebook/react-native/tree/main/packages/react-native-babel-preset).
-
-<table>
-<thead>
-  <tr><th>Transformation</th><th>Code</th></tr>
-</thead>
-<tbody>
-  <tr><td className="table-heading" colSpan="2">ECMAScript 5</td></tr>
-  <TableRow name="Reserved Words" code="promise.catch(function() {...});" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2015 (ES6)</td></tr>
-  <TableRow name="Arrow functions" code="<C onPress={() => this.setState({pressed: true})} />" url="https://babeljs.io/docs/learn-es2015/#arrows" />
-  <TableRow name="Block scoping" code="let greeting = 'hi';" url="https://babeljs.io/docs/learn-es2015/#let-const" />
-  <TableRow name="Call spread" code="Math.max(...array);" url="https://babeljs.io/docs/learn-es2015/#default-rest-spread" />
-  <TableRow name="Classes" code="class C extends React.Component {render() { return <View />; }}" url="https://babeljs.io/docs/learn-es2015/#classes" />
-  <TableRow name="Computed Properties" code="const key = 'abc'; const obj = {[key]: 10};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
-  <TableRow name="Constants" code="const answer = 42;" url="https://babeljs.io/docs/learn-es2015/#let-const" />
-  <TableRow name="Destructuring" code="const {isActive, style} = this.props;" url="https://babeljs.io/docs/learn-es2015/#destructuring" />
-  <TableRow name="for…of" code="for (var num of [1, 2, 3]) {...};" url="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of" />
-  <TableRow name="Function Name" code="let number = x => x;" url="https://babeljs.io/docs/en/babel-plugin-transform-function-name" />
-  <TableRow name="Literals" code="const b = 0b11; const o = 0o7; const u = 'Hello\u{000A}\u{0009}!';" url="https://babeljs.io/docs/en/babel-plugin-transform-literals" />
-  <TableRow name="Modules" code="import React, {Component} from 'react';" url="https://babeljs.io/docs/learn-es2015/#modules" />
-  <TableRow name="Object Concise Method" code="const obj = {method() { return 10; }};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
-  <TableRow name="Object Short Notation" code="const name = 'vjeux'; const obj = {name};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
-  <TableRow name="Parameters" code="function test(x = 'hello', {a, b}, ...args) {}" url="https://babeljs.io/docs/en/babel-plugin-transform-parameters" />
-  <TableRow name="Rest Params" code="function(type, ...args) {};" url="https://github.com/sebmarkbage/ecmascript-rest-spread" />
-  <TableRow name="Shorthand Properties" code="const o = {a, b, c};" url="https://babeljs.io/docs/en/babel-plugin-transform-shorthand-properties" />
-  <TableRow name="Sticky Regex" code="const a = /o+/y;" url="https://babeljs.io/docs/en/babel-plugin-transform-sticky-regex" />
-  <TableRow name="Template Literals" code="const who = 'world'; const str = `Hello ${who}`;" url="https://babeljs.io/docs/learn-es2015/#template-strings" />
-  <TableRow name="Unicode Regex" code="const string = 'foo💩bar'; const match = string.match(/foo(.)bar/u);" url="https://babeljs.io/docs/en/babel-plugin-transform-unicode-regex" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2016 (ES7)</td></tr>
-  <TableRow name="Exponentiation Operator" code="let x = 10 ** 2;" url="https://babeljs.io/docs/en/babel-plugin-transform-exponentiation-operator" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2017 (ES8)</td></tr>
-  <TableRow name="Async Functions" code="async function doStuffAsync() {const foo = await doOtherStuffAsync();};" url="https://github.com/tc39/ecmascript-asyncawait" />
-  <TableRow name="Function Trailing Comma" code="function f(a, b, c,) {};" url="https://github.com/jeffmo/es-trailing-function-commas" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2018 (ES9)</td></tr>
-  <TableRow name="Object Spread" code="const extended = {...obj, a: 10};" url="https://github.com/tc39/proposal-object-rest-spread" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2019 (ES10)</td></tr>
-  <TableRow name="Optional Catch Binding" code="try {throw 0; } catch { doSomethingWhichDoesNotCareAboutTheValueThrown();}" url="https://babeljs.io/docs/en/babel-plugin-proposal-optional-catch-binding" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2020 (ES11)</td></tr>
-  <TableRow name="Dynamic Imports" code="const package = await import('package'); package.function()" url="https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import" />
-  <TableRow name="Nullish Coalescing Operator" code="const foo = object.foo ?? 'default';" url="https://babeljs.io/docs/en/babel-plugin-proposal-nullish-coalescing-operator" />
-  <TableRow name="Optional Chaining" code="const name = obj.user?.name;" url="https://github.com/tc39/proposal-optional-chaining" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2022 (ES13)</td></tr>
-  <TableRow name="Class Fields" code="class Bork {static a = 'foo'; static b; x = 'bar'; y;}" url="https://babeljs.io/docs/en/babel-plugin-proposal-class-properties" />
-  <tr><td className="table-heading" colSpan="2">Stage 1 Proposal</td></tr>
-  <TableRow name="Export Default From" code="export v from 'mod';" url="https://babeljs.io/docs/en/babel-plugin-proposal-export-default-from" />
-  <tr><td className="table-heading" colSpan="2">Miscellaneous</td></tr>
-  <TableRow name="Babel Template" code="template(`const %%importName%% = require(%%source%%);`);" url="https://babeljs.io/docs/en/babel-template" />
-  <TableRow name="Flow" code="function foo(x: ?number): string {};" url="https://flowtype.org/" />
-  <TableRow name="ESM to CJS" code="export default 42;" url="https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs" />
-  <TableRow name="JSX" code="<View style={{color: 'red'}} />" url="https://react.dev/learn/writing-markup-with-jsx" />
-  <TableRow name="Object Assign" code="Object.assign(a, b);" url="https://babeljs.io/docs/en/babel-plugin-transform-object-assign" />
-  <TableRow name="React Display Name" code="const bar = createReactClass({});" url="https://babeljs.io/docs/en/babel-plugin-transform-react-display-name" />
-  <TableRow name="TypeScript" code="function foo(x: {hello: true, target: 'react native!'}): string {};" url="https://www.typescriptlang.org/" />
-</tbody>
-</table>
-
-## Polyfills
-
-Many standard functions are also available on all the supported JavaScript runtimes.
-
-#### Browser
-
-- [CommonJS `require`](https://nodejs.org/docs/latest/api/modules.html)
-- `md [console.{log, warn, error, info, debug, trace, table, group, groupCollapsed, groupEnd}](https://developer.chrome.com/devtools/docs/console-api)`
-- [`XMLHttpRequest`, `fetch`](network.md#content)
-- [`{set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame`](timers.md#content)
-
-#### ECMAScript 2015 (ES6)
-
-- [`Array.from`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from)
-- `md Array.prototype.{[find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find), [findIndex](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)}`
-- [`Object.assign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
-- `md String.prototype.{[startsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith), [endsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith), [repeat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat), [includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes)}`
-
-#### ECMAScript 2016 (ES7)
-
-- `md Array.prototype.[includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)`
-
-#### ECMAScript 2017 (ES8)
-
-- `md Object.{[entries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries), [values](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values)}`
-
-#### Specific
-
-- `__DEV__`
+---
+id: javascript-environment
+title: JavaScript Environment
+---
+
+import TableRow from '@site/core/TableRowWithCodeBlock';
+
+## JavaScript Runtime
+
+When using React Native, you're going to be running your JavaScript code in up to three environments:
+
+- In most cases, React Native will use [Hermes](hermes), an open-source JavaScript engine optimized for React Native.
+- If Hermes is disabled, React Native will use [JavaScriptCore](https://trac.webkit.org/wiki/JavaScriptCore), the JavaScript engine that powers Safari. Note that on iOS, JavaScriptCore does not use JIT due to the absence of writable executable memory in iOS apps.
+- When using Chrome debugging, all JavaScript code runs within Chrome itself, communicating with native code via WebSockets. Chrome uses [V8](https://v8.dev/) as its JavaScript engine.
+
+While these environments are very similar, you may end up hitting some inconsistencies. It is best to avoid relying on specifics of any runtime.
+
+## JavaScript Syntax Transformers
+
+Syntax transformers make writing code more enjoyable by allowing you to use new JavaScript syntax without having to wait for support on all interpreters.
+
+React Native ships with the [Babel JavaScript compiler](https://babeljs.io). Check [Babel documentation](https://babeljs.io/docs/plugins/#transform-plugins) on its supported transformations for more details.
+
+A full list of React Native's enabled transformations can be found in [@react-native/babel-preset](https://github.com/facebook/react-native/tree/main/packages/react-native-babel-preset).
+
+<table>
+<thead>
+  <tr><th>Transformation</th><th>Code</th></tr>
+</thead>
+<tbody>
+  <tr><td className="table-heading" colSpan="2">ECMAScript 5</td></tr>
+  <TableRow name="Reserved Words" code="promise.catch(function() {...});" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2015 (ES6)</td></tr>
+  <TableRow name="Arrow functions" code="<C onPress={() => this.setState({pressed: true})} />" url="https://babeljs.io/docs/learn-es2015/#arrows" />
+  <TableRow name="Block scoping" code="let greeting = 'hi';" url="https://babeljs.io/docs/learn-es2015/#let-const" />
+  <TableRow name="Call spread" code="Math.max(...array);" url="https://babeljs.io/docs/learn-es2015/#default-rest-spread" />
+  <TableRow name="Classes" code="class C extends React.Component {render() { return <View />; }}" url="https://babeljs.io/docs/learn-es2015/#classes" />
+  <TableRow name="Computed Properties" code="const key = 'abc'; const obj = {[key]: 10};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
+  <TableRow name="Constants" code="const answer = 42;" url="https://babeljs.io/docs/learn-es2015/#let-const" />
+  <TableRow name="Destructuring" code="const {isActive, style} = this.props;" url="https://babeljs.io/docs/learn-es2015/#destructuring" />
+  <TableRow name="for…of" code="for (var num of [1, 2, 3]) {...};" url="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of" />
+  <TableRow name="Function Name" code="let number = x => x;" url="https://babeljs.io/docs/en/babel-plugin-transform-function-name" />
+  <TableRow name="Literals" code="const b = 0b11; const o = 0o7; const u = 'Hello\u{000A}\u{0009}!';" url="https://babeljs.io/docs/en/babel-plugin-transform-literals" />
+  <TableRow name="Modules" code="import {Component} from 'react';" url="https://babeljs.io/docs/learn-es2015/#modules" />
+  <TableRow name="Object Concise Method" code="const obj = {method() { return 10; }};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
+  <TableRow name="Object Short Notation" code="const name = 'vjeux'; const obj = {name};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
+  <TableRow name="Parameters" code="function test(x = 'hello', {a, b}, ...args) {}" url="https://babeljs.io/docs/en/babel-plugin-transform-parameters" />
+  <TableRow name="Rest Params" code="function(type, ...args) {};" url="https://github.com/sebmarkbage/ecmascript-rest-spread" />
+  <TableRow name="Shorthand Properties" code="const o = {a, b, c};" url="https://babeljs.io/docs/en/babel-plugin-transform-shorthand-properties" />
+  <TableRow name="Sticky Regex" code="const a = /o+/y;" url="https://babeljs.io/docs/en/babel-plugin-transform-sticky-regex" />
+  <TableRow name="Template Literals" code="const who = 'world'; const str = `Hello ${who}`;" url="https://babeljs.io/docs/learn-es2015/#template-strings" />
+  <TableRow name="Unicode Regex" code="const string = 'foo💩bar'; const match = string.match(/foo(.)bar/u);" url="https://babeljs.io/docs/en/babel-plugin-transform-unicode-regex" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2016 (ES7)</td></tr>
+  <TableRow name="Exponentiation Operator" code="let x = 10 ** 2;" url="https://babeljs.io/docs/en/babel-plugin-transform-exponentiation-operator" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2017 (ES8)</td></tr>
+  <TableRow name="Async Functions" code="async function doStuffAsync() {const foo = await doOtherStuffAsync();};" url="https://github.com/tc39/ecmascript-asyncawait" />
+  <TableRow name="Function Trailing Comma" code="function f(a, b, c,) {};" url="https://github.com/jeffmo/es-trailing-function-commas" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2018 (ES9)</td></tr>
+  <TableRow name="Object Spread" code="const extended = {...obj, a: 10};" url="https://github.com/tc39/proposal-object-rest-spread" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2019 (ES10)</td></tr>
+  <TableRow name="Optional Catch Binding" code="try {throw 0; } catch { doSomethingWhichDoesNotCareAboutTheValueThrown();}" url="https://babeljs.io/docs/en/babel-plugin-proposal-optional-catch-binding" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2020 (ES11)</td></tr>
+  <TableRow name="Dynamic Imports" code="const package = await import('package'); package.function()" url="https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import" />
+  <TableRow name="Nullish Coalescing Operator" code="const foo = object.foo ?? 'default';" url="https://babeljs.io/docs/en/babel-plugin-proposal-nullish-coalescing-operator" />
+  <TableRow name="Optional Chaining" code="const name = obj.user?.name;" url="https://github.com/tc39/proposal-optional-chaining" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2022 (ES13)</td></tr>
+  <TableRow name="Class Fields" code="class Bork {static a = 'foo'; static b; x = 'bar'; y;}" url="https://babeljs.io/docs/en/babel-plugin-proposal-class-properties" />
+  <tr><td className="table-heading" colSpan="2">Stage 1 Proposal</td></tr>
+  <TableRow name="Export Default From" code="export v from 'mod';" url="https://babeljs.io/docs/en/babel-plugin-proposal-export-default-from" />
+  <tr><td className="table-heading" colSpan="2">Miscellaneous</td></tr>
+  <TableRow name="Babel Template" code="template(`const %%importName%% = require(%%source%%);`);" url="https://babeljs.io/docs/en/babel-template" />
+  <TableRow name="Flow" code="function foo(x: ?number): string {};" url="https://flowtype.org/" />
+  <TableRow name="ESM to CJS" code="export default 42;" url="https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs" />
+  <TableRow name="JSX" code="<View style={{color: 'red'}} />" url="https://react.dev/learn/writing-markup-with-jsx" />
+  <TableRow name="Object Assign" code="Object.assign(a, b);" url="https://babeljs.io/docs/en/babel-plugin-transform-object-assign" />
+  <TableRow name="React Display Name" code="const bar = createReactClass({});" url="https://babeljs.io/docs/en/babel-plugin-transform-react-display-name" />
+  <TableRow name="TypeScript" code="function foo(x: {hello: true, target: 'react native!'}): string {};" url="https://www.typescriptlang.org/" />
+</tbody>
+</table>
+
+## Polyfills
+
+Many standard functions are also available on all the supported JavaScript runtimes.
+
+#### Browser
+
+- [CommonJS `require`](https://nodejs.org/docs/latest/api/modules.html)
+- `md [console.{log, warn, error, info, debug, trace, table, group, groupCollapsed, groupEnd}](https://developer.chrome.com/devtools/docs/console-api)`
+- [`XMLHttpRequest`, `fetch`](network.md#content)
+- [`{set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame`](timers.md#content)
+
+#### ECMAScript 2015 (ES6)
+
+- [`Array.from`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from)
+- `md Array.prototype.{[find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find), [findIndex](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)}`
+- [`Object.assign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
+- `md String.prototype.{[startsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith), [endsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith), [repeat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat), [includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes)}`
+
+#### ECMAScript 2016 (ES7)
+
+- `md Array.prototype.[includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)`
+
+#### ECMAScript 2017 (ES8)
+
+- `md Object.{[entries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries), [values](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values)}`
+
+#### Specific
+
+- `__DEV__`
diff --git a/website/versioned_docs/version-0.81/keyboard.md b/website/versioned_docs/version-0.81/keyboard.md
index f09f30b85aa..613f221af94 100644
--- a/website/versioned_docs/version-0.81/keyboard.md
+++ b/website/versioned_docs/version-0.81/keyboard.md
@@ -1,144 +1,144 @@
----
-id: keyboard
-title: Keyboard
----
-
-`Keyboard` module to control keyboard events.
-
-### Usage
-
-The Keyboard module allows you to listen for native events and react to them, as well as make changes to the keyboard, like dismissing it.
-
-```SnackPlayer name=Keyboard%20Example&supportedPlatforms=ios,android
-import React, {useState, useEffect} from 'react';
-import {Keyboard, Text, TextInput, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const Example = () => {
-  const [keyboardStatus, setKeyboardStatus] = useState('Keyboard Hidden');
-
-  useEffect(() => {
-    const showSubscription = Keyboard.addListener('keyboardDidShow', () => {
-      setKeyboardStatus('Keyboard Shown');
-    });
-    const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
-      setKeyboardStatus('Keyboard Hidden');
-    });
-
-    return () => {
-      showSubscription.remove();
-      hideSubscription.remove();
-    };
-  }, []);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={style.container}>
-        <TextInput
-          style={style.input}
-          placeholder="Click here…"
-          onSubmitEditing={Keyboard.dismiss}
-        />
-        <Text style={style.status}>{keyboardStatus}</Text>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const style = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 36,
-  },
-  input: {
-    padding: 10,
-    borderWidth: 0.5,
-    borderRadius: 4,
-  },
-  status: {
-    padding: 16,
-    textAlign: 'center',
-  },
-});
-
-export default Example;
-```
-
----
-
-# Reference
-
-## Methods
-
-### `addListener()`
-
-```tsx
-static addListener: (
-  eventType: KeyboardEventName,
-  listener: KeyboardEventListener,
-) => EmitterSubscription;
-```
-
-The `addListener` function connects a JavaScript function to an identified native keyboard notification event.
-
-This function then returns the reference to the listener.
-
-**Parameters:**
-
-| Name                                                                     | Type     | Description                                                                    |
-| ------------------------------------------------------------------------ | -------- | ------------------------------------------------------------------------------ |
-| eventName <div className="label basic two-lines required">Required</div> | string   | The string that identifies the event you're listening for. See the list below. |
-| callback <div className="label basic two-lines required">Required</div>  | function | The function to be called when the event fires                                 |
-
-**`eventName`**
-
-This can be any of the following:
-
-- `keyboardWillShow`
-- `keyboardDidShow`
-- `keyboardWillHide`
-- `keyboardDidHide`
-- `keyboardWillChangeFrame`
-- `keyboardDidChangeFrame`
-
-> Note that only `keyboardDidShow` and `keyboardDidHide` events are available on Android. The events will not be fired when using Android 10 and under if your activity has `android:windowSoftInputMode` set to `adjustNothing`.
-
----
-
-### `dismiss()`
-
-```tsx
-static dismiss();
-```
-
-Dismisses the active keyboard and removes focus.
-
----
-
-### `scheduleLayoutAnimation`
-
-```tsx
-static scheduleLayoutAnimation(event: KeyboardEvent);
-```
-
-Useful for syncing TextInput (or other keyboard accessory view) size of position changes with keyboard movements.
-
----
-
-### `isVisible()`
-
-```tsx
-static isVisible(): boolean;
-```
-
-Whether the keyboard is last known to be visible.
-
----
-
-### `metrics()`
-
-```tsx
-static metrics(): KeyboardMetrics | undefined;
-```
-
-Return the metrics of the soft-keyboard if visible.
+---
+id: keyboard
+title: Keyboard
+---
+
+`Keyboard` module to control keyboard events.
+
+### Usage
+
+The Keyboard module allows you to listen for native events and react to them, as well as make changes to the keyboard, like dismissing it.
+
+```SnackPlayer name=Keyboard%20Example&supportedPlatforms=ios,android
+import {useState, useEffect} from 'react';
+import {Keyboard, Text, TextInput, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const Example = () => {
+  const [keyboardStatus, setKeyboardStatus] = useState('Keyboard Hidden');
+
+  useEffect(() => {
+    const showSubscription = Keyboard.addListener('keyboardDidShow', () => {
+      setKeyboardStatus('Keyboard Shown');
+    });
+    const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
+      setKeyboardStatus('Keyboard Hidden');
+    });
+
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={style.container}>
+        <TextInput
+          style={style.input}
+          placeholder="Click here…"
+          onSubmitEditing={Keyboard.dismiss}
+        />
+        <Text style={style.status}>{keyboardStatus}</Text>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const style = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 36,
+  },
+  input: {
+    padding: 10,
+    borderWidth: 0.5,
+    borderRadius: 4,
+  },
+  status: {
+    padding: 16,
+    textAlign: 'center',
+  },
+});
+
+export default Example;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `addListener()`
+
+```tsx
+static addListener: (
+  eventType: KeyboardEventName,
+  listener: KeyboardEventListener,
+) => EmitterSubscription;
+```
+
+The `addListener` function connects a JavaScript function to an identified native keyboard notification event.
+
+This function then returns the reference to the listener.
+
+**Parameters:**
+
+| Name                                                                     | Type     | Description                                                                    |
+| ------------------------------------------------------------------------ | -------- | ------------------------------------------------------------------------------ |
+| eventName <div className="label basic two-lines required">Required</div> | string   | The string that identifies the event you're listening for. See the list below. |
+| callback <div className="label basic two-lines required">Required</div>  | function | The function to be called when the event fires                                 |
+
+**`eventName`**
+
+This can be any of the following:
+
+- `keyboardWillShow`
+- `keyboardDidShow`
+- `keyboardWillHide`
+- `keyboardDidHide`
+- `keyboardWillChangeFrame`
+- `keyboardDidChangeFrame`
+
+> Note that only `keyboardDidShow` and `keyboardDidHide` events are available on Android. The events will not be fired when using Android 10 and under if your activity has `android:windowSoftInputMode` set to `adjustNothing`.
+
+---
+
+### `dismiss()`
+
+```tsx
+static dismiss();
+```
+
+Dismisses the active keyboard and removes focus.
+
+---
+
+### `scheduleLayoutAnimation`
+
+```tsx
+static scheduleLayoutAnimation(event: KeyboardEvent);
+```
+
+Useful for syncing TextInput (or other keyboard accessory view) size of position changes with keyboard movements.
+
+---
+
+### `isVisible()`
+
+```tsx
+static isVisible(): boolean;
+```
+
+Whether the keyboard is last known to be visible.
+
+---
+
+### `metrics()`
+
+```tsx
+static metrics(): KeyboardMetrics | undefined;
+```
+
+Return the metrics of the soft-keyboard if visible.
diff --git a/website/versioned_docs/version-0.81/keyboardavoidingview.md b/website/versioned_docs/version-0.81/keyboardavoidingview.md
index b77375008f8..b8966e4132c 100644
--- a/website/versioned_docs/version-0.81/keyboardavoidingview.md
+++ b/website/versioned_docs/version-0.81/keyboardavoidingview.md
@@ -8,7 +8,6 @@ This component will automatically adjust its height, position, or bottom padding
 ## Example
 
 ```SnackPlayer name=KeyboardAvoidingView&supportedPlatforms=android,ios
-import React from 'react';
 import {
   View,
   KeyboardAvoidingView,
diff --git a/website/versioned_docs/version-0.81/layout-props.md b/website/versioned_docs/version-0.81/layout-props.md
index b3673e0c849..0d10649d7d6 100644
--- a/website/versioned_docs/version-0.81/layout-props.md
+++ b/website/versioned_docs/version-0.81/layout-props.md
@@ -1,1360 +1,1360 @@
----
-id: layout-props
-title: Layout Props
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-:::info
-More detailed examples about those properties can be found on the [Layout with Flexbox](flexbox) page.
-:::
-
-### Example
-
-The following example shows how different properties can affect or shape a React Native layout. You can try for example to add or remove squares from the UI while changing the values of the property `flexWrap`.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=LayoutProps%20Example&ext=js
-import React, {useState} from 'react';
-import {Button, ScrollView, StyleSheet, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [flexDirection, setFlexDirection] = useState(0);
-  const [justifyContent, setJustifyContent] = useState(0);
-  const [alignItems, setAlignItems] = useState(0);
-  const [direction, setDirection] = useState(0);
-  const [wrap, setWrap] = useState(0);
-
-  const [squares, setSquares] = useState([<Square />, <Square />, <Square />]);
-
-  const hookedStyles = {
-    flexDirection: flexDirections[flexDirection],
-    justifyContent: justifyContents[justifyContent],
-    alignItems: alignItemsArr[alignItems],
-    direction: directions[direction],
-    flexWrap: wraps[wrap],
-  };
-
-  const changeSetting = (value, options, setterFunction) => {
-    if (value === options.length - 1) {
-      setterFunction(0);
-      return;
-    }
-    setterFunction(value + 1);
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={[styles.container, styles.playingSpace, hookedStyles]}>
-          {squares.map(elem => elem)}
-        </View>
-        <ScrollView style={styles.layoutContainer}>
-          <View style={styles.controlSpace}>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Flex Direction"
-                onPress={() =>
-                  changeSetting(flexDirection, flexDirections, setFlexDirection)
-                }
-              />
-              <Text style={styles.text}>{flexDirections[flexDirection]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Justify Content"
-                onPress={() =>
-                  changeSetting(
-                    justifyContent,
-                    justifyContents,
-                    setJustifyContent,
-                  )
-                }
-              />
-              <Text style={styles.text}>{justifyContents[justifyContent]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Align Items"
-                onPress={() =>
-                  changeSetting(alignItems, alignItemsArr, setAlignItems)
-                }
-              />
-              <Text style={styles.text}>{alignItemsArr[alignItems]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Direction"
-                onPress={() =>
-                  changeSetting(direction, directions, setDirection)
-                }
-              />
-              <Text style={styles.text}>{directions[direction]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Flex Wrap"
-                onPress={() => changeSetting(wrap, wraps, setWrap)}
-              />
-              <Text style={styles.text}>{wraps[wrap]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Add Square"
-                onPress={() => setSquares([...squares, <Square />])}
-              />
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Delete Square"
-                onPress={() =>
-                  setSquares(squares.filter((v, i) => i !== squares.length - 1))
-                }
-              />
-            </View>
-          </View>
-        </ScrollView>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const flexDirections = ['row', 'row-reverse', 'column', 'column-reverse'];
-const justifyContents = [
-  'flex-start',
-  'flex-end',
-  'center',
-  'space-between',
-  'space-around',
-  'space-evenly',
-];
-const alignItemsArr = [
-  'flex-start',
-  'flex-end',
-  'center',
-  'stretch',
-  'baseline',
-];
-const wraps = ['nowrap', 'wrap', 'wrap-reverse'];
-const directions = ['inherit', 'ltr', 'rtl'];
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  layoutContainer: {
-    flex: 0.5,
-  },
-  playingSpace: {
-    backgroundColor: 'white',
-    borderColor: 'blue',
-    borderWidth: 3,
-    overflow: 'hidden',
-  },
-  controlSpace: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  buttonView: {
-    width: '50%',
-    padding: 10,
-  },
-  text: {
-    textAlign: 'center',
-  },
-});
-
-const Square = () => (
-  <View
-    style={{
-      width: 50,
-      height: 50,
-      backgroundColor: randomHexColor(),
-    }}
-  />
-);
-
-const randomHexColor = () => {
-  return '#000000'.replace(/0/g, () => {
-    return Math.round(Math.random() * 14).toString(16);
-  });
-};
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=LayoutProps%20Example&ext=tsx
-import React, {useState} from 'react';
-import {
-  Button,
-  ScrollView,
-  StyleSheet,
-  Text,
-  View,
-  FlexAlignType,
-  FlexStyle,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [flexDirection, setFlexDirection] = useState(0);
-  const [justifyContent, setJustifyContent] = useState(0);
-  const [alignItems, setAlignItems] = useState(0);
-  const [direction, setDirection] = useState(0);
-  const [wrap, setWrap] = useState(0);
-
-  const [squares, setSquares] = useState([<Square />, <Square />, <Square />]);
-
-  const hookedStyles = {
-    flexDirection: flexDirections[flexDirection],
-    justifyContent: justifyContents[justifyContent],
-    alignItems: alignItemsArr[alignItems],
-    direction: directions[direction],
-    flexWrap: wraps[wrap],
-  } as FlexStyle;
-
-  const changeSetting = (
-    value: number,
-    options: any[],
-    setterFunction: (index: number) => void,
-  ) => {
-    if (value === options.length - 1) {
-      setterFunction(0);
-      return;
-    }
-    setterFunction(value + 1);
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={[styles.container, styles.playingSpace, hookedStyles]}>
-          {squares.map(elem => elem)}
-        </View>
-        <ScrollView style={styles.layoutContainer}>
-          <View style={styles.controlSpace}>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Flex Direction"
-                onPress={() =>
-                  changeSetting(flexDirection, flexDirections, setFlexDirection)
-                }
-              />
-              <Text style={styles.text}>{flexDirections[flexDirection]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Justify Content"
-                onPress={() =>
-                  changeSetting(
-                    justifyContent,
-                    justifyContents,
-                    setJustifyContent,
-                  )
-                }
-              />
-              <Text style={styles.text}>{justifyContents[justifyContent]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Align Items"
-                onPress={() =>
-                  changeSetting(alignItems, alignItemsArr, setAlignItems)
-                }
-              />
-              <Text style={styles.text}>{alignItemsArr[alignItems]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Direction"
-                onPress={() =>
-                  changeSetting(direction, directions, setDirection)
-                }
-              />
-              <Text style={styles.text}>{directions[direction]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Flex Wrap"
-                onPress={() => changeSetting(wrap, wraps, setWrap)}
-              />
-              <Text style={styles.text}>{wraps[wrap]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Add Square"
-                onPress={() => setSquares([...squares, <Square />])}
-              />
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Delete Square"
-                onPress={() =>
-                  setSquares(squares.filter((v, i) => i !== squares.length - 1))
-                }
-              />
-            </View>
-          </View>
-        </ScrollView>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const flexDirections = [
-  'row',
-  'row-reverse',
-  'column',
-  'column-reverse',
-] as FlexStyle['flexDirection'][];
-const justifyContents = [
-  'flex-start',
-  'flex-end',
-  'center',
-  'space-between',
-  'space-around',
-  'space-evenly',
-] as FlexStyle['justifyContent'][];
-const alignItemsArr = [
-  'flex-start',
-  'flex-end',
-  'center',
-  'stretch',
-  'baseline',
-] as FlexAlignType[];
-const wraps = ['nowrap', 'wrap', 'wrap-reverse'];
-const directions = ['inherit', 'ltr', 'rtl'];
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  layoutContainer: {
-    flex: 0.5,
-  },
-  playingSpace: {
-    backgroundColor: 'white',
-    borderColor: 'blue',
-    borderWidth: 3,
-    overflow: 'hidden',
-  },
-  controlSpace: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  buttonView: {
-    width: '50%',
-    padding: 10,
-  },
-  text: {
-    textAlign: 'center',
-  },
-});
-
-const Square = () => (
-  <View
-    style={{
-      width: 50,
-      height: 50,
-      backgroundColor: randomHexColor(),
-    }}
-  />
-);
-
-const randomHexColor = () => {
-  return '#000000'.replace(/0/g, () => {
-    return Math.round(Math.random() * 14).toString(16);
-  });
-};
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
----
-
-# Reference
-
-## Props
-
-### `alignContent`
-
-`alignContent` controls how rows align in the cross direction, overriding the `alignContent` of the parent.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) for more details.
-
-| Type                                                                                                 | Required |
-| ---------------------------------------------------------------------------------------------------- | -------- |
-| enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around', 'space-evenly') | No       |
-
----
-
-### `alignItems`
-
-`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS (default: stretch).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) for more details.
-
-| Type                                                            | Required |
-| --------------------------------------------------------------- | -------- |
-| enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline') | No       |
-
----
-
-### `alignSelf`
-
-`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS (default: auto).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) for more details.
-
-| Type                                                                    | Required |
-| ----------------------------------------------------------------------- | -------- |
-| enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline') | No       |
-
----
-
-### `aspectRatio`
-
-Aspect ratio controls the size of the undefined dimension of a node.
-
-- On a node with a set width/height, aspect ratio controls the size of the unset dimension
-- On a node with a set flex basis, aspect ratio controls the size of the node in the cross axis if unset
-- On a node with a measure function, aspect ratio works as though the measure function measures the flex basis
-- On a node with flex grow/shrink, aspect ratio controls the size of the node in the cross axis if unset
-- Aspect ratio takes min/max dimensions into account
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `borderBottomWidth`
-
-`borderBottomWidth` works like `border-bottom-width` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderEndWidth`
-
-When direction is `ltr`, `borderEndWidth` is equivalent to `borderRightWidth`. When direction is `rtl`, `borderEndWidth` is equivalent to `borderLeftWidth`.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderLeftWidth`
-
-`borderLeftWidth` works like `border-left-width` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderRightWidth`
-
-`borderRightWidth` works like `border-right-width` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderStartWidth`
-
-When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. When direction is `rtl`, `borderStartWidth` is equivalent to `borderRightWidth`.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderTopWidth`
-
-`borderTopWidth` works like `border-top-width` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderWidth`
-
-`borderWidth` works like `border-width` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `bottom`
-
-`bottom` is the number of logical pixels to offset the bottom edge of this component.
-
-It works similarly to `bottom` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) for more details of how `bottom` affects layout.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `boxSizing`
-
-`boxSizing` defines how the element's various sizing props (`width`, `height`, `minWidth`, `minHeight`, etc.) are computed. If `boxSizing` is `border-box`, these sizes apply to the border box of the element. If it is `content-box`, they apply to the content box of the element. The default value is `border-box`. The [web documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) is a good source of information if you wish to learn more about how this prop works.
-
-| Type                              | Required |
-| --------------------------------- | -------- |
-| enum('border-box', 'content-box') | No       |
-
----
-
-### `columnGap`
-
-`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `direction`
-
-`direction` specifies the directional flow of the user interface. The default is `inherit`, except for root node which will have value based on the current locale.
-
-See [MDN CSS Reference](https://www.yogalayout.dev/docs/styling/layout-direction) for more details.
-
-| Type                          | Required |
-| ----------------------------- | -------- |
-| enum('inherit', 'ltr', 'rtl') | No       |
-
----
-
-### `display`
-
-`display` sets the display type of this component.
-
-It works similarly to `display` in CSS but only supports the values 'flex', 'none', and 'contents'. The default is `flex`.
-
-| Type                             | Required |
-| -------------------------------- | -------- |
-| enum('none', 'flex', 'contents') | No       |
-
----
-
-### `end`
-
-When the direction is `ltr`, `end` is equivalent to `right`. When the direction is `rtl`, `end` is equivalent to `left`.
-
-This style takes precedence over the `left` and `right` styles.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `flex`
-
-In React Native `flex` does not work the same way that it does in CSS. `flex` is a number rather than a string, and it works according to the [Yoga](https://github.com/facebook/yoga) layout engine.
-
-When `flex` is a positive number, it makes the component flexible, and it will be sized proportional to its flex value. So a component with `flex` set to `2` will take twice the space as a component with `flex` set to 1. `flex: <positive number>` equates to `flexGrow: <positive number>, flexShrink: 1, flexBasis: 0`.
-
-When `flex` is `0`, the component is sized according to `width` and `height`, and it is inflexible.
-
-When `flex` is `-1`, the component is normally sized according to `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`.
-
-`flexGrow`, `flexShrink`, and `flexBasis` work the same as in CSS.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `flexBasis`
-
-`flexBasis` is an axis-independent way of providing the default size of an item along the main axis. Setting the `flexBasis` of a child is similar to setting the `width` of that child if its parent is a container with `flexDirection: row` or setting the `height` of a child if its parent is a container with `flexDirection: column`. The `flexBasis` of an item is the default size of that item, the size of the item before any `flexGrow` and `flexShrink` calculations are performed.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `flexDirection`
-
-`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) for more details.
-
-| Type                                                   | Required |
-| ------------------------------------------------------ | -------- |
-| enum('row', 'row-reverse', 'column', 'column-reverse') | No       |
-
----
-
-### `flexGrow`
-
-`flexGrow` describes how any space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
-
-`flexGrow` accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the children’s `flexGrow` values.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `flexShrink`
-
-[`flexShrink`](layout-props#flexshrink) describes how to shrink children along the main axis in the case in which the total size of the children overflows the size of the container on the main axis. `flexShrink` is very similar to `flexGrow` and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed.
-
-`flexShrink` accepts any floating point value >= 0, with 0 being the default value. A container will shrink its children weighted by the children’s `flexShrink` values.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `flexWrap`
-
-`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS (default: nowrap).
-
-Note it does not work anymore with `alignItems: stretch` (the default), so you may want to use `alignItems: flex-start` for example (breaking change details: https://github.com/facebook/react-native/releases/tag/v0.28.0).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) for more details.
-
-| Type                                   | Required |
-| -------------------------------------- | -------- |
-| enum('wrap', 'nowrap', 'wrap-reverse') | No       |
-
----
-
-### `gap`
-
-`gap` works like `gap` in CSS. Only pixel units are supported in React Native.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `height`
-
-`height` sets the height of this component.
-
-It works similarly to `height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/height) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `inset`
-
-:::note
-`inset` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Setting `inset` has the same effect as setting each of `top`, `bottom`, `right` and `left` props.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/inset) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetBlock`
-
-:::note
-`insetBlock` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Equivalent to [`top`](layout-props#top) and [`bottom`](layout-props#bottom).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetBlockEnd`
-
-:::note
-`insetBlockEnd` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Equivalent to [`bottom`](layout-props#bottom).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetBlockStart`
-
-:::note
-`insetBlockStart` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Equivalent to [`top`](layout-props#top).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetInline`
-
-:::note
-`insetInline` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Equivalent to [`right`](layout-props#right) and [`left`](layout-props#left).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetInlineEnd`
-
-:::note
-`insetInlineEnd` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-When direction is `ltr`, `insetInlineEnd` is equivalent to [`right`](layout-props#right). When direction is `rtl`, `insetInlineEnd` is equivalent to [`left`](layout-props#left).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetInlineStart`
-
-:::note
-`insetInlineStart` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-When direction is `ltr`, `insetInlineStart` is equivalent to [`left`](layout-props#left). When direction is `rtl`, `insetInlineStart` is equivalent to [`right`](layout-props#right).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `isolation`
-
-:::note
-`isolation` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-`isolation` lets you form a [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context).
-
-There are two values:
-
-- `auto` (default): Does nothing.
-- `isolate`: Forms a stacking context.
-
-| Type                    | Required |
-| ----------------------- | -------- |
-| enum('auto', 'isolate') | No       |
-
----
-
-### `justifyContent`
-
-`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS (default: flex-start).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) for more details.
-
-| Type                                                                                      | Required |
-| ----------------------------------------------------------------------------------------- | -------- |
-| enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly') | No       |
-
----
-
-### `left`
-
-`left` is the number of logical pixels to offset the left edge of this component.
-
-It works similarly to `left` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/left) for more details of how `left` affects layout.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `margin`
-
-Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginBottom`
-
-`marginBottom` works like `margin-bottom` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginBlock`
-
-Equivalent to [`marginVertical`](layout-props#marginvertical).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginBlockEnd`
-
-Equivalent to [`marginBottom`](layout-props#marginbottom).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginBlockStart`
-
-Equivalent to [`marginTop`](layout-props#margintop).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginEnd`
-
-When direction is `ltr`, `marginEnd` is equivalent to `marginRight`. When direction is `rtl`, `marginEnd` is equivalent to `marginLeft`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginHorizontal`
-
-Setting `marginHorizontal` has the same effect as setting both `marginLeft` and `marginRight`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginInline`
-
-Equivalent to [`marginHorizontal`](layout-props#marginhorizontal).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginInlineEnd`
-
-When direction is `ltr`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginRight`). When direction is `rtl`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginLeft`).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginInlineStart`
-
-When direction is `ltr`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginLeft`). When direction is `rtl`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginRight`).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginLeft`
-
-`marginLeft` works like `margin-left` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginRight`
-
-`marginRight` works like `margin-right` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginStart`
-
-When direction is `ltr`, `marginStart` is equivalent to `marginLeft`. When direction is `rtl`, `marginStart` is equivalent to `marginRight`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginTop`
-
-`marginTop` works like `margin-top` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginVertical`
-
-Setting `marginVertical` has the same effect as setting both `marginTop` and `marginBottom`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `maxHeight`
-
-`maxHeight` is the maximum height for this component, in logical pixels.
-
-It works similarly to `max-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `maxWidth`
-
-`maxWidth` is the maximum width for this component, in logical pixels.
-
-It works similarly to `max-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `minHeight`
-
-`minHeight` is the minimum height for this component, in logical pixels.
-
-It works similarly to `min-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `minWidth`
-
-`minWidth` is the minimum width for this component, in logical pixels.
-
-It works similarly to `min-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `overflow`
-
-`overflow` controls how children are measured and displayed. `overflow: hidden` causes views to be clipped while `overflow: scroll` causes views to be measured independently of their parents' main axis. It works like `overflow` in CSS (default: visible).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) for more details.
-
-| Type                                | Required |
-| ----------------------------------- | -------- |
-| enum('visible', 'hidden', 'scroll') | No       |
-
----
-
-### `padding`
-
-Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingBottom`
-
-`paddingBottom` works like `padding-bottom` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingBlock`
-
-Equivalent to [`paddingVertical`](layout-props#paddingvertical).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingBlockEnd`
-
-Equivalent to [`paddingBottom`](layout-props#paddingbottom).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingBlockStart`
-
-Equivalent to [`paddingTop`](layout-props#paddingtop).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingEnd`
-
-When direction is `ltr`, `paddingEnd` is equivalent to `paddingRight`. When direction is `rtl`, `paddingEnd` is equivalent to `paddingLeft`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingHorizontal`
-
-Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRight`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingInline`
-
-Equivalent to [`paddingHorizontal`](layout-props#paddinghorizontal).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingInlineEnd`
-
-When direction is `ltr`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingRight`). When direction is `rtl`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingLeft`).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingInlineStart`
-
-When direction is `ltr`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingLeft`). When direction is `rtl`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingRight`).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingLeft`
-
-`paddingLeft` works like `padding-left` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingRight`
-
-`paddingRight` works like `padding-right` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingStart`
-
-When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`. When direction is `rtl`, `paddingStart` is equivalent to `paddingRight`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingTop`
-
-`paddingTop` works like `padding-top` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingVertical`
-
-Setting `paddingVertical` is like setting both of `paddingTop` and `paddingBottom`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `position`
-
-`position` in React Native is similar to [regular CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/position), but everything is set to `relative` by default.
-
-`relative` will position an element according to the normal flow of the layout. Insets (`top`, `bottom`, `left`, `right`) will offset relative to this layout.
-
-`absolute` takes the element out of the normal flow of the layout. Insets will offset relative to its [containing block](./flexbox.md#the-containing-block).
-
-`static` will position an element according to the normal flow of the layout. Insets will have no effect.
-`static` elements do not form a containing block for absolute descendants.
-
-For more information, see the [Layout with Flexbox docs](./flexbox.md#position). Also, [the Yoga documentation](https://www.yogalayout.dev/docs/styling/position) has more details on how `position` differs between React Native and CSS.
-
-| Type                                   | Required |
-| -------------------------------------- | -------- |
-| enum('absolute', 'relative', 'static') | No       |
-
----
-
-### `right`
-
-`right` is the number of logical pixels to offset the right edge of this component.
-
-It works similarly to `right` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) for more details of how `right` affects layout.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `rowGap`
-
-`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `start`
-
-When the direction is `ltr`, `start` is equivalent to `left`. When the direction is `rtl`, `start` is equivalent to `right`.
-
-This style takes precedence over the `left`, `right`, and `end` styles.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `top`
-
-`top` is the number of logical pixels to offset the top edge of this component.
-
-It works similarly to `top` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/top) for more details of how `top` affects layout.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `width`
-
-`width` sets the width of this component.
-
-It works similarly to `width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/width) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `zIndex`
-
-`zIndex` controls which components display on top of others. Normally, you don't use `zIndex`. Components render according to their order in the document tree, so later components draw over earlier ones. `zIndex` may be useful if you have animations or custom modal interfaces where you don't want this behavior.
-
-It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball.
-
-On iOS, `zIndex` may require `View`s to be siblings of each other for it to work as expected.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
+---
+id: layout-props
+title: Layout Props
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+:::info
+More detailed examples about those properties can be found on the [Layout with Flexbox](flexbox) page.
+:::
+
+### Example
+
+The following example shows how different properties can affect or shape a React Native layout. You can try for example to add or remove squares from the UI while changing the values of the property `flexWrap`.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=LayoutProps%20Example&ext=js
+import {useState} from 'react';
+import {Button, ScrollView, StyleSheet, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [flexDirection, setFlexDirection] = useState(0);
+  const [justifyContent, setJustifyContent] = useState(0);
+  const [alignItems, setAlignItems] = useState(0);
+  const [direction, setDirection] = useState(0);
+  const [wrap, setWrap] = useState(0);
+
+  const [squares, setSquares] = useState([<Square />, <Square />, <Square />]);
+
+  const hookedStyles = {
+    flexDirection: flexDirections[flexDirection],
+    justifyContent: justifyContents[justifyContent],
+    alignItems: alignItemsArr[alignItems],
+    direction: directions[direction],
+    flexWrap: wraps[wrap],
+  };
+
+  const changeSetting = (value, options, setterFunction) => {
+    if (value === options.length - 1) {
+      setterFunction(0);
+      return;
+    }
+    setterFunction(value + 1);
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={[styles.container, styles.playingSpace, hookedStyles]}>
+          {squares.map(elem => elem)}
+        </View>
+        <ScrollView style={styles.layoutContainer}>
+          <View style={styles.controlSpace}>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Flex Direction"
+                onPress={() =>
+                  changeSetting(flexDirection, flexDirections, setFlexDirection)
+                }
+              />
+              <Text style={styles.text}>{flexDirections[flexDirection]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Justify Content"
+                onPress={() =>
+                  changeSetting(
+                    justifyContent,
+                    justifyContents,
+                    setJustifyContent,
+                  )
+                }
+              />
+              <Text style={styles.text}>{justifyContents[justifyContent]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Align Items"
+                onPress={() =>
+                  changeSetting(alignItems, alignItemsArr, setAlignItems)
+                }
+              />
+              <Text style={styles.text}>{alignItemsArr[alignItems]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Direction"
+                onPress={() =>
+                  changeSetting(direction, directions, setDirection)
+                }
+              />
+              <Text style={styles.text}>{directions[direction]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Flex Wrap"
+                onPress={() => changeSetting(wrap, wraps, setWrap)}
+              />
+              <Text style={styles.text}>{wraps[wrap]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Add Square"
+                onPress={() => setSquares([...squares, <Square />])}
+              />
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Delete Square"
+                onPress={() =>
+                  setSquares(squares.filter((v, i) => i !== squares.length - 1))
+                }
+              />
+            </View>
+          </View>
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const flexDirections = ['row', 'row-reverse', 'column', 'column-reverse'];
+const justifyContents = [
+  'flex-start',
+  'flex-end',
+  'center',
+  'space-between',
+  'space-around',
+  'space-evenly',
+];
+const alignItemsArr = [
+  'flex-start',
+  'flex-end',
+  'center',
+  'stretch',
+  'baseline',
+];
+const wraps = ['nowrap', 'wrap', 'wrap-reverse'];
+const directions = ['inherit', 'ltr', 'rtl'];
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  layoutContainer: {
+    flex: 0.5,
+  },
+  playingSpace: {
+    backgroundColor: 'white',
+    borderColor: 'blue',
+    borderWidth: 3,
+    overflow: 'hidden',
+  },
+  controlSpace: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  buttonView: {
+    width: '50%',
+    padding: 10,
+  },
+  text: {
+    textAlign: 'center',
+  },
+});
+
+const Square = () => (
+  <View
+    style={{
+      width: 50,
+      height: 50,
+      backgroundColor: randomHexColor(),
+    }}
+  />
+);
+
+const randomHexColor = () => {
+  return '#000000'.replace(/0/g, () => {
+    return Math.round(Math.random() * 14).toString(16);
+  });
+};
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=LayoutProps%20Example&ext=tsx
+import {useState} from 'react';
+import {
+  Button,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+  FlexAlignType,
+  FlexStyle,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [flexDirection, setFlexDirection] = useState(0);
+  const [justifyContent, setJustifyContent] = useState(0);
+  const [alignItems, setAlignItems] = useState(0);
+  const [direction, setDirection] = useState(0);
+  const [wrap, setWrap] = useState(0);
+
+  const [squares, setSquares] = useState([<Square />, <Square />, <Square />]);
+
+  const hookedStyles = {
+    flexDirection: flexDirections[flexDirection],
+    justifyContent: justifyContents[justifyContent],
+    alignItems: alignItemsArr[alignItems],
+    direction: directions[direction],
+    flexWrap: wraps[wrap],
+  } as FlexStyle;
+
+  const changeSetting = (
+    value: number,
+    options: any[],
+    setterFunction: (index: number) => void,
+  ) => {
+    if (value === options.length - 1) {
+      setterFunction(0);
+      return;
+    }
+    setterFunction(value + 1);
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={[styles.container, styles.playingSpace, hookedStyles]}>
+          {squares.map(elem => elem)}
+        </View>
+        <ScrollView style={styles.layoutContainer}>
+          <View style={styles.controlSpace}>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Flex Direction"
+                onPress={() =>
+                  changeSetting(flexDirection, flexDirections, setFlexDirection)
+                }
+              />
+              <Text style={styles.text}>{flexDirections[flexDirection]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Justify Content"
+                onPress={() =>
+                  changeSetting(
+                    justifyContent,
+                    justifyContents,
+                    setJustifyContent,
+                  )
+                }
+              />
+              <Text style={styles.text}>{justifyContents[justifyContent]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Align Items"
+                onPress={() =>
+                  changeSetting(alignItems, alignItemsArr, setAlignItems)
+                }
+              />
+              <Text style={styles.text}>{alignItemsArr[alignItems]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Direction"
+                onPress={() =>
+                  changeSetting(direction, directions, setDirection)
+                }
+              />
+              <Text style={styles.text}>{directions[direction]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Flex Wrap"
+                onPress={() => changeSetting(wrap, wraps, setWrap)}
+              />
+              <Text style={styles.text}>{wraps[wrap]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Add Square"
+                onPress={() => setSquares([...squares, <Square />])}
+              />
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Delete Square"
+                onPress={() =>
+                  setSquares(squares.filter((v, i) => i !== squares.length - 1))
+                }
+              />
+            </View>
+          </View>
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const flexDirections = [
+  'row',
+  'row-reverse',
+  'column',
+  'column-reverse',
+] as FlexStyle['flexDirection'][];
+const justifyContents = [
+  'flex-start',
+  'flex-end',
+  'center',
+  'space-between',
+  'space-around',
+  'space-evenly',
+] as FlexStyle['justifyContent'][];
+const alignItemsArr = [
+  'flex-start',
+  'flex-end',
+  'center',
+  'stretch',
+  'baseline',
+] as FlexAlignType[];
+const wraps = ['nowrap', 'wrap', 'wrap-reverse'];
+const directions = ['inherit', 'ltr', 'rtl'];
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  layoutContainer: {
+    flex: 0.5,
+  },
+  playingSpace: {
+    backgroundColor: 'white',
+    borderColor: 'blue',
+    borderWidth: 3,
+    overflow: 'hidden',
+  },
+  controlSpace: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  buttonView: {
+    width: '50%',
+    padding: 10,
+  },
+  text: {
+    textAlign: 'center',
+  },
+});
+
+const Square = () => (
+  <View
+    style={{
+      width: 50,
+      height: 50,
+      backgroundColor: randomHexColor(),
+    }}
+  />
+);
+
+const randomHexColor = () => {
+  return '#000000'.replace(/0/g, () => {
+    return Math.round(Math.random() * 14).toString(16);
+  });
+};
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+---
+
+# Reference
+
+## Props
+
+### `alignContent`
+
+`alignContent` controls how rows align in the cross direction, overriding the `alignContent` of the parent.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) for more details.
+
+| Type                                                                                                 | Required |
+| ---------------------------------------------------------------------------------------------------- | -------- |
+| enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around', 'space-evenly') | No       |
+
+---
+
+### `alignItems`
+
+`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS (default: stretch).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) for more details.
+
+| Type                                                            | Required |
+| --------------------------------------------------------------- | -------- |
+| enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline') | No       |
+
+---
+
+### `alignSelf`
+
+`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS (default: auto).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) for more details.
+
+| Type                                                                    | Required |
+| ----------------------------------------------------------------------- | -------- |
+| enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline') | No       |
+
+---
+
+### `aspectRatio`
+
+Aspect ratio controls the size of the undefined dimension of a node.
+
+- On a node with a set width/height, aspect ratio controls the size of the unset dimension
+- On a node with a set flex basis, aspect ratio controls the size of the node in the cross axis if unset
+- On a node with a measure function, aspect ratio works as though the measure function measures the flex basis
+- On a node with flex grow/shrink, aspect ratio controls the size of the node in the cross axis if unset
+- Aspect ratio takes min/max dimensions into account
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `borderBottomWidth`
+
+`borderBottomWidth` works like `border-bottom-width` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderEndWidth`
+
+When direction is `ltr`, `borderEndWidth` is equivalent to `borderRightWidth`. When direction is `rtl`, `borderEndWidth` is equivalent to `borderLeftWidth`.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderLeftWidth`
+
+`borderLeftWidth` works like `border-left-width` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderRightWidth`
+
+`borderRightWidth` works like `border-right-width` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderStartWidth`
+
+When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. When direction is `rtl`, `borderStartWidth` is equivalent to `borderRightWidth`.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderTopWidth`
+
+`borderTopWidth` works like `border-top-width` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderWidth`
+
+`borderWidth` works like `border-width` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `bottom`
+
+`bottom` is the number of logical pixels to offset the bottom edge of this component.
+
+It works similarly to `bottom` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) for more details of how `bottom` affects layout.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `boxSizing`
+
+`boxSizing` defines how the element's various sizing props (`width`, `height`, `minWidth`, `minHeight`, etc.) are computed. If `boxSizing` is `border-box`, these sizes apply to the border box of the element. If it is `content-box`, they apply to the content box of the element. The default value is `border-box`. The [web documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) is a good source of information if you wish to learn more about how this prop works.
+
+| Type                              | Required |
+| --------------------------------- | -------- |
+| enum('border-box', 'content-box') | No       |
+
+---
+
+### `columnGap`
+
+`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `direction`
+
+`direction` specifies the directional flow of the user interface. The default is `inherit`, except for root node which will have value based on the current locale.
+
+See [MDN CSS Reference](https://www.yogalayout.dev/docs/styling/layout-direction) for more details.
+
+| Type                          | Required |
+| ----------------------------- | -------- |
+| enum('inherit', 'ltr', 'rtl') | No       |
+
+---
+
+### `display`
+
+`display` sets the display type of this component.
+
+It works similarly to `display` in CSS but only supports the values 'flex', 'none', and 'contents'. The default is `flex`.
+
+| Type                             | Required |
+| -------------------------------- | -------- |
+| enum('none', 'flex', 'contents') | No       |
+
+---
+
+### `end`
+
+When the direction is `ltr`, `end` is equivalent to `right`. When the direction is `rtl`, `end` is equivalent to `left`.
+
+This style takes precedence over the `left` and `right` styles.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `flex`
+
+In React Native `flex` does not work the same way that it does in CSS. `flex` is a number rather than a string, and it works according to the [Yoga](https://github.com/facebook/yoga) layout engine.
+
+When `flex` is a positive number, it makes the component flexible, and it will be sized proportional to its flex value. So a component with `flex` set to `2` will take twice the space as a component with `flex` set to 1. `flex: <positive number>` equates to `flexGrow: <positive number>, flexShrink: 1, flexBasis: 0`.
+
+When `flex` is `0`, the component is sized according to `width` and `height`, and it is inflexible.
+
+When `flex` is `-1`, the component is normally sized according to `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`.
+
+`flexGrow`, `flexShrink`, and `flexBasis` work the same as in CSS.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `flexBasis`
+
+`flexBasis` is an axis-independent way of providing the default size of an item along the main axis. Setting the `flexBasis` of a child is similar to setting the `width` of that child if its parent is a container with `flexDirection: row` or setting the `height` of a child if its parent is a container with `flexDirection: column`. The `flexBasis` of an item is the default size of that item, the size of the item before any `flexGrow` and `flexShrink` calculations are performed.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `flexDirection`
+
+`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) for more details.
+
+| Type                                                   | Required |
+| ------------------------------------------------------ | -------- |
+| enum('row', 'row-reverse', 'column', 'column-reverse') | No       |
+
+---
+
+### `flexGrow`
+
+`flexGrow` describes how any space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
+
+`flexGrow` accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the children’s `flexGrow` values.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `flexShrink`
+
+[`flexShrink`](layout-props#flexshrink) describes how to shrink children along the main axis in the case in which the total size of the children overflows the size of the container on the main axis. `flexShrink` is very similar to `flexGrow` and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed.
+
+`flexShrink` accepts any floating point value >= 0, with 0 being the default value. A container will shrink its children weighted by the children’s `flexShrink` values.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `flexWrap`
+
+`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS (default: nowrap).
+
+Note it does not work anymore with `alignItems: stretch` (the default), so you may want to use `alignItems: flex-start` for example (breaking change details: https://github.com/facebook/react-native/releases/tag/v0.28.0).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) for more details.
+
+| Type                                   | Required |
+| -------------------------------------- | -------- |
+| enum('wrap', 'nowrap', 'wrap-reverse') | No       |
+
+---
+
+### `gap`
+
+`gap` works like `gap` in CSS. Only pixel units are supported in React Native.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `height`
+
+`height` sets the height of this component.
+
+It works similarly to `height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/height) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `inset`
+
+:::note
+`inset` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Setting `inset` has the same effect as setting each of `top`, `bottom`, `right` and `left` props.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/inset) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetBlock`
+
+:::note
+`insetBlock` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Equivalent to [`top`](layout-props#top) and [`bottom`](layout-props#bottom).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetBlockEnd`
+
+:::note
+`insetBlockEnd` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Equivalent to [`bottom`](layout-props#bottom).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetBlockStart`
+
+:::note
+`insetBlockStart` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Equivalent to [`top`](layout-props#top).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetInline`
+
+:::note
+`insetInline` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Equivalent to [`right`](layout-props#right) and [`left`](layout-props#left).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetInlineEnd`
+
+:::note
+`insetInlineEnd` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+When direction is `ltr`, `insetInlineEnd` is equivalent to [`right`](layout-props#right). When direction is `rtl`, `insetInlineEnd` is equivalent to [`left`](layout-props#left).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetInlineStart`
+
+:::note
+`insetInlineStart` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+When direction is `ltr`, `insetInlineStart` is equivalent to [`left`](layout-props#left). When direction is `rtl`, `insetInlineStart` is equivalent to [`right`](layout-props#right).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `isolation`
+
+:::note
+`isolation` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+`isolation` lets you form a [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context).
+
+There are two values:
+
+- `auto` (default): Does nothing.
+- `isolate`: Forms a stacking context.
+
+| Type                    | Required |
+| ----------------------- | -------- |
+| enum('auto', 'isolate') | No       |
+
+---
+
+### `justifyContent`
+
+`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS (default: flex-start).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) for more details.
+
+| Type                                                                                      | Required |
+| ----------------------------------------------------------------------------------------- | -------- |
+| enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly') | No       |
+
+---
+
+### `left`
+
+`left` is the number of logical pixels to offset the left edge of this component.
+
+It works similarly to `left` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/left) for more details of how `left` affects layout.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `margin`
+
+Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginBottom`
+
+`marginBottom` works like `margin-bottom` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginBlock`
+
+Equivalent to [`marginVertical`](layout-props#marginvertical).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginBlockEnd`
+
+Equivalent to [`marginBottom`](layout-props#marginbottom).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginBlockStart`
+
+Equivalent to [`marginTop`](layout-props#margintop).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginEnd`
+
+When direction is `ltr`, `marginEnd` is equivalent to `marginRight`. When direction is `rtl`, `marginEnd` is equivalent to `marginLeft`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginHorizontal`
+
+Setting `marginHorizontal` has the same effect as setting both `marginLeft` and `marginRight`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginInline`
+
+Equivalent to [`marginHorizontal`](layout-props#marginhorizontal).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginInlineEnd`
+
+When direction is `ltr`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginRight`). When direction is `rtl`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginLeft`).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginInlineStart`
+
+When direction is `ltr`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginLeft`). When direction is `rtl`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginRight`).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginLeft`
+
+`marginLeft` works like `margin-left` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginRight`
+
+`marginRight` works like `margin-right` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginStart`
+
+When direction is `ltr`, `marginStart` is equivalent to `marginLeft`. When direction is `rtl`, `marginStart` is equivalent to `marginRight`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginTop`
+
+`marginTop` works like `margin-top` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginVertical`
+
+Setting `marginVertical` has the same effect as setting both `marginTop` and `marginBottom`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `maxHeight`
+
+`maxHeight` is the maximum height for this component, in logical pixels.
+
+It works similarly to `max-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `maxWidth`
+
+`maxWidth` is the maximum width for this component, in logical pixels.
+
+It works similarly to `max-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `minHeight`
+
+`minHeight` is the minimum height for this component, in logical pixels.
+
+It works similarly to `min-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `minWidth`
+
+`minWidth` is the minimum width for this component, in logical pixels.
+
+It works similarly to `min-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `overflow`
+
+`overflow` controls how children are measured and displayed. `overflow: hidden` causes views to be clipped while `overflow: scroll` causes views to be measured independently of their parents' main axis. It works like `overflow` in CSS (default: visible).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) for more details.
+
+| Type                                | Required |
+| ----------------------------------- | -------- |
+| enum('visible', 'hidden', 'scroll') | No       |
+
+---
+
+### `padding`
+
+Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingBottom`
+
+`paddingBottom` works like `padding-bottom` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingBlock`
+
+Equivalent to [`paddingVertical`](layout-props#paddingvertical).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingBlockEnd`
+
+Equivalent to [`paddingBottom`](layout-props#paddingbottom).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingBlockStart`
+
+Equivalent to [`paddingTop`](layout-props#paddingtop).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingEnd`
+
+When direction is `ltr`, `paddingEnd` is equivalent to `paddingRight`. When direction is `rtl`, `paddingEnd` is equivalent to `paddingLeft`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingHorizontal`
+
+Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRight`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingInline`
+
+Equivalent to [`paddingHorizontal`](layout-props#paddinghorizontal).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingInlineEnd`
+
+When direction is `ltr`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingRight`). When direction is `rtl`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingLeft`).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingInlineStart`
+
+When direction is `ltr`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingLeft`). When direction is `rtl`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingRight`).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingLeft`
+
+`paddingLeft` works like `padding-left` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingRight`
+
+`paddingRight` works like `padding-right` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingStart`
+
+When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`. When direction is `rtl`, `paddingStart` is equivalent to `paddingRight`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingTop`
+
+`paddingTop` works like `padding-top` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingVertical`
+
+Setting `paddingVertical` is like setting both of `paddingTop` and `paddingBottom`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `position`
+
+`position` in React Native is similar to [regular CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/position), but everything is set to `relative` by default.
+
+`relative` will position an element according to the normal flow of the layout. Insets (`top`, `bottom`, `left`, `right`) will offset relative to this layout.
+
+`absolute` takes the element out of the normal flow of the layout. Insets will offset relative to its [containing block](./flexbox.md#the-containing-block).
+
+`static` will position an element according to the normal flow of the layout. Insets will have no effect.
+`static` elements do not form a containing block for absolute descendants.
+
+For more information, see the [Layout with Flexbox docs](./flexbox.md#position). Also, [the Yoga documentation](https://www.yogalayout.dev/docs/styling/position) has more details on how `position` differs between React Native and CSS.
+
+| Type                                   | Required |
+| -------------------------------------- | -------- |
+| enum('absolute', 'relative', 'static') | No       |
+
+---
+
+### `right`
+
+`right` is the number of logical pixels to offset the right edge of this component.
+
+It works similarly to `right` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) for more details of how `right` affects layout.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `rowGap`
+
+`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `start`
+
+When the direction is `ltr`, `start` is equivalent to `left`. When the direction is `rtl`, `start` is equivalent to `right`.
+
+This style takes precedence over the `left`, `right`, and `end` styles.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `top`
+
+`top` is the number of logical pixels to offset the top edge of this component.
+
+It works similarly to `top` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/top) for more details of how `top` affects layout.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `width`
+
+`width` sets the width of this component.
+
+It works similarly to `width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/width) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `zIndex`
+
+`zIndex` controls which components display on top of others. Normally, you don't use `zIndex`. Components render according to their order in the document tree, so later components draw over earlier ones. `zIndex` may be useful if you have animations or custom modal interfaces where you don't want this behavior.
+
+It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball.
+
+On iOS, `zIndex` may require `View`s to be siblings of each other for it to work as expected.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
diff --git a/website/versioned_docs/version-0.81/layoutanimation.md b/website/versioned_docs/version-0.81/layoutanimation.md
index 911a247c8c7..24a7d060d1e 100644
--- a/website/versioned_docs/version-0.81/layoutanimation.md
+++ b/website/versioned_docs/version-0.81/layoutanimation.md
@@ -1,358 +1,358 @@
----
-id: layoutanimation
-title: LayoutAnimation
----
-
-Automatically animates views to their new positions when the next layout happens.
-
-A common way to use this API is to call it before updating the state hook in functional components and calling `setState` in class components.
-
-Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`:
-
-```js
-if (Platform.OS === 'android') {
-  if (UIManager.setLayoutAnimationEnabledExperimental) {
-    UIManager.setLayoutAnimationEnabledExperimental(true);
-  }
-}
-```
-
-## Example
-
-```SnackPlayer name=LayoutAnimation%20Example&supportedPlatforms=android,ios
-import React, {useState} from 'react';
-import {
-  LayoutAnimation,
-  Platform,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  UIManager,
-  View,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-if (
-  Platform.OS === 'android' &&
-  UIManager.setLayoutAnimationEnabledExperimental
-) {
-  UIManager.setLayoutAnimationEnabledExperimental(true);
-}
-const App = () => {
-  const [expanded, setExpanded] = useState(false);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={style.container}>
-        <TouchableOpacity
-          onPress={() => {
-            LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
-            setExpanded(!expanded);
-          }}>
-          <Text>Press me to {expanded ? 'collapse' : 'expand'}!</Text>
-        </TouchableOpacity>
-        {expanded && (
-          <View style={style.tile}>
-            <Text>I disappear sometimes!</Text>
-          </View>
-        )}
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const style = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    gap: 16,
-  },
-  tile: {
-    backgroundColor: 'lightgrey',
-    borderWidth: 0.5,
-    borderColor: '#d6d7da',
-    padding: 4,
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Methods
-
-### `configureNext()`
-
-```tsx
-static configureNext(
-  config: LayoutAnimationConfig,
-  onAnimationDidEnd?: () => void,
-  onAnimationDidFail?: () => void,
-);
-```
-
-Schedules an animation to happen on the next layout.
-
-#### Parameters:
-
-| Name               | Type     | Required | Description                         |
-| ------------------ | -------- | -------- | ----------------------------------- |
-| config             | object   | Yes      | See config description below.       |
-| onAnimationDidEnd  | function | No       | Called when the animation finished. |
-| onAnimationDidFail | function | No       | Called when the animation failed.   |
-
-The `config` parameter is an object with the keys below. [`create`](layoutanimation.md#create) returns a valid object for `config`, and the [`Presets`](layoutanimation.md#presets) objects can also all be passed as the `config`.
-
-- `duration` in milliseconds
-- `create`, optional config for animating in new views
-- `update`, optional config for animating views that have been updated
-- `delete`, optional config for animating views as they are removed
-
-The config that's passed to `create`, `update`, or `delete` has the following keys:
-
-- `type`, the [animation type](layoutanimation.md#types) to use
-- `property`, the [layout property](layoutanimation.md#properties) to animate (optional, but recommended for `create` and `delete`)
-- `springDamping` (number, optional and only for use with `type: Type.spring`)
-- `initialVelocity` (number, optional)
-- `delay` (number, optional)
-- `duration` (number, optional)
-
----
-
-### `create()`
-
-```tsx
-static create(duration, type, creationProp)
-```
-
-Helper that creates an object (with `create`, `update`, and `delete` fields) to pass into [`configureNext`](layoutanimation.md#configurenext). The `type` parameter is an [animation type](layoutanimation.md#types), and the `creationProp` parameter is a [layout property](layoutanimation.md#properties).
-
-**Example:**
-
-```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios
-import React, {useState} from 'react';
-import {
-  View,
-  Platform,
-  UIManager,
-  LayoutAnimation,
-  StyleSheet,
-  Button,
-} from 'react-native';
-
-if (
-  Platform.OS === 'android' &&
-  UIManager.setLayoutAnimationEnabledExperimental
-) {
-  UIManager.setLayoutAnimationEnabledExperimental(true);
-}
-
-const App = () => {
-  const [boxPosition, setBoxPosition] = useState('left');
-
-  const toggleBox = () => {
-    LayoutAnimation.configureNext({
-      duration: 500,
-      create: {type: 'linear', property: 'opacity'},
-      update: {type: 'spring', springDamping: 0.4},
-      delete: {type: 'linear', property: 'opacity'},
-    });
-    setBoxPosition(boxPosition === 'left' ? 'right' : 'left');
-  };
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.buttonContainer}>
-        <Button title="Toggle Layout" onPress={toggleBox} />
-      </View>
-      <View
-        style={[styles.box, boxPosition === 'left' ? null : styles.moveRight]}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'flex-start',
-    justifyContent: 'center',
-  },
-  box: {
-    height: 100,
-    width: 100,
-    borderRadius: 5,
-    margin: 8,
-    backgroundColor: 'blue',
-  },
-  moveRight: {
-    alignSelf: 'flex-end',
-    height: 200,
-    width: 200,
-  },
-  buttonContainer: {
-    alignSelf: 'center',
-  },
-});
-
-export default App;
-```
-
-## Properties
-
-### Types
-
-An enumeration of animation types to be used in the [`create`](layoutanimation.md#create) method, or in the `create`/`update`/`delete` configs for [`configureNext`](layoutanimation.md#configurenext). (example usage: `LayoutAnimation.Types.easeIn`)
-
-| Types         |
-| ------------- |
-| spring        |
-| linear        |
-| easeInEaseOut |
-| easeIn        |
-| easeOut       |
-| keyboard      |
-
----
-
-### Properties
-
-An enumeration of layout properties to be animated to be used in the [`create`](layoutanimation.md#create) method, or in the `create`/`update`/`delete` configs for [`configureNext`](layoutanimation.md#configurenext). (example usage: `LayoutAnimation.Properties.opacity`)
-
-| Properties |
-| ---------- |
-| opacity    |
-| scaleX     |
-| scaleY     |
-| scaleXY    |
-
----
-
-### Presets
-
-A set of predefined animation configs to pass into [`configureNext`](layoutanimation.md#configurenext).
-
-| Presets       | Value                                                                                                                                                          |
-| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| easeInEaseOut | `create(300, 'easeInEaseOut', 'opacity')`                                                                                                                      |
-| linear        | `create(500, 'linear', 'opacity')`                                                                                                                             |
-| spring        | `{duration: 700, create: {type: 'linear', property: 'opacity'}, update: {type: 'spring', springDamping: 0.4}, delete: {type: 'linear', property: 'opacity'} }` |
-
----
-
-### `easeInEaseOut`
-
-Calls `configureNext()` with `Presets.easeInEaseOut`.
-
----
-
-### `linear`
-
-Calls `configureNext()` with `Presets.linear`.
-
----
-
-### `spring`
-
-Calls `configureNext()` with `Presets.spring`.
-
-**Example:**
-
-```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios
-import React, {useState} from 'react';
-import {
-  View,
-  Platform,
-  UIManager,
-  LayoutAnimation,
-  StyleSheet,
-  Button,
-} from 'react-native';
-
-if (
-  Platform.OS === 'android' &&
-  UIManager.setLayoutAnimationEnabledExperimental
-) {
-  UIManager.setLayoutAnimationEnabledExperimental(true);
-}
-
-const App = () => {
-  const [firstBoxPosition, setFirstBoxPosition] = useState('left');
-  const [secondBoxPosition, setSecondBoxPosition] = useState('left');
-  const [thirdBoxPosition, setThirdBoxPosition] = useState('left');
-
-  const toggleFirstBox = () => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-    setFirstBoxPosition(firstBoxPosition === 'left' ? 'right' : 'left');
-  };
-
-  const toggleSecondBox = () => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
-    setSecondBoxPosition(secondBoxPosition === 'left' ? 'right' : 'left');
-  };
-
-  const toggleThirdBox = () => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
-    setThirdBoxPosition(thirdBoxPosition === 'left' ? 'right' : 'left');
-  };
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.buttonContainer}>
-        <Button title="EaseInEaseOut" onPress={toggleFirstBox} />
-      </View>
-      <View
-        style={[
-          styles.box,
-          firstBoxPosition === 'left' ? null : styles.moveRight,
-        ]}
-      />
-      <View style={styles.buttonContainer}>
-        <Button title="Linear" onPress={toggleSecondBox} />
-      </View>
-      <View
-        style={[
-          styles.box,
-          secondBoxPosition === 'left' ? null : styles.moveRight,
-        ]}
-      />
-      <View style={styles.buttonContainer}>
-        <Button title="Spring" onPress={toggleThirdBox} />
-      </View>
-      <View
-        style={[
-          styles.box,
-          thirdBoxPosition === 'left' ? null : styles.moveRight,
-        ]}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'flex-start',
-    justifyContent: 'center',
-  },
-  box: {
-    height: 100,
-    width: 100,
-    borderRadius: 5,
-    margin: 8,
-    backgroundColor: 'blue',
-  },
-  moveRight: {
-    alignSelf: 'flex-end',
-  },
-  buttonContainer: {
-    alignSelf: 'center',
-  },
-});
-
-export default App;
-```
+---
+id: layoutanimation
+title: LayoutAnimation
+---
+
+Automatically animates views to their new positions when the next layout happens.
+
+A common way to use this API is to call it before updating the state hook in functional components and calling `setState` in class components.
+
+Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`:
+
+```js
+if (Platform.OS === 'android') {
+  if (UIManager.setLayoutAnimationEnabledExperimental) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+  }
+}
+```
+
+## Example
+
+```SnackPlayer name=LayoutAnimation%20Example&supportedPlatforms=android,ios
+import {useState} from 'react';
+import {
+  LayoutAnimation,
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  UIManager,
+  View,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+if (
+  Platform.OS === 'android' &&
+  UIManager.setLayoutAnimationEnabledExperimental
+) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+const App = () => {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={style.container}>
+        <TouchableOpacity
+          onPress={() => {
+            LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
+            setExpanded(!expanded);
+          }}>
+          <Text>Press me to {expanded ? 'collapse' : 'expand'}!</Text>
+        </TouchableOpacity>
+        {expanded && (
+          <View style={style.tile}>
+            <Text>I disappear sometimes!</Text>
+          </View>
+        )}
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const style = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 16,
+  },
+  tile: {
+    backgroundColor: 'lightgrey',
+    borderWidth: 0.5,
+    borderColor: '#d6d7da',
+    padding: 4,
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `configureNext()`
+
+```tsx
+static configureNext(
+  config: LayoutAnimationConfig,
+  onAnimationDidEnd?: () => void,
+  onAnimationDidFail?: () => void,
+);
+```
+
+Schedules an animation to happen on the next layout.
+
+#### Parameters:
+
+| Name               | Type     | Required | Description                         |
+| ------------------ | -------- | -------- | ----------------------------------- |
+| config             | object   | Yes      | See config description below.       |
+| onAnimationDidEnd  | function | No       | Called when the animation finished. |
+| onAnimationDidFail | function | No       | Called when the animation failed.   |
+
+The `config` parameter is an object with the keys below. [`create`](layoutanimation.md#create) returns a valid object for `config`, and the [`Presets`](layoutanimation.md#presets) objects can also all be passed as the `config`.
+
+- `duration` in milliseconds
+- `create`, optional config for animating in new views
+- `update`, optional config for animating views that have been updated
+- `delete`, optional config for animating views as they are removed
+
+The config that's passed to `create`, `update`, or `delete` has the following keys:
+
+- `type`, the [animation type](layoutanimation.md#types) to use
+- `property`, the [layout property](layoutanimation.md#properties) to animate (optional, but recommended for `create` and `delete`)
+- `springDamping` (number, optional and only for use with `type: Type.spring`)
+- `initialVelocity` (number, optional)
+- `delay` (number, optional)
+- `duration` (number, optional)
+
+---
+
+### `create()`
+
+```tsx
+static create(duration, type, creationProp)
+```
+
+Helper that creates an object (with `create`, `update`, and `delete` fields) to pass into [`configureNext`](layoutanimation.md#configurenext). The `type` parameter is an [animation type](layoutanimation.md#types), and the `creationProp` parameter is a [layout property](layoutanimation.md#properties).
+
+**Example:**
+
+```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios
+import {useState} from 'react';
+import {
+  View,
+  Platform,
+  UIManager,
+  LayoutAnimation,
+  StyleSheet,
+  Button,
+} from 'react-native';
+
+if (
+  Platform.OS === 'android' &&
+  UIManager.setLayoutAnimationEnabledExperimental
+) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+const App = () => {
+  const [boxPosition, setBoxPosition] = useState('left');
+
+  const toggleBox = () => {
+    LayoutAnimation.configureNext({
+      duration: 500,
+      create: {type: 'linear', property: 'opacity'},
+      update: {type: 'spring', springDamping: 0.4},
+      delete: {type: 'linear', property: 'opacity'},
+    });
+    setBoxPosition(boxPosition === 'left' ? 'right' : 'left');
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.buttonContainer}>
+        <Button title="Toggle Layout" onPress={toggleBox} />
+      </View>
+      <View
+        style={[styles.box, boxPosition === 'left' ? null : styles.moveRight]}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+  },
+  box: {
+    height: 100,
+    width: 100,
+    borderRadius: 5,
+    margin: 8,
+    backgroundColor: 'blue',
+  },
+  moveRight: {
+    alignSelf: 'flex-end',
+    height: 200,
+    width: 200,
+  },
+  buttonContainer: {
+    alignSelf: 'center',
+  },
+});
+
+export default App;
+```
+
+## Properties
+
+### Types
+
+An enumeration of animation types to be used in the [`create`](layoutanimation.md#create) method, or in the `create`/`update`/`delete` configs for [`configureNext`](layoutanimation.md#configurenext). (example usage: `LayoutAnimation.Types.easeIn`)
+
+| Types         |
+| ------------- |
+| spring        |
+| linear        |
+| easeInEaseOut |
+| easeIn        |
+| easeOut       |
+| keyboard      |
+
+---
+
+### Properties
+
+An enumeration of layout properties to be animated to be used in the [`create`](layoutanimation.md#create) method, or in the `create`/`update`/`delete` configs for [`configureNext`](layoutanimation.md#configurenext). (example usage: `LayoutAnimation.Properties.opacity`)
+
+| Properties |
+| ---------- |
+| opacity    |
+| scaleX     |
+| scaleY     |
+| scaleXY    |
+
+---
+
+### Presets
+
+A set of predefined animation configs to pass into [`configureNext`](layoutanimation.md#configurenext).
+
+| Presets       | Value                                                                                                                                                          |
+| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| easeInEaseOut | `create(300, 'easeInEaseOut', 'opacity')`                                                                                                                      |
+| linear        | `create(500, 'linear', 'opacity')`                                                                                                                             |
+| spring        | `{duration: 700, create: {type: 'linear', property: 'opacity'}, update: {type: 'spring', springDamping: 0.4}, delete: {type: 'linear', property: 'opacity'} }` |
+
+---
+
+### `easeInEaseOut`
+
+Calls `configureNext()` with `Presets.easeInEaseOut`.
+
+---
+
+### `linear`
+
+Calls `configureNext()` with `Presets.linear`.
+
+---
+
+### `spring`
+
+Calls `configureNext()` with `Presets.spring`.
+
+**Example:**
+
+```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios
+import {useState} from 'react';
+import {
+  View,
+  Platform,
+  UIManager,
+  LayoutAnimation,
+  StyleSheet,
+  Button,
+} from 'react-native';
+
+if (
+  Platform.OS === 'android' &&
+  UIManager.setLayoutAnimationEnabledExperimental
+) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+const App = () => {
+  const [firstBoxPosition, setFirstBoxPosition] = useState('left');
+  const [secondBoxPosition, setSecondBoxPosition] = useState('left');
+  const [thirdBoxPosition, setThirdBoxPosition] = useState('left');
+
+  const toggleFirstBox = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setFirstBoxPosition(firstBoxPosition === 'left' ? 'right' : 'left');
+  };
+
+  const toggleSecondBox = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
+    setSecondBoxPosition(secondBoxPosition === 'left' ? 'right' : 'left');
+  };
+
+  const toggleThirdBox = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
+    setThirdBoxPosition(thirdBoxPosition === 'left' ? 'right' : 'left');
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.buttonContainer}>
+        <Button title="EaseInEaseOut" onPress={toggleFirstBox} />
+      </View>
+      <View
+        style={[
+          styles.box,
+          firstBoxPosition === 'left' ? null : styles.moveRight,
+        ]}
+      />
+      <View style={styles.buttonContainer}>
+        <Button title="Linear" onPress={toggleSecondBox} />
+      </View>
+      <View
+        style={[
+          styles.box,
+          secondBoxPosition === 'left' ? null : styles.moveRight,
+        ]}
+      />
+      <View style={styles.buttonContainer}>
+        <Button title="Spring" onPress={toggleThirdBox} />
+      </View>
+      <View
+        style={[
+          styles.box,
+          thirdBoxPosition === 'left' ? null : styles.moveRight,
+        ]}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+  },
+  box: {
+    height: 100,
+    width: 100,
+    borderRadius: 5,
+    margin: 8,
+    backgroundColor: 'blue',
+  },
+  moveRight: {
+    alignSelf: 'flex-end',
+  },
+  buttonContainer: {
+    alignSelf: 'center',
+  },
+});
+
+export default App;
+```
diff --git a/website/versioned_docs/version-0.81/legacy/direct-manipulation.md b/website/versioned_docs/version-0.81/legacy/direct-manipulation.md
index b3e7e063414..9ba739abb15 100644
--- a/website/versioned_docs/version-0.81/legacy/direct-manipulation.md
+++ b/website/versioned_docs/version-0.81/legacy/direct-manipulation.md
@@ -1,444 +1,440 @@
----
-id: direct-manipulation
-title: Direct Manipulation
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-It is sometimes necessary to make changes directly to a component without using state/props to trigger a re-render of the entire subtree. When using React in the browser for example, you sometimes need to directly modify a DOM node, and the same is true for views in mobile apps. `setNativeProps` is the React Native equivalent to setting properties directly on a DOM node.
-
-:::caution
-Use `setNativeProps` when frequent re-rendering creates a performance bottleneck!
-
-Direct manipulation will not be a tool that you reach for frequently. You will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views.
-`setNativeProps` is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about.
-
-Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate).
-:::
-
-## setNativeProps with TouchableOpacity
-
-[TouchableOpacity](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js) uses `setNativeProps` internally to update the opacity of its child component:
-
-```tsx
-const viewRef = useRef<View>();
-const setOpacityTo = useCallback(value => {
-  // Redacted: animation related code
-  viewRef.current.setNativeProps({
-    opacity: value,
-  });
-}, []);
-```
-
-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:
-
-```tsx
-<TouchableOpacity onPress={handlePress}>
-  <View>
-    <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:
-
-```tsx
-const [buttonOpacity, setButtonOpacity] = useState(1);
-return (
-  <TouchableOpacity
-    onPressIn={() => setButtonOpacity(0.5)}
-    onPressOut={() => setButtonOpacity(1)}>
-    <View style={{opacity: buttonOpacity}}>
-      <Text>Press me!</Text>
-    </View>
-  </TouchableOpacity>
-);
-```
-
-This is computationally intensive compared to the original example - React needs to re-render the component hierarchy each time the opacity changes, even though other properties of the view and its children haven't changed. Usually this overhead isn't a concern but when performing continuous animations and responding to gestures, judiciously optimizing your components can improve your animations' fidelity.
-
-If you look at the implementation of `setNativeProps` in [NativeMethodsMixin](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js) you will notice that it is a wrapper around `RCTUIManager.updateView` - this is the exact same function call that results from re-rendering - see [receiveComponent in ReactNativeBaseComponent](https://github.com/facebook/react-native/blob/fb2ec1ea47c53c2e7b873acb1cb46192ac74274e/Libraries/Renderer/oss/ReactNativeRenderer-prod.js#L5793-L5813).
-
-## Composite components and setNativeProps
-
-Composite components are not backed by a native view, so you cannot call `setNativeProps` on them. Consider this example:
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=setNativeProps%20with%20Composite%20Components&ext=js
-import React from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
-
-const MyButton = props => (
-  <View style={{marginTop: 50}}>
-    <Text>{props.label}</Text>
-  </View>
-);
-
-const App = () => (
-  <TouchableOpacity>
-    <MyButton label="Press me!" />
-  </TouchableOpacity>
-);
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=setNativeProps%20with%20Composite%20Components&ext=tsx
-import React from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
-
-const MyButton = (props: {label: string}) => (
-  <View style={{marginTop: 50}}>
-    <Text>{props.label}</Text>
-  </View>
-);
-
-const App = () => (
-  <TouchableOpacity>
-    <MyButton label="Press me!" />
-  </TouchableOpacity>
-);
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-If you run this you will immediately see this error: `Touchable child must either be native or forward setNativeProps to a native component`. This occurs because `MyButton` isn't directly backed by a native view whose opacity should be set. You can think about it like this: if you define a component with `createReactClass` you would not expect to be able to set a style prop on it and have that work - you would need to pass the style prop down to a child, unless you are wrapping a native component. Similarly, we are going to forward `setNativeProps` to a native-backed child component.
-
-#### Forward setNativeProps to a child
-
-Since the `setNativeProps` method exists on any ref to a `View` component, it is enough to forward a ref on your custom component to one of the `<View />` components that it renders. This means that a call to `setNativeProps` on the custom component will have the same effect as if you called `setNativeProps` on the wrapped `View` component itself.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Forwarding%20setNativeProps&ext=js
-import React from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
-
-const MyButton = React.forwardRef((props, ref) => (
-  <View {...props} ref={ref} style={{marginTop: 50}}>
-    <Text>{props.label}</Text>
-  </View>
-));
-
-const App = () => (
-  <TouchableOpacity>
-    <MyButton label="Press me!" />
-  </TouchableOpacity>
-);
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Forwarding%20setNativeProps&ext=tsx
-import React from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
-
-const MyButton = React.forwardRef<View, {label: string}>((props, ref) => (
-  <View {...props} ref={ref} style={{marginTop: 50}}>
-    <Text>{props.label}</Text>
-  </View>
-));
-
-const App = () => (
-  <TouchableOpacity>
-    <MyButton label="Press me!" />
-  </TouchableOpacity>
-);
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-You can now use `MyButton` inside of `TouchableOpacity`!
-
-You may have noticed that we passed all of the props down to the child view using `{...props}`. The reason for this is that `TouchableOpacity` is actually a composite component, and so in addition to depending on `setNativeProps` on its child, it also requires that the child perform touch handling. To do this, it passes on [various props](view.md#onmoveshouldsetresponder) that call back to the `TouchableOpacity` component. `TouchableHighlight`, in contrast, is backed by a native view and only requires that we implement `setNativeProps`.
-
-## setNativeProps to edit TextInput value
-
-Another very common use case of `setNativeProps` is to edit the value of the TextInput. The `controlled` prop of TextInput can sometimes drop characters when the `bufferDelay` is low and the user types very quickly. Some developers prefer to skip this prop entirely and instead use `setNativeProps` to directly manipulate the TextInput value when necessary. For example, the following code demonstrates editing the input when you tap a button:
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Clear%20text&ext=js
-import React from 'react';
-import {useCallback, useRef} from 'react';
-import {
-  StyleSheet,
-  TextInput,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-
-const App = () => {
-  const inputRef = useRef(null);
-  const editText = useCallback(() => {
-    inputRef.current.setNativeProps({text: 'Edited Text'});
-  }, []);
-
-  return (
-    <View style={styles.container}>
-      <TextInput ref={inputRef} style={styles.input} />
-      <TouchableOpacity onPress={editText}>
-        <Text>Edit text</Text>
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  input: {
-    height: 50,
-    width: 200,
-    marginHorizontal: 20,
-    borderWidth: 1,
-    borderColor: '#ccc',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Clear%20text&ext=tsx
-import React from 'react';
-import {useCallback, useRef} from 'react';
-import {
-  StyleSheet,
-  TextInput,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-
-const App = () => {
-  const inputRef = useRef<TextInput>(null);
-  const editText = useCallback(() => {
-    inputRef.current?.setNativeProps({text: 'Edited Text'});
-  }, []);
-
-  return (
-    <View style={styles.container}>
-      <TextInput ref={inputRef} style={styles.input} />
-      <TouchableOpacity onPress={editText}>
-        <Text>Edit text</Text>
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  input: {
-    height: 50,
-    width: 200,
-    marginHorizontal: 20,
-    borderWidth: 1,
-    borderColor: '#ccc',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-You can use the [`clear`](../textinput#clear) method to clear the `TextInput` which clears the current input text using the same approach.
-
-## Avoiding conflicts with the render function
-
-If you update a property that is also managed by the render function, you might end up with some unpredictable and confusing bugs because anytime the component re-renders and that property changes, whatever value was previously set from `setNativeProps` will be completely ignored and overridden.
-
-## setNativeProps & shouldComponentUpdate
-
-By [intelligently applying `shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`.
-
-## Other native methods
-
-The methods described here are available on most of the default components provided by React Native. Note, however, that they are _not_ available on composite components that aren't directly backed by a native view. This will generally include most components that you define in your own app.
-
-### measure(callback)
-
-Determines the location on screen, width, and height in the viewport of the given view and returns the values via an async callback. If successful, the callback will be called with the following arguments:
-
-- x
-- y
-- width
-- height
-- pageX
-- pageY
-
-Note that these measurements are not available until after the rendering has been completed in native. If you need the measurements as soon as possible and you don't need `pageX` and `pageY`, consider using the [`onLayout`](view.md#onlayout) property instead.
-
-Also the width and height returned by `measure()` are the width and height of the component in the viewport. If you need the actual size of the component, consider using the [`onLayout`](view.md#onlayout) property instead.
-
-### measureInWindow(callback)
-
-Determines the location of the given view in the window and returns the values via an async callback. If the React root view is embedded in another native view, this will give you the absolute coordinates. If successful, the callback will be called with the following arguments:
-
-- x
-- y
-- width
-- height
-
-### measureLayout(relativeToNativeComponentRef, onSuccess, onFail)
-
-Like `measure()`, but measures the view relative to an ancestor, specified with `relativeToNativeComponentRef` reference. This means that the returned coordinates are relative to the origin `x`, `y` of the ancestor view.
-
-:::note
-This method can also be called with a `relativeToNativeNode` handler (instead of reference), but this variant is obsolete with the new architecture.
-:::
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=measureLayout%20example&supportedPlatforms=android,ios&ext=js
-import React, {useEffect, useRef, useState} from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-
-const App = () => {
-  const textContainerRef = useRef(null);
-  const textRef = useRef(null);
-  const [measure, setMeasure] = useState(null);
-
-  useEffect(() => {
-    if (textRef.current && textContainerRef.current) {
-      textRef.current.measureLayout(
-        textContainerRef.current,
-        (left, top, width, height) => {
-          setMeasure({left, top, width, height});
-        },
-      );
-    }
-  }, [measure]);
-
-  return (
-    <View style={styles.container}>
-      <View ref={textContainerRef} style={styles.textContainer}>
-        <Text ref={textRef}>Where am I? (relative to the text container)</Text>
-      </View>
-      <Text style={styles.measure}>{JSON.stringify(measure)}</Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  textContainer: {
-    backgroundColor: '#61dafb',
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 12,
-  },
-  measure: {
-    textAlign: 'center',
-    padding: 12,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=measureLayout%20example&ext=tsx
-import React, {useEffect, useRef, useState} from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-
-type Measurements = {
-  left: number;
-  top: number;
-  width: number;
-  height: number;
-};
-
-const App = () => {
-  const textContainerRef = useRef<View>(null);
-  const textRef = useRef<Text>(null);
-  const [measure, setMeasure] = useState<Measurements | null>(null);
-
-  useEffect(() => {
-    if (textRef.current && textContainerRef.current) {
-      textRef.current?.measureLayout(
-        textContainerRef.current,
-        (left, top, width, height) => {
-          setMeasure({left, top, width, height});
-        },
-        () => {
-          console.error('measurement failed');
-        },
-      );
-    }
-  }, [measure]);
-
-  return (
-    <View style={styles.container}>
-      <View ref={textContainerRef} style={styles.textContainer}>
-        <Text ref={textRef}>Where am I? (relative to the text container)</Text>
-      </View>
-      <Text style={styles.measure}>{JSON.stringify(measure)}</Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  textContainer: {
-    backgroundColor: '#61dafb',
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 12,
-  },
-  measure: {
-    textAlign: 'center',
-    padding: 12,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### focus()
-
-Requests focus for the given input or view. The exact behavior triggered will depend on the platform and type of view.
-
-### blur()
-
-Removes focus from an input or view. This is the opposite of `focus()`.
+---
+id: direct-manipulation
+title: Direct Manipulation
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+It is sometimes necessary to make changes directly to a component without using state/props to trigger a re-render of the entire subtree. When using React in the browser for example, you sometimes need to directly modify a DOM node, and the same is true for views in mobile apps. `setNativeProps` is the React Native equivalent to setting properties directly on a DOM node.
+
+:::caution
+Use `setNativeProps` when frequent re-rendering creates a performance bottleneck!
+
+Direct manipulation will not be a tool that you reach for frequently. You will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views.
+`setNativeProps` is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about.
+
+Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate).
+:::
+
+## setNativeProps with TouchableOpacity
+
+[TouchableOpacity](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js) uses `setNativeProps` internally to update the opacity of its child component:
+
+```tsx
+const viewRef = useRef<View>();
+const setOpacityTo = useCallback(value => {
+  // Redacted: animation related code
+  viewRef.current.setNativeProps({
+    opacity: value,
+  });
+}, []);
+```
+
+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:
+
+```tsx
+<TouchableOpacity onPress={handlePress}>
+  <View>
+    <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:
+
+```tsx
+const [buttonOpacity, setButtonOpacity] = useState(1);
+return (
+  <TouchableOpacity
+    onPressIn={() => setButtonOpacity(0.5)}
+    onPressOut={() => setButtonOpacity(1)}>
+    <View style={{opacity: buttonOpacity}}>
+      <Text>Press me!</Text>
+    </View>
+  </TouchableOpacity>
+);
+```
+
+This is computationally intensive compared to the original example - React needs to re-render the component hierarchy each time the opacity changes, even though other properties of the view and its children haven't changed. Usually this overhead isn't a concern but when performing continuous animations and responding to gestures, judiciously optimizing your components can improve your animations' fidelity.
+
+If you look at the implementation of `setNativeProps` in [NativeMethodsMixin](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js) you will notice that it is a wrapper around `RCTUIManager.updateView` - this is the exact same function call that results from re-rendering - see [receiveComponent in ReactNativeBaseComponent](https://github.com/facebook/react-native/blob/fb2ec1ea47c53c2e7b873acb1cb46192ac74274e/Libraries/Renderer/oss/ReactNativeRenderer-prod.js#L5793-L5813).
+
+## Composite components and setNativeProps
+
+Composite components are not backed by a native view, so you cannot call `setNativeProps` on them. Consider this example:
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=setNativeProps%20with%20Composite%20Components&ext=js
+import {Text, TouchableOpacity, View} from 'react-native';
+
+const MyButton = props => (
+  <View style={{marginTop: 50}}>
+    <Text>{props.label}</Text>
+  </View>
+);
+
+const App = () => (
+  <TouchableOpacity>
+    <MyButton label="Press me!" />
+  </TouchableOpacity>
+);
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=setNativeProps%20with%20Composite%20Components&ext=tsx
+import {Text, TouchableOpacity, View} from 'react-native';
+
+const MyButton = (props: {label: string}) => (
+  <View style={{marginTop: 50}}>
+    <Text>{props.label}</Text>
+  </View>
+);
+
+const App = () => (
+  <TouchableOpacity>
+    <MyButton label="Press me!" />
+  </TouchableOpacity>
+);
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+If you run this you will immediately see this error: `Touchable child must either be native or forward setNativeProps to a native component`. This occurs because `MyButton` isn't directly backed by a native view whose opacity should be set. You can think about it like this: if you define a component with `createReactClass` you would not expect to be able to set a style prop on it and have that work - you would need to pass the style prop down to a child, unless you are wrapping a native component. Similarly, we are going to forward `setNativeProps` to a native-backed child component.
+
+#### Forward setNativeProps to a child
+
+Since the `setNativeProps` method exists on any ref to a `View` component, it is enough to forward a ref on your custom component to one of the `<View />` components that it renders. This means that a call to `setNativeProps` on the custom component will have the same effect as if you called `setNativeProps` on the wrapped `View` component itself.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Forwarding%20setNativeProps&ext=js
+import {forwardRef} from 'react';
+import {Text, TouchableOpacity, View} from 'react-native';
+
+const MyButton = forwardRef((props, ref) => (
+  <View {...props} ref={ref} style={{marginTop: 50}}>
+    <Text>{props.label}</Text>
+  </View>
+));
+
+const App = () => (
+  <TouchableOpacity>
+    <MyButton label="Press me!" />
+  </TouchableOpacity>
+);
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Forwarding%20setNativeProps&ext=tsx
+import {forwardRef} from 'react';
+import {Text, TouchableOpacity, View} from 'react-native';
+
+const MyButton = forwardRef<View, {label: string}>((props, ref) => (
+  <View {...props} ref={ref} style={{marginTop: 50}}>
+    <Text>{props.label}</Text>
+  </View>
+));
+
+const App = () => (
+  <TouchableOpacity>
+    <MyButton label="Press me!" />
+  </TouchableOpacity>
+);
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+You can now use `MyButton` inside of `TouchableOpacity`!
+
+You may have noticed that we passed all of the props down to the child view using `{...props}`. The reason for this is that `TouchableOpacity` is actually a composite component, and so in addition to depending on `setNativeProps` on its child, it also requires that the child perform touch handling. To do this, it passes on [various props](view.md#onmoveshouldsetresponder) that call back to the `TouchableOpacity` component. `TouchableHighlight`, in contrast, is backed by a native view and only requires that we implement `setNativeProps`.
+
+## setNativeProps to edit TextInput value
+
+Another very common use case of `setNativeProps` is to edit the value of the TextInput. The `controlled` prop of TextInput can sometimes drop characters when the `bufferDelay` is low and the user types very quickly. Some developers prefer to skip this prop entirely and instead use `setNativeProps` to directly manipulate the TextInput value when necessary. For example, the following code demonstrates editing the input when you tap a button:
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Clear%20text&ext=js
+import {useCallback, useRef} from 'react';
+import {
+  StyleSheet,
+  TextInput,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+const App = () => {
+  const inputRef = useRef(null);
+  const editText = useCallback(() => {
+    inputRef.current.setNativeProps({text: 'Edited Text'});
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <TextInput ref={inputRef} style={styles.input} />
+      <TouchableOpacity onPress={editText}>
+        <Text>Edit text</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  input: {
+    height: 50,
+    width: 200,
+    marginHorizontal: 20,
+    borderWidth: 1,
+    borderColor: '#ccc',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Clear%20text&ext=tsx
+import {useCallback, useRef} from 'react';
+import {
+  StyleSheet,
+  TextInput,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+const App = () => {
+  const inputRef = useRef<TextInput>(null);
+  const editText = useCallback(() => {
+    inputRef.current?.setNativeProps({text: 'Edited Text'});
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <TextInput ref={inputRef} style={styles.input} />
+      <TouchableOpacity onPress={editText}>
+        <Text>Edit text</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  input: {
+    height: 50,
+    width: 200,
+    marginHorizontal: 20,
+    borderWidth: 1,
+    borderColor: '#ccc',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+You can use the [`clear`](../textinput#clear) method to clear the `TextInput` which clears the current input text using the same approach.
+
+## Avoiding conflicts with the render function
+
+If you update a property that is also managed by the render function, you might end up with some unpredictable and confusing bugs because anytime the component re-renders and that property changes, whatever value was previously set from `setNativeProps` will be completely ignored and overridden.
+
+## setNativeProps & shouldComponentUpdate
+
+By [intelligently applying `shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`.
+
+## Other native methods
+
+The methods described here are available on most of the default components provided by React Native. Note, however, that they are _not_ available on composite components that aren't directly backed by a native view. This will generally include most components that you define in your own app.
+
+### measure(callback)
+
+Determines the location on screen, width, and height in the viewport of the given view and returns the values via an async callback. If successful, the callback will be called with the following arguments:
+
+- x
+- y
+- width
+- height
+- pageX
+- pageY
+
+Note that these measurements are not available until after the rendering has been completed in native. If you need the measurements as soon as possible and you don't need `pageX` and `pageY`, consider using the [`onLayout`](view.md#onlayout) property instead.
+
+Also the width and height returned by `measure()` are the width and height of the component in the viewport. If you need the actual size of the component, consider using the [`onLayout`](view.md#onlayout) property instead.
+
+### measureInWindow(callback)
+
+Determines the location of the given view in the window and returns the values via an async callback. If the React root view is embedded in another native view, this will give you the absolute coordinates. If successful, the callback will be called with the following arguments:
+
+- x
+- y
+- width
+- height
+
+### measureLayout(relativeToNativeComponentRef, onSuccess, onFail)
+
+Like `measure()`, but measures the view relative to an ancestor, specified with `relativeToNativeComponentRef` reference. This means that the returned coordinates are relative to the origin `x`, `y` of the ancestor view.
+
+:::note
+This method can also be called with a `relativeToNativeNode` handler (instead of reference), but this variant is obsolete with the new architecture.
+:::
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=measureLayout%20example&supportedPlatforms=android,ios&ext=js
+import {useEffect, useRef, useState} from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+
+const App = () => {
+  const textContainerRef = useRef(null);
+  const textRef = useRef(null);
+  const [measure, setMeasure] = useState(null);
+
+  useEffect(() => {
+    if (textRef.current && textContainerRef.current) {
+      textRef.current.measureLayout(
+        textContainerRef.current,
+        (left, top, width, height) => {
+          setMeasure({left, top, width, height});
+        },
+      );
+    }
+  }, [measure]);
+
+  return (
+    <View style={styles.container}>
+      <View ref={textContainerRef} style={styles.textContainer}>
+        <Text ref={textRef}>Where am I? (relative to the text container)</Text>
+      </View>
+      <Text style={styles.measure}>{JSON.stringify(measure)}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  textContainer: {
+    backgroundColor: '#61dafb',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 12,
+  },
+  measure: {
+    textAlign: 'center',
+    padding: 12,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=measureLayout%20example&ext=tsx
+import {useEffect, useRef, useState} from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+
+type Measurements = {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+};
+
+const App = () => {
+  const textContainerRef = useRef<View>(null);
+  const textRef = useRef<Text>(null);
+  const [measure, setMeasure] = useState<Measurements | null>(null);
+
+  useEffect(() => {
+    if (textRef.current && textContainerRef.current) {
+      textRef.current?.measureLayout(
+        textContainerRef.current,
+        (left, top, width, height) => {
+          setMeasure({left, top, width, height});
+        },
+        () => {
+          console.error('measurement failed');
+        },
+      );
+    }
+  }, [measure]);
+
+  return (
+    <View style={styles.container}>
+      <View ref={textContainerRef} style={styles.textContainer}>
+        <Text ref={textRef}>Where am I? (relative to the text container)</Text>
+      </View>
+      <Text style={styles.measure}>{JSON.stringify(measure)}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  textContainer: {
+    backgroundColor: '#61dafb',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 12,
+  },
+  measure: {
+    textAlign: 'center',
+    padding: 12,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### focus()
+
+Requests focus for the given input or view. The exact behavior triggered will depend on the platform and type of view.
+
+### blur()
+
+Removes focus from an input or view. This is the opposite of `focus()`.
diff --git a/website/versioned_docs/version-0.81/legacy/native-components-android.md b/website/versioned_docs/version-0.81/legacy/native-components-android.md
index 9443d854c53..53d9854dca8 100644
--- a/website/versioned_docs/version-0.81/legacy/native-components-android.md
+++ b/website/versioned_docs/version-0.81/legacy/native-components-android.md
@@ -1,873 +1,873 @@
----
-id: native-components-android
-title: Android Native UI Components
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-import NativeDeprecated from '../the-new-architecture/\_markdown_native_deprecation.mdx'
-
-<NativeDeprecated />
-
-There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application.
-
-Like the native module guide, this too is a more advanced guide that assumes you are somewhat familiar with Android SDK programming. This guide will show you how to build a native UI component, walking you through the implementation of a subset of the existing `ImageView` component available in the core React Native library.
-
-:::info
-You can also setup local library containing native component with one command. Read the guide to [Local libraries setup](local-library-setup) for more details.
-:::
-
-## ImageView example
-
-For this example we are going to walk through the implementation requirements to allow the use of ImageViews in JavaScript.
-
-Native views are created and manipulated by extending `ViewManager` or more commonly `SimpleViewManager` . A `SimpleViewManager` is convenient in this case because it applies common properties such as background color, opacity, and Flexbox layout.
-
-These subclasses are essentially singletons - only one instance of each is created by the bridge. They send native views to the `NativeViewHierarchyManager`, which delegates back to them to set and update the properties of the views as necessary. The `ViewManagers` are also typically the delegates for the views, sending events back to JavaScript via the bridge.
-
-To send a view:
-
-1. Create the ViewManager subclass.
-2. Implement the `createViewInstance` method
-3. Expose view property setters using `@ReactProp` (or `@ReactPropGroup`) annotation
-4. Register the manager in `createViewManagers` of the applications package.
-5. Implement the JavaScript module
-
-### 1. Create the `ViewManager` subclass
-
-In this example we create view manager class `ReactImageManager` that extends `SimpleViewManager` of type `ReactImageView`. `ReactImageView` is the type of object managed by the manager, this will be the custom native view. Name returned by `getName` is used to reference the native view type from JavaScript.
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-class ReactImageManager(
-    private val callerContext: ReactApplicationContext
-) : SimpleViewManager<ReactImageView>() {
-
-  override fun getName() = REACT_CLASS
-
-  companion object {
-    const val REACT_CLASS = "RCTImageView"
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-public class ReactImageManager extends SimpleViewManager<ReactImageView> {
-
-  public static final String REACT_CLASS = "RCTImageView";
-  ReactApplicationContext mCallerContext;
-
-  public ReactImageManager(ReactApplicationContext reactContext) {
-    mCallerContext = reactContext;
-  }
-
-  @Override
-  public String getName() {
-    return REACT_CLASS;
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 2. Implement method `createViewInstance`
-
-Views are created in the `createViewInstance` method, the view should initialize itself in its default state, any properties will be set via a follow up call to `updateView.`
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-  override fun createViewInstance(context: ThemedReactContext) =
-      ReactImageView(context, Fresco.newDraweeControllerBuilder(), null, callerContext)
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-  @Override
-  public ReactImageView createViewInstance(ThemedReactContext context) {
-    return new ReactImageView(context, Fresco.newDraweeControllerBuilder(), null, mCallerContext);
-  }
-```
-
-</TabItem>
-</Tabs>
-
-### 3. Expose view property setters using `@ReactProp` (or `@ReactPropGroup`) annotation
-
-Properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with `@ReactProp` (or `@ReactPropGroup`). Setter method should take view to be updated (of the current view type) as a first argument and property value as a second argument. Setter should be public and not return a value (i.e. return type should be `void` in Java or `Unit` in Kotlin). Property type sent to JS is determined automatically based on the type of value argument of the setter. The following type of values are currently supported (in Java): `boolean`, `int`, `float`, `double`, `String`, `Boolean`, `Integer`, `ReadableArray`, `ReadableMap`. The corresponding types in Kotlin are `Boolean`, `Int`, `Float`, `Double`, `String`, `ReadableArray`, `ReadableMap`.
-
-Annotation `@ReactProp` has one obligatory argument `name` of type `String`. Name assigned to the `@ReactProp` annotation linked to the setter method is used to reference the property on JS side.
-
-Except from `name`, `@ReactProp` annotation may take following optional arguments: `defaultBoolean`, `defaultInt`, `defaultFloat`. Those arguments should be of the corresponding type (accordingly `boolean`, `int`, `float` in Java and `Boolean`, `Int`, `Float` in Kotlin) and the value provided will be passed to the setter method in case when the property that the setter is referencing has been removed from the component. Note that "default" values are only provided for primitive types, in case when setter is of some complex type, `null` will be provided as a default value in case when corresponding property gets removed.
-
-Setter declaration requirements for methods annotated with `@ReactPropGroup` are different than for `@ReactProp`, please refer to the `@ReactPropGroup` annotation class docs for more information about it. **IMPORTANT!** in ReactJS updating the property value will result in setter method call. Note that one of the ways we can update component is by removing properties that have been set before. In that case setter method will be called as well to notify view manager that property has changed. In that case "default" value will be provided (for primitive types "default" value can be specified using `defaultBoolean`, `defaultFloat`, etc. arguments of `@ReactProp` annotation, for complex types setter will be called with value set to `null`).
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-  @ReactProp(name = "src")
-  fun setSrc(view: ReactImageView, sources: ReadableArray?) {
-    view.setSource(sources)
-  }
-
-  @ReactProp(name = "borderRadius", defaultFloat = 0f)
-  override fun setBorderRadius(view: ReactImageView, borderRadius: Float) {
-    view.setBorderRadius(borderRadius)
-  }
-
-  @ReactProp(name = ViewProps.RESIZE_MODE)
-  fun setResizeMode(view: ReactImageView, resizeMode: String?) {
-    view.setScaleType(ImageResizeMode.toScaleType(resizeMode))
-  }
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-  @ReactProp(name = "src")
-  public void setSrc(ReactImageView view, @Nullable ReadableArray sources) {
-    view.setSource(sources);
-  }
-
-  @ReactProp(name = "borderRadius", defaultFloat = 0f)
-  public void setBorderRadius(ReactImageView view, float borderRadius) {
-    view.setBorderRadius(borderRadius);
-  }
-
-  @ReactProp(name = ViewProps.RESIZE_MODE)
-  public void setResizeMode(ReactImageView view, @Nullable String resizeMode) {
-    view.setScaleType(ImageResizeMode.toScaleType(resizeMode));
-  }
-```
-
-</TabItem>
-</Tabs>
-
-### 4. Register the `ViewManager`
-
-The final step is to register the ViewManager to the application, this happens in a similar way to [Native Modules](native-modules-android.md), via the applications package member function `createViewManagers`.
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-  override fun createViewManagers(
-      reactContext: ReactApplicationContext
-  ) = listOf(ReactImageManager(reactContext))
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-  @Override
-  public List<ViewManager> createViewManagers(
-                            ReactApplicationContext reactContext) {
-    return Arrays.<ViewManager>asList(
-      new ReactImageManager(reactContext)
-    );
-  }
-```
-
-</TabItem>
-</Tabs>
-
-### 5. Implement the JavaScript module
-
-The very final step is to create the JavaScript module that defines the interface layer between Java/Kotlin and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using TypeScript, Flow, or plain old comments).
-
-```tsx title="ImageView.tsx"
-import {requireNativeComponent} from 'react-native';
-
-/**
- * Composes `View`.
- *
- * - src: Array<{url: string}>
- * - borderRadius: number
- * - resizeMode: 'cover' | 'contain' | 'stretch'
- */
-export default requireNativeComponent('RCTImageView');
-```
-
-The `requireNativeComponent` function takes the name of the native view. Note that if your component needs to do anything more sophisticated (e.g. custom event handling), you should wrap the native component in another React component. This is illustrated in the `MyCustomView` example below.
-
-## Events
-
-So now we know how to expose native view components that we can control freely from JS, but how do we deal with events from the user, like pinch-zooms or panning? When a native event occurs the native code should issue an event to the JavaScript representation of the View, and the two views are linked with the value returned from the `getId()` method.
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-class MyCustomView(context: Context) : View(context) {
-  ...
-  fun onReceiveNativeEvent() {
-    val event = Arguments.createMap().apply {
-      putString("message", "MyMessage")
-    }
-    val reactContext = context as ReactContext
-    reactContext
-        .getJSModule(RCTEventEmitter::class.java)
-        .receiveEvent(id, "topChange", event)
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-class MyCustomView extends View {
-   ...
-   public void onReceiveNativeEvent() {
-      WritableMap event = Arguments.createMap();
-      event.putString("message", "MyMessage");
-      ReactContext reactContext = (ReactContext)getContext();
-      reactContext
-          .getJSModule(RCTEventEmitter.class)
-          .receiveEvent(getId(), "topChange", event);
-    }
-}
-```
-
-</TabItem>
-</Tabs>
-
-To map the `topChange` event name to the `onChange` callback prop in JavaScript, register it by overriding the `getExportedCustomBubblingEventTypeConstants` method in your `ViewManager`:
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-class ReactImageManager : SimpleViewManager<MyCustomView>() {
-  ...
-  override fun getExportedCustomBubblingEventTypeConstants(): Map<String, Any> {
-    return mapOf(
-      "topChange" to mapOf(
-        "phasedRegistrationNames" to mapOf(
-          "bubbled" to "onChange"
-        )
-      )
-    )
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-public class ReactImageManager extends SimpleViewManager<MyCustomView> {
-    ...
-    public Map getExportedCustomBubblingEventTypeConstants() {
-        return MapBuilder.builder().put(
-            "topChange",
-            MapBuilder.of(
-                "phasedRegistrationNames",
-                MapBuilder.of("bubbled", "onChange")
-            )
-        ).build();
-    }
-}
-```
-
-</TabItem>
-</Tabs>
-
-This callback is invoked with the raw event, which we typically process in the wrapper component to make a simpler API:
-
-```tsx {8-11,13-17} title="MyCustomView.tsx"
-import {useCallback} from 'react';
-import {requireNativeComponent} from 'react-native';
-
-const RCTMyCustomView = requireNativeComponent('RCTMyCustomView');
-
-export default function MyCustomView(props: {
-  // ...
-  /**
-   * Callback that is called continuously when the user is dragging the map.
-   */
-  onChangeMessage: (message: string) => unknown;
-}) {
-  const onChange = useCallback(
-    event => {
-      props.onChangeMessage?.(event.nativeEvent.message);
-    },
-    [props.onChangeMessage],
-  );
-
-  return <RCTMyCustomView {...props} onChange={onChange} />;
-}
-```
-
-## Integration with an Android Fragment example
-
-In order to integrate existing Native UI elements to your React Native app, you might need to use Android Fragments to give you a more granular control over your native component than returning a `View` from your `ViewManager`. You will need this if you want to add custom logic that is tied to your view with the help of [lifecycle methods](https://developer.android.com/guide/fragments/lifecycle), such as `onViewCreated`, `onPause`, `onResume`. The following steps will show you how to do it:
-
-### 1. Create an example custom view
-
-First, let's create a `CustomView` class which extends `FrameLayout` (the content of this view can be any view that you'd like to render)
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin title="CustomView.kt"
-// replace with your package
-package com.mypackage
-
-import android.content.Context
-import android.graphics.Color
-import android.widget.FrameLayout
-import android.widget.TextView
-
-class CustomView(context: Context) : FrameLayout(context) {
-  init {
-    // set padding and background color
-    setPadding(16,16,16,16)
-    setBackgroundColor(Color.parseColor("#5FD3F3"))
-
-    // add default text view
-    addView(TextView(context).apply {
-      text = "Welcome to Android Fragments with React Native."
-    })
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java title="CustomView.java"
-// replace with your package
-package com.mypackage;
-
-import android.content.Context;
-import android.graphics.Color;
-import android.widget.FrameLayout;
-import android.widget.ImageView;
-import android.widget.TextView;
-
-import androidx.annotation.NonNull;
-
-public class CustomView extends FrameLayout {
-  public CustomView(@NonNull Context context) {
-    super(context);
-    // set padding and background color
-    this.setPadding(16,16,16,16);
-    this.setBackgroundColor(Color.parseColor("#5FD3F3"));
-
-    // add default text view
-    TextView text = new TextView(context);
-    text.setText("Welcome to Android Fragments with React Native.");
-    this.addView(text);
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 2. Create a `Fragment`
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin title="MyFragment.kt"
-// replace with your package
-package com.mypackage
-
-import android.os.Bundle
-import android.view.LayoutInflater
-import android.view.View
-import android.view.ViewGroup
-import androidx.fragment.app.Fragment
-
-// replace with your view's import
-import com.mypackage.CustomView
-
-class MyFragment : Fragment() {
-  private lateinit var customView: CustomView
-
-  override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
-    super.onCreateView(inflater, container, savedInstanceState)
-    customView = CustomView(requireNotNull(context))
-    return customView // this CustomView could be any view that you want to render
-  }
-
-  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
-    super.onViewCreated(view, savedInstanceState)
-    // do any logic that should happen in an `onCreate` method, e.g:
-    // customView.onCreate(savedInstanceState);
-  }
-
-  override fun onPause() {
-    super.onPause()
-    // do any logic that should happen in an `onPause` method
-    // e.g.: customView.onPause();
-  }
-
-  override fun onResume() {
-    super.onResume()
-    // do any logic that should happen in an `onResume` method
-    // e.g.: customView.onResume();
-  }
-
-  override fun onDestroy() {
-    super.onDestroy()
-    // do any logic that should happen in an `onDestroy` method
-    // e.g.: customView.onDestroy();
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java title="MyFragment.java"
-// replace with your package
-package com.mypackage;
-
-import android.os.Bundle;
-import android.view.LayoutInflater;
-import android.view.View;
-import android.view.ViewGroup;
-import androidx.fragment.app.Fragment;
-
-// replace with your view's import
-import com.mypackage.CustomView;
-
-public class MyFragment extends Fragment {
-    CustomView customView;
-
-    @Override
-    public View onCreateView(LayoutInflater inflater, ViewGroup parent, Bundle savedInstanceState) {
-        super.onCreateView(inflater, parent, savedInstanceState);
-        customView = new CustomView(this.getContext());
-        return customView; // this CustomView could be any view that you want to render
-    }
-
-    @Override
-    public void onViewCreated(View view, Bundle savedInstanceState) {
-        super.onViewCreated(view, savedInstanceState);
-        // do any logic that should happen in an `onCreate` method, e.g:
-        // customView.onCreate(savedInstanceState);
-    }
-
-    @Override
-    public void onPause() {
-        super.onPause();
-        // do any logic that should happen in an `onPause` method
-        // e.g.: customView.onPause();
-    }
-
-    @Override
-    public void onResume() {
-        super.onResume();
-       // do any logic that should happen in an `onResume` method
-       // e.g.: customView.onResume();
-    }
-
-    @Override
-    public void onDestroy() {
-        super.onDestroy();
-        // do any logic that should happen in an `onDestroy` method
-        // e.g.: customView.onDestroy();
-    }
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 3. Create the `ViewManager` subclass
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin title="MyViewManager.kt"
-// replace with your package
-package com.mypackage
-
-import android.view.Choreographer
-import android.view.View
-import android.view.ViewGroup
-import android.widget.FrameLayout
-import androidx.fragment.app.FragmentActivity
-import com.facebook.react.bridge.ReactApplicationContext
-import com.facebook.react.bridge.ReadableArray
-import com.facebook.react.uimanager.ThemedReactContext
-import com.facebook.react.uimanager.ViewGroupManager
-import com.facebook.react.uimanager.annotations.ReactPropGroup
-
-class MyViewManager(
-    private val reactContext: ReactApplicationContext
-) : ViewGroupManager<FrameLayout>() {
-  private var propWidth: Int? = null
-  private var propHeight: Int? = null
-
-  override fun getName() = REACT_CLASS
-
-  /**
-   * Return a FrameLayout which will later hold the Fragment
-   */
-  override fun createViewInstance(reactContext: ThemedReactContext) =
-      FrameLayout(reactContext)
-
-  /**
-   * Map the "create" command to an integer
-   */
-  override fun getCommandsMap() = mapOf("create" to COMMAND_CREATE)
-
-  /**
-   * Handle "create" command (called from JS) and call createFragment method
-   */
-  override fun receiveCommand(
-      root: FrameLayout,
-      commandId: String,
-      args: ReadableArray?
-  ) {
-    super.receiveCommand(root, commandId, args)
-    val reactNativeViewId = requireNotNull(args).getInt(0)
-
-    when (commandId.toInt()) {
-      COMMAND_CREATE -> createFragment(root, reactNativeViewId)
-    }
-  }
-
-  @ReactPropGroup(names = ["width", "height"], customType = "Style")
-  fun setStyle(view: FrameLayout, index: Int, value: Int) {
-    if (index == 0) propWidth = value
-    if (index == 1) propHeight = value
-  }
-
-  /**
-   * Replace your React Native view with a custom fragment
-   */
-  fun createFragment(root: FrameLayout, reactNativeViewId: Int) {
-    val parentView = root.findViewById<ViewGroup>(reactNativeViewId)
-    setupLayout(parentView)
-
-    val myFragment = MyFragment()
-    val activity = reactContext.currentActivity as FragmentActivity
-    activity.supportFragmentManager
-        .beginTransaction()
-        .replace(reactNativeViewId, myFragment, reactNativeViewId.toString())
-        .commit()
-  }
-
-  fun setupLayout(view: View) {
-    Choreographer.getInstance().postFrameCallback(object: Choreographer.FrameCallback {
-      override fun doFrame(frameTimeNanos: Long) {
-        manuallyLayoutChildren(view)
-        view.viewTreeObserver.dispatchOnGlobalLayout()
-        Choreographer.getInstance().postFrameCallback(this)
-      }
-    })
-  }
-
-  /**
-   * Layout all children properly
-   */
-  private fun manuallyLayoutChildren(view: View) {
-    // propWidth and propHeight coming from react-native props
-    val width = requireNotNull(propWidth)
-    val height = requireNotNull(propHeight)
-
-    view.measure(
-        View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
-        View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY))
-
-    view.layout(0, 0, width, height)
-  }
-
-  companion object {
-    private const val REACT_CLASS = "MyViewManager"
-    private const val COMMAND_CREATE = 1
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java title="MyViewManager.java"
-// replace with your package
-package com.mypackage;
-
-import android.view.Choreographer;
-import android.view.View;
-import android.view.ViewGroup;
-import android.widget.FrameLayout;
-
-import androidx.annotation.NonNull;
-import androidx.annotation.Nullable;
-import androidx.fragment.app.FragmentActivity;
-
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.ReadableArray;
-import com.facebook.react.common.MapBuilder;
-import com.facebook.react.uimanager.annotations.ReactProp;
-import com.facebook.react.uimanager.annotations.ReactPropGroup;
-import com.facebook.react.uimanager.ViewGroupManager;
-import com.facebook.react.uimanager.ThemedReactContext;
-
-import java.util.Map;
-
-public class MyViewManager extends ViewGroupManager<FrameLayout> {
-
-  public static final String REACT_CLASS = "MyViewManager";
-  public final int COMMAND_CREATE = 1;
-  private int propWidth;
-  private int propHeight;
-
-  ReactApplicationContext reactContext;
-
-  public MyViewManager(ReactApplicationContext reactContext) {
-    this.reactContext = reactContext;
-  }
-
-  @Override
-  public String getName() {
-    return REACT_CLASS;
-  }
-
-  /**
-   * Return a FrameLayout which will later hold the Fragment
-   */
-  @Override
-  public FrameLayout createViewInstance(ThemedReactContext reactContext) {
-    return new FrameLayout(reactContext);
-  }
-
-  /**
-   * Map the "create" command to an integer
-   */
-  @Nullable
-  @Override
-  public Map<String, Integer> getCommandsMap() {
-    return MapBuilder.of("create", COMMAND_CREATE);
-  }
-
-  /**
-   * Handle "create" command (called from JS) and call createFragment method
-   */
-  @Override
-  public void receiveCommand(
-    @NonNull FrameLayout root,
-    String commandId,
-    @Nullable ReadableArray args
-  ) {
-    super.receiveCommand(root, commandId, args);
-    int reactNativeViewId = args.getInt(0);
-    int commandIdInt = Integer.parseInt(commandId);
-
-    switch (commandIdInt) {
-      case COMMAND_CREATE:
-        createFragment(root, reactNativeViewId);
-        break;
-      default: {}
-    }
-  }
-
-  @ReactPropGroup(names = {"width", "height"}, customType = "Style")
-  public void setStyle(FrameLayout view, int index, Integer value) {
-    if (index == 0) {
-      propWidth = value;
-    }
-
-    if (index == 1) {
-      propHeight = value;
-    }
-  }
-
-  /**
-   * Replace your React Native view with a custom fragment
-   */
-  public void createFragment(FrameLayout root, int reactNativeViewId) {
-    ViewGroup parentView = (ViewGroup) root.findViewById(reactNativeViewId);
-    setupLayout(parentView);
-
-    final MyFragment myFragment = new MyFragment();
-    FragmentActivity activity = (FragmentActivity) reactContext.getCurrentActivity();
-    activity.getSupportFragmentManager()
-            .beginTransaction()
-            .replace(reactNativeViewId, myFragment, String.valueOf(reactNativeViewId))
-            .commit();
-  }
-
-  public void setupLayout(View view) {
-    Choreographer.getInstance().postFrameCallback(new Choreographer.FrameCallback() {
-      @Override
-      public void doFrame(long frameTimeNanos) {
-        manuallyLayoutChildren(view);
-        view.getViewTreeObserver().dispatchOnGlobalLayout();
-        Choreographer.getInstance().postFrameCallback(this);
-      }
-    });
-  }
-
-  /**
-   * Layout all children properly
-   */
-  public void manuallyLayoutChildren(View view) {
-      // propWidth and propHeight coming from react-native props
-      int width = propWidth;
-      int height = propHeight;
-
-      view.measure(
-              View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
-              View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY));
-
-      view.layout(0, 0, width, height);
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 4. Register the `ViewManager`
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin title="MyPackage.kt"
-// replace with your package
-package com.mypackage
-
-import com.facebook.react.ReactPackage
-import com.facebook.react.bridge.ReactApplicationContext
-import com.facebook.react.uimanager.ViewManager
-
-class MyPackage : ReactPackage {
-  ...
-  override fun createViewManagers(
-      reactContext: ReactApplicationContext
-  ) = listOf(MyViewManager(reactContext))
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java title="MyPackage.java"
-// replace with your package
-package com.mypackage;
-
-import com.facebook.react.ReactPackage;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.uimanager.ViewManager;
-
-import java.util.Arrays;
-import java.util.List;
-
-public class MyPackage implements ReactPackage {
-
-   @Override
-   public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
-       return Arrays.<ViewManager>asList(
-            new MyViewManager(reactContext)
-       );
-   }
-
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 5. Register the `Package`
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin title="MainApplication.kt"
-override fun getPackages(): List<ReactPackage> =
-    PackageList(this).packages.apply {
-        // Packages that cannot be autolinked yet can be added manually here, for example:
-        // add(MyReactNativePackage())
-        add(MyAppPackage())
-    }
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java title="MainApplication.java"
-@Override
-protected List<ReactPackage> getPackages() {
-    List<ReactPackage> packages = new PackageList(this).getPackages();
-    // Packages that cannot be autolinked yet can be added manually here, for example:
-    // packages.add(new MyReactNativePackage());
-    packages.add(new MyAppPackage());
-    return packages;
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 6. Implement the JavaScript module
-
-I. Start with custom View manager:
-
-```tsx title="MyViewManager.tsx"
-import {requireNativeComponent} from 'react-native';
-
-export const MyViewManager =
-  requireNativeComponent('MyViewManager');
-```
-
-II. Then implement custom View calling the `create` method:
-
-```tsx title="MyView.tsx"
-import React, {useEffect, useRef} from 'react';
-import {
-  PixelRatio,
-  UIManager,
-  findNodeHandle,
-} from 'react-native';
-
-import {MyViewManager} from './my-view-manager';
-
-const createFragment = viewId =>
-  UIManager.dispatchViewManagerCommand(
-    viewId,
-    // we are calling the 'create' command
-    UIManager.MyViewManager.Commands.create.toString(),
-    [viewId],
-  );
-
-export const MyView = () => {
-  const ref = useRef(null);
-
-  useEffect(() => {
-    const viewId = findNodeHandle(ref.current);
-    createFragment(viewId);
-  }, []);
-
-  return (
-    <MyViewManager
-      style={{
-        // converts dpi to px, provide desired height
-        height: PixelRatio.getPixelSizeForLayoutSize(200),
-        // converts dpi to px, provide desired width
-        width: PixelRatio.getPixelSizeForLayoutSize(200),
-      }}
-      ref={ref}
-    />
-  );
-};
-```
-
-If you want to expose property setters using `@ReactProp` (or `@ReactPropGroup`) annotation see the [ImageView example](#imageview-example) above.
+---
+id: native-components-android
+title: Android Native UI Components
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+import NativeDeprecated from '../the-new-architecture/\_markdown_native_deprecation.mdx'
+
+<NativeDeprecated />
+
+There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application.
+
+Like the native module guide, this too is a more advanced guide that assumes you are somewhat familiar with Android SDK programming. This guide will show you how to build a native UI component, walking you through the implementation of a subset of the existing `ImageView` component available in the core React Native library.
+
+:::info
+You can also setup local library containing native component with one command. Read the guide to [Local libraries setup](local-library-setup) for more details.
+:::
+
+## ImageView example
+
+For this example we are going to walk through the implementation requirements to allow the use of ImageViews in JavaScript.
+
+Native views are created and manipulated by extending `ViewManager` or more commonly `SimpleViewManager` . A `SimpleViewManager` is convenient in this case because it applies common properties such as background color, opacity, and Flexbox layout.
+
+These subclasses are essentially singletons - only one instance of each is created by the bridge. They send native views to the `NativeViewHierarchyManager`, which delegates back to them to set and update the properties of the views as necessary. The `ViewManagers` are also typically the delegates for the views, sending events back to JavaScript via the bridge.
+
+To send a view:
+
+1. Create the ViewManager subclass.
+2. Implement the `createViewInstance` method
+3. Expose view property setters using `@ReactProp` (or `@ReactPropGroup`) annotation
+4. Register the manager in `createViewManagers` of the applications package.
+5. Implement the JavaScript module
+
+### 1. Create the `ViewManager` subclass
+
+In this example we create view manager class `ReactImageManager` that extends `SimpleViewManager` of type `ReactImageView`. `ReactImageView` is the type of object managed by the manager, this will be the custom native view. Name returned by `getName` is used to reference the native view type from JavaScript.
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+class ReactImageManager(
+    private val callerContext: ReactApplicationContext
+) : SimpleViewManager<ReactImageView>() {
+
+  override fun getName() = REACT_CLASS
+
+  companion object {
+    const val REACT_CLASS = "RCTImageView"
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+public class ReactImageManager extends SimpleViewManager<ReactImageView> {
+
+  public static final String REACT_CLASS = "RCTImageView";
+  ReactApplicationContext mCallerContext;
+
+  public ReactImageManager(ReactApplicationContext reactContext) {
+    mCallerContext = reactContext;
+  }
+
+  @Override
+  public String getName() {
+    return REACT_CLASS;
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 2. Implement method `createViewInstance`
+
+Views are created in the `createViewInstance` method, the view should initialize itself in its default state, any properties will be set via a follow up call to `updateView.`
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+  override fun createViewInstance(context: ThemedReactContext) =
+      ReactImageView(context, Fresco.newDraweeControllerBuilder(), null, callerContext)
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+  @Override
+  public ReactImageView createViewInstance(ThemedReactContext context) {
+    return new ReactImageView(context, Fresco.newDraweeControllerBuilder(), null, mCallerContext);
+  }
+```
+
+</TabItem>
+</Tabs>
+
+### 3. Expose view property setters using `@ReactProp` (or `@ReactPropGroup`) annotation
+
+Properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with `@ReactProp` (or `@ReactPropGroup`). Setter method should take view to be updated (of the current view type) as a first argument and property value as a second argument. Setter should be public and not return a value (i.e. return type should be `void` in Java or `Unit` in Kotlin). Property type sent to JS is determined automatically based on the type of value argument of the setter. The following type of values are currently supported (in Java): `boolean`, `int`, `float`, `double`, `String`, `Boolean`, `Integer`, `ReadableArray`, `ReadableMap`. The corresponding types in Kotlin are `Boolean`, `Int`, `Float`, `Double`, `String`, `ReadableArray`, `ReadableMap`.
+
+Annotation `@ReactProp` has one obligatory argument `name` of type `String`. Name assigned to the `@ReactProp` annotation linked to the setter method is used to reference the property on JS side.
+
+Except from `name`, `@ReactProp` annotation may take following optional arguments: `defaultBoolean`, `defaultInt`, `defaultFloat`. Those arguments should be of the corresponding type (accordingly `boolean`, `int`, `float` in Java and `Boolean`, `Int`, `Float` in Kotlin) and the value provided will be passed to the setter method in case when the property that the setter is referencing has been removed from the component. Note that "default" values are only provided for primitive types, in case when setter is of some complex type, `null` will be provided as a default value in case when corresponding property gets removed.
+
+Setter declaration requirements for methods annotated with `@ReactPropGroup` are different than for `@ReactProp`, please refer to the `@ReactPropGroup` annotation class docs for more information about it. **IMPORTANT!** in ReactJS updating the property value will result in setter method call. Note that one of the ways we can update component is by removing properties that have been set before. In that case setter method will be called as well to notify view manager that property has changed. In that case "default" value will be provided (for primitive types "default" value can be specified using `defaultBoolean`, `defaultFloat`, etc. arguments of `@ReactProp` annotation, for complex types setter will be called with value set to `null`).
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+  @ReactProp(name = "src")
+  fun setSrc(view: ReactImageView, sources: ReadableArray?) {
+    view.setSource(sources)
+  }
+
+  @ReactProp(name = "borderRadius", defaultFloat = 0f)
+  override fun setBorderRadius(view: ReactImageView, borderRadius: Float) {
+    view.setBorderRadius(borderRadius)
+  }
+
+  @ReactProp(name = ViewProps.RESIZE_MODE)
+  fun setResizeMode(view: ReactImageView, resizeMode: String?) {
+    view.setScaleType(ImageResizeMode.toScaleType(resizeMode))
+  }
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+  @ReactProp(name = "src")
+  public void setSrc(ReactImageView view, @Nullable ReadableArray sources) {
+    view.setSource(sources);
+  }
+
+  @ReactProp(name = "borderRadius", defaultFloat = 0f)
+  public void setBorderRadius(ReactImageView view, float borderRadius) {
+    view.setBorderRadius(borderRadius);
+  }
+
+  @ReactProp(name = ViewProps.RESIZE_MODE)
+  public void setResizeMode(ReactImageView view, @Nullable String resizeMode) {
+    view.setScaleType(ImageResizeMode.toScaleType(resizeMode));
+  }
+```
+
+</TabItem>
+</Tabs>
+
+### 4. Register the `ViewManager`
+
+The final step is to register the ViewManager to the application, this happens in a similar way to [Native Modules](native-modules-android.md), via the applications package member function `createViewManagers`.
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+  override fun createViewManagers(
+      reactContext: ReactApplicationContext
+  ) = listOf(ReactImageManager(reactContext))
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+  @Override
+  public List<ViewManager> createViewManagers(
+                            ReactApplicationContext reactContext) {
+    return Arrays.<ViewManager>asList(
+      new ReactImageManager(reactContext)
+    );
+  }
+```
+
+</TabItem>
+</Tabs>
+
+### 5. Implement the JavaScript module
+
+The very final step is to create the JavaScript module that defines the interface layer between Java/Kotlin and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using TypeScript, Flow, or plain old comments).
+
+```tsx title="ImageView.tsx"
+import {requireNativeComponent} from 'react-native';
+
+/**
+ * Composes `View`.
+ *
+ * - src: Array<{url: string}>
+ * - borderRadius: number
+ * - resizeMode: 'cover' | 'contain' | 'stretch'
+ */
+export default requireNativeComponent('RCTImageView');
+```
+
+The `requireNativeComponent` function takes the name of the native view. Note that if your component needs to do anything more sophisticated (e.g. custom event handling), you should wrap the native component in another React component. This is illustrated in the `MyCustomView` example below.
+
+## Events
+
+So now we know how to expose native view components that we can control freely from JS, but how do we deal with events from the user, like pinch-zooms or panning? When a native event occurs the native code should issue an event to the JavaScript representation of the View, and the two views are linked with the value returned from the `getId()` method.
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+class MyCustomView(context: Context) : View(context) {
+  ...
+  fun onReceiveNativeEvent() {
+    val event = Arguments.createMap().apply {
+      putString("message", "MyMessage")
+    }
+    val reactContext = context as ReactContext
+    reactContext
+        .getJSModule(RCTEventEmitter::class.java)
+        .receiveEvent(id, "topChange", event)
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+class MyCustomView extends View {
+   ...
+   public void onReceiveNativeEvent() {
+      WritableMap event = Arguments.createMap();
+      event.putString("message", "MyMessage");
+      ReactContext reactContext = (ReactContext)getContext();
+      reactContext
+          .getJSModule(RCTEventEmitter.class)
+          .receiveEvent(getId(), "topChange", event);
+    }
+}
+```
+
+</TabItem>
+</Tabs>
+
+To map the `topChange` event name to the `onChange` callback prop in JavaScript, register it by overriding the `getExportedCustomBubblingEventTypeConstants` method in your `ViewManager`:
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+class ReactImageManager : SimpleViewManager<MyCustomView>() {
+  ...
+  override fun getExportedCustomBubblingEventTypeConstants(): Map<String, Any> {
+    return mapOf(
+      "topChange" to mapOf(
+        "phasedRegistrationNames" to mapOf(
+          "bubbled" to "onChange"
+        )
+      )
+    )
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+public class ReactImageManager extends SimpleViewManager<MyCustomView> {
+    ...
+    public Map getExportedCustomBubblingEventTypeConstants() {
+        return MapBuilder.builder().put(
+            "topChange",
+            MapBuilder.of(
+                "phasedRegistrationNames",
+                MapBuilder.of("bubbled", "onChange")
+            )
+        ).build();
+    }
+}
+```
+
+</TabItem>
+</Tabs>
+
+This callback is invoked with the raw event, which we typically process in the wrapper component to make a simpler API:
+
+```tsx {8-11,13-17} title="MyCustomView.tsx"
+import {useCallback} from 'react';
+import {requireNativeComponent} from 'react-native';
+
+const RCTMyCustomView = requireNativeComponent('RCTMyCustomView');
+
+export default function MyCustomView(props: {
+  // ...
+  /**
+   * Callback that is called continuously when the user is dragging the map.
+   */
+  onChangeMessage: (message: string) => unknown;
+}) {
+  const onChange = useCallback(
+    event => {
+      props.onChangeMessage?.(event.nativeEvent.message);
+    },
+    [props.onChangeMessage],
+  );
+
+  return <RCTMyCustomView {...props} onChange={onChange} />;
+}
+```
+
+## Integration with an Android Fragment example
+
+In order to integrate existing Native UI elements to your React Native app, you might need to use Android Fragments to give you a more granular control over your native component than returning a `View` from your `ViewManager`. You will need this if you want to add custom logic that is tied to your view with the help of [lifecycle methods](https://developer.android.com/guide/fragments/lifecycle), such as `onViewCreated`, `onPause`, `onResume`. The following steps will show you how to do it:
+
+### 1. Create an example custom view
+
+First, let's create a `CustomView` class which extends `FrameLayout` (the content of this view can be any view that you'd like to render)
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin title="CustomView.kt"
+// replace with your package
+package com.mypackage
+
+import android.content.Context
+import android.graphics.Color
+import android.widget.FrameLayout
+import android.widget.TextView
+
+class CustomView(context: Context) : FrameLayout(context) {
+  init {
+    // set padding and background color
+    setPadding(16,16,16,16)
+    setBackgroundColor(Color.parseColor("#5FD3F3"))
+
+    // add default text view
+    addView(TextView(context).apply {
+      text = "Welcome to Android Fragments with React Native."
+    })
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java title="CustomView.java"
+// replace with your package
+package com.mypackage;
+
+import android.content.Context;
+import android.graphics.Color;
+import android.widget.FrameLayout;
+import android.widget.ImageView;
+import android.widget.TextView;
+
+import androidx.annotation.NonNull;
+
+public class CustomView extends FrameLayout {
+  public CustomView(@NonNull Context context) {
+    super(context);
+    // set padding and background color
+    this.setPadding(16,16,16,16);
+    this.setBackgroundColor(Color.parseColor("#5FD3F3"));
+
+    // add default text view
+    TextView text = new TextView(context);
+    text.setText("Welcome to Android Fragments with React Native.");
+    this.addView(text);
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 2. Create a `Fragment`
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin title="MyFragment.kt"
+// replace with your package
+package com.mypackage
+
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import androidx.fragment.app.Fragment
+
+// replace with your view's import
+import com.mypackage.CustomView
+
+class MyFragment : Fragment() {
+  private lateinit var customView: CustomView
+
+  override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
+    super.onCreateView(inflater, container, savedInstanceState)
+    customView = CustomView(requireNotNull(context))
+    return customView // this CustomView could be any view that you want to render
+  }
+
+  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+    super.onViewCreated(view, savedInstanceState)
+    // do any logic that should happen in an `onCreate` method, e.g:
+    // customView.onCreate(savedInstanceState);
+  }
+
+  override fun onPause() {
+    super.onPause()
+    // do any logic that should happen in an `onPause` method
+    // e.g.: customView.onPause();
+  }
+
+  override fun onResume() {
+    super.onResume()
+    // do any logic that should happen in an `onResume` method
+    // e.g.: customView.onResume();
+  }
+
+  override fun onDestroy() {
+    super.onDestroy()
+    // do any logic that should happen in an `onDestroy` method
+    // e.g.: customView.onDestroy();
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java title="MyFragment.java"
+// replace with your package
+package com.mypackage;
+
+import android.os.Bundle;
+import android.view.LayoutInflater;
+import android.view.View;
+import android.view.ViewGroup;
+import androidx.fragment.app.Fragment;
+
+// replace with your view's import
+import com.mypackage.CustomView;
+
+public class MyFragment extends Fragment {
+    CustomView customView;
+
+    @Override
+    public View onCreateView(LayoutInflater inflater, ViewGroup parent, Bundle savedInstanceState) {
+        super.onCreateView(inflater, parent, savedInstanceState);
+        customView = new CustomView(this.getContext());
+        return customView; // this CustomView could be any view that you want to render
+    }
+
+    @Override
+    public void onViewCreated(View view, Bundle savedInstanceState) {
+        super.onViewCreated(view, savedInstanceState);
+        // do any logic that should happen in an `onCreate` method, e.g:
+        // customView.onCreate(savedInstanceState);
+    }
+
+    @Override
+    public void onPause() {
+        super.onPause();
+        // do any logic that should happen in an `onPause` method
+        // e.g.: customView.onPause();
+    }
+
+    @Override
+    public void onResume() {
+        super.onResume();
+       // do any logic that should happen in an `onResume` method
+       // e.g.: customView.onResume();
+    }
+
+    @Override
+    public void onDestroy() {
+        super.onDestroy();
+        // do any logic that should happen in an `onDestroy` method
+        // e.g.: customView.onDestroy();
+    }
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 3. Create the `ViewManager` subclass
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin title="MyViewManager.kt"
+// replace with your package
+package com.mypackage
+
+import android.view.Choreographer
+import android.view.View
+import android.view.ViewGroup
+import android.widget.FrameLayout
+import androidx.fragment.app.FragmentActivity
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.annotations.ReactPropGroup
+
+class MyViewManager(
+    private val reactContext: ReactApplicationContext
+) : ViewGroupManager<FrameLayout>() {
+  private var propWidth: Int? = null
+  private var propHeight: Int? = null
+
+  override fun getName() = REACT_CLASS
+
+  /**
+   * Return a FrameLayout which will later hold the Fragment
+   */
+  override fun createViewInstance(reactContext: ThemedReactContext) =
+      FrameLayout(reactContext)
+
+  /**
+   * Map the "create" command to an integer
+   */
+  override fun getCommandsMap() = mapOf("create" to COMMAND_CREATE)
+
+  /**
+   * Handle "create" command (called from JS) and call createFragment method
+   */
+  override fun receiveCommand(
+      root: FrameLayout,
+      commandId: String,
+      args: ReadableArray?
+  ) {
+    super.receiveCommand(root, commandId, args)
+    val reactNativeViewId = requireNotNull(args).getInt(0)
+
+    when (commandId.toInt()) {
+      COMMAND_CREATE -> createFragment(root, reactNativeViewId)
+    }
+  }
+
+  @ReactPropGroup(names = ["width", "height"], customType = "Style")
+  fun setStyle(view: FrameLayout, index: Int, value: Int) {
+    if (index == 0) propWidth = value
+    if (index == 1) propHeight = value
+  }
+
+  /**
+   * Replace your React Native view with a custom fragment
+   */
+  fun createFragment(root: FrameLayout, reactNativeViewId: Int) {
+    val parentView = root.findViewById<ViewGroup>(reactNativeViewId)
+    setupLayout(parentView)
+
+    val myFragment = MyFragment()
+    val activity = reactContext.currentActivity as FragmentActivity
+    activity.supportFragmentManager
+        .beginTransaction()
+        .replace(reactNativeViewId, myFragment, reactNativeViewId.toString())
+        .commit()
+  }
+
+  fun setupLayout(view: View) {
+    Choreographer.getInstance().postFrameCallback(object: Choreographer.FrameCallback {
+      override fun doFrame(frameTimeNanos: Long) {
+        manuallyLayoutChildren(view)
+        view.viewTreeObserver.dispatchOnGlobalLayout()
+        Choreographer.getInstance().postFrameCallback(this)
+      }
+    })
+  }
+
+  /**
+   * Layout all children properly
+   */
+  private fun manuallyLayoutChildren(view: View) {
+    // propWidth and propHeight coming from react-native props
+    val width = requireNotNull(propWidth)
+    val height = requireNotNull(propHeight)
+
+    view.measure(
+        View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
+        View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY))
+
+    view.layout(0, 0, width, height)
+  }
+
+  companion object {
+    private const val REACT_CLASS = "MyViewManager"
+    private const val COMMAND_CREATE = 1
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java title="MyViewManager.java"
+// replace with your package
+package com.mypackage;
+
+import android.view.Choreographer;
+import android.view.View;
+import android.view.ViewGroup;
+import android.widget.FrameLayout;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+import androidx.fragment.app.FragmentActivity;
+
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReadableArray;
+import com.facebook.react.common.MapBuilder;
+import com.facebook.react.uimanager.annotations.ReactProp;
+import com.facebook.react.uimanager.annotations.ReactPropGroup;
+import com.facebook.react.uimanager.ViewGroupManager;
+import com.facebook.react.uimanager.ThemedReactContext;
+
+import java.util.Map;
+
+public class MyViewManager extends ViewGroupManager<FrameLayout> {
+
+  public static final String REACT_CLASS = "MyViewManager";
+  public final int COMMAND_CREATE = 1;
+  private int propWidth;
+  private int propHeight;
+
+  ReactApplicationContext reactContext;
+
+  public MyViewManager(ReactApplicationContext reactContext) {
+    this.reactContext = reactContext;
+  }
+
+  @Override
+  public String getName() {
+    return REACT_CLASS;
+  }
+
+  /**
+   * Return a FrameLayout which will later hold the Fragment
+   */
+  @Override
+  public FrameLayout createViewInstance(ThemedReactContext reactContext) {
+    return new FrameLayout(reactContext);
+  }
+
+  /**
+   * Map the "create" command to an integer
+   */
+  @Nullable
+  @Override
+  public Map<String, Integer> getCommandsMap() {
+    return MapBuilder.of("create", COMMAND_CREATE);
+  }
+
+  /**
+   * Handle "create" command (called from JS) and call createFragment method
+   */
+  @Override
+  public void receiveCommand(
+    @NonNull FrameLayout root,
+    String commandId,
+    @Nullable ReadableArray args
+  ) {
+    super.receiveCommand(root, commandId, args);
+    int reactNativeViewId = args.getInt(0);
+    int commandIdInt = Integer.parseInt(commandId);
+
+    switch (commandIdInt) {
+      case COMMAND_CREATE:
+        createFragment(root, reactNativeViewId);
+        break;
+      default: {}
+    }
+  }
+
+  @ReactPropGroup(names = {"width", "height"}, customType = "Style")
+  public void setStyle(FrameLayout view, int index, Integer value) {
+    if (index == 0) {
+      propWidth = value;
+    }
+
+    if (index == 1) {
+      propHeight = value;
+    }
+  }
+
+  /**
+   * Replace your React Native view with a custom fragment
+   */
+  public void createFragment(FrameLayout root, int reactNativeViewId) {
+    ViewGroup parentView = (ViewGroup) root.findViewById(reactNativeViewId);
+    setupLayout(parentView);
+
+    final MyFragment myFragment = new MyFragment();
+    FragmentActivity activity = (FragmentActivity) reactContext.getCurrentActivity();
+    activity.getSupportFragmentManager()
+            .beginTransaction()
+            .replace(reactNativeViewId, myFragment, String.valueOf(reactNativeViewId))
+            .commit();
+  }
+
+  public void setupLayout(View view) {
+    Choreographer.getInstance().postFrameCallback(new Choreographer.FrameCallback() {
+      @Override
+      public void doFrame(long frameTimeNanos) {
+        manuallyLayoutChildren(view);
+        view.getViewTreeObserver().dispatchOnGlobalLayout();
+        Choreographer.getInstance().postFrameCallback(this);
+      }
+    });
+  }
+
+  /**
+   * Layout all children properly
+   */
+  public void manuallyLayoutChildren(View view) {
+      // propWidth and propHeight coming from react-native props
+      int width = propWidth;
+      int height = propHeight;
+
+      view.measure(
+              View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
+              View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY));
+
+      view.layout(0, 0, width, height);
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 4. Register the `ViewManager`
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin title="MyPackage.kt"
+// replace with your package
+package com.mypackage
+
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+
+class MyPackage : ReactPackage {
+  ...
+  override fun createViewManagers(
+      reactContext: ReactApplicationContext
+  ) = listOf(MyViewManager(reactContext))
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java title="MyPackage.java"
+// replace with your package
+package com.mypackage;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.Arrays;
+import java.util.List;
+
+public class MyPackage implements ReactPackage {
+
+   @Override
+   public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
+       return Arrays.<ViewManager>asList(
+            new MyViewManager(reactContext)
+       );
+   }
+
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 5. Register the `Package`
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin title="MainApplication.kt"
+override fun getPackages(): List<ReactPackage> =
+    PackageList(this).packages.apply {
+        // Packages that cannot be autolinked yet can be added manually here, for example:
+        // add(MyReactNativePackage())
+        add(MyAppPackage())
+    }
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java title="MainApplication.java"
+@Override
+protected List<ReactPackage> getPackages() {
+    List<ReactPackage> packages = new PackageList(this).getPackages();
+    // Packages that cannot be autolinked yet can be added manually here, for example:
+    // packages.add(new MyReactNativePackage());
+    packages.add(new MyAppPackage());
+    return packages;
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 6. Implement the JavaScript module
+
+I. Start with custom View manager:
+
+```tsx title="MyViewManager.tsx"
+import {requireNativeComponent} from 'react-native';
+
+export const MyViewManager =
+  requireNativeComponent('MyViewManager');
+```
+
+II. Then implement custom View calling the `create` method:
+
+```tsx title="MyView.tsx"
+import {useEffect, useRef} from 'react';
+import {
+  PixelRatio,
+  UIManager,
+  findNodeHandle,
+} from 'react-native';
+
+import {MyViewManager} from './my-view-manager';
+
+const createFragment = viewId =>
+  UIManager.dispatchViewManagerCommand(
+    viewId,
+    // we are calling the 'create' command
+    UIManager.MyViewManager.Commands.create.toString(),
+    [viewId],
+  );
+
+export const MyView = () => {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const viewId = findNodeHandle(ref.current);
+    createFragment(viewId);
+  }, []);
+
+  return (
+    <MyViewManager
+      style={{
+        // converts dpi to px, provide desired height
+        height: PixelRatio.getPixelSizeForLayoutSize(200),
+        // converts dpi to px, provide desired width
+        width: PixelRatio.getPixelSizeForLayoutSize(200),
+      }}
+      ref={ref}
+    />
+  );
+};
+```
+
+If you want to expose property setters using `@ReactProp` (or `@ReactPropGroup`) annotation see the [ImageView example](#imageview-example) above.
diff --git a/website/versioned_docs/version-0.81/legacy/native-modules-android.md b/website/versioned_docs/version-0.81/legacy/native-modules-android.md
index 87b91e9e36c..b512f6e20a5 100644
--- a/website/versioned_docs/version-0.81/legacy/native-modules-android.md
+++ b/website/versioned_docs/version-0.81/legacy/native-modules-android.md
@@ -311,7 +311,6 @@ At this point, you have set up the basic scaffolding for your native module in A
 Find a place in your application where you would like to add a call to the native module’s `createCalendarEvent()` method. Below is an example of a component, `NewModuleButton` you can add in your app. You can invoke the native module inside `NewModuleButton`'s `onPress()` function.
 
 ```tsx
-import React from 'react';
 import {NativeModules, Button} from 'react-native';
 
 const NewModuleButton = () => {
diff --git a/website/versioned_docs/version-0.81/legacy/native-modules-ios.md b/website/versioned_docs/version-0.81/legacy/native-modules-ios.md
index 94899bf83c9..b93efe1df24 100644
--- a/website/versioned_docs/version-0.81/legacy/native-modules-ios.md
+++ b/website/versioned_docs/version-0.81/legacy/native-modules-ios.md
@@ -139,7 +139,6 @@ At this point you have set up the basic scaffolding for your native module in iO
 Find a place in your application where you would like to add a call to the native module’s `createCalendarEvent()` method. Below is an example of a component, `NewModuleButton` you can add in your app. You can invoke the native module inside `NewModuleButton`'s `onPress()` function.
 
 ```tsx
-import React from 'react';
 import {Button} from 'react-native';
 
 const NewModuleButton = () => {
diff --git a/website/versioned_docs/version-0.81/linking.md b/website/versioned_docs/version-0.81/linking.md
index ae351b9f484..1e041b84d1c 100644
--- a/website/versioned_docs/version-0.81/linking.md
+++ b/website/versioned_docs/version-0.81/linking.md
@@ -1,671 +1,671 @@
----
-id: linking
-title: Linking
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-`Linking` gives you a general interface to interact with both incoming and outgoing app links.
-
-Every Link (URL) has a URL Scheme, some websites are prefixed with `https://` or `http://` and the `http` is the URL Scheme. Let's call it scheme for short.
-
-In addition to `https`, you're likely also familiar with the `mailto` scheme. When you open a link with the mailto scheme, your operating system will open an installed mail application. Similarly, there are schemes for making phone calls and sending SMS. Read more about [built-in URL](#built-in-url-schemes) schemes below.
-
-Like using the mailto scheme, it's possible to link to other applications by using custom url schemes. For example, when you get a **Magic Link** email from Slack, the **Launch Slack** button is an anchor tag with an href that looks something like: `slack://secret/magic-login/other-secret`. Like with Slack, you can tell the operating system that you want to handle a custom scheme. When the Slack app opens, it receives the URL that was used to open it. This is often referred to as deep linking. Read more about how to [get the deep link](#get-the-deep-link) into your app.
-
-A custom URL scheme isn't the only way to open your application on mobile. For example, if you want to email someone a link to be opened on mobile, using a custom URL scheme isn't ideal because the user might open the email on a desktop, where the link wouldn't work. Instead, you should use standard `https` links, such as `https://www.myapp.io/records/1234546`. On mobile, these links can be configured to open your app. On Android, this feature is called **Deep Links**, while on iOS, it is known as **Universal Links**.
-
-### Built-in URL Schemes
-
-As mentioned in the introduction, there are some URL schemes for core functionality that exist on every platform. The following is a non-exhaustive list, but covers the most commonly used schemes.
-
-| Scheme           | Description                                | iOS | Android |
-| ---------------- | ------------------------------------------ | --- | ------- |
-| `mailto`         | Open mail app, eg: mailto: hello@world.dev | ✅  | ✅      |
-| `tel`            | Open phone app, eg: tel:+123456789         | ✅  | ✅      |
-| `sms`            | Open SMS app, eg: sms:+123456789           | ✅  | ✅      |
-| `https` / `http` | Open web browser app, eg: https://expo.dev | ✅  | ✅      |
-
-### Enabling Deep Links
-
-<div className="banner-native-code-required">
-  <h3>Projects with Native Code Only</h3>
-  <p>The following section only applies to projects with native code exposed. If you are using the managed Expo workflow, see the guide on <a href="https://docs.expo.dev/guides/linking/">Linking</a> in the Expo documentation for the appropriate alternative.</p>
-</div>
-
-If you want to enable deep links in your app, please read the below guide:
-
-<Tabs groupId="syntax" queryString defaultValue={constants.defaultPlatform} values={constants.platforms}>
-<TabItem value="android">
-
-> For instructions on how to add support for deep linking on Android, refer to [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](https://developer.android.com/training/app-indexing/deep-linking.html#adding-filters).
-
-If you wish to receive the intent in an existing instance of MainActivity, you may set the `launchMode` of MainActivity to `singleTask` in `AndroidManifest.xml`. See [`<activity>`](https://developer.android.com/guide/topics/manifest/activity-element.html) documentation for more information.
-
-```xml
-<activity
-  android:name=".MainActivity"
-  android:launchMode="singleTask">
-```
-
-</TabItem>
-<TabItem value="ios">
-
-> **NOTE:** On iOS, you'll need to add the `LinkingIOS` folder into your header search paths as described in step 3 [here](linking-libraries-ios#step-3). If you also want to listen to incoming app links during your app's execution, you'll need to add the following lines to your `*AppDelegate.m`:
-
-<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
-<TabItem value="objc">
-
-```objc title="AppDelegate.mm"
-// iOS 9.x or newer
-#import <React/RCTLinkingManager.h>
-
-- (BOOL)application:(UIApplication *)application
-   openURL:(NSURL *)url
-   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
-{
-  return [RCTLinkingManager application:application openURL:url options:options];
-}
-```
-
-If your app is using [Universal Links](https://developer.apple.com/ios/universal-links/), you'll need to add the following code as well:
-
-```objc title="AppDelegate.mm"
-- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
- restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
-{
- return [RCTLinkingManager application:application
-                  continueUserActivity:userActivity
-                    restorationHandler:restorationHandler];
-}
-```
-
-</TabItem>
-<TabItem value="swift">
-
-```swift title="AppDelegate.swift"
-func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
-  return RCTLinkingManager.application(app, open: url, options: options)
-}
-```
-
-If your app is using [Universal Links](https://developer.apple.com/ios/universal-links/), you'll need to add the following code as well:
-
-```swift title="AppDelegate.swift"
-func application(
-  _ application: UIApplication,
-  continue userActivity: NSUserActivity,
-  restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
-    return RCTLinkingManager.application(
-      application,
-      continue: userActivity,
-      restorationHandler: restorationHandler
-    )
-  }
-```
-
-</TabItem>
-</Tabs>
-
-</TabItem>
-</Tabs>
-
-### Handling Deep Links
-
-There are two ways to handle URLs that open your app.
-
-#### 1. If the app is already open, the app is foregrounded and a Linking 'url' event is fired
-
-You can handle these events with `Linking.addEventListener('url', callback)` - it calls `callback({url})` with the linked URL
-
-#### 2. If the app is not already open, it is opened and the url is passed in as the initialURL
-
-You can handle these events with `Linking.getInitialURL()` - it returns a Promise that resolves to the URL, if there is one.
-
----
-
-## Example
-
-### Open Links and Deep Links (Universal Links)
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useCallback} from 'react';
-import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
-
-const supportedURL = 'https://google.com';
-
-const unsupportedURL = 'slack://open?team=123456';
-
-const OpenURLButton = ({url, children}) => {
-  const handlePress = useCallback(async () => {
-    // Checking if the link is supported for links with custom URL scheme.
-    const supported = await Linking.canOpenURL(url);
-
-    if (supported) {
-      // Opening the link with some app, if the URL scheme is "http" the web link should be opened
-      // by some browser in the mobile
-      await Linking.openURL(url);
-    } else {
-      Alert.alert(`Don't know how to open this URL: ${url}`);
-    }
-  }, [url]);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <OpenURLButton url={supportedURL}>Open Supported URL</OpenURLButton>
-      <OpenURLButton url={unsupportedURL}>Open Unsupported URL</OpenURLButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useCallback} from 'react';
-import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
-
-const supportedURL = 'https://google.com';
-
-const unsupportedURL = 'slack://open?team=123456';
-
-type OpenURLButtonProps = {
-  url: string;
-  children: string;
-};
-
-const OpenURLButton = ({url, children}: OpenURLButtonProps) => {
-  const handlePress = useCallback(async () => {
-    // Checking if the link is supported for links with custom URL scheme.
-    const supported = await Linking.canOpenURL(url);
-
-    if (supported) {
-      // Opening the link with some app, if the URL scheme is "http" the web link should be opened
-      // by some browser in the mobile
-      await Linking.openURL(url);
-    } else {
-      Alert.alert(`Don't know how to open this URL: ${url}`);
-    }
-  }, [url]);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <OpenURLButton url={supportedURL}>Open Supported URL</OpenURLButton>
-      <OpenURLButton url={unsupportedURL}>Open Unsupported URL</OpenURLButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### Open Custom Settings
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useCallback} from 'react';
-import {Button, Linking, StyleSheet, View} from 'react-native';
-
-const OpenSettingsButton = ({children}) => {
-  const handlePress = useCallback(async () => {
-    // Open the custom settings if the app has one
-    await Linking.openSettings();
-  }, []);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <OpenSettingsButton>Open Settings</OpenSettingsButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useCallback} from 'react';
-import {Button, Linking, StyleSheet, View} from 'react-native';
-
-type OpenSettingsButtonProps = {
-  children: string;
-};
-
-const OpenSettingsButton = ({children}: OpenSettingsButtonProps) => {
-  const handlePress = useCallback(async () => {
-    // Open the custom settings if the app has one
-    await Linking.openSettings();
-  }, []);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <OpenSettingsButton>Open Settings</OpenSettingsButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### Get the Deep Link
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useState, useEffect} from 'react';
-import {Linking, StyleSheet, Text, View} from 'react-native';
-
-const useInitialURL = () => {
-  const [url, setUrl] = useState(null);
-  const [processing, setProcessing] = useState(true);
-
-  useEffect(() => {
-    const getUrlAsync = async () => {
-      // Get the deep link used to open the app
-      const initialUrl = await Linking.getInitialURL();
-
-      // The setTimeout is just for testing purpose
-      setTimeout(() => {
-        setUrl(initialUrl);
-        setProcessing(false);
-      }, 1000);
-    };
-
-    getUrlAsync();
-  }, []);
-
-  return {url, processing};
-};
-
-const App = () => {
-  const {url: initialUrl, processing} = useInitialURL();
-
-  return (
-    <View style={styles.container}>
-      <Text>
-        {processing
-          ? 'Processing the initial url from a deep link'
-          : `The deep link is: ${initialUrl || 'None'}`}
-      </Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useState, useEffect} from 'react';
-import {Linking, StyleSheet, Text, View} from 'react-native';
-
-const useInitialURL = () => {
-  const [url, setUrl] = useState<string | null>(null);
-  const [processing, setProcessing] = useState(true);
-
-  useEffect(() => {
-    const getUrlAsync = async () => {
-      // Get the deep link used to open the app
-      const initialUrl = await Linking.getInitialURL();
-
-      // The setTimeout is just for testing purpose
-      setTimeout(() => {
-        setUrl(initialUrl);
-        setProcessing(false);
-      }, 1000);
-    };
-
-    getUrlAsync();
-  }, []);
-
-  return {url, processing};
-};
-
-const App = () => {
-  const {url: initialUrl, processing} = useInitialURL();
-
-  return (
-    <View style={styles.container}>
-      <Text>
-        {processing
-          ? 'Processing the initial url from a deep link'
-          : `The deep link is: ${initialUrl || 'None'}`}
-      </Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### Send Intents (Android)
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=android&ext=js
-import React, {useCallback} from 'react';
-import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
-
-const SendIntentButton = ({action, extras, children}) => {
-  const handlePress = useCallback(async () => {
-    try {
-      await Linking.sendIntent(action, extras);
-    } catch (e) {
-      Alert.alert(e.message);
-    }
-  }, [action, extras]);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <SendIntentButton action="android.intent.action.POWER_USAGE_SUMMARY">
-        Power Usage Summary
-      </SendIntentButton>
-      <SendIntentButton
-        action="android.settings.APP_NOTIFICATION_SETTINGS"
-        extras={[
-          {
-            key: 'android.provider.extra.APP_PACKAGE',
-            value: 'com.facebook.katana',
-          },
-        ]}>
-        App Notification Settings
-      </SendIntentButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Linking%20Example&ext=tsx
-import React, {useCallback} from 'react';
-import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
-
-type SendIntentButtonProps = {
-  action: string;
-  children: string;
-  extras?: Array<{
-    key: string;
-    value: string | number | boolean;
-  }>;
-};
-
-const SendIntentButton = ({
-  action,
-  extras,
-  children,
-}: SendIntentButtonProps) => {
-  const handlePress = useCallback(async () => {
-    try {
-      await Linking.sendIntent(action, extras);
-    } catch (e: any) {
-      Alert.alert(e.message);
-    }
-  }, [action, extras]);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <SendIntentButton action="android.intent.action.POWER_USAGE_SUMMARY">
-        Power Usage Summary
-      </SendIntentButton>
-      <SendIntentButton
-        action="android.settings.APP_NOTIFICATION_SETTINGS"
-        extras={[
-          {
-            key: 'android.provider.extra.APP_PACKAGE',
-            value: 'com.facebook.katana',
-          },
-        ]}>
-        App Notification Settings
-      </SendIntentButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-# Reference
-
-## Methods
-
-### `addEventListener()`
-
-```tsx
-static addEventListener(
-  type: 'url',
-  handler: (event: {url: string}) => void,
-): EmitterSubscription;
-```
-
-Add a handler to Linking changes by listening to the `url` event type and providing the handler.
-
----
-
-### `canOpenURL()`
-
-```tsx
-static canOpenURL(url: string): Promise<boolean>;
-```
-
-Determine whether or not an installed app can handle a given URL.
-
-The method returns a `Promise` object. When it is determined whether or not the given URL can be handled, the promise is resolved and the first parameter is whether or not it can be opened.
-
-The `Promise` will reject on Android if it was impossible to check if the URL can be opened or when targeting Android 11 (SDK 30) if you didn't specify the relevant intent queries in `AndroidManifest.xml`. Similarly on iOS, the promise will reject if you didn't add the specific scheme in the `LSApplicationQueriesSchemes` key inside `Info.plist` (see bellow).
-
-**Parameters:**
-
-| Name                                                     | Type   | Description      |
-| -------------------------------------------------------- | ------ | ---------------- |
-| url <div className="label basic required">Required</div> | string | The URL to open. |
-
-> For web URLs, the protocol (`"http://"`, `"https://"`) must be set accordingly!
-
-> This method has limitations on iOS 9+. From [the official Apple documentation](https://developer.apple.com/documentation/uikit/uiapplication/1622952-canopenurl):
->
-> - If your app is linked against an earlier version of iOS but is running in iOS 9.0 or later, you can call this method up to 50 times. After reaching that limit, subsequent calls always resolve to `false`. If the user reinstalls or upgrades the app, iOS resets the limit.
->
-> As of iOS 9, your app also needs to provide the `LSApplicationQueriesSchemes` key inside `Info.plist` or `canOpenURL()` will always resolve to `false`.
-
-> When targeting Android 11 (SDK 30) you must specify the intents for the schemes you want to handle in `AndroidManifest.xml`. A list of common intents can be found [here](https://developer.android.com/guide/components/intents-common).
->
-> For example to handle `https` schemes the following needs to be added to your manifest:
->
-> ```
-> <manifest ...>
->     <queries>
->         <intent>
->             <action android:name="android.intent.action.VIEW" />
->             <data android:scheme="https"/>
->         </intent>
->     </queries>
-> </manifest>
-> ```
-
----
-
-### `getInitialURL()`
-
-```tsx
-static getInitialURL(): Promise<string | null>;
-```
-
-If the app launch was triggered by an app link, it will give the link url, otherwise it will give `null`.
-
-> To support deep linking on Android, refer https://developer.android.com/training/app-indexing/deep-linking.html#handling-intents
-
-> getInitialURL may return `null` when Remote JS Debugging is active. Disable the debugger to ensure it gets passed.
-
----
-
-### `openSettings()`
-
-```tsx
-static openSettings(): Promise<void>;
-```
-
-Open the Settings app and displays the app’s custom settings, if it has any.
-
----
-
-### `openURL()`
-
-```tsx
-static openURL(url: string): Promise<any>;
-```
-
-Try to open the given `url` with any of the installed apps.
-
-You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386" on Android or "https://maps.apple.com/?ll=37.484847,-122.148386" on iOS), a contact, or any other URL that can be opened with the installed apps.
-
-The method returns a `Promise` object. If the user confirms the open dialog or the url automatically opens, the promise is resolved. If the user cancels the open dialog or there are no registered applications for the url, the promise is rejected.
-
-**Parameters:**
-
-| Name                                                     | Type   | Description      |
-| -------------------------------------------------------- | ------ | ---------------- |
-| url <div className="label basic required">Required</div> | string | The URL to open. |
-
-> This method will fail if the system doesn't know how to open the specified URL. If you're passing in a non-http(s) URL, it's best to check `canOpenURL()` first.
-
-> For web URLs, the protocol (`"http://"`, `"https://"`) must be set accordingly!
-
-> This method may behave differently in a simulator e.g. `"tel:"` links are not able to be handled in the iOS simulator as there's no access to the dialer app.
-
----
-
-### `sendIntent()` <div className="label android">Android</div>
-
-```tsx
-static sendIntent(
-  action: string,
-  extras?: Array<{key: string; value: string | number | boolean}>,
-): Promise<void>;
-```
-
-Launch an Android intent with extras.
-
-**Parameters:**
-
-| Name                                                        | Type                                                       |
-| ----------------------------------------------------------- | ---------------------------------------------------------- |
-| action <div className="label basic required">Required</div> | string                                                     |
-| extras                                                      | `Array<{key: string, value: string ｜ number ｜ boolean}>` |
+---
+id: linking
+title: Linking
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+`Linking` gives you a general interface to interact with both incoming and outgoing app links.
+
+Every Link (URL) has a URL Scheme, some websites are prefixed with `https://` or `http://` and the `http` is the URL Scheme. Let's call it scheme for short.
+
+In addition to `https`, you're likely also familiar with the `mailto` scheme. When you open a link with the mailto scheme, your operating system will open an installed mail application. Similarly, there are schemes for making phone calls and sending SMS. Read more about [built-in URL](#built-in-url-schemes) schemes below.
+
+Like using the mailto scheme, it's possible to link to other applications by using custom url schemes. For example, when you get a **Magic Link** email from Slack, the **Launch Slack** button is an anchor tag with an href that looks something like: `slack://secret/magic-login/other-secret`. Like with Slack, you can tell the operating system that you want to handle a custom scheme. When the Slack app opens, it receives the URL that was used to open it. This is often referred to as deep linking. Read more about how to [get the deep link](#get-the-deep-link) into your app.
+
+A custom URL scheme isn't the only way to open your application on mobile. For example, if you want to email someone a link to be opened on mobile, using a custom URL scheme isn't ideal because the user might open the email on a desktop, where the link wouldn't work. Instead, you should use standard `https` links, such as `https://www.myapp.io/records/1234546`. On mobile, these links can be configured to open your app. On Android, this feature is called **Deep Links**, while on iOS, it is known as **Universal Links**.
+
+### Built-in URL Schemes
+
+As mentioned in the introduction, there are some URL schemes for core functionality that exist on every platform. The following is a non-exhaustive list, but covers the most commonly used schemes.
+
+| Scheme           | Description                                | iOS | Android |
+| ---------------- | ------------------------------------------ | --- | ------- |
+| `mailto`         | Open mail app, eg: mailto: hello@world.dev | ✅  | ✅      |
+| `tel`            | Open phone app, eg: tel:+123456789         | ✅  | ✅      |
+| `sms`            | Open SMS app, eg: sms:+123456789           | ✅  | ✅      |
+| `https` / `http` | Open web browser app, eg: https://expo.dev | ✅  | ✅      |
+
+### Enabling Deep Links
+
+<div className="banner-native-code-required">
+  <h3>Projects with Native Code Only</h3>
+  <p>The following section only applies to projects with native code exposed. If you are using the managed Expo workflow, see the guide on <a href="https://docs.expo.dev/guides/linking/">Linking</a> in the Expo documentation for the appropriate alternative.</p>
+</div>
+
+If you want to enable deep links in your app, please read the below guide:
+
+<Tabs groupId="syntax" queryString defaultValue={constants.defaultPlatform} values={constants.platforms}>
+<TabItem value="android">
+
+> For instructions on how to add support for deep linking on Android, refer to [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](https://developer.android.com/training/app-indexing/deep-linking.html#adding-filters).
+
+If you wish to receive the intent in an existing instance of MainActivity, you may set the `launchMode` of MainActivity to `singleTask` in `AndroidManifest.xml`. See [`<activity>`](https://developer.android.com/guide/topics/manifest/activity-element.html) documentation for more information.
+
+```xml
+<activity
+  android:name=".MainActivity"
+  android:launchMode="singleTask">
+```
+
+</TabItem>
+<TabItem value="ios">
+
+> **NOTE:** On iOS, you'll need to add the `LinkingIOS` folder into your header search paths as described in step 3 [here](linking-libraries-ios#step-3). If you also want to listen to incoming app links during your app's execution, you'll need to add the following lines to your `*AppDelegate.m`:
+
+<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
+<TabItem value="objc">
+
+```objc title="AppDelegate.mm"
+// iOS 9.x or newer
+#import <React/RCTLinkingManager.h>
+
+- (BOOL)application:(UIApplication *)application
+   openURL:(NSURL *)url
+   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
+{
+  return [RCTLinkingManager application:application openURL:url options:options];
+}
+```
+
+If your app is using [Universal Links](https://developer.apple.com/ios/universal-links/), you'll need to add the following code as well:
+
+```objc title="AppDelegate.mm"
+- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
+ restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
+{
+ return [RCTLinkingManager application:application
+                  continueUserActivity:userActivity
+                    restorationHandler:restorationHandler];
+}
+```
+
+</TabItem>
+<TabItem value="swift">
+
+```swift title="AppDelegate.swift"
+func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
+  return RCTLinkingManager.application(app, open: url, options: options)
+}
+```
+
+If your app is using [Universal Links](https://developer.apple.com/ios/universal-links/), you'll need to add the following code as well:
+
+```swift title="AppDelegate.swift"
+func application(
+  _ application: UIApplication,
+  continue userActivity: NSUserActivity,
+  restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
+    return RCTLinkingManager.application(
+      application,
+      continue: userActivity,
+      restorationHandler: restorationHandler
+    )
+  }
+```
+
+</TabItem>
+</Tabs>
+
+</TabItem>
+</Tabs>
+
+### Handling Deep Links
+
+There are two ways to handle URLs that open your app.
+
+#### 1. If the app is already open, the app is foregrounded and a Linking 'url' event is fired
+
+You can handle these events with `Linking.addEventListener('url', callback)` - it calls `callback({url})` with the linked URL
+
+#### 2. If the app is not already open, it is opened and the url is passed in as the initialURL
+
+You can handle these events with `Linking.getInitialURL()` - it returns a Promise that resolves to the URL, if there is one.
+
+---
+
+## Example
+
+### Open Links and Deep Links (Universal Links)
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
+import {useCallback} from 'react';
+import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
+
+const supportedURL = 'https://google.com';
+
+const unsupportedURL = 'slack://open?team=123456';
+
+const OpenURLButton = ({url, children}) => {
+  const handlePress = useCallback(async () => {
+    // Checking if the link is supported for links with custom URL scheme.
+    const supported = await Linking.canOpenURL(url);
+
+    if (supported) {
+      // Opening the link with some app, if the URL scheme is "http" the web link should be opened
+      // by some browser in the mobile
+      await Linking.openURL(url);
+    } else {
+      Alert.alert(`Don't know how to open this URL: ${url}`);
+    }
+  }, [url]);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <OpenURLButton url={supportedURL}>Open Supported URL</OpenURLButton>
+      <OpenURLButton url={unsupportedURL}>Open Unsupported URL</OpenURLButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
+import {useCallback} from 'react';
+import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
+
+const supportedURL = 'https://google.com';
+
+const unsupportedURL = 'slack://open?team=123456';
+
+type OpenURLButtonProps = {
+  url: string;
+  children: string;
+};
+
+const OpenURLButton = ({url, children}: OpenURLButtonProps) => {
+  const handlePress = useCallback(async () => {
+    // Checking if the link is supported for links with custom URL scheme.
+    const supported = await Linking.canOpenURL(url);
+
+    if (supported) {
+      // Opening the link with some app, if the URL scheme is "http" the web link should be opened
+      // by some browser in the mobile
+      await Linking.openURL(url);
+    } else {
+      Alert.alert(`Don't know how to open this URL: ${url}`);
+    }
+  }, [url]);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <OpenURLButton url={supportedURL}>Open Supported URL</OpenURLButton>
+      <OpenURLButton url={unsupportedURL}>Open Unsupported URL</OpenURLButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### Open Custom Settings
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
+import {useCallback} from 'react';
+import {Button, Linking, StyleSheet, View} from 'react-native';
+
+const OpenSettingsButton = ({children}) => {
+  const handlePress = useCallback(async () => {
+    // Open the custom settings if the app has one
+    await Linking.openSettings();
+  }, []);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <OpenSettingsButton>Open Settings</OpenSettingsButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
+import {useCallback} from 'react';
+import {Button, Linking, StyleSheet, View} from 'react-native';
+
+type OpenSettingsButtonProps = {
+  children: string;
+};
+
+const OpenSettingsButton = ({children}: OpenSettingsButtonProps) => {
+  const handlePress = useCallback(async () => {
+    // Open the custom settings if the app has one
+    await Linking.openSettings();
+  }, []);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <OpenSettingsButton>Open Settings</OpenSettingsButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### Get the Deep Link
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
+import {useState, useEffect} from 'react';
+import {Linking, StyleSheet, Text, View} from 'react-native';
+
+const useInitialURL = () => {
+  const [url, setUrl] = useState(null);
+  const [processing, setProcessing] = useState(true);
+
+  useEffect(() => {
+    const getUrlAsync = async () => {
+      // Get the deep link used to open the app
+      const initialUrl = await Linking.getInitialURL();
+
+      // The setTimeout is just for testing purpose
+      setTimeout(() => {
+        setUrl(initialUrl);
+        setProcessing(false);
+      }, 1000);
+    };
+
+    getUrlAsync();
+  }, []);
+
+  return {url, processing};
+};
+
+const App = () => {
+  const {url: initialUrl, processing} = useInitialURL();
+
+  return (
+    <View style={styles.container}>
+      <Text>
+        {processing
+          ? 'Processing the initial url from a deep link'
+          : `The deep link is: ${initialUrl || 'None'}`}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
+import {useState, useEffect} from 'react';
+import {Linking, StyleSheet, Text, View} from 'react-native';
+
+const useInitialURL = () => {
+  const [url, setUrl] = useState<string | null>(null);
+  const [processing, setProcessing] = useState(true);
+
+  useEffect(() => {
+    const getUrlAsync = async () => {
+      // Get the deep link used to open the app
+      const initialUrl = await Linking.getInitialURL();
+
+      // The setTimeout is just for testing purpose
+      setTimeout(() => {
+        setUrl(initialUrl);
+        setProcessing(false);
+      }, 1000);
+    };
+
+    getUrlAsync();
+  }, []);
+
+  return {url, processing};
+};
+
+const App = () => {
+  const {url: initialUrl, processing} = useInitialURL();
+
+  return (
+    <View style={styles.container}>
+      <Text>
+        {processing
+          ? 'Processing the initial url from a deep link'
+          : `The deep link is: ${initialUrl || 'None'}`}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### Send Intents (Android)
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=android&ext=js
+import {useCallback} from 'react';
+import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
+
+const SendIntentButton = ({action, extras, children}) => {
+  const handlePress = useCallback(async () => {
+    try {
+      await Linking.sendIntent(action, extras);
+    } catch (e) {
+      Alert.alert(e.message);
+    }
+  }, [action, extras]);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <SendIntentButton action="android.intent.action.POWER_USAGE_SUMMARY">
+        Power Usage Summary
+      </SendIntentButton>
+      <SendIntentButton
+        action="android.settings.APP_NOTIFICATION_SETTINGS"
+        extras={[
+          {
+            key: 'android.provider.extra.APP_PACKAGE',
+            value: 'com.facebook.katana',
+          },
+        ]}>
+        App Notification Settings
+      </SendIntentButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Linking%20Example&ext=tsx
+import {useCallback} from 'react';
+import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
+
+type SendIntentButtonProps = {
+  action: string;
+  children: string;
+  extras?: Array<{
+    key: string;
+    value: string | number | boolean;
+  }>;
+};
+
+const SendIntentButton = ({
+  action,
+  extras,
+  children,
+}: SendIntentButtonProps) => {
+  const handlePress = useCallback(async () => {
+    try {
+      await Linking.sendIntent(action, extras);
+    } catch (e: any) {
+      Alert.alert(e.message);
+    }
+  }, [action, extras]);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <SendIntentButton action="android.intent.action.POWER_USAGE_SUMMARY">
+        Power Usage Summary
+      </SendIntentButton>
+      <SendIntentButton
+        action="android.settings.APP_NOTIFICATION_SETTINGS"
+        extras={[
+          {
+            key: 'android.provider.extra.APP_PACKAGE',
+            value: 'com.facebook.katana',
+          },
+        ]}>
+        App Notification Settings
+      </SendIntentButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+# Reference
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+  type: 'url',
+  handler: (event: {url: string}) => void,
+): EmitterSubscription;
+```
+
+Add a handler to Linking changes by listening to the `url` event type and providing the handler.
+
+---
+
+### `canOpenURL()`
+
+```tsx
+static canOpenURL(url: string): Promise<boolean>;
+```
+
+Determine whether or not an installed app can handle a given URL.
+
+The method returns a `Promise` object. When it is determined whether or not the given URL can be handled, the promise is resolved and the first parameter is whether or not it can be opened.
+
+The `Promise` will reject on Android if it was impossible to check if the URL can be opened or when targeting Android 11 (SDK 30) if you didn't specify the relevant intent queries in `AndroidManifest.xml`. Similarly on iOS, the promise will reject if you didn't add the specific scheme in the `LSApplicationQueriesSchemes` key inside `Info.plist` (see bellow).
+
+**Parameters:**
+
+| Name                                                     | Type   | Description      |
+| -------------------------------------------------------- | ------ | ---------------- |
+| url <div className="label basic required">Required</div> | string | The URL to open. |
+
+> For web URLs, the protocol (`"http://"`, `"https://"`) must be set accordingly!
+
+> This method has limitations on iOS 9+. From [the official Apple documentation](https://developer.apple.com/documentation/uikit/uiapplication/1622952-canopenurl):
+>
+> - If your app is linked against an earlier version of iOS but is running in iOS 9.0 or later, you can call this method up to 50 times. After reaching that limit, subsequent calls always resolve to `false`. If the user reinstalls or upgrades the app, iOS resets the limit.
+>
+> As of iOS 9, your app also needs to provide the `LSApplicationQueriesSchemes` key inside `Info.plist` or `canOpenURL()` will always resolve to `false`.
+
+> When targeting Android 11 (SDK 30) you must specify the intents for the schemes you want to handle in `AndroidManifest.xml`. A list of common intents can be found [here](https://developer.android.com/guide/components/intents-common).
+>
+> For example to handle `https` schemes the following needs to be added to your manifest:
+>
+> ```
+> <manifest ...>
+>     <queries>
+>         <intent>
+>             <action android:name="android.intent.action.VIEW" />
+>             <data android:scheme="https"/>
+>         </intent>
+>     </queries>
+> </manifest>
+> ```
+
+---
+
+### `getInitialURL()`
+
+```tsx
+static getInitialURL(): Promise<string | null>;
+```
+
+If the app launch was triggered by an app link, it will give the link url, otherwise it will give `null`.
+
+> To support deep linking on Android, refer https://developer.android.com/training/app-indexing/deep-linking.html#handling-intents
+
+> getInitialURL may return `null` when Remote JS Debugging is active. Disable the debugger to ensure it gets passed.
+
+---
+
+### `openSettings()`
+
+```tsx
+static openSettings(): Promise<void>;
+```
+
+Open the Settings app and displays the app’s custom settings, if it has any.
+
+---
+
+### `openURL()`
+
+```tsx
+static openURL(url: string): Promise<any>;
+```
+
+Try to open the given `url` with any of the installed apps.
+
+You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386" on Android or "https://maps.apple.com/?ll=37.484847,-122.148386" on iOS), a contact, or any other URL that can be opened with the installed apps.
+
+The method returns a `Promise` object. If the user confirms the open dialog or the url automatically opens, the promise is resolved. If the user cancels the open dialog or there are no registered applications for the url, the promise is rejected.
+
+**Parameters:**
+
+| Name                                                     | Type   | Description      |
+| -------------------------------------------------------- | ------ | ---------------- |
+| url <div className="label basic required">Required</div> | string | The URL to open. |
+
+> This method will fail if the system doesn't know how to open the specified URL. If you're passing in a non-http(s) URL, it's best to check `canOpenURL()` first.
+
+> For web URLs, the protocol (`"http://"`, `"https://"`) must be set accordingly!
+
+> This method may behave differently in a simulator e.g. `"tel:"` links are not able to be handled in the iOS simulator as there's no access to the dialer app.
+
+---
+
+### `sendIntent()` <div className="label android">Android</div>
+
+```tsx
+static sendIntent(
+  action: string,
+  extras?: Array<{key: string; value: string | number | boolean}>,
+): Promise<void>;
+```
+
+Launch an Android intent with extras.
+
+**Parameters:**
+
+| Name                                                        | Type                                                       |
+| ----------------------------------------------------------- | ---------------------------------------------------------- |
+| action <div className="label basic required">Required</div> | string                                                     |
+| extras                                                      | `Array<{key: string, value: string ｜ number ｜ boolean}>` |
diff --git a/website/versioned_docs/version-0.81/modal.md b/website/versioned_docs/version-0.81/modal.md
index 0164407ab6d..67635cca253 100644
--- a/website/versioned_docs/version-0.81/modal.md
+++ b/website/versioned_docs/version-0.81/modal.md
@@ -1,266 +1,266 @@
----
-id: modal
-title: Modal
----
-
-The Modal component is a basic way to present content above an enclosing view.
-
-## Example
-
-```SnackPlayer name=Modal&supportedPlatforms=android,ios
-import React, {useState} from 'react';
-import {Alert, Modal, StyleSheet, Text, Pressable, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [modalVisible, setModalVisible] = useState(false);
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.centeredView}>
-        <Modal
-          animationType="slide"
-          transparent={true}
-          visible={modalVisible}
-          onRequestClose={() => {
-            Alert.alert('Modal has been closed.');
-            setModalVisible(!modalVisible);
-          }}>
-          <View style={styles.centeredView}>
-            <View style={styles.modalView}>
-              <Text style={styles.modalText}>Hello World!</Text>
-              <Pressable
-                style={[styles.button, styles.buttonClose]}
-                onPress={() => setModalVisible(!modalVisible)}>
-                <Text style={styles.textStyle}>Hide Modal</Text>
-              </Pressable>
-            </View>
-          </View>
-        </Modal>
-        <Pressable
-          style={[styles.button, styles.buttonOpen]}
-          onPress={() => setModalVisible(true)}>
-          <Text style={styles.textStyle}>Show Modal</Text>
-        </Pressable>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  centeredView: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  modalView: {
-    margin: 20,
-    backgroundColor: 'white',
-    borderRadius: 20,
-    padding: 35,
-    alignItems: 'center',
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 4,
-    elevation: 5,
-  },
-  button: {
-    borderRadius: 20,
-    padding: 10,
-    elevation: 2,
-  },
-  buttonOpen: {
-    backgroundColor: '#F194FF',
-  },
-  buttonClose: {
-    backgroundColor: '#2196F3',
-  },
-  textStyle: {
-    color: 'white',
-    fontWeight: 'bold',
-    textAlign: 'center',
-  },
-  modalText: {
-    marginBottom: 15,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Props
-
-### [View Props](view.md#props)
-
-Inherits [View Props](view.md#props).
-
----
-
-### `animated`
-
-> **Deprecated.** Use the [`animationType`](modal.md#animationtype) prop instead.
-
----
-
-### `animationType`
-
-The `animationType` prop controls how the modal animates.
-
-Possible values:
-
-- `slide` slides in from the bottom
-- `fade` fades into view
-- `none` appears without an animation
-
-| Type                                | Default |
-| ----------------------------------- | ------- |
-| enum(`'none'`, `'slide'`, `'fade'`) | `none`  |
-
----
-
-### `backdropColor`
-
-The `backdropColor` of the modal (or background color of the modal's container.) Defaults to `white` if not provided and transparent is `false`. Ignored if `transparent` is `true`.
-
-| Type            | Default |
-| --------------- | ------- |
-| [color](colors) | white   |
-
----
-
-### `hardwareAccelerated` <div className="label android">Android</div>
-
-The `hardwareAccelerated` prop controls whether to force hardware acceleration for the underlying window.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `navigationBarTranslucent` <div className="label android">Android</div>
-
-The `navigationBarTranslucent` prop determines whether your modal should go under the system navigation bar. However, `statusBarTranslucent` also needs to be set to `true` to make navigation bar translucent.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `onDismiss` <div className="label ios">iOS</div>
-
-The `onDismiss` prop allows passing a function that will be called once the modal has been dismissed.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onOrientationChange` <div className="label ios">iOS</div>
-
-The `onOrientationChange` callback is called when the orientation changes while the modal is being displayed. The orientation provided is only 'portrait' or 'landscape'. This callback is also called on initial render, regardless of the current orientation.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `allowSwipeDismissal` <div className="label ios">iOS</div>
-
-Controls whether the modal can be dismissed by swiping down on iOS.
-This requires you to implement the `onRequestClose` prop to handle the dismissal.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `onRequestClose`
-
-The `onRequestClose` callback is called when the user taps the hardware back button on Android or the menu button on Apple TV. Because of this required prop, be aware that `BackHandler` events will not be emitted as long as the modal is open.
-On iOS, this callback is called when a Modal is being dismissed using a drag gesture when `presentationStyle` is `pageSheet` or `formSheet`. When `allowSwipeDismissal` is enabled this callback will be called after dismissing the modal.
-
-| Type                                                                                                                                                                                           |
-| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| function <div className="label basic required">Required</div><div className="label android">Android</div><div className="label tv">TV</div><hr />function <div className="label ios">iOS</div> |
-
----
-
-### `onShow`
-
-The `onShow` prop allows passing a function that will be called once the modal has been shown.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `presentationStyle` <div className="label ios">iOS</div>
-
-The `presentationStyle` prop controls how the modal appears (generally on larger devices such as iPad or plus-sized iPhones). See https://developer.apple.com/reference/uikit/uimodalpresentationstyle for details.
-
-Possible values:
-
-- `fullScreen` covers the screen completely
-- `pageSheet` covers portrait-width view centered (only on larger devices)
-- `formSheet` covers narrow-width view centered (only on larger devices)
-- `overFullScreen` covers the screen completely, but allows transparency
-
-| Type                                                                   | Default                                                                             |
-| ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
-| enum(`'fullScreen'`, `'pageSheet'`, `'formSheet'`, `'overFullScreen'`) | `fullScreen` if `transparent={false}`<hr />`overFullScreen` if `transparent={true}` |
-
----
-
-### `statusBarTranslucent` <div className="label android">Android</div>
-
-The `statusBarTranslucent` prop determines whether your modal should go under the system statusbar.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `supportedOrientations` <div className="label ios">iOS</div>
-
-The `supportedOrientations` prop allows the modal to be rotated to any of the specified orientations. On iOS, the modal is still restricted by what's specified in your app's Info.plist's UISupportedInterfaceOrientations field.
-
-> When using `presentationStyle` of `pageSheet` or `formSheet`, this property will be ignored by iOS.
-
-| Type                                                                                                           | Default        |
-| -------------------------------------------------------------------------------------------------------------- | -------------- |
-| array of enums(`'portrait'`, `'portrait-upside-down'`, `'landscape'`, `'landscape-left'`, `'landscape-right'`) | `['portrait']` |
-
----
-
-### `transparent`
-
-The `transparent` prop determines whether your modal will fill the entire view. Setting this to `true` will render the modal over a transparent background.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `visible`
-
-The `visible` prop determines whether your modal is visible.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `true`  |
+---
+id: modal
+title: Modal
+---
+
+The Modal component is a basic way to present content above an enclosing view.
+
+## Example
+
+```SnackPlayer name=Modal&supportedPlatforms=android,ios
+import {useState} from 'react';
+import {Alert, Modal, StyleSheet, Text, Pressable, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [modalVisible, setModalVisible] = useState(false);
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.centeredView}>
+        <Modal
+          animationType="slide"
+          transparent={true}
+          visible={modalVisible}
+          onRequestClose={() => {
+            Alert.alert('Modal has been closed.');
+            setModalVisible(!modalVisible);
+          }}>
+          <View style={styles.centeredView}>
+            <View style={styles.modalView}>
+              <Text style={styles.modalText}>Hello World!</Text>
+              <Pressable
+                style={[styles.button, styles.buttonClose]}
+                onPress={() => setModalVisible(!modalVisible)}>
+                <Text style={styles.textStyle}>Hide Modal</Text>
+              </Pressable>
+            </View>
+          </View>
+        </Modal>
+        <Pressable
+          style={[styles.button, styles.buttonOpen]}
+          onPress={() => setModalVisible(true)}>
+          <Text style={styles.textStyle}>Show Modal</Text>
+        </Pressable>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  centeredView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalView: {
+    margin: 20,
+    backgroundColor: 'white',
+    borderRadius: 20,
+    padding: 35,
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  button: {
+    borderRadius: 20,
+    padding: 10,
+    elevation: 2,
+  },
+  buttonOpen: {
+    backgroundColor: '#F194FF',
+  },
+  buttonClose: {
+    backgroundColor: '#2196F3',
+  },
+  textStyle: {
+    color: 'white',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  modalText: {
+    marginBottom: 15,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Props
+
+### [View Props](view.md#props)
+
+Inherits [View Props](view.md#props).
+
+---
+
+### `animated`
+
+> **Deprecated.** Use the [`animationType`](modal.md#animationtype) prop instead.
+
+---
+
+### `animationType`
+
+The `animationType` prop controls how the modal animates.
+
+Possible values:
+
+- `slide` slides in from the bottom
+- `fade` fades into view
+- `none` appears without an animation
+
+| Type                                | Default |
+| ----------------------------------- | ------- |
+| enum(`'none'`, `'slide'`, `'fade'`) | `none`  |
+
+---
+
+### `backdropColor`
+
+The `backdropColor` of the modal (or background color of the modal's container.) Defaults to `white` if not provided and transparent is `false`. Ignored if `transparent` is `true`.
+
+| Type            | Default |
+| --------------- | ------- |
+| [color](colors) | white   |
+
+---
+
+### `hardwareAccelerated` <div className="label android">Android</div>
+
+The `hardwareAccelerated` prop controls whether to force hardware acceleration for the underlying window.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `navigationBarTranslucent` <div className="label android">Android</div>
+
+The `navigationBarTranslucent` prop determines whether your modal should go under the system navigation bar. However, `statusBarTranslucent` also needs to be set to `true` to make navigation bar translucent.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `onDismiss` <div className="label ios">iOS</div>
+
+The `onDismiss` prop allows passing a function that will be called once the modal has been dismissed.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onOrientationChange` <div className="label ios">iOS</div>
+
+The `onOrientationChange` callback is called when the orientation changes while the modal is being displayed. The orientation provided is only 'portrait' or 'landscape'. This callback is also called on initial render, regardless of the current orientation.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `allowSwipeDismissal` <div className="label ios">iOS</div>
+
+Controls whether the modal can be dismissed by swiping down on iOS.
+This requires you to implement the `onRequestClose` prop to handle the dismissal.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `onRequestClose`
+
+The `onRequestClose` callback is called when the user taps the hardware back button on Android or the menu button on Apple TV. Because of this required prop, be aware that `BackHandler` events will not be emitted as long as the modal is open.
+On iOS, this callback is called when a Modal is being dismissed using a drag gesture when `presentationStyle` is `pageSheet` or `formSheet`. When `allowSwipeDismissal` is enabled this callback will be called after dismissing the modal.
+
+| Type                                                                                                                                                                                           |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| function <div className="label basic required">Required</div><div className="label android">Android</div><div className="label tv">TV</div><hr />function <div className="label ios">iOS</div> |
+
+---
+
+### `onShow`
+
+The `onShow` prop allows passing a function that will be called once the modal has been shown.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `presentationStyle` <div className="label ios">iOS</div>
+
+The `presentationStyle` prop controls how the modal appears (generally on larger devices such as iPad or plus-sized iPhones). See https://developer.apple.com/reference/uikit/uimodalpresentationstyle for details.
+
+Possible values:
+
+- `fullScreen` covers the screen completely
+- `pageSheet` covers portrait-width view centered (only on larger devices)
+- `formSheet` covers narrow-width view centered (only on larger devices)
+- `overFullScreen` covers the screen completely, but allows transparency
+
+| Type                                                                   | Default                                                                             |
+| ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
+| enum(`'fullScreen'`, `'pageSheet'`, `'formSheet'`, `'overFullScreen'`) | `fullScreen` if `transparent={false}`<hr />`overFullScreen` if `transparent={true}` |
+
+---
+
+### `statusBarTranslucent` <div className="label android">Android</div>
+
+The `statusBarTranslucent` prop determines whether your modal should go under the system statusbar.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `supportedOrientations` <div className="label ios">iOS</div>
+
+The `supportedOrientations` prop allows the modal to be rotated to any of the specified orientations. On iOS, the modal is still restricted by what's specified in your app's Info.plist's UISupportedInterfaceOrientations field.
+
+> When using `presentationStyle` of `pageSheet` or `formSheet`, this property will be ignored by iOS.
+
+| Type                                                                                                           | Default        |
+| -------------------------------------------------------------------------------------------------------------- | -------------- |
+| array of enums(`'portrait'`, `'portrait-upside-down'`, `'landscape'`, `'landscape-left'`, `'landscape-right'`) | `['portrait']` |
+
+---
+
+### `transparent`
+
+The `transparent` prop determines whether your modal will fill the entire view. Setting this to `true` will render the modal over a transparent background.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `visible`
+
+The `visible` prop determines whether your modal is visible.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `true`  |
diff --git a/website/versioned_docs/version-0.81/navigation.md b/website/versioned_docs/version-0.81/navigation.md
index 363b48b1261..4d9586bf801 100644
--- a/website/versioned_docs/version-0.81/navigation.md
+++ b/website/versioned_docs/version-0.81/navigation.md
@@ -64,7 +64,6 @@ Now you are ready to build and run your app on the device/simulator.
 Now you can create an app with a home screen and a profile screen:
 
 ```tsx
-import * as React from 'react';
 import {createStaticNavigation} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 
diff --git a/website/versioned_docs/version-0.81/network.md b/website/versioned_docs/version-0.81/network.md
index 3cdaf0dd55b..dc9101c5912 100644
--- a/website/versioned_docs/version-0.81/network.md
+++ b/website/versioned_docs/version-0.81/network.md
@@ -1,280 +1,280 @@
----
-id: network
-title: Networking
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may need to fetch a chunk of static content from another server.
-
-## Using Fetch
-
-React Native provides the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) for your networking needs. Fetch will seem familiar if you have used `XMLHttpRequest` or other networking APIs before. You may refer to MDN's guide on [Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) for additional information.
-
-### Making requests
-
-In order to fetch content from an arbitrary URL, you can pass the URL to fetch:
-
-```ts
-fetch('https://mywebsite.com/mydata.json');
-```
-
-Fetch also takes an optional second argument that allows you to customize the HTTP request. You may want to specify additional headers, or make a POST request:
-
-```ts
-fetch('https://mywebsite.com/endpoint/', {
-  method: 'POST',
-  headers: {
-    Accept: 'application/json',
-    'Content-Type': 'application/json',
-  },
-  body: JSON.stringify({
-    firstParam: 'yourValue',
-    secondParam: 'yourOtherValue',
-  }),
-});
-```
-
-Take a look at the [Fetch Request docs](https://developer.mozilla.org/en-US/docs/Web/API/Request) for a full list of properties.
-
-### Handling the response
-
-The above examples show how you can make a request. In many cases, you will want to do something with the response.
-
-Networking is an inherently asynchronous operation. Fetch method will return a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that makes it straightforward to write code that works in an asynchronous manner:
-
-```ts
-const getMoviesFromApi = () => {
-  return fetch('https://reactnative.dev/movies.json')
-    .then(response => response.json())
-    .then(json => {
-      return json.movies;
-    })
-    .catch(error => {
-      console.error(error);
-    });
-};
-```
-
-You can also use the `async` / `await` syntax in a React Native app:
-
-```ts
-const getMoviesFromApiAsync = async () => {
-  try {
-    const response = await fetch(
-      'https://reactnative.dev/movies.json',
-    );
-    const json = await response.json();
-    return json.movies;
-  } catch (error) {
-    console.error(error);
-  }
-};
-```
-
-Don't forget to catch any errors that may be thrown by `fetch`, otherwise they will be dropped silently.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Fetch%20Example&ext=js
-import React, {useEffect, useState} from 'react';
-import {ActivityIndicator, FlatList, Text, View} from 'react-native';
-
-const App = () => {
-  const [isLoading, setLoading] = useState(true);
-  const [data, setData] = useState([]);
-
-  const getMovies = async () => {
-    try {
-      const response = await fetch('https://reactnative.dev/movies.json');
-      const json = await response.json();
-      setData(json.movies);
-    } catch (error) {
-      console.error(error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    getMovies();
-  }, []);
-
-  return (
-    <View style={{flex: 1, padding: 24}}>
-      {isLoading ? (
-        <ActivityIndicator />
-      ) : (
-        <FlatList
-          data={data}
-          keyExtractor={({id}) => id}
-          renderItem={({item}) => (
-            <Text>
-              {item.title}, {item.releaseYear}
-            </Text>
-          )}
-        />
-      )}
-    </View>
-  );
-};
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Fetch%20Example&ext=tsx
-import React, {useEffect, useState} from 'react';
-import {ActivityIndicator, FlatList, Text, View} from 'react-native';
-
-type Movie = {
-  id: string;
-  title: string;
-  releaseYear: string;
-};
-
-const App = () => {
-  const [isLoading, setLoading] = useState(true);
-  const [data, setData] = useState<Movie[]>([]);
-
-  const getMovies = async () => {
-    try {
-      const response = await fetch('https://reactnative.dev/movies.json');
-      const json = await response.json();
-      setData(json.movies);
-    } catch (error) {
-      console.error(error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    getMovies();
-  }, []);
-
-  return (
-    <View style={{flex: 1, padding: 24}}>
-      {isLoading ? (
-        <ActivityIndicator />
-      ) : (
-        <FlatList
-          data={data}
-          keyExtractor={({id}) => id}
-          renderItem={({item}) => (
-            <Text>
-              {item.title}, {item.releaseYear}
-            </Text>
-          )}
-        />
-      )}
-    </View>
-  );
-};
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-:::info
-By default, iOS 9.0 or later enforce App Transport Security (ATS). ATS requires any HTTP connection to use HTTPS. If you need to fetch from a cleartext URL (one that begins with `http`) you will first need to [add an ATS exception](integration-with-existing-apps.md#test-your-integration). If you know ahead of time what domains you will need access to, it is more secure to add exceptions only for those domains; if the domains are not known until runtime you can [disable ATS completely](publishing-to-app-store.md#1-enable-app-transport-security). Note however that from January 2017, [Apple's App Store review will require reasonable justification for disabling ATS](https://forums.developer.apple.com/thread/48979). See [Apple's documentation](https://developer.apple.com/library/ios/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html#//apple_ref/doc/uid/TP40009251-SW33) for more information.
-:::
-
-:::tip
-On Android, as of API Level 28, clear text traffic is also blocked by default. This behaviour can be overridden by setting [`android:usesCleartextTraffic`](https://developer.android.com/guide/topics/manifest/application-element#usesCleartextTraffic) in the app manifest file.
-:::
-
-## Using Other Networking Libraries
-
-The [XMLHttpRequest API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) is built into React Native. This means that you can use third party libraries such as [frisbee](https://github.com/niftylettuce/frisbee) or [axios](https://github.com/axios/axios) that depend on it, or you can use the XMLHttpRequest API directly if you prefer.
-
-```ts
-const request = new XMLHttpRequest();
-request.onreadystatechange = e => {
-  if (request.readyState !== 4) {
-    return;
-  }
-
-  if (request.status === 200) {
-    console.log('success', request.responseText);
-  } else {
-    console.warn('error');
-  }
-};
-
-request.open('GET', 'https://mywebsite.com/endpoint/');
-request.send();
-```
-
-:::warning[Caution]
-The security model for XMLHttpRequest is different than on web as there is no concept of [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) in native apps.
-:::
-
-## WebSocket Support
-
-React Native also supports [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket), a protocol which provides full-duplex communication channels over a single TCP connection.
-
-```ts
-const ws = new WebSocket('ws://host.com/path');
-
-ws.onopen = () => {
-  // connection opened
-  ws.send('something'); // send a message
-};
-
-ws.onmessage = e => {
-  // a message was received
-  console.log(e.data);
-};
-
-ws.onerror = e => {
-  // an error occurred
-  console.log(e.message);
-};
-
-ws.onclose = e => {
-  // connection closed
-  console.log(e.code, e.reason);
-};
-```
-
-## Known Issues with `fetch` and cookie based authentication
-
-The following options are currently not working with `fetch`
-
-- `redirect:manual`
-- `credentials:omit`
-
-* Having same name headers on Android will result in only the latest one being present. A temporary solution can be found here: https://github.com/facebook/react-native/issues/18837#issuecomment-398779994.
-* Cookie based authentication is currently unstable. You can view some of the issues raised here: https://github.com/facebook/react-native/issues/23185
-* As a minimum on iOS, when redirected through a `302`, if a `Set-Cookie` header is present, the cookie is not set properly. Since the redirect cannot be handled manually this might cause a scenario where infinite requests occur if the redirect is the result of an expired session.
-
-## Configuring NSURLSession on iOS
-
-For some applications it may be appropriate to provide a custom `NSURLSessionConfiguration` for the underlying `NSURLSession` that is used for network requests in a React Native application running on iOS. For instance, one may need to set a custom user agent string for all network requests coming from the app or supply `NSURLSession` with an ephemeral `NSURLSessionConfiguration`. The function `RCTSetCustomNSURLSessionConfigurationProvider` allows for such customization. Remember to add the following import to the file in which `RCTSetCustomNSURLSessionConfigurationProvider` will be called:
-
-```objectivec
-#import <React/RCTHTTPRequestHandler.h>
-```
-
-`RCTSetCustomNSURLSessionConfigurationProvider` should be called early in the application life cycle such that it is readily available when needed by React, for instance:
-
-```objectivec
--(void)application:(__unused UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
-
-  // set RCTSetCustomNSURLSessionConfigurationProvider
-  RCTSetCustomNSURLSessionConfigurationProvider(^NSURLSessionConfiguration *{
-     NSURLSessionConfiguration *configuration = [NSURLSessionConfiguration defaultSessionConfiguration];
-     // configure the session
-     return configuration;
-  });
-
-  // set up React
-  _bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
-}
-```
+---
+id: network
+title: Networking
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may need to fetch a chunk of static content from another server.
+
+## Using Fetch
+
+React Native provides the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) for your networking needs. Fetch will seem familiar if you have used `XMLHttpRequest` or other networking APIs before. You may refer to MDN's guide on [Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) for additional information.
+
+### Making requests
+
+In order to fetch content from an arbitrary URL, you can pass the URL to fetch:
+
+```ts
+fetch('https://mywebsite.com/mydata.json');
+```
+
+Fetch also takes an optional second argument that allows you to customize the HTTP request. You may want to specify additional headers, or make a POST request:
+
+```ts
+fetch('https://mywebsite.com/endpoint/', {
+  method: 'POST',
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json',
+  },
+  body: JSON.stringify({
+    firstParam: 'yourValue',
+    secondParam: 'yourOtherValue',
+  }),
+});
+```
+
+Take a look at the [Fetch Request docs](https://developer.mozilla.org/en-US/docs/Web/API/Request) for a full list of properties.
+
+### Handling the response
+
+The above examples show how you can make a request. In many cases, you will want to do something with the response.
+
+Networking is an inherently asynchronous operation. Fetch method will return a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that makes it straightforward to write code that works in an asynchronous manner:
+
+```ts
+const getMoviesFromApi = () => {
+  return fetch('https://reactnative.dev/movies.json')
+    .then(response => response.json())
+    .then(json => {
+      return json.movies;
+    })
+    .catch(error => {
+      console.error(error);
+    });
+};
+```
+
+You can also use the `async` / `await` syntax in a React Native app:
+
+```ts
+const getMoviesFromApiAsync = async () => {
+  try {
+    const response = await fetch(
+      'https://reactnative.dev/movies.json',
+    );
+    const json = await response.json();
+    return json.movies;
+  } catch (error) {
+    console.error(error);
+  }
+};
+```
+
+Don't forget to catch any errors that may be thrown by `fetch`, otherwise they will be dropped silently.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Fetch%20Example&ext=js
+import {useEffect, useState} from 'react';
+import {ActivityIndicator, FlatList, Text, View} from 'react-native';
+
+const App = () => {
+  const [isLoading, setLoading] = useState(true);
+  const [data, setData] = useState([]);
+
+  const getMovies = async () => {
+    try {
+      const response = await fetch('https://reactnative.dev/movies.json');
+      const json = await response.json();
+      setData(json.movies);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    getMovies();
+  }, []);
+
+  return (
+    <View style={{flex: 1, padding: 24}}>
+      {isLoading ? (
+        <ActivityIndicator />
+      ) : (
+        <FlatList
+          data={data}
+          keyExtractor={({id}) => id}
+          renderItem={({item}) => (
+            <Text>
+              {item.title}, {item.releaseYear}
+            </Text>
+          )}
+        />
+      )}
+    </View>
+  );
+};
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Fetch%20Example&ext=tsx
+import {useEffect, useState} from 'react';
+import {ActivityIndicator, FlatList, Text, View} from 'react-native';
+
+type Movie = {
+  id: string;
+  title: string;
+  releaseYear: string;
+};
+
+const App = () => {
+  const [isLoading, setLoading] = useState(true);
+  const [data, setData] = useState<Movie[]>([]);
+
+  const getMovies = async () => {
+    try {
+      const response = await fetch('https://reactnative.dev/movies.json');
+      const json = await response.json();
+      setData(json.movies);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    getMovies();
+  }, []);
+
+  return (
+    <View style={{flex: 1, padding: 24}}>
+      {isLoading ? (
+        <ActivityIndicator />
+      ) : (
+        <FlatList
+          data={data}
+          keyExtractor={({id}) => id}
+          renderItem={({item}) => (
+            <Text>
+              {item.title}, {item.releaseYear}
+            </Text>
+          )}
+        />
+      )}
+    </View>
+  );
+};
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+:::info
+By default, iOS 9.0 or later enforce App Transport Security (ATS). ATS requires any HTTP connection to use HTTPS. If you need to fetch from a cleartext URL (one that begins with `http`) you will first need to [add an ATS exception](integration-with-existing-apps.md#test-your-integration). If you know ahead of time what domains you will need access to, it is more secure to add exceptions only for those domains; if the domains are not known until runtime you can [disable ATS completely](publishing-to-app-store.md#1-enable-app-transport-security). Note however that from January 2017, [Apple's App Store review will require reasonable justification for disabling ATS](https://forums.developer.apple.com/thread/48979). See [Apple's documentation](https://developer.apple.com/library/ios/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html#//apple_ref/doc/uid/TP40009251-SW33) for more information.
+:::
+
+:::tip
+On Android, as of API Level 28, clear text traffic is also blocked by default. This behaviour can be overridden by setting [`android:usesCleartextTraffic`](https://developer.android.com/guide/topics/manifest/application-element#usesCleartextTraffic) in the app manifest file.
+:::
+
+## Using Other Networking Libraries
+
+The [XMLHttpRequest API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) is built into React Native. This means that you can use third party libraries such as [frisbee](https://github.com/niftylettuce/frisbee) or [axios](https://github.com/axios/axios) that depend on it, or you can use the XMLHttpRequest API directly if you prefer.
+
+```ts
+const request = new XMLHttpRequest();
+request.onreadystatechange = e => {
+  if (request.readyState !== 4) {
+    return;
+  }
+
+  if (request.status === 200) {
+    console.log('success', request.responseText);
+  } else {
+    console.warn('error');
+  }
+};
+
+request.open('GET', 'https://mywebsite.com/endpoint/');
+request.send();
+```
+
+:::warning[Caution]
+The security model for XMLHttpRequest is different than on web as there is no concept of [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) in native apps.
+:::
+
+## WebSocket Support
+
+React Native also supports [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket), a protocol which provides full-duplex communication channels over a single TCP connection.
+
+```ts
+const ws = new WebSocket('ws://host.com/path');
+
+ws.onopen = () => {
+  // connection opened
+  ws.send('something'); // send a message
+};
+
+ws.onmessage = e => {
+  // a message was received
+  console.log(e.data);
+};
+
+ws.onerror = e => {
+  // an error occurred
+  console.log(e.message);
+};
+
+ws.onclose = e => {
+  // connection closed
+  console.log(e.code, e.reason);
+};
+```
+
+## Known Issues with `fetch` and cookie based authentication
+
+The following options are currently not working with `fetch`
+
+- `redirect:manual`
+- `credentials:omit`
+
+* Having same name headers on Android will result in only the latest one being present. A temporary solution can be found here: https://github.com/facebook/react-native/issues/18837#issuecomment-398779994.
+* Cookie based authentication is currently unstable. You can view some of the issues raised here: https://github.com/facebook/react-native/issues/23185
+* As a minimum on iOS, when redirected through a `302`, if a `Set-Cookie` header is present, the cookie is not set properly. Since the redirect cannot be handled manually this might cause a scenario where infinite requests occur if the redirect is the result of an expired session.
+
+## Configuring NSURLSession on iOS
+
+For some applications it may be appropriate to provide a custom `NSURLSessionConfiguration` for the underlying `NSURLSession` that is used for network requests in a React Native application running on iOS. For instance, one may need to set a custom user agent string for all network requests coming from the app or supply `NSURLSession` with an ephemeral `NSURLSessionConfiguration`. The function `RCTSetCustomNSURLSessionConfigurationProvider` allows for such customization. Remember to add the following import to the file in which `RCTSetCustomNSURLSessionConfigurationProvider` will be called:
+
+```objectivec
+#import <React/RCTHTTPRequestHandler.h>
+```
+
+`RCTSetCustomNSURLSessionConfigurationProvider` should be called early in the application life cycle such that it is readily available when needed by React, for instance:
+
+```objectivec
+-(void)application:(__unused UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
+
+  // set RCTSetCustomNSURLSessionConfigurationProvider
+  RCTSetCustomNSURLSessionConfigurationProvider(^NSURLSessionConfiguration *{
+     NSURLSessionConfiguration *configuration = [NSURLSessionConfiguration defaultSessionConfiguration];
+     // configure the session
+     return configuration;
+  });
+
+  // set up React
+  _bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
+}
+```
diff --git a/website/versioned_docs/version-0.81/optimizing-flatlist-configuration.md b/website/versioned_docs/version-0.81/optimizing-flatlist-configuration.md
index 279fe942964..7a4cbadcd5a 100644
--- a/website/versioned_docs/version-0.81/optimizing-flatlist-configuration.md
+++ b/website/versioned_docs/version-0.81/optimizing-flatlist-configuration.md
@@ -1,154 +1,154 @@
----
-id: optimizing-flatlist-configuration
-title: Optimizing FlatList Configuration
----
-
-## Terms
-
-- **VirtualizedList:** The component behind `FlatList` (React Native's implementation of the [`Virtual List`](https://bvaughn.github.io/react-virtualized/#/components/List) concept.)
-
-- **Memory consumption:** How much information about your list is being stored in memory, which could lead to an app crash.
-
-- **Responsiveness:** Application ability to respond to interactions. Low responsiveness, for instance, is when you touch on a component and it waits a bit to respond, instead of responding immediately as expected.
-
-- **Blank areas:** When `VirtualizedList` can't render your items fast enough, you may enter a part of your list with non-rendered components that appear as blank space.
-
-- **Viewport:** The visible area of content that is rendered to pixels.
-
-- **Window:** The area in which items should be mounted, which is generally much larger than the viewport.
-
-## Props
-
-Here are a list of props that can help to improve `FlatList` performance:
-
-### removeClippedSubviews
-
-| Type    | Default                              |
-| ------- | ------------------------------------ |
-| Boolean | `true` on Android, otherwise `false` |
-
-If `true`, views that are outside of the viewport are automatically detached from the native view hierarchy.
-
-**Pros:** This reduces time spent on the main thread, and thus reduces the risk of dropped frames, by excluding views outside of the viewport from the native rendering and drawing traversals.
-
-**Cons:** Be aware that this implementation can have bugs, such as missing content (mainly observed on iOS), especially if you are doing complex things with transforms and/or absolute positioning. Also note this does not save significant memory because the views are not deallocated, only detached.
-
-### maxToRenderPerBatch
-
-| Type   | Default |
-| ------ | ------- |
-| Number | 10      |
-
-It is a `VirtualizedList` prop that can be passed through `FlatList`. This controls the amount of items rendered per batch, which is the next chunk of items rendered on every scroll.
-
-**Pros:** Setting a bigger number means less visual blank areas when scrolling (increases the fill rate).
-
-**Cons:** More items per batch means longer periods of JavaScript execution potentially blocking other event processing, like presses, hurting responsiveness.
-
-### updateCellsBatchingPeriod
-
-| Type   | Default |
-| ------ | ------- |
-| Number | 50      |
-
-While `maxToRenderPerBatch` tells the amount of items rendered per batch, setting `updateCellsBatchingPeriod` tells your `VirtualizedList` the delay in milliseconds between batch renders (how frequently your component will be rendering the windowed items).
-
-**Pros:** Combining this prop with `maxToRenderPerBatch` gives you the power to, for example, render more items in a less frequent batch, or less items in a more frequent batch.
-
-**Cons:** Less frequent batches may cause blank areas, More frequent batches may cause responsiveness issues.
-
-### initialNumToRender
-
-| Type   | Default |
-| ------ | ------- |
-| Number | 10      |
-
-The initial amount of items to render.
-
-**Pros:** Define precise number of items that would cover the screen for every device. This can be a big performance boost for the initial render.
-
-**Cons:** Setting a low `initialNumToRender` may cause blank areas, especially if it's too small to cover the viewport on initial render.
-
-### windowSize
-
-| Type   | Default |
-| ------ | ------- |
-| Number | 21      |
-
-The number passed here is a measurement unit where 1 is equivalent to your viewport height. The default value is 21 (10 viewports above, 10 below, and one in between).
-
-**Pros:** Bigger `windowSize` will result in less chance of seeing blank space while scrolling. On the other hand, smaller `windowSize` will result in fewer items mounted simultaneously, saving memory.
-
-**Cons:** For a bigger `windowSize`, you will have more memory consumption. For a lower `windowSize`, you will have a bigger chance of seeing blank areas.
-
-## List items
-
-Below are some tips about list item components. They are the core of your list, so they need to be fast.
-
-### Use basic components
-
-The more complex your components are, the slower they will render. Try to avoid a lot of logic and nesting in your list items. If you are reusing this list item component a lot in your app, create a component only for your big lists and make them with as little logic and nesting as possible.
-
-### Use light components
-
-The heavier your components are, the slower they render. Avoid heavy images (use a cropped version or thumbnail for list items, as small as possible). Talk to your design team, use as little effects and interactions and information as possible in your list. Show them in your item's detail.
-
-### Use `memo()`
-
-`React.memo()` creates a memoized component that will be re-rendered only when the props passed to the component change. We can use this function to optimize the components in the FlatList.
-
-```tsx
-import React, {memo} from 'react';
-import {View, Text} from 'react-native';
-
-const MyListItem = memo(
-  ({title}: {title: string}) => (
-    <View>
-      <Text>{title}</Text>
-    </View>
-  ),
-  (prevProps, nextProps) => {
-    return prevProps.title === nextProps.title;
-  },
-);
-
-export default MyListItem;
-```
-
-In this example, we have determined that MyListItem should be re-rendered only when the title changes. We passed the comparison function as the second argument to React.memo() so that the component is re-rendered only when the specified prop is changed. If the comparison function returns true, the component will not be re-rendered.
-
-### Use cached optimized images
-
-You can use the community packages (such as [@d11/react-native-fast-image](https://github.com/ds-horizon/react-native-fast-image) from [Dream11](https://github.com/ds-horizon)) for more performant images. Every image in your list is a `new Image()` instance. The faster it reaches the `loaded` hook, the faster your JavaScript thread will be free again.
-
-### Use getItemLayout
-
-If all your list item components have the same height (or width, for a horizontal list), providing the [getItemLayout](flatlist#getitemlayout) prop removes the need for your `FlatList` to manage async layout calculations. This is a very desirable optimization technique.
-
-If your components have dynamic size and you really need performance, consider asking your design team if they may think of a redesign in order to perform better.
-
-### Use keyExtractor or key
-
-You can set the [`keyExtractor`](flatlist#keyextractor) to your `FlatList` component. This prop is used for caching and as the React `key` to track item re-ordering.
-
-You can also use a `key` prop in your item component.
-
-### Avoid anonymous function on renderItem
-
-For functional components, move the `renderItem` function outside of the returned JSX. Also, ensure that it is wrapped in a `useCallback` hook to prevent it from being recreated each render.
-
-For class components, move the `renderItem` function outside of the render function, so it won't recreate itself each time the render function is called.
-
-```tsx
-const renderItem = useCallback(({item}) => (
-   <View key={item.key}>
-      <Text>{item.title}</Text>
-   </View>
- ), []);
-
-return (
-  // ...
-  <FlatList data={items} renderItem={renderItem} />;
-  // ...
-);
-```
+---
+id: optimizing-flatlist-configuration
+title: Optimizing FlatList Configuration
+---
+
+## Terms
+
+- **VirtualizedList:** The component behind `FlatList` (React Native's implementation of the [`Virtual List`](https://bvaughn.github.io/react-virtualized/#/components/List) concept.)
+
+- **Memory consumption:** How much information about your list is being stored in memory, which could lead to an app crash.
+
+- **Responsiveness:** Application ability to respond to interactions. Low responsiveness, for instance, is when you touch on a component and it waits a bit to respond, instead of responding immediately as expected.
+
+- **Blank areas:** When `VirtualizedList` can't render your items fast enough, you may enter a part of your list with non-rendered components that appear as blank space.
+
+- **Viewport:** The visible area of content that is rendered to pixels.
+
+- **Window:** The area in which items should be mounted, which is generally much larger than the viewport.
+
+## Props
+
+Here are a list of props that can help to improve `FlatList` performance:
+
+### removeClippedSubviews
+
+| Type    | Default                              |
+| ------- | ------------------------------------ |
+| Boolean | `true` on Android, otherwise `false` |
+
+If `true`, views that are outside of the viewport are automatically detached from the native view hierarchy.
+
+**Pros:** This reduces time spent on the main thread, and thus reduces the risk of dropped frames, by excluding views outside of the viewport from the native rendering and drawing traversals.
+
+**Cons:** Be aware that this implementation can have bugs, such as missing content (mainly observed on iOS), especially if you are doing complex things with transforms and/or absolute positioning. Also note this does not save significant memory because the views are not deallocated, only detached.
+
+### maxToRenderPerBatch
+
+| Type   | Default |
+| ------ | ------- |
+| Number | 10      |
+
+It is a `VirtualizedList` prop that can be passed through `FlatList`. This controls the amount of items rendered per batch, which is the next chunk of items rendered on every scroll.
+
+**Pros:** Setting a bigger number means less visual blank areas when scrolling (increases the fill rate).
+
+**Cons:** More items per batch means longer periods of JavaScript execution potentially blocking other event processing, like presses, hurting responsiveness.
+
+### updateCellsBatchingPeriod
+
+| Type   | Default |
+| ------ | ------- |
+| Number | 50      |
+
+While `maxToRenderPerBatch` tells the amount of items rendered per batch, setting `updateCellsBatchingPeriod` tells your `VirtualizedList` the delay in milliseconds between batch renders (how frequently your component will be rendering the windowed items).
+
+**Pros:** Combining this prop with `maxToRenderPerBatch` gives you the power to, for example, render more items in a less frequent batch, or less items in a more frequent batch.
+
+**Cons:** Less frequent batches may cause blank areas, More frequent batches may cause responsiveness issues.
+
+### initialNumToRender
+
+| Type   | Default |
+| ------ | ------- |
+| Number | 10      |
+
+The initial amount of items to render.
+
+**Pros:** Define precise number of items that would cover the screen for every device. This can be a big performance boost for the initial render.
+
+**Cons:** Setting a low `initialNumToRender` may cause blank areas, especially if it's too small to cover the viewport on initial render.
+
+### windowSize
+
+| Type   | Default |
+| ------ | ------- |
+| Number | 21      |
+
+The number passed here is a measurement unit where 1 is equivalent to your viewport height. The default value is 21 (10 viewports above, 10 below, and one in between).
+
+**Pros:** Bigger `windowSize` will result in less chance of seeing blank space while scrolling. On the other hand, smaller `windowSize` will result in fewer items mounted simultaneously, saving memory.
+
+**Cons:** For a bigger `windowSize`, you will have more memory consumption. For a lower `windowSize`, you will have a bigger chance of seeing blank areas.
+
+## List items
+
+Below are some tips about list item components. They are the core of your list, so they need to be fast.
+
+### Use basic components
+
+The more complex your components are, the slower they will render. Try to avoid a lot of logic and nesting in your list items. If you are reusing this list item component a lot in your app, create a component only for your big lists and make them with as little logic and nesting as possible.
+
+### Use light components
+
+The heavier your components are, the slower they render. Avoid heavy images (use a cropped version or thumbnail for list items, as small as possible). Talk to your design team, use as little effects and interactions and information as possible in your list. Show them in your item's detail.
+
+### Use `memo()`
+
+`React.memo()` creates a memoized component that will be re-rendered only when the props passed to the component change. We can use this function to optimize the components in the FlatList.
+
+```tsx
+import {memo} from 'react';
+import {View, Text} from 'react-native';
+
+const MyListItem = memo(
+  ({title}: {title: string}) => (
+    <View>
+      <Text>{title}</Text>
+    </View>
+  ),
+  (prevProps, nextProps) => {
+    return prevProps.title === nextProps.title;
+  },
+);
+
+export default MyListItem;
+```
+
+In this example, we have determined that MyListItem should be re-rendered only when the title changes. We passed the comparison function as the second argument to React.memo() so that the component is re-rendered only when the specified prop is changed. If the comparison function returns true, the component will not be re-rendered.
+
+### Use cached optimized images
+
+You can use the community packages (such as [@d11/react-native-fast-image](https://github.com/ds-horizon/react-native-fast-image) from [Dream11](https://github.com/ds-horizon)) for more performant images. Every image in your list is a `new Image()` instance. The faster it reaches the `loaded` hook, the faster your JavaScript thread will be free again.
+
+### Use getItemLayout
+
+If all your list item components have the same height (or width, for a horizontal list), providing the [getItemLayout](flatlist#getitemlayout) prop removes the need for your `FlatList` to manage async layout calculations. This is a very desirable optimization technique.
+
+If your components have dynamic size and you really need performance, consider asking your design team if they may think of a redesign in order to perform better.
+
+### Use keyExtractor or key
+
+You can set the [`keyExtractor`](flatlist#keyextractor) to your `FlatList` component. This prop is used for caching and as the React `key` to track item re-ordering.
+
+You can also use a `key` prop in your item component.
+
+### Avoid anonymous function on renderItem
+
+For functional components, move the `renderItem` function outside of the returned JSX. Also, ensure that it is wrapped in a `useCallback` hook to prevent it from being recreated each render.
+
+For class components, move the `renderItem` function outside of the render function, so it won't recreate itself each time the render function is called.
+
+```tsx
+const renderItem = useCallback(({item}) => (
+   <View key={item.key}>
+      <Text>{item.title}</Text>
+   </View>
+ ), []);
+
+return (
+  // ...
+  <FlatList data={items} renderItem={renderItem} />;
+  // ...
+);
+```
diff --git a/website/versioned_docs/version-0.81/panresponder.md b/website/versioned_docs/version-0.81/panresponder.md
index fa6d8b8ee4e..eabd919aa1e 100644
--- a/website/versioned_docs/version-0.81/panresponder.md
+++ b/website/versioned_docs/version-0.81/panresponder.md
@@ -1,177 +1,177 @@
----
-id: panresponder
-title: PanResponder
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-`PanResponder` reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize basic multi-touch gestures.
-
-By default, `PanResponder` holds an `InteractionManager` handle to block long-running JS events from interrupting active gestures.
-
-It provides a predictable wrapper of the responder handlers provided by the [gesture responder system](gesture-responder-system.md). For each handler, it provides a new `gestureState` object alongside the native event object:
-
-```
-onPanResponderMove: (event, gestureState) => {}
-```
-
-A native event is a synthetic touch event with form of [PressEvent](pressevent).
-
-A `gestureState` object has the following:
-
-- `stateID` - ID of the gestureState- persisted as long as there's at least one touch on screen
-- `moveX` - the latest screen coordinates of the recently-moved touch
-- `moveY` - the latest screen coordinates of the recently-moved touch
-- `x0` - the screen coordinates of the responder grant
-- `y0` - the screen coordinates of the responder grant
-- `dx` - accumulated distance of the gesture since the touch started
-- `dy` - accumulated distance of the gesture since the touch started
-- `vx` - current velocity of the gesture
-- `vy` - current velocity of the gesture
-- `numberActiveTouches` - Number of touches currently on screen
-
-## Usage Pattern
-
-```tsx
-const ExampleComponent = () => {
-  const panResponder = React.useRef(
-    PanResponder.create({
-      // Ask to be the responder:
-      onStartShouldSetPanResponder: (evt, gestureState) => true,
-      onStartShouldSetPanResponderCapture: (evt, gestureState) =>
-        true,
-      onMoveShouldSetPanResponder: (evt, gestureState) => true,
-      onMoveShouldSetPanResponderCapture: (evt, gestureState) =>
-        true,
-
-      onPanResponderGrant: (evt, gestureState) => {
-        // The gesture has started. Show visual feedback so the user knows
-        // what is happening!
-        // gestureState.d{x,y} will be set to zero now
-      },
-      onPanResponderMove: (evt, gestureState) => {
-        // The most recent move distance is gestureState.move{X,Y}
-        // The accumulated gesture distance since becoming responder is
-        // gestureState.d{x,y}
-      },
-      onPanResponderTerminationRequest: (evt, gestureState) =>
-        true,
-      onPanResponderRelease: (evt, gestureState) => {
-        // The user has released all touches while this view is the
-        // responder. This typically means a gesture has succeeded
-      },
-      onPanResponderTerminate: (evt, gestureState) => {
-        // Another component has become the responder, so this gesture
-        // should be cancelled
-      },
-      onShouldBlockNativeResponder: (evt, gestureState) => {
-        // Returns whether this component should block native components from becoming the JS
-        // responder. Returns true by default. Is currently only supported on android.
-        return true;
-      },
-    }),
-  ).current;
-
-  return <View {...panResponder.panHandlers} />;
-};
-```
-
-## Example
-
-`PanResponder` works with `Animated` API to help build complex gestures in the UI. The following example contains an animated `View` component which can be dragged freely across the screen
-
-```SnackPlayer name=PanResponder
-import React, {useRef} from 'react';
-import {Animated, View, StyleSheet, PanResponder, Text} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const pan = useRef(new Animated.ValueXY()).current;
-
-  const panResponder = useRef(
-    PanResponder.create({
-      onMoveShouldSetPanResponder: () => true,
-      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
-      onPanResponderRelease: () => {
-        pan.extractOffset();
-      },
-    }),
-  ).current;
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.titleText}>Drag this box!</Text>
-        <Animated.View
-          style={{
-            transform: [{translateX: pan.x}, {translateY: pan.y}],
-          }}
-          {...panResponder.panHandlers}>
-          <View style={styles.box} />
-        </Animated.View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  titleText: {
-    fontSize: 14,
-    lineHeight: 24,
-    fontWeight: 'bold',
-  },
-  box: {
-    height: 150,
-    width: 150,
-    backgroundColor: 'blue',
-    borderRadius: 5,
-  },
-});
-
-export default App;
-```
-
-Try the [PanResponder example in RNTester](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js).
-
----
-
-# Reference
-
-## Methods
-
-### `create()`
-
-```tsx
-static create(config: PanResponderCallbacks): PanResponderInstance;
-```
-
-**Parameters:**
-
-| Name                                                        | Type   | Description |
-| ----------------------------------------------------------- | ------ | ----------- |
-| config <div className="label basic required">Required</div> | object | Refer below |
-
-The `config` object provides enhanced versions of all of the responder callbacks that provide not only the [`PressEvent`](pressevent), but also the `PanResponder` gesture state, by replacing the word `Responder` with `PanResponder` in each of the typical `onResponder*` callbacks. For example, the `config` object would look like:
-
-- `onMoveShouldSetPanResponder: (e, gestureState) => {...}`
-- `onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}`
-- `onStartShouldSetPanResponder: (e, gestureState) => {...}`
-- `onStartShouldSetPanResponderCapture: (e, gestureState) => {...}`
-- `onPanResponderReject: (e, gestureState) => {...}`
-- `onPanResponderGrant: (e, gestureState) => {...}`
-- `onPanResponderStart: (e, gestureState) => {...}`
-- `onPanResponderEnd: (e, gestureState) => {...}`
-- `onPanResponderRelease: (e, gestureState) => {...}`
-- `onPanResponderMove: (e, gestureState) => {...}`
-- `onPanResponderTerminate: (e, gestureState) => {...}`
-- `onPanResponderTerminationRequest: (e, gestureState) => {...}`
-- `onShouldBlockNativeResponder: (e, gestureState) => {...}`
-
-In general, for events that have capture equivalents, we update the gestureState once in the capture phase and can use it in the bubble phase as well.
-
-Be careful with `onStartShould*` callbacks. They only reflect updated `gestureState` for start/end events that bubble/capture to the Node. Once the node is the responder, you can rely on every start/end event being processed by the gesture and `gestureState` being updated accordingly. (numberActiveTouches) may not be totally accurate unless you are the responder.
+---
+id: panresponder
+title: PanResponder
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+`PanResponder` reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize basic multi-touch gestures.
+
+By default, `PanResponder` holds an `InteractionManager` handle to block long-running JS events from interrupting active gestures.
+
+It provides a predictable wrapper of the responder handlers provided by the [gesture responder system](gesture-responder-system.md). For each handler, it provides a new `gestureState` object alongside the native event object:
+
+```
+onPanResponderMove: (event, gestureState) => {}
+```
+
+A native event is a synthetic touch event with form of [PressEvent](pressevent).
+
+A `gestureState` object has the following:
+
+- `stateID` - ID of the gestureState- persisted as long as there's at least one touch on screen
+- `moveX` - the latest screen coordinates of the recently-moved touch
+- `moveY` - the latest screen coordinates of the recently-moved touch
+- `x0` - the screen coordinates of the responder grant
+- `y0` - the screen coordinates of the responder grant
+- `dx` - accumulated distance of the gesture since the touch started
+- `dy` - accumulated distance of the gesture since the touch started
+- `vx` - current velocity of the gesture
+- `vy` - current velocity of the gesture
+- `numberActiveTouches` - Number of touches currently on screen
+
+## Usage Pattern
+
+```tsx
+const ExampleComponent = () => {
+  const panResponder = useRef(
+    PanResponder.create({
+      // Ask to be the responder:
+      onStartShouldSetPanResponder: (evt, gestureState) => true,
+      onStartShouldSetPanResponderCapture: (evt, gestureState) =>
+        true,
+      onMoveShouldSetPanResponder: (evt, gestureState) => true,
+      onMoveShouldSetPanResponderCapture: (evt, gestureState) =>
+        true,
+
+      onPanResponderGrant: (evt, gestureState) => {
+        // The gesture has started. Show visual feedback so the user knows
+        // what is happening!
+        // gestureState.d{x,y} will be set to zero now
+      },
+      onPanResponderMove: (evt, gestureState) => {
+        // The most recent move distance is gestureState.move{X,Y}
+        // The accumulated gesture distance since becoming responder is
+        // gestureState.d{x,y}
+      },
+      onPanResponderTerminationRequest: (evt, gestureState) =>
+        true,
+      onPanResponderRelease: (evt, gestureState) => {
+        // The user has released all touches while this view is the
+        // responder. This typically means a gesture has succeeded
+      },
+      onPanResponderTerminate: (evt, gestureState) => {
+        // Another component has become the responder, so this gesture
+        // should be cancelled
+      },
+      onShouldBlockNativeResponder: (evt, gestureState) => {
+        // Returns whether this component should block native components from becoming the JS
+        // responder. Returns true by default. Is currently only supported on android.
+        return true;
+      },
+    }),
+  ).current;
+
+  return <View {...panResponder.panHandlers} />;
+};
+```
+
+## Example
+
+`PanResponder` works with `Animated` API to help build complex gestures in the UI. The following example contains an animated `View` component which can be dragged freely across the screen
+
+```SnackPlayer name=PanResponder
+import {useRef} from 'react';
+import {Animated, View, StyleSheet, PanResponder, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const pan = useRef(new Animated.ValueXY()).current;
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
+      onPanResponderRelease: () => {
+        pan.extractOffset();
+      },
+    }),
+  ).current;
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.titleText}>Drag this box!</Text>
+        <Animated.View
+          style={{
+            transform: [{translateX: pan.x}, {translateY: pan.y}],
+          }}
+          {...panResponder.panHandlers}>
+          <View style={styles.box} />
+        </Animated.View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  titleText: {
+    fontSize: 14,
+    lineHeight: 24,
+    fontWeight: 'bold',
+  },
+  box: {
+    height: 150,
+    width: 150,
+    backgroundColor: 'blue',
+    borderRadius: 5,
+  },
+});
+
+export default App;
+```
+
+Try the [PanResponder example in RNTester](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js).
+
+---
+
+# Reference
+
+## Methods
+
+### `create()`
+
+```tsx
+static create(config: PanResponderCallbacks): PanResponderInstance;
+```
+
+**Parameters:**
+
+| Name                                                        | Type   | Description |
+| ----------------------------------------------------------- | ------ | ----------- |
+| config <div className="label basic required">Required</div> | object | Refer below |
+
+The `config` object provides enhanced versions of all of the responder callbacks that provide not only the [`PressEvent`](pressevent), but also the `PanResponder` gesture state, by replacing the word `Responder` with `PanResponder` in each of the typical `onResponder*` callbacks. For example, the `config` object would look like:
+
+- `onMoveShouldSetPanResponder: (e, gestureState) => {...}`
+- `onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}`
+- `onStartShouldSetPanResponder: (e, gestureState) => {...}`
+- `onStartShouldSetPanResponderCapture: (e, gestureState) => {...}`
+- `onPanResponderReject: (e, gestureState) => {...}`
+- `onPanResponderGrant: (e, gestureState) => {...}`
+- `onPanResponderStart: (e, gestureState) => {...}`
+- `onPanResponderEnd: (e, gestureState) => {...}`
+- `onPanResponderRelease: (e, gestureState) => {...}`
+- `onPanResponderMove: (e, gestureState) => {...}`
+- `onPanResponderTerminate: (e, gestureState) => {...}`
+- `onPanResponderTerminationRequest: (e, gestureState) => {...}`
+- `onShouldBlockNativeResponder: (e, gestureState) => {...}`
+
+In general, for events that have capture equivalents, we update the gestureState once in the capture phase and can use it in the bubble phase as well.
+
+Be careful with `onStartShould*` callbacks. They only reflect updated `gestureState` for start/end events that bubble/capture to the Node. Once the node is the responder, you can rely on every start/end event being processed by the gesture and `gestureState` being updated accordingly. (numberActiveTouches) may not be totally accurate unless you are the responder.
diff --git a/website/versioned_docs/version-0.81/permissionsandroid.md b/website/versioned_docs/version-0.81/permissionsandroid.md
index ec1f486ba37..4e93941ad1f 100644
--- a/website/versioned_docs/version-0.81/permissionsandroid.md
+++ b/website/versioned_docs/version-0.81/permissionsandroid.md
@@ -17,7 +17,6 @@ If a user has previously turned off a permission that you prompt for, the OS wil
 ### Example
 
 ```SnackPlayer name=PermissionsAndroid%20Example&supportedPlatforms=android
-import React from 'react';
 import {
   Button,
   PermissionsAndroid,
diff --git a/website/versioned_docs/version-0.81/pixelratio.md b/website/versioned_docs/version-0.81/pixelratio.md
index 64e4eded49f..f298a8e73ab 100644
--- a/website/versioned_docs/version-0.81/pixelratio.md
+++ b/website/versioned_docs/version-0.81/pixelratio.md
@@ -30,7 +30,6 @@ In React Native, everything in JavaScript and within the layout engine works wit
 ## Example
 
 ```SnackPlayer name=PixelRatio%20Example
-import React from 'react';
 import {
   Image,
   PixelRatio,
diff --git a/website/versioned_docs/version-0.81/platform.md b/website/versioned_docs/version-0.81/platform.md
index aefb269e53a..ac521b1044b 100644
--- a/website/versioned_docs/version-0.81/platform.md
+++ b/website/versioned_docs/version-0.81/platform.md
@@ -6,7 +6,6 @@ title: Platform
 ## Example
 
 ```SnackPlayer name=Platform%20API%20Example&supportedPlatforms=ios,android
-import React from 'react';
 import {Platform, StyleSheet, Text, ScrollView} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.81/platformcolor.md b/website/versioned_docs/version-0.81/platformcolor.md
index d087f3327d8..3c7e06bb991 100644
--- a/website/versioned_docs/version-0.81/platformcolor.md
+++ b/website/versioned_docs/version-0.81/platformcolor.md
@@ -44,7 +44,6 @@ For a full list of the types of system colors supported, see:
 ## Example
 
 ```SnackPlayer name=PlatformColor%20Example&supportedPlatforms=android,ios
-import React from 'react';
 import {Platform, PlatformColor, StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.81/pressable.md b/website/versioned_docs/version-0.81/pressable.md
index 08ac6f44307..c1e16669f1c 100644
--- a/website/versioned_docs/version-0.81/pressable.md
+++ b/website/versioned_docs/version-0.81/pressable.md
@@ -1,264 +1,264 @@
----
-id: pressable
-title: Pressable
----
-
-Pressable is a Core Component wrapper that can detect various stages of press interactions on any of its defined children.
-
-```tsx
-<Pressable onPress={onPressFunction}>
-  <Text>I'm pressable!</Text>
-</Pressable>
-```
-
-## How it works
-
-On an element wrapped by `Pressable`:
-
-- [`onPressIn`](#onpressin) is called when a press is activated.
-- [`onPressOut`](#onpressout) is called when the press gesture is deactivated.
-
-After pressing [`onPressIn`](#onpressin), one of two things will happen:
-
-1. The person will remove their finger, triggering [`onPressOut`](#onpressout) followed by [`onPress`](#onpress).
-2. If the person leaves their finger longer than 500 milliseconds before removing it, [`onLongPress`](#onlongpress) is triggered. ([`onPressOut`](#onpressout) will still fire when they remove their finger.)
-
-<img src="/docs/assets/d_pressable_pressing.svg" width="1000" alt="Diagram of the onPress events in sequence." />
-
-Fingers are not the most precise instruments, and it is common for users to accidentally activate the wrong element or miss the activation area. To help, `Pressable` has an optional `HitRect` you can use to define how far a touch can register away from the wrapped element. Presses can start anywhere within a `HitRect`.
-
-`PressRect` allows presses to move beyond the element and its `HitRect` while maintaining activation and being eligible for a "press"—think of sliding your finger slowly away from a button you're pressing down on.
-
-> The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
-
-<figure>
-  <img src="/docs/assets/d_pressable_anatomy.svg" width="1000" alt="Diagram of HitRect and PressRect and how they work." />
-  <figcaption>
-    You can set <code>HitRect</code> with <code>hitSlop</code> and set <code>PressRect</code> with <code>pressRetentionOffset</code>.
-  </figcaption>
-</figure>
-
-> `Pressable` uses React Native's `Pressability` API. For more information around the state machine flow of Pressability and how it works, check out the implementation for [Pressability](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Pressability/Pressability.js#L350).
-
-## Example
-
-```SnackPlayer name=Pressable
-import React, {useState} from 'react';
-import {Pressable, StyleSheet, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [timesPressed, setTimesPressed] = useState(0);
-
-  let textLog = '';
-  if (timesPressed > 1) {
-    textLog = timesPressed + 'x onPress';
-  } else if (timesPressed > 0) {
-    textLog = 'onPress';
-  }
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Pressable
-          onPress={() => {
-            setTimesPressed(current => current + 1);
-          }}
-          style={({pressed}) => [
-            {
-              backgroundColor: pressed ? 'rgb(210, 230, 255)' : 'white',
-            },
-            styles.wrapperCustom,
-          ]}>
-          {({pressed}) => (
-            <Text style={styles.text}>{pressed ? 'Pressed!' : 'Press Me'}</Text>
-          )}
-        </Pressable>
-        <View style={styles.logBox}>
-          <Text testID="pressable_press_console">{textLog}</Text>
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  text: {
-    fontSize: 16,
-  },
-  wrapperCustom: {
-    borderRadius: 8,
-    padding: 6,
-  },
-  logBox: {
-    padding: 20,
-    margin: 10,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: '#f0f0f0',
-    backgroundColor: '#f9f9f9',
-  },
-});
-
-export default App;
-```
-
-## Props
-
-### `android_disableSound` <div className="label android">Android</div>
-
-If true, doesn't play Android system sound on press.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
-### `android_ripple` <div className="label android">Android</div>
-
-Enables the Android ripple effect and configures its properties.
-
-| Type                                   |
-| -------------------------------------- |
-| [RippleConfig](pressable#rippleconfig) |
-
-### `children`
-
-Either children or a function that receives a boolean reflecting whether the component is currently pressed.
-
-| Type                     |
-| ------------------------ |
-| [React Node](react-node) |
-
-### `unstable_pressDelay`
-
-Duration (in milliseconds) to wait after press down before calling `onPressIn`.
-
-| Type   |
-| ------ |
-| number |
-
-### `delayLongPress`
-
-Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
-
-| Type   | Default |
-| ------ | ------- |
-| number | `500`   |
-
-### `disabled`
-
-Whether the press behavior is disabled.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
-### `hitSlop`
-
-Sets additional distance outside of element in which a press can be detected.
-
-| Type                   |
-| ---------------------- |
-| [Rect](rect) or number |
-
-### `onHoverIn`
-
-Called when the hover is activated to provide visual feedback.
-
-| Type                                                                                                      |
-| --------------------------------------------------------------------------------------------------------- |
-| `md ({ nativeEvent: [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) }) => void` |
-
-### `onHoverOut`
-
-Called when the hover is deactivated to undo visual feedback.
-
-| Type                                                                                                      |
-| --------------------------------------------------------------------------------------------------------- |
-| `md ({ nativeEvent: [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) }) => void` |
-
-### `onLongPress`
-
-Called if the time after `onPressIn` lasts longer than 500 milliseconds. This time period can be customized with [`delayLongPress`](#delaylongpress).
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
-### `onPress`
-
-Called after `onPressOut`.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
-### `onPressIn`
-
-Called immediately when a touch is engaged, before `onPressOut` and `onPress`.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
-### `onPressMove`
-
-Called when the press location moves.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
-### `onPressOut`
-
-Called when a touch is released.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
-### `pressRetentionOffset`
-
-Additional distance outside of this view in which a touch is considered a press before `onPressOut` is triggered.
-
-| Type                   | Default                                      |
-| ---------------------- | -------------------------------------------- |
-| [Rect](rect) or number | `{bottom: 30, left: 20, right: 20, top: 20}` |
-
-### `style`
-
-Either view styles or a function that receives a boolean reflecting whether the component is currently pressed and returns view styles.
-
-| Type                                                                                            |
-| ----------------------------------------------------------------------------------------------- |
-| [View Style](view-style-props) or `md ({ pressed: boolean }) => [View Style](view-style-props)` |
-
-### `testOnly_pressed`
-
-Used only for documentation or testing (e.g. snapshot testing).
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
-## Type Definitions
-
-### RippleConfig
-
-Ripple effect configuration for the `android_ripple` property.
-
-| Type   |
-| ------ |
-| object |
-
-**Properties:**
-
-| Name       | Type            | Required | Description                                                                                                                                                                                                                                                  |
-| ---------- | --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| color      | [color](colors) | No       | Defines the color of the ripple effect.                                                                                                                                                                                                                      |
-| borderless | boolean         | No       | Defines if ripple effect should not include border.                                                                                                                                                                                                          |
-| radius     | number          | No       | Defines the radius of the ripple effect.                                                                                                                                                                                                                     |
-| foreground | boolean         | No       | Set to true to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them. |
+---
+id: pressable
+title: Pressable
+---
+
+Pressable is a Core Component wrapper that can detect various stages of press interactions on any of its defined children.
+
+```tsx
+<Pressable onPress={onPressFunction}>
+  <Text>I'm pressable!</Text>
+</Pressable>
+```
+
+## How it works
+
+On an element wrapped by `Pressable`:
+
+- [`onPressIn`](#onpressin) is called when a press is activated.
+- [`onPressOut`](#onpressout) is called when the press gesture is deactivated.
+
+After pressing [`onPressIn`](#onpressin), one of two things will happen:
+
+1. The person will remove their finger, triggering [`onPressOut`](#onpressout) followed by [`onPress`](#onpress).
+2. If the person leaves their finger longer than 500 milliseconds before removing it, [`onLongPress`](#onlongpress) is triggered. ([`onPressOut`](#onpressout) will still fire when they remove their finger.)
+
+<img src="/docs/assets/d_pressable_pressing.svg" width="1000" alt="Diagram of the onPress events in sequence." />
+
+Fingers are not the most precise instruments, and it is common for users to accidentally activate the wrong element or miss the activation area. To help, `Pressable` has an optional `HitRect` you can use to define how far a touch can register away from the wrapped element. Presses can start anywhere within a `HitRect`.
+
+`PressRect` allows presses to move beyond the element and its `HitRect` while maintaining activation and being eligible for a "press"—think of sliding your finger slowly away from a button you're pressing down on.
+
+> The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
+
+<figure>
+  <img src="/docs/assets/d_pressable_anatomy.svg" width="1000" alt="Diagram of HitRect and PressRect and how they work." />
+  <figcaption>
+    You can set <code>HitRect</code> with <code>hitSlop</code> and set <code>PressRect</code> with <code>pressRetentionOffset</code>.
+  </figcaption>
+</figure>
+
+> `Pressable` uses React Native's `Pressability` API. For more information around the state machine flow of Pressability and how it works, check out the implementation for [Pressability](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Pressability/Pressability.js#L350).
+
+## Example
+
+```SnackPlayer name=Pressable
+import {useState} from 'react';
+import {Pressable, StyleSheet, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [timesPressed, setTimesPressed] = useState(0);
+
+  let textLog = '';
+  if (timesPressed > 1) {
+    textLog = timesPressed + 'x onPress';
+  } else if (timesPressed > 0) {
+    textLog = 'onPress';
+  }
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Pressable
+          onPress={() => {
+            setTimesPressed(current => current + 1);
+          }}
+          style={({pressed}) => [
+            {
+              backgroundColor: pressed ? 'rgb(210, 230, 255)' : 'white',
+            },
+            styles.wrapperCustom,
+          ]}>
+          {({pressed}) => (
+            <Text style={styles.text}>{pressed ? 'Pressed!' : 'Press Me'}</Text>
+          )}
+        </Pressable>
+        <View style={styles.logBox}>
+          <Text testID="pressable_press_console">{textLog}</Text>
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 16,
+  },
+  wrapperCustom: {
+    borderRadius: 8,
+    padding: 6,
+  },
+  logBox: {
+    padding: 20,
+    margin: 10,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: '#f0f0f0',
+    backgroundColor: '#f9f9f9',
+  },
+});
+
+export default App;
+```
+
+## Props
+
+### `android_disableSound` <div className="label android">Android</div>
+
+If true, doesn't play Android system sound on press.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+### `android_ripple` <div className="label android">Android</div>
+
+Enables the Android ripple effect and configures its properties.
+
+| Type                                   |
+| -------------------------------------- |
+| [RippleConfig](pressable#rippleconfig) |
+
+### `children`
+
+Either children or a function that receives a boolean reflecting whether the component is currently pressed.
+
+| Type                     |
+| ------------------------ |
+| [React Node](react-node) |
+
+### `unstable_pressDelay`
+
+Duration (in milliseconds) to wait after press down before calling `onPressIn`.
+
+| Type   |
+| ------ |
+| number |
+
+### `delayLongPress`
+
+Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
+
+| Type   | Default |
+| ------ | ------- |
+| number | `500`   |
+
+### `disabled`
+
+Whether the press behavior is disabled.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+### `hitSlop`
+
+Sets additional distance outside of element in which a press can be detected.
+
+| Type                   |
+| ---------------------- |
+| [Rect](rect) or number |
+
+### `onHoverIn`
+
+Called when the hover is activated to provide visual feedback.
+
+| Type                                                                                                      |
+| --------------------------------------------------------------------------------------------------------- |
+| `md ({ nativeEvent: [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) }) => void` |
+
+### `onHoverOut`
+
+Called when the hover is deactivated to undo visual feedback.
+
+| Type                                                                                                      |
+| --------------------------------------------------------------------------------------------------------- |
+| `md ({ nativeEvent: [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) }) => void` |
+
+### `onLongPress`
+
+Called if the time after `onPressIn` lasts longer than 500 milliseconds. This time period can be customized with [`delayLongPress`](#delaylongpress).
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+### `onPress`
+
+Called after `onPressOut`.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+### `onPressIn`
+
+Called immediately when a touch is engaged, before `onPressOut` and `onPress`.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+### `onPressMove`
+
+Called when the press location moves.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+### `onPressOut`
+
+Called when a touch is released.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+### `pressRetentionOffset`
+
+Additional distance outside of this view in which a touch is considered a press before `onPressOut` is triggered.
+
+| Type                   | Default                                      |
+| ---------------------- | -------------------------------------------- |
+| [Rect](rect) or number | `{bottom: 30, left: 20, right: 20, top: 20}` |
+
+### `style`
+
+Either view styles or a function that receives a boolean reflecting whether the component is currently pressed and returns view styles.
+
+| Type                                                                                            |
+| ----------------------------------------------------------------------------------------------- |
+| [View Style](view-style-props) or `md ({ pressed: boolean }) => [View Style](view-style-props)` |
+
+### `testOnly_pressed`
+
+Used only for documentation or testing (e.g. snapshot testing).
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+## Type Definitions
+
+### RippleConfig
+
+Ripple effect configuration for the `android_ripple` property.
+
+| Type   |
+| ------ |
+| object |
+
+**Properties:**
+
+| Name       | Type            | Required | Description                                                                                                                                                                                                                                                  |
+| ---------- | --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| color      | [color](colors) | No       | Defines the color of the ripple effect.                                                                                                                                                                                                                      |
+| borderless | boolean         | No       | Defines if ripple effect should not include border.                                                                                                                                                                                                          |
+| radius     | number          | No       | Defines the radius of the ripple effect.                                                                                                                                                                                                                     |
+| foreground | boolean         | No       | Set to true to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them. |
diff --git a/website/versioned_docs/version-0.81/progressbarandroid.md b/website/versioned_docs/version-0.81/progressbarandroid.md
index b44a68c8101..4a7363fdff3 100644
--- a/website/versioned_docs/version-0.81/progressbarandroid.md
+++ b/website/versioned_docs/version-0.81/progressbarandroid.md
@@ -10,7 +10,6 @@ Android-only React component used to indicate that the app is loading or there i
 ### Example
 
 ```SnackPlayer name=ProgressBarAndroid&supportedPlatforms=android
-import React from 'react';
 import {View, StyleSheet, ProgressBarAndroid, Text} from 'react-native';
 
 const App = () => {
diff --git a/website/versioned_docs/version-0.81/props.md b/website/versioned_docs/version-0.81/props.md
index 490eb214632..8b24d6dd9f1 100644
--- a/website/versioned_docs/version-0.81/props.md
+++ b/website/versioned_docs/version-0.81/props.md
@@ -10,7 +10,6 @@ Most components can be customized when they are created, with different paramete
 For example, one basic React Native component is the `Image`. When you create an image, you can use a prop named `source` to control what image it shows.
 
 ```SnackPlayer name=Props
-import React from 'react';
 import {Image} from 'react-native';
 
 const Bananas = () => {
@@ -33,7 +32,6 @@ Your own components can also use `props`. This lets you make a single component
 <TabItem value="javascript">
 
 ```SnackPlayer name=Props&ext=js
-import React from 'react';
 import {Text, View} from 'react-native';
 
 const Greeting = props => {
@@ -61,7 +59,6 @@ export default LotsOfGreetings;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Props&ext=tsx
-import React from 'react';
 import {Text, View} from 'react-native';
 
 type GreetingProps = {
diff --git a/website/versioned_docs/version-0.81/refreshcontrol.md b/website/versioned_docs/version-0.81/refreshcontrol.md
index e7f8fea5e83..d09d3aad46c 100644
--- a/website/versioned_docs/version-0.81/refreshcontrol.md
+++ b/website/versioned_docs/version-0.81/refreshcontrol.md
@@ -1,165 +1,165 @@
----
-id: refreshcontrol
-title: RefreshControl
----
-
-This component is used inside a ScrollView or ListView to add pull to refresh functionality. When the ScrollView is at `scrollY: 0`, swiping down triggers an `onRefresh` event.
-
-## Example
-
-```SnackPlayer name=RefreshControl&supportedPlatforms=ios,android
-import React from 'react';
-import {RefreshControl, ScrollView, StyleSheet, Text} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [refreshing, setRefreshing] = React.useState(false);
-
-  const onRefresh = React.useCallback(() => {
-    setRefreshing(true);
-    setTimeout(() => {
-      setRefreshing(false);
-    }, 2000);
-  }, []);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <ScrollView
-          contentContainerStyle={styles.scrollView}
-          refreshControl={
-            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-          }>
-          <Text>Pull down to see RefreshControl indicator</Text>
-        </ScrollView>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  scrollView: {
-    flex: 1,
-    backgroundColor: 'pink',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-
-export default App;
-```
-
-> Note: `refreshing` is a controlled prop, this is why it needs to be set to `true` in the `onRefresh` function otherwise the refresh indicator will stop immediately.
-
----
-
-# Reference
-
-## Props
-
-### [View Props](view.md#props)
-
-Inherits [View Props](view.md#props).
-
----
-
-### <div className="label required basic">Required</div>**`refreshing`**
-
-Whether the view should be indicating an active refresh.
-
-| Type    |
-| ------- |
-| boolean |
-
----
-
-### `colors` <div className="label android">Android</div>
-
-The colors (at least one) that will be used to draw the refresh indicator.
-
-| Type                         |
-| ---------------------------- |
-| array of [colors](colors.md) |
-
----
-
-### `enabled` <div className="label android">Android</div>
-
-Whether the pull to refresh functionality is enabled.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `true`  |
-
----
-
-### `onRefresh`
-
-Called when the view starts refreshing.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `progressBackgroundColor` <div className="label android">Android</div>
-
-The background color of the refresh indicator.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `progressViewOffset`
-
-Progress view top offset.
-
-| Type   | Default |
-| ------ | ------- |
-| number | `0`     |
-
----
-
-### `size` <div className="label android">Android</div>
-
-Size of the refresh indicator.
-
-| Type                         | Default     |
-| ---------------------------- | ----------- |
-| enum(`'default'`, `'large'`) | `'default'` |
-
----
-
-### `tintColor` <div className="label ios">iOS</div>
-
-The color of the refresh indicator.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `title` <div className="label ios">iOS</div>
-
-The title displayed under the refresh indicator.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `titleColor` <div className="label ios">iOS</div>
-
-The color of the refresh indicator title.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
+---
+id: refreshcontrol
+title: RefreshControl
+---
+
+This component is used inside a ScrollView or ListView to add pull to refresh functionality. When the ScrollView is at `scrollY: 0`, swiping down triggers an `onRefresh` event.
+
+## Example
+
+```SnackPlayer name=RefreshControl&supportedPlatforms=ios,android
+import {useCallback, useState} from 'react';
+import {RefreshControl, ScrollView, StyleSheet, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [refreshing, setRefreshing] = useState(false);
+
+  const onRefresh = useCallback(() => {
+    setRefreshing(true);
+    setTimeout(() => {
+      setRefreshing(false);
+    }, 2000);
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <ScrollView
+          contentContainerStyle={styles.scrollView}
+          refreshControl={
+            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+          }>
+          <Text>Pull down to see RefreshControl indicator</Text>
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollView: {
+    flex: 1,
+    backgroundColor: 'pink',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default App;
+```
+
+> Note: `refreshing` is a controlled prop, this is why it needs to be set to `true` in the `onRefresh` function otherwise the refresh indicator will stop immediately.
+
+---
+
+# Reference
+
+## Props
+
+### [View Props](view.md#props)
+
+Inherits [View Props](view.md#props).
+
+---
+
+### <div className="label required basic">Required</div>**`refreshing`**
+
+Whether the view should be indicating an active refresh.
+
+| Type    |
+| ------- |
+| boolean |
+
+---
+
+### `colors` <div className="label android">Android</div>
+
+The colors (at least one) that will be used to draw the refresh indicator.
+
+| Type                         |
+| ---------------------------- |
+| array of [colors](colors.md) |
+
+---
+
+### `enabled` <div className="label android">Android</div>
+
+Whether the pull to refresh functionality is enabled.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `true`  |
+
+---
+
+### `onRefresh`
+
+Called when the view starts refreshing.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `progressBackgroundColor` <div className="label android">Android</div>
+
+The background color of the refresh indicator.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `progressViewOffset`
+
+Progress view top offset.
+
+| Type   | Default |
+| ------ | ------- |
+| number | `0`     |
+
+---
+
+### `size` <div className="label android">Android</div>
+
+Size of the refresh indicator.
+
+| Type                         | Default     |
+| ---------------------------- | ----------- |
+| enum(`'default'`, `'large'`) | `'default'` |
+
+---
+
+### `tintColor` <div className="label ios">iOS</div>
+
+The color of the refresh indicator.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `title` <div className="label ios">iOS</div>
+
+The title displayed under the refresh indicator.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `titleColor` <div className="label ios">iOS</div>
+
+The color of the refresh indicator title.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
diff --git a/website/versioned_docs/version-0.81/safeareaview.md b/website/versioned_docs/version-0.81/safeareaview.md
index c93bf08b733..16b3968eddf 100644
--- a/website/versioned_docs/version-0.81/safeareaview.md
+++ b/website/versioned_docs/version-0.81/safeareaview.md
@@ -14,7 +14,6 @@ The purpose of `SafeAreaView` is to render content within the safe area boundari
 To use, wrap your top level view with a `SafeAreaView` with a `flex: 1` style applied to it. You may also want to use a background color that matches your application's design.
 
 ```SnackPlayer name=SafeAreaView&supportedPlatforms=ios
-import React from 'react';
 import {StyleSheet, Text, SafeAreaView} from 'react-native';
 
 const App = () => {
diff --git a/website/versioned_docs/version-0.81/scrollview.md b/website/versioned_docs/version-0.81/scrollview.md
index 0c66b545378..7016fa55d20 100644
--- a/website/versioned_docs/version-0.81/scrollview.md
+++ b/website/versioned_docs/version-0.81/scrollview.md
@@ -22,7 +22,6 @@ This is where `FlatList` comes into play. `FlatList` renders items lazily, when
 ## Example
 
 ```SnackPlayer name=ScrollView%20Example
-import React from 'react';
 import {StyleSheet, Text, ScrollView, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.81/sectionlist.md b/website/versioned_docs/version-0.81/sectionlist.md
index df0f29cfaf0..a0330d58f8e 100644
--- a/website/versioned_docs/version-0.81/sectionlist.md
+++ b/website/versioned_docs/version-0.81/sectionlist.md
@@ -21,7 +21,6 @@ If you don't need section support and want a simpler interface, use [`<FlatList>
 ## Example
 
 ```SnackPlayer name=SectionList%20Example
-import React from 'react';
 import {StyleSheet, Text, View, SectionList, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.81/settings.md b/website/versioned_docs/version-0.81/settings.md
index 9eb5b19accd..ddeaf51c7e6 100644
--- a/website/versioned_docs/version-0.81/settings.md
+++ b/website/versioned_docs/version-0.81/settings.md
@@ -1,101 +1,101 @@
----
-id: settings
-title: Settings
----
-
-`Settings` serves as a wrapper for [`NSUserDefaults`](https://developer.apple.com/documentation/foundation/nsuserdefaults), a persistent key-value store available only on iOS.
-
-## Example
-
-```SnackPlayer name=Settings%20Example&supportedPlatforms=ios
-import React, {useState} from 'react';
-import {Button, Settings, StyleSheet, Text} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [data, setData] = useState(() => Settings.get('data'));
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>Stored value:</Text>
-        <Text style={styles.value}>{data}</Text>
-        <Button
-          onPress={() => {
-            Settings.set({data: 'React'});
-            setData(Settings.get('data'));
-          }}
-          title="Store 'React'"
-        />
-        <Button
-          onPress={() => {
-            Settings.set({data: 'Native'});
-            setData(Settings.get('data'));
-          }}
-          title="Store 'Native'"
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  value: {
-    fontSize: 24,
-    marginVertical: 12,
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Methods
-
-### `clearWatch()`
-
-```tsx
-static clearWatch(watchId: number);
-```
-
-`watchId` is the number returned by `watchKeys()` when the subscription was originally configured.
-
----
-
-### `get()`
-
-```tsx
-static get(key: string): any;
-```
-
-Get the current value for a given `key` in `NSUserDefaults`.
-
----
-
-### `set()`
-
-```tsx
-static set(settings: Record<string, any>);
-```
-
-Set one or more values in `NSUserDefaults`.
-
----
-
-### `watchKeys()`
-
-```tsx
-static watchKeys(keys: string | array<string>, callback: () => void): number;
-```
-
-Subscribe to be notified when the value for any of the keys specified by the `keys` parameter has been changed in `NSUserDefaults`. Returns a `watchId` number that may be used with `clearWatch()` to unsubscribe.
-
-> **Note:** `watchKeys()` by design ignores internal `set()` calls and fires callback only on changes preformed outside of React Native code.
+---
+id: settings
+title: Settings
+---
+
+`Settings` serves as a wrapper for [`NSUserDefaults`](https://developer.apple.com/documentation/foundation/nsuserdefaults), a persistent key-value store available only on iOS.
+
+## Example
+
+```SnackPlayer name=Settings%20Example&supportedPlatforms=ios
+import {useState} from 'react';
+import {Button, Settings, StyleSheet, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [data, setData] = useState(() => Settings.get('data'));
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>Stored value:</Text>
+        <Text style={styles.value}>{data}</Text>
+        <Button
+          onPress={() => {
+            Settings.set({data: 'React'});
+            setData(Settings.get('data'));
+          }}
+          title="Store 'React'"
+        />
+        <Button
+          onPress={() => {
+            Settings.set({data: 'Native'});
+            setData(Settings.get('data'));
+          }}
+          title="Store 'Native'"
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  value: {
+    fontSize: 24,
+    marginVertical: 12,
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `clearWatch()`
+
+```tsx
+static clearWatch(watchId: number);
+```
+
+`watchId` is the number returned by `watchKeys()` when the subscription was originally configured.
+
+---
+
+### `get()`
+
+```tsx
+static get(key: string): any;
+```
+
+Get the current value for a given `key` in `NSUserDefaults`.
+
+---
+
+### `set()`
+
+```tsx
+static set(settings: Record<string, any>);
+```
+
+Set one or more values in `NSUserDefaults`.
+
+---
+
+### `watchKeys()`
+
+```tsx
+static watchKeys(keys: string | array<string>, callback: () => void): number;
+```
+
+Subscribe to be notified when the value for any of the keys specified by the `keys` parameter has been changed in `NSUserDefaults`. Returns a `watchId` number that may be used with `clearWatch()` to unsubscribe.
+
+> **Note:** `watchKeys()` by design ignores internal `set()` calls and fires callback only on changes preformed outside of React Native code.
diff --git a/website/versioned_docs/version-0.81/shadow-props.md b/website/versioned_docs/version-0.81/shadow-props.md
index d5e8a037059..91553622bd3 100644
--- a/website/versioned_docs/version-0.81/shadow-props.md
+++ b/website/versioned_docs/version-0.81/shadow-props.md
@@ -1,285 +1,285 @@
----
-id: shadow-props
-title: Shadow Props
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=js&dependencies=@react-native-community/slider
-import React, {useState} from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-import Slider from '@react-native-community/slider';
-
-const ShadowPropSlider = ({label, value, ...props}) => {
-  return (
-    <>
-      <Text>
-        {label} ({value.toFixed(2)})
-      </Text>
-      <Slider step={1} value={value} {...props} />
-    </>
-  );
-};
-
-const App = () => {
-  const [shadowOffsetWidth, setShadowOffsetWidth] = useState(0);
-  const [shadowOffsetHeight, setShadowOffsetHeight] = useState(0);
-  const [shadowRadius, setShadowRadius] = useState(0);
-  const [shadowOpacity, setShadowOpacity] = useState(0.1);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View
-          style={[
-            styles.square,
-            {
-              shadowOffset: {
-                width: shadowOffsetWidth,
-                height: -shadowOffsetHeight,
-              },
-              shadowOpacity,
-              shadowRadius,
-            },
-          ]}
-        />
-        <View style={styles.controls}>
-          <ShadowPropSlider
-            label="shadowOffset - X"
-            minimumValue={-50}
-            maximumValue={50}
-            value={shadowOffsetWidth}
-            onValueChange={setShadowOffsetWidth}
-          />
-          <ShadowPropSlider
-            label="shadowOffset - Y"
-            minimumValue={-50}
-            maximumValue={50}
-            value={shadowOffsetHeight}
-            onValueChange={setShadowOffsetHeight}
-          />
-          <ShadowPropSlider
-            label="shadowRadius"
-            minimumValue={0}
-            maximumValue={100}
-            value={shadowRadius}
-            onValueChange={setShadowRadius}
-          />
-          <ShadowPropSlider
-            label="shadowOpacity"
-            minimumValue={0}
-            maximumValue={1}
-            step={0.05}
-            value={shadowOpacity}
-            onValueChange={val => setShadowOpacity(val)}
-          />
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'space-around',
-    backgroundColor: '#ecf0f1',
-    padding: 8,
-  },
-  square: {
-    alignSelf: 'center',
-    backgroundColor: 'white',
-    borderRadius: 4,
-    height: 150,
-    shadowColor: 'black',
-    width: 150,
-  },
-  controls: {
-    paddingHorizontal: 12,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=tsx&dependencies=@react-native-community/slider
-import React, {useState} from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-import Slider, {SliderProps} from '@react-native-community/slider';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-type ShadowPropSliderProps = SliderProps & {
-  label: string;
-};
-
-const ShadowPropSlider = ({label, value, ...props}: ShadowPropSliderProps) => {
-  return (
-    <>
-      <Text>
-        {label} ({value?.toFixed(2)})
-      </Text>
-      <Slider step={1} value={value} {...props} />
-    </>
-  );
-};
-
-const App = () => {
-  const [shadowOffsetWidth, setShadowOffsetWidth] = useState(0);
-  const [shadowOffsetHeight, setShadowOffsetHeight] = useState(0);
-  const [shadowRadius, setShadowRadius] = useState(0);
-  const [shadowOpacity, setShadowOpacity] = useState(0.1);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View
-          style={[
-            styles.square,
-            {
-              shadowOffset: {
-                width: shadowOffsetWidth,
-                height: -shadowOffsetHeight,
-              },
-              shadowOpacity,
-              shadowRadius,
-            },
-          ]}
-        />
-        <View style={styles.controls}>
-          <ShadowPropSlider
-            label="shadowOffset - X"
-            minimumValue={-50}
-            maximumValue={50}
-            value={shadowOffsetWidth}
-            onValueChange={setShadowOffsetWidth}
-          />
-          <ShadowPropSlider
-            label="shadowOffset - Y"
-            minimumValue={-50}
-            maximumValue={50}
-            value={shadowOffsetHeight}
-            onValueChange={setShadowOffsetHeight}
-          />
-          <ShadowPropSlider
-            label="shadowRadius"
-            minimumValue={0}
-            maximumValue={100}
-            value={shadowRadius}
-            onValueChange={setShadowRadius}
-          />
-          <ShadowPropSlider
-            label="shadowOpacity"
-            minimumValue={0}
-            maximumValue={1}
-            step={0.05}
-            value={shadowOpacity}
-            onValueChange={val => setShadowOpacity(val)}
-          />
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'space-around',
-    backgroundColor: '#ecf0f1',
-    padding: 8,
-  },
-  square: {
-    alignSelf: 'center',
-    backgroundColor: 'white',
-    borderRadius: 4,
-    height: 150,
-    shadowColor: 'black',
-    width: 150,
-  },
-  controls: {
-    paddingHorizontal: 12,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
----
-
-# Reference
-
-There are 3 sets of shadow APIs in React Native:
-
-- `boxShadow`: A View style prop and a spec-compliant implementation of the [web style prop of the same name](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow).
-- `dropShadow`: A specific filter function available as part of the [`filter`](./view-style-props#filter) View style prop.
-- Various `shadow` props (`shadowColor`, `shadowOffset`, `shadowOpacity`, `shadowRadius`): These map directly to their native counterparts exposed by the platform-level APIs.
-
-The difference between `dropShadow` and `boxShadow` are as follows:
-
-- `dropShadow` exists as part of `filter`, whereas `boxShadow` is a standalone style prop.
-- `dropShadow` is an alpha mask, so only pixels with a positive alpha value will "cast" a shadow. `boxShadow` will cast around the border box of the element no matter it's contents (unless it is inset).
-- `dropShadow` is only available on Android, `boxShadow` is available on iOS and Android.
-- `dropShadow` cannot be inset like `boxShadow`.
-- `dropShadow` does not have the `spreadDistance` argument like `boxShadow`.
-
-Both `boxShadow` and `dropShadow` are generally more capable than the `shadow` props. The `shadow` props, however, map to native platform-level APIs, so if you only need a straightforward shadow these props are recommended. Note that only `shadowColor` works on both Android and iOS, all other `shadow` props only work on iOS.
-
-## Props
-
-### `boxShadow`
-
-See [View Style Props](./view-style-props#boxshadow) for documentation.
-
-### `dropShadow` <div className="label android">Android</div>
-
-See [View Style Props](./view-style-props#filter) for documentation.
-
-### `shadowColor`
-
-Sets the drop shadow color.
-
-This property will only work on Android API 28 and above. For similar functionality on lower Android APIs, use the [`elevation` property](view-style-props#elevation-android).
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `shadowOffset` <div className="label ios">iOS</div>
-
-Sets the drop shadow offset.
-
-| Type                                     |
-| ---------------------------------------- |
-| object: `{width: number,height: number}` |
-
----
-
-### `shadowOpacity` <div className="label ios">iOS</div>
-
-Sets the drop shadow opacity (multiplied by the color's alpha component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `shadowRadius` <div className="label ios">iOS</div>
-
-Sets the drop shadow blur radius.
-
-| Type   |
-| ------ |
-| number |
+---
+id: shadow-props
+title: Shadow Props
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=js&dependencies=@react-native-community/slider
+import {useState} from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+import Slider from '@react-native-community/slider';
+
+const ShadowPropSlider = ({label, value, ...props}) => {
+  return (
+    <>
+      <Text>
+        {label} ({value.toFixed(2)})
+      </Text>
+      <Slider step={1} value={value} {...props} />
+    </>
+  );
+};
+
+const App = () => {
+  const [shadowOffsetWidth, setShadowOffsetWidth] = useState(0);
+  const [shadowOffsetHeight, setShadowOffsetHeight] = useState(0);
+  const [shadowRadius, setShadowRadius] = useState(0);
+  const [shadowOpacity, setShadowOpacity] = useState(0.1);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View
+          style={[
+            styles.square,
+            {
+              shadowOffset: {
+                width: shadowOffsetWidth,
+                height: -shadowOffsetHeight,
+              },
+              shadowOpacity,
+              shadowRadius,
+            },
+          ]}
+        />
+        <View style={styles.controls}>
+          <ShadowPropSlider
+            label="shadowOffset - X"
+            minimumValue={-50}
+            maximumValue={50}
+            value={shadowOffsetWidth}
+            onValueChange={setShadowOffsetWidth}
+          />
+          <ShadowPropSlider
+            label="shadowOffset - Y"
+            minimumValue={-50}
+            maximumValue={50}
+            value={shadowOffsetHeight}
+            onValueChange={setShadowOffsetHeight}
+          />
+          <ShadowPropSlider
+            label="shadowRadius"
+            minimumValue={0}
+            maximumValue={100}
+            value={shadowRadius}
+            onValueChange={setShadowRadius}
+          />
+          <ShadowPropSlider
+            label="shadowOpacity"
+            minimumValue={0}
+            maximumValue={1}
+            step={0.05}
+            value={shadowOpacity}
+            onValueChange={val => setShadowOpacity(val)}
+          />
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'space-around',
+    backgroundColor: '#ecf0f1',
+    padding: 8,
+  },
+  square: {
+    alignSelf: 'center',
+    backgroundColor: 'white',
+    borderRadius: 4,
+    height: 150,
+    shadowColor: 'black',
+    width: 150,
+  },
+  controls: {
+    paddingHorizontal: 12,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=tsx&dependencies=@react-native-community/slider
+import {useState} from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+import Slider, {SliderProps} from '@react-native-community/slider';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+type ShadowPropSliderProps = SliderProps & {
+  label: string;
+};
+
+const ShadowPropSlider = ({label, value, ...props}: ShadowPropSliderProps) => {
+  return (
+    <>
+      <Text>
+        {label} ({value?.toFixed(2)})
+      </Text>
+      <Slider step={1} value={value} {...props} />
+    </>
+  );
+};
+
+const App = () => {
+  const [shadowOffsetWidth, setShadowOffsetWidth] = useState(0);
+  const [shadowOffsetHeight, setShadowOffsetHeight] = useState(0);
+  const [shadowRadius, setShadowRadius] = useState(0);
+  const [shadowOpacity, setShadowOpacity] = useState(0.1);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View
+          style={[
+            styles.square,
+            {
+              shadowOffset: {
+                width: shadowOffsetWidth,
+                height: -shadowOffsetHeight,
+              },
+              shadowOpacity,
+              shadowRadius,
+            },
+          ]}
+        />
+        <View style={styles.controls}>
+          <ShadowPropSlider
+            label="shadowOffset - X"
+            minimumValue={-50}
+            maximumValue={50}
+            value={shadowOffsetWidth}
+            onValueChange={setShadowOffsetWidth}
+          />
+          <ShadowPropSlider
+            label="shadowOffset - Y"
+            minimumValue={-50}
+            maximumValue={50}
+            value={shadowOffsetHeight}
+            onValueChange={setShadowOffsetHeight}
+          />
+          <ShadowPropSlider
+            label="shadowRadius"
+            minimumValue={0}
+            maximumValue={100}
+            value={shadowRadius}
+            onValueChange={setShadowRadius}
+          />
+          <ShadowPropSlider
+            label="shadowOpacity"
+            minimumValue={0}
+            maximumValue={1}
+            step={0.05}
+            value={shadowOpacity}
+            onValueChange={val => setShadowOpacity(val)}
+          />
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'space-around',
+    backgroundColor: '#ecf0f1',
+    padding: 8,
+  },
+  square: {
+    alignSelf: 'center',
+    backgroundColor: 'white',
+    borderRadius: 4,
+    height: 150,
+    shadowColor: 'black',
+    width: 150,
+  },
+  controls: {
+    paddingHorizontal: 12,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+---
+
+# Reference
+
+There are 3 sets of shadow APIs in React Native:
+
+- `boxShadow`: A View style prop and a spec-compliant implementation of the [web style prop of the same name](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow).
+- `dropShadow`: A specific filter function available as part of the [`filter`](./view-style-props#filter) View style prop.
+- Various `shadow` props (`shadowColor`, `shadowOffset`, `shadowOpacity`, `shadowRadius`): These map directly to their native counterparts exposed by the platform-level APIs.
+
+The difference between `dropShadow` and `boxShadow` are as follows:
+
+- `dropShadow` exists as part of `filter`, whereas `boxShadow` is a standalone style prop.
+- `dropShadow` is an alpha mask, so only pixels with a positive alpha value will "cast" a shadow. `boxShadow` will cast around the border box of the element no matter it's contents (unless it is inset).
+- `dropShadow` is only available on Android, `boxShadow` is available on iOS and Android.
+- `dropShadow` cannot be inset like `boxShadow`.
+- `dropShadow` does not have the `spreadDistance` argument like `boxShadow`.
+
+Both `boxShadow` and `dropShadow` are generally more capable than the `shadow` props. The `shadow` props, however, map to native platform-level APIs, so if you only need a straightforward shadow these props are recommended. Note that only `shadowColor` works on both Android and iOS, all other `shadow` props only work on iOS.
+
+## Props
+
+### `boxShadow`
+
+See [View Style Props](./view-style-props#boxshadow) for documentation.
+
+### `dropShadow` <div className="label android">Android</div>
+
+See [View Style Props](./view-style-props#filter) for documentation.
+
+### `shadowColor`
+
+Sets the drop shadow color.
+
+This property will only work on Android API 28 and above. For similar functionality on lower Android APIs, use the [`elevation` property](view-style-props#elevation-android).
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `shadowOffset` <div className="label ios">iOS</div>
+
+Sets the drop shadow offset.
+
+| Type                                     |
+| ---------------------------------------- |
+| object: `{width: number,height: number}` |
+
+---
+
+### `shadowOpacity` <div className="label ios">iOS</div>
+
+Sets the drop shadow opacity (multiplied by the color's alpha component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `shadowRadius` <div className="label ios">iOS</div>
+
+Sets the drop shadow blur radius.
+
+| Type   |
+| ------ |
+| number |
diff --git a/website/versioned_docs/version-0.81/share.md b/website/versioned_docs/version-0.81/share.md
index 1fc5823361f..46d0f858435 100644
--- a/website/versioned_docs/version-0.81/share.md
+++ b/website/versioned_docs/version-0.81/share.md
@@ -11,7 +11,6 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con
 <TabItem value="javascript">
 
 ```SnackPlayer name=Example&supportedPlatforms=ios,android&ext=js
-import React from 'react';
 import {Alert, Share, Button} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -51,7 +50,6 @@ export default ShareExample;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Example&supportedPlatforms=ios,android&ext=tsx
-import React from 'react';
 import {Alert, Share, Button} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.81/state.md b/website/versioned_docs/version-0.81/state.md
index bc162f44b40..ebf3ec14336 100644
--- a/website/versioned_docs/version-0.81/state.md
+++ b/website/versioned_docs/version-0.81/state.md
@@ -1,103 +1,103 @@
----
-id: state
-title: State
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-There are two types of data that control a component: `props` and `state`. `props` are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use `state`.
-
-In general, you should initialize `state` in the constructor, and then call `setState` when you want to change it.
-
-For example, let's say we want to make text that blinks all the time. The text itself gets set once when the blinking component gets created, so the text itself is a `prop`. The "whether the text is currently on or off" changes over time, so that should be kept in `state`.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=State&ext=js
-import React, {useState, useEffect} from 'react';
-import {Text, View} from 'react-native';
-
-const Blink = props => {
-  const [isShowingText, setIsShowingText] = useState(true);
-
-  useEffect(() => {
-    const toggle = setInterval(() => {
-      setIsShowingText(!isShowingText);
-    }, 1000);
-
-    return () => clearInterval(toggle);
-  });
-
-  if (!isShowingText) {
-    return null;
-  }
-
-  return <Text>{props.text}</Text>;
-};
-
-const BlinkApp = () => {
-  return (
-    <View style={{marginTop: 50}}>
-      <Blink text="I love to blink" />
-      <Blink text="Yes blinking is so great" />
-      <Blink text="Why did they ever take this out of HTML" />
-      <Blink text="Look at me look at me look at me" />
-    </View>
-  );
-};
-
-export default BlinkApp;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=State&ext=tsx
-import React, {useState, useEffect} from 'react';
-import {Text, View} from 'react-native';
-
-type BlinkProps = {
-  text: string;
-};
-
-const Blink = (props: BlinkProps) => {
-  const [isShowingText, setIsShowingText] = useState(true);
-
-  useEffect(() => {
-    const toggle = setInterval(() => {
-      setIsShowingText(!isShowingText);
-    }, 1000);
-
-    return () => clearInterval(toggle);
-  });
-
-  if (!isShowingText) {
-    return null;
-  }
-
-  return <Text>{props.text}</Text>;
-};
-
-const BlinkApp = () => {
-  return (
-    <View style={{marginTop: 50}}>
-      <Blink text="I love to blink" />
-      <Blink text="Yes blinking is so great" />
-      <Blink text="Why did they ever take this out of HTML" />
-      <Blink text="Look at me look at me look at me" />
-    </View>
-  );
-};
-
-export default BlinkApp;
-```
-
-</TabItem>
-</Tabs>
-
-In a real application, you probably won't be setting state with a timer. You might set state when you have new data from the server, or from user input. You can also use a state container like [Redux](https://redux.js.org/) or [MobX](https://mobx.js.org/) to control your data flow. In that case you would use Redux or MobX to modify your state rather than calling `setState` directly.
-
-When setState is called, BlinkApp will re-render its Component. By calling setState within the Timer, the component will re-render every time the Timer ticks.
-
-State works the same way as it does in React, so for more details on handling state, you can look at the [React.Component API](https://react.dev/reference/react/Component#setstate). At this point, you may have noticed that most of our examples use the default text color. To customize the text color, you will have to [learn about Style](style.md).
+---
+id: state
+title: State
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+There are two types of data that control a component: `props` and `state`. `props` are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use `state`.
+
+In general, you should initialize `state` in the constructor, and then call `setState` when you want to change it.
+
+For example, let's say we want to make text that blinks all the time. The text itself gets set once when the blinking component gets created, so the text itself is a `prop`. The "whether the text is currently on or off" changes over time, so that should be kept in `state`.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=State&ext=js
+import {useState, useEffect} from 'react';
+import {Text, View} from 'react-native';
+
+const Blink = props => {
+  const [isShowingText, setIsShowingText] = useState(true);
+
+  useEffect(() => {
+    const toggle = setInterval(() => {
+      setIsShowingText(!isShowingText);
+    }, 1000);
+
+    return () => clearInterval(toggle);
+  });
+
+  if (!isShowingText) {
+    return null;
+  }
+
+  return <Text>{props.text}</Text>;
+};
+
+const BlinkApp = () => {
+  return (
+    <View style={{marginTop: 50}}>
+      <Blink text="I love to blink" />
+      <Blink text="Yes blinking is so great" />
+      <Blink text="Why did they ever take this out of HTML" />
+      <Blink text="Look at me look at me look at me" />
+    </View>
+  );
+};
+
+export default BlinkApp;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=State&ext=tsx
+import {useState, useEffect} from 'react';
+import {Text, View} from 'react-native';
+
+type BlinkProps = {
+  text: string;
+};
+
+const Blink = (props: BlinkProps) => {
+  const [isShowingText, setIsShowingText] = useState(true);
+
+  useEffect(() => {
+    const toggle = setInterval(() => {
+      setIsShowingText(!isShowingText);
+    }, 1000);
+
+    return () => clearInterval(toggle);
+  });
+
+  if (!isShowingText) {
+    return null;
+  }
+
+  return <Text>{props.text}</Text>;
+};
+
+const BlinkApp = () => {
+  return (
+    <View style={{marginTop: 50}}>
+      <Blink text="I love to blink" />
+      <Blink text="Yes blinking is so great" />
+      <Blink text="Why did they ever take this out of HTML" />
+      <Blink text="Look at me look at me look at me" />
+    </View>
+  );
+};
+
+export default BlinkApp;
+```
+
+</TabItem>
+</Tabs>
+
+In a real application, you probably won't be setting state with a timer. You might set state when you have new data from the server, or from user input. You can also use a state container like [Redux](https://redux.js.org/) or [MobX](https://mobx.js.org/) to control your data flow. In that case you would use Redux or MobX to modify your state rather than calling `setState` directly.
+
+When setState is called, BlinkApp will re-render its Component. By calling setState within the Timer, the component will re-render every time the Timer ticks.
+
+State works the same way as it does in React, so for more details on handling state, you can look at the [React.Component API](https://react.dev/reference/react/Component#setstate). At this point, you may have noticed that most of our examples use the default text color. To customize the text color, you will have to [learn about Style](style.md).
diff --git a/website/versioned_docs/version-0.81/statusbar.md b/website/versioned_docs/version-0.81/statusbar.md
index 93810f7b0e0..97686cf2260 100644
--- a/website/versioned_docs/version-0.81/statusbar.md
+++ b/website/versioned_docs/version-0.81/statusbar.md
@@ -1,513 +1,513 @@
----
-id: statusbar
-title: StatusBar
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-Component to control the app's status bar. The status bar is the zone, typically at the top of the screen, that displays the current time, Wi-Fi and cellular network information, battery level and/or other status icons.
-
-### 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.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=StatusBar%20Component%20Example&supportedPlatforms=android,ios&ext=js
-import React, {useState} from 'react';
-import {
-  Button,
-  Platform,
-  StatusBar,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const STYLES = ['default', 'dark-content', 'light-content'];
-const TRANSITIONS = ['fade', 'slide', 'none'];
-
-const App = () => {
-  const [hidden, setHidden] = useState(false);
-  const [statusBarStyle, setStatusBarStyle] = useState(STYLES[0]);
-  const [statusBarTransition, setStatusBarTransition] = useState(
-    TRANSITIONS[0],
-  );
-
-  const changeStatusBarVisibility = () => setHidden(!hidden);
-
-  const changeStatusBarStyle = () => {
-    const styleId = STYLES.indexOf(statusBarStyle) + 1;
-    if (styleId === STYLES.length) {
-      setStatusBarStyle(STYLES[0]);
-    } else {
-      setStatusBarStyle(STYLES[styleId]);
-    }
-  };
-
-  const changeStatusBarTransition = () => {
-    const transition = TRANSITIONS.indexOf(statusBarTransition) + 1;
-    if (transition === TRANSITIONS.length) {
-      setStatusBarTransition(TRANSITIONS[0]);
-    } else {
-      setStatusBarTransition(TRANSITIONS[transition]);
-    }
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <StatusBar
-          animated={true}
-          backgroundColor="#61dafb"
-          barStyle={statusBarStyle}
-          showHideTransition={statusBarTransition}
-          hidden={hidden}
-        />
-        <Text style={styles.textStyle}>
-          StatusBar Visibility:{'\n'}
-          {hidden ? 'Hidden' : 'Visible'}
-        </Text>
-        <Text style={styles.textStyle}>
-          StatusBar Style:{'\n'}
-          {statusBarStyle}
-        </Text>
-        {Platform.OS === 'ios' ? (
-          <Text style={styles.textStyle}>
-            StatusBar Transition:{'\n'}
-            {statusBarTransition}
-          </Text>
-        ) : null}
-        <View style={styles.buttonsContainer}>
-          <Button
-            title="Toggle StatusBar"
-            onPress={changeStatusBarVisibility}
-          />
-          <Button
-            title="Change StatusBar Style"
-            onPress={changeStatusBarStyle}
-          />
-          {Platform.OS === 'ios' ? (
-            <Button
-              title="Change StatusBar Transition"
-              onPress={changeStatusBarTransition}
-            />
-          ) : null}
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    backgroundColor: '#ECF0F1',
-  },
-  buttonsContainer: {
-    padding: 10,
-  },
-  textStyle: {
-    textAlign: 'center',
-    marginBottom: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=StatusBar%20Component%20Example&supportedPlatforms=android,ios&ext=tsx
-import React, {useState} from 'react';
-import {
-  Button,
-  Platform,
-  StatusBar,
-  StyleSheet,
-  Text,
-  View,
-  StatusBarStyle,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const STYLES = ['default', 'dark-content', 'light-content'] as const;
-const TRANSITIONS = ['fade', 'slide', 'none'] as const;
-
-const App = () => {
-  const [hidden, setHidden] = useState(false);
-  const [statusBarStyle, setStatusBarStyle] = useState<StatusBarStyle>(
-    STYLES[0],
-  );
-  const [statusBarTransition, setStatusBarTransition] = useState<
-    'fade' | 'slide' | 'none'
-  >(TRANSITIONS[0]);
-
-  const changeStatusBarVisibility = () => setHidden(!hidden);
-
-  const changeStatusBarStyle = () => {
-    const styleId = STYLES.indexOf(statusBarStyle) + 1;
-    if (styleId === STYLES.length) {
-      setStatusBarStyle(STYLES[0]);
-    } else {
-      setStatusBarStyle(STYLES[styleId]);
-    }
-  };
-
-  const changeStatusBarTransition = () => {
-    const transition = TRANSITIONS.indexOf(statusBarTransition) + 1;
-    if (transition === TRANSITIONS.length) {
-      setStatusBarTransition(TRANSITIONS[0]);
-    } else {
-      setStatusBarTransition(TRANSITIONS[transition]);
-    }
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <StatusBar
-          animated={true}
-          backgroundColor="#61dafb"
-          barStyle={statusBarStyle}
-          showHideTransition={statusBarTransition}
-          hidden={hidden}
-        />
-        <Text style={styles.textStyle}>
-          StatusBar Visibility:{'\n'}
-          {hidden ? 'Hidden' : 'Visible'}
-        </Text>
-        <Text style={styles.textStyle}>
-          StatusBar Style:{'\n'}
-          {statusBarStyle}
-        </Text>
-        {Platform.OS === 'ios' ? (
-          <Text style={styles.textStyle}>
-            StatusBar Transition:{'\n'}
-            {statusBarTransition}
-          </Text>
-        ) : null}
-        <View style={styles.buttonsContainer}>
-          <Button
-            title="Toggle StatusBar"
-            onPress={changeStatusBarVisibility}
-          />
-          <Button
-            title="Change StatusBar Style"
-            onPress={changeStatusBarStyle}
-          />
-          {Platform.OS === 'ios' ? (
-            <Button
-              title="Change StatusBar Transition"
-              onPress={changeStatusBarTransition}
-            />
-          ) : null}
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    backgroundColor: '#ECF0F1',
-  },
-  buttonsContainer: {
-    padding: 10,
-  },
-  textStyle: {
-    textAlign: 'center',
-    marginBottom: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### 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.
-
----
-
-# Reference
-
-## Constants
-
-### `currentHeight` <div className="label android">Android</div>
-
-The height of the status bar, which includes the notch height, if present.
-
----
-
-## Props
-
-### `animated`
-
-If the transition between status bar property changes should be animated. Supported for `backgroundColor`, `barStyle` and `hidden` properties.
-
-| Type    | Required | Default |
-| ------- | -------- | ------- |
-| boolean | No       | `false` |
-
----
-
-### `backgroundColor` <div className="label android">Android</div>
-
-The background color of the status bar.
-
-:::warning
-Due to edge-to-edge enforcement introduced in Android 15, setting background color of the status bar is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
-:::
-
-| Type            | Required | Default                                                                |
-| --------------- | -------- | ---------------------------------------------------------------------- |
-| [color](colors) | No       | default system StatusBar background color, or `'black'` if not defined |
-
----
-
-### `barStyle`
-
-Sets the color of the status bar text.
-
-On Android, this will only have an impact on API versions 23 and above.
-
-| Type                                       | Required | Default     |
-| ------------------------------------------ | -------- | ----------- |
-| [StatusBarStyle](statusbar#statusbarstyle) | No       | `'default'` |
-
----
-
-### `hidden`
-
-If the status bar is hidden.
-
-| Type    | Required | Default |
-| ------- | -------- | ------- |
-| boolean | No       | `false` |
-
----
-
-### `networkActivityIndicatorVisible` <div className="label ios">iOS</div>
-
-If the network activity indicator should be visible.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
----
-
-### `showHideTransition` <div className="label ios">iOS</div>
-
-The transition effect when showing and hiding the status bar using the `hidden` prop.
-
-| Type                                               | Default  |
-| -------------------------------------------------- | -------- |
-| [StatusBarAnimation](statusbar#statusbaranimation) | `'fade'` |
-
----
-
-### `translucent` <div className="label android">Android</div>
-
-If the status bar is translucent. When translucent is set to `true`, the app will draw under the status bar. This is useful when using a semi transparent status bar color.
-
-:::warning
-Due to edge-to-edge enforcement introduced in Android 15, setting the status bar as translucent is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
-:::
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
-## Methods
-
-### `popStackEntry()`
-
-```tsx
-static popStackEntry(entry: StatusBarProps);
-```
-
-Get and remove the last StatusBar entry from the stack.
-
-**Parameters:**
-
-| Name                                                       | Type | Description                           |
-| ---------------------------------------------------------- | ---- | ------------------------------------- |
-| entry <div className="label basic required">Required</div> | any  | Entry returned from `pushStackEntry`. |
-
----
-
-### `pushStackEntry()`
-
-```tsx
-static pushStackEntry(props: StatusBarProps): StatusBarProps;
-```
-
-Push a StatusBar entry onto the stack. The return value should be passed to `popStackEntry` when complete.
-
-**Parameters:**
-
-| Name                                                       | Type | Description                                                      |
-| ---------------------------------------------------------- | ---- | ---------------------------------------------------------------- |
-| props <div className="label basic required">Required</div> | any  | Object containing the StatusBar props to use in the stack entry. |
-
----
-
-### `replaceStackEntry()`
-
-```tsx
-static replaceStackEntry(
-  entry: StatusBarProps,
-  props: StatusBarProps
-): StatusBarProps;
-```
-
-Replace an existing StatusBar stack entry with new props.
-
-**Parameters:**
-
-| Name                                                       | Type | Description                                                                  |
-| ---------------------------------------------------------- | ---- | ---------------------------------------------------------------------------- |
-| entry <div className="label basic required">Required</div> | any  | Entry returned from `pushStackEntry` to replace.                             |
-| props <div className="label basic required">Required</div> | any  | Object containing the StatusBar props to use in the replacement stack entry. |
-
----
-
-### `setBackgroundColor()` <div className="label android">Android</div>
-
-```tsx
-static setBackgroundColor(color: ColorValue, animated?: boolean);
-```
-
-Set the background color for the status bar.
-
-:::warning
-Due to edge-to-edge enforcement introduced in Android 15, setting background color of the status bar is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
-:::
-
-**Parameters:**
-
-| Name                                                       | Type    | Description               |
-| ---------------------------------------------------------- | ------- | ------------------------- |
-| color <div className="label basic required">Required</div> | string  | Background color.         |
-| animated                                                   | boolean | Animate the style change. |
-
----
-
-### `setBarStyle()`
-
-```tsx
-static setBarStyle(style: StatusBarStyle, animated?: boolean);
-```
-
-Set the status bar style.
-
-**Parameters:**
-
-| Name                                                       | Type                                       | Description               |
-| ---------------------------------------------------------- | ------------------------------------------ | ------------------------- |
-| style <div className="label basic required">Required</div> | [StatusBarStyle](statusbar#statusbarstyle) | Status bar style to set.  |
-| animated                                                   | boolean                                    | Animate the style change. |
-
----
-
-### `setHidden()`
-
-```tsx
-static setHidden(hidden: boolean, animation?: StatusBarAnimation);
-```
-
-Show or hide the status bar.
-
-**Parameters:**
-
-| Name                                                        | Type                                               | Description                                             |
-| ----------------------------------------------------------- | -------------------------------------------------- | ------------------------------------------------------- |
-| hidden <div className="label basic required">Required</div> | boolean                                            | Hide the status bar.                                    |
-| animation <div className="label ios">iOS</div>              | [StatusBarAnimation](statusbar#statusbaranimation) | Animation when changing the status bar hidden property. |
-
----
-
-### 🗑️ `setNetworkActivityIndicatorVisible()` <div className="label ios">iOS</div>
-
-:::warning[Deprecated]
-The status bar network activity indicator is not supported in iOS 13 and later. This will be removed in a future release.
-:::
-
-```tsx
-static setNetworkActivityIndicatorVisible(visible: boolean);
-```
-
-Control the visibility of the network activity indicator.
-
-**Parameters:**
-
-| Name                                                         | Type    | Description         |
-| ------------------------------------------------------------ | ------- | ------------------- |
-| visible <div className="label basic required">Required</div> | boolean | Show the indicator. |
-
----
-
-### `setTranslucent()` <div className="label android">Android</div>
-
-```tsx
-static setTranslucent(translucent: boolean);
-```
-
-Control the translucency of the status bar.
-
-:::warning
-Due to edge-to-edge enforcement introduced in Android 15, setting the status bar as translucent is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
-:::
-
-**Parameters:**
-
-| Name                                                             | Type    | Description         |
-| ---------------------------------------------------------------- | ------- | ------------------- |
-| translucent <div className="label basic required">Required</div> | boolean | Set as translucent. |
-
-## Type Definitions
-
-### StatusBarAnimation
-
-Status bar animation type for transitions on the iOS.
-
-| Type |
-| ---- |
-| enum |
-
-**Constants:**
-
-| Value     | Type   | Description     |
-| --------- | ------ | --------------- |
-| `'fade'`  | string | Fade animation  |
-| `'slide'` | string | Slide animation |
-| `'none'`  | string | No animation    |
-
----
-
-### StatusBarStyle
-
-Status bar style type.
-
-| Type |
-| ---- |
-| enum |
-
-**Constants:**
-
-| Value             | Type   | Description                                                |
-| ----------------- | ------ | ---------------------------------------------------------- |
-| `'default'`       | string | Default status bar style (dark for iOS, light for Android) |
-| `'light-content'` | string | White texts and icons                                      |
-| `'dark-content'`  | string | Dark texts and icons (requires API>=23 on Android)         |
+---
+id: statusbar
+title: StatusBar
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+Component to control the app's status bar. The status bar is the zone, typically at the top of the screen, that displays the current time, Wi-Fi and cellular network information, battery level and/or other status icons.
+
+### 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.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=StatusBar%20Component%20Example&supportedPlatforms=android,ios&ext=js
+import {useState} from 'react';
+import {
+  Button,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const STYLES = ['default', 'dark-content', 'light-content'];
+const TRANSITIONS = ['fade', 'slide', 'none'];
+
+const App = () => {
+  const [hidden, setHidden] = useState(false);
+  const [statusBarStyle, setStatusBarStyle] = useState(STYLES[0]);
+  const [statusBarTransition, setStatusBarTransition] = useState(
+    TRANSITIONS[0],
+  );
+
+  const changeStatusBarVisibility = () => setHidden(!hidden);
+
+  const changeStatusBarStyle = () => {
+    const styleId = STYLES.indexOf(statusBarStyle) + 1;
+    if (styleId === STYLES.length) {
+      setStatusBarStyle(STYLES[0]);
+    } else {
+      setStatusBarStyle(STYLES[styleId]);
+    }
+  };
+
+  const changeStatusBarTransition = () => {
+    const transition = TRANSITIONS.indexOf(statusBarTransition) + 1;
+    if (transition === TRANSITIONS.length) {
+      setStatusBarTransition(TRANSITIONS[0]);
+    } else {
+      setStatusBarTransition(TRANSITIONS[transition]);
+    }
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <StatusBar
+          animated={true}
+          backgroundColor="#61dafb"
+          barStyle={statusBarStyle}
+          showHideTransition={statusBarTransition}
+          hidden={hidden}
+        />
+        <Text style={styles.textStyle}>
+          StatusBar Visibility:{'\n'}
+          {hidden ? 'Hidden' : 'Visible'}
+        </Text>
+        <Text style={styles.textStyle}>
+          StatusBar Style:{'\n'}
+          {statusBarStyle}
+        </Text>
+        {Platform.OS === 'ios' ? (
+          <Text style={styles.textStyle}>
+            StatusBar Transition:{'\n'}
+            {statusBarTransition}
+          </Text>
+        ) : null}
+        <View style={styles.buttonsContainer}>
+          <Button
+            title="Toggle StatusBar"
+            onPress={changeStatusBarVisibility}
+          />
+          <Button
+            title="Change StatusBar Style"
+            onPress={changeStatusBarStyle}
+          />
+          {Platform.OS === 'ios' ? (
+            <Button
+              title="Change StatusBar Transition"
+              onPress={changeStatusBarTransition}
+            />
+          ) : null}
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: '#ECF0F1',
+  },
+  buttonsContainer: {
+    padding: 10,
+  },
+  textStyle: {
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=StatusBar%20Component%20Example&supportedPlatforms=android,ios&ext=tsx
+import {useState} from 'react';
+import {
+  Button,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  Text,
+  View,
+  StatusBarStyle,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const STYLES = ['default', 'dark-content', 'light-content'] as const;
+const TRANSITIONS = ['fade', 'slide', 'none'] as const;
+
+const App = () => {
+  const [hidden, setHidden] = useState(false);
+  const [statusBarStyle, setStatusBarStyle] = useState<StatusBarStyle>(
+    STYLES[0],
+  );
+  const [statusBarTransition, setStatusBarTransition] = useState<
+    'fade' | 'slide' | 'none'
+  >(TRANSITIONS[0]);
+
+  const changeStatusBarVisibility = () => setHidden(!hidden);
+
+  const changeStatusBarStyle = () => {
+    const styleId = STYLES.indexOf(statusBarStyle) + 1;
+    if (styleId === STYLES.length) {
+      setStatusBarStyle(STYLES[0]);
+    } else {
+      setStatusBarStyle(STYLES[styleId]);
+    }
+  };
+
+  const changeStatusBarTransition = () => {
+    const transition = TRANSITIONS.indexOf(statusBarTransition) + 1;
+    if (transition === TRANSITIONS.length) {
+      setStatusBarTransition(TRANSITIONS[0]);
+    } else {
+      setStatusBarTransition(TRANSITIONS[transition]);
+    }
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <StatusBar
+          animated={true}
+          backgroundColor="#61dafb"
+          barStyle={statusBarStyle}
+          showHideTransition={statusBarTransition}
+          hidden={hidden}
+        />
+        <Text style={styles.textStyle}>
+          StatusBar Visibility:{'\n'}
+          {hidden ? 'Hidden' : 'Visible'}
+        </Text>
+        <Text style={styles.textStyle}>
+          StatusBar Style:{'\n'}
+          {statusBarStyle}
+        </Text>
+        {Platform.OS === 'ios' ? (
+          <Text style={styles.textStyle}>
+            StatusBar Transition:{'\n'}
+            {statusBarTransition}
+          </Text>
+        ) : null}
+        <View style={styles.buttonsContainer}>
+          <Button
+            title="Toggle StatusBar"
+            onPress={changeStatusBarVisibility}
+          />
+          <Button
+            title="Change StatusBar Style"
+            onPress={changeStatusBarStyle}
+          />
+          {Platform.OS === 'ios' ? (
+            <Button
+              title="Change StatusBar Transition"
+              onPress={changeStatusBarTransition}
+            />
+          ) : null}
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: '#ECF0F1',
+  },
+  buttonsContainer: {
+    padding: 10,
+  },
+  textStyle: {
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### 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.
+
+---
+
+# Reference
+
+## Constants
+
+### `currentHeight` <div className="label android">Android</div>
+
+The height of the status bar, which includes the notch height, if present.
+
+---
+
+## Props
+
+### `animated`
+
+If the transition between status bar property changes should be animated. Supported for `backgroundColor`, `barStyle` and `hidden` properties.
+
+| Type    | Required | Default |
+| ------- | -------- | ------- |
+| boolean | No       | `false` |
+
+---
+
+### `backgroundColor` <div className="label android">Android</div>
+
+The background color of the status bar.
+
+:::warning
+Due to edge-to-edge enforcement introduced in Android 15, setting background color of the status bar is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
+:::
+
+| Type            | Required | Default                                                                |
+| --------------- | -------- | ---------------------------------------------------------------------- |
+| [color](colors) | No       | default system StatusBar background color, or `'black'` if not defined |
+
+---
+
+### `barStyle`
+
+Sets the color of the status bar text.
+
+On Android, this will only have an impact on API versions 23 and above.
+
+| Type                                       | Required | Default     |
+| ------------------------------------------ | -------- | ----------- |
+| [StatusBarStyle](statusbar#statusbarstyle) | No       | `'default'` |
+
+---
+
+### `hidden`
+
+If the status bar is hidden.
+
+| Type    | Required | Default |
+| ------- | -------- | ------- |
+| boolean | No       | `false` |
+
+---
+
+### `networkActivityIndicatorVisible` <div className="label ios">iOS</div>
+
+If the network activity indicator should be visible.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+---
+
+### `showHideTransition` <div className="label ios">iOS</div>
+
+The transition effect when showing and hiding the status bar using the `hidden` prop.
+
+| Type                                               | Default  |
+| -------------------------------------------------- | -------- |
+| [StatusBarAnimation](statusbar#statusbaranimation) | `'fade'` |
+
+---
+
+### `translucent` <div className="label android">Android</div>
+
+If the status bar is translucent. When translucent is set to `true`, the app will draw under the status bar. This is useful when using a semi transparent status bar color.
+
+:::warning
+Due to edge-to-edge enforcement introduced in Android 15, setting the status bar as translucent is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
+:::
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+## Methods
+
+### `popStackEntry()`
+
+```tsx
+static popStackEntry(entry: StatusBarProps);
+```
+
+Get and remove the last StatusBar entry from the stack.
+
+**Parameters:**
+
+| Name                                                       | Type | Description                           |
+| ---------------------------------------------------------- | ---- | ------------------------------------- |
+| entry <div className="label basic required">Required</div> | any  | Entry returned from `pushStackEntry`. |
+
+---
+
+### `pushStackEntry()`
+
+```tsx
+static pushStackEntry(props: StatusBarProps): StatusBarProps;
+```
+
+Push a StatusBar entry onto the stack. The return value should be passed to `popStackEntry` when complete.
+
+**Parameters:**
+
+| Name                                                       | Type | Description                                                      |
+| ---------------------------------------------------------- | ---- | ---------------------------------------------------------------- |
+| props <div className="label basic required">Required</div> | any  | Object containing the StatusBar props to use in the stack entry. |
+
+---
+
+### `replaceStackEntry()`
+
+```tsx
+static replaceStackEntry(
+  entry: StatusBarProps,
+  props: StatusBarProps
+): StatusBarProps;
+```
+
+Replace an existing StatusBar stack entry with new props.
+
+**Parameters:**
+
+| Name                                                       | Type | Description                                                                  |
+| ---------------------------------------------------------- | ---- | ---------------------------------------------------------------------------- |
+| entry <div className="label basic required">Required</div> | any  | Entry returned from `pushStackEntry` to replace.                             |
+| props <div className="label basic required">Required</div> | any  | Object containing the StatusBar props to use in the replacement stack entry. |
+
+---
+
+### `setBackgroundColor()` <div className="label android">Android</div>
+
+```tsx
+static setBackgroundColor(color: ColorValue, animated?: boolean);
+```
+
+Set the background color for the status bar.
+
+:::warning
+Due to edge-to-edge enforcement introduced in Android 15, setting background color of the status bar is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
+:::
+
+**Parameters:**
+
+| Name                                                       | Type    | Description               |
+| ---------------------------------------------------------- | ------- | ------------------------- |
+| color <div className="label basic required">Required</div> | string  | Background color.         |
+| animated                                                   | boolean | Animate the style change. |
+
+---
+
+### `setBarStyle()`
+
+```tsx
+static setBarStyle(style: StatusBarStyle, animated?: boolean);
+```
+
+Set the status bar style.
+
+**Parameters:**
+
+| Name                                                       | Type                                       | Description               |
+| ---------------------------------------------------------- | ------------------------------------------ | ------------------------- |
+| style <div className="label basic required">Required</div> | [StatusBarStyle](statusbar#statusbarstyle) | Status bar style to set.  |
+| animated                                                   | boolean                                    | Animate the style change. |
+
+---
+
+### `setHidden()`
+
+```tsx
+static setHidden(hidden: boolean, animation?: StatusBarAnimation);
+```
+
+Show or hide the status bar.
+
+**Parameters:**
+
+| Name                                                        | Type                                               | Description                                             |
+| ----------------------------------------------------------- | -------------------------------------------------- | ------------------------------------------------------- |
+| hidden <div className="label basic required">Required</div> | boolean                                            | Hide the status bar.                                    |
+| animation <div className="label ios">iOS</div>              | [StatusBarAnimation](statusbar#statusbaranimation) | Animation when changing the status bar hidden property. |
+
+---
+
+### 🗑️ `setNetworkActivityIndicatorVisible()` <div className="label ios">iOS</div>
+
+:::warning[Deprecated]
+The status bar network activity indicator is not supported in iOS 13 and later. This will be removed in a future release.
+:::
+
+```tsx
+static setNetworkActivityIndicatorVisible(visible: boolean);
+```
+
+Control the visibility of the network activity indicator.
+
+**Parameters:**
+
+| Name                                                         | Type    | Description         |
+| ------------------------------------------------------------ | ------- | ------------------- |
+| visible <div className="label basic required">Required</div> | boolean | Show the indicator. |
+
+---
+
+### `setTranslucent()` <div className="label android">Android</div>
+
+```tsx
+static setTranslucent(translucent: boolean);
+```
+
+Control the translucency of the status bar.
+
+:::warning
+Due to edge-to-edge enforcement introduced in Android 15, setting the status bar as translucent is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
+:::
+
+**Parameters:**
+
+| Name                                                             | Type    | Description         |
+| ---------------------------------------------------------------- | ------- | ------------------- |
+| translucent <div className="label basic required">Required</div> | boolean | Set as translucent. |
+
+## Type Definitions
+
+### StatusBarAnimation
+
+Status bar animation type for transitions on the iOS.
+
+| Type |
+| ---- |
+| enum |
+
+**Constants:**
+
+| Value     | Type   | Description     |
+| --------- | ------ | --------------- |
+| `'fade'`  | string | Fade animation  |
+| `'slide'` | string | Slide animation |
+| `'none'`  | string | No animation    |
+
+---
+
+### StatusBarStyle
+
+Status bar style type.
+
+| Type |
+| ---- |
+| enum |
+
+**Constants:**
+
+| Value             | Type   | Description                                                |
+| ----------------- | ------ | ---------------------------------------------------------- |
+| `'default'`       | string | Default status bar style (dark for iOS, light for Android) |
+| `'light-content'` | string | White texts and icons                                      |
+| `'dark-content'`  | string | Dark texts and icons (requires API>=23 on Android)         |
diff --git a/website/versioned_docs/version-0.81/style.md b/website/versioned_docs/version-0.81/style.md
index d847c0597cb..4890db4fbfa 100644
--- a/website/versioned_docs/version-0.81/style.md
+++ b/website/versioned_docs/version-0.81/style.md
@@ -10,7 +10,6 @@ The `style` prop can be a plain old JavaScript object. That's what we usually us
 As a component grows in complexity, it is often cleaner to use `StyleSheet.create` to define several styles in one place. Here's an example:
 
 ```SnackPlayer name=Style
-import React from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 
 const LotsOfStyles = () => {
diff --git a/website/versioned_docs/version-0.81/stylesheet.md b/website/versioned_docs/version-0.81/stylesheet.md
index d160a22edc6..e332c0fa6d3 100644
--- a/website/versioned_docs/version-0.81/stylesheet.md
+++ b/website/versioned_docs/version-0.81/stylesheet.md
@@ -6,7 +6,6 @@ title: StyleSheet
 A StyleSheet is an abstraction similar to CSS StyleSheets.
 
 ```SnackPlayer name=StyleSheet
-import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -62,7 +61,6 @@ static compose(style1: Object, style2: Object): Object | Object[];
 Combines two styles such that `style2` will override any styles in `style1`. If either style is falsy, the other one is returned without allocating an array, saving allocations and maintaining reference equality for PureComponent checks.
 
 ```SnackPlayer name=Compose
-import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -123,7 +121,6 @@ static flatten(style: Array<Object extends Record<string, ViewStyle | ImageStyle
 Flattens an array of style objects, into one aggregated style object.
 
 ```SnackPlayer name=Flatten
-import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -194,7 +191,6 @@ Sets a function to use to pre-process a style property value. This is used inter
 A very common pattern is to create overlays with position absolute and zero positioning (`position: 'absolute', left: 0, right: 0, top: 0, bottom: 0`), so `absoluteFill` can be used for convenience and to reduce duplication of these repeated styles. If you want, absoluteFill can be used to create a customized entry in a StyleSheet, e.g.:
 
 ```SnackPlayer name=absoluteFill
-import React from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -319,7 +315,6 @@ export default App;
 This is defined as the width of a thin line on the platform. It can be used as the thickness of a border or division between two elements. Example:
 
 ```SnackPlayer name=hairlineWidth
-import React from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 
 const App = () => (
diff --git a/website/versioned_docs/version-0.81/switch.md b/website/versioned_docs/version-0.81/switch.md
index fcbaae7b1de..43ae6904740 100644
--- a/website/versioned_docs/version-0.81/switch.md
+++ b/website/versioned_docs/version-0.81/switch.md
@@ -1,127 +1,127 @@
----
-id: switch
-title: Switch
----
-
-Renders a boolean input.
-
-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=Switch&supportedPlatforms=android,ios
-import React, {useState} from 'react';
-import {Switch, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [isEnabled, setIsEnabled] = useState(false);
-  const toggleSwitch = () => setIsEnabled(previousState => !previousState);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Switch
-          trackColor={{false: '#767577', true: '#81b0ff'}}
-          thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
-          ios_backgroundColor="#3e3e3e"
-          onValueChange={toggleSwitch}
-          value={isEnabled}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Props
-
-### [View Props](view.md#props)
-
-Inherits [View Props](view.md#props).
-
----
-
-### `disabled`
-
-If true the user won't be able to toggle the switch.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `ios_backgroundColor` <div className="label ios">iOS</div>
-
-On iOS, custom color for the background. This background color can be seen either when the switch value is `false` or when the switch is disabled (and the switch is translucent).
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `onChange`
-
-Invoked when the user tries to change the value of the switch. Receives the change event as an argument. If you want to only receive the new value, use `onValueChange` instead.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onValueChange`
-
-Invoked when the user tries to change the value of the switch. Receives the new value as an argument. If you want to instead receive an event, use `onChange`.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `thumbColor`
-
-Color of the foreground switch grip. If this is set on iOS, the switch grip will lose its drop shadow.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `trackColor`
-
-Custom colors for the switch track.
-
-_iOS_: When the switch value is `false`, the track shrinks into the border. If you want to change the color of the background exposed by the shrunken track, use [`ios_backgroundColor`](switch.md#ios_backgroundColor).
-
-| Type                                                         |
-| ------------------------------------------------------------ |
-| `md object: {false: [color](colors), true: [color](colors)}` |
-
----
-
-### `value`
-
-The value of the switch. If true the switch will be turned on. Default value is false.
-
-| Type |
-| ---- |
-| bool |
+---
+id: switch
+title: Switch
+---
+
+Renders a boolean input.
+
+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=Switch&supportedPlatforms=android,ios
+import {useState} from 'react';
+import {Switch, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [isEnabled, setIsEnabled] = useState(false);
+  const toggleSwitch = () => setIsEnabled(previousState => !previousState);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Switch
+          trackColor={{false: '#767577', true: '#81b0ff'}}
+          thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
+          ios_backgroundColor="#3e3e3e"
+          onValueChange={toggleSwitch}
+          value={isEnabled}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Props
+
+### [View Props](view.md#props)
+
+Inherits [View Props](view.md#props).
+
+---
+
+### `disabled`
+
+If true the user won't be able to toggle the switch.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `ios_backgroundColor` <div className="label ios">iOS</div>
+
+On iOS, custom color for the background. This background color can be seen either when the switch value is `false` or when the switch is disabled (and the switch is translucent).
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `onChange`
+
+Invoked when the user tries to change the value of the switch. Receives the change event as an argument. If you want to only receive the new value, use `onValueChange` instead.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onValueChange`
+
+Invoked when the user tries to change the value of the switch. Receives the new value as an argument. If you want to instead receive an event, use `onChange`.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `thumbColor`
+
+Color of the foreground switch grip. If this is set on iOS, the switch grip will lose its drop shadow.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `trackColor`
+
+Custom colors for the switch track.
+
+_iOS_: When the switch value is `false`, the track shrinks into the border. If you want to change the color of the background exposed by the shrunken track, use [`ios_backgroundColor`](switch.md#ios_backgroundColor).
+
+| Type                                                         |
+| ------------------------------------------------------------ |
+| `md object: {false: [color](colors), true: [color](colors)}` |
+
+---
+
+### `value`
+
+The value of the switch. If true the switch will be turned on. Default value is false.
+
+| Type |
+| ---- |
+| bool |
diff --git a/website/versioned_docs/version-0.81/systrace.md b/website/versioned_docs/version-0.81/systrace.md
index 53cfd62c7a9..9aa54fe8e18 100644
--- a/website/versioned_docs/version-0.81/systrace.md
+++ b/website/versioned_docs/version-0.81/systrace.md
@@ -10,7 +10,6 @@ title: Systrace
 `Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Capture the non-Timed JS events in EasyProfiler.
 
 ```SnackPlayer name=Systrace%20Example
-import React from 'react';
 import {Button, Text, View, StyleSheet, Systrace} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.81/text-style-props.md b/website/versioned_docs/version-0.81/text-style-props.md
index 64ffc4ef816..9605beca3dd 100644
--- a/website/versioned_docs/version-0.81/text-style-props.md
+++ b/website/versioned_docs/version-0.81/text-style-props.md
@@ -1,948 +1,948 @@
----
-id: text-style-props
-title: Text Style Props
----
-
-### Example
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=js&dependencies=@react-native-community/slider
-import React, {useState} from 'react';
-import {
-  FlatList,
-  Platform,
-  ScrollView,
-  StyleSheet,
-  Switch,
-  Text,
-  TouchableWithoutFeedback,
-  View,
-} from 'react-native';
-import Slider from '@react-native-community/slider';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const fontStyles = ['normal', 'italic'];
-const fontVariants = [
-  undefined,
-  'small-caps',
-  'oldstyle-nums',
-  'lining-nums',
-  'tabular-nums',
-  'proportional-nums',
-];
-const fontWeights = [
-  'normal',
-  'bold',
-  '100',
-  '200',
-  '300',
-  '400',
-  '500',
-  '600',
-  '700',
-  '800',
-  '900',
-];
-const textAlignments = ['auto', 'left', 'right', 'center', 'justify'];
-const textDecorationLines = [
-  'none',
-  'underline',
-  'line-through',
-  'underline line-through',
-];
-const textDecorationStyles = ['solid', 'double', 'dotted', 'dashed'];
-const textTransformations = ['none', 'uppercase', 'lowercase', 'capitalize'];
-const textAlignmentsVertical = ['auto', 'top', 'bottom', 'center'];
-const writingDirections = ['auto', 'ltr', 'rtl'];
-
-const App = () => {
-  const [fontSize, setFontSize] = useState(20);
-  const [fontStyleIdx, setFontStyleIdx] = useState(0);
-  const [fontWeightIdx, setFontWeightIdx] = useState(0);
-  const [lineHeight, setLineHeight] = useState(24);
-  const [textAlignIdx, setTextAlignIdx] = useState(0);
-  const [textDecorationLineIdx, setTextDecorationLineIdx] = useState(0);
-  const [includeFontPadding, setIncludeFontPadding] = useState(false);
-  const [textVerticalAlignIdx, setTextVerticalAlignIdx] = useState(0);
-  const [fontVariantIdx, setFontVariantIdx] = useState(0);
-  const [letterSpacing, setLetterSpacing] = useState(0);
-  const [textDecorationStyleIdx, setTextDecorationStyleIdx] = useState(0);
-  const [textTransformIdx, setTextTransformIdx] = useState(0);
-  const [writingDirectionIdx, setWritingDirectionIdx] = useState(0);
-  const [textShadowRadius, setTextShadowRadius] = useState(0);
-  const [textShadowOffset, setTextShadowOffset] = useState({
-    height: 0,
-    width: 0,
-  });
-
-  const [, ...validFontVariants] = fontVariants;
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.pargraphWrapper}>
-          <Text
-            style={[
-              styles.paragraph,
-              {
-                fontSize,
-                fontStyle: fontStyles[fontStyleIdx],
-                fontWeight: fontWeights[fontWeightIdx],
-                lineHeight,
-                textAlign: textAlignments[textAlignIdx],
-                textDecorationLine: textDecorationLines[textDecorationLineIdx],
-                textTransform: textTransformations[textTransformIdx],
-                textAlignVertical: textAlignmentsVertical[textVerticalAlignIdx],
-                fontVariant:
-                  fontVariantIdx === 0
-                    ? undefined
-                    : [validFontVariants[fontVariantIdx - 1]],
-                letterSpacing,
-                includeFontPadding,
-                textDecorationStyle:
-                  textDecorationStyles[textDecorationStyleIdx],
-                writingDirection: writingDirections[writingDirectionIdx],
-                textShadowOffset,
-                textShadowRadius,
-              },
-            ]}>
-            Lorem Ipsum is simply dummy text of the printing and typesetting
-            industry. 112 Likes
-          </Text>
-        </View>
-        <ScrollView style={{padding: 12}}>
-          <View>
-            <Text>Common platform properties</Text>
-            <CustomSlider
-              label="Text Shadow Offset - Height"
-              value={textShadowOffset.height}
-              minimumValue={-40}
-              maximumValue={40}
-              handleValueChange={val =>
-                setTextShadowOffset(prev => ({...prev, height: val}))
-              }
-            />
-            <CustomSlider
-              label="Text Shadow Offset - Width"
-              value={textShadowOffset.width}
-              minimumValue={-40}
-              maximumValue={40}
-              handleValueChange={val =>
-                setTextShadowOffset(prev => ({...prev, width: val}))
-              }
-            />
-            <CustomSlider
-              label="Font Size"
-              value={fontSize}
-              maximumValue={40}
-              handleValueChange={setFontSize}
-            />
-            <CustomPicker
-              label="Font Style"
-              data={fontStyles}
-              currentIndex={fontStyleIdx}
-              onSelected={setFontStyleIdx}
-            />
-            <CustomPicker
-              label="Font Weight"
-              data={fontWeights}
-              currentIndex={fontWeightIdx}
-              onSelected={setFontWeightIdx}
-            />
-            <CustomSlider
-              label="Line Height"
-              value={lineHeight}
-              minimumValue={10}
-              maximumValue={50}
-              handleValueChange={setLineHeight}
-            />
-            <CustomPicker
-              label="Text Align"
-              data={textAlignments}
-              currentIndex={textAlignIdx}
-              onSelected={setTextAlignIdx}
-            />
-            <CustomPicker
-              label="Text Decoration Line"
-              data={textDecorationLines}
-              currentIndex={textDecorationLineIdx}
-              onSelected={setTextDecorationLineIdx}
-            />
-            <CustomSlider
-              label="Text Shadow Radius"
-              value={textShadowRadius}
-              handleValueChange={setTextShadowRadius}
-            />
-            <CustomPicker
-              label="Font Variant"
-              data={fontVariants}
-              currentIndex={fontVariantIdx}
-              onSelected={setFontVariantIdx}
-            />
-            <CustomSlider
-              label="Letter Spacing"
-              step={0.1}
-              value={letterSpacing}
-              handleValueChange={setLetterSpacing}
-            />
-            <CustomPicker
-              label="Text Transform"
-              data={textTransformations}
-              currentIndex={textTransformIdx}
-              onSelected={setTextTransformIdx}
-            />
-          </View>
-          {Platform.OS === 'android' && (
-            <View style={styles.platformContainer}>
-              <Text style={styles.platformContainerTitle}>
-                Android only properties
-              </Text>
-              <CustomPicker
-                label="Text Vertical Align"
-                data={textAlignmentsVertical}
-                currentIndex={textVerticalAlignIdx}
-                onSelected={setTextVerticalAlignIdx}
-              />
-              <CustomSwitch
-                label="Include Font Padding"
-                handleValueChange={setIncludeFontPadding}
-                value={includeFontPadding}
-              />
-            </View>
-          )}
-          {Platform.OS === 'ios' && (
-            <View style={styles.platformContainer}>
-              <Text style={styles.platformContainerTitle}>
-                iOS only properties
-              </Text>
-              <CustomPicker
-                label="Text Decoration Style"
-                data={textDecorationStyles}
-                currentIndex={textDecorationStyleIdx}
-                onSelected={setTextDecorationStyleIdx}
-              />
-              <CustomPicker
-                label="Writing Direction"
-                data={writingDirections}
-                currentIndex={writingDirectionIdx}
-                onSelected={setWritingDirectionIdx}
-              />
-            </View>
-          )}
-        </ScrollView>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const CustomSwitch = ({label, handleValueChange, value}) => {
-  return (
-    <>
-      <Text style={styles.title}>{label}</Text>
-      <View style={{alignItems: 'flex-start'}}>
-        <Switch
-          trackColor={{false: '#767577', true: '#DAA520'}}
-          thumbColor={value ? '#DAA520' : '#f4f3f4'}
-          onValueChange={handleValueChange}
-          value={value}
-        />
-      </View>
-    </>
-  );
-};
-
-const CustomSlider = ({
-  label,
-  handleValueChange,
-  step = 1,
-  minimumValue = 0,
-  maximumValue = 10,
-  value,
-}) => {
-  return (
-    <>
-      {label && (
-        <Text style={styles.title}>{`${label} (${value.toFixed(2)})`}</Text>
-      )}
-      <View style={styles.wrapperHorizontal}>
-        <Slider
-          thumbTintColor="#06bcee"
-          minimumTrackTintColor="#64d7ffbb"
-          minimumValue={minimumValue}
-          maximumValue={maximumValue}
-          step={step}
-          onValueChange={handleValueChange}
-          value={value}
-        />
-      </View>
-    </>
-  );
-};
-
-const CustomPicker = ({label, data, currentIndex, onSelected}) => {
-  return (
-    <>
-      <Text style={styles.title}>{label}</Text>
-      <View style={styles.wrapperHorizontal}>
-        <FlatList
-          bounces
-          horizontal
-          data={data}
-          keyExtractor={item => String(item)}
-          renderItem={({item, index}) => {
-            const selected = index === currentIndex;
-            return (
-              <TouchableWithoutFeedback onPress={() => onSelected(index)}>
-                <View
-                  style={[
-                    styles.itemStyleHorizontal,
-                    selected && styles.itemSelectedStyleHorizontal,
-                  ]}>
-                  <Text
-                    style={{
-                      textAlign: 'center',
-                      color: selected ? 'black' : 'grey',
-                      fontWeight: selected ? 'bold' : 'normal',
-                    }}>
-                    {item + ''}
-                  </Text>
-                </View>
-              </TouchableWithoutFeedback>
-            );
-          }}
-        />
-      </View>
-    </>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  pargraphWrapper: {
-    backgroundColor: 'black',
-  },
-  paragraph: {
-    color: '#fff',
-    textDecorationColor: 'yellow',
-    textShadowColor: 'red',
-    textShadowRadius: 1,
-    padding: 24,
-  },
-  wrapperHorizontal: {
-    justifyContent: 'center',
-    color: 'black',
-  },
-  itemStyleHorizontal: {
-    marginRight: 10,
-    height: 50,
-    padding: 8,
-    borderWidth: 1,
-    borderColor: 'grey',
-    borderRadius: 8,
-    textAlign: 'center',
-    justifyContent: 'center',
-  },
-  itemSelectedStyleHorizontal: {
-    borderWidth: 2,
-    borderColor: '#06bcee',
-  },
-  platformContainer: {
-    marginTop: 8,
-    borderTopWidth: 1,
-  },
-  platformContainerTitle: {
-    marginTop: 8,
-  },
-  title: {
-    fontWeight: 'bold',
-    marginVertical: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=tsx&dependencies=@react-native-community/slider
-import React, {useState} from 'react';
-import {
-  FlatList,
-  Platform,
-  ScrollView,
-  StyleSheet,
-  Switch,
-  Text,
-  TouchableWithoutFeedback,
-  View,
-  TextStyle,
-} from 'react-native';
-import Slider from '@react-native-community/slider';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [fontSize, setFontSize] = useState(20);
-  const [fontStyleIdx, setFontStyleIdx] = useState(0);
-  const [fontWeightIdx, setFontWeightIdx] = useState(0);
-  const [lineHeight, setLineHeight] = useState(24);
-  const [textAlignIdx, setTextAlignIdx] = useState(0);
-  const [textDecorationLineIdx, setTextDecorationLineIdx] = useState(0);
-  const [includeFontPadding, setIncludeFontPadding] = useState(false);
-  const [textVerticalAlignIdx, setTextVerticalAlignIdx] = useState(0);
-  const [fontVariantIdx, setFontVariantIdx] = useState(0);
-  const [letterSpacing, setLetterSpacing] = useState(0);
-  const [textDecorationStyleIdx, setTextDecorationStyleIdx] = useState(0);
-  const [textTransformIdx, setTextTransformIdx] = useState(0);
-  const [writingDirectionIdx, setWritingDirectionIdx] = useState(0);
-  const [textShadowRadius, setTextShadowRadius] = useState(0);
-  const [textShadowOffset, setTextShadowOffset] = useState({
-    height: 0,
-    width: 0,
-  });
-
-  const [, ...validFontVariants] = fontVariants;
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.pargraphWrapper}>
-          <Text
-            style={[
-              styles.paragraph,
-              {
-                fontSize,
-                fontStyle: fontStyles[fontStyleIdx],
-                fontWeight: fontWeights[fontWeightIdx],
-                lineHeight,
-                textAlign: textAlignments[textAlignIdx],
-                textDecorationLine: textDecorationLines[textDecorationLineIdx],
-                textTransform: textTransformations[textTransformIdx],
-                textAlignVertical: textAlignmentsVertical[textVerticalAlignIdx],
-                fontVariant:
-                  fontVariantIdx === 0
-                    ? undefined
-                    : [validFontVariants[fontVariantIdx - 1]],
-                letterSpacing,
-                includeFontPadding,
-                textDecorationStyle:
-                  textDecorationStyles[textDecorationStyleIdx],
-                writingDirection: writingDirections[writingDirectionIdx],
-                textShadowOffset,
-                textShadowRadius,
-              } as TextStyle,
-            ]}>
-            Lorem Ipsum is simply dummy text of the printing and typesetting
-            industry. 112 Likes
-          </Text>
-        </View>
-        <ScrollView style={{padding: 12}}>
-          <View>
-            <Text>Common platform properties</Text>
-            <CustomSlider
-              label="Text Shadow Offset - Height"
-              value={textShadowOffset.height}
-              minimumValue={-40}
-              maximumValue={40}
-              handleValueChange={(val: number) =>
-                setTextShadowOffset(prev => ({...prev, height: val}))
-              }
-            />
-            <CustomSlider
-              label="Text Shadow Offset - Width"
-              value={textShadowOffset.width}
-              minimumValue={-40}
-              maximumValue={40}
-              handleValueChange={(val: number) =>
-                setTextShadowOffset(prev => ({...prev, width: val}))
-              }
-            />
-            <CustomSlider
-              label="Font Size"
-              value={fontSize}
-              maximumValue={40}
-              handleValueChange={setFontSize}
-            />
-            <CustomPicker
-              label="Font Style"
-              data={fontStyles}
-              currentIndex={fontStyleIdx}
-              onSelected={setFontStyleIdx}
-            />
-            <CustomPicker
-              label="Font Weight"
-              data={fontWeights}
-              currentIndex={fontWeightIdx}
-              onSelected={setFontWeightIdx}
-            />
-            <CustomSlider
-              label="Line Height"
-              value={lineHeight}
-              minimumValue={10}
-              maximumValue={50}
-              handleValueChange={setLineHeight}
-            />
-            <CustomPicker
-              label="Text Align"
-              data={textAlignments}
-              currentIndex={textAlignIdx}
-              onSelected={setTextAlignIdx}
-            />
-            <CustomPicker
-              label="Text Decoration Line"
-              data={textDecorationLines}
-              currentIndex={textDecorationLineIdx}
-              onSelected={setTextDecorationLineIdx}
-            />
-            <CustomSlider
-              label="Text Shadow Radius"
-              value={textShadowRadius}
-              handleValueChange={setTextShadowRadius}
-            />
-            <CustomPicker
-              label="Font Variant"
-              data={fontVariants}
-              currentIndex={fontVariantIdx}
-              onSelected={setFontVariantIdx}
-            />
-            <CustomSlider
-              label="Letter Spacing"
-              step={0.1}
-              value={letterSpacing}
-              handleValueChange={setLetterSpacing}
-            />
-            <CustomPicker
-              label="Text Transform"
-              data={textTransformations}
-              currentIndex={textTransformIdx}
-              onSelected={setTextTransformIdx}
-            />
-          </View>
-          {Platform.OS === 'android' && (
-            <View style={styles.platformContainer}>
-              <Text style={styles.platformContainerTitle}>
-                Android only properties
-              </Text>
-              <CustomPicker
-                label="Text Vertical Align"
-                data={textAlignmentsVertical}
-                currentIndex={textVerticalAlignIdx}
-                onSelected={setTextVerticalAlignIdx}
-              />
-              <CustomSwitch
-                label="Include Font Padding"
-                handleValueChange={setIncludeFontPadding}
-                value={includeFontPadding}
-              />
-            </View>
-          )}
-          {Platform.OS === 'ios' && (
-            <View style={styles.platformContainer}>
-              <Text style={styles.platformContainerTitle}>
-                iOS only properties
-              </Text>
-              <CustomPicker
-                label="Text Decoration Style"
-                data={textDecorationStyles}
-                currentIndex={textDecorationStyleIdx}
-                onSelected={setTextDecorationStyleIdx}
-              />
-              <CustomPicker
-                label="Writing Direction"
-                data={writingDirections}
-                currentIndex={writingDirectionIdx}
-                onSelected={setWritingDirectionIdx}
-              />
-            </View>
-          )}
-        </ScrollView>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-type CustomSwitchProps = {
-  label: string;
-  value: boolean;
-  handleValueChange: (value: boolean) => void;
-};
-
-const CustomSwitch = ({label, handleValueChange, value}: CustomSwitchProps) => {
-  return (
-    <>
-      <Text style={styles.title}>{label}</Text>
-      <View style={{alignItems: 'flex-start'}}>
-        <Switch
-          trackColor={{false: '#767577', true: '#DAA520'}}
-          thumbColor={value ? '#DAA520' : '#f4f3f4'}
-          onValueChange={handleValueChange}
-          value={value}
-        />
-      </View>
-    </>
-  );
-};
-
-type CustomSliderProps = {
-  label: string;
-  value: number;
-  handleValueChange: (value: number) => void;
-  step?: number;
-  minimumValue?: number;
-  maximumValue?: number;
-};
-
-const CustomSlider = ({
-  label,
-  handleValueChange,
-  step = 1,
-  minimumValue = 0,
-  maximumValue = 10,
-  value,
-}: CustomSliderProps) => {
-  return (
-    <>
-      {label && (
-        <Text style={styles.title}>{`${label} (${value.toFixed(2)})`}</Text>
-      )}
-      <View style={styles.wrapperHorizontal}>
-        <Slider
-          thumbTintColor="#06bcee"
-          minimumTrackTintColor="#64d7ffbb"
-          minimumValue={minimumValue}
-          maximumValue={maximumValue}
-          step={step}
-          onValueChange={handleValueChange}
-          value={value}
-        />
-      </View>
-    </>
-  );
-};
-
-type CustomPickerProps = {
-  label: string;
-  data?: ArrayLike<any> | null;
-  currentIndex: number;
-  onSelected: (index: number) => void;
-};
-
-const CustomPicker = ({
-  label,
-  data,
-  currentIndex,
-  onSelected,
-}: CustomPickerProps) => {
-  return (
-    <>
-      <Text style={styles.title}>{label}</Text>
-      <View style={styles.wrapperHorizontal}>
-        <FlatList
-          horizontal
-          data={data}
-          keyExtractor={item => String(item)}
-          renderItem={({item, index}: {item: string; index: number}) => {
-            const selected = index === currentIndex;
-            return (
-              <TouchableWithoutFeedback onPress={() => onSelected(index)}>
-                <View
-                  style={[
-                    styles.itemStyleHorizontal,
-                    selected && styles.itemSelectedStyleHorizontal,
-                  ]}>
-                  <Text
-                    style={{
-                      textAlign: 'center',
-                      color: selected ? 'black' : 'grey',
-                      fontWeight: selected ? 'bold' : 'normal',
-                    }}>
-                    {item + ''}
-                  </Text>
-                </View>
-              </TouchableWithoutFeedback>
-            );
-          }}
-        />
-      </View>
-    </>
-  );
-};
-
-const fontStyles = ['normal', 'italic'];
-const fontVariants = [
-  undefined,
-  'small-caps',
-  'oldstyle-nums',
-  'lining-nums',
-  'tabular-nums',
-  'proportional-nums',
-];
-const fontWeights = [
-  'normal',
-  'bold',
-  '100',
-  '200',
-  '300',
-  '400',
-  '500',
-  '600',
-  '700',
-  '800',
-  '900',
-];
-const textAlignments = ['auto', 'left', 'right', 'center', 'justify'];
-const textDecorationLines = [
-  'none',
-  'underline',
-  'line-through',
-  'underline line-through',
-];
-const textDecorationStyles = ['solid', 'double', 'dotted', 'dashed'];
-const textTransformations = ['none', 'uppercase', 'lowercase', 'capitalize'];
-const textAlignmentsVertical = ['auto', 'top', 'bottom', 'center'];
-const writingDirections = ['auto', 'ltr', 'rtl'];
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  pargraphWrapper: {
-    backgroundColor: 'black',
-  },
-  paragraph: {
-    color: '#fff',
-    textDecorationColor: 'yellow',
-    textShadowColor: 'red',
-    textShadowRadius: 1,
-    padding: 24,
-  },
-  wrapperHorizontal: {
-    justifyContent: 'center',
-    color: 'black',
-  },
-  itemStyleHorizontal: {
-    marginRight: 10,
-    height: 50,
-    padding: 8,
-    borderWidth: 1,
-    borderColor: 'grey',
-    borderRadius: 8,
-    textAlign: 'center',
-    justifyContent: 'center',
-  },
-  itemSelectedStyleHorizontal: {
-    borderWidth: 2,
-    borderColor: '#06bcee',
-  },
-  platformContainer: {
-    marginTop: 8,
-    borderTopWidth: 1,
-  },
-  platformContainerTitle: {
-    marginTop: 8,
-  },
-  title: {
-    fontWeight: 'bold',
-    marginVertical: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-# Reference
-
-## Props
-
-### `color`
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `fontFamily`
-
-| Type   |
-| ------ |
-| string |
-
-The generic font families `system-ui`, `ui-sans-serif`, `ui-serif`, `ui-monospace`, and `ui-rounded` are supported on iOS.
-
----
-
-### `fontSize`
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `fontStyle`
-
-| Type                         |
-| ---------------------------- |
-| enum(`'normal'`, `'italic'`) |
-
----
-
-### `fontWeight`
-
-Specifies font weight. The values `'normal'` and `'bold'` are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen.
-
-| Type                                                                                                                  | Default    |
-| --------------------------------------------------------------------------------------------------------------------- | ---------- |
-| enum(`'normal'`, `'bold'`, `'100'`, `'200'`, `'300'`, `'400'`, `'500'`, `'600'`, `'700'`, `'800'`, `'900'`) or number | `'normal'` |
-
----
-
-### `includeFontPadding` <div className="label android">Android</div>
-
-Set to `false` to remove extra font padding intended to make space for certain ascenders / descenders. With some fonts, this padding can make text look slightly misaligned when centered vertically. For best results also set `textAlignVertical` to `center`.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `true`  |
-
----
-
-### `fontVariant`
-
-Allows you to set all the font variants for a font. Can be set by using an array of enums or a space-separated string e.g. `'small-caps common-ligatures'`.
-
-| Type                                                                                                                 | Default |
-| -------------------------------------------------------------------------------------------------------------------- | ------- |
-| array of enum(`'small-caps'`, `'oldstyle-nums'`, `'lining-nums'`, `'tabular-nums'`, `'proportional-nums'`) or string | `[]`    |
-
----
-
-### `letterSpacing`
-
-Increase or decrease the spacing between characters. By default there is no extra letter spacing.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `lineHeight`
-
-Numeric value that controls the vertical spacing between lines of text within a text element. It specifies the distance between the baselines of consecutive lines of text.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `textAlign`
-
-Specifies text alignment. On Android, the value 'justify' is only supported on Oreo (8.0) or above (API level >= 26). The value will fallback to `left` on lower Android versions.
-
-| Type                                                         | Default  |
-| ------------------------------------------------------------ | -------- |
-| enum(`'auto'`, `'left'`, `'right'`, `'center'`, `'justify'`) | `'auto'` |
-
----
-
-### `textAlignVertical` <div className="label android">Android</div>
-
-An alias for `verticalAlign` style prop, if you use both properties, `verticalAlign` will take precedence over `textAlignVertical`
-
-| Type                                            | Default  |
-| ----------------------------------------------- | -------- |
-| enum(`'auto'`, `'top'`, `'bottom'`, `'center'`) | `'auto'` |
-
----
-
-### `textDecorationColor` <div className="label ios">iOS</div>
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `textDecorationLine`
-
-| Type                                                                        | Default  |
-| --------------------------------------------------------------------------- | -------- |
-| enum(`'none'`, `'underline'`, `'line-through'`, `'underline line-through'`) | `'none'` |
-
----
-
-### `textDecorationStyle` <div className="label ios">iOS</div>
-
-| Type                                                | Default   |
-| --------------------------------------------------- | --------- |
-| enum(`'solid'`, `'double'`, `'dotted'`, `'dashed'`) | `'solid'` |
-
----
-
-### `textShadowColor`
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `textShadowOffset`
-
-| Type                                        |
-| ------------------------------------------- |
-| object: `{width?: number, height?: number}` |
-
----
-
-### `textShadowRadius`
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `textTransform`
-
-| Type                                                         | Default  |
-| ------------------------------------------------------------ | -------- |
-| enum(`'none'`, `'uppercase'`, `'lowercase'`, `'capitalize'`) | `'none'` |
-
----
-
-### `verticalAlign` <div className="label android">Android</div>
-
-| Type                                            | Default  |
-| ----------------------------------------------- | -------- |
-| enum(`'auto'`, `'top'`, `'bottom'`, `'middle'`) | `'auto'` |
-
----
-
-### `writingDirection` <div className="label ios">iOS</div>
-
-| Type                             | Default  |
-| -------------------------------- | -------- |
-| enum(`'auto'`, `'ltr'`, `'rtl'`) | `'auto'` |
-
----
-
-### `userSelect`
-
-It allows the user to select text and to use the native copy and paste functionality. Has precedence over the `selectable` prop.
-
-| Type                                                     | Default |
-| -------------------------------------------------------- | ------- |
-| enum(`'auto'`, `'text'`, `'none'`, `'contain'`, `'all'`) | `none`  |
+---
+id: text-style-props
+title: Text Style Props
+---
+
+### Example
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=js&dependencies=@react-native-community/slider
+import {useState} from 'react';
+import {
+  FlatList,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Switch,
+  Text,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+import Slider from '@react-native-community/slider';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const fontStyles = ['normal', 'italic'];
+const fontVariants = [
+  undefined,
+  'small-caps',
+  'oldstyle-nums',
+  'lining-nums',
+  'tabular-nums',
+  'proportional-nums',
+];
+const fontWeights = [
+  'normal',
+  'bold',
+  '100',
+  '200',
+  '300',
+  '400',
+  '500',
+  '600',
+  '700',
+  '800',
+  '900',
+];
+const textAlignments = ['auto', 'left', 'right', 'center', 'justify'];
+const textDecorationLines = [
+  'none',
+  'underline',
+  'line-through',
+  'underline line-through',
+];
+const textDecorationStyles = ['solid', 'double', 'dotted', 'dashed'];
+const textTransformations = ['none', 'uppercase', 'lowercase', 'capitalize'];
+const textAlignmentsVertical = ['auto', 'top', 'bottom', 'center'];
+const writingDirections = ['auto', 'ltr', 'rtl'];
+
+const App = () => {
+  const [fontSize, setFontSize] = useState(20);
+  const [fontStyleIdx, setFontStyleIdx] = useState(0);
+  const [fontWeightIdx, setFontWeightIdx] = useState(0);
+  const [lineHeight, setLineHeight] = useState(24);
+  const [textAlignIdx, setTextAlignIdx] = useState(0);
+  const [textDecorationLineIdx, setTextDecorationLineIdx] = useState(0);
+  const [includeFontPadding, setIncludeFontPadding] = useState(false);
+  const [textVerticalAlignIdx, setTextVerticalAlignIdx] = useState(0);
+  const [fontVariantIdx, setFontVariantIdx] = useState(0);
+  const [letterSpacing, setLetterSpacing] = useState(0);
+  const [textDecorationStyleIdx, setTextDecorationStyleIdx] = useState(0);
+  const [textTransformIdx, setTextTransformIdx] = useState(0);
+  const [writingDirectionIdx, setWritingDirectionIdx] = useState(0);
+  const [textShadowRadius, setTextShadowRadius] = useState(0);
+  const [textShadowOffset, setTextShadowOffset] = useState({
+    height: 0,
+    width: 0,
+  });
+
+  const [, ...validFontVariants] = fontVariants;
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.pargraphWrapper}>
+          <Text
+            style={[
+              styles.paragraph,
+              {
+                fontSize,
+                fontStyle: fontStyles[fontStyleIdx],
+                fontWeight: fontWeights[fontWeightIdx],
+                lineHeight,
+                textAlign: textAlignments[textAlignIdx],
+                textDecorationLine: textDecorationLines[textDecorationLineIdx],
+                textTransform: textTransformations[textTransformIdx],
+                textAlignVertical: textAlignmentsVertical[textVerticalAlignIdx],
+                fontVariant:
+                  fontVariantIdx === 0
+                    ? undefined
+                    : [validFontVariants[fontVariantIdx - 1]],
+                letterSpacing,
+                includeFontPadding,
+                textDecorationStyle:
+                  textDecorationStyles[textDecorationStyleIdx],
+                writingDirection: writingDirections[writingDirectionIdx],
+                textShadowOffset,
+                textShadowRadius,
+              },
+            ]}>
+            Lorem Ipsum is simply dummy text of the printing and typesetting
+            industry. 112 Likes
+          </Text>
+        </View>
+        <ScrollView style={{padding: 12}}>
+          <View>
+            <Text>Common platform properties</Text>
+            <CustomSlider
+              label="Text Shadow Offset - Height"
+              value={textShadowOffset.height}
+              minimumValue={-40}
+              maximumValue={40}
+              handleValueChange={val =>
+                setTextShadowOffset(prev => ({...prev, height: val}))
+              }
+            />
+            <CustomSlider
+              label="Text Shadow Offset - Width"
+              value={textShadowOffset.width}
+              minimumValue={-40}
+              maximumValue={40}
+              handleValueChange={val =>
+                setTextShadowOffset(prev => ({...prev, width: val}))
+              }
+            />
+            <CustomSlider
+              label="Font Size"
+              value={fontSize}
+              maximumValue={40}
+              handleValueChange={setFontSize}
+            />
+            <CustomPicker
+              label="Font Style"
+              data={fontStyles}
+              currentIndex={fontStyleIdx}
+              onSelected={setFontStyleIdx}
+            />
+            <CustomPicker
+              label="Font Weight"
+              data={fontWeights}
+              currentIndex={fontWeightIdx}
+              onSelected={setFontWeightIdx}
+            />
+            <CustomSlider
+              label="Line Height"
+              value={lineHeight}
+              minimumValue={10}
+              maximumValue={50}
+              handleValueChange={setLineHeight}
+            />
+            <CustomPicker
+              label="Text Align"
+              data={textAlignments}
+              currentIndex={textAlignIdx}
+              onSelected={setTextAlignIdx}
+            />
+            <CustomPicker
+              label="Text Decoration Line"
+              data={textDecorationLines}
+              currentIndex={textDecorationLineIdx}
+              onSelected={setTextDecorationLineIdx}
+            />
+            <CustomSlider
+              label="Text Shadow Radius"
+              value={textShadowRadius}
+              handleValueChange={setTextShadowRadius}
+            />
+            <CustomPicker
+              label="Font Variant"
+              data={fontVariants}
+              currentIndex={fontVariantIdx}
+              onSelected={setFontVariantIdx}
+            />
+            <CustomSlider
+              label="Letter Spacing"
+              step={0.1}
+              value={letterSpacing}
+              handleValueChange={setLetterSpacing}
+            />
+            <CustomPicker
+              label="Text Transform"
+              data={textTransformations}
+              currentIndex={textTransformIdx}
+              onSelected={setTextTransformIdx}
+            />
+          </View>
+          {Platform.OS === 'android' && (
+            <View style={styles.platformContainer}>
+              <Text style={styles.platformContainerTitle}>
+                Android only properties
+              </Text>
+              <CustomPicker
+                label="Text Vertical Align"
+                data={textAlignmentsVertical}
+                currentIndex={textVerticalAlignIdx}
+                onSelected={setTextVerticalAlignIdx}
+              />
+              <CustomSwitch
+                label="Include Font Padding"
+                handleValueChange={setIncludeFontPadding}
+                value={includeFontPadding}
+              />
+            </View>
+          )}
+          {Platform.OS === 'ios' && (
+            <View style={styles.platformContainer}>
+              <Text style={styles.platformContainerTitle}>
+                iOS only properties
+              </Text>
+              <CustomPicker
+                label="Text Decoration Style"
+                data={textDecorationStyles}
+                currentIndex={textDecorationStyleIdx}
+                onSelected={setTextDecorationStyleIdx}
+              />
+              <CustomPicker
+                label="Writing Direction"
+                data={writingDirections}
+                currentIndex={writingDirectionIdx}
+                onSelected={setWritingDirectionIdx}
+              />
+            </View>
+          )}
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const CustomSwitch = ({label, handleValueChange, value}) => {
+  return (
+    <>
+      <Text style={styles.title}>{label}</Text>
+      <View style={{alignItems: 'flex-start'}}>
+        <Switch
+          trackColor={{false: '#767577', true: '#DAA520'}}
+          thumbColor={value ? '#DAA520' : '#f4f3f4'}
+          onValueChange={handleValueChange}
+          value={value}
+        />
+      </View>
+    </>
+  );
+};
+
+const CustomSlider = ({
+  label,
+  handleValueChange,
+  step = 1,
+  minimumValue = 0,
+  maximumValue = 10,
+  value,
+}) => {
+  return (
+    <>
+      {label && (
+        <Text style={styles.title}>{`${label} (${value.toFixed(2)})`}</Text>
+      )}
+      <View style={styles.wrapperHorizontal}>
+        <Slider
+          thumbTintColor="#06bcee"
+          minimumTrackTintColor="#64d7ffbb"
+          minimumValue={minimumValue}
+          maximumValue={maximumValue}
+          step={step}
+          onValueChange={handleValueChange}
+          value={value}
+        />
+      </View>
+    </>
+  );
+};
+
+const CustomPicker = ({label, data, currentIndex, onSelected}) => {
+  return (
+    <>
+      <Text style={styles.title}>{label}</Text>
+      <View style={styles.wrapperHorizontal}>
+        <FlatList
+          bounces
+          horizontal
+          data={data}
+          keyExtractor={item => String(item)}
+          renderItem={({item, index}) => {
+            const selected = index === currentIndex;
+            return (
+              <TouchableWithoutFeedback onPress={() => onSelected(index)}>
+                <View
+                  style={[
+                    styles.itemStyleHorizontal,
+                    selected && styles.itemSelectedStyleHorizontal,
+                  ]}>
+                  <Text
+                    style={{
+                      textAlign: 'center',
+                      color: selected ? 'black' : 'grey',
+                      fontWeight: selected ? 'bold' : 'normal',
+                    }}>
+                    {item + ''}
+                  </Text>
+                </View>
+              </TouchableWithoutFeedback>
+            );
+          }}
+        />
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  pargraphWrapper: {
+    backgroundColor: 'black',
+  },
+  paragraph: {
+    color: '#fff',
+    textDecorationColor: 'yellow',
+    textShadowColor: 'red',
+    textShadowRadius: 1,
+    padding: 24,
+  },
+  wrapperHorizontal: {
+    justifyContent: 'center',
+    color: 'black',
+  },
+  itemStyleHorizontal: {
+    marginRight: 10,
+    height: 50,
+    padding: 8,
+    borderWidth: 1,
+    borderColor: 'grey',
+    borderRadius: 8,
+    textAlign: 'center',
+    justifyContent: 'center',
+  },
+  itemSelectedStyleHorizontal: {
+    borderWidth: 2,
+    borderColor: '#06bcee',
+  },
+  platformContainer: {
+    marginTop: 8,
+    borderTopWidth: 1,
+  },
+  platformContainerTitle: {
+    marginTop: 8,
+  },
+  title: {
+    fontWeight: 'bold',
+    marginVertical: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=tsx&dependencies=@react-native-community/slider
+import {useState} from 'react';
+import {
+  FlatList,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Switch,
+  Text,
+  TouchableWithoutFeedback,
+  View,
+  TextStyle,
+} from 'react-native';
+import Slider from '@react-native-community/slider';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [fontSize, setFontSize] = useState(20);
+  const [fontStyleIdx, setFontStyleIdx] = useState(0);
+  const [fontWeightIdx, setFontWeightIdx] = useState(0);
+  const [lineHeight, setLineHeight] = useState(24);
+  const [textAlignIdx, setTextAlignIdx] = useState(0);
+  const [textDecorationLineIdx, setTextDecorationLineIdx] = useState(0);
+  const [includeFontPadding, setIncludeFontPadding] = useState(false);
+  const [textVerticalAlignIdx, setTextVerticalAlignIdx] = useState(0);
+  const [fontVariantIdx, setFontVariantIdx] = useState(0);
+  const [letterSpacing, setLetterSpacing] = useState(0);
+  const [textDecorationStyleIdx, setTextDecorationStyleIdx] = useState(0);
+  const [textTransformIdx, setTextTransformIdx] = useState(0);
+  const [writingDirectionIdx, setWritingDirectionIdx] = useState(0);
+  const [textShadowRadius, setTextShadowRadius] = useState(0);
+  const [textShadowOffset, setTextShadowOffset] = useState({
+    height: 0,
+    width: 0,
+  });
+
+  const [, ...validFontVariants] = fontVariants;
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.pargraphWrapper}>
+          <Text
+            style={[
+              styles.paragraph,
+              {
+                fontSize,
+                fontStyle: fontStyles[fontStyleIdx],
+                fontWeight: fontWeights[fontWeightIdx],
+                lineHeight,
+                textAlign: textAlignments[textAlignIdx],
+                textDecorationLine: textDecorationLines[textDecorationLineIdx],
+                textTransform: textTransformations[textTransformIdx],
+                textAlignVertical: textAlignmentsVertical[textVerticalAlignIdx],
+                fontVariant:
+                  fontVariantIdx === 0
+                    ? undefined
+                    : [validFontVariants[fontVariantIdx - 1]],
+                letterSpacing,
+                includeFontPadding,
+                textDecorationStyle:
+                  textDecorationStyles[textDecorationStyleIdx],
+                writingDirection: writingDirections[writingDirectionIdx],
+                textShadowOffset,
+                textShadowRadius,
+              } as TextStyle,
+            ]}>
+            Lorem Ipsum is simply dummy text of the printing and typesetting
+            industry. 112 Likes
+          </Text>
+        </View>
+        <ScrollView style={{padding: 12}}>
+          <View>
+            <Text>Common platform properties</Text>
+            <CustomSlider
+              label="Text Shadow Offset - Height"
+              value={textShadowOffset.height}
+              minimumValue={-40}
+              maximumValue={40}
+              handleValueChange={(val: number) =>
+                setTextShadowOffset(prev => ({...prev, height: val}))
+              }
+            />
+            <CustomSlider
+              label="Text Shadow Offset - Width"
+              value={textShadowOffset.width}
+              minimumValue={-40}
+              maximumValue={40}
+              handleValueChange={(val: number) =>
+                setTextShadowOffset(prev => ({...prev, width: val}))
+              }
+            />
+            <CustomSlider
+              label="Font Size"
+              value={fontSize}
+              maximumValue={40}
+              handleValueChange={setFontSize}
+            />
+            <CustomPicker
+              label="Font Style"
+              data={fontStyles}
+              currentIndex={fontStyleIdx}
+              onSelected={setFontStyleIdx}
+            />
+            <CustomPicker
+              label="Font Weight"
+              data={fontWeights}
+              currentIndex={fontWeightIdx}
+              onSelected={setFontWeightIdx}
+            />
+            <CustomSlider
+              label="Line Height"
+              value={lineHeight}
+              minimumValue={10}
+              maximumValue={50}
+              handleValueChange={setLineHeight}
+            />
+            <CustomPicker
+              label="Text Align"
+              data={textAlignments}
+              currentIndex={textAlignIdx}
+              onSelected={setTextAlignIdx}
+            />
+            <CustomPicker
+              label="Text Decoration Line"
+              data={textDecorationLines}
+              currentIndex={textDecorationLineIdx}
+              onSelected={setTextDecorationLineIdx}
+            />
+            <CustomSlider
+              label="Text Shadow Radius"
+              value={textShadowRadius}
+              handleValueChange={setTextShadowRadius}
+            />
+            <CustomPicker
+              label="Font Variant"
+              data={fontVariants}
+              currentIndex={fontVariantIdx}
+              onSelected={setFontVariantIdx}
+            />
+            <CustomSlider
+              label="Letter Spacing"
+              step={0.1}
+              value={letterSpacing}
+              handleValueChange={setLetterSpacing}
+            />
+            <CustomPicker
+              label="Text Transform"
+              data={textTransformations}
+              currentIndex={textTransformIdx}
+              onSelected={setTextTransformIdx}
+            />
+          </View>
+          {Platform.OS === 'android' && (
+            <View style={styles.platformContainer}>
+              <Text style={styles.platformContainerTitle}>
+                Android only properties
+              </Text>
+              <CustomPicker
+                label="Text Vertical Align"
+                data={textAlignmentsVertical}
+                currentIndex={textVerticalAlignIdx}
+                onSelected={setTextVerticalAlignIdx}
+              />
+              <CustomSwitch
+                label="Include Font Padding"
+                handleValueChange={setIncludeFontPadding}
+                value={includeFontPadding}
+              />
+            </View>
+          )}
+          {Platform.OS === 'ios' && (
+            <View style={styles.platformContainer}>
+              <Text style={styles.platformContainerTitle}>
+                iOS only properties
+              </Text>
+              <CustomPicker
+                label="Text Decoration Style"
+                data={textDecorationStyles}
+                currentIndex={textDecorationStyleIdx}
+                onSelected={setTextDecorationStyleIdx}
+              />
+              <CustomPicker
+                label="Writing Direction"
+                data={writingDirections}
+                currentIndex={writingDirectionIdx}
+                onSelected={setWritingDirectionIdx}
+              />
+            </View>
+          )}
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+type CustomSwitchProps = {
+  label: string;
+  value: boolean;
+  handleValueChange: (value: boolean) => void;
+};
+
+const CustomSwitch = ({label, handleValueChange, value}: CustomSwitchProps) => {
+  return (
+    <>
+      <Text style={styles.title}>{label}</Text>
+      <View style={{alignItems: 'flex-start'}}>
+        <Switch
+          trackColor={{false: '#767577', true: '#DAA520'}}
+          thumbColor={value ? '#DAA520' : '#f4f3f4'}
+          onValueChange={handleValueChange}
+          value={value}
+        />
+      </View>
+    </>
+  );
+};
+
+type CustomSliderProps = {
+  label: string;
+  value: number;
+  handleValueChange: (value: number) => void;
+  step?: number;
+  minimumValue?: number;
+  maximumValue?: number;
+};
+
+const CustomSlider = ({
+  label,
+  handleValueChange,
+  step = 1,
+  minimumValue = 0,
+  maximumValue = 10,
+  value,
+}: CustomSliderProps) => {
+  return (
+    <>
+      {label && (
+        <Text style={styles.title}>{`${label} (${value.toFixed(2)})`}</Text>
+      )}
+      <View style={styles.wrapperHorizontal}>
+        <Slider
+          thumbTintColor="#06bcee"
+          minimumTrackTintColor="#64d7ffbb"
+          minimumValue={minimumValue}
+          maximumValue={maximumValue}
+          step={step}
+          onValueChange={handleValueChange}
+          value={value}
+        />
+      </View>
+    </>
+  );
+};
+
+type CustomPickerProps = {
+  label: string;
+  data?: ArrayLike<any> | null;
+  currentIndex: number;
+  onSelected: (index: number) => void;
+};
+
+const CustomPicker = ({
+  label,
+  data,
+  currentIndex,
+  onSelected,
+}: CustomPickerProps) => {
+  return (
+    <>
+      <Text style={styles.title}>{label}</Text>
+      <View style={styles.wrapperHorizontal}>
+        <FlatList
+          horizontal
+          data={data}
+          keyExtractor={item => String(item)}
+          renderItem={({item, index}: {item: string; index: number}) => {
+            const selected = index === currentIndex;
+            return (
+              <TouchableWithoutFeedback onPress={() => onSelected(index)}>
+                <View
+                  style={[
+                    styles.itemStyleHorizontal,
+                    selected && styles.itemSelectedStyleHorizontal,
+                  ]}>
+                  <Text
+                    style={{
+                      textAlign: 'center',
+                      color: selected ? 'black' : 'grey',
+                      fontWeight: selected ? 'bold' : 'normal',
+                    }}>
+                    {item + ''}
+                  </Text>
+                </View>
+              </TouchableWithoutFeedback>
+            );
+          }}
+        />
+      </View>
+    </>
+  );
+};
+
+const fontStyles = ['normal', 'italic'];
+const fontVariants = [
+  undefined,
+  'small-caps',
+  'oldstyle-nums',
+  'lining-nums',
+  'tabular-nums',
+  'proportional-nums',
+];
+const fontWeights = [
+  'normal',
+  'bold',
+  '100',
+  '200',
+  '300',
+  '400',
+  '500',
+  '600',
+  '700',
+  '800',
+  '900',
+];
+const textAlignments = ['auto', 'left', 'right', 'center', 'justify'];
+const textDecorationLines = [
+  'none',
+  'underline',
+  'line-through',
+  'underline line-through',
+];
+const textDecorationStyles = ['solid', 'double', 'dotted', 'dashed'];
+const textTransformations = ['none', 'uppercase', 'lowercase', 'capitalize'];
+const textAlignmentsVertical = ['auto', 'top', 'bottom', 'center'];
+const writingDirections = ['auto', 'ltr', 'rtl'];
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  pargraphWrapper: {
+    backgroundColor: 'black',
+  },
+  paragraph: {
+    color: '#fff',
+    textDecorationColor: 'yellow',
+    textShadowColor: 'red',
+    textShadowRadius: 1,
+    padding: 24,
+  },
+  wrapperHorizontal: {
+    justifyContent: 'center',
+    color: 'black',
+  },
+  itemStyleHorizontal: {
+    marginRight: 10,
+    height: 50,
+    padding: 8,
+    borderWidth: 1,
+    borderColor: 'grey',
+    borderRadius: 8,
+    textAlign: 'center',
+    justifyContent: 'center',
+  },
+  itemSelectedStyleHorizontal: {
+    borderWidth: 2,
+    borderColor: '#06bcee',
+  },
+  platformContainer: {
+    marginTop: 8,
+    borderTopWidth: 1,
+  },
+  platformContainerTitle: {
+    marginTop: 8,
+  },
+  title: {
+    fontWeight: 'bold',
+    marginVertical: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+# Reference
+
+## Props
+
+### `color`
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `fontFamily`
+
+| Type   |
+| ------ |
+| string |
+
+The generic font families `system-ui`, `ui-sans-serif`, `ui-serif`, `ui-monospace`, and `ui-rounded` are supported on iOS.
+
+---
+
+### `fontSize`
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `fontStyle`
+
+| Type                         |
+| ---------------------------- |
+| enum(`'normal'`, `'italic'`) |
+
+---
+
+### `fontWeight`
+
+Specifies font weight. The values `'normal'` and `'bold'` are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen.
+
+| Type                                                                                                                  | Default    |
+| --------------------------------------------------------------------------------------------------------------------- | ---------- |
+| enum(`'normal'`, `'bold'`, `'100'`, `'200'`, `'300'`, `'400'`, `'500'`, `'600'`, `'700'`, `'800'`, `'900'`) or number | `'normal'` |
+
+---
+
+### `includeFontPadding` <div className="label android">Android</div>
+
+Set to `false` to remove extra font padding intended to make space for certain ascenders / descenders. With some fonts, this padding can make text look slightly misaligned when centered vertically. For best results also set `textAlignVertical` to `center`.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `true`  |
+
+---
+
+### `fontVariant`
+
+Allows you to set all the font variants for a font. Can be set by using an array of enums or a space-separated string e.g. `'small-caps common-ligatures'`.
+
+| Type                                                                                                                 | Default |
+| -------------------------------------------------------------------------------------------------------------------- | ------- |
+| array of enum(`'small-caps'`, `'oldstyle-nums'`, `'lining-nums'`, `'tabular-nums'`, `'proportional-nums'`) or string | `[]`    |
+
+---
+
+### `letterSpacing`
+
+Increase or decrease the spacing between characters. By default there is no extra letter spacing.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `lineHeight`
+
+Numeric value that controls the vertical spacing between lines of text within a text element. It specifies the distance between the baselines of consecutive lines of text.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `textAlign`
+
+Specifies text alignment. On Android, the value 'justify' is only supported on Oreo (8.0) or above (API level >= 26). The value will fallback to `left` on lower Android versions.
+
+| Type                                                         | Default  |
+| ------------------------------------------------------------ | -------- |
+| enum(`'auto'`, `'left'`, `'right'`, `'center'`, `'justify'`) | `'auto'` |
+
+---
+
+### `textAlignVertical` <div className="label android">Android</div>
+
+An alias for `verticalAlign` style prop, if you use both properties, `verticalAlign` will take precedence over `textAlignVertical`
+
+| Type                                            | Default  |
+| ----------------------------------------------- | -------- |
+| enum(`'auto'`, `'top'`, `'bottom'`, `'center'`) | `'auto'` |
+
+---
+
+### `textDecorationColor` <div className="label ios">iOS</div>
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `textDecorationLine`
+
+| Type                                                                        | Default  |
+| --------------------------------------------------------------------------- | -------- |
+| enum(`'none'`, `'underline'`, `'line-through'`, `'underline line-through'`) | `'none'` |
+
+---
+
+### `textDecorationStyle` <div className="label ios">iOS</div>
+
+| Type                                                | Default   |
+| --------------------------------------------------- | --------- |
+| enum(`'solid'`, `'double'`, `'dotted'`, `'dashed'`) | `'solid'` |
+
+---
+
+### `textShadowColor`
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `textShadowOffset`
+
+| Type                                        |
+| ------------------------------------------- |
+| object: `{width?: number, height?: number}` |
+
+---
+
+### `textShadowRadius`
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `textTransform`
+
+| Type                                                         | Default  |
+| ------------------------------------------------------------ | -------- |
+| enum(`'none'`, `'uppercase'`, `'lowercase'`, `'capitalize'`) | `'none'` |
+
+---
+
+### `verticalAlign` <div className="label android">Android</div>
+
+| Type                                            | Default  |
+| ----------------------------------------------- | -------- |
+| enum(`'auto'`, `'top'`, `'bottom'`, `'middle'`) | `'auto'` |
+
+---
+
+### `writingDirection` <div className="label ios">iOS</div>
+
+| Type                             | Default  |
+| -------------------------------- | -------- |
+| enum(`'auto'`, `'ltr'`, `'rtl'`) | `'auto'` |
+
+---
+
+### `userSelect`
+
+It allows the user to select text and to use the native copy and paste functionality. Has precedence over the `selectable` prop.
+
+| Type                                                     | Default |
+| -------------------------------------------------------- | ------- |
+| enum(`'auto'`, `'text'`, `'none'`, `'contain'`, `'all'`) | `none`  |
diff --git a/website/versioned_docs/version-0.81/text.md b/website/versioned_docs/version-0.81/text.md
index 45fdd2bb8a6..29bf33e79cf 100644
--- a/website/versioned_docs/version-0.81/text.md
+++ b/website/versioned_docs/version-0.81/text.md
@@ -1,771 +1,770 @@
----
-id: text
-title: Text
----
-
-A React component for displaying text.
-
-`Text` supports nesting, styling, and touch handling.
-
-In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines:
-
-```SnackPlayer name=Text%20Function%20Component%20Example
-import React, {useState} from 'react';
-import {Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const TextInANest = () => {
-  const [titleText, setTitleText] = useState("Bird's Nest");
-  const bodyText = 'This is not really a bird nest.';
-
-  const onPressTitle = () => {
-    setTitleText("Bird's Nest [pressed]");
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.baseText}>
-          <Text style={styles.titleText} onPress={onPressTitle}>
-            {titleText}
-            {'\n'}
-            {'\n'}
-          </Text>
-          <Text numberOfLines={5}>{bodyText}</Text>
-        </Text>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  baseText: {
-    fontFamily: 'Cochin',
-  },
-  titleText: {
-    fontSize: 20,
-    fontWeight: 'bold',
-  },
-});
-
-export default TextInANest;
-```
-
-## Nested text
-
-Both Android and iOS allow you to display formatted text by annotating ranges of a string with specific formatting like bold or colored text (`NSAttributedString` on iOS, `SpannableString` on Android). In practice, this is very tedious. For React Native, we decided to use the web paradigm for this, where you can nest text to achieve the same effect.
-
-```SnackPlayer name=Nested%20Text%20Example
-import React from 'react';
-import {Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const BoldAndBeautiful = () => (
-  <SafeAreaProvider>
-    <SafeAreaView style={styles.container}>
-      <Text style={styles.baseText}>
-        I am bold
-        <Text style={styles.innerText}> and red</Text>
-      </Text>
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  baseText: {
-    fontWeight: 'bold',
-  },
-  innerText: {
-    color: 'red',
-  },
-});
-
-export default BoldAndBeautiful;
-```
-
-Behind the scenes, React Native converts this to a flat `NSAttributedString` or `SpannableString` that contains the following information:
-
-```
-"I am bold and red"
-0-9: bold
-9-17: bold, red
-```
-
-## 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.
-
-```tsx
-<Text>
-  <Text>First part and </Text>
-  <Text>second part</Text>
-</Text>
-// Text container: the text will be inline, if the space allows it
-// |First part and second part|
-
-// otherwise, the text will flow as if it was one
-// |First part |
-// |and second |
-// |part       |
-
-<View>
-  <Text>First part and </Text>
-  <Text>second part</Text>
-</View>
-// View container: each text is its own block
-// |First part and|
-// |second part   |
-
-// otherwise, the text will flow in its own block
-// |First part |
-// |and        |
-// |second part|
-```
-
-## Limited Style Inheritance
-
-On the web, the usual way to set a font family and size for the entire document is to take advantage of inherited CSS properties like so:
-
-```css
-html {
-  font-family:
-    'lucida grande', tahoma, verdana, arial, sans-serif;
-  font-size: 11px;
-  color: #141823;
-}
-```
-
-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>`.
-
-```tsx
-// BAD: will raise exception, can't have a text node as child of a <View>
-<View>
-  Some text
-</View>
-
-// GOOD
-<View>
-  <Text>
-    Some text
-  </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.
-
-```tsx
-<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:
-
-```tsx
-const MyAppHeaderText = ({children}) => {
-  return (
-    <MyAppText>
-      <Text style={{fontSize: 20}}>{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.
-
-```tsx
-<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:
-
-- (Developer) React components are designed with strong isolation in mind: You should be able to drop a component anywhere in your application, trusting that as long as the props are the same, it will look and behave the same way. Text properties that could inherit from outside of the props would break this isolation.
-
-- (Implementor) The implementation of React Native is also simplified. We do not need to have a `fontFamily` field on every single element, and we do not need to potentially traverse the tree up to the root every time we display a text node. The style inheritance is only encoded inside of the native Text component and doesn't leak to other components or the system itself.
-
----
-
-# Reference
-
-## Props
-
-### `accessibilityHint`
-
-An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityLanguage` <div className="label ios">iOS</div>
-
-A value indicating which language should be used by the screen reader when the user interacts with the element. It should follow the [BCP 47 specification](https://www.rfc-editor.org/info/bcp47).
-
-See the [iOS `accessibilityLanguage` doc](https://developer.apple.com/documentation/objectivec/nsobject/1615192-accessibilitylanguage) for more information.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityLabel`
-
-Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the `Text` nodes separated by space.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityRole`
-
-Tells the screen reader to treat the currently focused on element as having a specific role.
-
-On iOS, these roles map to corresponding Accessibility Traits. Image button has the same functionality as if the trait was set to both 'image' and 'button'. See the [Accessibility guide](accessibility.md#accessibilitytraits-ios) for more information.
-
-On Android, these roles have similar functionality on TalkBack as adding Accessibility Traits does on Voiceover in iOS
-
-| Type                                                 |
-| ---------------------------------------------------- |
-| [AccessibilityRole](accessibility#accessibilityrole) |
-
----
-
-### `accessibilityState`
-
-Tells the screen reader to treat the currently focused on element as being in a specific state.
-
-You can provide one state, no state, or multiple states. The states must be passed in through an object, e.g. `{selected: true, disabled: true}`.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| [AccessibilityState](accessibility#accessibilitystate) |
-
----
-
-### `accessibilityActions`
-
-Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The `accessibilityActions` property should contain a list of action objects. Each action object should contain the field name and label.
-
-See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
-
-| Type  | Required |
-| ----- | -------- |
-| array | No       |
-
----
-
-### `onAccessibilityAction`
-
-Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.
-
-See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
-
-| Type     | Required |
-| -------- | -------- |
-| function | No       |
-
----
-
-### `accessible`
-
-When set to `true`, indicates that the view is an accessibility element.
-
-See the [Accessibility guide](accessibility#accessible-ios-android) for more information.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `true`  |
-
----
-
-### `adjustsFontSizeToFit`
-
-Specifies whether fonts should be scaled down automatically to fit given style constraints.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
----
-
-### `allowFontScaling`
-
-Specifies whether fonts should scale to respect Text Size accessibility settings.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `true`  |
-
----
-
-### `android_hyphenationFrequency` <div className="label android">Android</div>
-
-Sets the frequency of automatic hyphenation to use when determining word breaks on Android API Level 23+.
-
-| Type                                | Default  |
-| ----------------------------------- | -------- |
-| enum(`'none'`, `'normal'`,`'full'`) | `'none'` |
-
----
-
-### `aria-busy`
-
-Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-checked`
-
-Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
-| Type             | Default |
-| ---------------- | ------- |
-| boolean, 'mixed' | false   |
-
----
-
-### `aria-disabled`
-
-Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-expanded`
-
-Indicates whether an expandable element is currently expanded or collapsed.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-label`
-
-Defines a string value that labels an interactive element.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `aria-selected`
-
-Indicates whether a selectable element is currently selected or not.
-
-| Type    |
-| ------- |
-| boolean |
-
-### `dataDetectorType` <div className="label android">Android</div>
-
-Determines the types of data converted to clickable URLs in the text element. By default, no data types are detected.
-
-You can provide only one type.
-
-| Type                                                          | Default  |
-| ------------------------------------------------------------- | -------- |
-| enum(`'phoneNumber'`, `'link'`, `'email'`, `'none'`, `'all'`) | `'none'` |
-
----
-
-### `disabled` <div className="label android">Android</div>
-
-Specifies the disabled state of the text view for testing purposes.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `dynamicTypeRamp` <div className="label ios">iOS</div>
-
-The [Dynamic Type](https://developer.apple.com/documentation/uikit/uifont/scaling_fonts_automatically) ramp to apply to this element on iOS.
-
-| Type                                                                                                                                                     | Default  |
-| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
-| enum(`'caption2'`, `'caption1'`, `'footnote'`, `'subheadline'`, `'callout'`, `'body'`, `'headline'`, `'title3'`, `'title2'`, `'title1'`, `'largeTitle'`) | `'body'` |
-
----
-
-### `ellipsizeMode`
-
-When `numberOfLines` is set, this prop defines how the text will be truncated. `numberOfLines` must be set in conjunction with this prop.
-
-This can be one of the following values:
-
-- `head` - The line is displayed so that the end fits in the container and the missing text at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz"
-- `middle` - The line is displayed so that the beginning and end fit in the container and the missing text in the middle is indicated by an ellipsis glyph. "ab...yz"
-- `tail` - The line is displayed so that the beginning fits in the container and the missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..."
-- `clip` - Lines are not drawn past the edge of the text container.
-
-> On Android, when `numberOfLines` is set to a value higher than `1`, only `tail` value will work correctly.
-
-| Type                                           | Default |
-| ---------------------------------------------- | ------- |
-| enum(`'head'`, `'middle'`, `'tail'`, `'clip'`) | `tail`  |
-
----
-
-### `id`
-
-Used to locate this view from native code. Has precedence over `nativeID` prop.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `maxFontSizeMultiplier`
-
-Specifies the largest possible scale a font can reach when `allowFontScaling` is enabled. Possible values:
-
-- `null/undefined`: inherit from the parent node or the global default (0)
-- `0`: no max, ignore parent/global default
-- `>= 1`: sets the `maxFontSizeMultiplier` of this node to this value
-
-| Type   | Default     |
-| ------ | ----------- |
-| number | `undefined` |
-
----
-
-### `minimumFontScale`
-
-Specifies the smallest possible scale a font can reach when `adjustsFontSizeToFit` is enabled. (values 0.01-1.0).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nativeID`
-
-Used to locate this view from native code.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `numberOfLines`
-
-Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. Setting this property to `0` will result in unsetting this value, which means that no lines restriction will be applied.
-
-This prop is commonly used with `ellipsizeMode`.
-
-| Type   | Default |
-| ------ | ------- |
-| number | `0`     |
-
----
-
-### `onLayout`
-
-Invoked on mount and on layout changes.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
-
----
-
-### `onLongPress`
-
-This function is called on long press.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onMoveShouldSetResponder`
-
-Does this view want to "claim" touch responsiveness? This is called for every touch move on the `View` when it is not the responder.
-
-| Type                                                      |
-| --------------------------------------------------------- |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
-
----
-
-### `onPress`
-
-Function called on user press, triggered after `onPressOut`.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onPressIn`
-
-Called immediately when a touch is engaged, before `onPressOut` and `onPress`.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onPressOut`
-
-Called when a touch is released.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onResponderGrant`
-
-The View is now responding to touch events. This is the time to highlight and show the user what is happening.
-
-On Android, return true from this callback to prevent any other native components from becoming responder until this responder terminates.
-
-| Type                                                              |
-| ----------------------------------------------------------------- |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void ｜ boolean` |
-
----
-
-### `onResponderMove`
-
-The user is moving their finger.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onResponderRelease`
-
-Fired at the end of the touch.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onResponderTerminate`
-
-The responder has been taken from the `View`. Might be taken by other views after a call to `onResponderTerminationRequest`, or might be taken by the OS without asking (e.g., happens with control center/ notification center on iOS)
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onResponderTerminationRequest`
-
-Some other `View` wants to become a responder and is asking this `View` to release its responder. Returning `true` allows its release.
-
-| Type                                                      |
-| --------------------------------------------------------- |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
-
----
-
-### `onStartShouldSetResponderCapture`
-
-If a parent `View` wants to prevent a child `View` from becoming a responder on a touch start, it should have this handler which returns `true`.
-
-| Type                                                      |
-| --------------------------------------------------------- |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
-
----
-
-### `onTextLayout`
-
-Invoked on Text layout change.
-
-| Type                                                 |
-| ---------------------------------------------------- |
-| ([`TextLayoutEvent`](text#textlayoutevent)) => mixed |
-
----
-
-### `pressRetentionOffset`
-
-When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations.
-
-| Type                 |
-| -------------------- |
-| [Rect](rect), number |
-
----
-
-### `role`
-
-`role` communicates the purpose of a component to the user of an assistive technology. Has precedence over the [`accessibilityRole`](text#accessibilityrole) prop.
-
-| Type                       |
-| -------------------------- |
-| [Role](accessibility#role) |
-
----
-
-### `selectable`
-
-Lets the user select text, to use the native copy and paste functionality.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
----
-
-### `selectionColor` <div className="label android">Android</div>
-
-The highlight color of the text.
-
-| Type            |
-| --------------- |
-| [color](colors) |
-
----
-
-### `style`
-
-| Type                                                                 |
-| -------------------------------------------------------------------- |
-| [Text Style](text-style-props), [View Style Props](view-style-props) |
-
----
-
-### `suppressHighlighting` <div className="label ios">iOS</div>
-
-When `true`, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
----
-
-### `testID`
-
-Used to locate this view in end-to-end tests.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `textBreakStrategy` <div className="label android">Android</div>
-
-Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced`.
-
-| Type                                            | Default       |
-| ----------------------------------------------- | ------------- |
-| enum(`'simple'`, `'highQuality'`, `'balanced'`) | `highQuality` |
-
----
-
-### `lineBreakStrategyIOS` <div className="label ios">iOS</div>
-
-Set line break strategy on iOS 14+. Possible values are `none`, `standard`, `hangul-word` and `push-out`.
-
-| Type                                                        | Default  |
-| ----------------------------------------------------------- | -------- |
-| enum(`'none'`, `'standard'`, `'hangul-word'`, `'push-out'`) | `'none'` |
-
-## Type Definitions
-
-### TextLayout
-
-`TextLayout` object is a part of [`TextLayoutEvent`](text#textlayoutevent) callback and contains the measurement data for `Text` line.
-
-#### Example
-
-```js
-{
-    capHeight: 10.496,
-    ascender: 14.624,
-    descender: 4,
-    width: 28.224,
-    height: 18.624,
-    xHeight: 6.048,
-    x: 0,
-    y: 0
-}
-```
-
-#### Properties
-
-| Name      | Type   | Optional | Description                                                         |
-| --------- | ------ | -------- | ------------------------------------------------------------------- |
-| ascender  | number | No       | The line ascender height after the text layout changes.             |
-| capHeight | number | No       | Height of capital letter above the baseline.                        |
-| descender | number | No       | The line descender height after the text layout changes.            |
-| height    | number | No       | Height of the line after the text layout changes.                   |
-| width     | number | No       | Width of the line after the text layout changes.                    |
-| x         | number | No       | Line X coordinate inside the Text component.                        |
-| xHeight   | number | No       | Distance between the baseline and median of the line (corpus size). |
-| y         | number | No       | Line Y coordinate inside the Text component.                        |
-
-### TextLayoutEvent
-
-`TextLayoutEvent` object is returned in the callback as a result of a component layout change. It contains a key called `lines` with a value which is an array containing [`TextLayout`](text#textlayout) object corresponded to every rendered text line.
-
-#### Example
-
-```js
-{
-  lines: [
-    TextLayout,
-    TextLayout,
-    // ...
-  ];
-  target: 1127;
-}
-```
-
-#### Properties
-
-| Name   | Type                                    | Optional | Description                                           |
-| ------ | --------------------------------------- | -------- | ----------------------------------------------------- |
-| lines  | array of [TextLayout](text#textlayout)s | No       | Provides the TextLayout data for every rendered line. |
-| target | number                                  | No       | The node id of the element.                           |
+---
+id: text
+title: Text
+---
+
+A React component for displaying text.
+
+`Text` supports nesting, styling, and touch handling.
+
+In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines:
+
+```SnackPlayer name=Text%20Function%20Component%20Example
+import {useState} from 'react';
+import {Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const TextInANest = () => {
+  const [titleText, setTitleText] = useState("Bird's Nest");
+  const bodyText = 'This is not really a bird nest.';
+
+  const onPressTitle = () => {
+    setTitleText("Bird's Nest [pressed]");
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.baseText}>
+          <Text style={styles.titleText} onPress={onPressTitle}>
+            {titleText}
+            {'\n'}
+            {'\n'}
+          </Text>
+          <Text numberOfLines={5}>{bodyText}</Text>
+        </Text>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  baseText: {
+    fontFamily: 'Cochin',
+  },
+  titleText: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+});
+
+export default TextInANest;
+```
+
+## Nested text
+
+Both Android and iOS allow you to display formatted text by annotating ranges of a string with specific formatting like bold or colored text (`NSAttributedString` on iOS, `SpannableString` on Android). In practice, this is very tedious. For React Native, we decided to use the web paradigm for this, where you can nest text to achieve the same effect.
+
+```SnackPlayer name=Nested%20Text%20Example
+import {Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const BoldAndBeautiful = () => (
+  <SafeAreaProvider>
+    <SafeAreaView style={styles.container}>
+      <Text style={styles.baseText}>
+        I am bold
+        <Text style={styles.innerText}> and red</Text>
+      </Text>
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  baseText: {
+    fontWeight: 'bold',
+  },
+  innerText: {
+    color: 'red',
+  },
+});
+
+export default BoldAndBeautiful;
+```
+
+Behind the scenes, React Native converts this to a flat `NSAttributedString` or `SpannableString` that contains the following information:
+
+```
+"I am bold and red"
+0-9: bold
+9-17: bold, red
+```
+
+## 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.
+
+```tsx
+<Text>
+  <Text>First part and </Text>
+  <Text>second part</Text>
+</Text>
+// Text container: the text will be inline, if the space allows it
+// |First part and second part|
+
+// otherwise, the text will flow as if it was one
+// |First part |
+// |and second |
+// |part       |
+
+<View>
+  <Text>First part and </Text>
+  <Text>second part</Text>
+</View>
+// View container: each text is its own block
+// |First part and|
+// |second part   |
+
+// otherwise, the text will flow in its own block
+// |First part |
+// |and        |
+// |second part|
+```
+
+## Limited Style Inheritance
+
+On the web, the usual way to set a font family and size for the entire document is to take advantage of inherited CSS properties like so:
+
+```css
+html {
+  font-family:
+    'lucida grande', tahoma, verdana, arial, sans-serif;
+  font-size: 11px;
+  color: #141823;
+}
+```
+
+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>`.
+
+```tsx
+// BAD: will raise exception, can't have a text node as child of a <View>
+<View>
+  Some text
+</View>
+
+// GOOD
+<View>
+  <Text>
+    Some text
+  </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.
+
+```tsx
+<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:
+
+```tsx
+const MyAppHeaderText = ({children}) => {
+  return (
+    <MyAppText>
+      <Text style={{fontSize: 20}}>{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.
+
+```tsx
+<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:
+
+- (Developer) React components are designed with strong isolation in mind: You should be able to drop a component anywhere in your application, trusting that as long as the props are the same, it will look and behave the same way. Text properties that could inherit from outside of the props would break this isolation.
+
+- (Implementor) The implementation of React Native is also simplified. We do not need to have a `fontFamily` field on every single element, and we do not need to potentially traverse the tree up to the root every time we display a text node. The style inheritance is only encoded inside of the native Text component and doesn't leak to other components or the system itself.
+
+---
+
+# Reference
+
+## Props
+
+### `accessibilityHint`
+
+An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityLanguage` <div className="label ios">iOS</div>
+
+A value indicating which language should be used by the screen reader when the user interacts with the element. It should follow the [BCP 47 specification](https://www.rfc-editor.org/info/bcp47).
+
+See the [iOS `accessibilityLanguage` doc](https://developer.apple.com/documentation/objectivec/nsobject/1615192-accessibilitylanguage) for more information.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityLabel`
+
+Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the `Text` nodes separated by space.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityRole`
+
+Tells the screen reader to treat the currently focused on element as having a specific role.
+
+On iOS, these roles map to corresponding Accessibility Traits. Image button has the same functionality as if the trait was set to both 'image' and 'button'. See the [Accessibility guide](accessibility.md#accessibilitytraits-ios) for more information.
+
+On Android, these roles have similar functionality on TalkBack as adding Accessibility Traits does on Voiceover in iOS
+
+| Type                                                 |
+| ---------------------------------------------------- |
+| [AccessibilityRole](accessibility#accessibilityrole) |
+
+---
+
+### `accessibilityState`
+
+Tells the screen reader to treat the currently focused on element as being in a specific state.
+
+You can provide one state, no state, or multiple states. The states must be passed in through an object, e.g. `{selected: true, disabled: true}`.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| [AccessibilityState](accessibility#accessibilitystate) |
+
+---
+
+### `accessibilityActions`
+
+Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The `accessibilityActions` property should contain a list of action objects. Each action object should contain the field name and label.
+
+See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
+
+| Type  | Required |
+| ----- | -------- |
+| array | No       |
+
+---
+
+### `onAccessibilityAction`
+
+Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.
+
+See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `accessible`
+
+When set to `true`, indicates that the view is an accessibility element.
+
+See the [Accessibility guide](accessibility#accessible-ios-android) for more information.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `true`  |
+
+---
+
+### `adjustsFontSizeToFit`
+
+Specifies whether fonts should be scaled down automatically to fit given style constraints.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+---
+
+### `allowFontScaling`
+
+Specifies whether fonts should scale to respect Text Size accessibility settings.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `true`  |
+
+---
+
+### `android_hyphenationFrequency` <div className="label android">Android</div>
+
+Sets the frequency of automatic hyphenation to use when determining word breaks on Android API Level 23+.
+
+| Type                                | Default  |
+| ----------------------------------- | -------- |
+| enum(`'none'`, `'normal'`,`'full'`) | `'none'` |
+
+---
+
+### `aria-busy`
+
+Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-checked`
+
+Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
+
+| Type             | Default |
+| ---------------- | ------- |
+| boolean, 'mixed' | false   |
+
+---
+
+### `aria-disabled`
+
+Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-expanded`
+
+Indicates whether an expandable element is currently expanded or collapsed.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-label`
+
+Defines a string value that labels an interactive element.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `aria-selected`
+
+Indicates whether a selectable element is currently selected or not.
+
+| Type    |
+| ------- |
+| boolean |
+
+### `dataDetectorType` <div className="label android">Android</div>
+
+Determines the types of data converted to clickable URLs in the text element. By default, no data types are detected.
+
+You can provide only one type.
+
+| Type                                                          | Default  |
+| ------------------------------------------------------------- | -------- |
+| enum(`'phoneNumber'`, `'link'`, `'email'`, `'none'`, `'all'`) | `'none'` |
+
+---
+
+### `disabled` <div className="label android">Android</div>
+
+Specifies the disabled state of the text view for testing purposes.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `dynamicTypeRamp` <div className="label ios">iOS</div>
+
+The [Dynamic Type](https://developer.apple.com/documentation/uikit/uifont/scaling_fonts_automatically) ramp to apply to this element on iOS.
+
+| Type                                                                                                                                                     | Default  |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
+| enum(`'caption2'`, `'caption1'`, `'footnote'`, `'subheadline'`, `'callout'`, `'body'`, `'headline'`, `'title3'`, `'title2'`, `'title1'`, `'largeTitle'`) | `'body'` |
+
+---
+
+### `ellipsizeMode`
+
+When `numberOfLines` is set, this prop defines how the text will be truncated. `numberOfLines` must be set in conjunction with this prop.
+
+This can be one of the following values:
+
+- `head` - The line is displayed so that the end fits in the container and the missing text at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz"
+- `middle` - The line is displayed so that the beginning and end fit in the container and the missing text in the middle is indicated by an ellipsis glyph. "ab...yz"
+- `tail` - The line is displayed so that the beginning fits in the container and the missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..."
+- `clip` - Lines are not drawn past the edge of the text container.
+
+> On Android, when `numberOfLines` is set to a value higher than `1`, only `tail` value will work correctly.
+
+| Type                                           | Default |
+| ---------------------------------------------- | ------- |
+| enum(`'head'`, `'middle'`, `'tail'`, `'clip'`) | `tail`  |
+
+---
+
+### `id`
+
+Used to locate this view from native code. Has precedence over `nativeID` prop.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `maxFontSizeMultiplier`
+
+Specifies the largest possible scale a font can reach when `allowFontScaling` is enabled. Possible values:
+
+- `null/undefined`: inherit from the parent node or the global default (0)
+- `0`: no max, ignore parent/global default
+- `>= 1`: sets the `maxFontSizeMultiplier` of this node to this value
+
+| Type   | Default     |
+| ------ | ----------- |
+| number | `undefined` |
+
+---
+
+### `minimumFontScale`
+
+Specifies the smallest possible scale a font can reach when `adjustsFontSizeToFit` is enabled. (values 0.01-1.0).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nativeID`
+
+Used to locate this view from native code.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `numberOfLines`
+
+Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. Setting this property to `0` will result in unsetting this value, which means that no lines restriction will be applied.
+
+This prop is commonly used with `ellipsizeMode`.
+
+| Type   | Default |
+| ------ | ------- |
+| number | `0`     |
+
+---
+
+### `onLayout`
+
+Invoked on mount and on layout changes.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
+
+---
+
+### `onLongPress`
+
+This function is called on long press.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onMoveShouldSetResponder`
+
+Does this view want to "claim" touch responsiveness? This is called for every touch move on the `View` when it is not the responder.
+
+| Type                                                      |
+| --------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
+
+---
+
+### `onPress`
+
+Function called on user press, triggered after `onPressOut`.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onPressIn`
+
+Called immediately when a touch is engaged, before `onPressOut` and `onPress`.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onPressOut`
+
+Called when a touch is released.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onResponderGrant`
+
+The View is now responding to touch events. This is the time to highlight and show the user what is happening.
+
+On Android, return true from this callback to prevent any other native components from becoming responder until this responder terminates.
+
+| Type                                                              |
+| ----------------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void ｜ boolean` |
+
+---
+
+### `onResponderMove`
+
+The user is moving their finger.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onResponderRelease`
+
+Fired at the end of the touch.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onResponderTerminate`
+
+The responder has been taken from the `View`. Might be taken by other views after a call to `onResponderTerminationRequest`, or might be taken by the OS without asking (e.g., happens with control center/ notification center on iOS)
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onResponderTerminationRequest`
+
+Some other `View` wants to become a responder and is asking this `View` to release its responder. Returning `true` allows its release.
+
+| Type                                                      |
+| --------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
+
+---
+
+### `onStartShouldSetResponderCapture`
+
+If a parent `View` wants to prevent a child `View` from becoming a responder on a touch start, it should have this handler which returns `true`.
+
+| Type                                                      |
+| --------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
+
+---
+
+### `onTextLayout`
+
+Invoked on Text layout change.
+
+| Type                                                 |
+| ---------------------------------------------------- |
+| ([`TextLayoutEvent`](text#textlayoutevent)) => mixed |
+
+---
+
+### `pressRetentionOffset`
+
+When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations.
+
+| Type                 |
+| -------------------- |
+| [Rect](rect), number |
+
+---
+
+### `role`
+
+`role` communicates the purpose of a component to the user of an assistive technology. Has precedence over the [`accessibilityRole`](text#accessibilityrole) prop.
+
+| Type                       |
+| -------------------------- |
+| [Role](accessibility#role) |
+
+---
+
+### `selectable`
+
+Lets the user select text, to use the native copy and paste functionality.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+---
+
+### `selectionColor` <div className="label android">Android</div>
+
+The highlight color of the text.
+
+| Type            |
+| --------------- |
+| [color](colors) |
+
+---
+
+### `style`
+
+| Type                                                                 |
+| -------------------------------------------------------------------- |
+| [Text Style](text-style-props), [View Style Props](view-style-props) |
+
+---
+
+### `suppressHighlighting` <div className="label ios">iOS</div>
+
+When `true`, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+---
+
+### `testID`
+
+Used to locate this view in end-to-end tests.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `textBreakStrategy` <div className="label android">Android</div>
+
+Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced`.
+
+| Type                                            | Default       |
+| ----------------------------------------------- | ------------- |
+| enum(`'simple'`, `'highQuality'`, `'balanced'`) | `highQuality` |
+
+---
+
+### `lineBreakStrategyIOS` <div className="label ios">iOS</div>
+
+Set line break strategy on iOS 14+. Possible values are `none`, `standard`, `hangul-word` and `push-out`.
+
+| Type                                                        | Default  |
+| ----------------------------------------------------------- | -------- |
+| enum(`'none'`, `'standard'`, `'hangul-word'`, `'push-out'`) | `'none'` |
+
+## Type Definitions
+
+### TextLayout
+
+`TextLayout` object is a part of [`TextLayoutEvent`](text#textlayoutevent) callback and contains the measurement data for `Text` line.
+
+#### Example
+
+```js
+{
+    capHeight: 10.496,
+    ascender: 14.624,
+    descender: 4,
+    width: 28.224,
+    height: 18.624,
+    xHeight: 6.048,
+    x: 0,
+    y: 0
+}
+```
+
+#### Properties
+
+| Name      | Type   | Optional | Description                                                         |
+| --------- | ------ | -------- | ------------------------------------------------------------------- |
+| ascender  | number | No       | The line ascender height after the text layout changes.             |
+| capHeight | number | No       | Height of capital letter above the baseline.                        |
+| descender | number | No       | The line descender height after the text layout changes.            |
+| height    | number | No       | Height of the line after the text layout changes.                   |
+| width     | number | No       | Width of the line after the text layout changes.                    |
+| x         | number | No       | Line X coordinate inside the Text component.                        |
+| xHeight   | number | No       | Distance between the baseline and median of the line (corpus size). |
+| y         | number | No       | Line Y coordinate inside the Text component.                        |
+
+### TextLayoutEvent
+
+`TextLayoutEvent` object is returned in the callback as a result of a component layout change. It contains a key called `lines` with a value which is an array containing [`TextLayout`](text#textlayout) object corresponded to every rendered text line.
+
+#### Example
+
+```js
+{
+  lines: [
+    TextLayout,
+    TextLayout,
+    // ...
+  ];
+  target: 1127;
+}
+```
+
+#### Properties
+
+| Name   | Type                                    | Optional | Description                                           |
+| ------ | --------------------------------------- | -------- | ----------------------------------------------------- |
+| lines  | array of [TextLayout](text#textlayout)s | No       | Provides the TextLayout data for every rendered line. |
+| target | number                                  | No       | The node id of the element.                           |
diff --git a/website/versioned_docs/version-0.81/textinput.md b/website/versioned_docs/version-0.81/textinput.md
index 97dfad51faf..bf24e7d8c4b 100644
--- a/website/versioned_docs/version-0.81/textinput.md
+++ b/website/versioned_docs/version-0.81/textinput.md
@@ -1,1140 +1,1140 @@
----
-id: textinput
-title: TextInput
----
-
-A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.
-
-The most basic use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. A minimal example:
-
-```SnackPlayer name=TextInput%20Example
-import React from 'react';
-import {StyleSheet, TextInput} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const TextInputExample = () => {
-  const [text, onChangeText] = React.useState('Useless Text');
-  const [number, onChangeNumber] = React.useState('');
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView>
-        <TextInput
-          style={styles.input}
-          onChangeText={onChangeText}
-          value={text}
-        />
-        <TextInput
-          style={styles.input}
-          onChangeText={onChangeNumber}
-          value={number}
-          placeholder="useless placeholder"
-          keyboardType="numeric"
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  input: {
-    height: 40,
-    margin: 12,
-    borderWidth: 1,
-    padding: 10,
-  },
-});
-
-export default TextInputExample;
-```
-
-Two methods exposed via the native element are `.focus()` and `.blur()` that will focus or blur the TextInput programmatically.
-
-Note that some props are only available with `multiline={true/false}`. Additionally, border styles that apply to only one side of the element (e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if `multiline=true`. To achieve the same effect, you can wrap your `TextInput` in a `View`:
-
-```SnackPlayer name=Multiline%20TextInput%20Example
-import React from 'react';
-import {TextInput, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const MultilineTextInputExample = () => {
-  const [value, onChangeText] = React.useState('Useless Multiline Placeholder');
-
-  // If you type something in the text box that is a color,
-  // the background will change to that color.
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView
-        style={{
-          flex: 1,
-          backgroundColor: value.toLowerCase(),
-        }}>
-        <TextInput
-          editable
-          multiline
-          numberOfLines={4}
-          maxLength={40}
-          onChangeText={text => onChangeText(text)}
-          value={value}
-          style={styles.textInput}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  textInput: {
-    padding: 10,
-    borderColor: '#000',
-    borderWidth: 1,
-    margin: 12,
-  },
-});
-
-export default MultilineTextInputExample;
-```
-
-`TextInput` has a border at the bottom of its view by default. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this are to either not set height explicitly, in which case the system will take care of displaying the border in the correct position, or to not display the border by setting `underlineColorAndroid` to transparent.
-
-Note that on Android performing text selection in an input can change the app's activity `windowSoftInputMode` param to `adjustResize`. This may cause issues with components that have position: 'absolute' while the keyboard is active. To avoid this behavior either specify `windowSoftInputMode` in AndroidManifest.xml ( https://developer.android.com/guide/topics/manifest/activity-element.html ) or control this param programmatically with native code.
-
----
-
-# Reference
-
-## Props
-
-### [View Props](view.md#props)
-
-Inherits [View Props](view.md#props).
-
----
-
-### `allowFontScaling`
-
-Specifies whether fonts should scale to respect Text Size accessibility settings. The default is `true`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `autoCapitalize`
-
-Tells `TextInput` to automatically capitalize certain characters. This property is not supported by some keyboard types such as `name-phone-pad`.
-
-- `characters`: all characters.
-- `words`: first letter of each word.
-- `sentences`: first letter of each sentence (_default_).
-- `none`: don't auto capitalize anything.
-
-| Type                                             |
-| ------------------------------------------------ |
-| enum('none', 'sentences', 'words', 'characters') |
-
----
-
-### `autoComplete`
-
-Specifies autocomplete hints for the system, so it can provide autofill. On Android, the system will always attempt to offer autofill by using heuristics to identify the type of content. To disable autocomplete, set `autoComplete` to `off`.
-
-The following values work across platforms:
-
-- `additional-name`
-- `address-line1`
-- `address-line2`
-- `birthdate-day` (iOS 17+)
-- `birthdate-full` (iOS 17+)
-- `birthdate-month` (iOS 17+)
-- `birthdate-year` (iOS 17+)
-- `cc-csc` (iOS 17+)
-- `cc-exp` (iOS 17+)
-- `cc-exp-day` (iOS 17+)
-- `cc-exp-month` (iOS 17+)
-- `cc-exp-year` (iOS 17+)
-- `cc-number`
-- `country`
-- `current-password`
-- `email`
-- `family-name`
-- `given-name`
-- `honorific-prefix`
-- `honorific-suffix`
-- `name`
-- `new-password`
-- `off`
-- `one-time-code`
-- `postal-code`
-- `street-address`
-- `tel`
-- `username`
-
-<div className="label basic ios">iOS</div>
-
-The following values work on iOS only:
-
-- `cc-family-name` (iOS 17+)
-- `cc-given-name` (iOS 17+)
-- `cc-middle-name` (iOS 17+)
-- `cc-name` (iOS 17+)
-- `cc-type` (iOS 17+)
-- `nickname`
-- `organization`
-- `organization-title`
-- `url`
-
-<div className="label basic android">Android</div>
-
-The following values work on Android only:
-
-- `gender`
-- `name-family`
-- `name-given`
-- `name-middle`
-- `name-middle-initial`
-- `name-prefix`
-- `name-suffix`
-- `password`
-- `password-new`
-- `postal-address`
-- `postal-address-country`
-- `postal-address-extended`
-- `postal-address-extended-postal-code`
-- `postal-address-locality`
-- `postal-address-region`
-- `sms-otp`
-- `tel-country-code`
-- `tel-device`
-- `tel-national`
-- `username-new`
-
-| Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| enum('additional-name', 'address-line1', 'address-line2', 'birthdate-day', 'birthdate-full', 'birthdate-month', 'birthdate-year', 'cc-csc', 'cc-exp', 'cc-exp-day', 'cc-exp-month', 'cc-exp-year', 'cc-number', 'country', 'current-password', 'email', 'family-name', 'given-name', 'honorific-prefix', 'honorific-suffix', 'name', 'new-password', 'off', 'one-time-code', 'postal-code', 'street-address', 'tel', 'username', 'cc-family-name', 'cc-given-name', 'cc-middle-name', 'cc-name', 'cc-type', 'nickname', 'organization', 'organization-title', 'url', 'gender', 'name-family', 'name-given', 'name-middle', 'name-middle-initial', 'name-prefix', 'name-suffix', 'password', 'password-new', 'postal-address', 'postal-address-country', 'postal-address-extended', 'postal-address-extended-postal-code', 'postal-address-locality', 'postal-address-region', 'sms-otp', 'tel-country-code', 'tel-device', 'tel-national', 'username-new') |
-
----
-
-### `autoCorrect`
-
-If `false`, disables auto-correct. The default value is `true`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `autoFocus`
-
-If `true`, focuses the input. The default value is `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `blurOnSubmit`
-
-> **Deprecated.** Note that `submitBehavior` now takes the place of `blurOnSubmit` and will override any behavior defined by `blurOnSubmit`. See [submitBehavior](textinput#submitbehavior)
-
-If `true`, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting `blurOnSubmit` to `true` means that pressing return will blur the field and trigger the `onSubmitEditing` event instead of inserting a newline into the field.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `caretHidden`
-
-If `true`, caret is hidden. The default value is `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `clearButtonMode` <div className="label ios">iOS</div>
-
-When the clear button should appear on the right side of the text view. This property is supported only for single-line TextInput component. The default value is `never`.
-
-| Type                                                       |
-| ---------------------------------------------------------- |
-| enum('never', 'while-editing', 'unless-editing', 'always') |
-
----
-
-### `clearTextOnFocus` <div className="label ios">iOS</div>
-
-If `true`, clears the text field automatically when editing begins.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `contextMenuHidden`
-
-If `true`, context menu is hidden. The default value is `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `dataDetectorTypes` <div className="label ios">iOS</div>
-
-Determines the types of data converted to clickable URLs in the text input. Only valid if `multiline={true}` and `editable={false}`. By default no data types are detected.
-
-You can provide one type or an array of many types.
-
-Possible values for `dataDetectorTypes` are:
-
-- `'phoneNumber'`
-- `'link'`
-- `'address'`
-- `'calendarEvent'`
-- `'none'`
-- `'all'`
-
-| Type                                                                                                                                                     |
-| -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), ,array of enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all') |
-
----
-
-### `defaultValue`
-
-Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `disableKeyboardShortcuts` <div className="label ios">iOS</div>
-
-If `true`, the keyboard shortcuts (undo/redo and copy buttons) are disabled.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `cursorColor` <div className="label android">Android</div>
-
-When provided it will set the color of the cursor (or "caret") in the component. Unlike the behavior of `selectionColor` the cursor color will be set independently from the color of the text selection box.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `disableFullscreenUI` <div className="label android">Android</div>
-
-When `false`, if there is a small amount of space available around a text input (e.g. landscape orientation on a phone), the OS may choose to have the user edit the text inside of a full screen text input mode. When `true`, this feature is disabled and users will always edit the text directly inside of the text input. Defaults to `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `editable`
-
-If `false`, text is not editable. The default value is `true`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `enablesReturnKeyAutomatically` <div className="label ios">iOS</div>
-
-If `true`, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `enterKeyHint`
-
-Determines what text should be shown to the return key. Has precedence over the `returnKeyType` prop.
-
-The following values work across platforms:
-
-- `done`
-- `next`
-- `search`
-- `send`
-- `go`
-
-_Android Only_
-
-The following values work on Android only:
-
-- `previous`
-
-_iOS Only_
-
-The following values work on iOS only:
-
-- `enter`
-
-| Type                                                              |
-| ----------------------------------------------------------------- |
-| enum('enter', 'done', 'next', 'previous', 'search', 'send', 'go') |
-
----
-
-### `importantForAutofill` <div className="label android">Android</div>
-
-Tells the operating system whether the individual fields in your app should be included in a view structure for autofill purposes on Android API Level 26+. Possible values are `auto`, `no`, `noExcludeDescendants`, `yes`, and `yesExcludeDescendants`. The default value is `auto`.
-
-- `auto`: Let the Android System use its heuristics to determine if the view is important for autofill.
-- `no`: This view isn't important for autofill.
-- `noExcludeDescendants`: This view and its children aren't important for autofill.
-- `yes`: This view is important for autofill.
-- `yesExcludeDescendants`: This view is important for autofill, but its children aren't important for autofill.
-
-| Type                                                                       |
-| -------------------------------------------------------------------------- |
-| enum('auto', 'no', 'noExcludeDescendants', 'yes', 'yesExcludeDescendants') |
-
----
-
-### `inlineImageLeft` <div className="label android">Android</div>
-
-If defined, the provided image resource will be rendered on the left. The image resource must be inside `/android/app/src/main/res/drawable` and referenced like
-
-```
-<TextInput
- inlineImageLeft='search_icon'
-/>
-```
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `inlineImagePadding` <div className="label android">Android</div>
-
-Padding between the inline image, if any, and the text input itself.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `inputAccessoryViewID` <div className="label ios">iOS</div>
-
-An optional identifier which links a custom [InputAccessoryView](inputaccessoryview.md) to this text input. The InputAccessoryView is rendered above the keyboard when this text input is focused.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `inputAccessoryViewButtonLabel` <div className="label ios">iOS</div>
-
-An optional label that overrides the default [InputAccessoryView](inputaccessoryview.md) button label.
-
-By default, the default button label is not localized. Use this property to provide a localized version.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `inputMode`
-
-Works like the `inputmode` attribute in HTML, it determines which keyboard to open, e.g. `numeric` and has precedence over `keyboardType`.
-
-Support the following values:
-
-- `none`
-- `text`
-- `decimal`
-- `numeric`
-- `tel`
-- `search`
-- `email`
-- `url`
-
-| Type                                                                        |
-| --------------------------------------------------------------------------- |
-| enum('decimal', 'email', 'none', 'numeric', 'search', 'tel', 'text', 'url') |
-
----
-
-### `keyboardAppearance` <div className="label ios">iOS</div>
-
-Determines the color of the keyboard.
-
-| Type                             |
-| -------------------------------- |
-| enum('default', 'light', 'dark') |
-
----
-
-### `keyboardType`
-
-Determines which keyboard to open, e.g.`numeric`.
-
-See screenshots of all the types [here](https://davidl.fr/blog/keyboard-react-native-ios-android#all-react-native-keyboard-type-examples-i-os-on-the-left-android-on-the-right).
-
-The following values work across platforms:
-
-- `default`
-- `number-pad`
-- `decimal-pad`
-- `numeric`
-- `email-address`
-- `phone-pad`
-- `url`
-
-_iOS Only_
-
-The following values work on iOS only:
-
-- `ascii-capable`
-- `numbers-and-punctuation`
-- `name-phone-pad`
-- `twitter`
-- `web-search`
-
-_Android Only_
-
-The following values work on Android only:
-
-- `visible-password`
-
-| Type                                                                                                                                                                                                    |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', 'visible-password') |
-
----
-
-### `lineBreakStrategyIOS` <div className="label ios">iOS</div>
-
-Set line break strategy on iOS 14+. Possible values are `none`, `standard`, `hangul-word` and `push-out`.
-
-| Type                                                        | Default  |
-| ----------------------------------------------------------- | -------- |
-| enum(`'none'`, `'standard'`, `'hangul-word'`, `'push-out'`) | `'none'` |
-
----
-
-### `lineBreakModeIOS` <div className="label ios">iOS</div>
-
-Set line break mode on iOS. Possible values are `wordWrapping`, `char`, `clip`, `head`, `middle` and `tail`.
-
-| Type                                                                       | Default          |
-| -------------------------------------------------------------------------- | ---------------- |
-| enum(`'wordWrapping'`, `'char'`, `'clip'`, `'head'`, `'middle'`, `'tail'`) | `'wordWrapping'` |
-
----
-
-### `maxFontSizeMultiplier`
-
-Specifies largest possible scale a font can reach when `allowFontScaling` is enabled. Possible values:
-
-- `null/undefined` (default): inherit from the parent node or the global default (0)
-- `0`: no max, ignore parent/global default
-- `>= 1`: sets the `maxFontSizeMultiplier` of this node to this value
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `maxLength`
-
-Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `multiline`
-
-If `true`, the text input can be multiple lines. The default value is `false`.
-
-:::note
-It is important to note that this aligns the text to the top on iOS, and centers it on Android. Use with `textAlignVertical` set to `top` for the same behavior in both platforms.
-:::
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `numberOfLines`
-
-:::note
-`numberOfLines` on iOS is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Sets the maximum number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `onBlur`
-
-Callback that is called when the text input is blurred.
-
-> Note: If you are attempting to access the `text` value from `nativeEvent` keep in mind that the resulting value you get can be `undefined` which can cause unintended errors. If you are trying to find the last value of TextInput, you can use the [`onEndEditing`](textinput#onendediting) event, which is fired upon completion of editing.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
-
----
-
-### `onChange`
-
-Callback that is called when the text input's text changes.
-
-| Type                                                  |
-| ----------------------------------------------------- |
-| (`{nativeEvent: {eventCount, target, text}}`) => void |
-
----
-
-### `onChangeText`
-
-Callback that is called when the text input's text changes. Changed text is passed as a single string argument to the callback handler.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onContentSizeChange`
-
-Callback that is called when the text input's content size changes.
-
-Only called for multiline text inputs.
-
-| Type                                                       |
-| ---------------------------------------------------------- |
-| (`{nativeEvent: {contentSize: {width, height} }}`) => void |
-
----
-
-### `onEndEditing`
-
-Callback that is called when text input ends.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onPressIn`
-
-Callback that is called when a touch is engaged.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onPressOut`
-
-Callback that is called when a touch is released.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onFocus`
-
-Callback that is called when the text input is focused.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
-
----
-
-### `onKeyPress`
-
-Callback that is called when a key is pressed. This will be called with object where `keyValue` is `'Enter'` or `'Backspace'` for respective keys and the typed-in character otherwise including `' '` for space. Fires before `onChange` callbacks. Note: on Android only the inputs from soft keyboard are handled, not the hardware keyboard inputs.
-
-| Type                                        |
-| ------------------------------------------- |
-| (`{nativeEvent: {key: keyValue} }`) => void |
-
----
-
-### `onLayout`
-
-Invoked on mount and on layout changes.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
-
----
-
-### `onScroll`
-
-Invoked on content scroll. May also contain other properties from `ScrollEvent` but on Android `contentSize` is not provided for performance reasons.
-
-| Type                                                |
-| --------------------------------------------------- |
-| (`{nativeEvent: {contentOffset: {x, y} }}`) => void |
-
----
-
-### `onSelectionChange`
-
-Callback that is called when the text input selection is changed.
-
-| Type                                                  |
-| ----------------------------------------------------- |
-| (`{nativeEvent: {selection: {start, end} }}`) => void |
-
----
-
-### `onSubmitEditing`
-
-Callback that is called when the text input's submit button is pressed.
-
-| Type                                                  |
-| ----------------------------------------------------- |
-| (`{nativeEvent: {text, eventCount, target}}`) => void |
-
-Note that on iOS this method isn't called when using `keyboardType="phone-pad"`.
-
----
-
-### `placeholder`
-
-The string that will be rendered before text input has been entered.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `placeholderTextColor`
-
-The text color of the placeholder string.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `readOnly`
-
-If `true`, text is not editable. The default value is `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `returnKeyLabel` <div className="label android">Android</div>
-
-Sets the return key to the label. Use it instead of `returnKeyType`.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `returnKeyType`
-
-Determines how the return key should look. On Android you can also use `returnKeyLabel`.
-
-_Cross platform_
-
-The following values work across platforms:
-
-- `done`
-- `go`
-- `next`
-- `search`
-- `send`
-
-_Android Only_
-
-The following values work on Android only:
-
-- `none`
-- `previous`
-
-_iOS Only_
-
-The following values work on iOS only:
-
-- `default`
-- `emergency-call`
-- `google`
-- `join`
-- `route`
-- `yahoo`
-
-| Type                                                                                                                              |
-| --------------------------------------------------------------------------------------------------------------------------------- |
-| enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo') |
-
-### `rejectResponderTermination` <div className="label ios">iOS</div>
-
-If `true`, allows TextInput to pass touch events to the parent component. This allows components such as SwipeableListView to be swipeable from the TextInput on iOS, as is the case on Android by default. If `false`, TextInput always asks to handle the input (except when disabled). The default value is `true`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `rows` <div className="label android">Android</div>
-
-Sets the number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `scrollEnabled` <div className="label ios">iOS</div>
-
-If `false`, scrolling of the text view will be disabled. The default value is `true`. Only works with `multiline={true}`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `secureTextEntry`
-
-If `true`, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is `false`. Does not work with `multiline={true}`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `selection`
-
-The start and end of the text input's selection. Set start and end to the same value to position the cursor.
-
-| Type                                  |
-| ------------------------------------- |
-| object: `{start: number,end: number}` |
-
----
-
-### `selectionColor`
-
-The highlight, selection handle and cursor color of the text input.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `selectionHandleColor` <div className="label android">Android</div>
-
-Sets the color of the selection handle. Unlike `selectionColor`, it allows the selection handle color to be customized independently of the selection's color.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `selectTextOnFocus`
-
-If `true`, all text will automatically be selected on focus.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `showSoftInputOnFocus`
-
-When `false`, it will prevent the soft keyboard from showing when the field is focused. The default value is `true`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `smartInsertDelete` <div className="label ios">iOS</div>
-
-If `false`, the iOS system will not insert an extra space after a paste operation neither delete one or two spaces after a cut or delete operation.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `true`  |
-
----
-
-### `spellCheck` <div className="label ios">iOS</div>
-
-If `false`, disables spell-check style (i.e. red underlines). The default value is inherited from `autoCorrect`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `submitBehavior`
-
-When the return key is pressed,
-
-For single line inputs:
-
-- `'newline'` defaults to `'blurAndSubmit'`
-- `undefined` defaults to `'blurAndSubmit'`
-
-For multiline inputs:
-
-- `'newline'` adds a newline
-- `undefined` defaults to `'newline'`
-
-For both single line and multiline inputs:
-
-- `'submit'` will only send a submit event and not blur the input
-- `'blurAndSubmit`' will both blur the input and send a submit event
-
-| Type                                       |
-| ------------------------------------------ |
-| enum('submit', 'blurAndSubmit', 'newline') |
-
----
-
-### `textAlign`
-
-Align the input text to the left, center, or right sides of the input field.
-
-Possible values for `textAlign` are:
-
-- `left`
-- `center`
-- `right`
-
-| Type                            |
-| ------------------------------- |
-| enum('left', 'center', 'right') |
-
----
-
-### `textContentType` <div className="label ios">iOS</div>
-
-Give the keyboard and the system information about the expected semantic meaning for the content that users enter.
-
-:::note
-[`autoComplete`](#autocomplete), provides the same functionality and is available for all platforms. You can use [`Platform.select`](/docs/next/platform#select) for differing platform behaviors.
-
-Avoid using both `textContentType` and `autoComplete`. For backwards compatibility, `textContentType` takes precedence when both properties are set.
-:::
-
-You can set `textContentType` to `username` or `password` to enable autofill of login details from the device keychain.
-
-`newPassword` can be used to indicate a new password input the user may want to save in the keychain, and `oneTimeCode` can be used to indicate that a field can be autofilled by a code arriving in an SMS.
-
-To disable autofill, set `textContentType` to `none`.
-
-Possible values for `textContentType` are:
-
-- `none`
-- `addressCity`
-- `addressCityAndState`
-- `addressState`
-- `birthdate` (iOS 17+)
-- `birthdateDay` (iOS 17+)
-- `birthdateMonth` (iOS 17+)
-- `birthdateYear` (iOS 17+)
-- `countryName`
-- `creditCardExpiration` (iOS 17+)
-- `creditCardExpirationMonth` (iOS 17+)
-- `creditCardExpirationYear` (iOS 17+)
-- `creditCardFamilyName` (iOS 17+)
-- `creditCardGivenName` (iOS 17+)
-- `creditCardMiddleName` (iOS 17+)
-- `creditCardName` (iOS 17+)
-- `creditCardNumber`
-- `creditCardSecurityCode` (iOS 17+)
-- `creditCardType` (iOS 17+)
-- `emailAddress`
-- `familyName`
-- `fullStreetAddress`
-- `givenName`
-- `jobTitle`
-- `location`
-- `middleName`
-- `name`
-- `namePrefix`
-- `nameSuffix`
-- `newPassword`
-- `nickname`
-- `oneTimeCode`
-- `organizationName`
-- `password`
-- `postalCode`
-- `streetAddressLine1`
-- `streetAddressLine2`
-- `sublocality`
-- `telephoneNumber`
-- `URL`
-- `username`
-
-| Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| enum('none', 'addressCity', 'addressCityAndState', 'addressState', 'birthdate', 'birthdateDay', 'birthdateMonth', 'birthdateYear', 'countryName', 'creditCardExpiration', 'creditCardExpirationMonth', 'creditCardExpirationYear', 'creditCardFamilyName', 'creditCardGivenName', 'creditCardMiddleName', 'creditCardName', 'creditCardNumber', 'creditCardSecurityCode', 'creditCardType', 'emailAddress', 'familyName', 'fullStreetAddress', 'givenName', 'jobTitle', 'location', 'middleName', 'name', 'namePrefix', 'nameSuffix', 'newPassword', 'nickname', 'oneTimeCode', 'organizationName', 'password', 'postalCode', 'streetAddressLine1', 'streetAddressLine2', 'sublocality', 'telephoneNumber', 'URL', 'username') |
-
----
-
-### `passwordRules` <div className="label ios">iOS</div>
-
-When using `textContentType` as `newPassword` on iOS we can let the OS know the minimum requirements of the password so that it can generate one that will satisfy them. In order to create a valid string for `PasswordRules` take a look to the [Apple Docs](https://developer.apple.com/password-rules/).
-
-> If passwords generation dialog doesn't appear please make sure that:
->
-> - AutoFill is enabled: **Settings** → **Passwords & Accounts** → toggle "On" the **AutoFill Passwords**,
-> - iCloud Keychain is used: **Settings** → **Apple ID** → **iCloud** → **Keychain** → toggle "On" the **iCloud Keychain**.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `style`
-
-Note that not all Text styles are supported, an incomplete list of what is not supported includes:
-
-- `borderLeftWidth`
-- `borderTopWidth`
-- `borderRightWidth`
-- `borderBottomWidth`
-- `borderTopLeftRadius`
-- `borderTopRightRadius`
-- `borderBottomRightRadius`
-- `borderBottomLeftRadius`
-
-[Styles](style.md)
-
-| Type                  |
-| --------------------- |
-| [Text](text.md#style) |
-
----
-
-### `textBreakStrategy` <div className="label android">Android</div>
-
-Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced` The default value is `highQuality`.
-
-| Type                                      |
-| ----------------------------------------- |
-| enum('simple', 'highQuality', 'balanced') |
-
----
-
-### `underlineColorAndroid` <div className="label android">Android</div>
-
-The color of the `TextInput` underline.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `value`
-
-The value to show for the text input. `TextInput` is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker.
-
-| Type   |
-| ------ |
-| string |
-
-## Methods
-
-### `.focus()`
-
-```tsx
-focus();
-```
-
-Makes the native input request focus.
-
-### `.blur()`
-
-```tsx
-blur();
-```
-
-Makes the native input lose focus.
-
-### `clear()`
-
-```tsx
-clear();
-```
-
-Removes all text from the `TextInput`.
-
----
-
-### `isFocused()`
-
-```tsx
-isFocused(): boolean;
-```
-
-Returns `true` if the input is currently focused; `false` otherwise.
-
-# Known issues
-
-- [react-native#19096](https://github.com/facebook/react-native/issues/19096): Doesn't support Android's `onKeyPreIme`.
-- [react-native#19366](https://github.com/facebook/react-native/issues/19366): Calling .focus() after closing Android's keyboard via back button doesn't bring keyboard up again.
-- [react-native#26799](https://github.com/facebook/react-native/issues/26799): Doesn't support Android's `secureTextEntry` when `keyboardType="email-address"` or `keyboardType="phone-pad"`.
+---
+id: textinput
+title: TextInput
+---
+
+A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.
+
+The most basic use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. A minimal example:
+
+```SnackPlayer name=TextInput%20Example
+import {useState} from 'react';
+import {StyleSheet, TextInput} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const TextInputExample = () => {
+  const [text, onChangeText] = useState('Useless Text');
+  const [number, onChangeNumber] = useState('');
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView>
+        <TextInput
+          style={styles.input}
+          onChangeText={onChangeText}
+          value={text}
+        />
+        <TextInput
+          style={styles.input}
+          onChangeText={onChangeNumber}
+          value={number}
+          placeholder="useless placeholder"
+          keyboardType="numeric"
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  input: {
+    height: 40,
+    margin: 12,
+    borderWidth: 1,
+    padding: 10,
+  },
+});
+
+export default TextInputExample;
+```
+
+Two methods exposed via the native element are `.focus()` and `.blur()` that will focus or blur the TextInput programmatically.
+
+Note that some props are only available with `multiline={true/false}`. Additionally, border styles that apply to only one side of the element (e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if `multiline=true`. To achieve the same effect, you can wrap your `TextInput` in a `View`:
+
+```SnackPlayer name=Multiline%20TextInput%20Example
+import {useState} from 'react';
+import {TextInput, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const MultilineTextInputExample = () => {
+  const [value, onChangeText] = useState('Useless Multiline Placeholder');
+
+  // If you type something in the text box that is a color,
+  // the background will change to that color.
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView
+        style={{
+          flex: 1,
+          backgroundColor: value.toLowerCase(),
+        }}>
+        <TextInput
+          editable
+          multiline
+          numberOfLines={4}
+          maxLength={40}
+          onChangeText={text => onChangeText(text)}
+          value={value}
+          style={styles.textInput}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  textInput: {
+    padding: 10,
+    borderColor: '#000',
+    borderWidth: 1,
+    margin: 12,
+  },
+});
+
+export default MultilineTextInputExample;
+```
+
+`TextInput` has a border at the bottom of its view by default. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this are to either not set height explicitly, in which case the system will take care of displaying the border in the correct position, or to not display the border by setting `underlineColorAndroid` to transparent.
+
+Note that on Android performing text selection in an input can change the app's activity `windowSoftInputMode` param to `adjustResize`. This may cause issues with components that have position: 'absolute' while the keyboard is active. To avoid this behavior either specify `windowSoftInputMode` in AndroidManifest.xml ( https://developer.android.com/guide/topics/manifest/activity-element.html ) or control this param programmatically with native code.
+
+---
+
+# Reference
+
+## Props
+
+### [View Props](view.md#props)
+
+Inherits [View Props](view.md#props).
+
+---
+
+### `allowFontScaling`
+
+Specifies whether fonts should scale to respect Text Size accessibility settings. The default is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `autoCapitalize`
+
+Tells `TextInput` to automatically capitalize certain characters. This property is not supported by some keyboard types such as `name-phone-pad`.
+
+- `characters`: all characters.
+- `words`: first letter of each word.
+- `sentences`: first letter of each sentence (_default_).
+- `none`: don't auto capitalize anything.
+
+| Type                                             |
+| ------------------------------------------------ |
+| enum('none', 'sentences', 'words', 'characters') |
+
+---
+
+### `autoComplete`
+
+Specifies autocomplete hints for the system, so it can provide autofill. On Android, the system will always attempt to offer autofill by using heuristics to identify the type of content. To disable autocomplete, set `autoComplete` to `off`.
+
+The following values work across platforms:
+
+- `additional-name`
+- `address-line1`
+- `address-line2`
+- `birthdate-day` (iOS 17+)
+- `birthdate-full` (iOS 17+)
+- `birthdate-month` (iOS 17+)
+- `birthdate-year` (iOS 17+)
+- `cc-csc` (iOS 17+)
+- `cc-exp` (iOS 17+)
+- `cc-exp-day` (iOS 17+)
+- `cc-exp-month` (iOS 17+)
+- `cc-exp-year` (iOS 17+)
+- `cc-number`
+- `country`
+- `current-password`
+- `email`
+- `family-name`
+- `given-name`
+- `honorific-prefix`
+- `honorific-suffix`
+- `name`
+- `new-password`
+- `off`
+- `one-time-code`
+- `postal-code`
+- `street-address`
+- `tel`
+- `username`
+
+<div className="label basic ios">iOS</div>
+
+The following values work on iOS only:
+
+- `cc-family-name` (iOS 17+)
+- `cc-given-name` (iOS 17+)
+- `cc-middle-name` (iOS 17+)
+- `cc-name` (iOS 17+)
+- `cc-type` (iOS 17+)
+- `nickname`
+- `organization`
+- `organization-title`
+- `url`
+
+<div className="label basic android">Android</div>
+
+The following values work on Android only:
+
+- `gender`
+- `name-family`
+- `name-given`
+- `name-middle`
+- `name-middle-initial`
+- `name-prefix`
+- `name-suffix`
+- `password`
+- `password-new`
+- `postal-address`
+- `postal-address-country`
+- `postal-address-extended`
+- `postal-address-extended-postal-code`
+- `postal-address-locality`
+- `postal-address-region`
+- `sms-otp`
+- `tel-country-code`
+- `tel-device`
+- `tel-national`
+- `username-new`
+
+| Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| enum('additional-name', 'address-line1', 'address-line2', 'birthdate-day', 'birthdate-full', 'birthdate-month', 'birthdate-year', 'cc-csc', 'cc-exp', 'cc-exp-day', 'cc-exp-month', 'cc-exp-year', 'cc-number', 'country', 'current-password', 'email', 'family-name', 'given-name', 'honorific-prefix', 'honorific-suffix', 'name', 'new-password', 'off', 'one-time-code', 'postal-code', 'street-address', 'tel', 'username', 'cc-family-name', 'cc-given-name', 'cc-middle-name', 'cc-name', 'cc-type', 'nickname', 'organization', 'organization-title', 'url', 'gender', 'name-family', 'name-given', 'name-middle', 'name-middle-initial', 'name-prefix', 'name-suffix', 'password', 'password-new', 'postal-address', 'postal-address-country', 'postal-address-extended', 'postal-address-extended-postal-code', 'postal-address-locality', 'postal-address-region', 'sms-otp', 'tel-country-code', 'tel-device', 'tel-national', 'username-new') |
+
+---
+
+### `autoCorrect`
+
+If `false`, disables auto-correct. The default value is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `autoFocus`
+
+If `true`, focuses the input. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `blurOnSubmit`
+
+> **Deprecated.** Note that `submitBehavior` now takes the place of `blurOnSubmit` and will override any behavior defined by `blurOnSubmit`. See [submitBehavior](textinput#submitbehavior)
+
+If `true`, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting `blurOnSubmit` to `true` means that pressing return will blur the field and trigger the `onSubmitEditing` event instead of inserting a newline into the field.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `caretHidden`
+
+If `true`, caret is hidden. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `clearButtonMode` <div className="label ios">iOS</div>
+
+When the clear button should appear on the right side of the text view. This property is supported only for single-line TextInput component. The default value is `never`.
+
+| Type                                                       |
+| ---------------------------------------------------------- |
+| enum('never', 'while-editing', 'unless-editing', 'always') |
+
+---
+
+### `clearTextOnFocus` <div className="label ios">iOS</div>
+
+If `true`, clears the text field automatically when editing begins.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `contextMenuHidden`
+
+If `true`, context menu is hidden. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `dataDetectorTypes` <div className="label ios">iOS</div>
+
+Determines the types of data converted to clickable URLs in the text input. Only valid if `multiline={true}` and `editable={false}`. By default no data types are detected.
+
+You can provide one type or an array of many types.
+
+Possible values for `dataDetectorTypes` are:
+
+- `'phoneNumber'`
+- `'link'`
+- `'address'`
+- `'calendarEvent'`
+- `'none'`
+- `'all'`
+
+| Type                                                                                                                                                     |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), ,array of enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all') |
+
+---
+
+### `defaultValue`
+
+Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `disableKeyboardShortcuts` <div className="label ios">iOS</div>
+
+If `true`, the keyboard shortcuts (undo/redo and copy buttons) are disabled.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `cursorColor` <div className="label android">Android</div>
+
+When provided it will set the color of the cursor (or "caret") in the component. Unlike the behavior of `selectionColor` the cursor color will be set independently from the color of the text selection box.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `disableFullscreenUI` <div className="label android">Android</div>
+
+When `false`, if there is a small amount of space available around a text input (e.g. landscape orientation on a phone), the OS may choose to have the user edit the text inside of a full screen text input mode. When `true`, this feature is disabled and users will always edit the text directly inside of the text input. Defaults to `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `editable`
+
+If `false`, text is not editable. The default value is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `enablesReturnKeyAutomatically` <div className="label ios">iOS</div>
+
+If `true`, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `enterKeyHint`
+
+Determines what text should be shown to the return key. Has precedence over the `returnKeyType` prop.
+
+The following values work across platforms:
+
+- `done`
+- `next`
+- `search`
+- `send`
+- `go`
+
+_Android Only_
+
+The following values work on Android only:
+
+- `previous`
+
+_iOS Only_
+
+The following values work on iOS only:
+
+- `enter`
+
+| Type                                                              |
+| ----------------------------------------------------------------- |
+| enum('enter', 'done', 'next', 'previous', 'search', 'send', 'go') |
+
+---
+
+### `importantForAutofill` <div className="label android">Android</div>
+
+Tells the operating system whether the individual fields in your app should be included in a view structure for autofill purposes on Android API Level 26+. Possible values are `auto`, `no`, `noExcludeDescendants`, `yes`, and `yesExcludeDescendants`. The default value is `auto`.
+
+- `auto`: Let the Android System use its heuristics to determine if the view is important for autofill.
+- `no`: This view isn't important for autofill.
+- `noExcludeDescendants`: This view and its children aren't important for autofill.
+- `yes`: This view is important for autofill.
+- `yesExcludeDescendants`: This view is important for autofill, but its children aren't important for autofill.
+
+| Type                                                                       |
+| -------------------------------------------------------------------------- |
+| enum('auto', 'no', 'noExcludeDescendants', 'yes', 'yesExcludeDescendants') |
+
+---
+
+### `inlineImageLeft` <div className="label android">Android</div>
+
+If defined, the provided image resource will be rendered on the left. The image resource must be inside `/android/app/src/main/res/drawable` and referenced like
+
+```
+<TextInput
+ inlineImageLeft='search_icon'
+/>
+```
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `inlineImagePadding` <div className="label android">Android</div>
+
+Padding between the inline image, if any, and the text input itself.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `inputAccessoryViewID` <div className="label ios">iOS</div>
+
+An optional identifier which links a custom [InputAccessoryView](inputaccessoryview.md) to this text input. The InputAccessoryView is rendered above the keyboard when this text input is focused.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `inputAccessoryViewButtonLabel` <div className="label ios">iOS</div>
+
+An optional label that overrides the default [InputAccessoryView](inputaccessoryview.md) button label.
+
+By default, the default button label is not localized. Use this property to provide a localized version.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `inputMode`
+
+Works like the `inputmode` attribute in HTML, it determines which keyboard to open, e.g. `numeric` and has precedence over `keyboardType`.
+
+Support the following values:
+
+- `none`
+- `text`
+- `decimal`
+- `numeric`
+- `tel`
+- `search`
+- `email`
+- `url`
+
+| Type                                                                        |
+| --------------------------------------------------------------------------- |
+| enum('decimal', 'email', 'none', 'numeric', 'search', 'tel', 'text', 'url') |
+
+---
+
+### `keyboardAppearance` <div className="label ios">iOS</div>
+
+Determines the color of the keyboard.
+
+| Type                             |
+| -------------------------------- |
+| enum('default', 'light', 'dark') |
+
+---
+
+### `keyboardType`
+
+Determines which keyboard to open, e.g.`numeric`.
+
+See screenshots of all the types [here](https://davidl.fr/blog/keyboard-react-native-ios-android#all-react-native-keyboard-type-examples-i-os-on-the-left-android-on-the-right).
+
+The following values work across platforms:
+
+- `default`
+- `number-pad`
+- `decimal-pad`
+- `numeric`
+- `email-address`
+- `phone-pad`
+- `url`
+
+_iOS Only_
+
+The following values work on iOS only:
+
+- `ascii-capable`
+- `numbers-and-punctuation`
+- `name-phone-pad`
+- `twitter`
+- `web-search`
+
+_Android Only_
+
+The following values work on Android only:
+
+- `visible-password`
+
+| Type                                                                                                                                                                                                    |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', 'visible-password') |
+
+---
+
+### `lineBreakStrategyIOS` <div className="label ios">iOS</div>
+
+Set line break strategy on iOS 14+. Possible values are `none`, `standard`, `hangul-word` and `push-out`.
+
+| Type                                                        | Default  |
+| ----------------------------------------------------------- | -------- |
+| enum(`'none'`, `'standard'`, `'hangul-word'`, `'push-out'`) | `'none'` |
+
+---
+
+### `lineBreakModeIOS` <div className="label ios">iOS</div>
+
+Set line break mode on iOS. Possible values are `wordWrapping`, `char`, `clip`, `head`, `middle` and `tail`.
+
+| Type                                                                       | Default          |
+| -------------------------------------------------------------------------- | ---------------- |
+| enum(`'wordWrapping'`, `'char'`, `'clip'`, `'head'`, `'middle'`, `'tail'`) | `'wordWrapping'` |
+
+---
+
+### `maxFontSizeMultiplier`
+
+Specifies largest possible scale a font can reach when `allowFontScaling` is enabled. Possible values:
+
+- `null/undefined` (default): inherit from the parent node or the global default (0)
+- `0`: no max, ignore parent/global default
+- `>= 1`: sets the `maxFontSizeMultiplier` of this node to this value
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `maxLength`
+
+Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `multiline`
+
+If `true`, the text input can be multiple lines. The default value is `false`.
+
+:::note
+It is important to note that this aligns the text to the top on iOS, and centers it on Android. Use with `textAlignVertical` set to `top` for the same behavior in both platforms.
+:::
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `numberOfLines`
+
+:::note
+`numberOfLines` on iOS is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Sets the maximum number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `onBlur`
+
+Callback that is called when the text input is blurred.
+
+> Note: If you are attempting to access the `text` value from `nativeEvent` keep in mind that the resulting value you get can be `undefined` which can cause unintended errors. If you are trying to find the last value of TextInput, you can use the [`onEndEditing`](textinput#onendediting) event, which is fired upon completion of editing.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
+
+---
+
+### `onChange`
+
+Callback that is called when the text input's text changes.
+
+| Type                                                  |
+| ----------------------------------------------------- |
+| (`{nativeEvent: {eventCount, target, text}}`) => void |
+
+---
+
+### `onChangeText`
+
+Callback that is called when the text input's text changes. Changed text is passed as a single string argument to the callback handler.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onContentSizeChange`
+
+Callback that is called when the text input's content size changes.
+
+Only called for multiline text inputs.
+
+| Type                                                       |
+| ---------------------------------------------------------- |
+| (`{nativeEvent: {contentSize: {width, height} }}`) => void |
+
+---
+
+### `onEndEditing`
+
+Callback that is called when text input ends.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onPressIn`
+
+Callback that is called when a touch is engaged.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onPressOut`
+
+Callback that is called when a touch is released.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onFocus`
+
+Callback that is called when the text input is focused.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
+
+---
+
+### `onKeyPress`
+
+Callback that is called when a key is pressed. This will be called with object where `keyValue` is `'Enter'` or `'Backspace'` for respective keys and the typed-in character otherwise including `' '` for space. Fires before `onChange` callbacks. Note: on Android only the inputs from soft keyboard are handled, not the hardware keyboard inputs.
+
+| Type                                        |
+| ------------------------------------------- |
+| (`{nativeEvent: {key: keyValue} }`) => void |
+
+---
+
+### `onLayout`
+
+Invoked on mount and on layout changes.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
+
+---
+
+### `onScroll`
+
+Invoked on content scroll. May also contain other properties from `ScrollEvent` but on Android `contentSize` is not provided for performance reasons.
+
+| Type                                                |
+| --------------------------------------------------- |
+| (`{nativeEvent: {contentOffset: {x, y} }}`) => void |
+
+---
+
+### `onSelectionChange`
+
+Callback that is called when the text input selection is changed.
+
+| Type                                                  |
+| ----------------------------------------------------- |
+| (`{nativeEvent: {selection: {start, end} }}`) => void |
+
+---
+
+### `onSubmitEditing`
+
+Callback that is called when the text input's submit button is pressed.
+
+| Type                                                  |
+| ----------------------------------------------------- |
+| (`{nativeEvent: {text, eventCount, target}}`) => void |
+
+Note that on iOS this method isn't called when using `keyboardType="phone-pad"`.
+
+---
+
+### `placeholder`
+
+The string that will be rendered before text input has been entered.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `placeholderTextColor`
+
+The text color of the placeholder string.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `readOnly`
+
+If `true`, text is not editable. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `returnKeyLabel` <div className="label android">Android</div>
+
+Sets the return key to the label. Use it instead of `returnKeyType`.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `returnKeyType`
+
+Determines how the return key should look. On Android you can also use `returnKeyLabel`.
+
+_Cross platform_
+
+The following values work across platforms:
+
+- `done`
+- `go`
+- `next`
+- `search`
+- `send`
+
+_Android Only_
+
+The following values work on Android only:
+
+- `none`
+- `previous`
+
+_iOS Only_
+
+The following values work on iOS only:
+
+- `default`
+- `emergency-call`
+- `google`
+- `join`
+- `route`
+- `yahoo`
+
+| Type                                                                                                                              |
+| --------------------------------------------------------------------------------------------------------------------------------- |
+| enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo') |
+
+### `rejectResponderTermination` <div className="label ios">iOS</div>
+
+If `true`, allows TextInput to pass touch events to the parent component. This allows components such as SwipeableListView to be swipeable from the TextInput on iOS, as is the case on Android by default. If `false`, TextInput always asks to handle the input (except when disabled). The default value is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `rows` <div className="label android">Android</div>
+
+Sets the number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `scrollEnabled` <div className="label ios">iOS</div>
+
+If `false`, scrolling of the text view will be disabled. The default value is `true`. Only works with `multiline={true}`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `secureTextEntry`
+
+If `true`, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is `false`. Does not work with `multiline={true}`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `selection`
+
+The start and end of the text input's selection. Set start and end to the same value to position the cursor.
+
+| Type                                  |
+| ------------------------------------- |
+| object: `{start: number,end: number}` |
+
+---
+
+### `selectionColor`
+
+The highlight, selection handle and cursor color of the text input.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `selectionHandleColor` <div className="label android">Android</div>
+
+Sets the color of the selection handle. Unlike `selectionColor`, it allows the selection handle color to be customized independently of the selection's color.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `selectTextOnFocus`
+
+If `true`, all text will automatically be selected on focus.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `showSoftInputOnFocus`
+
+When `false`, it will prevent the soft keyboard from showing when the field is focused. The default value is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `smartInsertDelete` <div className="label ios">iOS</div>
+
+If `false`, the iOS system will not insert an extra space after a paste operation neither delete one or two spaces after a cut or delete operation.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `true`  |
+
+---
+
+### `spellCheck` <div className="label ios">iOS</div>
+
+If `false`, disables spell-check style (i.e. red underlines). The default value is inherited from `autoCorrect`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `submitBehavior`
+
+When the return key is pressed,
+
+For single line inputs:
+
+- `'newline'` defaults to `'blurAndSubmit'`
+- `undefined` defaults to `'blurAndSubmit'`
+
+For multiline inputs:
+
+- `'newline'` adds a newline
+- `undefined` defaults to `'newline'`
+
+For both single line and multiline inputs:
+
+- `'submit'` will only send a submit event and not blur the input
+- `'blurAndSubmit`' will both blur the input and send a submit event
+
+| Type                                       |
+| ------------------------------------------ |
+| enum('submit', 'blurAndSubmit', 'newline') |
+
+---
+
+### `textAlign`
+
+Align the input text to the left, center, or right sides of the input field.
+
+Possible values for `textAlign` are:
+
+- `left`
+- `center`
+- `right`
+
+| Type                            |
+| ------------------------------- |
+| enum('left', 'center', 'right') |
+
+---
+
+### `textContentType` <div className="label ios">iOS</div>
+
+Give the keyboard and the system information about the expected semantic meaning for the content that users enter.
+
+:::note
+[`autoComplete`](#autocomplete), provides the same functionality and is available for all platforms. You can use [`Platform.select`](/docs/next/platform#select) for differing platform behaviors.
+
+Avoid using both `textContentType` and `autoComplete`. For backwards compatibility, `textContentType` takes precedence when both properties are set.
+:::
+
+You can set `textContentType` to `username` or `password` to enable autofill of login details from the device keychain.
+
+`newPassword` can be used to indicate a new password input the user may want to save in the keychain, and `oneTimeCode` can be used to indicate that a field can be autofilled by a code arriving in an SMS.
+
+To disable autofill, set `textContentType` to `none`.
+
+Possible values for `textContentType` are:
+
+- `none`
+- `addressCity`
+- `addressCityAndState`
+- `addressState`
+- `birthdate` (iOS 17+)
+- `birthdateDay` (iOS 17+)
+- `birthdateMonth` (iOS 17+)
+- `birthdateYear` (iOS 17+)
+- `countryName`
+- `creditCardExpiration` (iOS 17+)
+- `creditCardExpirationMonth` (iOS 17+)
+- `creditCardExpirationYear` (iOS 17+)
+- `creditCardFamilyName` (iOS 17+)
+- `creditCardGivenName` (iOS 17+)
+- `creditCardMiddleName` (iOS 17+)
+- `creditCardName` (iOS 17+)
+- `creditCardNumber`
+- `creditCardSecurityCode` (iOS 17+)
+- `creditCardType` (iOS 17+)
+- `emailAddress`
+- `familyName`
+- `fullStreetAddress`
+- `givenName`
+- `jobTitle`
+- `location`
+- `middleName`
+- `name`
+- `namePrefix`
+- `nameSuffix`
+- `newPassword`
+- `nickname`
+- `oneTimeCode`
+- `organizationName`
+- `password`
+- `postalCode`
+- `streetAddressLine1`
+- `streetAddressLine2`
+- `sublocality`
+- `telephoneNumber`
+- `URL`
+- `username`
+
+| Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| enum('none', 'addressCity', 'addressCityAndState', 'addressState', 'birthdate', 'birthdateDay', 'birthdateMonth', 'birthdateYear', 'countryName', 'creditCardExpiration', 'creditCardExpirationMonth', 'creditCardExpirationYear', 'creditCardFamilyName', 'creditCardGivenName', 'creditCardMiddleName', 'creditCardName', 'creditCardNumber', 'creditCardSecurityCode', 'creditCardType', 'emailAddress', 'familyName', 'fullStreetAddress', 'givenName', 'jobTitle', 'location', 'middleName', 'name', 'namePrefix', 'nameSuffix', 'newPassword', 'nickname', 'oneTimeCode', 'organizationName', 'password', 'postalCode', 'streetAddressLine1', 'streetAddressLine2', 'sublocality', 'telephoneNumber', 'URL', 'username') |
+
+---
+
+### `passwordRules` <div className="label ios">iOS</div>
+
+When using `textContentType` as `newPassword` on iOS we can let the OS know the minimum requirements of the password so that it can generate one that will satisfy them. In order to create a valid string for `PasswordRules` take a look to the [Apple Docs](https://developer.apple.com/password-rules/).
+
+> If passwords generation dialog doesn't appear please make sure that:
+>
+> - AutoFill is enabled: **Settings** → **Passwords & Accounts** → toggle "On" the **AutoFill Passwords**,
+> - iCloud Keychain is used: **Settings** → **Apple ID** → **iCloud** → **Keychain** → toggle "On" the **iCloud Keychain**.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `style`
+
+Note that not all Text styles are supported, an incomplete list of what is not supported includes:
+
+- `borderLeftWidth`
+- `borderTopWidth`
+- `borderRightWidth`
+- `borderBottomWidth`
+- `borderTopLeftRadius`
+- `borderTopRightRadius`
+- `borderBottomRightRadius`
+- `borderBottomLeftRadius`
+
+[Styles](style.md)
+
+| Type                  |
+| --------------------- |
+| [Text](text.md#style) |
+
+---
+
+### `textBreakStrategy` <div className="label android">Android</div>
+
+Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced` The default value is `highQuality`.
+
+| Type                                      |
+| ----------------------------------------- |
+| enum('simple', 'highQuality', 'balanced') |
+
+---
+
+### `underlineColorAndroid` <div className="label android">Android</div>
+
+The color of the `TextInput` underline.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `value`
+
+The value to show for the text input. `TextInput` is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker.
+
+| Type   |
+| ------ |
+| string |
+
+## Methods
+
+### `.focus()`
+
+```tsx
+focus();
+```
+
+Makes the native input request focus.
+
+### `.blur()`
+
+```tsx
+blur();
+```
+
+Makes the native input lose focus.
+
+### `clear()`
+
+```tsx
+clear();
+```
+
+Removes all text from the `TextInput`.
+
+---
+
+### `isFocused()`
+
+```tsx
+isFocused(): boolean;
+```
+
+Returns `true` if the input is currently focused; `false` otherwise.
+
+# Known issues
+
+- [react-native#19096](https://github.com/facebook/react-native/issues/19096): Doesn't support Android's `onKeyPreIme`.
+- [react-native#19366](https://github.com/facebook/react-native/issues/19366): Calling .focus() after closing Android's keyboard via back button doesn't bring keyboard up again.
+- [react-native#26799](https://github.com/facebook/react-native/issues/26799): Doesn't support Android's `secureTextEntry` when `keyboardType="email-address"` or `keyboardType="phone-pad"`.
diff --git a/website/versioned_docs/version-0.81/the-new-architecture/custom-cxx-types.md b/website/versioned_docs/version-0.81/the-new-architecture/custom-cxx-types.md
index f580f0df8eb..f4ad10f8161 100644
--- a/website/versioned_docs/version-0.81/the-new-architecture/custom-cxx-types.md
+++ b/website/versioned_docs/version-0.81/the-new-architecture/custom-cxx-types.md
@@ -173,8 +173,8 @@ First, we need to update the `App.tsx` file to use the new method from the Turbo
 
 ```diff title="App.tsx"
 // ...
-+ const [cubicSource, setCubicSource] = React.useState('')
-+ const [cubicRoot, setCubicRoot] = React.useState(0)
++ const [cubicSource, setCubicSource] = useState('')
++ const [cubicRoot, setCubicRoot] = useState(0)
   return (
     <SafeAreaView style={styles.container}>
       <View>
@@ -366,9 +366,9 @@ To test the code in the app, we have to modify the `App.tsx` file.
 2. Replace the body of the `App()` function with the following code:
 
 ```ts title="App.tsx (App function body replacement)"
-const [street, setStreet] = React.useState('');
-const [num, setNum] = React.useState('');
-const [isValidAddress, setIsValidAddress] = React.useState<
+const [street, setStreet] = useState('');
+const [num, setNum] = useState('');
+const [isValidAddress, setIsValidAddress] = useState<
   boolean | null
 >(null);
 
diff --git a/website/versioned_docs/version-0.81/the-new-architecture/direct-manipulation.md b/website/versioned_docs/version-0.81/the-new-architecture/direct-manipulation.md
index 6708a643cba..6035b6a64b7 100644
--- a/website/versioned_docs/version-0.81/the-new-architecture/direct-manipulation.md
+++ b/website/versioned_docs/version-0.81/the-new-architecture/direct-manipulation.md
@@ -26,7 +26,6 @@ For example, the following code demonstrates editing the input when you tap a bu
 <TabItem value="javascript">
 
 ```SnackPlayer name=setNativeProps%20on%20TextInput&ext=js
-import React from 'react';
 import {useCallback, useRef} from 'react';
 import {
   StyleSheet,
@@ -74,7 +73,6 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Clear%20text&ext=tsx
-import React from 'react';
 import {useCallback, useRef} from 'react';
 import {
   StyleSheet,
diff --git a/website/versioned_docs/version-0.81/the-new-architecture/fabric-component-native-commands.md b/website/versioned_docs/version-0.81/the-new-architecture/fabric-component-native-commands.md
index ca87360ba3a..5cb5dbd6710 100644
--- a/website/versioned_docs/version-0.81/the-new-architecture/fabric-component-native-commands.md
+++ b/website/versioned_docs/version-0.81/the-new-architecture/fabric-component-native-commands.md
@@ -107,7 +107,6 @@ Now you can use the command in the the app.
 Open the `App.tsx` file and modify it as it follows:
 
 ```diff title="App.tsx"
-import React from 'react';
 -import {Alert, StyleSheet, View} from 'react-native';
 -import WebView from '../specs/WebViewNativeComponent';
 +import {Alert, StyleSheet, Pressable, Text, View} from 'react-native';
@@ -186,7 +185,6 @@ export default App;
 Open the `App.tsx` file and modify it as it follows:
 
 ```diff title="App.jsx"
-import React from 'react';
 -import {Alert, StyleSheet, View} from 'react-native';
 -import WebView from '../specs/WebViewNativeComponent';
 +import {Alert, StyleSheet, Pressable, Text, View} from 'react-native';
diff --git a/website/versioned_docs/version-0.81/the-new-architecture/layout-measurements.md b/website/versioned_docs/version-0.81/the-new-architecture/layout-measurements.md
index cc693a99b0c..715cd42aee7 100644
--- a/website/versioned_docs/version-0.81/the-new-architecture/layout-measurements.md
+++ b/website/versioned_docs/version-0.81/the-new-architecture/layout-measurements.md
@@ -10,7 +10,7 @@ Typical code will look like this:
 
 ```tsx
 function AComponent(children) {
-  const targetRef = React.useRef(null)
+  const targetRef = useRef(null)
 
   useLayoutEffect(() => {
     targetRef.current?.measure((x, y, width, height, pageX, pageY) => {
diff --git a/website/versioned_docs/version-0.81/the-new-architecture/native-modules-custom-events.md b/website/versioned_docs/version-0.81/the-new-architecture/native-modules-custom-events.md
index 0af5bb95957..c44bbf93c16 100644
--- a/website/versioned_docs/version-0.81/the-new-architecture/native-modules-custom-events.md
+++ b/website/versioned_docs/version-0.81/the-new-architecture/native-modules-custom-events.md
@@ -134,7 +134,6 @@ Now, it's time to update the code of the App to handle the new event.
 Open the `App.tsx` file and modify it as it follows:
 
 ```diff title="App.tsx"
-import React from 'react';
 import {
 + Alert,
 + EventSubscription,
diff --git a/website/versioned_docs/version-0.81/the-new-architecture/pure-cxx-modules.md b/website/versioned_docs/version-0.81/the-new-architecture/pure-cxx-modules.md
index 440dfbe553d..de4e3aa886e 100644
--- a/website/versioned_docs/version-0.81/the-new-architecture/pure-cxx-modules.md
+++ b/website/versioned_docs/version-0.81/the-new-architecture/pure-cxx-modules.md
@@ -1,502 +1,502 @@
-import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameForCurrentVersion';
-import {getCurrentVersion} from '@site/src/getCurrentVersion';
-import CodeBlock from '@theme/CodeBlock';
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-# Cross-Platform Native Modules (C++)
-
-Writing a module in C++ is the best way to share platform-agnostic code between Android and iOS. With pure C++ modules, you can write your logic only once and reuse it right away from all the platforms, without the need of writing platform-specific code.
-
-In this guide, we will go through the creation of a pure C++ Turbo Native Module:
-
-1. Create the JS specs
-2. Configure Codegen to generate the scaffolding
-3. Implement the Native logic
-4. Register the module in the Android and iOS application
-5. Test your changes in JS
-
-The rest of this guide assumes that you have created your application running the command:
-
-<CodeBlock language="bash" title="shell">
-{`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`}
-</CodeBlock>
-
-## 1. Create the JS specs
-
-Pure C++ Turbo Native Modules are Turbo Native Modules. They need a specification file (also called spec file) so that Codegen can create the scaffolding code for us. The specification file is also what we use to access the Turbo Native Module in JS.
-
-Spec files need to be written in a typed JS dialect. React Native currently supports Flow or TypeScript.
-
-1. Inside the root folder of your app, create a new folder called `specs`.
-2. Create a new file called `NativeSampleModule.ts` with the following code:
-
-:::warning
-All Native Turbo Module spec files must have the prefix `Native`, otherwise Codegen will ignore them.
-:::
-
-<Tabs groupId="tnm-specs" queryString defaultValue={constants.defaultJavaScriptSpecLanguages} values={constants.javaScriptSpecLanguages}>
-<TabItem value="flow">
-
-```ts title="specs/NativeSampleModule.ts"
-// @flow
-import type {TurboModule} from 'react-native'
-import { TurboModuleRegistry } from "react-native";
-
-export interface Spec extends TurboModule {
-  +reverseString: (input: string) => string;
-}
-
-export default (TurboModuleRegistry.getEnforcing<Spec>(
-  "NativeSampleModule"
-): Spec);
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```ts title="specs/NativeSampleModule.ts"
-import {TurboModule, TurboModuleRegistry} from 'react-native';
-
-export interface Spec extends TurboModule {
-  readonly reverseString: (input: string) => string;
-}
-
-export default TurboModuleRegistry.getEnforcing<Spec>(
-  'NativeSampleModule',
-);
-```
-
-</TabItem>
-</Tabs>
-
-## 2. Configure Codegen
-
-The next step is to configure [Codegen](what-is-codegen.mdx) in your `package.json`. Update the file to include:
-
-```json title="package.json"
-     "start": "react-native start",
-     "test": "jest"
-   },
-   // highlight-add-start
-   "codegenConfig": {
-     "name": "AppSpecs",
-     "type": "modules",
-     "jsSrcsDir": "specs",
-     "android": {
-       "javaPackageName": "com.sampleapp.specs"
-     }
-   },
-   // highlight-add-end
-   "dependencies": {
-```
-
-This configuration tells Codegen to look for spec files in the `specs` folder. It also instructs Codegen to only generate code for `modules` and to namespace the generated code as `AppSpecs`.
-
-## 3. Write the Native Code
-
-Writing a C++ Turbo Native Module allows you to share the code between Android and iOS. Therefore we will be writing the code once, and we will look into what changes we need to apply to the platforms so that the C++ code can be picked up.
-
-1. Create a folder named `shared` at the same level as the `android` and `ios` folders.
-2. Inside the `shared` folder, create a new file called `NativeSampleModule.h`.
-
-   ```cpp title="shared/NativeSampleModule.h"
-   #pragma once
-
-   #include <AppSpecsJSI.h>
-
-   #include <memory>
-   #include <string>
-
-   namespace facebook::react {
-
-   class NativeSampleModule : public NativeSampleModuleCxxSpec<NativeSampleModule> {
-   public:
-     NativeSampleModule(std::shared_ptr<CallInvoker> jsInvoker);
-
-     std::string reverseString(jsi::Runtime& rt, std::string input);
-   };
-
-   } // namespace facebook::react
-
-   ```
-
-3. Inside the `shared` folder, create a new file called `NativeSampleModule.cpp`.
-
-   ```cpp title="shared/NativeSampleModule.cpp"
-   #include "NativeSampleModule.h"
-
-   namespace facebook::react {
-
-   NativeSampleModule::NativeSampleModule(std::shared_ptr<CallInvoker> jsInvoker)
-       : NativeSampleModuleCxxSpec(std::move(jsInvoker)) {}
-
-   std::string NativeSampleModule::reverseString(jsi::Runtime& rt, std::string input) {
-     return std::string(input.rbegin(), input.rend());
-   }
-
-   } // namespace facebook::react
-   ```
-
-Let's have a look at the two files we created:
-
-- The `NativeSampleModule.h` file is the header file for a Pure C++ TurboModule. The `include` statements make sure that we include the specs that will be created by Codegen and that contains the interface and the base class we need to implement.
-- The module lives in the `facebook::react` namespace to have access to all the types that live in that namespace.
-- The class `NativeSampleModule` is the actual Turbo Native Module class and it extends the `NativeSampleModuleCxxSpec` class which contains some glue code and boilerplate code to let this class behave as a Turbo Native Module.
-- Finally, we have the constructor, that accepts a pointer to the `CallInvoker`, to communicate with JS if needed and the function's prototype we have to implement.
-
-The `NativeSampleModule.cpp` file is the actual implementation of our Turbo Native Module and implements the constructor and the method that we declared in the specs.
-
-## 4. Register the Module in the platform
-
-The next steps will let us register the module in the platform. This is the step that exposes the native code to JS so that the React Native application can finally call the native methods from the JS layer.
-
-This is the only time when we will have to write some platform-specific code.
-
-### Android
-
-To make sure that the Android app can effectively build the C++ Turbo Native Module, we need to:
-
-1. Create a `CMakeLists.txt` to access our C++ code.
-2. Modify `build.gradle` to point to the newly created `CMakeLists.txt` file.
-3. Create an `OnLoad.cpp` file in our Android app to register the new Turbo Native Module.
-
-#### 1. Create the `CMakeLists.txt` file
-
-Android uses CMake to build. CMake needs to access the files we defined in our shared folder to be able to build them.
-
-1. Create a new folder `SampleApp/android/app/src/main/jni`. The `jni` folder is where the C++ side of Android lives.
-2. Create a `CMakeLists.txt` file and add this context:
-
-```shell title="CMakeLists.txt"
-cmake_minimum_required(VERSION 3.13)
-
-# Define the library name here.
-project(appmodules)
-
-# This file includes all the necessary to let you build your React Native application
-include(${REACT_ANDROID_DIR}/cmake-utils/ReactNative-application.cmake)
-
-# Define where the additional source code lives. We need to crawl back the jni, main, src, app, android folders
-target_sources(${CMAKE_PROJECT_NAME} PRIVATE ../../../../../shared/NativeSampleModule.cpp)
-
-# Define where CMake can find the additional header files. We need to crawl back the jni, main, src, app, android folders
-target_include_directories(${CMAKE_PROJECT_NAME} PUBLIC ../../../../../shared)
-```
-
-The CMake file does the following things:
-
-- Defines the `appmodules` library, where all the app C++ code will be included.
-- Loads the base React Native's CMake file.
-- Adds the Module C++ source code that we need to build with the `target_sources` directives. By default React Native will already populate the `appmodules` library with default sources, here we include our custom one. You can see that we need to crawl back from the `jni` folder to the `shared` folder where our C++ Turbo Module lives.
-- Specifies where CMake can find the module header files. Also in this case we need to crawl back from the `jni` folder.
-
-#### 2. Modify `build.gradle` to include the custom C++ code
-
-Gradle is the tool that orchestrates the Android build. We need to tell it where it can find the `CMake` files to build the Turbo Native Module.
-
-1. Open the `SampleApp/android/app/build.gradle` file.
-2. Add the following block into the Gradle file, within the existing `android` block:
-
-```diff title="android/app/build.gradle"
-    buildTypes {
-        debug {
-            signingConfig signingConfigs.debug
-        }
-        release {
-            // Caution! In production, you need to generate your own keystore file.
-            // see https://reactnative.dev/docs/signed-apk-android.
-            signingConfig signingConfigs.debug
-            minifyEnabled enableProguardInReleaseBuilds
-            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
-        }
-    }
-
-+   externalNativeBuild {
-+       cmake {
-+           path "src/main/jni/CMakeLists.txt"
-+       }
-+   }
-}
-```
-
-This block tells the Gradle file where to look for the CMake file. The path is relative to the folder where the `build.gradle` file lives, so we need to add the path to the `CMakeLists.txt` files in the `jni` folder.
-
-#### 3. Register the new Turbo Native Module
-
-The final step is to register the new C++ Turbo Native Module in the runtime, so that when JS requires the C++ Turbo Native Module, the app knows where to find it and can return it.
-
-1. From the folder `SampleApp/android/app/src/main/jni`, run the following command:
-
-<CodeBlock language="sh" title="shell">
-{`curl -O https://raw.githubusercontent.com/facebook/react-native/${getCoreBranchNameForCurrentVersion()}/packages/react-native/ReactAndroid/cmake-utils/default-app-setup/OnLoad.cpp`}
-</CodeBlock>
-
-2. Then, modify this file as follows:
-
-```diff title="android/app/src/main/jni/OnLoad.cpp"
-#include <DefaultComponentsRegistry.h>
-#include <DefaultTurboModuleManagerDelegate.h>
-#include <autolinking.h>
-#include <fbjni/fbjni.h>
-#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
-#include <rncore.h>
-
-+ // Include the NativeSampleModule header
-+ #include <NativeSampleModule.h>
-
-//...
-
-std::shared_ptr<TurboModule> cxxModuleProvider(
-    const std::string& name,
-    const std::shared_ptr<CallInvoker>& jsInvoker) {
-  // Here you can provide your CXX Turbo Modules coming from
-  // either your application or from external libraries. The approach to follow
-  // is similar to the following (for a module called `NativeCxxModuleExample`):
-  //
-  // if (name == NativeCxxModuleExample::kModuleName) {
-  //   return std::make_shared<NativeCxxModuleExample>(jsInvoker);
-  // }
-
-+  // This code registers the module so that when the JS side asks for it, the app can return it
-+  if (name == NativeSampleModule::kModuleName) {
-+    return std::make_shared<NativeSampleModule>(jsInvoker);
-+  }
-
-  // And we fallback to the CXX module providers autolinked
-  return autolinking_cxxModuleProvider(name, jsInvoker);
-}
-
-// leave the rest of the file
-```
-
-These steps download the original `OnLoad.cpp` file from React Native, so that we can safely override it to load the C++ Turbo Native Module in the app.
-
-Once we downloaded the file, we can modify it by:
-
-- Including the header file that points to our module
-- Registering the Turbo Native Module so that when JS requires it, the app can return it.
-
-Now, you can run `yarn android` from the project root to see your app building successfully.
-
-### iOS
-
-To make sure that the iOS app can effectively build the C++ Turbo Native Module, we need to:
-
-1. Install pods and run Codegen.
-2. Add the `shared` folder to our iOS project.
-3. Register the C++ Turbo Native Module in the application.
-
-#### 1. Install Pods and Run Codegen.
-
-The first step we need to run is the usual steps we run every time we have to prepare our iOS application. CocoaPods is the tool we use to setup and install React Native dependencies and, as part of the process, it will also run Codegen for us.
-
-```bash
-cd ios
-bundle install
-bundle exec pod install
-```
-
-#### 2. Add the shared folder to the iOS project
-
-This step adds the `shared` folder to the project to make it visible to Xcode.
-
-1. Open the CocoaPods generated Xcode Workspace.
-
-```bash
-cd ios
-open SampleApp.xcworkspace
-```
-
-2. Click on the `SampleApp` project on the left and select `Add files to "Sample App"...`.
-
-![Add Files to Sample App...](/docs/assets/AddFilesToXcode1.png)
-
-3. Select the `shared` folder and click on `Add`.
-
-![Add Files to Sample App...](/docs/assets/AddFilesToXcode2.png)
-
-If you did everything right, your project on the left should look like this:
-
-![Xcode Project](/docs/assets/CxxTMGuideXcodeProject.png)
-
-#### 3. Registering the Cxx Turbo Native Module in your app
-
-To register a pure Cxx Turbo Native Module in your app, you need to:
-
-1. Create a `ModuleProvider` for the Native Module
-2. Configure the `package.json` to associate the JS module name with the ModuleProvider class.
-
-The ModuleProvider is an Objective-C++ that glues together the Pure C++ module with the rest of your iOS App.
-
-##### 3.1 Create the ModuleProvider
-
-1. From Xcode, select the `SampleApp` project and press <kbd>⌘</kbd> + <kbd>N</kbd> to create a new file.
-2. Select the `Cocoa Touch Class` template
-3. Add the name `NativeSampleModuleProvider` (keep the other field as `Subclass of: NSObject` and `Language: Objective-C`)
-4. Click Next to generate the files.
-5. Rename the `NativeSampleModuleProvider.m` to `NativeSampleModuleProvider.mm`. The `mm` extension denotes an Objective-C++ file.
-6. Implement the content of the `NativeSampleModuleProvider.h` with the following:
-
-```objc title="NativeSampleModuleProvider.h"
-
-#import <Foundation/Foundation.h>
-#import <ReactCommon/RCTTurboModule.h>
-
-NS_ASSUME_NONNULL_BEGIN
-
-@interface NativeSampleModuleProvider : NSObject <RCTModuleProvider>
-
-@end
-
-NS_ASSUME_NONNULL_END
-```
-
-This declares a `NativeSampleModuleProvider` object that conforms to the `RCTModuleProvider` protocol.
-
-7. Implement the content of the `NativeSampleModuleProvider.mm` with the following:
-
-```objc title="NativeSampleModuleProvider.mm"
-
-#import "NativeSampleModuleProvider.h"
-#import <ReactCommon/CallInvoker.h>
-#import <ReactCommon/TurboModule.h>
-#import "NativeSampleModule.h"
-
-@implementation NativeSampleModuleProvider
-
-- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
-    (const facebook::react::ObjCTurboModule::InitParams &)params
-{
-  return std::make_shared<facebook::react::NativeSampleModule>(params.jsInvoker);
-}
-
-@end
-```
-
-This code implements the `RCTModuleProvider` protocol by creating the pure C++ `NativeSampleModule` when the `getTurboModule:` method is called.
-
-##### 3.2 Update the package.json
-
-The last step consists in updating the `package.json` to tell React Native about the link between the JS specs of the Native Module and the concrete implementation of those spec in native code.
-
-Modify the `package.json` as it follows:
-
-```json title="package.json"
-     "start": "react-native start",
-     "test": "jest"
-   },
-   "codegenConfig": {
-     "name": "AppSpecs",
-     "type": "modules",
-     "jsSrcsDir": "specs",
-     "android": {
-       "javaPackageName": "com.sampleapp.specs"
-     // highlight-add-start
-     },
-     "ios": {
-        "modulesProvider": {
-          "NativeSampleModule":  "NativeSampleModuleProvider"
-        }
-     }
-     // highlight-add-end
-   },
-
-   "dependencies": {
-```
-
-At this point, you need to re-install the pods to make sure that codegen runs again to generate the new files:
-
-```bash
-# from the ios folder
-bundle exec pod install
-open SampleApp.xcworkspace
-```
-
-If you now build your application from Xcode, you should be able to build successfully.
-
-## 5. Testing your Code
-
-It's now time to access our C++ Turbo Native Module from JS. To do so, we have to modify the `App.tsx` file to import the Turbo Native Module and to call it in our code.
-
-1. Open the `App.tsx` file.
-2. Replace the content of the template with the following code:
-
-```tsx title="App.tsx"
-import React from 'react';
-import {
-  Button,
-  SafeAreaView,
-  StyleSheet,
-  Text,
-  TextInput,
-  View,
-} from 'react-native';
-import SampleTurboModule from './specs/NativeSampleModule';
-
-function App(): React.JSX.Element {
-  const [value, setValue] = React.useState('');
-  const [reversedValue, setReversedValue] = React.useState('');
-
-  const onPress = () => {
-    const revString = SampleTurboModule.reverseString(value);
-    setReversedValue(revString);
-  };
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <View>
-        <Text style={styles.title}>
-          Welcome to C++ Turbo Native Module Example
-        </Text>
-        <Text>Write down here the text you want to reverse</Text>
-        <TextInput
-          style={styles.textInput}
-          placeholder="Write your text here"
-          onChangeText={setValue}
-          value={value}
-        />
-        <Button title="Reverse" onPress={onPress} />
-        <Text>Reversed text: {reversedValue}</Text>
-      </View>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  title: {
-    fontSize: 18,
-    marginBottom: 20,
-  },
-  textInput: {
-    borderColor: 'black',
-    borderWidth: 1,
-    borderRadius: 5,
-    padding: 10,
-    marginTop: 10,
-  },
-});
-
-export default App;
-```
-
-The interesting lines in this app are:
-
-- `import SampleTurboModule from './specs/NativeSampleModule';`: this line imports the Turbo Native Module in the app,
-- `const revString = SampleTurboModule.reverseString(value);` in the `onPress` callback: this is how you can use the Turbo Native Module in your app.
-
-:::warning
-For the sake of this example and to keep it as short as possible, we directly imported the spec file in our app.
-The best practice in this case is to create a separate file to wrap the specs and use that file into your application.
-This allows you to prepare the input for the specs and gives you more control over them in JS.
-:::
-
-Congratulations, you wrote your first C++ Turbo Native Module!
-
-| <center>Android</center>                                                                             | <center>iOS</center>                                                                          |
-| ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
-| <center><img src="/docs/assets/CxxGuideAndroidVideo.gif" alt="Android Video" height="600"/></center> | <center><img src="/docs/assets/CxxGuideIOSVideo.gif" alt="iOS video" height="600" /></center> |
+import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameForCurrentVersion';
+import {getCurrentVersion} from '@site/src/getCurrentVersion';
+import CodeBlock from '@theme/CodeBlock';
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+# Cross-Platform Native Modules (C++)
+
+Writing a module in C++ is the best way to share platform-agnostic code between Android and iOS. With pure C++ modules, you can write your logic only once and reuse it right away from all the platforms, without the need of writing platform-specific code.
+
+In this guide, we will go through the creation of a pure C++ Turbo Native Module:
+
+1. Create the JS specs
+2. Configure Codegen to generate the scaffolding
+3. Implement the Native logic
+4. Register the module in the Android and iOS application
+5. Test your changes in JS
+
+The rest of this guide assumes that you have created your application running the command:
+
+<CodeBlock language="bash" title="shell">
+{`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`}
+</CodeBlock>
+
+## 1. Create the JS specs
+
+Pure C++ Turbo Native Modules are Turbo Native Modules. They need a specification file (also called spec file) so that Codegen can create the scaffolding code for us. The specification file is also what we use to access the Turbo Native Module in JS.
+
+Spec files need to be written in a typed JS dialect. React Native currently supports Flow or TypeScript.
+
+1. Inside the root folder of your app, create a new folder called `specs`.
+2. Create a new file called `NativeSampleModule.ts` with the following code:
+
+:::warning
+All Native Turbo Module spec files must have the prefix `Native`, otherwise Codegen will ignore them.
+:::
+
+<Tabs groupId="tnm-specs" queryString defaultValue={constants.defaultJavaScriptSpecLanguages} values={constants.javaScriptSpecLanguages}>
+<TabItem value="flow">
+
+```ts title="specs/NativeSampleModule.ts"
+// @flow
+import type {TurboModule} from 'react-native'
+import { TurboModuleRegistry } from "react-native";
+
+export interface Spec extends TurboModule {
+  +reverseString: (input: string) => string;
+}
+
+export default (TurboModuleRegistry.getEnforcing<Spec>(
+  "NativeSampleModule"
+): Spec);
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```ts title="specs/NativeSampleModule.ts"
+import {TurboModule, TurboModuleRegistry} from 'react-native';
+
+export interface Spec extends TurboModule {
+  readonly reverseString: (input: string) => string;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>(
+  'NativeSampleModule',
+);
+```
+
+</TabItem>
+</Tabs>
+
+## 2. Configure Codegen
+
+The next step is to configure [Codegen](what-is-codegen.mdx) in your `package.json`. Update the file to include:
+
+```json title="package.json"
+     "start": "react-native start",
+     "test": "jest"
+   },
+   // highlight-add-start
+   "codegenConfig": {
+     "name": "AppSpecs",
+     "type": "modules",
+     "jsSrcsDir": "specs",
+     "android": {
+       "javaPackageName": "com.sampleapp.specs"
+     }
+   },
+   // highlight-add-end
+   "dependencies": {
+```
+
+This configuration tells Codegen to look for spec files in the `specs` folder. It also instructs Codegen to only generate code for `modules` and to namespace the generated code as `AppSpecs`.
+
+## 3. Write the Native Code
+
+Writing a C++ Turbo Native Module allows you to share the code between Android and iOS. Therefore we will be writing the code once, and we will look into what changes we need to apply to the platforms so that the C++ code can be picked up.
+
+1. Create a folder named `shared` at the same level as the `android` and `ios` folders.
+2. Inside the `shared` folder, create a new file called `NativeSampleModule.h`.
+
+   ```cpp title="shared/NativeSampleModule.h"
+   #pragma once
+
+   #include <AppSpecsJSI.h>
+
+   #include <memory>
+   #include <string>
+
+   namespace facebook::react {
+
+   class NativeSampleModule : public NativeSampleModuleCxxSpec<NativeSampleModule> {
+   public:
+     NativeSampleModule(std::shared_ptr<CallInvoker> jsInvoker);
+
+     std::string reverseString(jsi::Runtime& rt, std::string input);
+   };
+
+   } // namespace facebook::react
+
+   ```
+
+3. Inside the `shared` folder, create a new file called `NativeSampleModule.cpp`.
+
+   ```cpp title="shared/NativeSampleModule.cpp"
+   #include "NativeSampleModule.h"
+
+   namespace facebook::react {
+
+   NativeSampleModule::NativeSampleModule(std::shared_ptr<CallInvoker> jsInvoker)
+       : NativeSampleModuleCxxSpec(std::move(jsInvoker)) {}
+
+   std::string NativeSampleModule::reverseString(jsi::Runtime& rt, std::string input) {
+     return std::string(input.rbegin(), input.rend());
+   }
+
+   } // namespace facebook::react
+   ```
+
+Let's have a look at the two files we created:
+
+- The `NativeSampleModule.h` file is the header file for a Pure C++ TurboModule. The `include` statements make sure that we include the specs that will be created by Codegen and that contains the interface and the base class we need to implement.
+- The module lives in the `facebook::react` namespace to have access to all the types that live in that namespace.
+- The class `NativeSampleModule` is the actual Turbo Native Module class and it extends the `NativeSampleModuleCxxSpec` class which contains some glue code and boilerplate code to let this class behave as a Turbo Native Module.
+- Finally, we have the constructor, that accepts a pointer to the `CallInvoker`, to communicate with JS if needed and the function's prototype we have to implement.
+
+The `NativeSampleModule.cpp` file is the actual implementation of our Turbo Native Module and implements the constructor and the method that we declared in the specs.
+
+## 4. Register the Module in the platform
+
+The next steps will let us register the module in the platform. This is the step that exposes the native code to JS so that the React Native application can finally call the native methods from the JS layer.
+
+This is the only time when we will have to write some platform-specific code.
+
+### Android
+
+To make sure that the Android app can effectively build the C++ Turbo Native Module, we need to:
+
+1. Create a `CMakeLists.txt` to access our C++ code.
+2. Modify `build.gradle` to point to the newly created `CMakeLists.txt` file.
+3. Create an `OnLoad.cpp` file in our Android app to register the new Turbo Native Module.
+
+#### 1. Create the `CMakeLists.txt` file
+
+Android uses CMake to build. CMake needs to access the files we defined in our shared folder to be able to build them.
+
+1. Create a new folder `SampleApp/android/app/src/main/jni`. The `jni` folder is where the C++ side of Android lives.
+2. Create a `CMakeLists.txt` file and add this context:
+
+```shell title="CMakeLists.txt"
+cmake_minimum_required(VERSION 3.13)
+
+# Define the library name here.
+project(appmodules)
+
+# This file includes all the necessary to let you build your React Native application
+include(${REACT_ANDROID_DIR}/cmake-utils/ReactNative-application.cmake)
+
+# Define where the additional source code lives. We need to crawl back the jni, main, src, app, android folders
+target_sources(${CMAKE_PROJECT_NAME} PRIVATE ../../../../../shared/NativeSampleModule.cpp)
+
+# Define where CMake can find the additional header files. We need to crawl back the jni, main, src, app, android folders
+target_include_directories(${CMAKE_PROJECT_NAME} PUBLIC ../../../../../shared)
+```
+
+The CMake file does the following things:
+
+- Defines the `appmodules` library, where all the app C++ code will be included.
+- Loads the base React Native's CMake file.
+- Adds the Module C++ source code that we need to build with the `target_sources` directives. By default React Native will already populate the `appmodules` library with default sources, here we include our custom one. You can see that we need to crawl back from the `jni` folder to the `shared` folder where our C++ Turbo Module lives.
+- Specifies where CMake can find the module header files. Also in this case we need to crawl back from the `jni` folder.
+
+#### 2. Modify `build.gradle` to include the custom C++ code
+
+Gradle is the tool that orchestrates the Android build. We need to tell it where it can find the `CMake` files to build the Turbo Native Module.
+
+1. Open the `SampleApp/android/app/build.gradle` file.
+2. Add the following block into the Gradle file, within the existing `android` block:
+
+```diff title="android/app/build.gradle"
+    buildTypes {
+        debug {
+            signingConfig signingConfigs.debug
+        }
+        release {
+            // Caution! In production, you need to generate your own keystore file.
+            // see https://reactnative.dev/docs/signed-apk-android.
+            signingConfig signingConfigs.debug
+            minifyEnabled enableProguardInReleaseBuilds
+            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+        }
+    }
+
++   externalNativeBuild {
++       cmake {
++           path "src/main/jni/CMakeLists.txt"
++       }
++   }
+}
+```
+
+This block tells the Gradle file where to look for the CMake file. The path is relative to the folder where the `build.gradle` file lives, so we need to add the path to the `CMakeLists.txt` files in the `jni` folder.
+
+#### 3. Register the new Turbo Native Module
+
+The final step is to register the new C++ Turbo Native Module in the runtime, so that when JS requires the C++ Turbo Native Module, the app knows where to find it and can return it.
+
+1. From the folder `SampleApp/android/app/src/main/jni`, run the following command:
+
+<CodeBlock language="sh" title="shell">
+{`curl -O https://raw.githubusercontent.com/facebook/react-native/${getCoreBranchNameForCurrentVersion()}/packages/react-native/ReactAndroid/cmake-utils/default-app-setup/OnLoad.cpp`}
+</CodeBlock>
+
+2. Then, modify this file as follows:
+
+```diff title="android/app/src/main/jni/OnLoad.cpp"
+#include <DefaultComponentsRegistry.h>
+#include <DefaultTurboModuleManagerDelegate.h>
+#include <autolinking.h>
+#include <fbjni/fbjni.h>
+#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
+#include <rncore.h>
+
++ // Include the NativeSampleModule header
++ #include <NativeSampleModule.h>
+
+//...
+
+std::shared_ptr<TurboModule> cxxModuleProvider(
+    const std::string& name,
+    const std::shared_ptr<CallInvoker>& jsInvoker) {
+  // Here you can provide your CXX Turbo Modules coming from
+  // either your application or from external libraries. The approach to follow
+  // is similar to the following (for a module called `NativeCxxModuleExample`):
+  //
+  // if (name == NativeCxxModuleExample::kModuleName) {
+  //   return std::make_shared<NativeCxxModuleExample>(jsInvoker);
+  // }
+
++  // This code registers the module so that when the JS side asks for it, the app can return it
++  if (name == NativeSampleModule::kModuleName) {
++    return std::make_shared<NativeSampleModule>(jsInvoker);
++  }
+
+  // And we fallback to the CXX module providers autolinked
+  return autolinking_cxxModuleProvider(name, jsInvoker);
+}
+
+// leave the rest of the file
+```
+
+These steps download the original `OnLoad.cpp` file from React Native, so that we can safely override it to load the C++ Turbo Native Module in the app.
+
+Once we downloaded the file, we can modify it by:
+
+- Including the header file that points to our module
+- Registering the Turbo Native Module so that when JS requires it, the app can return it.
+
+Now, you can run `yarn android` from the project root to see your app building successfully.
+
+### iOS
+
+To make sure that the iOS app can effectively build the C++ Turbo Native Module, we need to:
+
+1. Install pods and run Codegen.
+2. Add the `shared` folder to our iOS project.
+3. Register the C++ Turbo Native Module in the application.
+
+#### 1. Install Pods and Run Codegen.
+
+The first step we need to run is the usual steps we run every time we have to prepare our iOS application. CocoaPods is the tool we use to setup and install React Native dependencies and, as part of the process, it will also run Codegen for us.
+
+```bash
+cd ios
+bundle install
+bundle exec pod install
+```
+
+#### 2. Add the shared folder to the iOS project
+
+This step adds the `shared` folder to the project to make it visible to Xcode.
+
+1. Open the CocoaPods generated Xcode Workspace.
+
+```bash
+cd ios
+open SampleApp.xcworkspace
+```
+
+2. Click on the `SampleApp` project on the left and select `Add files to "Sample App"...`.
+
+![Add Files to Sample App...](/docs/assets/AddFilesToXcode1.png)
+
+3. Select the `shared` folder and click on `Add`.
+
+![Add Files to Sample App...](/docs/assets/AddFilesToXcode2.png)
+
+If you did everything right, your project on the left should look like this:
+
+![Xcode Project](/docs/assets/CxxTMGuideXcodeProject.png)
+
+#### 3. Registering the Cxx Turbo Native Module in your app
+
+To register a pure Cxx Turbo Native Module in your app, you need to:
+
+1. Create a `ModuleProvider` for the Native Module
+2. Configure the `package.json` to associate the JS module name with the ModuleProvider class.
+
+The ModuleProvider is an Objective-C++ that glues together the Pure C++ module with the rest of your iOS App.
+
+##### 3.1 Create the ModuleProvider
+
+1. From Xcode, select the `SampleApp` project and press <kbd>⌘</kbd> + <kbd>N</kbd> to create a new file.
+2. Select the `Cocoa Touch Class` template
+3. Add the name `NativeSampleModuleProvider` (keep the other field as `Subclass of: NSObject` and `Language: Objective-C`)
+4. Click Next to generate the files.
+5. Rename the `NativeSampleModuleProvider.m` to `NativeSampleModuleProvider.mm`. The `mm` extension denotes an Objective-C++ file.
+6. Implement the content of the `NativeSampleModuleProvider.h` with the following:
+
+```objc title="NativeSampleModuleProvider.h"
+
+#import <Foundation/Foundation.h>
+#import <ReactCommon/RCTTurboModule.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface NativeSampleModuleProvider : NSObject <RCTModuleProvider>
+
+@end
+
+NS_ASSUME_NONNULL_END
+```
+
+This declares a `NativeSampleModuleProvider` object that conforms to the `RCTModuleProvider` protocol.
+
+7. Implement the content of the `NativeSampleModuleProvider.mm` with the following:
+
+```objc title="NativeSampleModuleProvider.mm"
+
+#import "NativeSampleModuleProvider.h"
+#import <ReactCommon/CallInvoker.h>
+#import <ReactCommon/TurboModule.h>
+#import "NativeSampleModule.h"
+
+@implementation NativeSampleModuleProvider
+
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
+    (const facebook::react::ObjCTurboModule::InitParams &)params
+{
+  return std::make_shared<facebook::react::NativeSampleModule>(params.jsInvoker);
+}
+
+@end
+```
+
+This code implements the `RCTModuleProvider` protocol by creating the pure C++ `NativeSampleModule` when the `getTurboModule:` method is called.
+
+##### 3.2 Update the package.json
+
+The last step consists in updating the `package.json` to tell React Native about the link between the JS specs of the Native Module and the concrete implementation of those spec in native code.
+
+Modify the `package.json` as it follows:
+
+```json title="package.json"
+     "start": "react-native start",
+     "test": "jest"
+   },
+   "codegenConfig": {
+     "name": "AppSpecs",
+     "type": "modules",
+     "jsSrcsDir": "specs",
+     "android": {
+       "javaPackageName": "com.sampleapp.specs"
+     // highlight-add-start
+     },
+     "ios": {
+        "modulesProvider": {
+          "NativeSampleModule":  "NativeSampleModuleProvider"
+        }
+     }
+     // highlight-add-end
+   },
+
+   "dependencies": {
+```
+
+At this point, you need to re-install the pods to make sure that codegen runs again to generate the new files:
+
+```bash
+# from the ios folder
+bundle exec pod install
+open SampleApp.xcworkspace
+```
+
+If you now build your application from Xcode, you should be able to build successfully.
+
+## 5. Testing your Code
+
+It's now time to access our C++ Turbo Native Module from JS. To do so, we have to modify the `App.tsx` file to import the Turbo Native Module and to call it in our code.
+
+1. Open the `App.tsx` file.
+2. Replace the content of the template with the following code:
+
+```tsx title="App.tsx"
+import {type JSX, useState} from 'react';
+import {
+  Button,
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+import SampleTurboModule from './specs/NativeSampleModule';
+
+function App(): JSX.Element {
+  const [value, setValue] = useState('');
+  const [reversedValue, setReversedValue] = useState('');
+
+  const onPress = () => {
+    const revString = SampleTurboModule.reverseString(value);
+    setReversedValue(revString);
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View>
+        <Text style={styles.title}>
+          Welcome to C++ Turbo Native Module Example
+        </Text>
+        <Text>Write down here the text you want to reverse</Text>
+        <TextInput
+          style={styles.textInput}
+          placeholder="Write your text here"
+          onChangeText={setValue}
+          value={value}
+        />
+        <Button title="Reverse" onPress={onPress} />
+        <Text>Reversed text: {reversedValue}</Text>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 18,
+    marginBottom: 20,
+  },
+  textInput: {
+    borderColor: 'black',
+    borderWidth: 1,
+    borderRadius: 5,
+    padding: 10,
+    marginTop: 10,
+  },
+});
+
+export default App;
+```
+
+The interesting lines in this app are:
+
+- `import SampleTurboModule from './specs/NativeSampleModule';`: this line imports the Turbo Native Module in the app,
+- `const revString = SampleTurboModule.reverseString(value);` in the `onPress` callback: this is how you can use the Turbo Native Module in your app.
+
+:::warning
+For the sake of this example and to keep it as short as possible, we directly imported the spec file in our app.
+The best practice in this case is to create a separate file to wrap the specs and use that file into your application.
+This allows you to prepare the input for the specs and gives you more control over them in JS.
+:::
+
+Congratulations, you wrote your first C++ Turbo Native Module!
+
+| <center>Android</center>                                                                             | <center>iOS</center>                                                                          |
+| ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
+| <center><img src="/docs/assets/CxxGuideAndroidVideo.gif" alt="Android Video" height="600"/></center> | <center><img src="/docs/assets/CxxGuideIOSVideo.gif" alt="iOS video" height="600" /></center> |
diff --git a/website/versioned_docs/version-0.81/toastandroid.md b/website/versioned_docs/version-0.81/toastandroid.md
index 9ca5e906d71..d898525a6fd 100644
--- a/website/versioned_docs/version-0.81/toastandroid.md
+++ b/website/versioned_docs/version-0.81/toastandroid.md
@@ -15,7 +15,6 @@ The `showWithGravityAndOffset(message, duration, gravity, xOffset, yOffset)` met
 > Starting with Android 11 (API level 30), setting the gravity has no effect on text toasts. Read about the changes [here](https://developer.android.com/about/versions/11/behavior-changes-11#text-toast-api-changes).
 
 ```SnackPlayer name=Toast%20Android%20API%20Example&supportedPlatforms=android
-import React from 'react';
 import {StyleSheet, ToastAndroid, Button, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.81/touchablehighlight.md b/website/versioned_docs/version-0.81/touchablehighlight.md
index b5427ecbd2b..2019e858b01 100644
--- a/website/versioned_docs/version-0.81/touchablehighlight.md
+++ b/website/versioned_docs/version-0.81/touchablehighlight.md
@@ -1,207 +1,207 @@
----
-id: touchablehighlight
-title: TouchableHighlight
----
-
-> If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
-
-A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view.
-
-The underlay comes from wrapping the child in a new View, which can affect layout, and sometimes cause unwanted visual artifacts if not used correctly, for example if the backgroundColor of the wrapped view isn't explicitly set to an opaque color.
-
-TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View.
-
-```tsx
-function MyComponent(props: MyComponentProps) {
-  return (
-    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
-      <Text>My Component</Text>
-    </View>
-  );
-}
-
-<TouchableHighlight
-  activeOpacity={0.6}
-  underlayColor="#DDDDDD"
-  onPress={() => alert('Pressed!')}>
-  <MyComponent />
-</TouchableHighlight>;
-```
-
-## Example
-
-```SnackPlayer name=TouchableHighlight%20Example
-import React, {useState} from 'react';
-import {StyleSheet, Text, TouchableHighlight, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const TouchableHighlightExample = () => {
-  const [count, setCount] = useState(0);
-  const onPress = () => setCount(count + 1);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <TouchableHighlight onPress={onPress}>
-          <View style={styles.button}>
-            <Text>Touch Here</Text>
-          </View>
-        </TouchableHighlight>
-        <View style={styles.countContainer}>
-          <Text style={styles.countText}>{count || null}</Text>
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: 10,
-  },
-  button: {
-    alignItems: 'center',
-    backgroundColor: '#DDDDDD',
-    padding: 10,
-  },
-  countContainer: {
-    alignItems: 'center',
-    padding: 10,
-  },
-  countText: {
-    color: '#FF00FF',
-  },
-});
-
-export default TouchableHighlightExample;
-```
-
----
-
-# Reference
-
-## Props
-
-### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
-
-Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
-
----
-
-### `activeOpacity`
-
-Determines what the opacity of the wrapped view should be when touch is active. The value should be between 0 and 1. Defaults to 0.85. Requires `underlayColor` to be set.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `onHideUnderlay`
-
-Called immediately after the underlay is hidden.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onShowUnderlay`
-
-Called immediately after the underlay is shown.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `style`
-
-| Type       |
-| ---------- |
-| View.style |
-
----
-
-### `underlayColor`
-
-The color of the underlay that will show through when the touch is active.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `hasTVPreferredFocus` <div className="label ios">iOS</div>
-
-_(Apple TV only)_ TV preferred focus (see documentation for the View component).
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `nextFocusDown` <div className="label android">Android</div>
-
-TV next focus down (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusForward` <div className="label android">Android</div>
-
-TV next focus forward (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusLeft` <div className="label android">Android</div>
-
-TV next focus left (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusRight` <div className="label android">Android</div>
-
-TV next focus right (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusUp` <div className="label android">Android</div>
-
-TV next focus up (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `testOnly_pressed`
-
-Handy for snapshot tests.
-
-| Type |
-| ---- |
-| bool |
+---
+id: touchablehighlight
+title: TouchableHighlight
+---
+
+> If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
+
+A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view.
+
+The underlay comes from wrapping the child in a new View, which can affect layout, and sometimes cause unwanted visual artifacts if not used correctly, for example if the backgroundColor of the wrapped view isn't explicitly set to an opaque color.
+
+TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View.
+
+```tsx
+function MyComponent(props: MyComponentProps) {
+  return (
+    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
+      <Text>My Component</Text>
+    </View>
+  );
+}
+
+<TouchableHighlight
+  activeOpacity={0.6}
+  underlayColor="#DDDDDD"
+  onPress={() => alert('Pressed!')}>
+  <MyComponent />
+</TouchableHighlight>;
+```
+
+## Example
+
+```SnackPlayer name=TouchableHighlight%20Example
+import {useState} from 'react';
+import {StyleSheet, Text, TouchableHighlight, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const TouchableHighlightExample = () => {
+  const [count, setCount] = useState(0);
+  const onPress = () => setCount(count + 1);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <TouchableHighlight onPress={onPress}>
+          <View style={styles.button}>
+            <Text>Touch Here</Text>
+          </View>
+        </TouchableHighlight>
+        <View style={styles.countContainer}>
+          <Text style={styles.countText}>{count || null}</Text>
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#DDDDDD',
+    padding: 10,
+  },
+  countContainer: {
+    alignItems: 'center',
+    padding: 10,
+  },
+  countText: {
+    color: '#FF00FF',
+  },
+});
+
+export default TouchableHighlightExample;
+```
+
+---
+
+# Reference
+
+## Props
+
+### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
+
+Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
+
+---
+
+### `activeOpacity`
+
+Determines what the opacity of the wrapped view should be when touch is active. The value should be between 0 and 1. Defaults to 0.85. Requires `underlayColor` to be set.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `onHideUnderlay`
+
+Called immediately after the underlay is hidden.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onShowUnderlay`
+
+Called immediately after the underlay is shown.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `style`
+
+| Type       |
+| ---------- |
+| View.style |
+
+---
+
+### `underlayColor`
+
+The color of the underlay that will show through when the touch is active.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `hasTVPreferredFocus` <div className="label ios">iOS</div>
+
+_(Apple TV only)_ TV preferred focus (see documentation for the View component).
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `nextFocusDown` <div className="label android">Android</div>
+
+TV next focus down (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusForward` <div className="label android">Android</div>
+
+TV next focus forward (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusLeft` <div className="label android">Android</div>
+
+TV next focus left (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusRight` <div className="label android">Android</div>
+
+TV next focus right (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusUp` <div className="label android">Android</div>
+
+TV next focus up (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `testOnly_pressed`
+
+Handy for snapshot tests.
+
+| Type |
+| ---- |
+| bool |
diff --git a/website/versioned_docs/version-0.81/touchablenativefeedback.md b/website/versioned_docs/version-0.81/touchablenativefeedback.md
index 4cb291a607b..e61782dc669 100644
--- a/website/versioned_docs/version-0.81/touchablenativefeedback.md
+++ b/website/versioned_docs/version-0.81/touchablenativefeedback.md
@@ -1,217 +1,217 @@
----
-id: touchablenativefeedback
-title: TouchableNativeFeedback
----
-
-> If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
-
-A wrapper for making views respond properly to touches (Android only). On Android this component uses native state drawable to display touch feedback.
-
-At the moment it only supports having a single View instance as a child node, as it's implemented by replacing that View with another instance of RCTView node with some additional properties set.
-
-Background drawable of native feedback touchable can be customized with `background` property.
-
-## Example
-
-```SnackPlayer name=TouchableNativeFeedback%20Android%20Component%20Example&supportedPlatforms=android
-import React, {useState} from 'react';
-import {Text, View, StyleSheet, TouchableNativeFeedback} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [rippleColor, setRippleColor] = useState(randomHexColor());
-  const [rippleOverflow, setRippleOverflow] = useState(false);
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <TouchableNativeFeedback
-          onPress={() => {
-            setRippleColor(randomHexColor());
-            setRippleOverflow(!rippleOverflow);
-          }}
-          background={TouchableNativeFeedback.Ripple(
-            rippleColor,
-            rippleOverflow,
-          )}>
-          <View style={styles.touchable}>
-            <Text style={styles.text}>TouchableNativeFeedback</Text>
-          </View>
-        </TouchableNativeFeedback>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const randomHexColor = () => {
-  return '#000000'.replace(/0/g, function () {
-    return Math.round(Math.random() * 16).toString(16);
-  });
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    backgroundColor: 'black',
-    paddingHorizontal: 20,
-  },
-  touchable: {
-    flex: 0.33,
-    justifyContent: 'center',
-    backgroundColor: '#eeeeee',
-    borderColor: 'black',
-    borderWidth: 1,
-  },
-  text: {
-    alignSelf: 'center',
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Props
-
-### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
-
-Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
-
----
-
-### `background`
-
-Determines the type of background drawable that's going to be used to display feedback. It takes an object with `type` property and extra data depending on the `type`. It's recommended to use one of the static methods to generate that dictionary.
-
-| Type               |
-| ------------------ |
-| backgroundPropType |
-
----
-
-### `useForeground`
-
-Set to true to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them.
-
-Check TouchableNativeFeedback.canUseNativeForeground() first, as this is only available on Android 6.0 and above. If you try to use this on older versions you will get a warning and fallback to background.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `hasTVPreferredFocus` <div className="label android">Android</div>
-
-TV preferred focus (see documentation for the View component).
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `nextFocusDown` <div className="label android">Android</div>
-
-TV next focus down (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusForward` <div className="label android">Android</div>
-
-TV next focus forward (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusLeft` <div className="label android">Android</div>
-
-TV next focus left (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusRight` <div className="label android">Android</div>
-
-TV next focus right (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusUp` <div className="label android">Android</div>
-
-TV next focus up (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
-## Methods
-
-### `SelectableBackground()`
-
-```tsx
-static SelectableBackground(
-  rippleRadius: number | null,
-): ThemeAttributeBackgroundPropType;
-```
-
-Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.
-
----
-
-### `SelectableBackgroundBorderless()`
-
-```tsx
-static SelectableBackgroundBorderless(
-  rippleRadius: number | null,
-): ThemeAttributeBackgroundPropType;
-```
-
-Creates an object that represent android theme's default background for borderless selectable elements (`?android:attr/selectableItemBackgroundBorderless`). Available on android API level 21+. `rippleRadius` parameter controls the radius of the ripple effect.
-
----
-
-### `Ripple()`
-
-```tsx
-static Ripple(
-  color: ColorValue,
-  borderless: boolean,
-  rippleRadius?: number | null,
-): RippleBackgroundPropType;
-```
-
-Creates an object that represents ripple drawable with specified color (as a string). If property `borderless` evaluates to true the ripple will render outside of the view bounds (see native actionbar buttons as an example of that behavior). This background type is available on Android API level 21+.
-
-**Parameters:**
-
-| Name         | Type    | Required | Description                                 |
-| ------------ | ------- | -------- | ------------------------------------------- |
-| color        | string  | Yes      | The ripple color                            |
-| borderless   | boolean | Yes      | If the ripple can render outside its bounds |
-| rippleRadius | ?number | No       | controls the radius of the ripple effect    |
-
----
-
-### `canUseNativeForeground()`
-
-```tsx
-static canUseNativeForeground(): boolean;
-```
+---
+id: touchablenativefeedback
+title: TouchableNativeFeedback
+---
+
+> If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
+
+A wrapper for making views respond properly to touches (Android only). On Android this component uses native state drawable to display touch feedback.
+
+At the moment it only supports having a single View instance as a child node, as it's implemented by replacing that View with another instance of RCTView node with some additional properties set.
+
+Background drawable of native feedback touchable can be customized with `background` property.
+
+## Example
+
+```SnackPlayer name=TouchableNativeFeedback%20Android%20Component%20Example&supportedPlatforms=android
+import {useState} from 'react';
+import {Text, View, StyleSheet, TouchableNativeFeedback} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [rippleColor, setRippleColor] = useState(randomHexColor());
+  const [rippleOverflow, setRippleOverflow] = useState(false);
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <TouchableNativeFeedback
+          onPress={() => {
+            setRippleColor(randomHexColor());
+            setRippleOverflow(!rippleOverflow);
+          }}
+          background={TouchableNativeFeedback.Ripple(
+            rippleColor,
+            rippleOverflow,
+          )}>
+          <View style={styles.touchable}>
+            <Text style={styles.text}>TouchableNativeFeedback</Text>
+          </View>
+        </TouchableNativeFeedback>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const randomHexColor = () => {
+  return '#000000'.replace(/0/g, function () {
+    return Math.round(Math.random() * 16).toString(16);
+  });
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: 'black',
+    paddingHorizontal: 20,
+  },
+  touchable: {
+    flex: 0.33,
+    justifyContent: 'center',
+    backgroundColor: '#eeeeee',
+    borderColor: 'black',
+    borderWidth: 1,
+  },
+  text: {
+    alignSelf: 'center',
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Props
+
+### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
+
+Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
+
+---
+
+### `background`
+
+Determines the type of background drawable that's going to be used to display feedback. It takes an object with `type` property and extra data depending on the `type`. It's recommended to use one of the static methods to generate that dictionary.
+
+| Type               |
+| ------------------ |
+| backgroundPropType |
+
+---
+
+### `useForeground`
+
+Set to true to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them.
+
+Check TouchableNativeFeedback.canUseNativeForeground() first, as this is only available on Android 6.0 and above. If you try to use this on older versions you will get a warning and fallback to background.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `hasTVPreferredFocus` <div className="label android">Android</div>
+
+TV preferred focus (see documentation for the View component).
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `nextFocusDown` <div className="label android">Android</div>
+
+TV next focus down (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusForward` <div className="label android">Android</div>
+
+TV next focus forward (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusLeft` <div className="label android">Android</div>
+
+TV next focus left (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusRight` <div className="label android">Android</div>
+
+TV next focus right (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusUp` <div className="label android">Android</div>
+
+TV next focus up (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+## Methods
+
+### `SelectableBackground()`
+
+```tsx
+static SelectableBackground(
+  rippleRadius: number | null,
+): ThemeAttributeBackgroundPropType;
+```
+
+Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.
+
+---
+
+### `SelectableBackgroundBorderless()`
+
+```tsx
+static SelectableBackgroundBorderless(
+  rippleRadius: number | null,
+): ThemeAttributeBackgroundPropType;
+```
+
+Creates an object that represent android theme's default background for borderless selectable elements (`?android:attr/selectableItemBackgroundBorderless`). Available on android API level 21+. `rippleRadius` parameter controls the radius of the ripple effect.
+
+---
+
+### `Ripple()`
+
+```tsx
+static Ripple(
+  color: ColorValue,
+  borderless: boolean,
+  rippleRadius?: number | null,
+): RippleBackgroundPropType;
+```
+
+Creates an object that represents ripple drawable with specified color (as a string). If property `borderless` evaluates to true the ripple will render outside of the view bounds (see native actionbar buttons as an example of that behavior). This background type is available on Android API level 21+.
+
+**Parameters:**
+
+| Name         | Type    | Required | Description                                 |
+| ------------ | ------- | -------- | ------------------------------------------- |
+| color        | string  | Yes      | The ripple color                            |
+| borderless   | boolean | Yes      | If the ripple can render outside its bounds |
+| rippleRadius | ?number | No       | controls the radius of the ripple effect    |
+
+---
+
+### `canUseNativeForeground()`
+
+```tsx
+static canUseNativeForeground(): boolean;
+```
diff --git a/website/versioned_docs/version-0.81/touchableopacity.md b/website/versioned_docs/version-0.81/touchableopacity.md
index 90bd4693681..ab460e71c2f 100644
--- a/website/versioned_docs/version-0.81/touchableopacity.md
+++ b/website/versioned_docs/version-0.81/touchableopacity.md
@@ -1,143 +1,143 @@
----
-id: touchableopacity
-title: TouchableOpacity
----
-
-> If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
-
-A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it.
-
-Opacity is controlled by wrapping the children in an `Animated.View`, which is added to the view hierarchy. Be aware that this can affect layout.
-
-## Example
-
-```SnackPlayer name=TouchableOpacity%20Example
-import React, {useState} from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [count, setCount] = useState(0);
-  const onPress = () => setCount(prevCount => prevCount + 1);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.countContainer}>
-          <Text>Count: {count}</Text>
-        </View>
-        <TouchableOpacity style={styles.button} onPress={onPress}>
-          <Text>Press Here</Text>
-        </TouchableOpacity>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: 10,
-  },
-  button: {
-    alignItems: 'center',
-    backgroundColor: '#DDDDDD',
-    padding: 10,
-  },
-  countContainer: {
-    alignItems: 'center',
-    padding: 10,
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Props
-
-### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
-
-Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
-
----
-
-### `style`
-
-| Type                           |
-| ------------------------------ |
-| [View.style](view-style-props) |
-
----
-
-### `activeOpacity`
-
-Determines what the opacity of the wrapped view should be when touch is active. Defaults to `0.2`.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `hasTVPreferredFocus` <div className="label ios">iOS</div>
-
-_(Apple TV only)_ TV preferred focus (see documentation for the View component).
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `nextFocusDown` <div className="label android">Android</div>
-
-TV next focus down (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusForward` <div className="label android">Android</div>
-
-TV next focus forward (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusLeft` <div className="label android">Android</div>
-
-TV next focus left (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusRight` <div className="label android">Android</div>
-
-TV next focus right (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusUp` <div className="label android">Android</div>
-
-TV next focus up (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
+---
+id: touchableopacity
+title: TouchableOpacity
+---
+
+> If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
+
+A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it.
+
+Opacity is controlled by wrapping the children in an `Animated.View`, which is added to the view hierarchy. Be aware that this can affect layout.
+
+## Example
+
+```SnackPlayer name=TouchableOpacity%20Example
+import {useState} from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [count, setCount] = useState(0);
+  const onPress = () => setCount(prevCount => prevCount + 1);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.countContainer}>
+          <Text>Count: {count}</Text>
+        </View>
+        <TouchableOpacity style={styles.button} onPress={onPress}>
+          <Text>Press Here</Text>
+        </TouchableOpacity>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#DDDDDD',
+    padding: 10,
+  },
+  countContainer: {
+    alignItems: 'center',
+    padding: 10,
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Props
+
+### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
+
+Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
+
+---
+
+### `style`
+
+| Type                           |
+| ------------------------------ |
+| [View.style](view-style-props) |
+
+---
+
+### `activeOpacity`
+
+Determines what the opacity of the wrapped view should be when touch is active. Defaults to `0.2`.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `hasTVPreferredFocus` <div className="label ios">iOS</div>
+
+_(Apple TV only)_ TV preferred focus (see documentation for the View component).
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `nextFocusDown` <div className="label android">Android</div>
+
+TV next focus down (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusForward` <div className="label android">Android</div>
+
+TV next focus forward (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusLeft` <div className="label android">Android</div>
+
+TV next focus left (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusRight` <div className="label android">Android</div>
+
+TV next focus right (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusUp` <div className="label android">Android</div>
+
+TV next focus up (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
diff --git a/website/versioned_docs/version-0.81/touchablewithoutfeedback.md b/website/versioned_docs/version-0.81/touchablewithoutfeedback.md
index 2764327ad1b..04352611d98 100644
--- a/website/versioned_docs/version-0.81/touchablewithoutfeedback.md
+++ b/website/versioned_docs/version-0.81/touchablewithoutfeedback.md
@@ -1,527 +1,527 @@
----
-id: touchablewithoutfeedback
-title: TouchableWithoutFeedback
----
-
-> If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
-
-Do not use unless you have a very good reason. All elements that respond to press should have a visual feedback when touched.
-
-`TouchableWithoutFeedback` supports only one child. If you wish to have several child components, wrap them in a View. Importantly, `TouchableWithoutFeedback` works by cloning its child and applying responder props to it. It is therefore required that any intermediary components pass through those props to the underlying React Native component.
-
-## Usage Pattern
-
-```tsx
-function MyComponent(props: MyComponentProps) {
-  return (
-    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
-      <Text>My Component</Text>
-    </View>
-  );
-}
-
-<TouchableWithoutFeedback onPress={() => alert('Pressed!')}>
-  <MyComponent />
-</TouchableWithoutFeedback>;
-```
-
-## Example
-
-```SnackPlayer name=TouchableWithoutFeedback
-import React, {useState} from 'react';
-import {StyleSheet, TouchableWithoutFeedback, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const TouchableWithoutFeedbackExample = () => {
-  const [count, setCount] = useState(0);
-
-  const onPress = () => {
-    setCount(count + 1);
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.countContainer}>
-          <Text style={styles.countText}>Count: {count}</Text>
-        </View>
-        <TouchableWithoutFeedback onPress={onPress}>
-          <View style={styles.button}>
-            <Text>Touch Here</Text>
-          </View>
-        </TouchableWithoutFeedback>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: 10,
-  },
-  button: {
-    alignItems: 'center',
-    backgroundColor: '#DDDDDD',
-    padding: 10,
-  },
-  countContainer: {
-    alignItems: 'center',
-    padding: 10,
-  },
-  countText: {
-    color: '#FF00FF',
-  },
-});
-
-export default TouchableWithoutFeedbackExample;
-```
-
----
-
-# Reference
-
-## Props
-
-### `accessibilityIgnoresInvertColors` <div className="label ios">iOS</div>
-
-A value indicating this view should or should not be inverted when color inversion is turned on. A value of `true` will tell the view to not be inverted even if color inversion is turned on.
-
-See the [Accessibility guide](accessibility.md#accessibilityignoresinvertcolors) for more information.
-
-| Type    |
-| ------- |
-| Boolean |
-
----
-
-### `accessible`
-
-When `true`, indicates that the view is an accessibility element. By default, all the touchable elements are accessible.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `accessibilityLabel`
-
-Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the `Text` nodes separated by space.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityLanguage` <div className="label ios">iOS</div>
-
-A value indicating which language should be used by the screen reader when the user interacts with the element. It should follow the [BCP 47 specification](https://www.rfc-editor.org/info/bcp47).
-
-See the [iOS `accessibilityLanguage` doc](https://developer.apple.com/documentation/objectivec/nsobject/1615192-accessibilitylanguage) for more information.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityHint`
-
-An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityRole`
-
-`accessibilityRole` communicates the purpose of a component to the user of an assistive technology.
-
-`accessibilityRole` can be one of the following:
-
-- `'none'` - Used when the element has no role.
-- `'button'` - Used when the element should be treated as a button.
-- `'link'` - Used when the element should be treated as a link.
-- `'search'` - Used when the text field element should also be treated as a search field.
-- `'image'` - Used when the element should be treated as an image. Can be combined with button or link, for example.
-- `'keyboardkey'` - Used when the element acts as a keyboard key.
-- `'text'` - Used when the element should be treated as static text that cannot change.
-- `'adjustable'` - Used when an element can be "adjusted" (e.g. a slider).
-- `'imagebutton'` - Used when the element should be treated as a button and is also an image.
-- `'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.
-- `'alert'` - Used when an element contains important text to be presented to the user.
-- `'checkbox'` - Used when an element represents a checkbox which can be checked, unchecked, or have mixed checked state.
-- `'combobox'` - Used when an element represents a combo box, which allows the user to select among several choices.
-- `'menu'` - Used when the component is a menu of choices.
-- `'menubar'` - Used when a component is a container of multiple menus.
-- `'menuitem'` - Used to represent an item within a menu.
-- `'progressbar'` - Used to represent a component which indicates progress of a task.
-- `'radio'` - Used to represent a radio button.
-- `'radiogroup'` - Used to represent a group of radio buttons.
-- `'scrollbar'` - Used to represent a scroll bar.
-- `'spinbutton'` - Used to represent a button which opens a list of choices.
-- `'switch'` - Used to represent a switch which can be turned on and off.
-- `'tab'` - Used to represent a tab.
-- `'tablist'` - Used to represent a list of tabs.
-- `'timer'` - Used to represent a timer.
-- `'toolbar'` - Used to represent a tool bar (a container of action buttons or components).
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityState`
-
-Describes the current state of a component to the user of an assistive technology.
-
-See the [Accessibility guide](accessibility.md#accessibilitystate-ios-android) for more information.
-
-| Type                                                                                             |
-| ------------------------------------------------------------------------------------------------ |
-| object: `{disabled: bool, selected: bool, checked: bool or 'mixed', busy: bool, expanded: bool}` |
-
----
-
-### `accessibilityActions`
-
-Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The `accessibilityActions` property should contain a list of action objects. Each action object should contain the field name and label.
-
-See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
-
-| Type  |
-| ----- |
-| array |
-
----
-
-### `aria-busy`
-
-Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-checked`
-
-Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
-| Type             | Default |
-| ---------------- | ------- |
-| boolean, 'mixed' | false   |
-
----
-
-### `aria-disabled`
-
-Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-expanded`
-
-Indicates whether an expandable element is currently expanded or collapsed.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-hidden`
-
-Indicates whether the element is hidden from assistive technologies.
-
-For example, in a window that contains sibling views `A` and `B`, setting `aria-hidden` to `true` on view `B` causes VoiceOver to ignore the `B` element and its children.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-label`
-
-Defines a string value that labels an interactive element.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `aria-live` <div className="label android">Android</div>
-
-Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
-
-- **off** Accessibility services should not announce changes to this view.
-- **polite** Accessibility services should announce changes to this view.
-- **assertive** Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
-
-| Type                                     | Default |
-| ---------------------------------------- | ------- |
-| enum(`'assertive'`, `'off'`, `'polite'`) | `'off'` |
-
----
-
-### `aria-modal` <div className="label ios">iOS</div>
-
-Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. Has precedence over the [`accessibilityViewIsModal`](#accessibilityviewismodal-ios) prop.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-selected`
-
-Indicates whether a selectable element is currently selected or not.
-
-| Type    |
-| ------- |
-| boolean |
-
-### `onAccessibilityAction`
-
-Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.
-
-See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `accessibilityValue`
-
-Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
-See the [Accessibility guide](accessibility.md#accessibilityvalue-ios-android) for more information.
-
-| Type                                                            |
-| --------------------------------------------------------------- |
-| object: `{min: number, max: number, now: number, text: string}` |
-
----
-
-### `aria-valuemax`
-
-Represents the maximum value for range-based components, such as sliders and progress bars. Has precedence over the `max` value in the `accessibilityValue` prop.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `aria-valuemin`
-
-Represents the minimum value for range-based components, such as sliders and progress bars. Has precedence over the `min` value in the `accessibilityValue` prop.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `aria-valuenow`
-
-Represents the current value for range-based components, such as sliders and progress bars. Has precedence over the `now` value in the `accessibilityValue` prop.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `aria-valuetext`
-
-Represents the textual description of the component. Has precedence over the `text` value in the `accessibilityValue` prop.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `delayLongPress`
-
-Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `delayPressIn`
-
-Duration (in milliseconds), from the start of the touch, before `onPressIn` is called.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `delayPressOut`
-
-Duration (in milliseconds), from the release of the touch, before `onPressOut` is called.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `disabled`
-
-If true, disable all interactions for this component.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `hitSlop`
-
-This defines how far your touch can start away from the button. This is added to `pressRetentionOffset` when moving off of the button.
-
-> The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
-
-| Type                   |
-| ---------------------- |
-| [Rect](rect) or number |
-
-### `id`
-
-Used to locate this view from native code. Has precedence over `nativeID` prop.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `onBlur`
-
-Invoked when the item loses focus.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
-
----
-
-### `onFocus`
-
-Invoked when the item receives focus.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
-
----
-
-### `onLayout`
-
-Invoked on mount and on layout changes.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
-
----
-
-### `onLongPress`
-
-Called if the time after `onPressIn` lasts longer than 370 milliseconds. This time period can be customized with [`delayLongPress`](#delaylongpress).
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onPress`
-
-Called when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock). The first function argument is an event in form of [PressEvent](pressevent).
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onPressIn`
-
-Called as soon as the touchable element is pressed and invoked even before onPress. This can be useful when making network requests. The first function argument is an event in form of [PressEvent](pressevent).
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onPressOut`
-
-Called as soon as the touch is released even before onPress. The first function argument is an event in form of [PressEvent](pressevent).
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `pressRetentionOffset`
-
-When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations.
-
-| Type                   |
-| ---------------------- |
-| [Rect](rect) or number |
-
----
-
-### `nativeID`
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `testID`
-
-Used to locate this view in end-to-end tests.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `touchSoundDisabled` <div className="label android">Android</div>
-
-If true, doesn't play a system sound on touch.
-
-| Type    |
-| ------- |
-| Boolean |
+---
+id: touchablewithoutfeedback
+title: TouchableWithoutFeedback
+---
+
+> If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
+
+Do not use unless you have a very good reason. All elements that respond to press should have a visual feedback when touched.
+
+`TouchableWithoutFeedback` supports only one child. If you wish to have several child components, wrap them in a View. Importantly, `TouchableWithoutFeedback` works by cloning its child and applying responder props to it. It is therefore required that any intermediary components pass through those props to the underlying React Native component.
+
+## Usage Pattern
+
+```tsx
+function MyComponent(props: MyComponentProps) {
+  return (
+    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
+      <Text>My Component</Text>
+    </View>
+  );
+}
+
+<TouchableWithoutFeedback onPress={() => alert('Pressed!')}>
+  <MyComponent />
+</TouchableWithoutFeedback>;
+```
+
+## Example
+
+```SnackPlayer name=TouchableWithoutFeedback
+import {useState} from 'react';
+import {StyleSheet, TouchableWithoutFeedback, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const TouchableWithoutFeedbackExample = () => {
+  const [count, setCount] = useState(0);
+
+  const onPress = () => {
+    setCount(count + 1);
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.countContainer}>
+          <Text style={styles.countText}>Count: {count}</Text>
+        </View>
+        <TouchableWithoutFeedback onPress={onPress}>
+          <View style={styles.button}>
+            <Text>Touch Here</Text>
+          </View>
+        </TouchableWithoutFeedback>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#DDDDDD',
+    padding: 10,
+  },
+  countContainer: {
+    alignItems: 'center',
+    padding: 10,
+  },
+  countText: {
+    color: '#FF00FF',
+  },
+});
+
+export default TouchableWithoutFeedbackExample;
+```
+
+---
+
+# Reference
+
+## Props
+
+### `accessibilityIgnoresInvertColors` <div className="label ios">iOS</div>
+
+A value indicating this view should or should not be inverted when color inversion is turned on. A value of `true` will tell the view to not be inverted even if color inversion is turned on.
+
+See the [Accessibility guide](accessibility.md#accessibilityignoresinvertcolors) for more information.
+
+| Type    |
+| ------- |
+| Boolean |
+
+---
+
+### `accessible`
+
+When `true`, indicates that the view is an accessibility element. By default, all the touchable elements are accessible.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `accessibilityLabel`
+
+Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the `Text` nodes separated by space.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityLanguage` <div className="label ios">iOS</div>
+
+A value indicating which language should be used by the screen reader when the user interacts with the element. It should follow the [BCP 47 specification](https://www.rfc-editor.org/info/bcp47).
+
+See the [iOS `accessibilityLanguage` doc](https://developer.apple.com/documentation/objectivec/nsobject/1615192-accessibilitylanguage) for more information.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityHint`
+
+An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityRole`
+
+`accessibilityRole` communicates the purpose of a component to the user of an assistive technology.
+
+`accessibilityRole` can be one of the following:
+
+- `'none'` - Used when the element has no role.
+- `'button'` - Used when the element should be treated as a button.
+- `'link'` - Used when the element should be treated as a link.
+- `'search'` - Used when the text field element should also be treated as a search field.
+- `'image'` - Used when the element should be treated as an image. Can be combined with button or link, for example.
+- `'keyboardkey'` - Used when the element acts as a keyboard key.
+- `'text'` - Used when the element should be treated as static text that cannot change.
+- `'adjustable'` - Used when an element can be "adjusted" (e.g. a slider).
+- `'imagebutton'` - Used when the element should be treated as a button and is also an image.
+- `'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.
+- `'alert'` - Used when an element contains important text to be presented to the user.
+- `'checkbox'` - Used when an element represents a checkbox which can be checked, unchecked, or have mixed checked state.
+- `'combobox'` - Used when an element represents a combo box, which allows the user to select among several choices.
+- `'menu'` - Used when the component is a menu of choices.
+- `'menubar'` - Used when a component is a container of multiple menus.
+- `'menuitem'` - Used to represent an item within a menu.
+- `'progressbar'` - Used to represent a component which indicates progress of a task.
+- `'radio'` - Used to represent a radio button.
+- `'radiogroup'` - Used to represent a group of radio buttons.
+- `'scrollbar'` - Used to represent a scroll bar.
+- `'spinbutton'` - Used to represent a button which opens a list of choices.
+- `'switch'` - Used to represent a switch which can be turned on and off.
+- `'tab'` - Used to represent a tab.
+- `'tablist'` - Used to represent a list of tabs.
+- `'timer'` - Used to represent a timer.
+- `'toolbar'` - Used to represent a tool bar (a container of action buttons or components).
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityState`
+
+Describes the current state of a component to the user of an assistive technology.
+
+See the [Accessibility guide](accessibility.md#accessibilitystate-ios-android) for more information.
+
+| Type                                                                                             |
+| ------------------------------------------------------------------------------------------------ |
+| object: `{disabled: bool, selected: bool, checked: bool or 'mixed', busy: bool, expanded: bool}` |
+
+---
+
+### `accessibilityActions`
+
+Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The `accessibilityActions` property should contain a list of action objects. Each action object should contain the field name and label.
+
+See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
+
+| Type  |
+| ----- |
+| array |
+
+---
+
+### `aria-busy`
+
+Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-checked`
+
+Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
+
+| Type             | Default |
+| ---------------- | ------- |
+| boolean, 'mixed' | false   |
+
+---
+
+### `aria-disabled`
+
+Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-expanded`
+
+Indicates whether an expandable element is currently expanded or collapsed.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-hidden`
+
+Indicates whether the element is hidden from assistive technologies.
+
+For example, in a window that contains sibling views `A` and `B`, setting `aria-hidden` to `true` on view `B` causes VoiceOver to ignore the `B` element and its children.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-label`
+
+Defines a string value that labels an interactive element.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `aria-live` <div className="label android">Android</div>
+
+Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
+
+- **off** Accessibility services should not announce changes to this view.
+- **polite** Accessibility services should announce changes to this view.
+- **assertive** Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
+
+| Type                                     | Default |
+| ---------------------------------------- | ------- |
+| enum(`'assertive'`, `'off'`, `'polite'`) | `'off'` |
+
+---
+
+### `aria-modal` <div className="label ios">iOS</div>
+
+Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. Has precedence over the [`accessibilityViewIsModal`](#accessibilityviewismodal-ios) prop.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-selected`
+
+Indicates whether a selectable element is currently selected or not.
+
+| Type    |
+| ------- |
+| boolean |
+
+### `onAccessibilityAction`
+
+Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.
+
+See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `accessibilityValue`
+
+Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
+
+See the [Accessibility guide](accessibility.md#accessibilityvalue-ios-android) for more information.
+
+| Type                                                            |
+| --------------------------------------------------------------- |
+| object: `{min: number, max: number, now: number, text: string}` |
+
+---
+
+### `aria-valuemax`
+
+Represents the maximum value for range-based components, such as sliders and progress bars. Has precedence over the `max` value in the `accessibilityValue` prop.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `aria-valuemin`
+
+Represents the minimum value for range-based components, such as sliders and progress bars. Has precedence over the `min` value in the `accessibilityValue` prop.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `aria-valuenow`
+
+Represents the current value for range-based components, such as sliders and progress bars. Has precedence over the `now` value in the `accessibilityValue` prop.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `aria-valuetext`
+
+Represents the textual description of the component. Has precedence over the `text` value in the `accessibilityValue` prop.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `delayLongPress`
+
+Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `delayPressIn`
+
+Duration (in milliseconds), from the start of the touch, before `onPressIn` is called.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `delayPressOut`
+
+Duration (in milliseconds), from the release of the touch, before `onPressOut` is called.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `disabled`
+
+If true, disable all interactions for this component.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `hitSlop`
+
+This defines how far your touch can start away from the button. This is added to `pressRetentionOffset` when moving off of the button.
+
+> The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
+
+| Type                   |
+| ---------------------- |
+| [Rect](rect) or number |
+
+### `id`
+
+Used to locate this view from native code. Has precedence over `nativeID` prop.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `onBlur`
+
+Invoked when the item loses focus.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
+
+---
+
+### `onFocus`
+
+Invoked when the item receives focus.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
+
+---
+
+### `onLayout`
+
+Invoked on mount and on layout changes.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
+
+---
+
+### `onLongPress`
+
+Called if the time after `onPressIn` lasts longer than 370 milliseconds. This time period can be customized with [`delayLongPress`](#delaylongpress).
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onPress`
+
+Called when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock). The first function argument is an event in form of [PressEvent](pressevent).
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onPressIn`
+
+Called as soon as the touchable element is pressed and invoked even before onPress. This can be useful when making network requests. The first function argument is an event in form of [PressEvent](pressevent).
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onPressOut`
+
+Called as soon as the touch is released even before onPress. The first function argument is an event in form of [PressEvent](pressevent).
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `pressRetentionOffset`
+
+When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations.
+
+| Type                   |
+| ---------------------- |
+| [Rect](rect) or number |
+
+---
+
+### `nativeID`
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `testID`
+
+Used to locate this view in end-to-end tests.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `touchSoundDisabled` <div className="label android">Android</div>
+
+If true, doesn't play a system sound on touch.
+
+| Type    |
+| ------- |
+| Boolean |
diff --git a/website/versioned_docs/version-0.81/transforms.md b/website/versioned_docs/version-0.81/transforms.md
index d3ed78c59f7..d04f53227db 100644
--- a/website/versioned_docs/version-0.81/transforms.md
+++ b/website/versioned_docs/version-0.81/transforms.md
@@ -1,399 +1,398 @@
----
-id: transforms
-title: Transforms
----
-
-Transforms are style properties that will help you modify the appearance and position of your components using 2D or 3D transformations. However, once you apply transforms, the layouts remain the same around the transformed component hence it might overlap with the nearby components. You can apply margin to the transformed component, the nearby components or padding to the container to prevent such overlaps.
-
-## Example
-
-```SnackPlayer name=Transforms%20Example
-import React from 'react';
-import {ScrollView, StyleSheet, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => (
-  <SafeAreaProvider>
-    <SafeAreaView style={styles.container}>
-      <ScrollView contentContainerStyle={styles.scrollContentContainer}>
-        <View style={styles.box}>
-          <Text style={styles.text}>Original Object</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{scale: 2}],
-            },
-          ]}>
-          <Text style={styles.text}>Scale by 2</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{scaleX: 2}],
-            },
-          ]}>
-          <Text style={styles.text}>ScaleX by 2</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{scaleY: 2}],
-            },
-          ]}>
-          <Text style={styles.text}>ScaleY by 2</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{rotate: '45deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>Rotate by 45 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{rotateX: '45deg'}, {rotateZ: '45deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>Rotate X&Z by 45 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{rotateY: '45deg'}, {rotateZ: '45deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>Rotate Y&Z by 45 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{skewX: '45deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>SkewX by 45 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{skewY: '45deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>SkewY by 45 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{skewX: '30deg'}, {skewY: '30deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>Skew X&Y by 30 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{translateX: -50}],
-            },
-          ]}>
-          <Text style={styles.text}>TranslateX by -50 </Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{translateY: 50}],
-            },
-          ]}>
-          <Text style={styles.text}>TranslateY by 50 </Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [
-                {
-                  matrix: [1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
-                },
-              ],
-            },
-          ]}>
-          <Text style={styles.text}>Matrix Transform</Text>
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  scrollContentContainer: {
-    alignItems: 'center',
-    paddingBottom: 60,
-  },
-  box: {
-    height: 100,
-    width: 100,
-    borderRadius: 5,
-    marginVertical: 40,
-    backgroundColor: '#61dafb',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  text: {
-    fontSize: 14,
-    fontWeight: 'bold',
-    margin: 8,
-    color: '#000',
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Transform
-
-`transform` accepts an array of transformation objects or space-separated string values. Each object specifies the property that will be transformed as the key, and the value to use in the transformation. Objects should not be combined. Use a single key/value pair per object.
-
-The rotate transformations require a string so that the transform may be expressed in degrees (deg) or radians (rad). For example:
-
-```js
-{
-  transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}],
-}
-```
-
-The same could also be achieved using a space-separated string:
-
-```js
-{
-  transform: 'rotateX(45deg) rotateZ(0.785398rad)',
-}
-```
-
-The skew transformations require a string so that the transform may be expressed in degrees (deg). For example:
-
-```js
-{
-  transform: [{skewX: '45deg'}],
-}
-```
-
-### Matrix Transform
-
-The `matrix` transform accepts a 4x4 transformation matrix as an array of 16 numbers. This allows you to apply complex transformations that combine translation, rotation, scaling, and skewing in a single operation.
-
-The matrix is specified in column-major order:
-
-```js
-{
-  transform: [
-    {
-      matrix: [
-        scaleX,
-        skewY,
-        0,
-        0,
-        skewX,
-        scaleY,
-        0,
-        0,
-        0,
-        0,
-        1,
-        0,
-        translateX,
-        translateY,
-        0,
-        1,
-      ],
-    },
-  ];
-}
-```
-
-For example, to apply a combination of scale and skew:
-
-```js
-{
-  transform: [
-    {
-      matrix: [
-        1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
-      ],
-    },
-  ];
-}
-```
-
-:::note
-Matrix transforms are useful when you need to apply pre-calculated transformation matrices, such as those from animation libraries or when building UI editor applications. For basic transformations, it's recommended to use the individual transform properties (scale, rotate, translate, etc.) as they are more readable.
-:::
-
-| Type                                                                                                                                                                                                                                                                                                          | Required |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
-| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number}`, `{translateY: number}`, `{skewX: string}`, `{skewY: string}` or string | No       |
-
----
-
-### `decomposedMatrix`, `rotation`, `scaleX`, `scaleY`, `transformMatrix`, `translateX`, `translateY`
-
-:::warning[Deprecated]
-Use the [`transform`](transforms#transform) prop instead.
-:::
-
-## Transform Origin
-
-The `transformOrigin` property sets the origin for a view's transformations. The transform origin is the point around which a transformation is applied. By default, the origin of a transform is `center`.
-
-# Example
-
-```SnackPlayer name=TransformOrigin%20Example
-import React, {useEffect, useRef} from 'react';
-import {Animated, View, StyleSheet, Easing} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const rotateAnim = useRef(new Animated.Value(0)).current;
-
-  useEffect(() => {
-    Animated.loop(
-      Animated.timing(rotateAnim, {
-        toValue: 1,
-        duration: 5000,
-        easing: Easing.linear,
-        useNativeDriver: true,
-      }),
-    ).start();
-  }, [rotateAnim]);
-
-  const spin = rotateAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '360deg'],
-  });
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.transformOriginWrapper}>
-          <Animated.View
-            style={[
-              styles.transformOriginView,
-              {
-                transform: [{rotate: spin}],
-              },
-            ]}
-          />
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  transformOriginWrapper: {
-    borderWidth: 1,
-    borderColor: 'rgba(0, 0, 0, 0.5)',
-  },
-  transformOriginView: {
-    backgroundColor: 'pink',
-    width: 100,
-    height: 100,
-    transformOrigin: 'top',
-  },
-});
-
-export default App;
-```
-
-### Values
-
-Transform origin supports `px`, `percentage` and keywords `top`, `left`, `right`, `bottom`, `center` values.
-
-The `transformOrigin` property may be specified using one, two, or three values, where each value represents an offset.
-
-#### One-value syntax:
-
-- The value must be a `px`, a `percentage`, or one of the keywords `left`, `center`, `right`, `top`, and `bottom`.
-
-```js
-{
-  transformOrigin: '20px',
-  transformOrigin: 'bottom',
-}
-```
-
-#### Two-value syntax:
-
-- First value (x-offset) must be a `px`, a `percentage`, or one of the keywords `left`, `center`, and `right`.
-- The second value (y-offset) must be a `px`, a `percentage`, or one of the keywords `top`, `center`, and `bottom`.
-
-```js
-{
-  transformOrigin: '10px 2px',
-  transformOrigin: 'left top',
-  transformOrigin: 'top right',
-}
-```
-
-#### Three-value syntax:
-
-- The first two values are the same as for the two-value syntax.
-- The third value (z-offset) must be a `px`. It always represents the Z offset.
-
-```js
-{
-  transformOrigin: '2px 30% 10px',
-  transformOrigin: 'right bottom 20px',
-}
-```
-
-#### Array syntax
-
-`transformOrigin` also supports an array syntax. It makes it convenient to use it with Animated APIs. It also avoids string parsing, so should be more efficient.
-
-```js
-{
-  // Using numeric values
-  transformOrigin: [10, 30, 40],
-  // Mixing numeric and percentage values
-  transformOrigin: [10, '20%', 0],
-}
-```
-
-You may refer to MDN's guide on [Transform origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin) for additional information.
+---
+id: transforms
+title: Transforms
+---
+
+Transforms are style properties that will help you modify the appearance and position of your components using 2D or 3D transformations. However, once you apply transforms, the layouts remain the same around the transformed component hence it might overlap with the nearby components. You can apply margin to the transformed component, the nearby components or padding to the container to prevent such overlaps.
+
+## Example
+
+```SnackPlayer name=Transforms%20Example
+import {ScrollView, StyleSheet, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => (
+  <SafeAreaProvider>
+    <SafeAreaView style={styles.container}>
+      <ScrollView contentContainerStyle={styles.scrollContentContainer}>
+        <View style={styles.box}>
+          <Text style={styles.text}>Original Object</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{scale: 2}],
+            },
+          ]}>
+          <Text style={styles.text}>Scale by 2</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{scaleX: 2}],
+            },
+          ]}>
+          <Text style={styles.text}>ScaleX by 2</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{scaleY: 2}],
+            },
+          ]}>
+          <Text style={styles.text}>ScaleY by 2</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{rotate: '45deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>Rotate by 45 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{rotateX: '45deg'}, {rotateZ: '45deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>Rotate X&Z by 45 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{rotateY: '45deg'}, {rotateZ: '45deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>Rotate Y&Z by 45 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{skewX: '45deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>SkewX by 45 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{skewY: '45deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>SkewY by 45 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{skewX: '30deg'}, {skewY: '30deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>Skew X&Y by 30 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{translateX: -50}],
+            },
+          ]}>
+          <Text style={styles.text}>TranslateX by -50 </Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{translateY: 50}],
+            },
+          ]}>
+          <Text style={styles.text}>TranslateY by 50 </Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [
+                {
+                  matrix: [1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
+                },
+              ],
+            },
+          ]}>
+          <Text style={styles.text}>Matrix Transform</Text>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollContentContainer: {
+    alignItems: 'center',
+    paddingBottom: 60,
+  },
+  box: {
+    height: 100,
+    width: 100,
+    borderRadius: 5,
+    marginVertical: 40,
+    backgroundColor: '#61dafb',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    margin: 8,
+    color: '#000',
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Transform
+
+`transform` accepts an array of transformation objects or space-separated string values. Each object specifies the property that will be transformed as the key, and the value to use in the transformation. Objects should not be combined. Use a single key/value pair per object.
+
+The rotate transformations require a string so that the transform may be expressed in degrees (deg) or radians (rad). For example:
+
+```js
+{
+  transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}],
+}
+```
+
+The same could also be achieved using a space-separated string:
+
+```js
+{
+  transform: 'rotateX(45deg) rotateZ(0.785398rad)',
+}
+```
+
+The skew transformations require a string so that the transform may be expressed in degrees (deg). For example:
+
+```js
+{
+  transform: [{skewX: '45deg'}],
+}
+```
+
+### Matrix Transform
+
+The `matrix` transform accepts a 4x4 transformation matrix as an array of 16 numbers. This allows you to apply complex transformations that combine translation, rotation, scaling, and skewing in a single operation.
+
+The matrix is specified in column-major order:
+
+```js
+{
+  transform: [
+    {
+      matrix: [
+        scaleX,
+        skewY,
+        0,
+        0,
+        skewX,
+        scaleY,
+        0,
+        0,
+        0,
+        0,
+        1,
+        0,
+        translateX,
+        translateY,
+        0,
+        1,
+      ],
+    },
+  ];
+}
+```
+
+For example, to apply a combination of scale and skew:
+
+```js
+{
+  transform: [
+    {
+      matrix: [
+        1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
+      ],
+    },
+  ];
+}
+```
+
+:::note
+Matrix transforms are useful when you need to apply pre-calculated transformation matrices, such as those from animation libraries or when building UI editor applications. For basic transformations, it's recommended to use the individual transform properties (scale, rotate, translate, etc.) as they are more readable.
+:::
+
+| Type                                                                                                                                                                                                                                                                                                          | Required |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
+| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number}`, `{translateY: number}`, `{skewX: string}`, `{skewY: string}` or string | No       |
+
+---
+
+### `decomposedMatrix`, `rotation`, `scaleX`, `scaleY`, `transformMatrix`, `translateX`, `translateY`
+
+:::warning[Deprecated]
+Use the [`transform`](transforms#transform) prop instead.
+:::
+
+## Transform Origin
+
+The `transformOrigin` property sets the origin for a view's transformations. The transform origin is the point around which a transformation is applied. By default, the origin of a transform is `center`.
+
+# Example
+
+```SnackPlayer name=TransformOrigin%20Example
+import {useEffect, useRef} from 'react';
+import {Animated, View, StyleSheet, Easing} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const rotateAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.timing(rotateAnim, {
+        toValue: 1,
+        duration: 5000,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      }),
+    ).start();
+  }, [rotateAnim]);
+
+  const spin = rotateAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.transformOriginWrapper}>
+          <Animated.View
+            style={[
+              styles.transformOriginView,
+              {
+                transform: [{rotate: spin}],
+              },
+            ]}
+          />
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  transformOriginWrapper: {
+    borderWidth: 1,
+    borderColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  transformOriginView: {
+    backgroundColor: 'pink',
+    width: 100,
+    height: 100,
+    transformOrigin: 'top',
+  },
+});
+
+export default App;
+```
+
+### Values
+
+Transform origin supports `px`, `percentage` and keywords `top`, `left`, `right`, `bottom`, `center` values.
+
+The `transformOrigin` property may be specified using one, two, or three values, where each value represents an offset.
+
+#### One-value syntax:
+
+- The value must be a `px`, a `percentage`, or one of the keywords `left`, `center`, `right`, `top`, and `bottom`.
+
+```js
+{
+  transformOrigin: '20px',
+  transformOrigin: 'bottom',
+}
+```
+
+#### Two-value syntax:
+
+- First value (x-offset) must be a `px`, a `percentage`, or one of the keywords `left`, `center`, and `right`.
+- The second value (y-offset) must be a `px`, a `percentage`, or one of the keywords `top`, `center`, and `bottom`.
+
+```js
+{
+  transformOrigin: '10px 2px',
+  transformOrigin: 'left top',
+  transformOrigin: 'top right',
+}
+```
+
+#### Three-value syntax:
+
+- The first two values are the same as for the two-value syntax.
+- The third value (z-offset) must be a `px`. It always represents the Z offset.
+
+```js
+{
+  transformOrigin: '2px 30% 10px',
+  transformOrigin: 'right bottom 20px',
+}
+```
+
+#### Array syntax
+
+`transformOrigin` also supports an array syntax. It makes it convenient to use it with Animated APIs. It also avoids string parsing, so should be more efficient.
+
+```js
+{
+  // Using numeric values
+  transformOrigin: [10, 30, 40],
+  // Mixing numeric and percentage values
+  transformOrigin: [10, '20%', 0],
+}
+```
+
+You may refer to MDN's guide on [Transform origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin) for additional information.
diff --git a/website/versioned_docs/version-0.81/troubleshooting.md b/website/versioned_docs/version-0.81/troubleshooting.md
index a5cad6078f0..d6dba7895e8 100644
--- a/website/versioned_docs/version-0.81/troubleshooting.md
+++ b/website/versioned_docs/version-0.81/troubleshooting.md
@@ -91,7 +91,6 @@ To revert the `User Search Header Paths` and `Header Search Paths` build setting
 React Native implements a polyfill for WebSockets. These [polyfills](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Core/InitializeCore.js) are initialized as part of the react-native module that you include in your application through `import React from 'react'`. If you load another module that requires WebSockets, such as [Firebase](https://github.com/facebook/react-native/issues/3645), be sure to load/require it after react-native:
 
 ```
-import React from 'react';
 import Firebase from 'firebase';
 ```
 
diff --git a/website/versioned_docs/version-0.81/turbo-native-modules.md b/website/versioned_docs/version-0.81/turbo-native-modules.md
index 7758172e71d..8fd35d430e5 100644
--- a/website/versioned_docs/version-0.81/turbo-native-modules.md
+++ b/website/versioned_docs/version-0.81/turbo-native-modules.md
@@ -1,260 +1,260 @@
----
-id: turbo-native-modules-introduction
-title: 'Native Modules: Introduction'
----
-
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import constants from '@site/core/TabsConstants';
-import CodeBlock from '@theme/CodeBlock';
-import {getCurrentVersion} from '@site/src/getCurrentVersion';
-import {TurboNativeModulesAndroid, TurboNativeModulesIOS} from './\_turbo-native-modules-components';
-
-# Native Modules
-
-Your React Native application code may need to interact with native platform APIs that aren't provided by React Native or an existing library. You can write the integration code yourself using a **Turbo Native Module**. This guide will show you how to write one.
-
-The basic steps are:
-
-1. **define a typed JavaScript specification** using one of the most popular JavaScript type annotation languages: Flow or TypeScript;
-2. **configure your dependency management system to run Codegen**, which converts the specification into native language interfaces;
-3. **write your application code** using your specification; and
-4. **write your native platform code using the generated interfaces** to write and hook your native code into the React Native runtime environment.
-
-Lets work through each of these steps by building an example Turbo Native Module. The rest of this guide assume that you have created your application running the command:
-
-<CodeBlock language="bash" title="shell">
-{`npx @react-native-community/cli@latest init TurboModuleExample --version ${getCurrentVersion()}`}
-</CodeBlock>
-
-## Native Persistent Storage
-
-This guide will show you how to write an implementation of the [Web Storage API](https://html.spec.whatwg.org/multipage/webstorage.html#dom-localstorage-dev): `localStorage`. The API is relatable to a React developer who might be writing application code on your project.
-
-To make this work on mobile, we need to use Android and iOS APIs:
-
-- Android: [SharedPreferences](https://developer.android.com/reference/android/content/SharedPreferences), and
-- iOS: [NSUserDefaults](https://developer.apple.com/documentation/foundation/nsuserdefaults).
-
-### 1. Declare Typed Specification
-
-React Native provides a tool called [Codegen](/the-new-architecture/what-is-codegen.mdx), which takes a specification written in TypeScript or Flow and generates platform specific code for Android and iOS. The specification declares the methods and data types that will pass back and forth between your native code and the React Native JavaScript runtime. A Turbo Native Module is both your specification, the native code you write, and the Codegen interfaces generated from your specification.
-
-To create a specs file:
-
-1. Inside the root folder of your app, create a new folder called `specs`.
-2. Create a new file called `NativeLocalStorage.ts`.
-
-:::info
-You can see all of the types you can use in your specification and the native types that are generated in the [Appendix](/appendix.md) documentation.
-:::
-
-:::info
-If you want to change the name of your module and the related specs file, make sure to always use 'Native' as prefix (e.g. `NativeStorage` or `NativeUsersDefault`).
-:::
-
-Here is an implementation of the `localStorage` specification:
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultJavaScriptSpecLanguage} values={constants.javaScriptSpecLanguages}>
-<TabItem value="typescript">
-
-```typescript title="specs/NativeLocalStorage.ts"
-import type {TurboModule} from 'react-native';
-import {TurboModuleRegistry} from 'react-native';
-
-export interface Spec extends TurboModule {
-  setItem(value: string, key: string): void;
-  getItem(key: string): string | null;
-  removeItem(key: string): void;
-  clear(): void;
-}
-
-export default TurboModuleRegistry.getEnforcing<Spec>(
-  'NativeLocalStorage',
-);
-```
-
-</TabItem>
-<TabItem value="flow">
-
-```flow title="NativeLocalStorage.js"
-import type {TurboModule} from 'react-native';
-import {TurboModule, TurboModuleRegistry} from 'react-native';
-
-export interface Spec extends TurboModule {
-  setItem(value: string, key: string): void;
-  getItem(key: string): ?string;
-  removeItem(key: string): void;
-  clear(): void;
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 2. Configure Codegen to run
-
-The specification is used by the React Native Codegen tools to generate platform specific interfaces and boilerplate for us. To do this, Codegen needs to know where to find our specification and what to do with it. Update your `package.json` to include:
-
-```json title="package.json"
-     "start": "react-native start",
-     "test": "jest"
-   },
-   // highlight-add-start
-   "codegenConfig": {
-     "name": "NativeLocalStorageSpec",
-     "type": "modules",
-     "jsSrcsDir": "specs",
-     "android": {
-       "javaPackageName": "com.nativelocalstorage"
-     }
-   },
-   // highlight-add-end
-   "dependencies": {
-```
-
-With everything wired up for Codegen, we need to prepare our native code to hook into our generated code.
-
-<Tabs groupId="platforms" queryString defaultValue={constants.defaultPlatform}>
-<TabItem value="android" label="Android">
-Codegen is executed through the `generateCodegenArtifactsFromSchema` Gradle task:
-
-```bash
-cd android
-./gradlew generateCodegenArtifactsFromSchema
-
-BUILD SUCCESSFUL in 837ms
-14 actionable tasks: 3 executed, 11 up-to-date
-```
-
-This is automatically run when you build your Android application.
-</TabItem>
-<TabItem value="ios" label="iOS">
-Codegen is run as part of the script phases that's automatically added to the project generated by CocoaPods.
-
-```bash
-cd ios
-bundle install
-bundle exec pod install
-```
-
-The output will look like this:
-
-```shell
-...
-Framework build type is static library
-[Codegen] Adding script_phases to ReactCodegen.
-[Codegen] Generating ./build/generated/ios/ReactCodegen.podspec.json
-[Codegen] Analyzing /Users/me/src/TurboModuleExample/package.json
-[Codegen] Searching for codegen-enabled libraries in the app.
-[Codegen] Found TurboModuleExample
-[Codegen] Searching for codegen-enabled libraries in the project dependencies.
-[Codegen] Found react-native
-...
-```
-
-</TabItem>
-</Tabs>
-
-### 3. Write Application Code using the Turbo Native Module
-
-Using `NativeLocalStorage`, here’s a modified `App.tsx` that includes some text we want persisted, an input field and some buttons to update this value.
-
-The `TurboModuleRegistry` supports 2 modes of retrieving a Turbo Native Module:
-
-- `get<T>(name: string): T | null` which will return `null` if the Turbo Native Module is unavailable.
-- `getEnforcing<T>(name: string): T` which will throw an exception if the Turbo Native Module is unavailable. This assumes the module is always available.
-
-```tsx title="App.tsx"
-import React from 'react';
-import {
-  SafeAreaView,
-  StyleSheet,
-  Text,
-  TextInput,
-  Button,
-} from 'react-native';
-
-import NativeLocalStorage from './specs/NativeLocalStorage';
-
-const EMPTY = '<empty>';
-
-function App(): React.JSX.Element {
-  const [value, setValue] = React.useState<string | null>(null);
-
-  const [editingValue, setEditingValue] = React.useState<
-    string | null
-  >(null);
-
-  React.useEffect(() => {
-    const storedValue = NativeLocalStorage?.getItem('myKey');
-    setValue(storedValue ?? '');
-  }, []);
-
-  function saveValue() {
-    NativeLocalStorage?.setItem(editingValue ?? EMPTY, 'myKey');
-    setValue(editingValue);
-  }
-
-  function clearAll() {
-    NativeLocalStorage?.clear();
-    setValue('');
-  }
-
-  function deleteValue() {
-    NativeLocalStorage?.removeItem('myKey');
-    setValue('');
-  }
-
-  return (
-    <SafeAreaView style={{flex: 1}}>
-      <Text style={styles.text}>
-        Current stored value is: {value ?? 'No Value'}
-      </Text>
-      <TextInput
-        placeholder="Enter the text you want to store"
-        style={styles.textInput}
-        onChangeText={setEditingValue}
-      />
-      <Button title="Save" onPress={saveValue} />
-      <Button title="Delete" onPress={deleteValue} />
-      <Button title="Clear" onPress={clearAll} />
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  text: {
-    margin: 10,
-    fontSize: 20,
-  },
-  textInput: {
-    margin: 10,
-    height: 40,
-    borderColor: 'black',
-    borderWidth: 1,
-    paddingLeft: 5,
-    paddingRight: 5,
-    borderRadius: 5,
-  },
-});
-
-export default App;
-```
-
-### 4. Write your Native Platform code
-
-With everything prepared, we're going to start writing native platform code. We do this in 2 parts:
-
-:::note
-This guide shows you how to create a Turbo Native Module that only works with the New Architecture. If you need to support both the New Architecture and the Legacy Architecture, please refer to our [backwards compatibility guide](https://github.com/reactwg/react-native-new-architecture/blob/main/docs/backwards-compat.md).
-:::
-
-<Tabs groupId="platforms" queryString defaultValue={constants.defaultPlatform}>
-    <TabItem value="android" label="Android">
-        <TurboNativeModulesAndroid />
-    </TabItem>
-    <TabItem value="ios" label="iOS">
-        <TurboNativeModulesIOS/>
-    </TabItem>
-</Tabs>
+---
+id: turbo-native-modules-introduction
+title: 'Native Modules: Introduction'
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import constants from '@site/core/TabsConstants';
+import CodeBlock from '@theme/CodeBlock';
+import {getCurrentVersion} from '@site/src/getCurrentVersion';
+import {TurboNativeModulesAndroid, TurboNativeModulesIOS} from './\_turbo-native-modules-components';
+
+# Native Modules
+
+Your React Native application code may need to interact with native platform APIs that aren't provided by React Native or an existing library. You can write the integration code yourself using a **Turbo Native Module**. This guide will show you how to write one.
+
+The basic steps are:
+
+1. **define a typed JavaScript specification** using one of the most popular JavaScript type annotation languages: Flow or TypeScript;
+2. **configure your dependency management system to run Codegen**, which converts the specification into native language interfaces;
+3. **write your application code** using your specification; and
+4. **write your native platform code using the generated interfaces** to write and hook your native code into the React Native runtime environment.
+
+Lets work through each of these steps by building an example Turbo Native Module. The rest of this guide assume that you have created your application running the command:
+
+<CodeBlock language="bash" title="shell">
+{`npx @react-native-community/cli@latest init TurboModuleExample --version ${getCurrentVersion()}`}
+</CodeBlock>
+
+## Native Persistent Storage
+
+This guide will show you how to write an implementation of the [Web Storage API](https://html.spec.whatwg.org/multipage/webstorage.html#dom-localstorage-dev): `localStorage`. The API is relatable to a React developer who might be writing application code on your project.
+
+To make this work on mobile, we need to use Android and iOS APIs:
+
+- Android: [SharedPreferences](https://developer.android.com/reference/android/content/SharedPreferences), and
+- iOS: [NSUserDefaults](https://developer.apple.com/documentation/foundation/nsuserdefaults).
+
+### 1. Declare Typed Specification
+
+React Native provides a tool called [Codegen](/the-new-architecture/what-is-codegen.mdx), which takes a specification written in TypeScript or Flow and generates platform specific code for Android and iOS. The specification declares the methods and data types that will pass back and forth between your native code and the React Native JavaScript runtime. A Turbo Native Module is both your specification, the native code you write, and the Codegen interfaces generated from your specification.
+
+To create a specs file:
+
+1. Inside the root folder of your app, create a new folder called `specs`.
+2. Create a new file called `NativeLocalStorage.ts`.
+
+:::info
+You can see all of the types you can use in your specification and the native types that are generated in the [Appendix](/appendix.md) documentation.
+:::
+
+:::info
+If you want to change the name of your module and the related specs file, make sure to always use 'Native' as prefix (e.g. `NativeStorage` or `NativeUsersDefault`).
+:::
+
+Here is an implementation of the `localStorage` specification:
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultJavaScriptSpecLanguage} values={constants.javaScriptSpecLanguages}>
+<TabItem value="typescript">
+
+```typescript title="specs/NativeLocalStorage.ts"
+import type {TurboModule} from 'react-native';
+import {TurboModuleRegistry} from 'react-native';
+
+export interface Spec extends TurboModule {
+  setItem(value: string, key: string): void;
+  getItem(key: string): string | null;
+  removeItem(key: string): void;
+  clear(): void;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>(
+  'NativeLocalStorage',
+);
+```
+
+</TabItem>
+<TabItem value="flow">
+
+```flow title="NativeLocalStorage.js"
+import type {TurboModule} from 'react-native';
+import {TurboModule, TurboModuleRegistry} from 'react-native';
+
+export interface Spec extends TurboModule {
+  setItem(value: string, key: string): void;
+  getItem(key: string): ?string;
+  removeItem(key: string): void;
+  clear(): void;
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 2. Configure Codegen to run
+
+The specification is used by the React Native Codegen tools to generate platform specific interfaces and boilerplate for us. To do this, Codegen needs to know where to find our specification and what to do with it. Update your `package.json` to include:
+
+```json title="package.json"
+     "start": "react-native start",
+     "test": "jest"
+   },
+   // highlight-add-start
+   "codegenConfig": {
+     "name": "NativeLocalStorageSpec",
+     "type": "modules",
+     "jsSrcsDir": "specs",
+     "android": {
+       "javaPackageName": "com.nativelocalstorage"
+     }
+   },
+   // highlight-add-end
+   "dependencies": {
+```
+
+With everything wired up for Codegen, we need to prepare our native code to hook into our generated code.
+
+<Tabs groupId="platforms" queryString defaultValue={constants.defaultPlatform}>
+<TabItem value="android" label="Android">
+Codegen is executed through the `generateCodegenArtifactsFromSchema` Gradle task:
+
+```bash
+cd android
+./gradlew generateCodegenArtifactsFromSchema
+
+BUILD SUCCESSFUL in 837ms
+14 actionable tasks: 3 executed, 11 up-to-date
+```
+
+This is automatically run when you build your Android application.
+</TabItem>
+<TabItem value="ios" label="iOS">
+Codegen is run as part of the script phases that's automatically added to the project generated by CocoaPods.
+
+```bash
+cd ios
+bundle install
+bundle exec pod install
+```
+
+The output will look like this:
+
+```shell
+...
+Framework build type is static library
+[Codegen] Adding script_phases to ReactCodegen.
+[Codegen] Generating ./build/generated/ios/ReactCodegen.podspec.json
+[Codegen] Analyzing /Users/me/src/TurboModuleExample/package.json
+[Codegen] Searching for codegen-enabled libraries in the app.
+[Codegen] Found TurboModuleExample
+[Codegen] Searching for codegen-enabled libraries in the project dependencies.
+[Codegen] Found react-native
+...
+```
+
+</TabItem>
+</Tabs>
+
+### 3. Write Application Code using the Turbo Native Module
+
+Using `NativeLocalStorage`, here’s a modified `App.tsx` that includes some text we want persisted, an input field and some buttons to update this value.
+
+The `TurboModuleRegistry` supports 2 modes of retrieving a Turbo Native Module:
+
+- `get<T>(name: string): T | null` which will return `null` if the Turbo Native Module is unavailable.
+- `getEnforcing<T>(name: string): T` which will throw an exception if the Turbo Native Module is unavailable. This assumes the module is always available.
+
+```tsx title="App.tsx"
+import {useEffect, useState, type JSX} from 'react';
+import {
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  TextInput,
+  Button,
+} from 'react-native';
+
+import NativeLocalStorage from './specs/NativeLocalStorage';
+
+const EMPTY = '<empty>';
+
+function App(): JSX.Element {
+  const [value, setValue] = useState<string | null>(null);
+
+  const [editingValue, setEditingValue] = useState<string | null>(
+    null,
+  );
+
+  useEffect(() => {
+    const storedValue = NativeLocalStorage?.getItem('myKey');
+    setValue(storedValue ?? '');
+  }, []);
+
+  function saveValue() {
+    NativeLocalStorage?.setItem(editingValue ?? EMPTY, 'myKey');
+    setValue(editingValue);
+  }
+
+  function clearAll() {
+    NativeLocalStorage?.clear();
+    setValue('');
+  }
+
+  function deleteValue() {
+    NativeLocalStorage?.removeItem('myKey');
+    setValue('');
+  }
+
+  return (
+    <SafeAreaView style={{flex: 1}}>
+      <Text style={styles.text}>
+        Current stored value is: {value ?? 'No Value'}
+      </Text>
+      <TextInput
+        placeholder="Enter the text you want to store"
+        style={styles.textInput}
+        onChangeText={setEditingValue}
+      />
+      <Button title="Save" onPress={saveValue} />
+      <Button title="Delete" onPress={deleteValue} />
+      <Button title="Clear" onPress={clearAll} />
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  text: {
+    margin: 10,
+    fontSize: 20,
+  },
+  textInput: {
+    margin: 10,
+    height: 40,
+    borderColor: 'black',
+    borderWidth: 1,
+    paddingLeft: 5,
+    paddingRight: 5,
+    borderRadius: 5,
+  },
+});
+
+export default App;
+```
+
+### 4. Write your Native Platform code
+
+With everything prepared, we're going to start writing native platform code. We do this in 2 parts:
+
+:::note
+This guide shows you how to create a Turbo Native Module that only works with the New Architecture. If you need to support both the New Architecture and the Legacy Architecture, please refer to our [backwards compatibility guide](https://github.com/reactwg/react-native-new-architecture/blob/main/docs/backwards-compat.md).
+:::
+
+<Tabs groupId="platforms" queryString defaultValue={constants.defaultPlatform}>
+    <TabItem value="android" label="Android">
+        <TurboNativeModulesAndroid />
+    </TabItem>
+    <TabItem value="ios" label="iOS">
+        <TurboNativeModulesIOS/>
+    </TabItem>
+</Tabs>
diff --git a/website/versioned_docs/version-0.81/tutorial.md b/website/versioned_docs/version-0.81/tutorial.md
index d1a92919cd7..cbd5fd11bef 100644
--- a/website/versioned_docs/version-0.81/tutorial.md
+++ b/website/versioned_docs/version-0.81/tutorial.md
@@ -1,270 +1,267 @@
----
-id: tutorial
-title: Learn the Basics
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-React Native is like React, but it uses native components instead of web components as building blocks. So to understand the basic structure of a React Native app, you need to understand some of the basic React concepts, like JSX, components, `state`, and `props`. If you already know React, you still need to learn some React Native specific stuff, like the native components. This tutorial is aimed at all audiences, whether you have React experience or not.
-
-Let's do this thing.
-
-## Hello World
-
-In accordance with the ancient traditions of our people, we must first build an app that does nothing except say "Hello, world!". Here it is:
-
-```SnackPlayer name=Hello%20World
-import React from 'react';
-import {Text, View} from 'react-native';
-
-const HelloWorldApp = () => {
-  return (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}>
-      <Text>Hello, world!</Text>
-    </View>
-  );
-};
-export default HelloWorldApp;
-```
-
-If you are feeling curious, you can play around with sample code directly in the web simulators. You can also paste it into your `App.js` file to create a real app on your local machine.
-
-## What's going on here?
-
-1. First of all, we need to import `React` to be able to use `JSX`, which will then be transformed to the native components of each platform.
-2. On line 2, we import the `Text` and `View` components from `react-native`
-
-Then we define the `HelloWorldApp` function, which is a [function component](https://react.dev/reference/react/Component) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child.
-
-The `Text` component allows us to render a text, while the `View` component renders a container. This container has several styles applied, let's analyze what each one is doing.
-
-The first style that we find is `flex: 1`, the [`flex`](layout-props#flex) prop will define how your items are going to "fill" over the available space along your main axis. Since we only have one container, it will take all the available space of the parent component. In this case, it is the only component, so it will take all the available screen space.
-
-The following style is [`justifyContent`](layout-props#justifycontent): "center". This aligns children of a container in the center of the container's main axis. Finally, we have [`alignItems`](layout-props#alignitems): "center", which aligns children of a container in the center of the container's cross axis.
-
-Some of the things in here might not look like JavaScript to you. Don't panic. _This is the future_.
-
-First of all, ES2015 (also known as ES6) is a set of improvements to JavaScript that is now part of the official standard, but not yet supported by all browsers, so often it isn't used yet in web development. React Native ships with ES2015 support, so you can use this stuff without worrying about compatibility. `import`, `export`, `const` and `from` in the example above are all ES2015 features. If you aren't familiar with ES2015, you can probably pick it up by reading through sample code like this tutorial has. If you want, [this page](https://babeljs.io/learn-es2015/) has a good overview of ES2015 features.
-
-The other unusual thing in this code example is `<View><Text>Hello world!</Text></View>`. This is JSX - a syntax for embedding XML within JavaScript. Many frameworks use a specialized templating language which lets you embed code inside markup language. In React, this is reversed. JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like `<div>` or `<span>`, you use React components. In this case, `<Text>` is a [Core Component](intro-react-native-components) that displays some text and `View` is like the `<div>` or `<span>`.
-
-## Components
-
-So this code is defining `HelloWorldApp`, a new `Component`. When you're building a React Native app, you'll be making new components a lot. Anything you see on the screen is some sort of component.
-
-## Props
-
-Most components can be customized when they are created, with different parameters. These creation parameters are called props.
-
-Your own components can also use `props`. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place. Refer to `props.YOUR_PROP_NAME` in your functional components or `this.props.YOUR_PROP_NAME` in your class components. Here's an example:
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Hello%20Props&ext=js
-import React from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-
-const styles = StyleSheet.create({
-  center: {
-    alignItems: 'center',
-  },
-});
-
-const Greeting = props => {
-  return (
-    <View style={styles.center}>
-      <Text>Hello {props.name}!</Text>
-    </View>
-  );
-};
-
-const LotsOfGreetings = () => {
-  return (
-    <View style={[styles.center, {top: 50}]}>
-      <Greeting name="Rexxar" />
-      <Greeting name="Jaina" />
-      <Greeting name="Valeera" />
-    </View>
-  );
-};
-
-export default LotsOfGreetings;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Hello%20Props&ext=tsx
-import React from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-
-const styles = StyleSheet.create({
-  center: {
-    alignItems: 'center',
-  },
-});
-
-type GreetingProps = {
-  name: string;
-};
-
-const Greeting = (props: GreetingProps) => {
-  return (
-    <View style={styles.center}>
-      <Text>Hello {props.name}!</Text>
-    </View>
-  );
-};
-
-const LotsOfGreetings = () => {
-  return (
-    <View style={[styles.center, {top: 50}]}>
-      <Greeting name="Rexxar" />
-      <Greeting name="Jaina" />
-      <Greeting name="Valeera" />
-    </View>
-  );
-};
-
-export default LotsOfGreetings;
-```
-
-</TabItem>
-</Tabs>
-
-Using `name` as a prop lets us customize the `Greeting` component, so we can reuse that component for each of our greetings. This example also uses the `Greeting` component in JSX. The power to do this is what makes React so cool.
-
-The other new thing going on here is the [`View`](view.md) component. A [`View`](view.md) is useful as a container for other components, to help control style and layout.
-
-With `props` and the basic [`Text`](text.md), [`Image`](image.md), and [`View`](view.md) components, you can build a wide variety of static screens. To learn how to make your app change over time, you need to [learn about State](#state).
-
-## State
-
-Unlike props [that are read-only](https://react.dev/reference/react/Component#props) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else.
-
-#### What's the difference between state and props in React?
-
-In a React component, the props are the variables that we pass from a parent component to a child component. Similarly, the state are also variables, with the difference that they are not passed as parameters, but rather that the component initializes and manages them internally.
-
-#### Are there differences between React and React Native to handle the state?
-
-<div className="two-columns">
-
-```tsx
-// ReactJS Counter Example using Hooks!
-
-import React, {useState} from 'react';
-
-
-
-const App = () => {
-  const [count, setCount] = useState(0);
-
-  return (
-    <div className="container">
-      <p>You clicked {count} times</p>
-      <button
-        onClick={() => setCount(count + 1)}>
-        Click me!
-      </button>
-    </div>
-  );
-};
-
-
-// CSS
-.container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-```
-
-```tsx
-// React Native Counter Example using Hooks!
-
-import React, {useState} from 'react';
-import {View, Text, Button, StyleSheet} from 'react-native';
-
-const App = () => {
-  const [count, setCount] = useState(0);
-
-  return (
-    <View style={styles.container}>
-      <Text>You clicked {count} times</Text>
-      <Button
-        onPress={() => setCount(count + 1)}
-        title="Click me!"
-      />
-    </View>
-  );
-};
-
-// React Native Styles
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-```
-
-</div>
-
-As shown above, there is no difference in handling the `state` between [React](https://react.dev/learn/state-a-components-memory) and `React Native`. You can use the state of your components both in classes and in function components using [hooks](https://react.dev/reference/react/useState)!
-
-In the following example we will show the same above counter example using classes.
-
-```SnackPlayer name=Hello%20Classes
-import React, {Component} from 'react';
-import {StyleSheet, TouchableOpacity, Text, View} from 'react-native';
-
-class App extends Component {
-  state = {
-    count: 0,
-  };
-
-  onPress = () => {
-    this.setState({
-      count: this.state.count + 1,
-    });
-  };
-
-  render() {
-    return (
-      <View style={styles.container}>
-        <TouchableOpacity style={styles.button} onPress={this.onPress}>
-          <Text>Click me</Text>
-        </TouchableOpacity>
-        <View>
-          <Text>You clicked {this.state.count} times</Text>
-        </View>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  button: {
-    alignItems: 'center',
-    backgroundColor: '#DDDDDD',
-    padding: 10,
-    marginBottom: 10,
-  },
-});
-
-export default App;
-```
+---
+id: tutorial
+title: Learn the Basics
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+React Native is like React, but it uses native components instead of web components as building blocks. So to understand the basic structure of a React Native app, you need to understand some of the basic React concepts, like JSX, components, `state`, and `props`. If you already know React, you still need to learn some React Native specific stuff, like the native components. This tutorial is aimed at all audiences, whether you have React experience or not.
+
+Let's do this thing.
+
+## Hello World
+
+In accordance with the ancient traditions of our people, we must first build an app that does nothing except say "Hello, world!". Here it is:
+
+```SnackPlayer name=Hello%20World
+import {Text, View} from 'react-native';
+
+const HelloWorldApp = () => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}>
+      <Text>Hello, world!</Text>
+    </View>
+  );
+};
+export default HelloWorldApp;
+```
+
+If you are feeling curious, you can play around with sample code directly in the web simulators. You can also paste it into your `App.js` file to create a real app on your local machine.
+
+## What's going on here?
+
+1. First of all, we need to import `React` to be able to use `JSX`, which will then be transformed to the native components of each platform.
+2. On line 2, we import the `Text` and `View` components from `react-native`
+
+Then we define the `HelloWorldApp` function, which is a [function component](https://react.dev/reference/react/Component) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child.
+
+The `Text` component allows us to render a text, while the `View` component renders a container. This container has several styles applied, let's analyze what each one is doing.
+
+The first style that we find is `flex: 1`, the [`flex`](layout-props#flex) prop will define how your items are going to "fill" over the available space along your main axis. Since we only have one container, it will take all the available space of the parent component. In this case, it is the only component, so it will take all the available screen space.
+
+The following style is [`justifyContent`](layout-props#justifycontent): "center". This aligns children of a container in the center of the container's main axis. Finally, we have [`alignItems`](layout-props#alignitems): "center", which aligns children of a container in the center of the container's cross axis.
+
+Some of the things in here might not look like JavaScript to you. Don't panic. _This is the future_.
+
+First of all, ES2015 (also known as ES6) is a set of improvements to JavaScript that is now part of the official standard, but not yet supported by all browsers, so often it isn't used yet in web development. React Native ships with ES2015 support, so you can use this stuff without worrying about compatibility. `import`, `export`, `const` and `from` in the example above are all ES2015 features. If you aren't familiar with ES2015, you can probably pick it up by reading through sample code like this tutorial has. If you want, [this page](https://babeljs.io/learn-es2015/) has a good overview of ES2015 features.
+
+The other unusual thing in this code example is `<View><Text>Hello world!</Text></View>`. This is JSX - a syntax for embedding XML within JavaScript. Many frameworks use a specialized templating language which lets you embed code inside markup language. In React, this is reversed. JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like `<div>` or `<span>`, you use React components. In this case, `<Text>` is a [Core Component](intro-react-native-components) that displays some text and `View` is like the `<div>` or `<span>`.
+
+## Components
+
+So this code is defining `HelloWorldApp`, a new `Component`. When you're building a React Native app, you'll be making new components a lot. Anything you see on the screen is some sort of component.
+
+## Props
+
+Most components can be customized when they are created, with different parameters. These creation parameters are called props.
+
+Your own components can also use `props`. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place. Refer to `props.YOUR_PROP_NAME` in your functional components or `this.props.YOUR_PROP_NAME` in your class components. Here's an example:
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Hello%20Props&ext=js
+import {Text, View, StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  center: {
+    alignItems: 'center',
+  },
+});
+
+const Greeting = props => {
+  return (
+    <View style={styles.center}>
+      <Text>Hello {props.name}!</Text>
+    </View>
+  );
+};
+
+const LotsOfGreetings = () => {
+  return (
+    <View style={[styles.center, {top: 50}]}>
+      <Greeting name="Rexxar" />
+      <Greeting name="Jaina" />
+      <Greeting name="Valeera" />
+    </View>
+  );
+};
+
+export default LotsOfGreetings;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Hello%20Props&ext=tsx
+import {Text, View, StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  center: {
+    alignItems: 'center',
+  },
+});
+
+type GreetingProps = {
+  name: string;
+};
+
+const Greeting = (props: GreetingProps) => {
+  return (
+    <View style={styles.center}>
+      <Text>Hello {props.name}!</Text>
+    </View>
+  );
+};
+
+const LotsOfGreetings = () => {
+  return (
+    <View style={[styles.center, {top: 50}]}>
+      <Greeting name="Rexxar" />
+      <Greeting name="Jaina" />
+      <Greeting name="Valeera" />
+    </View>
+  );
+};
+
+export default LotsOfGreetings;
+```
+
+</TabItem>
+</Tabs>
+
+Using `name` as a prop lets us customize the `Greeting` component, so we can reuse that component for each of our greetings. This example also uses the `Greeting` component in JSX. The power to do this is what makes React so cool.
+
+The other new thing going on here is the [`View`](view.md) component. A [`View`](view.md) is useful as a container for other components, to help control style and layout.
+
+With `props` and the basic [`Text`](text.md), [`Image`](image.md), and [`View`](view.md) components, you can build a wide variety of static screens. To learn how to make your app change over time, you need to [learn about State](#state).
+
+## State
+
+Unlike props [that are read-only](https://react.dev/reference/react/Component#props) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else.
+
+#### What's the difference between state and props in React?
+
+In a React component, the props are the variables that we pass from a parent component to a child component. Similarly, the state are also variables, with the difference that they are not passed as parameters, but rather that the component initializes and manages them internally.
+
+#### Are there differences between React and React Native to handle the state?
+
+<div className="two-columns">
+
+```tsx
+// React Counter Example using Hooks!
+
+import {useState} from 'react';
+
+
+
+const App = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="container">
+      <p>You clicked {count} times</p>
+      <button
+        onClick={() => setCount(count + 1)}>
+        Click me!
+      </button>
+    </div>
+  );
+};
+
+
+// CSS
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+```
+
+```tsx
+// React Native Counter Example using Hooks!
+
+import {useState} from 'react';
+import {View, Text, Button, StyleSheet} from 'react-native';
+
+const App = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <View style={styles.container}>
+      <Text>You clicked {count} times</Text>
+      <Button
+        onPress={() => setCount(count + 1)}
+        title="Click me!"
+      />
+    </View>
+  );
+};
+
+// React Native Styles
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+```
+
+</div>
+
+As shown above, there is no difference in handling the `state` between [React](https://react.dev/learn/state-a-components-memory) and `React Native`. You can use the state of your components both in classes and in function components using [hooks](https://react.dev/reference/react/useState)!
+
+In the following example we will show the same above counter example using classes.
+
+```SnackPlayer name=Hello%20Classes
+import {Component} from 'react';
+import {StyleSheet, TouchableOpacity, Text, View} from 'react-native';
+
+class App extends Component {
+  state = {
+    count: 0,
+  };
+
+  onPress = () => {
+    this.setState({
+      count: this.state.count + 1,
+    });
+  };
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <TouchableOpacity style={styles.button} onPress={this.onPress}>
+          <Text>Click me</Text>
+        </TouchableOpacity>
+        <View>
+          <Text>You clicked {this.state.count} times</Text>
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#DDDDDD',
+    padding: 10,
+    marginBottom: 10,
+  },
+});
+
+export default App;
+```
diff --git a/website/versioned_docs/version-0.81/usecolorscheme.md b/website/versioned_docs/version-0.81/usecolorscheme.md
index 4d326283eeb..70620f7b6d1 100644
--- a/website/versioned_docs/version-0.81/usecolorscheme.md
+++ b/website/versioned_docs/version-0.81/usecolorscheme.md
@@ -20,7 +20,6 @@ The `useColorScheme` React hook provides and subscribes to color scheme updates
 ## Example
 
 ```SnackPlayer
-import React from 'react';
 import {Text, StyleSheet, useColorScheme} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.81/usewindowdimensions.md b/website/versioned_docs/version-0.81/usewindowdimensions.md
index 92bb1931d32..3e8a8077370 100644
--- a/website/versioned_docs/version-0.81/usewindowdimensions.md
+++ b/website/versioned_docs/version-0.81/usewindowdimensions.md
@@ -16,7 +16,6 @@ const {height, width} = useWindowDimensions();
 ## Example
 
 ```SnackPlayer name=useWindowDimensions&supportedPlatforms=ios,android
-import React from 'react';
 import {StyleSheet, Text, useWindowDimensions} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.81/using-a-listview.md b/website/versioned_docs/version-0.81/using-a-listview.md
index 878344e305d..a1db56a557a 100644
--- a/website/versioned_docs/version-0.81/using-a-listview.md
+++ b/website/versioned_docs/version-0.81/using-a-listview.md
@@ -12,7 +12,6 @@ The `FlatList` component requires two props: `data` and `renderItem`. `data` is
 This example creates a basic `FlatList` of hardcoded data. Each item in the `data` props is rendered as a `Text` component. The `FlatListBasics` component then renders the `FlatList` and all `Text` components.
 
 ```SnackPlayer name=FlatList%20Basics
-import React from 'react';
 import {FlatList, StyleSheet, Text, View} from 'react-native';
 
 const styles = StyleSheet.create({
@@ -55,7 +54,6 @@ export default FlatListBasics;
 If you want to render a set of data broken into logical sections, maybe with section headers, similar to `UITableView`s on iOS, then a [SectionList](sectionlist.md) is the way to go.
 
 ```SnackPlayer name=SectionList%20Basics
-import React from 'react';
 import {SectionList, StyleSheet, Text, View} from 'react-native';
 
 const styles = StyleSheet.create({
diff --git a/website/versioned_docs/version-0.81/using-a-scrollview.md b/website/versioned_docs/version-0.81/using-a-scrollview.md
index e4de6207a71..3ffae817bf0 100644
--- a/website/versioned_docs/version-0.81/using-a-scrollview.md
+++ b/website/versioned_docs/version-0.81/using-a-scrollview.md
@@ -8,7 +8,6 @@ The [ScrollView](scrollview.md) is a generic scrolling container that can contai
 This example creates a vertical `ScrollView` with both images and text mixed together.
 
 ```SnackPlayer name=Using%20ScrollView
-import React from 'react';
 import {Image, ScrollView, Text} from 'react-native';
 
 const logo = {
diff --git a/website/versioned_docs/version-0.81/vibration.md b/website/versioned_docs/version-0.81/vibration.md
index 1105767002c..b6d0c72693f 100644
--- a/website/versioned_docs/version-0.81/vibration.md
+++ b/website/versioned_docs/version-0.81/vibration.md
@@ -8,7 +8,6 @@ Vibrates the device.
 ## Example
 
 ```SnackPlayer name=Vibration%20Example&supportedPlatforms=ios,android
-import React from 'react';
 import {
   Button,
   Platform,
diff --git a/website/versioned_docs/version-0.81/view-style-props.md b/website/versioned_docs/version-0.81/view-style-props.md
index 4f1c413c202..c464a3fa559 100644
--- a/website/versioned_docs/version-0.81/view-style-props.md
+++ b/website/versioned_docs/version-0.81/view-style-props.md
@@ -9,7 +9,6 @@ import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameFor
 ### Example
 
 ```SnackPlayer name=ViewStyleProps
-import React from 'react';
 import {View, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.81/view.md b/website/versioned_docs/version-0.81/view.md
index 75a78380471..5ecbd8bdd52 100644
--- a/website/versioned_docs/version-0.81/view.md
+++ b/website/versioned_docs/version-0.81/view.md
@@ -10,7 +10,6 @@ The most fundamental component for building a UI, `View` is a container that sup
 This example creates a `View` that wraps two boxes with color and a text component in a row with padding.
 
 ```SnackPlayer name=View%20Example
-import React from 'react';
 import {View, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.81/virtualizedlist.md b/website/versioned_docs/version-0.81/virtualizedlist.md
index bc36346afdf..f935cd24c08 100644
--- a/website/versioned_docs/version-0.81/virtualizedlist.md
+++ b/website/versioned_docs/version-0.81/virtualizedlist.md
@@ -15,7 +15,6 @@ Virtualization massively improves memory consumption and performance of large li
 <TabItem value="javascript">
 
 ```SnackPlayer name=VirtualizedListExample&ext=js
-import React from 'react';
 import {View, VirtualizedList, StyleSheet, Text, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -71,7 +70,6 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=VirtualizedListExample&ext=tsx
-import React from 'react';
 import {View, VirtualizedList, StyleSheet, Text, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.82/_fabric-native-components.jsx b/website/versioned_docs/version-0.82/_fabric-native-components.jsx
index fc6a3171a4f..69bc6f31268 100644
--- a/website/versioned_docs/version-0.82/_fabric-native-components.jsx
+++ b/website/versioned_docs/version-0.82/_fabric-native-components.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import IOSContent from './fabric-native-components-ios.md';
 import AndroidContent from './fabric-native-components-android.md';
 
diff --git a/website/versioned_docs/version-0.82/_integration-with-existing-apps-ios.md b/website/versioned_docs/version-0.82/_integration-with-existing-apps-ios.md
index 4b95571538b..f28e3c48bf9 100644
--- a/website/versioned_docs/version-0.82/_integration-with-existing-apps-ios.md
+++ b/website/versioned_docs/version-0.82/_integration-with-existing-apps-ios.md
@@ -1,655 +1,655 @@
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import constants from '@site/core/TabsConstants';
-import CodeBlock from '@theme/CodeBlock';
-import RNTemplateRepoLink from '@site/core/RNTemplateRepoLink';
-import {getTemplateBranchNameForCurrentVersion} from '@site/src/getTemplateBranchNameForCurrentVersion';
-
-## Key Concepts
-
-The keys to integrating React Native components into your iOS application are to:
-
-1. Set up the correct directory structure.
-2. Install the necessary NPM dependencies.
-3. Adding React Native to your Podfile configuration.
-4. Writing the TypeScript code for your first React Native screen.
-5. Integrate React Native with your iOS code using a `RCTRootView`.
-6. Testing your integration by running the bundler and seeing your app in action.
-
-## Using the Community Template
-
-While you follow this guide, we suggest you to use the [React Native Community Template](https://github.com/react-native-community/template/) as reference. The template contains a **minimal iOS app** and will help you understanding how to integrate React Native into an existing iOS app.
-
-## Prerequisites
-
-Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](getting-started-without-a-framework) to configure your development environment for building React Native apps for iOS.
-This guide also assumes you're familiar with the basics of iOS development such as creating a `UIViewController` and editing the `Podfile` file.
-
-### 1. Set up directory structure
-
-To ensure a smooth experience, create a new folder for your integrated React Native project, then **move your existing iOS project** to the `/ios` subfolder.
-
-## 2. Install NPM dependencies
-
-Go to the root directory and run the following command:
-
-<CodeBlock language="bash" title="shell">
-{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/package.json`}
-</CodeBlock>
-
-This will copy the `package.json` <RNTemplateRepoLink href="template/package.json">file from the Community template</RNTemplateRepoLink> to your project.
-
-Next, install the NPM packages by running:
-
-<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
-<TabItem value="npm">
-
-```shell
-npm install
-```
-
-</TabItem>
-<TabItem value="yarn">
-
-```shell
-yarn install
-```
-
-</TabItem>
-</Tabs>
-
-Installation process has created a new `node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
-
-Add `node_modules/` to your `.gitignore` file (here the <RNTemplateRepoLink href="template/_gitignore">Community default one</RNTemplateRepoLink>).
-
-### 3. Install Development tools
-
-### Command Line Tools for Xcode
-
-Install the Command Line Tools. Choose **Settings... (or Preferences...)** in the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.
-
-![Xcode Command Line Tools](/docs/assets/GettingStartedXcodeCommandLineTools.png)
-
-### CocoaPods
-
-[CocoaPods](https://cocoapods.org) is a package management tool for iOS and macOS development. We use it to add the actual React Native framework code locally into your current project.
-
-We recommend installing CocoaPods using [Homebrew](https://brew.sh/):
-
-```shell
-brew install cocoapods
-```
-
-## 4. Adding React Native to your app
-
-### Configuring CocoaPods
-
-To configure CocoaPods, we need two files:
-
-- A **Gemfile** that defines which Ruby dependencies we need.
-- A **Podfile** that defines how to properly install our dependencies.
-
-For the **Gemfile**, go to the root directory of your project and run this command
-
-<CodeBlock language="bash" title="shell">
-{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/Gemfile`}
-</CodeBlock>
-
-This will download the Gemfile from the template.
-
-:::note
-If you created your project with Xcode 16, you need to update the Gemfile as it follows:
-
-```diff
--gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
-+gem 'cocoapods', '1.16.2'
-gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
--gem 'xcodeproj', '< 1.26.0'
-+gem 'xcodeproj', '1.27.0'
-```
-
-Xcode 16 generates a project in a slightly different ways from previous versions of Xcode, and you need the latest CocoaPods and Xcodeproj gems to make it work properly.
-:::
-
-Similarly, for the **Podfile**, go to the `ios` folder of your project and run
-
-<CodeBlock language="bash" title="shell">
-{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/ios/Podfile`}
-</CodeBlock>
-
-Please use the Community Template as a reference point for the <RNTemplateRepoLink href="template/Gemfile">Gemfile</RNTemplateRepoLink> and for the <RNTemplateRepoLink href="template/ios/Podfile">Podfile</RNTemplateRepoLink>.
-
-:::note
-Remember to change <RNTemplateRepoLink href="template/ios/Podfile#L17">this line</RNTemplateRepoLink>.
-:::
-
-Now, we need to run a couple of extra commands to install the Ruby gems and the Pods.
-Navigate to the `ios` folder and run the following commands:
-
-```sh
-bundle install
-bundle exec pod install
-```
-
-The first command will install the Ruby dependencies and the second command will actually integrate the React Native code in your application so that your iOS files can import the React Native headers.
-
-## 5. Writing the TypeScript Code
-
-Now we will actually modify the native iOS application to integrate React Native.
-
-The first bit of code we will write is the actual React Native code for the new screen that will be integrated into our application.
-
-### Create a `index.js` file
-
-First, create an empty `index.js` file in the root of your React Native project.
-
-`index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `import`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it.
-
-Our `index.js` should look as follows (here the <RNTemplateRepoLink href="template/index.js">Community template file as reference</RNTemplateRepoLink>):
-
-```js
-import {AppRegistry} from 'react-native';
-import App from './App';
-
-AppRegistry.registerComponent('HelloWorld', () => App);
-```
-
-### Create a `App.tsx` file
-
-Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX](<https://en.wikipedia.org/wiki/JSX_(JavaScript)>) expressions. It contains the root React Native component that we will integrate into our iOS application (<RNTemplateRepoLink href="template/App.tsx">link</RNTemplateRepoLink>):
-
-```tsx
-import React from 'react';
-import {
-  SafeAreaView,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  useColorScheme,
-  View,
-} from 'react-native';
-
-import {
-  Colors,
-  DebugInstructions,
-  Header,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
-function App(): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
-
-  return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundStyle.backgroundColor}
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
-        <View
-          style={{
-            backgroundColor: isDarkMode
-              ? Colors.black
-              : Colors.white,
-            padding: 24,
-          }}>
-          <Text style={styles.title}>Step One</Text>
-          <Text>
-            Edit <Text style={styles.bold}>App.tsx</Text> to
-            change this screen and see your edits.
-          </Text>
-          <Text style={styles.title}>See your changes</Text>
-          <ReloadInstructions />
-          <Text style={styles.title}>Debug</Text>
-          <DebugInstructions />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  title: {
-    fontSize: 24,
-    fontWeight: '600',
-  },
-  bold: {
-    fontWeight: '700',
-  },
-});
-
-export default App;
-```
-
-Here is the <RNTemplateRepoLink href="template/App.tsx">Community template file as reference</RNTemplateRepoLink>.
-
-## 5. Integrating with your iOS code
-
-We now need to add some native code in order to start the React Native runtime and tell it to render our React components.
-
-### Requirements
-
-React Native initialization is now unbound to any specific part of an iOS app.
-
-React Native can be initialized using a class called `RCTReactNativeFactory`, that takes care of handling the React Native lifecycle for you.
-
-Once the class is initialized, you can either start a React Native view providing a `UIWindow` object, or you can ask for the factory to generate a `UIView` that you can load in any `UIViewController.`
-
-In the following example, we will create a ViewController that can load a React Native view as it's `view`.
-
-#### Create the ReactViewController
-
-Create a new file from template (<kbd>⌘</kbd>+<kbd>N</kbd>) and choose the Cocoa Touch Class template.
-
-Make sure to select `UIViewController` as the "Subclass of" field.
-
-<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
-<TabItem value="objc">
-
-Now open the `ReactViewController.m` file and apply the following changes
-
-```diff title="ReactViewController.m"
-#import "ReactViewController.h"
-+#import <React/RCTBundleURLProvider.h>
-+#import <RCTReactNativeFactory.h>
-+#import <RCTDefaultReactNativeFactoryDelegate.h>
-+#import <RCTAppDependencyProvider.h>
-
-
-@interface ReactViewController ()
-
-@end
-
-+@interface ReactNativeFactoryDelegate: RCTDefaultReactNativeFactoryDelegate
-+@end
-
--@implementation ReactViewController
-+@implementation ReactViewController {
-+  RCTReactNativeFactory *_factory;
-+  id<RCTReactNativeFactoryDelegate> _factoryDelegate;
-+}
-
- - (void)viewDidLoad {
-     [super viewDidLoad];
-     // Do any additional setup after loading the view.
-+    _factoryDelegate = [ReactNativeFactoryDelegate new];
-+    _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new];
-+    _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate];
-+    self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"];
- }
-
-@end
-
-+@implementation ReactNativeFactoryDelegate
-+
-+- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
-+{
-+  return [self bundleURL];
-+}
-+
-+- (NSURL *)bundleURL
-+{
-+#if DEBUG
-+  return [RCTBundleURLProvider.sharedSettings jsBundleURLForBundleRoot:@"index"];
-+#else
-+  return [NSBundle.mainBundle URLForResource:@"main" withExtension:@"jsbundle"];
-+#endif
-+}
-
-@end
-
-```
-
-</TabItem>
-<TabItem value="swift">
-
-Now open the `ReactViewController.swift` file and apply the following changes
-
-```diff title="ReactViewController.swift"
-import UIKit
-+import React
-+import React_RCTAppDelegate
-+import ReactAppDependencyProvider
-
-class ReactViewController: UIViewController {
-+  var reactNativeFactory: RCTReactNativeFactory?
-+  var reactNativeFactoryDelegate: RCTReactNativeFactoryDelegate?
-
-  override func viewDidLoad() {
-    super.viewDidLoad()
-+    reactNativeFactoryDelegate = ReactNativeDelegate()
-+    reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider()
-+    reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!)
-+    view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld")
-
-  }
-}
-
-+class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {
-+    override func sourceURL(for bridge: RCTBridge) -> URL? {
-+      self.bundleURL()
-+    }
-+
-+    override func bundleURL() -> URL? {
-+      #if DEBUG
-+      RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
-+      #else
-+      Bundle.main.url(forResource: "main", withExtension: "jsbundle")
-+      #endif
-+    }
-+
-+}
-```
-
-</TabItem>
-</Tabs>
-
-#### Presenting a React Native view in a rootViewController
-
-Finally, we can present our React Native view. To do so, we need a new View Controller that can host a view in which we can load the JS content.
-We already have the initial `ViewController`, and we can make it present the `ReactViewController`. There are several ways to do so, depending on your app. For this example, we assume that you have a button that presents React Native modally.
-
-<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
-<TabItem value="objc">
-
-```diff title="ViewController.m"
-#import "ViewController.h"
-+#import "ReactViewController.h"
-
-@interface ViewController ()
-
-@end
-
-- @implementation ViewController
-+@implementation ViewController {
-+  ReactViewController *reactViewController;
-+}
-
- - (void)viewDidLoad {
-   [super viewDidLoad];
-   // Do any additional setup after loading the view.
-   self.view.backgroundColor = UIColor.systemBackgroundColor;
-+  UIButton *button = [UIButton new];
-+  [button setTitle:@"Open React Native" forState:UIControlStateNormal];
-+  [button setTitleColor:UIColor.systemBlueColor forState:UIControlStateNormal];
-+  [button setTitleColor:UIColor.blueColor forState:UIControlStateHighlighted];
-+  [button addTarget:self action:@selector(presentReactNative) forControlEvents:UIControlEventTouchUpInside];
-+  [self.view addSubview:button];
-
-+  button.translatesAutoresizingMaskIntoConstraints = NO;
-+  [NSLayoutConstraint activateConstraints:@[
-+    [button.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor],
-+    [button.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor],
-+    [button.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor],
-+    [button.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
-+  ]];
- }
-
-+- (void)presentReactNative
-+{
-+  if (reactViewController == NULL) {
-+    reactViewController = [ReactViewController new];
-+  }
-+  [self presentViewController:reactViewController animated:YES];
-+}
-
-@end
-```
-
-</TabItem>
-<TabItem value="swift">
-
-```diff title="ViewController.swift"
-import UIKit
-
-class ViewController: UIViewController {
-
-+  var reactViewController: ReactViewController?
-
-  override func viewDidLoad() {
-    super.viewDidLoad()
-    // Do any additional setup after loading the view.
-    self.view.backgroundColor = .systemBackground
-
-+    let button = UIButton()
-+    button.setTitle("Open React Native", for: .normal)
-+    button.setTitleColor(.systemBlue, for: .normal)
-+    button.setTitleColor(.blue, for: .highlighted)
-+    button.addAction(UIAction { [weak self] _ in
-+      guard let self else { return }
-+      if reactViewController == nil {
-+       reactViewController = ReactViewController()
-+      }
-+      present(reactViewController!, animated: true)
-+    }, for: .touchUpInside)
-+    self.view.addSubview(button)
-+
-+    button.translatesAutoresizingMaskIntoConstraints = false
-+    NSLayoutConstraint.activate([
-+      button.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
-+      button.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
-+      button.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
-+      button.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
-+    ])
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-Make sure to disable the Sandbox scripting. To achieve this, in Xcode, click on your app, then on build settings. Filter for script and set the `User Script Sandboxing` to `NO`. This step is needed to properly switch between the Debug and Release version of the [Hermes engine](https://github.com/facebook/hermes/blob/main/README.md) that we ship with React Native.
-
-![Disable Sandboxing](/docs/assets/disable-sandboxing.png)
-
-Finally, make sure to add the `UIViewControllerBasedStatusBarAppearance` key into your `Info.plist` file, with value of `NO`.
-
-![Disable UIViewControllerBasedStatusBarAppearance](/docs/assets/disable-UIViewControllerBasedStatusBarAppearance.png)
-
-## 6. Test your integration
-
-You have completed all the basic steps to integrate React Native with your application. Now we will start the [Metro bundler](https://metrobundler.dev/) to build your TypeScript application code into a bundle. Metro's HTTP server shares the bundle from `localhost` on your developer environment to a simulator or device. This allows for [hot reloading](https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading).
-
-First, you need to create a `metro.config.js` file in the root of your project as follows:
-
-```js
-const {getDefaultConfig} = require('@react-native/metro-config');
-module.exports = getDefaultConfig(__dirname);
-```
-
-You can checkout the <RNTemplateRepoLink href="template/metro.config.js">`metro.config.js` file</RNTemplateRepoLink> from the Community template file as reference.
-
-Then, you need to create a `.watchmanconfig` file in the root of your project. The file must contain an empty json object:
-
-```sh
-echo {} > .watchmanconfig
-```
-
-Once you have the configuration file in place, you can run the bundler. Run the following command in the root directory of your project:
-
-<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
-<TabItem value="npm">
-
-```shell
-npm start
-```
-
-</TabItem>
-<TabItem value="yarn">
-
-```shell
-yarn start
-```
-
-</TabItem>
-</Tabs>
-
-Now build and run your iOS app as normal.
-
-Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display:
-
-<center><img src="/docs/assets/EmbeddedAppIOS078.gif" width="300" /></center>
-
-### Creating a release build in Xcode
-
-You can use Xcode to create your release builds too! The only additional step is to add a script that is executed when the app is built to package your JS and images into the iOS application.
-
-1. In Xcode, select your application
-2. Click on `Build Phases`
-3. Click on the `+` in the top left corner and select `New Run Script Phase`
-4. Click on the `Run Script` line and rename the Script to `Bundle React Native code and images`
-5. Paste in the text box the following script
-
-```sh title="Build React Native code and image"
-set -e
-
-WITH_ENVIRONMENT="$REACT_NATIVE_PATH/scripts/xcode/with-environment.sh"
-REACT_NATIVE_XCODE="$REACT_NATIVE_PATH/scripts/react-native-xcode.sh"
-
-/bin/sh -c "$WITH_ENVIRONMENT $REACT_NATIVE_XCODE"
-```
-
-6. Drag and drop the script before the one called `[CP] Embed Pods Frameworks`.
-
-Now, if you build your app for Release, it will work as expected.
-
-## 7. Passing initial props to the React Native view
-
-In some case, you'd like to pass some information from the Native app to JavaScript. For example, you might want to pass the user id of the currently logged user to React Native, together with a token that can be used to retrieve information from a database.
-
-This is possible by using the `initialProperties` parameter of the `view(withModuleName:initialProperty)` overload of the `RCTReactNativeFactory` class. The following steps shows you how to do it.
-
-### Update the App.tsx file to read the initial properties.
-
-Open the `App.tsx` file and add the following code:
-
-```diff title="App.tsx"
-import {
-  Colors,
-  DebugInstructions,
-  Header,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
--function App(): React.JSX.Element {
-+function App(props): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
-
-  return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundStyle.backgroundColor}
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
--       <View
--         style={{
--           backgroundColor: isDarkMode
--             ? Colors.black
--             : Colors.white,
--           padding: 24,
--         }}>
--         <Text style={styles.title}>Step One</Text>
--         <Text>
--           Edit <Text style={styles.bold}>App.tsx</Text> to
--           change this screen and see your edits.
--         </Text>
--         <Text style={styles.title}>See your changes</Text>
--         <ReloadInstructions />
--         <Text style={styles.title}>Debug</Text>
--         <DebugInstructions />
-+         <Text style={styles.title}>UserID: {props.userID}</Text>
-+         <Text style={styles.title}>Token: {props.token}</Text>
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  title: {
-    fontSize: 24,
-    fontWeight: '600',
-+   marginLeft: 20,
-  },
-  bold: {
-    fontWeight: '700',
-  },
-});
-
-export default App;
-```
-
-These changes will tell React Native that your App component is now accepting some properties. The `RCTreactNativeFactory` will take care of passing them to the component when it's rendered.
-
-### Update the Native code to pass the initial properties to JavaScript.
-
-<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
-<TabItem value="objc">
-
-Modify the `ReactViewController.mm` to pass the initial properties to JavaScript.
-
-```diff title="ReactViewController.mm"
- - (void)viewDidLoad {
-   [super viewDidLoad];
-   // Do any additional setup after loading the view.
-
-   _factoryDelegate = [ReactNativeFactoryDelegate new];
-   _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new];
-   _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate];
--  self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"];
-+  self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld" initialProperties:@{
-+    @"userID": @"12345678",
-+    @"token": @"secretToken"
-+  }];
-}
-```
-
-</TabItem>
-<TabItem value="swift">
-
-Modify the `ReactViewController.swift` to pass the initial properties to the React Native view.
-
-```diff title="ReactViewController.swift"
-  override func viewDidLoad() {
-    super.viewDidLoad()
-    reactNativeFactoryDelegate = ReactNativeDelegate()
-    reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider()
-    reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!)
--   view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld")
-+   view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld" initialProperties: [
-+     "userID": "12345678",
-+     "token": "secretToken"
-+])
-
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-3. Run your app once again. You should see the following screen after you present the `ReactViewController`:
-
-<center>
-  <img src="/docs/assets/brownfield-with-initial-props.png" width="30%" height="30%"/>
-</center>
-
-## Now what?
-
-At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native.
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import constants from '@site/core/TabsConstants';
+import CodeBlock from '@theme/CodeBlock';
+import RNTemplateRepoLink from '@site/core/RNTemplateRepoLink';
+import {getTemplateBranchNameForCurrentVersion} from '@site/src/getTemplateBranchNameForCurrentVersion';
+
+## Key Concepts
+
+The keys to integrating React Native components into your iOS application are to:
+
+1. Set up the correct directory structure.
+2. Install the necessary NPM dependencies.
+3. Adding React Native to your Podfile configuration.
+4. Writing the TypeScript code for your first React Native screen.
+5. Integrate React Native with your iOS code using a `RCTRootView`.
+6. Testing your integration by running the bundler and seeing your app in action.
+
+## Using the Community Template
+
+While you follow this guide, we suggest you to use the [React Native Community Template](https://github.com/react-native-community/template/) as reference. The template contains a **minimal iOS app** and will help you understanding how to integrate React Native into an existing iOS app.
+
+## Prerequisites
+
+Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](getting-started-without-a-framework) to configure your development environment for building React Native apps for iOS.
+This guide also assumes you're familiar with the basics of iOS development such as creating a `UIViewController` and editing the `Podfile` file.
+
+### 1. Set up directory structure
+
+To ensure a smooth experience, create a new folder for your integrated React Native project, then **move your existing iOS project** to the `/ios` subfolder.
+
+## 2. Install NPM dependencies
+
+Go to the root directory and run the following command:
+
+<CodeBlock language="bash" title="shell">
+{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/package.json`}
+</CodeBlock>
+
+This will copy the `package.json` <RNTemplateRepoLink href="template/package.json">file from the Community template</RNTemplateRepoLink> to your project.
+
+Next, install the NPM packages by running:
+
+<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
+<TabItem value="npm">
+
+```shell
+npm install
+```
+
+</TabItem>
+<TabItem value="yarn">
+
+```shell
+yarn install
+```
+
+</TabItem>
+</Tabs>
+
+Installation process has created a new `node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
+
+Add `node_modules/` to your `.gitignore` file (here the <RNTemplateRepoLink href="template/_gitignore">Community default one</RNTemplateRepoLink>).
+
+### 3. Install Development tools
+
+### Command Line Tools for Xcode
+
+Install the Command Line Tools. Choose **Settings... (or Preferences...)** in the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.
+
+![Xcode Command Line Tools](/docs/assets/GettingStartedXcodeCommandLineTools.png)
+
+### CocoaPods
+
+[CocoaPods](https://cocoapods.org) is a package management tool for iOS and macOS development. We use it to add the actual React Native framework code locally into your current project.
+
+We recommend installing CocoaPods using [Homebrew](https://brew.sh/):
+
+```shell
+brew install cocoapods
+```
+
+## 4. Adding React Native to your app
+
+### Configuring CocoaPods
+
+To configure CocoaPods, we need two files:
+
+- A **Gemfile** that defines which Ruby dependencies we need.
+- A **Podfile** that defines how to properly install our dependencies.
+
+For the **Gemfile**, go to the root directory of your project and run this command
+
+<CodeBlock language="bash" title="shell">
+{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/Gemfile`}
+</CodeBlock>
+
+This will download the Gemfile from the template.
+
+:::note
+If you created your project with Xcode 16, you need to update the Gemfile as it follows:
+
+```diff
+-gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
++gem 'cocoapods', '1.16.2'
+gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
+-gem 'xcodeproj', '< 1.26.0'
++gem 'xcodeproj', '1.27.0'
+```
+
+Xcode 16 generates a project in a slightly different ways from previous versions of Xcode, and you need the latest CocoaPods and Xcodeproj gems to make it work properly.
+:::
+
+Similarly, for the **Podfile**, go to the `ios` folder of your project and run
+
+<CodeBlock language="bash" title="shell">
+{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/ios/Podfile`}
+</CodeBlock>
+
+Please use the Community Template as a reference point for the <RNTemplateRepoLink href="template/Gemfile">Gemfile</RNTemplateRepoLink> and for the <RNTemplateRepoLink href="template/ios/Podfile">Podfile</RNTemplateRepoLink>.
+
+:::note
+Remember to change <RNTemplateRepoLink href="template/ios/Podfile#L17">this line</RNTemplateRepoLink>.
+:::
+
+Now, we need to run a couple of extra commands to install the Ruby gems and the Pods.
+Navigate to the `ios` folder and run the following commands:
+
+```sh
+bundle install
+bundle exec pod install
+```
+
+The first command will install the Ruby dependencies and the second command will actually integrate the React Native code in your application so that your iOS files can import the React Native headers.
+
+## 5. Writing the TypeScript Code
+
+Now we will actually modify the native iOS application to integrate React Native.
+
+The first bit of code we will write is the actual React Native code for the new screen that will be integrated into our application.
+
+### Create a `index.js` file
+
+First, create an empty `index.js` file in the root of your React Native project.
+
+`index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `import`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it.
+
+Our `index.js` should look as follows (here the <RNTemplateRepoLink href="template/index.js">Community template file as reference</RNTemplateRepoLink>):
+
+```js
+import {AppRegistry} from 'react-native';
+import App from './App';
+
+AppRegistry.registerComponent('HelloWorld', () => App);
+```
+
+### Create a `App.tsx` file
+
+Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX](<https://en.wikipedia.org/wiki/JSX_(JavaScript)>) expressions. It contains the root React Native component that we will integrate into our iOS application (<RNTemplateRepoLink href="template/App.tsx">link</RNTemplateRepoLink>):
+
+```tsx
+import {type JSX} from 'react';
+import {
+  SafeAreaView,
+  ScrollView,
+  StatusBar,
+  StyleSheet,
+  Text,
+  useColorScheme,
+  View,
+} from 'react-native';
+
+import {
+  Colors,
+  DebugInstructions,
+  Header,
+  ReloadInstructions,
+} from 'react-native/Libraries/NewAppScreen';
+
+function App(): JSX.Element {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const backgroundStyle = {
+    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+  };
+
+  return (
+    <SafeAreaView style={backgroundStyle}>
+      <StatusBar
+        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
+        backgroundColor={backgroundStyle.backgroundColor}
+      />
+      <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        style={backgroundStyle}>
+        <Header />
+        <View
+          style={{
+            backgroundColor: isDarkMode
+              ? Colors.black
+              : Colors.white,
+            padding: 24,
+          }}>
+          <Text style={styles.title}>Step One</Text>
+          <Text>
+            Edit <Text style={styles.bold}>App.tsx</Text> to
+            change this screen and see your edits.
+          </Text>
+          <Text style={styles.title}>See your changes</Text>
+          <ReloadInstructions />
+          <Text style={styles.title}>Debug</Text>
+          <DebugInstructions />
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 24,
+    fontWeight: '600',
+  },
+  bold: {
+    fontWeight: '700',
+  },
+});
+
+export default App;
+```
+
+Here is the <RNTemplateRepoLink href="template/App.tsx">Community template file as reference</RNTemplateRepoLink>.
+
+## 5. Integrating with your iOS code
+
+We now need to add some native code in order to start the React Native runtime and tell it to render our React components.
+
+### Requirements
+
+React Native initialization is now unbound to any specific part of an iOS app.
+
+React Native can be initialized using a class called `RCTReactNativeFactory`, that takes care of handling the React Native lifecycle for you.
+
+Once the class is initialized, you can either start a React Native view providing a `UIWindow` object, or you can ask for the factory to generate a `UIView` that you can load in any `UIViewController.`
+
+In the following example, we will create a ViewController that can load a React Native view as it's `view`.
+
+#### Create the ReactViewController
+
+Create a new file from template (<kbd>⌘</kbd>+<kbd>N</kbd>) and choose the Cocoa Touch Class template.
+
+Make sure to select `UIViewController` as the "Subclass of" field.
+
+<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
+<TabItem value="objc">
+
+Now open the `ReactViewController.m` file and apply the following changes
+
+```diff title="ReactViewController.m"
+#import "ReactViewController.h"
++#import <React/RCTBundleURLProvider.h>
++#import <RCTReactNativeFactory.h>
++#import <RCTDefaultReactNativeFactoryDelegate.h>
++#import <RCTAppDependencyProvider.h>
+
+
+@interface ReactViewController ()
+
+@end
+
++@interface ReactNativeFactoryDelegate: RCTDefaultReactNativeFactoryDelegate
++@end
+
+-@implementation ReactViewController
++@implementation ReactViewController {
++  RCTReactNativeFactory *_factory;
++  id<RCTReactNativeFactoryDelegate> _factoryDelegate;
++}
+
+ - (void)viewDidLoad {
+     [super viewDidLoad];
+     // Do any additional setup after loading the view.
++    _factoryDelegate = [ReactNativeFactoryDelegate new];
++    _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new];
++    _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate];
++    self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"];
+ }
+
+@end
+
++@implementation ReactNativeFactoryDelegate
++
++- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
++{
++  return [self bundleURL];
++}
++
++- (NSURL *)bundleURL
++{
++#if DEBUG
++  return [RCTBundleURLProvider.sharedSettings jsBundleURLForBundleRoot:@"index"];
++#else
++  return [NSBundle.mainBundle URLForResource:@"main" withExtension:@"jsbundle"];
++#endif
++}
+
+@end
+
+```
+
+</TabItem>
+<TabItem value="swift">
+
+Now open the `ReactViewController.swift` file and apply the following changes
+
+```diff title="ReactViewController.swift"
+import UIKit
++import React
++import React_RCTAppDelegate
++import ReactAppDependencyProvider
+
+class ReactViewController: UIViewController {
++  var reactNativeFactory: RCTReactNativeFactory?
++  var reactNativeFactoryDelegate: RCTReactNativeFactoryDelegate?
+
+  override func viewDidLoad() {
+    super.viewDidLoad()
++    reactNativeFactoryDelegate = ReactNativeDelegate()
++    reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider()
++    reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!)
++    view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld")
+
+  }
+}
+
++class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {
++    override func sourceURL(for bridge: RCTBridge) -> URL? {
++      self.bundleURL()
++    }
++
++    override func bundleURL() -> URL? {
++      #if DEBUG
++      RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
++      #else
++      Bundle.main.url(forResource: "main", withExtension: "jsbundle")
++      #endif
++    }
++
++}
+```
+
+</TabItem>
+</Tabs>
+
+#### Presenting a React Native view in a rootViewController
+
+Finally, we can present our React Native view. To do so, we need a new View Controller that can host a view in which we can load the JS content.
+We already have the initial `ViewController`, and we can make it present the `ReactViewController`. There are several ways to do so, depending on your app. For this example, we assume that you have a button that presents React Native modally.
+
+<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
+<TabItem value="objc">
+
+```diff title="ViewController.m"
+#import "ViewController.h"
++#import "ReactViewController.h"
+
+@interface ViewController ()
+
+@end
+
+- @implementation ViewController
++@implementation ViewController {
++  ReactViewController *reactViewController;
++}
+
+ - (void)viewDidLoad {
+   [super viewDidLoad];
+   // Do any additional setup after loading the view.
+   self.view.backgroundColor = UIColor.systemBackgroundColor;
++  UIButton *button = [UIButton new];
++  [button setTitle:@"Open React Native" forState:UIControlStateNormal];
++  [button setTitleColor:UIColor.systemBlueColor forState:UIControlStateNormal];
++  [button setTitleColor:UIColor.blueColor forState:UIControlStateHighlighted];
++  [button addTarget:self action:@selector(presentReactNative) forControlEvents:UIControlEventTouchUpInside];
++  [self.view addSubview:button];
+
++  button.translatesAutoresizingMaskIntoConstraints = NO;
++  [NSLayoutConstraint activateConstraints:@[
++    [button.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor],
++    [button.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor],
++    [button.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor],
++    [button.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
++  ]];
+ }
+
++- (void)presentReactNative
++{
++  if (reactViewController == NULL) {
++    reactViewController = [ReactViewController new];
++  }
++  [self presentViewController:reactViewController animated:YES];
++}
+
+@end
+```
+
+</TabItem>
+<TabItem value="swift">
+
+```diff title="ViewController.swift"
+import UIKit
+
+class ViewController: UIViewController {
+
++  var reactViewController: ReactViewController?
+
+  override func viewDidLoad() {
+    super.viewDidLoad()
+    // Do any additional setup after loading the view.
+    self.view.backgroundColor = .systemBackground
+
++    let button = UIButton()
++    button.setTitle("Open React Native", for: .normal)
++    button.setTitleColor(.systemBlue, for: .normal)
++    button.setTitleColor(.blue, for: .highlighted)
++    button.addAction(UIAction { [weak self] _ in
++      guard let self else { return }
++      if reactViewController == nil {
++       reactViewController = ReactViewController()
++      }
++      present(reactViewController!, animated: true)
++    }, for: .touchUpInside)
++    self.view.addSubview(button)
++
++    button.translatesAutoresizingMaskIntoConstraints = false
++    NSLayoutConstraint.activate([
++      button.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
++      button.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
++      button.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
++      button.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
++    ])
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+Make sure to disable the Sandbox scripting. To achieve this, in Xcode, click on your app, then on build settings. Filter for script and set the `User Script Sandboxing` to `NO`. This step is needed to properly switch between the Debug and Release version of the [Hermes engine](https://github.com/facebook/hermes/blob/main/README.md) that we ship with React Native.
+
+![Disable Sandboxing](/docs/assets/disable-sandboxing.png)
+
+Finally, make sure to add the `UIViewControllerBasedStatusBarAppearance` key into your `Info.plist` file, with value of `NO`.
+
+![Disable UIViewControllerBasedStatusBarAppearance](/docs/assets/disable-UIViewControllerBasedStatusBarAppearance.png)
+
+## 6. Test your integration
+
+You have completed all the basic steps to integrate React Native with your application. Now we will start the [Metro bundler](https://metrobundler.dev/) to build your TypeScript application code into a bundle. Metro's HTTP server shares the bundle from `localhost` on your developer environment to a simulator or device. This allows for [hot reloading](https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading).
+
+First, you need to create a `metro.config.js` file in the root of your project as follows:
+
+```js
+const {getDefaultConfig} = require('@react-native/metro-config');
+module.exports = getDefaultConfig(__dirname);
+```
+
+You can checkout the <RNTemplateRepoLink href="template/metro.config.js">`metro.config.js` file</RNTemplateRepoLink> from the Community template file as reference.
+
+Then, you need to create a `.watchmanconfig` file in the root of your project. The file must contain an empty json object:
+
+```sh
+echo {} > .watchmanconfig
+```
+
+Once you have the configuration file in place, you can run the bundler. Run the following command in the root directory of your project:
+
+<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
+<TabItem value="npm">
+
+```shell
+npm start
+```
+
+</TabItem>
+<TabItem value="yarn">
+
+```shell
+yarn start
+```
+
+</TabItem>
+</Tabs>
+
+Now build and run your iOS app as normal.
+
+Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display:
+
+<center><img src="/docs/assets/EmbeddedAppIOS078.gif" width="300" /></center>
+
+### Creating a release build in Xcode
+
+You can use Xcode to create your release builds too! The only additional step is to add a script that is executed when the app is built to package your JS and images into the iOS application.
+
+1. In Xcode, select your application
+2. Click on `Build Phases`
+3. Click on the `+` in the top left corner and select `New Run Script Phase`
+4. Click on the `Run Script` line and rename the Script to `Bundle React Native code and images`
+5. Paste in the text box the following script
+
+```sh title="Build React Native code and image"
+set -e
+
+WITH_ENVIRONMENT="$REACT_NATIVE_PATH/scripts/xcode/with-environment.sh"
+REACT_NATIVE_XCODE="$REACT_NATIVE_PATH/scripts/react-native-xcode.sh"
+
+/bin/sh -c "$WITH_ENVIRONMENT $REACT_NATIVE_XCODE"
+```
+
+6. Drag and drop the script before the one called `[CP] Embed Pods Frameworks`.
+
+Now, if you build your app for Release, it will work as expected.
+
+## 7. Passing initial props to the React Native view
+
+In some case, you'd like to pass some information from the Native app to JavaScript. For example, you might want to pass the user id of the currently logged user to React Native, together with a token that can be used to retrieve information from a database.
+
+This is possible by using the `initialProperties` parameter of the `view(withModuleName:initialProperty)` overload of the `RCTReactNativeFactory` class. The following steps shows you how to do it.
+
+### Update the App.tsx file to read the initial properties.
+
+Open the `App.tsx` file and add the following code:
+
+```diff title="App.tsx"
+import {
+  Colors,
+  DebugInstructions,
+  Header,
+  ReloadInstructions,
+} from 'react-native/Libraries/NewAppScreen';
+
+-function App(): React.JSX.Element {
++function App(props): React.JSX.Element {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const backgroundStyle = {
+    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+  };
+
+  return (
+    <SafeAreaView style={backgroundStyle}>
+      <StatusBar
+        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
+        backgroundColor={backgroundStyle.backgroundColor}
+      />
+      <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        style={backgroundStyle}>
+        <Header />
+-       <View
+-         style={{
+-           backgroundColor: isDarkMode
+-             ? Colors.black
+-             : Colors.white,
+-           padding: 24,
+-         }}>
+-         <Text style={styles.title}>Step One</Text>
+-         <Text>
+-           Edit <Text style={styles.bold}>App.tsx</Text> to
+-           change this screen and see your edits.
+-         </Text>
+-         <Text style={styles.title}>See your changes</Text>
+-         <ReloadInstructions />
+-         <Text style={styles.title}>Debug</Text>
+-         <DebugInstructions />
++         <Text style={styles.title}>UserID: {props.userID}</Text>
++         <Text style={styles.title}>Token: {props.token}</Text>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 24,
+    fontWeight: '600',
++   marginLeft: 20,
+  },
+  bold: {
+    fontWeight: '700',
+  },
+});
+
+export default App;
+```
+
+These changes will tell React Native that your App component is now accepting some properties. The `RCTreactNativeFactory` will take care of passing them to the component when it's rendered.
+
+### Update the Native code to pass the initial properties to JavaScript.
+
+<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
+<TabItem value="objc">
+
+Modify the `ReactViewController.mm` to pass the initial properties to JavaScript.
+
+```diff title="ReactViewController.mm"
+ - (void)viewDidLoad {
+   [super viewDidLoad];
+   // Do any additional setup after loading the view.
+
+   _factoryDelegate = [ReactNativeFactoryDelegate new];
+   _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new];
+   _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate];
+-  self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"];
++  self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld" initialProperties:@{
++    @"userID": @"12345678",
++    @"token": @"secretToken"
++  }];
+}
+```
+
+</TabItem>
+<TabItem value="swift">
+
+Modify the `ReactViewController.swift` to pass the initial properties to the React Native view.
+
+```diff title="ReactViewController.swift"
+  override func viewDidLoad() {
+    super.viewDidLoad()
+    reactNativeFactoryDelegate = ReactNativeDelegate()
+    reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider()
+    reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!)
+-   view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld")
++   view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld" initialProperties: [
++     "userID": "12345678",
++     "token": "secretToken"
++])
+
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+3. Run your app once again. You should see the following screen after you present the `ReactViewController`:
+
+<center>
+  <img src="/docs/assets/brownfield-with-initial-props.png" width="30%" height="30%"/>
+</center>
+
+## Now what?
+
+At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native.
diff --git a/website/versioned_docs/version-0.82/_integration-with-existing-apps-kotlin.md b/website/versioned_docs/version-0.82/_integration-with-existing-apps-kotlin.md
index 23414c63a3b..c5f7d6bc4a6 100644
--- a/website/versioned_docs/version-0.82/_integration-with-existing-apps-kotlin.md
+++ b/website/versioned_docs/version-0.82/_integration-with-existing-apps-kotlin.md
@@ -1,511 +1,510 @@
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import constants from '@site/core/TabsConstants';
-import CodeBlock from '@theme/CodeBlock';
-import RNTemplateRepoLink from '@site/core/RNTemplateRepoLink';
-import {getTemplateBranchNameForCurrentVersion} from '@site/src/getTemplateBranchNameForCurrentVersion';
-
-## Key Concepts
-
-The keys to integrating React Native components into your Android application are to:
-
-1. Set up the correct directory structure.
-2. Install the necessary NPM dependencies.
-3. Adding React Native to your Gradle configuration.
-4. Writing the TypeScript code for your first React Native screen.
-5. Integrate React Native with your Android code using a ReactActivity.
-6. Testing your integration by running the bundler and seeing your app in action.
-
-## Using the Community Template
-
-While you follow this guide, we suggest you to use the [React Native Community Template](https://github.com/react-native-community/template/) as reference. The template contains a **minimal Android app** and will help you understanding how to integrate React Native into an existing Android app.
-
-## Prerequisites
-
-Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](getting-started-without-a-framework) to configure your development environment for building React Native apps for Android.
-This guide also assumes you're familiar with the basics of Android development such as creating Activities and editing the `AndroidManifest.xml` file.
-
-## 1. Set up directory structure
-
-To ensure a smooth experience, create a new folder for your integrated React Native project, then **move your existing Android project** to the `/android` subfolder.
-
-## 2. Install NPM dependencies
-
-Go to the root directory and run the following command:
-
-<CodeBlock language="bash" title="shell">
-{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/package.json`}
-</CodeBlock>
-
-This will copy the `package.json` <RNTemplateRepoLink href="template/package.json">file from the Community template</RNTemplateRepoLink> to your project.
-
-Next, install the NPM packages by running:
-
-<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
-<TabItem value="npm">
-
-```shell
-npm install
-```
-
-</TabItem>
-<TabItem value="yarn">
-
-```shell
-yarn install
-```
-
-</TabItem>
-</Tabs>
-
-Installation process has created a new `node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
-
-Add `node_modules/` to your `.gitignore` file (here the <RNTemplateRepoLink href="template/_gitignore">Community default one</RNTemplateRepoLink>).
-
-## 3. Adding React Native to your app
-
-### Configuring Gradle
-
-React Native uses the React Native Gradle Plugin to configure your dependencies and project setup.
-
-First, let's edit your `settings.gradle` file by adding those lines (as suggested from the <RNTemplateRepoLink href="template/android/settings.gradle">Community template</RNTemplateRepoLink>):
-
-```groovy
-// Configures the React Native Gradle Settings plugin used for autolinking
-pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
-plugins { id("com.facebook.react.settings") }
-extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
-// If using .gradle.kts files:
-// extensions.configure<com.facebook.react.ReactSettingsExtension> { autolinkLibrariesFromCommand() }
-includeBuild("../node_modules/@react-native/gradle-plugin")
-
-// Include your existing Gradle modules here.
-// include(":app")
-```
-
-Then you need to open your top level `build.gradle` and include this line (as suggested from the <RNTemplateRepoLink href="template/android/build.gradle">Community template</RNTemplateRepoLink>):
-
-```diff
-buildscript {
-    repositories {
-        google()
-        mavenCentral()
-    }
-    dependencies {
-        classpath("com.android.tools.build:gradle:7.3.1")
-+       classpath("com.facebook.react:react-native-gradle-plugin")
-    }
-}
-```
-
-This makes sure the React Native Gradle Plugin (RNGP) is available inside your project.
-Finally, add those lines inside your Applications's `build.gradle` file (it's a different `build.gradle` file usually inside your `app` folder - you can use the <RNTemplateRepoLink href="template/android/build.gradle">Community template file as reference</RNTemplateRepoLink>):
-
-```diff
-apply plugin: "com.android.application"
-+apply plugin: "com.facebook.react"
-
-repositories {
-    mavenCentral()
-}
-
-dependencies {
-    // Other dependencies here
-+   // Note: we intentionally don't specify the version number here as RNGP will take care of it.
-+   // If you don't use the RNGP, you'll have to specify version manually.
-+   implementation("com.facebook.react:react-android")
-+   implementation("com.facebook.react:hermes-android")
-}
-
-+react {
-+   // Needed to enable Autolinking - https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
-+   autolinkLibrariesWithApp()
-+}
-```
-
-Finally, open your application `gradle.properties` files and add the following line (here the <RNTemplateRepoLink href="template/android/gradle.properties">Community template file as reference</RNTemplateRepoLink>):
-
-```diff
-+reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
-+newArchEnabled=true
-+hermesEnabled=true
-```
-
-### Configuring your manifest
-
-First, make sure you have the Internet permission in your `AndroidManifest.xml`:
-
-```diff
-<manifest xmlns:android="http://schemas.android.com/apk/res/android">
-
-+   <uses-permission android:name="android.permission.INTERNET" />
-
-    <application
-      android:name=".MainApplication">
-    </application>
-</manifest>
-```
-
-Then you need to enable [cleartext traffic](https://developer.android.com/training/articles/security-config#CleartextTrafficPermitted) in your **debug** `AndroidManifest.xml`:
-
-```diff
-<?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools">
-
-    <application
-+       android:usesCleartextTraffic="true"
-+       tools:targetApi="28"
-    />
-</manifest>
-```
-
-As usual, here the AndroidManifest.xml file from the Community template to use as a reference: <RNTemplateRepoLink href="template/android/app/src/main/AndroidManifest.xml">main</RNTemplateRepoLink> and <RNTemplateRepoLink href="template/android/app/src/debug/AndroidManifest.xml">debug</RNTemplateRepoLink>.
-
-This is needed as your application will communicate with your local bundler, [Metro](https://metrobundler.dev/), via HTTP.
-
-Make sure you add this only to your **debug** manifest.
-
-## 4. Writing the TypeScript Code
-
-Now we will actually modify the native Android application to integrate React Native.
-
-The first bit of code we will write is the actual React Native code for the new screen that will be integrated into our application.
-
-### Create a `index.js` file
-
-First, create an empty `index.js` file in the root of your React Native project.
-
-`index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `import`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it.
-
-Our index.js should look as follows (here the <RNTemplateRepoLink href="template/index.js">Community template file as reference</RNTemplateRepoLink>):
-
-```js
-import {AppRegistry} from 'react-native';
-import App from './App';
-
-AppRegistry.registerComponent('HelloWorld', () => App);
-```
-
-### Create a `App.tsx` file
-
-Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX](<https://en.wikipedia.org/wiki/JSX_(JavaScript)>) expressions. It contains the root React Native component that we will integrate into our Android application (<RNTemplateRepoLink href="template/App.tsx">link</RNTemplateRepoLink>):
-
-```tsx
-import React from 'react';
-import {
-  SafeAreaView,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  useColorScheme,
-  View,
-} from 'react-native';
-
-import {
-  Colors,
-  DebugInstructions,
-  Header,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
-function App(): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
-
-  return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundStyle.backgroundColor}
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
-        <View
-          style={{
-            backgroundColor: isDarkMode
-              ? Colors.black
-              : Colors.white,
-            padding: 24,
-          }}>
-          <Text style={styles.title}>Step One</Text>
-          <Text>
-            Edit <Text style={styles.bold}>App.tsx</Text> to
-            change this screen and see your edits.
-          </Text>
-          <Text style={styles.title}>See your changes</Text>
-          <ReloadInstructions />
-          <Text style={styles.title}>Debug</Text>
-          <DebugInstructions />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  title: {
-    fontSize: 24,
-    fontWeight: '600',
-  },
-  bold: {
-    fontWeight: '700',
-  },
-});
-
-export default App;
-```
-
-Here is the <RNTemplateRepoLink href="template/App.tsx">Community template file as reference</RNTemplateRepoLink>.
-
-## 5. Integrating with your Android code
-
-We now need to add some native code in order to start the React Native runtime and tell it to render our React components.
-
-### Updating your Application class
-
-First, we need to update your `Application` class to properly initialize React Native as follows:
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-
-<TabItem value="java">
-
-```diff
-package <your-package-here>;
-
-import android.app.Application;
-+import com.facebook.react.PackageList;
-+import com.facebook.react.ReactApplication;
-+import com.facebook.react.ReactHost;
-+import com.facebook.react.ReactNativeHost;
-+import com.facebook.react.ReactPackage;
-+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
-+import com.facebook.react.defaults.DefaultReactHost;
-+import com.facebook.react.defaults.DefaultReactNativeHost;
-+import com.facebook.soloader.SoLoader;
-+import com.facebook.react.soloader.OpenSourceMergedSoMapping
-+import java.util.List;
-
--class MainApplication extends Application {
-+class MainApplication extends Application implements ReactApplication {
-+ @Override
-+ public ReactNativeHost getReactNativeHost() {
-+   return new DefaultReactNativeHost(this) {
-+     @Override
-+     protected List<ReactPackage> getPackages() { return new PackageList(this).getPackages(); }
-+     @Override
-+     protected String getJSMainModuleName() { return "index"; }
-+     @Override
-+     public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; }
-+     @Override
-+     protected boolean isNewArchEnabled() { return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; }
-+     @Override
-+     protected Boolean isHermesEnabled() { return BuildConfig.IS_HERMES_ENABLED; }
-+   };
-+ }
-
-+ @Override
-+ public ReactHost getReactHost() {
-+   return DefaultReactHost.getDefaultReactHost(getApplicationContext(), getReactNativeHost());
-+ }
-
-  @Override
-  public void onCreate() {
-    super.onCreate();
-+   SoLoader.init(this, OpenSourceMergedSoMapping);
-+   if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
-+     DefaultNewArchitectureEntryPoint.load();
-+   }
-  }
-}
-```
-
-</TabItem>
-
-<TabItem value="kotlin">
-
-```diff
-// package <your-package-here>
-
-import android.app.Application
-+import com.facebook.react.PackageList
-+import com.facebook.react.ReactApplication
-+import com.facebook.react.ReactHost
-+import com.facebook.react.ReactNativeHost
-+import com.facebook.react.ReactPackage
-+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
-+import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
-+import com.facebook.react.defaults.DefaultReactNativeHost
-+import com.facebook.soloader.SoLoader
-+import com.facebook.react.soloader.OpenSourceMergedSoMapping
-
--class MainApplication : Application() {
-+class MainApplication : Application(), ReactApplication {
-
-+ override val reactNativeHost: ReactNativeHost =
-+      object : DefaultReactNativeHost(this) {
-+        override fun getPackages(): List<ReactPackage> = PackageList(this).packages
-+        override fun getJSMainModuleName(): String = "index"
-+        override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
-+        override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
-+        override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
-+      }
-
-+ override val reactHost: ReactHost
-+   get() = getDefaultReactHost(applicationContext, reactNativeHost)
-
-  override fun onCreate() {
-    super.onCreate()
-+   SoLoader.init(this, OpenSourceMergedSoMapping)
-+   if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
-+     load()
-+   }
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-As usual, here the <RNTemplateRepoLink href="template/android/app/src/main/java/com/helloworld/MainApplication.kt">`MainApplication.kt` Community template file as reference</RNTemplateRepoLink>.
-
-#### Creating a `ReactActivity`
-
-Finally, we need to create a new `Activity` that will extend `ReactActivity` and host the React Native code. This activity will be responsible for starting the React Native runtime and rendering the React component.
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-
-<TabItem value="java">
-
-```java
-// package <your-package-here>;
-
-import com.facebook.react.ReactActivity;
-import com.facebook.react.ReactActivityDelegate;
-import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
-import com.facebook.react.defaults.DefaultReactActivityDelegate;
-
-public class MyReactActivity extends ReactActivity {
-
-    @Override
-    protected String getMainComponentName() {
-        return "HelloWorld";
-    }
-
-    @Override
-    protected ReactActivityDelegate createReactActivityDelegate() {
-        return new DefaultReactActivityDelegate(this, getMainComponentName(), DefaultNewArchitectureEntryPoint.getFabricEnabled());
-    }
-}
-```
-
-</TabItem>
-
-<TabItem value="kotlin">
-
-```kotlin
-// package <your-package-here>
-
-import com.facebook.react.ReactActivity
-import com.facebook.react.ReactActivityDelegate
-import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
-import com.facebook.react.defaults.DefaultReactActivityDelegate
-
-class MyReactActivity : ReactActivity() {
-
-    override fun getMainComponentName(): String = "HelloWorld"
-
-    override fun createReactActivityDelegate(): ReactActivityDelegate =
-        DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
-}
-```
-
-</TabItem>
-</Tabs>
-
-As usual, here the <RNTemplateRepoLink href="template/android/app/src/main/java/com/helloworld/MainActivity.kt">`MainActivity.kt` Community template file as reference</RNTemplateRepoLink>.
-
-Whenever you create a new Activity, you need to add it to your `AndroidManifest.xml` file. You also need set the theme of `MyReactActivity` to `Theme.AppCompat.Light.NoActionBar` (or to any non-ActionBar theme) as otherwise your application will render an ActionBar on top of your React Native screen:
-
-```diff
-<manifest xmlns:android="http://schemas.android.com/apk/res/android">
-
-    <uses-permission android:name="android.permission.INTERNET" />
-
-    <application
-      android:name=".MainApplication">
-
-+     <activity
-+       android:name=".MyReactActivity"
-+       android:label="@string/app_name"
-+       android:theme="@style/Theme.AppCompat.Light.NoActionBar">
-+     </activity>
-    </application>
-</manifest>
-```
-
-Now your activity is ready to run some JavaScript code.
-
-## 6. Test your integration
-
-You have completed all the basic steps to integrate React Native with your application. Now we will start the [Metro bundler](https://metrobundler.dev/) to build your TypeScript application code into a bundle. Metro's HTTP server shares the bundle from `localhost` on your developer environment to a simulator or device. This allows for [hot reloading](https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading).
-
-First, you need to create a `metro.config.js` file in the root of your project as follows:
-
-```js
-const {getDefaultConfig} = require('@react-native/metro-config');
-module.exports = getDefaultConfig(__dirname);
-```
-
-You can checkout the <RNTemplateRepoLink href="template/metro.config.js">`metro.config.js` file</RNTemplateRepoLink> from the Community template file as reference.
-
-Once you have the configuration file in place, you can run the bundler. Run the following command in the root directory of your project:
-
-<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
-<TabItem value="npm">
-
-```shell
-npm start
-```
-
-</TabItem>
-<TabItem value="yarn">
-
-```shell
-yarn start
-```
-
-</TabItem>
-</Tabs>
-
-Now build and run your Android app as normal.
-
-Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display:
-
-<center><img src="/docs/assets/EmbeddedAppAndroidVideo.gif" width="300" /></center>
-
-### Creating a release build in Android Studio
-
-You can use Android Studio to create your release builds too! It’s as quick as creating release builds of your previously-existing native Android app.
-
-The React Native Gradle Plugin will take care of bundling the JS code inside your APK/App Bundle.
-
-If you're not using Android Studio, you can create a release build with:
-
-```
-cd android
-# For a Release APK
-./gradlew :app:assembleRelease
-# For a Release AAB
-./gradlew :app:bundleRelease
-```
-
-### Now what?
-
-At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native.
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import constants from '@site/core/TabsConstants';
+import CodeBlock from '@theme/CodeBlock';
+import RNTemplateRepoLink from '@site/core/RNTemplateRepoLink';
+import {getTemplateBranchNameForCurrentVersion} from '@site/src/getTemplateBranchNameForCurrentVersion';
+
+## Key Concepts
+
+The keys to integrating React Native components into your Android application are to:
+
+1. Set up the correct directory structure.
+2. Install the necessary NPM dependencies.
+3. Adding React Native to your Gradle configuration.
+4. Writing the TypeScript code for your first React Native screen.
+5. Integrate React Native with your Android code using a ReactActivity.
+6. Testing your integration by running the bundler and seeing your app in action.
+
+## Using the Community Template
+
+While you follow this guide, we suggest you to use the [React Native Community Template](https://github.com/react-native-community/template/) as reference. The template contains a **minimal Android app** and will help you understanding how to integrate React Native into an existing Android app.
+
+## Prerequisites
+
+Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](getting-started-without-a-framework) to configure your development environment for building React Native apps for Android.
+This guide also assumes you're familiar with the basics of Android development such as creating Activities and editing the `AndroidManifest.xml` file.
+
+## 1. Set up directory structure
+
+To ensure a smooth experience, create a new folder for your integrated React Native project, then **move your existing Android project** to the `/android` subfolder.
+
+## 2. Install NPM dependencies
+
+Go to the root directory and run the following command:
+
+<CodeBlock language="bash" title="shell">
+{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/package.json`}
+</CodeBlock>
+
+This will copy the `package.json` <RNTemplateRepoLink href="template/package.json">file from the Community template</RNTemplateRepoLink> to your project.
+
+Next, install the NPM packages by running:
+
+<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
+<TabItem value="npm">
+
+```shell
+npm install
+```
+
+</TabItem>
+<TabItem value="yarn">
+
+```shell
+yarn install
+```
+
+</TabItem>
+</Tabs>
+
+Installation process has created a new `node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
+
+Add `node_modules/` to your `.gitignore` file (here the <RNTemplateRepoLink href="template/_gitignore">Community default one</RNTemplateRepoLink>).
+
+## 3. Adding React Native to your app
+
+### Configuring Gradle
+
+React Native uses the React Native Gradle Plugin to configure your dependencies and project setup.
+
+First, let's edit your `settings.gradle` file by adding those lines (as suggested from the <RNTemplateRepoLink href="template/android/settings.gradle">Community template</RNTemplateRepoLink>):
+
+```groovy
+// Configures the React Native Gradle Settings plugin used for autolinking
+pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
+plugins { id("com.facebook.react.settings") }
+extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
+// If using .gradle.kts files:
+// extensions.configure<com.facebook.react.ReactSettingsExtension> { autolinkLibrariesFromCommand() }
+includeBuild("../node_modules/@react-native/gradle-plugin")
+
+// Include your existing Gradle modules here.
+// include(":app")
+```
+
+Then you need to open your top level `build.gradle` and include this line (as suggested from the <RNTemplateRepoLink href="template/android/build.gradle">Community template</RNTemplateRepoLink>):
+
+```diff
+buildscript {
+    repositories {
+        google()
+        mavenCentral()
+    }
+    dependencies {
+        classpath("com.android.tools.build:gradle:7.3.1")
++       classpath("com.facebook.react:react-native-gradle-plugin")
+    }
+}
+```
+
+This makes sure the React Native Gradle Plugin (RNGP) is available inside your project.
+Finally, add those lines inside your Applications's `build.gradle` file (it's a different `build.gradle` file usually inside your `app` folder - you can use the <RNTemplateRepoLink href="template/android/build.gradle">Community template file as reference</RNTemplateRepoLink>):
+
+```diff
+apply plugin: "com.android.application"
++apply plugin: "com.facebook.react"
+
+repositories {
+    mavenCentral()
+}
+
+dependencies {
+    // Other dependencies here
++   // Note: we intentionally don't specify the version number here as RNGP will take care of it.
++   // If you don't use the RNGP, you'll have to specify version manually.
++   implementation("com.facebook.react:react-android")
++   implementation("com.facebook.react:hermes-android")
+}
+
++react {
++   // Needed to enable Autolinking - https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
++   autolinkLibrariesWithApp()
++}
+```
+
+Finally, open your application `gradle.properties` files and add the following line (here the <RNTemplateRepoLink href="template/android/gradle.properties">Community template file as reference</RNTemplateRepoLink>):
+
+```diff
++reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
++newArchEnabled=true
++hermesEnabled=true
+```
+
+### Configuring your manifest
+
+First, make sure you have the Internet permission in your `AndroidManifest.xml`:
+
+```diff
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
++   <uses-permission android:name="android.permission.INTERNET" />
+
+    <application
+      android:name=".MainApplication">
+    </application>
+</manifest>
+```
+
+Then you need to enable [cleartext traffic](https://developer.android.com/training/articles/security-config#CleartextTrafficPermitted) in your **debug** `AndroidManifest.xml`:
+
+```diff
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <application
++       android:usesCleartextTraffic="true"
++       tools:targetApi="28"
+    />
+</manifest>
+```
+
+As usual, here the AndroidManifest.xml file from the Community template to use as a reference: <RNTemplateRepoLink href="template/android/app/src/main/AndroidManifest.xml">main</RNTemplateRepoLink> and <RNTemplateRepoLink href="template/android/app/src/debug/AndroidManifest.xml">debug</RNTemplateRepoLink>.
+
+This is needed as your application will communicate with your local bundler, [Metro](https://metrobundler.dev/), via HTTP.
+
+Make sure you add this only to your **debug** manifest.
+
+## 4. Writing the TypeScript Code
+
+Now we will actually modify the native Android application to integrate React Native.
+
+The first bit of code we will write is the actual React Native code for the new screen that will be integrated into our application.
+
+### Create a `index.js` file
+
+First, create an empty `index.js` file in the root of your React Native project.
+
+`index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `import`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it.
+
+Our index.js should look as follows (here the <RNTemplateRepoLink href="template/index.js">Community template file as reference</RNTemplateRepoLink>):
+
+```js
+import {AppRegistry} from 'react-native';
+import App from './App';
+
+AppRegistry.registerComponent('HelloWorld', () => App);
+```
+
+### Create a `App.tsx` file
+
+Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX](<https://en.wikipedia.org/wiki/JSX_(JavaScript)>) expressions. It contains the root React Native component that we will integrate into our Android application (<RNTemplateRepoLink href="template/App.tsx">link</RNTemplateRepoLink>):
+
+```tsx
+import {type JSX} from 'react';
+import {
+  SafeAreaView,
+  ScrollView,
+  StatusBar,
+  StyleSheet,
+  Text,
+  useColorScheme,
+  View,
+} from 'react-native';
+import {
+  Colors,
+  DebugInstructions,
+  Header,
+  ReloadInstructions,
+} from 'react-native/Libraries/NewAppScreen';
+
+function App(): JSX.Element {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const backgroundStyle = {
+    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+  };
+
+  return (
+    <SafeAreaView style={backgroundStyle}>
+      <StatusBar
+        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
+        backgroundColor={backgroundStyle.backgroundColor}
+      />
+      <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        style={backgroundStyle}>
+        <Header />
+        <View
+          style={{
+            backgroundColor: isDarkMode
+              ? Colors.black
+              : Colors.white,
+            padding: 24,
+          }}>
+          <Text style={styles.title}>Step One</Text>
+          <Text>
+            Edit <Text style={styles.bold}>App.tsx</Text> to
+            change this screen and see your edits.
+          </Text>
+          <Text style={styles.title}>See your changes</Text>
+          <ReloadInstructions />
+          <Text style={styles.title}>Debug</Text>
+          <DebugInstructions />
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 24,
+    fontWeight: '600',
+  },
+  bold: {
+    fontWeight: '700',
+  },
+});
+
+export default App;
+```
+
+Here is the <RNTemplateRepoLink href="template/App.tsx">Community template file as reference</RNTemplateRepoLink>.
+
+## 5. Integrating with your Android code
+
+We now need to add some native code in order to start the React Native runtime and tell it to render our React components.
+
+### Updating your Application class
+
+First, we need to update your `Application` class to properly initialize React Native as follows:
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+
+<TabItem value="java">
+
+```diff
+package <your-package-here>;
+
+import android.app.Application;
++import com.facebook.react.PackageList;
++import com.facebook.react.ReactApplication;
++import com.facebook.react.ReactHost;
++import com.facebook.react.ReactNativeHost;
++import com.facebook.react.ReactPackage;
++import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
++import com.facebook.react.defaults.DefaultReactHost;
++import com.facebook.react.defaults.DefaultReactNativeHost;
++import com.facebook.soloader.SoLoader;
++import com.facebook.react.soloader.OpenSourceMergedSoMapping
++import java.util.List;
+
+-class MainApplication extends Application {
++class MainApplication extends Application implements ReactApplication {
++ @Override
++ public ReactNativeHost getReactNativeHost() {
++   return new DefaultReactNativeHost(this) {
++     @Override
++     protected List<ReactPackage> getPackages() { return new PackageList(this).getPackages(); }
++     @Override
++     protected String getJSMainModuleName() { return "index"; }
++     @Override
++     public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; }
++     @Override
++     protected boolean isNewArchEnabled() { return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; }
++     @Override
++     protected Boolean isHermesEnabled() { return BuildConfig.IS_HERMES_ENABLED; }
++   };
++ }
+
++ @Override
++ public ReactHost getReactHost() {
++   return DefaultReactHost.getDefaultReactHost(getApplicationContext(), getReactNativeHost());
++ }
+
+  @Override
+  public void onCreate() {
+    super.onCreate();
++   SoLoader.init(this, OpenSourceMergedSoMapping);
++   if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
++     DefaultNewArchitectureEntryPoint.load();
++   }
+  }
+}
+```
+
+</TabItem>
+
+<TabItem value="kotlin">
+
+```diff
+// package <your-package-here>
+
+import android.app.Application
++import com.facebook.react.PackageList
++import com.facebook.react.ReactApplication
++import com.facebook.react.ReactHost
++import com.facebook.react.ReactNativeHost
++import com.facebook.react.ReactPackage
++import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
++import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
++import com.facebook.react.defaults.DefaultReactNativeHost
++import com.facebook.soloader.SoLoader
++import com.facebook.react.soloader.OpenSourceMergedSoMapping
+
+-class MainApplication : Application() {
++class MainApplication : Application(), ReactApplication {
+
++ override val reactNativeHost: ReactNativeHost =
++      object : DefaultReactNativeHost(this) {
++        override fun getPackages(): List<ReactPackage> = PackageList(this).packages
++        override fun getJSMainModuleName(): String = "index"
++        override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
++        override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
++        override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
++      }
+
++ override val reactHost: ReactHost
++   get() = getDefaultReactHost(applicationContext, reactNativeHost)
+
+  override fun onCreate() {
+    super.onCreate()
++   SoLoader.init(this, OpenSourceMergedSoMapping)
++   if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
++     load()
++   }
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+As usual, here the <RNTemplateRepoLink href="template/android/app/src/main/java/com/helloworld/MainApplication.kt">`MainApplication.kt` Community template file as reference</RNTemplateRepoLink>.
+
+#### Creating a `ReactActivity`
+
+Finally, we need to create a new `Activity` that will extend `ReactActivity` and host the React Native code. This activity will be responsible for starting the React Native runtime and rendering the React component.
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+
+<TabItem value="java">
+
+```java
+// package <your-package-here>;
+
+import com.facebook.react.ReactActivity;
+import com.facebook.react.ReactActivityDelegate;
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
+import com.facebook.react.defaults.DefaultReactActivityDelegate;
+
+public class MyReactActivity extends ReactActivity {
+
+    @Override
+    protected String getMainComponentName() {
+        return "HelloWorld";
+    }
+
+    @Override
+    protected ReactActivityDelegate createReactActivityDelegate() {
+        return new DefaultReactActivityDelegate(this, getMainComponentName(), DefaultNewArchitectureEntryPoint.getFabricEnabled());
+    }
+}
+```
+
+</TabItem>
+
+<TabItem value="kotlin">
+
+```kotlin
+// package <your-package-here>
+
+import com.facebook.react.ReactActivity
+import com.facebook.react.ReactActivityDelegate
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
+import com.facebook.react.defaults.DefaultReactActivityDelegate
+
+class MyReactActivity : ReactActivity() {
+
+    override fun getMainComponentName(): String = "HelloWorld"
+
+    override fun createReactActivityDelegate(): ReactActivityDelegate =
+        DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
+}
+```
+
+</TabItem>
+</Tabs>
+
+As usual, here the <RNTemplateRepoLink href="template/android/app/src/main/java/com/helloworld/MainActivity.kt">`MainActivity.kt` Community template file as reference</RNTemplateRepoLink>.
+
+Whenever you create a new Activity, you need to add it to your `AndroidManifest.xml` file. You also need set the theme of `MyReactActivity` to `Theme.AppCompat.Light.NoActionBar` (or to any non-ActionBar theme) as otherwise your application will render an ActionBar on top of your React Native screen:
+
+```diff
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <uses-permission android:name="android.permission.INTERNET" />
+
+    <application
+      android:name=".MainApplication">
+
++     <activity
++       android:name=".MyReactActivity"
++       android:label="@string/app_name"
++       android:theme="@style/Theme.AppCompat.Light.NoActionBar">
++     </activity>
+    </application>
+</manifest>
+```
+
+Now your activity is ready to run some JavaScript code.
+
+## 6. Test your integration
+
+You have completed all the basic steps to integrate React Native with your application. Now we will start the [Metro bundler](https://metrobundler.dev/) to build your TypeScript application code into a bundle. Metro's HTTP server shares the bundle from `localhost` on your developer environment to a simulator or device. This allows for [hot reloading](https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading).
+
+First, you need to create a `metro.config.js` file in the root of your project as follows:
+
+```js
+const {getDefaultConfig} = require('@react-native/metro-config');
+module.exports = getDefaultConfig(__dirname);
+```
+
+You can checkout the <RNTemplateRepoLink href="template/metro.config.js">`metro.config.js` file</RNTemplateRepoLink> from the Community template file as reference.
+
+Once you have the configuration file in place, you can run the bundler. Run the following command in the root directory of your project:
+
+<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
+<TabItem value="npm">
+
+```shell
+npm start
+```
+
+</TabItem>
+<TabItem value="yarn">
+
+```shell
+yarn start
+```
+
+</TabItem>
+</Tabs>
+
+Now build and run your Android app as normal.
+
+Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display:
+
+<center><img src="/docs/assets/EmbeddedAppAndroidVideo.gif" width="300" /></center>
+
+### Creating a release build in Android Studio
+
+You can use Android Studio to create your release builds too! It’s as quick as creating release builds of your previously-existing native Android app.
+
+The React Native Gradle Plugin will take care of bundling the JS code inside your APK/App Bundle.
+
+If you're not using Android Studio, you can create a release build with:
+
+```
+cd android
+# For a Release APK
+./gradlew :app:assembleRelease
+# For a Release AAB
+./gradlew :app:bundleRelease
+```
+
+### Now what?
+
+At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native.
diff --git a/website/versioned_docs/version-0.82/_turbo-native-modules-components.jsx b/website/versioned_docs/version-0.82/_turbo-native-modules-components.jsx
index 1bb5a1b5edb..9b17f011728 100644
--- a/website/versioned_docs/version-0.82/_turbo-native-modules-components.jsx
+++ b/website/versioned_docs/version-0.82/_turbo-native-modules-components.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import IOSContent from './turbo-native-modules-ios.md';
 import AndroidContent from './turbo-native-modules-android.md';
 
diff --git a/website/versioned_docs/version-0.82/accessibilityinfo.md b/website/versioned_docs/version-0.82/accessibilityinfo.md
index aa41b43570b..09743beff5f 100644
--- a/website/versioned_docs/version-0.82/accessibilityinfo.md
+++ b/website/versioned_docs/version-0.82/accessibilityinfo.md
@@ -1,292 +1,292 @@
----
-id: accessibilityinfo
-title: AccessibilityInfo
----
-
-Sometimes it's useful to know whether or not the device has a screen reader that is currently active. The `AccessibilityInfo` API is designed for this purpose. You can use it to query the current state of the screen reader as well as to register to be notified when the state of the screen reader changes.
-
-## Example
-
-```SnackPlayer name=AccessibilityInfo%20Example&supportedPlatforms=android,ios
-import React, {useState, useEffect} from 'react';
-import {AccessibilityInfo, Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false);
-  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
-
-  useEffect(() => {
-    const reduceMotionChangedSubscription = AccessibilityInfo.addEventListener(
-      'reduceMotionChanged',
-      isReduceMotionEnabled => {
-        setReduceMotionEnabled(isReduceMotionEnabled);
-      },
-    );
-    const screenReaderChangedSubscription = AccessibilityInfo.addEventListener(
-      'screenReaderChanged',
-      isScreenReaderEnabled => {
-        setScreenReaderEnabled(isScreenReaderEnabled);
-      },
-    );
-
-    AccessibilityInfo.isReduceMotionEnabled().then(isReduceMotionEnabled => {
-      setReduceMotionEnabled(isReduceMotionEnabled);
-    });
-    AccessibilityInfo.isScreenReaderEnabled().then(isScreenReaderEnabled => {
-      setScreenReaderEnabled(isScreenReaderEnabled);
-    });
-
-    return () => {
-      reduceMotionChangedSubscription.remove();
-      screenReaderChangedSubscription.remove();
-    };
-  }, []);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.status}>
-          The reduce motion is {reduceMotionEnabled ? 'enabled' : 'disabled'}.
-        </Text>
-        <Text style={styles.status}>
-          The screen reader is {screenReaderEnabled ? 'enabled' : 'disabled'}.
-        </Text>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  status: {
-    margin: 30,
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Methods
-
-### `addEventListener()`
-
-```tsx
-static addEventListener(
-  eventName: AccessibilityChangeEventName | AccessibilityAnnouncementEventName,
-  handler: (
-    event: AccessibilityChangeEvent | AccessibilityAnnouncementFinishedEvent,
-  ) => void,
-): EmitterSubscription;
-```
-
-Add an event handler. Supported events:
-
-| Event name                                                                               | Description                                                                                                                                                                                                                                                                                              |
-| ---------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `accessibilityServiceChanged`<br/><div className="label two-lines android">Android</div> | Fires when some services such as TalkBack, other Android assistive technologies, and third-party accessibility services are enabled. The argument to the event handler is a boolean. The boolean is `true` when a some accessibility services is enabled and `false` otherwise.                          |
-| `announcementFinished`<br/><div className="label two-lines ios">iOS</div>                | Fires when the screen reader has finished making an announcement. The argument to the event handler is a dictionary with these keys:<ul><li>`announcement`: The string announced by the screen reader.</li><li>`success`: A boolean indicating whether the announcement was successfully made.</li></ul> |
-| `boldTextChanged`<br/><div className="label two-lines ios">iOS</div>                     | 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`<br/><div className="label two-lines ios">iOS</div>                    | 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`<br/><div className="label two-lines ios">iOS</div>                 | 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.                                  |
-| `reduceTransparencyChanged`<br/><div className="label two-lines ios">iOS</div>           | 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.                                                                                                         |
-| `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.                                                                                                                          |
-
----
-
-### `announceForAccessibility()`
-
-```tsx
-static announceForAccessibility(announcement: string);
-```
-
-Post a string to be announced by the screen reader.
-
----
-
-### `announceForAccessibilityWithOptions()`
-
-```tsx
-static announceForAccessibilityWithOptions(
-  announcement: string,
-  options: {queue?: boolean},
-);
-```
-
-Post a string to be announced by the screen reader with modification options. By default announcements will interrupt any existing speech, but on iOS they can be queued behind existing speech by setting `queue` to `true` in the options object.
-
-**Parameters:**
-
-| Name                                                              | Type   | Description                                                                                  |
-| ----------------------------------------------------------------- | ------ | -------------------------------------------------------------------------------------------- |
-| announcement <div className="label basic required">Required</div> | string | The string to be announced                                                                   |
-| options <div className="label basic required">Required</div>      | object | `queue` - queue the announcement behind existing speech <div className="label ios">iOS</div> |
-
----
-
-### `getRecommendedTimeoutMillis()` <div className="label android">Android</div>
-
-```tsx
-static getRecommendedTimeoutMillis(originalTimeout: number): Promise<number>;
-```
-
-Gets the timeout in millisecond that the user needs.
-This value is set in "Time to take action (Accessibility timeout)" of "Accessibility" settings.
-
-**Parameters:**
-
-| Name                                                                 | Type   | Description                                                                           |
-| -------------------------------------------------------------------- | ------ | ------------------------------------------------------------------------------------- |
-| originalTimeout <div className="label basic required">Required</div> | number | The timeout to return if "Accessibility timeout" is not set. Specify in milliseconds. |
-
----
-
-### `isAccessibilityServiceEnabled()` <div className="label android">Android</div>
-
-```tsx
-static isAccessibilityServiceEnabled(): Promise<boolean>;
-```
-
-Check whether any accessibility service is enabled. This includes TalkBack but also any third-party accessibility app that may be installed. To only check whether TalkBack is enabled, use [isScreenReaderEnabled](#isscreenreaderenabled). Returns a promise which resolves to a boolean. The result is `true` when some accessibility services is enabled and `false` otherwise.
-
-:::note
-Please use [`isScreenReaderEnabled`](#isscreenreaderenabled) if you only want to check the status of TalkBack.
-:::
-
----
-
-### `isBoldTextEnabled()` <div className="label ios">iOS</div>
-
-```tsx
-static isBoldTextEnabled(): Promise<boolean>:
-```
-
-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()` <div className="label ios">iOS</div>
-
-```tsx
-static isGrayscaleEnabled(): Promise<boolean>;
-```
-
-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()` <div className="label ios">iOS</div>
-
-```tsx
-static isInvertColorsEnabled(): Promise<boolean>;
-```
-
-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()`
-
-```tsx
-static isReduceMotionEnabled(): Promise<boolean>;
-```
-
-Query whether reduce motion is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when reduce motion is enabled and `false` otherwise.
-
----
-
-### `isReduceTransparencyEnabled()` <div className="label ios">iOS</div>
-
-```tsx
-static isReduceTransparencyEnabled(): Promise<boolean>;
-```
-
-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()`
-
-```tsx
-static isScreenReaderEnabled(): Promise<boolean>;
-```
-
-Query whether a screen reader is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when a screen reader is enabled and `false` otherwise.
-
----
-
-### `isHighTextContrastEnabled()` <div className="label android">Android</div>
-
-```tsx
-static isHighTextContrastEnabled(): Promise<boolean>
-```
-
-Query whether high text contrast is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when high text contrast is enabled and `false` otherwise.
-
----
-
-### `isDarkerSystemColorsEnabled()` <div className="label ios">iOS</div>
-
-```tsx
-static isDarkerSystemColorsEnabled(): Promise<boolean>
-```
-
-Query whether dark system colors is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when dark system colors is enabled and `false` otherwise.
-
----
-
-### `prefersCrossFadeTransitions()` <div className="label ios">iOS</div>
-
-```tsx
-static prefersCrossFadeTransitions(): Promise<boolean>;
-```
-
-Query whether reduce motion and prefer cross-fade transitions settings are currently enabled. Returns a promise which resolves to a boolean. The result is `true` when prefer cross-fade transitions is enabled and `false` otherwise.
-
----
-
-### `setAccessibilityFocus()`
-
-:::warning[Deprecated]
-Prefer using `sendAccessibilityEvent` with eventType `focus` instead.
-:::
-
-```tsx
-static setAccessibilityFocus(reactTag: number);
-```
-
-Set accessibility focus to a React component.
-
-On Android, this calls `UIManager.sendAccessibilityEvent` method with passed `reactTag` and `UIManager.AccessibilityEventTypes.typeViewFocused` arguments.
-
-:::note
-Make sure that any `View` you want to receive the accessibility focus has `accessible={true}`.
-:::
-
----
-
-### `sendAccessibilityEvent()`
-
-```tsx
-static sendAccessibilityEvent(host: HostInstance, eventType: AccessibilityEventTypes);
-```
-
-Imperatively trigger an accessibility event on a React component, like changing the focused element for a screen reader.
-
-:::note
-Make sure that any `View` you want to receive the accessibility focus has `accessible={true}`.
-:::
-
-| Name                                                           | Type                    | Description                                                                                                            |
-| -------------------------------------------------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------- |
-| host <div className="label basic required">Required</div>      | HostInstance            | The component ref to send the event to.                                                                                |
-| eventType <div className="label basic required">Required</div> | AccessibilityEventTypes | One of `'click'` (Android only), `'focus'`, `'viewHoverEnter'` (Android only), or `'windowStateChange'` (Android only) |
+---
+id: accessibilityinfo
+title: AccessibilityInfo
+---
+
+Sometimes it's useful to know whether or not the device has a screen reader that is currently active. The `AccessibilityInfo` API is designed for this purpose. You can use it to query the current state of the screen reader as well as to register to be notified when the state of the screen reader changes.
+
+## Example
+
+```SnackPlayer name=AccessibilityInfo%20Example&supportedPlatforms=android,ios
+import {useState, useEffect} from 'react';
+import {AccessibilityInfo, Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false);
+  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
+
+  useEffect(() => {
+    const reduceMotionChangedSubscription = AccessibilityInfo.addEventListener(
+      'reduceMotionChanged',
+      isReduceMotionEnabled => {
+        setReduceMotionEnabled(isReduceMotionEnabled);
+      },
+    );
+    const screenReaderChangedSubscription = AccessibilityInfo.addEventListener(
+      'screenReaderChanged',
+      isScreenReaderEnabled => {
+        setScreenReaderEnabled(isScreenReaderEnabled);
+      },
+    );
+
+    AccessibilityInfo.isReduceMotionEnabled().then(isReduceMotionEnabled => {
+      setReduceMotionEnabled(isReduceMotionEnabled);
+    });
+    AccessibilityInfo.isScreenReaderEnabled().then(isScreenReaderEnabled => {
+      setScreenReaderEnabled(isScreenReaderEnabled);
+    });
+
+    return () => {
+      reduceMotionChangedSubscription.remove();
+      screenReaderChangedSubscription.remove();
+    };
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.status}>
+          The reduce motion is {reduceMotionEnabled ? 'enabled' : 'disabled'}.
+        </Text>
+        <Text style={styles.status}>
+          The screen reader is {screenReaderEnabled ? 'enabled' : 'disabled'}.
+        </Text>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  status: {
+    margin: 30,
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+  eventName: AccessibilityChangeEventName | AccessibilityAnnouncementEventName,
+  handler: (
+    event: AccessibilityChangeEvent | AccessibilityAnnouncementFinishedEvent,
+  ) => void,
+): EmitterSubscription;
+```
+
+Add an event handler. Supported events:
+
+| Event name                                                                               | Description                                                                                                                                                                                                                                                                                              |
+| ---------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `accessibilityServiceChanged`<br/><div className="label two-lines android">Android</div> | Fires when some services such as TalkBack, other Android assistive technologies, and third-party accessibility services are enabled. The argument to the event handler is a boolean. The boolean is `true` when a some accessibility services is enabled and `false` otherwise.                          |
+| `announcementFinished`<br/><div className="label two-lines ios">iOS</div>                | Fires when the screen reader has finished making an announcement. The argument to the event handler is a dictionary with these keys:<ul><li>`announcement`: The string announced by the screen reader.</li><li>`success`: A boolean indicating whether the announcement was successfully made.</li></ul> |
+| `boldTextChanged`<br/><div className="label two-lines ios">iOS</div>                     | 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`<br/><div className="label two-lines ios">iOS</div>                    | 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`<br/><div className="label two-lines ios">iOS</div>                 | 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.                                  |
+| `reduceTransparencyChanged`<br/><div className="label two-lines ios">iOS</div>           | 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.                                                                                                         |
+| `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.                                                                                                                          |
+
+---
+
+### `announceForAccessibility()`
+
+```tsx
+static announceForAccessibility(announcement: string);
+```
+
+Post a string to be announced by the screen reader.
+
+---
+
+### `announceForAccessibilityWithOptions()`
+
+```tsx
+static announceForAccessibilityWithOptions(
+  announcement: string,
+  options: {queue?: boolean},
+);
+```
+
+Post a string to be announced by the screen reader with modification options. By default announcements will interrupt any existing speech, but on iOS they can be queued behind existing speech by setting `queue` to `true` in the options object.
+
+**Parameters:**
+
+| Name                                                              | Type   | Description                                                                                  |
+| ----------------------------------------------------------------- | ------ | -------------------------------------------------------------------------------------------- |
+| announcement <div className="label basic required">Required</div> | string | The string to be announced                                                                   |
+| options <div className="label basic required">Required</div>      | object | `queue` - queue the announcement behind existing speech <div className="label ios">iOS</div> |
+
+---
+
+### `getRecommendedTimeoutMillis()` <div className="label android">Android</div>
+
+```tsx
+static getRecommendedTimeoutMillis(originalTimeout: number): Promise<number>;
+```
+
+Gets the timeout in millisecond that the user needs.
+This value is set in "Time to take action (Accessibility timeout)" of "Accessibility" settings.
+
+**Parameters:**
+
+| Name                                                                 | Type   | Description                                                                           |
+| -------------------------------------------------------------------- | ------ | ------------------------------------------------------------------------------------- |
+| originalTimeout <div className="label basic required">Required</div> | number | The timeout to return if "Accessibility timeout" is not set. Specify in milliseconds. |
+
+---
+
+### `isAccessibilityServiceEnabled()` <div className="label android">Android</div>
+
+```tsx
+static isAccessibilityServiceEnabled(): Promise<boolean>;
+```
+
+Check whether any accessibility service is enabled. This includes TalkBack but also any third-party accessibility app that may be installed. To only check whether TalkBack is enabled, use [isScreenReaderEnabled](#isscreenreaderenabled). Returns a promise which resolves to a boolean. The result is `true` when some accessibility services is enabled and `false` otherwise.
+
+:::note
+Please use [`isScreenReaderEnabled`](#isscreenreaderenabled) if you only want to check the status of TalkBack.
+:::
+
+---
+
+### `isBoldTextEnabled()` <div className="label ios">iOS</div>
+
+```tsx
+static isBoldTextEnabled(): Promise<boolean>:
+```
+
+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()` <div className="label ios">iOS</div>
+
+```tsx
+static isGrayscaleEnabled(): Promise<boolean>;
+```
+
+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()` <div className="label ios">iOS</div>
+
+```tsx
+static isInvertColorsEnabled(): Promise<boolean>;
+```
+
+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()`
+
+```tsx
+static isReduceMotionEnabled(): Promise<boolean>;
+```
+
+Query whether reduce motion is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when reduce motion is enabled and `false` otherwise.
+
+---
+
+### `isReduceTransparencyEnabled()` <div className="label ios">iOS</div>
+
+```tsx
+static isReduceTransparencyEnabled(): Promise<boolean>;
+```
+
+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()`
+
+```tsx
+static isScreenReaderEnabled(): Promise<boolean>;
+```
+
+Query whether a screen reader is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when a screen reader is enabled and `false` otherwise.
+
+---
+
+### `isHighTextContrastEnabled()` <div className="label android">Android</div>
+
+```tsx
+static isHighTextContrastEnabled(): Promise<boolean>
+```
+
+Query whether high text contrast is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when high text contrast is enabled and `false` otherwise.
+
+---
+
+### `isDarkerSystemColorsEnabled()` <div className="label ios">iOS</div>
+
+```tsx
+static isDarkerSystemColorsEnabled(): Promise<boolean>
+```
+
+Query whether dark system colors is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when dark system colors is enabled and `false` otherwise.
+
+---
+
+### `prefersCrossFadeTransitions()` <div className="label ios">iOS</div>
+
+```tsx
+static prefersCrossFadeTransitions(): Promise<boolean>;
+```
+
+Query whether reduce motion and prefer cross-fade transitions settings are currently enabled. Returns a promise which resolves to a boolean. The result is `true` when prefer cross-fade transitions is enabled and `false` otherwise.
+
+---
+
+### `setAccessibilityFocus()`
+
+:::warning[Deprecated]
+Prefer using `sendAccessibilityEvent` with eventType `focus` instead.
+:::
+
+```tsx
+static setAccessibilityFocus(reactTag: number);
+```
+
+Set accessibility focus to a React component.
+
+On Android, this calls `UIManager.sendAccessibilityEvent` method with passed `reactTag` and `UIManager.AccessibilityEventTypes.typeViewFocused` arguments.
+
+:::note
+Make sure that any `View` you want to receive the accessibility focus has `accessible={true}`.
+:::
+
+---
+
+### `sendAccessibilityEvent()`
+
+```tsx
+static sendAccessibilityEvent(host: HostInstance, eventType: AccessibilityEventTypes);
+```
+
+Imperatively trigger an accessibility event on a React component, like changing the focused element for a screen reader.
+
+:::note
+Make sure that any `View` you want to receive the accessibility focus has `accessible={true}`.
+:::
+
+| Name                                                           | Type                    | Description                                                                                                            |
+| -------------------------------------------------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| host <div className="label basic required">Required</div>      | HostInstance            | The component ref to send the event to.                                                                                |
+| eventType <div className="label basic required">Required</div> | AccessibilityEventTypes | One of `'click'` (Android only), `'focus'`, `'viewHoverEnter'` (Android only), or `'windowStateChange'` (Android only) |
diff --git a/website/versioned_docs/version-0.82/actionsheetios.md b/website/versioned_docs/version-0.82/actionsheetios.md
index 30d1d6afea5..dc2269301d2 100644
--- a/website/versioned_docs/version-0.82/actionsheetios.md
+++ b/website/versioned_docs/version-0.82/actionsheetios.md
@@ -1,144 +1,144 @@
----
-id: actionsheetios
-title: ActionSheetIOS
----
-
-Displays native to iOS [Action Sheet](https://developer.apple.com/design/human-interface-guidelines/action-sheets) component.
-
-## Example
-
-```SnackPlayer name=ActionSheetIOS%20Example&supportedPlatforms=ios
-import React, {useState} from 'react';
-import {ActionSheetIOS, Button, StyleSheet, Text} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [result, setResult] = useState('🔮');
-
-  const onPress = () =>
-    ActionSheetIOS.showActionSheetWithOptions(
-      {
-        options: ['Cancel', 'Generate number', 'Reset'],
-        destructiveButtonIndex: 2,
-        cancelButtonIndex: 0,
-        userInterfaceStyle: 'dark',
-      },
-      buttonIndex => {
-        if (buttonIndex === 0) {
-          // cancel action
-        } else if (buttonIndex === 1) {
-          setResult(String(Math.floor(Math.random() * 100) + 1));
-        } else if (buttonIndex === 2) {
-          setResult('🔮');
-        }
-      },
-    );
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.result}>{result}</Text>
-        <Button onPress={onPress} title="Show Action Sheet" />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  result: {
-    fontSize: 64,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
-# Reference
-
-## Methods
-
-### `showActionSheetWithOptions()`
-
-```tsx
-static showActionSheetWithOptions: (
-  options: ActionSheetIOSOptions,
-  callback: (buttonIndex: number) => void,
-);
-```
-
-Display an iOS action sheet. The `options` object must contain one or more of:
-
-- `options` (array of strings) - a list of button titles (required)
-- `cancelButtonIndex` (int) - index of cancel button in `options`
-- `cancelButtonTintColor` (string) - the [color](colors) used for the change the text color of the cancel button
-- `destructiveButtonIndex` (int or array of ints) - indices of destructive buttons in `options`
-- `title` (string) - a title to show above the action sheet
-- `message` (string) - a message to show below the title
-- `anchor` (number) - the node to which the action sheet should be anchored (used for iPad)
-- `tintColor` (string) - the [color](colors) used for non-destructive button titles
-- `disabledButtonIndices` (array of numbers) - a list of button indices which should be disabled
-- `userInterfaceStyle` (string) - the interface style used for the action sheet, can be set to `light` or `dark`, otherwise the default system style will be used
-
-The 'callback' function takes one parameter, the zero-based index of the selected item.
-
-Minimal example:
-
-```tsx
-ActionSheetIOS.showActionSheetWithOptions(
-  {
-    options: ['Cancel', 'Remove'],
-    destructiveButtonIndex: 1,
-    cancelButtonIndex: 0,
-  },
-  buttonIndex => {
-    if (buttonIndex === 1) {
-      /* destructive action */
-    }
-  },
-);
-```
-
----
-
-### `dismissActionSheet()`
-
-```tsx
-static dismissActionSheet();
-```
-
-Dismisses the most upper iOS action sheet presented, if no action sheet is present a warning is displayed.
-
----
-
-### `showShareActionSheetWithOptions()`
-
-```tsx
-static showShareActionSheetWithOptions: (
-  options: ShareActionSheetIOSOptions,
-  failureCallback: (error: Error) => void,
-  successCallback: (success: boolean, method: string) => void,
-);
-```
-
-Display the iOS share sheet. The `options` object should contain one or both of `message` and `url` and can additionally have a `subject` or `excludedActivityTypes`:
-
-- `url` (string) - a URL to share
-- `message` (string) - a message to share
-- `subject` (string) - a subject for the message
-- `excludedActivityTypes` (array) - the activities to exclude from the ActionSheet
-
-:::note
-If `url` points to a local file, or is a base64-encoded uri, the file it points to will be loaded and shared directly. In this way, you can share images, videos, PDF files, etc. If `url` points to a remote file or address it must conform to URL format as described in [RFC 2396](https://www.ietf.org/rfc/rfc2396.txt). For example, a web URL without a proper protocol (HTTP/HTTPS) will not be shared.
-:::
-
-The 'failureCallback' function takes one parameter, an error object. The only property defined on this object is an optional `stack` property of type `string`.
-
-The 'successCallback' function takes two parameters:
-
-- a boolean value signifying success or failure
-- a string that, in the case of success, indicates the method of sharing
+---
+id: actionsheetios
+title: ActionSheetIOS
+---
+
+Displays native to iOS [Action Sheet](https://developer.apple.com/design/human-interface-guidelines/action-sheets) component.
+
+## Example
+
+```SnackPlayer name=ActionSheetIOS%20Example&supportedPlatforms=ios
+import {useState} from 'react';
+import {ActionSheetIOS, Button, StyleSheet, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [result, setResult] = useState('🔮');
+
+  const onPress = () =>
+    ActionSheetIOS.showActionSheetWithOptions(
+      {
+        options: ['Cancel', 'Generate number', 'Reset'],
+        destructiveButtonIndex: 2,
+        cancelButtonIndex: 0,
+        userInterfaceStyle: 'dark',
+      },
+      buttonIndex => {
+        if (buttonIndex === 0) {
+          // cancel action
+        } else if (buttonIndex === 1) {
+          setResult(String(Math.floor(Math.random() * 100) + 1));
+        } else if (buttonIndex === 2) {
+          setResult('🔮');
+        }
+      },
+    );
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.result}>{result}</Text>
+        <Button onPress={onPress} title="Show Action Sheet" />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  result: {
+    fontSize: 64,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+# Reference
+
+## Methods
+
+### `showActionSheetWithOptions()`
+
+```tsx
+static showActionSheetWithOptions: (
+  options: ActionSheetIOSOptions,
+  callback: (buttonIndex: number) => void,
+);
+```
+
+Display an iOS action sheet. The `options` object must contain one or more of:
+
+- `options` (array of strings) - a list of button titles (required)
+- `cancelButtonIndex` (int) - index of cancel button in `options`
+- `cancelButtonTintColor` (string) - the [color](colors) used for the change the text color of the cancel button
+- `destructiveButtonIndex` (int or array of ints) - indices of destructive buttons in `options`
+- `title` (string) - a title to show above the action sheet
+- `message` (string) - a message to show below the title
+- `anchor` (number) - the node to which the action sheet should be anchored (used for iPad)
+- `tintColor` (string) - the [color](colors) used for non-destructive button titles
+- `disabledButtonIndices` (array of numbers) - a list of button indices which should be disabled
+- `userInterfaceStyle` (string) - the interface style used for the action sheet, can be set to `light` or `dark`, otherwise the default system style will be used
+
+The 'callback' function takes one parameter, the zero-based index of the selected item.
+
+Minimal example:
+
+```tsx
+ActionSheetIOS.showActionSheetWithOptions(
+  {
+    options: ['Cancel', 'Remove'],
+    destructiveButtonIndex: 1,
+    cancelButtonIndex: 0,
+  },
+  buttonIndex => {
+    if (buttonIndex === 1) {
+      /* destructive action */
+    }
+  },
+);
+```
+
+---
+
+### `dismissActionSheet()`
+
+```tsx
+static dismissActionSheet();
+```
+
+Dismisses the most upper iOS action sheet presented, if no action sheet is present a warning is displayed.
+
+---
+
+### `showShareActionSheetWithOptions()`
+
+```tsx
+static showShareActionSheetWithOptions: (
+  options: ShareActionSheetIOSOptions,
+  failureCallback: (error: Error) => void,
+  successCallback: (success: boolean, method: string) => void,
+);
+```
+
+Display the iOS share sheet. The `options` object should contain one or both of `message` and `url` and can additionally have a `subject` or `excludedActivityTypes`:
+
+- `url` (string) - a URL to share
+- `message` (string) - a message to share
+- `subject` (string) - a subject for the message
+- `excludedActivityTypes` (array) - the activities to exclude from the ActionSheet
+
+:::note
+If `url` points to a local file, or is a base64-encoded uri, the file it points to will be loaded and shared directly. In this way, you can share images, videos, PDF files, etc. If `url` points to a remote file or address it must conform to URL format as described in [RFC 2396](https://www.ietf.org/rfc/rfc2396.txt). For example, a web URL without a proper protocol (HTTP/HTTPS) will not be shared.
+:::
+
+The 'failureCallback' function takes one parameter, an error object. The only property defined on this object is an optional `stack` property of type `string`.
+
+The 'successCallback' function takes two parameters:
+
+- a boolean value signifying success or failure
+- a string that, in the case of success, indicates the method of sharing
diff --git a/website/versioned_docs/version-0.82/activityindicator.md b/website/versioned_docs/version-0.82/activityindicator.md
index c9d03b73021..9b1445cbf5e 100644
--- a/website/versioned_docs/version-0.82/activityindicator.md
+++ b/website/versioned_docs/version-0.82/activityindicator.md
@@ -8,7 +8,6 @@ Displays a circular loading indicator.
 ## Example
 
 ```SnackPlayer name=ActivityIndicator%20Example
-import React from 'react';
 import {ActivityIndicator, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.82/alert.md b/website/versioned_docs/version-0.82/alert.md
index c80b62fb7a6..78b1c412e66 100644
--- a/website/versioned_docs/version-0.82/alert.md
+++ b/website/versioned_docs/version-0.82/alert.md
@@ -12,7 +12,6 @@ This is an API that works both on Android and iOS and can show static alerts. Al
 ## Example
 
 ```SnackPlayer name=Alert%20Example&supportedPlatforms=ios,android
-import React from 'react';
 import {StyleSheet, Button, Alert} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -81,7 +80,6 @@ The cancel event can be handled by providing an `onDismiss` callback property in
 ### Example <div className="label android">Android</div>
 
 ```SnackPlayer name=Alert%20Android%20Dissmissable%20Example&supportedPlatforms=android
-import React from 'react';
 import {StyleSheet, Button, Alert} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.82/animated.md b/website/versioned_docs/version-0.82/animated.md
index a3039215ca1..fce79ffaf57 100644
--- a/website/versioned_docs/version-0.82/animated.md
+++ b/website/versioned_docs/version-0.82/animated.md
@@ -16,13 +16,19 @@ Don't modify the animated value directly. You can use the [`useRef` Hook](https:
 The following example contains a `View` which will fade in and fade out based on the animated value `fadeAnim`
 
 ```SnackPlayer name=Animated%20Example
-import React, {useRef} from 'react';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-import {Animated, Text, View, StyleSheet, Button} from 'react-native';
+import {
+  Animated,
+  Text,
+  View,
+  StyleSheet,
+  Button,
+  useAnimatedValue,
+} from 'react-native';
 
 const App = () => {
   // fadeAnim will be used as the value for opacity. Initial Value: 0
-  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const fadeAnim = useAnimatedValue(0);
 
   const fadeIn = () => {
     // Will change fadeAnim value to 1 in 5 seconds
diff --git a/website/versioned_docs/version-0.82/animatedvaluexy.md b/website/versioned_docs/version-0.82/animatedvaluexy.md
index 6cb44808ccf..8135c12354a 100644
--- a/website/versioned_docs/version-0.82/animatedvaluexy.md
+++ b/website/versioned_docs/version-0.82/animatedvaluexy.md
@@ -1,227 +1,227 @@
----
-id: animatedvaluexy
-title: Animated.ValueXY
----
-
-2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal [`Animated.Value`](animatedvalue), but multiplexed. Contains two regular `Animated.Value`s under the hood.
-
-## Example
-
-```SnackPlayer name=Animated.ValueXY%20Example
-import React, {useRef} from 'react';
-import {Animated, PanResponder, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const DraggableView = () => {
-  const pan = useRef(new Animated.ValueXY()).current;
-
-  const panResponder = PanResponder.create({
-    onStartShouldSetPanResponder: () => true,
-    onPanResponderMove: Animated.event([
-      null,
-      {
-        dx: pan.x, // x,y are Animated.Value
-        dy: pan.y,
-      },
-    ]),
-    onPanResponderRelease: () => {
-      Animated.spring(
-        pan, // Auto-multiplexed
-        {toValue: {x: 0, y: 0}, useNativeDriver: true}, // Back to zero
-      ).start();
-    },
-  });
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Animated.View
-          {...panResponder.panHandlers}
-          style={[pan.getLayout(), styles.box]}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  box: {
-    backgroundColor: '#61dafb',
-    width: 80,
-    height: 80,
-    borderRadius: 4,
-  },
-});
-
-export default DraggableView;
-```
-
----
-
-# Reference
-
-## Methods
-
-### `setValue()`
-
-```tsx
-setValue(value: {x: number; y: number});
-```
-
-Directly set the value. This will stop any animations running on the value and update all the bound properties.
-
-**Parameters:**
-
-| Name  | Type                     | Required | Description |
-| ----- | ------------------------ | -------- | ----------- |
-| value | `{x: number; y: number}` | Yes      | Value       |
-
----
-
-### `setOffset()`
-
-```tsx
-setOffset(offset: {x: number; y: number});
-```
-
-Sets an offset that is applied on top of whatever value is set, whether via `setValue`, an animation, or `Animated.event`. Useful for compensating things like the start of a pan gesture.
-
-**Parameters:**
-
-| Name   | Type                     | Required | Description  |
-| ------ | ------------------------ | -------- | ------------ |
-| offset | `{x: number; y: number}` | Yes      | Offset value |
-
----
-
-### `flattenOffset()`
-
-```tsx
-flattenOffset();
-```
-
-Merges the offset value into the base value and resets the offset to zero. The final output of the value is unchanged.
-
----
-
-### `extractOffset()`
-
-```tsx
-extractOffset();
-```
-
-Sets the offset value to the base value, and resets the base value to zero. The final output of the value is unchanged.
-
----
-
-### `addListener()`
-
-```tsx
-addListener(callback: (value: {x: number; y: number}) => void);
-```
-
-Adds an asynchronous listener to the value so you can observe updates from animations. This is useful because there is no way to synchronously read the value because it might be driven natively.
-
-Returns a string that serves as an identifier for the listener.
-
-**Parameters:**
-
-| Name     | Type     | Required | Description                                                                                 |
-| -------- | -------- | -------- | ------------------------------------------------------------------------------------------- |
-| callback | function | Yes      | The callback function which will receive an object with a `value` key set to the new value. |
-
----
-
-### `removeListener()`
-
-```tsx
-removeListener(id: string);
-```
-
-Unregister a listener. The `id` param shall match the identifier previously returned by `addListener()`.
-
-**Parameters:**
-
-| Name | Type   | Required | Description                        |
-| ---- | ------ | -------- | ---------------------------------- |
-| id   | string | Yes      | Id for the listener being removed. |
-
----
-
-### `removeAllListeners()`
-
-```tsx
-removeAllListeners();
-```
-
-Remove all registered listeners.
-
----
-
-### `stopAnimation()`
-
-```tsx
-stopAnimation(callback?: (value: {x: number; y: number}) => void);
-```
-
-Stops any running animation or tracking. `callback` is invoked with the final value after stopping the animation, which is useful for updating state to match the animation position with layout.
-
-**Parameters:**
-
-| Name     | Type     | Required | Description                                   |
-| -------- | -------- | -------- | --------------------------------------------- |
-| callback | function | No       | A function that will receive the final value. |
-
----
-
-### `resetAnimation()`
-
-```tsx
-resetAnimation(callback?: (value: {x: number; y: number}) => void);
-```
-
-Stops any animation and resets the value to its original.
-
-**Parameters:**
-
-| Name     | Type     | Required | Description                                      |
-| -------- | -------- | -------- | ------------------------------------------------ |
-| callback | function | No       | A function that will receive the original value. |
-
----
-
-### `getLayout()`
-
-```tsx
-getLayout(): {left: Animated.Value, top: Animated.Value};
-```
-
-Converts `{x, y}` into `{left, top}` for use in style, e.g.
-
-```tsx
-style={this.state.anim.getLayout()}
-```
-
----
-
-### `getTranslateTransform()`
-
-```tsx
-getTranslateTransform(): [
-  {translateX: Animated.Value},
-  {translateY: Animated.Value},
-];
-```
-
-Converts `{x, y}` into a useable translation transform, e.g.
-
-```tsx
-style={{
-  transform: this.state.anim.getTranslateTransform()
-}}
-```
+---
+id: animatedvaluexy
+title: Animated.ValueXY
+---
+
+2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal [`Animated.Value`](animatedvalue), but multiplexed. Contains two regular `Animated.Value`s under the hood.
+
+## Example
+
+```SnackPlayer name=Animated.ValueXY%20Example
+import {useRef} from 'react';
+import {Animated, PanResponder, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const DraggableView = () => {
+  const pan = useRef(new Animated.ValueXY()).current;
+
+  const panResponder = PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onPanResponderMove: Animated.event([
+      null,
+      {
+        dx: pan.x, // x,y are Animated.Value
+        dy: pan.y,
+      },
+    ]),
+    onPanResponderRelease: () => {
+      Animated.spring(
+        pan, // Auto-multiplexed
+        {toValue: {x: 0, y: 0}, useNativeDriver: true}, // Back to zero
+      ).start();
+    },
+  });
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Animated.View
+          {...panResponder.panHandlers}
+          style={[pan.getLayout(), styles.box]}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  box: {
+    backgroundColor: '#61dafb',
+    width: 80,
+    height: 80,
+    borderRadius: 4,
+  },
+});
+
+export default DraggableView;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `setValue()`
+
+```tsx
+setValue(value: {x: number; y: number});
+```
+
+Directly set the value. This will stop any animations running on the value and update all the bound properties.
+
+**Parameters:**
+
+| Name  | Type                     | Required | Description |
+| ----- | ------------------------ | -------- | ----------- |
+| value | `{x: number; y: number}` | Yes      | Value       |
+
+---
+
+### `setOffset()`
+
+```tsx
+setOffset(offset: {x: number; y: number});
+```
+
+Sets an offset that is applied on top of whatever value is set, whether via `setValue`, an animation, or `Animated.event`. Useful for compensating things like the start of a pan gesture.
+
+**Parameters:**
+
+| Name   | Type                     | Required | Description  |
+| ------ | ------------------------ | -------- | ------------ |
+| offset | `{x: number; y: number}` | Yes      | Offset value |
+
+---
+
+### `flattenOffset()`
+
+```tsx
+flattenOffset();
+```
+
+Merges the offset value into the base value and resets the offset to zero. The final output of the value is unchanged.
+
+---
+
+### `extractOffset()`
+
+```tsx
+extractOffset();
+```
+
+Sets the offset value to the base value, and resets the base value to zero. The final output of the value is unchanged.
+
+---
+
+### `addListener()`
+
+```tsx
+addListener(callback: (value: {x: number; y: number}) => void);
+```
+
+Adds an asynchronous listener to the value so you can observe updates from animations. This is useful because there is no way to synchronously read the value because it might be driven natively.
+
+Returns a string that serves as an identifier for the listener.
+
+**Parameters:**
+
+| Name     | Type     | Required | Description                                                                                 |
+| -------- | -------- | -------- | ------------------------------------------------------------------------------------------- |
+| callback | function | Yes      | The callback function which will receive an object with a `value` key set to the new value. |
+
+---
+
+### `removeListener()`
+
+```tsx
+removeListener(id: string);
+```
+
+Unregister a listener. The `id` param shall match the identifier previously returned by `addListener()`.
+
+**Parameters:**
+
+| Name | Type   | Required | Description                        |
+| ---- | ------ | -------- | ---------------------------------- |
+| id   | string | Yes      | Id for the listener being removed. |
+
+---
+
+### `removeAllListeners()`
+
+```tsx
+removeAllListeners();
+```
+
+Remove all registered listeners.
+
+---
+
+### `stopAnimation()`
+
+```tsx
+stopAnimation(callback?: (value: {x: number; y: number}) => void);
+```
+
+Stops any running animation or tracking. `callback` is invoked with the final value after stopping the animation, which is useful for updating state to match the animation position with layout.
+
+**Parameters:**
+
+| Name     | Type     | Required | Description                                   |
+| -------- | -------- | -------- | --------------------------------------------- |
+| callback | function | No       | A function that will receive the final value. |
+
+---
+
+### `resetAnimation()`
+
+```tsx
+resetAnimation(callback?: (value: {x: number; y: number}) => void);
+```
+
+Stops any animation and resets the value to its original.
+
+**Parameters:**
+
+| Name     | Type     | Required | Description                                      |
+| -------- | -------- | -------- | ------------------------------------------------ |
+| callback | function | No       | A function that will receive the original value. |
+
+---
+
+### `getLayout()`
+
+```tsx
+getLayout(): {left: Animated.Value, top: Animated.Value};
+```
+
+Converts `{x, y}` into `{left, top}` for use in style, e.g.
+
+```tsx
+style={this.state.anim.getLayout()}
+```
+
+---
+
+### `getTranslateTransform()`
+
+```tsx
+getTranslateTransform(): [
+  {translateX: Animated.Value},
+  {translateY: Animated.Value},
+];
+```
+
+Converts `{x, y}` into a useable translation transform, e.g.
+
+```tsx
+style={{
+  transform: this.state.anim.getTranslateTransform()
+}}
+```
diff --git a/website/versioned_docs/version-0.82/animations.md b/website/versioned_docs/version-0.82/animations.md
index 2703dd31323..95f7f192115 100644
--- a/website/versioned_docs/version-0.82/animations.md
+++ b/website/versioned_docs/version-0.82/animations.md
@@ -1,673 +1,672 @@
----
-id: animations
-title: Animations
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface.
-
-React Native provides two complementary animation systems: [`Animated`](animations#animated-api) for granular and interactive control of specific values, and [`LayoutAnimation`](animations#layoutanimation-api) for animated global layout transactions.
-
-## `Animated` API
-
-The [`Animated`](animated) API is designed to concisely express a wide variety of interesting animation and interaction patterns in a very performant way. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and `start`/`stop` methods to control time-based animation execution.
-
-`Animated` exports six animatable component types: `View`, `Text`, `Image`, `ScrollView`, `FlatList` and `SectionList`, but you can also create your own using `Animated.createAnimatedComponent()`.
-
-For example, a container view that fades in when it is mounted may look like this:
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer ext=js
-import React, {useEffect, useRef} from 'react';
-import {Animated, Text, View} from 'react-native';
-
-const FadeInView = props => {
-  const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
-
-  useEffect(() => {
-    Animated.timing(fadeAnim, {
-      toValue: 1,
-      duration: 10000,
-      useNativeDriver: true,
-    }).start();
-  }, [fadeAnim]);
-
-  return (
-    <Animated.View // Special animatable View
-      style={{
-        ...props.style,
-        opacity: fadeAnim, // Bind opacity to animated value
-      }}>
-      {props.children}
-    </Animated.View>
-  );
-};
-
-// You can then use your `FadeInView` in place of a `View` in your components:
-export default () => {
-  return (
-    <View
-      style={{
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}>
-      <FadeInView
-        style={{
-          width: 250,
-          height: 50,
-          backgroundColor: 'powderblue',
-        }}>
-        <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>
-          Fading in
-        </Text>
-      </FadeInView>
-    </View>
-  );
-};
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer ext=tsx
-import React, {useEffect, useRef, type PropsWithChildren} from 'react';
-import {Animated, Text, View, type ViewStyle} from 'react-native';
-
-type FadeInViewProps = PropsWithChildren<{style: ViewStyle}>;
-
-const FadeInView: React.FC<FadeInViewProps> = props => {
-  const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
-
-  useEffect(() => {
-    Animated.timing(fadeAnim, {
-      toValue: 1,
-      duration: 10000,
-      useNativeDriver: true,
-    }).start();
-  }, [fadeAnim]);
-
-  return (
-    <Animated.View // Special animatable View
-      style={{
-        ...props.style,
-        opacity: fadeAnim, // Bind opacity to animated value
-      }}>
-      {props.children}
-    </Animated.View>
-  );
-};
-
-// You can then use your `FadeInView` in place of a `View` in your components:
-export default () => {
-  return (
-    <View
-      style={{
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}>
-      <FadeInView
-        style={{
-          width: 250,
-          height: 50,
-          backgroundColor: 'powderblue',
-        }}>
-        <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>
-          Fading in
-        </Text>
-      </FadeInView>
-    </View>
-  );
-};
-```
-
-</TabItem>
-</Tabs>
-
-Let's break down what's happening here. In the `FadeInView` render method, a new `Animated.Value` called `fadeAnim` is initialized with `useRef`. The opacity property on the `View` is mapped to this animated value. Behind the scenes, the numeric value is extracted and used to set opacity.
-
-When the component mounts, the opacity is set to 0. Then, an easing animation is started on the `fadeAnim` animated value, which will update all of its dependent mappings (in this case, only the opacity) on each frame as the value animates to the final value of 1.
-
-This is done in an optimized way that is faster than calling `setState` and re-rendering. Because the entire configuration is declarative, we will be able to implement further optimizations that serialize the configuration and runs the animation on a high-priority thread.
-
-### Configuring animations
-
-Animations are heavily configurable. Custom and predefined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.
-
-`Animated` provides several animation types, the most commonly used one being [`Animated.timing()`](animated#timing). It supports animating a value over time using one of various predefined easing functions, or you can use your own. Easing functions are typically used in animation to convey gradual acceleration and deceleration of objects.
-
-By default, `timing` will use an easeInOut curve that conveys gradual acceleration to full speed and concludes by gradually decelerating to a stop. You can specify a different easing function by passing an `easing` parameter. Custom `duration` or even a `delay` before the animation starts is also supported.
-
-For example, if we want to create a 2-second long animation of an object that slightly backs up before moving to its final position:
-
-```tsx
-Animated.timing(this.state.xPosition, {
-  toValue: 100,
-  easing: Easing.back(),
-  duration: 2000,
-  useNativeDriver: true,
-}).start();
-```
-
-Take a look at the [Configuring animations](animated#configuring-animations) section of the `Animated` API reference to learn more about all the config parameters supported by the built-in animations.
-
-### Composing animations
-
-Animations can be combined and played in sequence or in parallel. Sequential animations can play immediately after the previous animation has finished, or they can start after a specified delay. The `Animated` API provides several methods, such as `sequence()` and `delay()`, each of which take an array of animations to execute and automatically calls `start()`/`stop()` as needed.
-
-For example, the following animation coasts to a stop, then it springs back while twirling in parallel:
-
-```tsx
-Animated.sequence([
-  // decay, then spring to start and twirl
-  Animated.decay(position, {
-    // coast to a stop
-    velocity: {x: gestureState.vx, y: gestureState.vy}, // velocity from gesture release
-    deceleration: 0.997,
-    useNativeDriver: true,
-  }),
-  Animated.parallel([
-    // after decay, in parallel:
-    Animated.spring(position, {
-      toValue: {x: 0, y: 0}, // return to start
-      useNativeDriver: true,
-    }),
-    Animated.timing(twirl, {
-      // and twirl
-      toValue: 360,
-      useNativeDriver: true,
-    }),
-  ]),
-]).start(); // start the sequence group
-```
-
-If one animation is stopped or interrupted, then all other animations in the group are also stopped. `Animated.parallel` has a `stopTogether` option that can be set to `false` to disable this.
-
-You can find a full list of composition methods in the [Composing animations](animated#composing-animations) section of the `Animated` API reference.
-
-### Combining animated values
-
-You can [combine two animated values](animated#combining-animated-values) via addition, multiplication, division, or modulo to make a new animated value.
-
-There are some cases where an animated value needs to invert another animated value for calculation. An example is inverting a scale (2x --> 0.5x):
-
-```tsx
-const a = new Animated.Value(1);
-const b = Animated.divide(1, a);
-
-Animated.spring(a, {
-  toValue: 2,
-  useNativeDriver: true,
-}).start();
-```
-
-### Interpolation
-
-Each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.
-
-A basic mapping to convert a 0-1 range to a 0-100 range would be:
-
-```tsx
-value.interpolate({
-  inputRange: [0, 1],
-  outputRange: [0, 100],
-});
-```
-
-For example, you may want to think about your `Animated.Value` as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying `style` from the example above like so:
-
-```tsx
-  style={{
-    opacity: this.state.fadeAnim, // Binds directly
-    transform: [{
-      translateY: this.state.fadeAnim.interpolate({
-        inputRange: [0, 1],
-        outputRange: [150, 0]  // 0 : 150, 0.5 : 75, 1 : 0
-      }),
-    }],
-  }}
-```
-
-[`interpolate()`](animated#interpolate) supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
-
-```tsx
-value.interpolate({
-  inputRange: [-300, -100, 0, 100, 101],
-  outputRange: [300, 0, 1, 0, 0],
-});
-```
-
-Which would map like so:
-
-```
-Input | Output
-------|-------
-  -400|    450
-  -300|    300
-  -200|    150
-  -100|      0
-   -50|    0.5
-     0|      1
-    50|    0.5
-   100|      0
-   101|      0
-   200|      0
-```
-
-`interpolate()` also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
-
-```tsx
-value.interpolate({
-  inputRange: [0, 360],
-  outputRange: ['0deg', '360deg'],
-});
-```
-
-`interpolate()` also supports arbitrary easing functions, many of which are already implemented in the [`Easing`](easing) module. `interpolate()` also has configurable behavior for extrapolating the `outputRange`. You can set the extrapolation by setting the `extrapolate`, `extrapolateLeft`, or `extrapolateRight` options. The default value is `extend` but you can use `clamp` to prevent the output value from exceeding `outputRange`.
-
-### Tracking dynamic values
-
-Animated values can also track other values by setting the `toValue` of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a `spring()` pinned on another animated value, or with `timing()` and a `duration` of 0 for rigid tracking. They can also be composed with interpolations:
-
-```tsx
-Animated.spring(follower, {toValue: leader}).start();
-Animated.timing(opacity, {
-  toValue: pan.x.interpolate({
-    inputRange: [0, 300],
-    outputRange: [1, 0],
-  }),
-  useNativeDriver: true,
-}).start();
-```
-
-The `leader` and `follower` animated values would be implemented using `Animated.ValueXY()`. `ValueXY` is a handy way to deal with 2D interactions, such as panning or dragging. It is a basic wrapper that contains two `Animated.Value` instances and some helper functions that call through to them, making `ValueXY` a drop-in replacement for `Value` in many cases. It allows us to track both x and y values in the example above.
-
-### Tracking gestures
-
-Gestures, like panning or scrolling, and other events can map directly to animated values using [`Animated.event`](animated#event). This is done with a structured map syntax so that values can be extracted from complex event objects. The first level is an array to allow mapping across multiple args, and that array contains nested objects.
-
-For example, when working with horizontal scrolling gestures, you would do the following in order to map `event.nativeEvent.contentOffset.x` to `scrollX` (an `Animated.Value`):
-
-```tsx
- onScroll={Animated.event(
-   // scrollX = e.nativeEvent.contentOffset.x
-   [{nativeEvent: {
-        contentOffset: {
-          x: scrollX
-        }
-      }
-    }]
- )}
-```
-
-The following example implements a horizontal scrolling carousel where the scroll position indicators are animated using the `Animated.event` used in the `ScrollView`
-
-#### ScrollView with Animated Event Example
-
-```SnackPlayer name=Animated&supportedPlatforms=ios,android
-import React from 'react';
-import {
-  ScrollView,
-  Text,
-  StyleSheet,
-  View,
-  ImageBackground,
-  Animated,
-  useWindowDimensions,
-  useAnimatedValue,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const images = new Array(6).fill(
-  'https://images.unsplash.com/photo-1556740749-887f6717d7e4',
-);
-
-const App = () => {
-  const scrollX = useAnimatedValue(0);
-
-  const {width: windowWidth} = useWindowDimensions();
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.scrollContainer}>
-          <ScrollView
-            horizontal={true}
-            pagingEnabled
-            showsHorizontalScrollIndicator={false}
-            onScroll={Animated.event([
-              {
-                nativeEvent: {
-                  contentOffset: {
-                    x: scrollX,
-                  },
-                },
-              },
-            ])}
-            scrollEventThrottle={1}>
-            {images.map((image, imageIndex) => {
-              return (
-                <View
-                  style={{width: windowWidth, height: 250}}
-                  key={imageIndex}>
-                  <ImageBackground source={{uri: image}} style={styles.card}>
-                    <View style={styles.textContainer}>
-                      <Text style={styles.infoText}>
-                        {'Image - ' + imageIndex}
-                      </Text>
-                    </View>
-                  </ImageBackground>
-                </View>
-              );
-            })}
-          </ScrollView>
-          <View style={styles.indicatorContainer}>
-            {images.map((image, imageIndex) => {
-              const width = scrollX.interpolate({
-                inputRange: [
-                  windowWidth * (imageIndex - 1),
-                  windowWidth * imageIndex,
-                  windowWidth * (imageIndex + 1),
-                ],
-                outputRange: [8, 16, 8],
-                extrapolate: 'clamp',
-              });
-              return (
-                <Animated.View
-                  key={imageIndex}
-                  style={[styles.normalDot, {width}]}
-                />
-              );
-            })}
-          </View>
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  scrollContainer: {
-    height: 300,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  card: {
-    flex: 1,
-    marginVertical: 4,
-    marginHorizontal: 16,
-    borderRadius: 5,
-    overflow: 'hidden',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  textContainer: {
-    backgroundColor: 'rgba(0,0,0, 0.7)',
-    paddingHorizontal: 24,
-    paddingVertical: 8,
-    borderRadius: 5,
-  },
-  infoText: {
-    color: 'white',
-    fontSize: 16,
-    fontWeight: 'bold',
-  },
-  normalDot: {
-    height: 8,
-    width: 8,
-    borderRadius: 4,
-    backgroundColor: 'silver',
-    marginHorizontal: 4,
-  },
-  indicatorContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-
-export default App;
-```
-
-When using `PanResponder`, you could use the following code to extract the x and y positions from `gestureState.dx` and `gestureState.dy`. We use a `null` in the first position of the array, as we are only interested in the second argument passed to the `PanResponder` handler, which is the `gestureState`.
-
-```tsx
-onPanResponderMove={Animated.event(
-  [null, // ignore the native event
-  // extract dx and dy from gestureState
-  // like 'pan.x = gestureState.dx, pan.y = gestureState.dy'
-  {dx: pan.x, dy: pan.y}
-])}
-```
-
-#### PanResponder with Animated Event Example
-
-```SnackPlayer name=Animated
-import React, {useRef} from 'react';
-import {Animated, View, StyleSheet, PanResponder, Text} from 'react-native';
-
-const App = () => {
-  const pan = useRef(new Animated.ValueXY()).current;
-  const panResponder = useRef(
-    PanResponder.create({
-      onMoveShouldSetPanResponder: () => true,
-      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
-      onPanResponderRelease: () => {
-        Animated.spring(pan, {
-          toValue: {x: 0, y: 0},
-          useNativeDriver: true,
-        }).start();
-      },
-    }),
-  ).current;
-
-  return (
-    <View style={styles.container}>
-      <Text style={styles.titleText}>Drag & Release this box!</Text>
-      <Animated.View
-        style={{
-          transform: [{translateX: pan.x}, {translateY: pan.y}],
-        }}
-        {...panResponder.panHandlers}>
-        <View style={styles.box} />
-      </Animated.View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  titleText: {
-    fontSize: 14,
-    lineHeight: 24,
-    fontWeight: 'bold',
-  },
-  box: {
-    height: 150,
-    width: 150,
-    backgroundColor: 'blue',
-    borderRadius: 5,
-  },
-});
-
-export default App;
-```
-
-### Responding to the current animation value
-
-You may notice that there is no clear way to read the current value while animating. This is because the value may only be known in the native runtime due to optimizations. If you need to run JavaScript in response to the current value, there are two approaches:
-
-- `spring.stopAnimation(callback)` will stop the animation and invoke `callback` with the final value. This is useful when making gesture transitions.
-- `spring.addListener(callback)` will invoke `callback` asynchronously while the animation is running, providing a recent value. This is useful for triggering state changes, for example snapping a bobble to a new option as the user drags it closer, because these larger state changes are less sensitive to a few frames of lag compared to continuous gestures like panning which need to run at 60 fps.
-
-`Animated` is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Check out `Animated.Value.addListener` as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.
-
-### Using the native driver
-
-The `Animated` API is designed to be serializable. By using the [native driver](/blog/2017/02/14/using-native-driver-for-animated), we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.
-
-Using the native driver for normal animations can be accomplished by setting `useNativeDriver: true` in animation config when starting it. Animations without a `useNativeDriver` property will default to false for legacy reasons, but emit a warning (and typechecking error in TypeScript).
-
-```tsx
-Animated.timing(this.state.animatedValue, {
-  toValue: 1,
-  duration: 500,
-  useNativeDriver: true, // <-- Set this to true
-}).start();
-```
-
-Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
-
-The native driver also works with `Animated.event`. This is especially useful for animations that follow the scroll position as without the native driver, the animation will always run a frame behind the gesture due to the async nature of React Native.
-
-```tsx
-<Animated.ScrollView // <-- Use the Animated ScrollView wrapper
-  onScroll={Animated.event(
-    [
-      {
-        nativeEvent: {
-          contentOffset: {y: this.state.animatedValue},
-        },
-      },
-    ],
-    {useNativeDriver: true}, // <-- Set this to true
-  )}>
-  {content}
-</Animated.ScrollView>
-```
-
-You can see the native driver in action by running the [RNTester app](https://github.com/facebook/react-native/blob/main/packages/rn-tester/), then loading the Native Animated Example. You can also take a look at the [source code](https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js) to learn how these examples were produced.
-
-#### Caveats
-
-Not everything you can do with `Animated` is currently supported by the native driver. The main limitation is that you can only animate non-layout properties: things like `transform` and `opacity` will work, but Flexbox and position properties will not. When using `Animated.event`, it will only work with direct events and not bubbling events. This means it does not work with `PanResponder` but does work with things like `ScrollView#onScroll`.
-
-When an animation is running, it can prevent `VirtualizedList` components from rendering more rows. If you need to run a long or looping animation while the user is scrolling through a list, you can use `isInteraction: false` in your animation's config to prevent this issue.
-
-### Bear in mind
-
-While using transform styles such as `rotateY`, `rotateX`, and others ensure the transform style `perspective` is in place. At this time some animations may not render on Android without it. Example below.
-
-```tsx
-<Animated.View
-  style={{
-    transform: [
-      {scale: this.state.scale},
-      {rotateY: this.state.rotateY},
-      {perspective: 1000}, // without this line this Animation will not render on Android while working fine on iOS
-    ],
-  }}
-/>
-```
-
-### Additional examples
-
-The RNTester app has various examples of `Animated` in use:
-
-- [AnimatedGratuitousApp](https://github.com/facebook/react-native/tree/main/packages/rn-tester/js/examples/AnimatedGratuitousApp)
-- [NativeAnimationsExample](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js)
-
-## `LayoutAnimation` API
-
-`LayoutAnimation` allows you to globally configure `create` and `update` animations that will be used for all views in the next render/layout cycle. This is useful for doing Flexbox layout updates without bothering to measure or calculate specific properties in order to animate them directly, and is especially useful when layout changes may affect ancestors, for example a "see more" expansion that also increases the size of the parent and pushes down the row below which would otherwise require explicit coordination between the components in order to animate them all in sync.
-
-Note that although `LayoutAnimation` is very powerful and can be quite useful, it provides much less control than `Animated` and other animation libraries, so you may need to use another approach if you can't get `LayoutAnimation` to do what you want.
-
-Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`:
-
-```tsx
-UIManager.setLayoutAnimationEnabledExperimental(true);
-```
-
-```SnackPlayer name=LayoutAnimations
-import React, {useState} from 'react';
-import {
-  NativeModules,
-  LayoutAnimation,
-  Text,
-  TouchableOpacity,
-  StyleSheet,
-  View,
-} from 'react-native';
-
-const {UIManager} = NativeModules;
-
-UIManager.setLayoutAnimationEnabledExperimental &&
-  UIManager.setLayoutAnimationEnabledExperimental(true);
-
-export default function App() {
-  const [state, setState] = useState({
-    w: 100,
-    h: 100,
-  });
-
-  const onPress = () => {
-    // Animate the update
-    LayoutAnimation.spring();
-    setState({w: state.w + 15, h: state.h + 15});
-  };
-
-  return (
-    <View style={styles.container}>
-      <View style={[styles.box, {width: state.w, height: state.h}]} />
-      <TouchableOpacity onPress={onPress}>
-        <View style={styles.button}>
-          <Text style={styles.buttonText}>Press me!</Text>
-        </View>
-      </TouchableOpacity>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  box: {
-    width: 200,
-    height: 200,
-    backgroundColor: 'red',
-  },
-  button: {
-    backgroundColor: 'black',
-    paddingHorizontal: 20,
-    paddingVertical: 15,
-    marginTop: 15,
-  },
-  buttonText: {
-    color: '#fff',
-    fontWeight: 'bold',
-  },
-});
-```
-
-This example uses a preset value, you can customize the animations as you need, see [LayoutAnimation.js](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/LayoutAnimation/LayoutAnimation.js) for more information.
-
-## Additional notes
-
-### `requestAnimationFrame`
-
-`requestAnimationFrame` is a polyfill from the browser that you might be familiar with. It accepts a function as its only argument and calls that function before the next repaint. It is an essential building block for animations that underlies all of the JavaScript-based animation APIs. In general, you shouldn't need to call this yourself - the animation APIs will manage frame updates for you.
-
-### `setNativeProps`
-
-As mentioned [in the Direct Manipulation section](legacy/direct-manipulation), `setNativeProps` allows us to modify properties of native-backed components (components that are actually backed by native views, unlike composite components) directly, without having to `setState` and re-render the component hierarchy.
-
-We could use this in the Rebound example to update the scale - this might be helpful if the component that we are updating is deeply nested and hasn't been optimized with `shouldComponentUpdate`.
-
-If you find your animations with dropping frames (performing below 60 frames per second), look into using `setNativeProps` or `shouldComponentUpdate` to optimize them. Or you could run the animations on the UI thread rather than the JavaScript thread [with the useNativeDriver option](/blog/2017/02/14/using-native-driver-for-animated). You may also want to defer any computationally intensive work until after animations are complete, using the [InteractionManager](interactionmanager). You can monitor the frame rate by using the In-App Dev Menu "FPS Monitor" tool.
+---
+id: animations
+title: Animations
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface.
+
+React Native provides two complementary animation systems: [`Animated`](animations#animated-api) for granular and interactive control of specific values, and [`LayoutAnimation`](animations#layoutanimation-api) for animated global layout transactions.
+
+## `Animated` API
+
+The [`Animated`](animated) API is designed to concisely express a wide variety of interesting animation and interaction patterns in a very performant way. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and `start`/`stop` methods to control time-based animation execution.
+
+`Animated` exports six animatable component types: `View`, `Text`, `Image`, `ScrollView`, `FlatList` and `SectionList`, but you can also create your own using `Animated.createAnimatedComponent()`.
+
+For example, a container view that fades in when it is mounted may look like this:
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer ext=js
+import {useEffect, useRef} from 'react';
+import {Animated, Text, View} from 'react-native';
+
+const FadeInView = props => {
+  const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
+
+  useEffect(() => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 10000,
+      useNativeDriver: true,
+    }).start();
+  }, [fadeAnim]);
+
+  return (
+    <Animated.View // Special animatable View
+      style={{
+        ...props.style,
+        opacity: fadeAnim, // Bind opacity to animated value
+      }}>
+      {props.children}
+    </Animated.View>
+  );
+};
+
+// You can then use your `FadeInView` in place of a `View` in your components:
+export default () => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+      <FadeInView
+        style={{
+          width: 250,
+          height: 50,
+          backgroundColor: 'powderblue',
+        }}>
+        <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>
+          Fading in
+        </Text>
+      </FadeInView>
+    </View>
+  );
+};
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer ext=tsx
+import {useEffect, useRef, type PropsWithChildren, type FC} from 'react';
+import {Animated, Text, View, type ViewStyle} from 'react-native';
+
+type FadeInViewProps = PropsWithChildren<{style: ViewStyle}>;
+
+const FadeInView: FC<FadeInViewProps> = props => {
+  const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
+
+  useEffect(() => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 10000,
+      useNativeDriver: true,
+    }).start();
+  }, [fadeAnim]);
+
+  return (
+    <Animated.View // Special animatable View
+      style={{
+        ...props.style,
+        opacity: fadeAnim, // Bind opacity to animated value
+      }}>
+      {props.children}
+    </Animated.View>
+  );
+};
+
+// You can then use your `FadeInView` in place of a `View` in your components:
+export default () => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+      <FadeInView
+        style={{
+          width: 250,
+          height: 50,
+          backgroundColor: 'powderblue',
+        }}>
+        <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>
+          Fading in
+        </Text>
+      </FadeInView>
+    </View>
+  );
+};
+```
+
+</TabItem>
+</Tabs>
+
+Let's break down what's happening here. In the `FadeInView` render method, a new `Animated.Value` called `fadeAnim` is initialized with `useRef`. The opacity property on the `View` is mapped to this animated value. Behind the scenes, the numeric value is extracted and used to set opacity.
+
+When the component mounts, the opacity is set to 0. Then, an easing animation is started on the `fadeAnim` animated value, which will update all of its dependent mappings (in this case, only the opacity) on each frame as the value animates to the final value of 1.
+
+This is done in an optimized way that is faster than calling `setState` and re-rendering. Because the entire configuration is declarative, we will be able to implement further optimizations that serialize the configuration and runs the animation on a high-priority thread.
+
+### Configuring animations
+
+Animations are heavily configurable. Custom and predefined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.
+
+`Animated` provides several animation types, the most commonly used one being [`Animated.timing()`](animated#timing). It supports animating a value over time using one of various predefined easing functions, or you can use your own. Easing functions are typically used in animation to convey gradual acceleration and deceleration of objects.
+
+By default, `timing` will use an easeInOut curve that conveys gradual acceleration to full speed and concludes by gradually decelerating to a stop. You can specify a different easing function by passing an `easing` parameter. Custom `duration` or even a `delay` before the animation starts is also supported.
+
+For example, if we want to create a 2-second long animation of an object that slightly backs up before moving to its final position:
+
+```tsx
+Animated.timing(this.state.xPosition, {
+  toValue: 100,
+  easing: Easing.back(),
+  duration: 2000,
+  useNativeDriver: true,
+}).start();
+```
+
+Take a look at the [Configuring animations](animated#configuring-animations) section of the `Animated` API reference to learn more about all the config parameters supported by the built-in animations.
+
+### Composing animations
+
+Animations can be combined and played in sequence or in parallel. Sequential animations can play immediately after the previous animation has finished, or they can start after a specified delay. The `Animated` API provides several methods, such as `sequence()` and `delay()`, each of which take an array of animations to execute and automatically calls `start()`/`stop()` as needed.
+
+For example, the following animation coasts to a stop, then it springs back while twirling in parallel:
+
+```tsx
+Animated.sequence([
+  // decay, then spring to start and twirl
+  Animated.decay(position, {
+    // coast to a stop
+    velocity: {x: gestureState.vx, y: gestureState.vy}, // velocity from gesture release
+    deceleration: 0.997,
+    useNativeDriver: true,
+  }),
+  Animated.parallel([
+    // after decay, in parallel:
+    Animated.spring(position, {
+      toValue: {x: 0, y: 0}, // return to start
+      useNativeDriver: true,
+    }),
+    Animated.timing(twirl, {
+      // and twirl
+      toValue: 360,
+      useNativeDriver: true,
+    }),
+  ]),
+]).start(); // start the sequence group
+```
+
+If one animation is stopped or interrupted, then all other animations in the group are also stopped. `Animated.parallel` has a `stopTogether` option that can be set to `false` to disable this.
+
+You can find a full list of composition methods in the [Composing animations](animated#composing-animations) section of the `Animated` API reference.
+
+### Combining animated values
+
+You can [combine two animated values](animated#combining-animated-values) via addition, multiplication, division, or modulo to make a new animated value.
+
+There are some cases where an animated value needs to invert another animated value for calculation. An example is inverting a scale (2x --> 0.5x):
+
+```tsx
+const a = new Animated.Value(1);
+const b = Animated.divide(1, a);
+
+Animated.spring(a, {
+  toValue: 2,
+  useNativeDriver: true,
+}).start();
+```
+
+### Interpolation
+
+Each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.
+
+A basic mapping to convert a 0-1 range to a 0-100 range would be:
+
+```tsx
+value.interpolate({
+  inputRange: [0, 1],
+  outputRange: [0, 100],
+});
+```
+
+For example, you may want to think about your `Animated.Value` as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying `style` from the example above like so:
+
+```tsx
+  style={{
+    opacity: this.state.fadeAnim, // Binds directly
+    transform: [{
+      translateY: this.state.fadeAnim.interpolate({
+        inputRange: [0, 1],
+        outputRange: [150, 0]  // 0 : 150, 0.5 : 75, 1 : 0
+      }),
+    }],
+  }}
+```
+
+[`interpolate()`](animated#interpolate) supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
+
+```tsx
+value.interpolate({
+  inputRange: [-300, -100, 0, 100, 101],
+  outputRange: [300, 0, 1, 0, 0],
+});
+```
+
+Which would map like so:
+
+```
+Input | Output
+------|-------
+  -400|    450
+  -300|    300
+  -200|    150
+  -100|      0
+   -50|    0.5
+     0|      1
+    50|    0.5
+   100|      0
+   101|      0
+   200|      0
+```
+
+`interpolate()` also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
+
+```tsx
+value.interpolate({
+  inputRange: [0, 360],
+  outputRange: ['0deg', '360deg'],
+});
+```
+
+`interpolate()` also supports arbitrary easing functions, many of which are already implemented in the [`Easing`](easing) module. `interpolate()` also has configurable behavior for extrapolating the `outputRange`. You can set the extrapolation by setting the `extrapolate`, `extrapolateLeft`, or `extrapolateRight` options. The default value is `extend` but you can use `clamp` to prevent the output value from exceeding `outputRange`.
+
+### Tracking dynamic values
+
+Animated values can also track other values by setting the `toValue` of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a `spring()` pinned on another animated value, or with `timing()` and a `duration` of 0 for rigid tracking. They can also be composed with interpolations:
+
+```tsx
+Animated.spring(follower, {toValue: leader}).start();
+Animated.timing(opacity, {
+  toValue: pan.x.interpolate({
+    inputRange: [0, 300],
+    outputRange: [1, 0],
+  }),
+  useNativeDriver: true,
+}).start();
+```
+
+The `leader` and `follower` animated values would be implemented using `Animated.ValueXY()`. `ValueXY` is a handy way to deal with 2D interactions, such as panning or dragging. It is a basic wrapper that contains two `Animated.Value` instances and some helper functions that call through to them, making `ValueXY` a drop-in replacement for `Value` in many cases. It allows us to track both x and y values in the example above.
+
+### Tracking gestures
+
+Gestures, like panning or scrolling, and other events can map directly to animated values using [`Animated.event`](animated#event). This is done with a structured map syntax so that values can be extracted from complex event objects. The first level is an array to allow mapping across multiple args, and that array contains nested objects.
+
+For example, when working with horizontal scrolling gestures, you would do the following in order to map `event.nativeEvent.contentOffset.x` to `scrollX` (an `Animated.Value`):
+
+```tsx
+ onScroll={Animated.event(
+   // scrollX = e.nativeEvent.contentOffset.x
+   [{nativeEvent: {
+        contentOffset: {
+          x: scrollX
+        }
+      }
+    }]
+ )}
+```
+
+The following example implements a horizontal scrolling carousel where the scroll position indicators are animated using the `Animated.event` used in the `ScrollView`
+
+#### ScrollView with Animated Event Example
+
+```SnackPlayer name=Animated&supportedPlatforms=ios,android
+import {
+  ScrollView,
+  Text,
+  StyleSheet,
+  View,
+  ImageBackground,
+  Animated,
+  useWindowDimensions,
+  useAnimatedValue,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const images = new Array(6).fill(
+  'https://images.unsplash.com/photo-1556740749-887f6717d7e4',
+);
+
+const App = () => {
+  const scrollX = useAnimatedValue(0);
+
+  const {width: windowWidth} = useWindowDimensions();
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.scrollContainer}>
+          <ScrollView
+            horizontal={true}
+            pagingEnabled
+            showsHorizontalScrollIndicator={false}
+            onScroll={Animated.event([
+              {
+                nativeEvent: {
+                  contentOffset: {
+                    x: scrollX,
+                  },
+                },
+              },
+            ])}
+            scrollEventThrottle={1}>
+            {images.map((image, imageIndex) => {
+              return (
+                <View
+                  style={{width: windowWidth, height: 250}}
+                  key={imageIndex}>
+                  <ImageBackground source={{uri: image}} style={styles.card}>
+                    <View style={styles.textContainer}>
+                      <Text style={styles.infoText}>
+                        {'Image - ' + imageIndex}
+                      </Text>
+                    </View>
+                  </ImageBackground>
+                </View>
+              );
+            })}
+          </ScrollView>
+          <View style={styles.indicatorContainer}>
+            {images.map((image, imageIndex) => {
+              const width = scrollX.interpolate({
+                inputRange: [
+                  windowWidth * (imageIndex - 1),
+                  windowWidth * imageIndex,
+                  windowWidth * (imageIndex + 1),
+                ],
+                outputRange: [8, 16, 8],
+                extrapolate: 'clamp',
+              });
+              return (
+                <Animated.View
+                  key={imageIndex}
+                  style={[styles.normalDot, {width}]}
+                />
+              );
+            })}
+          </View>
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  scrollContainer: {
+    height: 300,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  card: {
+    flex: 1,
+    marginVertical: 4,
+    marginHorizontal: 16,
+    borderRadius: 5,
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  textContainer: {
+    backgroundColor: 'rgba(0,0,0, 0.7)',
+    paddingHorizontal: 24,
+    paddingVertical: 8,
+    borderRadius: 5,
+  },
+  infoText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  normalDot: {
+    height: 8,
+    width: 8,
+    borderRadius: 4,
+    backgroundColor: 'silver',
+    marginHorizontal: 4,
+  },
+  indicatorContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default App;
+```
+
+When using `PanResponder`, you could use the following code to extract the x and y positions from `gestureState.dx` and `gestureState.dy`. We use a `null` in the first position of the array, as we are only interested in the second argument passed to the `PanResponder` handler, which is the `gestureState`.
+
+```tsx
+onPanResponderMove={Animated.event(
+  [null, // ignore the native event
+  // extract dx and dy from gestureState
+  // like 'pan.x = gestureState.dx, pan.y = gestureState.dy'
+  {dx: pan.x, dy: pan.y}
+])}
+```
+
+#### PanResponder with Animated Event Example
+
+```SnackPlayer name=Animated
+import {useRef} from 'react';
+import {Animated, View, StyleSheet, PanResponder, Text} from 'react-native';
+
+const App = () => {
+  const pan = useRef(new Animated.ValueXY()).current;
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
+      onPanResponderRelease: () => {
+        Animated.spring(pan, {
+          toValue: {x: 0, y: 0},
+          useNativeDriver: true,
+        }).start();
+      },
+    }),
+  ).current;
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.titleText}>Drag & Release this box!</Text>
+      <Animated.View
+        style={{
+          transform: [{translateX: pan.x}, {translateY: pan.y}],
+        }}
+        {...panResponder.panHandlers}>
+        <View style={styles.box} />
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  titleText: {
+    fontSize: 14,
+    lineHeight: 24,
+    fontWeight: 'bold',
+  },
+  box: {
+    height: 150,
+    width: 150,
+    backgroundColor: 'blue',
+    borderRadius: 5,
+  },
+});
+
+export default App;
+```
+
+### Responding to the current animation value
+
+You may notice that there is no clear way to read the current value while animating. This is because the value may only be known in the native runtime due to optimizations. If you need to run JavaScript in response to the current value, there are two approaches:
+
+- `spring.stopAnimation(callback)` will stop the animation and invoke `callback` with the final value. This is useful when making gesture transitions.
+- `spring.addListener(callback)` will invoke `callback` asynchronously while the animation is running, providing a recent value. This is useful for triggering state changes, for example snapping a bobble to a new option as the user drags it closer, because these larger state changes are less sensitive to a few frames of lag compared to continuous gestures like panning which need to run at 60 fps.
+
+`Animated` is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Check out `Animated.Value.addListener` as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.
+
+### Using the native driver
+
+The `Animated` API is designed to be serializable. By using the [native driver](/blog/2017/02/14/using-native-driver-for-animated), we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.
+
+Using the native driver for normal animations can be accomplished by setting `useNativeDriver: true` in animation config when starting it. Animations without a `useNativeDriver` property will default to false for legacy reasons, but emit a warning (and typechecking error in TypeScript).
+
+```tsx
+Animated.timing(this.state.animatedValue, {
+  toValue: 1,
+  duration: 500,
+  useNativeDriver: true, // <-- Set this to true
+}).start();
+```
+
+Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
+
+The native driver also works with `Animated.event`. This is especially useful for animations that follow the scroll position as without the native driver, the animation will always run a frame behind the gesture due to the async nature of React Native.
+
+```tsx
+<Animated.ScrollView // <-- Use the Animated ScrollView wrapper
+  onScroll={Animated.event(
+    [
+      {
+        nativeEvent: {
+          contentOffset: {y: this.state.animatedValue},
+        },
+      },
+    ],
+    {useNativeDriver: true}, // <-- Set this to true
+  )}>
+  {content}
+</Animated.ScrollView>
+```
+
+You can see the native driver in action by running the [RNTester app](https://github.com/facebook/react-native/blob/main/packages/rn-tester/), then loading the Native Animated Example. You can also take a look at the [source code](https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js) to learn how these examples were produced.
+
+#### Caveats
+
+Not everything you can do with `Animated` is currently supported by the native driver. The main limitation is that you can only animate non-layout properties: things like `transform` and `opacity` will work, but Flexbox and position properties will not. When using `Animated.event`, it will only work with direct events and not bubbling events. This means it does not work with `PanResponder` but does work with things like `ScrollView#onScroll`.
+
+When an animation is running, it can prevent `VirtualizedList` components from rendering more rows. If you need to run a long or looping animation while the user is scrolling through a list, you can use `isInteraction: false` in your animation's config to prevent this issue.
+
+### Bear in mind
+
+While using transform styles such as `rotateY`, `rotateX`, and others ensure the transform style `perspective` is in place. At this time some animations may not render on Android without it. Example below.
+
+```tsx
+<Animated.View
+  style={{
+    transform: [
+      {scale: this.state.scale},
+      {rotateY: this.state.rotateY},
+      {perspective: 1000}, // without this line this Animation will not render on Android while working fine on iOS
+    ],
+  }}
+/>
+```
+
+### Additional examples
+
+The RNTester app has various examples of `Animated` in use:
+
+- [AnimatedGratuitousApp](https://github.com/facebook/react-native/tree/main/packages/rn-tester/js/examples/AnimatedGratuitousApp)
+- [NativeAnimationsExample](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js)
+
+## `LayoutAnimation` API
+
+`LayoutAnimation` allows you to globally configure `create` and `update` animations that will be used for all views in the next render/layout cycle. This is useful for doing Flexbox layout updates without bothering to measure or calculate specific properties in order to animate them directly, and is especially useful when layout changes may affect ancestors, for example a "see more" expansion that also increases the size of the parent and pushes down the row below which would otherwise require explicit coordination between the components in order to animate them all in sync.
+
+Note that although `LayoutAnimation` is very powerful and can be quite useful, it provides much less control than `Animated` and other animation libraries, so you may need to use another approach if you can't get `LayoutAnimation` to do what you want.
+
+Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`:
+
+```tsx
+UIManager.setLayoutAnimationEnabledExperimental(true);
+```
+
+```SnackPlayer name=LayoutAnimations
+import {useState} from 'react';
+import {
+  NativeModules,
+  LayoutAnimation,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  View,
+} from 'react-native';
+
+const {UIManager} = NativeModules;
+
+UIManager.setLayoutAnimationEnabledExperimental &&
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+
+export default function App() {
+  const [state, setState] = useState({
+    w: 100,
+    h: 100,
+  });
+
+  const onPress = () => {
+    // Animate the update
+    LayoutAnimation.spring();
+    setState({w: state.w + 15, h: state.h + 15});
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={[styles.box, {width: state.w, height: state.h}]} />
+      <TouchableOpacity onPress={onPress}>
+        <View style={styles.button}>
+          <Text style={styles.buttonText}>Press me!</Text>
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  box: {
+    width: 200,
+    height: 200,
+    backgroundColor: 'red',
+  },
+  button: {
+    backgroundColor: 'black',
+    paddingHorizontal: 20,
+    paddingVertical: 15,
+    marginTop: 15,
+  },
+  buttonText: {
+    color: '#fff',
+    fontWeight: 'bold',
+  },
+});
+```
+
+This example uses a preset value, you can customize the animations as you need, see [LayoutAnimation.js](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/LayoutAnimation/LayoutAnimation.js) for more information.
+
+## Additional notes
+
+### `requestAnimationFrame`
+
+`requestAnimationFrame` is a polyfill from the browser that you might be familiar with. It accepts a function as its only argument and calls that function before the next repaint. It is an essential building block for animations that underlies all of the JavaScript-based animation APIs. In general, you shouldn't need to call this yourself - the animation APIs will manage frame updates for you.
+
+### `setNativeProps`
+
+As mentioned [in the Direct Manipulation section](legacy/direct-manipulation), `setNativeProps` allows us to modify properties of native-backed components (components that are actually backed by native views, unlike composite components) directly, without having to `setState` and re-render the component hierarchy.
+
+We could use this in the Rebound example to update the scale - this might be helpful if the component that we are updating is deeply nested and hasn't been optimized with `shouldComponentUpdate`.
+
+If you find your animations with dropping frames (performing below 60 frames per second), look into using `setNativeProps` or `shouldComponentUpdate` to optimize them. Or you could run the animations on the UI thread rather than the JavaScript thread [with the useNativeDriver option](/blog/2017/02/14/using-native-driver-for-animated). You may also want to defer any computationally intensive work until after animations are complete, using the [InteractionManager](interactionmanager). You can monitor the frame rate by using the In-App Dev Menu "FPS Monitor" tool.
diff --git a/website/versioned_docs/version-0.82/appstate.md b/website/versioned_docs/version-0.82/appstate.md
index b776907d3e1..4980ef439da 100644
--- a/website/versioned_docs/version-0.82/appstate.md
+++ b/website/versioned_docs/version-0.82/appstate.md
@@ -1,122 +1,122 @@
----
-id: appstate
-title: AppState
----
-
-`AppState` can tell you if the app is in the foreground or background, and notify you when the state changes.
-
-AppState is frequently used to determine the intent and proper behavior when handling push notifications.
-
-### App States
-
-- `active` - The app is running in the foreground
-- `background` - The app is running in the background. The user is either:
-  - in another app
-  - on the home screen
-  - [Android] on another `Activity`, including temporary system activities such
-    as autofill credential pickers (even if launched by your app or the system)
-- [iOS] `inactive` - This is a state that occurs when transitioning between foreground & background, and during periods of inactivity such as entering the multitasking view, opening the Notification Center or in the event of an incoming call.
-
-For more information, see [Apple's documentation](https://developer.apple.com/documentation/uikit/app_and_scenes/managing_your_app_s_life_cycle)
-
-## Basic Usage
-
-To see the current state, you can check `AppState.currentState`, which will be kept up-to-date.
-
-:::info
-If you are using the legacy architecture, `currentState` will be `null` at launch until it is retrieved asynchronously from the native side.
-:::
-
-```SnackPlayer name=AppState%20Example
-import React, {useRef, useState, useEffect} from 'react';
-import {AppState, StyleSheet, Text} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const AppStateExample = () => {
-  const appState = useRef(AppState.currentState);
-  const [appStateVisible, setAppStateVisible] = useState(appState.current);
-
-  useEffect(() => {
-    const subscription = AppState.addEventListener('change', nextAppState => {
-      if (
-        appState.current.match(/inactive|background/) &&
-        nextAppState === 'active'
-      ) {
-        console.log('App has come to the foreground!');
-      }
-
-      appState.current = nextAppState;
-      setAppStateVisible(appState.current);
-      console.log('AppState', appState.current);
-    });
-
-    return () => {
-      subscription.remove();
-    };
-  }, []);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>Current state is: {appStateVisible}</Text>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default AppStateExample;
-```
-
-This example will only ever appear to say "Current state is: active" because the app is only visible to the user when in the `active` state. If you want to experiment with the code we recommend to use your own device instead of embedded preview.
-
----
-
-# Reference
-
-## Events
-
-### `change`
-
-This event is received when the app state has changed. The listener is called with one of [the current app state values](appstate#app-states).
-
-### `memoryWarning` <div className="label ios">iOS</div>
-
-Fires when the app receives a memory warning from the operating system.
-
-### `focus` <div className="label android">Android</div>
-
-Received when the app gains focus (the user is interacting with the app).
-
-### `blur` <div className="label android">Android</div>
-
-Received when the user is not actively interacting with the app. Useful in situations when the user pulls down the [notification drawer](https://developer.android.com/guide/topics/ui/notifiers/notifications#bar-and-drawer). `AppState` won't change but the `blur` event will get fired.
-
-## Methods
-
-### `addEventListener()`
-
-```tsx
-static addEventListener(
-  type: AppStateEvent,
-  listener: (state: AppStateStatus) => void,
-): NativeEventSubscription;
-```
-
-Sets up a function that will be called whenever the specified event type on AppState occurs. Valid values for `eventType` are
-[listed above](#events). Returns the `EventSubscription`.
-
-## Properties
-
-### `currentState`
-
-```tsx
-static currentState: AppStateStatus;
-```
+---
+id: appstate
+title: AppState
+---
+
+`AppState` can tell you if the app is in the foreground or background, and notify you when the state changes.
+
+AppState is frequently used to determine the intent and proper behavior when handling push notifications.
+
+### App States
+
+- `active` - The app is running in the foreground
+- `background` - The app is running in the background. The user is either:
+  - in another app
+  - on the home screen
+  - [Android] on another `Activity`, including temporary system activities such
+    as autofill credential pickers (even if launched by your app or the system)
+- [iOS] `inactive` - This is a state that occurs when transitioning between foreground & background, and during periods of inactivity such as entering the multitasking view, opening the Notification Center or in the event of an incoming call.
+
+For more information, see [Apple's documentation](https://developer.apple.com/documentation/uikit/app_and_scenes/managing_your_app_s_life_cycle)
+
+## Basic Usage
+
+To see the current state, you can check `AppState.currentState`, which will be kept up-to-date.
+
+:::info
+If you are using the legacy architecture, `currentState` will be `null` at launch until it is retrieved asynchronously from the native side.
+:::
+
+```SnackPlayer name=AppState%20Example
+import {useRef, useState, useEffect} from 'react';
+import {AppState, StyleSheet, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const AppStateExample = () => {
+  const appState = useRef(AppState.currentState);
+  const [appStateVisible, setAppStateVisible] = useState(appState.current);
+
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', nextAppState => {
+      if (
+        appState.current.match(/inactive|background/) &&
+        nextAppState === 'active'
+      ) {
+        console.log('App has come to the foreground!');
+      }
+
+      appState.current = nextAppState;
+      setAppStateVisible(appState.current);
+      console.log('AppState', appState.current);
+    });
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>Current state is: {appStateVisible}</Text>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default AppStateExample;
+```
+
+This example will only ever appear to say "Current state is: active" because the app is only visible to the user when in the `active` state. If you want to experiment with the code we recommend to use your own device instead of embedded preview.
+
+---
+
+# Reference
+
+## Events
+
+### `change`
+
+This event is received when the app state has changed. The listener is called with one of [the current app state values](appstate#app-states).
+
+### `memoryWarning` <div className="label ios">iOS</div>
+
+Fires when the app receives a memory warning from the operating system.
+
+### `focus` <div className="label android">Android</div>
+
+Received when the app gains focus (the user is interacting with the app).
+
+### `blur` <div className="label android">Android</div>
+
+Received when the user is not actively interacting with the app. Useful in situations when the user pulls down the [notification drawer](https://developer.android.com/guide/topics/ui/notifiers/notifications#bar-and-drawer). `AppState` won't change but the `blur` event will get fired.
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+  type: AppStateEvent,
+  listener: (state: AppStateStatus) => void,
+): NativeEventSubscription;
+```
+
+Sets up a function that will be called whenever the specified event type on AppState occurs. Valid values for `eventType` are
+[listed above](#events). Returns the `EventSubscription`.
+
+## Properties
+
+### `currentState`
+
+```tsx
+static currentState: AppStateStatus;
+```
diff --git a/website/versioned_docs/version-0.82/backhandler.md b/website/versioned_docs/version-0.82/backhandler.md
index f020f3fc7a5..c07a4c5d029 100644
--- a/website/versioned_docs/version-0.82/backhandler.md
+++ b/website/versioned_docs/version-0.82/backhandler.md
@@ -1,136 +1,136 @@
----
-id: backhandler
-title: BackHandler
----
-
-The Backhandler API detects hardware button presses for back navigation, lets you register event listeners for the system's back action, and lets you control how your application responds. It is Android-only.
-
-The event subscriptions are called in reverse order (i.e. the last registered subscription is called first).
-
-- **If one subscription returns true,** then subscriptions registered earlier will not be called.
-- **If no subscription returns true or none are registered,** it programmatically invokes the default back button functionality to exit the app.
-
-:::warning[Warning for modal users]
-If your app shows an opened `Modal`, `BackHandler` will not publish any events ([see `Modal` docs](modal#onrequestclose)).
-:::
-
-## Pattern
-
-```tsx
-const subscription = BackHandler.addEventListener(
-  'hardwareBackPress',
-  function () {
-    /**
-     * this.onMainScreen and this.goBack are just examples,
-     * you need to use your own implementation here.
-     *
-     * Typically you would use the navigator here to go to the last state.
-     */
-
-    if (!this.onMainScreen()) {
-      this.goBack();
-      /**
-       * When true is returned the event will not be bubbled up
-       * & no other back action will execute
-       */
-      return true;
-    }
-    /**
-     * Returning false will let the event to bubble up & let other event listeners
-     * or the system's default back action to be executed.
-     */
-    return false;
-  },
-);
-
-// Unsubscribe the listener on unmount
-subscription.remove();
-```
-
-## Example
-
-The following example implements a scenario where you confirm if the user wants to exit the app:
-
-```SnackPlayer name=BackHandler&supportedPlatforms=android
-import React, {useEffect} from 'react';
-import {Text, StyleSheet, BackHandler, Alert} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  useEffect(() => {
-    const backAction = () => {
-      Alert.alert('Hold on!', 'Are you sure you want to go back?', [
-        {
-          text: 'Cancel',
-          onPress: () => null,
-          style: 'cancel',
-        },
-        {text: 'YES', onPress: () => BackHandler.exitApp()},
-      ]);
-      return true;
-    };
-
-    const backHandler = BackHandler.addEventListener(
-      'hardwareBackPress',
-      backAction,
-    );
-
-    return () => backHandler.remove();
-  }, []);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.text}>Click Back button!</Text>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  text: {
-    fontSize: 18,
-    fontWeight: 'bold',
-  },
-});
-
-export default App;
-```
-
-`BackHandler.addEventListener` creates an event listener & returns a `NativeEventSubscription` object which should be cleared using `NativeEventSubscription.remove` method.
-
-## Usage with React Navigation
-
-If you are using React Navigation to navigate across different screens, you can follow their guide on [Custom Android back button behaviour](https://reactnavigation.org/docs/custom-android-back-button-handling/)
-
-## Backhandler hook
-
-[React Native Hooks](https://github.com/react-native-community/hooks#usebackhandler) has a nice `useBackHandler` hook which will simplify the process of setting up event listeners.
-
----
-
-# Reference
-
-## Methods
-
-### `addEventListener()`
-
-```tsx
-static addEventListener(
-  eventName: BackPressEventName,
-  handler: () => boolean | null | undefined,
-): NativeEventSubscription;
-```
-
----
-
-### `exitApp()`
-
-```tsx
-static exitApp();
-```
+---
+id: backhandler
+title: BackHandler
+---
+
+The Backhandler API detects hardware button presses for back navigation, lets you register event listeners for the system's back action, and lets you control how your application responds. It is Android-only.
+
+The event subscriptions are called in reverse order (i.e. the last registered subscription is called first).
+
+- **If one subscription returns true,** then subscriptions registered earlier will not be called.
+- **If no subscription returns true or none are registered,** it programmatically invokes the default back button functionality to exit the app.
+
+:::warning[Warning for modal users]
+If your app shows an opened `Modal`, `BackHandler` will not publish any events ([see `Modal` docs](modal#onrequestclose)).
+:::
+
+## Pattern
+
+```tsx
+const subscription = BackHandler.addEventListener(
+  'hardwareBackPress',
+  function () {
+    /**
+     * this.onMainScreen and this.goBack are just examples,
+     * you need to use your own implementation here.
+     *
+     * Typically you would use the navigator here to go to the last state.
+     */
+
+    if (!this.onMainScreen()) {
+      this.goBack();
+      /**
+       * When true is returned the event will not be bubbled up
+       * & no other back action will execute
+       */
+      return true;
+    }
+    /**
+     * Returning false will let the event to bubble up & let other event listeners
+     * or the system's default back action to be executed.
+     */
+    return false;
+  },
+);
+
+// Unsubscribe the listener on unmount
+subscription.remove();
+```
+
+## Example
+
+The following example implements a scenario where you confirm if the user wants to exit the app:
+
+```SnackPlayer name=BackHandler&supportedPlatforms=android
+import {useEffect} from 'react';
+import {Text, StyleSheet, BackHandler, Alert} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  useEffect(() => {
+    const backAction = () => {
+      Alert.alert('Hold on!', 'Are you sure you want to go back?', [
+        {
+          text: 'Cancel',
+          onPress: () => null,
+          style: 'cancel',
+        },
+        {text: 'YES', onPress: () => BackHandler.exitApp()},
+      ]);
+      return true;
+    };
+
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      backAction,
+    );
+
+    return () => backHandler.remove();
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.text}>Click Back button!</Text>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+});
+
+export default App;
+```
+
+`BackHandler.addEventListener` creates an event listener & returns a `NativeEventSubscription` object which should be cleared using `NativeEventSubscription.remove` method.
+
+## Usage with React Navigation
+
+If you are using React Navigation to navigate across different screens, you can follow their guide on [Custom Android back button behaviour](https://reactnavigation.org/docs/custom-android-back-button-handling/)
+
+## Backhandler hook
+
+[React Native Hooks](https://github.com/react-native-community/hooks#usebackhandler) has a nice `useBackHandler` hook which will simplify the process of setting up event listeners.
+
+---
+
+# Reference
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+  eventName: BackPressEventName,
+  handler: () => boolean | null | undefined,
+): NativeEventSubscription;
+```
+
+---
+
+### `exitApp()`
+
+```tsx
+static exitApp();
+```
diff --git a/website/versioned_docs/version-0.82/button.md b/website/versioned_docs/version-0.82/button.md
index 9fc529fc863..23501057f52 100644
--- a/website/versioned_docs/version-0.82/button.md
+++ b/website/versioned_docs/version-0.82/button.md
@@ -19,7 +19,6 @@ If this button doesn't look right for your app, you can build your own button us
 ## Example
 
 ```SnackPlayer name=Button%20Example&ext=js
-import React from 'react';
 import {StyleSheet, Button, View, Text, Alert, Platform} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.82/communication-android.md b/website/versioned_docs/version-0.82/communication-android.md
index f78dc84cf65..35aab358818 100644
--- a/website/versioned_docs/version-0.82/communication-android.md
+++ b/website/versioned_docs/version-0.82/communication-android.md
@@ -67,7 +67,6 @@ class MainActivity : ReactActivity() {
 </Tabs>
 
 ```tsx
-import React from 'react';
 import {View, Image} from 'react-native';
 
 export default class ImageBrowserApp extends React.Component {
diff --git a/website/versioned_docs/version-0.82/communication-ios.md b/website/versioned_docs/version-0.82/communication-ios.md
index f82cae7e620..89a64ff9b4c 100644
--- a/website/versioned_docs/version-0.82/communication-ios.md
+++ b/website/versioned_docs/version-0.82/communication-ios.md
@@ -33,7 +33,6 @@ RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
 ```
 
 ```tsx
-import React from 'react';
 import {View, Image} from 'react-native';
 
 export default class ImageBrowserApp extends React.Component {
diff --git a/website/versioned_docs/version-0.82/dimensions.md b/website/versioned_docs/version-0.82/dimensions.md
index 9ebb8561739..eb3673eca5b 100644
--- a/website/versioned_docs/version-0.82/dimensions.md
+++ b/website/versioned_docs/version-0.82/dimensions.md
@@ -1,154 +1,154 @@
----
-id: dimensions
-title: Dimensions
----
-
-:::info
-[`useWindowDimensions`](usewindowdimensions) is the preferred API for React components. Unlike `Dimensions`, it updates as the window's dimensions update. This works nicely with the React paradigm.
-:::
-
-```tsx
-import {Dimensions} from 'react-native';
-```
-
-You can get the application window's width and height using the following code:
-
-```tsx
-const windowWidth = Dimensions.get('window').width;
-const windowHeight = Dimensions.get('window').height;
-```
-
-:::note
-Although dimensions are available immediately, they may change (e.g due to device rotation, foldable devices etc) so any rendering logic or styles that depend on these constants should try to call this function on every render, rather than caching the value (for example, using inline styles rather than setting a value in a `StyleSheet`).
-:::
-
-If you are targeting foldable devices or devices which can change the screen size or app window size, you can use the event listener available in the Dimensions module as shown in the below example.
-
-## Example
-
-```SnackPlayer name=Dimensions%20Example
-import React, {useState, useEffect} from 'react';
-import {StyleSheet, Text, Dimensions} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const windowDimensions = Dimensions.get('window');
-const screenDimensions = Dimensions.get('screen');
-
-const App = () => {
-  const [dimensions, setDimensions] = useState({
-    window: windowDimensions,
-    screen: screenDimensions,
-  });
-
-  useEffect(() => {
-    const subscription = Dimensions.addEventListener(
-      'change',
-      ({window, screen}) => {
-        setDimensions({window, screen});
-      },
-    );
-    return () => subscription?.remove();
-  });
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.header}>Window Dimensions</Text>
-        {Object.entries(dimensions.window).map(([key, value]) => (
-          <Text>
-            {key} - {value}
-          </Text>
-        ))}
-        <Text style={styles.header}>Screen Dimensions</Text>
-        {Object.entries(dimensions.screen).map(([key, value]) => (
-          <Text>
-            {key} - {value}
-          </Text>
-        ))}
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  header: {
-    fontSize: 16,
-    marginVertical: 10,
-  },
-});
-
-export default App;
-```
-
-# Reference
-
-## Methods
-
-### `addEventListener()`
-
-```tsx
-static addEventListener(
-  type: 'change',
-  handler: ({
-    window,
-    screen,
-  }: DimensionsValue) => void,
-): EmitterSubscription;
-```
-
-Add an event handler. Supported events:
-
-- `change`: Fires when a property within the `Dimensions` object changes. The argument to the event handler is a [`DimensionsValue`](#dimensionsvalue) type object.
-
----
-
-### `get()`
-
-```tsx
-static get(dim: 'window' | 'screen'): ScaledSize;
-```
-
-Initial dimensions are set before `runApplication` is called so they should be available before any other require's are run, but may be updated later.
-
-Example: `const {height, width} = Dimensions.get('window');`
-
-**Parameters:**
-
-| Name                                                               | Type   | Description                                                                       |
-| ------------------------------------------------------------------ | ------ | --------------------------------------------------------------------------------- |
-| dim <div className="label basic required two-lines">Required</div> | string | Name of dimension as defined when calling `set`. Returns value for the dimension. |
-
-:::note
-For Android the `window` dimension will be reduced by the size of status bar (if not translucent) and bottom navigation bar.
-:::
-
-## Type Definitions
-
-### DimensionsValue
-
-**Properties:**
-
-| Name   | Type                                | Description                             |
-| ------ | ----------------------------------- | --------------------------------------- |
-| window | [ScaledSize](dimensions#scaledsize) | Size of the visible Application window. |
-| screen | [ScaledSize](dimensions#scaledsize) | Size of the device's screen.            |
-
-### ScaledSize
-
-| Type   |
-| ------ |
-| object |
-
-**Properties:**
-
-| Name      | Type   |
-| --------- | ------ |
-| width     | number |
-| height    | number |
-| scale     | number |
-| fontScale | number |
+---
+id: dimensions
+title: Dimensions
+---
+
+:::info
+[`useWindowDimensions`](usewindowdimensions) is the preferred API for React components. Unlike `Dimensions`, it updates as the window's dimensions update. This works nicely with the React paradigm.
+:::
+
+```tsx
+import {Dimensions} from 'react-native';
+```
+
+You can get the application window's width and height using the following code:
+
+```tsx
+const windowWidth = Dimensions.get('window').width;
+const windowHeight = Dimensions.get('window').height;
+```
+
+:::note
+Although dimensions are available immediately, they may change (e.g due to device rotation, foldable devices etc) so any rendering logic or styles that depend on these constants should try to call this function on every render, rather than caching the value (for example, using inline styles rather than setting a value in a `StyleSheet`).
+:::
+
+If you are targeting foldable devices or devices which can change the screen size or app window size, you can use the event listener available in the Dimensions module as shown in the below example.
+
+## Example
+
+```SnackPlayer name=Dimensions%20Example
+import {useState, useEffect} from 'react';
+import {StyleSheet, Text, Dimensions} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const windowDimensions = Dimensions.get('window');
+const screenDimensions = Dimensions.get('screen');
+
+const App = () => {
+  const [dimensions, setDimensions] = useState({
+    window: windowDimensions,
+    screen: screenDimensions,
+  });
+
+  useEffect(() => {
+    const subscription = Dimensions.addEventListener(
+      'change',
+      ({window, screen}) => {
+        setDimensions({window, screen});
+      },
+    );
+    return () => subscription?.remove();
+  });
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.header}>Window Dimensions</Text>
+        {Object.entries(dimensions.window).map(([key, value]) => (
+          <Text>
+            {key} - {value}
+          </Text>
+        ))}
+        <Text style={styles.header}>Screen Dimensions</Text>
+        {Object.entries(dimensions.screen).map(([key, value]) => (
+          <Text>
+            {key} - {value}
+          </Text>
+        ))}
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  header: {
+    fontSize: 16,
+    marginVertical: 10,
+  },
+});
+
+export default App;
+```
+
+# Reference
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+  type: 'change',
+  handler: ({
+    window,
+    screen,
+  }: DimensionsValue) => void,
+): EmitterSubscription;
+```
+
+Add an event handler. Supported events:
+
+- `change`: Fires when a property within the `Dimensions` object changes. The argument to the event handler is a [`DimensionsValue`](#dimensionsvalue) type object.
+
+---
+
+### `get()`
+
+```tsx
+static get(dim: 'window' | 'screen'): ScaledSize;
+```
+
+Initial dimensions are set before `runApplication` is called so they should be available before any other require's are run, but may be updated later.
+
+Example: `const {height, width} = Dimensions.get('window');`
+
+**Parameters:**
+
+| Name                                                               | Type   | Description                                                                       |
+| ------------------------------------------------------------------ | ------ | --------------------------------------------------------------------------------- |
+| dim <div className="label basic required two-lines">Required</div> | string | Name of dimension as defined when calling `set`. Returns value for the dimension. |
+
+:::note
+For Android the `window` dimension will be reduced by the size of status bar (if not translucent) and bottom navigation bar.
+:::
+
+## Type Definitions
+
+### DimensionsValue
+
+**Properties:**
+
+| Name   | Type                                | Description                             |
+| ------ | ----------------------------------- | --------------------------------------- |
+| window | [ScaledSize](dimensions#scaledsize) | Size of the visible Application window. |
+| screen | [ScaledSize](dimensions#scaledsize) | Size of the device's screen.            |
+
+### ScaledSize
+
+| Type   |
+| ------ |
+| object |
+
+**Properties:**
+
+| Name      | Type   |
+| --------- | ------ |
+| width     | number |
+| height    | number |
+| scale     | number |
+| fontScale | number |
diff --git a/website/versioned_docs/version-0.82/document-nodes.md b/website/versioned_docs/version-0.82/document-nodes.md
index 978ef87a1f8..6c6ab4a7452 100644
--- a/website/versioned_docs/version-0.82/document-nodes.md
+++ b/website/versioned_docs/version-0.82/document-nodes.md
@@ -1,75 +1,75 @@
----
-id: document-nodes
-title: Document nodes
----
-
-Document nodes represent a complete native view tree. Apps using native navigation would provide a separate document node for each screen. Apps not using native navigation would generally provide a single document for the whole app (similar to single-page apps on Web).
-
-```SnackPlayer ext=js&name=Document%20instance%20example
-import * as React from 'react';
-import {Text, TextInput, View} from 'react-native';
-
-function MyComponent(props) {
-  return (
-    <View ref={props.ref}>
-      <Text>Start typing below</Text>
-      <TextInput id="main-text-input" />
-    </View>
-  )
-}
-
-export default function AccessingDocument() {
-  const ref = React.useRef(null);
-
-  React.useEffect(() => {
-    // Get the main text input in the screen and focus it after initial load.
-    const element = ref.current;
-    const doc = element.ownerDocument;
-    const textInput = doc.getElementById('main-text-input');
-    textInput?.focus();
-  }, []);
-
-  return (
-    <MyComponent ref={ref} />
-  );
-}
-```
-
----
-
-## Reference
-
-### Web-compatible API
-
-From [`Document`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement):
-
-- Properties
-  - [`childElementCount`](https://developer.mozilla.org/en-US/docs/Web/API/Document/childElementCount)
-  - [`children`](https://developer.mozilla.org/en-US/docs/Web/API/Document/children)
-  - [`documentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/documentElement)
-  - [`firstElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Document/firstElementChild)
-  - [`lastElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Document/lastElementChild)
-- Methods
-  - [`getElementById()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)
-
-From [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/Node):
-
-- Properties
-  - [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)
-  - [`firstChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild)
-  - [`isConnected`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected)
-  - [`lastChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild)
-  - [`nextSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling)
-  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
-  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
-  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
-  - [`ownerDocument`](https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument)
-  - [`parentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)
-  - [`parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)
-  - [`previousSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling)
-  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
-- Methods
-  - [`compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
-  - [`contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains)
-  - [`getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)
-  - [`hasChildNodes()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes)
+---
+id: document-nodes
+title: Document nodes
+---
+
+Document nodes represent a complete native view tree. Apps using native navigation would provide a separate document node for each screen. Apps not using native navigation would generally provide a single document for the whole app (similar to single-page apps on Web).
+
+```SnackPlayer ext=js&name=Document%20instance%20example
+import {useEffect, useRef} from 'react';
+import {Text, TextInput, View} from 'react-native';
+
+function MyComponent(props) {
+  return (
+    <View ref={props.ref}>
+      <Text>Start typing below</Text>
+      <TextInput id="main-text-input" />
+    </View>
+  )
+}
+
+export default function AccessingDocument() {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    // Get the main text input in the screen and focus it after initial load.
+    const element = ref.current;
+    const doc = element.ownerDocument;
+    const textInput = doc.getElementById('main-text-input');
+    textInput?.focus();
+  }, []);
+
+  return (
+    <MyComponent ref={ref} />
+  );
+}
+```
+
+---
+
+## Reference
+
+### Web-compatible API
+
+From [`Document`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement):
+
+- Properties
+  - [`childElementCount`](https://developer.mozilla.org/en-US/docs/Web/API/Document/childElementCount)
+  - [`children`](https://developer.mozilla.org/en-US/docs/Web/API/Document/children)
+  - [`documentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/documentElement)
+  - [`firstElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Document/firstElementChild)
+  - [`lastElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Document/lastElementChild)
+- Methods
+  - [`getElementById()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)
+
+From [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/Node):
+
+- Properties
+  - [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)
+  - [`firstChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild)
+  - [`isConnected`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected)
+  - [`lastChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild)
+  - [`nextSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling)
+  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
+  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
+  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
+  - [`ownerDocument`](https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument)
+  - [`parentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)
+  - [`parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)
+  - [`previousSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling)
+  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
+- Methods
+  - [`compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
+  - [`contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains)
+  - [`getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)
+  - [`hasChildNodes()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes)
diff --git a/website/versioned_docs/version-0.82/drawerlayoutandroid.md b/website/versioned_docs/version-0.82/drawerlayoutandroid.md
index 3714318df5c..76b4c507c6a 100644
--- a/website/versioned_docs/version-0.82/drawerlayoutandroid.md
+++ b/website/versioned_docs/version-0.82/drawerlayoutandroid.md
@@ -1,323 +1,323 @@
----
-id: drawerlayoutandroid
-title: DrawerLayoutAndroid
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-React component that wraps the platform `DrawerLayout` (Android only). The Drawer (typically used for navigation) is rendered with `renderNavigationView` and direct children are the main view (where your content goes). The navigation view is initially not visible on the screen, but can be pulled in from the side of the window specified by the `drawerPosition` prop and its width can be set by the `drawerWidth` prop.
-
-## Example
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android&ext=js
-import React, {useRef, useState} from 'react';
-import {Button, DrawerLayoutAndroid, Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const drawer = useRef(null);
-  const [drawerPosition, setDrawerPosition] = useState('left');
-  const changeDrawerPosition = () => {
-    if (drawerPosition === 'left') {
-      setDrawerPosition('right');
-    } else {
-      setDrawerPosition('left');
-    }
-  };
-
-  const navigationView = () => (
-    <SafeAreaView style={[styles.container, styles.navigationContainer]}>
-      <Text style={styles.paragraph}>I'm in the Drawer!</Text>
-      <Button
-        title="Close drawer"
-        onPress={() => drawer.current.closeDrawer()}
-      />
-    </SafeAreaView>
-  );
-
-  return (
-    <SafeAreaProvider>
-      <DrawerLayoutAndroid
-        ref={drawer}
-        drawerWidth={300}
-        drawerPosition={drawerPosition}
-        renderNavigationView={navigationView}>
-        <SafeAreaView style={styles.container}>
-          <Text style={styles.paragraph}>Drawer on the {drawerPosition}!</Text>
-          <Button
-            title="Change Drawer Position"
-            onPress={() => changeDrawerPosition()}
-          />
-          <Text style={styles.paragraph}>
-            Swipe from the side or press button below to see it!
-          </Text>
-          <Button
-            title="Open drawer"
-            onPress={() => drawer.current.openDrawer()}
-          />
-        </SafeAreaView>
-      </DrawerLayoutAndroid>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingHorizontal: 16,
-  },
-  navigationContainer: {
-    backgroundColor: '#ecf0f1',
-  },
-  paragraph: {
-    padding: 16,
-    fontSize: 15,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android&ext=tsx
-import React, {useRef, useState} from 'react';
-import {
-  Button,
-  DrawerLayoutAndroid,
-  Text,
-  StyleSheet,
-  View,
-} from 'react-native';
-
-const App = () => {
-  const drawer = useRef<DrawerLayoutAndroid>(null);
-  const [drawerPosition, setDrawerPosition] = useState<'left' | 'right'>(
-    'left',
-  );
-  const changeDrawerPosition = () => {
-    if (drawerPosition === 'left') {
-      setDrawerPosition('right');
-    } else {
-      setDrawerPosition('left');
-    }
-  };
-
-  const navigationView = () => (
-    <View style={[styles.container, styles.navigationContainer]}>
-      <Text style={styles.paragraph}>I'm in the Drawer!</Text>
-      <Button
-        title="Close drawer"
-        onPress={() => drawer.current?.closeDrawer()}
-      />
-    </View>
-  );
-
-  return (
-    <DrawerLayoutAndroid
-      ref={drawer}
-      drawerWidth={300}
-      drawerPosition={drawerPosition}
-      renderNavigationView={navigationView}>
-      <View style={styles.container}>
-        <Text style={styles.paragraph}>Drawer on the {drawerPosition}!</Text>
-        <Button
-          title="Change Drawer Position"
-          onPress={() => changeDrawerPosition()}
-        />
-        <Text style={styles.paragraph}>
-          Swipe from the side or press button below to see it!
-        </Text>
-        <Button
-          title="Open drawer"
-          onPress={() => drawer.current?.openDrawer()}
-        />
-      </View>
-    </DrawerLayoutAndroid>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 16,
-  },
-  navigationContainer: {
-    backgroundColor: '#ecf0f1',
-  },
-  paragraph: {
-    padding: 16,
-    fontSize: 15,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
----
-
-# Reference
-
-## Props
-
-### [View Props](view.md#props)
-
-Inherits [View Props](view.md#props).
-
----
-
-### `drawerBackgroundColor`
-
-Specifies the background color of the drawer. The default value is `white`. If you want to set the opacity of the drawer, use rgba. Example:
-
-```tsx
-return (
-  <DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)" />
-);
-```
-
-| Type               | Required |
-| ------------------ | -------- |
-| [color](colors.md) | No       |
-
----
-
-### `drawerLockMode`
-
-Specifies the lock mode of the drawer. The drawer can be locked in 3 states:
-
-- unlocked (default), meaning that the drawer will respond (open/close) to touch gestures.
-- locked-closed, meaning that the drawer will stay closed and not respond to gestures.
-- locked-open, meaning that the drawer will stay opened and not respond to gestures. The drawer may still be opened and closed programmatically (`openDrawer`/`closeDrawer`).
-
-| Type                                             | Required |
-| ------------------------------------------------ | -------- |
-| enum('unlocked', 'locked-closed', 'locked-open') | No       |
-
----
-
-### `drawerPosition`
-
-Specifies the side of the screen from which the drawer will slide in. By default it is set to `left`.
-
-| Type                  | Required |
-| --------------------- | -------- |
-| enum('left', 'right') | No       |
-
----
-
-### `drawerWidth`
-
-Specifies the width of the drawer, more precisely the width of the view that be pulled in from the edge of the window.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `keyboardDismissMode`
-
-Determines whether the keyboard gets dismissed in response to a drag.
-
-- 'none' (the default), drags do not dismiss the keyboard.
-- 'on-drag', the keyboard is dismissed when a drag begins.
-
-| Type                    | Required |
-| ----------------------- | -------- |
-| enum('none', 'on-drag') | No       |
-
----
-
-### `onDrawerClose`
-
-Function called whenever the navigation view has been closed.
-
-| Type     | Required |
-| -------- | -------- |
-| function | No       |
-
----
-
-### `onDrawerOpen`
-
-Function called whenever the navigation view has been opened.
-
-| Type     | Required |
-| -------- | -------- |
-| function | No       |
-
----
-
-### `onDrawerSlide`
-
-Function called whenever there is an interaction with the navigation view.
-
-| Type     | Required |
-| -------- | -------- |
-| function | No       |
-
----
-
-### `onDrawerStateChanged`
-
-Function called when the drawer state has changed. The drawer can be in 3 states:
-
-- idle, meaning there is no interaction with the navigation view happening at the time
-- dragging, meaning there is currently an interaction with the navigation view
-- settling, meaning that there was an interaction with the navigation view, and the navigation view is now finishing its closing or opening animation
-
-| Type     | Required |
-| -------- | -------- |
-| function | No       |
-
----
-
-### `renderNavigationView`
-
-The navigation view that will be rendered to the side of the screen and can be pulled in.
-
-| Type     | Required |
-| -------- | -------- |
-| function | Yes      |
-
----
-
-### `statusBarBackgroundColor`
-
-Make the drawer take the entire screen and draw the background of the status bar to allow it to open over the status bar. It will only have an effect on API 21+.
-
-| Type               | Required |
-| ------------------ | -------- |
-| [color](colors.md) | No       |
-
-## Methods
-
-### `closeDrawer()`
-
-```tsx
-closeDrawer();
-```
-
-Closes the drawer.
-
----
-
-### `openDrawer()`
-
-```tsx
-openDrawer();
-```
-
-Opens the drawer.
+---
+id: drawerlayoutandroid
+title: DrawerLayoutAndroid
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+React component that wraps the platform `DrawerLayout` (Android only). The Drawer (typically used for navigation) is rendered with `renderNavigationView` and direct children are the main view (where your content goes). The navigation view is initially not visible on the screen, but can be pulled in from the side of the window specified by the `drawerPosition` prop and its width can be set by the `drawerWidth` prop.
+
+## Example
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android&ext=js
+import {useRef, useState} from 'react';
+import {Button, DrawerLayoutAndroid, Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const drawer = useRef(null);
+  const [drawerPosition, setDrawerPosition] = useState('left');
+  const changeDrawerPosition = () => {
+    if (drawerPosition === 'left') {
+      setDrawerPosition('right');
+    } else {
+      setDrawerPosition('left');
+    }
+  };
+
+  const navigationView = () => (
+    <SafeAreaView style={[styles.container, styles.navigationContainer]}>
+      <Text style={styles.paragraph}>I'm in the Drawer!</Text>
+      <Button
+        title="Close drawer"
+        onPress={() => drawer.current.closeDrawer()}
+      />
+    </SafeAreaView>
+  );
+
+  return (
+    <SafeAreaProvider>
+      <DrawerLayoutAndroid
+        ref={drawer}
+        drawerWidth={300}
+        drawerPosition={drawerPosition}
+        renderNavigationView={navigationView}>
+        <SafeAreaView style={styles.container}>
+          <Text style={styles.paragraph}>Drawer on the {drawerPosition}!</Text>
+          <Button
+            title="Change Drawer Position"
+            onPress={() => changeDrawerPosition()}
+          />
+          <Text style={styles.paragraph}>
+            Swipe from the side or press button below to see it!
+          </Text>
+          <Button
+            title="Open drawer"
+            onPress={() => drawer.current.openDrawer()}
+          />
+        </SafeAreaView>
+      </DrawerLayoutAndroid>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 16,
+  },
+  navigationContainer: {
+    backgroundColor: '#ecf0f1',
+  },
+  paragraph: {
+    padding: 16,
+    fontSize: 15,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android&ext=tsx
+import {useRef, useState} from 'react';
+import {
+  Button,
+  DrawerLayoutAndroid,
+  Text,
+  StyleSheet,
+  View,
+} from 'react-native';
+
+const App = () => {
+  const drawer = useRef<DrawerLayoutAndroid>(null);
+  const [drawerPosition, setDrawerPosition] = useState<'left' | 'right'>(
+    'left',
+  );
+  const changeDrawerPosition = () => {
+    if (drawerPosition === 'left') {
+      setDrawerPosition('right');
+    } else {
+      setDrawerPosition('left');
+    }
+  };
+
+  const navigationView = () => (
+    <View style={[styles.container, styles.navigationContainer]}>
+      <Text style={styles.paragraph}>I'm in the Drawer!</Text>
+      <Button
+        title="Close drawer"
+        onPress={() => drawer.current?.closeDrawer()}
+      />
+    </View>
+  );
+
+  return (
+    <DrawerLayoutAndroid
+      ref={drawer}
+      drawerWidth={300}
+      drawerPosition={drawerPosition}
+      renderNavigationView={navigationView}>
+      <View style={styles.container}>
+        <Text style={styles.paragraph}>Drawer on the {drawerPosition}!</Text>
+        <Button
+          title="Change Drawer Position"
+          onPress={() => changeDrawerPosition()}
+        />
+        <Text style={styles.paragraph}>
+          Swipe from the side or press button below to see it!
+        </Text>
+        <Button
+          title="Open drawer"
+          onPress={() => drawer.current?.openDrawer()}
+        />
+      </View>
+    </DrawerLayoutAndroid>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 16,
+  },
+  navigationContainer: {
+    backgroundColor: '#ecf0f1',
+  },
+  paragraph: {
+    padding: 16,
+    fontSize: 15,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+---
+
+# Reference
+
+## Props
+
+### [View Props](view.md#props)
+
+Inherits [View Props](view.md#props).
+
+---
+
+### `drawerBackgroundColor`
+
+Specifies the background color of the drawer. The default value is `white`. If you want to set the opacity of the drawer, use rgba. Example:
+
+```tsx
+return (
+  <DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)" />
+);
+```
+
+| Type               | Required |
+| ------------------ | -------- |
+| [color](colors.md) | No       |
+
+---
+
+### `drawerLockMode`
+
+Specifies the lock mode of the drawer. The drawer can be locked in 3 states:
+
+- unlocked (default), meaning that the drawer will respond (open/close) to touch gestures.
+- locked-closed, meaning that the drawer will stay closed and not respond to gestures.
+- locked-open, meaning that the drawer will stay opened and not respond to gestures. The drawer may still be opened and closed programmatically (`openDrawer`/`closeDrawer`).
+
+| Type                                             | Required |
+| ------------------------------------------------ | -------- |
+| enum('unlocked', 'locked-closed', 'locked-open') | No       |
+
+---
+
+### `drawerPosition`
+
+Specifies the side of the screen from which the drawer will slide in. By default it is set to `left`.
+
+| Type                  | Required |
+| --------------------- | -------- |
+| enum('left', 'right') | No       |
+
+---
+
+### `drawerWidth`
+
+Specifies the width of the drawer, more precisely the width of the view that be pulled in from the edge of the window.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `keyboardDismissMode`
+
+Determines whether the keyboard gets dismissed in response to a drag.
+
+- 'none' (the default), drags do not dismiss the keyboard.
+- 'on-drag', the keyboard is dismissed when a drag begins.
+
+| Type                    | Required |
+| ----------------------- | -------- |
+| enum('none', 'on-drag') | No       |
+
+---
+
+### `onDrawerClose`
+
+Function called whenever the navigation view has been closed.
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `onDrawerOpen`
+
+Function called whenever the navigation view has been opened.
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `onDrawerSlide`
+
+Function called whenever there is an interaction with the navigation view.
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `onDrawerStateChanged`
+
+Function called when the drawer state has changed. The drawer can be in 3 states:
+
+- idle, meaning there is no interaction with the navigation view happening at the time
+- dragging, meaning there is currently an interaction with the navigation view
+- settling, meaning that there was an interaction with the navigation view, and the navigation view is now finishing its closing or opening animation
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `renderNavigationView`
+
+The navigation view that will be rendered to the side of the screen and can be pulled in.
+
+| Type     | Required |
+| -------- | -------- |
+| function | Yes      |
+
+---
+
+### `statusBarBackgroundColor`
+
+Make the drawer take the entire screen and draw the background of the status bar to allow it to open over the status bar. It will only have an effect on API 21+.
+
+| Type               | Required |
+| ------------------ | -------- |
+| [color](colors.md) | No       |
+
+## Methods
+
+### `closeDrawer()`
+
+```tsx
+closeDrawer();
+```
+
+Closes the drawer.
+
+---
+
+### `openDrawer()`
+
+```tsx
+openDrawer();
+```
+
+Opens the drawer.
diff --git a/website/versioned_docs/version-0.82/easing.md b/website/versioned_docs/version-0.82/easing.md
index bb31dd0e4fa..097da0dfc8a 100644
--- a/website/versioned_docs/version-0.82/easing.md
+++ b/website/versioned_docs/version-0.82/easing.md
@@ -1,568 +1,568 @@
----
-id: easing
-title: Easing
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-The `Easing` module implements common easing functions. This module is used by [`Animated.timing()`](animated.md#timing) to convey physically believable motion in animations.
-
-You can find a visualization of some common easing functions at https://easings.net/
-
-### Predefined animations
-
-The `Easing` module provides several predefined animations through the following methods:
-
-- [`back`](easing.md#back) provides a basic animation where the object goes slightly back before moving forward
-- [`bounce`](easing.md#bounce) provides a bouncing animation
-- [`ease`](easing.md#ease) provides a basic inertial animation
-- [`elastic`](easing.md#elastic) provides a basic spring interaction
-
-### Standard functions
-
-Three standard easing functions are provided:
-
-- [`linear`](easing.md#linear)
-- [`quad`](easing.md#quad)
-- [`cubic`](easing.md#cubic)
-
-The [`poly`](easing.md#poly) function can be used to implement quartic, quintic, and other higher power functions.
-
-### Additional functions
-
-Additional mathematical functions are provided by the following methods:
-
-- [`bezier`](easing.md#bezier) provides a cubic bezier curve
-- [`circle`](easing.md#circle) provides a circular function
-- [`sin`](easing.md#sin) provides a sinusoidal function
-- [`exp`](easing.md#exp) provides an exponential function
-
-The following helpers are used to modify other easing functions.
-
-- [`in`](easing.md#in) runs an easing function forwards
-- [`inOut`](easing.md#inout) makes any easing function symmetrical
-- [`out`](easing.md#out) runs an easing function backwards
-
-## Example
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Easing%20Demo&ext=js
-import React, {useRef} from 'react';
-import {
-  Animated,
-  Easing,
-  SectionList,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const opacity = useRef(new Animated.Value(0)).current;
-
-  const animate = easing => {
-    opacity.setValue(0);
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration: 1200,
-      easing,
-      useNativeDriver: false,
-    }).start();
-  };
-
-  const size = opacity.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 80],
-  });
-
-  const animatedStyles = [
-    styles.box,
-    {
-      opacity,
-      width: size,
-      height: size,
-    },
-  ];
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container} edges={['right', 'top', 'left']}>
-        <StatusBar hidden={true} />
-        <Text style={styles.title}>
-          Press rows below to preview the Easing!
-        </Text>
-        <View style={styles.boxContainer}>
-          <Animated.View style={animatedStyles} />
-        </View>
-        <SectionList
-          style={styles.list}
-          sections={SECTIONS}
-          keyExtractor={item => item.title}
-          renderItem={({item}) => (
-            <TouchableOpacity
-              onPress={() => animate(item.easing)}
-              style={styles.listRow}>
-              <Text>{item.title}</Text>
-            </TouchableOpacity>
-          )}
-          renderSectionHeader={({section: {title}}) => (
-            <Text style={styles.listHeader}>{title}</Text>
-          )}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const SECTIONS = [
-  {
-    title: 'Predefined animations',
-    data: [
-      {title: 'Bounce', easing: Easing.bounce},
-      {title: 'Ease', easing: Easing.ease},
-      {title: 'Elastic', easing: Easing.elastic(4)},
-    ],
-  },
-  {
-    title: 'Standard functions',
-    data: [
-      {title: 'Linear', easing: Easing.linear},
-      {title: 'Quad', easing: Easing.quad},
-      {title: 'Cubic', easing: Easing.cubic},
-    ],
-  },
-  {
-    title: 'Additional functions',
-    data: [
-      {
-        title: 'Bezier',
-        easing: Easing.bezier(0, 2, 1, -1),
-      },
-      {title: 'Circle', easing: Easing.circle},
-      {title: 'Sin', easing: Easing.sin},
-      {title: 'Exp', easing: Easing.exp},
-    ],
-  },
-  {
-    title: 'Combinations',
-    data: [
-      {
-        title: 'In + Bounce',
-        easing: Easing.in(Easing.bounce),
-      },
-      {
-        title: 'Out + Exp',
-        easing: Easing.out(Easing.exp),
-      },
-      {
-        title: 'InOut + Elastic',
-        easing: Easing.inOut(Easing.elastic(1)),
-      },
-    ],
-  },
-];
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#20232a',
-  },
-  title: {
-    marginTop: 10,
-    textAlign: 'center',
-    color: '#61dafb',
-  },
-  boxContainer: {
-    height: 160,
-    alignItems: 'center',
-  },
-  box: {
-    marginTop: 32,
-    borderRadius: 4,
-    backgroundColor: '#61dafb',
-  },
-  list: {
-    backgroundColor: '#fff',
-  },
-  listHeader: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    backgroundColor: '#f4f4f4',
-    color: '#999',
-    fontSize: 12,
-    textTransform: 'uppercase',
-  },
-  listRow: {
-    padding: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Easing%20Demo&ext=tsx
-import React, {useRef} from 'react';
-import {
-  Animated,
-  Easing,
-  SectionList,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-  type EasingFunction,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const opacity = useRef(new Animated.Value(0)).current;
-
-  const animate = (easing: EasingFunction) => {
-    opacity.setValue(0);
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration: 1200,
-      easing,
-      useNativeDriver: false,
-    }).start();
-  };
-
-  const size = opacity.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 80],
-  });
-
-  const animatedStyles = [
-    styles.box,
-    {
-      opacity,
-      width: size,
-      height: size,
-    },
-  ];
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container} edges={['right', 'top', 'left']}>
-        <StatusBar hidden={true} />
-        <Text style={styles.title}>
-          Press rows below to preview the Easing!
-        </Text>
-        <View style={styles.boxContainer}>
-          <Animated.View style={animatedStyles} />
-        </View>
-        <SectionList
-          style={styles.list}
-          sections={SECTIONS}
-          keyExtractor={item => item.title}
-          renderItem={({item}) => (
-            <TouchableOpacity
-              onPress={() => animate(item.easing)}
-              style={styles.listRow}>
-              <Text>{item.title}</Text>
-            </TouchableOpacity>
-          )}
-          renderSectionHeader={({section: {title}}) => (
-            <Text style={styles.listHeader}>{title}</Text>
-          )}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const SECTIONS = [
-  {
-    title: 'Predefined animations',
-    data: [
-      {title: 'Bounce', easing: Easing.bounce},
-      {title: 'Ease', easing: Easing.ease},
-      {title: 'Elastic', easing: Easing.elastic(4)},
-    ],
-  },
-  {
-    title: 'Standard functions',
-    data: [
-      {title: 'Linear', easing: Easing.linear},
-      {title: 'Quad', easing: Easing.quad},
-      {title: 'Cubic', easing: Easing.cubic},
-    ],
-  },
-  {
-    title: 'Additional functions',
-    data: [
-      {
-        title: 'Bezier',
-        easing: Easing.bezier(0, 2, 1, -1),
-      },
-      {title: 'Circle', easing: Easing.circle},
-      {title: 'Sin', easing: Easing.sin},
-      {title: 'Exp', easing: Easing.exp},
-    ],
-  },
-  {
-    title: 'Combinations',
-    data: [
-      {
-        title: 'In + Bounce',
-        easing: Easing.in(Easing.bounce),
-      },
-      {
-        title: 'Out + Exp',
-        easing: Easing.out(Easing.exp),
-      },
-      {
-        title: 'InOut + Elastic',
-        easing: Easing.inOut(Easing.elastic(1)),
-      },
-    ],
-  },
-];
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#20232a',
-  },
-  title: {
-    marginTop: 10,
-    textAlign: 'center',
-    color: '#61dafb',
-  },
-  boxContainer: {
-    height: 160,
-    alignItems: 'center',
-  },
-  box: {
-    marginTop: 32,
-    borderRadius: 4,
-    backgroundColor: '#61dafb',
-  },
-  list: {
-    backgroundColor: '#fff',
-  },
-  listHeader: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    backgroundColor: '#f4f4f4',
-    color: '#999',
-    fontSize: 12,
-    textTransform: 'uppercase',
-  },
-  listRow: {
-    padding: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
----
-
-# Reference
-
-## Methods
-
-### `step0()`
-
-```tsx
-static step0(n: number);
-```
-
-A stepping function, returns 1 for any positive value of `n`.
-
----
-
-### `step1()`
-
-```tsx
-static step1(n: number);
-```
-
-A stepping function, returns 1 if `n` is greater than or equal to 1.
-
----
-
-### `linear()`
-
-```tsx
-static linear(t: number);
-```
-
-A linear function, `f(t) = t`. Position correlates to elapsed time one to one.
-
-https://cubic-bezier.com/#0,0,1,1
-
----
-
-### `ease()`
-
-```tsx
-static ease(t: number);
-```
-
-A basic inertial interaction, similar to an object slowly accelerating to speed.
-
-https://cubic-bezier.com/#.42,0,1,1
-
----
-
-### `quad()`
-
-```tsx
-static quad(t: number);
-```
-
-A quadratic function, `f(t) = t * t`. Position equals the square of elapsed time.
-
-https://easings.net/#easeInQuad
-
----
-
-### `cubic()`
-
-```tsx
-static cubic(t: number);
-```
-
-A cubic function, `f(t) = t * t * t`. Position equals the cube of elapsed time.
-
-https://easings.net/#easeInCubic
-
----
-
-### `poly()`
-
-```tsx
-static poly(n: number);
-```
-
-A power function. Position is equal to the Nth power of elapsed time.
-
-n = 4: https://easings.net/#easeInQuart n = 5: https://easings.net/#easeInQuint
-
----
-
-### `sin()`
-
-```tsx
-static sin(t: number);
-```
-
-A sinusoidal function.
-
-https://easings.net/#easeInSine
-
----
-
-### `circle()`
-
-```tsx
-static circle(t: number);
-```
-
-A circular function.
-
-https://easings.net/#easeInCirc
-
----
-
-### `exp()`
-
-```tsx
-static exp(t: number);
-```
-
-An exponential function.
-
-https://easings.net/#easeInExpo
-
----
-
-### `elastic()`
-
-```tsx
-static elastic(bounciness: number);
-```
-
-A basic elastic interaction, similar to a spring oscillating back and forth.
-
-Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.
-
-https://easings.net/#easeInElastic
-
----
-
-### `back()`
-
-```tsx
-static back(s)
-```
-
-Use with `Animated.parallel()` to create a basic effect where the object animates back slightly as the animation starts.
-
----
-
-### `bounce()`
-
-```tsx
-static bounce(t: number);
-```
-
-Provides a basic bouncing effect.
-
-https://easings.net/#easeInBounce
-
----
-
-### `bezier()`
-
-```tsx
-static bezier(x1: number, y1: number, x2: number, y2: number);
-```
-
-Provides a cubic bezier curve, equivalent to CSS Transitions' `transition-timing-function`.
-
-A useful tool to visualize cubic bezier curves can be found at https://cubic-bezier.com/
-
----
-
-### `in()`
-
-```tsx
-static in(easing: number);
-```
-
-Runs an easing function forwards.
-
----
-
-### `out()`
-
-```tsx
-static out(easing: number);
-```
-
-Runs an easing function backwards.
-
----
-
-### `inOut()`
-
-```tsx
-static inOut(easing: number);
-```
-
-Makes any easing function symmetrical. The easing function will run forwards for half of the duration, then backwards for the rest of the duration.
+---
+id: easing
+title: Easing
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+The `Easing` module implements common easing functions. This module is used by [`Animated.timing()`](animated.md#timing) to convey physically believable motion in animations.
+
+You can find a visualization of some common easing functions at https://easings.net/
+
+### Predefined animations
+
+The `Easing` module provides several predefined animations through the following methods:
+
+- [`back`](easing.md#back) provides a basic animation where the object goes slightly back before moving forward
+- [`bounce`](easing.md#bounce) provides a bouncing animation
+- [`ease`](easing.md#ease) provides a basic inertial animation
+- [`elastic`](easing.md#elastic) provides a basic spring interaction
+
+### Standard functions
+
+Three standard easing functions are provided:
+
+- [`linear`](easing.md#linear)
+- [`quad`](easing.md#quad)
+- [`cubic`](easing.md#cubic)
+
+The [`poly`](easing.md#poly) function can be used to implement quartic, quintic, and other higher power functions.
+
+### Additional functions
+
+Additional mathematical functions are provided by the following methods:
+
+- [`bezier`](easing.md#bezier) provides a cubic bezier curve
+- [`circle`](easing.md#circle) provides a circular function
+- [`sin`](easing.md#sin) provides a sinusoidal function
+- [`exp`](easing.md#exp) provides an exponential function
+
+The following helpers are used to modify other easing functions.
+
+- [`in`](easing.md#in) runs an easing function forwards
+- [`inOut`](easing.md#inout) makes any easing function symmetrical
+- [`out`](easing.md#out) runs an easing function backwards
+
+## Example
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Easing%20Demo&ext=js
+import {useRef} from 'react';
+import {
+  Animated,
+  Easing,
+  SectionList,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  const animate = easing => {
+    opacity.setValue(0);
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration: 1200,
+      easing,
+      useNativeDriver: false,
+    }).start();
+  };
+
+  const size = opacity.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 80],
+  });
+
+  const animatedStyles = [
+    styles.box,
+    {
+      opacity,
+      width: size,
+      height: size,
+    },
+  ];
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container} edges={['right', 'top', 'left']}>
+        <StatusBar hidden={true} />
+        <Text style={styles.title}>
+          Press rows below to preview the Easing!
+        </Text>
+        <View style={styles.boxContainer}>
+          <Animated.View style={animatedStyles} />
+        </View>
+        <SectionList
+          style={styles.list}
+          sections={SECTIONS}
+          keyExtractor={item => item.title}
+          renderItem={({item}) => (
+            <TouchableOpacity
+              onPress={() => animate(item.easing)}
+              style={styles.listRow}>
+              <Text>{item.title}</Text>
+            </TouchableOpacity>
+          )}
+          renderSectionHeader={({section: {title}}) => (
+            <Text style={styles.listHeader}>{title}</Text>
+          )}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const SECTIONS = [
+  {
+    title: 'Predefined animations',
+    data: [
+      {title: 'Bounce', easing: Easing.bounce},
+      {title: 'Ease', easing: Easing.ease},
+      {title: 'Elastic', easing: Easing.elastic(4)},
+    ],
+  },
+  {
+    title: 'Standard functions',
+    data: [
+      {title: 'Linear', easing: Easing.linear},
+      {title: 'Quad', easing: Easing.quad},
+      {title: 'Cubic', easing: Easing.cubic},
+    ],
+  },
+  {
+    title: 'Additional functions',
+    data: [
+      {
+        title: 'Bezier',
+        easing: Easing.bezier(0, 2, 1, -1),
+      },
+      {title: 'Circle', easing: Easing.circle},
+      {title: 'Sin', easing: Easing.sin},
+      {title: 'Exp', easing: Easing.exp},
+    ],
+  },
+  {
+    title: 'Combinations',
+    data: [
+      {
+        title: 'In + Bounce',
+        easing: Easing.in(Easing.bounce),
+      },
+      {
+        title: 'Out + Exp',
+        easing: Easing.out(Easing.exp),
+      },
+      {
+        title: 'InOut + Elastic',
+        easing: Easing.inOut(Easing.elastic(1)),
+      },
+    ],
+  },
+];
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#20232a',
+  },
+  title: {
+    marginTop: 10,
+    textAlign: 'center',
+    color: '#61dafb',
+  },
+  boxContainer: {
+    height: 160,
+    alignItems: 'center',
+  },
+  box: {
+    marginTop: 32,
+    borderRadius: 4,
+    backgroundColor: '#61dafb',
+  },
+  list: {
+    backgroundColor: '#fff',
+  },
+  listHeader: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    backgroundColor: '#f4f4f4',
+    color: '#999',
+    fontSize: 12,
+    textTransform: 'uppercase',
+  },
+  listRow: {
+    padding: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Easing%20Demo&ext=tsx
+import {useRef} from 'react';
+import {
+  Animated,
+  Easing,
+  SectionList,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  type EasingFunction,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  const animate = (easing: EasingFunction) => {
+    opacity.setValue(0);
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration: 1200,
+      easing,
+      useNativeDriver: false,
+    }).start();
+  };
+
+  const size = opacity.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 80],
+  });
+
+  const animatedStyles = [
+    styles.box,
+    {
+      opacity,
+      width: size,
+      height: size,
+    },
+  ];
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container} edges={['right', 'top', 'left']}>
+        <StatusBar hidden={true} />
+        <Text style={styles.title}>
+          Press rows below to preview the Easing!
+        </Text>
+        <View style={styles.boxContainer}>
+          <Animated.View style={animatedStyles} />
+        </View>
+        <SectionList
+          style={styles.list}
+          sections={SECTIONS}
+          keyExtractor={item => item.title}
+          renderItem={({item}) => (
+            <TouchableOpacity
+              onPress={() => animate(item.easing)}
+              style={styles.listRow}>
+              <Text>{item.title}</Text>
+            </TouchableOpacity>
+          )}
+          renderSectionHeader={({section: {title}}) => (
+            <Text style={styles.listHeader}>{title}</Text>
+          )}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const SECTIONS = [
+  {
+    title: 'Predefined animations',
+    data: [
+      {title: 'Bounce', easing: Easing.bounce},
+      {title: 'Ease', easing: Easing.ease},
+      {title: 'Elastic', easing: Easing.elastic(4)},
+    ],
+  },
+  {
+    title: 'Standard functions',
+    data: [
+      {title: 'Linear', easing: Easing.linear},
+      {title: 'Quad', easing: Easing.quad},
+      {title: 'Cubic', easing: Easing.cubic},
+    ],
+  },
+  {
+    title: 'Additional functions',
+    data: [
+      {
+        title: 'Bezier',
+        easing: Easing.bezier(0, 2, 1, -1),
+      },
+      {title: 'Circle', easing: Easing.circle},
+      {title: 'Sin', easing: Easing.sin},
+      {title: 'Exp', easing: Easing.exp},
+    ],
+  },
+  {
+    title: 'Combinations',
+    data: [
+      {
+        title: 'In + Bounce',
+        easing: Easing.in(Easing.bounce),
+      },
+      {
+        title: 'Out + Exp',
+        easing: Easing.out(Easing.exp),
+      },
+      {
+        title: 'InOut + Elastic',
+        easing: Easing.inOut(Easing.elastic(1)),
+      },
+    ],
+  },
+];
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#20232a',
+  },
+  title: {
+    marginTop: 10,
+    textAlign: 'center',
+    color: '#61dafb',
+  },
+  boxContainer: {
+    height: 160,
+    alignItems: 'center',
+  },
+  box: {
+    marginTop: 32,
+    borderRadius: 4,
+    backgroundColor: '#61dafb',
+  },
+  list: {
+    backgroundColor: '#fff',
+  },
+  listHeader: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    backgroundColor: '#f4f4f4',
+    color: '#999',
+    fontSize: 12,
+    textTransform: 'uppercase',
+  },
+  listRow: {
+    padding: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+---
+
+# Reference
+
+## Methods
+
+### `step0()`
+
+```tsx
+static step0(n: number);
+```
+
+A stepping function, returns 1 for any positive value of `n`.
+
+---
+
+### `step1()`
+
+```tsx
+static step1(n: number);
+```
+
+A stepping function, returns 1 if `n` is greater than or equal to 1.
+
+---
+
+### `linear()`
+
+```tsx
+static linear(t: number);
+```
+
+A linear function, `f(t) = t`. Position correlates to elapsed time one to one.
+
+https://cubic-bezier.com/#0,0,1,1
+
+---
+
+### `ease()`
+
+```tsx
+static ease(t: number);
+```
+
+A basic inertial interaction, similar to an object slowly accelerating to speed.
+
+https://cubic-bezier.com/#.42,0,1,1
+
+---
+
+### `quad()`
+
+```tsx
+static quad(t: number);
+```
+
+A quadratic function, `f(t) = t * t`. Position equals the square of elapsed time.
+
+https://easings.net/#easeInQuad
+
+---
+
+### `cubic()`
+
+```tsx
+static cubic(t: number);
+```
+
+A cubic function, `f(t) = t * t * t`. Position equals the cube of elapsed time.
+
+https://easings.net/#easeInCubic
+
+---
+
+### `poly()`
+
+```tsx
+static poly(n: number);
+```
+
+A power function. Position is equal to the Nth power of elapsed time.
+
+n = 4: https://easings.net/#easeInQuart n = 5: https://easings.net/#easeInQuint
+
+---
+
+### `sin()`
+
+```tsx
+static sin(t: number);
+```
+
+A sinusoidal function.
+
+https://easings.net/#easeInSine
+
+---
+
+### `circle()`
+
+```tsx
+static circle(t: number);
+```
+
+A circular function.
+
+https://easings.net/#easeInCirc
+
+---
+
+### `exp()`
+
+```tsx
+static exp(t: number);
+```
+
+An exponential function.
+
+https://easings.net/#easeInExpo
+
+---
+
+### `elastic()`
+
+```tsx
+static elastic(bounciness: number);
+```
+
+A basic elastic interaction, similar to a spring oscillating back and forth.
+
+Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.
+
+https://easings.net/#easeInElastic
+
+---
+
+### `back()`
+
+```tsx
+static back(s)
+```
+
+Use with `Animated.parallel()` to create a basic effect where the object animates back slightly as the animation starts.
+
+---
+
+### `bounce()`
+
+```tsx
+static bounce(t: number);
+```
+
+Provides a basic bouncing effect.
+
+https://easings.net/#easeInBounce
+
+---
+
+### `bezier()`
+
+```tsx
+static bezier(x1: number, y1: number, x2: number, y2: number);
+```
+
+Provides a cubic bezier curve, equivalent to CSS Transitions' `transition-timing-function`.
+
+A useful tool to visualize cubic bezier curves can be found at https://cubic-bezier.com/
+
+---
+
+### `in()`
+
+```tsx
+static in(easing: number);
+```
+
+Runs an easing function forwards.
+
+---
+
+### `out()`
+
+```tsx
+static out(easing: number);
+```
+
+Runs an easing function backwards.
+
+---
+
+### `inOut()`
+
+```tsx
+static inOut(easing: number);
+```
+
+Makes any easing function symmetrical. The easing function will run forwards for half of the duration, then backwards for the rest of the duration.
diff --git a/website/versioned_docs/version-0.82/element-nodes.md b/website/versioned_docs/version-0.82/element-nodes.md
index 3590e06e901..91f1eb7e755 100644
--- a/website/versioned_docs/version-0.82/element-nodes.md
+++ b/website/versioned_docs/version-0.82/element-nodes.md
@@ -1,135 +1,135 @@
----
-id: element-nodes
-title: Element nodes
----
-
-Element nodes represent native components in the native view tree (similar to [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) nodes on Web).
-
-They are provided by all native components, and by many built-in components, via refs:
-
-```SnackPlayer ext=js&name=Element%20instances%20example
-import * as React from 'react';
-import { View, SafeAreaView, StyleSheet, Text } from 'react-native';
-
-const ViewWithRefs = () => {
-  const ref = React.useRef(null);
-  const [viewInfo, setViewInfo] = React.useState('');
-
-  React.useEffect(() => {
-    // `element` is an object implementing the interface described here.
-    const element = ref.current;
-    const rect = JSON.stringify(element.getBoundingClientRect());
-    setViewInfo(
-      `Bounding rect is: ${rect}.\nText content is: ${element.textContent}`,
-    );
-  }, []);
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <View ref={ref} style={styles.content}>
-        <Text>Hello world!</Text>
-      </View>
-      <Text>{viewInfo}</Text>
-    </SafeAreaView>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  content: {
-    padding: 10,
-    backgroundColor: 'gray',
-  },
-});
-
-export default ViewWithRefs;
-```
-
-:::info
-Note that some built-in components are only a container for other components (including native components). For example, `ScrollView` internally renders a native scroll view and a native view, which are accessible through the ref it provides using methods like `getNativeScrollRef()` and `getInnerViewRef()`.
-:::
-
----
-
-## Reference
-
-### Web-compatible API
-
-From [`HTMLElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement):
-
-- Properties
-  - [`offsetHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight)
-  - [`offsetLeft`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft)
-  - [`offsetParent`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent)
-  - [`offsetTop`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop)
-  - [`offsetWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth)
-- Methods
-  - [`blur()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/blur).
-  - [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus).
-    - ⚠️ The `options` parameter is not supported.
-
-From [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element):
-
-- Properties
-  - [`childElementCount`](https://developer.mozilla.org/en-US/docs/Web/API/Element/childElementCount)
-  - [`children`](https://developer.mozilla.org/en-US/docs/Web/API/Element/children)
-  - [`clientHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight)
-  - [`clientLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft)
-  - [`clientTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop)
-  - [`clientWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth)
-  - [`firstElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Element/firstElementChild)
-  - [`id`](https://developer.mozilla.org/en-US/docs/Web/API/Element/id)
-    - ℹ️ Returns the value of the `id` or `nativeID` props.
-  - [`lastElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Element/lastElementChild)
-  - [`nextElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Element/nextElementSibling)
-  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Element/nodeName)
-  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Element/nodeType)
-  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Element/nodeValue)
-  - [`previousElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Element/previousElementSibling)
-  - [`scrollHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight)
-  - [`scrollLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft)
-    - ⚠️ For built-in components, only `ScrollView` instances can return a value other than zero.
-  - [`scrollTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop)
-    - ⚠️ For built-in components, only `ScrollView` instances can return a value other than zero.
-  - [`scrollWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth)
-  - [`tagName`](https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName)
-    - ℹ️ Returns a normalized native component name prefixed with `RN:`, like `RN:View`.
-  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Element/textContent)
-- Methods
-  - [`getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)
-  - [`hasPointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/hasPointerCapture)
-  - [`setPointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture)
-  - [`releasePointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/releasePointerCapture)
-
-From [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/Node):
-
-- Properties
-  - [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)
-  - [`firstChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild)
-  - [`isConnected`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected)
-  - [`lastChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild)
-  - [`nextSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling)
-  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
-  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
-  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
-  - [`ownerDocument`](https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument)
-    - ℹ️ Will return the [document node](/docs/next/document-nodes) where this component was rendered.
-  - [`parentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)
-  - [`parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)
-  - [`previousSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling)
-  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
-- Methods
-  - [`compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
-  - [`contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains)
-  - [`getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)
-    - ℹ️ Will return a reference to itself if the component is not mounted.
-  - [`hasChildNodes()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes)
-
-### Legacy API
-
-- [`measure()`](/docs/next/legacy/direct-manipulation#measurecallback)
-- [`measureInWindow()`](/docs/next/legacy/direct-manipulation#measureinwindowcallback)
-- [`measureLayout()`](/docs/next/legacy/direct-manipulation#measurelayoutrelativetonativecomponentref-onsuccess-onfail)
-- [`setNativeProps()`](/docs/next/legacy/direct-manipulation#setnativeprops-with-touchableopacity)
+---
+id: element-nodes
+title: Element nodes
+---
+
+Element nodes represent native components in the native view tree (similar to [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) nodes on Web).
+
+They are provided by all native components, and by many built-in components, via refs:
+
+```SnackPlayer ext=js&name=Element%20instances%20example
+import {useEffect, useRef, useState} from 'react';
+import {View, SafeAreaView, StyleSheet, Text} from 'react-native';
+
+const ViewWithRefs = () => {
+  const ref = useRef(null);
+  const [viewInfo, setViewInfo] = useState('');
+
+  useEffect(() => {
+    // `element` is an object implementing the interface described here.
+    const element = ref.current;
+    const rect = JSON.stringify(element.getBoundingClientRect());
+    setViewInfo(
+      `Bounding rect is: ${rect}.\nText content is: ${element.textContent}`,
+    );
+  }, []);
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View ref={ref} style={styles.content}>
+        <Text>Hello world!</Text>
+      </View>
+      <Text>{viewInfo}</Text>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    padding: 10,
+    backgroundColor: 'gray',
+  },
+});
+
+export default ViewWithRefs;
+```
+
+:::info
+Note that some built-in components are only a container for other components (including native components). For example, `ScrollView` internally renders a native scroll view and a native view, which are accessible through the ref it provides using methods like `getNativeScrollRef()` and `getInnerViewRef()`.
+:::
+
+---
+
+## Reference
+
+### Web-compatible API
+
+From [`HTMLElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement):
+
+- Properties
+  - [`offsetHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight)
+  - [`offsetLeft`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft)
+  - [`offsetParent`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent)
+  - [`offsetTop`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop)
+  - [`offsetWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth)
+- Methods
+  - [`blur()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/blur).
+  - [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus).
+    - ⚠️ The `options` parameter is not supported.
+
+From [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element):
+
+- Properties
+  - [`childElementCount`](https://developer.mozilla.org/en-US/docs/Web/API/Element/childElementCount)
+  - [`children`](https://developer.mozilla.org/en-US/docs/Web/API/Element/children)
+  - [`clientHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight)
+  - [`clientLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft)
+  - [`clientTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop)
+  - [`clientWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth)
+  - [`firstElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Element/firstElementChild)
+  - [`id`](https://developer.mozilla.org/en-US/docs/Web/API/Element/id)
+    - ℹ️ Returns the value of the `id` or `nativeID` props.
+  - [`lastElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Element/lastElementChild)
+  - [`nextElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Element/nextElementSibling)
+  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Element/nodeName)
+  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Element/nodeType)
+  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Element/nodeValue)
+  - [`previousElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Element/previousElementSibling)
+  - [`scrollHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight)
+  - [`scrollLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft)
+    - ⚠️ For built-in components, only `ScrollView` instances can return a value other than zero.
+  - [`scrollTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop)
+    - ⚠️ For built-in components, only `ScrollView` instances can return a value other than zero.
+  - [`scrollWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth)
+  - [`tagName`](https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName)
+    - ℹ️ Returns a normalized native component name prefixed with `RN:`, like `RN:View`.
+  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Element/textContent)
+- Methods
+  - [`getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)
+  - [`hasPointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/hasPointerCapture)
+  - [`setPointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture)
+  - [`releasePointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/releasePointerCapture)
+
+From [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/Node):
+
+- Properties
+  - [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)
+  - [`firstChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild)
+  - [`isConnected`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected)
+  - [`lastChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild)
+  - [`nextSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling)
+  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
+  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
+  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
+  - [`ownerDocument`](https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument)
+    - ℹ️ Will return the [document node](/docs/next/document-nodes) where this component was rendered.
+  - [`parentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)
+  - [`parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)
+  - [`previousSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling)
+  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
+- Methods
+  - [`compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
+  - [`contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains)
+  - [`getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)
+    - ℹ️ Will return a reference to itself if the component is not mounted.
+  - [`hasChildNodes()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes)
+
+### Legacy API
+
+- [`measure()`](/docs/next/legacy/direct-manipulation#measurecallback)
+- [`measureInWindow()`](/docs/next/legacy/direct-manipulation#measureinwindowcallback)
+- [`measureLayout()`](/docs/next/legacy/direct-manipulation#measurelayoutrelativetonativecomponentref-onsuccess-onfail)
+- [`setNativeProps()`](/docs/next/legacy/direct-manipulation#setnativeprops-with-touchableopacity)
diff --git a/website/versioned_docs/version-0.82/fabric-native-components.md b/website/versioned_docs/version-0.82/fabric-native-components.md
index 2a509a7174e..6efdd572e92 100644
--- a/website/versioned_docs/version-0.82/fabric-native-components.md
+++ b/website/versioned_docs/version-0.82/fabric-native-components.md
@@ -172,7 +172,6 @@ This guide shows you how to create a Native Component that only works with the N
 Finally, you can use the new component in your app. Update your generated `App.tsx` to:
 
 ```javascript title="Demo/App.tsx"
-import React from 'react';
 import {Alert, StyleSheet, View} from 'react-native';
 import WebView from './specs/WebViewNativeComponent';
 
diff --git a/website/versioned_docs/version-0.82/flatlist.md b/website/versioned_docs/version-0.82/flatlist.md
index 56505e27ca8..a7cceaf3ada 100644
--- a/website/versioned_docs/version-0.82/flatlist.md
+++ b/website/versioned_docs/version-0.82/flatlist.md
@@ -1,861 +1,859 @@
----
-id: flatlist
-title: FlatList
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-A performant interface for rendering basic, flat lists, supporting the most handy features:
-
-- Fully cross-platform.
-- Optional horizontal mode.
-- Configurable viewability callbacks.
-- Header support.
-- Footer support.
-- Separator support.
-- Pull to Refresh.
-- Scroll loading.
-- ScrollToIndex support.
-- Multiple column support.
-
-If you need section support, use [`<SectionList>`](sectionlist.md).
-
-## Example
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Simple%20FlatList%20Example&ext=js
-import React from 'react';
-import {View, FlatList, StyleSheet, Text, StatusBar} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const DATA = [
-  {
-    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
-    title: 'First Item',
-  },
-  {
-    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
-    title: 'Second Item',
-  },
-  {
-    id: '58694a0f-3da1-471f-bd96-145571e29d72',
-    title: 'Third Item',
-  },
-];
-
-const Item = ({title}) => (
-  <View style={styles.item}>
-    <Text style={styles.title}>{title}</Text>
-  </View>
-);
-
-const App = () => (
-  <SafeAreaProvider>
-    <SafeAreaView style={styles.container}>
-      <FlatList
-        data={DATA}
-        renderItem={({item}) => <Item title={item.title} />}
-        keyExtractor={item => item.id}
-      />
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: StatusBar.currentHeight || 0,
-  },
-  item: {
-    backgroundColor: '#f9c2ff',
-    padding: 20,
-    marginVertical: 8,
-    marginHorizontal: 16,
-  },
-  title: {
-    fontSize: 32,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Simple%20FlatList%20Example&ext=tsx
-import React from 'react';
-import {View, FlatList, StyleSheet, Text, StatusBar} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const DATA = [
-  {
-    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
-    title: 'First Item',
-  },
-  {
-    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
-    title: 'Second Item',
-  },
-  {
-    id: '58694a0f-3da1-471f-bd96-145571e29d72',
-    title: 'Third Item',
-  },
-];
-
-type ItemProps = {title: string};
-
-const Item = ({title}: ItemProps) => (
-  <View style={styles.item}>
-    <Text style={styles.title}>{title}</Text>
-  </View>
-);
-
-const App = () => (
-  <SafeAreaProvider>
-    <SafeAreaView style={styles.container}>
-      <FlatList
-        data={DATA}
-        renderItem={({item}) => <Item title={item.title} />}
-        keyExtractor={item => item.id}
-      />
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: StatusBar.currentHeight || 0,
-  },
-  item: {
-    backgroundColor: '#f9c2ff',
-    padding: 20,
-    marginVertical: 8,
-    marginHorizontal: 16,
-  },
-  title: {
-    fontSize: 32,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-To render multiple columns, use the [`numColumns`](flatlist.md#numcolumns) prop. Using this approach instead of a `flexWrap` layout can prevent conflicts with the item height logic.
-
-More complex, selectable example below.
-
-- By passing `extraData={selectedId}` to `FlatList` we make sure `FlatList` itself will re-render when the state changes. Without setting this prop, `FlatList` would not know it needs to re-render any items because it is a `PureComponent` and the prop comparison will not show any changes.
-- `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=flatlist-selectable&ext=js
-import React, {useState} from 'react';
-import {
-  FlatList,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const DATA = [
-  {
-    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
-    title: 'First Item',
-  },
-  {
-    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
-    title: 'Second Item',
-  },
-  {
-    id: '58694a0f-3da1-471f-bd96-145571e29d72',
-    title: 'Third Item',
-  },
-];
-
-const Item = ({item, onPress, backgroundColor, textColor}) => (
-  <TouchableOpacity onPress={onPress} style={[styles.item, {backgroundColor}]}>
-    <Text style={[styles.title, {color: textColor}]}>{item.title}</Text>
-  </TouchableOpacity>
-);
-
-const App = () => {
-  const [selectedId, setSelectedId] = useState();
-
-  const renderItem = ({item}) => {
-    const backgroundColor = item.id === selectedId ? '#6e3b6e' : '#f9c2ff';
-    const color = item.id === selectedId ? 'white' : 'black';
-
-    return (
-      <Item
-        item={item}
-        onPress={() => setSelectedId(item.id)}
-        backgroundColor={backgroundColor}
-        textColor={color}
-      />
-    );
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <FlatList
-          data={DATA}
-          renderItem={renderItem}
-          keyExtractor={item => item.id}
-          extraData={selectedId}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: StatusBar.currentHeight || 0,
-  },
-  item: {
-    padding: 20,
-    marginVertical: 8,
-    marginHorizontal: 16,
-  },
-  title: {
-    fontSize: 32,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=flatlist-selectable&ext=tsx
-import React, {useState} from 'react';
-import {
-  FlatList,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-type ItemData = {
-  id: string;
-  title: string;
-};
-
-const DATA: ItemData[] = [
-  {
-    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
-    title: 'First Item',
-  },
-  {
-    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
-    title: 'Second Item',
-  },
-  {
-    id: '58694a0f-3da1-471f-bd96-145571e29d72',
-    title: 'Third Item',
-  },
-];
-
-type ItemProps = {
-  item: ItemData;
-  onPress: () => void;
-  backgroundColor: string;
-  textColor: string;
-};
-
-const Item = ({item, onPress, backgroundColor, textColor}: ItemProps) => (
-  <TouchableOpacity onPress={onPress} style={[styles.item, {backgroundColor}]}>
-    <Text style={[styles.title, {color: textColor}]}>{item.title}</Text>
-  </TouchableOpacity>
-);
-
-const App = () => {
-  const [selectedId, setSelectedId] = useState<string>();
-
-  const renderItem = ({item}: {item: ItemData}) => {
-    const backgroundColor = item.id === selectedId ? '#6e3b6e' : '#f9c2ff';
-    const color = item.id === selectedId ? 'white' : 'black';
-
-    return (
-      <Item
-        item={item}
-        onPress={() => setSelectedId(item.id)}
-        backgroundColor={backgroundColor}
-        textColor={color}
-      />
-    );
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <FlatList
-          data={DATA}
-          renderItem={renderItem}
-          keyExtractor={item => item.id}
-          extraData={selectedId}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: StatusBar.currentHeight || 0,
-  },
-  item: {
-    padding: 20,
-    marginVertical: 8,
-    marginHorizontal: 16,
-  },
-  title: {
-    fontSize: 32,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-This is a convenience wrapper around [`<VirtualizedList>`](virtualizedlist.md), and thus inherits its props (as well as those of [`<ScrollView>`](scrollview.md)) that aren't explicitly listed here, along with the following caveats:
-
-- Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.
-- This is a `PureComponent` which means that it will not re-render if `props` remain shallow-equal. Make sure that everything your `renderItem` function depends on is passed as a prop (e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on changes. This includes the `data` prop and parent component state.
-- In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes.
-- By default, the list looks for a `key` prop on each item and uses that for the React key. Alternatively, you can provide a custom `keyExtractor` prop.
-
----
-
-# Reference
-
-## Props
-
-### [VirtualizedList Props](virtualizedlist.md#props)
-
-Inherits [VirtualizedList Props](virtualizedlist.md#props).
-
----
-
-### <div className="label required basic">Required</div> **`renderItem`**
-
-```tsx
-renderItem({
-  item: ItemT,
-  index: number,
-  separators: {
-    highlight: () => void;
-    unhighlight: () => void;
-    updateProps: (select: 'leading' | 'trailing', newProps: any) => void;
-  }
-}): JSX.Element;
-```
-
-Takes an item from `data` and renders it into the list.
-
-Provides additional metadata like `index` if you need it, as well as a more generic `separators.updateProps` function which let you set whatever props you want to change the rendering of either the leading separator or trailing separator in case the more common `highlight` and `unhighlight` (which set the `highlighted: boolean` prop) are insufficient for your use case.
-
-| Type     |
-| -------- |
-| function |
-
-- `item` (Object): The item from `data` being rendered.
-- `index` (number): The index corresponding to this item in the `data` array.
-- `separators` (Object)
-  - `highlight` (Function)
-  - `unhighlight` (Function)
-  - `updateProps` (Function)
-    - `select` (enum('leading', 'trailing'))
-    - `newProps` (Object)
-
-Example usage:
-
-```tsx
-<FlatList
-  ItemSeparatorComponent={
-    Platform.OS !== 'android' &&
-    (({highlighted}) => (
-      <View
-        style={[style.separator, highlighted && {marginLeft: 0}]}
-      />
-    ))
-  }
-  data={[{title: 'Title Text', key: 'item1'}]}
-  renderItem={({item, index, separators}) => (
-    <TouchableHighlight
-      key={item.key}
-      onPress={() => this._onPress(item)}
-      onShowUnderlay={separators.highlight}
-      onHideUnderlay={separators.unhighlight}>
-      <View style={{backgroundColor: 'white'}}>
-        <Text>{item.title}</Text>
-      </View>
-    </TouchableHighlight>
-  )}
-/>
-```
-
----
-
-### <div className="label required basic">Required</div> **`data`**
-
-An array (or array-like list) of items to render. Other data types can be used by targeting [`VirtualizedList`](virtualizedlist.md) directly.
-
-| Type      |
-| --------- |
-| ArrayLike |
-
----
-
-### `ItemSeparatorComponent`
-
-Rendered in between each item, but not at the top or bottom. By default, `highlighted` and `leadingItem` props are provided. `renderItem` provides `separators.highlight`/`unhighlight` which will update the `highlighted` prop, but you can also add custom props with `separators.updateProps`. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
-
-| Type                         |
-| ---------------------------- |
-| component, function, element |
-
----
-
-### `ListEmptyComponent`
-
-Rendered when the list is empty. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
-
-| Type               |
-| ------------------ |
-| component, element |
-
----
-
-### `ListFooterComponent`
-
-Rendered at the bottom of all the items. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
-
-| Type               |
-| ------------------ |
-| component, element |
-
----
-
-### `ListFooterComponentStyle`
-
-Styling for internal View for `ListFooterComponent`.
-
-| Type                           |
-| ------------------------------ |
-| [View Style](view-style-props) |
-
----
-
-### `ListHeaderComponent`
-
-Rendered at the top of all the items. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
-
-| Type               |
-| ------------------ |
-| component, element |
-
----
-
-### `ListHeaderComponentStyle`
-
-Styling for internal View for `ListHeaderComponent`.
-
-| Type                           |
-| ------------------------------ |
-| [View Style](view-style-props) |
-
----
-
-### `columnWrapperStyle`
-
-Optional custom style for multi-item rows generated when `numColumns > 1`.
-
-| Type                           |
-| ------------------------------ |
-| [View Style](view-style-props) |
-
----
-
-### `extraData`
-
-A marker property for telling the list to re-render (since it implements `PureComponent`). If any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the `data` prop, stick it here and treat it immutably.
-
-| Type |
-| ---- |
-| any  |
-
----
-
-### `getItemLayout`
-
-```tsx
-(data, index) => {length: number, offset: number, index: number}
-```
-
-`getItemLayout` is an optional optimization that allows skipping the measurement of dynamic content if you know the size (height or width) of items ahead of time. `getItemLayout` is efficient if you have fixed size items, for example:
-
-```tsx
-  getItemLayout={(data, index) => (
-    {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
-  )}
-```
-
-Adding `getItemLayout` can be a great performance boost for lists of several hundred items. Remember to include separator length (height or width) in your offset calculation if you specify `ItemSeparatorComponent`.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `horizontal`
-
-If `true`, renders items next to each other horizontally instead of stacked vertically.
-
-| Type    |
-| ------- |
-| boolean |
-
----
-
-### `initialNumToRender`
-
-How many items to render in the initial batch. This should be enough to fill the screen but not much more. Note these items will never be unmounted as part of the windowed rendering in order to improve perceived performance of scroll-to-top actions.
-
-| Type   | Default |
-| ------ | ------- |
-| number | `10`    |
-
----
-
-### `initialScrollIndex`
-
-Instead of starting at the top with the first item, start at `initialScrollIndex`. This disables the "scroll to top" optimization that keeps the first `initialNumToRender` items always rendered and immediately renders the items starting at this initial index. Requires `getItemLayout` to be implemented.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `inverted`
-
-Reverses the direction of scroll. Uses scale transforms of `-1`.
-
-| Type    |
-| ------- |
-| boolean |
-
----
-
-### `keyExtractor`
-
-```tsx
-(item: ItemT, index: number) => string;
-```
-
-Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks `item.key`, then `item.id`, and then falls back to using the index, like React does.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `numColumns`
-
-Multiple columns can only be rendered with `horizontal={false}` and will zig-zag like a `flexWrap` layout. Items should all be the same height - masonry layouts are not supported.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `onRefresh`
-
-```tsx
-() => void;
-```
-
-If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the `refreshing` prop correctly.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onViewableItemsChanged`
-
-Called when the viewability of rows changes, as defined by the `viewabilityConfig` prop.
-
-| Type                                                                                                  |
-| ----------------------------------------------------------------------------------------------------- |
-| `md (callback: {changed: [ViewToken](viewtoken)[], viewableItems: [ViewToken](viewtoken)[]} => void;` |
-
----
-
-### `progressViewOffset`
-
-Set this when offset is needed for the loading indicator to show correctly.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `refreshing`
-
-Set this true while waiting for new data from a refresh.
-
-| Type    |
-| ------- |
-| boolean |
-
----
-
-### `removeClippedSubviews`
-
-:::warning
-Using this property may lead to bugs (missing content) in some circumstances - use at your own risk.
-:::
-
-When `true`, offscreen child views are removed from their native backing superview when offscreen. This may improve scroll performance for large lists. On Android the default value is `true`.
-
-| Type    |
-| ------- |
-| boolean |
-
----
-
-### `viewabilityConfig`
-
-See [`ViewabilityHelper.js`](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Lists/ViewabilityHelper.js) for flow type and further documentation.
-
-| Type              |
-| ----------------- |
-| ViewabilityConfig |
-
-`viewabilityConfig` takes a type `ViewabilityConfig` an object with following properties
-
-| Property                         | Type    |
-| -------------------------------- | ------- |
-| minimumViewTime                  | number  |
-| viewAreaCoveragePercentThreshold | number  |
-| itemVisiblePercentThreshold      | number  |
-| waitForInteraction               | boolean |
-
-At least one of the `viewAreaCoveragePercentThreshold` or `itemVisiblePercentThreshold` is required. This needs to be done in the `constructor` to avoid following error ([ref](https://github.com/facebook/react-native/issues/17408)):
-
-```
-  Error: Changing viewabilityConfig on the fly is not supported
-```
-
-```tsx
-constructor (props) {
-  super(props)
-
-  this.viewabilityConfig = {
-      waitForInteraction: true,
-      viewAreaCoveragePercentThreshold: 95
-  }
-}
-```
-
-```tsx
-<FlatList
-    viewabilityConfig={this.viewabilityConfig}
-  ...
-```
-
-#### minimumViewTime
-
-Minimum amount of time (in milliseconds) that an item must be physically viewable before the viewability callback will be fired. A high number means that scrolling through content without stopping will not mark the content as viewable.
-
-#### viewAreaCoveragePercentThreshold
-
-Percent of viewport that must be covered for a partially occluded item to count as "viewable", 0-100. Fully visible items are always considered viewable. A value of 0 means that a single pixel in the viewport makes the item viewable, and a value of 100 means that an item must be either entirely visible or cover the entire viewport to count as viewable.
-
-#### itemVisiblePercentThreshold
-
-Similar to `viewAreaCoveragePercentThreshold`, but considers the percent of the item that is visible, rather than the fraction of the viewable area it covers.
-
-#### waitForInteraction
-
-Nothing is considered viewable until the user scrolls or `recordInteraction` is called after render.
-
----
-
-### `viewabilityConfigCallbackPairs`
-
-List of `ViewabilityConfig`/`onViewableItemsChanged` pairs. A specific `onViewableItemsChanged` will be called when its corresponding `ViewabilityConfig`'s conditions are met. See `ViewabilityHelper.js` for flow type and further documentation.
-
-| Type                                   |
-| -------------------------------------- |
-| array of ViewabilityConfigCallbackPair |
-
-## Methods
-
-### `flashScrollIndicators()`
-
-```tsx
-flashScrollIndicators();
-```
-
-Displays the scroll indicators momentarily.
-
----
-
-### `getNativeScrollRef()`
-
-```tsx
-getNativeScrollRef(): React.ElementRef<typeof ScrollViewComponent>;
-```
-
-Provides a reference to the underlying scroll component
-
----
-
-### `getScrollResponder()`
-
-```tsx
-getScrollResponder(): ScrollResponderMixin;
-```
-
-Provides a handle to the underlying scroll responder.
-
----
-
-### `getScrollableNode()`
-
-```tsx
-getScrollableNode(): any;
-```
-
-Provides a handle to the underlying scroll node.
-
-### `scrollToEnd()`
-
-```tsx
-scrollToEnd(params?: {animated?: boolean});
-```
-
-Scrolls to the end of the content. May be janky without `getItemLayout` prop.
-
-**Parameters:**
-
-| Name   | Type   |
-| ------ | ------ |
-| params | object |
-
-Valid `params` keys are:
-
-- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
-
----
-
-### `scrollToIndex()`
-
-```tsx
-scrollToIndex: (params: {
-  index: number;
-  animated?: boolean;
-  viewOffset?: number;
-  viewPosition?: number;
-});
-```
-
-Scrolls to the item at the specified index such that it is positioned in the viewable area such that `viewPosition` 0 places it at the top, 1 at the bottom, and 0.5 centered in the middle.
-
-:::note
-Cannot scroll to locations outside the render window without specifying the `getItemLayout` prop.
-:::
-
-**Parameters:**
-
-| Name                                                        | Type   |
-| ----------------------------------------------------------- | ------ |
-| params <div className="label basic required">Required</div> | object |
-
-Valid `params` keys are:
-
-- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
-- 'index' (number) - The index to scroll to. Required.
-- 'viewOffset' (number) - A fixed number of pixels to offset the final target position.
-- 'viewPosition' (number) - A value of `0` places the item specified by index at the top, `1` at the bottom, and `0.5` centered in the middle.
-
----
-
-### `scrollToItem()`
-
-```tsx
-scrollToItem(params: {
-  animated?: ?boolean,
-  item: Item,
-  viewPosition?: number,
-});
-```
-
-Requires linear scan through data - use `scrollToIndex` instead if possible.
-
-:::note
-Cannot scroll to locations outside the render window without specifying the `getItemLayout` prop.
-:::
-
-**Parameters:**
-
-| Name                                                        | Type   |
-| ----------------------------------------------------------- | ------ |
-| params <div className="label basic required">Required</div> | object |
-
-Valid `params` keys are:
-
-- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
-- 'item' (object) - The item to scroll to. Required.
-- 'viewPosition' (number)
-
----
-
-### `scrollToOffset()`
-
-```tsx
-scrollToOffset(params: {
-  offset: number;
-  animated?: boolean;
-});
-```
-
-Scroll to a specific content pixel offset in the list.
-
-**Parameters:**
-
-| Name                                                        | Type   |
-| ----------------------------------------------------------- | ------ |
-| params <div className="label basic required">Required</div> | object |
-
-Valid `params` keys are:
-
-- 'offset' (number) - The offset to scroll to. In case of `horizontal` being true, the offset is the x-value, in any other case the offset is the y-value. Required.
-- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
+---
+id: flatlist
+title: FlatList
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+A performant interface for rendering basic, flat lists, supporting the most handy features:
+
+- Fully cross-platform.
+- Optional horizontal mode.
+- Configurable viewability callbacks.
+- Header support.
+- Footer support.
+- Separator support.
+- Pull to Refresh.
+- Scroll loading.
+- ScrollToIndex support.
+- Multiple column support.
+
+If you need section support, use [`<SectionList>`](sectionlist.md).
+
+## Example
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Simple%20FlatList%20Example&ext=js
+import {View, FlatList, StyleSheet, Text, StatusBar} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const DATA = [
+  {
+    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
+    title: 'First Item',
+  },
+  {
+    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
+    title: 'Second Item',
+  },
+  {
+    id: '58694a0f-3da1-471f-bd96-145571e29d72',
+    title: 'Third Item',
+  },
+];
+
+const Item = ({title}) => (
+  <View style={styles.item}>
+    <Text style={styles.title}>{title}</Text>
+  </View>
+);
+
+const App = () => (
+  <SafeAreaProvider>
+    <SafeAreaView style={styles.container}>
+      <FlatList
+        data={DATA}
+        renderItem={({item}) => <Item title={item.title} />}
+        keyExtractor={item => item.id}
+      />
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: StatusBar.currentHeight || 0,
+  },
+  item: {
+    backgroundColor: '#f9c2ff',
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Simple%20FlatList%20Example&ext=tsx
+import {View, FlatList, StyleSheet, Text, StatusBar} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const DATA = [
+  {
+    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
+    title: 'First Item',
+  },
+  {
+    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
+    title: 'Second Item',
+  },
+  {
+    id: '58694a0f-3da1-471f-bd96-145571e29d72',
+    title: 'Third Item',
+  },
+];
+
+type ItemProps = {title: string};
+
+const Item = ({title}: ItemProps) => (
+  <View style={styles.item}>
+    <Text style={styles.title}>{title}</Text>
+  </View>
+);
+
+const App = () => (
+  <SafeAreaProvider>
+    <SafeAreaView style={styles.container}>
+      <FlatList
+        data={DATA}
+        renderItem={({item}) => <Item title={item.title} />}
+        keyExtractor={item => item.id}
+      />
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: StatusBar.currentHeight || 0,
+  },
+  item: {
+    backgroundColor: '#f9c2ff',
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+To render multiple columns, use the [`numColumns`](flatlist.md#numcolumns) prop. Using this approach instead of a `flexWrap` layout can prevent conflicts with the item height logic.
+
+More complex, selectable example below.
+
+- By passing `extraData={selectedId}` to `FlatList` we make sure `FlatList` itself will re-render when the state changes. Without setting this prop, `FlatList` would not know it needs to re-render any items because it is a `PureComponent` and the prop comparison will not show any changes.
+- `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=flatlist-selectable&ext=js
+import {useState} from 'react';
+import {
+  FlatList,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const DATA = [
+  {
+    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
+    title: 'First Item',
+  },
+  {
+    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
+    title: 'Second Item',
+  },
+  {
+    id: '58694a0f-3da1-471f-bd96-145571e29d72',
+    title: 'Third Item',
+  },
+];
+
+const Item = ({item, onPress, backgroundColor, textColor}) => (
+  <TouchableOpacity onPress={onPress} style={[styles.item, {backgroundColor}]}>
+    <Text style={[styles.title, {color: textColor}]}>{item.title}</Text>
+  </TouchableOpacity>
+);
+
+const App = () => {
+  const [selectedId, setSelectedId] = useState();
+
+  const renderItem = ({item}) => {
+    const backgroundColor = item.id === selectedId ? '#6e3b6e' : '#f9c2ff';
+    const color = item.id === selectedId ? 'white' : 'black';
+
+    return (
+      <Item
+        item={item}
+        onPress={() => setSelectedId(item.id)}
+        backgroundColor={backgroundColor}
+        textColor={color}
+      />
+    );
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <FlatList
+          data={DATA}
+          renderItem={renderItem}
+          keyExtractor={item => item.id}
+          extraData={selectedId}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: StatusBar.currentHeight || 0,
+  },
+  item: {
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=flatlist-selectable&ext=tsx
+import {useState} from 'react';
+import {
+  FlatList,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+type ItemData = {
+  id: string;
+  title: string;
+};
+
+const DATA: ItemData[] = [
+  {
+    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
+    title: 'First Item',
+  },
+  {
+    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
+    title: 'Second Item',
+  },
+  {
+    id: '58694a0f-3da1-471f-bd96-145571e29d72',
+    title: 'Third Item',
+  },
+];
+
+type ItemProps = {
+  item: ItemData;
+  onPress: () => void;
+  backgroundColor: string;
+  textColor: string;
+};
+
+const Item = ({item, onPress, backgroundColor, textColor}: ItemProps) => (
+  <TouchableOpacity onPress={onPress} style={[styles.item, {backgroundColor}]}>
+    <Text style={[styles.title, {color: textColor}]}>{item.title}</Text>
+  </TouchableOpacity>
+);
+
+const App = () => {
+  const [selectedId, setSelectedId] = useState<string>();
+
+  const renderItem = ({item}: {item: ItemData}) => {
+    const backgroundColor = item.id === selectedId ? '#6e3b6e' : '#f9c2ff';
+    const color = item.id === selectedId ? 'white' : 'black';
+
+    return (
+      <Item
+        item={item}
+        onPress={() => setSelectedId(item.id)}
+        backgroundColor={backgroundColor}
+        textColor={color}
+      />
+    );
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <FlatList
+          data={DATA}
+          renderItem={renderItem}
+          keyExtractor={item => item.id}
+          extraData={selectedId}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: StatusBar.currentHeight || 0,
+  },
+  item: {
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+This is a convenience wrapper around [`<VirtualizedList>`](virtualizedlist.md), and thus inherits its props (as well as those of [`<ScrollView>`](scrollview.md)) that aren't explicitly listed here, along with the following caveats:
+
+- Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.
+- This is a `PureComponent` which means that it will not re-render if `props` remain shallow-equal. Make sure that everything your `renderItem` function depends on is passed as a prop (e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on changes. This includes the `data` prop and parent component state.
+- In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes.
+- By default, the list looks for a `key` prop on each item and uses that for the React key. Alternatively, you can provide a custom `keyExtractor` prop.
+
+---
+
+# Reference
+
+## Props
+
+### [VirtualizedList Props](virtualizedlist.md#props)
+
+Inherits [VirtualizedList Props](virtualizedlist.md#props).
+
+---
+
+### <div className="label required basic">Required</div> **`renderItem`**
+
+```tsx
+renderItem({
+  item: ItemT,
+  index: number,
+  separators: {
+    highlight: () => void;
+    unhighlight: () => void;
+    updateProps: (select: 'leading' | 'trailing', newProps: any) => void;
+  }
+}): JSX.Element;
+```
+
+Takes an item from `data` and renders it into the list.
+
+Provides additional metadata like `index` if you need it, as well as a more generic `separators.updateProps` function which let you set whatever props you want to change the rendering of either the leading separator or trailing separator in case the more common `highlight` and `unhighlight` (which set the `highlighted: boolean` prop) are insufficient for your use case.
+
+| Type     |
+| -------- |
+| function |
+
+- `item` (Object): The item from `data` being rendered.
+- `index` (number): The index corresponding to this item in the `data` array.
+- `separators` (Object)
+  - `highlight` (Function)
+  - `unhighlight` (Function)
+  - `updateProps` (Function)
+    - `select` (enum('leading', 'trailing'))
+    - `newProps` (Object)
+
+Example usage:
+
+```tsx
+<FlatList
+  ItemSeparatorComponent={
+    Platform.OS !== 'android' &&
+    (({highlighted}) => (
+      <View
+        style={[style.separator, highlighted && {marginLeft: 0}]}
+      />
+    ))
+  }
+  data={[{title: 'Title Text', key: 'item1'}]}
+  renderItem={({item, index, separators}) => (
+    <TouchableHighlight
+      key={item.key}
+      onPress={() => this._onPress(item)}
+      onShowUnderlay={separators.highlight}
+      onHideUnderlay={separators.unhighlight}>
+      <View style={{backgroundColor: 'white'}}>
+        <Text>{item.title}</Text>
+      </View>
+    </TouchableHighlight>
+  )}
+/>
+```
+
+---
+
+### <div className="label required basic">Required</div> **`data`**
+
+An array (or array-like list) of items to render. Other data types can be used by targeting [`VirtualizedList`](virtualizedlist.md) directly.
+
+| Type      |
+| --------- |
+| ArrayLike |
+
+---
+
+### `ItemSeparatorComponent`
+
+Rendered in between each item, but not at the top or bottom. By default, `highlighted` and `leadingItem` props are provided. `renderItem` provides `separators.highlight`/`unhighlight` which will update the `highlighted` prop, but you can also add custom props with `separators.updateProps`. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
+
+| Type                         |
+| ---------------------------- |
+| component, function, element |
+
+---
+
+### `ListEmptyComponent`
+
+Rendered when the list is empty. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
+
+| Type               |
+| ------------------ |
+| component, element |
+
+---
+
+### `ListFooterComponent`
+
+Rendered at the bottom of all the items. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
+
+| Type               |
+| ------------------ |
+| component, element |
+
+---
+
+### `ListFooterComponentStyle`
+
+Styling for internal View for `ListFooterComponent`.
+
+| Type                           |
+| ------------------------------ |
+| [View Style](view-style-props) |
+
+---
+
+### `ListHeaderComponent`
+
+Rendered at the top of all the items. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
+
+| Type               |
+| ------------------ |
+| component, element |
+
+---
+
+### `ListHeaderComponentStyle`
+
+Styling for internal View for `ListHeaderComponent`.
+
+| Type                           |
+| ------------------------------ |
+| [View Style](view-style-props) |
+
+---
+
+### `columnWrapperStyle`
+
+Optional custom style for multi-item rows generated when `numColumns > 1`.
+
+| Type                           |
+| ------------------------------ |
+| [View Style](view-style-props) |
+
+---
+
+### `extraData`
+
+A marker property for telling the list to re-render (since it implements `PureComponent`). If any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the `data` prop, stick it here and treat it immutably.
+
+| Type |
+| ---- |
+| any  |
+
+---
+
+### `getItemLayout`
+
+```tsx
+(data, index) => {length: number, offset: number, index: number}
+```
+
+`getItemLayout` is an optional optimization that allows skipping the measurement of dynamic content if you know the size (height or width) of items ahead of time. `getItemLayout` is efficient if you have fixed size items, for example:
+
+```tsx
+  getItemLayout={(data, index) => (
+    {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
+  )}
+```
+
+Adding `getItemLayout` can be a great performance boost for lists of several hundred items. Remember to include separator length (height or width) in your offset calculation if you specify `ItemSeparatorComponent`.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `horizontal`
+
+If `true`, renders items next to each other horizontally instead of stacked vertically.
+
+| Type    |
+| ------- |
+| boolean |
+
+---
+
+### `initialNumToRender`
+
+How many items to render in the initial batch. This should be enough to fill the screen but not much more. Note these items will never be unmounted as part of the windowed rendering in order to improve perceived performance of scroll-to-top actions.
+
+| Type   | Default |
+| ------ | ------- |
+| number | `10`    |
+
+---
+
+### `initialScrollIndex`
+
+Instead of starting at the top with the first item, start at `initialScrollIndex`. This disables the "scroll to top" optimization that keeps the first `initialNumToRender` items always rendered and immediately renders the items starting at this initial index. Requires `getItemLayout` to be implemented.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `inverted`
+
+Reverses the direction of scroll. Uses scale transforms of `-1`.
+
+| Type    |
+| ------- |
+| boolean |
+
+---
+
+### `keyExtractor`
+
+```tsx
+(item: ItemT, index: number) => string;
+```
+
+Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks `item.key`, then `item.id`, and then falls back to using the index, like React does.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `numColumns`
+
+Multiple columns can only be rendered with `horizontal={false}` and will zig-zag like a `flexWrap` layout. Items should all be the same height - masonry layouts are not supported.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `onRefresh`
+
+```tsx
+() => void;
+```
+
+If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the `refreshing` prop correctly.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onViewableItemsChanged`
+
+Called when the viewability of rows changes, as defined by the `viewabilityConfig` prop.
+
+| Type                                                                                                  |
+| ----------------------------------------------------------------------------------------------------- |
+| `md (callback: {changed: [ViewToken](viewtoken)[], viewableItems: [ViewToken](viewtoken)[]} => void;` |
+
+---
+
+### `progressViewOffset`
+
+Set this when offset is needed for the loading indicator to show correctly.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `refreshing`
+
+Set this true while waiting for new data from a refresh.
+
+| Type    |
+| ------- |
+| boolean |
+
+---
+
+### `removeClippedSubviews`
+
+:::warning
+Using this property may lead to bugs (missing content) in some circumstances - use at your own risk.
+:::
+
+When `true`, offscreen child views are removed from their native backing superview when offscreen. This may improve scroll performance for large lists. On Android the default value is `true`.
+
+| Type    |
+| ------- |
+| boolean |
+
+---
+
+### `viewabilityConfig`
+
+See [`ViewabilityHelper.js`](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Lists/ViewabilityHelper.js) for flow type and further documentation.
+
+| Type              |
+| ----------------- |
+| ViewabilityConfig |
+
+`viewabilityConfig` takes a type `ViewabilityConfig` an object with following properties
+
+| Property                         | Type    |
+| -------------------------------- | ------- |
+| minimumViewTime                  | number  |
+| viewAreaCoveragePercentThreshold | number  |
+| itemVisiblePercentThreshold      | number  |
+| waitForInteraction               | boolean |
+
+At least one of the `viewAreaCoveragePercentThreshold` or `itemVisiblePercentThreshold` is required. This needs to be done in the `constructor` to avoid following error ([ref](https://github.com/facebook/react-native/issues/17408)):
+
+```
+  Error: Changing viewabilityConfig on the fly is not supported
+```
+
+```tsx
+constructor (props) {
+  super(props)
+
+  this.viewabilityConfig = {
+      waitForInteraction: true,
+      viewAreaCoveragePercentThreshold: 95
+  }
+}
+```
+
+```tsx
+<FlatList
+    viewabilityConfig={this.viewabilityConfig}
+  ...
+```
+
+#### minimumViewTime
+
+Minimum amount of time (in milliseconds) that an item must be physically viewable before the viewability callback will be fired. A high number means that scrolling through content without stopping will not mark the content as viewable.
+
+#### viewAreaCoveragePercentThreshold
+
+Percent of viewport that must be covered for a partially occluded item to count as "viewable", 0-100. Fully visible items are always considered viewable. A value of 0 means that a single pixel in the viewport makes the item viewable, and a value of 100 means that an item must be either entirely visible or cover the entire viewport to count as viewable.
+
+#### itemVisiblePercentThreshold
+
+Similar to `viewAreaCoveragePercentThreshold`, but considers the percent of the item that is visible, rather than the fraction of the viewable area it covers.
+
+#### waitForInteraction
+
+Nothing is considered viewable until the user scrolls or `recordInteraction` is called after render.
+
+---
+
+### `viewabilityConfigCallbackPairs`
+
+List of `ViewabilityConfig`/`onViewableItemsChanged` pairs. A specific `onViewableItemsChanged` will be called when its corresponding `ViewabilityConfig`'s conditions are met. See `ViewabilityHelper.js` for flow type and further documentation.
+
+| Type                                   |
+| -------------------------------------- |
+| array of ViewabilityConfigCallbackPair |
+
+## Methods
+
+### `flashScrollIndicators()`
+
+```tsx
+flashScrollIndicators();
+```
+
+Displays the scroll indicators momentarily.
+
+---
+
+### `getNativeScrollRef()`
+
+```tsx
+getNativeScrollRef(): React.ElementRef<typeof ScrollViewComponent>;
+```
+
+Provides a reference to the underlying scroll component
+
+---
+
+### `getScrollResponder()`
+
+```tsx
+getScrollResponder(): ScrollResponderMixin;
+```
+
+Provides a handle to the underlying scroll responder.
+
+---
+
+### `getScrollableNode()`
+
+```tsx
+getScrollableNode(): any;
+```
+
+Provides a handle to the underlying scroll node.
+
+### `scrollToEnd()`
+
+```tsx
+scrollToEnd(params?: {animated?: boolean});
+```
+
+Scrolls to the end of the content. May be janky without `getItemLayout` prop.
+
+**Parameters:**
+
+| Name   | Type   |
+| ------ | ------ |
+| params | object |
+
+Valid `params` keys are:
+
+- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
+
+---
+
+### `scrollToIndex()`
+
+```tsx
+scrollToIndex: (params: {
+  index: number;
+  animated?: boolean;
+  viewOffset?: number;
+  viewPosition?: number;
+});
+```
+
+Scrolls to the item at the specified index such that it is positioned in the viewable area such that `viewPosition` 0 places it at the top, 1 at the bottom, and 0.5 centered in the middle.
+
+:::note
+Cannot scroll to locations outside the render window without specifying the `getItemLayout` prop.
+:::
+
+**Parameters:**
+
+| Name                                                        | Type   |
+| ----------------------------------------------------------- | ------ |
+| params <div className="label basic required">Required</div> | object |
+
+Valid `params` keys are:
+
+- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
+- 'index' (number) - The index to scroll to. Required.
+- 'viewOffset' (number) - A fixed number of pixels to offset the final target position.
+- 'viewPosition' (number) - A value of `0` places the item specified by index at the top, `1` at the bottom, and `0.5` centered in the middle.
+
+---
+
+### `scrollToItem()`
+
+```tsx
+scrollToItem(params: {
+  animated?: ?boolean,
+  item: Item,
+  viewPosition?: number,
+});
+```
+
+Requires linear scan through data - use `scrollToIndex` instead if possible.
+
+:::note
+Cannot scroll to locations outside the render window without specifying the `getItemLayout` prop.
+:::
+
+**Parameters:**
+
+| Name                                                        | Type   |
+| ----------------------------------------------------------- | ------ |
+| params <div className="label basic required">Required</div> | object |
+
+Valid `params` keys are:
+
+- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
+- 'item' (object) - The item to scroll to. Required.
+- 'viewPosition' (number)
+
+---
+
+### `scrollToOffset()`
+
+```tsx
+scrollToOffset(params: {
+  offset: number;
+  animated?: boolean;
+});
+```
+
+Scroll to a specific content pixel offset in the list.
+
+**Parameters:**
+
+| Name                                                        | Type   |
+| ----------------------------------------------------------- | ------ |
+| params <div className="label basic required">Required</div> | object |
+
+Valid `params` keys are:
+
+- 'offset' (number) - The offset to scroll to. In case of `horizontal` being true, the offset is the x-value, in any other case the offset is the y-value. Required.
+- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
diff --git a/website/versioned_docs/version-0.82/flexbox.md b/website/versioned_docs/version-0.82/flexbox.md
index 039a7bdf60b..b745c9684ef 100644
--- a/website/versioned_docs/version-0.82/flexbox.md
+++ b/website/versioned_docs/version-0.82/flexbox.md
@@ -1,2884 +1,2883 @@
----
-id: flexbox
-title: Layout with Flexbox
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-A component can specify the layout of its children using the Flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes.
-
-You will normally use a combination of `flexDirection`, `alignItems`, and `justifyContent` to achieve the right layout.
-
-:::caution
-Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions.
-The defaults are different, with `flexDirection` defaulting to `column` instead of `row`, `alignContent` defaulting to `flex-start` instead of `stretch`, `flexShrink` defaulting to `0` instead of `1`, the `flex` parameter only supporting a single number.
-:::
-
-## Flex
-
-[`flex`](layout-props#flex) will define how your items are going to **“fill”** over the available space along your main axis. Space will be divided according to each element's flex property.
-
-In the following example, the red, orange, and green views are all children in the container view that has `flex: 1` set. The red view uses `flex: 1` , the orange view uses `flex: 2`, and the green view uses `flex: 3` . **1+2+3 = 6**, which means that the red view will get `1/6` of the space, the orange `2/6` of the space, and the green `3/6` of the space.
-
-```SnackPlayer name=Flex%20Example
-import React from 'react';
-import {StyleSheet, View} from 'react-native';
-
-const Flex = () => {
-  return (
-    <View
-      style={[
-        styles.container,
-        {
-          // Try setting `flexDirection` to `"row"`.
-          flexDirection: 'column',
-        },
-      ]}>
-      <View style={{flex: 1, backgroundColor: 'red'}} />
-      <View style={{flex: 2, backgroundColor: 'darkorange'}} />
-      <View style={{flex: 3, backgroundColor: 'green'}} />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 20,
-  },
-});
-
-export default Flex;
-```
-
-## Flex Direction
-
-[`flexDirection`](layout-props#flexdirection) controls the direction in which the children of a node are laid out. This is also referred to as the main axis. The cross axis is the axis perpendicular to the main axis, or the axis which the wrapping lines are laid out in.
-
-- `column` (**default value**) Align children from top to bottom. If wrapping is enabled, then the next line will start to the right of the first item on the top of the container.
-
-- `row` Align children from left to right. If wrapping is enabled, then the next line will start under the first item on the left of the container.
-
-- `column-reverse` Align children from bottom to top. If wrapping is enabled, then the next line will start to the right of the first item on the bottom of the container.
-
-- `row-reverse` Align children from right to left. If wrapping is enabled, then the next line will start under the first item on the right of the container.
-
-You can learn more [here](https://www.yogalayout.dev/docs/styling/flex-direction).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Flex%20Direction&ext=js
-import React, {useState} from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
-
-const FlexDirectionBasics = () => {
-  const [flexDirection, setflexDirection] = useState('column');
-
-  return (
-    <PreviewLayout
-      label="flexDirection"
-      values={['column', 'row', 'column-reverse', 'row-reverse']}
-      selectedValue={flexDirection}
-      setSelectedValue={setflexDirection}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default FlexDirectionBasics;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Flex%20Direction&ext=tsx
-import React, {useState} from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const FlexDirectionBasics = () => {
-  const [flexDirection, setflexDirection] = useState('column');
-
-  return (
-    <PreviewLayout
-      label="flexDirection"
-      values={['column', 'row', 'column-reverse', 'row-reverse']}
-      selectedValue={flexDirection}
-      setSelectedValue={setflexDirection}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default FlexDirectionBasics;
-```
-
-</TabItem>
-</Tabs>
-
-## Layout Direction
-
-Layout [`direction`](layout-props#direction) specifies the direction in which children and text in a hierarchy should be laid out. Layout direction also affects what edge `start` and `end` refer to. By default, React Native lays out with LTR layout direction. In this mode `start` refers to left and `end` refers to right.
-
-- `LTR` (**default value**) Text and children are laid out from left to right. Margin and padding applied to the start of an element are applied on the left side.
-
-- `RTL` Text and children are laid out from right to left. Margin and padding applied to the start of an element are applied on the right side.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Flex%20Direction&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const DirectionLayout = () => {
-  const [direction, setDirection] = useState('ltr');
-
-  return (
-    <PreviewLayout
-      label="direction"
-      selectedValue={direction}
-      values={['ltr', 'rtl']}
-      setSelectedValue={setDirection}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default DirectionLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Flex%20Direction&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const DirectionLayout = () => {
-  const [direction, setDirection] = useState('ltr');
-
-  return (
-    <PreviewLayout
-      label="direction"
-      selectedValue={direction}
-      values={['ltr', 'rtl']}
-      setSelectedValue={setDirection}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default DirectionLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## Justify Content
-
-[`justifyContent`](layout-props#justifycontent) describes how to align children within the main axis of their container. For example, you can use this property to center a child horizontally within a container with `flexDirection` set to `row` or vertically within a container with `flexDirection` set to `column`.
-
-- `flex-start`(**default value**) Align children of a container to the start of the container's main axis.
-
-- `flex-end` Align children of a container to the end of the container's main axis.
-
-- `center` Align children of a container in the center of the container's main axis.
-
-- `space-between` Evenly space off children across the container's main axis, distributing the remaining space between the children.
-
-- `space-around` Evenly space off children across the container's main axis, distributing the remaining space around the children. Compared to `space-between`, using `space-around` will result in space being distributed to the beginning of the first child and end of the last child.
-
-- `space-evenly` Evenly distribute children within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.
-
-You can learn more [here](https://www.yogalayout.dev/docs/styling/justify-content).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Justify%20Content&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const JustifyContentBasics = () => {
-  const [justifyContent, setJustifyContent] = useState('flex-start');
-
-  return (
-    <PreviewLayout
-      label="justifyContent"
-      selectedValue={justifyContent}
-      values={[
-        'flex-start',
-        'flex-end',
-        'center',
-        'space-between',
-        'space-around',
-        'space-evenly',
-      ]}
-      setSelectedValue={setJustifyContent}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default JustifyContentBasics;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Justify%20Content&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const JustifyContentBasics = () => {
-  const [justifyContent, setJustifyContent] = useState('flex-start');
-
-  return (
-    <PreviewLayout
-      label="justifyContent"
-      selectedValue={justifyContent}
-      values={[
-        'flex-start',
-        'flex-end',
-        'center',
-        'space-between',
-        'space-around',
-        'space-evenly',
-      ]}
-      setSelectedValue={setJustifyContent}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default JustifyContentBasics;
-```
-
-</TabItem>
-</Tabs>
-
-## Align Items
-
-[`alignItems`](layout-props#alignitems) describes how to align children along the cross axis of their container. It is very similar to `justifyContent` but instead of applying to the main axis, `alignItems` applies to the cross axis.
-
-- `stretch` (**default value**) Stretch children of a container to match the `height` of the container's cross axis.
-
-- `flex-start` Align children of a container to the start of the container's cross axis.
-
-- `flex-end` Align children of a container to the end of the container's cross axis.
-
-- `center` Align children of a container in the center of the container's cross axis.
-
-- `baseline` Align children of a container along a common baseline. Individual children can be set to be the reference baseline for their parents.
-
-:::info
-For `stretch` to have an effect, children must not have a fixed dimension along the secondary axis. In the following example, setting `alignItems: stretch` does nothing until the `width: 50` is removed from the children.
-:::
-
-You can learn more [here](https://www.yogalayout.dev/docs/styling/align-items-self).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Align%20Items&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const AlignItemsLayout = () => {
-  const [alignItems, setAlignItems] = useState('stretch');
-
-  return (
-    <PreviewLayout
-      label="alignItems"
-      selectedValue={alignItems}
-      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
-      setSelectedValue={setAlignItems}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View
-        style={[
-          styles.box,
-          {
-            backgroundColor: 'steelblue',
-            width: 'auto',
-            minWidth: 50,
-          },
-        ]}
-      />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignItemsLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Align%20Items&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const AlignItemsLayout = () => {
-  const [alignItems, setAlignItems] = useState('stretch');
-
-  return (
-    <PreviewLayout
-      label="alignItems"
-      selectedValue={alignItems}
-      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
-      setSelectedValue={setAlignItems}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View
-        style={[
-          styles.box,
-          {
-            backgroundColor: 'steelblue',
-            width: 'auto',
-            minWidth: 50,
-          },
-        ]}
-      />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignItemsLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## Align Self
-
-[`alignSelf`](layout-props#alignself) has the same options and effect as `alignItems` but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent. `alignSelf` overrides any option set by the parent with `alignItems`.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Align%20Self&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const AlignSelfLayout = () => {
-  const [alignSelf, setAlignSelf] = useState('stretch');
-
-  return (
-    <PreviewLayout
-      label="alignSelf"
-      selectedValue={alignSelf}
-      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
-      setSelectedValue={setAlignSelf}>
-      <View
-        style={[
-          styles.box,
-          {
-            alignSelf,
-            width: 'auto',
-            minWidth: 50,
-            backgroundColor: 'powderblue',
-          },
-        ]}
-      />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={styles.container}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignSelfLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Align%20Self&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-import type {FlexAlignType} from 'react-native';
-
-const AlignSelfLayout = () => {
-  const [alignSelf, setAlignSelf] = useState<FlexAlignType>('stretch');
-
-  return (
-    <PreviewLayout
-      label="alignSelf"
-      selectedValue={alignSelf}
-      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
-      setSelectedValue={setAlignSelf}>
-      <View
-        style={[
-          styles.box,
-          {
-            alignSelf,
-            width: 'auto',
-            minWidth: 50,
-            backgroundColor: 'powderblue',
-          },
-        ]}
-      />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: FlexAlignType[];
-  selectedValue: string;
-  setSelectedValue: (value: FlexAlignType) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={styles.container}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignSelfLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## Align Content
-
-[alignContent](layout-props#aligncontent) defines the distribution of lines along the cross-axis. This only has effect when items are wrapped to multiple lines using `flexWrap`.
-
-- `flex-start` (**default value**) Align wrapped lines to the start of the container's cross axis.
-
-- `flex-end` Align wrapped lines to the end of the container's cross axis.
-
-- `stretch` (_default value when using Yoga on the web_) Stretch wrapped lines to match the height of the container's cross axis.
-
-- `center` Align wrapped lines in the center of the container's cross axis.
-
-- `space-between` Evenly space wrapped lines across the container's cross axis, distributing the remaining space between the lines.
-
-- `space-around` Evenly space wrapped lines across the container's cross axis, distributing the remaining space around the lines. Each end of the container has a half-sized space compared to the space between items.
-
-- `space-evenly` Evenly space wrapped lines across the container's cross axis, distributing the remaining space around the lines. Each space is the same size.
-
-You can learn more [here](https://www.yogalayout.dev/docs/styling/align-content).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Align%20Content&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const AlignContentLayout = () => {
-  const [alignContent, setAlignContent] = useState('flex-start');
-
-  return (
-    <PreviewLayout
-      label="alignContent"
-      selectedValue={alignContent}
-      values={[
-        'flex-start',
-        'flex-end',
-        'stretch',
-        'center',
-        'space-between',
-        'space-around',
-      ]}
-      setSelectedValue={setAlignContent}>
-      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
-      <View style={[styles.box, {backgroundColor: 'orange'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
-      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'purple'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexWrap: 'wrap',
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignContentLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Align%20Content&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const AlignContentLayout = () => {
-  const [alignContent, setAlignContent] = useState('flex-start');
-
-  return (
-    <PreviewLayout
-      label="alignContent"
-      selectedValue={alignContent}
-      values={[
-        'flex-start',
-        'flex-end',
-        'stretch',
-        'center',
-        'space-between',
-        'space-around',
-      ]}
-      setSelectedValue={setAlignContent}>
-      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
-      <View style={[styles.box, {backgroundColor: 'orange'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
-      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'purple'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexWrap: 'wrap',
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignContentLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## Flex Wrap
-
-The [`flexWrap`](layout-props#flexwrap) property is set on containers and it controls what happens when children overflow the size of the container along the main axis. By default, children are forced into a single line (which can shrink elements). If wrapping is allowed, items are wrapped into multiple lines along the main axis if needed.
-
-When wrapping lines, `alignContent` can be used to specify how the lines are placed in the container. Learn more [here](https://www.yogalayout.dev/docs/styling/flex-wrap).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Flex%20Wrap&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const FlexWrapLayout = () => {
-  const [flexWrap, setFlexWrap] = useState('wrap');
-
-  return (
-    <PreviewLayout
-      label="flexWrap"
-      selectedValue={flexWrap}
-      values={['wrap', 'nowrap']}
-      setSelectedValue={setFlexWrap}>
-      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
-      <View style={[styles.box, {backgroundColor: 'orange'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
-      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'purple'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default FlexWrapLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Flex%20Wrap&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const FlexWrapLayout = () => {
-  const [flexWrap, setFlexWrap] = useState('wrap');
-
-  return (
-    <PreviewLayout
-      label="flexWrap"
-      selectedValue={flexWrap}
-      values={['wrap', 'nowrap']}
-      setSelectedValue={setFlexWrap}>
-      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
-      <View style={[styles.box, {backgroundColor: 'orange'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
-      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'purple'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default FlexWrapLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## Flex Basis, Grow, and Shrink
-
-- [`flexBasis`](layout-props#flexbasis) is an axis-independent way of providing the default size of an item along the main axis. Setting the `flexBasis` of a child is similar to setting the `width` of that child if its parent is a container with `flexDirection: row` or setting the `height` of a child if its parent is a container with `flexDirection: column`. The `flexBasis` of an item is the default size of that item, the size of the item before any `flexGrow` and `flexShrink` calculations are performed.
-
-- [`flexGrow`](layout-props#flexgrow) describes how much space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
-
-  `flexGrow` accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the children’s `flexGrow` values.
-
-- [`flexShrink`](layout-props#flexshrink) describes how to shrink children along the main axis in the case in which the total size of the children overflows the size of the container on the main axis. `flexShrink` is very similar to `flexGrow` and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed.
-
-  `flexShrink` accepts any floating point value >= 0, with 0 being the default value (on the web, the default is 1). A container will shrink its children weighted by the children’s `flexShrink` values.
-
-You can learn more [here](https://www.yogalayout.dev/docs/styling/flex-basis-grow-shrink).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink&ext=js
-import React, {useState} from 'react';
-import {View, Text, TextInput, StyleSheet} from 'react-native';
-
-const App = () => {
-  const [powderblue, setPowderblue] = useState({
-    flexGrow: 0,
-    flexShrink: 1,
-    flexBasis: 'auto',
-  });
-  const [skyblue, setSkyblue] = useState({
-    flexGrow: 1,
-    flexShrink: 0,
-    flexBasis: 100,
-  });
-  const [steelblue, setSteelblue] = useState({
-    flexGrow: 0,
-    flexShrink: 1,
-    flexBasis: 200,
-  });
-  return (
-    <View style={styles.container}>
-      <View
-        style={[
-          styles.container,
-          {
-            flexDirection: 'row',
-            alignContent: 'space-between',
-          },
-        ]}>
-        <BoxInfo color="powderblue" {...powderblue} setStyle={setPowderblue} />
-        <BoxInfo color="skyblue" {...skyblue} setStyle={setSkyblue} />
-        <BoxInfo color="steelblue" {...steelblue} setStyle={setSteelblue} />
-      </View>
-      <View style={styles.previewContainer}>
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: powderblue.flexBasis,
-              flexGrow: powderblue.flexGrow,
-              flexShrink: powderblue.flexShrink,
-              backgroundColor: 'powderblue',
-            },
-          ]}
-        />
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: skyblue.flexBasis,
-              flexGrow: skyblue.flexGrow,
-              flexShrink: skyblue.flexShrink,
-              backgroundColor: 'skyblue',
-            },
-          ]}
-        />
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: steelblue.flexBasis,
-              flexGrow: steelblue.flexGrow,
-              flexShrink: steelblue.flexShrink,
-              backgroundColor: 'steelblue',
-            },
-          ]}
-        />
-      </View>
-    </View>
-  );
-};
-
-const BoxInfo = ({color, flexBasis, flexShrink, setStyle, flexGrow}) => (
-  <View style={[styles.row, {flexDirection: 'column'}]}>
-    <View
-      style={[
-        styles.boxLabel,
-        {
-          backgroundColor: color,
-        },
-      ]}>
-      <Text
-        style={{
-          color: '#fff',
-          fontWeight: '500',
-          textAlign: 'center',
-        }}>
-        Box
-      </Text>
-    </View>
-    <Text style={styles.label}>flexBasis</Text>
-    <TextInput
-      value={flexBasis}
-      style={styles.input}
-      onChangeText={fB =>
-        setStyle(value => ({
-          ...value,
-          flexBasis: isNaN(parseInt(fB, 10)) ? 'auto' : parseInt(fB, 10),
-        }))
-      }
-    />
-    <Text style={styles.label}>flexShrink</Text>
-    <TextInput
-      value={flexShrink}
-      style={styles.input}
-      onChangeText={fS =>
-        setStyle(value => ({
-          ...value,
-          flexShrink: isNaN(parseInt(fS, 10)) ? undefined : parseInt(fS, 10),
-        }))
-      }
-    />
-    <Text style={styles.label}>flexGrow</Text>
-    <TextInput
-      value={flexGrow}
-      style={styles.input}
-      onChangeText={fG =>
-        setStyle(value => ({
-          ...value,
-          flexGrow: isNaN(parseInt(fG, 10)) ? undefined : parseInt(fG, 10),
-        }))
-      }
-    />
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingHorizontal: 10,
-  },
-  box: {
-    flex: 1,
-    height: 50,
-    width: 50,
-  },
-  boxLabel: {
-    minWidth: 80,
-    padding: 8,
-    borderRadius: 4,
-    marginTop: 8,
-  },
-  label: {
-    marginTop: 6,
-    fontSize: 16,
-    fontWeight: '100',
-  },
-  previewContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    backgroundColor: 'aliceblue',
-  },
-  row: {
-    flex: 1,
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    marginBottom: 10,
-  },
-  input: {
-    borderBottomWidth: 1,
-    paddingVertical: 3,
-    width: 50,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink&ext=tsx
-import React, {useState} from 'react';
-import {View, Text, TextInput, StyleSheet} from 'react-native';
-import type {ViewStyle} from 'react-native';
-
-const App = () => {
-  const [powderblue, setPowderblue] = useState<ViewStyle>({
-    flexGrow: 0,
-    flexShrink: 1,
-    flexBasis: 'auto',
-  });
-  const [skyblue, setSkyblue] = useState<ViewStyle>({
-    flexGrow: 1,
-    flexShrink: 0,
-    flexBasis: 100,
-  });
-  const [steelblue, setSteelblue] = useState<ViewStyle>({
-    flexGrow: 0,
-    flexShrink: 1,
-    flexBasis: 200,
-  });
-  return (
-    <View style={styles.container}>
-      <View
-        style={[
-          styles.container,
-          {
-            flexDirection: 'row',
-            alignContent: 'space-between',
-          },
-        ]}>
-        <BoxInfo color="powderblue" {...powderblue} setStyle={setPowderblue} />
-        <BoxInfo color="skyblue" {...skyblue} setStyle={setSkyblue} />
-        <BoxInfo color="steelblue" {...steelblue} setStyle={setSteelblue} />
-      </View>
-      <View style={styles.previewContainer}>
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: powderblue.flexBasis,
-              flexGrow: powderblue.flexGrow,
-              flexShrink: powderblue.flexShrink,
-              backgroundColor: 'powderblue',
-            },
-          ]}
-        />
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: skyblue.flexBasis,
-              flexGrow: skyblue.flexGrow,
-              flexShrink: skyblue.flexShrink,
-              backgroundColor: 'skyblue',
-            },
-          ]}
-        />
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: steelblue.flexBasis,
-              flexGrow: steelblue.flexGrow,
-              flexShrink: steelblue.flexShrink,
-              backgroundColor: 'steelblue',
-            },
-          ]}
-        />
-      </View>
-    </View>
-  );
-};
-
-type BoxInfoProps = ViewStyle & {
-  color: string;
-  setStyle: React.Dispatch<React.SetStateAction<ViewStyle>>;
-};
-
-const BoxInfo = ({
-  color,
-  flexBasis,
-  flexShrink,
-  setStyle,
-  flexGrow,
-}: BoxInfoProps) => (
-  <View style={[styles.row, {flexDirection: 'column'}]}>
-    <View
-      style={[
-        styles.boxLabel,
-        {
-          backgroundColor: color,
-        },
-      ]}>
-      <Text
-        style={{
-          color: '#fff',
-          fontWeight: '500',
-          textAlign: 'center',
-        }}>
-        Box
-      </Text>
-    </View>
-    <Text style={styles.label}>flexBasis</Text>
-    <TextInput
-      value={String(flexBasis)}
-      style={styles.input}
-      onChangeText={fB =>
-        setStyle(value => ({
-          ...value,
-          flexBasis: isNaN(parseInt(fB, 10)) ? 'auto' : parseInt(fB, 10),
-        }))
-      }
-    />
-    <Text style={styles.label}>flexShrink</Text>
-    <TextInput
-      value={String(flexShrink)}
-      style={styles.input}
-      onChangeText={fS =>
-        setStyle(value => ({
-          ...value,
-          flexShrink: isNaN(parseInt(fS, 10)) ? undefined : parseInt(fS, 10),
-        }))
-      }
-    />
-    <Text style={styles.label}>flexGrow</Text>
-    <TextInput
-      value={String(flexGrow)}
-      style={styles.input}
-      onChangeText={fG =>
-        setStyle(value => ({
-          ...value,
-          flexGrow: isNaN(parseInt(fG, 10)) ? undefined : parseInt(fG, 10),
-        }))
-      }
-    />
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingHorizontal: 10,
-  },
-  box: {
-    flex: 1,
-    height: 50,
-    width: 50,
-  },
-  boxLabel: {
-    minWidth: 80,
-    padding: 8,
-    borderRadius: 4,
-    marginTop: 8,
-  },
-  label: {
-    marginTop: 6,
-    fontSize: 16,
-    fontWeight: '100',
-  },
-  previewContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    backgroundColor: 'aliceblue',
-  },
-  row: {
-    flex: 1,
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    marginBottom: 10,
-  },
-  input: {
-    borderBottomWidth: 1,
-    paddingVertical: 3,
-    width: 50,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-## Row Gap, Column Gap and Gap
-
-- [`rowGap`](layout-props#rowgap) sets the size of the gap (gutter) between an element's rows.
-
-- [`columnGap`](layout-props#columngap) sets the size of the gap (gutter) between an element's columns.
-
-- [`gap`](layout-props#gap) sets the size of the gap (gutter) between rows and columns. It is a shorthand for `rowGap` and `columnGap`.
-
-You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Row%20Gap%20and%20Column%20Gap&ext=js
-import React, {useState} from 'react';
-import {View, Text, StyleSheet, TextInput} from 'react-native';
-
-const RowGapAndColumnGap = () => {
-  const [rowGap, setRowGap] = useState(10);
-  const [columnGap, setColumnGap] = useState(10);
-
-  return (
-    <PreviewLayout
-      columnGap={columnGap}
-      handleColumnGapChange={setColumnGap}
-      rowGap={rowGap}
-      handleRowGapChange={setRowGap}>
-      <View style={[styles.box, styles.box1]} />
-      <View style={[styles.box, styles.box2]} />
-      <View style={[styles.box, styles.box3]} />
-      <View style={[styles.box, styles.box4]} />
-      <View style={[styles.box, styles.box5]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  children,
-  handleColumnGapChange,
-  handleRowGapChange,
-  rowGap,
-  columnGap,
-}) => (
-  <View style={styles.previewContainer}>
-    <View style={styles.inputContainer}>
-      <View style={styles.itemsCenter}>
-        <Text>Row Gap</Text>
-        <TextInput
-          style={styles.input}
-          value={rowGap}
-          onChangeText={v => handleRowGapChange(Number(v))}
-        />
-      </View>
-      <View style={styles.itemsCenter}>
-        <Text>Column Gap</Text>
-        <TextInput
-          style={styles.input}
-          value={columnGap}
-          onChangeText={v => handleColumnGapChange(Number(v))}
-        />
-      </View>
-    </View>
-    <View style={[styles.container, {rowGap, columnGap}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  itemsCenter: {alignItems: 'center'},
-  inputContainer: {
-    gap: 4,
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-  },
-  previewContainer: {padding: 10, flex: 1},
-  input: {
-    borderBottomWidth: 1,
-    paddingVertical: 3,
-    width: 50,
-    textAlign: 'center',
-  },
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-    flexWrap: 'wrap',
-    alignContent: 'flex-start',
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  box1: {
-    backgroundColor: 'orangered',
-  },
-  box2: {
-    backgroundColor: 'orange',
-  },
-  box3: {
-    backgroundColor: 'mediumseagreen',
-  },
-  box4: {
-    backgroundColor: 'deepskyblue',
-  },
-  box5: {
-    backgroundColor: 'mediumturquoise',
-  },
-});
-
-export default RowGapAndColumnGap;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Row%20Gap%20and%20Column%20Gap&ext=tsx
-import React, {useState} from 'react';
-import {View, Text, StyleSheet, TextInput} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const RowGapAndColumnGap = () => {
-  const [rowGap, setRowGap] = useState(10);
-  const [columnGap, setColumnGap] = useState(10);
-
-  return (
-    <PreviewLayout
-      columnGap={columnGap}
-      handleColumnGapChange={setColumnGap}
-      rowGap={rowGap}
-      handleRowGapChange={setRowGap}>
-      <View style={[styles.box, styles.box1]} />
-      <View style={[styles.box, styles.box2]} />
-      <View style={[styles.box, styles.box3]} />
-      <View style={[styles.box, styles.box4]} />
-      <View style={[styles.box, styles.box5]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  columnGap: number;
-  handleColumnGapChange: (gap: number) => void;
-  rowGap: number;
-  handleRowGapChange: (gap: number) => void;
-}>;
-
-const PreviewLayout = ({
-  children,
-  handleColumnGapChange,
-  handleRowGapChange,
-  rowGap,
-  columnGap,
-}: PreviewLayoutProps) => (
-  <View style={styles.previewContainer}>
-    <View style={styles.inputContainer}>
-      <View style={styles.itemsCenter}>
-        <Text>Row Gap</Text>
-        <TextInput
-          style={styles.input}
-          value={String(rowGap)}
-          onChangeText={v => handleRowGapChange(Number(v))}
-        />
-      </View>
-      <View style={styles.itemsCenter}>
-        <Text>Column Gap</Text>
-        <TextInput
-          style={styles.input}
-          value={String(columnGap)}
-          onChangeText={v => handleColumnGapChange(Number(v))}
-        />
-      </View>
-    </View>
-    <View style={[styles.container, {rowGap, columnGap}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  itemsCenter: {alignItems: 'center'},
-  inputContainer: {
-    gap: 4,
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-  },
-  previewContainer: {padding: 10, flex: 1},
-  input: {
-    borderBottomWidth: 1,
-    paddingVertical: 3,
-    width: 50,
-    textAlign: 'center',
-  },
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-    flexWrap: 'wrap',
-    alignContent: 'flex-start',
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  box1: {
-    backgroundColor: 'orangered',
-  },
-  box2: {
-    backgroundColor: 'orange',
-  },
-  box3: {
-    backgroundColor: 'mediumseagreen',
-  },
-  box4: {
-    backgroundColor: 'deepskyblue',
-  },
-  box5: {
-    backgroundColor: 'mediumturquoise',
-  },
-});
-
-export default RowGapAndColumnGap;
-```
-
-</TabItem>
-</Tabs>
-
-## Width and Height
-
-The `width` property specifies the width of an element's content area. Similarly, the `height` property specifies the height of an element's content area.
-
-Both `width` and `height` can take the following values:
-
-- `auto` (**default value**) React Native calculates the width/height for the element based on its content, whether that is other children, text, or an image.
-
-- `pixels` Defines the width/height in absolute pixels. Depending on other styles set on the component, this may or may not be the final dimension of the node.
-
-- `percentage` Defines the width or height in percentage of its parent's width or height, respectively.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Width%20and%20Height&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const WidthHeightBasics = () => {
-  const [widthType, setWidthType] = useState('auto');
-  const [heightType, setHeightType] = useState('auto');
-
-  return (
-    <PreviewLayout
-      widthType={widthType}
-      heightType={heightType}
-      widthValues={['auto', 300, '80%']}
-      heightValues={['auto', 200, '60%']}
-      setWidthType={setWidthType}
-      setHeightType={setHeightType}>
-      <View
-        style={{
-          alignSelf: 'flex-start',
-          backgroundColor: 'aliceblue',
-          height: heightType,
-          width: widthType,
-          padding: 15,
-        }}>
-        <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-        <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-        <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-      </View>
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  children,
-  widthType,
-  heightType,
-  widthValues,
-  heightValues,
-  setWidthType,
-  setHeightType,
-}) => (
-  <SafeAreaProvider>
-    <SafeAreaView style={{flex: 1, padding: 10}}>
-      <View style={styles.row}>
-        <Text style={styles.label}>width </Text>
-        {widthValues.map(value => (
-          <TouchableOpacity
-            key={value}
-            onPress={() => setWidthType(value)}
-            style={[styles.button, widthType === value && styles.selected]}>
-            <Text
-              style={[
-                styles.buttonLabel,
-                widthType === value && styles.selectedLabel,
-              ]}>
-              {value}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </View>
-      <View style={styles.row}>
-        <Text style={styles.label}>height </Text>
-        {heightValues.map(value => (
-          <TouchableOpacity
-            key={value}
-            onPress={() => setHeightType(value)}
-            style={[styles.button, heightType === value && styles.selected]}>
-            <Text
-              style={[
-                styles.buttonLabel,
-                heightType === value && styles.selectedLabel,
-              ]}>
-              {value}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </View>
-      {children}
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    padding: 8,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginRight: 10,
-    marginBottom: 10,
-  },
-  selected: {
-    backgroundColor: 'coral',
-    shadowOpacity: 0,
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default WidthHeightBasics;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Width%20and%20Height&ext=tsx
-import React, {useState, PropsWithChildren} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-type Dimension = 'auto' | `${number}%` | number;
-
-const WidthHeightBasics = () => {
-  const [widthType, setWidthType] = useState<Dimension>('auto');
-  const [heightType, setHeightType] = useState<Dimension>('auto');
-
-  return (
-    <PreviewLayout
-      widthType={widthType}
-      heightType={heightType}
-      widthValues={['auto', 300, '80%']}
-      heightValues={['auto', 200, '60%']}
-      setWidthType={setWidthType}
-      setHeightType={setHeightType}>
-      <View
-        style={{
-          alignSelf: 'flex-start',
-          backgroundColor: 'aliceblue',
-          height: heightType,
-          width: widthType,
-          padding: 15,
-        }}>
-        <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-        <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-        <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-      </View>
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  widthType: Dimension;
-  heightType: Dimension;
-  widthValues: Dimension[];
-  heightValues: Dimension[];
-  setWidthType: (value: Dimension) => void;
-  setHeightType: (value: Dimension) => void;
-}>;
-
-const PreviewLayout = ({
-  children,
-  widthType,
-  heightType,
-  widthValues,
-  heightValues,
-  setWidthType,
-  setHeightType,
-}: PreviewLayoutProps) => (
-  <SafeAreaProvider>
-    <SafeAreaView style={{flex: 1, padding: 10}}>
-      <View style={styles.row}>
-        <Text style={styles.label}>width </Text>
-        {widthValues.map(value => (
-          <TouchableOpacity
-            key={value}
-            onPress={() => setWidthType(value)}
-            style={[styles.button, widthType === value && styles.selected]}>
-            <Text
-              style={[
-                styles.buttonLabel,
-                widthType === value && styles.selectedLabel,
-              ]}>
-              {value}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </View>
-      <View style={styles.row}>
-        <Text style={styles.label}>height </Text>
-        {heightValues.map(value => (
-          <TouchableOpacity
-            key={value}
-            onPress={() => setHeightType(value)}
-            style={[styles.button, heightType === value && styles.selected]}>
-            <Text
-              style={[
-                styles.buttonLabel,
-                heightType === value && styles.selectedLabel,
-              ]}>
-              {value}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </View>
-      {children}
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    padding: 8,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginRight: 10,
-    marginBottom: 10,
-  },
-  selected: {
-    backgroundColor: 'coral',
-    shadowOpacity: 0,
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default WidthHeightBasics;
-```
-
-</TabItem>
-</Tabs>
-
-## Position
-
-The `position` type of an element defines how it is positioned relative to either itself, its parent, or its [containing block](./flexbox.md#the-containing-block).
-
-- `relative` (**default value**) By default, an element is positioned relatively. This means an element is positioned according to the normal flow of the layout, and then offset relative to that position based on the values of `top`, `right`, `bottom`, and `left`. The offset does not affect the position of any sibling or parent elements.
-
-- `absolute` When positioned absolutely, an element doesn't take part in the normal layout flow. It is instead laid out independent of its siblings. The position is determined based on the `top`, `right`, `bottom`, and `left` values. These values will position the element relative to its containing block.
-
-- `static` When positioned statically, an element is positioned according to the normal flow of layout, and will ignore the `top`, `right`, `bottom`, and `left` values. This `position` will also cause the element to not form a containing block for absolute descendants, unless some other superceding style prop is present (e.g. `transform`). This allows `absolute` elements to be positioned to something that is not their parent. Note that **`static` is only available on the New Architecture**.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Position&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const PositionLayout = () => {
-  const [position, setPosition] = useState('relative');
-
-  return (
-    <PreviewLayout
-      label="position"
-      selectedValue={position}
-      values={['relative', 'absolute', 'static']}
-      setSelectedValue={setPosition}>
-      <View
-        style={[
-          styles.box,
-          {
-            top: 25,
-            left: 25,
-            position,
-            backgroundColor: 'powderblue',
-          },
-        ]}
-      />
-      <View
-        style={[
-          styles.box,
-          {
-            top: 50,
-            left: 50,
-            position,
-            backgroundColor: 'skyblue',
-          },
-        ]}
-      />
-      <View
-        style={[
-          styles.box,
-          {
-            top: 75,
-            left: 75,
-            position,
-            backgroundColor: 'steelblue',
-          },
-        ]}
-      />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={styles.container}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default PositionLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Position&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const PositionLayout = () => {
-  const [position, setPosition] = useState<'relative' | 'absolute' | 'static'>(
-    'relative',
-  );
-
-  return (
-    <PreviewLayout
-      label="position"
-      selectedValue={position}
-      values={['relative', 'absolute', 'static']}
-      setSelectedValue={setPosition}>
-      <View
-        style={[
-          styles.box,
-          {
-            top: 25,
-            left: 25,
-            position,
-            backgroundColor: 'powderblue',
-          },
-        ]}
-      />
-      <View
-        style={[
-          styles.box,
-          {
-            top: 50,
-            left: 50,
-            position,
-            backgroundColor: 'skyblue',
-          },
-        ]}
-      />
-      <View
-        style={[
-          styles.box,
-          {
-            top: 75,
-            left: 75,
-            position,
-            backgroundColor: 'steelblue',
-          },
-        ]}
-      />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: Array<'relative' | 'absolute' | 'static'>;
-  selectedValue: string;
-  setSelectedValue: (value: 'relative' | 'absolute' | 'static') => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={styles.container}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default PositionLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## The Containing Block
-
-The containing block of an element is an ancestor element which controls its position and size.
-The way containing blocks work in React Native is very similar to [how they work on the web](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block), with some simplifications due to the lack of some web features.
-
-The `top`, `right`, `bottom`, and `left` values of an absolutely positioned element will be
-relative to its containing block.
-
-Percentage lengths (e.g.: `width: '50%'` or `padding: '10%'`) applied to absolutely positioned elements will be calculated relatively to the size of its containing block. For example, if the containing block is 100 points wide, then `width: 50%` on an absolutely positioned element will cause it to be 50 points wide.
-
-The following list will help you determine the containing block of any given element:
-
-- If that element has a `position` type of `relative` or `static`, then its containing block is its parent.
-- If that element has a `position` type of `absolute`, then its containing block is the nearest ancestor in which one of the following is true:
-  - It has a `position` type other than `static`
-  - It has a `transform`
-
-## Going Deeper
-
-Check out the interactive [yoga playground](https://www.yogalayout.dev/playground) that you can use to get a better understanding of flexbox.
-
-We've covered the basics, but there are many other styles you may need for layouts. The full list of props that control layout is documented [here](./layout-props.md).
-
-Additionally, you can see some examples from [Wix Engineers](https://medium.com/wix-engineering/the-full-react-native-layout-cheat-sheet-a4147802405c).
+---
+id: flexbox
+title: Layout with Flexbox
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+A component can specify the layout of its children using the Flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes.
+
+You will normally use a combination of `flexDirection`, `alignItems`, and `justifyContent` to achieve the right layout.
+
+:::caution
+Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions.
+The defaults are different, with `flexDirection` defaulting to `column` instead of `row`, `alignContent` defaulting to `flex-start` instead of `stretch`, `flexShrink` defaulting to `0` instead of `1`, the `flex` parameter only supporting a single number.
+:::
+
+## Flex
+
+[`flex`](layout-props#flex) will define how your items are going to **“fill”** over the available space along your main axis. Space will be divided according to each element's flex property.
+
+In the following example, the red, orange, and green views are all children in the container view that has `flex: 1` set. The red view uses `flex: 1` , the orange view uses `flex: 2`, and the green view uses `flex: 3` . **1+2+3 = 6**, which means that the red view will get `1/6` of the space, the orange `2/6` of the space, and the green `3/6` of the space.
+
+```SnackPlayer name=Flex%20Example
+import {StyleSheet, View} from 'react-native';
+
+const Flex = () => {
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          // Try setting `flexDirection` to `"row"`.
+          flexDirection: 'column',
+        },
+      ]}>
+      <View style={{flex: 1, backgroundColor: 'red'}} />
+      <View style={{flex: 2, backgroundColor: 'darkorange'}} />
+      <View style={{flex: 3, backgroundColor: 'green'}} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+  },
+});
+
+export default Flex;
+```
+
+## Flex Direction
+
+[`flexDirection`](layout-props#flexdirection) controls the direction in which the children of a node are laid out. This is also referred to as the main axis. The cross axis is the axis perpendicular to the main axis, or the axis which the wrapping lines are laid out in.
+
+- `column` (**default value**) Align children from top to bottom. If wrapping is enabled, then the next line will start to the right of the first item on the top of the container.
+
+- `row` Align children from left to right. If wrapping is enabled, then the next line will start under the first item on the left of the container.
+
+- `column-reverse` Align children from bottom to top. If wrapping is enabled, then the next line will start to the right of the first item on the bottom of the container.
+
+- `row-reverse` Align children from right to left. If wrapping is enabled, then the next line will start under the first item on the right of the container.
+
+You can learn more [here](https://www.yogalayout.dev/docs/styling/flex-direction).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Flex%20Direction&ext=js
+import {useState} from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+
+const FlexDirectionBasics = () => {
+  const [flexDirection, setflexDirection] = useState('column');
+
+  return (
+    <PreviewLayout
+      label="flexDirection"
+      values={['column', 'row', 'column-reverse', 'row-reverse']}
+      selectedValue={flexDirection}
+      setSelectedValue={setflexDirection}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default FlexDirectionBasics;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Flex%20Direction&ext=tsx
+import {useState} from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const FlexDirectionBasics = () => {
+  const [flexDirection, setflexDirection] = useState('column');
+
+  return (
+    <PreviewLayout
+      label="flexDirection"
+      values={['column', 'row', 'column-reverse', 'row-reverse']}
+      selectedValue={flexDirection}
+      setSelectedValue={setflexDirection}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default FlexDirectionBasics;
+```
+
+</TabItem>
+</Tabs>
+
+## Layout Direction
+
+Layout [`direction`](layout-props#direction) specifies the direction in which children and text in a hierarchy should be laid out. Layout direction also affects what edge `start` and `end` refer to. By default, React Native lays out with LTR layout direction. In this mode `start` refers to left and `end` refers to right.
+
+- `LTR` (**default value**) Text and children are laid out from left to right. Margin and padding applied to the start of an element are applied on the left side.
+
+- `RTL` Text and children are laid out from right to left. Margin and padding applied to the start of an element are applied on the right side.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Flex%20Direction&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const DirectionLayout = () => {
+  const [direction, setDirection] = useState('ltr');
+
+  return (
+    <PreviewLayout
+      label="direction"
+      selectedValue={direction}
+      values={['ltr', 'rtl']}
+      setSelectedValue={setDirection}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default DirectionLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Flex%20Direction&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const DirectionLayout = () => {
+  const [direction, setDirection] = useState('ltr');
+
+  return (
+    <PreviewLayout
+      label="direction"
+      selectedValue={direction}
+      values={['ltr', 'rtl']}
+      setSelectedValue={setDirection}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default DirectionLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## Justify Content
+
+[`justifyContent`](layout-props#justifycontent) describes how to align children within the main axis of their container. For example, you can use this property to center a child horizontally within a container with `flexDirection` set to `row` or vertically within a container with `flexDirection` set to `column`.
+
+- `flex-start`(**default value**) Align children of a container to the start of the container's main axis.
+
+- `flex-end` Align children of a container to the end of the container's main axis.
+
+- `center` Align children of a container in the center of the container's main axis.
+
+- `space-between` Evenly space off children across the container's main axis, distributing the remaining space between the children.
+
+- `space-around` Evenly space off children across the container's main axis, distributing the remaining space around the children. Compared to `space-between`, using `space-around` will result in space being distributed to the beginning of the first child and end of the last child.
+
+- `space-evenly` Evenly distribute children within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.
+
+You can learn more [here](https://www.yogalayout.dev/docs/styling/justify-content).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Justify%20Content&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const JustifyContentBasics = () => {
+  const [justifyContent, setJustifyContent] = useState('flex-start');
+
+  return (
+    <PreviewLayout
+      label="justifyContent"
+      selectedValue={justifyContent}
+      values={[
+        'flex-start',
+        'flex-end',
+        'center',
+        'space-between',
+        'space-around',
+        'space-evenly',
+      ]}
+      setSelectedValue={setJustifyContent}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default JustifyContentBasics;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Justify%20Content&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const JustifyContentBasics = () => {
+  const [justifyContent, setJustifyContent] = useState('flex-start');
+
+  return (
+    <PreviewLayout
+      label="justifyContent"
+      selectedValue={justifyContent}
+      values={[
+        'flex-start',
+        'flex-end',
+        'center',
+        'space-between',
+        'space-around',
+        'space-evenly',
+      ]}
+      setSelectedValue={setJustifyContent}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default JustifyContentBasics;
+```
+
+</TabItem>
+</Tabs>
+
+## Align Items
+
+[`alignItems`](layout-props#alignitems) describes how to align children along the cross axis of their container. It is very similar to `justifyContent` but instead of applying to the main axis, `alignItems` applies to the cross axis.
+
+- `stretch` (**default value**) Stretch children of a container to match the `height` of the container's cross axis.
+
+- `flex-start` Align children of a container to the start of the container's cross axis.
+
+- `flex-end` Align children of a container to the end of the container's cross axis.
+
+- `center` Align children of a container in the center of the container's cross axis.
+
+- `baseline` Align children of a container along a common baseline. Individual children can be set to be the reference baseline for their parents.
+
+:::info
+For `stretch` to have an effect, children must not have a fixed dimension along the secondary axis. In the following example, setting `alignItems: stretch` does nothing until the `width: 50` is removed from the children.
+:::
+
+You can learn more [here](https://www.yogalayout.dev/docs/styling/align-items-self).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Align%20Items&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const AlignItemsLayout = () => {
+  const [alignItems, setAlignItems] = useState('stretch');
+
+  return (
+    <PreviewLayout
+      label="alignItems"
+      selectedValue={alignItems}
+      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
+      setSelectedValue={setAlignItems}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View
+        style={[
+          styles.box,
+          {
+            backgroundColor: 'steelblue',
+            width: 'auto',
+            minWidth: 50,
+          },
+        ]}
+      />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignItemsLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Align%20Items&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const AlignItemsLayout = () => {
+  const [alignItems, setAlignItems] = useState('stretch');
+
+  return (
+    <PreviewLayout
+      label="alignItems"
+      selectedValue={alignItems}
+      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
+      setSelectedValue={setAlignItems}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View
+        style={[
+          styles.box,
+          {
+            backgroundColor: 'steelblue',
+            width: 'auto',
+            minWidth: 50,
+          },
+        ]}
+      />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignItemsLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## Align Self
+
+[`alignSelf`](layout-props#alignself) has the same options and effect as `alignItems` but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent. `alignSelf` overrides any option set by the parent with `alignItems`.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Align%20Self&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const AlignSelfLayout = () => {
+  const [alignSelf, setAlignSelf] = useState('stretch');
+
+  return (
+    <PreviewLayout
+      label="alignSelf"
+      selectedValue={alignSelf}
+      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
+      setSelectedValue={setAlignSelf}>
+      <View
+        style={[
+          styles.box,
+          {
+            alignSelf,
+            width: 'auto',
+            minWidth: 50,
+            backgroundColor: 'powderblue',
+          },
+        ]}
+      />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={styles.container}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignSelfLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Align%20Self&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+import type {FlexAlignType} from 'react-native';
+
+const AlignSelfLayout = () => {
+  const [alignSelf, setAlignSelf] = useState<FlexAlignType>('stretch');
+
+  return (
+    <PreviewLayout
+      label="alignSelf"
+      selectedValue={alignSelf}
+      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
+      setSelectedValue={setAlignSelf}>
+      <View
+        style={[
+          styles.box,
+          {
+            alignSelf,
+            width: 'auto',
+            minWidth: 50,
+            backgroundColor: 'powderblue',
+          },
+        ]}
+      />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: FlexAlignType[];
+  selectedValue: string;
+  setSelectedValue: (value: FlexAlignType) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={styles.container}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignSelfLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## Align Content
+
+[alignContent](layout-props#aligncontent) defines the distribution of lines along the cross-axis. This only has effect when items are wrapped to multiple lines using `flexWrap`.
+
+- `flex-start` (**default value**) Align wrapped lines to the start of the container's cross axis.
+
+- `flex-end` Align wrapped lines to the end of the container's cross axis.
+
+- `stretch` (_default value when using Yoga on the web_) Stretch wrapped lines to match the height of the container's cross axis.
+
+- `center` Align wrapped lines in the center of the container's cross axis.
+
+- `space-between` Evenly space wrapped lines across the container's cross axis, distributing the remaining space between the lines.
+
+- `space-around` Evenly space wrapped lines across the container's cross axis, distributing the remaining space around the lines. Each end of the container has a half-sized space compared to the space between items.
+
+- `space-evenly` Evenly space wrapped lines across the container's cross axis, distributing the remaining space around the lines. Each space is the same size.
+
+You can learn more [here](https://www.yogalayout.dev/docs/styling/align-content).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Align%20Content&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const AlignContentLayout = () => {
+  const [alignContent, setAlignContent] = useState('flex-start');
+
+  return (
+    <PreviewLayout
+      label="alignContent"
+      selectedValue={alignContent}
+      values={[
+        'flex-start',
+        'flex-end',
+        'stretch',
+        'center',
+        'space-between',
+        'space-around',
+      ]}
+      setSelectedValue={setAlignContent}>
+      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
+      <View style={[styles.box, {backgroundColor: 'orange'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
+      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'purple'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexWrap: 'wrap',
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignContentLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Align%20Content&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const AlignContentLayout = () => {
+  const [alignContent, setAlignContent] = useState('flex-start');
+
+  return (
+    <PreviewLayout
+      label="alignContent"
+      selectedValue={alignContent}
+      values={[
+        'flex-start',
+        'flex-end',
+        'stretch',
+        'center',
+        'space-between',
+        'space-around',
+      ]}
+      setSelectedValue={setAlignContent}>
+      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
+      <View style={[styles.box, {backgroundColor: 'orange'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
+      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'purple'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexWrap: 'wrap',
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignContentLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## Flex Wrap
+
+The [`flexWrap`](layout-props#flexwrap) property is set on containers and it controls what happens when children overflow the size of the container along the main axis. By default, children are forced into a single line (which can shrink elements). If wrapping is allowed, items are wrapped into multiple lines along the main axis if needed.
+
+When wrapping lines, `alignContent` can be used to specify how the lines are placed in the container. Learn more [here](https://www.yogalayout.dev/docs/styling/flex-wrap).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Flex%20Wrap&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const FlexWrapLayout = () => {
+  const [flexWrap, setFlexWrap] = useState('wrap');
+
+  return (
+    <PreviewLayout
+      label="flexWrap"
+      selectedValue={flexWrap}
+      values={['wrap', 'nowrap']}
+      setSelectedValue={setFlexWrap}>
+      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
+      <View style={[styles.box, {backgroundColor: 'orange'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
+      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'purple'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default FlexWrapLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Flex%20Wrap&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const FlexWrapLayout = () => {
+  const [flexWrap, setFlexWrap] = useState('wrap');
+
+  return (
+    <PreviewLayout
+      label="flexWrap"
+      selectedValue={flexWrap}
+      values={['wrap', 'nowrap']}
+      setSelectedValue={setFlexWrap}>
+      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
+      <View style={[styles.box, {backgroundColor: 'orange'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
+      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'purple'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default FlexWrapLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## Flex Basis, Grow, and Shrink
+
+- [`flexBasis`](layout-props#flexbasis) is an axis-independent way of providing the default size of an item along the main axis. Setting the `flexBasis` of a child is similar to setting the `width` of that child if its parent is a container with `flexDirection: row` or setting the `height` of a child if its parent is a container with `flexDirection: column`. The `flexBasis` of an item is the default size of that item, the size of the item before any `flexGrow` and `flexShrink` calculations are performed.
+
+- [`flexGrow`](layout-props#flexgrow) describes how much space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
+
+  `flexGrow` accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the children’s `flexGrow` values.
+
+- [`flexShrink`](layout-props#flexshrink) describes how to shrink children along the main axis in the case in which the total size of the children overflows the size of the container on the main axis. `flexShrink` is very similar to `flexGrow` and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed.
+
+  `flexShrink` accepts any floating point value >= 0, with 0 being the default value (on the web, the default is 1). A container will shrink its children weighted by the children’s `flexShrink` values.
+
+You can learn more [here](https://www.yogalayout.dev/docs/styling/flex-basis-grow-shrink).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink&ext=js
+import {useState} from 'react';
+import {View, Text, TextInput, StyleSheet} from 'react-native';
+
+const App = () => {
+  const [powderblue, setPowderblue] = useState({
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: 'auto',
+  });
+  const [skyblue, setSkyblue] = useState({
+    flexGrow: 1,
+    flexShrink: 0,
+    flexBasis: 100,
+  });
+  const [steelblue, setSteelblue] = useState({
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: 200,
+  });
+  return (
+    <View style={styles.container}>
+      <View
+        style={[
+          styles.container,
+          {
+            flexDirection: 'row',
+            alignContent: 'space-between',
+          },
+        ]}>
+        <BoxInfo color="powderblue" {...powderblue} setStyle={setPowderblue} />
+        <BoxInfo color="skyblue" {...skyblue} setStyle={setSkyblue} />
+        <BoxInfo color="steelblue" {...steelblue} setStyle={setSteelblue} />
+      </View>
+      <View style={styles.previewContainer}>
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: powderblue.flexBasis,
+              flexGrow: powderblue.flexGrow,
+              flexShrink: powderblue.flexShrink,
+              backgroundColor: 'powderblue',
+            },
+          ]}
+        />
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: skyblue.flexBasis,
+              flexGrow: skyblue.flexGrow,
+              flexShrink: skyblue.flexShrink,
+              backgroundColor: 'skyblue',
+            },
+          ]}
+        />
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: steelblue.flexBasis,
+              flexGrow: steelblue.flexGrow,
+              flexShrink: steelblue.flexShrink,
+              backgroundColor: 'steelblue',
+            },
+          ]}
+        />
+      </View>
+    </View>
+  );
+};
+
+const BoxInfo = ({color, flexBasis, flexShrink, setStyle, flexGrow}) => (
+  <View style={[styles.row, {flexDirection: 'column'}]}>
+    <View
+      style={[
+        styles.boxLabel,
+        {
+          backgroundColor: color,
+        },
+      ]}>
+      <Text
+        style={{
+          color: '#fff',
+          fontWeight: '500',
+          textAlign: 'center',
+        }}>
+        Box
+      </Text>
+    </View>
+    <Text style={styles.label}>flexBasis</Text>
+    <TextInput
+      value={flexBasis}
+      style={styles.input}
+      onChangeText={fB =>
+        setStyle(value => ({
+          ...value,
+          flexBasis: isNaN(parseInt(fB, 10)) ? 'auto' : parseInt(fB, 10),
+        }))
+      }
+    />
+    <Text style={styles.label}>flexShrink</Text>
+    <TextInput
+      value={flexShrink}
+      style={styles.input}
+      onChangeText={fS =>
+        setStyle(value => ({
+          ...value,
+          flexShrink: isNaN(parseInt(fS, 10)) ? undefined : parseInt(fS, 10),
+        }))
+      }
+    />
+    <Text style={styles.label}>flexGrow</Text>
+    <TextInput
+      value={flexGrow}
+      style={styles.input}
+      onChangeText={fG =>
+        setStyle(value => ({
+          ...value,
+          flexGrow: isNaN(parseInt(fG, 10)) ? undefined : parseInt(fG, 10),
+        }))
+      }
+    />
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 10,
+  },
+  box: {
+    flex: 1,
+    height: 50,
+    width: 50,
+  },
+  boxLabel: {
+    minWidth: 80,
+    padding: 8,
+    borderRadius: 4,
+    marginTop: 8,
+  },
+  label: {
+    marginTop: 6,
+    fontSize: 16,
+    fontWeight: '100',
+  },
+  previewContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    backgroundColor: 'aliceblue',
+  },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  input: {
+    borderBottomWidth: 1,
+    paddingVertical: 3,
+    width: 50,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink&ext=tsx
+import {useState, type Dispatch, type SetStateAction} from 'react';
+import {View, Text, TextInput, StyleSheet} from 'react-native';
+import type {ViewStyle} from 'react-native';
+
+const App = () => {
+  const [powderblue, setPowderblue] = useState<ViewStyle>({
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: 'auto',
+  });
+  const [skyblue, setSkyblue] = useState<ViewStyle>({
+    flexGrow: 1,
+    flexShrink: 0,
+    flexBasis: 100,
+  });
+  const [steelblue, setSteelblue] = useState<ViewStyle>({
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: 200,
+  });
+  return (
+    <View style={styles.container}>
+      <View
+        style={[
+          styles.container,
+          {
+            flexDirection: 'row',
+            alignContent: 'space-between',
+          },
+        ]}>
+        <BoxInfo color="powderblue" {...powderblue} setStyle={setPowderblue} />
+        <BoxInfo color="skyblue" {...skyblue} setStyle={setSkyblue} />
+        <BoxInfo color="steelblue" {...steelblue} setStyle={setSteelblue} />
+      </View>
+      <View style={styles.previewContainer}>
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: powderblue.flexBasis,
+              flexGrow: powderblue.flexGrow,
+              flexShrink: powderblue.flexShrink,
+              backgroundColor: 'powderblue',
+            },
+          ]}
+        />
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: skyblue.flexBasis,
+              flexGrow: skyblue.flexGrow,
+              flexShrink: skyblue.flexShrink,
+              backgroundColor: 'skyblue',
+            },
+          ]}
+        />
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: steelblue.flexBasis,
+              flexGrow: steelblue.flexGrow,
+              flexShrink: steelblue.flexShrink,
+              backgroundColor: 'steelblue',
+            },
+          ]}
+        />
+      </View>
+    </View>
+  );
+};
+
+type BoxInfoProps = ViewStyle & {
+  color: string;
+  setStyle: Dispatch<SetStateAction<ViewStyle>>;
+};
+
+const BoxInfo = ({
+  color,
+  flexBasis,
+  flexShrink,
+  setStyle,
+  flexGrow,
+}: BoxInfoProps) => (
+  <View style={[styles.row, {flexDirection: 'column'}]}>
+    <View
+      style={[
+        styles.boxLabel,
+        {
+          backgroundColor: color,
+        },
+      ]}>
+      <Text
+        style={{
+          color: '#fff',
+          fontWeight: '500',
+          textAlign: 'center',
+        }}>
+        Box
+      </Text>
+    </View>
+    <Text style={styles.label}>flexBasis</Text>
+    <TextInput
+      value={String(flexBasis)}
+      style={styles.input}
+      onChangeText={fB =>
+        setStyle(value => ({
+          ...value,
+          flexBasis: isNaN(parseInt(fB, 10)) ? 'auto' : parseInt(fB, 10),
+        }))
+      }
+    />
+    <Text style={styles.label}>flexShrink</Text>
+    <TextInput
+      value={String(flexShrink)}
+      style={styles.input}
+      onChangeText={fS =>
+        setStyle(value => ({
+          ...value,
+          flexShrink: isNaN(parseInt(fS, 10)) ? undefined : parseInt(fS, 10),
+        }))
+      }
+    />
+    <Text style={styles.label}>flexGrow</Text>
+    <TextInput
+      value={String(flexGrow)}
+      style={styles.input}
+      onChangeText={fG =>
+        setStyle(value => ({
+          ...value,
+          flexGrow: isNaN(parseInt(fG, 10)) ? undefined : parseInt(fG, 10),
+        }))
+      }
+    />
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 10,
+  },
+  box: {
+    flex: 1,
+    height: 50,
+    width: 50,
+  },
+  boxLabel: {
+    minWidth: 80,
+    padding: 8,
+    borderRadius: 4,
+    marginTop: 8,
+  },
+  label: {
+    marginTop: 6,
+    fontSize: 16,
+    fontWeight: '100',
+  },
+  previewContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    backgroundColor: 'aliceblue',
+  },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  input: {
+    borderBottomWidth: 1,
+    paddingVertical: 3,
+    width: 50,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+## Row Gap, Column Gap and Gap
+
+- [`rowGap`](layout-props#rowgap) sets the size of the gap (gutter) between an element's rows.
+
+- [`columnGap`](layout-props#columngap) sets the size of the gap (gutter) between an element's columns.
+
+- [`gap`](layout-props#gap) sets the size of the gap (gutter) between rows and columns. It is a shorthand for `rowGap` and `columnGap`.
+
+You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Row%20Gap%20and%20Column%20Gap&ext=js
+import {useState} from 'react';
+import {View, Text, StyleSheet, TextInput} from 'react-native';
+
+const RowGapAndColumnGap = () => {
+  const [rowGap, setRowGap] = useState(10);
+  const [columnGap, setColumnGap] = useState(10);
+
+  return (
+    <PreviewLayout
+      columnGap={columnGap}
+      handleColumnGapChange={setColumnGap}
+      rowGap={rowGap}
+      handleRowGapChange={setRowGap}>
+      <View style={[styles.box, styles.box1]} />
+      <View style={[styles.box, styles.box2]} />
+      <View style={[styles.box, styles.box3]} />
+      <View style={[styles.box, styles.box4]} />
+      <View style={[styles.box, styles.box5]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  children,
+  handleColumnGapChange,
+  handleRowGapChange,
+  rowGap,
+  columnGap,
+}) => (
+  <View style={styles.previewContainer}>
+    <View style={styles.inputContainer}>
+      <View style={styles.itemsCenter}>
+        <Text>Row Gap</Text>
+        <TextInput
+          style={styles.input}
+          value={rowGap}
+          onChangeText={v => handleRowGapChange(Number(v))}
+        />
+      </View>
+      <View style={styles.itemsCenter}>
+        <Text>Column Gap</Text>
+        <TextInput
+          style={styles.input}
+          value={columnGap}
+          onChangeText={v => handleColumnGapChange(Number(v))}
+        />
+      </View>
+    </View>
+    <View style={[styles.container, {rowGap, columnGap}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  itemsCenter: {alignItems: 'center'},
+  inputContainer: {
+    gap: 4,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+  previewContainer: {padding: 10, flex: 1},
+  input: {
+    borderBottomWidth: 1,
+    paddingVertical: 3,
+    width: 50,
+    textAlign: 'center',
+  },
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+    flexWrap: 'wrap',
+    alignContent: 'flex-start',
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  box1: {
+    backgroundColor: 'orangered',
+  },
+  box2: {
+    backgroundColor: 'orange',
+  },
+  box3: {
+    backgroundColor: 'mediumseagreen',
+  },
+  box4: {
+    backgroundColor: 'deepskyblue',
+  },
+  box5: {
+    backgroundColor: 'mediumturquoise',
+  },
+});
+
+export default RowGapAndColumnGap;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Row%20Gap%20and%20Column%20Gap&ext=tsx
+import {useState} from 'react';
+import {View, Text, StyleSheet, TextInput} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const RowGapAndColumnGap = () => {
+  const [rowGap, setRowGap] = useState(10);
+  const [columnGap, setColumnGap] = useState(10);
+
+  return (
+    <PreviewLayout
+      columnGap={columnGap}
+      handleColumnGapChange={setColumnGap}
+      rowGap={rowGap}
+      handleRowGapChange={setRowGap}>
+      <View style={[styles.box, styles.box1]} />
+      <View style={[styles.box, styles.box2]} />
+      <View style={[styles.box, styles.box3]} />
+      <View style={[styles.box, styles.box4]} />
+      <View style={[styles.box, styles.box5]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  columnGap: number;
+  handleColumnGapChange: (gap: number) => void;
+  rowGap: number;
+  handleRowGapChange: (gap: number) => void;
+}>;
+
+const PreviewLayout = ({
+  children,
+  handleColumnGapChange,
+  handleRowGapChange,
+  rowGap,
+  columnGap,
+}: PreviewLayoutProps) => (
+  <View style={styles.previewContainer}>
+    <View style={styles.inputContainer}>
+      <View style={styles.itemsCenter}>
+        <Text>Row Gap</Text>
+        <TextInput
+          style={styles.input}
+          value={String(rowGap)}
+          onChangeText={v => handleRowGapChange(Number(v))}
+        />
+      </View>
+      <View style={styles.itemsCenter}>
+        <Text>Column Gap</Text>
+        <TextInput
+          style={styles.input}
+          value={String(columnGap)}
+          onChangeText={v => handleColumnGapChange(Number(v))}
+        />
+      </View>
+    </View>
+    <View style={[styles.container, {rowGap, columnGap}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  itemsCenter: {alignItems: 'center'},
+  inputContainer: {
+    gap: 4,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+  previewContainer: {padding: 10, flex: 1},
+  input: {
+    borderBottomWidth: 1,
+    paddingVertical: 3,
+    width: 50,
+    textAlign: 'center',
+  },
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+    flexWrap: 'wrap',
+    alignContent: 'flex-start',
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  box1: {
+    backgroundColor: 'orangered',
+  },
+  box2: {
+    backgroundColor: 'orange',
+  },
+  box3: {
+    backgroundColor: 'mediumseagreen',
+  },
+  box4: {
+    backgroundColor: 'deepskyblue',
+  },
+  box5: {
+    backgroundColor: 'mediumturquoise',
+  },
+});
+
+export default RowGapAndColumnGap;
+```
+
+</TabItem>
+</Tabs>
+
+## Width and Height
+
+The `width` property specifies the width of an element's content area. Similarly, the `height` property specifies the height of an element's content area.
+
+Both `width` and `height` can take the following values:
+
+- `auto` (**default value**) React Native calculates the width/height for the element based on its content, whether that is other children, text, or an image.
+
+- `pixels` Defines the width/height in absolute pixels. Depending on other styles set on the component, this may or may not be the final dimension of the node.
+
+- `percentage` Defines the width or height in percentage of its parent's width or height, respectively.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Width%20and%20Height&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const WidthHeightBasics = () => {
+  const [widthType, setWidthType] = useState('auto');
+  const [heightType, setHeightType] = useState('auto');
+
+  return (
+    <PreviewLayout
+      widthType={widthType}
+      heightType={heightType}
+      widthValues={['auto', 300, '80%']}
+      heightValues={['auto', 200, '60%']}
+      setWidthType={setWidthType}
+      setHeightType={setHeightType}>
+      <View
+        style={{
+          alignSelf: 'flex-start',
+          backgroundColor: 'aliceblue',
+          height: heightType,
+          width: widthType,
+          padding: 15,
+        }}>
+        <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+        <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+        <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+      </View>
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  children,
+  widthType,
+  heightType,
+  widthValues,
+  heightValues,
+  setWidthType,
+  setHeightType,
+}) => (
+  <SafeAreaProvider>
+    <SafeAreaView style={{flex: 1, padding: 10}}>
+      <View style={styles.row}>
+        <Text style={styles.label}>width </Text>
+        {widthValues.map(value => (
+          <TouchableOpacity
+            key={value}
+            onPress={() => setWidthType(value)}
+            style={[styles.button, widthType === value && styles.selected]}>
+            <Text
+              style={[
+                styles.buttonLabel,
+                widthType === value && styles.selectedLabel,
+              ]}>
+              {value}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+      <View style={styles.row}>
+        <Text style={styles.label}>height </Text>
+        {heightValues.map(value => (
+          <TouchableOpacity
+            key={value}
+            onPress={() => setHeightType(value)}
+            style={[styles.button, heightType === value && styles.selected]}>
+            <Text
+              style={[
+                styles.buttonLabel,
+                heightType === value && styles.selectedLabel,
+              ]}>
+              {value}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+      {children}
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    padding: 8,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginRight: 10,
+    marginBottom: 10,
+  },
+  selected: {
+    backgroundColor: 'coral',
+    shadowOpacity: 0,
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default WidthHeightBasics;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Width%20and%20Height&ext=tsx
+import {useState, PropsWithChildren} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+type Dimension = 'auto' | `${number}%` | number;
+
+const WidthHeightBasics = () => {
+  const [widthType, setWidthType] = useState<Dimension>('auto');
+  const [heightType, setHeightType] = useState<Dimension>('auto');
+
+  return (
+    <PreviewLayout
+      widthType={widthType}
+      heightType={heightType}
+      widthValues={['auto', 300, '80%']}
+      heightValues={['auto', 200, '60%']}
+      setWidthType={setWidthType}
+      setHeightType={setHeightType}>
+      <View
+        style={{
+          alignSelf: 'flex-start',
+          backgroundColor: 'aliceblue',
+          height: heightType,
+          width: widthType,
+          padding: 15,
+        }}>
+        <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+        <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+        <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+      </View>
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  widthType: Dimension;
+  heightType: Dimension;
+  widthValues: Dimension[];
+  heightValues: Dimension[];
+  setWidthType: (value: Dimension) => void;
+  setHeightType: (value: Dimension) => void;
+}>;
+
+const PreviewLayout = ({
+  children,
+  widthType,
+  heightType,
+  widthValues,
+  heightValues,
+  setWidthType,
+  setHeightType,
+}: PreviewLayoutProps) => (
+  <SafeAreaProvider>
+    <SafeAreaView style={{flex: 1, padding: 10}}>
+      <View style={styles.row}>
+        <Text style={styles.label}>width </Text>
+        {widthValues.map(value => (
+          <TouchableOpacity
+            key={value}
+            onPress={() => setWidthType(value)}
+            style={[styles.button, widthType === value && styles.selected]}>
+            <Text
+              style={[
+                styles.buttonLabel,
+                widthType === value && styles.selectedLabel,
+              ]}>
+              {value}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+      <View style={styles.row}>
+        <Text style={styles.label}>height </Text>
+        {heightValues.map(value => (
+          <TouchableOpacity
+            key={value}
+            onPress={() => setHeightType(value)}
+            style={[styles.button, heightType === value && styles.selected]}>
+            <Text
+              style={[
+                styles.buttonLabel,
+                heightType === value && styles.selectedLabel,
+              ]}>
+              {value}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+      {children}
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    padding: 8,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginRight: 10,
+    marginBottom: 10,
+  },
+  selected: {
+    backgroundColor: 'coral',
+    shadowOpacity: 0,
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default WidthHeightBasics;
+```
+
+</TabItem>
+</Tabs>
+
+## Position
+
+The `position` type of an element defines how it is positioned relative to either itself, its parent, or its [containing block](./flexbox.md#the-containing-block).
+
+- `relative` (**default value**) By default, an element is positioned relatively. This means an element is positioned according to the normal flow of the layout, and then offset relative to that position based on the values of `top`, `right`, `bottom`, and `left`. The offset does not affect the position of any sibling or parent elements.
+
+- `absolute` When positioned absolutely, an element doesn't take part in the normal layout flow. It is instead laid out independent of its siblings. The position is determined based on the `top`, `right`, `bottom`, and `left` values. These values will position the element relative to its containing block.
+
+- `static` When positioned statically, an element is positioned according to the normal flow of layout, and will ignore the `top`, `right`, `bottom`, and `left` values. This `position` will also cause the element to not form a containing block for absolute descendants, unless some other superceding style prop is present (e.g. `transform`). This allows `absolute` elements to be positioned to something that is not their parent. Note that **`static` is only available on the New Architecture**.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Position&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const PositionLayout = () => {
+  const [position, setPosition] = useState('relative');
+
+  return (
+    <PreviewLayout
+      label="position"
+      selectedValue={position}
+      values={['relative', 'absolute', 'static']}
+      setSelectedValue={setPosition}>
+      <View
+        style={[
+          styles.box,
+          {
+            top: 25,
+            left: 25,
+            position,
+            backgroundColor: 'powderblue',
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.box,
+          {
+            top: 50,
+            left: 50,
+            position,
+            backgroundColor: 'skyblue',
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.box,
+          {
+            top: 75,
+            left: 75,
+            position,
+            backgroundColor: 'steelblue',
+          },
+        ]}
+      />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={styles.container}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default PositionLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Position&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const PositionLayout = () => {
+  const [position, setPosition] = useState<'relative' | 'absolute' | 'static'>(
+    'relative',
+  );
+
+  return (
+    <PreviewLayout
+      label="position"
+      selectedValue={position}
+      values={['relative', 'absolute', 'static']}
+      setSelectedValue={setPosition}>
+      <View
+        style={[
+          styles.box,
+          {
+            top: 25,
+            left: 25,
+            position,
+            backgroundColor: 'powderblue',
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.box,
+          {
+            top: 50,
+            left: 50,
+            position,
+            backgroundColor: 'skyblue',
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.box,
+          {
+            top: 75,
+            left: 75,
+            position,
+            backgroundColor: 'steelblue',
+          },
+        ]}
+      />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: Array<'relative' | 'absolute' | 'static'>;
+  selectedValue: string;
+  setSelectedValue: (value: 'relative' | 'absolute' | 'static') => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={styles.container}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default PositionLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## The Containing Block
+
+The containing block of an element is an ancestor element which controls its position and size.
+The way containing blocks work in React Native is very similar to [how they work on the web](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block), with some simplifications due to the lack of some web features.
+
+The `top`, `right`, `bottom`, and `left` values of an absolutely positioned element will be
+relative to its containing block.
+
+Percentage lengths (e.g.: `width: '50%'` or `padding: '10%'`) applied to absolutely positioned elements will be calculated relatively to the size of its containing block. For example, if the containing block is 100 points wide, then `width: 50%` on an absolutely positioned element will cause it to be 50 points wide.
+
+The following list will help you determine the containing block of any given element:
+
+- If that element has a `position` type of `relative` or `static`, then its containing block is its parent.
+- If that element has a `position` type of `absolute`, then its containing block is the nearest ancestor in which one of the following is true:
+  - It has a `position` type other than `static`
+  - It has a `transform`
+
+## Going Deeper
+
+Check out the interactive [yoga playground](https://www.yogalayout.dev/playground) that you can use to get a better understanding of flexbox.
+
+We've covered the basics, but there are many other styles you may need for layouts. The full list of props that control layout is documented [here](./layout-props.md).
+
+Additionally, you can see some examples from [Wix Engineers](https://medium.com/wix-engineering/the-full-react-native-layout-cheat-sheet-a4147802405c).
diff --git a/website/versioned_docs/version-0.82/handling-text-input.md b/website/versioned_docs/version-0.82/handling-text-input.md
index 6db00cae840..be56c292f03 100644
--- a/website/versioned_docs/version-0.82/handling-text-input.md
+++ b/website/versioned_docs/version-0.82/handling-text-input.md
@@ -1,48 +1,48 @@
----
-id: handling-text-input
-title: Handling Text Input
----
-
-[`TextInput`](textinput#content) is a [Core Component](intro-react-native-components) that allows the user to enter text. It has an `onChangeText` prop that takes a function to be called every time the text changed, and an `onSubmitEditing` prop that takes a function to be called when the text is submitted.
-
-For example, let's say that as the user types, you're translating their words into a different language. In this new language, every single word is written the same way: 🍕. So the sentence "Hello there Bob" would be translated as "🍕 🍕 🍕".
-
-```SnackPlayer name=Handling%20Text%20Input
-import React, {useState} from 'react';
-import {Text, TextInput, View} from 'react-native';
-
-const PizzaTranslator = () => {
-  const [text, setText] = useState('');
-  return (
-    <View style={{flex: 1, justifyContent: 'center'}}>
-      <TextInput
-        placeholder="Type here to translate!"
-        onChangeText={newText => setText(newText)}
-        defaultValue={text}
-        style={{
-          height: 40,
-          padding: 5,
-          marginHorizontal: 8,
-          borderWidth: 1,
-        }}
-      />
-      <Text style={{padding: 10, fontSize: 42}}>
-        {text
-          .split(' ')
-          .map(word => word && '🍕')
-          .join(' ')}
-      </Text>
-    </View>
-  );
-};
-
-export default PizzaTranslator;
-```
-
-In this example, we store `text` in the state, because it changes over time.
-
-There are a lot more things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the [React docs on controlled components](https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable), or the [reference docs for TextInput](textinput.md).
-
-A `TextInput` is one of many ways for the user to interact with your app. For examples of other ways to handle input, see the documentation on [how to handle touches](handling-touches.md).
-
-Now, let's take a look at [ScrollView](using-a-scrollview), another Core Component.
+---
+id: handling-text-input
+title: Handling Text Input
+---
+
+[`TextInput`](textinput#content) is a [Core Component](intro-react-native-components) that allows the user to enter text. It has an `onChangeText` prop that takes a function to be called every time the text changed, and an `onSubmitEditing` prop that takes a function to be called when the text is submitted.
+
+For example, let's say that as the user types, you're translating their words into a different language. In this new language, every single word is written the same way: 🍕. So the sentence "Hello there Bob" would be translated as "🍕 🍕 🍕".
+
+```SnackPlayer name=Handling%20Text%20Input
+import {useState} from 'react';
+import {Text, TextInput, View} from 'react-native';
+
+const PizzaTranslator = () => {
+  const [text, setText] = useState('');
+  return (
+    <View style={{flex: 1, justifyContent: 'center'}}>
+      <TextInput
+        placeholder="Type here to translate!"
+        onChangeText={newText => setText(newText)}
+        defaultValue={text}
+        style={{
+          height: 40,
+          padding: 5,
+          marginHorizontal: 8,
+          borderWidth: 1,
+        }}
+      />
+      <Text style={{padding: 10, fontSize: 42}}>
+        {text
+          .split(' ')
+          .map(word => word && '🍕')
+          .join(' ')}
+      </Text>
+    </View>
+  );
+};
+
+export default PizzaTranslator;
+```
+
+In this example, we store `text` in the state, because it changes over time.
+
+There are a lot more things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the [React docs on controlled components](https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable), or the [reference docs for TextInput](textinput.md).
+
+A `TextInput` is one of many ways for the user to interact with your app. For examples of other ways to handle input, see the documentation on [how to handle touches](handling-touches.md).
+
+Now, let's take a look at [ScrollView](using-a-scrollview), another Core Component.
diff --git a/website/versioned_docs/version-0.82/handling-touches.md b/website/versioned_docs/version-0.82/handling-touches.md
index 612287f6e10..b9604b393c0 100644
--- a/website/versioned_docs/version-0.82/handling-touches.md
+++ b/website/versioned_docs/version-0.82/handling-touches.md
@@ -25,7 +25,6 @@ This will render a blue label on iOS, and a blue rounded rectangle with light te
 Go ahead and play around with the `Button` component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right and then clicking on "Tap to Play" to preview the app.
 
 ```SnackPlayer name=Button%20Basics
-import React from 'react';
 import {Alert, Button, StyleSheet, View} from 'react-native';
 
 const ButtonBasics = () => {
@@ -86,7 +85,6 @@ In some cases, you may want to detect when a user presses and holds a view for a
 Let's see all of these in action:
 
 ```SnackPlayer name=Touchables
-import React from 'react';
 import {
   Alert,
   Platform,
diff --git a/website/versioned_docs/version-0.82/height-and-width.md b/website/versioned_docs/version-0.82/height-and-width.md
index 485667831cd..b768626716e 100644
--- a/website/versioned_docs/version-0.82/height-and-width.md
+++ b/website/versioned_docs/version-0.82/height-and-width.md
@@ -10,7 +10,6 @@ A component's height and width determine its size on the screen.
 The general way to set the dimensions of a component is by adding a fixed `width` and `height` to style. All dimensions in React Native are unitless, and represent density-independent pixels.
 
 ```SnackPlayer name=Height%20and%20Width
-import React from 'react';
 import {View} from 'react-native';
 
 const FixedDimensionsBasics = () => {
@@ -59,7 +58,6 @@ A component can only expand to fill available space if its parent has dimensions
 :::
 
 ```SnackPlayer name=Flex%20Dimensions
-import React from 'react';
 import {View} from 'react-native';
 
 const FlexDimensionsBasics = () => {
@@ -85,7 +83,6 @@ After you can control a component's size, the next step is to [learn how to lay
 If you want to fill a certain portion of the screen, but you _don't_ want to use the `flex` layout, you _can_ use **percentage values** in the component's style. Similar to flex dimensions, percentage dimensions require parent with a defined size.
 
 ```SnackPlayer name=Percentage%20Dimensions
-import React from 'react';
 import {View} from 'react-native';
 
 const PercentageDimensionsBasics = () => {
diff --git a/website/versioned_docs/version-0.82/i18nmanager.md b/website/versioned_docs/version-0.82/i18nmanager.md
index 80ccd2ccd72..2593a0e45c4 100644
--- a/website/versioned_docs/version-0.82/i18nmanager.md
+++ b/website/versioned_docs/version-0.82/i18nmanager.md
@@ -1,169 +1,168 @@
----
-id: i18nmanager
-title: I18nManager
----
-
-# I18nManager
-
-The `I18nManager` module provides utilities for managing Right-to-Left (RTL) layout support for languages like Arabic, Hebrew, and others. It provides methods to control RTL behavior and check the current layout direction.
-
-## Examples
-
-### Change positions and animations based on RTL
-
-If you absolutely position elements to align with other flexbox elements, they may not align in RTL languages. Using `isRTL` can be used to adjust alignment or animations.
-
-```SnackPlayer name=I18nManager%20Change%20Absolute%20Positions%20And%20Animations
-import React from 'react';
-import {I18nManager, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  // Change to `true` to see the effect in a non-RTL language
-  const isRTL = I18nManager.isRTL;
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView>
-        <View
-          style={{
-            position: 'absolute',
-            left: isRTL ? undefined : 0,
-            right: isRTL ? 0 : undefined,
-          }}>
-          {isRTL ? <Text>Back &gt;</Text> : <Text>&lt; Back</Text>}
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-export default App;
-```
-
-### During Development
-
-```SnackPlayer name=I18nManager%20During%20Development
-import React, {useState} from 'react';
-import {Alert, I18nManager, StyleSheet, Switch, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [rtl, setRTL] = useState(I18nManager.isRTL);
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView>
-        <View style={styles.container}>
-          <View style={styles.forceRtl}>
-            <Text>Force RTL in Development:</Text>
-            <Switch
-              value={rtl}
-              onValueChange={value => {
-                setRTL(value);
-                I18nManager.forceRTL(value);
-                Alert.alert(
-                  'Reload this page',
-                  'Please reload this page to change the UI direction! ' +
-                    'All examples in this app will be affected. ' +
-                    'Check them out to see what they look like in RTL layout.',
-                );
-              }}
-            />
-          </View>
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    padding: 20,
-  },
-  forceRtl: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-# Reference
-
-## Properties
-
-### `isRTL`
-
-```typescript
-static isRTL: boolean;
-```
-
-A boolean value indicating whether the app is currently in RTL layout mode.
-
-The value of `isRTL` is determined by the following logic:
-
-- If `forceRTL` is `true`, `isRTL` returns `true`
-- If `allowRTL` is `false`, `isRTL` returns `false`
-- Otherwise, `isRTL` will be `true` given the following:
-  - **iOS:**
-    - The user-preferred language on the device is an RTL language
-    - The application-defined localizations include the user-chosen language (as defined in the Xcode project file (`knownRegions = (...)`)
-  - **Android:**
-    - The user-preferred language on the device is an RTL language
-    - The application's `AndroidManifest.xml` defines `android:supportsRTL="true"` on the `<application>` element
-
-### `doLeftAndRightSwapInRTL`
-
-```typescript
-static doLeftAndRightSwapInRTL: boolean;
-```
-
-A boolean value indicating whether left and right style properties should be automatically swapped when in RTL mode. When enabled, left becomes right and right becomes left in RTL layouts.
-
-## Methods
-
-### `allowRTL()`
-
-```typescript
-static allowRTL: (allowRTL: boolean) => void;
-```
-
-Enables or disables RTL layout support for the application.
-
-**Parameters:**
-
-- `allowRTL` (boolean): Whether to allow RTL layout
-
-**Important Notes:**
-
-- Changes take effect on the next application start, not immediately
-- This setting is persisted across app restarts
-
-### `forceRTL()`
-
-```typescript
-static forceRTL: (forced: boolean) => void;
-```
-
-Forces the app to use RTL layout regardless of the device language settings. This is primarily useful for testing RTL layouts during development.
-
-Avoid forcing RTL in production apps as it requires a full app restart to take effect, which makes for a poor user-experience.
-
-**Parameters:**
-
-- `forced` (boolean): Whether to force RTL layout
-
-**Important Notes:**
-
-- Changes take full effect on the next application start, not immediately
-- The setting is persisted across app restarts
-- Only meant for development and testing. In production, you should either disallow RTL fully or handle it appropriately (see `isRTL`)
-
-### `swapLeftAndRightInRTL()`
-
-```typescript
-static swapLeftAndRightInRTL: (swapLeftAndRight: boolean) => void;
-```
-
-Swap left and right style properties in RTL mode. When enabled, left becomes right and right becomes left in RTL layouts. Does not affect the value of `isRTL`.
+---
+id: i18nmanager
+title: I18nManager
+---
+
+# I18nManager
+
+The `I18nManager` module provides utilities for managing Right-to-Left (RTL) layout support for languages like Arabic, Hebrew, and others. It provides methods to control RTL behavior and check the current layout direction.
+
+## Examples
+
+### Change positions and animations based on RTL
+
+If you absolutely position elements to align with other flexbox elements, they may not align in RTL languages. Using `isRTL` can be used to adjust alignment or animations.
+
+```SnackPlayer name=I18nManager%20Change%20Absolute%20Positions%20And%20Animations
+import {I18nManager, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  // Change to `true` to see the effect in a non-RTL language
+  const isRTL = I18nManager.isRTL;
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView>
+        <View
+          style={{
+            position: 'absolute',
+            left: isRTL ? undefined : 0,
+            right: isRTL ? 0 : undefined,
+          }}>
+          {isRTL ? <Text>Back &gt;</Text> : <Text>&lt; Back</Text>}
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+export default App;
+```
+
+### During Development
+
+```SnackPlayer name=I18nManager%20During%20Development
+import {useState} from 'react';
+import {Alert, I18nManager, StyleSheet, Switch, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [rtl, setRTL] = useState(I18nManager.isRTL);
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView>
+        <View style={styles.container}>
+          <View style={styles.forceRtl}>
+            <Text>Force RTL in Development:</Text>
+            <Switch
+              value={rtl}
+              onValueChange={value => {
+                setRTL(value);
+                I18nManager.forceRTL(value);
+                Alert.alert(
+                  'Reload this page',
+                  'Please reload this page to change the UI direction! ' +
+                    'All examples in this app will be affected. ' +
+                    'Check them out to see what they look like in RTL layout.',
+                );
+              }}
+            />
+          </View>
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 20,
+  },
+  forceRtl: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+# Reference
+
+## Properties
+
+### `isRTL`
+
+```typescript
+static isRTL: boolean;
+```
+
+A boolean value indicating whether the app is currently in RTL layout mode.
+
+The value of `isRTL` is determined by the following logic:
+
+- If `forceRTL` is `true`, `isRTL` returns `true`
+- If `allowRTL` is `false`, `isRTL` returns `false`
+- Otherwise, `isRTL` will be `true` given the following:
+  - **iOS:**
+    - The user-preferred language on the device is an RTL language
+    - The application-defined localizations include the user-chosen language (as defined in the Xcode project file (`knownRegions = (...)`)
+  - **Android:**
+    - The user-preferred language on the device is an RTL language
+    - The application's `AndroidManifest.xml` defines `android:supportsRTL="true"` on the `<application>` element
+
+### `doLeftAndRightSwapInRTL`
+
+```typescript
+static doLeftAndRightSwapInRTL: boolean;
+```
+
+A boolean value indicating whether left and right style properties should be automatically swapped when in RTL mode. When enabled, left becomes right and right becomes left in RTL layouts.
+
+## Methods
+
+### `allowRTL()`
+
+```typescript
+static allowRTL: (allowRTL: boolean) => void;
+```
+
+Enables or disables RTL layout support for the application.
+
+**Parameters:**
+
+- `allowRTL` (boolean): Whether to allow RTL layout
+
+**Important Notes:**
+
+- Changes take effect on the next application start, not immediately
+- This setting is persisted across app restarts
+
+### `forceRTL()`
+
+```typescript
+static forceRTL: (forced: boolean) => void;
+```
+
+Forces the app to use RTL layout regardless of the device language settings. This is primarily useful for testing RTL layouts during development.
+
+Avoid forcing RTL in production apps as it requires a full app restart to take effect, which makes for a poor user-experience.
+
+**Parameters:**
+
+- `forced` (boolean): Whether to force RTL layout
+
+**Important Notes:**
+
+- Changes take full effect on the next application start, not immediately
+- The setting is persisted across app restarts
+- Only meant for development and testing. In production, you should either disallow RTL fully or handle it appropriately (see `isRTL`)
+
+### `swapLeftAndRightInRTL()`
+
+```typescript
+static swapLeftAndRightInRTL: (swapLeftAndRight: boolean) => void;
+```
+
+Swap left and right style properties in RTL mode. When enabled, left becomes right and right becomes left in RTL layouts. Does not affect the value of `isRTL`.
diff --git a/website/versioned_docs/version-0.82/image-style-props.md b/website/versioned_docs/version-0.82/image-style-props.md
index efa0dc725e1..cbf19f996f9 100644
--- a/website/versioned_docs/version-0.82/image-style-props.md
+++ b/website/versioned_docs/version-0.82/image-style-props.md
@@ -8,7 +8,6 @@ title: Image Style Props
 ### Image Resize Mode
 
 ```SnackPlayer name=Image%20Resize%20Modes%20Example
-import React from 'react';
 import {View, Image, Text, StyleSheet, ScrollView} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -82,7 +81,6 @@ export default DisplayAnImageWithStyle;
 ### Image Border
 
 ```SnackPlayer name=Style%20BorderWidth%20and%20BorderColor%20Example
-import React from 'react';
 import {Image, StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -118,7 +116,6 @@ export default DisplayAnImageWithStyle;
 ### Image Border Radius
 
 ```SnackPlayer name=Style%20Border%20Radius%20Example
-import React from 'react';
 import {View, Image, StyleSheet, Text, ScrollView} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -184,7 +181,6 @@ export default DisplayAnImageWithStyle;
 ### Image Tint
 
 ```SnackPlayer name=Style%20tintColor%20Function%20Component
-import React from 'react';
 import {Image, StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.82/image.md b/website/versioned_docs/version-0.82/image.md
index 5f6a2a5b1ad..3f83be8c19c 100644
--- a/website/versioned_docs/version-0.82/image.md
+++ b/website/versioned_docs/version-0.82/image.md
@@ -14,7 +14,6 @@ For network and data images, you will need to manually specify the dimensions of
 ## Examples
 
 ```SnackPlayer name=Image%20Example
-import React from 'react';
 import {Image, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -61,7 +60,6 @@ export default DisplayAnImage;
 You can also add `style` to an image:
 
 ```SnackPlayer name=Styled%20Image%20Example
-import React from 'react';
 import {Image, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.82/imagebackground.md b/website/versioned_docs/version-0.82/imagebackground.md
index 6670fd3b632..d3d40b2a844 100644
--- a/website/versioned_docs/version-0.82/imagebackground.md
+++ b/website/versioned_docs/version-0.82/imagebackground.md
@@ -12,7 +12,6 @@ Note that you must specify some width and height style attributes.
 ## Example
 
 ```SnackPlayer name=ImageBackground
-import React from 'react';
 import {ImageBackground, StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.82/improvingux.md b/website/versioned_docs/version-0.82/improvingux.md
index 462f5f0ce1c..96bd508791f 100644
--- a/website/versioned_docs/version-0.82/improvingux.md
+++ b/website/versioned_docs/version-0.82/improvingux.md
@@ -1,596 +1,594 @@
----
-id: improvingux
-title: Improving User Experience
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-## Configure text inputs
-
-Entering text on touch phone is a challenge - small screen, software keyboard. But based on what kind of data you need, you can make it easier by properly configuring the text inputs:
-
-- Focus the first field automatically
-- Use placeholder text as an example of expected data format
-- Enable or disable autocapitalization and autocorrect
-- Choose keyboard type (e.g. email, numeric)
-- Make sure the return button focuses the next field or submits the form
-
-Check out [`TextInput` docs](textinput.md) for more configuration options.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=TextInput%20form%20example&ext=js
-import React, {useState, useRef} from 'react';
-import {
-  Alert,
-  Text,
-  StatusBar,
-  TextInput,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const App = () => {
-  const emailInput = useRef(null);
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-
-  const submit = () => {
-    Alert.alert(
-      `Welcome, ${name}! Confirmation email has been sent to ${email}`,
-    );
-  };
-
-  return (
-    <View style={styles.container}>
-      <StatusBar barStyle="light-content" />
-      <View style={styles.header}>
-        <Text style={styles.description}>
-          This demo shows how using available TextInput customizations can make
-          forms much easier to use. Try completing the form and notice that
-          different fields have specific optimizations and the return key
-          changes from focusing next input to submitting the form.
-        </Text>
-      </View>
-      <TextInput
-        style={styles.input}
-        value={name}
-        onChangeText={text => setName(text)}
-        placeholder="Full Name"
-        autoFocus={true}
-        autoCapitalize="words"
-        autoCorrect={true}
-        keyboardType="default"
-        returnKeyType="next"
-        onSubmitEditing={() => emailInput.current.focus()}
-        blurOnSubmit={false}
-      />
-      <TextInput
-        style={styles.input}
-        value={email}
-        onChangeText={text => setEmail(text)}
-        ref={emailInput}
-        placeholder="email@example.com"
-        autoCapitalize="none"
-        autoCorrect={false}
-        keyboardType="email-address"
-        returnKeyType="send"
-        onSubmitEditing={submit}
-        blurOnSubmit={true}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    paddingTop: 64,
-    padding: 20,
-    backgroundColor: '#282c34',
-  },
-  description: {
-    fontSize: 14,
-    color: 'white',
-  },
-  input: {
-    margin: 20,
-    marginBottom: 0,
-    height: 34,
-    paddingHorizontal: 10,
-    borderRadius: 4,
-    borderColor: '#ccc',
-    borderWidth: 1,
-    fontSize: 16,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=TextInput%20form%20example&ext=tsx
-import React, {useState, useRef} from 'react';
-import {
-  Alert,
-  Text,
-  StatusBar,
-  TextInput,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const App = () => {
-  const emailInput = useRef<TextInput>(null);
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-
-  const submit = () => {
-    Alert.alert(
-      `Welcome, ${name}! Confirmation email has been sent to ${email}`,
-    );
-  };
-
-  return (
-    <View style={styles.container}>
-      <StatusBar barStyle="light-content" />
-      <View style={styles.header}>
-        <Text style={styles.description}>
-          This demo shows how using available TextInput customizations can make
-          forms much easier to use. Try completing the form and notice that
-          different fields have specific optimizations and the return key
-          changes from focusing next input to submitting the form.
-        </Text>
-      </View>
-      <TextInput
-        style={styles.input}
-        value={name}
-        onChangeText={text => setName(text)}
-        placeholder="Full Name"
-        autoFocus={true}
-        autoCapitalize="words"
-        autoCorrect={true}
-        keyboardType="default"
-        returnKeyType="next"
-        onSubmitEditing={() => emailInput.current?.focus()}
-        blurOnSubmit={false}
-      />
-      <TextInput
-        style={styles.input}
-        value={email}
-        onChangeText={text => setEmail(text)}
-        ref={emailInput}
-        placeholder="email@example.com"
-        autoCapitalize="none"
-        autoCorrect={false}
-        keyboardType="email-address"
-        returnKeyType="send"
-        onSubmitEditing={submit}
-        blurOnSubmit={true}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    paddingTop: 64,
-    padding: 20,
-    backgroundColor: '#282c34',
-  },
-  description: {
-    fontSize: 14,
-    color: 'white',
-  },
-  input: {
-    margin: 20,
-    marginBottom: 0,
-    height: 34,
-    paddingHorizontal: 10,
-    borderRadius: 4,
-    borderColor: '#ccc',
-    borderWidth: 1,
-    fontSize: 16,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-## Manage layout when keyboard is visible
-
-Software keyboard takes almost half of the screen. If you have interactive elements that can get covered by the keyboard, make sure they are still accessible by using the [`KeyboardAvoidingView` component](keyboardavoidingview.md).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=KeyboardAvoidingView%20example&ext=js
-import React, {useState, useRef} from 'react';
-import {
-  Alert,
-  Text,
-  Button,
-  StatusBar,
-  TextInput,
-  KeyboardAvoidingView,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const App = () => {
-  const emailInput = useRef(null);
-  const [email, setEmail] = useState('');
-
-  const submit = () => {
-    emailInput.current.blur();
-    Alert.alert(`Confirmation email has been sent to ${email}`);
-  };
-
-  return (
-    <View style={styles.container}>
-      <StatusBar barStyle="light-content" />
-      <View style={styles.header}>
-        <Text style={styles.description}>
-          This demo shows how to avoid covering important UI elements with the
-          software keyboard. Focus the email input below and notice that the
-          Sign Up button and the text adjusted positions to make sure they are
-          not hidden under the keyboard.
-        </Text>
-      </View>
-      <KeyboardAvoidingView behavior="padding" style={styles.form}>
-        <TextInput
-          style={styles.input}
-          value={email}
-          onChangeText={text => setEmail(text)}
-          ref={emailInput}
-          placeholder="email@example.com"
-          autoCapitalize="none"
-          autoCorrect={false}
-          keyboardType="email-address"
-          returnKeyType="send"
-          onSubmitEditing={submit}
-          blurOnSubmit={true}
-        />
-        <View>
-          <Button title="Sign Up" onPress={submit} />
-          <Text style={styles.legal}>Some important legal fine print here</Text>
-        </View>
-      </KeyboardAvoidingView>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    paddingTop: 64,
-    padding: 20,
-    backgroundColor: '#282c34',
-  },
-  description: {
-    fontSize: 14,
-    color: 'white',
-  },
-  input: {
-    margin: 20,
-    marginBottom: 0,
-    height: 34,
-    paddingHorizontal: 10,
-    borderRadius: 4,
-    borderColor: '#ccc',
-    borderWidth: 1,
-    fontSize: 16,
-  },
-  legal: {
-    margin: 10,
-    color: '#333',
-    fontSize: 12,
-    textAlign: 'center',
-  },
-  form: {
-    flex: 1,
-    justifyContent: 'space-between',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=KeyboardAvoidingView%20example&ext=tsx
-import React, {useState, useRef} from 'react';
-import {
-  Alert,
-  Text,
-  Button,
-  StatusBar,
-  TextInput,
-  KeyboardAvoidingView,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const App = () => {
-  const emailInput = useRef<TextInput>(null);
-  const [email, setEmail] = useState('');
-
-  const submit = () => {
-    emailInput.current?.blur();
-    Alert.alert(`Confirmation email has been sent to ${email}`);
-  };
-
-  return (
-    <View style={styles.container}>
-      <StatusBar barStyle="light-content" />
-      <View style={styles.header}>
-        <Text style={styles.description}>
-          This demo shows how to avoid covering important UI elements with the
-          software keyboard. Focus the email input below and notice that the
-          Sign Up button and the text adjusted positions to make sure they are
-          not hidden under the keyboard.
-        </Text>
-      </View>
-      <KeyboardAvoidingView behavior="padding" style={styles.form}>
-        <TextInput
-          style={styles.input}
-          value={email}
-          onChangeText={text => setEmail(text)}
-          ref={emailInput}
-          placeholder="email@example.com"
-          autoCapitalize="none"
-          autoCorrect={false}
-          keyboardType="email-address"
-          returnKeyType="send"
-          onSubmitEditing={submit}
-          blurOnSubmit={true}
-        />
-        <View>
-          <Button title="Sign Up" onPress={submit} />
-          <Text style={styles.legal}>Some important legal fine print here</Text>
-        </View>
-      </KeyboardAvoidingView>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    paddingTop: 64,
-    padding: 20,
-    backgroundColor: '#282c34',
-  },
-  description: {
-    fontSize: 14,
-    color: 'white',
-  },
-  input: {
-    margin: 20,
-    marginBottom: 0,
-    height: 34,
-    paddingHorizontal: 10,
-    borderRadius: 4,
-    borderColor: '#ccc',
-    borderWidth: 1,
-    fontSize: 16,
-  },
-  legal: {
-    margin: 10,
-    color: '#333',
-    fontSize: 12,
-    textAlign: 'center',
-  },
-  form: {
-    flex: 1,
-    justifyContent: 'space-between',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-## Make tappable areas larger
-
-On mobile phones it's hard to be very precise when pressing buttons. Make sure all interactive elements are 44x44 or larger. One way to do this is to leave enough space for the element, `padding`, `minWidth` and `minHeight` style values can be useful for that. Alternatively, you can use [`hitSlop` prop](touchablewithoutfeedback.md#hitslop) to increase interactive area without affecting the layout. Here's a demo:
-
-```SnackPlayer name=HitSlop%20example
-import React from 'react';
-import {
-  Text,
-  StatusBar,
-  TouchableOpacity,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <StatusBar barStyle="light-content" />
-      <View style={styles.header}>
-        <Text style={styles.description}>
-          This demo shows how using hitSlop can make interactive elements much
-          easier to tap without changing their layout and size. Try pressing
-          each button quickly multiple times and notice which one is easier to
-          hit.
-        </Text>
-      </View>
-      <View style={styles.content}>
-        <TouchableOpacity>
-          <Text style={styles.label}>Without hitSlop</Text>
-        </TouchableOpacity>
-        <View style={styles.separator} />
-        <View style={styles.preview}>
-          <TouchableOpacity
-            hitSlop={{top: 20, left: 20, bottom: 20, right: 20}}>
-            <Text style={styles.label}>With hitSlop</Text>
-          </TouchableOpacity>
-        </View>
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    paddingTop: 64,
-    padding: 20,
-    backgroundColor: '#282c34',
-  },
-  description: {
-    fontSize: 14,
-    color: 'white',
-  },
-  content: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  label: {
-    fontSize: 18,
-    color: '#336699',
-    textAlign: 'center',
-    borderColor: '#ddd',
-    borderWidth: 1,
-  },
-  separator: {
-    height: 50,
-  },
-  preview: {
-    padding: 20,
-    backgroundColor: '#f6f6f6',
-  },
-});
-
-export default App;
-```
-
-## Use Android Ripple
-
-Android API 21+ uses the material design ripple to provide user with feedback when they touch an interactable area on the screen. React Native exposes this through the [`TouchableNativeFeedback` component](touchablenativefeedback.md). Using this touchable effect instead of opacity or highlight will often make your app feel much more fitting on the platform. That said, you need to be careful when using it because it doesn't work on iOS or on Android API < 21, so you will need to fallback to using one of the other Touchable components on iOS. You can use a library like [react-native-platform-touchable](https://github.com/react-community/react-native-platform-touchable) to handle the platform differences for you.
-
-```SnackPlayer name=Android%20Ripple%20example&supportedPlatforms=android
-import React from 'react';
-import {
-  TouchableNativeFeedback,
-  TouchableOpacity,
-  TouchableHighlight,
-  Platform,
-  Text,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const SUPPORTS_NATIVE_FEEDBACK =
-  Platform.OS === 'android' && Platform.Version >= 21;
-
-const noop = () => {};
-const defaultHitSlop = {top: 15, bottom: 15, right: 15, left: 15};
-
-const ButtonsWithNativeFeedback = () => (
-  <View style={styles.buttonContainer}>
-    <TouchableNativeFeedback
-      onPress={noop}
-      background={TouchableNativeFeedback.Ripple('#06bcee', false)}
-      hitSlop={defaultHitSlop}>
-      <View style={styles.button}>
-        <Text style={styles.text}>This is a ripple respecting borders</Text>
-      </View>
-    </TouchableNativeFeedback>
-    <TouchableNativeFeedback
-      onPress={noop}
-      background={TouchableNativeFeedback.Ripple('#06bcee', true)}
-      hitSlop={defaultHitSlop}>
-      <View style={styles.button}>
-        <Text style={styles.text}>
-          This is ripple without borders, this is more useful for icons, eg: in
-          tab bar
-        </Text>
-      </View>
-    </TouchableNativeFeedback>
-  </View>
-);
-
-const Buttons = () => (
-  <View style={styles.buttonContainer}>
-    <TouchableOpacity
-      style={styles.button}
-      onPress={noop}
-      hitSlop={defaultHitSlop}>
-      <Text style={styles.text}>This is opacity</Text>
-    </TouchableOpacity>
-    <TouchableHighlight
-      style={styles.button}
-      onPress={noop}
-      hitSlop={defaultHitSlop}
-      underlayColor="#06bcee">
-      <Text style={styles.text}>This is highlight</Text>
-    </TouchableHighlight>
-  </View>
-);
-
-const App = () => (
-  <View style={styles.container}>
-    {SUPPORTS_NATIVE_FEEDBACK ? <ButtonsWithNativeFeedback /> : <Buttons />}
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingTop: 64,
-    backgroundColor: '#fff',
-  },
-  buttonContainer: {
-    margin: 24,
-  },
-  text: {
-    fontSize: 20,
-    color: '#fff',
-    fontWeight: 'bold',
-  },
-  button: {
-    padding: 25,
-    borderRadius: 5,
-    backgroundColor: '#000',
-    marginBottom: 30,
-  },
-});
-
-export default App;
-```
-
-## Screen orientation lock
-
-Multiple screen orientations should work fine by default unless you're using `Dimensions` API and don't handle orientation changes. If you don't want to support multiple screen orientations, you can lock the screen orientation to either portrait or landscape.
-
-On iOS, in the General tab and Deployment Info section of Xcode enable the Device Orientation you want to support (ensure you have selected iPhone from the Devices menu when making the changes). For Android, open the AndroidManifest.xml file and within the activity element add `'android:screenOrientation="portrait"'` to lock to portrait or `'android:screenOrientation="landscape"'` to lock to landscape.
-
-# Learn more
-
-[Material Design](https://material.io/) and [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines) are great resources for learning more about designing for mobile platforms.
+---
+id: improvingux
+title: Improving User Experience
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+## Configure text inputs
+
+Entering text on touch phone is a challenge - small screen, software keyboard. But based on what kind of data you need, you can make it easier by properly configuring the text inputs:
+
+- Focus the first field automatically
+- Use placeholder text as an example of expected data format
+- Enable or disable autocapitalization and autocorrect
+- Choose keyboard type (e.g. email, numeric)
+- Make sure the return button focuses the next field or submits the form
+
+Check out [`TextInput` docs](textinput.md) for more configuration options.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=TextInput%20form%20example&ext=js
+import {useState, useRef} from 'react';
+import {
+  Alert,
+  Text,
+  StatusBar,
+  TextInput,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const App = () => {
+  const emailInput = useRef(null);
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+
+  const submit = () => {
+    Alert.alert(
+      `Welcome, ${name}! Confirmation email has been sent to ${email}`,
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="light-content" />
+      <View style={styles.header}>
+        <Text style={styles.description}>
+          This demo shows how using available TextInput customizations can make
+          forms much easier to use. Try completing the form and notice that
+          different fields have specific optimizations and the return key
+          changes from focusing next input to submitting the form.
+        </Text>
+      </View>
+      <TextInput
+        style={styles.input}
+        value={name}
+        onChangeText={text => setName(text)}
+        placeholder="Full Name"
+        autoFocus={true}
+        autoCapitalize="words"
+        autoCorrect={true}
+        keyboardType="default"
+        returnKeyType="next"
+        onSubmitEditing={() => emailInput.current.focus()}
+        blurOnSubmit={false}
+      />
+      <TextInput
+        style={styles.input}
+        value={email}
+        onChangeText={text => setEmail(text)}
+        ref={emailInput}
+        placeholder="email@example.com"
+        autoCapitalize="none"
+        autoCorrect={false}
+        keyboardType="email-address"
+        returnKeyType="send"
+        onSubmitEditing={submit}
+        blurOnSubmit={true}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 64,
+    padding: 20,
+    backgroundColor: '#282c34',
+  },
+  description: {
+    fontSize: 14,
+    color: 'white',
+  },
+  input: {
+    margin: 20,
+    marginBottom: 0,
+    height: 34,
+    paddingHorizontal: 10,
+    borderRadius: 4,
+    borderColor: '#ccc',
+    borderWidth: 1,
+    fontSize: 16,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=TextInput%20form%20example&ext=tsx
+import {useState, useRef} from 'react';
+import {
+  Alert,
+  Text,
+  StatusBar,
+  TextInput,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const App = () => {
+  const emailInput = useRef<TextInput>(null);
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+
+  const submit = () => {
+    Alert.alert(
+      `Welcome, ${name}! Confirmation email has been sent to ${email}`,
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="light-content" />
+      <View style={styles.header}>
+        <Text style={styles.description}>
+          This demo shows how using available TextInput customizations can make
+          forms much easier to use. Try completing the form and notice that
+          different fields have specific optimizations and the return key
+          changes from focusing next input to submitting the form.
+        </Text>
+      </View>
+      <TextInput
+        style={styles.input}
+        value={name}
+        onChangeText={text => setName(text)}
+        placeholder="Full Name"
+        autoFocus={true}
+        autoCapitalize="words"
+        autoCorrect={true}
+        keyboardType="default"
+        returnKeyType="next"
+        onSubmitEditing={() => emailInput.current?.focus()}
+        blurOnSubmit={false}
+      />
+      <TextInput
+        style={styles.input}
+        value={email}
+        onChangeText={text => setEmail(text)}
+        ref={emailInput}
+        placeholder="email@example.com"
+        autoCapitalize="none"
+        autoCorrect={false}
+        keyboardType="email-address"
+        returnKeyType="send"
+        onSubmitEditing={submit}
+        blurOnSubmit={true}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 64,
+    padding: 20,
+    backgroundColor: '#282c34',
+  },
+  description: {
+    fontSize: 14,
+    color: 'white',
+  },
+  input: {
+    margin: 20,
+    marginBottom: 0,
+    height: 34,
+    paddingHorizontal: 10,
+    borderRadius: 4,
+    borderColor: '#ccc',
+    borderWidth: 1,
+    fontSize: 16,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+## Manage layout when keyboard is visible
+
+Software keyboard takes almost half of the screen. If you have interactive elements that can get covered by the keyboard, make sure they are still accessible by using the [`KeyboardAvoidingView` component](keyboardavoidingview.md).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=KeyboardAvoidingView%20example&ext=js
+import {useState, useRef} from 'react';
+import {
+  Alert,
+  Text,
+  Button,
+  StatusBar,
+  TextInput,
+  KeyboardAvoidingView,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const App = () => {
+  const emailInput = useRef(null);
+  const [email, setEmail] = useState('');
+
+  const submit = () => {
+    emailInput.current.blur();
+    Alert.alert(`Confirmation email has been sent to ${email}`);
+  };
+
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="light-content" />
+      <View style={styles.header}>
+        <Text style={styles.description}>
+          This demo shows how to avoid covering important UI elements with the
+          software keyboard. Focus the email input below and notice that the
+          Sign Up button and the text adjusted positions to make sure they are
+          not hidden under the keyboard.
+        </Text>
+      </View>
+      <KeyboardAvoidingView behavior="padding" style={styles.form}>
+        <TextInput
+          style={styles.input}
+          value={email}
+          onChangeText={text => setEmail(text)}
+          ref={emailInput}
+          placeholder="email@example.com"
+          autoCapitalize="none"
+          autoCorrect={false}
+          keyboardType="email-address"
+          returnKeyType="send"
+          onSubmitEditing={submit}
+          blurOnSubmit={true}
+        />
+        <View>
+          <Button title="Sign Up" onPress={submit} />
+          <Text style={styles.legal}>Some important legal fine print here</Text>
+        </View>
+      </KeyboardAvoidingView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 64,
+    padding: 20,
+    backgroundColor: '#282c34',
+  },
+  description: {
+    fontSize: 14,
+    color: 'white',
+  },
+  input: {
+    margin: 20,
+    marginBottom: 0,
+    height: 34,
+    paddingHorizontal: 10,
+    borderRadius: 4,
+    borderColor: '#ccc',
+    borderWidth: 1,
+    fontSize: 16,
+  },
+  legal: {
+    margin: 10,
+    color: '#333',
+    fontSize: 12,
+    textAlign: 'center',
+  },
+  form: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=KeyboardAvoidingView%20example&ext=tsx
+import {useState, useRef} from 'react';
+import {
+  Alert,
+  Text,
+  Button,
+  StatusBar,
+  TextInput,
+  KeyboardAvoidingView,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const App = () => {
+  const emailInput = useRef<TextInput>(null);
+  const [email, setEmail] = useState('');
+
+  const submit = () => {
+    emailInput.current?.blur();
+    Alert.alert(`Confirmation email has been sent to ${email}`);
+  };
+
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="light-content" />
+      <View style={styles.header}>
+        <Text style={styles.description}>
+          This demo shows how to avoid covering important UI elements with the
+          software keyboard. Focus the email input below and notice that the
+          Sign Up button and the text adjusted positions to make sure they are
+          not hidden under the keyboard.
+        </Text>
+      </View>
+      <KeyboardAvoidingView behavior="padding" style={styles.form}>
+        <TextInput
+          style={styles.input}
+          value={email}
+          onChangeText={text => setEmail(text)}
+          ref={emailInput}
+          placeholder="email@example.com"
+          autoCapitalize="none"
+          autoCorrect={false}
+          keyboardType="email-address"
+          returnKeyType="send"
+          onSubmitEditing={submit}
+          blurOnSubmit={true}
+        />
+        <View>
+          <Button title="Sign Up" onPress={submit} />
+          <Text style={styles.legal}>Some important legal fine print here</Text>
+        </View>
+      </KeyboardAvoidingView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 64,
+    padding: 20,
+    backgroundColor: '#282c34',
+  },
+  description: {
+    fontSize: 14,
+    color: 'white',
+  },
+  input: {
+    margin: 20,
+    marginBottom: 0,
+    height: 34,
+    paddingHorizontal: 10,
+    borderRadius: 4,
+    borderColor: '#ccc',
+    borderWidth: 1,
+    fontSize: 16,
+  },
+  legal: {
+    margin: 10,
+    color: '#333',
+    fontSize: 12,
+    textAlign: 'center',
+  },
+  form: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+## Make tappable areas larger
+
+On mobile phones it's hard to be very precise when pressing buttons. Make sure all interactive elements are 44x44 or larger. One way to do this is to leave enough space for the element, `padding`, `minWidth` and `minHeight` style values can be useful for that. Alternatively, you can use [`hitSlop` prop](touchablewithoutfeedback.md#hitslop) to increase interactive area without affecting the layout. Here's a demo:
+
+```SnackPlayer name=HitSlop%20example
+import {
+  Text,
+  StatusBar,
+  TouchableOpacity,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="light-content" />
+      <View style={styles.header}>
+        <Text style={styles.description}>
+          This demo shows how using hitSlop can make interactive elements much
+          easier to tap without changing their layout and size. Try pressing
+          each button quickly multiple times and notice which one is easier to
+          hit.
+        </Text>
+      </View>
+      <View style={styles.content}>
+        <TouchableOpacity>
+          <Text style={styles.label}>Without hitSlop</Text>
+        </TouchableOpacity>
+        <View style={styles.separator} />
+        <View style={styles.preview}>
+          <TouchableOpacity
+            hitSlop={{top: 20, left: 20, bottom: 20, right: 20}}>
+            <Text style={styles.label}>With hitSlop</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 64,
+    padding: 20,
+    backgroundColor: '#282c34',
+  },
+  description: {
+    fontSize: 14,
+    color: 'white',
+  },
+  content: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  label: {
+    fontSize: 18,
+    color: '#336699',
+    textAlign: 'center',
+    borderColor: '#ddd',
+    borderWidth: 1,
+  },
+  separator: {
+    height: 50,
+  },
+  preview: {
+    padding: 20,
+    backgroundColor: '#f6f6f6',
+  },
+});
+
+export default App;
+```
+
+## Use Android Ripple
+
+Android API 21+ uses the material design ripple to provide user with feedback when they touch an interactable area on the screen. React Native exposes this through the [`TouchableNativeFeedback` component](touchablenativefeedback.md). Using this touchable effect instead of opacity or highlight will often make your app feel much more fitting on the platform. That said, you need to be careful when using it because it doesn't work on iOS or on Android API < 21, so you will need to fallback to using one of the other Touchable components on iOS. You can use a library like [react-native-platform-touchable](https://github.com/react-community/react-native-platform-touchable) to handle the platform differences for you.
+
+```SnackPlayer name=Android%20Ripple%20example&supportedPlatforms=android
+import {
+  TouchableNativeFeedback,
+  TouchableOpacity,
+  TouchableHighlight,
+  Platform,
+  Text,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const SUPPORTS_NATIVE_FEEDBACK =
+  Platform.OS === 'android' && Platform.Version >= 21;
+
+const noop = () => {};
+const defaultHitSlop = {top: 15, bottom: 15, right: 15, left: 15};
+
+const ButtonsWithNativeFeedback = () => (
+  <View style={styles.buttonContainer}>
+    <TouchableNativeFeedback
+      onPress={noop}
+      background={TouchableNativeFeedback.Ripple('#06bcee', false)}
+      hitSlop={defaultHitSlop}>
+      <View style={styles.button}>
+        <Text style={styles.text}>This is a ripple respecting borders</Text>
+      </View>
+    </TouchableNativeFeedback>
+    <TouchableNativeFeedback
+      onPress={noop}
+      background={TouchableNativeFeedback.Ripple('#06bcee', true)}
+      hitSlop={defaultHitSlop}>
+      <View style={styles.button}>
+        <Text style={styles.text}>
+          This is ripple without borders, this is more useful for icons, eg: in
+          tab bar
+        </Text>
+      </View>
+    </TouchableNativeFeedback>
+  </View>
+);
+
+const Buttons = () => (
+  <View style={styles.buttonContainer}>
+    <TouchableOpacity
+      style={styles.button}
+      onPress={noop}
+      hitSlop={defaultHitSlop}>
+      <Text style={styles.text}>This is opacity</Text>
+    </TouchableOpacity>
+    <TouchableHighlight
+      style={styles.button}
+      onPress={noop}
+      hitSlop={defaultHitSlop}
+      underlayColor="#06bcee">
+      <Text style={styles.text}>This is highlight</Text>
+    </TouchableHighlight>
+  </View>
+);
+
+const App = () => (
+  <View style={styles.container}>
+    {SUPPORTS_NATIVE_FEEDBACK ? <ButtonsWithNativeFeedback /> : <Buttons />}
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: 64,
+    backgroundColor: '#fff',
+  },
+  buttonContainer: {
+    margin: 24,
+  },
+  text: {
+    fontSize: 20,
+    color: '#fff',
+    fontWeight: 'bold',
+  },
+  button: {
+    padding: 25,
+    borderRadius: 5,
+    backgroundColor: '#000',
+    marginBottom: 30,
+  },
+});
+
+export default App;
+```
+
+## Screen orientation lock
+
+Multiple screen orientations should work fine by default unless you're using `Dimensions` API and don't handle orientation changes. If you don't want to support multiple screen orientations, you can lock the screen orientation to either portrait or landscape.
+
+On iOS, in the General tab and Deployment Info section of Xcode enable the Device Orientation you want to support (ensure you have selected iPhone from the Devices menu when making the changes). For Android, open the AndroidManifest.xml file and within the activity element add `'android:screenOrientation="portrait"'` to lock to portrait or `'android:screenOrientation="landscape"'` to lock to landscape.
+
+# Learn more
+
+[Material Design](https://material.io/) and [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines) are great resources for learning more about designing for mobile platforms.
diff --git a/website/versioned_docs/version-0.82/inputaccessoryview.md b/website/versioned_docs/version-0.82/inputaccessoryview.md
index a4f56532fa4..76220b4fd7c 100644
--- a/website/versioned_docs/version-0.82/inputaccessoryview.md
+++ b/website/versioned_docs/version-0.82/inputaccessoryview.md
@@ -1,98 +1,98 @@
----
-id: inputaccessoryview
-title: InputAccessoryView
----
-
-A component which enables customization of the keyboard input accessory view on iOS. The input accessory view is displayed above the keyboard whenever a `TextInput` has focus. This component can be used to create custom toolbars.
-
-To use this component wrap your custom toolbar with the InputAccessoryView component, and set a `nativeID`. Then, pass that `nativeID` as the `inputAccessoryViewID` of whatever `TextInput` you desire. A basic example:
-
-```SnackPlayer name=InputAccessoryView&supportedPlatforms=ios
-import React, {useState} from 'react';
-import {
-  Button,
-  InputAccessoryView,
-  ScrollView,
-  TextInput,
-  StyleSheet,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const inputAccessoryViewID = 'uniqueID';
-const initialText = '';
-
-const App = () => {
-  const [text, setText] = useState(initialText);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <ScrollView keyboardDismissMode="interactive">
-          <TextInput
-            style={styles.textInput}
-            inputAccessoryViewID={inputAccessoryViewID}
-            onChangeText={setText}
-            value={text}
-            placeholder={'Please type here…'}
-          />
-        </ScrollView>
-      </SafeAreaView>
-      <InputAccessoryView nativeID={inputAccessoryViewID}>
-        <Button onPress={() => setText(initialText)} title="Clear text" />
-      </InputAccessoryView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: 20,
-  },
-  textInput: {
-    padding: 16,
-    borderColor: 'black',
-    borderWidth: 1,
-  },
-});
-
-export default App;
-```
-
-This component can also be used to create sticky text inputs (text inputs which are anchored to the top of the keyboard). To do this, wrap a `TextInput` with the `InputAccessoryView` component, and don't set a `nativeID`. For an example, look at [InputAccessoryViewExample.js](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/InputAccessoryView/InputAccessoryViewExample.js).
-
----
-
-# Reference
-
-## Props
-
-### `backgroundColor`
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `nativeID`
-
-An ID which is used to associate this `InputAccessoryView` to specified TextInput(s).
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `style`
-
-| Type                              |
-| --------------------------------- |
-| [View Style](view-style-props.md) |
-
-# Known issues
-
-- [react-native#18997](https://github.com/facebook/react-native/issues/18997): Doesn't support multiline `TextInput`
-- [react-native#20157](https://github.com/facebook/react-native/issues/20157): Can't use with a bottom tab bar
+---
+id: inputaccessoryview
+title: InputAccessoryView
+---
+
+A component which enables customization of the keyboard input accessory view on iOS. The input accessory view is displayed above the keyboard whenever a `TextInput` has focus. This component can be used to create custom toolbars.
+
+To use this component wrap your custom toolbar with the InputAccessoryView component, and set a `nativeID`. Then, pass that `nativeID` as the `inputAccessoryViewID` of whatever `TextInput` you desire. A basic example:
+
+```SnackPlayer name=InputAccessoryView&supportedPlatforms=ios
+import {useState} from 'react';
+import {
+  Button,
+  InputAccessoryView,
+  ScrollView,
+  TextInput,
+  StyleSheet,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const inputAccessoryViewID = 'uniqueID';
+const initialText = '';
+
+const App = () => {
+  const [text, setText] = useState(initialText);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <ScrollView keyboardDismissMode="interactive">
+          <TextInput
+            style={styles.textInput}
+            inputAccessoryViewID={inputAccessoryViewID}
+            onChangeText={setText}
+            value={text}
+            placeholder={'Please type here…'}
+          />
+        </ScrollView>
+      </SafeAreaView>
+      <InputAccessoryView nativeID={inputAccessoryViewID}>
+        <Button onPress={() => setText(initialText)} title="Clear text" />
+      </InputAccessoryView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 20,
+  },
+  textInput: {
+    padding: 16,
+    borderColor: 'black',
+    borderWidth: 1,
+  },
+});
+
+export default App;
+```
+
+This component can also be used to create sticky text inputs (text inputs which are anchored to the top of the keyboard). To do this, wrap a `TextInput` with the `InputAccessoryView` component, and don't set a `nativeID`. For an example, look at [InputAccessoryViewExample.js](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/InputAccessoryView/InputAccessoryViewExample.js).
+
+---
+
+# Reference
+
+## Props
+
+### `backgroundColor`
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `nativeID`
+
+An ID which is used to associate this `InputAccessoryView` to specified TextInput(s).
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `style`
+
+| Type                              |
+| --------------------------------- |
+| [View Style](view-style-props.md) |
+
+# Known issues
+
+- [react-native#18997](https://github.com/facebook/react-native/issues/18997): Doesn't support multiline `TextInput`
+- [react-native#20157](https://github.com/facebook/react-native/issues/20157): Can't use with a bottom tab bar
diff --git a/website/versioned_docs/version-0.82/interactionmanager.md b/website/versioned_docs/version-0.82/interactionmanager.md
index f1851c75212..87aaff50674 100644
--- a/website/versioned_docs/version-0.82/interactionmanager.md
+++ b/website/versioned_docs/version-0.82/interactionmanager.md
@@ -1,422 +1,422 @@
----
-id: interactionmanager
-title: 🗑️ InteractionManager
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-:::warning[Deprecated]
-Avoid long-running work and use [`requestIdleCallback`](global-requestIdleCallback) instead.
-:::
-
-InteractionManager allows long-running work to be scheduled after any interactions/animations have completed. In particular, this allows JavaScript animations to run smoothly.
-
-Applications can schedule tasks to run after interactions with the following:
-
-```tsx
-InteractionManager.runAfterInteractions(() => {
-  // ...long-running synchronous task...
-});
-```
-
-Compare this to other scheduling alternatives:
-
-- `requestAnimationFrame()` for code that animates a view over time.
-- `setImmediate/setTimeout()` run code later, note this may delay animations.
-- `runAfterInteractions()` run code later, without delaying active animations.
-
-The touch handling system considers one or more active touches to be an 'interaction' and will delay `runAfterInteractions()` callbacks until all touches have ended or been cancelled.
-
-InteractionManager also allows applications to register animations by creating an interaction 'handle' on animation start, and clearing it upon completion:
-
-```tsx
-const handle = InteractionManager.createInteractionHandle();
-// run animation... (`runAfterInteractions` tasks are queued)
-// later, on animation completion:
-InteractionManager.clearInteractionHandle(handle);
-// queued tasks run if all handles were cleared
-```
-
-`runAfterInteractions` takes either a plain callback function, or a `PromiseTask` object with a `gen` method that returns a `Promise`. If a `PromiseTask` is supplied, then it is fully resolved (including asynchronous dependencies that also schedule more tasks via `runAfterInteractions`) before starting on the next task that might have been queued up synchronously earlier.
-
-By default, queued tasks are executed together in a loop in one `setImmediate` batch. If `setDeadline` is called with a positive number, then tasks will only be executed until the deadline (in terms of js event loop run time) approaches, at which point execution will yield via setTimeout, allowing events such as touches to start interactions and block queued tasks from executing, making apps more responsive.
-
----
-
-## Example
-
-### Basic
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useEffect} from 'react';
-import {
-  Alert,
-  Animated,
-  InteractionManager,
-  Platform,
-  StyleSheet,
-  Text,
-  useAnimatedValue,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
-
-const useFadeIn = (duration = 5000) => {
-  const opacity = useAnimatedValue(0);
-
-  // Running the animation when the component is mounted
-  useEffect(() => {
-    // Animated.timing() create a interaction handle by default, if you want to disabled that
-    // behaviour you can set isInteraction to false to disabled that.
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration,
-      useNativeDriver: true,
-    }).start();
-  }, [duration, opacity]);
-
-  return opacity;
-};
-
-const Ball = ({onShown}) => {
-  const opacity = useFadeIn();
-
-  // Running a method after the animation
-  useEffect(() => {
-    const interactionPromise = InteractionManager.runAfterInteractions(() =>
-      onShown(),
-    );
-    return () => interactionPromise.cancel();
-  }, [onShown]);
-
-  return <Animated.View style={[styles.ball, {opacity}]} />;
-};
-
-const App = () => {
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>{instructions}</Text>
-        <Ball onShown={() => Alert.alert('Animation is done')} />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  ball: {
-    width: 100,
-    height: 100,
-    backgroundColor: 'salmon',
-    borderRadius: 100,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useEffect} from 'react';
-import {
-  Alert,
-  Animated,
-  InteractionManager,
-  Platform,
-  StyleSheet,
-  Text,
-  useAnimatedValue,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
-
-const useFadeIn = (duration = 5000) => {
-  const opacity = useAnimatedValue(0);
-
-  // Running the animation when the component is mounted
-  useEffect(() => {
-    // Animated.timing() create a interaction handle by default, if you want to disabled that
-    // behaviour you can set isInteraction to false to disabled that.
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration,
-      useNativeDriver: true,
-    }).start();
-  }, [duration, opacity]);
-
-  return opacity;
-};
-
-type BallProps = {
-  onShown: () => void;
-};
-
-const Ball = ({onShown}: BallProps) => {
-  const opacity = useFadeIn();
-
-  // Running a method after the animation
-  useEffect(() => {
-    const interactionPromise = InteractionManager.runAfterInteractions(() =>
-      onShown(),
-    );
-    return () => interactionPromise.cancel();
-  }, [onShown]);
-
-  return <Animated.View style={[styles.ball, {opacity}]} />;
-};
-
-const App = () => {
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>{instructions}</Text>
-        <Ball onShown={() => Alert.alert('Animation is done')} />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  ball: {
-    width: 100,
-    height: 100,
-    backgroundColor: 'salmon',
-    borderRadius: 100,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### Advanced
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useEffect} from 'react';
-import {
-  Alert,
-  Animated,
-  InteractionManager,
-  Platform,
-  StyleSheet,
-  Text,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
-
-// You can create a custom interaction/animation and add
-// support for InteractionManager
-const useCustomInteraction = (timeLocked = 2000) => {
-  useEffect(() => {
-    const handle = InteractionManager.createInteractionHandle();
-
-    setTimeout(
-      () => InteractionManager.clearInteractionHandle(handle),
-      timeLocked,
-    );
-
-    return () => InteractionManager.clearInteractionHandle(handle);
-  }, [timeLocked]);
-};
-
-const Ball = ({onInteractionIsDone}) => {
-  useCustomInteraction();
-
-  // Running a method after the interaction
-  useEffect(() => {
-    InteractionManager.runAfterInteractions(() => onInteractionIsDone());
-  }, [onInteractionIsDone]);
-
-  return <Animated.View style={[styles.ball]} />;
-};
-
-const App = () => {
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>{instructions}</Text>
-        <Ball onInteractionIsDone={() => Alert.alert('Interaction is done')} />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  ball: {
-    width: 100,
-    height: 100,
-    backgroundColor: 'salmon',
-    borderRadius: 100,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useEffect} from 'react';
-import {
-  Alert,
-  Animated,
-  InteractionManager,
-  Platform,
-  StyleSheet,
-  Text,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
-
-// You can create a custom interaction/animation and add
-// support for InteractionManager
-const useCustomInteraction = (timeLocked = 2000) => {
-  useEffect(() => {
-    const handle = InteractionManager.createInteractionHandle();
-
-    setTimeout(
-      () => InteractionManager.clearInteractionHandle(handle),
-      timeLocked,
-    );
-
-    return () => InteractionManager.clearInteractionHandle(handle);
-  }, [timeLocked]);
-};
-
-type BallProps = {
-  onInteractionIsDone: () => void;
-};
-
-const Ball = ({onInteractionIsDone}: BallProps) => {
-  useCustomInteraction();
-
-  // Running a method after the interaction
-  useEffect(() => {
-    InteractionManager.runAfterInteractions(() => onInteractionIsDone());
-  }, [onInteractionIsDone]);
-
-  return <Animated.View style={[styles.ball]} />;
-};
-
-const App = () => {
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>{instructions}</Text>
-        <Ball onInteractionIsDone={() => Alert.alert('Interaction is done')} />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  ball: {
-    width: 100,
-    height: 100,
-    backgroundColor: 'salmon',
-    borderRadius: 100,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-# Reference
-
-## Methods
-
-### `runAfterInteractions()`
-
-```tsx
-static runAfterInteractions(task?: (() => any) | SimpleTask | PromiseTask);
-```
-
-Schedule a function to run after all interactions have completed. Returns a cancellable "promise".
-
----
-
-### `createInteractionHandle()`
-
-```tsx
-static createInteractionHandle(): Handle;
-```
-
-Notify manager that an interaction has started.
-
----
-
-### `clearInteractionHandle()`
-
-```tsx
-static clearInteractionHandle(handle: Handle);
-```
-
-Notify manager that an interaction has completed.
-
----
-
-### `setDeadline()`
-
-```tsx
-static setDeadline(deadline: number);
-```
-
-A positive number will use setTimeout to schedule any tasks after the eventLoopRunningTime hits the deadline value, otherwise all tasks will be executed in one setImmediate batch (default).
+---
+id: interactionmanager
+title: 🗑️ InteractionManager
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+:::warning[Deprecated]
+Avoid long-running work and use [`requestIdleCallback`](global-requestIdleCallback) instead.
+:::
+
+InteractionManager allows long-running work to be scheduled after any interactions/animations have completed. In particular, this allows JavaScript animations to run smoothly.
+
+Applications can schedule tasks to run after interactions with the following:
+
+```tsx
+InteractionManager.runAfterInteractions(() => {
+  // ...long-running synchronous task...
+});
+```
+
+Compare this to other scheduling alternatives:
+
+- `requestAnimationFrame()` for code that animates a view over time.
+- `setImmediate/setTimeout()` run code later, note this may delay animations.
+- `runAfterInteractions()` run code later, without delaying active animations.
+
+The touch handling system considers one or more active touches to be an 'interaction' and will delay `runAfterInteractions()` callbacks until all touches have ended or been cancelled.
+
+InteractionManager also allows applications to register animations by creating an interaction 'handle' on animation start, and clearing it upon completion:
+
+```tsx
+const handle = InteractionManager.createInteractionHandle();
+// run animation... (`runAfterInteractions` tasks are queued)
+// later, on animation completion:
+InteractionManager.clearInteractionHandle(handle);
+// queued tasks run if all handles were cleared
+```
+
+`runAfterInteractions` takes either a plain callback function, or a `PromiseTask` object with a `gen` method that returns a `Promise`. If a `PromiseTask` is supplied, then it is fully resolved (including asynchronous dependencies that also schedule more tasks via `runAfterInteractions`) before starting on the next task that might have been queued up synchronously earlier.
+
+By default, queued tasks are executed together in a loop in one `setImmediate` batch. If `setDeadline` is called with a positive number, then tasks will only be executed until the deadline (in terms of js event loop run time) approaches, at which point execution will yield via setTimeout, allowing events such as touches to start interactions and block queued tasks from executing, making apps more responsive.
+
+---
+
+## Example
+
+### Basic
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=js
+import {useEffect} from 'react';
+import {
+  Alert,
+  Animated,
+  InteractionManager,
+  Platform,
+  StyleSheet,
+  Text,
+  useAnimatedValue,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const instructions = Platform.select({
+  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
+  android:
+    'Double tap R on your keyboard to reload,\n' +
+    'Shake or press menu button for dev menu',
+});
+
+const useFadeIn = (duration = 5000) => {
+  const opacity = useAnimatedValue(0);
+
+  // Running the animation when the component is mounted
+  useEffect(() => {
+    // Animated.timing() create a interaction handle by default, if you want to disabled that
+    // behaviour you can set isInteraction to false to disabled that.
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration,
+      useNativeDriver: true,
+    }).start();
+  }, [duration, opacity]);
+
+  return opacity;
+};
+
+const Ball = ({onShown}) => {
+  const opacity = useFadeIn();
+
+  // Running a method after the animation
+  useEffect(() => {
+    const interactionPromise = InteractionManager.runAfterInteractions(() =>
+      onShown(),
+    );
+    return () => interactionPromise.cancel();
+  }, [onShown]);
+
+  return <Animated.View style={[styles.ball, {opacity}]} />;
+};
+
+const App = () => {
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>{instructions}</Text>
+        <Ball onShown={() => Alert.alert('Animation is done')} />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  ball: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'salmon',
+    borderRadius: 100,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=tsx
+import {useEffect} from 'react';
+import {
+  Alert,
+  Animated,
+  InteractionManager,
+  Platform,
+  StyleSheet,
+  Text,
+  useAnimatedValue,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const instructions = Platform.select({
+  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
+  android:
+    'Double tap R on your keyboard to reload,\n' +
+    'Shake or press menu button for dev menu',
+});
+
+const useFadeIn = (duration = 5000) => {
+  const opacity = useAnimatedValue(0);
+
+  // Running the animation when the component is mounted
+  useEffect(() => {
+    // Animated.timing() create a interaction handle by default, if you want to disabled that
+    // behaviour you can set isInteraction to false to disabled that.
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration,
+      useNativeDriver: true,
+    }).start();
+  }, [duration, opacity]);
+
+  return opacity;
+};
+
+type BallProps = {
+  onShown: () => void;
+};
+
+const Ball = ({onShown}: BallProps) => {
+  const opacity = useFadeIn();
+
+  // Running a method after the animation
+  useEffect(() => {
+    const interactionPromise = InteractionManager.runAfterInteractions(() =>
+      onShown(),
+    );
+    return () => interactionPromise.cancel();
+  }, [onShown]);
+
+  return <Animated.View style={[styles.ball, {opacity}]} />;
+};
+
+const App = () => {
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>{instructions}</Text>
+        <Ball onShown={() => Alert.alert('Animation is done')} />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  ball: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'salmon',
+    borderRadius: 100,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### Advanced
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=js
+import {useEffect} from 'react';
+import {
+  Alert,
+  Animated,
+  InteractionManager,
+  Platform,
+  StyleSheet,
+  Text,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const instructions = Platform.select({
+  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
+  android:
+    'Double tap R on your keyboard to reload,\n' +
+    'Shake or press menu button for dev menu',
+});
+
+// You can create a custom interaction/animation and add
+// support for InteractionManager
+const useCustomInteraction = (timeLocked = 2000) => {
+  useEffect(() => {
+    const handle = InteractionManager.createInteractionHandle();
+
+    setTimeout(
+      () => InteractionManager.clearInteractionHandle(handle),
+      timeLocked,
+    );
+
+    return () => InteractionManager.clearInteractionHandle(handle);
+  }, [timeLocked]);
+};
+
+const Ball = ({onInteractionIsDone}) => {
+  useCustomInteraction();
+
+  // Running a method after the interaction
+  useEffect(() => {
+    InteractionManager.runAfterInteractions(() => onInteractionIsDone());
+  }, [onInteractionIsDone]);
+
+  return <Animated.View style={[styles.ball]} />;
+};
+
+const App = () => {
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>{instructions}</Text>
+        <Ball onInteractionIsDone={() => Alert.alert('Interaction is done')} />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  ball: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'salmon',
+    borderRadius: 100,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=tsx
+import {useEffect} from 'react';
+import {
+  Alert,
+  Animated,
+  InteractionManager,
+  Platform,
+  StyleSheet,
+  Text,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const instructions = Platform.select({
+  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
+  android:
+    'Double tap R on your keyboard to reload,\n' +
+    'Shake or press menu button for dev menu',
+});
+
+// You can create a custom interaction/animation and add
+// support for InteractionManager
+const useCustomInteraction = (timeLocked = 2000) => {
+  useEffect(() => {
+    const handle = InteractionManager.createInteractionHandle();
+
+    setTimeout(
+      () => InteractionManager.clearInteractionHandle(handle),
+      timeLocked,
+    );
+
+    return () => InteractionManager.clearInteractionHandle(handle);
+  }, [timeLocked]);
+};
+
+type BallProps = {
+  onInteractionIsDone: () => void;
+};
+
+const Ball = ({onInteractionIsDone}: BallProps) => {
+  useCustomInteraction();
+
+  // Running a method after the interaction
+  useEffect(() => {
+    InteractionManager.runAfterInteractions(() => onInteractionIsDone());
+  }, [onInteractionIsDone]);
+
+  return <Animated.View style={[styles.ball]} />;
+};
+
+const App = () => {
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>{instructions}</Text>
+        <Ball onInteractionIsDone={() => Alert.alert('Interaction is done')} />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  ball: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'salmon',
+    borderRadius: 100,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+# Reference
+
+## Methods
+
+### `runAfterInteractions()`
+
+```tsx
+static runAfterInteractions(task?: (() => any) | SimpleTask | PromiseTask);
+```
+
+Schedule a function to run after all interactions have completed. Returns a cancellable "promise".
+
+---
+
+### `createInteractionHandle()`
+
+```tsx
+static createInteractionHandle(): Handle;
+```
+
+Notify manager that an interaction has started.
+
+---
+
+### `clearInteractionHandle()`
+
+```tsx
+static clearInteractionHandle(handle: Handle);
+```
+
+Notify manager that an interaction has completed.
+
+---
+
+### `setDeadline()`
+
+```tsx
+static setDeadline(deadline: number);
+```
+
+A positive number will use setTimeout to schedule any tasks after the eventLoopRunningTime hits the deadline value, otherwise all tasks will be executed in one setImmediate batch (default).
diff --git a/website/versioned_docs/version-0.82/intro-react-native-components.md b/website/versioned_docs/version-0.82/intro-react-native-components.md
index eb585964154..2f3a1449d28 100644
--- a/website/versioned_docs/version-0.82/intro-react-native-components.md
+++ b/website/versioned_docs/version-0.82/intro-react-native-components.md
@@ -43,7 +43,6 @@ React Native has many Core Components for everything from controls to activity i
 In the next section, you will start combining these Core Components to learn about how React works. Have a play with them here now!
 
 ```SnackPlayer name=Hello%20World
-import React from 'react';
 import {View, Text, Image, ScrollView, TextInput} from 'react-native';
 
 const App = () => {
diff --git a/website/versioned_docs/version-0.82/introduction.md b/website/versioned_docs/version-0.82/introduction.md
index ba782cd838c..2752b80327b 100644
--- a/website/versioned_docs/version-0.82/introduction.md
+++ b/website/versioned_docs/version-0.82/introduction.md
@@ -30,7 +30,6 @@ While we do our best to assume no prior knowledge of React, Android, or iOS deve
 This introduction lets you get started immediately in your browser with interactive examples like this one:
 
 ```SnackPlayer name=Hello%20World
-import React from 'react';
 import {Text, View} from 'react-native';
 
 const YourApp = () => {
diff --git a/website/versioned_docs/version-0.82/javascript-environment.md b/website/versioned_docs/version-0.82/javascript-environment.md
index ab041dd34cd..2149516a93b 100644
--- a/website/versioned_docs/version-0.82/javascript-environment.md
+++ b/website/versioned_docs/version-0.82/javascript-environment.md
@@ -1,109 +1,109 @@
----
-id: javascript-environment
-title: JavaScript Environment
----
-
-import TableRow from '@site/core/TableRowWithCodeBlock';
-
-## JavaScript Runtime
-
-When using React Native, you're going to be running your JavaScript code in up to three environments:
-
-- In most cases, React Native will use [Hermes](hermes), an open-source JavaScript engine optimized for React Native.
-- If Hermes is disabled, React Native will use [JavaScriptCore](https://trac.webkit.org/wiki/JavaScriptCore), the JavaScript engine that powers Safari. Note that on iOS, JavaScriptCore does not use JIT due to the absence of writable executable memory in iOS apps.
-- When using Chrome debugging, all JavaScript code runs within Chrome itself, communicating with native code via WebSockets. Chrome uses [V8](https://v8.dev/) as its JavaScript engine.
-
-While these environments are very similar, you may end up hitting some inconsistencies. It is best to avoid relying on specifics of any runtime.
-
-## JavaScript Syntax Transformers
-
-Syntax transformers make writing code more enjoyable by allowing you to use new JavaScript syntax without having to wait for support on all interpreters.
-
-React Native ships with the [Babel JavaScript compiler](https://babeljs.io). Check [Babel documentation](https://babeljs.io/docs/plugins/#transform-plugins) on its supported transformations for more details.
-
-A full list of React Native's enabled transformations can be found in [@react-native/babel-preset](https://github.com/facebook/react-native/tree/main/packages/react-native-babel-preset).
-
-<table>
-<thead>
-  <tr><th>Transformation</th><th>Code</th></tr>
-</thead>
-<tbody>
-  <tr><td className="table-heading" colSpan="2">ECMAScript 5</td></tr>
-  <TableRow name="Reserved Words" code="promise.catch(function() {...});" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2015 (ES6)</td></tr>
-  <TableRow name="Arrow functions" code="<C onPress={() => this.setState({pressed: true})} />" url="https://babeljs.io/docs/learn-es2015/#arrows" />
-  <TableRow name="Block scoping" code="let greeting = 'hi';" url="https://babeljs.io/docs/learn-es2015/#let-const" />
-  <TableRow name="Call spread" code="Math.max(...array);" url="https://babeljs.io/docs/learn-es2015/#default-rest-spread" />
-  <TableRow name="Classes" code="class C extends React.Component {render() { return <View />; }}" url="https://babeljs.io/docs/learn-es2015/#classes" />
-  <TableRow name="Computed Properties" code="const key = 'abc'; const obj = {[key]: 10};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
-  <TableRow name="Constants" code="const answer = 42;" url="https://babeljs.io/docs/learn-es2015/#let-const" />
-  <TableRow name="Destructuring" code="const {isActive, style} = this.props;" url="https://babeljs.io/docs/learn-es2015/#destructuring" />
-  <TableRow name="for…of" code="for (var num of [1, 2, 3]) {...};" url="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of" />
-  <TableRow name="Function Name" code="let number = x => x;" url="https://babeljs.io/docs/en/babel-plugin-transform-function-name" />
-  <TableRow name="Literals" code="const b = 0b11; const o = 0o7; const u = 'Hello\u{000A}\u{0009}!';" url="https://babeljs.io/docs/en/babel-plugin-transform-literals" />
-  <TableRow name="Modules" code="import React, {Component} from 'react';" url="https://babeljs.io/docs/learn-es2015/#modules" />
-  <TableRow name="Object Concise Method" code="const obj = {method() { return 10; }};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
-  <TableRow name="Object Short Notation" code="const name = 'vjeux'; const obj = {name};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
-  <TableRow name="Parameters" code="function test(x = 'hello', {a, b}, ...args) {}" url="https://babeljs.io/docs/en/babel-plugin-transform-parameters" />
-  <TableRow name="Rest Params" code="function(type, ...args) {};" url="https://github.com/sebmarkbage/ecmascript-rest-spread" />
-  <TableRow name="Shorthand Properties" code="const o = {a, b, c};" url="https://babeljs.io/docs/en/babel-plugin-transform-shorthand-properties" />
-  <TableRow name="Sticky Regex" code="const a = /o+/y;" url="https://babeljs.io/docs/en/babel-plugin-transform-sticky-regex" />
-  <TableRow name="Template Literals" code="const who = 'world'; const str = `Hello ${who}`;" url="https://babeljs.io/docs/learn-es2015/#template-strings" />
-  <TableRow name="Unicode Regex" code="const string = 'foo💩bar'; const match = string.match(/foo(.)bar/u);" url="https://babeljs.io/docs/en/babel-plugin-transform-unicode-regex" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2016 (ES7)</td></tr>
-  <TableRow name="Exponentiation Operator" code="let x = 10 ** 2;" url="https://babeljs.io/docs/en/babel-plugin-transform-exponentiation-operator" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2017 (ES8)</td></tr>
-  <TableRow name="Async Functions" code="async function doStuffAsync() {const foo = await doOtherStuffAsync();};" url="https://github.com/tc39/ecmascript-asyncawait" />
-  <TableRow name="Function Trailing Comma" code="function f(a, b, c,) {};" url="https://github.com/jeffmo/es-trailing-function-commas" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2018 (ES9)</td></tr>
-  <TableRow name="Object Spread" code="const extended = {...obj, a: 10};" url="https://github.com/tc39/proposal-object-rest-spread" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2019 (ES10)</td></tr>
-  <TableRow name="Optional Catch Binding" code="try {throw 0; } catch { doSomethingWhichDoesNotCareAboutTheValueThrown();}" url="https://babeljs.io/docs/en/babel-plugin-proposal-optional-catch-binding" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2020 (ES11)</td></tr>
-  <TableRow name="Dynamic Imports" code="const package = await import('package'); package.function()" url="https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import" />
-  <TableRow name="Nullish Coalescing Operator" code="const foo = object.foo ?? 'default';" url="https://babeljs.io/docs/en/babel-plugin-proposal-nullish-coalescing-operator" />
-  <TableRow name="Optional Chaining" code="const name = obj.user?.name;" url="https://github.com/tc39/proposal-optional-chaining" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2022 (ES13)</td></tr>
-  <TableRow name="Class Fields" code="class Bork {static a = 'foo'; static b; x = 'bar'; y;}" url="https://babeljs.io/docs/en/babel-plugin-proposal-class-properties" />
-  <tr><td className="table-heading" colSpan="2">Stage 1 Proposal</td></tr>
-  <TableRow name="Export Default From" code="export v from 'mod';" url="https://babeljs.io/docs/en/babel-plugin-proposal-export-default-from" />
-  <tr><td className="table-heading" colSpan="2">Miscellaneous</td></tr>
-  <TableRow name="Babel Template" code="template(`const %%importName%% = require(%%source%%);`);" url="https://babeljs.io/docs/en/babel-template" />
-  <TableRow name="Flow" code="function foo(x: ?number): string {};" url="https://flowtype.org/" />
-  <TableRow name="ESM to CJS" code="export default 42;" url="https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs" />
-  <TableRow name="JSX" code="<View style={{color: 'red'}} />" url="https://react.dev/learn/writing-markup-with-jsx" />
-  <TableRow name="Object Assign" code="Object.assign(a, b);" url="https://babeljs.io/docs/en/babel-plugin-transform-object-assign" />
-  <TableRow name="React Display Name" code="const bar = createReactClass({});" url="https://babeljs.io/docs/en/babel-plugin-transform-react-display-name" />
-  <TableRow name="TypeScript" code="function foo(x: {hello: true, target: 'react native!'}): string {};" url="https://www.typescriptlang.org/" />
-</tbody>
-</table>
-
-## Polyfills
-
-Many standard functions are also available on all the supported JavaScript runtimes.
-
-#### Browser
-
-- [CommonJS `require`](https://nodejs.org/docs/latest/api/modules.html)
-- `md [console.{log, warn, error, info, debug, trace, table, group, groupCollapsed, groupEnd}](https://developer.chrome.com/devtools/docs/console-api)`
-- [`XMLHttpRequest`, `fetch`](network.md#content)
-- [`{set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame`](timers.md#content)
-
-#### ECMAScript 2015 (ES6)
-
-- [`Array.from`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from)
-- `md Array.prototype.{[find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find), [findIndex](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)}`
-- [`Object.assign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
-- `md String.prototype.{[startsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith), [endsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith), [repeat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat), [includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes)}`
-
-#### ECMAScript 2016 (ES7)
-
-- `md Array.prototype.[includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)`
-
-#### ECMAScript 2017 (ES8)
-
-- `md Object.{[entries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries), [values](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values)}`
-
-#### Specific
-
-- `__DEV__`
+---
+id: javascript-environment
+title: JavaScript Environment
+---
+
+import TableRow from '@site/core/TableRowWithCodeBlock';
+
+## JavaScript Runtime
+
+When using React Native, you're going to be running your JavaScript code in up to three environments:
+
+- In most cases, React Native will use [Hermes](hermes), an open-source JavaScript engine optimized for React Native.
+- If Hermes is disabled, React Native will use [JavaScriptCore](https://trac.webkit.org/wiki/JavaScriptCore), the JavaScript engine that powers Safari. Note that on iOS, JavaScriptCore does not use JIT due to the absence of writable executable memory in iOS apps.
+- When using Chrome debugging, all JavaScript code runs within Chrome itself, communicating with native code via WebSockets. Chrome uses [V8](https://v8.dev/) as its JavaScript engine.
+
+While these environments are very similar, you may end up hitting some inconsistencies. It is best to avoid relying on specifics of any runtime.
+
+## JavaScript Syntax Transformers
+
+Syntax transformers make writing code more enjoyable by allowing you to use new JavaScript syntax without having to wait for support on all interpreters.
+
+React Native ships with the [Babel JavaScript compiler](https://babeljs.io). Check [Babel documentation](https://babeljs.io/docs/plugins/#transform-plugins) on its supported transformations for more details.
+
+A full list of React Native's enabled transformations can be found in [@react-native/babel-preset](https://github.com/facebook/react-native/tree/main/packages/react-native-babel-preset).
+
+<table>
+<thead>
+  <tr><th>Transformation</th><th>Code</th></tr>
+</thead>
+<tbody>
+  <tr><td className="table-heading" colSpan="2">ECMAScript 5</td></tr>
+  <TableRow name="Reserved Words" code="promise.catch(function() {...});" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2015 (ES6)</td></tr>
+  <TableRow name="Arrow functions" code="<C onPress={() => this.setState({pressed: true})} />" url="https://babeljs.io/docs/learn-es2015/#arrows" />
+  <TableRow name="Block scoping" code="let greeting = 'hi';" url="https://babeljs.io/docs/learn-es2015/#let-const" />
+  <TableRow name="Call spread" code="Math.max(...array);" url="https://babeljs.io/docs/learn-es2015/#default-rest-spread" />
+  <TableRow name="Classes" code="class C extends React.Component {render() { return <View />; }}" url="https://babeljs.io/docs/learn-es2015/#classes" />
+  <TableRow name="Computed Properties" code="const key = 'abc'; const obj = {[key]: 10};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
+  <TableRow name="Constants" code="const answer = 42;" url="https://babeljs.io/docs/learn-es2015/#let-const" />
+  <TableRow name="Destructuring" code="const {isActive, style} = this.props;" url="https://babeljs.io/docs/learn-es2015/#destructuring" />
+  <TableRow name="for…of" code="for (var num of [1, 2, 3]) {...};" url="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of" />
+  <TableRow name="Function Name" code="let number = x => x;" url="https://babeljs.io/docs/en/babel-plugin-transform-function-name" />
+  <TableRow name="Literals" code="const b = 0b11; const o = 0o7; const u = 'Hello\u{000A}\u{0009}!';" url="https://babeljs.io/docs/en/babel-plugin-transform-literals" />
+  <TableRow name="Modules" code="import {Component} from 'react';" url="https://babeljs.io/docs/learn-es2015/#modules" />
+  <TableRow name="Object Concise Method" code="const obj = {method() { return 10; }};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
+  <TableRow name="Object Short Notation" code="const name = 'vjeux'; const obj = {name};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
+  <TableRow name="Parameters" code="function test(x = 'hello', {a, b}, ...args) {}" url="https://babeljs.io/docs/en/babel-plugin-transform-parameters" />
+  <TableRow name="Rest Params" code="function(type, ...args) {};" url="https://github.com/sebmarkbage/ecmascript-rest-spread" />
+  <TableRow name="Shorthand Properties" code="const o = {a, b, c};" url="https://babeljs.io/docs/en/babel-plugin-transform-shorthand-properties" />
+  <TableRow name="Sticky Regex" code="const a = /o+/y;" url="https://babeljs.io/docs/en/babel-plugin-transform-sticky-regex" />
+  <TableRow name="Template Literals" code="const who = 'world'; const str = `Hello ${who}`;" url="https://babeljs.io/docs/learn-es2015/#template-strings" />
+  <TableRow name="Unicode Regex" code="const string = 'foo💩bar'; const match = string.match(/foo(.)bar/u);" url="https://babeljs.io/docs/en/babel-plugin-transform-unicode-regex" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2016 (ES7)</td></tr>
+  <TableRow name="Exponentiation Operator" code="let x = 10 ** 2;" url="https://babeljs.io/docs/en/babel-plugin-transform-exponentiation-operator" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2017 (ES8)</td></tr>
+  <TableRow name="Async Functions" code="async function doStuffAsync() {const foo = await doOtherStuffAsync();};" url="https://github.com/tc39/ecmascript-asyncawait" />
+  <TableRow name="Function Trailing Comma" code="function f(a, b, c,) {};" url="https://github.com/jeffmo/es-trailing-function-commas" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2018 (ES9)</td></tr>
+  <TableRow name="Object Spread" code="const extended = {...obj, a: 10};" url="https://github.com/tc39/proposal-object-rest-spread" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2019 (ES10)</td></tr>
+  <TableRow name="Optional Catch Binding" code="try {throw 0; } catch { doSomethingWhichDoesNotCareAboutTheValueThrown();}" url="https://babeljs.io/docs/en/babel-plugin-proposal-optional-catch-binding" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2020 (ES11)</td></tr>
+  <TableRow name="Dynamic Imports" code="const package = await import('package'); package.function()" url="https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import" />
+  <TableRow name="Nullish Coalescing Operator" code="const foo = object.foo ?? 'default';" url="https://babeljs.io/docs/en/babel-plugin-proposal-nullish-coalescing-operator" />
+  <TableRow name="Optional Chaining" code="const name = obj.user?.name;" url="https://github.com/tc39/proposal-optional-chaining" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2022 (ES13)</td></tr>
+  <TableRow name="Class Fields" code="class Bork {static a = 'foo'; static b; x = 'bar'; y;}" url="https://babeljs.io/docs/en/babel-plugin-proposal-class-properties" />
+  <tr><td className="table-heading" colSpan="2">Stage 1 Proposal</td></tr>
+  <TableRow name="Export Default From" code="export v from 'mod';" url="https://babeljs.io/docs/en/babel-plugin-proposal-export-default-from" />
+  <tr><td className="table-heading" colSpan="2">Miscellaneous</td></tr>
+  <TableRow name="Babel Template" code="template(`const %%importName%% = require(%%source%%);`);" url="https://babeljs.io/docs/en/babel-template" />
+  <TableRow name="Flow" code="function foo(x: ?number): string {};" url="https://flowtype.org/" />
+  <TableRow name="ESM to CJS" code="export default 42;" url="https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs" />
+  <TableRow name="JSX" code="<View style={{color: 'red'}} />" url="https://react.dev/learn/writing-markup-with-jsx" />
+  <TableRow name="Object Assign" code="Object.assign(a, b);" url="https://babeljs.io/docs/en/babel-plugin-transform-object-assign" />
+  <TableRow name="React Display Name" code="const bar = createReactClass({});" url="https://babeljs.io/docs/en/babel-plugin-transform-react-display-name" />
+  <TableRow name="TypeScript" code="function foo(x: {hello: true, target: 'react native!'}): string {};" url="https://www.typescriptlang.org/" />
+</tbody>
+</table>
+
+## Polyfills
+
+Many standard functions are also available on all the supported JavaScript runtimes.
+
+#### Browser
+
+- [CommonJS `require`](https://nodejs.org/docs/latest/api/modules.html)
+- `md [console.{log, warn, error, info, debug, trace, table, group, groupCollapsed, groupEnd}](https://developer.chrome.com/devtools/docs/console-api)`
+- [`XMLHttpRequest`, `fetch`](network.md#content)
+- [`{set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame`](timers.md#content)
+
+#### ECMAScript 2015 (ES6)
+
+- [`Array.from`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from)
+- `md Array.prototype.{[find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find), [findIndex](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)}`
+- [`Object.assign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
+- `md String.prototype.{[startsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith), [endsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith), [repeat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat), [includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes)}`
+
+#### ECMAScript 2016 (ES7)
+
+- `md Array.prototype.[includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)`
+
+#### ECMAScript 2017 (ES8)
+
+- `md Object.{[entries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries), [values](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values)}`
+
+#### Specific
+
+- `__DEV__`
diff --git a/website/versioned_docs/version-0.82/keyboard.md b/website/versioned_docs/version-0.82/keyboard.md
index 8560ce4999d..de1ec7b870b 100644
--- a/website/versioned_docs/version-0.82/keyboard.md
+++ b/website/versioned_docs/version-0.82/keyboard.md
@@ -1,146 +1,146 @@
----
-id: keyboard
-title: Keyboard
----
-
-`Keyboard` module to control keyboard events.
-
-### Usage
-
-The Keyboard module allows you to listen for native events and react to them, as well as make changes to the keyboard, like dismissing it.
-
-```SnackPlayer name=Keyboard%20Example&supportedPlatforms=ios,android
-import React, {useState, useEffect} from 'react';
-import {Keyboard, Text, TextInput, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const Example = () => {
-  const [keyboardStatus, setKeyboardStatus] = useState('Keyboard Hidden');
-
-  useEffect(() => {
-    const showSubscription = Keyboard.addListener('keyboardDidShow', () => {
-      setKeyboardStatus('Keyboard Shown');
-    });
-    const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
-      setKeyboardStatus('Keyboard Hidden');
-    });
-
-    return () => {
-      showSubscription.remove();
-      hideSubscription.remove();
-    };
-  }, []);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={style.container}>
-        <TextInput
-          style={style.input}
-          placeholder="Click here…"
-          onSubmitEditing={Keyboard.dismiss}
-        />
-        <Text style={style.status}>{keyboardStatus}</Text>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const style = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 36,
-  },
-  input: {
-    padding: 10,
-    borderWidth: 0.5,
-    borderRadius: 4,
-  },
-  status: {
-    padding: 16,
-    textAlign: 'center',
-  },
-});
-
-export default Example;
-```
-
----
-
-# Reference
-
-## Methods
-
-### `addListener()`
-
-```tsx
-static addListener: (
-  eventType: KeyboardEventName,
-  listener: KeyboardEventListener,
-) => EmitterSubscription;
-```
-
-The `addListener` function connects a JavaScript function to an identified native keyboard notification event.
-
-This function then returns the reference to the listener.
-
-**Parameters:**
-
-| Name                                                                     | Type     | Description                                                                    |
-| ------------------------------------------------------------------------ | -------- | ------------------------------------------------------------------------------ |
-| eventName <div className="label basic two-lines required">Required</div> | string   | The string that identifies the event you're listening for. See the list below. |
-| callback <div className="label basic two-lines required">Required</div>  | function | The function to be called when the event fires                                 |
-
-**`eventName`**
-
-This can be any of the following:
-
-- `keyboardWillShow`
-- `keyboardDidShow`
-- `keyboardWillHide`
-- `keyboardDidHide`
-- `keyboardWillChangeFrame`
-- `keyboardDidChangeFrame`
-
-:::note
-Only `keyboardDidShow` and `keyboardDidHide` events are available on Android. The events will not be fired when using Android 10 or below if your activity has `android:windowSoftInputMode` set to `adjustResize` or `adjustNothing`.
-:::
-
----
-
-### `dismiss()`
-
-```tsx
-static dismiss();
-```
-
-Dismisses the active keyboard and removes focus.
-
----
-
-### `scheduleLayoutAnimation`
-
-```tsx
-static scheduleLayoutAnimation(event: KeyboardEvent);
-```
-
-Useful for syncing TextInput (or other keyboard accessory view) size of position changes with keyboard movements.
-
----
-
-### `isVisible()`
-
-```tsx
-static isVisible(): boolean;
-```
-
-Whether the keyboard is last known to be visible.
-
----
-
-### `metrics()`
-
-```tsx
-static metrics(): KeyboardMetrics | undefined;
-```
-
-Return the metrics of the soft-keyboard if visible.
+---
+id: keyboard
+title: Keyboard
+---
+
+`Keyboard` module to control keyboard events.
+
+### Usage
+
+The Keyboard module allows you to listen for native events and react to them, as well as make changes to the keyboard, like dismissing it.
+
+```SnackPlayer name=Keyboard%20Example&supportedPlatforms=ios,android
+import {useState, useEffect} from 'react';
+import {Keyboard, Text, TextInput, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const Example = () => {
+  const [keyboardStatus, setKeyboardStatus] = useState('Keyboard Hidden');
+
+  useEffect(() => {
+    const showSubscription = Keyboard.addListener('keyboardDidShow', () => {
+      setKeyboardStatus('Keyboard Shown');
+    });
+    const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
+      setKeyboardStatus('Keyboard Hidden');
+    });
+
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={style.container}>
+        <TextInput
+          style={style.input}
+          placeholder="Click here…"
+          onSubmitEditing={Keyboard.dismiss}
+        />
+        <Text style={style.status}>{keyboardStatus}</Text>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const style = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 36,
+  },
+  input: {
+    padding: 10,
+    borderWidth: 0.5,
+    borderRadius: 4,
+  },
+  status: {
+    padding: 16,
+    textAlign: 'center',
+  },
+});
+
+export default Example;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `addListener()`
+
+```tsx
+static addListener: (
+  eventType: KeyboardEventName,
+  listener: KeyboardEventListener,
+) => EmitterSubscription;
+```
+
+The `addListener` function connects a JavaScript function to an identified native keyboard notification event.
+
+This function then returns the reference to the listener.
+
+**Parameters:**
+
+| Name                                                                     | Type     | Description                                                                    |
+| ------------------------------------------------------------------------ | -------- | ------------------------------------------------------------------------------ |
+| eventName <div className="label basic two-lines required">Required</div> | string   | The string that identifies the event you're listening for. See the list below. |
+| callback <div className="label basic two-lines required">Required</div>  | function | The function to be called when the event fires                                 |
+
+**`eventName`**
+
+This can be any of the following:
+
+- `keyboardWillShow`
+- `keyboardDidShow`
+- `keyboardWillHide`
+- `keyboardDidHide`
+- `keyboardWillChangeFrame`
+- `keyboardDidChangeFrame`
+
+:::note
+Only `keyboardDidShow` and `keyboardDidHide` events are available on Android. The events will not be fired when using Android 10 or below if your activity has `android:windowSoftInputMode` set to `adjustResize` or `adjustNothing`.
+:::
+
+---
+
+### `dismiss()`
+
+```tsx
+static dismiss();
+```
+
+Dismisses the active keyboard and removes focus.
+
+---
+
+### `scheduleLayoutAnimation`
+
+```tsx
+static scheduleLayoutAnimation(event: KeyboardEvent);
+```
+
+Useful for syncing TextInput (or other keyboard accessory view) size of position changes with keyboard movements.
+
+---
+
+### `isVisible()`
+
+```tsx
+static isVisible(): boolean;
+```
+
+Whether the keyboard is last known to be visible.
+
+---
+
+### `metrics()`
+
+```tsx
+static metrics(): KeyboardMetrics | undefined;
+```
+
+Return the metrics of the soft-keyboard if visible.
diff --git a/website/versioned_docs/version-0.82/keyboardavoidingview.md b/website/versioned_docs/version-0.82/keyboardavoidingview.md
index 55cce32cf54..cc650dd0f57 100644
--- a/website/versioned_docs/version-0.82/keyboardavoidingview.md
+++ b/website/versioned_docs/version-0.82/keyboardavoidingview.md
@@ -8,7 +8,6 @@ This component will automatically adjust its height, position, or bottom padding
 ## Example
 
 ```SnackPlayer name=KeyboardAvoidingView&supportedPlatforms=android,ios
-import React from 'react';
 import {
   View,
   KeyboardAvoidingView,
diff --git a/website/versioned_docs/version-0.82/layout-props.md b/website/versioned_docs/version-0.82/layout-props.md
index b3673e0c849..0d10649d7d6 100644
--- a/website/versioned_docs/version-0.82/layout-props.md
+++ b/website/versioned_docs/version-0.82/layout-props.md
@@ -1,1360 +1,1360 @@
----
-id: layout-props
-title: Layout Props
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-:::info
-More detailed examples about those properties can be found on the [Layout with Flexbox](flexbox) page.
-:::
-
-### Example
-
-The following example shows how different properties can affect or shape a React Native layout. You can try for example to add or remove squares from the UI while changing the values of the property `flexWrap`.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=LayoutProps%20Example&ext=js
-import React, {useState} from 'react';
-import {Button, ScrollView, StyleSheet, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [flexDirection, setFlexDirection] = useState(0);
-  const [justifyContent, setJustifyContent] = useState(0);
-  const [alignItems, setAlignItems] = useState(0);
-  const [direction, setDirection] = useState(0);
-  const [wrap, setWrap] = useState(0);
-
-  const [squares, setSquares] = useState([<Square />, <Square />, <Square />]);
-
-  const hookedStyles = {
-    flexDirection: flexDirections[flexDirection],
-    justifyContent: justifyContents[justifyContent],
-    alignItems: alignItemsArr[alignItems],
-    direction: directions[direction],
-    flexWrap: wraps[wrap],
-  };
-
-  const changeSetting = (value, options, setterFunction) => {
-    if (value === options.length - 1) {
-      setterFunction(0);
-      return;
-    }
-    setterFunction(value + 1);
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={[styles.container, styles.playingSpace, hookedStyles]}>
-          {squares.map(elem => elem)}
-        </View>
-        <ScrollView style={styles.layoutContainer}>
-          <View style={styles.controlSpace}>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Flex Direction"
-                onPress={() =>
-                  changeSetting(flexDirection, flexDirections, setFlexDirection)
-                }
-              />
-              <Text style={styles.text}>{flexDirections[flexDirection]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Justify Content"
-                onPress={() =>
-                  changeSetting(
-                    justifyContent,
-                    justifyContents,
-                    setJustifyContent,
-                  )
-                }
-              />
-              <Text style={styles.text}>{justifyContents[justifyContent]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Align Items"
-                onPress={() =>
-                  changeSetting(alignItems, alignItemsArr, setAlignItems)
-                }
-              />
-              <Text style={styles.text}>{alignItemsArr[alignItems]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Direction"
-                onPress={() =>
-                  changeSetting(direction, directions, setDirection)
-                }
-              />
-              <Text style={styles.text}>{directions[direction]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Flex Wrap"
-                onPress={() => changeSetting(wrap, wraps, setWrap)}
-              />
-              <Text style={styles.text}>{wraps[wrap]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Add Square"
-                onPress={() => setSquares([...squares, <Square />])}
-              />
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Delete Square"
-                onPress={() =>
-                  setSquares(squares.filter((v, i) => i !== squares.length - 1))
-                }
-              />
-            </View>
-          </View>
-        </ScrollView>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const flexDirections = ['row', 'row-reverse', 'column', 'column-reverse'];
-const justifyContents = [
-  'flex-start',
-  'flex-end',
-  'center',
-  'space-between',
-  'space-around',
-  'space-evenly',
-];
-const alignItemsArr = [
-  'flex-start',
-  'flex-end',
-  'center',
-  'stretch',
-  'baseline',
-];
-const wraps = ['nowrap', 'wrap', 'wrap-reverse'];
-const directions = ['inherit', 'ltr', 'rtl'];
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  layoutContainer: {
-    flex: 0.5,
-  },
-  playingSpace: {
-    backgroundColor: 'white',
-    borderColor: 'blue',
-    borderWidth: 3,
-    overflow: 'hidden',
-  },
-  controlSpace: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  buttonView: {
-    width: '50%',
-    padding: 10,
-  },
-  text: {
-    textAlign: 'center',
-  },
-});
-
-const Square = () => (
-  <View
-    style={{
-      width: 50,
-      height: 50,
-      backgroundColor: randomHexColor(),
-    }}
-  />
-);
-
-const randomHexColor = () => {
-  return '#000000'.replace(/0/g, () => {
-    return Math.round(Math.random() * 14).toString(16);
-  });
-};
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=LayoutProps%20Example&ext=tsx
-import React, {useState} from 'react';
-import {
-  Button,
-  ScrollView,
-  StyleSheet,
-  Text,
-  View,
-  FlexAlignType,
-  FlexStyle,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [flexDirection, setFlexDirection] = useState(0);
-  const [justifyContent, setJustifyContent] = useState(0);
-  const [alignItems, setAlignItems] = useState(0);
-  const [direction, setDirection] = useState(0);
-  const [wrap, setWrap] = useState(0);
-
-  const [squares, setSquares] = useState([<Square />, <Square />, <Square />]);
-
-  const hookedStyles = {
-    flexDirection: flexDirections[flexDirection],
-    justifyContent: justifyContents[justifyContent],
-    alignItems: alignItemsArr[alignItems],
-    direction: directions[direction],
-    flexWrap: wraps[wrap],
-  } as FlexStyle;
-
-  const changeSetting = (
-    value: number,
-    options: any[],
-    setterFunction: (index: number) => void,
-  ) => {
-    if (value === options.length - 1) {
-      setterFunction(0);
-      return;
-    }
-    setterFunction(value + 1);
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={[styles.container, styles.playingSpace, hookedStyles]}>
-          {squares.map(elem => elem)}
-        </View>
-        <ScrollView style={styles.layoutContainer}>
-          <View style={styles.controlSpace}>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Flex Direction"
-                onPress={() =>
-                  changeSetting(flexDirection, flexDirections, setFlexDirection)
-                }
-              />
-              <Text style={styles.text}>{flexDirections[flexDirection]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Justify Content"
-                onPress={() =>
-                  changeSetting(
-                    justifyContent,
-                    justifyContents,
-                    setJustifyContent,
-                  )
-                }
-              />
-              <Text style={styles.text}>{justifyContents[justifyContent]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Align Items"
-                onPress={() =>
-                  changeSetting(alignItems, alignItemsArr, setAlignItems)
-                }
-              />
-              <Text style={styles.text}>{alignItemsArr[alignItems]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Direction"
-                onPress={() =>
-                  changeSetting(direction, directions, setDirection)
-                }
-              />
-              <Text style={styles.text}>{directions[direction]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Flex Wrap"
-                onPress={() => changeSetting(wrap, wraps, setWrap)}
-              />
-              <Text style={styles.text}>{wraps[wrap]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Add Square"
-                onPress={() => setSquares([...squares, <Square />])}
-              />
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Delete Square"
-                onPress={() =>
-                  setSquares(squares.filter((v, i) => i !== squares.length - 1))
-                }
-              />
-            </View>
-          </View>
-        </ScrollView>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const flexDirections = [
-  'row',
-  'row-reverse',
-  'column',
-  'column-reverse',
-] as FlexStyle['flexDirection'][];
-const justifyContents = [
-  'flex-start',
-  'flex-end',
-  'center',
-  'space-between',
-  'space-around',
-  'space-evenly',
-] as FlexStyle['justifyContent'][];
-const alignItemsArr = [
-  'flex-start',
-  'flex-end',
-  'center',
-  'stretch',
-  'baseline',
-] as FlexAlignType[];
-const wraps = ['nowrap', 'wrap', 'wrap-reverse'];
-const directions = ['inherit', 'ltr', 'rtl'];
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  layoutContainer: {
-    flex: 0.5,
-  },
-  playingSpace: {
-    backgroundColor: 'white',
-    borderColor: 'blue',
-    borderWidth: 3,
-    overflow: 'hidden',
-  },
-  controlSpace: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  buttonView: {
-    width: '50%',
-    padding: 10,
-  },
-  text: {
-    textAlign: 'center',
-  },
-});
-
-const Square = () => (
-  <View
-    style={{
-      width: 50,
-      height: 50,
-      backgroundColor: randomHexColor(),
-    }}
-  />
-);
-
-const randomHexColor = () => {
-  return '#000000'.replace(/0/g, () => {
-    return Math.round(Math.random() * 14).toString(16);
-  });
-};
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
----
-
-# Reference
-
-## Props
-
-### `alignContent`
-
-`alignContent` controls how rows align in the cross direction, overriding the `alignContent` of the parent.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) for more details.
-
-| Type                                                                                                 | Required |
-| ---------------------------------------------------------------------------------------------------- | -------- |
-| enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around', 'space-evenly') | No       |
-
----
-
-### `alignItems`
-
-`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS (default: stretch).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) for more details.
-
-| Type                                                            | Required |
-| --------------------------------------------------------------- | -------- |
-| enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline') | No       |
-
----
-
-### `alignSelf`
-
-`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS (default: auto).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) for more details.
-
-| Type                                                                    | Required |
-| ----------------------------------------------------------------------- | -------- |
-| enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline') | No       |
-
----
-
-### `aspectRatio`
-
-Aspect ratio controls the size of the undefined dimension of a node.
-
-- On a node with a set width/height, aspect ratio controls the size of the unset dimension
-- On a node with a set flex basis, aspect ratio controls the size of the node in the cross axis if unset
-- On a node with a measure function, aspect ratio works as though the measure function measures the flex basis
-- On a node with flex grow/shrink, aspect ratio controls the size of the node in the cross axis if unset
-- Aspect ratio takes min/max dimensions into account
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `borderBottomWidth`
-
-`borderBottomWidth` works like `border-bottom-width` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderEndWidth`
-
-When direction is `ltr`, `borderEndWidth` is equivalent to `borderRightWidth`. When direction is `rtl`, `borderEndWidth` is equivalent to `borderLeftWidth`.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderLeftWidth`
-
-`borderLeftWidth` works like `border-left-width` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderRightWidth`
-
-`borderRightWidth` works like `border-right-width` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderStartWidth`
-
-When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. When direction is `rtl`, `borderStartWidth` is equivalent to `borderRightWidth`.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderTopWidth`
-
-`borderTopWidth` works like `border-top-width` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderWidth`
-
-`borderWidth` works like `border-width` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `bottom`
-
-`bottom` is the number of logical pixels to offset the bottom edge of this component.
-
-It works similarly to `bottom` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) for more details of how `bottom` affects layout.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `boxSizing`
-
-`boxSizing` defines how the element's various sizing props (`width`, `height`, `minWidth`, `minHeight`, etc.) are computed. If `boxSizing` is `border-box`, these sizes apply to the border box of the element. If it is `content-box`, they apply to the content box of the element. The default value is `border-box`. The [web documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) is a good source of information if you wish to learn more about how this prop works.
-
-| Type                              | Required |
-| --------------------------------- | -------- |
-| enum('border-box', 'content-box') | No       |
-
----
-
-### `columnGap`
-
-`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `direction`
-
-`direction` specifies the directional flow of the user interface. The default is `inherit`, except for root node which will have value based on the current locale.
-
-See [MDN CSS Reference](https://www.yogalayout.dev/docs/styling/layout-direction) for more details.
-
-| Type                          | Required |
-| ----------------------------- | -------- |
-| enum('inherit', 'ltr', 'rtl') | No       |
-
----
-
-### `display`
-
-`display` sets the display type of this component.
-
-It works similarly to `display` in CSS but only supports the values 'flex', 'none', and 'contents'. The default is `flex`.
-
-| Type                             | Required |
-| -------------------------------- | -------- |
-| enum('none', 'flex', 'contents') | No       |
-
----
-
-### `end`
-
-When the direction is `ltr`, `end` is equivalent to `right`. When the direction is `rtl`, `end` is equivalent to `left`.
-
-This style takes precedence over the `left` and `right` styles.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `flex`
-
-In React Native `flex` does not work the same way that it does in CSS. `flex` is a number rather than a string, and it works according to the [Yoga](https://github.com/facebook/yoga) layout engine.
-
-When `flex` is a positive number, it makes the component flexible, and it will be sized proportional to its flex value. So a component with `flex` set to `2` will take twice the space as a component with `flex` set to 1. `flex: <positive number>` equates to `flexGrow: <positive number>, flexShrink: 1, flexBasis: 0`.
-
-When `flex` is `0`, the component is sized according to `width` and `height`, and it is inflexible.
-
-When `flex` is `-1`, the component is normally sized according to `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`.
-
-`flexGrow`, `flexShrink`, and `flexBasis` work the same as in CSS.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `flexBasis`
-
-`flexBasis` is an axis-independent way of providing the default size of an item along the main axis. Setting the `flexBasis` of a child is similar to setting the `width` of that child if its parent is a container with `flexDirection: row` or setting the `height` of a child if its parent is a container with `flexDirection: column`. The `flexBasis` of an item is the default size of that item, the size of the item before any `flexGrow` and `flexShrink` calculations are performed.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `flexDirection`
-
-`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) for more details.
-
-| Type                                                   | Required |
-| ------------------------------------------------------ | -------- |
-| enum('row', 'row-reverse', 'column', 'column-reverse') | No       |
-
----
-
-### `flexGrow`
-
-`flexGrow` describes how any space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
-
-`flexGrow` accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the children’s `flexGrow` values.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `flexShrink`
-
-[`flexShrink`](layout-props#flexshrink) describes how to shrink children along the main axis in the case in which the total size of the children overflows the size of the container on the main axis. `flexShrink` is very similar to `flexGrow` and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed.
-
-`flexShrink` accepts any floating point value >= 0, with 0 being the default value. A container will shrink its children weighted by the children’s `flexShrink` values.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `flexWrap`
-
-`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS (default: nowrap).
-
-Note it does not work anymore with `alignItems: stretch` (the default), so you may want to use `alignItems: flex-start` for example (breaking change details: https://github.com/facebook/react-native/releases/tag/v0.28.0).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) for more details.
-
-| Type                                   | Required |
-| -------------------------------------- | -------- |
-| enum('wrap', 'nowrap', 'wrap-reverse') | No       |
-
----
-
-### `gap`
-
-`gap` works like `gap` in CSS. Only pixel units are supported in React Native.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `height`
-
-`height` sets the height of this component.
-
-It works similarly to `height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/height) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `inset`
-
-:::note
-`inset` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Setting `inset` has the same effect as setting each of `top`, `bottom`, `right` and `left` props.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/inset) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetBlock`
-
-:::note
-`insetBlock` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Equivalent to [`top`](layout-props#top) and [`bottom`](layout-props#bottom).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetBlockEnd`
-
-:::note
-`insetBlockEnd` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Equivalent to [`bottom`](layout-props#bottom).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetBlockStart`
-
-:::note
-`insetBlockStart` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Equivalent to [`top`](layout-props#top).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetInline`
-
-:::note
-`insetInline` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Equivalent to [`right`](layout-props#right) and [`left`](layout-props#left).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetInlineEnd`
-
-:::note
-`insetInlineEnd` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-When direction is `ltr`, `insetInlineEnd` is equivalent to [`right`](layout-props#right). When direction is `rtl`, `insetInlineEnd` is equivalent to [`left`](layout-props#left).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetInlineStart`
-
-:::note
-`insetInlineStart` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-When direction is `ltr`, `insetInlineStart` is equivalent to [`left`](layout-props#left). When direction is `rtl`, `insetInlineStart` is equivalent to [`right`](layout-props#right).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `isolation`
-
-:::note
-`isolation` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-`isolation` lets you form a [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context).
-
-There are two values:
-
-- `auto` (default): Does nothing.
-- `isolate`: Forms a stacking context.
-
-| Type                    | Required |
-| ----------------------- | -------- |
-| enum('auto', 'isolate') | No       |
-
----
-
-### `justifyContent`
-
-`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS (default: flex-start).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) for more details.
-
-| Type                                                                                      | Required |
-| ----------------------------------------------------------------------------------------- | -------- |
-| enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly') | No       |
-
----
-
-### `left`
-
-`left` is the number of logical pixels to offset the left edge of this component.
-
-It works similarly to `left` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/left) for more details of how `left` affects layout.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `margin`
-
-Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginBottom`
-
-`marginBottom` works like `margin-bottom` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginBlock`
-
-Equivalent to [`marginVertical`](layout-props#marginvertical).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginBlockEnd`
-
-Equivalent to [`marginBottom`](layout-props#marginbottom).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginBlockStart`
-
-Equivalent to [`marginTop`](layout-props#margintop).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginEnd`
-
-When direction is `ltr`, `marginEnd` is equivalent to `marginRight`. When direction is `rtl`, `marginEnd` is equivalent to `marginLeft`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginHorizontal`
-
-Setting `marginHorizontal` has the same effect as setting both `marginLeft` and `marginRight`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginInline`
-
-Equivalent to [`marginHorizontal`](layout-props#marginhorizontal).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginInlineEnd`
-
-When direction is `ltr`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginRight`). When direction is `rtl`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginLeft`).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginInlineStart`
-
-When direction is `ltr`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginLeft`). When direction is `rtl`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginRight`).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginLeft`
-
-`marginLeft` works like `margin-left` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginRight`
-
-`marginRight` works like `margin-right` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginStart`
-
-When direction is `ltr`, `marginStart` is equivalent to `marginLeft`. When direction is `rtl`, `marginStart` is equivalent to `marginRight`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginTop`
-
-`marginTop` works like `margin-top` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginVertical`
-
-Setting `marginVertical` has the same effect as setting both `marginTop` and `marginBottom`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `maxHeight`
-
-`maxHeight` is the maximum height for this component, in logical pixels.
-
-It works similarly to `max-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `maxWidth`
-
-`maxWidth` is the maximum width for this component, in logical pixels.
-
-It works similarly to `max-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `minHeight`
-
-`minHeight` is the minimum height for this component, in logical pixels.
-
-It works similarly to `min-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `minWidth`
-
-`minWidth` is the minimum width for this component, in logical pixels.
-
-It works similarly to `min-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `overflow`
-
-`overflow` controls how children are measured and displayed. `overflow: hidden` causes views to be clipped while `overflow: scroll` causes views to be measured independently of their parents' main axis. It works like `overflow` in CSS (default: visible).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) for more details.
-
-| Type                                | Required |
-| ----------------------------------- | -------- |
-| enum('visible', 'hidden', 'scroll') | No       |
-
----
-
-### `padding`
-
-Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingBottom`
-
-`paddingBottom` works like `padding-bottom` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingBlock`
-
-Equivalent to [`paddingVertical`](layout-props#paddingvertical).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingBlockEnd`
-
-Equivalent to [`paddingBottom`](layout-props#paddingbottom).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingBlockStart`
-
-Equivalent to [`paddingTop`](layout-props#paddingtop).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingEnd`
-
-When direction is `ltr`, `paddingEnd` is equivalent to `paddingRight`. When direction is `rtl`, `paddingEnd` is equivalent to `paddingLeft`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingHorizontal`
-
-Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRight`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingInline`
-
-Equivalent to [`paddingHorizontal`](layout-props#paddinghorizontal).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingInlineEnd`
-
-When direction is `ltr`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingRight`). When direction is `rtl`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingLeft`).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingInlineStart`
-
-When direction is `ltr`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingLeft`). When direction is `rtl`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingRight`).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingLeft`
-
-`paddingLeft` works like `padding-left` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingRight`
-
-`paddingRight` works like `padding-right` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingStart`
-
-When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`. When direction is `rtl`, `paddingStart` is equivalent to `paddingRight`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingTop`
-
-`paddingTop` works like `padding-top` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingVertical`
-
-Setting `paddingVertical` is like setting both of `paddingTop` and `paddingBottom`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `position`
-
-`position` in React Native is similar to [regular CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/position), but everything is set to `relative` by default.
-
-`relative` will position an element according to the normal flow of the layout. Insets (`top`, `bottom`, `left`, `right`) will offset relative to this layout.
-
-`absolute` takes the element out of the normal flow of the layout. Insets will offset relative to its [containing block](./flexbox.md#the-containing-block).
-
-`static` will position an element according to the normal flow of the layout. Insets will have no effect.
-`static` elements do not form a containing block for absolute descendants.
-
-For more information, see the [Layout with Flexbox docs](./flexbox.md#position). Also, [the Yoga documentation](https://www.yogalayout.dev/docs/styling/position) has more details on how `position` differs between React Native and CSS.
-
-| Type                                   | Required |
-| -------------------------------------- | -------- |
-| enum('absolute', 'relative', 'static') | No       |
-
----
-
-### `right`
-
-`right` is the number of logical pixels to offset the right edge of this component.
-
-It works similarly to `right` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) for more details of how `right` affects layout.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `rowGap`
-
-`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `start`
-
-When the direction is `ltr`, `start` is equivalent to `left`. When the direction is `rtl`, `start` is equivalent to `right`.
-
-This style takes precedence over the `left`, `right`, and `end` styles.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `top`
-
-`top` is the number of logical pixels to offset the top edge of this component.
-
-It works similarly to `top` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/top) for more details of how `top` affects layout.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `width`
-
-`width` sets the width of this component.
-
-It works similarly to `width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/width) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `zIndex`
-
-`zIndex` controls which components display on top of others. Normally, you don't use `zIndex`. Components render according to their order in the document tree, so later components draw over earlier ones. `zIndex` may be useful if you have animations or custom modal interfaces where you don't want this behavior.
-
-It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball.
-
-On iOS, `zIndex` may require `View`s to be siblings of each other for it to work as expected.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
+---
+id: layout-props
+title: Layout Props
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+:::info
+More detailed examples about those properties can be found on the [Layout with Flexbox](flexbox) page.
+:::
+
+### Example
+
+The following example shows how different properties can affect or shape a React Native layout. You can try for example to add or remove squares from the UI while changing the values of the property `flexWrap`.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=LayoutProps%20Example&ext=js
+import {useState} from 'react';
+import {Button, ScrollView, StyleSheet, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [flexDirection, setFlexDirection] = useState(0);
+  const [justifyContent, setJustifyContent] = useState(0);
+  const [alignItems, setAlignItems] = useState(0);
+  const [direction, setDirection] = useState(0);
+  const [wrap, setWrap] = useState(0);
+
+  const [squares, setSquares] = useState([<Square />, <Square />, <Square />]);
+
+  const hookedStyles = {
+    flexDirection: flexDirections[flexDirection],
+    justifyContent: justifyContents[justifyContent],
+    alignItems: alignItemsArr[alignItems],
+    direction: directions[direction],
+    flexWrap: wraps[wrap],
+  };
+
+  const changeSetting = (value, options, setterFunction) => {
+    if (value === options.length - 1) {
+      setterFunction(0);
+      return;
+    }
+    setterFunction(value + 1);
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={[styles.container, styles.playingSpace, hookedStyles]}>
+          {squares.map(elem => elem)}
+        </View>
+        <ScrollView style={styles.layoutContainer}>
+          <View style={styles.controlSpace}>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Flex Direction"
+                onPress={() =>
+                  changeSetting(flexDirection, flexDirections, setFlexDirection)
+                }
+              />
+              <Text style={styles.text}>{flexDirections[flexDirection]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Justify Content"
+                onPress={() =>
+                  changeSetting(
+                    justifyContent,
+                    justifyContents,
+                    setJustifyContent,
+                  )
+                }
+              />
+              <Text style={styles.text}>{justifyContents[justifyContent]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Align Items"
+                onPress={() =>
+                  changeSetting(alignItems, alignItemsArr, setAlignItems)
+                }
+              />
+              <Text style={styles.text}>{alignItemsArr[alignItems]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Direction"
+                onPress={() =>
+                  changeSetting(direction, directions, setDirection)
+                }
+              />
+              <Text style={styles.text}>{directions[direction]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Flex Wrap"
+                onPress={() => changeSetting(wrap, wraps, setWrap)}
+              />
+              <Text style={styles.text}>{wraps[wrap]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Add Square"
+                onPress={() => setSquares([...squares, <Square />])}
+              />
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Delete Square"
+                onPress={() =>
+                  setSquares(squares.filter((v, i) => i !== squares.length - 1))
+                }
+              />
+            </View>
+          </View>
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const flexDirections = ['row', 'row-reverse', 'column', 'column-reverse'];
+const justifyContents = [
+  'flex-start',
+  'flex-end',
+  'center',
+  'space-between',
+  'space-around',
+  'space-evenly',
+];
+const alignItemsArr = [
+  'flex-start',
+  'flex-end',
+  'center',
+  'stretch',
+  'baseline',
+];
+const wraps = ['nowrap', 'wrap', 'wrap-reverse'];
+const directions = ['inherit', 'ltr', 'rtl'];
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  layoutContainer: {
+    flex: 0.5,
+  },
+  playingSpace: {
+    backgroundColor: 'white',
+    borderColor: 'blue',
+    borderWidth: 3,
+    overflow: 'hidden',
+  },
+  controlSpace: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  buttonView: {
+    width: '50%',
+    padding: 10,
+  },
+  text: {
+    textAlign: 'center',
+  },
+});
+
+const Square = () => (
+  <View
+    style={{
+      width: 50,
+      height: 50,
+      backgroundColor: randomHexColor(),
+    }}
+  />
+);
+
+const randomHexColor = () => {
+  return '#000000'.replace(/0/g, () => {
+    return Math.round(Math.random() * 14).toString(16);
+  });
+};
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=LayoutProps%20Example&ext=tsx
+import {useState} from 'react';
+import {
+  Button,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+  FlexAlignType,
+  FlexStyle,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [flexDirection, setFlexDirection] = useState(0);
+  const [justifyContent, setJustifyContent] = useState(0);
+  const [alignItems, setAlignItems] = useState(0);
+  const [direction, setDirection] = useState(0);
+  const [wrap, setWrap] = useState(0);
+
+  const [squares, setSquares] = useState([<Square />, <Square />, <Square />]);
+
+  const hookedStyles = {
+    flexDirection: flexDirections[flexDirection],
+    justifyContent: justifyContents[justifyContent],
+    alignItems: alignItemsArr[alignItems],
+    direction: directions[direction],
+    flexWrap: wraps[wrap],
+  } as FlexStyle;
+
+  const changeSetting = (
+    value: number,
+    options: any[],
+    setterFunction: (index: number) => void,
+  ) => {
+    if (value === options.length - 1) {
+      setterFunction(0);
+      return;
+    }
+    setterFunction(value + 1);
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={[styles.container, styles.playingSpace, hookedStyles]}>
+          {squares.map(elem => elem)}
+        </View>
+        <ScrollView style={styles.layoutContainer}>
+          <View style={styles.controlSpace}>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Flex Direction"
+                onPress={() =>
+                  changeSetting(flexDirection, flexDirections, setFlexDirection)
+                }
+              />
+              <Text style={styles.text}>{flexDirections[flexDirection]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Justify Content"
+                onPress={() =>
+                  changeSetting(
+                    justifyContent,
+                    justifyContents,
+                    setJustifyContent,
+                  )
+                }
+              />
+              <Text style={styles.text}>{justifyContents[justifyContent]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Align Items"
+                onPress={() =>
+                  changeSetting(alignItems, alignItemsArr, setAlignItems)
+                }
+              />
+              <Text style={styles.text}>{alignItemsArr[alignItems]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Direction"
+                onPress={() =>
+                  changeSetting(direction, directions, setDirection)
+                }
+              />
+              <Text style={styles.text}>{directions[direction]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Flex Wrap"
+                onPress={() => changeSetting(wrap, wraps, setWrap)}
+              />
+              <Text style={styles.text}>{wraps[wrap]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Add Square"
+                onPress={() => setSquares([...squares, <Square />])}
+              />
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Delete Square"
+                onPress={() =>
+                  setSquares(squares.filter((v, i) => i !== squares.length - 1))
+                }
+              />
+            </View>
+          </View>
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const flexDirections = [
+  'row',
+  'row-reverse',
+  'column',
+  'column-reverse',
+] as FlexStyle['flexDirection'][];
+const justifyContents = [
+  'flex-start',
+  'flex-end',
+  'center',
+  'space-between',
+  'space-around',
+  'space-evenly',
+] as FlexStyle['justifyContent'][];
+const alignItemsArr = [
+  'flex-start',
+  'flex-end',
+  'center',
+  'stretch',
+  'baseline',
+] as FlexAlignType[];
+const wraps = ['nowrap', 'wrap', 'wrap-reverse'];
+const directions = ['inherit', 'ltr', 'rtl'];
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  layoutContainer: {
+    flex: 0.5,
+  },
+  playingSpace: {
+    backgroundColor: 'white',
+    borderColor: 'blue',
+    borderWidth: 3,
+    overflow: 'hidden',
+  },
+  controlSpace: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  buttonView: {
+    width: '50%',
+    padding: 10,
+  },
+  text: {
+    textAlign: 'center',
+  },
+});
+
+const Square = () => (
+  <View
+    style={{
+      width: 50,
+      height: 50,
+      backgroundColor: randomHexColor(),
+    }}
+  />
+);
+
+const randomHexColor = () => {
+  return '#000000'.replace(/0/g, () => {
+    return Math.round(Math.random() * 14).toString(16);
+  });
+};
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+---
+
+# Reference
+
+## Props
+
+### `alignContent`
+
+`alignContent` controls how rows align in the cross direction, overriding the `alignContent` of the parent.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) for more details.
+
+| Type                                                                                                 | Required |
+| ---------------------------------------------------------------------------------------------------- | -------- |
+| enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around', 'space-evenly') | No       |
+
+---
+
+### `alignItems`
+
+`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS (default: stretch).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) for more details.
+
+| Type                                                            | Required |
+| --------------------------------------------------------------- | -------- |
+| enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline') | No       |
+
+---
+
+### `alignSelf`
+
+`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS (default: auto).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) for more details.
+
+| Type                                                                    | Required |
+| ----------------------------------------------------------------------- | -------- |
+| enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline') | No       |
+
+---
+
+### `aspectRatio`
+
+Aspect ratio controls the size of the undefined dimension of a node.
+
+- On a node with a set width/height, aspect ratio controls the size of the unset dimension
+- On a node with a set flex basis, aspect ratio controls the size of the node in the cross axis if unset
+- On a node with a measure function, aspect ratio works as though the measure function measures the flex basis
+- On a node with flex grow/shrink, aspect ratio controls the size of the node in the cross axis if unset
+- Aspect ratio takes min/max dimensions into account
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `borderBottomWidth`
+
+`borderBottomWidth` works like `border-bottom-width` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderEndWidth`
+
+When direction is `ltr`, `borderEndWidth` is equivalent to `borderRightWidth`. When direction is `rtl`, `borderEndWidth` is equivalent to `borderLeftWidth`.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderLeftWidth`
+
+`borderLeftWidth` works like `border-left-width` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderRightWidth`
+
+`borderRightWidth` works like `border-right-width` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderStartWidth`
+
+When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. When direction is `rtl`, `borderStartWidth` is equivalent to `borderRightWidth`.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderTopWidth`
+
+`borderTopWidth` works like `border-top-width` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderWidth`
+
+`borderWidth` works like `border-width` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `bottom`
+
+`bottom` is the number of logical pixels to offset the bottom edge of this component.
+
+It works similarly to `bottom` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) for more details of how `bottom` affects layout.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `boxSizing`
+
+`boxSizing` defines how the element's various sizing props (`width`, `height`, `minWidth`, `minHeight`, etc.) are computed. If `boxSizing` is `border-box`, these sizes apply to the border box of the element. If it is `content-box`, they apply to the content box of the element. The default value is `border-box`. The [web documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) is a good source of information if you wish to learn more about how this prop works.
+
+| Type                              | Required |
+| --------------------------------- | -------- |
+| enum('border-box', 'content-box') | No       |
+
+---
+
+### `columnGap`
+
+`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `direction`
+
+`direction` specifies the directional flow of the user interface. The default is `inherit`, except for root node which will have value based on the current locale.
+
+See [MDN CSS Reference](https://www.yogalayout.dev/docs/styling/layout-direction) for more details.
+
+| Type                          | Required |
+| ----------------------------- | -------- |
+| enum('inherit', 'ltr', 'rtl') | No       |
+
+---
+
+### `display`
+
+`display` sets the display type of this component.
+
+It works similarly to `display` in CSS but only supports the values 'flex', 'none', and 'contents'. The default is `flex`.
+
+| Type                             | Required |
+| -------------------------------- | -------- |
+| enum('none', 'flex', 'contents') | No       |
+
+---
+
+### `end`
+
+When the direction is `ltr`, `end` is equivalent to `right`. When the direction is `rtl`, `end` is equivalent to `left`.
+
+This style takes precedence over the `left` and `right` styles.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `flex`
+
+In React Native `flex` does not work the same way that it does in CSS. `flex` is a number rather than a string, and it works according to the [Yoga](https://github.com/facebook/yoga) layout engine.
+
+When `flex` is a positive number, it makes the component flexible, and it will be sized proportional to its flex value. So a component with `flex` set to `2` will take twice the space as a component with `flex` set to 1. `flex: <positive number>` equates to `flexGrow: <positive number>, flexShrink: 1, flexBasis: 0`.
+
+When `flex` is `0`, the component is sized according to `width` and `height`, and it is inflexible.
+
+When `flex` is `-1`, the component is normally sized according to `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`.
+
+`flexGrow`, `flexShrink`, and `flexBasis` work the same as in CSS.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `flexBasis`
+
+`flexBasis` is an axis-independent way of providing the default size of an item along the main axis. Setting the `flexBasis` of a child is similar to setting the `width` of that child if its parent is a container with `flexDirection: row` or setting the `height` of a child if its parent is a container with `flexDirection: column`. The `flexBasis` of an item is the default size of that item, the size of the item before any `flexGrow` and `flexShrink` calculations are performed.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `flexDirection`
+
+`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) for more details.
+
+| Type                                                   | Required |
+| ------------------------------------------------------ | -------- |
+| enum('row', 'row-reverse', 'column', 'column-reverse') | No       |
+
+---
+
+### `flexGrow`
+
+`flexGrow` describes how any space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
+
+`flexGrow` accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the children’s `flexGrow` values.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `flexShrink`
+
+[`flexShrink`](layout-props#flexshrink) describes how to shrink children along the main axis in the case in which the total size of the children overflows the size of the container on the main axis. `flexShrink` is very similar to `flexGrow` and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed.
+
+`flexShrink` accepts any floating point value >= 0, with 0 being the default value. A container will shrink its children weighted by the children’s `flexShrink` values.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `flexWrap`
+
+`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS (default: nowrap).
+
+Note it does not work anymore with `alignItems: stretch` (the default), so you may want to use `alignItems: flex-start` for example (breaking change details: https://github.com/facebook/react-native/releases/tag/v0.28.0).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) for more details.
+
+| Type                                   | Required |
+| -------------------------------------- | -------- |
+| enum('wrap', 'nowrap', 'wrap-reverse') | No       |
+
+---
+
+### `gap`
+
+`gap` works like `gap` in CSS. Only pixel units are supported in React Native.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `height`
+
+`height` sets the height of this component.
+
+It works similarly to `height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/height) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `inset`
+
+:::note
+`inset` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Setting `inset` has the same effect as setting each of `top`, `bottom`, `right` and `left` props.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/inset) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetBlock`
+
+:::note
+`insetBlock` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Equivalent to [`top`](layout-props#top) and [`bottom`](layout-props#bottom).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetBlockEnd`
+
+:::note
+`insetBlockEnd` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Equivalent to [`bottom`](layout-props#bottom).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetBlockStart`
+
+:::note
+`insetBlockStart` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Equivalent to [`top`](layout-props#top).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetInline`
+
+:::note
+`insetInline` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Equivalent to [`right`](layout-props#right) and [`left`](layout-props#left).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetInlineEnd`
+
+:::note
+`insetInlineEnd` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+When direction is `ltr`, `insetInlineEnd` is equivalent to [`right`](layout-props#right). When direction is `rtl`, `insetInlineEnd` is equivalent to [`left`](layout-props#left).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetInlineStart`
+
+:::note
+`insetInlineStart` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+When direction is `ltr`, `insetInlineStart` is equivalent to [`left`](layout-props#left). When direction is `rtl`, `insetInlineStart` is equivalent to [`right`](layout-props#right).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `isolation`
+
+:::note
+`isolation` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+`isolation` lets you form a [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context).
+
+There are two values:
+
+- `auto` (default): Does nothing.
+- `isolate`: Forms a stacking context.
+
+| Type                    | Required |
+| ----------------------- | -------- |
+| enum('auto', 'isolate') | No       |
+
+---
+
+### `justifyContent`
+
+`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS (default: flex-start).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) for more details.
+
+| Type                                                                                      | Required |
+| ----------------------------------------------------------------------------------------- | -------- |
+| enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly') | No       |
+
+---
+
+### `left`
+
+`left` is the number of logical pixels to offset the left edge of this component.
+
+It works similarly to `left` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/left) for more details of how `left` affects layout.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `margin`
+
+Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginBottom`
+
+`marginBottom` works like `margin-bottom` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginBlock`
+
+Equivalent to [`marginVertical`](layout-props#marginvertical).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginBlockEnd`
+
+Equivalent to [`marginBottom`](layout-props#marginbottom).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginBlockStart`
+
+Equivalent to [`marginTop`](layout-props#margintop).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginEnd`
+
+When direction is `ltr`, `marginEnd` is equivalent to `marginRight`. When direction is `rtl`, `marginEnd` is equivalent to `marginLeft`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginHorizontal`
+
+Setting `marginHorizontal` has the same effect as setting both `marginLeft` and `marginRight`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginInline`
+
+Equivalent to [`marginHorizontal`](layout-props#marginhorizontal).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginInlineEnd`
+
+When direction is `ltr`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginRight`). When direction is `rtl`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginLeft`).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginInlineStart`
+
+When direction is `ltr`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginLeft`). When direction is `rtl`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginRight`).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginLeft`
+
+`marginLeft` works like `margin-left` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginRight`
+
+`marginRight` works like `margin-right` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginStart`
+
+When direction is `ltr`, `marginStart` is equivalent to `marginLeft`. When direction is `rtl`, `marginStart` is equivalent to `marginRight`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginTop`
+
+`marginTop` works like `margin-top` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginVertical`
+
+Setting `marginVertical` has the same effect as setting both `marginTop` and `marginBottom`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `maxHeight`
+
+`maxHeight` is the maximum height for this component, in logical pixels.
+
+It works similarly to `max-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `maxWidth`
+
+`maxWidth` is the maximum width for this component, in logical pixels.
+
+It works similarly to `max-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `minHeight`
+
+`minHeight` is the minimum height for this component, in logical pixels.
+
+It works similarly to `min-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `minWidth`
+
+`minWidth` is the minimum width for this component, in logical pixels.
+
+It works similarly to `min-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `overflow`
+
+`overflow` controls how children are measured and displayed. `overflow: hidden` causes views to be clipped while `overflow: scroll` causes views to be measured independently of their parents' main axis. It works like `overflow` in CSS (default: visible).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) for more details.
+
+| Type                                | Required |
+| ----------------------------------- | -------- |
+| enum('visible', 'hidden', 'scroll') | No       |
+
+---
+
+### `padding`
+
+Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingBottom`
+
+`paddingBottom` works like `padding-bottom` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingBlock`
+
+Equivalent to [`paddingVertical`](layout-props#paddingvertical).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingBlockEnd`
+
+Equivalent to [`paddingBottom`](layout-props#paddingbottom).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingBlockStart`
+
+Equivalent to [`paddingTop`](layout-props#paddingtop).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingEnd`
+
+When direction is `ltr`, `paddingEnd` is equivalent to `paddingRight`. When direction is `rtl`, `paddingEnd` is equivalent to `paddingLeft`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingHorizontal`
+
+Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRight`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingInline`
+
+Equivalent to [`paddingHorizontal`](layout-props#paddinghorizontal).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingInlineEnd`
+
+When direction is `ltr`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingRight`). When direction is `rtl`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingLeft`).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingInlineStart`
+
+When direction is `ltr`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingLeft`). When direction is `rtl`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingRight`).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingLeft`
+
+`paddingLeft` works like `padding-left` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingRight`
+
+`paddingRight` works like `padding-right` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingStart`
+
+When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`. When direction is `rtl`, `paddingStart` is equivalent to `paddingRight`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingTop`
+
+`paddingTop` works like `padding-top` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingVertical`
+
+Setting `paddingVertical` is like setting both of `paddingTop` and `paddingBottom`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `position`
+
+`position` in React Native is similar to [regular CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/position), but everything is set to `relative` by default.
+
+`relative` will position an element according to the normal flow of the layout. Insets (`top`, `bottom`, `left`, `right`) will offset relative to this layout.
+
+`absolute` takes the element out of the normal flow of the layout. Insets will offset relative to its [containing block](./flexbox.md#the-containing-block).
+
+`static` will position an element according to the normal flow of the layout. Insets will have no effect.
+`static` elements do not form a containing block for absolute descendants.
+
+For more information, see the [Layout with Flexbox docs](./flexbox.md#position). Also, [the Yoga documentation](https://www.yogalayout.dev/docs/styling/position) has more details on how `position` differs between React Native and CSS.
+
+| Type                                   | Required |
+| -------------------------------------- | -------- |
+| enum('absolute', 'relative', 'static') | No       |
+
+---
+
+### `right`
+
+`right` is the number of logical pixels to offset the right edge of this component.
+
+It works similarly to `right` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) for more details of how `right` affects layout.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `rowGap`
+
+`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `start`
+
+When the direction is `ltr`, `start` is equivalent to `left`. When the direction is `rtl`, `start` is equivalent to `right`.
+
+This style takes precedence over the `left`, `right`, and `end` styles.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `top`
+
+`top` is the number of logical pixels to offset the top edge of this component.
+
+It works similarly to `top` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/top) for more details of how `top` affects layout.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `width`
+
+`width` sets the width of this component.
+
+It works similarly to `width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/width) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `zIndex`
+
+`zIndex` controls which components display on top of others. Normally, you don't use `zIndex`. Components render according to their order in the document tree, so later components draw over earlier ones. `zIndex` may be useful if you have animations or custom modal interfaces where you don't want this behavior.
+
+It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball.
+
+On iOS, `zIndex` may require `View`s to be siblings of each other for it to work as expected.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
diff --git a/website/versioned_docs/version-0.82/layoutanimation.md b/website/versioned_docs/version-0.82/layoutanimation.md
index 911a247c8c7..24a7d060d1e 100644
--- a/website/versioned_docs/version-0.82/layoutanimation.md
+++ b/website/versioned_docs/version-0.82/layoutanimation.md
@@ -1,358 +1,358 @@
----
-id: layoutanimation
-title: LayoutAnimation
----
-
-Automatically animates views to their new positions when the next layout happens.
-
-A common way to use this API is to call it before updating the state hook in functional components and calling `setState` in class components.
-
-Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`:
-
-```js
-if (Platform.OS === 'android') {
-  if (UIManager.setLayoutAnimationEnabledExperimental) {
-    UIManager.setLayoutAnimationEnabledExperimental(true);
-  }
-}
-```
-
-## Example
-
-```SnackPlayer name=LayoutAnimation%20Example&supportedPlatforms=android,ios
-import React, {useState} from 'react';
-import {
-  LayoutAnimation,
-  Platform,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  UIManager,
-  View,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-if (
-  Platform.OS === 'android' &&
-  UIManager.setLayoutAnimationEnabledExperimental
-) {
-  UIManager.setLayoutAnimationEnabledExperimental(true);
-}
-const App = () => {
-  const [expanded, setExpanded] = useState(false);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={style.container}>
-        <TouchableOpacity
-          onPress={() => {
-            LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
-            setExpanded(!expanded);
-          }}>
-          <Text>Press me to {expanded ? 'collapse' : 'expand'}!</Text>
-        </TouchableOpacity>
-        {expanded && (
-          <View style={style.tile}>
-            <Text>I disappear sometimes!</Text>
-          </View>
-        )}
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const style = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    gap: 16,
-  },
-  tile: {
-    backgroundColor: 'lightgrey',
-    borderWidth: 0.5,
-    borderColor: '#d6d7da',
-    padding: 4,
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Methods
-
-### `configureNext()`
-
-```tsx
-static configureNext(
-  config: LayoutAnimationConfig,
-  onAnimationDidEnd?: () => void,
-  onAnimationDidFail?: () => void,
-);
-```
-
-Schedules an animation to happen on the next layout.
-
-#### Parameters:
-
-| Name               | Type     | Required | Description                         |
-| ------------------ | -------- | -------- | ----------------------------------- |
-| config             | object   | Yes      | See config description below.       |
-| onAnimationDidEnd  | function | No       | Called when the animation finished. |
-| onAnimationDidFail | function | No       | Called when the animation failed.   |
-
-The `config` parameter is an object with the keys below. [`create`](layoutanimation.md#create) returns a valid object for `config`, and the [`Presets`](layoutanimation.md#presets) objects can also all be passed as the `config`.
-
-- `duration` in milliseconds
-- `create`, optional config for animating in new views
-- `update`, optional config for animating views that have been updated
-- `delete`, optional config for animating views as they are removed
-
-The config that's passed to `create`, `update`, or `delete` has the following keys:
-
-- `type`, the [animation type](layoutanimation.md#types) to use
-- `property`, the [layout property](layoutanimation.md#properties) to animate (optional, but recommended for `create` and `delete`)
-- `springDamping` (number, optional and only for use with `type: Type.spring`)
-- `initialVelocity` (number, optional)
-- `delay` (number, optional)
-- `duration` (number, optional)
-
----
-
-### `create()`
-
-```tsx
-static create(duration, type, creationProp)
-```
-
-Helper that creates an object (with `create`, `update`, and `delete` fields) to pass into [`configureNext`](layoutanimation.md#configurenext). The `type` parameter is an [animation type](layoutanimation.md#types), and the `creationProp` parameter is a [layout property](layoutanimation.md#properties).
-
-**Example:**
-
-```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios
-import React, {useState} from 'react';
-import {
-  View,
-  Platform,
-  UIManager,
-  LayoutAnimation,
-  StyleSheet,
-  Button,
-} from 'react-native';
-
-if (
-  Platform.OS === 'android' &&
-  UIManager.setLayoutAnimationEnabledExperimental
-) {
-  UIManager.setLayoutAnimationEnabledExperimental(true);
-}
-
-const App = () => {
-  const [boxPosition, setBoxPosition] = useState('left');
-
-  const toggleBox = () => {
-    LayoutAnimation.configureNext({
-      duration: 500,
-      create: {type: 'linear', property: 'opacity'},
-      update: {type: 'spring', springDamping: 0.4},
-      delete: {type: 'linear', property: 'opacity'},
-    });
-    setBoxPosition(boxPosition === 'left' ? 'right' : 'left');
-  };
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.buttonContainer}>
-        <Button title="Toggle Layout" onPress={toggleBox} />
-      </View>
-      <View
-        style={[styles.box, boxPosition === 'left' ? null : styles.moveRight]}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'flex-start',
-    justifyContent: 'center',
-  },
-  box: {
-    height: 100,
-    width: 100,
-    borderRadius: 5,
-    margin: 8,
-    backgroundColor: 'blue',
-  },
-  moveRight: {
-    alignSelf: 'flex-end',
-    height: 200,
-    width: 200,
-  },
-  buttonContainer: {
-    alignSelf: 'center',
-  },
-});
-
-export default App;
-```
-
-## Properties
-
-### Types
-
-An enumeration of animation types to be used in the [`create`](layoutanimation.md#create) method, or in the `create`/`update`/`delete` configs for [`configureNext`](layoutanimation.md#configurenext). (example usage: `LayoutAnimation.Types.easeIn`)
-
-| Types         |
-| ------------- |
-| spring        |
-| linear        |
-| easeInEaseOut |
-| easeIn        |
-| easeOut       |
-| keyboard      |
-
----
-
-### Properties
-
-An enumeration of layout properties to be animated to be used in the [`create`](layoutanimation.md#create) method, or in the `create`/`update`/`delete` configs for [`configureNext`](layoutanimation.md#configurenext). (example usage: `LayoutAnimation.Properties.opacity`)
-
-| Properties |
-| ---------- |
-| opacity    |
-| scaleX     |
-| scaleY     |
-| scaleXY    |
-
----
-
-### Presets
-
-A set of predefined animation configs to pass into [`configureNext`](layoutanimation.md#configurenext).
-
-| Presets       | Value                                                                                                                                                          |
-| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| easeInEaseOut | `create(300, 'easeInEaseOut', 'opacity')`                                                                                                                      |
-| linear        | `create(500, 'linear', 'opacity')`                                                                                                                             |
-| spring        | `{duration: 700, create: {type: 'linear', property: 'opacity'}, update: {type: 'spring', springDamping: 0.4}, delete: {type: 'linear', property: 'opacity'} }` |
-
----
-
-### `easeInEaseOut`
-
-Calls `configureNext()` with `Presets.easeInEaseOut`.
-
----
-
-### `linear`
-
-Calls `configureNext()` with `Presets.linear`.
-
----
-
-### `spring`
-
-Calls `configureNext()` with `Presets.spring`.
-
-**Example:**
-
-```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios
-import React, {useState} from 'react';
-import {
-  View,
-  Platform,
-  UIManager,
-  LayoutAnimation,
-  StyleSheet,
-  Button,
-} from 'react-native';
-
-if (
-  Platform.OS === 'android' &&
-  UIManager.setLayoutAnimationEnabledExperimental
-) {
-  UIManager.setLayoutAnimationEnabledExperimental(true);
-}
-
-const App = () => {
-  const [firstBoxPosition, setFirstBoxPosition] = useState('left');
-  const [secondBoxPosition, setSecondBoxPosition] = useState('left');
-  const [thirdBoxPosition, setThirdBoxPosition] = useState('left');
-
-  const toggleFirstBox = () => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-    setFirstBoxPosition(firstBoxPosition === 'left' ? 'right' : 'left');
-  };
-
-  const toggleSecondBox = () => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
-    setSecondBoxPosition(secondBoxPosition === 'left' ? 'right' : 'left');
-  };
-
-  const toggleThirdBox = () => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
-    setThirdBoxPosition(thirdBoxPosition === 'left' ? 'right' : 'left');
-  };
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.buttonContainer}>
-        <Button title="EaseInEaseOut" onPress={toggleFirstBox} />
-      </View>
-      <View
-        style={[
-          styles.box,
-          firstBoxPosition === 'left' ? null : styles.moveRight,
-        ]}
-      />
-      <View style={styles.buttonContainer}>
-        <Button title="Linear" onPress={toggleSecondBox} />
-      </View>
-      <View
-        style={[
-          styles.box,
-          secondBoxPosition === 'left' ? null : styles.moveRight,
-        ]}
-      />
-      <View style={styles.buttonContainer}>
-        <Button title="Spring" onPress={toggleThirdBox} />
-      </View>
-      <View
-        style={[
-          styles.box,
-          thirdBoxPosition === 'left' ? null : styles.moveRight,
-        ]}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'flex-start',
-    justifyContent: 'center',
-  },
-  box: {
-    height: 100,
-    width: 100,
-    borderRadius: 5,
-    margin: 8,
-    backgroundColor: 'blue',
-  },
-  moveRight: {
-    alignSelf: 'flex-end',
-  },
-  buttonContainer: {
-    alignSelf: 'center',
-  },
-});
-
-export default App;
-```
+---
+id: layoutanimation
+title: LayoutAnimation
+---
+
+Automatically animates views to their new positions when the next layout happens.
+
+A common way to use this API is to call it before updating the state hook in functional components and calling `setState` in class components.
+
+Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`:
+
+```js
+if (Platform.OS === 'android') {
+  if (UIManager.setLayoutAnimationEnabledExperimental) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+  }
+}
+```
+
+## Example
+
+```SnackPlayer name=LayoutAnimation%20Example&supportedPlatforms=android,ios
+import {useState} from 'react';
+import {
+  LayoutAnimation,
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  UIManager,
+  View,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+if (
+  Platform.OS === 'android' &&
+  UIManager.setLayoutAnimationEnabledExperimental
+) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+const App = () => {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={style.container}>
+        <TouchableOpacity
+          onPress={() => {
+            LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
+            setExpanded(!expanded);
+          }}>
+          <Text>Press me to {expanded ? 'collapse' : 'expand'}!</Text>
+        </TouchableOpacity>
+        {expanded && (
+          <View style={style.tile}>
+            <Text>I disappear sometimes!</Text>
+          </View>
+        )}
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const style = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 16,
+  },
+  tile: {
+    backgroundColor: 'lightgrey',
+    borderWidth: 0.5,
+    borderColor: '#d6d7da',
+    padding: 4,
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `configureNext()`
+
+```tsx
+static configureNext(
+  config: LayoutAnimationConfig,
+  onAnimationDidEnd?: () => void,
+  onAnimationDidFail?: () => void,
+);
+```
+
+Schedules an animation to happen on the next layout.
+
+#### Parameters:
+
+| Name               | Type     | Required | Description                         |
+| ------------------ | -------- | -------- | ----------------------------------- |
+| config             | object   | Yes      | See config description below.       |
+| onAnimationDidEnd  | function | No       | Called when the animation finished. |
+| onAnimationDidFail | function | No       | Called when the animation failed.   |
+
+The `config` parameter is an object with the keys below. [`create`](layoutanimation.md#create) returns a valid object for `config`, and the [`Presets`](layoutanimation.md#presets) objects can also all be passed as the `config`.
+
+- `duration` in milliseconds
+- `create`, optional config for animating in new views
+- `update`, optional config for animating views that have been updated
+- `delete`, optional config for animating views as they are removed
+
+The config that's passed to `create`, `update`, or `delete` has the following keys:
+
+- `type`, the [animation type](layoutanimation.md#types) to use
+- `property`, the [layout property](layoutanimation.md#properties) to animate (optional, but recommended for `create` and `delete`)
+- `springDamping` (number, optional and only for use with `type: Type.spring`)
+- `initialVelocity` (number, optional)
+- `delay` (number, optional)
+- `duration` (number, optional)
+
+---
+
+### `create()`
+
+```tsx
+static create(duration, type, creationProp)
+```
+
+Helper that creates an object (with `create`, `update`, and `delete` fields) to pass into [`configureNext`](layoutanimation.md#configurenext). The `type` parameter is an [animation type](layoutanimation.md#types), and the `creationProp` parameter is a [layout property](layoutanimation.md#properties).
+
+**Example:**
+
+```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios
+import {useState} from 'react';
+import {
+  View,
+  Platform,
+  UIManager,
+  LayoutAnimation,
+  StyleSheet,
+  Button,
+} from 'react-native';
+
+if (
+  Platform.OS === 'android' &&
+  UIManager.setLayoutAnimationEnabledExperimental
+) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+const App = () => {
+  const [boxPosition, setBoxPosition] = useState('left');
+
+  const toggleBox = () => {
+    LayoutAnimation.configureNext({
+      duration: 500,
+      create: {type: 'linear', property: 'opacity'},
+      update: {type: 'spring', springDamping: 0.4},
+      delete: {type: 'linear', property: 'opacity'},
+    });
+    setBoxPosition(boxPosition === 'left' ? 'right' : 'left');
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.buttonContainer}>
+        <Button title="Toggle Layout" onPress={toggleBox} />
+      </View>
+      <View
+        style={[styles.box, boxPosition === 'left' ? null : styles.moveRight]}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+  },
+  box: {
+    height: 100,
+    width: 100,
+    borderRadius: 5,
+    margin: 8,
+    backgroundColor: 'blue',
+  },
+  moveRight: {
+    alignSelf: 'flex-end',
+    height: 200,
+    width: 200,
+  },
+  buttonContainer: {
+    alignSelf: 'center',
+  },
+});
+
+export default App;
+```
+
+## Properties
+
+### Types
+
+An enumeration of animation types to be used in the [`create`](layoutanimation.md#create) method, or in the `create`/`update`/`delete` configs for [`configureNext`](layoutanimation.md#configurenext). (example usage: `LayoutAnimation.Types.easeIn`)
+
+| Types         |
+| ------------- |
+| spring        |
+| linear        |
+| easeInEaseOut |
+| easeIn        |
+| easeOut       |
+| keyboard      |
+
+---
+
+### Properties
+
+An enumeration of layout properties to be animated to be used in the [`create`](layoutanimation.md#create) method, or in the `create`/`update`/`delete` configs for [`configureNext`](layoutanimation.md#configurenext). (example usage: `LayoutAnimation.Properties.opacity`)
+
+| Properties |
+| ---------- |
+| opacity    |
+| scaleX     |
+| scaleY     |
+| scaleXY    |
+
+---
+
+### Presets
+
+A set of predefined animation configs to pass into [`configureNext`](layoutanimation.md#configurenext).
+
+| Presets       | Value                                                                                                                                                          |
+| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| easeInEaseOut | `create(300, 'easeInEaseOut', 'opacity')`                                                                                                                      |
+| linear        | `create(500, 'linear', 'opacity')`                                                                                                                             |
+| spring        | `{duration: 700, create: {type: 'linear', property: 'opacity'}, update: {type: 'spring', springDamping: 0.4}, delete: {type: 'linear', property: 'opacity'} }` |
+
+---
+
+### `easeInEaseOut`
+
+Calls `configureNext()` with `Presets.easeInEaseOut`.
+
+---
+
+### `linear`
+
+Calls `configureNext()` with `Presets.linear`.
+
+---
+
+### `spring`
+
+Calls `configureNext()` with `Presets.spring`.
+
+**Example:**
+
+```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios
+import {useState} from 'react';
+import {
+  View,
+  Platform,
+  UIManager,
+  LayoutAnimation,
+  StyleSheet,
+  Button,
+} from 'react-native';
+
+if (
+  Platform.OS === 'android' &&
+  UIManager.setLayoutAnimationEnabledExperimental
+) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+const App = () => {
+  const [firstBoxPosition, setFirstBoxPosition] = useState('left');
+  const [secondBoxPosition, setSecondBoxPosition] = useState('left');
+  const [thirdBoxPosition, setThirdBoxPosition] = useState('left');
+
+  const toggleFirstBox = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setFirstBoxPosition(firstBoxPosition === 'left' ? 'right' : 'left');
+  };
+
+  const toggleSecondBox = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
+    setSecondBoxPosition(secondBoxPosition === 'left' ? 'right' : 'left');
+  };
+
+  const toggleThirdBox = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
+    setThirdBoxPosition(thirdBoxPosition === 'left' ? 'right' : 'left');
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.buttonContainer}>
+        <Button title="EaseInEaseOut" onPress={toggleFirstBox} />
+      </View>
+      <View
+        style={[
+          styles.box,
+          firstBoxPosition === 'left' ? null : styles.moveRight,
+        ]}
+      />
+      <View style={styles.buttonContainer}>
+        <Button title="Linear" onPress={toggleSecondBox} />
+      </View>
+      <View
+        style={[
+          styles.box,
+          secondBoxPosition === 'left' ? null : styles.moveRight,
+        ]}
+      />
+      <View style={styles.buttonContainer}>
+        <Button title="Spring" onPress={toggleThirdBox} />
+      </View>
+      <View
+        style={[
+          styles.box,
+          thirdBoxPosition === 'left' ? null : styles.moveRight,
+        ]}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+  },
+  box: {
+    height: 100,
+    width: 100,
+    borderRadius: 5,
+    margin: 8,
+    backgroundColor: 'blue',
+  },
+  moveRight: {
+    alignSelf: 'flex-end',
+  },
+  buttonContainer: {
+    alignSelf: 'center',
+  },
+});
+
+export default App;
+```
diff --git a/website/versioned_docs/version-0.82/legacy/direct-manipulation.md b/website/versioned_docs/version-0.82/legacy/direct-manipulation.md
index b3e7e063414..9ba739abb15 100644
--- a/website/versioned_docs/version-0.82/legacy/direct-manipulation.md
+++ b/website/versioned_docs/version-0.82/legacy/direct-manipulation.md
@@ -1,444 +1,440 @@
----
-id: direct-manipulation
-title: Direct Manipulation
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-It is sometimes necessary to make changes directly to a component without using state/props to trigger a re-render of the entire subtree. When using React in the browser for example, you sometimes need to directly modify a DOM node, and the same is true for views in mobile apps. `setNativeProps` is the React Native equivalent to setting properties directly on a DOM node.
-
-:::caution
-Use `setNativeProps` when frequent re-rendering creates a performance bottleneck!
-
-Direct manipulation will not be a tool that you reach for frequently. You will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views.
-`setNativeProps` is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about.
-
-Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate).
-:::
-
-## setNativeProps with TouchableOpacity
-
-[TouchableOpacity](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js) uses `setNativeProps` internally to update the opacity of its child component:
-
-```tsx
-const viewRef = useRef<View>();
-const setOpacityTo = useCallback(value => {
-  // Redacted: animation related code
-  viewRef.current.setNativeProps({
-    opacity: value,
-  });
-}, []);
-```
-
-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:
-
-```tsx
-<TouchableOpacity onPress={handlePress}>
-  <View>
-    <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:
-
-```tsx
-const [buttonOpacity, setButtonOpacity] = useState(1);
-return (
-  <TouchableOpacity
-    onPressIn={() => setButtonOpacity(0.5)}
-    onPressOut={() => setButtonOpacity(1)}>
-    <View style={{opacity: buttonOpacity}}>
-      <Text>Press me!</Text>
-    </View>
-  </TouchableOpacity>
-);
-```
-
-This is computationally intensive compared to the original example - React needs to re-render the component hierarchy each time the opacity changes, even though other properties of the view and its children haven't changed. Usually this overhead isn't a concern but when performing continuous animations and responding to gestures, judiciously optimizing your components can improve your animations' fidelity.
-
-If you look at the implementation of `setNativeProps` in [NativeMethodsMixin](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js) you will notice that it is a wrapper around `RCTUIManager.updateView` - this is the exact same function call that results from re-rendering - see [receiveComponent in ReactNativeBaseComponent](https://github.com/facebook/react-native/blob/fb2ec1ea47c53c2e7b873acb1cb46192ac74274e/Libraries/Renderer/oss/ReactNativeRenderer-prod.js#L5793-L5813).
-
-## Composite components and setNativeProps
-
-Composite components are not backed by a native view, so you cannot call `setNativeProps` on them. Consider this example:
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=setNativeProps%20with%20Composite%20Components&ext=js
-import React from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
-
-const MyButton = props => (
-  <View style={{marginTop: 50}}>
-    <Text>{props.label}</Text>
-  </View>
-);
-
-const App = () => (
-  <TouchableOpacity>
-    <MyButton label="Press me!" />
-  </TouchableOpacity>
-);
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=setNativeProps%20with%20Composite%20Components&ext=tsx
-import React from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
-
-const MyButton = (props: {label: string}) => (
-  <View style={{marginTop: 50}}>
-    <Text>{props.label}</Text>
-  </View>
-);
-
-const App = () => (
-  <TouchableOpacity>
-    <MyButton label="Press me!" />
-  </TouchableOpacity>
-);
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-If you run this you will immediately see this error: `Touchable child must either be native or forward setNativeProps to a native component`. This occurs because `MyButton` isn't directly backed by a native view whose opacity should be set. You can think about it like this: if you define a component with `createReactClass` you would not expect to be able to set a style prop on it and have that work - you would need to pass the style prop down to a child, unless you are wrapping a native component. Similarly, we are going to forward `setNativeProps` to a native-backed child component.
-
-#### Forward setNativeProps to a child
-
-Since the `setNativeProps` method exists on any ref to a `View` component, it is enough to forward a ref on your custom component to one of the `<View />` components that it renders. This means that a call to `setNativeProps` on the custom component will have the same effect as if you called `setNativeProps` on the wrapped `View` component itself.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Forwarding%20setNativeProps&ext=js
-import React from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
-
-const MyButton = React.forwardRef((props, ref) => (
-  <View {...props} ref={ref} style={{marginTop: 50}}>
-    <Text>{props.label}</Text>
-  </View>
-));
-
-const App = () => (
-  <TouchableOpacity>
-    <MyButton label="Press me!" />
-  </TouchableOpacity>
-);
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Forwarding%20setNativeProps&ext=tsx
-import React from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
-
-const MyButton = React.forwardRef<View, {label: string}>((props, ref) => (
-  <View {...props} ref={ref} style={{marginTop: 50}}>
-    <Text>{props.label}</Text>
-  </View>
-));
-
-const App = () => (
-  <TouchableOpacity>
-    <MyButton label="Press me!" />
-  </TouchableOpacity>
-);
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-You can now use `MyButton` inside of `TouchableOpacity`!
-
-You may have noticed that we passed all of the props down to the child view using `{...props}`. The reason for this is that `TouchableOpacity` is actually a composite component, and so in addition to depending on `setNativeProps` on its child, it also requires that the child perform touch handling. To do this, it passes on [various props](view.md#onmoveshouldsetresponder) that call back to the `TouchableOpacity` component. `TouchableHighlight`, in contrast, is backed by a native view and only requires that we implement `setNativeProps`.
-
-## setNativeProps to edit TextInput value
-
-Another very common use case of `setNativeProps` is to edit the value of the TextInput. The `controlled` prop of TextInput can sometimes drop characters when the `bufferDelay` is low and the user types very quickly. Some developers prefer to skip this prop entirely and instead use `setNativeProps` to directly manipulate the TextInput value when necessary. For example, the following code demonstrates editing the input when you tap a button:
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Clear%20text&ext=js
-import React from 'react';
-import {useCallback, useRef} from 'react';
-import {
-  StyleSheet,
-  TextInput,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-
-const App = () => {
-  const inputRef = useRef(null);
-  const editText = useCallback(() => {
-    inputRef.current.setNativeProps({text: 'Edited Text'});
-  }, []);
-
-  return (
-    <View style={styles.container}>
-      <TextInput ref={inputRef} style={styles.input} />
-      <TouchableOpacity onPress={editText}>
-        <Text>Edit text</Text>
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  input: {
-    height: 50,
-    width: 200,
-    marginHorizontal: 20,
-    borderWidth: 1,
-    borderColor: '#ccc',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Clear%20text&ext=tsx
-import React from 'react';
-import {useCallback, useRef} from 'react';
-import {
-  StyleSheet,
-  TextInput,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-
-const App = () => {
-  const inputRef = useRef<TextInput>(null);
-  const editText = useCallback(() => {
-    inputRef.current?.setNativeProps({text: 'Edited Text'});
-  }, []);
-
-  return (
-    <View style={styles.container}>
-      <TextInput ref={inputRef} style={styles.input} />
-      <TouchableOpacity onPress={editText}>
-        <Text>Edit text</Text>
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  input: {
-    height: 50,
-    width: 200,
-    marginHorizontal: 20,
-    borderWidth: 1,
-    borderColor: '#ccc',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-You can use the [`clear`](../textinput#clear) method to clear the `TextInput` which clears the current input text using the same approach.
-
-## Avoiding conflicts with the render function
-
-If you update a property that is also managed by the render function, you might end up with some unpredictable and confusing bugs because anytime the component re-renders and that property changes, whatever value was previously set from `setNativeProps` will be completely ignored and overridden.
-
-## setNativeProps & shouldComponentUpdate
-
-By [intelligently applying `shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`.
-
-## Other native methods
-
-The methods described here are available on most of the default components provided by React Native. Note, however, that they are _not_ available on composite components that aren't directly backed by a native view. This will generally include most components that you define in your own app.
-
-### measure(callback)
-
-Determines the location on screen, width, and height in the viewport of the given view and returns the values via an async callback. If successful, the callback will be called with the following arguments:
-
-- x
-- y
-- width
-- height
-- pageX
-- pageY
-
-Note that these measurements are not available until after the rendering has been completed in native. If you need the measurements as soon as possible and you don't need `pageX` and `pageY`, consider using the [`onLayout`](view.md#onlayout) property instead.
-
-Also the width and height returned by `measure()` are the width and height of the component in the viewport. If you need the actual size of the component, consider using the [`onLayout`](view.md#onlayout) property instead.
-
-### measureInWindow(callback)
-
-Determines the location of the given view in the window and returns the values via an async callback. If the React root view is embedded in another native view, this will give you the absolute coordinates. If successful, the callback will be called with the following arguments:
-
-- x
-- y
-- width
-- height
-
-### measureLayout(relativeToNativeComponentRef, onSuccess, onFail)
-
-Like `measure()`, but measures the view relative to an ancestor, specified with `relativeToNativeComponentRef` reference. This means that the returned coordinates are relative to the origin `x`, `y` of the ancestor view.
-
-:::note
-This method can also be called with a `relativeToNativeNode` handler (instead of reference), but this variant is obsolete with the new architecture.
-:::
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=measureLayout%20example&supportedPlatforms=android,ios&ext=js
-import React, {useEffect, useRef, useState} from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-
-const App = () => {
-  const textContainerRef = useRef(null);
-  const textRef = useRef(null);
-  const [measure, setMeasure] = useState(null);
-
-  useEffect(() => {
-    if (textRef.current && textContainerRef.current) {
-      textRef.current.measureLayout(
-        textContainerRef.current,
-        (left, top, width, height) => {
-          setMeasure({left, top, width, height});
-        },
-      );
-    }
-  }, [measure]);
-
-  return (
-    <View style={styles.container}>
-      <View ref={textContainerRef} style={styles.textContainer}>
-        <Text ref={textRef}>Where am I? (relative to the text container)</Text>
-      </View>
-      <Text style={styles.measure}>{JSON.stringify(measure)}</Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  textContainer: {
-    backgroundColor: '#61dafb',
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 12,
-  },
-  measure: {
-    textAlign: 'center',
-    padding: 12,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=measureLayout%20example&ext=tsx
-import React, {useEffect, useRef, useState} from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-
-type Measurements = {
-  left: number;
-  top: number;
-  width: number;
-  height: number;
-};
-
-const App = () => {
-  const textContainerRef = useRef<View>(null);
-  const textRef = useRef<Text>(null);
-  const [measure, setMeasure] = useState<Measurements | null>(null);
-
-  useEffect(() => {
-    if (textRef.current && textContainerRef.current) {
-      textRef.current?.measureLayout(
-        textContainerRef.current,
-        (left, top, width, height) => {
-          setMeasure({left, top, width, height});
-        },
-        () => {
-          console.error('measurement failed');
-        },
-      );
-    }
-  }, [measure]);
-
-  return (
-    <View style={styles.container}>
-      <View ref={textContainerRef} style={styles.textContainer}>
-        <Text ref={textRef}>Where am I? (relative to the text container)</Text>
-      </View>
-      <Text style={styles.measure}>{JSON.stringify(measure)}</Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  textContainer: {
-    backgroundColor: '#61dafb',
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 12,
-  },
-  measure: {
-    textAlign: 'center',
-    padding: 12,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### focus()
-
-Requests focus for the given input or view. The exact behavior triggered will depend on the platform and type of view.
-
-### blur()
-
-Removes focus from an input or view. This is the opposite of `focus()`.
+---
+id: direct-manipulation
+title: Direct Manipulation
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+It is sometimes necessary to make changes directly to a component without using state/props to trigger a re-render of the entire subtree. When using React in the browser for example, you sometimes need to directly modify a DOM node, and the same is true for views in mobile apps. `setNativeProps` is the React Native equivalent to setting properties directly on a DOM node.
+
+:::caution
+Use `setNativeProps` when frequent re-rendering creates a performance bottleneck!
+
+Direct manipulation will not be a tool that you reach for frequently. You will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views.
+`setNativeProps` is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about.
+
+Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate).
+:::
+
+## setNativeProps with TouchableOpacity
+
+[TouchableOpacity](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js) uses `setNativeProps` internally to update the opacity of its child component:
+
+```tsx
+const viewRef = useRef<View>();
+const setOpacityTo = useCallback(value => {
+  // Redacted: animation related code
+  viewRef.current.setNativeProps({
+    opacity: value,
+  });
+}, []);
+```
+
+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:
+
+```tsx
+<TouchableOpacity onPress={handlePress}>
+  <View>
+    <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:
+
+```tsx
+const [buttonOpacity, setButtonOpacity] = useState(1);
+return (
+  <TouchableOpacity
+    onPressIn={() => setButtonOpacity(0.5)}
+    onPressOut={() => setButtonOpacity(1)}>
+    <View style={{opacity: buttonOpacity}}>
+      <Text>Press me!</Text>
+    </View>
+  </TouchableOpacity>
+);
+```
+
+This is computationally intensive compared to the original example - React needs to re-render the component hierarchy each time the opacity changes, even though other properties of the view and its children haven't changed. Usually this overhead isn't a concern but when performing continuous animations and responding to gestures, judiciously optimizing your components can improve your animations' fidelity.
+
+If you look at the implementation of `setNativeProps` in [NativeMethodsMixin](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js) you will notice that it is a wrapper around `RCTUIManager.updateView` - this is the exact same function call that results from re-rendering - see [receiveComponent in ReactNativeBaseComponent](https://github.com/facebook/react-native/blob/fb2ec1ea47c53c2e7b873acb1cb46192ac74274e/Libraries/Renderer/oss/ReactNativeRenderer-prod.js#L5793-L5813).
+
+## Composite components and setNativeProps
+
+Composite components are not backed by a native view, so you cannot call `setNativeProps` on them. Consider this example:
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=setNativeProps%20with%20Composite%20Components&ext=js
+import {Text, TouchableOpacity, View} from 'react-native';
+
+const MyButton = props => (
+  <View style={{marginTop: 50}}>
+    <Text>{props.label}</Text>
+  </View>
+);
+
+const App = () => (
+  <TouchableOpacity>
+    <MyButton label="Press me!" />
+  </TouchableOpacity>
+);
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=setNativeProps%20with%20Composite%20Components&ext=tsx
+import {Text, TouchableOpacity, View} from 'react-native';
+
+const MyButton = (props: {label: string}) => (
+  <View style={{marginTop: 50}}>
+    <Text>{props.label}</Text>
+  </View>
+);
+
+const App = () => (
+  <TouchableOpacity>
+    <MyButton label="Press me!" />
+  </TouchableOpacity>
+);
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+If you run this you will immediately see this error: `Touchable child must either be native or forward setNativeProps to a native component`. This occurs because `MyButton` isn't directly backed by a native view whose opacity should be set. You can think about it like this: if you define a component with `createReactClass` you would not expect to be able to set a style prop on it and have that work - you would need to pass the style prop down to a child, unless you are wrapping a native component. Similarly, we are going to forward `setNativeProps` to a native-backed child component.
+
+#### Forward setNativeProps to a child
+
+Since the `setNativeProps` method exists on any ref to a `View` component, it is enough to forward a ref on your custom component to one of the `<View />` components that it renders. This means that a call to `setNativeProps` on the custom component will have the same effect as if you called `setNativeProps` on the wrapped `View` component itself.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Forwarding%20setNativeProps&ext=js
+import {forwardRef} from 'react';
+import {Text, TouchableOpacity, View} from 'react-native';
+
+const MyButton = forwardRef((props, ref) => (
+  <View {...props} ref={ref} style={{marginTop: 50}}>
+    <Text>{props.label}</Text>
+  </View>
+));
+
+const App = () => (
+  <TouchableOpacity>
+    <MyButton label="Press me!" />
+  </TouchableOpacity>
+);
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Forwarding%20setNativeProps&ext=tsx
+import {forwardRef} from 'react';
+import {Text, TouchableOpacity, View} from 'react-native';
+
+const MyButton = forwardRef<View, {label: string}>((props, ref) => (
+  <View {...props} ref={ref} style={{marginTop: 50}}>
+    <Text>{props.label}</Text>
+  </View>
+));
+
+const App = () => (
+  <TouchableOpacity>
+    <MyButton label="Press me!" />
+  </TouchableOpacity>
+);
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+You can now use `MyButton` inside of `TouchableOpacity`!
+
+You may have noticed that we passed all of the props down to the child view using `{...props}`. The reason for this is that `TouchableOpacity` is actually a composite component, and so in addition to depending on `setNativeProps` on its child, it also requires that the child perform touch handling. To do this, it passes on [various props](view.md#onmoveshouldsetresponder) that call back to the `TouchableOpacity` component. `TouchableHighlight`, in contrast, is backed by a native view and only requires that we implement `setNativeProps`.
+
+## setNativeProps to edit TextInput value
+
+Another very common use case of `setNativeProps` is to edit the value of the TextInput. The `controlled` prop of TextInput can sometimes drop characters when the `bufferDelay` is low and the user types very quickly. Some developers prefer to skip this prop entirely and instead use `setNativeProps` to directly manipulate the TextInput value when necessary. For example, the following code demonstrates editing the input when you tap a button:
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Clear%20text&ext=js
+import {useCallback, useRef} from 'react';
+import {
+  StyleSheet,
+  TextInput,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+const App = () => {
+  const inputRef = useRef(null);
+  const editText = useCallback(() => {
+    inputRef.current.setNativeProps({text: 'Edited Text'});
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <TextInput ref={inputRef} style={styles.input} />
+      <TouchableOpacity onPress={editText}>
+        <Text>Edit text</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  input: {
+    height: 50,
+    width: 200,
+    marginHorizontal: 20,
+    borderWidth: 1,
+    borderColor: '#ccc',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Clear%20text&ext=tsx
+import {useCallback, useRef} from 'react';
+import {
+  StyleSheet,
+  TextInput,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+const App = () => {
+  const inputRef = useRef<TextInput>(null);
+  const editText = useCallback(() => {
+    inputRef.current?.setNativeProps({text: 'Edited Text'});
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <TextInput ref={inputRef} style={styles.input} />
+      <TouchableOpacity onPress={editText}>
+        <Text>Edit text</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  input: {
+    height: 50,
+    width: 200,
+    marginHorizontal: 20,
+    borderWidth: 1,
+    borderColor: '#ccc',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+You can use the [`clear`](../textinput#clear) method to clear the `TextInput` which clears the current input text using the same approach.
+
+## Avoiding conflicts with the render function
+
+If you update a property that is also managed by the render function, you might end up with some unpredictable and confusing bugs because anytime the component re-renders and that property changes, whatever value was previously set from `setNativeProps` will be completely ignored and overridden.
+
+## setNativeProps & shouldComponentUpdate
+
+By [intelligently applying `shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`.
+
+## Other native methods
+
+The methods described here are available on most of the default components provided by React Native. Note, however, that they are _not_ available on composite components that aren't directly backed by a native view. This will generally include most components that you define in your own app.
+
+### measure(callback)
+
+Determines the location on screen, width, and height in the viewport of the given view and returns the values via an async callback. If successful, the callback will be called with the following arguments:
+
+- x
+- y
+- width
+- height
+- pageX
+- pageY
+
+Note that these measurements are not available until after the rendering has been completed in native. If you need the measurements as soon as possible and you don't need `pageX` and `pageY`, consider using the [`onLayout`](view.md#onlayout) property instead.
+
+Also the width and height returned by `measure()` are the width and height of the component in the viewport. If you need the actual size of the component, consider using the [`onLayout`](view.md#onlayout) property instead.
+
+### measureInWindow(callback)
+
+Determines the location of the given view in the window and returns the values via an async callback. If the React root view is embedded in another native view, this will give you the absolute coordinates. If successful, the callback will be called with the following arguments:
+
+- x
+- y
+- width
+- height
+
+### measureLayout(relativeToNativeComponentRef, onSuccess, onFail)
+
+Like `measure()`, but measures the view relative to an ancestor, specified with `relativeToNativeComponentRef` reference. This means that the returned coordinates are relative to the origin `x`, `y` of the ancestor view.
+
+:::note
+This method can also be called with a `relativeToNativeNode` handler (instead of reference), but this variant is obsolete with the new architecture.
+:::
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=measureLayout%20example&supportedPlatforms=android,ios&ext=js
+import {useEffect, useRef, useState} from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+
+const App = () => {
+  const textContainerRef = useRef(null);
+  const textRef = useRef(null);
+  const [measure, setMeasure] = useState(null);
+
+  useEffect(() => {
+    if (textRef.current && textContainerRef.current) {
+      textRef.current.measureLayout(
+        textContainerRef.current,
+        (left, top, width, height) => {
+          setMeasure({left, top, width, height});
+        },
+      );
+    }
+  }, [measure]);
+
+  return (
+    <View style={styles.container}>
+      <View ref={textContainerRef} style={styles.textContainer}>
+        <Text ref={textRef}>Where am I? (relative to the text container)</Text>
+      </View>
+      <Text style={styles.measure}>{JSON.stringify(measure)}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  textContainer: {
+    backgroundColor: '#61dafb',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 12,
+  },
+  measure: {
+    textAlign: 'center',
+    padding: 12,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=measureLayout%20example&ext=tsx
+import {useEffect, useRef, useState} from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+
+type Measurements = {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+};
+
+const App = () => {
+  const textContainerRef = useRef<View>(null);
+  const textRef = useRef<Text>(null);
+  const [measure, setMeasure] = useState<Measurements | null>(null);
+
+  useEffect(() => {
+    if (textRef.current && textContainerRef.current) {
+      textRef.current?.measureLayout(
+        textContainerRef.current,
+        (left, top, width, height) => {
+          setMeasure({left, top, width, height});
+        },
+        () => {
+          console.error('measurement failed');
+        },
+      );
+    }
+  }, [measure]);
+
+  return (
+    <View style={styles.container}>
+      <View ref={textContainerRef} style={styles.textContainer}>
+        <Text ref={textRef}>Where am I? (relative to the text container)</Text>
+      </View>
+      <Text style={styles.measure}>{JSON.stringify(measure)}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  textContainer: {
+    backgroundColor: '#61dafb',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 12,
+  },
+  measure: {
+    textAlign: 'center',
+    padding: 12,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### focus()
+
+Requests focus for the given input or view. The exact behavior triggered will depend on the platform and type of view.
+
+### blur()
+
+Removes focus from an input or view. This is the opposite of `focus()`.
diff --git a/website/versioned_docs/version-0.82/legacy/native-components-android.md b/website/versioned_docs/version-0.82/legacy/native-components-android.md
index 9443d854c53..53d9854dca8 100644
--- a/website/versioned_docs/version-0.82/legacy/native-components-android.md
+++ b/website/versioned_docs/version-0.82/legacy/native-components-android.md
@@ -1,873 +1,873 @@
----
-id: native-components-android
-title: Android Native UI Components
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-import NativeDeprecated from '../the-new-architecture/\_markdown_native_deprecation.mdx'
-
-<NativeDeprecated />
-
-There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application.
-
-Like the native module guide, this too is a more advanced guide that assumes you are somewhat familiar with Android SDK programming. This guide will show you how to build a native UI component, walking you through the implementation of a subset of the existing `ImageView` component available in the core React Native library.
-
-:::info
-You can also setup local library containing native component with one command. Read the guide to [Local libraries setup](local-library-setup) for more details.
-:::
-
-## ImageView example
-
-For this example we are going to walk through the implementation requirements to allow the use of ImageViews in JavaScript.
-
-Native views are created and manipulated by extending `ViewManager` or more commonly `SimpleViewManager` . A `SimpleViewManager` is convenient in this case because it applies common properties such as background color, opacity, and Flexbox layout.
-
-These subclasses are essentially singletons - only one instance of each is created by the bridge. They send native views to the `NativeViewHierarchyManager`, which delegates back to them to set and update the properties of the views as necessary. The `ViewManagers` are also typically the delegates for the views, sending events back to JavaScript via the bridge.
-
-To send a view:
-
-1. Create the ViewManager subclass.
-2. Implement the `createViewInstance` method
-3. Expose view property setters using `@ReactProp` (or `@ReactPropGroup`) annotation
-4. Register the manager in `createViewManagers` of the applications package.
-5. Implement the JavaScript module
-
-### 1. Create the `ViewManager` subclass
-
-In this example we create view manager class `ReactImageManager` that extends `SimpleViewManager` of type `ReactImageView`. `ReactImageView` is the type of object managed by the manager, this will be the custom native view. Name returned by `getName` is used to reference the native view type from JavaScript.
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-class ReactImageManager(
-    private val callerContext: ReactApplicationContext
-) : SimpleViewManager<ReactImageView>() {
-
-  override fun getName() = REACT_CLASS
-
-  companion object {
-    const val REACT_CLASS = "RCTImageView"
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-public class ReactImageManager extends SimpleViewManager<ReactImageView> {
-
-  public static final String REACT_CLASS = "RCTImageView";
-  ReactApplicationContext mCallerContext;
-
-  public ReactImageManager(ReactApplicationContext reactContext) {
-    mCallerContext = reactContext;
-  }
-
-  @Override
-  public String getName() {
-    return REACT_CLASS;
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 2. Implement method `createViewInstance`
-
-Views are created in the `createViewInstance` method, the view should initialize itself in its default state, any properties will be set via a follow up call to `updateView.`
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-  override fun createViewInstance(context: ThemedReactContext) =
-      ReactImageView(context, Fresco.newDraweeControllerBuilder(), null, callerContext)
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-  @Override
-  public ReactImageView createViewInstance(ThemedReactContext context) {
-    return new ReactImageView(context, Fresco.newDraweeControllerBuilder(), null, mCallerContext);
-  }
-```
-
-</TabItem>
-</Tabs>
-
-### 3. Expose view property setters using `@ReactProp` (or `@ReactPropGroup`) annotation
-
-Properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with `@ReactProp` (or `@ReactPropGroup`). Setter method should take view to be updated (of the current view type) as a first argument and property value as a second argument. Setter should be public and not return a value (i.e. return type should be `void` in Java or `Unit` in Kotlin). Property type sent to JS is determined automatically based on the type of value argument of the setter. The following type of values are currently supported (in Java): `boolean`, `int`, `float`, `double`, `String`, `Boolean`, `Integer`, `ReadableArray`, `ReadableMap`. The corresponding types in Kotlin are `Boolean`, `Int`, `Float`, `Double`, `String`, `ReadableArray`, `ReadableMap`.
-
-Annotation `@ReactProp` has one obligatory argument `name` of type `String`. Name assigned to the `@ReactProp` annotation linked to the setter method is used to reference the property on JS side.
-
-Except from `name`, `@ReactProp` annotation may take following optional arguments: `defaultBoolean`, `defaultInt`, `defaultFloat`. Those arguments should be of the corresponding type (accordingly `boolean`, `int`, `float` in Java and `Boolean`, `Int`, `Float` in Kotlin) and the value provided will be passed to the setter method in case when the property that the setter is referencing has been removed from the component. Note that "default" values are only provided for primitive types, in case when setter is of some complex type, `null` will be provided as a default value in case when corresponding property gets removed.
-
-Setter declaration requirements for methods annotated with `@ReactPropGroup` are different than for `@ReactProp`, please refer to the `@ReactPropGroup` annotation class docs for more information about it. **IMPORTANT!** in ReactJS updating the property value will result in setter method call. Note that one of the ways we can update component is by removing properties that have been set before. In that case setter method will be called as well to notify view manager that property has changed. In that case "default" value will be provided (for primitive types "default" value can be specified using `defaultBoolean`, `defaultFloat`, etc. arguments of `@ReactProp` annotation, for complex types setter will be called with value set to `null`).
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-  @ReactProp(name = "src")
-  fun setSrc(view: ReactImageView, sources: ReadableArray?) {
-    view.setSource(sources)
-  }
-
-  @ReactProp(name = "borderRadius", defaultFloat = 0f)
-  override fun setBorderRadius(view: ReactImageView, borderRadius: Float) {
-    view.setBorderRadius(borderRadius)
-  }
-
-  @ReactProp(name = ViewProps.RESIZE_MODE)
-  fun setResizeMode(view: ReactImageView, resizeMode: String?) {
-    view.setScaleType(ImageResizeMode.toScaleType(resizeMode))
-  }
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-  @ReactProp(name = "src")
-  public void setSrc(ReactImageView view, @Nullable ReadableArray sources) {
-    view.setSource(sources);
-  }
-
-  @ReactProp(name = "borderRadius", defaultFloat = 0f)
-  public void setBorderRadius(ReactImageView view, float borderRadius) {
-    view.setBorderRadius(borderRadius);
-  }
-
-  @ReactProp(name = ViewProps.RESIZE_MODE)
-  public void setResizeMode(ReactImageView view, @Nullable String resizeMode) {
-    view.setScaleType(ImageResizeMode.toScaleType(resizeMode));
-  }
-```
-
-</TabItem>
-</Tabs>
-
-### 4. Register the `ViewManager`
-
-The final step is to register the ViewManager to the application, this happens in a similar way to [Native Modules](native-modules-android.md), via the applications package member function `createViewManagers`.
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-  override fun createViewManagers(
-      reactContext: ReactApplicationContext
-  ) = listOf(ReactImageManager(reactContext))
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-  @Override
-  public List<ViewManager> createViewManagers(
-                            ReactApplicationContext reactContext) {
-    return Arrays.<ViewManager>asList(
-      new ReactImageManager(reactContext)
-    );
-  }
-```
-
-</TabItem>
-</Tabs>
-
-### 5. Implement the JavaScript module
-
-The very final step is to create the JavaScript module that defines the interface layer between Java/Kotlin and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using TypeScript, Flow, or plain old comments).
-
-```tsx title="ImageView.tsx"
-import {requireNativeComponent} from 'react-native';
-
-/**
- * Composes `View`.
- *
- * - src: Array<{url: string}>
- * - borderRadius: number
- * - resizeMode: 'cover' | 'contain' | 'stretch'
- */
-export default requireNativeComponent('RCTImageView');
-```
-
-The `requireNativeComponent` function takes the name of the native view. Note that if your component needs to do anything more sophisticated (e.g. custom event handling), you should wrap the native component in another React component. This is illustrated in the `MyCustomView` example below.
-
-## Events
-
-So now we know how to expose native view components that we can control freely from JS, but how do we deal with events from the user, like pinch-zooms or panning? When a native event occurs the native code should issue an event to the JavaScript representation of the View, and the two views are linked with the value returned from the `getId()` method.
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-class MyCustomView(context: Context) : View(context) {
-  ...
-  fun onReceiveNativeEvent() {
-    val event = Arguments.createMap().apply {
-      putString("message", "MyMessage")
-    }
-    val reactContext = context as ReactContext
-    reactContext
-        .getJSModule(RCTEventEmitter::class.java)
-        .receiveEvent(id, "topChange", event)
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-class MyCustomView extends View {
-   ...
-   public void onReceiveNativeEvent() {
-      WritableMap event = Arguments.createMap();
-      event.putString("message", "MyMessage");
-      ReactContext reactContext = (ReactContext)getContext();
-      reactContext
-          .getJSModule(RCTEventEmitter.class)
-          .receiveEvent(getId(), "topChange", event);
-    }
-}
-```
-
-</TabItem>
-</Tabs>
-
-To map the `topChange` event name to the `onChange` callback prop in JavaScript, register it by overriding the `getExportedCustomBubblingEventTypeConstants` method in your `ViewManager`:
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-class ReactImageManager : SimpleViewManager<MyCustomView>() {
-  ...
-  override fun getExportedCustomBubblingEventTypeConstants(): Map<String, Any> {
-    return mapOf(
-      "topChange" to mapOf(
-        "phasedRegistrationNames" to mapOf(
-          "bubbled" to "onChange"
-        )
-      )
-    )
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-public class ReactImageManager extends SimpleViewManager<MyCustomView> {
-    ...
-    public Map getExportedCustomBubblingEventTypeConstants() {
-        return MapBuilder.builder().put(
-            "topChange",
-            MapBuilder.of(
-                "phasedRegistrationNames",
-                MapBuilder.of("bubbled", "onChange")
-            )
-        ).build();
-    }
-}
-```
-
-</TabItem>
-</Tabs>
-
-This callback is invoked with the raw event, which we typically process in the wrapper component to make a simpler API:
-
-```tsx {8-11,13-17} title="MyCustomView.tsx"
-import {useCallback} from 'react';
-import {requireNativeComponent} from 'react-native';
-
-const RCTMyCustomView = requireNativeComponent('RCTMyCustomView');
-
-export default function MyCustomView(props: {
-  // ...
-  /**
-   * Callback that is called continuously when the user is dragging the map.
-   */
-  onChangeMessage: (message: string) => unknown;
-}) {
-  const onChange = useCallback(
-    event => {
-      props.onChangeMessage?.(event.nativeEvent.message);
-    },
-    [props.onChangeMessage],
-  );
-
-  return <RCTMyCustomView {...props} onChange={onChange} />;
-}
-```
-
-## Integration with an Android Fragment example
-
-In order to integrate existing Native UI elements to your React Native app, you might need to use Android Fragments to give you a more granular control over your native component than returning a `View` from your `ViewManager`. You will need this if you want to add custom logic that is tied to your view with the help of [lifecycle methods](https://developer.android.com/guide/fragments/lifecycle), such as `onViewCreated`, `onPause`, `onResume`. The following steps will show you how to do it:
-
-### 1. Create an example custom view
-
-First, let's create a `CustomView` class which extends `FrameLayout` (the content of this view can be any view that you'd like to render)
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin title="CustomView.kt"
-// replace with your package
-package com.mypackage
-
-import android.content.Context
-import android.graphics.Color
-import android.widget.FrameLayout
-import android.widget.TextView
-
-class CustomView(context: Context) : FrameLayout(context) {
-  init {
-    // set padding and background color
-    setPadding(16,16,16,16)
-    setBackgroundColor(Color.parseColor("#5FD3F3"))
-
-    // add default text view
-    addView(TextView(context).apply {
-      text = "Welcome to Android Fragments with React Native."
-    })
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java title="CustomView.java"
-// replace with your package
-package com.mypackage;
-
-import android.content.Context;
-import android.graphics.Color;
-import android.widget.FrameLayout;
-import android.widget.ImageView;
-import android.widget.TextView;
-
-import androidx.annotation.NonNull;
-
-public class CustomView extends FrameLayout {
-  public CustomView(@NonNull Context context) {
-    super(context);
-    // set padding and background color
-    this.setPadding(16,16,16,16);
-    this.setBackgroundColor(Color.parseColor("#5FD3F3"));
-
-    // add default text view
-    TextView text = new TextView(context);
-    text.setText("Welcome to Android Fragments with React Native.");
-    this.addView(text);
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 2. Create a `Fragment`
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin title="MyFragment.kt"
-// replace with your package
-package com.mypackage
-
-import android.os.Bundle
-import android.view.LayoutInflater
-import android.view.View
-import android.view.ViewGroup
-import androidx.fragment.app.Fragment
-
-// replace with your view's import
-import com.mypackage.CustomView
-
-class MyFragment : Fragment() {
-  private lateinit var customView: CustomView
-
-  override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
-    super.onCreateView(inflater, container, savedInstanceState)
-    customView = CustomView(requireNotNull(context))
-    return customView // this CustomView could be any view that you want to render
-  }
-
-  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
-    super.onViewCreated(view, savedInstanceState)
-    // do any logic that should happen in an `onCreate` method, e.g:
-    // customView.onCreate(savedInstanceState);
-  }
-
-  override fun onPause() {
-    super.onPause()
-    // do any logic that should happen in an `onPause` method
-    // e.g.: customView.onPause();
-  }
-
-  override fun onResume() {
-    super.onResume()
-    // do any logic that should happen in an `onResume` method
-    // e.g.: customView.onResume();
-  }
-
-  override fun onDestroy() {
-    super.onDestroy()
-    // do any logic that should happen in an `onDestroy` method
-    // e.g.: customView.onDestroy();
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java title="MyFragment.java"
-// replace with your package
-package com.mypackage;
-
-import android.os.Bundle;
-import android.view.LayoutInflater;
-import android.view.View;
-import android.view.ViewGroup;
-import androidx.fragment.app.Fragment;
-
-// replace with your view's import
-import com.mypackage.CustomView;
-
-public class MyFragment extends Fragment {
-    CustomView customView;
-
-    @Override
-    public View onCreateView(LayoutInflater inflater, ViewGroup parent, Bundle savedInstanceState) {
-        super.onCreateView(inflater, parent, savedInstanceState);
-        customView = new CustomView(this.getContext());
-        return customView; // this CustomView could be any view that you want to render
-    }
-
-    @Override
-    public void onViewCreated(View view, Bundle savedInstanceState) {
-        super.onViewCreated(view, savedInstanceState);
-        // do any logic that should happen in an `onCreate` method, e.g:
-        // customView.onCreate(savedInstanceState);
-    }
-
-    @Override
-    public void onPause() {
-        super.onPause();
-        // do any logic that should happen in an `onPause` method
-        // e.g.: customView.onPause();
-    }
-
-    @Override
-    public void onResume() {
-        super.onResume();
-       // do any logic that should happen in an `onResume` method
-       // e.g.: customView.onResume();
-    }
-
-    @Override
-    public void onDestroy() {
-        super.onDestroy();
-        // do any logic that should happen in an `onDestroy` method
-        // e.g.: customView.onDestroy();
-    }
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 3. Create the `ViewManager` subclass
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin title="MyViewManager.kt"
-// replace with your package
-package com.mypackage
-
-import android.view.Choreographer
-import android.view.View
-import android.view.ViewGroup
-import android.widget.FrameLayout
-import androidx.fragment.app.FragmentActivity
-import com.facebook.react.bridge.ReactApplicationContext
-import com.facebook.react.bridge.ReadableArray
-import com.facebook.react.uimanager.ThemedReactContext
-import com.facebook.react.uimanager.ViewGroupManager
-import com.facebook.react.uimanager.annotations.ReactPropGroup
-
-class MyViewManager(
-    private val reactContext: ReactApplicationContext
-) : ViewGroupManager<FrameLayout>() {
-  private var propWidth: Int? = null
-  private var propHeight: Int? = null
-
-  override fun getName() = REACT_CLASS
-
-  /**
-   * Return a FrameLayout which will later hold the Fragment
-   */
-  override fun createViewInstance(reactContext: ThemedReactContext) =
-      FrameLayout(reactContext)
-
-  /**
-   * Map the "create" command to an integer
-   */
-  override fun getCommandsMap() = mapOf("create" to COMMAND_CREATE)
-
-  /**
-   * Handle "create" command (called from JS) and call createFragment method
-   */
-  override fun receiveCommand(
-      root: FrameLayout,
-      commandId: String,
-      args: ReadableArray?
-  ) {
-    super.receiveCommand(root, commandId, args)
-    val reactNativeViewId = requireNotNull(args).getInt(0)
-
-    when (commandId.toInt()) {
-      COMMAND_CREATE -> createFragment(root, reactNativeViewId)
-    }
-  }
-
-  @ReactPropGroup(names = ["width", "height"], customType = "Style")
-  fun setStyle(view: FrameLayout, index: Int, value: Int) {
-    if (index == 0) propWidth = value
-    if (index == 1) propHeight = value
-  }
-
-  /**
-   * Replace your React Native view with a custom fragment
-   */
-  fun createFragment(root: FrameLayout, reactNativeViewId: Int) {
-    val parentView = root.findViewById<ViewGroup>(reactNativeViewId)
-    setupLayout(parentView)
-
-    val myFragment = MyFragment()
-    val activity = reactContext.currentActivity as FragmentActivity
-    activity.supportFragmentManager
-        .beginTransaction()
-        .replace(reactNativeViewId, myFragment, reactNativeViewId.toString())
-        .commit()
-  }
-
-  fun setupLayout(view: View) {
-    Choreographer.getInstance().postFrameCallback(object: Choreographer.FrameCallback {
-      override fun doFrame(frameTimeNanos: Long) {
-        manuallyLayoutChildren(view)
-        view.viewTreeObserver.dispatchOnGlobalLayout()
-        Choreographer.getInstance().postFrameCallback(this)
-      }
-    })
-  }
-
-  /**
-   * Layout all children properly
-   */
-  private fun manuallyLayoutChildren(view: View) {
-    // propWidth and propHeight coming from react-native props
-    val width = requireNotNull(propWidth)
-    val height = requireNotNull(propHeight)
-
-    view.measure(
-        View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
-        View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY))
-
-    view.layout(0, 0, width, height)
-  }
-
-  companion object {
-    private const val REACT_CLASS = "MyViewManager"
-    private const val COMMAND_CREATE = 1
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java title="MyViewManager.java"
-// replace with your package
-package com.mypackage;
-
-import android.view.Choreographer;
-import android.view.View;
-import android.view.ViewGroup;
-import android.widget.FrameLayout;
-
-import androidx.annotation.NonNull;
-import androidx.annotation.Nullable;
-import androidx.fragment.app.FragmentActivity;
-
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.ReadableArray;
-import com.facebook.react.common.MapBuilder;
-import com.facebook.react.uimanager.annotations.ReactProp;
-import com.facebook.react.uimanager.annotations.ReactPropGroup;
-import com.facebook.react.uimanager.ViewGroupManager;
-import com.facebook.react.uimanager.ThemedReactContext;
-
-import java.util.Map;
-
-public class MyViewManager extends ViewGroupManager<FrameLayout> {
-
-  public static final String REACT_CLASS = "MyViewManager";
-  public final int COMMAND_CREATE = 1;
-  private int propWidth;
-  private int propHeight;
-
-  ReactApplicationContext reactContext;
-
-  public MyViewManager(ReactApplicationContext reactContext) {
-    this.reactContext = reactContext;
-  }
-
-  @Override
-  public String getName() {
-    return REACT_CLASS;
-  }
-
-  /**
-   * Return a FrameLayout which will later hold the Fragment
-   */
-  @Override
-  public FrameLayout createViewInstance(ThemedReactContext reactContext) {
-    return new FrameLayout(reactContext);
-  }
-
-  /**
-   * Map the "create" command to an integer
-   */
-  @Nullable
-  @Override
-  public Map<String, Integer> getCommandsMap() {
-    return MapBuilder.of("create", COMMAND_CREATE);
-  }
-
-  /**
-   * Handle "create" command (called from JS) and call createFragment method
-   */
-  @Override
-  public void receiveCommand(
-    @NonNull FrameLayout root,
-    String commandId,
-    @Nullable ReadableArray args
-  ) {
-    super.receiveCommand(root, commandId, args);
-    int reactNativeViewId = args.getInt(0);
-    int commandIdInt = Integer.parseInt(commandId);
-
-    switch (commandIdInt) {
-      case COMMAND_CREATE:
-        createFragment(root, reactNativeViewId);
-        break;
-      default: {}
-    }
-  }
-
-  @ReactPropGroup(names = {"width", "height"}, customType = "Style")
-  public void setStyle(FrameLayout view, int index, Integer value) {
-    if (index == 0) {
-      propWidth = value;
-    }
-
-    if (index == 1) {
-      propHeight = value;
-    }
-  }
-
-  /**
-   * Replace your React Native view with a custom fragment
-   */
-  public void createFragment(FrameLayout root, int reactNativeViewId) {
-    ViewGroup parentView = (ViewGroup) root.findViewById(reactNativeViewId);
-    setupLayout(parentView);
-
-    final MyFragment myFragment = new MyFragment();
-    FragmentActivity activity = (FragmentActivity) reactContext.getCurrentActivity();
-    activity.getSupportFragmentManager()
-            .beginTransaction()
-            .replace(reactNativeViewId, myFragment, String.valueOf(reactNativeViewId))
-            .commit();
-  }
-
-  public void setupLayout(View view) {
-    Choreographer.getInstance().postFrameCallback(new Choreographer.FrameCallback() {
-      @Override
-      public void doFrame(long frameTimeNanos) {
-        manuallyLayoutChildren(view);
-        view.getViewTreeObserver().dispatchOnGlobalLayout();
-        Choreographer.getInstance().postFrameCallback(this);
-      }
-    });
-  }
-
-  /**
-   * Layout all children properly
-   */
-  public void manuallyLayoutChildren(View view) {
-      // propWidth and propHeight coming from react-native props
-      int width = propWidth;
-      int height = propHeight;
-
-      view.measure(
-              View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
-              View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY));
-
-      view.layout(0, 0, width, height);
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 4. Register the `ViewManager`
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin title="MyPackage.kt"
-// replace with your package
-package com.mypackage
-
-import com.facebook.react.ReactPackage
-import com.facebook.react.bridge.ReactApplicationContext
-import com.facebook.react.uimanager.ViewManager
-
-class MyPackage : ReactPackage {
-  ...
-  override fun createViewManagers(
-      reactContext: ReactApplicationContext
-  ) = listOf(MyViewManager(reactContext))
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java title="MyPackage.java"
-// replace with your package
-package com.mypackage;
-
-import com.facebook.react.ReactPackage;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.uimanager.ViewManager;
-
-import java.util.Arrays;
-import java.util.List;
-
-public class MyPackage implements ReactPackage {
-
-   @Override
-   public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
-       return Arrays.<ViewManager>asList(
-            new MyViewManager(reactContext)
-       );
-   }
-
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 5. Register the `Package`
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin title="MainApplication.kt"
-override fun getPackages(): List<ReactPackage> =
-    PackageList(this).packages.apply {
-        // Packages that cannot be autolinked yet can be added manually here, for example:
-        // add(MyReactNativePackage())
-        add(MyAppPackage())
-    }
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java title="MainApplication.java"
-@Override
-protected List<ReactPackage> getPackages() {
-    List<ReactPackage> packages = new PackageList(this).getPackages();
-    // Packages that cannot be autolinked yet can be added manually here, for example:
-    // packages.add(new MyReactNativePackage());
-    packages.add(new MyAppPackage());
-    return packages;
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 6. Implement the JavaScript module
-
-I. Start with custom View manager:
-
-```tsx title="MyViewManager.tsx"
-import {requireNativeComponent} from 'react-native';
-
-export const MyViewManager =
-  requireNativeComponent('MyViewManager');
-```
-
-II. Then implement custom View calling the `create` method:
-
-```tsx title="MyView.tsx"
-import React, {useEffect, useRef} from 'react';
-import {
-  PixelRatio,
-  UIManager,
-  findNodeHandle,
-} from 'react-native';
-
-import {MyViewManager} from './my-view-manager';
-
-const createFragment = viewId =>
-  UIManager.dispatchViewManagerCommand(
-    viewId,
-    // we are calling the 'create' command
-    UIManager.MyViewManager.Commands.create.toString(),
-    [viewId],
-  );
-
-export const MyView = () => {
-  const ref = useRef(null);
-
-  useEffect(() => {
-    const viewId = findNodeHandle(ref.current);
-    createFragment(viewId);
-  }, []);
-
-  return (
-    <MyViewManager
-      style={{
-        // converts dpi to px, provide desired height
-        height: PixelRatio.getPixelSizeForLayoutSize(200),
-        // converts dpi to px, provide desired width
-        width: PixelRatio.getPixelSizeForLayoutSize(200),
-      }}
-      ref={ref}
-    />
-  );
-};
-```
-
-If you want to expose property setters using `@ReactProp` (or `@ReactPropGroup`) annotation see the [ImageView example](#imageview-example) above.
+---
+id: native-components-android
+title: Android Native UI Components
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+import NativeDeprecated from '../the-new-architecture/\_markdown_native_deprecation.mdx'
+
+<NativeDeprecated />
+
+There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application.
+
+Like the native module guide, this too is a more advanced guide that assumes you are somewhat familiar with Android SDK programming. This guide will show you how to build a native UI component, walking you through the implementation of a subset of the existing `ImageView` component available in the core React Native library.
+
+:::info
+You can also setup local library containing native component with one command. Read the guide to [Local libraries setup](local-library-setup) for more details.
+:::
+
+## ImageView example
+
+For this example we are going to walk through the implementation requirements to allow the use of ImageViews in JavaScript.
+
+Native views are created and manipulated by extending `ViewManager` or more commonly `SimpleViewManager` . A `SimpleViewManager` is convenient in this case because it applies common properties such as background color, opacity, and Flexbox layout.
+
+These subclasses are essentially singletons - only one instance of each is created by the bridge. They send native views to the `NativeViewHierarchyManager`, which delegates back to them to set and update the properties of the views as necessary. The `ViewManagers` are also typically the delegates for the views, sending events back to JavaScript via the bridge.
+
+To send a view:
+
+1. Create the ViewManager subclass.
+2. Implement the `createViewInstance` method
+3. Expose view property setters using `@ReactProp` (or `@ReactPropGroup`) annotation
+4. Register the manager in `createViewManagers` of the applications package.
+5. Implement the JavaScript module
+
+### 1. Create the `ViewManager` subclass
+
+In this example we create view manager class `ReactImageManager` that extends `SimpleViewManager` of type `ReactImageView`. `ReactImageView` is the type of object managed by the manager, this will be the custom native view. Name returned by `getName` is used to reference the native view type from JavaScript.
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+class ReactImageManager(
+    private val callerContext: ReactApplicationContext
+) : SimpleViewManager<ReactImageView>() {
+
+  override fun getName() = REACT_CLASS
+
+  companion object {
+    const val REACT_CLASS = "RCTImageView"
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+public class ReactImageManager extends SimpleViewManager<ReactImageView> {
+
+  public static final String REACT_CLASS = "RCTImageView";
+  ReactApplicationContext mCallerContext;
+
+  public ReactImageManager(ReactApplicationContext reactContext) {
+    mCallerContext = reactContext;
+  }
+
+  @Override
+  public String getName() {
+    return REACT_CLASS;
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 2. Implement method `createViewInstance`
+
+Views are created in the `createViewInstance` method, the view should initialize itself in its default state, any properties will be set via a follow up call to `updateView.`
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+  override fun createViewInstance(context: ThemedReactContext) =
+      ReactImageView(context, Fresco.newDraweeControllerBuilder(), null, callerContext)
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+  @Override
+  public ReactImageView createViewInstance(ThemedReactContext context) {
+    return new ReactImageView(context, Fresco.newDraweeControllerBuilder(), null, mCallerContext);
+  }
+```
+
+</TabItem>
+</Tabs>
+
+### 3. Expose view property setters using `@ReactProp` (or `@ReactPropGroup`) annotation
+
+Properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with `@ReactProp` (or `@ReactPropGroup`). Setter method should take view to be updated (of the current view type) as a first argument and property value as a second argument. Setter should be public and not return a value (i.e. return type should be `void` in Java or `Unit` in Kotlin). Property type sent to JS is determined automatically based on the type of value argument of the setter. The following type of values are currently supported (in Java): `boolean`, `int`, `float`, `double`, `String`, `Boolean`, `Integer`, `ReadableArray`, `ReadableMap`. The corresponding types in Kotlin are `Boolean`, `Int`, `Float`, `Double`, `String`, `ReadableArray`, `ReadableMap`.
+
+Annotation `@ReactProp` has one obligatory argument `name` of type `String`. Name assigned to the `@ReactProp` annotation linked to the setter method is used to reference the property on JS side.
+
+Except from `name`, `@ReactProp` annotation may take following optional arguments: `defaultBoolean`, `defaultInt`, `defaultFloat`. Those arguments should be of the corresponding type (accordingly `boolean`, `int`, `float` in Java and `Boolean`, `Int`, `Float` in Kotlin) and the value provided will be passed to the setter method in case when the property that the setter is referencing has been removed from the component. Note that "default" values are only provided for primitive types, in case when setter is of some complex type, `null` will be provided as a default value in case when corresponding property gets removed.
+
+Setter declaration requirements for methods annotated with `@ReactPropGroup` are different than for `@ReactProp`, please refer to the `@ReactPropGroup` annotation class docs for more information about it. **IMPORTANT!** in ReactJS updating the property value will result in setter method call. Note that one of the ways we can update component is by removing properties that have been set before. In that case setter method will be called as well to notify view manager that property has changed. In that case "default" value will be provided (for primitive types "default" value can be specified using `defaultBoolean`, `defaultFloat`, etc. arguments of `@ReactProp` annotation, for complex types setter will be called with value set to `null`).
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+  @ReactProp(name = "src")
+  fun setSrc(view: ReactImageView, sources: ReadableArray?) {
+    view.setSource(sources)
+  }
+
+  @ReactProp(name = "borderRadius", defaultFloat = 0f)
+  override fun setBorderRadius(view: ReactImageView, borderRadius: Float) {
+    view.setBorderRadius(borderRadius)
+  }
+
+  @ReactProp(name = ViewProps.RESIZE_MODE)
+  fun setResizeMode(view: ReactImageView, resizeMode: String?) {
+    view.setScaleType(ImageResizeMode.toScaleType(resizeMode))
+  }
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+  @ReactProp(name = "src")
+  public void setSrc(ReactImageView view, @Nullable ReadableArray sources) {
+    view.setSource(sources);
+  }
+
+  @ReactProp(name = "borderRadius", defaultFloat = 0f)
+  public void setBorderRadius(ReactImageView view, float borderRadius) {
+    view.setBorderRadius(borderRadius);
+  }
+
+  @ReactProp(name = ViewProps.RESIZE_MODE)
+  public void setResizeMode(ReactImageView view, @Nullable String resizeMode) {
+    view.setScaleType(ImageResizeMode.toScaleType(resizeMode));
+  }
+```
+
+</TabItem>
+</Tabs>
+
+### 4. Register the `ViewManager`
+
+The final step is to register the ViewManager to the application, this happens in a similar way to [Native Modules](native-modules-android.md), via the applications package member function `createViewManagers`.
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+  override fun createViewManagers(
+      reactContext: ReactApplicationContext
+  ) = listOf(ReactImageManager(reactContext))
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+  @Override
+  public List<ViewManager> createViewManagers(
+                            ReactApplicationContext reactContext) {
+    return Arrays.<ViewManager>asList(
+      new ReactImageManager(reactContext)
+    );
+  }
+```
+
+</TabItem>
+</Tabs>
+
+### 5. Implement the JavaScript module
+
+The very final step is to create the JavaScript module that defines the interface layer between Java/Kotlin and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using TypeScript, Flow, or plain old comments).
+
+```tsx title="ImageView.tsx"
+import {requireNativeComponent} from 'react-native';
+
+/**
+ * Composes `View`.
+ *
+ * - src: Array<{url: string}>
+ * - borderRadius: number
+ * - resizeMode: 'cover' | 'contain' | 'stretch'
+ */
+export default requireNativeComponent('RCTImageView');
+```
+
+The `requireNativeComponent` function takes the name of the native view. Note that if your component needs to do anything more sophisticated (e.g. custom event handling), you should wrap the native component in another React component. This is illustrated in the `MyCustomView` example below.
+
+## Events
+
+So now we know how to expose native view components that we can control freely from JS, but how do we deal with events from the user, like pinch-zooms or panning? When a native event occurs the native code should issue an event to the JavaScript representation of the View, and the two views are linked with the value returned from the `getId()` method.
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+class MyCustomView(context: Context) : View(context) {
+  ...
+  fun onReceiveNativeEvent() {
+    val event = Arguments.createMap().apply {
+      putString("message", "MyMessage")
+    }
+    val reactContext = context as ReactContext
+    reactContext
+        .getJSModule(RCTEventEmitter::class.java)
+        .receiveEvent(id, "topChange", event)
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+class MyCustomView extends View {
+   ...
+   public void onReceiveNativeEvent() {
+      WritableMap event = Arguments.createMap();
+      event.putString("message", "MyMessage");
+      ReactContext reactContext = (ReactContext)getContext();
+      reactContext
+          .getJSModule(RCTEventEmitter.class)
+          .receiveEvent(getId(), "topChange", event);
+    }
+}
+```
+
+</TabItem>
+</Tabs>
+
+To map the `topChange` event name to the `onChange` callback prop in JavaScript, register it by overriding the `getExportedCustomBubblingEventTypeConstants` method in your `ViewManager`:
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+class ReactImageManager : SimpleViewManager<MyCustomView>() {
+  ...
+  override fun getExportedCustomBubblingEventTypeConstants(): Map<String, Any> {
+    return mapOf(
+      "topChange" to mapOf(
+        "phasedRegistrationNames" to mapOf(
+          "bubbled" to "onChange"
+        )
+      )
+    )
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+public class ReactImageManager extends SimpleViewManager<MyCustomView> {
+    ...
+    public Map getExportedCustomBubblingEventTypeConstants() {
+        return MapBuilder.builder().put(
+            "topChange",
+            MapBuilder.of(
+                "phasedRegistrationNames",
+                MapBuilder.of("bubbled", "onChange")
+            )
+        ).build();
+    }
+}
+```
+
+</TabItem>
+</Tabs>
+
+This callback is invoked with the raw event, which we typically process in the wrapper component to make a simpler API:
+
+```tsx {8-11,13-17} title="MyCustomView.tsx"
+import {useCallback} from 'react';
+import {requireNativeComponent} from 'react-native';
+
+const RCTMyCustomView = requireNativeComponent('RCTMyCustomView');
+
+export default function MyCustomView(props: {
+  // ...
+  /**
+   * Callback that is called continuously when the user is dragging the map.
+   */
+  onChangeMessage: (message: string) => unknown;
+}) {
+  const onChange = useCallback(
+    event => {
+      props.onChangeMessage?.(event.nativeEvent.message);
+    },
+    [props.onChangeMessage],
+  );
+
+  return <RCTMyCustomView {...props} onChange={onChange} />;
+}
+```
+
+## Integration with an Android Fragment example
+
+In order to integrate existing Native UI elements to your React Native app, you might need to use Android Fragments to give you a more granular control over your native component than returning a `View` from your `ViewManager`. You will need this if you want to add custom logic that is tied to your view with the help of [lifecycle methods](https://developer.android.com/guide/fragments/lifecycle), such as `onViewCreated`, `onPause`, `onResume`. The following steps will show you how to do it:
+
+### 1. Create an example custom view
+
+First, let's create a `CustomView` class which extends `FrameLayout` (the content of this view can be any view that you'd like to render)
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin title="CustomView.kt"
+// replace with your package
+package com.mypackage
+
+import android.content.Context
+import android.graphics.Color
+import android.widget.FrameLayout
+import android.widget.TextView
+
+class CustomView(context: Context) : FrameLayout(context) {
+  init {
+    // set padding and background color
+    setPadding(16,16,16,16)
+    setBackgroundColor(Color.parseColor("#5FD3F3"))
+
+    // add default text view
+    addView(TextView(context).apply {
+      text = "Welcome to Android Fragments with React Native."
+    })
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java title="CustomView.java"
+// replace with your package
+package com.mypackage;
+
+import android.content.Context;
+import android.graphics.Color;
+import android.widget.FrameLayout;
+import android.widget.ImageView;
+import android.widget.TextView;
+
+import androidx.annotation.NonNull;
+
+public class CustomView extends FrameLayout {
+  public CustomView(@NonNull Context context) {
+    super(context);
+    // set padding and background color
+    this.setPadding(16,16,16,16);
+    this.setBackgroundColor(Color.parseColor("#5FD3F3"));
+
+    // add default text view
+    TextView text = new TextView(context);
+    text.setText("Welcome to Android Fragments with React Native.");
+    this.addView(text);
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 2. Create a `Fragment`
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin title="MyFragment.kt"
+// replace with your package
+package com.mypackage
+
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import androidx.fragment.app.Fragment
+
+// replace with your view's import
+import com.mypackage.CustomView
+
+class MyFragment : Fragment() {
+  private lateinit var customView: CustomView
+
+  override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
+    super.onCreateView(inflater, container, savedInstanceState)
+    customView = CustomView(requireNotNull(context))
+    return customView // this CustomView could be any view that you want to render
+  }
+
+  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+    super.onViewCreated(view, savedInstanceState)
+    // do any logic that should happen in an `onCreate` method, e.g:
+    // customView.onCreate(savedInstanceState);
+  }
+
+  override fun onPause() {
+    super.onPause()
+    // do any logic that should happen in an `onPause` method
+    // e.g.: customView.onPause();
+  }
+
+  override fun onResume() {
+    super.onResume()
+    // do any logic that should happen in an `onResume` method
+    // e.g.: customView.onResume();
+  }
+
+  override fun onDestroy() {
+    super.onDestroy()
+    // do any logic that should happen in an `onDestroy` method
+    // e.g.: customView.onDestroy();
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java title="MyFragment.java"
+// replace with your package
+package com.mypackage;
+
+import android.os.Bundle;
+import android.view.LayoutInflater;
+import android.view.View;
+import android.view.ViewGroup;
+import androidx.fragment.app.Fragment;
+
+// replace with your view's import
+import com.mypackage.CustomView;
+
+public class MyFragment extends Fragment {
+    CustomView customView;
+
+    @Override
+    public View onCreateView(LayoutInflater inflater, ViewGroup parent, Bundle savedInstanceState) {
+        super.onCreateView(inflater, parent, savedInstanceState);
+        customView = new CustomView(this.getContext());
+        return customView; // this CustomView could be any view that you want to render
+    }
+
+    @Override
+    public void onViewCreated(View view, Bundle savedInstanceState) {
+        super.onViewCreated(view, savedInstanceState);
+        // do any logic that should happen in an `onCreate` method, e.g:
+        // customView.onCreate(savedInstanceState);
+    }
+
+    @Override
+    public void onPause() {
+        super.onPause();
+        // do any logic that should happen in an `onPause` method
+        // e.g.: customView.onPause();
+    }
+
+    @Override
+    public void onResume() {
+        super.onResume();
+       // do any logic that should happen in an `onResume` method
+       // e.g.: customView.onResume();
+    }
+
+    @Override
+    public void onDestroy() {
+        super.onDestroy();
+        // do any logic that should happen in an `onDestroy` method
+        // e.g.: customView.onDestroy();
+    }
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 3. Create the `ViewManager` subclass
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin title="MyViewManager.kt"
+// replace with your package
+package com.mypackage
+
+import android.view.Choreographer
+import android.view.View
+import android.view.ViewGroup
+import android.widget.FrameLayout
+import androidx.fragment.app.FragmentActivity
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.annotations.ReactPropGroup
+
+class MyViewManager(
+    private val reactContext: ReactApplicationContext
+) : ViewGroupManager<FrameLayout>() {
+  private var propWidth: Int? = null
+  private var propHeight: Int? = null
+
+  override fun getName() = REACT_CLASS
+
+  /**
+   * Return a FrameLayout which will later hold the Fragment
+   */
+  override fun createViewInstance(reactContext: ThemedReactContext) =
+      FrameLayout(reactContext)
+
+  /**
+   * Map the "create" command to an integer
+   */
+  override fun getCommandsMap() = mapOf("create" to COMMAND_CREATE)
+
+  /**
+   * Handle "create" command (called from JS) and call createFragment method
+   */
+  override fun receiveCommand(
+      root: FrameLayout,
+      commandId: String,
+      args: ReadableArray?
+  ) {
+    super.receiveCommand(root, commandId, args)
+    val reactNativeViewId = requireNotNull(args).getInt(0)
+
+    when (commandId.toInt()) {
+      COMMAND_CREATE -> createFragment(root, reactNativeViewId)
+    }
+  }
+
+  @ReactPropGroup(names = ["width", "height"], customType = "Style")
+  fun setStyle(view: FrameLayout, index: Int, value: Int) {
+    if (index == 0) propWidth = value
+    if (index == 1) propHeight = value
+  }
+
+  /**
+   * Replace your React Native view with a custom fragment
+   */
+  fun createFragment(root: FrameLayout, reactNativeViewId: Int) {
+    val parentView = root.findViewById<ViewGroup>(reactNativeViewId)
+    setupLayout(parentView)
+
+    val myFragment = MyFragment()
+    val activity = reactContext.currentActivity as FragmentActivity
+    activity.supportFragmentManager
+        .beginTransaction()
+        .replace(reactNativeViewId, myFragment, reactNativeViewId.toString())
+        .commit()
+  }
+
+  fun setupLayout(view: View) {
+    Choreographer.getInstance().postFrameCallback(object: Choreographer.FrameCallback {
+      override fun doFrame(frameTimeNanos: Long) {
+        manuallyLayoutChildren(view)
+        view.viewTreeObserver.dispatchOnGlobalLayout()
+        Choreographer.getInstance().postFrameCallback(this)
+      }
+    })
+  }
+
+  /**
+   * Layout all children properly
+   */
+  private fun manuallyLayoutChildren(view: View) {
+    // propWidth and propHeight coming from react-native props
+    val width = requireNotNull(propWidth)
+    val height = requireNotNull(propHeight)
+
+    view.measure(
+        View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
+        View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY))
+
+    view.layout(0, 0, width, height)
+  }
+
+  companion object {
+    private const val REACT_CLASS = "MyViewManager"
+    private const val COMMAND_CREATE = 1
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java title="MyViewManager.java"
+// replace with your package
+package com.mypackage;
+
+import android.view.Choreographer;
+import android.view.View;
+import android.view.ViewGroup;
+import android.widget.FrameLayout;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+import androidx.fragment.app.FragmentActivity;
+
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReadableArray;
+import com.facebook.react.common.MapBuilder;
+import com.facebook.react.uimanager.annotations.ReactProp;
+import com.facebook.react.uimanager.annotations.ReactPropGroup;
+import com.facebook.react.uimanager.ViewGroupManager;
+import com.facebook.react.uimanager.ThemedReactContext;
+
+import java.util.Map;
+
+public class MyViewManager extends ViewGroupManager<FrameLayout> {
+
+  public static final String REACT_CLASS = "MyViewManager";
+  public final int COMMAND_CREATE = 1;
+  private int propWidth;
+  private int propHeight;
+
+  ReactApplicationContext reactContext;
+
+  public MyViewManager(ReactApplicationContext reactContext) {
+    this.reactContext = reactContext;
+  }
+
+  @Override
+  public String getName() {
+    return REACT_CLASS;
+  }
+
+  /**
+   * Return a FrameLayout which will later hold the Fragment
+   */
+  @Override
+  public FrameLayout createViewInstance(ThemedReactContext reactContext) {
+    return new FrameLayout(reactContext);
+  }
+
+  /**
+   * Map the "create" command to an integer
+   */
+  @Nullable
+  @Override
+  public Map<String, Integer> getCommandsMap() {
+    return MapBuilder.of("create", COMMAND_CREATE);
+  }
+
+  /**
+   * Handle "create" command (called from JS) and call createFragment method
+   */
+  @Override
+  public void receiveCommand(
+    @NonNull FrameLayout root,
+    String commandId,
+    @Nullable ReadableArray args
+  ) {
+    super.receiveCommand(root, commandId, args);
+    int reactNativeViewId = args.getInt(0);
+    int commandIdInt = Integer.parseInt(commandId);
+
+    switch (commandIdInt) {
+      case COMMAND_CREATE:
+        createFragment(root, reactNativeViewId);
+        break;
+      default: {}
+    }
+  }
+
+  @ReactPropGroup(names = {"width", "height"}, customType = "Style")
+  public void setStyle(FrameLayout view, int index, Integer value) {
+    if (index == 0) {
+      propWidth = value;
+    }
+
+    if (index == 1) {
+      propHeight = value;
+    }
+  }
+
+  /**
+   * Replace your React Native view with a custom fragment
+   */
+  public void createFragment(FrameLayout root, int reactNativeViewId) {
+    ViewGroup parentView = (ViewGroup) root.findViewById(reactNativeViewId);
+    setupLayout(parentView);
+
+    final MyFragment myFragment = new MyFragment();
+    FragmentActivity activity = (FragmentActivity) reactContext.getCurrentActivity();
+    activity.getSupportFragmentManager()
+            .beginTransaction()
+            .replace(reactNativeViewId, myFragment, String.valueOf(reactNativeViewId))
+            .commit();
+  }
+
+  public void setupLayout(View view) {
+    Choreographer.getInstance().postFrameCallback(new Choreographer.FrameCallback() {
+      @Override
+      public void doFrame(long frameTimeNanos) {
+        manuallyLayoutChildren(view);
+        view.getViewTreeObserver().dispatchOnGlobalLayout();
+        Choreographer.getInstance().postFrameCallback(this);
+      }
+    });
+  }
+
+  /**
+   * Layout all children properly
+   */
+  public void manuallyLayoutChildren(View view) {
+      // propWidth and propHeight coming from react-native props
+      int width = propWidth;
+      int height = propHeight;
+
+      view.measure(
+              View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
+              View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY));
+
+      view.layout(0, 0, width, height);
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 4. Register the `ViewManager`
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin title="MyPackage.kt"
+// replace with your package
+package com.mypackage
+
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+
+class MyPackage : ReactPackage {
+  ...
+  override fun createViewManagers(
+      reactContext: ReactApplicationContext
+  ) = listOf(MyViewManager(reactContext))
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java title="MyPackage.java"
+// replace with your package
+package com.mypackage;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.Arrays;
+import java.util.List;
+
+public class MyPackage implements ReactPackage {
+
+   @Override
+   public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
+       return Arrays.<ViewManager>asList(
+            new MyViewManager(reactContext)
+       );
+   }
+
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 5. Register the `Package`
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin title="MainApplication.kt"
+override fun getPackages(): List<ReactPackage> =
+    PackageList(this).packages.apply {
+        // Packages that cannot be autolinked yet can be added manually here, for example:
+        // add(MyReactNativePackage())
+        add(MyAppPackage())
+    }
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java title="MainApplication.java"
+@Override
+protected List<ReactPackage> getPackages() {
+    List<ReactPackage> packages = new PackageList(this).getPackages();
+    // Packages that cannot be autolinked yet can be added manually here, for example:
+    // packages.add(new MyReactNativePackage());
+    packages.add(new MyAppPackage());
+    return packages;
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 6. Implement the JavaScript module
+
+I. Start with custom View manager:
+
+```tsx title="MyViewManager.tsx"
+import {requireNativeComponent} from 'react-native';
+
+export const MyViewManager =
+  requireNativeComponent('MyViewManager');
+```
+
+II. Then implement custom View calling the `create` method:
+
+```tsx title="MyView.tsx"
+import {useEffect, useRef} from 'react';
+import {
+  PixelRatio,
+  UIManager,
+  findNodeHandle,
+} from 'react-native';
+
+import {MyViewManager} from './my-view-manager';
+
+const createFragment = viewId =>
+  UIManager.dispatchViewManagerCommand(
+    viewId,
+    // we are calling the 'create' command
+    UIManager.MyViewManager.Commands.create.toString(),
+    [viewId],
+  );
+
+export const MyView = () => {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const viewId = findNodeHandle(ref.current);
+    createFragment(viewId);
+  }, []);
+
+  return (
+    <MyViewManager
+      style={{
+        // converts dpi to px, provide desired height
+        height: PixelRatio.getPixelSizeForLayoutSize(200),
+        // converts dpi to px, provide desired width
+        width: PixelRatio.getPixelSizeForLayoutSize(200),
+      }}
+      ref={ref}
+    />
+  );
+};
+```
+
+If you want to expose property setters using `@ReactProp` (or `@ReactPropGroup`) annotation see the [ImageView example](#imageview-example) above.
diff --git a/website/versioned_docs/version-0.82/legacy/native-modules-android.md b/website/versioned_docs/version-0.82/legacy/native-modules-android.md
index 82fe222f628..cec5857a441 100644
--- a/website/versioned_docs/version-0.82/legacy/native-modules-android.md
+++ b/website/versioned_docs/version-0.82/legacy/native-modules-android.md
@@ -315,7 +315,6 @@ At this point, you have set up the basic scaffolding for your native module in A
 Find a place in your application where you would like to add a call to the native module’s `createCalendarEvent()` method. Below is an example of a component, `NewModuleButton` you can add in your app. You can invoke the native module inside `NewModuleButton`'s `onPress()` function.
 
 ```tsx
-import React from 'react';
 import {NativeModules, Button} from 'react-native';
 
 const NewModuleButton = () => {
diff --git a/website/versioned_docs/version-0.82/legacy/native-modules-ios.md b/website/versioned_docs/version-0.82/legacy/native-modules-ios.md
index 6c33c64ec75..d3239e16a90 100644
--- a/website/versioned_docs/version-0.82/legacy/native-modules-ios.md
+++ b/website/versioned_docs/version-0.82/legacy/native-modules-ios.md
@@ -141,7 +141,6 @@ At this point you have set up the basic scaffolding for your native module in iO
 Find a place in your application where you would like to add a call to the native module’s `createCalendarEvent()` method. Below is an example of a component, `NewModuleButton` you can add in your app. You can invoke the native module inside `NewModuleButton`'s `onPress()` function.
 
 ```tsx
-import React from 'react';
 import {Button} from 'react-native';
 
 const NewModuleButton = () => {
diff --git a/website/versioned_docs/version-0.82/linking.md b/website/versioned_docs/version-0.82/linking.md
index ff9c1e1121e..18875244905 100644
--- a/website/versioned_docs/version-0.82/linking.md
+++ b/website/versioned_docs/version-0.82/linking.md
@@ -1,688 +1,688 @@
----
-id: linking
-title: Linking
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-`Linking` gives you a general interface to interact with both incoming and outgoing app links.
-
-Every Link (URL) has a URL Scheme, some websites are prefixed with `https://` or `http://` and the `http` is the URL Scheme. Let's call it scheme for short.
-
-In addition to `https`, you're likely also familiar with the `mailto` scheme. When you open a link with the mailto scheme, your operating system will open an installed mail application. Similarly, there are schemes for making phone calls and sending SMS. Read more about [built-in URL](#built-in-url-schemes) schemes below.
-
-Like using the mailto scheme, it's possible to link to other applications by using custom url schemes. For example, when you get a **Magic Link** email from Slack, the **Launch Slack** button is an anchor tag with an href that looks something like: `slack://secret/magic-login/other-secret`. Like with Slack, you can tell the operating system that you want to handle a custom scheme. When the Slack app opens, it receives the URL that was used to open it. This is often referred to as deep linking. Read more about how to [get the deep link](#get-the-deep-link) into your app.
-
-A custom URL scheme isn't the only way to open your application on mobile. For example, if you want to email someone a link to be opened on mobile, using a custom URL scheme isn't ideal because the user might open the email on a desktop, where the link wouldn't work. Instead, you should use standard `https` links, such as `https://www.myapp.io/records/1234546`. On mobile, these links can be configured to open your app. On Android, this feature is called **Deep Links**, while on iOS, it is known as **Universal Links**.
-
-### Built-in URL Schemes
-
-As mentioned in the introduction, there are some URL schemes for core functionality that exist on every platform. The following is a non-exhaustive list, but covers the most commonly used schemes.
-
-| Scheme           | Description                                | iOS | Android |
-| ---------------- | ------------------------------------------ | --- | ------- |
-| `mailto`         | Open mail app, eg: mailto: hello@world.dev | ✅  | ✅      |
-| `tel`            | Open phone app, eg: tel:+123456789         | ✅  | ✅      |
-| `sms`            | Open SMS app, eg: sms:+123456789           | ✅  | ✅      |
-| `https` / `http` | Open web browser app, eg: https://expo.dev | ✅  | ✅      |
-
-### Enabling Deep Links
-
-<div className="banner-native-code-required">
-  <h3>Projects with Native Code Only</h3>
-  <p>The following section only applies to projects with native code exposed. If you are using the managed Expo workflow, see the guide on <a href="https://docs.expo.dev/guides/linking/">Linking</a> in the Expo documentation for the appropriate alternative.</p>
-</div>
-
-If you want to enable deep links in your app, please read the below guide:
-
-<Tabs groupId="syntax" queryString defaultValue={constants.defaultPlatform} values={constants.platforms}>
-<TabItem value="android">
-
-:::info
-For instructions on how to add support for deep linking on Android, refer to [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](https://developer.android.com/training/app-indexing/deep-linking.html#adding-filters).
-:::
-
-If you wish to receive the intent in an existing instance of MainActivity, you may set the `launchMode` of MainActivity to `singleTask` in `AndroidManifest.xml`. See [`<activity>`](https://developer.android.com/guide/topics/manifest/activity-element.html) documentation for more information.
-
-```xml
-<activity
-  android:name=".MainActivity"
-  android:launchMode="singleTask">
-```
-
-</TabItem>
-<TabItem value="ios">
-
-:::note
-On iOS, you'll need to add the `LinkingIOS` folder into your header search paths as described in step 3 [here](linking-libraries-ios#step-3). If you also want to listen to incoming app links during your app's execution, you'll need to add the following lines to your `*AppDelegate.m`:
-
-<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
-<TabItem value="objc">
-
-```objc title="AppDelegate.mm"
-// iOS 9.x or newer
-#import <React/RCTLinkingManager.h>
-
-- (BOOL)application:(UIApplication *)application
-   openURL:(NSURL *)url
-   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
-{
-  return [RCTLinkingManager application:application openURL:url options:options];
-}
-```
-
-If your app is using [Universal Links](https://developer.apple.com/ios/universal-links/), you'll need to add the following code as well:
-
-```objc title="AppDelegate.mm"
-- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
- restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
-{
- return [RCTLinkingManager application:application
-                  continueUserActivity:userActivity
-                    restorationHandler:restorationHandler];
-}
-```
-
-</TabItem>
-<TabItem value="swift">
-
-```swift title="AppDelegate.swift"
-func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
-  return RCTLinkingManager.application(app, open: url, options: options)
-}
-```
-
-If your app is using [Universal Links](https://developer.apple.com/ios/universal-links/), you'll need to add the following code as well:
-
-```swift title="AppDelegate.swift"
-func application(
-  _ application: UIApplication,
-  continue userActivity: NSUserActivity,
-  restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
-    return RCTLinkingManager.application(
-      application,
-      continue: userActivity,
-      restorationHandler: restorationHandler
-    )
-  }
-```
-
-</TabItem>
-</Tabs>
-
-:::
-
-</TabItem>
-</Tabs>
-
-### Handling Deep Links
-
-There are two ways to handle URLs that open your app.
-
-#### 1. If the app is already open, the app is foregrounded and a Linking 'url' event is fired
-
-You can handle these events with `Linking.addEventListener('url', callback)` - it calls `callback({url})` with the linked URL
-
-#### 2. If the app is not already open, it is opened and the url is passed in as the initialURL
-
-You can handle these events with `Linking.getInitialURL()` - it returns a Promise that resolves to the URL, if there is one.
-
----
-
-## Example
-
-### Open Links and Deep Links (Universal Links)
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useCallback} from 'react';
-import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
-
-const supportedURL = 'https://google.com';
-
-const unsupportedURL = 'slack://open?team=123456';
-
-const OpenURLButton = ({url, children}) => {
-  const handlePress = useCallback(async () => {
-    // Checking if the link is supported for links with custom URL scheme.
-    const supported = await Linking.canOpenURL(url);
-
-    if (supported) {
-      // Opening the link with some app, if the URL scheme is "http" the web link should be opened
-      // by some browser in the mobile
-      await Linking.openURL(url);
-    } else {
-      Alert.alert(`Don't know how to open this URL: ${url}`);
-    }
-  }, [url]);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <OpenURLButton url={supportedURL}>Open Supported URL</OpenURLButton>
-      <OpenURLButton url={unsupportedURL}>Open Unsupported URL</OpenURLButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useCallback} from 'react';
-import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
-
-const supportedURL = 'https://google.com';
-
-const unsupportedURL = 'slack://open?team=123456';
-
-type OpenURLButtonProps = {
-  url: string;
-  children: string;
-};
-
-const OpenURLButton = ({url, children}: OpenURLButtonProps) => {
-  const handlePress = useCallback(async () => {
-    // Checking if the link is supported for links with custom URL scheme.
-    const supported = await Linking.canOpenURL(url);
-
-    if (supported) {
-      // Opening the link with some app, if the URL scheme is "http" the web link should be opened
-      // by some browser in the mobile
-      await Linking.openURL(url);
-    } else {
-      Alert.alert(`Don't know how to open this URL: ${url}`);
-    }
-  }, [url]);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <OpenURLButton url={supportedURL}>Open Supported URL</OpenURLButton>
-      <OpenURLButton url={unsupportedURL}>Open Unsupported URL</OpenURLButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### Open Custom Settings
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useCallback} from 'react';
-import {Button, Linking, StyleSheet, View} from 'react-native';
-
-const OpenSettingsButton = ({children}) => {
-  const handlePress = useCallback(async () => {
-    // Open the custom settings if the app has one
-    await Linking.openSettings();
-  }, []);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <OpenSettingsButton>Open Settings</OpenSettingsButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useCallback} from 'react';
-import {Button, Linking, StyleSheet, View} from 'react-native';
-
-type OpenSettingsButtonProps = {
-  children: string;
-};
-
-const OpenSettingsButton = ({children}: OpenSettingsButtonProps) => {
-  const handlePress = useCallback(async () => {
-    // Open the custom settings if the app has one
-    await Linking.openSettings();
-  }, []);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <OpenSettingsButton>Open Settings</OpenSettingsButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### Get the Deep Link
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useState, useEffect} from 'react';
-import {Linking, StyleSheet, Text, View} from 'react-native';
-
-const useInitialURL = () => {
-  const [url, setUrl] = useState(null);
-  const [processing, setProcessing] = useState(true);
-
-  useEffect(() => {
-    const getUrlAsync = async () => {
-      // Get the deep link used to open the app
-      const initialUrl = await Linking.getInitialURL();
-
-      // The setTimeout is just for testing purpose
-      setTimeout(() => {
-        setUrl(initialUrl);
-        setProcessing(false);
-      }, 1000);
-    };
-
-    getUrlAsync();
-  }, []);
-
-  return {url, processing};
-};
-
-const App = () => {
-  const {url: initialUrl, processing} = useInitialURL();
-
-  return (
-    <View style={styles.container}>
-      <Text>
-        {processing
-          ? 'Processing the initial url from a deep link'
-          : `The deep link is: ${initialUrl || 'None'}`}
-      </Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useState, useEffect} from 'react';
-import {Linking, StyleSheet, Text, View} from 'react-native';
-
-const useInitialURL = () => {
-  const [url, setUrl] = useState<string | null>(null);
-  const [processing, setProcessing] = useState(true);
-
-  useEffect(() => {
-    const getUrlAsync = async () => {
-      // Get the deep link used to open the app
-      const initialUrl = await Linking.getInitialURL();
-
-      // The setTimeout is just for testing purpose
-      setTimeout(() => {
-        setUrl(initialUrl);
-        setProcessing(false);
-      }, 1000);
-    };
-
-    getUrlAsync();
-  }, []);
-
-  return {url, processing};
-};
-
-const App = () => {
-  const {url: initialUrl, processing} = useInitialURL();
-
-  return (
-    <View style={styles.container}>
-      <Text>
-        {processing
-          ? 'Processing the initial url from a deep link'
-          : `The deep link is: ${initialUrl || 'None'}`}
-      </Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### Send Intents (Android)
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=android&ext=js
-import React, {useCallback} from 'react';
-import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
-
-const SendIntentButton = ({action, extras, children}) => {
-  const handlePress = useCallback(async () => {
-    try {
-      await Linking.sendIntent(action, extras);
-    } catch (e) {
-      Alert.alert(e.message);
-    }
-  }, [action, extras]);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <SendIntentButton action="android.intent.action.POWER_USAGE_SUMMARY">
-        Power Usage Summary
-      </SendIntentButton>
-      <SendIntentButton
-        action="android.settings.APP_NOTIFICATION_SETTINGS"
-        extras={[
-          {
-            key: 'android.provider.extra.APP_PACKAGE',
-            value: 'com.facebook.katana',
-          },
-        ]}>
-        App Notification Settings
-      </SendIntentButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Linking%20Example&ext=tsx
-import React, {useCallback} from 'react';
-import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
-
-type SendIntentButtonProps = {
-  action: string;
-  children: string;
-  extras?: Array<{
-    key: string;
-    value: string | number | boolean;
-  }>;
-};
-
-const SendIntentButton = ({
-  action,
-  extras,
-  children,
-}: SendIntentButtonProps) => {
-  const handlePress = useCallback(async () => {
-    try {
-      await Linking.sendIntent(action, extras);
-    } catch (e: any) {
-      Alert.alert(e.message);
-    }
-  }, [action, extras]);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <SendIntentButton action="android.intent.action.POWER_USAGE_SUMMARY">
-        Power Usage Summary
-      </SendIntentButton>
-      <SendIntentButton
-        action="android.settings.APP_NOTIFICATION_SETTINGS"
-        extras={[
-          {
-            key: 'android.provider.extra.APP_PACKAGE',
-            value: 'com.facebook.katana',
-          },
-        ]}>
-        App Notification Settings
-      </SendIntentButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-# Reference
-
-## Methods
-
-### `addEventListener()`
-
-```tsx
-static addEventListener(
-  type: 'url',
-  handler: (event: {url: string}) => void,
-): EmitterSubscription;
-```
-
-Add a handler to Linking changes by listening to the `url` event type and providing the handler.
-
----
-
-### `canOpenURL()`
-
-```tsx
-static canOpenURL(url: string): Promise<boolean>;
-```
-
-Determine whether or not an installed app can handle a given URL.
-
-The method returns a `Promise` object. When it is determined whether or not the given URL can be handled, the promise is resolved and the first parameter is whether or not it can be opened.
-
-The `Promise` will reject on Android if it was impossible to check if the URL can be opened or when targeting Android 11 (SDK 30) if you didn't specify the relevant intent queries in `AndroidManifest.xml`. Similarly on iOS, the promise will reject if you didn't add the specific scheme in the `LSApplicationQueriesSchemes` key inside `Info.plist` (see bellow).
-
-**Parameters:**
-
-| Name                                                     | Type   | Description      |
-| -------------------------------------------------------- | ------ | ---------------- |
-| url <div className="label basic required">Required</div> | string | The URL to open. |
-
-:::note
-For web URLs, the protocol (`"http://"`, `"https://"`) must be set accordingly!
-:::
-
-:::warning
-This method has limitations on iOS 9+. From [the official Apple documentation](https://developer.apple.com/documentation/uikit/uiapplication/1622952-canopenurl):
-
-- If your app is linked against an earlier version of iOS but is running in iOS 9.0 or later, you can call this method up to 50 times. After reaching that limit, subsequent calls always resolve to `false`. If the user reinstalls or upgrades the app, iOS resets the limit.
-- As of iOS 9, your app also needs to provide the `LSApplicationQueriesSchemes` key inside `Info.plist` or `canOpenURL()` will always resolve to `false`.
-  :::
-
-:::info
-When targeting Android 11 (SDK 30) you must specify the intents for the schemes you want to handle in `AndroidManifest.xml`. A list of common intents can be found [here](https://developer.android.com/guide/components/intents-common).
-
-For example to handle `https` schemes the following needs to be added to your manifest:
-
-```
-<manifest ...>
-  <queries>
-    <intent>
-      <action android:name="android.intent.action.VIEW" />
-      <data android:scheme="https"/>
-    </intent>
-  </queries>
-</manifest>
-```
-
-:::
-
----
-
-### `getInitialURL()`
-
-```tsx
-static getInitialURL(): Promise<string | null>;
-```
-
-If the app launch was triggered by an app link, it will give the link url, otherwise it will give `null`.
-
-:::info
-To support deep linking on Android, refer https://developer.android.com/training/app-indexing/deep-linking.html#handling-intents.
-:::
-
-:::tip
-`getInitialURL` may return `null` when Remote JS Debugging is active. Disable the debugger to ensure it gets passed.
-:::
-
----
-
-### `openSettings()`
-
-```tsx
-static openSettings(): Promise<void>;
-```
-
-Open the Settings app and displays the app’s custom settings, if it has any.
-
----
-
-### `openURL()`
-
-```tsx
-static openURL(url: string): Promise<any>;
-```
-
-Try to open the given `url` with any of the installed apps.
-
-You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386" on Android or "https://maps.apple.com/?ll=37.484847,-122.148386" on iOS), a contact, or any other URL that can be opened with the installed apps.
-
-The method returns a `Promise` object. If the user confirms the open dialog or the url automatically opens, the promise is resolved. If the user cancels the open dialog or there are no registered applications for the url, the promise is rejected.
-
-**Parameters:**
-
-| Name                                                     | Type   | Description      |
-| -------------------------------------------------------- | ------ | ---------------- |
-| url <div className="label basic required">Required</div> | string | The URL to open. |
-
-:::note
-This method will fail if the system doesn't know how to open the specified URL. If you're passing in a non-http(s) URL, it's best to check `canOpenURL()` first. For web URLs, the protocol (`"http://"`, `"https://"`) must be set accordingly!
-:::
-
-:::warning
-This method may behave differently in a simulator e.g. `"tel:"` links are not able to be handled in the iOS simulator as there's no access to the dialer app.
-:::
-
----
-
-### `sendIntent()` <div className="label android">Android</div>
-
-```tsx
-static sendIntent(
-  action: string,
-  extras?: Array<{key: string; value: string | number | boolean}>,
-): Promise<void>;
-```
-
-Launch an Android intent with extras.
-
-**Parameters:**
-
-| Name                                                        | Type                                                       |
-| ----------------------------------------------------------- | ---------------------------------------------------------- |
-| action <div className="label basic required">Required</div> | string                                                     |
-| extras                                                      | `Array<{key: string, value: string ｜ number ｜ boolean}>` |
+---
+id: linking
+title: Linking
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+`Linking` gives you a general interface to interact with both incoming and outgoing app links.
+
+Every Link (URL) has a URL Scheme, some websites are prefixed with `https://` or `http://` and the `http` is the URL Scheme. Let's call it scheme for short.
+
+In addition to `https`, you're likely also familiar with the `mailto` scheme. When you open a link with the mailto scheme, your operating system will open an installed mail application. Similarly, there are schemes for making phone calls and sending SMS. Read more about [built-in URL](#built-in-url-schemes) schemes below.
+
+Like using the mailto scheme, it's possible to link to other applications by using custom url schemes. For example, when you get a **Magic Link** email from Slack, the **Launch Slack** button is an anchor tag with an href that looks something like: `slack://secret/magic-login/other-secret`. Like with Slack, you can tell the operating system that you want to handle a custom scheme. When the Slack app opens, it receives the URL that was used to open it. This is often referred to as deep linking. Read more about how to [get the deep link](#get-the-deep-link) into your app.
+
+A custom URL scheme isn't the only way to open your application on mobile. For example, if you want to email someone a link to be opened on mobile, using a custom URL scheme isn't ideal because the user might open the email on a desktop, where the link wouldn't work. Instead, you should use standard `https` links, such as `https://www.myapp.io/records/1234546`. On mobile, these links can be configured to open your app. On Android, this feature is called **Deep Links**, while on iOS, it is known as **Universal Links**.
+
+### Built-in URL Schemes
+
+As mentioned in the introduction, there are some URL schemes for core functionality that exist on every platform. The following is a non-exhaustive list, but covers the most commonly used schemes.
+
+| Scheme           | Description                                | iOS | Android |
+| ---------------- | ------------------------------------------ | --- | ------- |
+| `mailto`         | Open mail app, eg: mailto: hello@world.dev | ✅  | ✅      |
+| `tel`            | Open phone app, eg: tel:+123456789         | ✅  | ✅      |
+| `sms`            | Open SMS app, eg: sms:+123456789           | ✅  | ✅      |
+| `https` / `http` | Open web browser app, eg: https://expo.dev | ✅  | ✅      |
+
+### Enabling Deep Links
+
+<div className="banner-native-code-required">
+  <h3>Projects with Native Code Only</h3>
+  <p>The following section only applies to projects with native code exposed. If you are using the managed Expo workflow, see the guide on <a href="https://docs.expo.dev/guides/linking/">Linking</a> in the Expo documentation for the appropriate alternative.</p>
+</div>
+
+If you want to enable deep links in your app, please read the below guide:
+
+<Tabs groupId="syntax" queryString defaultValue={constants.defaultPlatform} values={constants.platforms}>
+<TabItem value="android">
+
+:::info
+For instructions on how to add support for deep linking on Android, refer to [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](https://developer.android.com/training/app-indexing/deep-linking.html#adding-filters).
+:::
+
+If you wish to receive the intent in an existing instance of MainActivity, you may set the `launchMode` of MainActivity to `singleTask` in `AndroidManifest.xml`. See [`<activity>`](https://developer.android.com/guide/topics/manifest/activity-element.html) documentation for more information.
+
+```xml
+<activity
+  android:name=".MainActivity"
+  android:launchMode="singleTask">
+```
+
+</TabItem>
+<TabItem value="ios">
+
+:::note
+On iOS, you'll need to add the `LinkingIOS` folder into your header search paths as described in step 3 [here](linking-libraries-ios#step-3). If you also want to listen to incoming app links during your app's execution, you'll need to add the following lines to your `*AppDelegate.m`:
+
+<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
+<TabItem value="objc">
+
+```objc title="AppDelegate.mm"
+// iOS 9.x or newer
+#import <React/RCTLinkingManager.h>
+
+- (BOOL)application:(UIApplication *)application
+   openURL:(NSURL *)url
+   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
+{
+  return [RCTLinkingManager application:application openURL:url options:options];
+}
+```
+
+If your app is using [Universal Links](https://developer.apple.com/ios/universal-links/), you'll need to add the following code as well:
+
+```objc title="AppDelegate.mm"
+- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
+ restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
+{
+ return [RCTLinkingManager application:application
+                  continueUserActivity:userActivity
+                    restorationHandler:restorationHandler];
+}
+```
+
+</TabItem>
+<TabItem value="swift">
+
+```swift title="AppDelegate.swift"
+func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
+  return RCTLinkingManager.application(app, open: url, options: options)
+}
+```
+
+If your app is using [Universal Links](https://developer.apple.com/ios/universal-links/), you'll need to add the following code as well:
+
+```swift title="AppDelegate.swift"
+func application(
+  _ application: UIApplication,
+  continue userActivity: NSUserActivity,
+  restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
+    return RCTLinkingManager.application(
+      application,
+      continue: userActivity,
+      restorationHandler: restorationHandler
+    )
+  }
+```
+
+</TabItem>
+</Tabs>
+
+:::
+
+</TabItem>
+</Tabs>
+
+### Handling Deep Links
+
+There are two ways to handle URLs that open your app.
+
+#### 1. If the app is already open, the app is foregrounded and a Linking 'url' event is fired
+
+You can handle these events with `Linking.addEventListener('url', callback)` - it calls `callback({url})` with the linked URL
+
+#### 2. If the app is not already open, it is opened and the url is passed in as the initialURL
+
+You can handle these events with `Linking.getInitialURL()` - it returns a Promise that resolves to the URL, if there is one.
+
+---
+
+## Example
+
+### Open Links and Deep Links (Universal Links)
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
+import {useCallback} from 'react';
+import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
+
+const supportedURL = 'https://google.com';
+
+const unsupportedURL = 'slack://open?team=123456';
+
+const OpenURLButton = ({url, children}) => {
+  const handlePress = useCallback(async () => {
+    // Checking if the link is supported for links with custom URL scheme.
+    const supported = await Linking.canOpenURL(url);
+
+    if (supported) {
+      // Opening the link with some app, if the URL scheme is "http" the web link should be opened
+      // by some browser in the mobile
+      await Linking.openURL(url);
+    } else {
+      Alert.alert(`Don't know how to open this URL: ${url}`);
+    }
+  }, [url]);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <OpenURLButton url={supportedURL}>Open Supported URL</OpenURLButton>
+      <OpenURLButton url={unsupportedURL}>Open Unsupported URL</OpenURLButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
+import {useCallback} from 'react';
+import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
+
+const supportedURL = 'https://google.com';
+
+const unsupportedURL = 'slack://open?team=123456';
+
+type OpenURLButtonProps = {
+  url: string;
+  children: string;
+};
+
+const OpenURLButton = ({url, children}: OpenURLButtonProps) => {
+  const handlePress = useCallback(async () => {
+    // Checking if the link is supported for links with custom URL scheme.
+    const supported = await Linking.canOpenURL(url);
+
+    if (supported) {
+      // Opening the link with some app, if the URL scheme is "http" the web link should be opened
+      // by some browser in the mobile
+      await Linking.openURL(url);
+    } else {
+      Alert.alert(`Don't know how to open this URL: ${url}`);
+    }
+  }, [url]);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <OpenURLButton url={supportedURL}>Open Supported URL</OpenURLButton>
+      <OpenURLButton url={unsupportedURL}>Open Unsupported URL</OpenURLButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### Open Custom Settings
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
+import {useCallback} from 'react';
+import {Button, Linking, StyleSheet, View} from 'react-native';
+
+const OpenSettingsButton = ({children}) => {
+  const handlePress = useCallback(async () => {
+    // Open the custom settings if the app has one
+    await Linking.openSettings();
+  }, []);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <OpenSettingsButton>Open Settings</OpenSettingsButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
+import {useCallback} from 'react';
+import {Button, Linking, StyleSheet, View} from 'react-native';
+
+type OpenSettingsButtonProps = {
+  children: string;
+};
+
+const OpenSettingsButton = ({children}: OpenSettingsButtonProps) => {
+  const handlePress = useCallback(async () => {
+    // Open the custom settings if the app has one
+    await Linking.openSettings();
+  }, []);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <OpenSettingsButton>Open Settings</OpenSettingsButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### Get the Deep Link
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
+import {useState, useEffect} from 'react';
+import {Linking, StyleSheet, Text, View} from 'react-native';
+
+const useInitialURL = () => {
+  const [url, setUrl] = useState(null);
+  const [processing, setProcessing] = useState(true);
+
+  useEffect(() => {
+    const getUrlAsync = async () => {
+      // Get the deep link used to open the app
+      const initialUrl = await Linking.getInitialURL();
+
+      // The setTimeout is just for testing purpose
+      setTimeout(() => {
+        setUrl(initialUrl);
+        setProcessing(false);
+      }, 1000);
+    };
+
+    getUrlAsync();
+  }, []);
+
+  return {url, processing};
+};
+
+const App = () => {
+  const {url: initialUrl, processing} = useInitialURL();
+
+  return (
+    <View style={styles.container}>
+      <Text>
+        {processing
+          ? 'Processing the initial url from a deep link'
+          : `The deep link is: ${initialUrl || 'None'}`}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
+import {useState, useEffect} from 'react';
+import {Linking, StyleSheet, Text, View} from 'react-native';
+
+const useInitialURL = () => {
+  const [url, setUrl] = useState<string | null>(null);
+  const [processing, setProcessing] = useState(true);
+
+  useEffect(() => {
+    const getUrlAsync = async () => {
+      // Get the deep link used to open the app
+      const initialUrl = await Linking.getInitialURL();
+
+      // The setTimeout is just for testing purpose
+      setTimeout(() => {
+        setUrl(initialUrl);
+        setProcessing(false);
+      }, 1000);
+    };
+
+    getUrlAsync();
+  }, []);
+
+  return {url, processing};
+};
+
+const App = () => {
+  const {url: initialUrl, processing} = useInitialURL();
+
+  return (
+    <View style={styles.container}>
+      <Text>
+        {processing
+          ? 'Processing the initial url from a deep link'
+          : `The deep link is: ${initialUrl || 'None'}`}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### Send Intents (Android)
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=android&ext=js
+import {useCallback} from 'react';
+import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
+
+const SendIntentButton = ({action, extras, children}) => {
+  const handlePress = useCallback(async () => {
+    try {
+      await Linking.sendIntent(action, extras);
+    } catch (e) {
+      Alert.alert(e.message);
+    }
+  }, [action, extras]);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <SendIntentButton action="android.intent.action.POWER_USAGE_SUMMARY">
+        Power Usage Summary
+      </SendIntentButton>
+      <SendIntentButton
+        action="android.settings.APP_NOTIFICATION_SETTINGS"
+        extras={[
+          {
+            key: 'android.provider.extra.APP_PACKAGE',
+            value: 'com.facebook.katana',
+          },
+        ]}>
+        App Notification Settings
+      </SendIntentButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Linking%20Example&ext=tsx
+import {useCallback} from 'react';
+import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
+
+type SendIntentButtonProps = {
+  action: string;
+  children: string;
+  extras?: Array<{
+    key: string;
+    value: string | number | boolean;
+  }>;
+};
+
+const SendIntentButton = ({
+  action,
+  extras,
+  children,
+}: SendIntentButtonProps) => {
+  const handlePress = useCallback(async () => {
+    try {
+      await Linking.sendIntent(action, extras);
+    } catch (e: any) {
+      Alert.alert(e.message);
+    }
+  }, [action, extras]);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <SendIntentButton action="android.intent.action.POWER_USAGE_SUMMARY">
+        Power Usage Summary
+      </SendIntentButton>
+      <SendIntentButton
+        action="android.settings.APP_NOTIFICATION_SETTINGS"
+        extras={[
+          {
+            key: 'android.provider.extra.APP_PACKAGE',
+            value: 'com.facebook.katana',
+          },
+        ]}>
+        App Notification Settings
+      </SendIntentButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+# Reference
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+  type: 'url',
+  handler: (event: {url: string}) => void,
+): EmitterSubscription;
+```
+
+Add a handler to Linking changes by listening to the `url` event type and providing the handler.
+
+---
+
+### `canOpenURL()`
+
+```tsx
+static canOpenURL(url: string): Promise<boolean>;
+```
+
+Determine whether or not an installed app can handle a given URL.
+
+The method returns a `Promise` object. When it is determined whether or not the given URL can be handled, the promise is resolved and the first parameter is whether or not it can be opened.
+
+The `Promise` will reject on Android if it was impossible to check if the URL can be opened or when targeting Android 11 (SDK 30) if you didn't specify the relevant intent queries in `AndroidManifest.xml`. Similarly on iOS, the promise will reject if you didn't add the specific scheme in the `LSApplicationQueriesSchemes` key inside `Info.plist` (see bellow).
+
+**Parameters:**
+
+| Name                                                     | Type   | Description      |
+| -------------------------------------------------------- | ------ | ---------------- |
+| url <div className="label basic required">Required</div> | string | The URL to open. |
+
+:::note
+For web URLs, the protocol (`"http://"`, `"https://"`) must be set accordingly!
+:::
+
+:::warning
+This method has limitations on iOS 9+. From [the official Apple documentation](https://developer.apple.com/documentation/uikit/uiapplication/1622952-canopenurl):
+
+- If your app is linked against an earlier version of iOS but is running in iOS 9.0 or later, you can call this method up to 50 times. After reaching that limit, subsequent calls always resolve to `false`. If the user reinstalls or upgrades the app, iOS resets the limit.
+- As of iOS 9, your app also needs to provide the `LSApplicationQueriesSchemes` key inside `Info.plist` or `canOpenURL()` will always resolve to `false`.
+  :::
+
+:::info
+When targeting Android 11 (SDK 30) you must specify the intents for the schemes you want to handle in `AndroidManifest.xml`. A list of common intents can be found [here](https://developer.android.com/guide/components/intents-common).
+
+For example to handle `https` schemes the following needs to be added to your manifest:
+
+```
+<manifest ...>
+  <queries>
+    <intent>
+      <action android:name="android.intent.action.VIEW" />
+      <data android:scheme="https"/>
+    </intent>
+  </queries>
+</manifest>
+```
+
+:::
+
+---
+
+### `getInitialURL()`
+
+```tsx
+static getInitialURL(): Promise<string | null>;
+```
+
+If the app launch was triggered by an app link, it will give the link url, otherwise it will give `null`.
+
+:::info
+To support deep linking on Android, refer https://developer.android.com/training/app-indexing/deep-linking.html#handling-intents.
+:::
+
+:::tip
+`getInitialURL` may return `null` when Remote JS Debugging is active. Disable the debugger to ensure it gets passed.
+:::
+
+---
+
+### `openSettings()`
+
+```tsx
+static openSettings(): Promise<void>;
+```
+
+Open the Settings app and displays the app’s custom settings, if it has any.
+
+---
+
+### `openURL()`
+
+```tsx
+static openURL(url: string): Promise<any>;
+```
+
+Try to open the given `url` with any of the installed apps.
+
+You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386" on Android or "https://maps.apple.com/?ll=37.484847,-122.148386" on iOS), a contact, or any other URL that can be opened with the installed apps.
+
+The method returns a `Promise` object. If the user confirms the open dialog or the url automatically opens, the promise is resolved. If the user cancels the open dialog or there are no registered applications for the url, the promise is rejected.
+
+**Parameters:**
+
+| Name                                                     | Type   | Description      |
+| -------------------------------------------------------- | ------ | ---------------- |
+| url <div className="label basic required">Required</div> | string | The URL to open. |
+
+:::note
+This method will fail if the system doesn't know how to open the specified URL. If you're passing in a non-http(s) URL, it's best to check `canOpenURL()` first. For web URLs, the protocol (`"http://"`, `"https://"`) must be set accordingly!
+:::
+
+:::warning
+This method may behave differently in a simulator e.g. `"tel:"` links are not able to be handled in the iOS simulator as there's no access to the dialer app.
+:::
+
+---
+
+### `sendIntent()` <div className="label android">Android</div>
+
+```tsx
+static sendIntent(
+  action: string,
+  extras?: Array<{key: string; value: string | number | boolean}>,
+): Promise<void>;
+```
+
+Launch an Android intent with extras.
+
+**Parameters:**
+
+| Name                                                        | Type                                                       |
+| ----------------------------------------------------------- | ---------------------------------------------------------- |
+| action <div className="label basic required">Required</div> | string                                                     |
+| extras                                                      | `Array<{key: string, value: string ｜ number ｜ boolean}>` |
diff --git a/website/versioned_docs/version-0.82/modal.md b/website/versioned_docs/version-0.82/modal.md
index 8e7bb6409b1..90d57efd9fa 100644
--- a/website/versioned_docs/version-0.82/modal.md
+++ b/website/versioned_docs/version-0.82/modal.md
@@ -1,276 +1,276 @@
----
-id: modal
-title: Modal
----
-
-The Modal component is a basic way to present content above an enclosing view.
-
-## Example
-
-```SnackPlayer name=Modal&supportedPlatforms=android,ios
-import React, {useState} from 'react';
-import {Alert, Modal, StyleSheet, Text, Pressable, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [modalVisible, setModalVisible] = useState(false);
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.centeredView}>
-        <Modal
-          animationType="slide"
-          transparent={true}
-          visible={modalVisible}
-          onRequestClose={() => {
-            Alert.alert('Modal has been closed.');
-            setModalVisible(!modalVisible);
-          }}>
-          <View style={styles.centeredView}>
-            <View style={styles.modalView}>
-              <Text style={styles.modalText}>Hello World!</Text>
-              <Pressable
-                style={[styles.button, styles.buttonClose]}
-                onPress={() => setModalVisible(!modalVisible)}>
-                <Text style={styles.textStyle}>Hide Modal</Text>
-              </Pressable>
-            </View>
-          </View>
-        </Modal>
-        <Pressable
-          style={[styles.button, styles.buttonOpen]}
-          onPress={() => setModalVisible(true)}>
-          <Text style={styles.textStyle}>Show Modal</Text>
-        </Pressable>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  centeredView: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  modalView: {
-    margin: 20,
-    backgroundColor: 'white',
-    borderRadius: 20,
-    padding: 35,
-    alignItems: 'center',
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 4,
-    elevation: 5,
-  },
-  button: {
-    borderRadius: 20,
-    padding: 10,
-    elevation: 2,
-  },
-  buttonOpen: {
-    backgroundColor: '#F194FF',
-  },
-  buttonClose: {
-    backgroundColor: '#2196F3',
-  },
-  textStyle: {
-    color: 'white',
-    fontWeight: 'bold',
-    textAlign: 'center',
-  },
-  modalText: {
-    marginBottom: 15,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Props
-
-### [View Props](view.md#props)
-
-Inherits [View Props](view.md#props).
-
----
-
-### `animated`
-
-:::warning[Deprecated]
-Use the [`animationType`](modal.md#animationtype) prop instead.
-:::
-
----
-
-### `animationType`
-
-The `animationType` prop controls how the modal animates.
-
-Possible values:
-
-- `slide` slides in from the bottom
-- `fade` fades into view
-- `none` appears without an animation
-
-| Type                                | Default |
-| ----------------------------------- | ------- |
-| enum(`'none'`, `'slide'`, `'fade'`) | `none`  |
-
----
-
-### `backdropColor`
-
-The `backdropColor` of the modal (or background color of the modal's container.) Defaults to `white` if not provided and transparent is `false`. Ignored if `transparent` is `true`.
-
-| Type            | Default |
-| --------------- | ------- |
-| [color](colors) | white   |
-
----
-
-### `hardwareAccelerated` <div className="label android">Android</div>
-
-The `hardwareAccelerated` prop controls whether to force hardware acceleration for the underlying window.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `navigationBarTranslucent` <div className="label android">Android</div>
-
-The `navigationBarTranslucent` prop determines whether your modal should go under the system navigation bar. However, `statusBarTranslucent` also needs to be set to `true` to make navigation bar translucent.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `onDismiss` <div className="label ios">iOS</div>
-
-The `onDismiss` prop allows passing a function that will be called once the modal has been dismissed.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onOrientationChange` <div className="label ios">iOS</div>
-
-The `onOrientationChange` callback is called when the orientation changes while the modal is being displayed. The orientation provided is only 'portrait' or 'landscape'. This callback is also called on initial render, regardless of the current orientation.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `allowSwipeDismissal` <div className="label ios">iOS</div>
-
-Controls whether the modal can be dismissed by swiping down on iOS.
-This requires you to implement the `onRequestClose` prop to handle the dismissal.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `ref`
-
-A ref setter that will be assigned an [element node](element-nodes) when mounted.
-
----
-
-### `onRequestClose`
-
-The `onRequestClose` callback is called when the user taps the hardware back button on Android or the menu button on Apple TV. Because of this required prop, be aware that `BackHandler` events will not be emitted as long as the modal is open.
-On iOS, this callback is called when a Modal is being dismissed using a drag gesture when `presentationStyle` is `pageSheet` or `formSheet`. When `allowSwipeDismissal` is enabled this callback will be called after dismissing the modal.
-
-| Type                                                                                                                                                                                           |
-| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| function <div className="label basic required">Required</div><div className="label android">Android</div><div className="label tv">TV</div><hr />function <div className="label ios">iOS</div> |
-
----
-
-### `onShow`
-
-The `onShow` prop allows passing a function that will be called once the modal has been shown.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `presentationStyle` <div className="label ios">iOS</div>
-
-The `presentationStyle` prop controls how the modal appears (generally on larger devices such as iPad or plus-sized iPhones). See https://developer.apple.com/reference/uikit/uimodalpresentationstyle for details.
-
-Possible values:
-
-- `fullScreen` covers the screen completely
-- `pageSheet` covers portrait-width view centered (only on larger devices)
-- `formSheet` covers narrow-width view centered (only on larger devices)
-- `overFullScreen` covers the screen completely, but allows transparency
-
-| Type                                                                   | Default                                                                             |
-| ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
-| enum(`'fullScreen'`, `'pageSheet'`, `'formSheet'`, `'overFullScreen'`) | `fullScreen` if `transparent={false}`<hr />`overFullScreen` if `transparent={true}` |
-
----
-
-### `statusBarTranslucent` <div className="label android">Android</div>
-
-The `statusBarTranslucent` prop determines whether your modal should go under the system statusbar.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `supportedOrientations` <div className="label ios">iOS</div>
-
-The `supportedOrientations` prop allows the modal to be rotated to any of the specified orientations. On iOS, the modal is still restricted by what's specified in your app's Info.plist's UISupportedInterfaceOrientations field.
-
-:::note
-When using `presentationStyle` of `pageSheet` or `formSheet`, this property will be ignored on iOS.
-:::
-
-| Type                                                                                                           | Default        |
-| -------------------------------------------------------------------------------------------------------------- | -------------- |
-| array of enums(`'portrait'`, `'portrait-upside-down'`, `'landscape'`, `'landscape-left'`, `'landscape-right'`) | `['portrait']` |
-
----
-
-### `transparent`
-
-The `transparent` prop determines whether your modal will fill the entire view. Setting this to `true` will render the modal over a transparent background.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `visible`
-
-The `visible` prop determines whether your modal is visible.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `true`  |
+---
+id: modal
+title: Modal
+---
+
+The Modal component is a basic way to present content above an enclosing view.
+
+## Example
+
+```SnackPlayer name=Modal&supportedPlatforms=android,ios
+import {useState} from 'react';
+import {Alert, Modal, StyleSheet, Text, Pressable, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [modalVisible, setModalVisible] = useState(false);
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.centeredView}>
+        <Modal
+          animationType="slide"
+          transparent={true}
+          visible={modalVisible}
+          onRequestClose={() => {
+            Alert.alert('Modal has been closed.');
+            setModalVisible(!modalVisible);
+          }}>
+          <View style={styles.centeredView}>
+            <View style={styles.modalView}>
+              <Text style={styles.modalText}>Hello World!</Text>
+              <Pressable
+                style={[styles.button, styles.buttonClose]}
+                onPress={() => setModalVisible(!modalVisible)}>
+                <Text style={styles.textStyle}>Hide Modal</Text>
+              </Pressable>
+            </View>
+          </View>
+        </Modal>
+        <Pressable
+          style={[styles.button, styles.buttonOpen]}
+          onPress={() => setModalVisible(true)}>
+          <Text style={styles.textStyle}>Show Modal</Text>
+        </Pressable>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  centeredView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalView: {
+    margin: 20,
+    backgroundColor: 'white',
+    borderRadius: 20,
+    padding: 35,
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  button: {
+    borderRadius: 20,
+    padding: 10,
+    elevation: 2,
+  },
+  buttonOpen: {
+    backgroundColor: '#F194FF',
+  },
+  buttonClose: {
+    backgroundColor: '#2196F3',
+  },
+  textStyle: {
+    color: 'white',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  modalText: {
+    marginBottom: 15,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Props
+
+### [View Props](view.md#props)
+
+Inherits [View Props](view.md#props).
+
+---
+
+### `animated`
+
+:::warning[Deprecated]
+Use the [`animationType`](modal.md#animationtype) prop instead.
+:::
+
+---
+
+### `animationType`
+
+The `animationType` prop controls how the modal animates.
+
+Possible values:
+
+- `slide` slides in from the bottom
+- `fade` fades into view
+- `none` appears without an animation
+
+| Type                                | Default |
+| ----------------------------------- | ------- |
+| enum(`'none'`, `'slide'`, `'fade'`) | `none`  |
+
+---
+
+### `backdropColor`
+
+The `backdropColor` of the modal (or background color of the modal's container.) Defaults to `white` if not provided and transparent is `false`. Ignored if `transparent` is `true`.
+
+| Type            | Default |
+| --------------- | ------- |
+| [color](colors) | white   |
+
+---
+
+### `hardwareAccelerated` <div className="label android">Android</div>
+
+The `hardwareAccelerated` prop controls whether to force hardware acceleration for the underlying window.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `navigationBarTranslucent` <div className="label android">Android</div>
+
+The `navigationBarTranslucent` prop determines whether your modal should go under the system navigation bar. However, `statusBarTranslucent` also needs to be set to `true` to make navigation bar translucent.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `onDismiss` <div className="label ios">iOS</div>
+
+The `onDismiss` prop allows passing a function that will be called once the modal has been dismissed.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onOrientationChange` <div className="label ios">iOS</div>
+
+The `onOrientationChange` callback is called when the orientation changes while the modal is being displayed. The orientation provided is only 'portrait' or 'landscape'. This callback is also called on initial render, regardless of the current orientation.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `allowSwipeDismissal` <div className="label ios">iOS</div>
+
+Controls whether the modal can be dismissed by swiping down on iOS.
+This requires you to implement the `onRequestClose` prop to handle the dismissal.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `ref`
+
+A ref setter that will be assigned an [element node](element-nodes) when mounted.
+
+---
+
+### `onRequestClose`
+
+The `onRequestClose` callback is called when the user taps the hardware back button on Android or the menu button on Apple TV. Because of this required prop, be aware that `BackHandler` events will not be emitted as long as the modal is open.
+On iOS, this callback is called when a Modal is being dismissed using a drag gesture when `presentationStyle` is `pageSheet` or `formSheet`. When `allowSwipeDismissal` is enabled this callback will be called after dismissing the modal.
+
+| Type                                                                                                                                                                                           |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| function <div className="label basic required">Required</div><div className="label android">Android</div><div className="label tv">TV</div><hr />function <div className="label ios">iOS</div> |
+
+---
+
+### `onShow`
+
+The `onShow` prop allows passing a function that will be called once the modal has been shown.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `presentationStyle` <div className="label ios">iOS</div>
+
+The `presentationStyle` prop controls how the modal appears (generally on larger devices such as iPad or plus-sized iPhones). See https://developer.apple.com/reference/uikit/uimodalpresentationstyle for details.
+
+Possible values:
+
+- `fullScreen` covers the screen completely
+- `pageSheet` covers portrait-width view centered (only on larger devices)
+- `formSheet` covers narrow-width view centered (only on larger devices)
+- `overFullScreen` covers the screen completely, but allows transparency
+
+| Type                                                                   | Default                                                                             |
+| ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
+| enum(`'fullScreen'`, `'pageSheet'`, `'formSheet'`, `'overFullScreen'`) | `fullScreen` if `transparent={false}`<hr />`overFullScreen` if `transparent={true}` |
+
+---
+
+### `statusBarTranslucent` <div className="label android">Android</div>
+
+The `statusBarTranslucent` prop determines whether your modal should go under the system statusbar.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `supportedOrientations` <div className="label ios">iOS</div>
+
+The `supportedOrientations` prop allows the modal to be rotated to any of the specified orientations. On iOS, the modal is still restricted by what's specified in your app's Info.plist's UISupportedInterfaceOrientations field.
+
+:::note
+When using `presentationStyle` of `pageSheet` or `formSheet`, this property will be ignored on iOS.
+:::
+
+| Type                                                                                                           | Default        |
+| -------------------------------------------------------------------------------------------------------------- | -------------- |
+| array of enums(`'portrait'`, `'portrait-upside-down'`, `'landscape'`, `'landscape-left'`, `'landscape-right'`) | `['portrait']` |
+
+---
+
+### `transparent`
+
+The `transparent` prop determines whether your modal will fill the entire view. Setting this to `true` will render the modal over a transparent background.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `visible`
+
+The `visible` prop determines whether your modal is visible.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `true`  |
diff --git a/website/versioned_docs/version-0.82/navigation.md b/website/versioned_docs/version-0.82/navigation.md
index 363b48b1261..4d9586bf801 100644
--- a/website/versioned_docs/version-0.82/navigation.md
+++ b/website/versioned_docs/version-0.82/navigation.md
@@ -64,7 +64,6 @@ Now you are ready to build and run your app on the device/simulator.
 Now you can create an app with a home screen and a profile screen:
 
 ```tsx
-import * as React from 'react';
 import {createStaticNavigation} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 
diff --git a/website/versioned_docs/version-0.82/network.md b/website/versioned_docs/version-0.82/network.md
index 3cdaf0dd55b..dc9101c5912 100644
--- a/website/versioned_docs/version-0.82/network.md
+++ b/website/versioned_docs/version-0.82/network.md
@@ -1,280 +1,280 @@
----
-id: network
-title: Networking
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may need to fetch a chunk of static content from another server.
-
-## Using Fetch
-
-React Native provides the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) for your networking needs. Fetch will seem familiar if you have used `XMLHttpRequest` or other networking APIs before. You may refer to MDN's guide on [Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) for additional information.
-
-### Making requests
-
-In order to fetch content from an arbitrary URL, you can pass the URL to fetch:
-
-```ts
-fetch('https://mywebsite.com/mydata.json');
-```
-
-Fetch also takes an optional second argument that allows you to customize the HTTP request. You may want to specify additional headers, or make a POST request:
-
-```ts
-fetch('https://mywebsite.com/endpoint/', {
-  method: 'POST',
-  headers: {
-    Accept: 'application/json',
-    'Content-Type': 'application/json',
-  },
-  body: JSON.stringify({
-    firstParam: 'yourValue',
-    secondParam: 'yourOtherValue',
-  }),
-});
-```
-
-Take a look at the [Fetch Request docs](https://developer.mozilla.org/en-US/docs/Web/API/Request) for a full list of properties.
-
-### Handling the response
-
-The above examples show how you can make a request. In many cases, you will want to do something with the response.
-
-Networking is an inherently asynchronous operation. Fetch method will return a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that makes it straightforward to write code that works in an asynchronous manner:
-
-```ts
-const getMoviesFromApi = () => {
-  return fetch('https://reactnative.dev/movies.json')
-    .then(response => response.json())
-    .then(json => {
-      return json.movies;
-    })
-    .catch(error => {
-      console.error(error);
-    });
-};
-```
-
-You can also use the `async` / `await` syntax in a React Native app:
-
-```ts
-const getMoviesFromApiAsync = async () => {
-  try {
-    const response = await fetch(
-      'https://reactnative.dev/movies.json',
-    );
-    const json = await response.json();
-    return json.movies;
-  } catch (error) {
-    console.error(error);
-  }
-};
-```
-
-Don't forget to catch any errors that may be thrown by `fetch`, otherwise they will be dropped silently.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Fetch%20Example&ext=js
-import React, {useEffect, useState} from 'react';
-import {ActivityIndicator, FlatList, Text, View} from 'react-native';
-
-const App = () => {
-  const [isLoading, setLoading] = useState(true);
-  const [data, setData] = useState([]);
-
-  const getMovies = async () => {
-    try {
-      const response = await fetch('https://reactnative.dev/movies.json');
-      const json = await response.json();
-      setData(json.movies);
-    } catch (error) {
-      console.error(error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    getMovies();
-  }, []);
-
-  return (
-    <View style={{flex: 1, padding: 24}}>
-      {isLoading ? (
-        <ActivityIndicator />
-      ) : (
-        <FlatList
-          data={data}
-          keyExtractor={({id}) => id}
-          renderItem={({item}) => (
-            <Text>
-              {item.title}, {item.releaseYear}
-            </Text>
-          )}
-        />
-      )}
-    </View>
-  );
-};
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Fetch%20Example&ext=tsx
-import React, {useEffect, useState} from 'react';
-import {ActivityIndicator, FlatList, Text, View} from 'react-native';
-
-type Movie = {
-  id: string;
-  title: string;
-  releaseYear: string;
-};
-
-const App = () => {
-  const [isLoading, setLoading] = useState(true);
-  const [data, setData] = useState<Movie[]>([]);
-
-  const getMovies = async () => {
-    try {
-      const response = await fetch('https://reactnative.dev/movies.json');
-      const json = await response.json();
-      setData(json.movies);
-    } catch (error) {
-      console.error(error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    getMovies();
-  }, []);
-
-  return (
-    <View style={{flex: 1, padding: 24}}>
-      {isLoading ? (
-        <ActivityIndicator />
-      ) : (
-        <FlatList
-          data={data}
-          keyExtractor={({id}) => id}
-          renderItem={({item}) => (
-            <Text>
-              {item.title}, {item.releaseYear}
-            </Text>
-          )}
-        />
-      )}
-    </View>
-  );
-};
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-:::info
-By default, iOS 9.0 or later enforce App Transport Security (ATS). ATS requires any HTTP connection to use HTTPS. If you need to fetch from a cleartext URL (one that begins with `http`) you will first need to [add an ATS exception](integration-with-existing-apps.md#test-your-integration). If you know ahead of time what domains you will need access to, it is more secure to add exceptions only for those domains; if the domains are not known until runtime you can [disable ATS completely](publishing-to-app-store.md#1-enable-app-transport-security). Note however that from January 2017, [Apple's App Store review will require reasonable justification for disabling ATS](https://forums.developer.apple.com/thread/48979). See [Apple's documentation](https://developer.apple.com/library/ios/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html#//apple_ref/doc/uid/TP40009251-SW33) for more information.
-:::
-
-:::tip
-On Android, as of API Level 28, clear text traffic is also blocked by default. This behaviour can be overridden by setting [`android:usesCleartextTraffic`](https://developer.android.com/guide/topics/manifest/application-element#usesCleartextTraffic) in the app manifest file.
-:::
-
-## Using Other Networking Libraries
-
-The [XMLHttpRequest API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) is built into React Native. This means that you can use third party libraries such as [frisbee](https://github.com/niftylettuce/frisbee) or [axios](https://github.com/axios/axios) that depend on it, or you can use the XMLHttpRequest API directly if you prefer.
-
-```ts
-const request = new XMLHttpRequest();
-request.onreadystatechange = e => {
-  if (request.readyState !== 4) {
-    return;
-  }
-
-  if (request.status === 200) {
-    console.log('success', request.responseText);
-  } else {
-    console.warn('error');
-  }
-};
-
-request.open('GET', 'https://mywebsite.com/endpoint/');
-request.send();
-```
-
-:::warning[Caution]
-The security model for XMLHttpRequest is different than on web as there is no concept of [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) in native apps.
-:::
-
-## WebSocket Support
-
-React Native also supports [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket), a protocol which provides full-duplex communication channels over a single TCP connection.
-
-```ts
-const ws = new WebSocket('ws://host.com/path');
-
-ws.onopen = () => {
-  // connection opened
-  ws.send('something'); // send a message
-};
-
-ws.onmessage = e => {
-  // a message was received
-  console.log(e.data);
-};
-
-ws.onerror = e => {
-  // an error occurred
-  console.log(e.message);
-};
-
-ws.onclose = e => {
-  // connection closed
-  console.log(e.code, e.reason);
-};
-```
-
-## Known Issues with `fetch` and cookie based authentication
-
-The following options are currently not working with `fetch`
-
-- `redirect:manual`
-- `credentials:omit`
-
-* Having same name headers on Android will result in only the latest one being present. A temporary solution can be found here: https://github.com/facebook/react-native/issues/18837#issuecomment-398779994.
-* Cookie based authentication is currently unstable. You can view some of the issues raised here: https://github.com/facebook/react-native/issues/23185
-* As a minimum on iOS, when redirected through a `302`, if a `Set-Cookie` header is present, the cookie is not set properly. Since the redirect cannot be handled manually this might cause a scenario where infinite requests occur if the redirect is the result of an expired session.
-
-## Configuring NSURLSession on iOS
-
-For some applications it may be appropriate to provide a custom `NSURLSessionConfiguration` for the underlying `NSURLSession` that is used for network requests in a React Native application running on iOS. For instance, one may need to set a custom user agent string for all network requests coming from the app or supply `NSURLSession` with an ephemeral `NSURLSessionConfiguration`. The function `RCTSetCustomNSURLSessionConfigurationProvider` allows for such customization. Remember to add the following import to the file in which `RCTSetCustomNSURLSessionConfigurationProvider` will be called:
-
-```objectivec
-#import <React/RCTHTTPRequestHandler.h>
-```
-
-`RCTSetCustomNSURLSessionConfigurationProvider` should be called early in the application life cycle such that it is readily available when needed by React, for instance:
-
-```objectivec
--(void)application:(__unused UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
-
-  // set RCTSetCustomNSURLSessionConfigurationProvider
-  RCTSetCustomNSURLSessionConfigurationProvider(^NSURLSessionConfiguration *{
-     NSURLSessionConfiguration *configuration = [NSURLSessionConfiguration defaultSessionConfiguration];
-     // configure the session
-     return configuration;
-  });
-
-  // set up React
-  _bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
-}
-```
+---
+id: network
+title: Networking
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may need to fetch a chunk of static content from another server.
+
+## Using Fetch
+
+React Native provides the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) for your networking needs. Fetch will seem familiar if you have used `XMLHttpRequest` or other networking APIs before. You may refer to MDN's guide on [Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) for additional information.
+
+### Making requests
+
+In order to fetch content from an arbitrary URL, you can pass the URL to fetch:
+
+```ts
+fetch('https://mywebsite.com/mydata.json');
+```
+
+Fetch also takes an optional second argument that allows you to customize the HTTP request. You may want to specify additional headers, or make a POST request:
+
+```ts
+fetch('https://mywebsite.com/endpoint/', {
+  method: 'POST',
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json',
+  },
+  body: JSON.stringify({
+    firstParam: 'yourValue',
+    secondParam: 'yourOtherValue',
+  }),
+});
+```
+
+Take a look at the [Fetch Request docs](https://developer.mozilla.org/en-US/docs/Web/API/Request) for a full list of properties.
+
+### Handling the response
+
+The above examples show how you can make a request. In many cases, you will want to do something with the response.
+
+Networking is an inherently asynchronous operation. Fetch method will return a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that makes it straightforward to write code that works in an asynchronous manner:
+
+```ts
+const getMoviesFromApi = () => {
+  return fetch('https://reactnative.dev/movies.json')
+    .then(response => response.json())
+    .then(json => {
+      return json.movies;
+    })
+    .catch(error => {
+      console.error(error);
+    });
+};
+```
+
+You can also use the `async` / `await` syntax in a React Native app:
+
+```ts
+const getMoviesFromApiAsync = async () => {
+  try {
+    const response = await fetch(
+      'https://reactnative.dev/movies.json',
+    );
+    const json = await response.json();
+    return json.movies;
+  } catch (error) {
+    console.error(error);
+  }
+};
+```
+
+Don't forget to catch any errors that may be thrown by `fetch`, otherwise they will be dropped silently.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Fetch%20Example&ext=js
+import {useEffect, useState} from 'react';
+import {ActivityIndicator, FlatList, Text, View} from 'react-native';
+
+const App = () => {
+  const [isLoading, setLoading] = useState(true);
+  const [data, setData] = useState([]);
+
+  const getMovies = async () => {
+    try {
+      const response = await fetch('https://reactnative.dev/movies.json');
+      const json = await response.json();
+      setData(json.movies);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    getMovies();
+  }, []);
+
+  return (
+    <View style={{flex: 1, padding: 24}}>
+      {isLoading ? (
+        <ActivityIndicator />
+      ) : (
+        <FlatList
+          data={data}
+          keyExtractor={({id}) => id}
+          renderItem={({item}) => (
+            <Text>
+              {item.title}, {item.releaseYear}
+            </Text>
+          )}
+        />
+      )}
+    </View>
+  );
+};
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Fetch%20Example&ext=tsx
+import {useEffect, useState} from 'react';
+import {ActivityIndicator, FlatList, Text, View} from 'react-native';
+
+type Movie = {
+  id: string;
+  title: string;
+  releaseYear: string;
+};
+
+const App = () => {
+  const [isLoading, setLoading] = useState(true);
+  const [data, setData] = useState<Movie[]>([]);
+
+  const getMovies = async () => {
+    try {
+      const response = await fetch('https://reactnative.dev/movies.json');
+      const json = await response.json();
+      setData(json.movies);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    getMovies();
+  }, []);
+
+  return (
+    <View style={{flex: 1, padding: 24}}>
+      {isLoading ? (
+        <ActivityIndicator />
+      ) : (
+        <FlatList
+          data={data}
+          keyExtractor={({id}) => id}
+          renderItem={({item}) => (
+            <Text>
+              {item.title}, {item.releaseYear}
+            </Text>
+          )}
+        />
+      )}
+    </View>
+  );
+};
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+:::info
+By default, iOS 9.0 or later enforce App Transport Security (ATS). ATS requires any HTTP connection to use HTTPS. If you need to fetch from a cleartext URL (one that begins with `http`) you will first need to [add an ATS exception](integration-with-existing-apps.md#test-your-integration). If you know ahead of time what domains you will need access to, it is more secure to add exceptions only for those domains; if the domains are not known until runtime you can [disable ATS completely](publishing-to-app-store.md#1-enable-app-transport-security). Note however that from January 2017, [Apple's App Store review will require reasonable justification for disabling ATS](https://forums.developer.apple.com/thread/48979). See [Apple's documentation](https://developer.apple.com/library/ios/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html#//apple_ref/doc/uid/TP40009251-SW33) for more information.
+:::
+
+:::tip
+On Android, as of API Level 28, clear text traffic is also blocked by default. This behaviour can be overridden by setting [`android:usesCleartextTraffic`](https://developer.android.com/guide/topics/manifest/application-element#usesCleartextTraffic) in the app manifest file.
+:::
+
+## Using Other Networking Libraries
+
+The [XMLHttpRequest API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) is built into React Native. This means that you can use third party libraries such as [frisbee](https://github.com/niftylettuce/frisbee) or [axios](https://github.com/axios/axios) that depend on it, or you can use the XMLHttpRequest API directly if you prefer.
+
+```ts
+const request = new XMLHttpRequest();
+request.onreadystatechange = e => {
+  if (request.readyState !== 4) {
+    return;
+  }
+
+  if (request.status === 200) {
+    console.log('success', request.responseText);
+  } else {
+    console.warn('error');
+  }
+};
+
+request.open('GET', 'https://mywebsite.com/endpoint/');
+request.send();
+```
+
+:::warning[Caution]
+The security model for XMLHttpRequest is different than on web as there is no concept of [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) in native apps.
+:::
+
+## WebSocket Support
+
+React Native also supports [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket), a protocol which provides full-duplex communication channels over a single TCP connection.
+
+```ts
+const ws = new WebSocket('ws://host.com/path');
+
+ws.onopen = () => {
+  // connection opened
+  ws.send('something'); // send a message
+};
+
+ws.onmessage = e => {
+  // a message was received
+  console.log(e.data);
+};
+
+ws.onerror = e => {
+  // an error occurred
+  console.log(e.message);
+};
+
+ws.onclose = e => {
+  // connection closed
+  console.log(e.code, e.reason);
+};
+```
+
+## Known Issues with `fetch` and cookie based authentication
+
+The following options are currently not working with `fetch`
+
+- `redirect:manual`
+- `credentials:omit`
+
+* Having same name headers on Android will result in only the latest one being present. A temporary solution can be found here: https://github.com/facebook/react-native/issues/18837#issuecomment-398779994.
+* Cookie based authentication is currently unstable. You can view some of the issues raised here: https://github.com/facebook/react-native/issues/23185
+* As a minimum on iOS, when redirected through a `302`, if a `Set-Cookie` header is present, the cookie is not set properly. Since the redirect cannot be handled manually this might cause a scenario where infinite requests occur if the redirect is the result of an expired session.
+
+## Configuring NSURLSession on iOS
+
+For some applications it may be appropriate to provide a custom `NSURLSessionConfiguration` for the underlying `NSURLSession` that is used for network requests in a React Native application running on iOS. For instance, one may need to set a custom user agent string for all network requests coming from the app or supply `NSURLSession` with an ephemeral `NSURLSessionConfiguration`. The function `RCTSetCustomNSURLSessionConfigurationProvider` allows for such customization. Remember to add the following import to the file in which `RCTSetCustomNSURLSessionConfigurationProvider` will be called:
+
+```objectivec
+#import <React/RCTHTTPRequestHandler.h>
+```
+
+`RCTSetCustomNSURLSessionConfigurationProvider` should be called early in the application life cycle such that it is readily available when needed by React, for instance:
+
+```objectivec
+-(void)application:(__unused UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
+
+  // set RCTSetCustomNSURLSessionConfigurationProvider
+  RCTSetCustomNSURLSessionConfigurationProvider(^NSURLSessionConfiguration *{
+     NSURLSessionConfiguration *configuration = [NSURLSessionConfiguration defaultSessionConfiguration];
+     // configure the session
+     return configuration;
+  });
+
+  // set up React
+  _bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
+}
+```
diff --git a/website/versioned_docs/version-0.82/optimizing-flatlist-configuration.md b/website/versioned_docs/version-0.82/optimizing-flatlist-configuration.md
index a81ec0c6cf6..11be2e33b7c 100644
--- a/website/versioned_docs/version-0.82/optimizing-flatlist-configuration.md
+++ b/website/versioned_docs/version-0.82/optimizing-flatlist-configuration.md
@@ -1,154 +1,154 @@
----
-id: optimizing-flatlist-configuration
-title: Optimizing FlatList Configuration
----
-
-## Terms
-
-- **VirtualizedList:** The component behind `FlatList` (React Native's implementation of the [`Virtual List`](https://bvaughn.github.io/react-virtualized/#/components/List) concept.)
-
-- **Memory consumption:** How much information about your list is being stored in memory, which could lead to an app crash.
-
-- **Responsiveness:** Application ability to respond to interactions. Low responsiveness, for instance, is when you touch on a component and it waits a bit to respond, instead of responding immediately as expected.
-
-- **Blank areas:** When `VirtualizedList` can't render your items fast enough, you may enter a part of your list with non-rendered components that appear as blank space.
-
-- **Viewport:** The visible area of content that is rendered to pixels.
-
-- **Window:** The area in which items should be mounted, which is generally much larger than the viewport.
-
-## Props
-
-Here are a list of props that can help to improve `FlatList` performance:
-
-### `removeClippedSubviews`
-
-| Type    | Default                              |
-| ------- | ------------------------------------ |
-| Boolean | `true` on Android, otherwise `false` |
-
-If `true`, views that are outside of the viewport are automatically detached from the native view hierarchy.
-
-**Pros:** This reduces time spent on the main thread, and thus reduces the risk of dropped frames, by excluding views outside of the viewport from the native rendering and drawing traversals.
-
-**Cons:** Be aware that this implementation can have bugs, such as missing content (mainly observed on iOS), especially if you are doing complex things with transforms and/or absolute positioning. Also note this does not save significant memory because the views are not deallocated, only detached.
-
-### `maxToRenderPerBatch`
-
-| Type   | Default |
-| ------ | ------- |
-| Number | 10      |
-
-It is a `VirtualizedList` prop that can be passed through `FlatList`. This controls the amount of items rendered per batch, which is the next chunk of items rendered on every scroll.
-
-**Pros:** Setting a bigger number means less visual blank areas when scrolling (increases the fill rate).
-
-**Cons:** More items per batch means longer periods of JavaScript execution potentially blocking other event processing, like presses, hurting responsiveness.
-
-### `updateCellsBatchingPeriod`
-
-| Type   | Default |
-| ------ | ------- |
-| Number | 50      |
-
-While `maxToRenderPerBatch` tells the amount of items rendered per batch, setting `updateCellsBatchingPeriod` tells your `VirtualizedList` the delay in milliseconds between batch renders (how frequently your component will be rendering the windowed items).
-
-**Pros:** Combining this prop with `maxToRenderPerBatch` gives you the power to, for example, render more items in a less frequent batch, or less items in a more frequent batch.
-
-**Cons:** Less frequent batches may cause blank areas, More frequent batches may cause responsiveness issues.
-
-### initialNumToRender
-
-| Type   | Default |
-| ------ | ------- |
-| Number | 10      |
-
-The initial amount of items to render.
-
-**Pros:** Define precise number of items that would cover the screen for every device. This can be a big performance boost for the initial render.
-
-**Cons:** Setting a low `initialNumToRender` may cause blank areas, especially if it's too small to cover the viewport on initial render.
-
-### `windowSize`
-
-| Type   | Default |
-| ------ | ------- |
-| Number | 21      |
-
-The number passed here is a measurement unit where 1 is equivalent to your viewport height. The default value is 21 (10 viewports above, 10 below, and one in between).
-
-**Pros:** Bigger `windowSize` will result in less chance of seeing blank space while scrolling. On the other hand, smaller `windowSize` will result in fewer items mounted simultaneously, saving memory.
-
-**Cons:** For a bigger `windowSize`, you will have more memory consumption. For a lower `windowSize`, you will have a bigger chance of seeing blank areas.
-
-## List items
-
-Below are some tips about list item components. They are the core of your list, so they need to be fast.
-
-### Use basic components
-
-The more complex your components are, the slower they will render. Try to avoid a lot of logic and nesting in your list items. If you are reusing this list item component a lot in your app, create a component only for your big lists and make them with as little logic and nesting as possible.
-
-### Use light components
-
-The heavier your components are, the slower they render. Avoid heavy images (use a cropped version or thumbnail for list items, as small as possible). Talk to your design team, use as little effects and interactions and information as possible in your list. Show them in your item's detail.
-
-### Use `memo()`
-
-`React.memo()` creates a memoized component that will be re-rendered only when the props passed to the component change. We can use this function to optimize the components in the FlatList.
-
-```tsx
-import React, {memo} from 'react';
-import {View, Text} from 'react-native';
-
-const MyListItem = memo(
-  ({title}: {title: string}) => (
-    <View>
-      <Text>{title}</Text>
-    </View>
-  ),
-  (prevProps, nextProps) => {
-    return prevProps.title === nextProps.title;
-  },
-);
-
-export default MyListItem;
-```
-
-In this example, we have determined that MyListItem should be re-rendered only when the title changes. We passed the comparison function as the second argument to React.memo() so that the component is re-rendered only when the specified prop is changed. If the comparison function returns true, the component will not be re-rendered.
-
-### Use cached optimized images
-
-You can use the community packages (such as [@d11/react-native-fast-image](https://github.com/ds-horizon/react-native-fast-image) from [Dream11](https://github.com/ds-horizon)) for more performant images. Every image in your list is a `new Image()` instance. The faster it reaches the `loaded` hook, the faster your JavaScript thread will be free again.
-
-### Use `getItemLayout`
-
-If all your list item components have the same height (or width, for a horizontal list), providing the [getItemLayout](flatlist#getitemlayout) prop removes the need for your `FlatList` to manage async layout calculations. This is a very desirable optimization technique.
-
-If your components have dynamic size and you really need performance, consider asking your design team if they may think of a redesign in order to perform better.
-
-### Use `keyExtractor` or `key`
-
-You can set the [`keyExtractor`](flatlist#keyextractor) to your `FlatList` component. This prop is used for caching and as the React `key` to track item re-ordering.
-
-You can also use a `key` prop in your item component.
-
-### Avoid anonymous function on `renderItem`
-
-For functional components, move the `renderItem` function outside of the returned JSX. Also, ensure that it is wrapped in a `useCallback` hook to prevent it from being recreated each render.
-
-For class components, move the `renderItem` function outside of the render function, so it won't recreate itself each time the render function is called.
-
-```tsx
-const renderItem = useCallback(({item}) => (
-   <View key={item.key}>
-      <Text>{item.title}</Text>
-   </View>
- ), []);
-
-return (
-  // ...
-  <FlatList data={items} renderItem={renderItem} />;
-  // ...
-);
-```
+---
+id: optimizing-flatlist-configuration
+title: Optimizing FlatList Configuration
+---
+
+## Terms
+
+- **VirtualizedList:** The component behind `FlatList` (React Native's implementation of the [`Virtual List`](https://bvaughn.github.io/react-virtualized/#/components/List) concept.)
+
+- **Memory consumption:** How much information about your list is being stored in memory, which could lead to an app crash.
+
+- **Responsiveness:** Application ability to respond to interactions. Low responsiveness, for instance, is when you touch on a component and it waits a bit to respond, instead of responding immediately as expected.
+
+- **Blank areas:** When `VirtualizedList` can't render your items fast enough, you may enter a part of your list with non-rendered components that appear as blank space.
+
+- **Viewport:** The visible area of content that is rendered to pixels.
+
+- **Window:** The area in which items should be mounted, which is generally much larger than the viewport.
+
+## Props
+
+Here are a list of props that can help to improve `FlatList` performance:
+
+### `removeClippedSubviews`
+
+| Type    | Default                              |
+| ------- | ------------------------------------ |
+| Boolean | `true` on Android, otherwise `false` |
+
+If `true`, views that are outside of the viewport are automatically detached from the native view hierarchy.
+
+**Pros:** This reduces time spent on the main thread, and thus reduces the risk of dropped frames, by excluding views outside of the viewport from the native rendering and drawing traversals.
+
+**Cons:** Be aware that this implementation can have bugs, such as missing content (mainly observed on iOS), especially if you are doing complex things with transforms and/or absolute positioning. Also note this does not save significant memory because the views are not deallocated, only detached.
+
+### `maxToRenderPerBatch`
+
+| Type   | Default |
+| ------ | ------- |
+| Number | 10      |
+
+It is a `VirtualizedList` prop that can be passed through `FlatList`. This controls the amount of items rendered per batch, which is the next chunk of items rendered on every scroll.
+
+**Pros:** Setting a bigger number means less visual blank areas when scrolling (increases the fill rate).
+
+**Cons:** More items per batch means longer periods of JavaScript execution potentially blocking other event processing, like presses, hurting responsiveness.
+
+### `updateCellsBatchingPeriod`
+
+| Type   | Default |
+| ------ | ------- |
+| Number | 50      |
+
+While `maxToRenderPerBatch` tells the amount of items rendered per batch, setting `updateCellsBatchingPeriod` tells your `VirtualizedList` the delay in milliseconds between batch renders (how frequently your component will be rendering the windowed items).
+
+**Pros:** Combining this prop with `maxToRenderPerBatch` gives you the power to, for example, render more items in a less frequent batch, or less items in a more frequent batch.
+
+**Cons:** Less frequent batches may cause blank areas, More frequent batches may cause responsiveness issues.
+
+### initialNumToRender
+
+| Type   | Default |
+| ------ | ------- |
+| Number | 10      |
+
+The initial amount of items to render.
+
+**Pros:** Define precise number of items that would cover the screen for every device. This can be a big performance boost for the initial render.
+
+**Cons:** Setting a low `initialNumToRender` may cause blank areas, especially if it's too small to cover the viewport on initial render.
+
+### `windowSize`
+
+| Type   | Default |
+| ------ | ------- |
+| Number | 21      |
+
+The number passed here is a measurement unit where 1 is equivalent to your viewport height. The default value is 21 (10 viewports above, 10 below, and one in between).
+
+**Pros:** Bigger `windowSize` will result in less chance of seeing blank space while scrolling. On the other hand, smaller `windowSize` will result in fewer items mounted simultaneously, saving memory.
+
+**Cons:** For a bigger `windowSize`, you will have more memory consumption. For a lower `windowSize`, you will have a bigger chance of seeing blank areas.
+
+## List items
+
+Below are some tips about list item components. They are the core of your list, so they need to be fast.
+
+### Use basic components
+
+The more complex your components are, the slower they will render. Try to avoid a lot of logic and nesting in your list items. If you are reusing this list item component a lot in your app, create a component only for your big lists and make them with as little logic and nesting as possible.
+
+### Use light components
+
+The heavier your components are, the slower they render. Avoid heavy images (use a cropped version or thumbnail for list items, as small as possible). Talk to your design team, use as little effects and interactions and information as possible in your list. Show them in your item's detail.
+
+### Use `memo()`
+
+`React.memo()` creates a memoized component that will be re-rendered only when the props passed to the component change. We can use this function to optimize the components in the FlatList.
+
+```tsx
+import {memo} from 'react';
+import {View, Text} from 'react-native';
+
+const MyListItem = memo(
+  ({title}: {title: string}) => (
+    <View>
+      <Text>{title}</Text>
+    </View>
+  ),
+  (prevProps, nextProps) => {
+    return prevProps.title === nextProps.title;
+  },
+);
+
+export default MyListItem;
+```
+
+In this example, we have determined that MyListItem should be re-rendered only when the title changes. We passed the comparison function as the second argument to React.memo() so that the component is re-rendered only when the specified prop is changed. If the comparison function returns true, the component will not be re-rendered.
+
+### Use cached optimized images
+
+You can use the community packages (such as [@d11/react-native-fast-image](https://github.com/ds-horizon/react-native-fast-image) from [Dream11](https://github.com/ds-horizon)) for more performant images. Every image in your list is a `new Image()` instance. The faster it reaches the `loaded` hook, the faster your JavaScript thread will be free again.
+
+### Use `getItemLayout`
+
+If all your list item components have the same height (or width, for a horizontal list), providing the [getItemLayout](flatlist#getitemlayout) prop removes the need for your `FlatList` to manage async layout calculations. This is a very desirable optimization technique.
+
+If your components have dynamic size and you really need performance, consider asking your design team if they may think of a redesign in order to perform better.
+
+### Use `keyExtractor` or `key`
+
+You can set the [`keyExtractor`](flatlist#keyextractor) to your `FlatList` component. This prop is used for caching and as the React `key` to track item re-ordering.
+
+You can also use a `key` prop in your item component.
+
+### Avoid anonymous function on `renderItem`
+
+For functional components, move the `renderItem` function outside of the returned JSX. Also, ensure that it is wrapped in a `useCallback` hook to prevent it from being recreated each render.
+
+For class components, move the `renderItem` function outside of the render function, so it won't recreate itself each time the render function is called.
+
+```tsx
+const renderItem = useCallback(({item}) => (
+   <View key={item.key}>
+      <Text>{item.title}</Text>
+   </View>
+ ), []);
+
+return (
+  // ...
+  <FlatList data={items} renderItem={renderItem} />;
+  // ...
+);
+```
diff --git a/website/versioned_docs/version-0.82/panresponder.md b/website/versioned_docs/version-0.82/panresponder.md
index fa6d8b8ee4e..eabd919aa1e 100644
--- a/website/versioned_docs/version-0.82/panresponder.md
+++ b/website/versioned_docs/version-0.82/panresponder.md
@@ -1,177 +1,177 @@
----
-id: panresponder
-title: PanResponder
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-`PanResponder` reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize basic multi-touch gestures.
-
-By default, `PanResponder` holds an `InteractionManager` handle to block long-running JS events from interrupting active gestures.
-
-It provides a predictable wrapper of the responder handlers provided by the [gesture responder system](gesture-responder-system.md). For each handler, it provides a new `gestureState` object alongside the native event object:
-
-```
-onPanResponderMove: (event, gestureState) => {}
-```
-
-A native event is a synthetic touch event with form of [PressEvent](pressevent).
-
-A `gestureState` object has the following:
-
-- `stateID` - ID of the gestureState- persisted as long as there's at least one touch on screen
-- `moveX` - the latest screen coordinates of the recently-moved touch
-- `moveY` - the latest screen coordinates of the recently-moved touch
-- `x0` - the screen coordinates of the responder grant
-- `y0` - the screen coordinates of the responder grant
-- `dx` - accumulated distance of the gesture since the touch started
-- `dy` - accumulated distance of the gesture since the touch started
-- `vx` - current velocity of the gesture
-- `vy` - current velocity of the gesture
-- `numberActiveTouches` - Number of touches currently on screen
-
-## Usage Pattern
-
-```tsx
-const ExampleComponent = () => {
-  const panResponder = React.useRef(
-    PanResponder.create({
-      // Ask to be the responder:
-      onStartShouldSetPanResponder: (evt, gestureState) => true,
-      onStartShouldSetPanResponderCapture: (evt, gestureState) =>
-        true,
-      onMoveShouldSetPanResponder: (evt, gestureState) => true,
-      onMoveShouldSetPanResponderCapture: (evt, gestureState) =>
-        true,
-
-      onPanResponderGrant: (evt, gestureState) => {
-        // The gesture has started. Show visual feedback so the user knows
-        // what is happening!
-        // gestureState.d{x,y} will be set to zero now
-      },
-      onPanResponderMove: (evt, gestureState) => {
-        // The most recent move distance is gestureState.move{X,Y}
-        // The accumulated gesture distance since becoming responder is
-        // gestureState.d{x,y}
-      },
-      onPanResponderTerminationRequest: (evt, gestureState) =>
-        true,
-      onPanResponderRelease: (evt, gestureState) => {
-        // The user has released all touches while this view is the
-        // responder. This typically means a gesture has succeeded
-      },
-      onPanResponderTerminate: (evt, gestureState) => {
-        // Another component has become the responder, so this gesture
-        // should be cancelled
-      },
-      onShouldBlockNativeResponder: (evt, gestureState) => {
-        // Returns whether this component should block native components from becoming the JS
-        // responder. Returns true by default. Is currently only supported on android.
-        return true;
-      },
-    }),
-  ).current;
-
-  return <View {...panResponder.panHandlers} />;
-};
-```
-
-## Example
-
-`PanResponder` works with `Animated` API to help build complex gestures in the UI. The following example contains an animated `View` component which can be dragged freely across the screen
-
-```SnackPlayer name=PanResponder
-import React, {useRef} from 'react';
-import {Animated, View, StyleSheet, PanResponder, Text} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const pan = useRef(new Animated.ValueXY()).current;
-
-  const panResponder = useRef(
-    PanResponder.create({
-      onMoveShouldSetPanResponder: () => true,
-      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
-      onPanResponderRelease: () => {
-        pan.extractOffset();
-      },
-    }),
-  ).current;
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.titleText}>Drag this box!</Text>
-        <Animated.View
-          style={{
-            transform: [{translateX: pan.x}, {translateY: pan.y}],
-          }}
-          {...panResponder.panHandlers}>
-          <View style={styles.box} />
-        </Animated.View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  titleText: {
-    fontSize: 14,
-    lineHeight: 24,
-    fontWeight: 'bold',
-  },
-  box: {
-    height: 150,
-    width: 150,
-    backgroundColor: 'blue',
-    borderRadius: 5,
-  },
-});
-
-export default App;
-```
-
-Try the [PanResponder example in RNTester](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js).
-
----
-
-# Reference
-
-## Methods
-
-### `create()`
-
-```tsx
-static create(config: PanResponderCallbacks): PanResponderInstance;
-```
-
-**Parameters:**
-
-| Name                                                        | Type   | Description |
-| ----------------------------------------------------------- | ------ | ----------- |
-| config <div className="label basic required">Required</div> | object | Refer below |
-
-The `config` object provides enhanced versions of all of the responder callbacks that provide not only the [`PressEvent`](pressevent), but also the `PanResponder` gesture state, by replacing the word `Responder` with `PanResponder` in each of the typical `onResponder*` callbacks. For example, the `config` object would look like:
-
-- `onMoveShouldSetPanResponder: (e, gestureState) => {...}`
-- `onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}`
-- `onStartShouldSetPanResponder: (e, gestureState) => {...}`
-- `onStartShouldSetPanResponderCapture: (e, gestureState) => {...}`
-- `onPanResponderReject: (e, gestureState) => {...}`
-- `onPanResponderGrant: (e, gestureState) => {...}`
-- `onPanResponderStart: (e, gestureState) => {...}`
-- `onPanResponderEnd: (e, gestureState) => {...}`
-- `onPanResponderRelease: (e, gestureState) => {...}`
-- `onPanResponderMove: (e, gestureState) => {...}`
-- `onPanResponderTerminate: (e, gestureState) => {...}`
-- `onPanResponderTerminationRequest: (e, gestureState) => {...}`
-- `onShouldBlockNativeResponder: (e, gestureState) => {...}`
-
-In general, for events that have capture equivalents, we update the gestureState once in the capture phase and can use it in the bubble phase as well.
-
-Be careful with `onStartShould*` callbacks. They only reflect updated `gestureState` for start/end events that bubble/capture to the Node. Once the node is the responder, you can rely on every start/end event being processed by the gesture and `gestureState` being updated accordingly. (numberActiveTouches) may not be totally accurate unless you are the responder.
+---
+id: panresponder
+title: PanResponder
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+`PanResponder` reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize basic multi-touch gestures.
+
+By default, `PanResponder` holds an `InteractionManager` handle to block long-running JS events from interrupting active gestures.
+
+It provides a predictable wrapper of the responder handlers provided by the [gesture responder system](gesture-responder-system.md). For each handler, it provides a new `gestureState` object alongside the native event object:
+
+```
+onPanResponderMove: (event, gestureState) => {}
+```
+
+A native event is a synthetic touch event with form of [PressEvent](pressevent).
+
+A `gestureState` object has the following:
+
+- `stateID` - ID of the gestureState- persisted as long as there's at least one touch on screen
+- `moveX` - the latest screen coordinates of the recently-moved touch
+- `moveY` - the latest screen coordinates of the recently-moved touch
+- `x0` - the screen coordinates of the responder grant
+- `y0` - the screen coordinates of the responder grant
+- `dx` - accumulated distance of the gesture since the touch started
+- `dy` - accumulated distance of the gesture since the touch started
+- `vx` - current velocity of the gesture
+- `vy` - current velocity of the gesture
+- `numberActiveTouches` - Number of touches currently on screen
+
+## Usage Pattern
+
+```tsx
+const ExampleComponent = () => {
+  const panResponder = useRef(
+    PanResponder.create({
+      // Ask to be the responder:
+      onStartShouldSetPanResponder: (evt, gestureState) => true,
+      onStartShouldSetPanResponderCapture: (evt, gestureState) =>
+        true,
+      onMoveShouldSetPanResponder: (evt, gestureState) => true,
+      onMoveShouldSetPanResponderCapture: (evt, gestureState) =>
+        true,
+
+      onPanResponderGrant: (evt, gestureState) => {
+        // The gesture has started. Show visual feedback so the user knows
+        // what is happening!
+        // gestureState.d{x,y} will be set to zero now
+      },
+      onPanResponderMove: (evt, gestureState) => {
+        // The most recent move distance is gestureState.move{X,Y}
+        // The accumulated gesture distance since becoming responder is
+        // gestureState.d{x,y}
+      },
+      onPanResponderTerminationRequest: (evt, gestureState) =>
+        true,
+      onPanResponderRelease: (evt, gestureState) => {
+        // The user has released all touches while this view is the
+        // responder. This typically means a gesture has succeeded
+      },
+      onPanResponderTerminate: (evt, gestureState) => {
+        // Another component has become the responder, so this gesture
+        // should be cancelled
+      },
+      onShouldBlockNativeResponder: (evt, gestureState) => {
+        // Returns whether this component should block native components from becoming the JS
+        // responder. Returns true by default. Is currently only supported on android.
+        return true;
+      },
+    }),
+  ).current;
+
+  return <View {...panResponder.panHandlers} />;
+};
+```
+
+## Example
+
+`PanResponder` works with `Animated` API to help build complex gestures in the UI. The following example contains an animated `View` component which can be dragged freely across the screen
+
+```SnackPlayer name=PanResponder
+import {useRef} from 'react';
+import {Animated, View, StyleSheet, PanResponder, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const pan = useRef(new Animated.ValueXY()).current;
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
+      onPanResponderRelease: () => {
+        pan.extractOffset();
+      },
+    }),
+  ).current;
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.titleText}>Drag this box!</Text>
+        <Animated.View
+          style={{
+            transform: [{translateX: pan.x}, {translateY: pan.y}],
+          }}
+          {...panResponder.panHandlers}>
+          <View style={styles.box} />
+        </Animated.View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  titleText: {
+    fontSize: 14,
+    lineHeight: 24,
+    fontWeight: 'bold',
+  },
+  box: {
+    height: 150,
+    width: 150,
+    backgroundColor: 'blue',
+    borderRadius: 5,
+  },
+});
+
+export default App;
+```
+
+Try the [PanResponder example in RNTester](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js).
+
+---
+
+# Reference
+
+## Methods
+
+### `create()`
+
+```tsx
+static create(config: PanResponderCallbacks): PanResponderInstance;
+```
+
+**Parameters:**
+
+| Name                                                        | Type   | Description |
+| ----------------------------------------------------------- | ------ | ----------- |
+| config <div className="label basic required">Required</div> | object | Refer below |
+
+The `config` object provides enhanced versions of all of the responder callbacks that provide not only the [`PressEvent`](pressevent), but also the `PanResponder` gesture state, by replacing the word `Responder` with `PanResponder` in each of the typical `onResponder*` callbacks. For example, the `config` object would look like:
+
+- `onMoveShouldSetPanResponder: (e, gestureState) => {...}`
+- `onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}`
+- `onStartShouldSetPanResponder: (e, gestureState) => {...}`
+- `onStartShouldSetPanResponderCapture: (e, gestureState) => {...}`
+- `onPanResponderReject: (e, gestureState) => {...}`
+- `onPanResponderGrant: (e, gestureState) => {...}`
+- `onPanResponderStart: (e, gestureState) => {...}`
+- `onPanResponderEnd: (e, gestureState) => {...}`
+- `onPanResponderRelease: (e, gestureState) => {...}`
+- `onPanResponderMove: (e, gestureState) => {...}`
+- `onPanResponderTerminate: (e, gestureState) => {...}`
+- `onPanResponderTerminationRequest: (e, gestureState) => {...}`
+- `onShouldBlockNativeResponder: (e, gestureState) => {...}`
+
+In general, for events that have capture equivalents, we update the gestureState once in the capture phase and can use it in the bubble phase as well.
+
+Be careful with `onStartShould*` callbacks. They only reflect updated `gestureState` for start/end events that bubble/capture to the Node. Once the node is the responder, you can rely on every start/end event being processed by the gesture and `gestureState` being updated accordingly. (numberActiveTouches) may not be totally accurate unless you are the responder.
diff --git a/website/versioned_docs/version-0.82/permissionsandroid.md b/website/versioned_docs/version-0.82/permissionsandroid.md
index ec1f486ba37..4e93941ad1f 100644
--- a/website/versioned_docs/version-0.82/permissionsandroid.md
+++ b/website/versioned_docs/version-0.82/permissionsandroid.md
@@ -17,7 +17,6 @@ If a user has previously turned off a permission that you prompt for, the OS wil
 ### Example
 
 ```SnackPlayer name=PermissionsAndroid%20Example&supportedPlatforms=android
-import React from 'react';
 import {
   Button,
   PermissionsAndroid,
diff --git a/website/versioned_docs/version-0.82/pixelratio.md b/website/versioned_docs/version-0.82/pixelratio.md
index 64e4eded49f..f298a8e73ab 100644
--- a/website/versioned_docs/version-0.82/pixelratio.md
+++ b/website/versioned_docs/version-0.82/pixelratio.md
@@ -30,7 +30,6 @@ In React Native, everything in JavaScript and within the layout engine works wit
 ## Example
 
 ```SnackPlayer name=PixelRatio%20Example
-import React from 'react';
 import {
   Image,
   PixelRatio,
diff --git a/website/versioned_docs/version-0.82/platform.md b/website/versioned_docs/version-0.82/platform.md
index 79f435ccd56..b8642658a84 100644
--- a/website/versioned_docs/version-0.82/platform.md
+++ b/website/versioned_docs/version-0.82/platform.md
@@ -6,7 +6,6 @@ title: Platform
 ## Example
 
 ```SnackPlayer name=Platform%20API%20Example&supportedPlatforms=ios,android
-import React from 'react';
 import {Platform, StyleSheet, Text, ScrollView} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.82/platformcolor.md b/website/versioned_docs/version-0.82/platformcolor.md
index 17371f76c26..040c6d2c18a 100644
--- a/website/versioned_docs/version-0.82/platformcolor.md
+++ b/website/versioned_docs/version-0.82/platformcolor.md
@@ -46,7 +46,6 @@ If you’re familiar with design systems, another way of thinking about this is
 ## Example
 
 ```SnackPlayer name=PlatformColor%20Example&supportedPlatforms=android,ios
-import React from 'react';
 import {Platform, PlatformColor, StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.82/pressable.md b/website/versioned_docs/version-0.82/pressable.md
index 590c77db974..3415bb2eb0a 100644
--- a/website/versioned_docs/version-0.82/pressable.md
+++ b/website/versioned_docs/version-0.82/pressable.md
@@ -1,268 +1,268 @@
----
-id: pressable
-title: Pressable
----
-
-Pressable is a Core Component wrapper that can detect various stages of press interactions on any of its defined children.
-
-```tsx
-<Pressable onPress={onPressFunction}>
-  <Text>I'm pressable!</Text>
-</Pressable>
-```
-
-## How it works
-
-On an element wrapped by `Pressable`:
-
-- [`onPressIn`](#onpressin) is called when a press is activated.
-- [`onPressOut`](#onpressout) is called when the press gesture is deactivated.
-
-After pressing [`onPressIn`](#onpressin), one of two things will happen:
-
-1. The person will remove their finger, triggering [`onPressOut`](#onpressout) followed by [`onPress`](#onpress).
-2. If the person leaves their finger longer than 500 milliseconds before removing it, [`onLongPress`](#onlongpress) is triggered. ([`onPressOut`](#onpressout) will still fire when they remove their finger.)
-
-<img src="/docs/assets/d_pressable_pressing.svg" width="1000" alt="Diagram of the onPress events in sequence." />
-
-Fingers are not the most precise instruments, and it is common for users to accidentally activate the wrong element or miss the activation area. To help, `Pressable` has an optional `HitRect` you can use to define how far a touch can register away from the wrapped element. Presses can start anywhere within a `HitRect`.
-
-`PressRect` allows presses to move beyond the element and its `HitRect` while maintaining activation and being eligible for a "press"—think of sliding your finger slowly away from a button you're pressing down on.
-
-:::note
-The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
-:::
-
-<figure>
-  <img src="/docs/assets/d_pressable_anatomy.svg" width="1000" alt="Diagram of HitRect and PressRect and how they work." />
-  <figcaption>
-    You can set <code>HitRect</code> with <code>hitSlop</code> and set <code>PressRect</code> with <code>pressRetentionOffset</code>.
-  </figcaption>
-</figure>
-
-:::info
-`Pressable` uses React Native's `Pressability` API. For more information around the state machine flow of Pressability and how it works, check out the implementation for [Pressability](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Pressability/Pressability.js#L350).
-:::
-
-## Example
-
-```SnackPlayer name=Pressable
-import React, {useState} from 'react';
-import {Pressable, StyleSheet, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [timesPressed, setTimesPressed] = useState(0);
-
-  let textLog = '';
-  if (timesPressed > 1) {
-    textLog = timesPressed + 'x onPress';
-  } else if (timesPressed > 0) {
-    textLog = 'onPress';
-  }
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Pressable
-          onPress={() => {
-            setTimesPressed(current => current + 1);
-          }}
-          style={({pressed}) => [
-            {
-              backgroundColor: pressed ? 'rgb(210, 230, 255)' : 'white',
-            },
-            styles.wrapperCustom,
-          ]}>
-          {({pressed}) => (
-            <Text style={styles.text}>{pressed ? 'Pressed!' : 'Press Me'}</Text>
-          )}
-        </Pressable>
-        <View style={styles.logBox}>
-          <Text testID="pressable_press_console">{textLog}</Text>
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  text: {
-    fontSize: 16,
-  },
-  wrapperCustom: {
-    borderRadius: 8,
-    padding: 6,
-  },
-  logBox: {
-    padding: 20,
-    margin: 10,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: '#f0f0f0',
-    backgroundColor: '#f9f9f9',
-  },
-});
-
-export default App;
-```
-
-## Props
-
-### `android_disableSound` <div className="label android">Android</div>
-
-If true, doesn't play Android system sound on press.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
-### `android_ripple` <div className="label android">Android</div>
-
-Enables the Android ripple effect and configures its properties.
-
-| Type                                   |
-| -------------------------------------- |
-| [RippleConfig](pressable#rippleconfig) |
-
-### `children`
-
-Either children or a function that receives a boolean reflecting whether the component is currently pressed.
-
-| Type                     |
-| ------------------------ |
-| [React Node](react-node) |
-
-### `unstable_pressDelay`
-
-Duration (in milliseconds) to wait after press down before calling `onPressIn`.
-
-| Type   |
-| ------ |
-| number |
-
-### `delayLongPress`
-
-Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
-
-| Type   | Default |
-| ------ | ------- |
-| number | `500`   |
-
-### `disabled`
-
-Whether the press behavior is disabled.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
-### `hitSlop`
-
-Sets additional distance outside of element in which a press can be detected.
-
-| Type                   |
-| ---------------------- |
-| [Rect](rect) or number |
-
-### `onHoverIn`
-
-Called when the hover is activated to provide visual feedback.
-
-| Type                                                                                                      |
-| --------------------------------------------------------------------------------------------------------- |
-| `md ({ nativeEvent: [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) }) => void` |
-
-### `onHoverOut`
-
-Called when the hover is deactivated to undo visual feedback.
-
-| Type                                                                                                      |
-| --------------------------------------------------------------------------------------------------------- |
-| `md ({ nativeEvent: [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) }) => void` |
-
-### `onLongPress`
-
-Called if the time after `onPressIn` lasts longer than 500 milliseconds. This time period can be customized with [`delayLongPress`](#delaylongpress).
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
-### `onPress`
-
-Called after `onPressOut`.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
-### `onPressIn`
-
-Called immediately when a touch is engaged, before `onPressOut` and `onPress`.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
-### `onPressMove`
-
-Called when the press location moves.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
-### `onPressOut`
-
-Called when a touch is released.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
-### `pressRetentionOffset`
-
-Additional distance outside of this view in which a touch is considered a press before `onPressOut` is triggered.
-
-| Type                   | Default                                      |
-| ---------------------- | -------------------------------------------- |
-| [Rect](rect) or number | `{bottom: 30, left: 20, right: 20, top: 20}` |
-
-### `style`
-
-Either view styles or a function that receives a boolean reflecting whether the component is currently pressed and returns view styles.
-
-| Type                                                                                            |
-| ----------------------------------------------------------------------------------------------- |
-| [View Style](view-style-props) or `md ({ pressed: boolean }) => [View Style](view-style-props)` |
-
-### `testOnly_pressed`
-
-Used only for documentation or testing (e.g. snapshot testing).
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
-## Type Definitions
-
-### RippleConfig
-
-Ripple effect configuration for the `android_ripple` property.
-
-| Type   |
-| ------ |
-| object |
-
-**Properties:**
-
-| Name       | Type            | Required | Description                                                                                                                                                                                                                                                  |
-| ---------- | --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| color      | [color](colors) | No       | Defines the color of the ripple effect.                                                                                                                                                                                                                      |
-| borderless | boolean         | No       | Defines if ripple effect should not include border.                                                                                                                                                                                                          |
-| radius     | number          | No       | Defines the radius of the ripple effect.                                                                                                                                                                                                                     |
-| foreground | boolean         | No       | Set to true to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them. |
+---
+id: pressable
+title: Pressable
+---
+
+Pressable is a Core Component wrapper that can detect various stages of press interactions on any of its defined children.
+
+```tsx
+<Pressable onPress={onPressFunction}>
+  <Text>I'm pressable!</Text>
+</Pressable>
+```
+
+## How it works
+
+On an element wrapped by `Pressable`:
+
+- [`onPressIn`](#onpressin) is called when a press is activated.
+- [`onPressOut`](#onpressout) is called when the press gesture is deactivated.
+
+After pressing [`onPressIn`](#onpressin), one of two things will happen:
+
+1. The person will remove their finger, triggering [`onPressOut`](#onpressout) followed by [`onPress`](#onpress).
+2. If the person leaves their finger longer than 500 milliseconds before removing it, [`onLongPress`](#onlongpress) is triggered. ([`onPressOut`](#onpressout) will still fire when they remove their finger.)
+
+<img src="/docs/assets/d_pressable_pressing.svg" width="1000" alt="Diagram of the onPress events in sequence." />
+
+Fingers are not the most precise instruments, and it is common for users to accidentally activate the wrong element or miss the activation area. To help, `Pressable` has an optional `HitRect` you can use to define how far a touch can register away from the wrapped element. Presses can start anywhere within a `HitRect`.
+
+`PressRect` allows presses to move beyond the element and its `HitRect` while maintaining activation and being eligible for a "press"—think of sliding your finger slowly away from a button you're pressing down on.
+
+:::note
+The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
+:::
+
+<figure>
+  <img src="/docs/assets/d_pressable_anatomy.svg" width="1000" alt="Diagram of HitRect and PressRect and how they work." />
+  <figcaption>
+    You can set <code>HitRect</code> with <code>hitSlop</code> and set <code>PressRect</code> with <code>pressRetentionOffset</code>.
+  </figcaption>
+</figure>
+
+:::info
+`Pressable` uses React Native's `Pressability` API. For more information around the state machine flow of Pressability and how it works, check out the implementation for [Pressability](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Pressability/Pressability.js#L350).
+:::
+
+## Example
+
+```SnackPlayer name=Pressable
+import {useState} from 'react';
+import {Pressable, StyleSheet, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [timesPressed, setTimesPressed] = useState(0);
+
+  let textLog = '';
+  if (timesPressed > 1) {
+    textLog = timesPressed + 'x onPress';
+  } else if (timesPressed > 0) {
+    textLog = 'onPress';
+  }
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Pressable
+          onPress={() => {
+            setTimesPressed(current => current + 1);
+          }}
+          style={({pressed}) => [
+            {
+              backgroundColor: pressed ? 'rgb(210, 230, 255)' : 'white',
+            },
+            styles.wrapperCustom,
+          ]}>
+          {({pressed}) => (
+            <Text style={styles.text}>{pressed ? 'Pressed!' : 'Press Me'}</Text>
+          )}
+        </Pressable>
+        <View style={styles.logBox}>
+          <Text testID="pressable_press_console">{textLog}</Text>
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 16,
+  },
+  wrapperCustom: {
+    borderRadius: 8,
+    padding: 6,
+  },
+  logBox: {
+    padding: 20,
+    margin: 10,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: '#f0f0f0',
+    backgroundColor: '#f9f9f9',
+  },
+});
+
+export default App;
+```
+
+## Props
+
+### `android_disableSound` <div className="label android">Android</div>
+
+If true, doesn't play Android system sound on press.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+### `android_ripple` <div className="label android">Android</div>
+
+Enables the Android ripple effect and configures its properties.
+
+| Type                                   |
+| -------------------------------------- |
+| [RippleConfig](pressable#rippleconfig) |
+
+### `children`
+
+Either children or a function that receives a boolean reflecting whether the component is currently pressed.
+
+| Type                     |
+| ------------------------ |
+| [React Node](react-node) |
+
+### `unstable_pressDelay`
+
+Duration (in milliseconds) to wait after press down before calling `onPressIn`.
+
+| Type   |
+| ------ |
+| number |
+
+### `delayLongPress`
+
+Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
+
+| Type   | Default |
+| ------ | ------- |
+| number | `500`   |
+
+### `disabled`
+
+Whether the press behavior is disabled.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+### `hitSlop`
+
+Sets additional distance outside of element in which a press can be detected.
+
+| Type                   |
+| ---------------------- |
+| [Rect](rect) or number |
+
+### `onHoverIn`
+
+Called when the hover is activated to provide visual feedback.
+
+| Type                                                                                                      |
+| --------------------------------------------------------------------------------------------------------- |
+| `md ({ nativeEvent: [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) }) => void` |
+
+### `onHoverOut`
+
+Called when the hover is deactivated to undo visual feedback.
+
+| Type                                                                                                      |
+| --------------------------------------------------------------------------------------------------------- |
+| `md ({ nativeEvent: [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) }) => void` |
+
+### `onLongPress`
+
+Called if the time after `onPressIn` lasts longer than 500 milliseconds. This time period can be customized with [`delayLongPress`](#delaylongpress).
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+### `onPress`
+
+Called after `onPressOut`.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+### `onPressIn`
+
+Called immediately when a touch is engaged, before `onPressOut` and `onPress`.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+### `onPressMove`
+
+Called when the press location moves.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+### `onPressOut`
+
+Called when a touch is released.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+### `pressRetentionOffset`
+
+Additional distance outside of this view in which a touch is considered a press before `onPressOut` is triggered.
+
+| Type                   | Default                                      |
+| ---------------------- | -------------------------------------------- |
+| [Rect](rect) or number | `{bottom: 30, left: 20, right: 20, top: 20}` |
+
+### `style`
+
+Either view styles or a function that receives a boolean reflecting whether the component is currently pressed and returns view styles.
+
+| Type                                                                                            |
+| ----------------------------------------------------------------------------------------------- |
+| [View Style](view-style-props) or `md ({ pressed: boolean }) => [View Style](view-style-props)` |
+
+### `testOnly_pressed`
+
+Used only for documentation or testing (e.g. snapshot testing).
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+## Type Definitions
+
+### RippleConfig
+
+Ripple effect configuration for the `android_ripple` property.
+
+| Type   |
+| ------ |
+| object |
+
+**Properties:**
+
+| Name       | Type            | Required | Description                                                                                                                                                                                                                                                  |
+| ---------- | --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| color      | [color](colors) | No       | Defines the color of the ripple effect.                                                                                                                                                                                                                      |
+| borderless | boolean         | No       | Defines if ripple effect should not include border.                                                                                                                                                                                                          |
+| radius     | number          | No       | Defines the radius of the ripple effect.                                                                                                                                                                                                                     |
+| foreground | boolean         | No       | Set to true to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them. |
diff --git a/website/versioned_docs/version-0.82/progressbarandroid.md b/website/versioned_docs/version-0.82/progressbarandroid.md
index d26fb2038d6..a08adfae637 100644
--- a/website/versioned_docs/version-0.82/progressbarandroid.md
+++ b/website/versioned_docs/version-0.82/progressbarandroid.md
@@ -12,7 +12,6 @@ Android-only React component used to indicate that the app is loading or there i
 ### Example
 
 ```SnackPlayer name=ProgressBarAndroid&supportedPlatforms=android
-import React from 'react';
 import {View, StyleSheet, ProgressBarAndroid, Text} from 'react-native';
 
 const App = () => {
diff --git a/website/versioned_docs/version-0.82/props.md b/website/versioned_docs/version-0.82/props.md
index 490eb214632..8b24d6dd9f1 100644
--- a/website/versioned_docs/version-0.82/props.md
+++ b/website/versioned_docs/version-0.82/props.md
@@ -10,7 +10,6 @@ Most components can be customized when they are created, with different paramete
 For example, one basic React Native component is the `Image`. When you create an image, you can use a prop named `source` to control what image it shows.
 
 ```SnackPlayer name=Props
-import React from 'react';
 import {Image} from 'react-native';
 
 const Bananas = () => {
@@ -33,7 +32,6 @@ Your own components can also use `props`. This lets you make a single component
 <TabItem value="javascript">
 
 ```SnackPlayer name=Props&ext=js
-import React from 'react';
 import {Text, View} from 'react-native';
 
 const Greeting = props => {
@@ -61,7 +59,6 @@ export default LotsOfGreetings;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Props&ext=tsx
-import React from 'react';
 import {Text, View} from 'react-native';
 
 type GreetingProps = {
diff --git a/website/versioned_docs/version-0.82/refreshcontrol.md b/website/versioned_docs/version-0.82/refreshcontrol.md
index 7f7faab6744..f65d65a0036 100644
--- a/website/versioned_docs/version-0.82/refreshcontrol.md
+++ b/website/versioned_docs/version-0.82/refreshcontrol.md
@@ -1,167 +1,167 @@
----
-id: refreshcontrol
-title: RefreshControl
----
-
-This component is used inside a ScrollView or ListView to add pull to refresh functionality. When the ScrollView is at `scrollY: 0`, swiping down triggers an `onRefresh` event.
-
-## Example
-
-```SnackPlayer name=RefreshControl&supportedPlatforms=ios,android
-import React from 'react';
-import {RefreshControl, ScrollView, StyleSheet, Text} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [refreshing, setRefreshing] = React.useState(false);
-
-  const onRefresh = React.useCallback(() => {
-    setRefreshing(true);
-    setTimeout(() => {
-      setRefreshing(false);
-    }, 2000);
-  }, []);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <ScrollView
-          contentContainerStyle={styles.scrollView}
-          refreshControl={
-            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-          }>
-          <Text>Pull down to see RefreshControl indicator</Text>
-        </ScrollView>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  scrollView: {
-    flex: 1,
-    backgroundColor: 'pink',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-
-export default App;
-```
-
-:::note
-`refreshing` is a controlled prop, this is why it needs to be set to `true` in the `onRefresh` function otherwise the refresh indicator will stop immediately.
-:::
-
----
-
-# Reference
-
-## Props
-
-### [View Props](view.md#props)
-
-Inherits [View Props](view.md#props).
-
----
-
-### <div className="label required basic">Required</div>**`refreshing`**
-
-Whether the view should be indicating an active refresh.
-
-| Type    |
-| ------- |
-| boolean |
-
----
-
-### `colors` <div className="label android">Android</div>
-
-The colors (at least one) that will be used to draw the refresh indicator.
-
-| Type                         |
-| ---------------------------- |
-| array of [colors](colors.md) |
-
----
-
-### `enabled` <div className="label android">Android</div>
-
-Whether the pull to refresh functionality is enabled.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `true`  |
-
----
-
-### `onRefresh`
-
-Called when the view starts refreshing.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `progressBackgroundColor` <div className="label android">Android</div>
-
-The background color of the refresh indicator.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `progressViewOffset`
-
-Progress view top offset.
-
-| Type   | Default |
-| ------ | ------- |
-| number | `0`     |
-
----
-
-### `size` <div className="label android">Android</div>
-
-Size of the refresh indicator.
-
-| Type                         | Default     |
-| ---------------------------- | ----------- |
-| enum(`'default'`, `'large'`) | `'default'` |
-
----
-
-### `tintColor` <div className="label ios">iOS</div>
-
-The color of the refresh indicator.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `title` <div className="label ios">iOS</div>
-
-The title displayed under the refresh indicator.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `titleColor` <div className="label ios">iOS</div>
-
-The color of the refresh indicator title.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
+---
+id: refreshcontrol
+title: RefreshControl
+---
+
+This component is used inside a ScrollView or ListView to add pull to refresh functionality. When the ScrollView is at `scrollY: 0`, swiping down triggers an `onRefresh` event.
+
+## Example
+
+```SnackPlayer name=RefreshControl&supportedPlatforms=ios,android
+import {useCallback, useState} from 'react';
+import {RefreshControl, ScrollView, StyleSheet, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [refreshing, setRefreshing] = useState(false);
+
+  const onRefresh = useCallback(() => {
+    setRefreshing(true);
+    setTimeout(() => {
+      setRefreshing(false);
+    }, 2000);
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <ScrollView
+          contentContainerStyle={styles.scrollView}
+          refreshControl={
+            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+          }>
+          <Text>Pull down to see RefreshControl indicator</Text>
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollView: {
+    flex: 1,
+    backgroundColor: 'pink',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default App;
+```
+
+:::note
+`refreshing` is a controlled prop, this is why it needs to be set to `true` in the `onRefresh` function otherwise the refresh indicator will stop immediately.
+:::
+
+---
+
+# Reference
+
+## Props
+
+### [View Props](view.md#props)
+
+Inherits [View Props](view.md#props).
+
+---
+
+### <div className="label required basic">Required</div>**`refreshing`**
+
+Whether the view should be indicating an active refresh.
+
+| Type    |
+| ------- |
+| boolean |
+
+---
+
+### `colors` <div className="label android">Android</div>
+
+The colors (at least one) that will be used to draw the refresh indicator.
+
+| Type                         |
+| ---------------------------- |
+| array of [colors](colors.md) |
+
+---
+
+### `enabled` <div className="label android">Android</div>
+
+Whether the pull to refresh functionality is enabled.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `true`  |
+
+---
+
+### `onRefresh`
+
+Called when the view starts refreshing.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `progressBackgroundColor` <div className="label android">Android</div>
+
+The background color of the refresh indicator.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `progressViewOffset`
+
+Progress view top offset.
+
+| Type   | Default |
+| ------ | ------- |
+| number | `0`     |
+
+---
+
+### `size` <div className="label android">Android</div>
+
+Size of the refresh indicator.
+
+| Type                         | Default     |
+| ---------------------------- | ----------- |
+| enum(`'default'`, `'large'`) | `'default'` |
+
+---
+
+### `tintColor` <div className="label ios">iOS</div>
+
+The color of the refresh indicator.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `title` <div className="label ios">iOS</div>
+
+The title displayed under the refresh indicator.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `titleColor` <div className="label ios">iOS</div>
+
+The color of the refresh indicator title.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
diff --git a/website/versioned_docs/version-0.82/safeareaview.md b/website/versioned_docs/version-0.82/safeareaview.md
index 8da4485ff12..1298898b64e 100644
--- a/website/versioned_docs/version-0.82/safeareaview.md
+++ b/website/versioned_docs/version-0.82/safeareaview.md
@@ -16,7 +16,6 @@ The purpose of `SafeAreaView` is to render content within the safe area boundari
 To use, wrap your top level view with a `SafeAreaView` with a `flex: 1` style applied to it. You may also want to use a background color that matches your application's design.
 
 ```SnackPlayer name=SafeAreaView&supportedPlatforms=ios
-import React from 'react';
 import {StyleSheet, Text, SafeAreaView} from 'react-native';
 
 const App = () => {
diff --git a/website/versioned_docs/version-0.82/scrollview.md b/website/versioned_docs/version-0.82/scrollview.md
index 5224d095f94..ad51dcf88d7 100644
--- a/website/versioned_docs/version-0.82/scrollview.md
+++ b/website/versioned_docs/version-0.82/scrollview.md
@@ -22,7 +22,6 @@ This is where `FlatList` comes into play. `FlatList` renders items lazily, when
 ## Example
 
 ```SnackPlayer name=ScrollView%20Example
-import React from 'react';
 import {StyleSheet, Text, ScrollView, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.82/sectionlist.md b/website/versioned_docs/version-0.82/sectionlist.md
index d0e9519a301..ead40b211b9 100644
--- a/website/versioned_docs/version-0.82/sectionlist.md
+++ b/website/versioned_docs/version-0.82/sectionlist.md
@@ -21,7 +21,6 @@ If you don't need section support and want a simpler interface, use [`<FlatList>
 ## Example
 
 ```SnackPlayer name=SectionList%20Example
-import React from 'react';
 import {StyleSheet, Text, View, SectionList, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.82/settings.md b/website/versioned_docs/version-0.82/settings.md
index 01c0533d813..af0136d8257 100644
--- a/website/versioned_docs/version-0.82/settings.md
+++ b/website/versioned_docs/version-0.82/settings.md
@@ -1,103 +1,103 @@
----
-id: settings
-title: Settings
----
-
-`Settings` serves as a wrapper for [`NSUserDefaults`](https://developer.apple.com/documentation/foundation/nsuserdefaults), a persistent key-value store available only on iOS.
-
-## Example
-
-```SnackPlayer name=Settings%20Example&supportedPlatforms=ios
-import React, {useState} from 'react';
-import {Button, Settings, StyleSheet, Text} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [data, setData] = useState(() => Settings.get('data'));
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>Stored value:</Text>
-        <Text style={styles.value}>{data}</Text>
-        <Button
-          onPress={() => {
-            Settings.set({data: 'React'});
-            setData(Settings.get('data'));
-          }}
-          title="Store 'React'"
-        />
-        <Button
-          onPress={() => {
-            Settings.set({data: 'Native'});
-            setData(Settings.get('data'));
-          }}
-          title="Store 'Native'"
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  value: {
-    fontSize: 24,
-    marginVertical: 12,
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Methods
-
-### `clearWatch()`
-
-```tsx
-static clearWatch(watchId: number);
-```
-
-`watchId` is the number returned by `watchKeys()` when the subscription was originally configured.
-
----
-
-### `get()`
-
-```tsx
-static get(key: string): any;
-```
-
-Get the current value for a given `key` in `NSUserDefaults`.
-
----
-
-### `set()`
-
-```tsx
-static set(settings: Record<string, any>);
-```
-
-Set one or more values in `NSUserDefaults`.
-
----
-
-### `watchKeys()`
-
-```tsx
-static watchKeys(keys: string | array<string>, callback: () => void): number;
-```
-
-Subscribe to be notified when the value for any of the keys specified by the `keys` parameter has been changed in `NSUserDefaults`. Returns a `watchId` number that may be used with `clearWatch()` to unsubscribe.
-
-:::note
-`watchKeys()` by design ignores internal `set()` calls and fires callback only on changes preformed outside of React Native code.
-:::
+---
+id: settings
+title: Settings
+---
+
+`Settings` serves as a wrapper for [`NSUserDefaults`](https://developer.apple.com/documentation/foundation/nsuserdefaults), a persistent key-value store available only on iOS.
+
+## Example
+
+```SnackPlayer name=Settings%20Example&supportedPlatforms=ios
+import {useState} from 'react';
+import {Button, Settings, StyleSheet, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [data, setData] = useState(() => Settings.get('data'));
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>Stored value:</Text>
+        <Text style={styles.value}>{data}</Text>
+        <Button
+          onPress={() => {
+            Settings.set({data: 'React'});
+            setData(Settings.get('data'));
+          }}
+          title="Store 'React'"
+        />
+        <Button
+          onPress={() => {
+            Settings.set({data: 'Native'});
+            setData(Settings.get('data'));
+          }}
+          title="Store 'Native'"
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  value: {
+    fontSize: 24,
+    marginVertical: 12,
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `clearWatch()`
+
+```tsx
+static clearWatch(watchId: number);
+```
+
+`watchId` is the number returned by `watchKeys()` when the subscription was originally configured.
+
+---
+
+### `get()`
+
+```tsx
+static get(key: string): any;
+```
+
+Get the current value for a given `key` in `NSUserDefaults`.
+
+---
+
+### `set()`
+
+```tsx
+static set(settings: Record<string, any>);
+```
+
+Set one or more values in `NSUserDefaults`.
+
+---
+
+### `watchKeys()`
+
+```tsx
+static watchKeys(keys: string | array<string>, callback: () => void): number;
+```
+
+Subscribe to be notified when the value for any of the keys specified by the `keys` parameter has been changed in `NSUserDefaults`. Returns a `watchId` number that may be used with `clearWatch()` to unsubscribe.
+
+:::note
+`watchKeys()` by design ignores internal `set()` calls and fires callback only on changes preformed outside of React Native code.
+:::
diff --git a/website/versioned_docs/version-0.82/shadow-props.md b/website/versioned_docs/version-0.82/shadow-props.md
index d5e8a037059..91553622bd3 100644
--- a/website/versioned_docs/version-0.82/shadow-props.md
+++ b/website/versioned_docs/version-0.82/shadow-props.md
@@ -1,285 +1,285 @@
----
-id: shadow-props
-title: Shadow Props
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=js&dependencies=@react-native-community/slider
-import React, {useState} from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-import Slider from '@react-native-community/slider';
-
-const ShadowPropSlider = ({label, value, ...props}) => {
-  return (
-    <>
-      <Text>
-        {label} ({value.toFixed(2)})
-      </Text>
-      <Slider step={1} value={value} {...props} />
-    </>
-  );
-};
-
-const App = () => {
-  const [shadowOffsetWidth, setShadowOffsetWidth] = useState(0);
-  const [shadowOffsetHeight, setShadowOffsetHeight] = useState(0);
-  const [shadowRadius, setShadowRadius] = useState(0);
-  const [shadowOpacity, setShadowOpacity] = useState(0.1);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View
-          style={[
-            styles.square,
-            {
-              shadowOffset: {
-                width: shadowOffsetWidth,
-                height: -shadowOffsetHeight,
-              },
-              shadowOpacity,
-              shadowRadius,
-            },
-          ]}
-        />
-        <View style={styles.controls}>
-          <ShadowPropSlider
-            label="shadowOffset - X"
-            minimumValue={-50}
-            maximumValue={50}
-            value={shadowOffsetWidth}
-            onValueChange={setShadowOffsetWidth}
-          />
-          <ShadowPropSlider
-            label="shadowOffset - Y"
-            minimumValue={-50}
-            maximumValue={50}
-            value={shadowOffsetHeight}
-            onValueChange={setShadowOffsetHeight}
-          />
-          <ShadowPropSlider
-            label="shadowRadius"
-            minimumValue={0}
-            maximumValue={100}
-            value={shadowRadius}
-            onValueChange={setShadowRadius}
-          />
-          <ShadowPropSlider
-            label="shadowOpacity"
-            minimumValue={0}
-            maximumValue={1}
-            step={0.05}
-            value={shadowOpacity}
-            onValueChange={val => setShadowOpacity(val)}
-          />
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'space-around',
-    backgroundColor: '#ecf0f1',
-    padding: 8,
-  },
-  square: {
-    alignSelf: 'center',
-    backgroundColor: 'white',
-    borderRadius: 4,
-    height: 150,
-    shadowColor: 'black',
-    width: 150,
-  },
-  controls: {
-    paddingHorizontal: 12,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=tsx&dependencies=@react-native-community/slider
-import React, {useState} from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-import Slider, {SliderProps} from '@react-native-community/slider';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-type ShadowPropSliderProps = SliderProps & {
-  label: string;
-};
-
-const ShadowPropSlider = ({label, value, ...props}: ShadowPropSliderProps) => {
-  return (
-    <>
-      <Text>
-        {label} ({value?.toFixed(2)})
-      </Text>
-      <Slider step={1} value={value} {...props} />
-    </>
-  );
-};
-
-const App = () => {
-  const [shadowOffsetWidth, setShadowOffsetWidth] = useState(0);
-  const [shadowOffsetHeight, setShadowOffsetHeight] = useState(0);
-  const [shadowRadius, setShadowRadius] = useState(0);
-  const [shadowOpacity, setShadowOpacity] = useState(0.1);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View
-          style={[
-            styles.square,
-            {
-              shadowOffset: {
-                width: shadowOffsetWidth,
-                height: -shadowOffsetHeight,
-              },
-              shadowOpacity,
-              shadowRadius,
-            },
-          ]}
-        />
-        <View style={styles.controls}>
-          <ShadowPropSlider
-            label="shadowOffset - X"
-            minimumValue={-50}
-            maximumValue={50}
-            value={shadowOffsetWidth}
-            onValueChange={setShadowOffsetWidth}
-          />
-          <ShadowPropSlider
-            label="shadowOffset - Y"
-            minimumValue={-50}
-            maximumValue={50}
-            value={shadowOffsetHeight}
-            onValueChange={setShadowOffsetHeight}
-          />
-          <ShadowPropSlider
-            label="shadowRadius"
-            minimumValue={0}
-            maximumValue={100}
-            value={shadowRadius}
-            onValueChange={setShadowRadius}
-          />
-          <ShadowPropSlider
-            label="shadowOpacity"
-            minimumValue={0}
-            maximumValue={1}
-            step={0.05}
-            value={shadowOpacity}
-            onValueChange={val => setShadowOpacity(val)}
-          />
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'space-around',
-    backgroundColor: '#ecf0f1',
-    padding: 8,
-  },
-  square: {
-    alignSelf: 'center',
-    backgroundColor: 'white',
-    borderRadius: 4,
-    height: 150,
-    shadowColor: 'black',
-    width: 150,
-  },
-  controls: {
-    paddingHorizontal: 12,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
----
-
-# Reference
-
-There are 3 sets of shadow APIs in React Native:
-
-- `boxShadow`: A View style prop and a spec-compliant implementation of the [web style prop of the same name](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow).
-- `dropShadow`: A specific filter function available as part of the [`filter`](./view-style-props#filter) View style prop.
-- Various `shadow` props (`shadowColor`, `shadowOffset`, `shadowOpacity`, `shadowRadius`): These map directly to their native counterparts exposed by the platform-level APIs.
-
-The difference between `dropShadow` and `boxShadow` are as follows:
-
-- `dropShadow` exists as part of `filter`, whereas `boxShadow` is a standalone style prop.
-- `dropShadow` is an alpha mask, so only pixels with a positive alpha value will "cast" a shadow. `boxShadow` will cast around the border box of the element no matter it's contents (unless it is inset).
-- `dropShadow` is only available on Android, `boxShadow` is available on iOS and Android.
-- `dropShadow` cannot be inset like `boxShadow`.
-- `dropShadow` does not have the `spreadDistance` argument like `boxShadow`.
-
-Both `boxShadow` and `dropShadow` are generally more capable than the `shadow` props. The `shadow` props, however, map to native platform-level APIs, so if you only need a straightforward shadow these props are recommended. Note that only `shadowColor` works on both Android and iOS, all other `shadow` props only work on iOS.
-
-## Props
-
-### `boxShadow`
-
-See [View Style Props](./view-style-props#boxshadow) for documentation.
-
-### `dropShadow` <div className="label android">Android</div>
-
-See [View Style Props](./view-style-props#filter) for documentation.
-
-### `shadowColor`
-
-Sets the drop shadow color.
-
-This property will only work on Android API 28 and above. For similar functionality on lower Android APIs, use the [`elevation` property](view-style-props#elevation-android).
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `shadowOffset` <div className="label ios">iOS</div>
-
-Sets the drop shadow offset.
-
-| Type                                     |
-| ---------------------------------------- |
-| object: `{width: number,height: number}` |
-
----
-
-### `shadowOpacity` <div className="label ios">iOS</div>
-
-Sets the drop shadow opacity (multiplied by the color's alpha component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `shadowRadius` <div className="label ios">iOS</div>
-
-Sets the drop shadow blur radius.
-
-| Type   |
-| ------ |
-| number |
+---
+id: shadow-props
+title: Shadow Props
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=js&dependencies=@react-native-community/slider
+import {useState} from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+import Slider from '@react-native-community/slider';
+
+const ShadowPropSlider = ({label, value, ...props}) => {
+  return (
+    <>
+      <Text>
+        {label} ({value.toFixed(2)})
+      </Text>
+      <Slider step={1} value={value} {...props} />
+    </>
+  );
+};
+
+const App = () => {
+  const [shadowOffsetWidth, setShadowOffsetWidth] = useState(0);
+  const [shadowOffsetHeight, setShadowOffsetHeight] = useState(0);
+  const [shadowRadius, setShadowRadius] = useState(0);
+  const [shadowOpacity, setShadowOpacity] = useState(0.1);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View
+          style={[
+            styles.square,
+            {
+              shadowOffset: {
+                width: shadowOffsetWidth,
+                height: -shadowOffsetHeight,
+              },
+              shadowOpacity,
+              shadowRadius,
+            },
+          ]}
+        />
+        <View style={styles.controls}>
+          <ShadowPropSlider
+            label="shadowOffset - X"
+            minimumValue={-50}
+            maximumValue={50}
+            value={shadowOffsetWidth}
+            onValueChange={setShadowOffsetWidth}
+          />
+          <ShadowPropSlider
+            label="shadowOffset - Y"
+            minimumValue={-50}
+            maximumValue={50}
+            value={shadowOffsetHeight}
+            onValueChange={setShadowOffsetHeight}
+          />
+          <ShadowPropSlider
+            label="shadowRadius"
+            minimumValue={0}
+            maximumValue={100}
+            value={shadowRadius}
+            onValueChange={setShadowRadius}
+          />
+          <ShadowPropSlider
+            label="shadowOpacity"
+            minimumValue={0}
+            maximumValue={1}
+            step={0.05}
+            value={shadowOpacity}
+            onValueChange={val => setShadowOpacity(val)}
+          />
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'space-around',
+    backgroundColor: '#ecf0f1',
+    padding: 8,
+  },
+  square: {
+    alignSelf: 'center',
+    backgroundColor: 'white',
+    borderRadius: 4,
+    height: 150,
+    shadowColor: 'black',
+    width: 150,
+  },
+  controls: {
+    paddingHorizontal: 12,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=tsx&dependencies=@react-native-community/slider
+import {useState} from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+import Slider, {SliderProps} from '@react-native-community/slider';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+type ShadowPropSliderProps = SliderProps & {
+  label: string;
+};
+
+const ShadowPropSlider = ({label, value, ...props}: ShadowPropSliderProps) => {
+  return (
+    <>
+      <Text>
+        {label} ({value?.toFixed(2)})
+      </Text>
+      <Slider step={1} value={value} {...props} />
+    </>
+  );
+};
+
+const App = () => {
+  const [shadowOffsetWidth, setShadowOffsetWidth] = useState(0);
+  const [shadowOffsetHeight, setShadowOffsetHeight] = useState(0);
+  const [shadowRadius, setShadowRadius] = useState(0);
+  const [shadowOpacity, setShadowOpacity] = useState(0.1);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View
+          style={[
+            styles.square,
+            {
+              shadowOffset: {
+                width: shadowOffsetWidth,
+                height: -shadowOffsetHeight,
+              },
+              shadowOpacity,
+              shadowRadius,
+            },
+          ]}
+        />
+        <View style={styles.controls}>
+          <ShadowPropSlider
+            label="shadowOffset - X"
+            minimumValue={-50}
+            maximumValue={50}
+            value={shadowOffsetWidth}
+            onValueChange={setShadowOffsetWidth}
+          />
+          <ShadowPropSlider
+            label="shadowOffset - Y"
+            minimumValue={-50}
+            maximumValue={50}
+            value={shadowOffsetHeight}
+            onValueChange={setShadowOffsetHeight}
+          />
+          <ShadowPropSlider
+            label="shadowRadius"
+            minimumValue={0}
+            maximumValue={100}
+            value={shadowRadius}
+            onValueChange={setShadowRadius}
+          />
+          <ShadowPropSlider
+            label="shadowOpacity"
+            minimumValue={0}
+            maximumValue={1}
+            step={0.05}
+            value={shadowOpacity}
+            onValueChange={val => setShadowOpacity(val)}
+          />
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'space-around',
+    backgroundColor: '#ecf0f1',
+    padding: 8,
+  },
+  square: {
+    alignSelf: 'center',
+    backgroundColor: 'white',
+    borderRadius: 4,
+    height: 150,
+    shadowColor: 'black',
+    width: 150,
+  },
+  controls: {
+    paddingHorizontal: 12,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+---
+
+# Reference
+
+There are 3 sets of shadow APIs in React Native:
+
+- `boxShadow`: A View style prop and a spec-compliant implementation of the [web style prop of the same name](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow).
+- `dropShadow`: A specific filter function available as part of the [`filter`](./view-style-props#filter) View style prop.
+- Various `shadow` props (`shadowColor`, `shadowOffset`, `shadowOpacity`, `shadowRadius`): These map directly to their native counterparts exposed by the platform-level APIs.
+
+The difference between `dropShadow` and `boxShadow` are as follows:
+
+- `dropShadow` exists as part of `filter`, whereas `boxShadow` is a standalone style prop.
+- `dropShadow` is an alpha mask, so only pixels with a positive alpha value will "cast" a shadow. `boxShadow` will cast around the border box of the element no matter it's contents (unless it is inset).
+- `dropShadow` is only available on Android, `boxShadow` is available on iOS and Android.
+- `dropShadow` cannot be inset like `boxShadow`.
+- `dropShadow` does not have the `spreadDistance` argument like `boxShadow`.
+
+Both `boxShadow` and `dropShadow` are generally more capable than the `shadow` props. The `shadow` props, however, map to native platform-level APIs, so if you only need a straightforward shadow these props are recommended. Note that only `shadowColor` works on both Android and iOS, all other `shadow` props only work on iOS.
+
+## Props
+
+### `boxShadow`
+
+See [View Style Props](./view-style-props#boxshadow) for documentation.
+
+### `dropShadow` <div className="label android">Android</div>
+
+See [View Style Props](./view-style-props#filter) for documentation.
+
+### `shadowColor`
+
+Sets the drop shadow color.
+
+This property will only work on Android API 28 and above. For similar functionality on lower Android APIs, use the [`elevation` property](view-style-props#elevation-android).
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `shadowOffset` <div className="label ios">iOS</div>
+
+Sets the drop shadow offset.
+
+| Type                                     |
+| ---------------------------------------- |
+| object: `{width: number,height: number}` |
+
+---
+
+### `shadowOpacity` <div className="label ios">iOS</div>
+
+Sets the drop shadow opacity (multiplied by the color's alpha component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `shadowRadius` <div className="label ios">iOS</div>
+
+Sets the drop shadow blur radius.
+
+| Type   |
+| ------ |
+| number |
diff --git a/website/versioned_docs/version-0.82/share.md b/website/versioned_docs/version-0.82/share.md
index 1fc5823361f..46d0f858435 100644
--- a/website/versioned_docs/version-0.82/share.md
+++ b/website/versioned_docs/version-0.82/share.md
@@ -11,7 +11,6 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con
 <TabItem value="javascript">
 
 ```SnackPlayer name=Example&supportedPlatforms=ios,android&ext=js
-import React from 'react';
 import {Alert, Share, Button} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -51,7 +50,6 @@ export default ShareExample;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Example&supportedPlatforms=ios,android&ext=tsx
-import React from 'react';
 import {Alert, Share, Button} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.82/state.md b/website/versioned_docs/version-0.82/state.md
index bc162f44b40..ebf3ec14336 100644
--- a/website/versioned_docs/version-0.82/state.md
+++ b/website/versioned_docs/version-0.82/state.md
@@ -1,103 +1,103 @@
----
-id: state
-title: State
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-There are two types of data that control a component: `props` and `state`. `props` are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use `state`.
-
-In general, you should initialize `state` in the constructor, and then call `setState` when you want to change it.
-
-For example, let's say we want to make text that blinks all the time. The text itself gets set once when the blinking component gets created, so the text itself is a `prop`. The "whether the text is currently on or off" changes over time, so that should be kept in `state`.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=State&ext=js
-import React, {useState, useEffect} from 'react';
-import {Text, View} from 'react-native';
-
-const Blink = props => {
-  const [isShowingText, setIsShowingText] = useState(true);
-
-  useEffect(() => {
-    const toggle = setInterval(() => {
-      setIsShowingText(!isShowingText);
-    }, 1000);
-
-    return () => clearInterval(toggle);
-  });
-
-  if (!isShowingText) {
-    return null;
-  }
-
-  return <Text>{props.text}</Text>;
-};
-
-const BlinkApp = () => {
-  return (
-    <View style={{marginTop: 50}}>
-      <Blink text="I love to blink" />
-      <Blink text="Yes blinking is so great" />
-      <Blink text="Why did they ever take this out of HTML" />
-      <Blink text="Look at me look at me look at me" />
-    </View>
-  );
-};
-
-export default BlinkApp;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=State&ext=tsx
-import React, {useState, useEffect} from 'react';
-import {Text, View} from 'react-native';
-
-type BlinkProps = {
-  text: string;
-};
-
-const Blink = (props: BlinkProps) => {
-  const [isShowingText, setIsShowingText] = useState(true);
-
-  useEffect(() => {
-    const toggle = setInterval(() => {
-      setIsShowingText(!isShowingText);
-    }, 1000);
-
-    return () => clearInterval(toggle);
-  });
-
-  if (!isShowingText) {
-    return null;
-  }
-
-  return <Text>{props.text}</Text>;
-};
-
-const BlinkApp = () => {
-  return (
-    <View style={{marginTop: 50}}>
-      <Blink text="I love to blink" />
-      <Blink text="Yes blinking is so great" />
-      <Blink text="Why did they ever take this out of HTML" />
-      <Blink text="Look at me look at me look at me" />
-    </View>
-  );
-};
-
-export default BlinkApp;
-```
-
-</TabItem>
-</Tabs>
-
-In a real application, you probably won't be setting state with a timer. You might set state when you have new data from the server, or from user input. You can also use a state container like [Redux](https://redux.js.org/) or [MobX](https://mobx.js.org/) to control your data flow. In that case you would use Redux or MobX to modify your state rather than calling `setState` directly.
-
-When setState is called, BlinkApp will re-render its Component. By calling setState within the Timer, the component will re-render every time the Timer ticks.
-
-State works the same way as it does in React, so for more details on handling state, you can look at the [React.Component API](https://react.dev/reference/react/Component#setstate). At this point, you may have noticed that most of our examples use the default text color. To customize the text color, you will have to [learn about Style](style.md).
+---
+id: state
+title: State
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+There are two types of data that control a component: `props` and `state`. `props` are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use `state`.
+
+In general, you should initialize `state` in the constructor, and then call `setState` when you want to change it.
+
+For example, let's say we want to make text that blinks all the time. The text itself gets set once when the blinking component gets created, so the text itself is a `prop`. The "whether the text is currently on or off" changes over time, so that should be kept in `state`.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=State&ext=js
+import {useState, useEffect} from 'react';
+import {Text, View} from 'react-native';
+
+const Blink = props => {
+  const [isShowingText, setIsShowingText] = useState(true);
+
+  useEffect(() => {
+    const toggle = setInterval(() => {
+      setIsShowingText(!isShowingText);
+    }, 1000);
+
+    return () => clearInterval(toggle);
+  });
+
+  if (!isShowingText) {
+    return null;
+  }
+
+  return <Text>{props.text}</Text>;
+};
+
+const BlinkApp = () => {
+  return (
+    <View style={{marginTop: 50}}>
+      <Blink text="I love to blink" />
+      <Blink text="Yes blinking is so great" />
+      <Blink text="Why did they ever take this out of HTML" />
+      <Blink text="Look at me look at me look at me" />
+    </View>
+  );
+};
+
+export default BlinkApp;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=State&ext=tsx
+import {useState, useEffect} from 'react';
+import {Text, View} from 'react-native';
+
+type BlinkProps = {
+  text: string;
+};
+
+const Blink = (props: BlinkProps) => {
+  const [isShowingText, setIsShowingText] = useState(true);
+
+  useEffect(() => {
+    const toggle = setInterval(() => {
+      setIsShowingText(!isShowingText);
+    }, 1000);
+
+    return () => clearInterval(toggle);
+  });
+
+  if (!isShowingText) {
+    return null;
+  }
+
+  return <Text>{props.text}</Text>;
+};
+
+const BlinkApp = () => {
+  return (
+    <View style={{marginTop: 50}}>
+      <Blink text="I love to blink" />
+      <Blink text="Yes blinking is so great" />
+      <Blink text="Why did they ever take this out of HTML" />
+      <Blink text="Look at me look at me look at me" />
+    </View>
+  );
+};
+
+export default BlinkApp;
+```
+
+</TabItem>
+</Tabs>
+
+In a real application, you probably won't be setting state with a timer. You might set state when you have new data from the server, or from user input. You can also use a state container like [Redux](https://redux.js.org/) or [MobX](https://mobx.js.org/) to control your data flow. In that case you would use Redux or MobX to modify your state rather than calling `setState` directly.
+
+When setState is called, BlinkApp will re-render its Component. By calling setState within the Timer, the component will re-render every time the Timer ticks.
+
+State works the same way as it does in React, so for more details on handling state, you can look at the [React.Component API](https://react.dev/reference/react/Component#setstate). At this point, you may have noticed that most of our examples use the default text color. To customize the text color, you will have to [learn about Style](style.md).
diff --git a/website/versioned_docs/version-0.82/statusbar.md b/website/versioned_docs/version-0.82/statusbar.md
index 93810f7b0e0..97686cf2260 100644
--- a/website/versioned_docs/version-0.82/statusbar.md
+++ b/website/versioned_docs/version-0.82/statusbar.md
@@ -1,513 +1,513 @@
----
-id: statusbar
-title: StatusBar
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-Component to control the app's status bar. The status bar is the zone, typically at the top of the screen, that displays the current time, Wi-Fi and cellular network information, battery level and/or other status icons.
-
-### 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.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=StatusBar%20Component%20Example&supportedPlatforms=android,ios&ext=js
-import React, {useState} from 'react';
-import {
-  Button,
-  Platform,
-  StatusBar,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const STYLES = ['default', 'dark-content', 'light-content'];
-const TRANSITIONS = ['fade', 'slide', 'none'];
-
-const App = () => {
-  const [hidden, setHidden] = useState(false);
-  const [statusBarStyle, setStatusBarStyle] = useState(STYLES[0]);
-  const [statusBarTransition, setStatusBarTransition] = useState(
-    TRANSITIONS[0],
-  );
-
-  const changeStatusBarVisibility = () => setHidden(!hidden);
-
-  const changeStatusBarStyle = () => {
-    const styleId = STYLES.indexOf(statusBarStyle) + 1;
-    if (styleId === STYLES.length) {
-      setStatusBarStyle(STYLES[0]);
-    } else {
-      setStatusBarStyle(STYLES[styleId]);
-    }
-  };
-
-  const changeStatusBarTransition = () => {
-    const transition = TRANSITIONS.indexOf(statusBarTransition) + 1;
-    if (transition === TRANSITIONS.length) {
-      setStatusBarTransition(TRANSITIONS[0]);
-    } else {
-      setStatusBarTransition(TRANSITIONS[transition]);
-    }
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <StatusBar
-          animated={true}
-          backgroundColor="#61dafb"
-          barStyle={statusBarStyle}
-          showHideTransition={statusBarTransition}
-          hidden={hidden}
-        />
-        <Text style={styles.textStyle}>
-          StatusBar Visibility:{'\n'}
-          {hidden ? 'Hidden' : 'Visible'}
-        </Text>
-        <Text style={styles.textStyle}>
-          StatusBar Style:{'\n'}
-          {statusBarStyle}
-        </Text>
-        {Platform.OS === 'ios' ? (
-          <Text style={styles.textStyle}>
-            StatusBar Transition:{'\n'}
-            {statusBarTransition}
-          </Text>
-        ) : null}
-        <View style={styles.buttonsContainer}>
-          <Button
-            title="Toggle StatusBar"
-            onPress={changeStatusBarVisibility}
-          />
-          <Button
-            title="Change StatusBar Style"
-            onPress={changeStatusBarStyle}
-          />
-          {Platform.OS === 'ios' ? (
-            <Button
-              title="Change StatusBar Transition"
-              onPress={changeStatusBarTransition}
-            />
-          ) : null}
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    backgroundColor: '#ECF0F1',
-  },
-  buttonsContainer: {
-    padding: 10,
-  },
-  textStyle: {
-    textAlign: 'center',
-    marginBottom: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=StatusBar%20Component%20Example&supportedPlatforms=android,ios&ext=tsx
-import React, {useState} from 'react';
-import {
-  Button,
-  Platform,
-  StatusBar,
-  StyleSheet,
-  Text,
-  View,
-  StatusBarStyle,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const STYLES = ['default', 'dark-content', 'light-content'] as const;
-const TRANSITIONS = ['fade', 'slide', 'none'] as const;
-
-const App = () => {
-  const [hidden, setHidden] = useState(false);
-  const [statusBarStyle, setStatusBarStyle] = useState<StatusBarStyle>(
-    STYLES[0],
-  );
-  const [statusBarTransition, setStatusBarTransition] = useState<
-    'fade' | 'slide' | 'none'
-  >(TRANSITIONS[0]);
-
-  const changeStatusBarVisibility = () => setHidden(!hidden);
-
-  const changeStatusBarStyle = () => {
-    const styleId = STYLES.indexOf(statusBarStyle) + 1;
-    if (styleId === STYLES.length) {
-      setStatusBarStyle(STYLES[0]);
-    } else {
-      setStatusBarStyle(STYLES[styleId]);
-    }
-  };
-
-  const changeStatusBarTransition = () => {
-    const transition = TRANSITIONS.indexOf(statusBarTransition) + 1;
-    if (transition === TRANSITIONS.length) {
-      setStatusBarTransition(TRANSITIONS[0]);
-    } else {
-      setStatusBarTransition(TRANSITIONS[transition]);
-    }
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <StatusBar
-          animated={true}
-          backgroundColor="#61dafb"
-          barStyle={statusBarStyle}
-          showHideTransition={statusBarTransition}
-          hidden={hidden}
-        />
-        <Text style={styles.textStyle}>
-          StatusBar Visibility:{'\n'}
-          {hidden ? 'Hidden' : 'Visible'}
-        </Text>
-        <Text style={styles.textStyle}>
-          StatusBar Style:{'\n'}
-          {statusBarStyle}
-        </Text>
-        {Platform.OS === 'ios' ? (
-          <Text style={styles.textStyle}>
-            StatusBar Transition:{'\n'}
-            {statusBarTransition}
-          </Text>
-        ) : null}
-        <View style={styles.buttonsContainer}>
-          <Button
-            title="Toggle StatusBar"
-            onPress={changeStatusBarVisibility}
-          />
-          <Button
-            title="Change StatusBar Style"
-            onPress={changeStatusBarStyle}
-          />
-          {Platform.OS === 'ios' ? (
-            <Button
-              title="Change StatusBar Transition"
-              onPress={changeStatusBarTransition}
-            />
-          ) : null}
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    backgroundColor: '#ECF0F1',
-  },
-  buttonsContainer: {
-    padding: 10,
-  },
-  textStyle: {
-    textAlign: 'center',
-    marginBottom: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### 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.
-
----
-
-# Reference
-
-## Constants
-
-### `currentHeight` <div className="label android">Android</div>
-
-The height of the status bar, which includes the notch height, if present.
-
----
-
-## Props
-
-### `animated`
-
-If the transition between status bar property changes should be animated. Supported for `backgroundColor`, `barStyle` and `hidden` properties.
-
-| Type    | Required | Default |
-| ------- | -------- | ------- |
-| boolean | No       | `false` |
-
----
-
-### `backgroundColor` <div className="label android">Android</div>
-
-The background color of the status bar.
-
-:::warning
-Due to edge-to-edge enforcement introduced in Android 15, setting background color of the status bar is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
-:::
-
-| Type            | Required | Default                                                                |
-| --------------- | -------- | ---------------------------------------------------------------------- |
-| [color](colors) | No       | default system StatusBar background color, or `'black'` if not defined |
-
----
-
-### `barStyle`
-
-Sets the color of the status bar text.
-
-On Android, this will only have an impact on API versions 23 and above.
-
-| Type                                       | Required | Default     |
-| ------------------------------------------ | -------- | ----------- |
-| [StatusBarStyle](statusbar#statusbarstyle) | No       | `'default'` |
-
----
-
-### `hidden`
-
-If the status bar is hidden.
-
-| Type    | Required | Default |
-| ------- | -------- | ------- |
-| boolean | No       | `false` |
-
----
-
-### `networkActivityIndicatorVisible` <div className="label ios">iOS</div>
-
-If the network activity indicator should be visible.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
----
-
-### `showHideTransition` <div className="label ios">iOS</div>
-
-The transition effect when showing and hiding the status bar using the `hidden` prop.
-
-| Type                                               | Default  |
-| -------------------------------------------------- | -------- |
-| [StatusBarAnimation](statusbar#statusbaranimation) | `'fade'` |
-
----
-
-### `translucent` <div className="label android">Android</div>
-
-If the status bar is translucent. When translucent is set to `true`, the app will draw under the status bar. This is useful when using a semi transparent status bar color.
-
-:::warning
-Due to edge-to-edge enforcement introduced in Android 15, setting the status bar as translucent is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
-:::
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
-## Methods
-
-### `popStackEntry()`
-
-```tsx
-static popStackEntry(entry: StatusBarProps);
-```
-
-Get and remove the last StatusBar entry from the stack.
-
-**Parameters:**
-
-| Name                                                       | Type | Description                           |
-| ---------------------------------------------------------- | ---- | ------------------------------------- |
-| entry <div className="label basic required">Required</div> | any  | Entry returned from `pushStackEntry`. |
-
----
-
-### `pushStackEntry()`
-
-```tsx
-static pushStackEntry(props: StatusBarProps): StatusBarProps;
-```
-
-Push a StatusBar entry onto the stack. The return value should be passed to `popStackEntry` when complete.
-
-**Parameters:**
-
-| Name                                                       | Type | Description                                                      |
-| ---------------------------------------------------------- | ---- | ---------------------------------------------------------------- |
-| props <div className="label basic required">Required</div> | any  | Object containing the StatusBar props to use in the stack entry. |
-
----
-
-### `replaceStackEntry()`
-
-```tsx
-static replaceStackEntry(
-  entry: StatusBarProps,
-  props: StatusBarProps
-): StatusBarProps;
-```
-
-Replace an existing StatusBar stack entry with new props.
-
-**Parameters:**
-
-| Name                                                       | Type | Description                                                                  |
-| ---------------------------------------------------------- | ---- | ---------------------------------------------------------------------------- |
-| entry <div className="label basic required">Required</div> | any  | Entry returned from `pushStackEntry` to replace.                             |
-| props <div className="label basic required">Required</div> | any  | Object containing the StatusBar props to use in the replacement stack entry. |
-
----
-
-### `setBackgroundColor()` <div className="label android">Android</div>
-
-```tsx
-static setBackgroundColor(color: ColorValue, animated?: boolean);
-```
-
-Set the background color for the status bar.
-
-:::warning
-Due to edge-to-edge enforcement introduced in Android 15, setting background color of the status bar is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
-:::
-
-**Parameters:**
-
-| Name                                                       | Type    | Description               |
-| ---------------------------------------------------------- | ------- | ------------------------- |
-| color <div className="label basic required">Required</div> | string  | Background color.         |
-| animated                                                   | boolean | Animate the style change. |
-
----
-
-### `setBarStyle()`
-
-```tsx
-static setBarStyle(style: StatusBarStyle, animated?: boolean);
-```
-
-Set the status bar style.
-
-**Parameters:**
-
-| Name                                                       | Type                                       | Description               |
-| ---------------------------------------------------------- | ------------------------------------------ | ------------------------- |
-| style <div className="label basic required">Required</div> | [StatusBarStyle](statusbar#statusbarstyle) | Status bar style to set.  |
-| animated                                                   | boolean                                    | Animate the style change. |
-
----
-
-### `setHidden()`
-
-```tsx
-static setHidden(hidden: boolean, animation?: StatusBarAnimation);
-```
-
-Show or hide the status bar.
-
-**Parameters:**
-
-| Name                                                        | Type                                               | Description                                             |
-| ----------------------------------------------------------- | -------------------------------------------------- | ------------------------------------------------------- |
-| hidden <div className="label basic required">Required</div> | boolean                                            | Hide the status bar.                                    |
-| animation <div className="label ios">iOS</div>              | [StatusBarAnimation](statusbar#statusbaranimation) | Animation when changing the status bar hidden property. |
-
----
-
-### 🗑️ `setNetworkActivityIndicatorVisible()` <div className="label ios">iOS</div>
-
-:::warning[Deprecated]
-The status bar network activity indicator is not supported in iOS 13 and later. This will be removed in a future release.
-:::
-
-```tsx
-static setNetworkActivityIndicatorVisible(visible: boolean);
-```
-
-Control the visibility of the network activity indicator.
-
-**Parameters:**
-
-| Name                                                         | Type    | Description         |
-| ------------------------------------------------------------ | ------- | ------------------- |
-| visible <div className="label basic required">Required</div> | boolean | Show the indicator. |
-
----
-
-### `setTranslucent()` <div className="label android">Android</div>
-
-```tsx
-static setTranslucent(translucent: boolean);
-```
-
-Control the translucency of the status bar.
-
-:::warning
-Due to edge-to-edge enforcement introduced in Android 15, setting the status bar as translucent is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
-:::
-
-**Parameters:**
-
-| Name                                                             | Type    | Description         |
-| ---------------------------------------------------------------- | ------- | ------------------- |
-| translucent <div className="label basic required">Required</div> | boolean | Set as translucent. |
-
-## Type Definitions
-
-### StatusBarAnimation
-
-Status bar animation type for transitions on the iOS.
-
-| Type |
-| ---- |
-| enum |
-
-**Constants:**
-
-| Value     | Type   | Description     |
-| --------- | ------ | --------------- |
-| `'fade'`  | string | Fade animation  |
-| `'slide'` | string | Slide animation |
-| `'none'`  | string | No animation    |
-
----
-
-### StatusBarStyle
-
-Status bar style type.
-
-| Type |
-| ---- |
-| enum |
-
-**Constants:**
-
-| Value             | Type   | Description                                                |
-| ----------------- | ------ | ---------------------------------------------------------- |
-| `'default'`       | string | Default status bar style (dark for iOS, light for Android) |
-| `'light-content'` | string | White texts and icons                                      |
-| `'dark-content'`  | string | Dark texts and icons (requires API>=23 on Android)         |
+---
+id: statusbar
+title: StatusBar
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+Component to control the app's status bar. The status bar is the zone, typically at the top of the screen, that displays the current time, Wi-Fi and cellular network information, battery level and/or other status icons.
+
+### 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.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=StatusBar%20Component%20Example&supportedPlatforms=android,ios&ext=js
+import {useState} from 'react';
+import {
+  Button,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const STYLES = ['default', 'dark-content', 'light-content'];
+const TRANSITIONS = ['fade', 'slide', 'none'];
+
+const App = () => {
+  const [hidden, setHidden] = useState(false);
+  const [statusBarStyle, setStatusBarStyle] = useState(STYLES[0]);
+  const [statusBarTransition, setStatusBarTransition] = useState(
+    TRANSITIONS[0],
+  );
+
+  const changeStatusBarVisibility = () => setHidden(!hidden);
+
+  const changeStatusBarStyle = () => {
+    const styleId = STYLES.indexOf(statusBarStyle) + 1;
+    if (styleId === STYLES.length) {
+      setStatusBarStyle(STYLES[0]);
+    } else {
+      setStatusBarStyle(STYLES[styleId]);
+    }
+  };
+
+  const changeStatusBarTransition = () => {
+    const transition = TRANSITIONS.indexOf(statusBarTransition) + 1;
+    if (transition === TRANSITIONS.length) {
+      setStatusBarTransition(TRANSITIONS[0]);
+    } else {
+      setStatusBarTransition(TRANSITIONS[transition]);
+    }
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <StatusBar
+          animated={true}
+          backgroundColor="#61dafb"
+          barStyle={statusBarStyle}
+          showHideTransition={statusBarTransition}
+          hidden={hidden}
+        />
+        <Text style={styles.textStyle}>
+          StatusBar Visibility:{'\n'}
+          {hidden ? 'Hidden' : 'Visible'}
+        </Text>
+        <Text style={styles.textStyle}>
+          StatusBar Style:{'\n'}
+          {statusBarStyle}
+        </Text>
+        {Platform.OS === 'ios' ? (
+          <Text style={styles.textStyle}>
+            StatusBar Transition:{'\n'}
+            {statusBarTransition}
+          </Text>
+        ) : null}
+        <View style={styles.buttonsContainer}>
+          <Button
+            title="Toggle StatusBar"
+            onPress={changeStatusBarVisibility}
+          />
+          <Button
+            title="Change StatusBar Style"
+            onPress={changeStatusBarStyle}
+          />
+          {Platform.OS === 'ios' ? (
+            <Button
+              title="Change StatusBar Transition"
+              onPress={changeStatusBarTransition}
+            />
+          ) : null}
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: '#ECF0F1',
+  },
+  buttonsContainer: {
+    padding: 10,
+  },
+  textStyle: {
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=StatusBar%20Component%20Example&supportedPlatforms=android,ios&ext=tsx
+import {useState} from 'react';
+import {
+  Button,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  Text,
+  View,
+  StatusBarStyle,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const STYLES = ['default', 'dark-content', 'light-content'] as const;
+const TRANSITIONS = ['fade', 'slide', 'none'] as const;
+
+const App = () => {
+  const [hidden, setHidden] = useState(false);
+  const [statusBarStyle, setStatusBarStyle] = useState<StatusBarStyle>(
+    STYLES[0],
+  );
+  const [statusBarTransition, setStatusBarTransition] = useState<
+    'fade' | 'slide' | 'none'
+  >(TRANSITIONS[0]);
+
+  const changeStatusBarVisibility = () => setHidden(!hidden);
+
+  const changeStatusBarStyle = () => {
+    const styleId = STYLES.indexOf(statusBarStyle) + 1;
+    if (styleId === STYLES.length) {
+      setStatusBarStyle(STYLES[0]);
+    } else {
+      setStatusBarStyle(STYLES[styleId]);
+    }
+  };
+
+  const changeStatusBarTransition = () => {
+    const transition = TRANSITIONS.indexOf(statusBarTransition) + 1;
+    if (transition === TRANSITIONS.length) {
+      setStatusBarTransition(TRANSITIONS[0]);
+    } else {
+      setStatusBarTransition(TRANSITIONS[transition]);
+    }
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <StatusBar
+          animated={true}
+          backgroundColor="#61dafb"
+          barStyle={statusBarStyle}
+          showHideTransition={statusBarTransition}
+          hidden={hidden}
+        />
+        <Text style={styles.textStyle}>
+          StatusBar Visibility:{'\n'}
+          {hidden ? 'Hidden' : 'Visible'}
+        </Text>
+        <Text style={styles.textStyle}>
+          StatusBar Style:{'\n'}
+          {statusBarStyle}
+        </Text>
+        {Platform.OS === 'ios' ? (
+          <Text style={styles.textStyle}>
+            StatusBar Transition:{'\n'}
+            {statusBarTransition}
+          </Text>
+        ) : null}
+        <View style={styles.buttonsContainer}>
+          <Button
+            title="Toggle StatusBar"
+            onPress={changeStatusBarVisibility}
+          />
+          <Button
+            title="Change StatusBar Style"
+            onPress={changeStatusBarStyle}
+          />
+          {Platform.OS === 'ios' ? (
+            <Button
+              title="Change StatusBar Transition"
+              onPress={changeStatusBarTransition}
+            />
+          ) : null}
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: '#ECF0F1',
+  },
+  buttonsContainer: {
+    padding: 10,
+  },
+  textStyle: {
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### 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.
+
+---
+
+# Reference
+
+## Constants
+
+### `currentHeight` <div className="label android">Android</div>
+
+The height of the status bar, which includes the notch height, if present.
+
+---
+
+## Props
+
+### `animated`
+
+If the transition between status bar property changes should be animated. Supported for `backgroundColor`, `barStyle` and `hidden` properties.
+
+| Type    | Required | Default |
+| ------- | -------- | ------- |
+| boolean | No       | `false` |
+
+---
+
+### `backgroundColor` <div className="label android">Android</div>
+
+The background color of the status bar.
+
+:::warning
+Due to edge-to-edge enforcement introduced in Android 15, setting background color of the status bar is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
+:::
+
+| Type            | Required | Default                                                                |
+| --------------- | -------- | ---------------------------------------------------------------------- |
+| [color](colors) | No       | default system StatusBar background color, or `'black'` if not defined |
+
+---
+
+### `barStyle`
+
+Sets the color of the status bar text.
+
+On Android, this will only have an impact on API versions 23 and above.
+
+| Type                                       | Required | Default     |
+| ------------------------------------------ | -------- | ----------- |
+| [StatusBarStyle](statusbar#statusbarstyle) | No       | `'default'` |
+
+---
+
+### `hidden`
+
+If the status bar is hidden.
+
+| Type    | Required | Default |
+| ------- | -------- | ------- |
+| boolean | No       | `false` |
+
+---
+
+### `networkActivityIndicatorVisible` <div className="label ios">iOS</div>
+
+If the network activity indicator should be visible.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+---
+
+### `showHideTransition` <div className="label ios">iOS</div>
+
+The transition effect when showing and hiding the status bar using the `hidden` prop.
+
+| Type                                               | Default  |
+| -------------------------------------------------- | -------- |
+| [StatusBarAnimation](statusbar#statusbaranimation) | `'fade'` |
+
+---
+
+### `translucent` <div className="label android">Android</div>
+
+If the status bar is translucent. When translucent is set to `true`, the app will draw under the status bar. This is useful when using a semi transparent status bar color.
+
+:::warning
+Due to edge-to-edge enforcement introduced in Android 15, setting the status bar as translucent is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
+:::
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+## Methods
+
+### `popStackEntry()`
+
+```tsx
+static popStackEntry(entry: StatusBarProps);
+```
+
+Get and remove the last StatusBar entry from the stack.
+
+**Parameters:**
+
+| Name                                                       | Type | Description                           |
+| ---------------------------------------------------------- | ---- | ------------------------------------- |
+| entry <div className="label basic required">Required</div> | any  | Entry returned from `pushStackEntry`. |
+
+---
+
+### `pushStackEntry()`
+
+```tsx
+static pushStackEntry(props: StatusBarProps): StatusBarProps;
+```
+
+Push a StatusBar entry onto the stack. The return value should be passed to `popStackEntry` when complete.
+
+**Parameters:**
+
+| Name                                                       | Type | Description                                                      |
+| ---------------------------------------------------------- | ---- | ---------------------------------------------------------------- |
+| props <div className="label basic required">Required</div> | any  | Object containing the StatusBar props to use in the stack entry. |
+
+---
+
+### `replaceStackEntry()`
+
+```tsx
+static replaceStackEntry(
+  entry: StatusBarProps,
+  props: StatusBarProps
+): StatusBarProps;
+```
+
+Replace an existing StatusBar stack entry with new props.
+
+**Parameters:**
+
+| Name                                                       | Type | Description                                                                  |
+| ---------------------------------------------------------- | ---- | ---------------------------------------------------------------------------- |
+| entry <div className="label basic required">Required</div> | any  | Entry returned from `pushStackEntry` to replace.                             |
+| props <div className="label basic required">Required</div> | any  | Object containing the StatusBar props to use in the replacement stack entry. |
+
+---
+
+### `setBackgroundColor()` <div className="label android">Android</div>
+
+```tsx
+static setBackgroundColor(color: ColorValue, animated?: boolean);
+```
+
+Set the background color for the status bar.
+
+:::warning
+Due to edge-to-edge enforcement introduced in Android 15, setting background color of the status bar is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
+:::
+
+**Parameters:**
+
+| Name                                                       | Type    | Description               |
+| ---------------------------------------------------------- | ------- | ------------------------- |
+| color <div className="label basic required">Required</div> | string  | Background color.         |
+| animated                                                   | boolean | Animate the style change. |
+
+---
+
+### `setBarStyle()`
+
+```tsx
+static setBarStyle(style: StatusBarStyle, animated?: boolean);
+```
+
+Set the status bar style.
+
+**Parameters:**
+
+| Name                                                       | Type                                       | Description               |
+| ---------------------------------------------------------- | ------------------------------------------ | ------------------------- |
+| style <div className="label basic required">Required</div> | [StatusBarStyle](statusbar#statusbarstyle) | Status bar style to set.  |
+| animated                                                   | boolean                                    | Animate the style change. |
+
+---
+
+### `setHidden()`
+
+```tsx
+static setHidden(hidden: boolean, animation?: StatusBarAnimation);
+```
+
+Show or hide the status bar.
+
+**Parameters:**
+
+| Name                                                        | Type                                               | Description                                             |
+| ----------------------------------------------------------- | -------------------------------------------------- | ------------------------------------------------------- |
+| hidden <div className="label basic required">Required</div> | boolean                                            | Hide the status bar.                                    |
+| animation <div className="label ios">iOS</div>              | [StatusBarAnimation](statusbar#statusbaranimation) | Animation when changing the status bar hidden property. |
+
+---
+
+### 🗑️ `setNetworkActivityIndicatorVisible()` <div className="label ios">iOS</div>
+
+:::warning[Deprecated]
+The status bar network activity indicator is not supported in iOS 13 and later. This will be removed in a future release.
+:::
+
+```tsx
+static setNetworkActivityIndicatorVisible(visible: boolean);
+```
+
+Control the visibility of the network activity indicator.
+
+**Parameters:**
+
+| Name                                                         | Type    | Description         |
+| ------------------------------------------------------------ | ------- | ------------------- |
+| visible <div className="label basic required">Required</div> | boolean | Show the indicator. |
+
+---
+
+### `setTranslucent()` <div className="label android">Android</div>
+
+```tsx
+static setTranslucent(translucent: boolean);
+```
+
+Control the translucency of the status bar.
+
+:::warning
+Due to edge-to-edge enforcement introduced in Android 15, setting the status bar as translucent is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
+:::
+
+**Parameters:**
+
+| Name                                                             | Type    | Description         |
+| ---------------------------------------------------------------- | ------- | ------------------- |
+| translucent <div className="label basic required">Required</div> | boolean | Set as translucent. |
+
+## Type Definitions
+
+### StatusBarAnimation
+
+Status bar animation type for transitions on the iOS.
+
+| Type |
+| ---- |
+| enum |
+
+**Constants:**
+
+| Value     | Type   | Description     |
+| --------- | ------ | --------------- |
+| `'fade'`  | string | Fade animation  |
+| `'slide'` | string | Slide animation |
+| `'none'`  | string | No animation    |
+
+---
+
+### StatusBarStyle
+
+Status bar style type.
+
+| Type |
+| ---- |
+| enum |
+
+**Constants:**
+
+| Value             | Type   | Description                                                |
+| ----------------- | ------ | ---------------------------------------------------------- |
+| `'default'`       | string | Default status bar style (dark for iOS, light for Android) |
+| `'light-content'` | string | White texts and icons                                      |
+| `'dark-content'`  | string | Dark texts and icons (requires API>=23 on Android)         |
diff --git a/website/versioned_docs/version-0.82/style.md b/website/versioned_docs/version-0.82/style.md
index d847c0597cb..4890db4fbfa 100644
--- a/website/versioned_docs/version-0.82/style.md
+++ b/website/versioned_docs/version-0.82/style.md
@@ -10,7 +10,6 @@ The `style` prop can be a plain old JavaScript object. That's what we usually us
 As a component grows in complexity, it is often cleaner to use `StyleSheet.create` to define several styles in one place. Here's an example:
 
 ```SnackPlayer name=Style
-import React from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 
 const LotsOfStyles = () => {
diff --git a/website/versioned_docs/version-0.82/stylesheet.md b/website/versioned_docs/version-0.82/stylesheet.md
index e5e9283bc59..455246de7d7 100644
--- a/website/versioned_docs/version-0.82/stylesheet.md
+++ b/website/versioned_docs/version-0.82/stylesheet.md
@@ -6,7 +6,6 @@ title: StyleSheet
 A StyleSheet is an abstraction similar to CSS StyleSheets.
 
 ```SnackPlayer name=StyleSheet
-import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -62,7 +61,6 @@ static compose(style1: Object, style2: Object): Object | Object[];
 Combines two styles such that `style2` will override any styles in `style1`. If either style is falsy, the other one is returned without allocating an array, saving allocations and maintaining reference equality for PureComponent checks.
 
 ```SnackPlayer name=Compose
-import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -123,7 +121,6 @@ static flatten(style: Array<Object extends Record<string, ViewStyle | ImageStyle
 Flattens an array of style objects, into one aggregated style object.
 
 ```SnackPlayer name=Flatten
-import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -196,7 +193,6 @@ Sets a function to use to pre-process a style property value. This is used inter
 A very common pattern is to create overlays with position absolute and zero positioning (`position: 'absolute', left: 0, right: 0, top: 0, bottom: 0`), so `absoluteFill` can be used for convenience and to reduce duplication of these repeated styles. If you want, absoluteFill can be used to create a customized entry in a StyleSheet, e.g.:
 
 ```SnackPlayer name=absoluteFill
-import React from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -321,7 +317,6 @@ export default App;
 This is defined as the width of a thin line on the platform. It can be used as the thickness of a border or division between two elements. Example:
 
 ```SnackPlayer name=hairlineWidth
-import React from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 
 const App = () => (
diff --git a/website/versioned_docs/version-0.82/switch.md b/website/versioned_docs/version-0.82/switch.md
index 4f9055c6256..20c73c69db7 100644
--- a/website/versioned_docs/version-0.82/switch.md
+++ b/website/versioned_docs/version-0.82/switch.md
@@ -1,133 +1,133 @@
----
-id: switch
-title: Switch
----
-
-Renders a boolean input.
-
-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=Switch&supportedPlatforms=android,ios
-import React, {useState} from 'react';
-import {Switch, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [isEnabled, setIsEnabled] = useState(false);
-  const toggleSwitch = () => setIsEnabled(previousState => !previousState);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Switch
-          trackColor={{false: '#767577', true: '#81b0ff'}}
-          thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
-          ios_backgroundColor="#3e3e3e"
-          onValueChange={toggleSwitch}
-          value={isEnabled}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Props
-
-### [View Props](view.md#props)
-
-Inherits [View Props](view.md#props).
-
----
-
-### `disabled`
-
-If true the user won't be able to toggle the switch.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `ios_backgroundColor` <div className="label ios">iOS</div>
-
-On iOS, custom color for the background. This background color can be seen either when the switch value is `false` or when the switch is disabled (and the switch is translucent).
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `onChange`
-
-Invoked when the user tries to change the value of the switch. Receives the change event as an argument. If you want to only receive the new value, use `onValueChange` instead.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onValueChange`
-
-Invoked when the user tries to change the value of the switch. Receives the new value as an argument. If you want to instead receive an event, use `onChange`.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `ref`
-
-A ref setter that will be assigned an [element node](element-nodes) when mounted.
-
----
-
-### `thumbColor`
-
-Color of the foreground switch grip. If this is set on iOS, the switch grip will lose its drop shadow.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `trackColor`
-
-Custom colors for the switch track.
-
-_iOS_: When the switch value is `false`, the track shrinks into the border. If you want to change the color of the background exposed by the shrunken track, use [`ios_backgroundColor`](switch.md#ios_backgroundColor).
-
-| Type                                                         |
-| ------------------------------------------------------------ |
-| `md object: {false: [color](colors), true: [color](colors)}` |
-
----
-
-### `value`
-
-The value of the switch. If true the switch will be turned on. Default value is false.
-
-| Type |
-| ---- |
-| bool |
+---
+id: switch
+title: Switch
+---
+
+Renders a boolean input.
+
+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=Switch&supportedPlatforms=android,ios
+import {useState} from 'react';
+import {Switch, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [isEnabled, setIsEnabled] = useState(false);
+  const toggleSwitch = () => setIsEnabled(previousState => !previousState);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Switch
+          trackColor={{false: '#767577', true: '#81b0ff'}}
+          thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
+          ios_backgroundColor="#3e3e3e"
+          onValueChange={toggleSwitch}
+          value={isEnabled}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Props
+
+### [View Props](view.md#props)
+
+Inherits [View Props](view.md#props).
+
+---
+
+### `disabled`
+
+If true the user won't be able to toggle the switch.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `ios_backgroundColor` <div className="label ios">iOS</div>
+
+On iOS, custom color for the background. This background color can be seen either when the switch value is `false` or when the switch is disabled (and the switch is translucent).
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `onChange`
+
+Invoked when the user tries to change the value of the switch. Receives the change event as an argument. If you want to only receive the new value, use `onValueChange` instead.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onValueChange`
+
+Invoked when the user tries to change the value of the switch. Receives the new value as an argument. If you want to instead receive an event, use `onChange`.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `ref`
+
+A ref setter that will be assigned an [element node](element-nodes) when mounted.
+
+---
+
+### `thumbColor`
+
+Color of the foreground switch grip. If this is set on iOS, the switch grip will lose its drop shadow.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `trackColor`
+
+Custom colors for the switch track.
+
+_iOS_: When the switch value is `false`, the track shrinks into the border. If you want to change the color of the background exposed by the shrunken track, use [`ios_backgroundColor`](switch.md#ios_backgroundColor).
+
+| Type                                                         |
+| ------------------------------------------------------------ |
+| `md object: {false: [color](colors), true: [color](colors)}` |
+
+---
+
+### `value`
+
+The value of the switch. If true the switch will be turned on. Default value is false.
+
+| Type |
+| ---- |
+| bool |
diff --git a/website/versioned_docs/version-0.82/systrace.md b/website/versioned_docs/version-0.82/systrace.md
index 53cfd62c7a9..9aa54fe8e18 100644
--- a/website/versioned_docs/version-0.82/systrace.md
+++ b/website/versioned_docs/version-0.82/systrace.md
@@ -10,7 +10,6 @@ title: Systrace
 `Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Capture the non-Timed JS events in EasyProfiler.
 
 ```SnackPlayer name=Systrace%20Example
-import React from 'react';
 import {Button, Text, View, StyleSheet, Systrace} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.82/text-nodes.md b/website/versioned_docs/version-0.82/text-nodes.md
index 63f195ea4b5..2818909abdc 100644
--- a/website/versioned_docs/version-0.82/text-nodes.md
+++ b/website/versioned_docs/version-0.82/text-nodes.md
@@ -1,86 +1,86 @@
----
-id: text-nodes
-title: Text nodes
----
-
-Text nodes represent raw text content on the tree (similar to [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text) nodes on Web). They are not directly accessible via `refs`, but can be accessed using methods like [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes) on element refs.
-
-```SnackPlayer ext=js&name=Text%20instances%20example
-import * as React from 'react';
-import { SafeAreaView, StyleSheet, Text } from 'react-native';
-
-const TextWithRefs = () => {
-  const ref = React.useRef(null);
-  const [viewInfo, setViewInfo] = React.useState('');
-
-  React.useEffect(() => {
-    // `textElement` is an object implementing the interface described here.
-    const textElement = ref.current;
-    const textNode = textElement.childNodes[0];
-    setViewInfo(
-      `Text content is: ${textNode.nodeValue}`,
-    );
-  }, []);
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <Text ref={ref}>
-        Hello world!
-      </Text>
-      <Text>{viewInfo}</Text>
-    </SafeAreaView>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  content: {
-    padding: 10,
-    backgroundColor: 'gray',
-  },
-});
-
-export default TextWithRefs;
-```
-
----
-
-## Reference
-
-### Web-compatible API
-
-From [`CharacterData`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData):
-
-- Properties
-  - [`data`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/data)
-  - [`length`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/length)
-  - [`nextElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/nextElementSibling)
-  - [`previousElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/previousElementSibling)
-- Methods
-  - [`substringData()`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/substringData)
-
-From [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/Node):
-
-- Properties
-  - [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)
-  - [`firstChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild)
-  - [`isConnected`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected)
-  - [`lastChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild)
-  - [`nextSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling)
-  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
-  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
-  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
-  - [`ownerDocument`](https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument)
-    - ℹ️ Will return the [document node](/docs/next/document-nodes) where this component was rendered.
-  - [`parentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)
-  - [`parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)
-  - [`previousSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling)
-  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
-- Methods
-  - [`compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
-  - [`contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains)
-  - [`getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)
-    - ℹ️ Will return a reference to itself if the component is not mounted.
-  - [`hasChildNodes()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes)
+---
+id: text-nodes
+title: Text nodes
+---
+
+Text nodes represent raw text content on the tree (similar to [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text) nodes on Web). They are not directly accessible via `refs`, but can be accessed using methods like [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes) on element refs.
+
+```SnackPlayer ext=js&name=Text%20instances%20example
+import {useEffect, useRef, useState} from 'react';
+import {SafeAreaView, StyleSheet, Text} from 'react-native';
+
+const TextWithRefs = () => {
+  const ref = useRef(null);
+  const [viewInfo, setViewInfo] = useState('');
+
+  useEffect(() => {
+    // `textElement` is an object implementing the interface described here.
+    const textElement = ref.current;
+    const textNode = textElement.childNodes[0];
+    setViewInfo(
+      `Text content is: ${textNode.nodeValue}`,
+    );
+  }, []);
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <Text ref={ref}>
+        Hello world!
+      </Text>
+      <Text>{viewInfo}</Text>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    padding: 10,
+    backgroundColor: 'gray',
+  },
+});
+
+export default TextWithRefs;
+```
+
+---
+
+## Reference
+
+### Web-compatible API
+
+From [`CharacterData`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData):
+
+- Properties
+  - [`data`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/data)
+  - [`length`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/length)
+  - [`nextElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/nextElementSibling)
+  - [`previousElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/previousElementSibling)
+- Methods
+  - [`substringData()`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/substringData)
+
+From [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/Node):
+
+- Properties
+  - [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)
+  - [`firstChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild)
+  - [`isConnected`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected)
+  - [`lastChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild)
+  - [`nextSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling)
+  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
+  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
+  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
+  - [`ownerDocument`](https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument)
+    - ℹ️ Will return the [document node](/docs/next/document-nodes) where this component was rendered.
+  - [`parentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)
+  - [`parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)
+  - [`previousSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling)
+  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
+- Methods
+  - [`compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
+  - [`contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains)
+  - [`getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)
+    - ℹ️ Will return a reference to itself if the component is not mounted.
+  - [`hasChildNodes()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes)
diff --git a/website/versioned_docs/version-0.82/text-style-props.md b/website/versioned_docs/version-0.82/text-style-props.md
index 64ffc4ef816..9605beca3dd 100644
--- a/website/versioned_docs/version-0.82/text-style-props.md
+++ b/website/versioned_docs/version-0.82/text-style-props.md
@@ -1,948 +1,948 @@
----
-id: text-style-props
-title: Text Style Props
----
-
-### Example
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=js&dependencies=@react-native-community/slider
-import React, {useState} from 'react';
-import {
-  FlatList,
-  Platform,
-  ScrollView,
-  StyleSheet,
-  Switch,
-  Text,
-  TouchableWithoutFeedback,
-  View,
-} from 'react-native';
-import Slider from '@react-native-community/slider';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const fontStyles = ['normal', 'italic'];
-const fontVariants = [
-  undefined,
-  'small-caps',
-  'oldstyle-nums',
-  'lining-nums',
-  'tabular-nums',
-  'proportional-nums',
-];
-const fontWeights = [
-  'normal',
-  'bold',
-  '100',
-  '200',
-  '300',
-  '400',
-  '500',
-  '600',
-  '700',
-  '800',
-  '900',
-];
-const textAlignments = ['auto', 'left', 'right', 'center', 'justify'];
-const textDecorationLines = [
-  'none',
-  'underline',
-  'line-through',
-  'underline line-through',
-];
-const textDecorationStyles = ['solid', 'double', 'dotted', 'dashed'];
-const textTransformations = ['none', 'uppercase', 'lowercase', 'capitalize'];
-const textAlignmentsVertical = ['auto', 'top', 'bottom', 'center'];
-const writingDirections = ['auto', 'ltr', 'rtl'];
-
-const App = () => {
-  const [fontSize, setFontSize] = useState(20);
-  const [fontStyleIdx, setFontStyleIdx] = useState(0);
-  const [fontWeightIdx, setFontWeightIdx] = useState(0);
-  const [lineHeight, setLineHeight] = useState(24);
-  const [textAlignIdx, setTextAlignIdx] = useState(0);
-  const [textDecorationLineIdx, setTextDecorationLineIdx] = useState(0);
-  const [includeFontPadding, setIncludeFontPadding] = useState(false);
-  const [textVerticalAlignIdx, setTextVerticalAlignIdx] = useState(0);
-  const [fontVariantIdx, setFontVariantIdx] = useState(0);
-  const [letterSpacing, setLetterSpacing] = useState(0);
-  const [textDecorationStyleIdx, setTextDecorationStyleIdx] = useState(0);
-  const [textTransformIdx, setTextTransformIdx] = useState(0);
-  const [writingDirectionIdx, setWritingDirectionIdx] = useState(0);
-  const [textShadowRadius, setTextShadowRadius] = useState(0);
-  const [textShadowOffset, setTextShadowOffset] = useState({
-    height: 0,
-    width: 0,
-  });
-
-  const [, ...validFontVariants] = fontVariants;
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.pargraphWrapper}>
-          <Text
-            style={[
-              styles.paragraph,
-              {
-                fontSize,
-                fontStyle: fontStyles[fontStyleIdx],
-                fontWeight: fontWeights[fontWeightIdx],
-                lineHeight,
-                textAlign: textAlignments[textAlignIdx],
-                textDecorationLine: textDecorationLines[textDecorationLineIdx],
-                textTransform: textTransformations[textTransformIdx],
-                textAlignVertical: textAlignmentsVertical[textVerticalAlignIdx],
-                fontVariant:
-                  fontVariantIdx === 0
-                    ? undefined
-                    : [validFontVariants[fontVariantIdx - 1]],
-                letterSpacing,
-                includeFontPadding,
-                textDecorationStyle:
-                  textDecorationStyles[textDecorationStyleIdx],
-                writingDirection: writingDirections[writingDirectionIdx],
-                textShadowOffset,
-                textShadowRadius,
-              },
-            ]}>
-            Lorem Ipsum is simply dummy text of the printing and typesetting
-            industry. 112 Likes
-          </Text>
-        </View>
-        <ScrollView style={{padding: 12}}>
-          <View>
-            <Text>Common platform properties</Text>
-            <CustomSlider
-              label="Text Shadow Offset - Height"
-              value={textShadowOffset.height}
-              minimumValue={-40}
-              maximumValue={40}
-              handleValueChange={val =>
-                setTextShadowOffset(prev => ({...prev, height: val}))
-              }
-            />
-            <CustomSlider
-              label="Text Shadow Offset - Width"
-              value={textShadowOffset.width}
-              minimumValue={-40}
-              maximumValue={40}
-              handleValueChange={val =>
-                setTextShadowOffset(prev => ({...prev, width: val}))
-              }
-            />
-            <CustomSlider
-              label="Font Size"
-              value={fontSize}
-              maximumValue={40}
-              handleValueChange={setFontSize}
-            />
-            <CustomPicker
-              label="Font Style"
-              data={fontStyles}
-              currentIndex={fontStyleIdx}
-              onSelected={setFontStyleIdx}
-            />
-            <CustomPicker
-              label="Font Weight"
-              data={fontWeights}
-              currentIndex={fontWeightIdx}
-              onSelected={setFontWeightIdx}
-            />
-            <CustomSlider
-              label="Line Height"
-              value={lineHeight}
-              minimumValue={10}
-              maximumValue={50}
-              handleValueChange={setLineHeight}
-            />
-            <CustomPicker
-              label="Text Align"
-              data={textAlignments}
-              currentIndex={textAlignIdx}
-              onSelected={setTextAlignIdx}
-            />
-            <CustomPicker
-              label="Text Decoration Line"
-              data={textDecorationLines}
-              currentIndex={textDecorationLineIdx}
-              onSelected={setTextDecorationLineIdx}
-            />
-            <CustomSlider
-              label="Text Shadow Radius"
-              value={textShadowRadius}
-              handleValueChange={setTextShadowRadius}
-            />
-            <CustomPicker
-              label="Font Variant"
-              data={fontVariants}
-              currentIndex={fontVariantIdx}
-              onSelected={setFontVariantIdx}
-            />
-            <CustomSlider
-              label="Letter Spacing"
-              step={0.1}
-              value={letterSpacing}
-              handleValueChange={setLetterSpacing}
-            />
-            <CustomPicker
-              label="Text Transform"
-              data={textTransformations}
-              currentIndex={textTransformIdx}
-              onSelected={setTextTransformIdx}
-            />
-          </View>
-          {Platform.OS === 'android' && (
-            <View style={styles.platformContainer}>
-              <Text style={styles.platformContainerTitle}>
-                Android only properties
-              </Text>
-              <CustomPicker
-                label="Text Vertical Align"
-                data={textAlignmentsVertical}
-                currentIndex={textVerticalAlignIdx}
-                onSelected={setTextVerticalAlignIdx}
-              />
-              <CustomSwitch
-                label="Include Font Padding"
-                handleValueChange={setIncludeFontPadding}
-                value={includeFontPadding}
-              />
-            </View>
-          )}
-          {Platform.OS === 'ios' && (
-            <View style={styles.platformContainer}>
-              <Text style={styles.platformContainerTitle}>
-                iOS only properties
-              </Text>
-              <CustomPicker
-                label="Text Decoration Style"
-                data={textDecorationStyles}
-                currentIndex={textDecorationStyleIdx}
-                onSelected={setTextDecorationStyleIdx}
-              />
-              <CustomPicker
-                label="Writing Direction"
-                data={writingDirections}
-                currentIndex={writingDirectionIdx}
-                onSelected={setWritingDirectionIdx}
-              />
-            </View>
-          )}
-        </ScrollView>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const CustomSwitch = ({label, handleValueChange, value}) => {
-  return (
-    <>
-      <Text style={styles.title}>{label}</Text>
-      <View style={{alignItems: 'flex-start'}}>
-        <Switch
-          trackColor={{false: '#767577', true: '#DAA520'}}
-          thumbColor={value ? '#DAA520' : '#f4f3f4'}
-          onValueChange={handleValueChange}
-          value={value}
-        />
-      </View>
-    </>
-  );
-};
-
-const CustomSlider = ({
-  label,
-  handleValueChange,
-  step = 1,
-  minimumValue = 0,
-  maximumValue = 10,
-  value,
-}) => {
-  return (
-    <>
-      {label && (
-        <Text style={styles.title}>{`${label} (${value.toFixed(2)})`}</Text>
-      )}
-      <View style={styles.wrapperHorizontal}>
-        <Slider
-          thumbTintColor="#06bcee"
-          minimumTrackTintColor="#64d7ffbb"
-          minimumValue={minimumValue}
-          maximumValue={maximumValue}
-          step={step}
-          onValueChange={handleValueChange}
-          value={value}
-        />
-      </View>
-    </>
-  );
-};
-
-const CustomPicker = ({label, data, currentIndex, onSelected}) => {
-  return (
-    <>
-      <Text style={styles.title}>{label}</Text>
-      <View style={styles.wrapperHorizontal}>
-        <FlatList
-          bounces
-          horizontal
-          data={data}
-          keyExtractor={item => String(item)}
-          renderItem={({item, index}) => {
-            const selected = index === currentIndex;
-            return (
-              <TouchableWithoutFeedback onPress={() => onSelected(index)}>
-                <View
-                  style={[
-                    styles.itemStyleHorizontal,
-                    selected && styles.itemSelectedStyleHorizontal,
-                  ]}>
-                  <Text
-                    style={{
-                      textAlign: 'center',
-                      color: selected ? 'black' : 'grey',
-                      fontWeight: selected ? 'bold' : 'normal',
-                    }}>
-                    {item + ''}
-                  </Text>
-                </View>
-              </TouchableWithoutFeedback>
-            );
-          }}
-        />
-      </View>
-    </>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  pargraphWrapper: {
-    backgroundColor: 'black',
-  },
-  paragraph: {
-    color: '#fff',
-    textDecorationColor: 'yellow',
-    textShadowColor: 'red',
-    textShadowRadius: 1,
-    padding: 24,
-  },
-  wrapperHorizontal: {
-    justifyContent: 'center',
-    color: 'black',
-  },
-  itemStyleHorizontal: {
-    marginRight: 10,
-    height: 50,
-    padding: 8,
-    borderWidth: 1,
-    borderColor: 'grey',
-    borderRadius: 8,
-    textAlign: 'center',
-    justifyContent: 'center',
-  },
-  itemSelectedStyleHorizontal: {
-    borderWidth: 2,
-    borderColor: '#06bcee',
-  },
-  platformContainer: {
-    marginTop: 8,
-    borderTopWidth: 1,
-  },
-  platformContainerTitle: {
-    marginTop: 8,
-  },
-  title: {
-    fontWeight: 'bold',
-    marginVertical: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=tsx&dependencies=@react-native-community/slider
-import React, {useState} from 'react';
-import {
-  FlatList,
-  Platform,
-  ScrollView,
-  StyleSheet,
-  Switch,
-  Text,
-  TouchableWithoutFeedback,
-  View,
-  TextStyle,
-} from 'react-native';
-import Slider from '@react-native-community/slider';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [fontSize, setFontSize] = useState(20);
-  const [fontStyleIdx, setFontStyleIdx] = useState(0);
-  const [fontWeightIdx, setFontWeightIdx] = useState(0);
-  const [lineHeight, setLineHeight] = useState(24);
-  const [textAlignIdx, setTextAlignIdx] = useState(0);
-  const [textDecorationLineIdx, setTextDecorationLineIdx] = useState(0);
-  const [includeFontPadding, setIncludeFontPadding] = useState(false);
-  const [textVerticalAlignIdx, setTextVerticalAlignIdx] = useState(0);
-  const [fontVariantIdx, setFontVariantIdx] = useState(0);
-  const [letterSpacing, setLetterSpacing] = useState(0);
-  const [textDecorationStyleIdx, setTextDecorationStyleIdx] = useState(0);
-  const [textTransformIdx, setTextTransformIdx] = useState(0);
-  const [writingDirectionIdx, setWritingDirectionIdx] = useState(0);
-  const [textShadowRadius, setTextShadowRadius] = useState(0);
-  const [textShadowOffset, setTextShadowOffset] = useState({
-    height: 0,
-    width: 0,
-  });
-
-  const [, ...validFontVariants] = fontVariants;
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.pargraphWrapper}>
-          <Text
-            style={[
-              styles.paragraph,
-              {
-                fontSize,
-                fontStyle: fontStyles[fontStyleIdx],
-                fontWeight: fontWeights[fontWeightIdx],
-                lineHeight,
-                textAlign: textAlignments[textAlignIdx],
-                textDecorationLine: textDecorationLines[textDecorationLineIdx],
-                textTransform: textTransformations[textTransformIdx],
-                textAlignVertical: textAlignmentsVertical[textVerticalAlignIdx],
-                fontVariant:
-                  fontVariantIdx === 0
-                    ? undefined
-                    : [validFontVariants[fontVariantIdx - 1]],
-                letterSpacing,
-                includeFontPadding,
-                textDecorationStyle:
-                  textDecorationStyles[textDecorationStyleIdx],
-                writingDirection: writingDirections[writingDirectionIdx],
-                textShadowOffset,
-                textShadowRadius,
-              } as TextStyle,
-            ]}>
-            Lorem Ipsum is simply dummy text of the printing and typesetting
-            industry. 112 Likes
-          </Text>
-        </View>
-        <ScrollView style={{padding: 12}}>
-          <View>
-            <Text>Common platform properties</Text>
-            <CustomSlider
-              label="Text Shadow Offset - Height"
-              value={textShadowOffset.height}
-              minimumValue={-40}
-              maximumValue={40}
-              handleValueChange={(val: number) =>
-                setTextShadowOffset(prev => ({...prev, height: val}))
-              }
-            />
-            <CustomSlider
-              label="Text Shadow Offset - Width"
-              value={textShadowOffset.width}
-              minimumValue={-40}
-              maximumValue={40}
-              handleValueChange={(val: number) =>
-                setTextShadowOffset(prev => ({...prev, width: val}))
-              }
-            />
-            <CustomSlider
-              label="Font Size"
-              value={fontSize}
-              maximumValue={40}
-              handleValueChange={setFontSize}
-            />
-            <CustomPicker
-              label="Font Style"
-              data={fontStyles}
-              currentIndex={fontStyleIdx}
-              onSelected={setFontStyleIdx}
-            />
-            <CustomPicker
-              label="Font Weight"
-              data={fontWeights}
-              currentIndex={fontWeightIdx}
-              onSelected={setFontWeightIdx}
-            />
-            <CustomSlider
-              label="Line Height"
-              value={lineHeight}
-              minimumValue={10}
-              maximumValue={50}
-              handleValueChange={setLineHeight}
-            />
-            <CustomPicker
-              label="Text Align"
-              data={textAlignments}
-              currentIndex={textAlignIdx}
-              onSelected={setTextAlignIdx}
-            />
-            <CustomPicker
-              label="Text Decoration Line"
-              data={textDecorationLines}
-              currentIndex={textDecorationLineIdx}
-              onSelected={setTextDecorationLineIdx}
-            />
-            <CustomSlider
-              label="Text Shadow Radius"
-              value={textShadowRadius}
-              handleValueChange={setTextShadowRadius}
-            />
-            <CustomPicker
-              label="Font Variant"
-              data={fontVariants}
-              currentIndex={fontVariantIdx}
-              onSelected={setFontVariantIdx}
-            />
-            <CustomSlider
-              label="Letter Spacing"
-              step={0.1}
-              value={letterSpacing}
-              handleValueChange={setLetterSpacing}
-            />
-            <CustomPicker
-              label="Text Transform"
-              data={textTransformations}
-              currentIndex={textTransformIdx}
-              onSelected={setTextTransformIdx}
-            />
-          </View>
-          {Platform.OS === 'android' && (
-            <View style={styles.platformContainer}>
-              <Text style={styles.platformContainerTitle}>
-                Android only properties
-              </Text>
-              <CustomPicker
-                label="Text Vertical Align"
-                data={textAlignmentsVertical}
-                currentIndex={textVerticalAlignIdx}
-                onSelected={setTextVerticalAlignIdx}
-              />
-              <CustomSwitch
-                label="Include Font Padding"
-                handleValueChange={setIncludeFontPadding}
-                value={includeFontPadding}
-              />
-            </View>
-          )}
-          {Platform.OS === 'ios' && (
-            <View style={styles.platformContainer}>
-              <Text style={styles.platformContainerTitle}>
-                iOS only properties
-              </Text>
-              <CustomPicker
-                label="Text Decoration Style"
-                data={textDecorationStyles}
-                currentIndex={textDecorationStyleIdx}
-                onSelected={setTextDecorationStyleIdx}
-              />
-              <CustomPicker
-                label="Writing Direction"
-                data={writingDirections}
-                currentIndex={writingDirectionIdx}
-                onSelected={setWritingDirectionIdx}
-              />
-            </View>
-          )}
-        </ScrollView>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-type CustomSwitchProps = {
-  label: string;
-  value: boolean;
-  handleValueChange: (value: boolean) => void;
-};
-
-const CustomSwitch = ({label, handleValueChange, value}: CustomSwitchProps) => {
-  return (
-    <>
-      <Text style={styles.title}>{label}</Text>
-      <View style={{alignItems: 'flex-start'}}>
-        <Switch
-          trackColor={{false: '#767577', true: '#DAA520'}}
-          thumbColor={value ? '#DAA520' : '#f4f3f4'}
-          onValueChange={handleValueChange}
-          value={value}
-        />
-      </View>
-    </>
-  );
-};
-
-type CustomSliderProps = {
-  label: string;
-  value: number;
-  handleValueChange: (value: number) => void;
-  step?: number;
-  minimumValue?: number;
-  maximumValue?: number;
-};
-
-const CustomSlider = ({
-  label,
-  handleValueChange,
-  step = 1,
-  minimumValue = 0,
-  maximumValue = 10,
-  value,
-}: CustomSliderProps) => {
-  return (
-    <>
-      {label && (
-        <Text style={styles.title}>{`${label} (${value.toFixed(2)})`}</Text>
-      )}
-      <View style={styles.wrapperHorizontal}>
-        <Slider
-          thumbTintColor="#06bcee"
-          minimumTrackTintColor="#64d7ffbb"
-          minimumValue={minimumValue}
-          maximumValue={maximumValue}
-          step={step}
-          onValueChange={handleValueChange}
-          value={value}
-        />
-      </View>
-    </>
-  );
-};
-
-type CustomPickerProps = {
-  label: string;
-  data?: ArrayLike<any> | null;
-  currentIndex: number;
-  onSelected: (index: number) => void;
-};
-
-const CustomPicker = ({
-  label,
-  data,
-  currentIndex,
-  onSelected,
-}: CustomPickerProps) => {
-  return (
-    <>
-      <Text style={styles.title}>{label}</Text>
-      <View style={styles.wrapperHorizontal}>
-        <FlatList
-          horizontal
-          data={data}
-          keyExtractor={item => String(item)}
-          renderItem={({item, index}: {item: string; index: number}) => {
-            const selected = index === currentIndex;
-            return (
-              <TouchableWithoutFeedback onPress={() => onSelected(index)}>
-                <View
-                  style={[
-                    styles.itemStyleHorizontal,
-                    selected && styles.itemSelectedStyleHorizontal,
-                  ]}>
-                  <Text
-                    style={{
-                      textAlign: 'center',
-                      color: selected ? 'black' : 'grey',
-                      fontWeight: selected ? 'bold' : 'normal',
-                    }}>
-                    {item + ''}
-                  </Text>
-                </View>
-              </TouchableWithoutFeedback>
-            );
-          }}
-        />
-      </View>
-    </>
-  );
-};
-
-const fontStyles = ['normal', 'italic'];
-const fontVariants = [
-  undefined,
-  'small-caps',
-  'oldstyle-nums',
-  'lining-nums',
-  'tabular-nums',
-  'proportional-nums',
-];
-const fontWeights = [
-  'normal',
-  'bold',
-  '100',
-  '200',
-  '300',
-  '400',
-  '500',
-  '600',
-  '700',
-  '800',
-  '900',
-];
-const textAlignments = ['auto', 'left', 'right', 'center', 'justify'];
-const textDecorationLines = [
-  'none',
-  'underline',
-  'line-through',
-  'underline line-through',
-];
-const textDecorationStyles = ['solid', 'double', 'dotted', 'dashed'];
-const textTransformations = ['none', 'uppercase', 'lowercase', 'capitalize'];
-const textAlignmentsVertical = ['auto', 'top', 'bottom', 'center'];
-const writingDirections = ['auto', 'ltr', 'rtl'];
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  pargraphWrapper: {
-    backgroundColor: 'black',
-  },
-  paragraph: {
-    color: '#fff',
-    textDecorationColor: 'yellow',
-    textShadowColor: 'red',
-    textShadowRadius: 1,
-    padding: 24,
-  },
-  wrapperHorizontal: {
-    justifyContent: 'center',
-    color: 'black',
-  },
-  itemStyleHorizontal: {
-    marginRight: 10,
-    height: 50,
-    padding: 8,
-    borderWidth: 1,
-    borderColor: 'grey',
-    borderRadius: 8,
-    textAlign: 'center',
-    justifyContent: 'center',
-  },
-  itemSelectedStyleHorizontal: {
-    borderWidth: 2,
-    borderColor: '#06bcee',
-  },
-  platformContainer: {
-    marginTop: 8,
-    borderTopWidth: 1,
-  },
-  platformContainerTitle: {
-    marginTop: 8,
-  },
-  title: {
-    fontWeight: 'bold',
-    marginVertical: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-# Reference
-
-## Props
-
-### `color`
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `fontFamily`
-
-| Type   |
-| ------ |
-| string |
-
-The generic font families `system-ui`, `ui-sans-serif`, `ui-serif`, `ui-monospace`, and `ui-rounded` are supported on iOS.
-
----
-
-### `fontSize`
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `fontStyle`
-
-| Type                         |
-| ---------------------------- |
-| enum(`'normal'`, `'italic'`) |
-
----
-
-### `fontWeight`
-
-Specifies font weight. The values `'normal'` and `'bold'` are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen.
-
-| Type                                                                                                                  | Default    |
-| --------------------------------------------------------------------------------------------------------------------- | ---------- |
-| enum(`'normal'`, `'bold'`, `'100'`, `'200'`, `'300'`, `'400'`, `'500'`, `'600'`, `'700'`, `'800'`, `'900'`) or number | `'normal'` |
-
----
-
-### `includeFontPadding` <div className="label android">Android</div>
-
-Set to `false` to remove extra font padding intended to make space for certain ascenders / descenders. With some fonts, this padding can make text look slightly misaligned when centered vertically. For best results also set `textAlignVertical` to `center`.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `true`  |
-
----
-
-### `fontVariant`
-
-Allows you to set all the font variants for a font. Can be set by using an array of enums or a space-separated string e.g. `'small-caps common-ligatures'`.
-
-| Type                                                                                                                 | Default |
-| -------------------------------------------------------------------------------------------------------------------- | ------- |
-| array of enum(`'small-caps'`, `'oldstyle-nums'`, `'lining-nums'`, `'tabular-nums'`, `'proportional-nums'`) or string | `[]`    |
-
----
-
-### `letterSpacing`
-
-Increase or decrease the spacing between characters. By default there is no extra letter spacing.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `lineHeight`
-
-Numeric value that controls the vertical spacing between lines of text within a text element. It specifies the distance between the baselines of consecutive lines of text.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `textAlign`
-
-Specifies text alignment. On Android, the value 'justify' is only supported on Oreo (8.0) or above (API level >= 26). The value will fallback to `left` on lower Android versions.
-
-| Type                                                         | Default  |
-| ------------------------------------------------------------ | -------- |
-| enum(`'auto'`, `'left'`, `'right'`, `'center'`, `'justify'`) | `'auto'` |
-
----
-
-### `textAlignVertical` <div className="label android">Android</div>
-
-An alias for `verticalAlign` style prop, if you use both properties, `verticalAlign` will take precedence over `textAlignVertical`
-
-| Type                                            | Default  |
-| ----------------------------------------------- | -------- |
-| enum(`'auto'`, `'top'`, `'bottom'`, `'center'`) | `'auto'` |
-
----
-
-### `textDecorationColor` <div className="label ios">iOS</div>
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `textDecorationLine`
-
-| Type                                                                        | Default  |
-| --------------------------------------------------------------------------- | -------- |
-| enum(`'none'`, `'underline'`, `'line-through'`, `'underline line-through'`) | `'none'` |
-
----
-
-### `textDecorationStyle` <div className="label ios">iOS</div>
-
-| Type                                                | Default   |
-| --------------------------------------------------- | --------- |
-| enum(`'solid'`, `'double'`, `'dotted'`, `'dashed'`) | `'solid'` |
-
----
-
-### `textShadowColor`
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `textShadowOffset`
-
-| Type                                        |
-| ------------------------------------------- |
-| object: `{width?: number, height?: number}` |
-
----
-
-### `textShadowRadius`
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `textTransform`
-
-| Type                                                         | Default  |
-| ------------------------------------------------------------ | -------- |
-| enum(`'none'`, `'uppercase'`, `'lowercase'`, `'capitalize'`) | `'none'` |
-
----
-
-### `verticalAlign` <div className="label android">Android</div>
-
-| Type                                            | Default  |
-| ----------------------------------------------- | -------- |
-| enum(`'auto'`, `'top'`, `'bottom'`, `'middle'`) | `'auto'` |
-
----
-
-### `writingDirection` <div className="label ios">iOS</div>
-
-| Type                             | Default  |
-| -------------------------------- | -------- |
-| enum(`'auto'`, `'ltr'`, `'rtl'`) | `'auto'` |
-
----
-
-### `userSelect`
-
-It allows the user to select text and to use the native copy and paste functionality. Has precedence over the `selectable` prop.
-
-| Type                                                     | Default |
-| -------------------------------------------------------- | ------- |
-| enum(`'auto'`, `'text'`, `'none'`, `'contain'`, `'all'`) | `none`  |
+---
+id: text-style-props
+title: Text Style Props
+---
+
+### Example
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=js&dependencies=@react-native-community/slider
+import {useState} from 'react';
+import {
+  FlatList,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Switch,
+  Text,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+import Slider from '@react-native-community/slider';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const fontStyles = ['normal', 'italic'];
+const fontVariants = [
+  undefined,
+  'small-caps',
+  'oldstyle-nums',
+  'lining-nums',
+  'tabular-nums',
+  'proportional-nums',
+];
+const fontWeights = [
+  'normal',
+  'bold',
+  '100',
+  '200',
+  '300',
+  '400',
+  '500',
+  '600',
+  '700',
+  '800',
+  '900',
+];
+const textAlignments = ['auto', 'left', 'right', 'center', 'justify'];
+const textDecorationLines = [
+  'none',
+  'underline',
+  'line-through',
+  'underline line-through',
+];
+const textDecorationStyles = ['solid', 'double', 'dotted', 'dashed'];
+const textTransformations = ['none', 'uppercase', 'lowercase', 'capitalize'];
+const textAlignmentsVertical = ['auto', 'top', 'bottom', 'center'];
+const writingDirections = ['auto', 'ltr', 'rtl'];
+
+const App = () => {
+  const [fontSize, setFontSize] = useState(20);
+  const [fontStyleIdx, setFontStyleIdx] = useState(0);
+  const [fontWeightIdx, setFontWeightIdx] = useState(0);
+  const [lineHeight, setLineHeight] = useState(24);
+  const [textAlignIdx, setTextAlignIdx] = useState(0);
+  const [textDecorationLineIdx, setTextDecorationLineIdx] = useState(0);
+  const [includeFontPadding, setIncludeFontPadding] = useState(false);
+  const [textVerticalAlignIdx, setTextVerticalAlignIdx] = useState(0);
+  const [fontVariantIdx, setFontVariantIdx] = useState(0);
+  const [letterSpacing, setLetterSpacing] = useState(0);
+  const [textDecorationStyleIdx, setTextDecorationStyleIdx] = useState(0);
+  const [textTransformIdx, setTextTransformIdx] = useState(0);
+  const [writingDirectionIdx, setWritingDirectionIdx] = useState(0);
+  const [textShadowRadius, setTextShadowRadius] = useState(0);
+  const [textShadowOffset, setTextShadowOffset] = useState({
+    height: 0,
+    width: 0,
+  });
+
+  const [, ...validFontVariants] = fontVariants;
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.pargraphWrapper}>
+          <Text
+            style={[
+              styles.paragraph,
+              {
+                fontSize,
+                fontStyle: fontStyles[fontStyleIdx],
+                fontWeight: fontWeights[fontWeightIdx],
+                lineHeight,
+                textAlign: textAlignments[textAlignIdx],
+                textDecorationLine: textDecorationLines[textDecorationLineIdx],
+                textTransform: textTransformations[textTransformIdx],
+                textAlignVertical: textAlignmentsVertical[textVerticalAlignIdx],
+                fontVariant:
+                  fontVariantIdx === 0
+                    ? undefined
+                    : [validFontVariants[fontVariantIdx - 1]],
+                letterSpacing,
+                includeFontPadding,
+                textDecorationStyle:
+                  textDecorationStyles[textDecorationStyleIdx],
+                writingDirection: writingDirections[writingDirectionIdx],
+                textShadowOffset,
+                textShadowRadius,
+              },
+            ]}>
+            Lorem Ipsum is simply dummy text of the printing and typesetting
+            industry. 112 Likes
+          </Text>
+        </View>
+        <ScrollView style={{padding: 12}}>
+          <View>
+            <Text>Common platform properties</Text>
+            <CustomSlider
+              label="Text Shadow Offset - Height"
+              value={textShadowOffset.height}
+              minimumValue={-40}
+              maximumValue={40}
+              handleValueChange={val =>
+                setTextShadowOffset(prev => ({...prev, height: val}))
+              }
+            />
+            <CustomSlider
+              label="Text Shadow Offset - Width"
+              value={textShadowOffset.width}
+              minimumValue={-40}
+              maximumValue={40}
+              handleValueChange={val =>
+                setTextShadowOffset(prev => ({...prev, width: val}))
+              }
+            />
+            <CustomSlider
+              label="Font Size"
+              value={fontSize}
+              maximumValue={40}
+              handleValueChange={setFontSize}
+            />
+            <CustomPicker
+              label="Font Style"
+              data={fontStyles}
+              currentIndex={fontStyleIdx}
+              onSelected={setFontStyleIdx}
+            />
+            <CustomPicker
+              label="Font Weight"
+              data={fontWeights}
+              currentIndex={fontWeightIdx}
+              onSelected={setFontWeightIdx}
+            />
+            <CustomSlider
+              label="Line Height"
+              value={lineHeight}
+              minimumValue={10}
+              maximumValue={50}
+              handleValueChange={setLineHeight}
+            />
+            <CustomPicker
+              label="Text Align"
+              data={textAlignments}
+              currentIndex={textAlignIdx}
+              onSelected={setTextAlignIdx}
+            />
+            <CustomPicker
+              label="Text Decoration Line"
+              data={textDecorationLines}
+              currentIndex={textDecorationLineIdx}
+              onSelected={setTextDecorationLineIdx}
+            />
+            <CustomSlider
+              label="Text Shadow Radius"
+              value={textShadowRadius}
+              handleValueChange={setTextShadowRadius}
+            />
+            <CustomPicker
+              label="Font Variant"
+              data={fontVariants}
+              currentIndex={fontVariantIdx}
+              onSelected={setFontVariantIdx}
+            />
+            <CustomSlider
+              label="Letter Spacing"
+              step={0.1}
+              value={letterSpacing}
+              handleValueChange={setLetterSpacing}
+            />
+            <CustomPicker
+              label="Text Transform"
+              data={textTransformations}
+              currentIndex={textTransformIdx}
+              onSelected={setTextTransformIdx}
+            />
+          </View>
+          {Platform.OS === 'android' && (
+            <View style={styles.platformContainer}>
+              <Text style={styles.platformContainerTitle}>
+                Android only properties
+              </Text>
+              <CustomPicker
+                label="Text Vertical Align"
+                data={textAlignmentsVertical}
+                currentIndex={textVerticalAlignIdx}
+                onSelected={setTextVerticalAlignIdx}
+              />
+              <CustomSwitch
+                label="Include Font Padding"
+                handleValueChange={setIncludeFontPadding}
+                value={includeFontPadding}
+              />
+            </View>
+          )}
+          {Platform.OS === 'ios' && (
+            <View style={styles.platformContainer}>
+              <Text style={styles.platformContainerTitle}>
+                iOS only properties
+              </Text>
+              <CustomPicker
+                label="Text Decoration Style"
+                data={textDecorationStyles}
+                currentIndex={textDecorationStyleIdx}
+                onSelected={setTextDecorationStyleIdx}
+              />
+              <CustomPicker
+                label="Writing Direction"
+                data={writingDirections}
+                currentIndex={writingDirectionIdx}
+                onSelected={setWritingDirectionIdx}
+              />
+            </View>
+          )}
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const CustomSwitch = ({label, handleValueChange, value}) => {
+  return (
+    <>
+      <Text style={styles.title}>{label}</Text>
+      <View style={{alignItems: 'flex-start'}}>
+        <Switch
+          trackColor={{false: '#767577', true: '#DAA520'}}
+          thumbColor={value ? '#DAA520' : '#f4f3f4'}
+          onValueChange={handleValueChange}
+          value={value}
+        />
+      </View>
+    </>
+  );
+};
+
+const CustomSlider = ({
+  label,
+  handleValueChange,
+  step = 1,
+  minimumValue = 0,
+  maximumValue = 10,
+  value,
+}) => {
+  return (
+    <>
+      {label && (
+        <Text style={styles.title}>{`${label} (${value.toFixed(2)})`}</Text>
+      )}
+      <View style={styles.wrapperHorizontal}>
+        <Slider
+          thumbTintColor="#06bcee"
+          minimumTrackTintColor="#64d7ffbb"
+          minimumValue={minimumValue}
+          maximumValue={maximumValue}
+          step={step}
+          onValueChange={handleValueChange}
+          value={value}
+        />
+      </View>
+    </>
+  );
+};
+
+const CustomPicker = ({label, data, currentIndex, onSelected}) => {
+  return (
+    <>
+      <Text style={styles.title}>{label}</Text>
+      <View style={styles.wrapperHorizontal}>
+        <FlatList
+          bounces
+          horizontal
+          data={data}
+          keyExtractor={item => String(item)}
+          renderItem={({item, index}) => {
+            const selected = index === currentIndex;
+            return (
+              <TouchableWithoutFeedback onPress={() => onSelected(index)}>
+                <View
+                  style={[
+                    styles.itemStyleHorizontal,
+                    selected && styles.itemSelectedStyleHorizontal,
+                  ]}>
+                  <Text
+                    style={{
+                      textAlign: 'center',
+                      color: selected ? 'black' : 'grey',
+                      fontWeight: selected ? 'bold' : 'normal',
+                    }}>
+                    {item + ''}
+                  </Text>
+                </View>
+              </TouchableWithoutFeedback>
+            );
+          }}
+        />
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  pargraphWrapper: {
+    backgroundColor: 'black',
+  },
+  paragraph: {
+    color: '#fff',
+    textDecorationColor: 'yellow',
+    textShadowColor: 'red',
+    textShadowRadius: 1,
+    padding: 24,
+  },
+  wrapperHorizontal: {
+    justifyContent: 'center',
+    color: 'black',
+  },
+  itemStyleHorizontal: {
+    marginRight: 10,
+    height: 50,
+    padding: 8,
+    borderWidth: 1,
+    borderColor: 'grey',
+    borderRadius: 8,
+    textAlign: 'center',
+    justifyContent: 'center',
+  },
+  itemSelectedStyleHorizontal: {
+    borderWidth: 2,
+    borderColor: '#06bcee',
+  },
+  platformContainer: {
+    marginTop: 8,
+    borderTopWidth: 1,
+  },
+  platformContainerTitle: {
+    marginTop: 8,
+  },
+  title: {
+    fontWeight: 'bold',
+    marginVertical: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=tsx&dependencies=@react-native-community/slider
+import {useState} from 'react';
+import {
+  FlatList,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Switch,
+  Text,
+  TouchableWithoutFeedback,
+  View,
+  TextStyle,
+} from 'react-native';
+import Slider from '@react-native-community/slider';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [fontSize, setFontSize] = useState(20);
+  const [fontStyleIdx, setFontStyleIdx] = useState(0);
+  const [fontWeightIdx, setFontWeightIdx] = useState(0);
+  const [lineHeight, setLineHeight] = useState(24);
+  const [textAlignIdx, setTextAlignIdx] = useState(0);
+  const [textDecorationLineIdx, setTextDecorationLineIdx] = useState(0);
+  const [includeFontPadding, setIncludeFontPadding] = useState(false);
+  const [textVerticalAlignIdx, setTextVerticalAlignIdx] = useState(0);
+  const [fontVariantIdx, setFontVariantIdx] = useState(0);
+  const [letterSpacing, setLetterSpacing] = useState(0);
+  const [textDecorationStyleIdx, setTextDecorationStyleIdx] = useState(0);
+  const [textTransformIdx, setTextTransformIdx] = useState(0);
+  const [writingDirectionIdx, setWritingDirectionIdx] = useState(0);
+  const [textShadowRadius, setTextShadowRadius] = useState(0);
+  const [textShadowOffset, setTextShadowOffset] = useState({
+    height: 0,
+    width: 0,
+  });
+
+  const [, ...validFontVariants] = fontVariants;
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.pargraphWrapper}>
+          <Text
+            style={[
+              styles.paragraph,
+              {
+                fontSize,
+                fontStyle: fontStyles[fontStyleIdx],
+                fontWeight: fontWeights[fontWeightIdx],
+                lineHeight,
+                textAlign: textAlignments[textAlignIdx],
+                textDecorationLine: textDecorationLines[textDecorationLineIdx],
+                textTransform: textTransformations[textTransformIdx],
+                textAlignVertical: textAlignmentsVertical[textVerticalAlignIdx],
+                fontVariant:
+                  fontVariantIdx === 0
+                    ? undefined
+                    : [validFontVariants[fontVariantIdx - 1]],
+                letterSpacing,
+                includeFontPadding,
+                textDecorationStyle:
+                  textDecorationStyles[textDecorationStyleIdx],
+                writingDirection: writingDirections[writingDirectionIdx],
+                textShadowOffset,
+                textShadowRadius,
+              } as TextStyle,
+            ]}>
+            Lorem Ipsum is simply dummy text of the printing and typesetting
+            industry. 112 Likes
+          </Text>
+        </View>
+        <ScrollView style={{padding: 12}}>
+          <View>
+            <Text>Common platform properties</Text>
+            <CustomSlider
+              label="Text Shadow Offset - Height"
+              value={textShadowOffset.height}
+              minimumValue={-40}
+              maximumValue={40}
+              handleValueChange={(val: number) =>
+                setTextShadowOffset(prev => ({...prev, height: val}))
+              }
+            />
+            <CustomSlider
+              label="Text Shadow Offset - Width"
+              value={textShadowOffset.width}
+              minimumValue={-40}
+              maximumValue={40}
+              handleValueChange={(val: number) =>
+                setTextShadowOffset(prev => ({...prev, width: val}))
+              }
+            />
+            <CustomSlider
+              label="Font Size"
+              value={fontSize}
+              maximumValue={40}
+              handleValueChange={setFontSize}
+            />
+            <CustomPicker
+              label="Font Style"
+              data={fontStyles}
+              currentIndex={fontStyleIdx}
+              onSelected={setFontStyleIdx}
+            />
+            <CustomPicker
+              label="Font Weight"
+              data={fontWeights}
+              currentIndex={fontWeightIdx}
+              onSelected={setFontWeightIdx}
+            />
+            <CustomSlider
+              label="Line Height"
+              value={lineHeight}
+              minimumValue={10}
+              maximumValue={50}
+              handleValueChange={setLineHeight}
+            />
+            <CustomPicker
+              label="Text Align"
+              data={textAlignments}
+              currentIndex={textAlignIdx}
+              onSelected={setTextAlignIdx}
+            />
+            <CustomPicker
+              label="Text Decoration Line"
+              data={textDecorationLines}
+              currentIndex={textDecorationLineIdx}
+              onSelected={setTextDecorationLineIdx}
+            />
+            <CustomSlider
+              label="Text Shadow Radius"
+              value={textShadowRadius}
+              handleValueChange={setTextShadowRadius}
+            />
+            <CustomPicker
+              label="Font Variant"
+              data={fontVariants}
+              currentIndex={fontVariantIdx}
+              onSelected={setFontVariantIdx}
+            />
+            <CustomSlider
+              label="Letter Spacing"
+              step={0.1}
+              value={letterSpacing}
+              handleValueChange={setLetterSpacing}
+            />
+            <CustomPicker
+              label="Text Transform"
+              data={textTransformations}
+              currentIndex={textTransformIdx}
+              onSelected={setTextTransformIdx}
+            />
+          </View>
+          {Platform.OS === 'android' && (
+            <View style={styles.platformContainer}>
+              <Text style={styles.platformContainerTitle}>
+                Android only properties
+              </Text>
+              <CustomPicker
+                label="Text Vertical Align"
+                data={textAlignmentsVertical}
+                currentIndex={textVerticalAlignIdx}
+                onSelected={setTextVerticalAlignIdx}
+              />
+              <CustomSwitch
+                label="Include Font Padding"
+                handleValueChange={setIncludeFontPadding}
+                value={includeFontPadding}
+              />
+            </View>
+          )}
+          {Platform.OS === 'ios' && (
+            <View style={styles.platformContainer}>
+              <Text style={styles.platformContainerTitle}>
+                iOS only properties
+              </Text>
+              <CustomPicker
+                label="Text Decoration Style"
+                data={textDecorationStyles}
+                currentIndex={textDecorationStyleIdx}
+                onSelected={setTextDecorationStyleIdx}
+              />
+              <CustomPicker
+                label="Writing Direction"
+                data={writingDirections}
+                currentIndex={writingDirectionIdx}
+                onSelected={setWritingDirectionIdx}
+              />
+            </View>
+          )}
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+type CustomSwitchProps = {
+  label: string;
+  value: boolean;
+  handleValueChange: (value: boolean) => void;
+};
+
+const CustomSwitch = ({label, handleValueChange, value}: CustomSwitchProps) => {
+  return (
+    <>
+      <Text style={styles.title}>{label}</Text>
+      <View style={{alignItems: 'flex-start'}}>
+        <Switch
+          trackColor={{false: '#767577', true: '#DAA520'}}
+          thumbColor={value ? '#DAA520' : '#f4f3f4'}
+          onValueChange={handleValueChange}
+          value={value}
+        />
+      </View>
+    </>
+  );
+};
+
+type CustomSliderProps = {
+  label: string;
+  value: number;
+  handleValueChange: (value: number) => void;
+  step?: number;
+  minimumValue?: number;
+  maximumValue?: number;
+};
+
+const CustomSlider = ({
+  label,
+  handleValueChange,
+  step = 1,
+  minimumValue = 0,
+  maximumValue = 10,
+  value,
+}: CustomSliderProps) => {
+  return (
+    <>
+      {label && (
+        <Text style={styles.title}>{`${label} (${value.toFixed(2)})`}</Text>
+      )}
+      <View style={styles.wrapperHorizontal}>
+        <Slider
+          thumbTintColor="#06bcee"
+          minimumTrackTintColor="#64d7ffbb"
+          minimumValue={minimumValue}
+          maximumValue={maximumValue}
+          step={step}
+          onValueChange={handleValueChange}
+          value={value}
+        />
+      </View>
+    </>
+  );
+};
+
+type CustomPickerProps = {
+  label: string;
+  data?: ArrayLike<any> | null;
+  currentIndex: number;
+  onSelected: (index: number) => void;
+};
+
+const CustomPicker = ({
+  label,
+  data,
+  currentIndex,
+  onSelected,
+}: CustomPickerProps) => {
+  return (
+    <>
+      <Text style={styles.title}>{label}</Text>
+      <View style={styles.wrapperHorizontal}>
+        <FlatList
+          horizontal
+          data={data}
+          keyExtractor={item => String(item)}
+          renderItem={({item, index}: {item: string; index: number}) => {
+            const selected = index === currentIndex;
+            return (
+              <TouchableWithoutFeedback onPress={() => onSelected(index)}>
+                <View
+                  style={[
+                    styles.itemStyleHorizontal,
+                    selected && styles.itemSelectedStyleHorizontal,
+                  ]}>
+                  <Text
+                    style={{
+                      textAlign: 'center',
+                      color: selected ? 'black' : 'grey',
+                      fontWeight: selected ? 'bold' : 'normal',
+                    }}>
+                    {item + ''}
+                  </Text>
+                </View>
+              </TouchableWithoutFeedback>
+            );
+          }}
+        />
+      </View>
+    </>
+  );
+};
+
+const fontStyles = ['normal', 'italic'];
+const fontVariants = [
+  undefined,
+  'small-caps',
+  'oldstyle-nums',
+  'lining-nums',
+  'tabular-nums',
+  'proportional-nums',
+];
+const fontWeights = [
+  'normal',
+  'bold',
+  '100',
+  '200',
+  '300',
+  '400',
+  '500',
+  '600',
+  '700',
+  '800',
+  '900',
+];
+const textAlignments = ['auto', 'left', 'right', 'center', 'justify'];
+const textDecorationLines = [
+  'none',
+  'underline',
+  'line-through',
+  'underline line-through',
+];
+const textDecorationStyles = ['solid', 'double', 'dotted', 'dashed'];
+const textTransformations = ['none', 'uppercase', 'lowercase', 'capitalize'];
+const textAlignmentsVertical = ['auto', 'top', 'bottom', 'center'];
+const writingDirections = ['auto', 'ltr', 'rtl'];
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  pargraphWrapper: {
+    backgroundColor: 'black',
+  },
+  paragraph: {
+    color: '#fff',
+    textDecorationColor: 'yellow',
+    textShadowColor: 'red',
+    textShadowRadius: 1,
+    padding: 24,
+  },
+  wrapperHorizontal: {
+    justifyContent: 'center',
+    color: 'black',
+  },
+  itemStyleHorizontal: {
+    marginRight: 10,
+    height: 50,
+    padding: 8,
+    borderWidth: 1,
+    borderColor: 'grey',
+    borderRadius: 8,
+    textAlign: 'center',
+    justifyContent: 'center',
+  },
+  itemSelectedStyleHorizontal: {
+    borderWidth: 2,
+    borderColor: '#06bcee',
+  },
+  platformContainer: {
+    marginTop: 8,
+    borderTopWidth: 1,
+  },
+  platformContainerTitle: {
+    marginTop: 8,
+  },
+  title: {
+    fontWeight: 'bold',
+    marginVertical: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+# Reference
+
+## Props
+
+### `color`
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `fontFamily`
+
+| Type   |
+| ------ |
+| string |
+
+The generic font families `system-ui`, `ui-sans-serif`, `ui-serif`, `ui-monospace`, and `ui-rounded` are supported on iOS.
+
+---
+
+### `fontSize`
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `fontStyle`
+
+| Type                         |
+| ---------------------------- |
+| enum(`'normal'`, `'italic'`) |
+
+---
+
+### `fontWeight`
+
+Specifies font weight. The values `'normal'` and `'bold'` are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen.
+
+| Type                                                                                                                  | Default    |
+| --------------------------------------------------------------------------------------------------------------------- | ---------- |
+| enum(`'normal'`, `'bold'`, `'100'`, `'200'`, `'300'`, `'400'`, `'500'`, `'600'`, `'700'`, `'800'`, `'900'`) or number | `'normal'` |
+
+---
+
+### `includeFontPadding` <div className="label android">Android</div>
+
+Set to `false` to remove extra font padding intended to make space for certain ascenders / descenders. With some fonts, this padding can make text look slightly misaligned when centered vertically. For best results also set `textAlignVertical` to `center`.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `true`  |
+
+---
+
+### `fontVariant`
+
+Allows you to set all the font variants for a font. Can be set by using an array of enums or a space-separated string e.g. `'small-caps common-ligatures'`.
+
+| Type                                                                                                                 | Default |
+| -------------------------------------------------------------------------------------------------------------------- | ------- |
+| array of enum(`'small-caps'`, `'oldstyle-nums'`, `'lining-nums'`, `'tabular-nums'`, `'proportional-nums'`) or string | `[]`    |
+
+---
+
+### `letterSpacing`
+
+Increase or decrease the spacing between characters. By default there is no extra letter spacing.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `lineHeight`
+
+Numeric value that controls the vertical spacing between lines of text within a text element. It specifies the distance between the baselines of consecutive lines of text.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `textAlign`
+
+Specifies text alignment. On Android, the value 'justify' is only supported on Oreo (8.0) or above (API level >= 26). The value will fallback to `left` on lower Android versions.
+
+| Type                                                         | Default  |
+| ------------------------------------------------------------ | -------- |
+| enum(`'auto'`, `'left'`, `'right'`, `'center'`, `'justify'`) | `'auto'` |
+
+---
+
+### `textAlignVertical` <div className="label android">Android</div>
+
+An alias for `verticalAlign` style prop, if you use both properties, `verticalAlign` will take precedence over `textAlignVertical`
+
+| Type                                            | Default  |
+| ----------------------------------------------- | -------- |
+| enum(`'auto'`, `'top'`, `'bottom'`, `'center'`) | `'auto'` |
+
+---
+
+### `textDecorationColor` <div className="label ios">iOS</div>
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `textDecorationLine`
+
+| Type                                                                        | Default  |
+| --------------------------------------------------------------------------- | -------- |
+| enum(`'none'`, `'underline'`, `'line-through'`, `'underline line-through'`) | `'none'` |
+
+---
+
+### `textDecorationStyle` <div className="label ios">iOS</div>
+
+| Type                                                | Default   |
+| --------------------------------------------------- | --------- |
+| enum(`'solid'`, `'double'`, `'dotted'`, `'dashed'`) | `'solid'` |
+
+---
+
+### `textShadowColor`
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `textShadowOffset`
+
+| Type                                        |
+| ------------------------------------------- |
+| object: `{width?: number, height?: number}` |
+
+---
+
+### `textShadowRadius`
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `textTransform`
+
+| Type                                                         | Default  |
+| ------------------------------------------------------------ | -------- |
+| enum(`'none'`, `'uppercase'`, `'lowercase'`, `'capitalize'`) | `'none'` |
+
+---
+
+### `verticalAlign` <div className="label android">Android</div>
+
+| Type                                            | Default  |
+| ----------------------------------------------- | -------- |
+| enum(`'auto'`, `'top'`, `'bottom'`, `'middle'`) | `'auto'` |
+
+---
+
+### `writingDirection` <div className="label ios">iOS</div>
+
+| Type                             | Default  |
+| -------------------------------- | -------- |
+| enum(`'auto'`, `'ltr'`, `'rtl'`) | `'auto'` |
+
+---
+
+### `userSelect`
+
+It allows the user to select text and to use the native copy and paste functionality. Has precedence over the `selectable` prop.
+
+| Type                                                     | Default |
+| -------------------------------------------------------- | ------- |
+| enum(`'auto'`, `'text'`, `'none'`, `'contain'`, `'all'`) | `none`  |
diff --git a/website/versioned_docs/version-0.82/text.md b/website/versioned_docs/version-0.82/text.md
index 3112485639c..0e72ec8c27b 100644
--- a/website/versioned_docs/version-0.82/text.md
+++ b/website/versioned_docs/version-0.82/text.md
@@ -1,781 +1,780 @@
----
-id: text
-title: Text
----
-
-A React component for displaying text.
-
-`Text` supports nesting, styling, and touch handling.
-
-In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines:
-
-```SnackPlayer name=Text%20Function%20Component%20Example
-import React, {useState} from 'react';
-import {Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const TextInANest = () => {
-  const [titleText, setTitleText] = useState("Bird's Nest");
-  const bodyText = 'This is not really a bird nest.';
-
-  const onPressTitle = () => {
-    setTitleText("Bird's Nest [pressed]");
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.baseText}>
-          <Text style={styles.titleText} onPress={onPressTitle}>
-            {titleText}
-            {'\n'}
-            {'\n'}
-          </Text>
-          <Text numberOfLines={5}>{bodyText}</Text>
-        </Text>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  baseText: {
-    fontFamily: 'Cochin',
-  },
-  titleText: {
-    fontSize: 20,
-    fontWeight: 'bold',
-  },
-});
-
-export default TextInANest;
-```
-
-## Nested text
-
-Both Android and iOS allow you to display formatted text by annotating ranges of a string with specific formatting like bold or colored text (`NSAttributedString` on iOS, `SpannableString` on Android). In practice, this is very tedious. For React Native, we decided to use the web paradigm for this, where you can nest text to achieve the same effect.
-
-```SnackPlayer name=Nested%20Text%20Example
-import React from 'react';
-import {Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const BoldAndBeautiful = () => (
-  <SafeAreaProvider>
-    <SafeAreaView style={styles.container}>
-      <Text style={styles.baseText}>
-        I am bold
-        <Text style={styles.innerText}> and red</Text>
-      </Text>
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  baseText: {
-    fontWeight: 'bold',
-  },
-  innerText: {
-    color: 'red',
-  },
-});
-
-export default BoldAndBeautiful;
-```
-
-Behind the scenes, React Native converts this to a flat `NSAttributedString` or `SpannableString` that contains the following information:
-
-```
-"I am bold and red"
-0-9: bold
-9-17: bold, red
-```
-
-## 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.
-
-```tsx
-<Text>
-  <Text>First part and </Text>
-  <Text>second part</Text>
-</Text>
-// Text container: the text will be inline, if the space allows it
-// |First part and second part|
-
-// otherwise, the text will flow as if it was one
-// |First part |
-// |and second |
-// |part       |
-
-<View>
-  <Text>First part and </Text>
-  <Text>second part</Text>
-</View>
-// View container: each text is its own block
-// |First part and|
-// |second part   |
-
-// otherwise, the text will flow in its own block
-// |First part |
-// |and        |
-// |second part|
-```
-
-## Limited Style Inheritance
-
-On the web, the usual way to set a font family and size for the entire document is to take advantage of inherited CSS properties like so:
-
-```css
-html {
-  font-family:
-    'lucida grande', tahoma, verdana, arial, sans-serif;
-  font-size: 11px;
-  color: #141823;
-}
-```
-
-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>`.
-
-```tsx
-// BAD: will raise exception, can't have a text node as child of a <View>
-<View>
-  Some text
-</View>
-
-// GOOD
-<View>
-  <Text>
-    Some text
-  </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.
-
-```tsx
-<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:
-
-```tsx
-const MyAppHeaderText = ({children}) => {
-  return (
-    <MyAppText>
-      <Text style={{fontSize: 20}}>{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.
-
-```tsx
-<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:
-
-- (Developer) React components are designed with strong isolation in mind: You should be able to drop a component anywhere in your application, trusting that as long as the props are the same, it will look and behave the same way. Text properties that could inherit from outside of the props would break this isolation.
-
-- (Implementor) The implementation of React Native is also simplified. We do not need to have a `fontFamily` field on every single element, and we do not need to potentially traverse the tree up to the root every time we display a text node. The style inheritance is only encoded inside of the native Text component and doesn't leak to other components or the system itself.
-
----
-
-# Reference
-
-## Props
-
-### `accessibilityHint`
-
-An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityLanguage` <div className="label ios">iOS</div>
-
-A value indicating which language should be used by the screen reader when the user interacts with the element. It should follow the [BCP 47 specification](https://www.rfc-editor.org/info/bcp47).
-
-See the [iOS `accessibilityLanguage` doc](https://developer.apple.com/documentation/objectivec/nsobject/1615192-accessibilitylanguage) for more information.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityLabel`
-
-Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the `Text` nodes separated by space.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityRole`
-
-Tells the screen reader to treat the currently focused on element as having a specific role.
-
-On iOS, these roles map to corresponding Accessibility Traits. Image button has the same functionality as if the trait was set to both 'image' and 'button'. See the [Accessibility guide](accessibility.md#accessibilitytraits-ios) for more information.
-
-On Android, these roles have similar functionality on TalkBack as adding Accessibility Traits does on Voiceover in iOS
-
-| Type                                                 |
-| ---------------------------------------------------- |
-| [AccessibilityRole](accessibility#accessibilityrole) |
-
----
-
-### `accessibilityState`
-
-Tells the screen reader to treat the currently focused on element as being in a specific state.
-
-You can provide one state, no state, or multiple states. The states must be passed in through an object, e.g. `{selected: true, disabled: true}`.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| [AccessibilityState](accessibility#accessibilitystate) |
-
----
-
-### `accessibilityActions`
-
-Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The `accessibilityActions` property should contain a list of action objects. Each action object should contain the field name and label.
-
-See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
-
-| Type  | Required |
-| ----- | -------- |
-| array | No       |
-
----
-
-### `onAccessibilityAction`
-
-Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.
-
-See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
-
-| Type     | Required |
-| -------- | -------- |
-| function | No       |
-
----
-
-### `accessible`
-
-When set to `true`, indicates that the view is an accessibility element.
-
-See the [Accessibility guide](accessibility#accessible-ios-android) for more information.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `true`  |
-
----
-
-### `adjustsFontSizeToFit`
-
-Specifies whether fonts should be scaled down automatically to fit given style constraints.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
----
-
-### `allowFontScaling`
-
-Specifies whether fonts should scale to respect Text Size accessibility settings.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `true`  |
-
----
-
-### `android_hyphenationFrequency` <div className="label android">Android</div>
-
-Sets the frequency of automatic hyphenation to use when determining word breaks on Android API Level 23+.
-
-| Type                                | Default  |
-| ----------------------------------- | -------- |
-| enum(`'none'`, `'normal'`,`'full'`) | `'none'` |
-
----
-
-### `aria-busy`
-
-Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-checked`
-
-Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
-| Type             | Default |
-| ---------------- | ------- |
-| boolean, 'mixed' | false   |
-
----
-
-### `aria-disabled`
-
-Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-expanded`
-
-Indicates whether an expandable element is currently expanded or collapsed.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-label`
-
-Defines a string value that labels an interactive element.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `aria-selected`
-
-Indicates whether a selectable element is currently selected or not.
-
-| Type    |
-| ------- |
-| boolean |
-
-### `dataDetectorType` <div className="label android">Android</div>
-
-Determines the types of data converted to clickable URLs in the text element. By default, no data types are detected.
-
-You can provide only one type.
-
-| Type                                                          | Default  |
-| ------------------------------------------------------------- | -------- |
-| enum(`'phoneNumber'`, `'link'`, `'email'`, `'none'`, `'all'`) | `'none'` |
-
----
-
-### `disabled` <div className="label android">Android</div>
-
-Specifies the disabled state of the text view for testing purposes.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `dynamicTypeRamp` <div className="label ios">iOS</div>
-
-The [Dynamic Type](https://developer.apple.com/documentation/uikit/uifont/scaling_fonts_automatically) ramp to apply to this element on iOS.
-
-| Type                                                                                                                                                     | Default  |
-| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
-| enum(`'caption2'`, `'caption1'`, `'footnote'`, `'subheadline'`, `'callout'`, `'body'`, `'headline'`, `'title3'`, `'title2'`, `'title1'`, `'largeTitle'`) | `'body'` |
-
----
-
-### `ellipsizeMode`
-
-When `numberOfLines` is set, this prop defines how the text will be truncated. `numberOfLines` must be set in conjunction with this prop.
-
-This can be one of the following values:
-
-- `head` - The line is displayed so that the end fits in the container and the missing text at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz"
-- `middle` - The line is displayed so that the beginning and end fit in the container and the missing text in the middle is indicated by an ellipsis glyph. "ab...yz"
-- `tail` - The line is displayed so that the beginning fits in the container and the missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..."
-- `clip` - Lines are not drawn past the edge of the text container.
-
-:::note
-On Android, when `numberOfLines` is set to a value higher than `1`, only `tail` value will work correctly.
-:::
-
-| Type                                           | Default |
-| ---------------------------------------------- | ------- |
-| enum(`'head'`, `'middle'`, `'tail'`, `'clip'`) | `tail`  |
-
----
-
-### `id`
-
-Used to locate this view from native code. Has precedence over `nativeID` prop.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `maxFontSizeMultiplier`
-
-Specifies the largest possible scale a font can reach when `allowFontScaling` is enabled. Possible values:
-
-- `null/undefined`: inherit from the parent node or the global default (0)
-- `0`: no max, ignore parent/global default
-- `>= 1`: sets the `maxFontSizeMultiplier` of this node to this value
-
-| Type   | Default     |
-| ------ | ----------- |
-| number | `undefined` |
-
----
-
-### `minimumFontScale`
-
-Specifies the smallest possible scale a font can reach when `adjustsFontSizeToFit` is enabled. (values 0.01-1.0).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nativeID`
-
-Used to locate this view from native code.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `numberOfLines`
-
-Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. Setting this property to `0` will result in unsetting this value, which means that no lines restriction will be applied.
-
-This prop is commonly used with `ellipsizeMode`.
-
-| Type   | Default |
-| ------ | ------- |
-| number | `0`     |
-
----
-
-### `onLayout`
-
-Invoked on mount and on layout changes.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
-
----
-
-### `onLongPress`
-
-This function is called on long press.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onMoveShouldSetResponder`
-
-Does this view want to "claim" touch responsiveness? This is called for every touch move on the `View` when it is not the responder.
-
-| Type                                                      |
-| --------------------------------------------------------- |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
-
----
-
-### `onPress`
-
-Function called on user press, triggered after `onPressOut`.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onPressIn`
-
-Called immediately when a touch is engaged, before `onPressOut` and `onPress`.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onPressOut`
-
-Called when a touch is released.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onResponderGrant`
-
-The View is now responding to touch events. This is the time to highlight and show the user what is happening.
-
-On Android, return true from this callback to prevent any other native components from becoming responder until this responder terminates.
-
-| Type                                                              |
-| ----------------------------------------------------------------- |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void ｜ boolean` |
-
----
-
-### `onResponderMove`
-
-The user is moving their finger.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onResponderRelease`
-
-Fired at the end of the touch.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onResponderTerminate`
-
-The responder has been taken from the `View`. Might be taken by other views after a call to `onResponderTerminationRequest`, or might be taken by the OS without asking (e.g., happens with control center/ notification center on iOS)
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onResponderTerminationRequest`
-
-Some other `View` wants to become a responder and is asking this `View` to release its responder. Returning `true` allows its release.
-
-| Type                                                      |
-| --------------------------------------------------------- |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
-
----
-
-### `onStartShouldSetResponderCapture`
-
-If a parent `View` wants to prevent a child `View` from becoming a responder on a touch start, it should have this handler which returns `true`.
-
-| Type                                                      |
-| --------------------------------------------------------- |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
-
----
-
-### `onTextLayout`
-
-Invoked on Text layout change.
-
-| Type                                                 |
-| ---------------------------------------------------- |
-| ([`TextLayoutEvent`](text#textlayoutevent)) => mixed |
-
----
-
-### `pressRetentionOffset`
-
-When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations.
-
-| Type                 |
-| -------------------- |
-| [Rect](rect), number |
-
----
-
-### `ref`
-
-A ref setter that will be assigned an [element node](element-nodes) when mounted.
-
-Note that `Text` components don't provide text nodes, the same way that paragraph elements (`<p>`) on Web are element nodes instead of text nodes. Text nodes can be found as their child nodes instead.
-
----
-
-### `role`
-
-`role` communicates the purpose of a component to the user of an assistive technology. Has precedence over the [`accessibilityRole`](text#accessibilityrole) prop.
-
-| Type                       |
-| -------------------------- |
-| [Role](accessibility#role) |
-
----
-
-### `selectable`
-
-Lets the user select text, to use the native copy and paste functionality.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
----
-
-### `selectionColor` <div className="label android">Android</div>
-
-The highlight color of the text.
-
-| Type            |
-| --------------- |
-| [color](colors) |
-
----
-
-### `style`
-
-| Type                                                                 |
-| -------------------------------------------------------------------- |
-| [Text Style](text-style-props), [View Style Props](view-style-props) |
-
----
-
-### `suppressHighlighting` <div className="label ios">iOS</div>
-
-When `true`, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
----
-
-### `testID`
-
-Used to locate this view in end-to-end tests.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `textBreakStrategy` <div className="label android">Android</div>
-
-Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced`.
-
-| Type                                            | Default       |
-| ----------------------------------------------- | ------------- |
-| enum(`'simple'`, `'highQuality'`, `'balanced'`) | `highQuality` |
-
----
-
-### `lineBreakStrategyIOS` <div className="label ios">iOS</div>
-
-Set line break strategy on iOS 14+. Possible values are `none`, `standard`, `hangul-word` and `push-out`.
-
-| Type                                                        | Default  |
-| ----------------------------------------------------------- | -------- |
-| enum(`'none'`, `'standard'`, `'hangul-word'`, `'push-out'`) | `'none'` |
-
-## Type Definitions
-
-### TextLayout
-
-`TextLayout` object is a part of [`TextLayoutEvent`](text#textlayoutevent) callback and contains the measurement data for `Text` line.
-
-#### Example
-
-```js
-{
-    capHeight: 10.496,
-    ascender: 14.624,
-    descender: 4,
-    width: 28.224,
-    height: 18.624,
-    xHeight: 6.048,
-    x: 0,
-    y: 0
-}
-```
-
-#### Properties
-
-| Name      | Type   | Optional | Description                                                         |
-| --------- | ------ | -------- | ------------------------------------------------------------------- |
-| ascender  | number | No       | The line ascender height after the text layout changes.             |
-| capHeight | number | No       | Height of capital letter above the baseline.                        |
-| descender | number | No       | The line descender height after the text layout changes.            |
-| height    | number | No       | Height of the line after the text layout changes.                   |
-| width     | number | No       | Width of the line after the text layout changes.                    |
-| x         | number | No       | Line X coordinate inside the Text component.                        |
-| xHeight   | number | No       | Distance between the baseline and median of the line (corpus size). |
-| y         | number | No       | Line Y coordinate inside the Text component.                        |
-
-### TextLayoutEvent
-
-`TextLayoutEvent` object is returned in the callback as a result of a component layout change. It contains a key called `lines` with a value which is an array containing [`TextLayout`](text#textlayout) object corresponded to every rendered text line.
-
-#### Example
-
-```js
-{
-  lines: [
-    TextLayout,
-    TextLayout,
-    // ...
-  ];
-  target: 1127;
-}
-```
-
-#### Properties
-
-| Name   | Type                                    | Optional | Description                                           |
-| ------ | --------------------------------------- | -------- | ----------------------------------------------------- |
-| lines  | array of [TextLayout](text#textlayout)s | No       | Provides the TextLayout data for every rendered line. |
-| target | number                                  | No       | The node id of the element.                           |
+---
+id: text
+title: Text
+---
+
+A React component for displaying text.
+
+`Text` supports nesting, styling, and touch handling.
+
+In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines:
+
+```SnackPlayer name=Text%20Function%20Component%20Example
+import {useState} from 'react';
+import {Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const TextInANest = () => {
+  const [titleText, setTitleText] = useState("Bird's Nest");
+  const bodyText = 'This is not really a bird nest.';
+
+  const onPressTitle = () => {
+    setTitleText("Bird's Nest [pressed]");
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.baseText}>
+          <Text style={styles.titleText} onPress={onPressTitle}>
+            {titleText}
+            {'\n'}
+            {'\n'}
+          </Text>
+          <Text numberOfLines={5}>{bodyText}</Text>
+        </Text>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  baseText: {
+    fontFamily: 'Cochin',
+  },
+  titleText: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+});
+
+export default TextInANest;
+```
+
+## Nested text
+
+Both Android and iOS allow you to display formatted text by annotating ranges of a string with specific formatting like bold or colored text (`NSAttributedString` on iOS, `SpannableString` on Android). In practice, this is very tedious. For React Native, we decided to use the web paradigm for this, where you can nest text to achieve the same effect.
+
+```SnackPlayer name=Nested%20Text%20Example
+import {Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const BoldAndBeautiful = () => (
+  <SafeAreaProvider>
+    <SafeAreaView style={styles.container}>
+      <Text style={styles.baseText}>
+        I am bold
+        <Text style={styles.innerText}> and red</Text>
+      </Text>
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  baseText: {
+    fontWeight: 'bold',
+  },
+  innerText: {
+    color: 'red',
+  },
+});
+
+export default BoldAndBeautiful;
+```
+
+Behind the scenes, React Native converts this to a flat `NSAttributedString` or `SpannableString` that contains the following information:
+
+```
+"I am bold and red"
+0-9: bold
+9-17: bold, red
+```
+
+## 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.
+
+```tsx
+<Text>
+  <Text>First part and </Text>
+  <Text>second part</Text>
+</Text>
+// Text container: the text will be inline, if the space allows it
+// |First part and second part|
+
+// otherwise, the text will flow as if it was one
+// |First part |
+// |and second |
+// |part       |
+
+<View>
+  <Text>First part and </Text>
+  <Text>second part</Text>
+</View>
+// View container: each text is its own block
+// |First part and|
+// |second part   |
+
+// otherwise, the text will flow in its own block
+// |First part |
+// |and        |
+// |second part|
+```
+
+## Limited Style Inheritance
+
+On the web, the usual way to set a font family and size for the entire document is to take advantage of inherited CSS properties like so:
+
+```css
+html {
+  font-family:
+    'lucida grande', tahoma, verdana, arial, sans-serif;
+  font-size: 11px;
+  color: #141823;
+}
+```
+
+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>`.
+
+```tsx
+// BAD: will raise exception, can't have a text node as child of a <View>
+<View>
+  Some text
+</View>
+
+// GOOD
+<View>
+  <Text>
+    Some text
+  </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.
+
+```tsx
+<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:
+
+```tsx
+const MyAppHeaderText = ({children}) => {
+  return (
+    <MyAppText>
+      <Text style={{fontSize: 20}}>{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.
+
+```tsx
+<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:
+
+- (Developer) React components are designed with strong isolation in mind: You should be able to drop a component anywhere in your application, trusting that as long as the props are the same, it will look and behave the same way. Text properties that could inherit from outside of the props would break this isolation.
+
+- (Implementor) The implementation of React Native is also simplified. We do not need to have a `fontFamily` field on every single element, and we do not need to potentially traverse the tree up to the root every time we display a text node. The style inheritance is only encoded inside of the native Text component and doesn't leak to other components or the system itself.
+
+---
+
+# Reference
+
+## Props
+
+### `accessibilityHint`
+
+An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityLanguage` <div className="label ios">iOS</div>
+
+A value indicating which language should be used by the screen reader when the user interacts with the element. It should follow the [BCP 47 specification](https://www.rfc-editor.org/info/bcp47).
+
+See the [iOS `accessibilityLanguage` doc](https://developer.apple.com/documentation/objectivec/nsobject/1615192-accessibilitylanguage) for more information.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityLabel`
+
+Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the `Text` nodes separated by space.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityRole`
+
+Tells the screen reader to treat the currently focused on element as having a specific role.
+
+On iOS, these roles map to corresponding Accessibility Traits. Image button has the same functionality as if the trait was set to both 'image' and 'button'. See the [Accessibility guide](accessibility.md#accessibilitytraits-ios) for more information.
+
+On Android, these roles have similar functionality on TalkBack as adding Accessibility Traits does on Voiceover in iOS
+
+| Type                                                 |
+| ---------------------------------------------------- |
+| [AccessibilityRole](accessibility#accessibilityrole) |
+
+---
+
+### `accessibilityState`
+
+Tells the screen reader to treat the currently focused on element as being in a specific state.
+
+You can provide one state, no state, or multiple states. The states must be passed in through an object, e.g. `{selected: true, disabled: true}`.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| [AccessibilityState](accessibility#accessibilitystate) |
+
+---
+
+### `accessibilityActions`
+
+Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The `accessibilityActions` property should contain a list of action objects. Each action object should contain the field name and label.
+
+See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
+
+| Type  | Required |
+| ----- | -------- |
+| array | No       |
+
+---
+
+### `onAccessibilityAction`
+
+Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.
+
+See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `accessible`
+
+When set to `true`, indicates that the view is an accessibility element.
+
+See the [Accessibility guide](accessibility#accessible-ios-android) for more information.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `true`  |
+
+---
+
+### `adjustsFontSizeToFit`
+
+Specifies whether fonts should be scaled down automatically to fit given style constraints.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+---
+
+### `allowFontScaling`
+
+Specifies whether fonts should scale to respect Text Size accessibility settings.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `true`  |
+
+---
+
+### `android_hyphenationFrequency` <div className="label android">Android</div>
+
+Sets the frequency of automatic hyphenation to use when determining word breaks on Android API Level 23+.
+
+| Type                                | Default  |
+| ----------------------------------- | -------- |
+| enum(`'none'`, `'normal'`,`'full'`) | `'none'` |
+
+---
+
+### `aria-busy`
+
+Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-checked`
+
+Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
+
+| Type             | Default |
+| ---------------- | ------- |
+| boolean, 'mixed' | false   |
+
+---
+
+### `aria-disabled`
+
+Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-expanded`
+
+Indicates whether an expandable element is currently expanded or collapsed.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-label`
+
+Defines a string value that labels an interactive element.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `aria-selected`
+
+Indicates whether a selectable element is currently selected or not.
+
+| Type    |
+| ------- |
+| boolean |
+
+### `dataDetectorType` <div className="label android">Android</div>
+
+Determines the types of data converted to clickable URLs in the text element. By default, no data types are detected.
+
+You can provide only one type.
+
+| Type                                                          | Default  |
+| ------------------------------------------------------------- | -------- |
+| enum(`'phoneNumber'`, `'link'`, `'email'`, `'none'`, `'all'`) | `'none'` |
+
+---
+
+### `disabled` <div className="label android">Android</div>
+
+Specifies the disabled state of the text view for testing purposes.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `dynamicTypeRamp` <div className="label ios">iOS</div>
+
+The [Dynamic Type](https://developer.apple.com/documentation/uikit/uifont/scaling_fonts_automatically) ramp to apply to this element on iOS.
+
+| Type                                                                                                                                                     | Default  |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
+| enum(`'caption2'`, `'caption1'`, `'footnote'`, `'subheadline'`, `'callout'`, `'body'`, `'headline'`, `'title3'`, `'title2'`, `'title1'`, `'largeTitle'`) | `'body'` |
+
+---
+
+### `ellipsizeMode`
+
+When `numberOfLines` is set, this prop defines how the text will be truncated. `numberOfLines` must be set in conjunction with this prop.
+
+This can be one of the following values:
+
+- `head` - The line is displayed so that the end fits in the container and the missing text at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz"
+- `middle` - The line is displayed so that the beginning and end fit in the container and the missing text in the middle is indicated by an ellipsis glyph. "ab...yz"
+- `tail` - The line is displayed so that the beginning fits in the container and the missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..."
+- `clip` - Lines are not drawn past the edge of the text container.
+
+:::note
+On Android, when `numberOfLines` is set to a value higher than `1`, only `tail` value will work correctly.
+:::
+
+| Type                                           | Default |
+| ---------------------------------------------- | ------- |
+| enum(`'head'`, `'middle'`, `'tail'`, `'clip'`) | `tail`  |
+
+---
+
+### `id`
+
+Used to locate this view from native code. Has precedence over `nativeID` prop.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `maxFontSizeMultiplier`
+
+Specifies the largest possible scale a font can reach when `allowFontScaling` is enabled. Possible values:
+
+- `null/undefined`: inherit from the parent node or the global default (0)
+- `0`: no max, ignore parent/global default
+- `>= 1`: sets the `maxFontSizeMultiplier` of this node to this value
+
+| Type   | Default     |
+| ------ | ----------- |
+| number | `undefined` |
+
+---
+
+### `minimumFontScale`
+
+Specifies the smallest possible scale a font can reach when `adjustsFontSizeToFit` is enabled. (values 0.01-1.0).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nativeID`
+
+Used to locate this view from native code.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `numberOfLines`
+
+Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. Setting this property to `0` will result in unsetting this value, which means that no lines restriction will be applied.
+
+This prop is commonly used with `ellipsizeMode`.
+
+| Type   | Default |
+| ------ | ------- |
+| number | `0`     |
+
+---
+
+### `onLayout`
+
+Invoked on mount and on layout changes.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
+
+---
+
+### `onLongPress`
+
+This function is called on long press.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onMoveShouldSetResponder`
+
+Does this view want to "claim" touch responsiveness? This is called for every touch move on the `View` when it is not the responder.
+
+| Type                                                      |
+| --------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
+
+---
+
+### `onPress`
+
+Function called on user press, triggered after `onPressOut`.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onPressIn`
+
+Called immediately when a touch is engaged, before `onPressOut` and `onPress`.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onPressOut`
+
+Called when a touch is released.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onResponderGrant`
+
+The View is now responding to touch events. This is the time to highlight and show the user what is happening.
+
+On Android, return true from this callback to prevent any other native components from becoming responder until this responder terminates.
+
+| Type                                                              |
+| ----------------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void ｜ boolean` |
+
+---
+
+### `onResponderMove`
+
+The user is moving their finger.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onResponderRelease`
+
+Fired at the end of the touch.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onResponderTerminate`
+
+The responder has been taken from the `View`. Might be taken by other views after a call to `onResponderTerminationRequest`, or might be taken by the OS without asking (e.g., happens with control center/ notification center on iOS)
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onResponderTerminationRequest`
+
+Some other `View` wants to become a responder and is asking this `View` to release its responder. Returning `true` allows its release.
+
+| Type                                                      |
+| --------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
+
+---
+
+### `onStartShouldSetResponderCapture`
+
+If a parent `View` wants to prevent a child `View` from becoming a responder on a touch start, it should have this handler which returns `true`.
+
+| Type                                                      |
+| --------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
+
+---
+
+### `onTextLayout`
+
+Invoked on Text layout change.
+
+| Type                                                 |
+| ---------------------------------------------------- |
+| ([`TextLayoutEvent`](text#textlayoutevent)) => mixed |
+
+---
+
+### `pressRetentionOffset`
+
+When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations.
+
+| Type                 |
+| -------------------- |
+| [Rect](rect), number |
+
+---
+
+### `ref`
+
+A ref setter that will be assigned an [element node](element-nodes) when mounted.
+
+Note that `Text` components don't provide text nodes, the same way that paragraph elements (`<p>`) on Web are element nodes instead of text nodes. Text nodes can be found as their child nodes instead.
+
+---
+
+### `role`
+
+`role` communicates the purpose of a component to the user of an assistive technology. Has precedence over the [`accessibilityRole`](text#accessibilityrole) prop.
+
+| Type                       |
+| -------------------------- |
+| [Role](accessibility#role) |
+
+---
+
+### `selectable`
+
+Lets the user select text, to use the native copy and paste functionality.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+---
+
+### `selectionColor` <div className="label android">Android</div>
+
+The highlight color of the text.
+
+| Type            |
+| --------------- |
+| [color](colors) |
+
+---
+
+### `style`
+
+| Type                                                                 |
+| -------------------------------------------------------------------- |
+| [Text Style](text-style-props), [View Style Props](view-style-props) |
+
+---
+
+### `suppressHighlighting` <div className="label ios">iOS</div>
+
+When `true`, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+---
+
+### `testID`
+
+Used to locate this view in end-to-end tests.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `textBreakStrategy` <div className="label android">Android</div>
+
+Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced`.
+
+| Type                                            | Default       |
+| ----------------------------------------------- | ------------- |
+| enum(`'simple'`, `'highQuality'`, `'balanced'`) | `highQuality` |
+
+---
+
+### `lineBreakStrategyIOS` <div className="label ios">iOS</div>
+
+Set line break strategy on iOS 14+. Possible values are `none`, `standard`, `hangul-word` and `push-out`.
+
+| Type                                                        | Default  |
+| ----------------------------------------------------------- | -------- |
+| enum(`'none'`, `'standard'`, `'hangul-word'`, `'push-out'`) | `'none'` |
+
+## Type Definitions
+
+### TextLayout
+
+`TextLayout` object is a part of [`TextLayoutEvent`](text#textlayoutevent) callback and contains the measurement data for `Text` line.
+
+#### Example
+
+```js
+{
+    capHeight: 10.496,
+    ascender: 14.624,
+    descender: 4,
+    width: 28.224,
+    height: 18.624,
+    xHeight: 6.048,
+    x: 0,
+    y: 0
+}
+```
+
+#### Properties
+
+| Name      | Type   | Optional | Description                                                         |
+| --------- | ------ | -------- | ------------------------------------------------------------------- |
+| ascender  | number | No       | The line ascender height after the text layout changes.             |
+| capHeight | number | No       | Height of capital letter above the baseline.                        |
+| descender | number | No       | The line descender height after the text layout changes.            |
+| height    | number | No       | Height of the line after the text layout changes.                   |
+| width     | number | No       | Width of the line after the text layout changes.                    |
+| x         | number | No       | Line X coordinate inside the Text component.                        |
+| xHeight   | number | No       | Distance between the baseline and median of the line (corpus size). |
+| y         | number | No       | Line Y coordinate inside the Text component.                        |
+
+### TextLayoutEvent
+
+`TextLayoutEvent` object is returned in the callback as a result of a component layout change. It contains a key called `lines` with a value which is an array containing [`TextLayout`](text#textlayout) object corresponded to every rendered text line.
+
+#### Example
+
+```js
+{
+  lines: [
+    TextLayout,
+    TextLayout,
+    // ...
+  ];
+  target: 1127;
+}
+```
+
+#### Properties
+
+| Name   | Type                                    | Optional | Description                                           |
+| ------ | --------------------------------------- | -------- | ----------------------------------------------------- |
+| lines  | array of [TextLayout](text#textlayout)s | No       | Provides the TextLayout data for every rendered line. |
+| target | number                                  | No       | The node id of the element.                           |
diff --git a/website/versioned_docs/version-0.82/textinput.md b/website/versioned_docs/version-0.82/textinput.md
index af80bd7c053..ec109603de0 100644
--- a/website/versioned_docs/version-0.82/textinput.md
+++ b/website/versioned_docs/version-0.82/textinput.md
@@ -1,1146 +1,1146 @@
----
-id: textinput
-title: TextInput
----
-
-A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.
-
-The most basic use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. A minimal example:
-
-```SnackPlayer name=TextInput%20Example
-import React from 'react';
-import {StyleSheet, TextInput} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const TextInputExample = () => {
-  const [text, onChangeText] = React.useState('Useless Text');
-  const [number, onChangeNumber] = React.useState('');
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView>
-        <TextInput
-          style={styles.input}
-          onChangeText={onChangeText}
-          value={text}
-        />
-        <TextInput
-          style={styles.input}
-          onChangeText={onChangeNumber}
-          value={number}
-          placeholder="useless placeholder"
-          keyboardType="numeric"
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  input: {
-    height: 40,
-    margin: 12,
-    borderWidth: 1,
-    padding: 10,
-  },
-});
-
-export default TextInputExample;
-```
-
-Two methods exposed via the native element are `.focus()` and `.blur()` that will focus or blur the TextInput programmatically.
-
-Note that some props are only available with `multiline={true/false}`. Additionally, border styles that apply to only one side of the element (e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if `multiline=true`. To achieve the same effect, you can wrap your `TextInput` in a `View`:
-
-```SnackPlayer name=Multiline%20TextInput%20Example
-import React from 'react';
-import {TextInput, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const MultilineTextInputExample = () => {
-  const [value, onChangeText] = React.useState('Useless Multiline Placeholder');
-
-  // If you type something in the text box that is a color,
-  // the background will change to that color.
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView
-        style={{
-          flex: 1,
-          backgroundColor: value.toLowerCase(),
-        }}>
-        <TextInput
-          editable
-          multiline
-          numberOfLines={4}
-          maxLength={40}
-          onChangeText={text => onChangeText(text)}
-          value={value}
-          style={styles.textInput}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  textInput: {
-    padding: 10,
-    borderColor: '#000',
-    borderWidth: 1,
-    margin: 12,
-  },
-});
-
-export default MultilineTextInputExample;
-```
-
-`TextInput` has a border at the bottom of its view by default. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this are to either not set height explicitly, in which case the system will take care of displaying the border in the correct position, or to not display the border by setting `underlineColorAndroid` to transparent.
-
-Note that on Android performing text selection in an input can change the app's activity `windowSoftInputMode` param to `adjustResize`. This may cause issues with components that have position: 'absolute' while the keyboard is active. To avoid this behavior either specify `windowSoftInputMode` in AndroidManifest.xml ( https://developer.android.com/guide/topics/manifest/activity-element.html ) or control this param programmatically with native code.
-
----
-
-# Reference
-
-## Props
-
-### [View Props](view.md#props)
-
-Inherits [View Props](view.md#props).
-
----
-
-### `allowFontScaling`
-
-Specifies whether fonts should scale to respect Text Size accessibility settings. The default is `true`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `autoCapitalize`
-
-Tells `TextInput` to automatically capitalize certain characters. This property is not supported by some keyboard types such as `name-phone-pad`.
-
-- `characters`: all characters.
-- `words`: first letter of each word.
-- `sentences`: first letter of each sentence (_default_).
-- `none`: don't auto capitalize anything.
-
-| Type                                             |
-| ------------------------------------------------ |
-| enum('none', 'sentences', 'words', 'characters') |
-
----
-
-### `autoComplete`
-
-Specifies autocomplete hints for the system, so it can provide autofill. On Android, the system will always attempt to offer autofill by using heuristics to identify the type of content. To disable autocomplete, set `autoComplete` to `off`.
-
-The following values work across platforms:
-
-- `additional-name`
-- `address-line1`
-- `address-line2`
-- `birthdate-day` (iOS 17+)
-- `birthdate-full` (iOS 17+)
-- `birthdate-month` (iOS 17+)
-- `birthdate-year` (iOS 17+)
-- `cc-csc` (iOS 17+)
-- `cc-exp` (iOS 17+)
-- `cc-exp-day` (iOS 17+)
-- `cc-exp-month` (iOS 17+)
-- `cc-exp-year` (iOS 17+)
-- `cc-number`
-- `country`
-- `current-password`
-- `email`
-- `family-name`
-- `given-name`
-- `honorific-prefix`
-- `honorific-suffix`
-- `name`
-- `new-password`
-- `off`
-- `one-time-code`
-- `postal-code`
-- `street-address`
-- `tel`
-- `username`
-
-<div className="label basic ios">iOS</div>
-
-The following values work on iOS only:
-
-- `cc-family-name` (iOS 17+)
-- `cc-given-name` (iOS 17+)
-- `cc-middle-name` (iOS 17+)
-- `cc-name` (iOS 17+)
-- `cc-type` (iOS 17+)
-- `nickname`
-- `organization`
-- `organization-title`
-- `url`
-
-<div className="label basic android">Android</div>
-
-The following values work on Android only:
-
-- `gender`
-- `name-family`
-- `name-given`
-- `name-middle`
-- `name-middle-initial`
-- `name-prefix`
-- `name-suffix`
-- `password`
-- `password-new`
-- `postal-address`
-- `postal-address-country`
-- `postal-address-extended`
-- `postal-address-extended-postal-code`
-- `postal-address-locality`
-- `postal-address-region`
-- `sms-otp`
-- `tel-country-code`
-- `tel-device`
-- `tel-national`
-- `username-new`
-
-| Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| enum('additional-name', 'address-line1', 'address-line2', 'birthdate-day', 'birthdate-full', 'birthdate-month', 'birthdate-year', 'cc-csc', 'cc-exp', 'cc-exp-day', 'cc-exp-month', 'cc-exp-year', 'cc-number', 'country', 'current-password', 'email', 'family-name', 'given-name', 'honorific-prefix', 'honorific-suffix', 'name', 'new-password', 'off', 'one-time-code', 'postal-code', 'street-address', 'tel', 'username', 'cc-family-name', 'cc-given-name', 'cc-middle-name', 'cc-name', 'cc-type', 'nickname', 'organization', 'organization-title', 'url', 'gender', 'name-family', 'name-given', 'name-middle', 'name-middle-initial', 'name-prefix', 'name-suffix', 'password', 'password-new', 'postal-address', 'postal-address-country', 'postal-address-extended', 'postal-address-extended-postal-code', 'postal-address-locality', 'postal-address-region', 'sms-otp', 'tel-country-code', 'tel-device', 'tel-national', 'username-new') |
-
----
-
-### `autoCorrect`
-
-If `false`, disables auto-correct. The default value is `true`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `autoFocus`
-
-If `true`, focuses the input. The default value is `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `blurOnSubmit`
-
-:::warning[Deprecated]
-Note that `submitBehavior` now takes the place of `blurOnSubmit` and will override any behavior defined by `blurOnSubmit`. See [submitBehavior](textinput#submitbehavior).
-:::
-
-If `true`, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting `blurOnSubmit` to `true` means that pressing return will blur the field and trigger the `onSubmitEditing` event instead of inserting a newline into the field.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `caretHidden`
-
-If `true`, caret is hidden. The default value is `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `clearButtonMode` <div className="label ios">iOS</div>
-
-When the clear button should appear on the right side of the text view. This property is supported only for single-line TextInput component. The default value is `never`.
-
-| Type                                                       |
-| ---------------------------------------------------------- |
-| enum('never', 'while-editing', 'unless-editing', 'always') |
-
----
-
-### `clearTextOnFocus` <div className="label ios">iOS</div>
-
-If `true`, clears the text field automatically when editing begins.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `contextMenuHidden`
-
-If `true`, context menu is hidden. The default value is `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `dataDetectorTypes` <div className="label ios">iOS</div>
-
-Determines the types of data converted to clickable URLs in the text input. Only valid if `multiline={true}` and `editable={false}`. By default no data types are detected.
-
-You can provide one type or an array of many types.
-
-Possible values for `dataDetectorTypes` are:
-
-- `'phoneNumber'`
-- `'link'`
-- `'address'`
-- `'calendarEvent'`
-- `'none'`
-- `'all'`
-
-| Type                                                                                                                                                     |
-| -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), ,array of enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all') |
-
----
-
-### `defaultValue`
-
-Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `disableKeyboardShortcuts` <div className="label ios">iOS</div>
-
-If `true`, the keyboard shortcuts (undo/redo and copy buttons) are disabled.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `cursorColor` <div className="label android">Android</div>
-
-When provided it will set the color of the cursor (or "caret") in the component. Unlike the behavior of `selectionColor` the cursor color will be set independently from the color of the text selection box.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `disableFullscreenUI` <div className="label android">Android</div>
-
-When `false`, if there is a small amount of space available around a text input (e.g. landscape orientation on a phone), the OS may choose to have the user edit the text inside of a full screen text input mode. When `true`, this feature is disabled and users will always edit the text directly inside of the text input. Defaults to `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `editable`
-
-If `false`, text is not editable. The default value is `true`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `enablesReturnKeyAutomatically` <div className="label ios">iOS</div>
-
-If `true`, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `enterKeyHint`
-
-Determines what text should be shown to the return key. Has precedence over the `returnKeyType` prop.
-
-The following values work across platforms:
-
-- `done`
-- `next`
-- `search`
-- `send`
-- `go`
-
-_Android Only_
-
-The following values work on Android only:
-
-- `previous`
-
-_iOS Only_
-
-The following values work on iOS only:
-
-- `enter`
-
-| Type                                                              |
-| ----------------------------------------------------------------- |
-| enum('enter', 'done', 'next', 'previous', 'search', 'send', 'go') |
-
----
-
-### `importantForAutofill` <div className="label android">Android</div>
-
-Tells the operating system whether the individual fields in your app should be included in a view structure for autofill purposes on Android API Level 26+. Possible values are `auto`, `no`, `noExcludeDescendants`, `yes`, and `yesExcludeDescendants`. The default value is `auto`.
-
-- `auto`: Let the Android System use its heuristics to determine if the view is important for autofill.
-- `no`: This view isn't important for autofill.
-- `noExcludeDescendants`: This view and its children aren't important for autofill.
-- `yes`: This view is important for autofill.
-- `yesExcludeDescendants`: This view is important for autofill, but its children aren't important for autofill.
-
-| Type                                                                       |
-| -------------------------------------------------------------------------- |
-| enum('auto', 'no', 'noExcludeDescendants', 'yes', 'yesExcludeDescendants') |
-
----
-
-### `inlineImageLeft` <div className="label android">Android</div>
-
-If defined, the provided image resource will be rendered on the left. The image resource must be inside `/android/app/src/main/res/drawable` and referenced like
-
-```
-<TextInput
- inlineImageLeft='search_icon'
-/>
-```
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `inlineImagePadding` <div className="label android">Android</div>
-
-Padding between the inline image, if any, and the text input itself.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `inputAccessoryViewID` <div className="label ios">iOS</div>
-
-An optional identifier which links a custom [InputAccessoryView](inputaccessoryview.md) to this text input. The InputAccessoryView is rendered above the keyboard when this text input is focused.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `inputAccessoryViewButtonLabel` <div className="label ios">iOS</div>
-
-An optional label that overrides the default [InputAccessoryView](inputaccessoryview.md) button label.
-
-By default, the default button label is not localized. Use this property to provide a localized version.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `inputMode`
-
-Works like the `inputmode` attribute in HTML, it determines which keyboard to open, e.g. `numeric` and has precedence over `keyboardType`.
-
-Support the following values:
-
-- `none`
-- `text`
-- `decimal`
-- `numeric`
-- `tel`
-- `search`
-- `email`
-- `url`
-
-| Type                                                                        |
-| --------------------------------------------------------------------------- |
-| enum('decimal', 'email', 'none', 'numeric', 'search', 'tel', 'text', 'url') |
-
----
-
-### `keyboardAppearance` <div className="label ios">iOS</div>
-
-Determines the color of the keyboard.
-
-| Type                             |
-| -------------------------------- |
-| enum('default', 'light', 'dark') |
-
----
-
-### `keyboardType`
-
-Determines which keyboard to open, e.g.`numeric`.
-
-See screenshots of all the types [here](https://davidl.fr/blog/keyboard-react-native-ios-android#all-react-native-keyboard-type-examples-i-os-on-the-left-android-on-the-right).
-
-The following values work across platforms:
-
-- `default`
-- `number-pad`
-- `decimal-pad`
-- `numeric`
-- `email-address`
-- `phone-pad`
-- `url`
-
-_iOS Only_
-
-The following values work on iOS only:
-
-- `ascii-capable`
-- `numbers-and-punctuation`
-- `name-phone-pad`
-- `twitter`
-- `web-search`
-
-_Android Only_
-
-The following values work on Android only:
-
-- `visible-password`
-
-| Type                                                                                                                                                                                                    |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', 'visible-password') |
-
----
-
-### `lineBreakStrategyIOS` <div className="label ios">iOS</div>
-
-Set line break strategy on iOS 14+. Possible values are `none`, `standard`, `hangul-word` and `push-out`.
-
-| Type                                                        | Default  |
-| ----------------------------------------------------------- | -------- |
-| enum(`'none'`, `'standard'`, `'hangul-word'`, `'push-out'`) | `'none'` |
-
----
-
-### `lineBreakModeIOS` <div className="label ios">iOS</div>
-
-Set line break mode on iOS. Possible values are `wordWrapping`, `char`, `clip`, `head`, `middle` and `tail`.
-
-| Type                                                                       | Default          |
-| -------------------------------------------------------------------------- | ---------------- |
-| enum(`'wordWrapping'`, `'char'`, `'clip'`, `'head'`, `'middle'`, `'tail'`) | `'wordWrapping'` |
-
----
-
-### `maxFontSizeMultiplier`
-
-Specifies largest possible scale a font can reach when `allowFontScaling` is enabled. Possible values:
-
-- `null/undefined` (default): inherit from the parent node or the global default (0)
-- `0`: no max, ignore parent/global default
-- `>= 1`: sets the `maxFontSizeMultiplier` of this node to this value
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `maxLength`
-
-Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `multiline`
-
-If `true`, the text input can be multiple lines. The default value is `false`.
-
-:::note
-It is important to note that this aligns the text to the top on iOS, and centers it on Android. Use with `textAlignVertical` set to `top` for the same behavior in both platforms.
-:::
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `numberOfLines`
-
-:::note
-`numberOfLines` on iOS is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Sets the maximum number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `onBlur`
-
-Callback that is called when the text input is blurred.
-
-:::note
-If you are attempting to access the `text` value from `nativeEvent` keep in mind that the resulting value you get can be `undefined` which can cause unintended errors. If you are trying to find the last value of TextInput, you can use the [`onEndEditing`](textinput#onendediting) event, which is fired upon completion of editing.
-:::
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
-
----
-
-### `onChange`
-
-Callback that is called when the text input's text changes.
-
-| Type                                                  |
-| ----------------------------------------------------- |
-| (`{nativeEvent: {eventCount, target, text}}`) => void |
-
----
-
-### `onChangeText`
-
-Callback that is called when the text input's text changes. Changed text is passed as a single string argument to the callback handler.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onContentSizeChange`
-
-Callback that is called when the text input's content size changes.
-
-Only called for multiline text inputs.
-
-| Type                                                       |
-| ---------------------------------------------------------- |
-| (`{nativeEvent: {contentSize: {width, height} }}`) => void |
-
----
-
-### `onEndEditing`
-
-Callback that is called when text input ends.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onPressIn`
-
-Callback that is called when a touch is engaged.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onPressOut`
-
-Callback that is called when a touch is released.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onFocus`
-
-Callback that is called when the text input is focused.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
-
----
-
-### `onKeyPress`
-
-Callback that is called when a key is pressed. This will be called with object where `keyValue` is `'Enter'` or `'Backspace'` for respective keys and the typed-in character otherwise including `' '` for space. Fires before `onChange` callbacks. Note: on Android only the inputs from soft keyboard are handled, not the hardware keyboard inputs.
-
-| Type                                        |
-| ------------------------------------------- |
-| (`{nativeEvent: {key: keyValue} }`) => void |
-
----
-
-### `onLayout`
-
-Invoked on mount and on layout changes.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
-
----
-
-### `onScroll`
-
-Invoked on content scroll. May also contain other properties from `ScrollEvent` but on Android `contentSize` is not provided for performance reasons.
-
-| Type                                                |
-| --------------------------------------------------- |
-| (`{nativeEvent: {contentOffset: {x, y} }}`) => void |
-
----
-
-### `onSelectionChange`
-
-Callback that is called when the text input selection is changed.
-
-| Type                                                  |
-| ----------------------------------------------------- |
-| (`{nativeEvent: {selection: {start, end} }}`) => void |
-
----
-
-### `onSubmitEditing`
-
-Callback that is called when the text input's submit button is pressed.
-
-| Type                                                  |
-| ----------------------------------------------------- |
-| (`{nativeEvent: {text, eventCount, target}}`) => void |
-
-Note that on iOS this method isn't called when using `keyboardType="phone-pad"`.
-
----
-
-### `placeholder`
-
-The string that will be rendered before text input has been entered.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `placeholderTextColor`
-
-The text color of the placeholder string.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `readOnly`
-
-If `true`, text is not editable. The default value is `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `returnKeyLabel` <div className="label android">Android</div>
-
-Sets the return key to the label. Use it instead of `returnKeyType`.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `returnKeyType`
-
-Determines how the return key should look. On Android you can also use `returnKeyLabel`.
-
-_Cross platform_
-
-The following values work across platforms:
-
-- `done`
-- `go`
-- `next`
-- `search`
-- `send`
-
-_Android Only_
-
-The following values work on Android only:
-
-- `none`
-- `previous`
-
-_iOS Only_
-
-The following values work on iOS only:
-
-- `default`
-- `emergency-call`
-- `google`
-- `join`
-- `route`
-- `yahoo`
-
-| Type                                                                                                                              |
-| --------------------------------------------------------------------------------------------------------------------------------- |
-| enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo') |
-
-### `rejectResponderTermination` <div className="label ios">iOS</div>
-
-If `true`, allows TextInput to pass touch events to the parent component. This allows components such as SwipeableListView to be swipeable from the TextInput on iOS, as is the case on Android by default. If `false`, TextInput always asks to handle the input (except when disabled). The default value is `true`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `rows` <div className="label android">Android</div>
-
-Sets the number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `scrollEnabled` <div className="label ios">iOS</div>
-
-If `false`, scrolling of the text view will be disabled. The default value is `true`. Only works with `multiline={true}`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `secureTextEntry`
-
-If `true`, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is `false`. Does not work with `multiline={true}`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `selection`
-
-The start and end of the text input's selection. Set start and end to the same value to position the cursor.
-
-| Type                                  |
-| ------------------------------------- |
-| object: `{start: number,end: number}` |
-
----
-
-### `selectionColor`
-
-The highlight, selection handle and cursor color of the text input.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `selectionHandleColor` <div className="label android">Android</div>
-
-Sets the color of the selection handle. Unlike `selectionColor`, it allows the selection handle color to be customized independently of the selection's color.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `selectTextOnFocus`
-
-If `true`, all text will automatically be selected on focus.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `showSoftInputOnFocus`
-
-When `false`, it will prevent the soft keyboard from showing when the field is focused. The default value is `true`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `smartInsertDelete` <div className="label ios">iOS</div>
-
-If `false`, the iOS system will not insert an extra space after a paste operation neither delete one or two spaces after a cut or delete operation.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `true`  |
-
----
-
-### `spellCheck` <div className="label ios">iOS</div>
-
-If `false`, disables spell-check style (i.e. red underlines). The default value is inherited from `autoCorrect`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `submitBehavior`
-
-When the return key is pressed,
-
-For single line inputs:
-
-- `'newline'` defaults to `'blurAndSubmit'`
-- `undefined` defaults to `'blurAndSubmit'`
-
-For multiline inputs:
-
-- `'newline'` adds a newline
-- `undefined` defaults to `'newline'`
-
-For both single line and multiline inputs:
-
-- `'submit'` will only send a submit event and not blur the input
-- `'blurAndSubmit`' will both blur the input and send a submit event
-
-| Type                                       |
-| ------------------------------------------ |
-| enum('submit', 'blurAndSubmit', 'newline') |
-
----
-
-### `textAlign`
-
-Align the input text to the left, center, or right sides of the input field.
-
-Possible values for `textAlign` are:
-
-- `left`
-- `center`
-- `right`
-
-| Type                            |
-| ------------------------------- |
-| enum('left', 'center', 'right') |
-
----
-
-### `textContentType` <div className="label ios">iOS</div>
-
-Give the keyboard and the system information about the expected semantic meaning for the content that users enter.
-
-:::note
-[`autoComplete`](#autocomplete), provides the same functionality and is available for all platforms. You can use [`Platform.select`](/docs/next/platform#select) for differing platform behaviors.
-
-Avoid using both `textContentType` and `autoComplete`. For backwards compatibility, `textContentType` takes precedence when both properties are set.
-:::
-
-You can set `textContentType` to `username` or `password` to enable autofill of login details from the device keychain.
-
-`newPassword` can be used to indicate a new password input the user may want to save in the keychain, and `oneTimeCode` can be used to indicate that a field can be autofilled by a code arriving in an SMS.
-
-To disable autofill, set `textContentType` to `none`.
-
-Possible values for `textContentType` are:
-
-- `none`
-- `addressCity`
-- `addressCityAndState`
-- `addressState`
-- `birthdate` (iOS 17+)
-- `birthdateDay` (iOS 17+)
-- `birthdateMonth` (iOS 17+)
-- `birthdateYear` (iOS 17+)
-- `countryName`
-- `creditCardExpiration` (iOS 17+)
-- `creditCardExpirationMonth` (iOS 17+)
-- `creditCardExpirationYear` (iOS 17+)
-- `creditCardFamilyName` (iOS 17+)
-- `creditCardGivenName` (iOS 17+)
-- `creditCardMiddleName` (iOS 17+)
-- `creditCardName` (iOS 17+)
-- `creditCardNumber`
-- `creditCardSecurityCode` (iOS 17+)
-- `creditCardType` (iOS 17+)
-- `emailAddress`
-- `familyName`
-- `fullStreetAddress`
-- `givenName`
-- `jobTitle`
-- `location`
-- `middleName`
-- `name`
-- `namePrefix`
-- `nameSuffix`
-- `newPassword`
-- `nickname`
-- `oneTimeCode`
-- `organizationName`
-- `password`
-- `postalCode`
-- `streetAddressLine1`
-- `streetAddressLine2`
-- `sublocality`
-- `telephoneNumber`
-- `URL`
-- `username`
-
-| Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| enum('none', 'addressCity', 'addressCityAndState', 'addressState', 'birthdate', 'birthdateDay', 'birthdateMonth', 'birthdateYear', 'countryName', 'creditCardExpiration', 'creditCardExpirationMonth', 'creditCardExpirationYear', 'creditCardFamilyName', 'creditCardGivenName', 'creditCardMiddleName', 'creditCardName', 'creditCardNumber', 'creditCardSecurityCode', 'creditCardType', 'emailAddress', 'familyName', 'fullStreetAddress', 'givenName', 'jobTitle', 'location', 'middleName', 'name', 'namePrefix', 'nameSuffix', 'newPassword', 'nickname', 'oneTimeCode', 'organizationName', 'password', 'postalCode', 'streetAddressLine1', 'streetAddressLine2', 'sublocality', 'telephoneNumber', 'URL', 'username') |
-
----
-
-### `passwordRules` <div className="label ios">iOS</div>
-
-When using `textContentType` as `newPassword` on iOS we can let the OS know the minimum requirements of the password so that it can generate one that will satisfy them. In order to create a valid string for `PasswordRules` take a look to the [Apple Docs](https://developer.apple.com/password-rules/).
-
-:::tip
-If passwords generation dialog doesn't appear please make sure that:
-
-- AutoFill is enabled: **Settings** → **Passwords & Accounts** → toggle "On" the **AutoFill Passwords**,
-- iCloud Keychain is used: **Settings** → **Apple ID** → **iCloud** → **Keychain** → toggle "On" the **iCloud Keychain**.
-  :::
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `style`
-
-Note that not all Text styles are supported, an incomplete list of what is not supported includes:
-
-- `borderLeftWidth`
-- `borderTopWidth`
-- `borderRightWidth`
-- `borderBottomWidth`
-- `borderTopLeftRadius`
-- `borderTopRightRadius`
-- `borderBottomRightRadius`
-- `borderBottomLeftRadius`
-
-[Styles](style.md)
-
-| Type                  |
-| --------------------- |
-| [Text](text.md#style) |
-
----
-
-### `textBreakStrategy` <div className="label android">Android</div>
-
-Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced` The default value is `highQuality`.
-
-| Type                                      |
-| ----------------------------------------- |
-| enum('simple', 'highQuality', 'balanced') |
-
----
-
-### `underlineColorAndroid` <div className="label android">Android</div>
-
-The color of the `TextInput` underline.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `value`
-
-The value to show for the text input. `TextInput` is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker.
-
-| Type   |
-| ------ |
-| string |
-
-## Methods
-
-### `.focus()`
-
-```tsx
-focus();
-```
-
-Makes the native input request focus.
-
-### `.blur()`
-
-```tsx
-blur();
-```
-
-Makes the native input lose focus.
-
-### `clear()`
-
-```tsx
-clear();
-```
-
-Removes all text from the `TextInput`.
-
----
-
-### `isFocused()`
-
-```tsx
-isFocused(): boolean;
-```
-
-Returns `true` if the input is currently focused; `false` otherwise.
-
-# Known issues
-
-- [react-native#19096](https://github.com/facebook/react-native/issues/19096): Doesn't support Android's `onKeyPreIme`.
-- [react-native#19366](https://github.com/facebook/react-native/issues/19366): Calling .focus() after closing Android's keyboard via back button doesn't bring keyboard up again.
-- [react-native#26799](https://github.com/facebook/react-native/issues/26799): Doesn't support Android's `secureTextEntry` when `keyboardType="email-address"` or `keyboardType="phone-pad"`.
+---
+id: textinput
+title: TextInput
+---
+
+A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.
+
+The most basic use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. A minimal example:
+
+```SnackPlayer name=TextInput%20Example
+import {useState} from 'react';
+import {StyleSheet, TextInput} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const TextInputExample = () => {
+  const [text, onChangeText] = useState('Useless Text');
+  const [number, onChangeNumber] = useState('');
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView>
+        <TextInput
+          style={styles.input}
+          onChangeText={onChangeText}
+          value={text}
+        />
+        <TextInput
+          style={styles.input}
+          onChangeText={onChangeNumber}
+          value={number}
+          placeholder="useless placeholder"
+          keyboardType="numeric"
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  input: {
+    height: 40,
+    margin: 12,
+    borderWidth: 1,
+    padding: 10,
+  },
+});
+
+export default TextInputExample;
+```
+
+Two methods exposed via the native element are `.focus()` and `.blur()` that will focus or blur the TextInput programmatically.
+
+Note that some props are only available with `multiline={true/false}`. Additionally, border styles that apply to only one side of the element (e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if `multiline=true`. To achieve the same effect, you can wrap your `TextInput` in a `View`:
+
+```SnackPlayer name=Multiline%20TextInput%20Example
+import {useState} from 'react';
+import {TextInput, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const MultilineTextInputExample = () => {
+  const [value, onChangeText] = useState('Useless Multiline Placeholder');
+
+  // If you type something in the text box that is a color,
+  // the background will change to that color.
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView
+        style={{
+          flex: 1,
+          backgroundColor: value.toLowerCase(),
+        }}>
+        <TextInput
+          editable
+          multiline
+          numberOfLines={4}
+          maxLength={40}
+          onChangeText={text => onChangeText(text)}
+          value={value}
+          style={styles.textInput}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  textInput: {
+    padding: 10,
+    borderColor: '#000',
+    borderWidth: 1,
+    margin: 12,
+  },
+});
+
+export default MultilineTextInputExample;
+```
+
+`TextInput` has a border at the bottom of its view by default. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this are to either not set height explicitly, in which case the system will take care of displaying the border in the correct position, or to not display the border by setting `underlineColorAndroid` to transparent.
+
+Note that on Android performing text selection in an input can change the app's activity `windowSoftInputMode` param to `adjustResize`. This may cause issues with components that have position: 'absolute' while the keyboard is active. To avoid this behavior either specify `windowSoftInputMode` in AndroidManifest.xml ( https://developer.android.com/guide/topics/manifest/activity-element.html ) or control this param programmatically with native code.
+
+---
+
+# Reference
+
+## Props
+
+### [View Props](view.md#props)
+
+Inherits [View Props](view.md#props).
+
+---
+
+### `allowFontScaling`
+
+Specifies whether fonts should scale to respect Text Size accessibility settings. The default is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `autoCapitalize`
+
+Tells `TextInput` to automatically capitalize certain characters. This property is not supported by some keyboard types such as `name-phone-pad`.
+
+- `characters`: all characters.
+- `words`: first letter of each word.
+- `sentences`: first letter of each sentence (_default_).
+- `none`: don't auto capitalize anything.
+
+| Type                                             |
+| ------------------------------------------------ |
+| enum('none', 'sentences', 'words', 'characters') |
+
+---
+
+### `autoComplete`
+
+Specifies autocomplete hints for the system, so it can provide autofill. On Android, the system will always attempt to offer autofill by using heuristics to identify the type of content. To disable autocomplete, set `autoComplete` to `off`.
+
+The following values work across platforms:
+
+- `additional-name`
+- `address-line1`
+- `address-line2`
+- `birthdate-day` (iOS 17+)
+- `birthdate-full` (iOS 17+)
+- `birthdate-month` (iOS 17+)
+- `birthdate-year` (iOS 17+)
+- `cc-csc` (iOS 17+)
+- `cc-exp` (iOS 17+)
+- `cc-exp-day` (iOS 17+)
+- `cc-exp-month` (iOS 17+)
+- `cc-exp-year` (iOS 17+)
+- `cc-number`
+- `country`
+- `current-password`
+- `email`
+- `family-name`
+- `given-name`
+- `honorific-prefix`
+- `honorific-suffix`
+- `name`
+- `new-password`
+- `off`
+- `one-time-code`
+- `postal-code`
+- `street-address`
+- `tel`
+- `username`
+
+<div className="label basic ios">iOS</div>
+
+The following values work on iOS only:
+
+- `cc-family-name` (iOS 17+)
+- `cc-given-name` (iOS 17+)
+- `cc-middle-name` (iOS 17+)
+- `cc-name` (iOS 17+)
+- `cc-type` (iOS 17+)
+- `nickname`
+- `organization`
+- `organization-title`
+- `url`
+
+<div className="label basic android">Android</div>
+
+The following values work on Android only:
+
+- `gender`
+- `name-family`
+- `name-given`
+- `name-middle`
+- `name-middle-initial`
+- `name-prefix`
+- `name-suffix`
+- `password`
+- `password-new`
+- `postal-address`
+- `postal-address-country`
+- `postal-address-extended`
+- `postal-address-extended-postal-code`
+- `postal-address-locality`
+- `postal-address-region`
+- `sms-otp`
+- `tel-country-code`
+- `tel-device`
+- `tel-national`
+- `username-new`
+
+| Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| enum('additional-name', 'address-line1', 'address-line2', 'birthdate-day', 'birthdate-full', 'birthdate-month', 'birthdate-year', 'cc-csc', 'cc-exp', 'cc-exp-day', 'cc-exp-month', 'cc-exp-year', 'cc-number', 'country', 'current-password', 'email', 'family-name', 'given-name', 'honorific-prefix', 'honorific-suffix', 'name', 'new-password', 'off', 'one-time-code', 'postal-code', 'street-address', 'tel', 'username', 'cc-family-name', 'cc-given-name', 'cc-middle-name', 'cc-name', 'cc-type', 'nickname', 'organization', 'organization-title', 'url', 'gender', 'name-family', 'name-given', 'name-middle', 'name-middle-initial', 'name-prefix', 'name-suffix', 'password', 'password-new', 'postal-address', 'postal-address-country', 'postal-address-extended', 'postal-address-extended-postal-code', 'postal-address-locality', 'postal-address-region', 'sms-otp', 'tel-country-code', 'tel-device', 'tel-national', 'username-new') |
+
+---
+
+### `autoCorrect`
+
+If `false`, disables auto-correct. The default value is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `autoFocus`
+
+If `true`, focuses the input. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `blurOnSubmit`
+
+:::warning[Deprecated]
+Note that `submitBehavior` now takes the place of `blurOnSubmit` and will override any behavior defined by `blurOnSubmit`. See [submitBehavior](textinput#submitbehavior).
+:::
+
+If `true`, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting `blurOnSubmit` to `true` means that pressing return will blur the field and trigger the `onSubmitEditing` event instead of inserting a newline into the field.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `caretHidden`
+
+If `true`, caret is hidden. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `clearButtonMode` <div className="label ios">iOS</div>
+
+When the clear button should appear on the right side of the text view. This property is supported only for single-line TextInput component. The default value is `never`.
+
+| Type                                                       |
+| ---------------------------------------------------------- |
+| enum('never', 'while-editing', 'unless-editing', 'always') |
+
+---
+
+### `clearTextOnFocus` <div className="label ios">iOS</div>
+
+If `true`, clears the text field automatically when editing begins.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `contextMenuHidden`
+
+If `true`, context menu is hidden. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `dataDetectorTypes` <div className="label ios">iOS</div>
+
+Determines the types of data converted to clickable URLs in the text input. Only valid if `multiline={true}` and `editable={false}`. By default no data types are detected.
+
+You can provide one type or an array of many types.
+
+Possible values for `dataDetectorTypes` are:
+
+- `'phoneNumber'`
+- `'link'`
+- `'address'`
+- `'calendarEvent'`
+- `'none'`
+- `'all'`
+
+| Type                                                                                                                                                     |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), ,array of enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all') |
+
+---
+
+### `defaultValue`
+
+Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `disableKeyboardShortcuts` <div className="label ios">iOS</div>
+
+If `true`, the keyboard shortcuts (undo/redo and copy buttons) are disabled.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `cursorColor` <div className="label android">Android</div>
+
+When provided it will set the color of the cursor (or "caret") in the component. Unlike the behavior of `selectionColor` the cursor color will be set independently from the color of the text selection box.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `disableFullscreenUI` <div className="label android">Android</div>
+
+When `false`, if there is a small amount of space available around a text input (e.g. landscape orientation on a phone), the OS may choose to have the user edit the text inside of a full screen text input mode. When `true`, this feature is disabled and users will always edit the text directly inside of the text input. Defaults to `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `editable`
+
+If `false`, text is not editable. The default value is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `enablesReturnKeyAutomatically` <div className="label ios">iOS</div>
+
+If `true`, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `enterKeyHint`
+
+Determines what text should be shown to the return key. Has precedence over the `returnKeyType` prop.
+
+The following values work across platforms:
+
+- `done`
+- `next`
+- `search`
+- `send`
+- `go`
+
+_Android Only_
+
+The following values work on Android only:
+
+- `previous`
+
+_iOS Only_
+
+The following values work on iOS only:
+
+- `enter`
+
+| Type                                                              |
+| ----------------------------------------------------------------- |
+| enum('enter', 'done', 'next', 'previous', 'search', 'send', 'go') |
+
+---
+
+### `importantForAutofill` <div className="label android">Android</div>
+
+Tells the operating system whether the individual fields in your app should be included in a view structure for autofill purposes on Android API Level 26+. Possible values are `auto`, `no`, `noExcludeDescendants`, `yes`, and `yesExcludeDescendants`. The default value is `auto`.
+
+- `auto`: Let the Android System use its heuristics to determine if the view is important for autofill.
+- `no`: This view isn't important for autofill.
+- `noExcludeDescendants`: This view and its children aren't important for autofill.
+- `yes`: This view is important for autofill.
+- `yesExcludeDescendants`: This view is important for autofill, but its children aren't important for autofill.
+
+| Type                                                                       |
+| -------------------------------------------------------------------------- |
+| enum('auto', 'no', 'noExcludeDescendants', 'yes', 'yesExcludeDescendants') |
+
+---
+
+### `inlineImageLeft` <div className="label android">Android</div>
+
+If defined, the provided image resource will be rendered on the left. The image resource must be inside `/android/app/src/main/res/drawable` and referenced like
+
+```
+<TextInput
+ inlineImageLeft='search_icon'
+/>
+```
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `inlineImagePadding` <div className="label android">Android</div>
+
+Padding between the inline image, if any, and the text input itself.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `inputAccessoryViewID` <div className="label ios">iOS</div>
+
+An optional identifier which links a custom [InputAccessoryView](inputaccessoryview.md) to this text input. The InputAccessoryView is rendered above the keyboard when this text input is focused.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `inputAccessoryViewButtonLabel` <div className="label ios">iOS</div>
+
+An optional label that overrides the default [InputAccessoryView](inputaccessoryview.md) button label.
+
+By default, the default button label is not localized. Use this property to provide a localized version.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `inputMode`
+
+Works like the `inputmode` attribute in HTML, it determines which keyboard to open, e.g. `numeric` and has precedence over `keyboardType`.
+
+Support the following values:
+
+- `none`
+- `text`
+- `decimal`
+- `numeric`
+- `tel`
+- `search`
+- `email`
+- `url`
+
+| Type                                                                        |
+| --------------------------------------------------------------------------- |
+| enum('decimal', 'email', 'none', 'numeric', 'search', 'tel', 'text', 'url') |
+
+---
+
+### `keyboardAppearance` <div className="label ios">iOS</div>
+
+Determines the color of the keyboard.
+
+| Type                             |
+| -------------------------------- |
+| enum('default', 'light', 'dark') |
+
+---
+
+### `keyboardType`
+
+Determines which keyboard to open, e.g.`numeric`.
+
+See screenshots of all the types [here](https://davidl.fr/blog/keyboard-react-native-ios-android#all-react-native-keyboard-type-examples-i-os-on-the-left-android-on-the-right).
+
+The following values work across platforms:
+
+- `default`
+- `number-pad`
+- `decimal-pad`
+- `numeric`
+- `email-address`
+- `phone-pad`
+- `url`
+
+_iOS Only_
+
+The following values work on iOS only:
+
+- `ascii-capable`
+- `numbers-and-punctuation`
+- `name-phone-pad`
+- `twitter`
+- `web-search`
+
+_Android Only_
+
+The following values work on Android only:
+
+- `visible-password`
+
+| Type                                                                                                                                                                                                    |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', 'visible-password') |
+
+---
+
+### `lineBreakStrategyIOS` <div className="label ios">iOS</div>
+
+Set line break strategy on iOS 14+. Possible values are `none`, `standard`, `hangul-word` and `push-out`.
+
+| Type                                                        | Default  |
+| ----------------------------------------------------------- | -------- |
+| enum(`'none'`, `'standard'`, `'hangul-word'`, `'push-out'`) | `'none'` |
+
+---
+
+### `lineBreakModeIOS` <div className="label ios">iOS</div>
+
+Set line break mode on iOS. Possible values are `wordWrapping`, `char`, `clip`, `head`, `middle` and `tail`.
+
+| Type                                                                       | Default          |
+| -------------------------------------------------------------------------- | ---------------- |
+| enum(`'wordWrapping'`, `'char'`, `'clip'`, `'head'`, `'middle'`, `'tail'`) | `'wordWrapping'` |
+
+---
+
+### `maxFontSizeMultiplier`
+
+Specifies largest possible scale a font can reach when `allowFontScaling` is enabled. Possible values:
+
+- `null/undefined` (default): inherit from the parent node or the global default (0)
+- `0`: no max, ignore parent/global default
+- `>= 1`: sets the `maxFontSizeMultiplier` of this node to this value
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `maxLength`
+
+Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `multiline`
+
+If `true`, the text input can be multiple lines. The default value is `false`.
+
+:::note
+It is important to note that this aligns the text to the top on iOS, and centers it on Android. Use with `textAlignVertical` set to `top` for the same behavior in both platforms.
+:::
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `numberOfLines`
+
+:::note
+`numberOfLines` on iOS is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Sets the maximum number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `onBlur`
+
+Callback that is called when the text input is blurred.
+
+:::note
+If you are attempting to access the `text` value from `nativeEvent` keep in mind that the resulting value you get can be `undefined` which can cause unintended errors. If you are trying to find the last value of TextInput, you can use the [`onEndEditing`](textinput#onendediting) event, which is fired upon completion of editing.
+:::
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
+
+---
+
+### `onChange`
+
+Callback that is called when the text input's text changes.
+
+| Type                                                  |
+| ----------------------------------------------------- |
+| (`{nativeEvent: {eventCount, target, text}}`) => void |
+
+---
+
+### `onChangeText`
+
+Callback that is called when the text input's text changes. Changed text is passed as a single string argument to the callback handler.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onContentSizeChange`
+
+Callback that is called when the text input's content size changes.
+
+Only called for multiline text inputs.
+
+| Type                                                       |
+| ---------------------------------------------------------- |
+| (`{nativeEvent: {contentSize: {width, height} }}`) => void |
+
+---
+
+### `onEndEditing`
+
+Callback that is called when text input ends.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onPressIn`
+
+Callback that is called when a touch is engaged.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onPressOut`
+
+Callback that is called when a touch is released.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onFocus`
+
+Callback that is called when the text input is focused.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
+
+---
+
+### `onKeyPress`
+
+Callback that is called when a key is pressed. This will be called with object where `keyValue` is `'Enter'` or `'Backspace'` for respective keys and the typed-in character otherwise including `' '` for space. Fires before `onChange` callbacks. Note: on Android only the inputs from soft keyboard are handled, not the hardware keyboard inputs.
+
+| Type                                        |
+| ------------------------------------------- |
+| (`{nativeEvent: {key: keyValue} }`) => void |
+
+---
+
+### `onLayout`
+
+Invoked on mount and on layout changes.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
+
+---
+
+### `onScroll`
+
+Invoked on content scroll. May also contain other properties from `ScrollEvent` but on Android `contentSize` is not provided for performance reasons.
+
+| Type                                                |
+| --------------------------------------------------- |
+| (`{nativeEvent: {contentOffset: {x, y} }}`) => void |
+
+---
+
+### `onSelectionChange`
+
+Callback that is called when the text input selection is changed.
+
+| Type                                                  |
+| ----------------------------------------------------- |
+| (`{nativeEvent: {selection: {start, end} }}`) => void |
+
+---
+
+### `onSubmitEditing`
+
+Callback that is called when the text input's submit button is pressed.
+
+| Type                                                  |
+| ----------------------------------------------------- |
+| (`{nativeEvent: {text, eventCount, target}}`) => void |
+
+Note that on iOS this method isn't called when using `keyboardType="phone-pad"`.
+
+---
+
+### `placeholder`
+
+The string that will be rendered before text input has been entered.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `placeholderTextColor`
+
+The text color of the placeholder string.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `readOnly`
+
+If `true`, text is not editable. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `returnKeyLabel` <div className="label android">Android</div>
+
+Sets the return key to the label. Use it instead of `returnKeyType`.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `returnKeyType`
+
+Determines how the return key should look. On Android you can also use `returnKeyLabel`.
+
+_Cross platform_
+
+The following values work across platforms:
+
+- `done`
+- `go`
+- `next`
+- `search`
+- `send`
+
+_Android Only_
+
+The following values work on Android only:
+
+- `none`
+- `previous`
+
+_iOS Only_
+
+The following values work on iOS only:
+
+- `default`
+- `emergency-call`
+- `google`
+- `join`
+- `route`
+- `yahoo`
+
+| Type                                                                                                                              |
+| --------------------------------------------------------------------------------------------------------------------------------- |
+| enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo') |
+
+### `rejectResponderTermination` <div className="label ios">iOS</div>
+
+If `true`, allows TextInput to pass touch events to the parent component. This allows components such as SwipeableListView to be swipeable from the TextInput on iOS, as is the case on Android by default. If `false`, TextInput always asks to handle the input (except when disabled). The default value is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `rows` <div className="label android">Android</div>
+
+Sets the number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `scrollEnabled` <div className="label ios">iOS</div>
+
+If `false`, scrolling of the text view will be disabled. The default value is `true`. Only works with `multiline={true}`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `secureTextEntry`
+
+If `true`, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is `false`. Does not work with `multiline={true}`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `selection`
+
+The start and end of the text input's selection. Set start and end to the same value to position the cursor.
+
+| Type                                  |
+| ------------------------------------- |
+| object: `{start: number,end: number}` |
+
+---
+
+### `selectionColor`
+
+The highlight, selection handle and cursor color of the text input.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `selectionHandleColor` <div className="label android">Android</div>
+
+Sets the color of the selection handle. Unlike `selectionColor`, it allows the selection handle color to be customized independently of the selection's color.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `selectTextOnFocus`
+
+If `true`, all text will automatically be selected on focus.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `showSoftInputOnFocus`
+
+When `false`, it will prevent the soft keyboard from showing when the field is focused. The default value is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `smartInsertDelete` <div className="label ios">iOS</div>
+
+If `false`, the iOS system will not insert an extra space after a paste operation neither delete one or two spaces after a cut or delete operation.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `true`  |
+
+---
+
+### `spellCheck` <div className="label ios">iOS</div>
+
+If `false`, disables spell-check style (i.e. red underlines). The default value is inherited from `autoCorrect`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `submitBehavior`
+
+When the return key is pressed,
+
+For single line inputs:
+
+- `'newline'` defaults to `'blurAndSubmit'`
+- `undefined` defaults to `'blurAndSubmit'`
+
+For multiline inputs:
+
+- `'newline'` adds a newline
+- `undefined` defaults to `'newline'`
+
+For both single line and multiline inputs:
+
+- `'submit'` will only send a submit event and not blur the input
+- `'blurAndSubmit`' will both blur the input and send a submit event
+
+| Type                                       |
+| ------------------------------------------ |
+| enum('submit', 'blurAndSubmit', 'newline') |
+
+---
+
+### `textAlign`
+
+Align the input text to the left, center, or right sides of the input field.
+
+Possible values for `textAlign` are:
+
+- `left`
+- `center`
+- `right`
+
+| Type                            |
+| ------------------------------- |
+| enum('left', 'center', 'right') |
+
+---
+
+### `textContentType` <div className="label ios">iOS</div>
+
+Give the keyboard and the system information about the expected semantic meaning for the content that users enter.
+
+:::note
+[`autoComplete`](#autocomplete), provides the same functionality and is available for all platforms. You can use [`Platform.select`](/docs/next/platform#select) for differing platform behaviors.
+
+Avoid using both `textContentType` and `autoComplete`. For backwards compatibility, `textContentType` takes precedence when both properties are set.
+:::
+
+You can set `textContentType` to `username` or `password` to enable autofill of login details from the device keychain.
+
+`newPassword` can be used to indicate a new password input the user may want to save in the keychain, and `oneTimeCode` can be used to indicate that a field can be autofilled by a code arriving in an SMS.
+
+To disable autofill, set `textContentType` to `none`.
+
+Possible values for `textContentType` are:
+
+- `none`
+- `addressCity`
+- `addressCityAndState`
+- `addressState`
+- `birthdate` (iOS 17+)
+- `birthdateDay` (iOS 17+)
+- `birthdateMonth` (iOS 17+)
+- `birthdateYear` (iOS 17+)
+- `countryName`
+- `creditCardExpiration` (iOS 17+)
+- `creditCardExpirationMonth` (iOS 17+)
+- `creditCardExpirationYear` (iOS 17+)
+- `creditCardFamilyName` (iOS 17+)
+- `creditCardGivenName` (iOS 17+)
+- `creditCardMiddleName` (iOS 17+)
+- `creditCardName` (iOS 17+)
+- `creditCardNumber`
+- `creditCardSecurityCode` (iOS 17+)
+- `creditCardType` (iOS 17+)
+- `emailAddress`
+- `familyName`
+- `fullStreetAddress`
+- `givenName`
+- `jobTitle`
+- `location`
+- `middleName`
+- `name`
+- `namePrefix`
+- `nameSuffix`
+- `newPassword`
+- `nickname`
+- `oneTimeCode`
+- `organizationName`
+- `password`
+- `postalCode`
+- `streetAddressLine1`
+- `streetAddressLine2`
+- `sublocality`
+- `telephoneNumber`
+- `URL`
+- `username`
+
+| Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| enum('none', 'addressCity', 'addressCityAndState', 'addressState', 'birthdate', 'birthdateDay', 'birthdateMonth', 'birthdateYear', 'countryName', 'creditCardExpiration', 'creditCardExpirationMonth', 'creditCardExpirationYear', 'creditCardFamilyName', 'creditCardGivenName', 'creditCardMiddleName', 'creditCardName', 'creditCardNumber', 'creditCardSecurityCode', 'creditCardType', 'emailAddress', 'familyName', 'fullStreetAddress', 'givenName', 'jobTitle', 'location', 'middleName', 'name', 'namePrefix', 'nameSuffix', 'newPassword', 'nickname', 'oneTimeCode', 'organizationName', 'password', 'postalCode', 'streetAddressLine1', 'streetAddressLine2', 'sublocality', 'telephoneNumber', 'URL', 'username') |
+
+---
+
+### `passwordRules` <div className="label ios">iOS</div>
+
+When using `textContentType` as `newPassword` on iOS we can let the OS know the minimum requirements of the password so that it can generate one that will satisfy them. In order to create a valid string for `PasswordRules` take a look to the [Apple Docs](https://developer.apple.com/password-rules/).
+
+:::tip
+If passwords generation dialog doesn't appear please make sure that:
+
+- AutoFill is enabled: **Settings** → **Passwords & Accounts** → toggle "On" the **AutoFill Passwords**,
+- iCloud Keychain is used: **Settings** → **Apple ID** → **iCloud** → **Keychain** → toggle "On" the **iCloud Keychain**.
+  :::
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `style`
+
+Note that not all Text styles are supported, an incomplete list of what is not supported includes:
+
+- `borderLeftWidth`
+- `borderTopWidth`
+- `borderRightWidth`
+- `borderBottomWidth`
+- `borderTopLeftRadius`
+- `borderTopRightRadius`
+- `borderBottomRightRadius`
+- `borderBottomLeftRadius`
+
+[Styles](style.md)
+
+| Type                  |
+| --------------------- |
+| [Text](text.md#style) |
+
+---
+
+### `textBreakStrategy` <div className="label android">Android</div>
+
+Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced` The default value is `highQuality`.
+
+| Type                                      |
+| ----------------------------------------- |
+| enum('simple', 'highQuality', 'balanced') |
+
+---
+
+### `underlineColorAndroid` <div className="label android">Android</div>
+
+The color of the `TextInput` underline.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `value`
+
+The value to show for the text input. `TextInput` is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker.
+
+| Type   |
+| ------ |
+| string |
+
+## Methods
+
+### `.focus()`
+
+```tsx
+focus();
+```
+
+Makes the native input request focus.
+
+### `.blur()`
+
+```tsx
+blur();
+```
+
+Makes the native input lose focus.
+
+### `clear()`
+
+```tsx
+clear();
+```
+
+Removes all text from the `TextInput`.
+
+---
+
+### `isFocused()`
+
+```tsx
+isFocused(): boolean;
+```
+
+Returns `true` if the input is currently focused; `false` otherwise.
+
+# Known issues
+
+- [react-native#19096](https://github.com/facebook/react-native/issues/19096): Doesn't support Android's `onKeyPreIme`.
+- [react-native#19366](https://github.com/facebook/react-native/issues/19366): Calling .focus() after closing Android's keyboard via back button doesn't bring keyboard up again.
+- [react-native#26799](https://github.com/facebook/react-native/issues/26799): Doesn't support Android's `secureTextEntry` when `keyboardType="email-address"` or `keyboardType="phone-pad"`.
diff --git a/website/versioned_docs/version-0.82/the-new-architecture/custom-cxx-types.md b/website/versioned_docs/version-0.82/the-new-architecture/custom-cxx-types.md
index 94db3e21b3f..edc490b8070 100644
--- a/website/versioned_docs/version-0.82/the-new-architecture/custom-cxx-types.md
+++ b/website/versioned_docs/version-0.82/the-new-architecture/custom-cxx-types.md
@@ -173,8 +173,8 @@ First, we need to update the `App.tsx` file to use the new method from the Turbo
 
 ```diff title="App.tsx"
 // ...
-+ const [cubicSource, setCubicSource] = React.useState('')
-+ const [cubicRoot, setCubicRoot] = React.useState(0)
++ const [cubicSource, setCubicSource] = useState('')
++ const [cubicRoot, setCubicRoot] = useState(0)
   return (
     <SafeAreaView style={styles.container}>
       <View>
@@ -366,9 +366,9 @@ To test the code in the app, we have to modify the `App.tsx` file.
 2. Replace the body of the `App()` function with the following code:
 
 ```tsx title="App.tsx (App function body replacement)"
-const [street, setStreet] = React.useState('');
-const [num, setNum] = React.useState('');
-const [isValidAddress, setIsValidAddress] = React.useState<
+const [street, setStreet] = useState('');
+const [num, setNum] = useState('');
+const [isValidAddress, setIsValidAddress] = useState<
   boolean | null
 >(null);
 
diff --git a/website/versioned_docs/version-0.82/the-new-architecture/direct-manipulation.md b/website/versioned_docs/version-0.82/the-new-architecture/direct-manipulation.md
index 6708a643cba..6035b6a64b7 100644
--- a/website/versioned_docs/version-0.82/the-new-architecture/direct-manipulation.md
+++ b/website/versioned_docs/version-0.82/the-new-architecture/direct-manipulation.md
@@ -26,7 +26,6 @@ For example, the following code demonstrates editing the input when you tap a bu
 <TabItem value="javascript">
 
 ```SnackPlayer name=setNativeProps%20on%20TextInput&ext=js
-import React from 'react';
 import {useCallback, useRef} from 'react';
 import {
   StyleSheet,
@@ -74,7 +73,6 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Clear%20text&ext=tsx
-import React from 'react';
 import {useCallback, useRef} from 'react';
 import {
   StyleSheet,
diff --git a/website/versioned_docs/version-0.82/the-new-architecture/fabric-component-native-commands.md b/website/versioned_docs/version-0.82/the-new-architecture/fabric-component-native-commands.md
index ca87360ba3a..5cb5dbd6710 100644
--- a/website/versioned_docs/version-0.82/the-new-architecture/fabric-component-native-commands.md
+++ b/website/versioned_docs/version-0.82/the-new-architecture/fabric-component-native-commands.md
@@ -107,7 +107,6 @@ Now you can use the command in the the app.
 Open the `App.tsx` file and modify it as it follows:
 
 ```diff title="App.tsx"
-import React from 'react';
 -import {Alert, StyleSheet, View} from 'react-native';
 -import WebView from '../specs/WebViewNativeComponent';
 +import {Alert, StyleSheet, Pressable, Text, View} from 'react-native';
@@ -186,7 +185,6 @@ export default App;
 Open the `App.tsx` file and modify it as it follows:
 
 ```diff title="App.jsx"
-import React from 'react';
 -import {Alert, StyleSheet, View} from 'react-native';
 -import WebView from '../specs/WebViewNativeComponent';
 +import {Alert, StyleSheet, Pressable, Text, View} from 'react-native';
diff --git a/website/versioned_docs/version-0.82/the-new-architecture/layout-measurements.md b/website/versioned_docs/version-0.82/the-new-architecture/layout-measurements.md
index cc693a99b0c..715cd42aee7 100644
--- a/website/versioned_docs/version-0.82/the-new-architecture/layout-measurements.md
+++ b/website/versioned_docs/version-0.82/the-new-architecture/layout-measurements.md
@@ -10,7 +10,7 @@ Typical code will look like this:
 
 ```tsx
 function AComponent(children) {
-  const targetRef = React.useRef(null)
+  const targetRef = useRef(null)
 
   useLayoutEffect(() => {
     targetRef.current?.measure((x, y, width, height, pageX, pageY) => {
diff --git a/website/versioned_docs/version-0.82/the-new-architecture/native-modules-custom-events.md b/website/versioned_docs/version-0.82/the-new-architecture/native-modules-custom-events.md
index 0af5bb95957..c44bbf93c16 100644
--- a/website/versioned_docs/version-0.82/the-new-architecture/native-modules-custom-events.md
+++ b/website/versioned_docs/version-0.82/the-new-architecture/native-modules-custom-events.md
@@ -134,7 +134,6 @@ Now, it's time to update the code of the App to handle the new event.
 Open the `App.tsx` file and modify it as it follows:
 
 ```diff title="App.tsx"
-import React from 'react';
 import {
 + Alert,
 + EventSubscription,
diff --git a/website/versioned_docs/version-0.82/the-new-architecture/pure-cxx-modules.md b/website/versioned_docs/version-0.82/the-new-architecture/pure-cxx-modules.md
index 440dfbe553d..de4e3aa886e 100644
--- a/website/versioned_docs/version-0.82/the-new-architecture/pure-cxx-modules.md
+++ b/website/versioned_docs/version-0.82/the-new-architecture/pure-cxx-modules.md
@@ -1,502 +1,502 @@
-import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameForCurrentVersion';
-import {getCurrentVersion} from '@site/src/getCurrentVersion';
-import CodeBlock from '@theme/CodeBlock';
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-# Cross-Platform Native Modules (C++)
-
-Writing a module in C++ is the best way to share platform-agnostic code between Android and iOS. With pure C++ modules, you can write your logic only once and reuse it right away from all the platforms, without the need of writing platform-specific code.
-
-In this guide, we will go through the creation of a pure C++ Turbo Native Module:
-
-1. Create the JS specs
-2. Configure Codegen to generate the scaffolding
-3. Implement the Native logic
-4. Register the module in the Android and iOS application
-5. Test your changes in JS
-
-The rest of this guide assumes that you have created your application running the command:
-
-<CodeBlock language="bash" title="shell">
-{`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`}
-</CodeBlock>
-
-## 1. Create the JS specs
-
-Pure C++ Turbo Native Modules are Turbo Native Modules. They need a specification file (also called spec file) so that Codegen can create the scaffolding code for us. The specification file is also what we use to access the Turbo Native Module in JS.
-
-Spec files need to be written in a typed JS dialect. React Native currently supports Flow or TypeScript.
-
-1. Inside the root folder of your app, create a new folder called `specs`.
-2. Create a new file called `NativeSampleModule.ts` with the following code:
-
-:::warning
-All Native Turbo Module spec files must have the prefix `Native`, otherwise Codegen will ignore them.
-:::
-
-<Tabs groupId="tnm-specs" queryString defaultValue={constants.defaultJavaScriptSpecLanguages} values={constants.javaScriptSpecLanguages}>
-<TabItem value="flow">
-
-```ts title="specs/NativeSampleModule.ts"
-// @flow
-import type {TurboModule} from 'react-native'
-import { TurboModuleRegistry } from "react-native";
-
-export interface Spec extends TurboModule {
-  +reverseString: (input: string) => string;
-}
-
-export default (TurboModuleRegistry.getEnforcing<Spec>(
-  "NativeSampleModule"
-): Spec);
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```ts title="specs/NativeSampleModule.ts"
-import {TurboModule, TurboModuleRegistry} from 'react-native';
-
-export interface Spec extends TurboModule {
-  readonly reverseString: (input: string) => string;
-}
-
-export default TurboModuleRegistry.getEnforcing<Spec>(
-  'NativeSampleModule',
-);
-```
-
-</TabItem>
-</Tabs>
-
-## 2. Configure Codegen
-
-The next step is to configure [Codegen](what-is-codegen.mdx) in your `package.json`. Update the file to include:
-
-```json title="package.json"
-     "start": "react-native start",
-     "test": "jest"
-   },
-   // highlight-add-start
-   "codegenConfig": {
-     "name": "AppSpecs",
-     "type": "modules",
-     "jsSrcsDir": "specs",
-     "android": {
-       "javaPackageName": "com.sampleapp.specs"
-     }
-   },
-   // highlight-add-end
-   "dependencies": {
-```
-
-This configuration tells Codegen to look for spec files in the `specs` folder. It also instructs Codegen to only generate code for `modules` and to namespace the generated code as `AppSpecs`.
-
-## 3. Write the Native Code
-
-Writing a C++ Turbo Native Module allows you to share the code between Android and iOS. Therefore we will be writing the code once, and we will look into what changes we need to apply to the platforms so that the C++ code can be picked up.
-
-1. Create a folder named `shared` at the same level as the `android` and `ios` folders.
-2. Inside the `shared` folder, create a new file called `NativeSampleModule.h`.
-
-   ```cpp title="shared/NativeSampleModule.h"
-   #pragma once
-
-   #include <AppSpecsJSI.h>
-
-   #include <memory>
-   #include <string>
-
-   namespace facebook::react {
-
-   class NativeSampleModule : public NativeSampleModuleCxxSpec<NativeSampleModule> {
-   public:
-     NativeSampleModule(std::shared_ptr<CallInvoker> jsInvoker);
-
-     std::string reverseString(jsi::Runtime& rt, std::string input);
-   };
-
-   } // namespace facebook::react
-
-   ```
-
-3. Inside the `shared` folder, create a new file called `NativeSampleModule.cpp`.
-
-   ```cpp title="shared/NativeSampleModule.cpp"
-   #include "NativeSampleModule.h"
-
-   namespace facebook::react {
-
-   NativeSampleModule::NativeSampleModule(std::shared_ptr<CallInvoker> jsInvoker)
-       : NativeSampleModuleCxxSpec(std::move(jsInvoker)) {}
-
-   std::string NativeSampleModule::reverseString(jsi::Runtime& rt, std::string input) {
-     return std::string(input.rbegin(), input.rend());
-   }
-
-   } // namespace facebook::react
-   ```
-
-Let's have a look at the two files we created:
-
-- The `NativeSampleModule.h` file is the header file for a Pure C++ TurboModule. The `include` statements make sure that we include the specs that will be created by Codegen and that contains the interface and the base class we need to implement.
-- The module lives in the `facebook::react` namespace to have access to all the types that live in that namespace.
-- The class `NativeSampleModule` is the actual Turbo Native Module class and it extends the `NativeSampleModuleCxxSpec` class which contains some glue code and boilerplate code to let this class behave as a Turbo Native Module.
-- Finally, we have the constructor, that accepts a pointer to the `CallInvoker`, to communicate with JS if needed and the function's prototype we have to implement.
-
-The `NativeSampleModule.cpp` file is the actual implementation of our Turbo Native Module and implements the constructor and the method that we declared in the specs.
-
-## 4. Register the Module in the platform
-
-The next steps will let us register the module in the platform. This is the step that exposes the native code to JS so that the React Native application can finally call the native methods from the JS layer.
-
-This is the only time when we will have to write some platform-specific code.
-
-### Android
-
-To make sure that the Android app can effectively build the C++ Turbo Native Module, we need to:
-
-1. Create a `CMakeLists.txt` to access our C++ code.
-2. Modify `build.gradle` to point to the newly created `CMakeLists.txt` file.
-3. Create an `OnLoad.cpp` file in our Android app to register the new Turbo Native Module.
-
-#### 1. Create the `CMakeLists.txt` file
-
-Android uses CMake to build. CMake needs to access the files we defined in our shared folder to be able to build them.
-
-1. Create a new folder `SampleApp/android/app/src/main/jni`. The `jni` folder is where the C++ side of Android lives.
-2. Create a `CMakeLists.txt` file and add this context:
-
-```shell title="CMakeLists.txt"
-cmake_minimum_required(VERSION 3.13)
-
-# Define the library name here.
-project(appmodules)
-
-# This file includes all the necessary to let you build your React Native application
-include(${REACT_ANDROID_DIR}/cmake-utils/ReactNative-application.cmake)
-
-# Define where the additional source code lives. We need to crawl back the jni, main, src, app, android folders
-target_sources(${CMAKE_PROJECT_NAME} PRIVATE ../../../../../shared/NativeSampleModule.cpp)
-
-# Define where CMake can find the additional header files. We need to crawl back the jni, main, src, app, android folders
-target_include_directories(${CMAKE_PROJECT_NAME} PUBLIC ../../../../../shared)
-```
-
-The CMake file does the following things:
-
-- Defines the `appmodules` library, where all the app C++ code will be included.
-- Loads the base React Native's CMake file.
-- Adds the Module C++ source code that we need to build with the `target_sources` directives. By default React Native will already populate the `appmodules` library with default sources, here we include our custom one. You can see that we need to crawl back from the `jni` folder to the `shared` folder where our C++ Turbo Module lives.
-- Specifies where CMake can find the module header files. Also in this case we need to crawl back from the `jni` folder.
-
-#### 2. Modify `build.gradle` to include the custom C++ code
-
-Gradle is the tool that orchestrates the Android build. We need to tell it where it can find the `CMake` files to build the Turbo Native Module.
-
-1. Open the `SampleApp/android/app/build.gradle` file.
-2. Add the following block into the Gradle file, within the existing `android` block:
-
-```diff title="android/app/build.gradle"
-    buildTypes {
-        debug {
-            signingConfig signingConfigs.debug
-        }
-        release {
-            // Caution! In production, you need to generate your own keystore file.
-            // see https://reactnative.dev/docs/signed-apk-android.
-            signingConfig signingConfigs.debug
-            minifyEnabled enableProguardInReleaseBuilds
-            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
-        }
-    }
-
-+   externalNativeBuild {
-+       cmake {
-+           path "src/main/jni/CMakeLists.txt"
-+       }
-+   }
-}
-```
-
-This block tells the Gradle file where to look for the CMake file. The path is relative to the folder where the `build.gradle` file lives, so we need to add the path to the `CMakeLists.txt` files in the `jni` folder.
-
-#### 3. Register the new Turbo Native Module
-
-The final step is to register the new C++ Turbo Native Module in the runtime, so that when JS requires the C++ Turbo Native Module, the app knows where to find it and can return it.
-
-1. From the folder `SampleApp/android/app/src/main/jni`, run the following command:
-
-<CodeBlock language="sh" title="shell">
-{`curl -O https://raw.githubusercontent.com/facebook/react-native/${getCoreBranchNameForCurrentVersion()}/packages/react-native/ReactAndroid/cmake-utils/default-app-setup/OnLoad.cpp`}
-</CodeBlock>
-
-2. Then, modify this file as follows:
-
-```diff title="android/app/src/main/jni/OnLoad.cpp"
-#include <DefaultComponentsRegistry.h>
-#include <DefaultTurboModuleManagerDelegate.h>
-#include <autolinking.h>
-#include <fbjni/fbjni.h>
-#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
-#include <rncore.h>
-
-+ // Include the NativeSampleModule header
-+ #include <NativeSampleModule.h>
-
-//...
-
-std::shared_ptr<TurboModule> cxxModuleProvider(
-    const std::string& name,
-    const std::shared_ptr<CallInvoker>& jsInvoker) {
-  // Here you can provide your CXX Turbo Modules coming from
-  // either your application or from external libraries. The approach to follow
-  // is similar to the following (for a module called `NativeCxxModuleExample`):
-  //
-  // if (name == NativeCxxModuleExample::kModuleName) {
-  //   return std::make_shared<NativeCxxModuleExample>(jsInvoker);
-  // }
-
-+  // This code registers the module so that when the JS side asks for it, the app can return it
-+  if (name == NativeSampleModule::kModuleName) {
-+    return std::make_shared<NativeSampleModule>(jsInvoker);
-+  }
-
-  // And we fallback to the CXX module providers autolinked
-  return autolinking_cxxModuleProvider(name, jsInvoker);
-}
-
-// leave the rest of the file
-```
-
-These steps download the original `OnLoad.cpp` file from React Native, so that we can safely override it to load the C++ Turbo Native Module in the app.
-
-Once we downloaded the file, we can modify it by:
-
-- Including the header file that points to our module
-- Registering the Turbo Native Module so that when JS requires it, the app can return it.
-
-Now, you can run `yarn android` from the project root to see your app building successfully.
-
-### iOS
-
-To make sure that the iOS app can effectively build the C++ Turbo Native Module, we need to:
-
-1. Install pods and run Codegen.
-2. Add the `shared` folder to our iOS project.
-3. Register the C++ Turbo Native Module in the application.
-
-#### 1. Install Pods and Run Codegen.
-
-The first step we need to run is the usual steps we run every time we have to prepare our iOS application. CocoaPods is the tool we use to setup and install React Native dependencies and, as part of the process, it will also run Codegen for us.
-
-```bash
-cd ios
-bundle install
-bundle exec pod install
-```
-
-#### 2. Add the shared folder to the iOS project
-
-This step adds the `shared` folder to the project to make it visible to Xcode.
-
-1. Open the CocoaPods generated Xcode Workspace.
-
-```bash
-cd ios
-open SampleApp.xcworkspace
-```
-
-2. Click on the `SampleApp` project on the left and select `Add files to "Sample App"...`.
-
-![Add Files to Sample App...](/docs/assets/AddFilesToXcode1.png)
-
-3. Select the `shared` folder and click on `Add`.
-
-![Add Files to Sample App...](/docs/assets/AddFilesToXcode2.png)
-
-If you did everything right, your project on the left should look like this:
-
-![Xcode Project](/docs/assets/CxxTMGuideXcodeProject.png)
-
-#### 3. Registering the Cxx Turbo Native Module in your app
-
-To register a pure Cxx Turbo Native Module in your app, you need to:
-
-1. Create a `ModuleProvider` for the Native Module
-2. Configure the `package.json` to associate the JS module name with the ModuleProvider class.
-
-The ModuleProvider is an Objective-C++ that glues together the Pure C++ module with the rest of your iOS App.
-
-##### 3.1 Create the ModuleProvider
-
-1. From Xcode, select the `SampleApp` project and press <kbd>⌘</kbd> + <kbd>N</kbd> to create a new file.
-2. Select the `Cocoa Touch Class` template
-3. Add the name `NativeSampleModuleProvider` (keep the other field as `Subclass of: NSObject` and `Language: Objective-C`)
-4. Click Next to generate the files.
-5. Rename the `NativeSampleModuleProvider.m` to `NativeSampleModuleProvider.mm`. The `mm` extension denotes an Objective-C++ file.
-6. Implement the content of the `NativeSampleModuleProvider.h` with the following:
-
-```objc title="NativeSampleModuleProvider.h"
-
-#import <Foundation/Foundation.h>
-#import <ReactCommon/RCTTurboModule.h>
-
-NS_ASSUME_NONNULL_BEGIN
-
-@interface NativeSampleModuleProvider : NSObject <RCTModuleProvider>
-
-@end
-
-NS_ASSUME_NONNULL_END
-```
-
-This declares a `NativeSampleModuleProvider` object that conforms to the `RCTModuleProvider` protocol.
-
-7. Implement the content of the `NativeSampleModuleProvider.mm` with the following:
-
-```objc title="NativeSampleModuleProvider.mm"
-
-#import "NativeSampleModuleProvider.h"
-#import <ReactCommon/CallInvoker.h>
-#import <ReactCommon/TurboModule.h>
-#import "NativeSampleModule.h"
-
-@implementation NativeSampleModuleProvider
-
-- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
-    (const facebook::react::ObjCTurboModule::InitParams &)params
-{
-  return std::make_shared<facebook::react::NativeSampleModule>(params.jsInvoker);
-}
-
-@end
-```
-
-This code implements the `RCTModuleProvider` protocol by creating the pure C++ `NativeSampleModule` when the `getTurboModule:` method is called.
-
-##### 3.2 Update the package.json
-
-The last step consists in updating the `package.json` to tell React Native about the link between the JS specs of the Native Module and the concrete implementation of those spec in native code.
-
-Modify the `package.json` as it follows:
-
-```json title="package.json"
-     "start": "react-native start",
-     "test": "jest"
-   },
-   "codegenConfig": {
-     "name": "AppSpecs",
-     "type": "modules",
-     "jsSrcsDir": "specs",
-     "android": {
-       "javaPackageName": "com.sampleapp.specs"
-     // highlight-add-start
-     },
-     "ios": {
-        "modulesProvider": {
-          "NativeSampleModule":  "NativeSampleModuleProvider"
-        }
-     }
-     // highlight-add-end
-   },
-
-   "dependencies": {
-```
-
-At this point, you need to re-install the pods to make sure that codegen runs again to generate the new files:
-
-```bash
-# from the ios folder
-bundle exec pod install
-open SampleApp.xcworkspace
-```
-
-If you now build your application from Xcode, you should be able to build successfully.
-
-## 5. Testing your Code
-
-It's now time to access our C++ Turbo Native Module from JS. To do so, we have to modify the `App.tsx` file to import the Turbo Native Module and to call it in our code.
-
-1. Open the `App.tsx` file.
-2. Replace the content of the template with the following code:
-
-```tsx title="App.tsx"
-import React from 'react';
-import {
-  Button,
-  SafeAreaView,
-  StyleSheet,
-  Text,
-  TextInput,
-  View,
-} from 'react-native';
-import SampleTurboModule from './specs/NativeSampleModule';
-
-function App(): React.JSX.Element {
-  const [value, setValue] = React.useState('');
-  const [reversedValue, setReversedValue] = React.useState('');
-
-  const onPress = () => {
-    const revString = SampleTurboModule.reverseString(value);
-    setReversedValue(revString);
-  };
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <View>
-        <Text style={styles.title}>
-          Welcome to C++ Turbo Native Module Example
-        </Text>
-        <Text>Write down here the text you want to reverse</Text>
-        <TextInput
-          style={styles.textInput}
-          placeholder="Write your text here"
-          onChangeText={setValue}
-          value={value}
-        />
-        <Button title="Reverse" onPress={onPress} />
-        <Text>Reversed text: {reversedValue}</Text>
-      </View>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  title: {
-    fontSize: 18,
-    marginBottom: 20,
-  },
-  textInput: {
-    borderColor: 'black',
-    borderWidth: 1,
-    borderRadius: 5,
-    padding: 10,
-    marginTop: 10,
-  },
-});
-
-export default App;
-```
-
-The interesting lines in this app are:
-
-- `import SampleTurboModule from './specs/NativeSampleModule';`: this line imports the Turbo Native Module in the app,
-- `const revString = SampleTurboModule.reverseString(value);` in the `onPress` callback: this is how you can use the Turbo Native Module in your app.
-
-:::warning
-For the sake of this example and to keep it as short as possible, we directly imported the spec file in our app.
-The best practice in this case is to create a separate file to wrap the specs and use that file into your application.
-This allows you to prepare the input for the specs and gives you more control over them in JS.
-:::
-
-Congratulations, you wrote your first C++ Turbo Native Module!
-
-| <center>Android</center>                                                                             | <center>iOS</center>                                                                          |
-| ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
-| <center><img src="/docs/assets/CxxGuideAndroidVideo.gif" alt="Android Video" height="600"/></center> | <center><img src="/docs/assets/CxxGuideIOSVideo.gif" alt="iOS video" height="600" /></center> |
+import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameForCurrentVersion';
+import {getCurrentVersion} from '@site/src/getCurrentVersion';
+import CodeBlock from '@theme/CodeBlock';
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+# Cross-Platform Native Modules (C++)
+
+Writing a module in C++ is the best way to share platform-agnostic code between Android and iOS. With pure C++ modules, you can write your logic only once and reuse it right away from all the platforms, without the need of writing platform-specific code.
+
+In this guide, we will go through the creation of a pure C++ Turbo Native Module:
+
+1. Create the JS specs
+2. Configure Codegen to generate the scaffolding
+3. Implement the Native logic
+4. Register the module in the Android and iOS application
+5. Test your changes in JS
+
+The rest of this guide assumes that you have created your application running the command:
+
+<CodeBlock language="bash" title="shell">
+{`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`}
+</CodeBlock>
+
+## 1. Create the JS specs
+
+Pure C++ Turbo Native Modules are Turbo Native Modules. They need a specification file (also called spec file) so that Codegen can create the scaffolding code for us. The specification file is also what we use to access the Turbo Native Module in JS.
+
+Spec files need to be written in a typed JS dialect. React Native currently supports Flow or TypeScript.
+
+1. Inside the root folder of your app, create a new folder called `specs`.
+2. Create a new file called `NativeSampleModule.ts` with the following code:
+
+:::warning
+All Native Turbo Module spec files must have the prefix `Native`, otherwise Codegen will ignore them.
+:::
+
+<Tabs groupId="tnm-specs" queryString defaultValue={constants.defaultJavaScriptSpecLanguages} values={constants.javaScriptSpecLanguages}>
+<TabItem value="flow">
+
+```ts title="specs/NativeSampleModule.ts"
+// @flow
+import type {TurboModule} from 'react-native'
+import { TurboModuleRegistry } from "react-native";
+
+export interface Spec extends TurboModule {
+  +reverseString: (input: string) => string;
+}
+
+export default (TurboModuleRegistry.getEnforcing<Spec>(
+  "NativeSampleModule"
+): Spec);
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```ts title="specs/NativeSampleModule.ts"
+import {TurboModule, TurboModuleRegistry} from 'react-native';
+
+export interface Spec extends TurboModule {
+  readonly reverseString: (input: string) => string;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>(
+  'NativeSampleModule',
+);
+```
+
+</TabItem>
+</Tabs>
+
+## 2. Configure Codegen
+
+The next step is to configure [Codegen](what-is-codegen.mdx) in your `package.json`. Update the file to include:
+
+```json title="package.json"
+     "start": "react-native start",
+     "test": "jest"
+   },
+   // highlight-add-start
+   "codegenConfig": {
+     "name": "AppSpecs",
+     "type": "modules",
+     "jsSrcsDir": "specs",
+     "android": {
+       "javaPackageName": "com.sampleapp.specs"
+     }
+   },
+   // highlight-add-end
+   "dependencies": {
+```
+
+This configuration tells Codegen to look for spec files in the `specs` folder. It also instructs Codegen to only generate code for `modules` and to namespace the generated code as `AppSpecs`.
+
+## 3. Write the Native Code
+
+Writing a C++ Turbo Native Module allows you to share the code between Android and iOS. Therefore we will be writing the code once, and we will look into what changes we need to apply to the platforms so that the C++ code can be picked up.
+
+1. Create a folder named `shared` at the same level as the `android` and `ios` folders.
+2. Inside the `shared` folder, create a new file called `NativeSampleModule.h`.
+
+   ```cpp title="shared/NativeSampleModule.h"
+   #pragma once
+
+   #include <AppSpecsJSI.h>
+
+   #include <memory>
+   #include <string>
+
+   namespace facebook::react {
+
+   class NativeSampleModule : public NativeSampleModuleCxxSpec<NativeSampleModule> {
+   public:
+     NativeSampleModule(std::shared_ptr<CallInvoker> jsInvoker);
+
+     std::string reverseString(jsi::Runtime& rt, std::string input);
+   };
+
+   } // namespace facebook::react
+
+   ```
+
+3. Inside the `shared` folder, create a new file called `NativeSampleModule.cpp`.
+
+   ```cpp title="shared/NativeSampleModule.cpp"
+   #include "NativeSampleModule.h"
+
+   namespace facebook::react {
+
+   NativeSampleModule::NativeSampleModule(std::shared_ptr<CallInvoker> jsInvoker)
+       : NativeSampleModuleCxxSpec(std::move(jsInvoker)) {}
+
+   std::string NativeSampleModule::reverseString(jsi::Runtime& rt, std::string input) {
+     return std::string(input.rbegin(), input.rend());
+   }
+
+   } // namespace facebook::react
+   ```
+
+Let's have a look at the two files we created:
+
+- The `NativeSampleModule.h` file is the header file for a Pure C++ TurboModule. The `include` statements make sure that we include the specs that will be created by Codegen and that contains the interface and the base class we need to implement.
+- The module lives in the `facebook::react` namespace to have access to all the types that live in that namespace.
+- The class `NativeSampleModule` is the actual Turbo Native Module class and it extends the `NativeSampleModuleCxxSpec` class which contains some glue code and boilerplate code to let this class behave as a Turbo Native Module.
+- Finally, we have the constructor, that accepts a pointer to the `CallInvoker`, to communicate with JS if needed and the function's prototype we have to implement.
+
+The `NativeSampleModule.cpp` file is the actual implementation of our Turbo Native Module and implements the constructor and the method that we declared in the specs.
+
+## 4. Register the Module in the platform
+
+The next steps will let us register the module in the platform. This is the step that exposes the native code to JS so that the React Native application can finally call the native methods from the JS layer.
+
+This is the only time when we will have to write some platform-specific code.
+
+### Android
+
+To make sure that the Android app can effectively build the C++ Turbo Native Module, we need to:
+
+1. Create a `CMakeLists.txt` to access our C++ code.
+2. Modify `build.gradle` to point to the newly created `CMakeLists.txt` file.
+3. Create an `OnLoad.cpp` file in our Android app to register the new Turbo Native Module.
+
+#### 1. Create the `CMakeLists.txt` file
+
+Android uses CMake to build. CMake needs to access the files we defined in our shared folder to be able to build them.
+
+1. Create a new folder `SampleApp/android/app/src/main/jni`. The `jni` folder is where the C++ side of Android lives.
+2. Create a `CMakeLists.txt` file and add this context:
+
+```shell title="CMakeLists.txt"
+cmake_minimum_required(VERSION 3.13)
+
+# Define the library name here.
+project(appmodules)
+
+# This file includes all the necessary to let you build your React Native application
+include(${REACT_ANDROID_DIR}/cmake-utils/ReactNative-application.cmake)
+
+# Define where the additional source code lives. We need to crawl back the jni, main, src, app, android folders
+target_sources(${CMAKE_PROJECT_NAME} PRIVATE ../../../../../shared/NativeSampleModule.cpp)
+
+# Define where CMake can find the additional header files. We need to crawl back the jni, main, src, app, android folders
+target_include_directories(${CMAKE_PROJECT_NAME} PUBLIC ../../../../../shared)
+```
+
+The CMake file does the following things:
+
+- Defines the `appmodules` library, where all the app C++ code will be included.
+- Loads the base React Native's CMake file.
+- Adds the Module C++ source code that we need to build with the `target_sources` directives. By default React Native will already populate the `appmodules` library with default sources, here we include our custom one. You can see that we need to crawl back from the `jni` folder to the `shared` folder where our C++ Turbo Module lives.
+- Specifies where CMake can find the module header files. Also in this case we need to crawl back from the `jni` folder.
+
+#### 2. Modify `build.gradle` to include the custom C++ code
+
+Gradle is the tool that orchestrates the Android build. We need to tell it where it can find the `CMake` files to build the Turbo Native Module.
+
+1. Open the `SampleApp/android/app/build.gradle` file.
+2. Add the following block into the Gradle file, within the existing `android` block:
+
+```diff title="android/app/build.gradle"
+    buildTypes {
+        debug {
+            signingConfig signingConfigs.debug
+        }
+        release {
+            // Caution! In production, you need to generate your own keystore file.
+            // see https://reactnative.dev/docs/signed-apk-android.
+            signingConfig signingConfigs.debug
+            minifyEnabled enableProguardInReleaseBuilds
+            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+        }
+    }
+
++   externalNativeBuild {
++       cmake {
++           path "src/main/jni/CMakeLists.txt"
++       }
++   }
+}
+```
+
+This block tells the Gradle file where to look for the CMake file. The path is relative to the folder where the `build.gradle` file lives, so we need to add the path to the `CMakeLists.txt` files in the `jni` folder.
+
+#### 3. Register the new Turbo Native Module
+
+The final step is to register the new C++ Turbo Native Module in the runtime, so that when JS requires the C++ Turbo Native Module, the app knows where to find it and can return it.
+
+1. From the folder `SampleApp/android/app/src/main/jni`, run the following command:
+
+<CodeBlock language="sh" title="shell">
+{`curl -O https://raw.githubusercontent.com/facebook/react-native/${getCoreBranchNameForCurrentVersion()}/packages/react-native/ReactAndroid/cmake-utils/default-app-setup/OnLoad.cpp`}
+</CodeBlock>
+
+2. Then, modify this file as follows:
+
+```diff title="android/app/src/main/jni/OnLoad.cpp"
+#include <DefaultComponentsRegistry.h>
+#include <DefaultTurboModuleManagerDelegate.h>
+#include <autolinking.h>
+#include <fbjni/fbjni.h>
+#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
+#include <rncore.h>
+
++ // Include the NativeSampleModule header
++ #include <NativeSampleModule.h>
+
+//...
+
+std::shared_ptr<TurboModule> cxxModuleProvider(
+    const std::string& name,
+    const std::shared_ptr<CallInvoker>& jsInvoker) {
+  // Here you can provide your CXX Turbo Modules coming from
+  // either your application or from external libraries. The approach to follow
+  // is similar to the following (for a module called `NativeCxxModuleExample`):
+  //
+  // if (name == NativeCxxModuleExample::kModuleName) {
+  //   return std::make_shared<NativeCxxModuleExample>(jsInvoker);
+  // }
+
++  // This code registers the module so that when the JS side asks for it, the app can return it
++  if (name == NativeSampleModule::kModuleName) {
++    return std::make_shared<NativeSampleModule>(jsInvoker);
++  }
+
+  // And we fallback to the CXX module providers autolinked
+  return autolinking_cxxModuleProvider(name, jsInvoker);
+}
+
+// leave the rest of the file
+```
+
+These steps download the original `OnLoad.cpp` file from React Native, so that we can safely override it to load the C++ Turbo Native Module in the app.
+
+Once we downloaded the file, we can modify it by:
+
+- Including the header file that points to our module
+- Registering the Turbo Native Module so that when JS requires it, the app can return it.
+
+Now, you can run `yarn android` from the project root to see your app building successfully.
+
+### iOS
+
+To make sure that the iOS app can effectively build the C++ Turbo Native Module, we need to:
+
+1. Install pods and run Codegen.
+2. Add the `shared` folder to our iOS project.
+3. Register the C++ Turbo Native Module in the application.
+
+#### 1. Install Pods and Run Codegen.
+
+The first step we need to run is the usual steps we run every time we have to prepare our iOS application. CocoaPods is the tool we use to setup and install React Native dependencies and, as part of the process, it will also run Codegen for us.
+
+```bash
+cd ios
+bundle install
+bundle exec pod install
+```
+
+#### 2. Add the shared folder to the iOS project
+
+This step adds the `shared` folder to the project to make it visible to Xcode.
+
+1. Open the CocoaPods generated Xcode Workspace.
+
+```bash
+cd ios
+open SampleApp.xcworkspace
+```
+
+2. Click on the `SampleApp` project on the left and select `Add files to "Sample App"...`.
+
+![Add Files to Sample App...](/docs/assets/AddFilesToXcode1.png)
+
+3. Select the `shared` folder and click on `Add`.
+
+![Add Files to Sample App...](/docs/assets/AddFilesToXcode2.png)
+
+If you did everything right, your project on the left should look like this:
+
+![Xcode Project](/docs/assets/CxxTMGuideXcodeProject.png)
+
+#### 3. Registering the Cxx Turbo Native Module in your app
+
+To register a pure Cxx Turbo Native Module in your app, you need to:
+
+1. Create a `ModuleProvider` for the Native Module
+2. Configure the `package.json` to associate the JS module name with the ModuleProvider class.
+
+The ModuleProvider is an Objective-C++ that glues together the Pure C++ module with the rest of your iOS App.
+
+##### 3.1 Create the ModuleProvider
+
+1. From Xcode, select the `SampleApp` project and press <kbd>⌘</kbd> + <kbd>N</kbd> to create a new file.
+2. Select the `Cocoa Touch Class` template
+3. Add the name `NativeSampleModuleProvider` (keep the other field as `Subclass of: NSObject` and `Language: Objective-C`)
+4. Click Next to generate the files.
+5. Rename the `NativeSampleModuleProvider.m` to `NativeSampleModuleProvider.mm`. The `mm` extension denotes an Objective-C++ file.
+6. Implement the content of the `NativeSampleModuleProvider.h` with the following:
+
+```objc title="NativeSampleModuleProvider.h"
+
+#import <Foundation/Foundation.h>
+#import <ReactCommon/RCTTurboModule.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface NativeSampleModuleProvider : NSObject <RCTModuleProvider>
+
+@end
+
+NS_ASSUME_NONNULL_END
+```
+
+This declares a `NativeSampleModuleProvider` object that conforms to the `RCTModuleProvider` protocol.
+
+7. Implement the content of the `NativeSampleModuleProvider.mm` with the following:
+
+```objc title="NativeSampleModuleProvider.mm"
+
+#import "NativeSampleModuleProvider.h"
+#import <ReactCommon/CallInvoker.h>
+#import <ReactCommon/TurboModule.h>
+#import "NativeSampleModule.h"
+
+@implementation NativeSampleModuleProvider
+
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
+    (const facebook::react::ObjCTurboModule::InitParams &)params
+{
+  return std::make_shared<facebook::react::NativeSampleModule>(params.jsInvoker);
+}
+
+@end
+```
+
+This code implements the `RCTModuleProvider` protocol by creating the pure C++ `NativeSampleModule` when the `getTurboModule:` method is called.
+
+##### 3.2 Update the package.json
+
+The last step consists in updating the `package.json` to tell React Native about the link between the JS specs of the Native Module and the concrete implementation of those spec in native code.
+
+Modify the `package.json` as it follows:
+
+```json title="package.json"
+     "start": "react-native start",
+     "test": "jest"
+   },
+   "codegenConfig": {
+     "name": "AppSpecs",
+     "type": "modules",
+     "jsSrcsDir": "specs",
+     "android": {
+       "javaPackageName": "com.sampleapp.specs"
+     // highlight-add-start
+     },
+     "ios": {
+        "modulesProvider": {
+          "NativeSampleModule":  "NativeSampleModuleProvider"
+        }
+     }
+     // highlight-add-end
+   },
+
+   "dependencies": {
+```
+
+At this point, you need to re-install the pods to make sure that codegen runs again to generate the new files:
+
+```bash
+# from the ios folder
+bundle exec pod install
+open SampleApp.xcworkspace
+```
+
+If you now build your application from Xcode, you should be able to build successfully.
+
+## 5. Testing your Code
+
+It's now time to access our C++ Turbo Native Module from JS. To do so, we have to modify the `App.tsx` file to import the Turbo Native Module and to call it in our code.
+
+1. Open the `App.tsx` file.
+2. Replace the content of the template with the following code:
+
+```tsx title="App.tsx"
+import {type JSX, useState} from 'react';
+import {
+  Button,
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+import SampleTurboModule from './specs/NativeSampleModule';
+
+function App(): JSX.Element {
+  const [value, setValue] = useState('');
+  const [reversedValue, setReversedValue] = useState('');
+
+  const onPress = () => {
+    const revString = SampleTurboModule.reverseString(value);
+    setReversedValue(revString);
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View>
+        <Text style={styles.title}>
+          Welcome to C++ Turbo Native Module Example
+        </Text>
+        <Text>Write down here the text you want to reverse</Text>
+        <TextInput
+          style={styles.textInput}
+          placeholder="Write your text here"
+          onChangeText={setValue}
+          value={value}
+        />
+        <Button title="Reverse" onPress={onPress} />
+        <Text>Reversed text: {reversedValue}</Text>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 18,
+    marginBottom: 20,
+  },
+  textInput: {
+    borderColor: 'black',
+    borderWidth: 1,
+    borderRadius: 5,
+    padding: 10,
+    marginTop: 10,
+  },
+});
+
+export default App;
+```
+
+The interesting lines in this app are:
+
+- `import SampleTurboModule from './specs/NativeSampleModule';`: this line imports the Turbo Native Module in the app,
+- `const revString = SampleTurboModule.reverseString(value);` in the `onPress` callback: this is how you can use the Turbo Native Module in your app.
+
+:::warning
+For the sake of this example and to keep it as short as possible, we directly imported the spec file in our app.
+The best practice in this case is to create a separate file to wrap the specs and use that file into your application.
+This allows you to prepare the input for the specs and gives you more control over them in JS.
+:::
+
+Congratulations, you wrote your first C++ Turbo Native Module!
+
+| <center>Android</center>                                                                             | <center>iOS</center>                                                                          |
+| ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
+| <center><img src="/docs/assets/CxxGuideAndroidVideo.gif" alt="Android Video" height="600"/></center> | <center><img src="/docs/assets/CxxGuideIOSVideo.gif" alt="iOS video" height="600" /></center> |
diff --git a/website/versioned_docs/version-0.82/toastandroid.md b/website/versioned_docs/version-0.82/toastandroid.md
index 0d7a569235d..07f2b7b20cd 100644
--- a/website/versioned_docs/version-0.82/toastandroid.md
+++ b/website/versioned_docs/version-0.82/toastandroid.md
@@ -17,7 +17,6 @@ Starting with Android 11 (API level 30), setting the gravity has no effect on te
 :::
 
 ```SnackPlayer name=Toast%20Android%20API%20Example&supportedPlatforms=android
-import React from 'react';
 import {StyleSheet, ToastAndroid, Button, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.82/touchablehighlight.md b/website/versioned_docs/version-0.82/touchablehighlight.md
index 98ea0823783..bb0a5d234c1 100644
--- a/website/versioned_docs/version-0.82/touchablehighlight.md
+++ b/website/versioned_docs/version-0.82/touchablehighlight.md
@@ -1,215 +1,215 @@
----
-id: touchablehighlight
-title: TouchableHighlight
----
-
-:::tip
-If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
-:::
-
-A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view.
-
-The underlay comes from wrapping the child in a new View, which can affect layout, and sometimes cause unwanted visual artifacts if not used correctly, for example if the backgroundColor of the wrapped view isn't explicitly set to an opaque color.
-
-TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View.
-
-```tsx
-function MyComponent(props: MyComponentProps) {
-  return (
-    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
-      <Text>My Component</Text>
-    </View>
-  );
-}
-
-<TouchableHighlight
-  activeOpacity={0.6}
-  underlayColor="#DDDDDD"
-  onPress={() => alert('Pressed!')}>
-  <MyComponent />
-</TouchableHighlight>;
-```
-
-## Example
-
-```SnackPlayer name=TouchableHighlight%20Example
-import React, {useState} from 'react';
-import {StyleSheet, Text, TouchableHighlight, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const TouchableHighlightExample = () => {
-  const [count, setCount] = useState(0);
-  const onPress = () => setCount(count + 1);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <TouchableHighlight onPress={onPress}>
-          <View style={styles.button}>
-            <Text>Touch Here</Text>
-          </View>
-        </TouchableHighlight>
-        <View style={styles.countContainer}>
-          <Text style={styles.countText}>{count || null}</Text>
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: 10,
-  },
-  button: {
-    alignItems: 'center',
-    backgroundColor: '#DDDDDD',
-    padding: 10,
-  },
-  countContainer: {
-    alignItems: 'center',
-    padding: 10,
-  },
-  countText: {
-    color: '#FF00FF',
-  },
-});
-
-export default TouchableHighlightExample;
-```
-
----
-
-# Reference
-
-## Props
-
-### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
-
-Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
-
----
-
-### `activeOpacity`
-
-Determines what the opacity of the wrapped view should be when touch is active. The value should be between 0 and 1. Defaults to 0.85. Requires `underlayColor` to be set.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `onHideUnderlay`
-
-Called immediately after the underlay is hidden.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onShowUnderlay`
-
-Called immediately after the underlay is shown.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `ref`
-
-A ref setter that will be assigned an [element node](element-nodes) when mounted.
-
----
-
-### `style`
-
-| Type       |
-| ---------- |
-| View.style |
-
----
-
-### `underlayColor`
-
-The color of the underlay that will show through when the touch is active.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `hasTVPreferredFocus` <div className="label ios">iOS</div>
-
-_(Apple TV only)_ TV preferred focus (see documentation for the View component).
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `nextFocusDown` <div className="label android">Android</div>
-
-TV next focus down (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusForward` <div className="label android">Android</div>
-
-TV next focus forward (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusLeft` <div className="label android">Android</div>
-
-TV next focus left (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusRight` <div className="label android">Android</div>
-
-TV next focus right (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusUp` <div className="label android">Android</div>
-
-TV next focus up (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `testOnly_pressed`
-
-Handy for snapshot tests.
-
-| Type |
-| ---- |
-| bool |
+---
+id: touchablehighlight
+title: TouchableHighlight
+---
+
+:::tip
+If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
+:::
+
+A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view.
+
+The underlay comes from wrapping the child in a new View, which can affect layout, and sometimes cause unwanted visual artifacts if not used correctly, for example if the backgroundColor of the wrapped view isn't explicitly set to an opaque color.
+
+TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View.
+
+```tsx
+function MyComponent(props: MyComponentProps) {
+  return (
+    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
+      <Text>My Component</Text>
+    </View>
+  );
+}
+
+<TouchableHighlight
+  activeOpacity={0.6}
+  underlayColor="#DDDDDD"
+  onPress={() => alert('Pressed!')}>
+  <MyComponent />
+</TouchableHighlight>;
+```
+
+## Example
+
+```SnackPlayer name=TouchableHighlight%20Example
+import {useState} from 'react';
+import {StyleSheet, Text, TouchableHighlight, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const TouchableHighlightExample = () => {
+  const [count, setCount] = useState(0);
+  const onPress = () => setCount(count + 1);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <TouchableHighlight onPress={onPress}>
+          <View style={styles.button}>
+            <Text>Touch Here</Text>
+          </View>
+        </TouchableHighlight>
+        <View style={styles.countContainer}>
+          <Text style={styles.countText}>{count || null}</Text>
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#DDDDDD',
+    padding: 10,
+  },
+  countContainer: {
+    alignItems: 'center',
+    padding: 10,
+  },
+  countText: {
+    color: '#FF00FF',
+  },
+});
+
+export default TouchableHighlightExample;
+```
+
+---
+
+# Reference
+
+## Props
+
+### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
+
+Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
+
+---
+
+### `activeOpacity`
+
+Determines what the opacity of the wrapped view should be when touch is active. The value should be between 0 and 1. Defaults to 0.85. Requires `underlayColor` to be set.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `onHideUnderlay`
+
+Called immediately after the underlay is hidden.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onShowUnderlay`
+
+Called immediately after the underlay is shown.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `ref`
+
+A ref setter that will be assigned an [element node](element-nodes) when mounted.
+
+---
+
+### `style`
+
+| Type       |
+| ---------- |
+| View.style |
+
+---
+
+### `underlayColor`
+
+The color of the underlay that will show through when the touch is active.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `hasTVPreferredFocus` <div className="label ios">iOS</div>
+
+_(Apple TV only)_ TV preferred focus (see documentation for the View component).
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `nextFocusDown` <div className="label android">Android</div>
+
+TV next focus down (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusForward` <div className="label android">Android</div>
+
+TV next focus forward (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusLeft` <div className="label android">Android</div>
+
+TV next focus left (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusRight` <div className="label android">Android</div>
+
+TV next focus right (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusUp` <div className="label android">Android</div>
+
+TV next focus up (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `testOnly_pressed`
+
+Handy for snapshot tests.
+
+| Type |
+| ---- |
+| bool |
diff --git a/website/versioned_docs/version-0.82/touchablenativefeedback.md b/website/versioned_docs/version-0.82/touchablenativefeedback.md
index a7465b9f2ed..eb0a67aa03c 100644
--- a/website/versioned_docs/version-0.82/touchablenativefeedback.md
+++ b/website/versioned_docs/version-0.82/touchablenativefeedback.md
@@ -1,219 +1,219 @@
----
-id: touchablenativefeedback
-title: TouchableNativeFeedback
----
-
-:::tip
-If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
-:::
-
-A wrapper for making views respond properly to touches (Android only). On Android this component uses native state drawable to display touch feedback.
-
-At the moment it only supports having a single View instance as a child node, as it's implemented by replacing that View with another instance of RCTView node with some additional properties set.
-
-Background drawable of native feedback touchable can be customized with `background` property.
-
-## Example
-
-```SnackPlayer name=TouchableNativeFeedback%20Android%20Component%20Example&supportedPlatforms=android
-import React, {useState} from 'react';
-import {Text, View, StyleSheet, TouchableNativeFeedback} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [rippleColor, setRippleColor] = useState(randomHexColor());
-  const [rippleOverflow, setRippleOverflow] = useState(false);
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <TouchableNativeFeedback
-          onPress={() => {
-            setRippleColor(randomHexColor());
-            setRippleOverflow(!rippleOverflow);
-          }}
-          background={TouchableNativeFeedback.Ripple(
-            rippleColor,
-            rippleOverflow,
-          )}>
-          <View style={styles.touchable}>
-            <Text style={styles.text}>TouchableNativeFeedback</Text>
-          </View>
-        </TouchableNativeFeedback>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const randomHexColor = () => {
-  return '#000000'.replace(/0/g, function () {
-    return Math.round(Math.random() * 16).toString(16);
-  });
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    backgroundColor: 'black',
-    paddingHorizontal: 20,
-  },
-  touchable: {
-    flex: 0.33,
-    justifyContent: 'center',
-    backgroundColor: '#eeeeee',
-    borderColor: 'black',
-    borderWidth: 1,
-  },
-  text: {
-    alignSelf: 'center',
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Props
-
-### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
-
-Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
-
----
-
-### `background`
-
-Determines the type of background drawable that's going to be used to display feedback. It takes an object with `type` property and extra data depending on the `type`. It's recommended to use one of the static methods to generate that dictionary.
-
-| Type               |
-| ------------------ |
-| backgroundPropType |
-
----
-
-### `useForeground`
-
-Set to true to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them.
-
-Check TouchableNativeFeedback.canUseNativeForeground() first, as this is only available on Android 6.0 and above. If you try to use this on older versions you will get a warning and fallback to background.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `hasTVPreferredFocus` <div className="label android">Android</div>
-
-TV preferred focus (see documentation for the View component).
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `nextFocusDown` <div className="label android">Android</div>
-
-TV next focus down (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusForward` <div className="label android">Android</div>
-
-TV next focus forward (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusLeft` <div className="label android">Android</div>
-
-TV next focus left (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusRight` <div className="label android">Android</div>
-
-TV next focus right (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusUp` <div className="label android">Android</div>
-
-TV next focus up (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
-## Methods
-
-### `SelectableBackground()`
-
-```tsx
-static SelectableBackground(
-  rippleRadius: number | null,
-): ThemeAttributeBackgroundPropType;
-```
-
-Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.
-
----
-
-### `SelectableBackgroundBorderless()`
-
-```tsx
-static SelectableBackgroundBorderless(
-  rippleRadius: number | null,
-): ThemeAttributeBackgroundPropType;
-```
-
-Creates an object that represent android theme's default background for borderless selectable elements (`?android:attr/selectableItemBackgroundBorderless`). Available on android API level 21+. `rippleRadius` parameter controls the radius of the ripple effect.
-
----
-
-### `Ripple()`
-
-```tsx
-static Ripple(
-  color: ColorValue,
-  borderless: boolean,
-  rippleRadius?: number | null,
-): RippleBackgroundPropType;
-```
-
-Creates an object that represents ripple drawable with specified color (as a string). If property `borderless` evaluates to true the ripple will render outside of the view bounds (see native actionbar buttons as an example of that behavior). This background type is available on Android API level 21+.
-
-**Parameters:**
-
-| Name         | Type    | Required | Description                                 |
-| ------------ | ------- | -------- | ------------------------------------------- |
-| color        | string  | Yes      | The ripple color                            |
-| borderless   | boolean | Yes      | If the ripple can render outside its bounds |
-| rippleRadius | ?number | No       | controls the radius of the ripple effect    |
-
----
-
-### `canUseNativeForeground()`
-
-```tsx
-static canUseNativeForeground(): boolean;
-```
+---
+id: touchablenativefeedback
+title: TouchableNativeFeedback
+---
+
+:::tip
+If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
+:::
+
+A wrapper for making views respond properly to touches (Android only). On Android this component uses native state drawable to display touch feedback.
+
+At the moment it only supports having a single View instance as a child node, as it's implemented by replacing that View with another instance of RCTView node with some additional properties set.
+
+Background drawable of native feedback touchable can be customized with `background` property.
+
+## Example
+
+```SnackPlayer name=TouchableNativeFeedback%20Android%20Component%20Example&supportedPlatforms=android
+import {useState} from 'react';
+import {Text, View, StyleSheet, TouchableNativeFeedback} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [rippleColor, setRippleColor] = useState(randomHexColor());
+  const [rippleOverflow, setRippleOverflow] = useState(false);
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <TouchableNativeFeedback
+          onPress={() => {
+            setRippleColor(randomHexColor());
+            setRippleOverflow(!rippleOverflow);
+          }}
+          background={TouchableNativeFeedback.Ripple(
+            rippleColor,
+            rippleOverflow,
+          )}>
+          <View style={styles.touchable}>
+            <Text style={styles.text}>TouchableNativeFeedback</Text>
+          </View>
+        </TouchableNativeFeedback>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const randomHexColor = () => {
+  return '#000000'.replace(/0/g, function () {
+    return Math.round(Math.random() * 16).toString(16);
+  });
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: 'black',
+    paddingHorizontal: 20,
+  },
+  touchable: {
+    flex: 0.33,
+    justifyContent: 'center',
+    backgroundColor: '#eeeeee',
+    borderColor: 'black',
+    borderWidth: 1,
+  },
+  text: {
+    alignSelf: 'center',
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Props
+
+### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
+
+Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
+
+---
+
+### `background`
+
+Determines the type of background drawable that's going to be used to display feedback. It takes an object with `type` property and extra data depending on the `type`. It's recommended to use one of the static methods to generate that dictionary.
+
+| Type               |
+| ------------------ |
+| backgroundPropType |
+
+---
+
+### `useForeground`
+
+Set to true to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them.
+
+Check TouchableNativeFeedback.canUseNativeForeground() first, as this is only available on Android 6.0 and above. If you try to use this on older versions you will get a warning and fallback to background.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `hasTVPreferredFocus` <div className="label android">Android</div>
+
+TV preferred focus (see documentation for the View component).
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `nextFocusDown` <div className="label android">Android</div>
+
+TV next focus down (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusForward` <div className="label android">Android</div>
+
+TV next focus forward (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusLeft` <div className="label android">Android</div>
+
+TV next focus left (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusRight` <div className="label android">Android</div>
+
+TV next focus right (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusUp` <div className="label android">Android</div>
+
+TV next focus up (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+## Methods
+
+### `SelectableBackground()`
+
+```tsx
+static SelectableBackground(
+  rippleRadius: number | null,
+): ThemeAttributeBackgroundPropType;
+```
+
+Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.
+
+---
+
+### `SelectableBackgroundBorderless()`
+
+```tsx
+static SelectableBackgroundBorderless(
+  rippleRadius: number | null,
+): ThemeAttributeBackgroundPropType;
+```
+
+Creates an object that represent android theme's default background for borderless selectable elements (`?android:attr/selectableItemBackgroundBorderless`). Available on android API level 21+. `rippleRadius` parameter controls the radius of the ripple effect.
+
+---
+
+### `Ripple()`
+
+```tsx
+static Ripple(
+  color: ColorValue,
+  borderless: boolean,
+  rippleRadius?: number | null,
+): RippleBackgroundPropType;
+```
+
+Creates an object that represents ripple drawable with specified color (as a string). If property `borderless` evaluates to true the ripple will render outside of the view bounds (see native actionbar buttons as an example of that behavior). This background type is available on Android API level 21+.
+
+**Parameters:**
+
+| Name         | Type    | Required | Description                                 |
+| ------------ | ------- | -------- | ------------------------------------------- |
+| color        | string  | Yes      | The ripple color                            |
+| borderless   | boolean | Yes      | If the ripple can render outside its bounds |
+| rippleRadius | ?number | No       | controls the radius of the ripple effect    |
+
+---
+
+### `canUseNativeForeground()`
+
+```tsx
+static canUseNativeForeground(): boolean;
+```
diff --git a/website/versioned_docs/version-0.82/touchableopacity.md b/website/versioned_docs/version-0.82/touchableopacity.md
index 72af0bc5f49..0764f4787fa 100644
--- a/website/versioned_docs/version-0.82/touchableopacity.md
+++ b/website/versioned_docs/version-0.82/touchableopacity.md
@@ -1,151 +1,151 @@
----
-id: touchableopacity
-title: TouchableOpacity
----
-
-:::tip
-If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
-:::
-
-A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it.
-
-Opacity is controlled by wrapping the children in an `Animated.View`, which is added to the view hierarchy. Be aware that this can affect layout.
-
-## Example
-
-```SnackPlayer name=TouchableOpacity%20Example
-import React, {useState} from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [count, setCount] = useState(0);
-  const onPress = () => setCount(prevCount => prevCount + 1);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.countContainer}>
-          <Text>Count: {count}</Text>
-        </View>
-        <TouchableOpacity style={styles.button} onPress={onPress}>
-          <Text>Press Here</Text>
-        </TouchableOpacity>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: 10,
-  },
-  button: {
-    alignItems: 'center',
-    backgroundColor: '#DDDDDD',
-    padding: 10,
-  },
-  countContainer: {
-    alignItems: 'center',
-    padding: 10,
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Props
-
-### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
-
-Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
-
----
-
-### `style`
-
-| Type                           |
-| ------------------------------ |
-| [View.style](view-style-props) |
-
----
-
-### `activeOpacity`
-
-Determines what the opacity of the wrapped view should be when touch is active. Defaults to `0.2`.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `hasTVPreferredFocus` <div className="label ios">iOS</div>
-
-_(Apple TV only)_ TV preferred focus (see documentation for the View component).
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `nextFocusDown` <div className="label android">Android</div>
-
-TV next focus down (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusForward` <div className="label android">Android</div>
-
-TV next focus forward (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusLeft` <div className="label android">Android</div>
-
-TV next focus left (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusRight` <div className="label android">Android</div>
-
-TV next focus right (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusUp` <div className="label android">Android</div>
-
-TV next focus up (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `ref`
-
-A ref setter that will be assigned an [element node](element-nodes) when mounted.
+---
+id: touchableopacity
+title: TouchableOpacity
+---
+
+:::tip
+If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
+:::
+
+A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it.
+
+Opacity is controlled by wrapping the children in an `Animated.View`, which is added to the view hierarchy. Be aware that this can affect layout.
+
+## Example
+
+```SnackPlayer name=TouchableOpacity%20Example
+import {useState} from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [count, setCount] = useState(0);
+  const onPress = () => setCount(prevCount => prevCount + 1);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.countContainer}>
+          <Text>Count: {count}</Text>
+        </View>
+        <TouchableOpacity style={styles.button} onPress={onPress}>
+          <Text>Press Here</Text>
+        </TouchableOpacity>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#DDDDDD',
+    padding: 10,
+  },
+  countContainer: {
+    alignItems: 'center',
+    padding: 10,
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Props
+
+### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
+
+Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
+
+---
+
+### `style`
+
+| Type                           |
+| ------------------------------ |
+| [View.style](view-style-props) |
+
+---
+
+### `activeOpacity`
+
+Determines what the opacity of the wrapped view should be when touch is active. Defaults to `0.2`.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `hasTVPreferredFocus` <div className="label ios">iOS</div>
+
+_(Apple TV only)_ TV preferred focus (see documentation for the View component).
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `nextFocusDown` <div className="label android">Android</div>
+
+TV next focus down (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusForward` <div className="label android">Android</div>
+
+TV next focus forward (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusLeft` <div className="label android">Android</div>
+
+TV next focus left (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusRight` <div className="label android">Android</div>
+
+TV next focus right (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusUp` <div className="label android">Android</div>
+
+TV next focus up (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `ref`
+
+A ref setter that will be assigned an [element node](element-nodes) when mounted.
diff --git a/website/versioned_docs/version-0.82/touchablewithoutfeedback.md b/website/versioned_docs/version-0.82/touchablewithoutfeedback.md
index c7e875156df..fb0978b1ad1 100644
--- a/website/versioned_docs/version-0.82/touchablewithoutfeedback.md
+++ b/website/versioned_docs/version-0.82/touchablewithoutfeedback.md
@@ -1,531 +1,531 @@
----
-id: touchablewithoutfeedback
-title: TouchableWithoutFeedback
----
-
-:::tip
-If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
-:::
-
-Do not use unless you have a very good reason. All elements that respond to press should have a visual feedback when touched.
-
-`TouchableWithoutFeedback` supports only one child. If you wish to have several child components, wrap them in a View. Importantly, `TouchableWithoutFeedback` works by cloning its child and applying responder props to it. It is therefore required that any intermediary components pass through those props to the underlying React Native component.
-
-## Usage Pattern
-
-```tsx
-function MyComponent(props: MyComponentProps) {
-  return (
-    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
-      <Text>My Component</Text>
-    </View>
-  );
-}
-
-<TouchableWithoutFeedback onPress={() => alert('Pressed!')}>
-  <MyComponent />
-</TouchableWithoutFeedback>;
-```
-
-## Example
-
-```SnackPlayer name=TouchableWithoutFeedback
-import React, {useState} from 'react';
-import {StyleSheet, TouchableWithoutFeedback, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const TouchableWithoutFeedbackExample = () => {
-  const [count, setCount] = useState(0);
-
-  const onPress = () => {
-    setCount(count + 1);
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.countContainer}>
-          <Text style={styles.countText}>Count: {count}</Text>
-        </View>
-        <TouchableWithoutFeedback onPress={onPress}>
-          <View style={styles.button}>
-            <Text>Touch Here</Text>
-          </View>
-        </TouchableWithoutFeedback>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: 10,
-  },
-  button: {
-    alignItems: 'center',
-    backgroundColor: '#DDDDDD',
-    padding: 10,
-  },
-  countContainer: {
-    alignItems: 'center',
-    padding: 10,
-  },
-  countText: {
-    color: '#FF00FF',
-  },
-});
-
-export default TouchableWithoutFeedbackExample;
-```
-
----
-
-# Reference
-
-## Props
-
-### `accessibilityIgnoresInvertColors` <div className="label ios">iOS</div>
-
-A value indicating this view should or should not be inverted when color inversion is turned on. A value of `true` will tell the view to not be inverted even if color inversion is turned on.
-
-See the [Accessibility guide](accessibility.md#accessibilityignoresinvertcolors) for more information.
-
-| Type    |
-| ------- |
-| Boolean |
-
----
-
-### `accessible`
-
-When `true`, indicates that the view is an accessibility element. By default, all the touchable elements are accessible.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `accessibilityLabel`
-
-Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the `Text` nodes separated by space.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityLanguage` <div className="label ios">iOS</div>
-
-A value indicating which language should be used by the screen reader when the user interacts with the element. It should follow the [BCP 47 specification](https://www.rfc-editor.org/info/bcp47).
-
-See the [iOS `accessibilityLanguage` doc](https://developer.apple.com/documentation/objectivec/nsobject/1615192-accessibilitylanguage) for more information.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityHint`
-
-An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityRole`
-
-`accessibilityRole` communicates the purpose of a component to the user of an assistive technology.
-
-`accessibilityRole` can be one of the following:
-
-- `'none'` - Used when the element has no role.
-- `'button'` - Used when the element should be treated as a button.
-- `'link'` - Used when the element should be treated as a link.
-- `'search'` - Used when the text field element should also be treated as a search field.
-- `'image'` - Used when the element should be treated as an image. Can be combined with button or link, for example.
-- `'keyboardkey'` - Used when the element acts as a keyboard key.
-- `'text'` - Used when the element should be treated as static text that cannot change.
-- `'adjustable'` - Used when an element can be "adjusted" (e.g. a slider).
-- `'imagebutton'` - Used when the element should be treated as a button and is also an image.
-- `'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.
-- `'alert'` - Used when an element contains important text to be presented to the user.
-- `'checkbox'` - Used when an element represents a checkbox which can be checked, unchecked, or have mixed checked state.
-- `'combobox'` - Used when an element represents a combo box, which allows the user to select among several choices.
-- `'menu'` - Used when the component is a menu of choices.
-- `'menubar'` - Used when a component is a container of multiple menus.
-- `'menuitem'` - Used to represent an item within a menu.
-- `'progressbar'` - Used to represent a component which indicates progress of a task.
-- `'radio'` - Used to represent a radio button.
-- `'radiogroup'` - Used to represent a group of radio buttons.
-- `'scrollbar'` - Used to represent a scroll bar.
-- `'spinbutton'` - Used to represent a button which opens a list of choices.
-- `'switch'` - Used to represent a switch which can be turned on and off.
-- `'tab'` - Used to represent a tab.
-- `'tablist'` - Used to represent a list of tabs.
-- `'timer'` - Used to represent a timer.
-- `'toolbar'` - Used to represent a tool bar (a container of action buttons or components).
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityState`
-
-Describes the current state of a component to the user of an assistive technology.
-
-See the [Accessibility guide](accessibility.md#accessibilitystate-ios-android) for more information.
-
-| Type                                                                                             |
-| ------------------------------------------------------------------------------------------------ |
-| object: `{disabled: bool, selected: bool, checked: bool or 'mixed', busy: bool, expanded: bool}` |
-
----
-
-### `accessibilityActions`
-
-Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The `accessibilityActions` property should contain a list of action objects. Each action object should contain the field name and label.
-
-See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
-
-| Type  |
-| ----- |
-| array |
-
----
-
-### `aria-busy`
-
-Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-checked`
-
-Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
-| Type             | Default |
-| ---------------- | ------- |
-| boolean, 'mixed' | false   |
-
----
-
-### `aria-disabled`
-
-Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-expanded`
-
-Indicates whether an expandable element is currently expanded or collapsed.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-hidden`
-
-Indicates whether the element is hidden from assistive technologies.
-
-For example, in a window that contains sibling views `A` and `B`, setting `aria-hidden` to `true` on view `B` causes VoiceOver to ignore the `B` element and its children.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-label`
-
-Defines a string value that labels an interactive element.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `aria-live` <div className="label android">Android</div>
-
-Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
-
-- **off** Accessibility services should not announce changes to this view.
-- **polite** Accessibility services should announce changes to this view.
-- **assertive** Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
-
-| Type                                     | Default |
-| ---------------------------------------- | ------- |
-| enum(`'assertive'`, `'off'`, `'polite'`) | `'off'` |
-
----
-
-### `aria-modal` <div className="label ios">iOS</div>
-
-Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. Has precedence over the [`accessibilityViewIsModal`](#accessibilityviewismodal-ios) prop.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-selected`
-
-Indicates whether a selectable element is currently selected or not.
-
-| Type    |
-| ------- |
-| boolean |
-
-### `onAccessibilityAction`
-
-Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.
-
-See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `accessibilityValue`
-
-Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
-See the [Accessibility guide](accessibility.md#accessibilityvalue-ios-android) for more information.
-
-| Type                                                            |
-| --------------------------------------------------------------- |
-| object: `{min: number, max: number, now: number, text: string}` |
-
----
-
-### `aria-valuemax`
-
-Represents the maximum value for range-based components, such as sliders and progress bars. Has precedence over the `max` value in the `accessibilityValue` prop.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `aria-valuemin`
-
-Represents the minimum value for range-based components, such as sliders and progress bars. Has precedence over the `min` value in the `accessibilityValue` prop.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `aria-valuenow`
-
-Represents the current value for range-based components, such as sliders and progress bars. Has precedence over the `now` value in the `accessibilityValue` prop.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `aria-valuetext`
-
-Represents the textual description of the component. Has precedence over the `text` value in the `accessibilityValue` prop.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `delayLongPress`
-
-Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `delayPressIn`
-
-Duration (in milliseconds), from the start of the touch, before `onPressIn` is called.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `delayPressOut`
-
-Duration (in milliseconds), from the release of the touch, before `onPressOut` is called.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `disabled`
-
-If true, disable all interactions for this component.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `hitSlop`
-
-This defines how far your touch can start away from the button. This is added to `pressRetentionOffset` when moving off of the button.
-
-:::note
-The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
-:::
-
-| Type                   |
-| ---------------------- |
-| [Rect](rect) or number |
-
-### `id`
-
-Used to locate this view from native code. Has precedence over `nativeID` prop.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `onBlur`
-
-Invoked when the item loses focus.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
-
----
-
-### `onFocus`
-
-Invoked when the item receives focus.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
-
----
-
-### `onLayout`
-
-Invoked on mount and on layout changes.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
-
----
-
-### `onLongPress`
-
-Called if the time after `onPressIn` lasts longer than 370 milliseconds. This time period can be customized with [`delayLongPress`](#delaylongpress).
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onPress`
-
-Called when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock). The first function argument is an event in form of [PressEvent](pressevent).
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onPressIn`
-
-Called as soon as the touchable element is pressed and invoked even before onPress. This can be useful when making network requests. The first function argument is an event in form of [PressEvent](pressevent).
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onPressOut`
-
-Called as soon as the touch is released even before onPress. The first function argument is an event in form of [PressEvent](pressevent).
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `pressRetentionOffset`
-
-When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations.
-
-| Type                   |
-| ---------------------- |
-| [Rect](rect) or number |
-
----
-
-### `nativeID`
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `testID`
-
-Used to locate this view in end-to-end tests.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `touchSoundDisabled` <div className="label android">Android</div>
-
-If true, doesn't play a system sound on touch.
-
-| Type    |
-| ------- |
-| Boolean |
+---
+id: touchablewithoutfeedback
+title: TouchableWithoutFeedback
+---
+
+:::tip
+If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
+:::
+
+Do not use unless you have a very good reason. All elements that respond to press should have a visual feedback when touched.
+
+`TouchableWithoutFeedback` supports only one child. If you wish to have several child components, wrap them in a View. Importantly, `TouchableWithoutFeedback` works by cloning its child and applying responder props to it. It is therefore required that any intermediary components pass through those props to the underlying React Native component.
+
+## Usage Pattern
+
+```tsx
+function MyComponent(props: MyComponentProps) {
+  return (
+    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
+      <Text>My Component</Text>
+    </View>
+  );
+}
+
+<TouchableWithoutFeedback onPress={() => alert('Pressed!')}>
+  <MyComponent />
+</TouchableWithoutFeedback>;
+```
+
+## Example
+
+```SnackPlayer name=TouchableWithoutFeedback
+import {useState} from 'react';
+import {StyleSheet, TouchableWithoutFeedback, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const TouchableWithoutFeedbackExample = () => {
+  const [count, setCount] = useState(0);
+
+  const onPress = () => {
+    setCount(count + 1);
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.countContainer}>
+          <Text style={styles.countText}>Count: {count}</Text>
+        </View>
+        <TouchableWithoutFeedback onPress={onPress}>
+          <View style={styles.button}>
+            <Text>Touch Here</Text>
+          </View>
+        </TouchableWithoutFeedback>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#DDDDDD',
+    padding: 10,
+  },
+  countContainer: {
+    alignItems: 'center',
+    padding: 10,
+  },
+  countText: {
+    color: '#FF00FF',
+  },
+});
+
+export default TouchableWithoutFeedbackExample;
+```
+
+---
+
+# Reference
+
+## Props
+
+### `accessibilityIgnoresInvertColors` <div className="label ios">iOS</div>
+
+A value indicating this view should or should not be inverted when color inversion is turned on. A value of `true` will tell the view to not be inverted even if color inversion is turned on.
+
+See the [Accessibility guide](accessibility.md#accessibilityignoresinvertcolors) for more information.
+
+| Type    |
+| ------- |
+| Boolean |
+
+---
+
+### `accessible`
+
+When `true`, indicates that the view is an accessibility element. By default, all the touchable elements are accessible.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `accessibilityLabel`
+
+Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the `Text` nodes separated by space.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityLanguage` <div className="label ios">iOS</div>
+
+A value indicating which language should be used by the screen reader when the user interacts with the element. It should follow the [BCP 47 specification](https://www.rfc-editor.org/info/bcp47).
+
+See the [iOS `accessibilityLanguage` doc](https://developer.apple.com/documentation/objectivec/nsobject/1615192-accessibilitylanguage) for more information.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityHint`
+
+An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityRole`
+
+`accessibilityRole` communicates the purpose of a component to the user of an assistive technology.
+
+`accessibilityRole` can be one of the following:
+
+- `'none'` - Used when the element has no role.
+- `'button'` - Used when the element should be treated as a button.
+- `'link'` - Used when the element should be treated as a link.
+- `'search'` - Used when the text field element should also be treated as a search field.
+- `'image'` - Used when the element should be treated as an image. Can be combined with button or link, for example.
+- `'keyboardkey'` - Used when the element acts as a keyboard key.
+- `'text'` - Used when the element should be treated as static text that cannot change.
+- `'adjustable'` - Used when an element can be "adjusted" (e.g. a slider).
+- `'imagebutton'` - Used when the element should be treated as a button and is also an image.
+- `'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.
+- `'alert'` - Used when an element contains important text to be presented to the user.
+- `'checkbox'` - Used when an element represents a checkbox which can be checked, unchecked, or have mixed checked state.
+- `'combobox'` - Used when an element represents a combo box, which allows the user to select among several choices.
+- `'menu'` - Used when the component is a menu of choices.
+- `'menubar'` - Used when a component is a container of multiple menus.
+- `'menuitem'` - Used to represent an item within a menu.
+- `'progressbar'` - Used to represent a component which indicates progress of a task.
+- `'radio'` - Used to represent a radio button.
+- `'radiogroup'` - Used to represent a group of radio buttons.
+- `'scrollbar'` - Used to represent a scroll bar.
+- `'spinbutton'` - Used to represent a button which opens a list of choices.
+- `'switch'` - Used to represent a switch which can be turned on and off.
+- `'tab'` - Used to represent a tab.
+- `'tablist'` - Used to represent a list of tabs.
+- `'timer'` - Used to represent a timer.
+- `'toolbar'` - Used to represent a tool bar (a container of action buttons or components).
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityState`
+
+Describes the current state of a component to the user of an assistive technology.
+
+See the [Accessibility guide](accessibility.md#accessibilitystate-ios-android) for more information.
+
+| Type                                                                                             |
+| ------------------------------------------------------------------------------------------------ |
+| object: `{disabled: bool, selected: bool, checked: bool or 'mixed', busy: bool, expanded: bool}` |
+
+---
+
+### `accessibilityActions`
+
+Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The `accessibilityActions` property should contain a list of action objects. Each action object should contain the field name and label.
+
+See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
+
+| Type  |
+| ----- |
+| array |
+
+---
+
+### `aria-busy`
+
+Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-checked`
+
+Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
+
+| Type             | Default |
+| ---------------- | ------- |
+| boolean, 'mixed' | false   |
+
+---
+
+### `aria-disabled`
+
+Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-expanded`
+
+Indicates whether an expandable element is currently expanded or collapsed.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-hidden`
+
+Indicates whether the element is hidden from assistive technologies.
+
+For example, in a window that contains sibling views `A` and `B`, setting `aria-hidden` to `true` on view `B` causes VoiceOver to ignore the `B` element and its children.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-label`
+
+Defines a string value that labels an interactive element.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `aria-live` <div className="label android">Android</div>
+
+Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
+
+- **off** Accessibility services should not announce changes to this view.
+- **polite** Accessibility services should announce changes to this view.
+- **assertive** Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
+
+| Type                                     | Default |
+| ---------------------------------------- | ------- |
+| enum(`'assertive'`, `'off'`, `'polite'`) | `'off'` |
+
+---
+
+### `aria-modal` <div className="label ios">iOS</div>
+
+Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. Has precedence over the [`accessibilityViewIsModal`](#accessibilityviewismodal-ios) prop.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-selected`
+
+Indicates whether a selectable element is currently selected or not.
+
+| Type    |
+| ------- |
+| boolean |
+
+### `onAccessibilityAction`
+
+Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.
+
+See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `accessibilityValue`
+
+Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
+
+See the [Accessibility guide](accessibility.md#accessibilityvalue-ios-android) for more information.
+
+| Type                                                            |
+| --------------------------------------------------------------- |
+| object: `{min: number, max: number, now: number, text: string}` |
+
+---
+
+### `aria-valuemax`
+
+Represents the maximum value for range-based components, such as sliders and progress bars. Has precedence over the `max` value in the `accessibilityValue` prop.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `aria-valuemin`
+
+Represents the minimum value for range-based components, such as sliders and progress bars. Has precedence over the `min` value in the `accessibilityValue` prop.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `aria-valuenow`
+
+Represents the current value for range-based components, such as sliders and progress bars. Has precedence over the `now` value in the `accessibilityValue` prop.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `aria-valuetext`
+
+Represents the textual description of the component. Has precedence over the `text` value in the `accessibilityValue` prop.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `delayLongPress`
+
+Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `delayPressIn`
+
+Duration (in milliseconds), from the start of the touch, before `onPressIn` is called.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `delayPressOut`
+
+Duration (in milliseconds), from the release of the touch, before `onPressOut` is called.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `disabled`
+
+If true, disable all interactions for this component.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `hitSlop`
+
+This defines how far your touch can start away from the button. This is added to `pressRetentionOffset` when moving off of the button.
+
+:::note
+The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
+:::
+
+| Type                   |
+| ---------------------- |
+| [Rect](rect) or number |
+
+### `id`
+
+Used to locate this view from native code. Has precedence over `nativeID` prop.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `onBlur`
+
+Invoked when the item loses focus.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
+
+---
+
+### `onFocus`
+
+Invoked when the item receives focus.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
+
+---
+
+### `onLayout`
+
+Invoked on mount and on layout changes.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
+
+---
+
+### `onLongPress`
+
+Called if the time after `onPressIn` lasts longer than 370 milliseconds. This time period can be customized with [`delayLongPress`](#delaylongpress).
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onPress`
+
+Called when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock). The first function argument is an event in form of [PressEvent](pressevent).
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onPressIn`
+
+Called as soon as the touchable element is pressed and invoked even before onPress. This can be useful when making network requests. The first function argument is an event in form of [PressEvent](pressevent).
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onPressOut`
+
+Called as soon as the touch is released even before onPress. The first function argument is an event in form of [PressEvent](pressevent).
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `pressRetentionOffset`
+
+When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations.
+
+| Type                   |
+| ---------------------- |
+| [Rect](rect) or number |
+
+---
+
+### `nativeID`
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `testID`
+
+Used to locate this view in end-to-end tests.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `touchSoundDisabled` <div className="label android">Android</div>
+
+If true, doesn't play a system sound on touch.
+
+| Type    |
+| ------- |
+| Boolean |
diff --git a/website/versioned_docs/version-0.82/transforms.md b/website/versioned_docs/version-0.82/transforms.md
index d3ed78c59f7..d04f53227db 100644
--- a/website/versioned_docs/version-0.82/transforms.md
+++ b/website/versioned_docs/version-0.82/transforms.md
@@ -1,399 +1,398 @@
----
-id: transforms
-title: Transforms
----
-
-Transforms are style properties that will help you modify the appearance and position of your components using 2D or 3D transformations. However, once you apply transforms, the layouts remain the same around the transformed component hence it might overlap with the nearby components. You can apply margin to the transformed component, the nearby components or padding to the container to prevent such overlaps.
-
-## Example
-
-```SnackPlayer name=Transforms%20Example
-import React from 'react';
-import {ScrollView, StyleSheet, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => (
-  <SafeAreaProvider>
-    <SafeAreaView style={styles.container}>
-      <ScrollView contentContainerStyle={styles.scrollContentContainer}>
-        <View style={styles.box}>
-          <Text style={styles.text}>Original Object</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{scale: 2}],
-            },
-          ]}>
-          <Text style={styles.text}>Scale by 2</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{scaleX: 2}],
-            },
-          ]}>
-          <Text style={styles.text}>ScaleX by 2</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{scaleY: 2}],
-            },
-          ]}>
-          <Text style={styles.text}>ScaleY by 2</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{rotate: '45deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>Rotate by 45 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{rotateX: '45deg'}, {rotateZ: '45deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>Rotate X&Z by 45 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{rotateY: '45deg'}, {rotateZ: '45deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>Rotate Y&Z by 45 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{skewX: '45deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>SkewX by 45 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{skewY: '45deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>SkewY by 45 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{skewX: '30deg'}, {skewY: '30deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>Skew X&Y by 30 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{translateX: -50}],
-            },
-          ]}>
-          <Text style={styles.text}>TranslateX by -50 </Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{translateY: 50}],
-            },
-          ]}>
-          <Text style={styles.text}>TranslateY by 50 </Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [
-                {
-                  matrix: [1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
-                },
-              ],
-            },
-          ]}>
-          <Text style={styles.text}>Matrix Transform</Text>
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  scrollContentContainer: {
-    alignItems: 'center',
-    paddingBottom: 60,
-  },
-  box: {
-    height: 100,
-    width: 100,
-    borderRadius: 5,
-    marginVertical: 40,
-    backgroundColor: '#61dafb',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  text: {
-    fontSize: 14,
-    fontWeight: 'bold',
-    margin: 8,
-    color: '#000',
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Transform
-
-`transform` accepts an array of transformation objects or space-separated string values. Each object specifies the property that will be transformed as the key, and the value to use in the transformation. Objects should not be combined. Use a single key/value pair per object.
-
-The rotate transformations require a string so that the transform may be expressed in degrees (deg) or radians (rad). For example:
-
-```js
-{
-  transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}],
-}
-```
-
-The same could also be achieved using a space-separated string:
-
-```js
-{
-  transform: 'rotateX(45deg) rotateZ(0.785398rad)',
-}
-```
-
-The skew transformations require a string so that the transform may be expressed in degrees (deg). For example:
-
-```js
-{
-  transform: [{skewX: '45deg'}],
-}
-```
-
-### Matrix Transform
-
-The `matrix` transform accepts a 4x4 transformation matrix as an array of 16 numbers. This allows you to apply complex transformations that combine translation, rotation, scaling, and skewing in a single operation.
-
-The matrix is specified in column-major order:
-
-```js
-{
-  transform: [
-    {
-      matrix: [
-        scaleX,
-        skewY,
-        0,
-        0,
-        skewX,
-        scaleY,
-        0,
-        0,
-        0,
-        0,
-        1,
-        0,
-        translateX,
-        translateY,
-        0,
-        1,
-      ],
-    },
-  ];
-}
-```
-
-For example, to apply a combination of scale and skew:
-
-```js
-{
-  transform: [
-    {
-      matrix: [
-        1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
-      ],
-    },
-  ];
-}
-```
-
-:::note
-Matrix transforms are useful when you need to apply pre-calculated transformation matrices, such as those from animation libraries or when building UI editor applications. For basic transformations, it's recommended to use the individual transform properties (scale, rotate, translate, etc.) as they are more readable.
-:::
-
-| Type                                                                                                                                                                                                                                                                                                          | Required |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
-| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number}`, `{translateY: number}`, `{skewX: string}`, `{skewY: string}` or string | No       |
-
----
-
-### `decomposedMatrix`, `rotation`, `scaleX`, `scaleY`, `transformMatrix`, `translateX`, `translateY`
-
-:::warning[Deprecated]
-Use the [`transform`](transforms#transform) prop instead.
-:::
-
-## Transform Origin
-
-The `transformOrigin` property sets the origin for a view's transformations. The transform origin is the point around which a transformation is applied. By default, the origin of a transform is `center`.
-
-# Example
-
-```SnackPlayer name=TransformOrigin%20Example
-import React, {useEffect, useRef} from 'react';
-import {Animated, View, StyleSheet, Easing} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const rotateAnim = useRef(new Animated.Value(0)).current;
-
-  useEffect(() => {
-    Animated.loop(
-      Animated.timing(rotateAnim, {
-        toValue: 1,
-        duration: 5000,
-        easing: Easing.linear,
-        useNativeDriver: true,
-      }),
-    ).start();
-  }, [rotateAnim]);
-
-  const spin = rotateAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '360deg'],
-  });
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.transformOriginWrapper}>
-          <Animated.View
-            style={[
-              styles.transformOriginView,
-              {
-                transform: [{rotate: spin}],
-              },
-            ]}
-          />
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  transformOriginWrapper: {
-    borderWidth: 1,
-    borderColor: 'rgba(0, 0, 0, 0.5)',
-  },
-  transformOriginView: {
-    backgroundColor: 'pink',
-    width: 100,
-    height: 100,
-    transformOrigin: 'top',
-  },
-});
-
-export default App;
-```
-
-### Values
-
-Transform origin supports `px`, `percentage` and keywords `top`, `left`, `right`, `bottom`, `center` values.
-
-The `transformOrigin` property may be specified using one, two, or three values, where each value represents an offset.
-
-#### One-value syntax:
-
-- The value must be a `px`, a `percentage`, or one of the keywords `left`, `center`, `right`, `top`, and `bottom`.
-
-```js
-{
-  transformOrigin: '20px',
-  transformOrigin: 'bottom',
-}
-```
-
-#### Two-value syntax:
-
-- First value (x-offset) must be a `px`, a `percentage`, or one of the keywords `left`, `center`, and `right`.
-- The second value (y-offset) must be a `px`, a `percentage`, or one of the keywords `top`, `center`, and `bottom`.
-
-```js
-{
-  transformOrigin: '10px 2px',
-  transformOrigin: 'left top',
-  transformOrigin: 'top right',
-}
-```
-
-#### Three-value syntax:
-
-- The first two values are the same as for the two-value syntax.
-- The third value (z-offset) must be a `px`. It always represents the Z offset.
-
-```js
-{
-  transformOrigin: '2px 30% 10px',
-  transformOrigin: 'right bottom 20px',
-}
-```
-
-#### Array syntax
-
-`transformOrigin` also supports an array syntax. It makes it convenient to use it with Animated APIs. It also avoids string parsing, so should be more efficient.
-
-```js
-{
-  // Using numeric values
-  transformOrigin: [10, 30, 40],
-  // Mixing numeric and percentage values
-  transformOrigin: [10, '20%', 0],
-}
-```
-
-You may refer to MDN's guide on [Transform origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin) for additional information.
+---
+id: transforms
+title: Transforms
+---
+
+Transforms are style properties that will help you modify the appearance and position of your components using 2D or 3D transformations. However, once you apply transforms, the layouts remain the same around the transformed component hence it might overlap with the nearby components. You can apply margin to the transformed component, the nearby components or padding to the container to prevent such overlaps.
+
+## Example
+
+```SnackPlayer name=Transforms%20Example
+import {ScrollView, StyleSheet, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => (
+  <SafeAreaProvider>
+    <SafeAreaView style={styles.container}>
+      <ScrollView contentContainerStyle={styles.scrollContentContainer}>
+        <View style={styles.box}>
+          <Text style={styles.text}>Original Object</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{scale: 2}],
+            },
+          ]}>
+          <Text style={styles.text}>Scale by 2</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{scaleX: 2}],
+            },
+          ]}>
+          <Text style={styles.text}>ScaleX by 2</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{scaleY: 2}],
+            },
+          ]}>
+          <Text style={styles.text}>ScaleY by 2</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{rotate: '45deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>Rotate by 45 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{rotateX: '45deg'}, {rotateZ: '45deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>Rotate X&Z by 45 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{rotateY: '45deg'}, {rotateZ: '45deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>Rotate Y&Z by 45 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{skewX: '45deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>SkewX by 45 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{skewY: '45deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>SkewY by 45 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{skewX: '30deg'}, {skewY: '30deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>Skew X&Y by 30 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{translateX: -50}],
+            },
+          ]}>
+          <Text style={styles.text}>TranslateX by -50 </Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{translateY: 50}],
+            },
+          ]}>
+          <Text style={styles.text}>TranslateY by 50 </Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [
+                {
+                  matrix: [1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
+                },
+              ],
+            },
+          ]}>
+          <Text style={styles.text}>Matrix Transform</Text>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollContentContainer: {
+    alignItems: 'center',
+    paddingBottom: 60,
+  },
+  box: {
+    height: 100,
+    width: 100,
+    borderRadius: 5,
+    marginVertical: 40,
+    backgroundColor: '#61dafb',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    margin: 8,
+    color: '#000',
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Transform
+
+`transform` accepts an array of transformation objects or space-separated string values. Each object specifies the property that will be transformed as the key, and the value to use in the transformation. Objects should not be combined. Use a single key/value pair per object.
+
+The rotate transformations require a string so that the transform may be expressed in degrees (deg) or radians (rad). For example:
+
+```js
+{
+  transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}],
+}
+```
+
+The same could also be achieved using a space-separated string:
+
+```js
+{
+  transform: 'rotateX(45deg) rotateZ(0.785398rad)',
+}
+```
+
+The skew transformations require a string so that the transform may be expressed in degrees (deg). For example:
+
+```js
+{
+  transform: [{skewX: '45deg'}],
+}
+```
+
+### Matrix Transform
+
+The `matrix` transform accepts a 4x4 transformation matrix as an array of 16 numbers. This allows you to apply complex transformations that combine translation, rotation, scaling, and skewing in a single operation.
+
+The matrix is specified in column-major order:
+
+```js
+{
+  transform: [
+    {
+      matrix: [
+        scaleX,
+        skewY,
+        0,
+        0,
+        skewX,
+        scaleY,
+        0,
+        0,
+        0,
+        0,
+        1,
+        0,
+        translateX,
+        translateY,
+        0,
+        1,
+      ],
+    },
+  ];
+}
+```
+
+For example, to apply a combination of scale and skew:
+
+```js
+{
+  transform: [
+    {
+      matrix: [
+        1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
+      ],
+    },
+  ];
+}
+```
+
+:::note
+Matrix transforms are useful when you need to apply pre-calculated transformation matrices, such as those from animation libraries or when building UI editor applications. For basic transformations, it's recommended to use the individual transform properties (scale, rotate, translate, etc.) as they are more readable.
+:::
+
+| Type                                                                                                                                                                                                                                                                                                          | Required |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
+| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number}`, `{translateY: number}`, `{skewX: string}`, `{skewY: string}` or string | No       |
+
+---
+
+### `decomposedMatrix`, `rotation`, `scaleX`, `scaleY`, `transformMatrix`, `translateX`, `translateY`
+
+:::warning[Deprecated]
+Use the [`transform`](transforms#transform) prop instead.
+:::
+
+## Transform Origin
+
+The `transformOrigin` property sets the origin for a view's transformations. The transform origin is the point around which a transformation is applied. By default, the origin of a transform is `center`.
+
+# Example
+
+```SnackPlayer name=TransformOrigin%20Example
+import {useEffect, useRef} from 'react';
+import {Animated, View, StyleSheet, Easing} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const rotateAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.timing(rotateAnim, {
+        toValue: 1,
+        duration: 5000,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      }),
+    ).start();
+  }, [rotateAnim]);
+
+  const spin = rotateAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.transformOriginWrapper}>
+          <Animated.View
+            style={[
+              styles.transformOriginView,
+              {
+                transform: [{rotate: spin}],
+              },
+            ]}
+          />
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  transformOriginWrapper: {
+    borderWidth: 1,
+    borderColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  transformOriginView: {
+    backgroundColor: 'pink',
+    width: 100,
+    height: 100,
+    transformOrigin: 'top',
+  },
+});
+
+export default App;
+```
+
+### Values
+
+Transform origin supports `px`, `percentage` and keywords `top`, `left`, `right`, `bottom`, `center` values.
+
+The `transformOrigin` property may be specified using one, two, or three values, where each value represents an offset.
+
+#### One-value syntax:
+
+- The value must be a `px`, a `percentage`, or one of the keywords `left`, `center`, `right`, `top`, and `bottom`.
+
+```js
+{
+  transformOrigin: '20px',
+  transformOrigin: 'bottom',
+}
+```
+
+#### Two-value syntax:
+
+- First value (x-offset) must be a `px`, a `percentage`, or one of the keywords `left`, `center`, and `right`.
+- The second value (y-offset) must be a `px`, a `percentage`, or one of the keywords `top`, `center`, and `bottom`.
+
+```js
+{
+  transformOrigin: '10px 2px',
+  transformOrigin: 'left top',
+  transformOrigin: 'top right',
+}
+```
+
+#### Three-value syntax:
+
+- The first two values are the same as for the two-value syntax.
+- The third value (z-offset) must be a `px`. It always represents the Z offset.
+
+```js
+{
+  transformOrigin: '2px 30% 10px',
+  transformOrigin: 'right bottom 20px',
+}
+```
+
+#### Array syntax
+
+`transformOrigin` also supports an array syntax. It makes it convenient to use it with Animated APIs. It also avoids string parsing, so should be more efficient.
+
+```js
+{
+  // Using numeric values
+  transformOrigin: [10, 30, 40],
+  // Mixing numeric and percentage values
+  transformOrigin: [10, '20%', 0],
+}
+```
+
+You may refer to MDN's guide on [Transform origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin) for additional information.
diff --git a/website/versioned_docs/version-0.82/troubleshooting.md b/website/versioned_docs/version-0.82/troubleshooting.md
index 811302be504..540f38b984f 100644
--- a/website/versioned_docs/version-0.82/troubleshooting.md
+++ b/website/versioned_docs/version-0.82/troubleshooting.md
@@ -91,7 +91,6 @@ To revert the `User Search Header Paths` and `Header Search Paths` build setting
 React Native implements a polyfill for WebSockets. These [polyfills](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Core/InitializeCore.js) are initialized as part of the react-native module that you include in your application through `import React from 'react'`. If you load another module that requires WebSockets, such as [Firebase](https://github.com/facebook/react-native/issues/3645), be sure to load/require it after react-native:
 
 ```
-import React from 'react';
 import Firebase from 'firebase';
 ```
 
diff --git a/website/versioned_docs/version-0.82/turbo-native-modules.md b/website/versioned_docs/version-0.82/turbo-native-modules.md
index eeef8624578..1d41bd06ce9 100644
--- a/website/versioned_docs/version-0.82/turbo-native-modules.md
+++ b/website/versioned_docs/version-0.82/turbo-native-modules.md
@@ -1,260 +1,260 @@
----
-id: turbo-native-modules-introduction
-title: 'Native Modules: Introduction'
----
-
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import constants from '@site/core/TabsConstants';
-import CodeBlock from '@theme/CodeBlock';
-import {getCurrentVersion} from '@site/src/getCurrentVersion';
-import {TurboNativeModulesAndroid, TurboNativeModulesIOS} from './\_turbo-native-modules-components';
-
-# Native Modules
-
-Your React Native application code may need to interact with native platform APIs that aren't provided by React Native or an existing library. You can write the integration code yourself using a **Turbo Native Module**. This guide will show you how to write one.
-
-The basic steps are:
-
-1. **define a typed JavaScript specification** using one of the most popular JavaScript type annotation languages: Flow or TypeScript;
-2. **configure your dependency management system to run Codegen**, which converts the specification into native language interfaces;
-3. **write your application code** using your specification; and
-4. **write your native platform code using the generated interfaces** to write and hook your native code into the React Native runtime environment.
-
-Lets work through each of these steps by building an example Turbo Native Module. The rest of this guide assume that you have created your application running the command:
-
-<CodeBlock language="bash" title="shell">
-{`npx @react-native-community/cli@latest init TurboModuleExample --version ${getCurrentVersion()}`}
-</CodeBlock>
-
-## Native Persistent Storage
-
-This guide will show you how to write an implementation of the [Web Storage API](https://html.spec.whatwg.org/multipage/webstorage.html#dom-localstorage-dev): `localStorage`. The API is relatable to a React developer who might be writing application code on your project.
-
-To make this work on mobile, we need to use Android and iOS APIs:
-
-- Android: [SharedPreferences](https://developer.android.com/reference/android/content/SharedPreferences), and
-- iOS: [NSUserDefaults](https://developer.apple.com/documentation/foundation/nsuserdefaults).
-
-### 1. Declare Typed Specification
-
-React Native provides a tool called [Codegen](/docs/the-new-architecture/what-is-codegen), which takes a specification written in TypeScript or Flow and generates platform specific code for Android and iOS. The specification declares the methods and data types that will pass back and forth between your native code and the React Native JavaScript runtime. A Turbo Native Module is both your specification, the native code you write, and the Codegen interfaces generated from your specification.
-
-To create a specs file:
-
-1. Inside the root folder of your app, create a new folder called `specs`.
-2. Create a new file called `NativeLocalStorage.ts`.
-
-:::info
-You can see all of the types you can use in your specification and the native types that are generated in the [Appendix](/docs/appendix) documentation.
-:::
-
-:::info
-If you want to change the name of your module and the related specs file, make sure to always use 'Native' as prefix (e.g. `NativeStorage` or `NativeUsersDefault`).
-:::
-
-Here is an implementation of the `localStorage` specification:
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultJavaScriptSpecLanguage} values={constants.javaScriptSpecLanguages}>
-<TabItem value="typescript">
-
-```typescript title="specs/NativeLocalStorage.ts"
-import type {TurboModule} from 'react-native';
-import {TurboModuleRegistry} from 'react-native';
-
-export interface Spec extends TurboModule {
-  setItem(value: string, key: string): void;
-  getItem(key: string): string | null;
-  removeItem(key: string): void;
-  clear(): void;
-}
-
-export default TurboModuleRegistry.getEnforcing<Spec>(
-  'NativeLocalStorage',
-);
-```
-
-</TabItem>
-<TabItem value="flow">
-
-```flow title="NativeLocalStorage.js"
-import type {TurboModule} from 'react-native';
-import {TurboModule, TurboModuleRegistry} from 'react-native';
-
-export interface Spec extends TurboModule {
-  setItem(value: string, key: string): void;
-  getItem(key: string): ?string;
-  removeItem(key: string): void;
-  clear(): void;
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 2. Configure Codegen to run
-
-The specification is used by the React Native Codegen tools to generate platform specific interfaces and boilerplate for us. To do this, Codegen needs to know where to find our specification and what to do with it. Update your `package.json` to include:
-
-```json title="package.json"
-     "start": "react-native start",
-     "test": "jest"
-   },
-   // highlight-add-start
-   "codegenConfig": {
-     "name": "NativeLocalStorageSpec",
-     "type": "modules",
-     "jsSrcsDir": "specs",
-     "android": {
-       "javaPackageName": "com.nativelocalstorage"
-     }
-   },
-   // highlight-add-end
-   "dependencies": {
-```
-
-With everything wired up for Codegen, we need to prepare our native code to hook into our generated code.
-
-<Tabs groupId="platforms" queryString defaultValue={constants.defaultPlatform}>
-<TabItem value="android" label="Android">
-Codegen is executed through the `generateCodegenArtifactsFromSchema` Gradle task:
-
-```bash
-cd android
-./gradlew generateCodegenArtifactsFromSchema
-
-BUILD SUCCESSFUL in 837ms
-14 actionable tasks: 3 executed, 11 up-to-date
-```
-
-This is automatically run when you build your Android application.
-</TabItem>
-<TabItem value="ios" label="iOS">
-Codegen is run as part of the script phases that's automatically added to the project generated by CocoaPods.
-
-```bash
-cd ios
-bundle install
-bundle exec pod install
-```
-
-The output will look like this:
-
-```shell
-...
-Framework build type is static library
-[Codegen] Adding script_phases to ReactCodegen.
-[Codegen] Generating ./build/generated/ios/ReactCodegen.podspec.json
-[Codegen] Analyzing /Users/me/src/TurboModuleExample/package.json
-[Codegen] Searching for codegen-enabled libraries in the app.
-[Codegen] Found TurboModuleExample
-[Codegen] Searching for codegen-enabled libraries in the project dependencies.
-[Codegen] Found react-native
-...
-```
-
-</TabItem>
-</Tabs>
-
-### 3. Write Application Code using the Turbo Native Module
-
-Using `NativeLocalStorage`, here’s a modified `App.tsx` that includes some text we want persisted, an input field and some buttons to update this value.
-
-The `TurboModuleRegistry` supports 2 modes of retrieving a Turbo Native Module:
-
-- `get<T>(name: string): T | null` which will return `null` if the Turbo Native Module is unavailable.
-- `getEnforcing<T>(name: string): T` which will throw an exception if the Turbo Native Module is unavailable. This assumes the module is always available.
-
-```tsx title="App.tsx"
-import React from 'react';
-import {
-  SafeAreaView,
-  StyleSheet,
-  Text,
-  TextInput,
-  Button,
-} from 'react-native';
-
-import NativeLocalStorage from './specs/NativeLocalStorage';
-
-const EMPTY = '<empty>';
-
-function App(): React.JSX.Element {
-  const [value, setValue] = React.useState<string | null>(null);
-
-  const [editingValue, setEditingValue] = React.useState<
-    string | null
-  >(null);
-
-  React.useEffect(() => {
-    const storedValue = NativeLocalStorage?.getItem('myKey');
-    setValue(storedValue ?? '');
-  }, []);
-
-  function saveValue() {
-    NativeLocalStorage?.setItem(editingValue ?? EMPTY, 'myKey');
-    setValue(editingValue);
-  }
-
-  function clearAll() {
-    NativeLocalStorage?.clear();
-    setValue('');
-  }
-
-  function deleteValue() {
-    NativeLocalStorage?.removeItem('myKey');
-    setValue('');
-  }
-
-  return (
-    <SafeAreaView style={{flex: 1}}>
-      <Text style={styles.text}>
-        Current stored value is: {value ?? 'No Value'}
-      </Text>
-      <TextInput
-        placeholder="Enter the text you want to store"
-        style={styles.textInput}
-        onChangeText={setEditingValue}
-      />
-      <Button title="Save" onPress={saveValue} />
-      <Button title="Delete" onPress={deleteValue} />
-      <Button title="Clear" onPress={clearAll} />
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  text: {
-    margin: 10,
-    fontSize: 20,
-  },
-  textInput: {
-    margin: 10,
-    height: 40,
-    borderColor: 'black',
-    borderWidth: 1,
-    paddingLeft: 5,
-    paddingRight: 5,
-    borderRadius: 5,
-  },
-});
-
-export default App;
-```
-
-### 4. Write your Native Platform code
-
-With everything prepared, we're going to start writing native platform code. We do this in 2 parts:
-
-:::note
-This guide shows you how to create a Turbo Native Module that only works with the New Architecture. If you need to support both the New Architecture and the Legacy Architecture, please refer to our [backwards compatibility guide](https://github.com/reactwg/react-native-new-architecture/blob/main/docs/backwards-compat.md).
-:::
-
-<Tabs groupId="platforms" queryString defaultValue={constants.defaultPlatform}>
-    <TabItem value="android" label="Android">
-        <TurboNativeModulesAndroid />
-    </TabItem>
-    <TabItem value="ios" label="iOS">
-        <TurboNativeModulesIOS/>
-    </TabItem>
-</Tabs>
+---
+id: turbo-native-modules-introduction
+title: 'Native Modules: Introduction'
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import constants from '@site/core/TabsConstants';
+import CodeBlock from '@theme/CodeBlock';
+import {getCurrentVersion} from '@site/src/getCurrentVersion';
+import {TurboNativeModulesAndroid, TurboNativeModulesIOS} from './\_turbo-native-modules-components';
+
+# Native Modules
+
+Your React Native application code may need to interact with native platform APIs that aren't provided by React Native or an existing library. You can write the integration code yourself using a **Turbo Native Module**. This guide will show you how to write one.
+
+The basic steps are:
+
+1. **define a typed JavaScript specification** using one of the most popular JavaScript type annotation languages: Flow or TypeScript;
+2. **configure your dependency management system to run Codegen**, which converts the specification into native language interfaces;
+3. **write your application code** using your specification; and
+4. **write your native platform code using the generated interfaces** to write and hook your native code into the React Native runtime environment.
+
+Lets work through each of these steps by building an example Turbo Native Module. The rest of this guide assume that you have created your application running the command:
+
+<CodeBlock language="bash" title="shell">
+{`npx @react-native-community/cli@latest init TurboModuleExample --version ${getCurrentVersion()}`}
+</CodeBlock>
+
+## Native Persistent Storage
+
+This guide will show you how to write an implementation of the [Web Storage API](https://html.spec.whatwg.org/multipage/webstorage.html#dom-localstorage-dev): `localStorage`. The API is relatable to a React developer who might be writing application code on your project.
+
+To make this work on mobile, we need to use Android and iOS APIs:
+
+- Android: [SharedPreferences](https://developer.android.com/reference/android/content/SharedPreferences), and
+- iOS: [NSUserDefaults](https://developer.apple.com/documentation/foundation/nsuserdefaults).
+
+### 1. Declare Typed Specification
+
+React Native provides a tool called [Codegen](/docs/the-new-architecture/what-is-codegen), which takes a specification written in TypeScript or Flow and generates platform specific code for Android and iOS. The specification declares the methods and data types that will pass back and forth between your native code and the React Native JavaScript runtime. A Turbo Native Module is both your specification, the native code you write, and the Codegen interfaces generated from your specification.
+
+To create a specs file:
+
+1. Inside the root folder of your app, create a new folder called `specs`.
+2. Create a new file called `NativeLocalStorage.ts`.
+
+:::info
+You can see all of the types you can use in your specification and the native types that are generated in the [Appendix](/docs/appendix) documentation.
+:::
+
+:::info
+If you want to change the name of your module and the related specs file, make sure to always use 'Native' as prefix (e.g. `NativeStorage` or `NativeUsersDefault`).
+:::
+
+Here is an implementation of the `localStorage` specification:
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultJavaScriptSpecLanguage} values={constants.javaScriptSpecLanguages}>
+<TabItem value="typescript">
+
+```typescript title="specs/NativeLocalStorage.ts"
+import type {TurboModule} from 'react-native';
+import {TurboModuleRegistry} from 'react-native';
+
+export interface Spec extends TurboModule {
+  setItem(value: string, key: string): void;
+  getItem(key: string): string | null;
+  removeItem(key: string): void;
+  clear(): void;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>(
+  'NativeLocalStorage',
+);
+```
+
+</TabItem>
+<TabItem value="flow">
+
+```flow title="NativeLocalStorage.js"
+import type {TurboModule} from 'react-native';
+import {TurboModule, TurboModuleRegistry} from 'react-native';
+
+export interface Spec extends TurboModule {
+  setItem(value: string, key: string): void;
+  getItem(key: string): ?string;
+  removeItem(key: string): void;
+  clear(): void;
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 2. Configure Codegen to run
+
+The specification is used by the React Native Codegen tools to generate platform specific interfaces and boilerplate for us. To do this, Codegen needs to know where to find our specification and what to do with it. Update your `package.json` to include:
+
+```json title="package.json"
+     "start": "react-native start",
+     "test": "jest"
+   },
+   // highlight-add-start
+   "codegenConfig": {
+     "name": "NativeLocalStorageSpec",
+     "type": "modules",
+     "jsSrcsDir": "specs",
+     "android": {
+       "javaPackageName": "com.nativelocalstorage"
+     }
+   },
+   // highlight-add-end
+   "dependencies": {
+```
+
+With everything wired up for Codegen, we need to prepare our native code to hook into our generated code.
+
+<Tabs groupId="platforms" queryString defaultValue={constants.defaultPlatform}>
+<TabItem value="android" label="Android">
+Codegen is executed through the `generateCodegenArtifactsFromSchema` Gradle task:
+
+```bash
+cd android
+./gradlew generateCodegenArtifactsFromSchema
+
+BUILD SUCCESSFUL in 837ms
+14 actionable tasks: 3 executed, 11 up-to-date
+```
+
+This is automatically run when you build your Android application.
+</TabItem>
+<TabItem value="ios" label="iOS">
+Codegen is run as part of the script phases that's automatically added to the project generated by CocoaPods.
+
+```bash
+cd ios
+bundle install
+bundle exec pod install
+```
+
+The output will look like this:
+
+```shell
+...
+Framework build type is static library
+[Codegen] Adding script_phases to ReactCodegen.
+[Codegen] Generating ./build/generated/ios/ReactCodegen.podspec.json
+[Codegen] Analyzing /Users/me/src/TurboModuleExample/package.json
+[Codegen] Searching for codegen-enabled libraries in the app.
+[Codegen] Found TurboModuleExample
+[Codegen] Searching for codegen-enabled libraries in the project dependencies.
+[Codegen] Found react-native
+...
+```
+
+</TabItem>
+</Tabs>
+
+### 3. Write Application Code using the Turbo Native Module
+
+Using `NativeLocalStorage`, here’s a modified `App.tsx` that includes some text we want persisted, an input field and some buttons to update this value.
+
+The `TurboModuleRegistry` supports 2 modes of retrieving a Turbo Native Module:
+
+- `get<T>(name: string): T | null` which will return `null` if the Turbo Native Module is unavailable.
+- `getEnforcing<T>(name: string): T` which will throw an exception if the Turbo Native Module is unavailable. This assumes the module is always available.
+
+```tsx title="App.tsx"
+import {useEffect, useState, type JSX} from 'react';
+import {
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  TextInput,
+  Button,
+} from 'react-native';
+
+import NativeLocalStorage from './specs/NativeLocalStorage';
+
+const EMPTY = '<empty>';
+
+function App(): JSX.Element {
+  const [value, setValue] = useState<string | null>(null);
+
+  const [editingValue, setEditingValue] = useState<string | null>(
+    null,
+  );
+
+  useEffect(() => {
+    const storedValue = NativeLocalStorage?.getItem('myKey');
+    setValue(storedValue ?? '');
+  }, []);
+
+  function saveValue() {
+    NativeLocalStorage?.setItem(editingValue ?? EMPTY, 'myKey');
+    setValue(editingValue);
+  }
+
+  function clearAll() {
+    NativeLocalStorage?.clear();
+    setValue('');
+  }
+
+  function deleteValue() {
+    NativeLocalStorage?.removeItem('myKey');
+    setValue('');
+  }
+
+  return (
+    <SafeAreaView style={{flex: 1}}>
+      <Text style={styles.text}>
+        Current stored value is: {value ?? 'No Value'}
+      </Text>
+      <TextInput
+        placeholder="Enter the text you want to store"
+        style={styles.textInput}
+        onChangeText={setEditingValue}
+      />
+      <Button title="Save" onPress={saveValue} />
+      <Button title="Delete" onPress={deleteValue} />
+      <Button title="Clear" onPress={clearAll} />
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  text: {
+    margin: 10,
+    fontSize: 20,
+  },
+  textInput: {
+    margin: 10,
+    height: 40,
+    borderColor: 'black',
+    borderWidth: 1,
+    paddingLeft: 5,
+    paddingRight: 5,
+    borderRadius: 5,
+  },
+});
+
+export default App;
+```
+
+### 4. Write your Native Platform code
+
+With everything prepared, we're going to start writing native platform code. We do this in 2 parts:
+
+:::note
+This guide shows you how to create a Turbo Native Module that only works with the New Architecture. If you need to support both the New Architecture and the Legacy Architecture, please refer to our [backwards compatibility guide](https://github.com/reactwg/react-native-new-architecture/blob/main/docs/backwards-compat.md).
+:::
+
+<Tabs groupId="platforms" queryString defaultValue={constants.defaultPlatform}>
+    <TabItem value="android" label="Android">
+        <TurboNativeModulesAndroid />
+    </TabItem>
+    <TabItem value="ios" label="iOS">
+        <TurboNativeModulesIOS/>
+    </TabItem>
+</Tabs>
diff --git a/website/versioned_docs/version-0.82/tutorial.md b/website/versioned_docs/version-0.82/tutorial.md
index d1a92919cd7..cbd5fd11bef 100644
--- a/website/versioned_docs/version-0.82/tutorial.md
+++ b/website/versioned_docs/version-0.82/tutorial.md
@@ -1,270 +1,267 @@
----
-id: tutorial
-title: Learn the Basics
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-React Native is like React, but it uses native components instead of web components as building blocks. So to understand the basic structure of a React Native app, you need to understand some of the basic React concepts, like JSX, components, `state`, and `props`. If you already know React, you still need to learn some React Native specific stuff, like the native components. This tutorial is aimed at all audiences, whether you have React experience or not.
-
-Let's do this thing.
-
-## Hello World
-
-In accordance with the ancient traditions of our people, we must first build an app that does nothing except say "Hello, world!". Here it is:
-
-```SnackPlayer name=Hello%20World
-import React from 'react';
-import {Text, View} from 'react-native';
-
-const HelloWorldApp = () => {
-  return (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}>
-      <Text>Hello, world!</Text>
-    </View>
-  );
-};
-export default HelloWorldApp;
-```
-
-If you are feeling curious, you can play around with sample code directly in the web simulators. You can also paste it into your `App.js` file to create a real app on your local machine.
-
-## What's going on here?
-
-1. First of all, we need to import `React` to be able to use `JSX`, which will then be transformed to the native components of each platform.
-2. On line 2, we import the `Text` and `View` components from `react-native`
-
-Then we define the `HelloWorldApp` function, which is a [function component](https://react.dev/reference/react/Component) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child.
-
-The `Text` component allows us to render a text, while the `View` component renders a container. This container has several styles applied, let's analyze what each one is doing.
-
-The first style that we find is `flex: 1`, the [`flex`](layout-props#flex) prop will define how your items are going to "fill" over the available space along your main axis. Since we only have one container, it will take all the available space of the parent component. In this case, it is the only component, so it will take all the available screen space.
-
-The following style is [`justifyContent`](layout-props#justifycontent): "center". This aligns children of a container in the center of the container's main axis. Finally, we have [`alignItems`](layout-props#alignitems): "center", which aligns children of a container in the center of the container's cross axis.
-
-Some of the things in here might not look like JavaScript to you. Don't panic. _This is the future_.
-
-First of all, ES2015 (also known as ES6) is a set of improvements to JavaScript that is now part of the official standard, but not yet supported by all browsers, so often it isn't used yet in web development. React Native ships with ES2015 support, so you can use this stuff without worrying about compatibility. `import`, `export`, `const` and `from` in the example above are all ES2015 features. If you aren't familiar with ES2015, you can probably pick it up by reading through sample code like this tutorial has. If you want, [this page](https://babeljs.io/learn-es2015/) has a good overview of ES2015 features.
-
-The other unusual thing in this code example is `<View><Text>Hello world!</Text></View>`. This is JSX - a syntax for embedding XML within JavaScript. Many frameworks use a specialized templating language which lets you embed code inside markup language. In React, this is reversed. JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like `<div>` or `<span>`, you use React components. In this case, `<Text>` is a [Core Component](intro-react-native-components) that displays some text and `View` is like the `<div>` or `<span>`.
-
-## Components
-
-So this code is defining `HelloWorldApp`, a new `Component`. When you're building a React Native app, you'll be making new components a lot. Anything you see on the screen is some sort of component.
-
-## Props
-
-Most components can be customized when they are created, with different parameters. These creation parameters are called props.
-
-Your own components can also use `props`. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place. Refer to `props.YOUR_PROP_NAME` in your functional components or `this.props.YOUR_PROP_NAME` in your class components. Here's an example:
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Hello%20Props&ext=js
-import React from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-
-const styles = StyleSheet.create({
-  center: {
-    alignItems: 'center',
-  },
-});
-
-const Greeting = props => {
-  return (
-    <View style={styles.center}>
-      <Text>Hello {props.name}!</Text>
-    </View>
-  );
-};
-
-const LotsOfGreetings = () => {
-  return (
-    <View style={[styles.center, {top: 50}]}>
-      <Greeting name="Rexxar" />
-      <Greeting name="Jaina" />
-      <Greeting name="Valeera" />
-    </View>
-  );
-};
-
-export default LotsOfGreetings;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Hello%20Props&ext=tsx
-import React from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-
-const styles = StyleSheet.create({
-  center: {
-    alignItems: 'center',
-  },
-});
-
-type GreetingProps = {
-  name: string;
-};
-
-const Greeting = (props: GreetingProps) => {
-  return (
-    <View style={styles.center}>
-      <Text>Hello {props.name}!</Text>
-    </View>
-  );
-};
-
-const LotsOfGreetings = () => {
-  return (
-    <View style={[styles.center, {top: 50}]}>
-      <Greeting name="Rexxar" />
-      <Greeting name="Jaina" />
-      <Greeting name="Valeera" />
-    </View>
-  );
-};
-
-export default LotsOfGreetings;
-```
-
-</TabItem>
-</Tabs>
-
-Using `name` as a prop lets us customize the `Greeting` component, so we can reuse that component for each of our greetings. This example also uses the `Greeting` component in JSX. The power to do this is what makes React so cool.
-
-The other new thing going on here is the [`View`](view.md) component. A [`View`](view.md) is useful as a container for other components, to help control style and layout.
-
-With `props` and the basic [`Text`](text.md), [`Image`](image.md), and [`View`](view.md) components, you can build a wide variety of static screens. To learn how to make your app change over time, you need to [learn about State](#state).
-
-## State
-
-Unlike props [that are read-only](https://react.dev/reference/react/Component#props) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else.
-
-#### What's the difference between state and props in React?
-
-In a React component, the props are the variables that we pass from a parent component to a child component. Similarly, the state are also variables, with the difference that they are not passed as parameters, but rather that the component initializes and manages them internally.
-
-#### Are there differences between React and React Native to handle the state?
-
-<div className="two-columns">
-
-```tsx
-// ReactJS Counter Example using Hooks!
-
-import React, {useState} from 'react';
-
-
-
-const App = () => {
-  const [count, setCount] = useState(0);
-
-  return (
-    <div className="container">
-      <p>You clicked {count} times</p>
-      <button
-        onClick={() => setCount(count + 1)}>
-        Click me!
-      </button>
-    </div>
-  );
-};
-
-
-// CSS
-.container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-```
-
-```tsx
-// React Native Counter Example using Hooks!
-
-import React, {useState} from 'react';
-import {View, Text, Button, StyleSheet} from 'react-native';
-
-const App = () => {
-  const [count, setCount] = useState(0);
-
-  return (
-    <View style={styles.container}>
-      <Text>You clicked {count} times</Text>
-      <Button
-        onPress={() => setCount(count + 1)}
-        title="Click me!"
-      />
-    </View>
-  );
-};
-
-// React Native Styles
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-```
-
-</div>
-
-As shown above, there is no difference in handling the `state` between [React](https://react.dev/learn/state-a-components-memory) and `React Native`. You can use the state of your components both in classes and in function components using [hooks](https://react.dev/reference/react/useState)!
-
-In the following example we will show the same above counter example using classes.
-
-```SnackPlayer name=Hello%20Classes
-import React, {Component} from 'react';
-import {StyleSheet, TouchableOpacity, Text, View} from 'react-native';
-
-class App extends Component {
-  state = {
-    count: 0,
-  };
-
-  onPress = () => {
-    this.setState({
-      count: this.state.count + 1,
-    });
-  };
-
-  render() {
-    return (
-      <View style={styles.container}>
-        <TouchableOpacity style={styles.button} onPress={this.onPress}>
-          <Text>Click me</Text>
-        </TouchableOpacity>
-        <View>
-          <Text>You clicked {this.state.count} times</Text>
-        </View>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  button: {
-    alignItems: 'center',
-    backgroundColor: '#DDDDDD',
-    padding: 10,
-    marginBottom: 10,
-  },
-});
-
-export default App;
-```
+---
+id: tutorial
+title: Learn the Basics
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+React Native is like React, but it uses native components instead of web components as building blocks. So to understand the basic structure of a React Native app, you need to understand some of the basic React concepts, like JSX, components, `state`, and `props`. If you already know React, you still need to learn some React Native specific stuff, like the native components. This tutorial is aimed at all audiences, whether you have React experience or not.
+
+Let's do this thing.
+
+## Hello World
+
+In accordance with the ancient traditions of our people, we must first build an app that does nothing except say "Hello, world!". Here it is:
+
+```SnackPlayer name=Hello%20World
+import {Text, View} from 'react-native';
+
+const HelloWorldApp = () => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}>
+      <Text>Hello, world!</Text>
+    </View>
+  );
+};
+export default HelloWorldApp;
+```
+
+If you are feeling curious, you can play around with sample code directly in the web simulators. You can also paste it into your `App.js` file to create a real app on your local machine.
+
+## What's going on here?
+
+1. First of all, we need to import `React` to be able to use `JSX`, which will then be transformed to the native components of each platform.
+2. On line 2, we import the `Text` and `View` components from `react-native`
+
+Then we define the `HelloWorldApp` function, which is a [function component](https://react.dev/reference/react/Component) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child.
+
+The `Text` component allows us to render a text, while the `View` component renders a container. This container has several styles applied, let's analyze what each one is doing.
+
+The first style that we find is `flex: 1`, the [`flex`](layout-props#flex) prop will define how your items are going to "fill" over the available space along your main axis. Since we only have one container, it will take all the available space of the parent component. In this case, it is the only component, so it will take all the available screen space.
+
+The following style is [`justifyContent`](layout-props#justifycontent): "center". This aligns children of a container in the center of the container's main axis. Finally, we have [`alignItems`](layout-props#alignitems): "center", which aligns children of a container in the center of the container's cross axis.
+
+Some of the things in here might not look like JavaScript to you. Don't panic. _This is the future_.
+
+First of all, ES2015 (also known as ES6) is a set of improvements to JavaScript that is now part of the official standard, but not yet supported by all browsers, so often it isn't used yet in web development. React Native ships with ES2015 support, so you can use this stuff without worrying about compatibility. `import`, `export`, `const` and `from` in the example above are all ES2015 features. If you aren't familiar with ES2015, you can probably pick it up by reading through sample code like this tutorial has. If you want, [this page](https://babeljs.io/learn-es2015/) has a good overview of ES2015 features.
+
+The other unusual thing in this code example is `<View><Text>Hello world!</Text></View>`. This is JSX - a syntax for embedding XML within JavaScript. Many frameworks use a specialized templating language which lets you embed code inside markup language. In React, this is reversed. JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like `<div>` or `<span>`, you use React components. In this case, `<Text>` is a [Core Component](intro-react-native-components) that displays some text and `View` is like the `<div>` or `<span>`.
+
+## Components
+
+So this code is defining `HelloWorldApp`, a new `Component`. When you're building a React Native app, you'll be making new components a lot. Anything you see on the screen is some sort of component.
+
+## Props
+
+Most components can be customized when they are created, with different parameters. These creation parameters are called props.
+
+Your own components can also use `props`. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place. Refer to `props.YOUR_PROP_NAME` in your functional components or `this.props.YOUR_PROP_NAME` in your class components. Here's an example:
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Hello%20Props&ext=js
+import {Text, View, StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  center: {
+    alignItems: 'center',
+  },
+});
+
+const Greeting = props => {
+  return (
+    <View style={styles.center}>
+      <Text>Hello {props.name}!</Text>
+    </View>
+  );
+};
+
+const LotsOfGreetings = () => {
+  return (
+    <View style={[styles.center, {top: 50}]}>
+      <Greeting name="Rexxar" />
+      <Greeting name="Jaina" />
+      <Greeting name="Valeera" />
+    </View>
+  );
+};
+
+export default LotsOfGreetings;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Hello%20Props&ext=tsx
+import {Text, View, StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  center: {
+    alignItems: 'center',
+  },
+});
+
+type GreetingProps = {
+  name: string;
+};
+
+const Greeting = (props: GreetingProps) => {
+  return (
+    <View style={styles.center}>
+      <Text>Hello {props.name}!</Text>
+    </View>
+  );
+};
+
+const LotsOfGreetings = () => {
+  return (
+    <View style={[styles.center, {top: 50}]}>
+      <Greeting name="Rexxar" />
+      <Greeting name="Jaina" />
+      <Greeting name="Valeera" />
+    </View>
+  );
+};
+
+export default LotsOfGreetings;
+```
+
+</TabItem>
+</Tabs>
+
+Using `name` as a prop lets us customize the `Greeting` component, so we can reuse that component for each of our greetings. This example also uses the `Greeting` component in JSX. The power to do this is what makes React so cool.
+
+The other new thing going on here is the [`View`](view.md) component. A [`View`](view.md) is useful as a container for other components, to help control style and layout.
+
+With `props` and the basic [`Text`](text.md), [`Image`](image.md), and [`View`](view.md) components, you can build a wide variety of static screens. To learn how to make your app change over time, you need to [learn about State](#state).
+
+## State
+
+Unlike props [that are read-only](https://react.dev/reference/react/Component#props) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else.
+
+#### What's the difference between state and props in React?
+
+In a React component, the props are the variables that we pass from a parent component to a child component. Similarly, the state are also variables, with the difference that they are not passed as parameters, but rather that the component initializes and manages them internally.
+
+#### Are there differences between React and React Native to handle the state?
+
+<div className="two-columns">
+
+```tsx
+// React Counter Example using Hooks!
+
+import {useState} from 'react';
+
+
+
+const App = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="container">
+      <p>You clicked {count} times</p>
+      <button
+        onClick={() => setCount(count + 1)}>
+        Click me!
+      </button>
+    </div>
+  );
+};
+
+
+// CSS
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+```
+
+```tsx
+// React Native Counter Example using Hooks!
+
+import {useState} from 'react';
+import {View, Text, Button, StyleSheet} from 'react-native';
+
+const App = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <View style={styles.container}>
+      <Text>You clicked {count} times</Text>
+      <Button
+        onPress={() => setCount(count + 1)}
+        title="Click me!"
+      />
+    </View>
+  );
+};
+
+// React Native Styles
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+```
+
+</div>
+
+As shown above, there is no difference in handling the `state` between [React](https://react.dev/learn/state-a-components-memory) and `React Native`. You can use the state of your components both in classes and in function components using [hooks](https://react.dev/reference/react/useState)!
+
+In the following example we will show the same above counter example using classes.
+
+```SnackPlayer name=Hello%20Classes
+import {Component} from 'react';
+import {StyleSheet, TouchableOpacity, Text, View} from 'react-native';
+
+class App extends Component {
+  state = {
+    count: 0,
+  };
+
+  onPress = () => {
+    this.setState({
+      count: this.state.count + 1,
+    });
+  };
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <TouchableOpacity style={styles.button} onPress={this.onPress}>
+          <Text>Click me</Text>
+        </TouchableOpacity>
+        <View>
+          <Text>You clicked {this.state.count} times</Text>
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#DDDDDD',
+    padding: 10,
+    marginBottom: 10,
+  },
+});
+
+export default App;
+```
diff --git a/website/versioned_docs/version-0.82/usecolorscheme.md b/website/versioned_docs/version-0.82/usecolorscheme.md
index 4d326283eeb..70620f7b6d1 100644
--- a/website/versioned_docs/version-0.82/usecolorscheme.md
+++ b/website/versioned_docs/version-0.82/usecolorscheme.md
@@ -20,7 +20,6 @@ The `useColorScheme` React hook provides and subscribes to color scheme updates
 ## Example
 
 ```SnackPlayer
-import React from 'react';
 import {Text, StyleSheet, useColorScheme} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.82/usewindowdimensions.md b/website/versioned_docs/version-0.82/usewindowdimensions.md
index 92bb1931d32..3e8a8077370 100644
--- a/website/versioned_docs/version-0.82/usewindowdimensions.md
+++ b/website/versioned_docs/version-0.82/usewindowdimensions.md
@@ -16,7 +16,6 @@ const {height, width} = useWindowDimensions();
 ## Example
 
 ```SnackPlayer name=useWindowDimensions&supportedPlatforms=ios,android
-import React from 'react';
 import {StyleSheet, Text, useWindowDimensions} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.82/using-a-listview.md b/website/versioned_docs/version-0.82/using-a-listview.md
index cf13fa66a6c..a5a04f40279 100644
--- a/website/versioned_docs/version-0.82/using-a-listview.md
+++ b/website/versioned_docs/version-0.82/using-a-listview.md
@@ -12,7 +12,6 @@ The `FlatList` component requires two props: `data` and `renderItem`. `data` is
 This example creates a basic `FlatList` of hardcoded data. Each item in the `data` props is rendered as a `Text` component. The `FlatListBasics` component then renders the `FlatList` and all `Text` components.
 
 ```SnackPlayer name=FlatList%20Basics
-import React from 'react';
 import {FlatList, StyleSheet, Text, View} from 'react-native';
 
 const styles = StyleSheet.create({
@@ -55,7 +54,6 @@ export default FlatListBasics;
 If you want to render a set of data broken into logical sections, maybe with section headers, similar to `UITableView` on iOS, then a [SectionList](sectionlist.md) is the way to go.
 
 ```SnackPlayer name=SectionList%20Basics
-import React from 'react';
 import {SectionList, StyleSheet, Text, View} from 'react-native';
 
 const styles = StyleSheet.create({
diff --git a/website/versioned_docs/version-0.82/using-a-scrollview.md b/website/versioned_docs/version-0.82/using-a-scrollview.md
index e4de6207a71..3ffae817bf0 100644
--- a/website/versioned_docs/version-0.82/using-a-scrollview.md
+++ b/website/versioned_docs/version-0.82/using-a-scrollview.md
@@ -8,7 +8,6 @@ The [ScrollView](scrollview.md) is a generic scrolling container that can contai
 This example creates a vertical `ScrollView` with both images and text mixed together.
 
 ```SnackPlayer name=Using%20ScrollView
-import React from 'react';
 import {Image, ScrollView, Text} from 'react-native';
 
 const logo = {
diff --git a/website/versioned_docs/version-0.82/vibration.md b/website/versioned_docs/version-0.82/vibration.md
index 44a0af2db43..bdb564ab331 100644
--- a/website/versioned_docs/version-0.82/vibration.md
+++ b/website/versioned_docs/version-0.82/vibration.md
@@ -8,7 +8,6 @@ Vibrates the device.
 ## Example
 
 ```SnackPlayer name=Vibration%20Example&supportedPlatforms=ios,android
-import React from 'react';
 import {
   Button,
   Platform,
diff --git a/website/versioned_docs/version-0.82/view-style-props.md b/website/versioned_docs/version-0.82/view-style-props.md
index 4f1c413c202..c464a3fa559 100644
--- a/website/versioned_docs/version-0.82/view-style-props.md
+++ b/website/versioned_docs/version-0.82/view-style-props.md
@@ -9,7 +9,6 @@ import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameFor
 ### Example
 
 ```SnackPlayer name=ViewStyleProps
-import React from 'react';
 import {View, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.82/view.md b/website/versioned_docs/version-0.82/view.md
index 3fd3c7fb4bd..405218dcc9b 100644
--- a/website/versioned_docs/version-0.82/view.md
+++ b/website/versioned_docs/version-0.82/view.md
@@ -12,7 +12,6 @@ The most fundamental component for building a UI, `View` is a container that sup
 This example creates a `View` that wraps two boxes with color and a text component in a row with padding.
 
 ```SnackPlayer name=View%20Example
-import React from 'react';
 import {View, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.82/virtualizedlist.md b/website/versioned_docs/version-0.82/virtualizedlist.md
index 2e2081210a7..8c53293609c 100644
--- a/website/versioned_docs/version-0.82/virtualizedlist.md
+++ b/website/versioned_docs/version-0.82/virtualizedlist.md
@@ -15,7 +15,6 @@ Virtualization massively improves memory consumption and performance of large li
 <TabItem value="javascript">
 
 ```SnackPlayer name=VirtualizedListExample&ext=js
-import React from 'react';
 import {View, VirtualizedList, StyleSheet, Text, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -71,7 +70,6 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=VirtualizedListExample&ext=tsx
-import React from 'react';
 import {View, VirtualizedList, StyleSheet, Text, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.83/_fabric-native-components.jsx b/website/versioned_docs/version-0.83/_fabric-native-components.jsx
index fc6a3171a4f..69bc6f31268 100644
--- a/website/versioned_docs/version-0.83/_fabric-native-components.jsx
+++ b/website/versioned_docs/version-0.83/_fabric-native-components.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import IOSContent from './fabric-native-components-ios.md';
 import AndroidContent from './fabric-native-components-android.md';
 
diff --git a/website/versioned_docs/version-0.83/_integration-with-existing-apps-ios.md b/website/versioned_docs/version-0.83/_integration-with-existing-apps-ios.md
index 4b95571538b..f28e3c48bf9 100644
--- a/website/versioned_docs/version-0.83/_integration-with-existing-apps-ios.md
+++ b/website/versioned_docs/version-0.83/_integration-with-existing-apps-ios.md
@@ -1,655 +1,655 @@
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import constants from '@site/core/TabsConstants';
-import CodeBlock from '@theme/CodeBlock';
-import RNTemplateRepoLink from '@site/core/RNTemplateRepoLink';
-import {getTemplateBranchNameForCurrentVersion} from '@site/src/getTemplateBranchNameForCurrentVersion';
-
-## Key Concepts
-
-The keys to integrating React Native components into your iOS application are to:
-
-1. Set up the correct directory structure.
-2. Install the necessary NPM dependencies.
-3. Adding React Native to your Podfile configuration.
-4. Writing the TypeScript code for your first React Native screen.
-5. Integrate React Native with your iOS code using a `RCTRootView`.
-6. Testing your integration by running the bundler and seeing your app in action.
-
-## Using the Community Template
-
-While you follow this guide, we suggest you to use the [React Native Community Template](https://github.com/react-native-community/template/) as reference. The template contains a **minimal iOS app** and will help you understanding how to integrate React Native into an existing iOS app.
-
-## Prerequisites
-
-Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](getting-started-without-a-framework) to configure your development environment for building React Native apps for iOS.
-This guide also assumes you're familiar with the basics of iOS development such as creating a `UIViewController` and editing the `Podfile` file.
-
-### 1. Set up directory structure
-
-To ensure a smooth experience, create a new folder for your integrated React Native project, then **move your existing iOS project** to the `/ios` subfolder.
-
-## 2. Install NPM dependencies
-
-Go to the root directory and run the following command:
-
-<CodeBlock language="bash" title="shell">
-{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/package.json`}
-</CodeBlock>
-
-This will copy the `package.json` <RNTemplateRepoLink href="template/package.json">file from the Community template</RNTemplateRepoLink> to your project.
-
-Next, install the NPM packages by running:
-
-<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
-<TabItem value="npm">
-
-```shell
-npm install
-```
-
-</TabItem>
-<TabItem value="yarn">
-
-```shell
-yarn install
-```
-
-</TabItem>
-</Tabs>
-
-Installation process has created a new `node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
-
-Add `node_modules/` to your `.gitignore` file (here the <RNTemplateRepoLink href="template/_gitignore">Community default one</RNTemplateRepoLink>).
-
-### 3. Install Development tools
-
-### Command Line Tools for Xcode
-
-Install the Command Line Tools. Choose **Settings... (or Preferences...)** in the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.
-
-![Xcode Command Line Tools](/docs/assets/GettingStartedXcodeCommandLineTools.png)
-
-### CocoaPods
-
-[CocoaPods](https://cocoapods.org) is a package management tool for iOS and macOS development. We use it to add the actual React Native framework code locally into your current project.
-
-We recommend installing CocoaPods using [Homebrew](https://brew.sh/):
-
-```shell
-brew install cocoapods
-```
-
-## 4. Adding React Native to your app
-
-### Configuring CocoaPods
-
-To configure CocoaPods, we need two files:
-
-- A **Gemfile** that defines which Ruby dependencies we need.
-- A **Podfile** that defines how to properly install our dependencies.
-
-For the **Gemfile**, go to the root directory of your project and run this command
-
-<CodeBlock language="bash" title="shell">
-{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/Gemfile`}
-</CodeBlock>
-
-This will download the Gemfile from the template.
-
-:::note
-If you created your project with Xcode 16, you need to update the Gemfile as it follows:
-
-```diff
--gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
-+gem 'cocoapods', '1.16.2'
-gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
--gem 'xcodeproj', '< 1.26.0'
-+gem 'xcodeproj', '1.27.0'
-```
-
-Xcode 16 generates a project in a slightly different ways from previous versions of Xcode, and you need the latest CocoaPods and Xcodeproj gems to make it work properly.
-:::
-
-Similarly, for the **Podfile**, go to the `ios` folder of your project and run
-
-<CodeBlock language="bash" title="shell">
-{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/ios/Podfile`}
-</CodeBlock>
-
-Please use the Community Template as a reference point for the <RNTemplateRepoLink href="template/Gemfile">Gemfile</RNTemplateRepoLink> and for the <RNTemplateRepoLink href="template/ios/Podfile">Podfile</RNTemplateRepoLink>.
-
-:::note
-Remember to change <RNTemplateRepoLink href="template/ios/Podfile#L17">this line</RNTemplateRepoLink>.
-:::
-
-Now, we need to run a couple of extra commands to install the Ruby gems and the Pods.
-Navigate to the `ios` folder and run the following commands:
-
-```sh
-bundle install
-bundle exec pod install
-```
-
-The first command will install the Ruby dependencies and the second command will actually integrate the React Native code in your application so that your iOS files can import the React Native headers.
-
-## 5. Writing the TypeScript Code
-
-Now we will actually modify the native iOS application to integrate React Native.
-
-The first bit of code we will write is the actual React Native code for the new screen that will be integrated into our application.
-
-### Create a `index.js` file
-
-First, create an empty `index.js` file in the root of your React Native project.
-
-`index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `import`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it.
-
-Our `index.js` should look as follows (here the <RNTemplateRepoLink href="template/index.js">Community template file as reference</RNTemplateRepoLink>):
-
-```js
-import {AppRegistry} from 'react-native';
-import App from './App';
-
-AppRegistry.registerComponent('HelloWorld', () => App);
-```
-
-### Create a `App.tsx` file
-
-Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX](<https://en.wikipedia.org/wiki/JSX_(JavaScript)>) expressions. It contains the root React Native component that we will integrate into our iOS application (<RNTemplateRepoLink href="template/App.tsx">link</RNTemplateRepoLink>):
-
-```tsx
-import React from 'react';
-import {
-  SafeAreaView,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  useColorScheme,
-  View,
-} from 'react-native';
-
-import {
-  Colors,
-  DebugInstructions,
-  Header,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
-function App(): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
-
-  return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundStyle.backgroundColor}
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
-        <View
-          style={{
-            backgroundColor: isDarkMode
-              ? Colors.black
-              : Colors.white,
-            padding: 24,
-          }}>
-          <Text style={styles.title}>Step One</Text>
-          <Text>
-            Edit <Text style={styles.bold}>App.tsx</Text> to
-            change this screen and see your edits.
-          </Text>
-          <Text style={styles.title}>See your changes</Text>
-          <ReloadInstructions />
-          <Text style={styles.title}>Debug</Text>
-          <DebugInstructions />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  title: {
-    fontSize: 24,
-    fontWeight: '600',
-  },
-  bold: {
-    fontWeight: '700',
-  },
-});
-
-export default App;
-```
-
-Here is the <RNTemplateRepoLink href="template/App.tsx">Community template file as reference</RNTemplateRepoLink>.
-
-## 5. Integrating with your iOS code
-
-We now need to add some native code in order to start the React Native runtime and tell it to render our React components.
-
-### Requirements
-
-React Native initialization is now unbound to any specific part of an iOS app.
-
-React Native can be initialized using a class called `RCTReactNativeFactory`, that takes care of handling the React Native lifecycle for you.
-
-Once the class is initialized, you can either start a React Native view providing a `UIWindow` object, or you can ask for the factory to generate a `UIView` that you can load in any `UIViewController.`
-
-In the following example, we will create a ViewController that can load a React Native view as it's `view`.
-
-#### Create the ReactViewController
-
-Create a new file from template (<kbd>⌘</kbd>+<kbd>N</kbd>) and choose the Cocoa Touch Class template.
-
-Make sure to select `UIViewController` as the "Subclass of" field.
-
-<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
-<TabItem value="objc">
-
-Now open the `ReactViewController.m` file and apply the following changes
-
-```diff title="ReactViewController.m"
-#import "ReactViewController.h"
-+#import <React/RCTBundleURLProvider.h>
-+#import <RCTReactNativeFactory.h>
-+#import <RCTDefaultReactNativeFactoryDelegate.h>
-+#import <RCTAppDependencyProvider.h>
-
-
-@interface ReactViewController ()
-
-@end
-
-+@interface ReactNativeFactoryDelegate: RCTDefaultReactNativeFactoryDelegate
-+@end
-
--@implementation ReactViewController
-+@implementation ReactViewController {
-+  RCTReactNativeFactory *_factory;
-+  id<RCTReactNativeFactoryDelegate> _factoryDelegate;
-+}
-
- - (void)viewDidLoad {
-     [super viewDidLoad];
-     // Do any additional setup after loading the view.
-+    _factoryDelegate = [ReactNativeFactoryDelegate new];
-+    _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new];
-+    _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate];
-+    self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"];
- }
-
-@end
-
-+@implementation ReactNativeFactoryDelegate
-+
-+- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
-+{
-+  return [self bundleURL];
-+}
-+
-+- (NSURL *)bundleURL
-+{
-+#if DEBUG
-+  return [RCTBundleURLProvider.sharedSettings jsBundleURLForBundleRoot:@"index"];
-+#else
-+  return [NSBundle.mainBundle URLForResource:@"main" withExtension:@"jsbundle"];
-+#endif
-+}
-
-@end
-
-```
-
-</TabItem>
-<TabItem value="swift">
-
-Now open the `ReactViewController.swift` file and apply the following changes
-
-```diff title="ReactViewController.swift"
-import UIKit
-+import React
-+import React_RCTAppDelegate
-+import ReactAppDependencyProvider
-
-class ReactViewController: UIViewController {
-+  var reactNativeFactory: RCTReactNativeFactory?
-+  var reactNativeFactoryDelegate: RCTReactNativeFactoryDelegate?
-
-  override func viewDidLoad() {
-    super.viewDidLoad()
-+    reactNativeFactoryDelegate = ReactNativeDelegate()
-+    reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider()
-+    reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!)
-+    view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld")
-
-  }
-}
-
-+class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {
-+    override func sourceURL(for bridge: RCTBridge) -> URL? {
-+      self.bundleURL()
-+    }
-+
-+    override func bundleURL() -> URL? {
-+      #if DEBUG
-+      RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
-+      #else
-+      Bundle.main.url(forResource: "main", withExtension: "jsbundle")
-+      #endif
-+    }
-+
-+}
-```
-
-</TabItem>
-</Tabs>
-
-#### Presenting a React Native view in a rootViewController
-
-Finally, we can present our React Native view. To do so, we need a new View Controller that can host a view in which we can load the JS content.
-We already have the initial `ViewController`, and we can make it present the `ReactViewController`. There are several ways to do so, depending on your app. For this example, we assume that you have a button that presents React Native modally.
-
-<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
-<TabItem value="objc">
-
-```diff title="ViewController.m"
-#import "ViewController.h"
-+#import "ReactViewController.h"
-
-@interface ViewController ()
-
-@end
-
-- @implementation ViewController
-+@implementation ViewController {
-+  ReactViewController *reactViewController;
-+}
-
- - (void)viewDidLoad {
-   [super viewDidLoad];
-   // Do any additional setup after loading the view.
-   self.view.backgroundColor = UIColor.systemBackgroundColor;
-+  UIButton *button = [UIButton new];
-+  [button setTitle:@"Open React Native" forState:UIControlStateNormal];
-+  [button setTitleColor:UIColor.systemBlueColor forState:UIControlStateNormal];
-+  [button setTitleColor:UIColor.blueColor forState:UIControlStateHighlighted];
-+  [button addTarget:self action:@selector(presentReactNative) forControlEvents:UIControlEventTouchUpInside];
-+  [self.view addSubview:button];
-
-+  button.translatesAutoresizingMaskIntoConstraints = NO;
-+  [NSLayoutConstraint activateConstraints:@[
-+    [button.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor],
-+    [button.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor],
-+    [button.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor],
-+    [button.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
-+  ]];
- }
-
-+- (void)presentReactNative
-+{
-+  if (reactViewController == NULL) {
-+    reactViewController = [ReactViewController new];
-+  }
-+  [self presentViewController:reactViewController animated:YES];
-+}
-
-@end
-```
-
-</TabItem>
-<TabItem value="swift">
-
-```diff title="ViewController.swift"
-import UIKit
-
-class ViewController: UIViewController {
-
-+  var reactViewController: ReactViewController?
-
-  override func viewDidLoad() {
-    super.viewDidLoad()
-    // Do any additional setup after loading the view.
-    self.view.backgroundColor = .systemBackground
-
-+    let button = UIButton()
-+    button.setTitle("Open React Native", for: .normal)
-+    button.setTitleColor(.systemBlue, for: .normal)
-+    button.setTitleColor(.blue, for: .highlighted)
-+    button.addAction(UIAction { [weak self] _ in
-+      guard let self else { return }
-+      if reactViewController == nil {
-+       reactViewController = ReactViewController()
-+      }
-+      present(reactViewController!, animated: true)
-+    }, for: .touchUpInside)
-+    self.view.addSubview(button)
-+
-+    button.translatesAutoresizingMaskIntoConstraints = false
-+    NSLayoutConstraint.activate([
-+      button.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
-+      button.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
-+      button.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
-+      button.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
-+    ])
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-Make sure to disable the Sandbox scripting. To achieve this, in Xcode, click on your app, then on build settings. Filter for script and set the `User Script Sandboxing` to `NO`. This step is needed to properly switch between the Debug and Release version of the [Hermes engine](https://github.com/facebook/hermes/blob/main/README.md) that we ship with React Native.
-
-![Disable Sandboxing](/docs/assets/disable-sandboxing.png)
-
-Finally, make sure to add the `UIViewControllerBasedStatusBarAppearance` key into your `Info.plist` file, with value of `NO`.
-
-![Disable UIViewControllerBasedStatusBarAppearance](/docs/assets/disable-UIViewControllerBasedStatusBarAppearance.png)
-
-## 6. Test your integration
-
-You have completed all the basic steps to integrate React Native with your application. Now we will start the [Metro bundler](https://metrobundler.dev/) to build your TypeScript application code into a bundle. Metro's HTTP server shares the bundle from `localhost` on your developer environment to a simulator or device. This allows for [hot reloading](https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading).
-
-First, you need to create a `metro.config.js` file in the root of your project as follows:
-
-```js
-const {getDefaultConfig} = require('@react-native/metro-config');
-module.exports = getDefaultConfig(__dirname);
-```
-
-You can checkout the <RNTemplateRepoLink href="template/metro.config.js">`metro.config.js` file</RNTemplateRepoLink> from the Community template file as reference.
-
-Then, you need to create a `.watchmanconfig` file in the root of your project. The file must contain an empty json object:
-
-```sh
-echo {} > .watchmanconfig
-```
-
-Once you have the configuration file in place, you can run the bundler. Run the following command in the root directory of your project:
-
-<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
-<TabItem value="npm">
-
-```shell
-npm start
-```
-
-</TabItem>
-<TabItem value="yarn">
-
-```shell
-yarn start
-```
-
-</TabItem>
-</Tabs>
-
-Now build and run your iOS app as normal.
-
-Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display:
-
-<center><img src="/docs/assets/EmbeddedAppIOS078.gif" width="300" /></center>
-
-### Creating a release build in Xcode
-
-You can use Xcode to create your release builds too! The only additional step is to add a script that is executed when the app is built to package your JS and images into the iOS application.
-
-1. In Xcode, select your application
-2. Click on `Build Phases`
-3. Click on the `+` in the top left corner and select `New Run Script Phase`
-4. Click on the `Run Script` line and rename the Script to `Bundle React Native code and images`
-5. Paste in the text box the following script
-
-```sh title="Build React Native code and image"
-set -e
-
-WITH_ENVIRONMENT="$REACT_NATIVE_PATH/scripts/xcode/with-environment.sh"
-REACT_NATIVE_XCODE="$REACT_NATIVE_PATH/scripts/react-native-xcode.sh"
-
-/bin/sh -c "$WITH_ENVIRONMENT $REACT_NATIVE_XCODE"
-```
-
-6. Drag and drop the script before the one called `[CP] Embed Pods Frameworks`.
-
-Now, if you build your app for Release, it will work as expected.
-
-## 7. Passing initial props to the React Native view
-
-In some case, you'd like to pass some information from the Native app to JavaScript. For example, you might want to pass the user id of the currently logged user to React Native, together with a token that can be used to retrieve information from a database.
-
-This is possible by using the `initialProperties` parameter of the `view(withModuleName:initialProperty)` overload of the `RCTReactNativeFactory` class. The following steps shows you how to do it.
-
-### Update the App.tsx file to read the initial properties.
-
-Open the `App.tsx` file and add the following code:
-
-```diff title="App.tsx"
-import {
-  Colors,
-  DebugInstructions,
-  Header,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
--function App(): React.JSX.Element {
-+function App(props): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
-
-  return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundStyle.backgroundColor}
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
--       <View
--         style={{
--           backgroundColor: isDarkMode
--             ? Colors.black
--             : Colors.white,
--           padding: 24,
--         }}>
--         <Text style={styles.title}>Step One</Text>
--         <Text>
--           Edit <Text style={styles.bold}>App.tsx</Text> to
--           change this screen and see your edits.
--         </Text>
--         <Text style={styles.title}>See your changes</Text>
--         <ReloadInstructions />
--         <Text style={styles.title}>Debug</Text>
--         <DebugInstructions />
-+         <Text style={styles.title}>UserID: {props.userID}</Text>
-+         <Text style={styles.title}>Token: {props.token}</Text>
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  title: {
-    fontSize: 24,
-    fontWeight: '600',
-+   marginLeft: 20,
-  },
-  bold: {
-    fontWeight: '700',
-  },
-});
-
-export default App;
-```
-
-These changes will tell React Native that your App component is now accepting some properties. The `RCTreactNativeFactory` will take care of passing them to the component when it's rendered.
-
-### Update the Native code to pass the initial properties to JavaScript.
-
-<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
-<TabItem value="objc">
-
-Modify the `ReactViewController.mm` to pass the initial properties to JavaScript.
-
-```diff title="ReactViewController.mm"
- - (void)viewDidLoad {
-   [super viewDidLoad];
-   // Do any additional setup after loading the view.
-
-   _factoryDelegate = [ReactNativeFactoryDelegate new];
-   _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new];
-   _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate];
--  self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"];
-+  self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld" initialProperties:@{
-+    @"userID": @"12345678",
-+    @"token": @"secretToken"
-+  }];
-}
-```
-
-</TabItem>
-<TabItem value="swift">
-
-Modify the `ReactViewController.swift` to pass the initial properties to the React Native view.
-
-```diff title="ReactViewController.swift"
-  override func viewDidLoad() {
-    super.viewDidLoad()
-    reactNativeFactoryDelegate = ReactNativeDelegate()
-    reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider()
-    reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!)
--   view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld")
-+   view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld" initialProperties: [
-+     "userID": "12345678",
-+     "token": "secretToken"
-+])
-
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-3. Run your app once again. You should see the following screen after you present the `ReactViewController`:
-
-<center>
-  <img src="/docs/assets/brownfield-with-initial-props.png" width="30%" height="30%"/>
-</center>
-
-## Now what?
-
-At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native.
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import constants from '@site/core/TabsConstants';
+import CodeBlock from '@theme/CodeBlock';
+import RNTemplateRepoLink from '@site/core/RNTemplateRepoLink';
+import {getTemplateBranchNameForCurrentVersion} from '@site/src/getTemplateBranchNameForCurrentVersion';
+
+## Key Concepts
+
+The keys to integrating React Native components into your iOS application are to:
+
+1. Set up the correct directory structure.
+2. Install the necessary NPM dependencies.
+3. Adding React Native to your Podfile configuration.
+4. Writing the TypeScript code for your first React Native screen.
+5. Integrate React Native with your iOS code using a `RCTRootView`.
+6. Testing your integration by running the bundler and seeing your app in action.
+
+## Using the Community Template
+
+While you follow this guide, we suggest you to use the [React Native Community Template](https://github.com/react-native-community/template/) as reference. The template contains a **minimal iOS app** and will help you understanding how to integrate React Native into an existing iOS app.
+
+## Prerequisites
+
+Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](getting-started-without-a-framework) to configure your development environment for building React Native apps for iOS.
+This guide also assumes you're familiar with the basics of iOS development such as creating a `UIViewController` and editing the `Podfile` file.
+
+### 1. Set up directory structure
+
+To ensure a smooth experience, create a new folder for your integrated React Native project, then **move your existing iOS project** to the `/ios` subfolder.
+
+## 2. Install NPM dependencies
+
+Go to the root directory and run the following command:
+
+<CodeBlock language="bash" title="shell">
+{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/package.json`}
+</CodeBlock>
+
+This will copy the `package.json` <RNTemplateRepoLink href="template/package.json">file from the Community template</RNTemplateRepoLink> to your project.
+
+Next, install the NPM packages by running:
+
+<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
+<TabItem value="npm">
+
+```shell
+npm install
+```
+
+</TabItem>
+<TabItem value="yarn">
+
+```shell
+yarn install
+```
+
+</TabItem>
+</Tabs>
+
+Installation process has created a new `node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
+
+Add `node_modules/` to your `.gitignore` file (here the <RNTemplateRepoLink href="template/_gitignore">Community default one</RNTemplateRepoLink>).
+
+### 3. Install Development tools
+
+### Command Line Tools for Xcode
+
+Install the Command Line Tools. Choose **Settings... (or Preferences...)** in the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.
+
+![Xcode Command Line Tools](/docs/assets/GettingStartedXcodeCommandLineTools.png)
+
+### CocoaPods
+
+[CocoaPods](https://cocoapods.org) is a package management tool for iOS and macOS development. We use it to add the actual React Native framework code locally into your current project.
+
+We recommend installing CocoaPods using [Homebrew](https://brew.sh/):
+
+```shell
+brew install cocoapods
+```
+
+## 4. Adding React Native to your app
+
+### Configuring CocoaPods
+
+To configure CocoaPods, we need two files:
+
+- A **Gemfile** that defines which Ruby dependencies we need.
+- A **Podfile** that defines how to properly install our dependencies.
+
+For the **Gemfile**, go to the root directory of your project and run this command
+
+<CodeBlock language="bash" title="shell">
+{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/Gemfile`}
+</CodeBlock>
+
+This will download the Gemfile from the template.
+
+:::note
+If you created your project with Xcode 16, you need to update the Gemfile as it follows:
+
+```diff
+-gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
++gem 'cocoapods', '1.16.2'
+gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
+-gem 'xcodeproj', '< 1.26.0'
++gem 'xcodeproj', '1.27.0'
+```
+
+Xcode 16 generates a project in a slightly different ways from previous versions of Xcode, and you need the latest CocoaPods and Xcodeproj gems to make it work properly.
+:::
+
+Similarly, for the **Podfile**, go to the `ios` folder of your project and run
+
+<CodeBlock language="bash" title="shell">
+{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/ios/Podfile`}
+</CodeBlock>
+
+Please use the Community Template as a reference point for the <RNTemplateRepoLink href="template/Gemfile">Gemfile</RNTemplateRepoLink> and for the <RNTemplateRepoLink href="template/ios/Podfile">Podfile</RNTemplateRepoLink>.
+
+:::note
+Remember to change <RNTemplateRepoLink href="template/ios/Podfile#L17">this line</RNTemplateRepoLink>.
+:::
+
+Now, we need to run a couple of extra commands to install the Ruby gems and the Pods.
+Navigate to the `ios` folder and run the following commands:
+
+```sh
+bundle install
+bundle exec pod install
+```
+
+The first command will install the Ruby dependencies and the second command will actually integrate the React Native code in your application so that your iOS files can import the React Native headers.
+
+## 5. Writing the TypeScript Code
+
+Now we will actually modify the native iOS application to integrate React Native.
+
+The first bit of code we will write is the actual React Native code for the new screen that will be integrated into our application.
+
+### Create a `index.js` file
+
+First, create an empty `index.js` file in the root of your React Native project.
+
+`index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `import`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it.
+
+Our `index.js` should look as follows (here the <RNTemplateRepoLink href="template/index.js">Community template file as reference</RNTemplateRepoLink>):
+
+```js
+import {AppRegistry} from 'react-native';
+import App from './App';
+
+AppRegistry.registerComponent('HelloWorld', () => App);
+```
+
+### Create a `App.tsx` file
+
+Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX](<https://en.wikipedia.org/wiki/JSX_(JavaScript)>) expressions. It contains the root React Native component that we will integrate into our iOS application (<RNTemplateRepoLink href="template/App.tsx">link</RNTemplateRepoLink>):
+
+```tsx
+import {type JSX} from 'react';
+import {
+  SafeAreaView,
+  ScrollView,
+  StatusBar,
+  StyleSheet,
+  Text,
+  useColorScheme,
+  View,
+} from 'react-native';
+
+import {
+  Colors,
+  DebugInstructions,
+  Header,
+  ReloadInstructions,
+} from 'react-native/Libraries/NewAppScreen';
+
+function App(): JSX.Element {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const backgroundStyle = {
+    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+  };
+
+  return (
+    <SafeAreaView style={backgroundStyle}>
+      <StatusBar
+        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
+        backgroundColor={backgroundStyle.backgroundColor}
+      />
+      <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        style={backgroundStyle}>
+        <Header />
+        <View
+          style={{
+            backgroundColor: isDarkMode
+              ? Colors.black
+              : Colors.white,
+            padding: 24,
+          }}>
+          <Text style={styles.title}>Step One</Text>
+          <Text>
+            Edit <Text style={styles.bold}>App.tsx</Text> to
+            change this screen and see your edits.
+          </Text>
+          <Text style={styles.title}>See your changes</Text>
+          <ReloadInstructions />
+          <Text style={styles.title}>Debug</Text>
+          <DebugInstructions />
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 24,
+    fontWeight: '600',
+  },
+  bold: {
+    fontWeight: '700',
+  },
+});
+
+export default App;
+```
+
+Here is the <RNTemplateRepoLink href="template/App.tsx">Community template file as reference</RNTemplateRepoLink>.
+
+## 5. Integrating with your iOS code
+
+We now need to add some native code in order to start the React Native runtime and tell it to render our React components.
+
+### Requirements
+
+React Native initialization is now unbound to any specific part of an iOS app.
+
+React Native can be initialized using a class called `RCTReactNativeFactory`, that takes care of handling the React Native lifecycle for you.
+
+Once the class is initialized, you can either start a React Native view providing a `UIWindow` object, or you can ask for the factory to generate a `UIView` that you can load in any `UIViewController.`
+
+In the following example, we will create a ViewController that can load a React Native view as it's `view`.
+
+#### Create the ReactViewController
+
+Create a new file from template (<kbd>⌘</kbd>+<kbd>N</kbd>) and choose the Cocoa Touch Class template.
+
+Make sure to select `UIViewController` as the "Subclass of" field.
+
+<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
+<TabItem value="objc">
+
+Now open the `ReactViewController.m` file and apply the following changes
+
+```diff title="ReactViewController.m"
+#import "ReactViewController.h"
++#import <React/RCTBundleURLProvider.h>
++#import <RCTReactNativeFactory.h>
++#import <RCTDefaultReactNativeFactoryDelegate.h>
++#import <RCTAppDependencyProvider.h>
+
+
+@interface ReactViewController ()
+
+@end
+
++@interface ReactNativeFactoryDelegate: RCTDefaultReactNativeFactoryDelegate
++@end
+
+-@implementation ReactViewController
++@implementation ReactViewController {
++  RCTReactNativeFactory *_factory;
++  id<RCTReactNativeFactoryDelegate> _factoryDelegate;
++}
+
+ - (void)viewDidLoad {
+     [super viewDidLoad];
+     // Do any additional setup after loading the view.
++    _factoryDelegate = [ReactNativeFactoryDelegate new];
++    _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new];
++    _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate];
++    self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"];
+ }
+
+@end
+
++@implementation ReactNativeFactoryDelegate
++
++- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
++{
++  return [self bundleURL];
++}
++
++- (NSURL *)bundleURL
++{
++#if DEBUG
++  return [RCTBundleURLProvider.sharedSettings jsBundleURLForBundleRoot:@"index"];
++#else
++  return [NSBundle.mainBundle URLForResource:@"main" withExtension:@"jsbundle"];
++#endif
++}
+
+@end
+
+```
+
+</TabItem>
+<TabItem value="swift">
+
+Now open the `ReactViewController.swift` file and apply the following changes
+
+```diff title="ReactViewController.swift"
+import UIKit
++import React
++import React_RCTAppDelegate
++import ReactAppDependencyProvider
+
+class ReactViewController: UIViewController {
++  var reactNativeFactory: RCTReactNativeFactory?
++  var reactNativeFactoryDelegate: RCTReactNativeFactoryDelegate?
+
+  override func viewDidLoad() {
+    super.viewDidLoad()
++    reactNativeFactoryDelegate = ReactNativeDelegate()
++    reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider()
++    reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!)
++    view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld")
+
+  }
+}
+
++class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {
++    override func sourceURL(for bridge: RCTBridge) -> URL? {
++      self.bundleURL()
++    }
++
++    override func bundleURL() -> URL? {
++      #if DEBUG
++      RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
++      #else
++      Bundle.main.url(forResource: "main", withExtension: "jsbundle")
++      #endif
++    }
++
++}
+```
+
+</TabItem>
+</Tabs>
+
+#### Presenting a React Native view in a rootViewController
+
+Finally, we can present our React Native view. To do so, we need a new View Controller that can host a view in which we can load the JS content.
+We already have the initial `ViewController`, and we can make it present the `ReactViewController`. There are several ways to do so, depending on your app. For this example, we assume that you have a button that presents React Native modally.
+
+<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
+<TabItem value="objc">
+
+```diff title="ViewController.m"
+#import "ViewController.h"
++#import "ReactViewController.h"
+
+@interface ViewController ()
+
+@end
+
+- @implementation ViewController
++@implementation ViewController {
++  ReactViewController *reactViewController;
++}
+
+ - (void)viewDidLoad {
+   [super viewDidLoad];
+   // Do any additional setup after loading the view.
+   self.view.backgroundColor = UIColor.systemBackgroundColor;
++  UIButton *button = [UIButton new];
++  [button setTitle:@"Open React Native" forState:UIControlStateNormal];
++  [button setTitleColor:UIColor.systemBlueColor forState:UIControlStateNormal];
++  [button setTitleColor:UIColor.blueColor forState:UIControlStateHighlighted];
++  [button addTarget:self action:@selector(presentReactNative) forControlEvents:UIControlEventTouchUpInside];
++  [self.view addSubview:button];
+
++  button.translatesAutoresizingMaskIntoConstraints = NO;
++  [NSLayoutConstraint activateConstraints:@[
++    [button.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor],
++    [button.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor],
++    [button.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor],
++    [button.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
++  ]];
+ }
+
++- (void)presentReactNative
++{
++  if (reactViewController == NULL) {
++    reactViewController = [ReactViewController new];
++  }
++  [self presentViewController:reactViewController animated:YES];
++}
+
+@end
+```
+
+</TabItem>
+<TabItem value="swift">
+
+```diff title="ViewController.swift"
+import UIKit
+
+class ViewController: UIViewController {
+
++  var reactViewController: ReactViewController?
+
+  override func viewDidLoad() {
+    super.viewDidLoad()
+    // Do any additional setup after loading the view.
+    self.view.backgroundColor = .systemBackground
+
++    let button = UIButton()
++    button.setTitle("Open React Native", for: .normal)
++    button.setTitleColor(.systemBlue, for: .normal)
++    button.setTitleColor(.blue, for: .highlighted)
++    button.addAction(UIAction { [weak self] _ in
++      guard let self else { return }
++      if reactViewController == nil {
++       reactViewController = ReactViewController()
++      }
++      present(reactViewController!, animated: true)
++    }, for: .touchUpInside)
++    self.view.addSubview(button)
++
++    button.translatesAutoresizingMaskIntoConstraints = false
++    NSLayoutConstraint.activate([
++      button.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
++      button.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
++      button.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
++      button.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
++    ])
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+Make sure to disable the Sandbox scripting. To achieve this, in Xcode, click on your app, then on build settings. Filter for script and set the `User Script Sandboxing` to `NO`. This step is needed to properly switch between the Debug and Release version of the [Hermes engine](https://github.com/facebook/hermes/blob/main/README.md) that we ship with React Native.
+
+![Disable Sandboxing](/docs/assets/disable-sandboxing.png)
+
+Finally, make sure to add the `UIViewControllerBasedStatusBarAppearance` key into your `Info.plist` file, with value of `NO`.
+
+![Disable UIViewControllerBasedStatusBarAppearance](/docs/assets/disable-UIViewControllerBasedStatusBarAppearance.png)
+
+## 6. Test your integration
+
+You have completed all the basic steps to integrate React Native with your application. Now we will start the [Metro bundler](https://metrobundler.dev/) to build your TypeScript application code into a bundle. Metro's HTTP server shares the bundle from `localhost` on your developer environment to a simulator or device. This allows for [hot reloading](https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading).
+
+First, you need to create a `metro.config.js` file in the root of your project as follows:
+
+```js
+const {getDefaultConfig} = require('@react-native/metro-config');
+module.exports = getDefaultConfig(__dirname);
+```
+
+You can checkout the <RNTemplateRepoLink href="template/metro.config.js">`metro.config.js` file</RNTemplateRepoLink> from the Community template file as reference.
+
+Then, you need to create a `.watchmanconfig` file in the root of your project. The file must contain an empty json object:
+
+```sh
+echo {} > .watchmanconfig
+```
+
+Once you have the configuration file in place, you can run the bundler. Run the following command in the root directory of your project:
+
+<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
+<TabItem value="npm">
+
+```shell
+npm start
+```
+
+</TabItem>
+<TabItem value="yarn">
+
+```shell
+yarn start
+```
+
+</TabItem>
+</Tabs>
+
+Now build and run your iOS app as normal.
+
+Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display:
+
+<center><img src="/docs/assets/EmbeddedAppIOS078.gif" width="300" /></center>
+
+### Creating a release build in Xcode
+
+You can use Xcode to create your release builds too! The only additional step is to add a script that is executed when the app is built to package your JS and images into the iOS application.
+
+1. In Xcode, select your application
+2. Click on `Build Phases`
+3. Click on the `+` in the top left corner and select `New Run Script Phase`
+4. Click on the `Run Script` line and rename the Script to `Bundle React Native code and images`
+5. Paste in the text box the following script
+
+```sh title="Build React Native code and image"
+set -e
+
+WITH_ENVIRONMENT="$REACT_NATIVE_PATH/scripts/xcode/with-environment.sh"
+REACT_NATIVE_XCODE="$REACT_NATIVE_PATH/scripts/react-native-xcode.sh"
+
+/bin/sh -c "$WITH_ENVIRONMENT $REACT_NATIVE_XCODE"
+```
+
+6. Drag and drop the script before the one called `[CP] Embed Pods Frameworks`.
+
+Now, if you build your app for Release, it will work as expected.
+
+## 7. Passing initial props to the React Native view
+
+In some case, you'd like to pass some information from the Native app to JavaScript. For example, you might want to pass the user id of the currently logged user to React Native, together with a token that can be used to retrieve information from a database.
+
+This is possible by using the `initialProperties` parameter of the `view(withModuleName:initialProperty)` overload of the `RCTReactNativeFactory` class. The following steps shows you how to do it.
+
+### Update the App.tsx file to read the initial properties.
+
+Open the `App.tsx` file and add the following code:
+
+```diff title="App.tsx"
+import {
+  Colors,
+  DebugInstructions,
+  Header,
+  ReloadInstructions,
+} from 'react-native/Libraries/NewAppScreen';
+
+-function App(): React.JSX.Element {
++function App(props): React.JSX.Element {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const backgroundStyle = {
+    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+  };
+
+  return (
+    <SafeAreaView style={backgroundStyle}>
+      <StatusBar
+        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
+        backgroundColor={backgroundStyle.backgroundColor}
+      />
+      <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        style={backgroundStyle}>
+        <Header />
+-       <View
+-         style={{
+-           backgroundColor: isDarkMode
+-             ? Colors.black
+-             : Colors.white,
+-           padding: 24,
+-         }}>
+-         <Text style={styles.title}>Step One</Text>
+-         <Text>
+-           Edit <Text style={styles.bold}>App.tsx</Text> to
+-           change this screen and see your edits.
+-         </Text>
+-         <Text style={styles.title}>See your changes</Text>
+-         <ReloadInstructions />
+-         <Text style={styles.title}>Debug</Text>
+-         <DebugInstructions />
++         <Text style={styles.title}>UserID: {props.userID}</Text>
++         <Text style={styles.title}>Token: {props.token}</Text>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 24,
+    fontWeight: '600',
++   marginLeft: 20,
+  },
+  bold: {
+    fontWeight: '700',
+  },
+});
+
+export default App;
+```
+
+These changes will tell React Native that your App component is now accepting some properties. The `RCTreactNativeFactory` will take care of passing them to the component when it's rendered.
+
+### Update the Native code to pass the initial properties to JavaScript.
+
+<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
+<TabItem value="objc">
+
+Modify the `ReactViewController.mm` to pass the initial properties to JavaScript.
+
+```diff title="ReactViewController.mm"
+ - (void)viewDidLoad {
+   [super viewDidLoad];
+   // Do any additional setup after loading the view.
+
+   _factoryDelegate = [ReactNativeFactoryDelegate new];
+   _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new];
+   _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate];
+-  self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"];
++  self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld" initialProperties:@{
++    @"userID": @"12345678",
++    @"token": @"secretToken"
++  }];
+}
+```
+
+</TabItem>
+<TabItem value="swift">
+
+Modify the `ReactViewController.swift` to pass the initial properties to the React Native view.
+
+```diff title="ReactViewController.swift"
+  override func viewDidLoad() {
+    super.viewDidLoad()
+    reactNativeFactoryDelegate = ReactNativeDelegate()
+    reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider()
+    reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!)
+-   view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld")
++   view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld" initialProperties: [
++     "userID": "12345678",
++     "token": "secretToken"
++])
+
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+3. Run your app once again. You should see the following screen after you present the `ReactViewController`:
+
+<center>
+  <img src="/docs/assets/brownfield-with-initial-props.png" width="30%" height="30%"/>
+</center>
+
+## Now what?
+
+At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native.
diff --git a/website/versioned_docs/version-0.83/_integration-with-existing-apps-kotlin.md b/website/versioned_docs/version-0.83/_integration-with-existing-apps-kotlin.md
index 23414c63a3b..c5f7d6bc4a6 100644
--- a/website/versioned_docs/version-0.83/_integration-with-existing-apps-kotlin.md
+++ b/website/versioned_docs/version-0.83/_integration-with-existing-apps-kotlin.md
@@ -1,511 +1,510 @@
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import constants from '@site/core/TabsConstants';
-import CodeBlock from '@theme/CodeBlock';
-import RNTemplateRepoLink from '@site/core/RNTemplateRepoLink';
-import {getTemplateBranchNameForCurrentVersion} from '@site/src/getTemplateBranchNameForCurrentVersion';
-
-## Key Concepts
-
-The keys to integrating React Native components into your Android application are to:
-
-1. Set up the correct directory structure.
-2. Install the necessary NPM dependencies.
-3. Adding React Native to your Gradle configuration.
-4. Writing the TypeScript code for your first React Native screen.
-5. Integrate React Native with your Android code using a ReactActivity.
-6. Testing your integration by running the bundler and seeing your app in action.
-
-## Using the Community Template
-
-While you follow this guide, we suggest you to use the [React Native Community Template](https://github.com/react-native-community/template/) as reference. The template contains a **minimal Android app** and will help you understanding how to integrate React Native into an existing Android app.
-
-## Prerequisites
-
-Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](getting-started-without-a-framework) to configure your development environment for building React Native apps for Android.
-This guide also assumes you're familiar with the basics of Android development such as creating Activities and editing the `AndroidManifest.xml` file.
-
-## 1. Set up directory structure
-
-To ensure a smooth experience, create a new folder for your integrated React Native project, then **move your existing Android project** to the `/android` subfolder.
-
-## 2. Install NPM dependencies
-
-Go to the root directory and run the following command:
-
-<CodeBlock language="bash" title="shell">
-{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/package.json`}
-</CodeBlock>
-
-This will copy the `package.json` <RNTemplateRepoLink href="template/package.json">file from the Community template</RNTemplateRepoLink> to your project.
-
-Next, install the NPM packages by running:
-
-<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
-<TabItem value="npm">
-
-```shell
-npm install
-```
-
-</TabItem>
-<TabItem value="yarn">
-
-```shell
-yarn install
-```
-
-</TabItem>
-</Tabs>
-
-Installation process has created a new `node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
-
-Add `node_modules/` to your `.gitignore` file (here the <RNTemplateRepoLink href="template/_gitignore">Community default one</RNTemplateRepoLink>).
-
-## 3. Adding React Native to your app
-
-### Configuring Gradle
-
-React Native uses the React Native Gradle Plugin to configure your dependencies and project setup.
-
-First, let's edit your `settings.gradle` file by adding those lines (as suggested from the <RNTemplateRepoLink href="template/android/settings.gradle">Community template</RNTemplateRepoLink>):
-
-```groovy
-// Configures the React Native Gradle Settings plugin used for autolinking
-pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
-plugins { id("com.facebook.react.settings") }
-extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
-// If using .gradle.kts files:
-// extensions.configure<com.facebook.react.ReactSettingsExtension> { autolinkLibrariesFromCommand() }
-includeBuild("../node_modules/@react-native/gradle-plugin")
-
-// Include your existing Gradle modules here.
-// include(":app")
-```
-
-Then you need to open your top level `build.gradle` and include this line (as suggested from the <RNTemplateRepoLink href="template/android/build.gradle">Community template</RNTemplateRepoLink>):
-
-```diff
-buildscript {
-    repositories {
-        google()
-        mavenCentral()
-    }
-    dependencies {
-        classpath("com.android.tools.build:gradle:7.3.1")
-+       classpath("com.facebook.react:react-native-gradle-plugin")
-    }
-}
-```
-
-This makes sure the React Native Gradle Plugin (RNGP) is available inside your project.
-Finally, add those lines inside your Applications's `build.gradle` file (it's a different `build.gradle` file usually inside your `app` folder - you can use the <RNTemplateRepoLink href="template/android/build.gradle">Community template file as reference</RNTemplateRepoLink>):
-
-```diff
-apply plugin: "com.android.application"
-+apply plugin: "com.facebook.react"
-
-repositories {
-    mavenCentral()
-}
-
-dependencies {
-    // Other dependencies here
-+   // Note: we intentionally don't specify the version number here as RNGP will take care of it.
-+   // If you don't use the RNGP, you'll have to specify version manually.
-+   implementation("com.facebook.react:react-android")
-+   implementation("com.facebook.react:hermes-android")
-}
-
-+react {
-+   // Needed to enable Autolinking - https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
-+   autolinkLibrariesWithApp()
-+}
-```
-
-Finally, open your application `gradle.properties` files and add the following line (here the <RNTemplateRepoLink href="template/android/gradle.properties">Community template file as reference</RNTemplateRepoLink>):
-
-```diff
-+reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
-+newArchEnabled=true
-+hermesEnabled=true
-```
-
-### Configuring your manifest
-
-First, make sure you have the Internet permission in your `AndroidManifest.xml`:
-
-```diff
-<manifest xmlns:android="http://schemas.android.com/apk/res/android">
-
-+   <uses-permission android:name="android.permission.INTERNET" />
-
-    <application
-      android:name=".MainApplication">
-    </application>
-</manifest>
-```
-
-Then you need to enable [cleartext traffic](https://developer.android.com/training/articles/security-config#CleartextTrafficPermitted) in your **debug** `AndroidManifest.xml`:
-
-```diff
-<?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools">
-
-    <application
-+       android:usesCleartextTraffic="true"
-+       tools:targetApi="28"
-    />
-</manifest>
-```
-
-As usual, here the AndroidManifest.xml file from the Community template to use as a reference: <RNTemplateRepoLink href="template/android/app/src/main/AndroidManifest.xml">main</RNTemplateRepoLink> and <RNTemplateRepoLink href="template/android/app/src/debug/AndroidManifest.xml">debug</RNTemplateRepoLink>.
-
-This is needed as your application will communicate with your local bundler, [Metro](https://metrobundler.dev/), via HTTP.
-
-Make sure you add this only to your **debug** manifest.
-
-## 4. Writing the TypeScript Code
-
-Now we will actually modify the native Android application to integrate React Native.
-
-The first bit of code we will write is the actual React Native code for the new screen that will be integrated into our application.
-
-### Create a `index.js` file
-
-First, create an empty `index.js` file in the root of your React Native project.
-
-`index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `import`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it.
-
-Our index.js should look as follows (here the <RNTemplateRepoLink href="template/index.js">Community template file as reference</RNTemplateRepoLink>):
-
-```js
-import {AppRegistry} from 'react-native';
-import App from './App';
-
-AppRegistry.registerComponent('HelloWorld', () => App);
-```
-
-### Create a `App.tsx` file
-
-Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX](<https://en.wikipedia.org/wiki/JSX_(JavaScript)>) expressions. It contains the root React Native component that we will integrate into our Android application (<RNTemplateRepoLink href="template/App.tsx">link</RNTemplateRepoLink>):
-
-```tsx
-import React from 'react';
-import {
-  SafeAreaView,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  useColorScheme,
-  View,
-} from 'react-native';
-
-import {
-  Colors,
-  DebugInstructions,
-  Header,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
-function App(): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
-
-  return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundStyle.backgroundColor}
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
-        <View
-          style={{
-            backgroundColor: isDarkMode
-              ? Colors.black
-              : Colors.white,
-            padding: 24,
-          }}>
-          <Text style={styles.title}>Step One</Text>
-          <Text>
-            Edit <Text style={styles.bold}>App.tsx</Text> to
-            change this screen and see your edits.
-          </Text>
-          <Text style={styles.title}>See your changes</Text>
-          <ReloadInstructions />
-          <Text style={styles.title}>Debug</Text>
-          <DebugInstructions />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  title: {
-    fontSize: 24,
-    fontWeight: '600',
-  },
-  bold: {
-    fontWeight: '700',
-  },
-});
-
-export default App;
-```
-
-Here is the <RNTemplateRepoLink href="template/App.tsx">Community template file as reference</RNTemplateRepoLink>.
-
-## 5. Integrating with your Android code
-
-We now need to add some native code in order to start the React Native runtime and tell it to render our React components.
-
-### Updating your Application class
-
-First, we need to update your `Application` class to properly initialize React Native as follows:
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-
-<TabItem value="java">
-
-```diff
-package <your-package-here>;
-
-import android.app.Application;
-+import com.facebook.react.PackageList;
-+import com.facebook.react.ReactApplication;
-+import com.facebook.react.ReactHost;
-+import com.facebook.react.ReactNativeHost;
-+import com.facebook.react.ReactPackage;
-+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
-+import com.facebook.react.defaults.DefaultReactHost;
-+import com.facebook.react.defaults.DefaultReactNativeHost;
-+import com.facebook.soloader.SoLoader;
-+import com.facebook.react.soloader.OpenSourceMergedSoMapping
-+import java.util.List;
-
--class MainApplication extends Application {
-+class MainApplication extends Application implements ReactApplication {
-+ @Override
-+ public ReactNativeHost getReactNativeHost() {
-+   return new DefaultReactNativeHost(this) {
-+     @Override
-+     protected List<ReactPackage> getPackages() { return new PackageList(this).getPackages(); }
-+     @Override
-+     protected String getJSMainModuleName() { return "index"; }
-+     @Override
-+     public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; }
-+     @Override
-+     protected boolean isNewArchEnabled() { return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; }
-+     @Override
-+     protected Boolean isHermesEnabled() { return BuildConfig.IS_HERMES_ENABLED; }
-+   };
-+ }
-
-+ @Override
-+ public ReactHost getReactHost() {
-+   return DefaultReactHost.getDefaultReactHost(getApplicationContext(), getReactNativeHost());
-+ }
-
-  @Override
-  public void onCreate() {
-    super.onCreate();
-+   SoLoader.init(this, OpenSourceMergedSoMapping);
-+   if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
-+     DefaultNewArchitectureEntryPoint.load();
-+   }
-  }
-}
-```
-
-</TabItem>
-
-<TabItem value="kotlin">
-
-```diff
-// package <your-package-here>
-
-import android.app.Application
-+import com.facebook.react.PackageList
-+import com.facebook.react.ReactApplication
-+import com.facebook.react.ReactHost
-+import com.facebook.react.ReactNativeHost
-+import com.facebook.react.ReactPackage
-+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
-+import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
-+import com.facebook.react.defaults.DefaultReactNativeHost
-+import com.facebook.soloader.SoLoader
-+import com.facebook.react.soloader.OpenSourceMergedSoMapping
-
--class MainApplication : Application() {
-+class MainApplication : Application(), ReactApplication {
-
-+ override val reactNativeHost: ReactNativeHost =
-+      object : DefaultReactNativeHost(this) {
-+        override fun getPackages(): List<ReactPackage> = PackageList(this).packages
-+        override fun getJSMainModuleName(): String = "index"
-+        override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
-+        override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
-+        override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
-+      }
-
-+ override val reactHost: ReactHost
-+   get() = getDefaultReactHost(applicationContext, reactNativeHost)
-
-  override fun onCreate() {
-    super.onCreate()
-+   SoLoader.init(this, OpenSourceMergedSoMapping)
-+   if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
-+     load()
-+   }
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-As usual, here the <RNTemplateRepoLink href="template/android/app/src/main/java/com/helloworld/MainApplication.kt">`MainApplication.kt` Community template file as reference</RNTemplateRepoLink>.
-
-#### Creating a `ReactActivity`
-
-Finally, we need to create a new `Activity` that will extend `ReactActivity` and host the React Native code. This activity will be responsible for starting the React Native runtime and rendering the React component.
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-
-<TabItem value="java">
-
-```java
-// package <your-package-here>;
-
-import com.facebook.react.ReactActivity;
-import com.facebook.react.ReactActivityDelegate;
-import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
-import com.facebook.react.defaults.DefaultReactActivityDelegate;
-
-public class MyReactActivity extends ReactActivity {
-
-    @Override
-    protected String getMainComponentName() {
-        return "HelloWorld";
-    }
-
-    @Override
-    protected ReactActivityDelegate createReactActivityDelegate() {
-        return new DefaultReactActivityDelegate(this, getMainComponentName(), DefaultNewArchitectureEntryPoint.getFabricEnabled());
-    }
-}
-```
-
-</TabItem>
-
-<TabItem value="kotlin">
-
-```kotlin
-// package <your-package-here>
-
-import com.facebook.react.ReactActivity
-import com.facebook.react.ReactActivityDelegate
-import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
-import com.facebook.react.defaults.DefaultReactActivityDelegate
-
-class MyReactActivity : ReactActivity() {
-
-    override fun getMainComponentName(): String = "HelloWorld"
-
-    override fun createReactActivityDelegate(): ReactActivityDelegate =
-        DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
-}
-```
-
-</TabItem>
-</Tabs>
-
-As usual, here the <RNTemplateRepoLink href="template/android/app/src/main/java/com/helloworld/MainActivity.kt">`MainActivity.kt` Community template file as reference</RNTemplateRepoLink>.
-
-Whenever you create a new Activity, you need to add it to your `AndroidManifest.xml` file. You also need set the theme of `MyReactActivity` to `Theme.AppCompat.Light.NoActionBar` (or to any non-ActionBar theme) as otherwise your application will render an ActionBar on top of your React Native screen:
-
-```diff
-<manifest xmlns:android="http://schemas.android.com/apk/res/android">
-
-    <uses-permission android:name="android.permission.INTERNET" />
-
-    <application
-      android:name=".MainApplication">
-
-+     <activity
-+       android:name=".MyReactActivity"
-+       android:label="@string/app_name"
-+       android:theme="@style/Theme.AppCompat.Light.NoActionBar">
-+     </activity>
-    </application>
-</manifest>
-```
-
-Now your activity is ready to run some JavaScript code.
-
-## 6. Test your integration
-
-You have completed all the basic steps to integrate React Native with your application. Now we will start the [Metro bundler](https://metrobundler.dev/) to build your TypeScript application code into a bundle. Metro's HTTP server shares the bundle from `localhost` on your developer environment to a simulator or device. This allows for [hot reloading](https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading).
-
-First, you need to create a `metro.config.js` file in the root of your project as follows:
-
-```js
-const {getDefaultConfig} = require('@react-native/metro-config');
-module.exports = getDefaultConfig(__dirname);
-```
-
-You can checkout the <RNTemplateRepoLink href="template/metro.config.js">`metro.config.js` file</RNTemplateRepoLink> from the Community template file as reference.
-
-Once you have the configuration file in place, you can run the bundler. Run the following command in the root directory of your project:
-
-<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
-<TabItem value="npm">
-
-```shell
-npm start
-```
-
-</TabItem>
-<TabItem value="yarn">
-
-```shell
-yarn start
-```
-
-</TabItem>
-</Tabs>
-
-Now build and run your Android app as normal.
-
-Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display:
-
-<center><img src="/docs/assets/EmbeddedAppAndroidVideo.gif" width="300" /></center>
-
-### Creating a release build in Android Studio
-
-You can use Android Studio to create your release builds too! It’s as quick as creating release builds of your previously-existing native Android app.
-
-The React Native Gradle Plugin will take care of bundling the JS code inside your APK/App Bundle.
-
-If you're not using Android Studio, you can create a release build with:
-
-```
-cd android
-# For a Release APK
-./gradlew :app:assembleRelease
-# For a Release AAB
-./gradlew :app:bundleRelease
-```
-
-### Now what?
-
-At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native.
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import constants from '@site/core/TabsConstants';
+import CodeBlock from '@theme/CodeBlock';
+import RNTemplateRepoLink from '@site/core/RNTemplateRepoLink';
+import {getTemplateBranchNameForCurrentVersion} from '@site/src/getTemplateBranchNameForCurrentVersion';
+
+## Key Concepts
+
+The keys to integrating React Native components into your Android application are to:
+
+1. Set up the correct directory structure.
+2. Install the necessary NPM dependencies.
+3. Adding React Native to your Gradle configuration.
+4. Writing the TypeScript code for your first React Native screen.
+5. Integrate React Native with your Android code using a ReactActivity.
+6. Testing your integration by running the bundler and seeing your app in action.
+
+## Using the Community Template
+
+While you follow this guide, we suggest you to use the [React Native Community Template](https://github.com/react-native-community/template/) as reference. The template contains a **minimal Android app** and will help you understanding how to integrate React Native into an existing Android app.
+
+## Prerequisites
+
+Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](getting-started-without-a-framework) to configure your development environment for building React Native apps for Android.
+This guide also assumes you're familiar with the basics of Android development such as creating Activities and editing the `AndroidManifest.xml` file.
+
+## 1. Set up directory structure
+
+To ensure a smooth experience, create a new folder for your integrated React Native project, then **move your existing Android project** to the `/android` subfolder.
+
+## 2. Install NPM dependencies
+
+Go to the root directory and run the following command:
+
+<CodeBlock language="bash" title="shell">
+{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/package.json`}
+</CodeBlock>
+
+This will copy the `package.json` <RNTemplateRepoLink href="template/package.json">file from the Community template</RNTemplateRepoLink> to your project.
+
+Next, install the NPM packages by running:
+
+<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
+<TabItem value="npm">
+
+```shell
+npm install
+```
+
+</TabItem>
+<TabItem value="yarn">
+
+```shell
+yarn install
+```
+
+</TabItem>
+</Tabs>
+
+Installation process has created a new `node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
+
+Add `node_modules/` to your `.gitignore` file (here the <RNTemplateRepoLink href="template/_gitignore">Community default one</RNTemplateRepoLink>).
+
+## 3. Adding React Native to your app
+
+### Configuring Gradle
+
+React Native uses the React Native Gradle Plugin to configure your dependencies and project setup.
+
+First, let's edit your `settings.gradle` file by adding those lines (as suggested from the <RNTemplateRepoLink href="template/android/settings.gradle">Community template</RNTemplateRepoLink>):
+
+```groovy
+// Configures the React Native Gradle Settings plugin used for autolinking
+pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
+plugins { id("com.facebook.react.settings") }
+extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
+// If using .gradle.kts files:
+// extensions.configure<com.facebook.react.ReactSettingsExtension> { autolinkLibrariesFromCommand() }
+includeBuild("../node_modules/@react-native/gradle-plugin")
+
+// Include your existing Gradle modules here.
+// include(":app")
+```
+
+Then you need to open your top level `build.gradle` and include this line (as suggested from the <RNTemplateRepoLink href="template/android/build.gradle">Community template</RNTemplateRepoLink>):
+
+```diff
+buildscript {
+    repositories {
+        google()
+        mavenCentral()
+    }
+    dependencies {
+        classpath("com.android.tools.build:gradle:7.3.1")
++       classpath("com.facebook.react:react-native-gradle-plugin")
+    }
+}
+```
+
+This makes sure the React Native Gradle Plugin (RNGP) is available inside your project.
+Finally, add those lines inside your Applications's `build.gradle` file (it's a different `build.gradle` file usually inside your `app` folder - you can use the <RNTemplateRepoLink href="template/android/build.gradle">Community template file as reference</RNTemplateRepoLink>):
+
+```diff
+apply plugin: "com.android.application"
++apply plugin: "com.facebook.react"
+
+repositories {
+    mavenCentral()
+}
+
+dependencies {
+    // Other dependencies here
++   // Note: we intentionally don't specify the version number here as RNGP will take care of it.
++   // If you don't use the RNGP, you'll have to specify version manually.
++   implementation("com.facebook.react:react-android")
++   implementation("com.facebook.react:hermes-android")
+}
+
++react {
++   // Needed to enable Autolinking - https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
++   autolinkLibrariesWithApp()
++}
+```
+
+Finally, open your application `gradle.properties` files and add the following line (here the <RNTemplateRepoLink href="template/android/gradle.properties">Community template file as reference</RNTemplateRepoLink>):
+
+```diff
++reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
++newArchEnabled=true
++hermesEnabled=true
+```
+
+### Configuring your manifest
+
+First, make sure you have the Internet permission in your `AndroidManifest.xml`:
+
+```diff
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
++   <uses-permission android:name="android.permission.INTERNET" />
+
+    <application
+      android:name=".MainApplication">
+    </application>
+</manifest>
+```
+
+Then you need to enable [cleartext traffic](https://developer.android.com/training/articles/security-config#CleartextTrafficPermitted) in your **debug** `AndroidManifest.xml`:
+
+```diff
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <application
++       android:usesCleartextTraffic="true"
++       tools:targetApi="28"
+    />
+</manifest>
+```
+
+As usual, here the AndroidManifest.xml file from the Community template to use as a reference: <RNTemplateRepoLink href="template/android/app/src/main/AndroidManifest.xml">main</RNTemplateRepoLink> and <RNTemplateRepoLink href="template/android/app/src/debug/AndroidManifest.xml">debug</RNTemplateRepoLink>.
+
+This is needed as your application will communicate with your local bundler, [Metro](https://metrobundler.dev/), via HTTP.
+
+Make sure you add this only to your **debug** manifest.
+
+## 4. Writing the TypeScript Code
+
+Now we will actually modify the native Android application to integrate React Native.
+
+The first bit of code we will write is the actual React Native code for the new screen that will be integrated into our application.
+
+### Create a `index.js` file
+
+First, create an empty `index.js` file in the root of your React Native project.
+
+`index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `import`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it.
+
+Our index.js should look as follows (here the <RNTemplateRepoLink href="template/index.js">Community template file as reference</RNTemplateRepoLink>):
+
+```js
+import {AppRegistry} from 'react-native';
+import App from './App';
+
+AppRegistry.registerComponent('HelloWorld', () => App);
+```
+
+### Create a `App.tsx` file
+
+Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX](<https://en.wikipedia.org/wiki/JSX_(JavaScript)>) expressions. It contains the root React Native component that we will integrate into our Android application (<RNTemplateRepoLink href="template/App.tsx">link</RNTemplateRepoLink>):
+
+```tsx
+import {type JSX} from 'react';
+import {
+  SafeAreaView,
+  ScrollView,
+  StatusBar,
+  StyleSheet,
+  Text,
+  useColorScheme,
+  View,
+} from 'react-native';
+import {
+  Colors,
+  DebugInstructions,
+  Header,
+  ReloadInstructions,
+} from 'react-native/Libraries/NewAppScreen';
+
+function App(): JSX.Element {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const backgroundStyle = {
+    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+  };
+
+  return (
+    <SafeAreaView style={backgroundStyle}>
+      <StatusBar
+        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
+        backgroundColor={backgroundStyle.backgroundColor}
+      />
+      <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        style={backgroundStyle}>
+        <Header />
+        <View
+          style={{
+            backgroundColor: isDarkMode
+              ? Colors.black
+              : Colors.white,
+            padding: 24,
+          }}>
+          <Text style={styles.title}>Step One</Text>
+          <Text>
+            Edit <Text style={styles.bold}>App.tsx</Text> to
+            change this screen and see your edits.
+          </Text>
+          <Text style={styles.title}>See your changes</Text>
+          <ReloadInstructions />
+          <Text style={styles.title}>Debug</Text>
+          <DebugInstructions />
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 24,
+    fontWeight: '600',
+  },
+  bold: {
+    fontWeight: '700',
+  },
+});
+
+export default App;
+```
+
+Here is the <RNTemplateRepoLink href="template/App.tsx">Community template file as reference</RNTemplateRepoLink>.
+
+## 5. Integrating with your Android code
+
+We now need to add some native code in order to start the React Native runtime and tell it to render our React components.
+
+### Updating your Application class
+
+First, we need to update your `Application` class to properly initialize React Native as follows:
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+
+<TabItem value="java">
+
+```diff
+package <your-package-here>;
+
+import android.app.Application;
++import com.facebook.react.PackageList;
++import com.facebook.react.ReactApplication;
++import com.facebook.react.ReactHost;
++import com.facebook.react.ReactNativeHost;
++import com.facebook.react.ReactPackage;
++import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
++import com.facebook.react.defaults.DefaultReactHost;
++import com.facebook.react.defaults.DefaultReactNativeHost;
++import com.facebook.soloader.SoLoader;
++import com.facebook.react.soloader.OpenSourceMergedSoMapping
++import java.util.List;
+
+-class MainApplication extends Application {
++class MainApplication extends Application implements ReactApplication {
++ @Override
++ public ReactNativeHost getReactNativeHost() {
++   return new DefaultReactNativeHost(this) {
++     @Override
++     protected List<ReactPackage> getPackages() { return new PackageList(this).getPackages(); }
++     @Override
++     protected String getJSMainModuleName() { return "index"; }
++     @Override
++     public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; }
++     @Override
++     protected boolean isNewArchEnabled() { return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; }
++     @Override
++     protected Boolean isHermesEnabled() { return BuildConfig.IS_HERMES_ENABLED; }
++   };
++ }
+
++ @Override
++ public ReactHost getReactHost() {
++   return DefaultReactHost.getDefaultReactHost(getApplicationContext(), getReactNativeHost());
++ }
+
+  @Override
+  public void onCreate() {
+    super.onCreate();
++   SoLoader.init(this, OpenSourceMergedSoMapping);
++   if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
++     DefaultNewArchitectureEntryPoint.load();
++   }
+  }
+}
+```
+
+</TabItem>
+
+<TabItem value="kotlin">
+
+```diff
+// package <your-package-here>
+
+import android.app.Application
++import com.facebook.react.PackageList
++import com.facebook.react.ReactApplication
++import com.facebook.react.ReactHost
++import com.facebook.react.ReactNativeHost
++import com.facebook.react.ReactPackage
++import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
++import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
++import com.facebook.react.defaults.DefaultReactNativeHost
++import com.facebook.soloader.SoLoader
++import com.facebook.react.soloader.OpenSourceMergedSoMapping
+
+-class MainApplication : Application() {
++class MainApplication : Application(), ReactApplication {
+
++ override val reactNativeHost: ReactNativeHost =
++      object : DefaultReactNativeHost(this) {
++        override fun getPackages(): List<ReactPackage> = PackageList(this).packages
++        override fun getJSMainModuleName(): String = "index"
++        override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
++        override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
++        override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
++      }
+
++ override val reactHost: ReactHost
++   get() = getDefaultReactHost(applicationContext, reactNativeHost)
+
+  override fun onCreate() {
+    super.onCreate()
++   SoLoader.init(this, OpenSourceMergedSoMapping)
++   if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
++     load()
++   }
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+As usual, here the <RNTemplateRepoLink href="template/android/app/src/main/java/com/helloworld/MainApplication.kt">`MainApplication.kt` Community template file as reference</RNTemplateRepoLink>.
+
+#### Creating a `ReactActivity`
+
+Finally, we need to create a new `Activity` that will extend `ReactActivity` and host the React Native code. This activity will be responsible for starting the React Native runtime and rendering the React component.
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+
+<TabItem value="java">
+
+```java
+// package <your-package-here>;
+
+import com.facebook.react.ReactActivity;
+import com.facebook.react.ReactActivityDelegate;
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
+import com.facebook.react.defaults.DefaultReactActivityDelegate;
+
+public class MyReactActivity extends ReactActivity {
+
+    @Override
+    protected String getMainComponentName() {
+        return "HelloWorld";
+    }
+
+    @Override
+    protected ReactActivityDelegate createReactActivityDelegate() {
+        return new DefaultReactActivityDelegate(this, getMainComponentName(), DefaultNewArchitectureEntryPoint.getFabricEnabled());
+    }
+}
+```
+
+</TabItem>
+
+<TabItem value="kotlin">
+
+```kotlin
+// package <your-package-here>
+
+import com.facebook.react.ReactActivity
+import com.facebook.react.ReactActivityDelegate
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
+import com.facebook.react.defaults.DefaultReactActivityDelegate
+
+class MyReactActivity : ReactActivity() {
+
+    override fun getMainComponentName(): String = "HelloWorld"
+
+    override fun createReactActivityDelegate(): ReactActivityDelegate =
+        DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
+}
+```
+
+</TabItem>
+</Tabs>
+
+As usual, here the <RNTemplateRepoLink href="template/android/app/src/main/java/com/helloworld/MainActivity.kt">`MainActivity.kt` Community template file as reference</RNTemplateRepoLink>.
+
+Whenever you create a new Activity, you need to add it to your `AndroidManifest.xml` file. You also need set the theme of `MyReactActivity` to `Theme.AppCompat.Light.NoActionBar` (or to any non-ActionBar theme) as otherwise your application will render an ActionBar on top of your React Native screen:
+
+```diff
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <uses-permission android:name="android.permission.INTERNET" />
+
+    <application
+      android:name=".MainApplication">
+
++     <activity
++       android:name=".MyReactActivity"
++       android:label="@string/app_name"
++       android:theme="@style/Theme.AppCompat.Light.NoActionBar">
++     </activity>
+    </application>
+</manifest>
+```
+
+Now your activity is ready to run some JavaScript code.
+
+## 6. Test your integration
+
+You have completed all the basic steps to integrate React Native with your application. Now we will start the [Metro bundler](https://metrobundler.dev/) to build your TypeScript application code into a bundle. Metro's HTTP server shares the bundle from `localhost` on your developer environment to a simulator or device. This allows for [hot reloading](https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading).
+
+First, you need to create a `metro.config.js` file in the root of your project as follows:
+
+```js
+const {getDefaultConfig} = require('@react-native/metro-config');
+module.exports = getDefaultConfig(__dirname);
+```
+
+You can checkout the <RNTemplateRepoLink href="template/metro.config.js">`metro.config.js` file</RNTemplateRepoLink> from the Community template file as reference.
+
+Once you have the configuration file in place, you can run the bundler. Run the following command in the root directory of your project:
+
+<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
+<TabItem value="npm">
+
+```shell
+npm start
+```
+
+</TabItem>
+<TabItem value="yarn">
+
+```shell
+yarn start
+```
+
+</TabItem>
+</Tabs>
+
+Now build and run your Android app as normal.
+
+Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display:
+
+<center><img src="/docs/assets/EmbeddedAppAndroidVideo.gif" width="300" /></center>
+
+### Creating a release build in Android Studio
+
+You can use Android Studio to create your release builds too! It’s as quick as creating release builds of your previously-existing native Android app.
+
+The React Native Gradle Plugin will take care of bundling the JS code inside your APK/App Bundle.
+
+If you're not using Android Studio, you can create a release build with:
+
+```
+cd android
+# For a Release APK
+./gradlew :app:assembleRelease
+# For a Release AAB
+./gradlew :app:bundleRelease
+```
+
+### Now what?
+
+At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native.
diff --git a/website/versioned_docs/version-0.83/_turbo-native-modules-components.jsx b/website/versioned_docs/version-0.83/_turbo-native-modules-components.jsx
index 1bb5a1b5edb..9b17f011728 100644
--- a/website/versioned_docs/version-0.83/_turbo-native-modules-components.jsx
+++ b/website/versioned_docs/version-0.83/_turbo-native-modules-components.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import IOSContent from './turbo-native-modules-ios.md';
 import AndroidContent from './turbo-native-modules-android.md';
 
diff --git a/website/versioned_docs/version-0.83/accessibilityinfo.md b/website/versioned_docs/version-0.83/accessibilityinfo.md
index c5c580e8c80..c3b47920418 100644
--- a/website/versioned_docs/version-0.83/accessibilityinfo.md
+++ b/website/versioned_docs/version-0.83/accessibilityinfo.md
@@ -1,292 +1,292 @@
----
-id: accessibilityinfo
-title: AccessibilityInfo
----
-
-Sometimes it's useful to know whether or not the device has a screen reader that is currently active. The `AccessibilityInfo` API is designed for this purpose. You can use it to query the current state of the screen reader as well as to register to be notified when the state of the screen reader changes.
-
-## Example
-
-```SnackPlayer name=AccessibilityInfo%20Example&supportedPlatforms=android,ios
-import React, {useState, useEffect} from 'react';
-import {AccessibilityInfo, Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false);
-  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
-
-  useEffect(() => {
-    const reduceMotionChangedSubscription = AccessibilityInfo.addEventListener(
-      'reduceMotionChanged',
-      isReduceMotionEnabled => {
-        setReduceMotionEnabled(isReduceMotionEnabled);
-      },
-    );
-    const screenReaderChangedSubscription = AccessibilityInfo.addEventListener(
-      'screenReaderChanged',
-      isScreenReaderEnabled => {
-        setScreenReaderEnabled(isScreenReaderEnabled);
-      },
-    );
-
-    AccessibilityInfo.isReduceMotionEnabled().then(isReduceMotionEnabled => {
-      setReduceMotionEnabled(isReduceMotionEnabled);
-    });
-    AccessibilityInfo.isScreenReaderEnabled().then(isScreenReaderEnabled => {
-      setScreenReaderEnabled(isScreenReaderEnabled);
-    });
-
-    return () => {
-      reduceMotionChangedSubscription.remove();
-      screenReaderChangedSubscription.remove();
-    };
-  }, []);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.status}>
-          The reduce motion is {reduceMotionEnabled ? 'enabled' : 'disabled'}.
-        </Text>
-        <Text style={styles.status}>
-          The screen reader is {screenReaderEnabled ? 'enabled' : 'disabled'}.
-        </Text>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  status: {
-    margin: 30,
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Methods
-
-### `addEventListener()`
-
-```tsx
-static addEventListener(
-  eventName: AccessibilityChangeEventName | AccessibilityAnnouncementEventName,
-  handler: (
-    event: AccessibilityChangeEvent | AccessibilityAnnouncementFinishedEvent,
-  ) => void,
-): EmitterSubscription;
-```
-
-Add an event handler. Supported events:
-
-| Event name                                                                               | Description                                                                                                                                                                                                                                                                                              |
-| ---------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `accessibilityServiceChanged`<br/><div className="label two-lines android">Android</div> | Fires when some services such as TalkBack, other Android assistive technologies, and third-party accessibility services are enabled. The argument to the event handler is a boolean. The boolean is `true` when a some accessibility services is enabled and `false` otherwise.                          |
-| `announcementFinished`<br/><div className="label two-lines ios">iOS</div>                | Fires when the screen reader has finished making an announcement. The argument to the event handler is a dictionary with these keys:<ul><li>`announcement`: The string announced by the screen reader.</li><li>`success`: A boolean indicating whether the announcement was successfully made.</li></ul> |
-| `boldTextChanged`<br/><div className="label two-lines ios">iOS</div>                     | 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`<br/><div className="label two-lines ios">iOS</div>                    | 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`<br/><div className="label two-lines ios">iOS</div>                 | 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.                                  |
-| `reduceTransparencyChanged`<br/><div className="label two-lines ios">iOS</div>           | 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.                                                                                                         |
-| `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.                                                                                                                          |
-
----
-
-### `announceForAccessibility()`
-
-```tsx
-static announceForAccessibility(announcement: string);
-```
-
-Post a string to be announced by the screen reader.
-
----
-
-### `announceForAccessibilityWithOptions()`
-
-```tsx
-static announceForAccessibilityWithOptions(
-  announcement: string,
-  options: {queue?: boolean},
-);
-```
-
-Post a string to be announced by the screen reader with modification options. By default announcements will interrupt any existing speech, but on iOS they can be queued behind existing speech by setting `queue` to `true` in the options object.
-
-**Parameters:**
-
-| Name                                                              | Type   | Description                                                                                  |
-| ----------------------------------------------------------------- | ------ | -------------------------------------------------------------------------------------------- |
-| announcement <div className="label basic required">Required</div> | string | The string to be announced                                                                   |
-| options <div className="label basic required">Required</div>      | object | `queue` - queue the announcement behind existing speech <div className="label ios">iOS</div> |
-
----
-
-### `getRecommendedTimeoutMillis()` <div className="label android">Android</div>
-
-```tsx
-static getRecommendedTimeoutMillis(originalTimeout: number): Promise<number>;
-```
-
-Gets the timeout in millisecond that the user needs.
-This value is set in "Time to take action (Accessibility timeout)" of "Accessibility" settings.
-
-**Parameters:**
-
-| Name                                                                 | Type   | Description                                                                           |
-| -------------------------------------------------------------------- | ------ | ------------------------------------------------------------------------------------- |
-| originalTimeout <div className="label basic required">Required</div> | number | The timeout to return if "Accessibility timeout" is not set. Specify in milliseconds. |
-
----
-
-### `isAccessibilityServiceEnabled()` <div className="label android">Android</div>
-
-```tsx
-static isAccessibilityServiceEnabled(): Promise<boolean>;
-```
-
-Check whether any accessibility service is enabled. This includes TalkBack but also any third-party accessibility app that may be installed. To only check whether TalkBack is enabled, use [isScreenReaderEnabled](#isscreenreaderenabled). Returns a promise which resolves to a boolean. The result is `true` when some accessibility services is enabled and `false` otherwise.
-
-:::note
-Please use [`isScreenReaderEnabled`](#isscreenreaderenabled) if you only want to check the status of TalkBack.
-:::
-
----
-
-### `isBoldTextEnabled()` <div className="label ios">iOS</div>
-
-```tsx
-static isBoldTextEnabled(): Promise<boolean>:
-```
-
-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()` <div className="label ios">iOS</div>
-
-```tsx
-static isGrayscaleEnabled(): Promise<boolean>;
-```
-
-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()` <div className="label ios">iOS</div>
-
-```tsx
-static isInvertColorsEnabled(): Promise<boolean>;
-```
-
-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()`
-
-```tsx
-static isReduceMotionEnabled(): Promise<boolean>;
-```
-
-Query whether reduce motion is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when reduce motion is enabled and `false` otherwise.
-
----
-
-### `isReduceTransparencyEnabled()` <div className="label ios">iOS</div>
-
-```tsx
-static isReduceTransparencyEnabled(): Promise<boolean>;
-```
-
-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()`
-
-```tsx
-static isScreenReaderEnabled(): Promise<boolean>;
-```
-
-Query whether a screen reader is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when a screen reader is enabled and `false` otherwise.
-
----
-
-### `isHighTextContrastEnabled()` <div className="label android">Android</div>
-
-```tsx
-static isHighTextContrastEnabled(): Promise<boolean>
-```
-
-Query whether high text contrast is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when high text contrast is enabled and `false` otherwise.
-
----
-
-### `isDarkerSystemColorsEnabled()` <div className="label ios">iOS</div>
-
-```tsx
-static isDarkerSystemColorsEnabled(): Promise<boolean>
-```
-
-Query whether dark system colors is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when dark system colors is enabled and `false` otherwise.
-
----
-
-### `prefersCrossFadeTransitions()` <div className="label ios">iOS</div>
-
-```tsx
-static prefersCrossFadeTransitions(): Promise<boolean>;
-```
-
-Query whether reduce motion and prefer cross-fade transitions settings are currently enabled. Returns a promise which resolves to a boolean. The result is `true` when prefer cross-fade transitions is enabled and `false` otherwise.
-
----
-
-### 🗑️ `setAccessibilityFocus()`
-
-:::warning[Deprecated]
-Prefer using `sendAccessibilityEvent` with eventType `focus` instead.
-:::
-
-```tsx
-static setAccessibilityFocus(reactTag: number);
-```
-
-Set accessibility focus to a React component.
-
-On Android, this calls `UIManager.sendAccessibilityEvent` method with passed `reactTag` and `UIManager.AccessibilityEventTypes.typeViewFocused` arguments.
-
-:::note
-Make sure that any `View` you want to receive the accessibility focus has `accessible={true}`.
-:::
-
----
-
-### `sendAccessibilityEvent()`
-
-```tsx
-static sendAccessibilityEvent(host: HostInstance, eventType: AccessibilityEventTypes);
-```
-
-Imperatively trigger an accessibility event on a React component, like changing the focused element for a screen reader.
-
-:::note
-Make sure that any `View` you want to receive the accessibility focus has `accessible={true}`.
-:::
-
-| Name                                                           | Type                    | Description                                                                                                            |
-| -------------------------------------------------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------- |
-| host <div className="label basic required">Required</div>      | HostInstance            | The component ref to send the event to.                                                                                |
-| eventType <div className="label basic required">Required</div> | AccessibilityEventTypes | One of `'click'` (Android only), `'focus'`, `'viewHoverEnter'` (Android only), or `'windowStateChange'` (Android only) |
+---
+id: accessibilityinfo
+title: AccessibilityInfo
+---
+
+Sometimes it's useful to know whether or not the device has a screen reader that is currently active. The `AccessibilityInfo` API is designed for this purpose. You can use it to query the current state of the screen reader as well as to register to be notified when the state of the screen reader changes.
+
+## Example
+
+```SnackPlayer name=AccessibilityInfo%20Example&supportedPlatforms=android,ios
+import {useState, useEffect} from 'react';
+import {AccessibilityInfo, Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false);
+  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
+
+  useEffect(() => {
+    const reduceMotionChangedSubscription = AccessibilityInfo.addEventListener(
+      'reduceMotionChanged',
+      isReduceMotionEnabled => {
+        setReduceMotionEnabled(isReduceMotionEnabled);
+      },
+    );
+    const screenReaderChangedSubscription = AccessibilityInfo.addEventListener(
+      'screenReaderChanged',
+      isScreenReaderEnabled => {
+        setScreenReaderEnabled(isScreenReaderEnabled);
+      },
+    );
+
+    AccessibilityInfo.isReduceMotionEnabled().then(isReduceMotionEnabled => {
+      setReduceMotionEnabled(isReduceMotionEnabled);
+    });
+    AccessibilityInfo.isScreenReaderEnabled().then(isScreenReaderEnabled => {
+      setScreenReaderEnabled(isScreenReaderEnabled);
+    });
+
+    return () => {
+      reduceMotionChangedSubscription.remove();
+      screenReaderChangedSubscription.remove();
+    };
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.status}>
+          The reduce motion is {reduceMotionEnabled ? 'enabled' : 'disabled'}.
+        </Text>
+        <Text style={styles.status}>
+          The screen reader is {screenReaderEnabled ? 'enabled' : 'disabled'}.
+        </Text>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  status: {
+    margin: 30,
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+  eventName: AccessibilityChangeEventName | AccessibilityAnnouncementEventName,
+  handler: (
+    event: AccessibilityChangeEvent | AccessibilityAnnouncementFinishedEvent,
+  ) => void,
+): EmitterSubscription;
+```
+
+Add an event handler. Supported events:
+
+| Event name                                                                               | Description                                                                                                                                                                                                                                                                                              |
+| ---------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `accessibilityServiceChanged`<br/><div className="label two-lines android">Android</div> | Fires when some services such as TalkBack, other Android assistive technologies, and third-party accessibility services are enabled. The argument to the event handler is a boolean. The boolean is `true` when a some accessibility services is enabled and `false` otherwise.                          |
+| `announcementFinished`<br/><div className="label two-lines ios">iOS</div>                | Fires when the screen reader has finished making an announcement. The argument to the event handler is a dictionary with these keys:<ul><li>`announcement`: The string announced by the screen reader.</li><li>`success`: A boolean indicating whether the announcement was successfully made.</li></ul> |
+| `boldTextChanged`<br/><div className="label two-lines ios">iOS</div>                     | 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`<br/><div className="label two-lines ios">iOS</div>                    | 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`<br/><div className="label two-lines ios">iOS</div>                 | 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.                                  |
+| `reduceTransparencyChanged`<br/><div className="label two-lines ios">iOS</div>           | 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.                                                                                                         |
+| `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.                                                                                                                          |
+
+---
+
+### `announceForAccessibility()`
+
+```tsx
+static announceForAccessibility(announcement: string);
+```
+
+Post a string to be announced by the screen reader.
+
+---
+
+### `announceForAccessibilityWithOptions()`
+
+```tsx
+static announceForAccessibilityWithOptions(
+  announcement: string,
+  options: {queue?: boolean},
+);
+```
+
+Post a string to be announced by the screen reader with modification options. By default announcements will interrupt any existing speech, but on iOS they can be queued behind existing speech by setting `queue` to `true` in the options object.
+
+**Parameters:**
+
+| Name                                                              | Type   | Description                                                                                  |
+| ----------------------------------------------------------------- | ------ | -------------------------------------------------------------------------------------------- |
+| announcement <div className="label basic required">Required</div> | string | The string to be announced                                                                   |
+| options <div className="label basic required">Required</div>      | object | `queue` - queue the announcement behind existing speech <div className="label ios">iOS</div> |
+
+---
+
+### `getRecommendedTimeoutMillis()` <div className="label android">Android</div>
+
+```tsx
+static getRecommendedTimeoutMillis(originalTimeout: number): Promise<number>;
+```
+
+Gets the timeout in millisecond that the user needs.
+This value is set in "Time to take action (Accessibility timeout)" of "Accessibility" settings.
+
+**Parameters:**
+
+| Name                                                                 | Type   | Description                                                                           |
+| -------------------------------------------------------------------- | ------ | ------------------------------------------------------------------------------------- |
+| originalTimeout <div className="label basic required">Required</div> | number | The timeout to return if "Accessibility timeout" is not set. Specify in milliseconds. |
+
+---
+
+### `isAccessibilityServiceEnabled()` <div className="label android">Android</div>
+
+```tsx
+static isAccessibilityServiceEnabled(): Promise<boolean>;
+```
+
+Check whether any accessibility service is enabled. This includes TalkBack but also any third-party accessibility app that may be installed. To only check whether TalkBack is enabled, use [isScreenReaderEnabled](#isscreenreaderenabled). Returns a promise which resolves to a boolean. The result is `true` when some accessibility services is enabled and `false` otherwise.
+
+:::note
+Please use [`isScreenReaderEnabled`](#isscreenreaderenabled) if you only want to check the status of TalkBack.
+:::
+
+---
+
+### `isBoldTextEnabled()` <div className="label ios">iOS</div>
+
+```tsx
+static isBoldTextEnabled(): Promise<boolean>:
+```
+
+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()` <div className="label ios">iOS</div>
+
+```tsx
+static isGrayscaleEnabled(): Promise<boolean>;
+```
+
+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()` <div className="label ios">iOS</div>
+
+```tsx
+static isInvertColorsEnabled(): Promise<boolean>;
+```
+
+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()`
+
+```tsx
+static isReduceMotionEnabled(): Promise<boolean>;
+```
+
+Query whether reduce motion is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when reduce motion is enabled and `false` otherwise.
+
+---
+
+### `isReduceTransparencyEnabled()` <div className="label ios">iOS</div>
+
+```tsx
+static isReduceTransparencyEnabled(): Promise<boolean>;
+```
+
+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()`
+
+```tsx
+static isScreenReaderEnabled(): Promise<boolean>;
+```
+
+Query whether a screen reader is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when a screen reader is enabled and `false` otherwise.
+
+---
+
+### `isHighTextContrastEnabled()` <div className="label android">Android</div>
+
+```tsx
+static isHighTextContrastEnabled(): Promise<boolean>
+```
+
+Query whether high text contrast is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when high text contrast is enabled and `false` otherwise.
+
+---
+
+### `isDarkerSystemColorsEnabled()` <div className="label ios">iOS</div>
+
+```tsx
+static isDarkerSystemColorsEnabled(): Promise<boolean>
+```
+
+Query whether dark system colors is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when dark system colors is enabled and `false` otherwise.
+
+---
+
+### `prefersCrossFadeTransitions()` <div className="label ios">iOS</div>
+
+```tsx
+static prefersCrossFadeTransitions(): Promise<boolean>;
+```
+
+Query whether reduce motion and prefer cross-fade transitions settings are currently enabled. Returns a promise which resolves to a boolean. The result is `true` when prefer cross-fade transitions is enabled and `false` otherwise.
+
+---
+
+### 🗑️ `setAccessibilityFocus()`
+
+:::warning[Deprecated]
+Prefer using `sendAccessibilityEvent` with eventType `focus` instead.
+:::
+
+```tsx
+static setAccessibilityFocus(reactTag: number);
+```
+
+Set accessibility focus to a React component.
+
+On Android, this calls `UIManager.sendAccessibilityEvent` method with passed `reactTag` and `UIManager.AccessibilityEventTypes.typeViewFocused` arguments.
+
+:::note
+Make sure that any `View` you want to receive the accessibility focus has `accessible={true}`.
+:::
+
+---
+
+### `sendAccessibilityEvent()`
+
+```tsx
+static sendAccessibilityEvent(host: HostInstance, eventType: AccessibilityEventTypes);
+```
+
+Imperatively trigger an accessibility event on a React component, like changing the focused element for a screen reader.
+
+:::note
+Make sure that any `View` you want to receive the accessibility focus has `accessible={true}`.
+:::
+
+| Name                                                           | Type                    | Description                                                                                                            |
+| -------------------------------------------------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| host <div className="label basic required">Required</div>      | HostInstance            | The component ref to send the event to.                                                                                |
+| eventType <div className="label basic required">Required</div> | AccessibilityEventTypes | One of `'click'` (Android only), `'focus'`, `'viewHoverEnter'` (Android only), or `'windowStateChange'` (Android only) |
diff --git a/website/versioned_docs/version-0.83/actionsheetios.md b/website/versioned_docs/version-0.83/actionsheetios.md
index 30d1d6afea5..dc2269301d2 100644
--- a/website/versioned_docs/version-0.83/actionsheetios.md
+++ b/website/versioned_docs/version-0.83/actionsheetios.md
@@ -1,144 +1,144 @@
----
-id: actionsheetios
-title: ActionSheetIOS
----
-
-Displays native to iOS [Action Sheet](https://developer.apple.com/design/human-interface-guidelines/action-sheets) component.
-
-## Example
-
-```SnackPlayer name=ActionSheetIOS%20Example&supportedPlatforms=ios
-import React, {useState} from 'react';
-import {ActionSheetIOS, Button, StyleSheet, Text} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [result, setResult] = useState('🔮');
-
-  const onPress = () =>
-    ActionSheetIOS.showActionSheetWithOptions(
-      {
-        options: ['Cancel', 'Generate number', 'Reset'],
-        destructiveButtonIndex: 2,
-        cancelButtonIndex: 0,
-        userInterfaceStyle: 'dark',
-      },
-      buttonIndex => {
-        if (buttonIndex === 0) {
-          // cancel action
-        } else if (buttonIndex === 1) {
-          setResult(String(Math.floor(Math.random() * 100) + 1));
-        } else if (buttonIndex === 2) {
-          setResult('🔮');
-        }
-      },
-    );
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.result}>{result}</Text>
-        <Button onPress={onPress} title="Show Action Sheet" />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  result: {
-    fontSize: 64,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
-# Reference
-
-## Methods
-
-### `showActionSheetWithOptions()`
-
-```tsx
-static showActionSheetWithOptions: (
-  options: ActionSheetIOSOptions,
-  callback: (buttonIndex: number) => void,
-);
-```
-
-Display an iOS action sheet. The `options` object must contain one or more of:
-
-- `options` (array of strings) - a list of button titles (required)
-- `cancelButtonIndex` (int) - index of cancel button in `options`
-- `cancelButtonTintColor` (string) - the [color](colors) used for the change the text color of the cancel button
-- `destructiveButtonIndex` (int or array of ints) - indices of destructive buttons in `options`
-- `title` (string) - a title to show above the action sheet
-- `message` (string) - a message to show below the title
-- `anchor` (number) - the node to which the action sheet should be anchored (used for iPad)
-- `tintColor` (string) - the [color](colors) used for non-destructive button titles
-- `disabledButtonIndices` (array of numbers) - a list of button indices which should be disabled
-- `userInterfaceStyle` (string) - the interface style used for the action sheet, can be set to `light` or `dark`, otherwise the default system style will be used
-
-The 'callback' function takes one parameter, the zero-based index of the selected item.
-
-Minimal example:
-
-```tsx
-ActionSheetIOS.showActionSheetWithOptions(
-  {
-    options: ['Cancel', 'Remove'],
-    destructiveButtonIndex: 1,
-    cancelButtonIndex: 0,
-  },
-  buttonIndex => {
-    if (buttonIndex === 1) {
-      /* destructive action */
-    }
-  },
-);
-```
-
----
-
-### `dismissActionSheet()`
-
-```tsx
-static dismissActionSheet();
-```
-
-Dismisses the most upper iOS action sheet presented, if no action sheet is present a warning is displayed.
-
----
-
-### `showShareActionSheetWithOptions()`
-
-```tsx
-static showShareActionSheetWithOptions: (
-  options: ShareActionSheetIOSOptions,
-  failureCallback: (error: Error) => void,
-  successCallback: (success: boolean, method: string) => void,
-);
-```
-
-Display the iOS share sheet. The `options` object should contain one or both of `message` and `url` and can additionally have a `subject` or `excludedActivityTypes`:
-
-- `url` (string) - a URL to share
-- `message` (string) - a message to share
-- `subject` (string) - a subject for the message
-- `excludedActivityTypes` (array) - the activities to exclude from the ActionSheet
-
-:::note
-If `url` points to a local file, or is a base64-encoded uri, the file it points to will be loaded and shared directly. In this way, you can share images, videos, PDF files, etc. If `url` points to a remote file or address it must conform to URL format as described in [RFC 2396](https://www.ietf.org/rfc/rfc2396.txt). For example, a web URL without a proper protocol (HTTP/HTTPS) will not be shared.
-:::
-
-The 'failureCallback' function takes one parameter, an error object. The only property defined on this object is an optional `stack` property of type `string`.
-
-The 'successCallback' function takes two parameters:
-
-- a boolean value signifying success or failure
-- a string that, in the case of success, indicates the method of sharing
+---
+id: actionsheetios
+title: ActionSheetIOS
+---
+
+Displays native to iOS [Action Sheet](https://developer.apple.com/design/human-interface-guidelines/action-sheets) component.
+
+## Example
+
+```SnackPlayer name=ActionSheetIOS%20Example&supportedPlatforms=ios
+import {useState} from 'react';
+import {ActionSheetIOS, Button, StyleSheet, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [result, setResult] = useState('🔮');
+
+  const onPress = () =>
+    ActionSheetIOS.showActionSheetWithOptions(
+      {
+        options: ['Cancel', 'Generate number', 'Reset'],
+        destructiveButtonIndex: 2,
+        cancelButtonIndex: 0,
+        userInterfaceStyle: 'dark',
+      },
+      buttonIndex => {
+        if (buttonIndex === 0) {
+          // cancel action
+        } else if (buttonIndex === 1) {
+          setResult(String(Math.floor(Math.random() * 100) + 1));
+        } else if (buttonIndex === 2) {
+          setResult('🔮');
+        }
+      },
+    );
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.result}>{result}</Text>
+        <Button onPress={onPress} title="Show Action Sheet" />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  result: {
+    fontSize: 64,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+# Reference
+
+## Methods
+
+### `showActionSheetWithOptions()`
+
+```tsx
+static showActionSheetWithOptions: (
+  options: ActionSheetIOSOptions,
+  callback: (buttonIndex: number) => void,
+);
+```
+
+Display an iOS action sheet. The `options` object must contain one or more of:
+
+- `options` (array of strings) - a list of button titles (required)
+- `cancelButtonIndex` (int) - index of cancel button in `options`
+- `cancelButtonTintColor` (string) - the [color](colors) used for the change the text color of the cancel button
+- `destructiveButtonIndex` (int or array of ints) - indices of destructive buttons in `options`
+- `title` (string) - a title to show above the action sheet
+- `message` (string) - a message to show below the title
+- `anchor` (number) - the node to which the action sheet should be anchored (used for iPad)
+- `tintColor` (string) - the [color](colors) used for non-destructive button titles
+- `disabledButtonIndices` (array of numbers) - a list of button indices which should be disabled
+- `userInterfaceStyle` (string) - the interface style used for the action sheet, can be set to `light` or `dark`, otherwise the default system style will be used
+
+The 'callback' function takes one parameter, the zero-based index of the selected item.
+
+Minimal example:
+
+```tsx
+ActionSheetIOS.showActionSheetWithOptions(
+  {
+    options: ['Cancel', 'Remove'],
+    destructiveButtonIndex: 1,
+    cancelButtonIndex: 0,
+  },
+  buttonIndex => {
+    if (buttonIndex === 1) {
+      /* destructive action */
+    }
+  },
+);
+```
+
+---
+
+### `dismissActionSheet()`
+
+```tsx
+static dismissActionSheet();
+```
+
+Dismisses the most upper iOS action sheet presented, if no action sheet is present a warning is displayed.
+
+---
+
+### `showShareActionSheetWithOptions()`
+
+```tsx
+static showShareActionSheetWithOptions: (
+  options: ShareActionSheetIOSOptions,
+  failureCallback: (error: Error) => void,
+  successCallback: (success: boolean, method: string) => void,
+);
+```
+
+Display the iOS share sheet. The `options` object should contain one or both of `message` and `url` and can additionally have a `subject` or `excludedActivityTypes`:
+
+- `url` (string) - a URL to share
+- `message` (string) - a message to share
+- `subject` (string) - a subject for the message
+- `excludedActivityTypes` (array) - the activities to exclude from the ActionSheet
+
+:::note
+If `url` points to a local file, or is a base64-encoded uri, the file it points to will be loaded and shared directly. In this way, you can share images, videos, PDF files, etc. If `url` points to a remote file or address it must conform to URL format as described in [RFC 2396](https://www.ietf.org/rfc/rfc2396.txt). For example, a web URL without a proper protocol (HTTP/HTTPS) will not be shared.
+:::
+
+The 'failureCallback' function takes one parameter, an error object. The only property defined on this object is an optional `stack` property of type `string`.
+
+The 'successCallback' function takes two parameters:
+
+- a boolean value signifying success or failure
+- a string that, in the case of success, indicates the method of sharing
diff --git a/website/versioned_docs/version-0.83/activityindicator.md b/website/versioned_docs/version-0.83/activityindicator.md
index c9d03b73021..9b1445cbf5e 100644
--- a/website/versioned_docs/version-0.83/activityindicator.md
+++ b/website/versioned_docs/version-0.83/activityindicator.md
@@ -8,7 +8,6 @@ Displays a circular loading indicator.
 ## Example
 
 ```SnackPlayer name=ActivityIndicator%20Example
-import React from 'react';
 import {ActivityIndicator, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.83/alert.md b/website/versioned_docs/version-0.83/alert.md
index c80b62fb7a6..78b1c412e66 100644
--- a/website/versioned_docs/version-0.83/alert.md
+++ b/website/versioned_docs/version-0.83/alert.md
@@ -12,7 +12,6 @@ This is an API that works both on Android and iOS and can show static alerts. Al
 ## Example
 
 ```SnackPlayer name=Alert%20Example&supportedPlatforms=ios,android
-import React from 'react';
 import {StyleSheet, Button, Alert} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -81,7 +80,6 @@ The cancel event can be handled by providing an `onDismiss` callback property in
 ### Example <div className="label android">Android</div>
 
 ```SnackPlayer name=Alert%20Android%20Dissmissable%20Example&supportedPlatforms=android
-import React from 'react';
 import {StyleSheet, Button, Alert} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.83/animated.md b/website/versioned_docs/version-0.83/animated.md
index a3039215ca1..fce79ffaf57 100644
--- a/website/versioned_docs/version-0.83/animated.md
+++ b/website/versioned_docs/version-0.83/animated.md
@@ -16,13 +16,19 @@ Don't modify the animated value directly. You can use the [`useRef` Hook](https:
 The following example contains a `View` which will fade in and fade out based on the animated value `fadeAnim`
 
 ```SnackPlayer name=Animated%20Example
-import React, {useRef} from 'react';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-import {Animated, Text, View, StyleSheet, Button} from 'react-native';
+import {
+  Animated,
+  Text,
+  View,
+  StyleSheet,
+  Button,
+  useAnimatedValue,
+} from 'react-native';
 
 const App = () => {
   // fadeAnim will be used as the value for opacity. Initial Value: 0
-  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const fadeAnim = useAnimatedValue(0);
 
   const fadeIn = () => {
     // Will change fadeAnim value to 1 in 5 seconds
diff --git a/website/versioned_docs/version-0.83/animatedvaluexy.md b/website/versioned_docs/version-0.83/animatedvaluexy.md
index 6cb44808ccf..8135c12354a 100644
--- a/website/versioned_docs/version-0.83/animatedvaluexy.md
+++ b/website/versioned_docs/version-0.83/animatedvaluexy.md
@@ -1,227 +1,227 @@
----
-id: animatedvaluexy
-title: Animated.ValueXY
----
-
-2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal [`Animated.Value`](animatedvalue), but multiplexed. Contains two regular `Animated.Value`s under the hood.
-
-## Example
-
-```SnackPlayer name=Animated.ValueXY%20Example
-import React, {useRef} from 'react';
-import {Animated, PanResponder, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const DraggableView = () => {
-  const pan = useRef(new Animated.ValueXY()).current;
-
-  const panResponder = PanResponder.create({
-    onStartShouldSetPanResponder: () => true,
-    onPanResponderMove: Animated.event([
-      null,
-      {
-        dx: pan.x, // x,y are Animated.Value
-        dy: pan.y,
-      },
-    ]),
-    onPanResponderRelease: () => {
-      Animated.spring(
-        pan, // Auto-multiplexed
-        {toValue: {x: 0, y: 0}, useNativeDriver: true}, // Back to zero
-      ).start();
-    },
-  });
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Animated.View
-          {...panResponder.panHandlers}
-          style={[pan.getLayout(), styles.box]}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  box: {
-    backgroundColor: '#61dafb',
-    width: 80,
-    height: 80,
-    borderRadius: 4,
-  },
-});
-
-export default DraggableView;
-```
-
----
-
-# Reference
-
-## Methods
-
-### `setValue()`
-
-```tsx
-setValue(value: {x: number; y: number});
-```
-
-Directly set the value. This will stop any animations running on the value and update all the bound properties.
-
-**Parameters:**
-
-| Name  | Type                     | Required | Description |
-| ----- | ------------------------ | -------- | ----------- |
-| value | `{x: number; y: number}` | Yes      | Value       |
-
----
-
-### `setOffset()`
-
-```tsx
-setOffset(offset: {x: number; y: number});
-```
-
-Sets an offset that is applied on top of whatever value is set, whether via `setValue`, an animation, or `Animated.event`. Useful for compensating things like the start of a pan gesture.
-
-**Parameters:**
-
-| Name   | Type                     | Required | Description  |
-| ------ | ------------------------ | -------- | ------------ |
-| offset | `{x: number; y: number}` | Yes      | Offset value |
-
----
-
-### `flattenOffset()`
-
-```tsx
-flattenOffset();
-```
-
-Merges the offset value into the base value and resets the offset to zero. The final output of the value is unchanged.
-
----
-
-### `extractOffset()`
-
-```tsx
-extractOffset();
-```
-
-Sets the offset value to the base value, and resets the base value to zero. The final output of the value is unchanged.
-
----
-
-### `addListener()`
-
-```tsx
-addListener(callback: (value: {x: number; y: number}) => void);
-```
-
-Adds an asynchronous listener to the value so you can observe updates from animations. This is useful because there is no way to synchronously read the value because it might be driven natively.
-
-Returns a string that serves as an identifier for the listener.
-
-**Parameters:**
-
-| Name     | Type     | Required | Description                                                                                 |
-| -------- | -------- | -------- | ------------------------------------------------------------------------------------------- |
-| callback | function | Yes      | The callback function which will receive an object with a `value` key set to the new value. |
-
----
-
-### `removeListener()`
-
-```tsx
-removeListener(id: string);
-```
-
-Unregister a listener. The `id` param shall match the identifier previously returned by `addListener()`.
-
-**Parameters:**
-
-| Name | Type   | Required | Description                        |
-| ---- | ------ | -------- | ---------------------------------- |
-| id   | string | Yes      | Id for the listener being removed. |
-
----
-
-### `removeAllListeners()`
-
-```tsx
-removeAllListeners();
-```
-
-Remove all registered listeners.
-
----
-
-### `stopAnimation()`
-
-```tsx
-stopAnimation(callback?: (value: {x: number; y: number}) => void);
-```
-
-Stops any running animation or tracking. `callback` is invoked with the final value after stopping the animation, which is useful for updating state to match the animation position with layout.
-
-**Parameters:**
-
-| Name     | Type     | Required | Description                                   |
-| -------- | -------- | -------- | --------------------------------------------- |
-| callback | function | No       | A function that will receive the final value. |
-
----
-
-### `resetAnimation()`
-
-```tsx
-resetAnimation(callback?: (value: {x: number; y: number}) => void);
-```
-
-Stops any animation and resets the value to its original.
-
-**Parameters:**
-
-| Name     | Type     | Required | Description                                      |
-| -------- | -------- | -------- | ------------------------------------------------ |
-| callback | function | No       | A function that will receive the original value. |
-
----
-
-### `getLayout()`
-
-```tsx
-getLayout(): {left: Animated.Value, top: Animated.Value};
-```
-
-Converts `{x, y}` into `{left, top}` for use in style, e.g.
-
-```tsx
-style={this.state.anim.getLayout()}
-```
-
----
-
-### `getTranslateTransform()`
-
-```tsx
-getTranslateTransform(): [
-  {translateX: Animated.Value},
-  {translateY: Animated.Value},
-];
-```
-
-Converts `{x, y}` into a useable translation transform, e.g.
-
-```tsx
-style={{
-  transform: this.state.anim.getTranslateTransform()
-}}
-```
+---
+id: animatedvaluexy
+title: Animated.ValueXY
+---
+
+2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal [`Animated.Value`](animatedvalue), but multiplexed. Contains two regular `Animated.Value`s under the hood.
+
+## Example
+
+```SnackPlayer name=Animated.ValueXY%20Example
+import {useRef} from 'react';
+import {Animated, PanResponder, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const DraggableView = () => {
+  const pan = useRef(new Animated.ValueXY()).current;
+
+  const panResponder = PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onPanResponderMove: Animated.event([
+      null,
+      {
+        dx: pan.x, // x,y are Animated.Value
+        dy: pan.y,
+      },
+    ]),
+    onPanResponderRelease: () => {
+      Animated.spring(
+        pan, // Auto-multiplexed
+        {toValue: {x: 0, y: 0}, useNativeDriver: true}, // Back to zero
+      ).start();
+    },
+  });
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Animated.View
+          {...panResponder.panHandlers}
+          style={[pan.getLayout(), styles.box]}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  box: {
+    backgroundColor: '#61dafb',
+    width: 80,
+    height: 80,
+    borderRadius: 4,
+  },
+});
+
+export default DraggableView;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `setValue()`
+
+```tsx
+setValue(value: {x: number; y: number});
+```
+
+Directly set the value. This will stop any animations running on the value and update all the bound properties.
+
+**Parameters:**
+
+| Name  | Type                     | Required | Description |
+| ----- | ------------------------ | -------- | ----------- |
+| value | `{x: number; y: number}` | Yes      | Value       |
+
+---
+
+### `setOffset()`
+
+```tsx
+setOffset(offset: {x: number; y: number});
+```
+
+Sets an offset that is applied on top of whatever value is set, whether via `setValue`, an animation, or `Animated.event`. Useful for compensating things like the start of a pan gesture.
+
+**Parameters:**
+
+| Name   | Type                     | Required | Description  |
+| ------ | ------------------------ | -------- | ------------ |
+| offset | `{x: number; y: number}` | Yes      | Offset value |
+
+---
+
+### `flattenOffset()`
+
+```tsx
+flattenOffset();
+```
+
+Merges the offset value into the base value and resets the offset to zero. The final output of the value is unchanged.
+
+---
+
+### `extractOffset()`
+
+```tsx
+extractOffset();
+```
+
+Sets the offset value to the base value, and resets the base value to zero. The final output of the value is unchanged.
+
+---
+
+### `addListener()`
+
+```tsx
+addListener(callback: (value: {x: number; y: number}) => void);
+```
+
+Adds an asynchronous listener to the value so you can observe updates from animations. This is useful because there is no way to synchronously read the value because it might be driven natively.
+
+Returns a string that serves as an identifier for the listener.
+
+**Parameters:**
+
+| Name     | Type     | Required | Description                                                                                 |
+| -------- | -------- | -------- | ------------------------------------------------------------------------------------------- |
+| callback | function | Yes      | The callback function which will receive an object with a `value` key set to the new value. |
+
+---
+
+### `removeListener()`
+
+```tsx
+removeListener(id: string);
+```
+
+Unregister a listener. The `id` param shall match the identifier previously returned by `addListener()`.
+
+**Parameters:**
+
+| Name | Type   | Required | Description                        |
+| ---- | ------ | -------- | ---------------------------------- |
+| id   | string | Yes      | Id for the listener being removed. |
+
+---
+
+### `removeAllListeners()`
+
+```tsx
+removeAllListeners();
+```
+
+Remove all registered listeners.
+
+---
+
+### `stopAnimation()`
+
+```tsx
+stopAnimation(callback?: (value: {x: number; y: number}) => void);
+```
+
+Stops any running animation or tracking. `callback` is invoked with the final value after stopping the animation, which is useful for updating state to match the animation position with layout.
+
+**Parameters:**
+
+| Name     | Type     | Required | Description                                   |
+| -------- | -------- | -------- | --------------------------------------------- |
+| callback | function | No       | A function that will receive the final value. |
+
+---
+
+### `resetAnimation()`
+
+```tsx
+resetAnimation(callback?: (value: {x: number; y: number}) => void);
+```
+
+Stops any animation and resets the value to its original.
+
+**Parameters:**
+
+| Name     | Type     | Required | Description                                      |
+| -------- | -------- | -------- | ------------------------------------------------ |
+| callback | function | No       | A function that will receive the original value. |
+
+---
+
+### `getLayout()`
+
+```tsx
+getLayout(): {left: Animated.Value, top: Animated.Value};
+```
+
+Converts `{x, y}` into `{left, top}` for use in style, e.g.
+
+```tsx
+style={this.state.anim.getLayout()}
+```
+
+---
+
+### `getTranslateTransform()`
+
+```tsx
+getTranslateTransform(): [
+  {translateX: Animated.Value},
+  {translateY: Animated.Value},
+];
+```
+
+Converts `{x, y}` into a useable translation transform, e.g.
+
+```tsx
+style={{
+  transform: this.state.anim.getTranslateTransform()
+}}
+```
diff --git a/website/versioned_docs/version-0.83/animations.md b/website/versioned_docs/version-0.83/animations.md
index ccdaa5a32bb..956e96dc2c5 100644
--- a/website/versioned_docs/version-0.83/animations.md
+++ b/website/versioned_docs/version-0.83/animations.md
@@ -1,673 +1,672 @@
----
-id: animations
-title: Animations
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface.
-
-React Native provides two complementary animation systems: [`Animated`](animations#animated-api) for granular and interactive control of specific values, and [`LayoutAnimation`](animations#layoutanimation-api) for animated global layout transactions.
-
-## `Animated` API
-
-The [`Animated`](animated) API is designed to concisely express a wide variety of interesting animation and interaction patterns in a very performant way. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and `start`/`stop` methods to control time-based animation execution.
-
-`Animated` exports six animatable component types: `View`, `Text`, `Image`, `ScrollView`, `FlatList` and `SectionList`, but you can also create your own using `Animated.createAnimatedComponent()`.
-
-For example, a container view that fades in when it is mounted may look like this:
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer ext=js
-import React, {useEffect, useRef} from 'react';
-import {Animated, Text, View} from 'react-native';
-
-const FadeInView = props => {
-  const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
-
-  useEffect(() => {
-    Animated.timing(fadeAnim, {
-      toValue: 1,
-      duration: 10000,
-      useNativeDriver: true,
-    }).start();
-  }, [fadeAnim]);
-
-  return (
-    <Animated.View // Special animatable View
-      style={{
-        ...props.style,
-        opacity: fadeAnim, // Bind opacity to animated value
-      }}>
-      {props.children}
-    </Animated.View>
-  );
-};
-
-// You can then use your `FadeInView` in place of a `View` in your components:
-export default () => {
-  return (
-    <View
-      style={{
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}>
-      <FadeInView
-        style={{
-          width: 250,
-          height: 50,
-          backgroundColor: 'powderblue',
-        }}>
-        <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>
-          Fading in
-        </Text>
-      </FadeInView>
-    </View>
-  );
-};
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer ext=tsx
-import React, {useEffect, useRef, type PropsWithChildren} from 'react';
-import {Animated, Text, View, type ViewStyle} from 'react-native';
-
-type FadeInViewProps = PropsWithChildren<{style: ViewStyle}>;
-
-const FadeInView: React.FC<FadeInViewProps> = props => {
-  const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
-
-  useEffect(() => {
-    Animated.timing(fadeAnim, {
-      toValue: 1,
-      duration: 10000,
-      useNativeDriver: true,
-    }).start();
-  }, [fadeAnim]);
-
-  return (
-    <Animated.View // Special animatable View
-      style={{
-        ...props.style,
-        opacity: fadeAnim, // Bind opacity to animated value
-      }}>
-      {props.children}
-    </Animated.View>
-  );
-};
-
-// You can then use your `FadeInView` in place of a `View` in your components:
-export default () => {
-  return (
-    <View
-      style={{
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}>
-      <FadeInView
-        style={{
-          width: 250,
-          height: 50,
-          backgroundColor: 'powderblue',
-        }}>
-        <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>
-          Fading in
-        </Text>
-      </FadeInView>
-    </View>
-  );
-};
-```
-
-</TabItem>
-</Tabs>
-
-Let's break down what's happening here. In the `FadeInView` render method, a new `Animated.Value` called `fadeAnim` is initialized with `useRef`. The opacity property on the `View` is mapped to this animated value. Behind the scenes, the numeric value is extracted and used to set opacity.
-
-When the component mounts, the opacity is set to 0. Then, an easing animation is started on the `fadeAnim` animated value, which will update all of its dependent mappings (in this case, only the opacity) on each frame as the value animates to the final value of 1.
-
-This is done in an optimized way that is faster than calling `setState` and re-rendering. Because the entire configuration is declarative, we will be able to implement further optimizations that serialize the configuration and runs the animation on a high-priority thread.
-
-### Configuring animations
-
-Animations are heavily configurable. Custom and predefined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.
-
-`Animated` provides several animation types, the most commonly used one being [`Animated.timing()`](animated#timing). It supports animating a value over time using one of various predefined easing functions, or you can use your own. Easing functions are typically used in animation to convey gradual acceleration and deceleration of objects.
-
-By default, `timing` will use an easeInOut curve that conveys gradual acceleration to full speed and concludes by gradually decelerating to a stop. You can specify a different easing function by passing an `easing` parameter. Custom `duration` or even a `delay` before the animation starts is also supported.
-
-For example, if we want to create a 2-second long animation of an object that slightly backs up before moving to its final position:
-
-```tsx
-Animated.timing(this.state.xPosition, {
-  toValue: 100,
-  easing: Easing.back(),
-  duration: 2000,
-  useNativeDriver: true,
-}).start();
-```
-
-Take a look at the [Configuring animations](animated#configuring-animations) section of the `Animated` API reference to learn more about all the config parameters supported by the built-in animations.
-
-### Composing animations
-
-Animations can be combined and played in sequence or in parallel. Sequential animations can play immediately after the previous animation has finished, or they can start after a specified delay. The `Animated` API provides several methods, such as `sequence()` and `delay()`, each of which take an array of animations to execute and automatically calls `start()`/`stop()` as needed.
-
-For example, the following animation coasts to a stop, then it springs back while twirling in parallel:
-
-```tsx
-Animated.sequence([
-  // decay, then spring to start and twirl
-  Animated.decay(position, {
-    // coast to a stop
-    velocity: {x: gestureState.vx, y: gestureState.vy}, // velocity from gesture release
-    deceleration: 0.997,
-    useNativeDriver: true,
-  }),
-  Animated.parallel([
-    // after decay, in parallel:
-    Animated.spring(position, {
-      toValue: {x: 0, y: 0}, // return to start
-      useNativeDriver: true,
-    }),
-    Animated.timing(twirl, {
-      // and twirl
-      toValue: 360,
-      useNativeDriver: true,
-    }),
-  ]),
-]).start(); // start the sequence group
-```
-
-If one animation is stopped or interrupted, then all other animations in the group are also stopped. `Animated.parallel` has a `stopTogether` option that can be set to `false` to disable this.
-
-You can find a full list of composition methods in the [Composing animations](animated#composing-animations) section of the `Animated` API reference.
-
-### Combining animated values
-
-You can [combine two animated values](animated#combining-animated-values) via addition, multiplication, division, or modulo to make a new animated value.
-
-There are some cases where an animated value needs to invert another animated value for calculation. An example is inverting a scale (2x --> 0.5x):
-
-```tsx
-const a = new Animated.Value(1);
-const b = Animated.divide(1, a);
-
-Animated.spring(a, {
-  toValue: 2,
-  useNativeDriver: true,
-}).start();
-```
-
-### Interpolation
-
-Each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.
-
-A basic mapping to convert a 0-1 range to a 0-100 range would be:
-
-```tsx
-value.interpolate({
-  inputRange: [0, 1],
-  outputRange: [0, 100],
-});
-```
-
-For example, you may want to think about your `Animated.Value` as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying `style` from the example above like so:
-
-```tsx
-  style={{
-    opacity: this.state.fadeAnim, // Binds directly
-    transform: [{
-      translateY: this.state.fadeAnim.interpolate({
-        inputRange: [0, 1],
-        outputRange: [150, 0]  // 0 : 150, 0.5 : 75, 1 : 0
-      }),
-    }],
-  }}
-```
-
-[`interpolate()`](animated#interpolate) supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
-
-```tsx
-value.interpolate({
-  inputRange: [-300, -100, 0, 100, 101],
-  outputRange: [300, 0, 1, 0, 0],
-});
-```
-
-Which would map like so:
-
-```
-Input | Output
-------|-------
-  -400|    450
-  -300|    300
-  -200|    150
-  -100|      0
-   -50|    0.5
-     0|      1
-    50|    0.5
-   100|      0
-   101|      0
-   200|      0
-```
-
-`interpolate()` also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
-
-```tsx
-value.interpolate({
-  inputRange: [0, 360],
-  outputRange: ['0deg', '360deg'],
-});
-```
-
-`interpolate()` also supports arbitrary easing functions, many of which are already implemented in the [`Easing`](easing) module. `interpolate()` also has configurable behavior for extrapolating the `outputRange`. You can set the extrapolation by setting the `extrapolate`, `extrapolateLeft`, or `extrapolateRight` options. The default value is `extend` but you can use `clamp` to prevent the output value from exceeding `outputRange`.
-
-### Tracking dynamic values
-
-Animated values can also track other values by setting the `toValue` of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a `spring()` pinned on another animated value, or with `timing()` and a `duration` of 0 for rigid tracking. They can also be composed with interpolations:
-
-```tsx
-Animated.spring(follower, {toValue: leader}).start();
-Animated.timing(opacity, {
-  toValue: pan.x.interpolate({
-    inputRange: [0, 300],
-    outputRange: [1, 0],
-  }),
-  useNativeDriver: true,
-}).start();
-```
-
-The `leader` and `follower` animated values would be implemented using `Animated.ValueXY()`. `ValueXY` is a handy way to deal with 2D interactions, such as panning or dragging. It is a basic wrapper that contains two `Animated.Value` instances and some helper functions that call through to them, making `ValueXY` a drop-in replacement for `Value` in many cases. It allows us to track both x and y values in the example above.
-
-### Tracking gestures
-
-Gestures, like panning or scrolling, and other events can map directly to animated values using [`Animated.event`](animated#event). This is done with a structured map syntax so that values can be extracted from complex event objects. The first level is an array to allow mapping across multiple args, and that array contains nested objects.
-
-For example, when working with horizontal scrolling gestures, you would do the following in order to map `event.nativeEvent.contentOffset.x` to `scrollX` (an `Animated.Value`):
-
-```tsx
- onScroll={Animated.event(
-   // scrollX = e.nativeEvent.contentOffset.x
-   [{nativeEvent: {
-        contentOffset: {
-          x: scrollX
-        }
-      }
-    }]
- )}
-```
-
-The following example implements a horizontal scrolling carousel where the scroll position indicators are animated using the `Animated.event` used in the `ScrollView`
-
-#### ScrollView with Animated Event Example
-
-```SnackPlayer name=Animated&supportedPlatforms=ios,android
-import React from 'react';
-import {
-  ScrollView,
-  Text,
-  StyleSheet,
-  View,
-  ImageBackground,
-  Animated,
-  useWindowDimensions,
-  useAnimatedValue,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const images = new Array(6).fill(
-  'https://images.unsplash.com/photo-1556740749-887f6717d7e4',
-);
-
-const App = () => {
-  const scrollX = useAnimatedValue(0);
-
-  const {width: windowWidth} = useWindowDimensions();
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.scrollContainer}>
-          <ScrollView
-            horizontal={true}
-            pagingEnabled
-            showsHorizontalScrollIndicator={false}
-            onScroll={Animated.event([
-              {
-                nativeEvent: {
-                  contentOffset: {
-                    x: scrollX,
-                  },
-                },
-              },
-            ])}
-            scrollEventThrottle={1}>
-            {images.map((image, imageIndex) => {
-              return (
-                <View
-                  style={{width: windowWidth, height: 250}}
-                  key={imageIndex}>
-                  <ImageBackground source={{uri: image}} style={styles.card}>
-                    <View style={styles.textContainer}>
-                      <Text style={styles.infoText}>
-                        {'Image - ' + imageIndex}
-                      </Text>
-                    </View>
-                  </ImageBackground>
-                </View>
-              );
-            })}
-          </ScrollView>
-          <View style={styles.indicatorContainer}>
-            {images.map((image, imageIndex) => {
-              const width = scrollX.interpolate({
-                inputRange: [
-                  windowWidth * (imageIndex - 1),
-                  windowWidth * imageIndex,
-                  windowWidth * (imageIndex + 1),
-                ],
-                outputRange: [8, 16, 8],
-                extrapolate: 'clamp',
-              });
-              return (
-                <Animated.View
-                  key={imageIndex}
-                  style={[styles.normalDot, {width}]}
-                />
-              );
-            })}
-          </View>
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  scrollContainer: {
-    height: 300,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  card: {
-    flex: 1,
-    marginVertical: 4,
-    marginHorizontal: 16,
-    borderRadius: 5,
-    overflow: 'hidden',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  textContainer: {
-    backgroundColor: 'rgba(0,0,0, 0.7)',
-    paddingHorizontal: 24,
-    paddingVertical: 8,
-    borderRadius: 5,
-  },
-  infoText: {
-    color: 'white',
-    fontSize: 16,
-    fontWeight: 'bold',
-  },
-  normalDot: {
-    height: 8,
-    width: 8,
-    borderRadius: 4,
-    backgroundColor: 'silver',
-    marginHorizontal: 4,
-  },
-  indicatorContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-
-export default App;
-```
-
-When using `PanResponder`, you could use the following code to extract the x and y positions from `gestureState.dx` and `gestureState.dy`. We use a `null` in the first position of the array, as we are only interested in the second argument passed to the `PanResponder` handler, which is the `gestureState`.
-
-```tsx
-onPanResponderMove={Animated.event(
-  [null, // ignore the native event
-  // extract dx and dy from gestureState
-  // like 'pan.x = gestureState.dx, pan.y = gestureState.dy'
-  {dx: pan.x, dy: pan.y}
-])}
-```
-
-#### PanResponder with Animated Event Example
-
-```SnackPlayer name=Animated
-import React, {useRef} from 'react';
-import {Animated, View, StyleSheet, PanResponder, Text} from 'react-native';
-
-const App = () => {
-  const pan = useRef(new Animated.ValueXY()).current;
-  const panResponder = useRef(
-    PanResponder.create({
-      onMoveShouldSetPanResponder: () => true,
-      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
-      onPanResponderRelease: () => {
-        Animated.spring(pan, {
-          toValue: {x: 0, y: 0},
-          useNativeDriver: true,
-        }).start();
-      },
-    }),
-  ).current;
-
-  return (
-    <View style={styles.container}>
-      <Text style={styles.titleText}>Drag & Release this box!</Text>
-      <Animated.View
-        style={{
-          transform: [{translateX: pan.x}, {translateY: pan.y}],
-        }}
-        {...panResponder.panHandlers}>
-        <View style={styles.box} />
-      </Animated.View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  titleText: {
-    fontSize: 14,
-    lineHeight: 24,
-    fontWeight: 'bold',
-  },
-  box: {
-    height: 150,
-    width: 150,
-    backgroundColor: 'blue',
-    borderRadius: 5,
-  },
-});
-
-export default App;
-```
-
-### Responding to the current animation value
-
-You may notice that there is no clear way to read the current value while animating. This is because the value may only be known in the native runtime due to optimizations. If you need to run JavaScript in response to the current value, there are two approaches:
-
-- `spring.stopAnimation(callback)` will stop the animation and invoke `callback` with the final value. This is useful when making gesture transitions.
-- `spring.addListener(callback)` will invoke `callback` asynchronously while the animation is running, providing a recent value. This is useful for triggering state changes, for example snapping a bobble to a new option as the user drags it closer, because these larger state changes are less sensitive to a few frames of lag compared to continuous gestures like panning which need to run at 60 fps.
-
-`Animated` is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Check out `Animated.Value.addListener` as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.
-
-### Using the native driver
-
-The `Animated` API is designed to be serializable. By using the [native driver](/blog/2017/02/14/using-native-driver-for-animated), we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.
-
-Using the native driver for normal animations can be accomplished by setting `useNativeDriver: true` in animation config when starting it. Animations without a `useNativeDriver` property will default to false for legacy reasons, but emit a warning (and typechecking error in TypeScript).
-
-```tsx
-Animated.timing(this.state.animatedValue, {
-  toValue: 1,
-  duration: 500,
-  useNativeDriver: true, // <-- Set this to true
-}).start();
-```
-
-Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
-
-The native driver also works with `Animated.event`. This is especially useful for animations that follow the scroll position as without the native driver, the animation will always run a frame behind the gesture due to the async nature of React Native.
-
-```tsx
-<Animated.ScrollView // <-- Use the Animated ScrollView wrapper
-  onScroll={Animated.event(
-    [
-      {
-        nativeEvent: {
-          contentOffset: {y: this.state.animatedValue},
-        },
-      },
-    ],
-    {useNativeDriver: true}, // <-- Set this to true
-  )}>
-  {content}
-</Animated.ScrollView>
-```
-
-You can see the native driver in action by running the [RNTester app](https://github.com/facebook/react-native/blob/main/packages/rn-tester/), then loading the Native Animated Example. You can also take a look at the [source code](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js) to learn how these examples were produced.
-
-#### Caveats
-
-Not everything you can do with `Animated` is currently supported by the native driver. The main limitation is that you can only animate non-layout properties: things like `transform` and `opacity` will work, but Flexbox and position properties will not. When using `Animated.event`, it will only work with direct events and not bubbling events. This means it does not work with `PanResponder` but does work with things like `ScrollView#onScroll`.
-
-When an animation is running, it can prevent `VirtualizedList` components from rendering more rows. If you need to run a long or looping animation while the user is scrolling through a list, you can use `isInteraction: false` in your animation's config to prevent this issue.
-
-### Bear in mind
-
-While using transform styles such as `rotateY`, `rotateX`, and others ensure the transform style `perspective` is in place. At this time some animations may not render on Android without it. Example below.
-
-```tsx
-<Animated.View
-  style={{
-    transform: [
-      {scale: this.state.scale},
-      {rotateY: this.state.rotateY},
-      {perspective: 1000}, // without this line this Animation will not render on Android while working fine on iOS
-    ],
-  }}
-/>
-```
-
-### Additional examples
-
-The RNTester app has various examples of `Animated` in use:
-
-- [AnimatedGratuitousApp](https://github.com/facebook/react-native/tree/main/packages/rn-tester/js/examples/AnimatedGratuitousApp)
-- [NativeAnimationsExample](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js)
-
-## `LayoutAnimation` API
-
-`LayoutAnimation` allows you to globally configure `create` and `update` animations that will be used for all views in the next render/layout cycle. This is useful for doing Flexbox layout updates without bothering to measure or calculate specific properties in order to animate them directly, and is especially useful when layout changes may affect ancestors, for example a "see more" expansion that also increases the size of the parent and pushes down the row below which would otherwise require explicit coordination between the components in order to animate them all in sync.
-
-Note that although `LayoutAnimation` is very powerful and can be quite useful, it provides much less control than `Animated` and other animation libraries, so you may need to use another approach if you can't get `LayoutAnimation` to do what you want.
-
-Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`:
-
-```tsx
-UIManager.setLayoutAnimationEnabledExperimental(true);
-```
-
-```SnackPlayer name=LayoutAnimations
-import React, {useState} from 'react';
-import {
-  NativeModules,
-  LayoutAnimation,
-  Text,
-  TouchableOpacity,
-  StyleSheet,
-  View,
-} from 'react-native';
-
-const {UIManager} = NativeModules;
-
-UIManager.setLayoutAnimationEnabledExperimental &&
-  UIManager.setLayoutAnimationEnabledExperimental(true);
-
-export default function App() {
-  const [state, setState] = useState({
-    w: 100,
-    h: 100,
-  });
-
-  const onPress = () => {
-    // Animate the update
-    LayoutAnimation.spring();
-    setState({w: state.w + 15, h: state.h + 15});
-  };
-
-  return (
-    <View style={styles.container}>
-      <View style={[styles.box, {width: state.w, height: state.h}]} />
-      <TouchableOpacity onPress={onPress}>
-        <View style={styles.button}>
-          <Text style={styles.buttonText}>Press me!</Text>
-        </View>
-      </TouchableOpacity>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  box: {
-    width: 200,
-    height: 200,
-    backgroundColor: 'red',
-  },
-  button: {
-    backgroundColor: 'black',
-    paddingHorizontal: 20,
-    paddingVertical: 15,
-    marginTop: 15,
-  },
-  buttonText: {
-    color: '#fff',
-    fontWeight: 'bold',
-  },
-});
-```
-
-This example uses a preset value, you can customize the animations as you need, see [LayoutAnimation.js](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/LayoutAnimation/LayoutAnimation.js) for more information.
-
-## Additional notes
-
-### `requestAnimationFrame`
-
-`requestAnimationFrame` is a polyfill from the browser that you might be familiar with. It accepts a function as its only argument and calls that function before the next repaint. It is an essential building block for animations that underlies all of the JavaScript-based animation APIs. In general, you shouldn't need to call this yourself - the animation APIs will manage frame updates for you.
-
-### `setNativeProps`
-
-As mentioned [in the Direct Manipulation section](legacy/direct-manipulation), `setNativeProps` allows us to modify properties of native-backed components (components that are actually backed by native views, unlike composite components) directly, without having to `setState` and re-render the component hierarchy.
-
-We could use this in the Rebound example to update the scale - this might be helpful if the component that we are updating is deeply nested and hasn't been optimized with `shouldComponentUpdate`.
-
-If you find your animations with dropping frames (performing below 60 frames per second), look into using `setNativeProps` or `shouldComponentUpdate` to optimize them. Or you could run the animations on the UI thread rather than the JavaScript thread [with the useNativeDriver option](/blog/2017/02/14/using-native-driver-for-animated). You may also want to defer any computationally intensive work until after animations are complete, using the [InteractionManager](interactionmanager). You can monitor the frame rate by using the In-App Dev Menu "FPS Monitor" tool.
+---
+id: animations
+title: Animations
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface.
+
+React Native provides two complementary animation systems: [`Animated`](animations#animated-api) for granular and interactive control of specific values, and [`LayoutAnimation`](animations#layoutanimation-api) for animated global layout transactions.
+
+## `Animated` API
+
+The [`Animated`](animated) API is designed to concisely express a wide variety of interesting animation and interaction patterns in a very performant way. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and `start`/`stop` methods to control time-based animation execution.
+
+`Animated` exports six animatable component types: `View`, `Text`, `Image`, `ScrollView`, `FlatList` and `SectionList`, but you can also create your own using `Animated.createAnimatedComponent()`.
+
+For example, a container view that fades in when it is mounted may look like this:
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer ext=js
+import {useEffect, useRef} from 'react';
+import {Animated, Text, View} from 'react-native';
+
+const FadeInView = props => {
+  const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
+
+  useEffect(() => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 10000,
+      useNativeDriver: true,
+    }).start();
+  }, [fadeAnim]);
+
+  return (
+    <Animated.View // Special animatable View
+      style={{
+        ...props.style,
+        opacity: fadeAnim, // Bind opacity to animated value
+      }}>
+      {props.children}
+    </Animated.View>
+  );
+};
+
+// You can then use your `FadeInView` in place of a `View` in your components:
+export default () => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+      <FadeInView
+        style={{
+          width: 250,
+          height: 50,
+          backgroundColor: 'powderblue',
+        }}>
+        <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>
+          Fading in
+        </Text>
+      </FadeInView>
+    </View>
+  );
+};
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer ext=tsx
+import {useEffect, useRef, type PropsWithChildren, type FC} from 'react';
+import {Animated, Text, View, type ViewStyle} from 'react-native';
+
+type FadeInViewProps = PropsWithChildren<{style: ViewStyle}>;
+
+const FadeInView: FC<FadeInViewProps> = props => {
+  const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
+
+  useEffect(() => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 10000,
+      useNativeDriver: true,
+    }).start();
+  }, [fadeAnim]);
+
+  return (
+    <Animated.View // Special animatable View
+      style={{
+        ...props.style,
+        opacity: fadeAnim, // Bind opacity to animated value
+      }}>
+      {props.children}
+    </Animated.View>
+  );
+};
+
+// You can then use your `FadeInView` in place of a `View` in your components:
+export default () => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+      <FadeInView
+        style={{
+          width: 250,
+          height: 50,
+          backgroundColor: 'powderblue',
+        }}>
+        <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>
+          Fading in
+        </Text>
+      </FadeInView>
+    </View>
+  );
+};
+```
+
+</TabItem>
+</Tabs>
+
+Let's break down what's happening here. In the `FadeInView` render method, a new `Animated.Value` called `fadeAnim` is initialized with `useRef`. The opacity property on the `View` is mapped to this animated value. Behind the scenes, the numeric value is extracted and used to set opacity.
+
+When the component mounts, the opacity is set to 0. Then, an easing animation is started on the `fadeAnim` animated value, which will update all of its dependent mappings (in this case, only the opacity) on each frame as the value animates to the final value of 1.
+
+This is done in an optimized way that is faster than calling `setState` and re-rendering. Because the entire configuration is declarative, we will be able to implement further optimizations that serialize the configuration and runs the animation on a high-priority thread.
+
+### Configuring animations
+
+Animations are heavily configurable. Custom and predefined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.
+
+`Animated` provides several animation types, the most commonly used one being [`Animated.timing()`](animated#timing). It supports animating a value over time using one of various predefined easing functions, or you can use your own. Easing functions are typically used in animation to convey gradual acceleration and deceleration of objects.
+
+By default, `timing` will use an easeInOut curve that conveys gradual acceleration to full speed and concludes by gradually decelerating to a stop. You can specify a different easing function by passing an `easing` parameter. Custom `duration` or even a `delay` before the animation starts is also supported.
+
+For example, if we want to create a 2-second long animation of an object that slightly backs up before moving to its final position:
+
+```tsx
+Animated.timing(this.state.xPosition, {
+  toValue: 100,
+  easing: Easing.back(),
+  duration: 2000,
+  useNativeDriver: true,
+}).start();
+```
+
+Take a look at the [Configuring animations](animated#configuring-animations) section of the `Animated` API reference to learn more about all the config parameters supported by the built-in animations.
+
+### Composing animations
+
+Animations can be combined and played in sequence or in parallel. Sequential animations can play immediately after the previous animation has finished, or they can start after a specified delay. The `Animated` API provides several methods, such as `sequence()` and `delay()`, each of which take an array of animations to execute and automatically calls `start()`/`stop()` as needed.
+
+For example, the following animation coasts to a stop, then it springs back while twirling in parallel:
+
+```tsx
+Animated.sequence([
+  // decay, then spring to start and twirl
+  Animated.decay(position, {
+    // coast to a stop
+    velocity: {x: gestureState.vx, y: gestureState.vy}, // velocity from gesture release
+    deceleration: 0.997,
+    useNativeDriver: true,
+  }),
+  Animated.parallel([
+    // after decay, in parallel:
+    Animated.spring(position, {
+      toValue: {x: 0, y: 0}, // return to start
+      useNativeDriver: true,
+    }),
+    Animated.timing(twirl, {
+      // and twirl
+      toValue: 360,
+      useNativeDriver: true,
+    }),
+  ]),
+]).start(); // start the sequence group
+```
+
+If one animation is stopped or interrupted, then all other animations in the group are also stopped. `Animated.parallel` has a `stopTogether` option that can be set to `false` to disable this.
+
+You can find a full list of composition methods in the [Composing animations](animated#composing-animations) section of the `Animated` API reference.
+
+### Combining animated values
+
+You can [combine two animated values](animated#combining-animated-values) via addition, multiplication, division, or modulo to make a new animated value.
+
+There are some cases where an animated value needs to invert another animated value for calculation. An example is inverting a scale (2x --> 0.5x):
+
+```tsx
+const a = new Animated.Value(1);
+const b = Animated.divide(1, a);
+
+Animated.spring(a, {
+  toValue: 2,
+  useNativeDriver: true,
+}).start();
+```
+
+### Interpolation
+
+Each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.
+
+A basic mapping to convert a 0-1 range to a 0-100 range would be:
+
+```tsx
+value.interpolate({
+  inputRange: [0, 1],
+  outputRange: [0, 100],
+});
+```
+
+For example, you may want to think about your `Animated.Value` as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying `style` from the example above like so:
+
+```tsx
+  style={{
+    opacity: this.state.fadeAnim, // Binds directly
+    transform: [{
+      translateY: this.state.fadeAnim.interpolate({
+        inputRange: [0, 1],
+        outputRange: [150, 0]  // 0 : 150, 0.5 : 75, 1 : 0
+      }),
+    }],
+  }}
+```
+
+[`interpolate()`](animated#interpolate) supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
+
+```tsx
+value.interpolate({
+  inputRange: [-300, -100, 0, 100, 101],
+  outputRange: [300, 0, 1, 0, 0],
+});
+```
+
+Which would map like so:
+
+```
+Input | Output
+------|-------
+  -400|    450
+  -300|    300
+  -200|    150
+  -100|      0
+   -50|    0.5
+     0|      1
+    50|    0.5
+   100|      0
+   101|      0
+   200|      0
+```
+
+`interpolate()` also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
+
+```tsx
+value.interpolate({
+  inputRange: [0, 360],
+  outputRange: ['0deg', '360deg'],
+});
+```
+
+`interpolate()` also supports arbitrary easing functions, many of which are already implemented in the [`Easing`](easing) module. `interpolate()` also has configurable behavior for extrapolating the `outputRange`. You can set the extrapolation by setting the `extrapolate`, `extrapolateLeft`, or `extrapolateRight` options. The default value is `extend` but you can use `clamp` to prevent the output value from exceeding `outputRange`.
+
+### Tracking dynamic values
+
+Animated values can also track other values by setting the `toValue` of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a `spring()` pinned on another animated value, or with `timing()` and a `duration` of 0 for rigid tracking. They can also be composed with interpolations:
+
+```tsx
+Animated.spring(follower, {toValue: leader}).start();
+Animated.timing(opacity, {
+  toValue: pan.x.interpolate({
+    inputRange: [0, 300],
+    outputRange: [1, 0],
+  }),
+  useNativeDriver: true,
+}).start();
+```
+
+The `leader` and `follower` animated values would be implemented using `Animated.ValueXY()`. `ValueXY` is a handy way to deal with 2D interactions, such as panning or dragging. It is a basic wrapper that contains two `Animated.Value` instances and some helper functions that call through to them, making `ValueXY` a drop-in replacement for `Value` in many cases. It allows us to track both x and y values in the example above.
+
+### Tracking gestures
+
+Gestures, like panning or scrolling, and other events can map directly to animated values using [`Animated.event`](animated#event). This is done with a structured map syntax so that values can be extracted from complex event objects. The first level is an array to allow mapping across multiple args, and that array contains nested objects.
+
+For example, when working with horizontal scrolling gestures, you would do the following in order to map `event.nativeEvent.contentOffset.x` to `scrollX` (an `Animated.Value`):
+
+```tsx
+ onScroll={Animated.event(
+   // scrollX = e.nativeEvent.contentOffset.x
+   [{nativeEvent: {
+        contentOffset: {
+          x: scrollX
+        }
+      }
+    }]
+ )}
+```
+
+The following example implements a horizontal scrolling carousel where the scroll position indicators are animated using the `Animated.event` used in the `ScrollView`
+
+#### ScrollView with Animated Event Example
+
+```SnackPlayer name=Animated&supportedPlatforms=ios,android
+import {
+  ScrollView,
+  Text,
+  StyleSheet,
+  View,
+  ImageBackground,
+  Animated,
+  useWindowDimensions,
+  useAnimatedValue,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const images = new Array(6).fill(
+  'https://images.unsplash.com/photo-1556740749-887f6717d7e4',
+);
+
+const App = () => {
+  const scrollX = useAnimatedValue(0);
+
+  const {width: windowWidth} = useWindowDimensions();
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.scrollContainer}>
+          <ScrollView
+            horizontal={true}
+            pagingEnabled
+            showsHorizontalScrollIndicator={false}
+            onScroll={Animated.event([
+              {
+                nativeEvent: {
+                  contentOffset: {
+                    x: scrollX,
+                  },
+                },
+              },
+            ])}
+            scrollEventThrottle={1}>
+            {images.map((image, imageIndex) => {
+              return (
+                <View
+                  style={{width: windowWidth, height: 250}}
+                  key={imageIndex}>
+                  <ImageBackground source={{uri: image}} style={styles.card}>
+                    <View style={styles.textContainer}>
+                      <Text style={styles.infoText}>
+                        {'Image - ' + imageIndex}
+                      </Text>
+                    </View>
+                  </ImageBackground>
+                </View>
+              );
+            })}
+          </ScrollView>
+          <View style={styles.indicatorContainer}>
+            {images.map((image, imageIndex) => {
+              const width = scrollX.interpolate({
+                inputRange: [
+                  windowWidth * (imageIndex - 1),
+                  windowWidth * imageIndex,
+                  windowWidth * (imageIndex + 1),
+                ],
+                outputRange: [8, 16, 8],
+                extrapolate: 'clamp',
+              });
+              return (
+                <Animated.View
+                  key={imageIndex}
+                  style={[styles.normalDot, {width}]}
+                />
+              );
+            })}
+          </View>
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  scrollContainer: {
+    height: 300,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  card: {
+    flex: 1,
+    marginVertical: 4,
+    marginHorizontal: 16,
+    borderRadius: 5,
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  textContainer: {
+    backgroundColor: 'rgba(0,0,0, 0.7)',
+    paddingHorizontal: 24,
+    paddingVertical: 8,
+    borderRadius: 5,
+  },
+  infoText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  normalDot: {
+    height: 8,
+    width: 8,
+    borderRadius: 4,
+    backgroundColor: 'silver',
+    marginHorizontal: 4,
+  },
+  indicatorContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default App;
+```
+
+When using `PanResponder`, you could use the following code to extract the x and y positions from `gestureState.dx` and `gestureState.dy`. We use a `null` in the first position of the array, as we are only interested in the second argument passed to the `PanResponder` handler, which is the `gestureState`.
+
+```tsx
+onPanResponderMove={Animated.event(
+  [null, // ignore the native event
+  // extract dx and dy from gestureState
+  // like 'pan.x = gestureState.dx, pan.y = gestureState.dy'
+  {dx: pan.x, dy: pan.y}
+])}
+```
+
+#### PanResponder with Animated Event Example
+
+```SnackPlayer name=Animated
+import {useRef} from 'react';
+import {Animated, View, StyleSheet, PanResponder, Text} from 'react-native';
+
+const App = () => {
+  const pan = useRef(new Animated.ValueXY()).current;
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
+      onPanResponderRelease: () => {
+        Animated.spring(pan, {
+          toValue: {x: 0, y: 0},
+          useNativeDriver: true,
+        }).start();
+      },
+    }),
+  ).current;
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.titleText}>Drag & Release this box!</Text>
+      <Animated.View
+        style={{
+          transform: [{translateX: pan.x}, {translateY: pan.y}],
+        }}
+        {...panResponder.panHandlers}>
+        <View style={styles.box} />
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  titleText: {
+    fontSize: 14,
+    lineHeight: 24,
+    fontWeight: 'bold',
+  },
+  box: {
+    height: 150,
+    width: 150,
+    backgroundColor: 'blue',
+    borderRadius: 5,
+  },
+});
+
+export default App;
+```
+
+### Responding to the current animation value
+
+You may notice that there is no clear way to read the current value while animating. This is because the value may only be known in the native runtime due to optimizations. If you need to run JavaScript in response to the current value, there are two approaches:
+
+- `spring.stopAnimation(callback)` will stop the animation and invoke `callback` with the final value. This is useful when making gesture transitions.
+- `spring.addListener(callback)` will invoke `callback` asynchronously while the animation is running, providing a recent value. This is useful for triggering state changes, for example snapping a bobble to a new option as the user drags it closer, because these larger state changes are less sensitive to a few frames of lag compared to continuous gestures like panning which need to run at 60 fps.
+
+`Animated` is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Check out `Animated.Value.addListener` as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.
+
+### Using the native driver
+
+The `Animated` API is designed to be serializable. By using the [native driver](/blog/2017/02/14/using-native-driver-for-animated), we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.
+
+Using the native driver for normal animations can be accomplished by setting `useNativeDriver: true` in animation config when starting it. Animations without a `useNativeDriver` property will default to false for legacy reasons, but emit a warning (and typechecking error in TypeScript).
+
+```tsx
+Animated.timing(this.state.animatedValue, {
+  toValue: 1,
+  duration: 500,
+  useNativeDriver: true, // <-- Set this to true
+}).start();
+```
+
+Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
+
+The native driver also works with `Animated.event`. This is especially useful for animations that follow the scroll position as without the native driver, the animation will always run a frame behind the gesture due to the async nature of React Native.
+
+```tsx
+<Animated.ScrollView // <-- Use the Animated ScrollView wrapper
+  onScroll={Animated.event(
+    [
+      {
+        nativeEvent: {
+          contentOffset: {y: this.state.animatedValue},
+        },
+      },
+    ],
+    {useNativeDriver: true}, // <-- Set this to true
+  )}>
+  {content}
+</Animated.ScrollView>
+```
+
+You can see the native driver in action by running the [RNTester app](https://github.com/facebook/react-native/blob/main/packages/rn-tester/), then loading the Native Animated Example. You can also take a look at the [source code](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js) to learn how these examples were produced.
+
+#### Caveats
+
+Not everything you can do with `Animated` is currently supported by the native driver. The main limitation is that you can only animate non-layout properties: things like `transform` and `opacity` will work, but Flexbox and position properties will not. When using `Animated.event`, it will only work with direct events and not bubbling events. This means it does not work with `PanResponder` but does work with things like `ScrollView#onScroll`.
+
+When an animation is running, it can prevent `VirtualizedList` components from rendering more rows. If you need to run a long or looping animation while the user is scrolling through a list, you can use `isInteraction: false` in your animation's config to prevent this issue.
+
+### Bear in mind
+
+While using transform styles such as `rotateY`, `rotateX`, and others ensure the transform style `perspective` is in place. At this time some animations may not render on Android without it. Example below.
+
+```tsx
+<Animated.View
+  style={{
+    transform: [
+      {scale: this.state.scale},
+      {rotateY: this.state.rotateY},
+      {perspective: 1000}, // without this line this Animation will not render on Android while working fine on iOS
+    ],
+  }}
+/>
+```
+
+### Additional examples
+
+The RNTester app has various examples of `Animated` in use:
+
+- [AnimatedGratuitousApp](https://github.com/facebook/react-native/tree/main/packages/rn-tester/js/examples/AnimatedGratuitousApp)
+- [NativeAnimationsExample](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js)
+
+## `LayoutAnimation` API
+
+`LayoutAnimation` allows you to globally configure `create` and `update` animations that will be used for all views in the next render/layout cycle. This is useful for doing Flexbox layout updates without bothering to measure or calculate specific properties in order to animate them directly, and is especially useful when layout changes may affect ancestors, for example a "see more" expansion that also increases the size of the parent and pushes down the row below which would otherwise require explicit coordination between the components in order to animate them all in sync.
+
+Note that although `LayoutAnimation` is very powerful and can be quite useful, it provides much less control than `Animated` and other animation libraries, so you may need to use another approach if you can't get `LayoutAnimation` to do what you want.
+
+Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`:
+
+```tsx
+UIManager.setLayoutAnimationEnabledExperimental(true);
+```
+
+```SnackPlayer name=LayoutAnimations
+import {useState} from 'react';
+import {
+  NativeModules,
+  LayoutAnimation,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  View,
+} from 'react-native';
+
+const {UIManager} = NativeModules;
+
+UIManager.setLayoutAnimationEnabledExperimental &&
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+
+export default function App() {
+  const [state, setState] = useState({
+    w: 100,
+    h: 100,
+  });
+
+  const onPress = () => {
+    // Animate the update
+    LayoutAnimation.spring();
+    setState({w: state.w + 15, h: state.h + 15});
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={[styles.box, {width: state.w, height: state.h}]} />
+      <TouchableOpacity onPress={onPress}>
+        <View style={styles.button}>
+          <Text style={styles.buttonText}>Press me!</Text>
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  box: {
+    width: 200,
+    height: 200,
+    backgroundColor: 'red',
+  },
+  button: {
+    backgroundColor: 'black',
+    paddingHorizontal: 20,
+    paddingVertical: 15,
+    marginTop: 15,
+  },
+  buttonText: {
+    color: '#fff',
+    fontWeight: 'bold',
+  },
+});
+```
+
+This example uses a preset value, you can customize the animations as you need, see [LayoutAnimation.js](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/LayoutAnimation/LayoutAnimation.js) for more information.
+
+## Additional notes
+
+### `requestAnimationFrame`
+
+`requestAnimationFrame` is a polyfill from the browser that you might be familiar with. It accepts a function as its only argument and calls that function before the next repaint. It is an essential building block for animations that underlies all of the JavaScript-based animation APIs. In general, you shouldn't need to call this yourself - the animation APIs will manage frame updates for you.
+
+### `setNativeProps`
+
+As mentioned [in the Direct Manipulation section](legacy/direct-manipulation), `setNativeProps` allows us to modify properties of native-backed components (components that are actually backed by native views, unlike composite components) directly, without having to `setState` and re-render the component hierarchy.
+
+We could use this in the Rebound example to update the scale - this might be helpful if the component that we are updating is deeply nested and hasn't been optimized with `shouldComponentUpdate`.
+
+If you find your animations with dropping frames (performing below 60 frames per second), look into using `setNativeProps` or `shouldComponentUpdate` to optimize them. Or you could run the animations on the UI thread rather than the JavaScript thread [with the useNativeDriver option](/blog/2017/02/14/using-native-driver-for-animated). You may also want to defer any computationally intensive work until after animations are complete, using the [InteractionManager](interactionmanager). You can monitor the frame rate by using the In-App Dev Menu "FPS Monitor" tool.
diff --git a/website/versioned_docs/version-0.83/appstate.md b/website/versioned_docs/version-0.83/appstate.md
index b776907d3e1..4980ef439da 100644
--- a/website/versioned_docs/version-0.83/appstate.md
+++ b/website/versioned_docs/version-0.83/appstate.md
@@ -1,122 +1,122 @@
----
-id: appstate
-title: AppState
----
-
-`AppState` can tell you if the app is in the foreground or background, and notify you when the state changes.
-
-AppState is frequently used to determine the intent and proper behavior when handling push notifications.
-
-### App States
-
-- `active` - The app is running in the foreground
-- `background` - The app is running in the background. The user is either:
-  - in another app
-  - on the home screen
-  - [Android] on another `Activity`, including temporary system activities such
-    as autofill credential pickers (even if launched by your app or the system)
-- [iOS] `inactive` - This is a state that occurs when transitioning between foreground & background, and during periods of inactivity such as entering the multitasking view, opening the Notification Center or in the event of an incoming call.
-
-For more information, see [Apple's documentation](https://developer.apple.com/documentation/uikit/app_and_scenes/managing_your_app_s_life_cycle)
-
-## Basic Usage
-
-To see the current state, you can check `AppState.currentState`, which will be kept up-to-date.
-
-:::info
-If you are using the legacy architecture, `currentState` will be `null` at launch until it is retrieved asynchronously from the native side.
-:::
-
-```SnackPlayer name=AppState%20Example
-import React, {useRef, useState, useEffect} from 'react';
-import {AppState, StyleSheet, Text} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const AppStateExample = () => {
-  const appState = useRef(AppState.currentState);
-  const [appStateVisible, setAppStateVisible] = useState(appState.current);
-
-  useEffect(() => {
-    const subscription = AppState.addEventListener('change', nextAppState => {
-      if (
-        appState.current.match(/inactive|background/) &&
-        nextAppState === 'active'
-      ) {
-        console.log('App has come to the foreground!');
-      }
-
-      appState.current = nextAppState;
-      setAppStateVisible(appState.current);
-      console.log('AppState', appState.current);
-    });
-
-    return () => {
-      subscription.remove();
-    };
-  }, []);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>Current state is: {appStateVisible}</Text>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default AppStateExample;
-```
-
-This example will only ever appear to say "Current state is: active" because the app is only visible to the user when in the `active` state. If you want to experiment with the code we recommend to use your own device instead of embedded preview.
-
----
-
-# Reference
-
-## Events
-
-### `change`
-
-This event is received when the app state has changed. The listener is called with one of [the current app state values](appstate#app-states).
-
-### `memoryWarning` <div className="label ios">iOS</div>
-
-Fires when the app receives a memory warning from the operating system.
-
-### `focus` <div className="label android">Android</div>
-
-Received when the app gains focus (the user is interacting with the app).
-
-### `blur` <div className="label android">Android</div>
-
-Received when the user is not actively interacting with the app. Useful in situations when the user pulls down the [notification drawer](https://developer.android.com/guide/topics/ui/notifiers/notifications#bar-and-drawer). `AppState` won't change but the `blur` event will get fired.
-
-## Methods
-
-### `addEventListener()`
-
-```tsx
-static addEventListener(
-  type: AppStateEvent,
-  listener: (state: AppStateStatus) => void,
-): NativeEventSubscription;
-```
-
-Sets up a function that will be called whenever the specified event type on AppState occurs. Valid values for `eventType` are
-[listed above](#events). Returns the `EventSubscription`.
-
-## Properties
-
-### `currentState`
-
-```tsx
-static currentState: AppStateStatus;
-```
+---
+id: appstate
+title: AppState
+---
+
+`AppState` can tell you if the app is in the foreground or background, and notify you when the state changes.
+
+AppState is frequently used to determine the intent and proper behavior when handling push notifications.
+
+### App States
+
+- `active` - The app is running in the foreground
+- `background` - The app is running in the background. The user is either:
+  - in another app
+  - on the home screen
+  - [Android] on another `Activity`, including temporary system activities such
+    as autofill credential pickers (even if launched by your app or the system)
+- [iOS] `inactive` - This is a state that occurs when transitioning between foreground & background, and during periods of inactivity such as entering the multitasking view, opening the Notification Center or in the event of an incoming call.
+
+For more information, see [Apple's documentation](https://developer.apple.com/documentation/uikit/app_and_scenes/managing_your_app_s_life_cycle)
+
+## Basic Usage
+
+To see the current state, you can check `AppState.currentState`, which will be kept up-to-date.
+
+:::info
+If you are using the legacy architecture, `currentState` will be `null` at launch until it is retrieved asynchronously from the native side.
+:::
+
+```SnackPlayer name=AppState%20Example
+import {useRef, useState, useEffect} from 'react';
+import {AppState, StyleSheet, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const AppStateExample = () => {
+  const appState = useRef(AppState.currentState);
+  const [appStateVisible, setAppStateVisible] = useState(appState.current);
+
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', nextAppState => {
+      if (
+        appState.current.match(/inactive|background/) &&
+        nextAppState === 'active'
+      ) {
+        console.log('App has come to the foreground!');
+      }
+
+      appState.current = nextAppState;
+      setAppStateVisible(appState.current);
+      console.log('AppState', appState.current);
+    });
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>Current state is: {appStateVisible}</Text>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default AppStateExample;
+```
+
+This example will only ever appear to say "Current state is: active" because the app is only visible to the user when in the `active` state. If you want to experiment with the code we recommend to use your own device instead of embedded preview.
+
+---
+
+# Reference
+
+## Events
+
+### `change`
+
+This event is received when the app state has changed. The listener is called with one of [the current app state values](appstate#app-states).
+
+### `memoryWarning` <div className="label ios">iOS</div>
+
+Fires when the app receives a memory warning from the operating system.
+
+### `focus` <div className="label android">Android</div>
+
+Received when the app gains focus (the user is interacting with the app).
+
+### `blur` <div className="label android">Android</div>
+
+Received when the user is not actively interacting with the app. Useful in situations when the user pulls down the [notification drawer](https://developer.android.com/guide/topics/ui/notifiers/notifications#bar-and-drawer). `AppState` won't change but the `blur` event will get fired.
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+  type: AppStateEvent,
+  listener: (state: AppStateStatus) => void,
+): NativeEventSubscription;
+```
+
+Sets up a function that will be called whenever the specified event type on AppState occurs. Valid values for `eventType` are
+[listed above](#events). Returns the `EventSubscription`.
+
+## Properties
+
+### `currentState`
+
+```tsx
+static currentState: AppStateStatus;
+```
diff --git a/website/versioned_docs/version-0.83/backhandler.md b/website/versioned_docs/version-0.83/backhandler.md
index f020f3fc7a5..c07a4c5d029 100644
--- a/website/versioned_docs/version-0.83/backhandler.md
+++ b/website/versioned_docs/version-0.83/backhandler.md
@@ -1,136 +1,136 @@
----
-id: backhandler
-title: BackHandler
----
-
-The Backhandler API detects hardware button presses for back navigation, lets you register event listeners for the system's back action, and lets you control how your application responds. It is Android-only.
-
-The event subscriptions are called in reverse order (i.e. the last registered subscription is called first).
-
-- **If one subscription returns true,** then subscriptions registered earlier will not be called.
-- **If no subscription returns true or none are registered,** it programmatically invokes the default back button functionality to exit the app.
-
-:::warning[Warning for modal users]
-If your app shows an opened `Modal`, `BackHandler` will not publish any events ([see `Modal` docs](modal#onrequestclose)).
-:::
-
-## Pattern
-
-```tsx
-const subscription = BackHandler.addEventListener(
-  'hardwareBackPress',
-  function () {
-    /**
-     * this.onMainScreen and this.goBack are just examples,
-     * you need to use your own implementation here.
-     *
-     * Typically you would use the navigator here to go to the last state.
-     */
-
-    if (!this.onMainScreen()) {
-      this.goBack();
-      /**
-       * When true is returned the event will not be bubbled up
-       * & no other back action will execute
-       */
-      return true;
-    }
-    /**
-     * Returning false will let the event to bubble up & let other event listeners
-     * or the system's default back action to be executed.
-     */
-    return false;
-  },
-);
-
-// Unsubscribe the listener on unmount
-subscription.remove();
-```
-
-## Example
-
-The following example implements a scenario where you confirm if the user wants to exit the app:
-
-```SnackPlayer name=BackHandler&supportedPlatforms=android
-import React, {useEffect} from 'react';
-import {Text, StyleSheet, BackHandler, Alert} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  useEffect(() => {
-    const backAction = () => {
-      Alert.alert('Hold on!', 'Are you sure you want to go back?', [
-        {
-          text: 'Cancel',
-          onPress: () => null,
-          style: 'cancel',
-        },
-        {text: 'YES', onPress: () => BackHandler.exitApp()},
-      ]);
-      return true;
-    };
-
-    const backHandler = BackHandler.addEventListener(
-      'hardwareBackPress',
-      backAction,
-    );
-
-    return () => backHandler.remove();
-  }, []);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.text}>Click Back button!</Text>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  text: {
-    fontSize: 18,
-    fontWeight: 'bold',
-  },
-});
-
-export default App;
-```
-
-`BackHandler.addEventListener` creates an event listener & returns a `NativeEventSubscription` object which should be cleared using `NativeEventSubscription.remove` method.
-
-## Usage with React Navigation
-
-If you are using React Navigation to navigate across different screens, you can follow their guide on [Custom Android back button behaviour](https://reactnavigation.org/docs/custom-android-back-button-handling/)
-
-## Backhandler hook
-
-[React Native Hooks](https://github.com/react-native-community/hooks#usebackhandler) has a nice `useBackHandler` hook which will simplify the process of setting up event listeners.
-
----
-
-# Reference
-
-## Methods
-
-### `addEventListener()`
-
-```tsx
-static addEventListener(
-  eventName: BackPressEventName,
-  handler: () => boolean | null | undefined,
-): NativeEventSubscription;
-```
-
----
-
-### `exitApp()`
-
-```tsx
-static exitApp();
-```
+---
+id: backhandler
+title: BackHandler
+---
+
+The Backhandler API detects hardware button presses for back navigation, lets you register event listeners for the system's back action, and lets you control how your application responds. It is Android-only.
+
+The event subscriptions are called in reverse order (i.e. the last registered subscription is called first).
+
+- **If one subscription returns true,** then subscriptions registered earlier will not be called.
+- **If no subscription returns true or none are registered,** it programmatically invokes the default back button functionality to exit the app.
+
+:::warning[Warning for modal users]
+If your app shows an opened `Modal`, `BackHandler` will not publish any events ([see `Modal` docs](modal#onrequestclose)).
+:::
+
+## Pattern
+
+```tsx
+const subscription = BackHandler.addEventListener(
+  'hardwareBackPress',
+  function () {
+    /**
+     * this.onMainScreen and this.goBack are just examples,
+     * you need to use your own implementation here.
+     *
+     * Typically you would use the navigator here to go to the last state.
+     */
+
+    if (!this.onMainScreen()) {
+      this.goBack();
+      /**
+       * When true is returned the event will not be bubbled up
+       * & no other back action will execute
+       */
+      return true;
+    }
+    /**
+     * Returning false will let the event to bubble up & let other event listeners
+     * or the system's default back action to be executed.
+     */
+    return false;
+  },
+);
+
+// Unsubscribe the listener on unmount
+subscription.remove();
+```
+
+## Example
+
+The following example implements a scenario where you confirm if the user wants to exit the app:
+
+```SnackPlayer name=BackHandler&supportedPlatforms=android
+import {useEffect} from 'react';
+import {Text, StyleSheet, BackHandler, Alert} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  useEffect(() => {
+    const backAction = () => {
+      Alert.alert('Hold on!', 'Are you sure you want to go back?', [
+        {
+          text: 'Cancel',
+          onPress: () => null,
+          style: 'cancel',
+        },
+        {text: 'YES', onPress: () => BackHandler.exitApp()},
+      ]);
+      return true;
+    };
+
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      backAction,
+    );
+
+    return () => backHandler.remove();
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.text}>Click Back button!</Text>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+});
+
+export default App;
+```
+
+`BackHandler.addEventListener` creates an event listener & returns a `NativeEventSubscription` object which should be cleared using `NativeEventSubscription.remove` method.
+
+## Usage with React Navigation
+
+If you are using React Navigation to navigate across different screens, you can follow their guide on [Custom Android back button behaviour](https://reactnavigation.org/docs/custom-android-back-button-handling/)
+
+## Backhandler hook
+
+[React Native Hooks](https://github.com/react-native-community/hooks#usebackhandler) has a nice `useBackHandler` hook which will simplify the process of setting up event listeners.
+
+---
+
+# Reference
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+  eventName: BackPressEventName,
+  handler: () => boolean | null | undefined,
+): NativeEventSubscription;
+```
+
+---
+
+### `exitApp()`
+
+```tsx
+static exitApp();
+```
diff --git a/website/versioned_docs/version-0.83/button.md b/website/versioned_docs/version-0.83/button.md
index 9fc529fc863..23501057f52 100644
--- a/website/versioned_docs/version-0.83/button.md
+++ b/website/versioned_docs/version-0.83/button.md
@@ -19,7 +19,6 @@ If this button doesn't look right for your app, you can build your own button us
 ## Example
 
 ```SnackPlayer name=Button%20Example&ext=js
-import React from 'react';
 import {StyleSheet, Button, View, Text, Alert, Platform} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.83/communication-android.md b/website/versioned_docs/version-0.83/communication-android.md
index f78dc84cf65..35aab358818 100644
--- a/website/versioned_docs/version-0.83/communication-android.md
+++ b/website/versioned_docs/version-0.83/communication-android.md
@@ -67,7 +67,6 @@ class MainActivity : ReactActivity() {
 </Tabs>
 
 ```tsx
-import React from 'react';
 import {View, Image} from 'react-native';
 
 export default class ImageBrowserApp extends React.Component {
diff --git a/website/versioned_docs/version-0.83/communication-ios.md b/website/versioned_docs/version-0.83/communication-ios.md
index f82cae7e620..89a64ff9b4c 100644
--- a/website/versioned_docs/version-0.83/communication-ios.md
+++ b/website/versioned_docs/version-0.83/communication-ios.md
@@ -33,7 +33,6 @@ RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
 ```
 
 ```tsx
-import React from 'react';
 import {View, Image} from 'react-native';
 
 export default class ImageBrowserApp extends React.Component {
diff --git a/website/versioned_docs/version-0.83/dimensions.md b/website/versioned_docs/version-0.83/dimensions.md
index 9ebb8561739..eb3673eca5b 100644
--- a/website/versioned_docs/version-0.83/dimensions.md
+++ b/website/versioned_docs/version-0.83/dimensions.md
@@ -1,154 +1,154 @@
----
-id: dimensions
-title: Dimensions
----
-
-:::info
-[`useWindowDimensions`](usewindowdimensions) is the preferred API for React components. Unlike `Dimensions`, it updates as the window's dimensions update. This works nicely with the React paradigm.
-:::
-
-```tsx
-import {Dimensions} from 'react-native';
-```
-
-You can get the application window's width and height using the following code:
-
-```tsx
-const windowWidth = Dimensions.get('window').width;
-const windowHeight = Dimensions.get('window').height;
-```
-
-:::note
-Although dimensions are available immediately, they may change (e.g due to device rotation, foldable devices etc) so any rendering logic or styles that depend on these constants should try to call this function on every render, rather than caching the value (for example, using inline styles rather than setting a value in a `StyleSheet`).
-:::
-
-If you are targeting foldable devices or devices which can change the screen size or app window size, you can use the event listener available in the Dimensions module as shown in the below example.
-
-## Example
-
-```SnackPlayer name=Dimensions%20Example
-import React, {useState, useEffect} from 'react';
-import {StyleSheet, Text, Dimensions} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const windowDimensions = Dimensions.get('window');
-const screenDimensions = Dimensions.get('screen');
-
-const App = () => {
-  const [dimensions, setDimensions] = useState({
-    window: windowDimensions,
-    screen: screenDimensions,
-  });
-
-  useEffect(() => {
-    const subscription = Dimensions.addEventListener(
-      'change',
-      ({window, screen}) => {
-        setDimensions({window, screen});
-      },
-    );
-    return () => subscription?.remove();
-  });
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.header}>Window Dimensions</Text>
-        {Object.entries(dimensions.window).map(([key, value]) => (
-          <Text>
-            {key} - {value}
-          </Text>
-        ))}
-        <Text style={styles.header}>Screen Dimensions</Text>
-        {Object.entries(dimensions.screen).map(([key, value]) => (
-          <Text>
-            {key} - {value}
-          </Text>
-        ))}
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  header: {
-    fontSize: 16,
-    marginVertical: 10,
-  },
-});
-
-export default App;
-```
-
-# Reference
-
-## Methods
-
-### `addEventListener()`
-
-```tsx
-static addEventListener(
-  type: 'change',
-  handler: ({
-    window,
-    screen,
-  }: DimensionsValue) => void,
-): EmitterSubscription;
-```
-
-Add an event handler. Supported events:
-
-- `change`: Fires when a property within the `Dimensions` object changes. The argument to the event handler is a [`DimensionsValue`](#dimensionsvalue) type object.
-
----
-
-### `get()`
-
-```tsx
-static get(dim: 'window' | 'screen'): ScaledSize;
-```
-
-Initial dimensions are set before `runApplication` is called so they should be available before any other require's are run, but may be updated later.
-
-Example: `const {height, width} = Dimensions.get('window');`
-
-**Parameters:**
-
-| Name                                                               | Type   | Description                                                                       |
-| ------------------------------------------------------------------ | ------ | --------------------------------------------------------------------------------- |
-| dim <div className="label basic required two-lines">Required</div> | string | Name of dimension as defined when calling `set`. Returns value for the dimension. |
-
-:::note
-For Android the `window` dimension will be reduced by the size of status bar (if not translucent) and bottom navigation bar.
-:::
-
-## Type Definitions
-
-### DimensionsValue
-
-**Properties:**
-
-| Name   | Type                                | Description                             |
-| ------ | ----------------------------------- | --------------------------------------- |
-| window | [ScaledSize](dimensions#scaledsize) | Size of the visible Application window. |
-| screen | [ScaledSize](dimensions#scaledsize) | Size of the device's screen.            |
-
-### ScaledSize
-
-| Type   |
-| ------ |
-| object |
-
-**Properties:**
-
-| Name      | Type   |
-| --------- | ------ |
-| width     | number |
-| height    | number |
-| scale     | number |
-| fontScale | number |
+---
+id: dimensions
+title: Dimensions
+---
+
+:::info
+[`useWindowDimensions`](usewindowdimensions) is the preferred API for React components. Unlike `Dimensions`, it updates as the window's dimensions update. This works nicely with the React paradigm.
+:::
+
+```tsx
+import {Dimensions} from 'react-native';
+```
+
+You can get the application window's width and height using the following code:
+
+```tsx
+const windowWidth = Dimensions.get('window').width;
+const windowHeight = Dimensions.get('window').height;
+```
+
+:::note
+Although dimensions are available immediately, they may change (e.g due to device rotation, foldable devices etc) so any rendering logic or styles that depend on these constants should try to call this function on every render, rather than caching the value (for example, using inline styles rather than setting a value in a `StyleSheet`).
+:::
+
+If you are targeting foldable devices or devices which can change the screen size or app window size, you can use the event listener available in the Dimensions module as shown in the below example.
+
+## Example
+
+```SnackPlayer name=Dimensions%20Example
+import {useState, useEffect} from 'react';
+import {StyleSheet, Text, Dimensions} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const windowDimensions = Dimensions.get('window');
+const screenDimensions = Dimensions.get('screen');
+
+const App = () => {
+  const [dimensions, setDimensions] = useState({
+    window: windowDimensions,
+    screen: screenDimensions,
+  });
+
+  useEffect(() => {
+    const subscription = Dimensions.addEventListener(
+      'change',
+      ({window, screen}) => {
+        setDimensions({window, screen});
+      },
+    );
+    return () => subscription?.remove();
+  });
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.header}>Window Dimensions</Text>
+        {Object.entries(dimensions.window).map(([key, value]) => (
+          <Text>
+            {key} - {value}
+          </Text>
+        ))}
+        <Text style={styles.header}>Screen Dimensions</Text>
+        {Object.entries(dimensions.screen).map(([key, value]) => (
+          <Text>
+            {key} - {value}
+          </Text>
+        ))}
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  header: {
+    fontSize: 16,
+    marginVertical: 10,
+  },
+});
+
+export default App;
+```
+
+# Reference
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+  type: 'change',
+  handler: ({
+    window,
+    screen,
+  }: DimensionsValue) => void,
+): EmitterSubscription;
+```
+
+Add an event handler. Supported events:
+
+- `change`: Fires when a property within the `Dimensions` object changes. The argument to the event handler is a [`DimensionsValue`](#dimensionsvalue) type object.
+
+---
+
+### `get()`
+
+```tsx
+static get(dim: 'window' | 'screen'): ScaledSize;
+```
+
+Initial dimensions are set before `runApplication` is called so they should be available before any other require's are run, but may be updated later.
+
+Example: `const {height, width} = Dimensions.get('window');`
+
+**Parameters:**
+
+| Name                                                               | Type   | Description                                                                       |
+| ------------------------------------------------------------------ | ------ | --------------------------------------------------------------------------------- |
+| dim <div className="label basic required two-lines">Required</div> | string | Name of dimension as defined when calling `set`. Returns value for the dimension. |
+
+:::note
+For Android the `window` dimension will be reduced by the size of status bar (if not translucent) and bottom navigation bar.
+:::
+
+## Type Definitions
+
+### DimensionsValue
+
+**Properties:**
+
+| Name   | Type                                | Description                             |
+| ------ | ----------------------------------- | --------------------------------------- |
+| window | [ScaledSize](dimensions#scaledsize) | Size of the visible Application window. |
+| screen | [ScaledSize](dimensions#scaledsize) | Size of the device's screen.            |
+
+### ScaledSize
+
+| Type   |
+| ------ |
+| object |
+
+**Properties:**
+
+| Name      | Type   |
+| --------- | ------ |
+| width     | number |
+| height    | number |
+| scale     | number |
+| fontScale | number |
diff --git a/website/versioned_docs/version-0.83/document-nodes.md b/website/versioned_docs/version-0.83/document-nodes.md
index 978ef87a1f8..6c6ab4a7452 100644
--- a/website/versioned_docs/version-0.83/document-nodes.md
+++ b/website/versioned_docs/version-0.83/document-nodes.md
@@ -1,75 +1,75 @@
----
-id: document-nodes
-title: Document nodes
----
-
-Document nodes represent a complete native view tree. Apps using native navigation would provide a separate document node for each screen. Apps not using native navigation would generally provide a single document for the whole app (similar to single-page apps on Web).
-
-```SnackPlayer ext=js&name=Document%20instance%20example
-import * as React from 'react';
-import {Text, TextInput, View} from 'react-native';
-
-function MyComponent(props) {
-  return (
-    <View ref={props.ref}>
-      <Text>Start typing below</Text>
-      <TextInput id="main-text-input" />
-    </View>
-  )
-}
-
-export default function AccessingDocument() {
-  const ref = React.useRef(null);
-
-  React.useEffect(() => {
-    // Get the main text input in the screen and focus it after initial load.
-    const element = ref.current;
-    const doc = element.ownerDocument;
-    const textInput = doc.getElementById('main-text-input');
-    textInput?.focus();
-  }, []);
-
-  return (
-    <MyComponent ref={ref} />
-  );
-}
-```
-
----
-
-## Reference
-
-### Web-compatible API
-
-From [`Document`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement):
-
-- Properties
-  - [`childElementCount`](https://developer.mozilla.org/en-US/docs/Web/API/Document/childElementCount)
-  - [`children`](https://developer.mozilla.org/en-US/docs/Web/API/Document/children)
-  - [`documentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/documentElement)
-  - [`firstElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Document/firstElementChild)
-  - [`lastElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Document/lastElementChild)
-- Methods
-  - [`getElementById()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)
-
-From [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/Node):
-
-- Properties
-  - [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)
-  - [`firstChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild)
-  - [`isConnected`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected)
-  - [`lastChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild)
-  - [`nextSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling)
-  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
-  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
-  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
-  - [`ownerDocument`](https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument)
-  - [`parentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)
-  - [`parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)
-  - [`previousSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling)
-  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
-- Methods
-  - [`compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
-  - [`contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains)
-  - [`getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)
-  - [`hasChildNodes()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes)
+---
+id: document-nodes
+title: Document nodes
+---
+
+Document nodes represent a complete native view tree. Apps using native navigation would provide a separate document node for each screen. Apps not using native navigation would generally provide a single document for the whole app (similar to single-page apps on Web).
+
+```SnackPlayer ext=js&name=Document%20instance%20example
+import {useEffect, useRef} from 'react';
+import {Text, TextInput, View} from 'react-native';
+
+function MyComponent(props) {
+  return (
+    <View ref={props.ref}>
+      <Text>Start typing below</Text>
+      <TextInput id="main-text-input" />
+    </View>
+  )
+}
+
+export default function AccessingDocument() {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    // Get the main text input in the screen and focus it after initial load.
+    const element = ref.current;
+    const doc = element.ownerDocument;
+    const textInput = doc.getElementById('main-text-input');
+    textInput?.focus();
+  }, []);
+
+  return (
+    <MyComponent ref={ref} />
+  );
+}
+```
+
+---
+
+## Reference
+
+### Web-compatible API
+
+From [`Document`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement):
+
+- Properties
+  - [`childElementCount`](https://developer.mozilla.org/en-US/docs/Web/API/Document/childElementCount)
+  - [`children`](https://developer.mozilla.org/en-US/docs/Web/API/Document/children)
+  - [`documentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/documentElement)
+  - [`firstElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Document/firstElementChild)
+  - [`lastElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Document/lastElementChild)
+- Methods
+  - [`getElementById()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)
+
+From [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/Node):
+
+- Properties
+  - [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)
+  - [`firstChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild)
+  - [`isConnected`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected)
+  - [`lastChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild)
+  - [`nextSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling)
+  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
+  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
+  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
+  - [`ownerDocument`](https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument)
+  - [`parentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)
+  - [`parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)
+  - [`previousSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling)
+  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
+- Methods
+  - [`compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
+  - [`contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains)
+  - [`getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)
+  - [`hasChildNodes()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes)
diff --git a/website/versioned_docs/version-0.83/drawerlayoutandroid.md b/website/versioned_docs/version-0.83/drawerlayoutandroid.md
index 3714318df5c..76b4c507c6a 100644
--- a/website/versioned_docs/version-0.83/drawerlayoutandroid.md
+++ b/website/versioned_docs/version-0.83/drawerlayoutandroid.md
@@ -1,323 +1,323 @@
----
-id: drawerlayoutandroid
-title: DrawerLayoutAndroid
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-React component that wraps the platform `DrawerLayout` (Android only). The Drawer (typically used for navigation) is rendered with `renderNavigationView` and direct children are the main view (where your content goes). The navigation view is initially not visible on the screen, but can be pulled in from the side of the window specified by the `drawerPosition` prop and its width can be set by the `drawerWidth` prop.
-
-## Example
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android&ext=js
-import React, {useRef, useState} from 'react';
-import {Button, DrawerLayoutAndroid, Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const drawer = useRef(null);
-  const [drawerPosition, setDrawerPosition] = useState('left');
-  const changeDrawerPosition = () => {
-    if (drawerPosition === 'left') {
-      setDrawerPosition('right');
-    } else {
-      setDrawerPosition('left');
-    }
-  };
-
-  const navigationView = () => (
-    <SafeAreaView style={[styles.container, styles.navigationContainer]}>
-      <Text style={styles.paragraph}>I'm in the Drawer!</Text>
-      <Button
-        title="Close drawer"
-        onPress={() => drawer.current.closeDrawer()}
-      />
-    </SafeAreaView>
-  );
-
-  return (
-    <SafeAreaProvider>
-      <DrawerLayoutAndroid
-        ref={drawer}
-        drawerWidth={300}
-        drawerPosition={drawerPosition}
-        renderNavigationView={navigationView}>
-        <SafeAreaView style={styles.container}>
-          <Text style={styles.paragraph}>Drawer on the {drawerPosition}!</Text>
-          <Button
-            title="Change Drawer Position"
-            onPress={() => changeDrawerPosition()}
-          />
-          <Text style={styles.paragraph}>
-            Swipe from the side or press button below to see it!
-          </Text>
-          <Button
-            title="Open drawer"
-            onPress={() => drawer.current.openDrawer()}
-          />
-        </SafeAreaView>
-      </DrawerLayoutAndroid>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingHorizontal: 16,
-  },
-  navigationContainer: {
-    backgroundColor: '#ecf0f1',
-  },
-  paragraph: {
-    padding: 16,
-    fontSize: 15,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android&ext=tsx
-import React, {useRef, useState} from 'react';
-import {
-  Button,
-  DrawerLayoutAndroid,
-  Text,
-  StyleSheet,
-  View,
-} from 'react-native';
-
-const App = () => {
-  const drawer = useRef<DrawerLayoutAndroid>(null);
-  const [drawerPosition, setDrawerPosition] = useState<'left' | 'right'>(
-    'left',
-  );
-  const changeDrawerPosition = () => {
-    if (drawerPosition === 'left') {
-      setDrawerPosition('right');
-    } else {
-      setDrawerPosition('left');
-    }
-  };
-
-  const navigationView = () => (
-    <View style={[styles.container, styles.navigationContainer]}>
-      <Text style={styles.paragraph}>I'm in the Drawer!</Text>
-      <Button
-        title="Close drawer"
-        onPress={() => drawer.current?.closeDrawer()}
-      />
-    </View>
-  );
-
-  return (
-    <DrawerLayoutAndroid
-      ref={drawer}
-      drawerWidth={300}
-      drawerPosition={drawerPosition}
-      renderNavigationView={navigationView}>
-      <View style={styles.container}>
-        <Text style={styles.paragraph}>Drawer on the {drawerPosition}!</Text>
-        <Button
-          title="Change Drawer Position"
-          onPress={() => changeDrawerPosition()}
-        />
-        <Text style={styles.paragraph}>
-          Swipe from the side or press button below to see it!
-        </Text>
-        <Button
-          title="Open drawer"
-          onPress={() => drawer.current?.openDrawer()}
-        />
-      </View>
-    </DrawerLayoutAndroid>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 16,
-  },
-  navigationContainer: {
-    backgroundColor: '#ecf0f1',
-  },
-  paragraph: {
-    padding: 16,
-    fontSize: 15,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
----
-
-# Reference
-
-## Props
-
-### [View Props](view.md#props)
-
-Inherits [View Props](view.md#props).
-
----
-
-### `drawerBackgroundColor`
-
-Specifies the background color of the drawer. The default value is `white`. If you want to set the opacity of the drawer, use rgba. Example:
-
-```tsx
-return (
-  <DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)" />
-);
-```
-
-| Type               | Required |
-| ------------------ | -------- |
-| [color](colors.md) | No       |
-
----
-
-### `drawerLockMode`
-
-Specifies the lock mode of the drawer. The drawer can be locked in 3 states:
-
-- unlocked (default), meaning that the drawer will respond (open/close) to touch gestures.
-- locked-closed, meaning that the drawer will stay closed and not respond to gestures.
-- locked-open, meaning that the drawer will stay opened and not respond to gestures. The drawer may still be opened and closed programmatically (`openDrawer`/`closeDrawer`).
-
-| Type                                             | Required |
-| ------------------------------------------------ | -------- |
-| enum('unlocked', 'locked-closed', 'locked-open') | No       |
-
----
-
-### `drawerPosition`
-
-Specifies the side of the screen from which the drawer will slide in. By default it is set to `left`.
-
-| Type                  | Required |
-| --------------------- | -------- |
-| enum('left', 'right') | No       |
-
----
-
-### `drawerWidth`
-
-Specifies the width of the drawer, more precisely the width of the view that be pulled in from the edge of the window.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `keyboardDismissMode`
-
-Determines whether the keyboard gets dismissed in response to a drag.
-
-- 'none' (the default), drags do not dismiss the keyboard.
-- 'on-drag', the keyboard is dismissed when a drag begins.
-
-| Type                    | Required |
-| ----------------------- | -------- |
-| enum('none', 'on-drag') | No       |
-
----
-
-### `onDrawerClose`
-
-Function called whenever the navigation view has been closed.
-
-| Type     | Required |
-| -------- | -------- |
-| function | No       |
-
----
-
-### `onDrawerOpen`
-
-Function called whenever the navigation view has been opened.
-
-| Type     | Required |
-| -------- | -------- |
-| function | No       |
-
----
-
-### `onDrawerSlide`
-
-Function called whenever there is an interaction with the navigation view.
-
-| Type     | Required |
-| -------- | -------- |
-| function | No       |
-
----
-
-### `onDrawerStateChanged`
-
-Function called when the drawer state has changed. The drawer can be in 3 states:
-
-- idle, meaning there is no interaction with the navigation view happening at the time
-- dragging, meaning there is currently an interaction with the navigation view
-- settling, meaning that there was an interaction with the navigation view, and the navigation view is now finishing its closing or opening animation
-
-| Type     | Required |
-| -------- | -------- |
-| function | No       |
-
----
-
-### `renderNavigationView`
-
-The navigation view that will be rendered to the side of the screen and can be pulled in.
-
-| Type     | Required |
-| -------- | -------- |
-| function | Yes      |
-
----
-
-### `statusBarBackgroundColor`
-
-Make the drawer take the entire screen and draw the background of the status bar to allow it to open over the status bar. It will only have an effect on API 21+.
-
-| Type               | Required |
-| ------------------ | -------- |
-| [color](colors.md) | No       |
-
-## Methods
-
-### `closeDrawer()`
-
-```tsx
-closeDrawer();
-```
-
-Closes the drawer.
-
----
-
-### `openDrawer()`
-
-```tsx
-openDrawer();
-```
-
-Opens the drawer.
+---
+id: drawerlayoutandroid
+title: DrawerLayoutAndroid
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+React component that wraps the platform `DrawerLayout` (Android only). The Drawer (typically used for navigation) is rendered with `renderNavigationView` and direct children are the main view (where your content goes). The navigation view is initially not visible on the screen, but can be pulled in from the side of the window specified by the `drawerPosition` prop and its width can be set by the `drawerWidth` prop.
+
+## Example
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android&ext=js
+import {useRef, useState} from 'react';
+import {Button, DrawerLayoutAndroid, Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const drawer = useRef(null);
+  const [drawerPosition, setDrawerPosition] = useState('left');
+  const changeDrawerPosition = () => {
+    if (drawerPosition === 'left') {
+      setDrawerPosition('right');
+    } else {
+      setDrawerPosition('left');
+    }
+  };
+
+  const navigationView = () => (
+    <SafeAreaView style={[styles.container, styles.navigationContainer]}>
+      <Text style={styles.paragraph}>I'm in the Drawer!</Text>
+      <Button
+        title="Close drawer"
+        onPress={() => drawer.current.closeDrawer()}
+      />
+    </SafeAreaView>
+  );
+
+  return (
+    <SafeAreaProvider>
+      <DrawerLayoutAndroid
+        ref={drawer}
+        drawerWidth={300}
+        drawerPosition={drawerPosition}
+        renderNavigationView={navigationView}>
+        <SafeAreaView style={styles.container}>
+          <Text style={styles.paragraph}>Drawer on the {drawerPosition}!</Text>
+          <Button
+            title="Change Drawer Position"
+            onPress={() => changeDrawerPosition()}
+          />
+          <Text style={styles.paragraph}>
+            Swipe from the side or press button below to see it!
+          </Text>
+          <Button
+            title="Open drawer"
+            onPress={() => drawer.current.openDrawer()}
+          />
+        </SafeAreaView>
+      </DrawerLayoutAndroid>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 16,
+  },
+  navigationContainer: {
+    backgroundColor: '#ecf0f1',
+  },
+  paragraph: {
+    padding: 16,
+    fontSize: 15,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android&ext=tsx
+import {useRef, useState} from 'react';
+import {
+  Button,
+  DrawerLayoutAndroid,
+  Text,
+  StyleSheet,
+  View,
+} from 'react-native';
+
+const App = () => {
+  const drawer = useRef<DrawerLayoutAndroid>(null);
+  const [drawerPosition, setDrawerPosition] = useState<'left' | 'right'>(
+    'left',
+  );
+  const changeDrawerPosition = () => {
+    if (drawerPosition === 'left') {
+      setDrawerPosition('right');
+    } else {
+      setDrawerPosition('left');
+    }
+  };
+
+  const navigationView = () => (
+    <View style={[styles.container, styles.navigationContainer]}>
+      <Text style={styles.paragraph}>I'm in the Drawer!</Text>
+      <Button
+        title="Close drawer"
+        onPress={() => drawer.current?.closeDrawer()}
+      />
+    </View>
+  );
+
+  return (
+    <DrawerLayoutAndroid
+      ref={drawer}
+      drawerWidth={300}
+      drawerPosition={drawerPosition}
+      renderNavigationView={navigationView}>
+      <View style={styles.container}>
+        <Text style={styles.paragraph}>Drawer on the {drawerPosition}!</Text>
+        <Button
+          title="Change Drawer Position"
+          onPress={() => changeDrawerPosition()}
+        />
+        <Text style={styles.paragraph}>
+          Swipe from the side or press button below to see it!
+        </Text>
+        <Button
+          title="Open drawer"
+          onPress={() => drawer.current?.openDrawer()}
+        />
+      </View>
+    </DrawerLayoutAndroid>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 16,
+  },
+  navigationContainer: {
+    backgroundColor: '#ecf0f1',
+  },
+  paragraph: {
+    padding: 16,
+    fontSize: 15,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+---
+
+# Reference
+
+## Props
+
+### [View Props](view.md#props)
+
+Inherits [View Props](view.md#props).
+
+---
+
+### `drawerBackgroundColor`
+
+Specifies the background color of the drawer. The default value is `white`. If you want to set the opacity of the drawer, use rgba. Example:
+
+```tsx
+return (
+  <DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)" />
+);
+```
+
+| Type               | Required |
+| ------------------ | -------- |
+| [color](colors.md) | No       |
+
+---
+
+### `drawerLockMode`
+
+Specifies the lock mode of the drawer. The drawer can be locked in 3 states:
+
+- unlocked (default), meaning that the drawer will respond (open/close) to touch gestures.
+- locked-closed, meaning that the drawer will stay closed and not respond to gestures.
+- locked-open, meaning that the drawer will stay opened and not respond to gestures. The drawer may still be opened and closed programmatically (`openDrawer`/`closeDrawer`).
+
+| Type                                             | Required |
+| ------------------------------------------------ | -------- |
+| enum('unlocked', 'locked-closed', 'locked-open') | No       |
+
+---
+
+### `drawerPosition`
+
+Specifies the side of the screen from which the drawer will slide in. By default it is set to `left`.
+
+| Type                  | Required |
+| --------------------- | -------- |
+| enum('left', 'right') | No       |
+
+---
+
+### `drawerWidth`
+
+Specifies the width of the drawer, more precisely the width of the view that be pulled in from the edge of the window.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `keyboardDismissMode`
+
+Determines whether the keyboard gets dismissed in response to a drag.
+
+- 'none' (the default), drags do not dismiss the keyboard.
+- 'on-drag', the keyboard is dismissed when a drag begins.
+
+| Type                    | Required |
+| ----------------------- | -------- |
+| enum('none', 'on-drag') | No       |
+
+---
+
+### `onDrawerClose`
+
+Function called whenever the navigation view has been closed.
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `onDrawerOpen`
+
+Function called whenever the navigation view has been opened.
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `onDrawerSlide`
+
+Function called whenever there is an interaction with the navigation view.
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `onDrawerStateChanged`
+
+Function called when the drawer state has changed. The drawer can be in 3 states:
+
+- idle, meaning there is no interaction with the navigation view happening at the time
+- dragging, meaning there is currently an interaction with the navigation view
+- settling, meaning that there was an interaction with the navigation view, and the navigation view is now finishing its closing or opening animation
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `renderNavigationView`
+
+The navigation view that will be rendered to the side of the screen and can be pulled in.
+
+| Type     | Required |
+| -------- | -------- |
+| function | Yes      |
+
+---
+
+### `statusBarBackgroundColor`
+
+Make the drawer take the entire screen and draw the background of the status bar to allow it to open over the status bar. It will only have an effect on API 21+.
+
+| Type               | Required |
+| ------------------ | -------- |
+| [color](colors.md) | No       |
+
+## Methods
+
+### `closeDrawer()`
+
+```tsx
+closeDrawer();
+```
+
+Closes the drawer.
+
+---
+
+### `openDrawer()`
+
+```tsx
+openDrawer();
+```
+
+Opens the drawer.
diff --git a/website/versioned_docs/version-0.83/easing.md b/website/versioned_docs/version-0.83/easing.md
index bb31dd0e4fa..097da0dfc8a 100644
--- a/website/versioned_docs/version-0.83/easing.md
+++ b/website/versioned_docs/version-0.83/easing.md
@@ -1,568 +1,568 @@
----
-id: easing
-title: Easing
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-The `Easing` module implements common easing functions. This module is used by [`Animated.timing()`](animated.md#timing) to convey physically believable motion in animations.
-
-You can find a visualization of some common easing functions at https://easings.net/
-
-### Predefined animations
-
-The `Easing` module provides several predefined animations through the following methods:
-
-- [`back`](easing.md#back) provides a basic animation where the object goes slightly back before moving forward
-- [`bounce`](easing.md#bounce) provides a bouncing animation
-- [`ease`](easing.md#ease) provides a basic inertial animation
-- [`elastic`](easing.md#elastic) provides a basic spring interaction
-
-### Standard functions
-
-Three standard easing functions are provided:
-
-- [`linear`](easing.md#linear)
-- [`quad`](easing.md#quad)
-- [`cubic`](easing.md#cubic)
-
-The [`poly`](easing.md#poly) function can be used to implement quartic, quintic, and other higher power functions.
-
-### Additional functions
-
-Additional mathematical functions are provided by the following methods:
-
-- [`bezier`](easing.md#bezier) provides a cubic bezier curve
-- [`circle`](easing.md#circle) provides a circular function
-- [`sin`](easing.md#sin) provides a sinusoidal function
-- [`exp`](easing.md#exp) provides an exponential function
-
-The following helpers are used to modify other easing functions.
-
-- [`in`](easing.md#in) runs an easing function forwards
-- [`inOut`](easing.md#inout) makes any easing function symmetrical
-- [`out`](easing.md#out) runs an easing function backwards
-
-## Example
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Easing%20Demo&ext=js
-import React, {useRef} from 'react';
-import {
-  Animated,
-  Easing,
-  SectionList,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const opacity = useRef(new Animated.Value(0)).current;
-
-  const animate = easing => {
-    opacity.setValue(0);
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration: 1200,
-      easing,
-      useNativeDriver: false,
-    }).start();
-  };
-
-  const size = opacity.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 80],
-  });
-
-  const animatedStyles = [
-    styles.box,
-    {
-      opacity,
-      width: size,
-      height: size,
-    },
-  ];
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container} edges={['right', 'top', 'left']}>
-        <StatusBar hidden={true} />
-        <Text style={styles.title}>
-          Press rows below to preview the Easing!
-        </Text>
-        <View style={styles.boxContainer}>
-          <Animated.View style={animatedStyles} />
-        </View>
-        <SectionList
-          style={styles.list}
-          sections={SECTIONS}
-          keyExtractor={item => item.title}
-          renderItem={({item}) => (
-            <TouchableOpacity
-              onPress={() => animate(item.easing)}
-              style={styles.listRow}>
-              <Text>{item.title}</Text>
-            </TouchableOpacity>
-          )}
-          renderSectionHeader={({section: {title}}) => (
-            <Text style={styles.listHeader}>{title}</Text>
-          )}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const SECTIONS = [
-  {
-    title: 'Predefined animations',
-    data: [
-      {title: 'Bounce', easing: Easing.bounce},
-      {title: 'Ease', easing: Easing.ease},
-      {title: 'Elastic', easing: Easing.elastic(4)},
-    ],
-  },
-  {
-    title: 'Standard functions',
-    data: [
-      {title: 'Linear', easing: Easing.linear},
-      {title: 'Quad', easing: Easing.quad},
-      {title: 'Cubic', easing: Easing.cubic},
-    ],
-  },
-  {
-    title: 'Additional functions',
-    data: [
-      {
-        title: 'Bezier',
-        easing: Easing.bezier(0, 2, 1, -1),
-      },
-      {title: 'Circle', easing: Easing.circle},
-      {title: 'Sin', easing: Easing.sin},
-      {title: 'Exp', easing: Easing.exp},
-    ],
-  },
-  {
-    title: 'Combinations',
-    data: [
-      {
-        title: 'In + Bounce',
-        easing: Easing.in(Easing.bounce),
-      },
-      {
-        title: 'Out + Exp',
-        easing: Easing.out(Easing.exp),
-      },
-      {
-        title: 'InOut + Elastic',
-        easing: Easing.inOut(Easing.elastic(1)),
-      },
-    ],
-  },
-];
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#20232a',
-  },
-  title: {
-    marginTop: 10,
-    textAlign: 'center',
-    color: '#61dafb',
-  },
-  boxContainer: {
-    height: 160,
-    alignItems: 'center',
-  },
-  box: {
-    marginTop: 32,
-    borderRadius: 4,
-    backgroundColor: '#61dafb',
-  },
-  list: {
-    backgroundColor: '#fff',
-  },
-  listHeader: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    backgroundColor: '#f4f4f4',
-    color: '#999',
-    fontSize: 12,
-    textTransform: 'uppercase',
-  },
-  listRow: {
-    padding: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Easing%20Demo&ext=tsx
-import React, {useRef} from 'react';
-import {
-  Animated,
-  Easing,
-  SectionList,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-  type EasingFunction,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const opacity = useRef(new Animated.Value(0)).current;
-
-  const animate = (easing: EasingFunction) => {
-    opacity.setValue(0);
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration: 1200,
-      easing,
-      useNativeDriver: false,
-    }).start();
-  };
-
-  const size = opacity.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 80],
-  });
-
-  const animatedStyles = [
-    styles.box,
-    {
-      opacity,
-      width: size,
-      height: size,
-    },
-  ];
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container} edges={['right', 'top', 'left']}>
-        <StatusBar hidden={true} />
-        <Text style={styles.title}>
-          Press rows below to preview the Easing!
-        </Text>
-        <View style={styles.boxContainer}>
-          <Animated.View style={animatedStyles} />
-        </View>
-        <SectionList
-          style={styles.list}
-          sections={SECTIONS}
-          keyExtractor={item => item.title}
-          renderItem={({item}) => (
-            <TouchableOpacity
-              onPress={() => animate(item.easing)}
-              style={styles.listRow}>
-              <Text>{item.title}</Text>
-            </TouchableOpacity>
-          )}
-          renderSectionHeader={({section: {title}}) => (
-            <Text style={styles.listHeader}>{title}</Text>
-          )}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const SECTIONS = [
-  {
-    title: 'Predefined animations',
-    data: [
-      {title: 'Bounce', easing: Easing.bounce},
-      {title: 'Ease', easing: Easing.ease},
-      {title: 'Elastic', easing: Easing.elastic(4)},
-    ],
-  },
-  {
-    title: 'Standard functions',
-    data: [
-      {title: 'Linear', easing: Easing.linear},
-      {title: 'Quad', easing: Easing.quad},
-      {title: 'Cubic', easing: Easing.cubic},
-    ],
-  },
-  {
-    title: 'Additional functions',
-    data: [
-      {
-        title: 'Bezier',
-        easing: Easing.bezier(0, 2, 1, -1),
-      },
-      {title: 'Circle', easing: Easing.circle},
-      {title: 'Sin', easing: Easing.sin},
-      {title: 'Exp', easing: Easing.exp},
-    ],
-  },
-  {
-    title: 'Combinations',
-    data: [
-      {
-        title: 'In + Bounce',
-        easing: Easing.in(Easing.bounce),
-      },
-      {
-        title: 'Out + Exp',
-        easing: Easing.out(Easing.exp),
-      },
-      {
-        title: 'InOut + Elastic',
-        easing: Easing.inOut(Easing.elastic(1)),
-      },
-    ],
-  },
-];
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#20232a',
-  },
-  title: {
-    marginTop: 10,
-    textAlign: 'center',
-    color: '#61dafb',
-  },
-  boxContainer: {
-    height: 160,
-    alignItems: 'center',
-  },
-  box: {
-    marginTop: 32,
-    borderRadius: 4,
-    backgroundColor: '#61dafb',
-  },
-  list: {
-    backgroundColor: '#fff',
-  },
-  listHeader: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    backgroundColor: '#f4f4f4',
-    color: '#999',
-    fontSize: 12,
-    textTransform: 'uppercase',
-  },
-  listRow: {
-    padding: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
----
-
-# Reference
-
-## Methods
-
-### `step0()`
-
-```tsx
-static step0(n: number);
-```
-
-A stepping function, returns 1 for any positive value of `n`.
-
----
-
-### `step1()`
-
-```tsx
-static step1(n: number);
-```
-
-A stepping function, returns 1 if `n` is greater than or equal to 1.
-
----
-
-### `linear()`
-
-```tsx
-static linear(t: number);
-```
-
-A linear function, `f(t) = t`. Position correlates to elapsed time one to one.
-
-https://cubic-bezier.com/#0,0,1,1
-
----
-
-### `ease()`
-
-```tsx
-static ease(t: number);
-```
-
-A basic inertial interaction, similar to an object slowly accelerating to speed.
-
-https://cubic-bezier.com/#.42,0,1,1
-
----
-
-### `quad()`
-
-```tsx
-static quad(t: number);
-```
-
-A quadratic function, `f(t) = t * t`. Position equals the square of elapsed time.
-
-https://easings.net/#easeInQuad
-
----
-
-### `cubic()`
-
-```tsx
-static cubic(t: number);
-```
-
-A cubic function, `f(t) = t * t * t`. Position equals the cube of elapsed time.
-
-https://easings.net/#easeInCubic
-
----
-
-### `poly()`
-
-```tsx
-static poly(n: number);
-```
-
-A power function. Position is equal to the Nth power of elapsed time.
-
-n = 4: https://easings.net/#easeInQuart n = 5: https://easings.net/#easeInQuint
-
----
-
-### `sin()`
-
-```tsx
-static sin(t: number);
-```
-
-A sinusoidal function.
-
-https://easings.net/#easeInSine
-
----
-
-### `circle()`
-
-```tsx
-static circle(t: number);
-```
-
-A circular function.
-
-https://easings.net/#easeInCirc
-
----
-
-### `exp()`
-
-```tsx
-static exp(t: number);
-```
-
-An exponential function.
-
-https://easings.net/#easeInExpo
-
----
-
-### `elastic()`
-
-```tsx
-static elastic(bounciness: number);
-```
-
-A basic elastic interaction, similar to a spring oscillating back and forth.
-
-Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.
-
-https://easings.net/#easeInElastic
-
----
-
-### `back()`
-
-```tsx
-static back(s)
-```
-
-Use with `Animated.parallel()` to create a basic effect where the object animates back slightly as the animation starts.
-
----
-
-### `bounce()`
-
-```tsx
-static bounce(t: number);
-```
-
-Provides a basic bouncing effect.
-
-https://easings.net/#easeInBounce
-
----
-
-### `bezier()`
-
-```tsx
-static bezier(x1: number, y1: number, x2: number, y2: number);
-```
-
-Provides a cubic bezier curve, equivalent to CSS Transitions' `transition-timing-function`.
-
-A useful tool to visualize cubic bezier curves can be found at https://cubic-bezier.com/
-
----
-
-### `in()`
-
-```tsx
-static in(easing: number);
-```
-
-Runs an easing function forwards.
-
----
-
-### `out()`
-
-```tsx
-static out(easing: number);
-```
-
-Runs an easing function backwards.
-
----
-
-### `inOut()`
-
-```tsx
-static inOut(easing: number);
-```
-
-Makes any easing function symmetrical. The easing function will run forwards for half of the duration, then backwards for the rest of the duration.
+---
+id: easing
+title: Easing
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+The `Easing` module implements common easing functions. This module is used by [`Animated.timing()`](animated.md#timing) to convey physically believable motion in animations.
+
+You can find a visualization of some common easing functions at https://easings.net/
+
+### Predefined animations
+
+The `Easing` module provides several predefined animations through the following methods:
+
+- [`back`](easing.md#back) provides a basic animation where the object goes slightly back before moving forward
+- [`bounce`](easing.md#bounce) provides a bouncing animation
+- [`ease`](easing.md#ease) provides a basic inertial animation
+- [`elastic`](easing.md#elastic) provides a basic spring interaction
+
+### Standard functions
+
+Three standard easing functions are provided:
+
+- [`linear`](easing.md#linear)
+- [`quad`](easing.md#quad)
+- [`cubic`](easing.md#cubic)
+
+The [`poly`](easing.md#poly) function can be used to implement quartic, quintic, and other higher power functions.
+
+### Additional functions
+
+Additional mathematical functions are provided by the following methods:
+
+- [`bezier`](easing.md#bezier) provides a cubic bezier curve
+- [`circle`](easing.md#circle) provides a circular function
+- [`sin`](easing.md#sin) provides a sinusoidal function
+- [`exp`](easing.md#exp) provides an exponential function
+
+The following helpers are used to modify other easing functions.
+
+- [`in`](easing.md#in) runs an easing function forwards
+- [`inOut`](easing.md#inout) makes any easing function symmetrical
+- [`out`](easing.md#out) runs an easing function backwards
+
+## Example
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Easing%20Demo&ext=js
+import {useRef} from 'react';
+import {
+  Animated,
+  Easing,
+  SectionList,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  const animate = easing => {
+    opacity.setValue(0);
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration: 1200,
+      easing,
+      useNativeDriver: false,
+    }).start();
+  };
+
+  const size = opacity.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 80],
+  });
+
+  const animatedStyles = [
+    styles.box,
+    {
+      opacity,
+      width: size,
+      height: size,
+    },
+  ];
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container} edges={['right', 'top', 'left']}>
+        <StatusBar hidden={true} />
+        <Text style={styles.title}>
+          Press rows below to preview the Easing!
+        </Text>
+        <View style={styles.boxContainer}>
+          <Animated.View style={animatedStyles} />
+        </View>
+        <SectionList
+          style={styles.list}
+          sections={SECTIONS}
+          keyExtractor={item => item.title}
+          renderItem={({item}) => (
+            <TouchableOpacity
+              onPress={() => animate(item.easing)}
+              style={styles.listRow}>
+              <Text>{item.title}</Text>
+            </TouchableOpacity>
+          )}
+          renderSectionHeader={({section: {title}}) => (
+            <Text style={styles.listHeader}>{title}</Text>
+          )}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const SECTIONS = [
+  {
+    title: 'Predefined animations',
+    data: [
+      {title: 'Bounce', easing: Easing.bounce},
+      {title: 'Ease', easing: Easing.ease},
+      {title: 'Elastic', easing: Easing.elastic(4)},
+    ],
+  },
+  {
+    title: 'Standard functions',
+    data: [
+      {title: 'Linear', easing: Easing.linear},
+      {title: 'Quad', easing: Easing.quad},
+      {title: 'Cubic', easing: Easing.cubic},
+    ],
+  },
+  {
+    title: 'Additional functions',
+    data: [
+      {
+        title: 'Bezier',
+        easing: Easing.bezier(0, 2, 1, -1),
+      },
+      {title: 'Circle', easing: Easing.circle},
+      {title: 'Sin', easing: Easing.sin},
+      {title: 'Exp', easing: Easing.exp},
+    ],
+  },
+  {
+    title: 'Combinations',
+    data: [
+      {
+        title: 'In + Bounce',
+        easing: Easing.in(Easing.bounce),
+      },
+      {
+        title: 'Out + Exp',
+        easing: Easing.out(Easing.exp),
+      },
+      {
+        title: 'InOut + Elastic',
+        easing: Easing.inOut(Easing.elastic(1)),
+      },
+    ],
+  },
+];
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#20232a',
+  },
+  title: {
+    marginTop: 10,
+    textAlign: 'center',
+    color: '#61dafb',
+  },
+  boxContainer: {
+    height: 160,
+    alignItems: 'center',
+  },
+  box: {
+    marginTop: 32,
+    borderRadius: 4,
+    backgroundColor: '#61dafb',
+  },
+  list: {
+    backgroundColor: '#fff',
+  },
+  listHeader: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    backgroundColor: '#f4f4f4',
+    color: '#999',
+    fontSize: 12,
+    textTransform: 'uppercase',
+  },
+  listRow: {
+    padding: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Easing%20Demo&ext=tsx
+import {useRef} from 'react';
+import {
+  Animated,
+  Easing,
+  SectionList,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  type EasingFunction,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  const animate = (easing: EasingFunction) => {
+    opacity.setValue(0);
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration: 1200,
+      easing,
+      useNativeDriver: false,
+    }).start();
+  };
+
+  const size = opacity.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 80],
+  });
+
+  const animatedStyles = [
+    styles.box,
+    {
+      opacity,
+      width: size,
+      height: size,
+    },
+  ];
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container} edges={['right', 'top', 'left']}>
+        <StatusBar hidden={true} />
+        <Text style={styles.title}>
+          Press rows below to preview the Easing!
+        </Text>
+        <View style={styles.boxContainer}>
+          <Animated.View style={animatedStyles} />
+        </View>
+        <SectionList
+          style={styles.list}
+          sections={SECTIONS}
+          keyExtractor={item => item.title}
+          renderItem={({item}) => (
+            <TouchableOpacity
+              onPress={() => animate(item.easing)}
+              style={styles.listRow}>
+              <Text>{item.title}</Text>
+            </TouchableOpacity>
+          )}
+          renderSectionHeader={({section: {title}}) => (
+            <Text style={styles.listHeader}>{title}</Text>
+          )}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const SECTIONS = [
+  {
+    title: 'Predefined animations',
+    data: [
+      {title: 'Bounce', easing: Easing.bounce},
+      {title: 'Ease', easing: Easing.ease},
+      {title: 'Elastic', easing: Easing.elastic(4)},
+    ],
+  },
+  {
+    title: 'Standard functions',
+    data: [
+      {title: 'Linear', easing: Easing.linear},
+      {title: 'Quad', easing: Easing.quad},
+      {title: 'Cubic', easing: Easing.cubic},
+    ],
+  },
+  {
+    title: 'Additional functions',
+    data: [
+      {
+        title: 'Bezier',
+        easing: Easing.bezier(0, 2, 1, -1),
+      },
+      {title: 'Circle', easing: Easing.circle},
+      {title: 'Sin', easing: Easing.sin},
+      {title: 'Exp', easing: Easing.exp},
+    ],
+  },
+  {
+    title: 'Combinations',
+    data: [
+      {
+        title: 'In + Bounce',
+        easing: Easing.in(Easing.bounce),
+      },
+      {
+        title: 'Out + Exp',
+        easing: Easing.out(Easing.exp),
+      },
+      {
+        title: 'InOut + Elastic',
+        easing: Easing.inOut(Easing.elastic(1)),
+      },
+    ],
+  },
+];
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#20232a',
+  },
+  title: {
+    marginTop: 10,
+    textAlign: 'center',
+    color: '#61dafb',
+  },
+  boxContainer: {
+    height: 160,
+    alignItems: 'center',
+  },
+  box: {
+    marginTop: 32,
+    borderRadius: 4,
+    backgroundColor: '#61dafb',
+  },
+  list: {
+    backgroundColor: '#fff',
+  },
+  listHeader: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    backgroundColor: '#f4f4f4',
+    color: '#999',
+    fontSize: 12,
+    textTransform: 'uppercase',
+  },
+  listRow: {
+    padding: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+---
+
+# Reference
+
+## Methods
+
+### `step0()`
+
+```tsx
+static step0(n: number);
+```
+
+A stepping function, returns 1 for any positive value of `n`.
+
+---
+
+### `step1()`
+
+```tsx
+static step1(n: number);
+```
+
+A stepping function, returns 1 if `n` is greater than or equal to 1.
+
+---
+
+### `linear()`
+
+```tsx
+static linear(t: number);
+```
+
+A linear function, `f(t) = t`. Position correlates to elapsed time one to one.
+
+https://cubic-bezier.com/#0,0,1,1
+
+---
+
+### `ease()`
+
+```tsx
+static ease(t: number);
+```
+
+A basic inertial interaction, similar to an object slowly accelerating to speed.
+
+https://cubic-bezier.com/#.42,0,1,1
+
+---
+
+### `quad()`
+
+```tsx
+static quad(t: number);
+```
+
+A quadratic function, `f(t) = t * t`. Position equals the square of elapsed time.
+
+https://easings.net/#easeInQuad
+
+---
+
+### `cubic()`
+
+```tsx
+static cubic(t: number);
+```
+
+A cubic function, `f(t) = t * t * t`. Position equals the cube of elapsed time.
+
+https://easings.net/#easeInCubic
+
+---
+
+### `poly()`
+
+```tsx
+static poly(n: number);
+```
+
+A power function. Position is equal to the Nth power of elapsed time.
+
+n = 4: https://easings.net/#easeInQuart n = 5: https://easings.net/#easeInQuint
+
+---
+
+### `sin()`
+
+```tsx
+static sin(t: number);
+```
+
+A sinusoidal function.
+
+https://easings.net/#easeInSine
+
+---
+
+### `circle()`
+
+```tsx
+static circle(t: number);
+```
+
+A circular function.
+
+https://easings.net/#easeInCirc
+
+---
+
+### `exp()`
+
+```tsx
+static exp(t: number);
+```
+
+An exponential function.
+
+https://easings.net/#easeInExpo
+
+---
+
+### `elastic()`
+
+```tsx
+static elastic(bounciness: number);
+```
+
+A basic elastic interaction, similar to a spring oscillating back and forth.
+
+Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.
+
+https://easings.net/#easeInElastic
+
+---
+
+### `back()`
+
+```tsx
+static back(s)
+```
+
+Use with `Animated.parallel()` to create a basic effect where the object animates back slightly as the animation starts.
+
+---
+
+### `bounce()`
+
+```tsx
+static bounce(t: number);
+```
+
+Provides a basic bouncing effect.
+
+https://easings.net/#easeInBounce
+
+---
+
+### `bezier()`
+
+```tsx
+static bezier(x1: number, y1: number, x2: number, y2: number);
+```
+
+Provides a cubic bezier curve, equivalent to CSS Transitions' `transition-timing-function`.
+
+A useful tool to visualize cubic bezier curves can be found at https://cubic-bezier.com/
+
+---
+
+### `in()`
+
+```tsx
+static in(easing: number);
+```
+
+Runs an easing function forwards.
+
+---
+
+### `out()`
+
+```tsx
+static out(easing: number);
+```
+
+Runs an easing function backwards.
+
+---
+
+### `inOut()`
+
+```tsx
+static inOut(easing: number);
+```
+
+Makes any easing function symmetrical. The easing function will run forwards for half of the duration, then backwards for the rest of the duration.
diff --git a/website/versioned_docs/version-0.83/element-nodes.md b/website/versioned_docs/version-0.83/element-nodes.md
index 654c870b37f..f48b808eefc 100644
--- a/website/versioned_docs/version-0.83/element-nodes.md
+++ b/website/versioned_docs/version-0.83/element-nodes.md
@@ -1,135 +1,135 @@
----
-id: element-nodes
-title: Element nodes
----
-
-Element nodes represent native components in the native view tree (similar to [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) nodes on Web).
-
-They are provided by all native components, and by many built-in components, via refs:
-
-```SnackPlayer ext=js&name=Element%20instances%20example
-import * as React from 'react';
-import { View, SafeAreaView, StyleSheet, Text } from 'react-native';
-
-const ViewWithRefs = () => {
-  const ref = React.useRef(null);
-  const [viewInfo, setViewInfo] = React.useState('');
-
-  React.useEffect(() => {
-    // `element` is an object implementing the interface described here.
-    const element = ref.current;
-    const rect = JSON.stringify(element.getBoundingClientRect());
-    setViewInfo(
-      `Bounding rect is: ${rect}.\nText content is: ${element.textContent}`,
-    );
-  }, []);
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <View ref={ref} style={styles.content}>
-        <Text>Hello world!</Text>
-      </View>
-      <Text>{viewInfo}</Text>
-    </SafeAreaView>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  content: {
-    padding: 10,
-    backgroundColor: 'gray',
-  },
-});
-
-export default ViewWithRefs;
-```
-
-:::info
-Note that some built-in components are only a container for other components (including native components). For example, `ScrollView` internally renders a native scroll view and a native view, which are accessible through the ref it provides using methods like `getNativeScrollRef()` and `getInnerViewRef()`.
-:::
-
----
-
-## Reference
-
-### Web-compatible API
-
-From [`HTMLElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement):
-
-- Properties
-  - [`offsetHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight)
-  - [`offsetLeft`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft)
-  - [`offsetParent`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent)
-  - [`offsetTop`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop)
-  - [`offsetWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth)
-- Methods
-  - [`blur()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/blur).
-  - [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus).
-    - ⚠️ The `options` parameter is not supported.
-
-From [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element):
-
-- Properties
-  - [`childElementCount`](https://developer.mozilla.org/en-US/docs/Web/API/Element/childElementCount)
-  - [`children`](https://developer.mozilla.org/en-US/docs/Web/API/Element/children)
-  - [`clientHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight)
-  - [`clientLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft)
-  - [`clientTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop)
-  - [`clientWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth)
-  - [`firstElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Element/firstElementChild)
-  - [`id`](https://developer.mozilla.org/en-US/docs/Web/API/Element/id)
-    - ℹ️ Returns the value of the `id` or `nativeID` props.
-  - [`lastElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Element/lastElementChild)
-  - [`nextElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Element/nextElementSibling)
-  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
-  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
-  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
-  - [`previousElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Element/previousElementSibling)
-  - [`scrollHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight)
-  - [`scrollLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft)
-    - ⚠️ For built-in components, only `ScrollView` instances can return a value other than zero.
-  - [`scrollTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop)
-    - ⚠️ For built-in components, only `ScrollView` instances can return a value other than zero.
-  - [`scrollWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth)
-  - [`tagName`](https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName)
-    - ℹ️ Returns a normalized native component name prefixed with `RN:`, like `RN:View`.
-  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
-- Methods
-  - [`getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)
-  - [`hasPointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/hasPointerCapture)
-  - [`setPointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture)
-  - [`releasePointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/releasePointerCapture)
-
-From [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/Node):
-
-- Properties
-  - [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)
-  - [`firstChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild)
-  - [`isConnected`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected)
-  - [`lastChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild)
-  - [`nextSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling)
-  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
-  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
-  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
-  - [`ownerDocument`](https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument)
-    - ℹ️ Will return the [document node](/docs/next/document-nodes) where this component was rendered.
-  - [`parentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)
-  - [`parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)
-  - [`previousSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling)
-  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
-- Methods
-  - [`compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
-  - [`contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains)
-  - [`getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)
-    - ℹ️ Will return a reference to itself if the component is not mounted.
-  - [`hasChildNodes()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes)
-
-### Legacy API
-
-- [`measure()`](/docs/next/legacy/direct-manipulation#measurecallback)
-- [`measureInWindow()`](/docs/next/legacy/direct-manipulation#measureinwindowcallback)
-- [`measureLayout()`](/docs/next/legacy/direct-manipulation#measurelayoutrelativetonativecomponentref-onsuccess-onfail)
-- [`setNativeProps()`](/docs/next/legacy/direct-manipulation#setnativeprops-with-touchableopacity)
+---
+id: element-nodes
+title: Element nodes
+---
+
+Element nodes represent native components in the native view tree (similar to [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) nodes on Web).
+
+They are provided by all native components, and by many built-in components, via refs:
+
+```SnackPlayer ext=js&name=Element%20instances%20example
+import {useEffect, useRef, useState} from 'react';
+import {View, SafeAreaView, StyleSheet, Text} from 'react-native';
+
+const ViewWithRefs = () => {
+  const ref = useRef(null);
+  const [viewInfo, setViewInfo] = useState('');
+
+  useEffect(() => {
+    // `element` is an object implementing the interface described here.
+    const element = ref.current;
+    const rect = JSON.stringify(element.getBoundingClientRect());
+    setViewInfo(
+      `Bounding rect is: ${rect}.\nText content is: ${element.textContent}`,
+    );
+  }, []);
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View ref={ref} style={styles.content}>
+        <Text>Hello world!</Text>
+      </View>
+      <Text>{viewInfo}</Text>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    padding: 10,
+    backgroundColor: 'gray',
+  },
+});
+
+export default ViewWithRefs;
+```
+
+:::info
+Note that some built-in components are only a container for other components (including native components). For example, `ScrollView` internally renders a native scroll view and a native view, which are accessible through the ref it provides using methods like `getNativeScrollRef()` and `getInnerViewRef()`.
+:::
+
+---
+
+## Reference
+
+### Web-compatible API
+
+From [`HTMLElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement):
+
+- Properties
+  - [`offsetHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight)
+  - [`offsetLeft`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft)
+  - [`offsetParent`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent)
+  - [`offsetTop`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop)
+  - [`offsetWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth)
+- Methods
+  - [`blur()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/blur).
+  - [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus).
+    - ⚠️ The `options` parameter is not supported.
+
+From [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element):
+
+- Properties
+  - [`childElementCount`](https://developer.mozilla.org/en-US/docs/Web/API/Element/childElementCount)
+  - [`children`](https://developer.mozilla.org/en-US/docs/Web/API/Element/children)
+  - [`clientHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight)
+  - [`clientLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft)
+  - [`clientTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop)
+  - [`clientWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth)
+  - [`firstElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Element/firstElementChild)
+  - [`id`](https://developer.mozilla.org/en-US/docs/Web/API/Element/id)
+    - ℹ️ Returns the value of the `id` or `nativeID` props.
+  - [`lastElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Element/lastElementChild)
+  - [`nextElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Element/nextElementSibling)
+  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
+  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
+  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
+  - [`previousElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Element/previousElementSibling)
+  - [`scrollHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight)
+  - [`scrollLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft)
+    - ⚠️ For built-in components, only `ScrollView` instances can return a value other than zero.
+  - [`scrollTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop)
+    - ⚠️ For built-in components, only `ScrollView` instances can return a value other than zero.
+  - [`scrollWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth)
+  - [`tagName`](https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName)
+    - ℹ️ Returns a normalized native component name prefixed with `RN:`, like `RN:View`.
+  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
+- Methods
+  - [`getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)
+  - [`hasPointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/hasPointerCapture)
+  - [`setPointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture)
+  - [`releasePointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/releasePointerCapture)
+
+From [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/Node):
+
+- Properties
+  - [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)
+  - [`firstChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild)
+  - [`isConnected`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected)
+  - [`lastChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild)
+  - [`nextSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling)
+  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
+  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
+  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
+  - [`ownerDocument`](https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument)
+    - ℹ️ Will return the [document node](/docs/next/document-nodes) where this component was rendered.
+  - [`parentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)
+  - [`parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)
+  - [`previousSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling)
+  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
+- Methods
+  - [`compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
+  - [`contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains)
+  - [`getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)
+    - ℹ️ Will return a reference to itself if the component is not mounted.
+  - [`hasChildNodes()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes)
+
+### Legacy API
+
+- [`measure()`](/docs/next/legacy/direct-manipulation#measurecallback)
+- [`measureInWindow()`](/docs/next/legacy/direct-manipulation#measureinwindowcallback)
+- [`measureLayout()`](/docs/next/legacy/direct-manipulation#measurelayoutrelativetonativecomponentref-onsuccess-onfail)
+- [`setNativeProps()`](/docs/next/legacy/direct-manipulation#setnativeprops-with-touchableopacity)
diff --git a/website/versioned_docs/version-0.83/fabric-native-components.md b/website/versioned_docs/version-0.83/fabric-native-components.md
index 2a509a7174e..6efdd572e92 100644
--- a/website/versioned_docs/version-0.83/fabric-native-components.md
+++ b/website/versioned_docs/version-0.83/fabric-native-components.md
@@ -172,7 +172,6 @@ This guide shows you how to create a Native Component that only works with the N
 Finally, you can use the new component in your app. Update your generated `App.tsx` to:
 
 ```javascript title="Demo/App.tsx"
-import React from 'react';
 import {Alert, StyleSheet, View} from 'react-native';
 import WebView from './specs/WebViewNativeComponent';
 
diff --git a/website/versioned_docs/version-0.83/flatlist.md b/website/versioned_docs/version-0.83/flatlist.md
index 56505e27ca8..a7cceaf3ada 100644
--- a/website/versioned_docs/version-0.83/flatlist.md
+++ b/website/versioned_docs/version-0.83/flatlist.md
@@ -1,861 +1,859 @@
----
-id: flatlist
-title: FlatList
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-A performant interface for rendering basic, flat lists, supporting the most handy features:
-
-- Fully cross-platform.
-- Optional horizontal mode.
-- Configurable viewability callbacks.
-- Header support.
-- Footer support.
-- Separator support.
-- Pull to Refresh.
-- Scroll loading.
-- ScrollToIndex support.
-- Multiple column support.
-
-If you need section support, use [`<SectionList>`](sectionlist.md).
-
-## Example
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Simple%20FlatList%20Example&ext=js
-import React from 'react';
-import {View, FlatList, StyleSheet, Text, StatusBar} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const DATA = [
-  {
-    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
-    title: 'First Item',
-  },
-  {
-    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
-    title: 'Second Item',
-  },
-  {
-    id: '58694a0f-3da1-471f-bd96-145571e29d72',
-    title: 'Third Item',
-  },
-];
-
-const Item = ({title}) => (
-  <View style={styles.item}>
-    <Text style={styles.title}>{title}</Text>
-  </View>
-);
-
-const App = () => (
-  <SafeAreaProvider>
-    <SafeAreaView style={styles.container}>
-      <FlatList
-        data={DATA}
-        renderItem={({item}) => <Item title={item.title} />}
-        keyExtractor={item => item.id}
-      />
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: StatusBar.currentHeight || 0,
-  },
-  item: {
-    backgroundColor: '#f9c2ff',
-    padding: 20,
-    marginVertical: 8,
-    marginHorizontal: 16,
-  },
-  title: {
-    fontSize: 32,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Simple%20FlatList%20Example&ext=tsx
-import React from 'react';
-import {View, FlatList, StyleSheet, Text, StatusBar} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const DATA = [
-  {
-    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
-    title: 'First Item',
-  },
-  {
-    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
-    title: 'Second Item',
-  },
-  {
-    id: '58694a0f-3da1-471f-bd96-145571e29d72',
-    title: 'Third Item',
-  },
-];
-
-type ItemProps = {title: string};
-
-const Item = ({title}: ItemProps) => (
-  <View style={styles.item}>
-    <Text style={styles.title}>{title}</Text>
-  </View>
-);
-
-const App = () => (
-  <SafeAreaProvider>
-    <SafeAreaView style={styles.container}>
-      <FlatList
-        data={DATA}
-        renderItem={({item}) => <Item title={item.title} />}
-        keyExtractor={item => item.id}
-      />
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: StatusBar.currentHeight || 0,
-  },
-  item: {
-    backgroundColor: '#f9c2ff',
-    padding: 20,
-    marginVertical: 8,
-    marginHorizontal: 16,
-  },
-  title: {
-    fontSize: 32,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-To render multiple columns, use the [`numColumns`](flatlist.md#numcolumns) prop. Using this approach instead of a `flexWrap` layout can prevent conflicts with the item height logic.
-
-More complex, selectable example below.
-
-- By passing `extraData={selectedId}` to `FlatList` we make sure `FlatList` itself will re-render when the state changes. Without setting this prop, `FlatList` would not know it needs to re-render any items because it is a `PureComponent` and the prop comparison will not show any changes.
-- `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=flatlist-selectable&ext=js
-import React, {useState} from 'react';
-import {
-  FlatList,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const DATA = [
-  {
-    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
-    title: 'First Item',
-  },
-  {
-    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
-    title: 'Second Item',
-  },
-  {
-    id: '58694a0f-3da1-471f-bd96-145571e29d72',
-    title: 'Third Item',
-  },
-];
-
-const Item = ({item, onPress, backgroundColor, textColor}) => (
-  <TouchableOpacity onPress={onPress} style={[styles.item, {backgroundColor}]}>
-    <Text style={[styles.title, {color: textColor}]}>{item.title}</Text>
-  </TouchableOpacity>
-);
-
-const App = () => {
-  const [selectedId, setSelectedId] = useState();
-
-  const renderItem = ({item}) => {
-    const backgroundColor = item.id === selectedId ? '#6e3b6e' : '#f9c2ff';
-    const color = item.id === selectedId ? 'white' : 'black';
-
-    return (
-      <Item
-        item={item}
-        onPress={() => setSelectedId(item.id)}
-        backgroundColor={backgroundColor}
-        textColor={color}
-      />
-    );
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <FlatList
-          data={DATA}
-          renderItem={renderItem}
-          keyExtractor={item => item.id}
-          extraData={selectedId}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: StatusBar.currentHeight || 0,
-  },
-  item: {
-    padding: 20,
-    marginVertical: 8,
-    marginHorizontal: 16,
-  },
-  title: {
-    fontSize: 32,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=flatlist-selectable&ext=tsx
-import React, {useState} from 'react';
-import {
-  FlatList,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-type ItemData = {
-  id: string;
-  title: string;
-};
-
-const DATA: ItemData[] = [
-  {
-    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
-    title: 'First Item',
-  },
-  {
-    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
-    title: 'Second Item',
-  },
-  {
-    id: '58694a0f-3da1-471f-bd96-145571e29d72',
-    title: 'Third Item',
-  },
-];
-
-type ItemProps = {
-  item: ItemData;
-  onPress: () => void;
-  backgroundColor: string;
-  textColor: string;
-};
-
-const Item = ({item, onPress, backgroundColor, textColor}: ItemProps) => (
-  <TouchableOpacity onPress={onPress} style={[styles.item, {backgroundColor}]}>
-    <Text style={[styles.title, {color: textColor}]}>{item.title}</Text>
-  </TouchableOpacity>
-);
-
-const App = () => {
-  const [selectedId, setSelectedId] = useState<string>();
-
-  const renderItem = ({item}: {item: ItemData}) => {
-    const backgroundColor = item.id === selectedId ? '#6e3b6e' : '#f9c2ff';
-    const color = item.id === selectedId ? 'white' : 'black';
-
-    return (
-      <Item
-        item={item}
-        onPress={() => setSelectedId(item.id)}
-        backgroundColor={backgroundColor}
-        textColor={color}
-      />
-    );
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <FlatList
-          data={DATA}
-          renderItem={renderItem}
-          keyExtractor={item => item.id}
-          extraData={selectedId}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: StatusBar.currentHeight || 0,
-  },
-  item: {
-    padding: 20,
-    marginVertical: 8,
-    marginHorizontal: 16,
-  },
-  title: {
-    fontSize: 32,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-This is a convenience wrapper around [`<VirtualizedList>`](virtualizedlist.md), and thus inherits its props (as well as those of [`<ScrollView>`](scrollview.md)) that aren't explicitly listed here, along with the following caveats:
-
-- Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.
-- This is a `PureComponent` which means that it will not re-render if `props` remain shallow-equal. Make sure that everything your `renderItem` function depends on is passed as a prop (e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on changes. This includes the `data` prop and parent component state.
-- In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes.
-- By default, the list looks for a `key` prop on each item and uses that for the React key. Alternatively, you can provide a custom `keyExtractor` prop.
-
----
-
-# Reference
-
-## Props
-
-### [VirtualizedList Props](virtualizedlist.md#props)
-
-Inherits [VirtualizedList Props](virtualizedlist.md#props).
-
----
-
-### <div className="label required basic">Required</div> **`renderItem`**
-
-```tsx
-renderItem({
-  item: ItemT,
-  index: number,
-  separators: {
-    highlight: () => void;
-    unhighlight: () => void;
-    updateProps: (select: 'leading' | 'trailing', newProps: any) => void;
-  }
-}): JSX.Element;
-```
-
-Takes an item from `data` and renders it into the list.
-
-Provides additional metadata like `index` if you need it, as well as a more generic `separators.updateProps` function which let you set whatever props you want to change the rendering of either the leading separator or trailing separator in case the more common `highlight` and `unhighlight` (which set the `highlighted: boolean` prop) are insufficient for your use case.
-
-| Type     |
-| -------- |
-| function |
-
-- `item` (Object): The item from `data` being rendered.
-- `index` (number): The index corresponding to this item in the `data` array.
-- `separators` (Object)
-  - `highlight` (Function)
-  - `unhighlight` (Function)
-  - `updateProps` (Function)
-    - `select` (enum('leading', 'trailing'))
-    - `newProps` (Object)
-
-Example usage:
-
-```tsx
-<FlatList
-  ItemSeparatorComponent={
-    Platform.OS !== 'android' &&
-    (({highlighted}) => (
-      <View
-        style={[style.separator, highlighted && {marginLeft: 0}]}
-      />
-    ))
-  }
-  data={[{title: 'Title Text', key: 'item1'}]}
-  renderItem={({item, index, separators}) => (
-    <TouchableHighlight
-      key={item.key}
-      onPress={() => this._onPress(item)}
-      onShowUnderlay={separators.highlight}
-      onHideUnderlay={separators.unhighlight}>
-      <View style={{backgroundColor: 'white'}}>
-        <Text>{item.title}</Text>
-      </View>
-    </TouchableHighlight>
-  )}
-/>
-```
-
----
-
-### <div className="label required basic">Required</div> **`data`**
-
-An array (or array-like list) of items to render. Other data types can be used by targeting [`VirtualizedList`](virtualizedlist.md) directly.
-
-| Type      |
-| --------- |
-| ArrayLike |
-
----
-
-### `ItemSeparatorComponent`
-
-Rendered in between each item, but not at the top or bottom. By default, `highlighted` and `leadingItem` props are provided. `renderItem` provides `separators.highlight`/`unhighlight` which will update the `highlighted` prop, but you can also add custom props with `separators.updateProps`. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
-
-| Type                         |
-| ---------------------------- |
-| component, function, element |
-
----
-
-### `ListEmptyComponent`
-
-Rendered when the list is empty. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
-
-| Type               |
-| ------------------ |
-| component, element |
-
----
-
-### `ListFooterComponent`
-
-Rendered at the bottom of all the items. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
-
-| Type               |
-| ------------------ |
-| component, element |
-
----
-
-### `ListFooterComponentStyle`
-
-Styling for internal View for `ListFooterComponent`.
-
-| Type                           |
-| ------------------------------ |
-| [View Style](view-style-props) |
-
----
-
-### `ListHeaderComponent`
-
-Rendered at the top of all the items. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
-
-| Type               |
-| ------------------ |
-| component, element |
-
----
-
-### `ListHeaderComponentStyle`
-
-Styling for internal View for `ListHeaderComponent`.
-
-| Type                           |
-| ------------------------------ |
-| [View Style](view-style-props) |
-
----
-
-### `columnWrapperStyle`
-
-Optional custom style for multi-item rows generated when `numColumns > 1`.
-
-| Type                           |
-| ------------------------------ |
-| [View Style](view-style-props) |
-
----
-
-### `extraData`
-
-A marker property for telling the list to re-render (since it implements `PureComponent`). If any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the `data` prop, stick it here and treat it immutably.
-
-| Type |
-| ---- |
-| any  |
-
----
-
-### `getItemLayout`
-
-```tsx
-(data, index) => {length: number, offset: number, index: number}
-```
-
-`getItemLayout` is an optional optimization that allows skipping the measurement of dynamic content if you know the size (height or width) of items ahead of time. `getItemLayout` is efficient if you have fixed size items, for example:
-
-```tsx
-  getItemLayout={(data, index) => (
-    {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
-  )}
-```
-
-Adding `getItemLayout` can be a great performance boost for lists of several hundred items. Remember to include separator length (height or width) in your offset calculation if you specify `ItemSeparatorComponent`.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `horizontal`
-
-If `true`, renders items next to each other horizontally instead of stacked vertically.
-
-| Type    |
-| ------- |
-| boolean |
-
----
-
-### `initialNumToRender`
-
-How many items to render in the initial batch. This should be enough to fill the screen but not much more. Note these items will never be unmounted as part of the windowed rendering in order to improve perceived performance of scroll-to-top actions.
-
-| Type   | Default |
-| ------ | ------- |
-| number | `10`    |
-
----
-
-### `initialScrollIndex`
-
-Instead of starting at the top with the first item, start at `initialScrollIndex`. This disables the "scroll to top" optimization that keeps the first `initialNumToRender` items always rendered and immediately renders the items starting at this initial index. Requires `getItemLayout` to be implemented.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `inverted`
-
-Reverses the direction of scroll. Uses scale transforms of `-1`.
-
-| Type    |
-| ------- |
-| boolean |
-
----
-
-### `keyExtractor`
-
-```tsx
-(item: ItemT, index: number) => string;
-```
-
-Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks `item.key`, then `item.id`, and then falls back to using the index, like React does.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `numColumns`
-
-Multiple columns can only be rendered with `horizontal={false}` and will zig-zag like a `flexWrap` layout. Items should all be the same height - masonry layouts are not supported.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `onRefresh`
-
-```tsx
-() => void;
-```
-
-If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the `refreshing` prop correctly.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onViewableItemsChanged`
-
-Called when the viewability of rows changes, as defined by the `viewabilityConfig` prop.
-
-| Type                                                                                                  |
-| ----------------------------------------------------------------------------------------------------- |
-| `md (callback: {changed: [ViewToken](viewtoken)[], viewableItems: [ViewToken](viewtoken)[]} => void;` |
-
----
-
-### `progressViewOffset`
-
-Set this when offset is needed for the loading indicator to show correctly.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `refreshing`
-
-Set this true while waiting for new data from a refresh.
-
-| Type    |
-| ------- |
-| boolean |
-
----
-
-### `removeClippedSubviews`
-
-:::warning
-Using this property may lead to bugs (missing content) in some circumstances - use at your own risk.
-:::
-
-When `true`, offscreen child views are removed from their native backing superview when offscreen. This may improve scroll performance for large lists. On Android the default value is `true`.
-
-| Type    |
-| ------- |
-| boolean |
-
----
-
-### `viewabilityConfig`
-
-See [`ViewabilityHelper.js`](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Lists/ViewabilityHelper.js) for flow type and further documentation.
-
-| Type              |
-| ----------------- |
-| ViewabilityConfig |
-
-`viewabilityConfig` takes a type `ViewabilityConfig` an object with following properties
-
-| Property                         | Type    |
-| -------------------------------- | ------- |
-| minimumViewTime                  | number  |
-| viewAreaCoveragePercentThreshold | number  |
-| itemVisiblePercentThreshold      | number  |
-| waitForInteraction               | boolean |
-
-At least one of the `viewAreaCoveragePercentThreshold` or `itemVisiblePercentThreshold` is required. This needs to be done in the `constructor` to avoid following error ([ref](https://github.com/facebook/react-native/issues/17408)):
-
-```
-  Error: Changing viewabilityConfig on the fly is not supported
-```
-
-```tsx
-constructor (props) {
-  super(props)
-
-  this.viewabilityConfig = {
-      waitForInteraction: true,
-      viewAreaCoveragePercentThreshold: 95
-  }
-}
-```
-
-```tsx
-<FlatList
-    viewabilityConfig={this.viewabilityConfig}
-  ...
-```
-
-#### minimumViewTime
-
-Minimum amount of time (in milliseconds) that an item must be physically viewable before the viewability callback will be fired. A high number means that scrolling through content without stopping will not mark the content as viewable.
-
-#### viewAreaCoveragePercentThreshold
-
-Percent of viewport that must be covered for a partially occluded item to count as "viewable", 0-100. Fully visible items are always considered viewable. A value of 0 means that a single pixel in the viewport makes the item viewable, and a value of 100 means that an item must be either entirely visible or cover the entire viewport to count as viewable.
-
-#### itemVisiblePercentThreshold
-
-Similar to `viewAreaCoveragePercentThreshold`, but considers the percent of the item that is visible, rather than the fraction of the viewable area it covers.
-
-#### waitForInteraction
-
-Nothing is considered viewable until the user scrolls or `recordInteraction` is called after render.
-
----
-
-### `viewabilityConfigCallbackPairs`
-
-List of `ViewabilityConfig`/`onViewableItemsChanged` pairs. A specific `onViewableItemsChanged` will be called when its corresponding `ViewabilityConfig`'s conditions are met. See `ViewabilityHelper.js` for flow type and further documentation.
-
-| Type                                   |
-| -------------------------------------- |
-| array of ViewabilityConfigCallbackPair |
-
-## Methods
-
-### `flashScrollIndicators()`
-
-```tsx
-flashScrollIndicators();
-```
-
-Displays the scroll indicators momentarily.
-
----
-
-### `getNativeScrollRef()`
-
-```tsx
-getNativeScrollRef(): React.ElementRef<typeof ScrollViewComponent>;
-```
-
-Provides a reference to the underlying scroll component
-
----
-
-### `getScrollResponder()`
-
-```tsx
-getScrollResponder(): ScrollResponderMixin;
-```
-
-Provides a handle to the underlying scroll responder.
-
----
-
-### `getScrollableNode()`
-
-```tsx
-getScrollableNode(): any;
-```
-
-Provides a handle to the underlying scroll node.
-
-### `scrollToEnd()`
-
-```tsx
-scrollToEnd(params?: {animated?: boolean});
-```
-
-Scrolls to the end of the content. May be janky without `getItemLayout` prop.
-
-**Parameters:**
-
-| Name   | Type   |
-| ------ | ------ |
-| params | object |
-
-Valid `params` keys are:
-
-- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
-
----
-
-### `scrollToIndex()`
-
-```tsx
-scrollToIndex: (params: {
-  index: number;
-  animated?: boolean;
-  viewOffset?: number;
-  viewPosition?: number;
-});
-```
-
-Scrolls to the item at the specified index such that it is positioned in the viewable area such that `viewPosition` 0 places it at the top, 1 at the bottom, and 0.5 centered in the middle.
-
-:::note
-Cannot scroll to locations outside the render window without specifying the `getItemLayout` prop.
-:::
-
-**Parameters:**
-
-| Name                                                        | Type   |
-| ----------------------------------------------------------- | ------ |
-| params <div className="label basic required">Required</div> | object |
-
-Valid `params` keys are:
-
-- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
-- 'index' (number) - The index to scroll to. Required.
-- 'viewOffset' (number) - A fixed number of pixels to offset the final target position.
-- 'viewPosition' (number) - A value of `0` places the item specified by index at the top, `1` at the bottom, and `0.5` centered in the middle.
-
----
-
-### `scrollToItem()`
-
-```tsx
-scrollToItem(params: {
-  animated?: ?boolean,
-  item: Item,
-  viewPosition?: number,
-});
-```
-
-Requires linear scan through data - use `scrollToIndex` instead if possible.
-
-:::note
-Cannot scroll to locations outside the render window without specifying the `getItemLayout` prop.
-:::
-
-**Parameters:**
-
-| Name                                                        | Type   |
-| ----------------------------------------------------------- | ------ |
-| params <div className="label basic required">Required</div> | object |
-
-Valid `params` keys are:
-
-- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
-- 'item' (object) - The item to scroll to. Required.
-- 'viewPosition' (number)
-
----
-
-### `scrollToOffset()`
-
-```tsx
-scrollToOffset(params: {
-  offset: number;
-  animated?: boolean;
-});
-```
-
-Scroll to a specific content pixel offset in the list.
-
-**Parameters:**
-
-| Name                                                        | Type   |
-| ----------------------------------------------------------- | ------ |
-| params <div className="label basic required">Required</div> | object |
-
-Valid `params` keys are:
-
-- 'offset' (number) - The offset to scroll to. In case of `horizontal` being true, the offset is the x-value, in any other case the offset is the y-value. Required.
-- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
+---
+id: flatlist
+title: FlatList
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+A performant interface for rendering basic, flat lists, supporting the most handy features:
+
+- Fully cross-platform.
+- Optional horizontal mode.
+- Configurable viewability callbacks.
+- Header support.
+- Footer support.
+- Separator support.
+- Pull to Refresh.
+- Scroll loading.
+- ScrollToIndex support.
+- Multiple column support.
+
+If you need section support, use [`<SectionList>`](sectionlist.md).
+
+## Example
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Simple%20FlatList%20Example&ext=js
+import {View, FlatList, StyleSheet, Text, StatusBar} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const DATA = [
+  {
+    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
+    title: 'First Item',
+  },
+  {
+    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
+    title: 'Second Item',
+  },
+  {
+    id: '58694a0f-3da1-471f-bd96-145571e29d72',
+    title: 'Third Item',
+  },
+];
+
+const Item = ({title}) => (
+  <View style={styles.item}>
+    <Text style={styles.title}>{title}</Text>
+  </View>
+);
+
+const App = () => (
+  <SafeAreaProvider>
+    <SafeAreaView style={styles.container}>
+      <FlatList
+        data={DATA}
+        renderItem={({item}) => <Item title={item.title} />}
+        keyExtractor={item => item.id}
+      />
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: StatusBar.currentHeight || 0,
+  },
+  item: {
+    backgroundColor: '#f9c2ff',
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Simple%20FlatList%20Example&ext=tsx
+import {View, FlatList, StyleSheet, Text, StatusBar} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const DATA = [
+  {
+    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
+    title: 'First Item',
+  },
+  {
+    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
+    title: 'Second Item',
+  },
+  {
+    id: '58694a0f-3da1-471f-bd96-145571e29d72',
+    title: 'Third Item',
+  },
+];
+
+type ItemProps = {title: string};
+
+const Item = ({title}: ItemProps) => (
+  <View style={styles.item}>
+    <Text style={styles.title}>{title}</Text>
+  </View>
+);
+
+const App = () => (
+  <SafeAreaProvider>
+    <SafeAreaView style={styles.container}>
+      <FlatList
+        data={DATA}
+        renderItem={({item}) => <Item title={item.title} />}
+        keyExtractor={item => item.id}
+      />
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: StatusBar.currentHeight || 0,
+  },
+  item: {
+    backgroundColor: '#f9c2ff',
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+To render multiple columns, use the [`numColumns`](flatlist.md#numcolumns) prop. Using this approach instead of a `flexWrap` layout can prevent conflicts with the item height logic.
+
+More complex, selectable example below.
+
+- By passing `extraData={selectedId}` to `FlatList` we make sure `FlatList` itself will re-render when the state changes. Without setting this prop, `FlatList` would not know it needs to re-render any items because it is a `PureComponent` and the prop comparison will not show any changes.
+- `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=flatlist-selectable&ext=js
+import {useState} from 'react';
+import {
+  FlatList,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const DATA = [
+  {
+    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
+    title: 'First Item',
+  },
+  {
+    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
+    title: 'Second Item',
+  },
+  {
+    id: '58694a0f-3da1-471f-bd96-145571e29d72',
+    title: 'Third Item',
+  },
+];
+
+const Item = ({item, onPress, backgroundColor, textColor}) => (
+  <TouchableOpacity onPress={onPress} style={[styles.item, {backgroundColor}]}>
+    <Text style={[styles.title, {color: textColor}]}>{item.title}</Text>
+  </TouchableOpacity>
+);
+
+const App = () => {
+  const [selectedId, setSelectedId] = useState();
+
+  const renderItem = ({item}) => {
+    const backgroundColor = item.id === selectedId ? '#6e3b6e' : '#f9c2ff';
+    const color = item.id === selectedId ? 'white' : 'black';
+
+    return (
+      <Item
+        item={item}
+        onPress={() => setSelectedId(item.id)}
+        backgroundColor={backgroundColor}
+        textColor={color}
+      />
+    );
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <FlatList
+          data={DATA}
+          renderItem={renderItem}
+          keyExtractor={item => item.id}
+          extraData={selectedId}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: StatusBar.currentHeight || 0,
+  },
+  item: {
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=flatlist-selectable&ext=tsx
+import {useState} from 'react';
+import {
+  FlatList,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+type ItemData = {
+  id: string;
+  title: string;
+};
+
+const DATA: ItemData[] = [
+  {
+    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
+    title: 'First Item',
+  },
+  {
+    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
+    title: 'Second Item',
+  },
+  {
+    id: '58694a0f-3da1-471f-bd96-145571e29d72',
+    title: 'Third Item',
+  },
+];
+
+type ItemProps = {
+  item: ItemData;
+  onPress: () => void;
+  backgroundColor: string;
+  textColor: string;
+};
+
+const Item = ({item, onPress, backgroundColor, textColor}: ItemProps) => (
+  <TouchableOpacity onPress={onPress} style={[styles.item, {backgroundColor}]}>
+    <Text style={[styles.title, {color: textColor}]}>{item.title}</Text>
+  </TouchableOpacity>
+);
+
+const App = () => {
+  const [selectedId, setSelectedId] = useState<string>();
+
+  const renderItem = ({item}: {item: ItemData}) => {
+    const backgroundColor = item.id === selectedId ? '#6e3b6e' : '#f9c2ff';
+    const color = item.id === selectedId ? 'white' : 'black';
+
+    return (
+      <Item
+        item={item}
+        onPress={() => setSelectedId(item.id)}
+        backgroundColor={backgroundColor}
+        textColor={color}
+      />
+    );
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <FlatList
+          data={DATA}
+          renderItem={renderItem}
+          keyExtractor={item => item.id}
+          extraData={selectedId}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: StatusBar.currentHeight || 0,
+  },
+  item: {
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+This is a convenience wrapper around [`<VirtualizedList>`](virtualizedlist.md), and thus inherits its props (as well as those of [`<ScrollView>`](scrollview.md)) that aren't explicitly listed here, along with the following caveats:
+
+- Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.
+- This is a `PureComponent` which means that it will not re-render if `props` remain shallow-equal. Make sure that everything your `renderItem` function depends on is passed as a prop (e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on changes. This includes the `data` prop and parent component state.
+- In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes.
+- By default, the list looks for a `key` prop on each item and uses that for the React key. Alternatively, you can provide a custom `keyExtractor` prop.
+
+---
+
+# Reference
+
+## Props
+
+### [VirtualizedList Props](virtualizedlist.md#props)
+
+Inherits [VirtualizedList Props](virtualizedlist.md#props).
+
+---
+
+### <div className="label required basic">Required</div> **`renderItem`**
+
+```tsx
+renderItem({
+  item: ItemT,
+  index: number,
+  separators: {
+    highlight: () => void;
+    unhighlight: () => void;
+    updateProps: (select: 'leading' | 'trailing', newProps: any) => void;
+  }
+}): JSX.Element;
+```
+
+Takes an item from `data` and renders it into the list.
+
+Provides additional metadata like `index` if you need it, as well as a more generic `separators.updateProps` function which let you set whatever props you want to change the rendering of either the leading separator or trailing separator in case the more common `highlight` and `unhighlight` (which set the `highlighted: boolean` prop) are insufficient for your use case.
+
+| Type     |
+| -------- |
+| function |
+
+- `item` (Object): The item from `data` being rendered.
+- `index` (number): The index corresponding to this item in the `data` array.
+- `separators` (Object)
+  - `highlight` (Function)
+  - `unhighlight` (Function)
+  - `updateProps` (Function)
+    - `select` (enum('leading', 'trailing'))
+    - `newProps` (Object)
+
+Example usage:
+
+```tsx
+<FlatList
+  ItemSeparatorComponent={
+    Platform.OS !== 'android' &&
+    (({highlighted}) => (
+      <View
+        style={[style.separator, highlighted && {marginLeft: 0}]}
+      />
+    ))
+  }
+  data={[{title: 'Title Text', key: 'item1'}]}
+  renderItem={({item, index, separators}) => (
+    <TouchableHighlight
+      key={item.key}
+      onPress={() => this._onPress(item)}
+      onShowUnderlay={separators.highlight}
+      onHideUnderlay={separators.unhighlight}>
+      <View style={{backgroundColor: 'white'}}>
+        <Text>{item.title}</Text>
+      </View>
+    </TouchableHighlight>
+  )}
+/>
+```
+
+---
+
+### <div className="label required basic">Required</div> **`data`**
+
+An array (or array-like list) of items to render. Other data types can be used by targeting [`VirtualizedList`](virtualizedlist.md) directly.
+
+| Type      |
+| --------- |
+| ArrayLike |
+
+---
+
+### `ItemSeparatorComponent`
+
+Rendered in between each item, but not at the top or bottom. By default, `highlighted` and `leadingItem` props are provided. `renderItem` provides `separators.highlight`/`unhighlight` which will update the `highlighted` prop, but you can also add custom props with `separators.updateProps`. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
+
+| Type                         |
+| ---------------------------- |
+| component, function, element |
+
+---
+
+### `ListEmptyComponent`
+
+Rendered when the list is empty. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
+
+| Type               |
+| ------------------ |
+| component, element |
+
+---
+
+### `ListFooterComponent`
+
+Rendered at the bottom of all the items. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
+
+| Type               |
+| ------------------ |
+| component, element |
+
+---
+
+### `ListFooterComponentStyle`
+
+Styling for internal View for `ListFooterComponent`.
+
+| Type                           |
+| ------------------------------ |
+| [View Style](view-style-props) |
+
+---
+
+### `ListHeaderComponent`
+
+Rendered at the top of all the items. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
+
+| Type               |
+| ------------------ |
+| component, element |
+
+---
+
+### `ListHeaderComponentStyle`
+
+Styling for internal View for `ListHeaderComponent`.
+
+| Type                           |
+| ------------------------------ |
+| [View Style](view-style-props) |
+
+---
+
+### `columnWrapperStyle`
+
+Optional custom style for multi-item rows generated when `numColumns > 1`.
+
+| Type                           |
+| ------------------------------ |
+| [View Style](view-style-props) |
+
+---
+
+### `extraData`
+
+A marker property for telling the list to re-render (since it implements `PureComponent`). If any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the `data` prop, stick it here and treat it immutably.
+
+| Type |
+| ---- |
+| any  |
+
+---
+
+### `getItemLayout`
+
+```tsx
+(data, index) => {length: number, offset: number, index: number}
+```
+
+`getItemLayout` is an optional optimization that allows skipping the measurement of dynamic content if you know the size (height or width) of items ahead of time. `getItemLayout` is efficient if you have fixed size items, for example:
+
+```tsx
+  getItemLayout={(data, index) => (
+    {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
+  )}
+```
+
+Adding `getItemLayout` can be a great performance boost for lists of several hundred items. Remember to include separator length (height or width) in your offset calculation if you specify `ItemSeparatorComponent`.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `horizontal`
+
+If `true`, renders items next to each other horizontally instead of stacked vertically.
+
+| Type    |
+| ------- |
+| boolean |
+
+---
+
+### `initialNumToRender`
+
+How many items to render in the initial batch. This should be enough to fill the screen but not much more. Note these items will never be unmounted as part of the windowed rendering in order to improve perceived performance of scroll-to-top actions.
+
+| Type   | Default |
+| ------ | ------- |
+| number | `10`    |
+
+---
+
+### `initialScrollIndex`
+
+Instead of starting at the top with the first item, start at `initialScrollIndex`. This disables the "scroll to top" optimization that keeps the first `initialNumToRender` items always rendered and immediately renders the items starting at this initial index. Requires `getItemLayout` to be implemented.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `inverted`
+
+Reverses the direction of scroll. Uses scale transforms of `-1`.
+
+| Type    |
+| ------- |
+| boolean |
+
+---
+
+### `keyExtractor`
+
+```tsx
+(item: ItemT, index: number) => string;
+```
+
+Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks `item.key`, then `item.id`, and then falls back to using the index, like React does.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `numColumns`
+
+Multiple columns can only be rendered with `horizontal={false}` and will zig-zag like a `flexWrap` layout. Items should all be the same height - masonry layouts are not supported.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `onRefresh`
+
+```tsx
+() => void;
+```
+
+If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the `refreshing` prop correctly.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onViewableItemsChanged`
+
+Called when the viewability of rows changes, as defined by the `viewabilityConfig` prop.
+
+| Type                                                                                                  |
+| ----------------------------------------------------------------------------------------------------- |
+| `md (callback: {changed: [ViewToken](viewtoken)[], viewableItems: [ViewToken](viewtoken)[]} => void;` |
+
+---
+
+### `progressViewOffset`
+
+Set this when offset is needed for the loading indicator to show correctly.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `refreshing`
+
+Set this true while waiting for new data from a refresh.
+
+| Type    |
+| ------- |
+| boolean |
+
+---
+
+### `removeClippedSubviews`
+
+:::warning
+Using this property may lead to bugs (missing content) in some circumstances - use at your own risk.
+:::
+
+When `true`, offscreen child views are removed from their native backing superview when offscreen. This may improve scroll performance for large lists. On Android the default value is `true`.
+
+| Type    |
+| ------- |
+| boolean |
+
+---
+
+### `viewabilityConfig`
+
+See [`ViewabilityHelper.js`](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Lists/ViewabilityHelper.js) for flow type and further documentation.
+
+| Type              |
+| ----------------- |
+| ViewabilityConfig |
+
+`viewabilityConfig` takes a type `ViewabilityConfig` an object with following properties
+
+| Property                         | Type    |
+| -------------------------------- | ------- |
+| minimumViewTime                  | number  |
+| viewAreaCoveragePercentThreshold | number  |
+| itemVisiblePercentThreshold      | number  |
+| waitForInteraction               | boolean |
+
+At least one of the `viewAreaCoveragePercentThreshold` or `itemVisiblePercentThreshold` is required. This needs to be done in the `constructor` to avoid following error ([ref](https://github.com/facebook/react-native/issues/17408)):
+
+```
+  Error: Changing viewabilityConfig on the fly is not supported
+```
+
+```tsx
+constructor (props) {
+  super(props)
+
+  this.viewabilityConfig = {
+      waitForInteraction: true,
+      viewAreaCoveragePercentThreshold: 95
+  }
+}
+```
+
+```tsx
+<FlatList
+    viewabilityConfig={this.viewabilityConfig}
+  ...
+```
+
+#### minimumViewTime
+
+Minimum amount of time (in milliseconds) that an item must be physically viewable before the viewability callback will be fired. A high number means that scrolling through content without stopping will not mark the content as viewable.
+
+#### viewAreaCoveragePercentThreshold
+
+Percent of viewport that must be covered for a partially occluded item to count as "viewable", 0-100. Fully visible items are always considered viewable. A value of 0 means that a single pixel in the viewport makes the item viewable, and a value of 100 means that an item must be either entirely visible or cover the entire viewport to count as viewable.
+
+#### itemVisiblePercentThreshold
+
+Similar to `viewAreaCoveragePercentThreshold`, but considers the percent of the item that is visible, rather than the fraction of the viewable area it covers.
+
+#### waitForInteraction
+
+Nothing is considered viewable until the user scrolls or `recordInteraction` is called after render.
+
+---
+
+### `viewabilityConfigCallbackPairs`
+
+List of `ViewabilityConfig`/`onViewableItemsChanged` pairs. A specific `onViewableItemsChanged` will be called when its corresponding `ViewabilityConfig`'s conditions are met. See `ViewabilityHelper.js` for flow type and further documentation.
+
+| Type                                   |
+| -------------------------------------- |
+| array of ViewabilityConfigCallbackPair |
+
+## Methods
+
+### `flashScrollIndicators()`
+
+```tsx
+flashScrollIndicators();
+```
+
+Displays the scroll indicators momentarily.
+
+---
+
+### `getNativeScrollRef()`
+
+```tsx
+getNativeScrollRef(): React.ElementRef<typeof ScrollViewComponent>;
+```
+
+Provides a reference to the underlying scroll component
+
+---
+
+### `getScrollResponder()`
+
+```tsx
+getScrollResponder(): ScrollResponderMixin;
+```
+
+Provides a handle to the underlying scroll responder.
+
+---
+
+### `getScrollableNode()`
+
+```tsx
+getScrollableNode(): any;
+```
+
+Provides a handle to the underlying scroll node.
+
+### `scrollToEnd()`
+
+```tsx
+scrollToEnd(params?: {animated?: boolean});
+```
+
+Scrolls to the end of the content. May be janky without `getItemLayout` prop.
+
+**Parameters:**
+
+| Name   | Type   |
+| ------ | ------ |
+| params | object |
+
+Valid `params` keys are:
+
+- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
+
+---
+
+### `scrollToIndex()`
+
+```tsx
+scrollToIndex: (params: {
+  index: number;
+  animated?: boolean;
+  viewOffset?: number;
+  viewPosition?: number;
+});
+```
+
+Scrolls to the item at the specified index such that it is positioned in the viewable area such that `viewPosition` 0 places it at the top, 1 at the bottom, and 0.5 centered in the middle.
+
+:::note
+Cannot scroll to locations outside the render window without specifying the `getItemLayout` prop.
+:::
+
+**Parameters:**
+
+| Name                                                        | Type   |
+| ----------------------------------------------------------- | ------ |
+| params <div className="label basic required">Required</div> | object |
+
+Valid `params` keys are:
+
+- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
+- 'index' (number) - The index to scroll to. Required.
+- 'viewOffset' (number) - A fixed number of pixels to offset the final target position.
+- 'viewPosition' (number) - A value of `0` places the item specified by index at the top, `1` at the bottom, and `0.5` centered in the middle.
+
+---
+
+### `scrollToItem()`
+
+```tsx
+scrollToItem(params: {
+  animated?: ?boolean,
+  item: Item,
+  viewPosition?: number,
+});
+```
+
+Requires linear scan through data - use `scrollToIndex` instead if possible.
+
+:::note
+Cannot scroll to locations outside the render window without specifying the `getItemLayout` prop.
+:::
+
+**Parameters:**
+
+| Name                                                        | Type   |
+| ----------------------------------------------------------- | ------ |
+| params <div className="label basic required">Required</div> | object |
+
+Valid `params` keys are:
+
+- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
+- 'item' (object) - The item to scroll to. Required.
+- 'viewPosition' (number)
+
+---
+
+### `scrollToOffset()`
+
+```tsx
+scrollToOffset(params: {
+  offset: number;
+  animated?: boolean;
+});
+```
+
+Scroll to a specific content pixel offset in the list.
+
+**Parameters:**
+
+| Name                                                        | Type   |
+| ----------------------------------------------------------- | ------ |
+| params <div className="label basic required">Required</div> | object |
+
+Valid `params` keys are:
+
+- 'offset' (number) - The offset to scroll to. In case of `horizontal` being true, the offset is the x-value, in any other case the offset is the y-value. Required.
+- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
diff --git a/website/versioned_docs/version-0.83/flexbox.md b/website/versioned_docs/version-0.83/flexbox.md
index 039a7bdf60b..b745c9684ef 100644
--- a/website/versioned_docs/version-0.83/flexbox.md
+++ b/website/versioned_docs/version-0.83/flexbox.md
@@ -1,2884 +1,2883 @@
----
-id: flexbox
-title: Layout with Flexbox
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-A component can specify the layout of its children using the Flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes.
-
-You will normally use a combination of `flexDirection`, `alignItems`, and `justifyContent` to achieve the right layout.
-
-:::caution
-Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions.
-The defaults are different, with `flexDirection` defaulting to `column` instead of `row`, `alignContent` defaulting to `flex-start` instead of `stretch`, `flexShrink` defaulting to `0` instead of `1`, the `flex` parameter only supporting a single number.
-:::
-
-## Flex
-
-[`flex`](layout-props#flex) will define how your items are going to **“fill”** over the available space along your main axis. Space will be divided according to each element's flex property.
-
-In the following example, the red, orange, and green views are all children in the container view that has `flex: 1` set. The red view uses `flex: 1` , the orange view uses `flex: 2`, and the green view uses `flex: 3` . **1+2+3 = 6**, which means that the red view will get `1/6` of the space, the orange `2/6` of the space, and the green `3/6` of the space.
-
-```SnackPlayer name=Flex%20Example
-import React from 'react';
-import {StyleSheet, View} from 'react-native';
-
-const Flex = () => {
-  return (
-    <View
-      style={[
-        styles.container,
-        {
-          // Try setting `flexDirection` to `"row"`.
-          flexDirection: 'column',
-        },
-      ]}>
-      <View style={{flex: 1, backgroundColor: 'red'}} />
-      <View style={{flex: 2, backgroundColor: 'darkorange'}} />
-      <View style={{flex: 3, backgroundColor: 'green'}} />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 20,
-  },
-});
-
-export default Flex;
-```
-
-## Flex Direction
-
-[`flexDirection`](layout-props#flexdirection) controls the direction in which the children of a node are laid out. This is also referred to as the main axis. The cross axis is the axis perpendicular to the main axis, or the axis which the wrapping lines are laid out in.
-
-- `column` (**default value**) Align children from top to bottom. If wrapping is enabled, then the next line will start to the right of the first item on the top of the container.
-
-- `row` Align children from left to right. If wrapping is enabled, then the next line will start under the first item on the left of the container.
-
-- `column-reverse` Align children from bottom to top. If wrapping is enabled, then the next line will start to the right of the first item on the bottom of the container.
-
-- `row-reverse` Align children from right to left. If wrapping is enabled, then the next line will start under the first item on the right of the container.
-
-You can learn more [here](https://www.yogalayout.dev/docs/styling/flex-direction).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Flex%20Direction&ext=js
-import React, {useState} from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
-
-const FlexDirectionBasics = () => {
-  const [flexDirection, setflexDirection] = useState('column');
-
-  return (
-    <PreviewLayout
-      label="flexDirection"
-      values={['column', 'row', 'column-reverse', 'row-reverse']}
-      selectedValue={flexDirection}
-      setSelectedValue={setflexDirection}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default FlexDirectionBasics;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Flex%20Direction&ext=tsx
-import React, {useState} from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const FlexDirectionBasics = () => {
-  const [flexDirection, setflexDirection] = useState('column');
-
-  return (
-    <PreviewLayout
-      label="flexDirection"
-      values={['column', 'row', 'column-reverse', 'row-reverse']}
-      selectedValue={flexDirection}
-      setSelectedValue={setflexDirection}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default FlexDirectionBasics;
-```
-
-</TabItem>
-</Tabs>
-
-## Layout Direction
-
-Layout [`direction`](layout-props#direction) specifies the direction in which children and text in a hierarchy should be laid out. Layout direction also affects what edge `start` and `end` refer to. By default, React Native lays out with LTR layout direction. In this mode `start` refers to left and `end` refers to right.
-
-- `LTR` (**default value**) Text and children are laid out from left to right. Margin and padding applied to the start of an element are applied on the left side.
-
-- `RTL` Text and children are laid out from right to left. Margin and padding applied to the start of an element are applied on the right side.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Flex%20Direction&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const DirectionLayout = () => {
-  const [direction, setDirection] = useState('ltr');
-
-  return (
-    <PreviewLayout
-      label="direction"
-      selectedValue={direction}
-      values={['ltr', 'rtl']}
-      setSelectedValue={setDirection}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default DirectionLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Flex%20Direction&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const DirectionLayout = () => {
-  const [direction, setDirection] = useState('ltr');
-
-  return (
-    <PreviewLayout
-      label="direction"
-      selectedValue={direction}
-      values={['ltr', 'rtl']}
-      setSelectedValue={setDirection}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default DirectionLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## Justify Content
-
-[`justifyContent`](layout-props#justifycontent) describes how to align children within the main axis of their container. For example, you can use this property to center a child horizontally within a container with `flexDirection` set to `row` or vertically within a container with `flexDirection` set to `column`.
-
-- `flex-start`(**default value**) Align children of a container to the start of the container's main axis.
-
-- `flex-end` Align children of a container to the end of the container's main axis.
-
-- `center` Align children of a container in the center of the container's main axis.
-
-- `space-between` Evenly space off children across the container's main axis, distributing the remaining space between the children.
-
-- `space-around` Evenly space off children across the container's main axis, distributing the remaining space around the children. Compared to `space-between`, using `space-around` will result in space being distributed to the beginning of the first child and end of the last child.
-
-- `space-evenly` Evenly distribute children within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.
-
-You can learn more [here](https://www.yogalayout.dev/docs/styling/justify-content).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Justify%20Content&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const JustifyContentBasics = () => {
-  const [justifyContent, setJustifyContent] = useState('flex-start');
-
-  return (
-    <PreviewLayout
-      label="justifyContent"
-      selectedValue={justifyContent}
-      values={[
-        'flex-start',
-        'flex-end',
-        'center',
-        'space-between',
-        'space-around',
-        'space-evenly',
-      ]}
-      setSelectedValue={setJustifyContent}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default JustifyContentBasics;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Justify%20Content&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const JustifyContentBasics = () => {
-  const [justifyContent, setJustifyContent] = useState('flex-start');
-
-  return (
-    <PreviewLayout
-      label="justifyContent"
-      selectedValue={justifyContent}
-      values={[
-        'flex-start',
-        'flex-end',
-        'center',
-        'space-between',
-        'space-around',
-        'space-evenly',
-      ]}
-      setSelectedValue={setJustifyContent}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default JustifyContentBasics;
-```
-
-</TabItem>
-</Tabs>
-
-## Align Items
-
-[`alignItems`](layout-props#alignitems) describes how to align children along the cross axis of their container. It is very similar to `justifyContent` but instead of applying to the main axis, `alignItems` applies to the cross axis.
-
-- `stretch` (**default value**) Stretch children of a container to match the `height` of the container's cross axis.
-
-- `flex-start` Align children of a container to the start of the container's cross axis.
-
-- `flex-end` Align children of a container to the end of the container's cross axis.
-
-- `center` Align children of a container in the center of the container's cross axis.
-
-- `baseline` Align children of a container along a common baseline. Individual children can be set to be the reference baseline for their parents.
-
-:::info
-For `stretch` to have an effect, children must not have a fixed dimension along the secondary axis. In the following example, setting `alignItems: stretch` does nothing until the `width: 50` is removed from the children.
-:::
-
-You can learn more [here](https://www.yogalayout.dev/docs/styling/align-items-self).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Align%20Items&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const AlignItemsLayout = () => {
-  const [alignItems, setAlignItems] = useState('stretch');
-
-  return (
-    <PreviewLayout
-      label="alignItems"
-      selectedValue={alignItems}
-      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
-      setSelectedValue={setAlignItems}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View
-        style={[
-          styles.box,
-          {
-            backgroundColor: 'steelblue',
-            width: 'auto',
-            minWidth: 50,
-          },
-        ]}
-      />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignItemsLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Align%20Items&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const AlignItemsLayout = () => {
-  const [alignItems, setAlignItems] = useState('stretch');
-
-  return (
-    <PreviewLayout
-      label="alignItems"
-      selectedValue={alignItems}
-      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
-      setSelectedValue={setAlignItems}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View
-        style={[
-          styles.box,
-          {
-            backgroundColor: 'steelblue',
-            width: 'auto',
-            minWidth: 50,
-          },
-        ]}
-      />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignItemsLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## Align Self
-
-[`alignSelf`](layout-props#alignself) has the same options and effect as `alignItems` but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent. `alignSelf` overrides any option set by the parent with `alignItems`.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Align%20Self&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const AlignSelfLayout = () => {
-  const [alignSelf, setAlignSelf] = useState('stretch');
-
-  return (
-    <PreviewLayout
-      label="alignSelf"
-      selectedValue={alignSelf}
-      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
-      setSelectedValue={setAlignSelf}>
-      <View
-        style={[
-          styles.box,
-          {
-            alignSelf,
-            width: 'auto',
-            minWidth: 50,
-            backgroundColor: 'powderblue',
-          },
-        ]}
-      />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={styles.container}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignSelfLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Align%20Self&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-import type {FlexAlignType} from 'react-native';
-
-const AlignSelfLayout = () => {
-  const [alignSelf, setAlignSelf] = useState<FlexAlignType>('stretch');
-
-  return (
-    <PreviewLayout
-      label="alignSelf"
-      selectedValue={alignSelf}
-      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
-      setSelectedValue={setAlignSelf}>
-      <View
-        style={[
-          styles.box,
-          {
-            alignSelf,
-            width: 'auto',
-            minWidth: 50,
-            backgroundColor: 'powderblue',
-          },
-        ]}
-      />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: FlexAlignType[];
-  selectedValue: string;
-  setSelectedValue: (value: FlexAlignType) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={styles.container}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignSelfLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## Align Content
-
-[alignContent](layout-props#aligncontent) defines the distribution of lines along the cross-axis. This only has effect when items are wrapped to multiple lines using `flexWrap`.
-
-- `flex-start` (**default value**) Align wrapped lines to the start of the container's cross axis.
-
-- `flex-end` Align wrapped lines to the end of the container's cross axis.
-
-- `stretch` (_default value when using Yoga on the web_) Stretch wrapped lines to match the height of the container's cross axis.
-
-- `center` Align wrapped lines in the center of the container's cross axis.
-
-- `space-between` Evenly space wrapped lines across the container's cross axis, distributing the remaining space between the lines.
-
-- `space-around` Evenly space wrapped lines across the container's cross axis, distributing the remaining space around the lines. Each end of the container has a half-sized space compared to the space between items.
-
-- `space-evenly` Evenly space wrapped lines across the container's cross axis, distributing the remaining space around the lines. Each space is the same size.
-
-You can learn more [here](https://www.yogalayout.dev/docs/styling/align-content).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Align%20Content&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const AlignContentLayout = () => {
-  const [alignContent, setAlignContent] = useState('flex-start');
-
-  return (
-    <PreviewLayout
-      label="alignContent"
-      selectedValue={alignContent}
-      values={[
-        'flex-start',
-        'flex-end',
-        'stretch',
-        'center',
-        'space-between',
-        'space-around',
-      ]}
-      setSelectedValue={setAlignContent}>
-      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
-      <View style={[styles.box, {backgroundColor: 'orange'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
-      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'purple'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexWrap: 'wrap',
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignContentLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Align%20Content&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const AlignContentLayout = () => {
-  const [alignContent, setAlignContent] = useState('flex-start');
-
-  return (
-    <PreviewLayout
-      label="alignContent"
-      selectedValue={alignContent}
-      values={[
-        'flex-start',
-        'flex-end',
-        'stretch',
-        'center',
-        'space-between',
-        'space-around',
-      ]}
-      setSelectedValue={setAlignContent}>
-      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
-      <View style={[styles.box, {backgroundColor: 'orange'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
-      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'purple'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexWrap: 'wrap',
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignContentLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## Flex Wrap
-
-The [`flexWrap`](layout-props#flexwrap) property is set on containers and it controls what happens when children overflow the size of the container along the main axis. By default, children are forced into a single line (which can shrink elements). If wrapping is allowed, items are wrapped into multiple lines along the main axis if needed.
-
-When wrapping lines, `alignContent` can be used to specify how the lines are placed in the container. Learn more [here](https://www.yogalayout.dev/docs/styling/flex-wrap).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Flex%20Wrap&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const FlexWrapLayout = () => {
-  const [flexWrap, setFlexWrap] = useState('wrap');
-
-  return (
-    <PreviewLayout
-      label="flexWrap"
-      selectedValue={flexWrap}
-      values={['wrap', 'nowrap']}
-      setSelectedValue={setFlexWrap}>
-      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
-      <View style={[styles.box, {backgroundColor: 'orange'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
-      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'purple'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default FlexWrapLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Flex%20Wrap&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const FlexWrapLayout = () => {
-  const [flexWrap, setFlexWrap] = useState('wrap');
-
-  return (
-    <PreviewLayout
-      label="flexWrap"
-      selectedValue={flexWrap}
-      values={['wrap', 'nowrap']}
-      setSelectedValue={setFlexWrap}>
-      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
-      <View style={[styles.box, {backgroundColor: 'orange'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
-      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'purple'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default FlexWrapLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## Flex Basis, Grow, and Shrink
-
-- [`flexBasis`](layout-props#flexbasis) is an axis-independent way of providing the default size of an item along the main axis. Setting the `flexBasis` of a child is similar to setting the `width` of that child if its parent is a container with `flexDirection: row` or setting the `height` of a child if its parent is a container with `flexDirection: column`. The `flexBasis` of an item is the default size of that item, the size of the item before any `flexGrow` and `flexShrink` calculations are performed.
-
-- [`flexGrow`](layout-props#flexgrow) describes how much space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
-
-  `flexGrow` accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the children’s `flexGrow` values.
-
-- [`flexShrink`](layout-props#flexshrink) describes how to shrink children along the main axis in the case in which the total size of the children overflows the size of the container on the main axis. `flexShrink` is very similar to `flexGrow` and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed.
-
-  `flexShrink` accepts any floating point value >= 0, with 0 being the default value (on the web, the default is 1). A container will shrink its children weighted by the children’s `flexShrink` values.
-
-You can learn more [here](https://www.yogalayout.dev/docs/styling/flex-basis-grow-shrink).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink&ext=js
-import React, {useState} from 'react';
-import {View, Text, TextInput, StyleSheet} from 'react-native';
-
-const App = () => {
-  const [powderblue, setPowderblue] = useState({
-    flexGrow: 0,
-    flexShrink: 1,
-    flexBasis: 'auto',
-  });
-  const [skyblue, setSkyblue] = useState({
-    flexGrow: 1,
-    flexShrink: 0,
-    flexBasis: 100,
-  });
-  const [steelblue, setSteelblue] = useState({
-    flexGrow: 0,
-    flexShrink: 1,
-    flexBasis: 200,
-  });
-  return (
-    <View style={styles.container}>
-      <View
-        style={[
-          styles.container,
-          {
-            flexDirection: 'row',
-            alignContent: 'space-between',
-          },
-        ]}>
-        <BoxInfo color="powderblue" {...powderblue} setStyle={setPowderblue} />
-        <BoxInfo color="skyblue" {...skyblue} setStyle={setSkyblue} />
-        <BoxInfo color="steelblue" {...steelblue} setStyle={setSteelblue} />
-      </View>
-      <View style={styles.previewContainer}>
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: powderblue.flexBasis,
-              flexGrow: powderblue.flexGrow,
-              flexShrink: powderblue.flexShrink,
-              backgroundColor: 'powderblue',
-            },
-          ]}
-        />
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: skyblue.flexBasis,
-              flexGrow: skyblue.flexGrow,
-              flexShrink: skyblue.flexShrink,
-              backgroundColor: 'skyblue',
-            },
-          ]}
-        />
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: steelblue.flexBasis,
-              flexGrow: steelblue.flexGrow,
-              flexShrink: steelblue.flexShrink,
-              backgroundColor: 'steelblue',
-            },
-          ]}
-        />
-      </View>
-    </View>
-  );
-};
-
-const BoxInfo = ({color, flexBasis, flexShrink, setStyle, flexGrow}) => (
-  <View style={[styles.row, {flexDirection: 'column'}]}>
-    <View
-      style={[
-        styles.boxLabel,
-        {
-          backgroundColor: color,
-        },
-      ]}>
-      <Text
-        style={{
-          color: '#fff',
-          fontWeight: '500',
-          textAlign: 'center',
-        }}>
-        Box
-      </Text>
-    </View>
-    <Text style={styles.label}>flexBasis</Text>
-    <TextInput
-      value={flexBasis}
-      style={styles.input}
-      onChangeText={fB =>
-        setStyle(value => ({
-          ...value,
-          flexBasis: isNaN(parseInt(fB, 10)) ? 'auto' : parseInt(fB, 10),
-        }))
-      }
-    />
-    <Text style={styles.label}>flexShrink</Text>
-    <TextInput
-      value={flexShrink}
-      style={styles.input}
-      onChangeText={fS =>
-        setStyle(value => ({
-          ...value,
-          flexShrink: isNaN(parseInt(fS, 10)) ? undefined : parseInt(fS, 10),
-        }))
-      }
-    />
-    <Text style={styles.label}>flexGrow</Text>
-    <TextInput
-      value={flexGrow}
-      style={styles.input}
-      onChangeText={fG =>
-        setStyle(value => ({
-          ...value,
-          flexGrow: isNaN(parseInt(fG, 10)) ? undefined : parseInt(fG, 10),
-        }))
-      }
-    />
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingHorizontal: 10,
-  },
-  box: {
-    flex: 1,
-    height: 50,
-    width: 50,
-  },
-  boxLabel: {
-    minWidth: 80,
-    padding: 8,
-    borderRadius: 4,
-    marginTop: 8,
-  },
-  label: {
-    marginTop: 6,
-    fontSize: 16,
-    fontWeight: '100',
-  },
-  previewContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    backgroundColor: 'aliceblue',
-  },
-  row: {
-    flex: 1,
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    marginBottom: 10,
-  },
-  input: {
-    borderBottomWidth: 1,
-    paddingVertical: 3,
-    width: 50,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink&ext=tsx
-import React, {useState} from 'react';
-import {View, Text, TextInput, StyleSheet} from 'react-native';
-import type {ViewStyle} from 'react-native';
-
-const App = () => {
-  const [powderblue, setPowderblue] = useState<ViewStyle>({
-    flexGrow: 0,
-    flexShrink: 1,
-    flexBasis: 'auto',
-  });
-  const [skyblue, setSkyblue] = useState<ViewStyle>({
-    flexGrow: 1,
-    flexShrink: 0,
-    flexBasis: 100,
-  });
-  const [steelblue, setSteelblue] = useState<ViewStyle>({
-    flexGrow: 0,
-    flexShrink: 1,
-    flexBasis: 200,
-  });
-  return (
-    <View style={styles.container}>
-      <View
-        style={[
-          styles.container,
-          {
-            flexDirection: 'row',
-            alignContent: 'space-between',
-          },
-        ]}>
-        <BoxInfo color="powderblue" {...powderblue} setStyle={setPowderblue} />
-        <BoxInfo color="skyblue" {...skyblue} setStyle={setSkyblue} />
-        <BoxInfo color="steelblue" {...steelblue} setStyle={setSteelblue} />
-      </View>
-      <View style={styles.previewContainer}>
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: powderblue.flexBasis,
-              flexGrow: powderblue.flexGrow,
-              flexShrink: powderblue.flexShrink,
-              backgroundColor: 'powderblue',
-            },
-          ]}
-        />
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: skyblue.flexBasis,
-              flexGrow: skyblue.flexGrow,
-              flexShrink: skyblue.flexShrink,
-              backgroundColor: 'skyblue',
-            },
-          ]}
-        />
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: steelblue.flexBasis,
-              flexGrow: steelblue.flexGrow,
-              flexShrink: steelblue.flexShrink,
-              backgroundColor: 'steelblue',
-            },
-          ]}
-        />
-      </View>
-    </View>
-  );
-};
-
-type BoxInfoProps = ViewStyle & {
-  color: string;
-  setStyle: React.Dispatch<React.SetStateAction<ViewStyle>>;
-};
-
-const BoxInfo = ({
-  color,
-  flexBasis,
-  flexShrink,
-  setStyle,
-  flexGrow,
-}: BoxInfoProps) => (
-  <View style={[styles.row, {flexDirection: 'column'}]}>
-    <View
-      style={[
-        styles.boxLabel,
-        {
-          backgroundColor: color,
-        },
-      ]}>
-      <Text
-        style={{
-          color: '#fff',
-          fontWeight: '500',
-          textAlign: 'center',
-        }}>
-        Box
-      </Text>
-    </View>
-    <Text style={styles.label}>flexBasis</Text>
-    <TextInput
-      value={String(flexBasis)}
-      style={styles.input}
-      onChangeText={fB =>
-        setStyle(value => ({
-          ...value,
-          flexBasis: isNaN(parseInt(fB, 10)) ? 'auto' : parseInt(fB, 10),
-        }))
-      }
-    />
-    <Text style={styles.label}>flexShrink</Text>
-    <TextInput
-      value={String(flexShrink)}
-      style={styles.input}
-      onChangeText={fS =>
-        setStyle(value => ({
-          ...value,
-          flexShrink: isNaN(parseInt(fS, 10)) ? undefined : parseInt(fS, 10),
-        }))
-      }
-    />
-    <Text style={styles.label}>flexGrow</Text>
-    <TextInput
-      value={String(flexGrow)}
-      style={styles.input}
-      onChangeText={fG =>
-        setStyle(value => ({
-          ...value,
-          flexGrow: isNaN(parseInt(fG, 10)) ? undefined : parseInt(fG, 10),
-        }))
-      }
-    />
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingHorizontal: 10,
-  },
-  box: {
-    flex: 1,
-    height: 50,
-    width: 50,
-  },
-  boxLabel: {
-    minWidth: 80,
-    padding: 8,
-    borderRadius: 4,
-    marginTop: 8,
-  },
-  label: {
-    marginTop: 6,
-    fontSize: 16,
-    fontWeight: '100',
-  },
-  previewContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    backgroundColor: 'aliceblue',
-  },
-  row: {
-    flex: 1,
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    marginBottom: 10,
-  },
-  input: {
-    borderBottomWidth: 1,
-    paddingVertical: 3,
-    width: 50,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-## Row Gap, Column Gap and Gap
-
-- [`rowGap`](layout-props#rowgap) sets the size of the gap (gutter) between an element's rows.
-
-- [`columnGap`](layout-props#columngap) sets the size of the gap (gutter) between an element's columns.
-
-- [`gap`](layout-props#gap) sets the size of the gap (gutter) between rows and columns. It is a shorthand for `rowGap` and `columnGap`.
-
-You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Row%20Gap%20and%20Column%20Gap&ext=js
-import React, {useState} from 'react';
-import {View, Text, StyleSheet, TextInput} from 'react-native';
-
-const RowGapAndColumnGap = () => {
-  const [rowGap, setRowGap] = useState(10);
-  const [columnGap, setColumnGap] = useState(10);
-
-  return (
-    <PreviewLayout
-      columnGap={columnGap}
-      handleColumnGapChange={setColumnGap}
-      rowGap={rowGap}
-      handleRowGapChange={setRowGap}>
-      <View style={[styles.box, styles.box1]} />
-      <View style={[styles.box, styles.box2]} />
-      <View style={[styles.box, styles.box3]} />
-      <View style={[styles.box, styles.box4]} />
-      <View style={[styles.box, styles.box5]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  children,
-  handleColumnGapChange,
-  handleRowGapChange,
-  rowGap,
-  columnGap,
-}) => (
-  <View style={styles.previewContainer}>
-    <View style={styles.inputContainer}>
-      <View style={styles.itemsCenter}>
-        <Text>Row Gap</Text>
-        <TextInput
-          style={styles.input}
-          value={rowGap}
-          onChangeText={v => handleRowGapChange(Number(v))}
-        />
-      </View>
-      <View style={styles.itemsCenter}>
-        <Text>Column Gap</Text>
-        <TextInput
-          style={styles.input}
-          value={columnGap}
-          onChangeText={v => handleColumnGapChange(Number(v))}
-        />
-      </View>
-    </View>
-    <View style={[styles.container, {rowGap, columnGap}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  itemsCenter: {alignItems: 'center'},
-  inputContainer: {
-    gap: 4,
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-  },
-  previewContainer: {padding: 10, flex: 1},
-  input: {
-    borderBottomWidth: 1,
-    paddingVertical: 3,
-    width: 50,
-    textAlign: 'center',
-  },
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-    flexWrap: 'wrap',
-    alignContent: 'flex-start',
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  box1: {
-    backgroundColor: 'orangered',
-  },
-  box2: {
-    backgroundColor: 'orange',
-  },
-  box3: {
-    backgroundColor: 'mediumseagreen',
-  },
-  box4: {
-    backgroundColor: 'deepskyblue',
-  },
-  box5: {
-    backgroundColor: 'mediumturquoise',
-  },
-});
-
-export default RowGapAndColumnGap;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Row%20Gap%20and%20Column%20Gap&ext=tsx
-import React, {useState} from 'react';
-import {View, Text, StyleSheet, TextInput} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const RowGapAndColumnGap = () => {
-  const [rowGap, setRowGap] = useState(10);
-  const [columnGap, setColumnGap] = useState(10);
-
-  return (
-    <PreviewLayout
-      columnGap={columnGap}
-      handleColumnGapChange={setColumnGap}
-      rowGap={rowGap}
-      handleRowGapChange={setRowGap}>
-      <View style={[styles.box, styles.box1]} />
-      <View style={[styles.box, styles.box2]} />
-      <View style={[styles.box, styles.box3]} />
-      <View style={[styles.box, styles.box4]} />
-      <View style={[styles.box, styles.box5]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  columnGap: number;
-  handleColumnGapChange: (gap: number) => void;
-  rowGap: number;
-  handleRowGapChange: (gap: number) => void;
-}>;
-
-const PreviewLayout = ({
-  children,
-  handleColumnGapChange,
-  handleRowGapChange,
-  rowGap,
-  columnGap,
-}: PreviewLayoutProps) => (
-  <View style={styles.previewContainer}>
-    <View style={styles.inputContainer}>
-      <View style={styles.itemsCenter}>
-        <Text>Row Gap</Text>
-        <TextInput
-          style={styles.input}
-          value={String(rowGap)}
-          onChangeText={v => handleRowGapChange(Number(v))}
-        />
-      </View>
-      <View style={styles.itemsCenter}>
-        <Text>Column Gap</Text>
-        <TextInput
-          style={styles.input}
-          value={String(columnGap)}
-          onChangeText={v => handleColumnGapChange(Number(v))}
-        />
-      </View>
-    </View>
-    <View style={[styles.container, {rowGap, columnGap}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  itemsCenter: {alignItems: 'center'},
-  inputContainer: {
-    gap: 4,
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-  },
-  previewContainer: {padding: 10, flex: 1},
-  input: {
-    borderBottomWidth: 1,
-    paddingVertical: 3,
-    width: 50,
-    textAlign: 'center',
-  },
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-    flexWrap: 'wrap',
-    alignContent: 'flex-start',
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  box1: {
-    backgroundColor: 'orangered',
-  },
-  box2: {
-    backgroundColor: 'orange',
-  },
-  box3: {
-    backgroundColor: 'mediumseagreen',
-  },
-  box4: {
-    backgroundColor: 'deepskyblue',
-  },
-  box5: {
-    backgroundColor: 'mediumturquoise',
-  },
-});
-
-export default RowGapAndColumnGap;
-```
-
-</TabItem>
-</Tabs>
-
-## Width and Height
-
-The `width` property specifies the width of an element's content area. Similarly, the `height` property specifies the height of an element's content area.
-
-Both `width` and `height` can take the following values:
-
-- `auto` (**default value**) React Native calculates the width/height for the element based on its content, whether that is other children, text, or an image.
-
-- `pixels` Defines the width/height in absolute pixels. Depending on other styles set on the component, this may or may not be the final dimension of the node.
-
-- `percentage` Defines the width or height in percentage of its parent's width or height, respectively.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Width%20and%20Height&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const WidthHeightBasics = () => {
-  const [widthType, setWidthType] = useState('auto');
-  const [heightType, setHeightType] = useState('auto');
-
-  return (
-    <PreviewLayout
-      widthType={widthType}
-      heightType={heightType}
-      widthValues={['auto', 300, '80%']}
-      heightValues={['auto', 200, '60%']}
-      setWidthType={setWidthType}
-      setHeightType={setHeightType}>
-      <View
-        style={{
-          alignSelf: 'flex-start',
-          backgroundColor: 'aliceblue',
-          height: heightType,
-          width: widthType,
-          padding: 15,
-        }}>
-        <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-        <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-        <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-      </View>
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  children,
-  widthType,
-  heightType,
-  widthValues,
-  heightValues,
-  setWidthType,
-  setHeightType,
-}) => (
-  <SafeAreaProvider>
-    <SafeAreaView style={{flex: 1, padding: 10}}>
-      <View style={styles.row}>
-        <Text style={styles.label}>width </Text>
-        {widthValues.map(value => (
-          <TouchableOpacity
-            key={value}
-            onPress={() => setWidthType(value)}
-            style={[styles.button, widthType === value && styles.selected]}>
-            <Text
-              style={[
-                styles.buttonLabel,
-                widthType === value && styles.selectedLabel,
-              ]}>
-              {value}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </View>
-      <View style={styles.row}>
-        <Text style={styles.label}>height </Text>
-        {heightValues.map(value => (
-          <TouchableOpacity
-            key={value}
-            onPress={() => setHeightType(value)}
-            style={[styles.button, heightType === value && styles.selected]}>
-            <Text
-              style={[
-                styles.buttonLabel,
-                heightType === value && styles.selectedLabel,
-              ]}>
-              {value}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </View>
-      {children}
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    padding: 8,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginRight: 10,
-    marginBottom: 10,
-  },
-  selected: {
-    backgroundColor: 'coral',
-    shadowOpacity: 0,
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default WidthHeightBasics;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Width%20and%20Height&ext=tsx
-import React, {useState, PropsWithChildren} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-type Dimension = 'auto' | `${number}%` | number;
-
-const WidthHeightBasics = () => {
-  const [widthType, setWidthType] = useState<Dimension>('auto');
-  const [heightType, setHeightType] = useState<Dimension>('auto');
-
-  return (
-    <PreviewLayout
-      widthType={widthType}
-      heightType={heightType}
-      widthValues={['auto', 300, '80%']}
-      heightValues={['auto', 200, '60%']}
-      setWidthType={setWidthType}
-      setHeightType={setHeightType}>
-      <View
-        style={{
-          alignSelf: 'flex-start',
-          backgroundColor: 'aliceblue',
-          height: heightType,
-          width: widthType,
-          padding: 15,
-        }}>
-        <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-        <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-        <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-      </View>
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  widthType: Dimension;
-  heightType: Dimension;
-  widthValues: Dimension[];
-  heightValues: Dimension[];
-  setWidthType: (value: Dimension) => void;
-  setHeightType: (value: Dimension) => void;
-}>;
-
-const PreviewLayout = ({
-  children,
-  widthType,
-  heightType,
-  widthValues,
-  heightValues,
-  setWidthType,
-  setHeightType,
-}: PreviewLayoutProps) => (
-  <SafeAreaProvider>
-    <SafeAreaView style={{flex: 1, padding: 10}}>
-      <View style={styles.row}>
-        <Text style={styles.label}>width </Text>
-        {widthValues.map(value => (
-          <TouchableOpacity
-            key={value}
-            onPress={() => setWidthType(value)}
-            style={[styles.button, widthType === value && styles.selected]}>
-            <Text
-              style={[
-                styles.buttonLabel,
-                widthType === value && styles.selectedLabel,
-              ]}>
-              {value}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </View>
-      <View style={styles.row}>
-        <Text style={styles.label}>height </Text>
-        {heightValues.map(value => (
-          <TouchableOpacity
-            key={value}
-            onPress={() => setHeightType(value)}
-            style={[styles.button, heightType === value && styles.selected]}>
-            <Text
-              style={[
-                styles.buttonLabel,
-                heightType === value && styles.selectedLabel,
-              ]}>
-              {value}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </View>
-      {children}
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    padding: 8,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginRight: 10,
-    marginBottom: 10,
-  },
-  selected: {
-    backgroundColor: 'coral',
-    shadowOpacity: 0,
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default WidthHeightBasics;
-```
-
-</TabItem>
-</Tabs>
-
-## Position
-
-The `position` type of an element defines how it is positioned relative to either itself, its parent, or its [containing block](./flexbox.md#the-containing-block).
-
-- `relative` (**default value**) By default, an element is positioned relatively. This means an element is positioned according to the normal flow of the layout, and then offset relative to that position based on the values of `top`, `right`, `bottom`, and `left`. The offset does not affect the position of any sibling or parent elements.
-
-- `absolute` When positioned absolutely, an element doesn't take part in the normal layout flow. It is instead laid out independent of its siblings. The position is determined based on the `top`, `right`, `bottom`, and `left` values. These values will position the element relative to its containing block.
-
-- `static` When positioned statically, an element is positioned according to the normal flow of layout, and will ignore the `top`, `right`, `bottom`, and `left` values. This `position` will also cause the element to not form a containing block for absolute descendants, unless some other superceding style prop is present (e.g. `transform`). This allows `absolute` elements to be positioned to something that is not their parent. Note that **`static` is only available on the New Architecture**.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Position&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const PositionLayout = () => {
-  const [position, setPosition] = useState('relative');
-
-  return (
-    <PreviewLayout
-      label="position"
-      selectedValue={position}
-      values={['relative', 'absolute', 'static']}
-      setSelectedValue={setPosition}>
-      <View
-        style={[
-          styles.box,
-          {
-            top: 25,
-            left: 25,
-            position,
-            backgroundColor: 'powderblue',
-          },
-        ]}
-      />
-      <View
-        style={[
-          styles.box,
-          {
-            top: 50,
-            left: 50,
-            position,
-            backgroundColor: 'skyblue',
-          },
-        ]}
-      />
-      <View
-        style={[
-          styles.box,
-          {
-            top: 75,
-            left: 75,
-            position,
-            backgroundColor: 'steelblue',
-          },
-        ]}
-      />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={styles.container}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default PositionLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Position&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const PositionLayout = () => {
-  const [position, setPosition] = useState<'relative' | 'absolute' | 'static'>(
-    'relative',
-  );
-
-  return (
-    <PreviewLayout
-      label="position"
-      selectedValue={position}
-      values={['relative', 'absolute', 'static']}
-      setSelectedValue={setPosition}>
-      <View
-        style={[
-          styles.box,
-          {
-            top: 25,
-            left: 25,
-            position,
-            backgroundColor: 'powderblue',
-          },
-        ]}
-      />
-      <View
-        style={[
-          styles.box,
-          {
-            top: 50,
-            left: 50,
-            position,
-            backgroundColor: 'skyblue',
-          },
-        ]}
-      />
-      <View
-        style={[
-          styles.box,
-          {
-            top: 75,
-            left: 75,
-            position,
-            backgroundColor: 'steelblue',
-          },
-        ]}
-      />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: Array<'relative' | 'absolute' | 'static'>;
-  selectedValue: string;
-  setSelectedValue: (value: 'relative' | 'absolute' | 'static') => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={styles.container}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default PositionLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## The Containing Block
-
-The containing block of an element is an ancestor element which controls its position and size.
-The way containing blocks work in React Native is very similar to [how they work on the web](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block), with some simplifications due to the lack of some web features.
-
-The `top`, `right`, `bottom`, and `left` values of an absolutely positioned element will be
-relative to its containing block.
-
-Percentage lengths (e.g.: `width: '50%'` or `padding: '10%'`) applied to absolutely positioned elements will be calculated relatively to the size of its containing block. For example, if the containing block is 100 points wide, then `width: 50%` on an absolutely positioned element will cause it to be 50 points wide.
-
-The following list will help you determine the containing block of any given element:
-
-- If that element has a `position` type of `relative` or `static`, then its containing block is its parent.
-- If that element has a `position` type of `absolute`, then its containing block is the nearest ancestor in which one of the following is true:
-  - It has a `position` type other than `static`
-  - It has a `transform`
-
-## Going Deeper
-
-Check out the interactive [yoga playground](https://www.yogalayout.dev/playground) that you can use to get a better understanding of flexbox.
-
-We've covered the basics, but there are many other styles you may need for layouts. The full list of props that control layout is documented [here](./layout-props.md).
-
-Additionally, you can see some examples from [Wix Engineers](https://medium.com/wix-engineering/the-full-react-native-layout-cheat-sheet-a4147802405c).
+---
+id: flexbox
+title: Layout with Flexbox
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+A component can specify the layout of its children using the Flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes.
+
+You will normally use a combination of `flexDirection`, `alignItems`, and `justifyContent` to achieve the right layout.
+
+:::caution
+Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions.
+The defaults are different, with `flexDirection` defaulting to `column` instead of `row`, `alignContent` defaulting to `flex-start` instead of `stretch`, `flexShrink` defaulting to `0` instead of `1`, the `flex` parameter only supporting a single number.
+:::
+
+## Flex
+
+[`flex`](layout-props#flex) will define how your items are going to **“fill”** over the available space along your main axis. Space will be divided according to each element's flex property.
+
+In the following example, the red, orange, and green views are all children in the container view that has `flex: 1` set. The red view uses `flex: 1` , the orange view uses `flex: 2`, and the green view uses `flex: 3` . **1+2+3 = 6**, which means that the red view will get `1/6` of the space, the orange `2/6` of the space, and the green `3/6` of the space.
+
+```SnackPlayer name=Flex%20Example
+import {StyleSheet, View} from 'react-native';
+
+const Flex = () => {
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          // Try setting `flexDirection` to `"row"`.
+          flexDirection: 'column',
+        },
+      ]}>
+      <View style={{flex: 1, backgroundColor: 'red'}} />
+      <View style={{flex: 2, backgroundColor: 'darkorange'}} />
+      <View style={{flex: 3, backgroundColor: 'green'}} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+  },
+});
+
+export default Flex;
+```
+
+## Flex Direction
+
+[`flexDirection`](layout-props#flexdirection) controls the direction in which the children of a node are laid out. This is also referred to as the main axis. The cross axis is the axis perpendicular to the main axis, or the axis which the wrapping lines are laid out in.
+
+- `column` (**default value**) Align children from top to bottom. If wrapping is enabled, then the next line will start to the right of the first item on the top of the container.
+
+- `row` Align children from left to right. If wrapping is enabled, then the next line will start under the first item on the left of the container.
+
+- `column-reverse` Align children from bottom to top. If wrapping is enabled, then the next line will start to the right of the first item on the bottom of the container.
+
+- `row-reverse` Align children from right to left. If wrapping is enabled, then the next line will start under the first item on the right of the container.
+
+You can learn more [here](https://www.yogalayout.dev/docs/styling/flex-direction).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Flex%20Direction&ext=js
+import {useState} from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+
+const FlexDirectionBasics = () => {
+  const [flexDirection, setflexDirection] = useState('column');
+
+  return (
+    <PreviewLayout
+      label="flexDirection"
+      values={['column', 'row', 'column-reverse', 'row-reverse']}
+      selectedValue={flexDirection}
+      setSelectedValue={setflexDirection}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default FlexDirectionBasics;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Flex%20Direction&ext=tsx
+import {useState} from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const FlexDirectionBasics = () => {
+  const [flexDirection, setflexDirection] = useState('column');
+
+  return (
+    <PreviewLayout
+      label="flexDirection"
+      values={['column', 'row', 'column-reverse', 'row-reverse']}
+      selectedValue={flexDirection}
+      setSelectedValue={setflexDirection}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default FlexDirectionBasics;
+```
+
+</TabItem>
+</Tabs>
+
+## Layout Direction
+
+Layout [`direction`](layout-props#direction) specifies the direction in which children and text in a hierarchy should be laid out. Layout direction also affects what edge `start` and `end` refer to. By default, React Native lays out with LTR layout direction. In this mode `start` refers to left and `end` refers to right.
+
+- `LTR` (**default value**) Text and children are laid out from left to right. Margin and padding applied to the start of an element are applied on the left side.
+
+- `RTL` Text and children are laid out from right to left. Margin and padding applied to the start of an element are applied on the right side.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Flex%20Direction&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const DirectionLayout = () => {
+  const [direction, setDirection] = useState('ltr');
+
+  return (
+    <PreviewLayout
+      label="direction"
+      selectedValue={direction}
+      values={['ltr', 'rtl']}
+      setSelectedValue={setDirection}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default DirectionLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Flex%20Direction&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const DirectionLayout = () => {
+  const [direction, setDirection] = useState('ltr');
+
+  return (
+    <PreviewLayout
+      label="direction"
+      selectedValue={direction}
+      values={['ltr', 'rtl']}
+      setSelectedValue={setDirection}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default DirectionLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## Justify Content
+
+[`justifyContent`](layout-props#justifycontent) describes how to align children within the main axis of their container. For example, you can use this property to center a child horizontally within a container with `flexDirection` set to `row` or vertically within a container with `flexDirection` set to `column`.
+
+- `flex-start`(**default value**) Align children of a container to the start of the container's main axis.
+
+- `flex-end` Align children of a container to the end of the container's main axis.
+
+- `center` Align children of a container in the center of the container's main axis.
+
+- `space-between` Evenly space off children across the container's main axis, distributing the remaining space between the children.
+
+- `space-around` Evenly space off children across the container's main axis, distributing the remaining space around the children. Compared to `space-between`, using `space-around` will result in space being distributed to the beginning of the first child and end of the last child.
+
+- `space-evenly` Evenly distribute children within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.
+
+You can learn more [here](https://www.yogalayout.dev/docs/styling/justify-content).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Justify%20Content&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const JustifyContentBasics = () => {
+  const [justifyContent, setJustifyContent] = useState('flex-start');
+
+  return (
+    <PreviewLayout
+      label="justifyContent"
+      selectedValue={justifyContent}
+      values={[
+        'flex-start',
+        'flex-end',
+        'center',
+        'space-between',
+        'space-around',
+        'space-evenly',
+      ]}
+      setSelectedValue={setJustifyContent}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default JustifyContentBasics;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Justify%20Content&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const JustifyContentBasics = () => {
+  const [justifyContent, setJustifyContent] = useState('flex-start');
+
+  return (
+    <PreviewLayout
+      label="justifyContent"
+      selectedValue={justifyContent}
+      values={[
+        'flex-start',
+        'flex-end',
+        'center',
+        'space-between',
+        'space-around',
+        'space-evenly',
+      ]}
+      setSelectedValue={setJustifyContent}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default JustifyContentBasics;
+```
+
+</TabItem>
+</Tabs>
+
+## Align Items
+
+[`alignItems`](layout-props#alignitems) describes how to align children along the cross axis of their container. It is very similar to `justifyContent` but instead of applying to the main axis, `alignItems` applies to the cross axis.
+
+- `stretch` (**default value**) Stretch children of a container to match the `height` of the container's cross axis.
+
+- `flex-start` Align children of a container to the start of the container's cross axis.
+
+- `flex-end` Align children of a container to the end of the container's cross axis.
+
+- `center` Align children of a container in the center of the container's cross axis.
+
+- `baseline` Align children of a container along a common baseline. Individual children can be set to be the reference baseline for their parents.
+
+:::info
+For `stretch` to have an effect, children must not have a fixed dimension along the secondary axis. In the following example, setting `alignItems: stretch` does nothing until the `width: 50` is removed from the children.
+:::
+
+You can learn more [here](https://www.yogalayout.dev/docs/styling/align-items-self).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Align%20Items&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const AlignItemsLayout = () => {
+  const [alignItems, setAlignItems] = useState('stretch');
+
+  return (
+    <PreviewLayout
+      label="alignItems"
+      selectedValue={alignItems}
+      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
+      setSelectedValue={setAlignItems}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View
+        style={[
+          styles.box,
+          {
+            backgroundColor: 'steelblue',
+            width: 'auto',
+            minWidth: 50,
+          },
+        ]}
+      />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignItemsLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Align%20Items&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const AlignItemsLayout = () => {
+  const [alignItems, setAlignItems] = useState('stretch');
+
+  return (
+    <PreviewLayout
+      label="alignItems"
+      selectedValue={alignItems}
+      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
+      setSelectedValue={setAlignItems}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View
+        style={[
+          styles.box,
+          {
+            backgroundColor: 'steelblue',
+            width: 'auto',
+            minWidth: 50,
+          },
+        ]}
+      />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignItemsLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## Align Self
+
+[`alignSelf`](layout-props#alignself) has the same options and effect as `alignItems` but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent. `alignSelf` overrides any option set by the parent with `alignItems`.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Align%20Self&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const AlignSelfLayout = () => {
+  const [alignSelf, setAlignSelf] = useState('stretch');
+
+  return (
+    <PreviewLayout
+      label="alignSelf"
+      selectedValue={alignSelf}
+      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
+      setSelectedValue={setAlignSelf}>
+      <View
+        style={[
+          styles.box,
+          {
+            alignSelf,
+            width: 'auto',
+            minWidth: 50,
+            backgroundColor: 'powderblue',
+          },
+        ]}
+      />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={styles.container}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignSelfLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Align%20Self&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+import type {FlexAlignType} from 'react-native';
+
+const AlignSelfLayout = () => {
+  const [alignSelf, setAlignSelf] = useState<FlexAlignType>('stretch');
+
+  return (
+    <PreviewLayout
+      label="alignSelf"
+      selectedValue={alignSelf}
+      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
+      setSelectedValue={setAlignSelf}>
+      <View
+        style={[
+          styles.box,
+          {
+            alignSelf,
+            width: 'auto',
+            minWidth: 50,
+            backgroundColor: 'powderblue',
+          },
+        ]}
+      />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: FlexAlignType[];
+  selectedValue: string;
+  setSelectedValue: (value: FlexAlignType) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={styles.container}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignSelfLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## Align Content
+
+[alignContent](layout-props#aligncontent) defines the distribution of lines along the cross-axis. This only has effect when items are wrapped to multiple lines using `flexWrap`.
+
+- `flex-start` (**default value**) Align wrapped lines to the start of the container's cross axis.
+
+- `flex-end` Align wrapped lines to the end of the container's cross axis.
+
+- `stretch` (_default value when using Yoga on the web_) Stretch wrapped lines to match the height of the container's cross axis.
+
+- `center` Align wrapped lines in the center of the container's cross axis.
+
+- `space-between` Evenly space wrapped lines across the container's cross axis, distributing the remaining space between the lines.
+
+- `space-around` Evenly space wrapped lines across the container's cross axis, distributing the remaining space around the lines. Each end of the container has a half-sized space compared to the space between items.
+
+- `space-evenly` Evenly space wrapped lines across the container's cross axis, distributing the remaining space around the lines. Each space is the same size.
+
+You can learn more [here](https://www.yogalayout.dev/docs/styling/align-content).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Align%20Content&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const AlignContentLayout = () => {
+  const [alignContent, setAlignContent] = useState('flex-start');
+
+  return (
+    <PreviewLayout
+      label="alignContent"
+      selectedValue={alignContent}
+      values={[
+        'flex-start',
+        'flex-end',
+        'stretch',
+        'center',
+        'space-between',
+        'space-around',
+      ]}
+      setSelectedValue={setAlignContent}>
+      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
+      <View style={[styles.box, {backgroundColor: 'orange'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
+      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'purple'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexWrap: 'wrap',
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignContentLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Align%20Content&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const AlignContentLayout = () => {
+  const [alignContent, setAlignContent] = useState('flex-start');
+
+  return (
+    <PreviewLayout
+      label="alignContent"
+      selectedValue={alignContent}
+      values={[
+        'flex-start',
+        'flex-end',
+        'stretch',
+        'center',
+        'space-between',
+        'space-around',
+      ]}
+      setSelectedValue={setAlignContent}>
+      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
+      <View style={[styles.box, {backgroundColor: 'orange'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
+      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'purple'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexWrap: 'wrap',
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignContentLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## Flex Wrap
+
+The [`flexWrap`](layout-props#flexwrap) property is set on containers and it controls what happens when children overflow the size of the container along the main axis. By default, children are forced into a single line (which can shrink elements). If wrapping is allowed, items are wrapped into multiple lines along the main axis if needed.
+
+When wrapping lines, `alignContent` can be used to specify how the lines are placed in the container. Learn more [here](https://www.yogalayout.dev/docs/styling/flex-wrap).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Flex%20Wrap&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const FlexWrapLayout = () => {
+  const [flexWrap, setFlexWrap] = useState('wrap');
+
+  return (
+    <PreviewLayout
+      label="flexWrap"
+      selectedValue={flexWrap}
+      values={['wrap', 'nowrap']}
+      setSelectedValue={setFlexWrap}>
+      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
+      <View style={[styles.box, {backgroundColor: 'orange'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
+      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'purple'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default FlexWrapLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Flex%20Wrap&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const FlexWrapLayout = () => {
+  const [flexWrap, setFlexWrap] = useState('wrap');
+
+  return (
+    <PreviewLayout
+      label="flexWrap"
+      selectedValue={flexWrap}
+      values={['wrap', 'nowrap']}
+      setSelectedValue={setFlexWrap}>
+      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
+      <View style={[styles.box, {backgroundColor: 'orange'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
+      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'purple'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default FlexWrapLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## Flex Basis, Grow, and Shrink
+
+- [`flexBasis`](layout-props#flexbasis) is an axis-independent way of providing the default size of an item along the main axis. Setting the `flexBasis` of a child is similar to setting the `width` of that child if its parent is a container with `flexDirection: row` or setting the `height` of a child if its parent is a container with `flexDirection: column`. The `flexBasis` of an item is the default size of that item, the size of the item before any `flexGrow` and `flexShrink` calculations are performed.
+
+- [`flexGrow`](layout-props#flexgrow) describes how much space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
+
+  `flexGrow` accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the children’s `flexGrow` values.
+
+- [`flexShrink`](layout-props#flexshrink) describes how to shrink children along the main axis in the case in which the total size of the children overflows the size of the container on the main axis. `flexShrink` is very similar to `flexGrow` and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed.
+
+  `flexShrink` accepts any floating point value >= 0, with 0 being the default value (on the web, the default is 1). A container will shrink its children weighted by the children’s `flexShrink` values.
+
+You can learn more [here](https://www.yogalayout.dev/docs/styling/flex-basis-grow-shrink).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink&ext=js
+import {useState} from 'react';
+import {View, Text, TextInput, StyleSheet} from 'react-native';
+
+const App = () => {
+  const [powderblue, setPowderblue] = useState({
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: 'auto',
+  });
+  const [skyblue, setSkyblue] = useState({
+    flexGrow: 1,
+    flexShrink: 0,
+    flexBasis: 100,
+  });
+  const [steelblue, setSteelblue] = useState({
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: 200,
+  });
+  return (
+    <View style={styles.container}>
+      <View
+        style={[
+          styles.container,
+          {
+            flexDirection: 'row',
+            alignContent: 'space-between',
+          },
+        ]}>
+        <BoxInfo color="powderblue" {...powderblue} setStyle={setPowderblue} />
+        <BoxInfo color="skyblue" {...skyblue} setStyle={setSkyblue} />
+        <BoxInfo color="steelblue" {...steelblue} setStyle={setSteelblue} />
+      </View>
+      <View style={styles.previewContainer}>
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: powderblue.flexBasis,
+              flexGrow: powderblue.flexGrow,
+              flexShrink: powderblue.flexShrink,
+              backgroundColor: 'powderblue',
+            },
+          ]}
+        />
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: skyblue.flexBasis,
+              flexGrow: skyblue.flexGrow,
+              flexShrink: skyblue.flexShrink,
+              backgroundColor: 'skyblue',
+            },
+          ]}
+        />
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: steelblue.flexBasis,
+              flexGrow: steelblue.flexGrow,
+              flexShrink: steelblue.flexShrink,
+              backgroundColor: 'steelblue',
+            },
+          ]}
+        />
+      </View>
+    </View>
+  );
+};
+
+const BoxInfo = ({color, flexBasis, flexShrink, setStyle, flexGrow}) => (
+  <View style={[styles.row, {flexDirection: 'column'}]}>
+    <View
+      style={[
+        styles.boxLabel,
+        {
+          backgroundColor: color,
+        },
+      ]}>
+      <Text
+        style={{
+          color: '#fff',
+          fontWeight: '500',
+          textAlign: 'center',
+        }}>
+        Box
+      </Text>
+    </View>
+    <Text style={styles.label}>flexBasis</Text>
+    <TextInput
+      value={flexBasis}
+      style={styles.input}
+      onChangeText={fB =>
+        setStyle(value => ({
+          ...value,
+          flexBasis: isNaN(parseInt(fB, 10)) ? 'auto' : parseInt(fB, 10),
+        }))
+      }
+    />
+    <Text style={styles.label}>flexShrink</Text>
+    <TextInput
+      value={flexShrink}
+      style={styles.input}
+      onChangeText={fS =>
+        setStyle(value => ({
+          ...value,
+          flexShrink: isNaN(parseInt(fS, 10)) ? undefined : parseInt(fS, 10),
+        }))
+      }
+    />
+    <Text style={styles.label}>flexGrow</Text>
+    <TextInput
+      value={flexGrow}
+      style={styles.input}
+      onChangeText={fG =>
+        setStyle(value => ({
+          ...value,
+          flexGrow: isNaN(parseInt(fG, 10)) ? undefined : parseInt(fG, 10),
+        }))
+      }
+    />
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 10,
+  },
+  box: {
+    flex: 1,
+    height: 50,
+    width: 50,
+  },
+  boxLabel: {
+    minWidth: 80,
+    padding: 8,
+    borderRadius: 4,
+    marginTop: 8,
+  },
+  label: {
+    marginTop: 6,
+    fontSize: 16,
+    fontWeight: '100',
+  },
+  previewContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    backgroundColor: 'aliceblue',
+  },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  input: {
+    borderBottomWidth: 1,
+    paddingVertical: 3,
+    width: 50,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink&ext=tsx
+import {useState, type Dispatch, type SetStateAction} from 'react';
+import {View, Text, TextInput, StyleSheet} from 'react-native';
+import type {ViewStyle} from 'react-native';
+
+const App = () => {
+  const [powderblue, setPowderblue] = useState<ViewStyle>({
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: 'auto',
+  });
+  const [skyblue, setSkyblue] = useState<ViewStyle>({
+    flexGrow: 1,
+    flexShrink: 0,
+    flexBasis: 100,
+  });
+  const [steelblue, setSteelblue] = useState<ViewStyle>({
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: 200,
+  });
+  return (
+    <View style={styles.container}>
+      <View
+        style={[
+          styles.container,
+          {
+            flexDirection: 'row',
+            alignContent: 'space-between',
+          },
+        ]}>
+        <BoxInfo color="powderblue" {...powderblue} setStyle={setPowderblue} />
+        <BoxInfo color="skyblue" {...skyblue} setStyle={setSkyblue} />
+        <BoxInfo color="steelblue" {...steelblue} setStyle={setSteelblue} />
+      </View>
+      <View style={styles.previewContainer}>
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: powderblue.flexBasis,
+              flexGrow: powderblue.flexGrow,
+              flexShrink: powderblue.flexShrink,
+              backgroundColor: 'powderblue',
+            },
+          ]}
+        />
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: skyblue.flexBasis,
+              flexGrow: skyblue.flexGrow,
+              flexShrink: skyblue.flexShrink,
+              backgroundColor: 'skyblue',
+            },
+          ]}
+        />
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: steelblue.flexBasis,
+              flexGrow: steelblue.flexGrow,
+              flexShrink: steelblue.flexShrink,
+              backgroundColor: 'steelblue',
+            },
+          ]}
+        />
+      </View>
+    </View>
+  );
+};
+
+type BoxInfoProps = ViewStyle & {
+  color: string;
+  setStyle: Dispatch<SetStateAction<ViewStyle>>;
+};
+
+const BoxInfo = ({
+  color,
+  flexBasis,
+  flexShrink,
+  setStyle,
+  flexGrow,
+}: BoxInfoProps) => (
+  <View style={[styles.row, {flexDirection: 'column'}]}>
+    <View
+      style={[
+        styles.boxLabel,
+        {
+          backgroundColor: color,
+        },
+      ]}>
+      <Text
+        style={{
+          color: '#fff',
+          fontWeight: '500',
+          textAlign: 'center',
+        }}>
+        Box
+      </Text>
+    </View>
+    <Text style={styles.label}>flexBasis</Text>
+    <TextInput
+      value={String(flexBasis)}
+      style={styles.input}
+      onChangeText={fB =>
+        setStyle(value => ({
+          ...value,
+          flexBasis: isNaN(parseInt(fB, 10)) ? 'auto' : parseInt(fB, 10),
+        }))
+      }
+    />
+    <Text style={styles.label}>flexShrink</Text>
+    <TextInput
+      value={String(flexShrink)}
+      style={styles.input}
+      onChangeText={fS =>
+        setStyle(value => ({
+          ...value,
+          flexShrink: isNaN(parseInt(fS, 10)) ? undefined : parseInt(fS, 10),
+        }))
+      }
+    />
+    <Text style={styles.label}>flexGrow</Text>
+    <TextInput
+      value={String(flexGrow)}
+      style={styles.input}
+      onChangeText={fG =>
+        setStyle(value => ({
+          ...value,
+          flexGrow: isNaN(parseInt(fG, 10)) ? undefined : parseInt(fG, 10),
+        }))
+      }
+    />
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 10,
+  },
+  box: {
+    flex: 1,
+    height: 50,
+    width: 50,
+  },
+  boxLabel: {
+    minWidth: 80,
+    padding: 8,
+    borderRadius: 4,
+    marginTop: 8,
+  },
+  label: {
+    marginTop: 6,
+    fontSize: 16,
+    fontWeight: '100',
+  },
+  previewContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    backgroundColor: 'aliceblue',
+  },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  input: {
+    borderBottomWidth: 1,
+    paddingVertical: 3,
+    width: 50,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+## Row Gap, Column Gap and Gap
+
+- [`rowGap`](layout-props#rowgap) sets the size of the gap (gutter) between an element's rows.
+
+- [`columnGap`](layout-props#columngap) sets the size of the gap (gutter) between an element's columns.
+
+- [`gap`](layout-props#gap) sets the size of the gap (gutter) between rows and columns. It is a shorthand for `rowGap` and `columnGap`.
+
+You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Row%20Gap%20and%20Column%20Gap&ext=js
+import {useState} from 'react';
+import {View, Text, StyleSheet, TextInput} from 'react-native';
+
+const RowGapAndColumnGap = () => {
+  const [rowGap, setRowGap] = useState(10);
+  const [columnGap, setColumnGap] = useState(10);
+
+  return (
+    <PreviewLayout
+      columnGap={columnGap}
+      handleColumnGapChange={setColumnGap}
+      rowGap={rowGap}
+      handleRowGapChange={setRowGap}>
+      <View style={[styles.box, styles.box1]} />
+      <View style={[styles.box, styles.box2]} />
+      <View style={[styles.box, styles.box3]} />
+      <View style={[styles.box, styles.box4]} />
+      <View style={[styles.box, styles.box5]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  children,
+  handleColumnGapChange,
+  handleRowGapChange,
+  rowGap,
+  columnGap,
+}) => (
+  <View style={styles.previewContainer}>
+    <View style={styles.inputContainer}>
+      <View style={styles.itemsCenter}>
+        <Text>Row Gap</Text>
+        <TextInput
+          style={styles.input}
+          value={rowGap}
+          onChangeText={v => handleRowGapChange(Number(v))}
+        />
+      </View>
+      <View style={styles.itemsCenter}>
+        <Text>Column Gap</Text>
+        <TextInput
+          style={styles.input}
+          value={columnGap}
+          onChangeText={v => handleColumnGapChange(Number(v))}
+        />
+      </View>
+    </View>
+    <View style={[styles.container, {rowGap, columnGap}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  itemsCenter: {alignItems: 'center'},
+  inputContainer: {
+    gap: 4,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+  previewContainer: {padding: 10, flex: 1},
+  input: {
+    borderBottomWidth: 1,
+    paddingVertical: 3,
+    width: 50,
+    textAlign: 'center',
+  },
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+    flexWrap: 'wrap',
+    alignContent: 'flex-start',
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  box1: {
+    backgroundColor: 'orangered',
+  },
+  box2: {
+    backgroundColor: 'orange',
+  },
+  box3: {
+    backgroundColor: 'mediumseagreen',
+  },
+  box4: {
+    backgroundColor: 'deepskyblue',
+  },
+  box5: {
+    backgroundColor: 'mediumturquoise',
+  },
+});
+
+export default RowGapAndColumnGap;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Row%20Gap%20and%20Column%20Gap&ext=tsx
+import {useState} from 'react';
+import {View, Text, StyleSheet, TextInput} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const RowGapAndColumnGap = () => {
+  const [rowGap, setRowGap] = useState(10);
+  const [columnGap, setColumnGap] = useState(10);
+
+  return (
+    <PreviewLayout
+      columnGap={columnGap}
+      handleColumnGapChange={setColumnGap}
+      rowGap={rowGap}
+      handleRowGapChange={setRowGap}>
+      <View style={[styles.box, styles.box1]} />
+      <View style={[styles.box, styles.box2]} />
+      <View style={[styles.box, styles.box3]} />
+      <View style={[styles.box, styles.box4]} />
+      <View style={[styles.box, styles.box5]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  columnGap: number;
+  handleColumnGapChange: (gap: number) => void;
+  rowGap: number;
+  handleRowGapChange: (gap: number) => void;
+}>;
+
+const PreviewLayout = ({
+  children,
+  handleColumnGapChange,
+  handleRowGapChange,
+  rowGap,
+  columnGap,
+}: PreviewLayoutProps) => (
+  <View style={styles.previewContainer}>
+    <View style={styles.inputContainer}>
+      <View style={styles.itemsCenter}>
+        <Text>Row Gap</Text>
+        <TextInput
+          style={styles.input}
+          value={String(rowGap)}
+          onChangeText={v => handleRowGapChange(Number(v))}
+        />
+      </View>
+      <View style={styles.itemsCenter}>
+        <Text>Column Gap</Text>
+        <TextInput
+          style={styles.input}
+          value={String(columnGap)}
+          onChangeText={v => handleColumnGapChange(Number(v))}
+        />
+      </View>
+    </View>
+    <View style={[styles.container, {rowGap, columnGap}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  itemsCenter: {alignItems: 'center'},
+  inputContainer: {
+    gap: 4,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+  previewContainer: {padding: 10, flex: 1},
+  input: {
+    borderBottomWidth: 1,
+    paddingVertical: 3,
+    width: 50,
+    textAlign: 'center',
+  },
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+    flexWrap: 'wrap',
+    alignContent: 'flex-start',
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  box1: {
+    backgroundColor: 'orangered',
+  },
+  box2: {
+    backgroundColor: 'orange',
+  },
+  box3: {
+    backgroundColor: 'mediumseagreen',
+  },
+  box4: {
+    backgroundColor: 'deepskyblue',
+  },
+  box5: {
+    backgroundColor: 'mediumturquoise',
+  },
+});
+
+export default RowGapAndColumnGap;
+```
+
+</TabItem>
+</Tabs>
+
+## Width and Height
+
+The `width` property specifies the width of an element's content area. Similarly, the `height` property specifies the height of an element's content area.
+
+Both `width` and `height` can take the following values:
+
+- `auto` (**default value**) React Native calculates the width/height for the element based on its content, whether that is other children, text, or an image.
+
+- `pixels` Defines the width/height in absolute pixels. Depending on other styles set on the component, this may or may not be the final dimension of the node.
+
+- `percentage` Defines the width or height in percentage of its parent's width or height, respectively.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Width%20and%20Height&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const WidthHeightBasics = () => {
+  const [widthType, setWidthType] = useState('auto');
+  const [heightType, setHeightType] = useState('auto');
+
+  return (
+    <PreviewLayout
+      widthType={widthType}
+      heightType={heightType}
+      widthValues={['auto', 300, '80%']}
+      heightValues={['auto', 200, '60%']}
+      setWidthType={setWidthType}
+      setHeightType={setHeightType}>
+      <View
+        style={{
+          alignSelf: 'flex-start',
+          backgroundColor: 'aliceblue',
+          height: heightType,
+          width: widthType,
+          padding: 15,
+        }}>
+        <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+        <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+        <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+      </View>
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  children,
+  widthType,
+  heightType,
+  widthValues,
+  heightValues,
+  setWidthType,
+  setHeightType,
+}) => (
+  <SafeAreaProvider>
+    <SafeAreaView style={{flex: 1, padding: 10}}>
+      <View style={styles.row}>
+        <Text style={styles.label}>width </Text>
+        {widthValues.map(value => (
+          <TouchableOpacity
+            key={value}
+            onPress={() => setWidthType(value)}
+            style={[styles.button, widthType === value && styles.selected]}>
+            <Text
+              style={[
+                styles.buttonLabel,
+                widthType === value && styles.selectedLabel,
+              ]}>
+              {value}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+      <View style={styles.row}>
+        <Text style={styles.label}>height </Text>
+        {heightValues.map(value => (
+          <TouchableOpacity
+            key={value}
+            onPress={() => setHeightType(value)}
+            style={[styles.button, heightType === value && styles.selected]}>
+            <Text
+              style={[
+                styles.buttonLabel,
+                heightType === value && styles.selectedLabel,
+              ]}>
+              {value}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+      {children}
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    padding: 8,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginRight: 10,
+    marginBottom: 10,
+  },
+  selected: {
+    backgroundColor: 'coral',
+    shadowOpacity: 0,
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default WidthHeightBasics;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Width%20and%20Height&ext=tsx
+import {useState, PropsWithChildren} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+type Dimension = 'auto' | `${number}%` | number;
+
+const WidthHeightBasics = () => {
+  const [widthType, setWidthType] = useState<Dimension>('auto');
+  const [heightType, setHeightType] = useState<Dimension>('auto');
+
+  return (
+    <PreviewLayout
+      widthType={widthType}
+      heightType={heightType}
+      widthValues={['auto', 300, '80%']}
+      heightValues={['auto', 200, '60%']}
+      setWidthType={setWidthType}
+      setHeightType={setHeightType}>
+      <View
+        style={{
+          alignSelf: 'flex-start',
+          backgroundColor: 'aliceblue',
+          height: heightType,
+          width: widthType,
+          padding: 15,
+        }}>
+        <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+        <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+        <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+      </View>
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  widthType: Dimension;
+  heightType: Dimension;
+  widthValues: Dimension[];
+  heightValues: Dimension[];
+  setWidthType: (value: Dimension) => void;
+  setHeightType: (value: Dimension) => void;
+}>;
+
+const PreviewLayout = ({
+  children,
+  widthType,
+  heightType,
+  widthValues,
+  heightValues,
+  setWidthType,
+  setHeightType,
+}: PreviewLayoutProps) => (
+  <SafeAreaProvider>
+    <SafeAreaView style={{flex: 1, padding: 10}}>
+      <View style={styles.row}>
+        <Text style={styles.label}>width </Text>
+        {widthValues.map(value => (
+          <TouchableOpacity
+            key={value}
+            onPress={() => setWidthType(value)}
+            style={[styles.button, widthType === value && styles.selected]}>
+            <Text
+              style={[
+                styles.buttonLabel,
+                widthType === value && styles.selectedLabel,
+              ]}>
+              {value}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+      <View style={styles.row}>
+        <Text style={styles.label}>height </Text>
+        {heightValues.map(value => (
+          <TouchableOpacity
+            key={value}
+            onPress={() => setHeightType(value)}
+            style={[styles.button, heightType === value && styles.selected]}>
+            <Text
+              style={[
+                styles.buttonLabel,
+                heightType === value && styles.selectedLabel,
+              ]}>
+              {value}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+      {children}
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    padding: 8,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginRight: 10,
+    marginBottom: 10,
+  },
+  selected: {
+    backgroundColor: 'coral',
+    shadowOpacity: 0,
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default WidthHeightBasics;
+```
+
+</TabItem>
+</Tabs>
+
+## Position
+
+The `position` type of an element defines how it is positioned relative to either itself, its parent, or its [containing block](./flexbox.md#the-containing-block).
+
+- `relative` (**default value**) By default, an element is positioned relatively. This means an element is positioned according to the normal flow of the layout, and then offset relative to that position based on the values of `top`, `right`, `bottom`, and `left`. The offset does not affect the position of any sibling or parent elements.
+
+- `absolute` When positioned absolutely, an element doesn't take part in the normal layout flow. It is instead laid out independent of its siblings. The position is determined based on the `top`, `right`, `bottom`, and `left` values. These values will position the element relative to its containing block.
+
+- `static` When positioned statically, an element is positioned according to the normal flow of layout, and will ignore the `top`, `right`, `bottom`, and `left` values. This `position` will also cause the element to not form a containing block for absolute descendants, unless some other superceding style prop is present (e.g. `transform`). This allows `absolute` elements to be positioned to something that is not their parent. Note that **`static` is only available on the New Architecture**.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Position&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const PositionLayout = () => {
+  const [position, setPosition] = useState('relative');
+
+  return (
+    <PreviewLayout
+      label="position"
+      selectedValue={position}
+      values={['relative', 'absolute', 'static']}
+      setSelectedValue={setPosition}>
+      <View
+        style={[
+          styles.box,
+          {
+            top: 25,
+            left: 25,
+            position,
+            backgroundColor: 'powderblue',
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.box,
+          {
+            top: 50,
+            left: 50,
+            position,
+            backgroundColor: 'skyblue',
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.box,
+          {
+            top: 75,
+            left: 75,
+            position,
+            backgroundColor: 'steelblue',
+          },
+        ]}
+      />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={styles.container}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default PositionLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Position&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const PositionLayout = () => {
+  const [position, setPosition] = useState<'relative' | 'absolute' | 'static'>(
+    'relative',
+  );
+
+  return (
+    <PreviewLayout
+      label="position"
+      selectedValue={position}
+      values={['relative', 'absolute', 'static']}
+      setSelectedValue={setPosition}>
+      <View
+        style={[
+          styles.box,
+          {
+            top: 25,
+            left: 25,
+            position,
+            backgroundColor: 'powderblue',
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.box,
+          {
+            top: 50,
+            left: 50,
+            position,
+            backgroundColor: 'skyblue',
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.box,
+          {
+            top: 75,
+            left: 75,
+            position,
+            backgroundColor: 'steelblue',
+          },
+        ]}
+      />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: Array<'relative' | 'absolute' | 'static'>;
+  selectedValue: string;
+  setSelectedValue: (value: 'relative' | 'absolute' | 'static') => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={styles.container}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default PositionLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## The Containing Block
+
+The containing block of an element is an ancestor element which controls its position and size.
+The way containing blocks work in React Native is very similar to [how they work on the web](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block), with some simplifications due to the lack of some web features.
+
+The `top`, `right`, `bottom`, and `left` values of an absolutely positioned element will be
+relative to its containing block.
+
+Percentage lengths (e.g.: `width: '50%'` or `padding: '10%'`) applied to absolutely positioned elements will be calculated relatively to the size of its containing block. For example, if the containing block is 100 points wide, then `width: 50%` on an absolutely positioned element will cause it to be 50 points wide.
+
+The following list will help you determine the containing block of any given element:
+
+- If that element has a `position` type of `relative` or `static`, then its containing block is its parent.
+- If that element has a `position` type of `absolute`, then its containing block is the nearest ancestor in which one of the following is true:
+  - It has a `position` type other than `static`
+  - It has a `transform`
+
+## Going Deeper
+
+Check out the interactive [yoga playground](https://www.yogalayout.dev/playground) that you can use to get a better understanding of flexbox.
+
+We've covered the basics, but there are many other styles you may need for layouts. The full list of props that control layout is documented [here](./layout-props.md).
+
+Additionally, you can see some examples from [Wix Engineers](https://medium.com/wix-engineering/the-full-react-native-layout-cheat-sheet-a4147802405c).
diff --git a/website/versioned_docs/version-0.83/handling-text-input.md b/website/versioned_docs/version-0.83/handling-text-input.md
index 6db00cae840..be56c292f03 100644
--- a/website/versioned_docs/version-0.83/handling-text-input.md
+++ b/website/versioned_docs/version-0.83/handling-text-input.md
@@ -1,48 +1,48 @@
----
-id: handling-text-input
-title: Handling Text Input
----
-
-[`TextInput`](textinput#content) is a [Core Component](intro-react-native-components) that allows the user to enter text. It has an `onChangeText` prop that takes a function to be called every time the text changed, and an `onSubmitEditing` prop that takes a function to be called when the text is submitted.
-
-For example, let's say that as the user types, you're translating their words into a different language. In this new language, every single word is written the same way: 🍕. So the sentence "Hello there Bob" would be translated as "🍕 🍕 🍕".
-
-```SnackPlayer name=Handling%20Text%20Input
-import React, {useState} from 'react';
-import {Text, TextInput, View} from 'react-native';
-
-const PizzaTranslator = () => {
-  const [text, setText] = useState('');
-  return (
-    <View style={{flex: 1, justifyContent: 'center'}}>
-      <TextInput
-        placeholder="Type here to translate!"
-        onChangeText={newText => setText(newText)}
-        defaultValue={text}
-        style={{
-          height: 40,
-          padding: 5,
-          marginHorizontal: 8,
-          borderWidth: 1,
-        }}
-      />
-      <Text style={{padding: 10, fontSize: 42}}>
-        {text
-          .split(' ')
-          .map(word => word && '🍕')
-          .join(' ')}
-      </Text>
-    </View>
-  );
-};
-
-export default PizzaTranslator;
-```
-
-In this example, we store `text` in the state, because it changes over time.
-
-There are a lot more things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the [React docs on controlled components](https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable), or the [reference docs for TextInput](textinput.md).
-
-A `TextInput` is one of many ways for the user to interact with your app. For examples of other ways to handle input, see the documentation on [how to handle touches](handling-touches.md).
-
-Now, let's take a look at [ScrollView](using-a-scrollview), another Core Component.
+---
+id: handling-text-input
+title: Handling Text Input
+---
+
+[`TextInput`](textinput#content) is a [Core Component](intro-react-native-components) that allows the user to enter text. It has an `onChangeText` prop that takes a function to be called every time the text changed, and an `onSubmitEditing` prop that takes a function to be called when the text is submitted.
+
+For example, let's say that as the user types, you're translating their words into a different language. In this new language, every single word is written the same way: 🍕. So the sentence "Hello there Bob" would be translated as "🍕 🍕 🍕".
+
+```SnackPlayer name=Handling%20Text%20Input
+import {useState} from 'react';
+import {Text, TextInput, View} from 'react-native';
+
+const PizzaTranslator = () => {
+  const [text, setText] = useState('');
+  return (
+    <View style={{flex: 1, justifyContent: 'center'}}>
+      <TextInput
+        placeholder="Type here to translate!"
+        onChangeText={newText => setText(newText)}
+        defaultValue={text}
+        style={{
+          height: 40,
+          padding: 5,
+          marginHorizontal: 8,
+          borderWidth: 1,
+        }}
+      />
+      <Text style={{padding: 10, fontSize: 42}}>
+        {text
+          .split(' ')
+          .map(word => word && '🍕')
+          .join(' ')}
+      </Text>
+    </View>
+  );
+};
+
+export default PizzaTranslator;
+```
+
+In this example, we store `text` in the state, because it changes over time.
+
+There are a lot more things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the [React docs on controlled components](https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable), or the [reference docs for TextInput](textinput.md).
+
+A `TextInput` is one of many ways for the user to interact with your app. For examples of other ways to handle input, see the documentation on [how to handle touches](handling-touches.md).
+
+Now, let's take a look at [ScrollView](using-a-scrollview), another Core Component.
diff --git a/website/versioned_docs/version-0.83/handling-touches.md b/website/versioned_docs/version-0.83/handling-touches.md
index 612287f6e10..b9604b393c0 100644
--- a/website/versioned_docs/version-0.83/handling-touches.md
+++ b/website/versioned_docs/version-0.83/handling-touches.md
@@ -25,7 +25,6 @@ This will render a blue label on iOS, and a blue rounded rectangle with light te
 Go ahead and play around with the `Button` component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right and then clicking on "Tap to Play" to preview the app.
 
 ```SnackPlayer name=Button%20Basics
-import React from 'react';
 import {Alert, Button, StyleSheet, View} from 'react-native';
 
 const ButtonBasics = () => {
@@ -86,7 +85,6 @@ In some cases, you may want to detect when a user presses and holds a view for a
 Let's see all of these in action:
 
 ```SnackPlayer name=Touchables
-import React from 'react';
 import {
   Alert,
   Platform,
diff --git a/website/versioned_docs/version-0.83/height-and-width.md b/website/versioned_docs/version-0.83/height-and-width.md
index 485667831cd..b768626716e 100644
--- a/website/versioned_docs/version-0.83/height-and-width.md
+++ b/website/versioned_docs/version-0.83/height-and-width.md
@@ -10,7 +10,6 @@ A component's height and width determine its size on the screen.
 The general way to set the dimensions of a component is by adding a fixed `width` and `height` to style. All dimensions in React Native are unitless, and represent density-independent pixels.
 
 ```SnackPlayer name=Height%20and%20Width
-import React from 'react';
 import {View} from 'react-native';
 
 const FixedDimensionsBasics = () => {
@@ -59,7 +58,6 @@ A component can only expand to fill available space if its parent has dimensions
 :::
 
 ```SnackPlayer name=Flex%20Dimensions
-import React from 'react';
 import {View} from 'react-native';
 
 const FlexDimensionsBasics = () => {
@@ -85,7 +83,6 @@ After you can control a component's size, the next step is to [learn how to lay
 If you want to fill a certain portion of the screen, but you _don't_ want to use the `flex` layout, you _can_ use **percentage values** in the component's style. Similar to flex dimensions, percentage dimensions require parent with a defined size.
 
 ```SnackPlayer name=Percentage%20Dimensions
-import React from 'react';
 import {View} from 'react-native';
 
 const PercentageDimensionsBasics = () => {
diff --git a/website/versioned_docs/version-0.83/i18nmanager.md b/website/versioned_docs/version-0.83/i18nmanager.md
index 80ccd2ccd72..2593a0e45c4 100644
--- a/website/versioned_docs/version-0.83/i18nmanager.md
+++ b/website/versioned_docs/version-0.83/i18nmanager.md
@@ -1,169 +1,168 @@
----
-id: i18nmanager
-title: I18nManager
----
-
-# I18nManager
-
-The `I18nManager` module provides utilities for managing Right-to-Left (RTL) layout support for languages like Arabic, Hebrew, and others. It provides methods to control RTL behavior and check the current layout direction.
-
-## Examples
-
-### Change positions and animations based on RTL
-
-If you absolutely position elements to align with other flexbox elements, they may not align in RTL languages. Using `isRTL` can be used to adjust alignment or animations.
-
-```SnackPlayer name=I18nManager%20Change%20Absolute%20Positions%20And%20Animations
-import React from 'react';
-import {I18nManager, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  // Change to `true` to see the effect in a non-RTL language
-  const isRTL = I18nManager.isRTL;
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView>
-        <View
-          style={{
-            position: 'absolute',
-            left: isRTL ? undefined : 0,
-            right: isRTL ? 0 : undefined,
-          }}>
-          {isRTL ? <Text>Back &gt;</Text> : <Text>&lt; Back</Text>}
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-export default App;
-```
-
-### During Development
-
-```SnackPlayer name=I18nManager%20During%20Development
-import React, {useState} from 'react';
-import {Alert, I18nManager, StyleSheet, Switch, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [rtl, setRTL] = useState(I18nManager.isRTL);
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView>
-        <View style={styles.container}>
-          <View style={styles.forceRtl}>
-            <Text>Force RTL in Development:</Text>
-            <Switch
-              value={rtl}
-              onValueChange={value => {
-                setRTL(value);
-                I18nManager.forceRTL(value);
-                Alert.alert(
-                  'Reload this page',
-                  'Please reload this page to change the UI direction! ' +
-                    'All examples in this app will be affected. ' +
-                    'Check them out to see what they look like in RTL layout.',
-                );
-              }}
-            />
-          </View>
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    padding: 20,
-  },
-  forceRtl: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-# Reference
-
-## Properties
-
-### `isRTL`
-
-```typescript
-static isRTL: boolean;
-```
-
-A boolean value indicating whether the app is currently in RTL layout mode.
-
-The value of `isRTL` is determined by the following logic:
-
-- If `forceRTL` is `true`, `isRTL` returns `true`
-- If `allowRTL` is `false`, `isRTL` returns `false`
-- Otherwise, `isRTL` will be `true` given the following:
-  - **iOS:**
-    - The user-preferred language on the device is an RTL language
-    - The application-defined localizations include the user-chosen language (as defined in the Xcode project file (`knownRegions = (...)`)
-  - **Android:**
-    - The user-preferred language on the device is an RTL language
-    - The application's `AndroidManifest.xml` defines `android:supportsRTL="true"` on the `<application>` element
-
-### `doLeftAndRightSwapInRTL`
-
-```typescript
-static doLeftAndRightSwapInRTL: boolean;
-```
-
-A boolean value indicating whether left and right style properties should be automatically swapped when in RTL mode. When enabled, left becomes right and right becomes left in RTL layouts.
-
-## Methods
-
-### `allowRTL()`
-
-```typescript
-static allowRTL: (allowRTL: boolean) => void;
-```
-
-Enables or disables RTL layout support for the application.
-
-**Parameters:**
-
-- `allowRTL` (boolean): Whether to allow RTL layout
-
-**Important Notes:**
-
-- Changes take effect on the next application start, not immediately
-- This setting is persisted across app restarts
-
-### `forceRTL()`
-
-```typescript
-static forceRTL: (forced: boolean) => void;
-```
-
-Forces the app to use RTL layout regardless of the device language settings. This is primarily useful for testing RTL layouts during development.
-
-Avoid forcing RTL in production apps as it requires a full app restart to take effect, which makes for a poor user-experience.
-
-**Parameters:**
-
-- `forced` (boolean): Whether to force RTL layout
-
-**Important Notes:**
-
-- Changes take full effect on the next application start, not immediately
-- The setting is persisted across app restarts
-- Only meant for development and testing. In production, you should either disallow RTL fully or handle it appropriately (see `isRTL`)
-
-### `swapLeftAndRightInRTL()`
-
-```typescript
-static swapLeftAndRightInRTL: (swapLeftAndRight: boolean) => void;
-```
-
-Swap left and right style properties in RTL mode. When enabled, left becomes right and right becomes left in RTL layouts. Does not affect the value of `isRTL`.
+---
+id: i18nmanager
+title: I18nManager
+---
+
+# I18nManager
+
+The `I18nManager` module provides utilities for managing Right-to-Left (RTL) layout support for languages like Arabic, Hebrew, and others. It provides methods to control RTL behavior and check the current layout direction.
+
+## Examples
+
+### Change positions and animations based on RTL
+
+If you absolutely position elements to align with other flexbox elements, they may not align in RTL languages. Using `isRTL` can be used to adjust alignment or animations.
+
+```SnackPlayer name=I18nManager%20Change%20Absolute%20Positions%20And%20Animations
+import {I18nManager, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  // Change to `true` to see the effect in a non-RTL language
+  const isRTL = I18nManager.isRTL;
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView>
+        <View
+          style={{
+            position: 'absolute',
+            left: isRTL ? undefined : 0,
+            right: isRTL ? 0 : undefined,
+          }}>
+          {isRTL ? <Text>Back &gt;</Text> : <Text>&lt; Back</Text>}
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+export default App;
+```
+
+### During Development
+
+```SnackPlayer name=I18nManager%20During%20Development
+import {useState} from 'react';
+import {Alert, I18nManager, StyleSheet, Switch, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [rtl, setRTL] = useState(I18nManager.isRTL);
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView>
+        <View style={styles.container}>
+          <View style={styles.forceRtl}>
+            <Text>Force RTL in Development:</Text>
+            <Switch
+              value={rtl}
+              onValueChange={value => {
+                setRTL(value);
+                I18nManager.forceRTL(value);
+                Alert.alert(
+                  'Reload this page',
+                  'Please reload this page to change the UI direction! ' +
+                    'All examples in this app will be affected. ' +
+                    'Check them out to see what they look like in RTL layout.',
+                );
+              }}
+            />
+          </View>
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 20,
+  },
+  forceRtl: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+# Reference
+
+## Properties
+
+### `isRTL`
+
+```typescript
+static isRTL: boolean;
+```
+
+A boolean value indicating whether the app is currently in RTL layout mode.
+
+The value of `isRTL` is determined by the following logic:
+
+- If `forceRTL` is `true`, `isRTL` returns `true`
+- If `allowRTL` is `false`, `isRTL` returns `false`
+- Otherwise, `isRTL` will be `true` given the following:
+  - **iOS:**
+    - The user-preferred language on the device is an RTL language
+    - The application-defined localizations include the user-chosen language (as defined in the Xcode project file (`knownRegions = (...)`)
+  - **Android:**
+    - The user-preferred language on the device is an RTL language
+    - The application's `AndroidManifest.xml` defines `android:supportsRTL="true"` on the `<application>` element
+
+### `doLeftAndRightSwapInRTL`
+
+```typescript
+static doLeftAndRightSwapInRTL: boolean;
+```
+
+A boolean value indicating whether left and right style properties should be automatically swapped when in RTL mode. When enabled, left becomes right and right becomes left in RTL layouts.
+
+## Methods
+
+### `allowRTL()`
+
+```typescript
+static allowRTL: (allowRTL: boolean) => void;
+```
+
+Enables or disables RTL layout support for the application.
+
+**Parameters:**
+
+- `allowRTL` (boolean): Whether to allow RTL layout
+
+**Important Notes:**
+
+- Changes take effect on the next application start, not immediately
+- This setting is persisted across app restarts
+
+### `forceRTL()`
+
+```typescript
+static forceRTL: (forced: boolean) => void;
+```
+
+Forces the app to use RTL layout regardless of the device language settings. This is primarily useful for testing RTL layouts during development.
+
+Avoid forcing RTL in production apps as it requires a full app restart to take effect, which makes for a poor user-experience.
+
+**Parameters:**
+
+- `forced` (boolean): Whether to force RTL layout
+
+**Important Notes:**
+
+- Changes take full effect on the next application start, not immediately
+- The setting is persisted across app restarts
+- Only meant for development and testing. In production, you should either disallow RTL fully or handle it appropriately (see `isRTL`)
+
+### `swapLeftAndRightInRTL()`
+
+```typescript
+static swapLeftAndRightInRTL: (swapLeftAndRight: boolean) => void;
+```
+
+Swap left and right style properties in RTL mode. When enabled, left becomes right and right becomes left in RTL layouts. Does not affect the value of `isRTL`.
diff --git a/website/versioned_docs/version-0.83/image-style-props.md b/website/versioned_docs/version-0.83/image-style-props.md
index efa0dc725e1..cbf19f996f9 100644
--- a/website/versioned_docs/version-0.83/image-style-props.md
+++ b/website/versioned_docs/version-0.83/image-style-props.md
@@ -8,7 +8,6 @@ title: Image Style Props
 ### Image Resize Mode
 
 ```SnackPlayer name=Image%20Resize%20Modes%20Example
-import React from 'react';
 import {View, Image, Text, StyleSheet, ScrollView} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -82,7 +81,6 @@ export default DisplayAnImageWithStyle;
 ### Image Border
 
 ```SnackPlayer name=Style%20BorderWidth%20and%20BorderColor%20Example
-import React from 'react';
 import {Image, StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -118,7 +116,6 @@ export default DisplayAnImageWithStyle;
 ### Image Border Radius
 
 ```SnackPlayer name=Style%20Border%20Radius%20Example
-import React from 'react';
 import {View, Image, StyleSheet, Text, ScrollView} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -184,7 +181,6 @@ export default DisplayAnImageWithStyle;
 ### Image Tint
 
 ```SnackPlayer name=Style%20tintColor%20Function%20Component
-import React from 'react';
 import {Image, StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.83/image.md b/website/versioned_docs/version-0.83/image.md
index 5f6a2a5b1ad..3f83be8c19c 100644
--- a/website/versioned_docs/version-0.83/image.md
+++ b/website/versioned_docs/version-0.83/image.md
@@ -14,7 +14,6 @@ For network and data images, you will need to manually specify the dimensions of
 ## Examples
 
 ```SnackPlayer name=Image%20Example
-import React from 'react';
 import {Image, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -61,7 +60,6 @@ export default DisplayAnImage;
 You can also add `style` to an image:
 
 ```SnackPlayer name=Styled%20Image%20Example
-import React from 'react';
 import {Image, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.83/imagebackground.md b/website/versioned_docs/version-0.83/imagebackground.md
index 6670fd3b632..d3d40b2a844 100644
--- a/website/versioned_docs/version-0.83/imagebackground.md
+++ b/website/versioned_docs/version-0.83/imagebackground.md
@@ -12,7 +12,6 @@ Note that you must specify some width and height style attributes.
 ## Example
 
 ```SnackPlayer name=ImageBackground
-import React from 'react';
 import {ImageBackground, StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.83/improvingux.md b/website/versioned_docs/version-0.83/improvingux.md
index 462f5f0ce1c..96bd508791f 100644
--- a/website/versioned_docs/version-0.83/improvingux.md
+++ b/website/versioned_docs/version-0.83/improvingux.md
@@ -1,596 +1,594 @@
----
-id: improvingux
-title: Improving User Experience
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-## Configure text inputs
-
-Entering text on touch phone is a challenge - small screen, software keyboard. But based on what kind of data you need, you can make it easier by properly configuring the text inputs:
-
-- Focus the first field automatically
-- Use placeholder text as an example of expected data format
-- Enable or disable autocapitalization and autocorrect
-- Choose keyboard type (e.g. email, numeric)
-- Make sure the return button focuses the next field or submits the form
-
-Check out [`TextInput` docs](textinput.md) for more configuration options.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=TextInput%20form%20example&ext=js
-import React, {useState, useRef} from 'react';
-import {
-  Alert,
-  Text,
-  StatusBar,
-  TextInput,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const App = () => {
-  const emailInput = useRef(null);
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-
-  const submit = () => {
-    Alert.alert(
-      `Welcome, ${name}! Confirmation email has been sent to ${email}`,
-    );
-  };
-
-  return (
-    <View style={styles.container}>
-      <StatusBar barStyle="light-content" />
-      <View style={styles.header}>
-        <Text style={styles.description}>
-          This demo shows how using available TextInput customizations can make
-          forms much easier to use. Try completing the form and notice that
-          different fields have specific optimizations and the return key
-          changes from focusing next input to submitting the form.
-        </Text>
-      </View>
-      <TextInput
-        style={styles.input}
-        value={name}
-        onChangeText={text => setName(text)}
-        placeholder="Full Name"
-        autoFocus={true}
-        autoCapitalize="words"
-        autoCorrect={true}
-        keyboardType="default"
-        returnKeyType="next"
-        onSubmitEditing={() => emailInput.current.focus()}
-        blurOnSubmit={false}
-      />
-      <TextInput
-        style={styles.input}
-        value={email}
-        onChangeText={text => setEmail(text)}
-        ref={emailInput}
-        placeholder="email@example.com"
-        autoCapitalize="none"
-        autoCorrect={false}
-        keyboardType="email-address"
-        returnKeyType="send"
-        onSubmitEditing={submit}
-        blurOnSubmit={true}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    paddingTop: 64,
-    padding: 20,
-    backgroundColor: '#282c34',
-  },
-  description: {
-    fontSize: 14,
-    color: 'white',
-  },
-  input: {
-    margin: 20,
-    marginBottom: 0,
-    height: 34,
-    paddingHorizontal: 10,
-    borderRadius: 4,
-    borderColor: '#ccc',
-    borderWidth: 1,
-    fontSize: 16,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=TextInput%20form%20example&ext=tsx
-import React, {useState, useRef} from 'react';
-import {
-  Alert,
-  Text,
-  StatusBar,
-  TextInput,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const App = () => {
-  const emailInput = useRef<TextInput>(null);
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-
-  const submit = () => {
-    Alert.alert(
-      `Welcome, ${name}! Confirmation email has been sent to ${email}`,
-    );
-  };
-
-  return (
-    <View style={styles.container}>
-      <StatusBar barStyle="light-content" />
-      <View style={styles.header}>
-        <Text style={styles.description}>
-          This demo shows how using available TextInput customizations can make
-          forms much easier to use. Try completing the form and notice that
-          different fields have specific optimizations and the return key
-          changes from focusing next input to submitting the form.
-        </Text>
-      </View>
-      <TextInput
-        style={styles.input}
-        value={name}
-        onChangeText={text => setName(text)}
-        placeholder="Full Name"
-        autoFocus={true}
-        autoCapitalize="words"
-        autoCorrect={true}
-        keyboardType="default"
-        returnKeyType="next"
-        onSubmitEditing={() => emailInput.current?.focus()}
-        blurOnSubmit={false}
-      />
-      <TextInput
-        style={styles.input}
-        value={email}
-        onChangeText={text => setEmail(text)}
-        ref={emailInput}
-        placeholder="email@example.com"
-        autoCapitalize="none"
-        autoCorrect={false}
-        keyboardType="email-address"
-        returnKeyType="send"
-        onSubmitEditing={submit}
-        blurOnSubmit={true}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    paddingTop: 64,
-    padding: 20,
-    backgroundColor: '#282c34',
-  },
-  description: {
-    fontSize: 14,
-    color: 'white',
-  },
-  input: {
-    margin: 20,
-    marginBottom: 0,
-    height: 34,
-    paddingHorizontal: 10,
-    borderRadius: 4,
-    borderColor: '#ccc',
-    borderWidth: 1,
-    fontSize: 16,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-## Manage layout when keyboard is visible
-
-Software keyboard takes almost half of the screen. If you have interactive elements that can get covered by the keyboard, make sure they are still accessible by using the [`KeyboardAvoidingView` component](keyboardavoidingview.md).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=KeyboardAvoidingView%20example&ext=js
-import React, {useState, useRef} from 'react';
-import {
-  Alert,
-  Text,
-  Button,
-  StatusBar,
-  TextInput,
-  KeyboardAvoidingView,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const App = () => {
-  const emailInput = useRef(null);
-  const [email, setEmail] = useState('');
-
-  const submit = () => {
-    emailInput.current.blur();
-    Alert.alert(`Confirmation email has been sent to ${email}`);
-  };
-
-  return (
-    <View style={styles.container}>
-      <StatusBar barStyle="light-content" />
-      <View style={styles.header}>
-        <Text style={styles.description}>
-          This demo shows how to avoid covering important UI elements with the
-          software keyboard. Focus the email input below and notice that the
-          Sign Up button and the text adjusted positions to make sure they are
-          not hidden under the keyboard.
-        </Text>
-      </View>
-      <KeyboardAvoidingView behavior="padding" style={styles.form}>
-        <TextInput
-          style={styles.input}
-          value={email}
-          onChangeText={text => setEmail(text)}
-          ref={emailInput}
-          placeholder="email@example.com"
-          autoCapitalize="none"
-          autoCorrect={false}
-          keyboardType="email-address"
-          returnKeyType="send"
-          onSubmitEditing={submit}
-          blurOnSubmit={true}
-        />
-        <View>
-          <Button title="Sign Up" onPress={submit} />
-          <Text style={styles.legal}>Some important legal fine print here</Text>
-        </View>
-      </KeyboardAvoidingView>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    paddingTop: 64,
-    padding: 20,
-    backgroundColor: '#282c34',
-  },
-  description: {
-    fontSize: 14,
-    color: 'white',
-  },
-  input: {
-    margin: 20,
-    marginBottom: 0,
-    height: 34,
-    paddingHorizontal: 10,
-    borderRadius: 4,
-    borderColor: '#ccc',
-    borderWidth: 1,
-    fontSize: 16,
-  },
-  legal: {
-    margin: 10,
-    color: '#333',
-    fontSize: 12,
-    textAlign: 'center',
-  },
-  form: {
-    flex: 1,
-    justifyContent: 'space-between',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=KeyboardAvoidingView%20example&ext=tsx
-import React, {useState, useRef} from 'react';
-import {
-  Alert,
-  Text,
-  Button,
-  StatusBar,
-  TextInput,
-  KeyboardAvoidingView,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const App = () => {
-  const emailInput = useRef<TextInput>(null);
-  const [email, setEmail] = useState('');
-
-  const submit = () => {
-    emailInput.current?.blur();
-    Alert.alert(`Confirmation email has been sent to ${email}`);
-  };
-
-  return (
-    <View style={styles.container}>
-      <StatusBar barStyle="light-content" />
-      <View style={styles.header}>
-        <Text style={styles.description}>
-          This demo shows how to avoid covering important UI elements with the
-          software keyboard. Focus the email input below and notice that the
-          Sign Up button and the text adjusted positions to make sure they are
-          not hidden under the keyboard.
-        </Text>
-      </View>
-      <KeyboardAvoidingView behavior="padding" style={styles.form}>
-        <TextInput
-          style={styles.input}
-          value={email}
-          onChangeText={text => setEmail(text)}
-          ref={emailInput}
-          placeholder="email@example.com"
-          autoCapitalize="none"
-          autoCorrect={false}
-          keyboardType="email-address"
-          returnKeyType="send"
-          onSubmitEditing={submit}
-          blurOnSubmit={true}
-        />
-        <View>
-          <Button title="Sign Up" onPress={submit} />
-          <Text style={styles.legal}>Some important legal fine print here</Text>
-        </View>
-      </KeyboardAvoidingView>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    paddingTop: 64,
-    padding: 20,
-    backgroundColor: '#282c34',
-  },
-  description: {
-    fontSize: 14,
-    color: 'white',
-  },
-  input: {
-    margin: 20,
-    marginBottom: 0,
-    height: 34,
-    paddingHorizontal: 10,
-    borderRadius: 4,
-    borderColor: '#ccc',
-    borderWidth: 1,
-    fontSize: 16,
-  },
-  legal: {
-    margin: 10,
-    color: '#333',
-    fontSize: 12,
-    textAlign: 'center',
-  },
-  form: {
-    flex: 1,
-    justifyContent: 'space-between',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-## Make tappable areas larger
-
-On mobile phones it's hard to be very precise when pressing buttons. Make sure all interactive elements are 44x44 or larger. One way to do this is to leave enough space for the element, `padding`, `minWidth` and `minHeight` style values can be useful for that. Alternatively, you can use [`hitSlop` prop](touchablewithoutfeedback.md#hitslop) to increase interactive area without affecting the layout. Here's a demo:
-
-```SnackPlayer name=HitSlop%20example
-import React from 'react';
-import {
-  Text,
-  StatusBar,
-  TouchableOpacity,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <StatusBar barStyle="light-content" />
-      <View style={styles.header}>
-        <Text style={styles.description}>
-          This demo shows how using hitSlop can make interactive elements much
-          easier to tap without changing their layout and size. Try pressing
-          each button quickly multiple times and notice which one is easier to
-          hit.
-        </Text>
-      </View>
-      <View style={styles.content}>
-        <TouchableOpacity>
-          <Text style={styles.label}>Without hitSlop</Text>
-        </TouchableOpacity>
-        <View style={styles.separator} />
-        <View style={styles.preview}>
-          <TouchableOpacity
-            hitSlop={{top: 20, left: 20, bottom: 20, right: 20}}>
-            <Text style={styles.label}>With hitSlop</Text>
-          </TouchableOpacity>
-        </View>
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    paddingTop: 64,
-    padding: 20,
-    backgroundColor: '#282c34',
-  },
-  description: {
-    fontSize: 14,
-    color: 'white',
-  },
-  content: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  label: {
-    fontSize: 18,
-    color: '#336699',
-    textAlign: 'center',
-    borderColor: '#ddd',
-    borderWidth: 1,
-  },
-  separator: {
-    height: 50,
-  },
-  preview: {
-    padding: 20,
-    backgroundColor: '#f6f6f6',
-  },
-});
-
-export default App;
-```
-
-## Use Android Ripple
-
-Android API 21+ uses the material design ripple to provide user with feedback when they touch an interactable area on the screen. React Native exposes this through the [`TouchableNativeFeedback` component](touchablenativefeedback.md). Using this touchable effect instead of opacity or highlight will often make your app feel much more fitting on the platform. That said, you need to be careful when using it because it doesn't work on iOS or on Android API < 21, so you will need to fallback to using one of the other Touchable components on iOS. You can use a library like [react-native-platform-touchable](https://github.com/react-community/react-native-platform-touchable) to handle the platform differences for you.
-
-```SnackPlayer name=Android%20Ripple%20example&supportedPlatforms=android
-import React from 'react';
-import {
-  TouchableNativeFeedback,
-  TouchableOpacity,
-  TouchableHighlight,
-  Platform,
-  Text,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const SUPPORTS_NATIVE_FEEDBACK =
-  Platform.OS === 'android' && Platform.Version >= 21;
-
-const noop = () => {};
-const defaultHitSlop = {top: 15, bottom: 15, right: 15, left: 15};
-
-const ButtonsWithNativeFeedback = () => (
-  <View style={styles.buttonContainer}>
-    <TouchableNativeFeedback
-      onPress={noop}
-      background={TouchableNativeFeedback.Ripple('#06bcee', false)}
-      hitSlop={defaultHitSlop}>
-      <View style={styles.button}>
-        <Text style={styles.text}>This is a ripple respecting borders</Text>
-      </View>
-    </TouchableNativeFeedback>
-    <TouchableNativeFeedback
-      onPress={noop}
-      background={TouchableNativeFeedback.Ripple('#06bcee', true)}
-      hitSlop={defaultHitSlop}>
-      <View style={styles.button}>
-        <Text style={styles.text}>
-          This is ripple without borders, this is more useful for icons, eg: in
-          tab bar
-        </Text>
-      </View>
-    </TouchableNativeFeedback>
-  </View>
-);
-
-const Buttons = () => (
-  <View style={styles.buttonContainer}>
-    <TouchableOpacity
-      style={styles.button}
-      onPress={noop}
-      hitSlop={defaultHitSlop}>
-      <Text style={styles.text}>This is opacity</Text>
-    </TouchableOpacity>
-    <TouchableHighlight
-      style={styles.button}
-      onPress={noop}
-      hitSlop={defaultHitSlop}
-      underlayColor="#06bcee">
-      <Text style={styles.text}>This is highlight</Text>
-    </TouchableHighlight>
-  </View>
-);
-
-const App = () => (
-  <View style={styles.container}>
-    {SUPPORTS_NATIVE_FEEDBACK ? <ButtonsWithNativeFeedback /> : <Buttons />}
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingTop: 64,
-    backgroundColor: '#fff',
-  },
-  buttonContainer: {
-    margin: 24,
-  },
-  text: {
-    fontSize: 20,
-    color: '#fff',
-    fontWeight: 'bold',
-  },
-  button: {
-    padding: 25,
-    borderRadius: 5,
-    backgroundColor: '#000',
-    marginBottom: 30,
-  },
-});
-
-export default App;
-```
-
-## Screen orientation lock
-
-Multiple screen orientations should work fine by default unless you're using `Dimensions` API and don't handle orientation changes. If you don't want to support multiple screen orientations, you can lock the screen orientation to either portrait or landscape.
-
-On iOS, in the General tab and Deployment Info section of Xcode enable the Device Orientation you want to support (ensure you have selected iPhone from the Devices menu when making the changes). For Android, open the AndroidManifest.xml file and within the activity element add `'android:screenOrientation="portrait"'` to lock to portrait or `'android:screenOrientation="landscape"'` to lock to landscape.
-
-# Learn more
-
-[Material Design](https://material.io/) and [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines) are great resources for learning more about designing for mobile platforms.
+---
+id: improvingux
+title: Improving User Experience
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+## Configure text inputs
+
+Entering text on touch phone is a challenge - small screen, software keyboard. But based on what kind of data you need, you can make it easier by properly configuring the text inputs:
+
+- Focus the first field automatically
+- Use placeholder text as an example of expected data format
+- Enable or disable autocapitalization and autocorrect
+- Choose keyboard type (e.g. email, numeric)
+- Make sure the return button focuses the next field or submits the form
+
+Check out [`TextInput` docs](textinput.md) for more configuration options.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=TextInput%20form%20example&ext=js
+import {useState, useRef} from 'react';
+import {
+  Alert,
+  Text,
+  StatusBar,
+  TextInput,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const App = () => {
+  const emailInput = useRef(null);
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+
+  const submit = () => {
+    Alert.alert(
+      `Welcome, ${name}! Confirmation email has been sent to ${email}`,
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="light-content" />
+      <View style={styles.header}>
+        <Text style={styles.description}>
+          This demo shows how using available TextInput customizations can make
+          forms much easier to use. Try completing the form and notice that
+          different fields have specific optimizations and the return key
+          changes from focusing next input to submitting the form.
+        </Text>
+      </View>
+      <TextInput
+        style={styles.input}
+        value={name}
+        onChangeText={text => setName(text)}
+        placeholder="Full Name"
+        autoFocus={true}
+        autoCapitalize="words"
+        autoCorrect={true}
+        keyboardType="default"
+        returnKeyType="next"
+        onSubmitEditing={() => emailInput.current.focus()}
+        blurOnSubmit={false}
+      />
+      <TextInput
+        style={styles.input}
+        value={email}
+        onChangeText={text => setEmail(text)}
+        ref={emailInput}
+        placeholder="email@example.com"
+        autoCapitalize="none"
+        autoCorrect={false}
+        keyboardType="email-address"
+        returnKeyType="send"
+        onSubmitEditing={submit}
+        blurOnSubmit={true}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 64,
+    padding: 20,
+    backgroundColor: '#282c34',
+  },
+  description: {
+    fontSize: 14,
+    color: 'white',
+  },
+  input: {
+    margin: 20,
+    marginBottom: 0,
+    height: 34,
+    paddingHorizontal: 10,
+    borderRadius: 4,
+    borderColor: '#ccc',
+    borderWidth: 1,
+    fontSize: 16,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=TextInput%20form%20example&ext=tsx
+import {useState, useRef} from 'react';
+import {
+  Alert,
+  Text,
+  StatusBar,
+  TextInput,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const App = () => {
+  const emailInput = useRef<TextInput>(null);
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+
+  const submit = () => {
+    Alert.alert(
+      `Welcome, ${name}! Confirmation email has been sent to ${email}`,
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="light-content" />
+      <View style={styles.header}>
+        <Text style={styles.description}>
+          This demo shows how using available TextInput customizations can make
+          forms much easier to use. Try completing the form and notice that
+          different fields have specific optimizations and the return key
+          changes from focusing next input to submitting the form.
+        </Text>
+      </View>
+      <TextInput
+        style={styles.input}
+        value={name}
+        onChangeText={text => setName(text)}
+        placeholder="Full Name"
+        autoFocus={true}
+        autoCapitalize="words"
+        autoCorrect={true}
+        keyboardType="default"
+        returnKeyType="next"
+        onSubmitEditing={() => emailInput.current?.focus()}
+        blurOnSubmit={false}
+      />
+      <TextInput
+        style={styles.input}
+        value={email}
+        onChangeText={text => setEmail(text)}
+        ref={emailInput}
+        placeholder="email@example.com"
+        autoCapitalize="none"
+        autoCorrect={false}
+        keyboardType="email-address"
+        returnKeyType="send"
+        onSubmitEditing={submit}
+        blurOnSubmit={true}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 64,
+    padding: 20,
+    backgroundColor: '#282c34',
+  },
+  description: {
+    fontSize: 14,
+    color: 'white',
+  },
+  input: {
+    margin: 20,
+    marginBottom: 0,
+    height: 34,
+    paddingHorizontal: 10,
+    borderRadius: 4,
+    borderColor: '#ccc',
+    borderWidth: 1,
+    fontSize: 16,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+## Manage layout when keyboard is visible
+
+Software keyboard takes almost half of the screen. If you have interactive elements that can get covered by the keyboard, make sure they are still accessible by using the [`KeyboardAvoidingView` component](keyboardavoidingview.md).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=KeyboardAvoidingView%20example&ext=js
+import {useState, useRef} from 'react';
+import {
+  Alert,
+  Text,
+  Button,
+  StatusBar,
+  TextInput,
+  KeyboardAvoidingView,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const App = () => {
+  const emailInput = useRef(null);
+  const [email, setEmail] = useState('');
+
+  const submit = () => {
+    emailInput.current.blur();
+    Alert.alert(`Confirmation email has been sent to ${email}`);
+  };
+
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="light-content" />
+      <View style={styles.header}>
+        <Text style={styles.description}>
+          This demo shows how to avoid covering important UI elements with the
+          software keyboard. Focus the email input below and notice that the
+          Sign Up button and the text adjusted positions to make sure they are
+          not hidden under the keyboard.
+        </Text>
+      </View>
+      <KeyboardAvoidingView behavior="padding" style={styles.form}>
+        <TextInput
+          style={styles.input}
+          value={email}
+          onChangeText={text => setEmail(text)}
+          ref={emailInput}
+          placeholder="email@example.com"
+          autoCapitalize="none"
+          autoCorrect={false}
+          keyboardType="email-address"
+          returnKeyType="send"
+          onSubmitEditing={submit}
+          blurOnSubmit={true}
+        />
+        <View>
+          <Button title="Sign Up" onPress={submit} />
+          <Text style={styles.legal}>Some important legal fine print here</Text>
+        </View>
+      </KeyboardAvoidingView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 64,
+    padding: 20,
+    backgroundColor: '#282c34',
+  },
+  description: {
+    fontSize: 14,
+    color: 'white',
+  },
+  input: {
+    margin: 20,
+    marginBottom: 0,
+    height: 34,
+    paddingHorizontal: 10,
+    borderRadius: 4,
+    borderColor: '#ccc',
+    borderWidth: 1,
+    fontSize: 16,
+  },
+  legal: {
+    margin: 10,
+    color: '#333',
+    fontSize: 12,
+    textAlign: 'center',
+  },
+  form: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=KeyboardAvoidingView%20example&ext=tsx
+import {useState, useRef} from 'react';
+import {
+  Alert,
+  Text,
+  Button,
+  StatusBar,
+  TextInput,
+  KeyboardAvoidingView,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const App = () => {
+  const emailInput = useRef<TextInput>(null);
+  const [email, setEmail] = useState('');
+
+  const submit = () => {
+    emailInput.current?.blur();
+    Alert.alert(`Confirmation email has been sent to ${email}`);
+  };
+
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="light-content" />
+      <View style={styles.header}>
+        <Text style={styles.description}>
+          This demo shows how to avoid covering important UI elements with the
+          software keyboard. Focus the email input below and notice that the
+          Sign Up button and the text adjusted positions to make sure they are
+          not hidden under the keyboard.
+        </Text>
+      </View>
+      <KeyboardAvoidingView behavior="padding" style={styles.form}>
+        <TextInput
+          style={styles.input}
+          value={email}
+          onChangeText={text => setEmail(text)}
+          ref={emailInput}
+          placeholder="email@example.com"
+          autoCapitalize="none"
+          autoCorrect={false}
+          keyboardType="email-address"
+          returnKeyType="send"
+          onSubmitEditing={submit}
+          blurOnSubmit={true}
+        />
+        <View>
+          <Button title="Sign Up" onPress={submit} />
+          <Text style={styles.legal}>Some important legal fine print here</Text>
+        </View>
+      </KeyboardAvoidingView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 64,
+    padding: 20,
+    backgroundColor: '#282c34',
+  },
+  description: {
+    fontSize: 14,
+    color: 'white',
+  },
+  input: {
+    margin: 20,
+    marginBottom: 0,
+    height: 34,
+    paddingHorizontal: 10,
+    borderRadius: 4,
+    borderColor: '#ccc',
+    borderWidth: 1,
+    fontSize: 16,
+  },
+  legal: {
+    margin: 10,
+    color: '#333',
+    fontSize: 12,
+    textAlign: 'center',
+  },
+  form: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+## Make tappable areas larger
+
+On mobile phones it's hard to be very precise when pressing buttons. Make sure all interactive elements are 44x44 or larger. One way to do this is to leave enough space for the element, `padding`, `minWidth` and `minHeight` style values can be useful for that. Alternatively, you can use [`hitSlop` prop](touchablewithoutfeedback.md#hitslop) to increase interactive area without affecting the layout. Here's a demo:
+
+```SnackPlayer name=HitSlop%20example
+import {
+  Text,
+  StatusBar,
+  TouchableOpacity,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="light-content" />
+      <View style={styles.header}>
+        <Text style={styles.description}>
+          This demo shows how using hitSlop can make interactive elements much
+          easier to tap without changing their layout and size. Try pressing
+          each button quickly multiple times and notice which one is easier to
+          hit.
+        </Text>
+      </View>
+      <View style={styles.content}>
+        <TouchableOpacity>
+          <Text style={styles.label}>Without hitSlop</Text>
+        </TouchableOpacity>
+        <View style={styles.separator} />
+        <View style={styles.preview}>
+          <TouchableOpacity
+            hitSlop={{top: 20, left: 20, bottom: 20, right: 20}}>
+            <Text style={styles.label}>With hitSlop</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 64,
+    padding: 20,
+    backgroundColor: '#282c34',
+  },
+  description: {
+    fontSize: 14,
+    color: 'white',
+  },
+  content: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  label: {
+    fontSize: 18,
+    color: '#336699',
+    textAlign: 'center',
+    borderColor: '#ddd',
+    borderWidth: 1,
+  },
+  separator: {
+    height: 50,
+  },
+  preview: {
+    padding: 20,
+    backgroundColor: '#f6f6f6',
+  },
+});
+
+export default App;
+```
+
+## Use Android Ripple
+
+Android API 21+ uses the material design ripple to provide user with feedback when they touch an interactable area on the screen. React Native exposes this through the [`TouchableNativeFeedback` component](touchablenativefeedback.md). Using this touchable effect instead of opacity or highlight will often make your app feel much more fitting on the platform. That said, you need to be careful when using it because it doesn't work on iOS or on Android API < 21, so you will need to fallback to using one of the other Touchable components on iOS. You can use a library like [react-native-platform-touchable](https://github.com/react-community/react-native-platform-touchable) to handle the platform differences for you.
+
+```SnackPlayer name=Android%20Ripple%20example&supportedPlatforms=android
+import {
+  TouchableNativeFeedback,
+  TouchableOpacity,
+  TouchableHighlight,
+  Platform,
+  Text,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const SUPPORTS_NATIVE_FEEDBACK =
+  Platform.OS === 'android' && Platform.Version >= 21;
+
+const noop = () => {};
+const defaultHitSlop = {top: 15, bottom: 15, right: 15, left: 15};
+
+const ButtonsWithNativeFeedback = () => (
+  <View style={styles.buttonContainer}>
+    <TouchableNativeFeedback
+      onPress={noop}
+      background={TouchableNativeFeedback.Ripple('#06bcee', false)}
+      hitSlop={defaultHitSlop}>
+      <View style={styles.button}>
+        <Text style={styles.text}>This is a ripple respecting borders</Text>
+      </View>
+    </TouchableNativeFeedback>
+    <TouchableNativeFeedback
+      onPress={noop}
+      background={TouchableNativeFeedback.Ripple('#06bcee', true)}
+      hitSlop={defaultHitSlop}>
+      <View style={styles.button}>
+        <Text style={styles.text}>
+          This is ripple without borders, this is more useful for icons, eg: in
+          tab bar
+        </Text>
+      </View>
+    </TouchableNativeFeedback>
+  </View>
+);
+
+const Buttons = () => (
+  <View style={styles.buttonContainer}>
+    <TouchableOpacity
+      style={styles.button}
+      onPress={noop}
+      hitSlop={defaultHitSlop}>
+      <Text style={styles.text}>This is opacity</Text>
+    </TouchableOpacity>
+    <TouchableHighlight
+      style={styles.button}
+      onPress={noop}
+      hitSlop={defaultHitSlop}
+      underlayColor="#06bcee">
+      <Text style={styles.text}>This is highlight</Text>
+    </TouchableHighlight>
+  </View>
+);
+
+const App = () => (
+  <View style={styles.container}>
+    {SUPPORTS_NATIVE_FEEDBACK ? <ButtonsWithNativeFeedback /> : <Buttons />}
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: 64,
+    backgroundColor: '#fff',
+  },
+  buttonContainer: {
+    margin: 24,
+  },
+  text: {
+    fontSize: 20,
+    color: '#fff',
+    fontWeight: 'bold',
+  },
+  button: {
+    padding: 25,
+    borderRadius: 5,
+    backgroundColor: '#000',
+    marginBottom: 30,
+  },
+});
+
+export default App;
+```
+
+## Screen orientation lock
+
+Multiple screen orientations should work fine by default unless you're using `Dimensions` API and don't handle orientation changes. If you don't want to support multiple screen orientations, you can lock the screen orientation to either portrait or landscape.
+
+On iOS, in the General tab and Deployment Info section of Xcode enable the Device Orientation you want to support (ensure you have selected iPhone from the Devices menu when making the changes). For Android, open the AndroidManifest.xml file and within the activity element add `'android:screenOrientation="portrait"'` to lock to portrait or `'android:screenOrientation="landscape"'` to lock to landscape.
+
+# Learn more
+
+[Material Design](https://material.io/) and [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines) are great resources for learning more about designing for mobile platforms.
diff --git a/website/versioned_docs/version-0.83/inputaccessoryview.md b/website/versioned_docs/version-0.83/inputaccessoryview.md
index a4f56532fa4..76220b4fd7c 100644
--- a/website/versioned_docs/version-0.83/inputaccessoryview.md
+++ b/website/versioned_docs/version-0.83/inputaccessoryview.md
@@ -1,98 +1,98 @@
----
-id: inputaccessoryview
-title: InputAccessoryView
----
-
-A component which enables customization of the keyboard input accessory view on iOS. The input accessory view is displayed above the keyboard whenever a `TextInput` has focus. This component can be used to create custom toolbars.
-
-To use this component wrap your custom toolbar with the InputAccessoryView component, and set a `nativeID`. Then, pass that `nativeID` as the `inputAccessoryViewID` of whatever `TextInput` you desire. A basic example:
-
-```SnackPlayer name=InputAccessoryView&supportedPlatforms=ios
-import React, {useState} from 'react';
-import {
-  Button,
-  InputAccessoryView,
-  ScrollView,
-  TextInput,
-  StyleSheet,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const inputAccessoryViewID = 'uniqueID';
-const initialText = '';
-
-const App = () => {
-  const [text, setText] = useState(initialText);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <ScrollView keyboardDismissMode="interactive">
-          <TextInput
-            style={styles.textInput}
-            inputAccessoryViewID={inputAccessoryViewID}
-            onChangeText={setText}
-            value={text}
-            placeholder={'Please type here…'}
-          />
-        </ScrollView>
-      </SafeAreaView>
-      <InputAccessoryView nativeID={inputAccessoryViewID}>
-        <Button onPress={() => setText(initialText)} title="Clear text" />
-      </InputAccessoryView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: 20,
-  },
-  textInput: {
-    padding: 16,
-    borderColor: 'black',
-    borderWidth: 1,
-  },
-});
-
-export default App;
-```
-
-This component can also be used to create sticky text inputs (text inputs which are anchored to the top of the keyboard). To do this, wrap a `TextInput` with the `InputAccessoryView` component, and don't set a `nativeID`. For an example, look at [InputAccessoryViewExample.js](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/InputAccessoryView/InputAccessoryViewExample.js).
-
----
-
-# Reference
-
-## Props
-
-### `backgroundColor`
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `nativeID`
-
-An ID which is used to associate this `InputAccessoryView` to specified TextInput(s).
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `style`
-
-| Type                              |
-| --------------------------------- |
-| [View Style](view-style-props.md) |
-
-# Known issues
-
-- [react-native#18997](https://github.com/facebook/react-native/issues/18997): Doesn't support multiline `TextInput`
-- [react-native#20157](https://github.com/facebook/react-native/issues/20157): Can't use with a bottom tab bar
+---
+id: inputaccessoryview
+title: InputAccessoryView
+---
+
+A component which enables customization of the keyboard input accessory view on iOS. The input accessory view is displayed above the keyboard whenever a `TextInput` has focus. This component can be used to create custom toolbars.
+
+To use this component wrap your custom toolbar with the InputAccessoryView component, and set a `nativeID`. Then, pass that `nativeID` as the `inputAccessoryViewID` of whatever `TextInput` you desire. A basic example:
+
+```SnackPlayer name=InputAccessoryView&supportedPlatforms=ios
+import {useState} from 'react';
+import {
+  Button,
+  InputAccessoryView,
+  ScrollView,
+  TextInput,
+  StyleSheet,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const inputAccessoryViewID = 'uniqueID';
+const initialText = '';
+
+const App = () => {
+  const [text, setText] = useState(initialText);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <ScrollView keyboardDismissMode="interactive">
+          <TextInput
+            style={styles.textInput}
+            inputAccessoryViewID={inputAccessoryViewID}
+            onChangeText={setText}
+            value={text}
+            placeholder={'Please type here…'}
+          />
+        </ScrollView>
+      </SafeAreaView>
+      <InputAccessoryView nativeID={inputAccessoryViewID}>
+        <Button onPress={() => setText(initialText)} title="Clear text" />
+      </InputAccessoryView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 20,
+  },
+  textInput: {
+    padding: 16,
+    borderColor: 'black',
+    borderWidth: 1,
+  },
+});
+
+export default App;
+```
+
+This component can also be used to create sticky text inputs (text inputs which are anchored to the top of the keyboard). To do this, wrap a `TextInput` with the `InputAccessoryView` component, and don't set a `nativeID`. For an example, look at [InputAccessoryViewExample.js](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/InputAccessoryView/InputAccessoryViewExample.js).
+
+---
+
+# Reference
+
+## Props
+
+### `backgroundColor`
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `nativeID`
+
+An ID which is used to associate this `InputAccessoryView` to specified TextInput(s).
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `style`
+
+| Type                              |
+| --------------------------------- |
+| [View Style](view-style-props.md) |
+
+# Known issues
+
+- [react-native#18997](https://github.com/facebook/react-native/issues/18997): Doesn't support multiline `TextInput`
+- [react-native#20157](https://github.com/facebook/react-native/issues/20157): Can't use with a bottom tab bar
diff --git a/website/versioned_docs/version-0.83/interactionmanager.md b/website/versioned_docs/version-0.83/interactionmanager.md
index f1851c75212..87aaff50674 100644
--- a/website/versioned_docs/version-0.83/interactionmanager.md
+++ b/website/versioned_docs/version-0.83/interactionmanager.md
@@ -1,422 +1,422 @@
----
-id: interactionmanager
-title: 🗑️ InteractionManager
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-:::warning[Deprecated]
-Avoid long-running work and use [`requestIdleCallback`](global-requestIdleCallback) instead.
-:::
-
-InteractionManager allows long-running work to be scheduled after any interactions/animations have completed. In particular, this allows JavaScript animations to run smoothly.
-
-Applications can schedule tasks to run after interactions with the following:
-
-```tsx
-InteractionManager.runAfterInteractions(() => {
-  // ...long-running synchronous task...
-});
-```
-
-Compare this to other scheduling alternatives:
-
-- `requestAnimationFrame()` for code that animates a view over time.
-- `setImmediate/setTimeout()` run code later, note this may delay animations.
-- `runAfterInteractions()` run code later, without delaying active animations.
-
-The touch handling system considers one or more active touches to be an 'interaction' and will delay `runAfterInteractions()` callbacks until all touches have ended or been cancelled.
-
-InteractionManager also allows applications to register animations by creating an interaction 'handle' on animation start, and clearing it upon completion:
-
-```tsx
-const handle = InteractionManager.createInteractionHandle();
-// run animation... (`runAfterInteractions` tasks are queued)
-// later, on animation completion:
-InteractionManager.clearInteractionHandle(handle);
-// queued tasks run if all handles were cleared
-```
-
-`runAfterInteractions` takes either a plain callback function, or a `PromiseTask` object with a `gen` method that returns a `Promise`. If a `PromiseTask` is supplied, then it is fully resolved (including asynchronous dependencies that also schedule more tasks via `runAfterInteractions`) before starting on the next task that might have been queued up synchronously earlier.
-
-By default, queued tasks are executed together in a loop in one `setImmediate` batch. If `setDeadline` is called with a positive number, then tasks will only be executed until the deadline (in terms of js event loop run time) approaches, at which point execution will yield via setTimeout, allowing events such as touches to start interactions and block queued tasks from executing, making apps more responsive.
-
----
-
-## Example
-
-### Basic
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useEffect} from 'react';
-import {
-  Alert,
-  Animated,
-  InteractionManager,
-  Platform,
-  StyleSheet,
-  Text,
-  useAnimatedValue,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
-
-const useFadeIn = (duration = 5000) => {
-  const opacity = useAnimatedValue(0);
-
-  // Running the animation when the component is mounted
-  useEffect(() => {
-    // Animated.timing() create a interaction handle by default, if you want to disabled that
-    // behaviour you can set isInteraction to false to disabled that.
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration,
-      useNativeDriver: true,
-    }).start();
-  }, [duration, opacity]);
-
-  return opacity;
-};
-
-const Ball = ({onShown}) => {
-  const opacity = useFadeIn();
-
-  // Running a method after the animation
-  useEffect(() => {
-    const interactionPromise = InteractionManager.runAfterInteractions(() =>
-      onShown(),
-    );
-    return () => interactionPromise.cancel();
-  }, [onShown]);
-
-  return <Animated.View style={[styles.ball, {opacity}]} />;
-};
-
-const App = () => {
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>{instructions}</Text>
-        <Ball onShown={() => Alert.alert('Animation is done')} />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  ball: {
-    width: 100,
-    height: 100,
-    backgroundColor: 'salmon',
-    borderRadius: 100,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useEffect} from 'react';
-import {
-  Alert,
-  Animated,
-  InteractionManager,
-  Platform,
-  StyleSheet,
-  Text,
-  useAnimatedValue,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
-
-const useFadeIn = (duration = 5000) => {
-  const opacity = useAnimatedValue(0);
-
-  // Running the animation when the component is mounted
-  useEffect(() => {
-    // Animated.timing() create a interaction handle by default, if you want to disabled that
-    // behaviour you can set isInteraction to false to disabled that.
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration,
-      useNativeDriver: true,
-    }).start();
-  }, [duration, opacity]);
-
-  return opacity;
-};
-
-type BallProps = {
-  onShown: () => void;
-};
-
-const Ball = ({onShown}: BallProps) => {
-  const opacity = useFadeIn();
-
-  // Running a method after the animation
-  useEffect(() => {
-    const interactionPromise = InteractionManager.runAfterInteractions(() =>
-      onShown(),
-    );
-    return () => interactionPromise.cancel();
-  }, [onShown]);
-
-  return <Animated.View style={[styles.ball, {opacity}]} />;
-};
-
-const App = () => {
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>{instructions}</Text>
-        <Ball onShown={() => Alert.alert('Animation is done')} />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  ball: {
-    width: 100,
-    height: 100,
-    backgroundColor: 'salmon',
-    borderRadius: 100,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### Advanced
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useEffect} from 'react';
-import {
-  Alert,
-  Animated,
-  InteractionManager,
-  Platform,
-  StyleSheet,
-  Text,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
-
-// You can create a custom interaction/animation and add
-// support for InteractionManager
-const useCustomInteraction = (timeLocked = 2000) => {
-  useEffect(() => {
-    const handle = InteractionManager.createInteractionHandle();
-
-    setTimeout(
-      () => InteractionManager.clearInteractionHandle(handle),
-      timeLocked,
-    );
-
-    return () => InteractionManager.clearInteractionHandle(handle);
-  }, [timeLocked]);
-};
-
-const Ball = ({onInteractionIsDone}) => {
-  useCustomInteraction();
-
-  // Running a method after the interaction
-  useEffect(() => {
-    InteractionManager.runAfterInteractions(() => onInteractionIsDone());
-  }, [onInteractionIsDone]);
-
-  return <Animated.View style={[styles.ball]} />;
-};
-
-const App = () => {
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>{instructions}</Text>
-        <Ball onInteractionIsDone={() => Alert.alert('Interaction is done')} />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  ball: {
-    width: 100,
-    height: 100,
-    backgroundColor: 'salmon',
-    borderRadius: 100,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useEffect} from 'react';
-import {
-  Alert,
-  Animated,
-  InteractionManager,
-  Platform,
-  StyleSheet,
-  Text,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
-
-// You can create a custom interaction/animation and add
-// support for InteractionManager
-const useCustomInteraction = (timeLocked = 2000) => {
-  useEffect(() => {
-    const handle = InteractionManager.createInteractionHandle();
-
-    setTimeout(
-      () => InteractionManager.clearInteractionHandle(handle),
-      timeLocked,
-    );
-
-    return () => InteractionManager.clearInteractionHandle(handle);
-  }, [timeLocked]);
-};
-
-type BallProps = {
-  onInteractionIsDone: () => void;
-};
-
-const Ball = ({onInteractionIsDone}: BallProps) => {
-  useCustomInteraction();
-
-  // Running a method after the interaction
-  useEffect(() => {
-    InteractionManager.runAfterInteractions(() => onInteractionIsDone());
-  }, [onInteractionIsDone]);
-
-  return <Animated.View style={[styles.ball]} />;
-};
-
-const App = () => {
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>{instructions}</Text>
-        <Ball onInteractionIsDone={() => Alert.alert('Interaction is done')} />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  ball: {
-    width: 100,
-    height: 100,
-    backgroundColor: 'salmon',
-    borderRadius: 100,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-# Reference
-
-## Methods
-
-### `runAfterInteractions()`
-
-```tsx
-static runAfterInteractions(task?: (() => any) | SimpleTask | PromiseTask);
-```
-
-Schedule a function to run after all interactions have completed. Returns a cancellable "promise".
-
----
-
-### `createInteractionHandle()`
-
-```tsx
-static createInteractionHandle(): Handle;
-```
-
-Notify manager that an interaction has started.
-
----
-
-### `clearInteractionHandle()`
-
-```tsx
-static clearInteractionHandle(handle: Handle);
-```
-
-Notify manager that an interaction has completed.
-
----
-
-### `setDeadline()`
-
-```tsx
-static setDeadline(deadline: number);
-```
-
-A positive number will use setTimeout to schedule any tasks after the eventLoopRunningTime hits the deadline value, otherwise all tasks will be executed in one setImmediate batch (default).
+---
+id: interactionmanager
+title: 🗑️ InteractionManager
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+:::warning[Deprecated]
+Avoid long-running work and use [`requestIdleCallback`](global-requestIdleCallback) instead.
+:::
+
+InteractionManager allows long-running work to be scheduled after any interactions/animations have completed. In particular, this allows JavaScript animations to run smoothly.
+
+Applications can schedule tasks to run after interactions with the following:
+
+```tsx
+InteractionManager.runAfterInteractions(() => {
+  // ...long-running synchronous task...
+});
+```
+
+Compare this to other scheduling alternatives:
+
+- `requestAnimationFrame()` for code that animates a view over time.
+- `setImmediate/setTimeout()` run code later, note this may delay animations.
+- `runAfterInteractions()` run code later, without delaying active animations.
+
+The touch handling system considers one or more active touches to be an 'interaction' and will delay `runAfterInteractions()` callbacks until all touches have ended or been cancelled.
+
+InteractionManager also allows applications to register animations by creating an interaction 'handle' on animation start, and clearing it upon completion:
+
+```tsx
+const handle = InteractionManager.createInteractionHandle();
+// run animation... (`runAfterInteractions` tasks are queued)
+// later, on animation completion:
+InteractionManager.clearInteractionHandle(handle);
+// queued tasks run if all handles were cleared
+```
+
+`runAfterInteractions` takes either a plain callback function, or a `PromiseTask` object with a `gen` method that returns a `Promise`. If a `PromiseTask` is supplied, then it is fully resolved (including asynchronous dependencies that also schedule more tasks via `runAfterInteractions`) before starting on the next task that might have been queued up synchronously earlier.
+
+By default, queued tasks are executed together in a loop in one `setImmediate` batch. If `setDeadline` is called with a positive number, then tasks will only be executed until the deadline (in terms of js event loop run time) approaches, at which point execution will yield via setTimeout, allowing events such as touches to start interactions and block queued tasks from executing, making apps more responsive.
+
+---
+
+## Example
+
+### Basic
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=js
+import {useEffect} from 'react';
+import {
+  Alert,
+  Animated,
+  InteractionManager,
+  Platform,
+  StyleSheet,
+  Text,
+  useAnimatedValue,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const instructions = Platform.select({
+  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
+  android:
+    'Double tap R on your keyboard to reload,\n' +
+    'Shake or press menu button for dev menu',
+});
+
+const useFadeIn = (duration = 5000) => {
+  const opacity = useAnimatedValue(0);
+
+  // Running the animation when the component is mounted
+  useEffect(() => {
+    // Animated.timing() create a interaction handle by default, if you want to disabled that
+    // behaviour you can set isInteraction to false to disabled that.
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration,
+      useNativeDriver: true,
+    }).start();
+  }, [duration, opacity]);
+
+  return opacity;
+};
+
+const Ball = ({onShown}) => {
+  const opacity = useFadeIn();
+
+  // Running a method after the animation
+  useEffect(() => {
+    const interactionPromise = InteractionManager.runAfterInteractions(() =>
+      onShown(),
+    );
+    return () => interactionPromise.cancel();
+  }, [onShown]);
+
+  return <Animated.View style={[styles.ball, {opacity}]} />;
+};
+
+const App = () => {
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>{instructions}</Text>
+        <Ball onShown={() => Alert.alert('Animation is done')} />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  ball: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'salmon',
+    borderRadius: 100,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=tsx
+import {useEffect} from 'react';
+import {
+  Alert,
+  Animated,
+  InteractionManager,
+  Platform,
+  StyleSheet,
+  Text,
+  useAnimatedValue,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const instructions = Platform.select({
+  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
+  android:
+    'Double tap R on your keyboard to reload,\n' +
+    'Shake or press menu button for dev menu',
+});
+
+const useFadeIn = (duration = 5000) => {
+  const opacity = useAnimatedValue(0);
+
+  // Running the animation when the component is mounted
+  useEffect(() => {
+    // Animated.timing() create a interaction handle by default, if you want to disabled that
+    // behaviour you can set isInteraction to false to disabled that.
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration,
+      useNativeDriver: true,
+    }).start();
+  }, [duration, opacity]);
+
+  return opacity;
+};
+
+type BallProps = {
+  onShown: () => void;
+};
+
+const Ball = ({onShown}: BallProps) => {
+  const opacity = useFadeIn();
+
+  // Running a method after the animation
+  useEffect(() => {
+    const interactionPromise = InteractionManager.runAfterInteractions(() =>
+      onShown(),
+    );
+    return () => interactionPromise.cancel();
+  }, [onShown]);
+
+  return <Animated.View style={[styles.ball, {opacity}]} />;
+};
+
+const App = () => {
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>{instructions}</Text>
+        <Ball onShown={() => Alert.alert('Animation is done')} />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  ball: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'salmon',
+    borderRadius: 100,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### Advanced
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=js
+import {useEffect} from 'react';
+import {
+  Alert,
+  Animated,
+  InteractionManager,
+  Platform,
+  StyleSheet,
+  Text,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const instructions = Platform.select({
+  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
+  android:
+    'Double tap R on your keyboard to reload,\n' +
+    'Shake or press menu button for dev menu',
+});
+
+// You can create a custom interaction/animation and add
+// support for InteractionManager
+const useCustomInteraction = (timeLocked = 2000) => {
+  useEffect(() => {
+    const handle = InteractionManager.createInteractionHandle();
+
+    setTimeout(
+      () => InteractionManager.clearInteractionHandle(handle),
+      timeLocked,
+    );
+
+    return () => InteractionManager.clearInteractionHandle(handle);
+  }, [timeLocked]);
+};
+
+const Ball = ({onInteractionIsDone}) => {
+  useCustomInteraction();
+
+  // Running a method after the interaction
+  useEffect(() => {
+    InteractionManager.runAfterInteractions(() => onInteractionIsDone());
+  }, [onInteractionIsDone]);
+
+  return <Animated.View style={[styles.ball]} />;
+};
+
+const App = () => {
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>{instructions}</Text>
+        <Ball onInteractionIsDone={() => Alert.alert('Interaction is done')} />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  ball: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'salmon',
+    borderRadius: 100,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=tsx
+import {useEffect} from 'react';
+import {
+  Alert,
+  Animated,
+  InteractionManager,
+  Platform,
+  StyleSheet,
+  Text,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const instructions = Platform.select({
+  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
+  android:
+    'Double tap R on your keyboard to reload,\n' +
+    'Shake or press menu button for dev menu',
+});
+
+// You can create a custom interaction/animation and add
+// support for InteractionManager
+const useCustomInteraction = (timeLocked = 2000) => {
+  useEffect(() => {
+    const handle = InteractionManager.createInteractionHandle();
+
+    setTimeout(
+      () => InteractionManager.clearInteractionHandle(handle),
+      timeLocked,
+    );
+
+    return () => InteractionManager.clearInteractionHandle(handle);
+  }, [timeLocked]);
+};
+
+type BallProps = {
+  onInteractionIsDone: () => void;
+};
+
+const Ball = ({onInteractionIsDone}: BallProps) => {
+  useCustomInteraction();
+
+  // Running a method after the interaction
+  useEffect(() => {
+    InteractionManager.runAfterInteractions(() => onInteractionIsDone());
+  }, [onInteractionIsDone]);
+
+  return <Animated.View style={[styles.ball]} />;
+};
+
+const App = () => {
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>{instructions}</Text>
+        <Ball onInteractionIsDone={() => Alert.alert('Interaction is done')} />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  ball: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'salmon',
+    borderRadius: 100,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+# Reference
+
+## Methods
+
+### `runAfterInteractions()`
+
+```tsx
+static runAfterInteractions(task?: (() => any) | SimpleTask | PromiseTask);
+```
+
+Schedule a function to run after all interactions have completed. Returns a cancellable "promise".
+
+---
+
+### `createInteractionHandle()`
+
+```tsx
+static createInteractionHandle(): Handle;
+```
+
+Notify manager that an interaction has started.
+
+---
+
+### `clearInteractionHandle()`
+
+```tsx
+static clearInteractionHandle(handle: Handle);
+```
+
+Notify manager that an interaction has completed.
+
+---
+
+### `setDeadline()`
+
+```tsx
+static setDeadline(deadline: number);
+```
+
+A positive number will use setTimeout to schedule any tasks after the eventLoopRunningTime hits the deadline value, otherwise all tasks will be executed in one setImmediate batch (default).
diff --git a/website/versioned_docs/version-0.83/intro-react-native-components.md b/website/versioned_docs/version-0.83/intro-react-native-components.md
index eb585964154..2f3a1449d28 100644
--- a/website/versioned_docs/version-0.83/intro-react-native-components.md
+++ b/website/versioned_docs/version-0.83/intro-react-native-components.md
@@ -43,7 +43,6 @@ React Native has many Core Components for everything from controls to activity i
 In the next section, you will start combining these Core Components to learn about how React works. Have a play with them here now!
 
 ```SnackPlayer name=Hello%20World
-import React from 'react';
 import {View, Text, Image, ScrollView, TextInput} from 'react-native';
 
 const App = () => {
diff --git a/website/versioned_docs/version-0.83/introduction.md b/website/versioned_docs/version-0.83/introduction.md
index ba782cd838c..2752b80327b 100644
--- a/website/versioned_docs/version-0.83/introduction.md
+++ b/website/versioned_docs/version-0.83/introduction.md
@@ -30,7 +30,6 @@ While we do our best to assume no prior knowledge of React, Android, or iOS deve
 This introduction lets you get started immediately in your browser with interactive examples like this one:
 
 ```SnackPlayer name=Hello%20World
-import React from 'react';
 import {Text, View} from 'react-native';
 
 const YourApp = () => {
diff --git a/website/versioned_docs/version-0.83/javascript-environment.md b/website/versioned_docs/version-0.83/javascript-environment.md
index ab041dd34cd..2149516a93b 100644
--- a/website/versioned_docs/version-0.83/javascript-environment.md
+++ b/website/versioned_docs/version-0.83/javascript-environment.md
@@ -1,109 +1,109 @@
----
-id: javascript-environment
-title: JavaScript Environment
----
-
-import TableRow from '@site/core/TableRowWithCodeBlock';
-
-## JavaScript Runtime
-
-When using React Native, you're going to be running your JavaScript code in up to three environments:
-
-- In most cases, React Native will use [Hermes](hermes), an open-source JavaScript engine optimized for React Native.
-- If Hermes is disabled, React Native will use [JavaScriptCore](https://trac.webkit.org/wiki/JavaScriptCore), the JavaScript engine that powers Safari. Note that on iOS, JavaScriptCore does not use JIT due to the absence of writable executable memory in iOS apps.
-- When using Chrome debugging, all JavaScript code runs within Chrome itself, communicating with native code via WebSockets. Chrome uses [V8](https://v8.dev/) as its JavaScript engine.
-
-While these environments are very similar, you may end up hitting some inconsistencies. It is best to avoid relying on specifics of any runtime.
-
-## JavaScript Syntax Transformers
-
-Syntax transformers make writing code more enjoyable by allowing you to use new JavaScript syntax without having to wait for support on all interpreters.
-
-React Native ships with the [Babel JavaScript compiler](https://babeljs.io). Check [Babel documentation](https://babeljs.io/docs/plugins/#transform-plugins) on its supported transformations for more details.
-
-A full list of React Native's enabled transformations can be found in [@react-native/babel-preset](https://github.com/facebook/react-native/tree/main/packages/react-native-babel-preset).
-
-<table>
-<thead>
-  <tr><th>Transformation</th><th>Code</th></tr>
-</thead>
-<tbody>
-  <tr><td className="table-heading" colSpan="2">ECMAScript 5</td></tr>
-  <TableRow name="Reserved Words" code="promise.catch(function() {...});" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2015 (ES6)</td></tr>
-  <TableRow name="Arrow functions" code="<C onPress={() => this.setState({pressed: true})} />" url="https://babeljs.io/docs/learn-es2015/#arrows" />
-  <TableRow name="Block scoping" code="let greeting = 'hi';" url="https://babeljs.io/docs/learn-es2015/#let-const" />
-  <TableRow name="Call spread" code="Math.max(...array);" url="https://babeljs.io/docs/learn-es2015/#default-rest-spread" />
-  <TableRow name="Classes" code="class C extends React.Component {render() { return <View />; }}" url="https://babeljs.io/docs/learn-es2015/#classes" />
-  <TableRow name="Computed Properties" code="const key = 'abc'; const obj = {[key]: 10};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
-  <TableRow name="Constants" code="const answer = 42;" url="https://babeljs.io/docs/learn-es2015/#let-const" />
-  <TableRow name="Destructuring" code="const {isActive, style} = this.props;" url="https://babeljs.io/docs/learn-es2015/#destructuring" />
-  <TableRow name="for…of" code="for (var num of [1, 2, 3]) {...};" url="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of" />
-  <TableRow name="Function Name" code="let number = x => x;" url="https://babeljs.io/docs/en/babel-plugin-transform-function-name" />
-  <TableRow name="Literals" code="const b = 0b11; const o = 0o7; const u = 'Hello\u{000A}\u{0009}!';" url="https://babeljs.io/docs/en/babel-plugin-transform-literals" />
-  <TableRow name="Modules" code="import React, {Component} from 'react';" url="https://babeljs.io/docs/learn-es2015/#modules" />
-  <TableRow name="Object Concise Method" code="const obj = {method() { return 10; }};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
-  <TableRow name="Object Short Notation" code="const name = 'vjeux'; const obj = {name};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
-  <TableRow name="Parameters" code="function test(x = 'hello', {a, b}, ...args) {}" url="https://babeljs.io/docs/en/babel-plugin-transform-parameters" />
-  <TableRow name="Rest Params" code="function(type, ...args) {};" url="https://github.com/sebmarkbage/ecmascript-rest-spread" />
-  <TableRow name="Shorthand Properties" code="const o = {a, b, c};" url="https://babeljs.io/docs/en/babel-plugin-transform-shorthand-properties" />
-  <TableRow name="Sticky Regex" code="const a = /o+/y;" url="https://babeljs.io/docs/en/babel-plugin-transform-sticky-regex" />
-  <TableRow name="Template Literals" code="const who = 'world'; const str = `Hello ${who}`;" url="https://babeljs.io/docs/learn-es2015/#template-strings" />
-  <TableRow name="Unicode Regex" code="const string = 'foo💩bar'; const match = string.match(/foo(.)bar/u);" url="https://babeljs.io/docs/en/babel-plugin-transform-unicode-regex" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2016 (ES7)</td></tr>
-  <TableRow name="Exponentiation Operator" code="let x = 10 ** 2;" url="https://babeljs.io/docs/en/babel-plugin-transform-exponentiation-operator" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2017 (ES8)</td></tr>
-  <TableRow name="Async Functions" code="async function doStuffAsync() {const foo = await doOtherStuffAsync();};" url="https://github.com/tc39/ecmascript-asyncawait" />
-  <TableRow name="Function Trailing Comma" code="function f(a, b, c,) {};" url="https://github.com/jeffmo/es-trailing-function-commas" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2018 (ES9)</td></tr>
-  <TableRow name="Object Spread" code="const extended = {...obj, a: 10};" url="https://github.com/tc39/proposal-object-rest-spread" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2019 (ES10)</td></tr>
-  <TableRow name="Optional Catch Binding" code="try {throw 0; } catch { doSomethingWhichDoesNotCareAboutTheValueThrown();}" url="https://babeljs.io/docs/en/babel-plugin-proposal-optional-catch-binding" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2020 (ES11)</td></tr>
-  <TableRow name="Dynamic Imports" code="const package = await import('package'); package.function()" url="https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import" />
-  <TableRow name="Nullish Coalescing Operator" code="const foo = object.foo ?? 'default';" url="https://babeljs.io/docs/en/babel-plugin-proposal-nullish-coalescing-operator" />
-  <TableRow name="Optional Chaining" code="const name = obj.user?.name;" url="https://github.com/tc39/proposal-optional-chaining" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2022 (ES13)</td></tr>
-  <TableRow name="Class Fields" code="class Bork {static a = 'foo'; static b; x = 'bar'; y;}" url="https://babeljs.io/docs/en/babel-plugin-proposal-class-properties" />
-  <tr><td className="table-heading" colSpan="2">Stage 1 Proposal</td></tr>
-  <TableRow name="Export Default From" code="export v from 'mod';" url="https://babeljs.io/docs/en/babel-plugin-proposal-export-default-from" />
-  <tr><td className="table-heading" colSpan="2">Miscellaneous</td></tr>
-  <TableRow name="Babel Template" code="template(`const %%importName%% = require(%%source%%);`);" url="https://babeljs.io/docs/en/babel-template" />
-  <TableRow name="Flow" code="function foo(x: ?number): string {};" url="https://flowtype.org/" />
-  <TableRow name="ESM to CJS" code="export default 42;" url="https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs" />
-  <TableRow name="JSX" code="<View style={{color: 'red'}} />" url="https://react.dev/learn/writing-markup-with-jsx" />
-  <TableRow name="Object Assign" code="Object.assign(a, b);" url="https://babeljs.io/docs/en/babel-plugin-transform-object-assign" />
-  <TableRow name="React Display Name" code="const bar = createReactClass({});" url="https://babeljs.io/docs/en/babel-plugin-transform-react-display-name" />
-  <TableRow name="TypeScript" code="function foo(x: {hello: true, target: 'react native!'}): string {};" url="https://www.typescriptlang.org/" />
-</tbody>
-</table>
-
-## Polyfills
-
-Many standard functions are also available on all the supported JavaScript runtimes.
-
-#### Browser
-
-- [CommonJS `require`](https://nodejs.org/docs/latest/api/modules.html)
-- `md [console.{log, warn, error, info, debug, trace, table, group, groupCollapsed, groupEnd}](https://developer.chrome.com/devtools/docs/console-api)`
-- [`XMLHttpRequest`, `fetch`](network.md#content)
-- [`{set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame`](timers.md#content)
-
-#### ECMAScript 2015 (ES6)
-
-- [`Array.from`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from)
-- `md Array.prototype.{[find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find), [findIndex](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)}`
-- [`Object.assign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
-- `md String.prototype.{[startsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith), [endsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith), [repeat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat), [includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes)}`
-
-#### ECMAScript 2016 (ES7)
-
-- `md Array.prototype.[includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)`
-
-#### ECMAScript 2017 (ES8)
-
-- `md Object.{[entries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries), [values](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values)}`
-
-#### Specific
-
-- `__DEV__`
+---
+id: javascript-environment
+title: JavaScript Environment
+---
+
+import TableRow from '@site/core/TableRowWithCodeBlock';
+
+## JavaScript Runtime
+
+When using React Native, you're going to be running your JavaScript code in up to three environments:
+
+- In most cases, React Native will use [Hermes](hermes), an open-source JavaScript engine optimized for React Native.
+- If Hermes is disabled, React Native will use [JavaScriptCore](https://trac.webkit.org/wiki/JavaScriptCore), the JavaScript engine that powers Safari. Note that on iOS, JavaScriptCore does not use JIT due to the absence of writable executable memory in iOS apps.
+- When using Chrome debugging, all JavaScript code runs within Chrome itself, communicating with native code via WebSockets. Chrome uses [V8](https://v8.dev/) as its JavaScript engine.
+
+While these environments are very similar, you may end up hitting some inconsistencies. It is best to avoid relying on specifics of any runtime.
+
+## JavaScript Syntax Transformers
+
+Syntax transformers make writing code more enjoyable by allowing you to use new JavaScript syntax without having to wait for support on all interpreters.
+
+React Native ships with the [Babel JavaScript compiler](https://babeljs.io). Check [Babel documentation](https://babeljs.io/docs/plugins/#transform-plugins) on its supported transformations for more details.
+
+A full list of React Native's enabled transformations can be found in [@react-native/babel-preset](https://github.com/facebook/react-native/tree/main/packages/react-native-babel-preset).
+
+<table>
+<thead>
+  <tr><th>Transformation</th><th>Code</th></tr>
+</thead>
+<tbody>
+  <tr><td className="table-heading" colSpan="2">ECMAScript 5</td></tr>
+  <TableRow name="Reserved Words" code="promise.catch(function() {...});" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2015 (ES6)</td></tr>
+  <TableRow name="Arrow functions" code="<C onPress={() => this.setState({pressed: true})} />" url="https://babeljs.io/docs/learn-es2015/#arrows" />
+  <TableRow name="Block scoping" code="let greeting = 'hi';" url="https://babeljs.io/docs/learn-es2015/#let-const" />
+  <TableRow name="Call spread" code="Math.max(...array);" url="https://babeljs.io/docs/learn-es2015/#default-rest-spread" />
+  <TableRow name="Classes" code="class C extends React.Component {render() { return <View />; }}" url="https://babeljs.io/docs/learn-es2015/#classes" />
+  <TableRow name="Computed Properties" code="const key = 'abc'; const obj = {[key]: 10};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
+  <TableRow name="Constants" code="const answer = 42;" url="https://babeljs.io/docs/learn-es2015/#let-const" />
+  <TableRow name="Destructuring" code="const {isActive, style} = this.props;" url="https://babeljs.io/docs/learn-es2015/#destructuring" />
+  <TableRow name="for…of" code="for (var num of [1, 2, 3]) {...};" url="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of" />
+  <TableRow name="Function Name" code="let number = x => x;" url="https://babeljs.io/docs/en/babel-plugin-transform-function-name" />
+  <TableRow name="Literals" code="const b = 0b11; const o = 0o7; const u = 'Hello\u{000A}\u{0009}!';" url="https://babeljs.io/docs/en/babel-plugin-transform-literals" />
+  <TableRow name="Modules" code="import {Component} from 'react';" url="https://babeljs.io/docs/learn-es2015/#modules" />
+  <TableRow name="Object Concise Method" code="const obj = {method() { return 10; }};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
+  <TableRow name="Object Short Notation" code="const name = 'vjeux'; const obj = {name};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
+  <TableRow name="Parameters" code="function test(x = 'hello', {a, b}, ...args) {}" url="https://babeljs.io/docs/en/babel-plugin-transform-parameters" />
+  <TableRow name="Rest Params" code="function(type, ...args) {};" url="https://github.com/sebmarkbage/ecmascript-rest-spread" />
+  <TableRow name="Shorthand Properties" code="const o = {a, b, c};" url="https://babeljs.io/docs/en/babel-plugin-transform-shorthand-properties" />
+  <TableRow name="Sticky Regex" code="const a = /o+/y;" url="https://babeljs.io/docs/en/babel-plugin-transform-sticky-regex" />
+  <TableRow name="Template Literals" code="const who = 'world'; const str = `Hello ${who}`;" url="https://babeljs.io/docs/learn-es2015/#template-strings" />
+  <TableRow name="Unicode Regex" code="const string = 'foo💩bar'; const match = string.match(/foo(.)bar/u);" url="https://babeljs.io/docs/en/babel-plugin-transform-unicode-regex" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2016 (ES7)</td></tr>
+  <TableRow name="Exponentiation Operator" code="let x = 10 ** 2;" url="https://babeljs.io/docs/en/babel-plugin-transform-exponentiation-operator" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2017 (ES8)</td></tr>
+  <TableRow name="Async Functions" code="async function doStuffAsync() {const foo = await doOtherStuffAsync();};" url="https://github.com/tc39/ecmascript-asyncawait" />
+  <TableRow name="Function Trailing Comma" code="function f(a, b, c,) {};" url="https://github.com/jeffmo/es-trailing-function-commas" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2018 (ES9)</td></tr>
+  <TableRow name="Object Spread" code="const extended = {...obj, a: 10};" url="https://github.com/tc39/proposal-object-rest-spread" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2019 (ES10)</td></tr>
+  <TableRow name="Optional Catch Binding" code="try {throw 0; } catch { doSomethingWhichDoesNotCareAboutTheValueThrown();}" url="https://babeljs.io/docs/en/babel-plugin-proposal-optional-catch-binding" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2020 (ES11)</td></tr>
+  <TableRow name="Dynamic Imports" code="const package = await import('package'); package.function()" url="https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import" />
+  <TableRow name="Nullish Coalescing Operator" code="const foo = object.foo ?? 'default';" url="https://babeljs.io/docs/en/babel-plugin-proposal-nullish-coalescing-operator" />
+  <TableRow name="Optional Chaining" code="const name = obj.user?.name;" url="https://github.com/tc39/proposal-optional-chaining" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2022 (ES13)</td></tr>
+  <TableRow name="Class Fields" code="class Bork {static a = 'foo'; static b; x = 'bar'; y;}" url="https://babeljs.io/docs/en/babel-plugin-proposal-class-properties" />
+  <tr><td className="table-heading" colSpan="2">Stage 1 Proposal</td></tr>
+  <TableRow name="Export Default From" code="export v from 'mod';" url="https://babeljs.io/docs/en/babel-plugin-proposal-export-default-from" />
+  <tr><td className="table-heading" colSpan="2">Miscellaneous</td></tr>
+  <TableRow name="Babel Template" code="template(`const %%importName%% = require(%%source%%);`);" url="https://babeljs.io/docs/en/babel-template" />
+  <TableRow name="Flow" code="function foo(x: ?number): string {};" url="https://flowtype.org/" />
+  <TableRow name="ESM to CJS" code="export default 42;" url="https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs" />
+  <TableRow name="JSX" code="<View style={{color: 'red'}} />" url="https://react.dev/learn/writing-markup-with-jsx" />
+  <TableRow name="Object Assign" code="Object.assign(a, b);" url="https://babeljs.io/docs/en/babel-plugin-transform-object-assign" />
+  <TableRow name="React Display Name" code="const bar = createReactClass({});" url="https://babeljs.io/docs/en/babel-plugin-transform-react-display-name" />
+  <TableRow name="TypeScript" code="function foo(x: {hello: true, target: 'react native!'}): string {};" url="https://www.typescriptlang.org/" />
+</tbody>
+</table>
+
+## Polyfills
+
+Many standard functions are also available on all the supported JavaScript runtimes.
+
+#### Browser
+
+- [CommonJS `require`](https://nodejs.org/docs/latest/api/modules.html)
+- `md [console.{log, warn, error, info, debug, trace, table, group, groupCollapsed, groupEnd}](https://developer.chrome.com/devtools/docs/console-api)`
+- [`XMLHttpRequest`, `fetch`](network.md#content)
+- [`{set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame`](timers.md#content)
+
+#### ECMAScript 2015 (ES6)
+
+- [`Array.from`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from)
+- `md Array.prototype.{[find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find), [findIndex](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)}`
+- [`Object.assign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
+- `md String.prototype.{[startsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith), [endsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith), [repeat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat), [includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes)}`
+
+#### ECMAScript 2016 (ES7)
+
+- `md Array.prototype.[includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)`
+
+#### ECMAScript 2017 (ES8)
+
+- `md Object.{[entries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries), [values](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values)}`
+
+#### Specific
+
+- `__DEV__`
diff --git a/website/versioned_docs/version-0.83/keyboard.md b/website/versioned_docs/version-0.83/keyboard.md
index 8560ce4999d..de1ec7b870b 100644
--- a/website/versioned_docs/version-0.83/keyboard.md
+++ b/website/versioned_docs/version-0.83/keyboard.md
@@ -1,146 +1,146 @@
----
-id: keyboard
-title: Keyboard
----
-
-`Keyboard` module to control keyboard events.
-
-### Usage
-
-The Keyboard module allows you to listen for native events and react to them, as well as make changes to the keyboard, like dismissing it.
-
-```SnackPlayer name=Keyboard%20Example&supportedPlatforms=ios,android
-import React, {useState, useEffect} from 'react';
-import {Keyboard, Text, TextInput, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const Example = () => {
-  const [keyboardStatus, setKeyboardStatus] = useState('Keyboard Hidden');
-
-  useEffect(() => {
-    const showSubscription = Keyboard.addListener('keyboardDidShow', () => {
-      setKeyboardStatus('Keyboard Shown');
-    });
-    const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
-      setKeyboardStatus('Keyboard Hidden');
-    });
-
-    return () => {
-      showSubscription.remove();
-      hideSubscription.remove();
-    };
-  }, []);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={style.container}>
-        <TextInput
-          style={style.input}
-          placeholder="Click here…"
-          onSubmitEditing={Keyboard.dismiss}
-        />
-        <Text style={style.status}>{keyboardStatus}</Text>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const style = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 36,
-  },
-  input: {
-    padding: 10,
-    borderWidth: 0.5,
-    borderRadius: 4,
-  },
-  status: {
-    padding: 16,
-    textAlign: 'center',
-  },
-});
-
-export default Example;
-```
-
----
-
-# Reference
-
-## Methods
-
-### `addListener()`
-
-```tsx
-static addListener: (
-  eventType: KeyboardEventName,
-  listener: KeyboardEventListener,
-) => EmitterSubscription;
-```
-
-The `addListener` function connects a JavaScript function to an identified native keyboard notification event.
-
-This function then returns the reference to the listener.
-
-**Parameters:**
-
-| Name                                                                     | Type     | Description                                                                    |
-| ------------------------------------------------------------------------ | -------- | ------------------------------------------------------------------------------ |
-| eventName <div className="label basic two-lines required">Required</div> | string   | The string that identifies the event you're listening for. See the list below. |
-| callback <div className="label basic two-lines required">Required</div>  | function | The function to be called when the event fires                                 |
-
-**`eventName`**
-
-This can be any of the following:
-
-- `keyboardWillShow`
-- `keyboardDidShow`
-- `keyboardWillHide`
-- `keyboardDidHide`
-- `keyboardWillChangeFrame`
-- `keyboardDidChangeFrame`
-
-:::note
-Only `keyboardDidShow` and `keyboardDidHide` events are available on Android. The events will not be fired when using Android 10 or below if your activity has `android:windowSoftInputMode` set to `adjustResize` or `adjustNothing`.
-:::
-
----
-
-### `dismiss()`
-
-```tsx
-static dismiss();
-```
-
-Dismisses the active keyboard and removes focus.
-
----
-
-### `scheduleLayoutAnimation`
-
-```tsx
-static scheduleLayoutAnimation(event: KeyboardEvent);
-```
-
-Useful for syncing TextInput (or other keyboard accessory view) size of position changes with keyboard movements.
-
----
-
-### `isVisible()`
-
-```tsx
-static isVisible(): boolean;
-```
-
-Whether the keyboard is last known to be visible.
-
----
-
-### `metrics()`
-
-```tsx
-static metrics(): KeyboardMetrics | undefined;
-```
-
-Return the metrics of the soft-keyboard if visible.
+---
+id: keyboard
+title: Keyboard
+---
+
+`Keyboard` module to control keyboard events.
+
+### Usage
+
+The Keyboard module allows you to listen for native events and react to them, as well as make changes to the keyboard, like dismissing it.
+
+```SnackPlayer name=Keyboard%20Example&supportedPlatforms=ios,android
+import {useState, useEffect} from 'react';
+import {Keyboard, Text, TextInput, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const Example = () => {
+  const [keyboardStatus, setKeyboardStatus] = useState('Keyboard Hidden');
+
+  useEffect(() => {
+    const showSubscription = Keyboard.addListener('keyboardDidShow', () => {
+      setKeyboardStatus('Keyboard Shown');
+    });
+    const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
+      setKeyboardStatus('Keyboard Hidden');
+    });
+
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={style.container}>
+        <TextInput
+          style={style.input}
+          placeholder="Click here…"
+          onSubmitEditing={Keyboard.dismiss}
+        />
+        <Text style={style.status}>{keyboardStatus}</Text>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const style = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 36,
+  },
+  input: {
+    padding: 10,
+    borderWidth: 0.5,
+    borderRadius: 4,
+  },
+  status: {
+    padding: 16,
+    textAlign: 'center',
+  },
+});
+
+export default Example;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `addListener()`
+
+```tsx
+static addListener: (
+  eventType: KeyboardEventName,
+  listener: KeyboardEventListener,
+) => EmitterSubscription;
+```
+
+The `addListener` function connects a JavaScript function to an identified native keyboard notification event.
+
+This function then returns the reference to the listener.
+
+**Parameters:**
+
+| Name                                                                     | Type     | Description                                                                    |
+| ------------------------------------------------------------------------ | -------- | ------------------------------------------------------------------------------ |
+| eventName <div className="label basic two-lines required">Required</div> | string   | The string that identifies the event you're listening for. See the list below. |
+| callback <div className="label basic two-lines required">Required</div>  | function | The function to be called when the event fires                                 |
+
+**`eventName`**
+
+This can be any of the following:
+
+- `keyboardWillShow`
+- `keyboardDidShow`
+- `keyboardWillHide`
+- `keyboardDidHide`
+- `keyboardWillChangeFrame`
+- `keyboardDidChangeFrame`
+
+:::note
+Only `keyboardDidShow` and `keyboardDidHide` events are available on Android. The events will not be fired when using Android 10 or below if your activity has `android:windowSoftInputMode` set to `adjustResize` or `adjustNothing`.
+:::
+
+---
+
+### `dismiss()`
+
+```tsx
+static dismiss();
+```
+
+Dismisses the active keyboard and removes focus.
+
+---
+
+### `scheduleLayoutAnimation`
+
+```tsx
+static scheduleLayoutAnimation(event: KeyboardEvent);
+```
+
+Useful for syncing TextInput (or other keyboard accessory view) size of position changes with keyboard movements.
+
+---
+
+### `isVisible()`
+
+```tsx
+static isVisible(): boolean;
+```
+
+Whether the keyboard is last known to be visible.
+
+---
+
+### `metrics()`
+
+```tsx
+static metrics(): KeyboardMetrics | undefined;
+```
+
+Return the metrics of the soft-keyboard if visible.
diff --git a/website/versioned_docs/version-0.83/keyboardavoidingview.md b/website/versioned_docs/version-0.83/keyboardavoidingview.md
index 55cce32cf54..cc650dd0f57 100644
--- a/website/versioned_docs/version-0.83/keyboardavoidingview.md
+++ b/website/versioned_docs/version-0.83/keyboardavoidingview.md
@@ -8,7 +8,6 @@ This component will automatically adjust its height, position, or bottom padding
 ## Example
 
 ```SnackPlayer name=KeyboardAvoidingView&supportedPlatforms=android,ios
-import React from 'react';
 import {
   View,
   KeyboardAvoidingView,
diff --git a/website/versioned_docs/version-0.83/layout-props.md b/website/versioned_docs/version-0.83/layout-props.md
index b3673e0c849..0d10649d7d6 100644
--- a/website/versioned_docs/version-0.83/layout-props.md
+++ b/website/versioned_docs/version-0.83/layout-props.md
@@ -1,1360 +1,1360 @@
----
-id: layout-props
-title: Layout Props
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-:::info
-More detailed examples about those properties can be found on the [Layout with Flexbox](flexbox) page.
-:::
-
-### Example
-
-The following example shows how different properties can affect or shape a React Native layout. You can try for example to add or remove squares from the UI while changing the values of the property `flexWrap`.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=LayoutProps%20Example&ext=js
-import React, {useState} from 'react';
-import {Button, ScrollView, StyleSheet, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [flexDirection, setFlexDirection] = useState(0);
-  const [justifyContent, setJustifyContent] = useState(0);
-  const [alignItems, setAlignItems] = useState(0);
-  const [direction, setDirection] = useState(0);
-  const [wrap, setWrap] = useState(0);
-
-  const [squares, setSquares] = useState([<Square />, <Square />, <Square />]);
-
-  const hookedStyles = {
-    flexDirection: flexDirections[flexDirection],
-    justifyContent: justifyContents[justifyContent],
-    alignItems: alignItemsArr[alignItems],
-    direction: directions[direction],
-    flexWrap: wraps[wrap],
-  };
-
-  const changeSetting = (value, options, setterFunction) => {
-    if (value === options.length - 1) {
-      setterFunction(0);
-      return;
-    }
-    setterFunction(value + 1);
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={[styles.container, styles.playingSpace, hookedStyles]}>
-          {squares.map(elem => elem)}
-        </View>
-        <ScrollView style={styles.layoutContainer}>
-          <View style={styles.controlSpace}>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Flex Direction"
-                onPress={() =>
-                  changeSetting(flexDirection, flexDirections, setFlexDirection)
-                }
-              />
-              <Text style={styles.text}>{flexDirections[flexDirection]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Justify Content"
-                onPress={() =>
-                  changeSetting(
-                    justifyContent,
-                    justifyContents,
-                    setJustifyContent,
-                  )
-                }
-              />
-              <Text style={styles.text}>{justifyContents[justifyContent]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Align Items"
-                onPress={() =>
-                  changeSetting(alignItems, alignItemsArr, setAlignItems)
-                }
-              />
-              <Text style={styles.text}>{alignItemsArr[alignItems]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Direction"
-                onPress={() =>
-                  changeSetting(direction, directions, setDirection)
-                }
-              />
-              <Text style={styles.text}>{directions[direction]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Flex Wrap"
-                onPress={() => changeSetting(wrap, wraps, setWrap)}
-              />
-              <Text style={styles.text}>{wraps[wrap]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Add Square"
-                onPress={() => setSquares([...squares, <Square />])}
-              />
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Delete Square"
-                onPress={() =>
-                  setSquares(squares.filter((v, i) => i !== squares.length - 1))
-                }
-              />
-            </View>
-          </View>
-        </ScrollView>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const flexDirections = ['row', 'row-reverse', 'column', 'column-reverse'];
-const justifyContents = [
-  'flex-start',
-  'flex-end',
-  'center',
-  'space-between',
-  'space-around',
-  'space-evenly',
-];
-const alignItemsArr = [
-  'flex-start',
-  'flex-end',
-  'center',
-  'stretch',
-  'baseline',
-];
-const wraps = ['nowrap', 'wrap', 'wrap-reverse'];
-const directions = ['inherit', 'ltr', 'rtl'];
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  layoutContainer: {
-    flex: 0.5,
-  },
-  playingSpace: {
-    backgroundColor: 'white',
-    borderColor: 'blue',
-    borderWidth: 3,
-    overflow: 'hidden',
-  },
-  controlSpace: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  buttonView: {
-    width: '50%',
-    padding: 10,
-  },
-  text: {
-    textAlign: 'center',
-  },
-});
-
-const Square = () => (
-  <View
-    style={{
-      width: 50,
-      height: 50,
-      backgroundColor: randomHexColor(),
-    }}
-  />
-);
-
-const randomHexColor = () => {
-  return '#000000'.replace(/0/g, () => {
-    return Math.round(Math.random() * 14).toString(16);
-  });
-};
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=LayoutProps%20Example&ext=tsx
-import React, {useState} from 'react';
-import {
-  Button,
-  ScrollView,
-  StyleSheet,
-  Text,
-  View,
-  FlexAlignType,
-  FlexStyle,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [flexDirection, setFlexDirection] = useState(0);
-  const [justifyContent, setJustifyContent] = useState(0);
-  const [alignItems, setAlignItems] = useState(0);
-  const [direction, setDirection] = useState(0);
-  const [wrap, setWrap] = useState(0);
-
-  const [squares, setSquares] = useState([<Square />, <Square />, <Square />]);
-
-  const hookedStyles = {
-    flexDirection: flexDirections[flexDirection],
-    justifyContent: justifyContents[justifyContent],
-    alignItems: alignItemsArr[alignItems],
-    direction: directions[direction],
-    flexWrap: wraps[wrap],
-  } as FlexStyle;
-
-  const changeSetting = (
-    value: number,
-    options: any[],
-    setterFunction: (index: number) => void,
-  ) => {
-    if (value === options.length - 1) {
-      setterFunction(0);
-      return;
-    }
-    setterFunction(value + 1);
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={[styles.container, styles.playingSpace, hookedStyles]}>
-          {squares.map(elem => elem)}
-        </View>
-        <ScrollView style={styles.layoutContainer}>
-          <View style={styles.controlSpace}>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Flex Direction"
-                onPress={() =>
-                  changeSetting(flexDirection, flexDirections, setFlexDirection)
-                }
-              />
-              <Text style={styles.text}>{flexDirections[flexDirection]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Justify Content"
-                onPress={() =>
-                  changeSetting(
-                    justifyContent,
-                    justifyContents,
-                    setJustifyContent,
-                  )
-                }
-              />
-              <Text style={styles.text}>{justifyContents[justifyContent]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Align Items"
-                onPress={() =>
-                  changeSetting(alignItems, alignItemsArr, setAlignItems)
-                }
-              />
-              <Text style={styles.text}>{alignItemsArr[alignItems]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Direction"
-                onPress={() =>
-                  changeSetting(direction, directions, setDirection)
-                }
-              />
-              <Text style={styles.text}>{directions[direction]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Flex Wrap"
-                onPress={() => changeSetting(wrap, wraps, setWrap)}
-              />
-              <Text style={styles.text}>{wraps[wrap]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Add Square"
-                onPress={() => setSquares([...squares, <Square />])}
-              />
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Delete Square"
-                onPress={() =>
-                  setSquares(squares.filter((v, i) => i !== squares.length - 1))
-                }
-              />
-            </View>
-          </View>
-        </ScrollView>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const flexDirections = [
-  'row',
-  'row-reverse',
-  'column',
-  'column-reverse',
-] as FlexStyle['flexDirection'][];
-const justifyContents = [
-  'flex-start',
-  'flex-end',
-  'center',
-  'space-between',
-  'space-around',
-  'space-evenly',
-] as FlexStyle['justifyContent'][];
-const alignItemsArr = [
-  'flex-start',
-  'flex-end',
-  'center',
-  'stretch',
-  'baseline',
-] as FlexAlignType[];
-const wraps = ['nowrap', 'wrap', 'wrap-reverse'];
-const directions = ['inherit', 'ltr', 'rtl'];
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  layoutContainer: {
-    flex: 0.5,
-  },
-  playingSpace: {
-    backgroundColor: 'white',
-    borderColor: 'blue',
-    borderWidth: 3,
-    overflow: 'hidden',
-  },
-  controlSpace: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  buttonView: {
-    width: '50%',
-    padding: 10,
-  },
-  text: {
-    textAlign: 'center',
-  },
-});
-
-const Square = () => (
-  <View
-    style={{
-      width: 50,
-      height: 50,
-      backgroundColor: randomHexColor(),
-    }}
-  />
-);
-
-const randomHexColor = () => {
-  return '#000000'.replace(/0/g, () => {
-    return Math.round(Math.random() * 14).toString(16);
-  });
-};
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
----
-
-# Reference
-
-## Props
-
-### `alignContent`
-
-`alignContent` controls how rows align in the cross direction, overriding the `alignContent` of the parent.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) for more details.
-
-| Type                                                                                                 | Required |
-| ---------------------------------------------------------------------------------------------------- | -------- |
-| enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around', 'space-evenly') | No       |
-
----
-
-### `alignItems`
-
-`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS (default: stretch).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) for more details.
-
-| Type                                                            | Required |
-| --------------------------------------------------------------- | -------- |
-| enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline') | No       |
-
----
-
-### `alignSelf`
-
-`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS (default: auto).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) for more details.
-
-| Type                                                                    | Required |
-| ----------------------------------------------------------------------- | -------- |
-| enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline') | No       |
-
----
-
-### `aspectRatio`
-
-Aspect ratio controls the size of the undefined dimension of a node.
-
-- On a node with a set width/height, aspect ratio controls the size of the unset dimension
-- On a node with a set flex basis, aspect ratio controls the size of the node in the cross axis if unset
-- On a node with a measure function, aspect ratio works as though the measure function measures the flex basis
-- On a node with flex grow/shrink, aspect ratio controls the size of the node in the cross axis if unset
-- Aspect ratio takes min/max dimensions into account
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `borderBottomWidth`
-
-`borderBottomWidth` works like `border-bottom-width` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderEndWidth`
-
-When direction is `ltr`, `borderEndWidth` is equivalent to `borderRightWidth`. When direction is `rtl`, `borderEndWidth` is equivalent to `borderLeftWidth`.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderLeftWidth`
-
-`borderLeftWidth` works like `border-left-width` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderRightWidth`
-
-`borderRightWidth` works like `border-right-width` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderStartWidth`
-
-When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. When direction is `rtl`, `borderStartWidth` is equivalent to `borderRightWidth`.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderTopWidth`
-
-`borderTopWidth` works like `border-top-width` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderWidth`
-
-`borderWidth` works like `border-width` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `bottom`
-
-`bottom` is the number of logical pixels to offset the bottom edge of this component.
-
-It works similarly to `bottom` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) for more details of how `bottom` affects layout.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `boxSizing`
-
-`boxSizing` defines how the element's various sizing props (`width`, `height`, `minWidth`, `minHeight`, etc.) are computed. If `boxSizing` is `border-box`, these sizes apply to the border box of the element. If it is `content-box`, they apply to the content box of the element. The default value is `border-box`. The [web documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) is a good source of information if you wish to learn more about how this prop works.
-
-| Type                              | Required |
-| --------------------------------- | -------- |
-| enum('border-box', 'content-box') | No       |
-
----
-
-### `columnGap`
-
-`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `direction`
-
-`direction` specifies the directional flow of the user interface. The default is `inherit`, except for root node which will have value based on the current locale.
-
-See [MDN CSS Reference](https://www.yogalayout.dev/docs/styling/layout-direction) for more details.
-
-| Type                          | Required |
-| ----------------------------- | -------- |
-| enum('inherit', 'ltr', 'rtl') | No       |
-
----
-
-### `display`
-
-`display` sets the display type of this component.
-
-It works similarly to `display` in CSS but only supports the values 'flex', 'none', and 'contents'. The default is `flex`.
-
-| Type                             | Required |
-| -------------------------------- | -------- |
-| enum('none', 'flex', 'contents') | No       |
-
----
-
-### `end`
-
-When the direction is `ltr`, `end` is equivalent to `right`. When the direction is `rtl`, `end` is equivalent to `left`.
-
-This style takes precedence over the `left` and `right` styles.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `flex`
-
-In React Native `flex` does not work the same way that it does in CSS. `flex` is a number rather than a string, and it works according to the [Yoga](https://github.com/facebook/yoga) layout engine.
-
-When `flex` is a positive number, it makes the component flexible, and it will be sized proportional to its flex value. So a component with `flex` set to `2` will take twice the space as a component with `flex` set to 1. `flex: <positive number>` equates to `flexGrow: <positive number>, flexShrink: 1, flexBasis: 0`.
-
-When `flex` is `0`, the component is sized according to `width` and `height`, and it is inflexible.
-
-When `flex` is `-1`, the component is normally sized according to `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`.
-
-`flexGrow`, `flexShrink`, and `flexBasis` work the same as in CSS.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `flexBasis`
-
-`flexBasis` is an axis-independent way of providing the default size of an item along the main axis. Setting the `flexBasis` of a child is similar to setting the `width` of that child if its parent is a container with `flexDirection: row` or setting the `height` of a child if its parent is a container with `flexDirection: column`. The `flexBasis` of an item is the default size of that item, the size of the item before any `flexGrow` and `flexShrink` calculations are performed.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `flexDirection`
-
-`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) for more details.
-
-| Type                                                   | Required |
-| ------------------------------------------------------ | -------- |
-| enum('row', 'row-reverse', 'column', 'column-reverse') | No       |
-
----
-
-### `flexGrow`
-
-`flexGrow` describes how any space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
-
-`flexGrow` accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the children’s `flexGrow` values.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `flexShrink`
-
-[`flexShrink`](layout-props#flexshrink) describes how to shrink children along the main axis in the case in which the total size of the children overflows the size of the container on the main axis. `flexShrink` is very similar to `flexGrow` and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed.
-
-`flexShrink` accepts any floating point value >= 0, with 0 being the default value. A container will shrink its children weighted by the children’s `flexShrink` values.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `flexWrap`
-
-`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS (default: nowrap).
-
-Note it does not work anymore with `alignItems: stretch` (the default), so you may want to use `alignItems: flex-start` for example (breaking change details: https://github.com/facebook/react-native/releases/tag/v0.28.0).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) for more details.
-
-| Type                                   | Required |
-| -------------------------------------- | -------- |
-| enum('wrap', 'nowrap', 'wrap-reverse') | No       |
-
----
-
-### `gap`
-
-`gap` works like `gap` in CSS. Only pixel units are supported in React Native.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `height`
-
-`height` sets the height of this component.
-
-It works similarly to `height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/height) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `inset`
-
-:::note
-`inset` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Setting `inset` has the same effect as setting each of `top`, `bottom`, `right` and `left` props.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/inset) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetBlock`
-
-:::note
-`insetBlock` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Equivalent to [`top`](layout-props#top) and [`bottom`](layout-props#bottom).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetBlockEnd`
-
-:::note
-`insetBlockEnd` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Equivalent to [`bottom`](layout-props#bottom).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetBlockStart`
-
-:::note
-`insetBlockStart` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Equivalent to [`top`](layout-props#top).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetInline`
-
-:::note
-`insetInline` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Equivalent to [`right`](layout-props#right) and [`left`](layout-props#left).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetInlineEnd`
-
-:::note
-`insetInlineEnd` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-When direction is `ltr`, `insetInlineEnd` is equivalent to [`right`](layout-props#right). When direction is `rtl`, `insetInlineEnd` is equivalent to [`left`](layout-props#left).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetInlineStart`
-
-:::note
-`insetInlineStart` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-When direction is `ltr`, `insetInlineStart` is equivalent to [`left`](layout-props#left). When direction is `rtl`, `insetInlineStart` is equivalent to [`right`](layout-props#right).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `isolation`
-
-:::note
-`isolation` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-`isolation` lets you form a [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context).
-
-There are two values:
-
-- `auto` (default): Does nothing.
-- `isolate`: Forms a stacking context.
-
-| Type                    | Required |
-| ----------------------- | -------- |
-| enum('auto', 'isolate') | No       |
-
----
-
-### `justifyContent`
-
-`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS (default: flex-start).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) for more details.
-
-| Type                                                                                      | Required |
-| ----------------------------------------------------------------------------------------- | -------- |
-| enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly') | No       |
-
----
-
-### `left`
-
-`left` is the number of logical pixels to offset the left edge of this component.
-
-It works similarly to `left` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/left) for more details of how `left` affects layout.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `margin`
-
-Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginBottom`
-
-`marginBottom` works like `margin-bottom` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginBlock`
-
-Equivalent to [`marginVertical`](layout-props#marginvertical).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginBlockEnd`
-
-Equivalent to [`marginBottom`](layout-props#marginbottom).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginBlockStart`
-
-Equivalent to [`marginTop`](layout-props#margintop).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginEnd`
-
-When direction is `ltr`, `marginEnd` is equivalent to `marginRight`. When direction is `rtl`, `marginEnd` is equivalent to `marginLeft`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginHorizontal`
-
-Setting `marginHorizontal` has the same effect as setting both `marginLeft` and `marginRight`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginInline`
-
-Equivalent to [`marginHorizontal`](layout-props#marginhorizontal).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginInlineEnd`
-
-When direction is `ltr`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginRight`). When direction is `rtl`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginLeft`).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginInlineStart`
-
-When direction is `ltr`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginLeft`). When direction is `rtl`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginRight`).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginLeft`
-
-`marginLeft` works like `margin-left` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginRight`
-
-`marginRight` works like `margin-right` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginStart`
-
-When direction is `ltr`, `marginStart` is equivalent to `marginLeft`. When direction is `rtl`, `marginStart` is equivalent to `marginRight`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginTop`
-
-`marginTop` works like `margin-top` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginVertical`
-
-Setting `marginVertical` has the same effect as setting both `marginTop` and `marginBottom`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `maxHeight`
-
-`maxHeight` is the maximum height for this component, in logical pixels.
-
-It works similarly to `max-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `maxWidth`
-
-`maxWidth` is the maximum width for this component, in logical pixels.
-
-It works similarly to `max-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `minHeight`
-
-`minHeight` is the minimum height for this component, in logical pixels.
-
-It works similarly to `min-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `minWidth`
-
-`minWidth` is the minimum width for this component, in logical pixels.
-
-It works similarly to `min-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `overflow`
-
-`overflow` controls how children are measured and displayed. `overflow: hidden` causes views to be clipped while `overflow: scroll` causes views to be measured independently of their parents' main axis. It works like `overflow` in CSS (default: visible).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) for more details.
-
-| Type                                | Required |
-| ----------------------------------- | -------- |
-| enum('visible', 'hidden', 'scroll') | No       |
-
----
-
-### `padding`
-
-Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingBottom`
-
-`paddingBottom` works like `padding-bottom` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingBlock`
-
-Equivalent to [`paddingVertical`](layout-props#paddingvertical).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingBlockEnd`
-
-Equivalent to [`paddingBottom`](layout-props#paddingbottom).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingBlockStart`
-
-Equivalent to [`paddingTop`](layout-props#paddingtop).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingEnd`
-
-When direction is `ltr`, `paddingEnd` is equivalent to `paddingRight`. When direction is `rtl`, `paddingEnd` is equivalent to `paddingLeft`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingHorizontal`
-
-Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRight`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingInline`
-
-Equivalent to [`paddingHorizontal`](layout-props#paddinghorizontal).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingInlineEnd`
-
-When direction is `ltr`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingRight`). When direction is `rtl`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingLeft`).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingInlineStart`
-
-When direction is `ltr`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingLeft`). When direction is `rtl`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingRight`).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingLeft`
-
-`paddingLeft` works like `padding-left` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingRight`
-
-`paddingRight` works like `padding-right` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingStart`
-
-When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`. When direction is `rtl`, `paddingStart` is equivalent to `paddingRight`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingTop`
-
-`paddingTop` works like `padding-top` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingVertical`
-
-Setting `paddingVertical` is like setting both of `paddingTop` and `paddingBottom`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `position`
-
-`position` in React Native is similar to [regular CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/position), but everything is set to `relative` by default.
-
-`relative` will position an element according to the normal flow of the layout. Insets (`top`, `bottom`, `left`, `right`) will offset relative to this layout.
-
-`absolute` takes the element out of the normal flow of the layout. Insets will offset relative to its [containing block](./flexbox.md#the-containing-block).
-
-`static` will position an element according to the normal flow of the layout. Insets will have no effect.
-`static` elements do not form a containing block for absolute descendants.
-
-For more information, see the [Layout with Flexbox docs](./flexbox.md#position). Also, [the Yoga documentation](https://www.yogalayout.dev/docs/styling/position) has more details on how `position` differs between React Native and CSS.
-
-| Type                                   | Required |
-| -------------------------------------- | -------- |
-| enum('absolute', 'relative', 'static') | No       |
-
----
-
-### `right`
-
-`right` is the number of logical pixels to offset the right edge of this component.
-
-It works similarly to `right` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) for more details of how `right` affects layout.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `rowGap`
-
-`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `start`
-
-When the direction is `ltr`, `start` is equivalent to `left`. When the direction is `rtl`, `start` is equivalent to `right`.
-
-This style takes precedence over the `left`, `right`, and `end` styles.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `top`
-
-`top` is the number of logical pixels to offset the top edge of this component.
-
-It works similarly to `top` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/top) for more details of how `top` affects layout.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `width`
-
-`width` sets the width of this component.
-
-It works similarly to `width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/width) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `zIndex`
-
-`zIndex` controls which components display on top of others. Normally, you don't use `zIndex`. Components render according to their order in the document tree, so later components draw over earlier ones. `zIndex` may be useful if you have animations or custom modal interfaces where you don't want this behavior.
-
-It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball.
-
-On iOS, `zIndex` may require `View`s to be siblings of each other for it to work as expected.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
+---
+id: layout-props
+title: Layout Props
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+:::info
+More detailed examples about those properties can be found on the [Layout with Flexbox](flexbox) page.
+:::
+
+### Example
+
+The following example shows how different properties can affect or shape a React Native layout. You can try for example to add or remove squares from the UI while changing the values of the property `flexWrap`.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=LayoutProps%20Example&ext=js
+import {useState} from 'react';
+import {Button, ScrollView, StyleSheet, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [flexDirection, setFlexDirection] = useState(0);
+  const [justifyContent, setJustifyContent] = useState(0);
+  const [alignItems, setAlignItems] = useState(0);
+  const [direction, setDirection] = useState(0);
+  const [wrap, setWrap] = useState(0);
+
+  const [squares, setSquares] = useState([<Square />, <Square />, <Square />]);
+
+  const hookedStyles = {
+    flexDirection: flexDirections[flexDirection],
+    justifyContent: justifyContents[justifyContent],
+    alignItems: alignItemsArr[alignItems],
+    direction: directions[direction],
+    flexWrap: wraps[wrap],
+  };
+
+  const changeSetting = (value, options, setterFunction) => {
+    if (value === options.length - 1) {
+      setterFunction(0);
+      return;
+    }
+    setterFunction(value + 1);
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={[styles.container, styles.playingSpace, hookedStyles]}>
+          {squares.map(elem => elem)}
+        </View>
+        <ScrollView style={styles.layoutContainer}>
+          <View style={styles.controlSpace}>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Flex Direction"
+                onPress={() =>
+                  changeSetting(flexDirection, flexDirections, setFlexDirection)
+                }
+              />
+              <Text style={styles.text}>{flexDirections[flexDirection]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Justify Content"
+                onPress={() =>
+                  changeSetting(
+                    justifyContent,
+                    justifyContents,
+                    setJustifyContent,
+                  )
+                }
+              />
+              <Text style={styles.text}>{justifyContents[justifyContent]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Align Items"
+                onPress={() =>
+                  changeSetting(alignItems, alignItemsArr, setAlignItems)
+                }
+              />
+              <Text style={styles.text}>{alignItemsArr[alignItems]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Direction"
+                onPress={() =>
+                  changeSetting(direction, directions, setDirection)
+                }
+              />
+              <Text style={styles.text}>{directions[direction]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Flex Wrap"
+                onPress={() => changeSetting(wrap, wraps, setWrap)}
+              />
+              <Text style={styles.text}>{wraps[wrap]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Add Square"
+                onPress={() => setSquares([...squares, <Square />])}
+              />
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Delete Square"
+                onPress={() =>
+                  setSquares(squares.filter((v, i) => i !== squares.length - 1))
+                }
+              />
+            </View>
+          </View>
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const flexDirections = ['row', 'row-reverse', 'column', 'column-reverse'];
+const justifyContents = [
+  'flex-start',
+  'flex-end',
+  'center',
+  'space-between',
+  'space-around',
+  'space-evenly',
+];
+const alignItemsArr = [
+  'flex-start',
+  'flex-end',
+  'center',
+  'stretch',
+  'baseline',
+];
+const wraps = ['nowrap', 'wrap', 'wrap-reverse'];
+const directions = ['inherit', 'ltr', 'rtl'];
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  layoutContainer: {
+    flex: 0.5,
+  },
+  playingSpace: {
+    backgroundColor: 'white',
+    borderColor: 'blue',
+    borderWidth: 3,
+    overflow: 'hidden',
+  },
+  controlSpace: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  buttonView: {
+    width: '50%',
+    padding: 10,
+  },
+  text: {
+    textAlign: 'center',
+  },
+});
+
+const Square = () => (
+  <View
+    style={{
+      width: 50,
+      height: 50,
+      backgroundColor: randomHexColor(),
+    }}
+  />
+);
+
+const randomHexColor = () => {
+  return '#000000'.replace(/0/g, () => {
+    return Math.round(Math.random() * 14).toString(16);
+  });
+};
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=LayoutProps%20Example&ext=tsx
+import {useState} from 'react';
+import {
+  Button,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+  FlexAlignType,
+  FlexStyle,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [flexDirection, setFlexDirection] = useState(0);
+  const [justifyContent, setJustifyContent] = useState(0);
+  const [alignItems, setAlignItems] = useState(0);
+  const [direction, setDirection] = useState(0);
+  const [wrap, setWrap] = useState(0);
+
+  const [squares, setSquares] = useState([<Square />, <Square />, <Square />]);
+
+  const hookedStyles = {
+    flexDirection: flexDirections[flexDirection],
+    justifyContent: justifyContents[justifyContent],
+    alignItems: alignItemsArr[alignItems],
+    direction: directions[direction],
+    flexWrap: wraps[wrap],
+  } as FlexStyle;
+
+  const changeSetting = (
+    value: number,
+    options: any[],
+    setterFunction: (index: number) => void,
+  ) => {
+    if (value === options.length - 1) {
+      setterFunction(0);
+      return;
+    }
+    setterFunction(value + 1);
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={[styles.container, styles.playingSpace, hookedStyles]}>
+          {squares.map(elem => elem)}
+        </View>
+        <ScrollView style={styles.layoutContainer}>
+          <View style={styles.controlSpace}>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Flex Direction"
+                onPress={() =>
+                  changeSetting(flexDirection, flexDirections, setFlexDirection)
+                }
+              />
+              <Text style={styles.text}>{flexDirections[flexDirection]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Justify Content"
+                onPress={() =>
+                  changeSetting(
+                    justifyContent,
+                    justifyContents,
+                    setJustifyContent,
+                  )
+                }
+              />
+              <Text style={styles.text}>{justifyContents[justifyContent]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Align Items"
+                onPress={() =>
+                  changeSetting(alignItems, alignItemsArr, setAlignItems)
+                }
+              />
+              <Text style={styles.text}>{alignItemsArr[alignItems]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Direction"
+                onPress={() =>
+                  changeSetting(direction, directions, setDirection)
+                }
+              />
+              <Text style={styles.text}>{directions[direction]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Flex Wrap"
+                onPress={() => changeSetting(wrap, wraps, setWrap)}
+              />
+              <Text style={styles.text}>{wraps[wrap]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Add Square"
+                onPress={() => setSquares([...squares, <Square />])}
+              />
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Delete Square"
+                onPress={() =>
+                  setSquares(squares.filter((v, i) => i !== squares.length - 1))
+                }
+              />
+            </View>
+          </View>
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const flexDirections = [
+  'row',
+  'row-reverse',
+  'column',
+  'column-reverse',
+] as FlexStyle['flexDirection'][];
+const justifyContents = [
+  'flex-start',
+  'flex-end',
+  'center',
+  'space-between',
+  'space-around',
+  'space-evenly',
+] as FlexStyle['justifyContent'][];
+const alignItemsArr = [
+  'flex-start',
+  'flex-end',
+  'center',
+  'stretch',
+  'baseline',
+] as FlexAlignType[];
+const wraps = ['nowrap', 'wrap', 'wrap-reverse'];
+const directions = ['inherit', 'ltr', 'rtl'];
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  layoutContainer: {
+    flex: 0.5,
+  },
+  playingSpace: {
+    backgroundColor: 'white',
+    borderColor: 'blue',
+    borderWidth: 3,
+    overflow: 'hidden',
+  },
+  controlSpace: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  buttonView: {
+    width: '50%',
+    padding: 10,
+  },
+  text: {
+    textAlign: 'center',
+  },
+});
+
+const Square = () => (
+  <View
+    style={{
+      width: 50,
+      height: 50,
+      backgroundColor: randomHexColor(),
+    }}
+  />
+);
+
+const randomHexColor = () => {
+  return '#000000'.replace(/0/g, () => {
+    return Math.round(Math.random() * 14).toString(16);
+  });
+};
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+---
+
+# Reference
+
+## Props
+
+### `alignContent`
+
+`alignContent` controls how rows align in the cross direction, overriding the `alignContent` of the parent.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) for more details.
+
+| Type                                                                                                 | Required |
+| ---------------------------------------------------------------------------------------------------- | -------- |
+| enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around', 'space-evenly') | No       |
+
+---
+
+### `alignItems`
+
+`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS (default: stretch).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) for more details.
+
+| Type                                                            | Required |
+| --------------------------------------------------------------- | -------- |
+| enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline') | No       |
+
+---
+
+### `alignSelf`
+
+`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS (default: auto).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) for more details.
+
+| Type                                                                    | Required |
+| ----------------------------------------------------------------------- | -------- |
+| enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline') | No       |
+
+---
+
+### `aspectRatio`
+
+Aspect ratio controls the size of the undefined dimension of a node.
+
+- On a node with a set width/height, aspect ratio controls the size of the unset dimension
+- On a node with a set flex basis, aspect ratio controls the size of the node in the cross axis if unset
+- On a node with a measure function, aspect ratio works as though the measure function measures the flex basis
+- On a node with flex grow/shrink, aspect ratio controls the size of the node in the cross axis if unset
+- Aspect ratio takes min/max dimensions into account
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `borderBottomWidth`
+
+`borderBottomWidth` works like `border-bottom-width` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderEndWidth`
+
+When direction is `ltr`, `borderEndWidth` is equivalent to `borderRightWidth`. When direction is `rtl`, `borderEndWidth` is equivalent to `borderLeftWidth`.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderLeftWidth`
+
+`borderLeftWidth` works like `border-left-width` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderRightWidth`
+
+`borderRightWidth` works like `border-right-width` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderStartWidth`
+
+When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. When direction is `rtl`, `borderStartWidth` is equivalent to `borderRightWidth`.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderTopWidth`
+
+`borderTopWidth` works like `border-top-width` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderWidth`
+
+`borderWidth` works like `border-width` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `bottom`
+
+`bottom` is the number of logical pixels to offset the bottom edge of this component.
+
+It works similarly to `bottom` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) for more details of how `bottom` affects layout.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `boxSizing`
+
+`boxSizing` defines how the element's various sizing props (`width`, `height`, `minWidth`, `minHeight`, etc.) are computed. If `boxSizing` is `border-box`, these sizes apply to the border box of the element. If it is `content-box`, they apply to the content box of the element. The default value is `border-box`. The [web documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) is a good source of information if you wish to learn more about how this prop works.
+
+| Type                              | Required |
+| --------------------------------- | -------- |
+| enum('border-box', 'content-box') | No       |
+
+---
+
+### `columnGap`
+
+`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `direction`
+
+`direction` specifies the directional flow of the user interface. The default is `inherit`, except for root node which will have value based on the current locale.
+
+See [MDN CSS Reference](https://www.yogalayout.dev/docs/styling/layout-direction) for more details.
+
+| Type                          | Required |
+| ----------------------------- | -------- |
+| enum('inherit', 'ltr', 'rtl') | No       |
+
+---
+
+### `display`
+
+`display` sets the display type of this component.
+
+It works similarly to `display` in CSS but only supports the values 'flex', 'none', and 'contents'. The default is `flex`.
+
+| Type                             | Required |
+| -------------------------------- | -------- |
+| enum('none', 'flex', 'contents') | No       |
+
+---
+
+### `end`
+
+When the direction is `ltr`, `end` is equivalent to `right`. When the direction is `rtl`, `end` is equivalent to `left`.
+
+This style takes precedence over the `left` and `right` styles.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `flex`
+
+In React Native `flex` does not work the same way that it does in CSS. `flex` is a number rather than a string, and it works according to the [Yoga](https://github.com/facebook/yoga) layout engine.
+
+When `flex` is a positive number, it makes the component flexible, and it will be sized proportional to its flex value. So a component with `flex` set to `2` will take twice the space as a component with `flex` set to 1. `flex: <positive number>` equates to `flexGrow: <positive number>, flexShrink: 1, flexBasis: 0`.
+
+When `flex` is `0`, the component is sized according to `width` and `height`, and it is inflexible.
+
+When `flex` is `-1`, the component is normally sized according to `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`.
+
+`flexGrow`, `flexShrink`, and `flexBasis` work the same as in CSS.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `flexBasis`
+
+`flexBasis` is an axis-independent way of providing the default size of an item along the main axis. Setting the `flexBasis` of a child is similar to setting the `width` of that child if its parent is a container with `flexDirection: row` or setting the `height` of a child if its parent is a container with `flexDirection: column`. The `flexBasis` of an item is the default size of that item, the size of the item before any `flexGrow` and `flexShrink` calculations are performed.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `flexDirection`
+
+`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) for more details.
+
+| Type                                                   | Required |
+| ------------------------------------------------------ | -------- |
+| enum('row', 'row-reverse', 'column', 'column-reverse') | No       |
+
+---
+
+### `flexGrow`
+
+`flexGrow` describes how any space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
+
+`flexGrow` accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the children’s `flexGrow` values.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `flexShrink`
+
+[`flexShrink`](layout-props#flexshrink) describes how to shrink children along the main axis in the case in which the total size of the children overflows the size of the container on the main axis. `flexShrink` is very similar to `flexGrow` and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed.
+
+`flexShrink` accepts any floating point value >= 0, with 0 being the default value. A container will shrink its children weighted by the children’s `flexShrink` values.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `flexWrap`
+
+`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS (default: nowrap).
+
+Note it does not work anymore with `alignItems: stretch` (the default), so you may want to use `alignItems: flex-start` for example (breaking change details: https://github.com/facebook/react-native/releases/tag/v0.28.0).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) for more details.
+
+| Type                                   | Required |
+| -------------------------------------- | -------- |
+| enum('wrap', 'nowrap', 'wrap-reverse') | No       |
+
+---
+
+### `gap`
+
+`gap` works like `gap` in CSS. Only pixel units are supported in React Native.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `height`
+
+`height` sets the height of this component.
+
+It works similarly to `height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/height) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `inset`
+
+:::note
+`inset` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Setting `inset` has the same effect as setting each of `top`, `bottom`, `right` and `left` props.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/inset) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetBlock`
+
+:::note
+`insetBlock` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Equivalent to [`top`](layout-props#top) and [`bottom`](layout-props#bottom).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetBlockEnd`
+
+:::note
+`insetBlockEnd` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Equivalent to [`bottom`](layout-props#bottom).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetBlockStart`
+
+:::note
+`insetBlockStart` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Equivalent to [`top`](layout-props#top).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetInline`
+
+:::note
+`insetInline` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Equivalent to [`right`](layout-props#right) and [`left`](layout-props#left).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetInlineEnd`
+
+:::note
+`insetInlineEnd` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+When direction is `ltr`, `insetInlineEnd` is equivalent to [`right`](layout-props#right). When direction is `rtl`, `insetInlineEnd` is equivalent to [`left`](layout-props#left).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetInlineStart`
+
+:::note
+`insetInlineStart` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+When direction is `ltr`, `insetInlineStart` is equivalent to [`left`](layout-props#left). When direction is `rtl`, `insetInlineStart` is equivalent to [`right`](layout-props#right).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `isolation`
+
+:::note
+`isolation` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+`isolation` lets you form a [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context).
+
+There are two values:
+
+- `auto` (default): Does nothing.
+- `isolate`: Forms a stacking context.
+
+| Type                    | Required |
+| ----------------------- | -------- |
+| enum('auto', 'isolate') | No       |
+
+---
+
+### `justifyContent`
+
+`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS (default: flex-start).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) for more details.
+
+| Type                                                                                      | Required |
+| ----------------------------------------------------------------------------------------- | -------- |
+| enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly') | No       |
+
+---
+
+### `left`
+
+`left` is the number of logical pixels to offset the left edge of this component.
+
+It works similarly to `left` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/left) for more details of how `left` affects layout.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `margin`
+
+Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginBottom`
+
+`marginBottom` works like `margin-bottom` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginBlock`
+
+Equivalent to [`marginVertical`](layout-props#marginvertical).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginBlockEnd`
+
+Equivalent to [`marginBottom`](layout-props#marginbottom).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginBlockStart`
+
+Equivalent to [`marginTop`](layout-props#margintop).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginEnd`
+
+When direction is `ltr`, `marginEnd` is equivalent to `marginRight`. When direction is `rtl`, `marginEnd` is equivalent to `marginLeft`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginHorizontal`
+
+Setting `marginHorizontal` has the same effect as setting both `marginLeft` and `marginRight`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginInline`
+
+Equivalent to [`marginHorizontal`](layout-props#marginhorizontal).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginInlineEnd`
+
+When direction is `ltr`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginRight`). When direction is `rtl`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginLeft`).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginInlineStart`
+
+When direction is `ltr`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginLeft`). When direction is `rtl`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginRight`).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginLeft`
+
+`marginLeft` works like `margin-left` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginRight`
+
+`marginRight` works like `margin-right` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginStart`
+
+When direction is `ltr`, `marginStart` is equivalent to `marginLeft`. When direction is `rtl`, `marginStart` is equivalent to `marginRight`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginTop`
+
+`marginTop` works like `margin-top` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginVertical`
+
+Setting `marginVertical` has the same effect as setting both `marginTop` and `marginBottom`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `maxHeight`
+
+`maxHeight` is the maximum height for this component, in logical pixels.
+
+It works similarly to `max-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `maxWidth`
+
+`maxWidth` is the maximum width for this component, in logical pixels.
+
+It works similarly to `max-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `minHeight`
+
+`minHeight` is the minimum height for this component, in logical pixels.
+
+It works similarly to `min-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `minWidth`
+
+`minWidth` is the minimum width for this component, in logical pixels.
+
+It works similarly to `min-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `overflow`
+
+`overflow` controls how children are measured and displayed. `overflow: hidden` causes views to be clipped while `overflow: scroll` causes views to be measured independently of their parents' main axis. It works like `overflow` in CSS (default: visible).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) for more details.
+
+| Type                                | Required |
+| ----------------------------------- | -------- |
+| enum('visible', 'hidden', 'scroll') | No       |
+
+---
+
+### `padding`
+
+Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingBottom`
+
+`paddingBottom` works like `padding-bottom` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingBlock`
+
+Equivalent to [`paddingVertical`](layout-props#paddingvertical).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingBlockEnd`
+
+Equivalent to [`paddingBottom`](layout-props#paddingbottom).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingBlockStart`
+
+Equivalent to [`paddingTop`](layout-props#paddingtop).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingEnd`
+
+When direction is `ltr`, `paddingEnd` is equivalent to `paddingRight`. When direction is `rtl`, `paddingEnd` is equivalent to `paddingLeft`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingHorizontal`
+
+Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRight`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingInline`
+
+Equivalent to [`paddingHorizontal`](layout-props#paddinghorizontal).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingInlineEnd`
+
+When direction is `ltr`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingRight`). When direction is `rtl`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingLeft`).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingInlineStart`
+
+When direction is `ltr`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingLeft`). When direction is `rtl`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingRight`).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingLeft`
+
+`paddingLeft` works like `padding-left` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingRight`
+
+`paddingRight` works like `padding-right` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingStart`
+
+When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`. When direction is `rtl`, `paddingStart` is equivalent to `paddingRight`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingTop`
+
+`paddingTop` works like `padding-top` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingVertical`
+
+Setting `paddingVertical` is like setting both of `paddingTop` and `paddingBottom`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `position`
+
+`position` in React Native is similar to [regular CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/position), but everything is set to `relative` by default.
+
+`relative` will position an element according to the normal flow of the layout. Insets (`top`, `bottom`, `left`, `right`) will offset relative to this layout.
+
+`absolute` takes the element out of the normal flow of the layout. Insets will offset relative to its [containing block](./flexbox.md#the-containing-block).
+
+`static` will position an element according to the normal flow of the layout. Insets will have no effect.
+`static` elements do not form a containing block for absolute descendants.
+
+For more information, see the [Layout with Flexbox docs](./flexbox.md#position). Also, [the Yoga documentation](https://www.yogalayout.dev/docs/styling/position) has more details on how `position` differs between React Native and CSS.
+
+| Type                                   | Required |
+| -------------------------------------- | -------- |
+| enum('absolute', 'relative', 'static') | No       |
+
+---
+
+### `right`
+
+`right` is the number of logical pixels to offset the right edge of this component.
+
+It works similarly to `right` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) for more details of how `right` affects layout.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `rowGap`
+
+`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `start`
+
+When the direction is `ltr`, `start` is equivalent to `left`. When the direction is `rtl`, `start` is equivalent to `right`.
+
+This style takes precedence over the `left`, `right`, and `end` styles.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `top`
+
+`top` is the number of logical pixels to offset the top edge of this component.
+
+It works similarly to `top` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/top) for more details of how `top` affects layout.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `width`
+
+`width` sets the width of this component.
+
+It works similarly to `width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/width) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `zIndex`
+
+`zIndex` controls which components display on top of others. Normally, you don't use `zIndex`. Components render according to their order in the document tree, so later components draw over earlier ones. `zIndex` may be useful if you have animations or custom modal interfaces where you don't want this behavior.
+
+It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball.
+
+On iOS, `zIndex` may require `View`s to be siblings of each other for it to work as expected.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
diff --git a/website/versioned_docs/version-0.83/layoutanimation.md b/website/versioned_docs/version-0.83/layoutanimation.md
index 911a247c8c7..24a7d060d1e 100644
--- a/website/versioned_docs/version-0.83/layoutanimation.md
+++ b/website/versioned_docs/version-0.83/layoutanimation.md
@@ -1,358 +1,358 @@
----
-id: layoutanimation
-title: LayoutAnimation
----
-
-Automatically animates views to their new positions when the next layout happens.
-
-A common way to use this API is to call it before updating the state hook in functional components and calling `setState` in class components.
-
-Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`:
-
-```js
-if (Platform.OS === 'android') {
-  if (UIManager.setLayoutAnimationEnabledExperimental) {
-    UIManager.setLayoutAnimationEnabledExperimental(true);
-  }
-}
-```
-
-## Example
-
-```SnackPlayer name=LayoutAnimation%20Example&supportedPlatforms=android,ios
-import React, {useState} from 'react';
-import {
-  LayoutAnimation,
-  Platform,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  UIManager,
-  View,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-if (
-  Platform.OS === 'android' &&
-  UIManager.setLayoutAnimationEnabledExperimental
-) {
-  UIManager.setLayoutAnimationEnabledExperimental(true);
-}
-const App = () => {
-  const [expanded, setExpanded] = useState(false);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={style.container}>
-        <TouchableOpacity
-          onPress={() => {
-            LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
-            setExpanded(!expanded);
-          }}>
-          <Text>Press me to {expanded ? 'collapse' : 'expand'}!</Text>
-        </TouchableOpacity>
-        {expanded && (
-          <View style={style.tile}>
-            <Text>I disappear sometimes!</Text>
-          </View>
-        )}
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const style = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    gap: 16,
-  },
-  tile: {
-    backgroundColor: 'lightgrey',
-    borderWidth: 0.5,
-    borderColor: '#d6d7da',
-    padding: 4,
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Methods
-
-### `configureNext()`
-
-```tsx
-static configureNext(
-  config: LayoutAnimationConfig,
-  onAnimationDidEnd?: () => void,
-  onAnimationDidFail?: () => void,
-);
-```
-
-Schedules an animation to happen on the next layout.
-
-#### Parameters:
-
-| Name               | Type     | Required | Description                         |
-| ------------------ | -------- | -------- | ----------------------------------- |
-| config             | object   | Yes      | See config description below.       |
-| onAnimationDidEnd  | function | No       | Called when the animation finished. |
-| onAnimationDidFail | function | No       | Called when the animation failed.   |
-
-The `config` parameter is an object with the keys below. [`create`](layoutanimation.md#create) returns a valid object for `config`, and the [`Presets`](layoutanimation.md#presets) objects can also all be passed as the `config`.
-
-- `duration` in milliseconds
-- `create`, optional config for animating in new views
-- `update`, optional config for animating views that have been updated
-- `delete`, optional config for animating views as they are removed
-
-The config that's passed to `create`, `update`, or `delete` has the following keys:
-
-- `type`, the [animation type](layoutanimation.md#types) to use
-- `property`, the [layout property](layoutanimation.md#properties) to animate (optional, but recommended for `create` and `delete`)
-- `springDamping` (number, optional and only for use with `type: Type.spring`)
-- `initialVelocity` (number, optional)
-- `delay` (number, optional)
-- `duration` (number, optional)
-
----
-
-### `create()`
-
-```tsx
-static create(duration, type, creationProp)
-```
-
-Helper that creates an object (with `create`, `update`, and `delete` fields) to pass into [`configureNext`](layoutanimation.md#configurenext). The `type` parameter is an [animation type](layoutanimation.md#types), and the `creationProp` parameter is a [layout property](layoutanimation.md#properties).
-
-**Example:**
-
-```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios
-import React, {useState} from 'react';
-import {
-  View,
-  Platform,
-  UIManager,
-  LayoutAnimation,
-  StyleSheet,
-  Button,
-} from 'react-native';
-
-if (
-  Platform.OS === 'android' &&
-  UIManager.setLayoutAnimationEnabledExperimental
-) {
-  UIManager.setLayoutAnimationEnabledExperimental(true);
-}
-
-const App = () => {
-  const [boxPosition, setBoxPosition] = useState('left');
-
-  const toggleBox = () => {
-    LayoutAnimation.configureNext({
-      duration: 500,
-      create: {type: 'linear', property: 'opacity'},
-      update: {type: 'spring', springDamping: 0.4},
-      delete: {type: 'linear', property: 'opacity'},
-    });
-    setBoxPosition(boxPosition === 'left' ? 'right' : 'left');
-  };
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.buttonContainer}>
-        <Button title="Toggle Layout" onPress={toggleBox} />
-      </View>
-      <View
-        style={[styles.box, boxPosition === 'left' ? null : styles.moveRight]}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'flex-start',
-    justifyContent: 'center',
-  },
-  box: {
-    height: 100,
-    width: 100,
-    borderRadius: 5,
-    margin: 8,
-    backgroundColor: 'blue',
-  },
-  moveRight: {
-    alignSelf: 'flex-end',
-    height: 200,
-    width: 200,
-  },
-  buttonContainer: {
-    alignSelf: 'center',
-  },
-});
-
-export default App;
-```
-
-## Properties
-
-### Types
-
-An enumeration of animation types to be used in the [`create`](layoutanimation.md#create) method, or in the `create`/`update`/`delete` configs for [`configureNext`](layoutanimation.md#configurenext). (example usage: `LayoutAnimation.Types.easeIn`)
-
-| Types         |
-| ------------- |
-| spring        |
-| linear        |
-| easeInEaseOut |
-| easeIn        |
-| easeOut       |
-| keyboard      |
-
----
-
-### Properties
-
-An enumeration of layout properties to be animated to be used in the [`create`](layoutanimation.md#create) method, or in the `create`/`update`/`delete` configs for [`configureNext`](layoutanimation.md#configurenext). (example usage: `LayoutAnimation.Properties.opacity`)
-
-| Properties |
-| ---------- |
-| opacity    |
-| scaleX     |
-| scaleY     |
-| scaleXY    |
-
----
-
-### Presets
-
-A set of predefined animation configs to pass into [`configureNext`](layoutanimation.md#configurenext).
-
-| Presets       | Value                                                                                                                                                          |
-| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| easeInEaseOut | `create(300, 'easeInEaseOut', 'opacity')`                                                                                                                      |
-| linear        | `create(500, 'linear', 'opacity')`                                                                                                                             |
-| spring        | `{duration: 700, create: {type: 'linear', property: 'opacity'}, update: {type: 'spring', springDamping: 0.4}, delete: {type: 'linear', property: 'opacity'} }` |
-
----
-
-### `easeInEaseOut`
-
-Calls `configureNext()` with `Presets.easeInEaseOut`.
-
----
-
-### `linear`
-
-Calls `configureNext()` with `Presets.linear`.
-
----
-
-### `spring`
-
-Calls `configureNext()` with `Presets.spring`.
-
-**Example:**
-
-```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios
-import React, {useState} from 'react';
-import {
-  View,
-  Platform,
-  UIManager,
-  LayoutAnimation,
-  StyleSheet,
-  Button,
-} from 'react-native';
-
-if (
-  Platform.OS === 'android' &&
-  UIManager.setLayoutAnimationEnabledExperimental
-) {
-  UIManager.setLayoutAnimationEnabledExperimental(true);
-}
-
-const App = () => {
-  const [firstBoxPosition, setFirstBoxPosition] = useState('left');
-  const [secondBoxPosition, setSecondBoxPosition] = useState('left');
-  const [thirdBoxPosition, setThirdBoxPosition] = useState('left');
-
-  const toggleFirstBox = () => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-    setFirstBoxPosition(firstBoxPosition === 'left' ? 'right' : 'left');
-  };
-
-  const toggleSecondBox = () => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
-    setSecondBoxPosition(secondBoxPosition === 'left' ? 'right' : 'left');
-  };
-
-  const toggleThirdBox = () => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
-    setThirdBoxPosition(thirdBoxPosition === 'left' ? 'right' : 'left');
-  };
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.buttonContainer}>
-        <Button title="EaseInEaseOut" onPress={toggleFirstBox} />
-      </View>
-      <View
-        style={[
-          styles.box,
-          firstBoxPosition === 'left' ? null : styles.moveRight,
-        ]}
-      />
-      <View style={styles.buttonContainer}>
-        <Button title="Linear" onPress={toggleSecondBox} />
-      </View>
-      <View
-        style={[
-          styles.box,
-          secondBoxPosition === 'left' ? null : styles.moveRight,
-        ]}
-      />
-      <View style={styles.buttonContainer}>
-        <Button title="Spring" onPress={toggleThirdBox} />
-      </View>
-      <View
-        style={[
-          styles.box,
-          thirdBoxPosition === 'left' ? null : styles.moveRight,
-        ]}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'flex-start',
-    justifyContent: 'center',
-  },
-  box: {
-    height: 100,
-    width: 100,
-    borderRadius: 5,
-    margin: 8,
-    backgroundColor: 'blue',
-  },
-  moveRight: {
-    alignSelf: 'flex-end',
-  },
-  buttonContainer: {
-    alignSelf: 'center',
-  },
-});
-
-export default App;
-```
+---
+id: layoutanimation
+title: LayoutAnimation
+---
+
+Automatically animates views to their new positions when the next layout happens.
+
+A common way to use this API is to call it before updating the state hook in functional components and calling `setState` in class components.
+
+Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`:
+
+```js
+if (Platform.OS === 'android') {
+  if (UIManager.setLayoutAnimationEnabledExperimental) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+  }
+}
+```
+
+## Example
+
+```SnackPlayer name=LayoutAnimation%20Example&supportedPlatforms=android,ios
+import {useState} from 'react';
+import {
+  LayoutAnimation,
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  UIManager,
+  View,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+if (
+  Platform.OS === 'android' &&
+  UIManager.setLayoutAnimationEnabledExperimental
+) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+const App = () => {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={style.container}>
+        <TouchableOpacity
+          onPress={() => {
+            LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
+            setExpanded(!expanded);
+          }}>
+          <Text>Press me to {expanded ? 'collapse' : 'expand'}!</Text>
+        </TouchableOpacity>
+        {expanded && (
+          <View style={style.tile}>
+            <Text>I disappear sometimes!</Text>
+          </View>
+        )}
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const style = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 16,
+  },
+  tile: {
+    backgroundColor: 'lightgrey',
+    borderWidth: 0.5,
+    borderColor: '#d6d7da',
+    padding: 4,
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `configureNext()`
+
+```tsx
+static configureNext(
+  config: LayoutAnimationConfig,
+  onAnimationDidEnd?: () => void,
+  onAnimationDidFail?: () => void,
+);
+```
+
+Schedules an animation to happen on the next layout.
+
+#### Parameters:
+
+| Name               | Type     | Required | Description                         |
+| ------------------ | -------- | -------- | ----------------------------------- |
+| config             | object   | Yes      | See config description below.       |
+| onAnimationDidEnd  | function | No       | Called when the animation finished. |
+| onAnimationDidFail | function | No       | Called when the animation failed.   |
+
+The `config` parameter is an object with the keys below. [`create`](layoutanimation.md#create) returns a valid object for `config`, and the [`Presets`](layoutanimation.md#presets) objects can also all be passed as the `config`.
+
+- `duration` in milliseconds
+- `create`, optional config for animating in new views
+- `update`, optional config for animating views that have been updated
+- `delete`, optional config for animating views as they are removed
+
+The config that's passed to `create`, `update`, or `delete` has the following keys:
+
+- `type`, the [animation type](layoutanimation.md#types) to use
+- `property`, the [layout property](layoutanimation.md#properties) to animate (optional, but recommended for `create` and `delete`)
+- `springDamping` (number, optional and only for use with `type: Type.spring`)
+- `initialVelocity` (number, optional)
+- `delay` (number, optional)
+- `duration` (number, optional)
+
+---
+
+### `create()`
+
+```tsx
+static create(duration, type, creationProp)
+```
+
+Helper that creates an object (with `create`, `update`, and `delete` fields) to pass into [`configureNext`](layoutanimation.md#configurenext). The `type` parameter is an [animation type](layoutanimation.md#types), and the `creationProp` parameter is a [layout property](layoutanimation.md#properties).
+
+**Example:**
+
+```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios
+import {useState} from 'react';
+import {
+  View,
+  Platform,
+  UIManager,
+  LayoutAnimation,
+  StyleSheet,
+  Button,
+} from 'react-native';
+
+if (
+  Platform.OS === 'android' &&
+  UIManager.setLayoutAnimationEnabledExperimental
+) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+const App = () => {
+  const [boxPosition, setBoxPosition] = useState('left');
+
+  const toggleBox = () => {
+    LayoutAnimation.configureNext({
+      duration: 500,
+      create: {type: 'linear', property: 'opacity'},
+      update: {type: 'spring', springDamping: 0.4},
+      delete: {type: 'linear', property: 'opacity'},
+    });
+    setBoxPosition(boxPosition === 'left' ? 'right' : 'left');
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.buttonContainer}>
+        <Button title="Toggle Layout" onPress={toggleBox} />
+      </View>
+      <View
+        style={[styles.box, boxPosition === 'left' ? null : styles.moveRight]}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+  },
+  box: {
+    height: 100,
+    width: 100,
+    borderRadius: 5,
+    margin: 8,
+    backgroundColor: 'blue',
+  },
+  moveRight: {
+    alignSelf: 'flex-end',
+    height: 200,
+    width: 200,
+  },
+  buttonContainer: {
+    alignSelf: 'center',
+  },
+});
+
+export default App;
+```
+
+## Properties
+
+### Types
+
+An enumeration of animation types to be used in the [`create`](layoutanimation.md#create) method, or in the `create`/`update`/`delete` configs for [`configureNext`](layoutanimation.md#configurenext). (example usage: `LayoutAnimation.Types.easeIn`)
+
+| Types         |
+| ------------- |
+| spring        |
+| linear        |
+| easeInEaseOut |
+| easeIn        |
+| easeOut       |
+| keyboard      |
+
+---
+
+### Properties
+
+An enumeration of layout properties to be animated to be used in the [`create`](layoutanimation.md#create) method, or in the `create`/`update`/`delete` configs for [`configureNext`](layoutanimation.md#configurenext). (example usage: `LayoutAnimation.Properties.opacity`)
+
+| Properties |
+| ---------- |
+| opacity    |
+| scaleX     |
+| scaleY     |
+| scaleXY    |
+
+---
+
+### Presets
+
+A set of predefined animation configs to pass into [`configureNext`](layoutanimation.md#configurenext).
+
+| Presets       | Value                                                                                                                                                          |
+| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| easeInEaseOut | `create(300, 'easeInEaseOut', 'opacity')`                                                                                                                      |
+| linear        | `create(500, 'linear', 'opacity')`                                                                                                                             |
+| spring        | `{duration: 700, create: {type: 'linear', property: 'opacity'}, update: {type: 'spring', springDamping: 0.4}, delete: {type: 'linear', property: 'opacity'} }` |
+
+---
+
+### `easeInEaseOut`
+
+Calls `configureNext()` with `Presets.easeInEaseOut`.
+
+---
+
+### `linear`
+
+Calls `configureNext()` with `Presets.linear`.
+
+---
+
+### `spring`
+
+Calls `configureNext()` with `Presets.spring`.
+
+**Example:**
+
+```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios
+import {useState} from 'react';
+import {
+  View,
+  Platform,
+  UIManager,
+  LayoutAnimation,
+  StyleSheet,
+  Button,
+} from 'react-native';
+
+if (
+  Platform.OS === 'android' &&
+  UIManager.setLayoutAnimationEnabledExperimental
+) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+const App = () => {
+  const [firstBoxPosition, setFirstBoxPosition] = useState('left');
+  const [secondBoxPosition, setSecondBoxPosition] = useState('left');
+  const [thirdBoxPosition, setThirdBoxPosition] = useState('left');
+
+  const toggleFirstBox = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setFirstBoxPosition(firstBoxPosition === 'left' ? 'right' : 'left');
+  };
+
+  const toggleSecondBox = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
+    setSecondBoxPosition(secondBoxPosition === 'left' ? 'right' : 'left');
+  };
+
+  const toggleThirdBox = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
+    setThirdBoxPosition(thirdBoxPosition === 'left' ? 'right' : 'left');
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.buttonContainer}>
+        <Button title="EaseInEaseOut" onPress={toggleFirstBox} />
+      </View>
+      <View
+        style={[
+          styles.box,
+          firstBoxPosition === 'left' ? null : styles.moveRight,
+        ]}
+      />
+      <View style={styles.buttonContainer}>
+        <Button title="Linear" onPress={toggleSecondBox} />
+      </View>
+      <View
+        style={[
+          styles.box,
+          secondBoxPosition === 'left' ? null : styles.moveRight,
+        ]}
+      />
+      <View style={styles.buttonContainer}>
+        <Button title="Spring" onPress={toggleThirdBox} />
+      </View>
+      <View
+        style={[
+          styles.box,
+          thirdBoxPosition === 'left' ? null : styles.moveRight,
+        ]}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+  },
+  box: {
+    height: 100,
+    width: 100,
+    borderRadius: 5,
+    margin: 8,
+    backgroundColor: 'blue',
+  },
+  moveRight: {
+    alignSelf: 'flex-end',
+  },
+  buttonContainer: {
+    alignSelf: 'center',
+  },
+});
+
+export default App;
+```
diff --git a/website/versioned_docs/version-0.83/legacy/direct-manipulation.md b/website/versioned_docs/version-0.83/legacy/direct-manipulation.md
index b3e7e063414..9ba739abb15 100644
--- a/website/versioned_docs/version-0.83/legacy/direct-manipulation.md
+++ b/website/versioned_docs/version-0.83/legacy/direct-manipulation.md
@@ -1,444 +1,440 @@
----
-id: direct-manipulation
-title: Direct Manipulation
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-It is sometimes necessary to make changes directly to a component without using state/props to trigger a re-render of the entire subtree. When using React in the browser for example, you sometimes need to directly modify a DOM node, and the same is true for views in mobile apps. `setNativeProps` is the React Native equivalent to setting properties directly on a DOM node.
-
-:::caution
-Use `setNativeProps` when frequent re-rendering creates a performance bottleneck!
-
-Direct manipulation will not be a tool that you reach for frequently. You will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views.
-`setNativeProps` is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about.
-
-Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate).
-:::
-
-## setNativeProps with TouchableOpacity
-
-[TouchableOpacity](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js) uses `setNativeProps` internally to update the opacity of its child component:
-
-```tsx
-const viewRef = useRef<View>();
-const setOpacityTo = useCallback(value => {
-  // Redacted: animation related code
-  viewRef.current.setNativeProps({
-    opacity: value,
-  });
-}, []);
-```
-
-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:
-
-```tsx
-<TouchableOpacity onPress={handlePress}>
-  <View>
-    <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:
-
-```tsx
-const [buttonOpacity, setButtonOpacity] = useState(1);
-return (
-  <TouchableOpacity
-    onPressIn={() => setButtonOpacity(0.5)}
-    onPressOut={() => setButtonOpacity(1)}>
-    <View style={{opacity: buttonOpacity}}>
-      <Text>Press me!</Text>
-    </View>
-  </TouchableOpacity>
-);
-```
-
-This is computationally intensive compared to the original example - React needs to re-render the component hierarchy each time the opacity changes, even though other properties of the view and its children haven't changed. Usually this overhead isn't a concern but when performing continuous animations and responding to gestures, judiciously optimizing your components can improve your animations' fidelity.
-
-If you look at the implementation of `setNativeProps` in [NativeMethodsMixin](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js) you will notice that it is a wrapper around `RCTUIManager.updateView` - this is the exact same function call that results from re-rendering - see [receiveComponent in ReactNativeBaseComponent](https://github.com/facebook/react-native/blob/fb2ec1ea47c53c2e7b873acb1cb46192ac74274e/Libraries/Renderer/oss/ReactNativeRenderer-prod.js#L5793-L5813).
-
-## Composite components and setNativeProps
-
-Composite components are not backed by a native view, so you cannot call `setNativeProps` on them. Consider this example:
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=setNativeProps%20with%20Composite%20Components&ext=js
-import React from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
-
-const MyButton = props => (
-  <View style={{marginTop: 50}}>
-    <Text>{props.label}</Text>
-  </View>
-);
-
-const App = () => (
-  <TouchableOpacity>
-    <MyButton label="Press me!" />
-  </TouchableOpacity>
-);
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=setNativeProps%20with%20Composite%20Components&ext=tsx
-import React from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
-
-const MyButton = (props: {label: string}) => (
-  <View style={{marginTop: 50}}>
-    <Text>{props.label}</Text>
-  </View>
-);
-
-const App = () => (
-  <TouchableOpacity>
-    <MyButton label="Press me!" />
-  </TouchableOpacity>
-);
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-If you run this you will immediately see this error: `Touchable child must either be native or forward setNativeProps to a native component`. This occurs because `MyButton` isn't directly backed by a native view whose opacity should be set. You can think about it like this: if you define a component with `createReactClass` you would not expect to be able to set a style prop on it and have that work - you would need to pass the style prop down to a child, unless you are wrapping a native component. Similarly, we are going to forward `setNativeProps` to a native-backed child component.
-
-#### Forward setNativeProps to a child
-
-Since the `setNativeProps` method exists on any ref to a `View` component, it is enough to forward a ref on your custom component to one of the `<View />` components that it renders. This means that a call to `setNativeProps` on the custom component will have the same effect as if you called `setNativeProps` on the wrapped `View` component itself.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Forwarding%20setNativeProps&ext=js
-import React from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
-
-const MyButton = React.forwardRef((props, ref) => (
-  <View {...props} ref={ref} style={{marginTop: 50}}>
-    <Text>{props.label}</Text>
-  </View>
-));
-
-const App = () => (
-  <TouchableOpacity>
-    <MyButton label="Press me!" />
-  </TouchableOpacity>
-);
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Forwarding%20setNativeProps&ext=tsx
-import React from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
-
-const MyButton = React.forwardRef<View, {label: string}>((props, ref) => (
-  <View {...props} ref={ref} style={{marginTop: 50}}>
-    <Text>{props.label}</Text>
-  </View>
-));
-
-const App = () => (
-  <TouchableOpacity>
-    <MyButton label="Press me!" />
-  </TouchableOpacity>
-);
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-You can now use `MyButton` inside of `TouchableOpacity`!
-
-You may have noticed that we passed all of the props down to the child view using `{...props}`. The reason for this is that `TouchableOpacity` is actually a composite component, and so in addition to depending on `setNativeProps` on its child, it also requires that the child perform touch handling. To do this, it passes on [various props](view.md#onmoveshouldsetresponder) that call back to the `TouchableOpacity` component. `TouchableHighlight`, in contrast, is backed by a native view and only requires that we implement `setNativeProps`.
-
-## setNativeProps to edit TextInput value
-
-Another very common use case of `setNativeProps` is to edit the value of the TextInput. The `controlled` prop of TextInput can sometimes drop characters when the `bufferDelay` is low and the user types very quickly. Some developers prefer to skip this prop entirely and instead use `setNativeProps` to directly manipulate the TextInput value when necessary. For example, the following code demonstrates editing the input when you tap a button:
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Clear%20text&ext=js
-import React from 'react';
-import {useCallback, useRef} from 'react';
-import {
-  StyleSheet,
-  TextInput,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-
-const App = () => {
-  const inputRef = useRef(null);
-  const editText = useCallback(() => {
-    inputRef.current.setNativeProps({text: 'Edited Text'});
-  }, []);
-
-  return (
-    <View style={styles.container}>
-      <TextInput ref={inputRef} style={styles.input} />
-      <TouchableOpacity onPress={editText}>
-        <Text>Edit text</Text>
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  input: {
-    height: 50,
-    width: 200,
-    marginHorizontal: 20,
-    borderWidth: 1,
-    borderColor: '#ccc',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Clear%20text&ext=tsx
-import React from 'react';
-import {useCallback, useRef} from 'react';
-import {
-  StyleSheet,
-  TextInput,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-
-const App = () => {
-  const inputRef = useRef<TextInput>(null);
-  const editText = useCallback(() => {
-    inputRef.current?.setNativeProps({text: 'Edited Text'});
-  }, []);
-
-  return (
-    <View style={styles.container}>
-      <TextInput ref={inputRef} style={styles.input} />
-      <TouchableOpacity onPress={editText}>
-        <Text>Edit text</Text>
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  input: {
-    height: 50,
-    width: 200,
-    marginHorizontal: 20,
-    borderWidth: 1,
-    borderColor: '#ccc',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-You can use the [`clear`](../textinput#clear) method to clear the `TextInput` which clears the current input text using the same approach.
-
-## Avoiding conflicts with the render function
-
-If you update a property that is also managed by the render function, you might end up with some unpredictable and confusing bugs because anytime the component re-renders and that property changes, whatever value was previously set from `setNativeProps` will be completely ignored and overridden.
-
-## setNativeProps & shouldComponentUpdate
-
-By [intelligently applying `shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`.
-
-## Other native methods
-
-The methods described here are available on most of the default components provided by React Native. Note, however, that they are _not_ available on composite components that aren't directly backed by a native view. This will generally include most components that you define in your own app.
-
-### measure(callback)
-
-Determines the location on screen, width, and height in the viewport of the given view and returns the values via an async callback. If successful, the callback will be called with the following arguments:
-
-- x
-- y
-- width
-- height
-- pageX
-- pageY
-
-Note that these measurements are not available until after the rendering has been completed in native. If you need the measurements as soon as possible and you don't need `pageX` and `pageY`, consider using the [`onLayout`](view.md#onlayout) property instead.
-
-Also the width and height returned by `measure()` are the width and height of the component in the viewport. If you need the actual size of the component, consider using the [`onLayout`](view.md#onlayout) property instead.
-
-### measureInWindow(callback)
-
-Determines the location of the given view in the window and returns the values via an async callback. If the React root view is embedded in another native view, this will give you the absolute coordinates. If successful, the callback will be called with the following arguments:
-
-- x
-- y
-- width
-- height
-
-### measureLayout(relativeToNativeComponentRef, onSuccess, onFail)
-
-Like `measure()`, but measures the view relative to an ancestor, specified with `relativeToNativeComponentRef` reference. This means that the returned coordinates are relative to the origin `x`, `y` of the ancestor view.
-
-:::note
-This method can also be called with a `relativeToNativeNode` handler (instead of reference), but this variant is obsolete with the new architecture.
-:::
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=measureLayout%20example&supportedPlatforms=android,ios&ext=js
-import React, {useEffect, useRef, useState} from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-
-const App = () => {
-  const textContainerRef = useRef(null);
-  const textRef = useRef(null);
-  const [measure, setMeasure] = useState(null);
-
-  useEffect(() => {
-    if (textRef.current && textContainerRef.current) {
-      textRef.current.measureLayout(
-        textContainerRef.current,
-        (left, top, width, height) => {
-          setMeasure({left, top, width, height});
-        },
-      );
-    }
-  }, [measure]);
-
-  return (
-    <View style={styles.container}>
-      <View ref={textContainerRef} style={styles.textContainer}>
-        <Text ref={textRef}>Where am I? (relative to the text container)</Text>
-      </View>
-      <Text style={styles.measure}>{JSON.stringify(measure)}</Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  textContainer: {
-    backgroundColor: '#61dafb',
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 12,
-  },
-  measure: {
-    textAlign: 'center',
-    padding: 12,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=measureLayout%20example&ext=tsx
-import React, {useEffect, useRef, useState} from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-
-type Measurements = {
-  left: number;
-  top: number;
-  width: number;
-  height: number;
-};
-
-const App = () => {
-  const textContainerRef = useRef<View>(null);
-  const textRef = useRef<Text>(null);
-  const [measure, setMeasure] = useState<Measurements | null>(null);
-
-  useEffect(() => {
-    if (textRef.current && textContainerRef.current) {
-      textRef.current?.measureLayout(
-        textContainerRef.current,
-        (left, top, width, height) => {
-          setMeasure({left, top, width, height});
-        },
-        () => {
-          console.error('measurement failed');
-        },
-      );
-    }
-  }, [measure]);
-
-  return (
-    <View style={styles.container}>
-      <View ref={textContainerRef} style={styles.textContainer}>
-        <Text ref={textRef}>Where am I? (relative to the text container)</Text>
-      </View>
-      <Text style={styles.measure}>{JSON.stringify(measure)}</Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  textContainer: {
-    backgroundColor: '#61dafb',
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 12,
-  },
-  measure: {
-    textAlign: 'center',
-    padding: 12,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### focus()
-
-Requests focus for the given input or view. The exact behavior triggered will depend on the platform and type of view.
-
-### blur()
-
-Removes focus from an input or view. This is the opposite of `focus()`.
+---
+id: direct-manipulation
+title: Direct Manipulation
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+It is sometimes necessary to make changes directly to a component without using state/props to trigger a re-render of the entire subtree. When using React in the browser for example, you sometimes need to directly modify a DOM node, and the same is true for views in mobile apps. `setNativeProps` is the React Native equivalent to setting properties directly on a DOM node.
+
+:::caution
+Use `setNativeProps` when frequent re-rendering creates a performance bottleneck!
+
+Direct manipulation will not be a tool that you reach for frequently. You will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views.
+`setNativeProps` is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about.
+
+Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate).
+:::
+
+## setNativeProps with TouchableOpacity
+
+[TouchableOpacity](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js) uses `setNativeProps` internally to update the opacity of its child component:
+
+```tsx
+const viewRef = useRef<View>();
+const setOpacityTo = useCallback(value => {
+  // Redacted: animation related code
+  viewRef.current.setNativeProps({
+    opacity: value,
+  });
+}, []);
+```
+
+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:
+
+```tsx
+<TouchableOpacity onPress={handlePress}>
+  <View>
+    <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:
+
+```tsx
+const [buttonOpacity, setButtonOpacity] = useState(1);
+return (
+  <TouchableOpacity
+    onPressIn={() => setButtonOpacity(0.5)}
+    onPressOut={() => setButtonOpacity(1)}>
+    <View style={{opacity: buttonOpacity}}>
+      <Text>Press me!</Text>
+    </View>
+  </TouchableOpacity>
+);
+```
+
+This is computationally intensive compared to the original example - React needs to re-render the component hierarchy each time the opacity changes, even though other properties of the view and its children haven't changed. Usually this overhead isn't a concern but when performing continuous animations and responding to gestures, judiciously optimizing your components can improve your animations' fidelity.
+
+If you look at the implementation of `setNativeProps` in [NativeMethodsMixin](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js) you will notice that it is a wrapper around `RCTUIManager.updateView` - this is the exact same function call that results from re-rendering - see [receiveComponent in ReactNativeBaseComponent](https://github.com/facebook/react-native/blob/fb2ec1ea47c53c2e7b873acb1cb46192ac74274e/Libraries/Renderer/oss/ReactNativeRenderer-prod.js#L5793-L5813).
+
+## Composite components and setNativeProps
+
+Composite components are not backed by a native view, so you cannot call `setNativeProps` on them. Consider this example:
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=setNativeProps%20with%20Composite%20Components&ext=js
+import {Text, TouchableOpacity, View} from 'react-native';
+
+const MyButton = props => (
+  <View style={{marginTop: 50}}>
+    <Text>{props.label}</Text>
+  </View>
+);
+
+const App = () => (
+  <TouchableOpacity>
+    <MyButton label="Press me!" />
+  </TouchableOpacity>
+);
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=setNativeProps%20with%20Composite%20Components&ext=tsx
+import {Text, TouchableOpacity, View} from 'react-native';
+
+const MyButton = (props: {label: string}) => (
+  <View style={{marginTop: 50}}>
+    <Text>{props.label}</Text>
+  </View>
+);
+
+const App = () => (
+  <TouchableOpacity>
+    <MyButton label="Press me!" />
+  </TouchableOpacity>
+);
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+If you run this you will immediately see this error: `Touchable child must either be native or forward setNativeProps to a native component`. This occurs because `MyButton` isn't directly backed by a native view whose opacity should be set. You can think about it like this: if you define a component with `createReactClass` you would not expect to be able to set a style prop on it and have that work - you would need to pass the style prop down to a child, unless you are wrapping a native component. Similarly, we are going to forward `setNativeProps` to a native-backed child component.
+
+#### Forward setNativeProps to a child
+
+Since the `setNativeProps` method exists on any ref to a `View` component, it is enough to forward a ref on your custom component to one of the `<View />` components that it renders. This means that a call to `setNativeProps` on the custom component will have the same effect as if you called `setNativeProps` on the wrapped `View` component itself.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Forwarding%20setNativeProps&ext=js
+import {forwardRef} from 'react';
+import {Text, TouchableOpacity, View} from 'react-native';
+
+const MyButton = forwardRef((props, ref) => (
+  <View {...props} ref={ref} style={{marginTop: 50}}>
+    <Text>{props.label}</Text>
+  </View>
+));
+
+const App = () => (
+  <TouchableOpacity>
+    <MyButton label="Press me!" />
+  </TouchableOpacity>
+);
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Forwarding%20setNativeProps&ext=tsx
+import {forwardRef} from 'react';
+import {Text, TouchableOpacity, View} from 'react-native';
+
+const MyButton = forwardRef<View, {label: string}>((props, ref) => (
+  <View {...props} ref={ref} style={{marginTop: 50}}>
+    <Text>{props.label}</Text>
+  </View>
+));
+
+const App = () => (
+  <TouchableOpacity>
+    <MyButton label="Press me!" />
+  </TouchableOpacity>
+);
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+You can now use `MyButton` inside of `TouchableOpacity`!
+
+You may have noticed that we passed all of the props down to the child view using `{...props}`. The reason for this is that `TouchableOpacity` is actually a composite component, and so in addition to depending on `setNativeProps` on its child, it also requires that the child perform touch handling. To do this, it passes on [various props](view.md#onmoveshouldsetresponder) that call back to the `TouchableOpacity` component. `TouchableHighlight`, in contrast, is backed by a native view and only requires that we implement `setNativeProps`.
+
+## setNativeProps to edit TextInput value
+
+Another very common use case of `setNativeProps` is to edit the value of the TextInput. The `controlled` prop of TextInput can sometimes drop characters when the `bufferDelay` is low and the user types very quickly. Some developers prefer to skip this prop entirely and instead use `setNativeProps` to directly manipulate the TextInput value when necessary. For example, the following code demonstrates editing the input when you tap a button:
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Clear%20text&ext=js
+import {useCallback, useRef} from 'react';
+import {
+  StyleSheet,
+  TextInput,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+const App = () => {
+  const inputRef = useRef(null);
+  const editText = useCallback(() => {
+    inputRef.current.setNativeProps({text: 'Edited Text'});
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <TextInput ref={inputRef} style={styles.input} />
+      <TouchableOpacity onPress={editText}>
+        <Text>Edit text</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  input: {
+    height: 50,
+    width: 200,
+    marginHorizontal: 20,
+    borderWidth: 1,
+    borderColor: '#ccc',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Clear%20text&ext=tsx
+import {useCallback, useRef} from 'react';
+import {
+  StyleSheet,
+  TextInput,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+const App = () => {
+  const inputRef = useRef<TextInput>(null);
+  const editText = useCallback(() => {
+    inputRef.current?.setNativeProps({text: 'Edited Text'});
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <TextInput ref={inputRef} style={styles.input} />
+      <TouchableOpacity onPress={editText}>
+        <Text>Edit text</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  input: {
+    height: 50,
+    width: 200,
+    marginHorizontal: 20,
+    borderWidth: 1,
+    borderColor: '#ccc',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+You can use the [`clear`](../textinput#clear) method to clear the `TextInput` which clears the current input text using the same approach.
+
+## Avoiding conflicts with the render function
+
+If you update a property that is also managed by the render function, you might end up with some unpredictable and confusing bugs because anytime the component re-renders and that property changes, whatever value was previously set from `setNativeProps` will be completely ignored and overridden.
+
+## setNativeProps & shouldComponentUpdate
+
+By [intelligently applying `shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`.
+
+## Other native methods
+
+The methods described here are available on most of the default components provided by React Native. Note, however, that they are _not_ available on composite components that aren't directly backed by a native view. This will generally include most components that you define in your own app.
+
+### measure(callback)
+
+Determines the location on screen, width, and height in the viewport of the given view and returns the values via an async callback. If successful, the callback will be called with the following arguments:
+
+- x
+- y
+- width
+- height
+- pageX
+- pageY
+
+Note that these measurements are not available until after the rendering has been completed in native. If you need the measurements as soon as possible and you don't need `pageX` and `pageY`, consider using the [`onLayout`](view.md#onlayout) property instead.
+
+Also the width and height returned by `measure()` are the width and height of the component in the viewport. If you need the actual size of the component, consider using the [`onLayout`](view.md#onlayout) property instead.
+
+### measureInWindow(callback)
+
+Determines the location of the given view in the window and returns the values via an async callback. If the React root view is embedded in another native view, this will give you the absolute coordinates. If successful, the callback will be called with the following arguments:
+
+- x
+- y
+- width
+- height
+
+### measureLayout(relativeToNativeComponentRef, onSuccess, onFail)
+
+Like `measure()`, but measures the view relative to an ancestor, specified with `relativeToNativeComponentRef` reference. This means that the returned coordinates are relative to the origin `x`, `y` of the ancestor view.
+
+:::note
+This method can also be called with a `relativeToNativeNode` handler (instead of reference), but this variant is obsolete with the new architecture.
+:::
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=measureLayout%20example&supportedPlatforms=android,ios&ext=js
+import {useEffect, useRef, useState} from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+
+const App = () => {
+  const textContainerRef = useRef(null);
+  const textRef = useRef(null);
+  const [measure, setMeasure] = useState(null);
+
+  useEffect(() => {
+    if (textRef.current && textContainerRef.current) {
+      textRef.current.measureLayout(
+        textContainerRef.current,
+        (left, top, width, height) => {
+          setMeasure({left, top, width, height});
+        },
+      );
+    }
+  }, [measure]);
+
+  return (
+    <View style={styles.container}>
+      <View ref={textContainerRef} style={styles.textContainer}>
+        <Text ref={textRef}>Where am I? (relative to the text container)</Text>
+      </View>
+      <Text style={styles.measure}>{JSON.stringify(measure)}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  textContainer: {
+    backgroundColor: '#61dafb',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 12,
+  },
+  measure: {
+    textAlign: 'center',
+    padding: 12,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=measureLayout%20example&ext=tsx
+import {useEffect, useRef, useState} from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+
+type Measurements = {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+};
+
+const App = () => {
+  const textContainerRef = useRef<View>(null);
+  const textRef = useRef<Text>(null);
+  const [measure, setMeasure] = useState<Measurements | null>(null);
+
+  useEffect(() => {
+    if (textRef.current && textContainerRef.current) {
+      textRef.current?.measureLayout(
+        textContainerRef.current,
+        (left, top, width, height) => {
+          setMeasure({left, top, width, height});
+        },
+        () => {
+          console.error('measurement failed');
+        },
+      );
+    }
+  }, [measure]);
+
+  return (
+    <View style={styles.container}>
+      <View ref={textContainerRef} style={styles.textContainer}>
+        <Text ref={textRef}>Where am I? (relative to the text container)</Text>
+      </View>
+      <Text style={styles.measure}>{JSON.stringify(measure)}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  textContainer: {
+    backgroundColor: '#61dafb',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 12,
+  },
+  measure: {
+    textAlign: 'center',
+    padding: 12,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### focus()
+
+Requests focus for the given input or view. The exact behavior triggered will depend on the platform and type of view.
+
+### blur()
+
+Removes focus from an input or view. This is the opposite of `focus()`.
diff --git a/website/versioned_docs/version-0.83/legacy/native-components-android.md b/website/versioned_docs/version-0.83/legacy/native-components-android.md
index 9443d854c53..53d9854dca8 100644
--- a/website/versioned_docs/version-0.83/legacy/native-components-android.md
+++ b/website/versioned_docs/version-0.83/legacy/native-components-android.md
@@ -1,873 +1,873 @@
----
-id: native-components-android
-title: Android Native UI Components
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-import NativeDeprecated from '../the-new-architecture/\_markdown_native_deprecation.mdx'
-
-<NativeDeprecated />
-
-There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application.
-
-Like the native module guide, this too is a more advanced guide that assumes you are somewhat familiar with Android SDK programming. This guide will show you how to build a native UI component, walking you through the implementation of a subset of the existing `ImageView` component available in the core React Native library.
-
-:::info
-You can also setup local library containing native component with one command. Read the guide to [Local libraries setup](local-library-setup) for more details.
-:::
-
-## ImageView example
-
-For this example we are going to walk through the implementation requirements to allow the use of ImageViews in JavaScript.
-
-Native views are created and manipulated by extending `ViewManager` or more commonly `SimpleViewManager` . A `SimpleViewManager` is convenient in this case because it applies common properties such as background color, opacity, and Flexbox layout.
-
-These subclasses are essentially singletons - only one instance of each is created by the bridge. They send native views to the `NativeViewHierarchyManager`, which delegates back to them to set and update the properties of the views as necessary. The `ViewManagers` are also typically the delegates for the views, sending events back to JavaScript via the bridge.
-
-To send a view:
-
-1. Create the ViewManager subclass.
-2. Implement the `createViewInstance` method
-3. Expose view property setters using `@ReactProp` (or `@ReactPropGroup`) annotation
-4. Register the manager in `createViewManagers` of the applications package.
-5. Implement the JavaScript module
-
-### 1. Create the `ViewManager` subclass
-
-In this example we create view manager class `ReactImageManager` that extends `SimpleViewManager` of type `ReactImageView`. `ReactImageView` is the type of object managed by the manager, this will be the custom native view. Name returned by `getName` is used to reference the native view type from JavaScript.
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-class ReactImageManager(
-    private val callerContext: ReactApplicationContext
-) : SimpleViewManager<ReactImageView>() {
-
-  override fun getName() = REACT_CLASS
-
-  companion object {
-    const val REACT_CLASS = "RCTImageView"
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-public class ReactImageManager extends SimpleViewManager<ReactImageView> {
-
-  public static final String REACT_CLASS = "RCTImageView";
-  ReactApplicationContext mCallerContext;
-
-  public ReactImageManager(ReactApplicationContext reactContext) {
-    mCallerContext = reactContext;
-  }
-
-  @Override
-  public String getName() {
-    return REACT_CLASS;
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 2. Implement method `createViewInstance`
-
-Views are created in the `createViewInstance` method, the view should initialize itself in its default state, any properties will be set via a follow up call to `updateView.`
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-  override fun createViewInstance(context: ThemedReactContext) =
-      ReactImageView(context, Fresco.newDraweeControllerBuilder(), null, callerContext)
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-  @Override
-  public ReactImageView createViewInstance(ThemedReactContext context) {
-    return new ReactImageView(context, Fresco.newDraweeControllerBuilder(), null, mCallerContext);
-  }
-```
-
-</TabItem>
-</Tabs>
-
-### 3. Expose view property setters using `@ReactProp` (or `@ReactPropGroup`) annotation
-
-Properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with `@ReactProp` (or `@ReactPropGroup`). Setter method should take view to be updated (of the current view type) as a first argument and property value as a second argument. Setter should be public and not return a value (i.e. return type should be `void` in Java or `Unit` in Kotlin). Property type sent to JS is determined automatically based on the type of value argument of the setter. The following type of values are currently supported (in Java): `boolean`, `int`, `float`, `double`, `String`, `Boolean`, `Integer`, `ReadableArray`, `ReadableMap`. The corresponding types in Kotlin are `Boolean`, `Int`, `Float`, `Double`, `String`, `ReadableArray`, `ReadableMap`.
-
-Annotation `@ReactProp` has one obligatory argument `name` of type `String`. Name assigned to the `@ReactProp` annotation linked to the setter method is used to reference the property on JS side.
-
-Except from `name`, `@ReactProp` annotation may take following optional arguments: `defaultBoolean`, `defaultInt`, `defaultFloat`. Those arguments should be of the corresponding type (accordingly `boolean`, `int`, `float` in Java and `Boolean`, `Int`, `Float` in Kotlin) and the value provided will be passed to the setter method in case when the property that the setter is referencing has been removed from the component. Note that "default" values are only provided for primitive types, in case when setter is of some complex type, `null` will be provided as a default value in case when corresponding property gets removed.
-
-Setter declaration requirements for methods annotated with `@ReactPropGroup` are different than for `@ReactProp`, please refer to the `@ReactPropGroup` annotation class docs for more information about it. **IMPORTANT!** in ReactJS updating the property value will result in setter method call. Note that one of the ways we can update component is by removing properties that have been set before. In that case setter method will be called as well to notify view manager that property has changed. In that case "default" value will be provided (for primitive types "default" value can be specified using `defaultBoolean`, `defaultFloat`, etc. arguments of `@ReactProp` annotation, for complex types setter will be called with value set to `null`).
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-  @ReactProp(name = "src")
-  fun setSrc(view: ReactImageView, sources: ReadableArray?) {
-    view.setSource(sources)
-  }
-
-  @ReactProp(name = "borderRadius", defaultFloat = 0f)
-  override fun setBorderRadius(view: ReactImageView, borderRadius: Float) {
-    view.setBorderRadius(borderRadius)
-  }
-
-  @ReactProp(name = ViewProps.RESIZE_MODE)
-  fun setResizeMode(view: ReactImageView, resizeMode: String?) {
-    view.setScaleType(ImageResizeMode.toScaleType(resizeMode))
-  }
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-  @ReactProp(name = "src")
-  public void setSrc(ReactImageView view, @Nullable ReadableArray sources) {
-    view.setSource(sources);
-  }
-
-  @ReactProp(name = "borderRadius", defaultFloat = 0f)
-  public void setBorderRadius(ReactImageView view, float borderRadius) {
-    view.setBorderRadius(borderRadius);
-  }
-
-  @ReactProp(name = ViewProps.RESIZE_MODE)
-  public void setResizeMode(ReactImageView view, @Nullable String resizeMode) {
-    view.setScaleType(ImageResizeMode.toScaleType(resizeMode));
-  }
-```
-
-</TabItem>
-</Tabs>
-
-### 4. Register the `ViewManager`
-
-The final step is to register the ViewManager to the application, this happens in a similar way to [Native Modules](native-modules-android.md), via the applications package member function `createViewManagers`.
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-  override fun createViewManagers(
-      reactContext: ReactApplicationContext
-  ) = listOf(ReactImageManager(reactContext))
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-  @Override
-  public List<ViewManager> createViewManagers(
-                            ReactApplicationContext reactContext) {
-    return Arrays.<ViewManager>asList(
-      new ReactImageManager(reactContext)
-    );
-  }
-```
-
-</TabItem>
-</Tabs>
-
-### 5. Implement the JavaScript module
-
-The very final step is to create the JavaScript module that defines the interface layer between Java/Kotlin and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using TypeScript, Flow, or plain old comments).
-
-```tsx title="ImageView.tsx"
-import {requireNativeComponent} from 'react-native';
-
-/**
- * Composes `View`.
- *
- * - src: Array<{url: string}>
- * - borderRadius: number
- * - resizeMode: 'cover' | 'contain' | 'stretch'
- */
-export default requireNativeComponent('RCTImageView');
-```
-
-The `requireNativeComponent` function takes the name of the native view. Note that if your component needs to do anything more sophisticated (e.g. custom event handling), you should wrap the native component in another React component. This is illustrated in the `MyCustomView` example below.
-
-## Events
-
-So now we know how to expose native view components that we can control freely from JS, but how do we deal with events from the user, like pinch-zooms or panning? When a native event occurs the native code should issue an event to the JavaScript representation of the View, and the two views are linked with the value returned from the `getId()` method.
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-class MyCustomView(context: Context) : View(context) {
-  ...
-  fun onReceiveNativeEvent() {
-    val event = Arguments.createMap().apply {
-      putString("message", "MyMessage")
-    }
-    val reactContext = context as ReactContext
-    reactContext
-        .getJSModule(RCTEventEmitter::class.java)
-        .receiveEvent(id, "topChange", event)
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-class MyCustomView extends View {
-   ...
-   public void onReceiveNativeEvent() {
-      WritableMap event = Arguments.createMap();
-      event.putString("message", "MyMessage");
-      ReactContext reactContext = (ReactContext)getContext();
-      reactContext
-          .getJSModule(RCTEventEmitter.class)
-          .receiveEvent(getId(), "topChange", event);
-    }
-}
-```
-
-</TabItem>
-</Tabs>
-
-To map the `topChange` event name to the `onChange` callback prop in JavaScript, register it by overriding the `getExportedCustomBubblingEventTypeConstants` method in your `ViewManager`:
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-class ReactImageManager : SimpleViewManager<MyCustomView>() {
-  ...
-  override fun getExportedCustomBubblingEventTypeConstants(): Map<String, Any> {
-    return mapOf(
-      "topChange" to mapOf(
-        "phasedRegistrationNames" to mapOf(
-          "bubbled" to "onChange"
-        )
-      )
-    )
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-public class ReactImageManager extends SimpleViewManager<MyCustomView> {
-    ...
-    public Map getExportedCustomBubblingEventTypeConstants() {
-        return MapBuilder.builder().put(
-            "topChange",
-            MapBuilder.of(
-                "phasedRegistrationNames",
-                MapBuilder.of("bubbled", "onChange")
-            )
-        ).build();
-    }
-}
-```
-
-</TabItem>
-</Tabs>
-
-This callback is invoked with the raw event, which we typically process in the wrapper component to make a simpler API:
-
-```tsx {8-11,13-17} title="MyCustomView.tsx"
-import {useCallback} from 'react';
-import {requireNativeComponent} from 'react-native';
-
-const RCTMyCustomView = requireNativeComponent('RCTMyCustomView');
-
-export default function MyCustomView(props: {
-  // ...
-  /**
-   * Callback that is called continuously when the user is dragging the map.
-   */
-  onChangeMessage: (message: string) => unknown;
-}) {
-  const onChange = useCallback(
-    event => {
-      props.onChangeMessage?.(event.nativeEvent.message);
-    },
-    [props.onChangeMessage],
-  );
-
-  return <RCTMyCustomView {...props} onChange={onChange} />;
-}
-```
-
-## Integration with an Android Fragment example
-
-In order to integrate existing Native UI elements to your React Native app, you might need to use Android Fragments to give you a more granular control over your native component than returning a `View` from your `ViewManager`. You will need this if you want to add custom logic that is tied to your view with the help of [lifecycle methods](https://developer.android.com/guide/fragments/lifecycle), such as `onViewCreated`, `onPause`, `onResume`. The following steps will show you how to do it:
-
-### 1. Create an example custom view
-
-First, let's create a `CustomView` class which extends `FrameLayout` (the content of this view can be any view that you'd like to render)
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin title="CustomView.kt"
-// replace with your package
-package com.mypackage
-
-import android.content.Context
-import android.graphics.Color
-import android.widget.FrameLayout
-import android.widget.TextView
-
-class CustomView(context: Context) : FrameLayout(context) {
-  init {
-    // set padding and background color
-    setPadding(16,16,16,16)
-    setBackgroundColor(Color.parseColor("#5FD3F3"))
-
-    // add default text view
-    addView(TextView(context).apply {
-      text = "Welcome to Android Fragments with React Native."
-    })
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java title="CustomView.java"
-// replace with your package
-package com.mypackage;
-
-import android.content.Context;
-import android.graphics.Color;
-import android.widget.FrameLayout;
-import android.widget.ImageView;
-import android.widget.TextView;
-
-import androidx.annotation.NonNull;
-
-public class CustomView extends FrameLayout {
-  public CustomView(@NonNull Context context) {
-    super(context);
-    // set padding and background color
-    this.setPadding(16,16,16,16);
-    this.setBackgroundColor(Color.parseColor("#5FD3F3"));
-
-    // add default text view
-    TextView text = new TextView(context);
-    text.setText("Welcome to Android Fragments with React Native.");
-    this.addView(text);
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 2. Create a `Fragment`
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin title="MyFragment.kt"
-// replace with your package
-package com.mypackage
-
-import android.os.Bundle
-import android.view.LayoutInflater
-import android.view.View
-import android.view.ViewGroup
-import androidx.fragment.app.Fragment
-
-// replace with your view's import
-import com.mypackage.CustomView
-
-class MyFragment : Fragment() {
-  private lateinit var customView: CustomView
-
-  override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
-    super.onCreateView(inflater, container, savedInstanceState)
-    customView = CustomView(requireNotNull(context))
-    return customView // this CustomView could be any view that you want to render
-  }
-
-  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
-    super.onViewCreated(view, savedInstanceState)
-    // do any logic that should happen in an `onCreate` method, e.g:
-    // customView.onCreate(savedInstanceState);
-  }
-
-  override fun onPause() {
-    super.onPause()
-    // do any logic that should happen in an `onPause` method
-    // e.g.: customView.onPause();
-  }
-
-  override fun onResume() {
-    super.onResume()
-    // do any logic that should happen in an `onResume` method
-    // e.g.: customView.onResume();
-  }
-
-  override fun onDestroy() {
-    super.onDestroy()
-    // do any logic that should happen in an `onDestroy` method
-    // e.g.: customView.onDestroy();
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java title="MyFragment.java"
-// replace with your package
-package com.mypackage;
-
-import android.os.Bundle;
-import android.view.LayoutInflater;
-import android.view.View;
-import android.view.ViewGroup;
-import androidx.fragment.app.Fragment;
-
-// replace with your view's import
-import com.mypackage.CustomView;
-
-public class MyFragment extends Fragment {
-    CustomView customView;
-
-    @Override
-    public View onCreateView(LayoutInflater inflater, ViewGroup parent, Bundle savedInstanceState) {
-        super.onCreateView(inflater, parent, savedInstanceState);
-        customView = new CustomView(this.getContext());
-        return customView; // this CustomView could be any view that you want to render
-    }
-
-    @Override
-    public void onViewCreated(View view, Bundle savedInstanceState) {
-        super.onViewCreated(view, savedInstanceState);
-        // do any logic that should happen in an `onCreate` method, e.g:
-        // customView.onCreate(savedInstanceState);
-    }
-
-    @Override
-    public void onPause() {
-        super.onPause();
-        // do any logic that should happen in an `onPause` method
-        // e.g.: customView.onPause();
-    }
-
-    @Override
-    public void onResume() {
-        super.onResume();
-       // do any logic that should happen in an `onResume` method
-       // e.g.: customView.onResume();
-    }
-
-    @Override
-    public void onDestroy() {
-        super.onDestroy();
-        // do any logic that should happen in an `onDestroy` method
-        // e.g.: customView.onDestroy();
-    }
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 3. Create the `ViewManager` subclass
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin title="MyViewManager.kt"
-// replace with your package
-package com.mypackage
-
-import android.view.Choreographer
-import android.view.View
-import android.view.ViewGroup
-import android.widget.FrameLayout
-import androidx.fragment.app.FragmentActivity
-import com.facebook.react.bridge.ReactApplicationContext
-import com.facebook.react.bridge.ReadableArray
-import com.facebook.react.uimanager.ThemedReactContext
-import com.facebook.react.uimanager.ViewGroupManager
-import com.facebook.react.uimanager.annotations.ReactPropGroup
-
-class MyViewManager(
-    private val reactContext: ReactApplicationContext
-) : ViewGroupManager<FrameLayout>() {
-  private var propWidth: Int? = null
-  private var propHeight: Int? = null
-
-  override fun getName() = REACT_CLASS
-
-  /**
-   * Return a FrameLayout which will later hold the Fragment
-   */
-  override fun createViewInstance(reactContext: ThemedReactContext) =
-      FrameLayout(reactContext)
-
-  /**
-   * Map the "create" command to an integer
-   */
-  override fun getCommandsMap() = mapOf("create" to COMMAND_CREATE)
-
-  /**
-   * Handle "create" command (called from JS) and call createFragment method
-   */
-  override fun receiveCommand(
-      root: FrameLayout,
-      commandId: String,
-      args: ReadableArray?
-  ) {
-    super.receiveCommand(root, commandId, args)
-    val reactNativeViewId = requireNotNull(args).getInt(0)
-
-    when (commandId.toInt()) {
-      COMMAND_CREATE -> createFragment(root, reactNativeViewId)
-    }
-  }
-
-  @ReactPropGroup(names = ["width", "height"], customType = "Style")
-  fun setStyle(view: FrameLayout, index: Int, value: Int) {
-    if (index == 0) propWidth = value
-    if (index == 1) propHeight = value
-  }
-
-  /**
-   * Replace your React Native view with a custom fragment
-   */
-  fun createFragment(root: FrameLayout, reactNativeViewId: Int) {
-    val parentView = root.findViewById<ViewGroup>(reactNativeViewId)
-    setupLayout(parentView)
-
-    val myFragment = MyFragment()
-    val activity = reactContext.currentActivity as FragmentActivity
-    activity.supportFragmentManager
-        .beginTransaction()
-        .replace(reactNativeViewId, myFragment, reactNativeViewId.toString())
-        .commit()
-  }
-
-  fun setupLayout(view: View) {
-    Choreographer.getInstance().postFrameCallback(object: Choreographer.FrameCallback {
-      override fun doFrame(frameTimeNanos: Long) {
-        manuallyLayoutChildren(view)
-        view.viewTreeObserver.dispatchOnGlobalLayout()
-        Choreographer.getInstance().postFrameCallback(this)
-      }
-    })
-  }
-
-  /**
-   * Layout all children properly
-   */
-  private fun manuallyLayoutChildren(view: View) {
-    // propWidth and propHeight coming from react-native props
-    val width = requireNotNull(propWidth)
-    val height = requireNotNull(propHeight)
-
-    view.measure(
-        View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
-        View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY))
-
-    view.layout(0, 0, width, height)
-  }
-
-  companion object {
-    private const val REACT_CLASS = "MyViewManager"
-    private const val COMMAND_CREATE = 1
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java title="MyViewManager.java"
-// replace with your package
-package com.mypackage;
-
-import android.view.Choreographer;
-import android.view.View;
-import android.view.ViewGroup;
-import android.widget.FrameLayout;
-
-import androidx.annotation.NonNull;
-import androidx.annotation.Nullable;
-import androidx.fragment.app.FragmentActivity;
-
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.ReadableArray;
-import com.facebook.react.common.MapBuilder;
-import com.facebook.react.uimanager.annotations.ReactProp;
-import com.facebook.react.uimanager.annotations.ReactPropGroup;
-import com.facebook.react.uimanager.ViewGroupManager;
-import com.facebook.react.uimanager.ThemedReactContext;
-
-import java.util.Map;
-
-public class MyViewManager extends ViewGroupManager<FrameLayout> {
-
-  public static final String REACT_CLASS = "MyViewManager";
-  public final int COMMAND_CREATE = 1;
-  private int propWidth;
-  private int propHeight;
-
-  ReactApplicationContext reactContext;
-
-  public MyViewManager(ReactApplicationContext reactContext) {
-    this.reactContext = reactContext;
-  }
-
-  @Override
-  public String getName() {
-    return REACT_CLASS;
-  }
-
-  /**
-   * Return a FrameLayout which will later hold the Fragment
-   */
-  @Override
-  public FrameLayout createViewInstance(ThemedReactContext reactContext) {
-    return new FrameLayout(reactContext);
-  }
-
-  /**
-   * Map the "create" command to an integer
-   */
-  @Nullable
-  @Override
-  public Map<String, Integer> getCommandsMap() {
-    return MapBuilder.of("create", COMMAND_CREATE);
-  }
-
-  /**
-   * Handle "create" command (called from JS) and call createFragment method
-   */
-  @Override
-  public void receiveCommand(
-    @NonNull FrameLayout root,
-    String commandId,
-    @Nullable ReadableArray args
-  ) {
-    super.receiveCommand(root, commandId, args);
-    int reactNativeViewId = args.getInt(0);
-    int commandIdInt = Integer.parseInt(commandId);
-
-    switch (commandIdInt) {
-      case COMMAND_CREATE:
-        createFragment(root, reactNativeViewId);
-        break;
-      default: {}
-    }
-  }
-
-  @ReactPropGroup(names = {"width", "height"}, customType = "Style")
-  public void setStyle(FrameLayout view, int index, Integer value) {
-    if (index == 0) {
-      propWidth = value;
-    }
-
-    if (index == 1) {
-      propHeight = value;
-    }
-  }
-
-  /**
-   * Replace your React Native view with a custom fragment
-   */
-  public void createFragment(FrameLayout root, int reactNativeViewId) {
-    ViewGroup parentView = (ViewGroup) root.findViewById(reactNativeViewId);
-    setupLayout(parentView);
-
-    final MyFragment myFragment = new MyFragment();
-    FragmentActivity activity = (FragmentActivity) reactContext.getCurrentActivity();
-    activity.getSupportFragmentManager()
-            .beginTransaction()
-            .replace(reactNativeViewId, myFragment, String.valueOf(reactNativeViewId))
-            .commit();
-  }
-
-  public void setupLayout(View view) {
-    Choreographer.getInstance().postFrameCallback(new Choreographer.FrameCallback() {
-      @Override
-      public void doFrame(long frameTimeNanos) {
-        manuallyLayoutChildren(view);
-        view.getViewTreeObserver().dispatchOnGlobalLayout();
-        Choreographer.getInstance().postFrameCallback(this);
-      }
-    });
-  }
-
-  /**
-   * Layout all children properly
-   */
-  public void manuallyLayoutChildren(View view) {
-      // propWidth and propHeight coming from react-native props
-      int width = propWidth;
-      int height = propHeight;
-
-      view.measure(
-              View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
-              View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY));
-
-      view.layout(0, 0, width, height);
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 4. Register the `ViewManager`
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin title="MyPackage.kt"
-// replace with your package
-package com.mypackage
-
-import com.facebook.react.ReactPackage
-import com.facebook.react.bridge.ReactApplicationContext
-import com.facebook.react.uimanager.ViewManager
-
-class MyPackage : ReactPackage {
-  ...
-  override fun createViewManagers(
-      reactContext: ReactApplicationContext
-  ) = listOf(MyViewManager(reactContext))
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java title="MyPackage.java"
-// replace with your package
-package com.mypackage;
-
-import com.facebook.react.ReactPackage;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.uimanager.ViewManager;
-
-import java.util.Arrays;
-import java.util.List;
-
-public class MyPackage implements ReactPackage {
-
-   @Override
-   public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
-       return Arrays.<ViewManager>asList(
-            new MyViewManager(reactContext)
-       );
-   }
-
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 5. Register the `Package`
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin title="MainApplication.kt"
-override fun getPackages(): List<ReactPackage> =
-    PackageList(this).packages.apply {
-        // Packages that cannot be autolinked yet can be added manually here, for example:
-        // add(MyReactNativePackage())
-        add(MyAppPackage())
-    }
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java title="MainApplication.java"
-@Override
-protected List<ReactPackage> getPackages() {
-    List<ReactPackage> packages = new PackageList(this).getPackages();
-    // Packages that cannot be autolinked yet can be added manually here, for example:
-    // packages.add(new MyReactNativePackage());
-    packages.add(new MyAppPackage());
-    return packages;
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 6. Implement the JavaScript module
-
-I. Start with custom View manager:
-
-```tsx title="MyViewManager.tsx"
-import {requireNativeComponent} from 'react-native';
-
-export const MyViewManager =
-  requireNativeComponent('MyViewManager');
-```
-
-II. Then implement custom View calling the `create` method:
-
-```tsx title="MyView.tsx"
-import React, {useEffect, useRef} from 'react';
-import {
-  PixelRatio,
-  UIManager,
-  findNodeHandle,
-} from 'react-native';
-
-import {MyViewManager} from './my-view-manager';
-
-const createFragment = viewId =>
-  UIManager.dispatchViewManagerCommand(
-    viewId,
-    // we are calling the 'create' command
-    UIManager.MyViewManager.Commands.create.toString(),
-    [viewId],
-  );
-
-export const MyView = () => {
-  const ref = useRef(null);
-
-  useEffect(() => {
-    const viewId = findNodeHandle(ref.current);
-    createFragment(viewId);
-  }, []);
-
-  return (
-    <MyViewManager
-      style={{
-        // converts dpi to px, provide desired height
-        height: PixelRatio.getPixelSizeForLayoutSize(200),
-        // converts dpi to px, provide desired width
-        width: PixelRatio.getPixelSizeForLayoutSize(200),
-      }}
-      ref={ref}
-    />
-  );
-};
-```
-
-If you want to expose property setters using `@ReactProp` (or `@ReactPropGroup`) annotation see the [ImageView example](#imageview-example) above.
+---
+id: native-components-android
+title: Android Native UI Components
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+import NativeDeprecated from '../the-new-architecture/\_markdown_native_deprecation.mdx'
+
+<NativeDeprecated />
+
+There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application.
+
+Like the native module guide, this too is a more advanced guide that assumes you are somewhat familiar with Android SDK programming. This guide will show you how to build a native UI component, walking you through the implementation of a subset of the existing `ImageView` component available in the core React Native library.
+
+:::info
+You can also setup local library containing native component with one command. Read the guide to [Local libraries setup](local-library-setup) for more details.
+:::
+
+## ImageView example
+
+For this example we are going to walk through the implementation requirements to allow the use of ImageViews in JavaScript.
+
+Native views are created and manipulated by extending `ViewManager` or more commonly `SimpleViewManager` . A `SimpleViewManager` is convenient in this case because it applies common properties such as background color, opacity, and Flexbox layout.
+
+These subclasses are essentially singletons - only one instance of each is created by the bridge. They send native views to the `NativeViewHierarchyManager`, which delegates back to them to set and update the properties of the views as necessary. The `ViewManagers` are also typically the delegates for the views, sending events back to JavaScript via the bridge.
+
+To send a view:
+
+1. Create the ViewManager subclass.
+2. Implement the `createViewInstance` method
+3. Expose view property setters using `@ReactProp` (or `@ReactPropGroup`) annotation
+4. Register the manager in `createViewManagers` of the applications package.
+5. Implement the JavaScript module
+
+### 1. Create the `ViewManager` subclass
+
+In this example we create view manager class `ReactImageManager` that extends `SimpleViewManager` of type `ReactImageView`. `ReactImageView` is the type of object managed by the manager, this will be the custom native view. Name returned by `getName` is used to reference the native view type from JavaScript.
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+class ReactImageManager(
+    private val callerContext: ReactApplicationContext
+) : SimpleViewManager<ReactImageView>() {
+
+  override fun getName() = REACT_CLASS
+
+  companion object {
+    const val REACT_CLASS = "RCTImageView"
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+public class ReactImageManager extends SimpleViewManager<ReactImageView> {
+
+  public static final String REACT_CLASS = "RCTImageView";
+  ReactApplicationContext mCallerContext;
+
+  public ReactImageManager(ReactApplicationContext reactContext) {
+    mCallerContext = reactContext;
+  }
+
+  @Override
+  public String getName() {
+    return REACT_CLASS;
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 2. Implement method `createViewInstance`
+
+Views are created in the `createViewInstance` method, the view should initialize itself in its default state, any properties will be set via a follow up call to `updateView.`
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+  override fun createViewInstance(context: ThemedReactContext) =
+      ReactImageView(context, Fresco.newDraweeControllerBuilder(), null, callerContext)
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+  @Override
+  public ReactImageView createViewInstance(ThemedReactContext context) {
+    return new ReactImageView(context, Fresco.newDraweeControllerBuilder(), null, mCallerContext);
+  }
+```
+
+</TabItem>
+</Tabs>
+
+### 3. Expose view property setters using `@ReactProp` (or `@ReactPropGroup`) annotation
+
+Properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with `@ReactProp` (or `@ReactPropGroup`). Setter method should take view to be updated (of the current view type) as a first argument and property value as a second argument. Setter should be public and not return a value (i.e. return type should be `void` in Java or `Unit` in Kotlin). Property type sent to JS is determined automatically based on the type of value argument of the setter. The following type of values are currently supported (in Java): `boolean`, `int`, `float`, `double`, `String`, `Boolean`, `Integer`, `ReadableArray`, `ReadableMap`. The corresponding types in Kotlin are `Boolean`, `Int`, `Float`, `Double`, `String`, `ReadableArray`, `ReadableMap`.
+
+Annotation `@ReactProp` has one obligatory argument `name` of type `String`. Name assigned to the `@ReactProp` annotation linked to the setter method is used to reference the property on JS side.
+
+Except from `name`, `@ReactProp` annotation may take following optional arguments: `defaultBoolean`, `defaultInt`, `defaultFloat`. Those arguments should be of the corresponding type (accordingly `boolean`, `int`, `float` in Java and `Boolean`, `Int`, `Float` in Kotlin) and the value provided will be passed to the setter method in case when the property that the setter is referencing has been removed from the component. Note that "default" values are only provided for primitive types, in case when setter is of some complex type, `null` will be provided as a default value in case when corresponding property gets removed.
+
+Setter declaration requirements for methods annotated with `@ReactPropGroup` are different than for `@ReactProp`, please refer to the `@ReactPropGroup` annotation class docs for more information about it. **IMPORTANT!** in ReactJS updating the property value will result in setter method call. Note that one of the ways we can update component is by removing properties that have been set before. In that case setter method will be called as well to notify view manager that property has changed. In that case "default" value will be provided (for primitive types "default" value can be specified using `defaultBoolean`, `defaultFloat`, etc. arguments of `@ReactProp` annotation, for complex types setter will be called with value set to `null`).
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+  @ReactProp(name = "src")
+  fun setSrc(view: ReactImageView, sources: ReadableArray?) {
+    view.setSource(sources)
+  }
+
+  @ReactProp(name = "borderRadius", defaultFloat = 0f)
+  override fun setBorderRadius(view: ReactImageView, borderRadius: Float) {
+    view.setBorderRadius(borderRadius)
+  }
+
+  @ReactProp(name = ViewProps.RESIZE_MODE)
+  fun setResizeMode(view: ReactImageView, resizeMode: String?) {
+    view.setScaleType(ImageResizeMode.toScaleType(resizeMode))
+  }
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+  @ReactProp(name = "src")
+  public void setSrc(ReactImageView view, @Nullable ReadableArray sources) {
+    view.setSource(sources);
+  }
+
+  @ReactProp(name = "borderRadius", defaultFloat = 0f)
+  public void setBorderRadius(ReactImageView view, float borderRadius) {
+    view.setBorderRadius(borderRadius);
+  }
+
+  @ReactProp(name = ViewProps.RESIZE_MODE)
+  public void setResizeMode(ReactImageView view, @Nullable String resizeMode) {
+    view.setScaleType(ImageResizeMode.toScaleType(resizeMode));
+  }
+```
+
+</TabItem>
+</Tabs>
+
+### 4. Register the `ViewManager`
+
+The final step is to register the ViewManager to the application, this happens in a similar way to [Native Modules](native-modules-android.md), via the applications package member function `createViewManagers`.
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+  override fun createViewManagers(
+      reactContext: ReactApplicationContext
+  ) = listOf(ReactImageManager(reactContext))
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+  @Override
+  public List<ViewManager> createViewManagers(
+                            ReactApplicationContext reactContext) {
+    return Arrays.<ViewManager>asList(
+      new ReactImageManager(reactContext)
+    );
+  }
+```
+
+</TabItem>
+</Tabs>
+
+### 5. Implement the JavaScript module
+
+The very final step is to create the JavaScript module that defines the interface layer between Java/Kotlin and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using TypeScript, Flow, or plain old comments).
+
+```tsx title="ImageView.tsx"
+import {requireNativeComponent} from 'react-native';
+
+/**
+ * Composes `View`.
+ *
+ * - src: Array<{url: string}>
+ * - borderRadius: number
+ * - resizeMode: 'cover' | 'contain' | 'stretch'
+ */
+export default requireNativeComponent('RCTImageView');
+```
+
+The `requireNativeComponent` function takes the name of the native view. Note that if your component needs to do anything more sophisticated (e.g. custom event handling), you should wrap the native component in another React component. This is illustrated in the `MyCustomView` example below.
+
+## Events
+
+So now we know how to expose native view components that we can control freely from JS, but how do we deal with events from the user, like pinch-zooms or panning? When a native event occurs the native code should issue an event to the JavaScript representation of the View, and the two views are linked with the value returned from the `getId()` method.
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+class MyCustomView(context: Context) : View(context) {
+  ...
+  fun onReceiveNativeEvent() {
+    val event = Arguments.createMap().apply {
+      putString("message", "MyMessage")
+    }
+    val reactContext = context as ReactContext
+    reactContext
+        .getJSModule(RCTEventEmitter::class.java)
+        .receiveEvent(id, "topChange", event)
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+class MyCustomView extends View {
+   ...
+   public void onReceiveNativeEvent() {
+      WritableMap event = Arguments.createMap();
+      event.putString("message", "MyMessage");
+      ReactContext reactContext = (ReactContext)getContext();
+      reactContext
+          .getJSModule(RCTEventEmitter.class)
+          .receiveEvent(getId(), "topChange", event);
+    }
+}
+```
+
+</TabItem>
+</Tabs>
+
+To map the `topChange` event name to the `onChange` callback prop in JavaScript, register it by overriding the `getExportedCustomBubblingEventTypeConstants` method in your `ViewManager`:
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+class ReactImageManager : SimpleViewManager<MyCustomView>() {
+  ...
+  override fun getExportedCustomBubblingEventTypeConstants(): Map<String, Any> {
+    return mapOf(
+      "topChange" to mapOf(
+        "phasedRegistrationNames" to mapOf(
+          "bubbled" to "onChange"
+        )
+      )
+    )
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+public class ReactImageManager extends SimpleViewManager<MyCustomView> {
+    ...
+    public Map getExportedCustomBubblingEventTypeConstants() {
+        return MapBuilder.builder().put(
+            "topChange",
+            MapBuilder.of(
+                "phasedRegistrationNames",
+                MapBuilder.of("bubbled", "onChange")
+            )
+        ).build();
+    }
+}
+```
+
+</TabItem>
+</Tabs>
+
+This callback is invoked with the raw event, which we typically process in the wrapper component to make a simpler API:
+
+```tsx {8-11,13-17} title="MyCustomView.tsx"
+import {useCallback} from 'react';
+import {requireNativeComponent} from 'react-native';
+
+const RCTMyCustomView = requireNativeComponent('RCTMyCustomView');
+
+export default function MyCustomView(props: {
+  // ...
+  /**
+   * Callback that is called continuously when the user is dragging the map.
+   */
+  onChangeMessage: (message: string) => unknown;
+}) {
+  const onChange = useCallback(
+    event => {
+      props.onChangeMessage?.(event.nativeEvent.message);
+    },
+    [props.onChangeMessage],
+  );
+
+  return <RCTMyCustomView {...props} onChange={onChange} />;
+}
+```
+
+## Integration with an Android Fragment example
+
+In order to integrate existing Native UI elements to your React Native app, you might need to use Android Fragments to give you a more granular control over your native component than returning a `View` from your `ViewManager`. You will need this if you want to add custom logic that is tied to your view with the help of [lifecycle methods](https://developer.android.com/guide/fragments/lifecycle), such as `onViewCreated`, `onPause`, `onResume`. The following steps will show you how to do it:
+
+### 1. Create an example custom view
+
+First, let's create a `CustomView` class which extends `FrameLayout` (the content of this view can be any view that you'd like to render)
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin title="CustomView.kt"
+// replace with your package
+package com.mypackage
+
+import android.content.Context
+import android.graphics.Color
+import android.widget.FrameLayout
+import android.widget.TextView
+
+class CustomView(context: Context) : FrameLayout(context) {
+  init {
+    // set padding and background color
+    setPadding(16,16,16,16)
+    setBackgroundColor(Color.parseColor("#5FD3F3"))
+
+    // add default text view
+    addView(TextView(context).apply {
+      text = "Welcome to Android Fragments with React Native."
+    })
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java title="CustomView.java"
+// replace with your package
+package com.mypackage;
+
+import android.content.Context;
+import android.graphics.Color;
+import android.widget.FrameLayout;
+import android.widget.ImageView;
+import android.widget.TextView;
+
+import androidx.annotation.NonNull;
+
+public class CustomView extends FrameLayout {
+  public CustomView(@NonNull Context context) {
+    super(context);
+    // set padding and background color
+    this.setPadding(16,16,16,16);
+    this.setBackgroundColor(Color.parseColor("#5FD3F3"));
+
+    // add default text view
+    TextView text = new TextView(context);
+    text.setText("Welcome to Android Fragments with React Native.");
+    this.addView(text);
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 2. Create a `Fragment`
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin title="MyFragment.kt"
+// replace with your package
+package com.mypackage
+
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import androidx.fragment.app.Fragment
+
+// replace with your view's import
+import com.mypackage.CustomView
+
+class MyFragment : Fragment() {
+  private lateinit var customView: CustomView
+
+  override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
+    super.onCreateView(inflater, container, savedInstanceState)
+    customView = CustomView(requireNotNull(context))
+    return customView // this CustomView could be any view that you want to render
+  }
+
+  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+    super.onViewCreated(view, savedInstanceState)
+    // do any logic that should happen in an `onCreate` method, e.g:
+    // customView.onCreate(savedInstanceState);
+  }
+
+  override fun onPause() {
+    super.onPause()
+    // do any logic that should happen in an `onPause` method
+    // e.g.: customView.onPause();
+  }
+
+  override fun onResume() {
+    super.onResume()
+    // do any logic that should happen in an `onResume` method
+    // e.g.: customView.onResume();
+  }
+
+  override fun onDestroy() {
+    super.onDestroy()
+    // do any logic that should happen in an `onDestroy` method
+    // e.g.: customView.onDestroy();
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java title="MyFragment.java"
+// replace with your package
+package com.mypackage;
+
+import android.os.Bundle;
+import android.view.LayoutInflater;
+import android.view.View;
+import android.view.ViewGroup;
+import androidx.fragment.app.Fragment;
+
+// replace with your view's import
+import com.mypackage.CustomView;
+
+public class MyFragment extends Fragment {
+    CustomView customView;
+
+    @Override
+    public View onCreateView(LayoutInflater inflater, ViewGroup parent, Bundle savedInstanceState) {
+        super.onCreateView(inflater, parent, savedInstanceState);
+        customView = new CustomView(this.getContext());
+        return customView; // this CustomView could be any view that you want to render
+    }
+
+    @Override
+    public void onViewCreated(View view, Bundle savedInstanceState) {
+        super.onViewCreated(view, savedInstanceState);
+        // do any logic that should happen in an `onCreate` method, e.g:
+        // customView.onCreate(savedInstanceState);
+    }
+
+    @Override
+    public void onPause() {
+        super.onPause();
+        // do any logic that should happen in an `onPause` method
+        // e.g.: customView.onPause();
+    }
+
+    @Override
+    public void onResume() {
+        super.onResume();
+       // do any logic that should happen in an `onResume` method
+       // e.g.: customView.onResume();
+    }
+
+    @Override
+    public void onDestroy() {
+        super.onDestroy();
+        // do any logic that should happen in an `onDestroy` method
+        // e.g.: customView.onDestroy();
+    }
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 3. Create the `ViewManager` subclass
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin title="MyViewManager.kt"
+// replace with your package
+package com.mypackage
+
+import android.view.Choreographer
+import android.view.View
+import android.view.ViewGroup
+import android.widget.FrameLayout
+import androidx.fragment.app.FragmentActivity
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.annotations.ReactPropGroup
+
+class MyViewManager(
+    private val reactContext: ReactApplicationContext
+) : ViewGroupManager<FrameLayout>() {
+  private var propWidth: Int? = null
+  private var propHeight: Int? = null
+
+  override fun getName() = REACT_CLASS
+
+  /**
+   * Return a FrameLayout which will later hold the Fragment
+   */
+  override fun createViewInstance(reactContext: ThemedReactContext) =
+      FrameLayout(reactContext)
+
+  /**
+   * Map the "create" command to an integer
+   */
+  override fun getCommandsMap() = mapOf("create" to COMMAND_CREATE)
+
+  /**
+   * Handle "create" command (called from JS) and call createFragment method
+   */
+  override fun receiveCommand(
+      root: FrameLayout,
+      commandId: String,
+      args: ReadableArray?
+  ) {
+    super.receiveCommand(root, commandId, args)
+    val reactNativeViewId = requireNotNull(args).getInt(0)
+
+    when (commandId.toInt()) {
+      COMMAND_CREATE -> createFragment(root, reactNativeViewId)
+    }
+  }
+
+  @ReactPropGroup(names = ["width", "height"], customType = "Style")
+  fun setStyle(view: FrameLayout, index: Int, value: Int) {
+    if (index == 0) propWidth = value
+    if (index == 1) propHeight = value
+  }
+
+  /**
+   * Replace your React Native view with a custom fragment
+   */
+  fun createFragment(root: FrameLayout, reactNativeViewId: Int) {
+    val parentView = root.findViewById<ViewGroup>(reactNativeViewId)
+    setupLayout(parentView)
+
+    val myFragment = MyFragment()
+    val activity = reactContext.currentActivity as FragmentActivity
+    activity.supportFragmentManager
+        .beginTransaction()
+        .replace(reactNativeViewId, myFragment, reactNativeViewId.toString())
+        .commit()
+  }
+
+  fun setupLayout(view: View) {
+    Choreographer.getInstance().postFrameCallback(object: Choreographer.FrameCallback {
+      override fun doFrame(frameTimeNanos: Long) {
+        manuallyLayoutChildren(view)
+        view.viewTreeObserver.dispatchOnGlobalLayout()
+        Choreographer.getInstance().postFrameCallback(this)
+      }
+    })
+  }
+
+  /**
+   * Layout all children properly
+   */
+  private fun manuallyLayoutChildren(view: View) {
+    // propWidth and propHeight coming from react-native props
+    val width = requireNotNull(propWidth)
+    val height = requireNotNull(propHeight)
+
+    view.measure(
+        View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
+        View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY))
+
+    view.layout(0, 0, width, height)
+  }
+
+  companion object {
+    private const val REACT_CLASS = "MyViewManager"
+    private const val COMMAND_CREATE = 1
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java title="MyViewManager.java"
+// replace with your package
+package com.mypackage;
+
+import android.view.Choreographer;
+import android.view.View;
+import android.view.ViewGroup;
+import android.widget.FrameLayout;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+import androidx.fragment.app.FragmentActivity;
+
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReadableArray;
+import com.facebook.react.common.MapBuilder;
+import com.facebook.react.uimanager.annotations.ReactProp;
+import com.facebook.react.uimanager.annotations.ReactPropGroup;
+import com.facebook.react.uimanager.ViewGroupManager;
+import com.facebook.react.uimanager.ThemedReactContext;
+
+import java.util.Map;
+
+public class MyViewManager extends ViewGroupManager<FrameLayout> {
+
+  public static final String REACT_CLASS = "MyViewManager";
+  public final int COMMAND_CREATE = 1;
+  private int propWidth;
+  private int propHeight;
+
+  ReactApplicationContext reactContext;
+
+  public MyViewManager(ReactApplicationContext reactContext) {
+    this.reactContext = reactContext;
+  }
+
+  @Override
+  public String getName() {
+    return REACT_CLASS;
+  }
+
+  /**
+   * Return a FrameLayout which will later hold the Fragment
+   */
+  @Override
+  public FrameLayout createViewInstance(ThemedReactContext reactContext) {
+    return new FrameLayout(reactContext);
+  }
+
+  /**
+   * Map the "create" command to an integer
+   */
+  @Nullable
+  @Override
+  public Map<String, Integer> getCommandsMap() {
+    return MapBuilder.of("create", COMMAND_CREATE);
+  }
+
+  /**
+   * Handle "create" command (called from JS) and call createFragment method
+   */
+  @Override
+  public void receiveCommand(
+    @NonNull FrameLayout root,
+    String commandId,
+    @Nullable ReadableArray args
+  ) {
+    super.receiveCommand(root, commandId, args);
+    int reactNativeViewId = args.getInt(0);
+    int commandIdInt = Integer.parseInt(commandId);
+
+    switch (commandIdInt) {
+      case COMMAND_CREATE:
+        createFragment(root, reactNativeViewId);
+        break;
+      default: {}
+    }
+  }
+
+  @ReactPropGroup(names = {"width", "height"}, customType = "Style")
+  public void setStyle(FrameLayout view, int index, Integer value) {
+    if (index == 0) {
+      propWidth = value;
+    }
+
+    if (index == 1) {
+      propHeight = value;
+    }
+  }
+
+  /**
+   * Replace your React Native view with a custom fragment
+   */
+  public void createFragment(FrameLayout root, int reactNativeViewId) {
+    ViewGroup parentView = (ViewGroup) root.findViewById(reactNativeViewId);
+    setupLayout(parentView);
+
+    final MyFragment myFragment = new MyFragment();
+    FragmentActivity activity = (FragmentActivity) reactContext.getCurrentActivity();
+    activity.getSupportFragmentManager()
+            .beginTransaction()
+            .replace(reactNativeViewId, myFragment, String.valueOf(reactNativeViewId))
+            .commit();
+  }
+
+  public void setupLayout(View view) {
+    Choreographer.getInstance().postFrameCallback(new Choreographer.FrameCallback() {
+      @Override
+      public void doFrame(long frameTimeNanos) {
+        manuallyLayoutChildren(view);
+        view.getViewTreeObserver().dispatchOnGlobalLayout();
+        Choreographer.getInstance().postFrameCallback(this);
+      }
+    });
+  }
+
+  /**
+   * Layout all children properly
+   */
+  public void manuallyLayoutChildren(View view) {
+      // propWidth and propHeight coming from react-native props
+      int width = propWidth;
+      int height = propHeight;
+
+      view.measure(
+              View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
+              View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY));
+
+      view.layout(0, 0, width, height);
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 4. Register the `ViewManager`
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin title="MyPackage.kt"
+// replace with your package
+package com.mypackage
+
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+
+class MyPackage : ReactPackage {
+  ...
+  override fun createViewManagers(
+      reactContext: ReactApplicationContext
+  ) = listOf(MyViewManager(reactContext))
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java title="MyPackage.java"
+// replace with your package
+package com.mypackage;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.Arrays;
+import java.util.List;
+
+public class MyPackage implements ReactPackage {
+
+   @Override
+   public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
+       return Arrays.<ViewManager>asList(
+            new MyViewManager(reactContext)
+       );
+   }
+
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 5. Register the `Package`
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin title="MainApplication.kt"
+override fun getPackages(): List<ReactPackage> =
+    PackageList(this).packages.apply {
+        // Packages that cannot be autolinked yet can be added manually here, for example:
+        // add(MyReactNativePackage())
+        add(MyAppPackage())
+    }
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java title="MainApplication.java"
+@Override
+protected List<ReactPackage> getPackages() {
+    List<ReactPackage> packages = new PackageList(this).getPackages();
+    // Packages that cannot be autolinked yet can be added manually here, for example:
+    // packages.add(new MyReactNativePackage());
+    packages.add(new MyAppPackage());
+    return packages;
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 6. Implement the JavaScript module
+
+I. Start with custom View manager:
+
+```tsx title="MyViewManager.tsx"
+import {requireNativeComponent} from 'react-native';
+
+export const MyViewManager =
+  requireNativeComponent('MyViewManager');
+```
+
+II. Then implement custom View calling the `create` method:
+
+```tsx title="MyView.tsx"
+import {useEffect, useRef} from 'react';
+import {
+  PixelRatio,
+  UIManager,
+  findNodeHandle,
+} from 'react-native';
+
+import {MyViewManager} from './my-view-manager';
+
+const createFragment = viewId =>
+  UIManager.dispatchViewManagerCommand(
+    viewId,
+    // we are calling the 'create' command
+    UIManager.MyViewManager.Commands.create.toString(),
+    [viewId],
+  );
+
+export const MyView = () => {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const viewId = findNodeHandle(ref.current);
+    createFragment(viewId);
+  }, []);
+
+  return (
+    <MyViewManager
+      style={{
+        // converts dpi to px, provide desired height
+        height: PixelRatio.getPixelSizeForLayoutSize(200),
+        // converts dpi to px, provide desired width
+        width: PixelRatio.getPixelSizeForLayoutSize(200),
+      }}
+      ref={ref}
+    />
+  );
+};
+```
+
+If you want to expose property setters using `@ReactProp` (or `@ReactPropGroup`) annotation see the [ImageView example](#imageview-example) above.
diff --git a/website/versioned_docs/version-0.83/legacy/native-modules-android.md b/website/versioned_docs/version-0.83/legacy/native-modules-android.md
index 82fe222f628..cec5857a441 100644
--- a/website/versioned_docs/version-0.83/legacy/native-modules-android.md
+++ b/website/versioned_docs/version-0.83/legacy/native-modules-android.md
@@ -315,7 +315,6 @@ At this point, you have set up the basic scaffolding for your native module in A
 Find a place in your application where you would like to add a call to the native module’s `createCalendarEvent()` method. Below is an example of a component, `NewModuleButton` you can add in your app. You can invoke the native module inside `NewModuleButton`'s `onPress()` function.
 
 ```tsx
-import React from 'react';
 import {NativeModules, Button} from 'react-native';
 
 const NewModuleButton = () => {
diff --git a/website/versioned_docs/version-0.83/legacy/native-modules-ios.md b/website/versioned_docs/version-0.83/legacy/native-modules-ios.md
index 6c33c64ec75..d3239e16a90 100644
--- a/website/versioned_docs/version-0.83/legacy/native-modules-ios.md
+++ b/website/versioned_docs/version-0.83/legacy/native-modules-ios.md
@@ -141,7 +141,6 @@ At this point you have set up the basic scaffolding for your native module in iO
 Find a place in your application where you would like to add a call to the native module’s `createCalendarEvent()` method. Below is an example of a component, `NewModuleButton` you can add in your app. You can invoke the native module inside `NewModuleButton`'s `onPress()` function.
 
 ```tsx
-import React from 'react';
 import {Button} from 'react-native';
 
 const NewModuleButton = () => {
diff --git a/website/versioned_docs/version-0.83/linking.md b/website/versioned_docs/version-0.83/linking.md
index ff9c1e1121e..18875244905 100644
--- a/website/versioned_docs/version-0.83/linking.md
+++ b/website/versioned_docs/version-0.83/linking.md
@@ -1,688 +1,688 @@
----
-id: linking
-title: Linking
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-`Linking` gives you a general interface to interact with both incoming and outgoing app links.
-
-Every Link (URL) has a URL Scheme, some websites are prefixed with `https://` or `http://` and the `http` is the URL Scheme. Let's call it scheme for short.
-
-In addition to `https`, you're likely also familiar with the `mailto` scheme. When you open a link with the mailto scheme, your operating system will open an installed mail application. Similarly, there are schemes for making phone calls and sending SMS. Read more about [built-in URL](#built-in-url-schemes) schemes below.
-
-Like using the mailto scheme, it's possible to link to other applications by using custom url schemes. For example, when you get a **Magic Link** email from Slack, the **Launch Slack** button is an anchor tag with an href that looks something like: `slack://secret/magic-login/other-secret`. Like with Slack, you can tell the operating system that you want to handle a custom scheme. When the Slack app opens, it receives the URL that was used to open it. This is often referred to as deep linking. Read more about how to [get the deep link](#get-the-deep-link) into your app.
-
-A custom URL scheme isn't the only way to open your application on mobile. For example, if you want to email someone a link to be opened on mobile, using a custom URL scheme isn't ideal because the user might open the email on a desktop, where the link wouldn't work. Instead, you should use standard `https` links, such as `https://www.myapp.io/records/1234546`. On mobile, these links can be configured to open your app. On Android, this feature is called **Deep Links**, while on iOS, it is known as **Universal Links**.
-
-### Built-in URL Schemes
-
-As mentioned in the introduction, there are some URL schemes for core functionality that exist on every platform. The following is a non-exhaustive list, but covers the most commonly used schemes.
-
-| Scheme           | Description                                | iOS | Android |
-| ---------------- | ------------------------------------------ | --- | ------- |
-| `mailto`         | Open mail app, eg: mailto: hello@world.dev | ✅  | ✅      |
-| `tel`            | Open phone app, eg: tel:+123456789         | ✅  | ✅      |
-| `sms`            | Open SMS app, eg: sms:+123456789           | ✅  | ✅      |
-| `https` / `http` | Open web browser app, eg: https://expo.dev | ✅  | ✅      |
-
-### Enabling Deep Links
-
-<div className="banner-native-code-required">
-  <h3>Projects with Native Code Only</h3>
-  <p>The following section only applies to projects with native code exposed. If you are using the managed Expo workflow, see the guide on <a href="https://docs.expo.dev/guides/linking/">Linking</a> in the Expo documentation for the appropriate alternative.</p>
-</div>
-
-If you want to enable deep links in your app, please read the below guide:
-
-<Tabs groupId="syntax" queryString defaultValue={constants.defaultPlatform} values={constants.platforms}>
-<TabItem value="android">
-
-:::info
-For instructions on how to add support for deep linking on Android, refer to [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](https://developer.android.com/training/app-indexing/deep-linking.html#adding-filters).
-:::
-
-If you wish to receive the intent in an existing instance of MainActivity, you may set the `launchMode` of MainActivity to `singleTask` in `AndroidManifest.xml`. See [`<activity>`](https://developer.android.com/guide/topics/manifest/activity-element.html) documentation for more information.
-
-```xml
-<activity
-  android:name=".MainActivity"
-  android:launchMode="singleTask">
-```
-
-</TabItem>
-<TabItem value="ios">
-
-:::note
-On iOS, you'll need to add the `LinkingIOS` folder into your header search paths as described in step 3 [here](linking-libraries-ios#step-3). If you also want to listen to incoming app links during your app's execution, you'll need to add the following lines to your `*AppDelegate.m`:
-
-<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
-<TabItem value="objc">
-
-```objc title="AppDelegate.mm"
-// iOS 9.x or newer
-#import <React/RCTLinkingManager.h>
-
-- (BOOL)application:(UIApplication *)application
-   openURL:(NSURL *)url
-   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
-{
-  return [RCTLinkingManager application:application openURL:url options:options];
-}
-```
-
-If your app is using [Universal Links](https://developer.apple.com/ios/universal-links/), you'll need to add the following code as well:
-
-```objc title="AppDelegate.mm"
-- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
- restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
-{
- return [RCTLinkingManager application:application
-                  continueUserActivity:userActivity
-                    restorationHandler:restorationHandler];
-}
-```
-
-</TabItem>
-<TabItem value="swift">
-
-```swift title="AppDelegate.swift"
-func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
-  return RCTLinkingManager.application(app, open: url, options: options)
-}
-```
-
-If your app is using [Universal Links](https://developer.apple.com/ios/universal-links/), you'll need to add the following code as well:
-
-```swift title="AppDelegate.swift"
-func application(
-  _ application: UIApplication,
-  continue userActivity: NSUserActivity,
-  restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
-    return RCTLinkingManager.application(
-      application,
-      continue: userActivity,
-      restorationHandler: restorationHandler
-    )
-  }
-```
-
-</TabItem>
-</Tabs>
-
-:::
-
-</TabItem>
-</Tabs>
-
-### Handling Deep Links
-
-There are two ways to handle URLs that open your app.
-
-#### 1. If the app is already open, the app is foregrounded and a Linking 'url' event is fired
-
-You can handle these events with `Linking.addEventListener('url', callback)` - it calls `callback({url})` with the linked URL
-
-#### 2. If the app is not already open, it is opened and the url is passed in as the initialURL
-
-You can handle these events with `Linking.getInitialURL()` - it returns a Promise that resolves to the URL, if there is one.
-
----
-
-## Example
-
-### Open Links and Deep Links (Universal Links)
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useCallback} from 'react';
-import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
-
-const supportedURL = 'https://google.com';
-
-const unsupportedURL = 'slack://open?team=123456';
-
-const OpenURLButton = ({url, children}) => {
-  const handlePress = useCallback(async () => {
-    // Checking if the link is supported for links with custom URL scheme.
-    const supported = await Linking.canOpenURL(url);
-
-    if (supported) {
-      // Opening the link with some app, if the URL scheme is "http" the web link should be opened
-      // by some browser in the mobile
-      await Linking.openURL(url);
-    } else {
-      Alert.alert(`Don't know how to open this URL: ${url}`);
-    }
-  }, [url]);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <OpenURLButton url={supportedURL}>Open Supported URL</OpenURLButton>
-      <OpenURLButton url={unsupportedURL}>Open Unsupported URL</OpenURLButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useCallback} from 'react';
-import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
-
-const supportedURL = 'https://google.com';
-
-const unsupportedURL = 'slack://open?team=123456';
-
-type OpenURLButtonProps = {
-  url: string;
-  children: string;
-};
-
-const OpenURLButton = ({url, children}: OpenURLButtonProps) => {
-  const handlePress = useCallback(async () => {
-    // Checking if the link is supported for links with custom URL scheme.
-    const supported = await Linking.canOpenURL(url);
-
-    if (supported) {
-      // Opening the link with some app, if the URL scheme is "http" the web link should be opened
-      // by some browser in the mobile
-      await Linking.openURL(url);
-    } else {
-      Alert.alert(`Don't know how to open this URL: ${url}`);
-    }
-  }, [url]);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <OpenURLButton url={supportedURL}>Open Supported URL</OpenURLButton>
-      <OpenURLButton url={unsupportedURL}>Open Unsupported URL</OpenURLButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### Open Custom Settings
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useCallback} from 'react';
-import {Button, Linking, StyleSheet, View} from 'react-native';
-
-const OpenSettingsButton = ({children}) => {
-  const handlePress = useCallback(async () => {
-    // Open the custom settings if the app has one
-    await Linking.openSettings();
-  }, []);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <OpenSettingsButton>Open Settings</OpenSettingsButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useCallback} from 'react';
-import {Button, Linking, StyleSheet, View} from 'react-native';
-
-type OpenSettingsButtonProps = {
-  children: string;
-};
-
-const OpenSettingsButton = ({children}: OpenSettingsButtonProps) => {
-  const handlePress = useCallback(async () => {
-    // Open the custom settings if the app has one
-    await Linking.openSettings();
-  }, []);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <OpenSettingsButton>Open Settings</OpenSettingsButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### Get the Deep Link
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useState, useEffect} from 'react';
-import {Linking, StyleSheet, Text, View} from 'react-native';
-
-const useInitialURL = () => {
-  const [url, setUrl] = useState(null);
-  const [processing, setProcessing] = useState(true);
-
-  useEffect(() => {
-    const getUrlAsync = async () => {
-      // Get the deep link used to open the app
-      const initialUrl = await Linking.getInitialURL();
-
-      // The setTimeout is just for testing purpose
-      setTimeout(() => {
-        setUrl(initialUrl);
-        setProcessing(false);
-      }, 1000);
-    };
-
-    getUrlAsync();
-  }, []);
-
-  return {url, processing};
-};
-
-const App = () => {
-  const {url: initialUrl, processing} = useInitialURL();
-
-  return (
-    <View style={styles.container}>
-      <Text>
-        {processing
-          ? 'Processing the initial url from a deep link'
-          : `The deep link is: ${initialUrl || 'None'}`}
-      </Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useState, useEffect} from 'react';
-import {Linking, StyleSheet, Text, View} from 'react-native';
-
-const useInitialURL = () => {
-  const [url, setUrl] = useState<string | null>(null);
-  const [processing, setProcessing] = useState(true);
-
-  useEffect(() => {
-    const getUrlAsync = async () => {
-      // Get the deep link used to open the app
-      const initialUrl = await Linking.getInitialURL();
-
-      // The setTimeout is just for testing purpose
-      setTimeout(() => {
-        setUrl(initialUrl);
-        setProcessing(false);
-      }, 1000);
-    };
-
-    getUrlAsync();
-  }, []);
-
-  return {url, processing};
-};
-
-const App = () => {
-  const {url: initialUrl, processing} = useInitialURL();
-
-  return (
-    <View style={styles.container}>
-      <Text>
-        {processing
-          ? 'Processing the initial url from a deep link'
-          : `The deep link is: ${initialUrl || 'None'}`}
-      </Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### Send Intents (Android)
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=android&ext=js
-import React, {useCallback} from 'react';
-import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
-
-const SendIntentButton = ({action, extras, children}) => {
-  const handlePress = useCallback(async () => {
-    try {
-      await Linking.sendIntent(action, extras);
-    } catch (e) {
-      Alert.alert(e.message);
-    }
-  }, [action, extras]);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <SendIntentButton action="android.intent.action.POWER_USAGE_SUMMARY">
-        Power Usage Summary
-      </SendIntentButton>
-      <SendIntentButton
-        action="android.settings.APP_NOTIFICATION_SETTINGS"
-        extras={[
-          {
-            key: 'android.provider.extra.APP_PACKAGE',
-            value: 'com.facebook.katana',
-          },
-        ]}>
-        App Notification Settings
-      </SendIntentButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Linking%20Example&ext=tsx
-import React, {useCallback} from 'react';
-import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
-
-type SendIntentButtonProps = {
-  action: string;
-  children: string;
-  extras?: Array<{
-    key: string;
-    value: string | number | boolean;
-  }>;
-};
-
-const SendIntentButton = ({
-  action,
-  extras,
-  children,
-}: SendIntentButtonProps) => {
-  const handlePress = useCallback(async () => {
-    try {
-      await Linking.sendIntent(action, extras);
-    } catch (e: any) {
-      Alert.alert(e.message);
-    }
-  }, [action, extras]);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <SendIntentButton action="android.intent.action.POWER_USAGE_SUMMARY">
-        Power Usage Summary
-      </SendIntentButton>
-      <SendIntentButton
-        action="android.settings.APP_NOTIFICATION_SETTINGS"
-        extras={[
-          {
-            key: 'android.provider.extra.APP_PACKAGE',
-            value: 'com.facebook.katana',
-          },
-        ]}>
-        App Notification Settings
-      </SendIntentButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-# Reference
-
-## Methods
-
-### `addEventListener()`
-
-```tsx
-static addEventListener(
-  type: 'url',
-  handler: (event: {url: string}) => void,
-): EmitterSubscription;
-```
-
-Add a handler to Linking changes by listening to the `url` event type and providing the handler.
-
----
-
-### `canOpenURL()`
-
-```tsx
-static canOpenURL(url: string): Promise<boolean>;
-```
-
-Determine whether or not an installed app can handle a given URL.
-
-The method returns a `Promise` object. When it is determined whether or not the given URL can be handled, the promise is resolved and the first parameter is whether or not it can be opened.
-
-The `Promise` will reject on Android if it was impossible to check if the URL can be opened or when targeting Android 11 (SDK 30) if you didn't specify the relevant intent queries in `AndroidManifest.xml`. Similarly on iOS, the promise will reject if you didn't add the specific scheme in the `LSApplicationQueriesSchemes` key inside `Info.plist` (see bellow).
-
-**Parameters:**
-
-| Name                                                     | Type   | Description      |
-| -------------------------------------------------------- | ------ | ---------------- |
-| url <div className="label basic required">Required</div> | string | The URL to open. |
-
-:::note
-For web URLs, the protocol (`"http://"`, `"https://"`) must be set accordingly!
-:::
-
-:::warning
-This method has limitations on iOS 9+. From [the official Apple documentation](https://developer.apple.com/documentation/uikit/uiapplication/1622952-canopenurl):
-
-- If your app is linked against an earlier version of iOS but is running in iOS 9.0 or later, you can call this method up to 50 times. After reaching that limit, subsequent calls always resolve to `false`. If the user reinstalls or upgrades the app, iOS resets the limit.
-- As of iOS 9, your app also needs to provide the `LSApplicationQueriesSchemes` key inside `Info.plist` or `canOpenURL()` will always resolve to `false`.
-  :::
-
-:::info
-When targeting Android 11 (SDK 30) you must specify the intents for the schemes you want to handle in `AndroidManifest.xml`. A list of common intents can be found [here](https://developer.android.com/guide/components/intents-common).
-
-For example to handle `https` schemes the following needs to be added to your manifest:
-
-```
-<manifest ...>
-  <queries>
-    <intent>
-      <action android:name="android.intent.action.VIEW" />
-      <data android:scheme="https"/>
-    </intent>
-  </queries>
-</manifest>
-```
-
-:::
-
----
-
-### `getInitialURL()`
-
-```tsx
-static getInitialURL(): Promise<string | null>;
-```
-
-If the app launch was triggered by an app link, it will give the link url, otherwise it will give `null`.
-
-:::info
-To support deep linking on Android, refer https://developer.android.com/training/app-indexing/deep-linking.html#handling-intents.
-:::
-
-:::tip
-`getInitialURL` may return `null` when Remote JS Debugging is active. Disable the debugger to ensure it gets passed.
-:::
-
----
-
-### `openSettings()`
-
-```tsx
-static openSettings(): Promise<void>;
-```
-
-Open the Settings app and displays the app’s custom settings, if it has any.
-
----
-
-### `openURL()`
-
-```tsx
-static openURL(url: string): Promise<any>;
-```
-
-Try to open the given `url` with any of the installed apps.
-
-You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386" on Android or "https://maps.apple.com/?ll=37.484847,-122.148386" on iOS), a contact, or any other URL that can be opened with the installed apps.
-
-The method returns a `Promise` object. If the user confirms the open dialog or the url automatically opens, the promise is resolved. If the user cancels the open dialog or there are no registered applications for the url, the promise is rejected.
-
-**Parameters:**
-
-| Name                                                     | Type   | Description      |
-| -------------------------------------------------------- | ------ | ---------------- |
-| url <div className="label basic required">Required</div> | string | The URL to open. |
-
-:::note
-This method will fail if the system doesn't know how to open the specified URL. If you're passing in a non-http(s) URL, it's best to check `canOpenURL()` first. For web URLs, the protocol (`"http://"`, `"https://"`) must be set accordingly!
-:::
-
-:::warning
-This method may behave differently in a simulator e.g. `"tel:"` links are not able to be handled in the iOS simulator as there's no access to the dialer app.
-:::
-
----
-
-### `sendIntent()` <div className="label android">Android</div>
-
-```tsx
-static sendIntent(
-  action: string,
-  extras?: Array<{key: string; value: string | number | boolean}>,
-): Promise<void>;
-```
-
-Launch an Android intent with extras.
-
-**Parameters:**
-
-| Name                                                        | Type                                                       |
-| ----------------------------------------------------------- | ---------------------------------------------------------- |
-| action <div className="label basic required">Required</div> | string                                                     |
-| extras                                                      | `Array<{key: string, value: string ｜ number ｜ boolean}>` |
+---
+id: linking
+title: Linking
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+`Linking` gives you a general interface to interact with both incoming and outgoing app links.
+
+Every Link (URL) has a URL Scheme, some websites are prefixed with `https://` or `http://` and the `http` is the URL Scheme. Let's call it scheme for short.
+
+In addition to `https`, you're likely also familiar with the `mailto` scheme. When you open a link with the mailto scheme, your operating system will open an installed mail application. Similarly, there are schemes for making phone calls and sending SMS. Read more about [built-in URL](#built-in-url-schemes) schemes below.
+
+Like using the mailto scheme, it's possible to link to other applications by using custom url schemes. For example, when you get a **Magic Link** email from Slack, the **Launch Slack** button is an anchor tag with an href that looks something like: `slack://secret/magic-login/other-secret`. Like with Slack, you can tell the operating system that you want to handle a custom scheme. When the Slack app opens, it receives the URL that was used to open it. This is often referred to as deep linking. Read more about how to [get the deep link](#get-the-deep-link) into your app.
+
+A custom URL scheme isn't the only way to open your application on mobile. For example, if you want to email someone a link to be opened on mobile, using a custom URL scheme isn't ideal because the user might open the email on a desktop, where the link wouldn't work. Instead, you should use standard `https` links, such as `https://www.myapp.io/records/1234546`. On mobile, these links can be configured to open your app. On Android, this feature is called **Deep Links**, while on iOS, it is known as **Universal Links**.
+
+### Built-in URL Schemes
+
+As mentioned in the introduction, there are some URL schemes for core functionality that exist on every platform. The following is a non-exhaustive list, but covers the most commonly used schemes.
+
+| Scheme           | Description                                | iOS | Android |
+| ---------------- | ------------------------------------------ | --- | ------- |
+| `mailto`         | Open mail app, eg: mailto: hello@world.dev | ✅  | ✅      |
+| `tel`            | Open phone app, eg: tel:+123456789         | ✅  | ✅      |
+| `sms`            | Open SMS app, eg: sms:+123456789           | ✅  | ✅      |
+| `https` / `http` | Open web browser app, eg: https://expo.dev | ✅  | ✅      |
+
+### Enabling Deep Links
+
+<div className="banner-native-code-required">
+  <h3>Projects with Native Code Only</h3>
+  <p>The following section only applies to projects with native code exposed. If you are using the managed Expo workflow, see the guide on <a href="https://docs.expo.dev/guides/linking/">Linking</a> in the Expo documentation for the appropriate alternative.</p>
+</div>
+
+If you want to enable deep links in your app, please read the below guide:
+
+<Tabs groupId="syntax" queryString defaultValue={constants.defaultPlatform} values={constants.platforms}>
+<TabItem value="android">
+
+:::info
+For instructions on how to add support for deep linking on Android, refer to [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](https://developer.android.com/training/app-indexing/deep-linking.html#adding-filters).
+:::
+
+If you wish to receive the intent in an existing instance of MainActivity, you may set the `launchMode` of MainActivity to `singleTask` in `AndroidManifest.xml`. See [`<activity>`](https://developer.android.com/guide/topics/manifest/activity-element.html) documentation for more information.
+
+```xml
+<activity
+  android:name=".MainActivity"
+  android:launchMode="singleTask">
+```
+
+</TabItem>
+<TabItem value="ios">
+
+:::note
+On iOS, you'll need to add the `LinkingIOS` folder into your header search paths as described in step 3 [here](linking-libraries-ios#step-3). If you also want to listen to incoming app links during your app's execution, you'll need to add the following lines to your `*AppDelegate.m`:
+
+<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
+<TabItem value="objc">
+
+```objc title="AppDelegate.mm"
+// iOS 9.x or newer
+#import <React/RCTLinkingManager.h>
+
+- (BOOL)application:(UIApplication *)application
+   openURL:(NSURL *)url
+   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
+{
+  return [RCTLinkingManager application:application openURL:url options:options];
+}
+```
+
+If your app is using [Universal Links](https://developer.apple.com/ios/universal-links/), you'll need to add the following code as well:
+
+```objc title="AppDelegate.mm"
+- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
+ restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
+{
+ return [RCTLinkingManager application:application
+                  continueUserActivity:userActivity
+                    restorationHandler:restorationHandler];
+}
+```
+
+</TabItem>
+<TabItem value="swift">
+
+```swift title="AppDelegate.swift"
+func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
+  return RCTLinkingManager.application(app, open: url, options: options)
+}
+```
+
+If your app is using [Universal Links](https://developer.apple.com/ios/universal-links/), you'll need to add the following code as well:
+
+```swift title="AppDelegate.swift"
+func application(
+  _ application: UIApplication,
+  continue userActivity: NSUserActivity,
+  restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
+    return RCTLinkingManager.application(
+      application,
+      continue: userActivity,
+      restorationHandler: restorationHandler
+    )
+  }
+```
+
+</TabItem>
+</Tabs>
+
+:::
+
+</TabItem>
+</Tabs>
+
+### Handling Deep Links
+
+There are two ways to handle URLs that open your app.
+
+#### 1. If the app is already open, the app is foregrounded and a Linking 'url' event is fired
+
+You can handle these events with `Linking.addEventListener('url', callback)` - it calls `callback({url})` with the linked URL
+
+#### 2. If the app is not already open, it is opened and the url is passed in as the initialURL
+
+You can handle these events with `Linking.getInitialURL()` - it returns a Promise that resolves to the URL, if there is one.
+
+---
+
+## Example
+
+### Open Links and Deep Links (Universal Links)
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
+import {useCallback} from 'react';
+import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
+
+const supportedURL = 'https://google.com';
+
+const unsupportedURL = 'slack://open?team=123456';
+
+const OpenURLButton = ({url, children}) => {
+  const handlePress = useCallback(async () => {
+    // Checking if the link is supported for links with custom URL scheme.
+    const supported = await Linking.canOpenURL(url);
+
+    if (supported) {
+      // Opening the link with some app, if the URL scheme is "http" the web link should be opened
+      // by some browser in the mobile
+      await Linking.openURL(url);
+    } else {
+      Alert.alert(`Don't know how to open this URL: ${url}`);
+    }
+  }, [url]);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <OpenURLButton url={supportedURL}>Open Supported URL</OpenURLButton>
+      <OpenURLButton url={unsupportedURL}>Open Unsupported URL</OpenURLButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
+import {useCallback} from 'react';
+import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
+
+const supportedURL = 'https://google.com';
+
+const unsupportedURL = 'slack://open?team=123456';
+
+type OpenURLButtonProps = {
+  url: string;
+  children: string;
+};
+
+const OpenURLButton = ({url, children}: OpenURLButtonProps) => {
+  const handlePress = useCallback(async () => {
+    // Checking if the link is supported for links with custom URL scheme.
+    const supported = await Linking.canOpenURL(url);
+
+    if (supported) {
+      // Opening the link with some app, if the URL scheme is "http" the web link should be opened
+      // by some browser in the mobile
+      await Linking.openURL(url);
+    } else {
+      Alert.alert(`Don't know how to open this URL: ${url}`);
+    }
+  }, [url]);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <OpenURLButton url={supportedURL}>Open Supported URL</OpenURLButton>
+      <OpenURLButton url={unsupportedURL}>Open Unsupported URL</OpenURLButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### Open Custom Settings
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
+import {useCallback} from 'react';
+import {Button, Linking, StyleSheet, View} from 'react-native';
+
+const OpenSettingsButton = ({children}) => {
+  const handlePress = useCallback(async () => {
+    // Open the custom settings if the app has one
+    await Linking.openSettings();
+  }, []);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <OpenSettingsButton>Open Settings</OpenSettingsButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
+import {useCallback} from 'react';
+import {Button, Linking, StyleSheet, View} from 'react-native';
+
+type OpenSettingsButtonProps = {
+  children: string;
+};
+
+const OpenSettingsButton = ({children}: OpenSettingsButtonProps) => {
+  const handlePress = useCallback(async () => {
+    // Open the custom settings if the app has one
+    await Linking.openSettings();
+  }, []);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <OpenSettingsButton>Open Settings</OpenSettingsButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### Get the Deep Link
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
+import {useState, useEffect} from 'react';
+import {Linking, StyleSheet, Text, View} from 'react-native';
+
+const useInitialURL = () => {
+  const [url, setUrl] = useState(null);
+  const [processing, setProcessing] = useState(true);
+
+  useEffect(() => {
+    const getUrlAsync = async () => {
+      // Get the deep link used to open the app
+      const initialUrl = await Linking.getInitialURL();
+
+      // The setTimeout is just for testing purpose
+      setTimeout(() => {
+        setUrl(initialUrl);
+        setProcessing(false);
+      }, 1000);
+    };
+
+    getUrlAsync();
+  }, []);
+
+  return {url, processing};
+};
+
+const App = () => {
+  const {url: initialUrl, processing} = useInitialURL();
+
+  return (
+    <View style={styles.container}>
+      <Text>
+        {processing
+          ? 'Processing the initial url from a deep link'
+          : `The deep link is: ${initialUrl || 'None'}`}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
+import {useState, useEffect} from 'react';
+import {Linking, StyleSheet, Text, View} from 'react-native';
+
+const useInitialURL = () => {
+  const [url, setUrl] = useState<string | null>(null);
+  const [processing, setProcessing] = useState(true);
+
+  useEffect(() => {
+    const getUrlAsync = async () => {
+      // Get the deep link used to open the app
+      const initialUrl = await Linking.getInitialURL();
+
+      // The setTimeout is just for testing purpose
+      setTimeout(() => {
+        setUrl(initialUrl);
+        setProcessing(false);
+      }, 1000);
+    };
+
+    getUrlAsync();
+  }, []);
+
+  return {url, processing};
+};
+
+const App = () => {
+  const {url: initialUrl, processing} = useInitialURL();
+
+  return (
+    <View style={styles.container}>
+      <Text>
+        {processing
+          ? 'Processing the initial url from a deep link'
+          : `The deep link is: ${initialUrl || 'None'}`}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### Send Intents (Android)
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=android&ext=js
+import {useCallback} from 'react';
+import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
+
+const SendIntentButton = ({action, extras, children}) => {
+  const handlePress = useCallback(async () => {
+    try {
+      await Linking.sendIntent(action, extras);
+    } catch (e) {
+      Alert.alert(e.message);
+    }
+  }, [action, extras]);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <SendIntentButton action="android.intent.action.POWER_USAGE_SUMMARY">
+        Power Usage Summary
+      </SendIntentButton>
+      <SendIntentButton
+        action="android.settings.APP_NOTIFICATION_SETTINGS"
+        extras={[
+          {
+            key: 'android.provider.extra.APP_PACKAGE',
+            value: 'com.facebook.katana',
+          },
+        ]}>
+        App Notification Settings
+      </SendIntentButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Linking%20Example&ext=tsx
+import {useCallback} from 'react';
+import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
+
+type SendIntentButtonProps = {
+  action: string;
+  children: string;
+  extras?: Array<{
+    key: string;
+    value: string | number | boolean;
+  }>;
+};
+
+const SendIntentButton = ({
+  action,
+  extras,
+  children,
+}: SendIntentButtonProps) => {
+  const handlePress = useCallback(async () => {
+    try {
+      await Linking.sendIntent(action, extras);
+    } catch (e: any) {
+      Alert.alert(e.message);
+    }
+  }, [action, extras]);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <SendIntentButton action="android.intent.action.POWER_USAGE_SUMMARY">
+        Power Usage Summary
+      </SendIntentButton>
+      <SendIntentButton
+        action="android.settings.APP_NOTIFICATION_SETTINGS"
+        extras={[
+          {
+            key: 'android.provider.extra.APP_PACKAGE',
+            value: 'com.facebook.katana',
+          },
+        ]}>
+        App Notification Settings
+      </SendIntentButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+# Reference
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+  type: 'url',
+  handler: (event: {url: string}) => void,
+): EmitterSubscription;
+```
+
+Add a handler to Linking changes by listening to the `url` event type and providing the handler.
+
+---
+
+### `canOpenURL()`
+
+```tsx
+static canOpenURL(url: string): Promise<boolean>;
+```
+
+Determine whether or not an installed app can handle a given URL.
+
+The method returns a `Promise` object. When it is determined whether or not the given URL can be handled, the promise is resolved and the first parameter is whether or not it can be opened.
+
+The `Promise` will reject on Android if it was impossible to check if the URL can be opened or when targeting Android 11 (SDK 30) if you didn't specify the relevant intent queries in `AndroidManifest.xml`. Similarly on iOS, the promise will reject if you didn't add the specific scheme in the `LSApplicationQueriesSchemes` key inside `Info.plist` (see bellow).
+
+**Parameters:**
+
+| Name                                                     | Type   | Description      |
+| -------------------------------------------------------- | ------ | ---------------- |
+| url <div className="label basic required">Required</div> | string | The URL to open. |
+
+:::note
+For web URLs, the protocol (`"http://"`, `"https://"`) must be set accordingly!
+:::
+
+:::warning
+This method has limitations on iOS 9+. From [the official Apple documentation](https://developer.apple.com/documentation/uikit/uiapplication/1622952-canopenurl):
+
+- If your app is linked against an earlier version of iOS but is running in iOS 9.0 or later, you can call this method up to 50 times. After reaching that limit, subsequent calls always resolve to `false`. If the user reinstalls or upgrades the app, iOS resets the limit.
+- As of iOS 9, your app also needs to provide the `LSApplicationQueriesSchemes` key inside `Info.plist` or `canOpenURL()` will always resolve to `false`.
+  :::
+
+:::info
+When targeting Android 11 (SDK 30) you must specify the intents for the schemes you want to handle in `AndroidManifest.xml`. A list of common intents can be found [here](https://developer.android.com/guide/components/intents-common).
+
+For example to handle `https` schemes the following needs to be added to your manifest:
+
+```
+<manifest ...>
+  <queries>
+    <intent>
+      <action android:name="android.intent.action.VIEW" />
+      <data android:scheme="https"/>
+    </intent>
+  </queries>
+</manifest>
+```
+
+:::
+
+---
+
+### `getInitialURL()`
+
+```tsx
+static getInitialURL(): Promise<string | null>;
+```
+
+If the app launch was triggered by an app link, it will give the link url, otherwise it will give `null`.
+
+:::info
+To support deep linking on Android, refer https://developer.android.com/training/app-indexing/deep-linking.html#handling-intents.
+:::
+
+:::tip
+`getInitialURL` may return `null` when Remote JS Debugging is active. Disable the debugger to ensure it gets passed.
+:::
+
+---
+
+### `openSettings()`
+
+```tsx
+static openSettings(): Promise<void>;
+```
+
+Open the Settings app and displays the app’s custom settings, if it has any.
+
+---
+
+### `openURL()`
+
+```tsx
+static openURL(url: string): Promise<any>;
+```
+
+Try to open the given `url` with any of the installed apps.
+
+You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386" on Android or "https://maps.apple.com/?ll=37.484847,-122.148386" on iOS), a contact, or any other URL that can be opened with the installed apps.
+
+The method returns a `Promise` object. If the user confirms the open dialog or the url automatically opens, the promise is resolved. If the user cancels the open dialog or there are no registered applications for the url, the promise is rejected.
+
+**Parameters:**
+
+| Name                                                     | Type   | Description      |
+| -------------------------------------------------------- | ------ | ---------------- |
+| url <div className="label basic required">Required</div> | string | The URL to open. |
+
+:::note
+This method will fail if the system doesn't know how to open the specified URL. If you're passing in a non-http(s) URL, it's best to check `canOpenURL()` first. For web URLs, the protocol (`"http://"`, `"https://"`) must be set accordingly!
+:::
+
+:::warning
+This method may behave differently in a simulator e.g. `"tel:"` links are not able to be handled in the iOS simulator as there's no access to the dialer app.
+:::
+
+---
+
+### `sendIntent()` <div className="label android">Android</div>
+
+```tsx
+static sendIntent(
+  action: string,
+  extras?: Array<{key: string; value: string | number | boolean}>,
+): Promise<void>;
+```
+
+Launch an Android intent with extras.
+
+**Parameters:**
+
+| Name                                                        | Type                                                       |
+| ----------------------------------------------------------- | ---------------------------------------------------------- |
+| action <div className="label basic required">Required</div> | string                                                     |
+| extras                                                      | `Array<{key: string, value: string ｜ number ｜ boolean}>` |
diff --git a/website/versioned_docs/version-0.83/modal.md b/website/versioned_docs/version-0.83/modal.md
index c929724719d..b58cd38d915 100644
--- a/website/versioned_docs/version-0.83/modal.md
+++ b/website/versioned_docs/version-0.83/modal.md
@@ -1,276 +1,276 @@
----
-id: modal
-title: Modal
----
-
-The Modal component is a basic way to present content above an enclosing view.
-
-## Example
-
-```SnackPlayer name=Modal&supportedPlatforms=android,ios
-import React, {useState} from 'react';
-import {Alert, Modal, StyleSheet, Text, Pressable, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [modalVisible, setModalVisible] = useState(false);
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.centeredView}>
-        <Modal
-          animationType="slide"
-          transparent={true}
-          visible={modalVisible}
-          onRequestClose={() => {
-            Alert.alert('Modal has been closed.');
-            setModalVisible(!modalVisible);
-          }}>
-          <View style={styles.centeredView}>
-            <View style={styles.modalView}>
-              <Text style={styles.modalText}>Hello World!</Text>
-              <Pressable
-                style={[styles.button, styles.buttonClose]}
-                onPress={() => setModalVisible(!modalVisible)}>
-                <Text style={styles.textStyle}>Hide Modal</Text>
-              </Pressable>
-            </View>
-          </View>
-        </Modal>
-        <Pressable
-          style={[styles.button, styles.buttonOpen]}
-          onPress={() => setModalVisible(true)}>
-          <Text style={styles.textStyle}>Show Modal</Text>
-        </Pressable>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  centeredView: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  modalView: {
-    margin: 20,
-    backgroundColor: 'white',
-    borderRadius: 20,
-    padding: 35,
-    alignItems: 'center',
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 4,
-    elevation: 5,
-  },
-  button: {
-    borderRadius: 20,
-    padding: 10,
-    elevation: 2,
-  },
-  buttonOpen: {
-    backgroundColor: '#F194FF',
-  },
-  buttonClose: {
-    backgroundColor: '#2196F3',
-  },
-  textStyle: {
-    color: 'white',
-    fontWeight: 'bold',
-    textAlign: 'center',
-  },
-  modalText: {
-    marginBottom: 15,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Props
-
-### [View Props](view.md#props)
-
-Inherits [View Props](view.md#props).
-
----
-
-### 🗑️ `animated`
-
-:::warning[Deprecated]
-Use the [`animationType`](modal.md#animationtype) prop instead.
-:::
-
----
-
-### `animationType`
-
-The `animationType` prop controls how the modal animates.
-
-Possible values:
-
-- `slide` slides in from the bottom
-- `fade` fades into view
-- `none` appears without an animation
-
-| Type                                | Default |
-| ----------------------------------- | ------- |
-| enum(`'none'`, `'slide'`, `'fade'`) | `none`  |
-
----
-
-### `backdropColor`
-
-The `backdropColor` of the modal (or background color of the modal's container.) Defaults to `white` if not provided and transparent is `false`. Ignored if `transparent` is `true`.
-
-| Type            | Default |
-| --------------- | ------- |
-| [color](colors) | white   |
-
----
-
-### `hardwareAccelerated` <div className="label android">Android</div>
-
-The `hardwareAccelerated` prop controls whether to force hardware acceleration for the underlying window.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `navigationBarTranslucent` <div className="label android">Android</div>
-
-The `navigationBarTranslucent` prop determines whether your modal should go under the system navigation bar. However, `statusBarTranslucent` also needs to be set to `true` to make navigation bar translucent.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `onDismiss` <div className="label ios">iOS</div>
-
-The `onDismiss` prop allows passing a function that will be called once the modal has been dismissed.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onOrientationChange` <div className="label ios">iOS</div>
-
-The `onOrientationChange` callback is called when the orientation changes while the modal is being displayed. The orientation provided is only 'portrait' or 'landscape'. This callback is also called on initial render, regardless of the current orientation.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `allowSwipeDismissal` <div className="label ios">iOS</div>
-
-Controls whether the modal can be dismissed by swiping down on iOS.
-This requires you to implement the `onRequestClose` prop to handle the dismissal.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `ref`
-
-A ref setter that will be assigned an [element node](element-nodes) when mounted.
-
----
-
-### `onRequestClose`
-
-The `onRequestClose` callback is called when the user taps the hardware back button on Android or the menu button on Apple TV. Because of this required prop, be aware that `BackHandler` events will not be emitted as long as the modal is open.
-On iOS, this callback is called when a Modal is being dismissed using a drag gesture when `presentationStyle` is `pageSheet` or `formSheet`. When `allowSwipeDismissal` is enabled this callback will be called after dismissing the modal.
-
-| Type                                                                                                                                                                                           |
-| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| function <div className="label basic required">Required</div><div className="label android">Android</div><div className="label tv">TV</div><hr />function <div className="label ios">iOS</div> |
-
----
-
-### `onShow`
-
-The `onShow` prop allows passing a function that will be called once the modal has been shown.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `presentationStyle` <div className="label ios">iOS</div>
-
-The `presentationStyle` prop controls how the modal appears (generally on larger devices such as iPad or plus-sized iPhones). See https://developer.apple.com/reference/uikit/uimodalpresentationstyle for details.
-
-Possible values:
-
-- `fullScreen` covers the screen completely
-- `pageSheet` covers portrait-width view centered (only on larger devices)
-- `formSheet` covers narrow-width view centered (only on larger devices)
-- `overFullScreen` covers the screen completely, but allows transparency
-
-| Type                                                                   | Default                                                                             |
-| ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
-| enum(`'fullScreen'`, `'pageSheet'`, `'formSheet'`, `'overFullScreen'`) | `fullScreen` if `transparent={false}`<hr />`overFullScreen` if `transparent={true}` |
-
----
-
-### `statusBarTranslucent` <div className="label android">Android</div>
-
-The `statusBarTranslucent` prop determines whether your modal should go under the system statusbar.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `supportedOrientations` <div className="label ios">iOS</div>
-
-The `supportedOrientations` prop allows the modal to be rotated to any of the specified orientations. On iOS, the modal is still restricted by what's specified in your app's Info.plist's UISupportedInterfaceOrientations field.
-
-:::note
-When using `presentationStyle` of `pageSheet` or `formSheet`, this property will be ignored on iOS.
-:::
-
-| Type                                                                                                           | Default        |
-| -------------------------------------------------------------------------------------------------------------- | -------------- |
-| array of enums(`'portrait'`, `'portrait-upside-down'`, `'landscape'`, `'landscape-left'`, `'landscape-right'`) | `['portrait']` |
-
----
-
-### `transparent`
-
-The `transparent` prop determines whether your modal will fill the entire view. Setting this to `true` will render the modal over a transparent background.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `visible`
-
-The `visible` prop determines whether your modal is visible.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `true`  |
+---
+id: modal
+title: Modal
+---
+
+The Modal component is a basic way to present content above an enclosing view.
+
+## Example
+
+```SnackPlayer name=Modal&supportedPlatforms=android,ios
+import {useState} from 'react';
+import {Alert, Modal, StyleSheet, Text, Pressable, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [modalVisible, setModalVisible] = useState(false);
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.centeredView}>
+        <Modal
+          animationType="slide"
+          transparent={true}
+          visible={modalVisible}
+          onRequestClose={() => {
+            Alert.alert('Modal has been closed.');
+            setModalVisible(!modalVisible);
+          }}>
+          <View style={styles.centeredView}>
+            <View style={styles.modalView}>
+              <Text style={styles.modalText}>Hello World!</Text>
+              <Pressable
+                style={[styles.button, styles.buttonClose]}
+                onPress={() => setModalVisible(!modalVisible)}>
+                <Text style={styles.textStyle}>Hide Modal</Text>
+              </Pressable>
+            </View>
+          </View>
+        </Modal>
+        <Pressable
+          style={[styles.button, styles.buttonOpen]}
+          onPress={() => setModalVisible(true)}>
+          <Text style={styles.textStyle}>Show Modal</Text>
+        </Pressable>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  centeredView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalView: {
+    margin: 20,
+    backgroundColor: 'white',
+    borderRadius: 20,
+    padding: 35,
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  button: {
+    borderRadius: 20,
+    padding: 10,
+    elevation: 2,
+  },
+  buttonOpen: {
+    backgroundColor: '#F194FF',
+  },
+  buttonClose: {
+    backgroundColor: '#2196F3',
+  },
+  textStyle: {
+    color: 'white',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  modalText: {
+    marginBottom: 15,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Props
+
+### [View Props](view.md#props)
+
+Inherits [View Props](view.md#props).
+
+---
+
+### 🗑️ `animated`
+
+:::warning[Deprecated]
+Use the [`animationType`](modal.md#animationtype) prop instead.
+:::
+
+---
+
+### `animationType`
+
+The `animationType` prop controls how the modal animates.
+
+Possible values:
+
+- `slide` slides in from the bottom
+- `fade` fades into view
+- `none` appears without an animation
+
+| Type                                | Default |
+| ----------------------------------- | ------- |
+| enum(`'none'`, `'slide'`, `'fade'`) | `none`  |
+
+---
+
+### `backdropColor`
+
+The `backdropColor` of the modal (or background color of the modal's container.) Defaults to `white` if not provided and transparent is `false`. Ignored if `transparent` is `true`.
+
+| Type            | Default |
+| --------------- | ------- |
+| [color](colors) | white   |
+
+---
+
+### `hardwareAccelerated` <div className="label android">Android</div>
+
+The `hardwareAccelerated` prop controls whether to force hardware acceleration for the underlying window.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `navigationBarTranslucent` <div className="label android">Android</div>
+
+The `navigationBarTranslucent` prop determines whether your modal should go under the system navigation bar. However, `statusBarTranslucent` also needs to be set to `true` to make navigation bar translucent.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `onDismiss` <div className="label ios">iOS</div>
+
+The `onDismiss` prop allows passing a function that will be called once the modal has been dismissed.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onOrientationChange` <div className="label ios">iOS</div>
+
+The `onOrientationChange` callback is called when the orientation changes while the modal is being displayed. The orientation provided is only 'portrait' or 'landscape'. This callback is also called on initial render, regardless of the current orientation.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `allowSwipeDismissal` <div className="label ios">iOS</div>
+
+Controls whether the modal can be dismissed by swiping down on iOS.
+This requires you to implement the `onRequestClose` prop to handle the dismissal.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `ref`
+
+A ref setter that will be assigned an [element node](element-nodes) when mounted.
+
+---
+
+### `onRequestClose`
+
+The `onRequestClose` callback is called when the user taps the hardware back button on Android or the menu button on Apple TV. Because of this required prop, be aware that `BackHandler` events will not be emitted as long as the modal is open.
+On iOS, this callback is called when a Modal is being dismissed using a drag gesture when `presentationStyle` is `pageSheet` or `formSheet`. When `allowSwipeDismissal` is enabled this callback will be called after dismissing the modal.
+
+| Type                                                                                                                                                                                           |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| function <div className="label basic required">Required</div><div className="label android">Android</div><div className="label tv">TV</div><hr />function <div className="label ios">iOS</div> |
+
+---
+
+### `onShow`
+
+The `onShow` prop allows passing a function that will be called once the modal has been shown.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `presentationStyle` <div className="label ios">iOS</div>
+
+The `presentationStyle` prop controls how the modal appears (generally on larger devices such as iPad or plus-sized iPhones). See https://developer.apple.com/reference/uikit/uimodalpresentationstyle for details.
+
+Possible values:
+
+- `fullScreen` covers the screen completely
+- `pageSheet` covers portrait-width view centered (only on larger devices)
+- `formSheet` covers narrow-width view centered (only on larger devices)
+- `overFullScreen` covers the screen completely, but allows transparency
+
+| Type                                                                   | Default                                                                             |
+| ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
+| enum(`'fullScreen'`, `'pageSheet'`, `'formSheet'`, `'overFullScreen'`) | `fullScreen` if `transparent={false}`<hr />`overFullScreen` if `transparent={true}` |
+
+---
+
+### `statusBarTranslucent` <div className="label android">Android</div>
+
+The `statusBarTranslucent` prop determines whether your modal should go under the system statusbar.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `supportedOrientations` <div className="label ios">iOS</div>
+
+The `supportedOrientations` prop allows the modal to be rotated to any of the specified orientations. On iOS, the modal is still restricted by what's specified in your app's Info.plist's UISupportedInterfaceOrientations field.
+
+:::note
+When using `presentationStyle` of `pageSheet` or `formSheet`, this property will be ignored on iOS.
+:::
+
+| Type                                                                                                           | Default        |
+| -------------------------------------------------------------------------------------------------------------- | -------------- |
+| array of enums(`'portrait'`, `'portrait-upside-down'`, `'landscape'`, `'landscape-left'`, `'landscape-right'`) | `['portrait']` |
+
+---
+
+### `transparent`
+
+The `transparent` prop determines whether your modal will fill the entire view. Setting this to `true` will render the modal over a transparent background.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `visible`
+
+The `visible` prop determines whether your modal is visible.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `true`  |
diff --git a/website/versioned_docs/version-0.83/navigation.md b/website/versioned_docs/version-0.83/navigation.md
index 363b48b1261..4d9586bf801 100644
--- a/website/versioned_docs/version-0.83/navigation.md
+++ b/website/versioned_docs/version-0.83/navigation.md
@@ -64,7 +64,6 @@ Now you are ready to build and run your app on the device/simulator.
 Now you can create an app with a home screen and a profile screen:
 
 ```tsx
-import * as React from 'react';
 import {createStaticNavigation} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 
diff --git a/website/versioned_docs/version-0.83/network.md b/website/versioned_docs/version-0.83/network.md
index 0c4dedcfa40..a11a1197d26 100644
--- a/website/versioned_docs/version-0.83/network.md
+++ b/website/versioned_docs/version-0.83/network.md
@@ -1,286 +1,286 @@
----
-id: network
-title: Networking
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may need to fetch a chunk of static content from another server.
-
-## Using Fetch
-
-React Native provides the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) for your networking needs. Fetch will seem familiar if you have used `XMLHttpRequest` or other networking APIs before. You may refer to MDN's guide on [Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) for additional information.
-
-### Making requests
-
-In order to fetch content from an arbitrary URL, you can pass the URL to fetch:
-
-```ts
-fetch('https://mywebsite.com/mydata.json');
-```
-
-Fetch also takes an optional second argument that allows you to customize the HTTP request. You may want to specify additional headers, or make a POST request:
-
-```ts
-fetch('https://mywebsite.com/endpoint/', {
-  method: 'POST',
-  headers: {
-    Accept: 'application/json',
-    'Content-Type': 'application/json',
-  },
-  body: JSON.stringify({
-    firstParam: 'yourValue',
-    secondParam: 'yourOtherValue',
-  }),
-});
-```
-
-Take a look at the [Fetch Request docs](https://developer.mozilla.org/en-US/docs/Web/API/Request) for a full list of properties.
-
-### Handling the response
-
-The above examples show how you can make a request. In many cases, you will want to do something with the response.
-
-Networking is an inherently asynchronous operation. Fetch method will return a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that makes it straightforward to write code that works in an asynchronous manner:
-
-```ts
-const getMoviesFromApi = () => {
-  return fetch('https://reactnative.dev/movies.json')
-    .then(response => response.json())
-    .then(json => {
-      return json.movies;
-    })
-    .catch(error => {
-      console.error(error);
-    });
-};
-```
-
-You can also use the `async` / `await` syntax in a React Native app:
-
-```ts
-const getMoviesFromApiAsync = async () => {
-  try {
-    const response = await fetch(
-      'https://reactnative.dev/movies.json',
-    );
-    const json = await response.json();
-    return json.movies;
-  } catch (error) {
-    console.error(error);
-  }
-};
-```
-
-Don't forget to catch any errors that may be thrown by `fetch`, otherwise they will be dropped silently.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Fetch%20Example&ext=js
-import React, {useEffect, useState} from 'react';
-import {ActivityIndicator, FlatList, Text, View} from 'react-native';
-
-const App = () => {
-  const [isLoading, setLoading] = useState(true);
-  const [data, setData] = useState([]);
-
-  const getMovies = async () => {
-    try {
-      const response = await fetch('https://reactnative.dev/movies.json');
-      const json = await response.json();
-      setData(json.movies);
-    } catch (error) {
-      console.error(error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    getMovies();
-  }, []);
-
-  return (
-    <View style={{flex: 1, padding: 24}}>
-      {isLoading ? (
-        <ActivityIndicator />
-      ) : (
-        <FlatList
-          data={data}
-          keyExtractor={({id}) => id}
-          renderItem={({item}) => (
-            <Text>
-              {item.title}, {item.releaseYear}
-            </Text>
-          )}
-        />
-      )}
-    </View>
-  );
-};
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Fetch%20Example&ext=tsx
-import React, {useEffect, useState} from 'react';
-import {ActivityIndicator, FlatList, Text, View} from 'react-native';
-
-type Movie = {
-  id: string;
-  title: string;
-  releaseYear: string;
-};
-
-type MoviesResponse = {
-  title: string;
-  description: string;
-  movies: Movie[];
-};
-
-const App = () => {
-  const [isLoading, setLoading] = useState(true);
-  const [data, setData] = useState<Movie[]>([]);
-
-  const getMovies = async () => {
-    try {
-      const response = await fetch('https://reactnative.dev/movies.json');
-      const json = (await response.json()) as MoviesResponse;
-      setData(json.movies);
-    } catch (error) {
-      console.error(error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    getMovies();
-  }, []);
-
-  return (
-    <View style={{flex: 1, padding: 24}}>
-      {isLoading ? (
-        <ActivityIndicator />
-      ) : (
-        <FlatList
-          data={data}
-          keyExtractor={({id}) => id}
-          renderItem={({item}) => (
-            <Text>
-              {item.title}, {item.releaseYear}
-            </Text>
-          )}
-        />
-      )}
-    </View>
-  );
-};
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-:::info
-By default, iOS 9.0 or later enforce App Transport Security (ATS). ATS requires any HTTP connection to use HTTPS. If you need to fetch from a cleartext URL (one that begins with `http`) you will first need to [add an ATS exception](integration-with-existing-apps.md#test-your-integration). If you know ahead of time what domains you will need access to, it is more secure to add exceptions only for those domains; if the domains are not known until runtime you can [disable ATS completely](publishing-to-app-store.md#1-enable-app-transport-security). Note however that from January 2017, [Apple's App Store review will require reasonable justification for disabling ATS](https://forums.developer.apple.com/thread/48979). See [Apple's documentation](https://developer.apple.com/library/ios/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html#//apple_ref/doc/uid/TP40009251-SW33) for more information.
-:::
-
-:::tip
-On Android, as of API Level 28, clear text traffic is also blocked by default. This behaviour can be overridden by setting [`android:usesCleartextTraffic`](https://developer.android.com/guide/topics/manifest/application-element#usesCleartextTraffic) in the app manifest file.
-:::
-
-## Using Other Networking Libraries
-
-The [XMLHttpRequest API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) is built into React Native. This means that you can use third party libraries such as [frisbee](https://github.com/niftylettuce/frisbee) or [axios](https://github.com/axios/axios) that depend on it, or you can use the XMLHttpRequest API directly if you prefer.
-
-```ts
-const request = new XMLHttpRequest();
-request.onreadystatechange = e => {
-  if (request.readyState !== 4) {
-    return;
-  }
-
-  if (request.status === 200) {
-    console.log('success', request.responseText);
-  } else {
-    console.warn('error');
-  }
-};
-
-request.open('GET', 'https://mywebsite.com/endpoint/');
-request.send();
-```
-
-:::warning[Caution]
-The security model for XMLHttpRequest is different than on web as there is no concept of [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) in native apps.
-:::
-
-## WebSocket Support
-
-React Native also supports [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket), a protocol which provides full-duplex communication channels over a single TCP connection.
-
-```ts
-const ws = new WebSocket('ws://host.com/path');
-
-ws.onopen = () => {
-  // connection opened
-  ws.send('something'); // send a message
-};
-
-ws.onmessage = e => {
-  // a message was received
-  console.log(e.data);
-};
-
-ws.onerror = e => {
-  // an error occurred
-  console.log(e.message);
-};
-
-ws.onclose = e => {
-  // connection closed
-  console.log(e.code, e.reason);
-};
-```
-
-## Known Issues with `fetch` and cookie based authentication
-
-The following options are currently not working with `fetch`
-
-- `redirect:manual`
-- `credentials:omit`
-
-* Having same name headers on Android will result in only the latest one being present. A temporary solution can be found here: https://github.com/facebook/react-native/issues/18837#issuecomment-398779994.
-* Cookie based authentication is currently unstable. You can view some of the issues raised here: https://github.com/facebook/react-native/issues/23185
-* As a minimum on iOS, when redirected through a `302`, if a `Set-Cookie` header is present, the cookie is not set properly. Since the redirect cannot be handled manually this might cause a scenario where infinite requests occur if the redirect is the result of an expired session.
-
-## Configuring NSURLSession on iOS
-
-For some applications it may be appropriate to provide a custom `NSURLSessionConfiguration` for the underlying `NSURLSession` that is used for network requests in a React Native application running on iOS. For instance, one may need to set a custom user agent string for all network requests coming from the app or supply `NSURLSession` with an ephemeral `NSURLSessionConfiguration`. The function `RCTSetCustomNSURLSessionConfigurationProvider` allows for such customization. Remember to add the following import to the file in which `RCTSetCustomNSURLSessionConfigurationProvider` will be called:
-
-```objectivec
-#import <React/RCTHTTPRequestHandler.h>
-```
-
-`RCTSetCustomNSURLSessionConfigurationProvider` should be called early in the application life cycle such that it is readily available when needed by React, for instance:
-
-```objectivec
--(void)application:(__unused UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
-
-  // set RCTSetCustomNSURLSessionConfigurationProvider
-  RCTSetCustomNSURLSessionConfigurationProvider(^NSURLSessionConfiguration *{
-     NSURLSessionConfiguration *configuration = [NSURLSessionConfiguration defaultSessionConfiguration];
-     // configure the session
-     return configuration;
-  });
-
-  // set up React
-  _bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
-}
-```
+---
+id: network
+title: Networking
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may need to fetch a chunk of static content from another server.
+
+## Using Fetch
+
+React Native provides the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) for your networking needs. Fetch will seem familiar if you have used `XMLHttpRequest` or other networking APIs before. You may refer to MDN's guide on [Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) for additional information.
+
+### Making requests
+
+In order to fetch content from an arbitrary URL, you can pass the URL to fetch:
+
+```ts
+fetch('https://mywebsite.com/mydata.json');
+```
+
+Fetch also takes an optional second argument that allows you to customize the HTTP request. You may want to specify additional headers, or make a POST request:
+
+```ts
+fetch('https://mywebsite.com/endpoint/', {
+  method: 'POST',
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json',
+  },
+  body: JSON.stringify({
+    firstParam: 'yourValue',
+    secondParam: 'yourOtherValue',
+  }),
+});
+```
+
+Take a look at the [Fetch Request docs](https://developer.mozilla.org/en-US/docs/Web/API/Request) for a full list of properties.
+
+### Handling the response
+
+The above examples show how you can make a request. In many cases, you will want to do something with the response.
+
+Networking is an inherently asynchronous operation. Fetch method will return a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that makes it straightforward to write code that works in an asynchronous manner:
+
+```ts
+const getMoviesFromApi = () => {
+  return fetch('https://reactnative.dev/movies.json')
+    .then(response => response.json())
+    .then(json => {
+      return json.movies;
+    })
+    .catch(error => {
+      console.error(error);
+    });
+};
+```
+
+You can also use the `async` / `await` syntax in a React Native app:
+
+```ts
+const getMoviesFromApiAsync = async () => {
+  try {
+    const response = await fetch(
+      'https://reactnative.dev/movies.json',
+    );
+    const json = await response.json();
+    return json.movies;
+  } catch (error) {
+    console.error(error);
+  }
+};
+```
+
+Don't forget to catch any errors that may be thrown by `fetch`, otherwise they will be dropped silently.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Fetch%20Example&ext=js
+import {useEffect, useState} from 'react';
+import {ActivityIndicator, FlatList, Text, View} from 'react-native';
+
+const App = () => {
+  const [isLoading, setLoading] = useState(true);
+  const [data, setData] = useState([]);
+
+  const getMovies = async () => {
+    try {
+      const response = await fetch('https://reactnative.dev/movies.json');
+      const json = await response.json();
+      setData(json.movies);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    getMovies();
+  }, []);
+
+  return (
+    <View style={{flex: 1, padding: 24}}>
+      {isLoading ? (
+        <ActivityIndicator />
+      ) : (
+        <FlatList
+          data={data}
+          keyExtractor={({id}) => id}
+          renderItem={({item}) => (
+            <Text>
+              {item.title}, {item.releaseYear}
+            </Text>
+          )}
+        />
+      )}
+    </View>
+  );
+};
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Fetch%20Example&ext=tsx
+import {useEffect, useState} from 'react';
+import {ActivityIndicator, FlatList, Text, View} from 'react-native';
+
+type Movie = {
+  id: string;
+  title: string;
+  releaseYear: string;
+};
+
+type MoviesResponse = {
+  title: string;
+  description: string;
+  movies: Movie[];
+};
+
+const App = () => {
+  const [isLoading, setLoading] = useState(true);
+  const [data, setData] = useState<Movie[]>([]);
+
+  const getMovies = async () => {
+    try {
+      const response = await fetch('https://reactnative.dev/movies.json');
+      const json = (await response.json()) as MoviesResponse;
+      setData(json.movies);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    getMovies();
+  }, []);
+
+  return (
+    <View style={{flex: 1, padding: 24}}>
+      {isLoading ? (
+        <ActivityIndicator />
+      ) : (
+        <FlatList
+          data={data}
+          keyExtractor={({id}) => id}
+          renderItem={({item}) => (
+            <Text>
+              {item.title}, {item.releaseYear}
+            </Text>
+          )}
+        />
+      )}
+    </View>
+  );
+};
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+:::info
+By default, iOS 9.0 or later enforce App Transport Security (ATS). ATS requires any HTTP connection to use HTTPS. If you need to fetch from a cleartext URL (one that begins with `http`) you will first need to [add an ATS exception](integration-with-existing-apps.md#test-your-integration). If you know ahead of time what domains you will need access to, it is more secure to add exceptions only for those domains; if the domains are not known until runtime you can [disable ATS completely](publishing-to-app-store.md#1-enable-app-transport-security). Note however that from January 2017, [Apple's App Store review will require reasonable justification for disabling ATS](https://forums.developer.apple.com/thread/48979). See [Apple's documentation](https://developer.apple.com/library/ios/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html#//apple_ref/doc/uid/TP40009251-SW33) for more information.
+:::
+
+:::tip
+On Android, as of API Level 28, clear text traffic is also blocked by default. This behaviour can be overridden by setting [`android:usesCleartextTraffic`](https://developer.android.com/guide/topics/manifest/application-element#usesCleartextTraffic) in the app manifest file.
+:::
+
+## Using Other Networking Libraries
+
+The [XMLHttpRequest API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) is built into React Native. This means that you can use third party libraries such as [frisbee](https://github.com/niftylettuce/frisbee) or [axios](https://github.com/axios/axios) that depend on it, or you can use the XMLHttpRequest API directly if you prefer.
+
+```ts
+const request = new XMLHttpRequest();
+request.onreadystatechange = e => {
+  if (request.readyState !== 4) {
+    return;
+  }
+
+  if (request.status === 200) {
+    console.log('success', request.responseText);
+  } else {
+    console.warn('error');
+  }
+};
+
+request.open('GET', 'https://mywebsite.com/endpoint/');
+request.send();
+```
+
+:::warning[Caution]
+The security model for XMLHttpRequest is different than on web as there is no concept of [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) in native apps.
+:::
+
+## WebSocket Support
+
+React Native also supports [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket), a protocol which provides full-duplex communication channels over a single TCP connection.
+
+```ts
+const ws = new WebSocket('ws://host.com/path');
+
+ws.onopen = () => {
+  // connection opened
+  ws.send('something'); // send a message
+};
+
+ws.onmessage = e => {
+  // a message was received
+  console.log(e.data);
+};
+
+ws.onerror = e => {
+  // an error occurred
+  console.log(e.message);
+};
+
+ws.onclose = e => {
+  // connection closed
+  console.log(e.code, e.reason);
+};
+```
+
+## Known Issues with `fetch` and cookie based authentication
+
+The following options are currently not working with `fetch`
+
+- `redirect:manual`
+- `credentials:omit`
+
+* Having same name headers on Android will result in only the latest one being present. A temporary solution can be found here: https://github.com/facebook/react-native/issues/18837#issuecomment-398779994.
+* Cookie based authentication is currently unstable. You can view some of the issues raised here: https://github.com/facebook/react-native/issues/23185
+* As a minimum on iOS, when redirected through a `302`, if a `Set-Cookie` header is present, the cookie is not set properly. Since the redirect cannot be handled manually this might cause a scenario where infinite requests occur if the redirect is the result of an expired session.
+
+## Configuring NSURLSession on iOS
+
+For some applications it may be appropriate to provide a custom `NSURLSessionConfiguration` for the underlying `NSURLSession` that is used for network requests in a React Native application running on iOS. For instance, one may need to set a custom user agent string for all network requests coming from the app or supply `NSURLSession` with an ephemeral `NSURLSessionConfiguration`. The function `RCTSetCustomNSURLSessionConfigurationProvider` allows for such customization. Remember to add the following import to the file in which `RCTSetCustomNSURLSessionConfigurationProvider` will be called:
+
+```objectivec
+#import <React/RCTHTTPRequestHandler.h>
+```
+
+`RCTSetCustomNSURLSessionConfigurationProvider` should be called early in the application life cycle such that it is readily available when needed by React, for instance:
+
+```objectivec
+-(void)application:(__unused UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
+
+  // set RCTSetCustomNSURLSessionConfigurationProvider
+  RCTSetCustomNSURLSessionConfigurationProvider(^NSURLSessionConfiguration *{
+     NSURLSessionConfiguration *configuration = [NSURLSessionConfiguration defaultSessionConfiguration];
+     // configure the session
+     return configuration;
+  });
+
+  // set up React
+  _bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
+}
+```
diff --git a/website/versioned_docs/version-0.83/optimizing-flatlist-configuration.md b/website/versioned_docs/version-0.83/optimizing-flatlist-configuration.md
index a81ec0c6cf6..11be2e33b7c 100644
--- a/website/versioned_docs/version-0.83/optimizing-flatlist-configuration.md
+++ b/website/versioned_docs/version-0.83/optimizing-flatlist-configuration.md
@@ -1,154 +1,154 @@
----
-id: optimizing-flatlist-configuration
-title: Optimizing FlatList Configuration
----
-
-## Terms
-
-- **VirtualizedList:** The component behind `FlatList` (React Native's implementation of the [`Virtual List`](https://bvaughn.github.io/react-virtualized/#/components/List) concept.)
-
-- **Memory consumption:** How much information about your list is being stored in memory, which could lead to an app crash.
-
-- **Responsiveness:** Application ability to respond to interactions. Low responsiveness, for instance, is when you touch on a component and it waits a bit to respond, instead of responding immediately as expected.
-
-- **Blank areas:** When `VirtualizedList` can't render your items fast enough, you may enter a part of your list with non-rendered components that appear as blank space.
-
-- **Viewport:** The visible area of content that is rendered to pixels.
-
-- **Window:** The area in which items should be mounted, which is generally much larger than the viewport.
-
-## Props
-
-Here are a list of props that can help to improve `FlatList` performance:
-
-### `removeClippedSubviews`
-
-| Type    | Default                              |
-| ------- | ------------------------------------ |
-| Boolean | `true` on Android, otherwise `false` |
-
-If `true`, views that are outside of the viewport are automatically detached from the native view hierarchy.
-
-**Pros:** This reduces time spent on the main thread, and thus reduces the risk of dropped frames, by excluding views outside of the viewport from the native rendering and drawing traversals.
-
-**Cons:** Be aware that this implementation can have bugs, such as missing content (mainly observed on iOS), especially if you are doing complex things with transforms and/or absolute positioning. Also note this does not save significant memory because the views are not deallocated, only detached.
-
-### `maxToRenderPerBatch`
-
-| Type   | Default |
-| ------ | ------- |
-| Number | 10      |
-
-It is a `VirtualizedList` prop that can be passed through `FlatList`. This controls the amount of items rendered per batch, which is the next chunk of items rendered on every scroll.
-
-**Pros:** Setting a bigger number means less visual blank areas when scrolling (increases the fill rate).
-
-**Cons:** More items per batch means longer periods of JavaScript execution potentially blocking other event processing, like presses, hurting responsiveness.
-
-### `updateCellsBatchingPeriod`
-
-| Type   | Default |
-| ------ | ------- |
-| Number | 50      |
-
-While `maxToRenderPerBatch` tells the amount of items rendered per batch, setting `updateCellsBatchingPeriod` tells your `VirtualizedList` the delay in milliseconds between batch renders (how frequently your component will be rendering the windowed items).
-
-**Pros:** Combining this prop with `maxToRenderPerBatch` gives you the power to, for example, render more items in a less frequent batch, or less items in a more frequent batch.
-
-**Cons:** Less frequent batches may cause blank areas, More frequent batches may cause responsiveness issues.
-
-### initialNumToRender
-
-| Type   | Default |
-| ------ | ------- |
-| Number | 10      |
-
-The initial amount of items to render.
-
-**Pros:** Define precise number of items that would cover the screen for every device. This can be a big performance boost for the initial render.
-
-**Cons:** Setting a low `initialNumToRender` may cause blank areas, especially if it's too small to cover the viewport on initial render.
-
-### `windowSize`
-
-| Type   | Default |
-| ------ | ------- |
-| Number | 21      |
-
-The number passed here is a measurement unit where 1 is equivalent to your viewport height. The default value is 21 (10 viewports above, 10 below, and one in between).
-
-**Pros:** Bigger `windowSize` will result in less chance of seeing blank space while scrolling. On the other hand, smaller `windowSize` will result in fewer items mounted simultaneously, saving memory.
-
-**Cons:** For a bigger `windowSize`, you will have more memory consumption. For a lower `windowSize`, you will have a bigger chance of seeing blank areas.
-
-## List items
-
-Below are some tips about list item components. They are the core of your list, so they need to be fast.
-
-### Use basic components
-
-The more complex your components are, the slower they will render. Try to avoid a lot of logic and nesting in your list items. If you are reusing this list item component a lot in your app, create a component only for your big lists and make them with as little logic and nesting as possible.
-
-### Use light components
-
-The heavier your components are, the slower they render. Avoid heavy images (use a cropped version or thumbnail for list items, as small as possible). Talk to your design team, use as little effects and interactions and information as possible in your list. Show them in your item's detail.
-
-### Use `memo()`
-
-`React.memo()` creates a memoized component that will be re-rendered only when the props passed to the component change. We can use this function to optimize the components in the FlatList.
-
-```tsx
-import React, {memo} from 'react';
-import {View, Text} from 'react-native';
-
-const MyListItem = memo(
-  ({title}: {title: string}) => (
-    <View>
-      <Text>{title}</Text>
-    </View>
-  ),
-  (prevProps, nextProps) => {
-    return prevProps.title === nextProps.title;
-  },
-);
-
-export default MyListItem;
-```
-
-In this example, we have determined that MyListItem should be re-rendered only when the title changes. We passed the comparison function as the second argument to React.memo() so that the component is re-rendered only when the specified prop is changed. If the comparison function returns true, the component will not be re-rendered.
-
-### Use cached optimized images
-
-You can use the community packages (such as [@d11/react-native-fast-image](https://github.com/ds-horizon/react-native-fast-image) from [Dream11](https://github.com/ds-horizon)) for more performant images. Every image in your list is a `new Image()` instance. The faster it reaches the `loaded` hook, the faster your JavaScript thread will be free again.
-
-### Use `getItemLayout`
-
-If all your list item components have the same height (or width, for a horizontal list), providing the [getItemLayout](flatlist#getitemlayout) prop removes the need for your `FlatList` to manage async layout calculations. This is a very desirable optimization technique.
-
-If your components have dynamic size and you really need performance, consider asking your design team if they may think of a redesign in order to perform better.
-
-### Use `keyExtractor` or `key`
-
-You can set the [`keyExtractor`](flatlist#keyextractor) to your `FlatList` component. This prop is used for caching and as the React `key` to track item re-ordering.
-
-You can also use a `key` prop in your item component.
-
-### Avoid anonymous function on `renderItem`
-
-For functional components, move the `renderItem` function outside of the returned JSX. Also, ensure that it is wrapped in a `useCallback` hook to prevent it from being recreated each render.
-
-For class components, move the `renderItem` function outside of the render function, so it won't recreate itself each time the render function is called.
-
-```tsx
-const renderItem = useCallback(({item}) => (
-   <View key={item.key}>
-      <Text>{item.title}</Text>
-   </View>
- ), []);
-
-return (
-  // ...
-  <FlatList data={items} renderItem={renderItem} />;
-  // ...
-);
-```
+---
+id: optimizing-flatlist-configuration
+title: Optimizing FlatList Configuration
+---
+
+## Terms
+
+- **VirtualizedList:** The component behind `FlatList` (React Native's implementation of the [`Virtual List`](https://bvaughn.github.io/react-virtualized/#/components/List) concept.)
+
+- **Memory consumption:** How much information about your list is being stored in memory, which could lead to an app crash.
+
+- **Responsiveness:** Application ability to respond to interactions. Low responsiveness, for instance, is when you touch on a component and it waits a bit to respond, instead of responding immediately as expected.
+
+- **Blank areas:** When `VirtualizedList` can't render your items fast enough, you may enter a part of your list with non-rendered components that appear as blank space.
+
+- **Viewport:** The visible area of content that is rendered to pixels.
+
+- **Window:** The area in which items should be mounted, which is generally much larger than the viewport.
+
+## Props
+
+Here are a list of props that can help to improve `FlatList` performance:
+
+### `removeClippedSubviews`
+
+| Type    | Default                              |
+| ------- | ------------------------------------ |
+| Boolean | `true` on Android, otherwise `false` |
+
+If `true`, views that are outside of the viewport are automatically detached from the native view hierarchy.
+
+**Pros:** This reduces time spent on the main thread, and thus reduces the risk of dropped frames, by excluding views outside of the viewport from the native rendering and drawing traversals.
+
+**Cons:** Be aware that this implementation can have bugs, such as missing content (mainly observed on iOS), especially if you are doing complex things with transforms and/or absolute positioning. Also note this does not save significant memory because the views are not deallocated, only detached.
+
+### `maxToRenderPerBatch`
+
+| Type   | Default |
+| ------ | ------- |
+| Number | 10      |
+
+It is a `VirtualizedList` prop that can be passed through `FlatList`. This controls the amount of items rendered per batch, which is the next chunk of items rendered on every scroll.
+
+**Pros:** Setting a bigger number means less visual blank areas when scrolling (increases the fill rate).
+
+**Cons:** More items per batch means longer periods of JavaScript execution potentially blocking other event processing, like presses, hurting responsiveness.
+
+### `updateCellsBatchingPeriod`
+
+| Type   | Default |
+| ------ | ------- |
+| Number | 50      |
+
+While `maxToRenderPerBatch` tells the amount of items rendered per batch, setting `updateCellsBatchingPeriod` tells your `VirtualizedList` the delay in milliseconds between batch renders (how frequently your component will be rendering the windowed items).
+
+**Pros:** Combining this prop with `maxToRenderPerBatch` gives you the power to, for example, render more items in a less frequent batch, or less items in a more frequent batch.
+
+**Cons:** Less frequent batches may cause blank areas, More frequent batches may cause responsiveness issues.
+
+### initialNumToRender
+
+| Type   | Default |
+| ------ | ------- |
+| Number | 10      |
+
+The initial amount of items to render.
+
+**Pros:** Define precise number of items that would cover the screen for every device. This can be a big performance boost for the initial render.
+
+**Cons:** Setting a low `initialNumToRender` may cause blank areas, especially if it's too small to cover the viewport on initial render.
+
+### `windowSize`
+
+| Type   | Default |
+| ------ | ------- |
+| Number | 21      |
+
+The number passed here is a measurement unit where 1 is equivalent to your viewport height. The default value is 21 (10 viewports above, 10 below, and one in between).
+
+**Pros:** Bigger `windowSize` will result in less chance of seeing blank space while scrolling. On the other hand, smaller `windowSize` will result in fewer items mounted simultaneously, saving memory.
+
+**Cons:** For a bigger `windowSize`, you will have more memory consumption. For a lower `windowSize`, you will have a bigger chance of seeing blank areas.
+
+## List items
+
+Below are some tips about list item components. They are the core of your list, so they need to be fast.
+
+### Use basic components
+
+The more complex your components are, the slower they will render. Try to avoid a lot of logic and nesting in your list items. If you are reusing this list item component a lot in your app, create a component only for your big lists and make them with as little logic and nesting as possible.
+
+### Use light components
+
+The heavier your components are, the slower they render. Avoid heavy images (use a cropped version or thumbnail for list items, as small as possible). Talk to your design team, use as little effects and interactions and information as possible in your list. Show them in your item's detail.
+
+### Use `memo()`
+
+`React.memo()` creates a memoized component that will be re-rendered only when the props passed to the component change. We can use this function to optimize the components in the FlatList.
+
+```tsx
+import {memo} from 'react';
+import {View, Text} from 'react-native';
+
+const MyListItem = memo(
+  ({title}: {title: string}) => (
+    <View>
+      <Text>{title}</Text>
+    </View>
+  ),
+  (prevProps, nextProps) => {
+    return prevProps.title === nextProps.title;
+  },
+);
+
+export default MyListItem;
+```
+
+In this example, we have determined that MyListItem should be re-rendered only when the title changes. We passed the comparison function as the second argument to React.memo() so that the component is re-rendered only when the specified prop is changed. If the comparison function returns true, the component will not be re-rendered.
+
+### Use cached optimized images
+
+You can use the community packages (such as [@d11/react-native-fast-image](https://github.com/ds-horizon/react-native-fast-image) from [Dream11](https://github.com/ds-horizon)) for more performant images. Every image in your list is a `new Image()` instance. The faster it reaches the `loaded` hook, the faster your JavaScript thread will be free again.
+
+### Use `getItemLayout`
+
+If all your list item components have the same height (or width, for a horizontal list), providing the [getItemLayout](flatlist#getitemlayout) prop removes the need for your `FlatList` to manage async layout calculations. This is a very desirable optimization technique.
+
+If your components have dynamic size and you really need performance, consider asking your design team if they may think of a redesign in order to perform better.
+
+### Use `keyExtractor` or `key`
+
+You can set the [`keyExtractor`](flatlist#keyextractor) to your `FlatList` component. This prop is used for caching and as the React `key` to track item re-ordering.
+
+You can also use a `key` prop in your item component.
+
+### Avoid anonymous function on `renderItem`
+
+For functional components, move the `renderItem` function outside of the returned JSX. Also, ensure that it is wrapped in a `useCallback` hook to prevent it from being recreated each render.
+
+For class components, move the `renderItem` function outside of the render function, so it won't recreate itself each time the render function is called.
+
+```tsx
+const renderItem = useCallback(({item}) => (
+   <View key={item.key}>
+      <Text>{item.title}</Text>
+   </View>
+ ), []);
+
+return (
+  // ...
+  <FlatList data={items} renderItem={renderItem} />;
+  // ...
+);
+```
diff --git a/website/versioned_docs/version-0.83/panresponder.md b/website/versioned_docs/version-0.83/panresponder.md
index fa6d8b8ee4e..eabd919aa1e 100644
--- a/website/versioned_docs/version-0.83/panresponder.md
+++ b/website/versioned_docs/version-0.83/panresponder.md
@@ -1,177 +1,177 @@
----
-id: panresponder
-title: PanResponder
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-`PanResponder` reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize basic multi-touch gestures.
-
-By default, `PanResponder` holds an `InteractionManager` handle to block long-running JS events from interrupting active gestures.
-
-It provides a predictable wrapper of the responder handlers provided by the [gesture responder system](gesture-responder-system.md). For each handler, it provides a new `gestureState` object alongside the native event object:
-
-```
-onPanResponderMove: (event, gestureState) => {}
-```
-
-A native event is a synthetic touch event with form of [PressEvent](pressevent).
-
-A `gestureState` object has the following:
-
-- `stateID` - ID of the gestureState- persisted as long as there's at least one touch on screen
-- `moveX` - the latest screen coordinates of the recently-moved touch
-- `moveY` - the latest screen coordinates of the recently-moved touch
-- `x0` - the screen coordinates of the responder grant
-- `y0` - the screen coordinates of the responder grant
-- `dx` - accumulated distance of the gesture since the touch started
-- `dy` - accumulated distance of the gesture since the touch started
-- `vx` - current velocity of the gesture
-- `vy` - current velocity of the gesture
-- `numberActiveTouches` - Number of touches currently on screen
-
-## Usage Pattern
-
-```tsx
-const ExampleComponent = () => {
-  const panResponder = React.useRef(
-    PanResponder.create({
-      // Ask to be the responder:
-      onStartShouldSetPanResponder: (evt, gestureState) => true,
-      onStartShouldSetPanResponderCapture: (evt, gestureState) =>
-        true,
-      onMoveShouldSetPanResponder: (evt, gestureState) => true,
-      onMoveShouldSetPanResponderCapture: (evt, gestureState) =>
-        true,
-
-      onPanResponderGrant: (evt, gestureState) => {
-        // The gesture has started. Show visual feedback so the user knows
-        // what is happening!
-        // gestureState.d{x,y} will be set to zero now
-      },
-      onPanResponderMove: (evt, gestureState) => {
-        // The most recent move distance is gestureState.move{X,Y}
-        // The accumulated gesture distance since becoming responder is
-        // gestureState.d{x,y}
-      },
-      onPanResponderTerminationRequest: (evt, gestureState) =>
-        true,
-      onPanResponderRelease: (evt, gestureState) => {
-        // The user has released all touches while this view is the
-        // responder. This typically means a gesture has succeeded
-      },
-      onPanResponderTerminate: (evt, gestureState) => {
-        // Another component has become the responder, so this gesture
-        // should be cancelled
-      },
-      onShouldBlockNativeResponder: (evt, gestureState) => {
-        // Returns whether this component should block native components from becoming the JS
-        // responder. Returns true by default. Is currently only supported on android.
-        return true;
-      },
-    }),
-  ).current;
-
-  return <View {...panResponder.panHandlers} />;
-};
-```
-
-## Example
-
-`PanResponder` works with `Animated` API to help build complex gestures in the UI. The following example contains an animated `View` component which can be dragged freely across the screen
-
-```SnackPlayer name=PanResponder
-import React, {useRef} from 'react';
-import {Animated, View, StyleSheet, PanResponder, Text} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const pan = useRef(new Animated.ValueXY()).current;
-
-  const panResponder = useRef(
-    PanResponder.create({
-      onMoveShouldSetPanResponder: () => true,
-      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
-      onPanResponderRelease: () => {
-        pan.extractOffset();
-      },
-    }),
-  ).current;
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.titleText}>Drag this box!</Text>
-        <Animated.View
-          style={{
-            transform: [{translateX: pan.x}, {translateY: pan.y}],
-          }}
-          {...panResponder.panHandlers}>
-          <View style={styles.box} />
-        </Animated.View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  titleText: {
-    fontSize: 14,
-    lineHeight: 24,
-    fontWeight: 'bold',
-  },
-  box: {
-    height: 150,
-    width: 150,
-    backgroundColor: 'blue',
-    borderRadius: 5,
-  },
-});
-
-export default App;
-```
-
-Try the [PanResponder example in RNTester](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js).
-
----
-
-# Reference
-
-## Methods
-
-### `create()`
-
-```tsx
-static create(config: PanResponderCallbacks): PanResponderInstance;
-```
-
-**Parameters:**
-
-| Name                                                        | Type   | Description |
-| ----------------------------------------------------------- | ------ | ----------- |
-| config <div className="label basic required">Required</div> | object | Refer below |
-
-The `config` object provides enhanced versions of all of the responder callbacks that provide not only the [`PressEvent`](pressevent), but also the `PanResponder` gesture state, by replacing the word `Responder` with `PanResponder` in each of the typical `onResponder*` callbacks. For example, the `config` object would look like:
-
-- `onMoveShouldSetPanResponder: (e, gestureState) => {...}`
-- `onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}`
-- `onStartShouldSetPanResponder: (e, gestureState) => {...}`
-- `onStartShouldSetPanResponderCapture: (e, gestureState) => {...}`
-- `onPanResponderReject: (e, gestureState) => {...}`
-- `onPanResponderGrant: (e, gestureState) => {...}`
-- `onPanResponderStart: (e, gestureState) => {...}`
-- `onPanResponderEnd: (e, gestureState) => {...}`
-- `onPanResponderRelease: (e, gestureState) => {...}`
-- `onPanResponderMove: (e, gestureState) => {...}`
-- `onPanResponderTerminate: (e, gestureState) => {...}`
-- `onPanResponderTerminationRequest: (e, gestureState) => {...}`
-- `onShouldBlockNativeResponder: (e, gestureState) => {...}`
-
-In general, for events that have capture equivalents, we update the gestureState once in the capture phase and can use it in the bubble phase as well.
-
-Be careful with `onStartShould*` callbacks. They only reflect updated `gestureState` for start/end events that bubble/capture to the Node. Once the node is the responder, you can rely on every start/end event being processed by the gesture and `gestureState` being updated accordingly. (numberActiveTouches) may not be totally accurate unless you are the responder.
+---
+id: panresponder
+title: PanResponder
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+`PanResponder` reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize basic multi-touch gestures.
+
+By default, `PanResponder` holds an `InteractionManager` handle to block long-running JS events from interrupting active gestures.
+
+It provides a predictable wrapper of the responder handlers provided by the [gesture responder system](gesture-responder-system.md). For each handler, it provides a new `gestureState` object alongside the native event object:
+
+```
+onPanResponderMove: (event, gestureState) => {}
+```
+
+A native event is a synthetic touch event with form of [PressEvent](pressevent).
+
+A `gestureState` object has the following:
+
+- `stateID` - ID of the gestureState- persisted as long as there's at least one touch on screen
+- `moveX` - the latest screen coordinates of the recently-moved touch
+- `moveY` - the latest screen coordinates of the recently-moved touch
+- `x0` - the screen coordinates of the responder grant
+- `y0` - the screen coordinates of the responder grant
+- `dx` - accumulated distance of the gesture since the touch started
+- `dy` - accumulated distance of the gesture since the touch started
+- `vx` - current velocity of the gesture
+- `vy` - current velocity of the gesture
+- `numberActiveTouches` - Number of touches currently on screen
+
+## Usage Pattern
+
+```tsx
+const ExampleComponent = () => {
+  const panResponder = useRef(
+    PanResponder.create({
+      // Ask to be the responder:
+      onStartShouldSetPanResponder: (evt, gestureState) => true,
+      onStartShouldSetPanResponderCapture: (evt, gestureState) =>
+        true,
+      onMoveShouldSetPanResponder: (evt, gestureState) => true,
+      onMoveShouldSetPanResponderCapture: (evt, gestureState) =>
+        true,
+
+      onPanResponderGrant: (evt, gestureState) => {
+        // The gesture has started. Show visual feedback so the user knows
+        // what is happening!
+        // gestureState.d{x,y} will be set to zero now
+      },
+      onPanResponderMove: (evt, gestureState) => {
+        // The most recent move distance is gestureState.move{X,Y}
+        // The accumulated gesture distance since becoming responder is
+        // gestureState.d{x,y}
+      },
+      onPanResponderTerminationRequest: (evt, gestureState) =>
+        true,
+      onPanResponderRelease: (evt, gestureState) => {
+        // The user has released all touches while this view is the
+        // responder. This typically means a gesture has succeeded
+      },
+      onPanResponderTerminate: (evt, gestureState) => {
+        // Another component has become the responder, so this gesture
+        // should be cancelled
+      },
+      onShouldBlockNativeResponder: (evt, gestureState) => {
+        // Returns whether this component should block native components from becoming the JS
+        // responder. Returns true by default. Is currently only supported on android.
+        return true;
+      },
+    }),
+  ).current;
+
+  return <View {...panResponder.panHandlers} />;
+};
+```
+
+## Example
+
+`PanResponder` works with `Animated` API to help build complex gestures in the UI. The following example contains an animated `View` component which can be dragged freely across the screen
+
+```SnackPlayer name=PanResponder
+import {useRef} from 'react';
+import {Animated, View, StyleSheet, PanResponder, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const pan = useRef(new Animated.ValueXY()).current;
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
+      onPanResponderRelease: () => {
+        pan.extractOffset();
+      },
+    }),
+  ).current;
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.titleText}>Drag this box!</Text>
+        <Animated.View
+          style={{
+            transform: [{translateX: pan.x}, {translateY: pan.y}],
+          }}
+          {...panResponder.panHandlers}>
+          <View style={styles.box} />
+        </Animated.View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  titleText: {
+    fontSize: 14,
+    lineHeight: 24,
+    fontWeight: 'bold',
+  },
+  box: {
+    height: 150,
+    width: 150,
+    backgroundColor: 'blue',
+    borderRadius: 5,
+  },
+});
+
+export default App;
+```
+
+Try the [PanResponder example in RNTester](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js).
+
+---
+
+# Reference
+
+## Methods
+
+### `create()`
+
+```tsx
+static create(config: PanResponderCallbacks): PanResponderInstance;
+```
+
+**Parameters:**
+
+| Name                                                        | Type   | Description |
+| ----------------------------------------------------------- | ------ | ----------- |
+| config <div className="label basic required">Required</div> | object | Refer below |
+
+The `config` object provides enhanced versions of all of the responder callbacks that provide not only the [`PressEvent`](pressevent), but also the `PanResponder` gesture state, by replacing the word `Responder` with `PanResponder` in each of the typical `onResponder*` callbacks. For example, the `config` object would look like:
+
+- `onMoveShouldSetPanResponder: (e, gestureState) => {...}`
+- `onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}`
+- `onStartShouldSetPanResponder: (e, gestureState) => {...}`
+- `onStartShouldSetPanResponderCapture: (e, gestureState) => {...}`
+- `onPanResponderReject: (e, gestureState) => {...}`
+- `onPanResponderGrant: (e, gestureState) => {...}`
+- `onPanResponderStart: (e, gestureState) => {...}`
+- `onPanResponderEnd: (e, gestureState) => {...}`
+- `onPanResponderRelease: (e, gestureState) => {...}`
+- `onPanResponderMove: (e, gestureState) => {...}`
+- `onPanResponderTerminate: (e, gestureState) => {...}`
+- `onPanResponderTerminationRequest: (e, gestureState) => {...}`
+- `onShouldBlockNativeResponder: (e, gestureState) => {...}`
+
+In general, for events that have capture equivalents, we update the gestureState once in the capture phase and can use it in the bubble phase as well.
+
+Be careful with `onStartShould*` callbacks. They only reflect updated `gestureState` for start/end events that bubble/capture to the Node. Once the node is the responder, you can rely on every start/end event being processed by the gesture and `gestureState` being updated accordingly. (numberActiveTouches) may not be totally accurate unless you are the responder.
diff --git a/website/versioned_docs/version-0.83/permissionsandroid.md b/website/versioned_docs/version-0.83/permissionsandroid.md
index ec1f486ba37..4e93941ad1f 100644
--- a/website/versioned_docs/version-0.83/permissionsandroid.md
+++ b/website/versioned_docs/version-0.83/permissionsandroid.md
@@ -17,7 +17,6 @@ If a user has previously turned off a permission that you prompt for, the OS wil
 ### Example
 
 ```SnackPlayer name=PermissionsAndroid%20Example&supportedPlatforms=android
-import React from 'react';
 import {
   Button,
   PermissionsAndroid,
diff --git a/website/versioned_docs/version-0.83/pixelratio.md b/website/versioned_docs/version-0.83/pixelratio.md
index 64e4eded49f..f298a8e73ab 100644
--- a/website/versioned_docs/version-0.83/pixelratio.md
+++ b/website/versioned_docs/version-0.83/pixelratio.md
@@ -30,7 +30,6 @@ In React Native, everything in JavaScript and within the layout engine works wit
 ## Example
 
 ```SnackPlayer name=PixelRatio%20Example
-import React from 'react';
 import {
   Image,
   PixelRatio,
diff --git a/website/versioned_docs/version-0.83/platform.md b/website/versioned_docs/version-0.83/platform.md
index 79f435ccd56..b8642658a84 100644
--- a/website/versioned_docs/version-0.83/platform.md
+++ b/website/versioned_docs/version-0.83/platform.md
@@ -6,7 +6,6 @@ title: Platform
 ## Example
 
 ```SnackPlayer name=Platform%20API%20Example&supportedPlatforms=ios,android
-import React from 'react';
 import {Platform, StyleSheet, Text, ScrollView} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.83/platformcolor.md b/website/versioned_docs/version-0.83/platformcolor.md
index 17371f76c26..040c6d2c18a 100644
--- a/website/versioned_docs/version-0.83/platformcolor.md
+++ b/website/versioned_docs/version-0.83/platformcolor.md
@@ -46,7 +46,6 @@ If you’re familiar with design systems, another way of thinking about this is
 ## Example
 
 ```SnackPlayer name=PlatformColor%20Example&supportedPlatforms=android,ios
-import React from 'react';
 import {Platform, PlatformColor, StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.83/pressable.md b/website/versioned_docs/version-0.83/pressable.md
index 590c77db974..3415bb2eb0a 100644
--- a/website/versioned_docs/version-0.83/pressable.md
+++ b/website/versioned_docs/version-0.83/pressable.md
@@ -1,268 +1,268 @@
----
-id: pressable
-title: Pressable
----
-
-Pressable is a Core Component wrapper that can detect various stages of press interactions on any of its defined children.
-
-```tsx
-<Pressable onPress={onPressFunction}>
-  <Text>I'm pressable!</Text>
-</Pressable>
-```
-
-## How it works
-
-On an element wrapped by `Pressable`:
-
-- [`onPressIn`](#onpressin) is called when a press is activated.
-- [`onPressOut`](#onpressout) is called when the press gesture is deactivated.
-
-After pressing [`onPressIn`](#onpressin), one of two things will happen:
-
-1. The person will remove their finger, triggering [`onPressOut`](#onpressout) followed by [`onPress`](#onpress).
-2. If the person leaves their finger longer than 500 milliseconds before removing it, [`onLongPress`](#onlongpress) is triggered. ([`onPressOut`](#onpressout) will still fire when they remove their finger.)
-
-<img src="/docs/assets/d_pressable_pressing.svg" width="1000" alt="Diagram of the onPress events in sequence." />
-
-Fingers are not the most precise instruments, and it is common for users to accidentally activate the wrong element or miss the activation area. To help, `Pressable` has an optional `HitRect` you can use to define how far a touch can register away from the wrapped element. Presses can start anywhere within a `HitRect`.
-
-`PressRect` allows presses to move beyond the element and its `HitRect` while maintaining activation and being eligible for a "press"—think of sliding your finger slowly away from a button you're pressing down on.
-
-:::note
-The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
-:::
-
-<figure>
-  <img src="/docs/assets/d_pressable_anatomy.svg" width="1000" alt="Diagram of HitRect and PressRect and how they work." />
-  <figcaption>
-    You can set <code>HitRect</code> with <code>hitSlop</code> and set <code>PressRect</code> with <code>pressRetentionOffset</code>.
-  </figcaption>
-</figure>
-
-:::info
-`Pressable` uses React Native's `Pressability` API. For more information around the state machine flow of Pressability and how it works, check out the implementation for [Pressability](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Pressability/Pressability.js#L350).
-:::
-
-## Example
-
-```SnackPlayer name=Pressable
-import React, {useState} from 'react';
-import {Pressable, StyleSheet, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [timesPressed, setTimesPressed] = useState(0);
-
-  let textLog = '';
-  if (timesPressed > 1) {
-    textLog = timesPressed + 'x onPress';
-  } else if (timesPressed > 0) {
-    textLog = 'onPress';
-  }
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Pressable
-          onPress={() => {
-            setTimesPressed(current => current + 1);
-          }}
-          style={({pressed}) => [
-            {
-              backgroundColor: pressed ? 'rgb(210, 230, 255)' : 'white',
-            },
-            styles.wrapperCustom,
-          ]}>
-          {({pressed}) => (
-            <Text style={styles.text}>{pressed ? 'Pressed!' : 'Press Me'}</Text>
-          )}
-        </Pressable>
-        <View style={styles.logBox}>
-          <Text testID="pressable_press_console">{textLog}</Text>
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  text: {
-    fontSize: 16,
-  },
-  wrapperCustom: {
-    borderRadius: 8,
-    padding: 6,
-  },
-  logBox: {
-    padding: 20,
-    margin: 10,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: '#f0f0f0',
-    backgroundColor: '#f9f9f9',
-  },
-});
-
-export default App;
-```
-
-## Props
-
-### `android_disableSound` <div className="label android">Android</div>
-
-If true, doesn't play Android system sound on press.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
-### `android_ripple` <div className="label android">Android</div>
-
-Enables the Android ripple effect and configures its properties.
-
-| Type                                   |
-| -------------------------------------- |
-| [RippleConfig](pressable#rippleconfig) |
-
-### `children`
-
-Either children or a function that receives a boolean reflecting whether the component is currently pressed.
-
-| Type                     |
-| ------------------------ |
-| [React Node](react-node) |
-
-### `unstable_pressDelay`
-
-Duration (in milliseconds) to wait after press down before calling `onPressIn`.
-
-| Type   |
-| ------ |
-| number |
-
-### `delayLongPress`
-
-Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
-
-| Type   | Default |
-| ------ | ------- |
-| number | `500`   |
-
-### `disabled`
-
-Whether the press behavior is disabled.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
-### `hitSlop`
-
-Sets additional distance outside of element in which a press can be detected.
-
-| Type                   |
-| ---------------------- |
-| [Rect](rect) or number |
-
-### `onHoverIn`
-
-Called when the hover is activated to provide visual feedback.
-
-| Type                                                                                                      |
-| --------------------------------------------------------------------------------------------------------- |
-| `md ({ nativeEvent: [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) }) => void` |
-
-### `onHoverOut`
-
-Called when the hover is deactivated to undo visual feedback.
-
-| Type                                                                                                      |
-| --------------------------------------------------------------------------------------------------------- |
-| `md ({ nativeEvent: [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) }) => void` |
-
-### `onLongPress`
-
-Called if the time after `onPressIn` lasts longer than 500 milliseconds. This time period can be customized with [`delayLongPress`](#delaylongpress).
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
-### `onPress`
-
-Called after `onPressOut`.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
-### `onPressIn`
-
-Called immediately when a touch is engaged, before `onPressOut` and `onPress`.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
-### `onPressMove`
-
-Called when the press location moves.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
-### `onPressOut`
-
-Called when a touch is released.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
-### `pressRetentionOffset`
-
-Additional distance outside of this view in which a touch is considered a press before `onPressOut` is triggered.
-
-| Type                   | Default                                      |
-| ---------------------- | -------------------------------------------- |
-| [Rect](rect) or number | `{bottom: 30, left: 20, right: 20, top: 20}` |
-
-### `style`
-
-Either view styles or a function that receives a boolean reflecting whether the component is currently pressed and returns view styles.
-
-| Type                                                                                            |
-| ----------------------------------------------------------------------------------------------- |
-| [View Style](view-style-props) or `md ({ pressed: boolean }) => [View Style](view-style-props)` |
-
-### `testOnly_pressed`
-
-Used only for documentation or testing (e.g. snapshot testing).
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
-## Type Definitions
-
-### RippleConfig
-
-Ripple effect configuration for the `android_ripple` property.
-
-| Type   |
-| ------ |
-| object |
-
-**Properties:**
-
-| Name       | Type            | Required | Description                                                                                                                                                                                                                                                  |
-| ---------- | --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| color      | [color](colors) | No       | Defines the color of the ripple effect.                                                                                                                                                                                                                      |
-| borderless | boolean         | No       | Defines if ripple effect should not include border.                                                                                                                                                                                                          |
-| radius     | number          | No       | Defines the radius of the ripple effect.                                                                                                                                                                                                                     |
-| foreground | boolean         | No       | Set to true to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them. |
+---
+id: pressable
+title: Pressable
+---
+
+Pressable is a Core Component wrapper that can detect various stages of press interactions on any of its defined children.
+
+```tsx
+<Pressable onPress={onPressFunction}>
+  <Text>I'm pressable!</Text>
+</Pressable>
+```
+
+## How it works
+
+On an element wrapped by `Pressable`:
+
+- [`onPressIn`](#onpressin) is called when a press is activated.
+- [`onPressOut`](#onpressout) is called when the press gesture is deactivated.
+
+After pressing [`onPressIn`](#onpressin), one of two things will happen:
+
+1. The person will remove their finger, triggering [`onPressOut`](#onpressout) followed by [`onPress`](#onpress).
+2. If the person leaves their finger longer than 500 milliseconds before removing it, [`onLongPress`](#onlongpress) is triggered. ([`onPressOut`](#onpressout) will still fire when they remove their finger.)
+
+<img src="/docs/assets/d_pressable_pressing.svg" width="1000" alt="Diagram of the onPress events in sequence." />
+
+Fingers are not the most precise instruments, and it is common for users to accidentally activate the wrong element or miss the activation area. To help, `Pressable` has an optional `HitRect` you can use to define how far a touch can register away from the wrapped element. Presses can start anywhere within a `HitRect`.
+
+`PressRect` allows presses to move beyond the element and its `HitRect` while maintaining activation and being eligible for a "press"—think of sliding your finger slowly away from a button you're pressing down on.
+
+:::note
+The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
+:::
+
+<figure>
+  <img src="/docs/assets/d_pressable_anatomy.svg" width="1000" alt="Diagram of HitRect and PressRect and how they work." />
+  <figcaption>
+    You can set <code>HitRect</code> with <code>hitSlop</code> and set <code>PressRect</code> with <code>pressRetentionOffset</code>.
+  </figcaption>
+</figure>
+
+:::info
+`Pressable` uses React Native's `Pressability` API. For more information around the state machine flow of Pressability and how it works, check out the implementation for [Pressability](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Pressability/Pressability.js#L350).
+:::
+
+## Example
+
+```SnackPlayer name=Pressable
+import {useState} from 'react';
+import {Pressable, StyleSheet, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [timesPressed, setTimesPressed] = useState(0);
+
+  let textLog = '';
+  if (timesPressed > 1) {
+    textLog = timesPressed + 'x onPress';
+  } else if (timesPressed > 0) {
+    textLog = 'onPress';
+  }
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Pressable
+          onPress={() => {
+            setTimesPressed(current => current + 1);
+          }}
+          style={({pressed}) => [
+            {
+              backgroundColor: pressed ? 'rgb(210, 230, 255)' : 'white',
+            },
+            styles.wrapperCustom,
+          ]}>
+          {({pressed}) => (
+            <Text style={styles.text}>{pressed ? 'Pressed!' : 'Press Me'}</Text>
+          )}
+        </Pressable>
+        <View style={styles.logBox}>
+          <Text testID="pressable_press_console">{textLog}</Text>
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 16,
+  },
+  wrapperCustom: {
+    borderRadius: 8,
+    padding: 6,
+  },
+  logBox: {
+    padding: 20,
+    margin: 10,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: '#f0f0f0',
+    backgroundColor: '#f9f9f9',
+  },
+});
+
+export default App;
+```
+
+## Props
+
+### `android_disableSound` <div className="label android">Android</div>
+
+If true, doesn't play Android system sound on press.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+### `android_ripple` <div className="label android">Android</div>
+
+Enables the Android ripple effect and configures its properties.
+
+| Type                                   |
+| -------------------------------------- |
+| [RippleConfig](pressable#rippleconfig) |
+
+### `children`
+
+Either children or a function that receives a boolean reflecting whether the component is currently pressed.
+
+| Type                     |
+| ------------------------ |
+| [React Node](react-node) |
+
+### `unstable_pressDelay`
+
+Duration (in milliseconds) to wait after press down before calling `onPressIn`.
+
+| Type   |
+| ------ |
+| number |
+
+### `delayLongPress`
+
+Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
+
+| Type   | Default |
+| ------ | ------- |
+| number | `500`   |
+
+### `disabled`
+
+Whether the press behavior is disabled.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+### `hitSlop`
+
+Sets additional distance outside of element in which a press can be detected.
+
+| Type                   |
+| ---------------------- |
+| [Rect](rect) or number |
+
+### `onHoverIn`
+
+Called when the hover is activated to provide visual feedback.
+
+| Type                                                                                                      |
+| --------------------------------------------------------------------------------------------------------- |
+| `md ({ nativeEvent: [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) }) => void` |
+
+### `onHoverOut`
+
+Called when the hover is deactivated to undo visual feedback.
+
+| Type                                                                                                      |
+| --------------------------------------------------------------------------------------------------------- |
+| `md ({ nativeEvent: [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) }) => void` |
+
+### `onLongPress`
+
+Called if the time after `onPressIn` lasts longer than 500 milliseconds. This time period can be customized with [`delayLongPress`](#delaylongpress).
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+### `onPress`
+
+Called after `onPressOut`.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+### `onPressIn`
+
+Called immediately when a touch is engaged, before `onPressOut` and `onPress`.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+### `onPressMove`
+
+Called when the press location moves.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+### `onPressOut`
+
+Called when a touch is released.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+### `pressRetentionOffset`
+
+Additional distance outside of this view in which a touch is considered a press before `onPressOut` is triggered.
+
+| Type                   | Default                                      |
+| ---------------------- | -------------------------------------------- |
+| [Rect](rect) or number | `{bottom: 30, left: 20, right: 20, top: 20}` |
+
+### `style`
+
+Either view styles or a function that receives a boolean reflecting whether the component is currently pressed and returns view styles.
+
+| Type                                                                                            |
+| ----------------------------------------------------------------------------------------------- |
+| [View Style](view-style-props) or `md ({ pressed: boolean }) => [View Style](view-style-props)` |
+
+### `testOnly_pressed`
+
+Used only for documentation or testing (e.g. snapshot testing).
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+## Type Definitions
+
+### RippleConfig
+
+Ripple effect configuration for the `android_ripple` property.
+
+| Type   |
+| ------ |
+| object |
+
+**Properties:**
+
+| Name       | Type            | Required | Description                                                                                                                                                                                                                                                  |
+| ---------- | --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| color      | [color](colors) | No       | Defines the color of the ripple effect.                                                                                                                                                                                                                      |
+| borderless | boolean         | No       | Defines if ripple effect should not include border.                                                                                                                                                                                                          |
+| radius     | number          | No       | Defines the radius of the ripple effect.                                                                                                                                                                                                                     |
+| foreground | boolean         | No       | Set to true to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them. |
diff --git a/website/versioned_docs/version-0.83/progressbarandroid.md b/website/versioned_docs/version-0.83/progressbarandroid.md
index d26fb2038d6..a08adfae637 100644
--- a/website/versioned_docs/version-0.83/progressbarandroid.md
+++ b/website/versioned_docs/version-0.83/progressbarandroid.md
@@ -12,7 +12,6 @@ Android-only React component used to indicate that the app is loading or there i
 ### Example
 
 ```SnackPlayer name=ProgressBarAndroid&supportedPlatforms=android
-import React from 'react';
 import {View, StyleSheet, ProgressBarAndroid, Text} from 'react-native';
 
 const App = () => {
diff --git a/website/versioned_docs/version-0.83/props.md b/website/versioned_docs/version-0.83/props.md
index 490eb214632..8b24d6dd9f1 100644
--- a/website/versioned_docs/version-0.83/props.md
+++ b/website/versioned_docs/version-0.83/props.md
@@ -10,7 +10,6 @@ Most components can be customized when they are created, with different paramete
 For example, one basic React Native component is the `Image`. When you create an image, you can use a prop named `source` to control what image it shows.
 
 ```SnackPlayer name=Props
-import React from 'react';
 import {Image} from 'react-native';
 
 const Bananas = () => {
@@ -33,7 +32,6 @@ Your own components can also use `props`. This lets you make a single component
 <TabItem value="javascript">
 
 ```SnackPlayer name=Props&ext=js
-import React from 'react';
 import {Text, View} from 'react-native';
 
 const Greeting = props => {
@@ -61,7 +59,6 @@ export default LotsOfGreetings;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Props&ext=tsx
-import React from 'react';
 import {Text, View} from 'react-native';
 
 type GreetingProps = {
diff --git a/website/versioned_docs/version-0.83/refreshcontrol.md b/website/versioned_docs/version-0.83/refreshcontrol.md
index 7f7faab6744..f65d65a0036 100644
--- a/website/versioned_docs/version-0.83/refreshcontrol.md
+++ b/website/versioned_docs/version-0.83/refreshcontrol.md
@@ -1,167 +1,167 @@
----
-id: refreshcontrol
-title: RefreshControl
----
-
-This component is used inside a ScrollView or ListView to add pull to refresh functionality. When the ScrollView is at `scrollY: 0`, swiping down triggers an `onRefresh` event.
-
-## Example
-
-```SnackPlayer name=RefreshControl&supportedPlatforms=ios,android
-import React from 'react';
-import {RefreshControl, ScrollView, StyleSheet, Text} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [refreshing, setRefreshing] = React.useState(false);
-
-  const onRefresh = React.useCallback(() => {
-    setRefreshing(true);
-    setTimeout(() => {
-      setRefreshing(false);
-    }, 2000);
-  }, []);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <ScrollView
-          contentContainerStyle={styles.scrollView}
-          refreshControl={
-            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-          }>
-          <Text>Pull down to see RefreshControl indicator</Text>
-        </ScrollView>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  scrollView: {
-    flex: 1,
-    backgroundColor: 'pink',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-
-export default App;
-```
-
-:::note
-`refreshing` is a controlled prop, this is why it needs to be set to `true` in the `onRefresh` function otherwise the refresh indicator will stop immediately.
-:::
-
----
-
-# Reference
-
-## Props
-
-### [View Props](view.md#props)
-
-Inherits [View Props](view.md#props).
-
----
-
-### <div className="label required basic">Required</div>**`refreshing`**
-
-Whether the view should be indicating an active refresh.
-
-| Type    |
-| ------- |
-| boolean |
-
----
-
-### `colors` <div className="label android">Android</div>
-
-The colors (at least one) that will be used to draw the refresh indicator.
-
-| Type                         |
-| ---------------------------- |
-| array of [colors](colors.md) |
-
----
-
-### `enabled` <div className="label android">Android</div>
-
-Whether the pull to refresh functionality is enabled.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `true`  |
-
----
-
-### `onRefresh`
-
-Called when the view starts refreshing.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `progressBackgroundColor` <div className="label android">Android</div>
-
-The background color of the refresh indicator.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `progressViewOffset`
-
-Progress view top offset.
-
-| Type   | Default |
-| ------ | ------- |
-| number | `0`     |
-
----
-
-### `size` <div className="label android">Android</div>
-
-Size of the refresh indicator.
-
-| Type                         | Default     |
-| ---------------------------- | ----------- |
-| enum(`'default'`, `'large'`) | `'default'` |
-
----
-
-### `tintColor` <div className="label ios">iOS</div>
-
-The color of the refresh indicator.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `title` <div className="label ios">iOS</div>
-
-The title displayed under the refresh indicator.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `titleColor` <div className="label ios">iOS</div>
-
-The color of the refresh indicator title.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
+---
+id: refreshcontrol
+title: RefreshControl
+---
+
+This component is used inside a ScrollView or ListView to add pull to refresh functionality. When the ScrollView is at `scrollY: 0`, swiping down triggers an `onRefresh` event.
+
+## Example
+
+```SnackPlayer name=RefreshControl&supportedPlatforms=ios,android
+import {useCallback, useState} from 'react';
+import {RefreshControl, ScrollView, StyleSheet, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [refreshing, setRefreshing] = useState(false);
+
+  const onRefresh = useCallback(() => {
+    setRefreshing(true);
+    setTimeout(() => {
+      setRefreshing(false);
+    }, 2000);
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <ScrollView
+          contentContainerStyle={styles.scrollView}
+          refreshControl={
+            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+          }>
+          <Text>Pull down to see RefreshControl indicator</Text>
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollView: {
+    flex: 1,
+    backgroundColor: 'pink',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default App;
+```
+
+:::note
+`refreshing` is a controlled prop, this is why it needs to be set to `true` in the `onRefresh` function otherwise the refresh indicator will stop immediately.
+:::
+
+---
+
+# Reference
+
+## Props
+
+### [View Props](view.md#props)
+
+Inherits [View Props](view.md#props).
+
+---
+
+### <div className="label required basic">Required</div>**`refreshing`**
+
+Whether the view should be indicating an active refresh.
+
+| Type    |
+| ------- |
+| boolean |
+
+---
+
+### `colors` <div className="label android">Android</div>
+
+The colors (at least one) that will be used to draw the refresh indicator.
+
+| Type                         |
+| ---------------------------- |
+| array of [colors](colors.md) |
+
+---
+
+### `enabled` <div className="label android">Android</div>
+
+Whether the pull to refresh functionality is enabled.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `true`  |
+
+---
+
+### `onRefresh`
+
+Called when the view starts refreshing.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `progressBackgroundColor` <div className="label android">Android</div>
+
+The background color of the refresh indicator.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `progressViewOffset`
+
+Progress view top offset.
+
+| Type   | Default |
+| ------ | ------- |
+| number | `0`     |
+
+---
+
+### `size` <div className="label android">Android</div>
+
+Size of the refresh indicator.
+
+| Type                         | Default     |
+| ---------------------------- | ----------- |
+| enum(`'default'`, `'large'`) | `'default'` |
+
+---
+
+### `tintColor` <div className="label ios">iOS</div>
+
+The color of the refresh indicator.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `title` <div className="label ios">iOS</div>
+
+The title displayed under the refresh indicator.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `titleColor` <div className="label ios">iOS</div>
+
+The color of the refresh indicator title.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
diff --git a/website/versioned_docs/version-0.83/safeareaview.md b/website/versioned_docs/version-0.83/safeareaview.md
index 8da4485ff12..1298898b64e 100644
--- a/website/versioned_docs/version-0.83/safeareaview.md
+++ b/website/versioned_docs/version-0.83/safeareaview.md
@@ -16,7 +16,6 @@ The purpose of `SafeAreaView` is to render content within the safe area boundari
 To use, wrap your top level view with a `SafeAreaView` with a `flex: 1` style applied to it. You may also want to use a background color that matches your application's design.
 
 ```SnackPlayer name=SafeAreaView&supportedPlatforms=ios
-import React from 'react';
 import {StyleSheet, Text, SafeAreaView} from 'react-native';
 
 const App = () => {
diff --git a/website/versioned_docs/version-0.83/scrollview.md b/website/versioned_docs/version-0.83/scrollview.md
index 5224d095f94..ad51dcf88d7 100644
--- a/website/versioned_docs/version-0.83/scrollview.md
+++ b/website/versioned_docs/version-0.83/scrollview.md
@@ -22,7 +22,6 @@ This is where `FlatList` comes into play. `FlatList` renders items lazily, when
 ## Example
 
 ```SnackPlayer name=ScrollView%20Example
-import React from 'react';
 import {StyleSheet, Text, ScrollView, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.83/sectionlist.md b/website/versioned_docs/version-0.83/sectionlist.md
index d0e9519a301..ead40b211b9 100644
--- a/website/versioned_docs/version-0.83/sectionlist.md
+++ b/website/versioned_docs/version-0.83/sectionlist.md
@@ -21,7 +21,6 @@ If you don't need section support and want a simpler interface, use [`<FlatList>
 ## Example
 
 ```SnackPlayer name=SectionList%20Example
-import React from 'react';
 import {StyleSheet, Text, View, SectionList, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.83/settings.md b/website/versioned_docs/version-0.83/settings.md
index 01c0533d813..af0136d8257 100644
--- a/website/versioned_docs/version-0.83/settings.md
+++ b/website/versioned_docs/version-0.83/settings.md
@@ -1,103 +1,103 @@
----
-id: settings
-title: Settings
----
-
-`Settings` serves as a wrapper for [`NSUserDefaults`](https://developer.apple.com/documentation/foundation/nsuserdefaults), a persistent key-value store available only on iOS.
-
-## Example
-
-```SnackPlayer name=Settings%20Example&supportedPlatforms=ios
-import React, {useState} from 'react';
-import {Button, Settings, StyleSheet, Text} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [data, setData] = useState(() => Settings.get('data'));
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>Stored value:</Text>
-        <Text style={styles.value}>{data}</Text>
-        <Button
-          onPress={() => {
-            Settings.set({data: 'React'});
-            setData(Settings.get('data'));
-          }}
-          title="Store 'React'"
-        />
-        <Button
-          onPress={() => {
-            Settings.set({data: 'Native'});
-            setData(Settings.get('data'));
-          }}
-          title="Store 'Native'"
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  value: {
-    fontSize: 24,
-    marginVertical: 12,
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Methods
-
-### `clearWatch()`
-
-```tsx
-static clearWatch(watchId: number);
-```
-
-`watchId` is the number returned by `watchKeys()` when the subscription was originally configured.
-
----
-
-### `get()`
-
-```tsx
-static get(key: string): any;
-```
-
-Get the current value for a given `key` in `NSUserDefaults`.
-
----
-
-### `set()`
-
-```tsx
-static set(settings: Record<string, any>);
-```
-
-Set one or more values in `NSUserDefaults`.
-
----
-
-### `watchKeys()`
-
-```tsx
-static watchKeys(keys: string | array<string>, callback: () => void): number;
-```
-
-Subscribe to be notified when the value for any of the keys specified by the `keys` parameter has been changed in `NSUserDefaults`. Returns a `watchId` number that may be used with `clearWatch()` to unsubscribe.
-
-:::note
-`watchKeys()` by design ignores internal `set()` calls and fires callback only on changes preformed outside of React Native code.
-:::
+---
+id: settings
+title: Settings
+---
+
+`Settings` serves as a wrapper for [`NSUserDefaults`](https://developer.apple.com/documentation/foundation/nsuserdefaults), a persistent key-value store available only on iOS.
+
+## Example
+
+```SnackPlayer name=Settings%20Example&supportedPlatforms=ios
+import {useState} from 'react';
+import {Button, Settings, StyleSheet, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [data, setData] = useState(() => Settings.get('data'));
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>Stored value:</Text>
+        <Text style={styles.value}>{data}</Text>
+        <Button
+          onPress={() => {
+            Settings.set({data: 'React'});
+            setData(Settings.get('data'));
+          }}
+          title="Store 'React'"
+        />
+        <Button
+          onPress={() => {
+            Settings.set({data: 'Native'});
+            setData(Settings.get('data'));
+          }}
+          title="Store 'Native'"
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  value: {
+    fontSize: 24,
+    marginVertical: 12,
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `clearWatch()`
+
+```tsx
+static clearWatch(watchId: number);
+```
+
+`watchId` is the number returned by `watchKeys()` when the subscription was originally configured.
+
+---
+
+### `get()`
+
+```tsx
+static get(key: string): any;
+```
+
+Get the current value for a given `key` in `NSUserDefaults`.
+
+---
+
+### `set()`
+
+```tsx
+static set(settings: Record<string, any>);
+```
+
+Set one or more values in `NSUserDefaults`.
+
+---
+
+### `watchKeys()`
+
+```tsx
+static watchKeys(keys: string | array<string>, callback: () => void): number;
+```
+
+Subscribe to be notified when the value for any of the keys specified by the `keys` parameter has been changed in `NSUserDefaults`. Returns a `watchId` number that may be used with `clearWatch()` to unsubscribe.
+
+:::note
+`watchKeys()` by design ignores internal `set()` calls and fires callback only on changes preformed outside of React Native code.
+:::
diff --git a/website/versioned_docs/version-0.83/shadow-props.md b/website/versioned_docs/version-0.83/shadow-props.md
index d5e8a037059..91553622bd3 100644
--- a/website/versioned_docs/version-0.83/shadow-props.md
+++ b/website/versioned_docs/version-0.83/shadow-props.md
@@ -1,285 +1,285 @@
----
-id: shadow-props
-title: Shadow Props
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=js&dependencies=@react-native-community/slider
-import React, {useState} from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-import Slider from '@react-native-community/slider';
-
-const ShadowPropSlider = ({label, value, ...props}) => {
-  return (
-    <>
-      <Text>
-        {label} ({value.toFixed(2)})
-      </Text>
-      <Slider step={1} value={value} {...props} />
-    </>
-  );
-};
-
-const App = () => {
-  const [shadowOffsetWidth, setShadowOffsetWidth] = useState(0);
-  const [shadowOffsetHeight, setShadowOffsetHeight] = useState(0);
-  const [shadowRadius, setShadowRadius] = useState(0);
-  const [shadowOpacity, setShadowOpacity] = useState(0.1);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View
-          style={[
-            styles.square,
-            {
-              shadowOffset: {
-                width: shadowOffsetWidth,
-                height: -shadowOffsetHeight,
-              },
-              shadowOpacity,
-              shadowRadius,
-            },
-          ]}
-        />
-        <View style={styles.controls}>
-          <ShadowPropSlider
-            label="shadowOffset - X"
-            minimumValue={-50}
-            maximumValue={50}
-            value={shadowOffsetWidth}
-            onValueChange={setShadowOffsetWidth}
-          />
-          <ShadowPropSlider
-            label="shadowOffset - Y"
-            minimumValue={-50}
-            maximumValue={50}
-            value={shadowOffsetHeight}
-            onValueChange={setShadowOffsetHeight}
-          />
-          <ShadowPropSlider
-            label="shadowRadius"
-            minimumValue={0}
-            maximumValue={100}
-            value={shadowRadius}
-            onValueChange={setShadowRadius}
-          />
-          <ShadowPropSlider
-            label="shadowOpacity"
-            minimumValue={0}
-            maximumValue={1}
-            step={0.05}
-            value={shadowOpacity}
-            onValueChange={val => setShadowOpacity(val)}
-          />
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'space-around',
-    backgroundColor: '#ecf0f1',
-    padding: 8,
-  },
-  square: {
-    alignSelf: 'center',
-    backgroundColor: 'white',
-    borderRadius: 4,
-    height: 150,
-    shadowColor: 'black',
-    width: 150,
-  },
-  controls: {
-    paddingHorizontal: 12,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=tsx&dependencies=@react-native-community/slider
-import React, {useState} from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-import Slider, {SliderProps} from '@react-native-community/slider';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-type ShadowPropSliderProps = SliderProps & {
-  label: string;
-};
-
-const ShadowPropSlider = ({label, value, ...props}: ShadowPropSliderProps) => {
-  return (
-    <>
-      <Text>
-        {label} ({value?.toFixed(2)})
-      </Text>
-      <Slider step={1} value={value} {...props} />
-    </>
-  );
-};
-
-const App = () => {
-  const [shadowOffsetWidth, setShadowOffsetWidth] = useState(0);
-  const [shadowOffsetHeight, setShadowOffsetHeight] = useState(0);
-  const [shadowRadius, setShadowRadius] = useState(0);
-  const [shadowOpacity, setShadowOpacity] = useState(0.1);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View
-          style={[
-            styles.square,
-            {
-              shadowOffset: {
-                width: shadowOffsetWidth,
-                height: -shadowOffsetHeight,
-              },
-              shadowOpacity,
-              shadowRadius,
-            },
-          ]}
-        />
-        <View style={styles.controls}>
-          <ShadowPropSlider
-            label="shadowOffset - X"
-            minimumValue={-50}
-            maximumValue={50}
-            value={shadowOffsetWidth}
-            onValueChange={setShadowOffsetWidth}
-          />
-          <ShadowPropSlider
-            label="shadowOffset - Y"
-            minimumValue={-50}
-            maximumValue={50}
-            value={shadowOffsetHeight}
-            onValueChange={setShadowOffsetHeight}
-          />
-          <ShadowPropSlider
-            label="shadowRadius"
-            minimumValue={0}
-            maximumValue={100}
-            value={shadowRadius}
-            onValueChange={setShadowRadius}
-          />
-          <ShadowPropSlider
-            label="shadowOpacity"
-            minimumValue={0}
-            maximumValue={1}
-            step={0.05}
-            value={shadowOpacity}
-            onValueChange={val => setShadowOpacity(val)}
-          />
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'space-around',
-    backgroundColor: '#ecf0f1',
-    padding: 8,
-  },
-  square: {
-    alignSelf: 'center',
-    backgroundColor: 'white',
-    borderRadius: 4,
-    height: 150,
-    shadowColor: 'black',
-    width: 150,
-  },
-  controls: {
-    paddingHorizontal: 12,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
----
-
-# Reference
-
-There are 3 sets of shadow APIs in React Native:
-
-- `boxShadow`: A View style prop and a spec-compliant implementation of the [web style prop of the same name](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow).
-- `dropShadow`: A specific filter function available as part of the [`filter`](./view-style-props#filter) View style prop.
-- Various `shadow` props (`shadowColor`, `shadowOffset`, `shadowOpacity`, `shadowRadius`): These map directly to their native counterparts exposed by the platform-level APIs.
-
-The difference between `dropShadow` and `boxShadow` are as follows:
-
-- `dropShadow` exists as part of `filter`, whereas `boxShadow` is a standalone style prop.
-- `dropShadow` is an alpha mask, so only pixels with a positive alpha value will "cast" a shadow. `boxShadow` will cast around the border box of the element no matter it's contents (unless it is inset).
-- `dropShadow` is only available on Android, `boxShadow` is available on iOS and Android.
-- `dropShadow` cannot be inset like `boxShadow`.
-- `dropShadow` does not have the `spreadDistance` argument like `boxShadow`.
-
-Both `boxShadow` and `dropShadow` are generally more capable than the `shadow` props. The `shadow` props, however, map to native platform-level APIs, so if you only need a straightforward shadow these props are recommended. Note that only `shadowColor` works on both Android and iOS, all other `shadow` props only work on iOS.
-
-## Props
-
-### `boxShadow`
-
-See [View Style Props](./view-style-props#boxshadow) for documentation.
-
-### `dropShadow` <div className="label android">Android</div>
-
-See [View Style Props](./view-style-props#filter) for documentation.
-
-### `shadowColor`
-
-Sets the drop shadow color.
-
-This property will only work on Android API 28 and above. For similar functionality on lower Android APIs, use the [`elevation` property](view-style-props#elevation-android).
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `shadowOffset` <div className="label ios">iOS</div>
-
-Sets the drop shadow offset.
-
-| Type                                     |
-| ---------------------------------------- |
-| object: `{width: number,height: number}` |
-
----
-
-### `shadowOpacity` <div className="label ios">iOS</div>
-
-Sets the drop shadow opacity (multiplied by the color's alpha component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `shadowRadius` <div className="label ios">iOS</div>
-
-Sets the drop shadow blur radius.
-
-| Type   |
-| ------ |
-| number |
+---
+id: shadow-props
+title: Shadow Props
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=js&dependencies=@react-native-community/slider
+import {useState} from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+import Slider from '@react-native-community/slider';
+
+const ShadowPropSlider = ({label, value, ...props}) => {
+  return (
+    <>
+      <Text>
+        {label} ({value.toFixed(2)})
+      </Text>
+      <Slider step={1} value={value} {...props} />
+    </>
+  );
+};
+
+const App = () => {
+  const [shadowOffsetWidth, setShadowOffsetWidth] = useState(0);
+  const [shadowOffsetHeight, setShadowOffsetHeight] = useState(0);
+  const [shadowRadius, setShadowRadius] = useState(0);
+  const [shadowOpacity, setShadowOpacity] = useState(0.1);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View
+          style={[
+            styles.square,
+            {
+              shadowOffset: {
+                width: shadowOffsetWidth,
+                height: -shadowOffsetHeight,
+              },
+              shadowOpacity,
+              shadowRadius,
+            },
+          ]}
+        />
+        <View style={styles.controls}>
+          <ShadowPropSlider
+            label="shadowOffset - X"
+            minimumValue={-50}
+            maximumValue={50}
+            value={shadowOffsetWidth}
+            onValueChange={setShadowOffsetWidth}
+          />
+          <ShadowPropSlider
+            label="shadowOffset - Y"
+            minimumValue={-50}
+            maximumValue={50}
+            value={shadowOffsetHeight}
+            onValueChange={setShadowOffsetHeight}
+          />
+          <ShadowPropSlider
+            label="shadowRadius"
+            minimumValue={0}
+            maximumValue={100}
+            value={shadowRadius}
+            onValueChange={setShadowRadius}
+          />
+          <ShadowPropSlider
+            label="shadowOpacity"
+            minimumValue={0}
+            maximumValue={1}
+            step={0.05}
+            value={shadowOpacity}
+            onValueChange={val => setShadowOpacity(val)}
+          />
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'space-around',
+    backgroundColor: '#ecf0f1',
+    padding: 8,
+  },
+  square: {
+    alignSelf: 'center',
+    backgroundColor: 'white',
+    borderRadius: 4,
+    height: 150,
+    shadowColor: 'black',
+    width: 150,
+  },
+  controls: {
+    paddingHorizontal: 12,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=tsx&dependencies=@react-native-community/slider
+import {useState} from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+import Slider, {SliderProps} from '@react-native-community/slider';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+type ShadowPropSliderProps = SliderProps & {
+  label: string;
+};
+
+const ShadowPropSlider = ({label, value, ...props}: ShadowPropSliderProps) => {
+  return (
+    <>
+      <Text>
+        {label} ({value?.toFixed(2)})
+      </Text>
+      <Slider step={1} value={value} {...props} />
+    </>
+  );
+};
+
+const App = () => {
+  const [shadowOffsetWidth, setShadowOffsetWidth] = useState(0);
+  const [shadowOffsetHeight, setShadowOffsetHeight] = useState(0);
+  const [shadowRadius, setShadowRadius] = useState(0);
+  const [shadowOpacity, setShadowOpacity] = useState(0.1);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View
+          style={[
+            styles.square,
+            {
+              shadowOffset: {
+                width: shadowOffsetWidth,
+                height: -shadowOffsetHeight,
+              },
+              shadowOpacity,
+              shadowRadius,
+            },
+          ]}
+        />
+        <View style={styles.controls}>
+          <ShadowPropSlider
+            label="shadowOffset - X"
+            minimumValue={-50}
+            maximumValue={50}
+            value={shadowOffsetWidth}
+            onValueChange={setShadowOffsetWidth}
+          />
+          <ShadowPropSlider
+            label="shadowOffset - Y"
+            minimumValue={-50}
+            maximumValue={50}
+            value={shadowOffsetHeight}
+            onValueChange={setShadowOffsetHeight}
+          />
+          <ShadowPropSlider
+            label="shadowRadius"
+            minimumValue={0}
+            maximumValue={100}
+            value={shadowRadius}
+            onValueChange={setShadowRadius}
+          />
+          <ShadowPropSlider
+            label="shadowOpacity"
+            minimumValue={0}
+            maximumValue={1}
+            step={0.05}
+            value={shadowOpacity}
+            onValueChange={val => setShadowOpacity(val)}
+          />
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'space-around',
+    backgroundColor: '#ecf0f1',
+    padding: 8,
+  },
+  square: {
+    alignSelf: 'center',
+    backgroundColor: 'white',
+    borderRadius: 4,
+    height: 150,
+    shadowColor: 'black',
+    width: 150,
+  },
+  controls: {
+    paddingHorizontal: 12,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+---
+
+# Reference
+
+There are 3 sets of shadow APIs in React Native:
+
+- `boxShadow`: A View style prop and a spec-compliant implementation of the [web style prop of the same name](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow).
+- `dropShadow`: A specific filter function available as part of the [`filter`](./view-style-props#filter) View style prop.
+- Various `shadow` props (`shadowColor`, `shadowOffset`, `shadowOpacity`, `shadowRadius`): These map directly to their native counterparts exposed by the platform-level APIs.
+
+The difference between `dropShadow` and `boxShadow` are as follows:
+
+- `dropShadow` exists as part of `filter`, whereas `boxShadow` is a standalone style prop.
+- `dropShadow` is an alpha mask, so only pixels with a positive alpha value will "cast" a shadow. `boxShadow` will cast around the border box of the element no matter it's contents (unless it is inset).
+- `dropShadow` is only available on Android, `boxShadow` is available on iOS and Android.
+- `dropShadow` cannot be inset like `boxShadow`.
+- `dropShadow` does not have the `spreadDistance` argument like `boxShadow`.
+
+Both `boxShadow` and `dropShadow` are generally more capable than the `shadow` props. The `shadow` props, however, map to native platform-level APIs, so if you only need a straightforward shadow these props are recommended. Note that only `shadowColor` works on both Android and iOS, all other `shadow` props only work on iOS.
+
+## Props
+
+### `boxShadow`
+
+See [View Style Props](./view-style-props#boxshadow) for documentation.
+
+### `dropShadow` <div className="label android">Android</div>
+
+See [View Style Props](./view-style-props#filter) for documentation.
+
+### `shadowColor`
+
+Sets the drop shadow color.
+
+This property will only work on Android API 28 and above. For similar functionality on lower Android APIs, use the [`elevation` property](view-style-props#elevation-android).
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `shadowOffset` <div className="label ios">iOS</div>
+
+Sets the drop shadow offset.
+
+| Type                                     |
+| ---------------------------------------- |
+| object: `{width: number,height: number}` |
+
+---
+
+### `shadowOpacity` <div className="label ios">iOS</div>
+
+Sets the drop shadow opacity (multiplied by the color's alpha component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `shadowRadius` <div className="label ios">iOS</div>
+
+Sets the drop shadow blur radius.
+
+| Type   |
+| ------ |
+| number |
diff --git a/website/versioned_docs/version-0.83/share.md b/website/versioned_docs/version-0.83/share.md
index 1fc5823361f..46d0f858435 100644
--- a/website/versioned_docs/version-0.83/share.md
+++ b/website/versioned_docs/version-0.83/share.md
@@ -11,7 +11,6 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con
 <TabItem value="javascript">
 
 ```SnackPlayer name=Example&supportedPlatforms=ios,android&ext=js
-import React from 'react';
 import {Alert, Share, Button} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -51,7 +50,6 @@ export default ShareExample;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Example&supportedPlatforms=ios,android&ext=tsx
-import React from 'react';
 import {Alert, Share, Button} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.83/state.md b/website/versioned_docs/version-0.83/state.md
index bc162f44b40..ebf3ec14336 100644
--- a/website/versioned_docs/version-0.83/state.md
+++ b/website/versioned_docs/version-0.83/state.md
@@ -1,103 +1,103 @@
----
-id: state
-title: State
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-There are two types of data that control a component: `props` and `state`. `props` are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use `state`.
-
-In general, you should initialize `state` in the constructor, and then call `setState` when you want to change it.
-
-For example, let's say we want to make text that blinks all the time. The text itself gets set once when the blinking component gets created, so the text itself is a `prop`. The "whether the text is currently on or off" changes over time, so that should be kept in `state`.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=State&ext=js
-import React, {useState, useEffect} from 'react';
-import {Text, View} from 'react-native';
-
-const Blink = props => {
-  const [isShowingText, setIsShowingText] = useState(true);
-
-  useEffect(() => {
-    const toggle = setInterval(() => {
-      setIsShowingText(!isShowingText);
-    }, 1000);
-
-    return () => clearInterval(toggle);
-  });
-
-  if (!isShowingText) {
-    return null;
-  }
-
-  return <Text>{props.text}</Text>;
-};
-
-const BlinkApp = () => {
-  return (
-    <View style={{marginTop: 50}}>
-      <Blink text="I love to blink" />
-      <Blink text="Yes blinking is so great" />
-      <Blink text="Why did they ever take this out of HTML" />
-      <Blink text="Look at me look at me look at me" />
-    </View>
-  );
-};
-
-export default BlinkApp;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=State&ext=tsx
-import React, {useState, useEffect} from 'react';
-import {Text, View} from 'react-native';
-
-type BlinkProps = {
-  text: string;
-};
-
-const Blink = (props: BlinkProps) => {
-  const [isShowingText, setIsShowingText] = useState(true);
-
-  useEffect(() => {
-    const toggle = setInterval(() => {
-      setIsShowingText(!isShowingText);
-    }, 1000);
-
-    return () => clearInterval(toggle);
-  });
-
-  if (!isShowingText) {
-    return null;
-  }
-
-  return <Text>{props.text}</Text>;
-};
-
-const BlinkApp = () => {
-  return (
-    <View style={{marginTop: 50}}>
-      <Blink text="I love to blink" />
-      <Blink text="Yes blinking is so great" />
-      <Blink text="Why did they ever take this out of HTML" />
-      <Blink text="Look at me look at me look at me" />
-    </View>
-  );
-};
-
-export default BlinkApp;
-```
-
-</TabItem>
-</Tabs>
-
-In a real application, you probably won't be setting state with a timer. You might set state when you have new data from the server, or from user input. You can also use a state container like [Redux](https://redux.js.org/) or [MobX](https://mobx.js.org/) to control your data flow. In that case you would use Redux or MobX to modify your state rather than calling `setState` directly.
-
-When setState is called, BlinkApp will re-render its Component. By calling setState within the Timer, the component will re-render every time the Timer ticks.
-
-State works the same way as it does in React, so for more details on handling state, you can look at the [React.Component API](https://react.dev/reference/react/Component#setstate). At this point, you may have noticed that most of our examples use the default text color. To customize the text color, you will have to [learn about Style](style.md).
+---
+id: state
+title: State
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+There are two types of data that control a component: `props` and `state`. `props` are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use `state`.
+
+In general, you should initialize `state` in the constructor, and then call `setState` when you want to change it.
+
+For example, let's say we want to make text that blinks all the time. The text itself gets set once when the blinking component gets created, so the text itself is a `prop`. The "whether the text is currently on or off" changes over time, so that should be kept in `state`.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=State&ext=js
+import {useState, useEffect} from 'react';
+import {Text, View} from 'react-native';
+
+const Blink = props => {
+  const [isShowingText, setIsShowingText] = useState(true);
+
+  useEffect(() => {
+    const toggle = setInterval(() => {
+      setIsShowingText(!isShowingText);
+    }, 1000);
+
+    return () => clearInterval(toggle);
+  });
+
+  if (!isShowingText) {
+    return null;
+  }
+
+  return <Text>{props.text}</Text>;
+};
+
+const BlinkApp = () => {
+  return (
+    <View style={{marginTop: 50}}>
+      <Blink text="I love to blink" />
+      <Blink text="Yes blinking is so great" />
+      <Blink text="Why did they ever take this out of HTML" />
+      <Blink text="Look at me look at me look at me" />
+    </View>
+  );
+};
+
+export default BlinkApp;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=State&ext=tsx
+import {useState, useEffect} from 'react';
+import {Text, View} from 'react-native';
+
+type BlinkProps = {
+  text: string;
+};
+
+const Blink = (props: BlinkProps) => {
+  const [isShowingText, setIsShowingText] = useState(true);
+
+  useEffect(() => {
+    const toggle = setInterval(() => {
+      setIsShowingText(!isShowingText);
+    }, 1000);
+
+    return () => clearInterval(toggle);
+  });
+
+  if (!isShowingText) {
+    return null;
+  }
+
+  return <Text>{props.text}</Text>;
+};
+
+const BlinkApp = () => {
+  return (
+    <View style={{marginTop: 50}}>
+      <Blink text="I love to blink" />
+      <Blink text="Yes blinking is so great" />
+      <Blink text="Why did they ever take this out of HTML" />
+      <Blink text="Look at me look at me look at me" />
+    </View>
+  );
+};
+
+export default BlinkApp;
+```
+
+</TabItem>
+</Tabs>
+
+In a real application, you probably won't be setting state with a timer. You might set state when you have new data from the server, or from user input. You can also use a state container like [Redux](https://redux.js.org/) or [MobX](https://mobx.js.org/) to control your data flow. In that case you would use Redux or MobX to modify your state rather than calling `setState` directly.
+
+When setState is called, BlinkApp will re-render its Component. By calling setState within the Timer, the component will re-render every time the Timer ticks.
+
+State works the same way as it does in React, so for more details on handling state, you can look at the [React.Component API](https://react.dev/reference/react/Component#setstate). At this point, you may have noticed that most of our examples use the default text color. To customize the text color, you will have to [learn about Style](style.md).
diff --git a/website/versioned_docs/version-0.83/statusbar.md b/website/versioned_docs/version-0.83/statusbar.md
index 93810f7b0e0..97686cf2260 100644
--- a/website/versioned_docs/version-0.83/statusbar.md
+++ b/website/versioned_docs/version-0.83/statusbar.md
@@ -1,513 +1,513 @@
----
-id: statusbar
-title: StatusBar
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-Component to control the app's status bar. The status bar is the zone, typically at the top of the screen, that displays the current time, Wi-Fi and cellular network information, battery level and/or other status icons.
-
-### 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.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=StatusBar%20Component%20Example&supportedPlatforms=android,ios&ext=js
-import React, {useState} from 'react';
-import {
-  Button,
-  Platform,
-  StatusBar,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const STYLES = ['default', 'dark-content', 'light-content'];
-const TRANSITIONS = ['fade', 'slide', 'none'];
-
-const App = () => {
-  const [hidden, setHidden] = useState(false);
-  const [statusBarStyle, setStatusBarStyle] = useState(STYLES[0]);
-  const [statusBarTransition, setStatusBarTransition] = useState(
-    TRANSITIONS[0],
-  );
-
-  const changeStatusBarVisibility = () => setHidden(!hidden);
-
-  const changeStatusBarStyle = () => {
-    const styleId = STYLES.indexOf(statusBarStyle) + 1;
-    if (styleId === STYLES.length) {
-      setStatusBarStyle(STYLES[0]);
-    } else {
-      setStatusBarStyle(STYLES[styleId]);
-    }
-  };
-
-  const changeStatusBarTransition = () => {
-    const transition = TRANSITIONS.indexOf(statusBarTransition) + 1;
-    if (transition === TRANSITIONS.length) {
-      setStatusBarTransition(TRANSITIONS[0]);
-    } else {
-      setStatusBarTransition(TRANSITIONS[transition]);
-    }
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <StatusBar
-          animated={true}
-          backgroundColor="#61dafb"
-          barStyle={statusBarStyle}
-          showHideTransition={statusBarTransition}
-          hidden={hidden}
-        />
-        <Text style={styles.textStyle}>
-          StatusBar Visibility:{'\n'}
-          {hidden ? 'Hidden' : 'Visible'}
-        </Text>
-        <Text style={styles.textStyle}>
-          StatusBar Style:{'\n'}
-          {statusBarStyle}
-        </Text>
-        {Platform.OS === 'ios' ? (
-          <Text style={styles.textStyle}>
-            StatusBar Transition:{'\n'}
-            {statusBarTransition}
-          </Text>
-        ) : null}
-        <View style={styles.buttonsContainer}>
-          <Button
-            title="Toggle StatusBar"
-            onPress={changeStatusBarVisibility}
-          />
-          <Button
-            title="Change StatusBar Style"
-            onPress={changeStatusBarStyle}
-          />
-          {Platform.OS === 'ios' ? (
-            <Button
-              title="Change StatusBar Transition"
-              onPress={changeStatusBarTransition}
-            />
-          ) : null}
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    backgroundColor: '#ECF0F1',
-  },
-  buttonsContainer: {
-    padding: 10,
-  },
-  textStyle: {
-    textAlign: 'center',
-    marginBottom: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=StatusBar%20Component%20Example&supportedPlatforms=android,ios&ext=tsx
-import React, {useState} from 'react';
-import {
-  Button,
-  Platform,
-  StatusBar,
-  StyleSheet,
-  Text,
-  View,
-  StatusBarStyle,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const STYLES = ['default', 'dark-content', 'light-content'] as const;
-const TRANSITIONS = ['fade', 'slide', 'none'] as const;
-
-const App = () => {
-  const [hidden, setHidden] = useState(false);
-  const [statusBarStyle, setStatusBarStyle] = useState<StatusBarStyle>(
-    STYLES[0],
-  );
-  const [statusBarTransition, setStatusBarTransition] = useState<
-    'fade' | 'slide' | 'none'
-  >(TRANSITIONS[0]);
-
-  const changeStatusBarVisibility = () => setHidden(!hidden);
-
-  const changeStatusBarStyle = () => {
-    const styleId = STYLES.indexOf(statusBarStyle) + 1;
-    if (styleId === STYLES.length) {
-      setStatusBarStyle(STYLES[0]);
-    } else {
-      setStatusBarStyle(STYLES[styleId]);
-    }
-  };
-
-  const changeStatusBarTransition = () => {
-    const transition = TRANSITIONS.indexOf(statusBarTransition) + 1;
-    if (transition === TRANSITIONS.length) {
-      setStatusBarTransition(TRANSITIONS[0]);
-    } else {
-      setStatusBarTransition(TRANSITIONS[transition]);
-    }
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <StatusBar
-          animated={true}
-          backgroundColor="#61dafb"
-          barStyle={statusBarStyle}
-          showHideTransition={statusBarTransition}
-          hidden={hidden}
-        />
-        <Text style={styles.textStyle}>
-          StatusBar Visibility:{'\n'}
-          {hidden ? 'Hidden' : 'Visible'}
-        </Text>
-        <Text style={styles.textStyle}>
-          StatusBar Style:{'\n'}
-          {statusBarStyle}
-        </Text>
-        {Platform.OS === 'ios' ? (
-          <Text style={styles.textStyle}>
-            StatusBar Transition:{'\n'}
-            {statusBarTransition}
-          </Text>
-        ) : null}
-        <View style={styles.buttonsContainer}>
-          <Button
-            title="Toggle StatusBar"
-            onPress={changeStatusBarVisibility}
-          />
-          <Button
-            title="Change StatusBar Style"
-            onPress={changeStatusBarStyle}
-          />
-          {Platform.OS === 'ios' ? (
-            <Button
-              title="Change StatusBar Transition"
-              onPress={changeStatusBarTransition}
-            />
-          ) : null}
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    backgroundColor: '#ECF0F1',
-  },
-  buttonsContainer: {
-    padding: 10,
-  },
-  textStyle: {
-    textAlign: 'center',
-    marginBottom: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### 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.
-
----
-
-# Reference
-
-## Constants
-
-### `currentHeight` <div className="label android">Android</div>
-
-The height of the status bar, which includes the notch height, if present.
-
----
-
-## Props
-
-### `animated`
-
-If the transition between status bar property changes should be animated. Supported for `backgroundColor`, `barStyle` and `hidden` properties.
-
-| Type    | Required | Default |
-| ------- | -------- | ------- |
-| boolean | No       | `false` |
-
----
-
-### `backgroundColor` <div className="label android">Android</div>
-
-The background color of the status bar.
-
-:::warning
-Due to edge-to-edge enforcement introduced in Android 15, setting background color of the status bar is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
-:::
-
-| Type            | Required | Default                                                                |
-| --------------- | -------- | ---------------------------------------------------------------------- |
-| [color](colors) | No       | default system StatusBar background color, or `'black'` if not defined |
-
----
-
-### `barStyle`
-
-Sets the color of the status bar text.
-
-On Android, this will only have an impact on API versions 23 and above.
-
-| Type                                       | Required | Default     |
-| ------------------------------------------ | -------- | ----------- |
-| [StatusBarStyle](statusbar#statusbarstyle) | No       | `'default'` |
-
----
-
-### `hidden`
-
-If the status bar is hidden.
-
-| Type    | Required | Default |
-| ------- | -------- | ------- |
-| boolean | No       | `false` |
-
----
-
-### `networkActivityIndicatorVisible` <div className="label ios">iOS</div>
-
-If the network activity indicator should be visible.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
----
-
-### `showHideTransition` <div className="label ios">iOS</div>
-
-The transition effect when showing and hiding the status bar using the `hidden` prop.
-
-| Type                                               | Default  |
-| -------------------------------------------------- | -------- |
-| [StatusBarAnimation](statusbar#statusbaranimation) | `'fade'` |
-
----
-
-### `translucent` <div className="label android">Android</div>
-
-If the status bar is translucent. When translucent is set to `true`, the app will draw under the status bar. This is useful when using a semi transparent status bar color.
-
-:::warning
-Due to edge-to-edge enforcement introduced in Android 15, setting the status bar as translucent is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
-:::
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
-## Methods
-
-### `popStackEntry()`
-
-```tsx
-static popStackEntry(entry: StatusBarProps);
-```
-
-Get and remove the last StatusBar entry from the stack.
-
-**Parameters:**
-
-| Name                                                       | Type | Description                           |
-| ---------------------------------------------------------- | ---- | ------------------------------------- |
-| entry <div className="label basic required">Required</div> | any  | Entry returned from `pushStackEntry`. |
-
----
-
-### `pushStackEntry()`
-
-```tsx
-static pushStackEntry(props: StatusBarProps): StatusBarProps;
-```
-
-Push a StatusBar entry onto the stack. The return value should be passed to `popStackEntry` when complete.
-
-**Parameters:**
-
-| Name                                                       | Type | Description                                                      |
-| ---------------------------------------------------------- | ---- | ---------------------------------------------------------------- |
-| props <div className="label basic required">Required</div> | any  | Object containing the StatusBar props to use in the stack entry. |
-
----
-
-### `replaceStackEntry()`
-
-```tsx
-static replaceStackEntry(
-  entry: StatusBarProps,
-  props: StatusBarProps
-): StatusBarProps;
-```
-
-Replace an existing StatusBar stack entry with new props.
-
-**Parameters:**
-
-| Name                                                       | Type | Description                                                                  |
-| ---------------------------------------------------------- | ---- | ---------------------------------------------------------------------------- |
-| entry <div className="label basic required">Required</div> | any  | Entry returned from `pushStackEntry` to replace.                             |
-| props <div className="label basic required">Required</div> | any  | Object containing the StatusBar props to use in the replacement stack entry. |
-
----
-
-### `setBackgroundColor()` <div className="label android">Android</div>
-
-```tsx
-static setBackgroundColor(color: ColorValue, animated?: boolean);
-```
-
-Set the background color for the status bar.
-
-:::warning
-Due to edge-to-edge enforcement introduced in Android 15, setting background color of the status bar is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
-:::
-
-**Parameters:**
-
-| Name                                                       | Type    | Description               |
-| ---------------------------------------------------------- | ------- | ------------------------- |
-| color <div className="label basic required">Required</div> | string  | Background color.         |
-| animated                                                   | boolean | Animate the style change. |
-
----
-
-### `setBarStyle()`
-
-```tsx
-static setBarStyle(style: StatusBarStyle, animated?: boolean);
-```
-
-Set the status bar style.
-
-**Parameters:**
-
-| Name                                                       | Type                                       | Description               |
-| ---------------------------------------------------------- | ------------------------------------------ | ------------------------- |
-| style <div className="label basic required">Required</div> | [StatusBarStyle](statusbar#statusbarstyle) | Status bar style to set.  |
-| animated                                                   | boolean                                    | Animate the style change. |
-
----
-
-### `setHidden()`
-
-```tsx
-static setHidden(hidden: boolean, animation?: StatusBarAnimation);
-```
-
-Show or hide the status bar.
-
-**Parameters:**
-
-| Name                                                        | Type                                               | Description                                             |
-| ----------------------------------------------------------- | -------------------------------------------------- | ------------------------------------------------------- |
-| hidden <div className="label basic required">Required</div> | boolean                                            | Hide the status bar.                                    |
-| animation <div className="label ios">iOS</div>              | [StatusBarAnimation](statusbar#statusbaranimation) | Animation when changing the status bar hidden property. |
-
----
-
-### 🗑️ `setNetworkActivityIndicatorVisible()` <div className="label ios">iOS</div>
-
-:::warning[Deprecated]
-The status bar network activity indicator is not supported in iOS 13 and later. This will be removed in a future release.
-:::
-
-```tsx
-static setNetworkActivityIndicatorVisible(visible: boolean);
-```
-
-Control the visibility of the network activity indicator.
-
-**Parameters:**
-
-| Name                                                         | Type    | Description         |
-| ------------------------------------------------------------ | ------- | ------------------- |
-| visible <div className="label basic required">Required</div> | boolean | Show the indicator. |
-
----
-
-### `setTranslucent()` <div className="label android">Android</div>
-
-```tsx
-static setTranslucent(translucent: boolean);
-```
-
-Control the translucency of the status bar.
-
-:::warning
-Due to edge-to-edge enforcement introduced in Android 15, setting the status bar as translucent is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
-:::
-
-**Parameters:**
-
-| Name                                                             | Type    | Description         |
-| ---------------------------------------------------------------- | ------- | ------------------- |
-| translucent <div className="label basic required">Required</div> | boolean | Set as translucent. |
-
-## Type Definitions
-
-### StatusBarAnimation
-
-Status bar animation type for transitions on the iOS.
-
-| Type |
-| ---- |
-| enum |
-
-**Constants:**
-
-| Value     | Type   | Description     |
-| --------- | ------ | --------------- |
-| `'fade'`  | string | Fade animation  |
-| `'slide'` | string | Slide animation |
-| `'none'`  | string | No animation    |
-
----
-
-### StatusBarStyle
-
-Status bar style type.
-
-| Type |
-| ---- |
-| enum |
-
-**Constants:**
-
-| Value             | Type   | Description                                                |
-| ----------------- | ------ | ---------------------------------------------------------- |
-| `'default'`       | string | Default status bar style (dark for iOS, light for Android) |
-| `'light-content'` | string | White texts and icons                                      |
-| `'dark-content'`  | string | Dark texts and icons (requires API>=23 on Android)         |
+---
+id: statusbar
+title: StatusBar
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+Component to control the app's status bar. The status bar is the zone, typically at the top of the screen, that displays the current time, Wi-Fi and cellular network information, battery level and/or other status icons.
+
+### 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.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=StatusBar%20Component%20Example&supportedPlatforms=android,ios&ext=js
+import {useState} from 'react';
+import {
+  Button,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const STYLES = ['default', 'dark-content', 'light-content'];
+const TRANSITIONS = ['fade', 'slide', 'none'];
+
+const App = () => {
+  const [hidden, setHidden] = useState(false);
+  const [statusBarStyle, setStatusBarStyle] = useState(STYLES[0]);
+  const [statusBarTransition, setStatusBarTransition] = useState(
+    TRANSITIONS[0],
+  );
+
+  const changeStatusBarVisibility = () => setHidden(!hidden);
+
+  const changeStatusBarStyle = () => {
+    const styleId = STYLES.indexOf(statusBarStyle) + 1;
+    if (styleId === STYLES.length) {
+      setStatusBarStyle(STYLES[0]);
+    } else {
+      setStatusBarStyle(STYLES[styleId]);
+    }
+  };
+
+  const changeStatusBarTransition = () => {
+    const transition = TRANSITIONS.indexOf(statusBarTransition) + 1;
+    if (transition === TRANSITIONS.length) {
+      setStatusBarTransition(TRANSITIONS[0]);
+    } else {
+      setStatusBarTransition(TRANSITIONS[transition]);
+    }
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <StatusBar
+          animated={true}
+          backgroundColor="#61dafb"
+          barStyle={statusBarStyle}
+          showHideTransition={statusBarTransition}
+          hidden={hidden}
+        />
+        <Text style={styles.textStyle}>
+          StatusBar Visibility:{'\n'}
+          {hidden ? 'Hidden' : 'Visible'}
+        </Text>
+        <Text style={styles.textStyle}>
+          StatusBar Style:{'\n'}
+          {statusBarStyle}
+        </Text>
+        {Platform.OS === 'ios' ? (
+          <Text style={styles.textStyle}>
+            StatusBar Transition:{'\n'}
+            {statusBarTransition}
+          </Text>
+        ) : null}
+        <View style={styles.buttonsContainer}>
+          <Button
+            title="Toggle StatusBar"
+            onPress={changeStatusBarVisibility}
+          />
+          <Button
+            title="Change StatusBar Style"
+            onPress={changeStatusBarStyle}
+          />
+          {Platform.OS === 'ios' ? (
+            <Button
+              title="Change StatusBar Transition"
+              onPress={changeStatusBarTransition}
+            />
+          ) : null}
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: '#ECF0F1',
+  },
+  buttonsContainer: {
+    padding: 10,
+  },
+  textStyle: {
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=StatusBar%20Component%20Example&supportedPlatforms=android,ios&ext=tsx
+import {useState} from 'react';
+import {
+  Button,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  Text,
+  View,
+  StatusBarStyle,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const STYLES = ['default', 'dark-content', 'light-content'] as const;
+const TRANSITIONS = ['fade', 'slide', 'none'] as const;
+
+const App = () => {
+  const [hidden, setHidden] = useState(false);
+  const [statusBarStyle, setStatusBarStyle] = useState<StatusBarStyle>(
+    STYLES[0],
+  );
+  const [statusBarTransition, setStatusBarTransition] = useState<
+    'fade' | 'slide' | 'none'
+  >(TRANSITIONS[0]);
+
+  const changeStatusBarVisibility = () => setHidden(!hidden);
+
+  const changeStatusBarStyle = () => {
+    const styleId = STYLES.indexOf(statusBarStyle) + 1;
+    if (styleId === STYLES.length) {
+      setStatusBarStyle(STYLES[0]);
+    } else {
+      setStatusBarStyle(STYLES[styleId]);
+    }
+  };
+
+  const changeStatusBarTransition = () => {
+    const transition = TRANSITIONS.indexOf(statusBarTransition) + 1;
+    if (transition === TRANSITIONS.length) {
+      setStatusBarTransition(TRANSITIONS[0]);
+    } else {
+      setStatusBarTransition(TRANSITIONS[transition]);
+    }
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <StatusBar
+          animated={true}
+          backgroundColor="#61dafb"
+          barStyle={statusBarStyle}
+          showHideTransition={statusBarTransition}
+          hidden={hidden}
+        />
+        <Text style={styles.textStyle}>
+          StatusBar Visibility:{'\n'}
+          {hidden ? 'Hidden' : 'Visible'}
+        </Text>
+        <Text style={styles.textStyle}>
+          StatusBar Style:{'\n'}
+          {statusBarStyle}
+        </Text>
+        {Platform.OS === 'ios' ? (
+          <Text style={styles.textStyle}>
+            StatusBar Transition:{'\n'}
+            {statusBarTransition}
+          </Text>
+        ) : null}
+        <View style={styles.buttonsContainer}>
+          <Button
+            title="Toggle StatusBar"
+            onPress={changeStatusBarVisibility}
+          />
+          <Button
+            title="Change StatusBar Style"
+            onPress={changeStatusBarStyle}
+          />
+          {Platform.OS === 'ios' ? (
+            <Button
+              title="Change StatusBar Transition"
+              onPress={changeStatusBarTransition}
+            />
+          ) : null}
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: '#ECF0F1',
+  },
+  buttonsContainer: {
+    padding: 10,
+  },
+  textStyle: {
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### 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.
+
+---
+
+# Reference
+
+## Constants
+
+### `currentHeight` <div className="label android">Android</div>
+
+The height of the status bar, which includes the notch height, if present.
+
+---
+
+## Props
+
+### `animated`
+
+If the transition between status bar property changes should be animated. Supported for `backgroundColor`, `barStyle` and `hidden` properties.
+
+| Type    | Required | Default |
+| ------- | -------- | ------- |
+| boolean | No       | `false` |
+
+---
+
+### `backgroundColor` <div className="label android">Android</div>
+
+The background color of the status bar.
+
+:::warning
+Due to edge-to-edge enforcement introduced in Android 15, setting background color of the status bar is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
+:::
+
+| Type            | Required | Default                                                                |
+| --------------- | -------- | ---------------------------------------------------------------------- |
+| [color](colors) | No       | default system StatusBar background color, or `'black'` if not defined |
+
+---
+
+### `barStyle`
+
+Sets the color of the status bar text.
+
+On Android, this will only have an impact on API versions 23 and above.
+
+| Type                                       | Required | Default     |
+| ------------------------------------------ | -------- | ----------- |
+| [StatusBarStyle](statusbar#statusbarstyle) | No       | `'default'` |
+
+---
+
+### `hidden`
+
+If the status bar is hidden.
+
+| Type    | Required | Default |
+| ------- | -------- | ------- |
+| boolean | No       | `false` |
+
+---
+
+### `networkActivityIndicatorVisible` <div className="label ios">iOS</div>
+
+If the network activity indicator should be visible.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+---
+
+### `showHideTransition` <div className="label ios">iOS</div>
+
+The transition effect when showing and hiding the status bar using the `hidden` prop.
+
+| Type                                               | Default  |
+| -------------------------------------------------- | -------- |
+| [StatusBarAnimation](statusbar#statusbaranimation) | `'fade'` |
+
+---
+
+### `translucent` <div className="label android">Android</div>
+
+If the status bar is translucent. When translucent is set to `true`, the app will draw under the status bar. This is useful when using a semi transparent status bar color.
+
+:::warning
+Due to edge-to-edge enforcement introduced in Android 15, setting the status bar as translucent is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
+:::
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+## Methods
+
+### `popStackEntry()`
+
+```tsx
+static popStackEntry(entry: StatusBarProps);
+```
+
+Get and remove the last StatusBar entry from the stack.
+
+**Parameters:**
+
+| Name                                                       | Type | Description                           |
+| ---------------------------------------------------------- | ---- | ------------------------------------- |
+| entry <div className="label basic required">Required</div> | any  | Entry returned from `pushStackEntry`. |
+
+---
+
+### `pushStackEntry()`
+
+```tsx
+static pushStackEntry(props: StatusBarProps): StatusBarProps;
+```
+
+Push a StatusBar entry onto the stack. The return value should be passed to `popStackEntry` when complete.
+
+**Parameters:**
+
+| Name                                                       | Type | Description                                                      |
+| ---------------------------------------------------------- | ---- | ---------------------------------------------------------------- |
+| props <div className="label basic required">Required</div> | any  | Object containing the StatusBar props to use in the stack entry. |
+
+---
+
+### `replaceStackEntry()`
+
+```tsx
+static replaceStackEntry(
+  entry: StatusBarProps,
+  props: StatusBarProps
+): StatusBarProps;
+```
+
+Replace an existing StatusBar stack entry with new props.
+
+**Parameters:**
+
+| Name                                                       | Type | Description                                                                  |
+| ---------------------------------------------------------- | ---- | ---------------------------------------------------------------------------- |
+| entry <div className="label basic required">Required</div> | any  | Entry returned from `pushStackEntry` to replace.                             |
+| props <div className="label basic required">Required</div> | any  | Object containing the StatusBar props to use in the replacement stack entry. |
+
+---
+
+### `setBackgroundColor()` <div className="label android">Android</div>
+
+```tsx
+static setBackgroundColor(color: ColorValue, animated?: boolean);
+```
+
+Set the background color for the status bar.
+
+:::warning
+Due to edge-to-edge enforcement introduced in Android 15, setting background color of the status bar is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
+:::
+
+**Parameters:**
+
+| Name                                                       | Type    | Description               |
+| ---------------------------------------------------------- | ------- | ------------------------- |
+| color <div className="label basic required">Required</div> | string  | Background color.         |
+| animated                                                   | boolean | Animate the style change. |
+
+---
+
+### `setBarStyle()`
+
+```tsx
+static setBarStyle(style: StatusBarStyle, animated?: boolean);
+```
+
+Set the status bar style.
+
+**Parameters:**
+
+| Name                                                       | Type                                       | Description               |
+| ---------------------------------------------------------- | ------------------------------------------ | ------------------------- |
+| style <div className="label basic required">Required</div> | [StatusBarStyle](statusbar#statusbarstyle) | Status bar style to set.  |
+| animated                                                   | boolean                                    | Animate the style change. |
+
+---
+
+### `setHidden()`
+
+```tsx
+static setHidden(hidden: boolean, animation?: StatusBarAnimation);
+```
+
+Show or hide the status bar.
+
+**Parameters:**
+
+| Name                                                        | Type                                               | Description                                             |
+| ----------------------------------------------------------- | -------------------------------------------------- | ------------------------------------------------------- |
+| hidden <div className="label basic required">Required</div> | boolean                                            | Hide the status bar.                                    |
+| animation <div className="label ios">iOS</div>              | [StatusBarAnimation](statusbar#statusbaranimation) | Animation when changing the status bar hidden property. |
+
+---
+
+### 🗑️ `setNetworkActivityIndicatorVisible()` <div className="label ios">iOS</div>
+
+:::warning[Deprecated]
+The status bar network activity indicator is not supported in iOS 13 and later. This will be removed in a future release.
+:::
+
+```tsx
+static setNetworkActivityIndicatorVisible(visible: boolean);
+```
+
+Control the visibility of the network activity indicator.
+
+**Parameters:**
+
+| Name                                                         | Type    | Description         |
+| ------------------------------------------------------------ | ------- | ------------------- |
+| visible <div className="label basic required">Required</div> | boolean | Show the indicator. |
+
+---
+
+### `setTranslucent()` <div className="label android">Android</div>
+
+```tsx
+static setTranslucent(translucent: boolean);
+```
+
+Control the translucency of the status bar.
+
+:::warning
+Due to edge-to-edge enforcement introduced in Android 15, setting the status bar as translucent is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
+:::
+
+**Parameters:**
+
+| Name                                                             | Type    | Description         |
+| ---------------------------------------------------------------- | ------- | ------------------- |
+| translucent <div className="label basic required">Required</div> | boolean | Set as translucent. |
+
+## Type Definitions
+
+### StatusBarAnimation
+
+Status bar animation type for transitions on the iOS.
+
+| Type |
+| ---- |
+| enum |
+
+**Constants:**
+
+| Value     | Type   | Description     |
+| --------- | ------ | --------------- |
+| `'fade'`  | string | Fade animation  |
+| `'slide'` | string | Slide animation |
+| `'none'`  | string | No animation    |
+
+---
+
+### StatusBarStyle
+
+Status bar style type.
+
+| Type |
+| ---- |
+| enum |
+
+**Constants:**
+
+| Value             | Type   | Description                                                |
+| ----------------- | ------ | ---------------------------------------------------------- |
+| `'default'`       | string | Default status bar style (dark for iOS, light for Android) |
+| `'light-content'` | string | White texts and icons                                      |
+| `'dark-content'`  | string | Dark texts and icons (requires API>=23 on Android)         |
diff --git a/website/versioned_docs/version-0.83/style.md b/website/versioned_docs/version-0.83/style.md
index d847c0597cb..4890db4fbfa 100644
--- a/website/versioned_docs/version-0.83/style.md
+++ b/website/versioned_docs/version-0.83/style.md
@@ -10,7 +10,6 @@ The `style` prop can be a plain old JavaScript object. That's what we usually us
 As a component grows in complexity, it is often cleaner to use `StyleSheet.create` to define several styles in one place. Here's an example:
 
 ```SnackPlayer name=Style
-import React from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 
 const LotsOfStyles = () => {
diff --git a/website/versioned_docs/version-0.83/stylesheet.md b/website/versioned_docs/version-0.83/stylesheet.md
index e5e9283bc59..455246de7d7 100644
--- a/website/versioned_docs/version-0.83/stylesheet.md
+++ b/website/versioned_docs/version-0.83/stylesheet.md
@@ -6,7 +6,6 @@ title: StyleSheet
 A StyleSheet is an abstraction similar to CSS StyleSheets.
 
 ```SnackPlayer name=StyleSheet
-import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -62,7 +61,6 @@ static compose(style1: Object, style2: Object): Object | Object[];
 Combines two styles such that `style2` will override any styles in `style1`. If either style is falsy, the other one is returned without allocating an array, saving allocations and maintaining reference equality for PureComponent checks.
 
 ```SnackPlayer name=Compose
-import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -123,7 +121,6 @@ static flatten(style: Array<Object extends Record<string, ViewStyle | ImageStyle
 Flattens an array of style objects, into one aggregated style object.
 
 ```SnackPlayer name=Flatten
-import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -196,7 +193,6 @@ Sets a function to use to pre-process a style property value. This is used inter
 A very common pattern is to create overlays with position absolute and zero positioning (`position: 'absolute', left: 0, right: 0, top: 0, bottom: 0`), so `absoluteFill` can be used for convenience and to reduce duplication of these repeated styles. If you want, absoluteFill can be used to create a customized entry in a StyleSheet, e.g.:
 
 ```SnackPlayer name=absoluteFill
-import React from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -321,7 +317,6 @@ export default App;
 This is defined as the width of a thin line on the platform. It can be used as the thickness of a border or division between two elements. Example:
 
 ```SnackPlayer name=hairlineWidth
-import React from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 
 const App = () => (
diff --git a/website/versioned_docs/version-0.83/switch.md b/website/versioned_docs/version-0.83/switch.md
index 4f9055c6256..20c73c69db7 100644
--- a/website/versioned_docs/version-0.83/switch.md
+++ b/website/versioned_docs/version-0.83/switch.md
@@ -1,133 +1,133 @@
----
-id: switch
-title: Switch
----
-
-Renders a boolean input.
-
-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=Switch&supportedPlatforms=android,ios
-import React, {useState} from 'react';
-import {Switch, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [isEnabled, setIsEnabled] = useState(false);
-  const toggleSwitch = () => setIsEnabled(previousState => !previousState);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Switch
-          trackColor={{false: '#767577', true: '#81b0ff'}}
-          thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
-          ios_backgroundColor="#3e3e3e"
-          onValueChange={toggleSwitch}
-          value={isEnabled}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Props
-
-### [View Props](view.md#props)
-
-Inherits [View Props](view.md#props).
-
----
-
-### `disabled`
-
-If true the user won't be able to toggle the switch.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `ios_backgroundColor` <div className="label ios">iOS</div>
-
-On iOS, custom color for the background. This background color can be seen either when the switch value is `false` or when the switch is disabled (and the switch is translucent).
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `onChange`
-
-Invoked when the user tries to change the value of the switch. Receives the change event as an argument. If you want to only receive the new value, use `onValueChange` instead.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onValueChange`
-
-Invoked when the user tries to change the value of the switch. Receives the new value as an argument. If you want to instead receive an event, use `onChange`.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `ref`
-
-A ref setter that will be assigned an [element node](element-nodes) when mounted.
-
----
-
-### `thumbColor`
-
-Color of the foreground switch grip. If this is set on iOS, the switch grip will lose its drop shadow.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `trackColor`
-
-Custom colors for the switch track.
-
-_iOS_: When the switch value is `false`, the track shrinks into the border. If you want to change the color of the background exposed by the shrunken track, use [`ios_backgroundColor`](switch.md#ios_backgroundColor).
-
-| Type                                                         |
-| ------------------------------------------------------------ |
-| `md object: {false: [color](colors), true: [color](colors)}` |
-
----
-
-### `value`
-
-The value of the switch. If true the switch will be turned on. Default value is false.
-
-| Type |
-| ---- |
-| bool |
+---
+id: switch
+title: Switch
+---
+
+Renders a boolean input.
+
+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=Switch&supportedPlatforms=android,ios
+import {useState} from 'react';
+import {Switch, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [isEnabled, setIsEnabled] = useState(false);
+  const toggleSwitch = () => setIsEnabled(previousState => !previousState);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Switch
+          trackColor={{false: '#767577', true: '#81b0ff'}}
+          thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
+          ios_backgroundColor="#3e3e3e"
+          onValueChange={toggleSwitch}
+          value={isEnabled}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Props
+
+### [View Props](view.md#props)
+
+Inherits [View Props](view.md#props).
+
+---
+
+### `disabled`
+
+If true the user won't be able to toggle the switch.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `ios_backgroundColor` <div className="label ios">iOS</div>
+
+On iOS, custom color for the background. This background color can be seen either when the switch value is `false` or when the switch is disabled (and the switch is translucent).
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `onChange`
+
+Invoked when the user tries to change the value of the switch. Receives the change event as an argument. If you want to only receive the new value, use `onValueChange` instead.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onValueChange`
+
+Invoked when the user tries to change the value of the switch. Receives the new value as an argument. If you want to instead receive an event, use `onChange`.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `ref`
+
+A ref setter that will be assigned an [element node](element-nodes) when mounted.
+
+---
+
+### `thumbColor`
+
+Color of the foreground switch grip. If this is set on iOS, the switch grip will lose its drop shadow.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `trackColor`
+
+Custom colors for the switch track.
+
+_iOS_: When the switch value is `false`, the track shrinks into the border. If you want to change the color of the background exposed by the shrunken track, use [`ios_backgroundColor`](switch.md#ios_backgroundColor).
+
+| Type                                                         |
+| ------------------------------------------------------------ |
+| `md object: {false: [color](colors), true: [color](colors)}` |
+
+---
+
+### `value`
+
+The value of the switch. If true the switch will be turned on. Default value is false.
+
+| Type |
+| ---- |
+| bool |
diff --git a/website/versioned_docs/version-0.83/systrace.md b/website/versioned_docs/version-0.83/systrace.md
index 53cfd62c7a9..9aa54fe8e18 100644
--- a/website/versioned_docs/version-0.83/systrace.md
+++ b/website/versioned_docs/version-0.83/systrace.md
@@ -10,7 +10,6 @@ title: Systrace
 `Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Capture the non-Timed JS events in EasyProfiler.
 
 ```SnackPlayer name=Systrace%20Example
-import React from 'react';
 import {Button, Text, View, StyleSheet, Systrace} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.83/text-nodes.md b/website/versioned_docs/version-0.83/text-nodes.md
index 63f195ea4b5..2818909abdc 100644
--- a/website/versioned_docs/version-0.83/text-nodes.md
+++ b/website/versioned_docs/version-0.83/text-nodes.md
@@ -1,86 +1,86 @@
----
-id: text-nodes
-title: Text nodes
----
-
-Text nodes represent raw text content on the tree (similar to [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text) nodes on Web). They are not directly accessible via `refs`, but can be accessed using methods like [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes) on element refs.
-
-```SnackPlayer ext=js&name=Text%20instances%20example
-import * as React from 'react';
-import { SafeAreaView, StyleSheet, Text } from 'react-native';
-
-const TextWithRefs = () => {
-  const ref = React.useRef(null);
-  const [viewInfo, setViewInfo] = React.useState('');
-
-  React.useEffect(() => {
-    // `textElement` is an object implementing the interface described here.
-    const textElement = ref.current;
-    const textNode = textElement.childNodes[0];
-    setViewInfo(
-      `Text content is: ${textNode.nodeValue}`,
-    );
-  }, []);
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <Text ref={ref}>
-        Hello world!
-      </Text>
-      <Text>{viewInfo}</Text>
-    </SafeAreaView>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  content: {
-    padding: 10,
-    backgroundColor: 'gray',
-  },
-});
-
-export default TextWithRefs;
-```
-
----
-
-## Reference
-
-### Web-compatible API
-
-From [`CharacterData`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData):
-
-- Properties
-  - [`data`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/data)
-  - [`length`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/length)
-  - [`nextElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/nextElementSibling)
-  - [`previousElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/previousElementSibling)
-- Methods
-  - [`substringData()`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/substringData)
-
-From [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/Node):
-
-- Properties
-  - [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)
-  - [`firstChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild)
-  - [`isConnected`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected)
-  - [`lastChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild)
-  - [`nextSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling)
-  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
-  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
-  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
-  - [`ownerDocument`](https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument)
-    - ℹ️ Will return the [document node](/docs/next/document-nodes) where this component was rendered.
-  - [`parentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)
-  - [`parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)
-  - [`previousSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling)
-  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
-- Methods
-  - [`compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
-  - [`contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains)
-  - [`getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)
-    - ℹ️ Will return a reference to itself if the component is not mounted.
-  - [`hasChildNodes()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes)
+---
+id: text-nodes
+title: Text nodes
+---
+
+Text nodes represent raw text content on the tree (similar to [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text) nodes on Web). They are not directly accessible via `refs`, but can be accessed using methods like [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes) on element refs.
+
+```SnackPlayer ext=js&name=Text%20instances%20example
+import {useEffect, useRef, useState} from 'react';
+import {SafeAreaView, StyleSheet, Text} from 'react-native';
+
+const TextWithRefs = () => {
+  const ref = useRef(null);
+  const [viewInfo, setViewInfo] = useState('');
+
+  useEffect(() => {
+    // `textElement` is an object implementing the interface described here.
+    const textElement = ref.current;
+    const textNode = textElement.childNodes[0];
+    setViewInfo(
+      `Text content is: ${textNode.nodeValue}`,
+    );
+  }, []);
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <Text ref={ref}>
+        Hello world!
+      </Text>
+      <Text>{viewInfo}</Text>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    padding: 10,
+    backgroundColor: 'gray',
+  },
+});
+
+export default TextWithRefs;
+```
+
+---
+
+## Reference
+
+### Web-compatible API
+
+From [`CharacterData`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData):
+
+- Properties
+  - [`data`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/data)
+  - [`length`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/length)
+  - [`nextElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/nextElementSibling)
+  - [`previousElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/previousElementSibling)
+- Methods
+  - [`substringData()`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/substringData)
+
+From [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/Node):
+
+- Properties
+  - [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)
+  - [`firstChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild)
+  - [`isConnected`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected)
+  - [`lastChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild)
+  - [`nextSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling)
+  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
+  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
+  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
+  - [`ownerDocument`](https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument)
+    - ℹ️ Will return the [document node](/docs/next/document-nodes) where this component was rendered.
+  - [`parentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)
+  - [`parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)
+  - [`previousSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling)
+  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
+- Methods
+  - [`compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
+  - [`contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains)
+  - [`getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)
+    - ℹ️ Will return a reference to itself if the component is not mounted.
+  - [`hasChildNodes()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes)
diff --git a/website/versioned_docs/version-0.83/text-style-props.md b/website/versioned_docs/version-0.83/text-style-props.md
index 64ffc4ef816..9605beca3dd 100644
--- a/website/versioned_docs/version-0.83/text-style-props.md
+++ b/website/versioned_docs/version-0.83/text-style-props.md
@@ -1,948 +1,948 @@
----
-id: text-style-props
-title: Text Style Props
----
-
-### Example
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=js&dependencies=@react-native-community/slider
-import React, {useState} from 'react';
-import {
-  FlatList,
-  Platform,
-  ScrollView,
-  StyleSheet,
-  Switch,
-  Text,
-  TouchableWithoutFeedback,
-  View,
-} from 'react-native';
-import Slider from '@react-native-community/slider';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const fontStyles = ['normal', 'italic'];
-const fontVariants = [
-  undefined,
-  'small-caps',
-  'oldstyle-nums',
-  'lining-nums',
-  'tabular-nums',
-  'proportional-nums',
-];
-const fontWeights = [
-  'normal',
-  'bold',
-  '100',
-  '200',
-  '300',
-  '400',
-  '500',
-  '600',
-  '700',
-  '800',
-  '900',
-];
-const textAlignments = ['auto', 'left', 'right', 'center', 'justify'];
-const textDecorationLines = [
-  'none',
-  'underline',
-  'line-through',
-  'underline line-through',
-];
-const textDecorationStyles = ['solid', 'double', 'dotted', 'dashed'];
-const textTransformations = ['none', 'uppercase', 'lowercase', 'capitalize'];
-const textAlignmentsVertical = ['auto', 'top', 'bottom', 'center'];
-const writingDirections = ['auto', 'ltr', 'rtl'];
-
-const App = () => {
-  const [fontSize, setFontSize] = useState(20);
-  const [fontStyleIdx, setFontStyleIdx] = useState(0);
-  const [fontWeightIdx, setFontWeightIdx] = useState(0);
-  const [lineHeight, setLineHeight] = useState(24);
-  const [textAlignIdx, setTextAlignIdx] = useState(0);
-  const [textDecorationLineIdx, setTextDecorationLineIdx] = useState(0);
-  const [includeFontPadding, setIncludeFontPadding] = useState(false);
-  const [textVerticalAlignIdx, setTextVerticalAlignIdx] = useState(0);
-  const [fontVariantIdx, setFontVariantIdx] = useState(0);
-  const [letterSpacing, setLetterSpacing] = useState(0);
-  const [textDecorationStyleIdx, setTextDecorationStyleIdx] = useState(0);
-  const [textTransformIdx, setTextTransformIdx] = useState(0);
-  const [writingDirectionIdx, setWritingDirectionIdx] = useState(0);
-  const [textShadowRadius, setTextShadowRadius] = useState(0);
-  const [textShadowOffset, setTextShadowOffset] = useState({
-    height: 0,
-    width: 0,
-  });
-
-  const [, ...validFontVariants] = fontVariants;
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.pargraphWrapper}>
-          <Text
-            style={[
-              styles.paragraph,
-              {
-                fontSize,
-                fontStyle: fontStyles[fontStyleIdx],
-                fontWeight: fontWeights[fontWeightIdx],
-                lineHeight,
-                textAlign: textAlignments[textAlignIdx],
-                textDecorationLine: textDecorationLines[textDecorationLineIdx],
-                textTransform: textTransformations[textTransformIdx],
-                textAlignVertical: textAlignmentsVertical[textVerticalAlignIdx],
-                fontVariant:
-                  fontVariantIdx === 0
-                    ? undefined
-                    : [validFontVariants[fontVariantIdx - 1]],
-                letterSpacing,
-                includeFontPadding,
-                textDecorationStyle:
-                  textDecorationStyles[textDecorationStyleIdx],
-                writingDirection: writingDirections[writingDirectionIdx],
-                textShadowOffset,
-                textShadowRadius,
-              },
-            ]}>
-            Lorem Ipsum is simply dummy text of the printing and typesetting
-            industry. 112 Likes
-          </Text>
-        </View>
-        <ScrollView style={{padding: 12}}>
-          <View>
-            <Text>Common platform properties</Text>
-            <CustomSlider
-              label="Text Shadow Offset - Height"
-              value={textShadowOffset.height}
-              minimumValue={-40}
-              maximumValue={40}
-              handleValueChange={val =>
-                setTextShadowOffset(prev => ({...prev, height: val}))
-              }
-            />
-            <CustomSlider
-              label="Text Shadow Offset - Width"
-              value={textShadowOffset.width}
-              minimumValue={-40}
-              maximumValue={40}
-              handleValueChange={val =>
-                setTextShadowOffset(prev => ({...prev, width: val}))
-              }
-            />
-            <CustomSlider
-              label="Font Size"
-              value={fontSize}
-              maximumValue={40}
-              handleValueChange={setFontSize}
-            />
-            <CustomPicker
-              label="Font Style"
-              data={fontStyles}
-              currentIndex={fontStyleIdx}
-              onSelected={setFontStyleIdx}
-            />
-            <CustomPicker
-              label="Font Weight"
-              data={fontWeights}
-              currentIndex={fontWeightIdx}
-              onSelected={setFontWeightIdx}
-            />
-            <CustomSlider
-              label="Line Height"
-              value={lineHeight}
-              minimumValue={10}
-              maximumValue={50}
-              handleValueChange={setLineHeight}
-            />
-            <CustomPicker
-              label="Text Align"
-              data={textAlignments}
-              currentIndex={textAlignIdx}
-              onSelected={setTextAlignIdx}
-            />
-            <CustomPicker
-              label="Text Decoration Line"
-              data={textDecorationLines}
-              currentIndex={textDecorationLineIdx}
-              onSelected={setTextDecorationLineIdx}
-            />
-            <CustomSlider
-              label="Text Shadow Radius"
-              value={textShadowRadius}
-              handleValueChange={setTextShadowRadius}
-            />
-            <CustomPicker
-              label="Font Variant"
-              data={fontVariants}
-              currentIndex={fontVariantIdx}
-              onSelected={setFontVariantIdx}
-            />
-            <CustomSlider
-              label="Letter Spacing"
-              step={0.1}
-              value={letterSpacing}
-              handleValueChange={setLetterSpacing}
-            />
-            <CustomPicker
-              label="Text Transform"
-              data={textTransformations}
-              currentIndex={textTransformIdx}
-              onSelected={setTextTransformIdx}
-            />
-          </View>
-          {Platform.OS === 'android' && (
-            <View style={styles.platformContainer}>
-              <Text style={styles.platformContainerTitle}>
-                Android only properties
-              </Text>
-              <CustomPicker
-                label="Text Vertical Align"
-                data={textAlignmentsVertical}
-                currentIndex={textVerticalAlignIdx}
-                onSelected={setTextVerticalAlignIdx}
-              />
-              <CustomSwitch
-                label="Include Font Padding"
-                handleValueChange={setIncludeFontPadding}
-                value={includeFontPadding}
-              />
-            </View>
-          )}
-          {Platform.OS === 'ios' && (
-            <View style={styles.platformContainer}>
-              <Text style={styles.platformContainerTitle}>
-                iOS only properties
-              </Text>
-              <CustomPicker
-                label="Text Decoration Style"
-                data={textDecorationStyles}
-                currentIndex={textDecorationStyleIdx}
-                onSelected={setTextDecorationStyleIdx}
-              />
-              <CustomPicker
-                label="Writing Direction"
-                data={writingDirections}
-                currentIndex={writingDirectionIdx}
-                onSelected={setWritingDirectionIdx}
-              />
-            </View>
-          )}
-        </ScrollView>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const CustomSwitch = ({label, handleValueChange, value}) => {
-  return (
-    <>
-      <Text style={styles.title}>{label}</Text>
-      <View style={{alignItems: 'flex-start'}}>
-        <Switch
-          trackColor={{false: '#767577', true: '#DAA520'}}
-          thumbColor={value ? '#DAA520' : '#f4f3f4'}
-          onValueChange={handleValueChange}
-          value={value}
-        />
-      </View>
-    </>
-  );
-};
-
-const CustomSlider = ({
-  label,
-  handleValueChange,
-  step = 1,
-  minimumValue = 0,
-  maximumValue = 10,
-  value,
-}) => {
-  return (
-    <>
-      {label && (
-        <Text style={styles.title}>{`${label} (${value.toFixed(2)})`}</Text>
-      )}
-      <View style={styles.wrapperHorizontal}>
-        <Slider
-          thumbTintColor="#06bcee"
-          minimumTrackTintColor="#64d7ffbb"
-          minimumValue={minimumValue}
-          maximumValue={maximumValue}
-          step={step}
-          onValueChange={handleValueChange}
-          value={value}
-        />
-      </View>
-    </>
-  );
-};
-
-const CustomPicker = ({label, data, currentIndex, onSelected}) => {
-  return (
-    <>
-      <Text style={styles.title}>{label}</Text>
-      <View style={styles.wrapperHorizontal}>
-        <FlatList
-          bounces
-          horizontal
-          data={data}
-          keyExtractor={item => String(item)}
-          renderItem={({item, index}) => {
-            const selected = index === currentIndex;
-            return (
-              <TouchableWithoutFeedback onPress={() => onSelected(index)}>
-                <View
-                  style={[
-                    styles.itemStyleHorizontal,
-                    selected && styles.itemSelectedStyleHorizontal,
-                  ]}>
-                  <Text
-                    style={{
-                      textAlign: 'center',
-                      color: selected ? 'black' : 'grey',
-                      fontWeight: selected ? 'bold' : 'normal',
-                    }}>
-                    {item + ''}
-                  </Text>
-                </View>
-              </TouchableWithoutFeedback>
-            );
-          }}
-        />
-      </View>
-    </>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  pargraphWrapper: {
-    backgroundColor: 'black',
-  },
-  paragraph: {
-    color: '#fff',
-    textDecorationColor: 'yellow',
-    textShadowColor: 'red',
-    textShadowRadius: 1,
-    padding: 24,
-  },
-  wrapperHorizontal: {
-    justifyContent: 'center',
-    color: 'black',
-  },
-  itemStyleHorizontal: {
-    marginRight: 10,
-    height: 50,
-    padding: 8,
-    borderWidth: 1,
-    borderColor: 'grey',
-    borderRadius: 8,
-    textAlign: 'center',
-    justifyContent: 'center',
-  },
-  itemSelectedStyleHorizontal: {
-    borderWidth: 2,
-    borderColor: '#06bcee',
-  },
-  platformContainer: {
-    marginTop: 8,
-    borderTopWidth: 1,
-  },
-  platformContainerTitle: {
-    marginTop: 8,
-  },
-  title: {
-    fontWeight: 'bold',
-    marginVertical: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=tsx&dependencies=@react-native-community/slider
-import React, {useState} from 'react';
-import {
-  FlatList,
-  Platform,
-  ScrollView,
-  StyleSheet,
-  Switch,
-  Text,
-  TouchableWithoutFeedback,
-  View,
-  TextStyle,
-} from 'react-native';
-import Slider from '@react-native-community/slider';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [fontSize, setFontSize] = useState(20);
-  const [fontStyleIdx, setFontStyleIdx] = useState(0);
-  const [fontWeightIdx, setFontWeightIdx] = useState(0);
-  const [lineHeight, setLineHeight] = useState(24);
-  const [textAlignIdx, setTextAlignIdx] = useState(0);
-  const [textDecorationLineIdx, setTextDecorationLineIdx] = useState(0);
-  const [includeFontPadding, setIncludeFontPadding] = useState(false);
-  const [textVerticalAlignIdx, setTextVerticalAlignIdx] = useState(0);
-  const [fontVariantIdx, setFontVariantIdx] = useState(0);
-  const [letterSpacing, setLetterSpacing] = useState(0);
-  const [textDecorationStyleIdx, setTextDecorationStyleIdx] = useState(0);
-  const [textTransformIdx, setTextTransformIdx] = useState(0);
-  const [writingDirectionIdx, setWritingDirectionIdx] = useState(0);
-  const [textShadowRadius, setTextShadowRadius] = useState(0);
-  const [textShadowOffset, setTextShadowOffset] = useState({
-    height: 0,
-    width: 0,
-  });
-
-  const [, ...validFontVariants] = fontVariants;
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.pargraphWrapper}>
-          <Text
-            style={[
-              styles.paragraph,
-              {
-                fontSize,
-                fontStyle: fontStyles[fontStyleIdx],
-                fontWeight: fontWeights[fontWeightIdx],
-                lineHeight,
-                textAlign: textAlignments[textAlignIdx],
-                textDecorationLine: textDecorationLines[textDecorationLineIdx],
-                textTransform: textTransformations[textTransformIdx],
-                textAlignVertical: textAlignmentsVertical[textVerticalAlignIdx],
-                fontVariant:
-                  fontVariantIdx === 0
-                    ? undefined
-                    : [validFontVariants[fontVariantIdx - 1]],
-                letterSpacing,
-                includeFontPadding,
-                textDecorationStyle:
-                  textDecorationStyles[textDecorationStyleIdx],
-                writingDirection: writingDirections[writingDirectionIdx],
-                textShadowOffset,
-                textShadowRadius,
-              } as TextStyle,
-            ]}>
-            Lorem Ipsum is simply dummy text of the printing and typesetting
-            industry. 112 Likes
-          </Text>
-        </View>
-        <ScrollView style={{padding: 12}}>
-          <View>
-            <Text>Common platform properties</Text>
-            <CustomSlider
-              label="Text Shadow Offset - Height"
-              value={textShadowOffset.height}
-              minimumValue={-40}
-              maximumValue={40}
-              handleValueChange={(val: number) =>
-                setTextShadowOffset(prev => ({...prev, height: val}))
-              }
-            />
-            <CustomSlider
-              label="Text Shadow Offset - Width"
-              value={textShadowOffset.width}
-              minimumValue={-40}
-              maximumValue={40}
-              handleValueChange={(val: number) =>
-                setTextShadowOffset(prev => ({...prev, width: val}))
-              }
-            />
-            <CustomSlider
-              label="Font Size"
-              value={fontSize}
-              maximumValue={40}
-              handleValueChange={setFontSize}
-            />
-            <CustomPicker
-              label="Font Style"
-              data={fontStyles}
-              currentIndex={fontStyleIdx}
-              onSelected={setFontStyleIdx}
-            />
-            <CustomPicker
-              label="Font Weight"
-              data={fontWeights}
-              currentIndex={fontWeightIdx}
-              onSelected={setFontWeightIdx}
-            />
-            <CustomSlider
-              label="Line Height"
-              value={lineHeight}
-              minimumValue={10}
-              maximumValue={50}
-              handleValueChange={setLineHeight}
-            />
-            <CustomPicker
-              label="Text Align"
-              data={textAlignments}
-              currentIndex={textAlignIdx}
-              onSelected={setTextAlignIdx}
-            />
-            <CustomPicker
-              label="Text Decoration Line"
-              data={textDecorationLines}
-              currentIndex={textDecorationLineIdx}
-              onSelected={setTextDecorationLineIdx}
-            />
-            <CustomSlider
-              label="Text Shadow Radius"
-              value={textShadowRadius}
-              handleValueChange={setTextShadowRadius}
-            />
-            <CustomPicker
-              label="Font Variant"
-              data={fontVariants}
-              currentIndex={fontVariantIdx}
-              onSelected={setFontVariantIdx}
-            />
-            <CustomSlider
-              label="Letter Spacing"
-              step={0.1}
-              value={letterSpacing}
-              handleValueChange={setLetterSpacing}
-            />
-            <CustomPicker
-              label="Text Transform"
-              data={textTransformations}
-              currentIndex={textTransformIdx}
-              onSelected={setTextTransformIdx}
-            />
-          </View>
-          {Platform.OS === 'android' && (
-            <View style={styles.platformContainer}>
-              <Text style={styles.platformContainerTitle}>
-                Android only properties
-              </Text>
-              <CustomPicker
-                label="Text Vertical Align"
-                data={textAlignmentsVertical}
-                currentIndex={textVerticalAlignIdx}
-                onSelected={setTextVerticalAlignIdx}
-              />
-              <CustomSwitch
-                label="Include Font Padding"
-                handleValueChange={setIncludeFontPadding}
-                value={includeFontPadding}
-              />
-            </View>
-          )}
-          {Platform.OS === 'ios' && (
-            <View style={styles.platformContainer}>
-              <Text style={styles.platformContainerTitle}>
-                iOS only properties
-              </Text>
-              <CustomPicker
-                label="Text Decoration Style"
-                data={textDecorationStyles}
-                currentIndex={textDecorationStyleIdx}
-                onSelected={setTextDecorationStyleIdx}
-              />
-              <CustomPicker
-                label="Writing Direction"
-                data={writingDirections}
-                currentIndex={writingDirectionIdx}
-                onSelected={setWritingDirectionIdx}
-              />
-            </View>
-          )}
-        </ScrollView>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-type CustomSwitchProps = {
-  label: string;
-  value: boolean;
-  handleValueChange: (value: boolean) => void;
-};
-
-const CustomSwitch = ({label, handleValueChange, value}: CustomSwitchProps) => {
-  return (
-    <>
-      <Text style={styles.title}>{label}</Text>
-      <View style={{alignItems: 'flex-start'}}>
-        <Switch
-          trackColor={{false: '#767577', true: '#DAA520'}}
-          thumbColor={value ? '#DAA520' : '#f4f3f4'}
-          onValueChange={handleValueChange}
-          value={value}
-        />
-      </View>
-    </>
-  );
-};
-
-type CustomSliderProps = {
-  label: string;
-  value: number;
-  handleValueChange: (value: number) => void;
-  step?: number;
-  minimumValue?: number;
-  maximumValue?: number;
-};
-
-const CustomSlider = ({
-  label,
-  handleValueChange,
-  step = 1,
-  minimumValue = 0,
-  maximumValue = 10,
-  value,
-}: CustomSliderProps) => {
-  return (
-    <>
-      {label && (
-        <Text style={styles.title}>{`${label} (${value.toFixed(2)})`}</Text>
-      )}
-      <View style={styles.wrapperHorizontal}>
-        <Slider
-          thumbTintColor="#06bcee"
-          minimumTrackTintColor="#64d7ffbb"
-          minimumValue={minimumValue}
-          maximumValue={maximumValue}
-          step={step}
-          onValueChange={handleValueChange}
-          value={value}
-        />
-      </View>
-    </>
-  );
-};
-
-type CustomPickerProps = {
-  label: string;
-  data?: ArrayLike<any> | null;
-  currentIndex: number;
-  onSelected: (index: number) => void;
-};
-
-const CustomPicker = ({
-  label,
-  data,
-  currentIndex,
-  onSelected,
-}: CustomPickerProps) => {
-  return (
-    <>
-      <Text style={styles.title}>{label}</Text>
-      <View style={styles.wrapperHorizontal}>
-        <FlatList
-          horizontal
-          data={data}
-          keyExtractor={item => String(item)}
-          renderItem={({item, index}: {item: string; index: number}) => {
-            const selected = index === currentIndex;
-            return (
-              <TouchableWithoutFeedback onPress={() => onSelected(index)}>
-                <View
-                  style={[
-                    styles.itemStyleHorizontal,
-                    selected && styles.itemSelectedStyleHorizontal,
-                  ]}>
-                  <Text
-                    style={{
-                      textAlign: 'center',
-                      color: selected ? 'black' : 'grey',
-                      fontWeight: selected ? 'bold' : 'normal',
-                    }}>
-                    {item + ''}
-                  </Text>
-                </View>
-              </TouchableWithoutFeedback>
-            );
-          }}
-        />
-      </View>
-    </>
-  );
-};
-
-const fontStyles = ['normal', 'italic'];
-const fontVariants = [
-  undefined,
-  'small-caps',
-  'oldstyle-nums',
-  'lining-nums',
-  'tabular-nums',
-  'proportional-nums',
-];
-const fontWeights = [
-  'normal',
-  'bold',
-  '100',
-  '200',
-  '300',
-  '400',
-  '500',
-  '600',
-  '700',
-  '800',
-  '900',
-];
-const textAlignments = ['auto', 'left', 'right', 'center', 'justify'];
-const textDecorationLines = [
-  'none',
-  'underline',
-  'line-through',
-  'underline line-through',
-];
-const textDecorationStyles = ['solid', 'double', 'dotted', 'dashed'];
-const textTransformations = ['none', 'uppercase', 'lowercase', 'capitalize'];
-const textAlignmentsVertical = ['auto', 'top', 'bottom', 'center'];
-const writingDirections = ['auto', 'ltr', 'rtl'];
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  pargraphWrapper: {
-    backgroundColor: 'black',
-  },
-  paragraph: {
-    color: '#fff',
-    textDecorationColor: 'yellow',
-    textShadowColor: 'red',
-    textShadowRadius: 1,
-    padding: 24,
-  },
-  wrapperHorizontal: {
-    justifyContent: 'center',
-    color: 'black',
-  },
-  itemStyleHorizontal: {
-    marginRight: 10,
-    height: 50,
-    padding: 8,
-    borderWidth: 1,
-    borderColor: 'grey',
-    borderRadius: 8,
-    textAlign: 'center',
-    justifyContent: 'center',
-  },
-  itemSelectedStyleHorizontal: {
-    borderWidth: 2,
-    borderColor: '#06bcee',
-  },
-  platformContainer: {
-    marginTop: 8,
-    borderTopWidth: 1,
-  },
-  platformContainerTitle: {
-    marginTop: 8,
-  },
-  title: {
-    fontWeight: 'bold',
-    marginVertical: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-# Reference
-
-## Props
-
-### `color`
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `fontFamily`
-
-| Type   |
-| ------ |
-| string |
-
-The generic font families `system-ui`, `ui-sans-serif`, `ui-serif`, `ui-monospace`, and `ui-rounded` are supported on iOS.
-
----
-
-### `fontSize`
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `fontStyle`
-
-| Type                         |
-| ---------------------------- |
-| enum(`'normal'`, `'italic'`) |
-
----
-
-### `fontWeight`
-
-Specifies font weight. The values `'normal'` and `'bold'` are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen.
-
-| Type                                                                                                                  | Default    |
-| --------------------------------------------------------------------------------------------------------------------- | ---------- |
-| enum(`'normal'`, `'bold'`, `'100'`, `'200'`, `'300'`, `'400'`, `'500'`, `'600'`, `'700'`, `'800'`, `'900'`) or number | `'normal'` |
-
----
-
-### `includeFontPadding` <div className="label android">Android</div>
-
-Set to `false` to remove extra font padding intended to make space for certain ascenders / descenders. With some fonts, this padding can make text look slightly misaligned when centered vertically. For best results also set `textAlignVertical` to `center`.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `true`  |
-
----
-
-### `fontVariant`
-
-Allows you to set all the font variants for a font. Can be set by using an array of enums or a space-separated string e.g. `'small-caps common-ligatures'`.
-
-| Type                                                                                                                 | Default |
-| -------------------------------------------------------------------------------------------------------------------- | ------- |
-| array of enum(`'small-caps'`, `'oldstyle-nums'`, `'lining-nums'`, `'tabular-nums'`, `'proportional-nums'`) or string | `[]`    |
-
----
-
-### `letterSpacing`
-
-Increase or decrease the spacing between characters. By default there is no extra letter spacing.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `lineHeight`
-
-Numeric value that controls the vertical spacing between lines of text within a text element. It specifies the distance between the baselines of consecutive lines of text.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `textAlign`
-
-Specifies text alignment. On Android, the value 'justify' is only supported on Oreo (8.0) or above (API level >= 26). The value will fallback to `left` on lower Android versions.
-
-| Type                                                         | Default  |
-| ------------------------------------------------------------ | -------- |
-| enum(`'auto'`, `'left'`, `'right'`, `'center'`, `'justify'`) | `'auto'` |
-
----
-
-### `textAlignVertical` <div className="label android">Android</div>
-
-An alias for `verticalAlign` style prop, if you use both properties, `verticalAlign` will take precedence over `textAlignVertical`
-
-| Type                                            | Default  |
-| ----------------------------------------------- | -------- |
-| enum(`'auto'`, `'top'`, `'bottom'`, `'center'`) | `'auto'` |
-
----
-
-### `textDecorationColor` <div className="label ios">iOS</div>
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `textDecorationLine`
-
-| Type                                                                        | Default  |
-| --------------------------------------------------------------------------- | -------- |
-| enum(`'none'`, `'underline'`, `'line-through'`, `'underline line-through'`) | `'none'` |
-
----
-
-### `textDecorationStyle` <div className="label ios">iOS</div>
-
-| Type                                                | Default   |
-| --------------------------------------------------- | --------- |
-| enum(`'solid'`, `'double'`, `'dotted'`, `'dashed'`) | `'solid'` |
-
----
-
-### `textShadowColor`
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `textShadowOffset`
-
-| Type                                        |
-| ------------------------------------------- |
-| object: `{width?: number, height?: number}` |
-
----
-
-### `textShadowRadius`
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `textTransform`
-
-| Type                                                         | Default  |
-| ------------------------------------------------------------ | -------- |
-| enum(`'none'`, `'uppercase'`, `'lowercase'`, `'capitalize'`) | `'none'` |
-
----
-
-### `verticalAlign` <div className="label android">Android</div>
-
-| Type                                            | Default  |
-| ----------------------------------------------- | -------- |
-| enum(`'auto'`, `'top'`, `'bottom'`, `'middle'`) | `'auto'` |
-
----
-
-### `writingDirection` <div className="label ios">iOS</div>
-
-| Type                             | Default  |
-| -------------------------------- | -------- |
-| enum(`'auto'`, `'ltr'`, `'rtl'`) | `'auto'` |
-
----
-
-### `userSelect`
-
-It allows the user to select text and to use the native copy and paste functionality. Has precedence over the `selectable` prop.
-
-| Type                                                     | Default |
-| -------------------------------------------------------- | ------- |
-| enum(`'auto'`, `'text'`, `'none'`, `'contain'`, `'all'`) | `none`  |
+---
+id: text-style-props
+title: Text Style Props
+---
+
+### Example
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=js&dependencies=@react-native-community/slider
+import {useState} from 'react';
+import {
+  FlatList,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Switch,
+  Text,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+import Slider from '@react-native-community/slider';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const fontStyles = ['normal', 'italic'];
+const fontVariants = [
+  undefined,
+  'small-caps',
+  'oldstyle-nums',
+  'lining-nums',
+  'tabular-nums',
+  'proportional-nums',
+];
+const fontWeights = [
+  'normal',
+  'bold',
+  '100',
+  '200',
+  '300',
+  '400',
+  '500',
+  '600',
+  '700',
+  '800',
+  '900',
+];
+const textAlignments = ['auto', 'left', 'right', 'center', 'justify'];
+const textDecorationLines = [
+  'none',
+  'underline',
+  'line-through',
+  'underline line-through',
+];
+const textDecorationStyles = ['solid', 'double', 'dotted', 'dashed'];
+const textTransformations = ['none', 'uppercase', 'lowercase', 'capitalize'];
+const textAlignmentsVertical = ['auto', 'top', 'bottom', 'center'];
+const writingDirections = ['auto', 'ltr', 'rtl'];
+
+const App = () => {
+  const [fontSize, setFontSize] = useState(20);
+  const [fontStyleIdx, setFontStyleIdx] = useState(0);
+  const [fontWeightIdx, setFontWeightIdx] = useState(0);
+  const [lineHeight, setLineHeight] = useState(24);
+  const [textAlignIdx, setTextAlignIdx] = useState(0);
+  const [textDecorationLineIdx, setTextDecorationLineIdx] = useState(0);
+  const [includeFontPadding, setIncludeFontPadding] = useState(false);
+  const [textVerticalAlignIdx, setTextVerticalAlignIdx] = useState(0);
+  const [fontVariantIdx, setFontVariantIdx] = useState(0);
+  const [letterSpacing, setLetterSpacing] = useState(0);
+  const [textDecorationStyleIdx, setTextDecorationStyleIdx] = useState(0);
+  const [textTransformIdx, setTextTransformIdx] = useState(0);
+  const [writingDirectionIdx, setWritingDirectionIdx] = useState(0);
+  const [textShadowRadius, setTextShadowRadius] = useState(0);
+  const [textShadowOffset, setTextShadowOffset] = useState({
+    height: 0,
+    width: 0,
+  });
+
+  const [, ...validFontVariants] = fontVariants;
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.pargraphWrapper}>
+          <Text
+            style={[
+              styles.paragraph,
+              {
+                fontSize,
+                fontStyle: fontStyles[fontStyleIdx],
+                fontWeight: fontWeights[fontWeightIdx],
+                lineHeight,
+                textAlign: textAlignments[textAlignIdx],
+                textDecorationLine: textDecorationLines[textDecorationLineIdx],
+                textTransform: textTransformations[textTransformIdx],
+                textAlignVertical: textAlignmentsVertical[textVerticalAlignIdx],
+                fontVariant:
+                  fontVariantIdx === 0
+                    ? undefined
+                    : [validFontVariants[fontVariantIdx - 1]],
+                letterSpacing,
+                includeFontPadding,
+                textDecorationStyle:
+                  textDecorationStyles[textDecorationStyleIdx],
+                writingDirection: writingDirections[writingDirectionIdx],
+                textShadowOffset,
+                textShadowRadius,
+              },
+            ]}>
+            Lorem Ipsum is simply dummy text of the printing and typesetting
+            industry. 112 Likes
+          </Text>
+        </View>
+        <ScrollView style={{padding: 12}}>
+          <View>
+            <Text>Common platform properties</Text>
+            <CustomSlider
+              label="Text Shadow Offset - Height"
+              value={textShadowOffset.height}
+              minimumValue={-40}
+              maximumValue={40}
+              handleValueChange={val =>
+                setTextShadowOffset(prev => ({...prev, height: val}))
+              }
+            />
+            <CustomSlider
+              label="Text Shadow Offset - Width"
+              value={textShadowOffset.width}
+              minimumValue={-40}
+              maximumValue={40}
+              handleValueChange={val =>
+                setTextShadowOffset(prev => ({...prev, width: val}))
+              }
+            />
+            <CustomSlider
+              label="Font Size"
+              value={fontSize}
+              maximumValue={40}
+              handleValueChange={setFontSize}
+            />
+            <CustomPicker
+              label="Font Style"
+              data={fontStyles}
+              currentIndex={fontStyleIdx}
+              onSelected={setFontStyleIdx}
+            />
+            <CustomPicker
+              label="Font Weight"
+              data={fontWeights}
+              currentIndex={fontWeightIdx}
+              onSelected={setFontWeightIdx}
+            />
+            <CustomSlider
+              label="Line Height"
+              value={lineHeight}
+              minimumValue={10}
+              maximumValue={50}
+              handleValueChange={setLineHeight}
+            />
+            <CustomPicker
+              label="Text Align"
+              data={textAlignments}
+              currentIndex={textAlignIdx}
+              onSelected={setTextAlignIdx}
+            />
+            <CustomPicker
+              label="Text Decoration Line"
+              data={textDecorationLines}
+              currentIndex={textDecorationLineIdx}
+              onSelected={setTextDecorationLineIdx}
+            />
+            <CustomSlider
+              label="Text Shadow Radius"
+              value={textShadowRadius}
+              handleValueChange={setTextShadowRadius}
+            />
+            <CustomPicker
+              label="Font Variant"
+              data={fontVariants}
+              currentIndex={fontVariantIdx}
+              onSelected={setFontVariantIdx}
+            />
+            <CustomSlider
+              label="Letter Spacing"
+              step={0.1}
+              value={letterSpacing}
+              handleValueChange={setLetterSpacing}
+            />
+            <CustomPicker
+              label="Text Transform"
+              data={textTransformations}
+              currentIndex={textTransformIdx}
+              onSelected={setTextTransformIdx}
+            />
+          </View>
+          {Platform.OS === 'android' && (
+            <View style={styles.platformContainer}>
+              <Text style={styles.platformContainerTitle}>
+                Android only properties
+              </Text>
+              <CustomPicker
+                label="Text Vertical Align"
+                data={textAlignmentsVertical}
+                currentIndex={textVerticalAlignIdx}
+                onSelected={setTextVerticalAlignIdx}
+              />
+              <CustomSwitch
+                label="Include Font Padding"
+                handleValueChange={setIncludeFontPadding}
+                value={includeFontPadding}
+              />
+            </View>
+          )}
+          {Platform.OS === 'ios' && (
+            <View style={styles.platformContainer}>
+              <Text style={styles.platformContainerTitle}>
+                iOS only properties
+              </Text>
+              <CustomPicker
+                label="Text Decoration Style"
+                data={textDecorationStyles}
+                currentIndex={textDecorationStyleIdx}
+                onSelected={setTextDecorationStyleIdx}
+              />
+              <CustomPicker
+                label="Writing Direction"
+                data={writingDirections}
+                currentIndex={writingDirectionIdx}
+                onSelected={setWritingDirectionIdx}
+              />
+            </View>
+          )}
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const CustomSwitch = ({label, handleValueChange, value}) => {
+  return (
+    <>
+      <Text style={styles.title}>{label}</Text>
+      <View style={{alignItems: 'flex-start'}}>
+        <Switch
+          trackColor={{false: '#767577', true: '#DAA520'}}
+          thumbColor={value ? '#DAA520' : '#f4f3f4'}
+          onValueChange={handleValueChange}
+          value={value}
+        />
+      </View>
+    </>
+  );
+};
+
+const CustomSlider = ({
+  label,
+  handleValueChange,
+  step = 1,
+  minimumValue = 0,
+  maximumValue = 10,
+  value,
+}) => {
+  return (
+    <>
+      {label && (
+        <Text style={styles.title}>{`${label} (${value.toFixed(2)})`}</Text>
+      )}
+      <View style={styles.wrapperHorizontal}>
+        <Slider
+          thumbTintColor="#06bcee"
+          minimumTrackTintColor="#64d7ffbb"
+          minimumValue={minimumValue}
+          maximumValue={maximumValue}
+          step={step}
+          onValueChange={handleValueChange}
+          value={value}
+        />
+      </View>
+    </>
+  );
+};
+
+const CustomPicker = ({label, data, currentIndex, onSelected}) => {
+  return (
+    <>
+      <Text style={styles.title}>{label}</Text>
+      <View style={styles.wrapperHorizontal}>
+        <FlatList
+          bounces
+          horizontal
+          data={data}
+          keyExtractor={item => String(item)}
+          renderItem={({item, index}) => {
+            const selected = index === currentIndex;
+            return (
+              <TouchableWithoutFeedback onPress={() => onSelected(index)}>
+                <View
+                  style={[
+                    styles.itemStyleHorizontal,
+                    selected && styles.itemSelectedStyleHorizontal,
+                  ]}>
+                  <Text
+                    style={{
+                      textAlign: 'center',
+                      color: selected ? 'black' : 'grey',
+                      fontWeight: selected ? 'bold' : 'normal',
+                    }}>
+                    {item + ''}
+                  </Text>
+                </View>
+              </TouchableWithoutFeedback>
+            );
+          }}
+        />
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  pargraphWrapper: {
+    backgroundColor: 'black',
+  },
+  paragraph: {
+    color: '#fff',
+    textDecorationColor: 'yellow',
+    textShadowColor: 'red',
+    textShadowRadius: 1,
+    padding: 24,
+  },
+  wrapperHorizontal: {
+    justifyContent: 'center',
+    color: 'black',
+  },
+  itemStyleHorizontal: {
+    marginRight: 10,
+    height: 50,
+    padding: 8,
+    borderWidth: 1,
+    borderColor: 'grey',
+    borderRadius: 8,
+    textAlign: 'center',
+    justifyContent: 'center',
+  },
+  itemSelectedStyleHorizontal: {
+    borderWidth: 2,
+    borderColor: '#06bcee',
+  },
+  platformContainer: {
+    marginTop: 8,
+    borderTopWidth: 1,
+  },
+  platformContainerTitle: {
+    marginTop: 8,
+  },
+  title: {
+    fontWeight: 'bold',
+    marginVertical: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=tsx&dependencies=@react-native-community/slider
+import {useState} from 'react';
+import {
+  FlatList,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Switch,
+  Text,
+  TouchableWithoutFeedback,
+  View,
+  TextStyle,
+} from 'react-native';
+import Slider from '@react-native-community/slider';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [fontSize, setFontSize] = useState(20);
+  const [fontStyleIdx, setFontStyleIdx] = useState(0);
+  const [fontWeightIdx, setFontWeightIdx] = useState(0);
+  const [lineHeight, setLineHeight] = useState(24);
+  const [textAlignIdx, setTextAlignIdx] = useState(0);
+  const [textDecorationLineIdx, setTextDecorationLineIdx] = useState(0);
+  const [includeFontPadding, setIncludeFontPadding] = useState(false);
+  const [textVerticalAlignIdx, setTextVerticalAlignIdx] = useState(0);
+  const [fontVariantIdx, setFontVariantIdx] = useState(0);
+  const [letterSpacing, setLetterSpacing] = useState(0);
+  const [textDecorationStyleIdx, setTextDecorationStyleIdx] = useState(0);
+  const [textTransformIdx, setTextTransformIdx] = useState(0);
+  const [writingDirectionIdx, setWritingDirectionIdx] = useState(0);
+  const [textShadowRadius, setTextShadowRadius] = useState(0);
+  const [textShadowOffset, setTextShadowOffset] = useState({
+    height: 0,
+    width: 0,
+  });
+
+  const [, ...validFontVariants] = fontVariants;
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.pargraphWrapper}>
+          <Text
+            style={[
+              styles.paragraph,
+              {
+                fontSize,
+                fontStyle: fontStyles[fontStyleIdx],
+                fontWeight: fontWeights[fontWeightIdx],
+                lineHeight,
+                textAlign: textAlignments[textAlignIdx],
+                textDecorationLine: textDecorationLines[textDecorationLineIdx],
+                textTransform: textTransformations[textTransformIdx],
+                textAlignVertical: textAlignmentsVertical[textVerticalAlignIdx],
+                fontVariant:
+                  fontVariantIdx === 0
+                    ? undefined
+                    : [validFontVariants[fontVariantIdx - 1]],
+                letterSpacing,
+                includeFontPadding,
+                textDecorationStyle:
+                  textDecorationStyles[textDecorationStyleIdx],
+                writingDirection: writingDirections[writingDirectionIdx],
+                textShadowOffset,
+                textShadowRadius,
+              } as TextStyle,
+            ]}>
+            Lorem Ipsum is simply dummy text of the printing and typesetting
+            industry. 112 Likes
+          </Text>
+        </View>
+        <ScrollView style={{padding: 12}}>
+          <View>
+            <Text>Common platform properties</Text>
+            <CustomSlider
+              label="Text Shadow Offset - Height"
+              value={textShadowOffset.height}
+              minimumValue={-40}
+              maximumValue={40}
+              handleValueChange={(val: number) =>
+                setTextShadowOffset(prev => ({...prev, height: val}))
+              }
+            />
+            <CustomSlider
+              label="Text Shadow Offset - Width"
+              value={textShadowOffset.width}
+              minimumValue={-40}
+              maximumValue={40}
+              handleValueChange={(val: number) =>
+                setTextShadowOffset(prev => ({...prev, width: val}))
+              }
+            />
+            <CustomSlider
+              label="Font Size"
+              value={fontSize}
+              maximumValue={40}
+              handleValueChange={setFontSize}
+            />
+            <CustomPicker
+              label="Font Style"
+              data={fontStyles}
+              currentIndex={fontStyleIdx}
+              onSelected={setFontStyleIdx}
+            />
+            <CustomPicker
+              label="Font Weight"
+              data={fontWeights}
+              currentIndex={fontWeightIdx}
+              onSelected={setFontWeightIdx}
+            />
+            <CustomSlider
+              label="Line Height"
+              value={lineHeight}
+              minimumValue={10}
+              maximumValue={50}
+              handleValueChange={setLineHeight}
+            />
+            <CustomPicker
+              label="Text Align"
+              data={textAlignments}
+              currentIndex={textAlignIdx}
+              onSelected={setTextAlignIdx}
+            />
+            <CustomPicker
+              label="Text Decoration Line"
+              data={textDecorationLines}
+              currentIndex={textDecorationLineIdx}
+              onSelected={setTextDecorationLineIdx}
+            />
+            <CustomSlider
+              label="Text Shadow Radius"
+              value={textShadowRadius}
+              handleValueChange={setTextShadowRadius}
+            />
+            <CustomPicker
+              label="Font Variant"
+              data={fontVariants}
+              currentIndex={fontVariantIdx}
+              onSelected={setFontVariantIdx}
+            />
+            <CustomSlider
+              label="Letter Spacing"
+              step={0.1}
+              value={letterSpacing}
+              handleValueChange={setLetterSpacing}
+            />
+            <CustomPicker
+              label="Text Transform"
+              data={textTransformations}
+              currentIndex={textTransformIdx}
+              onSelected={setTextTransformIdx}
+            />
+          </View>
+          {Platform.OS === 'android' && (
+            <View style={styles.platformContainer}>
+              <Text style={styles.platformContainerTitle}>
+                Android only properties
+              </Text>
+              <CustomPicker
+                label="Text Vertical Align"
+                data={textAlignmentsVertical}
+                currentIndex={textVerticalAlignIdx}
+                onSelected={setTextVerticalAlignIdx}
+              />
+              <CustomSwitch
+                label="Include Font Padding"
+                handleValueChange={setIncludeFontPadding}
+                value={includeFontPadding}
+              />
+            </View>
+          )}
+          {Platform.OS === 'ios' && (
+            <View style={styles.platformContainer}>
+              <Text style={styles.platformContainerTitle}>
+                iOS only properties
+              </Text>
+              <CustomPicker
+                label="Text Decoration Style"
+                data={textDecorationStyles}
+                currentIndex={textDecorationStyleIdx}
+                onSelected={setTextDecorationStyleIdx}
+              />
+              <CustomPicker
+                label="Writing Direction"
+                data={writingDirections}
+                currentIndex={writingDirectionIdx}
+                onSelected={setWritingDirectionIdx}
+              />
+            </View>
+          )}
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+type CustomSwitchProps = {
+  label: string;
+  value: boolean;
+  handleValueChange: (value: boolean) => void;
+};
+
+const CustomSwitch = ({label, handleValueChange, value}: CustomSwitchProps) => {
+  return (
+    <>
+      <Text style={styles.title}>{label}</Text>
+      <View style={{alignItems: 'flex-start'}}>
+        <Switch
+          trackColor={{false: '#767577', true: '#DAA520'}}
+          thumbColor={value ? '#DAA520' : '#f4f3f4'}
+          onValueChange={handleValueChange}
+          value={value}
+        />
+      </View>
+    </>
+  );
+};
+
+type CustomSliderProps = {
+  label: string;
+  value: number;
+  handleValueChange: (value: number) => void;
+  step?: number;
+  minimumValue?: number;
+  maximumValue?: number;
+};
+
+const CustomSlider = ({
+  label,
+  handleValueChange,
+  step = 1,
+  minimumValue = 0,
+  maximumValue = 10,
+  value,
+}: CustomSliderProps) => {
+  return (
+    <>
+      {label && (
+        <Text style={styles.title}>{`${label} (${value.toFixed(2)})`}</Text>
+      )}
+      <View style={styles.wrapperHorizontal}>
+        <Slider
+          thumbTintColor="#06bcee"
+          minimumTrackTintColor="#64d7ffbb"
+          minimumValue={minimumValue}
+          maximumValue={maximumValue}
+          step={step}
+          onValueChange={handleValueChange}
+          value={value}
+        />
+      </View>
+    </>
+  );
+};
+
+type CustomPickerProps = {
+  label: string;
+  data?: ArrayLike<any> | null;
+  currentIndex: number;
+  onSelected: (index: number) => void;
+};
+
+const CustomPicker = ({
+  label,
+  data,
+  currentIndex,
+  onSelected,
+}: CustomPickerProps) => {
+  return (
+    <>
+      <Text style={styles.title}>{label}</Text>
+      <View style={styles.wrapperHorizontal}>
+        <FlatList
+          horizontal
+          data={data}
+          keyExtractor={item => String(item)}
+          renderItem={({item, index}: {item: string; index: number}) => {
+            const selected = index === currentIndex;
+            return (
+              <TouchableWithoutFeedback onPress={() => onSelected(index)}>
+                <View
+                  style={[
+                    styles.itemStyleHorizontal,
+                    selected && styles.itemSelectedStyleHorizontal,
+                  ]}>
+                  <Text
+                    style={{
+                      textAlign: 'center',
+                      color: selected ? 'black' : 'grey',
+                      fontWeight: selected ? 'bold' : 'normal',
+                    }}>
+                    {item + ''}
+                  </Text>
+                </View>
+              </TouchableWithoutFeedback>
+            );
+          }}
+        />
+      </View>
+    </>
+  );
+};
+
+const fontStyles = ['normal', 'italic'];
+const fontVariants = [
+  undefined,
+  'small-caps',
+  'oldstyle-nums',
+  'lining-nums',
+  'tabular-nums',
+  'proportional-nums',
+];
+const fontWeights = [
+  'normal',
+  'bold',
+  '100',
+  '200',
+  '300',
+  '400',
+  '500',
+  '600',
+  '700',
+  '800',
+  '900',
+];
+const textAlignments = ['auto', 'left', 'right', 'center', 'justify'];
+const textDecorationLines = [
+  'none',
+  'underline',
+  'line-through',
+  'underline line-through',
+];
+const textDecorationStyles = ['solid', 'double', 'dotted', 'dashed'];
+const textTransformations = ['none', 'uppercase', 'lowercase', 'capitalize'];
+const textAlignmentsVertical = ['auto', 'top', 'bottom', 'center'];
+const writingDirections = ['auto', 'ltr', 'rtl'];
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  pargraphWrapper: {
+    backgroundColor: 'black',
+  },
+  paragraph: {
+    color: '#fff',
+    textDecorationColor: 'yellow',
+    textShadowColor: 'red',
+    textShadowRadius: 1,
+    padding: 24,
+  },
+  wrapperHorizontal: {
+    justifyContent: 'center',
+    color: 'black',
+  },
+  itemStyleHorizontal: {
+    marginRight: 10,
+    height: 50,
+    padding: 8,
+    borderWidth: 1,
+    borderColor: 'grey',
+    borderRadius: 8,
+    textAlign: 'center',
+    justifyContent: 'center',
+  },
+  itemSelectedStyleHorizontal: {
+    borderWidth: 2,
+    borderColor: '#06bcee',
+  },
+  platformContainer: {
+    marginTop: 8,
+    borderTopWidth: 1,
+  },
+  platformContainerTitle: {
+    marginTop: 8,
+  },
+  title: {
+    fontWeight: 'bold',
+    marginVertical: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+# Reference
+
+## Props
+
+### `color`
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `fontFamily`
+
+| Type   |
+| ------ |
+| string |
+
+The generic font families `system-ui`, `ui-sans-serif`, `ui-serif`, `ui-monospace`, and `ui-rounded` are supported on iOS.
+
+---
+
+### `fontSize`
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `fontStyle`
+
+| Type                         |
+| ---------------------------- |
+| enum(`'normal'`, `'italic'`) |
+
+---
+
+### `fontWeight`
+
+Specifies font weight. The values `'normal'` and `'bold'` are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen.
+
+| Type                                                                                                                  | Default    |
+| --------------------------------------------------------------------------------------------------------------------- | ---------- |
+| enum(`'normal'`, `'bold'`, `'100'`, `'200'`, `'300'`, `'400'`, `'500'`, `'600'`, `'700'`, `'800'`, `'900'`) or number | `'normal'` |
+
+---
+
+### `includeFontPadding` <div className="label android">Android</div>
+
+Set to `false` to remove extra font padding intended to make space for certain ascenders / descenders. With some fonts, this padding can make text look slightly misaligned when centered vertically. For best results also set `textAlignVertical` to `center`.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `true`  |
+
+---
+
+### `fontVariant`
+
+Allows you to set all the font variants for a font. Can be set by using an array of enums or a space-separated string e.g. `'small-caps common-ligatures'`.
+
+| Type                                                                                                                 | Default |
+| -------------------------------------------------------------------------------------------------------------------- | ------- |
+| array of enum(`'small-caps'`, `'oldstyle-nums'`, `'lining-nums'`, `'tabular-nums'`, `'proportional-nums'`) or string | `[]`    |
+
+---
+
+### `letterSpacing`
+
+Increase or decrease the spacing between characters. By default there is no extra letter spacing.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `lineHeight`
+
+Numeric value that controls the vertical spacing between lines of text within a text element. It specifies the distance between the baselines of consecutive lines of text.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `textAlign`
+
+Specifies text alignment. On Android, the value 'justify' is only supported on Oreo (8.0) or above (API level >= 26). The value will fallback to `left` on lower Android versions.
+
+| Type                                                         | Default  |
+| ------------------------------------------------------------ | -------- |
+| enum(`'auto'`, `'left'`, `'right'`, `'center'`, `'justify'`) | `'auto'` |
+
+---
+
+### `textAlignVertical` <div className="label android">Android</div>
+
+An alias for `verticalAlign` style prop, if you use both properties, `verticalAlign` will take precedence over `textAlignVertical`
+
+| Type                                            | Default  |
+| ----------------------------------------------- | -------- |
+| enum(`'auto'`, `'top'`, `'bottom'`, `'center'`) | `'auto'` |
+
+---
+
+### `textDecorationColor` <div className="label ios">iOS</div>
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `textDecorationLine`
+
+| Type                                                                        | Default  |
+| --------------------------------------------------------------------------- | -------- |
+| enum(`'none'`, `'underline'`, `'line-through'`, `'underline line-through'`) | `'none'` |
+
+---
+
+### `textDecorationStyle` <div className="label ios">iOS</div>
+
+| Type                                                | Default   |
+| --------------------------------------------------- | --------- |
+| enum(`'solid'`, `'double'`, `'dotted'`, `'dashed'`) | `'solid'` |
+
+---
+
+### `textShadowColor`
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `textShadowOffset`
+
+| Type                                        |
+| ------------------------------------------- |
+| object: `{width?: number, height?: number}` |
+
+---
+
+### `textShadowRadius`
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `textTransform`
+
+| Type                                                         | Default  |
+| ------------------------------------------------------------ | -------- |
+| enum(`'none'`, `'uppercase'`, `'lowercase'`, `'capitalize'`) | `'none'` |
+
+---
+
+### `verticalAlign` <div className="label android">Android</div>
+
+| Type                                            | Default  |
+| ----------------------------------------------- | -------- |
+| enum(`'auto'`, `'top'`, `'bottom'`, `'middle'`) | `'auto'` |
+
+---
+
+### `writingDirection` <div className="label ios">iOS</div>
+
+| Type                             | Default  |
+| -------------------------------- | -------- |
+| enum(`'auto'`, `'ltr'`, `'rtl'`) | `'auto'` |
+
+---
+
+### `userSelect`
+
+It allows the user to select text and to use the native copy and paste functionality. Has precedence over the `selectable` prop.
+
+| Type                                                     | Default |
+| -------------------------------------------------------- | ------- |
+| enum(`'auto'`, `'text'`, `'none'`, `'contain'`, `'all'`) | `none`  |
diff --git a/website/versioned_docs/version-0.83/text.md b/website/versioned_docs/version-0.83/text.md
index 3112485639c..0e72ec8c27b 100644
--- a/website/versioned_docs/version-0.83/text.md
+++ b/website/versioned_docs/version-0.83/text.md
@@ -1,781 +1,780 @@
----
-id: text
-title: Text
----
-
-A React component for displaying text.
-
-`Text` supports nesting, styling, and touch handling.
-
-In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines:
-
-```SnackPlayer name=Text%20Function%20Component%20Example
-import React, {useState} from 'react';
-import {Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const TextInANest = () => {
-  const [titleText, setTitleText] = useState("Bird's Nest");
-  const bodyText = 'This is not really a bird nest.';
-
-  const onPressTitle = () => {
-    setTitleText("Bird's Nest [pressed]");
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.baseText}>
-          <Text style={styles.titleText} onPress={onPressTitle}>
-            {titleText}
-            {'\n'}
-            {'\n'}
-          </Text>
-          <Text numberOfLines={5}>{bodyText}</Text>
-        </Text>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  baseText: {
-    fontFamily: 'Cochin',
-  },
-  titleText: {
-    fontSize: 20,
-    fontWeight: 'bold',
-  },
-});
-
-export default TextInANest;
-```
-
-## Nested text
-
-Both Android and iOS allow you to display formatted text by annotating ranges of a string with specific formatting like bold or colored text (`NSAttributedString` on iOS, `SpannableString` on Android). In practice, this is very tedious. For React Native, we decided to use the web paradigm for this, where you can nest text to achieve the same effect.
-
-```SnackPlayer name=Nested%20Text%20Example
-import React from 'react';
-import {Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const BoldAndBeautiful = () => (
-  <SafeAreaProvider>
-    <SafeAreaView style={styles.container}>
-      <Text style={styles.baseText}>
-        I am bold
-        <Text style={styles.innerText}> and red</Text>
-      </Text>
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  baseText: {
-    fontWeight: 'bold',
-  },
-  innerText: {
-    color: 'red',
-  },
-});
-
-export default BoldAndBeautiful;
-```
-
-Behind the scenes, React Native converts this to a flat `NSAttributedString` or `SpannableString` that contains the following information:
-
-```
-"I am bold and red"
-0-9: bold
-9-17: bold, red
-```
-
-## 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.
-
-```tsx
-<Text>
-  <Text>First part and </Text>
-  <Text>second part</Text>
-</Text>
-// Text container: the text will be inline, if the space allows it
-// |First part and second part|
-
-// otherwise, the text will flow as if it was one
-// |First part |
-// |and second |
-// |part       |
-
-<View>
-  <Text>First part and </Text>
-  <Text>second part</Text>
-</View>
-// View container: each text is its own block
-// |First part and|
-// |second part   |
-
-// otherwise, the text will flow in its own block
-// |First part |
-// |and        |
-// |second part|
-```
-
-## Limited Style Inheritance
-
-On the web, the usual way to set a font family and size for the entire document is to take advantage of inherited CSS properties like so:
-
-```css
-html {
-  font-family:
-    'lucida grande', tahoma, verdana, arial, sans-serif;
-  font-size: 11px;
-  color: #141823;
-}
-```
-
-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>`.
-
-```tsx
-// BAD: will raise exception, can't have a text node as child of a <View>
-<View>
-  Some text
-</View>
-
-// GOOD
-<View>
-  <Text>
-    Some text
-  </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.
-
-```tsx
-<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:
-
-```tsx
-const MyAppHeaderText = ({children}) => {
-  return (
-    <MyAppText>
-      <Text style={{fontSize: 20}}>{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.
-
-```tsx
-<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:
-
-- (Developer) React components are designed with strong isolation in mind: You should be able to drop a component anywhere in your application, trusting that as long as the props are the same, it will look and behave the same way. Text properties that could inherit from outside of the props would break this isolation.
-
-- (Implementor) The implementation of React Native is also simplified. We do not need to have a `fontFamily` field on every single element, and we do not need to potentially traverse the tree up to the root every time we display a text node. The style inheritance is only encoded inside of the native Text component and doesn't leak to other components or the system itself.
-
----
-
-# Reference
-
-## Props
-
-### `accessibilityHint`
-
-An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityLanguage` <div className="label ios">iOS</div>
-
-A value indicating which language should be used by the screen reader when the user interacts with the element. It should follow the [BCP 47 specification](https://www.rfc-editor.org/info/bcp47).
-
-See the [iOS `accessibilityLanguage` doc](https://developer.apple.com/documentation/objectivec/nsobject/1615192-accessibilitylanguage) for more information.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityLabel`
-
-Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the `Text` nodes separated by space.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityRole`
-
-Tells the screen reader to treat the currently focused on element as having a specific role.
-
-On iOS, these roles map to corresponding Accessibility Traits. Image button has the same functionality as if the trait was set to both 'image' and 'button'. See the [Accessibility guide](accessibility.md#accessibilitytraits-ios) for more information.
-
-On Android, these roles have similar functionality on TalkBack as adding Accessibility Traits does on Voiceover in iOS
-
-| Type                                                 |
-| ---------------------------------------------------- |
-| [AccessibilityRole](accessibility#accessibilityrole) |
-
----
-
-### `accessibilityState`
-
-Tells the screen reader to treat the currently focused on element as being in a specific state.
-
-You can provide one state, no state, or multiple states. The states must be passed in through an object, e.g. `{selected: true, disabled: true}`.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| [AccessibilityState](accessibility#accessibilitystate) |
-
----
-
-### `accessibilityActions`
-
-Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The `accessibilityActions` property should contain a list of action objects. Each action object should contain the field name and label.
-
-See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
-
-| Type  | Required |
-| ----- | -------- |
-| array | No       |
-
----
-
-### `onAccessibilityAction`
-
-Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.
-
-See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
-
-| Type     | Required |
-| -------- | -------- |
-| function | No       |
-
----
-
-### `accessible`
-
-When set to `true`, indicates that the view is an accessibility element.
-
-See the [Accessibility guide](accessibility#accessible-ios-android) for more information.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `true`  |
-
----
-
-### `adjustsFontSizeToFit`
-
-Specifies whether fonts should be scaled down automatically to fit given style constraints.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
----
-
-### `allowFontScaling`
-
-Specifies whether fonts should scale to respect Text Size accessibility settings.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `true`  |
-
----
-
-### `android_hyphenationFrequency` <div className="label android">Android</div>
-
-Sets the frequency of automatic hyphenation to use when determining word breaks on Android API Level 23+.
-
-| Type                                | Default  |
-| ----------------------------------- | -------- |
-| enum(`'none'`, `'normal'`,`'full'`) | `'none'` |
-
----
-
-### `aria-busy`
-
-Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-checked`
-
-Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
-| Type             | Default |
-| ---------------- | ------- |
-| boolean, 'mixed' | false   |
-
----
-
-### `aria-disabled`
-
-Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-expanded`
-
-Indicates whether an expandable element is currently expanded or collapsed.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-label`
-
-Defines a string value that labels an interactive element.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `aria-selected`
-
-Indicates whether a selectable element is currently selected or not.
-
-| Type    |
-| ------- |
-| boolean |
-
-### `dataDetectorType` <div className="label android">Android</div>
-
-Determines the types of data converted to clickable URLs in the text element. By default, no data types are detected.
-
-You can provide only one type.
-
-| Type                                                          | Default  |
-| ------------------------------------------------------------- | -------- |
-| enum(`'phoneNumber'`, `'link'`, `'email'`, `'none'`, `'all'`) | `'none'` |
-
----
-
-### `disabled` <div className="label android">Android</div>
-
-Specifies the disabled state of the text view for testing purposes.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `dynamicTypeRamp` <div className="label ios">iOS</div>
-
-The [Dynamic Type](https://developer.apple.com/documentation/uikit/uifont/scaling_fonts_automatically) ramp to apply to this element on iOS.
-
-| Type                                                                                                                                                     | Default  |
-| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
-| enum(`'caption2'`, `'caption1'`, `'footnote'`, `'subheadline'`, `'callout'`, `'body'`, `'headline'`, `'title3'`, `'title2'`, `'title1'`, `'largeTitle'`) | `'body'` |
-
----
-
-### `ellipsizeMode`
-
-When `numberOfLines` is set, this prop defines how the text will be truncated. `numberOfLines` must be set in conjunction with this prop.
-
-This can be one of the following values:
-
-- `head` - The line is displayed so that the end fits in the container and the missing text at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz"
-- `middle` - The line is displayed so that the beginning and end fit in the container and the missing text in the middle is indicated by an ellipsis glyph. "ab...yz"
-- `tail` - The line is displayed so that the beginning fits in the container and the missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..."
-- `clip` - Lines are not drawn past the edge of the text container.
-
-:::note
-On Android, when `numberOfLines` is set to a value higher than `1`, only `tail` value will work correctly.
-:::
-
-| Type                                           | Default |
-| ---------------------------------------------- | ------- |
-| enum(`'head'`, `'middle'`, `'tail'`, `'clip'`) | `tail`  |
-
----
-
-### `id`
-
-Used to locate this view from native code. Has precedence over `nativeID` prop.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `maxFontSizeMultiplier`
-
-Specifies the largest possible scale a font can reach when `allowFontScaling` is enabled. Possible values:
-
-- `null/undefined`: inherit from the parent node or the global default (0)
-- `0`: no max, ignore parent/global default
-- `>= 1`: sets the `maxFontSizeMultiplier` of this node to this value
-
-| Type   | Default     |
-| ------ | ----------- |
-| number | `undefined` |
-
----
-
-### `minimumFontScale`
-
-Specifies the smallest possible scale a font can reach when `adjustsFontSizeToFit` is enabled. (values 0.01-1.0).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nativeID`
-
-Used to locate this view from native code.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `numberOfLines`
-
-Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. Setting this property to `0` will result in unsetting this value, which means that no lines restriction will be applied.
-
-This prop is commonly used with `ellipsizeMode`.
-
-| Type   | Default |
-| ------ | ------- |
-| number | `0`     |
-
----
-
-### `onLayout`
-
-Invoked on mount and on layout changes.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
-
----
-
-### `onLongPress`
-
-This function is called on long press.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onMoveShouldSetResponder`
-
-Does this view want to "claim" touch responsiveness? This is called for every touch move on the `View` when it is not the responder.
-
-| Type                                                      |
-| --------------------------------------------------------- |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
-
----
-
-### `onPress`
-
-Function called on user press, triggered after `onPressOut`.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onPressIn`
-
-Called immediately when a touch is engaged, before `onPressOut` and `onPress`.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onPressOut`
-
-Called when a touch is released.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onResponderGrant`
-
-The View is now responding to touch events. This is the time to highlight and show the user what is happening.
-
-On Android, return true from this callback to prevent any other native components from becoming responder until this responder terminates.
-
-| Type                                                              |
-| ----------------------------------------------------------------- |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void ｜ boolean` |
-
----
-
-### `onResponderMove`
-
-The user is moving their finger.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onResponderRelease`
-
-Fired at the end of the touch.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onResponderTerminate`
-
-The responder has been taken from the `View`. Might be taken by other views after a call to `onResponderTerminationRequest`, or might be taken by the OS without asking (e.g., happens with control center/ notification center on iOS)
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onResponderTerminationRequest`
-
-Some other `View` wants to become a responder and is asking this `View` to release its responder. Returning `true` allows its release.
-
-| Type                                                      |
-| --------------------------------------------------------- |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
-
----
-
-### `onStartShouldSetResponderCapture`
-
-If a parent `View` wants to prevent a child `View` from becoming a responder on a touch start, it should have this handler which returns `true`.
-
-| Type                                                      |
-| --------------------------------------------------------- |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
-
----
-
-### `onTextLayout`
-
-Invoked on Text layout change.
-
-| Type                                                 |
-| ---------------------------------------------------- |
-| ([`TextLayoutEvent`](text#textlayoutevent)) => mixed |
-
----
-
-### `pressRetentionOffset`
-
-When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations.
-
-| Type                 |
-| -------------------- |
-| [Rect](rect), number |
-
----
-
-### `ref`
-
-A ref setter that will be assigned an [element node](element-nodes) when mounted.
-
-Note that `Text` components don't provide text nodes, the same way that paragraph elements (`<p>`) on Web are element nodes instead of text nodes. Text nodes can be found as their child nodes instead.
-
----
-
-### `role`
-
-`role` communicates the purpose of a component to the user of an assistive technology. Has precedence over the [`accessibilityRole`](text#accessibilityrole) prop.
-
-| Type                       |
-| -------------------------- |
-| [Role](accessibility#role) |
-
----
-
-### `selectable`
-
-Lets the user select text, to use the native copy and paste functionality.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
----
-
-### `selectionColor` <div className="label android">Android</div>
-
-The highlight color of the text.
-
-| Type            |
-| --------------- |
-| [color](colors) |
-
----
-
-### `style`
-
-| Type                                                                 |
-| -------------------------------------------------------------------- |
-| [Text Style](text-style-props), [View Style Props](view-style-props) |
-
----
-
-### `suppressHighlighting` <div className="label ios">iOS</div>
-
-When `true`, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
----
-
-### `testID`
-
-Used to locate this view in end-to-end tests.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `textBreakStrategy` <div className="label android">Android</div>
-
-Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced`.
-
-| Type                                            | Default       |
-| ----------------------------------------------- | ------------- |
-| enum(`'simple'`, `'highQuality'`, `'balanced'`) | `highQuality` |
-
----
-
-### `lineBreakStrategyIOS` <div className="label ios">iOS</div>
-
-Set line break strategy on iOS 14+. Possible values are `none`, `standard`, `hangul-word` and `push-out`.
-
-| Type                                                        | Default  |
-| ----------------------------------------------------------- | -------- |
-| enum(`'none'`, `'standard'`, `'hangul-word'`, `'push-out'`) | `'none'` |
-
-## Type Definitions
-
-### TextLayout
-
-`TextLayout` object is a part of [`TextLayoutEvent`](text#textlayoutevent) callback and contains the measurement data for `Text` line.
-
-#### Example
-
-```js
-{
-    capHeight: 10.496,
-    ascender: 14.624,
-    descender: 4,
-    width: 28.224,
-    height: 18.624,
-    xHeight: 6.048,
-    x: 0,
-    y: 0
-}
-```
-
-#### Properties
-
-| Name      | Type   | Optional | Description                                                         |
-| --------- | ------ | -------- | ------------------------------------------------------------------- |
-| ascender  | number | No       | The line ascender height after the text layout changes.             |
-| capHeight | number | No       | Height of capital letter above the baseline.                        |
-| descender | number | No       | The line descender height after the text layout changes.            |
-| height    | number | No       | Height of the line after the text layout changes.                   |
-| width     | number | No       | Width of the line after the text layout changes.                    |
-| x         | number | No       | Line X coordinate inside the Text component.                        |
-| xHeight   | number | No       | Distance between the baseline and median of the line (corpus size). |
-| y         | number | No       | Line Y coordinate inside the Text component.                        |
-
-### TextLayoutEvent
-
-`TextLayoutEvent` object is returned in the callback as a result of a component layout change. It contains a key called `lines` with a value which is an array containing [`TextLayout`](text#textlayout) object corresponded to every rendered text line.
-
-#### Example
-
-```js
-{
-  lines: [
-    TextLayout,
-    TextLayout,
-    // ...
-  ];
-  target: 1127;
-}
-```
-
-#### Properties
-
-| Name   | Type                                    | Optional | Description                                           |
-| ------ | --------------------------------------- | -------- | ----------------------------------------------------- |
-| lines  | array of [TextLayout](text#textlayout)s | No       | Provides the TextLayout data for every rendered line. |
-| target | number                                  | No       | The node id of the element.                           |
+---
+id: text
+title: Text
+---
+
+A React component for displaying text.
+
+`Text` supports nesting, styling, and touch handling.
+
+In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines:
+
+```SnackPlayer name=Text%20Function%20Component%20Example
+import {useState} from 'react';
+import {Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const TextInANest = () => {
+  const [titleText, setTitleText] = useState("Bird's Nest");
+  const bodyText = 'This is not really a bird nest.';
+
+  const onPressTitle = () => {
+    setTitleText("Bird's Nest [pressed]");
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.baseText}>
+          <Text style={styles.titleText} onPress={onPressTitle}>
+            {titleText}
+            {'\n'}
+            {'\n'}
+          </Text>
+          <Text numberOfLines={5}>{bodyText}</Text>
+        </Text>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  baseText: {
+    fontFamily: 'Cochin',
+  },
+  titleText: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+});
+
+export default TextInANest;
+```
+
+## Nested text
+
+Both Android and iOS allow you to display formatted text by annotating ranges of a string with specific formatting like bold or colored text (`NSAttributedString` on iOS, `SpannableString` on Android). In practice, this is very tedious. For React Native, we decided to use the web paradigm for this, where you can nest text to achieve the same effect.
+
+```SnackPlayer name=Nested%20Text%20Example
+import {Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const BoldAndBeautiful = () => (
+  <SafeAreaProvider>
+    <SafeAreaView style={styles.container}>
+      <Text style={styles.baseText}>
+        I am bold
+        <Text style={styles.innerText}> and red</Text>
+      </Text>
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  baseText: {
+    fontWeight: 'bold',
+  },
+  innerText: {
+    color: 'red',
+  },
+});
+
+export default BoldAndBeautiful;
+```
+
+Behind the scenes, React Native converts this to a flat `NSAttributedString` or `SpannableString` that contains the following information:
+
+```
+"I am bold and red"
+0-9: bold
+9-17: bold, red
+```
+
+## 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.
+
+```tsx
+<Text>
+  <Text>First part and </Text>
+  <Text>second part</Text>
+</Text>
+// Text container: the text will be inline, if the space allows it
+// |First part and second part|
+
+// otherwise, the text will flow as if it was one
+// |First part |
+// |and second |
+// |part       |
+
+<View>
+  <Text>First part and </Text>
+  <Text>second part</Text>
+</View>
+// View container: each text is its own block
+// |First part and|
+// |second part   |
+
+// otherwise, the text will flow in its own block
+// |First part |
+// |and        |
+// |second part|
+```
+
+## Limited Style Inheritance
+
+On the web, the usual way to set a font family and size for the entire document is to take advantage of inherited CSS properties like so:
+
+```css
+html {
+  font-family:
+    'lucida grande', tahoma, verdana, arial, sans-serif;
+  font-size: 11px;
+  color: #141823;
+}
+```
+
+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>`.
+
+```tsx
+// BAD: will raise exception, can't have a text node as child of a <View>
+<View>
+  Some text
+</View>
+
+// GOOD
+<View>
+  <Text>
+    Some text
+  </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.
+
+```tsx
+<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:
+
+```tsx
+const MyAppHeaderText = ({children}) => {
+  return (
+    <MyAppText>
+      <Text style={{fontSize: 20}}>{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.
+
+```tsx
+<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:
+
+- (Developer) React components are designed with strong isolation in mind: You should be able to drop a component anywhere in your application, trusting that as long as the props are the same, it will look and behave the same way. Text properties that could inherit from outside of the props would break this isolation.
+
+- (Implementor) The implementation of React Native is also simplified. We do not need to have a `fontFamily` field on every single element, and we do not need to potentially traverse the tree up to the root every time we display a text node. The style inheritance is only encoded inside of the native Text component and doesn't leak to other components or the system itself.
+
+---
+
+# Reference
+
+## Props
+
+### `accessibilityHint`
+
+An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityLanguage` <div className="label ios">iOS</div>
+
+A value indicating which language should be used by the screen reader when the user interacts with the element. It should follow the [BCP 47 specification](https://www.rfc-editor.org/info/bcp47).
+
+See the [iOS `accessibilityLanguage` doc](https://developer.apple.com/documentation/objectivec/nsobject/1615192-accessibilitylanguage) for more information.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityLabel`
+
+Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the `Text` nodes separated by space.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityRole`
+
+Tells the screen reader to treat the currently focused on element as having a specific role.
+
+On iOS, these roles map to corresponding Accessibility Traits. Image button has the same functionality as if the trait was set to both 'image' and 'button'. See the [Accessibility guide](accessibility.md#accessibilitytraits-ios) for more information.
+
+On Android, these roles have similar functionality on TalkBack as adding Accessibility Traits does on Voiceover in iOS
+
+| Type                                                 |
+| ---------------------------------------------------- |
+| [AccessibilityRole](accessibility#accessibilityrole) |
+
+---
+
+### `accessibilityState`
+
+Tells the screen reader to treat the currently focused on element as being in a specific state.
+
+You can provide one state, no state, or multiple states. The states must be passed in through an object, e.g. `{selected: true, disabled: true}`.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| [AccessibilityState](accessibility#accessibilitystate) |
+
+---
+
+### `accessibilityActions`
+
+Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The `accessibilityActions` property should contain a list of action objects. Each action object should contain the field name and label.
+
+See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
+
+| Type  | Required |
+| ----- | -------- |
+| array | No       |
+
+---
+
+### `onAccessibilityAction`
+
+Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.
+
+See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `accessible`
+
+When set to `true`, indicates that the view is an accessibility element.
+
+See the [Accessibility guide](accessibility#accessible-ios-android) for more information.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `true`  |
+
+---
+
+### `adjustsFontSizeToFit`
+
+Specifies whether fonts should be scaled down automatically to fit given style constraints.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+---
+
+### `allowFontScaling`
+
+Specifies whether fonts should scale to respect Text Size accessibility settings.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `true`  |
+
+---
+
+### `android_hyphenationFrequency` <div className="label android">Android</div>
+
+Sets the frequency of automatic hyphenation to use when determining word breaks on Android API Level 23+.
+
+| Type                                | Default  |
+| ----------------------------------- | -------- |
+| enum(`'none'`, `'normal'`,`'full'`) | `'none'` |
+
+---
+
+### `aria-busy`
+
+Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-checked`
+
+Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
+
+| Type             | Default |
+| ---------------- | ------- |
+| boolean, 'mixed' | false   |
+
+---
+
+### `aria-disabled`
+
+Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-expanded`
+
+Indicates whether an expandable element is currently expanded or collapsed.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-label`
+
+Defines a string value that labels an interactive element.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `aria-selected`
+
+Indicates whether a selectable element is currently selected or not.
+
+| Type    |
+| ------- |
+| boolean |
+
+### `dataDetectorType` <div className="label android">Android</div>
+
+Determines the types of data converted to clickable URLs in the text element. By default, no data types are detected.
+
+You can provide only one type.
+
+| Type                                                          | Default  |
+| ------------------------------------------------------------- | -------- |
+| enum(`'phoneNumber'`, `'link'`, `'email'`, `'none'`, `'all'`) | `'none'` |
+
+---
+
+### `disabled` <div className="label android">Android</div>
+
+Specifies the disabled state of the text view for testing purposes.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `dynamicTypeRamp` <div className="label ios">iOS</div>
+
+The [Dynamic Type](https://developer.apple.com/documentation/uikit/uifont/scaling_fonts_automatically) ramp to apply to this element on iOS.
+
+| Type                                                                                                                                                     | Default  |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
+| enum(`'caption2'`, `'caption1'`, `'footnote'`, `'subheadline'`, `'callout'`, `'body'`, `'headline'`, `'title3'`, `'title2'`, `'title1'`, `'largeTitle'`) | `'body'` |
+
+---
+
+### `ellipsizeMode`
+
+When `numberOfLines` is set, this prop defines how the text will be truncated. `numberOfLines` must be set in conjunction with this prop.
+
+This can be one of the following values:
+
+- `head` - The line is displayed so that the end fits in the container and the missing text at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz"
+- `middle` - The line is displayed so that the beginning and end fit in the container and the missing text in the middle is indicated by an ellipsis glyph. "ab...yz"
+- `tail` - The line is displayed so that the beginning fits in the container and the missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..."
+- `clip` - Lines are not drawn past the edge of the text container.
+
+:::note
+On Android, when `numberOfLines` is set to a value higher than `1`, only `tail` value will work correctly.
+:::
+
+| Type                                           | Default |
+| ---------------------------------------------- | ------- |
+| enum(`'head'`, `'middle'`, `'tail'`, `'clip'`) | `tail`  |
+
+---
+
+### `id`
+
+Used to locate this view from native code. Has precedence over `nativeID` prop.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `maxFontSizeMultiplier`
+
+Specifies the largest possible scale a font can reach when `allowFontScaling` is enabled. Possible values:
+
+- `null/undefined`: inherit from the parent node or the global default (0)
+- `0`: no max, ignore parent/global default
+- `>= 1`: sets the `maxFontSizeMultiplier` of this node to this value
+
+| Type   | Default     |
+| ------ | ----------- |
+| number | `undefined` |
+
+---
+
+### `minimumFontScale`
+
+Specifies the smallest possible scale a font can reach when `adjustsFontSizeToFit` is enabled. (values 0.01-1.0).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nativeID`
+
+Used to locate this view from native code.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `numberOfLines`
+
+Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. Setting this property to `0` will result in unsetting this value, which means that no lines restriction will be applied.
+
+This prop is commonly used with `ellipsizeMode`.
+
+| Type   | Default |
+| ------ | ------- |
+| number | `0`     |
+
+---
+
+### `onLayout`
+
+Invoked on mount and on layout changes.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
+
+---
+
+### `onLongPress`
+
+This function is called on long press.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onMoveShouldSetResponder`
+
+Does this view want to "claim" touch responsiveness? This is called for every touch move on the `View` when it is not the responder.
+
+| Type                                                      |
+| --------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
+
+---
+
+### `onPress`
+
+Function called on user press, triggered after `onPressOut`.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onPressIn`
+
+Called immediately when a touch is engaged, before `onPressOut` and `onPress`.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onPressOut`
+
+Called when a touch is released.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onResponderGrant`
+
+The View is now responding to touch events. This is the time to highlight and show the user what is happening.
+
+On Android, return true from this callback to prevent any other native components from becoming responder until this responder terminates.
+
+| Type                                                              |
+| ----------------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void ｜ boolean` |
+
+---
+
+### `onResponderMove`
+
+The user is moving their finger.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onResponderRelease`
+
+Fired at the end of the touch.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onResponderTerminate`
+
+The responder has been taken from the `View`. Might be taken by other views after a call to `onResponderTerminationRequest`, or might be taken by the OS without asking (e.g., happens with control center/ notification center on iOS)
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onResponderTerminationRequest`
+
+Some other `View` wants to become a responder and is asking this `View` to release its responder. Returning `true` allows its release.
+
+| Type                                                      |
+| --------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
+
+---
+
+### `onStartShouldSetResponderCapture`
+
+If a parent `View` wants to prevent a child `View` from becoming a responder on a touch start, it should have this handler which returns `true`.
+
+| Type                                                      |
+| --------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
+
+---
+
+### `onTextLayout`
+
+Invoked on Text layout change.
+
+| Type                                                 |
+| ---------------------------------------------------- |
+| ([`TextLayoutEvent`](text#textlayoutevent)) => mixed |
+
+---
+
+### `pressRetentionOffset`
+
+When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations.
+
+| Type                 |
+| -------------------- |
+| [Rect](rect), number |
+
+---
+
+### `ref`
+
+A ref setter that will be assigned an [element node](element-nodes) when mounted.
+
+Note that `Text` components don't provide text nodes, the same way that paragraph elements (`<p>`) on Web are element nodes instead of text nodes. Text nodes can be found as their child nodes instead.
+
+---
+
+### `role`
+
+`role` communicates the purpose of a component to the user of an assistive technology. Has precedence over the [`accessibilityRole`](text#accessibilityrole) prop.
+
+| Type                       |
+| -------------------------- |
+| [Role](accessibility#role) |
+
+---
+
+### `selectable`
+
+Lets the user select text, to use the native copy and paste functionality.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+---
+
+### `selectionColor` <div className="label android">Android</div>
+
+The highlight color of the text.
+
+| Type            |
+| --------------- |
+| [color](colors) |
+
+---
+
+### `style`
+
+| Type                                                                 |
+| -------------------------------------------------------------------- |
+| [Text Style](text-style-props), [View Style Props](view-style-props) |
+
+---
+
+### `suppressHighlighting` <div className="label ios">iOS</div>
+
+When `true`, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+---
+
+### `testID`
+
+Used to locate this view in end-to-end tests.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `textBreakStrategy` <div className="label android">Android</div>
+
+Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced`.
+
+| Type                                            | Default       |
+| ----------------------------------------------- | ------------- |
+| enum(`'simple'`, `'highQuality'`, `'balanced'`) | `highQuality` |
+
+---
+
+### `lineBreakStrategyIOS` <div className="label ios">iOS</div>
+
+Set line break strategy on iOS 14+. Possible values are `none`, `standard`, `hangul-word` and `push-out`.
+
+| Type                                                        | Default  |
+| ----------------------------------------------------------- | -------- |
+| enum(`'none'`, `'standard'`, `'hangul-word'`, `'push-out'`) | `'none'` |
+
+## Type Definitions
+
+### TextLayout
+
+`TextLayout` object is a part of [`TextLayoutEvent`](text#textlayoutevent) callback and contains the measurement data for `Text` line.
+
+#### Example
+
+```js
+{
+    capHeight: 10.496,
+    ascender: 14.624,
+    descender: 4,
+    width: 28.224,
+    height: 18.624,
+    xHeight: 6.048,
+    x: 0,
+    y: 0
+}
+```
+
+#### Properties
+
+| Name      | Type   | Optional | Description                                                         |
+| --------- | ------ | -------- | ------------------------------------------------------------------- |
+| ascender  | number | No       | The line ascender height after the text layout changes.             |
+| capHeight | number | No       | Height of capital letter above the baseline.                        |
+| descender | number | No       | The line descender height after the text layout changes.            |
+| height    | number | No       | Height of the line after the text layout changes.                   |
+| width     | number | No       | Width of the line after the text layout changes.                    |
+| x         | number | No       | Line X coordinate inside the Text component.                        |
+| xHeight   | number | No       | Distance between the baseline and median of the line (corpus size). |
+| y         | number | No       | Line Y coordinate inside the Text component.                        |
+
+### TextLayoutEvent
+
+`TextLayoutEvent` object is returned in the callback as a result of a component layout change. It contains a key called `lines` with a value which is an array containing [`TextLayout`](text#textlayout) object corresponded to every rendered text line.
+
+#### Example
+
+```js
+{
+  lines: [
+    TextLayout,
+    TextLayout,
+    // ...
+  ];
+  target: 1127;
+}
+```
+
+#### Properties
+
+| Name   | Type                                    | Optional | Description                                           |
+| ------ | --------------------------------------- | -------- | ----------------------------------------------------- |
+| lines  | array of [TextLayout](text#textlayout)s | No       | Provides the TextLayout data for every rendered line. |
+| target | number                                  | No       | The node id of the element.                           |
diff --git a/website/versioned_docs/version-0.83/textinput.md b/website/versioned_docs/version-0.83/textinput.md
index e6b91315ff2..f9adb52b513 100644
--- a/website/versioned_docs/version-0.83/textinput.md
+++ b/website/versioned_docs/version-0.83/textinput.md
@@ -1,1146 +1,1146 @@
----
-id: textinput
-title: TextInput
----
-
-A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.
-
-The most basic use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. A minimal example:
-
-```SnackPlayer name=TextInput%20Example
-import React from 'react';
-import {StyleSheet, TextInput} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const TextInputExample = () => {
-  const [text, onChangeText] = React.useState('Useless Text');
-  const [number, onChangeNumber] = React.useState('');
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView>
-        <TextInput
-          style={styles.input}
-          onChangeText={onChangeText}
-          value={text}
-        />
-        <TextInput
-          style={styles.input}
-          onChangeText={onChangeNumber}
-          value={number}
-          placeholder="useless placeholder"
-          keyboardType="numeric"
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  input: {
-    height: 40,
-    margin: 12,
-    borderWidth: 1,
-    padding: 10,
-  },
-});
-
-export default TextInputExample;
-```
-
-Two methods exposed via the native element are `.focus()` and `.blur()` that will focus or blur the TextInput programmatically.
-
-Note that some props are only available with `multiline={true/false}`. Additionally, border styles that apply to only one side of the element (e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if `multiline=true`. To achieve the same effect, you can wrap your `TextInput` in a `View`:
-
-```SnackPlayer name=Multiline%20TextInput%20Example
-import React from 'react';
-import {TextInput, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const MultilineTextInputExample = () => {
-  const [value, onChangeText] = React.useState('Useless Multiline Placeholder');
-
-  // If you type something in the text box that is a color,
-  // the background will change to that color.
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView
-        style={{
-          flex: 1,
-          backgroundColor: value.toLowerCase(),
-        }}>
-        <TextInput
-          editable
-          multiline
-          numberOfLines={4}
-          maxLength={40}
-          onChangeText={text => onChangeText(text)}
-          value={value}
-          style={styles.textInput}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  textInput: {
-    padding: 10,
-    borderColor: '#000',
-    borderWidth: 1,
-    margin: 12,
-  },
-});
-
-export default MultilineTextInputExample;
-```
-
-`TextInput` has a border at the bottom of its view by default. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this are to either not set height explicitly, in which case the system will take care of displaying the border in the correct position, or to not display the border by setting `underlineColorAndroid` to transparent.
-
-Note that on Android performing text selection in an input can change the app's activity `windowSoftInputMode` param to `adjustResize`. This may cause issues with components that have position: 'absolute' while the keyboard is active. To avoid this behavior either specify `windowSoftInputMode` in AndroidManifest.xml ( https://developer.android.com/guide/topics/manifest/activity-element.html ) or control this param programmatically with native code.
-
----
-
-# Reference
-
-## Props
-
-### [View Props](view.md#props)
-
-Inherits [View Props](view.md#props).
-
----
-
-### `allowFontScaling`
-
-Specifies whether fonts should scale to respect Text Size accessibility settings. The default is `true`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `autoCapitalize`
-
-Tells `TextInput` to automatically capitalize certain characters. This property is not supported by some keyboard types such as `name-phone-pad`.
-
-- `characters`: all characters.
-- `words`: first letter of each word.
-- `sentences`: first letter of each sentence (_default_).
-- `none`: don't auto capitalize anything.
-
-| Type                                             |
-| ------------------------------------------------ |
-| enum('none', 'sentences', 'words', 'characters') |
-
----
-
-### `autoComplete`
-
-Specifies autocomplete hints for the system, so it can provide autofill. On Android, the system will always attempt to offer autofill by using heuristics to identify the type of content. To disable autocomplete, set `autoComplete` to `off`.
-
-The following values work across platforms:
-
-- `additional-name`
-- `address-line1`
-- `address-line2`
-- `birthdate-day` (iOS 17+)
-- `birthdate-full` (iOS 17+)
-- `birthdate-month` (iOS 17+)
-- `birthdate-year` (iOS 17+)
-- `cc-csc` (iOS 17+)
-- `cc-exp` (iOS 17+)
-- `cc-exp-day` (iOS 17+)
-- `cc-exp-month` (iOS 17+)
-- `cc-exp-year` (iOS 17+)
-- `cc-number`
-- `country`
-- `current-password`
-- `email`
-- `family-name`
-- `given-name`
-- `honorific-prefix`
-- `honorific-suffix`
-- `name`
-- `new-password`
-- `off`
-- `one-time-code`
-- `postal-code`
-- `street-address`
-- `tel`
-- `username`
-
-<div className="label basic ios">iOS</div>
-
-The following values work on iOS only:
-
-- `cc-family-name` (iOS 17+)
-- `cc-given-name` (iOS 17+)
-- `cc-middle-name` (iOS 17+)
-- `cc-name` (iOS 17+)
-- `cc-type` (iOS 17+)
-- `nickname`
-- `organization`
-- `organization-title`
-- `url`
-
-<div className="label basic android">Android</div>
-
-The following values work on Android only:
-
-- `gender`
-- `name-family`
-- `name-given`
-- `name-middle`
-- `name-middle-initial`
-- `name-prefix`
-- `name-suffix`
-- `password`
-- `password-new`
-- `postal-address`
-- `postal-address-country`
-- `postal-address-extended`
-- `postal-address-extended-postal-code`
-- `postal-address-locality`
-- `postal-address-region`
-- `sms-otp`
-- `tel-country-code`
-- `tel-device`
-- `tel-national`
-- `username-new`
-
-| Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| enum('additional-name', 'address-line1', 'address-line2', 'birthdate-day', 'birthdate-full', 'birthdate-month', 'birthdate-year', 'cc-csc', 'cc-exp', 'cc-exp-day', 'cc-exp-month', 'cc-exp-year', 'cc-number', 'country', 'current-password', 'email', 'family-name', 'given-name', 'honorific-prefix', 'honorific-suffix', 'name', 'new-password', 'off', 'one-time-code', 'postal-code', 'street-address', 'tel', 'username', 'cc-family-name', 'cc-given-name', 'cc-middle-name', 'cc-name', 'cc-type', 'nickname', 'organization', 'organization-title', 'url', 'gender', 'name-family', 'name-given', 'name-middle', 'name-middle-initial', 'name-prefix', 'name-suffix', 'password', 'password-new', 'postal-address', 'postal-address-country', 'postal-address-extended', 'postal-address-extended-postal-code', 'postal-address-locality', 'postal-address-region', 'sms-otp', 'tel-country-code', 'tel-device', 'tel-national', 'username-new') |
-
----
-
-### `autoCorrect`
-
-If `false`, disables auto-correct. The default value is `true`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `autoFocus`
-
-If `true`, focuses the input. The default value is `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### 🗑️ `blurOnSubmit`
-
-:::warning[Deprecated]
-Note that `submitBehavior` now takes the place of `blurOnSubmit` and will override any behavior defined by `blurOnSubmit`. See [submitBehavior](textinput#submitbehavior).
-:::
-
-If `true`, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting `blurOnSubmit` to `true` means that pressing return will blur the field and trigger the `onSubmitEditing` event instead of inserting a newline into the field.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `caretHidden`
-
-If `true`, caret is hidden. The default value is `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `clearButtonMode` <div className="label ios">iOS</div>
-
-When the clear button should appear on the right side of the text view. This property is supported only for single-line TextInput component. The default value is `never`.
-
-| Type                                                       |
-| ---------------------------------------------------------- |
-| enum('never', 'while-editing', 'unless-editing', 'always') |
-
----
-
-### `clearTextOnFocus` <div className="label ios">iOS</div>
-
-If `true`, clears the text field automatically when editing begins.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `contextMenuHidden`
-
-If `true`, context menu is hidden. The default value is `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `dataDetectorTypes` <div className="label ios">iOS</div>
-
-Determines the types of data converted to clickable URLs in the text input. Only valid if `multiline={true}` and `editable={false}`. By default no data types are detected.
-
-You can provide one type or an array of many types.
-
-Possible values for `dataDetectorTypes` are:
-
-- `'phoneNumber'`
-- `'link'`
-- `'address'`
-- `'calendarEvent'`
-- `'none'`
-- `'all'`
-
-| Type                                                                                                                                                     |
-| -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), ,array of enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all') |
-
----
-
-### `defaultValue`
-
-Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `disableKeyboardShortcuts` <div className="label ios">iOS</div>
-
-If `true`, the keyboard shortcuts (undo/redo and copy buttons) are disabled.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `cursorColor` <div className="label android">Android</div>
-
-When provided it will set the color of the cursor (or "caret") in the component. Unlike the behavior of `selectionColor` the cursor color will be set independently from the color of the text selection box.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `disableFullscreenUI` <div className="label android">Android</div>
-
-When `false`, if there is a small amount of space available around a text input (e.g. landscape orientation on a phone), the OS may choose to have the user edit the text inside of a full screen text input mode. When `true`, this feature is disabled and users will always edit the text directly inside of the text input. Defaults to `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `editable`
-
-If `false`, text is not editable. The default value is `true`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `enablesReturnKeyAutomatically` <div className="label ios">iOS</div>
-
-If `true`, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `enterKeyHint`
-
-Determines what text should be shown to the return key. Has precedence over the `returnKeyType` prop.
-
-The following values work across platforms:
-
-- `done`
-- `next`
-- `search`
-- `send`
-- `go`
-
-_Android Only_
-
-The following values work on Android only:
-
-- `previous`
-
-_iOS Only_
-
-The following values work on iOS only:
-
-- `enter`
-
-| Type                                                              |
-| ----------------------------------------------------------------- |
-| enum('enter', 'done', 'next', 'previous', 'search', 'send', 'go') |
-
----
-
-### `importantForAutofill` <div className="label android">Android</div>
-
-Tells the operating system whether the individual fields in your app should be included in a view structure for autofill purposes on Android API Level 26+. Possible values are `auto`, `no`, `noExcludeDescendants`, `yes`, and `yesExcludeDescendants`. The default value is `auto`.
-
-- `auto`: Let the Android System use its heuristics to determine if the view is important for autofill.
-- `no`: This view isn't important for autofill.
-- `noExcludeDescendants`: This view and its children aren't important for autofill.
-- `yes`: This view is important for autofill.
-- `yesExcludeDescendants`: This view is important for autofill, but its children aren't important for autofill.
-
-| Type                                                                       |
-| -------------------------------------------------------------------------- |
-| enum('auto', 'no', 'noExcludeDescendants', 'yes', 'yesExcludeDescendants') |
-
----
-
-### `inlineImageLeft` <div className="label android">Android</div>
-
-If defined, the provided image resource will be rendered on the left. The image resource must be inside `/android/app/src/main/res/drawable` and referenced like
-
-```
-<TextInput
- inlineImageLeft='search_icon'
-/>
-```
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `inlineImagePadding` <div className="label android">Android</div>
-
-Padding between the inline image, if any, and the text input itself.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `inputAccessoryViewID` <div className="label ios">iOS</div>
-
-An optional identifier which links a custom [InputAccessoryView](inputaccessoryview.md) to this text input. The InputAccessoryView is rendered above the keyboard when this text input is focused.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `inputAccessoryViewButtonLabel` <div className="label ios">iOS</div>
-
-An optional label that overrides the default [InputAccessoryView](inputaccessoryview.md) button label.
-
-By default, the default button label is not localized. Use this property to provide a localized version.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `inputMode`
-
-Works like the `inputmode` attribute in HTML, it determines which keyboard to open, e.g. `numeric` and has precedence over `keyboardType`.
-
-Support the following values:
-
-- `none`
-- `text`
-- `decimal`
-- `numeric`
-- `tel`
-- `search`
-- `email`
-- `url`
-
-| Type                                                                        |
-| --------------------------------------------------------------------------- |
-| enum('decimal', 'email', 'none', 'numeric', 'search', 'tel', 'text', 'url') |
-
----
-
-### `keyboardAppearance` <div className="label ios">iOS</div>
-
-Determines the color of the keyboard.
-
-| Type                             |
-| -------------------------------- |
-| enum('default', 'light', 'dark') |
-
----
-
-### `keyboardType`
-
-Determines which keyboard to open, e.g.`numeric`.
-
-See screenshots of all the types [here](https://davidl.fr/blog/keyboard-react-native-ios-android#all-react-native-keyboard-type-examples-i-os-on-the-left-android-on-the-right).
-
-The following values work across platforms:
-
-- `default`
-- `number-pad`
-- `decimal-pad`
-- `numeric`
-- `email-address`
-- `phone-pad`
-- `url`
-
-_iOS Only_
-
-The following values work on iOS only:
-
-- `ascii-capable`
-- `numbers-and-punctuation`
-- `name-phone-pad`
-- `twitter`
-- `web-search`
-
-_Android Only_
-
-The following values work on Android only:
-
-- `visible-password`
-
-| Type                                                                                                                                                                                                    |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', 'visible-password') |
-
----
-
-### `lineBreakStrategyIOS` <div className="label ios">iOS</div>
-
-Set line break strategy on iOS 14+. Possible values are `none`, `standard`, `hangul-word` and `push-out`.
-
-| Type                                                        | Default  |
-| ----------------------------------------------------------- | -------- |
-| enum(`'none'`, `'standard'`, `'hangul-word'`, `'push-out'`) | `'none'` |
-
----
-
-### `lineBreakModeIOS` <div className="label ios">iOS</div>
-
-Set line break mode on iOS. Possible values are `wordWrapping`, `char`, `clip`, `head`, `middle` and `tail`.
-
-| Type                                                                       | Default          |
-| -------------------------------------------------------------------------- | ---------------- |
-| enum(`'wordWrapping'`, `'char'`, `'clip'`, `'head'`, `'middle'`, `'tail'`) | `'wordWrapping'` |
-
----
-
-### `maxFontSizeMultiplier`
-
-Specifies largest possible scale a font can reach when `allowFontScaling` is enabled. Possible values:
-
-- `null/undefined` (default): inherit from the parent node or the global default (0)
-- `0`: no max, ignore parent/global default
-- `>= 1`: sets the `maxFontSizeMultiplier` of this node to this value
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `maxLength`
-
-Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `multiline`
-
-If `true`, the text input can be multiple lines. The default value is `false`.
-
-:::note
-It is important to note that this aligns the text to the top on iOS, and centers it on Android. Use with `textAlignVertical` set to `top` for the same behavior in both platforms.
-:::
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `numberOfLines`
-
-:::note
-`numberOfLines` on iOS is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Sets the maximum number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `onBlur`
-
-Callback that is called when the text input is blurred.
-
-:::note
-If you are attempting to access the `text` value from `nativeEvent` keep in mind that the resulting value you get can be `undefined` which can cause unintended errors. If you are trying to find the last value of TextInput, you can use the [`onEndEditing`](textinput#onendediting) event, which is fired upon completion of editing.
-:::
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
-
----
-
-### `onChange`
-
-Callback that is called when the text input's text changes.
-
-| Type                                                  |
-| ----------------------------------------------------- |
-| (`{nativeEvent: {eventCount, target, text}}`) => void |
-
----
-
-### `onChangeText`
-
-Callback that is called when the text input's text changes. Changed text is passed as a single string argument to the callback handler.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onContentSizeChange`
-
-Callback that is called when the text input's content size changes.
-
-Only called for multiline text inputs.
-
-| Type                                                       |
-| ---------------------------------------------------------- |
-| (`{nativeEvent: {contentSize: {width, height} }}`) => void |
-
----
-
-### `onEndEditing`
-
-Callback that is called when text input ends.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onPressIn`
-
-Callback that is called when a touch is engaged.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onPressOut`
-
-Callback that is called when a touch is released.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onFocus`
-
-Callback that is called when the text input is focused.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
-
----
-
-### `onKeyPress`
-
-Callback that is called when a key is pressed. This will be called with object where `keyValue` is `'Enter'` or `'Backspace'` for respective keys and the typed-in character otherwise including `' '` for space. Fires before `onChange` callbacks. Note: on Android only the inputs from soft keyboard are handled, not the hardware keyboard inputs.
-
-| Type                                        |
-| ------------------------------------------- |
-| (`{nativeEvent: {key: keyValue} }`) => void |
-
----
-
-### `onLayout`
-
-Invoked on mount and on layout changes.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
-
----
-
-### `onScroll`
-
-Invoked on content scroll. May also contain other properties from `ScrollEvent` but on Android `contentSize` is not provided for performance reasons.
-
-| Type                                                |
-| --------------------------------------------------- |
-| (`{nativeEvent: {contentOffset: {x, y} }}`) => void |
-
----
-
-### `onSelectionChange`
-
-Callback that is called when the text input selection is changed.
-
-| Type                                                  |
-| ----------------------------------------------------- |
-| (`{nativeEvent: {selection: {start, end} }}`) => void |
-
----
-
-### `onSubmitEditing`
-
-Callback that is called when the text input's submit button is pressed.
-
-| Type                                                  |
-| ----------------------------------------------------- |
-| (`{nativeEvent: {text, eventCount, target}}`) => void |
-
-Note that on iOS this method isn't called when using `keyboardType="phone-pad"`.
-
----
-
-### `placeholder`
-
-The string that will be rendered before text input has been entered.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `placeholderTextColor`
-
-The text color of the placeholder string.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `readOnly`
-
-If `true`, text is not editable. The default value is `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `returnKeyLabel` <div className="label android">Android</div>
-
-Sets the return key to the label. Use it instead of `returnKeyType`.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `returnKeyType`
-
-Determines how the return key should look. On Android you can also use `returnKeyLabel`.
-
-_Cross platform_
-
-The following values work across platforms:
-
-- `done`
-- `go`
-- `next`
-- `search`
-- `send`
-
-_Android Only_
-
-The following values work on Android only:
-
-- `none`
-- `previous`
-
-_iOS Only_
-
-The following values work on iOS only:
-
-- `default`
-- `emergency-call`
-- `google`
-- `join`
-- `route`
-- `yahoo`
-
-| Type                                                                                                                              |
-| --------------------------------------------------------------------------------------------------------------------------------- |
-| enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo') |
-
-### `rejectResponderTermination` <div className="label ios">iOS</div>
-
-If `true`, allows TextInput to pass touch events to the parent component. This allows components such as SwipeableListView to be swipeable from the TextInput on iOS, as is the case on Android by default. If `false`, TextInput always asks to handle the input (except when disabled). The default value is `true`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `rows` <div className="label android">Android</div>
-
-Sets the number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `scrollEnabled` <div className="label ios">iOS</div>
-
-If `false`, scrolling of the text view will be disabled. The default value is `true`. Only works with `multiline={true}`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `secureTextEntry`
-
-If `true`, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is `false`. Does not work with `multiline={true}`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `selection`
-
-The start and end of the text input's selection. Set start and end to the same value to position the cursor.
-
-| Type                                  |
-| ------------------------------------- |
-| object: `{start: number,end: number}` |
-
----
-
-### `selectionColor`
-
-The highlight, selection handle and cursor color of the text input.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `selectionHandleColor` <div className="label android">Android</div>
-
-Sets the color of the selection handle. Unlike `selectionColor`, it allows the selection handle color to be customized independently of the selection's color.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `selectTextOnFocus`
-
-If `true`, all text will automatically be selected on focus.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `showSoftInputOnFocus`
-
-When `false`, it will prevent the soft keyboard from showing when the field is focused. The default value is `true`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `smartInsertDelete` <div className="label ios">iOS</div>
-
-If `false`, the iOS system will not insert an extra space after a paste operation neither delete one or two spaces after a cut or delete operation.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `true`  |
-
----
-
-### `spellCheck` <div className="label ios">iOS</div>
-
-If `false`, disables spell-check style (i.e. red underlines). The default value is inherited from `autoCorrect`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `submitBehavior`
-
-When the return key is pressed,
-
-For single line inputs:
-
-- `'newline'` defaults to `'blurAndSubmit'`
-- `undefined` defaults to `'blurAndSubmit'`
-
-For multiline inputs:
-
-- `'newline'` adds a newline
-- `undefined` defaults to `'newline'`
-
-For both single line and multiline inputs:
-
-- `'submit'` will only send a submit event and not blur the input
-- `'blurAndSubmit`' will both blur the input and send a submit event
-
-| Type                                       |
-| ------------------------------------------ |
-| enum('submit', 'blurAndSubmit', 'newline') |
-
----
-
-### `textAlign`
-
-Align the input text to the left, center, or right sides of the input field.
-
-Possible values for `textAlign` are:
-
-- `left`
-- `center`
-- `right`
-
-| Type                            |
-| ------------------------------- |
-| enum('left', 'center', 'right') |
-
----
-
-### `textContentType` <div className="label ios">iOS</div>
-
-Give the keyboard and the system information about the expected semantic meaning for the content that users enter.
-
-:::note
-[`autoComplete`](#autocomplete), provides the same functionality and is available for all platforms. You can use [`Platform.select`](/docs/next/platform#select) for differing platform behaviors.
-
-Avoid using both `textContentType` and `autoComplete`. For backwards compatibility, `textContentType` takes precedence when both properties are set.
-:::
-
-You can set `textContentType` to `username` or `password` to enable autofill of login details from the device keychain.
-
-`newPassword` can be used to indicate a new password input the user may want to save in the keychain, and `oneTimeCode` can be used to indicate that a field can be autofilled by a code arriving in an SMS.
-
-To disable autofill, set `textContentType` to `none`.
-
-Possible values for `textContentType` are:
-
-- `none`
-- `addressCity`
-- `addressCityAndState`
-- `addressState`
-- `birthdate` (iOS 17+)
-- `birthdateDay` (iOS 17+)
-- `birthdateMonth` (iOS 17+)
-- `birthdateYear` (iOS 17+)
-- `countryName`
-- `creditCardExpiration` (iOS 17+)
-- `creditCardExpirationMonth` (iOS 17+)
-- `creditCardExpirationYear` (iOS 17+)
-- `creditCardFamilyName` (iOS 17+)
-- `creditCardGivenName` (iOS 17+)
-- `creditCardMiddleName` (iOS 17+)
-- `creditCardName` (iOS 17+)
-- `creditCardNumber`
-- `creditCardSecurityCode` (iOS 17+)
-- `creditCardType` (iOS 17+)
-- `emailAddress`
-- `familyName`
-- `fullStreetAddress`
-- `givenName`
-- `jobTitle`
-- `location`
-- `middleName`
-- `name`
-- `namePrefix`
-- `nameSuffix`
-- `newPassword`
-- `nickname`
-- `oneTimeCode`
-- `organizationName`
-- `password`
-- `postalCode`
-- `streetAddressLine1`
-- `streetAddressLine2`
-- `sublocality`
-- `telephoneNumber`
-- `URL`
-- `username`
-
-| Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| enum('none', 'addressCity', 'addressCityAndState', 'addressState', 'birthdate', 'birthdateDay', 'birthdateMonth', 'birthdateYear', 'countryName', 'creditCardExpiration', 'creditCardExpirationMonth', 'creditCardExpirationYear', 'creditCardFamilyName', 'creditCardGivenName', 'creditCardMiddleName', 'creditCardName', 'creditCardNumber', 'creditCardSecurityCode', 'creditCardType', 'emailAddress', 'familyName', 'fullStreetAddress', 'givenName', 'jobTitle', 'location', 'middleName', 'name', 'namePrefix', 'nameSuffix', 'newPassword', 'nickname', 'oneTimeCode', 'organizationName', 'password', 'postalCode', 'streetAddressLine1', 'streetAddressLine2', 'sublocality', 'telephoneNumber', 'URL', 'username') |
-
----
-
-### `passwordRules` <div className="label ios">iOS</div>
-
-When using `textContentType` as `newPassword` on iOS we can let the OS know the minimum requirements of the password so that it can generate one that will satisfy them. In order to create a valid string for `PasswordRules` take a look to the [Apple Docs](https://developer.apple.com/password-rules/).
-
-:::tip
-If passwords generation dialog doesn't appear please make sure that:
-
-- AutoFill is enabled: **Settings** → **Passwords & Accounts** → toggle "On" the **AutoFill Passwords**,
-- iCloud Keychain is used: **Settings** → **Apple ID** → **iCloud** → **Keychain** → toggle "On" the **iCloud Keychain**.
-  :::
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `style`
-
-Note that not all Text styles are supported, an incomplete list of what is not supported includes:
-
-- `borderLeftWidth`
-- `borderTopWidth`
-- `borderRightWidth`
-- `borderBottomWidth`
-- `borderTopLeftRadius`
-- `borderTopRightRadius`
-- `borderBottomRightRadius`
-- `borderBottomLeftRadius`
-
-[Styles](style.md)
-
-| Type                  |
-| --------------------- |
-| [Text](text.md#style) |
-
----
-
-### `textBreakStrategy` <div className="label android">Android</div>
-
-Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced` The default value is `highQuality`.
-
-| Type                                      |
-| ----------------------------------------- |
-| enum('simple', 'highQuality', 'balanced') |
-
----
-
-### `underlineColorAndroid` <div className="label android">Android</div>
-
-The color of the `TextInput` underline.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `value`
-
-The value to show for the text input. `TextInput` is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker.
-
-| Type   |
-| ------ |
-| string |
-
-## Methods
-
-### `.focus()`
-
-```tsx
-focus();
-```
-
-Makes the native input request focus.
-
-### `.blur()`
-
-```tsx
-blur();
-```
-
-Makes the native input lose focus.
-
-### `clear()`
-
-```tsx
-clear();
-```
-
-Removes all text from the `TextInput`.
-
----
-
-### `isFocused()`
-
-```tsx
-isFocused(): boolean;
-```
-
-Returns `true` if the input is currently focused; `false` otherwise.
-
-# Known issues
-
-- [react-native#19096](https://github.com/facebook/react-native/issues/19096): Doesn't support Android's `onKeyPreIme`.
-- [react-native#19366](https://github.com/facebook/react-native/issues/19366): Calling .focus() after closing Android's keyboard via back button doesn't bring keyboard up again.
-- [react-native#26799](https://github.com/facebook/react-native/issues/26799): Doesn't support Android's `secureTextEntry` when `keyboardType="email-address"` or `keyboardType="phone-pad"`.
+---
+id: textinput
+title: TextInput
+---
+
+A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.
+
+The most basic use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. A minimal example:
+
+```SnackPlayer name=TextInput%20Example
+import {useState} from 'react';
+import {StyleSheet, TextInput} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const TextInputExample = () => {
+  const [text, onChangeText] = useState('Useless Text');
+  const [number, onChangeNumber] = useState('');
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView>
+        <TextInput
+          style={styles.input}
+          onChangeText={onChangeText}
+          value={text}
+        />
+        <TextInput
+          style={styles.input}
+          onChangeText={onChangeNumber}
+          value={number}
+          placeholder="useless placeholder"
+          keyboardType="numeric"
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  input: {
+    height: 40,
+    margin: 12,
+    borderWidth: 1,
+    padding: 10,
+  },
+});
+
+export default TextInputExample;
+```
+
+Two methods exposed via the native element are `.focus()` and `.blur()` that will focus or blur the TextInput programmatically.
+
+Note that some props are only available with `multiline={true/false}`. Additionally, border styles that apply to only one side of the element (e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if `multiline=true`. To achieve the same effect, you can wrap your `TextInput` in a `View`:
+
+```SnackPlayer name=Multiline%20TextInput%20Example
+import {useState} from 'react';
+import {TextInput, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const MultilineTextInputExample = () => {
+  const [value, onChangeText] = useState('Useless Multiline Placeholder');
+
+  // If you type something in the text box that is a color,
+  // the background will change to that color.
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView
+        style={{
+          flex: 1,
+          backgroundColor: value.toLowerCase(),
+        }}>
+        <TextInput
+          editable
+          multiline
+          numberOfLines={4}
+          maxLength={40}
+          onChangeText={text => onChangeText(text)}
+          value={value}
+          style={styles.textInput}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  textInput: {
+    padding: 10,
+    borderColor: '#000',
+    borderWidth: 1,
+    margin: 12,
+  },
+});
+
+export default MultilineTextInputExample;
+```
+
+`TextInput` has a border at the bottom of its view by default. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this are to either not set height explicitly, in which case the system will take care of displaying the border in the correct position, or to not display the border by setting `underlineColorAndroid` to transparent.
+
+Note that on Android performing text selection in an input can change the app's activity `windowSoftInputMode` param to `adjustResize`. This may cause issues with components that have position: 'absolute' while the keyboard is active. To avoid this behavior either specify `windowSoftInputMode` in AndroidManifest.xml ( https://developer.android.com/guide/topics/manifest/activity-element.html ) or control this param programmatically with native code.
+
+---
+
+# Reference
+
+## Props
+
+### [View Props](view.md#props)
+
+Inherits [View Props](view.md#props).
+
+---
+
+### `allowFontScaling`
+
+Specifies whether fonts should scale to respect Text Size accessibility settings. The default is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `autoCapitalize`
+
+Tells `TextInput` to automatically capitalize certain characters. This property is not supported by some keyboard types such as `name-phone-pad`.
+
+- `characters`: all characters.
+- `words`: first letter of each word.
+- `sentences`: first letter of each sentence (_default_).
+- `none`: don't auto capitalize anything.
+
+| Type                                             |
+| ------------------------------------------------ |
+| enum('none', 'sentences', 'words', 'characters') |
+
+---
+
+### `autoComplete`
+
+Specifies autocomplete hints for the system, so it can provide autofill. On Android, the system will always attempt to offer autofill by using heuristics to identify the type of content. To disable autocomplete, set `autoComplete` to `off`.
+
+The following values work across platforms:
+
+- `additional-name`
+- `address-line1`
+- `address-line2`
+- `birthdate-day` (iOS 17+)
+- `birthdate-full` (iOS 17+)
+- `birthdate-month` (iOS 17+)
+- `birthdate-year` (iOS 17+)
+- `cc-csc` (iOS 17+)
+- `cc-exp` (iOS 17+)
+- `cc-exp-day` (iOS 17+)
+- `cc-exp-month` (iOS 17+)
+- `cc-exp-year` (iOS 17+)
+- `cc-number`
+- `country`
+- `current-password`
+- `email`
+- `family-name`
+- `given-name`
+- `honorific-prefix`
+- `honorific-suffix`
+- `name`
+- `new-password`
+- `off`
+- `one-time-code`
+- `postal-code`
+- `street-address`
+- `tel`
+- `username`
+
+<div className="label basic ios">iOS</div>
+
+The following values work on iOS only:
+
+- `cc-family-name` (iOS 17+)
+- `cc-given-name` (iOS 17+)
+- `cc-middle-name` (iOS 17+)
+- `cc-name` (iOS 17+)
+- `cc-type` (iOS 17+)
+- `nickname`
+- `organization`
+- `organization-title`
+- `url`
+
+<div className="label basic android">Android</div>
+
+The following values work on Android only:
+
+- `gender`
+- `name-family`
+- `name-given`
+- `name-middle`
+- `name-middle-initial`
+- `name-prefix`
+- `name-suffix`
+- `password`
+- `password-new`
+- `postal-address`
+- `postal-address-country`
+- `postal-address-extended`
+- `postal-address-extended-postal-code`
+- `postal-address-locality`
+- `postal-address-region`
+- `sms-otp`
+- `tel-country-code`
+- `tel-device`
+- `tel-national`
+- `username-new`
+
+| Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| enum('additional-name', 'address-line1', 'address-line2', 'birthdate-day', 'birthdate-full', 'birthdate-month', 'birthdate-year', 'cc-csc', 'cc-exp', 'cc-exp-day', 'cc-exp-month', 'cc-exp-year', 'cc-number', 'country', 'current-password', 'email', 'family-name', 'given-name', 'honorific-prefix', 'honorific-suffix', 'name', 'new-password', 'off', 'one-time-code', 'postal-code', 'street-address', 'tel', 'username', 'cc-family-name', 'cc-given-name', 'cc-middle-name', 'cc-name', 'cc-type', 'nickname', 'organization', 'organization-title', 'url', 'gender', 'name-family', 'name-given', 'name-middle', 'name-middle-initial', 'name-prefix', 'name-suffix', 'password', 'password-new', 'postal-address', 'postal-address-country', 'postal-address-extended', 'postal-address-extended-postal-code', 'postal-address-locality', 'postal-address-region', 'sms-otp', 'tel-country-code', 'tel-device', 'tel-national', 'username-new') |
+
+---
+
+### `autoCorrect`
+
+If `false`, disables auto-correct. The default value is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `autoFocus`
+
+If `true`, focuses the input. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### 🗑️ `blurOnSubmit`
+
+:::warning[Deprecated]
+Note that `submitBehavior` now takes the place of `blurOnSubmit` and will override any behavior defined by `blurOnSubmit`. See [submitBehavior](textinput#submitbehavior).
+:::
+
+If `true`, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting `blurOnSubmit` to `true` means that pressing return will blur the field and trigger the `onSubmitEditing` event instead of inserting a newline into the field.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `caretHidden`
+
+If `true`, caret is hidden. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `clearButtonMode` <div className="label ios">iOS</div>
+
+When the clear button should appear on the right side of the text view. This property is supported only for single-line TextInput component. The default value is `never`.
+
+| Type                                                       |
+| ---------------------------------------------------------- |
+| enum('never', 'while-editing', 'unless-editing', 'always') |
+
+---
+
+### `clearTextOnFocus` <div className="label ios">iOS</div>
+
+If `true`, clears the text field automatically when editing begins.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `contextMenuHidden`
+
+If `true`, context menu is hidden. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `dataDetectorTypes` <div className="label ios">iOS</div>
+
+Determines the types of data converted to clickable URLs in the text input. Only valid if `multiline={true}` and `editable={false}`. By default no data types are detected.
+
+You can provide one type or an array of many types.
+
+Possible values for `dataDetectorTypes` are:
+
+- `'phoneNumber'`
+- `'link'`
+- `'address'`
+- `'calendarEvent'`
+- `'none'`
+- `'all'`
+
+| Type                                                                                                                                                     |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), ,array of enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all') |
+
+---
+
+### `defaultValue`
+
+Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `disableKeyboardShortcuts` <div className="label ios">iOS</div>
+
+If `true`, the keyboard shortcuts (undo/redo and copy buttons) are disabled.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `cursorColor` <div className="label android">Android</div>
+
+When provided it will set the color of the cursor (or "caret") in the component. Unlike the behavior of `selectionColor` the cursor color will be set independently from the color of the text selection box.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `disableFullscreenUI` <div className="label android">Android</div>
+
+When `false`, if there is a small amount of space available around a text input (e.g. landscape orientation on a phone), the OS may choose to have the user edit the text inside of a full screen text input mode. When `true`, this feature is disabled and users will always edit the text directly inside of the text input. Defaults to `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `editable`
+
+If `false`, text is not editable. The default value is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `enablesReturnKeyAutomatically` <div className="label ios">iOS</div>
+
+If `true`, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `enterKeyHint`
+
+Determines what text should be shown to the return key. Has precedence over the `returnKeyType` prop.
+
+The following values work across platforms:
+
+- `done`
+- `next`
+- `search`
+- `send`
+- `go`
+
+_Android Only_
+
+The following values work on Android only:
+
+- `previous`
+
+_iOS Only_
+
+The following values work on iOS only:
+
+- `enter`
+
+| Type                                                              |
+| ----------------------------------------------------------------- |
+| enum('enter', 'done', 'next', 'previous', 'search', 'send', 'go') |
+
+---
+
+### `importantForAutofill` <div className="label android">Android</div>
+
+Tells the operating system whether the individual fields in your app should be included in a view structure for autofill purposes on Android API Level 26+. Possible values are `auto`, `no`, `noExcludeDescendants`, `yes`, and `yesExcludeDescendants`. The default value is `auto`.
+
+- `auto`: Let the Android System use its heuristics to determine if the view is important for autofill.
+- `no`: This view isn't important for autofill.
+- `noExcludeDescendants`: This view and its children aren't important for autofill.
+- `yes`: This view is important for autofill.
+- `yesExcludeDescendants`: This view is important for autofill, but its children aren't important for autofill.
+
+| Type                                                                       |
+| -------------------------------------------------------------------------- |
+| enum('auto', 'no', 'noExcludeDescendants', 'yes', 'yesExcludeDescendants') |
+
+---
+
+### `inlineImageLeft` <div className="label android">Android</div>
+
+If defined, the provided image resource will be rendered on the left. The image resource must be inside `/android/app/src/main/res/drawable` and referenced like
+
+```
+<TextInput
+ inlineImageLeft='search_icon'
+/>
+```
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `inlineImagePadding` <div className="label android">Android</div>
+
+Padding between the inline image, if any, and the text input itself.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `inputAccessoryViewID` <div className="label ios">iOS</div>
+
+An optional identifier which links a custom [InputAccessoryView](inputaccessoryview.md) to this text input. The InputAccessoryView is rendered above the keyboard when this text input is focused.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `inputAccessoryViewButtonLabel` <div className="label ios">iOS</div>
+
+An optional label that overrides the default [InputAccessoryView](inputaccessoryview.md) button label.
+
+By default, the default button label is not localized. Use this property to provide a localized version.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `inputMode`
+
+Works like the `inputmode` attribute in HTML, it determines which keyboard to open, e.g. `numeric` and has precedence over `keyboardType`.
+
+Support the following values:
+
+- `none`
+- `text`
+- `decimal`
+- `numeric`
+- `tel`
+- `search`
+- `email`
+- `url`
+
+| Type                                                                        |
+| --------------------------------------------------------------------------- |
+| enum('decimal', 'email', 'none', 'numeric', 'search', 'tel', 'text', 'url') |
+
+---
+
+### `keyboardAppearance` <div className="label ios">iOS</div>
+
+Determines the color of the keyboard.
+
+| Type                             |
+| -------------------------------- |
+| enum('default', 'light', 'dark') |
+
+---
+
+### `keyboardType`
+
+Determines which keyboard to open, e.g.`numeric`.
+
+See screenshots of all the types [here](https://davidl.fr/blog/keyboard-react-native-ios-android#all-react-native-keyboard-type-examples-i-os-on-the-left-android-on-the-right).
+
+The following values work across platforms:
+
+- `default`
+- `number-pad`
+- `decimal-pad`
+- `numeric`
+- `email-address`
+- `phone-pad`
+- `url`
+
+_iOS Only_
+
+The following values work on iOS only:
+
+- `ascii-capable`
+- `numbers-and-punctuation`
+- `name-phone-pad`
+- `twitter`
+- `web-search`
+
+_Android Only_
+
+The following values work on Android only:
+
+- `visible-password`
+
+| Type                                                                                                                                                                                                    |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', 'visible-password') |
+
+---
+
+### `lineBreakStrategyIOS` <div className="label ios">iOS</div>
+
+Set line break strategy on iOS 14+. Possible values are `none`, `standard`, `hangul-word` and `push-out`.
+
+| Type                                                        | Default  |
+| ----------------------------------------------------------- | -------- |
+| enum(`'none'`, `'standard'`, `'hangul-word'`, `'push-out'`) | `'none'` |
+
+---
+
+### `lineBreakModeIOS` <div className="label ios">iOS</div>
+
+Set line break mode on iOS. Possible values are `wordWrapping`, `char`, `clip`, `head`, `middle` and `tail`.
+
+| Type                                                                       | Default          |
+| -------------------------------------------------------------------------- | ---------------- |
+| enum(`'wordWrapping'`, `'char'`, `'clip'`, `'head'`, `'middle'`, `'tail'`) | `'wordWrapping'` |
+
+---
+
+### `maxFontSizeMultiplier`
+
+Specifies largest possible scale a font can reach when `allowFontScaling` is enabled. Possible values:
+
+- `null/undefined` (default): inherit from the parent node or the global default (0)
+- `0`: no max, ignore parent/global default
+- `>= 1`: sets the `maxFontSizeMultiplier` of this node to this value
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `maxLength`
+
+Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `multiline`
+
+If `true`, the text input can be multiple lines. The default value is `false`.
+
+:::note
+It is important to note that this aligns the text to the top on iOS, and centers it on Android. Use with `textAlignVertical` set to `top` for the same behavior in both platforms.
+:::
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `numberOfLines`
+
+:::note
+`numberOfLines` on iOS is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Sets the maximum number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `onBlur`
+
+Callback that is called when the text input is blurred.
+
+:::note
+If you are attempting to access the `text` value from `nativeEvent` keep in mind that the resulting value you get can be `undefined` which can cause unintended errors. If you are trying to find the last value of TextInput, you can use the [`onEndEditing`](textinput#onendediting) event, which is fired upon completion of editing.
+:::
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
+
+---
+
+### `onChange`
+
+Callback that is called when the text input's text changes.
+
+| Type                                                  |
+| ----------------------------------------------------- |
+| (`{nativeEvent: {eventCount, target, text}}`) => void |
+
+---
+
+### `onChangeText`
+
+Callback that is called when the text input's text changes. Changed text is passed as a single string argument to the callback handler.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onContentSizeChange`
+
+Callback that is called when the text input's content size changes.
+
+Only called for multiline text inputs.
+
+| Type                                                       |
+| ---------------------------------------------------------- |
+| (`{nativeEvent: {contentSize: {width, height} }}`) => void |
+
+---
+
+### `onEndEditing`
+
+Callback that is called when text input ends.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onPressIn`
+
+Callback that is called when a touch is engaged.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onPressOut`
+
+Callback that is called when a touch is released.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onFocus`
+
+Callback that is called when the text input is focused.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
+
+---
+
+### `onKeyPress`
+
+Callback that is called when a key is pressed. This will be called with object where `keyValue` is `'Enter'` or `'Backspace'` for respective keys and the typed-in character otherwise including `' '` for space. Fires before `onChange` callbacks. Note: on Android only the inputs from soft keyboard are handled, not the hardware keyboard inputs.
+
+| Type                                        |
+| ------------------------------------------- |
+| (`{nativeEvent: {key: keyValue} }`) => void |
+
+---
+
+### `onLayout`
+
+Invoked on mount and on layout changes.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
+
+---
+
+### `onScroll`
+
+Invoked on content scroll. May also contain other properties from `ScrollEvent` but on Android `contentSize` is not provided for performance reasons.
+
+| Type                                                |
+| --------------------------------------------------- |
+| (`{nativeEvent: {contentOffset: {x, y} }}`) => void |
+
+---
+
+### `onSelectionChange`
+
+Callback that is called when the text input selection is changed.
+
+| Type                                                  |
+| ----------------------------------------------------- |
+| (`{nativeEvent: {selection: {start, end} }}`) => void |
+
+---
+
+### `onSubmitEditing`
+
+Callback that is called when the text input's submit button is pressed.
+
+| Type                                                  |
+| ----------------------------------------------------- |
+| (`{nativeEvent: {text, eventCount, target}}`) => void |
+
+Note that on iOS this method isn't called when using `keyboardType="phone-pad"`.
+
+---
+
+### `placeholder`
+
+The string that will be rendered before text input has been entered.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `placeholderTextColor`
+
+The text color of the placeholder string.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `readOnly`
+
+If `true`, text is not editable. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `returnKeyLabel` <div className="label android">Android</div>
+
+Sets the return key to the label. Use it instead of `returnKeyType`.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `returnKeyType`
+
+Determines how the return key should look. On Android you can also use `returnKeyLabel`.
+
+_Cross platform_
+
+The following values work across platforms:
+
+- `done`
+- `go`
+- `next`
+- `search`
+- `send`
+
+_Android Only_
+
+The following values work on Android only:
+
+- `none`
+- `previous`
+
+_iOS Only_
+
+The following values work on iOS only:
+
+- `default`
+- `emergency-call`
+- `google`
+- `join`
+- `route`
+- `yahoo`
+
+| Type                                                                                                                              |
+| --------------------------------------------------------------------------------------------------------------------------------- |
+| enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo') |
+
+### `rejectResponderTermination` <div className="label ios">iOS</div>
+
+If `true`, allows TextInput to pass touch events to the parent component. This allows components such as SwipeableListView to be swipeable from the TextInput on iOS, as is the case on Android by default. If `false`, TextInput always asks to handle the input (except when disabled). The default value is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `rows` <div className="label android">Android</div>
+
+Sets the number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `scrollEnabled` <div className="label ios">iOS</div>
+
+If `false`, scrolling of the text view will be disabled. The default value is `true`. Only works with `multiline={true}`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `secureTextEntry`
+
+If `true`, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is `false`. Does not work with `multiline={true}`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `selection`
+
+The start and end of the text input's selection. Set start and end to the same value to position the cursor.
+
+| Type                                  |
+| ------------------------------------- |
+| object: `{start: number,end: number}` |
+
+---
+
+### `selectionColor`
+
+The highlight, selection handle and cursor color of the text input.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `selectionHandleColor` <div className="label android">Android</div>
+
+Sets the color of the selection handle. Unlike `selectionColor`, it allows the selection handle color to be customized independently of the selection's color.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `selectTextOnFocus`
+
+If `true`, all text will automatically be selected on focus.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `showSoftInputOnFocus`
+
+When `false`, it will prevent the soft keyboard from showing when the field is focused. The default value is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `smartInsertDelete` <div className="label ios">iOS</div>
+
+If `false`, the iOS system will not insert an extra space after a paste operation neither delete one or two spaces after a cut or delete operation.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `true`  |
+
+---
+
+### `spellCheck` <div className="label ios">iOS</div>
+
+If `false`, disables spell-check style (i.e. red underlines). The default value is inherited from `autoCorrect`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `submitBehavior`
+
+When the return key is pressed,
+
+For single line inputs:
+
+- `'newline'` defaults to `'blurAndSubmit'`
+- `undefined` defaults to `'blurAndSubmit'`
+
+For multiline inputs:
+
+- `'newline'` adds a newline
+- `undefined` defaults to `'newline'`
+
+For both single line and multiline inputs:
+
+- `'submit'` will only send a submit event and not blur the input
+- `'blurAndSubmit`' will both blur the input and send a submit event
+
+| Type                                       |
+| ------------------------------------------ |
+| enum('submit', 'blurAndSubmit', 'newline') |
+
+---
+
+### `textAlign`
+
+Align the input text to the left, center, or right sides of the input field.
+
+Possible values for `textAlign` are:
+
+- `left`
+- `center`
+- `right`
+
+| Type                            |
+| ------------------------------- |
+| enum('left', 'center', 'right') |
+
+---
+
+### `textContentType` <div className="label ios">iOS</div>
+
+Give the keyboard and the system information about the expected semantic meaning for the content that users enter.
+
+:::note
+[`autoComplete`](#autocomplete), provides the same functionality and is available for all platforms. You can use [`Platform.select`](/docs/next/platform#select) for differing platform behaviors.
+
+Avoid using both `textContentType` and `autoComplete`. For backwards compatibility, `textContentType` takes precedence when both properties are set.
+:::
+
+You can set `textContentType` to `username` or `password` to enable autofill of login details from the device keychain.
+
+`newPassword` can be used to indicate a new password input the user may want to save in the keychain, and `oneTimeCode` can be used to indicate that a field can be autofilled by a code arriving in an SMS.
+
+To disable autofill, set `textContentType` to `none`.
+
+Possible values for `textContentType` are:
+
+- `none`
+- `addressCity`
+- `addressCityAndState`
+- `addressState`
+- `birthdate` (iOS 17+)
+- `birthdateDay` (iOS 17+)
+- `birthdateMonth` (iOS 17+)
+- `birthdateYear` (iOS 17+)
+- `countryName`
+- `creditCardExpiration` (iOS 17+)
+- `creditCardExpirationMonth` (iOS 17+)
+- `creditCardExpirationYear` (iOS 17+)
+- `creditCardFamilyName` (iOS 17+)
+- `creditCardGivenName` (iOS 17+)
+- `creditCardMiddleName` (iOS 17+)
+- `creditCardName` (iOS 17+)
+- `creditCardNumber`
+- `creditCardSecurityCode` (iOS 17+)
+- `creditCardType` (iOS 17+)
+- `emailAddress`
+- `familyName`
+- `fullStreetAddress`
+- `givenName`
+- `jobTitle`
+- `location`
+- `middleName`
+- `name`
+- `namePrefix`
+- `nameSuffix`
+- `newPassword`
+- `nickname`
+- `oneTimeCode`
+- `organizationName`
+- `password`
+- `postalCode`
+- `streetAddressLine1`
+- `streetAddressLine2`
+- `sublocality`
+- `telephoneNumber`
+- `URL`
+- `username`
+
+| Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| enum('none', 'addressCity', 'addressCityAndState', 'addressState', 'birthdate', 'birthdateDay', 'birthdateMonth', 'birthdateYear', 'countryName', 'creditCardExpiration', 'creditCardExpirationMonth', 'creditCardExpirationYear', 'creditCardFamilyName', 'creditCardGivenName', 'creditCardMiddleName', 'creditCardName', 'creditCardNumber', 'creditCardSecurityCode', 'creditCardType', 'emailAddress', 'familyName', 'fullStreetAddress', 'givenName', 'jobTitle', 'location', 'middleName', 'name', 'namePrefix', 'nameSuffix', 'newPassword', 'nickname', 'oneTimeCode', 'organizationName', 'password', 'postalCode', 'streetAddressLine1', 'streetAddressLine2', 'sublocality', 'telephoneNumber', 'URL', 'username') |
+
+---
+
+### `passwordRules` <div className="label ios">iOS</div>
+
+When using `textContentType` as `newPassword` on iOS we can let the OS know the minimum requirements of the password so that it can generate one that will satisfy them. In order to create a valid string for `PasswordRules` take a look to the [Apple Docs](https://developer.apple.com/password-rules/).
+
+:::tip
+If passwords generation dialog doesn't appear please make sure that:
+
+- AutoFill is enabled: **Settings** → **Passwords & Accounts** → toggle "On" the **AutoFill Passwords**,
+- iCloud Keychain is used: **Settings** → **Apple ID** → **iCloud** → **Keychain** → toggle "On" the **iCloud Keychain**.
+  :::
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `style`
+
+Note that not all Text styles are supported, an incomplete list of what is not supported includes:
+
+- `borderLeftWidth`
+- `borderTopWidth`
+- `borderRightWidth`
+- `borderBottomWidth`
+- `borderTopLeftRadius`
+- `borderTopRightRadius`
+- `borderBottomRightRadius`
+- `borderBottomLeftRadius`
+
+[Styles](style.md)
+
+| Type                  |
+| --------------------- |
+| [Text](text.md#style) |
+
+---
+
+### `textBreakStrategy` <div className="label android">Android</div>
+
+Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced` The default value is `highQuality`.
+
+| Type                                      |
+| ----------------------------------------- |
+| enum('simple', 'highQuality', 'balanced') |
+
+---
+
+### `underlineColorAndroid` <div className="label android">Android</div>
+
+The color of the `TextInput` underline.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `value`
+
+The value to show for the text input. `TextInput` is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker.
+
+| Type   |
+| ------ |
+| string |
+
+## Methods
+
+### `.focus()`
+
+```tsx
+focus();
+```
+
+Makes the native input request focus.
+
+### `.blur()`
+
+```tsx
+blur();
+```
+
+Makes the native input lose focus.
+
+### `clear()`
+
+```tsx
+clear();
+```
+
+Removes all text from the `TextInput`.
+
+---
+
+### `isFocused()`
+
+```tsx
+isFocused(): boolean;
+```
+
+Returns `true` if the input is currently focused; `false` otherwise.
+
+# Known issues
+
+- [react-native#19096](https://github.com/facebook/react-native/issues/19096): Doesn't support Android's `onKeyPreIme`.
+- [react-native#19366](https://github.com/facebook/react-native/issues/19366): Calling .focus() after closing Android's keyboard via back button doesn't bring keyboard up again.
+- [react-native#26799](https://github.com/facebook/react-native/issues/26799): Doesn't support Android's `secureTextEntry` when `keyboardType="email-address"` or `keyboardType="phone-pad"`.
diff --git a/website/versioned_docs/version-0.83/the-new-architecture/custom-cxx-types.md b/website/versioned_docs/version-0.83/the-new-architecture/custom-cxx-types.md
index 94db3e21b3f..edc490b8070 100644
--- a/website/versioned_docs/version-0.83/the-new-architecture/custom-cxx-types.md
+++ b/website/versioned_docs/version-0.83/the-new-architecture/custom-cxx-types.md
@@ -173,8 +173,8 @@ First, we need to update the `App.tsx` file to use the new method from the Turbo
 
 ```diff title="App.tsx"
 // ...
-+ const [cubicSource, setCubicSource] = React.useState('')
-+ const [cubicRoot, setCubicRoot] = React.useState(0)
++ const [cubicSource, setCubicSource] = useState('')
++ const [cubicRoot, setCubicRoot] = useState(0)
   return (
     <SafeAreaView style={styles.container}>
       <View>
@@ -366,9 +366,9 @@ To test the code in the app, we have to modify the `App.tsx` file.
 2. Replace the body of the `App()` function with the following code:
 
 ```tsx title="App.tsx (App function body replacement)"
-const [street, setStreet] = React.useState('');
-const [num, setNum] = React.useState('');
-const [isValidAddress, setIsValidAddress] = React.useState<
+const [street, setStreet] = useState('');
+const [num, setNum] = useState('');
+const [isValidAddress, setIsValidAddress] = useState<
   boolean | null
 >(null);
 
diff --git a/website/versioned_docs/version-0.83/the-new-architecture/direct-manipulation.md b/website/versioned_docs/version-0.83/the-new-architecture/direct-manipulation.md
index 6708a643cba..6035b6a64b7 100644
--- a/website/versioned_docs/version-0.83/the-new-architecture/direct-manipulation.md
+++ b/website/versioned_docs/version-0.83/the-new-architecture/direct-manipulation.md
@@ -26,7 +26,6 @@ For example, the following code demonstrates editing the input when you tap a bu
 <TabItem value="javascript">
 
 ```SnackPlayer name=setNativeProps%20on%20TextInput&ext=js
-import React from 'react';
 import {useCallback, useRef} from 'react';
 import {
   StyleSheet,
@@ -74,7 +73,6 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Clear%20text&ext=tsx
-import React from 'react';
 import {useCallback, useRef} from 'react';
 import {
   StyleSheet,
diff --git a/website/versioned_docs/version-0.83/the-new-architecture/fabric-component-native-commands.md b/website/versioned_docs/version-0.83/the-new-architecture/fabric-component-native-commands.md
index ca87360ba3a..5cb5dbd6710 100644
--- a/website/versioned_docs/version-0.83/the-new-architecture/fabric-component-native-commands.md
+++ b/website/versioned_docs/version-0.83/the-new-architecture/fabric-component-native-commands.md
@@ -107,7 +107,6 @@ Now you can use the command in the the app.
 Open the `App.tsx` file and modify it as it follows:
 
 ```diff title="App.tsx"
-import React from 'react';
 -import {Alert, StyleSheet, View} from 'react-native';
 -import WebView from '../specs/WebViewNativeComponent';
 +import {Alert, StyleSheet, Pressable, Text, View} from 'react-native';
@@ -186,7 +185,6 @@ export default App;
 Open the `App.tsx` file and modify it as it follows:
 
 ```diff title="App.jsx"
-import React from 'react';
 -import {Alert, StyleSheet, View} from 'react-native';
 -import WebView from '../specs/WebViewNativeComponent';
 +import {Alert, StyleSheet, Pressable, Text, View} from 'react-native';
diff --git a/website/versioned_docs/version-0.83/the-new-architecture/layout-measurements.md b/website/versioned_docs/version-0.83/the-new-architecture/layout-measurements.md
index cc693a99b0c..715cd42aee7 100644
--- a/website/versioned_docs/version-0.83/the-new-architecture/layout-measurements.md
+++ b/website/versioned_docs/version-0.83/the-new-architecture/layout-measurements.md
@@ -10,7 +10,7 @@ Typical code will look like this:
 
 ```tsx
 function AComponent(children) {
-  const targetRef = React.useRef(null)
+  const targetRef = useRef(null)
 
   useLayoutEffect(() => {
     targetRef.current?.measure((x, y, width, height, pageX, pageY) => {
diff --git a/website/versioned_docs/version-0.83/the-new-architecture/native-modules-custom-events.md b/website/versioned_docs/version-0.83/the-new-architecture/native-modules-custom-events.md
index 0af5bb95957..c44bbf93c16 100644
--- a/website/versioned_docs/version-0.83/the-new-architecture/native-modules-custom-events.md
+++ b/website/versioned_docs/version-0.83/the-new-architecture/native-modules-custom-events.md
@@ -134,7 +134,6 @@ Now, it's time to update the code of the App to handle the new event.
 Open the `App.tsx` file and modify it as it follows:
 
 ```diff title="App.tsx"
-import React from 'react';
 import {
 + Alert,
 + EventSubscription,
diff --git a/website/versioned_docs/version-0.83/the-new-architecture/pure-cxx-modules.md b/website/versioned_docs/version-0.83/the-new-architecture/pure-cxx-modules.md
index b7c08196290..72d03933695 100644
--- a/website/versioned_docs/version-0.83/the-new-architecture/pure-cxx-modules.md
+++ b/website/versioned_docs/version-0.83/the-new-architecture/pure-cxx-modules.md
@@ -1,503 +1,503 @@
-import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameForCurrentVersion';
-import {getCurrentVersion} from '@site/src/getCurrentVersion';
-import CodeBlock from '@theme/CodeBlock';
-
-# Cross-Platform Native Modules (C++)
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-Writing a module in C++ is the best way to share platform-agnostic code between Android and iOS. With pure C++ modules, you can write your logic only once and reuse it right away from all the platforms, without the need of writing platform-specific code.
-
-In this guide, we will go through the creation of a pure C++ Turbo Native Module:
-
-1. Create the JS specs
-2. Configure Codegen to generate the scaffolding
-3. Implement the Native logic
-4. Register the module in the Android and iOS application
-5. Test your changes in JS
-
-The rest of this guide assumes that you have created your application running the command:
-
-<CodeBlock language="bash" title="shell">
-{`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`}
-</CodeBlock>
-
-## 1. Create the JS specs
-
-Pure C++ Turbo Native Modules are Turbo Native Modules. They need a specification file (also called spec file) so that Codegen can create the scaffolding code for us. The specification file is also what we use to access the Turbo Native Module in JS.
-
-Spec files need to be written in a typed JS dialect. React Native currently supports Flow or TypeScript.
-
-1. Inside the root folder of your app, create a new folder called `specs`.
-2. Create a new file called `NativeSampleModule.ts` with the following code:
-
-:::warning
-All Native Turbo Module spec files must have the prefix `Native`, otherwise Codegen will ignore them.
-:::
-
-<Tabs groupId="tnm-specs" queryString defaultValue={constants.defaultJavaScriptSpecLanguages} values={constants.javaScriptSpecLanguages}>
-<TabItem value="flow">
-
-```ts title="specs/NativeSampleModule.ts"
-// @flow
-import type {TurboModule} from 'react-native'
-import { TurboModuleRegistry } from "react-native";
-
-export interface Spec extends TurboModule {
-  +reverseString: (input: string) => string;
-}
-
-export default (TurboModuleRegistry.getEnforcing<Spec>(
-  "NativeSampleModule"
-): Spec);
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```ts title="specs/NativeSampleModule.ts"
-import {TurboModule, TurboModuleRegistry} from 'react-native';
-
-export interface Spec extends TurboModule {
-  readonly reverseString: (input: string) => string;
-}
-
-export default TurboModuleRegistry.getEnforcing<Spec>(
-  'NativeSampleModule',
-);
-```
-
-</TabItem>
-</Tabs>
-
-## 2. Configure Codegen
-
-The next step is to configure [Codegen](what-is-codegen.mdx) in your `package.json`. Update the file to include:
-
-```json title="package.json"
-     "start": "react-native start",
-     "test": "jest"
-   },
-   // highlight-add-start
-   "codegenConfig": {
-     "name": "AppSpecs",
-     "type": "modules",
-     "jsSrcsDir": "specs",
-     "android": {
-       "javaPackageName": "com.sampleapp.specs"
-     }
-   },
-   // highlight-add-end
-   "dependencies": {
-```
-
-This configuration tells Codegen to look for spec files in the `specs` folder. It also instructs Codegen to only generate code for `modules` and to namespace the generated code as `AppSpecs`.
-
-## 3. Write the Native Code
-
-Writing a C++ Turbo Native Module allows you to share the code between Android and iOS. Therefore we will be writing the code once, and we will look into what changes we need to apply to the platforms so that the C++ code can be picked up.
-
-1. Create a folder named `shared` at the same level as the `android` and `ios` folders.
-2. Inside the `shared` folder, create a new file called `NativeSampleModule.h`.
-
-   ```cpp title="shared/NativeSampleModule.h"
-   #pragma once
-
-   #include <AppSpecsJSI.h>
-
-   #include <memory>
-   #include <string>
-
-   namespace facebook::react {
-
-   class NativeSampleModule : public NativeSampleModuleCxxSpec<NativeSampleModule> {
-   public:
-     NativeSampleModule(std::shared_ptr<CallInvoker> jsInvoker);
-
-     std::string reverseString(jsi::Runtime& rt, std::string input);
-   };
-
-   } // namespace facebook::react
-
-   ```
-
-3. Inside the `shared` folder, create a new file called `NativeSampleModule.cpp`.
-
-   ```cpp title="shared/NativeSampleModule.cpp"
-   #include "NativeSampleModule.h"
-
-   namespace facebook::react {
-
-   NativeSampleModule::NativeSampleModule(std::shared_ptr<CallInvoker> jsInvoker)
-       : NativeSampleModuleCxxSpec(std::move(jsInvoker)) {}
-
-   std::string NativeSampleModule::reverseString(jsi::Runtime& rt, std::string input) {
-     return std::string(input.rbegin(), input.rend());
-   }
-
-   } // namespace facebook::react
-   ```
-
-Let's have a look at the two files we created:
-
-- The `NativeSampleModule.h` file is the header file for a Pure C++ TurboModule. The `include` statements make sure that we include the specs that will be created by Codegen and that contains the interface and the base class we need to implement.
-- The module lives in the `facebook::react` namespace to have access to all the types that live in that namespace.
-- The class `NativeSampleModule` is the actual Turbo Native Module class and it extends the `NativeSampleModuleCxxSpec` class which contains some glue code and boilerplate code to let this class behave as a Turbo Native Module.
-- Finally, we have the constructor, that accepts a pointer to the `CallInvoker`, to communicate with JS if needed and the function's prototype we have to implement.
-
-The `NativeSampleModule.cpp` file is the actual implementation of our Turbo Native Module and implements the constructor and the method that we declared in the specs.
-
-## 4. Register the Module in the platform
-
-The next steps will let us register the module in the platform. This is the step that exposes the native code to JS so that the React Native application can finally call the native methods from the JS layer.
-
-This is the only time when we will have to write some platform-specific code.
-
-### Android
-
-To make sure that the Android app can effectively build the C++ Turbo Native Module, we need to:
-
-1. Create a `CMakeLists.txt` to access our C++ code.
-2. Modify `build.gradle` to point to the newly created `CMakeLists.txt` file.
-3. Create an `OnLoad.cpp` file in our Android app to register the new Turbo Native Module.
-
-#### 1. Create the `CMakeLists.txt` file
-
-Android uses CMake to build. CMake needs to access the files we defined in our shared folder to be able to build them.
-
-1. Create a new folder `SampleApp/android/app/src/main/jni`. The `jni` folder is where the C++ side of Android lives.
-2. Create a `CMakeLists.txt` file and add this context:
-
-```shell title="CMakeLists.txt"
-cmake_minimum_required(VERSION 3.13)
-
-# Define the library name here.
-project(appmodules)
-
-# This file includes all the necessary to let you build your React Native application
-include(${REACT_ANDROID_DIR}/cmake-utils/ReactNative-application.cmake)
-
-# Define where the additional source code lives. We need to crawl back the jni, main, src, app, android folders
-target_sources(${CMAKE_PROJECT_NAME} PRIVATE ../../../../../shared/NativeSampleModule.cpp)
-
-# Define where CMake can find the additional header files. We need to crawl back the jni, main, src, app, android folders
-target_include_directories(${CMAKE_PROJECT_NAME} PUBLIC ../../../../../shared)
-```
-
-The CMake file does the following things:
-
-- Defines the `appmodules` library, where all the app C++ code will be included.
-- Loads the base React Native's CMake file.
-- Adds the Module C++ source code that we need to build with the `target_sources` directives. By default React Native will already populate the `appmodules` library with default sources, here we include our custom one. You can see that we need to crawl back from the `jni` folder to the `shared` folder where our C++ Turbo Module lives.
-- Specifies where CMake can find the module header files. Also in this case we need to crawl back from the `jni` folder.
-
-#### 2. Modify `build.gradle` to include the custom C++ code
-
-Gradle is the tool that orchestrates the Android build. We need to tell it where it can find the `CMake` files to build the Turbo Native Module.
-
-1. Open the `SampleApp/android/app/build.gradle` file.
-2. Add the following block into the Gradle file, within the existing `android` block:
-
-```diff title="android/app/build.gradle"
-    buildTypes {
-        debug {
-            signingConfig signingConfigs.debug
-        }
-        release {
-            // Caution! In production, you need to generate your own keystore file.
-            // see https://reactnative.dev/docs/signed-apk-android.
-            signingConfig signingConfigs.debug
-            minifyEnabled enableProguardInReleaseBuilds
-            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
-        }
-    }
-
-+   externalNativeBuild {
-+       cmake {
-+           path "src/main/jni/CMakeLists.txt"
-+       }
-+   }
-}
-```
-
-This block tells the Gradle file where to look for the CMake file. The path is relative to the folder where the `build.gradle` file lives, so we need to add the path to the `CMakeLists.txt` files in the `jni` folder.
-
-#### 3. Register the new Turbo Native Module
-
-The final step is to register the new C++ Turbo Native Module in the runtime, so that when JS requires the C++ Turbo Native Module, the app knows where to find it and can return it.
-
-1. From the folder `SampleApp/android/app/src/main/jni`, run the following command:
-
-<CodeBlock language="sh" title="shell">
-{`curl -O https://raw.githubusercontent.com/facebook/react-native/${getCoreBranchNameForCurrentVersion()}/packages/react-native/ReactAndroid/cmake-utils/default-app-setup/OnLoad.cpp`}
-</CodeBlock>
-
-2. Then, modify this file as follows:
-
-```diff title="android/app/src/main/jni/OnLoad.cpp"
-#include <DefaultComponentsRegistry.h>
-#include <DefaultTurboModuleManagerDelegate.h>
-#include <autolinking.h>
-#include <fbjni/fbjni.h>
-#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
-#include <rncore.h>
-
-+ // Include the NativeSampleModule header
-+ #include <NativeSampleModule.h>
-
-//...
-
-std::shared_ptr<TurboModule> cxxModuleProvider(
-    const std::string& name,
-    const std::shared_ptr<CallInvoker>& jsInvoker) {
-  // Here you can provide your CXX Turbo Modules coming from
-  // either your application or from external libraries. The approach to follow
-  // is similar to the following (for a module called `NativeCxxModuleExample`):
-  //
-  // if (name == NativeCxxModuleExample::kModuleName) {
-  //   return std::make_shared<NativeCxxModuleExample>(jsInvoker);
-  // }
-
-+  // This code registers the module so that when the JS side asks for it, the app can return it
-+  if (name == NativeSampleModule::kModuleName) {
-+    return std::make_shared<NativeSampleModule>(jsInvoker);
-+  }
-
-  // And we fallback to the CXX module providers autolinked
-  return autolinking_cxxModuleProvider(name, jsInvoker);
-}
-
-// leave the rest of the file
-```
-
-These steps download the original `OnLoad.cpp` file from React Native, so that we can safely override it to load the C++ Turbo Native Module in the app.
-
-Once we downloaded the file, we can modify it by:
-
-- Including the header file that points to our module
-- Registering the Turbo Native Module so that when JS requires it, the app can return it.
-
-Now, you can run `yarn android` from the project root to see your app building successfully.
-
-### iOS
-
-To make sure that the iOS app can effectively build the C++ Turbo Native Module, we need to:
-
-1. Install pods and run Codegen.
-2. Add the `shared` folder to our iOS project.
-3. Register the C++ Turbo Native Module in the application.
-
-#### 1. Install Pods and Run Codegen.
-
-The first step we need to run is the usual steps we run every time we have to prepare our iOS application. CocoaPods is the tool we use to setup and install React Native dependencies and, as part of the process, it will also run Codegen for us.
-
-```bash
-cd ios
-bundle install
-bundle exec pod install
-```
-
-#### 2. Add the shared folder to the iOS project
-
-This step adds the `shared` folder to the project to make it visible to Xcode.
-
-1. Open the CocoaPods generated Xcode Workspace.
-
-```bash
-cd ios
-open SampleApp.xcworkspace
-```
-
-2. Click on the `SampleApp` project on the left and select `Add files to "Sample App"...`.
-
-![Add Files to Sample App...](/docs/assets/AddFilesToXcode1.png)
-
-3. Select the `shared` folder and click on `Add`.
-
-![Add Files to Sample App...](/docs/assets/AddFilesToXcode2.png)
-
-If you did everything right, your project on the left should look like this:
-
-![Xcode Project](/docs/assets/CxxTMGuideXcodeProject.png)
-
-#### 3. Registering the Cxx Turbo Native Module in your app
-
-To register a pure Cxx Turbo Native Module in your app, you need to:
-
-1. Create a `ModuleProvider` for the Native Module
-2. Configure the `package.json` to associate the JS module name with the ModuleProvider class.
-
-The ModuleProvider is an Objective-C++ that glues together the Pure C++ module with the rest of your iOS App.
-
-##### 3.1 Create the ModuleProvider
-
-1. From Xcode, select the `SampleApp` project and press <kbd>⌘</kbd> + <kbd>N</kbd> to create a new file.
-2. Select the `Cocoa Touch Class` template
-3. Add the name `NativeSampleModuleProvider` (keep the other field as `Subclass of: NSObject` and `Language: Objective-C`)
-4. Click Next to generate the files.
-5. Rename the `NativeSampleModuleProvider.m` to `NativeSampleModuleProvider.mm`. The `mm` extension denotes an Objective-C++ file.
-6. Implement the content of the `NativeSampleModuleProvider.h` with the following:
-
-```objc title="NativeSampleModuleProvider.h"
-
-#import <Foundation/Foundation.h>
-#import <ReactCommon/RCTTurboModule.h>
-
-NS_ASSUME_NONNULL_BEGIN
-
-@interface NativeSampleModuleProvider : NSObject <RCTModuleProvider>
-
-@end
-
-NS_ASSUME_NONNULL_END
-```
-
-This declares a `NativeSampleModuleProvider` object that conforms to the `RCTModuleProvider` protocol.
-
-7. Implement the content of the `NativeSampleModuleProvider.mm` with the following:
-
-```objc title="NativeSampleModuleProvider.mm"
-
-#import "NativeSampleModuleProvider.h"
-#import <ReactCommon/CallInvoker.h>
-#import <ReactCommon/TurboModule.h>
-#import "NativeSampleModule.h"
-
-@implementation NativeSampleModuleProvider
-
-- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
-    (const facebook::react::ObjCTurboModule::InitParams &)params
-{
-  return std::make_shared<facebook::react::NativeSampleModule>(params.jsInvoker);
-}
-
-@end
-```
-
-This code implements the `RCTModuleProvider` protocol by creating the pure C++ `NativeSampleModule` when the `getTurboModule:` method is called.
-
-##### 3.2 Update the package.json
-
-The last step consists in updating the `package.json` to tell React Native about the link between the JS specs of the Native Module and the concrete implementation of those spec in native code.
-
-Modify the `package.json` as it follows:
-
-```json title="package.json"
-     "start": "react-native start",
-     "test": "jest"
-   },
-   "codegenConfig": {
-     "name": "AppSpecs",
-     "type": "modules",
-     "jsSrcsDir": "specs",
-     "android": {
-       "javaPackageName": "com.sampleapp.specs"
-     // highlight-add-start
-     },
-     "ios": {
-        "modulesProvider": {
-          "NativeSampleModule":  "NativeSampleModuleProvider"
-        }
-     }
-     // highlight-add-end
-   },
-
-   "dependencies": {
-```
-
-At this point, you need to re-install the pods to make sure that codegen runs again to generate the new files:
-
-```bash
-# from the ios folder
-bundle exec pod install
-open SampleApp.xcworkspace
-```
-
-If you now build your application from Xcode, you should be able to build successfully.
-
-## 5. Testing your Code
-
-It's now time to access our C++ Turbo Native Module from JS. To do so, we have to modify the `App.tsx` file to import the Turbo Native Module and to call it in our code.
-
-1. Open the `App.tsx` file.
-2. Replace the content of the template with the following code:
-
-```tsx title="App.tsx"
-import React from 'react';
-import {
-  Button,
-  SafeAreaView,
-  StyleSheet,
-  Text,
-  TextInput,
-  View,
-} from 'react-native';
-import SampleTurboModule from './specs/NativeSampleModule';
-
-function App(): React.JSX.Element {
-  const [value, setValue] = React.useState('');
-  const [reversedValue, setReversedValue] = React.useState('');
-
-  const onPress = () => {
-    const revString = SampleTurboModule.reverseString(value);
-    setReversedValue(revString);
-  };
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <View>
-        <Text style={styles.title}>
-          Welcome to C++ Turbo Native Module Example
-        </Text>
-        <Text>Write down here the text you want to reverse</Text>
-        <TextInput
-          style={styles.textInput}
-          placeholder="Write your text here"
-          onChangeText={setValue}
-          value={value}
-        />
-        <Button title="Reverse" onPress={onPress} />
-        <Text>Reversed text: {reversedValue}</Text>
-      </View>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  title: {
-    fontSize: 18,
-    marginBottom: 20,
-  },
-  textInput: {
-    borderColor: 'black',
-    borderWidth: 1,
-    borderRadius: 5,
-    padding: 10,
-    marginTop: 10,
-  },
-});
-
-export default App;
-```
-
-The interesting lines in this app are:
-
-- `import SampleTurboModule from './specs/NativeSampleModule';`: this line imports the Turbo Native Module in the app,
-- `const revString = SampleTurboModule.reverseString(value);` in the `onPress` callback: this is how you can use the Turbo Native Module in your app.
-
-:::warning
-For the sake of this example and to keep it as short as possible, we directly imported the spec file in our app.
-The best practice in this case is to create a separate file to wrap the specs and use that file into your application.
-This allows you to prepare the input for the specs and gives you more control over them in JS.
-:::
-
-Congratulations, you wrote your first C++ Turbo Native Module!
-
-| <center>Android</center>                                                                             | <center>iOS</center>                                                                          |
-| ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
-| <center><img src="/docs/assets/CxxGuideAndroidVideo.gif" alt="Android Video" height="600"/></center> | <center><img src="/docs/assets/CxxGuideIOSVideo.gif" alt="iOS video" height="600" /></center> |
+import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameForCurrentVersion';
+import {getCurrentVersion} from '@site/src/getCurrentVersion';
+import CodeBlock from '@theme/CodeBlock';
+
+# Cross-Platform Native Modules (C++)
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+Writing a module in C++ is the best way to share platform-agnostic code between Android and iOS. With pure C++ modules, you can write your logic only once and reuse it right away from all the platforms, without the need of writing platform-specific code.
+
+In this guide, we will go through the creation of a pure C++ Turbo Native Module:
+
+1. Create the JS specs
+2. Configure Codegen to generate the scaffolding
+3. Implement the Native logic
+4. Register the module in the Android and iOS application
+5. Test your changes in JS
+
+The rest of this guide assumes that you have created your application running the command:
+
+<CodeBlock language="bash" title="shell">
+{`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`}
+</CodeBlock>
+
+## 1. Create the JS specs
+
+Pure C++ Turbo Native Modules are Turbo Native Modules. They need a specification file (also called spec file) so that Codegen can create the scaffolding code for us. The specification file is also what we use to access the Turbo Native Module in JS.
+
+Spec files need to be written in a typed JS dialect. React Native currently supports Flow or TypeScript.
+
+1. Inside the root folder of your app, create a new folder called `specs`.
+2. Create a new file called `NativeSampleModule.ts` with the following code:
+
+:::warning
+All Native Turbo Module spec files must have the prefix `Native`, otherwise Codegen will ignore them.
+:::
+
+<Tabs groupId="tnm-specs" queryString defaultValue={constants.defaultJavaScriptSpecLanguages} values={constants.javaScriptSpecLanguages}>
+<TabItem value="flow">
+
+```ts title="specs/NativeSampleModule.ts"
+// @flow
+import type {TurboModule} from 'react-native'
+import { TurboModuleRegistry } from "react-native";
+
+export interface Spec extends TurboModule {
+  +reverseString: (input: string) => string;
+}
+
+export default (TurboModuleRegistry.getEnforcing<Spec>(
+  "NativeSampleModule"
+): Spec);
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```ts title="specs/NativeSampleModule.ts"
+import {TurboModule, TurboModuleRegistry} from 'react-native';
+
+export interface Spec extends TurboModule {
+  readonly reverseString: (input: string) => string;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>(
+  'NativeSampleModule',
+);
+```
+
+</TabItem>
+</Tabs>
+
+## 2. Configure Codegen
+
+The next step is to configure [Codegen](what-is-codegen.mdx) in your `package.json`. Update the file to include:
+
+```json title="package.json"
+     "start": "react-native start",
+     "test": "jest"
+   },
+   // highlight-add-start
+   "codegenConfig": {
+     "name": "AppSpecs",
+     "type": "modules",
+     "jsSrcsDir": "specs",
+     "android": {
+       "javaPackageName": "com.sampleapp.specs"
+     }
+   },
+   // highlight-add-end
+   "dependencies": {
+```
+
+This configuration tells Codegen to look for spec files in the `specs` folder. It also instructs Codegen to only generate code for `modules` and to namespace the generated code as `AppSpecs`.
+
+## 3. Write the Native Code
+
+Writing a C++ Turbo Native Module allows you to share the code between Android and iOS. Therefore we will be writing the code once, and we will look into what changes we need to apply to the platforms so that the C++ code can be picked up.
+
+1. Create a folder named `shared` at the same level as the `android` and `ios` folders.
+2. Inside the `shared` folder, create a new file called `NativeSampleModule.h`.
+
+   ```cpp title="shared/NativeSampleModule.h"
+   #pragma once
+
+   #include <AppSpecsJSI.h>
+
+   #include <memory>
+   #include <string>
+
+   namespace facebook::react {
+
+   class NativeSampleModule : public NativeSampleModuleCxxSpec<NativeSampleModule> {
+   public:
+     NativeSampleModule(std::shared_ptr<CallInvoker> jsInvoker);
+
+     std::string reverseString(jsi::Runtime& rt, std::string input);
+   };
+
+   } // namespace facebook::react
+
+   ```
+
+3. Inside the `shared` folder, create a new file called `NativeSampleModule.cpp`.
+
+   ```cpp title="shared/NativeSampleModule.cpp"
+   #include "NativeSampleModule.h"
+
+   namespace facebook::react {
+
+   NativeSampleModule::NativeSampleModule(std::shared_ptr<CallInvoker> jsInvoker)
+       : NativeSampleModuleCxxSpec(std::move(jsInvoker)) {}
+
+   std::string NativeSampleModule::reverseString(jsi::Runtime& rt, std::string input) {
+     return std::string(input.rbegin(), input.rend());
+   }
+
+   } // namespace facebook::react
+   ```
+
+Let's have a look at the two files we created:
+
+- The `NativeSampleModule.h` file is the header file for a Pure C++ TurboModule. The `include` statements make sure that we include the specs that will be created by Codegen and that contains the interface and the base class we need to implement.
+- The module lives in the `facebook::react` namespace to have access to all the types that live in that namespace.
+- The class `NativeSampleModule` is the actual Turbo Native Module class and it extends the `NativeSampleModuleCxxSpec` class which contains some glue code and boilerplate code to let this class behave as a Turbo Native Module.
+- Finally, we have the constructor, that accepts a pointer to the `CallInvoker`, to communicate with JS if needed and the function's prototype we have to implement.
+
+The `NativeSampleModule.cpp` file is the actual implementation of our Turbo Native Module and implements the constructor and the method that we declared in the specs.
+
+## 4. Register the Module in the platform
+
+The next steps will let us register the module in the platform. This is the step that exposes the native code to JS so that the React Native application can finally call the native methods from the JS layer.
+
+This is the only time when we will have to write some platform-specific code.
+
+### Android
+
+To make sure that the Android app can effectively build the C++ Turbo Native Module, we need to:
+
+1. Create a `CMakeLists.txt` to access our C++ code.
+2. Modify `build.gradle` to point to the newly created `CMakeLists.txt` file.
+3. Create an `OnLoad.cpp` file in our Android app to register the new Turbo Native Module.
+
+#### 1. Create the `CMakeLists.txt` file
+
+Android uses CMake to build. CMake needs to access the files we defined in our shared folder to be able to build them.
+
+1. Create a new folder `SampleApp/android/app/src/main/jni`. The `jni` folder is where the C++ side of Android lives.
+2. Create a `CMakeLists.txt` file and add this context:
+
+```shell title="CMakeLists.txt"
+cmake_minimum_required(VERSION 3.13)
+
+# Define the library name here.
+project(appmodules)
+
+# This file includes all the necessary to let you build your React Native application
+include(${REACT_ANDROID_DIR}/cmake-utils/ReactNative-application.cmake)
+
+# Define where the additional source code lives. We need to crawl back the jni, main, src, app, android folders
+target_sources(${CMAKE_PROJECT_NAME} PRIVATE ../../../../../shared/NativeSampleModule.cpp)
+
+# Define where CMake can find the additional header files. We need to crawl back the jni, main, src, app, android folders
+target_include_directories(${CMAKE_PROJECT_NAME} PUBLIC ../../../../../shared)
+```
+
+The CMake file does the following things:
+
+- Defines the `appmodules` library, where all the app C++ code will be included.
+- Loads the base React Native's CMake file.
+- Adds the Module C++ source code that we need to build with the `target_sources` directives. By default React Native will already populate the `appmodules` library with default sources, here we include our custom one. You can see that we need to crawl back from the `jni` folder to the `shared` folder where our C++ Turbo Module lives.
+- Specifies where CMake can find the module header files. Also in this case we need to crawl back from the `jni` folder.
+
+#### 2. Modify `build.gradle` to include the custom C++ code
+
+Gradle is the tool that orchestrates the Android build. We need to tell it where it can find the `CMake` files to build the Turbo Native Module.
+
+1. Open the `SampleApp/android/app/build.gradle` file.
+2. Add the following block into the Gradle file, within the existing `android` block:
+
+```diff title="android/app/build.gradle"
+    buildTypes {
+        debug {
+            signingConfig signingConfigs.debug
+        }
+        release {
+            // Caution! In production, you need to generate your own keystore file.
+            // see https://reactnative.dev/docs/signed-apk-android.
+            signingConfig signingConfigs.debug
+            minifyEnabled enableProguardInReleaseBuilds
+            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+        }
+    }
+
++   externalNativeBuild {
++       cmake {
++           path "src/main/jni/CMakeLists.txt"
++       }
++   }
+}
+```
+
+This block tells the Gradle file where to look for the CMake file. The path is relative to the folder where the `build.gradle` file lives, so we need to add the path to the `CMakeLists.txt` files in the `jni` folder.
+
+#### 3. Register the new Turbo Native Module
+
+The final step is to register the new C++ Turbo Native Module in the runtime, so that when JS requires the C++ Turbo Native Module, the app knows where to find it and can return it.
+
+1. From the folder `SampleApp/android/app/src/main/jni`, run the following command:
+
+<CodeBlock language="sh" title="shell">
+{`curl -O https://raw.githubusercontent.com/facebook/react-native/${getCoreBranchNameForCurrentVersion()}/packages/react-native/ReactAndroid/cmake-utils/default-app-setup/OnLoad.cpp`}
+</CodeBlock>
+
+2. Then, modify this file as follows:
+
+```diff title="android/app/src/main/jni/OnLoad.cpp"
+#include <DefaultComponentsRegistry.h>
+#include <DefaultTurboModuleManagerDelegate.h>
+#include <autolinking.h>
+#include <fbjni/fbjni.h>
+#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
+#include <rncore.h>
+
++ // Include the NativeSampleModule header
++ #include <NativeSampleModule.h>
+
+//...
+
+std::shared_ptr<TurboModule> cxxModuleProvider(
+    const std::string& name,
+    const std::shared_ptr<CallInvoker>& jsInvoker) {
+  // Here you can provide your CXX Turbo Modules coming from
+  // either your application or from external libraries. The approach to follow
+  // is similar to the following (for a module called `NativeCxxModuleExample`):
+  //
+  // if (name == NativeCxxModuleExample::kModuleName) {
+  //   return std::make_shared<NativeCxxModuleExample>(jsInvoker);
+  // }
+
++  // This code registers the module so that when the JS side asks for it, the app can return it
++  if (name == NativeSampleModule::kModuleName) {
++    return std::make_shared<NativeSampleModule>(jsInvoker);
++  }
+
+  // And we fallback to the CXX module providers autolinked
+  return autolinking_cxxModuleProvider(name, jsInvoker);
+}
+
+// leave the rest of the file
+```
+
+These steps download the original `OnLoad.cpp` file from React Native, so that we can safely override it to load the C++ Turbo Native Module in the app.
+
+Once we downloaded the file, we can modify it by:
+
+- Including the header file that points to our module
+- Registering the Turbo Native Module so that when JS requires it, the app can return it.
+
+Now, you can run `yarn android` from the project root to see your app building successfully.
+
+### iOS
+
+To make sure that the iOS app can effectively build the C++ Turbo Native Module, we need to:
+
+1. Install pods and run Codegen.
+2. Add the `shared` folder to our iOS project.
+3. Register the C++ Turbo Native Module in the application.
+
+#### 1. Install Pods and Run Codegen.
+
+The first step we need to run is the usual steps we run every time we have to prepare our iOS application. CocoaPods is the tool we use to setup and install React Native dependencies and, as part of the process, it will also run Codegen for us.
+
+```bash
+cd ios
+bundle install
+bundle exec pod install
+```
+
+#### 2. Add the shared folder to the iOS project
+
+This step adds the `shared` folder to the project to make it visible to Xcode.
+
+1. Open the CocoaPods generated Xcode Workspace.
+
+```bash
+cd ios
+open SampleApp.xcworkspace
+```
+
+2. Click on the `SampleApp` project on the left and select `Add files to "Sample App"...`.
+
+![Add Files to Sample App...](/docs/assets/AddFilesToXcode1.png)
+
+3. Select the `shared` folder and click on `Add`.
+
+![Add Files to Sample App...](/docs/assets/AddFilesToXcode2.png)
+
+If you did everything right, your project on the left should look like this:
+
+![Xcode Project](/docs/assets/CxxTMGuideXcodeProject.png)
+
+#### 3. Registering the Cxx Turbo Native Module in your app
+
+To register a pure Cxx Turbo Native Module in your app, you need to:
+
+1. Create a `ModuleProvider` for the Native Module
+2. Configure the `package.json` to associate the JS module name with the ModuleProvider class.
+
+The ModuleProvider is an Objective-C++ that glues together the Pure C++ module with the rest of your iOS App.
+
+##### 3.1 Create the ModuleProvider
+
+1. From Xcode, select the `SampleApp` project and press <kbd>⌘</kbd> + <kbd>N</kbd> to create a new file.
+2. Select the `Cocoa Touch Class` template
+3. Add the name `NativeSampleModuleProvider` (keep the other field as `Subclass of: NSObject` and `Language: Objective-C`)
+4. Click Next to generate the files.
+5. Rename the `NativeSampleModuleProvider.m` to `NativeSampleModuleProvider.mm`. The `mm` extension denotes an Objective-C++ file.
+6. Implement the content of the `NativeSampleModuleProvider.h` with the following:
+
+```objc title="NativeSampleModuleProvider.h"
+
+#import <Foundation/Foundation.h>
+#import <ReactCommon/RCTTurboModule.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface NativeSampleModuleProvider : NSObject <RCTModuleProvider>
+
+@end
+
+NS_ASSUME_NONNULL_END
+```
+
+This declares a `NativeSampleModuleProvider` object that conforms to the `RCTModuleProvider` protocol.
+
+7. Implement the content of the `NativeSampleModuleProvider.mm` with the following:
+
+```objc title="NativeSampleModuleProvider.mm"
+
+#import "NativeSampleModuleProvider.h"
+#import <ReactCommon/CallInvoker.h>
+#import <ReactCommon/TurboModule.h>
+#import "NativeSampleModule.h"
+
+@implementation NativeSampleModuleProvider
+
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
+    (const facebook::react::ObjCTurboModule::InitParams &)params
+{
+  return std::make_shared<facebook::react::NativeSampleModule>(params.jsInvoker);
+}
+
+@end
+```
+
+This code implements the `RCTModuleProvider` protocol by creating the pure C++ `NativeSampleModule` when the `getTurboModule:` method is called.
+
+##### 3.2 Update the package.json
+
+The last step consists in updating the `package.json` to tell React Native about the link between the JS specs of the Native Module and the concrete implementation of those spec in native code.
+
+Modify the `package.json` as it follows:
+
+```json title="package.json"
+     "start": "react-native start",
+     "test": "jest"
+   },
+   "codegenConfig": {
+     "name": "AppSpecs",
+     "type": "modules",
+     "jsSrcsDir": "specs",
+     "android": {
+       "javaPackageName": "com.sampleapp.specs"
+     // highlight-add-start
+     },
+     "ios": {
+        "modulesProvider": {
+          "NativeSampleModule":  "NativeSampleModuleProvider"
+        }
+     }
+     // highlight-add-end
+   },
+
+   "dependencies": {
+```
+
+At this point, you need to re-install the pods to make sure that codegen runs again to generate the new files:
+
+```bash
+# from the ios folder
+bundle exec pod install
+open SampleApp.xcworkspace
+```
+
+If you now build your application from Xcode, you should be able to build successfully.
+
+## 5. Testing your Code
+
+It's now time to access our C++ Turbo Native Module from JS. To do so, we have to modify the `App.tsx` file to import the Turbo Native Module and to call it in our code.
+
+1. Open the `App.tsx` file.
+2. Replace the content of the template with the following code:
+
+```tsx title="App.tsx"
+import {type JSX, useState} from 'react';
+import {
+  Button,
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+import SampleTurboModule from './specs/NativeSampleModule';
+
+function App(): JSX.Element {
+  const [value, setValue] = useState('');
+  const [reversedValue, setReversedValue] = useState('');
+
+  const onPress = () => {
+    const revString = SampleTurboModule.reverseString(value);
+    setReversedValue(revString);
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View>
+        <Text style={styles.title}>
+          Welcome to C++ Turbo Native Module Example
+        </Text>
+        <Text>Write down here the text you want to reverse</Text>
+        <TextInput
+          style={styles.textInput}
+          placeholder="Write your text here"
+          onChangeText={setValue}
+          value={value}
+        />
+        <Button title="Reverse" onPress={onPress} />
+        <Text>Reversed text: {reversedValue}</Text>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 18,
+    marginBottom: 20,
+  },
+  textInput: {
+    borderColor: 'black',
+    borderWidth: 1,
+    borderRadius: 5,
+    padding: 10,
+    marginTop: 10,
+  },
+});
+
+export default App;
+```
+
+The interesting lines in this app are:
+
+- `import SampleTurboModule from './specs/NativeSampleModule';`: this line imports the Turbo Native Module in the app,
+- `const revString = SampleTurboModule.reverseString(value);` in the `onPress` callback: this is how you can use the Turbo Native Module in your app.
+
+:::warning
+For the sake of this example and to keep it as short as possible, we directly imported the spec file in our app.
+The best practice in this case is to create a separate file to wrap the specs and use that file into your application.
+This allows you to prepare the input for the specs and gives you more control over them in JS.
+:::
+
+Congratulations, you wrote your first C++ Turbo Native Module!
+
+| <center>Android</center>                                                                             | <center>iOS</center>                                                                          |
+| ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
+| <center><img src="/docs/assets/CxxGuideAndroidVideo.gif" alt="Android Video" height="600"/></center> | <center><img src="/docs/assets/CxxGuideIOSVideo.gif" alt="iOS video" height="600" /></center> |
diff --git a/website/versioned_docs/version-0.83/toastandroid.md b/website/versioned_docs/version-0.83/toastandroid.md
index 0d7a569235d..07f2b7b20cd 100644
--- a/website/versioned_docs/version-0.83/toastandroid.md
+++ b/website/versioned_docs/version-0.83/toastandroid.md
@@ -17,7 +17,6 @@ Starting with Android 11 (API level 30), setting the gravity has no effect on te
 :::
 
 ```SnackPlayer name=Toast%20Android%20API%20Example&supportedPlatforms=android
-import React from 'react';
 import {StyleSheet, ToastAndroid, Button, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.83/touchablehighlight.md b/website/versioned_docs/version-0.83/touchablehighlight.md
index 98ea0823783..bb0a5d234c1 100644
--- a/website/versioned_docs/version-0.83/touchablehighlight.md
+++ b/website/versioned_docs/version-0.83/touchablehighlight.md
@@ -1,215 +1,215 @@
----
-id: touchablehighlight
-title: TouchableHighlight
----
-
-:::tip
-If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
-:::
-
-A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view.
-
-The underlay comes from wrapping the child in a new View, which can affect layout, and sometimes cause unwanted visual artifacts if not used correctly, for example if the backgroundColor of the wrapped view isn't explicitly set to an opaque color.
-
-TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View.
-
-```tsx
-function MyComponent(props: MyComponentProps) {
-  return (
-    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
-      <Text>My Component</Text>
-    </View>
-  );
-}
-
-<TouchableHighlight
-  activeOpacity={0.6}
-  underlayColor="#DDDDDD"
-  onPress={() => alert('Pressed!')}>
-  <MyComponent />
-</TouchableHighlight>;
-```
-
-## Example
-
-```SnackPlayer name=TouchableHighlight%20Example
-import React, {useState} from 'react';
-import {StyleSheet, Text, TouchableHighlight, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const TouchableHighlightExample = () => {
-  const [count, setCount] = useState(0);
-  const onPress = () => setCount(count + 1);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <TouchableHighlight onPress={onPress}>
-          <View style={styles.button}>
-            <Text>Touch Here</Text>
-          </View>
-        </TouchableHighlight>
-        <View style={styles.countContainer}>
-          <Text style={styles.countText}>{count || null}</Text>
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: 10,
-  },
-  button: {
-    alignItems: 'center',
-    backgroundColor: '#DDDDDD',
-    padding: 10,
-  },
-  countContainer: {
-    alignItems: 'center',
-    padding: 10,
-  },
-  countText: {
-    color: '#FF00FF',
-  },
-});
-
-export default TouchableHighlightExample;
-```
-
----
-
-# Reference
-
-## Props
-
-### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
-
-Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
-
----
-
-### `activeOpacity`
-
-Determines what the opacity of the wrapped view should be when touch is active. The value should be between 0 and 1. Defaults to 0.85. Requires `underlayColor` to be set.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `onHideUnderlay`
-
-Called immediately after the underlay is hidden.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onShowUnderlay`
-
-Called immediately after the underlay is shown.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `ref`
-
-A ref setter that will be assigned an [element node](element-nodes) when mounted.
-
----
-
-### `style`
-
-| Type       |
-| ---------- |
-| View.style |
-
----
-
-### `underlayColor`
-
-The color of the underlay that will show through when the touch is active.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `hasTVPreferredFocus` <div className="label ios">iOS</div>
-
-_(Apple TV only)_ TV preferred focus (see documentation for the View component).
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `nextFocusDown` <div className="label android">Android</div>
-
-TV next focus down (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusForward` <div className="label android">Android</div>
-
-TV next focus forward (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusLeft` <div className="label android">Android</div>
-
-TV next focus left (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusRight` <div className="label android">Android</div>
-
-TV next focus right (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusUp` <div className="label android">Android</div>
-
-TV next focus up (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `testOnly_pressed`
-
-Handy for snapshot tests.
-
-| Type |
-| ---- |
-| bool |
+---
+id: touchablehighlight
+title: TouchableHighlight
+---
+
+:::tip
+If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
+:::
+
+A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view.
+
+The underlay comes from wrapping the child in a new View, which can affect layout, and sometimes cause unwanted visual artifacts if not used correctly, for example if the backgroundColor of the wrapped view isn't explicitly set to an opaque color.
+
+TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View.
+
+```tsx
+function MyComponent(props: MyComponentProps) {
+  return (
+    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
+      <Text>My Component</Text>
+    </View>
+  );
+}
+
+<TouchableHighlight
+  activeOpacity={0.6}
+  underlayColor="#DDDDDD"
+  onPress={() => alert('Pressed!')}>
+  <MyComponent />
+</TouchableHighlight>;
+```
+
+## Example
+
+```SnackPlayer name=TouchableHighlight%20Example
+import {useState} from 'react';
+import {StyleSheet, Text, TouchableHighlight, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const TouchableHighlightExample = () => {
+  const [count, setCount] = useState(0);
+  const onPress = () => setCount(count + 1);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <TouchableHighlight onPress={onPress}>
+          <View style={styles.button}>
+            <Text>Touch Here</Text>
+          </View>
+        </TouchableHighlight>
+        <View style={styles.countContainer}>
+          <Text style={styles.countText}>{count || null}</Text>
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#DDDDDD',
+    padding: 10,
+  },
+  countContainer: {
+    alignItems: 'center',
+    padding: 10,
+  },
+  countText: {
+    color: '#FF00FF',
+  },
+});
+
+export default TouchableHighlightExample;
+```
+
+---
+
+# Reference
+
+## Props
+
+### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
+
+Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
+
+---
+
+### `activeOpacity`
+
+Determines what the opacity of the wrapped view should be when touch is active. The value should be between 0 and 1. Defaults to 0.85. Requires `underlayColor` to be set.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `onHideUnderlay`
+
+Called immediately after the underlay is hidden.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onShowUnderlay`
+
+Called immediately after the underlay is shown.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `ref`
+
+A ref setter that will be assigned an [element node](element-nodes) when mounted.
+
+---
+
+### `style`
+
+| Type       |
+| ---------- |
+| View.style |
+
+---
+
+### `underlayColor`
+
+The color of the underlay that will show through when the touch is active.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `hasTVPreferredFocus` <div className="label ios">iOS</div>
+
+_(Apple TV only)_ TV preferred focus (see documentation for the View component).
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `nextFocusDown` <div className="label android">Android</div>
+
+TV next focus down (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusForward` <div className="label android">Android</div>
+
+TV next focus forward (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusLeft` <div className="label android">Android</div>
+
+TV next focus left (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusRight` <div className="label android">Android</div>
+
+TV next focus right (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusUp` <div className="label android">Android</div>
+
+TV next focus up (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `testOnly_pressed`
+
+Handy for snapshot tests.
+
+| Type |
+| ---- |
+| bool |
diff --git a/website/versioned_docs/version-0.83/touchablenativefeedback.md b/website/versioned_docs/version-0.83/touchablenativefeedback.md
index a7465b9f2ed..eb0a67aa03c 100644
--- a/website/versioned_docs/version-0.83/touchablenativefeedback.md
+++ b/website/versioned_docs/version-0.83/touchablenativefeedback.md
@@ -1,219 +1,219 @@
----
-id: touchablenativefeedback
-title: TouchableNativeFeedback
----
-
-:::tip
-If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
-:::
-
-A wrapper for making views respond properly to touches (Android only). On Android this component uses native state drawable to display touch feedback.
-
-At the moment it only supports having a single View instance as a child node, as it's implemented by replacing that View with another instance of RCTView node with some additional properties set.
-
-Background drawable of native feedback touchable can be customized with `background` property.
-
-## Example
-
-```SnackPlayer name=TouchableNativeFeedback%20Android%20Component%20Example&supportedPlatforms=android
-import React, {useState} from 'react';
-import {Text, View, StyleSheet, TouchableNativeFeedback} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [rippleColor, setRippleColor] = useState(randomHexColor());
-  const [rippleOverflow, setRippleOverflow] = useState(false);
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <TouchableNativeFeedback
-          onPress={() => {
-            setRippleColor(randomHexColor());
-            setRippleOverflow(!rippleOverflow);
-          }}
-          background={TouchableNativeFeedback.Ripple(
-            rippleColor,
-            rippleOverflow,
-          )}>
-          <View style={styles.touchable}>
-            <Text style={styles.text}>TouchableNativeFeedback</Text>
-          </View>
-        </TouchableNativeFeedback>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const randomHexColor = () => {
-  return '#000000'.replace(/0/g, function () {
-    return Math.round(Math.random() * 16).toString(16);
-  });
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    backgroundColor: 'black',
-    paddingHorizontal: 20,
-  },
-  touchable: {
-    flex: 0.33,
-    justifyContent: 'center',
-    backgroundColor: '#eeeeee',
-    borderColor: 'black',
-    borderWidth: 1,
-  },
-  text: {
-    alignSelf: 'center',
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Props
-
-### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
-
-Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
-
----
-
-### `background`
-
-Determines the type of background drawable that's going to be used to display feedback. It takes an object with `type` property and extra data depending on the `type`. It's recommended to use one of the static methods to generate that dictionary.
-
-| Type               |
-| ------------------ |
-| backgroundPropType |
-
----
-
-### `useForeground`
-
-Set to true to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them.
-
-Check TouchableNativeFeedback.canUseNativeForeground() first, as this is only available on Android 6.0 and above. If you try to use this on older versions you will get a warning and fallback to background.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `hasTVPreferredFocus` <div className="label android">Android</div>
-
-TV preferred focus (see documentation for the View component).
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `nextFocusDown` <div className="label android">Android</div>
-
-TV next focus down (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusForward` <div className="label android">Android</div>
-
-TV next focus forward (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusLeft` <div className="label android">Android</div>
-
-TV next focus left (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusRight` <div className="label android">Android</div>
-
-TV next focus right (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusUp` <div className="label android">Android</div>
-
-TV next focus up (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
-## Methods
-
-### `SelectableBackground()`
-
-```tsx
-static SelectableBackground(
-  rippleRadius: number | null,
-): ThemeAttributeBackgroundPropType;
-```
-
-Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.
-
----
-
-### `SelectableBackgroundBorderless()`
-
-```tsx
-static SelectableBackgroundBorderless(
-  rippleRadius: number | null,
-): ThemeAttributeBackgroundPropType;
-```
-
-Creates an object that represent android theme's default background for borderless selectable elements (`?android:attr/selectableItemBackgroundBorderless`). Available on android API level 21+. `rippleRadius` parameter controls the radius of the ripple effect.
-
----
-
-### `Ripple()`
-
-```tsx
-static Ripple(
-  color: ColorValue,
-  borderless: boolean,
-  rippleRadius?: number | null,
-): RippleBackgroundPropType;
-```
-
-Creates an object that represents ripple drawable with specified color (as a string). If property `borderless` evaluates to true the ripple will render outside of the view bounds (see native actionbar buttons as an example of that behavior). This background type is available on Android API level 21+.
-
-**Parameters:**
-
-| Name         | Type    | Required | Description                                 |
-| ------------ | ------- | -------- | ------------------------------------------- |
-| color        | string  | Yes      | The ripple color                            |
-| borderless   | boolean | Yes      | If the ripple can render outside its bounds |
-| rippleRadius | ?number | No       | controls the radius of the ripple effect    |
-
----
-
-### `canUseNativeForeground()`
-
-```tsx
-static canUseNativeForeground(): boolean;
-```
+---
+id: touchablenativefeedback
+title: TouchableNativeFeedback
+---
+
+:::tip
+If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
+:::
+
+A wrapper for making views respond properly to touches (Android only). On Android this component uses native state drawable to display touch feedback.
+
+At the moment it only supports having a single View instance as a child node, as it's implemented by replacing that View with another instance of RCTView node with some additional properties set.
+
+Background drawable of native feedback touchable can be customized with `background` property.
+
+## Example
+
+```SnackPlayer name=TouchableNativeFeedback%20Android%20Component%20Example&supportedPlatforms=android
+import {useState} from 'react';
+import {Text, View, StyleSheet, TouchableNativeFeedback} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [rippleColor, setRippleColor] = useState(randomHexColor());
+  const [rippleOverflow, setRippleOverflow] = useState(false);
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <TouchableNativeFeedback
+          onPress={() => {
+            setRippleColor(randomHexColor());
+            setRippleOverflow(!rippleOverflow);
+          }}
+          background={TouchableNativeFeedback.Ripple(
+            rippleColor,
+            rippleOverflow,
+          )}>
+          <View style={styles.touchable}>
+            <Text style={styles.text}>TouchableNativeFeedback</Text>
+          </View>
+        </TouchableNativeFeedback>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const randomHexColor = () => {
+  return '#000000'.replace(/0/g, function () {
+    return Math.round(Math.random() * 16).toString(16);
+  });
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: 'black',
+    paddingHorizontal: 20,
+  },
+  touchable: {
+    flex: 0.33,
+    justifyContent: 'center',
+    backgroundColor: '#eeeeee',
+    borderColor: 'black',
+    borderWidth: 1,
+  },
+  text: {
+    alignSelf: 'center',
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Props
+
+### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
+
+Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
+
+---
+
+### `background`
+
+Determines the type of background drawable that's going to be used to display feedback. It takes an object with `type` property and extra data depending on the `type`. It's recommended to use one of the static methods to generate that dictionary.
+
+| Type               |
+| ------------------ |
+| backgroundPropType |
+
+---
+
+### `useForeground`
+
+Set to true to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them.
+
+Check TouchableNativeFeedback.canUseNativeForeground() first, as this is only available on Android 6.0 and above. If you try to use this on older versions you will get a warning and fallback to background.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `hasTVPreferredFocus` <div className="label android">Android</div>
+
+TV preferred focus (see documentation for the View component).
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `nextFocusDown` <div className="label android">Android</div>
+
+TV next focus down (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusForward` <div className="label android">Android</div>
+
+TV next focus forward (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusLeft` <div className="label android">Android</div>
+
+TV next focus left (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusRight` <div className="label android">Android</div>
+
+TV next focus right (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusUp` <div className="label android">Android</div>
+
+TV next focus up (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+## Methods
+
+### `SelectableBackground()`
+
+```tsx
+static SelectableBackground(
+  rippleRadius: number | null,
+): ThemeAttributeBackgroundPropType;
+```
+
+Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.
+
+---
+
+### `SelectableBackgroundBorderless()`
+
+```tsx
+static SelectableBackgroundBorderless(
+  rippleRadius: number | null,
+): ThemeAttributeBackgroundPropType;
+```
+
+Creates an object that represent android theme's default background for borderless selectable elements (`?android:attr/selectableItemBackgroundBorderless`). Available on android API level 21+. `rippleRadius` parameter controls the radius of the ripple effect.
+
+---
+
+### `Ripple()`
+
+```tsx
+static Ripple(
+  color: ColorValue,
+  borderless: boolean,
+  rippleRadius?: number | null,
+): RippleBackgroundPropType;
+```
+
+Creates an object that represents ripple drawable with specified color (as a string). If property `borderless` evaluates to true the ripple will render outside of the view bounds (see native actionbar buttons as an example of that behavior). This background type is available on Android API level 21+.
+
+**Parameters:**
+
+| Name         | Type    | Required | Description                                 |
+| ------------ | ------- | -------- | ------------------------------------------- |
+| color        | string  | Yes      | The ripple color                            |
+| borderless   | boolean | Yes      | If the ripple can render outside its bounds |
+| rippleRadius | ?number | No       | controls the radius of the ripple effect    |
+
+---
+
+### `canUseNativeForeground()`
+
+```tsx
+static canUseNativeForeground(): boolean;
+```
diff --git a/website/versioned_docs/version-0.83/touchableopacity.md b/website/versioned_docs/version-0.83/touchableopacity.md
index 72af0bc5f49..0764f4787fa 100644
--- a/website/versioned_docs/version-0.83/touchableopacity.md
+++ b/website/versioned_docs/version-0.83/touchableopacity.md
@@ -1,151 +1,151 @@
----
-id: touchableopacity
-title: TouchableOpacity
----
-
-:::tip
-If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
-:::
-
-A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it.
-
-Opacity is controlled by wrapping the children in an `Animated.View`, which is added to the view hierarchy. Be aware that this can affect layout.
-
-## Example
-
-```SnackPlayer name=TouchableOpacity%20Example
-import React, {useState} from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [count, setCount] = useState(0);
-  const onPress = () => setCount(prevCount => prevCount + 1);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.countContainer}>
-          <Text>Count: {count}</Text>
-        </View>
-        <TouchableOpacity style={styles.button} onPress={onPress}>
-          <Text>Press Here</Text>
-        </TouchableOpacity>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: 10,
-  },
-  button: {
-    alignItems: 'center',
-    backgroundColor: '#DDDDDD',
-    padding: 10,
-  },
-  countContainer: {
-    alignItems: 'center',
-    padding: 10,
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Props
-
-### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
-
-Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
-
----
-
-### `style`
-
-| Type                           |
-| ------------------------------ |
-| [View.style](view-style-props) |
-
----
-
-### `activeOpacity`
-
-Determines what the opacity of the wrapped view should be when touch is active. Defaults to `0.2`.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `hasTVPreferredFocus` <div className="label ios">iOS</div>
-
-_(Apple TV only)_ TV preferred focus (see documentation for the View component).
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `nextFocusDown` <div className="label android">Android</div>
-
-TV next focus down (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusForward` <div className="label android">Android</div>
-
-TV next focus forward (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusLeft` <div className="label android">Android</div>
-
-TV next focus left (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusRight` <div className="label android">Android</div>
-
-TV next focus right (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusUp` <div className="label android">Android</div>
-
-TV next focus up (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `ref`
-
-A ref setter that will be assigned an [element node](element-nodes) when mounted.
+---
+id: touchableopacity
+title: TouchableOpacity
+---
+
+:::tip
+If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
+:::
+
+A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it.
+
+Opacity is controlled by wrapping the children in an `Animated.View`, which is added to the view hierarchy. Be aware that this can affect layout.
+
+## Example
+
+```SnackPlayer name=TouchableOpacity%20Example
+import {useState} from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [count, setCount] = useState(0);
+  const onPress = () => setCount(prevCount => prevCount + 1);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.countContainer}>
+          <Text>Count: {count}</Text>
+        </View>
+        <TouchableOpacity style={styles.button} onPress={onPress}>
+          <Text>Press Here</Text>
+        </TouchableOpacity>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#DDDDDD',
+    padding: 10,
+  },
+  countContainer: {
+    alignItems: 'center',
+    padding: 10,
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Props
+
+### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
+
+Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
+
+---
+
+### `style`
+
+| Type                           |
+| ------------------------------ |
+| [View.style](view-style-props) |
+
+---
+
+### `activeOpacity`
+
+Determines what the opacity of the wrapped view should be when touch is active. Defaults to `0.2`.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `hasTVPreferredFocus` <div className="label ios">iOS</div>
+
+_(Apple TV only)_ TV preferred focus (see documentation for the View component).
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `nextFocusDown` <div className="label android">Android</div>
+
+TV next focus down (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusForward` <div className="label android">Android</div>
+
+TV next focus forward (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusLeft` <div className="label android">Android</div>
+
+TV next focus left (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusRight` <div className="label android">Android</div>
+
+TV next focus right (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusUp` <div className="label android">Android</div>
+
+TV next focus up (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `ref`
+
+A ref setter that will be assigned an [element node](element-nodes) when mounted.
diff --git a/website/versioned_docs/version-0.83/touchablewithoutfeedback.md b/website/versioned_docs/version-0.83/touchablewithoutfeedback.md
index c7e875156df..fb0978b1ad1 100644
--- a/website/versioned_docs/version-0.83/touchablewithoutfeedback.md
+++ b/website/versioned_docs/version-0.83/touchablewithoutfeedback.md
@@ -1,531 +1,531 @@
----
-id: touchablewithoutfeedback
-title: TouchableWithoutFeedback
----
-
-:::tip
-If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
-:::
-
-Do not use unless you have a very good reason. All elements that respond to press should have a visual feedback when touched.
-
-`TouchableWithoutFeedback` supports only one child. If you wish to have several child components, wrap them in a View. Importantly, `TouchableWithoutFeedback` works by cloning its child and applying responder props to it. It is therefore required that any intermediary components pass through those props to the underlying React Native component.
-
-## Usage Pattern
-
-```tsx
-function MyComponent(props: MyComponentProps) {
-  return (
-    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
-      <Text>My Component</Text>
-    </View>
-  );
-}
-
-<TouchableWithoutFeedback onPress={() => alert('Pressed!')}>
-  <MyComponent />
-</TouchableWithoutFeedback>;
-```
-
-## Example
-
-```SnackPlayer name=TouchableWithoutFeedback
-import React, {useState} from 'react';
-import {StyleSheet, TouchableWithoutFeedback, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const TouchableWithoutFeedbackExample = () => {
-  const [count, setCount] = useState(0);
-
-  const onPress = () => {
-    setCount(count + 1);
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.countContainer}>
-          <Text style={styles.countText}>Count: {count}</Text>
-        </View>
-        <TouchableWithoutFeedback onPress={onPress}>
-          <View style={styles.button}>
-            <Text>Touch Here</Text>
-          </View>
-        </TouchableWithoutFeedback>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: 10,
-  },
-  button: {
-    alignItems: 'center',
-    backgroundColor: '#DDDDDD',
-    padding: 10,
-  },
-  countContainer: {
-    alignItems: 'center',
-    padding: 10,
-  },
-  countText: {
-    color: '#FF00FF',
-  },
-});
-
-export default TouchableWithoutFeedbackExample;
-```
-
----
-
-# Reference
-
-## Props
-
-### `accessibilityIgnoresInvertColors` <div className="label ios">iOS</div>
-
-A value indicating this view should or should not be inverted when color inversion is turned on. A value of `true` will tell the view to not be inverted even if color inversion is turned on.
-
-See the [Accessibility guide](accessibility.md#accessibilityignoresinvertcolors) for more information.
-
-| Type    |
-| ------- |
-| Boolean |
-
----
-
-### `accessible`
-
-When `true`, indicates that the view is an accessibility element. By default, all the touchable elements are accessible.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `accessibilityLabel`
-
-Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the `Text` nodes separated by space.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityLanguage` <div className="label ios">iOS</div>
-
-A value indicating which language should be used by the screen reader when the user interacts with the element. It should follow the [BCP 47 specification](https://www.rfc-editor.org/info/bcp47).
-
-See the [iOS `accessibilityLanguage` doc](https://developer.apple.com/documentation/objectivec/nsobject/1615192-accessibilitylanguage) for more information.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityHint`
-
-An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityRole`
-
-`accessibilityRole` communicates the purpose of a component to the user of an assistive technology.
-
-`accessibilityRole` can be one of the following:
-
-- `'none'` - Used when the element has no role.
-- `'button'` - Used when the element should be treated as a button.
-- `'link'` - Used when the element should be treated as a link.
-- `'search'` - Used when the text field element should also be treated as a search field.
-- `'image'` - Used when the element should be treated as an image. Can be combined with button or link, for example.
-- `'keyboardkey'` - Used when the element acts as a keyboard key.
-- `'text'` - Used when the element should be treated as static text that cannot change.
-- `'adjustable'` - Used when an element can be "adjusted" (e.g. a slider).
-- `'imagebutton'` - Used when the element should be treated as a button and is also an image.
-- `'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.
-- `'alert'` - Used when an element contains important text to be presented to the user.
-- `'checkbox'` - Used when an element represents a checkbox which can be checked, unchecked, or have mixed checked state.
-- `'combobox'` - Used when an element represents a combo box, which allows the user to select among several choices.
-- `'menu'` - Used when the component is a menu of choices.
-- `'menubar'` - Used when a component is a container of multiple menus.
-- `'menuitem'` - Used to represent an item within a menu.
-- `'progressbar'` - Used to represent a component which indicates progress of a task.
-- `'radio'` - Used to represent a radio button.
-- `'radiogroup'` - Used to represent a group of radio buttons.
-- `'scrollbar'` - Used to represent a scroll bar.
-- `'spinbutton'` - Used to represent a button which opens a list of choices.
-- `'switch'` - Used to represent a switch which can be turned on and off.
-- `'tab'` - Used to represent a tab.
-- `'tablist'` - Used to represent a list of tabs.
-- `'timer'` - Used to represent a timer.
-- `'toolbar'` - Used to represent a tool bar (a container of action buttons or components).
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityState`
-
-Describes the current state of a component to the user of an assistive technology.
-
-See the [Accessibility guide](accessibility.md#accessibilitystate-ios-android) for more information.
-
-| Type                                                                                             |
-| ------------------------------------------------------------------------------------------------ |
-| object: `{disabled: bool, selected: bool, checked: bool or 'mixed', busy: bool, expanded: bool}` |
-
----
-
-### `accessibilityActions`
-
-Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The `accessibilityActions` property should contain a list of action objects. Each action object should contain the field name and label.
-
-See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
-
-| Type  |
-| ----- |
-| array |
-
----
-
-### `aria-busy`
-
-Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-checked`
-
-Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
-| Type             | Default |
-| ---------------- | ------- |
-| boolean, 'mixed' | false   |
-
----
-
-### `aria-disabled`
-
-Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-expanded`
-
-Indicates whether an expandable element is currently expanded or collapsed.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-hidden`
-
-Indicates whether the element is hidden from assistive technologies.
-
-For example, in a window that contains sibling views `A` and `B`, setting `aria-hidden` to `true` on view `B` causes VoiceOver to ignore the `B` element and its children.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-label`
-
-Defines a string value that labels an interactive element.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `aria-live` <div className="label android">Android</div>
-
-Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
-
-- **off** Accessibility services should not announce changes to this view.
-- **polite** Accessibility services should announce changes to this view.
-- **assertive** Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
-
-| Type                                     | Default |
-| ---------------------------------------- | ------- |
-| enum(`'assertive'`, `'off'`, `'polite'`) | `'off'` |
-
----
-
-### `aria-modal` <div className="label ios">iOS</div>
-
-Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. Has precedence over the [`accessibilityViewIsModal`](#accessibilityviewismodal-ios) prop.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-selected`
-
-Indicates whether a selectable element is currently selected or not.
-
-| Type    |
-| ------- |
-| boolean |
-
-### `onAccessibilityAction`
-
-Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.
-
-See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `accessibilityValue`
-
-Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
-See the [Accessibility guide](accessibility.md#accessibilityvalue-ios-android) for more information.
-
-| Type                                                            |
-| --------------------------------------------------------------- |
-| object: `{min: number, max: number, now: number, text: string}` |
-
----
-
-### `aria-valuemax`
-
-Represents the maximum value for range-based components, such as sliders and progress bars. Has precedence over the `max` value in the `accessibilityValue` prop.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `aria-valuemin`
-
-Represents the minimum value for range-based components, such as sliders and progress bars. Has precedence over the `min` value in the `accessibilityValue` prop.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `aria-valuenow`
-
-Represents the current value for range-based components, such as sliders and progress bars. Has precedence over the `now` value in the `accessibilityValue` prop.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `aria-valuetext`
-
-Represents the textual description of the component. Has precedence over the `text` value in the `accessibilityValue` prop.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `delayLongPress`
-
-Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `delayPressIn`
-
-Duration (in milliseconds), from the start of the touch, before `onPressIn` is called.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `delayPressOut`
-
-Duration (in milliseconds), from the release of the touch, before `onPressOut` is called.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `disabled`
-
-If true, disable all interactions for this component.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `hitSlop`
-
-This defines how far your touch can start away from the button. This is added to `pressRetentionOffset` when moving off of the button.
-
-:::note
-The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
-:::
-
-| Type                   |
-| ---------------------- |
-| [Rect](rect) or number |
-
-### `id`
-
-Used to locate this view from native code. Has precedence over `nativeID` prop.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `onBlur`
-
-Invoked when the item loses focus.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
-
----
-
-### `onFocus`
-
-Invoked when the item receives focus.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
-
----
-
-### `onLayout`
-
-Invoked on mount and on layout changes.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
-
----
-
-### `onLongPress`
-
-Called if the time after `onPressIn` lasts longer than 370 milliseconds. This time period can be customized with [`delayLongPress`](#delaylongpress).
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onPress`
-
-Called when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock). The first function argument is an event in form of [PressEvent](pressevent).
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onPressIn`
-
-Called as soon as the touchable element is pressed and invoked even before onPress. This can be useful when making network requests. The first function argument is an event in form of [PressEvent](pressevent).
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onPressOut`
-
-Called as soon as the touch is released even before onPress. The first function argument is an event in form of [PressEvent](pressevent).
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `pressRetentionOffset`
-
-When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations.
-
-| Type                   |
-| ---------------------- |
-| [Rect](rect) or number |
-
----
-
-### `nativeID`
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `testID`
-
-Used to locate this view in end-to-end tests.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `touchSoundDisabled` <div className="label android">Android</div>
-
-If true, doesn't play a system sound on touch.
-
-| Type    |
-| ------- |
-| Boolean |
+---
+id: touchablewithoutfeedback
+title: TouchableWithoutFeedback
+---
+
+:::tip
+If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
+:::
+
+Do not use unless you have a very good reason. All elements that respond to press should have a visual feedback when touched.
+
+`TouchableWithoutFeedback` supports only one child. If you wish to have several child components, wrap them in a View. Importantly, `TouchableWithoutFeedback` works by cloning its child and applying responder props to it. It is therefore required that any intermediary components pass through those props to the underlying React Native component.
+
+## Usage Pattern
+
+```tsx
+function MyComponent(props: MyComponentProps) {
+  return (
+    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
+      <Text>My Component</Text>
+    </View>
+  );
+}
+
+<TouchableWithoutFeedback onPress={() => alert('Pressed!')}>
+  <MyComponent />
+</TouchableWithoutFeedback>;
+```
+
+## Example
+
+```SnackPlayer name=TouchableWithoutFeedback
+import {useState} from 'react';
+import {StyleSheet, TouchableWithoutFeedback, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const TouchableWithoutFeedbackExample = () => {
+  const [count, setCount] = useState(0);
+
+  const onPress = () => {
+    setCount(count + 1);
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.countContainer}>
+          <Text style={styles.countText}>Count: {count}</Text>
+        </View>
+        <TouchableWithoutFeedback onPress={onPress}>
+          <View style={styles.button}>
+            <Text>Touch Here</Text>
+          </View>
+        </TouchableWithoutFeedback>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#DDDDDD',
+    padding: 10,
+  },
+  countContainer: {
+    alignItems: 'center',
+    padding: 10,
+  },
+  countText: {
+    color: '#FF00FF',
+  },
+});
+
+export default TouchableWithoutFeedbackExample;
+```
+
+---
+
+# Reference
+
+## Props
+
+### `accessibilityIgnoresInvertColors` <div className="label ios">iOS</div>
+
+A value indicating this view should or should not be inverted when color inversion is turned on. A value of `true` will tell the view to not be inverted even if color inversion is turned on.
+
+See the [Accessibility guide](accessibility.md#accessibilityignoresinvertcolors) for more information.
+
+| Type    |
+| ------- |
+| Boolean |
+
+---
+
+### `accessible`
+
+When `true`, indicates that the view is an accessibility element. By default, all the touchable elements are accessible.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `accessibilityLabel`
+
+Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the `Text` nodes separated by space.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityLanguage` <div className="label ios">iOS</div>
+
+A value indicating which language should be used by the screen reader when the user interacts with the element. It should follow the [BCP 47 specification](https://www.rfc-editor.org/info/bcp47).
+
+See the [iOS `accessibilityLanguage` doc](https://developer.apple.com/documentation/objectivec/nsobject/1615192-accessibilitylanguage) for more information.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityHint`
+
+An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityRole`
+
+`accessibilityRole` communicates the purpose of a component to the user of an assistive technology.
+
+`accessibilityRole` can be one of the following:
+
+- `'none'` - Used when the element has no role.
+- `'button'` - Used when the element should be treated as a button.
+- `'link'` - Used when the element should be treated as a link.
+- `'search'` - Used when the text field element should also be treated as a search field.
+- `'image'` - Used when the element should be treated as an image. Can be combined with button or link, for example.
+- `'keyboardkey'` - Used when the element acts as a keyboard key.
+- `'text'` - Used when the element should be treated as static text that cannot change.
+- `'adjustable'` - Used when an element can be "adjusted" (e.g. a slider).
+- `'imagebutton'` - Used when the element should be treated as a button and is also an image.
+- `'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.
+- `'alert'` - Used when an element contains important text to be presented to the user.
+- `'checkbox'` - Used when an element represents a checkbox which can be checked, unchecked, or have mixed checked state.
+- `'combobox'` - Used when an element represents a combo box, which allows the user to select among several choices.
+- `'menu'` - Used when the component is a menu of choices.
+- `'menubar'` - Used when a component is a container of multiple menus.
+- `'menuitem'` - Used to represent an item within a menu.
+- `'progressbar'` - Used to represent a component which indicates progress of a task.
+- `'radio'` - Used to represent a radio button.
+- `'radiogroup'` - Used to represent a group of radio buttons.
+- `'scrollbar'` - Used to represent a scroll bar.
+- `'spinbutton'` - Used to represent a button which opens a list of choices.
+- `'switch'` - Used to represent a switch which can be turned on and off.
+- `'tab'` - Used to represent a tab.
+- `'tablist'` - Used to represent a list of tabs.
+- `'timer'` - Used to represent a timer.
+- `'toolbar'` - Used to represent a tool bar (a container of action buttons or components).
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityState`
+
+Describes the current state of a component to the user of an assistive technology.
+
+See the [Accessibility guide](accessibility.md#accessibilitystate-ios-android) for more information.
+
+| Type                                                                                             |
+| ------------------------------------------------------------------------------------------------ |
+| object: `{disabled: bool, selected: bool, checked: bool or 'mixed', busy: bool, expanded: bool}` |
+
+---
+
+### `accessibilityActions`
+
+Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The `accessibilityActions` property should contain a list of action objects. Each action object should contain the field name and label.
+
+See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
+
+| Type  |
+| ----- |
+| array |
+
+---
+
+### `aria-busy`
+
+Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-checked`
+
+Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
+
+| Type             | Default |
+| ---------------- | ------- |
+| boolean, 'mixed' | false   |
+
+---
+
+### `aria-disabled`
+
+Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-expanded`
+
+Indicates whether an expandable element is currently expanded or collapsed.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-hidden`
+
+Indicates whether the element is hidden from assistive technologies.
+
+For example, in a window that contains sibling views `A` and `B`, setting `aria-hidden` to `true` on view `B` causes VoiceOver to ignore the `B` element and its children.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-label`
+
+Defines a string value that labels an interactive element.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `aria-live` <div className="label android">Android</div>
+
+Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
+
+- **off** Accessibility services should not announce changes to this view.
+- **polite** Accessibility services should announce changes to this view.
+- **assertive** Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
+
+| Type                                     | Default |
+| ---------------------------------------- | ------- |
+| enum(`'assertive'`, `'off'`, `'polite'`) | `'off'` |
+
+---
+
+### `aria-modal` <div className="label ios">iOS</div>
+
+Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. Has precedence over the [`accessibilityViewIsModal`](#accessibilityviewismodal-ios) prop.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-selected`
+
+Indicates whether a selectable element is currently selected or not.
+
+| Type    |
+| ------- |
+| boolean |
+
+### `onAccessibilityAction`
+
+Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.
+
+See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `accessibilityValue`
+
+Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
+
+See the [Accessibility guide](accessibility.md#accessibilityvalue-ios-android) for more information.
+
+| Type                                                            |
+| --------------------------------------------------------------- |
+| object: `{min: number, max: number, now: number, text: string}` |
+
+---
+
+### `aria-valuemax`
+
+Represents the maximum value for range-based components, such as sliders and progress bars. Has precedence over the `max` value in the `accessibilityValue` prop.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `aria-valuemin`
+
+Represents the minimum value for range-based components, such as sliders and progress bars. Has precedence over the `min` value in the `accessibilityValue` prop.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `aria-valuenow`
+
+Represents the current value for range-based components, such as sliders and progress bars. Has precedence over the `now` value in the `accessibilityValue` prop.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `aria-valuetext`
+
+Represents the textual description of the component. Has precedence over the `text` value in the `accessibilityValue` prop.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `delayLongPress`
+
+Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `delayPressIn`
+
+Duration (in milliseconds), from the start of the touch, before `onPressIn` is called.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `delayPressOut`
+
+Duration (in milliseconds), from the release of the touch, before `onPressOut` is called.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `disabled`
+
+If true, disable all interactions for this component.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `hitSlop`
+
+This defines how far your touch can start away from the button. This is added to `pressRetentionOffset` when moving off of the button.
+
+:::note
+The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
+:::
+
+| Type                   |
+| ---------------------- |
+| [Rect](rect) or number |
+
+### `id`
+
+Used to locate this view from native code. Has precedence over `nativeID` prop.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `onBlur`
+
+Invoked when the item loses focus.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
+
+---
+
+### `onFocus`
+
+Invoked when the item receives focus.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
+
+---
+
+### `onLayout`
+
+Invoked on mount and on layout changes.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
+
+---
+
+### `onLongPress`
+
+Called if the time after `onPressIn` lasts longer than 370 milliseconds. This time period can be customized with [`delayLongPress`](#delaylongpress).
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onPress`
+
+Called when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock). The first function argument is an event in form of [PressEvent](pressevent).
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onPressIn`
+
+Called as soon as the touchable element is pressed and invoked even before onPress. This can be useful when making network requests. The first function argument is an event in form of [PressEvent](pressevent).
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onPressOut`
+
+Called as soon as the touch is released even before onPress. The first function argument is an event in form of [PressEvent](pressevent).
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `pressRetentionOffset`
+
+When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations.
+
+| Type                   |
+| ---------------------- |
+| [Rect](rect) or number |
+
+---
+
+### `nativeID`
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `testID`
+
+Used to locate this view in end-to-end tests.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `touchSoundDisabled` <div className="label android">Android</div>
+
+If true, doesn't play a system sound on touch.
+
+| Type    |
+| ------- |
+| Boolean |
diff --git a/website/versioned_docs/version-0.83/transforms.md b/website/versioned_docs/version-0.83/transforms.md
index 364ba3a6873..003585bac39 100644
--- a/website/versioned_docs/version-0.83/transforms.md
+++ b/website/versioned_docs/version-0.83/transforms.md
@@ -1,399 +1,398 @@
----
-id: transforms
-title: Transforms
----
-
-Transforms are style properties that will help you modify the appearance and position of your components using 2D or 3D transformations. However, once you apply transforms, the layouts remain the same around the transformed component hence it might overlap with the nearby components. You can apply margin to the transformed component, the nearby components or padding to the container to prevent such overlaps.
-
-## Example
-
-```SnackPlayer name=Transforms%20Example
-import React from 'react';
-import {ScrollView, StyleSheet, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => (
-  <SafeAreaProvider>
-    <SafeAreaView style={styles.container}>
-      <ScrollView contentContainerStyle={styles.scrollContentContainer}>
-        <View style={styles.box}>
-          <Text style={styles.text}>Original Object</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{scale: 2}],
-            },
-          ]}>
-          <Text style={styles.text}>Scale by 2</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{scaleX: 2}],
-            },
-          ]}>
-          <Text style={styles.text}>ScaleX by 2</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{scaleY: 2}],
-            },
-          ]}>
-          <Text style={styles.text}>ScaleY by 2</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{rotate: '45deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>Rotate by 45 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{rotateX: '45deg'}, {rotateZ: '45deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>Rotate X&Z by 45 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{rotateY: '45deg'}, {rotateZ: '45deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>Rotate Y&Z by 45 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{skewX: '45deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>SkewX by 45 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{skewY: '45deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>SkewY by 45 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{skewX: '30deg'}, {skewY: '30deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>Skew X&Y by 30 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{translateX: -50}],
-            },
-          ]}>
-          <Text style={styles.text}>TranslateX by -50 </Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{translateY: 50}],
-            },
-          ]}>
-          <Text style={styles.text}>TranslateY by 50 </Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [
-                {
-                  matrix: [1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
-                },
-              ],
-            },
-          ]}>
-          <Text style={styles.text}>Matrix Transform</Text>
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  scrollContentContainer: {
-    alignItems: 'center',
-    paddingBottom: 60,
-  },
-  box: {
-    height: 100,
-    width: 100,
-    borderRadius: 5,
-    marginVertical: 40,
-    backgroundColor: '#61dafb',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  text: {
-    fontSize: 14,
-    fontWeight: 'bold',
-    margin: 8,
-    color: '#000',
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Transform
-
-`transform` accepts an array of transformation objects or space-separated string values. Each object specifies the property that will be transformed as the key, and the value to use in the transformation. Objects should not be combined. Use a single key/value pair per object.
-
-The rotate transformations require a string so that the transform may be expressed in degrees (deg) or radians (rad). For example:
-
-```js
-{
-  transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}],
-}
-```
-
-The same could also be achieved using a space-separated string:
-
-```js
-{
-  transform: 'rotateX(45deg) rotateZ(0.785398rad)',
-}
-```
-
-The skew transformations require a string so that the transform may be expressed in degrees (deg). For example:
-
-```js
-{
-  transform: [{skewX: '45deg'}],
-}
-```
-
-### Matrix Transform
-
-The `matrix` transform accepts a 4x4 transformation matrix as an array of 16 numbers. This allows you to apply complex transformations that combine translation, rotation, scaling, and skewing in a single operation.
-
-The matrix is specified in column-major order:
-
-```js
-{
-  transform: [
-    {
-      matrix: [
-        scaleX,
-        skewY,
-        0,
-        0,
-        skewX,
-        scaleY,
-        0,
-        0,
-        0,
-        0,
-        1,
-        0,
-        translateX,
-        translateY,
-        0,
-        1,
-      ],
-    },
-  ];
-}
-```
-
-For example, to apply a combination of scale and skew:
-
-```js
-{
-  transform: [
-    {
-      matrix: [
-        1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
-      ],
-    },
-  ];
-}
-```
-
-:::note
-Matrix transforms are useful when you need to apply pre-calculated transformation matrices, such as those from animation libraries or when building UI editor applications. For basic transformations, it's recommended to use the individual transform properties (scale, rotate, translate, etc.) as they are more readable.
-:::
-
-| Type                                                                                                                                                                                                                                                                                                          | Required |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
-| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number}`, `{translateY: number}`, `{skewX: string}`, `{skewY: string}` or string | No       |
-
----
-
-### 🗑️ `decomposedMatrix`, `rotation`, `scaleX`, `scaleY`, `transformMatrix`, `translateX`, `translateY`
-
-:::warning[Deprecated]
-Use the [`transform`](transforms#transform) prop instead.
-:::
-
-## Transform Origin
-
-The `transformOrigin` property sets the origin for a view's transformations. The transform origin is the point around which a transformation is applied. By default, the origin of a transform is `center`.
-
-# Example
-
-```SnackPlayer name=TransformOrigin%20Example
-import React, {useEffect, useRef} from 'react';
-import {Animated, View, StyleSheet, Easing} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const rotateAnim = useRef(new Animated.Value(0)).current;
-
-  useEffect(() => {
-    Animated.loop(
-      Animated.timing(rotateAnim, {
-        toValue: 1,
-        duration: 5000,
-        easing: Easing.linear,
-        useNativeDriver: true,
-      }),
-    ).start();
-  }, [rotateAnim]);
-
-  const spin = rotateAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '360deg'],
-  });
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.transformOriginWrapper}>
-          <Animated.View
-            style={[
-              styles.transformOriginView,
-              {
-                transform: [{rotate: spin}],
-              },
-            ]}
-          />
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  transformOriginWrapper: {
-    borderWidth: 1,
-    borderColor: 'rgba(0, 0, 0, 0.5)',
-  },
-  transformOriginView: {
-    backgroundColor: 'pink',
-    width: 100,
-    height: 100,
-    transformOrigin: 'top',
-  },
-});
-
-export default App;
-```
-
-### Values
-
-Transform origin supports `px`, `percentage` and keywords `top`, `left`, `right`, `bottom`, `center` values.
-
-The `transformOrigin` property may be specified using one, two, or three values, where each value represents an offset.
-
-#### One-value syntax:
-
-- The value must be a `px`, a `percentage`, or one of the keywords `left`, `center`, `right`, `top`, and `bottom`.
-
-```js
-{
-  transformOrigin: '20px',
-  transformOrigin: 'bottom',
-}
-```
-
-#### Two-value syntax:
-
-- First value (x-offset) must be a `px`, a `percentage`, or one of the keywords `left`, `center`, and `right`.
-- The second value (y-offset) must be a `px`, a `percentage`, or one of the keywords `top`, `center`, and `bottom`.
-
-```js
-{
-  transformOrigin: '10px 2px',
-  transformOrigin: 'left top',
-  transformOrigin: 'top right',
-}
-```
-
-#### Three-value syntax:
-
-- The first two values are the same as for the two-value syntax.
-- The third value (z-offset) must be a `px`. It always represents the Z offset.
-
-```js
-{
-  transformOrigin: '2px 30% 10px',
-  transformOrigin: 'right bottom 20px',
-}
-```
-
-#### Array syntax
-
-`transformOrigin` also supports an array syntax. It makes it convenient to use it with Animated APIs. It also avoids string parsing, so should be more efficient.
-
-```js
-{
-  // Using numeric values
-  transformOrigin: [10, 30, 40],
-  // Mixing numeric and percentage values
-  transformOrigin: [10, '20%', 0],
-}
-```
-
-You may refer to MDN's guide on [Transform origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin) for additional information.
+---
+id: transforms
+title: Transforms
+---
+
+Transforms are style properties that will help you modify the appearance and position of your components using 2D or 3D transformations. However, once you apply transforms, the layouts remain the same around the transformed component hence it might overlap with the nearby components. You can apply margin to the transformed component, the nearby components or padding to the container to prevent such overlaps.
+
+## Example
+
+```SnackPlayer name=Transforms%20Example
+import {ScrollView, StyleSheet, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => (
+  <SafeAreaProvider>
+    <SafeAreaView style={styles.container}>
+      <ScrollView contentContainerStyle={styles.scrollContentContainer}>
+        <View style={styles.box}>
+          <Text style={styles.text}>Original Object</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{scale: 2}],
+            },
+          ]}>
+          <Text style={styles.text}>Scale by 2</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{scaleX: 2}],
+            },
+          ]}>
+          <Text style={styles.text}>ScaleX by 2</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{scaleY: 2}],
+            },
+          ]}>
+          <Text style={styles.text}>ScaleY by 2</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{rotate: '45deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>Rotate by 45 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{rotateX: '45deg'}, {rotateZ: '45deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>Rotate X&Z by 45 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{rotateY: '45deg'}, {rotateZ: '45deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>Rotate Y&Z by 45 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{skewX: '45deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>SkewX by 45 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{skewY: '45deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>SkewY by 45 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{skewX: '30deg'}, {skewY: '30deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>Skew X&Y by 30 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{translateX: -50}],
+            },
+          ]}>
+          <Text style={styles.text}>TranslateX by -50 </Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{translateY: 50}],
+            },
+          ]}>
+          <Text style={styles.text}>TranslateY by 50 </Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [
+                {
+                  matrix: [1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
+                },
+              ],
+            },
+          ]}>
+          <Text style={styles.text}>Matrix Transform</Text>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollContentContainer: {
+    alignItems: 'center',
+    paddingBottom: 60,
+  },
+  box: {
+    height: 100,
+    width: 100,
+    borderRadius: 5,
+    marginVertical: 40,
+    backgroundColor: '#61dafb',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    margin: 8,
+    color: '#000',
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Transform
+
+`transform` accepts an array of transformation objects or space-separated string values. Each object specifies the property that will be transformed as the key, and the value to use in the transformation. Objects should not be combined. Use a single key/value pair per object.
+
+The rotate transformations require a string so that the transform may be expressed in degrees (deg) or radians (rad). For example:
+
+```js
+{
+  transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}],
+}
+```
+
+The same could also be achieved using a space-separated string:
+
+```js
+{
+  transform: 'rotateX(45deg) rotateZ(0.785398rad)',
+}
+```
+
+The skew transformations require a string so that the transform may be expressed in degrees (deg). For example:
+
+```js
+{
+  transform: [{skewX: '45deg'}],
+}
+```
+
+### Matrix Transform
+
+The `matrix` transform accepts a 4x4 transformation matrix as an array of 16 numbers. This allows you to apply complex transformations that combine translation, rotation, scaling, and skewing in a single operation.
+
+The matrix is specified in column-major order:
+
+```js
+{
+  transform: [
+    {
+      matrix: [
+        scaleX,
+        skewY,
+        0,
+        0,
+        skewX,
+        scaleY,
+        0,
+        0,
+        0,
+        0,
+        1,
+        0,
+        translateX,
+        translateY,
+        0,
+        1,
+      ],
+    },
+  ];
+}
+```
+
+For example, to apply a combination of scale and skew:
+
+```js
+{
+  transform: [
+    {
+      matrix: [
+        1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
+      ],
+    },
+  ];
+}
+```
+
+:::note
+Matrix transforms are useful when you need to apply pre-calculated transformation matrices, such as those from animation libraries or when building UI editor applications. For basic transformations, it's recommended to use the individual transform properties (scale, rotate, translate, etc.) as they are more readable.
+:::
+
+| Type                                                                                                                                                                                                                                                                                                          | Required |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
+| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number}`, `{translateY: number}`, `{skewX: string}`, `{skewY: string}` or string | No       |
+
+---
+
+### 🗑️ `decomposedMatrix`, `rotation`, `scaleX`, `scaleY`, `transformMatrix`, `translateX`, `translateY`
+
+:::warning[Deprecated]
+Use the [`transform`](transforms#transform) prop instead.
+:::
+
+## Transform Origin
+
+The `transformOrigin` property sets the origin for a view's transformations. The transform origin is the point around which a transformation is applied. By default, the origin of a transform is `center`.
+
+# Example
+
+```SnackPlayer name=TransformOrigin%20Example
+import {useEffect, useRef} from 'react';
+import {Animated, View, StyleSheet, Easing} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const rotateAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.timing(rotateAnim, {
+        toValue: 1,
+        duration: 5000,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      }),
+    ).start();
+  }, [rotateAnim]);
+
+  const spin = rotateAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.transformOriginWrapper}>
+          <Animated.View
+            style={[
+              styles.transformOriginView,
+              {
+                transform: [{rotate: spin}],
+              },
+            ]}
+          />
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  transformOriginWrapper: {
+    borderWidth: 1,
+    borderColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  transformOriginView: {
+    backgroundColor: 'pink',
+    width: 100,
+    height: 100,
+    transformOrigin: 'top',
+  },
+});
+
+export default App;
+```
+
+### Values
+
+Transform origin supports `px`, `percentage` and keywords `top`, `left`, `right`, `bottom`, `center` values.
+
+The `transformOrigin` property may be specified using one, two, or three values, where each value represents an offset.
+
+#### One-value syntax:
+
+- The value must be a `px`, a `percentage`, or one of the keywords `left`, `center`, `right`, `top`, and `bottom`.
+
+```js
+{
+  transformOrigin: '20px',
+  transformOrigin: 'bottom',
+}
+```
+
+#### Two-value syntax:
+
+- First value (x-offset) must be a `px`, a `percentage`, or one of the keywords `left`, `center`, and `right`.
+- The second value (y-offset) must be a `px`, a `percentage`, or one of the keywords `top`, `center`, and `bottom`.
+
+```js
+{
+  transformOrigin: '10px 2px',
+  transformOrigin: 'left top',
+  transformOrigin: 'top right',
+}
+```
+
+#### Three-value syntax:
+
+- The first two values are the same as for the two-value syntax.
+- The third value (z-offset) must be a `px`. It always represents the Z offset.
+
+```js
+{
+  transformOrigin: '2px 30% 10px',
+  transformOrigin: 'right bottom 20px',
+}
+```
+
+#### Array syntax
+
+`transformOrigin` also supports an array syntax. It makes it convenient to use it with Animated APIs. It also avoids string parsing, so should be more efficient.
+
+```js
+{
+  // Using numeric values
+  transformOrigin: [10, 30, 40],
+  // Mixing numeric and percentage values
+  transformOrigin: [10, '20%', 0],
+}
+```
+
+You may refer to MDN's guide on [Transform origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin) for additional information.
diff --git a/website/versioned_docs/version-0.83/troubleshooting.md b/website/versioned_docs/version-0.83/troubleshooting.md
index 811302be504..540f38b984f 100644
--- a/website/versioned_docs/version-0.83/troubleshooting.md
+++ b/website/versioned_docs/version-0.83/troubleshooting.md
@@ -91,7 +91,6 @@ To revert the `User Search Header Paths` and `Header Search Paths` build setting
 React Native implements a polyfill for WebSockets. These [polyfills](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Core/InitializeCore.js) are initialized as part of the react-native module that you include in your application through `import React from 'react'`. If you load another module that requires WebSockets, such as [Firebase](https://github.com/facebook/react-native/issues/3645), be sure to load/require it after react-native:
 
 ```
-import React from 'react';
 import Firebase from 'firebase';
 ```
 
diff --git a/website/versioned_docs/version-0.83/turbo-native-modules.md b/website/versioned_docs/version-0.83/turbo-native-modules.md
index eeef8624578..1d41bd06ce9 100644
--- a/website/versioned_docs/version-0.83/turbo-native-modules.md
+++ b/website/versioned_docs/version-0.83/turbo-native-modules.md
@@ -1,260 +1,260 @@
----
-id: turbo-native-modules-introduction
-title: 'Native Modules: Introduction'
----
-
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import constants from '@site/core/TabsConstants';
-import CodeBlock from '@theme/CodeBlock';
-import {getCurrentVersion} from '@site/src/getCurrentVersion';
-import {TurboNativeModulesAndroid, TurboNativeModulesIOS} from './\_turbo-native-modules-components';
-
-# Native Modules
-
-Your React Native application code may need to interact with native platform APIs that aren't provided by React Native or an existing library. You can write the integration code yourself using a **Turbo Native Module**. This guide will show you how to write one.
-
-The basic steps are:
-
-1. **define a typed JavaScript specification** using one of the most popular JavaScript type annotation languages: Flow or TypeScript;
-2. **configure your dependency management system to run Codegen**, which converts the specification into native language interfaces;
-3. **write your application code** using your specification; and
-4. **write your native platform code using the generated interfaces** to write and hook your native code into the React Native runtime environment.
-
-Lets work through each of these steps by building an example Turbo Native Module. The rest of this guide assume that you have created your application running the command:
-
-<CodeBlock language="bash" title="shell">
-{`npx @react-native-community/cli@latest init TurboModuleExample --version ${getCurrentVersion()}`}
-</CodeBlock>
-
-## Native Persistent Storage
-
-This guide will show you how to write an implementation of the [Web Storage API](https://html.spec.whatwg.org/multipage/webstorage.html#dom-localstorage-dev): `localStorage`. The API is relatable to a React developer who might be writing application code on your project.
-
-To make this work on mobile, we need to use Android and iOS APIs:
-
-- Android: [SharedPreferences](https://developer.android.com/reference/android/content/SharedPreferences), and
-- iOS: [NSUserDefaults](https://developer.apple.com/documentation/foundation/nsuserdefaults).
-
-### 1. Declare Typed Specification
-
-React Native provides a tool called [Codegen](/docs/the-new-architecture/what-is-codegen), which takes a specification written in TypeScript or Flow and generates platform specific code for Android and iOS. The specification declares the methods and data types that will pass back and forth between your native code and the React Native JavaScript runtime. A Turbo Native Module is both your specification, the native code you write, and the Codegen interfaces generated from your specification.
-
-To create a specs file:
-
-1. Inside the root folder of your app, create a new folder called `specs`.
-2. Create a new file called `NativeLocalStorage.ts`.
-
-:::info
-You can see all of the types you can use in your specification and the native types that are generated in the [Appendix](/docs/appendix) documentation.
-:::
-
-:::info
-If you want to change the name of your module and the related specs file, make sure to always use 'Native' as prefix (e.g. `NativeStorage` or `NativeUsersDefault`).
-:::
-
-Here is an implementation of the `localStorage` specification:
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultJavaScriptSpecLanguage} values={constants.javaScriptSpecLanguages}>
-<TabItem value="typescript">
-
-```typescript title="specs/NativeLocalStorage.ts"
-import type {TurboModule} from 'react-native';
-import {TurboModuleRegistry} from 'react-native';
-
-export interface Spec extends TurboModule {
-  setItem(value: string, key: string): void;
-  getItem(key: string): string | null;
-  removeItem(key: string): void;
-  clear(): void;
-}
-
-export default TurboModuleRegistry.getEnforcing<Spec>(
-  'NativeLocalStorage',
-);
-```
-
-</TabItem>
-<TabItem value="flow">
-
-```flow title="NativeLocalStorage.js"
-import type {TurboModule} from 'react-native';
-import {TurboModule, TurboModuleRegistry} from 'react-native';
-
-export interface Spec extends TurboModule {
-  setItem(value: string, key: string): void;
-  getItem(key: string): ?string;
-  removeItem(key: string): void;
-  clear(): void;
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 2. Configure Codegen to run
-
-The specification is used by the React Native Codegen tools to generate platform specific interfaces and boilerplate for us. To do this, Codegen needs to know where to find our specification and what to do with it. Update your `package.json` to include:
-
-```json title="package.json"
-     "start": "react-native start",
-     "test": "jest"
-   },
-   // highlight-add-start
-   "codegenConfig": {
-     "name": "NativeLocalStorageSpec",
-     "type": "modules",
-     "jsSrcsDir": "specs",
-     "android": {
-       "javaPackageName": "com.nativelocalstorage"
-     }
-   },
-   // highlight-add-end
-   "dependencies": {
-```
-
-With everything wired up for Codegen, we need to prepare our native code to hook into our generated code.
-
-<Tabs groupId="platforms" queryString defaultValue={constants.defaultPlatform}>
-<TabItem value="android" label="Android">
-Codegen is executed through the `generateCodegenArtifactsFromSchema` Gradle task:
-
-```bash
-cd android
-./gradlew generateCodegenArtifactsFromSchema
-
-BUILD SUCCESSFUL in 837ms
-14 actionable tasks: 3 executed, 11 up-to-date
-```
-
-This is automatically run when you build your Android application.
-</TabItem>
-<TabItem value="ios" label="iOS">
-Codegen is run as part of the script phases that's automatically added to the project generated by CocoaPods.
-
-```bash
-cd ios
-bundle install
-bundle exec pod install
-```
-
-The output will look like this:
-
-```shell
-...
-Framework build type is static library
-[Codegen] Adding script_phases to ReactCodegen.
-[Codegen] Generating ./build/generated/ios/ReactCodegen.podspec.json
-[Codegen] Analyzing /Users/me/src/TurboModuleExample/package.json
-[Codegen] Searching for codegen-enabled libraries in the app.
-[Codegen] Found TurboModuleExample
-[Codegen] Searching for codegen-enabled libraries in the project dependencies.
-[Codegen] Found react-native
-...
-```
-
-</TabItem>
-</Tabs>
-
-### 3. Write Application Code using the Turbo Native Module
-
-Using `NativeLocalStorage`, here’s a modified `App.tsx` that includes some text we want persisted, an input field and some buttons to update this value.
-
-The `TurboModuleRegistry` supports 2 modes of retrieving a Turbo Native Module:
-
-- `get<T>(name: string): T | null` which will return `null` if the Turbo Native Module is unavailable.
-- `getEnforcing<T>(name: string): T` which will throw an exception if the Turbo Native Module is unavailable. This assumes the module is always available.
-
-```tsx title="App.tsx"
-import React from 'react';
-import {
-  SafeAreaView,
-  StyleSheet,
-  Text,
-  TextInput,
-  Button,
-} from 'react-native';
-
-import NativeLocalStorage from './specs/NativeLocalStorage';
-
-const EMPTY = '<empty>';
-
-function App(): React.JSX.Element {
-  const [value, setValue] = React.useState<string | null>(null);
-
-  const [editingValue, setEditingValue] = React.useState<
-    string | null
-  >(null);
-
-  React.useEffect(() => {
-    const storedValue = NativeLocalStorage?.getItem('myKey');
-    setValue(storedValue ?? '');
-  }, []);
-
-  function saveValue() {
-    NativeLocalStorage?.setItem(editingValue ?? EMPTY, 'myKey');
-    setValue(editingValue);
-  }
-
-  function clearAll() {
-    NativeLocalStorage?.clear();
-    setValue('');
-  }
-
-  function deleteValue() {
-    NativeLocalStorage?.removeItem('myKey');
-    setValue('');
-  }
-
-  return (
-    <SafeAreaView style={{flex: 1}}>
-      <Text style={styles.text}>
-        Current stored value is: {value ?? 'No Value'}
-      </Text>
-      <TextInput
-        placeholder="Enter the text you want to store"
-        style={styles.textInput}
-        onChangeText={setEditingValue}
-      />
-      <Button title="Save" onPress={saveValue} />
-      <Button title="Delete" onPress={deleteValue} />
-      <Button title="Clear" onPress={clearAll} />
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  text: {
-    margin: 10,
-    fontSize: 20,
-  },
-  textInput: {
-    margin: 10,
-    height: 40,
-    borderColor: 'black',
-    borderWidth: 1,
-    paddingLeft: 5,
-    paddingRight: 5,
-    borderRadius: 5,
-  },
-});
-
-export default App;
-```
-
-### 4. Write your Native Platform code
-
-With everything prepared, we're going to start writing native platform code. We do this in 2 parts:
-
-:::note
-This guide shows you how to create a Turbo Native Module that only works with the New Architecture. If you need to support both the New Architecture and the Legacy Architecture, please refer to our [backwards compatibility guide](https://github.com/reactwg/react-native-new-architecture/blob/main/docs/backwards-compat.md).
-:::
-
-<Tabs groupId="platforms" queryString defaultValue={constants.defaultPlatform}>
-    <TabItem value="android" label="Android">
-        <TurboNativeModulesAndroid />
-    </TabItem>
-    <TabItem value="ios" label="iOS">
-        <TurboNativeModulesIOS/>
-    </TabItem>
-</Tabs>
+---
+id: turbo-native-modules-introduction
+title: 'Native Modules: Introduction'
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import constants from '@site/core/TabsConstants';
+import CodeBlock from '@theme/CodeBlock';
+import {getCurrentVersion} from '@site/src/getCurrentVersion';
+import {TurboNativeModulesAndroid, TurboNativeModulesIOS} from './\_turbo-native-modules-components';
+
+# Native Modules
+
+Your React Native application code may need to interact with native platform APIs that aren't provided by React Native or an existing library. You can write the integration code yourself using a **Turbo Native Module**. This guide will show you how to write one.
+
+The basic steps are:
+
+1. **define a typed JavaScript specification** using one of the most popular JavaScript type annotation languages: Flow or TypeScript;
+2. **configure your dependency management system to run Codegen**, which converts the specification into native language interfaces;
+3. **write your application code** using your specification; and
+4. **write your native platform code using the generated interfaces** to write and hook your native code into the React Native runtime environment.
+
+Lets work through each of these steps by building an example Turbo Native Module. The rest of this guide assume that you have created your application running the command:
+
+<CodeBlock language="bash" title="shell">
+{`npx @react-native-community/cli@latest init TurboModuleExample --version ${getCurrentVersion()}`}
+</CodeBlock>
+
+## Native Persistent Storage
+
+This guide will show you how to write an implementation of the [Web Storage API](https://html.spec.whatwg.org/multipage/webstorage.html#dom-localstorage-dev): `localStorage`. The API is relatable to a React developer who might be writing application code on your project.
+
+To make this work on mobile, we need to use Android and iOS APIs:
+
+- Android: [SharedPreferences](https://developer.android.com/reference/android/content/SharedPreferences), and
+- iOS: [NSUserDefaults](https://developer.apple.com/documentation/foundation/nsuserdefaults).
+
+### 1. Declare Typed Specification
+
+React Native provides a tool called [Codegen](/docs/the-new-architecture/what-is-codegen), which takes a specification written in TypeScript or Flow and generates platform specific code for Android and iOS. The specification declares the methods and data types that will pass back and forth between your native code and the React Native JavaScript runtime. A Turbo Native Module is both your specification, the native code you write, and the Codegen interfaces generated from your specification.
+
+To create a specs file:
+
+1. Inside the root folder of your app, create a new folder called `specs`.
+2. Create a new file called `NativeLocalStorage.ts`.
+
+:::info
+You can see all of the types you can use in your specification and the native types that are generated in the [Appendix](/docs/appendix) documentation.
+:::
+
+:::info
+If you want to change the name of your module and the related specs file, make sure to always use 'Native' as prefix (e.g. `NativeStorage` or `NativeUsersDefault`).
+:::
+
+Here is an implementation of the `localStorage` specification:
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultJavaScriptSpecLanguage} values={constants.javaScriptSpecLanguages}>
+<TabItem value="typescript">
+
+```typescript title="specs/NativeLocalStorage.ts"
+import type {TurboModule} from 'react-native';
+import {TurboModuleRegistry} from 'react-native';
+
+export interface Spec extends TurboModule {
+  setItem(value: string, key: string): void;
+  getItem(key: string): string | null;
+  removeItem(key: string): void;
+  clear(): void;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>(
+  'NativeLocalStorage',
+);
+```
+
+</TabItem>
+<TabItem value="flow">
+
+```flow title="NativeLocalStorage.js"
+import type {TurboModule} from 'react-native';
+import {TurboModule, TurboModuleRegistry} from 'react-native';
+
+export interface Spec extends TurboModule {
+  setItem(value: string, key: string): void;
+  getItem(key: string): ?string;
+  removeItem(key: string): void;
+  clear(): void;
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 2. Configure Codegen to run
+
+The specification is used by the React Native Codegen tools to generate platform specific interfaces and boilerplate for us. To do this, Codegen needs to know where to find our specification and what to do with it. Update your `package.json` to include:
+
+```json title="package.json"
+     "start": "react-native start",
+     "test": "jest"
+   },
+   // highlight-add-start
+   "codegenConfig": {
+     "name": "NativeLocalStorageSpec",
+     "type": "modules",
+     "jsSrcsDir": "specs",
+     "android": {
+       "javaPackageName": "com.nativelocalstorage"
+     }
+   },
+   // highlight-add-end
+   "dependencies": {
+```
+
+With everything wired up for Codegen, we need to prepare our native code to hook into our generated code.
+
+<Tabs groupId="platforms" queryString defaultValue={constants.defaultPlatform}>
+<TabItem value="android" label="Android">
+Codegen is executed through the `generateCodegenArtifactsFromSchema` Gradle task:
+
+```bash
+cd android
+./gradlew generateCodegenArtifactsFromSchema
+
+BUILD SUCCESSFUL in 837ms
+14 actionable tasks: 3 executed, 11 up-to-date
+```
+
+This is automatically run when you build your Android application.
+</TabItem>
+<TabItem value="ios" label="iOS">
+Codegen is run as part of the script phases that's automatically added to the project generated by CocoaPods.
+
+```bash
+cd ios
+bundle install
+bundle exec pod install
+```
+
+The output will look like this:
+
+```shell
+...
+Framework build type is static library
+[Codegen] Adding script_phases to ReactCodegen.
+[Codegen] Generating ./build/generated/ios/ReactCodegen.podspec.json
+[Codegen] Analyzing /Users/me/src/TurboModuleExample/package.json
+[Codegen] Searching for codegen-enabled libraries in the app.
+[Codegen] Found TurboModuleExample
+[Codegen] Searching for codegen-enabled libraries in the project dependencies.
+[Codegen] Found react-native
+...
+```
+
+</TabItem>
+</Tabs>
+
+### 3. Write Application Code using the Turbo Native Module
+
+Using `NativeLocalStorage`, here’s a modified `App.tsx` that includes some text we want persisted, an input field and some buttons to update this value.
+
+The `TurboModuleRegistry` supports 2 modes of retrieving a Turbo Native Module:
+
+- `get<T>(name: string): T | null` which will return `null` if the Turbo Native Module is unavailable.
+- `getEnforcing<T>(name: string): T` which will throw an exception if the Turbo Native Module is unavailable. This assumes the module is always available.
+
+```tsx title="App.tsx"
+import {useEffect, useState, type JSX} from 'react';
+import {
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  TextInput,
+  Button,
+} from 'react-native';
+
+import NativeLocalStorage from './specs/NativeLocalStorage';
+
+const EMPTY = '<empty>';
+
+function App(): JSX.Element {
+  const [value, setValue] = useState<string | null>(null);
+
+  const [editingValue, setEditingValue] = useState<string | null>(
+    null,
+  );
+
+  useEffect(() => {
+    const storedValue = NativeLocalStorage?.getItem('myKey');
+    setValue(storedValue ?? '');
+  }, []);
+
+  function saveValue() {
+    NativeLocalStorage?.setItem(editingValue ?? EMPTY, 'myKey');
+    setValue(editingValue);
+  }
+
+  function clearAll() {
+    NativeLocalStorage?.clear();
+    setValue('');
+  }
+
+  function deleteValue() {
+    NativeLocalStorage?.removeItem('myKey');
+    setValue('');
+  }
+
+  return (
+    <SafeAreaView style={{flex: 1}}>
+      <Text style={styles.text}>
+        Current stored value is: {value ?? 'No Value'}
+      </Text>
+      <TextInput
+        placeholder="Enter the text you want to store"
+        style={styles.textInput}
+        onChangeText={setEditingValue}
+      />
+      <Button title="Save" onPress={saveValue} />
+      <Button title="Delete" onPress={deleteValue} />
+      <Button title="Clear" onPress={clearAll} />
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  text: {
+    margin: 10,
+    fontSize: 20,
+  },
+  textInput: {
+    margin: 10,
+    height: 40,
+    borderColor: 'black',
+    borderWidth: 1,
+    paddingLeft: 5,
+    paddingRight: 5,
+    borderRadius: 5,
+  },
+});
+
+export default App;
+```
+
+### 4. Write your Native Platform code
+
+With everything prepared, we're going to start writing native platform code. We do this in 2 parts:
+
+:::note
+This guide shows you how to create a Turbo Native Module that only works with the New Architecture. If you need to support both the New Architecture and the Legacy Architecture, please refer to our [backwards compatibility guide](https://github.com/reactwg/react-native-new-architecture/blob/main/docs/backwards-compat.md).
+:::
+
+<Tabs groupId="platforms" queryString defaultValue={constants.defaultPlatform}>
+    <TabItem value="android" label="Android">
+        <TurboNativeModulesAndroid />
+    </TabItem>
+    <TabItem value="ios" label="iOS">
+        <TurboNativeModulesIOS/>
+    </TabItem>
+</Tabs>
diff --git a/website/versioned_docs/version-0.83/tutorial.md b/website/versioned_docs/version-0.83/tutorial.md
index d1a92919cd7..cbd5fd11bef 100644
--- a/website/versioned_docs/version-0.83/tutorial.md
+++ b/website/versioned_docs/version-0.83/tutorial.md
@@ -1,270 +1,267 @@
----
-id: tutorial
-title: Learn the Basics
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-React Native is like React, but it uses native components instead of web components as building blocks. So to understand the basic structure of a React Native app, you need to understand some of the basic React concepts, like JSX, components, `state`, and `props`. If you already know React, you still need to learn some React Native specific stuff, like the native components. This tutorial is aimed at all audiences, whether you have React experience or not.
-
-Let's do this thing.
-
-## Hello World
-
-In accordance with the ancient traditions of our people, we must first build an app that does nothing except say "Hello, world!". Here it is:
-
-```SnackPlayer name=Hello%20World
-import React from 'react';
-import {Text, View} from 'react-native';
-
-const HelloWorldApp = () => {
-  return (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}>
-      <Text>Hello, world!</Text>
-    </View>
-  );
-};
-export default HelloWorldApp;
-```
-
-If you are feeling curious, you can play around with sample code directly in the web simulators. You can also paste it into your `App.js` file to create a real app on your local machine.
-
-## What's going on here?
-
-1. First of all, we need to import `React` to be able to use `JSX`, which will then be transformed to the native components of each platform.
-2. On line 2, we import the `Text` and `View` components from `react-native`
-
-Then we define the `HelloWorldApp` function, which is a [function component](https://react.dev/reference/react/Component) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child.
-
-The `Text` component allows us to render a text, while the `View` component renders a container. This container has several styles applied, let's analyze what each one is doing.
-
-The first style that we find is `flex: 1`, the [`flex`](layout-props#flex) prop will define how your items are going to "fill" over the available space along your main axis. Since we only have one container, it will take all the available space of the parent component. In this case, it is the only component, so it will take all the available screen space.
-
-The following style is [`justifyContent`](layout-props#justifycontent): "center". This aligns children of a container in the center of the container's main axis. Finally, we have [`alignItems`](layout-props#alignitems): "center", which aligns children of a container in the center of the container's cross axis.
-
-Some of the things in here might not look like JavaScript to you. Don't panic. _This is the future_.
-
-First of all, ES2015 (also known as ES6) is a set of improvements to JavaScript that is now part of the official standard, but not yet supported by all browsers, so often it isn't used yet in web development. React Native ships with ES2015 support, so you can use this stuff without worrying about compatibility. `import`, `export`, `const` and `from` in the example above are all ES2015 features. If you aren't familiar with ES2015, you can probably pick it up by reading through sample code like this tutorial has. If you want, [this page](https://babeljs.io/learn-es2015/) has a good overview of ES2015 features.
-
-The other unusual thing in this code example is `<View><Text>Hello world!</Text></View>`. This is JSX - a syntax for embedding XML within JavaScript. Many frameworks use a specialized templating language which lets you embed code inside markup language. In React, this is reversed. JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like `<div>` or `<span>`, you use React components. In this case, `<Text>` is a [Core Component](intro-react-native-components) that displays some text and `View` is like the `<div>` or `<span>`.
-
-## Components
-
-So this code is defining `HelloWorldApp`, a new `Component`. When you're building a React Native app, you'll be making new components a lot. Anything you see on the screen is some sort of component.
-
-## Props
-
-Most components can be customized when they are created, with different parameters. These creation parameters are called props.
-
-Your own components can also use `props`. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place. Refer to `props.YOUR_PROP_NAME` in your functional components or `this.props.YOUR_PROP_NAME` in your class components. Here's an example:
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Hello%20Props&ext=js
-import React from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-
-const styles = StyleSheet.create({
-  center: {
-    alignItems: 'center',
-  },
-});
-
-const Greeting = props => {
-  return (
-    <View style={styles.center}>
-      <Text>Hello {props.name}!</Text>
-    </View>
-  );
-};
-
-const LotsOfGreetings = () => {
-  return (
-    <View style={[styles.center, {top: 50}]}>
-      <Greeting name="Rexxar" />
-      <Greeting name="Jaina" />
-      <Greeting name="Valeera" />
-    </View>
-  );
-};
-
-export default LotsOfGreetings;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Hello%20Props&ext=tsx
-import React from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-
-const styles = StyleSheet.create({
-  center: {
-    alignItems: 'center',
-  },
-});
-
-type GreetingProps = {
-  name: string;
-};
-
-const Greeting = (props: GreetingProps) => {
-  return (
-    <View style={styles.center}>
-      <Text>Hello {props.name}!</Text>
-    </View>
-  );
-};
-
-const LotsOfGreetings = () => {
-  return (
-    <View style={[styles.center, {top: 50}]}>
-      <Greeting name="Rexxar" />
-      <Greeting name="Jaina" />
-      <Greeting name="Valeera" />
-    </View>
-  );
-};
-
-export default LotsOfGreetings;
-```
-
-</TabItem>
-</Tabs>
-
-Using `name` as a prop lets us customize the `Greeting` component, so we can reuse that component for each of our greetings. This example also uses the `Greeting` component in JSX. The power to do this is what makes React so cool.
-
-The other new thing going on here is the [`View`](view.md) component. A [`View`](view.md) is useful as a container for other components, to help control style and layout.
-
-With `props` and the basic [`Text`](text.md), [`Image`](image.md), and [`View`](view.md) components, you can build a wide variety of static screens. To learn how to make your app change over time, you need to [learn about State](#state).
-
-## State
-
-Unlike props [that are read-only](https://react.dev/reference/react/Component#props) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else.
-
-#### What's the difference between state and props in React?
-
-In a React component, the props are the variables that we pass from a parent component to a child component. Similarly, the state are also variables, with the difference that they are not passed as parameters, but rather that the component initializes and manages them internally.
-
-#### Are there differences between React and React Native to handle the state?
-
-<div className="two-columns">
-
-```tsx
-// ReactJS Counter Example using Hooks!
-
-import React, {useState} from 'react';
-
-
-
-const App = () => {
-  const [count, setCount] = useState(0);
-
-  return (
-    <div className="container">
-      <p>You clicked {count} times</p>
-      <button
-        onClick={() => setCount(count + 1)}>
-        Click me!
-      </button>
-    </div>
-  );
-};
-
-
-// CSS
-.container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-```
-
-```tsx
-// React Native Counter Example using Hooks!
-
-import React, {useState} from 'react';
-import {View, Text, Button, StyleSheet} from 'react-native';
-
-const App = () => {
-  const [count, setCount] = useState(0);
-
-  return (
-    <View style={styles.container}>
-      <Text>You clicked {count} times</Text>
-      <Button
-        onPress={() => setCount(count + 1)}
-        title="Click me!"
-      />
-    </View>
-  );
-};
-
-// React Native Styles
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-```
-
-</div>
-
-As shown above, there is no difference in handling the `state` between [React](https://react.dev/learn/state-a-components-memory) and `React Native`. You can use the state of your components both in classes and in function components using [hooks](https://react.dev/reference/react/useState)!
-
-In the following example we will show the same above counter example using classes.
-
-```SnackPlayer name=Hello%20Classes
-import React, {Component} from 'react';
-import {StyleSheet, TouchableOpacity, Text, View} from 'react-native';
-
-class App extends Component {
-  state = {
-    count: 0,
-  };
-
-  onPress = () => {
-    this.setState({
-      count: this.state.count + 1,
-    });
-  };
-
-  render() {
-    return (
-      <View style={styles.container}>
-        <TouchableOpacity style={styles.button} onPress={this.onPress}>
-          <Text>Click me</Text>
-        </TouchableOpacity>
-        <View>
-          <Text>You clicked {this.state.count} times</Text>
-        </View>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  button: {
-    alignItems: 'center',
-    backgroundColor: '#DDDDDD',
-    padding: 10,
-    marginBottom: 10,
-  },
-});
-
-export default App;
-```
+---
+id: tutorial
+title: Learn the Basics
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+React Native is like React, but it uses native components instead of web components as building blocks. So to understand the basic structure of a React Native app, you need to understand some of the basic React concepts, like JSX, components, `state`, and `props`. If you already know React, you still need to learn some React Native specific stuff, like the native components. This tutorial is aimed at all audiences, whether you have React experience or not.
+
+Let's do this thing.
+
+## Hello World
+
+In accordance with the ancient traditions of our people, we must first build an app that does nothing except say "Hello, world!". Here it is:
+
+```SnackPlayer name=Hello%20World
+import {Text, View} from 'react-native';
+
+const HelloWorldApp = () => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}>
+      <Text>Hello, world!</Text>
+    </View>
+  );
+};
+export default HelloWorldApp;
+```
+
+If you are feeling curious, you can play around with sample code directly in the web simulators. You can also paste it into your `App.js` file to create a real app on your local machine.
+
+## What's going on here?
+
+1. First of all, we need to import `React` to be able to use `JSX`, which will then be transformed to the native components of each platform.
+2. On line 2, we import the `Text` and `View` components from `react-native`
+
+Then we define the `HelloWorldApp` function, which is a [function component](https://react.dev/reference/react/Component) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child.
+
+The `Text` component allows us to render a text, while the `View` component renders a container. This container has several styles applied, let's analyze what each one is doing.
+
+The first style that we find is `flex: 1`, the [`flex`](layout-props#flex) prop will define how your items are going to "fill" over the available space along your main axis. Since we only have one container, it will take all the available space of the parent component. In this case, it is the only component, so it will take all the available screen space.
+
+The following style is [`justifyContent`](layout-props#justifycontent): "center". This aligns children of a container in the center of the container's main axis. Finally, we have [`alignItems`](layout-props#alignitems): "center", which aligns children of a container in the center of the container's cross axis.
+
+Some of the things in here might not look like JavaScript to you. Don't panic. _This is the future_.
+
+First of all, ES2015 (also known as ES6) is a set of improvements to JavaScript that is now part of the official standard, but not yet supported by all browsers, so often it isn't used yet in web development. React Native ships with ES2015 support, so you can use this stuff without worrying about compatibility. `import`, `export`, `const` and `from` in the example above are all ES2015 features. If you aren't familiar with ES2015, you can probably pick it up by reading through sample code like this tutorial has. If you want, [this page](https://babeljs.io/learn-es2015/) has a good overview of ES2015 features.
+
+The other unusual thing in this code example is `<View><Text>Hello world!</Text></View>`. This is JSX - a syntax for embedding XML within JavaScript. Many frameworks use a specialized templating language which lets you embed code inside markup language. In React, this is reversed. JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like `<div>` or `<span>`, you use React components. In this case, `<Text>` is a [Core Component](intro-react-native-components) that displays some text and `View` is like the `<div>` or `<span>`.
+
+## Components
+
+So this code is defining `HelloWorldApp`, a new `Component`. When you're building a React Native app, you'll be making new components a lot. Anything you see on the screen is some sort of component.
+
+## Props
+
+Most components can be customized when they are created, with different parameters. These creation parameters are called props.
+
+Your own components can also use `props`. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place. Refer to `props.YOUR_PROP_NAME` in your functional components or `this.props.YOUR_PROP_NAME` in your class components. Here's an example:
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Hello%20Props&ext=js
+import {Text, View, StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  center: {
+    alignItems: 'center',
+  },
+});
+
+const Greeting = props => {
+  return (
+    <View style={styles.center}>
+      <Text>Hello {props.name}!</Text>
+    </View>
+  );
+};
+
+const LotsOfGreetings = () => {
+  return (
+    <View style={[styles.center, {top: 50}]}>
+      <Greeting name="Rexxar" />
+      <Greeting name="Jaina" />
+      <Greeting name="Valeera" />
+    </View>
+  );
+};
+
+export default LotsOfGreetings;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Hello%20Props&ext=tsx
+import {Text, View, StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  center: {
+    alignItems: 'center',
+  },
+});
+
+type GreetingProps = {
+  name: string;
+};
+
+const Greeting = (props: GreetingProps) => {
+  return (
+    <View style={styles.center}>
+      <Text>Hello {props.name}!</Text>
+    </View>
+  );
+};
+
+const LotsOfGreetings = () => {
+  return (
+    <View style={[styles.center, {top: 50}]}>
+      <Greeting name="Rexxar" />
+      <Greeting name="Jaina" />
+      <Greeting name="Valeera" />
+    </View>
+  );
+};
+
+export default LotsOfGreetings;
+```
+
+</TabItem>
+</Tabs>
+
+Using `name` as a prop lets us customize the `Greeting` component, so we can reuse that component for each of our greetings. This example also uses the `Greeting` component in JSX. The power to do this is what makes React so cool.
+
+The other new thing going on here is the [`View`](view.md) component. A [`View`](view.md) is useful as a container for other components, to help control style and layout.
+
+With `props` and the basic [`Text`](text.md), [`Image`](image.md), and [`View`](view.md) components, you can build a wide variety of static screens. To learn how to make your app change over time, you need to [learn about State](#state).
+
+## State
+
+Unlike props [that are read-only](https://react.dev/reference/react/Component#props) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else.
+
+#### What's the difference between state and props in React?
+
+In a React component, the props are the variables that we pass from a parent component to a child component. Similarly, the state are also variables, with the difference that they are not passed as parameters, but rather that the component initializes and manages them internally.
+
+#### Are there differences between React and React Native to handle the state?
+
+<div className="two-columns">
+
+```tsx
+// React Counter Example using Hooks!
+
+import {useState} from 'react';
+
+
+
+const App = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="container">
+      <p>You clicked {count} times</p>
+      <button
+        onClick={() => setCount(count + 1)}>
+        Click me!
+      </button>
+    </div>
+  );
+};
+
+
+// CSS
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+```
+
+```tsx
+// React Native Counter Example using Hooks!
+
+import {useState} from 'react';
+import {View, Text, Button, StyleSheet} from 'react-native';
+
+const App = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <View style={styles.container}>
+      <Text>You clicked {count} times</Text>
+      <Button
+        onPress={() => setCount(count + 1)}
+        title="Click me!"
+      />
+    </View>
+  );
+};
+
+// React Native Styles
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+```
+
+</div>
+
+As shown above, there is no difference in handling the `state` between [React](https://react.dev/learn/state-a-components-memory) and `React Native`. You can use the state of your components both in classes and in function components using [hooks](https://react.dev/reference/react/useState)!
+
+In the following example we will show the same above counter example using classes.
+
+```SnackPlayer name=Hello%20Classes
+import {Component} from 'react';
+import {StyleSheet, TouchableOpacity, Text, View} from 'react-native';
+
+class App extends Component {
+  state = {
+    count: 0,
+  };
+
+  onPress = () => {
+    this.setState({
+      count: this.state.count + 1,
+    });
+  };
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <TouchableOpacity style={styles.button} onPress={this.onPress}>
+          <Text>Click me</Text>
+        </TouchableOpacity>
+        <View>
+          <Text>You clicked {this.state.count} times</Text>
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#DDDDDD',
+    padding: 10,
+    marginBottom: 10,
+  },
+});
+
+export default App;
+```
diff --git a/website/versioned_docs/version-0.83/usecolorscheme.md b/website/versioned_docs/version-0.83/usecolorscheme.md
index 4d326283eeb..70620f7b6d1 100644
--- a/website/versioned_docs/version-0.83/usecolorscheme.md
+++ b/website/versioned_docs/version-0.83/usecolorscheme.md
@@ -20,7 +20,6 @@ The `useColorScheme` React hook provides and subscribes to color scheme updates
 ## Example
 
 ```SnackPlayer
-import React from 'react';
 import {Text, StyleSheet, useColorScheme} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.83/usewindowdimensions.md b/website/versioned_docs/version-0.83/usewindowdimensions.md
index 92bb1931d32..3e8a8077370 100644
--- a/website/versioned_docs/version-0.83/usewindowdimensions.md
+++ b/website/versioned_docs/version-0.83/usewindowdimensions.md
@@ -16,7 +16,6 @@ const {height, width} = useWindowDimensions();
 ## Example
 
 ```SnackPlayer name=useWindowDimensions&supportedPlatforms=ios,android
-import React from 'react';
 import {StyleSheet, Text, useWindowDimensions} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.83/using-a-listview.md b/website/versioned_docs/version-0.83/using-a-listview.md
index cf13fa66a6c..a5a04f40279 100644
--- a/website/versioned_docs/version-0.83/using-a-listview.md
+++ b/website/versioned_docs/version-0.83/using-a-listview.md
@@ -12,7 +12,6 @@ The `FlatList` component requires two props: `data` and `renderItem`. `data` is
 This example creates a basic `FlatList` of hardcoded data. Each item in the `data` props is rendered as a `Text` component. The `FlatListBasics` component then renders the `FlatList` and all `Text` components.
 
 ```SnackPlayer name=FlatList%20Basics
-import React from 'react';
 import {FlatList, StyleSheet, Text, View} from 'react-native';
 
 const styles = StyleSheet.create({
@@ -55,7 +54,6 @@ export default FlatListBasics;
 If you want to render a set of data broken into logical sections, maybe with section headers, similar to `UITableView` on iOS, then a [SectionList](sectionlist.md) is the way to go.
 
 ```SnackPlayer name=SectionList%20Basics
-import React from 'react';
 import {SectionList, StyleSheet, Text, View} from 'react-native';
 
 const styles = StyleSheet.create({
diff --git a/website/versioned_docs/version-0.83/using-a-scrollview.md b/website/versioned_docs/version-0.83/using-a-scrollview.md
index e4de6207a71..3ffae817bf0 100644
--- a/website/versioned_docs/version-0.83/using-a-scrollview.md
+++ b/website/versioned_docs/version-0.83/using-a-scrollview.md
@@ -8,7 +8,6 @@ The [ScrollView](scrollview.md) is a generic scrolling container that can contai
 This example creates a vertical `ScrollView` with both images and text mixed together.
 
 ```SnackPlayer name=Using%20ScrollView
-import React from 'react';
 import {Image, ScrollView, Text} from 'react-native';
 
 const logo = {
diff --git a/website/versioned_docs/version-0.83/vibration.md b/website/versioned_docs/version-0.83/vibration.md
index 44a0af2db43..bdb564ab331 100644
--- a/website/versioned_docs/version-0.83/vibration.md
+++ b/website/versioned_docs/version-0.83/vibration.md
@@ -8,7 +8,6 @@ Vibrates the device.
 ## Example
 
 ```SnackPlayer name=Vibration%20Example&supportedPlatforms=ios,android
-import React from 'react';
 import {
   Button,
   Platform,
diff --git a/website/versioned_docs/version-0.83/view-style-props.md b/website/versioned_docs/version-0.83/view-style-props.md
index 4f1c413c202..c464a3fa559 100644
--- a/website/versioned_docs/version-0.83/view-style-props.md
+++ b/website/versioned_docs/version-0.83/view-style-props.md
@@ -9,7 +9,6 @@ import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameFor
 ### Example
 
 ```SnackPlayer name=ViewStyleProps
-import React from 'react';
 import {View, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.83/view.md b/website/versioned_docs/version-0.83/view.md
index 3fd3c7fb4bd..405218dcc9b 100644
--- a/website/versioned_docs/version-0.83/view.md
+++ b/website/versioned_docs/version-0.83/view.md
@@ -12,7 +12,6 @@ The most fundamental component for building a UI, `View` is a container that sup
 This example creates a `View` that wraps two boxes with color and a text component in a row with padding.
 
 ```SnackPlayer name=View%20Example
-import React from 'react';
 import {View, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.83/virtualizedlist.md b/website/versioned_docs/version-0.83/virtualizedlist.md
index 9f80ad78258..327e665db76 100644
--- a/website/versioned_docs/version-0.83/virtualizedlist.md
+++ b/website/versioned_docs/version-0.83/virtualizedlist.md
@@ -15,7 +15,6 @@ Virtualization massively improves memory consumption and performance of large li
 <TabItem value="javascript">
 
 ```SnackPlayer name=VirtualizedListExample&ext=js
-import React from 'react';
 import {View, VirtualizedList, StyleSheet, Text, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -71,7 +70,6 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=VirtualizedListExample&ext=tsx
-import React from 'react';
 import {View, VirtualizedList, StyleSheet, Text, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.84/_fabric-native-components.jsx b/website/versioned_docs/version-0.84/_fabric-native-components.jsx
index fc6a3171a4f..69bc6f31268 100644
--- a/website/versioned_docs/version-0.84/_fabric-native-components.jsx
+++ b/website/versioned_docs/version-0.84/_fabric-native-components.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import IOSContent from './fabric-native-components-ios.md';
 import AndroidContent from './fabric-native-components-android.md';
 
diff --git a/website/versioned_docs/version-0.84/_integration-with-existing-apps-ios.md b/website/versioned_docs/version-0.84/_integration-with-existing-apps-ios.md
index 4b95571538b..f28e3c48bf9 100644
--- a/website/versioned_docs/version-0.84/_integration-with-existing-apps-ios.md
+++ b/website/versioned_docs/version-0.84/_integration-with-existing-apps-ios.md
@@ -1,655 +1,655 @@
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import constants from '@site/core/TabsConstants';
-import CodeBlock from '@theme/CodeBlock';
-import RNTemplateRepoLink from '@site/core/RNTemplateRepoLink';
-import {getTemplateBranchNameForCurrentVersion} from '@site/src/getTemplateBranchNameForCurrentVersion';
-
-## Key Concepts
-
-The keys to integrating React Native components into your iOS application are to:
-
-1. Set up the correct directory structure.
-2. Install the necessary NPM dependencies.
-3. Adding React Native to your Podfile configuration.
-4. Writing the TypeScript code for your first React Native screen.
-5. Integrate React Native with your iOS code using a `RCTRootView`.
-6. Testing your integration by running the bundler and seeing your app in action.
-
-## Using the Community Template
-
-While you follow this guide, we suggest you to use the [React Native Community Template](https://github.com/react-native-community/template/) as reference. The template contains a **minimal iOS app** and will help you understanding how to integrate React Native into an existing iOS app.
-
-## Prerequisites
-
-Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](getting-started-without-a-framework) to configure your development environment for building React Native apps for iOS.
-This guide also assumes you're familiar with the basics of iOS development such as creating a `UIViewController` and editing the `Podfile` file.
-
-### 1. Set up directory structure
-
-To ensure a smooth experience, create a new folder for your integrated React Native project, then **move your existing iOS project** to the `/ios` subfolder.
-
-## 2. Install NPM dependencies
-
-Go to the root directory and run the following command:
-
-<CodeBlock language="bash" title="shell">
-{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/package.json`}
-</CodeBlock>
-
-This will copy the `package.json` <RNTemplateRepoLink href="template/package.json">file from the Community template</RNTemplateRepoLink> to your project.
-
-Next, install the NPM packages by running:
-
-<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
-<TabItem value="npm">
-
-```shell
-npm install
-```
-
-</TabItem>
-<TabItem value="yarn">
-
-```shell
-yarn install
-```
-
-</TabItem>
-</Tabs>
-
-Installation process has created a new `node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
-
-Add `node_modules/` to your `.gitignore` file (here the <RNTemplateRepoLink href="template/_gitignore">Community default one</RNTemplateRepoLink>).
-
-### 3. Install Development tools
-
-### Command Line Tools for Xcode
-
-Install the Command Line Tools. Choose **Settings... (or Preferences...)** in the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.
-
-![Xcode Command Line Tools](/docs/assets/GettingStartedXcodeCommandLineTools.png)
-
-### CocoaPods
-
-[CocoaPods](https://cocoapods.org) is a package management tool for iOS and macOS development. We use it to add the actual React Native framework code locally into your current project.
-
-We recommend installing CocoaPods using [Homebrew](https://brew.sh/):
-
-```shell
-brew install cocoapods
-```
-
-## 4. Adding React Native to your app
-
-### Configuring CocoaPods
-
-To configure CocoaPods, we need two files:
-
-- A **Gemfile** that defines which Ruby dependencies we need.
-- A **Podfile** that defines how to properly install our dependencies.
-
-For the **Gemfile**, go to the root directory of your project and run this command
-
-<CodeBlock language="bash" title="shell">
-{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/Gemfile`}
-</CodeBlock>
-
-This will download the Gemfile from the template.
-
-:::note
-If you created your project with Xcode 16, you need to update the Gemfile as it follows:
-
-```diff
--gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
-+gem 'cocoapods', '1.16.2'
-gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
--gem 'xcodeproj', '< 1.26.0'
-+gem 'xcodeproj', '1.27.0'
-```
-
-Xcode 16 generates a project in a slightly different ways from previous versions of Xcode, and you need the latest CocoaPods and Xcodeproj gems to make it work properly.
-:::
-
-Similarly, for the **Podfile**, go to the `ios` folder of your project and run
-
-<CodeBlock language="bash" title="shell">
-{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/ios/Podfile`}
-</CodeBlock>
-
-Please use the Community Template as a reference point for the <RNTemplateRepoLink href="template/Gemfile">Gemfile</RNTemplateRepoLink> and for the <RNTemplateRepoLink href="template/ios/Podfile">Podfile</RNTemplateRepoLink>.
-
-:::note
-Remember to change <RNTemplateRepoLink href="template/ios/Podfile#L17">this line</RNTemplateRepoLink>.
-:::
-
-Now, we need to run a couple of extra commands to install the Ruby gems and the Pods.
-Navigate to the `ios` folder and run the following commands:
-
-```sh
-bundle install
-bundle exec pod install
-```
-
-The first command will install the Ruby dependencies and the second command will actually integrate the React Native code in your application so that your iOS files can import the React Native headers.
-
-## 5. Writing the TypeScript Code
-
-Now we will actually modify the native iOS application to integrate React Native.
-
-The first bit of code we will write is the actual React Native code for the new screen that will be integrated into our application.
-
-### Create a `index.js` file
-
-First, create an empty `index.js` file in the root of your React Native project.
-
-`index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `import`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it.
-
-Our `index.js` should look as follows (here the <RNTemplateRepoLink href="template/index.js">Community template file as reference</RNTemplateRepoLink>):
-
-```js
-import {AppRegistry} from 'react-native';
-import App from './App';
-
-AppRegistry.registerComponent('HelloWorld', () => App);
-```
-
-### Create a `App.tsx` file
-
-Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX](<https://en.wikipedia.org/wiki/JSX_(JavaScript)>) expressions. It contains the root React Native component that we will integrate into our iOS application (<RNTemplateRepoLink href="template/App.tsx">link</RNTemplateRepoLink>):
-
-```tsx
-import React from 'react';
-import {
-  SafeAreaView,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  useColorScheme,
-  View,
-} from 'react-native';
-
-import {
-  Colors,
-  DebugInstructions,
-  Header,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
-function App(): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
-
-  return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundStyle.backgroundColor}
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
-        <View
-          style={{
-            backgroundColor: isDarkMode
-              ? Colors.black
-              : Colors.white,
-            padding: 24,
-          }}>
-          <Text style={styles.title}>Step One</Text>
-          <Text>
-            Edit <Text style={styles.bold}>App.tsx</Text> to
-            change this screen and see your edits.
-          </Text>
-          <Text style={styles.title}>See your changes</Text>
-          <ReloadInstructions />
-          <Text style={styles.title}>Debug</Text>
-          <DebugInstructions />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  title: {
-    fontSize: 24,
-    fontWeight: '600',
-  },
-  bold: {
-    fontWeight: '700',
-  },
-});
-
-export default App;
-```
-
-Here is the <RNTemplateRepoLink href="template/App.tsx">Community template file as reference</RNTemplateRepoLink>.
-
-## 5. Integrating with your iOS code
-
-We now need to add some native code in order to start the React Native runtime and tell it to render our React components.
-
-### Requirements
-
-React Native initialization is now unbound to any specific part of an iOS app.
-
-React Native can be initialized using a class called `RCTReactNativeFactory`, that takes care of handling the React Native lifecycle for you.
-
-Once the class is initialized, you can either start a React Native view providing a `UIWindow` object, or you can ask for the factory to generate a `UIView` that you can load in any `UIViewController.`
-
-In the following example, we will create a ViewController that can load a React Native view as it's `view`.
-
-#### Create the ReactViewController
-
-Create a new file from template (<kbd>⌘</kbd>+<kbd>N</kbd>) and choose the Cocoa Touch Class template.
-
-Make sure to select `UIViewController` as the "Subclass of" field.
-
-<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
-<TabItem value="objc">
-
-Now open the `ReactViewController.m` file and apply the following changes
-
-```diff title="ReactViewController.m"
-#import "ReactViewController.h"
-+#import <React/RCTBundleURLProvider.h>
-+#import <RCTReactNativeFactory.h>
-+#import <RCTDefaultReactNativeFactoryDelegate.h>
-+#import <RCTAppDependencyProvider.h>
-
-
-@interface ReactViewController ()
-
-@end
-
-+@interface ReactNativeFactoryDelegate: RCTDefaultReactNativeFactoryDelegate
-+@end
-
--@implementation ReactViewController
-+@implementation ReactViewController {
-+  RCTReactNativeFactory *_factory;
-+  id<RCTReactNativeFactoryDelegate> _factoryDelegate;
-+}
-
- - (void)viewDidLoad {
-     [super viewDidLoad];
-     // Do any additional setup after loading the view.
-+    _factoryDelegate = [ReactNativeFactoryDelegate new];
-+    _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new];
-+    _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate];
-+    self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"];
- }
-
-@end
-
-+@implementation ReactNativeFactoryDelegate
-+
-+- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
-+{
-+  return [self bundleURL];
-+}
-+
-+- (NSURL *)bundleURL
-+{
-+#if DEBUG
-+  return [RCTBundleURLProvider.sharedSettings jsBundleURLForBundleRoot:@"index"];
-+#else
-+  return [NSBundle.mainBundle URLForResource:@"main" withExtension:@"jsbundle"];
-+#endif
-+}
-
-@end
-
-```
-
-</TabItem>
-<TabItem value="swift">
-
-Now open the `ReactViewController.swift` file and apply the following changes
-
-```diff title="ReactViewController.swift"
-import UIKit
-+import React
-+import React_RCTAppDelegate
-+import ReactAppDependencyProvider
-
-class ReactViewController: UIViewController {
-+  var reactNativeFactory: RCTReactNativeFactory?
-+  var reactNativeFactoryDelegate: RCTReactNativeFactoryDelegate?
-
-  override func viewDidLoad() {
-    super.viewDidLoad()
-+    reactNativeFactoryDelegate = ReactNativeDelegate()
-+    reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider()
-+    reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!)
-+    view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld")
-
-  }
-}
-
-+class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {
-+    override func sourceURL(for bridge: RCTBridge) -> URL? {
-+      self.bundleURL()
-+    }
-+
-+    override func bundleURL() -> URL? {
-+      #if DEBUG
-+      RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
-+      #else
-+      Bundle.main.url(forResource: "main", withExtension: "jsbundle")
-+      #endif
-+    }
-+
-+}
-```
-
-</TabItem>
-</Tabs>
-
-#### Presenting a React Native view in a rootViewController
-
-Finally, we can present our React Native view. To do so, we need a new View Controller that can host a view in which we can load the JS content.
-We already have the initial `ViewController`, and we can make it present the `ReactViewController`. There are several ways to do so, depending on your app. For this example, we assume that you have a button that presents React Native modally.
-
-<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
-<TabItem value="objc">
-
-```diff title="ViewController.m"
-#import "ViewController.h"
-+#import "ReactViewController.h"
-
-@interface ViewController ()
-
-@end
-
-- @implementation ViewController
-+@implementation ViewController {
-+  ReactViewController *reactViewController;
-+}
-
- - (void)viewDidLoad {
-   [super viewDidLoad];
-   // Do any additional setup after loading the view.
-   self.view.backgroundColor = UIColor.systemBackgroundColor;
-+  UIButton *button = [UIButton new];
-+  [button setTitle:@"Open React Native" forState:UIControlStateNormal];
-+  [button setTitleColor:UIColor.systemBlueColor forState:UIControlStateNormal];
-+  [button setTitleColor:UIColor.blueColor forState:UIControlStateHighlighted];
-+  [button addTarget:self action:@selector(presentReactNative) forControlEvents:UIControlEventTouchUpInside];
-+  [self.view addSubview:button];
-
-+  button.translatesAutoresizingMaskIntoConstraints = NO;
-+  [NSLayoutConstraint activateConstraints:@[
-+    [button.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor],
-+    [button.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor],
-+    [button.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor],
-+    [button.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
-+  ]];
- }
-
-+- (void)presentReactNative
-+{
-+  if (reactViewController == NULL) {
-+    reactViewController = [ReactViewController new];
-+  }
-+  [self presentViewController:reactViewController animated:YES];
-+}
-
-@end
-```
-
-</TabItem>
-<TabItem value="swift">
-
-```diff title="ViewController.swift"
-import UIKit
-
-class ViewController: UIViewController {
-
-+  var reactViewController: ReactViewController?
-
-  override func viewDidLoad() {
-    super.viewDidLoad()
-    // Do any additional setup after loading the view.
-    self.view.backgroundColor = .systemBackground
-
-+    let button = UIButton()
-+    button.setTitle("Open React Native", for: .normal)
-+    button.setTitleColor(.systemBlue, for: .normal)
-+    button.setTitleColor(.blue, for: .highlighted)
-+    button.addAction(UIAction { [weak self] _ in
-+      guard let self else { return }
-+      if reactViewController == nil {
-+       reactViewController = ReactViewController()
-+      }
-+      present(reactViewController!, animated: true)
-+    }, for: .touchUpInside)
-+    self.view.addSubview(button)
-+
-+    button.translatesAutoresizingMaskIntoConstraints = false
-+    NSLayoutConstraint.activate([
-+      button.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
-+      button.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
-+      button.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
-+      button.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
-+    ])
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-Make sure to disable the Sandbox scripting. To achieve this, in Xcode, click on your app, then on build settings. Filter for script and set the `User Script Sandboxing` to `NO`. This step is needed to properly switch between the Debug and Release version of the [Hermes engine](https://github.com/facebook/hermes/blob/main/README.md) that we ship with React Native.
-
-![Disable Sandboxing](/docs/assets/disable-sandboxing.png)
-
-Finally, make sure to add the `UIViewControllerBasedStatusBarAppearance` key into your `Info.plist` file, with value of `NO`.
-
-![Disable UIViewControllerBasedStatusBarAppearance](/docs/assets/disable-UIViewControllerBasedStatusBarAppearance.png)
-
-## 6. Test your integration
-
-You have completed all the basic steps to integrate React Native with your application. Now we will start the [Metro bundler](https://metrobundler.dev/) to build your TypeScript application code into a bundle. Metro's HTTP server shares the bundle from `localhost` on your developer environment to a simulator or device. This allows for [hot reloading](https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading).
-
-First, you need to create a `metro.config.js` file in the root of your project as follows:
-
-```js
-const {getDefaultConfig} = require('@react-native/metro-config');
-module.exports = getDefaultConfig(__dirname);
-```
-
-You can checkout the <RNTemplateRepoLink href="template/metro.config.js">`metro.config.js` file</RNTemplateRepoLink> from the Community template file as reference.
-
-Then, you need to create a `.watchmanconfig` file in the root of your project. The file must contain an empty json object:
-
-```sh
-echo {} > .watchmanconfig
-```
-
-Once you have the configuration file in place, you can run the bundler. Run the following command in the root directory of your project:
-
-<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
-<TabItem value="npm">
-
-```shell
-npm start
-```
-
-</TabItem>
-<TabItem value="yarn">
-
-```shell
-yarn start
-```
-
-</TabItem>
-</Tabs>
-
-Now build and run your iOS app as normal.
-
-Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display:
-
-<center><img src="/docs/assets/EmbeddedAppIOS078.gif" width="300" /></center>
-
-### Creating a release build in Xcode
-
-You can use Xcode to create your release builds too! The only additional step is to add a script that is executed when the app is built to package your JS and images into the iOS application.
-
-1. In Xcode, select your application
-2. Click on `Build Phases`
-3. Click on the `+` in the top left corner and select `New Run Script Phase`
-4. Click on the `Run Script` line and rename the Script to `Bundle React Native code and images`
-5. Paste in the text box the following script
-
-```sh title="Build React Native code and image"
-set -e
-
-WITH_ENVIRONMENT="$REACT_NATIVE_PATH/scripts/xcode/with-environment.sh"
-REACT_NATIVE_XCODE="$REACT_NATIVE_PATH/scripts/react-native-xcode.sh"
-
-/bin/sh -c "$WITH_ENVIRONMENT $REACT_NATIVE_XCODE"
-```
-
-6. Drag and drop the script before the one called `[CP] Embed Pods Frameworks`.
-
-Now, if you build your app for Release, it will work as expected.
-
-## 7. Passing initial props to the React Native view
-
-In some case, you'd like to pass some information from the Native app to JavaScript. For example, you might want to pass the user id of the currently logged user to React Native, together with a token that can be used to retrieve information from a database.
-
-This is possible by using the `initialProperties` parameter of the `view(withModuleName:initialProperty)` overload of the `RCTReactNativeFactory` class. The following steps shows you how to do it.
-
-### Update the App.tsx file to read the initial properties.
-
-Open the `App.tsx` file and add the following code:
-
-```diff title="App.tsx"
-import {
-  Colors,
-  DebugInstructions,
-  Header,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
--function App(): React.JSX.Element {
-+function App(props): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
-
-  return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundStyle.backgroundColor}
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
--       <View
--         style={{
--           backgroundColor: isDarkMode
--             ? Colors.black
--             : Colors.white,
--           padding: 24,
--         }}>
--         <Text style={styles.title}>Step One</Text>
--         <Text>
--           Edit <Text style={styles.bold}>App.tsx</Text> to
--           change this screen and see your edits.
--         </Text>
--         <Text style={styles.title}>See your changes</Text>
--         <ReloadInstructions />
--         <Text style={styles.title}>Debug</Text>
--         <DebugInstructions />
-+         <Text style={styles.title}>UserID: {props.userID}</Text>
-+         <Text style={styles.title}>Token: {props.token}</Text>
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  title: {
-    fontSize: 24,
-    fontWeight: '600',
-+   marginLeft: 20,
-  },
-  bold: {
-    fontWeight: '700',
-  },
-});
-
-export default App;
-```
-
-These changes will tell React Native that your App component is now accepting some properties. The `RCTreactNativeFactory` will take care of passing them to the component when it's rendered.
-
-### Update the Native code to pass the initial properties to JavaScript.
-
-<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
-<TabItem value="objc">
-
-Modify the `ReactViewController.mm` to pass the initial properties to JavaScript.
-
-```diff title="ReactViewController.mm"
- - (void)viewDidLoad {
-   [super viewDidLoad];
-   // Do any additional setup after loading the view.
-
-   _factoryDelegate = [ReactNativeFactoryDelegate new];
-   _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new];
-   _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate];
--  self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"];
-+  self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld" initialProperties:@{
-+    @"userID": @"12345678",
-+    @"token": @"secretToken"
-+  }];
-}
-```
-
-</TabItem>
-<TabItem value="swift">
-
-Modify the `ReactViewController.swift` to pass the initial properties to the React Native view.
-
-```diff title="ReactViewController.swift"
-  override func viewDidLoad() {
-    super.viewDidLoad()
-    reactNativeFactoryDelegate = ReactNativeDelegate()
-    reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider()
-    reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!)
--   view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld")
-+   view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld" initialProperties: [
-+     "userID": "12345678",
-+     "token": "secretToken"
-+])
-
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-3. Run your app once again. You should see the following screen after you present the `ReactViewController`:
-
-<center>
-  <img src="/docs/assets/brownfield-with-initial-props.png" width="30%" height="30%"/>
-</center>
-
-## Now what?
-
-At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native.
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import constants from '@site/core/TabsConstants';
+import CodeBlock from '@theme/CodeBlock';
+import RNTemplateRepoLink from '@site/core/RNTemplateRepoLink';
+import {getTemplateBranchNameForCurrentVersion} from '@site/src/getTemplateBranchNameForCurrentVersion';
+
+## Key Concepts
+
+The keys to integrating React Native components into your iOS application are to:
+
+1. Set up the correct directory structure.
+2. Install the necessary NPM dependencies.
+3. Adding React Native to your Podfile configuration.
+4. Writing the TypeScript code for your first React Native screen.
+5. Integrate React Native with your iOS code using a `RCTRootView`.
+6. Testing your integration by running the bundler and seeing your app in action.
+
+## Using the Community Template
+
+While you follow this guide, we suggest you to use the [React Native Community Template](https://github.com/react-native-community/template/) as reference. The template contains a **minimal iOS app** and will help you understanding how to integrate React Native into an existing iOS app.
+
+## Prerequisites
+
+Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](getting-started-without-a-framework) to configure your development environment for building React Native apps for iOS.
+This guide also assumes you're familiar with the basics of iOS development such as creating a `UIViewController` and editing the `Podfile` file.
+
+### 1. Set up directory structure
+
+To ensure a smooth experience, create a new folder for your integrated React Native project, then **move your existing iOS project** to the `/ios` subfolder.
+
+## 2. Install NPM dependencies
+
+Go to the root directory and run the following command:
+
+<CodeBlock language="bash" title="shell">
+{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/package.json`}
+</CodeBlock>
+
+This will copy the `package.json` <RNTemplateRepoLink href="template/package.json">file from the Community template</RNTemplateRepoLink> to your project.
+
+Next, install the NPM packages by running:
+
+<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
+<TabItem value="npm">
+
+```shell
+npm install
+```
+
+</TabItem>
+<TabItem value="yarn">
+
+```shell
+yarn install
+```
+
+</TabItem>
+</Tabs>
+
+Installation process has created a new `node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
+
+Add `node_modules/` to your `.gitignore` file (here the <RNTemplateRepoLink href="template/_gitignore">Community default one</RNTemplateRepoLink>).
+
+### 3. Install Development tools
+
+### Command Line Tools for Xcode
+
+Install the Command Line Tools. Choose **Settings... (or Preferences...)** in the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.
+
+![Xcode Command Line Tools](/docs/assets/GettingStartedXcodeCommandLineTools.png)
+
+### CocoaPods
+
+[CocoaPods](https://cocoapods.org) is a package management tool for iOS and macOS development. We use it to add the actual React Native framework code locally into your current project.
+
+We recommend installing CocoaPods using [Homebrew](https://brew.sh/):
+
+```shell
+brew install cocoapods
+```
+
+## 4. Adding React Native to your app
+
+### Configuring CocoaPods
+
+To configure CocoaPods, we need two files:
+
+- A **Gemfile** that defines which Ruby dependencies we need.
+- A **Podfile** that defines how to properly install our dependencies.
+
+For the **Gemfile**, go to the root directory of your project and run this command
+
+<CodeBlock language="bash" title="shell">
+{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/Gemfile`}
+</CodeBlock>
+
+This will download the Gemfile from the template.
+
+:::note
+If you created your project with Xcode 16, you need to update the Gemfile as it follows:
+
+```diff
+-gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
++gem 'cocoapods', '1.16.2'
+gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
+-gem 'xcodeproj', '< 1.26.0'
++gem 'xcodeproj', '1.27.0'
+```
+
+Xcode 16 generates a project in a slightly different ways from previous versions of Xcode, and you need the latest CocoaPods and Xcodeproj gems to make it work properly.
+:::
+
+Similarly, for the **Podfile**, go to the `ios` folder of your project and run
+
+<CodeBlock language="bash" title="shell">
+{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/ios/Podfile`}
+</CodeBlock>
+
+Please use the Community Template as a reference point for the <RNTemplateRepoLink href="template/Gemfile">Gemfile</RNTemplateRepoLink> and for the <RNTemplateRepoLink href="template/ios/Podfile">Podfile</RNTemplateRepoLink>.
+
+:::note
+Remember to change <RNTemplateRepoLink href="template/ios/Podfile#L17">this line</RNTemplateRepoLink>.
+:::
+
+Now, we need to run a couple of extra commands to install the Ruby gems and the Pods.
+Navigate to the `ios` folder and run the following commands:
+
+```sh
+bundle install
+bundle exec pod install
+```
+
+The first command will install the Ruby dependencies and the second command will actually integrate the React Native code in your application so that your iOS files can import the React Native headers.
+
+## 5. Writing the TypeScript Code
+
+Now we will actually modify the native iOS application to integrate React Native.
+
+The first bit of code we will write is the actual React Native code for the new screen that will be integrated into our application.
+
+### Create a `index.js` file
+
+First, create an empty `index.js` file in the root of your React Native project.
+
+`index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `import`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it.
+
+Our `index.js` should look as follows (here the <RNTemplateRepoLink href="template/index.js">Community template file as reference</RNTemplateRepoLink>):
+
+```js
+import {AppRegistry} from 'react-native';
+import App from './App';
+
+AppRegistry.registerComponent('HelloWorld', () => App);
+```
+
+### Create a `App.tsx` file
+
+Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX](<https://en.wikipedia.org/wiki/JSX_(JavaScript)>) expressions. It contains the root React Native component that we will integrate into our iOS application (<RNTemplateRepoLink href="template/App.tsx">link</RNTemplateRepoLink>):
+
+```tsx
+import {type JSX} from 'react';
+import {
+  SafeAreaView,
+  ScrollView,
+  StatusBar,
+  StyleSheet,
+  Text,
+  useColorScheme,
+  View,
+} from 'react-native';
+
+import {
+  Colors,
+  DebugInstructions,
+  Header,
+  ReloadInstructions,
+} from 'react-native/Libraries/NewAppScreen';
+
+function App(): JSX.Element {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const backgroundStyle = {
+    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+  };
+
+  return (
+    <SafeAreaView style={backgroundStyle}>
+      <StatusBar
+        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
+        backgroundColor={backgroundStyle.backgroundColor}
+      />
+      <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        style={backgroundStyle}>
+        <Header />
+        <View
+          style={{
+            backgroundColor: isDarkMode
+              ? Colors.black
+              : Colors.white,
+            padding: 24,
+          }}>
+          <Text style={styles.title}>Step One</Text>
+          <Text>
+            Edit <Text style={styles.bold}>App.tsx</Text> to
+            change this screen and see your edits.
+          </Text>
+          <Text style={styles.title}>See your changes</Text>
+          <ReloadInstructions />
+          <Text style={styles.title}>Debug</Text>
+          <DebugInstructions />
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 24,
+    fontWeight: '600',
+  },
+  bold: {
+    fontWeight: '700',
+  },
+});
+
+export default App;
+```
+
+Here is the <RNTemplateRepoLink href="template/App.tsx">Community template file as reference</RNTemplateRepoLink>.
+
+## 5. Integrating with your iOS code
+
+We now need to add some native code in order to start the React Native runtime and tell it to render our React components.
+
+### Requirements
+
+React Native initialization is now unbound to any specific part of an iOS app.
+
+React Native can be initialized using a class called `RCTReactNativeFactory`, that takes care of handling the React Native lifecycle for you.
+
+Once the class is initialized, you can either start a React Native view providing a `UIWindow` object, or you can ask for the factory to generate a `UIView` that you can load in any `UIViewController.`
+
+In the following example, we will create a ViewController that can load a React Native view as it's `view`.
+
+#### Create the ReactViewController
+
+Create a new file from template (<kbd>⌘</kbd>+<kbd>N</kbd>) and choose the Cocoa Touch Class template.
+
+Make sure to select `UIViewController` as the "Subclass of" field.
+
+<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
+<TabItem value="objc">
+
+Now open the `ReactViewController.m` file and apply the following changes
+
+```diff title="ReactViewController.m"
+#import "ReactViewController.h"
++#import <React/RCTBundleURLProvider.h>
++#import <RCTReactNativeFactory.h>
++#import <RCTDefaultReactNativeFactoryDelegate.h>
++#import <RCTAppDependencyProvider.h>
+
+
+@interface ReactViewController ()
+
+@end
+
++@interface ReactNativeFactoryDelegate: RCTDefaultReactNativeFactoryDelegate
++@end
+
+-@implementation ReactViewController
++@implementation ReactViewController {
++  RCTReactNativeFactory *_factory;
++  id<RCTReactNativeFactoryDelegate> _factoryDelegate;
++}
+
+ - (void)viewDidLoad {
+     [super viewDidLoad];
+     // Do any additional setup after loading the view.
++    _factoryDelegate = [ReactNativeFactoryDelegate new];
++    _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new];
++    _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate];
++    self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"];
+ }
+
+@end
+
++@implementation ReactNativeFactoryDelegate
++
++- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
++{
++  return [self bundleURL];
++}
++
++- (NSURL *)bundleURL
++{
++#if DEBUG
++  return [RCTBundleURLProvider.sharedSettings jsBundleURLForBundleRoot:@"index"];
++#else
++  return [NSBundle.mainBundle URLForResource:@"main" withExtension:@"jsbundle"];
++#endif
++}
+
+@end
+
+```
+
+</TabItem>
+<TabItem value="swift">
+
+Now open the `ReactViewController.swift` file and apply the following changes
+
+```diff title="ReactViewController.swift"
+import UIKit
++import React
++import React_RCTAppDelegate
++import ReactAppDependencyProvider
+
+class ReactViewController: UIViewController {
++  var reactNativeFactory: RCTReactNativeFactory?
++  var reactNativeFactoryDelegate: RCTReactNativeFactoryDelegate?
+
+  override func viewDidLoad() {
+    super.viewDidLoad()
++    reactNativeFactoryDelegate = ReactNativeDelegate()
++    reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider()
++    reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!)
++    view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld")
+
+  }
+}
+
++class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {
++    override func sourceURL(for bridge: RCTBridge) -> URL? {
++      self.bundleURL()
++    }
++
++    override func bundleURL() -> URL? {
++      #if DEBUG
++      RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
++      #else
++      Bundle.main.url(forResource: "main", withExtension: "jsbundle")
++      #endif
++    }
++
++}
+```
+
+</TabItem>
+</Tabs>
+
+#### Presenting a React Native view in a rootViewController
+
+Finally, we can present our React Native view. To do so, we need a new View Controller that can host a view in which we can load the JS content.
+We already have the initial `ViewController`, and we can make it present the `ReactViewController`. There are several ways to do so, depending on your app. For this example, we assume that you have a button that presents React Native modally.
+
+<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
+<TabItem value="objc">
+
+```diff title="ViewController.m"
+#import "ViewController.h"
++#import "ReactViewController.h"
+
+@interface ViewController ()
+
+@end
+
+- @implementation ViewController
++@implementation ViewController {
++  ReactViewController *reactViewController;
++}
+
+ - (void)viewDidLoad {
+   [super viewDidLoad];
+   // Do any additional setup after loading the view.
+   self.view.backgroundColor = UIColor.systemBackgroundColor;
++  UIButton *button = [UIButton new];
++  [button setTitle:@"Open React Native" forState:UIControlStateNormal];
++  [button setTitleColor:UIColor.systemBlueColor forState:UIControlStateNormal];
++  [button setTitleColor:UIColor.blueColor forState:UIControlStateHighlighted];
++  [button addTarget:self action:@selector(presentReactNative) forControlEvents:UIControlEventTouchUpInside];
++  [self.view addSubview:button];
+
++  button.translatesAutoresizingMaskIntoConstraints = NO;
++  [NSLayoutConstraint activateConstraints:@[
++    [button.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor],
++    [button.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor],
++    [button.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor],
++    [button.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
++  ]];
+ }
+
++- (void)presentReactNative
++{
++  if (reactViewController == NULL) {
++    reactViewController = [ReactViewController new];
++  }
++  [self presentViewController:reactViewController animated:YES];
++}
+
+@end
+```
+
+</TabItem>
+<TabItem value="swift">
+
+```diff title="ViewController.swift"
+import UIKit
+
+class ViewController: UIViewController {
+
++  var reactViewController: ReactViewController?
+
+  override func viewDidLoad() {
+    super.viewDidLoad()
+    // Do any additional setup after loading the view.
+    self.view.backgroundColor = .systemBackground
+
++    let button = UIButton()
++    button.setTitle("Open React Native", for: .normal)
++    button.setTitleColor(.systemBlue, for: .normal)
++    button.setTitleColor(.blue, for: .highlighted)
++    button.addAction(UIAction { [weak self] _ in
++      guard let self else { return }
++      if reactViewController == nil {
++       reactViewController = ReactViewController()
++      }
++      present(reactViewController!, animated: true)
++    }, for: .touchUpInside)
++    self.view.addSubview(button)
++
++    button.translatesAutoresizingMaskIntoConstraints = false
++    NSLayoutConstraint.activate([
++      button.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
++      button.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
++      button.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
++      button.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
++    ])
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+Make sure to disable the Sandbox scripting. To achieve this, in Xcode, click on your app, then on build settings. Filter for script and set the `User Script Sandboxing` to `NO`. This step is needed to properly switch between the Debug and Release version of the [Hermes engine](https://github.com/facebook/hermes/blob/main/README.md) that we ship with React Native.
+
+![Disable Sandboxing](/docs/assets/disable-sandboxing.png)
+
+Finally, make sure to add the `UIViewControllerBasedStatusBarAppearance` key into your `Info.plist` file, with value of `NO`.
+
+![Disable UIViewControllerBasedStatusBarAppearance](/docs/assets/disable-UIViewControllerBasedStatusBarAppearance.png)
+
+## 6. Test your integration
+
+You have completed all the basic steps to integrate React Native with your application. Now we will start the [Metro bundler](https://metrobundler.dev/) to build your TypeScript application code into a bundle. Metro's HTTP server shares the bundle from `localhost` on your developer environment to a simulator or device. This allows for [hot reloading](https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading).
+
+First, you need to create a `metro.config.js` file in the root of your project as follows:
+
+```js
+const {getDefaultConfig} = require('@react-native/metro-config');
+module.exports = getDefaultConfig(__dirname);
+```
+
+You can checkout the <RNTemplateRepoLink href="template/metro.config.js">`metro.config.js` file</RNTemplateRepoLink> from the Community template file as reference.
+
+Then, you need to create a `.watchmanconfig` file in the root of your project. The file must contain an empty json object:
+
+```sh
+echo {} > .watchmanconfig
+```
+
+Once you have the configuration file in place, you can run the bundler. Run the following command in the root directory of your project:
+
+<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
+<TabItem value="npm">
+
+```shell
+npm start
+```
+
+</TabItem>
+<TabItem value="yarn">
+
+```shell
+yarn start
+```
+
+</TabItem>
+</Tabs>
+
+Now build and run your iOS app as normal.
+
+Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display:
+
+<center><img src="/docs/assets/EmbeddedAppIOS078.gif" width="300" /></center>
+
+### Creating a release build in Xcode
+
+You can use Xcode to create your release builds too! The only additional step is to add a script that is executed when the app is built to package your JS and images into the iOS application.
+
+1. In Xcode, select your application
+2. Click on `Build Phases`
+3. Click on the `+` in the top left corner and select `New Run Script Phase`
+4. Click on the `Run Script` line and rename the Script to `Bundle React Native code and images`
+5. Paste in the text box the following script
+
+```sh title="Build React Native code and image"
+set -e
+
+WITH_ENVIRONMENT="$REACT_NATIVE_PATH/scripts/xcode/with-environment.sh"
+REACT_NATIVE_XCODE="$REACT_NATIVE_PATH/scripts/react-native-xcode.sh"
+
+/bin/sh -c "$WITH_ENVIRONMENT $REACT_NATIVE_XCODE"
+```
+
+6. Drag and drop the script before the one called `[CP] Embed Pods Frameworks`.
+
+Now, if you build your app for Release, it will work as expected.
+
+## 7. Passing initial props to the React Native view
+
+In some case, you'd like to pass some information from the Native app to JavaScript. For example, you might want to pass the user id of the currently logged user to React Native, together with a token that can be used to retrieve information from a database.
+
+This is possible by using the `initialProperties` parameter of the `view(withModuleName:initialProperty)` overload of the `RCTReactNativeFactory` class. The following steps shows you how to do it.
+
+### Update the App.tsx file to read the initial properties.
+
+Open the `App.tsx` file and add the following code:
+
+```diff title="App.tsx"
+import {
+  Colors,
+  DebugInstructions,
+  Header,
+  ReloadInstructions,
+} from 'react-native/Libraries/NewAppScreen';
+
+-function App(): React.JSX.Element {
++function App(props): React.JSX.Element {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const backgroundStyle = {
+    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+  };
+
+  return (
+    <SafeAreaView style={backgroundStyle}>
+      <StatusBar
+        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
+        backgroundColor={backgroundStyle.backgroundColor}
+      />
+      <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        style={backgroundStyle}>
+        <Header />
+-       <View
+-         style={{
+-           backgroundColor: isDarkMode
+-             ? Colors.black
+-             : Colors.white,
+-           padding: 24,
+-         }}>
+-         <Text style={styles.title}>Step One</Text>
+-         <Text>
+-           Edit <Text style={styles.bold}>App.tsx</Text> to
+-           change this screen and see your edits.
+-         </Text>
+-         <Text style={styles.title}>See your changes</Text>
+-         <ReloadInstructions />
+-         <Text style={styles.title}>Debug</Text>
+-         <DebugInstructions />
++         <Text style={styles.title}>UserID: {props.userID}</Text>
++         <Text style={styles.title}>Token: {props.token}</Text>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 24,
+    fontWeight: '600',
++   marginLeft: 20,
+  },
+  bold: {
+    fontWeight: '700',
+  },
+});
+
+export default App;
+```
+
+These changes will tell React Native that your App component is now accepting some properties. The `RCTreactNativeFactory` will take care of passing them to the component when it's rendered.
+
+### Update the Native code to pass the initial properties to JavaScript.
+
+<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
+<TabItem value="objc">
+
+Modify the `ReactViewController.mm` to pass the initial properties to JavaScript.
+
+```diff title="ReactViewController.mm"
+ - (void)viewDidLoad {
+   [super viewDidLoad];
+   // Do any additional setup after loading the view.
+
+   _factoryDelegate = [ReactNativeFactoryDelegate new];
+   _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new];
+   _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate];
+-  self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"];
++  self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld" initialProperties:@{
++    @"userID": @"12345678",
++    @"token": @"secretToken"
++  }];
+}
+```
+
+</TabItem>
+<TabItem value="swift">
+
+Modify the `ReactViewController.swift` to pass the initial properties to the React Native view.
+
+```diff title="ReactViewController.swift"
+  override func viewDidLoad() {
+    super.viewDidLoad()
+    reactNativeFactoryDelegate = ReactNativeDelegate()
+    reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider()
+    reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!)
+-   view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld")
++   view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld" initialProperties: [
++     "userID": "12345678",
++     "token": "secretToken"
++])
+
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+3. Run your app once again. You should see the following screen after you present the `ReactViewController`:
+
+<center>
+  <img src="/docs/assets/brownfield-with-initial-props.png" width="30%" height="30%"/>
+</center>
+
+## Now what?
+
+At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native.
diff --git a/website/versioned_docs/version-0.84/_integration-with-existing-apps-kotlin.md b/website/versioned_docs/version-0.84/_integration-with-existing-apps-kotlin.md
index 23414c63a3b..c5f7d6bc4a6 100644
--- a/website/versioned_docs/version-0.84/_integration-with-existing-apps-kotlin.md
+++ b/website/versioned_docs/version-0.84/_integration-with-existing-apps-kotlin.md
@@ -1,511 +1,510 @@
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import constants from '@site/core/TabsConstants';
-import CodeBlock from '@theme/CodeBlock';
-import RNTemplateRepoLink from '@site/core/RNTemplateRepoLink';
-import {getTemplateBranchNameForCurrentVersion} from '@site/src/getTemplateBranchNameForCurrentVersion';
-
-## Key Concepts
-
-The keys to integrating React Native components into your Android application are to:
-
-1. Set up the correct directory structure.
-2. Install the necessary NPM dependencies.
-3. Adding React Native to your Gradle configuration.
-4. Writing the TypeScript code for your first React Native screen.
-5. Integrate React Native with your Android code using a ReactActivity.
-6. Testing your integration by running the bundler and seeing your app in action.
-
-## Using the Community Template
-
-While you follow this guide, we suggest you to use the [React Native Community Template](https://github.com/react-native-community/template/) as reference. The template contains a **minimal Android app** and will help you understanding how to integrate React Native into an existing Android app.
-
-## Prerequisites
-
-Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](getting-started-without-a-framework) to configure your development environment for building React Native apps for Android.
-This guide also assumes you're familiar with the basics of Android development such as creating Activities and editing the `AndroidManifest.xml` file.
-
-## 1. Set up directory structure
-
-To ensure a smooth experience, create a new folder for your integrated React Native project, then **move your existing Android project** to the `/android` subfolder.
-
-## 2. Install NPM dependencies
-
-Go to the root directory and run the following command:
-
-<CodeBlock language="bash" title="shell">
-{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/package.json`}
-</CodeBlock>
-
-This will copy the `package.json` <RNTemplateRepoLink href="template/package.json">file from the Community template</RNTemplateRepoLink> to your project.
-
-Next, install the NPM packages by running:
-
-<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
-<TabItem value="npm">
-
-```shell
-npm install
-```
-
-</TabItem>
-<TabItem value="yarn">
-
-```shell
-yarn install
-```
-
-</TabItem>
-</Tabs>
-
-Installation process has created a new `node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
-
-Add `node_modules/` to your `.gitignore` file (here the <RNTemplateRepoLink href="template/_gitignore">Community default one</RNTemplateRepoLink>).
-
-## 3. Adding React Native to your app
-
-### Configuring Gradle
-
-React Native uses the React Native Gradle Plugin to configure your dependencies and project setup.
-
-First, let's edit your `settings.gradle` file by adding those lines (as suggested from the <RNTemplateRepoLink href="template/android/settings.gradle">Community template</RNTemplateRepoLink>):
-
-```groovy
-// Configures the React Native Gradle Settings plugin used for autolinking
-pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
-plugins { id("com.facebook.react.settings") }
-extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
-// If using .gradle.kts files:
-// extensions.configure<com.facebook.react.ReactSettingsExtension> { autolinkLibrariesFromCommand() }
-includeBuild("../node_modules/@react-native/gradle-plugin")
-
-// Include your existing Gradle modules here.
-// include(":app")
-```
-
-Then you need to open your top level `build.gradle` and include this line (as suggested from the <RNTemplateRepoLink href="template/android/build.gradle">Community template</RNTemplateRepoLink>):
-
-```diff
-buildscript {
-    repositories {
-        google()
-        mavenCentral()
-    }
-    dependencies {
-        classpath("com.android.tools.build:gradle:7.3.1")
-+       classpath("com.facebook.react:react-native-gradle-plugin")
-    }
-}
-```
-
-This makes sure the React Native Gradle Plugin (RNGP) is available inside your project.
-Finally, add those lines inside your Applications's `build.gradle` file (it's a different `build.gradle` file usually inside your `app` folder - you can use the <RNTemplateRepoLink href="template/android/build.gradle">Community template file as reference</RNTemplateRepoLink>):
-
-```diff
-apply plugin: "com.android.application"
-+apply plugin: "com.facebook.react"
-
-repositories {
-    mavenCentral()
-}
-
-dependencies {
-    // Other dependencies here
-+   // Note: we intentionally don't specify the version number here as RNGP will take care of it.
-+   // If you don't use the RNGP, you'll have to specify version manually.
-+   implementation("com.facebook.react:react-android")
-+   implementation("com.facebook.react:hermes-android")
-}
-
-+react {
-+   // Needed to enable Autolinking - https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
-+   autolinkLibrariesWithApp()
-+}
-```
-
-Finally, open your application `gradle.properties` files and add the following line (here the <RNTemplateRepoLink href="template/android/gradle.properties">Community template file as reference</RNTemplateRepoLink>):
-
-```diff
-+reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
-+newArchEnabled=true
-+hermesEnabled=true
-```
-
-### Configuring your manifest
-
-First, make sure you have the Internet permission in your `AndroidManifest.xml`:
-
-```diff
-<manifest xmlns:android="http://schemas.android.com/apk/res/android">
-
-+   <uses-permission android:name="android.permission.INTERNET" />
-
-    <application
-      android:name=".MainApplication">
-    </application>
-</manifest>
-```
-
-Then you need to enable [cleartext traffic](https://developer.android.com/training/articles/security-config#CleartextTrafficPermitted) in your **debug** `AndroidManifest.xml`:
-
-```diff
-<?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools">
-
-    <application
-+       android:usesCleartextTraffic="true"
-+       tools:targetApi="28"
-    />
-</manifest>
-```
-
-As usual, here the AndroidManifest.xml file from the Community template to use as a reference: <RNTemplateRepoLink href="template/android/app/src/main/AndroidManifest.xml">main</RNTemplateRepoLink> and <RNTemplateRepoLink href="template/android/app/src/debug/AndroidManifest.xml">debug</RNTemplateRepoLink>.
-
-This is needed as your application will communicate with your local bundler, [Metro](https://metrobundler.dev/), via HTTP.
-
-Make sure you add this only to your **debug** manifest.
-
-## 4. Writing the TypeScript Code
-
-Now we will actually modify the native Android application to integrate React Native.
-
-The first bit of code we will write is the actual React Native code for the new screen that will be integrated into our application.
-
-### Create a `index.js` file
-
-First, create an empty `index.js` file in the root of your React Native project.
-
-`index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `import`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it.
-
-Our index.js should look as follows (here the <RNTemplateRepoLink href="template/index.js">Community template file as reference</RNTemplateRepoLink>):
-
-```js
-import {AppRegistry} from 'react-native';
-import App from './App';
-
-AppRegistry.registerComponent('HelloWorld', () => App);
-```
-
-### Create a `App.tsx` file
-
-Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX](<https://en.wikipedia.org/wiki/JSX_(JavaScript)>) expressions. It contains the root React Native component that we will integrate into our Android application (<RNTemplateRepoLink href="template/App.tsx">link</RNTemplateRepoLink>):
-
-```tsx
-import React from 'react';
-import {
-  SafeAreaView,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  useColorScheme,
-  View,
-} from 'react-native';
-
-import {
-  Colors,
-  DebugInstructions,
-  Header,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
-function App(): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
-
-  return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundStyle.backgroundColor}
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
-        <View
-          style={{
-            backgroundColor: isDarkMode
-              ? Colors.black
-              : Colors.white,
-            padding: 24,
-          }}>
-          <Text style={styles.title}>Step One</Text>
-          <Text>
-            Edit <Text style={styles.bold}>App.tsx</Text> to
-            change this screen and see your edits.
-          </Text>
-          <Text style={styles.title}>See your changes</Text>
-          <ReloadInstructions />
-          <Text style={styles.title}>Debug</Text>
-          <DebugInstructions />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  title: {
-    fontSize: 24,
-    fontWeight: '600',
-  },
-  bold: {
-    fontWeight: '700',
-  },
-});
-
-export default App;
-```
-
-Here is the <RNTemplateRepoLink href="template/App.tsx">Community template file as reference</RNTemplateRepoLink>.
-
-## 5. Integrating with your Android code
-
-We now need to add some native code in order to start the React Native runtime and tell it to render our React components.
-
-### Updating your Application class
-
-First, we need to update your `Application` class to properly initialize React Native as follows:
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-
-<TabItem value="java">
-
-```diff
-package <your-package-here>;
-
-import android.app.Application;
-+import com.facebook.react.PackageList;
-+import com.facebook.react.ReactApplication;
-+import com.facebook.react.ReactHost;
-+import com.facebook.react.ReactNativeHost;
-+import com.facebook.react.ReactPackage;
-+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
-+import com.facebook.react.defaults.DefaultReactHost;
-+import com.facebook.react.defaults.DefaultReactNativeHost;
-+import com.facebook.soloader.SoLoader;
-+import com.facebook.react.soloader.OpenSourceMergedSoMapping
-+import java.util.List;
-
--class MainApplication extends Application {
-+class MainApplication extends Application implements ReactApplication {
-+ @Override
-+ public ReactNativeHost getReactNativeHost() {
-+   return new DefaultReactNativeHost(this) {
-+     @Override
-+     protected List<ReactPackage> getPackages() { return new PackageList(this).getPackages(); }
-+     @Override
-+     protected String getJSMainModuleName() { return "index"; }
-+     @Override
-+     public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; }
-+     @Override
-+     protected boolean isNewArchEnabled() { return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; }
-+     @Override
-+     protected Boolean isHermesEnabled() { return BuildConfig.IS_HERMES_ENABLED; }
-+   };
-+ }
-
-+ @Override
-+ public ReactHost getReactHost() {
-+   return DefaultReactHost.getDefaultReactHost(getApplicationContext(), getReactNativeHost());
-+ }
-
-  @Override
-  public void onCreate() {
-    super.onCreate();
-+   SoLoader.init(this, OpenSourceMergedSoMapping);
-+   if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
-+     DefaultNewArchitectureEntryPoint.load();
-+   }
-  }
-}
-```
-
-</TabItem>
-
-<TabItem value="kotlin">
-
-```diff
-// package <your-package-here>
-
-import android.app.Application
-+import com.facebook.react.PackageList
-+import com.facebook.react.ReactApplication
-+import com.facebook.react.ReactHost
-+import com.facebook.react.ReactNativeHost
-+import com.facebook.react.ReactPackage
-+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
-+import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
-+import com.facebook.react.defaults.DefaultReactNativeHost
-+import com.facebook.soloader.SoLoader
-+import com.facebook.react.soloader.OpenSourceMergedSoMapping
-
--class MainApplication : Application() {
-+class MainApplication : Application(), ReactApplication {
-
-+ override val reactNativeHost: ReactNativeHost =
-+      object : DefaultReactNativeHost(this) {
-+        override fun getPackages(): List<ReactPackage> = PackageList(this).packages
-+        override fun getJSMainModuleName(): String = "index"
-+        override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
-+        override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
-+        override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
-+      }
-
-+ override val reactHost: ReactHost
-+   get() = getDefaultReactHost(applicationContext, reactNativeHost)
-
-  override fun onCreate() {
-    super.onCreate()
-+   SoLoader.init(this, OpenSourceMergedSoMapping)
-+   if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
-+     load()
-+   }
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-As usual, here the <RNTemplateRepoLink href="template/android/app/src/main/java/com/helloworld/MainApplication.kt">`MainApplication.kt` Community template file as reference</RNTemplateRepoLink>.
-
-#### Creating a `ReactActivity`
-
-Finally, we need to create a new `Activity` that will extend `ReactActivity` and host the React Native code. This activity will be responsible for starting the React Native runtime and rendering the React component.
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-
-<TabItem value="java">
-
-```java
-// package <your-package-here>;
-
-import com.facebook.react.ReactActivity;
-import com.facebook.react.ReactActivityDelegate;
-import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
-import com.facebook.react.defaults.DefaultReactActivityDelegate;
-
-public class MyReactActivity extends ReactActivity {
-
-    @Override
-    protected String getMainComponentName() {
-        return "HelloWorld";
-    }
-
-    @Override
-    protected ReactActivityDelegate createReactActivityDelegate() {
-        return new DefaultReactActivityDelegate(this, getMainComponentName(), DefaultNewArchitectureEntryPoint.getFabricEnabled());
-    }
-}
-```
-
-</TabItem>
-
-<TabItem value="kotlin">
-
-```kotlin
-// package <your-package-here>
-
-import com.facebook.react.ReactActivity
-import com.facebook.react.ReactActivityDelegate
-import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
-import com.facebook.react.defaults.DefaultReactActivityDelegate
-
-class MyReactActivity : ReactActivity() {
-
-    override fun getMainComponentName(): String = "HelloWorld"
-
-    override fun createReactActivityDelegate(): ReactActivityDelegate =
-        DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
-}
-```
-
-</TabItem>
-</Tabs>
-
-As usual, here the <RNTemplateRepoLink href="template/android/app/src/main/java/com/helloworld/MainActivity.kt">`MainActivity.kt` Community template file as reference</RNTemplateRepoLink>.
-
-Whenever you create a new Activity, you need to add it to your `AndroidManifest.xml` file. You also need set the theme of `MyReactActivity` to `Theme.AppCompat.Light.NoActionBar` (or to any non-ActionBar theme) as otherwise your application will render an ActionBar on top of your React Native screen:
-
-```diff
-<manifest xmlns:android="http://schemas.android.com/apk/res/android">
-
-    <uses-permission android:name="android.permission.INTERNET" />
-
-    <application
-      android:name=".MainApplication">
-
-+     <activity
-+       android:name=".MyReactActivity"
-+       android:label="@string/app_name"
-+       android:theme="@style/Theme.AppCompat.Light.NoActionBar">
-+     </activity>
-    </application>
-</manifest>
-```
-
-Now your activity is ready to run some JavaScript code.
-
-## 6. Test your integration
-
-You have completed all the basic steps to integrate React Native with your application. Now we will start the [Metro bundler](https://metrobundler.dev/) to build your TypeScript application code into a bundle. Metro's HTTP server shares the bundle from `localhost` on your developer environment to a simulator or device. This allows for [hot reloading](https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading).
-
-First, you need to create a `metro.config.js` file in the root of your project as follows:
-
-```js
-const {getDefaultConfig} = require('@react-native/metro-config');
-module.exports = getDefaultConfig(__dirname);
-```
-
-You can checkout the <RNTemplateRepoLink href="template/metro.config.js">`metro.config.js` file</RNTemplateRepoLink> from the Community template file as reference.
-
-Once you have the configuration file in place, you can run the bundler. Run the following command in the root directory of your project:
-
-<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
-<TabItem value="npm">
-
-```shell
-npm start
-```
-
-</TabItem>
-<TabItem value="yarn">
-
-```shell
-yarn start
-```
-
-</TabItem>
-</Tabs>
-
-Now build and run your Android app as normal.
-
-Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display:
-
-<center><img src="/docs/assets/EmbeddedAppAndroidVideo.gif" width="300" /></center>
-
-### Creating a release build in Android Studio
-
-You can use Android Studio to create your release builds too! It’s as quick as creating release builds of your previously-existing native Android app.
-
-The React Native Gradle Plugin will take care of bundling the JS code inside your APK/App Bundle.
-
-If you're not using Android Studio, you can create a release build with:
-
-```
-cd android
-# For a Release APK
-./gradlew :app:assembleRelease
-# For a Release AAB
-./gradlew :app:bundleRelease
-```
-
-### Now what?
-
-At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native.
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import constants from '@site/core/TabsConstants';
+import CodeBlock from '@theme/CodeBlock';
+import RNTemplateRepoLink from '@site/core/RNTemplateRepoLink';
+import {getTemplateBranchNameForCurrentVersion} from '@site/src/getTemplateBranchNameForCurrentVersion';
+
+## Key Concepts
+
+The keys to integrating React Native components into your Android application are to:
+
+1. Set up the correct directory structure.
+2. Install the necessary NPM dependencies.
+3. Adding React Native to your Gradle configuration.
+4. Writing the TypeScript code for your first React Native screen.
+5. Integrate React Native with your Android code using a ReactActivity.
+6. Testing your integration by running the bundler and seeing your app in action.
+
+## Using the Community Template
+
+While you follow this guide, we suggest you to use the [React Native Community Template](https://github.com/react-native-community/template/) as reference. The template contains a **minimal Android app** and will help you understanding how to integrate React Native into an existing Android app.
+
+## Prerequisites
+
+Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](getting-started-without-a-framework) to configure your development environment for building React Native apps for Android.
+This guide also assumes you're familiar with the basics of Android development such as creating Activities and editing the `AndroidManifest.xml` file.
+
+## 1. Set up directory structure
+
+To ensure a smooth experience, create a new folder for your integrated React Native project, then **move your existing Android project** to the `/android` subfolder.
+
+## 2. Install NPM dependencies
+
+Go to the root directory and run the following command:
+
+<CodeBlock language="bash" title="shell">
+{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/package.json`}
+</CodeBlock>
+
+This will copy the `package.json` <RNTemplateRepoLink href="template/package.json">file from the Community template</RNTemplateRepoLink> to your project.
+
+Next, install the NPM packages by running:
+
+<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
+<TabItem value="npm">
+
+```shell
+npm install
+```
+
+</TabItem>
+<TabItem value="yarn">
+
+```shell
+yarn install
+```
+
+</TabItem>
+</Tabs>
+
+Installation process has created a new `node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
+
+Add `node_modules/` to your `.gitignore` file (here the <RNTemplateRepoLink href="template/_gitignore">Community default one</RNTemplateRepoLink>).
+
+## 3. Adding React Native to your app
+
+### Configuring Gradle
+
+React Native uses the React Native Gradle Plugin to configure your dependencies and project setup.
+
+First, let's edit your `settings.gradle` file by adding those lines (as suggested from the <RNTemplateRepoLink href="template/android/settings.gradle">Community template</RNTemplateRepoLink>):
+
+```groovy
+// Configures the React Native Gradle Settings plugin used for autolinking
+pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
+plugins { id("com.facebook.react.settings") }
+extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
+// If using .gradle.kts files:
+// extensions.configure<com.facebook.react.ReactSettingsExtension> { autolinkLibrariesFromCommand() }
+includeBuild("../node_modules/@react-native/gradle-plugin")
+
+// Include your existing Gradle modules here.
+// include(":app")
+```
+
+Then you need to open your top level `build.gradle` and include this line (as suggested from the <RNTemplateRepoLink href="template/android/build.gradle">Community template</RNTemplateRepoLink>):
+
+```diff
+buildscript {
+    repositories {
+        google()
+        mavenCentral()
+    }
+    dependencies {
+        classpath("com.android.tools.build:gradle:7.3.1")
++       classpath("com.facebook.react:react-native-gradle-plugin")
+    }
+}
+```
+
+This makes sure the React Native Gradle Plugin (RNGP) is available inside your project.
+Finally, add those lines inside your Applications's `build.gradle` file (it's a different `build.gradle` file usually inside your `app` folder - you can use the <RNTemplateRepoLink href="template/android/build.gradle">Community template file as reference</RNTemplateRepoLink>):
+
+```diff
+apply plugin: "com.android.application"
++apply plugin: "com.facebook.react"
+
+repositories {
+    mavenCentral()
+}
+
+dependencies {
+    // Other dependencies here
++   // Note: we intentionally don't specify the version number here as RNGP will take care of it.
++   // If you don't use the RNGP, you'll have to specify version manually.
++   implementation("com.facebook.react:react-android")
++   implementation("com.facebook.react:hermes-android")
+}
+
++react {
++   // Needed to enable Autolinking - https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
++   autolinkLibrariesWithApp()
++}
+```
+
+Finally, open your application `gradle.properties` files and add the following line (here the <RNTemplateRepoLink href="template/android/gradle.properties">Community template file as reference</RNTemplateRepoLink>):
+
+```diff
++reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
++newArchEnabled=true
++hermesEnabled=true
+```
+
+### Configuring your manifest
+
+First, make sure you have the Internet permission in your `AndroidManifest.xml`:
+
+```diff
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
++   <uses-permission android:name="android.permission.INTERNET" />
+
+    <application
+      android:name=".MainApplication">
+    </application>
+</manifest>
+```
+
+Then you need to enable [cleartext traffic](https://developer.android.com/training/articles/security-config#CleartextTrafficPermitted) in your **debug** `AndroidManifest.xml`:
+
+```diff
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <application
++       android:usesCleartextTraffic="true"
++       tools:targetApi="28"
+    />
+</manifest>
+```
+
+As usual, here the AndroidManifest.xml file from the Community template to use as a reference: <RNTemplateRepoLink href="template/android/app/src/main/AndroidManifest.xml">main</RNTemplateRepoLink> and <RNTemplateRepoLink href="template/android/app/src/debug/AndroidManifest.xml">debug</RNTemplateRepoLink>.
+
+This is needed as your application will communicate with your local bundler, [Metro](https://metrobundler.dev/), via HTTP.
+
+Make sure you add this only to your **debug** manifest.
+
+## 4. Writing the TypeScript Code
+
+Now we will actually modify the native Android application to integrate React Native.
+
+The first bit of code we will write is the actual React Native code for the new screen that will be integrated into our application.
+
+### Create a `index.js` file
+
+First, create an empty `index.js` file in the root of your React Native project.
+
+`index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `import`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it.
+
+Our index.js should look as follows (here the <RNTemplateRepoLink href="template/index.js">Community template file as reference</RNTemplateRepoLink>):
+
+```js
+import {AppRegistry} from 'react-native';
+import App from './App';
+
+AppRegistry.registerComponent('HelloWorld', () => App);
+```
+
+### Create a `App.tsx` file
+
+Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX](<https://en.wikipedia.org/wiki/JSX_(JavaScript)>) expressions. It contains the root React Native component that we will integrate into our Android application (<RNTemplateRepoLink href="template/App.tsx">link</RNTemplateRepoLink>):
+
+```tsx
+import {type JSX} from 'react';
+import {
+  SafeAreaView,
+  ScrollView,
+  StatusBar,
+  StyleSheet,
+  Text,
+  useColorScheme,
+  View,
+} from 'react-native';
+import {
+  Colors,
+  DebugInstructions,
+  Header,
+  ReloadInstructions,
+} from 'react-native/Libraries/NewAppScreen';
+
+function App(): JSX.Element {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const backgroundStyle = {
+    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+  };
+
+  return (
+    <SafeAreaView style={backgroundStyle}>
+      <StatusBar
+        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
+        backgroundColor={backgroundStyle.backgroundColor}
+      />
+      <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        style={backgroundStyle}>
+        <Header />
+        <View
+          style={{
+            backgroundColor: isDarkMode
+              ? Colors.black
+              : Colors.white,
+            padding: 24,
+          }}>
+          <Text style={styles.title}>Step One</Text>
+          <Text>
+            Edit <Text style={styles.bold}>App.tsx</Text> to
+            change this screen and see your edits.
+          </Text>
+          <Text style={styles.title}>See your changes</Text>
+          <ReloadInstructions />
+          <Text style={styles.title}>Debug</Text>
+          <DebugInstructions />
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 24,
+    fontWeight: '600',
+  },
+  bold: {
+    fontWeight: '700',
+  },
+});
+
+export default App;
+```
+
+Here is the <RNTemplateRepoLink href="template/App.tsx">Community template file as reference</RNTemplateRepoLink>.
+
+## 5. Integrating with your Android code
+
+We now need to add some native code in order to start the React Native runtime and tell it to render our React components.
+
+### Updating your Application class
+
+First, we need to update your `Application` class to properly initialize React Native as follows:
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+
+<TabItem value="java">
+
+```diff
+package <your-package-here>;
+
+import android.app.Application;
++import com.facebook.react.PackageList;
++import com.facebook.react.ReactApplication;
++import com.facebook.react.ReactHost;
++import com.facebook.react.ReactNativeHost;
++import com.facebook.react.ReactPackage;
++import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
++import com.facebook.react.defaults.DefaultReactHost;
++import com.facebook.react.defaults.DefaultReactNativeHost;
++import com.facebook.soloader.SoLoader;
++import com.facebook.react.soloader.OpenSourceMergedSoMapping
++import java.util.List;
+
+-class MainApplication extends Application {
++class MainApplication extends Application implements ReactApplication {
++ @Override
++ public ReactNativeHost getReactNativeHost() {
++   return new DefaultReactNativeHost(this) {
++     @Override
++     protected List<ReactPackage> getPackages() { return new PackageList(this).getPackages(); }
++     @Override
++     protected String getJSMainModuleName() { return "index"; }
++     @Override
++     public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; }
++     @Override
++     protected boolean isNewArchEnabled() { return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; }
++     @Override
++     protected Boolean isHermesEnabled() { return BuildConfig.IS_HERMES_ENABLED; }
++   };
++ }
+
++ @Override
++ public ReactHost getReactHost() {
++   return DefaultReactHost.getDefaultReactHost(getApplicationContext(), getReactNativeHost());
++ }
+
+  @Override
+  public void onCreate() {
+    super.onCreate();
++   SoLoader.init(this, OpenSourceMergedSoMapping);
++   if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
++     DefaultNewArchitectureEntryPoint.load();
++   }
+  }
+}
+```
+
+</TabItem>
+
+<TabItem value="kotlin">
+
+```diff
+// package <your-package-here>
+
+import android.app.Application
++import com.facebook.react.PackageList
++import com.facebook.react.ReactApplication
++import com.facebook.react.ReactHost
++import com.facebook.react.ReactNativeHost
++import com.facebook.react.ReactPackage
++import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
++import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
++import com.facebook.react.defaults.DefaultReactNativeHost
++import com.facebook.soloader.SoLoader
++import com.facebook.react.soloader.OpenSourceMergedSoMapping
+
+-class MainApplication : Application() {
++class MainApplication : Application(), ReactApplication {
+
++ override val reactNativeHost: ReactNativeHost =
++      object : DefaultReactNativeHost(this) {
++        override fun getPackages(): List<ReactPackage> = PackageList(this).packages
++        override fun getJSMainModuleName(): String = "index"
++        override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
++        override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
++        override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
++      }
+
++ override val reactHost: ReactHost
++   get() = getDefaultReactHost(applicationContext, reactNativeHost)
+
+  override fun onCreate() {
+    super.onCreate()
++   SoLoader.init(this, OpenSourceMergedSoMapping)
++   if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
++     load()
++   }
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+As usual, here the <RNTemplateRepoLink href="template/android/app/src/main/java/com/helloworld/MainApplication.kt">`MainApplication.kt` Community template file as reference</RNTemplateRepoLink>.
+
+#### Creating a `ReactActivity`
+
+Finally, we need to create a new `Activity` that will extend `ReactActivity` and host the React Native code. This activity will be responsible for starting the React Native runtime and rendering the React component.
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+
+<TabItem value="java">
+
+```java
+// package <your-package-here>;
+
+import com.facebook.react.ReactActivity;
+import com.facebook.react.ReactActivityDelegate;
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
+import com.facebook.react.defaults.DefaultReactActivityDelegate;
+
+public class MyReactActivity extends ReactActivity {
+
+    @Override
+    protected String getMainComponentName() {
+        return "HelloWorld";
+    }
+
+    @Override
+    protected ReactActivityDelegate createReactActivityDelegate() {
+        return new DefaultReactActivityDelegate(this, getMainComponentName(), DefaultNewArchitectureEntryPoint.getFabricEnabled());
+    }
+}
+```
+
+</TabItem>
+
+<TabItem value="kotlin">
+
+```kotlin
+// package <your-package-here>
+
+import com.facebook.react.ReactActivity
+import com.facebook.react.ReactActivityDelegate
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
+import com.facebook.react.defaults.DefaultReactActivityDelegate
+
+class MyReactActivity : ReactActivity() {
+
+    override fun getMainComponentName(): String = "HelloWorld"
+
+    override fun createReactActivityDelegate(): ReactActivityDelegate =
+        DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
+}
+```
+
+</TabItem>
+</Tabs>
+
+As usual, here the <RNTemplateRepoLink href="template/android/app/src/main/java/com/helloworld/MainActivity.kt">`MainActivity.kt` Community template file as reference</RNTemplateRepoLink>.
+
+Whenever you create a new Activity, you need to add it to your `AndroidManifest.xml` file. You also need set the theme of `MyReactActivity` to `Theme.AppCompat.Light.NoActionBar` (or to any non-ActionBar theme) as otherwise your application will render an ActionBar on top of your React Native screen:
+
+```diff
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <uses-permission android:name="android.permission.INTERNET" />
+
+    <application
+      android:name=".MainApplication">
+
++     <activity
++       android:name=".MyReactActivity"
++       android:label="@string/app_name"
++       android:theme="@style/Theme.AppCompat.Light.NoActionBar">
++     </activity>
+    </application>
+</manifest>
+```
+
+Now your activity is ready to run some JavaScript code.
+
+## 6. Test your integration
+
+You have completed all the basic steps to integrate React Native with your application. Now we will start the [Metro bundler](https://metrobundler.dev/) to build your TypeScript application code into a bundle. Metro's HTTP server shares the bundle from `localhost` on your developer environment to a simulator or device. This allows for [hot reloading](https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading).
+
+First, you need to create a `metro.config.js` file in the root of your project as follows:
+
+```js
+const {getDefaultConfig} = require('@react-native/metro-config');
+module.exports = getDefaultConfig(__dirname);
+```
+
+You can checkout the <RNTemplateRepoLink href="template/metro.config.js">`metro.config.js` file</RNTemplateRepoLink> from the Community template file as reference.
+
+Once you have the configuration file in place, you can run the bundler. Run the following command in the root directory of your project:
+
+<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
+<TabItem value="npm">
+
+```shell
+npm start
+```
+
+</TabItem>
+<TabItem value="yarn">
+
+```shell
+yarn start
+```
+
+</TabItem>
+</Tabs>
+
+Now build and run your Android app as normal.
+
+Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display:
+
+<center><img src="/docs/assets/EmbeddedAppAndroidVideo.gif" width="300" /></center>
+
+### Creating a release build in Android Studio
+
+You can use Android Studio to create your release builds too! It’s as quick as creating release builds of your previously-existing native Android app.
+
+The React Native Gradle Plugin will take care of bundling the JS code inside your APK/App Bundle.
+
+If you're not using Android Studio, you can create a release build with:
+
+```
+cd android
+# For a Release APK
+./gradlew :app:assembleRelease
+# For a Release AAB
+./gradlew :app:bundleRelease
+```
+
+### Now what?
+
+At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native.
diff --git a/website/versioned_docs/version-0.84/_turbo-native-modules-components.jsx b/website/versioned_docs/version-0.84/_turbo-native-modules-components.jsx
index 1bb5a1b5edb..9b17f011728 100644
--- a/website/versioned_docs/version-0.84/_turbo-native-modules-components.jsx
+++ b/website/versioned_docs/version-0.84/_turbo-native-modules-components.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import IOSContent from './turbo-native-modules-ios.md';
 import AndroidContent from './turbo-native-modules-android.md';
 
diff --git a/website/versioned_docs/version-0.84/accessibilityinfo.md b/website/versioned_docs/version-0.84/accessibilityinfo.md
index c5c580e8c80..c3b47920418 100644
--- a/website/versioned_docs/version-0.84/accessibilityinfo.md
+++ b/website/versioned_docs/version-0.84/accessibilityinfo.md
@@ -1,292 +1,292 @@
----
-id: accessibilityinfo
-title: AccessibilityInfo
----
-
-Sometimes it's useful to know whether or not the device has a screen reader that is currently active. The `AccessibilityInfo` API is designed for this purpose. You can use it to query the current state of the screen reader as well as to register to be notified when the state of the screen reader changes.
-
-## Example
-
-```SnackPlayer name=AccessibilityInfo%20Example&supportedPlatforms=android,ios
-import React, {useState, useEffect} from 'react';
-import {AccessibilityInfo, Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false);
-  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
-
-  useEffect(() => {
-    const reduceMotionChangedSubscription = AccessibilityInfo.addEventListener(
-      'reduceMotionChanged',
-      isReduceMotionEnabled => {
-        setReduceMotionEnabled(isReduceMotionEnabled);
-      },
-    );
-    const screenReaderChangedSubscription = AccessibilityInfo.addEventListener(
-      'screenReaderChanged',
-      isScreenReaderEnabled => {
-        setScreenReaderEnabled(isScreenReaderEnabled);
-      },
-    );
-
-    AccessibilityInfo.isReduceMotionEnabled().then(isReduceMotionEnabled => {
-      setReduceMotionEnabled(isReduceMotionEnabled);
-    });
-    AccessibilityInfo.isScreenReaderEnabled().then(isScreenReaderEnabled => {
-      setScreenReaderEnabled(isScreenReaderEnabled);
-    });
-
-    return () => {
-      reduceMotionChangedSubscription.remove();
-      screenReaderChangedSubscription.remove();
-    };
-  }, []);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.status}>
-          The reduce motion is {reduceMotionEnabled ? 'enabled' : 'disabled'}.
-        </Text>
-        <Text style={styles.status}>
-          The screen reader is {screenReaderEnabled ? 'enabled' : 'disabled'}.
-        </Text>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  status: {
-    margin: 30,
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Methods
-
-### `addEventListener()`
-
-```tsx
-static addEventListener(
-  eventName: AccessibilityChangeEventName | AccessibilityAnnouncementEventName,
-  handler: (
-    event: AccessibilityChangeEvent | AccessibilityAnnouncementFinishedEvent,
-  ) => void,
-): EmitterSubscription;
-```
-
-Add an event handler. Supported events:
-
-| Event name                                                                               | Description                                                                                                                                                                                                                                                                                              |
-| ---------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `accessibilityServiceChanged`<br/><div className="label two-lines android">Android</div> | Fires when some services such as TalkBack, other Android assistive technologies, and third-party accessibility services are enabled. The argument to the event handler is a boolean. The boolean is `true` when a some accessibility services is enabled and `false` otherwise.                          |
-| `announcementFinished`<br/><div className="label two-lines ios">iOS</div>                | Fires when the screen reader has finished making an announcement. The argument to the event handler is a dictionary with these keys:<ul><li>`announcement`: The string announced by the screen reader.</li><li>`success`: A boolean indicating whether the announcement was successfully made.</li></ul> |
-| `boldTextChanged`<br/><div className="label two-lines ios">iOS</div>                     | 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`<br/><div className="label two-lines ios">iOS</div>                    | 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`<br/><div className="label two-lines ios">iOS</div>                 | 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.                                  |
-| `reduceTransparencyChanged`<br/><div className="label two-lines ios">iOS</div>           | 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.                                                                                                         |
-| `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.                                                                                                                          |
-
----
-
-### `announceForAccessibility()`
-
-```tsx
-static announceForAccessibility(announcement: string);
-```
-
-Post a string to be announced by the screen reader.
-
----
-
-### `announceForAccessibilityWithOptions()`
-
-```tsx
-static announceForAccessibilityWithOptions(
-  announcement: string,
-  options: {queue?: boolean},
-);
-```
-
-Post a string to be announced by the screen reader with modification options. By default announcements will interrupt any existing speech, but on iOS they can be queued behind existing speech by setting `queue` to `true` in the options object.
-
-**Parameters:**
-
-| Name                                                              | Type   | Description                                                                                  |
-| ----------------------------------------------------------------- | ------ | -------------------------------------------------------------------------------------------- |
-| announcement <div className="label basic required">Required</div> | string | The string to be announced                                                                   |
-| options <div className="label basic required">Required</div>      | object | `queue` - queue the announcement behind existing speech <div className="label ios">iOS</div> |
-
----
-
-### `getRecommendedTimeoutMillis()` <div className="label android">Android</div>
-
-```tsx
-static getRecommendedTimeoutMillis(originalTimeout: number): Promise<number>;
-```
-
-Gets the timeout in millisecond that the user needs.
-This value is set in "Time to take action (Accessibility timeout)" of "Accessibility" settings.
-
-**Parameters:**
-
-| Name                                                                 | Type   | Description                                                                           |
-| -------------------------------------------------------------------- | ------ | ------------------------------------------------------------------------------------- |
-| originalTimeout <div className="label basic required">Required</div> | number | The timeout to return if "Accessibility timeout" is not set. Specify in milliseconds. |
-
----
-
-### `isAccessibilityServiceEnabled()` <div className="label android">Android</div>
-
-```tsx
-static isAccessibilityServiceEnabled(): Promise<boolean>;
-```
-
-Check whether any accessibility service is enabled. This includes TalkBack but also any third-party accessibility app that may be installed. To only check whether TalkBack is enabled, use [isScreenReaderEnabled](#isscreenreaderenabled). Returns a promise which resolves to a boolean. The result is `true` when some accessibility services is enabled and `false` otherwise.
-
-:::note
-Please use [`isScreenReaderEnabled`](#isscreenreaderenabled) if you only want to check the status of TalkBack.
-:::
-
----
-
-### `isBoldTextEnabled()` <div className="label ios">iOS</div>
-
-```tsx
-static isBoldTextEnabled(): Promise<boolean>:
-```
-
-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()` <div className="label ios">iOS</div>
-
-```tsx
-static isGrayscaleEnabled(): Promise<boolean>;
-```
-
-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()` <div className="label ios">iOS</div>
-
-```tsx
-static isInvertColorsEnabled(): Promise<boolean>;
-```
-
-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()`
-
-```tsx
-static isReduceMotionEnabled(): Promise<boolean>;
-```
-
-Query whether reduce motion is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when reduce motion is enabled and `false` otherwise.
-
----
-
-### `isReduceTransparencyEnabled()` <div className="label ios">iOS</div>
-
-```tsx
-static isReduceTransparencyEnabled(): Promise<boolean>;
-```
-
-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()`
-
-```tsx
-static isScreenReaderEnabled(): Promise<boolean>;
-```
-
-Query whether a screen reader is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when a screen reader is enabled and `false` otherwise.
-
----
-
-### `isHighTextContrastEnabled()` <div className="label android">Android</div>
-
-```tsx
-static isHighTextContrastEnabled(): Promise<boolean>
-```
-
-Query whether high text contrast is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when high text contrast is enabled and `false` otherwise.
-
----
-
-### `isDarkerSystemColorsEnabled()` <div className="label ios">iOS</div>
-
-```tsx
-static isDarkerSystemColorsEnabled(): Promise<boolean>
-```
-
-Query whether dark system colors is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when dark system colors is enabled and `false` otherwise.
-
----
-
-### `prefersCrossFadeTransitions()` <div className="label ios">iOS</div>
-
-```tsx
-static prefersCrossFadeTransitions(): Promise<boolean>;
-```
-
-Query whether reduce motion and prefer cross-fade transitions settings are currently enabled. Returns a promise which resolves to a boolean. The result is `true` when prefer cross-fade transitions is enabled and `false` otherwise.
-
----
-
-### 🗑️ `setAccessibilityFocus()`
-
-:::warning[Deprecated]
-Prefer using `sendAccessibilityEvent` with eventType `focus` instead.
-:::
-
-```tsx
-static setAccessibilityFocus(reactTag: number);
-```
-
-Set accessibility focus to a React component.
-
-On Android, this calls `UIManager.sendAccessibilityEvent` method with passed `reactTag` and `UIManager.AccessibilityEventTypes.typeViewFocused` arguments.
-
-:::note
-Make sure that any `View` you want to receive the accessibility focus has `accessible={true}`.
-:::
-
----
-
-### `sendAccessibilityEvent()`
-
-```tsx
-static sendAccessibilityEvent(host: HostInstance, eventType: AccessibilityEventTypes);
-```
-
-Imperatively trigger an accessibility event on a React component, like changing the focused element for a screen reader.
-
-:::note
-Make sure that any `View` you want to receive the accessibility focus has `accessible={true}`.
-:::
-
-| Name                                                           | Type                    | Description                                                                                                            |
-| -------------------------------------------------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------- |
-| host <div className="label basic required">Required</div>      | HostInstance            | The component ref to send the event to.                                                                                |
-| eventType <div className="label basic required">Required</div> | AccessibilityEventTypes | One of `'click'` (Android only), `'focus'`, `'viewHoverEnter'` (Android only), or `'windowStateChange'` (Android only) |
+---
+id: accessibilityinfo
+title: AccessibilityInfo
+---
+
+Sometimes it's useful to know whether or not the device has a screen reader that is currently active. The `AccessibilityInfo` API is designed for this purpose. You can use it to query the current state of the screen reader as well as to register to be notified when the state of the screen reader changes.
+
+## Example
+
+```SnackPlayer name=AccessibilityInfo%20Example&supportedPlatforms=android,ios
+import {useState, useEffect} from 'react';
+import {AccessibilityInfo, Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false);
+  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
+
+  useEffect(() => {
+    const reduceMotionChangedSubscription = AccessibilityInfo.addEventListener(
+      'reduceMotionChanged',
+      isReduceMotionEnabled => {
+        setReduceMotionEnabled(isReduceMotionEnabled);
+      },
+    );
+    const screenReaderChangedSubscription = AccessibilityInfo.addEventListener(
+      'screenReaderChanged',
+      isScreenReaderEnabled => {
+        setScreenReaderEnabled(isScreenReaderEnabled);
+      },
+    );
+
+    AccessibilityInfo.isReduceMotionEnabled().then(isReduceMotionEnabled => {
+      setReduceMotionEnabled(isReduceMotionEnabled);
+    });
+    AccessibilityInfo.isScreenReaderEnabled().then(isScreenReaderEnabled => {
+      setScreenReaderEnabled(isScreenReaderEnabled);
+    });
+
+    return () => {
+      reduceMotionChangedSubscription.remove();
+      screenReaderChangedSubscription.remove();
+    };
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.status}>
+          The reduce motion is {reduceMotionEnabled ? 'enabled' : 'disabled'}.
+        </Text>
+        <Text style={styles.status}>
+          The screen reader is {screenReaderEnabled ? 'enabled' : 'disabled'}.
+        </Text>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  status: {
+    margin: 30,
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+  eventName: AccessibilityChangeEventName | AccessibilityAnnouncementEventName,
+  handler: (
+    event: AccessibilityChangeEvent | AccessibilityAnnouncementFinishedEvent,
+  ) => void,
+): EmitterSubscription;
+```
+
+Add an event handler. Supported events:
+
+| Event name                                                                               | Description                                                                                                                                                                                                                                                                                              |
+| ---------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `accessibilityServiceChanged`<br/><div className="label two-lines android">Android</div> | Fires when some services such as TalkBack, other Android assistive technologies, and third-party accessibility services are enabled. The argument to the event handler is a boolean. The boolean is `true` when a some accessibility services is enabled and `false` otherwise.                          |
+| `announcementFinished`<br/><div className="label two-lines ios">iOS</div>                | Fires when the screen reader has finished making an announcement. The argument to the event handler is a dictionary with these keys:<ul><li>`announcement`: The string announced by the screen reader.</li><li>`success`: A boolean indicating whether the announcement was successfully made.</li></ul> |
+| `boldTextChanged`<br/><div className="label two-lines ios">iOS</div>                     | 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`<br/><div className="label two-lines ios">iOS</div>                    | 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`<br/><div className="label two-lines ios">iOS</div>                 | 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.                                  |
+| `reduceTransparencyChanged`<br/><div className="label two-lines ios">iOS</div>           | 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.                                                                                                         |
+| `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.                                                                                                                          |
+
+---
+
+### `announceForAccessibility()`
+
+```tsx
+static announceForAccessibility(announcement: string);
+```
+
+Post a string to be announced by the screen reader.
+
+---
+
+### `announceForAccessibilityWithOptions()`
+
+```tsx
+static announceForAccessibilityWithOptions(
+  announcement: string,
+  options: {queue?: boolean},
+);
+```
+
+Post a string to be announced by the screen reader with modification options. By default announcements will interrupt any existing speech, but on iOS they can be queued behind existing speech by setting `queue` to `true` in the options object.
+
+**Parameters:**
+
+| Name                                                              | Type   | Description                                                                                  |
+| ----------------------------------------------------------------- | ------ | -------------------------------------------------------------------------------------------- |
+| announcement <div className="label basic required">Required</div> | string | The string to be announced                                                                   |
+| options <div className="label basic required">Required</div>      | object | `queue` - queue the announcement behind existing speech <div className="label ios">iOS</div> |
+
+---
+
+### `getRecommendedTimeoutMillis()` <div className="label android">Android</div>
+
+```tsx
+static getRecommendedTimeoutMillis(originalTimeout: number): Promise<number>;
+```
+
+Gets the timeout in millisecond that the user needs.
+This value is set in "Time to take action (Accessibility timeout)" of "Accessibility" settings.
+
+**Parameters:**
+
+| Name                                                                 | Type   | Description                                                                           |
+| -------------------------------------------------------------------- | ------ | ------------------------------------------------------------------------------------- |
+| originalTimeout <div className="label basic required">Required</div> | number | The timeout to return if "Accessibility timeout" is not set. Specify in milliseconds. |
+
+---
+
+### `isAccessibilityServiceEnabled()` <div className="label android">Android</div>
+
+```tsx
+static isAccessibilityServiceEnabled(): Promise<boolean>;
+```
+
+Check whether any accessibility service is enabled. This includes TalkBack but also any third-party accessibility app that may be installed. To only check whether TalkBack is enabled, use [isScreenReaderEnabled](#isscreenreaderenabled). Returns a promise which resolves to a boolean. The result is `true` when some accessibility services is enabled and `false` otherwise.
+
+:::note
+Please use [`isScreenReaderEnabled`](#isscreenreaderenabled) if you only want to check the status of TalkBack.
+:::
+
+---
+
+### `isBoldTextEnabled()` <div className="label ios">iOS</div>
+
+```tsx
+static isBoldTextEnabled(): Promise<boolean>:
+```
+
+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()` <div className="label ios">iOS</div>
+
+```tsx
+static isGrayscaleEnabled(): Promise<boolean>;
+```
+
+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()` <div className="label ios">iOS</div>
+
+```tsx
+static isInvertColorsEnabled(): Promise<boolean>;
+```
+
+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()`
+
+```tsx
+static isReduceMotionEnabled(): Promise<boolean>;
+```
+
+Query whether reduce motion is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when reduce motion is enabled and `false` otherwise.
+
+---
+
+### `isReduceTransparencyEnabled()` <div className="label ios">iOS</div>
+
+```tsx
+static isReduceTransparencyEnabled(): Promise<boolean>;
+```
+
+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()`
+
+```tsx
+static isScreenReaderEnabled(): Promise<boolean>;
+```
+
+Query whether a screen reader is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when a screen reader is enabled and `false` otherwise.
+
+---
+
+### `isHighTextContrastEnabled()` <div className="label android">Android</div>
+
+```tsx
+static isHighTextContrastEnabled(): Promise<boolean>
+```
+
+Query whether high text contrast is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when high text contrast is enabled and `false` otherwise.
+
+---
+
+### `isDarkerSystemColorsEnabled()` <div className="label ios">iOS</div>
+
+```tsx
+static isDarkerSystemColorsEnabled(): Promise<boolean>
+```
+
+Query whether dark system colors is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when dark system colors is enabled and `false` otherwise.
+
+---
+
+### `prefersCrossFadeTransitions()` <div className="label ios">iOS</div>
+
+```tsx
+static prefersCrossFadeTransitions(): Promise<boolean>;
+```
+
+Query whether reduce motion and prefer cross-fade transitions settings are currently enabled. Returns a promise which resolves to a boolean. The result is `true` when prefer cross-fade transitions is enabled and `false` otherwise.
+
+---
+
+### 🗑️ `setAccessibilityFocus()`
+
+:::warning[Deprecated]
+Prefer using `sendAccessibilityEvent` with eventType `focus` instead.
+:::
+
+```tsx
+static setAccessibilityFocus(reactTag: number);
+```
+
+Set accessibility focus to a React component.
+
+On Android, this calls `UIManager.sendAccessibilityEvent` method with passed `reactTag` and `UIManager.AccessibilityEventTypes.typeViewFocused` arguments.
+
+:::note
+Make sure that any `View` you want to receive the accessibility focus has `accessible={true}`.
+:::
+
+---
+
+### `sendAccessibilityEvent()`
+
+```tsx
+static sendAccessibilityEvent(host: HostInstance, eventType: AccessibilityEventTypes);
+```
+
+Imperatively trigger an accessibility event on a React component, like changing the focused element for a screen reader.
+
+:::note
+Make sure that any `View` you want to receive the accessibility focus has `accessible={true}`.
+:::
+
+| Name                                                           | Type                    | Description                                                                                                            |
+| -------------------------------------------------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| host <div className="label basic required">Required</div>      | HostInstance            | The component ref to send the event to.                                                                                |
+| eventType <div className="label basic required">Required</div> | AccessibilityEventTypes | One of `'click'` (Android only), `'focus'`, `'viewHoverEnter'` (Android only), or `'windowStateChange'` (Android only) |
diff --git a/website/versioned_docs/version-0.84/actionsheetios.md b/website/versioned_docs/version-0.84/actionsheetios.md
index 30d1d6afea5..dc2269301d2 100644
--- a/website/versioned_docs/version-0.84/actionsheetios.md
+++ b/website/versioned_docs/version-0.84/actionsheetios.md
@@ -1,144 +1,144 @@
----
-id: actionsheetios
-title: ActionSheetIOS
----
-
-Displays native to iOS [Action Sheet](https://developer.apple.com/design/human-interface-guidelines/action-sheets) component.
-
-## Example
-
-```SnackPlayer name=ActionSheetIOS%20Example&supportedPlatforms=ios
-import React, {useState} from 'react';
-import {ActionSheetIOS, Button, StyleSheet, Text} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [result, setResult] = useState('🔮');
-
-  const onPress = () =>
-    ActionSheetIOS.showActionSheetWithOptions(
-      {
-        options: ['Cancel', 'Generate number', 'Reset'],
-        destructiveButtonIndex: 2,
-        cancelButtonIndex: 0,
-        userInterfaceStyle: 'dark',
-      },
-      buttonIndex => {
-        if (buttonIndex === 0) {
-          // cancel action
-        } else if (buttonIndex === 1) {
-          setResult(String(Math.floor(Math.random() * 100) + 1));
-        } else if (buttonIndex === 2) {
-          setResult('🔮');
-        }
-      },
-    );
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.result}>{result}</Text>
-        <Button onPress={onPress} title="Show Action Sheet" />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  result: {
-    fontSize: 64,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
-# Reference
-
-## Methods
-
-### `showActionSheetWithOptions()`
-
-```tsx
-static showActionSheetWithOptions: (
-  options: ActionSheetIOSOptions,
-  callback: (buttonIndex: number) => void,
-);
-```
-
-Display an iOS action sheet. The `options` object must contain one or more of:
-
-- `options` (array of strings) - a list of button titles (required)
-- `cancelButtonIndex` (int) - index of cancel button in `options`
-- `cancelButtonTintColor` (string) - the [color](colors) used for the change the text color of the cancel button
-- `destructiveButtonIndex` (int or array of ints) - indices of destructive buttons in `options`
-- `title` (string) - a title to show above the action sheet
-- `message` (string) - a message to show below the title
-- `anchor` (number) - the node to which the action sheet should be anchored (used for iPad)
-- `tintColor` (string) - the [color](colors) used for non-destructive button titles
-- `disabledButtonIndices` (array of numbers) - a list of button indices which should be disabled
-- `userInterfaceStyle` (string) - the interface style used for the action sheet, can be set to `light` or `dark`, otherwise the default system style will be used
-
-The 'callback' function takes one parameter, the zero-based index of the selected item.
-
-Minimal example:
-
-```tsx
-ActionSheetIOS.showActionSheetWithOptions(
-  {
-    options: ['Cancel', 'Remove'],
-    destructiveButtonIndex: 1,
-    cancelButtonIndex: 0,
-  },
-  buttonIndex => {
-    if (buttonIndex === 1) {
-      /* destructive action */
-    }
-  },
-);
-```
-
----
-
-### `dismissActionSheet()`
-
-```tsx
-static dismissActionSheet();
-```
-
-Dismisses the most upper iOS action sheet presented, if no action sheet is present a warning is displayed.
-
----
-
-### `showShareActionSheetWithOptions()`
-
-```tsx
-static showShareActionSheetWithOptions: (
-  options: ShareActionSheetIOSOptions,
-  failureCallback: (error: Error) => void,
-  successCallback: (success: boolean, method: string) => void,
-);
-```
-
-Display the iOS share sheet. The `options` object should contain one or both of `message` and `url` and can additionally have a `subject` or `excludedActivityTypes`:
-
-- `url` (string) - a URL to share
-- `message` (string) - a message to share
-- `subject` (string) - a subject for the message
-- `excludedActivityTypes` (array) - the activities to exclude from the ActionSheet
-
-:::note
-If `url` points to a local file, or is a base64-encoded uri, the file it points to will be loaded and shared directly. In this way, you can share images, videos, PDF files, etc. If `url` points to a remote file or address it must conform to URL format as described in [RFC 2396](https://www.ietf.org/rfc/rfc2396.txt). For example, a web URL without a proper protocol (HTTP/HTTPS) will not be shared.
-:::
-
-The 'failureCallback' function takes one parameter, an error object. The only property defined on this object is an optional `stack` property of type `string`.
-
-The 'successCallback' function takes two parameters:
-
-- a boolean value signifying success or failure
-- a string that, in the case of success, indicates the method of sharing
+---
+id: actionsheetios
+title: ActionSheetIOS
+---
+
+Displays native to iOS [Action Sheet](https://developer.apple.com/design/human-interface-guidelines/action-sheets) component.
+
+## Example
+
+```SnackPlayer name=ActionSheetIOS%20Example&supportedPlatforms=ios
+import {useState} from 'react';
+import {ActionSheetIOS, Button, StyleSheet, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [result, setResult] = useState('🔮');
+
+  const onPress = () =>
+    ActionSheetIOS.showActionSheetWithOptions(
+      {
+        options: ['Cancel', 'Generate number', 'Reset'],
+        destructiveButtonIndex: 2,
+        cancelButtonIndex: 0,
+        userInterfaceStyle: 'dark',
+      },
+      buttonIndex => {
+        if (buttonIndex === 0) {
+          // cancel action
+        } else if (buttonIndex === 1) {
+          setResult(String(Math.floor(Math.random() * 100) + 1));
+        } else if (buttonIndex === 2) {
+          setResult('🔮');
+        }
+      },
+    );
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.result}>{result}</Text>
+        <Button onPress={onPress} title="Show Action Sheet" />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  result: {
+    fontSize: 64,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+# Reference
+
+## Methods
+
+### `showActionSheetWithOptions()`
+
+```tsx
+static showActionSheetWithOptions: (
+  options: ActionSheetIOSOptions,
+  callback: (buttonIndex: number) => void,
+);
+```
+
+Display an iOS action sheet. The `options` object must contain one or more of:
+
+- `options` (array of strings) - a list of button titles (required)
+- `cancelButtonIndex` (int) - index of cancel button in `options`
+- `cancelButtonTintColor` (string) - the [color](colors) used for the change the text color of the cancel button
+- `destructiveButtonIndex` (int or array of ints) - indices of destructive buttons in `options`
+- `title` (string) - a title to show above the action sheet
+- `message` (string) - a message to show below the title
+- `anchor` (number) - the node to which the action sheet should be anchored (used for iPad)
+- `tintColor` (string) - the [color](colors) used for non-destructive button titles
+- `disabledButtonIndices` (array of numbers) - a list of button indices which should be disabled
+- `userInterfaceStyle` (string) - the interface style used for the action sheet, can be set to `light` or `dark`, otherwise the default system style will be used
+
+The 'callback' function takes one parameter, the zero-based index of the selected item.
+
+Minimal example:
+
+```tsx
+ActionSheetIOS.showActionSheetWithOptions(
+  {
+    options: ['Cancel', 'Remove'],
+    destructiveButtonIndex: 1,
+    cancelButtonIndex: 0,
+  },
+  buttonIndex => {
+    if (buttonIndex === 1) {
+      /* destructive action */
+    }
+  },
+);
+```
+
+---
+
+### `dismissActionSheet()`
+
+```tsx
+static dismissActionSheet();
+```
+
+Dismisses the most upper iOS action sheet presented, if no action sheet is present a warning is displayed.
+
+---
+
+### `showShareActionSheetWithOptions()`
+
+```tsx
+static showShareActionSheetWithOptions: (
+  options: ShareActionSheetIOSOptions,
+  failureCallback: (error: Error) => void,
+  successCallback: (success: boolean, method: string) => void,
+);
+```
+
+Display the iOS share sheet. The `options` object should contain one or both of `message` and `url` and can additionally have a `subject` or `excludedActivityTypes`:
+
+- `url` (string) - a URL to share
+- `message` (string) - a message to share
+- `subject` (string) - a subject for the message
+- `excludedActivityTypes` (array) - the activities to exclude from the ActionSheet
+
+:::note
+If `url` points to a local file, or is a base64-encoded uri, the file it points to will be loaded and shared directly. In this way, you can share images, videos, PDF files, etc. If `url` points to a remote file or address it must conform to URL format as described in [RFC 2396](https://www.ietf.org/rfc/rfc2396.txt). For example, a web URL without a proper protocol (HTTP/HTTPS) will not be shared.
+:::
+
+The 'failureCallback' function takes one parameter, an error object. The only property defined on this object is an optional `stack` property of type `string`.
+
+The 'successCallback' function takes two parameters:
+
+- a boolean value signifying success or failure
+- a string that, in the case of success, indicates the method of sharing
diff --git a/website/versioned_docs/version-0.84/activityindicator.md b/website/versioned_docs/version-0.84/activityindicator.md
index c9d03b73021..9b1445cbf5e 100644
--- a/website/versioned_docs/version-0.84/activityindicator.md
+++ b/website/versioned_docs/version-0.84/activityindicator.md
@@ -8,7 +8,6 @@ Displays a circular loading indicator.
 ## Example
 
 ```SnackPlayer name=ActivityIndicator%20Example
-import React from 'react';
 import {ActivityIndicator, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.84/alert.md b/website/versioned_docs/version-0.84/alert.md
index c80b62fb7a6..78b1c412e66 100644
--- a/website/versioned_docs/version-0.84/alert.md
+++ b/website/versioned_docs/version-0.84/alert.md
@@ -12,7 +12,6 @@ This is an API that works both on Android and iOS and can show static alerts. Al
 ## Example
 
 ```SnackPlayer name=Alert%20Example&supportedPlatforms=ios,android
-import React from 'react';
 import {StyleSheet, Button, Alert} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -81,7 +80,6 @@ The cancel event can be handled by providing an `onDismiss` callback property in
 ### Example <div className="label android">Android</div>
 
 ```SnackPlayer name=Alert%20Android%20Dissmissable%20Example&supportedPlatforms=android
-import React from 'react';
 import {StyleSheet, Button, Alert} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.84/animated.md b/website/versioned_docs/version-0.84/animated.md
index d4ba867028b..fce79ffaf57 100644
--- a/website/versioned_docs/version-0.84/animated.md
+++ b/website/versioned_docs/version-0.84/animated.md
@@ -16,7 +16,6 @@ Don't modify the animated value directly. You can use the [`useRef` Hook](https:
 The following example contains a `View` which will fade in and fade out based on the animated value `fadeAnim`
 
 ```SnackPlayer name=Animated%20Example
-import React from 'react';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 import {
   Animated,
diff --git a/website/versioned_docs/version-0.84/animatedvaluexy.md b/website/versioned_docs/version-0.84/animatedvaluexy.md
index 6cb44808ccf..8135c12354a 100644
--- a/website/versioned_docs/version-0.84/animatedvaluexy.md
+++ b/website/versioned_docs/version-0.84/animatedvaluexy.md
@@ -1,227 +1,227 @@
----
-id: animatedvaluexy
-title: Animated.ValueXY
----
-
-2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal [`Animated.Value`](animatedvalue), but multiplexed. Contains two regular `Animated.Value`s under the hood.
-
-## Example
-
-```SnackPlayer name=Animated.ValueXY%20Example
-import React, {useRef} from 'react';
-import {Animated, PanResponder, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const DraggableView = () => {
-  const pan = useRef(new Animated.ValueXY()).current;
-
-  const panResponder = PanResponder.create({
-    onStartShouldSetPanResponder: () => true,
-    onPanResponderMove: Animated.event([
-      null,
-      {
-        dx: pan.x, // x,y are Animated.Value
-        dy: pan.y,
-      },
-    ]),
-    onPanResponderRelease: () => {
-      Animated.spring(
-        pan, // Auto-multiplexed
-        {toValue: {x: 0, y: 0}, useNativeDriver: true}, // Back to zero
-      ).start();
-    },
-  });
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Animated.View
-          {...panResponder.panHandlers}
-          style={[pan.getLayout(), styles.box]}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  box: {
-    backgroundColor: '#61dafb',
-    width: 80,
-    height: 80,
-    borderRadius: 4,
-  },
-});
-
-export default DraggableView;
-```
-
----
-
-# Reference
-
-## Methods
-
-### `setValue()`
-
-```tsx
-setValue(value: {x: number; y: number});
-```
-
-Directly set the value. This will stop any animations running on the value and update all the bound properties.
-
-**Parameters:**
-
-| Name  | Type                     | Required | Description |
-| ----- | ------------------------ | -------- | ----------- |
-| value | `{x: number; y: number}` | Yes      | Value       |
-
----
-
-### `setOffset()`
-
-```tsx
-setOffset(offset: {x: number; y: number});
-```
-
-Sets an offset that is applied on top of whatever value is set, whether via `setValue`, an animation, or `Animated.event`. Useful for compensating things like the start of a pan gesture.
-
-**Parameters:**
-
-| Name   | Type                     | Required | Description  |
-| ------ | ------------------------ | -------- | ------------ |
-| offset | `{x: number; y: number}` | Yes      | Offset value |
-
----
-
-### `flattenOffset()`
-
-```tsx
-flattenOffset();
-```
-
-Merges the offset value into the base value and resets the offset to zero. The final output of the value is unchanged.
-
----
-
-### `extractOffset()`
-
-```tsx
-extractOffset();
-```
-
-Sets the offset value to the base value, and resets the base value to zero. The final output of the value is unchanged.
-
----
-
-### `addListener()`
-
-```tsx
-addListener(callback: (value: {x: number; y: number}) => void);
-```
-
-Adds an asynchronous listener to the value so you can observe updates from animations. This is useful because there is no way to synchronously read the value because it might be driven natively.
-
-Returns a string that serves as an identifier for the listener.
-
-**Parameters:**
-
-| Name     | Type     | Required | Description                                                                                 |
-| -------- | -------- | -------- | ------------------------------------------------------------------------------------------- |
-| callback | function | Yes      | The callback function which will receive an object with a `value` key set to the new value. |
-
----
-
-### `removeListener()`
-
-```tsx
-removeListener(id: string);
-```
-
-Unregister a listener. The `id` param shall match the identifier previously returned by `addListener()`.
-
-**Parameters:**
-
-| Name | Type   | Required | Description                        |
-| ---- | ------ | -------- | ---------------------------------- |
-| id   | string | Yes      | Id for the listener being removed. |
-
----
-
-### `removeAllListeners()`
-
-```tsx
-removeAllListeners();
-```
-
-Remove all registered listeners.
-
----
-
-### `stopAnimation()`
-
-```tsx
-stopAnimation(callback?: (value: {x: number; y: number}) => void);
-```
-
-Stops any running animation or tracking. `callback` is invoked with the final value after stopping the animation, which is useful for updating state to match the animation position with layout.
-
-**Parameters:**
-
-| Name     | Type     | Required | Description                                   |
-| -------- | -------- | -------- | --------------------------------------------- |
-| callback | function | No       | A function that will receive the final value. |
-
----
-
-### `resetAnimation()`
-
-```tsx
-resetAnimation(callback?: (value: {x: number; y: number}) => void);
-```
-
-Stops any animation and resets the value to its original.
-
-**Parameters:**
-
-| Name     | Type     | Required | Description                                      |
-| -------- | -------- | -------- | ------------------------------------------------ |
-| callback | function | No       | A function that will receive the original value. |
-
----
-
-### `getLayout()`
-
-```tsx
-getLayout(): {left: Animated.Value, top: Animated.Value};
-```
-
-Converts `{x, y}` into `{left, top}` for use in style, e.g.
-
-```tsx
-style={this.state.anim.getLayout()}
-```
-
----
-
-### `getTranslateTransform()`
-
-```tsx
-getTranslateTransform(): [
-  {translateX: Animated.Value},
-  {translateY: Animated.Value},
-];
-```
-
-Converts `{x, y}` into a useable translation transform, e.g.
-
-```tsx
-style={{
-  transform: this.state.anim.getTranslateTransform()
-}}
-```
+---
+id: animatedvaluexy
+title: Animated.ValueXY
+---
+
+2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal [`Animated.Value`](animatedvalue), but multiplexed. Contains two regular `Animated.Value`s under the hood.
+
+## Example
+
+```SnackPlayer name=Animated.ValueXY%20Example
+import {useRef} from 'react';
+import {Animated, PanResponder, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const DraggableView = () => {
+  const pan = useRef(new Animated.ValueXY()).current;
+
+  const panResponder = PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onPanResponderMove: Animated.event([
+      null,
+      {
+        dx: pan.x, // x,y are Animated.Value
+        dy: pan.y,
+      },
+    ]),
+    onPanResponderRelease: () => {
+      Animated.spring(
+        pan, // Auto-multiplexed
+        {toValue: {x: 0, y: 0}, useNativeDriver: true}, // Back to zero
+      ).start();
+    },
+  });
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Animated.View
+          {...panResponder.panHandlers}
+          style={[pan.getLayout(), styles.box]}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  box: {
+    backgroundColor: '#61dafb',
+    width: 80,
+    height: 80,
+    borderRadius: 4,
+  },
+});
+
+export default DraggableView;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `setValue()`
+
+```tsx
+setValue(value: {x: number; y: number});
+```
+
+Directly set the value. This will stop any animations running on the value and update all the bound properties.
+
+**Parameters:**
+
+| Name  | Type                     | Required | Description |
+| ----- | ------------------------ | -------- | ----------- |
+| value | `{x: number; y: number}` | Yes      | Value       |
+
+---
+
+### `setOffset()`
+
+```tsx
+setOffset(offset: {x: number; y: number});
+```
+
+Sets an offset that is applied on top of whatever value is set, whether via `setValue`, an animation, or `Animated.event`. Useful for compensating things like the start of a pan gesture.
+
+**Parameters:**
+
+| Name   | Type                     | Required | Description  |
+| ------ | ------------------------ | -------- | ------------ |
+| offset | `{x: number; y: number}` | Yes      | Offset value |
+
+---
+
+### `flattenOffset()`
+
+```tsx
+flattenOffset();
+```
+
+Merges the offset value into the base value and resets the offset to zero. The final output of the value is unchanged.
+
+---
+
+### `extractOffset()`
+
+```tsx
+extractOffset();
+```
+
+Sets the offset value to the base value, and resets the base value to zero. The final output of the value is unchanged.
+
+---
+
+### `addListener()`
+
+```tsx
+addListener(callback: (value: {x: number; y: number}) => void);
+```
+
+Adds an asynchronous listener to the value so you can observe updates from animations. This is useful because there is no way to synchronously read the value because it might be driven natively.
+
+Returns a string that serves as an identifier for the listener.
+
+**Parameters:**
+
+| Name     | Type     | Required | Description                                                                                 |
+| -------- | -------- | -------- | ------------------------------------------------------------------------------------------- |
+| callback | function | Yes      | The callback function which will receive an object with a `value` key set to the new value. |
+
+---
+
+### `removeListener()`
+
+```tsx
+removeListener(id: string);
+```
+
+Unregister a listener. The `id` param shall match the identifier previously returned by `addListener()`.
+
+**Parameters:**
+
+| Name | Type   | Required | Description                        |
+| ---- | ------ | -------- | ---------------------------------- |
+| id   | string | Yes      | Id for the listener being removed. |
+
+---
+
+### `removeAllListeners()`
+
+```tsx
+removeAllListeners();
+```
+
+Remove all registered listeners.
+
+---
+
+### `stopAnimation()`
+
+```tsx
+stopAnimation(callback?: (value: {x: number; y: number}) => void);
+```
+
+Stops any running animation or tracking. `callback` is invoked with the final value after stopping the animation, which is useful for updating state to match the animation position with layout.
+
+**Parameters:**
+
+| Name     | Type     | Required | Description                                   |
+| -------- | -------- | -------- | --------------------------------------------- |
+| callback | function | No       | A function that will receive the final value. |
+
+---
+
+### `resetAnimation()`
+
+```tsx
+resetAnimation(callback?: (value: {x: number; y: number}) => void);
+```
+
+Stops any animation and resets the value to its original.
+
+**Parameters:**
+
+| Name     | Type     | Required | Description                                      |
+| -------- | -------- | -------- | ------------------------------------------------ |
+| callback | function | No       | A function that will receive the original value. |
+
+---
+
+### `getLayout()`
+
+```tsx
+getLayout(): {left: Animated.Value, top: Animated.Value};
+```
+
+Converts `{x, y}` into `{left, top}` for use in style, e.g.
+
+```tsx
+style={this.state.anim.getLayout()}
+```
+
+---
+
+### `getTranslateTransform()`
+
+```tsx
+getTranslateTransform(): [
+  {translateX: Animated.Value},
+  {translateY: Animated.Value},
+];
+```
+
+Converts `{x, y}` into a useable translation transform, e.g.
+
+```tsx
+style={{
+  transform: this.state.anim.getTranslateTransform()
+}}
+```
diff --git a/website/versioned_docs/version-0.84/animations.md b/website/versioned_docs/version-0.84/animations.md
index ccdaa5a32bb..80b150e32f7 100644
--- a/website/versioned_docs/version-0.84/animations.md
+++ b/website/versioned_docs/version-0.84/animations.md
@@ -1,673 +1,672 @@
----
-id: animations
-title: Animations
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface.
-
-React Native provides two complementary animation systems: [`Animated`](animations#animated-api) for granular and interactive control of specific values, and [`LayoutAnimation`](animations#layoutanimation-api) for animated global layout transactions.
-
-## `Animated` API
-
-The [`Animated`](animated) API is designed to concisely express a wide variety of interesting animation and interaction patterns in a very performant way. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and `start`/`stop` methods to control time-based animation execution.
-
-`Animated` exports six animatable component types: `View`, `Text`, `Image`, `ScrollView`, `FlatList` and `SectionList`, but you can also create your own using `Animated.createAnimatedComponent()`.
-
-For example, a container view that fades in when it is mounted may look like this:
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer ext=js
-import React, {useEffect, useRef} from 'react';
-import {Animated, Text, View} from 'react-native';
-
-const FadeInView = props => {
-  const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
-
-  useEffect(() => {
-    Animated.timing(fadeAnim, {
-      toValue: 1,
-      duration: 10000,
-      useNativeDriver: true,
-    }).start();
-  }, [fadeAnim]);
-
-  return (
-    <Animated.View // Special animatable View
-      style={{
-        ...props.style,
-        opacity: fadeAnim, // Bind opacity to animated value
-      }}>
-      {props.children}
-    </Animated.View>
-  );
-};
-
-// You can then use your `FadeInView` in place of a `View` in your components:
-export default () => {
-  return (
-    <View
-      style={{
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}>
-      <FadeInView
-        style={{
-          width: 250,
-          height: 50,
-          backgroundColor: 'powderblue',
-        }}>
-        <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>
-          Fading in
-        </Text>
-      </FadeInView>
-    </View>
-  );
-};
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer ext=tsx
-import React, {useEffect, useRef, type PropsWithChildren} from 'react';
-import {Animated, Text, View, type ViewStyle} from 'react-native';
-
-type FadeInViewProps = PropsWithChildren<{style: ViewStyle}>;
-
-const FadeInView: React.FC<FadeInViewProps> = props => {
-  const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
-
-  useEffect(() => {
-    Animated.timing(fadeAnim, {
-      toValue: 1,
-      duration: 10000,
-      useNativeDriver: true,
-    }).start();
-  }, [fadeAnim]);
-
-  return (
-    <Animated.View // Special animatable View
-      style={{
-        ...props.style,
-        opacity: fadeAnim, // Bind opacity to animated value
-      }}>
-      {props.children}
-    </Animated.View>
-  );
-};
-
-// You can then use your `FadeInView` in place of a `View` in your components:
-export default () => {
-  return (
-    <View
-      style={{
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}>
-      <FadeInView
-        style={{
-          width: 250,
-          height: 50,
-          backgroundColor: 'powderblue',
-        }}>
-        <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>
-          Fading in
-        </Text>
-      </FadeInView>
-    </View>
-  );
-};
-```
-
-</TabItem>
-</Tabs>
-
-Let's break down what's happening here. In the `FadeInView` render method, a new `Animated.Value` called `fadeAnim` is initialized with `useRef`. The opacity property on the `View` is mapped to this animated value. Behind the scenes, the numeric value is extracted and used to set opacity.
-
-When the component mounts, the opacity is set to 0. Then, an easing animation is started on the `fadeAnim` animated value, which will update all of its dependent mappings (in this case, only the opacity) on each frame as the value animates to the final value of 1.
-
-This is done in an optimized way that is faster than calling `setState` and re-rendering. Because the entire configuration is declarative, we will be able to implement further optimizations that serialize the configuration and runs the animation on a high-priority thread.
-
-### Configuring animations
-
-Animations are heavily configurable. Custom and predefined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.
-
-`Animated` provides several animation types, the most commonly used one being [`Animated.timing()`](animated#timing). It supports animating a value over time using one of various predefined easing functions, or you can use your own. Easing functions are typically used in animation to convey gradual acceleration and deceleration of objects.
-
-By default, `timing` will use an easeInOut curve that conveys gradual acceleration to full speed and concludes by gradually decelerating to a stop. You can specify a different easing function by passing an `easing` parameter. Custom `duration` or even a `delay` before the animation starts is also supported.
-
-For example, if we want to create a 2-second long animation of an object that slightly backs up before moving to its final position:
-
-```tsx
-Animated.timing(this.state.xPosition, {
-  toValue: 100,
-  easing: Easing.back(),
-  duration: 2000,
-  useNativeDriver: true,
-}).start();
-```
-
-Take a look at the [Configuring animations](animated#configuring-animations) section of the `Animated` API reference to learn more about all the config parameters supported by the built-in animations.
-
-### Composing animations
-
-Animations can be combined and played in sequence or in parallel. Sequential animations can play immediately after the previous animation has finished, or they can start after a specified delay. The `Animated` API provides several methods, such as `sequence()` and `delay()`, each of which take an array of animations to execute and automatically calls `start()`/`stop()` as needed.
-
-For example, the following animation coasts to a stop, then it springs back while twirling in parallel:
-
-```tsx
-Animated.sequence([
-  // decay, then spring to start and twirl
-  Animated.decay(position, {
-    // coast to a stop
-    velocity: {x: gestureState.vx, y: gestureState.vy}, // velocity from gesture release
-    deceleration: 0.997,
-    useNativeDriver: true,
-  }),
-  Animated.parallel([
-    // after decay, in parallel:
-    Animated.spring(position, {
-      toValue: {x: 0, y: 0}, // return to start
-      useNativeDriver: true,
-    }),
-    Animated.timing(twirl, {
-      // and twirl
-      toValue: 360,
-      useNativeDriver: true,
-    }),
-  ]),
-]).start(); // start the sequence group
-```
-
-If one animation is stopped or interrupted, then all other animations in the group are also stopped. `Animated.parallel` has a `stopTogether` option that can be set to `false` to disable this.
-
-You can find a full list of composition methods in the [Composing animations](animated#composing-animations) section of the `Animated` API reference.
-
-### Combining animated values
-
-You can [combine two animated values](animated#combining-animated-values) via addition, multiplication, division, or modulo to make a new animated value.
-
-There are some cases where an animated value needs to invert another animated value for calculation. An example is inverting a scale (2x --> 0.5x):
-
-```tsx
-const a = new Animated.Value(1);
-const b = Animated.divide(1, a);
-
-Animated.spring(a, {
-  toValue: 2,
-  useNativeDriver: true,
-}).start();
-```
-
-### Interpolation
-
-Each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.
-
-A basic mapping to convert a 0-1 range to a 0-100 range would be:
-
-```tsx
-value.interpolate({
-  inputRange: [0, 1],
-  outputRange: [0, 100],
-});
-```
-
-For example, you may want to think about your `Animated.Value` as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying `style` from the example above like so:
-
-```tsx
-  style={{
-    opacity: this.state.fadeAnim, // Binds directly
-    transform: [{
-      translateY: this.state.fadeAnim.interpolate({
-        inputRange: [0, 1],
-        outputRange: [150, 0]  // 0 : 150, 0.5 : 75, 1 : 0
-      }),
-    }],
-  }}
-```
-
-[`interpolate()`](animated#interpolate) supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
-
-```tsx
-value.interpolate({
-  inputRange: [-300, -100, 0, 100, 101],
-  outputRange: [300, 0, 1, 0, 0],
-});
-```
-
-Which would map like so:
-
-```
-Input | Output
-------|-------
-  -400|    450
-  -300|    300
-  -200|    150
-  -100|      0
-   -50|    0.5
-     0|      1
-    50|    0.5
-   100|      0
-   101|      0
-   200|      0
-```
-
-`interpolate()` also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
-
-```tsx
-value.interpolate({
-  inputRange: [0, 360],
-  outputRange: ['0deg', '360deg'],
-});
-```
-
-`interpolate()` also supports arbitrary easing functions, many of which are already implemented in the [`Easing`](easing) module. `interpolate()` also has configurable behavior for extrapolating the `outputRange`. You can set the extrapolation by setting the `extrapolate`, `extrapolateLeft`, or `extrapolateRight` options. The default value is `extend` but you can use `clamp` to prevent the output value from exceeding `outputRange`.
-
-### Tracking dynamic values
-
-Animated values can also track other values by setting the `toValue` of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a `spring()` pinned on another animated value, or with `timing()` and a `duration` of 0 for rigid tracking. They can also be composed with interpolations:
-
-```tsx
-Animated.spring(follower, {toValue: leader}).start();
-Animated.timing(opacity, {
-  toValue: pan.x.interpolate({
-    inputRange: [0, 300],
-    outputRange: [1, 0],
-  }),
-  useNativeDriver: true,
-}).start();
-```
-
-The `leader` and `follower` animated values would be implemented using `Animated.ValueXY()`. `ValueXY` is a handy way to deal with 2D interactions, such as panning or dragging. It is a basic wrapper that contains two `Animated.Value` instances and some helper functions that call through to them, making `ValueXY` a drop-in replacement for `Value` in many cases. It allows us to track both x and y values in the example above.
-
-### Tracking gestures
-
-Gestures, like panning or scrolling, and other events can map directly to animated values using [`Animated.event`](animated#event). This is done with a structured map syntax so that values can be extracted from complex event objects. The first level is an array to allow mapping across multiple args, and that array contains nested objects.
-
-For example, when working with horizontal scrolling gestures, you would do the following in order to map `event.nativeEvent.contentOffset.x` to `scrollX` (an `Animated.Value`):
-
-```tsx
- onScroll={Animated.event(
-   // scrollX = e.nativeEvent.contentOffset.x
-   [{nativeEvent: {
-        contentOffset: {
-          x: scrollX
-        }
-      }
-    }]
- )}
-```
-
-The following example implements a horizontal scrolling carousel where the scroll position indicators are animated using the `Animated.event` used in the `ScrollView`
-
-#### ScrollView with Animated Event Example
-
-```SnackPlayer name=Animated&supportedPlatforms=ios,android
-import React from 'react';
-import {
-  ScrollView,
-  Text,
-  StyleSheet,
-  View,
-  ImageBackground,
-  Animated,
-  useWindowDimensions,
-  useAnimatedValue,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const images = new Array(6).fill(
-  'https://images.unsplash.com/photo-1556740749-887f6717d7e4',
-);
-
-const App = () => {
-  const scrollX = useAnimatedValue(0);
-
-  const {width: windowWidth} = useWindowDimensions();
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.scrollContainer}>
-          <ScrollView
-            horizontal={true}
-            pagingEnabled
-            showsHorizontalScrollIndicator={false}
-            onScroll={Animated.event([
-              {
-                nativeEvent: {
-                  contentOffset: {
-                    x: scrollX,
-                  },
-                },
-              },
-            ])}
-            scrollEventThrottle={1}>
-            {images.map((image, imageIndex) => {
-              return (
-                <View
-                  style={{width: windowWidth, height: 250}}
-                  key={imageIndex}>
-                  <ImageBackground source={{uri: image}} style={styles.card}>
-                    <View style={styles.textContainer}>
-                      <Text style={styles.infoText}>
-                        {'Image - ' + imageIndex}
-                      </Text>
-                    </View>
-                  </ImageBackground>
-                </View>
-              );
-            })}
-          </ScrollView>
-          <View style={styles.indicatorContainer}>
-            {images.map((image, imageIndex) => {
-              const width = scrollX.interpolate({
-                inputRange: [
-                  windowWidth * (imageIndex - 1),
-                  windowWidth * imageIndex,
-                  windowWidth * (imageIndex + 1),
-                ],
-                outputRange: [8, 16, 8],
-                extrapolate: 'clamp',
-              });
-              return (
-                <Animated.View
-                  key={imageIndex}
-                  style={[styles.normalDot, {width}]}
-                />
-              );
-            })}
-          </View>
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  scrollContainer: {
-    height: 300,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  card: {
-    flex: 1,
-    marginVertical: 4,
-    marginHorizontal: 16,
-    borderRadius: 5,
-    overflow: 'hidden',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  textContainer: {
-    backgroundColor: 'rgba(0,0,0, 0.7)',
-    paddingHorizontal: 24,
-    paddingVertical: 8,
-    borderRadius: 5,
-  },
-  infoText: {
-    color: 'white',
-    fontSize: 16,
-    fontWeight: 'bold',
-  },
-  normalDot: {
-    height: 8,
-    width: 8,
-    borderRadius: 4,
-    backgroundColor: 'silver',
-    marginHorizontal: 4,
-  },
-  indicatorContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-
-export default App;
-```
-
-When using `PanResponder`, you could use the following code to extract the x and y positions from `gestureState.dx` and `gestureState.dy`. We use a `null` in the first position of the array, as we are only interested in the second argument passed to the `PanResponder` handler, which is the `gestureState`.
-
-```tsx
-onPanResponderMove={Animated.event(
-  [null, // ignore the native event
-  // extract dx and dy from gestureState
-  // like 'pan.x = gestureState.dx, pan.y = gestureState.dy'
-  {dx: pan.x, dy: pan.y}
-])}
-```
-
-#### PanResponder with Animated Event Example
-
-```SnackPlayer name=Animated
-import React, {useRef} from 'react';
-import {Animated, View, StyleSheet, PanResponder, Text} from 'react-native';
-
-const App = () => {
-  const pan = useRef(new Animated.ValueXY()).current;
-  const panResponder = useRef(
-    PanResponder.create({
-      onMoveShouldSetPanResponder: () => true,
-      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
-      onPanResponderRelease: () => {
-        Animated.spring(pan, {
-          toValue: {x: 0, y: 0},
-          useNativeDriver: true,
-        }).start();
-      },
-    }),
-  ).current;
-
-  return (
-    <View style={styles.container}>
-      <Text style={styles.titleText}>Drag & Release this box!</Text>
-      <Animated.View
-        style={{
-          transform: [{translateX: pan.x}, {translateY: pan.y}],
-        }}
-        {...panResponder.panHandlers}>
-        <View style={styles.box} />
-      </Animated.View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  titleText: {
-    fontSize: 14,
-    lineHeight: 24,
-    fontWeight: 'bold',
-  },
-  box: {
-    height: 150,
-    width: 150,
-    backgroundColor: 'blue',
-    borderRadius: 5,
-  },
-});
-
-export default App;
-```
-
-### Responding to the current animation value
-
-You may notice that there is no clear way to read the current value while animating. This is because the value may only be known in the native runtime due to optimizations. If you need to run JavaScript in response to the current value, there are two approaches:
-
-- `spring.stopAnimation(callback)` will stop the animation and invoke `callback` with the final value. This is useful when making gesture transitions.
-- `spring.addListener(callback)` will invoke `callback` asynchronously while the animation is running, providing a recent value. This is useful for triggering state changes, for example snapping a bobble to a new option as the user drags it closer, because these larger state changes are less sensitive to a few frames of lag compared to continuous gestures like panning which need to run at 60 fps.
-
-`Animated` is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Check out `Animated.Value.addListener` as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.
-
-### Using the native driver
-
-The `Animated` API is designed to be serializable. By using the [native driver](/blog/2017/02/14/using-native-driver-for-animated), we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.
-
-Using the native driver for normal animations can be accomplished by setting `useNativeDriver: true` in animation config when starting it. Animations without a `useNativeDriver` property will default to false for legacy reasons, but emit a warning (and typechecking error in TypeScript).
-
-```tsx
-Animated.timing(this.state.animatedValue, {
-  toValue: 1,
-  duration: 500,
-  useNativeDriver: true, // <-- Set this to true
-}).start();
-```
-
-Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
-
-The native driver also works with `Animated.event`. This is especially useful for animations that follow the scroll position as without the native driver, the animation will always run a frame behind the gesture due to the async nature of React Native.
-
-```tsx
-<Animated.ScrollView // <-- Use the Animated ScrollView wrapper
-  onScroll={Animated.event(
-    [
-      {
-        nativeEvent: {
-          contentOffset: {y: this.state.animatedValue},
-        },
-      },
-    ],
-    {useNativeDriver: true}, // <-- Set this to true
-  )}>
-  {content}
-</Animated.ScrollView>
-```
-
-You can see the native driver in action by running the [RNTester app](https://github.com/facebook/react-native/blob/main/packages/rn-tester/), then loading the Native Animated Example. You can also take a look at the [source code](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js) to learn how these examples were produced.
-
-#### Caveats
-
-Not everything you can do with `Animated` is currently supported by the native driver. The main limitation is that you can only animate non-layout properties: things like `transform` and `opacity` will work, but Flexbox and position properties will not. When using `Animated.event`, it will only work with direct events and not bubbling events. This means it does not work with `PanResponder` but does work with things like `ScrollView#onScroll`.
-
-When an animation is running, it can prevent `VirtualizedList` components from rendering more rows. If you need to run a long or looping animation while the user is scrolling through a list, you can use `isInteraction: false` in your animation's config to prevent this issue.
-
-### Bear in mind
-
-While using transform styles such as `rotateY`, `rotateX`, and others ensure the transform style `perspective` is in place. At this time some animations may not render on Android without it. Example below.
-
-```tsx
-<Animated.View
-  style={{
-    transform: [
-      {scale: this.state.scale},
-      {rotateY: this.state.rotateY},
-      {perspective: 1000}, // without this line this Animation will not render on Android while working fine on iOS
-    ],
-  }}
-/>
-```
-
-### Additional examples
-
-The RNTester app has various examples of `Animated` in use:
-
-- [AnimatedGratuitousApp](https://github.com/facebook/react-native/tree/main/packages/rn-tester/js/examples/AnimatedGratuitousApp)
-- [NativeAnimationsExample](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js)
-
-## `LayoutAnimation` API
-
-`LayoutAnimation` allows you to globally configure `create` and `update` animations that will be used for all views in the next render/layout cycle. This is useful for doing Flexbox layout updates without bothering to measure or calculate specific properties in order to animate them directly, and is especially useful when layout changes may affect ancestors, for example a "see more" expansion that also increases the size of the parent and pushes down the row below which would otherwise require explicit coordination between the components in order to animate them all in sync.
-
-Note that although `LayoutAnimation` is very powerful and can be quite useful, it provides much less control than `Animated` and other animation libraries, so you may need to use another approach if you can't get `LayoutAnimation` to do what you want.
-
-Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`:
-
-```tsx
-UIManager.setLayoutAnimationEnabledExperimental(true);
-```
-
-```SnackPlayer name=LayoutAnimations
-import React, {useState} from 'react';
-import {
-  NativeModules,
-  LayoutAnimation,
-  Text,
-  TouchableOpacity,
-  StyleSheet,
-  View,
-} from 'react-native';
-
-const {UIManager} = NativeModules;
-
-UIManager.setLayoutAnimationEnabledExperimental &&
-  UIManager.setLayoutAnimationEnabledExperimental(true);
-
-export default function App() {
-  const [state, setState] = useState({
-    w: 100,
-    h: 100,
-  });
-
-  const onPress = () => {
-    // Animate the update
-    LayoutAnimation.spring();
-    setState({w: state.w + 15, h: state.h + 15});
-  };
-
-  return (
-    <View style={styles.container}>
-      <View style={[styles.box, {width: state.w, height: state.h}]} />
-      <TouchableOpacity onPress={onPress}>
-        <View style={styles.button}>
-          <Text style={styles.buttonText}>Press me!</Text>
-        </View>
-      </TouchableOpacity>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  box: {
-    width: 200,
-    height: 200,
-    backgroundColor: 'red',
-  },
-  button: {
-    backgroundColor: 'black',
-    paddingHorizontal: 20,
-    paddingVertical: 15,
-    marginTop: 15,
-  },
-  buttonText: {
-    color: '#fff',
-    fontWeight: 'bold',
-  },
-});
-```
-
-This example uses a preset value, you can customize the animations as you need, see [LayoutAnimation.js](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/LayoutAnimation/LayoutAnimation.js) for more information.
-
-## Additional notes
-
-### `requestAnimationFrame`
-
-`requestAnimationFrame` is a polyfill from the browser that you might be familiar with. It accepts a function as its only argument and calls that function before the next repaint. It is an essential building block for animations that underlies all of the JavaScript-based animation APIs. In general, you shouldn't need to call this yourself - the animation APIs will manage frame updates for you.
-
-### `setNativeProps`
-
-As mentioned [in the Direct Manipulation section](legacy/direct-manipulation), `setNativeProps` allows us to modify properties of native-backed components (components that are actually backed by native views, unlike composite components) directly, without having to `setState` and re-render the component hierarchy.
-
-We could use this in the Rebound example to update the scale - this might be helpful if the component that we are updating is deeply nested and hasn't been optimized with `shouldComponentUpdate`.
-
-If you find your animations with dropping frames (performing below 60 frames per second), look into using `setNativeProps` or `shouldComponentUpdate` to optimize them. Or you could run the animations on the UI thread rather than the JavaScript thread [with the useNativeDriver option](/blog/2017/02/14/using-native-driver-for-animated). You may also want to defer any computationally intensive work until after animations are complete, using the [InteractionManager](interactionmanager). You can monitor the frame rate by using the In-App Dev Menu "FPS Monitor" tool.
+---
+id: animations
+title: Animations
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface.
+
+React Native provides two complementary animation systems: [`Animated`](animations#animated-api) for granular and interactive control of specific values, and [`LayoutAnimation`](animations#layoutanimation-api) for animated global layout transactions.
+
+## `Animated` API
+
+The [`Animated`](animated) API is designed to concisely express a wide variety of interesting animation and interaction patterns in a very performant way. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and `start`/`stop` methods to control time-based animation execution.
+
+`Animated` exports six animatable component types: `View`, `Text`, `Image`, `ScrollView`, `FlatList` and `SectionList`, but you can also create your own using `Animated.createAnimatedComponent()`.
+
+For example, a container view that fades in when it is mounted may look like this:
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer ext=js
+import {useEffect, useRef} from 'react';
+import {Animated, Text, View} from 'react-native';
+
+const FadeInView = props => {
+  const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
+
+  useEffect(() => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 10000,
+      useNativeDriver: true,
+    }).start();
+  }, [fadeAnim]);
+
+  return (
+    <Animated.View // Special animatable View
+      style={{
+        ...props.style,
+        opacity: fadeAnim, // Bind opacity to animated value
+      }}>
+      {props.children}
+    </Animated.View>
+  );
+};
+
+// You can then use your `FadeInView` in place of a `View` in your components:
+export default () => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+      <FadeInView
+        style={{
+          width: 250,
+          height: 50,
+          backgroundColor: 'powderblue',
+        }}>
+        <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>
+          Fading in
+        </Text>
+      </FadeInView>
+    </View>
+  );
+};
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer ext=tsx
+import {useEffect, useRef, type PropsWithChildren} from 'react';
+import {Animated, Text, View, type ViewStyle} from 'react-native';
+
+type FadeInViewProps = PropsWithChildren<{style: ViewStyle}>;
+
+const FadeInView: React.FC<FadeInViewProps> = props => {
+  const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
+
+  useEffect(() => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 10000,
+      useNativeDriver: true,
+    }).start();
+  }, [fadeAnim]);
+
+  return (
+    <Animated.View // Special animatable View
+      style={{
+        ...props.style,
+        opacity: fadeAnim, // Bind opacity to animated value
+      }}>
+      {props.children}
+    </Animated.View>
+  );
+};
+
+// You can then use your `FadeInView` in place of a `View` in your components:
+export default () => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+      <FadeInView
+        style={{
+          width: 250,
+          height: 50,
+          backgroundColor: 'powderblue',
+        }}>
+        <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>
+          Fading in
+        </Text>
+      </FadeInView>
+    </View>
+  );
+};
+```
+
+</TabItem>
+</Tabs>
+
+Let's break down what's happening here. In the `FadeInView` render method, a new `Animated.Value` called `fadeAnim` is initialized with `useRef`. The opacity property on the `View` is mapped to this animated value. Behind the scenes, the numeric value is extracted and used to set opacity.
+
+When the component mounts, the opacity is set to 0. Then, an easing animation is started on the `fadeAnim` animated value, which will update all of its dependent mappings (in this case, only the opacity) on each frame as the value animates to the final value of 1.
+
+This is done in an optimized way that is faster than calling `setState` and re-rendering. Because the entire configuration is declarative, we will be able to implement further optimizations that serialize the configuration and runs the animation on a high-priority thread.
+
+### Configuring animations
+
+Animations are heavily configurable. Custom and predefined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.
+
+`Animated` provides several animation types, the most commonly used one being [`Animated.timing()`](animated#timing). It supports animating a value over time using one of various predefined easing functions, or you can use your own. Easing functions are typically used in animation to convey gradual acceleration and deceleration of objects.
+
+By default, `timing` will use an easeInOut curve that conveys gradual acceleration to full speed and concludes by gradually decelerating to a stop. You can specify a different easing function by passing an `easing` parameter. Custom `duration` or even a `delay` before the animation starts is also supported.
+
+For example, if we want to create a 2-second long animation of an object that slightly backs up before moving to its final position:
+
+```tsx
+Animated.timing(this.state.xPosition, {
+  toValue: 100,
+  easing: Easing.back(),
+  duration: 2000,
+  useNativeDriver: true,
+}).start();
+```
+
+Take a look at the [Configuring animations](animated#configuring-animations) section of the `Animated` API reference to learn more about all the config parameters supported by the built-in animations.
+
+### Composing animations
+
+Animations can be combined and played in sequence or in parallel. Sequential animations can play immediately after the previous animation has finished, or they can start after a specified delay. The `Animated` API provides several methods, such as `sequence()` and `delay()`, each of which take an array of animations to execute and automatically calls `start()`/`stop()` as needed.
+
+For example, the following animation coasts to a stop, then it springs back while twirling in parallel:
+
+```tsx
+Animated.sequence([
+  // decay, then spring to start and twirl
+  Animated.decay(position, {
+    // coast to a stop
+    velocity: {x: gestureState.vx, y: gestureState.vy}, // velocity from gesture release
+    deceleration: 0.997,
+    useNativeDriver: true,
+  }),
+  Animated.parallel([
+    // after decay, in parallel:
+    Animated.spring(position, {
+      toValue: {x: 0, y: 0}, // return to start
+      useNativeDriver: true,
+    }),
+    Animated.timing(twirl, {
+      // and twirl
+      toValue: 360,
+      useNativeDriver: true,
+    }),
+  ]),
+]).start(); // start the sequence group
+```
+
+If one animation is stopped or interrupted, then all other animations in the group are also stopped. `Animated.parallel` has a `stopTogether` option that can be set to `false` to disable this.
+
+You can find a full list of composition methods in the [Composing animations](animated#composing-animations) section of the `Animated` API reference.
+
+### Combining animated values
+
+You can [combine two animated values](animated#combining-animated-values) via addition, multiplication, division, or modulo to make a new animated value.
+
+There are some cases where an animated value needs to invert another animated value for calculation. An example is inverting a scale (2x --> 0.5x):
+
+```tsx
+const a = new Animated.Value(1);
+const b = Animated.divide(1, a);
+
+Animated.spring(a, {
+  toValue: 2,
+  useNativeDriver: true,
+}).start();
+```
+
+### Interpolation
+
+Each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.
+
+A basic mapping to convert a 0-1 range to a 0-100 range would be:
+
+```tsx
+value.interpolate({
+  inputRange: [0, 1],
+  outputRange: [0, 100],
+});
+```
+
+For example, you may want to think about your `Animated.Value` as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying `style` from the example above like so:
+
+```tsx
+  style={{
+    opacity: this.state.fadeAnim, // Binds directly
+    transform: [{
+      translateY: this.state.fadeAnim.interpolate({
+        inputRange: [0, 1],
+        outputRange: [150, 0]  // 0 : 150, 0.5 : 75, 1 : 0
+      }),
+    }],
+  }}
+```
+
+[`interpolate()`](animated#interpolate) supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
+
+```tsx
+value.interpolate({
+  inputRange: [-300, -100, 0, 100, 101],
+  outputRange: [300, 0, 1, 0, 0],
+});
+```
+
+Which would map like so:
+
+```
+Input | Output
+------|-------
+  -400|    450
+  -300|    300
+  -200|    150
+  -100|      0
+   -50|    0.5
+     0|      1
+    50|    0.5
+   100|      0
+   101|      0
+   200|      0
+```
+
+`interpolate()` also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
+
+```tsx
+value.interpolate({
+  inputRange: [0, 360],
+  outputRange: ['0deg', '360deg'],
+});
+```
+
+`interpolate()` also supports arbitrary easing functions, many of which are already implemented in the [`Easing`](easing) module. `interpolate()` also has configurable behavior for extrapolating the `outputRange`. You can set the extrapolation by setting the `extrapolate`, `extrapolateLeft`, or `extrapolateRight` options. The default value is `extend` but you can use `clamp` to prevent the output value from exceeding `outputRange`.
+
+### Tracking dynamic values
+
+Animated values can also track other values by setting the `toValue` of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a `spring()` pinned on another animated value, or with `timing()` and a `duration` of 0 for rigid tracking. They can also be composed with interpolations:
+
+```tsx
+Animated.spring(follower, {toValue: leader}).start();
+Animated.timing(opacity, {
+  toValue: pan.x.interpolate({
+    inputRange: [0, 300],
+    outputRange: [1, 0],
+  }),
+  useNativeDriver: true,
+}).start();
+```
+
+The `leader` and `follower` animated values would be implemented using `Animated.ValueXY()`. `ValueXY` is a handy way to deal with 2D interactions, such as panning or dragging. It is a basic wrapper that contains two `Animated.Value` instances and some helper functions that call through to them, making `ValueXY` a drop-in replacement for `Value` in many cases. It allows us to track both x and y values in the example above.
+
+### Tracking gestures
+
+Gestures, like panning or scrolling, and other events can map directly to animated values using [`Animated.event`](animated#event). This is done with a structured map syntax so that values can be extracted from complex event objects. The first level is an array to allow mapping across multiple args, and that array contains nested objects.
+
+For example, when working with horizontal scrolling gestures, you would do the following in order to map `event.nativeEvent.contentOffset.x` to `scrollX` (an `Animated.Value`):
+
+```tsx
+ onScroll={Animated.event(
+   // scrollX = e.nativeEvent.contentOffset.x
+   [{nativeEvent: {
+        contentOffset: {
+          x: scrollX
+        }
+      }
+    }]
+ )}
+```
+
+The following example implements a horizontal scrolling carousel where the scroll position indicators are animated using the `Animated.event` used in the `ScrollView`
+
+#### ScrollView with Animated Event Example
+
+```SnackPlayer name=Animated&supportedPlatforms=ios,android
+import {
+  ScrollView,
+  Text,
+  StyleSheet,
+  View,
+  ImageBackground,
+  Animated,
+  useWindowDimensions,
+  useAnimatedValue,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const images = new Array(6).fill(
+  'https://images.unsplash.com/photo-1556740749-887f6717d7e4',
+);
+
+const App = () => {
+  const scrollX = useAnimatedValue(0);
+
+  const {width: windowWidth} = useWindowDimensions();
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.scrollContainer}>
+          <ScrollView
+            horizontal={true}
+            pagingEnabled
+            showsHorizontalScrollIndicator={false}
+            onScroll={Animated.event([
+              {
+                nativeEvent: {
+                  contentOffset: {
+                    x: scrollX,
+                  },
+                },
+              },
+            ])}
+            scrollEventThrottle={1}>
+            {images.map((image, imageIndex) => {
+              return (
+                <View
+                  style={{width: windowWidth, height: 250}}
+                  key={imageIndex}>
+                  <ImageBackground source={{uri: image}} style={styles.card}>
+                    <View style={styles.textContainer}>
+                      <Text style={styles.infoText}>
+                        {'Image - ' + imageIndex}
+                      </Text>
+                    </View>
+                  </ImageBackground>
+                </View>
+              );
+            })}
+          </ScrollView>
+          <View style={styles.indicatorContainer}>
+            {images.map((image, imageIndex) => {
+              const width = scrollX.interpolate({
+                inputRange: [
+                  windowWidth * (imageIndex - 1),
+                  windowWidth * imageIndex,
+                  windowWidth * (imageIndex + 1),
+                ],
+                outputRange: [8, 16, 8],
+                extrapolate: 'clamp',
+              });
+              return (
+                <Animated.View
+                  key={imageIndex}
+                  style={[styles.normalDot, {width}]}
+                />
+              );
+            })}
+          </View>
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  scrollContainer: {
+    height: 300,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  card: {
+    flex: 1,
+    marginVertical: 4,
+    marginHorizontal: 16,
+    borderRadius: 5,
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  textContainer: {
+    backgroundColor: 'rgba(0,0,0, 0.7)',
+    paddingHorizontal: 24,
+    paddingVertical: 8,
+    borderRadius: 5,
+  },
+  infoText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  normalDot: {
+    height: 8,
+    width: 8,
+    borderRadius: 4,
+    backgroundColor: 'silver',
+    marginHorizontal: 4,
+  },
+  indicatorContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default App;
+```
+
+When using `PanResponder`, you could use the following code to extract the x and y positions from `gestureState.dx` and `gestureState.dy`. We use a `null` in the first position of the array, as we are only interested in the second argument passed to the `PanResponder` handler, which is the `gestureState`.
+
+```tsx
+onPanResponderMove={Animated.event(
+  [null, // ignore the native event
+  // extract dx and dy from gestureState
+  // like 'pan.x = gestureState.dx, pan.y = gestureState.dy'
+  {dx: pan.x, dy: pan.y}
+])}
+```
+
+#### PanResponder with Animated Event Example
+
+```SnackPlayer name=Animated
+import {useRef} from 'react';
+import {Animated, View, StyleSheet, PanResponder, Text} from 'react-native';
+
+const App = () => {
+  const pan = useRef(new Animated.ValueXY()).current;
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
+      onPanResponderRelease: () => {
+        Animated.spring(pan, {
+          toValue: {x: 0, y: 0},
+          useNativeDriver: true,
+        }).start();
+      },
+    }),
+  ).current;
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.titleText}>Drag & Release this box!</Text>
+      <Animated.View
+        style={{
+          transform: [{translateX: pan.x}, {translateY: pan.y}],
+        }}
+        {...panResponder.panHandlers}>
+        <View style={styles.box} />
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  titleText: {
+    fontSize: 14,
+    lineHeight: 24,
+    fontWeight: 'bold',
+  },
+  box: {
+    height: 150,
+    width: 150,
+    backgroundColor: 'blue',
+    borderRadius: 5,
+  },
+});
+
+export default App;
+```
+
+### Responding to the current animation value
+
+You may notice that there is no clear way to read the current value while animating. This is because the value may only be known in the native runtime due to optimizations. If you need to run JavaScript in response to the current value, there are two approaches:
+
+- `spring.stopAnimation(callback)` will stop the animation and invoke `callback` with the final value. This is useful when making gesture transitions.
+- `spring.addListener(callback)` will invoke `callback` asynchronously while the animation is running, providing a recent value. This is useful for triggering state changes, for example snapping a bobble to a new option as the user drags it closer, because these larger state changes are less sensitive to a few frames of lag compared to continuous gestures like panning which need to run at 60 fps.
+
+`Animated` is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Check out `Animated.Value.addListener` as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.
+
+### Using the native driver
+
+The `Animated` API is designed to be serializable. By using the [native driver](/blog/2017/02/14/using-native-driver-for-animated), we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.
+
+Using the native driver for normal animations can be accomplished by setting `useNativeDriver: true` in animation config when starting it. Animations without a `useNativeDriver` property will default to false for legacy reasons, but emit a warning (and typechecking error in TypeScript).
+
+```tsx
+Animated.timing(this.state.animatedValue, {
+  toValue: 1,
+  duration: 500,
+  useNativeDriver: true, // <-- Set this to true
+}).start();
+```
+
+Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
+
+The native driver also works with `Animated.event`. This is especially useful for animations that follow the scroll position as without the native driver, the animation will always run a frame behind the gesture due to the async nature of React Native.
+
+```tsx
+<Animated.ScrollView // <-- Use the Animated ScrollView wrapper
+  onScroll={Animated.event(
+    [
+      {
+        nativeEvent: {
+          contentOffset: {y: this.state.animatedValue},
+        },
+      },
+    ],
+    {useNativeDriver: true}, // <-- Set this to true
+  )}>
+  {content}
+</Animated.ScrollView>
+```
+
+You can see the native driver in action by running the [RNTester app](https://github.com/facebook/react-native/blob/main/packages/rn-tester/), then loading the Native Animated Example. You can also take a look at the [source code](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js) to learn how these examples were produced.
+
+#### Caveats
+
+Not everything you can do with `Animated` is currently supported by the native driver. The main limitation is that you can only animate non-layout properties: things like `transform` and `opacity` will work, but Flexbox and position properties will not. When using `Animated.event`, it will only work with direct events and not bubbling events. This means it does not work with `PanResponder` but does work with things like `ScrollView#onScroll`.
+
+When an animation is running, it can prevent `VirtualizedList` components from rendering more rows. If you need to run a long or looping animation while the user is scrolling through a list, you can use `isInteraction: false` in your animation's config to prevent this issue.
+
+### Bear in mind
+
+While using transform styles such as `rotateY`, `rotateX`, and others ensure the transform style `perspective` is in place. At this time some animations may not render on Android without it. Example below.
+
+```tsx
+<Animated.View
+  style={{
+    transform: [
+      {scale: this.state.scale},
+      {rotateY: this.state.rotateY},
+      {perspective: 1000}, // without this line this Animation will not render on Android while working fine on iOS
+    ],
+  }}
+/>
+```
+
+### Additional examples
+
+The RNTester app has various examples of `Animated` in use:
+
+- [AnimatedGratuitousApp](https://github.com/facebook/react-native/tree/main/packages/rn-tester/js/examples/AnimatedGratuitousApp)
+- [NativeAnimationsExample](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js)
+
+## `LayoutAnimation` API
+
+`LayoutAnimation` allows you to globally configure `create` and `update` animations that will be used for all views in the next render/layout cycle. This is useful for doing Flexbox layout updates without bothering to measure or calculate specific properties in order to animate them directly, and is especially useful when layout changes may affect ancestors, for example a "see more" expansion that also increases the size of the parent and pushes down the row below which would otherwise require explicit coordination between the components in order to animate them all in sync.
+
+Note that although `LayoutAnimation` is very powerful and can be quite useful, it provides much less control than `Animated` and other animation libraries, so you may need to use another approach if you can't get `LayoutAnimation` to do what you want.
+
+Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`:
+
+```tsx
+UIManager.setLayoutAnimationEnabledExperimental(true);
+```
+
+```SnackPlayer name=LayoutAnimations
+import {useState} from 'react';
+import {
+  NativeModules,
+  LayoutAnimation,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  View,
+} from 'react-native';
+
+const {UIManager} = NativeModules;
+
+UIManager.setLayoutAnimationEnabledExperimental &&
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+
+export default function App() {
+  const [state, setState] = useState({
+    w: 100,
+    h: 100,
+  });
+
+  const onPress = () => {
+    // Animate the update
+    LayoutAnimation.spring();
+    setState({w: state.w + 15, h: state.h + 15});
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={[styles.box, {width: state.w, height: state.h}]} />
+      <TouchableOpacity onPress={onPress}>
+        <View style={styles.button}>
+          <Text style={styles.buttonText}>Press me!</Text>
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  box: {
+    width: 200,
+    height: 200,
+    backgroundColor: 'red',
+  },
+  button: {
+    backgroundColor: 'black',
+    paddingHorizontal: 20,
+    paddingVertical: 15,
+    marginTop: 15,
+  },
+  buttonText: {
+    color: '#fff',
+    fontWeight: 'bold',
+  },
+});
+```
+
+This example uses a preset value, you can customize the animations as you need, see [LayoutAnimation.js](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/LayoutAnimation/LayoutAnimation.js) for more information.
+
+## Additional notes
+
+### `requestAnimationFrame`
+
+`requestAnimationFrame` is a polyfill from the browser that you might be familiar with. It accepts a function as its only argument and calls that function before the next repaint. It is an essential building block for animations that underlies all of the JavaScript-based animation APIs. In general, you shouldn't need to call this yourself - the animation APIs will manage frame updates for you.
+
+### `setNativeProps`
+
+As mentioned [in the Direct Manipulation section](legacy/direct-manipulation), `setNativeProps` allows us to modify properties of native-backed components (components that are actually backed by native views, unlike composite components) directly, without having to `setState` and re-render the component hierarchy.
+
+We could use this in the Rebound example to update the scale - this might be helpful if the component that we are updating is deeply nested and hasn't been optimized with `shouldComponentUpdate`.
+
+If you find your animations with dropping frames (performing below 60 frames per second), look into using `setNativeProps` or `shouldComponentUpdate` to optimize them. Or you could run the animations on the UI thread rather than the JavaScript thread [with the useNativeDriver option](/blog/2017/02/14/using-native-driver-for-animated). You may also want to defer any computationally intensive work until after animations are complete, using the [InteractionManager](interactionmanager). You can monitor the frame rate by using the In-App Dev Menu "FPS Monitor" tool.
diff --git a/website/versioned_docs/version-0.84/appstate.md b/website/versioned_docs/version-0.84/appstate.md
index ae09e4ccb2d..53ee6224c47 100644
--- a/website/versioned_docs/version-0.84/appstate.md
+++ b/website/versioned_docs/version-0.84/appstate.md
@@ -1,118 +1,118 @@
----
-id: appstate
-title: AppState
----
-
-`AppState` can tell you if the app is in the foreground or background, and notify you when the state changes.
-
-AppState is frequently used to determine the intent and proper behavior when handling push notifications.
-
-### App States
-
-- `active` - The app is running in the foreground
-- `background` - The app is running in the background. The user is either:
-  - in another app
-  - on the home screen
-  - [Android] on another `Activity`, including temporary system activities such
-    as autofill credential pickers (even if launched by your app or the system)
-- [iOS] `inactive` - This is a state that occurs when transitioning between foreground & background, and during periods of inactivity such as entering the multitasking view, opening the Notification Center or in the event of an incoming call.
-
-For more information, see [Apple's documentation](https://developer.apple.com/documentation/uikit/app_and_scenes/managing_your_app_s_life_cycle)
-
-## Basic Usage
-
-To see the current state, you can check `AppState.currentState`, which will be kept up-to-date. However, `currentState` will be null at launch while `AppState` retrieves it over the bridge.
-
-```SnackPlayer name=AppState%20Example
-import React, {useRef, useState, useEffect} from 'react';
-import {AppState, StyleSheet, Text} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const AppStateExample = () => {
-  const appState = useRef(AppState.currentState);
-  const [appStateVisible, setAppStateVisible] = useState(appState.current);
-
-  useEffect(() => {
-    const subscription = AppState.addEventListener('change', nextAppState => {
-      if (
-        appState.current.match(/inactive|background/) &&
-        nextAppState === 'active'
-      ) {
-        console.log('App has come to the foreground!');
-      }
-
-      appState.current = nextAppState;
-      setAppStateVisible(appState.current);
-      console.log('AppState', appState.current);
-    });
-
-    return () => {
-      subscription.remove();
-    };
-  }, []);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>Current state is: {appStateVisible}</Text>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default AppStateExample;
-```
-
-This example will only ever appear to say "Current state is: active" because the app is only visible to the user when in the `active` state, and the null state will happen only momentarily. If you want to experiment with the code we recommend to use your own device instead of embedded preview.
-
----
-
-# Reference
-
-## Events
-
-### `change`
-
-This event is received when the app state has changed. The listener is called with one of [the current app state values](appstate#app-states).
-
-### `memoryWarning` <div className="label ios">iOS</div>
-
-Fires when the app receives a memory warning from the operating system.
-
-### `focus` <div className="label android">Android</div>
-
-Received when the app gains focus (the user is interacting with the app).
-
-### `blur` <div className="label android">Android</div>
-
-Received when the user is not actively interacting with the app. Useful in situations when the user pulls down the [notification drawer](https://developer.android.com/guide/topics/ui/notifiers/notifications#bar-and-drawer). `AppState` won't change but the `blur` event will get fired.
-
-## Methods
-
-### `addEventListener()`
-
-```tsx
-static addEventListener(
-  type: AppStateEvent,
-  listener: (state: AppStateStatus) => void,
-): NativeEventSubscription;
-```
-
-Sets up a function that will be called whenever the specified event type on AppState occurs. Valid values for `eventType` are
-[listed above](#events). Returns the `EventSubscription`.
-
-## Properties
-
-### `currentState`
-
-```tsx
-static currentState: AppStateStatus;
-```
+---
+id: appstate
+title: AppState
+---
+
+`AppState` can tell you if the app is in the foreground or background, and notify you when the state changes.
+
+AppState is frequently used to determine the intent and proper behavior when handling push notifications.
+
+### App States
+
+- `active` - The app is running in the foreground
+- `background` - The app is running in the background. The user is either:
+  - in another app
+  - on the home screen
+  - [Android] on another `Activity`, including temporary system activities such
+    as autofill credential pickers (even if launched by your app or the system)
+- [iOS] `inactive` - This is a state that occurs when transitioning between foreground & background, and during periods of inactivity such as entering the multitasking view, opening the Notification Center or in the event of an incoming call.
+
+For more information, see [Apple's documentation](https://developer.apple.com/documentation/uikit/app_and_scenes/managing_your_app_s_life_cycle)
+
+## Basic Usage
+
+To see the current state, you can check `AppState.currentState`, which will be kept up-to-date. However, `currentState` will be null at launch while `AppState` retrieves it over the bridge.
+
+```SnackPlayer name=AppState%20Example
+import {useRef, useState, useEffect} from 'react';
+import {AppState, StyleSheet, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const AppStateExample = () => {
+  const appState = useRef(AppState.currentState);
+  const [appStateVisible, setAppStateVisible] = useState(appState.current);
+
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', nextAppState => {
+      if (
+        appState.current.match(/inactive|background/) &&
+        nextAppState === 'active'
+      ) {
+        console.log('App has come to the foreground!');
+      }
+
+      appState.current = nextAppState;
+      setAppStateVisible(appState.current);
+      console.log('AppState', appState.current);
+    });
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>Current state is: {appStateVisible}</Text>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default AppStateExample;
+```
+
+This example will only ever appear to say "Current state is: active" because the app is only visible to the user when in the `active` state, and the null state will happen only momentarily. If you want to experiment with the code we recommend to use your own device instead of embedded preview.
+
+---
+
+# Reference
+
+## Events
+
+### `change`
+
+This event is received when the app state has changed. The listener is called with one of [the current app state values](appstate#app-states).
+
+### `memoryWarning` <div className="label ios">iOS</div>
+
+Fires when the app receives a memory warning from the operating system.
+
+### `focus` <div className="label android">Android</div>
+
+Received when the app gains focus (the user is interacting with the app).
+
+### `blur` <div className="label android">Android</div>
+
+Received when the user is not actively interacting with the app. Useful in situations when the user pulls down the [notification drawer](https://developer.android.com/guide/topics/ui/notifiers/notifications#bar-and-drawer). `AppState` won't change but the `blur` event will get fired.
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+  type: AppStateEvent,
+  listener: (state: AppStateStatus) => void,
+): NativeEventSubscription;
+```
+
+Sets up a function that will be called whenever the specified event type on AppState occurs. Valid values for `eventType` are
+[listed above](#events). Returns the `EventSubscription`.
+
+## Properties
+
+### `currentState`
+
+```tsx
+static currentState: AppStateStatus;
+```
diff --git a/website/versioned_docs/version-0.84/backhandler.md b/website/versioned_docs/version-0.84/backhandler.md
index f020f3fc7a5..c07a4c5d029 100644
--- a/website/versioned_docs/version-0.84/backhandler.md
+++ b/website/versioned_docs/version-0.84/backhandler.md
@@ -1,136 +1,136 @@
----
-id: backhandler
-title: BackHandler
----
-
-The Backhandler API detects hardware button presses for back navigation, lets you register event listeners for the system's back action, and lets you control how your application responds. It is Android-only.
-
-The event subscriptions are called in reverse order (i.e. the last registered subscription is called first).
-
-- **If one subscription returns true,** then subscriptions registered earlier will not be called.
-- **If no subscription returns true or none are registered,** it programmatically invokes the default back button functionality to exit the app.
-
-:::warning[Warning for modal users]
-If your app shows an opened `Modal`, `BackHandler` will not publish any events ([see `Modal` docs](modal#onrequestclose)).
-:::
-
-## Pattern
-
-```tsx
-const subscription = BackHandler.addEventListener(
-  'hardwareBackPress',
-  function () {
-    /**
-     * this.onMainScreen and this.goBack are just examples,
-     * you need to use your own implementation here.
-     *
-     * Typically you would use the navigator here to go to the last state.
-     */
-
-    if (!this.onMainScreen()) {
-      this.goBack();
-      /**
-       * When true is returned the event will not be bubbled up
-       * & no other back action will execute
-       */
-      return true;
-    }
-    /**
-     * Returning false will let the event to bubble up & let other event listeners
-     * or the system's default back action to be executed.
-     */
-    return false;
-  },
-);
-
-// Unsubscribe the listener on unmount
-subscription.remove();
-```
-
-## Example
-
-The following example implements a scenario where you confirm if the user wants to exit the app:
-
-```SnackPlayer name=BackHandler&supportedPlatforms=android
-import React, {useEffect} from 'react';
-import {Text, StyleSheet, BackHandler, Alert} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  useEffect(() => {
-    const backAction = () => {
-      Alert.alert('Hold on!', 'Are you sure you want to go back?', [
-        {
-          text: 'Cancel',
-          onPress: () => null,
-          style: 'cancel',
-        },
-        {text: 'YES', onPress: () => BackHandler.exitApp()},
-      ]);
-      return true;
-    };
-
-    const backHandler = BackHandler.addEventListener(
-      'hardwareBackPress',
-      backAction,
-    );
-
-    return () => backHandler.remove();
-  }, []);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.text}>Click Back button!</Text>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  text: {
-    fontSize: 18,
-    fontWeight: 'bold',
-  },
-});
-
-export default App;
-```
-
-`BackHandler.addEventListener` creates an event listener & returns a `NativeEventSubscription` object which should be cleared using `NativeEventSubscription.remove` method.
-
-## Usage with React Navigation
-
-If you are using React Navigation to navigate across different screens, you can follow their guide on [Custom Android back button behaviour](https://reactnavigation.org/docs/custom-android-back-button-handling/)
-
-## Backhandler hook
-
-[React Native Hooks](https://github.com/react-native-community/hooks#usebackhandler) has a nice `useBackHandler` hook which will simplify the process of setting up event listeners.
-
----
-
-# Reference
-
-## Methods
-
-### `addEventListener()`
-
-```tsx
-static addEventListener(
-  eventName: BackPressEventName,
-  handler: () => boolean | null | undefined,
-): NativeEventSubscription;
-```
-
----
-
-### `exitApp()`
-
-```tsx
-static exitApp();
-```
+---
+id: backhandler
+title: BackHandler
+---
+
+The Backhandler API detects hardware button presses for back navigation, lets you register event listeners for the system's back action, and lets you control how your application responds. It is Android-only.
+
+The event subscriptions are called in reverse order (i.e. the last registered subscription is called first).
+
+- **If one subscription returns true,** then subscriptions registered earlier will not be called.
+- **If no subscription returns true or none are registered,** it programmatically invokes the default back button functionality to exit the app.
+
+:::warning[Warning for modal users]
+If your app shows an opened `Modal`, `BackHandler` will not publish any events ([see `Modal` docs](modal#onrequestclose)).
+:::
+
+## Pattern
+
+```tsx
+const subscription = BackHandler.addEventListener(
+  'hardwareBackPress',
+  function () {
+    /**
+     * this.onMainScreen and this.goBack are just examples,
+     * you need to use your own implementation here.
+     *
+     * Typically you would use the navigator here to go to the last state.
+     */
+
+    if (!this.onMainScreen()) {
+      this.goBack();
+      /**
+       * When true is returned the event will not be bubbled up
+       * & no other back action will execute
+       */
+      return true;
+    }
+    /**
+     * Returning false will let the event to bubble up & let other event listeners
+     * or the system's default back action to be executed.
+     */
+    return false;
+  },
+);
+
+// Unsubscribe the listener on unmount
+subscription.remove();
+```
+
+## Example
+
+The following example implements a scenario where you confirm if the user wants to exit the app:
+
+```SnackPlayer name=BackHandler&supportedPlatforms=android
+import {useEffect} from 'react';
+import {Text, StyleSheet, BackHandler, Alert} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  useEffect(() => {
+    const backAction = () => {
+      Alert.alert('Hold on!', 'Are you sure you want to go back?', [
+        {
+          text: 'Cancel',
+          onPress: () => null,
+          style: 'cancel',
+        },
+        {text: 'YES', onPress: () => BackHandler.exitApp()},
+      ]);
+      return true;
+    };
+
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      backAction,
+    );
+
+    return () => backHandler.remove();
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.text}>Click Back button!</Text>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+});
+
+export default App;
+```
+
+`BackHandler.addEventListener` creates an event listener & returns a `NativeEventSubscription` object which should be cleared using `NativeEventSubscription.remove` method.
+
+## Usage with React Navigation
+
+If you are using React Navigation to navigate across different screens, you can follow their guide on [Custom Android back button behaviour](https://reactnavigation.org/docs/custom-android-back-button-handling/)
+
+## Backhandler hook
+
+[React Native Hooks](https://github.com/react-native-community/hooks#usebackhandler) has a nice `useBackHandler` hook which will simplify the process of setting up event listeners.
+
+---
+
+# Reference
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+  eventName: BackPressEventName,
+  handler: () => boolean | null | undefined,
+): NativeEventSubscription;
+```
+
+---
+
+### `exitApp()`
+
+```tsx
+static exitApp();
+```
diff --git a/website/versioned_docs/version-0.84/button.md b/website/versioned_docs/version-0.84/button.md
index 9fc529fc863..23501057f52 100644
--- a/website/versioned_docs/version-0.84/button.md
+++ b/website/versioned_docs/version-0.84/button.md
@@ -19,7 +19,6 @@ If this button doesn't look right for your app, you can build your own button us
 ## Example
 
 ```SnackPlayer name=Button%20Example&ext=js
-import React from 'react';
 import {StyleSheet, Button, View, Text, Alert, Platform} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.84/communication-android.md b/website/versioned_docs/version-0.84/communication-android.md
index f78dc84cf65..35aab358818 100644
--- a/website/versioned_docs/version-0.84/communication-android.md
+++ b/website/versioned_docs/version-0.84/communication-android.md
@@ -67,7 +67,6 @@ class MainActivity : ReactActivity() {
 </Tabs>
 
 ```tsx
-import React from 'react';
 import {View, Image} from 'react-native';
 
 export default class ImageBrowserApp extends React.Component {
diff --git a/website/versioned_docs/version-0.84/communication-ios.md b/website/versioned_docs/version-0.84/communication-ios.md
index f82cae7e620..89a64ff9b4c 100644
--- a/website/versioned_docs/version-0.84/communication-ios.md
+++ b/website/versioned_docs/version-0.84/communication-ios.md
@@ -33,7 +33,6 @@ RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
 ```
 
 ```tsx
-import React from 'react';
 import {View, Image} from 'react-native';
 
 export default class ImageBrowserApp extends React.Component {
diff --git a/website/versioned_docs/version-0.84/dimensions.md b/website/versioned_docs/version-0.84/dimensions.md
index 9ebb8561739..eb3673eca5b 100644
--- a/website/versioned_docs/version-0.84/dimensions.md
+++ b/website/versioned_docs/version-0.84/dimensions.md
@@ -1,154 +1,154 @@
----
-id: dimensions
-title: Dimensions
----
-
-:::info
-[`useWindowDimensions`](usewindowdimensions) is the preferred API for React components. Unlike `Dimensions`, it updates as the window's dimensions update. This works nicely with the React paradigm.
-:::
-
-```tsx
-import {Dimensions} from 'react-native';
-```
-
-You can get the application window's width and height using the following code:
-
-```tsx
-const windowWidth = Dimensions.get('window').width;
-const windowHeight = Dimensions.get('window').height;
-```
-
-:::note
-Although dimensions are available immediately, they may change (e.g due to device rotation, foldable devices etc) so any rendering logic or styles that depend on these constants should try to call this function on every render, rather than caching the value (for example, using inline styles rather than setting a value in a `StyleSheet`).
-:::
-
-If you are targeting foldable devices or devices which can change the screen size or app window size, you can use the event listener available in the Dimensions module as shown in the below example.
-
-## Example
-
-```SnackPlayer name=Dimensions%20Example
-import React, {useState, useEffect} from 'react';
-import {StyleSheet, Text, Dimensions} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const windowDimensions = Dimensions.get('window');
-const screenDimensions = Dimensions.get('screen');
-
-const App = () => {
-  const [dimensions, setDimensions] = useState({
-    window: windowDimensions,
-    screen: screenDimensions,
-  });
-
-  useEffect(() => {
-    const subscription = Dimensions.addEventListener(
-      'change',
-      ({window, screen}) => {
-        setDimensions({window, screen});
-      },
-    );
-    return () => subscription?.remove();
-  });
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.header}>Window Dimensions</Text>
-        {Object.entries(dimensions.window).map(([key, value]) => (
-          <Text>
-            {key} - {value}
-          </Text>
-        ))}
-        <Text style={styles.header}>Screen Dimensions</Text>
-        {Object.entries(dimensions.screen).map(([key, value]) => (
-          <Text>
-            {key} - {value}
-          </Text>
-        ))}
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  header: {
-    fontSize: 16,
-    marginVertical: 10,
-  },
-});
-
-export default App;
-```
-
-# Reference
-
-## Methods
-
-### `addEventListener()`
-
-```tsx
-static addEventListener(
-  type: 'change',
-  handler: ({
-    window,
-    screen,
-  }: DimensionsValue) => void,
-): EmitterSubscription;
-```
-
-Add an event handler. Supported events:
-
-- `change`: Fires when a property within the `Dimensions` object changes. The argument to the event handler is a [`DimensionsValue`](#dimensionsvalue) type object.
-
----
-
-### `get()`
-
-```tsx
-static get(dim: 'window' | 'screen'): ScaledSize;
-```
-
-Initial dimensions are set before `runApplication` is called so they should be available before any other require's are run, but may be updated later.
-
-Example: `const {height, width} = Dimensions.get('window');`
-
-**Parameters:**
-
-| Name                                                               | Type   | Description                                                                       |
-| ------------------------------------------------------------------ | ------ | --------------------------------------------------------------------------------- |
-| dim <div className="label basic required two-lines">Required</div> | string | Name of dimension as defined when calling `set`. Returns value for the dimension. |
-
-:::note
-For Android the `window` dimension will be reduced by the size of status bar (if not translucent) and bottom navigation bar.
-:::
-
-## Type Definitions
-
-### DimensionsValue
-
-**Properties:**
-
-| Name   | Type                                | Description                             |
-| ------ | ----------------------------------- | --------------------------------------- |
-| window | [ScaledSize](dimensions#scaledsize) | Size of the visible Application window. |
-| screen | [ScaledSize](dimensions#scaledsize) | Size of the device's screen.            |
-
-### ScaledSize
-
-| Type   |
-| ------ |
-| object |
-
-**Properties:**
-
-| Name      | Type   |
-| --------- | ------ |
-| width     | number |
-| height    | number |
-| scale     | number |
-| fontScale | number |
+---
+id: dimensions
+title: Dimensions
+---
+
+:::info
+[`useWindowDimensions`](usewindowdimensions) is the preferred API for React components. Unlike `Dimensions`, it updates as the window's dimensions update. This works nicely with the React paradigm.
+:::
+
+```tsx
+import {Dimensions} from 'react-native';
+```
+
+You can get the application window's width and height using the following code:
+
+```tsx
+const windowWidth = Dimensions.get('window').width;
+const windowHeight = Dimensions.get('window').height;
+```
+
+:::note
+Although dimensions are available immediately, they may change (e.g due to device rotation, foldable devices etc) so any rendering logic or styles that depend on these constants should try to call this function on every render, rather than caching the value (for example, using inline styles rather than setting a value in a `StyleSheet`).
+:::
+
+If you are targeting foldable devices or devices which can change the screen size or app window size, you can use the event listener available in the Dimensions module as shown in the below example.
+
+## Example
+
+```SnackPlayer name=Dimensions%20Example
+import {useState, useEffect} from 'react';
+import {StyleSheet, Text, Dimensions} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const windowDimensions = Dimensions.get('window');
+const screenDimensions = Dimensions.get('screen');
+
+const App = () => {
+  const [dimensions, setDimensions] = useState({
+    window: windowDimensions,
+    screen: screenDimensions,
+  });
+
+  useEffect(() => {
+    const subscription = Dimensions.addEventListener(
+      'change',
+      ({window, screen}) => {
+        setDimensions({window, screen});
+      },
+    );
+    return () => subscription?.remove();
+  });
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.header}>Window Dimensions</Text>
+        {Object.entries(dimensions.window).map(([key, value]) => (
+          <Text>
+            {key} - {value}
+          </Text>
+        ))}
+        <Text style={styles.header}>Screen Dimensions</Text>
+        {Object.entries(dimensions.screen).map(([key, value]) => (
+          <Text>
+            {key} - {value}
+          </Text>
+        ))}
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  header: {
+    fontSize: 16,
+    marginVertical: 10,
+  },
+});
+
+export default App;
+```
+
+# Reference
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+  type: 'change',
+  handler: ({
+    window,
+    screen,
+  }: DimensionsValue) => void,
+): EmitterSubscription;
+```
+
+Add an event handler. Supported events:
+
+- `change`: Fires when a property within the `Dimensions` object changes. The argument to the event handler is a [`DimensionsValue`](#dimensionsvalue) type object.
+
+---
+
+### `get()`
+
+```tsx
+static get(dim: 'window' | 'screen'): ScaledSize;
+```
+
+Initial dimensions are set before `runApplication` is called so they should be available before any other require's are run, but may be updated later.
+
+Example: `const {height, width} = Dimensions.get('window');`
+
+**Parameters:**
+
+| Name                                                               | Type   | Description                                                                       |
+| ------------------------------------------------------------------ | ------ | --------------------------------------------------------------------------------- |
+| dim <div className="label basic required two-lines">Required</div> | string | Name of dimension as defined when calling `set`. Returns value for the dimension. |
+
+:::note
+For Android the `window` dimension will be reduced by the size of status bar (if not translucent) and bottom navigation bar.
+:::
+
+## Type Definitions
+
+### DimensionsValue
+
+**Properties:**
+
+| Name   | Type                                | Description                             |
+| ------ | ----------------------------------- | --------------------------------------- |
+| window | [ScaledSize](dimensions#scaledsize) | Size of the visible Application window. |
+| screen | [ScaledSize](dimensions#scaledsize) | Size of the device's screen.            |
+
+### ScaledSize
+
+| Type   |
+| ------ |
+| object |
+
+**Properties:**
+
+| Name      | Type   |
+| --------- | ------ |
+| width     | number |
+| height    | number |
+| scale     | number |
+| fontScale | number |
diff --git a/website/versioned_docs/version-0.84/document-nodes.md b/website/versioned_docs/version-0.84/document-nodes.md
index 978ef87a1f8..6c6ab4a7452 100644
--- a/website/versioned_docs/version-0.84/document-nodes.md
+++ b/website/versioned_docs/version-0.84/document-nodes.md
@@ -1,75 +1,75 @@
----
-id: document-nodes
-title: Document nodes
----
-
-Document nodes represent a complete native view tree. Apps using native navigation would provide a separate document node for each screen. Apps not using native navigation would generally provide a single document for the whole app (similar to single-page apps on Web).
-
-```SnackPlayer ext=js&name=Document%20instance%20example
-import * as React from 'react';
-import {Text, TextInput, View} from 'react-native';
-
-function MyComponent(props) {
-  return (
-    <View ref={props.ref}>
-      <Text>Start typing below</Text>
-      <TextInput id="main-text-input" />
-    </View>
-  )
-}
-
-export default function AccessingDocument() {
-  const ref = React.useRef(null);
-
-  React.useEffect(() => {
-    // Get the main text input in the screen and focus it after initial load.
-    const element = ref.current;
-    const doc = element.ownerDocument;
-    const textInput = doc.getElementById('main-text-input');
-    textInput?.focus();
-  }, []);
-
-  return (
-    <MyComponent ref={ref} />
-  );
-}
-```
-
----
-
-## Reference
-
-### Web-compatible API
-
-From [`Document`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement):
-
-- Properties
-  - [`childElementCount`](https://developer.mozilla.org/en-US/docs/Web/API/Document/childElementCount)
-  - [`children`](https://developer.mozilla.org/en-US/docs/Web/API/Document/children)
-  - [`documentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/documentElement)
-  - [`firstElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Document/firstElementChild)
-  - [`lastElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Document/lastElementChild)
-- Methods
-  - [`getElementById()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)
-
-From [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/Node):
-
-- Properties
-  - [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)
-  - [`firstChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild)
-  - [`isConnected`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected)
-  - [`lastChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild)
-  - [`nextSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling)
-  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
-  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
-  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
-  - [`ownerDocument`](https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument)
-  - [`parentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)
-  - [`parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)
-  - [`previousSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling)
-  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
-- Methods
-  - [`compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
-  - [`contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains)
-  - [`getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)
-  - [`hasChildNodes()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes)
+---
+id: document-nodes
+title: Document nodes
+---
+
+Document nodes represent a complete native view tree. Apps using native navigation would provide a separate document node for each screen. Apps not using native navigation would generally provide a single document for the whole app (similar to single-page apps on Web).
+
+```SnackPlayer ext=js&name=Document%20instance%20example
+import {useEffect, useRef} from 'react';
+import {Text, TextInput, View} from 'react-native';
+
+function MyComponent(props) {
+  return (
+    <View ref={props.ref}>
+      <Text>Start typing below</Text>
+      <TextInput id="main-text-input" />
+    </View>
+  )
+}
+
+export default function AccessingDocument() {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    // Get the main text input in the screen and focus it after initial load.
+    const element = ref.current;
+    const doc = element.ownerDocument;
+    const textInput = doc.getElementById('main-text-input');
+    textInput?.focus();
+  }, []);
+
+  return (
+    <MyComponent ref={ref} />
+  );
+}
+```
+
+---
+
+## Reference
+
+### Web-compatible API
+
+From [`Document`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement):
+
+- Properties
+  - [`childElementCount`](https://developer.mozilla.org/en-US/docs/Web/API/Document/childElementCount)
+  - [`children`](https://developer.mozilla.org/en-US/docs/Web/API/Document/children)
+  - [`documentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/documentElement)
+  - [`firstElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Document/firstElementChild)
+  - [`lastElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Document/lastElementChild)
+- Methods
+  - [`getElementById()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)
+
+From [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/Node):
+
+- Properties
+  - [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)
+  - [`firstChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild)
+  - [`isConnected`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected)
+  - [`lastChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild)
+  - [`nextSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling)
+  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
+  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
+  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
+  - [`ownerDocument`](https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument)
+  - [`parentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)
+  - [`parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)
+  - [`previousSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling)
+  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
+- Methods
+  - [`compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
+  - [`contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains)
+  - [`getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)
+  - [`hasChildNodes()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes)
diff --git a/website/versioned_docs/version-0.84/drawerlayoutandroid.md b/website/versioned_docs/version-0.84/drawerlayoutandroid.md
index 3714318df5c..76b4c507c6a 100644
--- a/website/versioned_docs/version-0.84/drawerlayoutandroid.md
+++ b/website/versioned_docs/version-0.84/drawerlayoutandroid.md
@@ -1,323 +1,323 @@
----
-id: drawerlayoutandroid
-title: DrawerLayoutAndroid
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-React component that wraps the platform `DrawerLayout` (Android only). The Drawer (typically used for navigation) is rendered with `renderNavigationView` and direct children are the main view (where your content goes). The navigation view is initially not visible on the screen, but can be pulled in from the side of the window specified by the `drawerPosition` prop and its width can be set by the `drawerWidth` prop.
-
-## Example
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android&ext=js
-import React, {useRef, useState} from 'react';
-import {Button, DrawerLayoutAndroid, Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const drawer = useRef(null);
-  const [drawerPosition, setDrawerPosition] = useState('left');
-  const changeDrawerPosition = () => {
-    if (drawerPosition === 'left') {
-      setDrawerPosition('right');
-    } else {
-      setDrawerPosition('left');
-    }
-  };
-
-  const navigationView = () => (
-    <SafeAreaView style={[styles.container, styles.navigationContainer]}>
-      <Text style={styles.paragraph}>I'm in the Drawer!</Text>
-      <Button
-        title="Close drawer"
-        onPress={() => drawer.current.closeDrawer()}
-      />
-    </SafeAreaView>
-  );
-
-  return (
-    <SafeAreaProvider>
-      <DrawerLayoutAndroid
-        ref={drawer}
-        drawerWidth={300}
-        drawerPosition={drawerPosition}
-        renderNavigationView={navigationView}>
-        <SafeAreaView style={styles.container}>
-          <Text style={styles.paragraph}>Drawer on the {drawerPosition}!</Text>
-          <Button
-            title="Change Drawer Position"
-            onPress={() => changeDrawerPosition()}
-          />
-          <Text style={styles.paragraph}>
-            Swipe from the side or press button below to see it!
-          </Text>
-          <Button
-            title="Open drawer"
-            onPress={() => drawer.current.openDrawer()}
-          />
-        </SafeAreaView>
-      </DrawerLayoutAndroid>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingHorizontal: 16,
-  },
-  navigationContainer: {
-    backgroundColor: '#ecf0f1',
-  },
-  paragraph: {
-    padding: 16,
-    fontSize: 15,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android&ext=tsx
-import React, {useRef, useState} from 'react';
-import {
-  Button,
-  DrawerLayoutAndroid,
-  Text,
-  StyleSheet,
-  View,
-} from 'react-native';
-
-const App = () => {
-  const drawer = useRef<DrawerLayoutAndroid>(null);
-  const [drawerPosition, setDrawerPosition] = useState<'left' | 'right'>(
-    'left',
-  );
-  const changeDrawerPosition = () => {
-    if (drawerPosition === 'left') {
-      setDrawerPosition('right');
-    } else {
-      setDrawerPosition('left');
-    }
-  };
-
-  const navigationView = () => (
-    <View style={[styles.container, styles.navigationContainer]}>
-      <Text style={styles.paragraph}>I'm in the Drawer!</Text>
-      <Button
-        title="Close drawer"
-        onPress={() => drawer.current?.closeDrawer()}
-      />
-    </View>
-  );
-
-  return (
-    <DrawerLayoutAndroid
-      ref={drawer}
-      drawerWidth={300}
-      drawerPosition={drawerPosition}
-      renderNavigationView={navigationView}>
-      <View style={styles.container}>
-        <Text style={styles.paragraph}>Drawer on the {drawerPosition}!</Text>
-        <Button
-          title="Change Drawer Position"
-          onPress={() => changeDrawerPosition()}
-        />
-        <Text style={styles.paragraph}>
-          Swipe from the side or press button below to see it!
-        </Text>
-        <Button
-          title="Open drawer"
-          onPress={() => drawer.current?.openDrawer()}
-        />
-      </View>
-    </DrawerLayoutAndroid>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 16,
-  },
-  navigationContainer: {
-    backgroundColor: '#ecf0f1',
-  },
-  paragraph: {
-    padding: 16,
-    fontSize: 15,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
----
-
-# Reference
-
-## Props
-
-### [View Props](view.md#props)
-
-Inherits [View Props](view.md#props).
-
----
-
-### `drawerBackgroundColor`
-
-Specifies the background color of the drawer. The default value is `white`. If you want to set the opacity of the drawer, use rgba. Example:
-
-```tsx
-return (
-  <DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)" />
-);
-```
-
-| Type               | Required |
-| ------------------ | -------- |
-| [color](colors.md) | No       |
-
----
-
-### `drawerLockMode`
-
-Specifies the lock mode of the drawer. The drawer can be locked in 3 states:
-
-- unlocked (default), meaning that the drawer will respond (open/close) to touch gestures.
-- locked-closed, meaning that the drawer will stay closed and not respond to gestures.
-- locked-open, meaning that the drawer will stay opened and not respond to gestures. The drawer may still be opened and closed programmatically (`openDrawer`/`closeDrawer`).
-
-| Type                                             | Required |
-| ------------------------------------------------ | -------- |
-| enum('unlocked', 'locked-closed', 'locked-open') | No       |
-
----
-
-### `drawerPosition`
-
-Specifies the side of the screen from which the drawer will slide in. By default it is set to `left`.
-
-| Type                  | Required |
-| --------------------- | -------- |
-| enum('left', 'right') | No       |
-
----
-
-### `drawerWidth`
-
-Specifies the width of the drawer, more precisely the width of the view that be pulled in from the edge of the window.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `keyboardDismissMode`
-
-Determines whether the keyboard gets dismissed in response to a drag.
-
-- 'none' (the default), drags do not dismiss the keyboard.
-- 'on-drag', the keyboard is dismissed when a drag begins.
-
-| Type                    | Required |
-| ----------------------- | -------- |
-| enum('none', 'on-drag') | No       |
-
----
-
-### `onDrawerClose`
-
-Function called whenever the navigation view has been closed.
-
-| Type     | Required |
-| -------- | -------- |
-| function | No       |
-
----
-
-### `onDrawerOpen`
-
-Function called whenever the navigation view has been opened.
-
-| Type     | Required |
-| -------- | -------- |
-| function | No       |
-
----
-
-### `onDrawerSlide`
-
-Function called whenever there is an interaction with the navigation view.
-
-| Type     | Required |
-| -------- | -------- |
-| function | No       |
-
----
-
-### `onDrawerStateChanged`
-
-Function called when the drawer state has changed. The drawer can be in 3 states:
-
-- idle, meaning there is no interaction with the navigation view happening at the time
-- dragging, meaning there is currently an interaction with the navigation view
-- settling, meaning that there was an interaction with the navigation view, and the navigation view is now finishing its closing or opening animation
-
-| Type     | Required |
-| -------- | -------- |
-| function | No       |
-
----
-
-### `renderNavigationView`
-
-The navigation view that will be rendered to the side of the screen and can be pulled in.
-
-| Type     | Required |
-| -------- | -------- |
-| function | Yes      |
-
----
-
-### `statusBarBackgroundColor`
-
-Make the drawer take the entire screen and draw the background of the status bar to allow it to open over the status bar. It will only have an effect on API 21+.
-
-| Type               | Required |
-| ------------------ | -------- |
-| [color](colors.md) | No       |
-
-## Methods
-
-### `closeDrawer()`
-
-```tsx
-closeDrawer();
-```
-
-Closes the drawer.
-
----
-
-### `openDrawer()`
-
-```tsx
-openDrawer();
-```
-
-Opens the drawer.
+---
+id: drawerlayoutandroid
+title: DrawerLayoutAndroid
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+React component that wraps the platform `DrawerLayout` (Android only). The Drawer (typically used for navigation) is rendered with `renderNavigationView` and direct children are the main view (where your content goes). The navigation view is initially not visible on the screen, but can be pulled in from the side of the window specified by the `drawerPosition` prop and its width can be set by the `drawerWidth` prop.
+
+## Example
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android&ext=js
+import {useRef, useState} from 'react';
+import {Button, DrawerLayoutAndroid, Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const drawer = useRef(null);
+  const [drawerPosition, setDrawerPosition] = useState('left');
+  const changeDrawerPosition = () => {
+    if (drawerPosition === 'left') {
+      setDrawerPosition('right');
+    } else {
+      setDrawerPosition('left');
+    }
+  };
+
+  const navigationView = () => (
+    <SafeAreaView style={[styles.container, styles.navigationContainer]}>
+      <Text style={styles.paragraph}>I'm in the Drawer!</Text>
+      <Button
+        title="Close drawer"
+        onPress={() => drawer.current.closeDrawer()}
+      />
+    </SafeAreaView>
+  );
+
+  return (
+    <SafeAreaProvider>
+      <DrawerLayoutAndroid
+        ref={drawer}
+        drawerWidth={300}
+        drawerPosition={drawerPosition}
+        renderNavigationView={navigationView}>
+        <SafeAreaView style={styles.container}>
+          <Text style={styles.paragraph}>Drawer on the {drawerPosition}!</Text>
+          <Button
+            title="Change Drawer Position"
+            onPress={() => changeDrawerPosition()}
+          />
+          <Text style={styles.paragraph}>
+            Swipe from the side or press button below to see it!
+          </Text>
+          <Button
+            title="Open drawer"
+            onPress={() => drawer.current.openDrawer()}
+          />
+        </SafeAreaView>
+      </DrawerLayoutAndroid>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 16,
+  },
+  navigationContainer: {
+    backgroundColor: '#ecf0f1',
+  },
+  paragraph: {
+    padding: 16,
+    fontSize: 15,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android&ext=tsx
+import {useRef, useState} from 'react';
+import {
+  Button,
+  DrawerLayoutAndroid,
+  Text,
+  StyleSheet,
+  View,
+} from 'react-native';
+
+const App = () => {
+  const drawer = useRef<DrawerLayoutAndroid>(null);
+  const [drawerPosition, setDrawerPosition] = useState<'left' | 'right'>(
+    'left',
+  );
+  const changeDrawerPosition = () => {
+    if (drawerPosition === 'left') {
+      setDrawerPosition('right');
+    } else {
+      setDrawerPosition('left');
+    }
+  };
+
+  const navigationView = () => (
+    <View style={[styles.container, styles.navigationContainer]}>
+      <Text style={styles.paragraph}>I'm in the Drawer!</Text>
+      <Button
+        title="Close drawer"
+        onPress={() => drawer.current?.closeDrawer()}
+      />
+    </View>
+  );
+
+  return (
+    <DrawerLayoutAndroid
+      ref={drawer}
+      drawerWidth={300}
+      drawerPosition={drawerPosition}
+      renderNavigationView={navigationView}>
+      <View style={styles.container}>
+        <Text style={styles.paragraph}>Drawer on the {drawerPosition}!</Text>
+        <Button
+          title="Change Drawer Position"
+          onPress={() => changeDrawerPosition()}
+        />
+        <Text style={styles.paragraph}>
+          Swipe from the side or press button below to see it!
+        </Text>
+        <Button
+          title="Open drawer"
+          onPress={() => drawer.current?.openDrawer()}
+        />
+      </View>
+    </DrawerLayoutAndroid>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 16,
+  },
+  navigationContainer: {
+    backgroundColor: '#ecf0f1',
+  },
+  paragraph: {
+    padding: 16,
+    fontSize: 15,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+---
+
+# Reference
+
+## Props
+
+### [View Props](view.md#props)
+
+Inherits [View Props](view.md#props).
+
+---
+
+### `drawerBackgroundColor`
+
+Specifies the background color of the drawer. The default value is `white`. If you want to set the opacity of the drawer, use rgba. Example:
+
+```tsx
+return (
+  <DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)" />
+);
+```
+
+| Type               | Required |
+| ------------------ | -------- |
+| [color](colors.md) | No       |
+
+---
+
+### `drawerLockMode`
+
+Specifies the lock mode of the drawer. The drawer can be locked in 3 states:
+
+- unlocked (default), meaning that the drawer will respond (open/close) to touch gestures.
+- locked-closed, meaning that the drawer will stay closed and not respond to gestures.
+- locked-open, meaning that the drawer will stay opened and not respond to gestures. The drawer may still be opened and closed programmatically (`openDrawer`/`closeDrawer`).
+
+| Type                                             | Required |
+| ------------------------------------------------ | -------- |
+| enum('unlocked', 'locked-closed', 'locked-open') | No       |
+
+---
+
+### `drawerPosition`
+
+Specifies the side of the screen from which the drawer will slide in. By default it is set to `left`.
+
+| Type                  | Required |
+| --------------------- | -------- |
+| enum('left', 'right') | No       |
+
+---
+
+### `drawerWidth`
+
+Specifies the width of the drawer, more precisely the width of the view that be pulled in from the edge of the window.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `keyboardDismissMode`
+
+Determines whether the keyboard gets dismissed in response to a drag.
+
+- 'none' (the default), drags do not dismiss the keyboard.
+- 'on-drag', the keyboard is dismissed when a drag begins.
+
+| Type                    | Required |
+| ----------------------- | -------- |
+| enum('none', 'on-drag') | No       |
+
+---
+
+### `onDrawerClose`
+
+Function called whenever the navigation view has been closed.
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `onDrawerOpen`
+
+Function called whenever the navigation view has been opened.
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `onDrawerSlide`
+
+Function called whenever there is an interaction with the navigation view.
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `onDrawerStateChanged`
+
+Function called when the drawer state has changed. The drawer can be in 3 states:
+
+- idle, meaning there is no interaction with the navigation view happening at the time
+- dragging, meaning there is currently an interaction with the navigation view
+- settling, meaning that there was an interaction with the navigation view, and the navigation view is now finishing its closing or opening animation
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `renderNavigationView`
+
+The navigation view that will be rendered to the side of the screen and can be pulled in.
+
+| Type     | Required |
+| -------- | -------- |
+| function | Yes      |
+
+---
+
+### `statusBarBackgroundColor`
+
+Make the drawer take the entire screen and draw the background of the status bar to allow it to open over the status bar. It will only have an effect on API 21+.
+
+| Type               | Required |
+| ------------------ | -------- |
+| [color](colors.md) | No       |
+
+## Methods
+
+### `closeDrawer()`
+
+```tsx
+closeDrawer();
+```
+
+Closes the drawer.
+
+---
+
+### `openDrawer()`
+
+```tsx
+openDrawer();
+```
+
+Opens the drawer.
diff --git a/website/versioned_docs/version-0.84/easing.md b/website/versioned_docs/version-0.84/easing.md
index bb31dd0e4fa..097da0dfc8a 100644
--- a/website/versioned_docs/version-0.84/easing.md
+++ b/website/versioned_docs/version-0.84/easing.md
@@ -1,568 +1,568 @@
----
-id: easing
-title: Easing
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-The `Easing` module implements common easing functions. This module is used by [`Animated.timing()`](animated.md#timing) to convey physically believable motion in animations.
-
-You can find a visualization of some common easing functions at https://easings.net/
-
-### Predefined animations
-
-The `Easing` module provides several predefined animations through the following methods:
-
-- [`back`](easing.md#back) provides a basic animation where the object goes slightly back before moving forward
-- [`bounce`](easing.md#bounce) provides a bouncing animation
-- [`ease`](easing.md#ease) provides a basic inertial animation
-- [`elastic`](easing.md#elastic) provides a basic spring interaction
-
-### Standard functions
-
-Three standard easing functions are provided:
-
-- [`linear`](easing.md#linear)
-- [`quad`](easing.md#quad)
-- [`cubic`](easing.md#cubic)
-
-The [`poly`](easing.md#poly) function can be used to implement quartic, quintic, and other higher power functions.
-
-### Additional functions
-
-Additional mathematical functions are provided by the following methods:
-
-- [`bezier`](easing.md#bezier) provides a cubic bezier curve
-- [`circle`](easing.md#circle) provides a circular function
-- [`sin`](easing.md#sin) provides a sinusoidal function
-- [`exp`](easing.md#exp) provides an exponential function
-
-The following helpers are used to modify other easing functions.
-
-- [`in`](easing.md#in) runs an easing function forwards
-- [`inOut`](easing.md#inout) makes any easing function symmetrical
-- [`out`](easing.md#out) runs an easing function backwards
-
-## Example
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Easing%20Demo&ext=js
-import React, {useRef} from 'react';
-import {
-  Animated,
-  Easing,
-  SectionList,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const opacity = useRef(new Animated.Value(0)).current;
-
-  const animate = easing => {
-    opacity.setValue(0);
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration: 1200,
-      easing,
-      useNativeDriver: false,
-    }).start();
-  };
-
-  const size = opacity.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 80],
-  });
-
-  const animatedStyles = [
-    styles.box,
-    {
-      opacity,
-      width: size,
-      height: size,
-    },
-  ];
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container} edges={['right', 'top', 'left']}>
-        <StatusBar hidden={true} />
-        <Text style={styles.title}>
-          Press rows below to preview the Easing!
-        </Text>
-        <View style={styles.boxContainer}>
-          <Animated.View style={animatedStyles} />
-        </View>
-        <SectionList
-          style={styles.list}
-          sections={SECTIONS}
-          keyExtractor={item => item.title}
-          renderItem={({item}) => (
-            <TouchableOpacity
-              onPress={() => animate(item.easing)}
-              style={styles.listRow}>
-              <Text>{item.title}</Text>
-            </TouchableOpacity>
-          )}
-          renderSectionHeader={({section: {title}}) => (
-            <Text style={styles.listHeader}>{title}</Text>
-          )}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const SECTIONS = [
-  {
-    title: 'Predefined animations',
-    data: [
-      {title: 'Bounce', easing: Easing.bounce},
-      {title: 'Ease', easing: Easing.ease},
-      {title: 'Elastic', easing: Easing.elastic(4)},
-    ],
-  },
-  {
-    title: 'Standard functions',
-    data: [
-      {title: 'Linear', easing: Easing.linear},
-      {title: 'Quad', easing: Easing.quad},
-      {title: 'Cubic', easing: Easing.cubic},
-    ],
-  },
-  {
-    title: 'Additional functions',
-    data: [
-      {
-        title: 'Bezier',
-        easing: Easing.bezier(0, 2, 1, -1),
-      },
-      {title: 'Circle', easing: Easing.circle},
-      {title: 'Sin', easing: Easing.sin},
-      {title: 'Exp', easing: Easing.exp},
-    ],
-  },
-  {
-    title: 'Combinations',
-    data: [
-      {
-        title: 'In + Bounce',
-        easing: Easing.in(Easing.bounce),
-      },
-      {
-        title: 'Out + Exp',
-        easing: Easing.out(Easing.exp),
-      },
-      {
-        title: 'InOut + Elastic',
-        easing: Easing.inOut(Easing.elastic(1)),
-      },
-    ],
-  },
-];
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#20232a',
-  },
-  title: {
-    marginTop: 10,
-    textAlign: 'center',
-    color: '#61dafb',
-  },
-  boxContainer: {
-    height: 160,
-    alignItems: 'center',
-  },
-  box: {
-    marginTop: 32,
-    borderRadius: 4,
-    backgroundColor: '#61dafb',
-  },
-  list: {
-    backgroundColor: '#fff',
-  },
-  listHeader: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    backgroundColor: '#f4f4f4',
-    color: '#999',
-    fontSize: 12,
-    textTransform: 'uppercase',
-  },
-  listRow: {
-    padding: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Easing%20Demo&ext=tsx
-import React, {useRef} from 'react';
-import {
-  Animated,
-  Easing,
-  SectionList,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-  type EasingFunction,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const opacity = useRef(new Animated.Value(0)).current;
-
-  const animate = (easing: EasingFunction) => {
-    opacity.setValue(0);
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration: 1200,
-      easing,
-      useNativeDriver: false,
-    }).start();
-  };
-
-  const size = opacity.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 80],
-  });
-
-  const animatedStyles = [
-    styles.box,
-    {
-      opacity,
-      width: size,
-      height: size,
-    },
-  ];
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container} edges={['right', 'top', 'left']}>
-        <StatusBar hidden={true} />
-        <Text style={styles.title}>
-          Press rows below to preview the Easing!
-        </Text>
-        <View style={styles.boxContainer}>
-          <Animated.View style={animatedStyles} />
-        </View>
-        <SectionList
-          style={styles.list}
-          sections={SECTIONS}
-          keyExtractor={item => item.title}
-          renderItem={({item}) => (
-            <TouchableOpacity
-              onPress={() => animate(item.easing)}
-              style={styles.listRow}>
-              <Text>{item.title}</Text>
-            </TouchableOpacity>
-          )}
-          renderSectionHeader={({section: {title}}) => (
-            <Text style={styles.listHeader}>{title}</Text>
-          )}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const SECTIONS = [
-  {
-    title: 'Predefined animations',
-    data: [
-      {title: 'Bounce', easing: Easing.bounce},
-      {title: 'Ease', easing: Easing.ease},
-      {title: 'Elastic', easing: Easing.elastic(4)},
-    ],
-  },
-  {
-    title: 'Standard functions',
-    data: [
-      {title: 'Linear', easing: Easing.linear},
-      {title: 'Quad', easing: Easing.quad},
-      {title: 'Cubic', easing: Easing.cubic},
-    ],
-  },
-  {
-    title: 'Additional functions',
-    data: [
-      {
-        title: 'Bezier',
-        easing: Easing.bezier(0, 2, 1, -1),
-      },
-      {title: 'Circle', easing: Easing.circle},
-      {title: 'Sin', easing: Easing.sin},
-      {title: 'Exp', easing: Easing.exp},
-    ],
-  },
-  {
-    title: 'Combinations',
-    data: [
-      {
-        title: 'In + Bounce',
-        easing: Easing.in(Easing.bounce),
-      },
-      {
-        title: 'Out + Exp',
-        easing: Easing.out(Easing.exp),
-      },
-      {
-        title: 'InOut + Elastic',
-        easing: Easing.inOut(Easing.elastic(1)),
-      },
-    ],
-  },
-];
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#20232a',
-  },
-  title: {
-    marginTop: 10,
-    textAlign: 'center',
-    color: '#61dafb',
-  },
-  boxContainer: {
-    height: 160,
-    alignItems: 'center',
-  },
-  box: {
-    marginTop: 32,
-    borderRadius: 4,
-    backgroundColor: '#61dafb',
-  },
-  list: {
-    backgroundColor: '#fff',
-  },
-  listHeader: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    backgroundColor: '#f4f4f4',
-    color: '#999',
-    fontSize: 12,
-    textTransform: 'uppercase',
-  },
-  listRow: {
-    padding: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
----
-
-# Reference
-
-## Methods
-
-### `step0()`
-
-```tsx
-static step0(n: number);
-```
-
-A stepping function, returns 1 for any positive value of `n`.
-
----
-
-### `step1()`
-
-```tsx
-static step1(n: number);
-```
-
-A stepping function, returns 1 if `n` is greater than or equal to 1.
-
----
-
-### `linear()`
-
-```tsx
-static linear(t: number);
-```
-
-A linear function, `f(t) = t`. Position correlates to elapsed time one to one.
-
-https://cubic-bezier.com/#0,0,1,1
-
----
-
-### `ease()`
-
-```tsx
-static ease(t: number);
-```
-
-A basic inertial interaction, similar to an object slowly accelerating to speed.
-
-https://cubic-bezier.com/#.42,0,1,1
-
----
-
-### `quad()`
-
-```tsx
-static quad(t: number);
-```
-
-A quadratic function, `f(t) = t * t`. Position equals the square of elapsed time.
-
-https://easings.net/#easeInQuad
-
----
-
-### `cubic()`
-
-```tsx
-static cubic(t: number);
-```
-
-A cubic function, `f(t) = t * t * t`. Position equals the cube of elapsed time.
-
-https://easings.net/#easeInCubic
-
----
-
-### `poly()`
-
-```tsx
-static poly(n: number);
-```
-
-A power function. Position is equal to the Nth power of elapsed time.
-
-n = 4: https://easings.net/#easeInQuart n = 5: https://easings.net/#easeInQuint
-
----
-
-### `sin()`
-
-```tsx
-static sin(t: number);
-```
-
-A sinusoidal function.
-
-https://easings.net/#easeInSine
-
----
-
-### `circle()`
-
-```tsx
-static circle(t: number);
-```
-
-A circular function.
-
-https://easings.net/#easeInCirc
-
----
-
-### `exp()`
-
-```tsx
-static exp(t: number);
-```
-
-An exponential function.
-
-https://easings.net/#easeInExpo
-
----
-
-### `elastic()`
-
-```tsx
-static elastic(bounciness: number);
-```
-
-A basic elastic interaction, similar to a spring oscillating back and forth.
-
-Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.
-
-https://easings.net/#easeInElastic
-
----
-
-### `back()`
-
-```tsx
-static back(s)
-```
-
-Use with `Animated.parallel()` to create a basic effect where the object animates back slightly as the animation starts.
-
----
-
-### `bounce()`
-
-```tsx
-static bounce(t: number);
-```
-
-Provides a basic bouncing effect.
-
-https://easings.net/#easeInBounce
-
----
-
-### `bezier()`
-
-```tsx
-static bezier(x1: number, y1: number, x2: number, y2: number);
-```
-
-Provides a cubic bezier curve, equivalent to CSS Transitions' `transition-timing-function`.
-
-A useful tool to visualize cubic bezier curves can be found at https://cubic-bezier.com/
-
----
-
-### `in()`
-
-```tsx
-static in(easing: number);
-```
-
-Runs an easing function forwards.
-
----
-
-### `out()`
-
-```tsx
-static out(easing: number);
-```
-
-Runs an easing function backwards.
-
----
-
-### `inOut()`
-
-```tsx
-static inOut(easing: number);
-```
-
-Makes any easing function symmetrical. The easing function will run forwards for half of the duration, then backwards for the rest of the duration.
+---
+id: easing
+title: Easing
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+The `Easing` module implements common easing functions. This module is used by [`Animated.timing()`](animated.md#timing) to convey physically believable motion in animations.
+
+You can find a visualization of some common easing functions at https://easings.net/
+
+### Predefined animations
+
+The `Easing` module provides several predefined animations through the following methods:
+
+- [`back`](easing.md#back) provides a basic animation where the object goes slightly back before moving forward
+- [`bounce`](easing.md#bounce) provides a bouncing animation
+- [`ease`](easing.md#ease) provides a basic inertial animation
+- [`elastic`](easing.md#elastic) provides a basic spring interaction
+
+### Standard functions
+
+Three standard easing functions are provided:
+
+- [`linear`](easing.md#linear)
+- [`quad`](easing.md#quad)
+- [`cubic`](easing.md#cubic)
+
+The [`poly`](easing.md#poly) function can be used to implement quartic, quintic, and other higher power functions.
+
+### Additional functions
+
+Additional mathematical functions are provided by the following methods:
+
+- [`bezier`](easing.md#bezier) provides a cubic bezier curve
+- [`circle`](easing.md#circle) provides a circular function
+- [`sin`](easing.md#sin) provides a sinusoidal function
+- [`exp`](easing.md#exp) provides an exponential function
+
+The following helpers are used to modify other easing functions.
+
+- [`in`](easing.md#in) runs an easing function forwards
+- [`inOut`](easing.md#inout) makes any easing function symmetrical
+- [`out`](easing.md#out) runs an easing function backwards
+
+## Example
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Easing%20Demo&ext=js
+import {useRef} from 'react';
+import {
+  Animated,
+  Easing,
+  SectionList,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  const animate = easing => {
+    opacity.setValue(0);
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration: 1200,
+      easing,
+      useNativeDriver: false,
+    }).start();
+  };
+
+  const size = opacity.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 80],
+  });
+
+  const animatedStyles = [
+    styles.box,
+    {
+      opacity,
+      width: size,
+      height: size,
+    },
+  ];
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container} edges={['right', 'top', 'left']}>
+        <StatusBar hidden={true} />
+        <Text style={styles.title}>
+          Press rows below to preview the Easing!
+        </Text>
+        <View style={styles.boxContainer}>
+          <Animated.View style={animatedStyles} />
+        </View>
+        <SectionList
+          style={styles.list}
+          sections={SECTIONS}
+          keyExtractor={item => item.title}
+          renderItem={({item}) => (
+            <TouchableOpacity
+              onPress={() => animate(item.easing)}
+              style={styles.listRow}>
+              <Text>{item.title}</Text>
+            </TouchableOpacity>
+          )}
+          renderSectionHeader={({section: {title}}) => (
+            <Text style={styles.listHeader}>{title}</Text>
+          )}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const SECTIONS = [
+  {
+    title: 'Predefined animations',
+    data: [
+      {title: 'Bounce', easing: Easing.bounce},
+      {title: 'Ease', easing: Easing.ease},
+      {title: 'Elastic', easing: Easing.elastic(4)},
+    ],
+  },
+  {
+    title: 'Standard functions',
+    data: [
+      {title: 'Linear', easing: Easing.linear},
+      {title: 'Quad', easing: Easing.quad},
+      {title: 'Cubic', easing: Easing.cubic},
+    ],
+  },
+  {
+    title: 'Additional functions',
+    data: [
+      {
+        title: 'Bezier',
+        easing: Easing.bezier(0, 2, 1, -1),
+      },
+      {title: 'Circle', easing: Easing.circle},
+      {title: 'Sin', easing: Easing.sin},
+      {title: 'Exp', easing: Easing.exp},
+    ],
+  },
+  {
+    title: 'Combinations',
+    data: [
+      {
+        title: 'In + Bounce',
+        easing: Easing.in(Easing.bounce),
+      },
+      {
+        title: 'Out + Exp',
+        easing: Easing.out(Easing.exp),
+      },
+      {
+        title: 'InOut + Elastic',
+        easing: Easing.inOut(Easing.elastic(1)),
+      },
+    ],
+  },
+];
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#20232a',
+  },
+  title: {
+    marginTop: 10,
+    textAlign: 'center',
+    color: '#61dafb',
+  },
+  boxContainer: {
+    height: 160,
+    alignItems: 'center',
+  },
+  box: {
+    marginTop: 32,
+    borderRadius: 4,
+    backgroundColor: '#61dafb',
+  },
+  list: {
+    backgroundColor: '#fff',
+  },
+  listHeader: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    backgroundColor: '#f4f4f4',
+    color: '#999',
+    fontSize: 12,
+    textTransform: 'uppercase',
+  },
+  listRow: {
+    padding: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Easing%20Demo&ext=tsx
+import {useRef} from 'react';
+import {
+  Animated,
+  Easing,
+  SectionList,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  type EasingFunction,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  const animate = (easing: EasingFunction) => {
+    opacity.setValue(0);
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration: 1200,
+      easing,
+      useNativeDriver: false,
+    }).start();
+  };
+
+  const size = opacity.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 80],
+  });
+
+  const animatedStyles = [
+    styles.box,
+    {
+      opacity,
+      width: size,
+      height: size,
+    },
+  ];
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container} edges={['right', 'top', 'left']}>
+        <StatusBar hidden={true} />
+        <Text style={styles.title}>
+          Press rows below to preview the Easing!
+        </Text>
+        <View style={styles.boxContainer}>
+          <Animated.View style={animatedStyles} />
+        </View>
+        <SectionList
+          style={styles.list}
+          sections={SECTIONS}
+          keyExtractor={item => item.title}
+          renderItem={({item}) => (
+            <TouchableOpacity
+              onPress={() => animate(item.easing)}
+              style={styles.listRow}>
+              <Text>{item.title}</Text>
+            </TouchableOpacity>
+          )}
+          renderSectionHeader={({section: {title}}) => (
+            <Text style={styles.listHeader}>{title}</Text>
+          )}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const SECTIONS = [
+  {
+    title: 'Predefined animations',
+    data: [
+      {title: 'Bounce', easing: Easing.bounce},
+      {title: 'Ease', easing: Easing.ease},
+      {title: 'Elastic', easing: Easing.elastic(4)},
+    ],
+  },
+  {
+    title: 'Standard functions',
+    data: [
+      {title: 'Linear', easing: Easing.linear},
+      {title: 'Quad', easing: Easing.quad},
+      {title: 'Cubic', easing: Easing.cubic},
+    ],
+  },
+  {
+    title: 'Additional functions',
+    data: [
+      {
+        title: 'Bezier',
+        easing: Easing.bezier(0, 2, 1, -1),
+      },
+      {title: 'Circle', easing: Easing.circle},
+      {title: 'Sin', easing: Easing.sin},
+      {title: 'Exp', easing: Easing.exp},
+    ],
+  },
+  {
+    title: 'Combinations',
+    data: [
+      {
+        title: 'In + Bounce',
+        easing: Easing.in(Easing.bounce),
+      },
+      {
+        title: 'Out + Exp',
+        easing: Easing.out(Easing.exp),
+      },
+      {
+        title: 'InOut + Elastic',
+        easing: Easing.inOut(Easing.elastic(1)),
+      },
+    ],
+  },
+];
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#20232a',
+  },
+  title: {
+    marginTop: 10,
+    textAlign: 'center',
+    color: '#61dafb',
+  },
+  boxContainer: {
+    height: 160,
+    alignItems: 'center',
+  },
+  box: {
+    marginTop: 32,
+    borderRadius: 4,
+    backgroundColor: '#61dafb',
+  },
+  list: {
+    backgroundColor: '#fff',
+  },
+  listHeader: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    backgroundColor: '#f4f4f4',
+    color: '#999',
+    fontSize: 12,
+    textTransform: 'uppercase',
+  },
+  listRow: {
+    padding: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+---
+
+# Reference
+
+## Methods
+
+### `step0()`
+
+```tsx
+static step0(n: number);
+```
+
+A stepping function, returns 1 for any positive value of `n`.
+
+---
+
+### `step1()`
+
+```tsx
+static step1(n: number);
+```
+
+A stepping function, returns 1 if `n` is greater than or equal to 1.
+
+---
+
+### `linear()`
+
+```tsx
+static linear(t: number);
+```
+
+A linear function, `f(t) = t`. Position correlates to elapsed time one to one.
+
+https://cubic-bezier.com/#0,0,1,1
+
+---
+
+### `ease()`
+
+```tsx
+static ease(t: number);
+```
+
+A basic inertial interaction, similar to an object slowly accelerating to speed.
+
+https://cubic-bezier.com/#.42,0,1,1
+
+---
+
+### `quad()`
+
+```tsx
+static quad(t: number);
+```
+
+A quadratic function, `f(t) = t * t`. Position equals the square of elapsed time.
+
+https://easings.net/#easeInQuad
+
+---
+
+### `cubic()`
+
+```tsx
+static cubic(t: number);
+```
+
+A cubic function, `f(t) = t * t * t`. Position equals the cube of elapsed time.
+
+https://easings.net/#easeInCubic
+
+---
+
+### `poly()`
+
+```tsx
+static poly(n: number);
+```
+
+A power function. Position is equal to the Nth power of elapsed time.
+
+n = 4: https://easings.net/#easeInQuart n = 5: https://easings.net/#easeInQuint
+
+---
+
+### `sin()`
+
+```tsx
+static sin(t: number);
+```
+
+A sinusoidal function.
+
+https://easings.net/#easeInSine
+
+---
+
+### `circle()`
+
+```tsx
+static circle(t: number);
+```
+
+A circular function.
+
+https://easings.net/#easeInCirc
+
+---
+
+### `exp()`
+
+```tsx
+static exp(t: number);
+```
+
+An exponential function.
+
+https://easings.net/#easeInExpo
+
+---
+
+### `elastic()`
+
+```tsx
+static elastic(bounciness: number);
+```
+
+A basic elastic interaction, similar to a spring oscillating back and forth.
+
+Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.
+
+https://easings.net/#easeInElastic
+
+---
+
+### `back()`
+
+```tsx
+static back(s)
+```
+
+Use with `Animated.parallel()` to create a basic effect where the object animates back slightly as the animation starts.
+
+---
+
+### `bounce()`
+
+```tsx
+static bounce(t: number);
+```
+
+Provides a basic bouncing effect.
+
+https://easings.net/#easeInBounce
+
+---
+
+### `bezier()`
+
+```tsx
+static bezier(x1: number, y1: number, x2: number, y2: number);
+```
+
+Provides a cubic bezier curve, equivalent to CSS Transitions' `transition-timing-function`.
+
+A useful tool to visualize cubic bezier curves can be found at https://cubic-bezier.com/
+
+---
+
+### `in()`
+
+```tsx
+static in(easing: number);
+```
+
+Runs an easing function forwards.
+
+---
+
+### `out()`
+
+```tsx
+static out(easing: number);
+```
+
+Runs an easing function backwards.
+
+---
+
+### `inOut()`
+
+```tsx
+static inOut(easing: number);
+```
+
+Makes any easing function symmetrical. The easing function will run forwards for half of the duration, then backwards for the rest of the duration.
diff --git a/website/versioned_docs/version-0.84/element-nodes.md b/website/versioned_docs/version-0.84/element-nodes.md
index 654c870b37f..f48b808eefc 100644
--- a/website/versioned_docs/version-0.84/element-nodes.md
+++ b/website/versioned_docs/version-0.84/element-nodes.md
@@ -1,135 +1,135 @@
----
-id: element-nodes
-title: Element nodes
----
-
-Element nodes represent native components in the native view tree (similar to [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) nodes on Web).
-
-They are provided by all native components, and by many built-in components, via refs:
-
-```SnackPlayer ext=js&name=Element%20instances%20example
-import * as React from 'react';
-import { View, SafeAreaView, StyleSheet, Text } from 'react-native';
-
-const ViewWithRefs = () => {
-  const ref = React.useRef(null);
-  const [viewInfo, setViewInfo] = React.useState('');
-
-  React.useEffect(() => {
-    // `element` is an object implementing the interface described here.
-    const element = ref.current;
-    const rect = JSON.stringify(element.getBoundingClientRect());
-    setViewInfo(
-      `Bounding rect is: ${rect}.\nText content is: ${element.textContent}`,
-    );
-  }, []);
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <View ref={ref} style={styles.content}>
-        <Text>Hello world!</Text>
-      </View>
-      <Text>{viewInfo}</Text>
-    </SafeAreaView>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  content: {
-    padding: 10,
-    backgroundColor: 'gray',
-  },
-});
-
-export default ViewWithRefs;
-```
-
-:::info
-Note that some built-in components are only a container for other components (including native components). For example, `ScrollView` internally renders a native scroll view and a native view, which are accessible through the ref it provides using methods like `getNativeScrollRef()` and `getInnerViewRef()`.
-:::
-
----
-
-## Reference
-
-### Web-compatible API
-
-From [`HTMLElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement):
-
-- Properties
-  - [`offsetHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight)
-  - [`offsetLeft`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft)
-  - [`offsetParent`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent)
-  - [`offsetTop`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop)
-  - [`offsetWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth)
-- Methods
-  - [`blur()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/blur).
-  - [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus).
-    - ⚠️ The `options` parameter is not supported.
-
-From [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element):
-
-- Properties
-  - [`childElementCount`](https://developer.mozilla.org/en-US/docs/Web/API/Element/childElementCount)
-  - [`children`](https://developer.mozilla.org/en-US/docs/Web/API/Element/children)
-  - [`clientHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight)
-  - [`clientLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft)
-  - [`clientTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop)
-  - [`clientWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth)
-  - [`firstElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Element/firstElementChild)
-  - [`id`](https://developer.mozilla.org/en-US/docs/Web/API/Element/id)
-    - ℹ️ Returns the value of the `id` or `nativeID` props.
-  - [`lastElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Element/lastElementChild)
-  - [`nextElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Element/nextElementSibling)
-  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
-  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
-  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
-  - [`previousElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Element/previousElementSibling)
-  - [`scrollHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight)
-  - [`scrollLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft)
-    - ⚠️ For built-in components, only `ScrollView` instances can return a value other than zero.
-  - [`scrollTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop)
-    - ⚠️ For built-in components, only `ScrollView` instances can return a value other than zero.
-  - [`scrollWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth)
-  - [`tagName`](https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName)
-    - ℹ️ Returns a normalized native component name prefixed with `RN:`, like `RN:View`.
-  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
-- Methods
-  - [`getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)
-  - [`hasPointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/hasPointerCapture)
-  - [`setPointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture)
-  - [`releasePointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/releasePointerCapture)
-
-From [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/Node):
-
-- Properties
-  - [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)
-  - [`firstChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild)
-  - [`isConnected`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected)
-  - [`lastChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild)
-  - [`nextSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling)
-  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
-  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
-  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
-  - [`ownerDocument`](https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument)
-    - ℹ️ Will return the [document node](/docs/next/document-nodes) where this component was rendered.
-  - [`parentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)
-  - [`parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)
-  - [`previousSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling)
-  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
-- Methods
-  - [`compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
-  - [`contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains)
-  - [`getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)
-    - ℹ️ Will return a reference to itself if the component is not mounted.
-  - [`hasChildNodes()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes)
-
-### Legacy API
-
-- [`measure()`](/docs/next/legacy/direct-manipulation#measurecallback)
-- [`measureInWindow()`](/docs/next/legacy/direct-manipulation#measureinwindowcallback)
-- [`measureLayout()`](/docs/next/legacy/direct-manipulation#measurelayoutrelativetonativecomponentref-onsuccess-onfail)
-- [`setNativeProps()`](/docs/next/legacy/direct-manipulation#setnativeprops-with-touchableopacity)
+---
+id: element-nodes
+title: Element nodes
+---
+
+Element nodes represent native components in the native view tree (similar to [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) nodes on Web).
+
+They are provided by all native components, and by many built-in components, via refs:
+
+```SnackPlayer ext=js&name=Element%20instances%20example
+import {useEffect, useRef, useState} from 'react';
+import {View, SafeAreaView, StyleSheet, Text} from 'react-native';
+
+const ViewWithRefs = () => {
+  const ref = useRef(null);
+  const [viewInfo, setViewInfo] = useState('');
+
+  useEffect(() => {
+    // `element` is an object implementing the interface described here.
+    const element = ref.current;
+    const rect = JSON.stringify(element.getBoundingClientRect());
+    setViewInfo(
+      `Bounding rect is: ${rect}.\nText content is: ${element.textContent}`,
+    );
+  }, []);
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View ref={ref} style={styles.content}>
+        <Text>Hello world!</Text>
+      </View>
+      <Text>{viewInfo}</Text>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    padding: 10,
+    backgroundColor: 'gray',
+  },
+});
+
+export default ViewWithRefs;
+```
+
+:::info
+Note that some built-in components are only a container for other components (including native components). For example, `ScrollView` internally renders a native scroll view and a native view, which are accessible through the ref it provides using methods like `getNativeScrollRef()` and `getInnerViewRef()`.
+:::
+
+---
+
+## Reference
+
+### Web-compatible API
+
+From [`HTMLElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement):
+
+- Properties
+  - [`offsetHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight)
+  - [`offsetLeft`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft)
+  - [`offsetParent`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent)
+  - [`offsetTop`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop)
+  - [`offsetWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth)
+- Methods
+  - [`blur()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/blur).
+  - [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus).
+    - ⚠️ The `options` parameter is not supported.
+
+From [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element):
+
+- Properties
+  - [`childElementCount`](https://developer.mozilla.org/en-US/docs/Web/API/Element/childElementCount)
+  - [`children`](https://developer.mozilla.org/en-US/docs/Web/API/Element/children)
+  - [`clientHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight)
+  - [`clientLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft)
+  - [`clientTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop)
+  - [`clientWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth)
+  - [`firstElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Element/firstElementChild)
+  - [`id`](https://developer.mozilla.org/en-US/docs/Web/API/Element/id)
+    - ℹ️ Returns the value of the `id` or `nativeID` props.
+  - [`lastElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Element/lastElementChild)
+  - [`nextElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Element/nextElementSibling)
+  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
+  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
+  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
+  - [`previousElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Element/previousElementSibling)
+  - [`scrollHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight)
+  - [`scrollLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft)
+    - ⚠️ For built-in components, only `ScrollView` instances can return a value other than zero.
+  - [`scrollTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop)
+    - ⚠️ For built-in components, only `ScrollView` instances can return a value other than zero.
+  - [`scrollWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth)
+  - [`tagName`](https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName)
+    - ℹ️ Returns a normalized native component name prefixed with `RN:`, like `RN:View`.
+  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
+- Methods
+  - [`getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)
+  - [`hasPointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/hasPointerCapture)
+  - [`setPointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture)
+  - [`releasePointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/releasePointerCapture)
+
+From [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/Node):
+
+- Properties
+  - [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)
+  - [`firstChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild)
+  - [`isConnected`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected)
+  - [`lastChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild)
+  - [`nextSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling)
+  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
+  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
+  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
+  - [`ownerDocument`](https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument)
+    - ℹ️ Will return the [document node](/docs/next/document-nodes) where this component was rendered.
+  - [`parentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)
+  - [`parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)
+  - [`previousSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling)
+  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
+- Methods
+  - [`compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
+  - [`contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains)
+  - [`getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)
+    - ℹ️ Will return a reference to itself if the component is not mounted.
+  - [`hasChildNodes()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes)
+
+### Legacy API
+
+- [`measure()`](/docs/next/legacy/direct-manipulation#measurecallback)
+- [`measureInWindow()`](/docs/next/legacy/direct-manipulation#measureinwindowcallback)
+- [`measureLayout()`](/docs/next/legacy/direct-manipulation#measurelayoutrelativetonativecomponentref-onsuccess-onfail)
+- [`setNativeProps()`](/docs/next/legacy/direct-manipulation#setnativeprops-with-touchableopacity)
diff --git a/website/versioned_docs/version-0.84/fabric-native-components.md b/website/versioned_docs/version-0.84/fabric-native-components.md
index 2a509a7174e..6efdd572e92 100644
--- a/website/versioned_docs/version-0.84/fabric-native-components.md
+++ b/website/versioned_docs/version-0.84/fabric-native-components.md
@@ -172,7 +172,6 @@ This guide shows you how to create a Native Component that only works with the N
 Finally, you can use the new component in your app. Update your generated `App.tsx` to:
 
 ```javascript title="Demo/App.tsx"
-import React from 'react';
 import {Alert, StyleSheet, View} from 'react-native';
 import WebView from './specs/WebViewNativeComponent';
 
diff --git a/website/versioned_docs/version-0.84/flatlist.md b/website/versioned_docs/version-0.84/flatlist.md
index 56505e27ca8..a7cceaf3ada 100644
--- a/website/versioned_docs/version-0.84/flatlist.md
+++ b/website/versioned_docs/version-0.84/flatlist.md
@@ -1,861 +1,859 @@
----
-id: flatlist
-title: FlatList
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-A performant interface for rendering basic, flat lists, supporting the most handy features:
-
-- Fully cross-platform.
-- Optional horizontal mode.
-- Configurable viewability callbacks.
-- Header support.
-- Footer support.
-- Separator support.
-- Pull to Refresh.
-- Scroll loading.
-- ScrollToIndex support.
-- Multiple column support.
-
-If you need section support, use [`<SectionList>`](sectionlist.md).
-
-## Example
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Simple%20FlatList%20Example&ext=js
-import React from 'react';
-import {View, FlatList, StyleSheet, Text, StatusBar} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const DATA = [
-  {
-    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
-    title: 'First Item',
-  },
-  {
-    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
-    title: 'Second Item',
-  },
-  {
-    id: '58694a0f-3da1-471f-bd96-145571e29d72',
-    title: 'Third Item',
-  },
-];
-
-const Item = ({title}) => (
-  <View style={styles.item}>
-    <Text style={styles.title}>{title}</Text>
-  </View>
-);
-
-const App = () => (
-  <SafeAreaProvider>
-    <SafeAreaView style={styles.container}>
-      <FlatList
-        data={DATA}
-        renderItem={({item}) => <Item title={item.title} />}
-        keyExtractor={item => item.id}
-      />
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: StatusBar.currentHeight || 0,
-  },
-  item: {
-    backgroundColor: '#f9c2ff',
-    padding: 20,
-    marginVertical: 8,
-    marginHorizontal: 16,
-  },
-  title: {
-    fontSize: 32,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Simple%20FlatList%20Example&ext=tsx
-import React from 'react';
-import {View, FlatList, StyleSheet, Text, StatusBar} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const DATA = [
-  {
-    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
-    title: 'First Item',
-  },
-  {
-    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
-    title: 'Second Item',
-  },
-  {
-    id: '58694a0f-3da1-471f-bd96-145571e29d72',
-    title: 'Third Item',
-  },
-];
-
-type ItemProps = {title: string};
-
-const Item = ({title}: ItemProps) => (
-  <View style={styles.item}>
-    <Text style={styles.title}>{title}</Text>
-  </View>
-);
-
-const App = () => (
-  <SafeAreaProvider>
-    <SafeAreaView style={styles.container}>
-      <FlatList
-        data={DATA}
-        renderItem={({item}) => <Item title={item.title} />}
-        keyExtractor={item => item.id}
-      />
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: StatusBar.currentHeight || 0,
-  },
-  item: {
-    backgroundColor: '#f9c2ff',
-    padding: 20,
-    marginVertical: 8,
-    marginHorizontal: 16,
-  },
-  title: {
-    fontSize: 32,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-To render multiple columns, use the [`numColumns`](flatlist.md#numcolumns) prop. Using this approach instead of a `flexWrap` layout can prevent conflicts with the item height logic.
-
-More complex, selectable example below.
-
-- By passing `extraData={selectedId}` to `FlatList` we make sure `FlatList` itself will re-render when the state changes. Without setting this prop, `FlatList` would not know it needs to re-render any items because it is a `PureComponent` and the prop comparison will not show any changes.
-- `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=flatlist-selectable&ext=js
-import React, {useState} from 'react';
-import {
-  FlatList,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const DATA = [
-  {
-    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
-    title: 'First Item',
-  },
-  {
-    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
-    title: 'Second Item',
-  },
-  {
-    id: '58694a0f-3da1-471f-bd96-145571e29d72',
-    title: 'Third Item',
-  },
-];
-
-const Item = ({item, onPress, backgroundColor, textColor}) => (
-  <TouchableOpacity onPress={onPress} style={[styles.item, {backgroundColor}]}>
-    <Text style={[styles.title, {color: textColor}]}>{item.title}</Text>
-  </TouchableOpacity>
-);
-
-const App = () => {
-  const [selectedId, setSelectedId] = useState();
-
-  const renderItem = ({item}) => {
-    const backgroundColor = item.id === selectedId ? '#6e3b6e' : '#f9c2ff';
-    const color = item.id === selectedId ? 'white' : 'black';
-
-    return (
-      <Item
-        item={item}
-        onPress={() => setSelectedId(item.id)}
-        backgroundColor={backgroundColor}
-        textColor={color}
-      />
-    );
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <FlatList
-          data={DATA}
-          renderItem={renderItem}
-          keyExtractor={item => item.id}
-          extraData={selectedId}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: StatusBar.currentHeight || 0,
-  },
-  item: {
-    padding: 20,
-    marginVertical: 8,
-    marginHorizontal: 16,
-  },
-  title: {
-    fontSize: 32,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=flatlist-selectable&ext=tsx
-import React, {useState} from 'react';
-import {
-  FlatList,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-type ItemData = {
-  id: string;
-  title: string;
-};
-
-const DATA: ItemData[] = [
-  {
-    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
-    title: 'First Item',
-  },
-  {
-    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
-    title: 'Second Item',
-  },
-  {
-    id: '58694a0f-3da1-471f-bd96-145571e29d72',
-    title: 'Third Item',
-  },
-];
-
-type ItemProps = {
-  item: ItemData;
-  onPress: () => void;
-  backgroundColor: string;
-  textColor: string;
-};
-
-const Item = ({item, onPress, backgroundColor, textColor}: ItemProps) => (
-  <TouchableOpacity onPress={onPress} style={[styles.item, {backgroundColor}]}>
-    <Text style={[styles.title, {color: textColor}]}>{item.title}</Text>
-  </TouchableOpacity>
-);
-
-const App = () => {
-  const [selectedId, setSelectedId] = useState<string>();
-
-  const renderItem = ({item}: {item: ItemData}) => {
-    const backgroundColor = item.id === selectedId ? '#6e3b6e' : '#f9c2ff';
-    const color = item.id === selectedId ? 'white' : 'black';
-
-    return (
-      <Item
-        item={item}
-        onPress={() => setSelectedId(item.id)}
-        backgroundColor={backgroundColor}
-        textColor={color}
-      />
-    );
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <FlatList
-          data={DATA}
-          renderItem={renderItem}
-          keyExtractor={item => item.id}
-          extraData={selectedId}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: StatusBar.currentHeight || 0,
-  },
-  item: {
-    padding: 20,
-    marginVertical: 8,
-    marginHorizontal: 16,
-  },
-  title: {
-    fontSize: 32,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-This is a convenience wrapper around [`<VirtualizedList>`](virtualizedlist.md), and thus inherits its props (as well as those of [`<ScrollView>`](scrollview.md)) that aren't explicitly listed here, along with the following caveats:
-
-- Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.
-- This is a `PureComponent` which means that it will not re-render if `props` remain shallow-equal. Make sure that everything your `renderItem` function depends on is passed as a prop (e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on changes. This includes the `data` prop and parent component state.
-- In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes.
-- By default, the list looks for a `key` prop on each item and uses that for the React key. Alternatively, you can provide a custom `keyExtractor` prop.
-
----
-
-# Reference
-
-## Props
-
-### [VirtualizedList Props](virtualizedlist.md#props)
-
-Inherits [VirtualizedList Props](virtualizedlist.md#props).
-
----
-
-### <div className="label required basic">Required</div> **`renderItem`**
-
-```tsx
-renderItem({
-  item: ItemT,
-  index: number,
-  separators: {
-    highlight: () => void;
-    unhighlight: () => void;
-    updateProps: (select: 'leading' | 'trailing', newProps: any) => void;
-  }
-}): JSX.Element;
-```
-
-Takes an item from `data` and renders it into the list.
-
-Provides additional metadata like `index` if you need it, as well as a more generic `separators.updateProps` function which let you set whatever props you want to change the rendering of either the leading separator or trailing separator in case the more common `highlight` and `unhighlight` (which set the `highlighted: boolean` prop) are insufficient for your use case.
-
-| Type     |
-| -------- |
-| function |
-
-- `item` (Object): The item from `data` being rendered.
-- `index` (number): The index corresponding to this item in the `data` array.
-- `separators` (Object)
-  - `highlight` (Function)
-  - `unhighlight` (Function)
-  - `updateProps` (Function)
-    - `select` (enum('leading', 'trailing'))
-    - `newProps` (Object)
-
-Example usage:
-
-```tsx
-<FlatList
-  ItemSeparatorComponent={
-    Platform.OS !== 'android' &&
-    (({highlighted}) => (
-      <View
-        style={[style.separator, highlighted && {marginLeft: 0}]}
-      />
-    ))
-  }
-  data={[{title: 'Title Text', key: 'item1'}]}
-  renderItem={({item, index, separators}) => (
-    <TouchableHighlight
-      key={item.key}
-      onPress={() => this._onPress(item)}
-      onShowUnderlay={separators.highlight}
-      onHideUnderlay={separators.unhighlight}>
-      <View style={{backgroundColor: 'white'}}>
-        <Text>{item.title}</Text>
-      </View>
-    </TouchableHighlight>
-  )}
-/>
-```
-
----
-
-### <div className="label required basic">Required</div> **`data`**
-
-An array (or array-like list) of items to render. Other data types can be used by targeting [`VirtualizedList`](virtualizedlist.md) directly.
-
-| Type      |
-| --------- |
-| ArrayLike |
-
----
-
-### `ItemSeparatorComponent`
-
-Rendered in between each item, but not at the top or bottom. By default, `highlighted` and `leadingItem` props are provided. `renderItem` provides `separators.highlight`/`unhighlight` which will update the `highlighted` prop, but you can also add custom props with `separators.updateProps`. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
-
-| Type                         |
-| ---------------------------- |
-| component, function, element |
-
----
-
-### `ListEmptyComponent`
-
-Rendered when the list is empty. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
-
-| Type               |
-| ------------------ |
-| component, element |
-
----
-
-### `ListFooterComponent`
-
-Rendered at the bottom of all the items. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
-
-| Type               |
-| ------------------ |
-| component, element |
-
----
-
-### `ListFooterComponentStyle`
-
-Styling for internal View for `ListFooterComponent`.
-
-| Type                           |
-| ------------------------------ |
-| [View Style](view-style-props) |
-
----
-
-### `ListHeaderComponent`
-
-Rendered at the top of all the items. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
-
-| Type               |
-| ------------------ |
-| component, element |
-
----
-
-### `ListHeaderComponentStyle`
-
-Styling for internal View for `ListHeaderComponent`.
-
-| Type                           |
-| ------------------------------ |
-| [View Style](view-style-props) |
-
----
-
-### `columnWrapperStyle`
-
-Optional custom style for multi-item rows generated when `numColumns > 1`.
-
-| Type                           |
-| ------------------------------ |
-| [View Style](view-style-props) |
-
----
-
-### `extraData`
-
-A marker property for telling the list to re-render (since it implements `PureComponent`). If any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the `data` prop, stick it here and treat it immutably.
-
-| Type |
-| ---- |
-| any  |
-
----
-
-### `getItemLayout`
-
-```tsx
-(data, index) => {length: number, offset: number, index: number}
-```
-
-`getItemLayout` is an optional optimization that allows skipping the measurement of dynamic content if you know the size (height or width) of items ahead of time. `getItemLayout` is efficient if you have fixed size items, for example:
-
-```tsx
-  getItemLayout={(data, index) => (
-    {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
-  )}
-```
-
-Adding `getItemLayout` can be a great performance boost for lists of several hundred items. Remember to include separator length (height or width) in your offset calculation if you specify `ItemSeparatorComponent`.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `horizontal`
-
-If `true`, renders items next to each other horizontally instead of stacked vertically.
-
-| Type    |
-| ------- |
-| boolean |
-
----
-
-### `initialNumToRender`
-
-How many items to render in the initial batch. This should be enough to fill the screen but not much more. Note these items will never be unmounted as part of the windowed rendering in order to improve perceived performance of scroll-to-top actions.
-
-| Type   | Default |
-| ------ | ------- |
-| number | `10`    |
-
----
-
-### `initialScrollIndex`
-
-Instead of starting at the top with the first item, start at `initialScrollIndex`. This disables the "scroll to top" optimization that keeps the first `initialNumToRender` items always rendered and immediately renders the items starting at this initial index. Requires `getItemLayout` to be implemented.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `inverted`
-
-Reverses the direction of scroll. Uses scale transforms of `-1`.
-
-| Type    |
-| ------- |
-| boolean |
-
----
-
-### `keyExtractor`
-
-```tsx
-(item: ItemT, index: number) => string;
-```
-
-Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks `item.key`, then `item.id`, and then falls back to using the index, like React does.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `numColumns`
-
-Multiple columns can only be rendered with `horizontal={false}` and will zig-zag like a `flexWrap` layout. Items should all be the same height - masonry layouts are not supported.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `onRefresh`
-
-```tsx
-() => void;
-```
-
-If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the `refreshing` prop correctly.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onViewableItemsChanged`
-
-Called when the viewability of rows changes, as defined by the `viewabilityConfig` prop.
-
-| Type                                                                                                  |
-| ----------------------------------------------------------------------------------------------------- |
-| `md (callback: {changed: [ViewToken](viewtoken)[], viewableItems: [ViewToken](viewtoken)[]} => void;` |
-
----
-
-### `progressViewOffset`
-
-Set this when offset is needed for the loading indicator to show correctly.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `refreshing`
-
-Set this true while waiting for new data from a refresh.
-
-| Type    |
-| ------- |
-| boolean |
-
----
-
-### `removeClippedSubviews`
-
-:::warning
-Using this property may lead to bugs (missing content) in some circumstances - use at your own risk.
-:::
-
-When `true`, offscreen child views are removed from their native backing superview when offscreen. This may improve scroll performance for large lists. On Android the default value is `true`.
-
-| Type    |
-| ------- |
-| boolean |
-
----
-
-### `viewabilityConfig`
-
-See [`ViewabilityHelper.js`](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Lists/ViewabilityHelper.js) for flow type and further documentation.
-
-| Type              |
-| ----------------- |
-| ViewabilityConfig |
-
-`viewabilityConfig` takes a type `ViewabilityConfig` an object with following properties
-
-| Property                         | Type    |
-| -------------------------------- | ------- |
-| minimumViewTime                  | number  |
-| viewAreaCoveragePercentThreshold | number  |
-| itemVisiblePercentThreshold      | number  |
-| waitForInteraction               | boolean |
-
-At least one of the `viewAreaCoveragePercentThreshold` or `itemVisiblePercentThreshold` is required. This needs to be done in the `constructor` to avoid following error ([ref](https://github.com/facebook/react-native/issues/17408)):
-
-```
-  Error: Changing viewabilityConfig on the fly is not supported
-```
-
-```tsx
-constructor (props) {
-  super(props)
-
-  this.viewabilityConfig = {
-      waitForInteraction: true,
-      viewAreaCoveragePercentThreshold: 95
-  }
-}
-```
-
-```tsx
-<FlatList
-    viewabilityConfig={this.viewabilityConfig}
-  ...
-```
-
-#### minimumViewTime
-
-Minimum amount of time (in milliseconds) that an item must be physically viewable before the viewability callback will be fired. A high number means that scrolling through content without stopping will not mark the content as viewable.
-
-#### viewAreaCoveragePercentThreshold
-
-Percent of viewport that must be covered for a partially occluded item to count as "viewable", 0-100. Fully visible items are always considered viewable. A value of 0 means that a single pixel in the viewport makes the item viewable, and a value of 100 means that an item must be either entirely visible or cover the entire viewport to count as viewable.
-
-#### itemVisiblePercentThreshold
-
-Similar to `viewAreaCoveragePercentThreshold`, but considers the percent of the item that is visible, rather than the fraction of the viewable area it covers.
-
-#### waitForInteraction
-
-Nothing is considered viewable until the user scrolls or `recordInteraction` is called after render.
-
----
-
-### `viewabilityConfigCallbackPairs`
-
-List of `ViewabilityConfig`/`onViewableItemsChanged` pairs. A specific `onViewableItemsChanged` will be called when its corresponding `ViewabilityConfig`'s conditions are met. See `ViewabilityHelper.js` for flow type and further documentation.
-
-| Type                                   |
-| -------------------------------------- |
-| array of ViewabilityConfigCallbackPair |
-
-## Methods
-
-### `flashScrollIndicators()`
-
-```tsx
-flashScrollIndicators();
-```
-
-Displays the scroll indicators momentarily.
-
----
-
-### `getNativeScrollRef()`
-
-```tsx
-getNativeScrollRef(): React.ElementRef<typeof ScrollViewComponent>;
-```
-
-Provides a reference to the underlying scroll component
-
----
-
-### `getScrollResponder()`
-
-```tsx
-getScrollResponder(): ScrollResponderMixin;
-```
-
-Provides a handle to the underlying scroll responder.
-
----
-
-### `getScrollableNode()`
-
-```tsx
-getScrollableNode(): any;
-```
-
-Provides a handle to the underlying scroll node.
-
-### `scrollToEnd()`
-
-```tsx
-scrollToEnd(params?: {animated?: boolean});
-```
-
-Scrolls to the end of the content. May be janky without `getItemLayout` prop.
-
-**Parameters:**
-
-| Name   | Type   |
-| ------ | ------ |
-| params | object |
-
-Valid `params` keys are:
-
-- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
-
----
-
-### `scrollToIndex()`
-
-```tsx
-scrollToIndex: (params: {
-  index: number;
-  animated?: boolean;
-  viewOffset?: number;
-  viewPosition?: number;
-});
-```
-
-Scrolls to the item at the specified index such that it is positioned in the viewable area such that `viewPosition` 0 places it at the top, 1 at the bottom, and 0.5 centered in the middle.
-
-:::note
-Cannot scroll to locations outside the render window without specifying the `getItemLayout` prop.
-:::
-
-**Parameters:**
-
-| Name                                                        | Type   |
-| ----------------------------------------------------------- | ------ |
-| params <div className="label basic required">Required</div> | object |
-
-Valid `params` keys are:
-
-- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
-- 'index' (number) - The index to scroll to. Required.
-- 'viewOffset' (number) - A fixed number of pixels to offset the final target position.
-- 'viewPosition' (number) - A value of `0` places the item specified by index at the top, `1` at the bottom, and `0.5` centered in the middle.
-
----
-
-### `scrollToItem()`
-
-```tsx
-scrollToItem(params: {
-  animated?: ?boolean,
-  item: Item,
-  viewPosition?: number,
-});
-```
-
-Requires linear scan through data - use `scrollToIndex` instead if possible.
-
-:::note
-Cannot scroll to locations outside the render window without specifying the `getItemLayout` prop.
-:::
-
-**Parameters:**
-
-| Name                                                        | Type   |
-| ----------------------------------------------------------- | ------ |
-| params <div className="label basic required">Required</div> | object |
-
-Valid `params` keys are:
-
-- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
-- 'item' (object) - The item to scroll to. Required.
-- 'viewPosition' (number)
-
----
-
-### `scrollToOffset()`
-
-```tsx
-scrollToOffset(params: {
-  offset: number;
-  animated?: boolean;
-});
-```
-
-Scroll to a specific content pixel offset in the list.
-
-**Parameters:**
-
-| Name                                                        | Type   |
-| ----------------------------------------------------------- | ------ |
-| params <div className="label basic required">Required</div> | object |
-
-Valid `params` keys are:
-
-- 'offset' (number) - The offset to scroll to. In case of `horizontal` being true, the offset is the x-value, in any other case the offset is the y-value. Required.
-- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
+---
+id: flatlist
+title: FlatList
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+A performant interface for rendering basic, flat lists, supporting the most handy features:
+
+- Fully cross-platform.
+- Optional horizontal mode.
+- Configurable viewability callbacks.
+- Header support.
+- Footer support.
+- Separator support.
+- Pull to Refresh.
+- Scroll loading.
+- ScrollToIndex support.
+- Multiple column support.
+
+If you need section support, use [`<SectionList>`](sectionlist.md).
+
+## Example
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Simple%20FlatList%20Example&ext=js
+import {View, FlatList, StyleSheet, Text, StatusBar} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const DATA = [
+  {
+    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
+    title: 'First Item',
+  },
+  {
+    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
+    title: 'Second Item',
+  },
+  {
+    id: '58694a0f-3da1-471f-bd96-145571e29d72',
+    title: 'Third Item',
+  },
+];
+
+const Item = ({title}) => (
+  <View style={styles.item}>
+    <Text style={styles.title}>{title}</Text>
+  </View>
+);
+
+const App = () => (
+  <SafeAreaProvider>
+    <SafeAreaView style={styles.container}>
+      <FlatList
+        data={DATA}
+        renderItem={({item}) => <Item title={item.title} />}
+        keyExtractor={item => item.id}
+      />
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: StatusBar.currentHeight || 0,
+  },
+  item: {
+    backgroundColor: '#f9c2ff',
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Simple%20FlatList%20Example&ext=tsx
+import {View, FlatList, StyleSheet, Text, StatusBar} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const DATA = [
+  {
+    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
+    title: 'First Item',
+  },
+  {
+    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
+    title: 'Second Item',
+  },
+  {
+    id: '58694a0f-3da1-471f-bd96-145571e29d72',
+    title: 'Third Item',
+  },
+];
+
+type ItemProps = {title: string};
+
+const Item = ({title}: ItemProps) => (
+  <View style={styles.item}>
+    <Text style={styles.title}>{title}</Text>
+  </View>
+);
+
+const App = () => (
+  <SafeAreaProvider>
+    <SafeAreaView style={styles.container}>
+      <FlatList
+        data={DATA}
+        renderItem={({item}) => <Item title={item.title} />}
+        keyExtractor={item => item.id}
+      />
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: StatusBar.currentHeight || 0,
+  },
+  item: {
+    backgroundColor: '#f9c2ff',
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+To render multiple columns, use the [`numColumns`](flatlist.md#numcolumns) prop. Using this approach instead of a `flexWrap` layout can prevent conflicts with the item height logic.
+
+More complex, selectable example below.
+
+- By passing `extraData={selectedId}` to `FlatList` we make sure `FlatList` itself will re-render when the state changes. Without setting this prop, `FlatList` would not know it needs to re-render any items because it is a `PureComponent` and the prop comparison will not show any changes.
+- `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=flatlist-selectable&ext=js
+import {useState} from 'react';
+import {
+  FlatList,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const DATA = [
+  {
+    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
+    title: 'First Item',
+  },
+  {
+    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
+    title: 'Second Item',
+  },
+  {
+    id: '58694a0f-3da1-471f-bd96-145571e29d72',
+    title: 'Third Item',
+  },
+];
+
+const Item = ({item, onPress, backgroundColor, textColor}) => (
+  <TouchableOpacity onPress={onPress} style={[styles.item, {backgroundColor}]}>
+    <Text style={[styles.title, {color: textColor}]}>{item.title}</Text>
+  </TouchableOpacity>
+);
+
+const App = () => {
+  const [selectedId, setSelectedId] = useState();
+
+  const renderItem = ({item}) => {
+    const backgroundColor = item.id === selectedId ? '#6e3b6e' : '#f9c2ff';
+    const color = item.id === selectedId ? 'white' : 'black';
+
+    return (
+      <Item
+        item={item}
+        onPress={() => setSelectedId(item.id)}
+        backgroundColor={backgroundColor}
+        textColor={color}
+      />
+    );
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <FlatList
+          data={DATA}
+          renderItem={renderItem}
+          keyExtractor={item => item.id}
+          extraData={selectedId}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: StatusBar.currentHeight || 0,
+  },
+  item: {
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=flatlist-selectable&ext=tsx
+import {useState} from 'react';
+import {
+  FlatList,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+type ItemData = {
+  id: string;
+  title: string;
+};
+
+const DATA: ItemData[] = [
+  {
+    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
+    title: 'First Item',
+  },
+  {
+    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
+    title: 'Second Item',
+  },
+  {
+    id: '58694a0f-3da1-471f-bd96-145571e29d72',
+    title: 'Third Item',
+  },
+];
+
+type ItemProps = {
+  item: ItemData;
+  onPress: () => void;
+  backgroundColor: string;
+  textColor: string;
+};
+
+const Item = ({item, onPress, backgroundColor, textColor}: ItemProps) => (
+  <TouchableOpacity onPress={onPress} style={[styles.item, {backgroundColor}]}>
+    <Text style={[styles.title, {color: textColor}]}>{item.title}</Text>
+  </TouchableOpacity>
+);
+
+const App = () => {
+  const [selectedId, setSelectedId] = useState<string>();
+
+  const renderItem = ({item}: {item: ItemData}) => {
+    const backgroundColor = item.id === selectedId ? '#6e3b6e' : '#f9c2ff';
+    const color = item.id === selectedId ? 'white' : 'black';
+
+    return (
+      <Item
+        item={item}
+        onPress={() => setSelectedId(item.id)}
+        backgroundColor={backgroundColor}
+        textColor={color}
+      />
+    );
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <FlatList
+          data={DATA}
+          renderItem={renderItem}
+          keyExtractor={item => item.id}
+          extraData={selectedId}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: StatusBar.currentHeight || 0,
+  },
+  item: {
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+This is a convenience wrapper around [`<VirtualizedList>`](virtualizedlist.md), and thus inherits its props (as well as those of [`<ScrollView>`](scrollview.md)) that aren't explicitly listed here, along with the following caveats:
+
+- Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.
+- This is a `PureComponent` which means that it will not re-render if `props` remain shallow-equal. Make sure that everything your `renderItem` function depends on is passed as a prop (e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on changes. This includes the `data` prop and parent component state.
+- In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes.
+- By default, the list looks for a `key` prop on each item and uses that for the React key. Alternatively, you can provide a custom `keyExtractor` prop.
+
+---
+
+# Reference
+
+## Props
+
+### [VirtualizedList Props](virtualizedlist.md#props)
+
+Inherits [VirtualizedList Props](virtualizedlist.md#props).
+
+---
+
+### <div className="label required basic">Required</div> **`renderItem`**
+
+```tsx
+renderItem({
+  item: ItemT,
+  index: number,
+  separators: {
+    highlight: () => void;
+    unhighlight: () => void;
+    updateProps: (select: 'leading' | 'trailing', newProps: any) => void;
+  }
+}): JSX.Element;
+```
+
+Takes an item from `data` and renders it into the list.
+
+Provides additional metadata like `index` if you need it, as well as a more generic `separators.updateProps` function which let you set whatever props you want to change the rendering of either the leading separator or trailing separator in case the more common `highlight` and `unhighlight` (which set the `highlighted: boolean` prop) are insufficient for your use case.
+
+| Type     |
+| -------- |
+| function |
+
+- `item` (Object): The item from `data` being rendered.
+- `index` (number): The index corresponding to this item in the `data` array.
+- `separators` (Object)
+  - `highlight` (Function)
+  - `unhighlight` (Function)
+  - `updateProps` (Function)
+    - `select` (enum('leading', 'trailing'))
+    - `newProps` (Object)
+
+Example usage:
+
+```tsx
+<FlatList
+  ItemSeparatorComponent={
+    Platform.OS !== 'android' &&
+    (({highlighted}) => (
+      <View
+        style={[style.separator, highlighted && {marginLeft: 0}]}
+      />
+    ))
+  }
+  data={[{title: 'Title Text', key: 'item1'}]}
+  renderItem={({item, index, separators}) => (
+    <TouchableHighlight
+      key={item.key}
+      onPress={() => this._onPress(item)}
+      onShowUnderlay={separators.highlight}
+      onHideUnderlay={separators.unhighlight}>
+      <View style={{backgroundColor: 'white'}}>
+        <Text>{item.title}</Text>
+      </View>
+    </TouchableHighlight>
+  )}
+/>
+```
+
+---
+
+### <div className="label required basic">Required</div> **`data`**
+
+An array (or array-like list) of items to render. Other data types can be used by targeting [`VirtualizedList`](virtualizedlist.md) directly.
+
+| Type      |
+| --------- |
+| ArrayLike |
+
+---
+
+### `ItemSeparatorComponent`
+
+Rendered in between each item, but not at the top or bottom. By default, `highlighted` and `leadingItem` props are provided. `renderItem` provides `separators.highlight`/`unhighlight` which will update the `highlighted` prop, but you can also add custom props with `separators.updateProps`. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
+
+| Type                         |
+| ---------------------------- |
+| component, function, element |
+
+---
+
+### `ListEmptyComponent`
+
+Rendered when the list is empty. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
+
+| Type               |
+| ------------------ |
+| component, element |
+
+---
+
+### `ListFooterComponent`
+
+Rendered at the bottom of all the items. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
+
+| Type               |
+| ------------------ |
+| component, element |
+
+---
+
+### `ListFooterComponentStyle`
+
+Styling for internal View for `ListFooterComponent`.
+
+| Type                           |
+| ------------------------------ |
+| [View Style](view-style-props) |
+
+---
+
+### `ListHeaderComponent`
+
+Rendered at the top of all the items. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
+
+| Type               |
+| ------------------ |
+| component, element |
+
+---
+
+### `ListHeaderComponentStyle`
+
+Styling for internal View for `ListHeaderComponent`.
+
+| Type                           |
+| ------------------------------ |
+| [View Style](view-style-props) |
+
+---
+
+### `columnWrapperStyle`
+
+Optional custom style for multi-item rows generated when `numColumns > 1`.
+
+| Type                           |
+| ------------------------------ |
+| [View Style](view-style-props) |
+
+---
+
+### `extraData`
+
+A marker property for telling the list to re-render (since it implements `PureComponent`). If any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the `data` prop, stick it here and treat it immutably.
+
+| Type |
+| ---- |
+| any  |
+
+---
+
+### `getItemLayout`
+
+```tsx
+(data, index) => {length: number, offset: number, index: number}
+```
+
+`getItemLayout` is an optional optimization that allows skipping the measurement of dynamic content if you know the size (height or width) of items ahead of time. `getItemLayout` is efficient if you have fixed size items, for example:
+
+```tsx
+  getItemLayout={(data, index) => (
+    {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
+  )}
+```
+
+Adding `getItemLayout` can be a great performance boost for lists of several hundred items. Remember to include separator length (height or width) in your offset calculation if you specify `ItemSeparatorComponent`.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `horizontal`
+
+If `true`, renders items next to each other horizontally instead of stacked vertically.
+
+| Type    |
+| ------- |
+| boolean |
+
+---
+
+### `initialNumToRender`
+
+How many items to render in the initial batch. This should be enough to fill the screen but not much more. Note these items will never be unmounted as part of the windowed rendering in order to improve perceived performance of scroll-to-top actions.
+
+| Type   | Default |
+| ------ | ------- |
+| number | `10`    |
+
+---
+
+### `initialScrollIndex`
+
+Instead of starting at the top with the first item, start at `initialScrollIndex`. This disables the "scroll to top" optimization that keeps the first `initialNumToRender` items always rendered and immediately renders the items starting at this initial index. Requires `getItemLayout` to be implemented.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `inverted`
+
+Reverses the direction of scroll. Uses scale transforms of `-1`.
+
+| Type    |
+| ------- |
+| boolean |
+
+---
+
+### `keyExtractor`
+
+```tsx
+(item: ItemT, index: number) => string;
+```
+
+Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks `item.key`, then `item.id`, and then falls back to using the index, like React does.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `numColumns`
+
+Multiple columns can only be rendered with `horizontal={false}` and will zig-zag like a `flexWrap` layout. Items should all be the same height - masonry layouts are not supported.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `onRefresh`
+
+```tsx
+() => void;
+```
+
+If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the `refreshing` prop correctly.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onViewableItemsChanged`
+
+Called when the viewability of rows changes, as defined by the `viewabilityConfig` prop.
+
+| Type                                                                                                  |
+| ----------------------------------------------------------------------------------------------------- |
+| `md (callback: {changed: [ViewToken](viewtoken)[], viewableItems: [ViewToken](viewtoken)[]} => void;` |
+
+---
+
+### `progressViewOffset`
+
+Set this when offset is needed for the loading indicator to show correctly.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `refreshing`
+
+Set this true while waiting for new data from a refresh.
+
+| Type    |
+| ------- |
+| boolean |
+
+---
+
+### `removeClippedSubviews`
+
+:::warning
+Using this property may lead to bugs (missing content) in some circumstances - use at your own risk.
+:::
+
+When `true`, offscreen child views are removed from their native backing superview when offscreen. This may improve scroll performance for large lists. On Android the default value is `true`.
+
+| Type    |
+| ------- |
+| boolean |
+
+---
+
+### `viewabilityConfig`
+
+See [`ViewabilityHelper.js`](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Lists/ViewabilityHelper.js) for flow type and further documentation.
+
+| Type              |
+| ----------------- |
+| ViewabilityConfig |
+
+`viewabilityConfig` takes a type `ViewabilityConfig` an object with following properties
+
+| Property                         | Type    |
+| -------------------------------- | ------- |
+| minimumViewTime                  | number  |
+| viewAreaCoveragePercentThreshold | number  |
+| itemVisiblePercentThreshold      | number  |
+| waitForInteraction               | boolean |
+
+At least one of the `viewAreaCoveragePercentThreshold` or `itemVisiblePercentThreshold` is required. This needs to be done in the `constructor` to avoid following error ([ref](https://github.com/facebook/react-native/issues/17408)):
+
+```
+  Error: Changing viewabilityConfig on the fly is not supported
+```
+
+```tsx
+constructor (props) {
+  super(props)
+
+  this.viewabilityConfig = {
+      waitForInteraction: true,
+      viewAreaCoveragePercentThreshold: 95
+  }
+}
+```
+
+```tsx
+<FlatList
+    viewabilityConfig={this.viewabilityConfig}
+  ...
+```
+
+#### minimumViewTime
+
+Minimum amount of time (in milliseconds) that an item must be physically viewable before the viewability callback will be fired. A high number means that scrolling through content without stopping will not mark the content as viewable.
+
+#### viewAreaCoveragePercentThreshold
+
+Percent of viewport that must be covered for a partially occluded item to count as "viewable", 0-100. Fully visible items are always considered viewable. A value of 0 means that a single pixel in the viewport makes the item viewable, and a value of 100 means that an item must be either entirely visible or cover the entire viewport to count as viewable.
+
+#### itemVisiblePercentThreshold
+
+Similar to `viewAreaCoveragePercentThreshold`, but considers the percent of the item that is visible, rather than the fraction of the viewable area it covers.
+
+#### waitForInteraction
+
+Nothing is considered viewable until the user scrolls or `recordInteraction` is called after render.
+
+---
+
+### `viewabilityConfigCallbackPairs`
+
+List of `ViewabilityConfig`/`onViewableItemsChanged` pairs. A specific `onViewableItemsChanged` will be called when its corresponding `ViewabilityConfig`'s conditions are met. See `ViewabilityHelper.js` for flow type and further documentation.
+
+| Type                                   |
+| -------------------------------------- |
+| array of ViewabilityConfigCallbackPair |
+
+## Methods
+
+### `flashScrollIndicators()`
+
+```tsx
+flashScrollIndicators();
+```
+
+Displays the scroll indicators momentarily.
+
+---
+
+### `getNativeScrollRef()`
+
+```tsx
+getNativeScrollRef(): React.ElementRef<typeof ScrollViewComponent>;
+```
+
+Provides a reference to the underlying scroll component
+
+---
+
+### `getScrollResponder()`
+
+```tsx
+getScrollResponder(): ScrollResponderMixin;
+```
+
+Provides a handle to the underlying scroll responder.
+
+---
+
+### `getScrollableNode()`
+
+```tsx
+getScrollableNode(): any;
+```
+
+Provides a handle to the underlying scroll node.
+
+### `scrollToEnd()`
+
+```tsx
+scrollToEnd(params?: {animated?: boolean});
+```
+
+Scrolls to the end of the content. May be janky without `getItemLayout` prop.
+
+**Parameters:**
+
+| Name   | Type   |
+| ------ | ------ |
+| params | object |
+
+Valid `params` keys are:
+
+- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
+
+---
+
+### `scrollToIndex()`
+
+```tsx
+scrollToIndex: (params: {
+  index: number;
+  animated?: boolean;
+  viewOffset?: number;
+  viewPosition?: number;
+});
+```
+
+Scrolls to the item at the specified index such that it is positioned in the viewable area such that `viewPosition` 0 places it at the top, 1 at the bottom, and 0.5 centered in the middle.
+
+:::note
+Cannot scroll to locations outside the render window without specifying the `getItemLayout` prop.
+:::
+
+**Parameters:**
+
+| Name                                                        | Type   |
+| ----------------------------------------------------------- | ------ |
+| params <div className="label basic required">Required</div> | object |
+
+Valid `params` keys are:
+
+- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
+- 'index' (number) - The index to scroll to. Required.
+- 'viewOffset' (number) - A fixed number of pixels to offset the final target position.
+- 'viewPosition' (number) - A value of `0` places the item specified by index at the top, `1` at the bottom, and `0.5` centered in the middle.
+
+---
+
+### `scrollToItem()`
+
+```tsx
+scrollToItem(params: {
+  animated?: ?boolean,
+  item: Item,
+  viewPosition?: number,
+});
+```
+
+Requires linear scan through data - use `scrollToIndex` instead if possible.
+
+:::note
+Cannot scroll to locations outside the render window without specifying the `getItemLayout` prop.
+:::
+
+**Parameters:**
+
+| Name                                                        | Type   |
+| ----------------------------------------------------------- | ------ |
+| params <div className="label basic required">Required</div> | object |
+
+Valid `params` keys are:
+
+- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
+- 'item' (object) - The item to scroll to. Required.
+- 'viewPosition' (number)
+
+---
+
+### `scrollToOffset()`
+
+```tsx
+scrollToOffset(params: {
+  offset: number;
+  animated?: boolean;
+});
+```
+
+Scroll to a specific content pixel offset in the list.
+
+**Parameters:**
+
+| Name                                                        | Type   |
+| ----------------------------------------------------------- | ------ |
+| params <div className="label basic required">Required</div> | object |
+
+Valid `params` keys are:
+
+- 'offset' (number) - The offset to scroll to. In case of `horizontal` being true, the offset is the x-value, in any other case the offset is the y-value. Required.
+- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
diff --git a/website/versioned_docs/version-0.84/flexbox.md b/website/versioned_docs/version-0.84/flexbox.md
index 039a7bdf60b..b745c9684ef 100644
--- a/website/versioned_docs/version-0.84/flexbox.md
+++ b/website/versioned_docs/version-0.84/flexbox.md
@@ -1,2884 +1,2883 @@
----
-id: flexbox
-title: Layout with Flexbox
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-A component can specify the layout of its children using the Flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes.
-
-You will normally use a combination of `flexDirection`, `alignItems`, and `justifyContent` to achieve the right layout.
-
-:::caution
-Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions.
-The defaults are different, with `flexDirection` defaulting to `column` instead of `row`, `alignContent` defaulting to `flex-start` instead of `stretch`, `flexShrink` defaulting to `0` instead of `1`, the `flex` parameter only supporting a single number.
-:::
-
-## Flex
-
-[`flex`](layout-props#flex) will define how your items are going to **“fill”** over the available space along your main axis. Space will be divided according to each element's flex property.
-
-In the following example, the red, orange, and green views are all children in the container view that has `flex: 1` set. The red view uses `flex: 1` , the orange view uses `flex: 2`, and the green view uses `flex: 3` . **1+2+3 = 6**, which means that the red view will get `1/6` of the space, the orange `2/6` of the space, and the green `3/6` of the space.
-
-```SnackPlayer name=Flex%20Example
-import React from 'react';
-import {StyleSheet, View} from 'react-native';
-
-const Flex = () => {
-  return (
-    <View
-      style={[
-        styles.container,
-        {
-          // Try setting `flexDirection` to `"row"`.
-          flexDirection: 'column',
-        },
-      ]}>
-      <View style={{flex: 1, backgroundColor: 'red'}} />
-      <View style={{flex: 2, backgroundColor: 'darkorange'}} />
-      <View style={{flex: 3, backgroundColor: 'green'}} />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 20,
-  },
-});
-
-export default Flex;
-```
-
-## Flex Direction
-
-[`flexDirection`](layout-props#flexdirection) controls the direction in which the children of a node are laid out. This is also referred to as the main axis. The cross axis is the axis perpendicular to the main axis, or the axis which the wrapping lines are laid out in.
-
-- `column` (**default value**) Align children from top to bottom. If wrapping is enabled, then the next line will start to the right of the first item on the top of the container.
-
-- `row` Align children from left to right. If wrapping is enabled, then the next line will start under the first item on the left of the container.
-
-- `column-reverse` Align children from bottom to top. If wrapping is enabled, then the next line will start to the right of the first item on the bottom of the container.
-
-- `row-reverse` Align children from right to left. If wrapping is enabled, then the next line will start under the first item on the right of the container.
-
-You can learn more [here](https://www.yogalayout.dev/docs/styling/flex-direction).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Flex%20Direction&ext=js
-import React, {useState} from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
-
-const FlexDirectionBasics = () => {
-  const [flexDirection, setflexDirection] = useState('column');
-
-  return (
-    <PreviewLayout
-      label="flexDirection"
-      values={['column', 'row', 'column-reverse', 'row-reverse']}
-      selectedValue={flexDirection}
-      setSelectedValue={setflexDirection}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default FlexDirectionBasics;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Flex%20Direction&ext=tsx
-import React, {useState} from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const FlexDirectionBasics = () => {
-  const [flexDirection, setflexDirection] = useState('column');
-
-  return (
-    <PreviewLayout
-      label="flexDirection"
-      values={['column', 'row', 'column-reverse', 'row-reverse']}
-      selectedValue={flexDirection}
-      setSelectedValue={setflexDirection}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default FlexDirectionBasics;
-```
-
-</TabItem>
-</Tabs>
-
-## Layout Direction
-
-Layout [`direction`](layout-props#direction) specifies the direction in which children and text in a hierarchy should be laid out. Layout direction also affects what edge `start` and `end` refer to. By default, React Native lays out with LTR layout direction. In this mode `start` refers to left and `end` refers to right.
-
-- `LTR` (**default value**) Text and children are laid out from left to right. Margin and padding applied to the start of an element are applied on the left side.
-
-- `RTL` Text and children are laid out from right to left. Margin and padding applied to the start of an element are applied on the right side.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Flex%20Direction&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const DirectionLayout = () => {
-  const [direction, setDirection] = useState('ltr');
-
-  return (
-    <PreviewLayout
-      label="direction"
-      selectedValue={direction}
-      values={['ltr', 'rtl']}
-      setSelectedValue={setDirection}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default DirectionLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Flex%20Direction&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const DirectionLayout = () => {
-  const [direction, setDirection] = useState('ltr');
-
-  return (
-    <PreviewLayout
-      label="direction"
-      selectedValue={direction}
-      values={['ltr', 'rtl']}
-      setSelectedValue={setDirection}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default DirectionLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## Justify Content
-
-[`justifyContent`](layout-props#justifycontent) describes how to align children within the main axis of their container. For example, you can use this property to center a child horizontally within a container with `flexDirection` set to `row` or vertically within a container with `flexDirection` set to `column`.
-
-- `flex-start`(**default value**) Align children of a container to the start of the container's main axis.
-
-- `flex-end` Align children of a container to the end of the container's main axis.
-
-- `center` Align children of a container in the center of the container's main axis.
-
-- `space-between` Evenly space off children across the container's main axis, distributing the remaining space between the children.
-
-- `space-around` Evenly space off children across the container's main axis, distributing the remaining space around the children. Compared to `space-between`, using `space-around` will result in space being distributed to the beginning of the first child and end of the last child.
-
-- `space-evenly` Evenly distribute children within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.
-
-You can learn more [here](https://www.yogalayout.dev/docs/styling/justify-content).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Justify%20Content&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const JustifyContentBasics = () => {
-  const [justifyContent, setJustifyContent] = useState('flex-start');
-
-  return (
-    <PreviewLayout
-      label="justifyContent"
-      selectedValue={justifyContent}
-      values={[
-        'flex-start',
-        'flex-end',
-        'center',
-        'space-between',
-        'space-around',
-        'space-evenly',
-      ]}
-      setSelectedValue={setJustifyContent}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default JustifyContentBasics;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Justify%20Content&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const JustifyContentBasics = () => {
-  const [justifyContent, setJustifyContent] = useState('flex-start');
-
-  return (
-    <PreviewLayout
-      label="justifyContent"
-      selectedValue={justifyContent}
-      values={[
-        'flex-start',
-        'flex-end',
-        'center',
-        'space-between',
-        'space-around',
-        'space-evenly',
-      ]}
-      setSelectedValue={setJustifyContent}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default JustifyContentBasics;
-```
-
-</TabItem>
-</Tabs>
-
-## Align Items
-
-[`alignItems`](layout-props#alignitems) describes how to align children along the cross axis of their container. It is very similar to `justifyContent` but instead of applying to the main axis, `alignItems` applies to the cross axis.
-
-- `stretch` (**default value**) Stretch children of a container to match the `height` of the container's cross axis.
-
-- `flex-start` Align children of a container to the start of the container's cross axis.
-
-- `flex-end` Align children of a container to the end of the container's cross axis.
-
-- `center` Align children of a container in the center of the container's cross axis.
-
-- `baseline` Align children of a container along a common baseline. Individual children can be set to be the reference baseline for their parents.
-
-:::info
-For `stretch` to have an effect, children must not have a fixed dimension along the secondary axis. In the following example, setting `alignItems: stretch` does nothing until the `width: 50` is removed from the children.
-:::
-
-You can learn more [here](https://www.yogalayout.dev/docs/styling/align-items-self).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Align%20Items&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const AlignItemsLayout = () => {
-  const [alignItems, setAlignItems] = useState('stretch');
-
-  return (
-    <PreviewLayout
-      label="alignItems"
-      selectedValue={alignItems}
-      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
-      setSelectedValue={setAlignItems}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View
-        style={[
-          styles.box,
-          {
-            backgroundColor: 'steelblue',
-            width: 'auto',
-            minWidth: 50,
-          },
-        ]}
-      />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignItemsLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Align%20Items&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const AlignItemsLayout = () => {
-  const [alignItems, setAlignItems] = useState('stretch');
-
-  return (
-    <PreviewLayout
-      label="alignItems"
-      selectedValue={alignItems}
-      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
-      setSelectedValue={setAlignItems}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View
-        style={[
-          styles.box,
-          {
-            backgroundColor: 'steelblue',
-            width: 'auto',
-            minWidth: 50,
-          },
-        ]}
-      />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignItemsLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## Align Self
-
-[`alignSelf`](layout-props#alignself) has the same options and effect as `alignItems` but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent. `alignSelf` overrides any option set by the parent with `alignItems`.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Align%20Self&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const AlignSelfLayout = () => {
-  const [alignSelf, setAlignSelf] = useState('stretch');
-
-  return (
-    <PreviewLayout
-      label="alignSelf"
-      selectedValue={alignSelf}
-      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
-      setSelectedValue={setAlignSelf}>
-      <View
-        style={[
-          styles.box,
-          {
-            alignSelf,
-            width: 'auto',
-            minWidth: 50,
-            backgroundColor: 'powderblue',
-          },
-        ]}
-      />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={styles.container}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignSelfLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Align%20Self&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-import type {FlexAlignType} from 'react-native';
-
-const AlignSelfLayout = () => {
-  const [alignSelf, setAlignSelf] = useState<FlexAlignType>('stretch');
-
-  return (
-    <PreviewLayout
-      label="alignSelf"
-      selectedValue={alignSelf}
-      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
-      setSelectedValue={setAlignSelf}>
-      <View
-        style={[
-          styles.box,
-          {
-            alignSelf,
-            width: 'auto',
-            minWidth: 50,
-            backgroundColor: 'powderblue',
-          },
-        ]}
-      />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: FlexAlignType[];
-  selectedValue: string;
-  setSelectedValue: (value: FlexAlignType) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={styles.container}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignSelfLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## Align Content
-
-[alignContent](layout-props#aligncontent) defines the distribution of lines along the cross-axis. This only has effect when items are wrapped to multiple lines using `flexWrap`.
-
-- `flex-start` (**default value**) Align wrapped lines to the start of the container's cross axis.
-
-- `flex-end` Align wrapped lines to the end of the container's cross axis.
-
-- `stretch` (_default value when using Yoga on the web_) Stretch wrapped lines to match the height of the container's cross axis.
-
-- `center` Align wrapped lines in the center of the container's cross axis.
-
-- `space-between` Evenly space wrapped lines across the container's cross axis, distributing the remaining space between the lines.
-
-- `space-around` Evenly space wrapped lines across the container's cross axis, distributing the remaining space around the lines. Each end of the container has a half-sized space compared to the space between items.
-
-- `space-evenly` Evenly space wrapped lines across the container's cross axis, distributing the remaining space around the lines. Each space is the same size.
-
-You can learn more [here](https://www.yogalayout.dev/docs/styling/align-content).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Align%20Content&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const AlignContentLayout = () => {
-  const [alignContent, setAlignContent] = useState('flex-start');
-
-  return (
-    <PreviewLayout
-      label="alignContent"
-      selectedValue={alignContent}
-      values={[
-        'flex-start',
-        'flex-end',
-        'stretch',
-        'center',
-        'space-between',
-        'space-around',
-      ]}
-      setSelectedValue={setAlignContent}>
-      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
-      <View style={[styles.box, {backgroundColor: 'orange'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
-      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'purple'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexWrap: 'wrap',
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignContentLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Align%20Content&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const AlignContentLayout = () => {
-  const [alignContent, setAlignContent] = useState('flex-start');
-
-  return (
-    <PreviewLayout
-      label="alignContent"
-      selectedValue={alignContent}
-      values={[
-        'flex-start',
-        'flex-end',
-        'stretch',
-        'center',
-        'space-between',
-        'space-around',
-      ]}
-      setSelectedValue={setAlignContent}>
-      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
-      <View style={[styles.box, {backgroundColor: 'orange'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
-      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'purple'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexWrap: 'wrap',
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignContentLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## Flex Wrap
-
-The [`flexWrap`](layout-props#flexwrap) property is set on containers and it controls what happens when children overflow the size of the container along the main axis. By default, children are forced into a single line (which can shrink elements). If wrapping is allowed, items are wrapped into multiple lines along the main axis if needed.
-
-When wrapping lines, `alignContent` can be used to specify how the lines are placed in the container. Learn more [here](https://www.yogalayout.dev/docs/styling/flex-wrap).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Flex%20Wrap&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const FlexWrapLayout = () => {
-  const [flexWrap, setFlexWrap] = useState('wrap');
-
-  return (
-    <PreviewLayout
-      label="flexWrap"
-      selectedValue={flexWrap}
-      values={['wrap', 'nowrap']}
-      setSelectedValue={setFlexWrap}>
-      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
-      <View style={[styles.box, {backgroundColor: 'orange'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
-      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'purple'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default FlexWrapLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Flex%20Wrap&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const FlexWrapLayout = () => {
-  const [flexWrap, setFlexWrap] = useState('wrap');
-
-  return (
-    <PreviewLayout
-      label="flexWrap"
-      selectedValue={flexWrap}
-      values={['wrap', 'nowrap']}
-      setSelectedValue={setFlexWrap}>
-      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
-      <View style={[styles.box, {backgroundColor: 'orange'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
-      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'purple'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default FlexWrapLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## Flex Basis, Grow, and Shrink
-
-- [`flexBasis`](layout-props#flexbasis) is an axis-independent way of providing the default size of an item along the main axis. Setting the `flexBasis` of a child is similar to setting the `width` of that child if its parent is a container with `flexDirection: row` or setting the `height` of a child if its parent is a container with `flexDirection: column`. The `flexBasis` of an item is the default size of that item, the size of the item before any `flexGrow` and `flexShrink` calculations are performed.
-
-- [`flexGrow`](layout-props#flexgrow) describes how much space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
-
-  `flexGrow` accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the children’s `flexGrow` values.
-
-- [`flexShrink`](layout-props#flexshrink) describes how to shrink children along the main axis in the case in which the total size of the children overflows the size of the container on the main axis. `flexShrink` is very similar to `flexGrow` and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed.
-
-  `flexShrink` accepts any floating point value >= 0, with 0 being the default value (on the web, the default is 1). A container will shrink its children weighted by the children’s `flexShrink` values.
-
-You can learn more [here](https://www.yogalayout.dev/docs/styling/flex-basis-grow-shrink).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink&ext=js
-import React, {useState} from 'react';
-import {View, Text, TextInput, StyleSheet} from 'react-native';
-
-const App = () => {
-  const [powderblue, setPowderblue] = useState({
-    flexGrow: 0,
-    flexShrink: 1,
-    flexBasis: 'auto',
-  });
-  const [skyblue, setSkyblue] = useState({
-    flexGrow: 1,
-    flexShrink: 0,
-    flexBasis: 100,
-  });
-  const [steelblue, setSteelblue] = useState({
-    flexGrow: 0,
-    flexShrink: 1,
-    flexBasis: 200,
-  });
-  return (
-    <View style={styles.container}>
-      <View
-        style={[
-          styles.container,
-          {
-            flexDirection: 'row',
-            alignContent: 'space-between',
-          },
-        ]}>
-        <BoxInfo color="powderblue" {...powderblue} setStyle={setPowderblue} />
-        <BoxInfo color="skyblue" {...skyblue} setStyle={setSkyblue} />
-        <BoxInfo color="steelblue" {...steelblue} setStyle={setSteelblue} />
-      </View>
-      <View style={styles.previewContainer}>
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: powderblue.flexBasis,
-              flexGrow: powderblue.flexGrow,
-              flexShrink: powderblue.flexShrink,
-              backgroundColor: 'powderblue',
-            },
-          ]}
-        />
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: skyblue.flexBasis,
-              flexGrow: skyblue.flexGrow,
-              flexShrink: skyblue.flexShrink,
-              backgroundColor: 'skyblue',
-            },
-          ]}
-        />
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: steelblue.flexBasis,
-              flexGrow: steelblue.flexGrow,
-              flexShrink: steelblue.flexShrink,
-              backgroundColor: 'steelblue',
-            },
-          ]}
-        />
-      </View>
-    </View>
-  );
-};
-
-const BoxInfo = ({color, flexBasis, flexShrink, setStyle, flexGrow}) => (
-  <View style={[styles.row, {flexDirection: 'column'}]}>
-    <View
-      style={[
-        styles.boxLabel,
-        {
-          backgroundColor: color,
-        },
-      ]}>
-      <Text
-        style={{
-          color: '#fff',
-          fontWeight: '500',
-          textAlign: 'center',
-        }}>
-        Box
-      </Text>
-    </View>
-    <Text style={styles.label}>flexBasis</Text>
-    <TextInput
-      value={flexBasis}
-      style={styles.input}
-      onChangeText={fB =>
-        setStyle(value => ({
-          ...value,
-          flexBasis: isNaN(parseInt(fB, 10)) ? 'auto' : parseInt(fB, 10),
-        }))
-      }
-    />
-    <Text style={styles.label}>flexShrink</Text>
-    <TextInput
-      value={flexShrink}
-      style={styles.input}
-      onChangeText={fS =>
-        setStyle(value => ({
-          ...value,
-          flexShrink: isNaN(parseInt(fS, 10)) ? undefined : parseInt(fS, 10),
-        }))
-      }
-    />
-    <Text style={styles.label}>flexGrow</Text>
-    <TextInput
-      value={flexGrow}
-      style={styles.input}
-      onChangeText={fG =>
-        setStyle(value => ({
-          ...value,
-          flexGrow: isNaN(parseInt(fG, 10)) ? undefined : parseInt(fG, 10),
-        }))
-      }
-    />
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingHorizontal: 10,
-  },
-  box: {
-    flex: 1,
-    height: 50,
-    width: 50,
-  },
-  boxLabel: {
-    minWidth: 80,
-    padding: 8,
-    borderRadius: 4,
-    marginTop: 8,
-  },
-  label: {
-    marginTop: 6,
-    fontSize: 16,
-    fontWeight: '100',
-  },
-  previewContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    backgroundColor: 'aliceblue',
-  },
-  row: {
-    flex: 1,
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    marginBottom: 10,
-  },
-  input: {
-    borderBottomWidth: 1,
-    paddingVertical: 3,
-    width: 50,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink&ext=tsx
-import React, {useState} from 'react';
-import {View, Text, TextInput, StyleSheet} from 'react-native';
-import type {ViewStyle} from 'react-native';
-
-const App = () => {
-  const [powderblue, setPowderblue] = useState<ViewStyle>({
-    flexGrow: 0,
-    flexShrink: 1,
-    flexBasis: 'auto',
-  });
-  const [skyblue, setSkyblue] = useState<ViewStyle>({
-    flexGrow: 1,
-    flexShrink: 0,
-    flexBasis: 100,
-  });
-  const [steelblue, setSteelblue] = useState<ViewStyle>({
-    flexGrow: 0,
-    flexShrink: 1,
-    flexBasis: 200,
-  });
-  return (
-    <View style={styles.container}>
-      <View
-        style={[
-          styles.container,
-          {
-            flexDirection: 'row',
-            alignContent: 'space-between',
-          },
-        ]}>
-        <BoxInfo color="powderblue" {...powderblue} setStyle={setPowderblue} />
-        <BoxInfo color="skyblue" {...skyblue} setStyle={setSkyblue} />
-        <BoxInfo color="steelblue" {...steelblue} setStyle={setSteelblue} />
-      </View>
-      <View style={styles.previewContainer}>
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: powderblue.flexBasis,
-              flexGrow: powderblue.flexGrow,
-              flexShrink: powderblue.flexShrink,
-              backgroundColor: 'powderblue',
-            },
-          ]}
-        />
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: skyblue.flexBasis,
-              flexGrow: skyblue.flexGrow,
-              flexShrink: skyblue.flexShrink,
-              backgroundColor: 'skyblue',
-            },
-          ]}
-        />
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: steelblue.flexBasis,
-              flexGrow: steelblue.flexGrow,
-              flexShrink: steelblue.flexShrink,
-              backgroundColor: 'steelblue',
-            },
-          ]}
-        />
-      </View>
-    </View>
-  );
-};
-
-type BoxInfoProps = ViewStyle & {
-  color: string;
-  setStyle: React.Dispatch<React.SetStateAction<ViewStyle>>;
-};
-
-const BoxInfo = ({
-  color,
-  flexBasis,
-  flexShrink,
-  setStyle,
-  flexGrow,
-}: BoxInfoProps) => (
-  <View style={[styles.row, {flexDirection: 'column'}]}>
-    <View
-      style={[
-        styles.boxLabel,
-        {
-          backgroundColor: color,
-        },
-      ]}>
-      <Text
-        style={{
-          color: '#fff',
-          fontWeight: '500',
-          textAlign: 'center',
-        }}>
-        Box
-      </Text>
-    </View>
-    <Text style={styles.label}>flexBasis</Text>
-    <TextInput
-      value={String(flexBasis)}
-      style={styles.input}
-      onChangeText={fB =>
-        setStyle(value => ({
-          ...value,
-          flexBasis: isNaN(parseInt(fB, 10)) ? 'auto' : parseInt(fB, 10),
-        }))
-      }
-    />
-    <Text style={styles.label}>flexShrink</Text>
-    <TextInput
-      value={String(flexShrink)}
-      style={styles.input}
-      onChangeText={fS =>
-        setStyle(value => ({
-          ...value,
-          flexShrink: isNaN(parseInt(fS, 10)) ? undefined : parseInt(fS, 10),
-        }))
-      }
-    />
-    <Text style={styles.label}>flexGrow</Text>
-    <TextInput
-      value={String(flexGrow)}
-      style={styles.input}
-      onChangeText={fG =>
-        setStyle(value => ({
-          ...value,
-          flexGrow: isNaN(parseInt(fG, 10)) ? undefined : parseInt(fG, 10),
-        }))
-      }
-    />
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingHorizontal: 10,
-  },
-  box: {
-    flex: 1,
-    height: 50,
-    width: 50,
-  },
-  boxLabel: {
-    minWidth: 80,
-    padding: 8,
-    borderRadius: 4,
-    marginTop: 8,
-  },
-  label: {
-    marginTop: 6,
-    fontSize: 16,
-    fontWeight: '100',
-  },
-  previewContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    backgroundColor: 'aliceblue',
-  },
-  row: {
-    flex: 1,
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    marginBottom: 10,
-  },
-  input: {
-    borderBottomWidth: 1,
-    paddingVertical: 3,
-    width: 50,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-## Row Gap, Column Gap and Gap
-
-- [`rowGap`](layout-props#rowgap) sets the size of the gap (gutter) between an element's rows.
-
-- [`columnGap`](layout-props#columngap) sets the size of the gap (gutter) between an element's columns.
-
-- [`gap`](layout-props#gap) sets the size of the gap (gutter) between rows and columns. It is a shorthand for `rowGap` and `columnGap`.
-
-You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Row%20Gap%20and%20Column%20Gap&ext=js
-import React, {useState} from 'react';
-import {View, Text, StyleSheet, TextInput} from 'react-native';
-
-const RowGapAndColumnGap = () => {
-  const [rowGap, setRowGap] = useState(10);
-  const [columnGap, setColumnGap] = useState(10);
-
-  return (
-    <PreviewLayout
-      columnGap={columnGap}
-      handleColumnGapChange={setColumnGap}
-      rowGap={rowGap}
-      handleRowGapChange={setRowGap}>
-      <View style={[styles.box, styles.box1]} />
-      <View style={[styles.box, styles.box2]} />
-      <View style={[styles.box, styles.box3]} />
-      <View style={[styles.box, styles.box4]} />
-      <View style={[styles.box, styles.box5]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  children,
-  handleColumnGapChange,
-  handleRowGapChange,
-  rowGap,
-  columnGap,
-}) => (
-  <View style={styles.previewContainer}>
-    <View style={styles.inputContainer}>
-      <View style={styles.itemsCenter}>
-        <Text>Row Gap</Text>
-        <TextInput
-          style={styles.input}
-          value={rowGap}
-          onChangeText={v => handleRowGapChange(Number(v))}
-        />
-      </View>
-      <View style={styles.itemsCenter}>
-        <Text>Column Gap</Text>
-        <TextInput
-          style={styles.input}
-          value={columnGap}
-          onChangeText={v => handleColumnGapChange(Number(v))}
-        />
-      </View>
-    </View>
-    <View style={[styles.container, {rowGap, columnGap}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  itemsCenter: {alignItems: 'center'},
-  inputContainer: {
-    gap: 4,
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-  },
-  previewContainer: {padding: 10, flex: 1},
-  input: {
-    borderBottomWidth: 1,
-    paddingVertical: 3,
-    width: 50,
-    textAlign: 'center',
-  },
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-    flexWrap: 'wrap',
-    alignContent: 'flex-start',
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  box1: {
-    backgroundColor: 'orangered',
-  },
-  box2: {
-    backgroundColor: 'orange',
-  },
-  box3: {
-    backgroundColor: 'mediumseagreen',
-  },
-  box4: {
-    backgroundColor: 'deepskyblue',
-  },
-  box5: {
-    backgroundColor: 'mediumturquoise',
-  },
-});
-
-export default RowGapAndColumnGap;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Row%20Gap%20and%20Column%20Gap&ext=tsx
-import React, {useState} from 'react';
-import {View, Text, StyleSheet, TextInput} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const RowGapAndColumnGap = () => {
-  const [rowGap, setRowGap] = useState(10);
-  const [columnGap, setColumnGap] = useState(10);
-
-  return (
-    <PreviewLayout
-      columnGap={columnGap}
-      handleColumnGapChange={setColumnGap}
-      rowGap={rowGap}
-      handleRowGapChange={setRowGap}>
-      <View style={[styles.box, styles.box1]} />
-      <View style={[styles.box, styles.box2]} />
-      <View style={[styles.box, styles.box3]} />
-      <View style={[styles.box, styles.box4]} />
-      <View style={[styles.box, styles.box5]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  columnGap: number;
-  handleColumnGapChange: (gap: number) => void;
-  rowGap: number;
-  handleRowGapChange: (gap: number) => void;
-}>;
-
-const PreviewLayout = ({
-  children,
-  handleColumnGapChange,
-  handleRowGapChange,
-  rowGap,
-  columnGap,
-}: PreviewLayoutProps) => (
-  <View style={styles.previewContainer}>
-    <View style={styles.inputContainer}>
-      <View style={styles.itemsCenter}>
-        <Text>Row Gap</Text>
-        <TextInput
-          style={styles.input}
-          value={String(rowGap)}
-          onChangeText={v => handleRowGapChange(Number(v))}
-        />
-      </View>
-      <View style={styles.itemsCenter}>
-        <Text>Column Gap</Text>
-        <TextInput
-          style={styles.input}
-          value={String(columnGap)}
-          onChangeText={v => handleColumnGapChange(Number(v))}
-        />
-      </View>
-    </View>
-    <View style={[styles.container, {rowGap, columnGap}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  itemsCenter: {alignItems: 'center'},
-  inputContainer: {
-    gap: 4,
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-  },
-  previewContainer: {padding: 10, flex: 1},
-  input: {
-    borderBottomWidth: 1,
-    paddingVertical: 3,
-    width: 50,
-    textAlign: 'center',
-  },
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-    flexWrap: 'wrap',
-    alignContent: 'flex-start',
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  box1: {
-    backgroundColor: 'orangered',
-  },
-  box2: {
-    backgroundColor: 'orange',
-  },
-  box3: {
-    backgroundColor: 'mediumseagreen',
-  },
-  box4: {
-    backgroundColor: 'deepskyblue',
-  },
-  box5: {
-    backgroundColor: 'mediumturquoise',
-  },
-});
-
-export default RowGapAndColumnGap;
-```
-
-</TabItem>
-</Tabs>
-
-## Width and Height
-
-The `width` property specifies the width of an element's content area. Similarly, the `height` property specifies the height of an element's content area.
-
-Both `width` and `height` can take the following values:
-
-- `auto` (**default value**) React Native calculates the width/height for the element based on its content, whether that is other children, text, or an image.
-
-- `pixels` Defines the width/height in absolute pixels. Depending on other styles set on the component, this may or may not be the final dimension of the node.
-
-- `percentage` Defines the width or height in percentage of its parent's width or height, respectively.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Width%20and%20Height&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const WidthHeightBasics = () => {
-  const [widthType, setWidthType] = useState('auto');
-  const [heightType, setHeightType] = useState('auto');
-
-  return (
-    <PreviewLayout
-      widthType={widthType}
-      heightType={heightType}
-      widthValues={['auto', 300, '80%']}
-      heightValues={['auto', 200, '60%']}
-      setWidthType={setWidthType}
-      setHeightType={setHeightType}>
-      <View
-        style={{
-          alignSelf: 'flex-start',
-          backgroundColor: 'aliceblue',
-          height: heightType,
-          width: widthType,
-          padding: 15,
-        }}>
-        <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-        <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-        <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-      </View>
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  children,
-  widthType,
-  heightType,
-  widthValues,
-  heightValues,
-  setWidthType,
-  setHeightType,
-}) => (
-  <SafeAreaProvider>
-    <SafeAreaView style={{flex: 1, padding: 10}}>
-      <View style={styles.row}>
-        <Text style={styles.label}>width </Text>
-        {widthValues.map(value => (
-          <TouchableOpacity
-            key={value}
-            onPress={() => setWidthType(value)}
-            style={[styles.button, widthType === value && styles.selected]}>
-            <Text
-              style={[
-                styles.buttonLabel,
-                widthType === value && styles.selectedLabel,
-              ]}>
-              {value}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </View>
-      <View style={styles.row}>
-        <Text style={styles.label}>height </Text>
-        {heightValues.map(value => (
-          <TouchableOpacity
-            key={value}
-            onPress={() => setHeightType(value)}
-            style={[styles.button, heightType === value && styles.selected]}>
-            <Text
-              style={[
-                styles.buttonLabel,
-                heightType === value && styles.selectedLabel,
-              ]}>
-              {value}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </View>
-      {children}
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    padding: 8,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginRight: 10,
-    marginBottom: 10,
-  },
-  selected: {
-    backgroundColor: 'coral',
-    shadowOpacity: 0,
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default WidthHeightBasics;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Width%20and%20Height&ext=tsx
-import React, {useState, PropsWithChildren} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-type Dimension = 'auto' | `${number}%` | number;
-
-const WidthHeightBasics = () => {
-  const [widthType, setWidthType] = useState<Dimension>('auto');
-  const [heightType, setHeightType] = useState<Dimension>('auto');
-
-  return (
-    <PreviewLayout
-      widthType={widthType}
-      heightType={heightType}
-      widthValues={['auto', 300, '80%']}
-      heightValues={['auto', 200, '60%']}
-      setWidthType={setWidthType}
-      setHeightType={setHeightType}>
-      <View
-        style={{
-          alignSelf: 'flex-start',
-          backgroundColor: 'aliceblue',
-          height: heightType,
-          width: widthType,
-          padding: 15,
-        }}>
-        <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-        <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-        <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-      </View>
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  widthType: Dimension;
-  heightType: Dimension;
-  widthValues: Dimension[];
-  heightValues: Dimension[];
-  setWidthType: (value: Dimension) => void;
-  setHeightType: (value: Dimension) => void;
-}>;
-
-const PreviewLayout = ({
-  children,
-  widthType,
-  heightType,
-  widthValues,
-  heightValues,
-  setWidthType,
-  setHeightType,
-}: PreviewLayoutProps) => (
-  <SafeAreaProvider>
-    <SafeAreaView style={{flex: 1, padding: 10}}>
-      <View style={styles.row}>
-        <Text style={styles.label}>width </Text>
-        {widthValues.map(value => (
-          <TouchableOpacity
-            key={value}
-            onPress={() => setWidthType(value)}
-            style={[styles.button, widthType === value && styles.selected]}>
-            <Text
-              style={[
-                styles.buttonLabel,
-                widthType === value && styles.selectedLabel,
-              ]}>
-              {value}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </View>
-      <View style={styles.row}>
-        <Text style={styles.label}>height </Text>
-        {heightValues.map(value => (
-          <TouchableOpacity
-            key={value}
-            onPress={() => setHeightType(value)}
-            style={[styles.button, heightType === value && styles.selected]}>
-            <Text
-              style={[
-                styles.buttonLabel,
-                heightType === value && styles.selectedLabel,
-              ]}>
-              {value}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </View>
-      {children}
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    padding: 8,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginRight: 10,
-    marginBottom: 10,
-  },
-  selected: {
-    backgroundColor: 'coral',
-    shadowOpacity: 0,
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default WidthHeightBasics;
-```
-
-</TabItem>
-</Tabs>
-
-## Position
-
-The `position` type of an element defines how it is positioned relative to either itself, its parent, or its [containing block](./flexbox.md#the-containing-block).
-
-- `relative` (**default value**) By default, an element is positioned relatively. This means an element is positioned according to the normal flow of the layout, and then offset relative to that position based on the values of `top`, `right`, `bottom`, and `left`. The offset does not affect the position of any sibling or parent elements.
-
-- `absolute` When positioned absolutely, an element doesn't take part in the normal layout flow. It is instead laid out independent of its siblings. The position is determined based on the `top`, `right`, `bottom`, and `left` values. These values will position the element relative to its containing block.
-
-- `static` When positioned statically, an element is positioned according to the normal flow of layout, and will ignore the `top`, `right`, `bottom`, and `left` values. This `position` will also cause the element to not form a containing block for absolute descendants, unless some other superceding style prop is present (e.g. `transform`). This allows `absolute` elements to be positioned to something that is not their parent. Note that **`static` is only available on the New Architecture**.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Position&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const PositionLayout = () => {
-  const [position, setPosition] = useState('relative');
-
-  return (
-    <PreviewLayout
-      label="position"
-      selectedValue={position}
-      values={['relative', 'absolute', 'static']}
-      setSelectedValue={setPosition}>
-      <View
-        style={[
-          styles.box,
-          {
-            top: 25,
-            left: 25,
-            position,
-            backgroundColor: 'powderblue',
-          },
-        ]}
-      />
-      <View
-        style={[
-          styles.box,
-          {
-            top: 50,
-            left: 50,
-            position,
-            backgroundColor: 'skyblue',
-          },
-        ]}
-      />
-      <View
-        style={[
-          styles.box,
-          {
-            top: 75,
-            left: 75,
-            position,
-            backgroundColor: 'steelblue',
-          },
-        ]}
-      />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={styles.container}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default PositionLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Position&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const PositionLayout = () => {
-  const [position, setPosition] = useState<'relative' | 'absolute' | 'static'>(
-    'relative',
-  );
-
-  return (
-    <PreviewLayout
-      label="position"
-      selectedValue={position}
-      values={['relative', 'absolute', 'static']}
-      setSelectedValue={setPosition}>
-      <View
-        style={[
-          styles.box,
-          {
-            top: 25,
-            left: 25,
-            position,
-            backgroundColor: 'powderblue',
-          },
-        ]}
-      />
-      <View
-        style={[
-          styles.box,
-          {
-            top: 50,
-            left: 50,
-            position,
-            backgroundColor: 'skyblue',
-          },
-        ]}
-      />
-      <View
-        style={[
-          styles.box,
-          {
-            top: 75,
-            left: 75,
-            position,
-            backgroundColor: 'steelblue',
-          },
-        ]}
-      />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: Array<'relative' | 'absolute' | 'static'>;
-  selectedValue: string;
-  setSelectedValue: (value: 'relative' | 'absolute' | 'static') => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={styles.container}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default PositionLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## The Containing Block
-
-The containing block of an element is an ancestor element which controls its position and size.
-The way containing blocks work in React Native is very similar to [how they work on the web](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block), with some simplifications due to the lack of some web features.
-
-The `top`, `right`, `bottom`, and `left` values of an absolutely positioned element will be
-relative to its containing block.
-
-Percentage lengths (e.g.: `width: '50%'` or `padding: '10%'`) applied to absolutely positioned elements will be calculated relatively to the size of its containing block. For example, if the containing block is 100 points wide, then `width: 50%` on an absolutely positioned element will cause it to be 50 points wide.
-
-The following list will help you determine the containing block of any given element:
-
-- If that element has a `position` type of `relative` or `static`, then its containing block is its parent.
-- If that element has a `position` type of `absolute`, then its containing block is the nearest ancestor in which one of the following is true:
-  - It has a `position` type other than `static`
-  - It has a `transform`
-
-## Going Deeper
-
-Check out the interactive [yoga playground](https://www.yogalayout.dev/playground) that you can use to get a better understanding of flexbox.
-
-We've covered the basics, but there are many other styles you may need for layouts. The full list of props that control layout is documented [here](./layout-props.md).
-
-Additionally, you can see some examples from [Wix Engineers](https://medium.com/wix-engineering/the-full-react-native-layout-cheat-sheet-a4147802405c).
+---
+id: flexbox
+title: Layout with Flexbox
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+A component can specify the layout of its children using the Flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes.
+
+You will normally use a combination of `flexDirection`, `alignItems`, and `justifyContent` to achieve the right layout.
+
+:::caution
+Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions.
+The defaults are different, with `flexDirection` defaulting to `column` instead of `row`, `alignContent` defaulting to `flex-start` instead of `stretch`, `flexShrink` defaulting to `0` instead of `1`, the `flex` parameter only supporting a single number.
+:::
+
+## Flex
+
+[`flex`](layout-props#flex) will define how your items are going to **“fill”** over the available space along your main axis. Space will be divided according to each element's flex property.
+
+In the following example, the red, orange, and green views are all children in the container view that has `flex: 1` set. The red view uses `flex: 1` , the orange view uses `flex: 2`, and the green view uses `flex: 3` . **1+2+3 = 6**, which means that the red view will get `1/6` of the space, the orange `2/6` of the space, and the green `3/6` of the space.
+
+```SnackPlayer name=Flex%20Example
+import {StyleSheet, View} from 'react-native';
+
+const Flex = () => {
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          // Try setting `flexDirection` to `"row"`.
+          flexDirection: 'column',
+        },
+      ]}>
+      <View style={{flex: 1, backgroundColor: 'red'}} />
+      <View style={{flex: 2, backgroundColor: 'darkorange'}} />
+      <View style={{flex: 3, backgroundColor: 'green'}} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+  },
+});
+
+export default Flex;
+```
+
+## Flex Direction
+
+[`flexDirection`](layout-props#flexdirection) controls the direction in which the children of a node are laid out. This is also referred to as the main axis. The cross axis is the axis perpendicular to the main axis, or the axis which the wrapping lines are laid out in.
+
+- `column` (**default value**) Align children from top to bottom. If wrapping is enabled, then the next line will start to the right of the first item on the top of the container.
+
+- `row` Align children from left to right. If wrapping is enabled, then the next line will start under the first item on the left of the container.
+
+- `column-reverse` Align children from bottom to top. If wrapping is enabled, then the next line will start to the right of the first item on the bottom of the container.
+
+- `row-reverse` Align children from right to left. If wrapping is enabled, then the next line will start under the first item on the right of the container.
+
+You can learn more [here](https://www.yogalayout.dev/docs/styling/flex-direction).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Flex%20Direction&ext=js
+import {useState} from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+
+const FlexDirectionBasics = () => {
+  const [flexDirection, setflexDirection] = useState('column');
+
+  return (
+    <PreviewLayout
+      label="flexDirection"
+      values={['column', 'row', 'column-reverse', 'row-reverse']}
+      selectedValue={flexDirection}
+      setSelectedValue={setflexDirection}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default FlexDirectionBasics;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Flex%20Direction&ext=tsx
+import {useState} from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const FlexDirectionBasics = () => {
+  const [flexDirection, setflexDirection] = useState('column');
+
+  return (
+    <PreviewLayout
+      label="flexDirection"
+      values={['column', 'row', 'column-reverse', 'row-reverse']}
+      selectedValue={flexDirection}
+      setSelectedValue={setflexDirection}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default FlexDirectionBasics;
+```
+
+</TabItem>
+</Tabs>
+
+## Layout Direction
+
+Layout [`direction`](layout-props#direction) specifies the direction in which children and text in a hierarchy should be laid out. Layout direction also affects what edge `start` and `end` refer to. By default, React Native lays out with LTR layout direction. In this mode `start` refers to left and `end` refers to right.
+
+- `LTR` (**default value**) Text and children are laid out from left to right. Margin and padding applied to the start of an element are applied on the left side.
+
+- `RTL` Text and children are laid out from right to left. Margin and padding applied to the start of an element are applied on the right side.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Flex%20Direction&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const DirectionLayout = () => {
+  const [direction, setDirection] = useState('ltr');
+
+  return (
+    <PreviewLayout
+      label="direction"
+      selectedValue={direction}
+      values={['ltr', 'rtl']}
+      setSelectedValue={setDirection}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default DirectionLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Flex%20Direction&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const DirectionLayout = () => {
+  const [direction, setDirection] = useState('ltr');
+
+  return (
+    <PreviewLayout
+      label="direction"
+      selectedValue={direction}
+      values={['ltr', 'rtl']}
+      setSelectedValue={setDirection}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default DirectionLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## Justify Content
+
+[`justifyContent`](layout-props#justifycontent) describes how to align children within the main axis of their container. For example, you can use this property to center a child horizontally within a container with `flexDirection` set to `row` or vertically within a container with `flexDirection` set to `column`.
+
+- `flex-start`(**default value**) Align children of a container to the start of the container's main axis.
+
+- `flex-end` Align children of a container to the end of the container's main axis.
+
+- `center` Align children of a container in the center of the container's main axis.
+
+- `space-between` Evenly space off children across the container's main axis, distributing the remaining space between the children.
+
+- `space-around` Evenly space off children across the container's main axis, distributing the remaining space around the children. Compared to `space-between`, using `space-around` will result in space being distributed to the beginning of the first child and end of the last child.
+
+- `space-evenly` Evenly distribute children within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.
+
+You can learn more [here](https://www.yogalayout.dev/docs/styling/justify-content).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Justify%20Content&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const JustifyContentBasics = () => {
+  const [justifyContent, setJustifyContent] = useState('flex-start');
+
+  return (
+    <PreviewLayout
+      label="justifyContent"
+      selectedValue={justifyContent}
+      values={[
+        'flex-start',
+        'flex-end',
+        'center',
+        'space-between',
+        'space-around',
+        'space-evenly',
+      ]}
+      setSelectedValue={setJustifyContent}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default JustifyContentBasics;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Justify%20Content&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const JustifyContentBasics = () => {
+  const [justifyContent, setJustifyContent] = useState('flex-start');
+
+  return (
+    <PreviewLayout
+      label="justifyContent"
+      selectedValue={justifyContent}
+      values={[
+        'flex-start',
+        'flex-end',
+        'center',
+        'space-between',
+        'space-around',
+        'space-evenly',
+      ]}
+      setSelectedValue={setJustifyContent}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default JustifyContentBasics;
+```
+
+</TabItem>
+</Tabs>
+
+## Align Items
+
+[`alignItems`](layout-props#alignitems) describes how to align children along the cross axis of their container. It is very similar to `justifyContent` but instead of applying to the main axis, `alignItems` applies to the cross axis.
+
+- `stretch` (**default value**) Stretch children of a container to match the `height` of the container's cross axis.
+
+- `flex-start` Align children of a container to the start of the container's cross axis.
+
+- `flex-end` Align children of a container to the end of the container's cross axis.
+
+- `center` Align children of a container in the center of the container's cross axis.
+
+- `baseline` Align children of a container along a common baseline. Individual children can be set to be the reference baseline for their parents.
+
+:::info
+For `stretch` to have an effect, children must not have a fixed dimension along the secondary axis. In the following example, setting `alignItems: stretch` does nothing until the `width: 50` is removed from the children.
+:::
+
+You can learn more [here](https://www.yogalayout.dev/docs/styling/align-items-self).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Align%20Items&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const AlignItemsLayout = () => {
+  const [alignItems, setAlignItems] = useState('stretch');
+
+  return (
+    <PreviewLayout
+      label="alignItems"
+      selectedValue={alignItems}
+      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
+      setSelectedValue={setAlignItems}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View
+        style={[
+          styles.box,
+          {
+            backgroundColor: 'steelblue',
+            width: 'auto',
+            minWidth: 50,
+          },
+        ]}
+      />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignItemsLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Align%20Items&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const AlignItemsLayout = () => {
+  const [alignItems, setAlignItems] = useState('stretch');
+
+  return (
+    <PreviewLayout
+      label="alignItems"
+      selectedValue={alignItems}
+      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
+      setSelectedValue={setAlignItems}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View
+        style={[
+          styles.box,
+          {
+            backgroundColor: 'steelblue',
+            width: 'auto',
+            minWidth: 50,
+          },
+        ]}
+      />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignItemsLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## Align Self
+
+[`alignSelf`](layout-props#alignself) has the same options and effect as `alignItems` but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent. `alignSelf` overrides any option set by the parent with `alignItems`.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Align%20Self&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const AlignSelfLayout = () => {
+  const [alignSelf, setAlignSelf] = useState('stretch');
+
+  return (
+    <PreviewLayout
+      label="alignSelf"
+      selectedValue={alignSelf}
+      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
+      setSelectedValue={setAlignSelf}>
+      <View
+        style={[
+          styles.box,
+          {
+            alignSelf,
+            width: 'auto',
+            minWidth: 50,
+            backgroundColor: 'powderblue',
+          },
+        ]}
+      />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={styles.container}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignSelfLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Align%20Self&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+import type {FlexAlignType} from 'react-native';
+
+const AlignSelfLayout = () => {
+  const [alignSelf, setAlignSelf] = useState<FlexAlignType>('stretch');
+
+  return (
+    <PreviewLayout
+      label="alignSelf"
+      selectedValue={alignSelf}
+      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
+      setSelectedValue={setAlignSelf}>
+      <View
+        style={[
+          styles.box,
+          {
+            alignSelf,
+            width: 'auto',
+            minWidth: 50,
+            backgroundColor: 'powderblue',
+          },
+        ]}
+      />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: FlexAlignType[];
+  selectedValue: string;
+  setSelectedValue: (value: FlexAlignType) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={styles.container}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignSelfLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## Align Content
+
+[alignContent](layout-props#aligncontent) defines the distribution of lines along the cross-axis. This only has effect when items are wrapped to multiple lines using `flexWrap`.
+
+- `flex-start` (**default value**) Align wrapped lines to the start of the container's cross axis.
+
+- `flex-end` Align wrapped lines to the end of the container's cross axis.
+
+- `stretch` (_default value when using Yoga on the web_) Stretch wrapped lines to match the height of the container's cross axis.
+
+- `center` Align wrapped lines in the center of the container's cross axis.
+
+- `space-between` Evenly space wrapped lines across the container's cross axis, distributing the remaining space between the lines.
+
+- `space-around` Evenly space wrapped lines across the container's cross axis, distributing the remaining space around the lines. Each end of the container has a half-sized space compared to the space between items.
+
+- `space-evenly` Evenly space wrapped lines across the container's cross axis, distributing the remaining space around the lines. Each space is the same size.
+
+You can learn more [here](https://www.yogalayout.dev/docs/styling/align-content).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Align%20Content&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const AlignContentLayout = () => {
+  const [alignContent, setAlignContent] = useState('flex-start');
+
+  return (
+    <PreviewLayout
+      label="alignContent"
+      selectedValue={alignContent}
+      values={[
+        'flex-start',
+        'flex-end',
+        'stretch',
+        'center',
+        'space-between',
+        'space-around',
+      ]}
+      setSelectedValue={setAlignContent}>
+      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
+      <View style={[styles.box, {backgroundColor: 'orange'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
+      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'purple'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexWrap: 'wrap',
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignContentLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Align%20Content&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const AlignContentLayout = () => {
+  const [alignContent, setAlignContent] = useState('flex-start');
+
+  return (
+    <PreviewLayout
+      label="alignContent"
+      selectedValue={alignContent}
+      values={[
+        'flex-start',
+        'flex-end',
+        'stretch',
+        'center',
+        'space-between',
+        'space-around',
+      ]}
+      setSelectedValue={setAlignContent}>
+      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
+      <View style={[styles.box, {backgroundColor: 'orange'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
+      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'purple'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexWrap: 'wrap',
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignContentLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## Flex Wrap
+
+The [`flexWrap`](layout-props#flexwrap) property is set on containers and it controls what happens when children overflow the size of the container along the main axis. By default, children are forced into a single line (which can shrink elements). If wrapping is allowed, items are wrapped into multiple lines along the main axis if needed.
+
+When wrapping lines, `alignContent` can be used to specify how the lines are placed in the container. Learn more [here](https://www.yogalayout.dev/docs/styling/flex-wrap).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Flex%20Wrap&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const FlexWrapLayout = () => {
+  const [flexWrap, setFlexWrap] = useState('wrap');
+
+  return (
+    <PreviewLayout
+      label="flexWrap"
+      selectedValue={flexWrap}
+      values={['wrap', 'nowrap']}
+      setSelectedValue={setFlexWrap}>
+      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
+      <View style={[styles.box, {backgroundColor: 'orange'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
+      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'purple'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default FlexWrapLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Flex%20Wrap&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const FlexWrapLayout = () => {
+  const [flexWrap, setFlexWrap] = useState('wrap');
+
+  return (
+    <PreviewLayout
+      label="flexWrap"
+      selectedValue={flexWrap}
+      values={['wrap', 'nowrap']}
+      setSelectedValue={setFlexWrap}>
+      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
+      <View style={[styles.box, {backgroundColor: 'orange'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
+      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'purple'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default FlexWrapLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## Flex Basis, Grow, and Shrink
+
+- [`flexBasis`](layout-props#flexbasis) is an axis-independent way of providing the default size of an item along the main axis. Setting the `flexBasis` of a child is similar to setting the `width` of that child if its parent is a container with `flexDirection: row` or setting the `height` of a child if its parent is a container with `flexDirection: column`. The `flexBasis` of an item is the default size of that item, the size of the item before any `flexGrow` and `flexShrink` calculations are performed.
+
+- [`flexGrow`](layout-props#flexgrow) describes how much space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
+
+  `flexGrow` accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the children’s `flexGrow` values.
+
+- [`flexShrink`](layout-props#flexshrink) describes how to shrink children along the main axis in the case in which the total size of the children overflows the size of the container on the main axis. `flexShrink` is very similar to `flexGrow` and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed.
+
+  `flexShrink` accepts any floating point value >= 0, with 0 being the default value (on the web, the default is 1). A container will shrink its children weighted by the children’s `flexShrink` values.
+
+You can learn more [here](https://www.yogalayout.dev/docs/styling/flex-basis-grow-shrink).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink&ext=js
+import {useState} from 'react';
+import {View, Text, TextInput, StyleSheet} from 'react-native';
+
+const App = () => {
+  const [powderblue, setPowderblue] = useState({
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: 'auto',
+  });
+  const [skyblue, setSkyblue] = useState({
+    flexGrow: 1,
+    flexShrink: 0,
+    flexBasis: 100,
+  });
+  const [steelblue, setSteelblue] = useState({
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: 200,
+  });
+  return (
+    <View style={styles.container}>
+      <View
+        style={[
+          styles.container,
+          {
+            flexDirection: 'row',
+            alignContent: 'space-between',
+          },
+        ]}>
+        <BoxInfo color="powderblue" {...powderblue} setStyle={setPowderblue} />
+        <BoxInfo color="skyblue" {...skyblue} setStyle={setSkyblue} />
+        <BoxInfo color="steelblue" {...steelblue} setStyle={setSteelblue} />
+      </View>
+      <View style={styles.previewContainer}>
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: powderblue.flexBasis,
+              flexGrow: powderblue.flexGrow,
+              flexShrink: powderblue.flexShrink,
+              backgroundColor: 'powderblue',
+            },
+          ]}
+        />
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: skyblue.flexBasis,
+              flexGrow: skyblue.flexGrow,
+              flexShrink: skyblue.flexShrink,
+              backgroundColor: 'skyblue',
+            },
+          ]}
+        />
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: steelblue.flexBasis,
+              flexGrow: steelblue.flexGrow,
+              flexShrink: steelblue.flexShrink,
+              backgroundColor: 'steelblue',
+            },
+          ]}
+        />
+      </View>
+    </View>
+  );
+};
+
+const BoxInfo = ({color, flexBasis, flexShrink, setStyle, flexGrow}) => (
+  <View style={[styles.row, {flexDirection: 'column'}]}>
+    <View
+      style={[
+        styles.boxLabel,
+        {
+          backgroundColor: color,
+        },
+      ]}>
+      <Text
+        style={{
+          color: '#fff',
+          fontWeight: '500',
+          textAlign: 'center',
+        }}>
+        Box
+      </Text>
+    </View>
+    <Text style={styles.label}>flexBasis</Text>
+    <TextInput
+      value={flexBasis}
+      style={styles.input}
+      onChangeText={fB =>
+        setStyle(value => ({
+          ...value,
+          flexBasis: isNaN(parseInt(fB, 10)) ? 'auto' : parseInt(fB, 10),
+        }))
+      }
+    />
+    <Text style={styles.label}>flexShrink</Text>
+    <TextInput
+      value={flexShrink}
+      style={styles.input}
+      onChangeText={fS =>
+        setStyle(value => ({
+          ...value,
+          flexShrink: isNaN(parseInt(fS, 10)) ? undefined : parseInt(fS, 10),
+        }))
+      }
+    />
+    <Text style={styles.label}>flexGrow</Text>
+    <TextInput
+      value={flexGrow}
+      style={styles.input}
+      onChangeText={fG =>
+        setStyle(value => ({
+          ...value,
+          flexGrow: isNaN(parseInt(fG, 10)) ? undefined : parseInt(fG, 10),
+        }))
+      }
+    />
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 10,
+  },
+  box: {
+    flex: 1,
+    height: 50,
+    width: 50,
+  },
+  boxLabel: {
+    minWidth: 80,
+    padding: 8,
+    borderRadius: 4,
+    marginTop: 8,
+  },
+  label: {
+    marginTop: 6,
+    fontSize: 16,
+    fontWeight: '100',
+  },
+  previewContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    backgroundColor: 'aliceblue',
+  },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  input: {
+    borderBottomWidth: 1,
+    paddingVertical: 3,
+    width: 50,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink&ext=tsx
+import {useState, type Dispatch, type SetStateAction} from 'react';
+import {View, Text, TextInput, StyleSheet} from 'react-native';
+import type {ViewStyle} from 'react-native';
+
+const App = () => {
+  const [powderblue, setPowderblue] = useState<ViewStyle>({
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: 'auto',
+  });
+  const [skyblue, setSkyblue] = useState<ViewStyle>({
+    flexGrow: 1,
+    flexShrink: 0,
+    flexBasis: 100,
+  });
+  const [steelblue, setSteelblue] = useState<ViewStyle>({
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: 200,
+  });
+  return (
+    <View style={styles.container}>
+      <View
+        style={[
+          styles.container,
+          {
+            flexDirection: 'row',
+            alignContent: 'space-between',
+          },
+        ]}>
+        <BoxInfo color="powderblue" {...powderblue} setStyle={setPowderblue} />
+        <BoxInfo color="skyblue" {...skyblue} setStyle={setSkyblue} />
+        <BoxInfo color="steelblue" {...steelblue} setStyle={setSteelblue} />
+      </View>
+      <View style={styles.previewContainer}>
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: powderblue.flexBasis,
+              flexGrow: powderblue.flexGrow,
+              flexShrink: powderblue.flexShrink,
+              backgroundColor: 'powderblue',
+            },
+          ]}
+        />
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: skyblue.flexBasis,
+              flexGrow: skyblue.flexGrow,
+              flexShrink: skyblue.flexShrink,
+              backgroundColor: 'skyblue',
+            },
+          ]}
+        />
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: steelblue.flexBasis,
+              flexGrow: steelblue.flexGrow,
+              flexShrink: steelblue.flexShrink,
+              backgroundColor: 'steelblue',
+            },
+          ]}
+        />
+      </View>
+    </View>
+  );
+};
+
+type BoxInfoProps = ViewStyle & {
+  color: string;
+  setStyle: Dispatch<SetStateAction<ViewStyle>>;
+};
+
+const BoxInfo = ({
+  color,
+  flexBasis,
+  flexShrink,
+  setStyle,
+  flexGrow,
+}: BoxInfoProps) => (
+  <View style={[styles.row, {flexDirection: 'column'}]}>
+    <View
+      style={[
+        styles.boxLabel,
+        {
+          backgroundColor: color,
+        },
+      ]}>
+      <Text
+        style={{
+          color: '#fff',
+          fontWeight: '500',
+          textAlign: 'center',
+        }}>
+        Box
+      </Text>
+    </View>
+    <Text style={styles.label}>flexBasis</Text>
+    <TextInput
+      value={String(flexBasis)}
+      style={styles.input}
+      onChangeText={fB =>
+        setStyle(value => ({
+          ...value,
+          flexBasis: isNaN(parseInt(fB, 10)) ? 'auto' : parseInt(fB, 10),
+        }))
+      }
+    />
+    <Text style={styles.label}>flexShrink</Text>
+    <TextInput
+      value={String(flexShrink)}
+      style={styles.input}
+      onChangeText={fS =>
+        setStyle(value => ({
+          ...value,
+          flexShrink: isNaN(parseInt(fS, 10)) ? undefined : parseInt(fS, 10),
+        }))
+      }
+    />
+    <Text style={styles.label}>flexGrow</Text>
+    <TextInput
+      value={String(flexGrow)}
+      style={styles.input}
+      onChangeText={fG =>
+        setStyle(value => ({
+          ...value,
+          flexGrow: isNaN(parseInt(fG, 10)) ? undefined : parseInt(fG, 10),
+        }))
+      }
+    />
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 10,
+  },
+  box: {
+    flex: 1,
+    height: 50,
+    width: 50,
+  },
+  boxLabel: {
+    minWidth: 80,
+    padding: 8,
+    borderRadius: 4,
+    marginTop: 8,
+  },
+  label: {
+    marginTop: 6,
+    fontSize: 16,
+    fontWeight: '100',
+  },
+  previewContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    backgroundColor: 'aliceblue',
+  },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  input: {
+    borderBottomWidth: 1,
+    paddingVertical: 3,
+    width: 50,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+## Row Gap, Column Gap and Gap
+
+- [`rowGap`](layout-props#rowgap) sets the size of the gap (gutter) between an element's rows.
+
+- [`columnGap`](layout-props#columngap) sets the size of the gap (gutter) between an element's columns.
+
+- [`gap`](layout-props#gap) sets the size of the gap (gutter) between rows and columns. It is a shorthand for `rowGap` and `columnGap`.
+
+You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Row%20Gap%20and%20Column%20Gap&ext=js
+import {useState} from 'react';
+import {View, Text, StyleSheet, TextInput} from 'react-native';
+
+const RowGapAndColumnGap = () => {
+  const [rowGap, setRowGap] = useState(10);
+  const [columnGap, setColumnGap] = useState(10);
+
+  return (
+    <PreviewLayout
+      columnGap={columnGap}
+      handleColumnGapChange={setColumnGap}
+      rowGap={rowGap}
+      handleRowGapChange={setRowGap}>
+      <View style={[styles.box, styles.box1]} />
+      <View style={[styles.box, styles.box2]} />
+      <View style={[styles.box, styles.box3]} />
+      <View style={[styles.box, styles.box4]} />
+      <View style={[styles.box, styles.box5]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  children,
+  handleColumnGapChange,
+  handleRowGapChange,
+  rowGap,
+  columnGap,
+}) => (
+  <View style={styles.previewContainer}>
+    <View style={styles.inputContainer}>
+      <View style={styles.itemsCenter}>
+        <Text>Row Gap</Text>
+        <TextInput
+          style={styles.input}
+          value={rowGap}
+          onChangeText={v => handleRowGapChange(Number(v))}
+        />
+      </View>
+      <View style={styles.itemsCenter}>
+        <Text>Column Gap</Text>
+        <TextInput
+          style={styles.input}
+          value={columnGap}
+          onChangeText={v => handleColumnGapChange(Number(v))}
+        />
+      </View>
+    </View>
+    <View style={[styles.container, {rowGap, columnGap}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  itemsCenter: {alignItems: 'center'},
+  inputContainer: {
+    gap: 4,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+  previewContainer: {padding: 10, flex: 1},
+  input: {
+    borderBottomWidth: 1,
+    paddingVertical: 3,
+    width: 50,
+    textAlign: 'center',
+  },
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+    flexWrap: 'wrap',
+    alignContent: 'flex-start',
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  box1: {
+    backgroundColor: 'orangered',
+  },
+  box2: {
+    backgroundColor: 'orange',
+  },
+  box3: {
+    backgroundColor: 'mediumseagreen',
+  },
+  box4: {
+    backgroundColor: 'deepskyblue',
+  },
+  box5: {
+    backgroundColor: 'mediumturquoise',
+  },
+});
+
+export default RowGapAndColumnGap;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Row%20Gap%20and%20Column%20Gap&ext=tsx
+import {useState} from 'react';
+import {View, Text, StyleSheet, TextInput} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const RowGapAndColumnGap = () => {
+  const [rowGap, setRowGap] = useState(10);
+  const [columnGap, setColumnGap] = useState(10);
+
+  return (
+    <PreviewLayout
+      columnGap={columnGap}
+      handleColumnGapChange={setColumnGap}
+      rowGap={rowGap}
+      handleRowGapChange={setRowGap}>
+      <View style={[styles.box, styles.box1]} />
+      <View style={[styles.box, styles.box2]} />
+      <View style={[styles.box, styles.box3]} />
+      <View style={[styles.box, styles.box4]} />
+      <View style={[styles.box, styles.box5]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  columnGap: number;
+  handleColumnGapChange: (gap: number) => void;
+  rowGap: number;
+  handleRowGapChange: (gap: number) => void;
+}>;
+
+const PreviewLayout = ({
+  children,
+  handleColumnGapChange,
+  handleRowGapChange,
+  rowGap,
+  columnGap,
+}: PreviewLayoutProps) => (
+  <View style={styles.previewContainer}>
+    <View style={styles.inputContainer}>
+      <View style={styles.itemsCenter}>
+        <Text>Row Gap</Text>
+        <TextInput
+          style={styles.input}
+          value={String(rowGap)}
+          onChangeText={v => handleRowGapChange(Number(v))}
+        />
+      </View>
+      <View style={styles.itemsCenter}>
+        <Text>Column Gap</Text>
+        <TextInput
+          style={styles.input}
+          value={String(columnGap)}
+          onChangeText={v => handleColumnGapChange(Number(v))}
+        />
+      </View>
+    </View>
+    <View style={[styles.container, {rowGap, columnGap}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  itemsCenter: {alignItems: 'center'},
+  inputContainer: {
+    gap: 4,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+  previewContainer: {padding: 10, flex: 1},
+  input: {
+    borderBottomWidth: 1,
+    paddingVertical: 3,
+    width: 50,
+    textAlign: 'center',
+  },
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+    flexWrap: 'wrap',
+    alignContent: 'flex-start',
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  box1: {
+    backgroundColor: 'orangered',
+  },
+  box2: {
+    backgroundColor: 'orange',
+  },
+  box3: {
+    backgroundColor: 'mediumseagreen',
+  },
+  box4: {
+    backgroundColor: 'deepskyblue',
+  },
+  box5: {
+    backgroundColor: 'mediumturquoise',
+  },
+});
+
+export default RowGapAndColumnGap;
+```
+
+</TabItem>
+</Tabs>
+
+## Width and Height
+
+The `width` property specifies the width of an element's content area. Similarly, the `height` property specifies the height of an element's content area.
+
+Both `width` and `height` can take the following values:
+
+- `auto` (**default value**) React Native calculates the width/height for the element based on its content, whether that is other children, text, or an image.
+
+- `pixels` Defines the width/height in absolute pixels. Depending on other styles set on the component, this may or may not be the final dimension of the node.
+
+- `percentage` Defines the width or height in percentage of its parent's width or height, respectively.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Width%20and%20Height&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const WidthHeightBasics = () => {
+  const [widthType, setWidthType] = useState('auto');
+  const [heightType, setHeightType] = useState('auto');
+
+  return (
+    <PreviewLayout
+      widthType={widthType}
+      heightType={heightType}
+      widthValues={['auto', 300, '80%']}
+      heightValues={['auto', 200, '60%']}
+      setWidthType={setWidthType}
+      setHeightType={setHeightType}>
+      <View
+        style={{
+          alignSelf: 'flex-start',
+          backgroundColor: 'aliceblue',
+          height: heightType,
+          width: widthType,
+          padding: 15,
+        }}>
+        <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+        <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+        <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+      </View>
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  children,
+  widthType,
+  heightType,
+  widthValues,
+  heightValues,
+  setWidthType,
+  setHeightType,
+}) => (
+  <SafeAreaProvider>
+    <SafeAreaView style={{flex: 1, padding: 10}}>
+      <View style={styles.row}>
+        <Text style={styles.label}>width </Text>
+        {widthValues.map(value => (
+          <TouchableOpacity
+            key={value}
+            onPress={() => setWidthType(value)}
+            style={[styles.button, widthType === value && styles.selected]}>
+            <Text
+              style={[
+                styles.buttonLabel,
+                widthType === value && styles.selectedLabel,
+              ]}>
+              {value}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+      <View style={styles.row}>
+        <Text style={styles.label}>height </Text>
+        {heightValues.map(value => (
+          <TouchableOpacity
+            key={value}
+            onPress={() => setHeightType(value)}
+            style={[styles.button, heightType === value && styles.selected]}>
+            <Text
+              style={[
+                styles.buttonLabel,
+                heightType === value && styles.selectedLabel,
+              ]}>
+              {value}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+      {children}
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    padding: 8,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginRight: 10,
+    marginBottom: 10,
+  },
+  selected: {
+    backgroundColor: 'coral',
+    shadowOpacity: 0,
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default WidthHeightBasics;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Width%20and%20Height&ext=tsx
+import {useState, PropsWithChildren} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+type Dimension = 'auto' | `${number}%` | number;
+
+const WidthHeightBasics = () => {
+  const [widthType, setWidthType] = useState<Dimension>('auto');
+  const [heightType, setHeightType] = useState<Dimension>('auto');
+
+  return (
+    <PreviewLayout
+      widthType={widthType}
+      heightType={heightType}
+      widthValues={['auto', 300, '80%']}
+      heightValues={['auto', 200, '60%']}
+      setWidthType={setWidthType}
+      setHeightType={setHeightType}>
+      <View
+        style={{
+          alignSelf: 'flex-start',
+          backgroundColor: 'aliceblue',
+          height: heightType,
+          width: widthType,
+          padding: 15,
+        }}>
+        <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+        <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+        <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+      </View>
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  widthType: Dimension;
+  heightType: Dimension;
+  widthValues: Dimension[];
+  heightValues: Dimension[];
+  setWidthType: (value: Dimension) => void;
+  setHeightType: (value: Dimension) => void;
+}>;
+
+const PreviewLayout = ({
+  children,
+  widthType,
+  heightType,
+  widthValues,
+  heightValues,
+  setWidthType,
+  setHeightType,
+}: PreviewLayoutProps) => (
+  <SafeAreaProvider>
+    <SafeAreaView style={{flex: 1, padding: 10}}>
+      <View style={styles.row}>
+        <Text style={styles.label}>width </Text>
+        {widthValues.map(value => (
+          <TouchableOpacity
+            key={value}
+            onPress={() => setWidthType(value)}
+            style={[styles.button, widthType === value && styles.selected]}>
+            <Text
+              style={[
+                styles.buttonLabel,
+                widthType === value && styles.selectedLabel,
+              ]}>
+              {value}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+      <View style={styles.row}>
+        <Text style={styles.label}>height </Text>
+        {heightValues.map(value => (
+          <TouchableOpacity
+            key={value}
+            onPress={() => setHeightType(value)}
+            style={[styles.button, heightType === value && styles.selected]}>
+            <Text
+              style={[
+                styles.buttonLabel,
+                heightType === value && styles.selectedLabel,
+              ]}>
+              {value}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+      {children}
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    padding: 8,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginRight: 10,
+    marginBottom: 10,
+  },
+  selected: {
+    backgroundColor: 'coral',
+    shadowOpacity: 0,
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default WidthHeightBasics;
+```
+
+</TabItem>
+</Tabs>
+
+## Position
+
+The `position` type of an element defines how it is positioned relative to either itself, its parent, or its [containing block](./flexbox.md#the-containing-block).
+
+- `relative` (**default value**) By default, an element is positioned relatively. This means an element is positioned according to the normal flow of the layout, and then offset relative to that position based on the values of `top`, `right`, `bottom`, and `left`. The offset does not affect the position of any sibling or parent elements.
+
+- `absolute` When positioned absolutely, an element doesn't take part in the normal layout flow. It is instead laid out independent of its siblings. The position is determined based on the `top`, `right`, `bottom`, and `left` values. These values will position the element relative to its containing block.
+
+- `static` When positioned statically, an element is positioned according to the normal flow of layout, and will ignore the `top`, `right`, `bottom`, and `left` values. This `position` will also cause the element to not form a containing block for absolute descendants, unless some other superceding style prop is present (e.g. `transform`). This allows `absolute` elements to be positioned to something that is not their parent. Note that **`static` is only available on the New Architecture**.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Position&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const PositionLayout = () => {
+  const [position, setPosition] = useState('relative');
+
+  return (
+    <PreviewLayout
+      label="position"
+      selectedValue={position}
+      values={['relative', 'absolute', 'static']}
+      setSelectedValue={setPosition}>
+      <View
+        style={[
+          styles.box,
+          {
+            top: 25,
+            left: 25,
+            position,
+            backgroundColor: 'powderblue',
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.box,
+          {
+            top: 50,
+            left: 50,
+            position,
+            backgroundColor: 'skyblue',
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.box,
+          {
+            top: 75,
+            left: 75,
+            position,
+            backgroundColor: 'steelblue',
+          },
+        ]}
+      />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={styles.container}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default PositionLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Position&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const PositionLayout = () => {
+  const [position, setPosition] = useState<'relative' | 'absolute' | 'static'>(
+    'relative',
+  );
+
+  return (
+    <PreviewLayout
+      label="position"
+      selectedValue={position}
+      values={['relative', 'absolute', 'static']}
+      setSelectedValue={setPosition}>
+      <View
+        style={[
+          styles.box,
+          {
+            top: 25,
+            left: 25,
+            position,
+            backgroundColor: 'powderblue',
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.box,
+          {
+            top: 50,
+            left: 50,
+            position,
+            backgroundColor: 'skyblue',
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.box,
+          {
+            top: 75,
+            left: 75,
+            position,
+            backgroundColor: 'steelblue',
+          },
+        ]}
+      />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: Array<'relative' | 'absolute' | 'static'>;
+  selectedValue: string;
+  setSelectedValue: (value: 'relative' | 'absolute' | 'static') => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={styles.container}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default PositionLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## The Containing Block
+
+The containing block of an element is an ancestor element which controls its position and size.
+The way containing blocks work in React Native is very similar to [how they work on the web](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block), with some simplifications due to the lack of some web features.
+
+The `top`, `right`, `bottom`, and `left` values of an absolutely positioned element will be
+relative to its containing block.
+
+Percentage lengths (e.g.: `width: '50%'` or `padding: '10%'`) applied to absolutely positioned elements will be calculated relatively to the size of its containing block. For example, if the containing block is 100 points wide, then `width: 50%` on an absolutely positioned element will cause it to be 50 points wide.
+
+The following list will help you determine the containing block of any given element:
+
+- If that element has a `position` type of `relative` or `static`, then its containing block is its parent.
+- If that element has a `position` type of `absolute`, then its containing block is the nearest ancestor in which one of the following is true:
+  - It has a `position` type other than `static`
+  - It has a `transform`
+
+## Going Deeper
+
+Check out the interactive [yoga playground](https://www.yogalayout.dev/playground) that you can use to get a better understanding of flexbox.
+
+We've covered the basics, but there are many other styles you may need for layouts. The full list of props that control layout is documented [here](./layout-props.md).
+
+Additionally, you can see some examples from [Wix Engineers](https://medium.com/wix-engineering/the-full-react-native-layout-cheat-sheet-a4147802405c).
diff --git a/website/versioned_docs/version-0.84/handling-text-input.md b/website/versioned_docs/version-0.84/handling-text-input.md
index 6db00cae840..be56c292f03 100644
--- a/website/versioned_docs/version-0.84/handling-text-input.md
+++ b/website/versioned_docs/version-0.84/handling-text-input.md
@@ -1,48 +1,48 @@
----
-id: handling-text-input
-title: Handling Text Input
----
-
-[`TextInput`](textinput#content) is a [Core Component](intro-react-native-components) that allows the user to enter text. It has an `onChangeText` prop that takes a function to be called every time the text changed, and an `onSubmitEditing` prop that takes a function to be called when the text is submitted.
-
-For example, let's say that as the user types, you're translating their words into a different language. In this new language, every single word is written the same way: 🍕. So the sentence "Hello there Bob" would be translated as "🍕 🍕 🍕".
-
-```SnackPlayer name=Handling%20Text%20Input
-import React, {useState} from 'react';
-import {Text, TextInput, View} from 'react-native';
-
-const PizzaTranslator = () => {
-  const [text, setText] = useState('');
-  return (
-    <View style={{flex: 1, justifyContent: 'center'}}>
-      <TextInput
-        placeholder="Type here to translate!"
-        onChangeText={newText => setText(newText)}
-        defaultValue={text}
-        style={{
-          height: 40,
-          padding: 5,
-          marginHorizontal: 8,
-          borderWidth: 1,
-        }}
-      />
-      <Text style={{padding: 10, fontSize: 42}}>
-        {text
-          .split(' ')
-          .map(word => word && '🍕')
-          .join(' ')}
-      </Text>
-    </View>
-  );
-};
-
-export default PizzaTranslator;
-```
-
-In this example, we store `text` in the state, because it changes over time.
-
-There are a lot more things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the [React docs on controlled components](https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable), or the [reference docs for TextInput](textinput.md).
-
-A `TextInput` is one of many ways for the user to interact with your app. For examples of other ways to handle input, see the documentation on [how to handle touches](handling-touches.md).
-
-Now, let's take a look at [ScrollView](using-a-scrollview), another Core Component.
+---
+id: handling-text-input
+title: Handling Text Input
+---
+
+[`TextInput`](textinput#content) is a [Core Component](intro-react-native-components) that allows the user to enter text. It has an `onChangeText` prop that takes a function to be called every time the text changed, and an `onSubmitEditing` prop that takes a function to be called when the text is submitted.
+
+For example, let's say that as the user types, you're translating their words into a different language. In this new language, every single word is written the same way: 🍕. So the sentence "Hello there Bob" would be translated as "🍕 🍕 🍕".
+
+```SnackPlayer name=Handling%20Text%20Input
+import {useState} from 'react';
+import {Text, TextInput, View} from 'react-native';
+
+const PizzaTranslator = () => {
+  const [text, setText] = useState('');
+  return (
+    <View style={{flex: 1, justifyContent: 'center'}}>
+      <TextInput
+        placeholder="Type here to translate!"
+        onChangeText={newText => setText(newText)}
+        defaultValue={text}
+        style={{
+          height: 40,
+          padding: 5,
+          marginHorizontal: 8,
+          borderWidth: 1,
+        }}
+      />
+      <Text style={{padding: 10, fontSize: 42}}>
+        {text
+          .split(' ')
+          .map(word => word && '🍕')
+          .join(' ')}
+      </Text>
+    </View>
+  );
+};
+
+export default PizzaTranslator;
+```
+
+In this example, we store `text` in the state, because it changes over time.
+
+There are a lot more things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the [React docs on controlled components](https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable), or the [reference docs for TextInput](textinput.md).
+
+A `TextInput` is one of many ways for the user to interact with your app. For examples of other ways to handle input, see the documentation on [how to handle touches](handling-touches.md).
+
+Now, let's take a look at [ScrollView](using-a-scrollview), another Core Component.
diff --git a/website/versioned_docs/version-0.84/handling-touches.md b/website/versioned_docs/version-0.84/handling-touches.md
index 612287f6e10..b9604b393c0 100644
--- a/website/versioned_docs/version-0.84/handling-touches.md
+++ b/website/versioned_docs/version-0.84/handling-touches.md
@@ -25,7 +25,6 @@ This will render a blue label on iOS, and a blue rounded rectangle with light te
 Go ahead and play around with the `Button` component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right and then clicking on "Tap to Play" to preview the app.
 
 ```SnackPlayer name=Button%20Basics
-import React from 'react';
 import {Alert, Button, StyleSheet, View} from 'react-native';
 
 const ButtonBasics = () => {
@@ -86,7 +85,6 @@ In some cases, you may want to detect when a user presses and holds a view for a
 Let's see all of these in action:
 
 ```SnackPlayer name=Touchables
-import React from 'react';
 import {
   Alert,
   Platform,
diff --git a/website/versioned_docs/version-0.84/height-and-width.md b/website/versioned_docs/version-0.84/height-and-width.md
index 485667831cd..b768626716e 100644
--- a/website/versioned_docs/version-0.84/height-and-width.md
+++ b/website/versioned_docs/version-0.84/height-and-width.md
@@ -10,7 +10,6 @@ A component's height and width determine its size on the screen.
 The general way to set the dimensions of a component is by adding a fixed `width` and `height` to style. All dimensions in React Native are unitless, and represent density-independent pixels.
 
 ```SnackPlayer name=Height%20and%20Width
-import React from 'react';
 import {View} from 'react-native';
 
 const FixedDimensionsBasics = () => {
@@ -59,7 +58,6 @@ A component can only expand to fill available space if its parent has dimensions
 :::
 
 ```SnackPlayer name=Flex%20Dimensions
-import React from 'react';
 import {View} from 'react-native';
 
 const FlexDimensionsBasics = () => {
@@ -85,7 +83,6 @@ After you can control a component's size, the next step is to [learn how to lay
 If you want to fill a certain portion of the screen, but you _don't_ want to use the `flex` layout, you _can_ use **percentage values** in the component's style. Similar to flex dimensions, percentage dimensions require parent with a defined size.
 
 ```SnackPlayer name=Percentage%20Dimensions
-import React from 'react';
 import {View} from 'react-native';
 
 const PercentageDimensionsBasics = () => {
diff --git a/website/versioned_docs/version-0.84/i18nmanager.md b/website/versioned_docs/version-0.84/i18nmanager.md
index 80ccd2ccd72..2593a0e45c4 100644
--- a/website/versioned_docs/version-0.84/i18nmanager.md
+++ b/website/versioned_docs/version-0.84/i18nmanager.md
@@ -1,169 +1,168 @@
----
-id: i18nmanager
-title: I18nManager
----
-
-# I18nManager
-
-The `I18nManager` module provides utilities for managing Right-to-Left (RTL) layout support for languages like Arabic, Hebrew, and others. It provides methods to control RTL behavior and check the current layout direction.
-
-## Examples
-
-### Change positions and animations based on RTL
-
-If you absolutely position elements to align with other flexbox elements, they may not align in RTL languages. Using `isRTL` can be used to adjust alignment or animations.
-
-```SnackPlayer name=I18nManager%20Change%20Absolute%20Positions%20And%20Animations
-import React from 'react';
-import {I18nManager, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  // Change to `true` to see the effect in a non-RTL language
-  const isRTL = I18nManager.isRTL;
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView>
-        <View
-          style={{
-            position: 'absolute',
-            left: isRTL ? undefined : 0,
-            right: isRTL ? 0 : undefined,
-          }}>
-          {isRTL ? <Text>Back &gt;</Text> : <Text>&lt; Back</Text>}
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-export default App;
-```
-
-### During Development
-
-```SnackPlayer name=I18nManager%20During%20Development
-import React, {useState} from 'react';
-import {Alert, I18nManager, StyleSheet, Switch, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [rtl, setRTL] = useState(I18nManager.isRTL);
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView>
-        <View style={styles.container}>
-          <View style={styles.forceRtl}>
-            <Text>Force RTL in Development:</Text>
-            <Switch
-              value={rtl}
-              onValueChange={value => {
-                setRTL(value);
-                I18nManager.forceRTL(value);
-                Alert.alert(
-                  'Reload this page',
-                  'Please reload this page to change the UI direction! ' +
-                    'All examples in this app will be affected. ' +
-                    'Check them out to see what they look like in RTL layout.',
-                );
-              }}
-            />
-          </View>
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    padding: 20,
-  },
-  forceRtl: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-# Reference
-
-## Properties
-
-### `isRTL`
-
-```typescript
-static isRTL: boolean;
-```
-
-A boolean value indicating whether the app is currently in RTL layout mode.
-
-The value of `isRTL` is determined by the following logic:
-
-- If `forceRTL` is `true`, `isRTL` returns `true`
-- If `allowRTL` is `false`, `isRTL` returns `false`
-- Otherwise, `isRTL` will be `true` given the following:
-  - **iOS:**
-    - The user-preferred language on the device is an RTL language
-    - The application-defined localizations include the user-chosen language (as defined in the Xcode project file (`knownRegions = (...)`)
-  - **Android:**
-    - The user-preferred language on the device is an RTL language
-    - The application's `AndroidManifest.xml` defines `android:supportsRTL="true"` on the `<application>` element
-
-### `doLeftAndRightSwapInRTL`
-
-```typescript
-static doLeftAndRightSwapInRTL: boolean;
-```
-
-A boolean value indicating whether left and right style properties should be automatically swapped when in RTL mode. When enabled, left becomes right and right becomes left in RTL layouts.
-
-## Methods
-
-### `allowRTL()`
-
-```typescript
-static allowRTL: (allowRTL: boolean) => void;
-```
-
-Enables or disables RTL layout support for the application.
-
-**Parameters:**
-
-- `allowRTL` (boolean): Whether to allow RTL layout
-
-**Important Notes:**
-
-- Changes take effect on the next application start, not immediately
-- This setting is persisted across app restarts
-
-### `forceRTL()`
-
-```typescript
-static forceRTL: (forced: boolean) => void;
-```
-
-Forces the app to use RTL layout regardless of the device language settings. This is primarily useful for testing RTL layouts during development.
-
-Avoid forcing RTL in production apps as it requires a full app restart to take effect, which makes for a poor user-experience.
-
-**Parameters:**
-
-- `forced` (boolean): Whether to force RTL layout
-
-**Important Notes:**
-
-- Changes take full effect on the next application start, not immediately
-- The setting is persisted across app restarts
-- Only meant for development and testing. In production, you should either disallow RTL fully or handle it appropriately (see `isRTL`)
-
-### `swapLeftAndRightInRTL()`
-
-```typescript
-static swapLeftAndRightInRTL: (swapLeftAndRight: boolean) => void;
-```
-
-Swap left and right style properties in RTL mode. When enabled, left becomes right and right becomes left in RTL layouts. Does not affect the value of `isRTL`.
+---
+id: i18nmanager
+title: I18nManager
+---
+
+# I18nManager
+
+The `I18nManager` module provides utilities for managing Right-to-Left (RTL) layout support for languages like Arabic, Hebrew, and others. It provides methods to control RTL behavior and check the current layout direction.
+
+## Examples
+
+### Change positions and animations based on RTL
+
+If you absolutely position elements to align with other flexbox elements, they may not align in RTL languages. Using `isRTL` can be used to adjust alignment or animations.
+
+```SnackPlayer name=I18nManager%20Change%20Absolute%20Positions%20And%20Animations
+import {I18nManager, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  // Change to `true` to see the effect in a non-RTL language
+  const isRTL = I18nManager.isRTL;
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView>
+        <View
+          style={{
+            position: 'absolute',
+            left: isRTL ? undefined : 0,
+            right: isRTL ? 0 : undefined,
+          }}>
+          {isRTL ? <Text>Back &gt;</Text> : <Text>&lt; Back</Text>}
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+export default App;
+```
+
+### During Development
+
+```SnackPlayer name=I18nManager%20During%20Development
+import {useState} from 'react';
+import {Alert, I18nManager, StyleSheet, Switch, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [rtl, setRTL] = useState(I18nManager.isRTL);
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView>
+        <View style={styles.container}>
+          <View style={styles.forceRtl}>
+            <Text>Force RTL in Development:</Text>
+            <Switch
+              value={rtl}
+              onValueChange={value => {
+                setRTL(value);
+                I18nManager.forceRTL(value);
+                Alert.alert(
+                  'Reload this page',
+                  'Please reload this page to change the UI direction! ' +
+                    'All examples in this app will be affected. ' +
+                    'Check them out to see what they look like in RTL layout.',
+                );
+              }}
+            />
+          </View>
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 20,
+  },
+  forceRtl: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+# Reference
+
+## Properties
+
+### `isRTL`
+
+```typescript
+static isRTL: boolean;
+```
+
+A boolean value indicating whether the app is currently in RTL layout mode.
+
+The value of `isRTL` is determined by the following logic:
+
+- If `forceRTL` is `true`, `isRTL` returns `true`
+- If `allowRTL` is `false`, `isRTL` returns `false`
+- Otherwise, `isRTL` will be `true` given the following:
+  - **iOS:**
+    - The user-preferred language on the device is an RTL language
+    - The application-defined localizations include the user-chosen language (as defined in the Xcode project file (`knownRegions = (...)`)
+  - **Android:**
+    - The user-preferred language on the device is an RTL language
+    - The application's `AndroidManifest.xml` defines `android:supportsRTL="true"` on the `<application>` element
+
+### `doLeftAndRightSwapInRTL`
+
+```typescript
+static doLeftAndRightSwapInRTL: boolean;
+```
+
+A boolean value indicating whether left and right style properties should be automatically swapped when in RTL mode. When enabled, left becomes right and right becomes left in RTL layouts.
+
+## Methods
+
+### `allowRTL()`
+
+```typescript
+static allowRTL: (allowRTL: boolean) => void;
+```
+
+Enables or disables RTL layout support for the application.
+
+**Parameters:**
+
+- `allowRTL` (boolean): Whether to allow RTL layout
+
+**Important Notes:**
+
+- Changes take effect on the next application start, not immediately
+- This setting is persisted across app restarts
+
+### `forceRTL()`
+
+```typescript
+static forceRTL: (forced: boolean) => void;
+```
+
+Forces the app to use RTL layout regardless of the device language settings. This is primarily useful for testing RTL layouts during development.
+
+Avoid forcing RTL in production apps as it requires a full app restart to take effect, which makes for a poor user-experience.
+
+**Parameters:**
+
+- `forced` (boolean): Whether to force RTL layout
+
+**Important Notes:**
+
+- Changes take full effect on the next application start, not immediately
+- The setting is persisted across app restarts
+- Only meant for development and testing. In production, you should either disallow RTL fully or handle it appropriately (see `isRTL`)
+
+### `swapLeftAndRightInRTL()`
+
+```typescript
+static swapLeftAndRightInRTL: (swapLeftAndRight: boolean) => void;
+```
+
+Swap left and right style properties in RTL mode. When enabled, left becomes right and right becomes left in RTL layouts. Does not affect the value of `isRTL`.
diff --git a/website/versioned_docs/version-0.84/image-style-props.md b/website/versioned_docs/version-0.84/image-style-props.md
index efa0dc725e1..cbf19f996f9 100644
--- a/website/versioned_docs/version-0.84/image-style-props.md
+++ b/website/versioned_docs/version-0.84/image-style-props.md
@@ -8,7 +8,6 @@ title: Image Style Props
 ### Image Resize Mode
 
 ```SnackPlayer name=Image%20Resize%20Modes%20Example
-import React from 'react';
 import {View, Image, Text, StyleSheet, ScrollView} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -82,7 +81,6 @@ export default DisplayAnImageWithStyle;
 ### Image Border
 
 ```SnackPlayer name=Style%20BorderWidth%20and%20BorderColor%20Example
-import React from 'react';
 import {Image, StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -118,7 +116,6 @@ export default DisplayAnImageWithStyle;
 ### Image Border Radius
 
 ```SnackPlayer name=Style%20Border%20Radius%20Example
-import React from 'react';
 import {View, Image, StyleSheet, Text, ScrollView} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -184,7 +181,6 @@ export default DisplayAnImageWithStyle;
 ### Image Tint
 
 ```SnackPlayer name=Style%20tintColor%20Function%20Component
-import React from 'react';
 import {Image, StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.84/image.md b/website/versioned_docs/version-0.84/image.md
index 5f6a2a5b1ad..3f83be8c19c 100644
--- a/website/versioned_docs/version-0.84/image.md
+++ b/website/versioned_docs/version-0.84/image.md
@@ -14,7 +14,6 @@ For network and data images, you will need to manually specify the dimensions of
 ## Examples
 
 ```SnackPlayer name=Image%20Example
-import React from 'react';
 import {Image, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -61,7 +60,6 @@ export default DisplayAnImage;
 You can also add `style` to an image:
 
 ```SnackPlayer name=Styled%20Image%20Example
-import React from 'react';
 import {Image, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.84/imagebackground.md b/website/versioned_docs/version-0.84/imagebackground.md
index 6670fd3b632..d3d40b2a844 100644
--- a/website/versioned_docs/version-0.84/imagebackground.md
+++ b/website/versioned_docs/version-0.84/imagebackground.md
@@ -12,7 +12,6 @@ Note that you must specify some width and height style attributes.
 ## Example
 
 ```SnackPlayer name=ImageBackground
-import React from 'react';
 import {ImageBackground, StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.84/improvingux.md b/website/versioned_docs/version-0.84/improvingux.md
index 462f5f0ce1c..96bd508791f 100644
--- a/website/versioned_docs/version-0.84/improvingux.md
+++ b/website/versioned_docs/version-0.84/improvingux.md
@@ -1,596 +1,594 @@
----
-id: improvingux
-title: Improving User Experience
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-## Configure text inputs
-
-Entering text on touch phone is a challenge - small screen, software keyboard. But based on what kind of data you need, you can make it easier by properly configuring the text inputs:
-
-- Focus the first field automatically
-- Use placeholder text as an example of expected data format
-- Enable or disable autocapitalization and autocorrect
-- Choose keyboard type (e.g. email, numeric)
-- Make sure the return button focuses the next field or submits the form
-
-Check out [`TextInput` docs](textinput.md) for more configuration options.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=TextInput%20form%20example&ext=js
-import React, {useState, useRef} from 'react';
-import {
-  Alert,
-  Text,
-  StatusBar,
-  TextInput,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const App = () => {
-  const emailInput = useRef(null);
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-
-  const submit = () => {
-    Alert.alert(
-      `Welcome, ${name}! Confirmation email has been sent to ${email}`,
-    );
-  };
-
-  return (
-    <View style={styles.container}>
-      <StatusBar barStyle="light-content" />
-      <View style={styles.header}>
-        <Text style={styles.description}>
-          This demo shows how using available TextInput customizations can make
-          forms much easier to use. Try completing the form and notice that
-          different fields have specific optimizations and the return key
-          changes from focusing next input to submitting the form.
-        </Text>
-      </View>
-      <TextInput
-        style={styles.input}
-        value={name}
-        onChangeText={text => setName(text)}
-        placeholder="Full Name"
-        autoFocus={true}
-        autoCapitalize="words"
-        autoCorrect={true}
-        keyboardType="default"
-        returnKeyType="next"
-        onSubmitEditing={() => emailInput.current.focus()}
-        blurOnSubmit={false}
-      />
-      <TextInput
-        style={styles.input}
-        value={email}
-        onChangeText={text => setEmail(text)}
-        ref={emailInput}
-        placeholder="email@example.com"
-        autoCapitalize="none"
-        autoCorrect={false}
-        keyboardType="email-address"
-        returnKeyType="send"
-        onSubmitEditing={submit}
-        blurOnSubmit={true}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    paddingTop: 64,
-    padding: 20,
-    backgroundColor: '#282c34',
-  },
-  description: {
-    fontSize: 14,
-    color: 'white',
-  },
-  input: {
-    margin: 20,
-    marginBottom: 0,
-    height: 34,
-    paddingHorizontal: 10,
-    borderRadius: 4,
-    borderColor: '#ccc',
-    borderWidth: 1,
-    fontSize: 16,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=TextInput%20form%20example&ext=tsx
-import React, {useState, useRef} from 'react';
-import {
-  Alert,
-  Text,
-  StatusBar,
-  TextInput,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const App = () => {
-  const emailInput = useRef<TextInput>(null);
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-
-  const submit = () => {
-    Alert.alert(
-      `Welcome, ${name}! Confirmation email has been sent to ${email}`,
-    );
-  };
-
-  return (
-    <View style={styles.container}>
-      <StatusBar barStyle="light-content" />
-      <View style={styles.header}>
-        <Text style={styles.description}>
-          This demo shows how using available TextInput customizations can make
-          forms much easier to use. Try completing the form and notice that
-          different fields have specific optimizations and the return key
-          changes from focusing next input to submitting the form.
-        </Text>
-      </View>
-      <TextInput
-        style={styles.input}
-        value={name}
-        onChangeText={text => setName(text)}
-        placeholder="Full Name"
-        autoFocus={true}
-        autoCapitalize="words"
-        autoCorrect={true}
-        keyboardType="default"
-        returnKeyType="next"
-        onSubmitEditing={() => emailInput.current?.focus()}
-        blurOnSubmit={false}
-      />
-      <TextInput
-        style={styles.input}
-        value={email}
-        onChangeText={text => setEmail(text)}
-        ref={emailInput}
-        placeholder="email@example.com"
-        autoCapitalize="none"
-        autoCorrect={false}
-        keyboardType="email-address"
-        returnKeyType="send"
-        onSubmitEditing={submit}
-        blurOnSubmit={true}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    paddingTop: 64,
-    padding: 20,
-    backgroundColor: '#282c34',
-  },
-  description: {
-    fontSize: 14,
-    color: 'white',
-  },
-  input: {
-    margin: 20,
-    marginBottom: 0,
-    height: 34,
-    paddingHorizontal: 10,
-    borderRadius: 4,
-    borderColor: '#ccc',
-    borderWidth: 1,
-    fontSize: 16,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-## Manage layout when keyboard is visible
-
-Software keyboard takes almost half of the screen. If you have interactive elements that can get covered by the keyboard, make sure they are still accessible by using the [`KeyboardAvoidingView` component](keyboardavoidingview.md).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=KeyboardAvoidingView%20example&ext=js
-import React, {useState, useRef} from 'react';
-import {
-  Alert,
-  Text,
-  Button,
-  StatusBar,
-  TextInput,
-  KeyboardAvoidingView,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const App = () => {
-  const emailInput = useRef(null);
-  const [email, setEmail] = useState('');
-
-  const submit = () => {
-    emailInput.current.blur();
-    Alert.alert(`Confirmation email has been sent to ${email}`);
-  };
-
-  return (
-    <View style={styles.container}>
-      <StatusBar barStyle="light-content" />
-      <View style={styles.header}>
-        <Text style={styles.description}>
-          This demo shows how to avoid covering important UI elements with the
-          software keyboard. Focus the email input below and notice that the
-          Sign Up button and the text adjusted positions to make sure they are
-          not hidden under the keyboard.
-        </Text>
-      </View>
-      <KeyboardAvoidingView behavior="padding" style={styles.form}>
-        <TextInput
-          style={styles.input}
-          value={email}
-          onChangeText={text => setEmail(text)}
-          ref={emailInput}
-          placeholder="email@example.com"
-          autoCapitalize="none"
-          autoCorrect={false}
-          keyboardType="email-address"
-          returnKeyType="send"
-          onSubmitEditing={submit}
-          blurOnSubmit={true}
-        />
-        <View>
-          <Button title="Sign Up" onPress={submit} />
-          <Text style={styles.legal}>Some important legal fine print here</Text>
-        </View>
-      </KeyboardAvoidingView>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    paddingTop: 64,
-    padding: 20,
-    backgroundColor: '#282c34',
-  },
-  description: {
-    fontSize: 14,
-    color: 'white',
-  },
-  input: {
-    margin: 20,
-    marginBottom: 0,
-    height: 34,
-    paddingHorizontal: 10,
-    borderRadius: 4,
-    borderColor: '#ccc',
-    borderWidth: 1,
-    fontSize: 16,
-  },
-  legal: {
-    margin: 10,
-    color: '#333',
-    fontSize: 12,
-    textAlign: 'center',
-  },
-  form: {
-    flex: 1,
-    justifyContent: 'space-between',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=KeyboardAvoidingView%20example&ext=tsx
-import React, {useState, useRef} from 'react';
-import {
-  Alert,
-  Text,
-  Button,
-  StatusBar,
-  TextInput,
-  KeyboardAvoidingView,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const App = () => {
-  const emailInput = useRef<TextInput>(null);
-  const [email, setEmail] = useState('');
-
-  const submit = () => {
-    emailInput.current?.blur();
-    Alert.alert(`Confirmation email has been sent to ${email}`);
-  };
-
-  return (
-    <View style={styles.container}>
-      <StatusBar barStyle="light-content" />
-      <View style={styles.header}>
-        <Text style={styles.description}>
-          This demo shows how to avoid covering important UI elements with the
-          software keyboard. Focus the email input below and notice that the
-          Sign Up button and the text adjusted positions to make sure they are
-          not hidden under the keyboard.
-        </Text>
-      </View>
-      <KeyboardAvoidingView behavior="padding" style={styles.form}>
-        <TextInput
-          style={styles.input}
-          value={email}
-          onChangeText={text => setEmail(text)}
-          ref={emailInput}
-          placeholder="email@example.com"
-          autoCapitalize="none"
-          autoCorrect={false}
-          keyboardType="email-address"
-          returnKeyType="send"
-          onSubmitEditing={submit}
-          blurOnSubmit={true}
-        />
-        <View>
-          <Button title="Sign Up" onPress={submit} />
-          <Text style={styles.legal}>Some important legal fine print here</Text>
-        </View>
-      </KeyboardAvoidingView>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    paddingTop: 64,
-    padding: 20,
-    backgroundColor: '#282c34',
-  },
-  description: {
-    fontSize: 14,
-    color: 'white',
-  },
-  input: {
-    margin: 20,
-    marginBottom: 0,
-    height: 34,
-    paddingHorizontal: 10,
-    borderRadius: 4,
-    borderColor: '#ccc',
-    borderWidth: 1,
-    fontSize: 16,
-  },
-  legal: {
-    margin: 10,
-    color: '#333',
-    fontSize: 12,
-    textAlign: 'center',
-  },
-  form: {
-    flex: 1,
-    justifyContent: 'space-between',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-## Make tappable areas larger
-
-On mobile phones it's hard to be very precise when pressing buttons. Make sure all interactive elements are 44x44 or larger. One way to do this is to leave enough space for the element, `padding`, `minWidth` and `minHeight` style values can be useful for that. Alternatively, you can use [`hitSlop` prop](touchablewithoutfeedback.md#hitslop) to increase interactive area without affecting the layout. Here's a demo:
-
-```SnackPlayer name=HitSlop%20example
-import React from 'react';
-import {
-  Text,
-  StatusBar,
-  TouchableOpacity,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <StatusBar barStyle="light-content" />
-      <View style={styles.header}>
-        <Text style={styles.description}>
-          This demo shows how using hitSlop can make interactive elements much
-          easier to tap without changing their layout and size. Try pressing
-          each button quickly multiple times and notice which one is easier to
-          hit.
-        </Text>
-      </View>
-      <View style={styles.content}>
-        <TouchableOpacity>
-          <Text style={styles.label}>Without hitSlop</Text>
-        </TouchableOpacity>
-        <View style={styles.separator} />
-        <View style={styles.preview}>
-          <TouchableOpacity
-            hitSlop={{top: 20, left: 20, bottom: 20, right: 20}}>
-            <Text style={styles.label}>With hitSlop</Text>
-          </TouchableOpacity>
-        </View>
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    paddingTop: 64,
-    padding: 20,
-    backgroundColor: '#282c34',
-  },
-  description: {
-    fontSize: 14,
-    color: 'white',
-  },
-  content: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  label: {
-    fontSize: 18,
-    color: '#336699',
-    textAlign: 'center',
-    borderColor: '#ddd',
-    borderWidth: 1,
-  },
-  separator: {
-    height: 50,
-  },
-  preview: {
-    padding: 20,
-    backgroundColor: '#f6f6f6',
-  },
-});
-
-export default App;
-```
-
-## Use Android Ripple
-
-Android API 21+ uses the material design ripple to provide user with feedback when they touch an interactable area on the screen. React Native exposes this through the [`TouchableNativeFeedback` component](touchablenativefeedback.md). Using this touchable effect instead of opacity or highlight will often make your app feel much more fitting on the platform. That said, you need to be careful when using it because it doesn't work on iOS or on Android API < 21, so you will need to fallback to using one of the other Touchable components on iOS. You can use a library like [react-native-platform-touchable](https://github.com/react-community/react-native-platform-touchable) to handle the platform differences for you.
-
-```SnackPlayer name=Android%20Ripple%20example&supportedPlatforms=android
-import React from 'react';
-import {
-  TouchableNativeFeedback,
-  TouchableOpacity,
-  TouchableHighlight,
-  Platform,
-  Text,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const SUPPORTS_NATIVE_FEEDBACK =
-  Platform.OS === 'android' && Platform.Version >= 21;
-
-const noop = () => {};
-const defaultHitSlop = {top: 15, bottom: 15, right: 15, left: 15};
-
-const ButtonsWithNativeFeedback = () => (
-  <View style={styles.buttonContainer}>
-    <TouchableNativeFeedback
-      onPress={noop}
-      background={TouchableNativeFeedback.Ripple('#06bcee', false)}
-      hitSlop={defaultHitSlop}>
-      <View style={styles.button}>
-        <Text style={styles.text}>This is a ripple respecting borders</Text>
-      </View>
-    </TouchableNativeFeedback>
-    <TouchableNativeFeedback
-      onPress={noop}
-      background={TouchableNativeFeedback.Ripple('#06bcee', true)}
-      hitSlop={defaultHitSlop}>
-      <View style={styles.button}>
-        <Text style={styles.text}>
-          This is ripple without borders, this is more useful for icons, eg: in
-          tab bar
-        </Text>
-      </View>
-    </TouchableNativeFeedback>
-  </View>
-);
-
-const Buttons = () => (
-  <View style={styles.buttonContainer}>
-    <TouchableOpacity
-      style={styles.button}
-      onPress={noop}
-      hitSlop={defaultHitSlop}>
-      <Text style={styles.text}>This is opacity</Text>
-    </TouchableOpacity>
-    <TouchableHighlight
-      style={styles.button}
-      onPress={noop}
-      hitSlop={defaultHitSlop}
-      underlayColor="#06bcee">
-      <Text style={styles.text}>This is highlight</Text>
-    </TouchableHighlight>
-  </View>
-);
-
-const App = () => (
-  <View style={styles.container}>
-    {SUPPORTS_NATIVE_FEEDBACK ? <ButtonsWithNativeFeedback /> : <Buttons />}
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingTop: 64,
-    backgroundColor: '#fff',
-  },
-  buttonContainer: {
-    margin: 24,
-  },
-  text: {
-    fontSize: 20,
-    color: '#fff',
-    fontWeight: 'bold',
-  },
-  button: {
-    padding: 25,
-    borderRadius: 5,
-    backgroundColor: '#000',
-    marginBottom: 30,
-  },
-});
-
-export default App;
-```
-
-## Screen orientation lock
-
-Multiple screen orientations should work fine by default unless you're using `Dimensions` API and don't handle orientation changes. If you don't want to support multiple screen orientations, you can lock the screen orientation to either portrait or landscape.
-
-On iOS, in the General tab and Deployment Info section of Xcode enable the Device Orientation you want to support (ensure you have selected iPhone from the Devices menu when making the changes). For Android, open the AndroidManifest.xml file and within the activity element add `'android:screenOrientation="portrait"'` to lock to portrait or `'android:screenOrientation="landscape"'` to lock to landscape.
-
-# Learn more
-
-[Material Design](https://material.io/) and [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines) are great resources for learning more about designing for mobile platforms.
+---
+id: improvingux
+title: Improving User Experience
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+## Configure text inputs
+
+Entering text on touch phone is a challenge - small screen, software keyboard. But based on what kind of data you need, you can make it easier by properly configuring the text inputs:
+
+- Focus the first field automatically
+- Use placeholder text as an example of expected data format
+- Enable or disable autocapitalization and autocorrect
+- Choose keyboard type (e.g. email, numeric)
+- Make sure the return button focuses the next field or submits the form
+
+Check out [`TextInput` docs](textinput.md) for more configuration options.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=TextInput%20form%20example&ext=js
+import {useState, useRef} from 'react';
+import {
+  Alert,
+  Text,
+  StatusBar,
+  TextInput,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const App = () => {
+  const emailInput = useRef(null);
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+
+  const submit = () => {
+    Alert.alert(
+      `Welcome, ${name}! Confirmation email has been sent to ${email}`,
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="light-content" />
+      <View style={styles.header}>
+        <Text style={styles.description}>
+          This demo shows how using available TextInput customizations can make
+          forms much easier to use. Try completing the form and notice that
+          different fields have specific optimizations and the return key
+          changes from focusing next input to submitting the form.
+        </Text>
+      </View>
+      <TextInput
+        style={styles.input}
+        value={name}
+        onChangeText={text => setName(text)}
+        placeholder="Full Name"
+        autoFocus={true}
+        autoCapitalize="words"
+        autoCorrect={true}
+        keyboardType="default"
+        returnKeyType="next"
+        onSubmitEditing={() => emailInput.current.focus()}
+        blurOnSubmit={false}
+      />
+      <TextInput
+        style={styles.input}
+        value={email}
+        onChangeText={text => setEmail(text)}
+        ref={emailInput}
+        placeholder="email@example.com"
+        autoCapitalize="none"
+        autoCorrect={false}
+        keyboardType="email-address"
+        returnKeyType="send"
+        onSubmitEditing={submit}
+        blurOnSubmit={true}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 64,
+    padding: 20,
+    backgroundColor: '#282c34',
+  },
+  description: {
+    fontSize: 14,
+    color: 'white',
+  },
+  input: {
+    margin: 20,
+    marginBottom: 0,
+    height: 34,
+    paddingHorizontal: 10,
+    borderRadius: 4,
+    borderColor: '#ccc',
+    borderWidth: 1,
+    fontSize: 16,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=TextInput%20form%20example&ext=tsx
+import {useState, useRef} from 'react';
+import {
+  Alert,
+  Text,
+  StatusBar,
+  TextInput,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const App = () => {
+  const emailInput = useRef<TextInput>(null);
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+
+  const submit = () => {
+    Alert.alert(
+      `Welcome, ${name}! Confirmation email has been sent to ${email}`,
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="light-content" />
+      <View style={styles.header}>
+        <Text style={styles.description}>
+          This demo shows how using available TextInput customizations can make
+          forms much easier to use. Try completing the form and notice that
+          different fields have specific optimizations and the return key
+          changes from focusing next input to submitting the form.
+        </Text>
+      </View>
+      <TextInput
+        style={styles.input}
+        value={name}
+        onChangeText={text => setName(text)}
+        placeholder="Full Name"
+        autoFocus={true}
+        autoCapitalize="words"
+        autoCorrect={true}
+        keyboardType="default"
+        returnKeyType="next"
+        onSubmitEditing={() => emailInput.current?.focus()}
+        blurOnSubmit={false}
+      />
+      <TextInput
+        style={styles.input}
+        value={email}
+        onChangeText={text => setEmail(text)}
+        ref={emailInput}
+        placeholder="email@example.com"
+        autoCapitalize="none"
+        autoCorrect={false}
+        keyboardType="email-address"
+        returnKeyType="send"
+        onSubmitEditing={submit}
+        blurOnSubmit={true}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 64,
+    padding: 20,
+    backgroundColor: '#282c34',
+  },
+  description: {
+    fontSize: 14,
+    color: 'white',
+  },
+  input: {
+    margin: 20,
+    marginBottom: 0,
+    height: 34,
+    paddingHorizontal: 10,
+    borderRadius: 4,
+    borderColor: '#ccc',
+    borderWidth: 1,
+    fontSize: 16,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+## Manage layout when keyboard is visible
+
+Software keyboard takes almost half of the screen. If you have interactive elements that can get covered by the keyboard, make sure they are still accessible by using the [`KeyboardAvoidingView` component](keyboardavoidingview.md).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=KeyboardAvoidingView%20example&ext=js
+import {useState, useRef} from 'react';
+import {
+  Alert,
+  Text,
+  Button,
+  StatusBar,
+  TextInput,
+  KeyboardAvoidingView,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const App = () => {
+  const emailInput = useRef(null);
+  const [email, setEmail] = useState('');
+
+  const submit = () => {
+    emailInput.current.blur();
+    Alert.alert(`Confirmation email has been sent to ${email}`);
+  };
+
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="light-content" />
+      <View style={styles.header}>
+        <Text style={styles.description}>
+          This demo shows how to avoid covering important UI elements with the
+          software keyboard. Focus the email input below and notice that the
+          Sign Up button and the text adjusted positions to make sure they are
+          not hidden under the keyboard.
+        </Text>
+      </View>
+      <KeyboardAvoidingView behavior="padding" style={styles.form}>
+        <TextInput
+          style={styles.input}
+          value={email}
+          onChangeText={text => setEmail(text)}
+          ref={emailInput}
+          placeholder="email@example.com"
+          autoCapitalize="none"
+          autoCorrect={false}
+          keyboardType="email-address"
+          returnKeyType="send"
+          onSubmitEditing={submit}
+          blurOnSubmit={true}
+        />
+        <View>
+          <Button title="Sign Up" onPress={submit} />
+          <Text style={styles.legal}>Some important legal fine print here</Text>
+        </View>
+      </KeyboardAvoidingView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 64,
+    padding: 20,
+    backgroundColor: '#282c34',
+  },
+  description: {
+    fontSize: 14,
+    color: 'white',
+  },
+  input: {
+    margin: 20,
+    marginBottom: 0,
+    height: 34,
+    paddingHorizontal: 10,
+    borderRadius: 4,
+    borderColor: '#ccc',
+    borderWidth: 1,
+    fontSize: 16,
+  },
+  legal: {
+    margin: 10,
+    color: '#333',
+    fontSize: 12,
+    textAlign: 'center',
+  },
+  form: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=KeyboardAvoidingView%20example&ext=tsx
+import {useState, useRef} from 'react';
+import {
+  Alert,
+  Text,
+  Button,
+  StatusBar,
+  TextInput,
+  KeyboardAvoidingView,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const App = () => {
+  const emailInput = useRef<TextInput>(null);
+  const [email, setEmail] = useState('');
+
+  const submit = () => {
+    emailInput.current?.blur();
+    Alert.alert(`Confirmation email has been sent to ${email}`);
+  };
+
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="light-content" />
+      <View style={styles.header}>
+        <Text style={styles.description}>
+          This demo shows how to avoid covering important UI elements with the
+          software keyboard. Focus the email input below and notice that the
+          Sign Up button and the text adjusted positions to make sure they are
+          not hidden under the keyboard.
+        </Text>
+      </View>
+      <KeyboardAvoidingView behavior="padding" style={styles.form}>
+        <TextInput
+          style={styles.input}
+          value={email}
+          onChangeText={text => setEmail(text)}
+          ref={emailInput}
+          placeholder="email@example.com"
+          autoCapitalize="none"
+          autoCorrect={false}
+          keyboardType="email-address"
+          returnKeyType="send"
+          onSubmitEditing={submit}
+          blurOnSubmit={true}
+        />
+        <View>
+          <Button title="Sign Up" onPress={submit} />
+          <Text style={styles.legal}>Some important legal fine print here</Text>
+        </View>
+      </KeyboardAvoidingView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 64,
+    padding: 20,
+    backgroundColor: '#282c34',
+  },
+  description: {
+    fontSize: 14,
+    color: 'white',
+  },
+  input: {
+    margin: 20,
+    marginBottom: 0,
+    height: 34,
+    paddingHorizontal: 10,
+    borderRadius: 4,
+    borderColor: '#ccc',
+    borderWidth: 1,
+    fontSize: 16,
+  },
+  legal: {
+    margin: 10,
+    color: '#333',
+    fontSize: 12,
+    textAlign: 'center',
+  },
+  form: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+## Make tappable areas larger
+
+On mobile phones it's hard to be very precise when pressing buttons. Make sure all interactive elements are 44x44 or larger. One way to do this is to leave enough space for the element, `padding`, `minWidth` and `minHeight` style values can be useful for that. Alternatively, you can use [`hitSlop` prop](touchablewithoutfeedback.md#hitslop) to increase interactive area without affecting the layout. Here's a demo:
+
+```SnackPlayer name=HitSlop%20example
+import {
+  Text,
+  StatusBar,
+  TouchableOpacity,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="light-content" />
+      <View style={styles.header}>
+        <Text style={styles.description}>
+          This demo shows how using hitSlop can make interactive elements much
+          easier to tap without changing their layout and size. Try pressing
+          each button quickly multiple times and notice which one is easier to
+          hit.
+        </Text>
+      </View>
+      <View style={styles.content}>
+        <TouchableOpacity>
+          <Text style={styles.label}>Without hitSlop</Text>
+        </TouchableOpacity>
+        <View style={styles.separator} />
+        <View style={styles.preview}>
+          <TouchableOpacity
+            hitSlop={{top: 20, left: 20, bottom: 20, right: 20}}>
+            <Text style={styles.label}>With hitSlop</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 64,
+    padding: 20,
+    backgroundColor: '#282c34',
+  },
+  description: {
+    fontSize: 14,
+    color: 'white',
+  },
+  content: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  label: {
+    fontSize: 18,
+    color: '#336699',
+    textAlign: 'center',
+    borderColor: '#ddd',
+    borderWidth: 1,
+  },
+  separator: {
+    height: 50,
+  },
+  preview: {
+    padding: 20,
+    backgroundColor: '#f6f6f6',
+  },
+});
+
+export default App;
+```
+
+## Use Android Ripple
+
+Android API 21+ uses the material design ripple to provide user with feedback when they touch an interactable area on the screen. React Native exposes this through the [`TouchableNativeFeedback` component](touchablenativefeedback.md). Using this touchable effect instead of opacity or highlight will often make your app feel much more fitting on the platform. That said, you need to be careful when using it because it doesn't work on iOS or on Android API < 21, so you will need to fallback to using one of the other Touchable components on iOS. You can use a library like [react-native-platform-touchable](https://github.com/react-community/react-native-platform-touchable) to handle the platform differences for you.
+
+```SnackPlayer name=Android%20Ripple%20example&supportedPlatforms=android
+import {
+  TouchableNativeFeedback,
+  TouchableOpacity,
+  TouchableHighlight,
+  Platform,
+  Text,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const SUPPORTS_NATIVE_FEEDBACK =
+  Platform.OS === 'android' && Platform.Version >= 21;
+
+const noop = () => {};
+const defaultHitSlop = {top: 15, bottom: 15, right: 15, left: 15};
+
+const ButtonsWithNativeFeedback = () => (
+  <View style={styles.buttonContainer}>
+    <TouchableNativeFeedback
+      onPress={noop}
+      background={TouchableNativeFeedback.Ripple('#06bcee', false)}
+      hitSlop={defaultHitSlop}>
+      <View style={styles.button}>
+        <Text style={styles.text}>This is a ripple respecting borders</Text>
+      </View>
+    </TouchableNativeFeedback>
+    <TouchableNativeFeedback
+      onPress={noop}
+      background={TouchableNativeFeedback.Ripple('#06bcee', true)}
+      hitSlop={defaultHitSlop}>
+      <View style={styles.button}>
+        <Text style={styles.text}>
+          This is ripple without borders, this is more useful for icons, eg: in
+          tab bar
+        </Text>
+      </View>
+    </TouchableNativeFeedback>
+  </View>
+);
+
+const Buttons = () => (
+  <View style={styles.buttonContainer}>
+    <TouchableOpacity
+      style={styles.button}
+      onPress={noop}
+      hitSlop={defaultHitSlop}>
+      <Text style={styles.text}>This is opacity</Text>
+    </TouchableOpacity>
+    <TouchableHighlight
+      style={styles.button}
+      onPress={noop}
+      hitSlop={defaultHitSlop}
+      underlayColor="#06bcee">
+      <Text style={styles.text}>This is highlight</Text>
+    </TouchableHighlight>
+  </View>
+);
+
+const App = () => (
+  <View style={styles.container}>
+    {SUPPORTS_NATIVE_FEEDBACK ? <ButtonsWithNativeFeedback /> : <Buttons />}
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: 64,
+    backgroundColor: '#fff',
+  },
+  buttonContainer: {
+    margin: 24,
+  },
+  text: {
+    fontSize: 20,
+    color: '#fff',
+    fontWeight: 'bold',
+  },
+  button: {
+    padding: 25,
+    borderRadius: 5,
+    backgroundColor: '#000',
+    marginBottom: 30,
+  },
+});
+
+export default App;
+```
+
+## Screen orientation lock
+
+Multiple screen orientations should work fine by default unless you're using `Dimensions` API and don't handle orientation changes. If you don't want to support multiple screen orientations, you can lock the screen orientation to either portrait or landscape.
+
+On iOS, in the General tab and Deployment Info section of Xcode enable the Device Orientation you want to support (ensure you have selected iPhone from the Devices menu when making the changes). For Android, open the AndroidManifest.xml file and within the activity element add `'android:screenOrientation="portrait"'` to lock to portrait or `'android:screenOrientation="landscape"'` to lock to landscape.
+
+# Learn more
+
+[Material Design](https://material.io/) and [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines) are great resources for learning more about designing for mobile platforms.
diff --git a/website/versioned_docs/version-0.84/inputaccessoryview.md b/website/versioned_docs/version-0.84/inputaccessoryview.md
index a4f56532fa4..76220b4fd7c 100644
--- a/website/versioned_docs/version-0.84/inputaccessoryview.md
+++ b/website/versioned_docs/version-0.84/inputaccessoryview.md
@@ -1,98 +1,98 @@
----
-id: inputaccessoryview
-title: InputAccessoryView
----
-
-A component which enables customization of the keyboard input accessory view on iOS. The input accessory view is displayed above the keyboard whenever a `TextInput` has focus. This component can be used to create custom toolbars.
-
-To use this component wrap your custom toolbar with the InputAccessoryView component, and set a `nativeID`. Then, pass that `nativeID` as the `inputAccessoryViewID` of whatever `TextInput` you desire. A basic example:
-
-```SnackPlayer name=InputAccessoryView&supportedPlatforms=ios
-import React, {useState} from 'react';
-import {
-  Button,
-  InputAccessoryView,
-  ScrollView,
-  TextInput,
-  StyleSheet,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const inputAccessoryViewID = 'uniqueID';
-const initialText = '';
-
-const App = () => {
-  const [text, setText] = useState(initialText);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <ScrollView keyboardDismissMode="interactive">
-          <TextInput
-            style={styles.textInput}
-            inputAccessoryViewID={inputAccessoryViewID}
-            onChangeText={setText}
-            value={text}
-            placeholder={'Please type here…'}
-          />
-        </ScrollView>
-      </SafeAreaView>
-      <InputAccessoryView nativeID={inputAccessoryViewID}>
-        <Button onPress={() => setText(initialText)} title="Clear text" />
-      </InputAccessoryView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: 20,
-  },
-  textInput: {
-    padding: 16,
-    borderColor: 'black',
-    borderWidth: 1,
-  },
-});
-
-export default App;
-```
-
-This component can also be used to create sticky text inputs (text inputs which are anchored to the top of the keyboard). To do this, wrap a `TextInput` with the `InputAccessoryView` component, and don't set a `nativeID`. For an example, look at [InputAccessoryViewExample.js](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/InputAccessoryView/InputAccessoryViewExample.js).
-
----
-
-# Reference
-
-## Props
-
-### `backgroundColor`
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `nativeID`
-
-An ID which is used to associate this `InputAccessoryView` to specified TextInput(s).
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `style`
-
-| Type                              |
-| --------------------------------- |
-| [View Style](view-style-props.md) |
-
-# Known issues
-
-- [react-native#18997](https://github.com/facebook/react-native/issues/18997): Doesn't support multiline `TextInput`
-- [react-native#20157](https://github.com/facebook/react-native/issues/20157): Can't use with a bottom tab bar
+---
+id: inputaccessoryview
+title: InputAccessoryView
+---
+
+A component which enables customization of the keyboard input accessory view on iOS. The input accessory view is displayed above the keyboard whenever a `TextInput` has focus. This component can be used to create custom toolbars.
+
+To use this component wrap your custom toolbar with the InputAccessoryView component, and set a `nativeID`. Then, pass that `nativeID` as the `inputAccessoryViewID` of whatever `TextInput` you desire. A basic example:
+
+```SnackPlayer name=InputAccessoryView&supportedPlatforms=ios
+import {useState} from 'react';
+import {
+  Button,
+  InputAccessoryView,
+  ScrollView,
+  TextInput,
+  StyleSheet,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const inputAccessoryViewID = 'uniqueID';
+const initialText = '';
+
+const App = () => {
+  const [text, setText] = useState(initialText);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <ScrollView keyboardDismissMode="interactive">
+          <TextInput
+            style={styles.textInput}
+            inputAccessoryViewID={inputAccessoryViewID}
+            onChangeText={setText}
+            value={text}
+            placeholder={'Please type here…'}
+          />
+        </ScrollView>
+      </SafeAreaView>
+      <InputAccessoryView nativeID={inputAccessoryViewID}>
+        <Button onPress={() => setText(initialText)} title="Clear text" />
+      </InputAccessoryView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 20,
+  },
+  textInput: {
+    padding: 16,
+    borderColor: 'black',
+    borderWidth: 1,
+  },
+});
+
+export default App;
+```
+
+This component can also be used to create sticky text inputs (text inputs which are anchored to the top of the keyboard). To do this, wrap a `TextInput` with the `InputAccessoryView` component, and don't set a `nativeID`. For an example, look at [InputAccessoryViewExample.js](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/InputAccessoryView/InputAccessoryViewExample.js).
+
+---
+
+# Reference
+
+## Props
+
+### `backgroundColor`
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `nativeID`
+
+An ID which is used to associate this `InputAccessoryView` to specified TextInput(s).
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `style`
+
+| Type                              |
+| --------------------------------- |
+| [View Style](view-style-props.md) |
+
+# Known issues
+
+- [react-native#18997](https://github.com/facebook/react-native/issues/18997): Doesn't support multiline `TextInput`
+- [react-native#20157](https://github.com/facebook/react-native/issues/20157): Can't use with a bottom tab bar
diff --git a/website/versioned_docs/version-0.84/interactionmanager.md b/website/versioned_docs/version-0.84/interactionmanager.md
index f1851c75212..87aaff50674 100644
--- a/website/versioned_docs/version-0.84/interactionmanager.md
+++ b/website/versioned_docs/version-0.84/interactionmanager.md
@@ -1,422 +1,422 @@
----
-id: interactionmanager
-title: 🗑️ InteractionManager
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-:::warning[Deprecated]
-Avoid long-running work and use [`requestIdleCallback`](global-requestIdleCallback) instead.
-:::
-
-InteractionManager allows long-running work to be scheduled after any interactions/animations have completed. In particular, this allows JavaScript animations to run smoothly.
-
-Applications can schedule tasks to run after interactions with the following:
-
-```tsx
-InteractionManager.runAfterInteractions(() => {
-  // ...long-running synchronous task...
-});
-```
-
-Compare this to other scheduling alternatives:
-
-- `requestAnimationFrame()` for code that animates a view over time.
-- `setImmediate/setTimeout()` run code later, note this may delay animations.
-- `runAfterInteractions()` run code later, without delaying active animations.
-
-The touch handling system considers one or more active touches to be an 'interaction' and will delay `runAfterInteractions()` callbacks until all touches have ended or been cancelled.
-
-InteractionManager also allows applications to register animations by creating an interaction 'handle' on animation start, and clearing it upon completion:
-
-```tsx
-const handle = InteractionManager.createInteractionHandle();
-// run animation... (`runAfterInteractions` tasks are queued)
-// later, on animation completion:
-InteractionManager.clearInteractionHandle(handle);
-// queued tasks run if all handles were cleared
-```
-
-`runAfterInteractions` takes either a plain callback function, or a `PromiseTask` object with a `gen` method that returns a `Promise`. If a `PromiseTask` is supplied, then it is fully resolved (including asynchronous dependencies that also schedule more tasks via `runAfterInteractions`) before starting on the next task that might have been queued up synchronously earlier.
-
-By default, queued tasks are executed together in a loop in one `setImmediate` batch. If `setDeadline` is called with a positive number, then tasks will only be executed until the deadline (in terms of js event loop run time) approaches, at which point execution will yield via setTimeout, allowing events such as touches to start interactions and block queued tasks from executing, making apps more responsive.
-
----
-
-## Example
-
-### Basic
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useEffect} from 'react';
-import {
-  Alert,
-  Animated,
-  InteractionManager,
-  Platform,
-  StyleSheet,
-  Text,
-  useAnimatedValue,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
-
-const useFadeIn = (duration = 5000) => {
-  const opacity = useAnimatedValue(0);
-
-  // Running the animation when the component is mounted
-  useEffect(() => {
-    // Animated.timing() create a interaction handle by default, if you want to disabled that
-    // behaviour you can set isInteraction to false to disabled that.
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration,
-      useNativeDriver: true,
-    }).start();
-  }, [duration, opacity]);
-
-  return opacity;
-};
-
-const Ball = ({onShown}) => {
-  const opacity = useFadeIn();
-
-  // Running a method after the animation
-  useEffect(() => {
-    const interactionPromise = InteractionManager.runAfterInteractions(() =>
-      onShown(),
-    );
-    return () => interactionPromise.cancel();
-  }, [onShown]);
-
-  return <Animated.View style={[styles.ball, {opacity}]} />;
-};
-
-const App = () => {
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>{instructions}</Text>
-        <Ball onShown={() => Alert.alert('Animation is done')} />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  ball: {
-    width: 100,
-    height: 100,
-    backgroundColor: 'salmon',
-    borderRadius: 100,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useEffect} from 'react';
-import {
-  Alert,
-  Animated,
-  InteractionManager,
-  Platform,
-  StyleSheet,
-  Text,
-  useAnimatedValue,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
-
-const useFadeIn = (duration = 5000) => {
-  const opacity = useAnimatedValue(0);
-
-  // Running the animation when the component is mounted
-  useEffect(() => {
-    // Animated.timing() create a interaction handle by default, if you want to disabled that
-    // behaviour you can set isInteraction to false to disabled that.
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration,
-      useNativeDriver: true,
-    }).start();
-  }, [duration, opacity]);
-
-  return opacity;
-};
-
-type BallProps = {
-  onShown: () => void;
-};
-
-const Ball = ({onShown}: BallProps) => {
-  const opacity = useFadeIn();
-
-  // Running a method after the animation
-  useEffect(() => {
-    const interactionPromise = InteractionManager.runAfterInteractions(() =>
-      onShown(),
-    );
-    return () => interactionPromise.cancel();
-  }, [onShown]);
-
-  return <Animated.View style={[styles.ball, {opacity}]} />;
-};
-
-const App = () => {
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>{instructions}</Text>
-        <Ball onShown={() => Alert.alert('Animation is done')} />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  ball: {
-    width: 100,
-    height: 100,
-    backgroundColor: 'salmon',
-    borderRadius: 100,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### Advanced
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useEffect} from 'react';
-import {
-  Alert,
-  Animated,
-  InteractionManager,
-  Platform,
-  StyleSheet,
-  Text,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
-
-// You can create a custom interaction/animation and add
-// support for InteractionManager
-const useCustomInteraction = (timeLocked = 2000) => {
-  useEffect(() => {
-    const handle = InteractionManager.createInteractionHandle();
-
-    setTimeout(
-      () => InteractionManager.clearInteractionHandle(handle),
-      timeLocked,
-    );
-
-    return () => InteractionManager.clearInteractionHandle(handle);
-  }, [timeLocked]);
-};
-
-const Ball = ({onInteractionIsDone}) => {
-  useCustomInteraction();
-
-  // Running a method after the interaction
-  useEffect(() => {
-    InteractionManager.runAfterInteractions(() => onInteractionIsDone());
-  }, [onInteractionIsDone]);
-
-  return <Animated.View style={[styles.ball]} />;
-};
-
-const App = () => {
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>{instructions}</Text>
-        <Ball onInteractionIsDone={() => Alert.alert('Interaction is done')} />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  ball: {
-    width: 100,
-    height: 100,
-    backgroundColor: 'salmon',
-    borderRadius: 100,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useEffect} from 'react';
-import {
-  Alert,
-  Animated,
-  InteractionManager,
-  Platform,
-  StyleSheet,
-  Text,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
-
-// You can create a custom interaction/animation and add
-// support for InteractionManager
-const useCustomInteraction = (timeLocked = 2000) => {
-  useEffect(() => {
-    const handle = InteractionManager.createInteractionHandle();
-
-    setTimeout(
-      () => InteractionManager.clearInteractionHandle(handle),
-      timeLocked,
-    );
-
-    return () => InteractionManager.clearInteractionHandle(handle);
-  }, [timeLocked]);
-};
-
-type BallProps = {
-  onInteractionIsDone: () => void;
-};
-
-const Ball = ({onInteractionIsDone}: BallProps) => {
-  useCustomInteraction();
-
-  // Running a method after the interaction
-  useEffect(() => {
-    InteractionManager.runAfterInteractions(() => onInteractionIsDone());
-  }, [onInteractionIsDone]);
-
-  return <Animated.View style={[styles.ball]} />;
-};
-
-const App = () => {
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>{instructions}</Text>
-        <Ball onInteractionIsDone={() => Alert.alert('Interaction is done')} />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  ball: {
-    width: 100,
-    height: 100,
-    backgroundColor: 'salmon',
-    borderRadius: 100,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-# Reference
-
-## Methods
-
-### `runAfterInteractions()`
-
-```tsx
-static runAfterInteractions(task?: (() => any) | SimpleTask | PromiseTask);
-```
-
-Schedule a function to run after all interactions have completed. Returns a cancellable "promise".
-
----
-
-### `createInteractionHandle()`
-
-```tsx
-static createInteractionHandle(): Handle;
-```
-
-Notify manager that an interaction has started.
-
----
-
-### `clearInteractionHandle()`
-
-```tsx
-static clearInteractionHandle(handle: Handle);
-```
-
-Notify manager that an interaction has completed.
-
----
-
-### `setDeadline()`
-
-```tsx
-static setDeadline(deadline: number);
-```
-
-A positive number will use setTimeout to schedule any tasks after the eventLoopRunningTime hits the deadline value, otherwise all tasks will be executed in one setImmediate batch (default).
+---
+id: interactionmanager
+title: 🗑️ InteractionManager
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+:::warning[Deprecated]
+Avoid long-running work and use [`requestIdleCallback`](global-requestIdleCallback) instead.
+:::
+
+InteractionManager allows long-running work to be scheduled after any interactions/animations have completed. In particular, this allows JavaScript animations to run smoothly.
+
+Applications can schedule tasks to run after interactions with the following:
+
+```tsx
+InteractionManager.runAfterInteractions(() => {
+  // ...long-running synchronous task...
+});
+```
+
+Compare this to other scheduling alternatives:
+
+- `requestAnimationFrame()` for code that animates a view over time.
+- `setImmediate/setTimeout()` run code later, note this may delay animations.
+- `runAfterInteractions()` run code later, without delaying active animations.
+
+The touch handling system considers one or more active touches to be an 'interaction' and will delay `runAfterInteractions()` callbacks until all touches have ended or been cancelled.
+
+InteractionManager also allows applications to register animations by creating an interaction 'handle' on animation start, and clearing it upon completion:
+
+```tsx
+const handle = InteractionManager.createInteractionHandle();
+// run animation... (`runAfterInteractions` tasks are queued)
+// later, on animation completion:
+InteractionManager.clearInteractionHandle(handle);
+// queued tasks run if all handles were cleared
+```
+
+`runAfterInteractions` takes either a plain callback function, or a `PromiseTask` object with a `gen` method that returns a `Promise`. If a `PromiseTask` is supplied, then it is fully resolved (including asynchronous dependencies that also schedule more tasks via `runAfterInteractions`) before starting on the next task that might have been queued up synchronously earlier.
+
+By default, queued tasks are executed together in a loop in one `setImmediate` batch. If `setDeadline` is called with a positive number, then tasks will only be executed until the deadline (in terms of js event loop run time) approaches, at which point execution will yield via setTimeout, allowing events such as touches to start interactions and block queued tasks from executing, making apps more responsive.
+
+---
+
+## Example
+
+### Basic
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=js
+import {useEffect} from 'react';
+import {
+  Alert,
+  Animated,
+  InteractionManager,
+  Platform,
+  StyleSheet,
+  Text,
+  useAnimatedValue,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const instructions = Platform.select({
+  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
+  android:
+    'Double tap R on your keyboard to reload,\n' +
+    'Shake or press menu button for dev menu',
+});
+
+const useFadeIn = (duration = 5000) => {
+  const opacity = useAnimatedValue(0);
+
+  // Running the animation when the component is mounted
+  useEffect(() => {
+    // Animated.timing() create a interaction handle by default, if you want to disabled that
+    // behaviour you can set isInteraction to false to disabled that.
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration,
+      useNativeDriver: true,
+    }).start();
+  }, [duration, opacity]);
+
+  return opacity;
+};
+
+const Ball = ({onShown}) => {
+  const opacity = useFadeIn();
+
+  // Running a method after the animation
+  useEffect(() => {
+    const interactionPromise = InteractionManager.runAfterInteractions(() =>
+      onShown(),
+    );
+    return () => interactionPromise.cancel();
+  }, [onShown]);
+
+  return <Animated.View style={[styles.ball, {opacity}]} />;
+};
+
+const App = () => {
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>{instructions}</Text>
+        <Ball onShown={() => Alert.alert('Animation is done')} />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  ball: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'salmon',
+    borderRadius: 100,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=tsx
+import {useEffect} from 'react';
+import {
+  Alert,
+  Animated,
+  InteractionManager,
+  Platform,
+  StyleSheet,
+  Text,
+  useAnimatedValue,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const instructions = Platform.select({
+  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
+  android:
+    'Double tap R on your keyboard to reload,\n' +
+    'Shake or press menu button for dev menu',
+});
+
+const useFadeIn = (duration = 5000) => {
+  const opacity = useAnimatedValue(0);
+
+  // Running the animation when the component is mounted
+  useEffect(() => {
+    // Animated.timing() create a interaction handle by default, if you want to disabled that
+    // behaviour you can set isInteraction to false to disabled that.
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration,
+      useNativeDriver: true,
+    }).start();
+  }, [duration, opacity]);
+
+  return opacity;
+};
+
+type BallProps = {
+  onShown: () => void;
+};
+
+const Ball = ({onShown}: BallProps) => {
+  const opacity = useFadeIn();
+
+  // Running a method after the animation
+  useEffect(() => {
+    const interactionPromise = InteractionManager.runAfterInteractions(() =>
+      onShown(),
+    );
+    return () => interactionPromise.cancel();
+  }, [onShown]);
+
+  return <Animated.View style={[styles.ball, {opacity}]} />;
+};
+
+const App = () => {
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>{instructions}</Text>
+        <Ball onShown={() => Alert.alert('Animation is done')} />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  ball: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'salmon',
+    borderRadius: 100,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### Advanced
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=js
+import {useEffect} from 'react';
+import {
+  Alert,
+  Animated,
+  InteractionManager,
+  Platform,
+  StyleSheet,
+  Text,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const instructions = Platform.select({
+  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
+  android:
+    'Double tap R on your keyboard to reload,\n' +
+    'Shake or press menu button for dev menu',
+});
+
+// You can create a custom interaction/animation and add
+// support for InteractionManager
+const useCustomInteraction = (timeLocked = 2000) => {
+  useEffect(() => {
+    const handle = InteractionManager.createInteractionHandle();
+
+    setTimeout(
+      () => InteractionManager.clearInteractionHandle(handle),
+      timeLocked,
+    );
+
+    return () => InteractionManager.clearInteractionHandle(handle);
+  }, [timeLocked]);
+};
+
+const Ball = ({onInteractionIsDone}) => {
+  useCustomInteraction();
+
+  // Running a method after the interaction
+  useEffect(() => {
+    InteractionManager.runAfterInteractions(() => onInteractionIsDone());
+  }, [onInteractionIsDone]);
+
+  return <Animated.View style={[styles.ball]} />;
+};
+
+const App = () => {
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>{instructions}</Text>
+        <Ball onInteractionIsDone={() => Alert.alert('Interaction is done')} />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  ball: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'salmon',
+    borderRadius: 100,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=tsx
+import {useEffect} from 'react';
+import {
+  Alert,
+  Animated,
+  InteractionManager,
+  Platform,
+  StyleSheet,
+  Text,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const instructions = Platform.select({
+  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
+  android:
+    'Double tap R on your keyboard to reload,\n' +
+    'Shake or press menu button for dev menu',
+});
+
+// You can create a custom interaction/animation and add
+// support for InteractionManager
+const useCustomInteraction = (timeLocked = 2000) => {
+  useEffect(() => {
+    const handle = InteractionManager.createInteractionHandle();
+
+    setTimeout(
+      () => InteractionManager.clearInteractionHandle(handle),
+      timeLocked,
+    );
+
+    return () => InteractionManager.clearInteractionHandle(handle);
+  }, [timeLocked]);
+};
+
+type BallProps = {
+  onInteractionIsDone: () => void;
+};
+
+const Ball = ({onInteractionIsDone}: BallProps) => {
+  useCustomInteraction();
+
+  // Running a method after the interaction
+  useEffect(() => {
+    InteractionManager.runAfterInteractions(() => onInteractionIsDone());
+  }, [onInteractionIsDone]);
+
+  return <Animated.View style={[styles.ball]} />;
+};
+
+const App = () => {
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>{instructions}</Text>
+        <Ball onInteractionIsDone={() => Alert.alert('Interaction is done')} />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  ball: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'salmon',
+    borderRadius: 100,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+# Reference
+
+## Methods
+
+### `runAfterInteractions()`
+
+```tsx
+static runAfterInteractions(task?: (() => any) | SimpleTask | PromiseTask);
+```
+
+Schedule a function to run after all interactions have completed. Returns a cancellable "promise".
+
+---
+
+### `createInteractionHandle()`
+
+```tsx
+static createInteractionHandle(): Handle;
+```
+
+Notify manager that an interaction has started.
+
+---
+
+### `clearInteractionHandle()`
+
+```tsx
+static clearInteractionHandle(handle: Handle);
+```
+
+Notify manager that an interaction has completed.
+
+---
+
+### `setDeadline()`
+
+```tsx
+static setDeadline(deadline: number);
+```
+
+A positive number will use setTimeout to schedule any tasks after the eventLoopRunningTime hits the deadline value, otherwise all tasks will be executed in one setImmediate batch (default).
diff --git a/website/versioned_docs/version-0.84/intro-react-native-components.md b/website/versioned_docs/version-0.84/intro-react-native-components.md
index eb585964154..2f3a1449d28 100644
--- a/website/versioned_docs/version-0.84/intro-react-native-components.md
+++ b/website/versioned_docs/version-0.84/intro-react-native-components.md
@@ -43,7 +43,6 @@ React Native has many Core Components for everything from controls to activity i
 In the next section, you will start combining these Core Components to learn about how React works. Have a play with them here now!
 
 ```SnackPlayer name=Hello%20World
-import React from 'react';
 import {View, Text, Image, ScrollView, TextInput} from 'react-native';
 
 const App = () => {
diff --git a/website/versioned_docs/version-0.84/introduction.md b/website/versioned_docs/version-0.84/introduction.md
index ba782cd838c..2752b80327b 100644
--- a/website/versioned_docs/version-0.84/introduction.md
+++ b/website/versioned_docs/version-0.84/introduction.md
@@ -30,7 +30,6 @@ While we do our best to assume no prior knowledge of React, Android, or iOS deve
 This introduction lets you get started immediately in your browser with interactive examples like this one:
 
 ```SnackPlayer name=Hello%20World
-import React from 'react';
 import {Text, View} from 'react-native';
 
 const YourApp = () => {
diff --git a/website/versioned_docs/version-0.84/javascript-environment.md b/website/versioned_docs/version-0.84/javascript-environment.md
index ab041dd34cd..2149516a93b 100644
--- a/website/versioned_docs/version-0.84/javascript-environment.md
+++ b/website/versioned_docs/version-0.84/javascript-environment.md
@@ -1,109 +1,109 @@
----
-id: javascript-environment
-title: JavaScript Environment
----
-
-import TableRow from '@site/core/TableRowWithCodeBlock';
-
-## JavaScript Runtime
-
-When using React Native, you're going to be running your JavaScript code in up to three environments:
-
-- In most cases, React Native will use [Hermes](hermes), an open-source JavaScript engine optimized for React Native.
-- If Hermes is disabled, React Native will use [JavaScriptCore](https://trac.webkit.org/wiki/JavaScriptCore), the JavaScript engine that powers Safari. Note that on iOS, JavaScriptCore does not use JIT due to the absence of writable executable memory in iOS apps.
-- When using Chrome debugging, all JavaScript code runs within Chrome itself, communicating with native code via WebSockets. Chrome uses [V8](https://v8.dev/) as its JavaScript engine.
-
-While these environments are very similar, you may end up hitting some inconsistencies. It is best to avoid relying on specifics of any runtime.
-
-## JavaScript Syntax Transformers
-
-Syntax transformers make writing code more enjoyable by allowing you to use new JavaScript syntax without having to wait for support on all interpreters.
-
-React Native ships with the [Babel JavaScript compiler](https://babeljs.io). Check [Babel documentation](https://babeljs.io/docs/plugins/#transform-plugins) on its supported transformations for more details.
-
-A full list of React Native's enabled transformations can be found in [@react-native/babel-preset](https://github.com/facebook/react-native/tree/main/packages/react-native-babel-preset).
-
-<table>
-<thead>
-  <tr><th>Transformation</th><th>Code</th></tr>
-</thead>
-<tbody>
-  <tr><td className="table-heading" colSpan="2">ECMAScript 5</td></tr>
-  <TableRow name="Reserved Words" code="promise.catch(function() {...});" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2015 (ES6)</td></tr>
-  <TableRow name="Arrow functions" code="<C onPress={() => this.setState({pressed: true})} />" url="https://babeljs.io/docs/learn-es2015/#arrows" />
-  <TableRow name="Block scoping" code="let greeting = 'hi';" url="https://babeljs.io/docs/learn-es2015/#let-const" />
-  <TableRow name="Call spread" code="Math.max(...array);" url="https://babeljs.io/docs/learn-es2015/#default-rest-spread" />
-  <TableRow name="Classes" code="class C extends React.Component {render() { return <View />; }}" url="https://babeljs.io/docs/learn-es2015/#classes" />
-  <TableRow name="Computed Properties" code="const key = 'abc'; const obj = {[key]: 10};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
-  <TableRow name="Constants" code="const answer = 42;" url="https://babeljs.io/docs/learn-es2015/#let-const" />
-  <TableRow name="Destructuring" code="const {isActive, style} = this.props;" url="https://babeljs.io/docs/learn-es2015/#destructuring" />
-  <TableRow name="for…of" code="for (var num of [1, 2, 3]) {...};" url="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of" />
-  <TableRow name="Function Name" code="let number = x => x;" url="https://babeljs.io/docs/en/babel-plugin-transform-function-name" />
-  <TableRow name="Literals" code="const b = 0b11; const o = 0o7; const u = 'Hello\u{000A}\u{0009}!';" url="https://babeljs.io/docs/en/babel-plugin-transform-literals" />
-  <TableRow name="Modules" code="import React, {Component} from 'react';" url="https://babeljs.io/docs/learn-es2015/#modules" />
-  <TableRow name="Object Concise Method" code="const obj = {method() { return 10; }};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
-  <TableRow name="Object Short Notation" code="const name = 'vjeux'; const obj = {name};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
-  <TableRow name="Parameters" code="function test(x = 'hello', {a, b}, ...args) {}" url="https://babeljs.io/docs/en/babel-plugin-transform-parameters" />
-  <TableRow name="Rest Params" code="function(type, ...args) {};" url="https://github.com/sebmarkbage/ecmascript-rest-spread" />
-  <TableRow name="Shorthand Properties" code="const o = {a, b, c};" url="https://babeljs.io/docs/en/babel-plugin-transform-shorthand-properties" />
-  <TableRow name="Sticky Regex" code="const a = /o+/y;" url="https://babeljs.io/docs/en/babel-plugin-transform-sticky-regex" />
-  <TableRow name="Template Literals" code="const who = 'world'; const str = `Hello ${who}`;" url="https://babeljs.io/docs/learn-es2015/#template-strings" />
-  <TableRow name="Unicode Regex" code="const string = 'foo💩bar'; const match = string.match(/foo(.)bar/u);" url="https://babeljs.io/docs/en/babel-plugin-transform-unicode-regex" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2016 (ES7)</td></tr>
-  <TableRow name="Exponentiation Operator" code="let x = 10 ** 2;" url="https://babeljs.io/docs/en/babel-plugin-transform-exponentiation-operator" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2017 (ES8)</td></tr>
-  <TableRow name="Async Functions" code="async function doStuffAsync() {const foo = await doOtherStuffAsync();};" url="https://github.com/tc39/ecmascript-asyncawait" />
-  <TableRow name="Function Trailing Comma" code="function f(a, b, c,) {};" url="https://github.com/jeffmo/es-trailing-function-commas" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2018 (ES9)</td></tr>
-  <TableRow name="Object Spread" code="const extended = {...obj, a: 10};" url="https://github.com/tc39/proposal-object-rest-spread" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2019 (ES10)</td></tr>
-  <TableRow name="Optional Catch Binding" code="try {throw 0; } catch { doSomethingWhichDoesNotCareAboutTheValueThrown();}" url="https://babeljs.io/docs/en/babel-plugin-proposal-optional-catch-binding" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2020 (ES11)</td></tr>
-  <TableRow name="Dynamic Imports" code="const package = await import('package'); package.function()" url="https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import" />
-  <TableRow name="Nullish Coalescing Operator" code="const foo = object.foo ?? 'default';" url="https://babeljs.io/docs/en/babel-plugin-proposal-nullish-coalescing-operator" />
-  <TableRow name="Optional Chaining" code="const name = obj.user?.name;" url="https://github.com/tc39/proposal-optional-chaining" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2022 (ES13)</td></tr>
-  <TableRow name="Class Fields" code="class Bork {static a = 'foo'; static b; x = 'bar'; y;}" url="https://babeljs.io/docs/en/babel-plugin-proposal-class-properties" />
-  <tr><td className="table-heading" colSpan="2">Stage 1 Proposal</td></tr>
-  <TableRow name="Export Default From" code="export v from 'mod';" url="https://babeljs.io/docs/en/babel-plugin-proposal-export-default-from" />
-  <tr><td className="table-heading" colSpan="2">Miscellaneous</td></tr>
-  <TableRow name="Babel Template" code="template(`const %%importName%% = require(%%source%%);`);" url="https://babeljs.io/docs/en/babel-template" />
-  <TableRow name="Flow" code="function foo(x: ?number): string {};" url="https://flowtype.org/" />
-  <TableRow name="ESM to CJS" code="export default 42;" url="https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs" />
-  <TableRow name="JSX" code="<View style={{color: 'red'}} />" url="https://react.dev/learn/writing-markup-with-jsx" />
-  <TableRow name="Object Assign" code="Object.assign(a, b);" url="https://babeljs.io/docs/en/babel-plugin-transform-object-assign" />
-  <TableRow name="React Display Name" code="const bar = createReactClass({});" url="https://babeljs.io/docs/en/babel-plugin-transform-react-display-name" />
-  <TableRow name="TypeScript" code="function foo(x: {hello: true, target: 'react native!'}): string {};" url="https://www.typescriptlang.org/" />
-</tbody>
-</table>
-
-## Polyfills
-
-Many standard functions are also available on all the supported JavaScript runtimes.
-
-#### Browser
-
-- [CommonJS `require`](https://nodejs.org/docs/latest/api/modules.html)
-- `md [console.{log, warn, error, info, debug, trace, table, group, groupCollapsed, groupEnd}](https://developer.chrome.com/devtools/docs/console-api)`
-- [`XMLHttpRequest`, `fetch`](network.md#content)
-- [`{set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame`](timers.md#content)
-
-#### ECMAScript 2015 (ES6)
-
-- [`Array.from`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from)
-- `md Array.prototype.{[find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find), [findIndex](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)}`
-- [`Object.assign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
-- `md String.prototype.{[startsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith), [endsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith), [repeat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat), [includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes)}`
-
-#### ECMAScript 2016 (ES7)
-
-- `md Array.prototype.[includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)`
-
-#### ECMAScript 2017 (ES8)
-
-- `md Object.{[entries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries), [values](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values)}`
-
-#### Specific
-
-- `__DEV__`
+---
+id: javascript-environment
+title: JavaScript Environment
+---
+
+import TableRow from '@site/core/TableRowWithCodeBlock';
+
+## JavaScript Runtime
+
+When using React Native, you're going to be running your JavaScript code in up to three environments:
+
+- In most cases, React Native will use [Hermes](hermes), an open-source JavaScript engine optimized for React Native.
+- If Hermes is disabled, React Native will use [JavaScriptCore](https://trac.webkit.org/wiki/JavaScriptCore), the JavaScript engine that powers Safari. Note that on iOS, JavaScriptCore does not use JIT due to the absence of writable executable memory in iOS apps.
+- When using Chrome debugging, all JavaScript code runs within Chrome itself, communicating with native code via WebSockets. Chrome uses [V8](https://v8.dev/) as its JavaScript engine.
+
+While these environments are very similar, you may end up hitting some inconsistencies. It is best to avoid relying on specifics of any runtime.
+
+## JavaScript Syntax Transformers
+
+Syntax transformers make writing code more enjoyable by allowing you to use new JavaScript syntax without having to wait for support on all interpreters.
+
+React Native ships with the [Babel JavaScript compiler](https://babeljs.io). Check [Babel documentation](https://babeljs.io/docs/plugins/#transform-plugins) on its supported transformations for more details.
+
+A full list of React Native's enabled transformations can be found in [@react-native/babel-preset](https://github.com/facebook/react-native/tree/main/packages/react-native-babel-preset).
+
+<table>
+<thead>
+  <tr><th>Transformation</th><th>Code</th></tr>
+</thead>
+<tbody>
+  <tr><td className="table-heading" colSpan="2">ECMAScript 5</td></tr>
+  <TableRow name="Reserved Words" code="promise.catch(function() {...});" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2015 (ES6)</td></tr>
+  <TableRow name="Arrow functions" code="<C onPress={() => this.setState({pressed: true})} />" url="https://babeljs.io/docs/learn-es2015/#arrows" />
+  <TableRow name="Block scoping" code="let greeting = 'hi';" url="https://babeljs.io/docs/learn-es2015/#let-const" />
+  <TableRow name="Call spread" code="Math.max(...array);" url="https://babeljs.io/docs/learn-es2015/#default-rest-spread" />
+  <TableRow name="Classes" code="class C extends React.Component {render() { return <View />; }}" url="https://babeljs.io/docs/learn-es2015/#classes" />
+  <TableRow name="Computed Properties" code="const key = 'abc'; const obj = {[key]: 10};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
+  <TableRow name="Constants" code="const answer = 42;" url="https://babeljs.io/docs/learn-es2015/#let-const" />
+  <TableRow name="Destructuring" code="const {isActive, style} = this.props;" url="https://babeljs.io/docs/learn-es2015/#destructuring" />
+  <TableRow name="for…of" code="for (var num of [1, 2, 3]) {...};" url="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of" />
+  <TableRow name="Function Name" code="let number = x => x;" url="https://babeljs.io/docs/en/babel-plugin-transform-function-name" />
+  <TableRow name="Literals" code="const b = 0b11; const o = 0o7; const u = 'Hello\u{000A}\u{0009}!';" url="https://babeljs.io/docs/en/babel-plugin-transform-literals" />
+  <TableRow name="Modules" code="import {Component} from 'react';" url="https://babeljs.io/docs/learn-es2015/#modules" />
+  <TableRow name="Object Concise Method" code="const obj = {method() { return 10; }};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
+  <TableRow name="Object Short Notation" code="const name = 'vjeux'; const obj = {name};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
+  <TableRow name="Parameters" code="function test(x = 'hello', {a, b}, ...args) {}" url="https://babeljs.io/docs/en/babel-plugin-transform-parameters" />
+  <TableRow name="Rest Params" code="function(type, ...args) {};" url="https://github.com/sebmarkbage/ecmascript-rest-spread" />
+  <TableRow name="Shorthand Properties" code="const o = {a, b, c};" url="https://babeljs.io/docs/en/babel-plugin-transform-shorthand-properties" />
+  <TableRow name="Sticky Regex" code="const a = /o+/y;" url="https://babeljs.io/docs/en/babel-plugin-transform-sticky-regex" />
+  <TableRow name="Template Literals" code="const who = 'world'; const str = `Hello ${who}`;" url="https://babeljs.io/docs/learn-es2015/#template-strings" />
+  <TableRow name="Unicode Regex" code="const string = 'foo💩bar'; const match = string.match(/foo(.)bar/u);" url="https://babeljs.io/docs/en/babel-plugin-transform-unicode-regex" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2016 (ES7)</td></tr>
+  <TableRow name="Exponentiation Operator" code="let x = 10 ** 2;" url="https://babeljs.io/docs/en/babel-plugin-transform-exponentiation-operator" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2017 (ES8)</td></tr>
+  <TableRow name="Async Functions" code="async function doStuffAsync() {const foo = await doOtherStuffAsync();};" url="https://github.com/tc39/ecmascript-asyncawait" />
+  <TableRow name="Function Trailing Comma" code="function f(a, b, c,) {};" url="https://github.com/jeffmo/es-trailing-function-commas" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2018 (ES9)</td></tr>
+  <TableRow name="Object Spread" code="const extended = {...obj, a: 10};" url="https://github.com/tc39/proposal-object-rest-spread" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2019 (ES10)</td></tr>
+  <TableRow name="Optional Catch Binding" code="try {throw 0; } catch { doSomethingWhichDoesNotCareAboutTheValueThrown();}" url="https://babeljs.io/docs/en/babel-plugin-proposal-optional-catch-binding" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2020 (ES11)</td></tr>
+  <TableRow name="Dynamic Imports" code="const package = await import('package'); package.function()" url="https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import" />
+  <TableRow name="Nullish Coalescing Operator" code="const foo = object.foo ?? 'default';" url="https://babeljs.io/docs/en/babel-plugin-proposal-nullish-coalescing-operator" />
+  <TableRow name="Optional Chaining" code="const name = obj.user?.name;" url="https://github.com/tc39/proposal-optional-chaining" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2022 (ES13)</td></tr>
+  <TableRow name="Class Fields" code="class Bork {static a = 'foo'; static b; x = 'bar'; y;}" url="https://babeljs.io/docs/en/babel-plugin-proposal-class-properties" />
+  <tr><td className="table-heading" colSpan="2">Stage 1 Proposal</td></tr>
+  <TableRow name="Export Default From" code="export v from 'mod';" url="https://babeljs.io/docs/en/babel-plugin-proposal-export-default-from" />
+  <tr><td className="table-heading" colSpan="2">Miscellaneous</td></tr>
+  <TableRow name="Babel Template" code="template(`const %%importName%% = require(%%source%%);`);" url="https://babeljs.io/docs/en/babel-template" />
+  <TableRow name="Flow" code="function foo(x: ?number): string {};" url="https://flowtype.org/" />
+  <TableRow name="ESM to CJS" code="export default 42;" url="https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs" />
+  <TableRow name="JSX" code="<View style={{color: 'red'}} />" url="https://react.dev/learn/writing-markup-with-jsx" />
+  <TableRow name="Object Assign" code="Object.assign(a, b);" url="https://babeljs.io/docs/en/babel-plugin-transform-object-assign" />
+  <TableRow name="React Display Name" code="const bar = createReactClass({});" url="https://babeljs.io/docs/en/babel-plugin-transform-react-display-name" />
+  <TableRow name="TypeScript" code="function foo(x: {hello: true, target: 'react native!'}): string {};" url="https://www.typescriptlang.org/" />
+</tbody>
+</table>
+
+## Polyfills
+
+Many standard functions are also available on all the supported JavaScript runtimes.
+
+#### Browser
+
+- [CommonJS `require`](https://nodejs.org/docs/latest/api/modules.html)
+- `md [console.{log, warn, error, info, debug, trace, table, group, groupCollapsed, groupEnd}](https://developer.chrome.com/devtools/docs/console-api)`
+- [`XMLHttpRequest`, `fetch`](network.md#content)
+- [`{set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame`](timers.md#content)
+
+#### ECMAScript 2015 (ES6)
+
+- [`Array.from`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from)
+- `md Array.prototype.{[find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find), [findIndex](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)}`
+- [`Object.assign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
+- `md String.prototype.{[startsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith), [endsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith), [repeat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat), [includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes)}`
+
+#### ECMAScript 2016 (ES7)
+
+- `md Array.prototype.[includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)`
+
+#### ECMAScript 2017 (ES8)
+
+- `md Object.{[entries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries), [values](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values)}`
+
+#### Specific
+
+- `__DEV__`
diff --git a/website/versioned_docs/version-0.84/keyboard.md b/website/versioned_docs/version-0.84/keyboard.md
index 8560ce4999d..de1ec7b870b 100644
--- a/website/versioned_docs/version-0.84/keyboard.md
+++ b/website/versioned_docs/version-0.84/keyboard.md
@@ -1,146 +1,146 @@
----
-id: keyboard
-title: Keyboard
----
-
-`Keyboard` module to control keyboard events.
-
-### Usage
-
-The Keyboard module allows you to listen for native events and react to them, as well as make changes to the keyboard, like dismissing it.
-
-```SnackPlayer name=Keyboard%20Example&supportedPlatforms=ios,android
-import React, {useState, useEffect} from 'react';
-import {Keyboard, Text, TextInput, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const Example = () => {
-  const [keyboardStatus, setKeyboardStatus] = useState('Keyboard Hidden');
-
-  useEffect(() => {
-    const showSubscription = Keyboard.addListener('keyboardDidShow', () => {
-      setKeyboardStatus('Keyboard Shown');
-    });
-    const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
-      setKeyboardStatus('Keyboard Hidden');
-    });
-
-    return () => {
-      showSubscription.remove();
-      hideSubscription.remove();
-    };
-  }, []);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={style.container}>
-        <TextInput
-          style={style.input}
-          placeholder="Click here…"
-          onSubmitEditing={Keyboard.dismiss}
-        />
-        <Text style={style.status}>{keyboardStatus}</Text>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const style = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 36,
-  },
-  input: {
-    padding: 10,
-    borderWidth: 0.5,
-    borderRadius: 4,
-  },
-  status: {
-    padding: 16,
-    textAlign: 'center',
-  },
-});
-
-export default Example;
-```
-
----
-
-# Reference
-
-## Methods
-
-### `addListener()`
-
-```tsx
-static addListener: (
-  eventType: KeyboardEventName,
-  listener: KeyboardEventListener,
-) => EmitterSubscription;
-```
-
-The `addListener` function connects a JavaScript function to an identified native keyboard notification event.
-
-This function then returns the reference to the listener.
-
-**Parameters:**
-
-| Name                                                                     | Type     | Description                                                                    |
-| ------------------------------------------------------------------------ | -------- | ------------------------------------------------------------------------------ |
-| eventName <div className="label basic two-lines required">Required</div> | string   | The string that identifies the event you're listening for. See the list below. |
-| callback <div className="label basic two-lines required">Required</div>  | function | The function to be called when the event fires                                 |
-
-**`eventName`**
-
-This can be any of the following:
-
-- `keyboardWillShow`
-- `keyboardDidShow`
-- `keyboardWillHide`
-- `keyboardDidHide`
-- `keyboardWillChangeFrame`
-- `keyboardDidChangeFrame`
-
-:::note
-Only `keyboardDidShow` and `keyboardDidHide` events are available on Android. The events will not be fired when using Android 10 or below if your activity has `android:windowSoftInputMode` set to `adjustResize` or `adjustNothing`.
-:::
-
----
-
-### `dismiss()`
-
-```tsx
-static dismiss();
-```
-
-Dismisses the active keyboard and removes focus.
-
----
-
-### `scheduleLayoutAnimation`
-
-```tsx
-static scheduleLayoutAnimation(event: KeyboardEvent);
-```
-
-Useful for syncing TextInput (or other keyboard accessory view) size of position changes with keyboard movements.
-
----
-
-### `isVisible()`
-
-```tsx
-static isVisible(): boolean;
-```
-
-Whether the keyboard is last known to be visible.
-
----
-
-### `metrics()`
-
-```tsx
-static metrics(): KeyboardMetrics | undefined;
-```
-
-Return the metrics of the soft-keyboard if visible.
+---
+id: keyboard
+title: Keyboard
+---
+
+`Keyboard` module to control keyboard events.
+
+### Usage
+
+The Keyboard module allows you to listen for native events and react to them, as well as make changes to the keyboard, like dismissing it.
+
+```SnackPlayer name=Keyboard%20Example&supportedPlatforms=ios,android
+import {useState, useEffect} from 'react';
+import {Keyboard, Text, TextInput, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const Example = () => {
+  const [keyboardStatus, setKeyboardStatus] = useState('Keyboard Hidden');
+
+  useEffect(() => {
+    const showSubscription = Keyboard.addListener('keyboardDidShow', () => {
+      setKeyboardStatus('Keyboard Shown');
+    });
+    const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
+      setKeyboardStatus('Keyboard Hidden');
+    });
+
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={style.container}>
+        <TextInput
+          style={style.input}
+          placeholder="Click here…"
+          onSubmitEditing={Keyboard.dismiss}
+        />
+        <Text style={style.status}>{keyboardStatus}</Text>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const style = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 36,
+  },
+  input: {
+    padding: 10,
+    borderWidth: 0.5,
+    borderRadius: 4,
+  },
+  status: {
+    padding: 16,
+    textAlign: 'center',
+  },
+});
+
+export default Example;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `addListener()`
+
+```tsx
+static addListener: (
+  eventType: KeyboardEventName,
+  listener: KeyboardEventListener,
+) => EmitterSubscription;
+```
+
+The `addListener` function connects a JavaScript function to an identified native keyboard notification event.
+
+This function then returns the reference to the listener.
+
+**Parameters:**
+
+| Name                                                                     | Type     | Description                                                                    |
+| ------------------------------------------------------------------------ | -------- | ------------------------------------------------------------------------------ |
+| eventName <div className="label basic two-lines required">Required</div> | string   | The string that identifies the event you're listening for. See the list below. |
+| callback <div className="label basic two-lines required">Required</div>  | function | The function to be called when the event fires                                 |
+
+**`eventName`**
+
+This can be any of the following:
+
+- `keyboardWillShow`
+- `keyboardDidShow`
+- `keyboardWillHide`
+- `keyboardDidHide`
+- `keyboardWillChangeFrame`
+- `keyboardDidChangeFrame`
+
+:::note
+Only `keyboardDidShow` and `keyboardDidHide` events are available on Android. The events will not be fired when using Android 10 or below if your activity has `android:windowSoftInputMode` set to `adjustResize` or `adjustNothing`.
+:::
+
+---
+
+### `dismiss()`
+
+```tsx
+static dismiss();
+```
+
+Dismisses the active keyboard and removes focus.
+
+---
+
+### `scheduleLayoutAnimation`
+
+```tsx
+static scheduleLayoutAnimation(event: KeyboardEvent);
+```
+
+Useful for syncing TextInput (or other keyboard accessory view) size of position changes with keyboard movements.
+
+---
+
+### `isVisible()`
+
+```tsx
+static isVisible(): boolean;
+```
+
+Whether the keyboard is last known to be visible.
+
+---
+
+### `metrics()`
+
+```tsx
+static metrics(): KeyboardMetrics | undefined;
+```
+
+Return the metrics of the soft-keyboard if visible.
diff --git a/website/versioned_docs/version-0.84/keyboardavoidingview.md b/website/versioned_docs/version-0.84/keyboardavoidingview.md
index 55cce32cf54..cc650dd0f57 100644
--- a/website/versioned_docs/version-0.84/keyboardavoidingview.md
+++ b/website/versioned_docs/version-0.84/keyboardavoidingview.md
@@ -8,7 +8,6 @@ This component will automatically adjust its height, position, or bottom padding
 ## Example
 
 ```SnackPlayer name=KeyboardAvoidingView&supportedPlatforms=android,ios
-import React from 'react';
 import {
   View,
   KeyboardAvoidingView,
diff --git a/website/versioned_docs/version-0.84/layout-props.md b/website/versioned_docs/version-0.84/layout-props.md
index b3673e0c849..0d10649d7d6 100644
--- a/website/versioned_docs/version-0.84/layout-props.md
+++ b/website/versioned_docs/version-0.84/layout-props.md
@@ -1,1360 +1,1360 @@
----
-id: layout-props
-title: Layout Props
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-:::info
-More detailed examples about those properties can be found on the [Layout with Flexbox](flexbox) page.
-:::
-
-### Example
-
-The following example shows how different properties can affect or shape a React Native layout. You can try for example to add or remove squares from the UI while changing the values of the property `flexWrap`.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=LayoutProps%20Example&ext=js
-import React, {useState} from 'react';
-import {Button, ScrollView, StyleSheet, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [flexDirection, setFlexDirection] = useState(0);
-  const [justifyContent, setJustifyContent] = useState(0);
-  const [alignItems, setAlignItems] = useState(0);
-  const [direction, setDirection] = useState(0);
-  const [wrap, setWrap] = useState(0);
-
-  const [squares, setSquares] = useState([<Square />, <Square />, <Square />]);
-
-  const hookedStyles = {
-    flexDirection: flexDirections[flexDirection],
-    justifyContent: justifyContents[justifyContent],
-    alignItems: alignItemsArr[alignItems],
-    direction: directions[direction],
-    flexWrap: wraps[wrap],
-  };
-
-  const changeSetting = (value, options, setterFunction) => {
-    if (value === options.length - 1) {
-      setterFunction(0);
-      return;
-    }
-    setterFunction(value + 1);
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={[styles.container, styles.playingSpace, hookedStyles]}>
-          {squares.map(elem => elem)}
-        </View>
-        <ScrollView style={styles.layoutContainer}>
-          <View style={styles.controlSpace}>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Flex Direction"
-                onPress={() =>
-                  changeSetting(flexDirection, flexDirections, setFlexDirection)
-                }
-              />
-              <Text style={styles.text}>{flexDirections[flexDirection]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Justify Content"
-                onPress={() =>
-                  changeSetting(
-                    justifyContent,
-                    justifyContents,
-                    setJustifyContent,
-                  )
-                }
-              />
-              <Text style={styles.text}>{justifyContents[justifyContent]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Align Items"
-                onPress={() =>
-                  changeSetting(alignItems, alignItemsArr, setAlignItems)
-                }
-              />
-              <Text style={styles.text}>{alignItemsArr[alignItems]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Direction"
-                onPress={() =>
-                  changeSetting(direction, directions, setDirection)
-                }
-              />
-              <Text style={styles.text}>{directions[direction]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Flex Wrap"
-                onPress={() => changeSetting(wrap, wraps, setWrap)}
-              />
-              <Text style={styles.text}>{wraps[wrap]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Add Square"
-                onPress={() => setSquares([...squares, <Square />])}
-              />
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Delete Square"
-                onPress={() =>
-                  setSquares(squares.filter((v, i) => i !== squares.length - 1))
-                }
-              />
-            </View>
-          </View>
-        </ScrollView>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const flexDirections = ['row', 'row-reverse', 'column', 'column-reverse'];
-const justifyContents = [
-  'flex-start',
-  'flex-end',
-  'center',
-  'space-between',
-  'space-around',
-  'space-evenly',
-];
-const alignItemsArr = [
-  'flex-start',
-  'flex-end',
-  'center',
-  'stretch',
-  'baseline',
-];
-const wraps = ['nowrap', 'wrap', 'wrap-reverse'];
-const directions = ['inherit', 'ltr', 'rtl'];
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  layoutContainer: {
-    flex: 0.5,
-  },
-  playingSpace: {
-    backgroundColor: 'white',
-    borderColor: 'blue',
-    borderWidth: 3,
-    overflow: 'hidden',
-  },
-  controlSpace: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  buttonView: {
-    width: '50%',
-    padding: 10,
-  },
-  text: {
-    textAlign: 'center',
-  },
-});
-
-const Square = () => (
-  <View
-    style={{
-      width: 50,
-      height: 50,
-      backgroundColor: randomHexColor(),
-    }}
-  />
-);
-
-const randomHexColor = () => {
-  return '#000000'.replace(/0/g, () => {
-    return Math.round(Math.random() * 14).toString(16);
-  });
-};
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=LayoutProps%20Example&ext=tsx
-import React, {useState} from 'react';
-import {
-  Button,
-  ScrollView,
-  StyleSheet,
-  Text,
-  View,
-  FlexAlignType,
-  FlexStyle,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [flexDirection, setFlexDirection] = useState(0);
-  const [justifyContent, setJustifyContent] = useState(0);
-  const [alignItems, setAlignItems] = useState(0);
-  const [direction, setDirection] = useState(0);
-  const [wrap, setWrap] = useState(0);
-
-  const [squares, setSquares] = useState([<Square />, <Square />, <Square />]);
-
-  const hookedStyles = {
-    flexDirection: flexDirections[flexDirection],
-    justifyContent: justifyContents[justifyContent],
-    alignItems: alignItemsArr[alignItems],
-    direction: directions[direction],
-    flexWrap: wraps[wrap],
-  } as FlexStyle;
-
-  const changeSetting = (
-    value: number,
-    options: any[],
-    setterFunction: (index: number) => void,
-  ) => {
-    if (value === options.length - 1) {
-      setterFunction(0);
-      return;
-    }
-    setterFunction(value + 1);
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={[styles.container, styles.playingSpace, hookedStyles]}>
-          {squares.map(elem => elem)}
-        </View>
-        <ScrollView style={styles.layoutContainer}>
-          <View style={styles.controlSpace}>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Flex Direction"
-                onPress={() =>
-                  changeSetting(flexDirection, flexDirections, setFlexDirection)
-                }
-              />
-              <Text style={styles.text}>{flexDirections[flexDirection]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Justify Content"
-                onPress={() =>
-                  changeSetting(
-                    justifyContent,
-                    justifyContents,
-                    setJustifyContent,
-                  )
-                }
-              />
-              <Text style={styles.text}>{justifyContents[justifyContent]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Align Items"
-                onPress={() =>
-                  changeSetting(alignItems, alignItemsArr, setAlignItems)
-                }
-              />
-              <Text style={styles.text}>{alignItemsArr[alignItems]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Direction"
-                onPress={() =>
-                  changeSetting(direction, directions, setDirection)
-                }
-              />
-              <Text style={styles.text}>{directions[direction]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Flex Wrap"
-                onPress={() => changeSetting(wrap, wraps, setWrap)}
-              />
-              <Text style={styles.text}>{wraps[wrap]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Add Square"
-                onPress={() => setSquares([...squares, <Square />])}
-              />
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Delete Square"
-                onPress={() =>
-                  setSquares(squares.filter((v, i) => i !== squares.length - 1))
-                }
-              />
-            </View>
-          </View>
-        </ScrollView>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const flexDirections = [
-  'row',
-  'row-reverse',
-  'column',
-  'column-reverse',
-] as FlexStyle['flexDirection'][];
-const justifyContents = [
-  'flex-start',
-  'flex-end',
-  'center',
-  'space-between',
-  'space-around',
-  'space-evenly',
-] as FlexStyle['justifyContent'][];
-const alignItemsArr = [
-  'flex-start',
-  'flex-end',
-  'center',
-  'stretch',
-  'baseline',
-] as FlexAlignType[];
-const wraps = ['nowrap', 'wrap', 'wrap-reverse'];
-const directions = ['inherit', 'ltr', 'rtl'];
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  layoutContainer: {
-    flex: 0.5,
-  },
-  playingSpace: {
-    backgroundColor: 'white',
-    borderColor: 'blue',
-    borderWidth: 3,
-    overflow: 'hidden',
-  },
-  controlSpace: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  buttonView: {
-    width: '50%',
-    padding: 10,
-  },
-  text: {
-    textAlign: 'center',
-  },
-});
-
-const Square = () => (
-  <View
-    style={{
-      width: 50,
-      height: 50,
-      backgroundColor: randomHexColor(),
-    }}
-  />
-);
-
-const randomHexColor = () => {
-  return '#000000'.replace(/0/g, () => {
-    return Math.round(Math.random() * 14).toString(16);
-  });
-};
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
----
-
-# Reference
-
-## Props
-
-### `alignContent`
-
-`alignContent` controls how rows align in the cross direction, overriding the `alignContent` of the parent.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) for more details.
-
-| Type                                                                                                 | Required |
-| ---------------------------------------------------------------------------------------------------- | -------- |
-| enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around', 'space-evenly') | No       |
-
----
-
-### `alignItems`
-
-`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS (default: stretch).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) for more details.
-
-| Type                                                            | Required |
-| --------------------------------------------------------------- | -------- |
-| enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline') | No       |
-
----
-
-### `alignSelf`
-
-`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS (default: auto).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) for more details.
-
-| Type                                                                    | Required |
-| ----------------------------------------------------------------------- | -------- |
-| enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline') | No       |
-
----
-
-### `aspectRatio`
-
-Aspect ratio controls the size of the undefined dimension of a node.
-
-- On a node with a set width/height, aspect ratio controls the size of the unset dimension
-- On a node with a set flex basis, aspect ratio controls the size of the node in the cross axis if unset
-- On a node with a measure function, aspect ratio works as though the measure function measures the flex basis
-- On a node with flex grow/shrink, aspect ratio controls the size of the node in the cross axis if unset
-- Aspect ratio takes min/max dimensions into account
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `borderBottomWidth`
-
-`borderBottomWidth` works like `border-bottom-width` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderEndWidth`
-
-When direction is `ltr`, `borderEndWidth` is equivalent to `borderRightWidth`. When direction is `rtl`, `borderEndWidth` is equivalent to `borderLeftWidth`.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderLeftWidth`
-
-`borderLeftWidth` works like `border-left-width` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderRightWidth`
-
-`borderRightWidth` works like `border-right-width` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderStartWidth`
-
-When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. When direction is `rtl`, `borderStartWidth` is equivalent to `borderRightWidth`.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderTopWidth`
-
-`borderTopWidth` works like `border-top-width` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderWidth`
-
-`borderWidth` works like `border-width` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `bottom`
-
-`bottom` is the number of logical pixels to offset the bottom edge of this component.
-
-It works similarly to `bottom` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) for more details of how `bottom` affects layout.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `boxSizing`
-
-`boxSizing` defines how the element's various sizing props (`width`, `height`, `minWidth`, `minHeight`, etc.) are computed. If `boxSizing` is `border-box`, these sizes apply to the border box of the element. If it is `content-box`, they apply to the content box of the element. The default value is `border-box`. The [web documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) is a good source of information if you wish to learn more about how this prop works.
-
-| Type                              | Required |
-| --------------------------------- | -------- |
-| enum('border-box', 'content-box') | No       |
-
----
-
-### `columnGap`
-
-`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `direction`
-
-`direction` specifies the directional flow of the user interface. The default is `inherit`, except for root node which will have value based on the current locale.
-
-See [MDN CSS Reference](https://www.yogalayout.dev/docs/styling/layout-direction) for more details.
-
-| Type                          | Required |
-| ----------------------------- | -------- |
-| enum('inherit', 'ltr', 'rtl') | No       |
-
----
-
-### `display`
-
-`display` sets the display type of this component.
-
-It works similarly to `display` in CSS but only supports the values 'flex', 'none', and 'contents'. The default is `flex`.
-
-| Type                             | Required |
-| -------------------------------- | -------- |
-| enum('none', 'flex', 'contents') | No       |
-
----
-
-### `end`
-
-When the direction is `ltr`, `end` is equivalent to `right`. When the direction is `rtl`, `end` is equivalent to `left`.
-
-This style takes precedence over the `left` and `right` styles.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `flex`
-
-In React Native `flex` does not work the same way that it does in CSS. `flex` is a number rather than a string, and it works according to the [Yoga](https://github.com/facebook/yoga) layout engine.
-
-When `flex` is a positive number, it makes the component flexible, and it will be sized proportional to its flex value. So a component with `flex` set to `2` will take twice the space as a component with `flex` set to 1. `flex: <positive number>` equates to `flexGrow: <positive number>, flexShrink: 1, flexBasis: 0`.
-
-When `flex` is `0`, the component is sized according to `width` and `height`, and it is inflexible.
-
-When `flex` is `-1`, the component is normally sized according to `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`.
-
-`flexGrow`, `flexShrink`, and `flexBasis` work the same as in CSS.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `flexBasis`
-
-`flexBasis` is an axis-independent way of providing the default size of an item along the main axis. Setting the `flexBasis` of a child is similar to setting the `width` of that child if its parent is a container with `flexDirection: row` or setting the `height` of a child if its parent is a container with `flexDirection: column`. The `flexBasis` of an item is the default size of that item, the size of the item before any `flexGrow` and `flexShrink` calculations are performed.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `flexDirection`
-
-`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) for more details.
-
-| Type                                                   | Required |
-| ------------------------------------------------------ | -------- |
-| enum('row', 'row-reverse', 'column', 'column-reverse') | No       |
-
----
-
-### `flexGrow`
-
-`flexGrow` describes how any space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
-
-`flexGrow` accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the children’s `flexGrow` values.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `flexShrink`
-
-[`flexShrink`](layout-props#flexshrink) describes how to shrink children along the main axis in the case in which the total size of the children overflows the size of the container on the main axis. `flexShrink` is very similar to `flexGrow` and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed.
-
-`flexShrink` accepts any floating point value >= 0, with 0 being the default value. A container will shrink its children weighted by the children’s `flexShrink` values.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `flexWrap`
-
-`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS (default: nowrap).
-
-Note it does not work anymore with `alignItems: stretch` (the default), so you may want to use `alignItems: flex-start` for example (breaking change details: https://github.com/facebook/react-native/releases/tag/v0.28.0).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) for more details.
-
-| Type                                   | Required |
-| -------------------------------------- | -------- |
-| enum('wrap', 'nowrap', 'wrap-reverse') | No       |
-
----
-
-### `gap`
-
-`gap` works like `gap` in CSS. Only pixel units are supported in React Native.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `height`
-
-`height` sets the height of this component.
-
-It works similarly to `height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/height) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `inset`
-
-:::note
-`inset` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Setting `inset` has the same effect as setting each of `top`, `bottom`, `right` and `left` props.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/inset) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetBlock`
-
-:::note
-`insetBlock` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Equivalent to [`top`](layout-props#top) and [`bottom`](layout-props#bottom).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetBlockEnd`
-
-:::note
-`insetBlockEnd` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Equivalent to [`bottom`](layout-props#bottom).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetBlockStart`
-
-:::note
-`insetBlockStart` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Equivalent to [`top`](layout-props#top).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetInline`
-
-:::note
-`insetInline` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Equivalent to [`right`](layout-props#right) and [`left`](layout-props#left).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetInlineEnd`
-
-:::note
-`insetInlineEnd` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-When direction is `ltr`, `insetInlineEnd` is equivalent to [`right`](layout-props#right). When direction is `rtl`, `insetInlineEnd` is equivalent to [`left`](layout-props#left).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetInlineStart`
-
-:::note
-`insetInlineStart` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-When direction is `ltr`, `insetInlineStart` is equivalent to [`left`](layout-props#left). When direction is `rtl`, `insetInlineStart` is equivalent to [`right`](layout-props#right).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `isolation`
-
-:::note
-`isolation` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-`isolation` lets you form a [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context).
-
-There are two values:
-
-- `auto` (default): Does nothing.
-- `isolate`: Forms a stacking context.
-
-| Type                    | Required |
-| ----------------------- | -------- |
-| enum('auto', 'isolate') | No       |
-
----
-
-### `justifyContent`
-
-`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS (default: flex-start).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) for more details.
-
-| Type                                                                                      | Required |
-| ----------------------------------------------------------------------------------------- | -------- |
-| enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly') | No       |
-
----
-
-### `left`
-
-`left` is the number of logical pixels to offset the left edge of this component.
-
-It works similarly to `left` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/left) for more details of how `left` affects layout.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `margin`
-
-Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginBottom`
-
-`marginBottom` works like `margin-bottom` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginBlock`
-
-Equivalent to [`marginVertical`](layout-props#marginvertical).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginBlockEnd`
-
-Equivalent to [`marginBottom`](layout-props#marginbottom).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginBlockStart`
-
-Equivalent to [`marginTop`](layout-props#margintop).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginEnd`
-
-When direction is `ltr`, `marginEnd` is equivalent to `marginRight`. When direction is `rtl`, `marginEnd` is equivalent to `marginLeft`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginHorizontal`
-
-Setting `marginHorizontal` has the same effect as setting both `marginLeft` and `marginRight`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginInline`
-
-Equivalent to [`marginHorizontal`](layout-props#marginhorizontal).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginInlineEnd`
-
-When direction is `ltr`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginRight`). When direction is `rtl`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginLeft`).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginInlineStart`
-
-When direction is `ltr`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginLeft`). When direction is `rtl`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginRight`).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginLeft`
-
-`marginLeft` works like `margin-left` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginRight`
-
-`marginRight` works like `margin-right` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginStart`
-
-When direction is `ltr`, `marginStart` is equivalent to `marginLeft`. When direction is `rtl`, `marginStart` is equivalent to `marginRight`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginTop`
-
-`marginTop` works like `margin-top` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginVertical`
-
-Setting `marginVertical` has the same effect as setting both `marginTop` and `marginBottom`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `maxHeight`
-
-`maxHeight` is the maximum height for this component, in logical pixels.
-
-It works similarly to `max-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `maxWidth`
-
-`maxWidth` is the maximum width for this component, in logical pixels.
-
-It works similarly to `max-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `minHeight`
-
-`minHeight` is the minimum height for this component, in logical pixels.
-
-It works similarly to `min-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `minWidth`
-
-`minWidth` is the minimum width for this component, in logical pixels.
-
-It works similarly to `min-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `overflow`
-
-`overflow` controls how children are measured and displayed. `overflow: hidden` causes views to be clipped while `overflow: scroll` causes views to be measured independently of their parents' main axis. It works like `overflow` in CSS (default: visible).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) for more details.
-
-| Type                                | Required |
-| ----------------------------------- | -------- |
-| enum('visible', 'hidden', 'scroll') | No       |
-
----
-
-### `padding`
-
-Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingBottom`
-
-`paddingBottom` works like `padding-bottom` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingBlock`
-
-Equivalent to [`paddingVertical`](layout-props#paddingvertical).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingBlockEnd`
-
-Equivalent to [`paddingBottom`](layout-props#paddingbottom).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingBlockStart`
-
-Equivalent to [`paddingTop`](layout-props#paddingtop).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingEnd`
-
-When direction is `ltr`, `paddingEnd` is equivalent to `paddingRight`. When direction is `rtl`, `paddingEnd` is equivalent to `paddingLeft`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingHorizontal`
-
-Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRight`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingInline`
-
-Equivalent to [`paddingHorizontal`](layout-props#paddinghorizontal).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingInlineEnd`
-
-When direction is `ltr`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingRight`). When direction is `rtl`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingLeft`).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingInlineStart`
-
-When direction is `ltr`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingLeft`). When direction is `rtl`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingRight`).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingLeft`
-
-`paddingLeft` works like `padding-left` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingRight`
-
-`paddingRight` works like `padding-right` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingStart`
-
-When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`. When direction is `rtl`, `paddingStart` is equivalent to `paddingRight`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingTop`
-
-`paddingTop` works like `padding-top` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingVertical`
-
-Setting `paddingVertical` is like setting both of `paddingTop` and `paddingBottom`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `position`
-
-`position` in React Native is similar to [regular CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/position), but everything is set to `relative` by default.
-
-`relative` will position an element according to the normal flow of the layout. Insets (`top`, `bottom`, `left`, `right`) will offset relative to this layout.
-
-`absolute` takes the element out of the normal flow of the layout. Insets will offset relative to its [containing block](./flexbox.md#the-containing-block).
-
-`static` will position an element according to the normal flow of the layout. Insets will have no effect.
-`static` elements do not form a containing block for absolute descendants.
-
-For more information, see the [Layout with Flexbox docs](./flexbox.md#position). Also, [the Yoga documentation](https://www.yogalayout.dev/docs/styling/position) has more details on how `position` differs between React Native and CSS.
-
-| Type                                   | Required |
-| -------------------------------------- | -------- |
-| enum('absolute', 'relative', 'static') | No       |
-
----
-
-### `right`
-
-`right` is the number of logical pixels to offset the right edge of this component.
-
-It works similarly to `right` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) for more details of how `right` affects layout.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `rowGap`
-
-`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `start`
-
-When the direction is `ltr`, `start` is equivalent to `left`. When the direction is `rtl`, `start` is equivalent to `right`.
-
-This style takes precedence over the `left`, `right`, and `end` styles.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `top`
-
-`top` is the number of logical pixels to offset the top edge of this component.
-
-It works similarly to `top` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/top) for more details of how `top` affects layout.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `width`
-
-`width` sets the width of this component.
-
-It works similarly to `width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/width) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `zIndex`
-
-`zIndex` controls which components display on top of others. Normally, you don't use `zIndex`. Components render according to their order in the document tree, so later components draw over earlier ones. `zIndex` may be useful if you have animations or custom modal interfaces where you don't want this behavior.
-
-It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball.
-
-On iOS, `zIndex` may require `View`s to be siblings of each other for it to work as expected.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
+---
+id: layout-props
+title: Layout Props
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+:::info
+More detailed examples about those properties can be found on the [Layout with Flexbox](flexbox) page.
+:::
+
+### Example
+
+The following example shows how different properties can affect or shape a React Native layout. You can try for example to add or remove squares from the UI while changing the values of the property `flexWrap`.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=LayoutProps%20Example&ext=js
+import {useState} from 'react';
+import {Button, ScrollView, StyleSheet, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [flexDirection, setFlexDirection] = useState(0);
+  const [justifyContent, setJustifyContent] = useState(0);
+  const [alignItems, setAlignItems] = useState(0);
+  const [direction, setDirection] = useState(0);
+  const [wrap, setWrap] = useState(0);
+
+  const [squares, setSquares] = useState([<Square />, <Square />, <Square />]);
+
+  const hookedStyles = {
+    flexDirection: flexDirections[flexDirection],
+    justifyContent: justifyContents[justifyContent],
+    alignItems: alignItemsArr[alignItems],
+    direction: directions[direction],
+    flexWrap: wraps[wrap],
+  };
+
+  const changeSetting = (value, options, setterFunction) => {
+    if (value === options.length - 1) {
+      setterFunction(0);
+      return;
+    }
+    setterFunction(value + 1);
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={[styles.container, styles.playingSpace, hookedStyles]}>
+          {squares.map(elem => elem)}
+        </View>
+        <ScrollView style={styles.layoutContainer}>
+          <View style={styles.controlSpace}>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Flex Direction"
+                onPress={() =>
+                  changeSetting(flexDirection, flexDirections, setFlexDirection)
+                }
+              />
+              <Text style={styles.text}>{flexDirections[flexDirection]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Justify Content"
+                onPress={() =>
+                  changeSetting(
+                    justifyContent,
+                    justifyContents,
+                    setJustifyContent,
+                  )
+                }
+              />
+              <Text style={styles.text}>{justifyContents[justifyContent]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Align Items"
+                onPress={() =>
+                  changeSetting(alignItems, alignItemsArr, setAlignItems)
+                }
+              />
+              <Text style={styles.text}>{alignItemsArr[alignItems]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Direction"
+                onPress={() =>
+                  changeSetting(direction, directions, setDirection)
+                }
+              />
+              <Text style={styles.text}>{directions[direction]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Flex Wrap"
+                onPress={() => changeSetting(wrap, wraps, setWrap)}
+              />
+              <Text style={styles.text}>{wraps[wrap]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Add Square"
+                onPress={() => setSquares([...squares, <Square />])}
+              />
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Delete Square"
+                onPress={() =>
+                  setSquares(squares.filter((v, i) => i !== squares.length - 1))
+                }
+              />
+            </View>
+          </View>
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const flexDirections = ['row', 'row-reverse', 'column', 'column-reverse'];
+const justifyContents = [
+  'flex-start',
+  'flex-end',
+  'center',
+  'space-between',
+  'space-around',
+  'space-evenly',
+];
+const alignItemsArr = [
+  'flex-start',
+  'flex-end',
+  'center',
+  'stretch',
+  'baseline',
+];
+const wraps = ['nowrap', 'wrap', 'wrap-reverse'];
+const directions = ['inherit', 'ltr', 'rtl'];
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  layoutContainer: {
+    flex: 0.5,
+  },
+  playingSpace: {
+    backgroundColor: 'white',
+    borderColor: 'blue',
+    borderWidth: 3,
+    overflow: 'hidden',
+  },
+  controlSpace: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  buttonView: {
+    width: '50%',
+    padding: 10,
+  },
+  text: {
+    textAlign: 'center',
+  },
+});
+
+const Square = () => (
+  <View
+    style={{
+      width: 50,
+      height: 50,
+      backgroundColor: randomHexColor(),
+    }}
+  />
+);
+
+const randomHexColor = () => {
+  return '#000000'.replace(/0/g, () => {
+    return Math.round(Math.random() * 14).toString(16);
+  });
+};
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=LayoutProps%20Example&ext=tsx
+import {useState} from 'react';
+import {
+  Button,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+  FlexAlignType,
+  FlexStyle,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [flexDirection, setFlexDirection] = useState(0);
+  const [justifyContent, setJustifyContent] = useState(0);
+  const [alignItems, setAlignItems] = useState(0);
+  const [direction, setDirection] = useState(0);
+  const [wrap, setWrap] = useState(0);
+
+  const [squares, setSquares] = useState([<Square />, <Square />, <Square />]);
+
+  const hookedStyles = {
+    flexDirection: flexDirections[flexDirection],
+    justifyContent: justifyContents[justifyContent],
+    alignItems: alignItemsArr[alignItems],
+    direction: directions[direction],
+    flexWrap: wraps[wrap],
+  } as FlexStyle;
+
+  const changeSetting = (
+    value: number,
+    options: any[],
+    setterFunction: (index: number) => void,
+  ) => {
+    if (value === options.length - 1) {
+      setterFunction(0);
+      return;
+    }
+    setterFunction(value + 1);
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={[styles.container, styles.playingSpace, hookedStyles]}>
+          {squares.map(elem => elem)}
+        </View>
+        <ScrollView style={styles.layoutContainer}>
+          <View style={styles.controlSpace}>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Flex Direction"
+                onPress={() =>
+                  changeSetting(flexDirection, flexDirections, setFlexDirection)
+                }
+              />
+              <Text style={styles.text}>{flexDirections[flexDirection]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Justify Content"
+                onPress={() =>
+                  changeSetting(
+                    justifyContent,
+                    justifyContents,
+                    setJustifyContent,
+                  )
+                }
+              />
+              <Text style={styles.text}>{justifyContents[justifyContent]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Align Items"
+                onPress={() =>
+                  changeSetting(alignItems, alignItemsArr, setAlignItems)
+                }
+              />
+              <Text style={styles.text}>{alignItemsArr[alignItems]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Direction"
+                onPress={() =>
+                  changeSetting(direction, directions, setDirection)
+                }
+              />
+              <Text style={styles.text}>{directions[direction]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Flex Wrap"
+                onPress={() => changeSetting(wrap, wraps, setWrap)}
+              />
+              <Text style={styles.text}>{wraps[wrap]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Add Square"
+                onPress={() => setSquares([...squares, <Square />])}
+              />
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Delete Square"
+                onPress={() =>
+                  setSquares(squares.filter((v, i) => i !== squares.length - 1))
+                }
+              />
+            </View>
+          </View>
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const flexDirections = [
+  'row',
+  'row-reverse',
+  'column',
+  'column-reverse',
+] as FlexStyle['flexDirection'][];
+const justifyContents = [
+  'flex-start',
+  'flex-end',
+  'center',
+  'space-between',
+  'space-around',
+  'space-evenly',
+] as FlexStyle['justifyContent'][];
+const alignItemsArr = [
+  'flex-start',
+  'flex-end',
+  'center',
+  'stretch',
+  'baseline',
+] as FlexAlignType[];
+const wraps = ['nowrap', 'wrap', 'wrap-reverse'];
+const directions = ['inherit', 'ltr', 'rtl'];
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  layoutContainer: {
+    flex: 0.5,
+  },
+  playingSpace: {
+    backgroundColor: 'white',
+    borderColor: 'blue',
+    borderWidth: 3,
+    overflow: 'hidden',
+  },
+  controlSpace: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  buttonView: {
+    width: '50%',
+    padding: 10,
+  },
+  text: {
+    textAlign: 'center',
+  },
+});
+
+const Square = () => (
+  <View
+    style={{
+      width: 50,
+      height: 50,
+      backgroundColor: randomHexColor(),
+    }}
+  />
+);
+
+const randomHexColor = () => {
+  return '#000000'.replace(/0/g, () => {
+    return Math.round(Math.random() * 14).toString(16);
+  });
+};
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+---
+
+# Reference
+
+## Props
+
+### `alignContent`
+
+`alignContent` controls how rows align in the cross direction, overriding the `alignContent` of the parent.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) for more details.
+
+| Type                                                                                                 | Required |
+| ---------------------------------------------------------------------------------------------------- | -------- |
+| enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around', 'space-evenly') | No       |
+
+---
+
+### `alignItems`
+
+`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS (default: stretch).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) for more details.
+
+| Type                                                            | Required |
+| --------------------------------------------------------------- | -------- |
+| enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline') | No       |
+
+---
+
+### `alignSelf`
+
+`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS (default: auto).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) for more details.
+
+| Type                                                                    | Required |
+| ----------------------------------------------------------------------- | -------- |
+| enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline') | No       |
+
+---
+
+### `aspectRatio`
+
+Aspect ratio controls the size of the undefined dimension of a node.
+
+- On a node with a set width/height, aspect ratio controls the size of the unset dimension
+- On a node with a set flex basis, aspect ratio controls the size of the node in the cross axis if unset
+- On a node with a measure function, aspect ratio works as though the measure function measures the flex basis
+- On a node with flex grow/shrink, aspect ratio controls the size of the node in the cross axis if unset
+- Aspect ratio takes min/max dimensions into account
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `borderBottomWidth`
+
+`borderBottomWidth` works like `border-bottom-width` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderEndWidth`
+
+When direction is `ltr`, `borderEndWidth` is equivalent to `borderRightWidth`. When direction is `rtl`, `borderEndWidth` is equivalent to `borderLeftWidth`.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderLeftWidth`
+
+`borderLeftWidth` works like `border-left-width` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderRightWidth`
+
+`borderRightWidth` works like `border-right-width` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderStartWidth`
+
+When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. When direction is `rtl`, `borderStartWidth` is equivalent to `borderRightWidth`.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderTopWidth`
+
+`borderTopWidth` works like `border-top-width` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderWidth`
+
+`borderWidth` works like `border-width` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `bottom`
+
+`bottom` is the number of logical pixels to offset the bottom edge of this component.
+
+It works similarly to `bottom` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) for more details of how `bottom` affects layout.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `boxSizing`
+
+`boxSizing` defines how the element's various sizing props (`width`, `height`, `minWidth`, `minHeight`, etc.) are computed. If `boxSizing` is `border-box`, these sizes apply to the border box of the element. If it is `content-box`, they apply to the content box of the element. The default value is `border-box`. The [web documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) is a good source of information if you wish to learn more about how this prop works.
+
+| Type                              | Required |
+| --------------------------------- | -------- |
+| enum('border-box', 'content-box') | No       |
+
+---
+
+### `columnGap`
+
+`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `direction`
+
+`direction` specifies the directional flow of the user interface. The default is `inherit`, except for root node which will have value based on the current locale.
+
+See [MDN CSS Reference](https://www.yogalayout.dev/docs/styling/layout-direction) for more details.
+
+| Type                          | Required |
+| ----------------------------- | -------- |
+| enum('inherit', 'ltr', 'rtl') | No       |
+
+---
+
+### `display`
+
+`display` sets the display type of this component.
+
+It works similarly to `display` in CSS but only supports the values 'flex', 'none', and 'contents'. The default is `flex`.
+
+| Type                             | Required |
+| -------------------------------- | -------- |
+| enum('none', 'flex', 'contents') | No       |
+
+---
+
+### `end`
+
+When the direction is `ltr`, `end` is equivalent to `right`. When the direction is `rtl`, `end` is equivalent to `left`.
+
+This style takes precedence over the `left` and `right` styles.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `flex`
+
+In React Native `flex` does not work the same way that it does in CSS. `flex` is a number rather than a string, and it works according to the [Yoga](https://github.com/facebook/yoga) layout engine.
+
+When `flex` is a positive number, it makes the component flexible, and it will be sized proportional to its flex value. So a component with `flex` set to `2` will take twice the space as a component with `flex` set to 1. `flex: <positive number>` equates to `flexGrow: <positive number>, flexShrink: 1, flexBasis: 0`.
+
+When `flex` is `0`, the component is sized according to `width` and `height`, and it is inflexible.
+
+When `flex` is `-1`, the component is normally sized according to `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`.
+
+`flexGrow`, `flexShrink`, and `flexBasis` work the same as in CSS.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `flexBasis`
+
+`flexBasis` is an axis-independent way of providing the default size of an item along the main axis. Setting the `flexBasis` of a child is similar to setting the `width` of that child if its parent is a container with `flexDirection: row` or setting the `height` of a child if its parent is a container with `flexDirection: column`. The `flexBasis` of an item is the default size of that item, the size of the item before any `flexGrow` and `flexShrink` calculations are performed.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `flexDirection`
+
+`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) for more details.
+
+| Type                                                   | Required |
+| ------------------------------------------------------ | -------- |
+| enum('row', 'row-reverse', 'column', 'column-reverse') | No       |
+
+---
+
+### `flexGrow`
+
+`flexGrow` describes how any space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
+
+`flexGrow` accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the children’s `flexGrow` values.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `flexShrink`
+
+[`flexShrink`](layout-props#flexshrink) describes how to shrink children along the main axis in the case in which the total size of the children overflows the size of the container on the main axis. `flexShrink` is very similar to `flexGrow` and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed.
+
+`flexShrink` accepts any floating point value >= 0, with 0 being the default value. A container will shrink its children weighted by the children’s `flexShrink` values.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `flexWrap`
+
+`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS (default: nowrap).
+
+Note it does not work anymore with `alignItems: stretch` (the default), so you may want to use `alignItems: flex-start` for example (breaking change details: https://github.com/facebook/react-native/releases/tag/v0.28.0).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) for more details.
+
+| Type                                   | Required |
+| -------------------------------------- | -------- |
+| enum('wrap', 'nowrap', 'wrap-reverse') | No       |
+
+---
+
+### `gap`
+
+`gap` works like `gap` in CSS. Only pixel units are supported in React Native.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `height`
+
+`height` sets the height of this component.
+
+It works similarly to `height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/height) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `inset`
+
+:::note
+`inset` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Setting `inset` has the same effect as setting each of `top`, `bottom`, `right` and `left` props.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/inset) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetBlock`
+
+:::note
+`insetBlock` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Equivalent to [`top`](layout-props#top) and [`bottom`](layout-props#bottom).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetBlockEnd`
+
+:::note
+`insetBlockEnd` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Equivalent to [`bottom`](layout-props#bottom).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetBlockStart`
+
+:::note
+`insetBlockStart` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Equivalent to [`top`](layout-props#top).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetInline`
+
+:::note
+`insetInline` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Equivalent to [`right`](layout-props#right) and [`left`](layout-props#left).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetInlineEnd`
+
+:::note
+`insetInlineEnd` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+When direction is `ltr`, `insetInlineEnd` is equivalent to [`right`](layout-props#right). When direction is `rtl`, `insetInlineEnd` is equivalent to [`left`](layout-props#left).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetInlineStart`
+
+:::note
+`insetInlineStart` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+When direction is `ltr`, `insetInlineStart` is equivalent to [`left`](layout-props#left). When direction is `rtl`, `insetInlineStart` is equivalent to [`right`](layout-props#right).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `isolation`
+
+:::note
+`isolation` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+`isolation` lets you form a [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context).
+
+There are two values:
+
+- `auto` (default): Does nothing.
+- `isolate`: Forms a stacking context.
+
+| Type                    | Required |
+| ----------------------- | -------- |
+| enum('auto', 'isolate') | No       |
+
+---
+
+### `justifyContent`
+
+`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS (default: flex-start).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) for more details.
+
+| Type                                                                                      | Required |
+| ----------------------------------------------------------------------------------------- | -------- |
+| enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly') | No       |
+
+---
+
+### `left`
+
+`left` is the number of logical pixels to offset the left edge of this component.
+
+It works similarly to `left` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/left) for more details of how `left` affects layout.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `margin`
+
+Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginBottom`
+
+`marginBottom` works like `margin-bottom` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginBlock`
+
+Equivalent to [`marginVertical`](layout-props#marginvertical).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginBlockEnd`
+
+Equivalent to [`marginBottom`](layout-props#marginbottom).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginBlockStart`
+
+Equivalent to [`marginTop`](layout-props#margintop).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginEnd`
+
+When direction is `ltr`, `marginEnd` is equivalent to `marginRight`. When direction is `rtl`, `marginEnd` is equivalent to `marginLeft`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginHorizontal`
+
+Setting `marginHorizontal` has the same effect as setting both `marginLeft` and `marginRight`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginInline`
+
+Equivalent to [`marginHorizontal`](layout-props#marginhorizontal).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginInlineEnd`
+
+When direction is `ltr`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginRight`). When direction is `rtl`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginLeft`).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginInlineStart`
+
+When direction is `ltr`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginLeft`). When direction is `rtl`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginRight`).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginLeft`
+
+`marginLeft` works like `margin-left` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginRight`
+
+`marginRight` works like `margin-right` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginStart`
+
+When direction is `ltr`, `marginStart` is equivalent to `marginLeft`. When direction is `rtl`, `marginStart` is equivalent to `marginRight`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginTop`
+
+`marginTop` works like `margin-top` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginVertical`
+
+Setting `marginVertical` has the same effect as setting both `marginTop` and `marginBottom`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `maxHeight`
+
+`maxHeight` is the maximum height for this component, in logical pixels.
+
+It works similarly to `max-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `maxWidth`
+
+`maxWidth` is the maximum width for this component, in logical pixels.
+
+It works similarly to `max-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `minHeight`
+
+`minHeight` is the minimum height for this component, in logical pixels.
+
+It works similarly to `min-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `minWidth`
+
+`minWidth` is the minimum width for this component, in logical pixels.
+
+It works similarly to `min-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `overflow`
+
+`overflow` controls how children are measured and displayed. `overflow: hidden` causes views to be clipped while `overflow: scroll` causes views to be measured independently of their parents' main axis. It works like `overflow` in CSS (default: visible).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) for more details.
+
+| Type                                | Required |
+| ----------------------------------- | -------- |
+| enum('visible', 'hidden', 'scroll') | No       |
+
+---
+
+### `padding`
+
+Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingBottom`
+
+`paddingBottom` works like `padding-bottom` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingBlock`
+
+Equivalent to [`paddingVertical`](layout-props#paddingvertical).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingBlockEnd`
+
+Equivalent to [`paddingBottom`](layout-props#paddingbottom).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingBlockStart`
+
+Equivalent to [`paddingTop`](layout-props#paddingtop).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingEnd`
+
+When direction is `ltr`, `paddingEnd` is equivalent to `paddingRight`. When direction is `rtl`, `paddingEnd` is equivalent to `paddingLeft`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingHorizontal`
+
+Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRight`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingInline`
+
+Equivalent to [`paddingHorizontal`](layout-props#paddinghorizontal).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingInlineEnd`
+
+When direction is `ltr`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingRight`). When direction is `rtl`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingLeft`).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingInlineStart`
+
+When direction is `ltr`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingLeft`). When direction is `rtl`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingRight`).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingLeft`
+
+`paddingLeft` works like `padding-left` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingRight`
+
+`paddingRight` works like `padding-right` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingStart`
+
+When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`. When direction is `rtl`, `paddingStart` is equivalent to `paddingRight`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingTop`
+
+`paddingTop` works like `padding-top` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingVertical`
+
+Setting `paddingVertical` is like setting both of `paddingTop` and `paddingBottom`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `position`
+
+`position` in React Native is similar to [regular CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/position), but everything is set to `relative` by default.
+
+`relative` will position an element according to the normal flow of the layout. Insets (`top`, `bottom`, `left`, `right`) will offset relative to this layout.
+
+`absolute` takes the element out of the normal flow of the layout. Insets will offset relative to its [containing block](./flexbox.md#the-containing-block).
+
+`static` will position an element according to the normal flow of the layout. Insets will have no effect.
+`static` elements do not form a containing block for absolute descendants.
+
+For more information, see the [Layout with Flexbox docs](./flexbox.md#position). Also, [the Yoga documentation](https://www.yogalayout.dev/docs/styling/position) has more details on how `position` differs between React Native and CSS.
+
+| Type                                   | Required |
+| -------------------------------------- | -------- |
+| enum('absolute', 'relative', 'static') | No       |
+
+---
+
+### `right`
+
+`right` is the number of logical pixels to offset the right edge of this component.
+
+It works similarly to `right` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) for more details of how `right` affects layout.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `rowGap`
+
+`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `start`
+
+When the direction is `ltr`, `start` is equivalent to `left`. When the direction is `rtl`, `start` is equivalent to `right`.
+
+This style takes precedence over the `left`, `right`, and `end` styles.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `top`
+
+`top` is the number of logical pixels to offset the top edge of this component.
+
+It works similarly to `top` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/top) for more details of how `top` affects layout.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `width`
+
+`width` sets the width of this component.
+
+It works similarly to `width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/width) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `zIndex`
+
+`zIndex` controls which components display on top of others. Normally, you don't use `zIndex`. Components render according to their order in the document tree, so later components draw over earlier ones. `zIndex` may be useful if you have animations or custom modal interfaces where you don't want this behavior.
+
+It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball.
+
+On iOS, `zIndex` may require `View`s to be siblings of each other for it to work as expected.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
diff --git a/website/versioned_docs/version-0.84/layoutanimation.md b/website/versioned_docs/version-0.84/layoutanimation.md
index 911a247c8c7..24a7d060d1e 100644
--- a/website/versioned_docs/version-0.84/layoutanimation.md
+++ b/website/versioned_docs/version-0.84/layoutanimation.md
@@ -1,358 +1,358 @@
----
-id: layoutanimation
-title: LayoutAnimation
----
-
-Automatically animates views to their new positions when the next layout happens.
-
-A common way to use this API is to call it before updating the state hook in functional components and calling `setState` in class components.
-
-Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`:
-
-```js
-if (Platform.OS === 'android') {
-  if (UIManager.setLayoutAnimationEnabledExperimental) {
-    UIManager.setLayoutAnimationEnabledExperimental(true);
-  }
-}
-```
-
-## Example
-
-```SnackPlayer name=LayoutAnimation%20Example&supportedPlatforms=android,ios
-import React, {useState} from 'react';
-import {
-  LayoutAnimation,
-  Platform,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  UIManager,
-  View,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-if (
-  Platform.OS === 'android' &&
-  UIManager.setLayoutAnimationEnabledExperimental
-) {
-  UIManager.setLayoutAnimationEnabledExperimental(true);
-}
-const App = () => {
-  const [expanded, setExpanded] = useState(false);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={style.container}>
-        <TouchableOpacity
-          onPress={() => {
-            LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
-            setExpanded(!expanded);
-          }}>
-          <Text>Press me to {expanded ? 'collapse' : 'expand'}!</Text>
-        </TouchableOpacity>
-        {expanded && (
-          <View style={style.tile}>
-            <Text>I disappear sometimes!</Text>
-          </View>
-        )}
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const style = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    gap: 16,
-  },
-  tile: {
-    backgroundColor: 'lightgrey',
-    borderWidth: 0.5,
-    borderColor: '#d6d7da',
-    padding: 4,
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Methods
-
-### `configureNext()`
-
-```tsx
-static configureNext(
-  config: LayoutAnimationConfig,
-  onAnimationDidEnd?: () => void,
-  onAnimationDidFail?: () => void,
-);
-```
-
-Schedules an animation to happen on the next layout.
-
-#### Parameters:
-
-| Name               | Type     | Required | Description                         |
-| ------------------ | -------- | -------- | ----------------------------------- |
-| config             | object   | Yes      | See config description below.       |
-| onAnimationDidEnd  | function | No       | Called when the animation finished. |
-| onAnimationDidFail | function | No       | Called when the animation failed.   |
-
-The `config` parameter is an object with the keys below. [`create`](layoutanimation.md#create) returns a valid object for `config`, and the [`Presets`](layoutanimation.md#presets) objects can also all be passed as the `config`.
-
-- `duration` in milliseconds
-- `create`, optional config for animating in new views
-- `update`, optional config for animating views that have been updated
-- `delete`, optional config for animating views as they are removed
-
-The config that's passed to `create`, `update`, or `delete` has the following keys:
-
-- `type`, the [animation type](layoutanimation.md#types) to use
-- `property`, the [layout property](layoutanimation.md#properties) to animate (optional, but recommended for `create` and `delete`)
-- `springDamping` (number, optional and only for use with `type: Type.spring`)
-- `initialVelocity` (number, optional)
-- `delay` (number, optional)
-- `duration` (number, optional)
-
----
-
-### `create()`
-
-```tsx
-static create(duration, type, creationProp)
-```
-
-Helper that creates an object (with `create`, `update`, and `delete` fields) to pass into [`configureNext`](layoutanimation.md#configurenext). The `type` parameter is an [animation type](layoutanimation.md#types), and the `creationProp` parameter is a [layout property](layoutanimation.md#properties).
-
-**Example:**
-
-```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios
-import React, {useState} from 'react';
-import {
-  View,
-  Platform,
-  UIManager,
-  LayoutAnimation,
-  StyleSheet,
-  Button,
-} from 'react-native';
-
-if (
-  Platform.OS === 'android' &&
-  UIManager.setLayoutAnimationEnabledExperimental
-) {
-  UIManager.setLayoutAnimationEnabledExperimental(true);
-}
-
-const App = () => {
-  const [boxPosition, setBoxPosition] = useState('left');
-
-  const toggleBox = () => {
-    LayoutAnimation.configureNext({
-      duration: 500,
-      create: {type: 'linear', property: 'opacity'},
-      update: {type: 'spring', springDamping: 0.4},
-      delete: {type: 'linear', property: 'opacity'},
-    });
-    setBoxPosition(boxPosition === 'left' ? 'right' : 'left');
-  };
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.buttonContainer}>
-        <Button title="Toggle Layout" onPress={toggleBox} />
-      </View>
-      <View
-        style={[styles.box, boxPosition === 'left' ? null : styles.moveRight]}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'flex-start',
-    justifyContent: 'center',
-  },
-  box: {
-    height: 100,
-    width: 100,
-    borderRadius: 5,
-    margin: 8,
-    backgroundColor: 'blue',
-  },
-  moveRight: {
-    alignSelf: 'flex-end',
-    height: 200,
-    width: 200,
-  },
-  buttonContainer: {
-    alignSelf: 'center',
-  },
-});
-
-export default App;
-```
-
-## Properties
-
-### Types
-
-An enumeration of animation types to be used in the [`create`](layoutanimation.md#create) method, or in the `create`/`update`/`delete` configs for [`configureNext`](layoutanimation.md#configurenext). (example usage: `LayoutAnimation.Types.easeIn`)
-
-| Types         |
-| ------------- |
-| spring        |
-| linear        |
-| easeInEaseOut |
-| easeIn        |
-| easeOut       |
-| keyboard      |
-
----
-
-### Properties
-
-An enumeration of layout properties to be animated to be used in the [`create`](layoutanimation.md#create) method, or in the `create`/`update`/`delete` configs for [`configureNext`](layoutanimation.md#configurenext). (example usage: `LayoutAnimation.Properties.opacity`)
-
-| Properties |
-| ---------- |
-| opacity    |
-| scaleX     |
-| scaleY     |
-| scaleXY    |
-
----
-
-### Presets
-
-A set of predefined animation configs to pass into [`configureNext`](layoutanimation.md#configurenext).
-
-| Presets       | Value                                                                                                                                                          |
-| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| easeInEaseOut | `create(300, 'easeInEaseOut', 'opacity')`                                                                                                                      |
-| linear        | `create(500, 'linear', 'opacity')`                                                                                                                             |
-| spring        | `{duration: 700, create: {type: 'linear', property: 'opacity'}, update: {type: 'spring', springDamping: 0.4}, delete: {type: 'linear', property: 'opacity'} }` |
-
----
-
-### `easeInEaseOut`
-
-Calls `configureNext()` with `Presets.easeInEaseOut`.
-
----
-
-### `linear`
-
-Calls `configureNext()` with `Presets.linear`.
-
----
-
-### `spring`
-
-Calls `configureNext()` with `Presets.spring`.
-
-**Example:**
-
-```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios
-import React, {useState} from 'react';
-import {
-  View,
-  Platform,
-  UIManager,
-  LayoutAnimation,
-  StyleSheet,
-  Button,
-} from 'react-native';
-
-if (
-  Platform.OS === 'android' &&
-  UIManager.setLayoutAnimationEnabledExperimental
-) {
-  UIManager.setLayoutAnimationEnabledExperimental(true);
-}
-
-const App = () => {
-  const [firstBoxPosition, setFirstBoxPosition] = useState('left');
-  const [secondBoxPosition, setSecondBoxPosition] = useState('left');
-  const [thirdBoxPosition, setThirdBoxPosition] = useState('left');
-
-  const toggleFirstBox = () => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-    setFirstBoxPosition(firstBoxPosition === 'left' ? 'right' : 'left');
-  };
-
-  const toggleSecondBox = () => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
-    setSecondBoxPosition(secondBoxPosition === 'left' ? 'right' : 'left');
-  };
-
-  const toggleThirdBox = () => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
-    setThirdBoxPosition(thirdBoxPosition === 'left' ? 'right' : 'left');
-  };
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.buttonContainer}>
-        <Button title="EaseInEaseOut" onPress={toggleFirstBox} />
-      </View>
-      <View
-        style={[
-          styles.box,
-          firstBoxPosition === 'left' ? null : styles.moveRight,
-        ]}
-      />
-      <View style={styles.buttonContainer}>
-        <Button title="Linear" onPress={toggleSecondBox} />
-      </View>
-      <View
-        style={[
-          styles.box,
-          secondBoxPosition === 'left' ? null : styles.moveRight,
-        ]}
-      />
-      <View style={styles.buttonContainer}>
-        <Button title="Spring" onPress={toggleThirdBox} />
-      </View>
-      <View
-        style={[
-          styles.box,
-          thirdBoxPosition === 'left' ? null : styles.moveRight,
-        ]}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'flex-start',
-    justifyContent: 'center',
-  },
-  box: {
-    height: 100,
-    width: 100,
-    borderRadius: 5,
-    margin: 8,
-    backgroundColor: 'blue',
-  },
-  moveRight: {
-    alignSelf: 'flex-end',
-  },
-  buttonContainer: {
-    alignSelf: 'center',
-  },
-});
-
-export default App;
-```
+---
+id: layoutanimation
+title: LayoutAnimation
+---
+
+Automatically animates views to their new positions when the next layout happens.
+
+A common way to use this API is to call it before updating the state hook in functional components and calling `setState` in class components.
+
+Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`:
+
+```js
+if (Platform.OS === 'android') {
+  if (UIManager.setLayoutAnimationEnabledExperimental) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+  }
+}
+```
+
+## Example
+
+```SnackPlayer name=LayoutAnimation%20Example&supportedPlatforms=android,ios
+import {useState} from 'react';
+import {
+  LayoutAnimation,
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  UIManager,
+  View,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+if (
+  Platform.OS === 'android' &&
+  UIManager.setLayoutAnimationEnabledExperimental
+) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+const App = () => {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={style.container}>
+        <TouchableOpacity
+          onPress={() => {
+            LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
+            setExpanded(!expanded);
+          }}>
+          <Text>Press me to {expanded ? 'collapse' : 'expand'}!</Text>
+        </TouchableOpacity>
+        {expanded && (
+          <View style={style.tile}>
+            <Text>I disappear sometimes!</Text>
+          </View>
+        )}
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const style = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 16,
+  },
+  tile: {
+    backgroundColor: 'lightgrey',
+    borderWidth: 0.5,
+    borderColor: '#d6d7da',
+    padding: 4,
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `configureNext()`
+
+```tsx
+static configureNext(
+  config: LayoutAnimationConfig,
+  onAnimationDidEnd?: () => void,
+  onAnimationDidFail?: () => void,
+);
+```
+
+Schedules an animation to happen on the next layout.
+
+#### Parameters:
+
+| Name               | Type     | Required | Description                         |
+| ------------------ | -------- | -------- | ----------------------------------- |
+| config             | object   | Yes      | See config description below.       |
+| onAnimationDidEnd  | function | No       | Called when the animation finished. |
+| onAnimationDidFail | function | No       | Called when the animation failed.   |
+
+The `config` parameter is an object with the keys below. [`create`](layoutanimation.md#create) returns a valid object for `config`, and the [`Presets`](layoutanimation.md#presets) objects can also all be passed as the `config`.
+
+- `duration` in milliseconds
+- `create`, optional config for animating in new views
+- `update`, optional config for animating views that have been updated
+- `delete`, optional config for animating views as they are removed
+
+The config that's passed to `create`, `update`, or `delete` has the following keys:
+
+- `type`, the [animation type](layoutanimation.md#types) to use
+- `property`, the [layout property](layoutanimation.md#properties) to animate (optional, but recommended for `create` and `delete`)
+- `springDamping` (number, optional and only for use with `type: Type.spring`)
+- `initialVelocity` (number, optional)
+- `delay` (number, optional)
+- `duration` (number, optional)
+
+---
+
+### `create()`
+
+```tsx
+static create(duration, type, creationProp)
+```
+
+Helper that creates an object (with `create`, `update`, and `delete` fields) to pass into [`configureNext`](layoutanimation.md#configurenext). The `type` parameter is an [animation type](layoutanimation.md#types), and the `creationProp` parameter is a [layout property](layoutanimation.md#properties).
+
+**Example:**
+
+```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios
+import {useState} from 'react';
+import {
+  View,
+  Platform,
+  UIManager,
+  LayoutAnimation,
+  StyleSheet,
+  Button,
+} from 'react-native';
+
+if (
+  Platform.OS === 'android' &&
+  UIManager.setLayoutAnimationEnabledExperimental
+) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+const App = () => {
+  const [boxPosition, setBoxPosition] = useState('left');
+
+  const toggleBox = () => {
+    LayoutAnimation.configureNext({
+      duration: 500,
+      create: {type: 'linear', property: 'opacity'},
+      update: {type: 'spring', springDamping: 0.4},
+      delete: {type: 'linear', property: 'opacity'},
+    });
+    setBoxPosition(boxPosition === 'left' ? 'right' : 'left');
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.buttonContainer}>
+        <Button title="Toggle Layout" onPress={toggleBox} />
+      </View>
+      <View
+        style={[styles.box, boxPosition === 'left' ? null : styles.moveRight]}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+  },
+  box: {
+    height: 100,
+    width: 100,
+    borderRadius: 5,
+    margin: 8,
+    backgroundColor: 'blue',
+  },
+  moveRight: {
+    alignSelf: 'flex-end',
+    height: 200,
+    width: 200,
+  },
+  buttonContainer: {
+    alignSelf: 'center',
+  },
+});
+
+export default App;
+```
+
+## Properties
+
+### Types
+
+An enumeration of animation types to be used in the [`create`](layoutanimation.md#create) method, or in the `create`/`update`/`delete` configs for [`configureNext`](layoutanimation.md#configurenext). (example usage: `LayoutAnimation.Types.easeIn`)
+
+| Types         |
+| ------------- |
+| spring        |
+| linear        |
+| easeInEaseOut |
+| easeIn        |
+| easeOut       |
+| keyboard      |
+
+---
+
+### Properties
+
+An enumeration of layout properties to be animated to be used in the [`create`](layoutanimation.md#create) method, or in the `create`/`update`/`delete` configs for [`configureNext`](layoutanimation.md#configurenext). (example usage: `LayoutAnimation.Properties.opacity`)
+
+| Properties |
+| ---------- |
+| opacity    |
+| scaleX     |
+| scaleY     |
+| scaleXY    |
+
+---
+
+### Presets
+
+A set of predefined animation configs to pass into [`configureNext`](layoutanimation.md#configurenext).
+
+| Presets       | Value                                                                                                                                                          |
+| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| easeInEaseOut | `create(300, 'easeInEaseOut', 'opacity')`                                                                                                                      |
+| linear        | `create(500, 'linear', 'opacity')`                                                                                                                             |
+| spring        | `{duration: 700, create: {type: 'linear', property: 'opacity'}, update: {type: 'spring', springDamping: 0.4}, delete: {type: 'linear', property: 'opacity'} }` |
+
+---
+
+### `easeInEaseOut`
+
+Calls `configureNext()` with `Presets.easeInEaseOut`.
+
+---
+
+### `linear`
+
+Calls `configureNext()` with `Presets.linear`.
+
+---
+
+### `spring`
+
+Calls `configureNext()` with `Presets.spring`.
+
+**Example:**
+
+```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios
+import {useState} from 'react';
+import {
+  View,
+  Platform,
+  UIManager,
+  LayoutAnimation,
+  StyleSheet,
+  Button,
+} from 'react-native';
+
+if (
+  Platform.OS === 'android' &&
+  UIManager.setLayoutAnimationEnabledExperimental
+) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+const App = () => {
+  const [firstBoxPosition, setFirstBoxPosition] = useState('left');
+  const [secondBoxPosition, setSecondBoxPosition] = useState('left');
+  const [thirdBoxPosition, setThirdBoxPosition] = useState('left');
+
+  const toggleFirstBox = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setFirstBoxPosition(firstBoxPosition === 'left' ? 'right' : 'left');
+  };
+
+  const toggleSecondBox = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
+    setSecondBoxPosition(secondBoxPosition === 'left' ? 'right' : 'left');
+  };
+
+  const toggleThirdBox = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
+    setThirdBoxPosition(thirdBoxPosition === 'left' ? 'right' : 'left');
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.buttonContainer}>
+        <Button title="EaseInEaseOut" onPress={toggleFirstBox} />
+      </View>
+      <View
+        style={[
+          styles.box,
+          firstBoxPosition === 'left' ? null : styles.moveRight,
+        ]}
+      />
+      <View style={styles.buttonContainer}>
+        <Button title="Linear" onPress={toggleSecondBox} />
+      </View>
+      <View
+        style={[
+          styles.box,
+          secondBoxPosition === 'left' ? null : styles.moveRight,
+        ]}
+      />
+      <View style={styles.buttonContainer}>
+        <Button title="Spring" onPress={toggleThirdBox} />
+      </View>
+      <View
+        style={[
+          styles.box,
+          thirdBoxPosition === 'left' ? null : styles.moveRight,
+        ]}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+  },
+  box: {
+    height: 100,
+    width: 100,
+    borderRadius: 5,
+    margin: 8,
+    backgroundColor: 'blue',
+  },
+  moveRight: {
+    alignSelf: 'flex-end',
+  },
+  buttonContainer: {
+    alignSelf: 'center',
+  },
+});
+
+export default App;
+```
diff --git a/website/versioned_docs/version-0.84/legacy/direct-manipulation.md b/website/versioned_docs/version-0.84/legacy/direct-manipulation.md
index b3e7e063414..9ba739abb15 100644
--- a/website/versioned_docs/version-0.84/legacy/direct-manipulation.md
+++ b/website/versioned_docs/version-0.84/legacy/direct-manipulation.md
@@ -1,444 +1,440 @@
----
-id: direct-manipulation
-title: Direct Manipulation
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-It is sometimes necessary to make changes directly to a component without using state/props to trigger a re-render of the entire subtree. When using React in the browser for example, you sometimes need to directly modify a DOM node, and the same is true for views in mobile apps. `setNativeProps` is the React Native equivalent to setting properties directly on a DOM node.
-
-:::caution
-Use `setNativeProps` when frequent re-rendering creates a performance bottleneck!
-
-Direct manipulation will not be a tool that you reach for frequently. You will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views.
-`setNativeProps` is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about.
-
-Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate).
-:::
-
-## setNativeProps with TouchableOpacity
-
-[TouchableOpacity](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js) uses `setNativeProps` internally to update the opacity of its child component:
-
-```tsx
-const viewRef = useRef<View>();
-const setOpacityTo = useCallback(value => {
-  // Redacted: animation related code
-  viewRef.current.setNativeProps({
-    opacity: value,
-  });
-}, []);
-```
-
-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:
-
-```tsx
-<TouchableOpacity onPress={handlePress}>
-  <View>
-    <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:
-
-```tsx
-const [buttonOpacity, setButtonOpacity] = useState(1);
-return (
-  <TouchableOpacity
-    onPressIn={() => setButtonOpacity(0.5)}
-    onPressOut={() => setButtonOpacity(1)}>
-    <View style={{opacity: buttonOpacity}}>
-      <Text>Press me!</Text>
-    </View>
-  </TouchableOpacity>
-);
-```
-
-This is computationally intensive compared to the original example - React needs to re-render the component hierarchy each time the opacity changes, even though other properties of the view and its children haven't changed. Usually this overhead isn't a concern but when performing continuous animations and responding to gestures, judiciously optimizing your components can improve your animations' fidelity.
-
-If you look at the implementation of `setNativeProps` in [NativeMethodsMixin](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js) you will notice that it is a wrapper around `RCTUIManager.updateView` - this is the exact same function call that results from re-rendering - see [receiveComponent in ReactNativeBaseComponent](https://github.com/facebook/react-native/blob/fb2ec1ea47c53c2e7b873acb1cb46192ac74274e/Libraries/Renderer/oss/ReactNativeRenderer-prod.js#L5793-L5813).
-
-## Composite components and setNativeProps
-
-Composite components are not backed by a native view, so you cannot call `setNativeProps` on them. Consider this example:
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=setNativeProps%20with%20Composite%20Components&ext=js
-import React from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
-
-const MyButton = props => (
-  <View style={{marginTop: 50}}>
-    <Text>{props.label}</Text>
-  </View>
-);
-
-const App = () => (
-  <TouchableOpacity>
-    <MyButton label="Press me!" />
-  </TouchableOpacity>
-);
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=setNativeProps%20with%20Composite%20Components&ext=tsx
-import React from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
-
-const MyButton = (props: {label: string}) => (
-  <View style={{marginTop: 50}}>
-    <Text>{props.label}</Text>
-  </View>
-);
-
-const App = () => (
-  <TouchableOpacity>
-    <MyButton label="Press me!" />
-  </TouchableOpacity>
-);
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-If you run this you will immediately see this error: `Touchable child must either be native or forward setNativeProps to a native component`. This occurs because `MyButton` isn't directly backed by a native view whose opacity should be set. You can think about it like this: if you define a component with `createReactClass` you would not expect to be able to set a style prop on it and have that work - you would need to pass the style prop down to a child, unless you are wrapping a native component. Similarly, we are going to forward `setNativeProps` to a native-backed child component.
-
-#### Forward setNativeProps to a child
-
-Since the `setNativeProps` method exists on any ref to a `View` component, it is enough to forward a ref on your custom component to one of the `<View />` components that it renders. This means that a call to `setNativeProps` on the custom component will have the same effect as if you called `setNativeProps` on the wrapped `View` component itself.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Forwarding%20setNativeProps&ext=js
-import React from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
-
-const MyButton = React.forwardRef((props, ref) => (
-  <View {...props} ref={ref} style={{marginTop: 50}}>
-    <Text>{props.label}</Text>
-  </View>
-));
-
-const App = () => (
-  <TouchableOpacity>
-    <MyButton label="Press me!" />
-  </TouchableOpacity>
-);
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Forwarding%20setNativeProps&ext=tsx
-import React from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
-
-const MyButton = React.forwardRef<View, {label: string}>((props, ref) => (
-  <View {...props} ref={ref} style={{marginTop: 50}}>
-    <Text>{props.label}</Text>
-  </View>
-));
-
-const App = () => (
-  <TouchableOpacity>
-    <MyButton label="Press me!" />
-  </TouchableOpacity>
-);
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-You can now use `MyButton` inside of `TouchableOpacity`!
-
-You may have noticed that we passed all of the props down to the child view using `{...props}`. The reason for this is that `TouchableOpacity` is actually a composite component, and so in addition to depending on `setNativeProps` on its child, it also requires that the child perform touch handling. To do this, it passes on [various props](view.md#onmoveshouldsetresponder) that call back to the `TouchableOpacity` component. `TouchableHighlight`, in contrast, is backed by a native view and only requires that we implement `setNativeProps`.
-
-## setNativeProps to edit TextInput value
-
-Another very common use case of `setNativeProps` is to edit the value of the TextInput. The `controlled` prop of TextInput can sometimes drop characters when the `bufferDelay` is low and the user types very quickly. Some developers prefer to skip this prop entirely and instead use `setNativeProps` to directly manipulate the TextInput value when necessary. For example, the following code demonstrates editing the input when you tap a button:
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Clear%20text&ext=js
-import React from 'react';
-import {useCallback, useRef} from 'react';
-import {
-  StyleSheet,
-  TextInput,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-
-const App = () => {
-  const inputRef = useRef(null);
-  const editText = useCallback(() => {
-    inputRef.current.setNativeProps({text: 'Edited Text'});
-  }, []);
-
-  return (
-    <View style={styles.container}>
-      <TextInput ref={inputRef} style={styles.input} />
-      <TouchableOpacity onPress={editText}>
-        <Text>Edit text</Text>
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  input: {
-    height: 50,
-    width: 200,
-    marginHorizontal: 20,
-    borderWidth: 1,
-    borderColor: '#ccc',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Clear%20text&ext=tsx
-import React from 'react';
-import {useCallback, useRef} from 'react';
-import {
-  StyleSheet,
-  TextInput,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-
-const App = () => {
-  const inputRef = useRef<TextInput>(null);
-  const editText = useCallback(() => {
-    inputRef.current?.setNativeProps({text: 'Edited Text'});
-  }, []);
-
-  return (
-    <View style={styles.container}>
-      <TextInput ref={inputRef} style={styles.input} />
-      <TouchableOpacity onPress={editText}>
-        <Text>Edit text</Text>
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  input: {
-    height: 50,
-    width: 200,
-    marginHorizontal: 20,
-    borderWidth: 1,
-    borderColor: '#ccc',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-You can use the [`clear`](../textinput#clear) method to clear the `TextInput` which clears the current input text using the same approach.
-
-## Avoiding conflicts with the render function
-
-If you update a property that is also managed by the render function, you might end up with some unpredictable and confusing bugs because anytime the component re-renders and that property changes, whatever value was previously set from `setNativeProps` will be completely ignored and overridden.
-
-## setNativeProps & shouldComponentUpdate
-
-By [intelligently applying `shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`.
-
-## Other native methods
-
-The methods described here are available on most of the default components provided by React Native. Note, however, that they are _not_ available on composite components that aren't directly backed by a native view. This will generally include most components that you define in your own app.
-
-### measure(callback)
-
-Determines the location on screen, width, and height in the viewport of the given view and returns the values via an async callback. If successful, the callback will be called with the following arguments:
-
-- x
-- y
-- width
-- height
-- pageX
-- pageY
-
-Note that these measurements are not available until after the rendering has been completed in native. If you need the measurements as soon as possible and you don't need `pageX` and `pageY`, consider using the [`onLayout`](view.md#onlayout) property instead.
-
-Also the width and height returned by `measure()` are the width and height of the component in the viewport. If you need the actual size of the component, consider using the [`onLayout`](view.md#onlayout) property instead.
-
-### measureInWindow(callback)
-
-Determines the location of the given view in the window and returns the values via an async callback. If the React root view is embedded in another native view, this will give you the absolute coordinates. If successful, the callback will be called with the following arguments:
-
-- x
-- y
-- width
-- height
-
-### measureLayout(relativeToNativeComponentRef, onSuccess, onFail)
-
-Like `measure()`, but measures the view relative to an ancestor, specified with `relativeToNativeComponentRef` reference. This means that the returned coordinates are relative to the origin `x`, `y` of the ancestor view.
-
-:::note
-This method can also be called with a `relativeToNativeNode` handler (instead of reference), but this variant is obsolete with the new architecture.
-:::
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=measureLayout%20example&supportedPlatforms=android,ios&ext=js
-import React, {useEffect, useRef, useState} from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-
-const App = () => {
-  const textContainerRef = useRef(null);
-  const textRef = useRef(null);
-  const [measure, setMeasure] = useState(null);
-
-  useEffect(() => {
-    if (textRef.current && textContainerRef.current) {
-      textRef.current.measureLayout(
-        textContainerRef.current,
-        (left, top, width, height) => {
-          setMeasure({left, top, width, height});
-        },
-      );
-    }
-  }, [measure]);
-
-  return (
-    <View style={styles.container}>
-      <View ref={textContainerRef} style={styles.textContainer}>
-        <Text ref={textRef}>Where am I? (relative to the text container)</Text>
-      </View>
-      <Text style={styles.measure}>{JSON.stringify(measure)}</Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  textContainer: {
-    backgroundColor: '#61dafb',
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 12,
-  },
-  measure: {
-    textAlign: 'center',
-    padding: 12,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=measureLayout%20example&ext=tsx
-import React, {useEffect, useRef, useState} from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-
-type Measurements = {
-  left: number;
-  top: number;
-  width: number;
-  height: number;
-};
-
-const App = () => {
-  const textContainerRef = useRef<View>(null);
-  const textRef = useRef<Text>(null);
-  const [measure, setMeasure] = useState<Measurements | null>(null);
-
-  useEffect(() => {
-    if (textRef.current && textContainerRef.current) {
-      textRef.current?.measureLayout(
-        textContainerRef.current,
-        (left, top, width, height) => {
-          setMeasure({left, top, width, height});
-        },
-        () => {
-          console.error('measurement failed');
-        },
-      );
-    }
-  }, [measure]);
-
-  return (
-    <View style={styles.container}>
-      <View ref={textContainerRef} style={styles.textContainer}>
-        <Text ref={textRef}>Where am I? (relative to the text container)</Text>
-      </View>
-      <Text style={styles.measure}>{JSON.stringify(measure)}</Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  textContainer: {
-    backgroundColor: '#61dafb',
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 12,
-  },
-  measure: {
-    textAlign: 'center',
-    padding: 12,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### focus()
-
-Requests focus for the given input or view. The exact behavior triggered will depend on the platform and type of view.
-
-### blur()
-
-Removes focus from an input or view. This is the opposite of `focus()`.
+---
+id: direct-manipulation
+title: Direct Manipulation
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+It is sometimes necessary to make changes directly to a component without using state/props to trigger a re-render of the entire subtree. When using React in the browser for example, you sometimes need to directly modify a DOM node, and the same is true for views in mobile apps. `setNativeProps` is the React Native equivalent to setting properties directly on a DOM node.
+
+:::caution
+Use `setNativeProps` when frequent re-rendering creates a performance bottleneck!
+
+Direct manipulation will not be a tool that you reach for frequently. You will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views.
+`setNativeProps` is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about.
+
+Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate).
+:::
+
+## setNativeProps with TouchableOpacity
+
+[TouchableOpacity](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js) uses `setNativeProps` internally to update the opacity of its child component:
+
+```tsx
+const viewRef = useRef<View>();
+const setOpacityTo = useCallback(value => {
+  // Redacted: animation related code
+  viewRef.current.setNativeProps({
+    opacity: value,
+  });
+}, []);
+```
+
+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:
+
+```tsx
+<TouchableOpacity onPress={handlePress}>
+  <View>
+    <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:
+
+```tsx
+const [buttonOpacity, setButtonOpacity] = useState(1);
+return (
+  <TouchableOpacity
+    onPressIn={() => setButtonOpacity(0.5)}
+    onPressOut={() => setButtonOpacity(1)}>
+    <View style={{opacity: buttonOpacity}}>
+      <Text>Press me!</Text>
+    </View>
+  </TouchableOpacity>
+);
+```
+
+This is computationally intensive compared to the original example - React needs to re-render the component hierarchy each time the opacity changes, even though other properties of the view and its children haven't changed. Usually this overhead isn't a concern but when performing continuous animations and responding to gestures, judiciously optimizing your components can improve your animations' fidelity.
+
+If you look at the implementation of `setNativeProps` in [NativeMethodsMixin](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js) you will notice that it is a wrapper around `RCTUIManager.updateView` - this is the exact same function call that results from re-rendering - see [receiveComponent in ReactNativeBaseComponent](https://github.com/facebook/react-native/blob/fb2ec1ea47c53c2e7b873acb1cb46192ac74274e/Libraries/Renderer/oss/ReactNativeRenderer-prod.js#L5793-L5813).
+
+## Composite components and setNativeProps
+
+Composite components are not backed by a native view, so you cannot call `setNativeProps` on them. Consider this example:
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=setNativeProps%20with%20Composite%20Components&ext=js
+import {Text, TouchableOpacity, View} from 'react-native';
+
+const MyButton = props => (
+  <View style={{marginTop: 50}}>
+    <Text>{props.label}</Text>
+  </View>
+);
+
+const App = () => (
+  <TouchableOpacity>
+    <MyButton label="Press me!" />
+  </TouchableOpacity>
+);
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=setNativeProps%20with%20Composite%20Components&ext=tsx
+import {Text, TouchableOpacity, View} from 'react-native';
+
+const MyButton = (props: {label: string}) => (
+  <View style={{marginTop: 50}}>
+    <Text>{props.label}</Text>
+  </View>
+);
+
+const App = () => (
+  <TouchableOpacity>
+    <MyButton label="Press me!" />
+  </TouchableOpacity>
+);
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+If you run this you will immediately see this error: `Touchable child must either be native or forward setNativeProps to a native component`. This occurs because `MyButton` isn't directly backed by a native view whose opacity should be set. You can think about it like this: if you define a component with `createReactClass` you would not expect to be able to set a style prop on it and have that work - you would need to pass the style prop down to a child, unless you are wrapping a native component. Similarly, we are going to forward `setNativeProps` to a native-backed child component.
+
+#### Forward setNativeProps to a child
+
+Since the `setNativeProps` method exists on any ref to a `View` component, it is enough to forward a ref on your custom component to one of the `<View />` components that it renders. This means that a call to `setNativeProps` on the custom component will have the same effect as if you called `setNativeProps` on the wrapped `View` component itself.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Forwarding%20setNativeProps&ext=js
+import {forwardRef} from 'react';
+import {Text, TouchableOpacity, View} from 'react-native';
+
+const MyButton = forwardRef((props, ref) => (
+  <View {...props} ref={ref} style={{marginTop: 50}}>
+    <Text>{props.label}</Text>
+  </View>
+));
+
+const App = () => (
+  <TouchableOpacity>
+    <MyButton label="Press me!" />
+  </TouchableOpacity>
+);
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Forwarding%20setNativeProps&ext=tsx
+import {forwardRef} from 'react';
+import {Text, TouchableOpacity, View} from 'react-native';
+
+const MyButton = forwardRef<View, {label: string}>((props, ref) => (
+  <View {...props} ref={ref} style={{marginTop: 50}}>
+    <Text>{props.label}</Text>
+  </View>
+));
+
+const App = () => (
+  <TouchableOpacity>
+    <MyButton label="Press me!" />
+  </TouchableOpacity>
+);
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+You can now use `MyButton` inside of `TouchableOpacity`!
+
+You may have noticed that we passed all of the props down to the child view using `{...props}`. The reason for this is that `TouchableOpacity` is actually a composite component, and so in addition to depending on `setNativeProps` on its child, it also requires that the child perform touch handling. To do this, it passes on [various props](view.md#onmoveshouldsetresponder) that call back to the `TouchableOpacity` component. `TouchableHighlight`, in contrast, is backed by a native view and only requires that we implement `setNativeProps`.
+
+## setNativeProps to edit TextInput value
+
+Another very common use case of `setNativeProps` is to edit the value of the TextInput. The `controlled` prop of TextInput can sometimes drop characters when the `bufferDelay` is low and the user types very quickly. Some developers prefer to skip this prop entirely and instead use `setNativeProps` to directly manipulate the TextInput value when necessary. For example, the following code demonstrates editing the input when you tap a button:
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Clear%20text&ext=js
+import {useCallback, useRef} from 'react';
+import {
+  StyleSheet,
+  TextInput,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+const App = () => {
+  const inputRef = useRef(null);
+  const editText = useCallback(() => {
+    inputRef.current.setNativeProps({text: 'Edited Text'});
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <TextInput ref={inputRef} style={styles.input} />
+      <TouchableOpacity onPress={editText}>
+        <Text>Edit text</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  input: {
+    height: 50,
+    width: 200,
+    marginHorizontal: 20,
+    borderWidth: 1,
+    borderColor: '#ccc',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Clear%20text&ext=tsx
+import {useCallback, useRef} from 'react';
+import {
+  StyleSheet,
+  TextInput,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+const App = () => {
+  const inputRef = useRef<TextInput>(null);
+  const editText = useCallback(() => {
+    inputRef.current?.setNativeProps({text: 'Edited Text'});
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <TextInput ref={inputRef} style={styles.input} />
+      <TouchableOpacity onPress={editText}>
+        <Text>Edit text</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  input: {
+    height: 50,
+    width: 200,
+    marginHorizontal: 20,
+    borderWidth: 1,
+    borderColor: '#ccc',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+You can use the [`clear`](../textinput#clear) method to clear the `TextInput` which clears the current input text using the same approach.
+
+## Avoiding conflicts with the render function
+
+If you update a property that is also managed by the render function, you might end up with some unpredictable and confusing bugs because anytime the component re-renders and that property changes, whatever value was previously set from `setNativeProps` will be completely ignored and overridden.
+
+## setNativeProps & shouldComponentUpdate
+
+By [intelligently applying `shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`.
+
+## Other native methods
+
+The methods described here are available on most of the default components provided by React Native. Note, however, that they are _not_ available on composite components that aren't directly backed by a native view. This will generally include most components that you define in your own app.
+
+### measure(callback)
+
+Determines the location on screen, width, and height in the viewport of the given view and returns the values via an async callback. If successful, the callback will be called with the following arguments:
+
+- x
+- y
+- width
+- height
+- pageX
+- pageY
+
+Note that these measurements are not available until after the rendering has been completed in native. If you need the measurements as soon as possible and you don't need `pageX` and `pageY`, consider using the [`onLayout`](view.md#onlayout) property instead.
+
+Also the width and height returned by `measure()` are the width and height of the component in the viewport. If you need the actual size of the component, consider using the [`onLayout`](view.md#onlayout) property instead.
+
+### measureInWindow(callback)
+
+Determines the location of the given view in the window and returns the values via an async callback. If the React root view is embedded in another native view, this will give you the absolute coordinates. If successful, the callback will be called with the following arguments:
+
+- x
+- y
+- width
+- height
+
+### measureLayout(relativeToNativeComponentRef, onSuccess, onFail)
+
+Like `measure()`, but measures the view relative to an ancestor, specified with `relativeToNativeComponentRef` reference. This means that the returned coordinates are relative to the origin `x`, `y` of the ancestor view.
+
+:::note
+This method can also be called with a `relativeToNativeNode` handler (instead of reference), but this variant is obsolete with the new architecture.
+:::
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=measureLayout%20example&supportedPlatforms=android,ios&ext=js
+import {useEffect, useRef, useState} from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+
+const App = () => {
+  const textContainerRef = useRef(null);
+  const textRef = useRef(null);
+  const [measure, setMeasure] = useState(null);
+
+  useEffect(() => {
+    if (textRef.current && textContainerRef.current) {
+      textRef.current.measureLayout(
+        textContainerRef.current,
+        (left, top, width, height) => {
+          setMeasure({left, top, width, height});
+        },
+      );
+    }
+  }, [measure]);
+
+  return (
+    <View style={styles.container}>
+      <View ref={textContainerRef} style={styles.textContainer}>
+        <Text ref={textRef}>Where am I? (relative to the text container)</Text>
+      </View>
+      <Text style={styles.measure}>{JSON.stringify(measure)}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  textContainer: {
+    backgroundColor: '#61dafb',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 12,
+  },
+  measure: {
+    textAlign: 'center',
+    padding: 12,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=measureLayout%20example&ext=tsx
+import {useEffect, useRef, useState} from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+
+type Measurements = {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+};
+
+const App = () => {
+  const textContainerRef = useRef<View>(null);
+  const textRef = useRef<Text>(null);
+  const [measure, setMeasure] = useState<Measurements | null>(null);
+
+  useEffect(() => {
+    if (textRef.current && textContainerRef.current) {
+      textRef.current?.measureLayout(
+        textContainerRef.current,
+        (left, top, width, height) => {
+          setMeasure({left, top, width, height});
+        },
+        () => {
+          console.error('measurement failed');
+        },
+      );
+    }
+  }, [measure]);
+
+  return (
+    <View style={styles.container}>
+      <View ref={textContainerRef} style={styles.textContainer}>
+        <Text ref={textRef}>Where am I? (relative to the text container)</Text>
+      </View>
+      <Text style={styles.measure}>{JSON.stringify(measure)}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  textContainer: {
+    backgroundColor: '#61dafb',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 12,
+  },
+  measure: {
+    textAlign: 'center',
+    padding: 12,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### focus()
+
+Requests focus for the given input or view. The exact behavior triggered will depend on the platform and type of view.
+
+### blur()
+
+Removes focus from an input or view. This is the opposite of `focus()`.
diff --git a/website/versioned_docs/version-0.84/legacy/native-components-android.md b/website/versioned_docs/version-0.84/legacy/native-components-android.md
index 9443d854c53..53d9854dca8 100644
--- a/website/versioned_docs/version-0.84/legacy/native-components-android.md
+++ b/website/versioned_docs/version-0.84/legacy/native-components-android.md
@@ -1,873 +1,873 @@
----
-id: native-components-android
-title: Android Native UI Components
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-import NativeDeprecated from '../the-new-architecture/\_markdown_native_deprecation.mdx'
-
-<NativeDeprecated />
-
-There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application.
-
-Like the native module guide, this too is a more advanced guide that assumes you are somewhat familiar with Android SDK programming. This guide will show you how to build a native UI component, walking you through the implementation of a subset of the existing `ImageView` component available in the core React Native library.
-
-:::info
-You can also setup local library containing native component with one command. Read the guide to [Local libraries setup](local-library-setup) for more details.
-:::
-
-## ImageView example
-
-For this example we are going to walk through the implementation requirements to allow the use of ImageViews in JavaScript.
-
-Native views are created and manipulated by extending `ViewManager` or more commonly `SimpleViewManager` . A `SimpleViewManager` is convenient in this case because it applies common properties such as background color, opacity, and Flexbox layout.
-
-These subclasses are essentially singletons - only one instance of each is created by the bridge. They send native views to the `NativeViewHierarchyManager`, which delegates back to them to set and update the properties of the views as necessary. The `ViewManagers` are also typically the delegates for the views, sending events back to JavaScript via the bridge.
-
-To send a view:
-
-1. Create the ViewManager subclass.
-2. Implement the `createViewInstance` method
-3. Expose view property setters using `@ReactProp` (or `@ReactPropGroup`) annotation
-4. Register the manager in `createViewManagers` of the applications package.
-5. Implement the JavaScript module
-
-### 1. Create the `ViewManager` subclass
-
-In this example we create view manager class `ReactImageManager` that extends `SimpleViewManager` of type `ReactImageView`. `ReactImageView` is the type of object managed by the manager, this will be the custom native view. Name returned by `getName` is used to reference the native view type from JavaScript.
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-class ReactImageManager(
-    private val callerContext: ReactApplicationContext
-) : SimpleViewManager<ReactImageView>() {
-
-  override fun getName() = REACT_CLASS
-
-  companion object {
-    const val REACT_CLASS = "RCTImageView"
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-public class ReactImageManager extends SimpleViewManager<ReactImageView> {
-
-  public static final String REACT_CLASS = "RCTImageView";
-  ReactApplicationContext mCallerContext;
-
-  public ReactImageManager(ReactApplicationContext reactContext) {
-    mCallerContext = reactContext;
-  }
-
-  @Override
-  public String getName() {
-    return REACT_CLASS;
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 2. Implement method `createViewInstance`
-
-Views are created in the `createViewInstance` method, the view should initialize itself in its default state, any properties will be set via a follow up call to `updateView.`
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-  override fun createViewInstance(context: ThemedReactContext) =
-      ReactImageView(context, Fresco.newDraweeControllerBuilder(), null, callerContext)
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-  @Override
-  public ReactImageView createViewInstance(ThemedReactContext context) {
-    return new ReactImageView(context, Fresco.newDraweeControllerBuilder(), null, mCallerContext);
-  }
-```
-
-</TabItem>
-</Tabs>
-
-### 3. Expose view property setters using `@ReactProp` (or `@ReactPropGroup`) annotation
-
-Properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with `@ReactProp` (or `@ReactPropGroup`). Setter method should take view to be updated (of the current view type) as a first argument and property value as a second argument. Setter should be public and not return a value (i.e. return type should be `void` in Java or `Unit` in Kotlin). Property type sent to JS is determined automatically based on the type of value argument of the setter. The following type of values are currently supported (in Java): `boolean`, `int`, `float`, `double`, `String`, `Boolean`, `Integer`, `ReadableArray`, `ReadableMap`. The corresponding types in Kotlin are `Boolean`, `Int`, `Float`, `Double`, `String`, `ReadableArray`, `ReadableMap`.
-
-Annotation `@ReactProp` has one obligatory argument `name` of type `String`. Name assigned to the `@ReactProp` annotation linked to the setter method is used to reference the property on JS side.
-
-Except from `name`, `@ReactProp` annotation may take following optional arguments: `defaultBoolean`, `defaultInt`, `defaultFloat`. Those arguments should be of the corresponding type (accordingly `boolean`, `int`, `float` in Java and `Boolean`, `Int`, `Float` in Kotlin) and the value provided will be passed to the setter method in case when the property that the setter is referencing has been removed from the component. Note that "default" values are only provided for primitive types, in case when setter is of some complex type, `null` will be provided as a default value in case when corresponding property gets removed.
-
-Setter declaration requirements for methods annotated with `@ReactPropGroup` are different than for `@ReactProp`, please refer to the `@ReactPropGroup` annotation class docs for more information about it. **IMPORTANT!** in ReactJS updating the property value will result in setter method call. Note that one of the ways we can update component is by removing properties that have been set before. In that case setter method will be called as well to notify view manager that property has changed. In that case "default" value will be provided (for primitive types "default" value can be specified using `defaultBoolean`, `defaultFloat`, etc. arguments of `@ReactProp` annotation, for complex types setter will be called with value set to `null`).
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-  @ReactProp(name = "src")
-  fun setSrc(view: ReactImageView, sources: ReadableArray?) {
-    view.setSource(sources)
-  }
-
-  @ReactProp(name = "borderRadius", defaultFloat = 0f)
-  override fun setBorderRadius(view: ReactImageView, borderRadius: Float) {
-    view.setBorderRadius(borderRadius)
-  }
-
-  @ReactProp(name = ViewProps.RESIZE_MODE)
-  fun setResizeMode(view: ReactImageView, resizeMode: String?) {
-    view.setScaleType(ImageResizeMode.toScaleType(resizeMode))
-  }
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-  @ReactProp(name = "src")
-  public void setSrc(ReactImageView view, @Nullable ReadableArray sources) {
-    view.setSource(sources);
-  }
-
-  @ReactProp(name = "borderRadius", defaultFloat = 0f)
-  public void setBorderRadius(ReactImageView view, float borderRadius) {
-    view.setBorderRadius(borderRadius);
-  }
-
-  @ReactProp(name = ViewProps.RESIZE_MODE)
-  public void setResizeMode(ReactImageView view, @Nullable String resizeMode) {
-    view.setScaleType(ImageResizeMode.toScaleType(resizeMode));
-  }
-```
-
-</TabItem>
-</Tabs>
-
-### 4. Register the `ViewManager`
-
-The final step is to register the ViewManager to the application, this happens in a similar way to [Native Modules](native-modules-android.md), via the applications package member function `createViewManagers`.
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-  override fun createViewManagers(
-      reactContext: ReactApplicationContext
-  ) = listOf(ReactImageManager(reactContext))
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-  @Override
-  public List<ViewManager> createViewManagers(
-                            ReactApplicationContext reactContext) {
-    return Arrays.<ViewManager>asList(
-      new ReactImageManager(reactContext)
-    );
-  }
-```
-
-</TabItem>
-</Tabs>
-
-### 5. Implement the JavaScript module
-
-The very final step is to create the JavaScript module that defines the interface layer between Java/Kotlin and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using TypeScript, Flow, or plain old comments).
-
-```tsx title="ImageView.tsx"
-import {requireNativeComponent} from 'react-native';
-
-/**
- * Composes `View`.
- *
- * - src: Array<{url: string}>
- * - borderRadius: number
- * - resizeMode: 'cover' | 'contain' | 'stretch'
- */
-export default requireNativeComponent('RCTImageView');
-```
-
-The `requireNativeComponent` function takes the name of the native view. Note that if your component needs to do anything more sophisticated (e.g. custom event handling), you should wrap the native component in another React component. This is illustrated in the `MyCustomView` example below.
-
-## Events
-
-So now we know how to expose native view components that we can control freely from JS, but how do we deal with events from the user, like pinch-zooms or panning? When a native event occurs the native code should issue an event to the JavaScript representation of the View, and the two views are linked with the value returned from the `getId()` method.
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-class MyCustomView(context: Context) : View(context) {
-  ...
-  fun onReceiveNativeEvent() {
-    val event = Arguments.createMap().apply {
-      putString("message", "MyMessage")
-    }
-    val reactContext = context as ReactContext
-    reactContext
-        .getJSModule(RCTEventEmitter::class.java)
-        .receiveEvent(id, "topChange", event)
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-class MyCustomView extends View {
-   ...
-   public void onReceiveNativeEvent() {
-      WritableMap event = Arguments.createMap();
-      event.putString("message", "MyMessage");
-      ReactContext reactContext = (ReactContext)getContext();
-      reactContext
-          .getJSModule(RCTEventEmitter.class)
-          .receiveEvent(getId(), "topChange", event);
-    }
-}
-```
-
-</TabItem>
-</Tabs>
-
-To map the `topChange` event name to the `onChange` callback prop in JavaScript, register it by overriding the `getExportedCustomBubblingEventTypeConstants` method in your `ViewManager`:
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-class ReactImageManager : SimpleViewManager<MyCustomView>() {
-  ...
-  override fun getExportedCustomBubblingEventTypeConstants(): Map<String, Any> {
-    return mapOf(
-      "topChange" to mapOf(
-        "phasedRegistrationNames" to mapOf(
-          "bubbled" to "onChange"
-        )
-      )
-    )
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-public class ReactImageManager extends SimpleViewManager<MyCustomView> {
-    ...
-    public Map getExportedCustomBubblingEventTypeConstants() {
-        return MapBuilder.builder().put(
-            "topChange",
-            MapBuilder.of(
-                "phasedRegistrationNames",
-                MapBuilder.of("bubbled", "onChange")
-            )
-        ).build();
-    }
-}
-```
-
-</TabItem>
-</Tabs>
-
-This callback is invoked with the raw event, which we typically process in the wrapper component to make a simpler API:
-
-```tsx {8-11,13-17} title="MyCustomView.tsx"
-import {useCallback} from 'react';
-import {requireNativeComponent} from 'react-native';
-
-const RCTMyCustomView = requireNativeComponent('RCTMyCustomView');
-
-export default function MyCustomView(props: {
-  // ...
-  /**
-   * Callback that is called continuously when the user is dragging the map.
-   */
-  onChangeMessage: (message: string) => unknown;
-}) {
-  const onChange = useCallback(
-    event => {
-      props.onChangeMessage?.(event.nativeEvent.message);
-    },
-    [props.onChangeMessage],
-  );
-
-  return <RCTMyCustomView {...props} onChange={onChange} />;
-}
-```
-
-## Integration with an Android Fragment example
-
-In order to integrate existing Native UI elements to your React Native app, you might need to use Android Fragments to give you a more granular control over your native component than returning a `View` from your `ViewManager`. You will need this if you want to add custom logic that is tied to your view with the help of [lifecycle methods](https://developer.android.com/guide/fragments/lifecycle), such as `onViewCreated`, `onPause`, `onResume`. The following steps will show you how to do it:
-
-### 1. Create an example custom view
-
-First, let's create a `CustomView` class which extends `FrameLayout` (the content of this view can be any view that you'd like to render)
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin title="CustomView.kt"
-// replace with your package
-package com.mypackage
-
-import android.content.Context
-import android.graphics.Color
-import android.widget.FrameLayout
-import android.widget.TextView
-
-class CustomView(context: Context) : FrameLayout(context) {
-  init {
-    // set padding and background color
-    setPadding(16,16,16,16)
-    setBackgroundColor(Color.parseColor("#5FD3F3"))
-
-    // add default text view
-    addView(TextView(context).apply {
-      text = "Welcome to Android Fragments with React Native."
-    })
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java title="CustomView.java"
-// replace with your package
-package com.mypackage;
-
-import android.content.Context;
-import android.graphics.Color;
-import android.widget.FrameLayout;
-import android.widget.ImageView;
-import android.widget.TextView;
-
-import androidx.annotation.NonNull;
-
-public class CustomView extends FrameLayout {
-  public CustomView(@NonNull Context context) {
-    super(context);
-    // set padding and background color
-    this.setPadding(16,16,16,16);
-    this.setBackgroundColor(Color.parseColor("#5FD3F3"));
-
-    // add default text view
-    TextView text = new TextView(context);
-    text.setText("Welcome to Android Fragments with React Native.");
-    this.addView(text);
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 2. Create a `Fragment`
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin title="MyFragment.kt"
-// replace with your package
-package com.mypackage
-
-import android.os.Bundle
-import android.view.LayoutInflater
-import android.view.View
-import android.view.ViewGroup
-import androidx.fragment.app.Fragment
-
-// replace with your view's import
-import com.mypackage.CustomView
-
-class MyFragment : Fragment() {
-  private lateinit var customView: CustomView
-
-  override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
-    super.onCreateView(inflater, container, savedInstanceState)
-    customView = CustomView(requireNotNull(context))
-    return customView // this CustomView could be any view that you want to render
-  }
-
-  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
-    super.onViewCreated(view, savedInstanceState)
-    // do any logic that should happen in an `onCreate` method, e.g:
-    // customView.onCreate(savedInstanceState);
-  }
-
-  override fun onPause() {
-    super.onPause()
-    // do any logic that should happen in an `onPause` method
-    // e.g.: customView.onPause();
-  }
-
-  override fun onResume() {
-    super.onResume()
-    // do any logic that should happen in an `onResume` method
-    // e.g.: customView.onResume();
-  }
-
-  override fun onDestroy() {
-    super.onDestroy()
-    // do any logic that should happen in an `onDestroy` method
-    // e.g.: customView.onDestroy();
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java title="MyFragment.java"
-// replace with your package
-package com.mypackage;
-
-import android.os.Bundle;
-import android.view.LayoutInflater;
-import android.view.View;
-import android.view.ViewGroup;
-import androidx.fragment.app.Fragment;
-
-// replace with your view's import
-import com.mypackage.CustomView;
-
-public class MyFragment extends Fragment {
-    CustomView customView;
-
-    @Override
-    public View onCreateView(LayoutInflater inflater, ViewGroup parent, Bundle savedInstanceState) {
-        super.onCreateView(inflater, parent, savedInstanceState);
-        customView = new CustomView(this.getContext());
-        return customView; // this CustomView could be any view that you want to render
-    }
-
-    @Override
-    public void onViewCreated(View view, Bundle savedInstanceState) {
-        super.onViewCreated(view, savedInstanceState);
-        // do any logic that should happen in an `onCreate` method, e.g:
-        // customView.onCreate(savedInstanceState);
-    }
-
-    @Override
-    public void onPause() {
-        super.onPause();
-        // do any logic that should happen in an `onPause` method
-        // e.g.: customView.onPause();
-    }
-
-    @Override
-    public void onResume() {
-        super.onResume();
-       // do any logic that should happen in an `onResume` method
-       // e.g.: customView.onResume();
-    }
-
-    @Override
-    public void onDestroy() {
-        super.onDestroy();
-        // do any logic that should happen in an `onDestroy` method
-        // e.g.: customView.onDestroy();
-    }
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 3. Create the `ViewManager` subclass
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin title="MyViewManager.kt"
-// replace with your package
-package com.mypackage
-
-import android.view.Choreographer
-import android.view.View
-import android.view.ViewGroup
-import android.widget.FrameLayout
-import androidx.fragment.app.FragmentActivity
-import com.facebook.react.bridge.ReactApplicationContext
-import com.facebook.react.bridge.ReadableArray
-import com.facebook.react.uimanager.ThemedReactContext
-import com.facebook.react.uimanager.ViewGroupManager
-import com.facebook.react.uimanager.annotations.ReactPropGroup
-
-class MyViewManager(
-    private val reactContext: ReactApplicationContext
-) : ViewGroupManager<FrameLayout>() {
-  private var propWidth: Int? = null
-  private var propHeight: Int? = null
-
-  override fun getName() = REACT_CLASS
-
-  /**
-   * Return a FrameLayout which will later hold the Fragment
-   */
-  override fun createViewInstance(reactContext: ThemedReactContext) =
-      FrameLayout(reactContext)
-
-  /**
-   * Map the "create" command to an integer
-   */
-  override fun getCommandsMap() = mapOf("create" to COMMAND_CREATE)
-
-  /**
-   * Handle "create" command (called from JS) and call createFragment method
-   */
-  override fun receiveCommand(
-      root: FrameLayout,
-      commandId: String,
-      args: ReadableArray?
-  ) {
-    super.receiveCommand(root, commandId, args)
-    val reactNativeViewId = requireNotNull(args).getInt(0)
-
-    when (commandId.toInt()) {
-      COMMAND_CREATE -> createFragment(root, reactNativeViewId)
-    }
-  }
-
-  @ReactPropGroup(names = ["width", "height"], customType = "Style")
-  fun setStyle(view: FrameLayout, index: Int, value: Int) {
-    if (index == 0) propWidth = value
-    if (index == 1) propHeight = value
-  }
-
-  /**
-   * Replace your React Native view with a custom fragment
-   */
-  fun createFragment(root: FrameLayout, reactNativeViewId: Int) {
-    val parentView = root.findViewById<ViewGroup>(reactNativeViewId)
-    setupLayout(parentView)
-
-    val myFragment = MyFragment()
-    val activity = reactContext.currentActivity as FragmentActivity
-    activity.supportFragmentManager
-        .beginTransaction()
-        .replace(reactNativeViewId, myFragment, reactNativeViewId.toString())
-        .commit()
-  }
-
-  fun setupLayout(view: View) {
-    Choreographer.getInstance().postFrameCallback(object: Choreographer.FrameCallback {
-      override fun doFrame(frameTimeNanos: Long) {
-        manuallyLayoutChildren(view)
-        view.viewTreeObserver.dispatchOnGlobalLayout()
-        Choreographer.getInstance().postFrameCallback(this)
-      }
-    })
-  }
-
-  /**
-   * Layout all children properly
-   */
-  private fun manuallyLayoutChildren(view: View) {
-    // propWidth and propHeight coming from react-native props
-    val width = requireNotNull(propWidth)
-    val height = requireNotNull(propHeight)
-
-    view.measure(
-        View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
-        View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY))
-
-    view.layout(0, 0, width, height)
-  }
-
-  companion object {
-    private const val REACT_CLASS = "MyViewManager"
-    private const val COMMAND_CREATE = 1
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java title="MyViewManager.java"
-// replace with your package
-package com.mypackage;
-
-import android.view.Choreographer;
-import android.view.View;
-import android.view.ViewGroup;
-import android.widget.FrameLayout;
-
-import androidx.annotation.NonNull;
-import androidx.annotation.Nullable;
-import androidx.fragment.app.FragmentActivity;
-
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.ReadableArray;
-import com.facebook.react.common.MapBuilder;
-import com.facebook.react.uimanager.annotations.ReactProp;
-import com.facebook.react.uimanager.annotations.ReactPropGroup;
-import com.facebook.react.uimanager.ViewGroupManager;
-import com.facebook.react.uimanager.ThemedReactContext;
-
-import java.util.Map;
-
-public class MyViewManager extends ViewGroupManager<FrameLayout> {
-
-  public static final String REACT_CLASS = "MyViewManager";
-  public final int COMMAND_CREATE = 1;
-  private int propWidth;
-  private int propHeight;
-
-  ReactApplicationContext reactContext;
-
-  public MyViewManager(ReactApplicationContext reactContext) {
-    this.reactContext = reactContext;
-  }
-
-  @Override
-  public String getName() {
-    return REACT_CLASS;
-  }
-
-  /**
-   * Return a FrameLayout which will later hold the Fragment
-   */
-  @Override
-  public FrameLayout createViewInstance(ThemedReactContext reactContext) {
-    return new FrameLayout(reactContext);
-  }
-
-  /**
-   * Map the "create" command to an integer
-   */
-  @Nullable
-  @Override
-  public Map<String, Integer> getCommandsMap() {
-    return MapBuilder.of("create", COMMAND_CREATE);
-  }
-
-  /**
-   * Handle "create" command (called from JS) and call createFragment method
-   */
-  @Override
-  public void receiveCommand(
-    @NonNull FrameLayout root,
-    String commandId,
-    @Nullable ReadableArray args
-  ) {
-    super.receiveCommand(root, commandId, args);
-    int reactNativeViewId = args.getInt(0);
-    int commandIdInt = Integer.parseInt(commandId);
-
-    switch (commandIdInt) {
-      case COMMAND_CREATE:
-        createFragment(root, reactNativeViewId);
-        break;
-      default: {}
-    }
-  }
-
-  @ReactPropGroup(names = {"width", "height"}, customType = "Style")
-  public void setStyle(FrameLayout view, int index, Integer value) {
-    if (index == 0) {
-      propWidth = value;
-    }
-
-    if (index == 1) {
-      propHeight = value;
-    }
-  }
-
-  /**
-   * Replace your React Native view with a custom fragment
-   */
-  public void createFragment(FrameLayout root, int reactNativeViewId) {
-    ViewGroup parentView = (ViewGroup) root.findViewById(reactNativeViewId);
-    setupLayout(parentView);
-
-    final MyFragment myFragment = new MyFragment();
-    FragmentActivity activity = (FragmentActivity) reactContext.getCurrentActivity();
-    activity.getSupportFragmentManager()
-            .beginTransaction()
-            .replace(reactNativeViewId, myFragment, String.valueOf(reactNativeViewId))
-            .commit();
-  }
-
-  public void setupLayout(View view) {
-    Choreographer.getInstance().postFrameCallback(new Choreographer.FrameCallback() {
-      @Override
-      public void doFrame(long frameTimeNanos) {
-        manuallyLayoutChildren(view);
-        view.getViewTreeObserver().dispatchOnGlobalLayout();
-        Choreographer.getInstance().postFrameCallback(this);
-      }
-    });
-  }
-
-  /**
-   * Layout all children properly
-   */
-  public void manuallyLayoutChildren(View view) {
-      // propWidth and propHeight coming from react-native props
-      int width = propWidth;
-      int height = propHeight;
-
-      view.measure(
-              View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
-              View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY));
-
-      view.layout(0, 0, width, height);
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 4. Register the `ViewManager`
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin title="MyPackage.kt"
-// replace with your package
-package com.mypackage
-
-import com.facebook.react.ReactPackage
-import com.facebook.react.bridge.ReactApplicationContext
-import com.facebook.react.uimanager.ViewManager
-
-class MyPackage : ReactPackage {
-  ...
-  override fun createViewManagers(
-      reactContext: ReactApplicationContext
-  ) = listOf(MyViewManager(reactContext))
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java title="MyPackage.java"
-// replace with your package
-package com.mypackage;
-
-import com.facebook.react.ReactPackage;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.uimanager.ViewManager;
-
-import java.util.Arrays;
-import java.util.List;
-
-public class MyPackage implements ReactPackage {
-
-   @Override
-   public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
-       return Arrays.<ViewManager>asList(
-            new MyViewManager(reactContext)
-       );
-   }
-
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 5. Register the `Package`
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin title="MainApplication.kt"
-override fun getPackages(): List<ReactPackage> =
-    PackageList(this).packages.apply {
-        // Packages that cannot be autolinked yet can be added manually here, for example:
-        // add(MyReactNativePackage())
-        add(MyAppPackage())
-    }
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java title="MainApplication.java"
-@Override
-protected List<ReactPackage> getPackages() {
-    List<ReactPackage> packages = new PackageList(this).getPackages();
-    // Packages that cannot be autolinked yet can be added manually here, for example:
-    // packages.add(new MyReactNativePackage());
-    packages.add(new MyAppPackage());
-    return packages;
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 6. Implement the JavaScript module
-
-I. Start with custom View manager:
-
-```tsx title="MyViewManager.tsx"
-import {requireNativeComponent} from 'react-native';
-
-export const MyViewManager =
-  requireNativeComponent('MyViewManager');
-```
-
-II. Then implement custom View calling the `create` method:
-
-```tsx title="MyView.tsx"
-import React, {useEffect, useRef} from 'react';
-import {
-  PixelRatio,
-  UIManager,
-  findNodeHandle,
-} from 'react-native';
-
-import {MyViewManager} from './my-view-manager';
-
-const createFragment = viewId =>
-  UIManager.dispatchViewManagerCommand(
-    viewId,
-    // we are calling the 'create' command
-    UIManager.MyViewManager.Commands.create.toString(),
-    [viewId],
-  );
-
-export const MyView = () => {
-  const ref = useRef(null);
-
-  useEffect(() => {
-    const viewId = findNodeHandle(ref.current);
-    createFragment(viewId);
-  }, []);
-
-  return (
-    <MyViewManager
-      style={{
-        // converts dpi to px, provide desired height
-        height: PixelRatio.getPixelSizeForLayoutSize(200),
-        // converts dpi to px, provide desired width
-        width: PixelRatio.getPixelSizeForLayoutSize(200),
-      }}
-      ref={ref}
-    />
-  );
-};
-```
-
-If you want to expose property setters using `@ReactProp` (or `@ReactPropGroup`) annotation see the [ImageView example](#imageview-example) above.
+---
+id: native-components-android
+title: Android Native UI Components
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+import NativeDeprecated from '../the-new-architecture/\_markdown_native_deprecation.mdx'
+
+<NativeDeprecated />
+
+There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application.
+
+Like the native module guide, this too is a more advanced guide that assumes you are somewhat familiar with Android SDK programming. This guide will show you how to build a native UI component, walking you through the implementation of a subset of the existing `ImageView` component available in the core React Native library.
+
+:::info
+You can also setup local library containing native component with one command. Read the guide to [Local libraries setup](local-library-setup) for more details.
+:::
+
+## ImageView example
+
+For this example we are going to walk through the implementation requirements to allow the use of ImageViews in JavaScript.
+
+Native views are created and manipulated by extending `ViewManager` or more commonly `SimpleViewManager` . A `SimpleViewManager` is convenient in this case because it applies common properties such as background color, opacity, and Flexbox layout.
+
+These subclasses are essentially singletons - only one instance of each is created by the bridge. They send native views to the `NativeViewHierarchyManager`, which delegates back to them to set and update the properties of the views as necessary. The `ViewManagers` are also typically the delegates for the views, sending events back to JavaScript via the bridge.
+
+To send a view:
+
+1. Create the ViewManager subclass.
+2. Implement the `createViewInstance` method
+3. Expose view property setters using `@ReactProp` (or `@ReactPropGroup`) annotation
+4. Register the manager in `createViewManagers` of the applications package.
+5. Implement the JavaScript module
+
+### 1. Create the `ViewManager` subclass
+
+In this example we create view manager class `ReactImageManager` that extends `SimpleViewManager` of type `ReactImageView`. `ReactImageView` is the type of object managed by the manager, this will be the custom native view. Name returned by `getName` is used to reference the native view type from JavaScript.
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+class ReactImageManager(
+    private val callerContext: ReactApplicationContext
+) : SimpleViewManager<ReactImageView>() {
+
+  override fun getName() = REACT_CLASS
+
+  companion object {
+    const val REACT_CLASS = "RCTImageView"
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+public class ReactImageManager extends SimpleViewManager<ReactImageView> {
+
+  public static final String REACT_CLASS = "RCTImageView";
+  ReactApplicationContext mCallerContext;
+
+  public ReactImageManager(ReactApplicationContext reactContext) {
+    mCallerContext = reactContext;
+  }
+
+  @Override
+  public String getName() {
+    return REACT_CLASS;
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 2. Implement method `createViewInstance`
+
+Views are created in the `createViewInstance` method, the view should initialize itself in its default state, any properties will be set via a follow up call to `updateView.`
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+  override fun createViewInstance(context: ThemedReactContext) =
+      ReactImageView(context, Fresco.newDraweeControllerBuilder(), null, callerContext)
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+  @Override
+  public ReactImageView createViewInstance(ThemedReactContext context) {
+    return new ReactImageView(context, Fresco.newDraweeControllerBuilder(), null, mCallerContext);
+  }
+```
+
+</TabItem>
+</Tabs>
+
+### 3. Expose view property setters using `@ReactProp` (or `@ReactPropGroup`) annotation
+
+Properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with `@ReactProp` (or `@ReactPropGroup`). Setter method should take view to be updated (of the current view type) as a first argument and property value as a second argument. Setter should be public and not return a value (i.e. return type should be `void` in Java or `Unit` in Kotlin). Property type sent to JS is determined automatically based on the type of value argument of the setter. The following type of values are currently supported (in Java): `boolean`, `int`, `float`, `double`, `String`, `Boolean`, `Integer`, `ReadableArray`, `ReadableMap`. The corresponding types in Kotlin are `Boolean`, `Int`, `Float`, `Double`, `String`, `ReadableArray`, `ReadableMap`.
+
+Annotation `@ReactProp` has one obligatory argument `name` of type `String`. Name assigned to the `@ReactProp` annotation linked to the setter method is used to reference the property on JS side.
+
+Except from `name`, `@ReactProp` annotation may take following optional arguments: `defaultBoolean`, `defaultInt`, `defaultFloat`. Those arguments should be of the corresponding type (accordingly `boolean`, `int`, `float` in Java and `Boolean`, `Int`, `Float` in Kotlin) and the value provided will be passed to the setter method in case when the property that the setter is referencing has been removed from the component. Note that "default" values are only provided for primitive types, in case when setter is of some complex type, `null` will be provided as a default value in case when corresponding property gets removed.
+
+Setter declaration requirements for methods annotated with `@ReactPropGroup` are different than for `@ReactProp`, please refer to the `@ReactPropGroup` annotation class docs for more information about it. **IMPORTANT!** in ReactJS updating the property value will result in setter method call. Note that one of the ways we can update component is by removing properties that have been set before. In that case setter method will be called as well to notify view manager that property has changed. In that case "default" value will be provided (for primitive types "default" value can be specified using `defaultBoolean`, `defaultFloat`, etc. arguments of `@ReactProp` annotation, for complex types setter will be called with value set to `null`).
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+  @ReactProp(name = "src")
+  fun setSrc(view: ReactImageView, sources: ReadableArray?) {
+    view.setSource(sources)
+  }
+
+  @ReactProp(name = "borderRadius", defaultFloat = 0f)
+  override fun setBorderRadius(view: ReactImageView, borderRadius: Float) {
+    view.setBorderRadius(borderRadius)
+  }
+
+  @ReactProp(name = ViewProps.RESIZE_MODE)
+  fun setResizeMode(view: ReactImageView, resizeMode: String?) {
+    view.setScaleType(ImageResizeMode.toScaleType(resizeMode))
+  }
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+  @ReactProp(name = "src")
+  public void setSrc(ReactImageView view, @Nullable ReadableArray sources) {
+    view.setSource(sources);
+  }
+
+  @ReactProp(name = "borderRadius", defaultFloat = 0f)
+  public void setBorderRadius(ReactImageView view, float borderRadius) {
+    view.setBorderRadius(borderRadius);
+  }
+
+  @ReactProp(name = ViewProps.RESIZE_MODE)
+  public void setResizeMode(ReactImageView view, @Nullable String resizeMode) {
+    view.setScaleType(ImageResizeMode.toScaleType(resizeMode));
+  }
+```
+
+</TabItem>
+</Tabs>
+
+### 4. Register the `ViewManager`
+
+The final step is to register the ViewManager to the application, this happens in a similar way to [Native Modules](native-modules-android.md), via the applications package member function `createViewManagers`.
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+  override fun createViewManagers(
+      reactContext: ReactApplicationContext
+  ) = listOf(ReactImageManager(reactContext))
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+  @Override
+  public List<ViewManager> createViewManagers(
+                            ReactApplicationContext reactContext) {
+    return Arrays.<ViewManager>asList(
+      new ReactImageManager(reactContext)
+    );
+  }
+```
+
+</TabItem>
+</Tabs>
+
+### 5. Implement the JavaScript module
+
+The very final step is to create the JavaScript module that defines the interface layer between Java/Kotlin and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using TypeScript, Flow, or plain old comments).
+
+```tsx title="ImageView.tsx"
+import {requireNativeComponent} from 'react-native';
+
+/**
+ * Composes `View`.
+ *
+ * - src: Array<{url: string}>
+ * - borderRadius: number
+ * - resizeMode: 'cover' | 'contain' | 'stretch'
+ */
+export default requireNativeComponent('RCTImageView');
+```
+
+The `requireNativeComponent` function takes the name of the native view. Note that if your component needs to do anything more sophisticated (e.g. custom event handling), you should wrap the native component in another React component. This is illustrated in the `MyCustomView` example below.
+
+## Events
+
+So now we know how to expose native view components that we can control freely from JS, but how do we deal with events from the user, like pinch-zooms or panning? When a native event occurs the native code should issue an event to the JavaScript representation of the View, and the two views are linked with the value returned from the `getId()` method.
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+class MyCustomView(context: Context) : View(context) {
+  ...
+  fun onReceiveNativeEvent() {
+    val event = Arguments.createMap().apply {
+      putString("message", "MyMessage")
+    }
+    val reactContext = context as ReactContext
+    reactContext
+        .getJSModule(RCTEventEmitter::class.java)
+        .receiveEvent(id, "topChange", event)
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+class MyCustomView extends View {
+   ...
+   public void onReceiveNativeEvent() {
+      WritableMap event = Arguments.createMap();
+      event.putString("message", "MyMessage");
+      ReactContext reactContext = (ReactContext)getContext();
+      reactContext
+          .getJSModule(RCTEventEmitter.class)
+          .receiveEvent(getId(), "topChange", event);
+    }
+}
+```
+
+</TabItem>
+</Tabs>
+
+To map the `topChange` event name to the `onChange` callback prop in JavaScript, register it by overriding the `getExportedCustomBubblingEventTypeConstants` method in your `ViewManager`:
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+class ReactImageManager : SimpleViewManager<MyCustomView>() {
+  ...
+  override fun getExportedCustomBubblingEventTypeConstants(): Map<String, Any> {
+    return mapOf(
+      "topChange" to mapOf(
+        "phasedRegistrationNames" to mapOf(
+          "bubbled" to "onChange"
+        )
+      )
+    )
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+public class ReactImageManager extends SimpleViewManager<MyCustomView> {
+    ...
+    public Map getExportedCustomBubblingEventTypeConstants() {
+        return MapBuilder.builder().put(
+            "topChange",
+            MapBuilder.of(
+                "phasedRegistrationNames",
+                MapBuilder.of("bubbled", "onChange")
+            )
+        ).build();
+    }
+}
+```
+
+</TabItem>
+</Tabs>
+
+This callback is invoked with the raw event, which we typically process in the wrapper component to make a simpler API:
+
+```tsx {8-11,13-17} title="MyCustomView.tsx"
+import {useCallback} from 'react';
+import {requireNativeComponent} from 'react-native';
+
+const RCTMyCustomView = requireNativeComponent('RCTMyCustomView');
+
+export default function MyCustomView(props: {
+  // ...
+  /**
+   * Callback that is called continuously when the user is dragging the map.
+   */
+  onChangeMessage: (message: string) => unknown;
+}) {
+  const onChange = useCallback(
+    event => {
+      props.onChangeMessage?.(event.nativeEvent.message);
+    },
+    [props.onChangeMessage],
+  );
+
+  return <RCTMyCustomView {...props} onChange={onChange} />;
+}
+```
+
+## Integration with an Android Fragment example
+
+In order to integrate existing Native UI elements to your React Native app, you might need to use Android Fragments to give you a more granular control over your native component than returning a `View` from your `ViewManager`. You will need this if you want to add custom logic that is tied to your view with the help of [lifecycle methods](https://developer.android.com/guide/fragments/lifecycle), such as `onViewCreated`, `onPause`, `onResume`. The following steps will show you how to do it:
+
+### 1. Create an example custom view
+
+First, let's create a `CustomView` class which extends `FrameLayout` (the content of this view can be any view that you'd like to render)
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin title="CustomView.kt"
+// replace with your package
+package com.mypackage
+
+import android.content.Context
+import android.graphics.Color
+import android.widget.FrameLayout
+import android.widget.TextView
+
+class CustomView(context: Context) : FrameLayout(context) {
+  init {
+    // set padding and background color
+    setPadding(16,16,16,16)
+    setBackgroundColor(Color.parseColor("#5FD3F3"))
+
+    // add default text view
+    addView(TextView(context).apply {
+      text = "Welcome to Android Fragments with React Native."
+    })
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java title="CustomView.java"
+// replace with your package
+package com.mypackage;
+
+import android.content.Context;
+import android.graphics.Color;
+import android.widget.FrameLayout;
+import android.widget.ImageView;
+import android.widget.TextView;
+
+import androidx.annotation.NonNull;
+
+public class CustomView extends FrameLayout {
+  public CustomView(@NonNull Context context) {
+    super(context);
+    // set padding and background color
+    this.setPadding(16,16,16,16);
+    this.setBackgroundColor(Color.parseColor("#5FD3F3"));
+
+    // add default text view
+    TextView text = new TextView(context);
+    text.setText("Welcome to Android Fragments with React Native.");
+    this.addView(text);
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 2. Create a `Fragment`
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin title="MyFragment.kt"
+// replace with your package
+package com.mypackage
+
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import androidx.fragment.app.Fragment
+
+// replace with your view's import
+import com.mypackage.CustomView
+
+class MyFragment : Fragment() {
+  private lateinit var customView: CustomView
+
+  override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
+    super.onCreateView(inflater, container, savedInstanceState)
+    customView = CustomView(requireNotNull(context))
+    return customView // this CustomView could be any view that you want to render
+  }
+
+  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+    super.onViewCreated(view, savedInstanceState)
+    // do any logic that should happen in an `onCreate` method, e.g:
+    // customView.onCreate(savedInstanceState);
+  }
+
+  override fun onPause() {
+    super.onPause()
+    // do any logic that should happen in an `onPause` method
+    // e.g.: customView.onPause();
+  }
+
+  override fun onResume() {
+    super.onResume()
+    // do any logic that should happen in an `onResume` method
+    // e.g.: customView.onResume();
+  }
+
+  override fun onDestroy() {
+    super.onDestroy()
+    // do any logic that should happen in an `onDestroy` method
+    // e.g.: customView.onDestroy();
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java title="MyFragment.java"
+// replace with your package
+package com.mypackage;
+
+import android.os.Bundle;
+import android.view.LayoutInflater;
+import android.view.View;
+import android.view.ViewGroup;
+import androidx.fragment.app.Fragment;
+
+// replace with your view's import
+import com.mypackage.CustomView;
+
+public class MyFragment extends Fragment {
+    CustomView customView;
+
+    @Override
+    public View onCreateView(LayoutInflater inflater, ViewGroup parent, Bundle savedInstanceState) {
+        super.onCreateView(inflater, parent, savedInstanceState);
+        customView = new CustomView(this.getContext());
+        return customView; // this CustomView could be any view that you want to render
+    }
+
+    @Override
+    public void onViewCreated(View view, Bundle savedInstanceState) {
+        super.onViewCreated(view, savedInstanceState);
+        // do any logic that should happen in an `onCreate` method, e.g:
+        // customView.onCreate(savedInstanceState);
+    }
+
+    @Override
+    public void onPause() {
+        super.onPause();
+        // do any logic that should happen in an `onPause` method
+        // e.g.: customView.onPause();
+    }
+
+    @Override
+    public void onResume() {
+        super.onResume();
+       // do any logic that should happen in an `onResume` method
+       // e.g.: customView.onResume();
+    }
+
+    @Override
+    public void onDestroy() {
+        super.onDestroy();
+        // do any logic that should happen in an `onDestroy` method
+        // e.g.: customView.onDestroy();
+    }
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 3. Create the `ViewManager` subclass
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin title="MyViewManager.kt"
+// replace with your package
+package com.mypackage
+
+import android.view.Choreographer
+import android.view.View
+import android.view.ViewGroup
+import android.widget.FrameLayout
+import androidx.fragment.app.FragmentActivity
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.annotations.ReactPropGroup
+
+class MyViewManager(
+    private val reactContext: ReactApplicationContext
+) : ViewGroupManager<FrameLayout>() {
+  private var propWidth: Int? = null
+  private var propHeight: Int? = null
+
+  override fun getName() = REACT_CLASS
+
+  /**
+   * Return a FrameLayout which will later hold the Fragment
+   */
+  override fun createViewInstance(reactContext: ThemedReactContext) =
+      FrameLayout(reactContext)
+
+  /**
+   * Map the "create" command to an integer
+   */
+  override fun getCommandsMap() = mapOf("create" to COMMAND_CREATE)
+
+  /**
+   * Handle "create" command (called from JS) and call createFragment method
+   */
+  override fun receiveCommand(
+      root: FrameLayout,
+      commandId: String,
+      args: ReadableArray?
+  ) {
+    super.receiveCommand(root, commandId, args)
+    val reactNativeViewId = requireNotNull(args).getInt(0)
+
+    when (commandId.toInt()) {
+      COMMAND_CREATE -> createFragment(root, reactNativeViewId)
+    }
+  }
+
+  @ReactPropGroup(names = ["width", "height"], customType = "Style")
+  fun setStyle(view: FrameLayout, index: Int, value: Int) {
+    if (index == 0) propWidth = value
+    if (index == 1) propHeight = value
+  }
+
+  /**
+   * Replace your React Native view with a custom fragment
+   */
+  fun createFragment(root: FrameLayout, reactNativeViewId: Int) {
+    val parentView = root.findViewById<ViewGroup>(reactNativeViewId)
+    setupLayout(parentView)
+
+    val myFragment = MyFragment()
+    val activity = reactContext.currentActivity as FragmentActivity
+    activity.supportFragmentManager
+        .beginTransaction()
+        .replace(reactNativeViewId, myFragment, reactNativeViewId.toString())
+        .commit()
+  }
+
+  fun setupLayout(view: View) {
+    Choreographer.getInstance().postFrameCallback(object: Choreographer.FrameCallback {
+      override fun doFrame(frameTimeNanos: Long) {
+        manuallyLayoutChildren(view)
+        view.viewTreeObserver.dispatchOnGlobalLayout()
+        Choreographer.getInstance().postFrameCallback(this)
+      }
+    })
+  }
+
+  /**
+   * Layout all children properly
+   */
+  private fun manuallyLayoutChildren(view: View) {
+    // propWidth and propHeight coming from react-native props
+    val width = requireNotNull(propWidth)
+    val height = requireNotNull(propHeight)
+
+    view.measure(
+        View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
+        View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY))
+
+    view.layout(0, 0, width, height)
+  }
+
+  companion object {
+    private const val REACT_CLASS = "MyViewManager"
+    private const val COMMAND_CREATE = 1
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java title="MyViewManager.java"
+// replace with your package
+package com.mypackage;
+
+import android.view.Choreographer;
+import android.view.View;
+import android.view.ViewGroup;
+import android.widget.FrameLayout;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+import androidx.fragment.app.FragmentActivity;
+
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReadableArray;
+import com.facebook.react.common.MapBuilder;
+import com.facebook.react.uimanager.annotations.ReactProp;
+import com.facebook.react.uimanager.annotations.ReactPropGroup;
+import com.facebook.react.uimanager.ViewGroupManager;
+import com.facebook.react.uimanager.ThemedReactContext;
+
+import java.util.Map;
+
+public class MyViewManager extends ViewGroupManager<FrameLayout> {
+
+  public static final String REACT_CLASS = "MyViewManager";
+  public final int COMMAND_CREATE = 1;
+  private int propWidth;
+  private int propHeight;
+
+  ReactApplicationContext reactContext;
+
+  public MyViewManager(ReactApplicationContext reactContext) {
+    this.reactContext = reactContext;
+  }
+
+  @Override
+  public String getName() {
+    return REACT_CLASS;
+  }
+
+  /**
+   * Return a FrameLayout which will later hold the Fragment
+   */
+  @Override
+  public FrameLayout createViewInstance(ThemedReactContext reactContext) {
+    return new FrameLayout(reactContext);
+  }
+
+  /**
+   * Map the "create" command to an integer
+   */
+  @Nullable
+  @Override
+  public Map<String, Integer> getCommandsMap() {
+    return MapBuilder.of("create", COMMAND_CREATE);
+  }
+
+  /**
+   * Handle "create" command (called from JS) and call createFragment method
+   */
+  @Override
+  public void receiveCommand(
+    @NonNull FrameLayout root,
+    String commandId,
+    @Nullable ReadableArray args
+  ) {
+    super.receiveCommand(root, commandId, args);
+    int reactNativeViewId = args.getInt(0);
+    int commandIdInt = Integer.parseInt(commandId);
+
+    switch (commandIdInt) {
+      case COMMAND_CREATE:
+        createFragment(root, reactNativeViewId);
+        break;
+      default: {}
+    }
+  }
+
+  @ReactPropGroup(names = {"width", "height"}, customType = "Style")
+  public void setStyle(FrameLayout view, int index, Integer value) {
+    if (index == 0) {
+      propWidth = value;
+    }
+
+    if (index == 1) {
+      propHeight = value;
+    }
+  }
+
+  /**
+   * Replace your React Native view with a custom fragment
+   */
+  public void createFragment(FrameLayout root, int reactNativeViewId) {
+    ViewGroup parentView = (ViewGroup) root.findViewById(reactNativeViewId);
+    setupLayout(parentView);
+
+    final MyFragment myFragment = new MyFragment();
+    FragmentActivity activity = (FragmentActivity) reactContext.getCurrentActivity();
+    activity.getSupportFragmentManager()
+            .beginTransaction()
+            .replace(reactNativeViewId, myFragment, String.valueOf(reactNativeViewId))
+            .commit();
+  }
+
+  public void setupLayout(View view) {
+    Choreographer.getInstance().postFrameCallback(new Choreographer.FrameCallback() {
+      @Override
+      public void doFrame(long frameTimeNanos) {
+        manuallyLayoutChildren(view);
+        view.getViewTreeObserver().dispatchOnGlobalLayout();
+        Choreographer.getInstance().postFrameCallback(this);
+      }
+    });
+  }
+
+  /**
+   * Layout all children properly
+   */
+  public void manuallyLayoutChildren(View view) {
+      // propWidth and propHeight coming from react-native props
+      int width = propWidth;
+      int height = propHeight;
+
+      view.measure(
+              View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
+              View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY));
+
+      view.layout(0, 0, width, height);
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 4. Register the `ViewManager`
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin title="MyPackage.kt"
+// replace with your package
+package com.mypackage
+
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+
+class MyPackage : ReactPackage {
+  ...
+  override fun createViewManagers(
+      reactContext: ReactApplicationContext
+  ) = listOf(MyViewManager(reactContext))
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java title="MyPackage.java"
+// replace with your package
+package com.mypackage;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.Arrays;
+import java.util.List;
+
+public class MyPackage implements ReactPackage {
+
+   @Override
+   public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
+       return Arrays.<ViewManager>asList(
+            new MyViewManager(reactContext)
+       );
+   }
+
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 5. Register the `Package`
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin title="MainApplication.kt"
+override fun getPackages(): List<ReactPackage> =
+    PackageList(this).packages.apply {
+        // Packages that cannot be autolinked yet can be added manually here, for example:
+        // add(MyReactNativePackage())
+        add(MyAppPackage())
+    }
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java title="MainApplication.java"
+@Override
+protected List<ReactPackage> getPackages() {
+    List<ReactPackage> packages = new PackageList(this).getPackages();
+    // Packages that cannot be autolinked yet can be added manually here, for example:
+    // packages.add(new MyReactNativePackage());
+    packages.add(new MyAppPackage());
+    return packages;
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 6. Implement the JavaScript module
+
+I. Start with custom View manager:
+
+```tsx title="MyViewManager.tsx"
+import {requireNativeComponent} from 'react-native';
+
+export const MyViewManager =
+  requireNativeComponent('MyViewManager');
+```
+
+II. Then implement custom View calling the `create` method:
+
+```tsx title="MyView.tsx"
+import {useEffect, useRef} from 'react';
+import {
+  PixelRatio,
+  UIManager,
+  findNodeHandle,
+} from 'react-native';
+
+import {MyViewManager} from './my-view-manager';
+
+const createFragment = viewId =>
+  UIManager.dispatchViewManagerCommand(
+    viewId,
+    // we are calling the 'create' command
+    UIManager.MyViewManager.Commands.create.toString(),
+    [viewId],
+  );
+
+export const MyView = () => {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const viewId = findNodeHandle(ref.current);
+    createFragment(viewId);
+  }, []);
+
+  return (
+    <MyViewManager
+      style={{
+        // converts dpi to px, provide desired height
+        height: PixelRatio.getPixelSizeForLayoutSize(200),
+        // converts dpi to px, provide desired width
+        width: PixelRatio.getPixelSizeForLayoutSize(200),
+      }}
+      ref={ref}
+    />
+  );
+};
+```
+
+If you want to expose property setters using `@ReactProp` (or `@ReactPropGroup`) annotation see the [ImageView example](#imageview-example) above.
diff --git a/website/versioned_docs/version-0.84/legacy/native-modules-android.md b/website/versioned_docs/version-0.84/legacy/native-modules-android.md
index 82fe222f628..cec5857a441 100644
--- a/website/versioned_docs/version-0.84/legacy/native-modules-android.md
+++ b/website/versioned_docs/version-0.84/legacy/native-modules-android.md
@@ -315,7 +315,6 @@ At this point, you have set up the basic scaffolding for your native module in A
 Find a place in your application where you would like to add a call to the native module’s `createCalendarEvent()` method. Below is an example of a component, `NewModuleButton` you can add in your app. You can invoke the native module inside `NewModuleButton`'s `onPress()` function.
 
 ```tsx
-import React from 'react';
 import {NativeModules, Button} from 'react-native';
 
 const NewModuleButton = () => {
diff --git a/website/versioned_docs/version-0.84/legacy/native-modules-ios.md b/website/versioned_docs/version-0.84/legacy/native-modules-ios.md
index 6c33c64ec75..d3239e16a90 100644
--- a/website/versioned_docs/version-0.84/legacy/native-modules-ios.md
+++ b/website/versioned_docs/version-0.84/legacy/native-modules-ios.md
@@ -141,7 +141,6 @@ At this point you have set up the basic scaffolding for your native module in iO
 Find a place in your application where you would like to add a call to the native module’s `createCalendarEvent()` method. Below is an example of a component, `NewModuleButton` you can add in your app. You can invoke the native module inside `NewModuleButton`'s `onPress()` function.
 
 ```tsx
-import React from 'react';
 import {Button} from 'react-native';
 
 const NewModuleButton = () => {
diff --git a/website/versioned_docs/version-0.84/linking.md b/website/versioned_docs/version-0.84/linking.md
index ff9c1e1121e..18875244905 100644
--- a/website/versioned_docs/version-0.84/linking.md
+++ b/website/versioned_docs/version-0.84/linking.md
@@ -1,688 +1,688 @@
----
-id: linking
-title: Linking
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-`Linking` gives you a general interface to interact with both incoming and outgoing app links.
-
-Every Link (URL) has a URL Scheme, some websites are prefixed with `https://` or `http://` and the `http` is the URL Scheme. Let's call it scheme for short.
-
-In addition to `https`, you're likely also familiar with the `mailto` scheme. When you open a link with the mailto scheme, your operating system will open an installed mail application. Similarly, there are schemes for making phone calls and sending SMS. Read more about [built-in URL](#built-in-url-schemes) schemes below.
-
-Like using the mailto scheme, it's possible to link to other applications by using custom url schemes. For example, when you get a **Magic Link** email from Slack, the **Launch Slack** button is an anchor tag with an href that looks something like: `slack://secret/magic-login/other-secret`. Like with Slack, you can tell the operating system that you want to handle a custom scheme. When the Slack app opens, it receives the URL that was used to open it. This is often referred to as deep linking. Read more about how to [get the deep link](#get-the-deep-link) into your app.
-
-A custom URL scheme isn't the only way to open your application on mobile. For example, if you want to email someone a link to be opened on mobile, using a custom URL scheme isn't ideal because the user might open the email on a desktop, where the link wouldn't work. Instead, you should use standard `https` links, such as `https://www.myapp.io/records/1234546`. On mobile, these links can be configured to open your app. On Android, this feature is called **Deep Links**, while on iOS, it is known as **Universal Links**.
-
-### Built-in URL Schemes
-
-As mentioned in the introduction, there are some URL schemes for core functionality that exist on every platform. The following is a non-exhaustive list, but covers the most commonly used schemes.
-
-| Scheme           | Description                                | iOS | Android |
-| ---------------- | ------------------------------------------ | --- | ------- |
-| `mailto`         | Open mail app, eg: mailto: hello@world.dev | ✅  | ✅      |
-| `tel`            | Open phone app, eg: tel:+123456789         | ✅  | ✅      |
-| `sms`            | Open SMS app, eg: sms:+123456789           | ✅  | ✅      |
-| `https` / `http` | Open web browser app, eg: https://expo.dev | ✅  | ✅      |
-
-### Enabling Deep Links
-
-<div className="banner-native-code-required">
-  <h3>Projects with Native Code Only</h3>
-  <p>The following section only applies to projects with native code exposed. If you are using the managed Expo workflow, see the guide on <a href="https://docs.expo.dev/guides/linking/">Linking</a> in the Expo documentation for the appropriate alternative.</p>
-</div>
-
-If you want to enable deep links in your app, please read the below guide:
-
-<Tabs groupId="syntax" queryString defaultValue={constants.defaultPlatform} values={constants.platforms}>
-<TabItem value="android">
-
-:::info
-For instructions on how to add support for deep linking on Android, refer to [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](https://developer.android.com/training/app-indexing/deep-linking.html#adding-filters).
-:::
-
-If you wish to receive the intent in an existing instance of MainActivity, you may set the `launchMode` of MainActivity to `singleTask` in `AndroidManifest.xml`. See [`<activity>`](https://developer.android.com/guide/topics/manifest/activity-element.html) documentation for more information.
-
-```xml
-<activity
-  android:name=".MainActivity"
-  android:launchMode="singleTask">
-```
-
-</TabItem>
-<TabItem value="ios">
-
-:::note
-On iOS, you'll need to add the `LinkingIOS` folder into your header search paths as described in step 3 [here](linking-libraries-ios#step-3). If you also want to listen to incoming app links during your app's execution, you'll need to add the following lines to your `*AppDelegate.m`:
-
-<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
-<TabItem value="objc">
-
-```objc title="AppDelegate.mm"
-// iOS 9.x or newer
-#import <React/RCTLinkingManager.h>
-
-- (BOOL)application:(UIApplication *)application
-   openURL:(NSURL *)url
-   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
-{
-  return [RCTLinkingManager application:application openURL:url options:options];
-}
-```
-
-If your app is using [Universal Links](https://developer.apple.com/ios/universal-links/), you'll need to add the following code as well:
-
-```objc title="AppDelegate.mm"
-- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
- restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
-{
- return [RCTLinkingManager application:application
-                  continueUserActivity:userActivity
-                    restorationHandler:restorationHandler];
-}
-```
-
-</TabItem>
-<TabItem value="swift">
-
-```swift title="AppDelegate.swift"
-func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
-  return RCTLinkingManager.application(app, open: url, options: options)
-}
-```
-
-If your app is using [Universal Links](https://developer.apple.com/ios/universal-links/), you'll need to add the following code as well:
-
-```swift title="AppDelegate.swift"
-func application(
-  _ application: UIApplication,
-  continue userActivity: NSUserActivity,
-  restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
-    return RCTLinkingManager.application(
-      application,
-      continue: userActivity,
-      restorationHandler: restorationHandler
-    )
-  }
-```
-
-</TabItem>
-</Tabs>
-
-:::
-
-</TabItem>
-</Tabs>
-
-### Handling Deep Links
-
-There are two ways to handle URLs that open your app.
-
-#### 1. If the app is already open, the app is foregrounded and a Linking 'url' event is fired
-
-You can handle these events with `Linking.addEventListener('url', callback)` - it calls `callback({url})` with the linked URL
-
-#### 2. If the app is not already open, it is opened and the url is passed in as the initialURL
-
-You can handle these events with `Linking.getInitialURL()` - it returns a Promise that resolves to the URL, if there is one.
-
----
-
-## Example
-
-### Open Links and Deep Links (Universal Links)
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useCallback} from 'react';
-import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
-
-const supportedURL = 'https://google.com';
-
-const unsupportedURL = 'slack://open?team=123456';
-
-const OpenURLButton = ({url, children}) => {
-  const handlePress = useCallback(async () => {
-    // Checking if the link is supported for links with custom URL scheme.
-    const supported = await Linking.canOpenURL(url);
-
-    if (supported) {
-      // Opening the link with some app, if the URL scheme is "http" the web link should be opened
-      // by some browser in the mobile
-      await Linking.openURL(url);
-    } else {
-      Alert.alert(`Don't know how to open this URL: ${url}`);
-    }
-  }, [url]);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <OpenURLButton url={supportedURL}>Open Supported URL</OpenURLButton>
-      <OpenURLButton url={unsupportedURL}>Open Unsupported URL</OpenURLButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useCallback} from 'react';
-import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
-
-const supportedURL = 'https://google.com';
-
-const unsupportedURL = 'slack://open?team=123456';
-
-type OpenURLButtonProps = {
-  url: string;
-  children: string;
-};
-
-const OpenURLButton = ({url, children}: OpenURLButtonProps) => {
-  const handlePress = useCallback(async () => {
-    // Checking if the link is supported for links with custom URL scheme.
-    const supported = await Linking.canOpenURL(url);
-
-    if (supported) {
-      // Opening the link with some app, if the URL scheme is "http" the web link should be opened
-      // by some browser in the mobile
-      await Linking.openURL(url);
-    } else {
-      Alert.alert(`Don't know how to open this URL: ${url}`);
-    }
-  }, [url]);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <OpenURLButton url={supportedURL}>Open Supported URL</OpenURLButton>
-      <OpenURLButton url={unsupportedURL}>Open Unsupported URL</OpenURLButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### Open Custom Settings
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useCallback} from 'react';
-import {Button, Linking, StyleSheet, View} from 'react-native';
-
-const OpenSettingsButton = ({children}) => {
-  const handlePress = useCallback(async () => {
-    // Open the custom settings if the app has one
-    await Linking.openSettings();
-  }, []);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <OpenSettingsButton>Open Settings</OpenSettingsButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useCallback} from 'react';
-import {Button, Linking, StyleSheet, View} from 'react-native';
-
-type OpenSettingsButtonProps = {
-  children: string;
-};
-
-const OpenSettingsButton = ({children}: OpenSettingsButtonProps) => {
-  const handlePress = useCallback(async () => {
-    // Open the custom settings if the app has one
-    await Linking.openSettings();
-  }, []);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <OpenSettingsButton>Open Settings</OpenSettingsButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### Get the Deep Link
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useState, useEffect} from 'react';
-import {Linking, StyleSheet, Text, View} from 'react-native';
-
-const useInitialURL = () => {
-  const [url, setUrl] = useState(null);
-  const [processing, setProcessing] = useState(true);
-
-  useEffect(() => {
-    const getUrlAsync = async () => {
-      // Get the deep link used to open the app
-      const initialUrl = await Linking.getInitialURL();
-
-      // The setTimeout is just for testing purpose
-      setTimeout(() => {
-        setUrl(initialUrl);
-        setProcessing(false);
-      }, 1000);
-    };
-
-    getUrlAsync();
-  }, []);
-
-  return {url, processing};
-};
-
-const App = () => {
-  const {url: initialUrl, processing} = useInitialURL();
-
-  return (
-    <View style={styles.container}>
-      <Text>
-        {processing
-          ? 'Processing the initial url from a deep link'
-          : `The deep link is: ${initialUrl || 'None'}`}
-      </Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useState, useEffect} from 'react';
-import {Linking, StyleSheet, Text, View} from 'react-native';
-
-const useInitialURL = () => {
-  const [url, setUrl] = useState<string | null>(null);
-  const [processing, setProcessing] = useState(true);
-
-  useEffect(() => {
-    const getUrlAsync = async () => {
-      // Get the deep link used to open the app
-      const initialUrl = await Linking.getInitialURL();
-
-      // The setTimeout is just for testing purpose
-      setTimeout(() => {
-        setUrl(initialUrl);
-        setProcessing(false);
-      }, 1000);
-    };
-
-    getUrlAsync();
-  }, []);
-
-  return {url, processing};
-};
-
-const App = () => {
-  const {url: initialUrl, processing} = useInitialURL();
-
-  return (
-    <View style={styles.container}>
-      <Text>
-        {processing
-          ? 'Processing the initial url from a deep link'
-          : `The deep link is: ${initialUrl || 'None'}`}
-      </Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### Send Intents (Android)
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=android&ext=js
-import React, {useCallback} from 'react';
-import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
-
-const SendIntentButton = ({action, extras, children}) => {
-  const handlePress = useCallback(async () => {
-    try {
-      await Linking.sendIntent(action, extras);
-    } catch (e) {
-      Alert.alert(e.message);
-    }
-  }, [action, extras]);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <SendIntentButton action="android.intent.action.POWER_USAGE_SUMMARY">
-        Power Usage Summary
-      </SendIntentButton>
-      <SendIntentButton
-        action="android.settings.APP_NOTIFICATION_SETTINGS"
-        extras={[
-          {
-            key: 'android.provider.extra.APP_PACKAGE',
-            value: 'com.facebook.katana',
-          },
-        ]}>
-        App Notification Settings
-      </SendIntentButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Linking%20Example&ext=tsx
-import React, {useCallback} from 'react';
-import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
-
-type SendIntentButtonProps = {
-  action: string;
-  children: string;
-  extras?: Array<{
-    key: string;
-    value: string | number | boolean;
-  }>;
-};
-
-const SendIntentButton = ({
-  action,
-  extras,
-  children,
-}: SendIntentButtonProps) => {
-  const handlePress = useCallback(async () => {
-    try {
-      await Linking.sendIntent(action, extras);
-    } catch (e: any) {
-      Alert.alert(e.message);
-    }
-  }, [action, extras]);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <SendIntentButton action="android.intent.action.POWER_USAGE_SUMMARY">
-        Power Usage Summary
-      </SendIntentButton>
-      <SendIntentButton
-        action="android.settings.APP_NOTIFICATION_SETTINGS"
-        extras={[
-          {
-            key: 'android.provider.extra.APP_PACKAGE',
-            value: 'com.facebook.katana',
-          },
-        ]}>
-        App Notification Settings
-      </SendIntentButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-# Reference
-
-## Methods
-
-### `addEventListener()`
-
-```tsx
-static addEventListener(
-  type: 'url',
-  handler: (event: {url: string}) => void,
-): EmitterSubscription;
-```
-
-Add a handler to Linking changes by listening to the `url` event type and providing the handler.
-
----
-
-### `canOpenURL()`
-
-```tsx
-static canOpenURL(url: string): Promise<boolean>;
-```
-
-Determine whether or not an installed app can handle a given URL.
-
-The method returns a `Promise` object. When it is determined whether or not the given URL can be handled, the promise is resolved and the first parameter is whether or not it can be opened.
-
-The `Promise` will reject on Android if it was impossible to check if the URL can be opened or when targeting Android 11 (SDK 30) if you didn't specify the relevant intent queries in `AndroidManifest.xml`. Similarly on iOS, the promise will reject if you didn't add the specific scheme in the `LSApplicationQueriesSchemes` key inside `Info.plist` (see bellow).
-
-**Parameters:**
-
-| Name                                                     | Type   | Description      |
-| -------------------------------------------------------- | ------ | ---------------- |
-| url <div className="label basic required">Required</div> | string | The URL to open. |
-
-:::note
-For web URLs, the protocol (`"http://"`, `"https://"`) must be set accordingly!
-:::
-
-:::warning
-This method has limitations on iOS 9+. From [the official Apple documentation](https://developer.apple.com/documentation/uikit/uiapplication/1622952-canopenurl):
-
-- If your app is linked against an earlier version of iOS but is running in iOS 9.0 or later, you can call this method up to 50 times. After reaching that limit, subsequent calls always resolve to `false`. If the user reinstalls or upgrades the app, iOS resets the limit.
-- As of iOS 9, your app also needs to provide the `LSApplicationQueriesSchemes` key inside `Info.plist` or `canOpenURL()` will always resolve to `false`.
-  :::
-
-:::info
-When targeting Android 11 (SDK 30) you must specify the intents for the schemes you want to handle in `AndroidManifest.xml`. A list of common intents can be found [here](https://developer.android.com/guide/components/intents-common).
-
-For example to handle `https` schemes the following needs to be added to your manifest:
-
-```
-<manifest ...>
-  <queries>
-    <intent>
-      <action android:name="android.intent.action.VIEW" />
-      <data android:scheme="https"/>
-    </intent>
-  </queries>
-</manifest>
-```
-
-:::
-
----
-
-### `getInitialURL()`
-
-```tsx
-static getInitialURL(): Promise<string | null>;
-```
-
-If the app launch was triggered by an app link, it will give the link url, otherwise it will give `null`.
-
-:::info
-To support deep linking on Android, refer https://developer.android.com/training/app-indexing/deep-linking.html#handling-intents.
-:::
-
-:::tip
-`getInitialURL` may return `null` when Remote JS Debugging is active. Disable the debugger to ensure it gets passed.
-:::
-
----
-
-### `openSettings()`
-
-```tsx
-static openSettings(): Promise<void>;
-```
-
-Open the Settings app and displays the app’s custom settings, if it has any.
-
----
-
-### `openURL()`
-
-```tsx
-static openURL(url: string): Promise<any>;
-```
-
-Try to open the given `url` with any of the installed apps.
-
-You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386" on Android or "https://maps.apple.com/?ll=37.484847,-122.148386" on iOS), a contact, or any other URL that can be opened with the installed apps.
-
-The method returns a `Promise` object. If the user confirms the open dialog or the url automatically opens, the promise is resolved. If the user cancels the open dialog or there are no registered applications for the url, the promise is rejected.
-
-**Parameters:**
-
-| Name                                                     | Type   | Description      |
-| -------------------------------------------------------- | ------ | ---------------- |
-| url <div className="label basic required">Required</div> | string | The URL to open. |
-
-:::note
-This method will fail if the system doesn't know how to open the specified URL. If you're passing in a non-http(s) URL, it's best to check `canOpenURL()` first. For web URLs, the protocol (`"http://"`, `"https://"`) must be set accordingly!
-:::
-
-:::warning
-This method may behave differently in a simulator e.g. `"tel:"` links are not able to be handled in the iOS simulator as there's no access to the dialer app.
-:::
-
----
-
-### `sendIntent()` <div className="label android">Android</div>
-
-```tsx
-static sendIntent(
-  action: string,
-  extras?: Array<{key: string; value: string | number | boolean}>,
-): Promise<void>;
-```
-
-Launch an Android intent with extras.
-
-**Parameters:**
-
-| Name                                                        | Type                                                       |
-| ----------------------------------------------------------- | ---------------------------------------------------------- |
-| action <div className="label basic required">Required</div> | string                                                     |
-| extras                                                      | `Array<{key: string, value: string ｜ number ｜ boolean}>` |
+---
+id: linking
+title: Linking
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+`Linking` gives you a general interface to interact with both incoming and outgoing app links.
+
+Every Link (URL) has a URL Scheme, some websites are prefixed with `https://` or `http://` and the `http` is the URL Scheme. Let's call it scheme for short.
+
+In addition to `https`, you're likely also familiar with the `mailto` scheme. When you open a link with the mailto scheme, your operating system will open an installed mail application. Similarly, there are schemes for making phone calls and sending SMS. Read more about [built-in URL](#built-in-url-schemes) schemes below.
+
+Like using the mailto scheme, it's possible to link to other applications by using custom url schemes. For example, when you get a **Magic Link** email from Slack, the **Launch Slack** button is an anchor tag with an href that looks something like: `slack://secret/magic-login/other-secret`. Like with Slack, you can tell the operating system that you want to handle a custom scheme. When the Slack app opens, it receives the URL that was used to open it. This is often referred to as deep linking. Read more about how to [get the deep link](#get-the-deep-link) into your app.
+
+A custom URL scheme isn't the only way to open your application on mobile. For example, if you want to email someone a link to be opened on mobile, using a custom URL scheme isn't ideal because the user might open the email on a desktop, where the link wouldn't work. Instead, you should use standard `https` links, such as `https://www.myapp.io/records/1234546`. On mobile, these links can be configured to open your app. On Android, this feature is called **Deep Links**, while on iOS, it is known as **Universal Links**.
+
+### Built-in URL Schemes
+
+As mentioned in the introduction, there are some URL schemes for core functionality that exist on every platform. The following is a non-exhaustive list, but covers the most commonly used schemes.
+
+| Scheme           | Description                                | iOS | Android |
+| ---------------- | ------------------------------------------ | --- | ------- |
+| `mailto`         | Open mail app, eg: mailto: hello@world.dev | ✅  | ✅      |
+| `tel`            | Open phone app, eg: tel:+123456789         | ✅  | ✅      |
+| `sms`            | Open SMS app, eg: sms:+123456789           | ✅  | ✅      |
+| `https` / `http` | Open web browser app, eg: https://expo.dev | ✅  | ✅      |
+
+### Enabling Deep Links
+
+<div className="banner-native-code-required">
+  <h3>Projects with Native Code Only</h3>
+  <p>The following section only applies to projects with native code exposed. If you are using the managed Expo workflow, see the guide on <a href="https://docs.expo.dev/guides/linking/">Linking</a> in the Expo documentation for the appropriate alternative.</p>
+</div>
+
+If you want to enable deep links in your app, please read the below guide:
+
+<Tabs groupId="syntax" queryString defaultValue={constants.defaultPlatform} values={constants.platforms}>
+<TabItem value="android">
+
+:::info
+For instructions on how to add support for deep linking on Android, refer to [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](https://developer.android.com/training/app-indexing/deep-linking.html#adding-filters).
+:::
+
+If you wish to receive the intent in an existing instance of MainActivity, you may set the `launchMode` of MainActivity to `singleTask` in `AndroidManifest.xml`. See [`<activity>`](https://developer.android.com/guide/topics/manifest/activity-element.html) documentation for more information.
+
+```xml
+<activity
+  android:name=".MainActivity"
+  android:launchMode="singleTask">
+```
+
+</TabItem>
+<TabItem value="ios">
+
+:::note
+On iOS, you'll need to add the `LinkingIOS` folder into your header search paths as described in step 3 [here](linking-libraries-ios#step-3). If you also want to listen to incoming app links during your app's execution, you'll need to add the following lines to your `*AppDelegate.m`:
+
+<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
+<TabItem value="objc">
+
+```objc title="AppDelegate.mm"
+// iOS 9.x or newer
+#import <React/RCTLinkingManager.h>
+
+- (BOOL)application:(UIApplication *)application
+   openURL:(NSURL *)url
+   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
+{
+  return [RCTLinkingManager application:application openURL:url options:options];
+}
+```
+
+If your app is using [Universal Links](https://developer.apple.com/ios/universal-links/), you'll need to add the following code as well:
+
+```objc title="AppDelegate.mm"
+- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
+ restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
+{
+ return [RCTLinkingManager application:application
+                  continueUserActivity:userActivity
+                    restorationHandler:restorationHandler];
+}
+```
+
+</TabItem>
+<TabItem value="swift">
+
+```swift title="AppDelegate.swift"
+func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
+  return RCTLinkingManager.application(app, open: url, options: options)
+}
+```
+
+If your app is using [Universal Links](https://developer.apple.com/ios/universal-links/), you'll need to add the following code as well:
+
+```swift title="AppDelegate.swift"
+func application(
+  _ application: UIApplication,
+  continue userActivity: NSUserActivity,
+  restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
+    return RCTLinkingManager.application(
+      application,
+      continue: userActivity,
+      restorationHandler: restorationHandler
+    )
+  }
+```
+
+</TabItem>
+</Tabs>
+
+:::
+
+</TabItem>
+</Tabs>
+
+### Handling Deep Links
+
+There are two ways to handle URLs that open your app.
+
+#### 1. If the app is already open, the app is foregrounded and a Linking 'url' event is fired
+
+You can handle these events with `Linking.addEventListener('url', callback)` - it calls `callback({url})` with the linked URL
+
+#### 2. If the app is not already open, it is opened and the url is passed in as the initialURL
+
+You can handle these events with `Linking.getInitialURL()` - it returns a Promise that resolves to the URL, if there is one.
+
+---
+
+## Example
+
+### Open Links and Deep Links (Universal Links)
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
+import {useCallback} from 'react';
+import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
+
+const supportedURL = 'https://google.com';
+
+const unsupportedURL = 'slack://open?team=123456';
+
+const OpenURLButton = ({url, children}) => {
+  const handlePress = useCallback(async () => {
+    // Checking if the link is supported for links with custom URL scheme.
+    const supported = await Linking.canOpenURL(url);
+
+    if (supported) {
+      // Opening the link with some app, if the URL scheme is "http" the web link should be opened
+      // by some browser in the mobile
+      await Linking.openURL(url);
+    } else {
+      Alert.alert(`Don't know how to open this URL: ${url}`);
+    }
+  }, [url]);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <OpenURLButton url={supportedURL}>Open Supported URL</OpenURLButton>
+      <OpenURLButton url={unsupportedURL}>Open Unsupported URL</OpenURLButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
+import {useCallback} from 'react';
+import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
+
+const supportedURL = 'https://google.com';
+
+const unsupportedURL = 'slack://open?team=123456';
+
+type OpenURLButtonProps = {
+  url: string;
+  children: string;
+};
+
+const OpenURLButton = ({url, children}: OpenURLButtonProps) => {
+  const handlePress = useCallback(async () => {
+    // Checking if the link is supported for links with custom URL scheme.
+    const supported = await Linking.canOpenURL(url);
+
+    if (supported) {
+      // Opening the link with some app, if the URL scheme is "http" the web link should be opened
+      // by some browser in the mobile
+      await Linking.openURL(url);
+    } else {
+      Alert.alert(`Don't know how to open this URL: ${url}`);
+    }
+  }, [url]);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <OpenURLButton url={supportedURL}>Open Supported URL</OpenURLButton>
+      <OpenURLButton url={unsupportedURL}>Open Unsupported URL</OpenURLButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### Open Custom Settings
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
+import {useCallback} from 'react';
+import {Button, Linking, StyleSheet, View} from 'react-native';
+
+const OpenSettingsButton = ({children}) => {
+  const handlePress = useCallback(async () => {
+    // Open the custom settings if the app has one
+    await Linking.openSettings();
+  }, []);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <OpenSettingsButton>Open Settings</OpenSettingsButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
+import {useCallback} from 'react';
+import {Button, Linking, StyleSheet, View} from 'react-native';
+
+type OpenSettingsButtonProps = {
+  children: string;
+};
+
+const OpenSettingsButton = ({children}: OpenSettingsButtonProps) => {
+  const handlePress = useCallback(async () => {
+    // Open the custom settings if the app has one
+    await Linking.openSettings();
+  }, []);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <OpenSettingsButton>Open Settings</OpenSettingsButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### Get the Deep Link
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
+import {useState, useEffect} from 'react';
+import {Linking, StyleSheet, Text, View} from 'react-native';
+
+const useInitialURL = () => {
+  const [url, setUrl] = useState(null);
+  const [processing, setProcessing] = useState(true);
+
+  useEffect(() => {
+    const getUrlAsync = async () => {
+      // Get the deep link used to open the app
+      const initialUrl = await Linking.getInitialURL();
+
+      // The setTimeout is just for testing purpose
+      setTimeout(() => {
+        setUrl(initialUrl);
+        setProcessing(false);
+      }, 1000);
+    };
+
+    getUrlAsync();
+  }, []);
+
+  return {url, processing};
+};
+
+const App = () => {
+  const {url: initialUrl, processing} = useInitialURL();
+
+  return (
+    <View style={styles.container}>
+      <Text>
+        {processing
+          ? 'Processing the initial url from a deep link'
+          : `The deep link is: ${initialUrl || 'None'}`}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
+import {useState, useEffect} from 'react';
+import {Linking, StyleSheet, Text, View} from 'react-native';
+
+const useInitialURL = () => {
+  const [url, setUrl] = useState<string | null>(null);
+  const [processing, setProcessing] = useState(true);
+
+  useEffect(() => {
+    const getUrlAsync = async () => {
+      // Get the deep link used to open the app
+      const initialUrl = await Linking.getInitialURL();
+
+      // The setTimeout is just for testing purpose
+      setTimeout(() => {
+        setUrl(initialUrl);
+        setProcessing(false);
+      }, 1000);
+    };
+
+    getUrlAsync();
+  }, []);
+
+  return {url, processing};
+};
+
+const App = () => {
+  const {url: initialUrl, processing} = useInitialURL();
+
+  return (
+    <View style={styles.container}>
+      <Text>
+        {processing
+          ? 'Processing the initial url from a deep link'
+          : `The deep link is: ${initialUrl || 'None'}`}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### Send Intents (Android)
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=android&ext=js
+import {useCallback} from 'react';
+import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
+
+const SendIntentButton = ({action, extras, children}) => {
+  const handlePress = useCallback(async () => {
+    try {
+      await Linking.sendIntent(action, extras);
+    } catch (e) {
+      Alert.alert(e.message);
+    }
+  }, [action, extras]);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <SendIntentButton action="android.intent.action.POWER_USAGE_SUMMARY">
+        Power Usage Summary
+      </SendIntentButton>
+      <SendIntentButton
+        action="android.settings.APP_NOTIFICATION_SETTINGS"
+        extras={[
+          {
+            key: 'android.provider.extra.APP_PACKAGE',
+            value: 'com.facebook.katana',
+          },
+        ]}>
+        App Notification Settings
+      </SendIntentButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Linking%20Example&ext=tsx
+import {useCallback} from 'react';
+import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
+
+type SendIntentButtonProps = {
+  action: string;
+  children: string;
+  extras?: Array<{
+    key: string;
+    value: string | number | boolean;
+  }>;
+};
+
+const SendIntentButton = ({
+  action,
+  extras,
+  children,
+}: SendIntentButtonProps) => {
+  const handlePress = useCallback(async () => {
+    try {
+      await Linking.sendIntent(action, extras);
+    } catch (e: any) {
+      Alert.alert(e.message);
+    }
+  }, [action, extras]);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <SendIntentButton action="android.intent.action.POWER_USAGE_SUMMARY">
+        Power Usage Summary
+      </SendIntentButton>
+      <SendIntentButton
+        action="android.settings.APP_NOTIFICATION_SETTINGS"
+        extras={[
+          {
+            key: 'android.provider.extra.APP_PACKAGE',
+            value: 'com.facebook.katana',
+          },
+        ]}>
+        App Notification Settings
+      </SendIntentButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+# Reference
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+  type: 'url',
+  handler: (event: {url: string}) => void,
+): EmitterSubscription;
+```
+
+Add a handler to Linking changes by listening to the `url` event type and providing the handler.
+
+---
+
+### `canOpenURL()`
+
+```tsx
+static canOpenURL(url: string): Promise<boolean>;
+```
+
+Determine whether or not an installed app can handle a given URL.
+
+The method returns a `Promise` object. When it is determined whether or not the given URL can be handled, the promise is resolved and the first parameter is whether or not it can be opened.
+
+The `Promise` will reject on Android if it was impossible to check if the URL can be opened or when targeting Android 11 (SDK 30) if you didn't specify the relevant intent queries in `AndroidManifest.xml`. Similarly on iOS, the promise will reject if you didn't add the specific scheme in the `LSApplicationQueriesSchemes` key inside `Info.plist` (see bellow).
+
+**Parameters:**
+
+| Name                                                     | Type   | Description      |
+| -------------------------------------------------------- | ------ | ---------------- |
+| url <div className="label basic required">Required</div> | string | The URL to open. |
+
+:::note
+For web URLs, the protocol (`"http://"`, `"https://"`) must be set accordingly!
+:::
+
+:::warning
+This method has limitations on iOS 9+. From [the official Apple documentation](https://developer.apple.com/documentation/uikit/uiapplication/1622952-canopenurl):
+
+- If your app is linked against an earlier version of iOS but is running in iOS 9.0 or later, you can call this method up to 50 times. After reaching that limit, subsequent calls always resolve to `false`. If the user reinstalls or upgrades the app, iOS resets the limit.
+- As of iOS 9, your app also needs to provide the `LSApplicationQueriesSchemes` key inside `Info.plist` or `canOpenURL()` will always resolve to `false`.
+  :::
+
+:::info
+When targeting Android 11 (SDK 30) you must specify the intents for the schemes you want to handle in `AndroidManifest.xml`. A list of common intents can be found [here](https://developer.android.com/guide/components/intents-common).
+
+For example to handle `https` schemes the following needs to be added to your manifest:
+
+```
+<manifest ...>
+  <queries>
+    <intent>
+      <action android:name="android.intent.action.VIEW" />
+      <data android:scheme="https"/>
+    </intent>
+  </queries>
+</manifest>
+```
+
+:::
+
+---
+
+### `getInitialURL()`
+
+```tsx
+static getInitialURL(): Promise<string | null>;
+```
+
+If the app launch was triggered by an app link, it will give the link url, otherwise it will give `null`.
+
+:::info
+To support deep linking on Android, refer https://developer.android.com/training/app-indexing/deep-linking.html#handling-intents.
+:::
+
+:::tip
+`getInitialURL` may return `null` when Remote JS Debugging is active. Disable the debugger to ensure it gets passed.
+:::
+
+---
+
+### `openSettings()`
+
+```tsx
+static openSettings(): Promise<void>;
+```
+
+Open the Settings app and displays the app’s custom settings, if it has any.
+
+---
+
+### `openURL()`
+
+```tsx
+static openURL(url: string): Promise<any>;
+```
+
+Try to open the given `url` with any of the installed apps.
+
+You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386" on Android or "https://maps.apple.com/?ll=37.484847,-122.148386" on iOS), a contact, or any other URL that can be opened with the installed apps.
+
+The method returns a `Promise` object. If the user confirms the open dialog or the url automatically opens, the promise is resolved. If the user cancels the open dialog or there are no registered applications for the url, the promise is rejected.
+
+**Parameters:**
+
+| Name                                                     | Type   | Description      |
+| -------------------------------------------------------- | ------ | ---------------- |
+| url <div className="label basic required">Required</div> | string | The URL to open. |
+
+:::note
+This method will fail if the system doesn't know how to open the specified URL. If you're passing in a non-http(s) URL, it's best to check `canOpenURL()` first. For web URLs, the protocol (`"http://"`, `"https://"`) must be set accordingly!
+:::
+
+:::warning
+This method may behave differently in a simulator e.g. `"tel:"` links are not able to be handled in the iOS simulator as there's no access to the dialer app.
+:::
+
+---
+
+### `sendIntent()` <div className="label android">Android</div>
+
+```tsx
+static sendIntent(
+  action: string,
+  extras?: Array<{key: string; value: string | number | boolean}>,
+): Promise<void>;
+```
+
+Launch an Android intent with extras.
+
+**Parameters:**
+
+| Name                                                        | Type                                                       |
+| ----------------------------------------------------------- | ---------------------------------------------------------- |
+| action <div className="label basic required">Required</div> | string                                                     |
+| extras                                                      | `Array<{key: string, value: string ｜ number ｜ boolean}>` |
diff --git a/website/versioned_docs/version-0.84/modal.md b/website/versioned_docs/version-0.84/modal.md
index c929724719d..b58cd38d915 100644
--- a/website/versioned_docs/version-0.84/modal.md
+++ b/website/versioned_docs/version-0.84/modal.md
@@ -1,276 +1,276 @@
----
-id: modal
-title: Modal
----
-
-The Modal component is a basic way to present content above an enclosing view.
-
-## Example
-
-```SnackPlayer name=Modal&supportedPlatforms=android,ios
-import React, {useState} from 'react';
-import {Alert, Modal, StyleSheet, Text, Pressable, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [modalVisible, setModalVisible] = useState(false);
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.centeredView}>
-        <Modal
-          animationType="slide"
-          transparent={true}
-          visible={modalVisible}
-          onRequestClose={() => {
-            Alert.alert('Modal has been closed.');
-            setModalVisible(!modalVisible);
-          }}>
-          <View style={styles.centeredView}>
-            <View style={styles.modalView}>
-              <Text style={styles.modalText}>Hello World!</Text>
-              <Pressable
-                style={[styles.button, styles.buttonClose]}
-                onPress={() => setModalVisible(!modalVisible)}>
-                <Text style={styles.textStyle}>Hide Modal</Text>
-              </Pressable>
-            </View>
-          </View>
-        </Modal>
-        <Pressable
-          style={[styles.button, styles.buttonOpen]}
-          onPress={() => setModalVisible(true)}>
-          <Text style={styles.textStyle}>Show Modal</Text>
-        </Pressable>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  centeredView: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  modalView: {
-    margin: 20,
-    backgroundColor: 'white',
-    borderRadius: 20,
-    padding: 35,
-    alignItems: 'center',
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 4,
-    elevation: 5,
-  },
-  button: {
-    borderRadius: 20,
-    padding: 10,
-    elevation: 2,
-  },
-  buttonOpen: {
-    backgroundColor: '#F194FF',
-  },
-  buttonClose: {
-    backgroundColor: '#2196F3',
-  },
-  textStyle: {
-    color: 'white',
-    fontWeight: 'bold',
-    textAlign: 'center',
-  },
-  modalText: {
-    marginBottom: 15,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Props
-
-### [View Props](view.md#props)
-
-Inherits [View Props](view.md#props).
-
----
-
-### 🗑️ `animated`
-
-:::warning[Deprecated]
-Use the [`animationType`](modal.md#animationtype) prop instead.
-:::
-
----
-
-### `animationType`
-
-The `animationType` prop controls how the modal animates.
-
-Possible values:
-
-- `slide` slides in from the bottom
-- `fade` fades into view
-- `none` appears without an animation
-
-| Type                                | Default |
-| ----------------------------------- | ------- |
-| enum(`'none'`, `'slide'`, `'fade'`) | `none`  |
-
----
-
-### `backdropColor`
-
-The `backdropColor` of the modal (or background color of the modal's container.) Defaults to `white` if not provided and transparent is `false`. Ignored if `transparent` is `true`.
-
-| Type            | Default |
-| --------------- | ------- |
-| [color](colors) | white   |
-
----
-
-### `hardwareAccelerated` <div className="label android">Android</div>
-
-The `hardwareAccelerated` prop controls whether to force hardware acceleration for the underlying window.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `navigationBarTranslucent` <div className="label android">Android</div>
-
-The `navigationBarTranslucent` prop determines whether your modal should go under the system navigation bar. However, `statusBarTranslucent` also needs to be set to `true` to make navigation bar translucent.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `onDismiss` <div className="label ios">iOS</div>
-
-The `onDismiss` prop allows passing a function that will be called once the modal has been dismissed.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onOrientationChange` <div className="label ios">iOS</div>
-
-The `onOrientationChange` callback is called when the orientation changes while the modal is being displayed. The orientation provided is only 'portrait' or 'landscape'. This callback is also called on initial render, regardless of the current orientation.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `allowSwipeDismissal` <div className="label ios">iOS</div>
-
-Controls whether the modal can be dismissed by swiping down on iOS.
-This requires you to implement the `onRequestClose` prop to handle the dismissal.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `ref`
-
-A ref setter that will be assigned an [element node](element-nodes) when mounted.
-
----
-
-### `onRequestClose`
-
-The `onRequestClose` callback is called when the user taps the hardware back button on Android or the menu button on Apple TV. Because of this required prop, be aware that `BackHandler` events will not be emitted as long as the modal is open.
-On iOS, this callback is called when a Modal is being dismissed using a drag gesture when `presentationStyle` is `pageSheet` or `formSheet`. When `allowSwipeDismissal` is enabled this callback will be called after dismissing the modal.
-
-| Type                                                                                                                                                                                           |
-| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| function <div className="label basic required">Required</div><div className="label android">Android</div><div className="label tv">TV</div><hr />function <div className="label ios">iOS</div> |
-
----
-
-### `onShow`
-
-The `onShow` prop allows passing a function that will be called once the modal has been shown.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `presentationStyle` <div className="label ios">iOS</div>
-
-The `presentationStyle` prop controls how the modal appears (generally on larger devices such as iPad or plus-sized iPhones). See https://developer.apple.com/reference/uikit/uimodalpresentationstyle for details.
-
-Possible values:
-
-- `fullScreen` covers the screen completely
-- `pageSheet` covers portrait-width view centered (only on larger devices)
-- `formSheet` covers narrow-width view centered (only on larger devices)
-- `overFullScreen` covers the screen completely, but allows transparency
-
-| Type                                                                   | Default                                                                             |
-| ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
-| enum(`'fullScreen'`, `'pageSheet'`, `'formSheet'`, `'overFullScreen'`) | `fullScreen` if `transparent={false}`<hr />`overFullScreen` if `transparent={true}` |
-
----
-
-### `statusBarTranslucent` <div className="label android">Android</div>
-
-The `statusBarTranslucent` prop determines whether your modal should go under the system statusbar.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `supportedOrientations` <div className="label ios">iOS</div>
-
-The `supportedOrientations` prop allows the modal to be rotated to any of the specified orientations. On iOS, the modal is still restricted by what's specified in your app's Info.plist's UISupportedInterfaceOrientations field.
-
-:::note
-When using `presentationStyle` of `pageSheet` or `formSheet`, this property will be ignored on iOS.
-:::
-
-| Type                                                                                                           | Default        |
-| -------------------------------------------------------------------------------------------------------------- | -------------- |
-| array of enums(`'portrait'`, `'portrait-upside-down'`, `'landscape'`, `'landscape-left'`, `'landscape-right'`) | `['portrait']` |
-
----
-
-### `transparent`
-
-The `transparent` prop determines whether your modal will fill the entire view. Setting this to `true` will render the modal over a transparent background.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `visible`
-
-The `visible` prop determines whether your modal is visible.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `true`  |
+---
+id: modal
+title: Modal
+---
+
+The Modal component is a basic way to present content above an enclosing view.
+
+## Example
+
+```SnackPlayer name=Modal&supportedPlatforms=android,ios
+import {useState} from 'react';
+import {Alert, Modal, StyleSheet, Text, Pressable, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [modalVisible, setModalVisible] = useState(false);
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.centeredView}>
+        <Modal
+          animationType="slide"
+          transparent={true}
+          visible={modalVisible}
+          onRequestClose={() => {
+            Alert.alert('Modal has been closed.');
+            setModalVisible(!modalVisible);
+          }}>
+          <View style={styles.centeredView}>
+            <View style={styles.modalView}>
+              <Text style={styles.modalText}>Hello World!</Text>
+              <Pressable
+                style={[styles.button, styles.buttonClose]}
+                onPress={() => setModalVisible(!modalVisible)}>
+                <Text style={styles.textStyle}>Hide Modal</Text>
+              </Pressable>
+            </View>
+          </View>
+        </Modal>
+        <Pressable
+          style={[styles.button, styles.buttonOpen]}
+          onPress={() => setModalVisible(true)}>
+          <Text style={styles.textStyle}>Show Modal</Text>
+        </Pressable>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  centeredView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalView: {
+    margin: 20,
+    backgroundColor: 'white',
+    borderRadius: 20,
+    padding: 35,
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  button: {
+    borderRadius: 20,
+    padding: 10,
+    elevation: 2,
+  },
+  buttonOpen: {
+    backgroundColor: '#F194FF',
+  },
+  buttonClose: {
+    backgroundColor: '#2196F3',
+  },
+  textStyle: {
+    color: 'white',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  modalText: {
+    marginBottom: 15,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Props
+
+### [View Props](view.md#props)
+
+Inherits [View Props](view.md#props).
+
+---
+
+### 🗑️ `animated`
+
+:::warning[Deprecated]
+Use the [`animationType`](modal.md#animationtype) prop instead.
+:::
+
+---
+
+### `animationType`
+
+The `animationType` prop controls how the modal animates.
+
+Possible values:
+
+- `slide` slides in from the bottom
+- `fade` fades into view
+- `none` appears without an animation
+
+| Type                                | Default |
+| ----------------------------------- | ------- |
+| enum(`'none'`, `'slide'`, `'fade'`) | `none`  |
+
+---
+
+### `backdropColor`
+
+The `backdropColor` of the modal (or background color of the modal's container.) Defaults to `white` if not provided and transparent is `false`. Ignored if `transparent` is `true`.
+
+| Type            | Default |
+| --------------- | ------- |
+| [color](colors) | white   |
+
+---
+
+### `hardwareAccelerated` <div className="label android">Android</div>
+
+The `hardwareAccelerated` prop controls whether to force hardware acceleration for the underlying window.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `navigationBarTranslucent` <div className="label android">Android</div>
+
+The `navigationBarTranslucent` prop determines whether your modal should go under the system navigation bar. However, `statusBarTranslucent` also needs to be set to `true` to make navigation bar translucent.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `onDismiss` <div className="label ios">iOS</div>
+
+The `onDismiss` prop allows passing a function that will be called once the modal has been dismissed.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onOrientationChange` <div className="label ios">iOS</div>
+
+The `onOrientationChange` callback is called when the orientation changes while the modal is being displayed. The orientation provided is only 'portrait' or 'landscape'. This callback is also called on initial render, regardless of the current orientation.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `allowSwipeDismissal` <div className="label ios">iOS</div>
+
+Controls whether the modal can be dismissed by swiping down on iOS.
+This requires you to implement the `onRequestClose` prop to handle the dismissal.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `ref`
+
+A ref setter that will be assigned an [element node](element-nodes) when mounted.
+
+---
+
+### `onRequestClose`
+
+The `onRequestClose` callback is called when the user taps the hardware back button on Android or the menu button on Apple TV. Because of this required prop, be aware that `BackHandler` events will not be emitted as long as the modal is open.
+On iOS, this callback is called when a Modal is being dismissed using a drag gesture when `presentationStyle` is `pageSheet` or `formSheet`. When `allowSwipeDismissal` is enabled this callback will be called after dismissing the modal.
+
+| Type                                                                                                                                                                                           |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| function <div className="label basic required">Required</div><div className="label android">Android</div><div className="label tv">TV</div><hr />function <div className="label ios">iOS</div> |
+
+---
+
+### `onShow`
+
+The `onShow` prop allows passing a function that will be called once the modal has been shown.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `presentationStyle` <div className="label ios">iOS</div>
+
+The `presentationStyle` prop controls how the modal appears (generally on larger devices such as iPad or plus-sized iPhones). See https://developer.apple.com/reference/uikit/uimodalpresentationstyle for details.
+
+Possible values:
+
+- `fullScreen` covers the screen completely
+- `pageSheet` covers portrait-width view centered (only on larger devices)
+- `formSheet` covers narrow-width view centered (only on larger devices)
+- `overFullScreen` covers the screen completely, but allows transparency
+
+| Type                                                                   | Default                                                                             |
+| ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
+| enum(`'fullScreen'`, `'pageSheet'`, `'formSheet'`, `'overFullScreen'`) | `fullScreen` if `transparent={false}`<hr />`overFullScreen` if `transparent={true}` |
+
+---
+
+### `statusBarTranslucent` <div className="label android">Android</div>
+
+The `statusBarTranslucent` prop determines whether your modal should go under the system statusbar.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `supportedOrientations` <div className="label ios">iOS</div>
+
+The `supportedOrientations` prop allows the modal to be rotated to any of the specified orientations. On iOS, the modal is still restricted by what's specified in your app's Info.plist's UISupportedInterfaceOrientations field.
+
+:::note
+When using `presentationStyle` of `pageSheet` or `formSheet`, this property will be ignored on iOS.
+:::
+
+| Type                                                                                                           | Default        |
+| -------------------------------------------------------------------------------------------------------------- | -------------- |
+| array of enums(`'portrait'`, `'portrait-upside-down'`, `'landscape'`, `'landscape-left'`, `'landscape-right'`) | `['portrait']` |
+
+---
+
+### `transparent`
+
+The `transparent` prop determines whether your modal will fill the entire view. Setting this to `true` will render the modal over a transparent background.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `visible`
+
+The `visible` prop determines whether your modal is visible.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `true`  |
diff --git a/website/versioned_docs/version-0.84/navigation.md b/website/versioned_docs/version-0.84/navigation.md
index 363b48b1261..4d9586bf801 100644
--- a/website/versioned_docs/version-0.84/navigation.md
+++ b/website/versioned_docs/version-0.84/navigation.md
@@ -64,7 +64,6 @@ Now you are ready to build and run your app on the device/simulator.
 Now you can create an app with a home screen and a profile screen:
 
 ```tsx
-import * as React from 'react';
 import {createStaticNavigation} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 
diff --git a/website/versioned_docs/version-0.84/network.md b/website/versioned_docs/version-0.84/network.md
index 0c4dedcfa40..a11a1197d26 100644
--- a/website/versioned_docs/version-0.84/network.md
+++ b/website/versioned_docs/version-0.84/network.md
@@ -1,286 +1,286 @@
----
-id: network
-title: Networking
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may need to fetch a chunk of static content from another server.
-
-## Using Fetch
-
-React Native provides the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) for your networking needs. Fetch will seem familiar if you have used `XMLHttpRequest` or other networking APIs before. You may refer to MDN's guide on [Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) for additional information.
-
-### Making requests
-
-In order to fetch content from an arbitrary URL, you can pass the URL to fetch:
-
-```ts
-fetch('https://mywebsite.com/mydata.json');
-```
-
-Fetch also takes an optional second argument that allows you to customize the HTTP request. You may want to specify additional headers, or make a POST request:
-
-```ts
-fetch('https://mywebsite.com/endpoint/', {
-  method: 'POST',
-  headers: {
-    Accept: 'application/json',
-    'Content-Type': 'application/json',
-  },
-  body: JSON.stringify({
-    firstParam: 'yourValue',
-    secondParam: 'yourOtherValue',
-  }),
-});
-```
-
-Take a look at the [Fetch Request docs](https://developer.mozilla.org/en-US/docs/Web/API/Request) for a full list of properties.
-
-### Handling the response
-
-The above examples show how you can make a request. In many cases, you will want to do something with the response.
-
-Networking is an inherently asynchronous operation. Fetch method will return a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that makes it straightforward to write code that works in an asynchronous manner:
-
-```ts
-const getMoviesFromApi = () => {
-  return fetch('https://reactnative.dev/movies.json')
-    .then(response => response.json())
-    .then(json => {
-      return json.movies;
-    })
-    .catch(error => {
-      console.error(error);
-    });
-};
-```
-
-You can also use the `async` / `await` syntax in a React Native app:
-
-```ts
-const getMoviesFromApiAsync = async () => {
-  try {
-    const response = await fetch(
-      'https://reactnative.dev/movies.json',
-    );
-    const json = await response.json();
-    return json.movies;
-  } catch (error) {
-    console.error(error);
-  }
-};
-```
-
-Don't forget to catch any errors that may be thrown by `fetch`, otherwise they will be dropped silently.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Fetch%20Example&ext=js
-import React, {useEffect, useState} from 'react';
-import {ActivityIndicator, FlatList, Text, View} from 'react-native';
-
-const App = () => {
-  const [isLoading, setLoading] = useState(true);
-  const [data, setData] = useState([]);
-
-  const getMovies = async () => {
-    try {
-      const response = await fetch('https://reactnative.dev/movies.json');
-      const json = await response.json();
-      setData(json.movies);
-    } catch (error) {
-      console.error(error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    getMovies();
-  }, []);
-
-  return (
-    <View style={{flex: 1, padding: 24}}>
-      {isLoading ? (
-        <ActivityIndicator />
-      ) : (
-        <FlatList
-          data={data}
-          keyExtractor={({id}) => id}
-          renderItem={({item}) => (
-            <Text>
-              {item.title}, {item.releaseYear}
-            </Text>
-          )}
-        />
-      )}
-    </View>
-  );
-};
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Fetch%20Example&ext=tsx
-import React, {useEffect, useState} from 'react';
-import {ActivityIndicator, FlatList, Text, View} from 'react-native';
-
-type Movie = {
-  id: string;
-  title: string;
-  releaseYear: string;
-};
-
-type MoviesResponse = {
-  title: string;
-  description: string;
-  movies: Movie[];
-};
-
-const App = () => {
-  const [isLoading, setLoading] = useState(true);
-  const [data, setData] = useState<Movie[]>([]);
-
-  const getMovies = async () => {
-    try {
-      const response = await fetch('https://reactnative.dev/movies.json');
-      const json = (await response.json()) as MoviesResponse;
-      setData(json.movies);
-    } catch (error) {
-      console.error(error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    getMovies();
-  }, []);
-
-  return (
-    <View style={{flex: 1, padding: 24}}>
-      {isLoading ? (
-        <ActivityIndicator />
-      ) : (
-        <FlatList
-          data={data}
-          keyExtractor={({id}) => id}
-          renderItem={({item}) => (
-            <Text>
-              {item.title}, {item.releaseYear}
-            </Text>
-          )}
-        />
-      )}
-    </View>
-  );
-};
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-:::info
-By default, iOS 9.0 or later enforce App Transport Security (ATS). ATS requires any HTTP connection to use HTTPS. If you need to fetch from a cleartext URL (one that begins with `http`) you will first need to [add an ATS exception](integration-with-existing-apps.md#test-your-integration). If you know ahead of time what domains you will need access to, it is more secure to add exceptions only for those domains; if the domains are not known until runtime you can [disable ATS completely](publishing-to-app-store.md#1-enable-app-transport-security). Note however that from January 2017, [Apple's App Store review will require reasonable justification for disabling ATS](https://forums.developer.apple.com/thread/48979). See [Apple's documentation](https://developer.apple.com/library/ios/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html#//apple_ref/doc/uid/TP40009251-SW33) for more information.
-:::
-
-:::tip
-On Android, as of API Level 28, clear text traffic is also blocked by default. This behaviour can be overridden by setting [`android:usesCleartextTraffic`](https://developer.android.com/guide/topics/manifest/application-element#usesCleartextTraffic) in the app manifest file.
-:::
-
-## Using Other Networking Libraries
-
-The [XMLHttpRequest API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) is built into React Native. This means that you can use third party libraries such as [frisbee](https://github.com/niftylettuce/frisbee) or [axios](https://github.com/axios/axios) that depend on it, or you can use the XMLHttpRequest API directly if you prefer.
-
-```ts
-const request = new XMLHttpRequest();
-request.onreadystatechange = e => {
-  if (request.readyState !== 4) {
-    return;
-  }
-
-  if (request.status === 200) {
-    console.log('success', request.responseText);
-  } else {
-    console.warn('error');
-  }
-};
-
-request.open('GET', 'https://mywebsite.com/endpoint/');
-request.send();
-```
-
-:::warning[Caution]
-The security model for XMLHttpRequest is different than on web as there is no concept of [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) in native apps.
-:::
-
-## WebSocket Support
-
-React Native also supports [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket), a protocol which provides full-duplex communication channels over a single TCP connection.
-
-```ts
-const ws = new WebSocket('ws://host.com/path');
-
-ws.onopen = () => {
-  // connection opened
-  ws.send('something'); // send a message
-};
-
-ws.onmessage = e => {
-  // a message was received
-  console.log(e.data);
-};
-
-ws.onerror = e => {
-  // an error occurred
-  console.log(e.message);
-};
-
-ws.onclose = e => {
-  // connection closed
-  console.log(e.code, e.reason);
-};
-```
-
-## Known Issues with `fetch` and cookie based authentication
-
-The following options are currently not working with `fetch`
-
-- `redirect:manual`
-- `credentials:omit`
-
-* Having same name headers on Android will result in only the latest one being present. A temporary solution can be found here: https://github.com/facebook/react-native/issues/18837#issuecomment-398779994.
-* Cookie based authentication is currently unstable. You can view some of the issues raised here: https://github.com/facebook/react-native/issues/23185
-* As a minimum on iOS, when redirected through a `302`, if a `Set-Cookie` header is present, the cookie is not set properly. Since the redirect cannot be handled manually this might cause a scenario where infinite requests occur if the redirect is the result of an expired session.
-
-## Configuring NSURLSession on iOS
-
-For some applications it may be appropriate to provide a custom `NSURLSessionConfiguration` for the underlying `NSURLSession` that is used for network requests in a React Native application running on iOS. For instance, one may need to set a custom user agent string for all network requests coming from the app or supply `NSURLSession` with an ephemeral `NSURLSessionConfiguration`. The function `RCTSetCustomNSURLSessionConfigurationProvider` allows for such customization. Remember to add the following import to the file in which `RCTSetCustomNSURLSessionConfigurationProvider` will be called:
-
-```objectivec
-#import <React/RCTHTTPRequestHandler.h>
-```
-
-`RCTSetCustomNSURLSessionConfigurationProvider` should be called early in the application life cycle such that it is readily available when needed by React, for instance:
-
-```objectivec
--(void)application:(__unused UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
-
-  // set RCTSetCustomNSURLSessionConfigurationProvider
-  RCTSetCustomNSURLSessionConfigurationProvider(^NSURLSessionConfiguration *{
-     NSURLSessionConfiguration *configuration = [NSURLSessionConfiguration defaultSessionConfiguration];
-     // configure the session
-     return configuration;
-  });
-
-  // set up React
-  _bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
-}
-```
+---
+id: network
+title: Networking
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may need to fetch a chunk of static content from another server.
+
+## Using Fetch
+
+React Native provides the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) for your networking needs. Fetch will seem familiar if you have used `XMLHttpRequest` or other networking APIs before. You may refer to MDN's guide on [Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) for additional information.
+
+### Making requests
+
+In order to fetch content from an arbitrary URL, you can pass the URL to fetch:
+
+```ts
+fetch('https://mywebsite.com/mydata.json');
+```
+
+Fetch also takes an optional second argument that allows you to customize the HTTP request. You may want to specify additional headers, or make a POST request:
+
+```ts
+fetch('https://mywebsite.com/endpoint/', {
+  method: 'POST',
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json',
+  },
+  body: JSON.stringify({
+    firstParam: 'yourValue',
+    secondParam: 'yourOtherValue',
+  }),
+});
+```
+
+Take a look at the [Fetch Request docs](https://developer.mozilla.org/en-US/docs/Web/API/Request) for a full list of properties.
+
+### Handling the response
+
+The above examples show how you can make a request. In many cases, you will want to do something with the response.
+
+Networking is an inherently asynchronous operation. Fetch method will return a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that makes it straightforward to write code that works in an asynchronous manner:
+
+```ts
+const getMoviesFromApi = () => {
+  return fetch('https://reactnative.dev/movies.json')
+    .then(response => response.json())
+    .then(json => {
+      return json.movies;
+    })
+    .catch(error => {
+      console.error(error);
+    });
+};
+```
+
+You can also use the `async` / `await` syntax in a React Native app:
+
+```ts
+const getMoviesFromApiAsync = async () => {
+  try {
+    const response = await fetch(
+      'https://reactnative.dev/movies.json',
+    );
+    const json = await response.json();
+    return json.movies;
+  } catch (error) {
+    console.error(error);
+  }
+};
+```
+
+Don't forget to catch any errors that may be thrown by `fetch`, otherwise they will be dropped silently.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Fetch%20Example&ext=js
+import {useEffect, useState} from 'react';
+import {ActivityIndicator, FlatList, Text, View} from 'react-native';
+
+const App = () => {
+  const [isLoading, setLoading] = useState(true);
+  const [data, setData] = useState([]);
+
+  const getMovies = async () => {
+    try {
+      const response = await fetch('https://reactnative.dev/movies.json');
+      const json = await response.json();
+      setData(json.movies);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    getMovies();
+  }, []);
+
+  return (
+    <View style={{flex: 1, padding: 24}}>
+      {isLoading ? (
+        <ActivityIndicator />
+      ) : (
+        <FlatList
+          data={data}
+          keyExtractor={({id}) => id}
+          renderItem={({item}) => (
+            <Text>
+              {item.title}, {item.releaseYear}
+            </Text>
+          )}
+        />
+      )}
+    </View>
+  );
+};
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Fetch%20Example&ext=tsx
+import {useEffect, useState} from 'react';
+import {ActivityIndicator, FlatList, Text, View} from 'react-native';
+
+type Movie = {
+  id: string;
+  title: string;
+  releaseYear: string;
+};
+
+type MoviesResponse = {
+  title: string;
+  description: string;
+  movies: Movie[];
+};
+
+const App = () => {
+  const [isLoading, setLoading] = useState(true);
+  const [data, setData] = useState<Movie[]>([]);
+
+  const getMovies = async () => {
+    try {
+      const response = await fetch('https://reactnative.dev/movies.json');
+      const json = (await response.json()) as MoviesResponse;
+      setData(json.movies);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    getMovies();
+  }, []);
+
+  return (
+    <View style={{flex: 1, padding: 24}}>
+      {isLoading ? (
+        <ActivityIndicator />
+      ) : (
+        <FlatList
+          data={data}
+          keyExtractor={({id}) => id}
+          renderItem={({item}) => (
+            <Text>
+              {item.title}, {item.releaseYear}
+            </Text>
+          )}
+        />
+      )}
+    </View>
+  );
+};
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+:::info
+By default, iOS 9.0 or later enforce App Transport Security (ATS). ATS requires any HTTP connection to use HTTPS. If you need to fetch from a cleartext URL (one that begins with `http`) you will first need to [add an ATS exception](integration-with-existing-apps.md#test-your-integration). If you know ahead of time what domains you will need access to, it is more secure to add exceptions only for those domains; if the domains are not known until runtime you can [disable ATS completely](publishing-to-app-store.md#1-enable-app-transport-security). Note however that from January 2017, [Apple's App Store review will require reasonable justification for disabling ATS](https://forums.developer.apple.com/thread/48979). See [Apple's documentation](https://developer.apple.com/library/ios/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html#//apple_ref/doc/uid/TP40009251-SW33) for more information.
+:::
+
+:::tip
+On Android, as of API Level 28, clear text traffic is also blocked by default. This behaviour can be overridden by setting [`android:usesCleartextTraffic`](https://developer.android.com/guide/topics/manifest/application-element#usesCleartextTraffic) in the app manifest file.
+:::
+
+## Using Other Networking Libraries
+
+The [XMLHttpRequest API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) is built into React Native. This means that you can use third party libraries such as [frisbee](https://github.com/niftylettuce/frisbee) or [axios](https://github.com/axios/axios) that depend on it, or you can use the XMLHttpRequest API directly if you prefer.
+
+```ts
+const request = new XMLHttpRequest();
+request.onreadystatechange = e => {
+  if (request.readyState !== 4) {
+    return;
+  }
+
+  if (request.status === 200) {
+    console.log('success', request.responseText);
+  } else {
+    console.warn('error');
+  }
+};
+
+request.open('GET', 'https://mywebsite.com/endpoint/');
+request.send();
+```
+
+:::warning[Caution]
+The security model for XMLHttpRequest is different than on web as there is no concept of [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) in native apps.
+:::
+
+## WebSocket Support
+
+React Native also supports [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket), a protocol which provides full-duplex communication channels over a single TCP connection.
+
+```ts
+const ws = new WebSocket('ws://host.com/path');
+
+ws.onopen = () => {
+  // connection opened
+  ws.send('something'); // send a message
+};
+
+ws.onmessage = e => {
+  // a message was received
+  console.log(e.data);
+};
+
+ws.onerror = e => {
+  // an error occurred
+  console.log(e.message);
+};
+
+ws.onclose = e => {
+  // connection closed
+  console.log(e.code, e.reason);
+};
+```
+
+## Known Issues with `fetch` and cookie based authentication
+
+The following options are currently not working with `fetch`
+
+- `redirect:manual`
+- `credentials:omit`
+
+* Having same name headers on Android will result in only the latest one being present. A temporary solution can be found here: https://github.com/facebook/react-native/issues/18837#issuecomment-398779994.
+* Cookie based authentication is currently unstable. You can view some of the issues raised here: https://github.com/facebook/react-native/issues/23185
+* As a minimum on iOS, when redirected through a `302`, if a `Set-Cookie` header is present, the cookie is not set properly. Since the redirect cannot be handled manually this might cause a scenario where infinite requests occur if the redirect is the result of an expired session.
+
+## Configuring NSURLSession on iOS
+
+For some applications it may be appropriate to provide a custom `NSURLSessionConfiguration` for the underlying `NSURLSession` that is used for network requests in a React Native application running on iOS. For instance, one may need to set a custom user agent string for all network requests coming from the app or supply `NSURLSession` with an ephemeral `NSURLSessionConfiguration`. The function `RCTSetCustomNSURLSessionConfigurationProvider` allows for such customization. Remember to add the following import to the file in which `RCTSetCustomNSURLSessionConfigurationProvider` will be called:
+
+```objectivec
+#import <React/RCTHTTPRequestHandler.h>
+```
+
+`RCTSetCustomNSURLSessionConfigurationProvider` should be called early in the application life cycle such that it is readily available when needed by React, for instance:
+
+```objectivec
+-(void)application:(__unused UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
+
+  // set RCTSetCustomNSURLSessionConfigurationProvider
+  RCTSetCustomNSURLSessionConfigurationProvider(^NSURLSessionConfiguration *{
+     NSURLSessionConfiguration *configuration = [NSURLSessionConfiguration defaultSessionConfiguration];
+     // configure the session
+     return configuration;
+  });
+
+  // set up React
+  _bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
+}
+```
diff --git a/website/versioned_docs/version-0.84/optimizing-flatlist-configuration.md b/website/versioned_docs/version-0.84/optimizing-flatlist-configuration.md
index a81ec0c6cf6..11be2e33b7c 100644
--- a/website/versioned_docs/version-0.84/optimizing-flatlist-configuration.md
+++ b/website/versioned_docs/version-0.84/optimizing-flatlist-configuration.md
@@ -1,154 +1,154 @@
----
-id: optimizing-flatlist-configuration
-title: Optimizing FlatList Configuration
----
-
-## Terms
-
-- **VirtualizedList:** The component behind `FlatList` (React Native's implementation of the [`Virtual List`](https://bvaughn.github.io/react-virtualized/#/components/List) concept.)
-
-- **Memory consumption:** How much information about your list is being stored in memory, which could lead to an app crash.
-
-- **Responsiveness:** Application ability to respond to interactions. Low responsiveness, for instance, is when you touch on a component and it waits a bit to respond, instead of responding immediately as expected.
-
-- **Blank areas:** When `VirtualizedList` can't render your items fast enough, you may enter a part of your list with non-rendered components that appear as blank space.
-
-- **Viewport:** The visible area of content that is rendered to pixels.
-
-- **Window:** The area in which items should be mounted, which is generally much larger than the viewport.
-
-## Props
-
-Here are a list of props that can help to improve `FlatList` performance:
-
-### `removeClippedSubviews`
-
-| Type    | Default                              |
-| ------- | ------------------------------------ |
-| Boolean | `true` on Android, otherwise `false` |
-
-If `true`, views that are outside of the viewport are automatically detached from the native view hierarchy.
-
-**Pros:** This reduces time spent on the main thread, and thus reduces the risk of dropped frames, by excluding views outside of the viewport from the native rendering and drawing traversals.
-
-**Cons:** Be aware that this implementation can have bugs, such as missing content (mainly observed on iOS), especially if you are doing complex things with transforms and/or absolute positioning. Also note this does not save significant memory because the views are not deallocated, only detached.
-
-### `maxToRenderPerBatch`
-
-| Type   | Default |
-| ------ | ------- |
-| Number | 10      |
-
-It is a `VirtualizedList` prop that can be passed through `FlatList`. This controls the amount of items rendered per batch, which is the next chunk of items rendered on every scroll.
-
-**Pros:** Setting a bigger number means less visual blank areas when scrolling (increases the fill rate).
-
-**Cons:** More items per batch means longer periods of JavaScript execution potentially blocking other event processing, like presses, hurting responsiveness.
-
-### `updateCellsBatchingPeriod`
-
-| Type   | Default |
-| ------ | ------- |
-| Number | 50      |
-
-While `maxToRenderPerBatch` tells the amount of items rendered per batch, setting `updateCellsBatchingPeriod` tells your `VirtualizedList` the delay in milliseconds between batch renders (how frequently your component will be rendering the windowed items).
-
-**Pros:** Combining this prop with `maxToRenderPerBatch` gives you the power to, for example, render more items in a less frequent batch, or less items in a more frequent batch.
-
-**Cons:** Less frequent batches may cause blank areas, More frequent batches may cause responsiveness issues.
-
-### initialNumToRender
-
-| Type   | Default |
-| ------ | ------- |
-| Number | 10      |
-
-The initial amount of items to render.
-
-**Pros:** Define precise number of items that would cover the screen for every device. This can be a big performance boost for the initial render.
-
-**Cons:** Setting a low `initialNumToRender` may cause blank areas, especially if it's too small to cover the viewport on initial render.
-
-### `windowSize`
-
-| Type   | Default |
-| ------ | ------- |
-| Number | 21      |
-
-The number passed here is a measurement unit where 1 is equivalent to your viewport height. The default value is 21 (10 viewports above, 10 below, and one in between).
-
-**Pros:** Bigger `windowSize` will result in less chance of seeing blank space while scrolling. On the other hand, smaller `windowSize` will result in fewer items mounted simultaneously, saving memory.
-
-**Cons:** For a bigger `windowSize`, you will have more memory consumption. For a lower `windowSize`, you will have a bigger chance of seeing blank areas.
-
-## List items
-
-Below are some tips about list item components. They are the core of your list, so they need to be fast.
-
-### Use basic components
-
-The more complex your components are, the slower they will render. Try to avoid a lot of logic and nesting in your list items. If you are reusing this list item component a lot in your app, create a component only for your big lists and make them with as little logic and nesting as possible.
-
-### Use light components
-
-The heavier your components are, the slower they render. Avoid heavy images (use a cropped version or thumbnail for list items, as small as possible). Talk to your design team, use as little effects and interactions and information as possible in your list. Show them in your item's detail.
-
-### Use `memo()`
-
-`React.memo()` creates a memoized component that will be re-rendered only when the props passed to the component change. We can use this function to optimize the components in the FlatList.
-
-```tsx
-import React, {memo} from 'react';
-import {View, Text} from 'react-native';
-
-const MyListItem = memo(
-  ({title}: {title: string}) => (
-    <View>
-      <Text>{title}</Text>
-    </View>
-  ),
-  (prevProps, nextProps) => {
-    return prevProps.title === nextProps.title;
-  },
-);
-
-export default MyListItem;
-```
-
-In this example, we have determined that MyListItem should be re-rendered only when the title changes. We passed the comparison function as the second argument to React.memo() so that the component is re-rendered only when the specified prop is changed. If the comparison function returns true, the component will not be re-rendered.
-
-### Use cached optimized images
-
-You can use the community packages (such as [@d11/react-native-fast-image](https://github.com/ds-horizon/react-native-fast-image) from [Dream11](https://github.com/ds-horizon)) for more performant images. Every image in your list is a `new Image()` instance. The faster it reaches the `loaded` hook, the faster your JavaScript thread will be free again.
-
-### Use `getItemLayout`
-
-If all your list item components have the same height (or width, for a horizontal list), providing the [getItemLayout](flatlist#getitemlayout) prop removes the need for your `FlatList` to manage async layout calculations. This is a very desirable optimization technique.
-
-If your components have dynamic size and you really need performance, consider asking your design team if they may think of a redesign in order to perform better.
-
-### Use `keyExtractor` or `key`
-
-You can set the [`keyExtractor`](flatlist#keyextractor) to your `FlatList` component. This prop is used for caching and as the React `key` to track item re-ordering.
-
-You can also use a `key` prop in your item component.
-
-### Avoid anonymous function on `renderItem`
-
-For functional components, move the `renderItem` function outside of the returned JSX. Also, ensure that it is wrapped in a `useCallback` hook to prevent it from being recreated each render.
-
-For class components, move the `renderItem` function outside of the render function, so it won't recreate itself each time the render function is called.
-
-```tsx
-const renderItem = useCallback(({item}) => (
-   <View key={item.key}>
-      <Text>{item.title}</Text>
-   </View>
- ), []);
-
-return (
-  // ...
-  <FlatList data={items} renderItem={renderItem} />;
-  // ...
-);
-```
+---
+id: optimizing-flatlist-configuration
+title: Optimizing FlatList Configuration
+---
+
+## Terms
+
+- **VirtualizedList:** The component behind `FlatList` (React Native's implementation of the [`Virtual List`](https://bvaughn.github.io/react-virtualized/#/components/List) concept.)
+
+- **Memory consumption:** How much information about your list is being stored in memory, which could lead to an app crash.
+
+- **Responsiveness:** Application ability to respond to interactions. Low responsiveness, for instance, is when you touch on a component and it waits a bit to respond, instead of responding immediately as expected.
+
+- **Blank areas:** When `VirtualizedList` can't render your items fast enough, you may enter a part of your list with non-rendered components that appear as blank space.
+
+- **Viewport:** The visible area of content that is rendered to pixels.
+
+- **Window:** The area in which items should be mounted, which is generally much larger than the viewport.
+
+## Props
+
+Here are a list of props that can help to improve `FlatList` performance:
+
+### `removeClippedSubviews`
+
+| Type    | Default                              |
+| ------- | ------------------------------------ |
+| Boolean | `true` on Android, otherwise `false` |
+
+If `true`, views that are outside of the viewport are automatically detached from the native view hierarchy.
+
+**Pros:** This reduces time spent on the main thread, and thus reduces the risk of dropped frames, by excluding views outside of the viewport from the native rendering and drawing traversals.
+
+**Cons:** Be aware that this implementation can have bugs, such as missing content (mainly observed on iOS), especially if you are doing complex things with transforms and/or absolute positioning. Also note this does not save significant memory because the views are not deallocated, only detached.
+
+### `maxToRenderPerBatch`
+
+| Type   | Default |
+| ------ | ------- |
+| Number | 10      |
+
+It is a `VirtualizedList` prop that can be passed through `FlatList`. This controls the amount of items rendered per batch, which is the next chunk of items rendered on every scroll.
+
+**Pros:** Setting a bigger number means less visual blank areas when scrolling (increases the fill rate).
+
+**Cons:** More items per batch means longer periods of JavaScript execution potentially blocking other event processing, like presses, hurting responsiveness.
+
+### `updateCellsBatchingPeriod`
+
+| Type   | Default |
+| ------ | ------- |
+| Number | 50      |
+
+While `maxToRenderPerBatch` tells the amount of items rendered per batch, setting `updateCellsBatchingPeriod` tells your `VirtualizedList` the delay in milliseconds between batch renders (how frequently your component will be rendering the windowed items).
+
+**Pros:** Combining this prop with `maxToRenderPerBatch` gives you the power to, for example, render more items in a less frequent batch, or less items in a more frequent batch.
+
+**Cons:** Less frequent batches may cause blank areas, More frequent batches may cause responsiveness issues.
+
+### initialNumToRender
+
+| Type   | Default |
+| ------ | ------- |
+| Number | 10      |
+
+The initial amount of items to render.
+
+**Pros:** Define precise number of items that would cover the screen for every device. This can be a big performance boost for the initial render.
+
+**Cons:** Setting a low `initialNumToRender` may cause blank areas, especially if it's too small to cover the viewport on initial render.
+
+### `windowSize`
+
+| Type   | Default |
+| ------ | ------- |
+| Number | 21      |
+
+The number passed here is a measurement unit where 1 is equivalent to your viewport height. The default value is 21 (10 viewports above, 10 below, and one in between).
+
+**Pros:** Bigger `windowSize` will result in less chance of seeing blank space while scrolling. On the other hand, smaller `windowSize` will result in fewer items mounted simultaneously, saving memory.
+
+**Cons:** For a bigger `windowSize`, you will have more memory consumption. For a lower `windowSize`, you will have a bigger chance of seeing blank areas.
+
+## List items
+
+Below are some tips about list item components. They are the core of your list, so they need to be fast.
+
+### Use basic components
+
+The more complex your components are, the slower they will render. Try to avoid a lot of logic and nesting in your list items. If you are reusing this list item component a lot in your app, create a component only for your big lists and make them with as little logic and nesting as possible.
+
+### Use light components
+
+The heavier your components are, the slower they render. Avoid heavy images (use a cropped version or thumbnail for list items, as small as possible). Talk to your design team, use as little effects and interactions and information as possible in your list. Show them in your item's detail.
+
+### Use `memo()`
+
+`React.memo()` creates a memoized component that will be re-rendered only when the props passed to the component change. We can use this function to optimize the components in the FlatList.
+
+```tsx
+import {memo} from 'react';
+import {View, Text} from 'react-native';
+
+const MyListItem = memo(
+  ({title}: {title: string}) => (
+    <View>
+      <Text>{title}</Text>
+    </View>
+  ),
+  (prevProps, nextProps) => {
+    return prevProps.title === nextProps.title;
+  },
+);
+
+export default MyListItem;
+```
+
+In this example, we have determined that MyListItem should be re-rendered only when the title changes. We passed the comparison function as the second argument to React.memo() so that the component is re-rendered only when the specified prop is changed. If the comparison function returns true, the component will not be re-rendered.
+
+### Use cached optimized images
+
+You can use the community packages (such as [@d11/react-native-fast-image](https://github.com/ds-horizon/react-native-fast-image) from [Dream11](https://github.com/ds-horizon)) for more performant images. Every image in your list is a `new Image()` instance. The faster it reaches the `loaded` hook, the faster your JavaScript thread will be free again.
+
+### Use `getItemLayout`
+
+If all your list item components have the same height (or width, for a horizontal list), providing the [getItemLayout](flatlist#getitemlayout) prop removes the need for your `FlatList` to manage async layout calculations. This is a very desirable optimization technique.
+
+If your components have dynamic size and you really need performance, consider asking your design team if they may think of a redesign in order to perform better.
+
+### Use `keyExtractor` or `key`
+
+You can set the [`keyExtractor`](flatlist#keyextractor) to your `FlatList` component. This prop is used for caching and as the React `key` to track item re-ordering.
+
+You can also use a `key` prop in your item component.
+
+### Avoid anonymous function on `renderItem`
+
+For functional components, move the `renderItem` function outside of the returned JSX. Also, ensure that it is wrapped in a `useCallback` hook to prevent it from being recreated each render.
+
+For class components, move the `renderItem` function outside of the render function, so it won't recreate itself each time the render function is called.
+
+```tsx
+const renderItem = useCallback(({item}) => (
+   <View key={item.key}>
+      <Text>{item.title}</Text>
+   </View>
+ ), []);
+
+return (
+  // ...
+  <FlatList data={items} renderItem={renderItem} />;
+  // ...
+);
+```
diff --git a/website/versioned_docs/version-0.84/panresponder.md b/website/versioned_docs/version-0.84/panresponder.md
index fa6d8b8ee4e..eabd919aa1e 100644
--- a/website/versioned_docs/version-0.84/panresponder.md
+++ b/website/versioned_docs/version-0.84/panresponder.md
@@ -1,177 +1,177 @@
----
-id: panresponder
-title: PanResponder
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-`PanResponder` reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize basic multi-touch gestures.
-
-By default, `PanResponder` holds an `InteractionManager` handle to block long-running JS events from interrupting active gestures.
-
-It provides a predictable wrapper of the responder handlers provided by the [gesture responder system](gesture-responder-system.md). For each handler, it provides a new `gestureState` object alongside the native event object:
-
-```
-onPanResponderMove: (event, gestureState) => {}
-```
-
-A native event is a synthetic touch event with form of [PressEvent](pressevent).
-
-A `gestureState` object has the following:
-
-- `stateID` - ID of the gestureState- persisted as long as there's at least one touch on screen
-- `moveX` - the latest screen coordinates of the recently-moved touch
-- `moveY` - the latest screen coordinates of the recently-moved touch
-- `x0` - the screen coordinates of the responder grant
-- `y0` - the screen coordinates of the responder grant
-- `dx` - accumulated distance of the gesture since the touch started
-- `dy` - accumulated distance of the gesture since the touch started
-- `vx` - current velocity of the gesture
-- `vy` - current velocity of the gesture
-- `numberActiveTouches` - Number of touches currently on screen
-
-## Usage Pattern
-
-```tsx
-const ExampleComponent = () => {
-  const panResponder = React.useRef(
-    PanResponder.create({
-      // Ask to be the responder:
-      onStartShouldSetPanResponder: (evt, gestureState) => true,
-      onStartShouldSetPanResponderCapture: (evt, gestureState) =>
-        true,
-      onMoveShouldSetPanResponder: (evt, gestureState) => true,
-      onMoveShouldSetPanResponderCapture: (evt, gestureState) =>
-        true,
-
-      onPanResponderGrant: (evt, gestureState) => {
-        // The gesture has started. Show visual feedback so the user knows
-        // what is happening!
-        // gestureState.d{x,y} will be set to zero now
-      },
-      onPanResponderMove: (evt, gestureState) => {
-        // The most recent move distance is gestureState.move{X,Y}
-        // The accumulated gesture distance since becoming responder is
-        // gestureState.d{x,y}
-      },
-      onPanResponderTerminationRequest: (evt, gestureState) =>
-        true,
-      onPanResponderRelease: (evt, gestureState) => {
-        // The user has released all touches while this view is the
-        // responder. This typically means a gesture has succeeded
-      },
-      onPanResponderTerminate: (evt, gestureState) => {
-        // Another component has become the responder, so this gesture
-        // should be cancelled
-      },
-      onShouldBlockNativeResponder: (evt, gestureState) => {
-        // Returns whether this component should block native components from becoming the JS
-        // responder. Returns true by default. Is currently only supported on android.
-        return true;
-      },
-    }),
-  ).current;
-
-  return <View {...panResponder.panHandlers} />;
-};
-```
-
-## Example
-
-`PanResponder` works with `Animated` API to help build complex gestures in the UI. The following example contains an animated `View` component which can be dragged freely across the screen
-
-```SnackPlayer name=PanResponder
-import React, {useRef} from 'react';
-import {Animated, View, StyleSheet, PanResponder, Text} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const pan = useRef(new Animated.ValueXY()).current;
-
-  const panResponder = useRef(
-    PanResponder.create({
-      onMoveShouldSetPanResponder: () => true,
-      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
-      onPanResponderRelease: () => {
-        pan.extractOffset();
-      },
-    }),
-  ).current;
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.titleText}>Drag this box!</Text>
-        <Animated.View
-          style={{
-            transform: [{translateX: pan.x}, {translateY: pan.y}],
-          }}
-          {...panResponder.panHandlers}>
-          <View style={styles.box} />
-        </Animated.View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  titleText: {
-    fontSize: 14,
-    lineHeight: 24,
-    fontWeight: 'bold',
-  },
-  box: {
-    height: 150,
-    width: 150,
-    backgroundColor: 'blue',
-    borderRadius: 5,
-  },
-});
-
-export default App;
-```
-
-Try the [PanResponder example in RNTester](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js).
-
----
-
-# Reference
-
-## Methods
-
-### `create()`
-
-```tsx
-static create(config: PanResponderCallbacks): PanResponderInstance;
-```
-
-**Parameters:**
-
-| Name                                                        | Type   | Description |
-| ----------------------------------------------------------- | ------ | ----------- |
-| config <div className="label basic required">Required</div> | object | Refer below |
-
-The `config` object provides enhanced versions of all of the responder callbacks that provide not only the [`PressEvent`](pressevent), but also the `PanResponder` gesture state, by replacing the word `Responder` with `PanResponder` in each of the typical `onResponder*` callbacks. For example, the `config` object would look like:
-
-- `onMoveShouldSetPanResponder: (e, gestureState) => {...}`
-- `onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}`
-- `onStartShouldSetPanResponder: (e, gestureState) => {...}`
-- `onStartShouldSetPanResponderCapture: (e, gestureState) => {...}`
-- `onPanResponderReject: (e, gestureState) => {...}`
-- `onPanResponderGrant: (e, gestureState) => {...}`
-- `onPanResponderStart: (e, gestureState) => {...}`
-- `onPanResponderEnd: (e, gestureState) => {...}`
-- `onPanResponderRelease: (e, gestureState) => {...}`
-- `onPanResponderMove: (e, gestureState) => {...}`
-- `onPanResponderTerminate: (e, gestureState) => {...}`
-- `onPanResponderTerminationRequest: (e, gestureState) => {...}`
-- `onShouldBlockNativeResponder: (e, gestureState) => {...}`
-
-In general, for events that have capture equivalents, we update the gestureState once in the capture phase and can use it in the bubble phase as well.
-
-Be careful with `onStartShould*` callbacks. They only reflect updated `gestureState` for start/end events that bubble/capture to the Node. Once the node is the responder, you can rely on every start/end event being processed by the gesture and `gestureState` being updated accordingly. (numberActiveTouches) may not be totally accurate unless you are the responder.
+---
+id: panresponder
+title: PanResponder
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+`PanResponder` reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize basic multi-touch gestures.
+
+By default, `PanResponder` holds an `InteractionManager` handle to block long-running JS events from interrupting active gestures.
+
+It provides a predictable wrapper of the responder handlers provided by the [gesture responder system](gesture-responder-system.md). For each handler, it provides a new `gestureState` object alongside the native event object:
+
+```
+onPanResponderMove: (event, gestureState) => {}
+```
+
+A native event is a synthetic touch event with form of [PressEvent](pressevent).
+
+A `gestureState` object has the following:
+
+- `stateID` - ID of the gestureState- persisted as long as there's at least one touch on screen
+- `moveX` - the latest screen coordinates of the recently-moved touch
+- `moveY` - the latest screen coordinates of the recently-moved touch
+- `x0` - the screen coordinates of the responder grant
+- `y0` - the screen coordinates of the responder grant
+- `dx` - accumulated distance of the gesture since the touch started
+- `dy` - accumulated distance of the gesture since the touch started
+- `vx` - current velocity of the gesture
+- `vy` - current velocity of the gesture
+- `numberActiveTouches` - Number of touches currently on screen
+
+## Usage Pattern
+
+```tsx
+const ExampleComponent = () => {
+  const panResponder = useRef(
+    PanResponder.create({
+      // Ask to be the responder:
+      onStartShouldSetPanResponder: (evt, gestureState) => true,
+      onStartShouldSetPanResponderCapture: (evt, gestureState) =>
+        true,
+      onMoveShouldSetPanResponder: (evt, gestureState) => true,
+      onMoveShouldSetPanResponderCapture: (evt, gestureState) =>
+        true,
+
+      onPanResponderGrant: (evt, gestureState) => {
+        // The gesture has started. Show visual feedback so the user knows
+        // what is happening!
+        // gestureState.d{x,y} will be set to zero now
+      },
+      onPanResponderMove: (evt, gestureState) => {
+        // The most recent move distance is gestureState.move{X,Y}
+        // The accumulated gesture distance since becoming responder is
+        // gestureState.d{x,y}
+      },
+      onPanResponderTerminationRequest: (evt, gestureState) =>
+        true,
+      onPanResponderRelease: (evt, gestureState) => {
+        // The user has released all touches while this view is the
+        // responder. This typically means a gesture has succeeded
+      },
+      onPanResponderTerminate: (evt, gestureState) => {
+        // Another component has become the responder, so this gesture
+        // should be cancelled
+      },
+      onShouldBlockNativeResponder: (evt, gestureState) => {
+        // Returns whether this component should block native components from becoming the JS
+        // responder. Returns true by default. Is currently only supported on android.
+        return true;
+      },
+    }),
+  ).current;
+
+  return <View {...panResponder.panHandlers} />;
+};
+```
+
+## Example
+
+`PanResponder` works with `Animated` API to help build complex gestures in the UI. The following example contains an animated `View` component which can be dragged freely across the screen
+
+```SnackPlayer name=PanResponder
+import {useRef} from 'react';
+import {Animated, View, StyleSheet, PanResponder, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const pan = useRef(new Animated.ValueXY()).current;
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
+      onPanResponderRelease: () => {
+        pan.extractOffset();
+      },
+    }),
+  ).current;
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.titleText}>Drag this box!</Text>
+        <Animated.View
+          style={{
+            transform: [{translateX: pan.x}, {translateY: pan.y}],
+          }}
+          {...panResponder.panHandlers}>
+          <View style={styles.box} />
+        </Animated.View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  titleText: {
+    fontSize: 14,
+    lineHeight: 24,
+    fontWeight: 'bold',
+  },
+  box: {
+    height: 150,
+    width: 150,
+    backgroundColor: 'blue',
+    borderRadius: 5,
+  },
+});
+
+export default App;
+```
+
+Try the [PanResponder example in RNTester](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js).
+
+---
+
+# Reference
+
+## Methods
+
+### `create()`
+
+```tsx
+static create(config: PanResponderCallbacks): PanResponderInstance;
+```
+
+**Parameters:**
+
+| Name                                                        | Type   | Description |
+| ----------------------------------------------------------- | ------ | ----------- |
+| config <div className="label basic required">Required</div> | object | Refer below |
+
+The `config` object provides enhanced versions of all of the responder callbacks that provide not only the [`PressEvent`](pressevent), but also the `PanResponder` gesture state, by replacing the word `Responder` with `PanResponder` in each of the typical `onResponder*` callbacks. For example, the `config` object would look like:
+
+- `onMoveShouldSetPanResponder: (e, gestureState) => {...}`
+- `onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}`
+- `onStartShouldSetPanResponder: (e, gestureState) => {...}`
+- `onStartShouldSetPanResponderCapture: (e, gestureState) => {...}`
+- `onPanResponderReject: (e, gestureState) => {...}`
+- `onPanResponderGrant: (e, gestureState) => {...}`
+- `onPanResponderStart: (e, gestureState) => {...}`
+- `onPanResponderEnd: (e, gestureState) => {...}`
+- `onPanResponderRelease: (e, gestureState) => {...}`
+- `onPanResponderMove: (e, gestureState) => {...}`
+- `onPanResponderTerminate: (e, gestureState) => {...}`
+- `onPanResponderTerminationRequest: (e, gestureState) => {...}`
+- `onShouldBlockNativeResponder: (e, gestureState) => {...}`
+
+In general, for events that have capture equivalents, we update the gestureState once in the capture phase and can use it in the bubble phase as well.
+
+Be careful with `onStartShould*` callbacks. They only reflect updated `gestureState` for start/end events that bubble/capture to the Node. Once the node is the responder, you can rely on every start/end event being processed by the gesture and `gestureState` being updated accordingly. (numberActiveTouches) may not be totally accurate unless you are the responder.
diff --git a/website/versioned_docs/version-0.84/permissionsandroid.md b/website/versioned_docs/version-0.84/permissionsandroid.md
index ec1f486ba37..4e93941ad1f 100644
--- a/website/versioned_docs/version-0.84/permissionsandroid.md
+++ b/website/versioned_docs/version-0.84/permissionsandroid.md
@@ -17,7 +17,6 @@ If a user has previously turned off a permission that you prompt for, the OS wil
 ### Example
 
 ```SnackPlayer name=PermissionsAndroid%20Example&supportedPlatforms=android
-import React from 'react';
 import {
   Button,
   PermissionsAndroid,
diff --git a/website/versioned_docs/version-0.84/pixelratio.md b/website/versioned_docs/version-0.84/pixelratio.md
index 64e4eded49f..f298a8e73ab 100644
--- a/website/versioned_docs/version-0.84/pixelratio.md
+++ b/website/versioned_docs/version-0.84/pixelratio.md
@@ -30,7 +30,6 @@ In React Native, everything in JavaScript and within the layout engine works wit
 ## Example
 
 ```SnackPlayer name=PixelRatio%20Example
-import React from 'react';
 import {
   Image,
   PixelRatio,
diff --git a/website/versioned_docs/version-0.84/platform.md b/website/versioned_docs/version-0.84/platform.md
index 79f435ccd56..b8642658a84 100644
--- a/website/versioned_docs/version-0.84/platform.md
+++ b/website/versioned_docs/version-0.84/platform.md
@@ -6,7 +6,6 @@ title: Platform
 ## Example
 
 ```SnackPlayer name=Platform%20API%20Example&supportedPlatforms=ios,android
-import React from 'react';
 import {Platform, StyleSheet, Text, ScrollView} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.84/platformcolor.md b/website/versioned_docs/version-0.84/platformcolor.md
index 17371f76c26..040c6d2c18a 100644
--- a/website/versioned_docs/version-0.84/platformcolor.md
+++ b/website/versioned_docs/version-0.84/platformcolor.md
@@ -46,7 +46,6 @@ If you’re familiar with design systems, another way of thinking about this is
 ## Example
 
 ```SnackPlayer name=PlatformColor%20Example&supportedPlatforms=android,ios
-import React from 'react';
 import {Platform, PlatformColor, StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.84/pressable.md b/website/versioned_docs/version-0.84/pressable.md
index 590c77db974..3415bb2eb0a 100644
--- a/website/versioned_docs/version-0.84/pressable.md
+++ b/website/versioned_docs/version-0.84/pressable.md
@@ -1,268 +1,268 @@
----
-id: pressable
-title: Pressable
----
-
-Pressable is a Core Component wrapper that can detect various stages of press interactions on any of its defined children.
-
-```tsx
-<Pressable onPress={onPressFunction}>
-  <Text>I'm pressable!</Text>
-</Pressable>
-```
-
-## How it works
-
-On an element wrapped by `Pressable`:
-
-- [`onPressIn`](#onpressin) is called when a press is activated.
-- [`onPressOut`](#onpressout) is called when the press gesture is deactivated.
-
-After pressing [`onPressIn`](#onpressin), one of two things will happen:
-
-1. The person will remove their finger, triggering [`onPressOut`](#onpressout) followed by [`onPress`](#onpress).
-2. If the person leaves their finger longer than 500 milliseconds before removing it, [`onLongPress`](#onlongpress) is triggered. ([`onPressOut`](#onpressout) will still fire when they remove their finger.)
-
-<img src="/docs/assets/d_pressable_pressing.svg" width="1000" alt="Diagram of the onPress events in sequence." />
-
-Fingers are not the most precise instruments, and it is common for users to accidentally activate the wrong element or miss the activation area. To help, `Pressable` has an optional `HitRect` you can use to define how far a touch can register away from the wrapped element. Presses can start anywhere within a `HitRect`.
-
-`PressRect` allows presses to move beyond the element and its `HitRect` while maintaining activation and being eligible for a "press"—think of sliding your finger slowly away from a button you're pressing down on.
-
-:::note
-The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
-:::
-
-<figure>
-  <img src="/docs/assets/d_pressable_anatomy.svg" width="1000" alt="Diagram of HitRect and PressRect and how they work." />
-  <figcaption>
-    You can set <code>HitRect</code> with <code>hitSlop</code> and set <code>PressRect</code> with <code>pressRetentionOffset</code>.
-  </figcaption>
-</figure>
-
-:::info
-`Pressable` uses React Native's `Pressability` API. For more information around the state machine flow of Pressability and how it works, check out the implementation for [Pressability](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Pressability/Pressability.js#L350).
-:::
-
-## Example
-
-```SnackPlayer name=Pressable
-import React, {useState} from 'react';
-import {Pressable, StyleSheet, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [timesPressed, setTimesPressed] = useState(0);
-
-  let textLog = '';
-  if (timesPressed > 1) {
-    textLog = timesPressed + 'x onPress';
-  } else if (timesPressed > 0) {
-    textLog = 'onPress';
-  }
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Pressable
-          onPress={() => {
-            setTimesPressed(current => current + 1);
-          }}
-          style={({pressed}) => [
-            {
-              backgroundColor: pressed ? 'rgb(210, 230, 255)' : 'white',
-            },
-            styles.wrapperCustom,
-          ]}>
-          {({pressed}) => (
-            <Text style={styles.text}>{pressed ? 'Pressed!' : 'Press Me'}</Text>
-          )}
-        </Pressable>
-        <View style={styles.logBox}>
-          <Text testID="pressable_press_console">{textLog}</Text>
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  text: {
-    fontSize: 16,
-  },
-  wrapperCustom: {
-    borderRadius: 8,
-    padding: 6,
-  },
-  logBox: {
-    padding: 20,
-    margin: 10,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: '#f0f0f0',
-    backgroundColor: '#f9f9f9',
-  },
-});
-
-export default App;
-```
-
-## Props
-
-### `android_disableSound` <div className="label android">Android</div>
-
-If true, doesn't play Android system sound on press.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
-### `android_ripple` <div className="label android">Android</div>
-
-Enables the Android ripple effect and configures its properties.
-
-| Type                                   |
-| -------------------------------------- |
-| [RippleConfig](pressable#rippleconfig) |
-
-### `children`
-
-Either children or a function that receives a boolean reflecting whether the component is currently pressed.
-
-| Type                     |
-| ------------------------ |
-| [React Node](react-node) |
-
-### `unstable_pressDelay`
-
-Duration (in milliseconds) to wait after press down before calling `onPressIn`.
-
-| Type   |
-| ------ |
-| number |
-
-### `delayLongPress`
-
-Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
-
-| Type   | Default |
-| ------ | ------- |
-| number | `500`   |
-
-### `disabled`
-
-Whether the press behavior is disabled.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
-### `hitSlop`
-
-Sets additional distance outside of element in which a press can be detected.
-
-| Type                   |
-| ---------------------- |
-| [Rect](rect) or number |
-
-### `onHoverIn`
-
-Called when the hover is activated to provide visual feedback.
-
-| Type                                                                                                      |
-| --------------------------------------------------------------------------------------------------------- |
-| `md ({ nativeEvent: [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) }) => void` |
-
-### `onHoverOut`
-
-Called when the hover is deactivated to undo visual feedback.
-
-| Type                                                                                                      |
-| --------------------------------------------------------------------------------------------------------- |
-| `md ({ nativeEvent: [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) }) => void` |
-
-### `onLongPress`
-
-Called if the time after `onPressIn` lasts longer than 500 milliseconds. This time period can be customized with [`delayLongPress`](#delaylongpress).
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
-### `onPress`
-
-Called after `onPressOut`.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
-### `onPressIn`
-
-Called immediately when a touch is engaged, before `onPressOut` and `onPress`.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
-### `onPressMove`
-
-Called when the press location moves.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
-### `onPressOut`
-
-Called when a touch is released.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
-### `pressRetentionOffset`
-
-Additional distance outside of this view in which a touch is considered a press before `onPressOut` is triggered.
-
-| Type                   | Default                                      |
-| ---------------------- | -------------------------------------------- |
-| [Rect](rect) or number | `{bottom: 30, left: 20, right: 20, top: 20}` |
-
-### `style`
-
-Either view styles or a function that receives a boolean reflecting whether the component is currently pressed and returns view styles.
-
-| Type                                                                                            |
-| ----------------------------------------------------------------------------------------------- |
-| [View Style](view-style-props) or `md ({ pressed: boolean }) => [View Style](view-style-props)` |
-
-### `testOnly_pressed`
-
-Used only for documentation or testing (e.g. snapshot testing).
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
-## Type Definitions
-
-### RippleConfig
-
-Ripple effect configuration for the `android_ripple` property.
-
-| Type   |
-| ------ |
-| object |
-
-**Properties:**
-
-| Name       | Type            | Required | Description                                                                                                                                                                                                                                                  |
-| ---------- | --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| color      | [color](colors) | No       | Defines the color of the ripple effect.                                                                                                                                                                                                                      |
-| borderless | boolean         | No       | Defines if ripple effect should not include border.                                                                                                                                                                                                          |
-| radius     | number          | No       | Defines the radius of the ripple effect.                                                                                                                                                                                                                     |
-| foreground | boolean         | No       | Set to true to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them. |
+---
+id: pressable
+title: Pressable
+---
+
+Pressable is a Core Component wrapper that can detect various stages of press interactions on any of its defined children.
+
+```tsx
+<Pressable onPress={onPressFunction}>
+  <Text>I'm pressable!</Text>
+</Pressable>
+```
+
+## How it works
+
+On an element wrapped by `Pressable`:
+
+- [`onPressIn`](#onpressin) is called when a press is activated.
+- [`onPressOut`](#onpressout) is called when the press gesture is deactivated.
+
+After pressing [`onPressIn`](#onpressin), one of two things will happen:
+
+1. The person will remove their finger, triggering [`onPressOut`](#onpressout) followed by [`onPress`](#onpress).
+2. If the person leaves their finger longer than 500 milliseconds before removing it, [`onLongPress`](#onlongpress) is triggered. ([`onPressOut`](#onpressout) will still fire when they remove their finger.)
+
+<img src="/docs/assets/d_pressable_pressing.svg" width="1000" alt="Diagram of the onPress events in sequence." />
+
+Fingers are not the most precise instruments, and it is common for users to accidentally activate the wrong element or miss the activation area. To help, `Pressable` has an optional `HitRect` you can use to define how far a touch can register away from the wrapped element. Presses can start anywhere within a `HitRect`.
+
+`PressRect` allows presses to move beyond the element and its `HitRect` while maintaining activation and being eligible for a "press"—think of sliding your finger slowly away from a button you're pressing down on.
+
+:::note
+The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
+:::
+
+<figure>
+  <img src="/docs/assets/d_pressable_anatomy.svg" width="1000" alt="Diagram of HitRect and PressRect and how they work." />
+  <figcaption>
+    You can set <code>HitRect</code> with <code>hitSlop</code> and set <code>PressRect</code> with <code>pressRetentionOffset</code>.
+  </figcaption>
+</figure>
+
+:::info
+`Pressable` uses React Native's `Pressability` API. For more information around the state machine flow of Pressability and how it works, check out the implementation for [Pressability](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Pressability/Pressability.js#L350).
+:::
+
+## Example
+
+```SnackPlayer name=Pressable
+import {useState} from 'react';
+import {Pressable, StyleSheet, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [timesPressed, setTimesPressed] = useState(0);
+
+  let textLog = '';
+  if (timesPressed > 1) {
+    textLog = timesPressed + 'x onPress';
+  } else if (timesPressed > 0) {
+    textLog = 'onPress';
+  }
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Pressable
+          onPress={() => {
+            setTimesPressed(current => current + 1);
+          }}
+          style={({pressed}) => [
+            {
+              backgroundColor: pressed ? 'rgb(210, 230, 255)' : 'white',
+            },
+            styles.wrapperCustom,
+          ]}>
+          {({pressed}) => (
+            <Text style={styles.text}>{pressed ? 'Pressed!' : 'Press Me'}</Text>
+          )}
+        </Pressable>
+        <View style={styles.logBox}>
+          <Text testID="pressable_press_console">{textLog}</Text>
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 16,
+  },
+  wrapperCustom: {
+    borderRadius: 8,
+    padding: 6,
+  },
+  logBox: {
+    padding: 20,
+    margin: 10,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: '#f0f0f0',
+    backgroundColor: '#f9f9f9',
+  },
+});
+
+export default App;
+```
+
+## Props
+
+### `android_disableSound` <div className="label android">Android</div>
+
+If true, doesn't play Android system sound on press.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+### `android_ripple` <div className="label android">Android</div>
+
+Enables the Android ripple effect and configures its properties.
+
+| Type                                   |
+| -------------------------------------- |
+| [RippleConfig](pressable#rippleconfig) |
+
+### `children`
+
+Either children or a function that receives a boolean reflecting whether the component is currently pressed.
+
+| Type                     |
+| ------------------------ |
+| [React Node](react-node) |
+
+### `unstable_pressDelay`
+
+Duration (in milliseconds) to wait after press down before calling `onPressIn`.
+
+| Type   |
+| ------ |
+| number |
+
+### `delayLongPress`
+
+Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
+
+| Type   | Default |
+| ------ | ------- |
+| number | `500`   |
+
+### `disabled`
+
+Whether the press behavior is disabled.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+### `hitSlop`
+
+Sets additional distance outside of element in which a press can be detected.
+
+| Type                   |
+| ---------------------- |
+| [Rect](rect) or number |
+
+### `onHoverIn`
+
+Called when the hover is activated to provide visual feedback.
+
+| Type                                                                                                      |
+| --------------------------------------------------------------------------------------------------------- |
+| `md ({ nativeEvent: [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) }) => void` |
+
+### `onHoverOut`
+
+Called when the hover is deactivated to undo visual feedback.
+
+| Type                                                                                                      |
+| --------------------------------------------------------------------------------------------------------- |
+| `md ({ nativeEvent: [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) }) => void` |
+
+### `onLongPress`
+
+Called if the time after `onPressIn` lasts longer than 500 milliseconds. This time period can be customized with [`delayLongPress`](#delaylongpress).
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+### `onPress`
+
+Called after `onPressOut`.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+### `onPressIn`
+
+Called immediately when a touch is engaged, before `onPressOut` and `onPress`.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+### `onPressMove`
+
+Called when the press location moves.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+### `onPressOut`
+
+Called when a touch is released.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+### `pressRetentionOffset`
+
+Additional distance outside of this view in which a touch is considered a press before `onPressOut` is triggered.
+
+| Type                   | Default                                      |
+| ---------------------- | -------------------------------------------- |
+| [Rect](rect) or number | `{bottom: 30, left: 20, right: 20, top: 20}` |
+
+### `style`
+
+Either view styles or a function that receives a boolean reflecting whether the component is currently pressed and returns view styles.
+
+| Type                                                                                            |
+| ----------------------------------------------------------------------------------------------- |
+| [View Style](view-style-props) or `md ({ pressed: boolean }) => [View Style](view-style-props)` |
+
+### `testOnly_pressed`
+
+Used only for documentation or testing (e.g. snapshot testing).
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+## Type Definitions
+
+### RippleConfig
+
+Ripple effect configuration for the `android_ripple` property.
+
+| Type   |
+| ------ |
+| object |
+
+**Properties:**
+
+| Name       | Type            | Required | Description                                                                                                                                                                                                                                                  |
+| ---------- | --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| color      | [color](colors) | No       | Defines the color of the ripple effect.                                                                                                                                                                                                                      |
+| borderless | boolean         | No       | Defines if ripple effect should not include border.                                                                                                                                                                                                          |
+| radius     | number          | No       | Defines the radius of the ripple effect.                                                                                                                                                                                                                     |
+| foreground | boolean         | No       | Set to true to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them. |
diff --git a/website/versioned_docs/version-0.84/progressbarandroid.md b/website/versioned_docs/version-0.84/progressbarandroid.md
index d26fb2038d6..a08adfae637 100644
--- a/website/versioned_docs/version-0.84/progressbarandroid.md
+++ b/website/versioned_docs/version-0.84/progressbarandroid.md
@@ -12,7 +12,6 @@ Android-only React component used to indicate that the app is loading or there i
 ### Example
 
 ```SnackPlayer name=ProgressBarAndroid&supportedPlatforms=android
-import React from 'react';
 import {View, StyleSheet, ProgressBarAndroid, Text} from 'react-native';
 
 const App = () => {
diff --git a/website/versioned_docs/version-0.84/props.md b/website/versioned_docs/version-0.84/props.md
index 490eb214632..8b24d6dd9f1 100644
--- a/website/versioned_docs/version-0.84/props.md
+++ b/website/versioned_docs/version-0.84/props.md
@@ -10,7 +10,6 @@ Most components can be customized when they are created, with different paramete
 For example, one basic React Native component is the `Image`. When you create an image, you can use a prop named `source` to control what image it shows.
 
 ```SnackPlayer name=Props
-import React from 'react';
 import {Image} from 'react-native';
 
 const Bananas = () => {
@@ -33,7 +32,6 @@ Your own components can also use `props`. This lets you make a single component
 <TabItem value="javascript">
 
 ```SnackPlayer name=Props&ext=js
-import React from 'react';
 import {Text, View} from 'react-native';
 
 const Greeting = props => {
@@ -61,7 +59,6 @@ export default LotsOfGreetings;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Props&ext=tsx
-import React from 'react';
 import {Text, View} from 'react-native';
 
 type GreetingProps = {
diff --git a/website/versioned_docs/version-0.84/refreshcontrol.md b/website/versioned_docs/version-0.84/refreshcontrol.md
index 7f7faab6744..f65d65a0036 100644
--- a/website/versioned_docs/version-0.84/refreshcontrol.md
+++ b/website/versioned_docs/version-0.84/refreshcontrol.md
@@ -1,167 +1,167 @@
----
-id: refreshcontrol
-title: RefreshControl
----
-
-This component is used inside a ScrollView or ListView to add pull to refresh functionality. When the ScrollView is at `scrollY: 0`, swiping down triggers an `onRefresh` event.
-
-## Example
-
-```SnackPlayer name=RefreshControl&supportedPlatforms=ios,android
-import React from 'react';
-import {RefreshControl, ScrollView, StyleSheet, Text} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [refreshing, setRefreshing] = React.useState(false);
-
-  const onRefresh = React.useCallback(() => {
-    setRefreshing(true);
-    setTimeout(() => {
-      setRefreshing(false);
-    }, 2000);
-  }, []);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <ScrollView
-          contentContainerStyle={styles.scrollView}
-          refreshControl={
-            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-          }>
-          <Text>Pull down to see RefreshControl indicator</Text>
-        </ScrollView>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  scrollView: {
-    flex: 1,
-    backgroundColor: 'pink',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-
-export default App;
-```
-
-:::note
-`refreshing` is a controlled prop, this is why it needs to be set to `true` in the `onRefresh` function otherwise the refresh indicator will stop immediately.
-:::
-
----
-
-# Reference
-
-## Props
-
-### [View Props](view.md#props)
-
-Inherits [View Props](view.md#props).
-
----
-
-### <div className="label required basic">Required</div>**`refreshing`**
-
-Whether the view should be indicating an active refresh.
-
-| Type    |
-| ------- |
-| boolean |
-
----
-
-### `colors` <div className="label android">Android</div>
-
-The colors (at least one) that will be used to draw the refresh indicator.
-
-| Type                         |
-| ---------------------------- |
-| array of [colors](colors.md) |
-
----
-
-### `enabled` <div className="label android">Android</div>
-
-Whether the pull to refresh functionality is enabled.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `true`  |
-
----
-
-### `onRefresh`
-
-Called when the view starts refreshing.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `progressBackgroundColor` <div className="label android">Android</div>
-
-The background color of the refresh indicator.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `progressViewOffset`
-
-Progress view top offset.
-
-| Type   | Default |
-| ------ | ------- |
-| number | `0`     |
-
----
-
-### `size` <div className="label android">Android</div>
-
-Size of the refresh indicator.
-
-| Type                         | Default     |
-| ---------------------------- | ----------- |
-| enum(`'default'`, `'large'`) | `'default'` |
-
----
-
-### `tintColor` <div className="label ios">iOS</div>
-
-The color of the refresh indicator.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `title` <div className="label ios">iOS</div>
-
-The title displayed under the refresh indicator.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `titleColor` <div className="label ios">iOS</div>
-
-The color of the refresh indicator title.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
+---
+id: refreshcontrol
+title: RefreshControl
+---
+
+This component is used inside a ScrollView or ListView to add pull to refresh functionality. When the ScrollView is at `scrollY: 0`, swiping down triggers an `onRefresh` event.
+
+## Example
+
+```SnackPlayer name=RefreshControl&supportedPlatforms=ios,android
+import {useCallback, useState} from 'react';
+import {RefreshControl, ScrollView, StyleSheet, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [refreshing, setRefreshing] = useState(false);
+
+  const onRefresh = useCallback(() => {
+    setRefreshing(true);
+    setTimeout(() => {
+      setRefreshing(false);
+    }, 2000);
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <ScrollView
+          contentContainerStyle={styles.scrollView}
+          refreshControl={
+            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+          }>
+          <Text>Pull down to see RefreshControl indicator</Text>
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollView: {
+    flex: 1,
+    backgroundColor: 'pink',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default App;
+```
+
+:::note
+`refreshing` is a controlled prop, this is why it needs to be set to `true` in the `onRefresh` function otherwise the refresh indicator will stop immediately.
+:::
+
+---
+
+# Reference
+
+## Props
+
+### [View Props](view.md#props)
+
+Inherits [View Props](view.md#props).
+
+---
+
+### <div className="label required basic">Required</div>**`refreshing`**
+
+Whether the view should be indicating an active refresh.
+
+| Type    |
+| ------- |
+| boolean |
+
+---
+
+### `colors` <div className="label android">Android</div>
+
+The colors (at least one) that will be used to draw the refresh indicator.
+
+| Type                         |
+| ---------------------------- |
+| array of [colors](colors.md) |
+
+---
+
+### `enabled` <div className="label android">Android</div>
+
+Whether the pull to refresh functionality is enabled.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `true`  |
+
+---
+
+### `onRefresh`
+
+Called when the view starts refreshing.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `progressBackgroundColor` <div className="label android">Android</div>
+
+The background color of the refresh indicator.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `progressViewOffset`
+
+Progress view top offset.
+
+| Type   | Default |
+| ------ | ------- |
+| number | `0`     |
+
+---
+
+### `size` <div className="label android">Android</div>
+
+Size of the refresh indicator.
+
+| Type                         | Default     |
+| ---------------------------- | ----------- |
+| enum(`'default'`, `'large'`) | `'default'` |
+
+---
+
+### `tintColor` <div className="label ios">iOS</div>
+
+The color of the refresh indicator.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `title` <div className="label ios">iOS</div>
+
+The title displayed under the refresh indicator.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `titleColor` <div className="label ios">iOS</div>
+
+The color of the refresh indicator title.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
diff --git a/website/versioned_docs/version-0.84/safeareaview.md b/website/versioned_docs/version-0.84/safeareaview.md
index 8da4485ff12..1298898b64e 100644
--- a/website/versioned_docs/version-0.84/safeareaview.md
+++ b/website/versioned_docs/version-0.84/safeareaview.md
@@ -16,7 +16,6 @@ The purpose of `SafeAreaView` is to render content within the safe area boundari
 To use, wrap your top level view with a `SafeAreaView` with a `flex: 1` style applied to it. You may also want to use a background color that matches your application's design.
 
 ```SnackPlayer name=SafeAreaView&supportedPlatforms=ios
-import React from 'react';
 import {StyleSheet, Text, SafeAreaView} from 'react-native';
 
 const App = () => {
diff --git a/website/versioned_docs/version-0.84/scrollview.md b/website/versioned_docs/version-0.84/scrollview.md
index 5224d095f94..ad51dcf88d7 100644
--- a/website/versioned_docs/version-0.84/scrollview.md
+++ b/website/versioned_docs/version-0.84/scrollview.md
@@ -22,7 +22,6 @@ This is where `FlatList` comes into play. `FlatList` renders items lazily, when
 ## Example
 
 ```SnackPlayer name=ScrollView%20Example
-import React from 'react';
 import {StyleSheet, Text, ScrollView, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.84/sectionlist.md b/website/versioned_docs/version-0.84/sectionlist.md
index d0e9519a301..ead40b211b9 100644
--- a/website/versioned_docs/version-0.84/sectionlist.md
+++ b/website/versioned_docs/version-0.84/sectionlist.md
@@ -21,7 +21,6 @@ If you don't need section support and want a simpler interface, use [`<FlatList>
 ## Example
 
 ```SnackPlayer name=SectionList%20Example
-import React from 'react';
 import {StyleSheet, Text, View, SectionList, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.84/settings.md b/website/versioned_docs/version-0.84/settings.md
index 01c0533d813..af0136d8257 100644
--- a/website/versioned_docs/version-0.84/settings.md
+++ b/website/versioned_docs/version-0.84/settings.md
@@ -1,103 +1,103 @@
----
-id: settings
-title: Settings
----
-
-`Settings` serves as a wrapper for [`NSUserDefaults`](https://developer.apple.com/documentation/foundation/nsuserdefaults), a persistent key-value store available only on iOS.
-
-## Example
-
-```SnackPlayer name=Settings%20Example&supportedPlatforms=ios
-import React, {useState} from 'react';
-import {Button, Settings, StyleSheet, Text} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [data, setData] = useState(() => Settings.get('data'));
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>Stored value:</Text>
-        <Text style={styles.value}>{data}</Text>
-        <Button
-          onPress={() => {
-            Settings.set({data: 'React'});
-            setData(Settings.get('data'));
-          }}
-          title="Store 'React'"
-        />
-        <Button
-          onPress={() => {
-            Settings.set({data: 'Native'});
-            setData(Settings.get('data'));
-          }}
-          title="Store 'Native'"
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  value: {
-    fontSize: 24,
-    marginVertical: 12,
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Methods
-
-### `clearWatch()`
-
-```tsx
-static clearWatch(watchId: number);
-```
-
-`watchId` is the number returned by `watchKeys()` when the subscription was originally configured.
-
----
-
-### `get()`
-
-```tsx
-static get(key: string): any;
-```
-
-Get the current value for a given `key` in `NSUserDefaults`.
-
----
-
-### `set()`
-
-```tsx
-static set(settings: Record<string, any>);
-```
-
-Set one or more values in `NSUserDefaults`.
-
----
-
-### `watchKeys()`
-
-```tsx
-static watchKeys(keys: string | array<string>, callback: () => void): number;
-```
-
-Subscribe to be notified when the value for any of the keys specified by the `keys` parameter has been changed in `NSUserDefaults`. Returns a `watchId` number that may be used with `clearWatch()` to unsubscribe.
-
-:::note
-`watchKeys()` by design ignores internal `set()` calls and fires callback only on changes preformed outside of React Native code.
-:::
+---
+id: settings
+title: Settings
+---
+
+`Settings` serves as a wrapper for [`NSUserDefaults`](https://developer.apple.com/documentation/foundation/nsuserdefaults), a persistent key-value store available only on iOS.
+
+## Example
+
+```SnackPlayer name=Settings%20Example&supportedPlatforms=ios
+import {useState} from 'react';
+import {Button, Settings, StyleSheet, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [data, setData] = useState(() => Settings.get('data'));
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>Stored value:</Text>
+        <Text style={styles.value}>{data}</Text>
+        <Button
+          onPress={() => {
+            Settings.set({data: 'React'});
+            setData(Settings.get('data'));
+          }}
+          title="Store 'React'"
+        />
+        <Button
+          onPress={() => {
+            Settings.set({data: 'Native'});
+            setData(Settings.get('data'));
+          }}
+          title="Store 'Native'"
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  value: {
+    fontSize: 24,
+    marginVertical: 12,
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `clearWatch()`
+
+```tsx
+static clearWatch(watchId: number);
+```
+
+`watchId` is the number returned by `watchKeys()` when the subscription was originally configured.
+
+---
+
+### `get()`
+
+```tsx
+static get(key: string): any;
+```
+
+Get the current value for a given `key` in `NSUserDefaults`.
+
+---
+
+### `set()`
+
+```tsx
+static set(settings: Record<string, any>);
+```
+
+Set one or more values in `NSUserDefaults`.
+
+---
+
+### `watchKeys()`
+
+```tsx
+static watchKeys(keys: string | array<string>, callback: () => void): number;
+```
+
+Subscribe to be notified when the value for any of the keys specified by the `keys` parameter has been changed in `NSUserDefaults`. Returns a `watchId` number that may be used with `clearWatch()` to unsubscribe.
+
+:::note
+`watchKeys()` by design ignores internal `set()` calls and fires callback only on changes preformed outside of React Native code.
+:::
diff --git a/website/versioned_docs/version-0.84/shadow-props.md b/website/versioned_docs/version-0.84/shadow-props.md
index d5e8a037059..91553622bd3 100644
--- a/website/versioned_docs/version-0.84/shadow-props.md
+++ b/website/versioned_docs/version-0.84/shadow-props.md
@@ -1,285 +1,285 @@
----
-id: shadow-props
-title: Shadow Props
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=js&dependencies=@react-native-community/slider
-import React, {useState} from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-import Slider from '@react-native-community/slider';
-
-const ShadowPropSlider = ({label, value, ...props}) => {
-  return (
-    <>
-      <Text>
-        {label} ({value.toFixed(2)})
-      </Text>
-      <Slider step={1} value={value} {...props} />
-    </>
-  );
-};
-
-const App = () => {
-  const [shadowOffsetWidth, setShadowOffsetWidth] = useState(0);
-  const [shadowOffsetHeight, setShadowOffsetHeight] = useState(0);
-  const [shadowRadius, setShadowRadius] = useState(0);
-  const [shadowOpacity, setShadowOpacity] = useState(0.1);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View
-          style={[
-            styles.square,
-            {
-              shadowOffset: {
-                width: shadowOffsetWidth,
-                height: -shadowOffsetHeight,
-              },
-              shadowOpacity,
-              shadowRadius,
-            },
-          ]}
-        />
-        <View style={styles.controls}>
-          <ShadowPropSlider
-            label="shadowOffset - X"
-            minimumValue={-50}
-            maximumValue={50}
-            value={shadowOffsetWidth}
-            onValueChange={setShadowOffsetWidth}
-          />
-          <ShadowPropSlider
-            label="shadowOffset - Y"
-            minimumValue={-50}
-            maximumValue={50}
-            value={shadowOffsetHeight}
-            onValueChange={setShadowOffsetHeight}
-          />
-          <ShadowPropSlider
-            label="shadowRadius"
-            minimumValue={0}
-            maximumValue={100}
-            value={shadowRadius}
-            onValueChange={setShadowRadius}
-          />
-          <ShadowPropSlider
-            label="shadowOpacity"
-            minimumValue={0}
-            maximumValue={1}
-            step={0.05}
-            value={shadowOpacity}
-            onValueChange={val => setShadowOpacity(val)}
-          />
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'space-around',
-    backgroundColor: '#ecf0f1',
-    padding: 8,
-  },
-  square: {
-    alignSelf: 'center',
-    backgroundColor: 'white',
-    borderRadius: 4,
-    height: 150,
-    shadowColor: 'black',
-    width: 150,
-  },
-  controls: {
-    paddingHorizontal: 12,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=tsx&dependencies=@react-native-community/slider
-import React, {useState} from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-import Slider, {SliderProps} from '@react-native-community/slider';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-type ShadowPropSliderProps = SliderProps & {
-  label: string;
-};
-
-const ShadowPropSlider = ({label, value, ...props}: ShadowPropSliderProps) => {
-  return (
-    <>
-      <Text>
-        {label} ({value?.toFixed(2)})
-      </Text>
-      <Slider step={1} value={value} {...props} />
-    </>
-  );
-};
-
-const App = () => {
-  const [shadowOffsetWidth, setShadowOffsetWidth] = useState(0);
-  const [shadowOffsetHeight, setShadowOffsetHeight] = useState(0);
-  const [shadowRadius, setShadowRadius] = useState(0);
-  const [shadowOpacity, setShadowOpacity] = useState(0.1);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View
-          style={[
-            styles.square,
-            {
-              shadowOffset: {
-                width: shadowOffsetWidth,
-                height: -shadowOffsetHeight,
-              },
-              shadowOpacity,
-              shadowRadius,
-            },
-          ]}
-        />
-        <View style={styles.controls}>
-          <ShadowPropSlider
-            label="shadowOffset - X"
-            minimumValue={-50}
-            maximumValue={50}
-            value={shadowOffsetWidth}
-            onValueChange={setShadowOffsetWidth}
-          />
-          <ShadowPropSlider
-            label="shadowOffset - Y"
-            minimumValue={-50}
-            maximumValue={50}
-            value={shadowOffsetHeight}
-            onValueChange={setShadowOffsetHeight}
-          />
-          <ShadowPropSlider
-            label="shadowRadius"
-            minimumValue={0}
-            maximumValue={100}
-            value={shadowRadius}
-            onValueChange={setShadowRadius}
-          />
-          <ShadowPropSlider
-            label="shadowOpacity"
-            minimumValue={0}
-            maximumValue={1}
-            step={0.05}
-            value={shadowOpacity}
-            onValueChange={val => setShadowOpacity(val)}
-          />
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'space-around',
-    backgroundColor: '#ecf0f1',
-    padding: 8,
-  },
-  square: {
-    alignSelf: 'center',
-    backgroundColor: 'white',
-    borderRadius: 4,
-    height: 150,
-    shadowColor: 'black',
-    width: 150,
-  },
-  controls: {
-    paddingHorizontal: 12,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
----
-
-# Reference
-
-There are 3 sets of shadow APIs in React Native:
-
-- `boxShadow`: A View style prop and a spec-compliant implementation of the [web style prop of the same name](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow).
-- `dropShadow`: A specific filter function available as part of the [`filter`](./view-style-props#filter) View style prop.
-- Various `shadow` props (`shadowColor`, `shadowOffset`, `shadowOpacity`, `shadowRadius`): These map directly to their native counterparts exposed by the platform-level APIs.
-
-The difference between `dropShadow` and `boxShadow` are as follows:
-
-- `dropShadow` exists as part of `filter`, whereas `boxShadow` is a standalone style prop.
-- `dropShadow` is an alpha mask, so only pixels with a positive alpha value will "cast" a shadow. `boxShadow` will cast around the border box of the element no matter it's contents (unless it is inset).
-- `dropShadow` is only available on Android, `boxShadow` is available on iOS and Android.
-- `dropShadow` cannot be inset like `boxShadow`.
-- `dropShadow` does not have the `spreadDistance` argument like `boxShadow`.
-
-Both `boxShadow` and `dropShadow` are generally more capable than the `shadow` props. The `shadow` props, however, map to native platform-level APIs, so if you only need a straightforward shadow these props are recommended. Note that only `shadowColor` works on both Android and iOS, all other `shadow` props only work on iOS.
-
-## Props
-
-### `boxShadow`
-
-See [View Style Props](./view-style-props#boxshadow) for documentation.
-
-### `dropShadow` <div className="label android">Android</div>
-
-See [View Style Props](./view-style-props#filter) for documentation.
-
-### `shadowColor`
-
-Sets the drop shadow color.
-
-This property will only work on Android API 28 and above. For similar functionality on lower Android APIs, use the [`elevation` property](view-style-props#elevation-android).
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `shadowOffset` <div className="label ios">iOS</div>
-
-Sets the drop shadow offset.
-
-| Type                                     |
-| ---------------------------------------- |
-| object: `{width: number,height: number}` |
-
----
-
-### `shadowOpacity` <div className="label ios">iOS</div>
-
-Sets the drop shadow opacity (multiplied by the color's alpha component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `shadowRadius` <div className="label ios">iOS</div>
-
-Sets the drop shadow blur radius.
-
-| Type   |
-| ------ |
-| number |
+---
+id: shadow-props
+title: Shadow Props
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=js&dependencies=@react-native-community/slider
+import {useState} from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+import Slider from '@react-native-community/slider';
+
+const ShadowPropSlider = ({label, value, ...props}) => {
+  return (
+    <>
+      <Text>
+        {label} ({value.toFixed(2)})
+      </Text>
+      <Slider step={1} value={value} {...props} />
+    </>
+  );
+};
+
+const App = () => {
+  const [shadowOffsetWidth, setShadowOffsetWidth] = useState(0);
+  const [shadowOffsetHeight, setShadowOffsetHeight] = useState(0);
+  const [shadowRadius, setShadowRadius] = useState(0);
+  const [shadowOpacity, setShadowOpacity] = useState(0.1);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View
+          style={[
+            styles.square,
+            {
+              shadowOffset: {
+                width: shadowOffsetWidth,
+                height: -shadowOffsetHeight,
+              },
+              shadowOpacity,
+              shadowRadius,
+            },
+          ]}
+        />
+        <View style={styles.controls}>
+          <ShadowPropSlider
+            label="shadowOffset - X"
+            minimumValue={-50}
+            maximumValue={50}
+            value={shadowOffsetWidth}
+            onValueChange={setShadowOffsetWidth}
+          />
+          <ShadowPropSlider
+            label="shadowOffset - Y"
+            minimumValue={-50}
+            maximumValue={50}
+            value={shadowOffsetHeight}
+            onValueChange={setShadowOffsetHeight}
+          />
+          <ShadowPropSlider
+            label="shadowRadius"
+            minimumValue={0}
+            maximumValue={100}
+            value={shadowRadius}
+            onValueChange={setShadowRadius}
+          />
+          <ShadowPropSlider
+            label="shadowOpacity"
+            minimumValue={0}
+            maximumValue={1}
+            step={0.05}
+            value={shadowOpacity}
+            onValueChange={val => setShadowOpacity(val)}
+          />
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'space-around',
+    backgroundColor: '#ecf0f1',
+    padding: 8,
+  },
+  square: {
+    alignSelf: 'center',
+    backgroundColor: 'white',
+    borderRadius: 4,
+    height: 150,
+    shadowColor: 'black',
+    width: 150,
+  },
+  controls: {
+    paddingHorizontal: 12,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=tsx&dependencies=@react-native-community/slider
+import {useState} from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+import Slider, {SliderProps} from '@react-native-community/slider';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+type ShadowPropSliderProps = SliderProps & {
+  label: string;
+};
+
+const ShadowPropSlider = ({label, value, ...props}: ShadowPropSliderProps) => {
+  return (
+    <>
+      <Text>
+        {label} ({value?.toFixed(2)})
+      </Text>
+      <Slider step={1} value={value} {...props} />
+    </>
+  );
+};
+
+const App = () => {
+  const [shadowOffsetWidth, setShadowOffsetWidth] = useState(0);
+  const [shadowOffsetHeight, setShadowOffsetHeight] = useState(0);
+  const [shadowRadius, setShadowRadius] = useState(0);
+  const [shadowOpacity, setShadowOpacity] = useState(0.1);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View
+          style={[
+            styles.square,
+            {
+              shadowOffset: {
+                width: shadowOffsetWidth,
+                height: -shadowOffsetHeight,
+              },
+              shadowOpacity,
+              shadowRadius,
+            },
+          ]}
+        />
+        <View style={styles.controls}>
+          <ShadowPropSlider
+            label="shadowOffset - X"
+            minimumValue={-50}
+            maximumValue={50}
+            value={shadowOffsetWidth}
+            onValueChange={setShadowOffsetWidth}
+          />
+          <ShadowPropSlider
+            label="shadowOffset - Y"
+            minimumValue={-50}
+            maximumValue={50}
+            value={shadowOffsetHeight}
+            onValueChange={setShadowOffsetHeight}
+          />
+          <ShadowPropSlider
+            label="shadowRadius"
+            minimumValue={0}
+            maximumValue={100}
+            value={shadowRadius}
+            onValueChange={setShadowRadius}
+          />
+          <ShadowPropSlider
+            label="shadowOpacity"
+            minimumValue={0}
+            maximumValue={1}
+            step={0.05}
+            value={shadowOpacity}
+            onValueChange={val => setShadowOpacity(val)}
+          />
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'space-around',
+    backgroundColor: '#ecf0f1',
+    padding: 8,
+  },
+  square: {
+    alignSelf: 'center',
+    backgroundColor: 'white',
+    borderRadius: 4,
+    height: 150,
+    shadowColor: 'black',
+    width: 150,
+  },
+  controls: {
+    paddingHorizontal: 12,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+---
+
+# Reference
+
+There are 3 sets of shadow APIs in React Native:
+
+- `boxShadow`: A View style prop and a spec-compliant implementation of the [web style prop of the same name](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow).
+- `dropShadow`: A specific filter function available as part of the [`filter`](./view-style-props#filter) View style prop.
+- Various `shadow` props (`shadowColor`, `shadowOffset`, `shadowOpacity`, `shadowRadius`): These map directly to their native counterparts exposed by the platform-level APIs.
+
+The difference between `dropShadow` and `boxShadow` are as follows:
+
+- `dropShadow` exists as part of `filter`, whereas `boxShadow` is a standalone style prop.
+- `dropShadow` is an alpha mask, so only pixels with a positive alpha value will "cast" a shadow. `boxShadow` will cast around the border box of the element no matter it's contents (unless it is inset).
+- `dropShadow` is only available on Android, `boxShadow` is available on iOS and Android.
+- `dropShadow` cannot be inset like `boxShadow`.
+- `dropShadow` does not have the `spreadDistance` argument like `boxShadow`.
+
+Both `boxShadow` and `dropShadow` are generally more capable than the `shadow` props. The `shadow` props, however, map to native platform-level APIs, so if you only need a straightforward shadow these props are recommended. Note that only `shadowColor` works on both Android and iOS, all other `shadow` props only work on iOS.
+
+## Props
+
+### `boxShadow`
+
+See [View Style Props](./view-style-props#boxshadow) for documentation.
+
+### `dropShadow` <div className="label android">Android</div>
+
+See [View Style Props](./view-style-props#filter) for documentation.
+
+### `shadowColor`
+
+Sets the drop shadow color.
+
+This property will only work on Android API 28 and above. For similar functionality on lower Android APIs, use the [`elevation` property](view-style-props#elevation-android).
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `shadowOffset` <div className="label ios">iOS</div>
+
+Sets the drop shadow offset.
+
+| Type                                     |
+| ---------------------------------------- |
+| object: `{width: number,height: number}` |
+
+---
+
+### `shadowOpacity` <div className="label ios">iOS</div>
+
+Sets the drop shadow opacity (multiplied by the color's alpha component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `shadowRadius` <div className="label ios">iOS</div>
+
+Sets the drop shadow blur radius.
+
+| Type   |
+| ------ |
+| number |
diff --git a/website/versioned_docs/version-0.84/share.md b/website/versioned_docs/version-0.84/share.md
index 1fc5823361f..46d0f858435 100644
--- a/website/versioned_docs/version-0.84/share.md
+++ b/website/versioned_docs/version-0.84/share.md
@@ -11,7 +11,6 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con
 <TabItem value="javascript">
 
 ```SnackPlayer name=Example&supportedPlatforms=ios,android&ext=js
-import React from 'react';
 import {Alert, Share, Button} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -51,7 +50,6 @@ export default ShareExample;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Example&supportedPlatforms=ios,android&ext=tsx
-import React from 'react';
 import {Alert, Share, Button} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.84/state.md b/website/versioned_docs/version-0.84/state.md
index bc162f44b40..ebf3ec14336 100644
--- a/website/versioned_docs/version-0.84/state.md
+++ b/website/versioned_docs/version-0.84/state.md
@@ -1,103 +1,103 @@
----
-id: state
-title: State
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-There are two types of data that control a component: `props` and `state`. `props` are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use `state`.
-
-In general, you should initialize `state` in the constructor, and then call `setState` when you want to change it.
-
-For example, let's say we want to make text that blinks all the time. The text itself gets set once when the blinking component gets created, so the text itself is a `prop`. The "whether the text is currently on or off" changes over time, so that should be kept in `state`.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=State&ext=js
-import React, {useState, useEffect} from 'react';
-import {Text, View} from 'react-native';
-
-const Blink = props => {
-  const [isShowingText, setIsShowingText] = useState(true);
-
-  useEffect(() => {
-    const toggle = setInterval(() => {
-      setIsShowingText(!isShowingText);
-    }, 1000);
-
-    return () => clearInterval(toggle);
-  });
-
-  if (!isShowingText) {
-    return null;
-  }
-
-  return <Text>{props.text}</Text>;
-};
-
-const BlinkApp = () => {
-  return (
-    <View style={{marginTop: 50}}>
-      <Blink text="I love to blink" />
-      <Blink text="Yes blinking is so great" />
-      <Blink text="Why did they ever take this out of HTML" />
-      <Blink text="Look at me look at me look at me" />
-    </View>
-  );
-};
-
-export default BlinkApp;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=State&ext=tsx
-import React, {useState, useEffect} from 'react';
-import {Text, View} from 'react-native';
-
-type BlinkProps = {
-  text: string;
-};
-
-const Blink = (props: BlinkProps) => {
-  const [isShowingText, setIsShowingText] = useState(true);
-
-  useEffect(() => {
-    const toggle = setInterval(() => {
-      setIsShowingText(!isShowingText);
-    }, 1000);
-
-    return () => clearInterval(toggle);
-  });
-
-  if (!isShowingText) {
-    return null;
-  }
-
-  return <Text>{props.text}</Text>;
-};
-
-const BlinkApp = () => {
-  return (
-    <View style={{marginTop: 50}}>
-      <Blink text="I love to blink" />
-      <Blink text="Yes blinking is so great" />
-      <Blink text="Why did they ever take this out of HTML" />
-      <Blink text="Look at me look at me look at me" />
-    </View>
-  );
-};
-
-export default BlinkApp;
-```
-
-</TabItem>
-</Tabs>
-
-In a real application, you probably won't be setting state with a timer. You might set state when you have new data from the server, or from user input. You can also use a state container like [Redux](https://redux.js.org/) or [MobX](https://mobx.js.org/) to control your data flow. In that case you would use Redux or MobX to modify your state rather than calling `setState` directly.
-
-When setState is called, BlinkApp will re-render its Component. By calling setState within the Timer, the component will re-render every time the Timer ticks.
-
-State works the same way as it does in React, so for more details on handling state, you can look at the [React.Component API](https://react.dev/reference/react/Component#setstate). At this point, you may have noticed that most of our examples use the default text color. To customize the text color, you will have to [learn about Style](style.md).
+---
+id: state
+title: State
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+There are two types of data that control a component: `props` and `state`. `props` are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use `state`.
+
+In general, you should initialize `state` in the constructor, and then call `setState` when you want to change it.
+
+For example, let's say we want to make text that blinks all the time. The text itself gets set once when the blinking component gets created, so the text itself is a `prop`. The "whether the text is currently on or off" changes over time, so that should be kept in `state`.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=State&ext=js
+import {useState, useEffect} from 'react';
+import {Text, View} from 'react-native';
+
+const Blink = props => {
+  const [isShowingText, setIsShowingText] = useState(true);
+
+  useEffect(() => {
+    const toggle = setInterval(() => {
+      setIsShowingText(!isShowingText);
+    }, 1000);
+
+    return () => clearInterval(toggle);
+  });
+
+  if (!isShowingText) {
+    return null;
+  }
+
+  return <Text>{props.text}</Text>;
+};
+
+const BlinkApp = () => {
+  return (
+    <View style={{marginTop: 50}}>
+      <Blink text="I love to blink" />
+      <Blink text="Yes blinking is so great" />
+      <Blink text="Why did they ever take this out of HTML" />
+      <Blink text="Look at me look at me look at me" />
+    </View>
+  );
+};
+
+export default BlinkApp;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=State&ext=tsx
+import {useState, useEffect} from 'react';
+import {Text, View} from 'react-native';
+
+type BlinkProps = {
+  text: string;
+};
+
+const Blink = (props: BlinkProps) => {
+  const [isShowingText, setIsShowingText] = useState(true);
+
+  useEffect(() => {
+    const toggle = setInterval(() => {
+      setIsShowingText(!isShowingText);
+    }, 1000);
+
+    return () => clearInterval(toggle);
+  });
+
+  if (!isShowingText) {
+    return null;
+  }
+
+  return <Text>{props.text}</Text>;
+};
+
+const BlinkApp = () => {
+  return (
+    <View style={{marginTop: 50}}>
+      <Blink text="I love to blink" />
+      <Blink text="Yes blinking is so great" />
+      <Blink text="Why did they ever take this out of HTML" />
+      <Blink text="Look at me look at me look at me" />
+    </View>
+  );
+};
+
+export default BlinkApp;
+```
+
+</TabItem>
+</Tabs>
+
+In a real application, you probably won't be setting state with a timer. You might set state when you have new data from the server, or from user input. You can also use a state container like [Redux](https://redux.js.org/) or [MobX](https://mobx.js.org/) to control your data flow. In that case you would use Redux or MobX to modify your state rather than calling `setState` directly.
+
+When setState is called, BlinkApp will re-render its Component. By calling setState within the Timer, the component will re-render every time the Timer ticks.
+
+State works the same way as it does in React, so for more details on handling state, you can look at the [React.Component API](https://react.dev/reference/react/Component#setstate). At this point, you may have noticed that most of our examples use the default text color. To customize the text color, you will have to [learn about Style](style.md).
diff --git a/website/versioned_docs/version-0.84/statusbar.md b/website/versioned_docs/version-0.84/statusbar.md
index 93810f7b0e0..97686cf2260 100644
--- a/website/versioned_docs/version-0.84/statusbar.md
+++ b/website/versioned_docs/version-0.84/statusbar.md
@@ -1,513 +1,513 @@
----
-id: statusbar
-title: StatusBar
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-Component to control the app's status bar. The status bar is the zone, typically at the top of the screen, that displays the current time, Wi-Fi and cellular network information, battery level and/or other status icons.
-
-### 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.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=StatusBar%20Component%20Example&supportedPlatforms=android,ios&ext=js
-import React, {useState} from 'react';
-import {
-  Button,
-  Platform,
-  StatusBar,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const STYLES = ['default', 'dark-content', 'light-content'];
-const TRANSITIONS = ['fade', 'slide', 'none'];
-
-const App = () => {
-  const [hidden, setHidden] = useState(false);
-  const [statusBarStyle, setStatusBarStyle] = useState(STYLES[0]);
-  const [statusBarTransition, setStatusBarTransition] = useState(
-    TRANSITIONS[0],
-  );
-
-  const changeStatusBarVisibility = () => setHidden(!hidden);
-
-  const changeStatusBarStyle = () => {
-    const styleId = STYLES.indexOf(statusBarStyle) + 1;
-    if (styleId === STYLES.length) {
-      setStatusBarStyle(STYLES[0]);
-    } else {
-      setStatusBarStyle(STYLES[styleId]);
-    }
-  };
-
-  const changeStatusBarTransition = () => {
-    const transition = TRANSITIONS.indexOf(statusBarTransition) + 1;
-    if (transition === TRANSITIONS.length) {
-      setStatusBarTransition(TRANSITIONS[0]);
-    } else {
-      setStatusBarTransition(TRANSITIONS[transition]);
-    }
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <StatusBar
-          animated={true}
-          backgroundColor="#61dafb"
-          barStyle={statusBarStyle}
-          showHideTransition={statusBarTransition}
-          hidden={hidden}
-        />
-        <Text style={styles.textStyle}>
-          StatusBar Visibility:{'\n'}
-          {hidden ? 'Hidden' : 'Visible'}
-        </Text>
-        <Text style={styles.textStyle}>
-          StatusBar Style:{'\n'}
-          {statusBarStyle}
-        </Text>
-        {Platform.OS === 'ios' ? (
-          <Text style={styles.textStyle}>
-            StatusBar Transition:{'\n'}
-            {statusBarTransition}
-          </Text>
-        ) : null}
-        <View style={styles.buttonsContainer}>
-          <Button
-            title="Toggle StatusBar"
-            onPress={changeStatusBarVisibility}
-          />
-          <Button
-            title="Change StatusBar Style"
-            onPress={changeStatusBarStyle}
-          />
-          {Platform.OS === 'ios' ? (
-            <Button
-              title="Change StatusBar Transition"
-              onPress={changeStatusBarTransition}
-            />
-          ) : null}
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    backgroundColor: '#ECF0F1',
-  },
-  buttonsContainer: {
-    padding: 10,
-  },
-  textStyle: {
-    textAlign: 'center',
-    marginBottom: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=StatusBar%20Component%20Example&supportedPlatforms=android,ios&ext=tsx
-import React, {useState} from 'react';
-import {
-  Button,
-  Platform,
-  StatusBar,
-  StyleSheet,
-  Text,
-  View,
-  StatusBarStyle,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const STYLES = ['default', 'dark-content', 'light-content'] as const;
-const TRANSITIONS = ['fade', 'slide', 'none'] as const;
-
-const App = () => {
-  const [hidden, setHidden] = useState(false);
-  const [statusBarStyle, setStatusBarStyle] = useState<StatusBarStyle>(
-    STYLES[0],
-  );
-  const [statusBarTransition, setStatusBarTransition] = useState<
-    'fade' | 'slide' | 'none'
-  >(TRANSITIONS[0]);
-
-  const changeStatusBarVisibility = () => setHidden(!hidden);
-
-  const changeStatusBarStyle = () => {
-    const styleId = STYLES.indexOf(statusBarStyle) + 1;
-    if (styleId === STYLES.length) {
-      setStatusBarStyle(STYLES[0]);
-    } else {
-      setStatusBarStyle(STYLES[styleId]);
-    }
-  };
-
-  const changeStatusBarTransition = () => {
-    const transition = TRANSITIONS.indexOf(statusBarTransition) + 1;
-    if (transition === TRANSITIONS.length) {
-      setStatusBarTransition(TRANSITIONS[0]);
-    } else {
-      setStatusBarTransition(TRANSITIONS[transition]);
-    }
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <StatusBar
-          animated={true}
-          backgroundColor="#61dafb"
-          barStyle={statusBarStyle}
-          showHideTransition={statusBarTransition}
-          hidden={hidden}
-        />
-        <Text style={styles.textStyle}>
-          StatusBar Visibility:{'\n'}
-          {hidden ? 'Hidden' : 'Visible'}
-        </Text>
-        <Text style={styles.textStyle}>
-          StatusBar Style:{'\n'}
-          {statusBarStyle}
-        </Text>
-        {Platform.OS === 'ios' ? (
-          <Text style={styles.textStyle}>
-            StatusBar Transition:{'\n'}
-            {statusBarTransition}
-          </Text>
-        ) : null}
-        <View style={styles.buttonsContainer}>
-          <Button
-            title="Toggle StatusBar"
-            onPress={changeStatusBarVisibility}
-          />
-          <Button
-            title="Change StatusBar Style"
-            onPress={changeStatusBarStyle}
-          />
-          {Platform.OS === 'ios' ? (
-            <Button
-              title="Change StatusBar Transition"
-              onPress={changeStatusBarTransition}
-            />
-          ) : null}
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    backgroundColor: '#ECF0F1',
-  },
-  buttonsContainer: {
-    padding: 10,
-  },
-  textStyle: {
-    textAlign: 'center',
-    marginBottom: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### 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.
-
----
-
-# Reference
-
-## Constants
-
-### `currentHeight` <div className="label android">Android</div>
-
-The height of the status bar, which includes the notch height, if present.
-
----
-
-## Props
-
-### `animated`
-
-If the transition between status bar property changes should be animated. Supported for `backgroundColor`, `barStyle` and `hidden` properties.
-
-| Type    | Required | Default |
-| ------- | -------- | ------- |
-| boolean | No       | `false` |
-
----
-
-### `backgroundColor` <div className="label android">Android</div>
-
-The background color of the status bar.
-
-:::warning
-Due to edge-to-edge enforcement introduced in Android 15, setting background color of the status bar is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
-:::
-
-| Type            | Required | Default                                                                |
-| --------------- | -------- | ---------------------------------------------------------------------- |
-| [color](colors) | No       | default system StatusBar background color, or `'black'` if not defined |
-
----
-
-### `barStyle`
-
-Sets the color of the status bar text.
-
-On Android, this will only have an impact on API versions 23 and above.
-
-| Type                                       | Required | Default     |
-| ------------------------------------------ | -------- | ----------- |
-| [StatusBarStyle](statusbar#statusbarstyle) | No       | `'default'` |
-
----
-
-### `hidden`
-
-If the status bar is hidden.
-
-| Type    | Required | Default |
-| ------- | -------- | ------- |
-| boolean | No       | `false` |
-
----
-
-### `networkActivityIndicatorVisible` <div className="label ios">iOS</div>
-
-If the network activity indicator should be visible.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
----
-
-### `showHideTransition` <div className="label ios">iOS</div>
-
-The transition effect when showing and hiding the status bar using the `hidden` prop.
-
-| Type                                               | Default  |
-| -------------------------------------------------- | -------- |
-| [StatusBarAnimation](statusbar#statusbaranimation) | `'fade'` |
-
----
-
-### `translucent` <div className="label android">Android</div>
-
-If the status bar is translucent. When translucent is set to `true`, the app will draw under the status bar. This is useful when using a semi transparent status bar color.
-
-:::warning
-Due to edge-to-edge enforcement introduced in Android 15, setting the status bar as translucent is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
-:::
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
-## Methods
-
-### `popStackEntry()`
-
-```tsx
-static popStackEntry(entry: StatusBarProps);
-```
-
-Get and remove the last StatusBar entry from the stack.
-
-**Parameters:**
-
-| Name                                                       | Type | Description                           |
-| ---------------------------------------------------------- | ---- | ------------------------------------- |
-| entry <div className="label basic required">Required</div> | any  | Entry returned from `pushStackEntry`. |
-
----
-
-### `pushStackEntry()`
-
-```tsx
-static pushStackEntry(props: StatusBarProps): StatusBarProps;
-```
-
-Push a StatusBar entry onto the stack. The return value should be passed to `popStackEntry` when complete.
-
-**Parameters:**
-
-| Name                                                       | Type | Description                                                      |
-| ---------------------------------------------------------- | ---- | ---------------------------------------------------------------- |
-| props <div className="label basic required">Required</div> | any  | Object containing the StatusBar props to use in the stack entry. |
-
----
-
-### `replaceStackEntry()`
-
-```tsx
-static replaceStackEntry(
-  entry: StatusBarProps,
-  props: StatusBarProps
-): StatusBarProps;
-```
-
-Replace an existing StatusBar stack entry with new props.
-
-**Parameters:**
-
-| Name                                                       | Type | Description                                                                  |
-| ---------------------------------------------------------- | ---- | ---------------------------------------------------------------------------- |
-| entry <div className="label basic required">Required</div> | any  | Entry returned from `pushStackEntry` to replace.                             |
-| props <div className="label basic required">Required</div> | any  | Object containing the StatusBar props to use in the replacement stack entry. |
-
----
-
-### `setBackgroundColor()` <div className="label android">Android</div>
-
-```tsx
-static setBackgroundColor(color: ColorValue, animated?: boolean);
-```
-
-Set the background color for the status bar.
-
-:::warning
-Due to edge-to-edge enforcement introduced in Android 15, setting background color of the status bar is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
-:::
-
-**Parameters:**
-
-| Name                                                       | Type    | Description               |
-| ---------------------------------------------------------- | ------- | ------------------------- |
-| color <div className="label basic required">Required</div> | string  | Background color.         |
-| animated                                                   | boolean | Animate the style change. |
-
----
-
-### `setBarStyle()`
-
-```tsx
-static setBarStyle(style: StatusBarStyle, animated?: boolean);
-```
-
-Set the status bar style.
-
-**Parameters:**
-
-| Name                                                       | Type                                       | Description               |
-| ---------------------------------------------------------- | ------------------------------------------ | ------------------------- |
-| style <div className="label basic required">Required</div> | [StatusBarStyle](statusbar#statusbarstyle) | Status bar style to set.  |
-| animated                                                   | boolean                                    | Animate the style change. |
-
----
-
-### `setHidden()`
-
-```tsx
-static setHidden(hidden: boolean, animation?: StatusBarAnimation);
-```
-
-Show or hide the status bar.
-
-**Parameters:**
-
-| Name                                                        | Type                                               | Description                                             |
-| ----------------------------------------------------------- | -------------------------------------------------- | ------------------------------------------------------- |
-| hidden <div className="label basic required">Required</div> | boolean                                            | Hide the status bar.                                    |
-| animation <div className="label ios">iOS</div>              | [StatusBarAnimation](statusbar#statusbaranimation) | Animation when changing the status bar hidden property. |
-
----
-
-### 🗑️ `setNetworkActivityIndicatorVisible()` <div className="label ios">iOS</div>
-
-:::warning[Deprecated]
-The status bar network activity indicator is not supported in iOS 13 and later. This will be removed in a future release.
-:::
-
-```tsx
-static setNetworkActivityIndicatorVisible(visible: boolean);
-```
-
-Control the visibility of the network activity indicator.
-
-**Parameters:**
-
-| Name                                                         | Type    | Description         |
-| ------------------------------------------------------------ | ------- | ------------------- |
-| visible <div className="label basic required">Required</div> | boolean | Show the indicator. |
-
----
-
-### `setTranslucent()` <div className="label android">Android</div>
-
-```tsx
-static setTranslucent(translucent: boolean);
-```
-
-Control the translucency of the status bar.
-
-:::warning
-Due to edge-to-edge enforcement introduced in Android 15, setting the status bar as translucent is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
-:::
-
-**Parameters:**
-
-| Name                                                             | Type    | Description         |
-| ---------------------------------------------------------------- | ------- | ------------------- |
-| translucent <div className="label basic required">Required</div> | boolean | Set as translucent. |
-
-## Type Definitions
-
-### StatusBarAnimation
-
-Status bar animation type for transitions on the iOS.
-
-| Type |
-| ---- |
-| enum |
-
-**Constants:**
-
-| Value     | Type   | Description     |
-| --------- | ------ | --------------- |
-| `'fade'`  | string | Fade animation  |
-| `'slide'` | string | Slide animation |
-| `'none'`  | string | No animation    |
-
----
-
-### StatusBarStyle
-
-Status bar style type.
-
-| Type |
-| ---- |
-| enum |
-
-**Constants:**
-
-| Value             | Type   | Description                                                |
-| ----------------- | ------ | ---------------------------------------------------------- |
-| `'default'`       | string | Default status bar style (dark for iOS, light for Android) |
-| `'light-content'` | string | White texts and icons                                      |
-| `'dark-content'`  | string | Dark texts and icons (requires API>=23 on Android)         |
+---
+id: statusbar
+title: StatusBar
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+Component to control the app's status bar. The status bar is the zone, typically at the top of the screen, that displays the current time, Wi-Fi and cellular network information, battery level and/or other status icons.
+
+### 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.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=StatusBar%20Component%20Example&supportedPlatforms=android,ios&ext=js
+import {useState} from 'react';
+import {
+  Button,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const STYLES = ['default', 'dark-content', 'light-content'];
+const TRANSITIONS = ['fade', 'slide', 'none'];
+
+const App = () => {
+  const [hidden, setHidden] = useState(false);
+  const [statusBarStyle, setStatusBarStyle] = useState(STYLES[0]);
+  const [statusBarTransition, setStatusBarTransition] = useState(
+    TRANSITIONS[0],
+  );
+
+  const changeStatusBarVisibility = () => setHidden(!hidden);
+
+  const changeStatusBarStyle = () => {
+    const styleId = STYLES.indexOf(statusBarStyle) + 1;
+    if (styleId === STYLES.length) {
+      setStatusBarStyle(STYLES[0]);
+    } else {
+      setStatusBarStyle(STYLES[styleId]);
+    }
+  };
+
+  const changeStatusBarTransition = () => {
+    const transition = TRANSITIONS.indexOf(statusBarTransition) + 1;
+    if (transition === TRANSITIONS.length) {
+      setStatusBarTransition(TRANSITIONS[0]);
+    } else {
+      setStatusBarTransition(TRANSITIONS[transition]);
+    }
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <StatusBar
+          animated={true}
+          backgroundColor="#61dafb"
+          barStyle={statusBarStyle}
+          showHideTransition={statusBarTransition}
+          hidden={hidden}
+        />
+        <Text style={styles.textStyle}>
+          StatusBar Visibility:{'\n'}
+          {hidden ? 'Hidden' : 'Visible'}
+        </Text>
+        <Text style={styles.textStyle}>
+          StatusBar Style:{'\n'}
+          {statusBarStyle}
+        </Text>
+        {Platform.OS === 'ios' ? (
+          <Text style={styles.textStyle}>
+            StatusBar Transition:{'\n'}
+            {statusBarTransition}
+          </Text>
+        ) : null}
+        <View style={styles.buttonsContainer}>
+          <Button
+            title="Toggle StatusBar"
+            onPress={changeStatusBarVisibility}
+          />
+          <Button
+            title="Change StatusBar Style"
+            onPress={changeStatusBarStyle}
+          />
+          {Platform.OS === 'ios' ? (
+            <Button
+              title="Change StatusBar Transition"
+              onPress={changeStatusBarTransition}
+            />
+          ) : null}
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: '#ECF0F1',
+  },
+  buttonsContainer: {
+    padding: 10,
+  },
+  textStyle: {
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=StatusBar%20Component%20Example&supportedPlatforms=android,ios&ext=tsx
+import {useState} from 'react';
+import {
+  Button,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  Text,
+  View,
+  StatusBarStyle,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const STYLES = ['default', 'dark-content', 'light-content'] as const;
+const TRANSITIONS = ['fade', 'slide', 'none'] as const;
+
+const App = () => {
+  const [hidden, setHidden] = useState(false);
+  const [statusBarStyle, setStatusBarStyle] = useState<StatusBarStyle>(
+    STYLES[0],
+  );
+  const [statusBarTransition, setStatusBarTransition] = useState<
+    'fade' | 'slide' | 'none'
+  >(TRANSITIONS[0]);
+
+  const changeStatusBarVisibility = () => setHidden(!hidden);
+
+  const changeStatusBarStyle = () => {
+    const styleId = STYLES.indexOf(statusBarStyle) + 1;
+    if (styleId === STYLES.length) {
+      setStatusBarStyle(STYLES[0]);
+    } else {
+      setStatusBarStyle(STYLES[styleId]);
+    }
+  };
+
+  const changeStatusBarTransition = () => {
+    const transition = TRANSITIONS.indexOf(statusBarTransition) + 1;
+    if (transition === TRANSITIONS.length) {
+      setStatusBarTransition(TRANSITIONS[0]);
+    } else {
+      setStatusBarTransition(TRANSITIONS[transition]);
+    }
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <StatusBar
+          animated={true}
+          backgroundColor="#61dafb"
+          barStyle={statusBarStyle}
+          showHideTransition={statusBarTransition}
+          hidden={hidden}
+        />
+        <Text style={styles.textStyle}>
+          StatusBar Visibility:{'\n'}
+          {hidden ? 'Hidden' : 'Visible'}
+        </Text>
+        <Text style={styles.textStyle}>
+          StatusBar Style:{'\n'}
+          {statusBarStyle}
+        </Text>
+        {Platform.OS === 'ios' ? (
+          <Text style={styles.textStyle}>
+            StatusBar Transition:{'\n'}
+            {statusBarTransition}
+          </Text>
+        ) : null}
+        <View style={styles.buttonsContainer}>
+          <Button
+            title="Toggle StatusBar"
+            onPress={changeStatusBarVisibility}
+          />
+          <Button
+            title="Change StatusBar Style"
+            onPress={changeStatusBarStyle}
+          />
+          {Platform.OS === 'ios' ? (
+            <Button
+              title="Change StatusBar Transition"
+              onPress={changeStatusBarTransition}
+            />
+          ) : null}
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: '#ECF0F1',
+  },
+  buttonsContainer: {
+    padding: 10,
+  },
+  textStyle: {
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### 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.
+
+---
+
+# Reference
+
+## Constants
+
+### `currentHeight` <div className="label android">Android</div>
+
+The height of the status bar, which includes the notch height, if present.
+
+---
+
+## Props
+
+### `animated`
+
+If the transition between status bar property changes should be animated. Supported for `backgroundColor`, `barStyle` and `hidden` properties.
+
+| Type    | Required | Default |
+| ------- | -------- | ------- |
+| boolean | No       | `false` |
+
+---
+
+### `backgroundColor` <div className="label android">Android</div>
+
+The background color of the status bar.
+
+:::warning
+Due to edge-to-edge enforcement introduced in Android 15, setting background color of the status bar is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
+:::
+
+| Type            | Required | Default                                                                |
+| --------------- | -------- | ---------------------------------------------------------------------- |
+| [color](colors) | No       | default system StatusBar background color, or `'black'` if not defined |
+
+---
+
+### `barStyle`
+
+Sets the color of the status bar text.
+
+On Android, this will only have an impact on API versions 23 and above.
+
+| Type                                       | Required | Default     |
+| ------------------------------------------ | -------- | ----------- |
+| [StatusBarStyle](statusbar#statusbarstyle) | No       | `'default'` |
+
+---
+
+### `hidden`
+
+If the status bar is hidden.
+
+| Type    | Required | Default |
+| ------- | -------- | ------- |
+| boolean | No       | `false` |
+
+---
+
+### `networkActivityIndicatorVisible` <div className="label ios">iOS</div>
+
+If the network activity indicator should be visible.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+---
+
+### `showHideTransition` <div className="label ios">iOS</div>
+
+The transition effect when showing and hiding the status bar using the `hidden` prop.
+
+| Type                                               | Default  |
+| -------------------------------------------------- | -------- |
+| [StatusBarAnimation](statusbar#statusbaranimation) | `'fade'` |
+
+---
+
+### `translucent` <div className="label android">Android</div>
+
+If the status bar is translucent. When translucent is set to `true`, the app will draw under the status bar. This is useful when using a semi transparent status bar color.
+
+:::warning
+Due to edge-to-edge enforcement introduced in Android 15, setting the status bar as translucent is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
+:::
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+## Methods
+
+### `popStackEntry()`
+
+```tsx
+static popStackEntry(entry: StatusBarProps);
+```
+
+Get and remove the last StatusBar entry from the stack.
+
+**Parameters:**
+
+| Name                                                       | Type | Description                           |
+| ---------------------------------------------------------- | ---- | ------------------------------------- |
+| entry <div className="label basic required">Required</div> | any  | Entry returned from `pushStackEntry`. |
+
+---
+
+### `pushStackEntry()`
+
+```tsx
+static pushStackEntry(props: StatusBarProps): StatusBarProps;
+```
+
+Push a StatusBar entry onto the stack. The return value should be passed to `popStackEntry` when complete.
+
+**Parameters:**
+
+| Name                                                       | Type | Description                                                      |
+| ---------------------------------------------------------- | ---- | ---------------------------------------------------------------- |
+| props <div className="label basic required">Required</div> | any  | Object containing the StatusBar props to use in the stack entry. |
+
+---
+
+### `replaceStackEntry()`
+
+```tsx
+static replaceStackEntry(
+  entry: StatusBarProps,
+  props: StatusBarProps
+): StatusBarProps;
+```
+
+Replace an existing StatusBar stack entry with new props.
+
+**Parameters:**
+
+| Name                                                       | Type | Description                                                                  |
+| ---------------------------------------------------------- | ---- | ---------------------------------------------------------------------------- |
+| entry <div className="label basic required">Required</div> | any  | Entry returned from `pushStackEntry` to replace.                             |
+| props <div className="label basic required">Required</div> | any  | Object containing the StatusBar props to use in the replacement stack entry. |
+
+---
+
+### `setBackgroundColor()` <div className="label android">Android</div>
+
+```tsx
+static setBackgroundColor(color: ColorValue, animated?: boolean);
+```
+
+Set the background color for the status bar.
+
+:::warning
+Due to edge-to-edge enforcement introduced in Android 15, setting background color of the status bar is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
+:::
+
+**Parameters:**
+
+| Name                                                       | Type    | Description               |
+| ---------------------------------------------------------- | ------- | ------------------------- |
+| color <div className="label basic required">Required</div> | string  | Background color.         |
+| animated                                                   | boolean | Animate the style change. |
+
+---
+
+### `setBarStyle()`
+
+```tsx
+static setBarStyle(style: StatusBarStyle, animated?: boolean);
+```
+
+Set the status bar style.
+
+**Parameters:**
+
+| Name                                                       | Type                                       | Description               |
+| ---------------------------------------------------------- | ------------------------------------------ | ------------------------- |
+| style <div className="label basic required">Required</div> | [StatusBarStyle](statusbar#statusbarstyle) | Status bar style to set.  |
+| animated                                                   | boolean                                    | Animate the style change. |
+
+---
+
+### `setHidden()`
+
+```tsx
+static setHidden(hidden: boolean, animation?: StatusBarAnimation);
+```
+
+Show or hide the status bar.
+
+**Parameters:**
+
+| Name                                                        | Type                                               | Description                                             |
+| ----------------------------------------------------------- | -------------------------------------------------- | ------------------------------------------------------- |
+| hidden <div className="label basic required">Required</div> | boolean                                            | Hide the status bar.                                    |
+| animation <div className="label ios">iOS</div>              | [StatusBarAnimation](statusbar#statusbaranimation) | Animation when changing the status bar hidden property. |
+
+---
+
+### 🗑️ `setNetworkActivityIndicatorVisible()` <div className="label ios">iOS</div>
+
+:::warning[Deprecated]
+The status bar network activity indicator is not supported in iOS 13 and later. This will be removed in a future release.
+:::
+
+```tsx
+static setNetworkActivityIndicatorVisible(visible: boolean);
+```
+
+Control the visibility of the network activity indicator.
+
+**Parameters:**
+
+| Name                                                         | Type    | Description         |
+| ------------------------------------------------------------ | ------- | ------------------- |
+| visible <div className="label basic required">Required</div> | boolean | Show the indicator. |
+
+---
+
+### `setTranslucent()` <div className="label android">Android</div>
+
+```tsx
+static setTranslucent(translucent: boolean);
+```
+
+Control the translucency of the status bar.
+
+:::warning
+Due to edge-to-edge enforcement introduced in Android 15, setting the status bar as translucent is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
+:::
+
+**Parameters:**
+
+| Name                                                             | Type    | Description         |
+| ---------------------------------------------------------------- | ------- | ------------------- |
+| translucent <div className="label basic required">Required</div> | boolean | Set as translucent. |
+
+## Type Definitions
+
+### StatusBarAnimation
+
+Status bar animation type for transitions on the iOS.
+
+| Type |
+| ---- |
+| enum |
+
+**Constants:**
+
+| Value     | Type   | Description     |
+| --------- | ------ | --------------- |
+| `'fade'`  | string | Fade animation  |
+| `'slide'` | string | Slide animation |
+| `'none'`  | string | No animation    |
+
+---
+
+### StatusBarStyle
+
+Status bar style type.
+
+| Type |
+| ---- |
+| enum |
+
+**Constants:**
+
+| Value             | Type   | Description                                                |
+| ----------------- | ------ | ---------------------------------------------------------- |
+| `'default'`       | string | Default status bar style (dark for iOS, light for Android) |
+| `'light-content'` | string | White texts and icons                                      |
+| `'dark-content'`  | string | Dark texts and icons (requires API>=23 on Android)         |
diff --git a/website/versioned_docs/version-0.84/style.md b/website/versioned_docs/version-0.84/style.md
index d847c0597cb..4890db4fbfa 100644
--- a/website/versioned_docs/version-0.84/style.md
+++ b/website/versioned_docs/version-0.84/style.md
@@ -10,7 +10,6 @@ The `style` prop can be a plain old JavaScript object. That's what we usually us
 As a component grows in complexity, it is often cleaner to use `StyleSheet.create` to define several styles in one place. Here's an example:
 
 ```SnackPlayer name=Style
-import React from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 
 const LotsOfStyles = () => {
diff --git a/website/versioned_docs/version-0.84/stylesheet.md b/website/versioned_docs/version-0.84/stylesheet.md
index e5e9283bc59..455246de7d7 100644
--- a/website/versioned_docs/version-0.84/stylesheet.md
+++ b/website/versioned_docs/version-0.84/stylesheet.md
@@ -6,7 +6,6 @@ title: StyleSheet
 A StyleSheet is an abstraction similar to CSS StyleSheets.
 
 ```SnackPlayer name=StyleSheet
-import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -62,7 +61,6 @@ static compose(style1: Object, style2: Object): Object | Object[];
 Combines two styles such that `style2` will override any styles in `style1`. If either style is falsy, the other one is returned without allocating an array, saving allocations and maintaining reference equality for PureComponent checks.
 
 ```SnackPlayer name=Compose
-import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -123,7 +121,6 @@ static flatten(style: Array<Object extends Record<string, ViewStyle | ImageStyle
 Flattens an array of style objects, into one aggregated style object.
 
 ```SnackPlayer name=Flatten
-import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -196,7 +193,6 @@ Sets a function to use to pre-process a style property value. This is used inter
 A very common pattern is to create overlays with position absolute and zero positioning (`position: 'absolute', left: 0, right: 0, top: 0, bottom: 0`), so `absoluteFill` can be used for convenience and to reduce duplication of these repeated styles. If you want, absoluteFill can be used to create a customized entry in a StyleSheet, e.g.:
 
 ```SnackPlayer name=absoluteFill
-import React from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -321,7 +317,6 @@ export default App;
 This is defined as the width of a thin line on the platform. It can be used as the thickness of a border or division between two elements. Example:
 
 ```SnackPlayer name=hairlineWidth
-import React from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 
 const App = () => (
diff --git a/website/versioned_docs/version-0.84/switch.md b/website/versioned_docs/version-0.84/switch.md
index 4f9055c6256..20c73c69db7 100644
--- a/website/versioned_docs/version-0.84/switch.md
+++ b/website/versioned_docs/version-0.84/switch.md
@@ -1,133 +1,133 @@
----
-id: switch
-title: Switch
----
-
-Renders a boolean input.
-
-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=Switch&supportedPlatforms=android,ios
-import React, {useState} from 'react';
-import {Switch, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [isEnabled, setIsEnabled] = useState(false);
-  const toggleSwitch = () => setIsEnabled(previousState => !previousState);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Switch
-          trackColor={{false: '#767577', true: '#81b0ff'}}
-          thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
-          ios_backgroundColor="#3e3e3e"
-          onValueChange={toggleSwitch}
-          value={isEnabled}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Props
-
-### [View Props](view.md#props)
-
-Inherits [View Props](view.md#props).
-
----
-
-### `disabled`
-
-If true the user won't be able to toggle the switch.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `ios_backgroundColor` <div className="label ios">iOS</div>
-
-On iOS, custom color for the background. This background color can be seen either when the switch value is `false` or when the switch is disabled (and the switch is translucent).
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `onChange`
-
-Invoked when the user tries to change the value of the switch. Receives the change event as an argument. If you want to only receive the new value, use `onValueChange` instead.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onValueChange`
-
-Invoked when the user tries to change the value of the switch. Receives the new value as an argument. If you want to instead receive an event, use `onChange`.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `ref`
-
-A ref setter that will be assigned an [element node](element-nodes) when mounted.
-
----
-
-### `thumbColor`
-
-Color of the foreground switch grip. If this is set on iOS, the switch grip will lose its drop shadow.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `trackColor`
-
-Custom colors for the switch track.
-
-_iOS_: When the switch value is `false`, the track shrinks into the border. If you want to change the color of the background exposed by the shrunken track, use [`ios_backgroundColor`](switch.md#ios_backgroundColor).
-
-| Type                                                         |
-| ------------------------------------------------------------ |
-| `md object: {false: [color](colors), true: [color](colors)}` |
-
----
-
-### `value`
-
-The value of the switch. If true the switch will be turned on. Default value is false.
-
-| Type |
-| ---- |
-| bool |
+---
+id: switch
+title: Switch
+---
+
+Renders a boolean input.
+
+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=Switch&supportedPlatforms=android,ios
+import {useState} from 'react';
+import {Switch, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [isEnabled, setIsEnabled] = useState(false);
+  const toggleSwitch = () => setIsEnabled(previousState => !previousState);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Switch
+          trackColor={{false: '#767577', true: '#81b0ff'}}
+          thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
+          ios_backgroundColor="#3e3e3e"
+          onValueChange={toggleSwitch}
+          value={isEnabled}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Props
+
+### [View Props](view.md#props)
+
+Inherits [View Props](view.md#props).
+
+---
+
+### `disabled`
+
+If true the user won't be able to toggle the switch.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `ios_backgroundColor` <div className="label ios">iOS</div>
+
+On iOS, custom color for the background. This background color can be seen either when the switch value is `false` or when the switch is disabled (and the switch is translucent).
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `onChange`
+
+Invoked when the user tries to change the value of the switch. Receives the change event as an argument. If you want to only receive the new value, use `onValueChange` instead.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onValueChange`
+
+Invoked when the user tries to change the value of the switch. Receives the new value as an argument. If you want to instead receive an event, use `onChange`.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `ref`
+
+A ref setter that will be assigned an [element node](element-nodes) when mounted.
+
+---
+
+### `thumbColor`
+
+Color of the foreground switch grip. If this is set on iOS, the switch grip will lose its drop shadow.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `trackColor`
+
+Custom colors for the switch track.
+
+_iOS_: When the switch value is `false`, the track shrinks into the border. If you want to change the color of the background exposed by the shrunken track, use [`ios_backgroundColor`](switch.md#ios_backgroundColor).
+
+| Type                                                         |
+| ------------------------------------------------------------ |
+| `md object: {false: [color](colors), true: [color](colors)}` |
+
+---
+
+### `value`
+
+The value of the switch. If true the switch will be turned on. Default value is false.
+
+| Type |
+| ---- |
+| bool |
diff --git a/website/versioned_docs/version-0.84/systrace.md b/website/versioned_docs/version-0.84/systrace.md
index 53cfd62c7a9..9aa54fe8e18 100644
--- a/website/versioned_docs/version-0.84/systrace.md
+++ b/website/versioned_docs/version-0.84/systrace.md
@@ -10,7 +10,6 @@ title: Systrace
 `Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Capture the non-Timed JS events in EasyProfiler.
 
 ```SnackPlayer name=Systrace%20Example
-import React from 'react';
 import {Button, Text, View, StyleSheet, Systrace} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.84/text-nodes.md b/website/versioned_docs/version-0.84/text-nodes.md
index 63f195ea4b5..2818909abdc 100644
--- a/website/versioned_docs/version-0.84/text-nodes.md
+++ b/website/versioned_docs/version-0.84/text-nodes.md
@@ -1,86 +1,86 @@
----
-id: text-nodes
-title: Text nodes
----
-
-Text nodes represent raw text content on the tree (similar to [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text) nodes on Web). They are not directly accessible via `refs`, but can be accessed using methods like [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes) on element refs.
-
-```SnackPlayer ext=js&name=Text%20instances%20example
-import * as React from 'react';
-import { SafeAreaView, StyleSheet, Text } from 'react-native';
-
-const TextWithRefs = () => {
-  const ref = React.useRef(null);
-  const [viewInfo, setViewInfo] = React.useState('');
-
-  React.useEffect(() => {
-    // `textElement` is an object implementing the interface described here.
-    const textElement = ref.current;
-    const textNode = textElement.childNodes[0];
-    setViewInfo(
-      `Text content is: ${textNode.nodeValue}`,
-    );
-  }, []);
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <Text ref={ref}>
-        Hello world!
-      </Text>
-      <Text>{viewInfo}</Text>
-    </SafeAreaView>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  content: {
-    padding: 10,
-    backgroundColor: 'gray',
-  },
-});
-
-export default TextWithRefs;
-```
-
----
-
-## Reference
-
-### Web-compatible API
-
-From [`CharacterData`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData):
-
-- Properties
-  - [`data`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/data)
-  - [`length`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/length)
-  - [`nextElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/nextElementSibling)
-  - [`previousElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/previousElementSibling)
-- Methods
-  - [`substringData()`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/substringData)
-
-From [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/Node):
-
-- Properties
-  - [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)
-  - [`firstChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild)
-  - [`isConnected`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected)
-  - [`lastChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild)
-  - [`nextSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling)
-  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
-  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
-  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
-  - [`ownerDocument`](https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument)
-    - ℹ️ Will return the [document node](/docs/next/document-nodes) where this component was rendered.
-  - [`parentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)
-  - [`parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)
-  - [`previousSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling)
-  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
-- Methods
-  - [`compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
-  - [`contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains)
-  - [`getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)
-    - ℹ️ Will return a reference to itself if the component is not mounted.
-  - [`hasChildNodes()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes)
+---
+id: text-nodes
+title: Text nodes
+---
+
+Text nodes represent raw text content on the tree (similar to [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text) nodes on Web). They are not directly accessible via `refs`, but can be accessed using methods like [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes) on element refs.
+
+```SnackPlayer ext=js&name=Text%20instances%20example
+import {useEffect, useRef, useState} from 'react';
+import {SafeAreaView, StyleSheet, Text} from 'react-native';
+
+const TextWithRefs = () => {
+  const ref = useRef(null);
+  const [viewInfo, setViewInfo] = useState('');
+
+  useEffect(() => {
+    // `textElement` is an object implementing the interface described here.
+    const textElement = ref.current;
+    const textNode = textElement.childNodes[0];
+    setViewInfo(
+      `Text content is: ${textNode.nodeValue}`,
+    );
+  }, []);
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <Text ref={ref}>
+        Hello world!
+      </Text>
+      <Text>{viewInfo}</Text>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    padding: 10,
+    backgroundColor: 'gray',
+  },
+});
+
+export default TextWithRefs;
+```
+
+---
+
+## Reference
+
+### Web-compatible API
+
+From [`CharacterData`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData):
+
+- Properties
+  - [`data`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/data)
+  - [`length`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/length)
+  - [`nextElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/nextElementSibling)
+  - [`previousElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/previousElementSibling)
+- Methods
+  - [`substringData()`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/substringData)
+
+From [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/Node):
+
+- Properties
+  - [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)
+  - [`firstChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild)
+  - [`isConnected`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected)
+  - [`lastChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild)
+  - [`nextSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling)
+  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
+  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
+  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
+  - [`ownerDocument`](https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument)
+    - ℹ️ Will return the [document node](/docs/next/document-nodes) where this component was rendered.
+  - [`parentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)
+  - [`parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)
+  - [`previousSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling)
+  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
+- Methods
+  - [`compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
+  - [`contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains)
+  - [`getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)
+    - ℹ️ Will return a reference to itself if the component is not mounted.
+  - [`hasChildNodes()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes)
diff --git a/website/versioned_docs/version-0.84/text-style-props.md b/website/versioned_docs/version-0.84/text-style-props.md
index 64ffc4ef816..9605beca3dd 100644
--- a/website/versioned_docs/version-0.84/text-style-props.md
+++ b/website/versioned_docs/version-0.84/text-style-props.md
@@ -1,948 +1,948 @@
----
-id: text-style-props
-title: Text Style Props
----
-
-### Example
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=js&dependencies=@react-native-community/slider
-import React, {useState} from 'react';
-import {
-  FlatList,
-  Platform,
-  ScrollView,
-  StyleSheet,
-  Switch,
-  Text,
-  TouchableWithoutFeedback,
-  View,
-} from 'react-native';
-import Slider from '@react-native-community/slider';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const fontStyles = ['normal', 'italic'];
-const fontVariants = [
-  undefined,
-  'small-caps',
-  'oldstyle-nums',
-  'lining-nums',
-  'tabular-nums',
-  'proportional-nums',
-];
-const fontWeights = [
-  'normal',
-  'bold',
-  '100',
-  '200',
-  '300',
-  '400',
-  '500',
-  '600',
-  '700',
-  '800',
-  '900',
-];
-const textAlignments = ['auto', 'left', 'right', 'center', 'justify'];
-const textDecorationLines = [
-  'none',
-  'underline',
-  'line-through',
-  'underline line-through',
-];
-const textDecorationStyles = ['solid', 'double', 'dotted', 'dashed'];
-const textTransformations = ['none', 'uppercase', 'lowercase', 'capitalize'];
-const textAlignmentsVertical = ['auto', 'top', 'bottom', 'center'];
-const writingDirections = ['auto', 'ltr', 'rtl'];
-
-const App = () => {
-  const [fontSize, setFontSize] = useState(20);
-  const [fontStyleIdx, setFontStyleIdx] = useState(0);
-  const [fontWeightIdx, setFontWeightIdx] = useState(0);
-  const [lineHeight, setLineHeight] = useState(24);
-  const [textAlignIdx, setTextAlignIdx] = useState(0);
-  const [textDecorationLineIdx, setTextDecorationLineIdx] = useState(0);
-  const [includeFontPadding, setIncludeFontPadding] = useState(false);
-  const [textVerticalAlignIdx, setTextVerticalAlignIdx] = useState(0);
-  const [fontVariantIdx, setFontVariantIdx] = useState(0);
-  const [letterSpacing, setLetterSpacing] = useState(0);
-  const [textDecorationStyleIdx, setTextDecorationStyleIdx] = useState(0);
-  const [textTransformIdx, setTextTransformIdx] = useState(0);
-  const [writingDirectionIdx, setWritingDirectionIdx] = useState(0);
-  const [textShadowRadius, setTextShadowRadius] = useState(0);
-  const [textShadowOffset, setTextShadowOffset] = useState({
-    height: 0,
-    width: 0,
-  });
-
-  const [, ...validFontVariants] = fontVariants;
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.pargraphWrapper}>
-          <Text
-            style={[
-              styles.paragraph,
-              {
-                fontSize,
-                fontStyle: fontStyles[fontStyleIdx],
-                fontWeight: fontWeights[fontWeightIdx],
-                lineHeight,
-                textAlign: textAlignments[textAlignIdx],
-                textDecorationLine: textDecorationLines[textDecorationLineIdx],
-                textTransform: textTransformations[textTransformIdx],
-                textAlignVertical: textAlignmentsVertical[textVerticalAlignIdx],
-                fontVariant:
-                  fontVariantIdx === 0
-                    ? undefined
-                    : [validFontVariants[fontVariantIdx - 1]],
-                letterSpacing,
-                includeFontPadding,
-                textDecorationStyle:
-                  textDecorationStyles[textDecorationStyleIdx],
-                writingDirection: writingDirections[writingDirectionIdx],
-                textShadowOffset,
-                textShadowRadius,
-              },
-            ]}>
-            Lorem Ipsum is simply dummy text of the printing and typesetting
-            industry. 112 Likes
-          </Text>
-        </View>
-        <ScrollView style={{padding: 12}}>
-          <View>
-            <Text>Common platform properties</Text>
-            <CustomSlider
-              label="Text Shadow Offset - Height"
-              value={textShadowOffset.height}
-              minimumValue={-40}
-              maximumValue={40}
-              handleValueChange={val =>
-                setTextShadowOffset(prev => ({...prev, height: val}))
-              }
-            />
-            <CustomSlider
-              label="Text Shadow Offset - Width"
-              value={textShadowOffset.width}
-              minimumValue={-40}
-              maximumValue={40}
-              handleValueChange={val =>
-                setTextShadowOffset(prev => ({...prev, width: val}))
-              }
-            />
-            <CustomSlider
-              label="Font Size"
-              value={fontSize}
-              maximumValue={40}
-              handleValueChange={setFontSize}
-            />
-            <CustomPicker
-              label="Font Style"
-              data={fontStyles}
-              currentIndex={fontStyleIdx}
-              onSelected={setFontStyleIdx}
-            />
-            <CustomPicker
-              label="Font Weight"
-              data={fontWeights}
-              currentIndex={fontWeightIdx}
-              onSelected={setFontWeightIdx}
-            />
-            <CustomSlider
-              label="Line Height"
-              value={lineHeight}
-              minimumValue={10}
-              maximumValue={50}
-              handleValueChange={setLineHeight}
-            />
-            <CustomPicker
-              label="Text Align"
-              data={textAlignments}
-              currentIndex={textAlignIdx}
-              onSelected={setTextAlignIdx}
-            />
-            <CustomPicker
-              label="Text Decoration Line"
-              data={textDecorationLines}
-              currentIndex={textDecorationLineIdx}
-              onSelected={setTextDecorationLineIdx}
-            />
-            <CustomSlider
-              label="Text Shadow Radius"
-              value={textShadowRadius}
-              handleValueChange={setTextShadowRadius}
-            />
-            <CustomPicker
-              label="Font Variant"
-              data={fontVariants}
-              currentIndex={fontVariantIdx}
-              onSelected={setFontVariantIdx}
-            />
-            <CustomSlider
-              label="Letter Spacing"
-              step={0.1}
-              value={letterSpacing}
-              handleValueChange={setLetterSpacing}
-            />
-            <CustomPicker
-              label="Text Transform"
-              data={textTransformations}
-              currentIndex={textTransformIdx}
-              onSelected={setTextTransformIdx}
-            />
-          </View>
-          {Platform.OS === 'android' && (
-            <View style={styles.platformContainer}>
-              <Text style={styles.platformContainerTitle}>
-                Android only properties
-              </Text>
-              <CustomPicker
-                label="Text Vertical Align"
-                data={textAlignmentsVertical}
-                currentIndex={textVerticalAlignIdx}
-                onSelected={setTextVerticalAlignIdx}
-              />
-              <CustomSwitch
-                label="Include Font Padding"
-                handleValueChange={setIncludeFontPadding}
-                value={includeFontPadding}
-              />
-            </View>
-          )}
-          {Platform.OS === 'ios' && (
-            <View style={styles.platformContainer}>
-              <Text style={styles.platformContainerTitle}>
-                iOS only properties
-              </Text>
-              <CustomPicker
-                label="Text Decoration Style"
-                data={textDecorationStyles}
-                currentIndex={textDecorationStyleIdx}
-                onSelected={setTextDecorationStyleIdx}
-              />
-              <CustomPicker
-                label="Writing Direction"
-                data={writingDirections}
-                currentIndex={writingDirectionIdx}
-                onSelected={setWritingDirectionIdx}
-              />
-            </View>
-          )}
-        </ScrollView>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const CustomSwitch = ({label, handleValueChange, value}) => {
-  return (
-    <>
-      <Text style={styles.title}>{label}</Text>
-      <View style={{alignItems: 'flex-start'}}>
-        <Switch
-          trackColor={{false: '#767577', true: '#DAA520'}}
-          thumbColor={value ? '#DAA520' : '#f4f3f4'}
-          onValueChange={handleValueChange}
-          value={value}
-        />
-      </View>
-    </>
-  );
-};
-
-const CustomSlider = ({
-  label,
-  handleValueChange,
-  step = 1,
-  minimumValue = 0,
-  maximumValue = 10,
-  value,
-}) => {
-  return (
-    <>
-      {label && (
-        <Text style={styles.title}>{`${label} (${value.toFixed(2)})`}</Text>
-      )}
-      <View style={styles.wrapperHorizontal}>
-        <Slider
-          thumbTintColor="#06bcee"
-          minimumTrackTintColor="#64d7ffbb"
-          minimumValue={minimumValue}
-          maximumValue={maximumValue}
-          step={step}
-          onValueChange={handleValueChange}
-          value={value}
-        />
-      </View>
-    </>
-  );
-};
-
-const CustomPicker = ({label, data, currentIndex, onSelected}) => {
-  return (
-    <>
-      <Text style={styles.title}>{label}</Text>
-      <View style={styles.wrapperHorizontal}>
-        <FlatList
-          bounces
-          horizontal
-          data={data}
-          keyExtractor={item => String(item)}
-          renderItem={({item, index}) => {
-            const selected = index === currentIndex;
-            return (
-              <TouchableWithoutFeedback onPress={() => onSelected(index)}>
-                <View
-                  style={[
-                    styles.itemStyleHorizontal,
-                    selected && styles.itemSelectedStyleHorizontal,
-                  ]}>
-                  <Text
-                    style={{
-                      textAlign: 'center',
-                      color: selected ? 'black' : 'grey',
-                      fontWeight: selected ? 'bold' : 'normal',
-                    }}>
-                    {item + ''}
-                  </Text>
-                </View>
-              </TouchableWithoutFeedback>
-            );
-          }}
-        />
-      </View>
-    </>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  pargraphWrapper: {
-    backgroundColor: 'black',
-  },
-  paragraph: {
-    color: '#fff',
-    textDecorationColor: 'yellow',
-    textShadowColor: 'red',
-    textShadowRadius: 1,
-    padding: 24,
-  },
-  wrapperHorizontal: {
-    justifyContent: 'center',
-    color: 'black',
-  },
-  itemStyleHorizontal: {
-    marginRight: 10,
-    height: 50,
-    padding: 8,
-    borderWidth: 1,
-    borderColor: 'grey',
-    borderRadius: 8,
-    textAlign: 'center',
-    justifyContent: 'center',
-  },
-  itemSelectedStyleHorizontal: {
-    borderWidth: 2,
-    borderColor: '#06bcee',
-  },
-  platformContainer: {
-    marginTop: 8,
-    borderTopWidth: 1,
-  },
-  platformContainerTitle: {
-    marginTop: 8,
-  },
-  title: {
-    fontWeight: 'bold',
-    marginVertical: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=tsx&dependencies=@react-native-community/slider
-import React, {useState} from 'react';
-import {
-  FlatList,
-  Platform,
-  ScrollView,
-  StyleSheet,
-  Switch,
-  Text,
-  TouchableWithoutFeedback,
-  View,
-  TextStyle,
-} from 'react-native';
-import Slider from '@react-native-community/slider';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [fontSize, setFontSize] = useState(20);
-  const [fontStyleIdx, setFontStyleIdx] = useState(0);
-  const [fontWeightIdx, setFontWeightIdx] = useState(0);
-  const [lineHeight, setLineHeight] = useState(24);
-  const [textAlignIdx, setTextAlignIdx] = useState(0);
-  const [textDecorationLineIdx, setTextDecorationLineIdx] = useState(0);
-  const [includeFontPadding, setIncludeFontPadding] = useState(false);
-  const [textVerticalAlignIdx, setTextVerticalAlignIdx] = useState(0);
-  const [fontVariantIdx, setFontVariantIdx] = useState(0);
-  const [letterSpacing, setLetterSpacing] = useState(0);
-  const [textDecorationStyleIdx, setTextDecorationStyleIdx] = useState(0);
-  const [textTransformIdx, setTextTransformIdx] = useState(0);
-  const [writingDirectionIdx, setWritingDirectionIdx] = useState(0);
-  const [textShadowRadius, setTextShadowRadius] = useState(0);
-  const [textShadowOffset, setTextShadowOffset] = useState({
-    height: 0,
-    width: 0,
-  });
-
-  const [, ...validFontVariants] = fontVariants;
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.pargraphWrapper}>
-          <Text
-            style={[
-              styles.paragraph,
-              {
-                fontSize,
-                fontStyle: fontStyles[fontStyleIdx],
-                fontWeight: fontWeights[fontWeightIdx],
-                lineHeight,
-                textAlign: textAlignments[textAlignIdx],
-                textDecorationLine: textDecorationLines[textDecorationLineIdx],
-                textTransform: textTransformations[textTransformIdx],
-                textAlignVertical: textAlignmentsVertical[textVerticalAlignIdx],
-                fontVariant:
-                  fontVariantIdx === 0
-                    ? undefined
-                    : [validFontVariants[fontVariantIdx - 1]],
-                letterSpacing,
-                includeFontPadding,
-                textDecorationStyle:
-                  textDecorationStyles[textDecorationStyleIdx],
-                writingDirection: writingDirections[writingDirectionIdx],
-                textShadowOffset,
-                textShadowRadius,
-              } as TextStyle,
-            ]}>
-            Lorem Ipsum is simply dummy text of the printing and typesetting
-            industry. 112 Likes
-          </Text>
-        </View>
-        <ScrollView style={{padding: 12}}>
-          <View>
-            <Text>Common platform properties</Text>
-            <CustomSlider
-              label="Text Shadow Offset - Height"
-              value={textShadowOffset.height}
-              minimumValue={-40}
-              maximumValue={40}
-              handleValueChange={(val: number) =>
-                setTextShadowOffset(prev => ({...prev, height: val}))
-              }
-            />
-            <CustomSlider
-              label="Text Shadow Offset - Width"
-              value={textShadowOffset.width}
-              minimumValue={-40}
-              maximumValue={40}
-              handleValueChange={(val: number) =>
-                setTextShadowOffset(prev => ({...prev, width: val}))
-              }
-            />
-            <CustomSlider
-              label="Font Size"
-              value={fontSize}
-              maximumValue={40}
-              handleValueChange={setFontSize}
-            />
-            <CustomPicker
-              label="Font Style"
-              data={fontStyles}
-              currentIndex={fontStyleIdx}
-              onSelected={setFontStyleIdx}
-            />
-            <CustomPicker
-              label="Font Weight"
-              data={fontWeights}
-              currentIndex={fontWeightIdx}
-              onSelected={setFontWeightIdx}
-            />
-            <CustomSlider
-              label="Line Height"
-              value={lineHeight}
-              minimumValue={10}
-              maximumValue={50}
-              handleValueChange={setLineHeight}
-            />
-            <CustomPicker
-              label="Text Align"
-              data={textAlignments}
-              currentIndex={textAlignIdx}
-              onSelected={setTextAlignIdx}
-            />
-            <CustomPicker
-              label="Text Decoration Line"
-              data={textDecorationLines}
-              currentIndex={textDecorationLineIdx}
-              onSelected={setTextDecorationLineIdx}
-            />
-            <CustomSlider
-              label="Text Shadow Radius"
-              value={textShadowRadius}
-              handleValueChange={setTextShadowRadius}
-            />
-            <CustomPicker
-              label="Font Variant"
-              data={fontVariants}
-              currentIndex={fontVariantIdx}
-              onSelected={setFontVariantIdx}
-            />
-            <CustomSlider
-              label="Letter Spacing"
-              step={0.1}
-              value={letterSpacing}
-              handleValueChange={setLetterSpacing}
-            />
-            <CustomPicker
-              label="Text Transform"
-              data={textTransformations}
-              currentIndex={textTransformIdx}
-              onSelected={setTextTransformIdx}
-            />
-          </View>
-          {Platform.OS === 'android' && (
-            <View style={styles.platformContainer}>
-              <Text style={styles.platformContainerTitle}>
-                Android only properties
-              </Text>
-              <CustomPicker
-                label="Text Vertical Align"
-                data={textAlignmentsVertical}
-                currentIndex={textVerticalAlignIdx}
-                onSelected={setTextVerticalAlignIdx}
-              />
-              <CustomSwitch
-                label="Include Font Padding"
-                handleValueChange={setIncludeFontPadding}
-                value={includeFontPadding}
-              />
-            </View>
-          )}
-          {Platform.OS === 'ios' && (
-            <View style={styles.platformContainer}>
-              <Text style={styles.platformContainerTitle}>
-                iOS only properties
-              </Text>
-              <CustomPicker
-                label="Text Decoration Style"
-                data={textDecorationStyles}
-                currentIndex={textDecorationStyleIdx}
-                onSelected={setTextDecorationStyleIdx}
-              />
-              <CustomPicker
-                label="Writing Direction"
-                data={writingDirections}
-                currentIndex={writingDirectionIdx}
-                onSelected={setWritingDirectionIdx}
-              />
-            </View>
-          )}
-        </ScrollView>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-type CustomSwitchProps = {
-  label: string;
-  value: boolean;
-  handleValueChange: (value: boolean) => void;
-};
-
-const CustomSwitch = ({label, handleValueChange, value}: CustomSwitchProps) => {
-  return (
-    <>
-      <Text style={styles.title}>{label}</Text>
-      <View style={{alignItems: 'flex-start'}}>
-        <Switch
-          trackColor={{false: '#767577', true: '#DAA520'}}
-          thumbColor={value ? '#DAA520' : '#f4f3f4'}
-          onValueChange={handleValueChange}
-          value={value}
-        />
-      </View>
-    </>
-  );
-};
-
-type CustomSliderProps = {
-  label: string;
-  value: number;
-  handleValueChange: (value: number) => void;
-  step?: number;
-  minimumValue?: number;
-  maximumValue?: number;
-};
-
-const CustomSlider = ({
-  label,
-  handleValueChange,
-  step = 1,
-  minimumValue = 0,
-  maximumValue = 10,
-  value,
-}: CustomSliderProps) => {
-  return (
-    <>
-      {label && (
-        <Text style={styles.title}>{`${label} (${value.toFixed(2)})`}</Text>
-      )}
-      <View style={styles.wrapperHorizontal}>
-        <Slider
-          thumbTintColor="#06bcee"
-          minimumTrackTintColor="#64d7ffbb"
-          minimumValue={minimumValue}
-          maximumValue={maximumValue}
-          step={step}
-          onValueChange={handleValueChange}
-          value={value}
-        />
-      </View>
-    </>
-  );
-};
-
-type CustomPickerProps = {
-  label: string;
-  data?: ArrayLike<any> | null;
-  currentIndex: number;
-  onSelected: (index: number) => void;
-};
-
-const CustomPicker = ({
-  label,
-  data,
-  currentIndex,
-  onSelected,
-}: CustomPickerProps) => {
-  return (
-    <>
-      <Text style={styles.title}>{label}</Text>
-      <View style={styles.wrapperHorizontal}>
-        <FlatList
-          horizontal
-          data={data}
-          keyExtractor={item => String(item)}
-          renderItem={({item, index}: {item: string; index: number}) => {
-            const selected = index === currentIndex;
-            return (
-              <TouchableWithoutFeedback onPress={() => onSelected(index)}>
-                <View
-                  style={[
-                    styles.itemStyleHorizontal,
-                    selected && styles.itemSelectedStyleHorizontal,
-                  ]}>
-                  <Text
-                    style={{
-                      textAlign: 'center',
-                      color: selected ? 'black' : 'grey',
-                      fontWeight: selected ? 'bold' : 'normal',
-                    }}>
-                    {item + ''}
-                  </Text>
-                </View>
-              </TouchableWithoutFeedback>
-            );
-          }}
-        />
-      </View>
-    </>
-  );
-};
-
-const fontStyles = ['normal', 'italic'];
-const fontVariants = [
-  undefined,
-  'small-caps',
-  'oldstyle-nums',
-  'lining-nums',
-  'tabular-nums',
-  'proportional-nums',
-];
-const fontWeights = [
-  'normal',
-  'bold',
-  '100',
-  '200',
-  '300',
-  '400',
-  '500',
-  '600',
-  '700',
-  '800',
-  '900',
-];
-const textAlignments = ['auto', 'left', 'right', 'center', 'justify'];
-const textDecorationLines = [
-  'none',
-  'underline',
-  'line-through',
-  'underline line-through',
-];
-const textDecorationStyles = ['solid', 'double', 'dotted', 'dashed'];
-const textTransformations = ['none', 'uppercase', 'lowercase', 'capitalize'];
-const textAlignmentsVertical = ['auto', 'top', 'bottom', 'center'];
-const writingDirections = ['auto', 'ltr', 'rtl'];
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  pargraphWrapper: {
-    backgroundColor: 'black',
-  },
-  paragraph: {
-    color: '#fff',
-    textDecorationColor: 'yellow',
-    textShadowColor: 'red',
-    textShadowRadius: 1,
-    padding: 24,
-  },
-  wrapperHorizontal: {
-    justifyContent: 'center',
-    color: 'black',
-  },
-  itemStyleHorizontal: {
-    marginRight: 10,
-    height: 50,
-    padding: 8,
-    borderWidth: 1,
-    borderColor: 'grey',
-    borderRadius: 8,
-    textAlign: 'center',
-    justifyContent: 'center',
-  },
-  itemSelectedStyleHorizontal: {
-    borderWidth: 2,
-    borderColor: '#06bcee',
-  },
-  platformContainer: {
-    marginTop: 8,
-    borderTopWidth: 1,
-  },
-  platformContainerTitle: {
-    marginTop: 8,
-  },
-  title: {
-    fontWeight: 'bold',
-    marginVertical: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-# Reference
-
-## Props
-
-### `color`
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `fontFamily`
-
-| Type   |
-| ------ |
-| string |
-
-The generic font families `system-ui`, `ui-sans-serif`, `ui-serif`, `ui-monospace`, and `ui-rounded` are supported on iOS.
-
----
-
-### `fontSize`
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `fontStyle`
-
-| Type                         |
-| ---------------------------- |
-| enum(`'normal'`, `'italic'`) |
-
----
-
-### `fontWeight`
-
-Specifies font weight. The values `'normal'` and `'bold'` are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen.
-
-| Type                                                                                                                  | Default    |
-| --------------------------------------------------------------------------------------------------------------------- | ---------- |
-| enum(`'normal'`, `'bold'`, `'100'`, `'200'`, `'300'`, `'400'`, `'500'`, `'600'`, `'700'`, `'800'`, `'900'`) or number | `'normal'` |
-
----
-
-### `includeFontPadding` <div className="label android">Android</div>
-
-Set to `false` to remove extra font padding intended to make space for certain ascenders / descenders. With some fonts, this padding can make text look slightly misaligned when centered vertically. For best results also set `textAlignVertical` to `center`.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `true`  |
-
----
-
-### `fontVariant`
-
-Allows you to set all the font variants for a font. Can be set by using an array of enums or a space-separated string e.g. `'small-caps common-ligatures'`.
-
-| Type                                                                                                                 | Default |
-| -------------------------------------------------------------------------------------------------------------------- | ------- |
-| array of enum(`'small-caps'`, `'oldstyle-nums'`, `'lining-nums'`, `'tabular-nums'`, `'proportional-nums'`) or string | `[]`    |
-
----
-
-### `letterSpacing`
-
-Increase or decrease the spacing between characters. By default there is no extra letter spacing.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `lineHeight`
-
-Numeric value that controls the vertical spacing between lines of text within a text element. It specifies the distance between the baselines of consecutive lines of text.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `textAlign`
-
-Specifies text alignment. On Android, the value 'justify' is only supported on Oreo (8.0) or above (API level >= 26). The value will fallback to `left` on lower Android versions.
-
-| Type                                                         | Default  |
-| ------------------------------------------------------------ | -------- |
-| enum(`'auto'`, `'left'`, `'right'`, `'center'`, `'justify'`) | `'auto'` |
-
----
-
-### `textAlignVertical` <div className="label android">Android</div>
-
-An alias for `verticalAlign` style prop, if you use both properties, `verticalAlign` will take precedence over `textAlignVertical`
-
-| Type                                            | Default  |
-| ----------------------------------------------- | -------- |
-| enum(`'auto'`, `'top'`, `'bottom'`, `'center'`) | `'auto'` |
-
----
-
-### `textDecorationColor` <div className="label ios">iOS</div>
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `textDecorationLine`
-
-| Type                                                                        | Default  |
-| --------------------------------------------------------------------------- | -------- |
-| enum(`'none'`, `'underline'`, `'line-through'`, `'underline line-through'`) | `'none'` |
-
----
-
-### `textDecorationStyle` <div className="label ios">iOS</div>
-
-| Type                                                | Default   |
-| --------------------------------------------------- | --------- |
-| enum(`'solid'`, `'double'`, `'dotted'`, `'dashed'`) | `'solid'` |
-
----
-
-### `textShadowColor`
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `textShadowOffset`
-
-| Type                                        |
-| ------------------------------------------- |
-| object: `{width?: number, height?: number}` |
-
----
-
-### `textShadowRadius`
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `textTransform`
-
-| Type                                                         | Default  |
-| ------------------------------------------------------------ | -------- |
-| enum(`'none'`, `'uppercase'`, `'lowercase'`, `'capitalize'`) | `'none'` |
-
----
-
-### `verticalAlign` <div className="label android">Android</div>
-
-| Type                                            | Default  |
-| ----------------------------------------------- | -------- |
-| enum(`'auto'`, `'top'`, `'bottom'`, `'middle'`) | `'auto'` |
-
----
-
-### `writingDirection` <div className="label ios">iOS</div>
-
-| Type                             | Default  |
-| -------------------------------- | -------- |
-| enum(`'auto'`, `'ltr'`, `'rtl'`) | `'auto'` |
-
----
-
-### `userSelect`
-
-It allows the user to select text and to use the native copy and paste functionality. Has precedence over the `selectable` prop.
-
-| Type                                                     | Default |
-| -------------------------------------------------------- | ------- |
-| enum(`'auto'`, `'text'`, `'none'`, `'contain'`, `'all'`) | `none`  |
+---
+id: text-style-props
+title: Text Style Props
+---
+
+### Example
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=js&dependencies=@react-native-community/slider
+import {useState} from 'react';
+import {
+  FlatList,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Switch,
+  Text,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+import Slider from '@react-native-community/slider';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const fontStyles = ['normal', 'italic'];
+const fontVariants = [
+  undefined,
+  'small-caps',
+  'oldstyle-nums',
+  'lining-nums',
+  'tabular-nums',
+  'proportional-nums',
+];
+const fontWeights = [
+  'normal',
+  'bold',
+  '100',
+  '200',
+  '300',
+  '400',
+  '500',
+  '600',
+  '700',
+  '800',
+  '900',
+];
+const textAlignments = ['auto', 'left', 'right', 'center', 'justify'];
+const textDecorationLines = [
+  'none',
+  'underline',
+  'line-through',
+  'underline line-through',
+];
+const textDecorationStyles = ['solid', 'double', 'dotted', 'dashed'];
+const textTransformations = ['none', 'uppercase', 'lowercase', 'capitalize'];
+const textAlignmentsVertical = ['auto', 'top', 'bottom', 'center'];
+const writingDirections = ['auto', 'ltr', 'rtl'];
+
+const App = () => {
+  const [fontSize, setFontSize] = useState(20);
+  const [fontStyleIdx, setFontStyleIdx] = useState(0);
+  const [fontWeightIdx, setFontWeightIdx] = useState(0);
+  const [lineHeight, setLineHeight] = useState(24);
+  const [textAlignIdx, setTextAlignIdx] = useState(0);
+  const [textDecorationLineIdx, setTextDecorationLineIdx] = useState(0);
+  const [includeFontPadding, setIncludeFontPadding] = useState(false);
+  const [textVerticalAlignIdx, setTextVerticalAlignIdx] = useState(0);
+  const [fontVariantIdx, setFontVariantIdx] = useState(0);
+  const [letterSpacing, setLetterSpacing] = useState(0);
+  const [textDecorationStyleIdx, setTextDecorationStyleIdx] = useState(0);
+  const [textTransformIdx, setTextTransformIdx] = useState(0);
+  const [writingDirectionIdx, setWritingDirectionIdx] = useState(0);
+  const [textShadowRadius, setTextShadowRadius] = useState(0);
+  const [textShadowOffset, setTextShadowOffset] = useState({
+    height: 0,
+    width: 0,
+  });
+
+  const [, ...validFontVariants] = fontVariants;
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.pargraphWrapper}>
+          <Text
+            style={[
+              styles.paragraph,
+              {
+                fontSize,
+                fontStyle: fontStyles[fontStyleIdx],
+                fontWeight: fontWeights[fontWeightIdx],
+                lineHeight,
+                textAlign: textAlignments[textAlignIdx],
+                textDecorationLine: textDecorationLines[textDecorationLineIdx],
+                textTransform: textTransformations[textTransformIdx],
+                textAlignVertical: textAlignmentsVertical[textVerticalAlignIdx],
+                fontVariant:
+                  fontVariantIdx === 0
+                    ? undefined
+                    : [validFontVariants[fontVariantIdx - 1]],
+                letterSpacing,
+                includeFontPadding,
+                textDecorationStyle:
+                  textDecorationStyles[textDecorationStyleIdx],
+                writingDirection: writingDirections[writingDirectionIdx],
+                textShadowOffset,
+                textShadowRadius,
+              },
+            ]}>
+            Lorem Ipsum is simply dummy text of the printing and typesetting
+            industry. 112 Likes
+          </Text>
+        </View>
+        <ScrollView style={{padding: 12}}>
+          <View>
+            <Text>Common platform properties</Text>
+            <CustomSlider
+              label="Text Shadow Offset - Height"
+              value={textShadowOffset.height}
+              minimumValue={-40}
+              maximumValue={40}
+              handleValueChange={val =>
+                setTextShadowOffset(prev => ({...prev, height: val}))
+              }
+            />
+            <CustomSlider
+              label="Text Shadow Offset - Width"
+              value={textShadowOffset.width}
+              minimumValue={-40}
+              maximumValue={40}
+              handleValueChange={val =>
+                setTextShadowOffset(prev => ({...prev, width: val}))
+              }
+            />
+            <CustomSlider
+              label="Font Size"
+              value={fontSize}
+              maximumValue={40}
+              handleValueChange={setFontSize}
+            />
+            <CustomPicker
+              label="Font Style"
+              data={fontStyles}
+              currentIndex={fontStyleIdx}
+              onSelected={setFontStyleIdx}
+            />
+            <CustomPicker
+              label="Font Weight"
+              data={fontWeights}
+              currentIndex={fontWeightIdx}
+              onSelected={setFontWeightIdx}
+            />
+            <CustomSlider
+              label="Line Height"
+              value={lineHeight}
+              minimumValue={10}
+              maximumValue={50}
+              handleValueChange={setLineHeight}
+            />
+            <CustomPicker
+              label="Text Align"
+              data={textAlignments}
+              currentIndex={textAlignIdx}
+              onSelected={setTextAlignIdx}
+            />
+            <CustomPicker
+              label="Text Decoration Line"
+              data={textDecorationLines}
+              currentIndex={textDecorationLineIdx}
+              onSelected={setTextDecorationLineIdx}
+            />
+            <CustomSlider
+              label="Text Shadow Radius"
+              value={textShadowRadius}
+              handleValueChange={setTextShadowRadius}
+            />
+            <CustomPicker
+              label="Font Variant"
+              data={fontVariants}
+              currentIndex={fontVariantIdx}
+              onSelected={setFontVariantIdx}
+            />
+            <CustomSlider
+              label="Letter Spacing"
+              step={0.1}
+              value={letterSpacing}
+              handleValueChange={setLetterSpacing}
+            />
+            <CustomPicker
+              label="Text Transform"
+              data={textTransformations}
+              currentIndex={textTransformIdx}
+              onSelected={setTextTransformIdx}
+            />
+          </View>
+          {Platform.OS === 'android' && (
+            <View style={styles.platformContainer}>
+              <Text style={styles.platformContainerTitle}>
+                Android only properties
+              </Text>
+              <CustomPicker
+                label="Text Vertical Align"
+                data={textAlignmentsVertical}
+                currentIndex={textVerticalAlignIdx}
+                onSelected={setTextVerticalAlignIdx}
+              />
+              <CustomSwitch
+                label="Include Font Padding"
+                handleValueChange={setIncludeFontPadding}
+                value={includeFontPadding}
+              />
+            </View>
+          )}
+          {Platform.OS === 'ios' && (
+            <View style={styles.platformContainer}>
+              <Text style={styles.platformContainerTitle}>
+                iOS only properties
+              </Text>
+              <CustomPicker
+                label="Text Decoration Style"
+                data={textDecorationStyles}
+                currentIndex={textDecorationStyleIdx}
+                onSelected={setTextDecorationStyleIdx}
+              />
+              <CustomPicker
+                label="Writing Direction"
+                data={writingDirections}
+                currentIndex={writingDirectionIdx}
+                onSelected={setWritingDirectionIdx}
+              />
+            </View>
+          )}
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const CustomSwitch = ({label, handleValueChange, value}) => {
+  return (
+    <>
+      <Text style={styles.title}>{label}</Text>
+      <View style={{alignItems: 'flex-start'}}>
+        <Switch
+          trackColor={{false: '#767577', true: '#DAA520'}}
+          thumbColor={value ? '#DAA520' : '#f4f3f4'}
+          onValueChange={handleValueChange}
+          value={value}
+        />
+      </View>
+    </>
+  );
+};
+
+const CustomSlider = ({
+  label,
+  handleValueChange,
+  step = 1,
+  minimumValue = 0,
+  maximumValue = 10,
+  value,
+}) => {
+  return (
+    <>
+      {label && (
+        <Text style={styles.title}>{`${label} (${value.toFixed(2)})`}</Text>
+      )}
+      <View style={styles.wrapperHorizontal}>
+        <Slider
+          thumbTintColor="#06bcee"
+          minimumTrackTintColor="#64d7ffbb"
+          minimumValue={minimumValue}
+          maximumValue={maximumValue}
+          step={step}
+          onValueChange={handleValueChange}
+          value={value}
+        />
+      </View>
+    </>
+  );
+};
+
+const CustomPicker = ({label, data, currentIndex, onSelected}) => {
+  return (
+    <>
+      <Text style={styles.title}>{label}</Text>
+      <View style={styles.wrapperHorizontal}>
+        <FlatList
+          bounces
+          horizontal
+          data={data}
+          keyExtractor={item => String(item)}
+          renderItem={({item, index}) => {
+            const selected = index === currentIndex;
+            return (
+              <TouchableWithoutFeedback onPress={() => onSelected(index)}>
+                <View
+                  style={[
+                    styles.itemStyleHorizontal,
+                    selected && styles.itemSelectedStyleHorizontal,
+                  ]}>
+                  <Text
+                    style={{
+                      textAlign: 'center',
+                      color: selected ? 'black' : 'grey',
+                      fontWeight: selected ? 'bold' : 'normal',
+                    }}>
+                    {item + ''}
+                  </Text>
+                </View>
+              </TouchableWithoutFeedback>
+            );
+          }}
+        />
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  pargraphWrapper: {
+    backgroundColor: 'black',
+  },
+  paragraph: {
+    color: '#fff',
+    textDecorationColor: 'yellow',
+    textShadowColor: 'red',
+    textShadowRadius: 1,
+    padding: 24,
+  },
+  wrapperHorizontal: {
+    justifyContent: 'center',
+    color: 'black',
+  },
+  itemStyleHorizontal: {
+    marginRight: 10,
+    height: 50,
+    padding: 8,
+    borderWidth: 1,
+    borderColor: 'grey',
+    borderRadius: 8,
+    textAlign: 'center',
+    justifyContent: 'center',
+  },
+  itemSelectedStyleHorizontal: {
+    borderWidth: 2,
+    borderColor: '#06bcee',
+  },
+  platformContainer: {
+    marginTop: 8,
+    borderTopWidth: 1,
+  },
+  platformContainerTitle: {
+    marginTop: 8,
+  },
+  title: {
+    fontWeight: 'bold',
+    marginVertical: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=tsx&dependencies=@react-native-community/slider
+import {useState} from 'react';
+import {
+  FlatList,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Switch,
+  Text,
+  TouchableWithoutFeedback,
+  View,
+  TextStyle,
+} from 'react-native';
+import Slider from '@react-native-community/slider';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [fontSize, setFontSize] = useState(20);
+  const [fontStyleIdx, setFontStyleIdx] = useState(0);
+  const [fontWeightIdx, setFontWeightIdx] = useState(0);
+  const [lineHeight, setLineHeight] = useState(24);
+  const [textAlignIdx, setTextAlignIdx] = useState(0);
+  const [textDecorationLineIdx, setTextDecorationLineIdx] = useState(0);
+  const [includeFontPadding, setIncludeFontPadding] = useState(false);
+  const [textVerticalAlignIdx, setTextVerticalAlignIdx] = useState(0);
+  const [fontVariantIdx, setFontVariantIdx] = useState(0);
+  const [letterSpacing, setLetterSpacing] = useState(0);
+  const [textDecorationStyleIdx, setTextDecorationStyleIdx] = useState(0);
+  const [textTransformIdx, setTextTransformIdx] = useState(0);
+  const [writingDirectionIdx, setWritingDirectionIdx] = useState(0);
+  const [textShadowRadius, setTextShadowRadius] = useState(0);
+  const [textShadowOffset, setTextShadowOffset] = useState({
+    height: 0,
+    width: 0,
+  });
+
+  const [, ...validFontVariants] = fontVariants;
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.pargraphWrapper}>
+          <Text
+            style={[
+              styles.paragraph,
+              {
+                fontSize,
+                fontStyle: fontStyles[fontStyleIdx],
+                fontWeight: fontWeights[fontWeightIdx],
+                lineHeight,
+                textAlign: textAlignments[textAlignIdx],
+                textDecorationLine: textDecorationLines[textDecorationLineIdx],
+                textTransform: textTransformations[textTransformIdx],
+                textAlignVertical: textAlignmentsVertical[textVerticalAlignIdx],
+                fontVariant:
+                  fontVariantIdx === 0
+                    ? undefined
+                    : [validFontVariants[fontVariantIdx - 1]],
+                letterSpacing,
+                includeFontPadding,
+                textDecorationStyle:
+                  textDecorationStyles[textDecorationStyleIdx],
+                writingDirection: writingDirections[writingDirectionIdx],
+                textShadowOffset,
+                textShadowRadius,
+              } as TextStyle,
+            ]}>
+            Lorem Ipsum is simply dummy text of the printing and typesetting
+            industry. 112 Likes
+          </Text>
+        </View>
+        <ScrollView style={{padding: 12}}>
+          <View>
+            <Text>Common platform properties</Text>
+            <CustomSlider
+              label="Text Shadow Offset - Height"
+              value={textShadowOffset.height}
+              minimumValue={-40}
+              maximumValue={40}
+              handleValueChange={(val: number) =>
+                setTextShadowOffset(prev => ({...prev, height: val}))
+              }
+            />
+            <CustomSlider
+              label="Text Shadow Offset - Width"
+              value={textShadowOffset.width}
+              minimumValue={-40}
+              maximumValue={40}
+              handleValueChange={(val: number) =>
+                setTextShadowOffset(prev => ({...prev, width: val}))
+              }
+            />
+            <CustomSlider
+              label="Font Size"
+              value={fontSize}
+              maximumValue={40}
+              handleValueChange={setFontSize}
+            />
+            <CustomPicker
+              label="Font Style"
+              data={fontStyles}
+              currentIndex={fontStyleIdx}
+              onSelected={setFontStyleIdx}
+            />
+            <CustomPicker
+              label="Font Weight"
+              data={fontWeights}
+              currentIndex={fontWeightIdx}
+              onSelected={setFontWeightIdx}
+            />
+            <CustomSlider
+              label="Line Height"
+              value={lineHeight}
+              minimumValue={10}
+              maximumValue={50}
+              handleValueChange={setLineHeight}
+            />
+            <CustomPicker
+              label="Text Align"
+              data={textAlignments}
+              currentIndex={textAlignIdx}
+              onSelected={setTextAlignIdx}
+            />
+            <CustomPicker
+              label="Text Decoration Line"
+              data={textDecorationLines}
+              currentIndex={textDecorationLineIdx}
+              onSelected={setTextDecorationLineIdx}
+            />
+            <CustomSlider
+              label="Text Shadow Radius"
+              value={textShadowRadius}
+              handleValueChange={setTextShadowRadius}
+            />
+            <CustomPicker
+              label="Font Variant"
+              data={fontVariants}
+              currentIndex={fontVariantIdx}
+              onSelected={setFontVariantIdx}
+            />
+            <CustomSlider
+              label="Letter Spacing"
+              step={0.1}
+              value={letterSpacing}
+              handleValueChange={setLetterSpacing}
+            />
+            <CustomPicker
+              label="Text Transform"
+              data={textTransformations}
+              currentIndex={textTransformIdx}
+              onSelected={setTextTransformIdx}
+            />
+          </View>
+          {Platform.OS === 'android' && (
+            <View style={styles.platformContainer}>
+              <Text style={styles.platformContainerTitle}>
+                Android only properties
+              </Text>
+              <CustomPicker
+                label="Text Vertical Align"
+                data={textAlignmentsVertical}
+                currentIndex={textVerticalAlignIdx}
+                onSelected={setTextVerticalAlignIdx}
+              />
+              <CustomSwitch
+                label="Include Font Padding"
+                handleValueChange={setIncludeFontPadding}
+                value={includeFontPadding}
+              />
+            </View>
+          )}
+          {Platform.OS === 'ios' && (
+            <View style={styles.platformContainer}>
+              <Text style={styles.platformContainerTitle}>
+                iOS only properties
+              </Text>
+              <CustomPicker
+                label="Text Decoration Style"
+                data={textDecorationStyles}
+                currentIndex={textDecorationStyleIdx}
+                onSelected={setTextDecorationStyleIdx}
+              />
+              <CustomPicker
+                label="Writing Direction"
+                data={writingDirections}
+                currentIndex={writingDirectionIdx}
+                onSelected={setWritingDirectionIdx}
+              />
+            </View>
+          )}
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+type CustomSwitchProps = {
+  label: string;
+  value: boolean;
+  handleValueChange: (value: boolean) => void;
+};
+
+const CustomSwitch = ({label, handleValueChange, value}: CustomSwitchProps) => {
+  return (
+    <>
+      <Text style={styles.title}>{label}</Text>
+      <View style={{alignItems: 'flex-start'}}>
+        <Switch
+          trackColor={{false: '#767577', true: '#DAA520'}}
+          thumbColor={value ? '#DAA520' : '#f4f3f4'}
+          onValueChange={handleValueChange}
+          value={value}
+        />
+      </View>
+    </>
+  );
+};
+
+type CustomSliderProps = {
+  label: string;
+  value: number;
+  handleValueChange: (value: number) => void;
+  step?: number;
+  minimumValue?: number;
+  maximumValue?: number;
+};
+
+const CustomSlider = ({
+  label,
+  handleValueChange,
+  step = 1,
+  minimumValue = 0,
+  maximumValue = 10,
+  value,
+}: CustomSliderProps) => {
+  return (
+    <>
+      {label && (
+        <Text style={styles.title}>{`${label} (${value.toFixed(2)})`}</Text>
+      )}
+      <View style={styles.wrapperHorizontal}>
+        <Slider
+          thumbTintColor="#06bcee"
+          minimumTrackTintColor="#64d7ffbb"
+          minimumValue={minimumValue}
+          maximumValue={maximumValue}
+          step={step}
+          onValueChange={handleValueChange}
+          value={value}
+        />
+      </View>
+    </>
+  );
+};
+
+type CustomPickerProps = {
+  label: string;
+  data?: ArrayLike<any> | null;
+  currentIndex: number;
+  onSelected: (index: number) => void;
+};
+
+const CustomPicker = ({
+  label,
+  data,
+  currentIndex,
+  onSelected,
+}: CustomPickerProps) => {
+  return (
+    <>
+      <Text style={styles.title}>{label}</Text>
+      <View style={styles.wrapperHorizontal}>
+        <FlatList
+          horizontal
+          data={data}
+          keyExtractor={item => String(item)}
+          renderItem={({item, index}: {item: string; index: number}) => {
+            const selected = index === currentIndex;
+            return (
+              <TouchableWithoutFeedback onPress={() => onSelected(index)}>
+                <View
+                  style={[
+                    styles.itemStyleHorizontal,
+                    selected && styles.itemSelectedStyleHorizontal,
+                  ]}>
+                  <Text
+                    style={{
+                      textAlign: 'center',
+                      color: selected ? 'black' : 'grey',
+                      fontWeight: selected ? 'bold' : 'normal',
+                    }}>
+                    {item + ''}
+                  </Text>
+                </View>
+              </TouchableWithoutFeedback>
+            );
+          }}
+        />
+      </View>
+    </>
+  );
+};
+
+const fontStyles = ['normal', 'italic'];
+const fontVariants = [
+  undefined,
+  'small-caps',
+  'oldstyle-nums',
+  'lining-nums',
+  'tabular-nums',
+  'proportional-nums',
+];
+const fontWeights = [
+  'normal',
+  'bold',
+  '100',
+  '200',
+  '300',
+  '400',
+  '500',
+  '600',
+  '700',
+  '800',
+  '900',
+];
+const textAlignments = ['auto', 'left', 'right', 'center', 'justify'];
+const textDecorationLines = [
+  'none',
+  'underline',
+  'line-through',
+  'underline line-through',
+];
+const textDecorationStyles = ['solid', 'double', 'dotted', 'dashed'];
+const textTransformations = ['none', 'uppercase', 'lowercase', 'capitalize'];
+const textAlignmentsVertical = ['auto', 'top', 'bottom', 'center'];
+const writingDirections = ['auto', 'ltr', 'rtl'];
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  pargraphWrapper: {
+    backgroundColor: 'black',
+  },
+  paragraph: {
+    color: '#fff',
+    textDecorationColor: 'yellow',
+    textShadowColor: 'red',
+    textShadowRadius: 1,
+    padding: 24,
+  },
+  wrapperHorizontal: {
+    justifyContent: 'center',
+    color: 'black',
+  },
+  itemStyleHorizontal: {
+    marginRight: 10,
+    height: 50,
+    padding: 8,
+    borderWidth: 1,
+    borderColor: 'grey',
+    borderRadius: 8,
+    textAlign: 'center',
+    justifyContent: 'center',
+  },
+  itemSelectedStyleHorizontal: {
+    borderWidth: 2,
+    borderColor: '#06bcee',
+  },
+  platformContainer: {
+    marginTop: 8,
+    borderTopWidth: 1,
+  },
+  platformContainerTitle: {
+    marginTop: 8,
+  },
+  title: {
+    fontWeight: 'bold',
+    marginVertical: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+# Reference
+
+## Props
+
+### `color`
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `fontFamily`
+
+| Type   |
+| ------ |
+| string |
+
+The generic font families `system-ui`, `ui-sans-serif`, `ui-serif`, `ui-monospace`, and `ui-rounded` are supported on iOS.
+
+---
+
+### `fontSize`
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `fontStyle`
+
+| Type                         |
+| ---------------------------- |
+| enum(`'normal'`, `'italic'`) |
+
+---
+
+### `fontWeight`
+
+Specifies font weight. The values `'normal'` and `'bold'` are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen.
+
+| Type                                                                                                                  | Default    |
+| --------------------------------------------------------------------------------------------------------------------- | ---------- |
+| enum(`'normal'`, `'bold'`, `'100'`, `'200'`, `'300'`, `'400'`, `'500'`, `'600'`, `'700'`, `'800'`, `'900'`) or number | `'normal'` |
+
+---
+
+### `includeFontPadding` <div className="label android">Android</div>
+
+Set to `false` to remove extra font padding intended to make space for certain ascenders / descenders. With some fonts, this padding can make text look slightly misaligned when centered vertically. For best results also set `textAlignVertical` to `center`.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `true`  |
+
+---
+
+### `fontVariant`
+
+Allows you to set all the font variants for a font. Can be set by using an array of enums or a space-separated string e.g. `'small-caps common-ligatures'`.
+
+| Type                                                                                                                 | Default |
+| -------------------------------------------------------------------------------------------------------------------- | ------- |
+| array of enum(`'small-caps'`, `'oldstyle-nums'`, `'lining-nums'`, `'tabular-nums'`, `'proportional-nums'`) or string | `[]`    |
+
+---
+
+### `letterSpacing`
+
+Increase or decrease the spacing between characters. By default there is no extra letter spacing.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `lineHeight`
+
+Numeric value that controls the vertical spacing between lines of text within a text element. It specifies the distance between the baselines of consecutive lines of text.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `textAlign`
+
+Specifies text alignment. On Android, the value 'justify' is only supported on Oreo (8.0) or above (API level >= 26). The value will fallback to `left` on lower Android versions.
+
+| Type                                                         | Default  |
+| ------------------------------------------------------------ | -------- |
+| enum(`'auto'`, `'left'`, `'right'`, `'center'`, `'justify'`) | `'auto'` |
+
+---
+
+### `textAlignVertical` <div className="label android">Android</div>
+
+An alias for `verticalAlign` style prop, if you use both properties, `verticalAlign` will take precedence over `textAlignVertical`
+
+| Type                                            | Default  |
+| ----------------------------------------------- | -------- |
+| enum(`'auto'`, `'top'`, `'bottom'`, `'center'`) | `'auto'` |
+
+---
+
+### `textDecorationColor` <div className="label ios">iOS</div>
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `textDecorationLine`
+
+| Type                                                                        | Default  |
+| --------------------------------------------------------------------------- | -------- |
+| enum(`'none'`, `'underline'`, `'line-through'`, `'underline line-through'`) | `'none'` |
+
+---
+
+### `textDecorationStyle` <div className="label ios">iOS</div>
+
+| Type                                                | Default   |
+| --------------------------------------------------- | --------- |
+| enum(`'solid'`, `'double'`, `'dotted'`, `'dashed'`) | `'solid'` |
+
+---
+
+### `textShadowColor`
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `textShadowOffset`
+
+| Type                                        |
+| ------------------------------------------- |
+| object: `{width?: number, height?: number}` |
+
+---
+
+### `textShadowRadius`
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `textTransform`
+
+| Type                                                         | Default  |
+| ------------------------------------------------------------ | -------- |
+| enum(`'none'`, `'uppercase'`, `'lowercase'`, `'capitalize'`) | `'none'` |
+
+---
+
+### `verticalAlign` <div className="label android">Android</div>
+
+| Type                                            | Default  |
+| ----------------------------------------------- | -------- |
+| enum(`'auto'`, `'top'`, `'bottom'`, `'middle'`) | `'auto'` |
+
+---
+
+### `writingDirection` <div className="label ios">iOS</div>
+
+| Type                             | Default  |
+| -------------------------------- | -------- |
+| enum(`'auto'`, `'ltr'`, `'rtl'`) | `'auto'` |
+
+---
+
+### `userSelect`
+
+It allows the user to select text and to use the native copy and paste functionality. Has precedence over the `selectable` prop.
+
+| Type                                                     | Default |
+| -------------------------------------------------------- | ------- |
+| enum(`'auto'`, `'text'`, `'none'`, `'contain'`, `'all'`) | `none`  |
diff --git a/website/versioned_docs/version-0.84/text.md b/website/versioned_docs/version-0.84/text.md
index 3112485639c..0e72ec8c27b 100644
--- a/website/versioned_docs/version-0.84/text.md
+++ b/website/versioned_docs/version-0.84/text.md
@@ -1,781 +1,780 @@
----
-id: text
-title: Text
----
-
-A React component for displaying text.
-
-`Text` supports nesting, styling, and touch handling.
-
-In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines:
-
-```SnackPlayer name=Text%20Function%20Component%20Example
-import React, {useState} from 'react';
-import {Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const TextInANest = () => {
-  const [titleText, setTitleText] = useState("Bird's Nest");
-  const bodyText = 'This is not really a bird nest.';
-
-  const onPressTitle = () => {
-    setTitleText("Bird's Nest [pressed]");
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.baseText}>
-          <Text style={styles.titleText} onPress={onPressTitle}>
-            {titleText}
-            {'\n'}
-            {'\n'}
-          </Text>
-          <Text numberOfLines={5}>{bodyText}</Text>
-        </Text>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  baseText: {
-    fontFamily: 'Cochin',
-  },
-  titleText: {
-    fontSize: 20,
-    fontWeight: 'bold',
-  },
-});
-
-export default TextInANest;
-```
-
-## Nested text
-
-Both Android and iOS allow you to display formatted text by annotating ranges of a string with specific formatting like bold or colored text (`NSAttributedString` on iOS, `SpannableString` on Android). In practice, this is very tedious. For React Native, we decided to use the web paradigm for this, where you can nest text to achieve the same effect.
-
-```SnackPlayer name=Nested%20Text%20Example
-import React from 'react';
-import {Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const BoldAndBeautiful = () => (
-  <SafeAreaProvider>
-    <SafeAreaView style={styles.container}>
-      <Text style={styles.baseText}>
-        I am bold
-        <Text style={styles.innerText}> and red</Text>
-      </Text>
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  baseText: {
-    fontWeight: 'bold',
-  },
-  innerText: {
-    color: 'red',
-  },
-});
-
-export default BoldAndBeautiful;
-```
-
-Behind the scenes, React Native converts this to a flat `NSAttributedString` or `SpannableString` that contains the following information:
-
-```
-"I am bold and red"
-0-9: bold
-9-17: bold, red
-```
-
-## 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.
-
-```tsx
-<Text>
-  <Text>First part and </Text>
-  <Text>second part</Text>
-</Text>
-// Text container: the text will be inline, if the space allows it
-// |First part and second part|
-
-// otherwise, the text will flow as if it was one
-// |First part |
-// |and second |
-// |part       |
-
-<View>
-  <Text>First part and </Text>
-  <Text>second part</Text>
-</View>
-// View container: each text is its own block
-// |First part and|
-// |second part   |
-
-// otherwise, the text will flow in its own block
-// |First part |
-// |and        |
-// |second part|
-```
-
-## Limited Style Inheritance
-
-On the web, the usual way to set a font family and size for the entire document is to take advantage of inherited CSS properties like so:
-
-```css
-html {
-  font-family:
-    'lucida grande', tahoma, verdana, arial, sans-serif;
-  font-size: 11px;
-  color: #141823;
-}
-```
-
-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>`.
-
-```tsx
-// BAD: will raise exception, can't have a text node as child of a <View>
-<View>
-  Some text
-</View>
-
-// GOOD
-<View>
-  <Text>
-    Some text
-  </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.
-
-```tsx
-<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:
-
-```tsx
-const MyAppHeaderText = ({children}) => {
-  return (
-    <MyAppText>
-      <Text style={{fontSize: 20}}>{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.
-
-```tsx
-<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:
-
-- (Developer) React components are designed with strong isolation in mind: You should be able to drop a component anywhere in your application, trusting that as long as the props are the same, it will look and behave the same way. Text properties that could inherit from outside of the props would break this isolation.
-
-- (Implementor) The implementation of React Native is also simplified. We do not need to have a `fontFamily` field on every single element, and we do not need to potentially traverse the tree up to the root every time we display a text node. The style inheritance is only encoded inside of the native Text component and doesn't leak to other components or the system itself.
-
----
-
-# Reference
-
-## Props
-
-### `accessibilityHint`
-
-An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityLanguage` <div className="label ios">iOS</div>
-
-A value indicating which language should be used by the screen reader when the user interacts with the element. It should follow the [BCP 47 specification](https://www.rfc-editor.org/info/bcp47).
-
-See the [iOS `accessibilityLanguage` doc](https://developer.apple.com/documentation/objectivec/nsobject/1615192-accessibilitylanguage) for more information.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityLabel`
-
-Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the `Text` nodes separated by space.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityRole`
-
-Tells the screen reader to treat the currently focused on element as having a specific role.
-
-On iOS, these roles map to corresponding Accessibility Traits. Image button has the same functionality as if the trait was set to both 'image' and 'button'. See the [Accessibility guide](accessibility.md#accessibilitytraits-ios) for more information.
-
-On Android, these roles have similar functionality on TalkBack as adding Accessibility Traits does on Voiceover in iOS
-
-| Type                                                 |
-| ---------------------------------------------------- |
-| [AccessibilityRole](accessibility#accessibilityrole) |
-
----
-
-### `accessibilityState`
-
-Tells the screen reader to treat the currently focused on element as being in a specific state.
-
-You can provide one state, no state, or multiple states. The states must be passed in through an object, e.g. `{selected: true, disabled: true}`.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| [AccessibilityState](accessibility#accessibilitystate) |
-
----
-
-### `accessibilityActions`
-
-Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The `accessibilityActions` property should contain a list of action objects. Each action object should contain the field name and label.
-
-See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
-
-| Type  | Required |
-| ----- | -------- |
-| array | No       |
-
----
-
-### `onAccessibilityAction`
-
-Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.
-
-See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
-
-| Type     | Required |
-| -------- | -------- |
-| function | No       |
-
----
-
-### `accessible`
-
-When set to `true`, indicates that the view is an accessibility element.
-
-See the [Accessibility guide](accessibility#accessible-ios-android) for more information.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `true`  |
-
----
-
-### `adjustsFontSizeToFit`
-
-Specifies whether fonts should be scaled down automatically to fit given style constraints.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
----
-
-### `allowFontScaling`
-
-Specifies whether fonts should scale to respect Text Size accessibility settings.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `true`  |
-
----
-
-### `android_hyphenationFrequency` <div className="label android">Android</div>
-
-Sets the frequency of automatic hyphenation to use when determining word breaks on Android API Level 23+.
-
-| Type                                | Default  |
-| ----------------------------------- | -------- |
-| enum(`'none'`, `'normal'`,`'full'`) | `'none'` |
-
----
-
-### `aria-busy`
-
-Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-checked`
-
-Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
-| Type             | Default |
-| ---------------- | ------- |
-| boolean, 'mixed' | false   |
-
----
-
-### `aria-disabled`
-
-Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-expanded`
-
-Indicates whether an expandable element is currently expanded or collapsed.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-label`
-
-Defines a string value that labels an interactive element.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `aria-selected`
-
-Indicates whether a selectable element is currently selected or not.
-
-| Type    |
-| ------- |
-| boolean |
-
-### `dataDetectorType` <div className="label android">Android</div>
-
-Determines the types of data converted to clickable URLs in the text element. By default, no data types are detected.
-
-You can provide only one type.
-
-| Type                                                          | Default  |
-| ------------------------------------------------------------- | -------- |
-| enum(`'phoneNumber'`, `'link'`, `'email'`, `'none'`, `'all'`) | `'none'` |
-
----
-
-### `disabled` <div className="label android">Android</div>
-
-Specifies the disabled state of the text view for testing purposes.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `dynamicTypeRamp` <div className="label ios">iOS</div>
-
-The [Dynamic Type](https://developer.apple.com/documentation/uikit/uifont/scaling_fonts_automatically) ramp to apply to this element on iOS.
-
-| Type                                                                                                                                                     | Default  |
-| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
-| enum(`'caption2'`, `'caption1'`, `'footnote'`, `'subheadline'`, `'callout'`, `'body'`, `'headline'`, `'title3'`, `'title2'`, `'title1'`, `'largeTitle'`) | `'body'` |
-
----
-
-### `ellipsizeMode`
-
-When `numberOfLines` is set, this prop defines how the text will be truncated. `numberOfLines` must be set in conjunction with this prop.
-
-This can be one of the following values:
-
-- `head` - The line is displayed so that the end fits in the container and the missing text at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz"
-- `middle` - The line is displayed so that the beginning and end fit in the container and the missing text in the middle is indicated by an ellipsis glyph. "ab...yz"
-- `tail` - The line is displayed so that the beginning fits in the container and the missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..."
-- `clip` - Lines are not drawn past the edge of the text container.
-
-:::note
-On Android, when `numberOfLines` is set to a value higher than `1`, only `tail` value will work correctly.
-:::
-
-| Type                                           | Default |
-| ---------------------------------------------- | ------- |
-| enum(`'head'`, `'middle'`, `'tail'`, `'clip'`) | `tail`  |
-
----
-
-### `id`
-
-Used to locate this view from native code. Has precedence over `nativeID` prop.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `maxFontSizeMultiplier`
-
-Specifies the largest possible scale a font can reach when `allowFontScaling` is enabled. Possible values:
-
-- `null/undefined`: inherit from the parent node or the global default (0)
-- `0`: no max, ignore parent/global default
-- `>= 1`: sets the `maxFontSizeMultiplier` of this node to this value
-
-| Type   | Default     |
-| ------ | ----------- |
-| number | `undefined` |
-
----
-
-### `minimumFontScale`
-
-Specifies the smallest possible scale a font can reach when `adjustsFontSizeToFit` is enabled. (values 0.01-1.0).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nativeID`
-
-Used to locate this view from native code.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `numberOfLines`
-
-Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. Setting this property to `0` will result in unsetting this value, which means that no lines restriction will be applied.
-
-This prop is commonly used with `ellipsizeMode`.
-
-| Type   | Default |
-| ------ | ------- |
-| number | `0`     |
-
----
-
-### `onLayout`
-
-Invoked on mount and on layout changes.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
-
----
-
-### `onLongPress`
-
-This function is called on long press.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onMoveShouldSetResponder`
-
-Does this view want to "claim" touch responsiveness? This is called for every touch move on the `View` when it is not the responder.
-
-| Type                                                      |
-| --------------------------------------------------------- |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
-
----
-
-### `onPress`
-
-Function called on user press, triggered after `onPressOut`.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onPressIn`
-
-Called immediately when a touch is engaged, before `onPressOut` and `onPress`.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onPressOut`
-
-Called when a touch is released.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onResponderGrant`
-
-The View is now responding to touch events. This is the time to highlight and show the user what is happening.
-
-On Android, return true from this callback to prevent any other native components from becoming responder until this responder terminates.
-
-| Type                                                              |
-| ----------------------------------------------------------------- |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void ｜ boolean` |
-
----
-
-### `onResponderMove`
-
-The user is moving their finger.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onResponderRelease`
-
-Fired at the end of the touch.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onResponderTerminate`
-
-The responder has been taken from the `View`. Might be taken by other views after a call to `onResponderTerminationRequest`, or might be taken by the OS without asking (e.g., happens with control center/ notification center on iOS)
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onResponderTerminationRequest`
-
-Some other `View` wants to become a responder and is asking this `View` to release its responder. Returning `true` allows its release.
-
-| Type                                                      |
-| --------------------------------------------------------- |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
-
----
-
-### `onStartShouldSetResponderCapture`
-
-If a parent `View` wants to prevent a child `View` from becoming a responder on a touch start, it should have this handler which returns `true`.
-
-| Type                                                      |
-| --------------------------------------------------------- |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
-
----
-
-### `onTextLayout`
-
-Invoked on Text layout change.
-
-| Type                                                 |
-| ---------------------------------------------------- |
-| ([`TextLayoutEvent`](text#textlayoutevent)) => mixed |
-
----
-
-### `pressRetentionOffset`
-
-When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations.
-
-| Type                 |
-| -------------------- |
-| [Rect](rect), number |
-
----
-
-### `ref`
-
-A ref setter that will be assigned an [element node](element-nodes) when mounted.
-
-Note that `Text` components don't provide text nodes, the same way that paragraph elements (`<p>`) on Web are element nodes instead of text nodes. Text nodes can be found as their child nodes instead.
-
----
-
-### `role`
-
-`role` communicates the purpose of a component to the user of an assistive technology. Has precedence over the [`accessibilityRole`](text#accessibilityrole) prop.
-
-| Type                       |
-| -------------------------- |
-| [Role](accessibility#role) |
-
----
-
-### `selectable`
-
-Lets the user select text, to use the native copy and paste functionality.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
----
-
-### `selectionColor` <div className="label android">Android</div>
-
-The highlight color of the text.
-
-| Type            |
-| --------------- |
-| [color](colors) |
-
----
-
-### `style`
-
-| Type                                                                 |
-| -------------------------------------------------------------------- |
-| [Text Style](text-style-props), [View Style Props](view-style-props) |
-
----
-
-### `suppressHighlighting` <div className="label ios">iOS</div>
-
-When `true`, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
----
-
-### `testID`
-
-Used to locate this view in end-to-end tests.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `textBreakStrategy` <div className="label android">Android</div>
-
-Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced`.
-
-| Type                                            | Default       |
-| ----------------------------------------------- | ------------- |
-| enum(`'simple'`, `'highQuality'`, `'balanced'`) | `highQuality` |
-
----
-
-### `lineBreakStrategyIOS` <div className="label ios">iOS</div>
-
-Set line break strategy on iOS 14+. Possible values are `none`, `standard`, `hangul-word` and `push-out`.
-
-| Type                                                        | Default  |
-| ----------------------------------------------------------- | -------- |
-| enum(`'none'`, `'standard'`, `'hangul-word'`, `'push-out'`) | `'none'` |
-
-## Type Definitions
-
-### TextLayout
-
-`TextLayout` object is a part of [`TextLayoutEvent`](text#textlayoutevent) callback and contains the measurement data for `Text` line.
-
-#### Example
-
-```js
-{
-    capHeight: 10.496,
-    ascender: 14.624,
-    descender: 4,
-    width: 28.224,
-    height: 18.624,
-    xHeight: 6.048,
-    x: 0,
-    y: 0
-}
-```
-
-#### Properties
-
-| Name      | Type   | Optional | Description                                                         |
-| --------- | ------ | -------- | ------------------------------------------------------------------- |
-| ascender  | number | No       | The line ascender height after the text layout changes.             |
-| capHeight | number | No       | Height of capital letter above the baseline.                        |
-| descender | number | No       | The line descender height after the text layout changes.            |
-| height    | number | No       | Height of the line after the text layout changes.                   |
-| width     | number | No       | Width of the line after the text layout changes.                    |
-| x         | number | No       | Line X coordinate inside the Text component.                        |
-| xHeight   | number | No       | Distance between the baseline and median of the line (corpus size). |
-| y         | number | No       | Line Y coordinate inside the Text component.                        |
-
-### TextLayoutEvent
-
-`TextLayoutEvent` object is returned in the callback as a result of a component layout change. It contains a key called `lines` with a value which is an array containing [`TextLayout`](text#textlayout) object corresponded to every rendered text line.
-
-#### Example
-
-```js
-{
-  lines: [
-    TextLayout,
-    TextLayout,
-    // ...
-  ];
-  target: 1127;
-}
-```
-
-#### Properties
-
-| Name   | Type                                    | Optional | Description                                           |
-| ------ | --------------------------------------- | -------- | ----------------------------------------------------- |
-| lines  | array of [TextLayout](text#textlayout)s | No       | Provides the TextLayout data for every rendered line. |
-| target | number                                  | No       | The node id of the element.                           |
+---
+id: text
+title: Text
+---
+
+A React component for displaying text.
+
+`Text` supports nesting, styling, and touch handling.
+
+In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines:
+
+```SnackPlayer name=Text%20Function%20Component%20Example
+import {useState} from 'react';
+import {Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const TextInANest = () => {
+  const [titleText, setTitleText] = useState("Bird's Nest");
+  const bodyText = 'This is not really a bird nest.';
+
+  const onPressTitle = () => {
+    setTitleText("Bird's Nest [pressed]");
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.baseText}>
+          <Text style={styles.titleText} onPress={onPressTitle}>
+            {titleText}
+            {'\n'}
+            {'\n'}
+          </Text>
+          <Text numberOfLines={5}>{bodyText}</Text>
+        </Text>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  baseText: {
+    fontFamily: 'Cochin',
+  },
+  titleText: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+});
+
+export default TextInANest;
+```
+
+## Nested text
+
+Both Android and iOS allow you to display formatted text by annotating ranges of a string with specific formatting like bold or colored text (`NSAttributedString` on iOS, `SpannableString` on Android). In practice, this is very tedious. For React Native, we decided to use the web paradigm for this, where you can nest text to achieve the same effect.
+
+```SnackPlayer name=Nested%20Text%20Example
+import {Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const BoldAndBeautiful = () => (
+  <SafeAreaProvider>
+    <SafeAreaView style={styles.container}>
+      <Text style={styles.baseText}>
+        I am bold
+        <Text style={styles.innerText}> and red</Text>
+      </Text>
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  baseText: {
+    fontWeight: 'bold',
+  },
+  innerText: {
+    color: 'red',
+  },
+});
+
+export default BoldAndBeautiful;
+```
+
+Behind the scenes, React Native converts this to a flat `NSAttributedString` or `SpannableString` that contains the following information:
+
+```
+"I am bold and red"
+0-9: bold
+9-17: bold, red
+```
+
+## 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.
+
+```tsx
+<Text>
+  <Text>First part and </Text>
+  <Text>second part</Text>
+</Text>
+// Text container: the text will be inline, if the space allows it
+// |First part and second part|
+
+// otherwise, the text will flow as if it was one
+// |First part |
+// |and second |
+// |part       |
+
+<View>
+  <Text>First part and </Text>
+  <Text>second part</Text>
+</View>
+// View container: each text is its own block
+// |First part and|
+// |second part   |
+
+// otherwise, the text will flow in its own block
+// |First part |
+// |and        |
+// |second part|
+```
+
+## Limited Style Inheritance
+
+On the web, the usual way to set a font family and size for the entire document is to take advantage of inherited CSS properties like so:
+
+```css
+html {
+  font-family:
+    'lucida grande', tahoma, verdana, arial, sans-serif;
+  font-size: 11px;
+  color: #141823;
+}
+```
+
+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>`.
+
+```tsx
+// BAD: will raise exception, can't have a text node as child of a <View>
+<View>
+  Some text
+</View>
+
+// GOOD
+<View>
+  <Text>
+    Some text
+  </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.
+
+```tsx
+<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:
+
+```tsx
+const MyAppHeaderText = ({children}) => {
+  return (
+    <MyAppText>
+      <Text style={{fontSize: 20}}>{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.
+
+```tsx
+<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:
+
+- (Developer) React components are designed with strong isolation in mind: You should be able to drop a component anywhere in your application, trusting that as long as the props are the same, it will look and behave the same way. Text properties that could inherit from outside of the props would break this isolation.
+
+- (Implementor) The implementation of React Native is also simplified. We do not need to have a `fontFamily` field on every single element, and we do not need to potentially traverse the tree up to the root every time we display a text node. The style inheritance is only encoded inside of the native Text component and doesn't leak to other components or the system itself.
+
+---
+
+# Reference
+
+## Props
+
+### `accessibilityHint`
+
+An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityLanguage` <div className="label ios">iOS</div>
+
+A value indicating which language should be used by the screen reader when the user interacts with the element. It should follow the [BCP 47 specification](https://www.rfc-editor.org/info/bcp47).
+
+See the [iOS `accessibilityLanguage` doc](https://developer.apple.com/documentation/objectivec/nsobject/1615192-accessibilitylanguage) for more information.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityLabel`
+
+Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the `Text` nodes separated by space.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityRole`
+
+Tells the screen reader to treat the currently focused on element as having a specific role.
+
+On iOS, these roles map to corresponding Accessibility Traits. Image button has the same functionality as if the trait was set to both 'image' and 'button'. See the [Accessibility guide](accessibility.md#accessibilitytraits-ios) for more information.
+
+On Android, these roles have similar functionality on TalkBack as adding Accessibility Traits does on Voiceover in iOS
+
+| Type                                                 |
+| ---------------------------------------------------- |
+| [AccessibilityRole](accessibility#accessibilityrole) |
+
+---
+
+### `accessibilityState`
+
+Tells the screen reader to treat the currently focused on element as being in a specific state.
+
+You can provide one state, no state, or multiple states. The states must be passed in through an object, e.g. `{selected: true, disabled: true}`.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| [AccessibilityState](accessibility#accessibilitystate) |
+
+---
+
+### `accessibilityActions`
+
+Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The `accessibilityActions` property should contain a list of action objects. Each action object should contain the field name and label.
+
+See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
+
+| Type  | Required |
+| ----- | -------- |
+| array | No       |
+
+---
+
+### `onAccessibilityAction`
+
+Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.
+
+See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `accessible`
+
+When set to `true`, indicates that the view is an accessibility element.
+
+See the [Accessibility guide](accessibility#accessible-ios-android) for more information.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `true`  |
+
+---
+
+### `adjustsFontSizeToFit`
+
+Specifies whether fonts should be scaled down automatically to fit given style constraints.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+---
+
+### `allowFontScaling`
+
+Specifies whether fonts should scale to respect Text Size accessibility settings.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `true`  |
+
+---
+
+### `android_hyphenationFrequency` <div className="label android">Android</div>
+
+Sets the frequency of automatic hyphenation to use when determining word breaks on Android API Level 23+.
+
+| Type                                | Default  |
+| ----------------------------------- | -------- |
+| enum(`'none'`, `'normal'`,`'full'`) | `'none'` |
+
+---
+
+### `aria-busy`
+
+Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-checked`
+
+Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
+
+| Type             | Default |
+| ---------------- | ------- |
+| boolean, 'mixed' | false   |
+
+---
+
+### `aria-disabled`
+
+Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-expanded`
+
+Indicates whether an expandable element is currently expanded or collapsed.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-label`
+
+Defines a string value that labels an interactive element.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `aria-selected`
+
+Indicates whether a selectable element is currently selected or not.
+
+| Type    |
+| ------- |
+| boolean |
+
+### `dataDetectorType` <div className="label android">Android</div>
+
+Determines the types of data converted to clickable URLs in the text element. By default, no data types are detected.
+
+You can provide only one type.
+
+| Type                                                          | Default  |
+| ------------------------------------------------------------- | -------- |
+| enum(`'phoneNumber'`, `'link'`, `'email'`, `'none'`, `'all'`) | `'none'` |
+
+---
+
+### `disabled` <div className="label android">Android</div>
+
+Specifies the disabled state of the text view for testing purposes.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `dynamicTypeRamp` <div className="label ios">iOS</div>
+
+The [Dynamic Type](https://developer.apple.com/documentation/uikit/uifont/scaling_fonts_automatically) ramp to apply to this element on iOS.
+
+| Type                                                                                                                                                     | Default  |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
+| enum(`'caption2'`, `'caption1'`, `'footnote'`, `'subheadline'`, `'callout'`, `'body'`, `'headline'`, `'title3'`, `'title2'`, `'title1'`, `'largeTitle'`) | `'body'` |
+
+---
+
+### `ellipsizeMode`
+
+When `numberOfLines` is set, this prop defines how the text will be truncated. `numberOfLines` must be set in conjunction with this prop.
+
+This can be one of the following values:
+
+- `head` - The line is displayed so that the end fits in the container and the missing text at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz"
+- `middle` - The line is displayed so that the beginning and end fit in the container and the missing text in the middle is indicated by an ellipsis glyph. "ab...yz"
+- `tail` - The line is displayed so that the beginning fits in the container and the missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..."
+- `clip` - Lines are not drawn past the edge of the text container.
+
+:::note
+On Android, when `numberOfLines` is set to a value higher than `1`, only `tail` value will work correctly.
+:::
+
+| Type                                           | Default |
+| ---------------------------------------------- | ------- |
+| enum(`'head'`, `'middle'`, `'tail'`, `'clip'`) | `tail`  |
+
+---
+
+### `id`
+
+Used to locate this view from native code. Has precedence over `nativeID` prop.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `maxFontSizeMultiplier`
+
+Specifies the largest possible scale a font can reach when `allowFontScaling` is enabled. Possible values:
+
+- `null/undefined`: inherit from the parent node or the global default (0)
+- `0`: no max, ignore parent/global default
+- `>= 1`: sets the `maxFontSizeMultiplier` of this node to this value
+
+| Type   | Default     |
+| ------ | ----------- |
+| number | `undefined` |
+
+---
+
+### `minimumFontScale`
+
+Specifies the smallest possible scale a font can reach when `adjustsFontSizeToFit` is enabled. (values 0.01-1.0).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nativeID`
+
+Used to locate this view from native code.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `numberOfLines`
+
+Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. Setting this property to `0` will result in unsetting this value, which means that no lines restriction will be applied.
+
+This prop is commonly used with `ellipsizeMode`.
+
+| Type   | Default |
+| ------ | ------- |
+| number | `0`     |
+
+---
+
+### `onLayout`
+
+Invoked on mount and on layout changes.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
+
+---
+
+### `onLongPress`
+
+This function is called on long press.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onMoveShouldSetResponder`
+
+Does this view want to "claim" touch responsiveness? This is called for every touch move on the `View` when it is not the responder.
+
+| Type                                                      |
+| --------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
+
+---
+
+### `onPress`
+
+Function called on user press, triggered after `onPressOut`.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onPressIn`
+
+Called immediately when a touch is engaged, before `onPressOut` and `onPress`.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onPressOut`
+
+Called when a touch is released.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onResponderGrant`
+
+The View is now responding to touch events. This is the time to highlight and show the user what is happening.
+
+On Android, return true from this callback to prevent any other native components from becoming responder until this responder terminates.
+
+| Type                                                              |
+| ----------------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void ｜ boolean` |
+
+---
+
+### `onResponderMove`
+
+The user is moving their finger.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onResponderRelease`
+
+Fired at the end of the touch.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onResponderTerminate`
+
+The responder has been taken from the `View`. Might be taken by other views after a call to `onResponderTerminationRequest`, or might be taken by the OS without asking (e.g., happens with control center/ notification center on iOS)
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onResponderTerminationRequest`
+
+Some other `View` wants to become a responder and is asking this `View` to release its responder. Returning `true` allows its release.
+
+| Type                                                      |
+| --------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
+
+---
+
+### `onStartShouldSetResponderCapture`
+
+If a parent `View` wants to prevent a child `View` from becoming a responder on a touch start, it should have this handler which returns `true`.
+
+| Type                                                      |
+| --------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
+
+---
+
+### `onTextLayout`
+
+Invoked on Text layout change.
+
+| Type                                                 |
+| ---------------------------------------------------- |
+| ([`TextLayoutEvent`](text#textlayoutevent)) => mixed |
+
+---
+
+### `pressRetentionOffset`
+
+When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations.
+
+| Type                 |
+| -------------------- |
+| [Rect](rect), number |
+
+---
+
+### `ref`
+
+A ref setter that will be assigned an [element node](element-nodes) when mounted.
+
+Note that `Text` components don't provide text nodes, the same way that paragraph elements (`<p>`) on Web are element nodes instead of text nodes. Text nodes can be found as their child nodes instead.
+
+---
+
+### `role`
+
+`role` communicates the purpose of a component to the user of an assistive technology. Has precedence over the [`accessibilityRole`](text#accessibilityrole) prop.
+
+| Type                       |
+| -------------------------- |
+| [Role](accessibility#role) |
+
+---
+
+### `selectable`
+
+Lets the user select text, to use the native copy and paste functionality.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+---
+
+### `selectionColor` <div className="label android">Android</div>
+
+The highlight color of the text.
+
+| Type            |
+| --------------- |
+| [color](colors) |
+
+---
+
+### `style`
+
+| Type                                                                 |
+| -------------------------------------------------------------------- |
+| [Text Style](text-style-props), [View Style Props](view-style-props) |
+
+---
+
+### `suppressHighlighting` <div className="label ios">iOS</div>
+
+When `true`, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+---
+
+### `testID`
+
+Used to locate this view in end-to-end tests.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `textBreakStrategy` <div className="label android">Android</div>
+
+Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced`.
+
+| Type                                            | Default       |
+| ----------------------------------------------- | ------------- |
+| enum(`'simple'`, `'highQuality'`, `'balanced'`) | `highQuality` |
+
+---
+
+### `lineBreakStrategyIOS` <div className="label ios">iOS</div>
+
+Set line break strategy on iOS 14+. Possible values are `none`, `standard`, `hangul-word` and `push-out`.
+
+| Type                                                        | Default  |
+| ----------------------------------------------------------- | -------- |
+| enum(`'none'`, `'standard'`, `'hangul-word'`, `'push-out'`) | `'none'` |
+
+## Type Definitions
+
+### TextLayout
+
+`TextLayout` object is a part of [`TextLayoutEvent`](text#textlayoutevent) callback and contains the measurement data for `Text` line.
+
+#### Example
+
+```js
+{
+    capHeight: 10.496,
+    ascender: 14.624,
+    descender: 4,
+    width: 28.224,
+    height: 18.624,
+    xHeight: 6.048,
+    x: 0,
+    y: 0
+}
+```
+
+#### Properties
+
+| Name      | Type   | Optional | Description                                                         |
+| --------- | ------ | -------- | ------------------------------------------------------------------- |
+| ascender  | number | No       | The line ascender height after the text layout changes.             |
+| capHeight | number | No       | Height of capital letter above the baseline.                        |
+| descender | number | No       | The line descender height after the text layout changes.            |
+| height    | number | No       | Height of the line after the text layout changes.                   |
+| width     | number | No       | Width of the line after the text layout changes.                    |
+| x         | number | No       | Line X coordinate inside the Text component.                        |
+| xHeight   | number | No       | Distance between the baseline and median of the line (corpus size). |
+| y         | number | No       | Line Y coordinate inside the Text component.                        |
+
+### TextLayoutEvent
+
+`TextLayoutEvent` object is returned in the callback as a result of a component layout change. It contains a key called `lines` with a value which is an array containing [`TextLayout`](text#textlayout) object corresponded to every rendered text line.
+
+#### Example
+
+```js
+{
+  lines: [
+    TextLayout,
+    TextLayout,
+    // ...
+  ];
+  target: 1127;
+}
+```
+
+#### Properties
+
+| Name   | Type                                    | Optional | Description                                           |
+| ------ | --------------------------------------- | -------- | ----------------------------------------------------- |
+| lines  | array of [TextLayout](text#textlayout)s | No       | Provides the TextLayout data for every rendered line. |
+| target | number                                  | No       | The node id of the element.                           |
diff --git a/website/versioned_docs/version-0.84/textinput.md b/website/versioned_docs/version-0.84/textinput.md
index e6b91315ff2..f9adb52b513 100644
--- a/website/versioned_docs/version-0.84/textinput.md
+++ b/website/versioned_docs/version-0.84/textinput.md
@@ -1,1146 +1,1146 @@
----
-id: textinput
-title: TextInput
----
-
-A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.
-
-The most basic use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. A minimal example:
-
-```SnackPlayer name=TextInput%20Example
-import React from 'react';
-import {StyleSheet, TextInput} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const TextInputExample = () => {
-  const [text, onChangeText] = React.useState('Useless Text');
-  const [number, onChangeNumber] = React.useState('');
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView>
-        <TextInput
-          style={styles.input}
-          onChangeText={onChangeText}
-          value={text}
-        />
-        <TextInput
-          style={styles.input}
-          onChangeText={onChangeNumber}
-          value={number}
-          placeholder="useless placeholder"
-          keyboardType="numeric"
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  input: {
-    height: 40,
-    margin: 12,
-    borderWidth: 1,
-    padding: 10,
-  },
-});
-
-export default TextInputExample;
-```
-
-Two methods exposed via the native element are `.focus()` and `.blur()` that will focus or blur the TextInput programmatically.
-
-Note that some props are only available with `multiline={true/false}`. Additionally, border styles that apply to only one side of the element (e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if `multiline=true`. To achieve the same effect, you can wrap your `TextInput` in a `View`:
-
-```SnackPlayer name=Multiline%20TextInput%20Example
-import React from 'react';
-import {TextInput, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const MultilineTextInputExample = () => {
-  const [value, onChangeText] = React.useState('Useless Multiline Placeholder');
-
-  // If you type something in the text box that is a color,
-  // the background will change to that color.
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView
-        style={{
-          flex: 1,
-          backgroundColor: value.toLowerCase(),
-        }}>
-        <TextInput
-          editable
-          multiline
-          numberOfLines={4}
-          maxLength={40}
-          onChangeText={text => onChangeText(text)}
-          value={value}
-          style={styles.textInput}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  textInput: {
-    padding: 10,
-    borderColor: '#000',
-    borderWidth: 1,
-    margin: 12,
-  },
-});
-
-export default MultilineTextInputExample;
-```
-
-`TextInput` has a border at the bottom of its view by default. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this are to either not set height explicitly, in which case the system will take care of displaying the border in the correct position, or to not display the border by setting `underlineColorAndroid` to transparent.
-
-Note that on Android performing text selection in an input can change the app's activity `windowSoftInputMode` param to `adjustResize`. This may cause issues with components that have position: 'absolute' while the keyboard is active. To avoid this behavior either specify `windowSoftInputMode` in AndroidManifest.xml ( https://developer.android.com/guide/topics/manifest/activity-element.html ) or control this param programmatically with native code.
-
----
-
-# Reference
-
-## Props
-
-### [View Props](view.md#props)
-
-Inherits [View Props](view.md#props).
-
----
-
-### `allowFontScaling`
-
-Specifies whether fonts should scale to respect Text Size accessibility settings. The default is `true`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `autoCapitalize`
-
-Tells `TextInput` to automatically capitalize certain characters. This property is not supported by some keyboard types such as `name-phone-pad`.
-
-- `characters`: all characters.
-- `words`: first letter of each word.
-- `sentences`: first letter of each sentence (_default_).
-- `none`: don't auto capitalize anything.
-
-| Type                                             |
-| ------------------------------------------------ |
-| enum('none', 'sentences', 'words', 'characters') |
-
----
-
-### `autoComplete`
-
-Specifies autocomplete hints for the system, so it can provide autofill. On Android, the system will always attempt to offer autofill by using heuristics to identify the type of content. To disable autocomplete, set `autoComplete` to `off`.
-
-The following values work across platforms:
-
-- `additional-name`
-- `address-line1`
-- `address-line2`
-- `birthdate-day` (iOS 17+)
-- `birthdate-full` (iOS 17+)
-- `birthdate-month` (iOS 17+)
-- `birthdate-year` (iOS 17+)
-- `cc-csc` (iOS 17+)
-- `cc-exp` (iOS 17+)
-- `cc-exp-day` (iOS 17+)
-- `cc-exp-month` (iOS 17+)
-- `cc-exp-year` (iOS 17+)
-- `cc-number`
-- `country`
-- `current-password`
-- `email`
-- `family-name`
-- `given-name`
-- `honorific-prefix`
-- `honorific-suffix`
-- `name`
-- `new-password`
-- `off`
-- `one-time-code`
-- `postal-code`
-- `street-address`
-- `tel`
-- `username`
-
-<div className="label basic ios">iOS</div>
-
-The following values work on iOS only:
-
-- `cc-family-name` (iOS 17+)
-- `cc-given-name` (iOS 17+)
-- `cc-middle-name` (iOS 17+)
-- `cc-name` (iOS 17+)
-- `cc-type` (iOS 17+)
-- `nickname`
-- `organization`
-- `organization-title`
-- `url`
-
-<div className="label basic android">Android</div>
-
-The following values work on Android only:
-
-- `gender`
-- `name-family`
-- `name-given`
-- `name-middle`
-- `name-middle-initial`
-- `name-prefix`
-- `name-suffix`
-- `password`
-- `password-new`
-- `postal-address`
-- `postal-address-country`
-- `postal-address-extended`
-- `postal-address-extended-postal-code`
-- `postal-address-locality`
-- `postal-address-region`
-- `sms-otp`
-- `tel-country-code`
-- `tel-device`
-- `tel-national`
-- `username-new`
-
-| Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| enum('additional-name', 'address-line1', 'address-line2', 'birthdate-day', 'birthdate-full', 'birthdate-month', 'birthdate-year', 'cc-csc', 'cc-exp', 'cc-exp-day', 'cc-exp-month', 'cc-exp-year', 'cc-number', 'country', 'current-password', 'email', 'family-name', 'given-name', 'honorific-prefix', 'honorific-suffix', 'name', 'new-password', 'off', 'one-time-code', 'postal-code', 'street-address', 'tel', 'username', 'cc-family-name', 'cc-given-name', 'cc-middle-name', 'cc-name', 'cc-type', 'nickname', 'organization', 'organization-title', 'url', 'gender', 'name-family', 'name-given', 'name-middle', 'name-middle-initial', 'name-prefix', 'name-suffix', 'password', 'password-new', 'postal-address', 'postal-address-country', 'postal-address-extended', 'postal-address-extended-postal-code', 'postal-address-locality', 'postal-address-region', 'sms-otp', 'tel-country-code', 'tel-device', 'tel-national', 'username-new') |
-
----
-
-### `autoCorrect`
-
-If `false`, disables auto-correct. The default value is `true`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `autoFocus`
-
-If `true`, focuses the input. The default value is `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### 🗑️ `blurOnSubmit`
-
-:::warning[Deprecated]
-Note that `submitBehavior` now takes the place of `blurOnSubmit` and will override any behavior defined by `blurOnSubmit`. See [submitBehavior](textinput#submitbehavior).
-:::
-
-If `true`, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting `blurOnSubmit` to `true` means that pressing return will blur the field and trigger the `onSubmitEditing` event instead of inserting a newline into the field.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `caretHidden`
-
-If `true`, caret is hidden. The default value is `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `clearButtonMode` <div className="label ios">iOS</div>
-
-When the clear button should appear on the right side of the text view. This property is supported only for single-line TextInput component. The default value is `never`.
-
-| Type                                                       |
-| ---------------------------------------------------------- |
-| enum('never', 'while-editing', 'unless-editing', 'always') |
-
----
-
-### `clearTextOnFocus` <div className="label ios">iOS</div>
-
-If `true`, clears the text field automatically when editing begins.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `contextMenuHidden`
-
-If `true`, context menu is hidden. The default value is `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `dataDetectorTypes` <div className="label ios">iOS</div>
-
-Determines the types of data converted to clickable URLs in the text input. Only valid if `multiline={true}` and `editable={false}`. By default no data types are detected.
-
-You can provide one type or an array of many types.
-
-Possible values for `dataDetectorTypes` are:
-
-- `'phoneNumber'`
-- `'link'`
-- `'address'`
-- `'calendarEvent'`
-- `'none'`
-- `'all'`
-
-| Type                                                                                                                                                     |
-| -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), ,array of enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all') |
-
----
-
-### `defaultValue`
-
-Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `disableKeyboardShortcuts` <div className="label ios">iOS</div>
-
-If `true`, the keyboard shortcuts (undo/redo and copy buttons) are disabled.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `cursorColor` <div className="label android">Android</div>
-
-When provided it will set the color of the cursor (or "caret") in the component. Unlike the behavior of `selectionColor` the cursor color will be set independently from the color of the text selection box.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `disableFullscreenUI` <div className="label android">Android</div>
-
-When `false`, if there is a small amount of space available around a text input (e.g. landscape orientation on a phone), the OS may choose to have the user edit the text inside of a full screen text input mode. When `true`, this feature is disabled and users will always edit the text directly inside of the text input. Defaults to `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `editable`
-
-If `false`, text is not editable. The default value is `true`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `enablesReturnKeyAutomatically` <div className="label ios">iOS</div>
-
-If `true`, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `enterKeyHint`
-
-Determines what text should be shown to the return key. Has precedence over the `returnKeyType` prop.
-
-The following values work across platforms:
-
-- `done`
-- `next`
-- `search`
-- `send`
-- `go`
-
-_Android Only_
-
-The following values work on Android only:
-
-- `previous`
-
-_iOS Only_
-
-The following values work on iOS only:
-
-- `enter`
-
-| Type                                                              |
-| ----------------------------------------------------------------- |
-| enum('enter', 'done', 'next', 'previous', 'search', 'send', 'go') |
-
----
-
-### `importantForAutofill` <div className="label android">Android</div>
-
-Tells the operating system whether the individual fields in your app should be included in a view structure for autofill purposes on Android API Level 26+. Possible values are `auto`, `no`, `noExcludeDescendants`, `yes`, and `yesExcludeDescendants`. The default value is `auto`.
-
-- `auto`: Let the Android System use its heuristics to determine if the view is important for autofill.
-- `no`: This view isn't important for autofill.
-- `noExcludeDescendants`: This view and its children aren't important for autofill.
-- `yes`: This view is important for autofill.
-- `yesExcludeDescendants`: This view is important for autofill, but its children aren't important for autofill.
-
-| Type                                                                       |
-| -------------------------------------------------------------------------- |
-| enum('auto', 'no', 'noExcludeDescendants', 'yes', 'yesExcludeDescendants') |
-
----
-
-### `inlineImageLeft` <div className="label android">Android</div>
-
-If defined, the provided image resource will be rendered on the left. The image resource must be inside `/android/app/src/main/res/drawable` and referenced like
-
-```
-<TextInput
- inlineImageLeft='search_icon'
-/>
-```
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `inlineImagePadding` <div className="label android">Android</div>
-
-Padding between the inline image, if any, and the text input itself.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `inputAccessoryViewID` <div className="label ios">iOS</div>
-
-An optional identifier which links a custom [InputAccessoryView](inputaccessoryview.md) to this text input. The InputAccessoryView is rendered above the keyboard when this text input is focused.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `inputAccessoryViewButtonLabel` <div className="label ios">iOS</div>
-
-An optional label that overrides the default [InputAccessoryView](inputaccessoryview.md) button label.
-
-By default, the default button label is not localized. Use this property to provide a localized version.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `inputMode`
-
-Works like the `inputmode` attribute in HTML, it determines which keyboard to open, e.g. `numeric` and has precedence over `keyboardType`.
-
-Support the following values:
-
-- `none`
-- `text`
-- `decimal`
-- `numeric`
-- `tel`
-- `search`
-- `email`
-- `url`
-
-| Type                                                                        |
-| --------------------------------------------------------------------------- |
-| enum('decimal', 'email', 'none', 'numeric', 'search', 'tel', 'text', 'url') |
-
----
-
-### `keyboardAppearance` <div className="label ios">iOS</div>
-
-Determines the color of the keyboard.
-
-| Type                             |
-| -------------------------------- |
-| enum('default', 'light', 'dark') |
-
----
-
-### `keyboardType`
-
-Determines which keyboard to open, e.g.`numeric`.
-
-See screenshots of all the types [here](https://davidl.fr/blog/keyboard-react-native-ios-android#all-react-native-keyboard-type-examples-i-os-on-the-left-android-on-the-right).
-
-The following values work across platforms:
-
-- `default`
-- `number-pad`
-- `decimal-pad`
-- `numeric`
-- `email-address`
-- `phone-pad`
-- `url`
-
-_iOS Only_
-
-The following values work on iOS only:
-
-- `ascii-capable`
-- `numbers-and-punctuation`
-- `name-phone-pad`
-- `twitter`
-- `web-search`
-
-_Android Only_
-
-The following values work on Android only:
-
-- `visible-password`
-
-| Type                                                                                                                                                                                                    |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', 'visible-password') |
-
----
-
-### `lineBreakStrategyIOS` <div className="label ios">iOS</div>
-
-Set line break strategy on iOS 14+. Possible values are `none`, `standard`, `hangul-word` and `push-out`.
-
-| Type                                                        | Default  |
-| ----------------------------------------------------------- | -------- |
-| enum(`'none'`, `'standard'`, `'hangul-word'`, `'push-out'`) | `'none'` |
-
----
-
-### `lineBreakModeIOS` <div className="label ios">iOS</div>
-
-Set line break mode on iOS. Possible values are `wordWrapping`, `char`, `clip`, `head`, `middle` and `tail`.
-
-| Type                                                                       | Default          |
-| -------------------------------------------------------------------------- | ---------------- |
-| enum(`'wordWrapping'`, `'char'`, `'clip'`, `'head'`, `'middle'`, `'tail'`) | `'wordWrapping'` |
-
----
-
-### `maxFontSizeMultiplier`
-
-Specifies largest possible scale a font can reach when `allowFontScaling` is enabled. Possible values:
-
-- `null/undefined` (default): inherit from the parent node or the global default (0)
-- `0`: no max, ignore parent/global default
-- `>= 1`: sets the `maxFontSizeMultiplier` of this node to this value
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `maxLength`
-
-Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `multiline`
-
-If `true`, the text input can be multiple lines. The default value is `false`.
-
-:::note
-It is important to note that this aligns the text to the top on iOS, and centers it on Android. Use with `textAlignVertical` set to `top` for the same behavior in both platforms.
-:::
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `numberOfLines`
-
-:::note
-`numberOfLines` on iOS is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Sets the maximum number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `onBlur`
-
-Callback that is called when the text input is blurred.
-
-:::note
-If you are attempting to access the `text` value from `nativeEvent` keep in mind that the resulting value you get can be `undefined` which can cause unintended errors. If you are trying to find the last value of TextInput, you can use the [`onEndEditing`](textinput#onendediting) event, which is fired upon completion of editing.
-:::
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
-
----
-
-### `onChange`
-
-Callback that is called when the text input's text changes.
-
-| Type                                                  |
-| ----------------------------------------------------- |
-| (`{nativeEvent: {eventCount, target, text}}`) => void |
-
----
-
-### `onChangeText`
-
-Callback that is called when the text input's text changes. Changed text is passed as a single string argument to the callback handler.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onContentSizeChange`
-
-Callback that is called when the text input's content size changes.
-
-Only called for multiline text inputs.
-
-| Type                                                       |
-| ---------------------------------------------------------- |
-| (`{nativeEvent: {contentSize: {width, height} }}`) => void |
-
----
-
-### `onEndEditing`
-
-Callback that is called when text input ends.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onPressIn`
-
-Callback that is called when a touch is engaged.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onPressOut`
-
-Callback that is called when a touch is released.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onFocus`
-
-Callback that is called when the text input is focused.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
-
----
-
-### `onKeyPress`
-
-Callback that is called when a key is pressed. This will be called with object where `keyValue` is `'Enter'` or `'Backspace'` for respective keys and the typed-in character otherwise including `' '` for space. Fires before `onChange` callbacks. Note: on Android only the inputs from soft keyboard are handled, not the hardware keyboard inputs.
-
-| Type                                        |
-| ------------------------------------------- |
-| (`{nativeEvent: {key: keyValue} }`) => void |
-
----
-
-### `onLayout`
-
-Invoked on mount and on layout changes.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
-
----
-
-### `onScroll`
-
-Invoked on content scroll. May also contain other properties from `ScrollEvent` but on Android `contentSize` is not provided for performance reasons.
-
-| Type                                                |
-| --------------------------------------------------- |
-| (`{nativeEvent: {contentOffset: {x, y} }}`) => void |
-
----
-
-### `onSelectionChange`
-
-Callback that is called when the text input selection is changed.
-
-| Type                                                  |
-| ----------------------------------------------------- |
-| (`{nativeEvent: {selection: {start, end} }}`) => void |
-
----
-
-### `onSubmitEditing`
-
-Callback that is called when the text input's submit button is pressed.
-
-| Type                                                  |
-| ----------------------------------------------------- |
-| (`{nativeEvent: {text, eventCount, target}}`) => void |
-
-Note that on iOS this method isn't called when using `keyboardType="phone-pad"`.
-
----
-
-### `placeholder`
-
-The string that will be rendered before text input has been entered.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `placeholderTextColor`
-
-The text color of the placeholder string.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `readOnly`
-
-If `true`, text is not editable. The default value is `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `returnKeyLabel` <div className="label android">Android</div>
-
-Sets the return key to the label. Use it instead of `returnKeyType`.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `returnKeyType`
-
-Determines how the return key should look. On Android you can also use `returnKeyLabel`.
-
-_Cross platform_
-
-The following values work across platforms:
-
-- `done`
-- `go`
-- `next`
-- `search`
-- `send`
-
-_Android Only_
-
-The following values work on Android only:
-
-- `none`
-- `previous`
-
-_iOS Only_
-
-The following values work on iOS only:
-
-- `default`
-- `emergency-call`
-- `google`
-- `join`
-- `route`
-- `yahoo`
-
-| Type                                                                                                                              |
-| --------------------------------------------------------------------------------------------------------------------------------- |
-| enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo') |
-
-### `rejectResponderTermination` <div className="label ios">iOS</div>
-
-If `true`, allows TextInput to pass touch events to the parent component. This allows components such as SwipeableListView to be swipeable from the TextInput on iOS, as is the case on Android by default. If `false`, TextInput always asks to handle the input (except when disabled). The default value is `true`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `rows` <div className="label android">Android</div>
-
-Sets the number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `scrollEnabled` <div className="label ios">iOS</div>
-
-If `false`, scrolling of the text view will be disabled. The default value is `true`. Only works with `multiline={true}`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `secureTextEntry`
-
-If `true`, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is `false`. Does not work with `multiline={true}`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `selection`
-
-The start and end of the text input's selection. Set start and end to the same value to position the cursor.
-
-| Type                                  |
-| ------------------------------------- |
-| object: `{start: number,end: number}` |
-
----
-
-### `selectionColor`
-
-The highlight, selection handle and cursor color of the text input.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `selectionHandleColor` <div className="label android">Android</div>
-
-Sets the color of the selection handle. Unlike `selectionColor`, it allows the selection handle color to be customized independently of the selection's color.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `selectTextOnFocus`
-
-If `true`, all text will automatically be selected on focus.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `showSoftInputOnFocus`
-
-When `false`, it will prevent the soft keyboard from showing when the field is focused. The default value is `true`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `smartInsertDelete` <div className="label ios">iOS</div>
-
-If `false`, the iOS system will not insert an extra space after a paste operation neither delete one or two spaces after a cut or delete operation.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `true`  |
-
----
-
-### `spellCheck` <div className="label ios">iOS</div>
-
-If `false`, disables spell-check style (i.e. red underlines). The default value is inherited from `autoCorrect`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `submitBehavior`
-
-When the return key is pressed,
-
-For single line inputs:
-
-- `'newline'` defaults to `'blurAndSubmit'`
-- `undefined` defaults to `'blurAndSubmit'`
-
-For multiline inputs:
-
-- `'newline'` adds a newline
-- `undefined` defaults to `'newline'`
-
-For both single line and multiline inputs:
-
-- `'submit'` will only send a submit event and not blur the input
-- `'blurAndSubmit`' will both blur the input and send a submit event
-
-| Type                                       |
-| ------------------------------------------ |
-| enum('submit', 'blurAndSubmit', 'newline') |
-
----
-
-### `textAlign`
-
-Align the input text to the left, center, or right sides of the input field.
-
-Possible values for `textAlign` are:
-
-- `left`
-- `center`
-- `right`
-
-| Type                            |
-| ------------------------------- |
-| enum('left', 'center', 'right') |
-
----
-
-### `textContentType` <div className="label ios">iOS</div>
-
-Give the keyboard and the system information about the expected semantic meaning for the content that users enter.
-
-:::note
-[`autoComplete`](#autocomplete), provides the same functionality and is available for all platforms. You can use [`Platform.select`](/docs/next/platform#select) for differing platform behaviors.
-
-Avoid using both `textContentType` and `autoComplete`. For backwards compatibility, `textContentType` takes precedence when both properties are set.
-:::
-
-You can set `textContentType` to `username` or `password` to enable autofill of login details from the device keychain.
-
-`newPassword` can be used to indicate a new password input the user may want to save in the keychain, and `oneTimeCode` can be used to indicate that a field can be autofilled by a code arriving in an SMS.
-
-To disable autofill, set `textContentType` to `none`.
-
-Possible values for `textContentType` are:
-
-- `none`
-- `addressCity`
-- `addressCityAndState`
-- `addressState`
-- `birthdate` (iOS 17+)
-- `birthdateDay` (iOS 17+)
-- `birthdateMonth` (iOS 17+)
-- `birthdateYear` (iOS 17+)
-- `countryName`
-- `creditCardExpiration` (iOS 17+)
-- `creditCardExpirationMonth` (iOS 17+)
-- `creditCardExpirationYear` (iOS 17+)
-- `creditCardFamilyName` (iOS 17+)
-- `creditCardGivenName` (iOS 17+)
-- `creditCardMiddleName` (iOS 17+)
-- `creditCardName` (iOS 17+)
-- `creditCardNumber`
-- `creditCardSecurityCode` (iOS 17+)
-- `creditCardType` (iOS 17+)
-- `emailAddress`
-- `familyName`
-- `fullStreetAddress`
-- `givenName`
-- `jobTitle`
-- `location`
-- `middleName`
-- `name`
-- `namePrefix`
-- `nameSuffix`
-- `newPassword`
-- `nickname`
-- `oneTimeCode`
-- `organizationName`
-- `password`
-- `postalCode`
-- `streetAddressLine1`
-- `streetAddressLine2`
-- `sublocality`
-- `telephoneNumber`
-- `URL`
-- `username`
-
-| Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| enum('none', 'addressCity', 'addressCityAndState', 'addressState', 'birthdate', 'birthdateDay', 'birthdateMonth', 'birthdateYear', 'countryName', 'creditCardExpiration', 'creditCardExpirationMonth', 'creditCardExpirationYear', 'creditCardFamilyName', 'creditCardGivenName', 'creditCardMiddleName', 'creditCardName', 'creditCardNumber', 'creditCardSecurityCode', 'creditCardType', 'emailAddress', 'familyName', 'fullStreetAddress', 'givenName', 'jobTitle', 'location', 'middleName', 'name', 'namePrefix', 'nameSuffix', 'newPassword', 'nickname', 'oneTimeCode', 'organizationName', 'password', 'postalCode', 'streetAddressLine1', 'streetAddressLine2', 'sublocality', 'telephoneNumber', 'URL', 'username') |
-
----
-
-### `passwordRules` <div className="label ios">iOS</div>
-
-When using `textContentType` as `newPassword` on iOS we can let the OS know the minimum requirements of the password so that it can generate one that will satisfy them. In order to create a valid string for `PasswordRules` take a look to the [Apple Docs](https://developer.apple.com/password-rules/).
-
-:::tip
-If passwords generation dialog doesn't appear please make sure that:
-
-- AutoFill is enabled: **Settings** → **Passwords & Accounts** → toggle "On" the **AutoFill Passwords**,
-- iCloud Keychain is used: **Settings** → **Apple ID** → **iCloud** → **Keychain** → toggle "On" the **iCloud Keychain**.
-  :::
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `style`
-
-Note that not all Text styles are supported, an incomplete list of what is not supported includes:
-
-- `borderLeftWidth`
-- `borderTopWidth`
-- `borderRightWidth`
-- `borderBottomWidth`
-- `borderTopLeftRadius`
-- `borderTopRightRadius`
-- `borderBottomRightRadius`
-- `borderBottomLeftRadius`
-
-[Styles](style.md)
-
-| Type                  |
-| --------------------- |
-| [Text](text.md#style) |
-
----
-
-### `textBreakStrategy` <div className="label android">Android</div>
-
-Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced` The default value is `highQuality`.
-
-| Type                                      |
-| ----------------------------------------- |
-| enum('simple', 'highQuality', 'balanced') |
-
----
-
-### `underlineColorAndroid` <div className="label android">Android</div>
-
-The color of the `TextInput` underline.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `value`
-
-The value to show for the text input. `TextInput` is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker.
-
-| Type   |
-| ------ |
-| string |
-
-## Methods
-
-### `.focus()`
-
-```tsx
-focus();
-```
-
-Makes the native input request focus.
-
-### `.blur()`
-
-```tsx
-blur();
-```
-
-Makes the native input lose focus.
-
-### `clear()`
-
-```tsx
-clear();
-```
-
-Removes all text from the `TextInput`.
-
----
-
-### `isFocused()`
-
-```tsx
-isFocused(): boolean;
-```
-
-Returns `true` if the input is currently focused; `false` otherwise.
-
-# Known issues
-
-- [react-native#19096](https://github.com/facebook/react-native/issues/19096): Doesn't support Android's `onKeyPreIme`.
-- [react-native#19366](https://github.com/facebook/react-native/issues/19366): Calling .focus() after closing Android's keyboard via back button doesn't bring keyboard up again.
-- [react-native#26799](https://github.com/facebook/react-native/issues/26799): Doesn't support Android's `secureTextEntry` when `keyboardType="email-address"` or `keyboardType="phone-pad"`.
+---
+id: textinput
+title: TextInput
+---
+
+A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.
+
+The most basic use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. A minimal example:
+
+```SnackPlayer name=TextInput%20Example
+import {useState} from 'react';
+import {StyleSheet, TextInput} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const TextInputExample = () => {
+  const [text, onChangeText] = useState('Useless Text');
+  const [number, onChangeNumber] = useState('');
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView>
+        <TextInput
+          style={styles.input}
+          onChangeText={onChangeText}
+          value={text}
+        />
+        <TextInput
+          style={styles.input}
+          onChangeText={onChangeNumber}
+          value={number}
+          placeholder="useless placeholder"
+          keyboardType="numeric"
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  input: {
+    height: 40,
+    margin: 12,
+    borderWidth: 1,
+    padding: 10,
+  },
+});
+
+export default TextInputExample;
+```
+
+Two methods exposed via the native element are `.focus()` and `.blur()` that will focus or blur the TextInput programmatically.
+
+Note that some props are only available with `multiline={true/false}`. Additionally, border styles that apply to only one side of the element (e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if `multiline=true`. To achieve the same effect, you can wrap your `TextInput` in a `View`:
+
+```SnackPlayer name=Multiline%20TextInput%20Example
+import {useState} from 'react';
+import {TextInput, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const MultilineTextInputExample = () => {
+  const [value, onChangeText] = useState('Useless Multiline Placeholder');
+
+  // If you type something in the text box that is a color,
+  // the background will change to that color.
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView
+        style={{
+          flex: 1,
+          backgroundColor: value.toLowerCase(),
+        }}>
+        <TextInput
+          editable
+          multiline
+          numberOfLines={4}
+          maxLength={40}
+          onChangeText={text => onChangeText(text)}
+          value={value}
+          style={styles.textInput}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  textInput: {
+    padding: 10,
+    borderColor: '#000',
+    borderWidth: 1,
+    margin: 12,
+  },
+});
+
+export default MultilineTextInputExample;
+```
+
+`TextInput` has a border at the bottom of its view by default. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this are to either not set height explicitly, in which case the system will take care of displaying the border in the correct position, or to not display the border by setting `underlineColorAndroid` to transparent.
+
+Note that on Android performing text selection in an input can change the app's activity `windowSoftInputMode` param to `adjustResize`. This may cause issues with components that have position: 'absolute' while the keyboard is active. To avoid this behavior either specify `windowSoftInputMode` in AndroidManifest.xml ( https://developer.android.com/guide/topics/manifest/activity-element.html ) or control this param programmatically with native code.
+
+---
+
+# Reference
+
+## Props
+
+### [View Props](view.md#props)
+
+Inherits [View Props](view.md#props).
+
+---
+
+### `allowFontScaling`
+
+Specifies whether fonts should scale to respect Text Size accessibility settings. The default is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `autoCapitalize`
+
+Tells `TextInput` to automatically capitalize certain characters. This property is not supported by some keyboard types such as `name-phone-pad`.
+
+- `characters`: all characters.
+- `words`: first letter of each word.
+- `sentences`: first letter of each sentence (_default_).
+- `none`: don't auto capitalize anything.
+
+| Type                                             |
+| ------------------------------------------------ |
+| enum('none', 'sentences', 'words', 'characters') |
+
+---
+
+### `autoComplete`
+
+Specifies autocomplete hints for the system, so it can provide autofill. On Android, the system will always attempt to offer autofill by using heuristics to identify the type of content. To disable autocomplete, set `autoComplete` to `off`.
+
+The following values work across platforms:
+
+- `additional-name`
+- `address-line1`
+- `address-line2`
+- `birthdate-day` (iOS 17+)
+- `birthdate-full` (iOS 17+)
+- `birthdate-month` (iOS 17+)
+- `birthdate-year` (iOS 17+)
+- `cc-csc` (iOS 17+)
+- `cc-exp` (iOS 17+)
+- `cc-exp-day` (iOS 17+)
+- `cc-exp-month` (iOS 17+)
+- `cc-exp-year` (iOS 17+)
+- `cc-number`
+- `country`
+- `current-password`
+- `email`
+- `family-name`
+- `given-name`
+- `honorific-prefix`
+- `honorific-suffix`
+- `name`
+- `new-password`
+- `off`
+- `one-time-code`
+- `postal-code`
+- `street-address`
+- `tel`
+- `username`
+
+<div className="label basic ios">iOS</div>
+
+The following values work on iOS only:
+
+- `cc-family-name` (iOS 17+)
+- `cc-given-name` (iOS 17+)
+- `cc-middle-name` (iOS 17+)
+- `cc-name` (iOS 17+)
+- `cc-type` (iOS 17+)
+- `nickname`
+- `organization`
+- `organization-title`
+- `url`
+
+<div className="label basic android">Android</div>
+
+The following values work on Android only:
+
+- `gender`
+- `name-family`
+- `name-given`
+- `name-middle`
+- `name-middle-initial`
+- `name-prefix`
+- `name-suffix`
+- `password`
+- `password-new`
+- `postal-address`
+- `postal-address-country`
+- `postal-address-extended`
+- `postal-address-extended-postal-code`
+- `postal-address-locality`
+- `postal-address-region`
+- `sms-otp`
+- `tel-country-code`
+- `tel-device`
+- `tel-national`
+- `username-new`
+
+| Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| enum('additional-name', 'address-line1', 'address-line2', 'birthdate-day', 'birthdate-full', 'birthdate-month', 'birthdate-year', 'cc-csc', 'cc-exp', 'cc-exp-day', 'cc-exp-month', 'cc-exp-year', 'cc-number', 'country', 'current-password', 'email', 'family-name', 'given-name', 'honorific-prefix', 'honorific-suffix', 'name', 'new-password', 'off', 'one-time-code', 'postal-code', 'street-address', 'tel', 'username', 'cc-family-name', 'cc-given-name', 'cc-middle-name', 'cc-name', 'cc-type', 'nickname', 'organization', 'organization-title', 'url', 'gender', 'name-family', 'name-given', 'name-middle', 'name-middle-initial', 'name-prefix', 'name-suffix', 'password', 'password-new', 'postal-address', 'postal-address-country', 'postal-address-extended', 'postal-address-extended-postal-code', 'postal-address-locality', 'postal-address-region', 'sms-otp', 'tel-country-code', 'tel-device', 'tel-national', 'username-new') |
+
+---
+
+### `autoCorrect`
+
+If `false`, disables auto-correct. The default value is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `autoFocus`
+
+If `true`, focuses the input. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### 🗑️ `blurOnSubmit`
+
+:::warning[Deprecated]
+Note that `submitBehavior` now takes the place of `blurOnSubmit` and will override any behavior defined by `blurOnSubmit`. See [submitBehavior](textinput#submitbehavior).
+:::
+
+If `true`, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting `blurOnSubmit` to `true` means that pressing return will blur the field and trigger the `onSubmitEditing` event instead of inserting a newline into the field.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `caretHidden`
+
+If `true`, caret is hidden. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `clearButtonMode` <div className="label ios">iOS</div>
+
+When the clear button should appear on the right side of the text view. This property is supported only for single-line TextInput component. The default value is `never`.
+
+| Type                                                       |
+| ---------------------------------------------------------- |
+| enum('never', 'while-editing', 'unless-editing', 'always') |
+
+---
+
+### `clearTextOnFocus` <div className="label ios">iOS</div>
+
+If `true`, clears the text field automatically when editing begins.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `contextMenuHidden`
+
+If `true`, context menu is hidden. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `dataDetectorTypes` <div className="label ios">iOS</div>
+
+Determines the types of data converted to clickable URLs in the text input. Only valid if `multiline={true}` and `editable={false}`. By default no data types are detected.
+
+You can provide one type or an array of many types.
+
+Possible values for `dataDetectorTypes` are:
+
+- `'phoneNumber'`
+- `'link'`
+- `'address'`
+- `'calendarEvent'`
+- `'none'`
+- `'all'`
+
+| Type                                                                                                                                                     |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), ,array of enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all') |
+
+---
+
+### `defaultValue`
+
+Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `disableKeyboardShortcuts` <div className="label ios">iOS</div>
+
+If `true`, the keyboard shortcuts (undo/redo and copy buttons) are disabled.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `cursorColor` <div className="label android">Android</div>
+
+When provided it will set the color of the cursor (or "caret") in the component. Unlike the behavior of `selectionColor` the cursor color will be set independently from the color of the text selection box.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `disableFullscreenUI` <div className="label android">Android</div>
+
+When `false`, if there is a small amount of space available around a text input (e.g. landscape orientation on a phone), the OS may choose to have the user edit the text inside of a full screen text input mode. When `true`, this feature is disabled and users will always edit the text directly inside of the text input. Defaults to `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `editable`
+
+If `false`, text is not editable. The default value is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `enablesReturnKeyAutomatically` <div className="label ios">iOS</div>
+
+If `true`, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `enterKeyHint`
+
+Determines what text should be shown to the return key. Has precedence over the `returnKeyType` prop.
+
+The following values work across platforms:
+
+- `done`
+- `next`
+- `search`
+- `send`
+- `go`
+
+_Android Only_
+
+The following values work on Android only:
+
+- `previous`
+
+_iOS Only_
+
+The following values work on iOS only:
+
+- `enter`
+
+| Type                                                              |
+| ----------------------------------------------------------------- |
+| enum('enter', 'done', 'next', 'previous', 'search', 'send', 'go') |
+
+---
+
+### `importantForAutofill` <div className="label android">Android</div>
+
+Tells the operating system whether the individual fields in your app should be included in a view structure for autofill purposes on Android API Level 26+. Possible values are `auto`, `no`, `noExcludeDescendants`, `yes`, and `yesExcludeDescendants`. The default value is `auto`.
+
+- `auto`: Let the Android System use its heuristics to determine if the view is important for autofill.
+- `no`: This view isn't important for autofill.
+- `noExcludeDescendants`: This view and its children aren't important for autofill.
+- `yes`: This view is important for autofill.
+- `yesExcludeDescendants`: This view is important for autofill, but its children aren't important for autofill.
+
+| Type                                                                       |
+| -------------------------------------------------------------------------- |
+| enum('auto', 'no', 'noExcludeDescendants', 'yes', 'yesExcludeDescendants') |
+
+---
+
+### `inlineImageLeft` <div className="label android">Android</div>
+
+If defined, the provided image resource will be rendered on the left. The image resource must be inside `/android/app/src/main/res/drawable` and referenced like
+
+```
+<TextInput
+ inlineImageLeft='search_icon'
+/>
+```
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `inlineImagePadding` <div className="label android">Android</div>
+
+Padding between the inline image, if any, and the text input itself.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `inputAccessoryViewID` <div className="label ios">iOS</div>
+
+An optional identifier which links a custom [InputAccessoryView](inputaccessoryview.md) to this text input. The InputAccessoryView is rendered above the keyboard when this text input is focused.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `inputAccessoryViewButtonLabel` <div className="label ios">iOS</div>
+
+An optional label that overrides the default [InputAccessoryView](inputaccessoryview.md) button label.
+
+By default, the default button label is not localized. Use this property to provide a localized version.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `inputMode`
+
+Works like the `inputmode` attribute in HTML, it determines which keyboard to open, e.g. `numeric` and has precedence over `keyboardType`.
+
+Support the following values:
+
+- `none`
+- `text`
+- `decimal`
+- `numeric`
+- `tel`
+- `search`
+- `email`
+- `url`
+
+| Type                                                                        |
+| --------------------------------------------------------------------------- |
+| enum('decimal', 'email', 'none', 'numeric', 'search', 'tel', 'text', 'url') |
+
+---
+
+### `keyboardAppearance` <div className="label ios">iOS</div>
+
+Determines the color of the keyboard.
+
+| Type                             |
+| -------------------------------- |
+| enum('default', 'light', 'dark') |
+
+---
+
+### `keyboardType`
+
+Determines which keyboard to open, e.g.`numeric`.
+
+See screenshots of all the types [here](https://davidl.fr/blog/keyboard-react-native-ios-android#all-react-native-keyboard-type-examples-i-os-on-the-left-android-on-the-right).
+
+The following values work across platforms:
+
+- `default`
+- `number-pad`
+- `decimal-pad`
+- `numeric`
+- `email-address`
+- `phone-pad`
+- `url`
+
+_iOS Only_
+
+The following values work on iOS only:
+
+- `ascii-capable`
+- `numbers-and-punctuation`
+- `name-phone-pad`
+- `twitter`
+- `web-search`
+
+_Android Only_
+
+The following values work on Android only:
+
+- `visible-password`
+
+| Type                                                                                                                                                                                                    |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', 'visible-password') |
+
+---
+
+### `lineBreakStrategyIOS` <div className="label ios">iOS</div>
+
+Set line break strategy on iOS 14+. Possible values are `none`, `standard`, `hangul-word` and `push-out`.
+
+| Type                                                        | Default  |
+| ----------------------------------------------------------- | -------- |
+| enum(`'none'`, `'standard'`, `'hangul-word'`, `'push-out'`) | `'none'` |
+
+---
+
+### `lineBreakModeIOS` <div className="label ios">iOS</div>
+
+Set line break mode on iOS. Possible values are `wordWrapping`, `char`, `clip`, `head`, `middle` and `tail`.
+
+| Type                                                                       | Default          |
+| -------------------------------------------------------------------------- | ---------------- |
+| enum(`'wordWrapping'`, `'char'`, `'clip'`, `'head'`, `'middle'`, `'tail'`) | `'wordWrapping'` |
+
+---
+
+### `maxFontSizeMultiplier`
+
+Specifies largest possible scale a font can reach when `allowFontScaling` is enabled. Possible values:
+
+- `null/undefined` (default): inherit from the parent node or the global default (0)
+- `0`: no max, ignore parent/global default
+- `>= 1`: sets the `maxFontSizeMultiplier` of this node to this value
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `maxLength`
+
+Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `multiline`
+
+If `true`, the text input can be multiple lines. The default value is `false`.
+
+:::note
+It is important to note that this aligns the text to the top on iOS, and centers it on Android. Use with `textAlignVertical` set to `top` for the same behavior in both platforms.
+:::
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `numberOfLines`
+
+:::note
+`numberOfLines` on iOS is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Sets the maximum number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `onBlur`
+
+Callback that is called when the text input is blurred.
+
+:::note
+If you are attempting to access the `text` value from `nativeEvent` keep in mind that the resulting value you get can be `undefined` which can cause unintended errors. If you are trying to find the last value of TextInput, you can use the [`onEndEditing`](textinput#onendediting) event, which is fired upon completion of editing.
+:::
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
+
+---
+
+### `onChange`
+
+Callback that is called when the text input's text changes.
+
+| Type                                                  |
+| ----------------------------------------------------- |
+| (`{nativeEvent: {eventCount, target, text}}`) => void |
+
+---
+
+### `onChangeText`
+
+Callback that is called when the text input's text changes. Changed text is passed as a single string argument to the callback handler.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onContentSizeChange`
+
+Callback that is called when the text input's content size changes.
+
+Only called for multiline text inputs.
+
+| Type                                                       |
+| ---------------------------------------------------------- |
+| (`{nativeEvent: {contentSize: {width, height} }}`) => void |
+
+---
+
+### `onEndEditing`
+
+Callback that is called when text input ends.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onPressIn`
+
+Callback that is called when a touch is engaged.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onPressOut`
+
+Callback that is called when a touch is released.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onFocus`
+
+Callback that is called when the text input is focused.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
+
+---
+
+### `onKeyPress`
+
+Callback that is called when a key is pressed. This will be called with object where `keyValue` is `'Enter'` or `'Backspace'` for respective keys and the typed-in character otherwise including `' '` for space. Fires before `onChange` callbacks. Note: on Android only the inputs from soft keyboard are handled, not the hardware keyboard inputs.
+
+| Type                                        |
+| ------------------------------------------- |
+| (`{nativeEvent: {key: keyValue} }`) => void |
+
+---
+
+### `onLayout`
+
+Invoked on mount and on layout changes.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
+
+---
+
+### `onScroll`
+
+Invoked on content scroll. May also contain other properties from `ScrollEvent` but on Android `contentSize` is not provided for performance reasons.
+
+| Type                                                |
+| --------------------------------------------------- |
+| (`{nativeEvent: {contentOffset: {x, y} }}`) => void |
+
+---
+
+### `onSelectionChange`
+
+Callback that is called when the text input selection is changed.
+
+| Type                                                  |
+| ----------------------------------------------------- |
+| (`{nativeEvent: {selection: {start, end} }}`) => void |
+
+---
+
+### `onSubmitEditing`
+
+Callback that is called when the text input's submit button is pressed.
+
+| Type                                                  |
+| ----------------------------------------------------- |
+| (`{nativeEvent: {text, eventCount, target}}`) => void |
+
+Note that on iOS this method isn't called when using `keyboardType="phone-pad"`.
+
+---
+
+### `placeholder`
+
+The string that will be rendered before text input has been entered.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `placeholderTextColor`
+
+The text color of the placeholder string.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `readOnly`
+
+If `true`, text is not editable. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `returnKeyLabel` <div className="label android">Android</div>
+
+Sets the return key to the label. Use it instead of `returnKeyType`.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `returnKeyType`
+
+Determines how the return key should look. On Android you can also use `returnKeyLabel`.
+
+_Cross platform_
+
+The following values work across platforms:
+
+- `done`
+- `go`
+- `next`
+- `search`
+- `send`
+
+_Android Only_
+
+The following values work on Android only:
+
+- `none`
+- `previous`
+
+_iOS Only_
+
+The following values work on iOS only:
+
+- `default`
+- `emergency-call`
+- `google`
+- `join`
+- `route`
+- `yahoo`
+
+| Type                                                                                                                              |
+| --------------------------------------------------------------------------------------------------------------------------------- |
+| enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo') |
+
+### `rejectResponderTermination` <div className="label ios">iOS</div>
+
+If `true`, allows TextInput to pass touch events to the parent component. This allows components such as SwipeableListView to be swipeable from the TextInput on iOS, as is the case on Android by default. If `false`, TextInput always asks to handle the input (except when disabled). The default value is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `rows` <div className="label android">Android</div>
+
+Sets the number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `scrollEnabled` <div className="label ios">iOS</div>
+
+If `false`, scrolling of the text view will be disabled. The default value is `true`. Only works with `multiline={true}`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `secureTextEntry`
+
+If `true`, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is `false`. Does not work with `multiline={true}`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `selection`
+
+The start and end of the text input's selection. Set start and end to the same value to position the cursor.
+
+| Type                                  |
+| ------------------------------------- |
+| object: `{start: number,end: number}` |
+
+---
+
+### `selectionColor`
+
+The highlight, selection handle and cursor color of the text input.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `selectionHandleColor` <div className="label android">Android</div>
+
+Sets the color of the selection handle. Unlike `selectionColor`, it allows the selection handle color to be customized independently of the selection's color.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `selectTextOnFocus`
+
+If `true`, all text will automatically be selected on focus.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `showSoftInputOnFocus`
+
+When `false`, it will prevent the soft keyboard from showing when the field is focused. The default value is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `smartInsertDelete` <div className="label ios">iOS</div>
+
+If `false`, the iOS system will not insert an extra space after a paste operation neither delete one or two spaces after a cut or delete operation.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `true`  |
+
+---
+
+### `spellCheck` <div className="label ios">iOS</div>
+
+If `false`, disables spell-check style (i.e. red underlines). The default value is inherited from `autoCorrect`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `submitBehavior`
+
+When the return key is pressed,
+
+For single line inputs:
+
+- `'newline'` defaults to `'blurAndSubmit'`
+- `undefined` defaults to `'blurAndSubmit'`
+
+For multiline inputs:
+
+- `'newline'` adds a newline
+- `undefined` defaults to `'newline'`
+
+For both single line and multiline inputs:
+
+- `'submit'` will only send a submit event and not blur the input
+- `'blurAndSubmit`' will both blur the input and send a submit event
+
+| Type                                       |
+| ------------------------------------------ |
+| enum('submit', 'blurAndSubmit', 'newline') |
+
+---
+
+### `textAlign`
+
+Align the input text to the left, center, or right sides of the input field.
+
+Possible values for `textAlign` are:
+
+- `left`
+- `center`
+- `right`
+
+| Type                            |
+| ------------------------------- |
+| enum('left', 'center', 'right') |
+
+---
+
+### `textContentType` <div className="label ios">iOS</div>
+
+Give the keyboard and the system information about the expected semantic meaning for the content that users enter.
+
+:::note
+[`autoComplete`](#autocomplete), provides the same functionality and is available for all platforms. You can use [`Platform.select`](/docs/next/platform#select) for differing platform behaviors.
+
+Avoid using both `textContentType` and `autoComplete`. For backwards compatibility, `textContentType` takes precedence when both properties are set.
+:::
+
+You can set `textContentType` to `username` or `password` to enable autofill of login details from the device keychain.
+
+`newPassword` can be used to indicate a new password input the user may want to save in the keychain, and `oneTimeCode` can be used to indicate that a field can be autofilled by a code arriving in an SMS.
+
+To disable autofill, set `textContentType` to `none`.
+
+Possible values for `textContentType` are:
+
+- `none`
+- `addressCity`
+- `addressCityAndState`
+- `addressState`
+- `birthdate` (iOS 17+)
+- `birthdateDay` (iOS 17+)
+- `birthdateMonth` (iOS 17+)
+- `birthdateYear` (iOS 17+)
+- `countryName`
+- `creditCardExpiration` (iOS 17+)
+- `creditCardExpirationMonth` (iOS 17+)
+- `creditCardExpirationYear` (iOS 17+)
+- `creditCardFamilyName` (iOS 17+)
+- `creditCardGivenName` (iOS 17+)
+- `creditCardMiddleName` (iOS 17+)
+- `creditCardName` (iOS 17+)
+- `creditCardNumber`
+- `creditCardSecurityCode` (iOS 17+)
+- `creditCardType` (iOS 17+)
+- `emailAddress`
+- `familyName`
+- `fullStreetAddress`
+- `givenName`
+- `jobTitle`
+- `location`
+- `middleName`
+- `name`
+- `namePrefix`
+- `nameSuffix`
+- `newPassword`
+- `nickname`
+- `oneTimeCode`
+- `organizationName`
+- `password`
+- `postalCode`
+- `streetAddressLine1`
+- `streetAddressLine2`
+- `sublocality`
+- `telephoneNumber`
+- `URL`
+- `username`
+
+| Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| enum('none', 'addressCity', 'addressCityAndState', 'addressState', 'birthdate', 'birthdateDay', 'birthdateMonth', 'birthdateYear', 'countryName', 'creditCardExpiration', 'creditCardExpirationMonth', 'creditCardExpirationYear', 'creditCardFamilyName', 'creditCardGivenName', 'creditCardMiddleName', 'creditCardName', 'creditCardNumber', 'creditCardSecurityCode', 'creditCardType', 'emailAddress', 'familyName', 'fullStreetAddress', 'givenName', 'jobTitle', 'location', 'middleName', 'name', 'namePrefix', 'nameSuffix', 'newPassword', 'nickname', 'oneTimeCode', 'organizationName', 'password', 'postalCode', 'streetAddressLine1', 'streetAddressLine2', 'sublocality', 'telephoneNumber', 'URL', 'username') |
+
+---
+
+### `passwordRules` <div className="label ios">iOS</div>
+
+When using `textContentType` as `newPassword` on iOS we can let the OS know the minimum requirements of the password so that it can generate one that will satisfy them. In order to create a valid string for `PasswordRules` take a look to the [Apple Docs](https://developer.apple.com/password-rules/).
+
+:::tip
+If passwords generation dialog doesn't appear please make sure that:
+
+- AutoFill is enabled: **Settings** → **Passwords & Accounts** → toggle "On" the **AutoFill Passwords**,
+- iCloud Keychain is used: **Settings** → **Apple ID** → **iCloud** → **Keychain** → toggle "On" the **iCloud Keychain**.
+  :::
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `style`
+
+Note that not all Text styles are supported, an incomplete list of what is not supported includes:
+
+- `borderLeftWidth`
+- `borderTopWidth`
+- `borderRightWidth`
+- `borderBottomWidth`
+- `borderTopLeftRadius`
+- `borderTopRightRadius`
+- `borderBottomRightRadius`
+- `borderBottomLeftRadius`
+
+[Styles](style.md)
+
+| Type                  |
+| --------------------- |
+| [Text](text.md#style) |
+
+---
+
+### `textBreakStrategy` <div className="label android">Android</div>
+
+Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced` The default value is `highQuality`.
+
+| Type                                      |
+| ----------------------------------------- |
+| enum('simple', 'highQuality', 'balanced') |
+
+---
+
+### `underlineColorAndroid` <div className="label android">Android</div>
+
+The color of the `TextInput` underline.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `value`
+
+The value to show for the text input. `TextInput` is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker.
+
+| Type   |
+| ------ |
+| string |
+
+## Methods
+
+### `.focus()`
+
+```tsx
+focus();
+```
+
+Makes the native input request focus.
+
+### `.blur()`
+
+```tsx
+blur();
+```
+
+Makes the native input lose focus.
+
+### `clear()`
+
+```tsx
+clear();
+```
+
+Removes all text from the `TextInput`.
+
+---
+
+### `isFocused()`
+
+```tsx
+isFocused(): boolean;
+```
+
+Returns `true` if the input is currently focused; `false` otherwise.
+
+# Known issues
+
+- [react-native#19096](https://github.com/facebook/react-native/issues/19096): Doesn't support Android's `onKeyPreIme`.
+- [react-native#19366](https://github.com/facebook/react-native/issues/19366): Calling .focus() after closing Android's keyboard via back button doesn't bring keyboard up again.
+- [react-native#26799](https://github.com/facebook/react-native/issues/26799): Doesn't support Android's `secureTextEntry` when `keyboardType="email-address"` or `keyboardType="phone-pad"`.
diff --git a/website/versioned_docs/version-0.84/the-new-architecture/custom-cxx-types.md b/website/versioned_docs/version-0.84/the-new-architecture/custom-cxx-types.md
index 94db3e21b3f..edc490b8070 100644
--- a/website/versioned_docs/version-0.84/the-new-architecture/custom-cxx-types.md
+++ b/website/versioned_docs/version-0.84/the-new-architecture/custom-cxx-types.md
@@ -173,8 +173,8 @@ First, we need to update the `App.tsx` file to use the new method from the Turbo
 
 ```diff title="App.tsx"
 // ...
-+ const [cubicSource, setCubicSource] = React.useState('')
-+ const [cubicRoot, setCubicRoot] = React.useState(0)
++ const [cubicSource, setCubicSource] = useState('')
++ const [cubicRoot, setCubicRoot] = useState(0)
   return (
     <SafeAreaView style={styles.container}>
       <View>
@@ -366,9 +366,9 @@ To test the code in the app, we have to modify the `App.tsx` file.
 2. Replace the body of the `App()` function with the following code:
 
 ```tsx title="App.tsx (App function body replacement)"
-const [street, setStreet] = React.useState('');
-const [num, setNum] = React.useState('');
-const [isValidAddress, setIsValidAddress] = React.useState<
+const [street, setStreet] = useState('');
+const [num, setNum] = useState('');
+const [isValidAddress, setIsValidAddress] = useState<
   boolean | null
 >(null);
 
diff --git a/website/versioned_docs/version-0.84/the-new-architecture/direct-manipulation.md b/website/versioned_docs/version-0.84/the-new-architecture/direct-manipulation.md
index 6708a643cba..6035b6a64b7 100644
--- a/website/versioned_docs/version-0.84/the-new-architecture/direct-manipulation.md
+++ b/website/versioned_docs/version-0.84/the-new-architecture/direct-manipulation.md
@@ -26,7 +26,6 @@ For example, the following code demonstrates editing the input when you tap a bu
 <TabItem value="javascript">
 
 ```SnackPlayer name=setNativeProps%20on%20TextInput&ext=js
-import React from 'react';
 import {useCallback, useRef} from 'react';
 import {
   StyleSheet,
@@ -74,7 +73,6 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Clear%20text&ext=tsx
-import React from 'react';
 import {useCallback, useRef} from 'react';
 import {
   StyleSheet,
diff --git a/website/versioned_docs/version-0.84/the-new-architecture/fabric-component-native-commands.md b/website/versioned_docs/version-0.84/the-new-architecture/fabric-component-native-commands.md
index ca87360ba3a..5cb5dbd6710 100644
--- a/website/versioned_docs/version-0.84/the-new-architecture/fabric-component-native-commands.md
+++ b/website/versioned_docs/version-0.84/the-new-architecture/fabric-component-native-commands.md
@@ -107,7 +107,6 @@ Now you can use the command in the the app.
 Open the `App.tsx` file and modify it as it follows:
 
 ```diff title="App.tsx"
-import React from 'react';
 -import {Alert, StyleSheet, View} from 'react-native';
 -import WebView from '../specs/WebViewNativeComponent';
 +import {Alert, StyleSheet, Pressable, Text, View} from 'react-native';
@@ -186,7 +185,6 @@ export default App;
 Open the `App.tsx` file and modify it as it follows:
 
 ```diff title="App.jsx"
-import React from 'react';
 -import {Alert, StyleSheet, View} from 'react-native';
 -import WebView from '../specs/WebViewNativeComponent';
 +import {Alert, StyleSheet, Pressable, Text, View} from 'react-native';
diff --git a/website/versioned_docs/version-0.84/the-new-architecture/layout-measurements.md b/website/versioned_docs/version-0.84/the-new-architecture/layout-measurements.md
index cc693a99b0c..715cd42aee7 100644
--- a/website/versioned_docs/version-0.84/the-new-architecture/layout-measurements.md
+++ b/website/versioned_docs/version-0.84/the-new-architecture/layout-measurements.md
@@ -10,7 +10,7 @@ Typical code will look like this:
 
 ```tsx
 function AComponent(children) {
-  const targetRef = React.useRef(null)
+  const targetRef = useRef(null)
 
   useLayoutEffect(() => {
     targetRef.current?.measure((x, y, width, height, pageX, pageY) => {
diff --git a/website/versioned_docs/version-0.84/the-new-architecture/native-modules-custom-events.md b/website/versioned_docs/version-0.84/the-new-architecture/native-modules-custom-events.md
index 0af5bb95957..c44bbf93c16 100644
--- a/website/versioned_docs/version-0.84/the-new-architecture/native-modules-custom-events.md
+++ b/website/versioned_docs/version-0.84/the-new-architecture/native-modules-custom-events.md
@@ -134,7 +134,6 @@ Now, it's time to update the code of the App to handle the new event.
 Open the `App.tsx` file and modify it as it follows:
 
 ```diff title="App.tsx"
-import React from 'react';
 import {
 + Alert,
 + EventSubscription,
diff --git a/website/versioned_docs/version-0.84/the-new-architecture/pure-cxx-modules.md b/website/versioned_docs/version-0.84/the-new-architecture/pure-cxx-modules.md
index b7c08196290..72d03933695 100644
--- a/website/versioned_docs/version-0.84/the-new-architecture/pure-cxx-modules.md
+++ b/website/versioned_docs/version-0.84/the-new-architecture/pure-cxx-modules.md
@@ -1,503 +1,503 @@
-import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameForCurrentVersion';
-import {getCurrentVersion} from '@site/src/getCurrentVersion';
-import CodeBlock from '@theme/CodeBlock';
-
-# Cross-Platform Native Modules (C++)
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-Writing a module in C++ is the best way to share platform-agnostic code between Android and iOS. With pure C++ modules, you can write your logic only once and reuse it right away from all the platforms, without the need of writing platform-specific code.
-
-In this guide, we will go through the creation of a pure C++ Turbo Native Module:
-
-1. Create the JS specs
-2. Configure Codegen to generate the scaffolding
-3. Implement the Native logic
-4. Register the module in the Android and iOS application
-5. Test your changes in JS
-
-The rest of this guide assumes that you have created your application running the command:
-
-<CodeBlock language="bash" title="shell">
-{`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`}
-</CodeBlock>
-
-## 1. Create the JS specs
-
-Pure C++ Turbo Native Modules are Turbo Native Modules. They need a specification file (also called spec file) so that Codegen can create the scaffolding code for us. The specification file is also what we use to access the Turbo Native Module in JS.
-
-Spec files need to be written in a typed JS dialect. React Native currently supports Flow or TypeScript.
-
-1. Inside the root folder of your app, create a new folder called `specs`.
-2. Create a new file called `NativeSampleModule.ts` with the following code:
-
-:::warning
-All Native Turbo Module spec files must have the prefix `Native`, otherwise Codegen will ignore them.
-:::
-
-<Tabs groupId="tnm-specs" queryString defaultValue={constants.defaultJavaScriptSpecLanguages} values={constants.javaScriptSpecLanguages}>
-<TabItem value="flow">
-
-```ts title="specs/NativeSampleModule.ts"
-// @flow
-import type {TurboModule} from 'react-native'
-import { TurboModuleRegistry } from "react-native";
-
-export interface Spec extends TurboModule {
-  +reverseString: (input: string) => string;
-}
-
-export default (TurboModuleRegistry.getEnforcing<Spec>(
-  "NativeSampleModule"
-): Spec);
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```ts title="specs/NativeSampleModule.ts"
-import {TurboModule, TurboModuleRegistry} from 'react-native';
-
-export interface Spec extends TurboModule {
-  readonly reverseString: (input: string) => string;
-}
-
-export default TurboModuleRegistry.getEnforcing<Spec>(
-  'NativeSampleModule',
-);
-```
-
-</TabItem>
-</Tabs>
-
-## 2. Configure Codegen
-
-The next step is to configure [Codegen](what-is-codegen.mdx) in your `package.json`. Update the file to include:
-
-```json title="package.json"
-     "start": "react-native start",
-     "test": "jest"
-   },
-   // highlight-add-start
-   "codegenConfig": {
-     "name": "AppSpecs",
-     "type": "modules",
-     "jsSrcsDir": "specs",
-     "android": {
-       "javaPackageName": "com.sampleapp.specs"
-     }
-   },
-   // highlight-add-end
-   "dependencies": {
-```
-
-This configuration tells Codegen to look for spec files in the `specs` folder. It also instructs Codegen to only generate code for `modules` and to namespace the generated code as `AppSpecs`.
-
-## 3. Write the Native Code
-
-Writing a C++ Turbo Native Module allows you to share the code between Android and iOS. Therefore we will be writing the code once, and we will look into what changes we need to apply to the platforms so that the C++ code can be picked up.
-
-1. Create a folder named `shared` at the same level as the `android` and `ios` folders.
-2. Inside the `shared` folder, create a new file called `NativeSampleModule.h`.
-
-   ```cpp title="shared/NativeSampleModule.h"
-   #pragma once
-
-   #include <AppSpecsJSI.h>
-
-   #include <memory>
-   #include <string>
-
-   namespace facebook::react {
-
-   class NativeSampleModule : public NativeSampleModuleCxxSpec<NativeSampleModule> {
-   public:
-     NativeSampleModule(std::shared_ptr<CallInvoker> jsInvoker);
-
-     std::string reverseString(jsi::Runtime& rt, std::string input);
-   };
-
-   } // namespace facebook::react
-
-   ```
-
-3. Inside the `shared` folder, create a new file called `NativeSampleModule.cpp`.
-
-   ```cpp title="shared/NativeSampleModule.cpp"
-   #include "NativeSampleModule.h"
-
-   namespace facebook::react {
-
-   NativeSampleModule::NativeSampleModule(std::shared_ptr<CallInvoker> jsInvoker)
-       : NativeSampleModuleCxxSpec(std::move(jsInvoker)) {}
-
-   std::string NativeSampleModule::reverseString(jsi::Runtime& rt, std::string input) {
-     return std::string(input.rbegin(), input.rend());
-   }
-
-   } // namespace facebook::react
-   ```
-
-Let's have a look at the two files we created:
-
-- The `NativeSampleModule.h` file is the header file for a Pure C++ TurboModule. The `include` statements make sure that we include the specs that will be created by Codegen and that contains the interface and the base class we need to implement.
-- The module lives in the `facebook::react` namespace to have access to all the types that live in that namespace.
-- The class `NativeSampleModule` is the actual Turbo Native Module class and it extends the `NativeSampleModuleCxxSpec` class which contains some glue code and boilerplate code to let this class behave as a Turbo Native Module.
-- Finally, we have the constructor, that accepts a pointer to the `CallInvoker`, to communicate with JS if needed and the function's prototype we have to implement.
-
-The `NativeSampleModule.cpp` file is the actual implementation of our Turbo Native Module and implements the constructor and the method that we declared in the specs.
-
-## 4. Register the Module in the platform
-
-The next steps will let us register the module in the platform. This is the step that exposes the native code to JS so that the React Native application can finally call the native methods from the JS layer.
-
-This is the only time when we will have to write some platform-specific code.
-
-### Android
-
-To make sure that the Android app can effectively build the C++ Turbo Native Module, we need to:
-
-1. Create a `CMakeLists.txt` to access our C++ code.
-2. Modify `build.gradle` to point to the newly created `CMakeLists.txt` file.
-3. Create an `OnLoad.cpp` file in our Android app to register the new Turbo Native Module.
-
-#### 1. Create the `CMakeLists.txt` file
-
-Android uses CMake to build. CMake needs to access the files we defined in our shared folder to be able to build them.
-
-1. Create a new folder `SampleApp/android/app/src/main/jni`. The `jni` folder is where the C++ side of Android lives.
-2. Create a `CMakeLists.txt` file and add this context:
-
-```shell title="CMakeLists.txt"
-cmake_minimum_required(VERSION 3.13)
-
-# Define the library name here.
-project(appmodules)
-
-# This file includes all the necessary to let you build your React Native application
-include(${REACT_ANDROID_DIR}/cmake-utils/ReactNative-application.cmake)
-
-# Define where the additional source code lives. We need to crawl back the jni, main, src, app, android folders
-target_sources(${CMAKE_PROJECT_NAME} PRIVATE ../../../../../shared/NativeSampleModule.cpp)
-
-# Define where CMake can find the additional header files. We need to crawl back the jni, main, src, app, android folders
-target_include_directories(${CMAKE_PROJECT_NAME} PUBLIC ../../../../../shared)
-```
-
-The CMake file does the following things:
-
-- Defines the `appmodules` library, where all the app C++ code will be included.
-- Loads the base React Native's CMake file.
-- Adds the Module C++ source code that we need to build with the `target_sources` directives. By default React Native will already populate the `appmodules` library with default sources, here we include our custom one. You can see that we need to crawl back from the `jni` folder to the `shared` folder where our C++ Turbo Module lives.
-- Specifies where CMake can find the module header files. Also in this case we need to crawl back from the `jni` folder.
-
-#### 2. Modify `build.gradle` to include the custom C++ code
-
-Gradle is the tool that orchestrates the Android build. We need to tell it where it can find the `CMake` files to build the Turbo Native Module.
-
-1. Open the `SampleApp/android/app/build.gradle` file.
-2. Add the following block into the Gradle file, within the existing `android` block:
-
-```diff title="android/app/build.gradle"
-    buildTypes {
-        debug {
-            signingConfig signingConfigs.debug
-        }
-        release {
-            // Caution! In production, you need to generate your own keystore file.
-            // see https://reactnative.dev/docs/signed-apk-android.
-            signingConfig signingConfigs.debug
-            minifyEnabled enableProguardInReleaseBuilds
-            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
-        }
-    }
-
-+   externalNativeBuild {
-+       cmake {
-+           path "src/main/jni/CMakeLists.txt"
-+       }
-+   }
-}
-```
-
-This block tells the Gradle file where to look for the CMake file. The path is relative to the folder where the `build.gradle` file lives, so we need to add the path to the `CMakeLists.txt` files in the `jni` folder.
-
-#### 3. Register the new Turbo Native Module
-
-The final step is to register the new C++ Turbo Native Module in the runtime, so that when JS requires the C++ Turbo Native Module, the app knows where to find it and can return it.
-
-1. From the folder `SampleApp/android/app/src/main/jni`, run the following command:
-
-<CodeBlock language="sh" title="shell">
-{`curl -O https://raw.githubusercontent.com/facebook/react-native/${getCoreBranchNameForCurrentVersion()}/packages/react-native/ReactAndroid/cmake-utils/default-app-setup/OnLoad.cpp`}
-</CodeBlock>
-
-2. Then, modify this file as follows:
-
-```diff title="android/app/src/main/jni/OnLoad.cpp"
-#include <DefaultComponentsRegistry.h>
-#include <DefaultTurboModuleManagerDelegate.h>
-#include <autolinking.h>
-#include <fbjni/fbjni.h>
-#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
-#include <rncore.h>
-
-+ // Include the NativeSampleModule header
-+ #include <NativeSampleModule.h>
-
-//...
-
-std::shared_ptr<TurboModule> cxxModuleProvider(
-    const std::string& name,
-    const std::shared_ptr<CallInvoker>& jsInvoker) {
-  // Here you can provide your CXX Turbo Modules coming from
-  // either your application or from external libraries. The approach to follow
-  // is similar to the following (for a module called `NativeCxxModuleExample`):
-  //
-  // if (name == NativeCxxModuleExample::kModuleName) {
-  //   return std::make_shared<NativeCxxModuleExample>(jsInvoker);
-  // }
-
-+  // This code registers the module so that when the JS side asks for it, the app can return it
-+  if (name == NativeSampleModule::kModuleName) {
-+    return std::make_shared<NativeSampleModule>(jsInvoker);
-+  }
-
-  // And we fallback to the CXX module providers autolinked
-  return autolinking_cxxModuleProvider(name, jsInvoker);
-}
-
-// leave the rest of the file
-```
-
-These steps download the original `OnLoad.cpp` file from React Native, so that we can safely override it to load the C++ Turbo Native Module in the app.
-
-Once we downloaded the file, we can modify it by:
-
-- Including the header file that points to our module
-- Registering the Turbo Native Module so that when JS requires it, the app can return it.
-
-Now, you can run `yarn android` from the project root to see your app building successfully.
-
-### iOS
-
-To make sure that the iOS app can effectively build the C++ Turbo Native Module, we need to:
-
-1. Install pods and run Codegen.
-2. Add the `shared` folder to our iOS project.
-3. Register the C++ Turbo Native Module in the application.
-
-#### 1. Install Pods and Run Codegen.
-
-The first step we need to run is the usual steps we run every time we have to prepare our iOS application. CocoaPods is the tool we use to setup and install React Native dependencies and, as part of the process, it will also run Codegen for us.
-
-```bash
-cd ios
-bundle install
-bundle exec pod install
-```
-
-#### 2. Add the shared folder to the iOS project
-
-This step adds the `shared` folder to the project to make it visible to Xcode.
-
-1. Open the CocoaPods generated Xcode Workspace.
-
-```bash
-cd ios
-open SampleApp.xcworkspace
-```
-
-2. Click on the `SampleApp` project on the left and select `Add files to "Sample App"...`.
-
-![Add Files to Sample App...](/docs/assets/AddFilesToXcode1.png)
-
-3. Select the `shared` folder and click on `Add`.
-
-![Add Files to Sample App...](/docs/assets/AddFilesToXcode2.png)
-
-If you did everything right, your project on the left should look like this:
-
-![Xcode Project](/docs/assets/CxxTMGuideXcodeProject.png)
-
-#### 3. Registering the Cxx Turbo Native Module in your app
-
-To register a pure Cxx Turbo Native Module in your app, you need to:
-
-1. Create a `ModuleProvider` for the Native Module
-2. Configure the `package.json` to associate the JS module name with the ModuleProvider class.
-
-The ModuleProvider is an Objective-C++ that glues together the Pure C++ module with the rest of your iOS App.
-
-##### 3.1 Create the ModuleProvider
-
-1. From Xcode, select the `SampleApp` project and press <kbd>⌘</kbd> + <kbd>N</kbd> to create a new file.
-2. Select the `Cocoa Touch Class` template
-3. Add the name `NativeSampleModuleProvider` (keep the other field as `Subclass of: NSObject` and `Language: Objective-C`)
-4. Click Next to generate the files.
-5. Rename the `NativeSampleModuleProvider.m` to `NativeSampleModuleProvider.mm`. The `mm` extension denotes an Objective-C++ file.
-6. Implement the content of the `NativeSampleModuleProvider.h` with the following:
-
-```objc title="NativeSampleModuleProvider.h"
-
-#import <Foundation/Foundation.h>
-#import <ReactCommon/RCTTurboModule.h>
-
-NS_ASSUME_NONNULL_BEGIN
-
-@interface NativeSampleModuleProvider : NSObject <RCTModuleProvider>
-
-@end
-
-NS_ASSUME_NONNULL_END
-```
-
-This declares a `NativeSampleModuleProvider` object that conforms to the `RCTModuleProvider` protocol.
-
-7. Implement the content of the `NativeSampleModuleProvider.mm` with the following:
-
-```objc title="NativeSampleModuleProvider.mm"
-
-#import "NativeSampleModuleProvider.h"
-#import <ReactCommon/CallInvoker.h>
-#import <ReactCommon/TurboModule.h>
-#import "NativeSampleModule.h"
-
-@implementation NativeSampleModuleProvider
-
-- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
-    (const facebook::react::ObjCTurboModule::InitParams &)params
-{
-  return std::make_shared<facebook::react::NativeSampleModule>(params.jsInvoker);
-}
-
-@end
-```
-
-This code implements the `RCTModuleProvider` protocol by creating the pure C++ `NativeSampleModule` when the `getTurboModule:` method is called.
-
-##### 3.2 Update the package.json
-
-The last step consists in updating the `package.json` to tell React Native about the link between the JS specs of the Native Module and the concrete implementation of those spec in native code.
-
-Modify the `package.json` as it follows:
-
-```json title="package.json"
-     "start": "react-native start",
-     "test": "jest"
-   },
-   "codegenConfig": {
-     "name": "AppSpecs",
-     "type": "modules",
-     "jsSrcsDir": "specs",
-     "android": {
-       "javaPackageName": "com.sampleapp.specs"
-     // highlight-add-start
-     },
-     "ios": {
-        "modulesProvider": {
-          "NativeSampleModule":  "NativeSampleModuleProvider"
-        }
-     }
-     // highlight-add-end
-   },
-
-   "dependencies": {
-```
-
-At this point, you need to re-install the pods to make sure that codegen runs again to generate the new files:
-
-```bash
-# from the ios folder
-bundle exec pod install
-open SampleApp.xcworkspace
-```
-
-If you now build your application from Xcode, you should be able to build successfully.
-
-## 5. Testing your Code
-
-It's now time to access our C++ Turbo Native Module from JS. To do so, we have to modify the `App.tsx` file to import the Turbo Native Module and to call it in our code.
-
-1. Open the `App.tsx` file.
-2. Replace the content of the template with the following code:
-
-```tsx title="App.tsx"
-import React from 'react';
-import {
-  Button,
-  SafeAreaView,
-  StyleSheet,
-  Text,
-  TextInput,
-  View,
-} from 'react-native';
-import SampleTurboModule from './specs/NativeSampleModule';
-
-function App(): React.JSX.Element {
-  const [value, setValue] = React.useState('');
-  const [reversedValue, setReversedValue] = React.useState('');
-
-  const onPress = () => {
-    const revString = SampleTurboModule.reverseString(value);
-    setReversedValue(revString);
-  };
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <View>
-        <Text style={styles.title}>
-          Welcome to C++ Turbo Native Module Example
-        </Text>
-        <Text>Write down here the text you want to reverse</Text>
-        <TextInput
-          style={styles.textInput}
-          placeholder="Write your text here"
-          onChangeText={setValue}
-          value={value}
-        />
-        <Button title="Reverse" onPress={onPress} />
-        <Text>Reversed text: {reversedValue}</Text>
-      </View>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  title: {
-    fontSize: 18,
-    marginBottom: 20,
-  },
-  textInput: {
-    borderColor: 'black',
-    borderWidth: 1,
-    borderRadius: 5,
-    padding: 10,
-    marginTop: 10,
-  },
-});
-
-export default App;
-```
-
-The interesting lines in this app are:
-
-- `import SampleTurboModule from './specs/NativeSampleModule';`: this line imports the Turbo Native Module in the app,
-- `const revString = SampleTurboModule.reverseString(value);` in the `onPress` callback: this is how you can use the Turbo Native Module in your app.
-
-:::warning
-For the sake of this example and to keep it as short as possible, we directly imported the spec file in our app.
-The best practice in this case is to create a separate file to wrap the specs and use that file into your application.
-This allows you to prepare the input for the specs and gives you more control over them in JS.
-:::
-
-Congratulations, you wrote your first C++ Turbo Native Module!
-
-| <center>Android</center>                                                                             | <center>iOS</center>                                                                          |
-| ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
-| <center><img src="/docs/assets/CxxGuideAndroidVideo.gif" alt="Android Video" height="600"/></center> | <center><img src="/docs/assets/CxxGuideIOSVideo.gif" alt="iOS video" height="600" /></center> |
+import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameForCurrentVersion';
+import {getCurrentVersion} from '@site/src/getCurrentVersion';
+import CodeBlock from '@theme/CodeBlock';
+
+# Cross-Platform Native Modules (C++)
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+Writing a module in C++ is the best way to share platform-agnostic code between Android and iOS. With pure C++ modules, you can write your logic only once and reuse it right away from all the platforms, without the need of writing platform-specific code.
+
+In this guide, we will go through the creation of a pure C++ Turbo Native Module:
+
+1. Create the JS specs
+2. Configure Codegen to generate the scaffolding
+3. Implement the Native logic
+4. Register the module in the Android and iOS application
+5. Test your changes in JS
+
+The rest of this guide assumes that you have created your application running the command:
+
+<CodeBlock language="bash" title="shell">
+{`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`}
+</CodeBlock>
+
+## 1. Create the JS specs
+
+Pure C++ Turbo Native Modules are Turbo Native Modules. They need a specification file (also called spec file) so that Codegen can create the scaffolding code for us. The specification file is also what we use to access the Turbo Native Module in JS.
+
+Spec files need to be written in a typed JS dialect. React Native currently supports Flow or TypeScript.
+
+1. Inside the root folder of your app, create a new folder called `specs`.
+2. Create a new file called `NativeSampleModule.ts` with the following code:
+
+:::warning
+All Native Turbo Module spec files must have the prefix `Native`, otherwise Codegen will ignore them.
+:::
+
+<Tabs groupId="tnm-specs" queryString defaultValue={constants.defaultJavaScriptSpecLanguages} values={constants.javaScriptSpecLanguages}>
+<TabItem value="flow">
+
+```ts title="specs/NativeSampleModule.ts"
+// @flow
+import type {TurboModule} from 'react-native'
+import { TurboModuleRegistry } from "react-native";
+
+export interface Spec extends TurboModule {
+  +reverseString: (input: string) => string;
+}
+
+export default (TurboModuleRegistry.getEnforcing<Spec>(
+  "NativeSampleModule"
+): Spec);
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```ts title="specs/NativeSampleModule.ts"
+import {TurboModule, TurboModuleRegistry} from 'react-native';
+
+export interface Spec extends TurboModule {
+  readonly reverseString: (input: string) => string;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>(
+  'NativeSampleModule',
+);
+```
+
+</TabItem>
+</Tabs>
+
+## 2. Configure Codegen
+
+The next step is to configure [Codegen](what-is-codegen.mdx) in your `package.json`. Update the file to include:
+
+```json title="package.json"
+     "start": "react-native start",
+     "test": "jest"
+   },
+   // highlight-add-start
+   "codegenConfig": {
+     "name": "AppSpecs",
+     "type": "modules",
+     "jsSrcsDir": "specs",
+     "android": {
+       "javaPackageName": "com.sampleapp.specs"
+     }
+   },
+   // highlight-add-end
+   "dependencies": {
+```
+
+This configuration tells Codegen to look for spec files in the `specs` folder. It also instructs Codegen to only generate code for `modules` and to namespace the generated code as `AppSpecs`.
+
+## 3. Write the Native Code
+
+Writing a C++ Turbo Native Module allows you to share the code between Android and iOS. Therefore we will be writing the code once, and we will look into what changes we need to apply to the platforms so that the C++ code can be picked up.
+
+1. Create a folder named `shared` at the same level as the `android` and `ios` folders.
+2. Inside the `shared` folder, create a new file called `NativeSampleModule.h`.
+
+   ```cpp title="shared/NativeSampleModule.h"
+   #pragma once
+
+   #include <AppSpecsJSI.h>
+
+   #include <memory>
+   #include <string>
+
+   namespace facebook::react {
+
+   class NativeSampleModule : public NativeSampleModuleCxxSpec<NativeSampleModule> {
+   public:
+     NativeSampleModule(std::shared_ptr<CallInvoker> jsInvoker);
+
+     std::string reverseString(jsi::Runtime& rt, std::string input);
+   };
+
+   } // namespace facebook::react
+
+   ```
+
+3. Inside the `shared` folder, create a new file called `NativeSampleModule.cpp`.
+
+   ```cpp title="shared/NativeSampleModule.cpp"
+   #include "NativeSampleModule.h"
+
+   namespace facebook::react {
+
+   NativeSampleModule::NativeSampleModule(std::shared_ptr<CallInvoker> jsInvoker)
+       : NativeSampleModuleCxxSpec(std::move(jsInvoker)) {}
+
+   std::string NativeSampleModule::reverseString(jsi::Runtime& rt, std::string input) {
+     return std::string(input.rbegin(), input.rend());
+   }
+
+   } // namespace facebook::react
+   ```
+
+Let's have a look at the two files we created:
+
+- The `NativeSampleModule.h` file is the header file for a Pure C++ TurboModule. The `include` statements make sure that we include the specs that will be created by Codegen and that contains the interface and the base class we need to implement.
+- The module lives in the `facebook::react` namespace to have access to all the types that live in that namespace.
+- The class `NativeSampleModule` is the actual Turbo Native Module class and it extends the `NativeSampleModuleCxxSpec` class which contains some glue code and boilerplate code to let this class behave as a Turbo Native Module.
+- Finally, we have the constructor, that accepts a pointer to the `CallInvoker`, to communicate with JS if needed and the function's prototype we have to implement.
+
+The `NativeSampleModule.cpp` file is the actual implementation of our Turbo Native Module and implements the constructor and the method that we declared in the specs.
+
+## 4. Register the Module in the platform
+
+The next steps will let us register the module in the platform. This is the step that exposes the native code to JS so that the React Native application can finally call the native methods from the JS layer.
+
+This is the only time when we will have to write some platform-specific code.
+
+### Android
+
+To make sure that the Android app can effectively build the C++ Turbo Native Module, we need to:
+
+1. Create a `CMakeLists.txt` to access our C++ code.
+2. Modify `build.gradle` to point to the newly created `CMakeLists.txt` file.
+3. Create an `OnLoad.cpp` file in our Android app to register the new Turbo Native Module.
+
+#### 1. Create the `CMakeLists.txt` file
+
+Android uses CMake to build. CMake needs to access the files we defined in our shared folder to be able to build them.
+
+1. Create a new folder `SampleApp/android/app/src/main/jni`. The `jni` folder is where the C++ side of Android lives.
+2. Create a `CMakeLists.txt` file and add this context:
+
+```shell title="CMakeLists.txt"
+cmake_minimum_required(VERSION 3.13)
+
+# Define the library name here.
+project(appmodules)
+
+# This file includes all the necessary to let you build your React Native application
+include(${REACT_ANDROID_DIR}/cmake-utils/ReactNative-application.cmake)
+
+# Define where the additional source code lives. We need to crawl back the jni, main, src, app, android folders
+target_sources(${CMAKE_PROJECT_NAME} PRIVATE ../../../../../shared/NativeSampleModule.cpp)
+
+# Define where CMake can find the additional header files. We need to crawl back the jni, main, src, app, android folders
+target_include_directories(${CMAKE_PROJECT_NAME} PUBLIC ../../../../../shared)
+```
+
+The CMake file does the following things:
+
+- Defines the `appmodules` library, where all the app C++ code will be included.
+- Loads the base React Native's CMake file.
+- Adds the Module C++ source code that we need to build with the `target_sources` directives. By default React Native will already populate the `appmodules` library with default sources, here we include our custom one. You can see that we need to crawl back from the `jni` folder to the `shared` folder where our C++ Turbo Module lives.
+- Specifies where CMake can find the module header files. Also in this case we need to crawl back from the `jni` folder.
+
+#### 2. Modify `build.gradle` to include the custom C++ code
+
+Gradle is the tool that orchestrates the Android build. We need to tell it where it can find the `CMake` files to build the Turbo Native Module.
+
+1. Open the `SampleApp/android/app/build.gradle` file.
+2. Add the following block into the Gradle file, within the existing `android` block:
+
+```diff title="android/app/build.gradle"
+    buildTypes {
+        debug {
+            signingConfig signingConfigs.debug
+        }
+        release {
+            // Caution! In production, you need to generate your own keystore file.
+            // see https://reactnative.dev/docs/signed-apk-android.
+            signingConfig signingConfigs.debug
+            minifyEnabled enableProguardInReleaseBuilds
+            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+        }
+    }
+
++   externalNativeBuild {
++       cmake {
++           path "src/main/jni/CMakeLists.txt"
++       }
++   }
+}
+```
+
+This block tells the Gradle file where to look for the CMake file. The path is relative to the folder where the `build.gradle` file lives, so we need to add the path to the `CMakeLists.txt` files in the `jni` folder.
+
+#### 3. Register the new Turbo Native Module
+
+The final step is to register the new C++ Turbo Native Module in the runtime, so that when JS requires the C++ Turbo Native Module, the app knows where to find it and can return it.
+
+1. From the folder `SampleApp/android/app/src/main/jni`, run the following command:
+
+<CodeBlock language="sh" title="shell">
+{`curl -O https://raw.githubusercontent.com/facebook/react-native/${getCoreBranchNameForCurrentVersion()}/packages/react-native/ReactAndroid/cmake-utils/default-app-setup/OnLoad.cpp`}
+</CodeBlock>
+
+2. Then, modify this file as follows:
+
+```diff title="android/app/src/main/jni/OnLoad.cpp"
+#include <DefaultComponentsRegistry.h>
+#include <DefaultTurboModuleManagerDelegate.h>
+#include <autolinking.h>
+#include <fbjni/fbjni.h>
+#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
+#include <rncore.h>
+
++ // Include the NativeSampleModule header
++ #include <NativeSampleModule.h>
+
+//...
+
+std::shared_ptr<TurboModule> cxxModuleProvider(
+    const std::string& name,
+    const std::shared_ptr<CallInvoker>& jsInvoker) {
+  // Here you can provide your CXX Turbo Modules coming from
+  // either your application or from external libraries. The approach to follow
+  // is similar to the following (for a module called `NativeCxxModuleExample`):
+  //
+  // if (name == NativeCxxModuleExample::kModuleName) {
+  //   return std::make_shared<NativeCxxModuleExample>(jsInvoker);
+  // }
+
++  // This code registers the module so that when the JS side asks for it, the app can return it
++  if (name == NativeSampleModule::kModuleName) {
++    return std::make_shared<NativeSampleModule>(jsInvoker);
++  }
+
+  // And we fallback to the CXX module providers autolinked
+  return autolinking_cxxModuleProvider(name, jsInvoker);
+}
+
+// leave the rest of the file
+```
+
+These steps download the original `OnLoad.cpp` file from React Native, so that we can safely override it to load the C++ Turbo Native Module in the app.
+
+Once we downloaded the file, we can modify it by:
+
+- Including the header file that points to our module
+- Registering the Turbo Native Module so that when JS requires it, the app can return it.
+
+Now, you can run `yarn android` from the project root to see your app building successfully.
+
+### iOS
+
+To make sure that the iOS app can effectively build the C++ Turbo Native Module, we need to:
+
+1. Install pods and run Codegen.
+2. Add the `shared` folder to our iOS project.
+3. Register the C++ Turbo Native Module in the application.
+
+#### 1. Install Pods and Run Codegen.
+
+The first step we need to run is the usual steps we run every time we have to prepare our iOS application. CocoaPods is the tool we use to setup and install React Native dependencies and, as part of the process, it will also run Codegen for us.
+
+```bash
+cd ios
+bundle install
+bundle exec pod install
+```
+
+#### 2. Add the shared folder to the iOS project
+
+This step adds the `shared` folder to the project to make it visible to Xcode.
+
+1. Open the CocoaPods generated Xcode Workspace.
+
+```bash
+cd ios
+open SampleApp.xcworkspace
+```
+
+2. Click on the `SampleApp` project on the left and select `Add files to "Sample App"...`.
+
+![Add Files to Sample App...](/docs/assets/AddFilesToXcode1.png)
+
+3. Select the `shared` folder and click on `Add`.
+
+![Add Files to Sample App...](/docs/assets/AddFilesToXcode2.png)
+
+If you did everything right, your project on the left should look like this:
+
+![Xcode Project](/docs/assets/CxxTMGuideXcodeProject.png)
+
+#### 3. Registering the Cxx Turbo Native Module in your app
+
+To register a pure Cxx Turbo Native Module in your app, you need to:
+
+1. Create a `ModuleProvider` for the Native Module
+2. Configure the `package.json` to associate the JS module name with the ModuleProvider class.
+
+The ModuleProvider is an Objective-C++ that glues together the Pure C++ module with the rest of your iOS App.
+
+##### 3.1 Create the ModuleProvider
+
+1. From Xcode, select the `SampleApp` project and press <kbd>⌘</kbd> + <kbd>N</kbd> to create a new file.
+2. Select the `Cocoa Touch Class` template
+3. Add the name `NativeSampleModuleProvider` (keep the other field as `Subclass of: NSObject` and `Language: Objective-C`)
+4. Click Next to generate the files.
+5. Rename the `NativeSampleModuleProvider.m` to `NativeSampleModuleProvider.mm`. The `mm` extension denotes an Objective-C++ file.
+6. Implement the content of the `NativeSampleModuleProvider.h` with the following:
+
+```objc title="NativeSampleModuleProvider.h"
+
+#import <Foundation/Foundation.h>
+#import <ReactCommon/RCTTurboModule.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface NativeSampleModuleProvider : NSObject <RCTModuleProvider>
+
+@end
+
+NS_ASSUME_NONNULL_END
+```
+
+This declares a `NativeSampleModuleProvider` object that conforms to the `RCTModuleProvider` protocol.
+
+7. Implement the content of the `NativeSampleModuleProvider.mm` with the following:
+
+```objc title="NativeSampleModuleProvider.mm"
+
+#import "NativeSampleModuleProvider.h"
+#import <ReactCommon/CallInvoker.h>
+#import <ReactCommon/TurboModule.h>
+#import "NativeSampleModule.h"
+
+@implementation NativeSampleModuleProvider
+
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
+    (const facebook::react::ObjCTurboModule::InitParams &)params
+{
+  return std::make_shared<facebook::react::NativeSampleModule>(params.jsInvoker);
+}
+
+@end
+```
+
+This code implements the `RCTModuleProvider` protocol by creating the pure C++ `NativeSampleModule` when the `getTurboModule:` method is called.
+
+##### 3.2 Update the package.json
+
+The last step consists in updating the `package.json` to tell React Native about the link between the JS specs of the Native Module and the concrete implementation of those spec in native code.
+
+Modify the `package.json` as it follows:
+
+```json title="package.json"
+     "start": "react-native start",
+     "test": "jest"
+   },
+   "codegenConfig": {
+     "name": "AppSpecs",
+     "type": "modules",
+     "jsSrcsDir": "specs",
+     "android": {
+       "javaPackageName": "com.sampleapp.specs"
+     // highlight-add-start
+     },
+     "ios": {
+        "modulesProvider": {
+          "NativeSampleModule":  "NativeSampleModuleProvider"
+        }
+     }
+     // highlight-add-end
+   },
+
+   "dependencies": {
+```
+
+At this point, you need to re-install the pods to make sure that codegen runs again to generate the new files:
+
+```bash
+# from the ios folder
+bundle exec pod install
+open SampleApp.xcworkspace
+```
+
+If you now build your application from Xcode, you should be able to build successfully.
+
+## 5. Testing your Code
+
+It's now time to access our C++ Turbo Native Module from JS. To do so, we have to modify the `App.tsx` file to import the Turbo Native Module and to call it in our code.
+
+1. Open the `App.tsx` file.
+2. Replace the content of the template with the following code:
+
+```tsx title="App.tsx"
+import {type JSX, useState} from 'react';
+import {
+  Button,
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+import SampleTurboModule from './specs/NativeSampleModule';
+
+function App(): JSX.Element {
+  const [value, setValue] = useState('');
+  const [reversedValue, setReversedValue] = useState('');
+
+  const onPress = () => {
+    const revString = SampleTurboModule.reverseString(value);
+    setReversedValue(revString);
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View>
+        <Text style={styles.title}>
+          Welcome to C++ Turbo Native Module Example
+        </Text>
+        <Text>Write down here the text you want to reverse</Text>
+        <TextInput
+          style={styles.textInput}
+          placeholder="Write your text here"
+          onChangeText={setValue}
+          value={value}
+        />
+        <Button title="Reverse" onPress={onPress} />
+        <Text>Reversed text: {reversedValue}</Text>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 18,
+    marginBottom: 20,
+  },
+  textInput: {
+    borderColor: 'black',
+    borderWidth: 1,
+    borderRadius: 5,
+    padding: 10,
+    marginTop: 10,
+  },
+});
+
+export default App;
+```
+
+The interesting lines in this app are:
+
+- `import SampleTurboModule from './specs/NativeSampleModule';`: this line imports the Turbo Native Module in the app,
+- `const revString = SampleTurboModule.reverseString(value);` in the `onPress` callback: this is how you can use the Turbo Native Module in your app.
+
+:::warning
+For the sake of this example and to keep it as short as possible, we directly imported the spec file in our app.
+The best practice in this case is to create a separate file to wrap the specs and use that file into your application.
+This allows you to prepare the input for the specs and gives you more control over them in JS.
+:::
+
+Congratulations, you wrote your first C++ Turbo Native Module!
+
+| <center>Android</center>                                                                             | <center>iOS</center>                                                                          |
+| ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
+| <center><img src="/docs/assets/CxxGuideAndroidVideo.gif" alt="Android Video" height="600"/></center> | <center><img src="/docs/assets/CxxGuideIOSVideo.gif" alt="iOS video" height="600" /></center> |
diff --git a/website/versioned_docs/version-0.84/toastandroid.md b/website/versioned_docs/version-0.84/toastandroid.md
index 0d7a569235d..07f2b7b20cd 100644
--- a/website/versioned_docs/version-0.84/toastandroid.md
+++ b/website/versioned_docs/version-0.84/toastandroid.md
@@ -17,7 +17,6 @@ Starting with Android 11 (API level 30), setting the gravity has no effect on te
 :::
 
 ```SnackPlayer name=Toast%20Android%20API%20Example&supportedPlatforms=android
-import React from 'react';
 import {StyleSheet, ToastAndroid, Button, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.84/touchablehighlight.md b/website/versioned_docs/version-0.84/touchablehighlight.md
index 98ea0823783..bb0a5d234c1 100644
--- a/website/versioned_docs/version-0.84/touchablehighlight.md
+++ b/website/versioned_docs/version-0.84/touchablehighlight.md
@@ -1,215 +1,215 @@
----
-id: touchablehighlight
-title: TouchableHighlight
----
-
-:::tip
-If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
-:::
-
-A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view.
-
-The underlay comes from wrapping the child in a new View, which can affect layout, and sometimes cause unwanted visual artifacts if not used correctly, for example if the backgroundColor of the wrapped view isn't explicitly set to an opaque color.
-
-TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View.
-
-```tsx
-function MyComponent(props: MyComponentProps) {
-  return (
-    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
-      <Text>My Component</Text>
-    </View>
-  );
-}
-
-<TouchableHighlight
-  activeOpacity={0.6}
-  underlayColor="#DDDDDD"
-  onPress={() => alert('Pressed!')}>
-  <MyComponent />
-</TouchableHighlight>;
-```
-
-## Example
-
-```SnackPlayer name=TouchableHighlight%20Example
-import React, {useState} from 'react';
-import {StyleSheet, Text, TouchableHighlight, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const TouchableHighlightExample = () => {
-  const [count, setCount] = useState(0);
-  const onPress = () => setCount(count + 1);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <TouchableHighlight onPress={onPress}>
-          <View style={styles.button}>
-            <Text>Touch Here</Text>
-          </View>
-        </TouchableHighlight>
-        <View style={styles.countContainer}>
-          <Text style={styles.countText}>{count || null}</Text>
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: 10,
-  },
-  button: {
-    alignItems: 'center',
-    backgroundColor: '#DDDDDD',
-    padding: 10,
-  },
-  countContainer: {
-    alignItems: 'center',
-    padding: 10,
-  },
-  countText: {
-    color: '#FF00FF',
-  },
-});
-
-export default TouchableHighlightExample;
-```
-
----
-
-# Reference
-
-## Props
-
-### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
-
-Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
-
----
-
-### `activeOpacity`
-
-Determines what the opacity of the wrapped view should be when touch is active. The value should be between 0 and 1. Defaults to 0.85. Requires `underlayColor` to be set.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `onHideUnderlay`
-
-Called immediately after the underlay is hidden.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onShowUnderlay`
-
-Called immediately after the underlay is shown.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `ref`
-
-A ref setter that will be assigned an [element node](element-nodes) when mounted.
-
----
-
-### `style`
-
-| Type       |
-| ---------- |
-| View.style |
-
----
-
-### `underlayColor`
-
-The color of the underlay that will show through when the touch is active.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `hasTVPreferredFocus` <div className="label ios">iOS</div>
-
-_(Apple TV only)_ TV preferred focus (see documentation for the View component).
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `nextFocusDown` <div className="label android">Android</div>
-
-TV next focus down (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusForward` <div className="label android">Android</div>
-
-TV next focus forward (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusLeft` <div className="label android">Android</div>
-
-TV next focus left (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusRight` <div className="label android">Android</div>
-
-TV next focus right (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusUp` <div className="label android">Android</div>
-
-TV next focus up (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `testOnly_pressed`
-
-Handy for snapshot tests.
-
-| Type |
-| ---- |
-| bool |
+---
+id: touchablehighlight
+title: TouchableHighlight
+---
+
+:::tip
+If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
+:::
+
+A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view.
+
+The underlay comes from wrapping the child in a new View, which can affect layout, and sometimes cause unwanted visual artifacts if not used correctly, for example if the backgroundColor of the wrapped view isn't explicitly set to an opaque color.
+
+TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View.
+
+```tsx
+function MyComponent(props: MyComponentProps) {
+  return (
+    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
+      <Text>My Component</Text>
+    </View>
+  );
+}
+
+<TouchableHighlight
+  activeOpacity={0.6}
+  underlayColor="#DDDDDD"
+  onPress={() => alert('Pressed!')}>
+  <MyComponent />
+</TouchableHighlight>;
+```
+
+## Example
+
+```SnackPlayer name=TouchableHighlight%20Example
+import {useState} from 'react';
+import {StyleSheet, Text, TouchableHighlight, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const TouchableHighlightExample = () => {
+  const [count, setCount] = useState(0);
+  const onPress = () => setCount(count + 1);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <TouchableHighlight onPress={onPress}>
+          <View style={styles.button}>
+            <Text>Touch Here</Text>
+          </View>
+        </TouchableHighlight>
+        <View style={styles.countContainer}>
+          <Text style={styles.countText}>{count || null}</Text>
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#DDDDDD',
+    padding: 10,
+  },
+  countContainer: {
+    alignItems: 'center',
+    padding: 10,
+  },
+  countText: {
+    color: '#FF00FF',
+  },
+});
+
+export default TouchableHighlightExample;
+```
+
+---
+
+# Reference
+
+## Props
+
+### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
+
+Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
+
+---
+
+### `activeOpacity`
+
+Determines what the opacity of the wrapped view should be when touch is active. The value should be between 0 and 1. Defaults to 0.85. Requires `underlayColor` to be set.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `onHideUnderlay`
+
+Called immediately after the underlay is hidden.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onShowUnderlay`
+
+Called immediately after the underlay is shown.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `ref`
+
+A ref setter that will be assigned an [element node](element-nodes) when mounted.
+
+---
+
+### `style`
+
+| Type       |
+| ---------- |
+| View.style |
+
+---
+
+### `underlayColor`
+
+The color of the underlay that will show through when the touch is active.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `hasTVPreferredFocus` <div className="label ios">iOS</div>
+
+_(Apple TV only)_ TV preferred focus (see documentation for the View component).
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `nextFocusDown` <div className="label android">Android</div>
+
+TV next focus down (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusForward` <div className="label android">Android</div>
+
+TV next focus forward (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusLeft` <div className="label android">Android</div>
+
+TV next focus left (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusRight` <div className="label android">Android</div>
+
+TV next focus right (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusUp` <div className="label android">Android</div>
+
+TV next focus up (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `testOnly_pressed`
+
+Handy for snapshot tests.
+
+| Type |
+| ---- |
+| bool |
diff --git a/website/versioned_docs/version-0.84/touchablenativefeedback.md b/website/versioned_docs/version-0.84/touchablenativefeedback.md
index a7465b9f2ed..eb0a67aa03c 100644
--- a/website/versioned_docs/version-0.84/touchablenativefeedback.md
+++ b/website/versioned_docs/version-0.84/touchablenativefeedback.md
@@ -1,219 +1,219 @@
----
-id: touchablenativefeedback
-title: TouchableNativeFeedback
----
-
-:::tip
-If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
-:::
-
-A wrapper for making views respond properly to touches (Android only). On Android this component uses native state drawable to display touch feedback.
-
-At the moment it only supports having a single View instance as a child node, as it's implemented by replacing that View with another instance of RCTView node with some additional properties set.
-
-Background drawable of native feedback touchable can be customized with `background` property.
-
-## Example
-
-```SnackPlayer name=TouchableNativeFeedback%20Android%20Component%20Example&supportedPlatforms=android
-import React, {useState} from 'react';
-import {Text, View, StyleSheet, TouchableNativeFeedback} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [rippleColor, setRippleColor] = useState(randomHexColor());
-  const [rippleOverflow, setRippleOverflow] = useState(false);
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <TouchableNativeFeedback
-          onPress={() => {
-            setRippleColor(randomHexColor());
-            setRippleOverflow(!rippleOverflow);
-          }}
-          background={TouchableNativeFeedback.Ripple(
-            rippleColor,
-            rippleOverflow,
-          )}>
-          <View style={styles.touchable}>
-            <Text style={styles.text}>TouchableNativeFeedback</Text>
-          </View>
-        </TouchableNativeFeedback>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const randomHexColor = () => {
-  return '#000000'.replace(/0/g, function () {
-    return Math.round(Math.random() * 16).toString(16);
-  });
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    backgroundColor: 'black',
-    paddingHorizontal: 20,
-  },
-  touchable: {
-    flex: 0.33,
-    justifyContent: 'center',
-    backgroundColor: '#eeeeee',
-    borderColor: 'black',
-    borderWidth: 1,
-  },
-  text: {
-    alignSelf: 'center',
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Props
-
-### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
-
-Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
-
----
-
-### `background`
-
-Determines the type of background drawable that's going to be used to display feedback. It takes an object with `type` property and extra data depending on the `type`. It's recommended to use one of the static methods to generate that dictionary.
-
-| Type               |
-| ------------------ |
-| backgroundPropType |
-
----
-
-### `useForeground`
-
-Set to true to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them.
-
-Check TouchableNativeFeedback.canUseNativeForeground() first, as this is only available on Android 6.0 and above. If you try to use this on older versions you will get a warning and fallback to background.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `hasTVPreferredFocus` <div className="label android">Android</div>
-
-TV preferred focus (see documentation for the View component).
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `nextFocusDown` <div className="label android">Android</div>
-
-TV next focus down (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusForward` <div className="label android">Android</div>
-
-TV next focus forward (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusLeft` <div className="label android">Android</div>
-
-TV next focus left (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusRight` <div className="label android">Android</div>
-
-TV next focus right (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusUp` <div className="label android">Android</div>
-
-TV next focus up (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
-## Methods
-
-### `SelectableBackground()`
-
-```tsx
-static SelectableBackground(
-  rippleRadius: number | null,
-): ThemeAttributeBackgroundPropType;
-```
-
-Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.
-
----
-
-### `SelectableBackgroundBorderless()`
-
-```tsx
-static SelectableBackgroundBorderless(
-  rippleRadius: number | null,
-): ThemeAttributeBackgroundPropType;
-```
-
-Creates an object that represent android theme's default background for borderless selectable elements (`?android:attr/selectableItemBackgroundBorderless`). Available on android API level 21+. `rippleRadius` parameter controls the radius of the ripple effect.
-
----
-
-### `Ripple()`
-
-```tsx
-static Ripple(
-  color: ColorValue,
-  borderless: boolean,
-  rippleRadius?: number | null,
-): RippleBackgroundPropType;
-```
-
-Creates an object that represents ripple drawable with specified color (as a string). If property `borderless` evaluates to true the ripple will render outside of the view bounds (see native actionbar buttons as an example of that behavior). This background type is available on Android API level 21+.
-
-**Parameters:**
-
-| Name         | Type    | Required | Description                                 |
-| ------------ | ------- | -------- | ------------------------------------------- |
-| color        | string  | Yes      | The ripple color                            |
-| borderless   | boolean | Yes      | If the ripple can render outside its bounds |
-| rippleRadius | ?number | No       | controls the radius of the ripple effect    |
-
----
-
-### `canUseNativeForeground()`
-
-```tsx
-static canUseNativeForeground(): boolean;
-```
+---
+id: touchablenativefeedback
+title: TouchableNativeFeedback
+---
+
+:::tip
+If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
+:::
+
+A wrapper for making views respond properly to touches (Android only). On Android this component uses native state drawable to display touch feedback.
+
+At the moment it only supports having a single View instance as a child node, as it's implemented by replacing that View with another instance of RCTView node with some additional properties set.
+
+Background drawable of native feedback touchable can be customized with `background` property.
+
+## Example
+
+```SnackPlayer name=TouchableNativeFeedback%20Android%20Component%20Example&supportedPlatforms=android
+import {useState} from 'react';
+import {Text, View, StyleSheet, TouchableNativeFeedback} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [rippleColor, setRippleColor] = useState(randomHexColor());
+  const [rippleOverflow, setRippleOverflow] = useState(false);
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <TouchableNativeFeedback
+          onPress={() => {
+            setRippleColor(randomHexColor());
+            setRippleOverflow(!rippleOverflow);
+          }}
+          background={TouchableNativeFeedback.Ripple(
+            rippleColor,
+            rippleOverflow,
+          )}>
+          <View style={styles.touchable}>
+            <Text style={styles.text}>TouchableNativeFeedback</Text>
+          </View>
+        </TouchableNativeFeedback>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const randomHexColor = () => {
+  return '#000000'.replace(/0/g, function () {
+    return Math.round(Math.random() * 16).toString(16);
+  });
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: 'black',
+    paddingHorizontal: 20,
+  },
+  touchable: {
+    flex: 0.33,
+    justifyContent: 'center',
+    backgroundColor: '#eeeeee',
+    borderColor: 'black',
+    borderWidth: 1,
+  },
+  text: {
+    alignSelf: 'center',
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Props
+
+### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
+
+Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
+
+---
+
+### `background`
+
+Determines the type of background drawable that's going to be used to display feedback. It takes an object with `type` property and extra data depending on the `type`. It's recommended to use one of the static methods to generate that dictionary.
+
+| Type               |
+| ------------------ |
+| backgroundPropType |
+
+---
+
+### `useForeground`
+
+Set to true to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them.
+
+Check TouchableNativeFeedback.canUseNativeForeground() first, as this is only available on Android 6.0 and above. If you try to use this on older versions you will get a warning and fallback to background.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `hasTVPreferredFocus` <div className="label android">Android</div>
+
+TV preferred focus (see documentation for the View component).
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `nextFocusDown` <div className="label android">Android</div>
+
+TV next focus down (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusForward` <div className="label android">Android</div>
+
+TV next focus forward (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusLeft` <div className="label android">Android</div>
+
+TV next focus left (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusRight` <div className="label android">Android</div>
+
+TV next focus right (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusUp` <div className="label android">Android</div>
+
+TV next focus up (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+## Methods
+
+### `SelectableBackground()`
+
+```tsx
+static SelectableBackground(
+  rippleRadius: number | null,
+): ThemeAttributeBackgroundPropType;
+```
+
+Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.
+
+---
+
+### `SelectableBackgroundBorderless()`
+
+```tsx
+static SelectableBackgroundBorderless(
+  rippleRadius: number | null,
+): ThemeAttributeBackgroundPropType;
+```
+
+Creates an object that represent android theme's default background for borderless selectable elements (`?android:attr/selectableItemBackgroundBorderless`). Available on android API level 21+. `rippleRadius` parameter controls the radius of the ripple effect.
+
+---
+
+### `Ripple()`
+
+```tsx
+static Ripple(
+  color: ColorValue,
+  borderless: boolean,
+  rippleRadius?: number | null,
+): RippleBackgroundPropType;
+```
+
+Creates an object that represents ripple drawable with specified color (as a string). If property `borderless` evaluates to true the ripple will render outside of the view bounds (see native actionbar buttons as an example of that behavior). This background type is available on Android API level 21+.
+
+**Parameters:**
+
+| Name         | Type    | Required | Description                                 |
+| ------------ | ------- | -------- | ------------------------------------------- |
+| color        | string  | Yes      | The ripple color                            |
+| borderless   | boolean | Yes      | If the ripple can render outside its bounds |
+| rippleRadius | ?number | No       | controls the radius of the ripple effect    |
+
+---
+
+### `canUseNativeForeground()`
+
+```tsx
+static canUseNativeForeground(): boolean;
+```
diff --git a/website/versioned_docs/version-0.84/touchableopacity.md b/website/versioned_docs/version-0.84/touchableopacity.md
index 72af0bc5f49..0764f4787fa 100644
--- a/website/versioned_docs/version-0.84/touchableopacity.md
+++ b/website/versioned_docs/version-0.84/touchableopacity.md
@@ -1,151 +1,151 @@
----
-id: touchableopacity
-title: TouchableOpacity
----
-
-:::tip
-If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
-:::
-
-A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it.
-
-Opacity is controlled by wrapping the children in an `Animated.View`, which is added to the view hierarchy. Be aware that this can affect layout.
-
-## Example
-
-```SnackPlayer name=TouchableOpacity%20Example
-import React, {useState} from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [count, setCount] = useState(0);
-  const onPress = () => setCount(prevCount => prevCount + 1);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.countContainer}>
-          <Text>Count: {count}</Text>
-        </View>
-        <TouchableOpacity style={styles.button} onPress={onPress}>
-          <Text>Press Here</Text>
-        </TouchableOpacity>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: 10,
-  },
-  button: {
-    alignItems: 'center',
-    backgroundColor: '#DDDDDD',
-    padding: 10,
-  },
-  countContainer: {
-    alignItems: 'center',
-    padding: 10,
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Props
-
-### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
-
-Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
-
----
-
-### `style`
-
-| Type                           |
-| ------------------------------ |
-| [View.style](view-style-props) |
-
----
-
-### `activeOpacity`
-
-Determines what the opacity of the wrapped view should be when touch is active. Defaults to `0.2`.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `hasTVPreferredFocus` <div className="label ios">iOS</div>
-
-_(Apple TV only)_ TV preferred focus (see documentation for the View component).
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `nextFocusDown` <div className="label android">Android</div>
-
-TV next focus down (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusForward` <div className="label android">Android</div>
-
-TV next focus forward (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusLeft` <div className="label android">Android</div>
-
-TV next focus left (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusRight` <div className="label android">Android</div>
-
-TV next focus right (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusUp` <div className="label android">Android</div>
-
-TV next focus up (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `ref`
-
-A ref setter that will be assigned an [element node](element-nodes) when mounted.
+---
+id: touchableopacity
+title: TouchableOpacity
+---
+
+:::tip
+If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
+:::
+
+A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it.
+
+Opacity is controlled by wrapping the children in an `Animated.View`, which is added to the view hierarchy. Be aware that this can affect layout.
+
+## Example
+
+```SnackPlayer name=TouchableOpacity%20Example
+import {useState} from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [count, setCount] = useState(0);
+  const onPress = () => setCount(prevCount => prevCount + 1);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.countContainer}>
+          <Text>Count: {count}</Text>
+        </View>
+        <TouchableOpacity style={styles.button} onPress={onPress}>
+          <Text>Press Here</Text>
+        </TouchableOpacity>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#DDDDDD',
+    padding: 10,
+  },
+  countContainer: {
+    alignItems: 'center',
+    padding: 10,
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Props
+
+### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
+
+Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
+
+---
+
+### `style`
+
+| Type                           |
+| ------------------------------ |
+| [View.style](view-style-props) |
+
+---
+
+### `activeOpacity`
+
+Determines what the opacity of the wrapped view should be when touch is active. Defaults to `0.2`.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `hasTVPreferredFocus` <div className="label ios">iOS</div>
+
+_(Apple TV only)_ TV preferred focus (see documentation for the View component).
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `nextFocusDown` <div className="label android">Android</div>
+
+TV next focus down (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusForward` <div className="label android">Android</div>
+
+TV next focus forward (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusLeft` <div className="label android">Android</div>
+
+TV next focus left (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusRight` <div className="label android">Android</div>
+
+TV next focus right (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusUp` <div className="label android">Android</div>
+
+TV next focus up (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `ref`
+
+A ref setter that will be assigned an [element node](element-nodes) when mounted.
diff --git a/website/versioned_docs/version-0.84/touchablewithoutfeedback.md b/website/versioned_docs/version-0.84/touchablewithoutfeedback.md
index c7e875156df..fb0978b1ad1 100644
--- a/website/versioned_docs/version-0.84/touchablewithoutfeedback.md
+++ b/website/versioned_docs/version-0.84/touchablewithoutfeedback.md
@@ -1,531 +1,531 @@
----
-id: touchablewithoutfeedback
-title: TouchableWithoutFeedback
----
-
-:::tip
-If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
-:::
-
-Do not use unless you have a very good reason. All elements that respond to press should have a visual feedback when touched.
-
-`TouchableWithoutFeedback` supports only one child. If you wish to have several child components, wrap them in a View. Importantly, `TouchableWithoutFeedback` works by cloning its child and applying responder props to it. It is therefore required that any intermediary components pass through those props to the underlying React Native component.
-
-## Usage Pattern
-
-```tsx
-function MyComponent(props: MyComponentProps) {
-  return (
-    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
-      <Text>My Component</Text>
-    </View>
-  );
-}
-
-<TouchableWithoutFeedback onPress={() => alert('Pressed!')}>
-  <MyComponent />
-</TouchableWithoutFeedback>;
-```
-
-## Example
-
-```SnackPlayer name=TouchableWithoutFeedback
-import React, {useState} from 'react';
-import {StyleSheet, TouchableWithoutFeedback, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const TouchableWithoutFeedbackExample = () => {
-  const [count, setCount] = useState(0);
-
-  const onPress = () => {
-    setCount(count + 1);
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.countContainer}>
-          <Text style={styles.countText}>Count: {count}</Text>
-        </View>
-        <TouchableWithoutFeedback onPress={onPress}>
-          <View style={styles.button}>
-            <Text>Touch Here</Text>
-          </View>
-        </TouchableWithoutFeedback>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: 10,
-  },
-  button: {
-    alignItems: 'center',
-    backgroundColor: '#DDDDDD',
-    padding: 10,
-  },
-  countContainer: {
-    alignItems: 'center',
-    padding: 10,
-  },
-  countText: {
-    color: '#FF00FF',
-  },
-});
-
-export default TouchableWithoutFeedbackExample;
-```
-
----
-
-# Reference
-
-## Props
-
-### `accessibilityIgnoresInvertColors` <div className="label ios">iOS</div>
-
-A value indicating this view should or should not be inverted when color inversion is turned on. A value of `true` will tell the view to not be inverted even if color inversion is turned on.
-
-See the [Accessibility guide](accessibility.md#accessibilityignoresinvertcolors) for more information.
-
-| Type    |
-| ------- |
-| Boolean |
-
----
-
-### `accessible`
-
-When `true`, indicates that the view is an accessibility element. By default, all the touchable elements are accessible.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `accessibilityLabel`
-
-Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the `Text` nodes separated by space.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityLanguage` <div className="label ios">iOS</div>
-
-A value indicating which language should be used by the screen reader when the user interacts with the element. It should follow the [BCP 47 specification](https://www.rfc-editor.org/info/bcp47).
-
-See the [iOS `accessibilityLanguage` doc](https://developer.apple.com/documentation/objectivec/nsobject/1615192-accessibilitylanguage) for more information.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityHint`
-
-An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityRole`
-
-`accessibilityRole` communicates the purpose of a component to the user of an assistive technology.
-
-`accessibilityRole` can be one of the following:
-
-- `'none'` - Used when the element has no role.
-- `'button'` - Used when the element should be treated as a button.
-- `'link'` - Used when the element should be treated as a link.
-- `'search'` - Used when the text field element should also be treated as a search field.
-- `'image'` - Used when the element should be treated as an image. Can be combined with button or link, for example.
-- `'keyboardkey'` - Used when the element acts as a keyboard key.
-- `'text'` - Used when the element should be treated as static text that cannot change.
-- `'adjustable'` - Used when an element can be "adjusted" (e.g. a slider).
-- `'imagebutton'` - Used when the element should be treated as a button and is also an image.
-- `'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.
-- `'alert'` - Used when an element contains important text to be presented to the user.
-- `'checkbox'` - Used when an element represents a checkbox which can be checked, unchecked, or have mixed checked state.
-- `'combobox'` - Used when an element represents a combo box, which allows the user to select among several choices.
-- `'menu'` - Used when the component is a menu of choices.
-- `'menubar'` - Used when a component is a container of multiple menus.
-- `'menuitem'` - Used to represent an item within a menu.
-- `'progressbar'` - Used to represent a component which indicates progress of a task.
-- `'radio'` - Used to represent a radio button.
-- `'radiogroup'` - Used to represent a group of radio buttons.
-- `'scrollbar'` - Used to represent a scroll bar.
-- `'spinbutton'` - Used to represent a button which opens a list of choices.
-- `'switch'` - Used to represent a switch which can be turned on and off.
-- `'tab'` - Used to represent a tab.
-- `'tablist'` - Used to represent a list of tabs.
-- `'timer'` - Used to represent a timer.
-- `'toolbar'` - Used to represent a tool bar (a container of action buttons or components).
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityState`
-
-Describes the current state of a component to the user of an assistive technology.
-
-See the [Accessibility guide](accessibility.md#accessibilitystate-ios-android) for more information.
-
-| Type                                                                                             |
-| ------------------------------------------------------------------------------------------------ |
-| object: `{disabled: bool, selected: bool, checked: bool or 'mixed', busy: bool, expanded: bool}` |
-
----
-
-### `accessibilityActions`
-
-Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The `accessibilityActions` property should contain a list of action objects. Each action object should contain the field name and label.
-
-See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
-
-| Type  |
-| ----- |
-| array |
-
----
-
-### `aria-busy`
-
-Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-checked`
-
-Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
-| Type             | Default |
-| ---------------- | ------- |
-| boolean, 'mixed' | false   |
-
----
-
-### `aria-disabled`
-
-Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-expanded`
-
-Indicates whether an expandable element is currently expanded or collapsed.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-hidden`
-
-Indicates whether the element is hidden from assistive technologies.
-
-For example, in a window that contains sibling views `A` and `B`, setting `aria-hidden` to `true` on view `B` causes VoiceOver to ignore the `B` element and its children.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-label`
-
-Defines a string value that labels an interactive element.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `aria-live` <div className="label android">Android</div>
-
-Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
-
-- **off** Accessibility services should not announce changes to this view.
-- **polite** Accessibility services should announce changes to this view.
-- **assertive** Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
-
-| Type                                     | Default |
-| ---------------------------------------- | ------- |
-| enum(`'assertive'`, `'off'`, `'polite'`) | `'off'` |
-
----
-
-### `aria-modal` <div className="label ios">iOS</div>
-
-Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. Has precedence over the [`accessibilityViewIsModal`](#accessibilityviewismodal-ios) prop.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-selected`
-
-Indicates whether a selectable element is currently selected or not.
-
-| Type    |
-| ------- |
-| boolean |
-
-### `onAccessibilityAction`
-
-Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.
-
-See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `accessibilityValue`
-
-Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
-See the [Accessibility guide](accessibility.md#accessibilityvalue-ios-android) for more information.
-
-| Type                                                            |
-| --------------------------------------------------------------- |
-| object: `{min: number, max: number, now: number, text: string}` |
-
----
-
-### `aria-valuemax`
-
-Represents the maximum value for range-based components, such as sliders and progress bars. Has precedence over the `max` value in the `accessibilityValue` prop.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `aria-valuemin`
-
-Represents the minimum value for range-based components, such as sliders and progress bars. Has precedence over the `min` value in the `accessibilityValue` prop.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `aria-valuenow`
-
-Represents the current value for range-based components, such as sliders and progress bars. Has precedence over the `now` value in the `accessibilityValue` prop.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `aria-valuetext`
-
-Represents the textual description of the component. Has precedence over the `text` value in the `accessibilityValue` prop.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `delayLongPress`
-
-Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `delayPressIn`
-
-Duration (in milliseconds), from the start of the touch, before `onPressIn` is called.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `delayPressOut`
-
-Duration (in milliseconds), from the release of the touch, before `onPressOut` is called.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `disabled`
-
-If true, disable all interactions for this component.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `hitSlop`
-
-This defines how far your touch can start away from the button. This is added to `pressRetentionOffset` when moving off of the button.
-
-:::note
-The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
-:::
-
-| Type                   |
-| ---------------------- |
-| [Rect](rect) or number |
-
-### `id`
-
-Used to locate this view from native code. Has precedence over `nativeID` prop.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `onBlur`
-
-Invoked when the item loses focus.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
-
----
-
-### `onFocus`
-
-Invoked when the item receives focus.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
-
----
-
-### `onLayout`
-
-Invoked on mount and on layout changes.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
-
----
-
-### `onLongPress`
-
-Called if the time after `onPressIn` lasts longer than 370 milliseconds. This time period can be customized with [`delayLongPress`](#delaylongpress).
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onPress`
-
-Called when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock). The first function argument is an event in form of [PressEvent](pressevent).
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onPressIn`
-
-Called as soon as the touchable element is pressed and invoked even before onPress. This can be useful when making network requests. The first function argument is an event in form of [PressEvent](pressevent).
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onPressOut`
-
-Called as soon as the touch is released even before onPress. The first function argument is an event in form of [PressEvent](pressevent).
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `pressRetentionOffset`
-
-When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations.
-
-| Type                   |
-| ---------------------- |
-| [Rect](rect) or number |
-
----
-
-### `nativeID`
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `testID`
-
-Used to locate this view in end-to-end tests.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `touchSoundDisabled` <div className="label android">Android</div>
-
-If true, doesn't play a system sound on touch.
-
-| Type    |
-| ------- |
-| Boolean |
+---
+id: touchablewithoutfeedback
+title: TouchableWithoutFeedback
+---
+
+:::tip
+If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
+:::
+
+Do not use unless you have a very good reason. All elements that respond to press should have a visual feedback when touched.
+
+`TouchableWithoutFeedback` supports only one child. If you wish to have several child components, wrap them in a View. Importantly, `TouchableWithoutFeedback` works by cloning its child and applying responder props to it. It is therefore required that any intermediary components pass through those props to the underlying React Native component.
+
+## Usage Pattern
+
+```tsx
+function MyComponent(props: MyComponentProps) {
+  return (
+    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
+      <Text>My Component</Text>
+    </View>
+  );
+}
+
+<TouchableWithoutFeedback onPress={() => alert('Pressed!')}>
+  <MyComponent />
+</TouchableWithoutFeedback>;
+```
+
+## Example
+
+```SnackPlayer name=TouchableWithoutFeedback
+import {useState} from 'react';
+import {StyleSheet, TouchableWithoutFeedback, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const TouchableWithoutFeedbackExample = () => {
+  const [count, setCount] = useState(0);
+
+  const onPress = () => {
+    setCount(count + 1);
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.countContainer}>
+          <Text style={styles.countText}>Count: {count}</Text>
+        </View>
+        <TouchableWithoutFeedback onPress={onPress}>
+          <View style={styles.button}>
+            <Text>Touch Here</Text>
+          </View>
+        </TouchableWithoutFeedback>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#DDDDDD',
+    padding: 10,
+  },
+  countContainer: {
+    alignItems: 'center',
+    padding: 10,
+  },
+  countText: {
+    color: '#FF00FF',
+  },
+});
+
+export default TouchableWithoutFeedbackExample;
+```
+
+---
+
+# Reference
+
+## Props
+
+### `accessibilityIgnoresInvertColors` <div className="label ios">iOS</div>
+
+A value indicating this view should or should not be inverted when color inversion is turned on. A value of `true` will tell the view to not be inverted even if color inversion is turned on.
+
+See the [Accessibility guide](accessibility.md#accessibilityignoresinvertcolors) for more information.
+
+| Type    |
+| ------- |
+| Boolean |
+
+---
+
+### `accessible`
+
+When `true`, indicates that the view is an accessibility element. By default, all the touchable elements are accessible.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `accessibilityLabel`
+
+Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the `Text` nodes separated by space.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityLanguage` <div className="label ios">iOS</div>
+
+A value indicating which language should be used by the screen reader when the user interacts with the element. It should follow the [BCP 47 specification](https://www.rfc-editor.org/info/bcp47).
+
+See the [iOS `accessibilityLanguage` doc](https://developer.apple.com/documentation/objectivec/nsobject/1615192-accessibilitylanguage) for more information.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityHint`
+
+An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityRole`
+
+`accessibilityRole` communicates the purpose of a component to the user of an assistive technology.
+
+`accessibilityRole` can be one of the following:
+
+- `'none'` - Used when the element has no role.
+- `'button'` - Used when the element should be treated as a button.
+- `'link'` - Used when the element should be treated as a link.
+- `'search'` - Used when the text field element should also be treated as a search field.
+- `'image'` - Used when the element should be treated as an image. Can be combined with button or link, for example.
+- `'keyboardkey'` - Used when the element acts as a keyboard key.
+- `'text'` - Used when the element should be treated as static text that cannot change.
+- `'adjustable'` - Used when an element can be "adjusted" (e.g. a slider).
+- `'imagebutton'` - Used when the element should be treated as a button and is also an image.
+- `'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.
+- `'alert'` - Used when an element contains important text to be presented to the user.
+- `'checkbox'` - Used when an element represents a checkbox which can be checked, unchecked, or have mixed checked state.
+- `'combobox'` - Used when an element represents a combo box, which allows the user to select among several choices.
+- `'menu'` - Used when the component is a menu of choices.
+- `'menubar'` - Used when a component is a container of multiple menus.
+- `'menuitem'` - Used to represent an item within a menu.
+- `'progressbar'` - Used to represent a component which indicates progress of a task.
+- `'radio'` - Used to represent a radio button.
+- `'radiogroup'` - Used to represent a group of radio buttons.
+- `'scrollbar'` - Used to represent a scroll bar.
+- `'spinbutton'` - Used to represent a button which opens a list of choices.
+- `'switch'` - Used to represent a switch which can be turned on and off.
+- `'tab'` - Used to represent a tab.
+- `'tablist'` - Used to represent a list of tabs.
+- `'timer'` - Used to represent a timer.
+- `'toolbar'` - Used to represent a tool bar (a container of action buttons or components).
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityState`
+
+Describes the current state of a component to the user of an assistive technology.
+
+See the [Accessibility guide](accessibility.md#accessibilitystate-ios-android) for more information.
+
+| Type                                                                                             |
+| ------------------------------------------------------------------------------------------------ |
+| object: `{disabled: bool, selected: bool, checked: bool or 'mixed', busy: bool, expanded: bool}` |
+
+---
+
+### `accessibilityActions`
+
+Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The `accessibilityActions` property should contain a list of action objects. Each action object should contain the field name and label.
+
+See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
+
+| Type  |
+| ----- |
+| array |
+
+---
+
+### `aria-busy`
+
+Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-checked`
+
+Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
+
+| Type             | Default |
+| ---------------- | ------- |
+| boolean, 'mixed' | false   |
+
+---
+
+### `aria-disabled`
+
+Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-expanded`
+
+Indicates whether an expandable element is currently expanded or collapsed.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-hidden`
+
+Indicates whether the element is hidden from assistive technologies.
+
+For example, in a window that contains sibling views `A` and `B`, setting `aria-hidden` to `true` on view `B` causes VoiceOver to ignore the `B` element and its children.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-label`
+
+Defines a string value that labels an interactive element.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `aria-live` <div className="label android">Android</div>
+
+Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
+
+- **off** Accessibility services should not announce changes to this view.
+- **polite** Accessibility services should announce changes to this view.
+- **assertive** Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
+
+| Type                                     | Default |
+| ---------------------------------------- | ------- |
+| enum(`'assertive'`, `'off'`, `'polite'`) | `'off'` |
+
+---
+
+### `aria-modal` <div className="label ios">iOS</div>
+
+Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. Has precedence over the [`accessibilityViewIsModal`](#accessibilityviewismodal-ios) prop.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-selected`
+
+Indicates whether a selectable element is currently selected or not.
+
+| Type    |
+| ------- |
+| boolean |
+
+### `onAccessibilityAction`
+
+Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.
+
+See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `accessibilityValue`
+
+Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
+
+See the [Accessibility guide](accessibility.md#accessibilityvalue-ios-android) for more information.
+
+| Type                                                            |
+| --------------------------------------------------------------- |
+| object: `{min: number, max: number, now: number, text: string}` |
+
+---
+
+### `aria-valuemax`
+
+Represents the maximum value for range-based components, such as sliders and progress bars. Has precedence over the `max` value in the `accessibilityValue` prop.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `aria-valuemin`
+
+Represents the minimum value for range-based components, such as sliders and progress bars. Has precedence over the `min` value in the `accessibilityValue` prop.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `aria-valuenow`
+
+Represents the current value for range-based components, such as sliders and progress bars. Has precedence over the `now` value in the `accessibilityValue` prop.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `aria-valuetext`
+
+Represents the textual description of the component. Has precedence over the `text` value in the `accessibilityValue` prop.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `delayLongPress`
+
+Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `delayPressIn`
+
+Duration (in milliseconds), from the start of the touch, before `onPressIn` is called.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `delayPressOut`
+
+Duration (in milliseconds), from the release of the touch, before `onPressOut` is called.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `disabled`
+
+If true, disable all interactions for this component.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `hitSlop`
+
+This defines how far your touch can start away from the button. This is added to `pressRetentionOffset` when moving off of the button.
+
+:::note
+The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
+:::
+
+| Type                   |
+| ---------------------- |
+| [Rect](rect) or number |
+
+### `id`
+
+Used to locate this view from native code. Has precedence over `nativeID` prop.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `onBlur`
+
+Invoked when the item loses focus.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
+
+---
+
+### `onFocus`
+
+Invoked when the item receives focus.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
+
+---
+
+### `onLayout`
+
+Invoked on mount and on layout changes.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
+
+---
+
+### `onLongPress`
+
+Called if the time after `onPressIn` lasts longer than 370 milliseconds. This time period can be customized with [`delayLongPress`](#delaylongpress).
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onPress`
+
+Called when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock). The first function argument is an event in form of [PressEvent](pressevent).
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onPressIn`
+
+Called as soon as the touchable element is pressed and invoked even before onPress. This can be useful when making network requests. The first function argument is an event in form of [PressEvent](pressevent).
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onPressOut`
+
+Called as soon as the touch is released even before onPress. The first function argument is an event in form of [PressEvent](pressevent).
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `pressRetentionOffset`
+
+When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations.
+
+| Type                   |
+| ---------------------- |
+| [Rect](rect) or number |
+
+---
+
+### `nativeID`
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `testID`
+
+Used to locate this view in end-to-end tests.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `touchSoundDisabled` <div className="label android">Android</div>
+
+If true, doesn't play a system sound on touch.
+
+| Type    |
+| ------- |
+| Boolean |
diff --git a/website/versioned_docs/version-0.84/transforms.md b/website/versioned_docs/version-0.84/transforms.md
index 364ba3a6873..003585bac39 100644
--- a/website/versioned_docs/version-0.84/transforms.md
+++ b/website/versioned_docs/version-0.84/transforms.md
@@ -1,399 +1,398 @@
----
-id: transforms
-title: Transforms
----
-
-Transforms are style properties that will help you modify the appearance and position of your components using 2D or 3D transformations. However, once you apply transforms, the layouts remain the same around the transformed component hence it might overlap with the nearby components. You can apply margin to the transformed component, the nearby components or padding to the container to prevent such overlaps.
-
-## Example
-
-```SnackPlayer name=Transforms%20Example
-import React from 'react';
-import {ScrollView, StyleSheet, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => (
-  <SafeAreaProvider>
-    <SafeAreaView style={styles.container}>
-      <ScrollView contentContainerStyle={styles.scrollContentContainer}>
-        <View style={styles.box}>
-          <Text style={styles.text}>Original Object</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{scale: 2}],
-            },
-          ]}>
-          <Text style={styles.text}>Scale by 2</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{scaleX: 2}],
-            },
-          ]}>
-          <Text style={styles.text}>ScaleX by 2</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{scaleY: 2}],
-            },
-          ]}>
-          <Text style={styles.text}>ScaleY by 2</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{rotate: '45deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>Rotate by 45 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{rotateX: '45deg'}, {rotateZ: '45deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>Rotate X&Z by 45 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{rotateY: '45deg'}, {rotateZ: '45deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>Rotate Y&Z by 45 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{skewX: '45deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>SkewX by 45 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{skewY: '45deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>SkewY by 45 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{skewX: '30deg'}, {skewY: '30deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>Skew X&Y by 30 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{translateX: -50}],
-            },
-          ]}>
-          <Text style={styles.text}>TranslateX by -50 </Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{translateY: 50}],
-            },
-          ]}>
-          <Text style={styles.text}>TranslateY by 50 </Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [
-                {
-                  matrix: [1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
-                },
-              ],
-            },
-          ]}>
-          <Text style={styles.text}>Matrix Transform</Text>
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  scrollContentContainer: {
-    alignItems: 'center',
-    paddingBottom: 60,
-  },
-  box: {
-    height: 100,
-    width: 100,
-    borderRadius: 5,
-    marginVertical: 40,
-    backgroundColor: '#61dafb',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  text: {
-    fontSize: 14,
-    fontWeight: 'bold',
-    margin: 8,
-    color: '#000',
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Transform
-
-`transform` accepts an array of transformation objects or space-separated string values. Each object specifies the property that will be transformed as the key, and the value to use in the transformation. Objects should not be combined. Use a single key/value pair per object.
-
-The rotate transformations require a string so that the transform may be expressed in degrees (deg) or radians (rad). For example:
-
-```js
-{
-  transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}],
-}
-```
-
-The same could also be achieved using a space-separated string:
-
-```js
-{
-  transform: 'rotateX(45deg) rotateZ(0.785398rad)',
-}
-```
-
-The skew transformations require a string so that the transform may be expressed in degrees (deg). For example:
-
-```js
-{
-  transform: [{skewX: '45deg'}],
-}
-```
-
-### Matrix Transform
-
-The `matrix` transform accepts a 4x4 transformation matrix as an array of 16 numbers. This allows you to apply complex transformations that combine translation, rotation, scaling, and skewing in a single operation.
-
-The matrix is specified in column-major order:
-
-```js
-{
-  transform: [
-    {
-      matrix: [
-        scaleX,
-        skewY,
-        0,
-        0,
-        skewX,
-        scaleY,
-        0,
-        0,
-        0,
-        0,
-        1,
-        0,
-        translateX,
-        translateY,
-        0,
-        1,
-      ],
-    },
-  ];
-}
-```
-
-For example, to apply a combination of scale and skew:
-
-```js
-{
-  transform: [
-    {
-      matrix: [
-        1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
-      ],
-    },
-  ];
-}
-```
-
-:::note
-Matrix transforms are useful when you need to apply pre-calculated transformation matrices, such as those from animation libraries or when building UI editor applications. For basic transformations, it's recommended to use the individual transform properties (scale, rotate, translate, etc.) as they are more readable.
-:::
-
-| Type                                                                                                                                                                                                                                                                                                          | Required |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
-| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number}`, `{translateY: number}`, `{skewX: string}`, `{skewY: string}` or string | No       |
-
----
-
-### 🗑️ `decomposedMatrix`, `rotation`, `scaleX`, `scaleY`, `transformMatrix`, `translateX`, `translateY`
-
-:::warning[Deprecated]
-Use the [`transform`](transforms#transform) prop instead.
-:::
-
-## Transform Origin
-
-The `transformOrigin` property sets the origin for a view's transformations. The transform origin is the point around which a transformation is applied. By default, the origin of a transform is `center`.
-
-# Example
-
-```SnackPlayer name=TransformOrigin%20Example
-import React, {useEffect, useRef} from 'react';
-import {Animated, View, StyleSheet, Easing} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const rotateAnim = useRef(new Animated.Value(0)).current;
-
-  useEffect(() => {
-    Animated.loop(
-      Animated.timing(rotateAnim, {
-        toValue: 1,
-        duration: 5000,
-        easing: Easing.linear,
-        useNativeDriver: true,
-      }),
-    ).start();
-  }, [rotateAnim]);
-
-  const spin = rotateAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '360deg'],
-  });
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.transformOriginWrapper}>
-          <Animated.View
-            style={[
-              styles.transformOriginView,
-              {
-                transform: [{rotate: spin}],
-              },
-            ]}
-          />
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  transformOriginWrapper: {
-    borderWidth: 1,
-    borderColor: 'rgba(0, 0, 0, 0.5)',
-  },
-  transformOriginView: {
-    backgroundColor: 'pink',
-    width: 100,
-    height: 100,
-    transformOrigin: 'top',
-  },
-});
-
-export default App;
-```
-
-### Values
-
-Transform origin supports `px`, `percentage` and keywords `top`, `left`, `right`, `bottom`, `center` values.
-
-The `transformOrigin` property may be specified using one, two, or three values, where each value represents an offset.
-
-#### One-value syntax:
-
-- The value must be a `px`, a `percentage`, or one of the keywords `left`, `center`, `right`, `top`, and `bottom`.
-
-```js
-{
-  transformOrigin: '20px',
-  transformOrigin: 'bottom',
-}
-```
-
-#### Two-value syntax:
-
-- First value (x-offset) must be a `px`, a `percentage`, or one of the keywords `left`, `center`, and `right`.
-- The second value (y-offset) must be a `px`, a `percentage`, or one of the keywords `top`, `center`, and `bottom`.
-
-```js
-{
-  transformOrigin: '10px 2px',
-  transformOrigin: 'left top',
-  transformOrigin: 'top right',
-}
-```
-
-#### Three-value syntax:
-
-- The first two values are the same as for the two-value syntax.
-- The third value (z-offset) must be a `px`. It always represents the Z offset.
-
-```js
-{
-  transformOrigin: '2px 30% 10px',
-  transformOrigin: 'right bottom 20px',
-}
-```
-
-#### Array syntax
-
-`transformOrigin` also supports an array syntax. It makes it convenient to use it with Animated APIs. It also avoids string parsing, so should be more efficient.
-
-```js
-{
-  // Using numeric values
-  transformOrigin: [10, 30, 40],
-  // Mixing numeric and percentage values
-  transformOrigin: [10, '20%', 0],
-}
-```
-
-You may refer to MDN's guide on [Transform origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin) for additional information.
+---
+id: transforms
+title: Transforms
+---
+
+Transforms are style properties that will help you modify the appearance and position of your components using 2D or 3D transformations. However, once you apply transforms, the layouts remain the same around the transformed component hence it might overlap with the nearby components. You can apply margin to the transformed component, the nearby components or padding to the container to prevent such overlaps.
+
+## Example
+
+```SnackPlayer name=Transforms%20Example
+import {ScrollView, StyleSheet, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => (
+  <SafeAreaProvider>
+    <SafeAreaView style={styles.container}>
+      <ScrollView contentContainerStyle={styles.scrollContentContainer}>
+        <View style={styles.box}>
+          <Text style={styles.text}>Original Object</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{scale: 2}],
+            },
+          ]}>
+          <Text style={styles.text}>Scale by 2</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{scaleX: 2}],
+            },
+          ]}>
+          <Text style={styles.text}>ScaleX by 2</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{scaleY: 2}],
+            },
+          ]}>
+          <Text style={styles.text}>ScaleY by 2</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{rotate: '45deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>Rotate by 45 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{rotateX: '45deg'}, {rotateZ: '45deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>Rotate X&Z by 45 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{rotateY: '45deg'}, {rotateZ: '45deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>Rotate Y&Z by 45 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{skewX: '45deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>SkewX by 45 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{skewY: '45deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>SkewY by 45 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{skewX: '30deg'}, {skewY: '30deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>Skew X&Y by 30 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{translateX: -50}],
+            },
+          ]}>
+          <Text style={styles.text}>TranslateX by -50 </Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{translateY: 50}],
+            },
+          ]}>
+          <Text style={styles.text}>TranslateY by 50 </Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [
+                {
+                  matrix: [1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
+                },
+              ],
+            },
+          ]}>
+          <Text style={styles.text}>Matrix Transform</Text>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollContentContainer: {
+    alignItems: 'center',
+    paddingBottom: 60,
+  },
+  box: {
+    height: 100,
+    width: 100,
+    borderRadius: 5,
+    marginVertical: 40,
+    backgroundColor: '#61dafb',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    margin: 8,
+    color: '#000',
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Transform
+
+`transform` accepts an array of transformation objects or space-separated string values. Each object specifies the property that will be transformed as the key, and the value to use in the transformation. Objects should not be combined. Use a single key/value pair per object.
+
+The rotate transformations require a string so that the transform may be expressed in degrees (deg) or radians (rad). For example:
+
+```js
+{
+  transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}],
+}
+```
+
+The same could also be achieved using a space-separated string:
+
+```js
+{
+  transform: 'rotateX(45deg) rotateZ(0.785398rad)',
+}
+```
+
+The skew transformations require a string so that the transform may be expressed in degrees (deg). For example:
+
+```js
+{
+  transform: [{skewX: '45deg'}],
+}
+```
+
+### Matrix Transform
+
+The `matrix` transform accepts a 4x4 transformation matrix as an array of 16 numbers. This allows you to apply complex transformations that combine translation, rotation, scaling, and skewing in a single operation.
+
+The matrix is specified in column-major order:
+
+```js
+{
+  transform: [
+    {
+      matrix: [
+        scaleX,
+        skewY,
+        0,
+        0,
+        skewX,
+        scaleY,
+        0,
+        0,
+        0,
+        0,
+        1,
+        0,
+        translateX,
+        translateY,
+        0,
+        1,
+      ],
+    },
+  ];
+}
+```
+
+For example, to apply a combination of scale and skew:
+
+```js
+{
+  transform: [
+    {
+      matrix: [
+        1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
+      ],
+    },
+  ];
+}
+```
+
+:::note
+Matrix transforms are useful when you need to apply pre-calculated transformation matrices, such as those from animation libraries or when building UI editor applications. For basic transformations, it's recommended to use the individual transform properties (scale, rotate, translate, etc.) as they are more readable.
+:::
+
+| Type                                                                                                                                                                                                                                                                                                          | Required |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
+| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number}`, `{translateY: number}`, `{skewX: string}`, `{skewY: string}` or string | No       |
+
+---
+
+### 🗑️ `decomposedMatrix`, `rotation`, `scaleX`, `scaleY`, `transformMatrix`, `translateX`, `translateY`
+
+:::warning[Deprecated]
+Use the [`transform`](transforms#transform) prop instead.
+:::
+
+## Transform Origin
+
+The `transformOrigin` property sets the origin for a view's transformations. The transform origin is the point around which a transformation is applied. By default, the origin of a transform is `center`.
+
+# Example
+
+```SnackPlayer name=TransformOrigin%20Example
+import {useEffect, useRef} from 'react';
+import {Animated, View, StyleSheet, Easing} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const rotateAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.timing(rotateAnim, {
+        toValue: 1,
+        duration: 5000,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      }),
+    ).start();
+  }, [rotateAnim]);
+
+  const spin = rotateAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.transformOriginWrapper}>
+          <Animated.View
+            style={[
+              styles.transformOriginView,
+              {
+                transform: [{rotate: spin}],
+              },
+            ]}
+          />
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  transformOriginWrapper: {
+    borderWidth: 1,
+    borderColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  transformOriginView: {
+    backgroundColor: 'pink',
+    width: 100,
+    height: 100,
+    transformOrigin: 'top',
+  },
+});
+
+export default App;
+```
+
+### Values
+
+Transform origin supports `px`, `percentage` and keywords `top`, `left`, `right`, `bottom`, `center` values.
+
+The `transformOrigin` property may be specified using one, two, or three values, where each value represents an offset.
+
+#### One-value syntax:
+
+- The value must be a `px`, a `percentage`, or one of the keywords `left`, `center`, `right`, `top`, and `bottom`.
+
+```js
+{
+  transformOrigin: '20px',
+  transformOrigin: 'bottom',
+}
+```
+
+#### Two-value syntax:
+
+- First value (x-offset) must be a `px`, a `percentage`, or one of the keywords `left`, `center`, and `right`.
+- The second value (y-offset) must be a `px`, a `percentage`, or one of the keywords `top`, `center`, and `bottom`.
+
+```js
+{
+  transformOrigin: '10px 2px',
+  transformOrigin: 'left top',
+  transformOrigin: 'top right',
+}
+```
+
+#### Three-value syntax:
+
+- The first two values are the same as for the two-value syntax.
+- The third value (z-offset) must be a `px`. It always represents the Z offset.
+
+```js
+{
+  transformOrigin: '2px 30% 10px',
+  transformOrigin: 'right bottom 20px',
+}
+```
+
+#### Array syntax
+
+`transformOrigin` also supports an array syntax. It makes it convenient to use it with Animated APIs. It also avoids string parsing, so should be more efficient.
+
+```js
+{
+  // Using numeric values
+  transformOrigin: [10, 30, 40],
+  // Mixing numeric and percentage values
+  transformOrigin: [10, '20%', 0],
+}
+```
+
+You may refer to MDN's guide on [Transform origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin) for additional information.
diff --git a/website/versioned_docs/version-0.84/troubleshooting.md b/website/versioned_docs/version-0.84/troubleshooting.md
index 811302be504..540f38b984f 100644
--- a/website/versioned_docs/version-0.84/troubleshooting.md
+++ b/website/versioned_docs/version-0.84/troubleshooting.md
@@ -91,7 +91,6 @@ To revert the `User Search Header Paths` and `Header Search Paths` build setting
 React Native implements a polyfill for WebSockets. These [polyfills](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Core/InitializeCore.js) are initialized as part of the react-native module that you include in your application through `import React from 'react'`. If you load another module that requires WebSockets, such as [Firebase](https://github.com/facebook/react-native/issues/3645), be sure to load/require it after react-native:
 
 ```
-import React from 'react';
 import Firebase from 'firebase';
 ```
 
diff --git a/website/versioned_docs/version-0.84/turbo-native-modules.md b/website/versioned_docs/version-0.84/turbo-native-modules.md
index eeef8624578..1d41bd06ce9 100644
--- a/website/versioned_docs/version-0.84/turbo-native-modules.md
+++ b/website/versioned_docs/version-0.84/turbo-native-modules.md
@@ -1,260 +1,260 @@
----
-id: turbo-native-modules-introduction
-title: 'Native Modules: Introduction'
----
-
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import constants from '@site/core/TabsConstants';
-import CodeBlock from '@theme/CodeBlock';
-import {getCurrentVersion} from '@site/src/getCurrentVersion';
-import {TurboNativeModulesAndroid, TurboNativeModulesIOS} from './\_turbo-native-modules-components';
-
-# Native Modules
-
-Your React Native application code may need to interact with native platform APIs that aren't provided by React Native or an existing library. You can write the integration code yourself using a **Turbo Native Module**. This guide will show you how to write one.
-
-The basic steps are:
-
-1. **define a typed JavaScript specification** using one of the most popular JavaScript type annotation languages: Flow or TypeScript;
-2. **configure your dependency management system to run Codegen**, which converts the specification into native language interfaces;
-3. **write your application code** using your specification; and
-4. **write your native platform code using the generated interfaces** to write and hook your native code into the React Native runtime environment.
-
-Lets work through each of these steps by building an example Turbo Native Module. The rest of this guide assume that you have created your application running the command:
-
-<CodeBlock language="bash" title="shell">
-{`npx @react-native-community/cli@latest init TurboModuleExample --version ${getCurrentVersion()}`}
-</CodeBlock>
-
-## Native Persistent Storage
-
-This guide will show you how to write an implementation of the [Web Storage API](https://html.spec.whatwg.org/multipage/webstorage.html#dom-localstorage-dev): `localStorage`. The API is relatable to a React developer who might be writing application code on your project.
-
-To make this work on mobile, we need to use Android and iOS APIs:
-
-- Android: [SharedPreferences](https://developer.android.com/reference/android/content/SharedPreferences), and
-- iOS: [NSUserDefaults](https://developer.apple.com/documentation/foundation/nsuserdefaults).
-
-### 1. Declare Typed Specification
-
-React Native provides a tool called [Codegen](/docs/the-new-architecture/what-is-codegen), which takes a specification written in TypeScript or Flow and generates platform specific code for Android and iOS. The specification declares the methods and data types that will pass back and forth between your native code and the React Native JavaScript runtime. A Turbo Native Module is both your specification, the native code you write, and the Codegen interfaces generated from your specification.
-
-To create a specs file:
-
-1. Inside the root folder of your app, create a new folder called `specs`.
-2. Create a new file called `NativeLocalStorage.ts`.
-
-:::info
-You can see all of the types you can use in your specification and the native types that are generated in the [Appendix](/docs/appendix) documentation.
-:::
-
-:::info
-If you want to change the name of your module and the related specs file, make sure to always use 'Native' as prefix (e.g. `NativeStorage` or `NativeUsersDefault`).
-:::
-
-Here is an implementation of the `localStorage` specification:
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultJavaScriptSpecLanguage} values={constants.javaScriptSpecLanguages}>
-<TabItem value="typescript">
-
-```typescript title="specs/NativeLocalStorage.ts"
-import type {TurboModule} from 'react-native';
-import {TurboModuleRegistry} from 'react-native';
-
-export interface Spec extends TurboModule {
-  setItem(value: string, key: string): void;
-  getItem(key: string): string | null;
-  removeItem(key: string): void;
-  clear(): void;
-}
-
-export default TurboModuleRegistry.getEnforcing<Spec>(
-  'NativeLocalStorage',
-);
-```
-
-</TabItem>
-<TabItem value="flow">
-
-```flow title="NativeLocalStorage.js"
-import type {TurboModule} from 'react-native';
-import {TurboModule, TurboModuleRegistry} from 'react-native';
-
-export interface Spec extends TurboModule {
-  setItem(value: string, key: string): void;
-  getItem(key: string): ?string;
-  removeItem(key: string): void;
-  clear(): void;
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 2. Configure Codegen to run
-
-The specification is used by the React Native Codegen tools to generate platform specific interfaces and boilerplate for us. To do this, Codegen needs to know where to find our specification and what to do with it. Update your `package.json` to include:
-
-```json title="package.json"
-     "start": "react-native start",
-     "test": "jest"
-   },
-   // highlight-add-start
-   "codegenConfig": {
-     "name": "NativeLocalStorageSpec",
-     "type": "modules",
-     "jsSrcsDir": "specs",
-     "android": {
-       "javaPackageName": "com.nativelocalstorage"
-     }
-   },
-   // highlight-add-end
-   "dependencies": {
-```
-
-With everything wired up for Codegen, we need to prepare our native code to hook into our generated code.
-
-<Tabs groupId="platforms" queryString defaultValue={constants.defaultPlatform}>
-<TabItem value="android" label="Android">
-Codegen is executed through the `generateCodegenArtifactsFromSchema` Gradle task:
-
-```bash
-cd android
-./gradlew generateCodegenArtifactsFromSchema
-
-BUILD SUCCESSFUL in 837ms
-14 actionable tasks: 3 executed, 11 up-to-date
-```
-
-This is automatically run when you build your Android application.
-</TabItem>
-<TabItem value="ios" label="iOS">
-Codegen is run as part of the script phases that's automatically added to the project generated by CocoaPods.
-
-```bash
-cd ios
-bundle install
-bundle exec pod install
-```
-
-The output will look like this:
-
-```shell
-...
-Framework build type is static library
-[Codegen] Adding script_phases to ReactCodegen.
-[Codegen] Generating ./build/generated/ios/ReactCodegen.podspec.json
-[Codegen] Analyzing /Users/me/src/TurboModuleExample/package.json
-[Codegen] Searching for codegen-enabled libraries in the app.
-[Codegen] Found TurboModuleExample
-[Codegen] Searching for codegen-enabled libraries in the project dependencies.
-[Codegen] Found react-native
-...
-```
-
-</TabItem>
-</Tabs>
-
-### 3. Write Application Code using the Turbo Native Module
-
-Using `NativeLocalStorage`, here’s a modified `App.tsx` that includes some text we want persisted, an input field and some buttons to update this value.
-
-The `TurboModuleRegistry` supports 2 modes of retrieving a Turbo Native Module:
-
-- `get<T>(name: string): T | null` which will return `null` if the Turbo Native Module is unavailable.
-- `getEnforcing<T>(name: string): T` which will throw an exception if the Turbo Native Module is unavailable. This assumes the module is always available.
-
-```tsx title="App.tsx"
-import React from 'react';
-import {
-  SafeAreaView,
-  StyleSheet,
-  Text,
-  TextInput,
-  Button,
-} from 'react-native';
-
-import NativeLocalStorage from './specs/NativeLocalStorage';
-
-const EMPTY = '<empty>';
-
-function App(): React.JSX.Element {
-  const [value, setValue] = React.useState<string | null>(null);
-
-  const [editingValue, setEditingValue] = React.useState<
-    string | null
-  >(null);
-
-  React.useEffect(() => {
-    const storedValue = NativeLocalStorage?.getItem('myKey');
-    setValue(storedValue ?? '');
-  }, []);
-
-  function saveValue() {
-    NativeLocalStorage?.setItem(editingValue ?? EMPTY, 'myKey');
-    setValue(editingValue);
-  }
-
-  function clearAll() {
-    NativeLocalStorage?.clear();
-    setValue('');
-  }
-
-  function deleteValue() {
-    NativeLocalStorage?.removeItem('myKey');
-    setValue('');
-  }
-
-  return (
-    <SafeAreaView style={{flex: 1}}>
-      <Text style={styles.text}>
-        Current stored value is: {value ?? 'No Value'}
-      </Text>
-      <TextInput
-        placeholder="Enter the text you want to store"
-        style={styles.textInput}
-        onChangeText={setEditingValue}
-      />
-      <Button title="Save" onPress={saveValue} />
-      <Button title="Delete" onPress={deleteValue} />
-      <Button title="Clear" onPress={clearAll} />
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  text: {
-    margin: 10,
-    fontSize: 20,
-  },
-  textInput: {
-    margin: 10,
-    height: 40,
-    borderColor: 'black',
-    borderWidth: 1,
-    paddingLeft: 5,
-    paddingRight: 5,
-    borderRadius: 5,
-  },
-});
-
-export default App;
-```
-
-### 4. Write your Native Platform code
-
-With everything prepared, we're going to start writing native platform code. We do this in 2 parts:
-
-:::note
-This guide shows you how to create a Turbo Native Module that only works with the New Architecture. If you need to support both the New Architecture and the Legacy Architecture, please refer to our [backwards compatibility guide](https://github.com/reactwg/react-native-new-architecture/blob/main/docs/backwards-compat.md).
-:::
-
-<Tabs groupId="platforms" queryString defaultValue={constants.defaultPlatform}>
-    <TabItem value="android" label="Android">
-        <TurboNativeModulesAndroid />
-    </TabItem>
-    <TabItem value="ios" label="iOS">
-        <TurboNativeModulesIOS/>
-    </TabItem>
-</Tabs>
+---
+id: turbo-native-modules-introduction
+title: 'Native Modules: Introduction'
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import constants from '@site/core/TabsConstants';
+import CodeBlock from '@theme/CodeBlock';
+import {getCurrentVersion} from '@site/src/getCurrentVersion';
+import {TurboNativeModulesAndroid, TurboNativeModulesIOS} from './\_turbo-native-modules-components';
+
+# Native Modules
+
+Your React Native application code may need to interact with native platform APIs that aren't provided by React Native or an existing library. You can write the integration code yourself using a **Turbo Native Module**. This guide will show you how to write one.
+
+The basic steps are:
+
+1. **define a typed JavaScript specification** using one of the most popular JavaScript type annotation languages: Flow or TypeScript;
+2. **configure your dependency management system to run Codegen**, which converts the specification into native language interfaces;
+3. **write your application code** using your specification; and
+4. **write your native platform code using the generated interfaces** to write and hook your native code into the React Native runtime environment.
+
+Lets work through each of these steps by building an example Turbo Native Module. The rest of this guide assume that you have created your application running the command:
+
+<CodeBlock language="bash" title="shell">
+{`npx @react-native-community/cli@latest init TurboModuleExample --version ${getCurrentVersion()}`}
+</CodeBlock>
+
+## Native Persistent Storage
+
+This guide will show you how to write an implementation of the [Web Storage API](https://html.spec.whatwg.org/multipage/webstorage.html#dom-localstorage-dev): `localStorage`. The API is relatable to a React developer who might be writing application code on your project.
+
+To make this work on mobile, we need to use Android and iOS APIs:
+
+- Android: [SharedPreferences](https://developer.android.com/reference/android/content/SharedPreferences), and
+- iOS: [NSUserDefaults](https://developer.apple.com/documentation/foundation/nsuserdefaults).
+
+### 1. Declare Typed Specification
+
+React Native provides a tool called [Codegen](/docs/the-new-architecture/what-is-codegen), which takes a specification written in TypeScript or Flow and generates platform specific code for Android and iOS. The specification declares the methods and data types that will pass back and forth between your native code and the React Native JavaScript runtime. A Turbo Native Module is both your specification, the native code you write, and the Codegen interfaces generated from your specification.
+
+To create a specs file:
+
+1. Inside the root folder of your app, create a new folder called `specs`.
+2. Create a new file called `NativeLocalStorage.ts`.
+
+:::info
+You can see all of the types you can use in your specification and the native types that are generated in the [Appendix](/docs/appendix) documentation.
+:::
+
+:::info
+If you want to change the name of your module and the related specs file, make sure to always use 'Native' as prefix (e.g. `NativeStorage` or `NativeUsersDefault`).
+:::
+
+Here is an implementation of the `localStorage` specification:
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultJavaScriptSpecLanguage} values={constants.javaScriptSpecLanguages}>
+<TabItem value="typescript">
+
+```typescript title="specs/NativeLocalStorage.ts"
+import type {TurboModule} from 'react-native';
+import {TurboModuleRegistry} from 'react-native';
+
+export interface Spec extends TurboModule {
+  setItem(value: string, key: string): void;
+  getItem(key: string): string | null;
+  removeItem(key: string): void;
+  clear(): void;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>(
+  'NativeLocalStorage',
+);
+```
+
+</TabItem>
+<TabItem value="flow">
+
+```flow title="NativeLocalStorage.js"
+import type {TurboModule} from 'react-native';
+import {TurboModule, TurboModuleRegistry} from 'react-native';
+
+export interface Spec extends TurboModule {
+  setItem(value: string, key: string): void;
+  getItem(key: string): ?string;
+  removeItem(key: string): void;
+  clear(): void;
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 2. Configure Codegen to run
+
+The specification is used by the React Native Codegen tools to generate platform specific interfaces and boilerplate for us. To do this, Codegen needs to know where to find our specification and what to do with it. Update your `package.json` to include:
+
+```json title="package.json"
+     "start": "react-native start",
+     "test": "jest"
+   },
+   // highlight-add-start
+   "codegenConfig": {
+     "name": "NativeLocalStorageSpec",
+     "type": "modules",
+     "jsSrcsDir": "specs",
+     "android": {
+       "javaPackageName": "com.nativelocalstorage"
+     }
+   },
+   // highlight-add-end
+   "dependencies": {
+```
+
+With everything wired up for Codegen, we need to prepare our native code to hook into our generated code.
+
+<Tabs groupId="platforms" queryString defaultValue={constants.defaultPlatform}>
+<TabItem value="android" label="Android">
+Codegen is executed through the `generateCodegenArtifactsFromSchema` Gradle task:
+
+```bash
+cd android
+./gradlew generateCodegenArtifactsFromSchema
+
+BUILD SUCCESSFUL in 837ms
+14 actionable tasks: 3 executed, 11 up-to-date
+```
+
+This is automatically run when you build your Android application.
+</TabItem>
+<TabItem value="ios" label="iOS">
+Codegen is run as part of the script phases that's automatically added to the project generated by CocoaPods.
+
+```bash
+cd ios
+bundle install
+bundle exec pod install
+```
+
+The output will look like this:
+
+```shell
+...
+Framework build type is static library
+[Codegen] Adding script_phases to ReactCodegen.
+[Codegen] Generating ./build/generated/ios/ReactCodegen.podspec.json
+[Codegen] Analyzing /Users/me/src/TurboModuleExample/package.json
+[Codegen] Searching for codegen-enabled libraries in the app.
+[Codegen] Found TurboModuleExample
+[Codegen] Searching for codegen-enabled libraries in the project dependencies.
+[Codegen] Found react-native
+...
+```
+
+</TabItem>
+</Tabs>
+
+### 3. Write Application Code using the Turbo Native Module
+
+Using `NativeLocalStorage`, here’s a modified `App.tsx` that includes some text we want persisted, an input field and some buttons to update this value.
+
+The `TurboModuleRegistry` supports 2 modes of retrieving a Turbo Native Module:
+
+- `get<T>(name: string): T | null` which will return `null` if the Turbo Native Module is unavailable.
+- `getEnforcing<T>(name: string): T` which will throw an exception if the Turbo Native Module is unavailable. This assumes the module is always available.
+
+```tsx title="App.tsx"
+import {useEffect, useState, type JSX} from 'react';
+import {
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  TextInput,
+  Button,
+} from 'react-native';
+
+import NativeLocalStorage from './specs/NativeLocalStorage';
+
+const EMPTY = '<empty>';
+
+function App(): JSX.Element {
+  const [value, setValue] = useState<string | null>(null);
+
+  const [editingValue, setEditingValue] = useState<string | null>(
+    null,
+  );
+
+  useEffect(() => {
+    const storedValue = NativeLocalStorage?.getItem('myKey');
+    setValue(storedValue ?? '');
+  }, []);
+
+  function saveValue() {
+    NativeLocalStorage?.setItem(editingValue ?? EMPTY, 'myKey');
+    setValue(editingValue);
+  }
+
+  function clearAll() {
+    NativeLocalStorage?.clear();
+    setValue('');
+  }
+
+  function deleteValue() {
+    NativeLocalStorage?.removeItem('myKey');
+    setValue('');
+  }
+
+  return (
+    <SafeAreaView style={{flex: 1}}>
+      <Text style={styles.text}>
+        Current stored value is: {value ?? 'No Value'}
+      </Text>
+      <TextInput
+        placeholder="Enter the text you want to store"
+        style={styles.textInput}
+        onChangeText={setEditingValue}
+      />
+      <Button title="Save" onPress={saveValue} />
+      <Button title="Delete" onPress={deleteValue} />
+      <Button title="Clear" onPress={clearAll} />
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  text: {
+    margin: 10,
+    fontSize: 20,
+  },
+  textInput: {
+    margin: 10,
+    height: 40,
+    borderColor: 'black',
+    borderWidth: 1,
+    paddingLeft: 5,
+    paddingRight: 5,
+    borderRadius: 5,
+  },
+});
+
+export default App;
+```
+
+### 4. Write your Native Platform code
+
+With everything prepared, we're going to start writing native platform code. We do this in 2 parts:
+
+:::note
+This guide shows you how to create a Turbo Native Module that only works with the New Architecture. If you need to support both the New Architecture and the Legacy Architecture, please refer to our [backwards compatibility guide](https://github.com/reactwg/react-native-new-architecture/blob/main/docs/backwards-compat.md).
+:::
+
+<Tabs groupId="platforms" queryString defaultValue={constants.defaultPlatform}>
+    <TabItem value="android" label="Android">
+        <TurboNativeModulesAndroid />
+    </TabItem>
+    <TabItem value="ios" label="iOS">
+        <TurboNativeModulesIOS/>
+    </TabItem>
+</Tabs>
diff --git a/website/versioned_docs/version-0.84/tutorial.md b/website/versioned_docs/version-0.84/tutorial.md
index d1a92919cd7..cbd5fd11bef 100644
--- a/website/versioned_docs/version-0.84/tutorial.md
+++ b/website/versioned_docs/version-0.84/tutorial.md
@@ -1,270 +1,267 @@
----
-id: tutorial
-title: Learn the Basics
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-React Native is like React, but it uses native components instead of web components as building blocks. So to understand the basic structure of a React Native app, you need to understand some of the basic React concepts, like JSX, components, `state`, and `props`. If you already know React, you still need to learn some React Native specific stuff, like the native components. This tutorial is aimed at all audiences, whether you have React experience or not.
-
-Let's do this thing.
-
-## Hello World
-
-In accordance with the ancient traditions of our people, we must first build an app that does nothing except say "Hello, world!". Here it is:
-
-```SnackPlayer name=Hello%20World
-import React from 'react';
-import {Text, View} from 'react-native';
-
-const HelloWorldApp = () => {
-  return (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}>
-      <Text>Hello, world!</Text>
-    </View>
-  );
-};
-export default HelloWorldApp;
-```
-
-If you are feeling curious, you can play around with sample code directly in the web simulators. You can also paste it into your `App.js` file to create a real app on your local machine.
-
-## What's going on here?
-
-1. First of all, we need to import `React` to be able to use `JSX`, which will then be transformed to the native components of each platform.
-2. On line 2, we import the `Text` and `View` components from `react-native`
-
-Then we define the `HelloWorldApp` function, which is a [function component](https://react.dev/reference/react/Component) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child.
-
-The `Text` component allows us to render a text, while the `View` component renders a container. This container has several styles applied, let's analyze what each one is doing.
-
-The first style that we find is `flex: 1`, the [`flex`](layout-props#flex) prop will define how your items are going to "fill" over the available space along your main axis. Since we only have one container, it will take all the available space of the parent component. In this case, it is the only component, so it will take all the available screen space.
-
-The following style is [`justifyContent`](layout-props#justifycontent): "center". This aligns children of a container in the center of the container's main axis. Finally, we have [`alignItems`](layout-props#alignitems): "center", which aligns children of a container in the center of the container's cross axis.
-
-Some of the things in here might not look like JavaScript to you. Don't panic. _This is the future_.
-
-First of all, ES2015 (also known as ES6) is a set of improvements to JavaScript that is now part of the official standard, but not yet supported by all browsers, so often it isn't used yet in web development. React Native ships with ES2015 support, so you can use this stuff without worrying about compatibility. `import`, `export`, `const` and `from` in the example above are all ES2015 features. If you aren't familiar with ES2015, you can probably pick it up by reading through sample code like this tutorial has. If you want, [this page](https://babeljs.io/learn-es2015/) has a good overview of ES2015 features.
-
-The other unusual thing in this code example is `<View><Text>Hello world!</Text></View>`. This is JSX - a syntax for embedding XML within JavaScript. Many frameworks use a specialized templating language which lets you embed code inside markup language. In React, this is reversed. JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like `<div>` or `<span>`, you use React components. In this case, `<Text>` is a [Core Component](intro-react-native-components) that displays some text and `View` is like the `<div>` or `<span>`.
-
-## Components
-
-So this code is defining `HelloWorldApp`, a new `Component`. When you're building a React Native app, you'll be making new components a lot. Anything you see on the screen is some sort of component.
-
-## Props
-
-Most components can be customized when they are created, with different parameters. These creation parameters are called props.
-
-Your own components can also use `props`. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place. Refer to `props.YOUR_PROP_NAME` in your functional components or `this.props.YOUR_PROP_NAME` in your class components. Here's an example:
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Hello%20Props&ext=js
-import React from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-
-const styles = StyleSheet.create({
-  center: {
-    alignItems: 'center',
-  },
-});
-
-const Greeting = props => {
-  return (
-    <View style={styles.center}>
-      <Text>Hello {props.name}!</Text>
-    </View>
-  );
-};
-
-const LotsOfGreetings = () => {
-  return (
-    <View style={[styles.center, {top: 50}]}>
-      <Greeting name="Rexxar" />
-      <Greeting name="Jaina" />
-      <Greeting name="Valeera" />
-    </View>
-  );
-};
-
-export default LotsOfGreetings;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Hello%20Props&ext=tsx
-import React from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-
-const styles = StyleSheet.create({
-  center: {
-    alignItems: 'center',
-  },
-});
-
-type GreetingProps = {
-  name: string;
-};
-
-const Greeting = (props: GreetingProps) => {
-  return (
-    <View style={styles.center}>
-      <Text>Hello {props.name}!</Text>
-    </View>
-  );
-};
-
-const LotsOfGreetings = () => {
-  return (
-    <View style={[styles.center, {top: 50}]}>
-      <Greeting name="Rexxar" />
-      <Greeting name="Jaina" />
-      <Greeting name="Valeera" />
-    </View>
-  );
-};
-
-export default LotsOfGreetings;
-```
-
-</TabItem>
-</Tabs>
-
-Using `name` as a prop lets us customize the `Greeting` component, so we can reuse that component for each of our greetings. This example also uses the `Greeting` component in JSX. The power to do this is what makes React so cool.
-
-The other new thing going on here is the [`View`](view.md) component. A [`View`](view.md) is useful as a container for other components, to help control style and layout.
-
-With `props` and the basic [`Text`](text.md), [`Image`](image.md), and [`View`](view.md) components, you can build a wide variety of static screens. To learn how to make your app change over time, you need to [learn about State](#state).
-
-## State
-
-Unlike props [that are read-only](https://react.dev/reference/react/Component#props) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else.
-
-#### What's the difference between state and props in React?
-
-In a React component, the props are the variables that we pass from a parent component to a child component. Similarly, the state are also variables, with the difference that they are not passed as parameters, but rather that the component initializes and manages them internally.
-
-#### Are there differences between React and React Native to handle the state?
-
-<div className="two-columns">
-
-```tsx
-// ReactJS Counter Example using Hooks!
-
-import React, {useState} from 'react';
-
-
-
-const App = () => {
-  const [count, setCount] = useState(0);
-
-  return (
-    <div className="container">
-      <p>You clicked {count} times</p>
-      <button
-        onClick={() => setCount(count + 1)}>
-        Click me!
-      </button>
-    </div>
-  );
-};
-
-
-// CSS
-.container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-```
-
-```tsx
-// React Native Counter Example using Hooks!
-
-import React, {useState} from 'react';
-import {View, Text, Button, StyleSheet} from 'react-native';
-
-const App = () => {
-  const [count, setCount] = useState(0);
-
-  return (
-    <View style={styles.container}>
-      <Text>You clicked {count} times</Text>
-      <Button
-        onPress={() => setCount(count + 1)}
-        title="Click me!"
-      />
-    </View>
-  );
-};
-
-// React Native Styles
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-```
-
-</div>
-
-As shown above, there is no difference in handling the `state` between [React](https://react.dev/learn/state-a-components-memory) and `React Native`. You can use the state of your components both in classes and in function components using [hooks](https://react.dev/reference/react/useState)!
-
-In the following example we will show the same above counter example using classes.
-
-```SnackPlayer name=Hello%20Classes
-import React, {Component} from 'react';
-import {StyleSheet, TouchableOpacity, Text, View} from 'react-native';
-
-class App extends Component {
-  state = {
-    count: 0,
-  };
-
-  onPress = () => {
-    this.setState({
-      count: this.state.count + 1,
-    });
-  };
-
-  render() {
-    return (
-      <View style={styles.container}>
-        <TouchableOpacity style={styles.button} onPress={this.onPress}>
-          <Text>Click me</Text>
-        </TouchableOpacity>
-        <View>
-          <Text>You clicked {this.state.count} times</Text>
-        </View>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  button: {
-    alignItems: 'center',
-    backgroundColor: '#DDDDDD',
-    padding: 10,
-    marginBottom: 10,
-  },
-});
-
-export default App;
-```
+---
+id: tutorial
+title: Learn the Basics
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+React Native is like React, but it uses native components instead of web components as building blocks. So to understand the basic structure of a React Native app, you need to understand some of the basic React concepts, like JSX, components, `state`, and `props`. If you already know React, you still need to learn some React Native specific stuff, like the native components. This tutorial is aimed at all audiences, whether you have React experience or not.
+
+Let's do this thing.
+
+## Hello World
+
+In accordance with the ancient traditions of our people, we must first build an app that does nothing except say "Hello, world!". Here it is:
+
+```SnackPlayer name=Hello%20World
+import {Text, View} from 'react-native';
+
+const HelloWorldApp = () => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}>
+      <Text>Hello, world!</Text>
+    </View>
+  );
+};
+export default HelloWorldApp;
+```
+
+If you are feeling curious, you can play around with sample code directly in the web simulators. You can also paste it into your `App.js` file to create a real app on your local machine.
+
+## What's going on here?
+
+1. First of all, we need to import `React` to be able to use `JSX`, which will then be transformed to the native components of each platform.
+2. On line 2, we import the `Text` and `View` components from `react-native`
+
+Then we define the `HelloWorldApp` function, which is a [function component](https://react.dev/reference/react/Component) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child.
+
+The `Text` component allows us to render a text, while the `View` component renders a container. This container has several styles applied, let's analyze what each one is doing.
+
+The first style that we find is `flex: 1`, the [`flex`](layout-props#flex) prop will define how your items are going to "fill" over the available space along your main axis. Since we only have one container, it will take all the available space of the parent component. In this case, it is the only component, so it will take all the available screen space.
+
+The following style is [`justifyContent`](layout-props#justifycontent): "center". This aligns children of a container in the center of the container's main axis. Finally, we have [`alignItems`](layout-props#alignitems): "center", which aligns children of a container in the center of the container's cross axis.
+
+Some of the things in here might not look like JavaScript to you. Don't panic. _This is the future_.
+
+First of all, ES2015 (also known as ES6) is a set of improvements to JavaScript that is now part of the official standard, but not yet supported by all browsers, so often it isn't used yet in web development. React Native ships with ES2015 support, so you can use this stuff without worrying about compatibility. `import`, `export`, `const` and `from` in the example above are all ES2015 features. If you aren't familiar with ES2015, you can probably pick it up by reading through sample code like this tutorial has. If you want, [this page](https://babeljs.io/learn-es2015/) has a good overview of ES2015 features.
+
+The other unusual thing in this code example is `<View><Text>Hello world!</Text></View>`. This is JSX - a syntax for embedding XML within JavaScript. Many frameworks use a specialized templating language which lets you embed code inside markup language. In React, this is reversed. JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like `<div>` or `<span>`, you use React components. In this case, `<Text>` is a [Core Component](intro-react-native-components) that displays some text and `View` is like the `<div>` or `<span>`.
+
+## Components
+
+So this code is defining `HelloWorldApp`, a new `Component`. When you're building a React Native app, you'll be making new components a lot. Anything you see on the screen is some sort of component.
+
+## Props
+
+Most components can be customized when they are created, with different parameters. These creation parameters are called props.
+
+Your own components can also use `props`. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place. Refer to `props.YOUR_PROP_NAME` in your functional components or `this.props.YOUR_PROP_NAME` in your class components. Here's an example:
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Hello%20Props&ext=js
+import {Text, View, StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  center: {
+    alignItems: 'center',
+  },
+});
+
+const Greeting = props => {
+  return (
+    <View style={styles.center}>
+      <Text>Hello {props.name}!</Text>
+    </View>
+  );
+};
+
+const LotsOfGreetings = () => {
+  return (
+    <View style={[styles.center, {top: 50}]}>
+      <Greeting name="Rexxar" />
+      <Greeting name="Jaina" />
+      <Greeting name="Valeera" />
+    </View>
+  );
+};
+
+export default LotsOfGreetings;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Hello%20Props&ext=tsx
+import {Text, View, StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  center: {
+    alignItems: 'center',
+  },
+});
+
+type GreetingProps = {
+  name: string;
+};
+
+const Greeting = (props: GreetingProps) => {
+  return (
+    <View style={styles.center}>
+      <Text>Hello {props.name}!</Text>
+    </View>
+  );
+};
+
+const LotsOfGreetings = () => {
+  return (
+    <View style={[styles.center, {top: 50}]}>
+      <Greeting name="Rexxar" />
+      <Greeting name="Jaina" />
+      <Greeting name="Valeera" />
+    </View>
+  );
+};
+
+export default LotsOfGreetings;
+```
+
+</TabItem>
+</Tabs>
+
+Using `name` as a prop lets us customize the `Greeting` component, so we can reuse that component for each of our greetings. This example also uses the `Greeting` component in JSX. The power to do this is what makes React so cool.
+
+The other new thing going on here is the [`View`](view.md) component. A [`View`](view.md) is useful as a container for other components, to help control style and layout.
+
+With `props` and the basic [`Text`](text.md), [`Image`](image.md), and [`View`](view.md) components, you can build a wide variety of static screens. To learn how to make your app change over time, you need to [learn about State](#state).
+
+## State
+
+Unlike props [that are read-only](https://react.dev/reference/react/Component#props) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else.
+
+#### What's the difference between state and props in React?
+
+In a React component, the props are the variables that we pass from a parent component to a child component. Similarly, the state are also variables, with the difference that they are not passed as parameters, but rather that the component initializes and manages them internally.
+
+#### Are there differences between React and React Native to handle the state?
+
+<div className="two-columns">
+
+```tsx
+// React Counter Example using Hooks!
+
+import {useState} from 'react';
+
+
+
+const App = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="container">
+      <p>You clicked {count} times</p>
+      <button
+        onClick={() => setCount(count + 1)}>
+        Click me!
+      </button>
+    </div>
+  );
+};
+
+
+// CSS
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+```
+
+```tsx
+// React Native Counter Example using Hooks!
+
+import {useState} from 'react';
+import {View, Text, Button, StyleSheet} from 'react-native';
+
+const App = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <View style={styles.container}>
+      <Text>You clicked {count} times</Text>
+      <Button
+        onPress={() => setCount(count + 1)}
+        title="Click me!"
+      />
+    </View>
+  );
+};
+
+// React Native Styles
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+```
+
+</div>
+
+As shown above, there is no difference in handling the `state` between [React](https://react.dev/learn/state-a-components-memory) and `React Native`. You can use the state of your components both in classes and in function components using [hooks](https://react.dev/reference/react/useState)!
+
+In the following example we will show the same above counter example using classes.
+
+```SnackPlayer name=Hello%20Classes
+import {Component} from 'react';
+import {StyleSheet, TouchableOpacity, Text, View} from 'react-native';
+
+class App extends Component {
+  state = {
+    count: 0,
+  };
+
+  onPress = () => {
+    this.setState({
+      count: this.state.count + 1,
+    });
+  };
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <TouchableOpacity style={styles.button} onPress={this.onPress}>
+          <Text>Click me</Text>
+        </TouchableOpacity>
+        <View>
+          <Text>You clicked {this.state.count} times</Text>
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#DDDDDD',
+    padding: 10,
+    marginBottom: 10,
+  },
+});
+
+export default App;
+```
diff --git a/website/versioned_docs/version-0.84/usecolorscheme.md b/website/versioned_docs/version-0.84/usecolorscheme.md
index 4d326283eeb..70620f7b6d1 100644
--- a/website/versioned_docs/version-0.84/usecolorscheme.md
+++ b/website/versioned_docs/version-0.84/usecolorscheme.md
@@ -20,7 +20,6 @@ The `useColorScheme` React hook provides and subscribes to color scheme updates
 ## Example
 
 ```SnackPlayer
-import React from 'react';
 import {Text, StyleSheet, useColorScheme} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.84/usewindowdimensions.md b/website/versioned_docs/version-0.84/usewindowdimensions.md
index 92bb1931d32..3e8a8077370 100644
--- a/website/versioned_docs/version-0.84/usewindowdimensions.md
+++ b/website/versioned_docs/version-0.84/usewindowdimensions.md
@@ -16,7 +16,6 @@ const {height, width} = useWindowDimensions();
 ## Example
 
 ```SnackPlayer name=useWindowDimensions&supportedPlatforms=ios,android
-import React from 'react';
 import {StyleSheet, Text, useWindowDimensions} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.84/using-a-listview.md b/website/versioned_docs/version-0.84/using-a-listview.md
index cf13fa66a6c..a5a04f40279 100644
--- a/website/versioned_docs/version-0.84/using-a-listview.md
+++ b/website/versioned_docs/version-0.84/using-a-listview.md
@@ -12,7 +12,6 @@ The `FlatList` component requires two props: `data` and `renderItem`. `data` is
 This example creates a basic `FlatList` of hardcoded data. Each item in the `data` props is rendered as a `Text` component. The `FlatListBasics` component then renders the `FlatList` and all `Text` components.
 
 ```SnackPlayer name=FlatList%20Basics
-import React from 'react';
 import {FlatList, StyleSheet, Text, View} from 'react-native';
 
 const styles = StyleSheet.create({
@@ -55,7 +54,6 @@ export default FlatListBasics;
 If you want to render a set of data broken into logical sections, maybe with section headers, similar to `UITableView` on iOS, then a [SectionList](sectionlist.md) is the way to go.
 
 ```SnackPlayer name=SectionList%20Basics
-import React from 'react';
 import {SectionList, StyleSheet, Text, View} from 'react-native';
 
 const styles = StyleSheet.create({
diff --git a/website/versioned_docs/version-0.84/using-a-scrollview.md b/website/versioned_docs/version-0.84/using-a-scrollview.md
index e4de6207a71..3ffae817bf0 100644
--- a/website/versioned_docs/version-0.84/using-a-scrollview.md
+++ b/website/versioned_docs/version-0.84/using-a-scrollview.md
@@ -8,7 +8,6 @@ The [ScrollView](scrollview.md) is a generic scrolling container that can contai
 This example creates a vertical `ScrollView` with both images and text mixed together.
 
 ```SnackPlayer name=Using%20ScrollView
-import React from 'react';
 import {Image, ScrollView, Text} from 'react-native';
 
 const logo = {
diff --git a/website/versioned_docs/version-0.84/vibration.md b/website/versioned_docs/version-0.84/vibration.md
index 44a0af2db43..bdb564ab331 100644
--- a/website/versioned_docs/version-0.84/vibration.md
+++ b/website/versioned_docs/version-0.84/vibration.md
@@ -8,7 +8,6 @@ Vibrates the device.
 ## Example
 
 ```SnackPlayer name=Vibration%20Example&supportedPlatforms=ios,android
-import React from 'react';
 import {
   Button,
   Platform,
diff --git a/website/versioned_docs/version-0.84/view-style-props.md b/website/versioned_docs/version-0.84/view-style-props.md
index 4f1c413c202..c464a3fa559 100644
--- a/website/versioned_docs/version-0.84/view-style-props.md
+++ b/website/versioned_docs/version-0.84/view-style-props.md
@@ -9,7 +9,6 @@ import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameFor
 ### Example
 
 ```SnackPlayer name=ViewStyleProps
-import React from 'react';
 import {View, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.84/view.md b/website/versioned_docs/version-0.84/view.md
index 3fd3c7fb4bd..405218dcc9b 100644
--- a/website/versioned_docs/version-0.84/view.md
+++ b/website/versioned_docs/version-0.84/view.md
@@ -12,7 +12,6 @@ The most fundamental component for building a UI, `View` is a container that sup
 This example creates a `View` that wraps two boxes with color and a text component in a row with padding.
 
 ```SnackPlayer name=View%20Example
-import React from 'react';
 import {View, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.84/virtualizedlist.md b/website/versioned_docs/version-0.84/virtualizedlist.md
index 9f80ad78258..327e665db76 100644
--- a/website/versioned_docs/version-0.84/virtualizedlist.md
+++ b/website/versioned_docs/version-0.84/virtualizedlist.md
@@ -15,7 +15,6 @@ Virtualization massively improves memory consumption and performance of large li
 <TabItem value="javascript">
 
 ```SnackPlayer name=VirtualizedListExample&ext=js
-import React from 'react';
 import {View, VirtualizedList, StyleSheet, Text, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -71,7 +70,6 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=VirtualizedListExample&ext=tsx
-import React from 'react';
 import {View, VirtualizedList, StyleSheet, Text, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.85/_fabric-native-components.jsx b/website/versioned_docs/version-0.85/_fabric-native-components.jsx
index fc6a3171a4f..69bc6f31268 100644
--- a/website/versioned_docs/version-0.85/_fabric-native-components.jsx
+++ b/website/versioned_docs/version-0.85/_fabric-native-components.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import IOSContent from './fabric-native-components-ios.md';
 import AndroidContent from './fabric-native-components-android.md';
 
diff --git a/website/versioned_docs/version-0.85/_integration-with-existing-apps-ios.md b/website/versioned_docs/version-0.85/_integration-with-existing-apps-ios.md
index 4b95571538b..f28e3c48bf9 100644
--- a/website/versioned_docs/version-0.85/_integration-with-existing-apps-ios.md
+++ b/website/versioned_docs/version-0.85/_integration-with-existing-apps-ios.md
@@ -1,655 +1,655 @@
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import constants from '@site/core/TabsConstants';
-import CodeBlock from '@theme/CodeBlock';
-import RNTemplateRepoLink from '@site/core/RNTemplateRepoLink';
-import {getTemplateBranchNameForCurrentVersion} from '@site/src/getTemplateBranchNameForCurrentVersion';
-
-## Key Concepts
-
-The keys to integrating React Native components into your iOS application are to:
-
-1. Set up the correct directory structure.
-2. Install the necessary NPM dependencies.
-3. Adding React Native to your Podfile configuration.
-4. Writing the TypeScript code for your first React Native screen.
-5. Integrate React Native with your iOS code using a `RCTRootView`.
-6. Testing your integration by running the bundler and seeing your app in action.
-
-## Using the Community Template
-
-While you follow this guide, we suggest you to use the [React Native Community Template](https://github.com/react-native-community/template/) as reference. The template contains a **minimal iOS app** and will help you understanding how to integrate React Native into an existing iOS app.
-
-## Prerequisites
-
-Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](getting-started-without-a-framework) to configure your development environment for building React Native apps for iOS.
-This guide also assumes you're familiar with the basics of iOS development such as creating a `UIViewController` and editing the `Podfile` file.
-
-### 1. Set up directory structure
-
-To ensure a smooth experience, create a new folder for your integrated React Native project, then **move your existing iOS project** to the `/ios` subfolder.
-
-## 2. Install NPM dependencies
-
-Go to the root directory and run the following command:
-
-<CodeBlock language="bash" title="shell">
-{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/package.json`}
-</CodeBlock>
-
-This will copy the `package.json` <RNTemplateRepoLink href="template/package.json">file from the Community template</RNTemplateRepoLink> to your project.
-
-Next, install the NPM packages by running:
-
-<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
-<TabItem value="npm">
-
-```shell
-npm install
-```
-
-</TabItem>
-<TabItem value="yarn">
-
-```shell
-yarn install
-```
-
-</TabItem>
-</Tabs>
-
-Installation process has created a new `node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
-
-Add `node_modules/` to your `.gitignore` file (here the <RNTemplateRepoLink href="template/_gitignore">Community default one</RNTemplateRepoLink>).
-
-### 3. Install Development tools
-
-### Command Line Tools for Xcode
-
-Install the Command Line Tools. Choose **Settings... (or Preferences...)** in the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.
-
-![Xcode Command Line Tools](/docs/assets/GettingStartedXcodeCommandLineTools.png)
-
-### CocoaPods
-
-[CocoaPods](https://cocoapods.org) is a package management tool for iOS and macOS development. We use it to add the actual React Native framework code locally into your current project.
-
-We recommend installing CocoaPods using [Homebrew](https://brew.sh/):
-
-```shell
-brew install cocoapods
-```
-
-## 4. Adding React Native to your app
-
-### Configuring CocoaPods
-
-To configure CocoaPods, we need two files:
-
-- A **Gemfile** that defines which Ruby dependencies we need.
-- A **Podfile** that defines how to properly install our dependencies.
-
-For the **Gemfile**, go to the root directory of your project and run this command
-
-<CodeBlock language="bash" title="shell">
-{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/Gemfile`}
-</CodeBlock>
-
-This will download the Gemfile from the template.
-
-:::note
-If you created your project with Xcode 16, you need to update the Gemfile as it follows:
-
-```diff
--gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
-+gem 'cocoapods', '1.16.2'
-gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
--gem 'xcodeproj', '< 1.26.0'
-+gem 'xcodeproj', '1.27.0'
-```
-
-Xcode 16 generates a project in a slightly different ways from previous versions of Xcode, and you need the latest CocoaPods and Xcodeproj gems to make it work properly.
-:::
-
-Similarly, for the **Podfile**, go to the `ios` folder of your project and run
-
-<CodeBlock language="bash" title="shell">
-{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/ios/Podfile`}
-</CodeBlock>
-
-Please use the Community Template as a reference point for the <RNTemplateRepoLink href="template/Gemfile">Gemfile</RNTemplateRepoLink> and for the <RNTemplateRepoLink href="template/ios/Podfile">Podfile</RNTemplateRepoLink>.
-
-:::note
-Remember to change <RNTemplateRepoLink href="template/ios/Podfile#L17">this line</RNTemplateRepoLink>.
-:::
-
-Now, we need to run a couple of extra commands to install the Ruby gems and the Pods.
-Navigate to the `ios` folder and run the following commands:
-
-```sh
-bundle install
-bundle exec pod install
-```
-
-The first command will install the Ruby dependencies and the second command will actually integrate the React Native code in your application so that your iOS files can import the React Native headers.
-
-## 5. Writing the TypeScript Code
-
-Now we will actually modify the native iOS application to integrate React Native.
-
-The first bit of code we will write is the actual React Native code for the new screen that will be integrated into our application.
-
-### Create a `index.js` file
-
-First, create an empty `index.js` file in the root of your React Native project.
-
-`index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `import`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it.
-
-Our `index.js` should look as follows (here the <RNTemplateRepoLink href="template/index.js">Community template file as reference</RNTemplateRepoLink>):
-
-```js
-import {AppRegistry} from 'react-native';
-import App from './App';
-
-AppRegistry.registerComponent('HelloWorld', () => App);
-```
-
-### Create a `App.tsx` file
-
-Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX](<https://en.wikipedia.org/wiki/JSX_(JavaScript)>) expressions. It contains the root React Native component that we will integrate into our iOS application (<RNTemplateRepoLink href="template/App.tsx">link</RNTemplateRepoLink>):
-
-```tsx
-import React from 'react';
-import {
-  SafeAreaView,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  useColorScheme,
-  View,
-} from 'react-native';
-
-import {
-  Colors,
-  DebugInstructions,
-  Header,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
-function App(): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
-
-  return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundStyle.backgroundColor}
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
-        <View
-          style={{
-            backgroundColor: isDarkMode
-              ? Colors.black
-              : Colors.white,
-            padding: 24,
-          }}>
-          <Text style={styles.title}>Step One</Text>
-          <Text>
-            Edit <Text style={styles.bold}>App.tsx</Text> to
-            change this screen and see your edits.
-          </Text>
-          <Text style={styles.title}>See your changes</Text>
-          <ReloadInstructions />
-          <Text style={styles.title}>Debug</Text>
-          <DebugInstructions />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  title: {
-    fontSize: 24,
-    fontWeight: '600',
-  },
-  bold: {
-    fontWeight: '700',
-  },
-});
-
-export default App;
-```
-
-Here is the <RNTemplateRepoLink href="template/App.tsx">Community template file as reference</RNTemplateRepoLink>.
-
-## 5. Integrating with your iOS code
-
-We now need to add some native code in order to start the React Native runtime and tell it to render our React components.
-
-### Requirements
-
-React Native initialization is now unbound to any specific part of an iOS app.
-
-React Native can be initialized using a class called `RCTReactNativeFactory`, that takes care of handling the React Native lifecycle for you.
-
-Once the class is initialized, you can either start a React Native view providing a `UIWindow` object, or you can ask for the factory to generate a `UIView` that you can load in any `UIViewController.`
-
-In the following example, we will create a ViewController that can load a React Native view as it's `view`.
-
-#### Create the ReactViewController
-
-Create a new file from template (<kbd>⌘</kbd>+<kbd>N</kbd>) and choose the Cocoa Touch Class template.
-
-Make sure to select `UIViewController` as the "Subclass of" field.
-
-<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
-<TabItem value="objc">
-
-Now open the `ReactViewController.m` file and apply the following changes
-
-```diff title="ReactViewController.m"
-#import "ReactViewController.h"
-+#import <React/RCTBundleURLProvider.h>
-+#import <RCTReactNativeFactory.h>
-+#import <RCTDefaultReactNativeFactoryDelegate.h>
-+#import <RCTAppDependencyProvider.h>
-
-
-@interface ReactViewController ()
-
-@end
-
-+@interface ReactNativeFactoryDelegate: RCTDefaultReactNativeFactoryDelegate
-+@end
-
--@implementation ReactViewController
-+@implementation ReactViewController {
-+  RCTReactNativeFactory *_factory;
-+  id<RCTReactNativeFactoryDelegate> _factoryDelegate;
-+}
-
- - (void)viewDidLoad {
-     [super viewDidLoad];
-     // Do any additional setup after loading the view.
-+    _factoryDelegate = [ReactNativeFactoryDelegate new];
-+    _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new];
-+    _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate];
-+    self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"];
- }
-
-@end
-
-+@implementation ReactNativeFactoryDelegate
-+
-+- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
-+{
-+  return [self bundleURL];
-+}
-+
-+- (NSURL *)bundleURL
-+{
-+#if DEBUG
-+  return [RCTBundleURLProvider.sharedSettings jsBundleURLForBundleRoot:@"index"];
-+#else
-+  return [NSBundle.mainBundle URLForResource:@"main" withExtension:@"jsbundle"];
-+#endif
-+}
-
-@end
-
-```
-
-</TabItem>
-<TabItem value="swift">
-
-Now open the `ReactViewController.swift` file and apply the following changes
-
-```diff title="ReactViewController.swift"
-import UIKit
-+import React
-+import React_RCTAppDelegate
-+import ReactAppDependencyProvider
-
-class ReactViewController: UIViewController {
-+  var reactNativeFactory: RCTReactNativeFactory?
-+  var reactNativeFactoryDelegate: RCTReactNativeFactoryDelegate?
-
-  override func viewDidLoad() {
-    super.viewDidLoad()
-+    reactNativeFactoryDelegate = ReactNativeDelegate()
-+    reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider()
-+    reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!)
-+    view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld")
-
-  }
-}
-
-+class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {
-+    override func sourceURL(for bridge: RCTBridge) -> URL? {
-+      self.bundleURL()
-+    }
-+
-+    override func bundleURL() -> URL? {
-+      #if DEBUG
-+      RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
-+      #else
-+      Bundle.main.url(forResource: "main", withExtension: "jsbundle")
-+      #endif
-+    }
-+
-+}
-```
-
-</TabItem>
-</Tabs>
-
-#### Presenting a React Native view in a rootViewController
-
-Finally, we can present our React Native view. To do so, we need a new View Controller that can host a view in which we can load the JS content.
-We already have the initial `ViewController`, and we can make it present the `ReactViewController`. There are several ways to do so, depending on your app. For this example, we assume that you have a button that presents React Native modally.
-
-<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
-<TabItem value="objc">
-
-```diff title="ViewController.m"
-#import "ViewController.h"
-+#import "ReactViewController.h"
-
-@interface ViewController ()
-
-@end
-
-- @implementation ViewController
-+@implementation ViewController {
-+  ReactViewController *reactViewController;
-+}
-
- - (void)viewDidLoad {
-   [super viewDidLoad];
-   // Do any additional setup after loading the view.
-   self.view.backgroundColor = UIColor.systemBackgroundColor;
-+  UIButton *button = [UIButton new];
-+  [button setTitle:@"Open React Native" forState:UIControlStateNormal];
-+  [button setTitleColor:UIColor.systemBlueColor forState:UIControlStateNormal];
-+  [button setTitleColor:UIColor.blueColor forState:UIControlStateHighlighted];
-+  [button addTarget:self action:@selector(presentReactNative) forControlEvents:UIControlEventTouchUpInside];
-+  [self.view addSubview:button];
-
-+  button.translatesAutoresizingMaskIntoConstraints = NO;
-+  [NSLayoutConstraint activateConstraints:@[
-+    [button.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor],
-+    [button.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor],
-+    [button.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor],
-+    [button.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
-+  ]];
- }
-
-+- (void)presentReactNative
-+{
-+  if (reactViewController == NULL) {
-+    reactViewController = [ReactViewController new];
-+  }
-+  [self presentViewController:reactViewController animated:YES];
-+}
-
-@end
-```
-
-</TabItem>
-<TabItem value="swift">
-
-```diff title="ViewController.swift"
-import UIKit
-
-class ViewController: UIViewController {
-
-+  var reactViewController: ReactViewController?
-
-  override func viewDidLoad() {
-    super.viewDidLoad()
-    // Do any additional setup after loading the view.
-    self.view.backgroundColor = .systemBackground
-
-+    let button = UIButton()
-+    button.setTitle("Open React Native", for: .normal)
-+    button.setTitleColor(.systemBlue, for: .normal)
-+    button.setTitleColor(.blue, for: .highlighted)
-+    button.addAction(UIAction { [weak self] _ in
-+      guard let self else { return }
-+      if reactViewController == nil {
-+       reactViewController = ReactViewController()
-+      }
-+      present(reactViewController!, animated: true)
-+    }, for: .touchUpInside)
-+    self.view.addSubview(button)
-+
-+    button.translatesAutoresizingMaskIntoConstraints = false
-+    NSLayoutConstraint.activate([
-+      button.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
-+      button.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
-+      button.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
-+      button.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
-+    ])
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-Make sure to disable the Sandbox scripting. To achieve this, in Xcode, click on your app, then on build settings. Filter for script and set the `User Script Sandboxing` to `NO`. This step is needed to properly switch between the Debug and Release version of the [Hermes engine](https://github.com/facebook/hermes/blob/main/README.md) that we ship with React Native.
-
-![Disable Sandboxing](/docs/assets/disable-sandboxing.png)
-
-Finally, make sure to add the `UIViewControllerBasedStatusBarAppearance` key into your `Info.plist` file, with value of `NO`.
-
-![Disable UIViewControllerBasedStatusBarAppearance](/docs/assets/disable-UIViewControllerBasedStatusBarAppearance.png)
-
-## 6. Test your integration
-
-You have completed all the basic steps to integrate React Native with your application. Now we will start the [Metro bundler](https://metrobundler.dev/) to build your TypeScript application code into a bundle. Metro's HTTP server shares the bundle from `localhost` on your developer environment to a simulator or device. This allows for [hot reloading](https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading).
-
-First, you need to create a `metro.config.js` file in the root of your project as follows:
-
-```js
-const {getDefaultConfig} = require('@react-native/metro-config');
-module.exports = getDefaultConfig(__dirname);
-```
-
-You can checkout the <RNTemplateRepoLink href="template/metro.config.js">`metro.config.js` file</RNTemplateRepoLink> from the Community template file as reference.
-
-Then, you need to create a `.watchmanconfig` file in the root of your project. The file must contain an empty json object:
-
-```sh
-echo {} > .watchmanconfig
-```
-
-Once you have the configuration file in place, you can run the bundler. Run the following command in the root directory of your project:
-
-<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
-<TabItem value="npm">
-
-```shell
-npm start
-```
-
-</TabItem>
-<TabItem value="yarn">
-
-```shell
-yarn start
-```
-
-</TabItem>
-</Tabs>
-
-Now build and run your iOS app as normal.
-
-Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display:
-
-<center><img src="/docs/assets/EmbeddedAppIOS078.gif" width="300" /></center>
-
-### Creating a release build in Xcode
-
-You can use Xcode to create your release builds too! The only additional step is to add a script that is executed when the app is built to package your JS and images into the iOS application.
-
-1. In Xcode, select your application
-2. Click on `Build Phases`
-3. Click on the `+` in the top left corner and select `New Run Script Phase`
-4. Click on the `Run Script` line and rename the Script to `Bundle React Native code and images`
-5. Paste in the text box the following script
-
-```sh title="Build React Native code and image"
-set -e
-
-WITH_ENVIRONMENT="$REACT_NATIVE_PATH/scripts/xcode/with-environment.sh"
-REACT_NATIVE_XCODE="$REACT_NATIVE_PATH/scripts/react-native-xcode.sh"
-
-/bin/sh -c "$WITH_ENVIRONMENT $REACT_NATIVE_XCODE"
-```
-
-6. Drag and drop the script before the one called `[CP] Embed Pods Frameworks`.
-
-Now, if you build your app for Release, it will work as expected.
-
-## 7. Passing initial props to the React Native view
-
-In some case, you'd like to pass some information from the Native app to JavaScript. For example, you might want to pass the user id of the currently logged user to React Native, together with a token that can be used to retrieve information from a database.
-
-This is possible by using the `initialProperties` parameter of the `view(withModuleName:initialProperty)` overload of the `RCTReactNativeFactory` class. The following steps shows you how to do it.
-
-### Update the App.tsx file to read the initial properties.
-
-Open the `App.tsx` file and add the following code:
-
-```diff title="App.tsx"
-import {
-  Colors,
-  DebugInstructions,
-  Header,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
--function App(): React.JSX.Element {
-+function App(props): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
-
-  return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundStyle.backgroundColor}
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
--       <View
--         style={{
--           backgroundColor: isDarkMode
--             ? Colors.black
--             : Colors.white,
--           padding: 24,
--         }}>
--         <Text style={styles.title}>Step One</Text>
--         <Text>
--           Edit <Text style={styles.bold}>App.tsx</Text> to
--           change this screen and see your edits.
--         </Text>
--         <Text style={styles.title}>See your changes</Text>
--         <ReloadInstructions />
--         <Text style={styles.title}>Debug</Text>
--         <DebugInstructions />
-+         <Text style={styles.title}>UserID: {props.userID}</Text>
-+         <Text style={styles.title}>Token: {props.token}</Text>
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  title: {
-    fontSize: 24,
-    fontWeight: '600',
-+   marginLeft: 20,
-  },
-  bold: {
-    fontWeight: '700',
-  },
-});
-
-export default App;
-```
-
-These changes will tell React Native that your App component is now accepting some properties. The `RCTreactNativeFactory` will take care of passing them to the component when it's rendered.
-
-### Update the Native code to pass the initial properties to JavaScript.
-
-<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
-<TabItem value="objc">
-
-Modify the `ReactViewController.mm` to pass the initial properties to JavaScript.
-
-```diff title="ReactViewController.mm"
- - (void)viewDidLoad {
-   [super viewDidLoad];
-   // Do any additional setup after loading the view.
-
-   _factoryDelegate = [ReactNativeFactoryDelegate new];
-   _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new];
-   _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate];
--  self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"];
-+  self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld" initialProperties:@{
-+    @"userID": @"12345678",
-+    @"token": @"secretToken"
-+  }];
-}
-```
-
-</TabItem>
-<TabItem value="swift">
-
-Modify the `ReactViewController.swift` to pass the initial properties to the React Native view.
-
-```diff title="ReactViewController.swift"
-  override func viewDidLoad() {
-    super.viewDidLoad()
-    reactNativeFactoryDelegate = ReactNativeDelegate()
-    reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider()
-    reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!)
--   view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld")
-+   view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld" initialProperties: [
-+     "userID": "12345678",
-+     "token": "secretToken"
-+])
-
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-3. Run your app once again. You should see the following screen after you present the `ReactViewController`:
-
-<center>
-  <img src="/docs/assets/brownfield-with-initial-props.png" width="30%" height="30%"/>
-</center>
-
-## Now what?
-
-At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native.
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import constants from '@site/core/TabsConstants';
+import CodeBlock from '@theme/CodeBlock';
+import RNTemplateRepoLink from '@site/core/RNTemplateRepoLink';
+import {getTemplateBranchNameForCurrentVersion} from '@site/src/getTemplateBranchNameForCurrentVersion';
+
+## Key Concepts
+
+The keys to integrating React Native components into your iOS application are to:
+
+1. Set up the correct directory structure.
+2. Install the necessary NPM dependencies.
+3. Adding React Native to your Podfile configuration.
+4. Writing the TypeScript code for your first React Native screen.
+5. Integrate React Native with your iOS code using a `RCTRootView`.
+6. Testing your integration by running the bundler and seeing your app in action.
+
+## Using the Community Template
+
+While you follow this guide, we suggest you to use the [React Native Community Template](https://github.com/react-native-community/template/) as reference. The template contains a **minimal iOS app** and will help you understanding how to integrate React Native into an existing iOS app.
+
+## Prerequisites
+
+Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](getting-started-without-a-framework) to configure your development environment for building React Native apps for iOS.
+This guide also assumes you're familiar with the basics of iOS development such as creating a `UIViewController` and editing the `Podfile` file.
+
+### 1. Set up directory structure
+
+To ensure a smooth experience, create a new folder for your integrated React Native project, then **move your existing iOS project** to the `/ios` subfolder.
+
+## 2. Install NPM dependencies
+
+Go to the root directory and run the following command:
+
+<CodeBlock language="bash" title="shell">
+{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/package.json`}
+</CodeBlock>
+
+This will copy the `package.json` <RNTemplateRepoLink href="template/package.json">file from the Community template</RNTemplateRepoLink> to your project.
+
+Next, install the NPM packages by running:
+
+<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
+<TabItem value="npm">
+
+```shell
+npm install
+```
+
+</TabItem>
+<TabItem value="yarn">
+
+```shell
+yarn install
+```
+
+</TabItem>
+</Tabs>
+
+Installation process has created a new `node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
+
+Add `node_modules/` to your `.gitignore` file (here the <RNTemplateRepoLink href="template/_gitignore">Community default one</RNTemplateRepoLink>).
+
+### 3. Install Development tools
+
+### Command Line Tools for Xcode
+
+Install the Command Line Tools. Choose **Settings... (or Preferences...)** in the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.
+
+![Xcode Command Line Tools](/docs/assets/GettingStartedXcodeCommandLineTools.png)
+
+### CocoaPods
+
+[CocoaPods](https://cocoapods.org) is a package management tool for iOS and macOS development. We use it to add the actual React Native framework code locally into your current project.
+
+We recommend installing CocoaPods using [Homebrew](https://brew.sh/):
+
+```shell
+brew install cocoapods
+```
+
+## 4. Adding React Native to your app
+
+### Configuring CocoaPods
+
+To configure CocoaPods, we need two files:
+
+- A **Gemfile** that defines which Ruby dependencies we need.
+- A **Podfile** that defines how to properly install our dependencies.
+
+For the **Gemfile**, go to the root directory of your project and run this command
+
+<CodeBlock language="bash" title="shell">
+{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/Gemfile`}
+</CodeBlock>
+
+This will download the Gemfile from the template.
+
+:::note
+If you created your project with Xcode 16, you need to update the Gemfile as it follows:
+
+```diff
+-gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
++gem 'cocoapods', '1.16.2'
+gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
+-gem 'xcodeproj', '< 1.26.0'
++gem 'xcodeproj', '1.27.0'
+```
+
+Xcode 16 generates a project in a slightly different ways from previous versions of Xcode, and you need the latest CocoaPods and Xcodeproj gems to make it work properly.
+:::
+
+Similarly, for the **Podfile**, go to the `ios` folder of your project and run
+
+<CodeBlock language="bash" title="shell">
+{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/ios/Podfile`}
+</CodeBlock>
+
+Please use the Community Template as a reference point for the <RNTemplateRepoLink href="template/Gemfile">Gemfile</RNTemplateRepoLink> and for the <RNTemplateRepoLink href="template/ios/Podfile">Podfile</RNTemplateRepoLink>.
+
+:::note
+Remember to change <RNTemplateRepoLink href="template/ios/Podfile#L17">this line</RNTemplateRepoLink>.
+:::
+
+Now, we need to run a couple of extra commands to install the Ruby gems and the Pods.
+Navigate to the `ios` folder and run the following commands:
+
+```sh
+bundle install
+bundle exec pod install
+```
+
+The first command will install the Ruby dependencies and the second command will actually integrate the React Native code in your application so that your iOS files can import the React Native headers.
+
+## 5. Writing the TypeScript Code
+
+Now we will actually modify the native iOS application to integrate React Native.
+
+The first bit of code we will write is the actual React Native code for the new screen that will be integrated into our application.
+
+### Create a `index.js` file
+
+First, create an empty `index.js` file in the root of your React Native project.
+
+`index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `import`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it.
+
+Our `index.js` should look as follows (here the <RNTemplateRepoLink href="template/index.js">Community template file as reference</RNTemplateRepoLink>):
+
+```js
+import {AppRegistry} from 'react-native';
+import App from './App';
+
+AppRegistry.registerComponent('HelloWorld', () => App);
+```
+
+### Create a `App.tsx` file
+
+Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX](<https://en.wikipedia.org/wiki/JSX_(JavaScript)>) expressions. It contains the root React Native component that we will integrate into our iOS application (<RNTemplateRepoLink href="template/App.tsx">link</RNTemplateRepoLink>):
+
+```tsx
+import {type JSX} from 'react';
+import {
+  SafeAreaView,
+  ScrollView,
+  StatusBar,
+  StyleSheet,
+  Text,
+  useColorScheme,
+  View,
+} from 'react-native';
+
+import {
+  Colors,
+  DebugInstructions,
+  Header,
+  ReloadInstructions,
+} from 'react-native/Libraries/NewAppScreen';
+
+function App(): JSX.Element {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const backgroundStyle = {
+    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+  };
+
+  return (
+    <SafeAreaView style={backgroundStyle}>
+      <StatusBar
+        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
+        backgroundColor={backgroundStyle.backgroundColor}
+      />
+      <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        style={backgroundStyle}>
+        <Header />
+        <View
+          style={{
+            backgroundColor: isDarkMode
+              ? Colors.black
+              : Colors.white,
+            padding: 24,
+          }}>
+          <Text style={styles.title}>Step One</Text>
+          <Text>
+            Edit <Text style={styles.bold}>App.tsx</Text> to
+            change this screen and see your edits.
+          </Text>
+          <Text style={styles.title}>See your changes</Text>
+          <ReloadInstructions />
+          <Text style={styles.title}>Debug</Text>
+          <DebugInstructions />
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 24,
+    fontWeight: '600',
+  },
+  bold: {
+    fontWeight: '700',
+  },
+});
+
+export default App;
+```
+
+Here is the <RNTemplateRepoLink href="template/App.tsx">Community template file as reference</RNTemplateRepoLink>.
+
+## 5. Integrating with your iOS code
+
+We now need to add some native code in order to start the React Native runtime and tell it to render our React components.
+
+### Requirements
+
+React Native initialization is now unbound to any specific part of an iOS app.
+
+React Native can be initialized using a class called `RCTReactNativeFactory`, that takes care of handling the React Native lifecycle for you.
+
+Once the class is initialized, you can either start a React Native view providing a `UIWindow` object, or you can ask for the factory to generate a `UIView` that you can load in any `UIViewController.`
+
+In the following example, we will create a ViewController that can load a React Native view as it's `view`.
+
+#### Create the ReactViewController
+
+Create a new file from template (<kbd>⌘</kbd>+<kbd>N</kbd>) and choose the Cocoa Touch Class template.
+
+Make sure to select `UIViewController` as the "Subclass of" field.
+
+<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
+<TabItem value="objc">
+
+Now open the `ReactViewController.m` file and apply the following changes
+
+```diff title="ReactViewController.m"
+#import "ReactViewController.h"
++#import <React/RCTBundleURLProvider.h>
++#import <RCTReactNativeFactory.h>
++#import <RCTDefaultReactNativeFactoryDelegate.h>
++#import <RCTAppDependencyProvider.h>
+
+
+@interface ReactViewController ()
+
+@end
+
++@interface ReactNativeFactoryDelegate: RCTDefaultReactNativeFactoryDelegate
++@end
+
+-@implementation ReactViewController
++@implementation ReactViewController {
++  RCTReactNativeFactory *_factory;
++  id<RCTReactNativeFactoryDelegate> _factoryDelegate;
++}
+
+ - (void)viewDidLoad {
+     [super viewDidLoad];
+     // Do any additional setup after loading the view.
++    _factoryDelegate = [ReactNativeFactoryDelegate new];
++    _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new];
++    _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate];
++    self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"];
+ }
+
+@end
+
++@implementation ReactNativeFactoryDelegate
++
++- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
++{
++  return [self bundleURL];
++}
++
++- (NSURL *)bundleURL
++{
++#if DEBUG
++  return [RCTBundleURLProvider.sharedSettings jsBundleURLForBundleRoot:@"index"];
++#else
++  return [NSBundle.mainBundle URLForResource:@"main" withExtension:@"jsbundle"];
++#endif
++}
+
+@end
+
+```
+
+</TabItem>
+<TabItem value="swift">
+
+Now open the `ReactViewController.swift` file and apply the following changes
+
+```diff title="ReactViewController.swift"
+import UIKit
++import React
++import React_RCTAppDelegate
++import ReactAppDependencyProvider
+
+class ReactViewController: UIViewController {
++  var reactNativeFactory: RCTReactNativeFactory?
++  var reactNativeFactoryDelegate: RCTReactNativeFactoryDelegate?
+
+  override func viewDidLoad() {
+    super.viewDidLoad()
++    reactNativeFactoryDelegate = ReactNativeDelegate()
++    reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider()
++    reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!)
++    view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld")
+
+  }
+}
+
++class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {
++    override func sourceURL(for bridge: RCTBridge) -> URL? {
++      self.bundleURL()
++    }
++
++    override func bundleURL() -> URL? {
++      #if DEBUG
++      RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
++      #else
++      Bundle.main.url(forResource: "main", withExtension: "jsbundle")
++      #endif
++    }
++
++}
+```
+
+</TabItem>
+</Tabs>
+
+#### Presenting a React Native view in a rootViewController
+
+Finally, we can present our React Native view. To do so, we need a new View Controller that can host a view in which we can load the JS content.
+We already have the initial `ViewController`, and we can make it present the `ReactViewController`. There are several ways to do so, depending on your app. For this example, we assume that you have a button that presents React Native modally.
+
+<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
+<TabItem value="objc">
+
+```diff title="ViewController.m"
+#import "ViewController.h"
++#import "ReactViewController.h"
+
+@interface ViewController ()
+
+@end
+
+- @implementation ViewController
++@implementation ViewController {
++  ReactViewController *reactViewController;
++}
+
+ - (void)viewDidLoad {
+   [super viewDidLoad];
+   // Do any additional setup after loading the view.
+   self.view.backgroundColor = UIColor.systemBackgroundColor;
++  UIButton *button = [UIButton new];
++  [button setTitle:@"Open React Native" forState:UIControlStateNormal];
++  [button setTitleColor:UIColor.systemBlueColor forState:UIControlStateNormal];
++  [button setTitleColor:UIColor.blueColor forState:UIControlStateHighlighted];
++  [button addTarget:self action:@selector(presentReactNative) forControlEvents:UIControlEventTouchUpInside];
++  [self.view addSubview:button];
+
++  button.translatesAutoresizingMaskIntoConstraints = NO;
++  [NSLayoutConstraint activateConstraints:@[
++    [button.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor],
++    [button.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor],
++    [button.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor],
++    [button.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
++  ]];
+ }
+
++- (void)presentReactNative
++{
++  if (reactViewController == NULL) {
++    reactViewController = [ReactViewController new];
++  }
++  [self presentViewController:reactViewController animated:YES];
++}
+
+@end
+```
+
+</TabItem>
+<TabItem value="swift">
+
+```diff title="ViewController.swift"
+import UIKit
+
+class ViewController: UIViewController {
+
++  var reactViewController: ReactViewController?
+
+  override func viewDidLoad() {
+    super.viewDidLoad()
+    // Do any additional setup after loading the view.
+    self.view.backgroundColor = .systemBackground
+
++    let button = UIButton()
++    button.setTitle("Open React Native", for: .normal)
++    button.setTitleColor(.systemBlue, for: .normal)
++    button.setTitleColor(.blue, for: .highlighted)
++    button.addAction(UIAction { [weak self] _ in
++      guard let self else { return }
++      if reactViewController == nil {
++       reactViewController = ReactViewController()
++      }
++      present(reactViewController!, animated: true)
++    }, for: .touchUpInside)
++    self.view.addSubview(button)
++
++    button.translatesAutoresizingMaskIntoConstraints = false
++    NSLayoutConstraint.activate([
++      button.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
++      button.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
++      button.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
++      button.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
++    ])
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+Make sure to disable the Sandbox scripting. To achieve this, in Xcode, click on your app, then on build settings. Filter for script and set the `User Script Sandboxing` to `NO`. This step is needed to properly switch between the Debug and Release version of the [Hermes engine](https://github.com/facebook/hermes/blob/main/README.md) that we ship with React Native.
+
+![Disable Sandboxing](/docs/assets/disable-sandboxing.png)
+
+Finally, make sure to add the `UIViewControllerBasedStatusBarAppearance` key into your `Info.plist` file, with value of `NO`.
+
+![Disable UIViewControllerBasedStatusBarAppearance](/docs/assets/disable-UIViewControllerBasedStatusBarAppearance.png)
+
+## 6. Test your integration
+
+You have completed all the basic steps to integrate React Native with your application. Now we will start the [Metro bundler](https://metrobundler.dev/) to build your TypeScript application code into a bundle. Metro's HTTP server shares the bundle from `localhost` on your developer environment to a simulator or device. This allows for [hot reloading](https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading).
+
+First, you need to create a `metro.config.js` file in the root of your project as follows:
+
+```js
+const {getDefaultConfig} = require('@react-native/metro-config');
+module.exports = getDefaultConfig(__dirname);
+```
+
+You can checkout the <RNTemplateRepoLink href="template/metro.config.js">`metro.config.js` file</RNTemplateRepoLink> from the Community template file as reference.
+
+Then, you need to create a `.watchmanconfig` file in the root of your project. The file must contain an empty json object:
+
+```sh
+echo {} > .watchmanconfig
+```
+
+Once you have the configuration file in place, you can run the bundler. Run the following command in the root directory of your project:
+
+<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
+<TabItem value="npm">
+
+```shell
+npm start
+```
+
+</TabItem>
+<TabItem value="yarn">
+
+```shell
+yarn start
+```
+
+</TabItem>
+</Tabs>
+
+Now build and run your iOS app as normal.
+
+Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display:
+
+<center><img src="/docs/assets/EmbeddedAppIOS078.gif" width="300" /></center>
+
+### Creating a release build in Xcode
+
+You can use Xcode to create your release builds too! The only additional step is to add a script that is executed when the app is built to package your JS and images into the iOS application.
+
+1. In Xcode, select your application
+2. Click on `Build Phases`
+3. Click on the `+` in the top left corner and select `New Run Script Phase`
+4. Click on the `Run Script` line and rename the Script to `Bundle React Native code and images`
+5. Paste in the text box the following script
+
+```sh title="Build React Native code and image"
+set -e
+
+WITH_ENVIRONMENT="$REACT_NATIVE_PATH/scripts/xcode/with-environment.sh"
+REACT_NATIVE_XCODE="$REACT_NATIVE_PATH/scripts/react-native-xcode.sh"
+
+/bin/sh -c "$WITH_ENVIRONMENT $REACT_NATIVE_XCODE"
+```
+
+6. Drag and drop the script before the one called `[CP] Embed Pods Frameworks`.
+
+Now, if you build your app for Release, it will work as expected.
+
+## 7. Passing initial props to the React Native view
+
+In some case, you'd like to pass some information from the Native app to JavaScript. For example, you might want to pass the user id of the currently logged user to React Native, together with a token that can be used to retrieve information from a database.
+
+This is possible by using the `initialProperties` parameter of the `view(withModuleName:initialProperty)` overload of the `RCTReactNativeFactory` class. The following steps shows you how to do it.
+
+### Update the App.tsx file to read the initial properties.
+
+Open the `App.tsx` file and add the following code:
+
+```diff title="App.tsx"
+import {
+  Colors,
+  DebugInstructions,
+  Header,
+  ReloadInstructions,
+} from 'react-native/Libraries/NewAppScreen';
+
+-function App(): React.JSX.Element {
++function App(props): React.JSX.Element {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const backgroundStyle = {
+    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+  };
+
+  return (
+    <SafeAreaView style={backgroundStyle}>
+      <StatusBar
+        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
+        backgroundColor={backgroundStyle.backgroundColor}
+      />
+      <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        style={backgroundStyle}>
+        <Header />
+-       <View
+-         style={{
+-           backgroundColor: isDarkMode
+-             ? Colors.black
+-             : Colors.white,
+-           padding: 24,
+-         }}>
+-         <Text style={styles.title}>Step One</Text>
+-         <Text>
+-           Edit <Text style={styles.bold}>App.tsx</Text> to
+-           change this screen and see your edits.
+-         </Text>
+-         <Text style={styles.title}>See your changes</Text>
+-         <ReloadInstructions />
+-         <Text style={styles.title}>Debug</Text>
+-         <DebugInstructions />
++         <Text style={styles.title}>UserID: {props.userID}</Text>
++         <Text style={styles.title}>Token: {props.token}</Text>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 24,
+    fontWeight: '600',
++   marginLeft: 20,
+  },
+  bold: {
+    fontWeight: '700',
+  },
+});
+
+export default App;
+```
+
+These changes will tell React Native that your App component is now accepting some properties. The `RCTreactNativeFactory` will take care of passing them to the component when it's rendered.
+
+### Update the Native code to pass the initial properties to JavaScript.
+
+<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
+<TabItem value="objc">
+
+Modify the `ReactViewController.mm` to pass the initial properties to JavaScript.
+
+```diff title="ReactViewController.mm"
+ - (void)viewDidLoad {
+   [super viewDidLoad];
+   // Do any additional setup after loading the view.
+
+   _factoryDelegate = [ReactNativeFactoryDelegate new];
+   _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new];
+   _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate];
+-  self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"];
++  self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld" initialProperties:@{
++    @"userID": @"12345678",
++    @"token": @"secretToken"
++  }];
+}
+```
+
+</TabItem>
+<TabItem value="swift">
+
+Modify the `ReactViewController.swift` to pass the initial properties to the React Native view.
+
+```diff title="ReactViewController.swift"
+  override func viewDidLoad() {
+    super.viewDidLoad()
+    reactNativeFactoryDelegate = ReactNativeDelegate()
+    reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider()
+    reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!)
+-   view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld")
++   view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld" initialProperties: [
++     "userID": "12345678",
++     "token": "secretToken"
++])
+
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+3. Run your app once again. You should see the following screen after you present the `ReactViewController`:
+
+<center>
+  <img src="/docs/assets/brownfield-with-initial-props.png" width="30%" height="30%"/>
+</center>
+
+## Now what?
+
+At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native.
diff --git a/website/versioned_docs/version-0.85/_integration-with-existing-apps-kotlin.md b/website/versioned_docs/version-0.85/_integration-with-existing-apps-kotlin.md
index 23414c63a3b..c5f7d6bc4a6 100644
--- a/website/versioned_docs/version-0.85/_integration-with-existing-apps-kotlin.md
+++ b/website/versioned_docs/version-0.85/_integration-with-existing-apps-kotlin.md
@@ -1,511 +1,510 @@
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import constants from '@site/core/TabsConstants';
-import CodeBlock from '@theme/CodeBlock';
-import RNTemplateRepoLink from '@site/core/RNTemplateRepoLink';
-import {getTemplateBranchNameForCurrentVersion} from '@site/src/getTemplateBranchNameForCurrentVersion';
-
-## Key Concepts
-
-The keys to integrating React Native components into your Android application are to:
-
-1. Set up the correct directory structure.
-2. Install the necessary NPM dependencies.
-3. Adding React Native to your Gradle configuration.
-4. Writing the TypeScript code for your first React Native screen.
-5. Integrate React Native with your Android code using a ReactActivity.
-6. Testing your integration by running the bundler and seeing your app in action.
-
-## Using the Community Template
-
-While you follow this guide, we suggest you to use the [React Native Community Template](https://github.com/react-native-community/template/) as reference. The template contains a **minimal Android app** and will help you understanding how to integrate React Native into an existing Android app.
-
-## Prerequisites
-
-Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](getting-started-without-a-framework) to configure your development environment for building React Native apps for Android.
-This guide also assumes you're familiar with the basics of Android development such as creating Activities and editing the `AndroidManifest.xml` file.
-
-## 1. Set up directory structure
-
-To ensure a smooth experience, create a new folder for your integrated React Native project, then **move your existing Android project** to the `/android` subfolder.
-
-## 2. Install NPM dependencies
-
-Go to the root directory and run the following command:
-
-<CodeBlock language="bash" title="shell">
-{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/package.json`}
-</CodeBlock>
-
-This will copy the `package.json` <RNTemplateRepoLink href="template/package.json">file from the Community template</RNTemplateRepoLink> to your project.
-
-Next, install the NPM packages by running:
-
-<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
-<TabItem value="npm">
-
-```shell
-npm install
-```
-
-</TabItem>
-<TabItem value="yarn">
-
-```shell
-yarn install
-```
-
-</TabItem>
-</Tabs>
-
-Installation process has created a new `node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
-
-Add `node_modules/` to your `.gitignore` file (here the <RNTemplateRepoLink href="template/_gitignore">Community default one</RNTemplateRepoLink>).
-
-## 3. Adding React Native to your app
-
-### Configuring Gradle
-
-React Native uses the React Native Gradle Plugin to configure your dependencies and project setup.
-
-First, let's edit your `settings.gradle` file by adding those lines (as suggested from the <RNTemplateRepoLink href="template/android/settings.gradle">Community template</RNTemplateRepoLink>):
-
-```groovy
-// Configures the React Native Gradle Settings plugin used for autolinking
-pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
-plugins { id("com.facebook.react.settings") }
-extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
-// If using .gradle.kts files:
-// extensions.configure<com.facebook.react.ReactSettingsExtension> { autolinkLibrariesFromCommand() }
-includeBuild("../node_modules/@react-native/gradle-plugin")
-
-// Include your existing Gradle modules here.
-// include(":app")
-```
-
-Then you need to open your top level `build.gradle` and include this line (as suggested from the <RNTemplateRepoLink href="template/android/build.gradle">Community template</RNTemplateRepoLink>):
-
-```diff
-buildscript {
-    repositories {
-        google()
-        mavenCentral()
-    }
-    dependencies {
-        classpath("com.android.tools.build:gradle:7.3.1")
-+       classpath("com.facebook.react:react-native-gradle-plugin")
-    }
-}
-```
-
-This makes sure the React Native Gradle Plugin (RNGP) is available inside your project.
-Finally, add those lines inside your Applications's `build.gradle` file (it's a different `build.gradle` file usually inside your `app` folder - you can use the <RNTemplateRepoLink href="template/android/build.gradle">Community template file as reference</RNTemplateRepoLink>):
-
-```diff
-apply plugin: "com.android.application"
-+apply plugin: "com.facebook.react"
-
-repositories {
-    mavenCentral()
-}
-
-dependencies {
-    // Other dependencies here
-+   // Note: we intentionally don't specify the version number here as RNGP will take care of it.
-+   // If you don't use the RNGP, you'll have to specify version manually.
-+   implementation("com.facebook.react:react-android")
-+   implementation("com.facebook.react:hermes-android")
-}
-
-+react {
-+   // Needed to enable Autolinking - https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
-+   autolinkLibrariesWithApp()
-+}
-```
-
-Finally, open your application `gradle.properties` files and add the following line (here the <RNTemplateRepoLink href="template/android/gradle.properties">Community template file as reference</RNTemplateRepoLink>):
-
-```diff
-+reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
-+newArchEnabled=true
-+hermesEnabled=true
-```
-
-### Configuring your manifest
-
-First, make sure you have the Internet permission in your `AndroidManifest.xml`:
-
-```diff
-<manifest xmlns:android="http://schemas.android.com/apk/res/android">
-
-+   <uses-permission android:name="android.permission.INTERNET" />
-
-    <application
-      android:name=".MainApplication">
-    </application>
-</manifest>
-```
-
-Then you need to enable [cleartext traffic](https://developer.android.com/training/articles/security-config#CleartextTrafficPermitted) in your **debug** `AndroidManifest.xml`:
-
-```diff
-<?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools">
-
-    <application
-+       android:usesCleartextTraffic="true"
-+       tools:targetApi="28"
-    />
-</manifest>
-```
-
-As usual, here the AndroidManifest.xml file from the Community template to use as a reference: <RNTemplateRepoLink href="template/android/app/src/main/AndroidManifest.xml">main</RNTemplateRepoLink> and <RNTemplateRepoLink href="template/android/app/src/debug/AndroidManifest.xml">debug</RNTemplateRepoLink>.
-
-This is needed as your application will communicate with your local bundler, [Metro](https://metrobundler.dev/), via HTTP.
-
-Make sure you add this only to your **debug** manifest.
-
-## 4. Writing the TypeScript Code
-
-Now we will actually modify the native Android application to integrate React Native.
-
-The first bit of code we will write is the actual React Native code for the new screen that will be integrated into our application.
-
-### Create a `index.js` file
-
-First, create an empty `index.js` file in the root of your React Native project.
-
-`index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `import`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it.
-
-Our index.js should look as follows (here the <RNTemplateRepoLink href="template/index.js">Community template file as reference</RNTemplateRepoLink>):
-
-```js
-import {AppRegistry} from 'react-native';
-import App from './App';
-
-AppRegistry.registerComponent('HelloWorld', () => App);
-```
-
-### Create a `App.tsx` file
-
-Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX](<https://en.wikipedia.org/wiki/JSX_(JavaScript)>) expressions. It contains the root React Native component that we will integrate into our Android application (<RNTemplateRepoLink href="template/App.tsx">link</RNTemplateRepoLink>):
-
-```tsx
-import React from 'react';
-import {
-  SafeAreaView,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  useColorScheme,
-  View,
-} from 'react-native';
-
-import {
-  Colors,
-  DebugInstructions,
-  Header,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
-function App(): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
-
-  return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundStyle.backgroundColor}
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
-        <View
-          style={{
-            backgroundColor: isDarkMode
-              ? Colors.black
-              : Colors.white,
-            padding: 24,
-          }}>
-          <Text style={styles.title}>Step One</Text>
-          <Text>
-            Edit <Text style={styles.bold}>App.tsx</Text> to
-            change this screen and see your edits.
-          </Text>
-          <Text style={styles.title}>See your changes</Text>
-          <ReloadInstructions />
-          <Text style={styles.title}>Debug</Text>
-          <DebugInstructions />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  title: {
-    fontSize: 24,
-    fontWeight: '600',
-  },
-  bold: {
-    fontWeight: '700',
-  },
-});
-
-export default App;
-```
-
-Here is the <RNTemplateRepoLink href="template/App.tsx">Community template file as reference</RNTemplateRepoLink>.
-
-## 5. Integrating with your Android code
-
-We now need to add some native code in order to start the React Native runtime and tell it to render our React components.
-
-### Updating your Application class
-
-First, we need to update your `Application` class to properly initialize React Native as follows:
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-
-<TabItem value="java">
-
-```diff
-package <your-package-here>;
-
-import android.app.Application;
-+import com.facebook.react.PackageList;
-+import com.facebook.react.ReactApplication;
-+import com.facebook.react.ReactHost;
-+import com.facebook.react.ReactNativeHost;
-+import com.facebook.react.ReactPackage;
-+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
-+import com.facebook.react.defaults.DefaultReactHost;
-+import com.facebook.react.defaults.DefaultReactNativeHost;
-+import com.facebook.soloader.SoLoader;
-+import com.facebook.react.soloader.OpenSourceMergedSoMapping
-+import java.util.List;
-
--class MainApplication extends Application {
-+class MainApplication extends Application implements ReactApplication {
-+ @Override
-+ public ReactNativeHost getReactNativeHost() {
-+   return new DefaultReactNativeHost(this) {
-+     @Override
-+     protected List<ReactPackage> getPackages() { return new PackageList(this).getPackages(); }
-+     @Override
-+     protected String getJSMainModuleName() { return "index"; }
-+     @Override
-+     public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; }
-+     @Override
-+     protected boolean isNewArchEnabled() { return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; }
-+     @Override
-+     protected Boolean isHermesEnabled() { return BuildConfig.IS_HERMES_ENABLED; }
-+   };
-+ }
-
-+ @Override
-+ public ReactHost getReactHost() {
-+   return DefaultReactHost.getDefaultReactHost(getApplicationContext(), getReactNativeHost());
-+ }
-
-  @Override
-  public void onCreate() {
-    super.onCreate();
-+   SoLoader.init(this, OpenSourceMergedSoMapping);
-+   if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
-+     DefaultNewArchitectureEntryPoint.load();
-+   }
-  }
-}
-```
-
-</TabItem>
-
-<TabItem value="kotlin">
-
-```diff
-// package <your-package-here>
-
-import android.app.Application
-+import com.facebook.react.PackageList
-+import com.facebook.react.ReactApplication
-+import com.facebook.react.ReactHost
-+import com.facebook.react.ReactNativeHost
-+import com.facebook.react.ReactPackage
-+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
-+import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
-+import com.facebook.react.defaults.DefaultReactNativeHost
-+import com.facebook.soloader.SoLoader
-+import com.facebook.react.soloader.OpenSourceMergedSoMapping
-
--class MainApplication : Application() {
-+class MainApplication : Application(), ReactApplication {
-
-+ override val reactNativeHost: ReactNativeHost =
-+      object : DefaultReactNativeHost(this) {
-+        override fun getPackages(): List<ReactPackage> = PackageList(this).packages
-+        override fun getJSMainModuleName(): String = "index"
-+        override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
-+        override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
-+        override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
-+      }
-
-+ override val reactHost: ReactHost
-+   get() = getDefaultReactHost(applicationContext, reactNativeHost)
-
-  override fun onCreate() {
-    super.onCreate()
-+   SoLoader.init(this, OpenSourceMergedSoMapping)
-+   if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
-+     load()
-+   }
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-As usual, here the <RNTemplateRepoLink href="template/android/app/src/main/java/com/helloworld/MainApplication.kt">`MainApplication.kt` Community template file as reference</RNTemplateRepoLink>.
-
-#### Creating a `ReactActivity`
-
-Finally, we need to create a new `Activity` that will extend `ReactActivity` and host the React Native code. This activity will be responsible for starting the React Native runtime and rendering the React component.
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-
-<TabItem value="java">
-
-```java
-// package <your-package-here>;
-
-import com.facebook.react.ReactActivity;
-import com.facebook.react.ReactActivityDelegate;
-import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
-import com.facebook.react.defaults.DefaultReactActivityDelegate;
-
-public class MyReactActivity extends ReactActivity {
-
-    @Override
-    protected String getMainComponentName() {
-        return "HelloWorld";
-    }
-
-    @Override
-    protected ReactActivityDelegate createReactActivityDelegate() {
-        return new DefaultReactActivityDelegate(this, getMainComponentName(), DefaultNewArchitectureEntryPoint.getFabricEnabled());
-    }
-}
-```
-
-</TabItem>
-
-<TabItem value="kotlin">
-
-```kotlin
-// package <your-package-here>
-
-import com.facebook.react.ReactActivity
-import com.facebook.react.ReactActivityDelegate
-import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
-import com.facebook.react.defaults.DefaultReactActivityDelegate
-
-class MyReactActivity : ReactActivity() {
-
-    override fun getMainComponentName(): String = "HelloWorld"
-
-    override fun createReactActivityDelegate(): ReactActivityDelegate =
-        DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
-}
-```
-
-</TabItem>
-</Tabs>
-
-As usual, here the <RNTemplateRepoLink href="template/android/app/src/main/java/com/helloworld/MainActivity.kt">`MainActivity.kt` Community template file as reference</RNTemplateRepoLink>.
-
-Whenever you create a new Activity, you need to add it to your `AndroidManifest.xml` file. You also need set the theme of `MyReactActivity` to `Theme.AppCompat.Light.NoActionBar` (or to any non-ActionBar theme) as otherwise your application will render an ActionBar on top of your React Native screen:
-
-```diff
-<manifest xmlns:android="http://schemas.android.com/apk/res/android">
-
-    <uses-permission android:name="android.permission.INTERNET" />
-
-    <application
-      android:name=".MainApplication">
-
-+     <activity
-+       android:name=".MyReactActivity"
-+       android:label="@string/app_name"
-+       android:theme="@style/Theme.AppCompat.Light.NoActionBar">
-+     </activity>
-    </application>
-</manifest>
-```
-
-Now your activity is ready to run some JavaScript code.
-
-## 6. Test your integration
-
-You have completed all the basic steps to integrate React Native with your application. Now we will start the [Metro bundler](https://metrobundler.dev/) to build your TypeScript application code into a bundle. Metro's HTTP server shares the bundle from `localhost` on your developer environment to a simulator or device. This allows for [hot reloading](https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading).
-
-First, you need to create a `metro.config.js` file in the root of your project as follows:
-
-```js
-const {getDefaultConfig} = require('@react-native/metro-config');
-module.exports = getDefaultConfig(__dirname);
-```
-
-You can checkout the <RNTemplateRepoLink href="template/metro.config.js">`metro.config.js` file</RNTemplateRepoLink> from the Community template file as reference.
-
-Once you have the configuration file in place, you can run the bundler. Run the following command in the root directory of your project:
-
-<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
-<TabItem value="npm">
-
-```shell
-npm start
-```
-
-</TabItem>
-<TabItem value="yarn">
-
-```shell
-yarn start
-```
-
-</TabItem>
-</Tabs>
-
-Now build and run your Android app as normal.
-
-Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display:
-
-<center><img src="/docs/assets/EmbeddedAppAndroidVideo.gif" width="300" /></center>
-
-### Creating a release build in Android Studio
-
-You can use Android Studio to create your release builds too! It’s as quick as creating release builds of your previously-existing native Android app.
-
-The React Native Gradle Plugin will take care of bundling the JS code inside your APK/App Bundle.
-
-If you're not using Android Studio, you can create a release build with:
-
-```
-cd android
-# For a Release APK
-./gradlew :app:assembleRelease
-# For a Release AAB
-./gradlew :app:bundleRelease
-```
-
-### Now what?
-
-At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native.
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import constants from '@site/core/TabsConstants';
+import CodeBlock from '@theme/CodeBlock';
+import RNTemplateRepoLink from '@site/core/RNTemplateRepoLink';
+import {getTemplateBranchNameForCurrentVersion} from '@site/src/getTemplateBranchNameForCurrentVersion';
+
+## Key Concepts
+
+The keys to integrating React Native components into your Android application are to:
+
+1. Set up the correct directory structure.
+2. Install the necessary NPM dependencies.
+3. Adding React Native to your Gradle configuration.
+4. Writing the TypeScript code for your first React Native screen.
+5. Integrate React Native with your Android code using a ReactActivity.
+6. Testing your integration by running the bundler and seeing your app in action.
+
+## Using the Community Template
+
+While you follow this guide, we suggest you to use the [React Native Community Template](https://github.com/react-native-community/template/) as reference. The template contains a **minimal Android app** and will help you understanding how to integrate React Native into an existing Android app.
+
+## Prerequisites
+
+Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](getting-started-without-a-framework) to configure your development environment for building React Native apps for Android.
+This guide also assumes you're familiar with the basics of Android development such as creating Activities and editing the `AndroidManifest.xml` file.
+
+## 1. Set up directory structure
+
+To ensure a smooth experience, create a new folder for your integrated React Native project, then **move your existing Android project** to the `/android` subfolder.
+
+## 2. Install NPM dependencies
+
+Go to the root directory and run the following command:
+
+<CodeBlock language="bash" title="shell">
+{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/package.json`}
+</CodeBlock>
+
+This will copy the `package.json` <RNTemplateRepoLink href="template/package.json">file from the Community template</RNTemplateRepoLink> to your project.
+
+Next, install the NPM packages by running:
+
+<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
+<TabItem value="npm">
+
+```shell
+npm install
+```
+
+</TabItem>
+<TabItem value="yarn">
+
+```shell
+yarn install
+```
+
+</TabItem>
+</Tabs>
+
+Installation process has created a new `node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
+
+Add `node_modules/` to your `.gitignore` file (here the <RNTemplateRepoLink href="template/_gitignore">Community default one</RNTemplateRepoLink>).
+
+## 3. Adding React Native to your app
+
+### Configuring Gradle
+
+React Native uses the React Native Gradle Plugin to configure your dependencies and project setup.
+
+First, let's edit your `settings.gradle` file by adding those lines (as suggested from the <RNTemplateRepoLink href="template/android/settings.gradle">Community template</RNTemplateRepoLink>):
+
+```groovy
+// Configures the React Native Gradle Settings plugin used for autolinking
+pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
+plugins { id("com.facebook.react.settings") }
+extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
+// If using .gradle.kts files:
+// extensions.configure<com.facebook.react.ReactSettingsExtension> { autolinkLibrariesFromCommand() }
+includeBuild("../node_modules/@react-native/gradle-plugin")
+
+// Include your existing Gradle modules here.
+// include(":app")
+```
+
+Then you need to open your top level `build.gradle` and include this line (as suggested from the <RNTemplateRepoLink href="template/android/build.gradle">Community template</RNTemplateRepoLink>):
+
+```diff
+buildscript {
+    repositories {
+        google()
+        mavenCentral()
+    }
+    dependencies {
+        classpath("com.android.tools.build:gradle:7.3.1")
++       classpath("com.facebook.react:react-native-gradle-plugin")
+    }
+}
+```
+
+This makes sure the React Native Gradle Plugin (RNGP) is available inside your project.
+Finally, add those lines inside your Applications's `build.gradle` file (it's a different `build.gradle` file usually inside your `app` folder - you can use the <RNTemplateRepoLink href="template/android/build.gradle">Community template file as reference</RNTemplateRepoLink>):
+
+```diff
+apply plugin: "com.android.application"
++apply plugin: "com.facebook.react"
+
+repositories {
+    mavenCentral()
+}
+
+dependencies {
+    // Other dependencies here
++   // Note: we intentionally don't specify the version number here as RNGP will take care of it.
++   // If you don't use the RNGP, you'll have to specify version manually.
++   implementation("com.facebook.react:react-android")
++   implementation("com.facebook.react:hermes-android")
+}
+
++react {
++   // Needed to enable Autolinking - https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
++   autolinkLibrariesWithApp()
++}
+```
+
+Finally, open your application `gradle.properties` files and add the following line (here the <RNTemplateRepoLink href="template/android/gradle.properties">Community template file as reference</RNTemplateRepoLink>):
+
+```diff
++reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
++newArchEnabled=true
++hermesEnabled=true
+```
+
+### Configuring your manifest
+
+First, make sure you have the Internet permission in your `AndroidManifest.xml`:
+
+```diff
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
++   <uses-permission android:name="android.permission.INTERNET" />
+
+    <application
+      android:name=".MainApplication">
+    </application>
+</manifest>
+```
+
+Then you need to enable [cleartext traffic](https://developer.android.com/training/articles/security-config#CleartextTrafficPermitted) in your **debug** `AndroidManifest.xml`:
+
+```diff
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <application
++       android:usesCleartextTraffic="true"
++       tools:targetApi="28"
+    />
+</manifest>
+```
+
+As usual, here the AndroidManifest.xml file from the Community template to use as a reference: <RNTemplateRepoLink href="template/android/app/src/main/AndroidManifest.xml">main</RNTemplateRepoLink> and <RNTemplateRepoLink href="template/android/app/src/debug/AndroidManifest.xml">debug</RNTemplateRepoLink>.
+
+This is needed as your application will communicate with your local bundler, [Metro](https://metrobundler.dev/), via HTTP.
+
+Make sure you add this only to your **debug** manifest.
+
+## 4. Writing the TypeScript Code
+
+Now we will actually modify the native Android application to integrate React Native.
+
+The first bit of code we will write is the actual React Native code for the new screen that will be integrated into our application.
+
+### Create a `index.js` file
+
+First, create an empty `index.js` file in the root of your React Native project.
+
+`index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `import`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it.
+
+Our index.js should look as follows (here the <RNTemplateRepoLink href="template/index.js">Community template file as reference</RNTemplateRepoLink>):
+
+```js
+import {AppRegistry} from 'react-native';
+import App from './App';
+
+AppRegistry.registerComponent('HelloWorld', () => App);
+```
+
+### Create a `App.tsx` file
+
+Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX](<https://en.wikipedia.org/wiki/JSX_(JavaScript)>) expressions. It contains the root React Native component that we will integrate into our Android application (<RNTemplateRepoLink href="template/App.tsx">link</RNTemplateRepoLink>):
+
+```tsx
+import {type JSX} from 'react';
+import {
+  SafeAreaView,
+  ScrollView,
+  StatusBar,
+  StyleSheet,
+  Text,
+  useColorScheme,
+  View,
+} from 'react-native';
+import {
+  Colors,
+  DebugInstructions,
+  Header,
+  ReloadInstructions,
+} from 'react-native/Libraries/NewAppScreen';
+
+function App(): JSX.Element {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const backgroundStyle = {
+    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+  };
+
+  return (
+    <SafeAreaView style={backgroundStyle}>
+      <StatusBar
+        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
+        backgroundColor={backgroundStyle.backgroundColor}
+      />
+      <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        style={backgroundStyle}>
+        <Header />
+        <View
+          style={{
+            backgroundColor: isDarkMode
+              ? Colors.black
+              : Colors.white,
+            padding: 24,
+          }}>
+          <Text style={styles.title}>Step One</Text>
+          <Text>
+            Edit <Text style={styles.bold}>App.tsx</Text> to
+            change this screen and see your edits.
+          </Text>
+          <Text style={styles.title}>See your changes</Text>
+          <ReloadInstructions />
+          <Text style={styles.title}>Debug</Text>
+          <DebugInstructions />
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 24,
+    fontWeight: '600',
+  },
+  bold: {
+    fontWeight: '700',
+  },
+});
+
+export default App;
+```
+
+Here is the <RNTemplateRepoLink href="template/App.tsx">Community template file as reference</RNTemplateRepoLink>.
+
+## 5. Integrating with your Android code
+
+We now need to add some native code in order to start the React Native runtime and tell it to render our React components.
+
+### Updating your Application class
+
+First, we need to update your `Application` class to properly initialize React Native as follows:
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+
+<TabItem value="java">
+
+```diff
+package <your-package-here>;
+
+import android.app.Application;
++import com.facebook.react.PackageList;
++import com.facebook.react.ReactApplication;
++import com.facebook.react.ReactHost;
++import com.facebook.react.ReactNativeHost;
++import com.facebook.react.ReactPackage;
++import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
++import com.facebook.react.defaults.DefaultReactHost;
++import com.facebook.react.defaults.DefaultReactNativeHost;
++import com.facebook.soloader.SoLoader;
++import com.facebook.react.soloader.OpenSourceMergedSoMapping
++import java.util.List;
+
+-class MainApplication extends Application {
++class MainApplication extends Application implements ReactApplication {
++ @Override
++ public ReactNativeHost getReactNativeHost() {
++   return new DefaultReactNativeHost(this) {
++     @Override
++     protected List<ReactPackage> getPackages() { return new PackageList(this).getPackages(); }
++     @Override
++     protected String getJSMainModuleName() { return "index"; }
++     @Override
++     public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; }
++     @Override
++     protected boolean isNewArchEnabled() { return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; }
++     @Override
++     protected Boolean isHermesEnabled() { return BuildConfig.IS_HERMES_ENABLED; }
++   };
++ }
+
++ @Override
++ public ReactHost getReactHost() {
++   return DefaultReactHost.getDefaultReactHost(getApplicationContext(), getReactNativeHost());
++ }
+
+  @Override
+  public void onCreate() {
+    super.onCreate();
++   SoLoader.init(this, OpenSourceMergedSoMapping);
++   if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
++     DefaultNewArchitectureEntryPoint.load();
++   }
+  }
+}
+```
+
+</TabItem>
+
+<TabItem value="kotlin">
+
+```diff
+// package <your-package-here>
+
+import android.app.Application
++import com.facebook.react.PackageList
++import com.facebook.react.ReactApplication
++import com.facebook.react.ReactHost
++import com.facebook.react.ReactNativeHost
++import com.facebook.react.ReactPackage
++import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
++import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
++import com.facebook.react.defaults.DefaultReactNativeHost
++import com.facebook.soloader.SoLoader
++import com.facebook.react.soloader.OpenSourceMergedSoMapping
+
+-class MainApplication : Application() {
++class MainApplication : Application(), ReactApplication {
+
++ override val reactNativeHost: ReactNativeHost =
++      object : DefaultReactNativeHost(this) {
++        override fun getPackages(): List<ReactPackage> = PackageList(this).packages
++        override fun getJSMainModuleName(): String = "index"
++        override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
++        override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
++        override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
++      }
+
++ override val reactHost: ReactHost
++   get() = getDefaultReactHost(applicationContext, reactNativeHost)
+
+  override fun onCreate() {
+    super.onCreate()
++   SoLoader.init(this, OpenSourceMergedSoMapping)
++   if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
++     load()
++   }
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+As usual, here the <RNTemplateRepoLink href="template/android/app/src/main/java/com/helloworld/MainApplication.kt">`MainApplication.kt` Community template file as reference</RNTemplateRepoLink>.
+
+#### Creating a `ReactActivity`
+
+Finally, we need to create a new `Activity` that will extend `ReactActivity` and host the React Native code. This activity will be responsible for starting the React Native runtime and rendering the React component.
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+
+<TabItem value="java">
+
+```java
+// package <your-package-here>;
+
+import com.facebook.react.ReactActivity;
+import com.facebook.react.ReactActivityDelegate;
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
+import com.facebook.react.defaults.DefaultReactActivityDelegate;
+
+public class MyReactActivity extends ReactActivity {
+
+    @Override
+    protected String getMainComponentName() {
+        return "HelloWorld";
+    }
+
+    @Override
+    protected ReactActivityDelegate createReactActivityDelegate() {
+        return new DefaultReactActivityDelegate(this, getMainComponentName(), DefaultNewArchitectureEntryPoint.getFabricEnabled());
+    }
+}
+```
+
+</TabItem>
+
+<TabItem value="kotlin">
+
+```kotlin
+// package <your-package-here>
+
+import com.facebook.react.ReactActivity
+import com.facebook.react.ReactActivityDelegate
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
+import com.facebook.react.defaults.DefaultReactActivityDelegate
+
+class MyReactActivity : ReactActivity() {
+
+    override fun getMainComponentName(): String = "HelloWorld"
+
+    override fun createReactActivityDelegate(): ReactActivityDelegate =
+        DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
+}
+```
+
+</TabItem>
+</Tabs>
+
+As usual, here the <RNTemplateRepoLink href="template/android/app/src/main/java/com/helloworld/MainActivity.kt">`MainActivity.kt` Community template file as reference</RNTemplateRepoLink>.
+
+Whenever you create a new Activity, you need to add it to your `AndroidManifest.xml` file. You also need set the theme of `MyReactActivity` to `Theme.AppCompat.Light.NoActionBar` (or to any non-ActionBar theme) as otherwise your application will render an ActionBar on top of your React Native screen:
+
+```diff
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <uses-permission android:name="android.permission.INTERNET" />
+
+    <application
+      android:name=".MainApplication">
+
++     <activity
++       android:name=".MyReactActivity"
++       android:label="@string/app_name"
++       android:theme="@style/Theme.AppCompat.Light.NoActionBar">
++     </activity>
+    </application>
+</manifest>
+```
+
+Now your activity is ready to run some JavaScript code.
+
+## 6. Test your integration
+
+You have completed all the basic steps to integrate React Native with your application. Now we will start the [Metro bundler](https://metrobundler.dev/) to build your TypeScript application code into a bundle. Metro's HTTP server shares the bundle from `localhost` on your developer environment to a simulator or device. This allows for [hot reloading](https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading).
+
+First, you need to create a `metro.config.js` file in the root of your project as follows:
+
+```js
+const {getDefaultConfig} = require('@react-native/metro-config');
+module.exports = getDefaultConfig(__dirname);
+```
+
+You can checkout the <RNTemplateRepoLink href="template/metro.config.js">`metro.config.js` file</RNTemplateRepoLink> from the Community template file as reference.
+
+Once you have the configuration file in place, you can run the bundler. Run the following command in the root directory of your project:
+
+<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
+<TabItem value="npm">
+
+```shell
+npm start
+```
+
+</TabItem>
+<TabItem value="yarn">
+
+```shell
+yarn start
+```
+
+</TabItem>
+</Tabs>
+
+Now build and run your Android app as normal.
+
+Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display:
+
+<center><img src="/docs/assets/EmbeddedAppAndroidVideo.gif" width="300" /></center>
+
+### Creating a release build in Android Studio
+
+You can use Android Studio to create your release builds too! It’s as quick as creating release builds of your previously-existing native Android app.
+
+The React Native Gradle Plugin will take care of bundling the JS code inside your APK/App Bundle.
+
+If you're not using Android Studio, you can create a release build with:
+
+```
+cd android
+# For a Release APK
+./gradlew :app:assembleRelease
+# For a Release AAB
+./gradlew :app:bundleRelease
+```
+
+### Now what?
+
+At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native.
diff --git a/website/versioned_docs/version-0.85/_turbo-native-modules-components.jsx b/website/versioned_docs/version-0.85/_turbo-native-modules-components.jsx
index 1bb5a1b5edb..9b17f011728 100644
--- a/website/versioned_docs/version-0.85/_turbo-native-modules-components.jsx
+++ b/website/versioned_docs/version-0.85/_turbo-native-modules-components.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import IOSContent from './turbo-native-modules-ios.md';
 import AndroidContent from './turbo-native-modules-android.md';
 
diff --git a/website/versioned_docs/version-0.85/accessibilityinfo.md b/website/versioned_docs/version-0.85/accessibilityinfo.md
index c5c580e8c80..c3b47920418 100644
--- a/website/versioned_docs/version-0.85/accessibilityinfo.md
+++ b/website/versioned_docs/version-0.85/accessibilityinfo.md
@@ -1,292 +1,292 @@
----
-id: accessibilityinfo
-title: AccessibilityInfo
----
-
-Sometimes it's useful to know whether or not the device has a screen reader that is currently active. The `AccessibilityInfo` API is designed for this purpose. You can use it to query the current state of the screen reader as well as to register to be notified when the state of the screen reader changes.
-
-## Example
-
-```SnackPlayer name=AccessibilityInfo%20Example&supportedPlatforms=android,ios
-import React, {useState, useEffect} from 'react';
-import {AccessibilityInfo, Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false);
-  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
-
-  useEffect(() => {
-    const reduceMotionChangedSubscription = AccessibilityInfo.addEventListener(
-      'reduceMotionChanged',
-      isReduceMotionEnabled => {
-        setReduceMotionEnabled(isReduceMotionEnabled);
-      },
-    );
-    const screenReaderChangedSubscription = AccessibilityInfo.addEventListener(
-      'screenReaderChanged',
-      isScreenReaderEnabled => {
-        setScreenReaderEnabled(isScreenReaderEnabled);
-      },
-    );
-
-    AccessibilityInfo.isReduceMotionEnabled().then(isReduceMotionEnabled => {
-      setReduceMotionEnabled(isReduceMotionEnabled);
-    });
-    AccessibilityInfo.isScreenReaderEnabled().then(isScreenReaderEnabled => {
-      setScreenReaderEnabled(isScreenReaderEnabled);
-    });
-
-    return () => {
-      reduceMotionChangedSubscription.remove();
-      screenReaderChangedSubscription.remove();
-    };
-  }, []);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.status}>
-          The reduce motion is {reduceMotionEnabled ? 'enabled' : 'disabled'}.
-        </Text>
-        <Text style={styles.status}>
-          The screen reader is {screenReaderEnabled ? 'enabled' : 'disabled'}.
-        </Text>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  status: {
-    margin: 30,
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Methods
-
-### `addEventListener()`
-
-```tsx
-static addEventListener(
-  eventName: AccessibilityChangeEventName | AccessibilityAnnouncementEventName,
-  handler: (
-    event: AccessibilityChangeEvent | AccessibilityAnnouncementFinishedEvent,
-  ) => void,
-): EmitterSubscription;
-```
-
-Add an event handler. Supported events:
-
-| Event name                                                                               | Description                                                                                                                                                                                                                                                                                              |
-| ---------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `accessibilityServiceChanged`<br/><div className="label two-lines android">Android</div> | Fires when some services such as TalkBack, other Android assistive technologies, and third-party accessibility services are enabled. The argument to the event handler is a boolean. The boolean is `true` when a some accessibility services is enabled and `false` otherwise.                          |
-| `announcementFinished`<br/><div className="label two-lines ios">iOS</div>                | Fires when the screen reader has finished making an announcement. The argument to the event handler is a dictionary with these keys:<ul><li>`announcement`: The string announced by the screen reader.</li><li>`success`: A boolean indicating whether the announcement was successfully made.</li></ul> |
-| `boldTextChanged`<br/><div className="label two-lines ios">iOS</div>                     | 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`<br/><div className="label two-lines ios">iOS</div>                    | 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`<br/><div className="label two-lines ios">iOS</div>                 | 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.                                  |
-| `reduceTransparencyChanged`<br/><div className="label two-lines ios">iOS</div>           | 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.                                                                                                         |
-| `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.                                                                                                                          |
-
----
-
-### `announceForAccessibility()`
-
-```tsx
-static announceForAccessibility(announcement: string);
-```
-
-Post a string to be announced by the screen reader.
-
----
-
-### `announceForAccessibilityWithOptions()`
-
-```tsx
-static announceForAccessibilityWithOptions(
-  announcement: string,
-  options: {queue?: boolean},
-);
-```
-
-Post a string to be announced by the screen reader with modification options. By default announcements will interrupt any existing speech, but on iOS they can be queued behind existing speech by setting `queue` to `true` in the options object.
-
-**Parameters:**
-
-| Name                                                              | Type   | Description                                                                                  |
-| ----------------------------------------------------------------- | ------ | -------------------------------------------------------------------------------------------- |
-| announcement <div className="label basic required">Required</div> | string | The string to be announced                                                                   |
-| options <div className="label basic required">Required</div>      | object | `queue` - queue the announcement behind existing speech <div className="label ios">iOS</div> |
-
----
-
-### `getRecommendedTimeoutMillis()` <div className="label android">Android</div>
-
-```tsx
-static getRecommendedTimeoutMillis(originalTimeout: number): Promise<number>;
-```
-
-Gets the timeout in millisecond that the user needs.
-This value is set in "Time to take action (Accessibility timeout)" of "Accessibility" settings.
-
-**Parameters:**
-
-| Name                                                                 | Type   | Description                                                                           |
-| -------------------------------------------------------------------- | ------ | ------------------------------------------------------------------------------------- |
-| originalTimeout <div className="label basic required">Required</div> | number | The timeout to return if "Accessibility timeout" is not set. Specify in milliseconds. |
-
----
-
-### `isAccessibilityServiceEnabled()` <div className="label android">Android</div>
-
-```tsx
-static isAccessibilityServiceEnabled(): Promise<boolean>;
-```
-
-Check whether any accessibility service is enabled. This includes TalkBack but also any third-party accessibility app that may be installed. To only check whether TalkBack is enabled, use [isScreenReaderEnabled](#isscreenreaderenabled). Returns a promise which resolves to a boolean. The result is `true` when some accessibility services is enabled and `false` otherwise.
-
-:::note
-Please use [`isScreenReaderEnabled`](#isscreenreaderenabled) if you only want to check the status of TalkBack.
-:::
-
----
-
-### `isBoldTextEnabled()` <div className="label ios">iOS</div>
-
-```tsx
-static isBoldTextEnabled(): Promise<boolean>:
-```
-
-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()` <div className="label ios">iOS</div>
-
-```tsx
-static isGrayscaleEnabled(): Promise<boolean>;
-```
-
-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()` <div className="label ios">iOS</div>
-
-```tsx
-static isInvertColorsEnabled(): Promise<boolean>;
-```
-
-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()`
-
-```tsx
-static isReduceMotionEnabled(): Promise<boolean>;
-```
-
-Query whether reduce motion is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when reduce motion is enabled and `false` otherwise.
-
----
-
-### `isReduceTransparencyEnabled()` <div className="label ios">iOS</div>
-
-```tsx
-static isReduceTransparencyEnabled(): Promise<boolean>;
-```
-
-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()`
-
-```tsx
-static isScreenReaderEnabled(): Promise<boolean>;
-```
-
-Query whether a screen reader is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when a screen reader is enabled and `false` otherwise.
-
----
-
-### `isHighTextContrastEnabled()` <div className="label android">Android</div>
-
-```tsx
-static isHighTextContrastEnabled(): Promise<boolean>
-```
-
-Query whether high text contrast is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when high text contrast is enabled and `false` otherwise.
-
----
-
-### `isDarkerSystemColorsEnabled()` <div className="label ios">iOS</div>
-
-```tsx
-static isDarkerSystemColorsEnabled(): Promise<boolean>
-```
-
-Query whether dark system colors is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when dark system colors is enabled and `false` otherwise.
-
----
-
-### `prefersCrossFadeTransitions()` <div className="label ios">iOS</div>
-
-```tsx
-static prefersCrossFadeTransitions(): Promise<boolean>;
-```
-
-Query whether reduce motion and prefer cross-fade transitions settings are currently enabled. Returns a promise which resolves to a boolean. The result is `true` when prefer cross-fade transitions is enabled and `false` otherwise.
-
----
-
-### 🗑️ `setAccessibilityFocus()`
-
-:::warning[Deprecated]
-Prefer using `sendAccessibilityEvent` with eventType `focus` instead.
-:::
-
-```tsx
-static setAccessibilityFocus(reactTag: number);
-```
-
-Set accessibility focus to a React component.
-
-On Android, this calls `UIManager.sendAccessibilityEvent` method with passed `reactTag` and `UIManager.AccessibilityEventTypes.typeViewFocused` arguments.
-
-:::note
-Make sure that any `View` you want to receive the accessibility focus has `accessible={true}`.
-:::
-
----
-
-### `sendAccessibilityEvent()`
-
-```tsx
-static sendAccessibilityEvent(host: HostInstance, eventType: AccessibilityEventTypes);
-```
-
-Imperatively trigger an accessibility event on a React component, like changing the focused element for a screen reader.
-
-:::note
-Make sure that any `View` you want to receive the accessibility focus has `accessible={true}`.
-:::
-
-| Name                                                           | Type                    | Description                                                                                                            |
-| -------------------------------------------------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------- |
-| host <div className="label basic required">Required</div>      | HostInstance            | The component ref to send the event to.                                                                                |
-| eventType <div className="label basic required">Required</div> | AccessibilityEventTypes | One of `'click'` (Android only), `'focus'`, `'viewHoverEnter'` (Android only), or `'windowStateChange'` (Android only) |
+---
+id: accessibilityinfo
+title: AccessibilityInfo
+---
+
+Sometimes it's useful to know whether or not the device has a screen reader that is currently active. The `AccessibilityInfo` API is designed for this purpose. You can use it to query the current state of the screen reader as well as to register to be notified when the state of the screen reader changes.
+
+## Example
+
+```SnackPlayer name=AccessibilityInfo%20Example&supportedPlatforms=android,ios
+import {useState, useEffect} from 'react';
+import {AccessibilityInfo, Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false);
+  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
+
+  useEffect(() => {
+    const reduceMotionChangedSubscription = AccessibilityInfo.addEventListener(
+      'reduceMotionChanged',
+      isReduceMotionEnabled => {
+        setReduceMotionEnabled(isReduceMotionEnabled);
+      },
+    );
+    const screenReaderChangedSubscription = AccessibilityInfo.addEventListener(
+      'screenReaderChanged',
+      isScreenReaderEnabled => {
+        setScreenReaderEnabled(isScreenReaderEnabled);
+      },
+    );
+
+    AccessibilityInfo.isReduceMotionEnabled().then(isReduceMotionEnabled => {
+      setReduceMotionEnabled(isReduceMotionEnabled);
+    });
+    AccessibilityInfo.isScreenReaderEnabled().then(isScreenReaderEnabled => {
+      setScreenReaderEnabled(isScreenReaderEnabled);
+    });
+
+    return () => {
+      reduceMotionChangedSubscription.remove();
+      screenReaderChangedSubscription.remove();
+    };
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.status}>
+          The reduce motion is {reduceMotionEnabled ? 'enabled' : 'disabled'}.
+        </Text>
+        <Text style={styles.status}>
+          The screen reader is {screenReaderEnabled ? 'enabled' : 'disabled'}.
+        </Text>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  status: {
+    margin: 30,
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+  eventName: AccessibilityChangeEventName | AccessibilityAnnouncementEventName,
+  handler: (
+    event: AccessibilityChangeEvent | AccessibilityAnnouncementFinishedEvent,
+  ) => void,
+): EmitterSubscription;
+```
+
+Add an event handler. Supported events:
+
+| Event name                                                                               | Description                                                                                                                                                                                                                                                                                              |
+| ---------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `accessibilityServiceChanged`<br/><div className="label two-lines android">Android</div> | Fires when some services such as TalkBack, other Android assistive technologies, and third-party accessibility services are enabled. The argument to the event handler is a boolean. The boolean is `true` when a some accessibility services is enabled and `false` otherwise.                          |
+| `announcementFinished`<br/><div className="label two-lines ios">iOS</div>                | Fires when the screen reader has finished making an announcement. The argument to the event handler is a dictionary with these keys:<ul><li>`announcement`: The string announced by the screen reader.</li><li>`success`: A boolean indicating whether the announcement was successfully made.</li></ul> |
+| `boldTextChanged`<br/><div className="label two-lines ios">iOS</div>                     | 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`<br/><div className="label two-lines ios">iOS</div>                    | 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`<br/><div className="label two-lines ios">iOS</div>                 | 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.                                  |
+| `reduceTransparencyChanged`<br/><div className="label two-lines ios">iOS</div>           | 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.                                                                                                         |
+| `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.                                                                                                                          |
+
+---
+
+### `announceForAccessibility()`
+
+```tsx
+static announceForAccessibility(announcement: string);
+```
+
+Post a string to be announced by the screen reader.
+
+---
+
+### `announceForAccessibilityWithOptions()`
+
+```tsx
+static announceForAccessibilityWithOptions(
+  announcement: string,
+  options: {queue?: boolean},
+);
+```
+
+Post a string to be announced by the screen reader with modification options. By default announcements will interrupt any existing speech, but on iOS they can be queued behind existing speech by setting `queue` to `true` in the options object.
+
+**Parameters:**
+
+| Name                                                              | Type   | Description                                                                                  |
+| ----------------------------------------------------------------- | ------ | -------------------------------------------------------------------------------------------- |
+| announcement <div className="label basic required">Required</div> | string | The string to be announced                                                                   |
+| options <div className="label basic required">Required</div>      | object | `queue` - queue the announcement behind existing speech <div className="label ios">iOS</div> |
+
+---
+
+### `getRecommendedTimeoutMillis()` <div className="label android">Android</div>
+
+```tsx
+static getRecommendedTimeoutMillis(originalTimeout: number): Promise<number>;
+```
+
+Gets the timeout in millisecond that the user needs.
+This value is set in "Time to take action (Accessibility timeout)" of "Accessibility" settings.
+
+**Parameters:**
+
+| Name                                                                 | Type   | Description                                                                           |
+| -------------------------------------------------------------------- | ------ | ------------------------------------------------------------------------------------- |
+| originalTimeout <div className="label basic required">Required</div> | number | The timeout to return if "Accessibility timeout" is not set. Specify in milliseconds. |
+
+---
+
+### `isAccessibilityServiceEnabled()` <div className="label android">Android</div>
+
+```tsx
+static isAccessibilityServiceEnabled(): Promise<boolean>;
+```
+
+Check whether any accessibility service is enabled. This includes TalkBack but also any third-party accessibility app that may be installed. To only check whether TalkBack is enabled, use [isScreenReaderEnabled](#isscreenreaderenabled). Returns a promise which resolves to a boolean. The result is `true` when some accessibility services is enabled and `false` otherwise.
+
+:::note
+Please use [`isScreenReaderEnabled`](#isscreenreaderenabled) if you only want to check the status of TalkBack.
+:::
+
+---
+
+### `isBoldTextEnabled()` <div className="label ios">iOS</div>
+
+```tsx
+static isBoldTextEnabled(): Promise<boolean>:
+```
+
+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()` <div className="label ios">iOS</div>
+
+```tsx
+static isGrayscaleEnabled(): Promise<boolean>;
+```
+
+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()` <div className="label ios">iOS</div>
+
+```tsx
+static isInvertColorsEnabled(): Promise<boolean>;
+```
+
+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()`
+
+```tsx
+static isReduceMotionEnabled(): Promise<boolean>;
+```
+
+Query whether reduce motion is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when reduce motion is enabled and `false` otherwise.
+
+---
+
+### `isReduceTransparencyEnabled()` <div className="label ios">iOS</div>
+
+```tsx
+static isReduceTransparencyEnabled(): Promise<boolean>;
+```
+
+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()`
+
+```tsx
+static isScreenReaderEnabled(): Promise<boolean>;
+```
+
+Query whether a screen reader is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when a screen reader is enabled and `false` otherwise.
+
+---
+
+### `isHighTextContrastEnabled()` <div className="label android">Android</div>
+
+```tsx
+static isHighTextContrastEnabled(): Promise<boolean>
+```
+
+Query whether high text contrast is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when high text contrast is enabled and `false` otherwise.
+
+---
+
+### `isDarkerSystemColorsEnabled()` <div className="label ios">iOS</div>
+
+```tsx
+static isDarkerSystemColorsEnabled(): Promise<boolean>
+```
+
+Query whether dark system colors is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when dark system colors is enabled and `false` otherwise.
+
+---
+
+### `prefersCrossFadeTransitions()` <div className="label ios">iOS</div>
+
+```tsx
+static prefersCrossFadeTransitions(): Promise<boolean>;
+```
+
+Query whether reduce motion and prefer cross-fade transitions settings are currently enabled. Returns a promise which resolves to a boolean. The result is `true` when prefer cross-fade transitions is enabled and `false` otherwise.
+
+---
+
+### 🗑️ `setAccessibilityFocus()`
+
+:::warning[Deprecated]
+Prefer using `sendAccessibilityEvent` with eventType `focus` instead.
+:::
+
+```tsx
+static setAccessibilityFocus(reactTag: number);
+```
+
+Set accessibility focus to a React component.
+
+On Android, this calls `UIManager.sendAccessibilityEvent` method with passed `reactTag` and `UIManager.AccessibilityEventTypes.typeViewFocused` arguments.
+
+:::note
+Make sure that any `View` you want to receive the accessibility focus has `accessible={true}`.
+:::
+
+---
+
+### `sendAccessibilityEvent()`
+
+```tsx
+static sendAccessibilityEvent(host: HostInstance, eventType: AccessibilityEventTypes);
+```
+
+Imperatively trigger an accessibility event on a React component, like changing the focused element for a screen reader.
+
+:::note
+Make sure that any `View` you want to receive the accessibility focus has `accessible={true}`.
+:::
+
+| Name                                                           | Type                    | Description                                                                                                            |
+| -------------------------------------------------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| host <div className="label basic required">Required</div>      | HostInstance            | The component ref to send the event to.                                                                                |
+| eventType <div className="label basic required">Required</div> | AccessibilityEventTypes | One of `'click'` (Android only), `'focus'`, `'viewHoverEnter'` (Android only), or `'windowStateChange'` (Android only) |
diff --git a/website/versioned_docs/version-0.85/actionsheetios.md b/website/versioned_docs/version-0.85/actionsheetios.md
index 30d1d6afea5..dc2269301d2 100644
--- a/website/versioned_docs/version-0.85/actionsheetios.md
+++ b/website/versioned_docs/version-0.85/actionsheetios.md
@@ -1,144 +1,144 @@
----
-id: actionsheetios
-title: ActionSheetIOS
----
-
-Displays native to iOS [Action Sheet](https://developer.apple.com/design/human-interface-guidelines/action-sheets) component.
-
-## Example
-
-```SnackPlayer name=ActionSheetIOS%20Example&supportedPlatforms=ios
-import React, {useState} from 'react';
-import {ActionSheetIOS, Button, StyleSheet, Text} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [result, setResult] = useState('🔮');
-
-  const onPress = () =>
-    ActionSheetIOS.showActionSheetWithOptions(
-      {
-        options: ['Cancel', 'Generate number', 'Reset'],
-        destructiveButtonIndex: 2,
-        cancelButtonIndex: 0,
-        userInterfaceStyle: 'dark',
-      },
-      buttonIndex => {
-        if (buttonIndex === 0) {
-          // cancel action
-        } else if (buttonIndex === 1) {
-          setResult(String(Math.floor(Math.random() * 100) + 1));
-        } else if (buttonIndex === 2) {
-          setResult('🔮');
-        }
-      },
-    );
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.result}>{result}</Text>
-        <Button onPress={onPress} title="Show Action Sheet" />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  result: {
-    fontSize: 64,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
-# Reference
-
-## Methods
-
-### `showActionSheetWithOptions()`
-
-```tsx
-static showActionSheetWithOptions: (
-  options: ActionSheetIOSOptions,
-  callback: (buttonIndex: number) => void,
-);
-```
-
-Display an iOS action sheet. The `options` object must contain one or more of:
-
-- `options` (array of strings) - a list of button titles (required)
-- `cancelButtonIndex` (int) - index of cancel button in `options`
-- `cancelButtonTintColor` (string) - the [color](colors) used for the change the text color of the cancel button
-- `destructiveButtonIndex` (int or array of ints) - indices of destructive buttons in `options`
-- `title` (string) - a title to show above the action sheet
-- `message` (string) - a message to show below the title
-- `anchor` (number) - the node to which the action sheet should be anchored (used for iPad)
-- `tintColor` (string) - the [color](colors) used for non-destructive button titles
-- `disabledButtonIndices` (array of numbers) - a list of button indices which should be disabled
-- `userInterfaceStyle` (string) - the interface style used for the action sheet, can be set to `light` or `dark`, otherwise the default system style will be used
-
-The 'callback' function takes one parameter, the zero-based index of the selected item.
-
-Minimal example:
-
-```tsx
-ActionSheetIOS.showActionSheetWithOptions(
-  {
-    options: ['Cancel', 'Remove'],
-    destructiveButtonIndex: 1,
-    cancelButtonIndex: 0,
-  },
-  buttonIndex => {
-    if (buttonIndex === 1) {
-      /* destructive action */
-    }
-  },
-);
-```
-
----
-
-### `dismissActionSheet()`
-
-```tsx
-static dismissActionSheet();
-```
-
-Dismisses the most upper iOS action sheet presented, if no action sheet is present a warning is displayed.
-
----
-
-### `showShareActionSheetWithOptions()`
-
-```tsx
-static showShareActionSheetWithOptions: (
-  options: ShareActionSheetIOSOptions,
-  failureCallback: (error: Error) => void,
-  successCallback: (success: boolean, method: string) => void,
-);
-```
-
-Display the iOS share sheet. The `options` object should contain one or both of `message` and `url` and can additionally have a `subject` or `excludedActivityTypes`:
-
-- `url` (string) - a URL to share
-- `message` (string) - a message to share
-- `subject` (string) - a subject for the message
-- `excludedActivityTypes` (array) - the activities to exclude from the ActionSheet
-
-:::note
-If `url` points to a local file, or is a base64-encoded uri, the file it points to will be loaded and shared directly. In this way, you can share images, videos, PDF files, etc. If `url` points to a remote file or address it must conform to URL format as described in [RFC 2396](https://www.ietf.org/rfc/rfc2396.txt). For example, a web URL without a proper protocol (HTTP/HTTPS) will not be shared.
-:::
-
-The 'failureCallback' function takes one parameter, an error object. The only property defined on this object is an optional `stack` property of type `string`.
-
-The 'successCallback' function takes two parameters:
-
-- a boolean value signifying success or failure
-- a string that, in the case of success, indicates the method of sharing
+---
+id: actionsheetios
+title: ActionSheetIOS
+---
+
+Displays native to iOS [Action Sheet](https://developer.apple.com/design/human-interface-guidelines/action-sheets) component.
+
+## Example
+
+```SnackPlayer name=ActionSheetIOS%20Example&supportedPlatforms=ios
+import {useState} from 'react';
+import {ActionSheetIOS, Button, StyleSheet, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [result, setResult] = useState('🔮');
+
+  const onPress = () =>
+    ActionSheetIOS.showActionSheetWithOptions(
+      {
+        options: ['Cancel', 'Generate number', 'Reset'],
+        destructiveButtonIndex: 2,
+        cancelButtonIndex: 0,
+        userInterfaceStyle: 'dark',
+      },
+      buttonIndex => {
+        if (buttonIndex === 0) {
+          // cancel action
+        } else if (buttonIndex === 1) {
+          setResult(String(Math.floor(Math.random() * 100) + 1));
+        } else if (buttonIndex === 2) {
+          setResult('🔮');
+        }
+      },
+    );
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.result}>{result}</Text>
+        <Button onPress={onPress} title="Show Action Sheet" />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  result: {
+    fontSize: 64,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+# Reference
+
+## Methods
+
+### `showActionSheetWithOptions()`
+
+```tsx
+static showActionSheetWithOptions: (
+  options: ActionSheetIOSOptions,
+  callback: (buttonIndex: number) => void,
+);
+```
+
+Display an iOS action sheet. The `options` object must contain one or more of:
+
+- `options` (array of strings) - a list of button titles (required)
+- `cancelButtonIndex` (int) - index of cancel button in `options`
+- `cancelButtonTintColor` (string) - the [color](colors) used for the change the text color of the cancel button
+- `destructiveButtonIndex` (int or array of ints) - indices of destructive buttons in `options`
+- `title` (string) - a title to show above the action sheet
+- `message` (string) - a message to show below the title
+- `anchor` (number) - the node to which the action sheet should be anchored (used for iPad)
+- `tintColor` (string) - the [color](colors) used for non-destructive button titles
+- `disabledButtonIndices` (array of numbers) - a list of button indices which should be disabled
+- `userInterfaceStyle` (string) - the interface style used for the action sheet, can be set to `light` or `dark`, otherwise the default system style will be used
+
+The 'callback' function takes one parameter, the zero-based index of the selected item.
+
+Minimal example:
+
+```tsx
+ActionSheetIOS.showActionSheetWithOptions(
+  {
+    options: ['Cancel', 'Remove'],
+    destructiveButtonIndex: 1,
+    cancelButtonIndex: 0,
+  },
+  buttonIndex => {
+    if (buttonIndex === 1) {
+      /* destructive action */
+    }
+  },
+);
+```
+
+---
+
+### `dismissActionSheet()`
+
+```tsx
+static dismissActionSheet();
+```
+
+Dismisses the most upper iOS action sheet presented, if no action sheet is present a warning is displayed.
+
+---
+
+### `showShareActionSheetWithOptions()`
+
+```tsx
+static showShareActionSheetWithOptions: (
+  options: ShareActionSheetIOSOptions,
+  failureCallback: (error: Error) => void,
+  successCallback: (success: boolean, method: string) => void,
+);
+```
+
+Display the iOS share sheet. The `options` object should contain one or both of `message` and `url` and can additionally have a `subject` or `excludedActivityTypes`:
+
+- `url` (string) - a URL to share
+- `message` (string) - a message to share
+- `subject` (string) - a subject for the message
+- `excludedActivityTypes` (array) - the activities to exclude from the ActionSheet
+
+:::note
+If `url` points to a local file, or is a base64-encoded uri, the file it points to will be loaded and shared directly. In this way, you can share images, videos, PDF files, etc. If `url` points to a remote file or address it must conform to URL format as described in [RFC 2396](https://www.ietf.org/rfc/rfc2396.txt). For example, a web URL without a proper protocol (HTTP/HTTPS) will not be shared.
+:::
+
+The 'failureCallback' function takes one parameter, an error object. The only property defined on this object is an optional `stack` property of type `string`.
+
+The 'successCallback' function takes two parameters:
+
+- a boolean value signifying success or failure
+- a string that, in the case of success, indicates the method of sharing
diff --git a/website/versioned_docs/version-0.85/activityindicator.md b/website/versioned_docs/version-0.85/activityindicator.md
index c9d03b73021..9b1445cbf5e 100644
--- a/website/versioned_docs/version-0.85/activityindicator.md
+++ b/website/versioned_docs/version-0.85/activityindicator.md
@@ -8,7 +8,6 @@ Displays a circular loading indicator.
 ## Example
 
 ```SnackPlayer name=ActivityIndicator%20Example
-import React from 'react';
 import {ActivityIndicator, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.85/alert.md b/website/versioned_docs/version-0.85/alert.md
index c80b62fb7a6..78b1c412e66 100644
--- a/website/versioned_docs/version-0.85/alert.md
+++ b/website/versioned_docs/version-0.85/alert.md
@@ -12,7 +12,6 @@ This is an API that works both on Android and iOS and can show static alerts. Al
 ## Example
 
 ```SnackPlayer name=Alert%20Example&supportedPlatforms=ios,android
-import React from 'react';
 import {StyleSheet, Button, Alert} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -81,7 +80,6 @@ The cancel event can be handled by providing an `onDismiss` callback property in
 ### Example <div className="label android">Android</div>
 
 ```SnackPlayer name=Alert%20Android%20Dissmissable%20Example&supportedPlatforms=android
-import React from 'react';
 import {StyleSheet, Button, Alert} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.85/animated.md b/website/versioned_docs/version-0.85/animated.md
index d4ba867028b..fce79ffaf57 100644
--- a/website/versioned_docs/version-0.85/animated.md
+++ b/website/versioned_docs/version-0.85/animated.md
@@ -16,7 +16,6 @@ Don't modify the animated value directly. You can use the [`useRef` Hook](https:
 The following example contains a `View` which will fade in and fade out based on the animated value `fadeAnim`
 
 ```SnackPlayer name=Animated%20Example
-import React from 'react';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 import {
   Animated,
diff --git a/website/versioned_docs/version-0.85/animatedvaluexy.md b/website/versioned_docs/version-0.85/animatedvaluexy.md
index 6cb44808ccf..8135c12354a 100644
--- a/website/versioned_docs/version-0.85/animatedvaluexy.md
+++ b/website/versioned_docs/version-0.85/animatedvaluexy.md
@@ -1,227 +1,227 @@
----
-id: animatedvaluexy
-title: Animated.ValueXY
----
-
-2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal [`Animated.Value`](animatedvalue), but multiplexed. Contains two regular `Animated.Value`s under the hood.
-
-## Example
-
-```SnackPlayer name=Animated.ValueXY%20Example
-import React, {useRef} from 'react';
-import {Animated, PanResponder, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const DraggableView = () => {
-  const pan = useRef(new Animated.ValueXY()).current;
-
-  const panResponder = PanResponder.create({
-    onStartShouldSetPanResponder: () => true,
-    onPanResponderMove: Animated.event([
-      null,
-      {
-        dx: pan.x, // x,y are Animated.Value
-        dy: pan.y,
-      },
-    ]),
-    onPanResponderRelease: () => {
-      Animated.spring(
-        pan, // Auto-multiplexed
-        {toValue: {x: 0, y: 0}, useNativeDriver: true}, // Back to zero
-      ).start();
-    },
-  });
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Animated.View
-          {...panResponder.panHandlers}
-          style={[pan.getLayout(), styles.box]}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  box: {
-    backgroundColor: '#61dafb',
-    width: 80,
-    height: 80,
-    borderRadius: 4,
-  },
-});
-
-export default DraggableView;
-```
-
----
-
-# Reference
-
-## Methods
-
-### `setValue()`
-
-```tsx
-setValue(value: {x: number; y: number});
-```
-
-Directly set the value. This will stop any animations running on the value and update all the bound properties.
-
-**Parameters:**
-
-| Name  | Type                     | Required | Description |
-| ----- | ------------------------ | -------- | ----------- |
-| value | `{x: number; y: number}` | Yes      | Value       |
-
----
-
-### `setOffset()`
-
-```tsx
-setOffset(offset: {x: number; y: number});
-```
-
-Sets an offset that is applied on top of whatever value is set, whether via `setValue`, an animation, or `Animated.event`. Useful for compensating things like the start of a pan gesture.
-
-**Parameters:**
-
-| Name   | Type                     | Required | Description  |
-| ------ | ------------------------ | -------- | ------------ |
-| offset | `{x: number; y: number}` | Yes      | Offset value |
-
----
-
-### `flattenOffset()`
-
-```tsx
-flattenOffset();
-```
-
-Merges the offset value into the base value and resets the offset to zero. The final output of the value is unchanged.
-
----
-
-### `extractOffset()`
-
-```tsx
-extractOffset();
-```
-
-Sets the offset value to the base value, and resets the base value to zero. The final output of the value is unchanged.
-
----
-
-### `addListener()`
-
-```tsx
-addListener(callback: (value: {x: number; y: number}) => void);
-```
-
-Adds an asynchronous listener to the value so you can observe updates from animations. This is useful because there is no way to synchronously read the value because it might be driven natively.
-
-Returns a string that serves as an identifier for the listener.
-
-**Parameters:**
-
-| Name     | Type     | Required | Description                                                                                 |
-| -------- | -------- | -------- | ------------------------------------------------------------------------------------------- |
-| callback | function | Yes      | The callback function which will receive an object with a `value` key set to the new value. |
-
----
-
-### `removeListener()`
-
-```tsx
-removeListener(id: string);
-```
-
-Unregister a listener. The `id` param shall match the identifier previously returned by `addListener()`.
-
-**Parameters:**
-
-| Name | Type   | Required | Description                        |
-| ---- | ------ | -------- | ---------------------------------- |
-| id   | string | Yes      | Id for the listener being removed. |
-
----
-
-### `removeAllListeners()`
-
-```tsx
-removeAllListeners();
-```
-
-Remove all registered listeners.
-
----
-
-### `stopAnimation()`
-
-```tsx
-stopAnimation(callback?: (value: {x: number; y: number}) => void);
-```
-
-Stops any running animation or tracking. `callback` is invoked with the final value after stopping the animation, which is useful for updating state to match the animation position with layout.
-
-**Parameters:**
-
-| Name     | Type     | Required | Description                                   |
-| -------- | -------- | -------- | --------------------------------------------- |
-| callback | function | No       | A function that will receive the final value. |
-
----
-
-### `resetAnimation()`
-
-```tsx
-resetAnimation(callback?: (value: {x: number; y: number}) => void);
-```
-
-Stops any animation and resets the value to its original.
-
-**Parameters:**
-
-| Name     | Type     | Required | Description                                      |
-| -------- | -------- | -------- | ------------------------------------------------ |
-| callback | function | No       | A function that will receive the original value. |
-
----
-
-### `getLayout()`
-
-```tsx
-getLayout(): {left: Animated.Value, top: Animated.Value};
-```
-
-Converts `{x, y}` into `{left, top}` for use in style, e.g.
-
-```tsx
-style={this.state.anim.getLayout()}
-```
-
----
-
-### `getTranslateTransform()`
-
-```tsx
-getTranslateTransform(): [
-  {translateX: Animated.Value},
-  {translateY: Animated.Value},
-];
-```
-
-Converts `{x, y}` into a useable translation transform, e.g.
-
-```tsx
-style={{
-  transform: this.state.anim.getTranslateTransform()
-}}
-```
+---
+id: animatedvaluexy
+title: Animated.ValueXY
+---
+
+2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal [`Animated.Value`](animatedvalue), but multiplexed. Contains two regular `Animated.Value`s under the hood.
+
+## Example
+
+```SnackPlayer name=Animated.ValueXY%20Example
+import {useRef} from 'react';
+import {Animated, PanResponder, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const DraggableView = () => {
+  const pan = useRef(new Animated.ValueXY()).current;
+
+  const panResponder = PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onPanResponderMove: Animated.event([
+      null,
+      {
+        dx: pan.x, // x,y are Animated.Value
+        dy: pan.y,
+      },
+    ]),
+    onPanResponderRelease: () => {
+      Animated.spring(
+        pan, // Auto-multiplexed
+        {toValue: {x: 0, y: 0}, useNativeDriver: true}, // Back to zero
+      ).start();
+    },
+  });
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Animated.View
+          {...panResponder.panHandlers}
+          style={[pan.getLayout(), styles.box]}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  box: {
+    backgroundColor: '#61dafb',
+    width: 80,
+    height: 80,
+    borderRadius: 4,
+  },
+});
+
+export default DraggableView;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `setValue()`
+
+```tsx
+setValue(value: {x: number; y: number});
+```
+
+Directly set the value. This will stop any animations running on the value and update all the bound properties.
+
+**Parameters:**
+
+| Name  | Type                     | Required | Description |
+| ----- | ------------------------ | -------- | ----------- |
+| value | `{x: number; y: number}` | Yes      | Value       |
+
+---
+
+### `setOffset()`
+
+```tsx
+setOffset(offset: {x: number; y: number});
+```
+
+Sets an offset that is applied on top of whatever value is set, whether via `setValue`, an animation, or `Animated.event`. Useful for compensating things like the start of a pan gesture.
+
+**Parameters:**
+
+| Name   | Type                     | Required | Description  |
+| ------ | ------------------------ | -------- | ------------ |
+| offset | `{x: number; y: number}` | Yes      | Offset value |
+
+---
+
+### `flattenOffset()`
+
+```tsx
+flattenOffset();
+```
+
+Merges the offset value into the base value and resets the offset to zero. The final output of the value is unchanged.
+
+---
+
+### `extractOffset()`
+
+```tsx
+extractOffset();
+```
+
+Sets the offset value to the base value, and resets the base value to zero. The final output of the value is unchanged.
+
+---
+
+### `addListener()`
+
+```tsx
+addListener(callback: (value: {x: number; y: number}) => void);
+```
+
+Adds an asynchronous listener to the value so you can observe updates from animations. This is useful because there is no way to synchronously read the value because it might be driven natively.
+
+Returns a string that serves as an identifier for the listener.
+
+**Parameters:**
+
+| Name     | Type     | Required | Description                                                                                 |
+| -------- | -------- | -------- | ------------------------------------------------------------------------------------------- |
+| callback | function | Yes      | The callback function which will receive an object with a `value` key set to the new value. |
+
+---
+
+### `removeListener()`
+
+```tsx
+removeListener(id: string);
+```
+
+Unregister a listener. The `id` param shall match the identifier previously returned by `addListener()`.
+
+**Parameters:**
+
+| Name | Type   | Required | Description                        |
+| ---- | ------ | -------- | ---------------------------------- |
+| id   | string | Yes      | Id for the listener being removed. |
+
+---
+
+### `removeAllListeners()`
+
+```tsx
+removeAllListeners();
+```
+
+Remove all registered listeners.
+
+---
+
+### `stopAnimation()`
+
+```tsx
+stopAnimation(callback?: (value: {x: number; y: number}) => void);
+```
+
+Stops any running animation or tracking. `callback` is invoked with the final value after stopping the animation, which is useful for updating state to match the animation position with layout.
+
+**Parameters:**
+
+| Name     | Type     | Required | Description                                   |
+| -------- | -------- | -------- | --------------------------------------------- |
+| callback | function | No       | A function that will receive the final value. |
+
+---
+
+### `resetAnimation()`
+
+```tsx
+resetAnimation(callback?: (value: {x: number; y: number}) => void);
+```
+
+Stops any animation and resets the value to its original.
+
+**Parameters:**
+
+| Name     | Type     | Required | Description                                      |
+| -------- | -------- | -------- | ------------------------------------------------ |
+| callback | function | No       | A function that will receive the original value. |
+
+---
+
+### `getLayout()`
+
+```tsx
+getLayout(): {left: Animated.Value, top: Animated.Value};
+```
+
+Converts `{x, y}` into `{left, top}` for use in style, e.g.
+
+```tsx
+style={this.state.anim.getLayout()}
+```
+
+---
+
+### `getTranslateTransform()`
+
+```tsx
+getTranslateTransform(): [
+  {translateX: Animated.Value},
+  {translateY: Animated.Value},
+];
+```
+
+Converts `{x, y}` into a useable translation transform, e.g.
+
+```tsx
+style={{
+  transform: this.state.anim.getTranslateTransform()
+}}
+```
diff --git a/website/versioned_docs/version-0.85/animations.md b/website/versioned_docs/version-0.85/animations.md
index ccdaa5a32bb..956e96dc2c5 100644
--- a/website/versioned_docs/version-0.85/animations.md
+++ b/website/versioned_docs/version-0.85/animations.md
@@ -1,673 +1,672 @@
----
-id: animations
-title: Animations
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface.
-
-React Native provides two complementary animation systems: [`Animated`](animations#animated-api) for granular and interactive control of specific values, and [`LayoutAnimation`](animations#layoutanimation-api) for animated global layout transactions.
-
-## `Animated` API
-
-The [`Animated`](animated) API is designed to concisely express a wide variety of interesting animation and interaction patterns in a very performant way. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and `start`/`stop` methods to control time-based animation execution.
-
-`Animated` exports six animatable component types: `View`, `Text`, `Image`, `ScrollView`, `FlatList` and `SectionList`, but you can also create your own using `Animated.createAnimatedComponent()`.
-
-For example, a container view that fades in when it is mounted may look like this:
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer ext=js
-import React, {useEffect, useRef} from 'react';
-import {Animated, Text, View} from 'react-native';
-
-const FadeInView = props => {
-  const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
-
-  useEffect(() => {
-    Animated.timing(fadeAnim, {
-      toValue: 1,
-      duration: 10000,
-      useNativeDriver: true,
-    }).start();
-  }, [fadeAnim]);
-
-  return (
-    <Animated.View // Special animatable View
-      style={{
-        ...props.style,
-        opacity: fadeAnim, // Bind opacity to animated value
-      }}>
-      {props.children}
-    </Animated.View>
-  );
-};
-
-// You can then use your `FadeInView` in place of a `View` in your components:
-export default () => {
-  return (
-    <View
-      style={{
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}>
-      <FadeInView
-        style={{
-          width: 250,
-          height: 50,
-          backgroundColor: 'powderblue',
-        }}>
-        <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>
-          Fading in
-        </Text>
-      </FadeInView>
-    </View>
-  );
-};
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer ext=tsx
-import React, {useEffect, useRef, type PropsWithChildren} from 'react';
-import {Animated, Text, View, type ViewStyle} from 'react-native';
-
-type FadeInViewProps = PropsWithChildren<{style: ViewStyle}>;
-
-const FadeInView: React.FC<FadeInViewProps> = props => {
-  const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
-
-  useEffect(() => {
-    Animated.timing(fadeAnim, {
-      toValue: 1,
-      duration: 10000,
-      useNativeDriver: true,
-    }).start();
-  }, [fadeAnim]);
-
-  return (
-    <Animated.View // Special animatable View
-      style={{
-        ...props.style,
-        opacity: fadeAnim, // Bind opacity to animated value
-      }}>
-      {props.children}
-    </Animated.View>
-  );
-};
-
-// You can then use your `FadeInView` in place of a `View` in your components:
-export default () => {
-  return (
-    <View
-      style={{
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}>
-      <FadeInView
-        style={{
-          width: 250,
-          height: 50,
-          backgroundColor: 'powderblue',
-        }}>
-        <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>
-          Fading in
-        </Text>
-      </FadeInView>
-    </View>
-  );
-};
-```
-
-</TabItem>
-</Tabs>
-
-Let's break down what's happening here. In the `FadeInView` render method, a new `Animated.Value` called `fadeAnim` is initialized with `useRef`. The opacity property on the `View` is mapped to this animated value. Behind the scenes, the numeric value is extracted and used to set opacity.
-
-When the component mounts, the opacity is set to 0. Then, an easing animation is started on the `fadeAnim` animated value, which will update all of its dependent mappings (in this case, only the opacity) on each frame as the value animates to the final value of 1.
-
-This is done in an optimized way that is faster than calling `setState` and re-rendering. Because the entire configuration is declarative, we will be able to implement further optimizations that serialize the configuration and runs the animation on a high-priority thread.
-
-### Configuring animations
-
-Animations are heavily configurable. Custom and predefined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.
-
-`Animated` provides several animation types, the most commonly used one being [`Animated.timing()`](animated#timing). It supports animating a value over time using one of various predefined easing functions, or you can use your own. Easing functions are typically used in animation to convey gradual acceleration and deceleration of objects.
-
-By default, `timing` will use an easeInOut curve that conveys gradual acceleration to full speed and concludes by gradually decelerating to a stop. You can specify a different easing function by passing an `easing` parameter. Custom `duration` or even a `delay` before the animation starts is also supported.
-
-For example, if we want to create a 2-second long animation of an object that slightly backs up before moving to its final position:
-
-```tsx
-Animated.timing(this.state.xPosition, {
-  toValue: 100,
-  easing: Easing.back(),
-  duration: 2000,
-  useNativeDriver: true,
-}).start();
-```
-
-Take a look at the [Configuring animations](animated#configuring-animations) section of the `Animated` API reference to learn more about all the config parameters supported by the built-in animations.
-
-### Composing animations
-
-Animations can be combined and played in sequence or in parallel. Sequential animations can play immediately after the previous animation has finished, or they can start after a specified delay. The `Animated` API provides several methods, such as `sequence()` and `delay()`, each of which take an array of animations to execute and automatically calls `start()`/`stop()` as needed.
-
-For example, the following animation coasts to a stop, then it springs back while twirling in parallel:
-
-```tsx
-Animated.sequence([
-  // decay, then spring to start and twirl
-  Animated.decay(position, {
-    // coast to a stop
-    velocity: {x: gestureState.vx, y: gestureState.vy}, // velocity from gesture release
-    deceleration: 0.997,
-    useNativeDriver: true,
-  }),
-  Animated.parallel([
-    // after decay, in parallel:
-    Animated.spring(position, {
-      toValue: {x: 0, y: 0}, // return to start
-      useNativeDriver: true,
-    }),
-    Animated.timing(twirl, {
-      // and twirl
-      toValue: 360,
-      useNativeDriver: true,
-    }),
-  ]),
-]).start(); // start the sequence group
-```
-
-If one animation is stopped or interrupted, then all other animations in the group are also stopped. `Animated.parallel` has a `stopTogether` option that can be set to `false` to disable this.
-
-You can find a full list of composition methods in the [Composing animations](animated#composing-animations) section of the `Animated` API reference.
-
-### Combining animated values
-
-You can [combine two animated values](animated#combining-animated-values) via addition, multiplication, division, or modulo to make a new animated value.
-
-There are some cases where an animated value needs to invert another animated value for calculation. An example is inverting a scale (2x --> 0.5x):
-
-```tsx
-const a = new Animated.Value(1);
-const b = Animated.divide(1, a);
-
-Animated.spring(a, {
-  toValue: 2,
-  useNativeDriver: true,
-}).start();
-```
-
-### Interpolation
-
-Each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.
-
-A basic mapping to convert a 0-1 range to a 0-100 range would be:
-
-```tsx
-value.interpolate({
-  inputRange: [0, 1],
-  outputRange: [0, 100],
-});
-```
-
-For example, you may want to think about your `Animated.Value` as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying `style` from the example above like so:
-
-```tsx
-  style={{
-    opacity: this.state.fadeAnim, // Binds directly
-    transform: [{
-      translateY: this.state.fadeAnim.interpolate({
-        inputRange: [0, 1],
-        outputRange: [150, 0]  // 0 : 150, 0.5 : 75, 1 : 0
-      }),
-    }],
-  }}
-```
-
-[`interpolate()`](animated#interpolate) supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
-
-```tsx
-value.interpolate({
-  inputRange: [-300, -100, 0, 100, 101],
-  outputRange: [300, 0, 1, 0, 0],
-});
-```
-
-Which would map like so:
-
-```
-Input | Output
-------|-------
-  -400|    450
-  -300|    300
-  -200|    150
-  -100|      0
-   -50|    0.5
-     0|      1
-    50|    0.5
-   100|      0
-   101|      0
-   200|      0
-```
-
-`interpolate()` also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
-
-```tsx
-value.interpolate({
-  inputRange: [0, 360],
-  outputRange: ['0deg', '360deg'],
-});
-```
-
-`interpolate()` also supports arbitrary easing functions, many of which are already implemented in the [`Easing`](easing) module. `interpolate()` also has configurable behavior for extrapolating the `outputRange`. You can set the extrapolation by setting the `extrapolate`, `extrapolateLeft`, or `extrapolateRight` options. The default value is `extend` but you can use `clamp` to prevent the output value from exceeding `outputRange`.
-
-### Tracking dynamic values
-
-Animated values can also track other values by setting the `toValue` of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a `spring()` pinned on another animated value, or with `timing()` and a `duration` of 0 for rigid tracking. They can also be composed with interpolations:
-
-```tsx
-Animated.spring(follower, {toValue: leader}).start();
-Animated.timing(opacity, {
-  toValue: pan.x.interpolate({
-    inputRange: [0, 300],
-    outputRange: [1, 0],
-  }),
-  useNativeDriver: true,
-}).start();
-```
-
-The `leader` and `follower` animated values would be implemented using `Animated.ValueXY()`. `ValueXY` is a handy way to deal with 2D interactions, such as panning or dragging. It is a basic wrapper that contains two `Animated.Value` instances and some helper functions that call through to them, making `ValueXY` a drop-in replacement for `Value` in many cases. It allows us to track both x and y values in the example above.
-
-### Tracking gestures
-
-Gestures, like panning or scrolling, and other events can map directly to animated values using [`Animated.event`](animated#event). This is done with a structured map syntax so that values can be extracted from complex event objects. The first level is an array to allow mapping across multiple args, and that array contains nested objects.
-
-For example, when working with horizontal scrolling gestures, you would do the following in order to map `event.nativeEvent.contentOffset.x` to `scrollX` (an `Animated.Value`):
-
-```tsx
- onScroll={Animated.event(
-   // scrollX = e.nativeEvent.contentOffset.x
-   [{nativeEvent: {
-        contentOffset: {
-          x: scrollX
-        }
-      }
-    }]
- )}
-```
-
-The following example implements a horizontal scrolling carousel where the scroll position indicators are animated using the `Animated.event` used in the `ScrollView`
-
-#### ScrollView with Animated Event Example
-
-```SnackPlayer name=Animated&supportedPlatforms=ios,android
-import React from 'react';
-import {
-  ScrollView,
-  Text,
-  StyleSheet,
-  View,
-  ImageBackground,
-  Animated,
-  useWindowDimensions,
-  useAnimatedValue,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const images = new Array(6).fill(
-  'https://images.unsplash.com/photo-1556740749-887f6717d7e4',
-);
-
-const App = () => {
-  const scrollX = useAnimatedValue(0);
-
-  const {width: windowWidth} = useWindowDimensions();
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.scrollContainer}>
-          <ScrollView
-            horizontal={true}
-            pagingEnabled
-            showsHorizontalScrollIndicator={false}
-            onScroll={Animated.event([
-              {
-                nativeEvent: {
-                  contentOffset: {
-                    x: scrollX,
-                  },
-                },
-              },
-            ])}
-            scrollEventThrottle={1}>
-            {images.map((image, imageIndex) => {
-              return (
-                <View
-                  style={{width: windowWidth, height: 250}}
-                  key={imageIndex}>
-                  <ImageBackground source={{uri: image}} style={styles.card}>
-                    <View style={styles.textContainer}>
-                      <Text style={styles.infoText}>
-                        {'Image - ' + imageIndex}
-                      </Text>
-                    </View>
-                  </ImageBackground>
-                </View>
-              );
-            })}
-          </ScrollView>
-          <View style={styles.indicatorContainer}>
-            {images.map((image, imageIndex) => {
-              const width = scrollX.interpolate({
-                inputRange: [
-                  windowWidth * (imageIndex - 1),
-                  windowWidth * imageIndex,
-                  windowWidth * (imageIndex + 1),
-                ],
-                outputRange: [8, 16, 8],
-                extrapolate: 'clamp',
-              });
-              return (
-                <Animated.View
-                  key={imageIndex}
-                  style={[styles.normalDot, {width}]}
-                />
-              );
-            })}
-          </View>
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  scrollContainer: {
-    height: 300,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  card: {
-    flex: 1,
-    marginVertical: 4,
-    marginHorizontal: 16,
-    borderRadius: 5,
-    overflow: 'hidden',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  textContainer: {
-    backgroundColor: 'rgba(0,0,0, 0.7)',
-    paddingHorizontal: 24,
-    paddingVertical: 8,
-    borderRadius: 5,
-  },
-  infoText: {
-    color: 'white',
-    fontSize: 16,
-    fontWeight: 'bold',
-  },
-  normalDot: {
-    height: 8,
-    width: 8,
-    borderRadius: 4,
-    backgroundColor: 'silver',
-    marginHorizontal: 4,
-  },
-  indicatorContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-
-export default App;
-```
-
-When using `PanResponder`, you could use the following code to extract the x and y positions from `gestureState.dx` and `gestureState.dy`. We use a `null` in the first position of the array, as we are only interested in the second argument passed to the `PanResponder` handler, which is the `gestureState`.
-
-```tsx
-onPanResponderMove={Animated.event(
-  [null, // ignore the native event
-  // extract dx and dy from gestureState
-  // like 'pan.x = gestureState.dx, pan.y = gestureState.dy'
-  {dx: pan.x, dy: pan.y}
-])}
-```
-
-#### PanResponder with Animated Event Example
-
-```SnackPlayer name=Animated
-import React, {useRef} from 'react';
-import {Animated, View, StyleSheet, PanResponder, Text} from 'react-native';
-
-const App = () => {
-  const pan = useRef(new Animated.ValueXY()).current;
-  const panResponder = useRef(
-    PanResponder.create({
-      onMoveShouldSetPanResponder: () => true,
-      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
-      onPanResponderRelease: () => {
-        Animated.spring(pan, {
-          toValue: {x: 0, y: 0},
-          useNativeDriver: true,
-        }).start();
-      },
-    }),
-  ).current;
-
-  return (
-    <View style={styles.container}>
-      <Text style={styles.titleText}>Drag & Release this box!</Text>
-      <Animated.View
-        style={{
-          transform: [{translateX: pan.x}, {translateY: pan.y}],
-        }}
-        {...panResponder.panHandlers}>
-        <View style={styles.box} />
-      </Animated.View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  titleText: {
-    fontSize: 14,
-    lineHeight: 24,
-    fontWeight: 'bold',
-  },
-  box: {
-    height: 150,
-    width: 150,
-    backgroundColor: 'blue',
-    borderRadius: 5,
-  },
-});
-
-export default App;
-```
-
-### Responding to the current animation value
-
-You may notice that there is no clear way to read the current value while animating. This is because the value may only be known in the native runtime due to optimizations. If you need to run JavaScript in response to the current value, there are two approaches:
-
-- `spring.stopAnimation(callback)` will stop the animation and invoke `callback` with the final value. This is useful when making gesture transitions.
-- `spring.addListener(callback)` will invoke `callback` asynchronously while the animation is running, providing a recent value. This is useful for triggering state changes, for example snapping a bobble to a new option as the user drags it closer, because these larger state changes are less sensitive to a few frames of lag compared to continuous gestures like panning which need to run at 60 fps.
-
-`Animated` is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Check out `Animated.Value.addListener` as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.
-
-### Using the native driver
-
-The `Animated` API is designed to be serializable. By using the [native driver](/blog/2017/02/14/using-native-driver-for-animated), we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.
-
-Using the native driver for normal animations can be accomplished by setting `useNativeDriver: true` in animation config when starting it. Animations without a `useNativeDriver` property will default to false for legacy reasons, but emit a warning (and typechecking error in TypeScript).
-
-```tsx
-Animated.timing(this.state.animatedValue, {
-  toValue: 1,
-  duration: 500,
-  useNativeDriver: true, // <-- Set this to true
-}).start();
-```
-
-Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
-
-The native driver also works with `Animated.event`. This is especially useful for animations that follow the scroll position as without the native driver, the animation will always run a frame behind the gesture due to the async nature of React Native.
-
-```tsx
-<Animated.ScrollView // <-- Use the Animated ScrollView wrapper
-  onScroll={Animated.event(
-    [
-      {
-        nativeEvent: {
-          contentOffset: {y: this.state.animatedValue},
-        },
-      },
-    ],
-    {useNativeDriver: true}, // <-- Set this to true
-  )}>
-  {content}
-</Animated.ScrollView>
-```
-
-You can see the native driver in action by running the [RNTester app](https://github.com/facebook/react-native/blob/main/packages/rn-tester/), then loading the Native Animated Example. You can also take a look at the [source code](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js) to learn how these examples were produced.
-
-#### Caveats
-
-Not everything you can do with `Animated` is currently supported by the native driver. The main limitation is that you can only animate non-layout properties: things like `transform` and `opacity` will work, but Flexbox and position properties will not. When using `Animated.event`, it will only work with direct events and not bubbling events. This means it does not work with `PanResponder` but does work with things like `ScrollView#onScroll`.
-
-When an animation is running, it can prevent `VirtualizedList` components from rendering more rows. If you need to run a long or looping animation while the user is scrolling through a list, you can use `isInteraction: false` in your animation's config to prevent this issue.
-
-### Bear in mind
-
-While using transform styles such as `rotateY`, `rotateX`, and others ensure the transform style `perspective` is in place. At this time some animations may not render on Android without it. Example below.
-
-```tsx
-<Animated.View
-  style={{
-    transform: [
-      {scale: this.state.scale},
-      {rotateY: this.state.rotateY},
-      {perspective: 1000}, // without this line this Animation will not render on Android while working fine on iOS
-    ],
-  }}
-/>
-```
-
-### Additional examples
-
-The RNTester app has various examples of `Animated` in use:
-
-- [AnimatedGratuitousApp](https://github.com/facebook/react-native/tree/main/packages/rn-tester/js/examples/AnimatedGratuitousApp)
-- [NativeAnimationsExample](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js)
-
-## `LayoutAnimation` API
-
-`LayoutAnimation` allows you to globally configure `create` and `update` animations that will be used for all views in the next render/layout cycle. This is useful for doing Flexbox layout updates without bothering to measure or calculate specific properties in order to animate them directly, and is especially useful when layout changes may affect ancestors, for example a "see more" expansion that also increases the size of the parent and pushes down the row below which would otherwise require explicit coordination between the components in order to animate them all in sync.
-
-Note that although `LayoutAnimation` is very powerful and can be quite useful, it provides much less control than `Animated` and other animation libraries, so you may need to use another approach if you can't get `LayoutAnimation` to do what you want.
-
-Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`:
-
-```tsx
-UIManager.setLayoutAnimationEnabledExperimental(true);
-```
-
-```SnackPlayer name=LayoutAnimations
-import React, {useState} from 'react';
-import {
-  NativeModules,
-  LayoutAnimation,
-  Text,
-  TouchableOpacity,
-  StyleSheet,
-  View,
-} from 'react-native';
-
-const {UIManager} = NativeModules;
-
-UIManager.setLayoutAnimationEnabledExperimental &&
-  UIManager.setLayoutAnimationEnabledExperimental(true);
-
-export default function App() {
-  const [state, setState] = useState({
-    w: 100,
-    h: 100,
-  });
-
-  const onPress = () => {
-    // Animate the update
-    LayoutAnimation.spring();
-    setState({w: state.w + 15, h: state.h + 15});
-  };
-
-  return (
-    <View style={styles.container}>
-      <View style={[styles.box, {width: state.w, height: state.h}]} />
-      <TouchableOpacity onPress={onPress}>
-        <View style={styles.button}>
-          <Text style={styles.buttonText}>Press me!</Text>
-        </View>
-      </TouchableOpacity>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  box: {
-    width: 200,
-    height: 200,
-    backgroundColor: 'red',
-  },
-  button: {
-    backgroundColor: 'black',
-    paddingHorizontal: 20,
-    paddingVertical: 15,
-    marginTop: 15,
-  },
-  buttonText: {
-    color: '#fff',
-    fontWeight: 'bold',
-  },
-});
-```
-
-This example uses a preset value, you can customize the animations as you need, see [LayoutAnimation.js](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/LayoutAnimation/LayoutAnimation.js) for more information.
-
-## Additional notes
-
-### `requestAnimationFrame`
-
-`requestAnimationFrame` is a polyfill from the browser that you might be familiar with. It accepts a function as its only argument and calls that function before the next repaint. It is an essential building block for animations that underlies all of the JavaScript-based animation APIs. In general, you shouldn't need to call this yourself - the animation APIs will manage frame updates for you.
-
-### `setNativeProps`
-
-As mentioned [in the Direct Manipulation section](legacy/direct-manipulation), `setNativeProps` allows us to modify properties of native-backed components (components that are actually backed by native views, unlike composite components) directly, without having to `setState` and re-render the component hierarchy.
-
-We could use this in the Rebound example to update the scale - this might be helpful if the component that we are updating is deeply nested and hasn't been optimized with `shouldComponentUpdate`.
-
-If you find your animations with dropping frames (performing below 60 frames per second), look into using `setNativeProps` or `shouldComponentUpdate` to optimize them. Or you could run the animations on the UI thread rather than the JavaScript thread [with the useNativeDriver option](/blog/2017/02/14/using-native-driver-for-animated). You may also want to defer any computationally intensive work until after animations are complete, using the [InteractionManager](interactionmanager). You can monitor the frame rate by using the In-App Dev Menu "FPS Monitor" tool.
+---
+id: animations
+title: Animations
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface.
+
+React Native provides two complementary animation systems: [`Animated`](animations#animated-api) for granular and interactive control of specific values, and [`LayoutAnimation`](animations#layoutanimation-api) for animated global layout transactions.
+
+## `Animated` API
+
+The [`Animated`](animated) API is designed to concisely express a wide variety of interesting animation and interaction patterns in a very performant way. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and `start`/`stop` methods to control time-based animation execution.
+
+`Animated` exports six animatable component types: `View`, `Text`, `Image`, `ScrollView`, `FlatList` and `SectionList`, but you can also create your own using `Animated.createAnimatedComponent()`.
+
+For example, a container view that fades in when it is mounted may look like this:
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer ext=js
+import {useEffect, useRef} from 'react';
+import {Animated, Text, View} from 'react-native';
+
+const FadeInView = props => {
+  const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
+
+  useEffect(() => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 10000,
+      useNativeDriver: true,
+    }).start();
+  }, [fadeAnim]);
+
+  return (
+    <Animated.View // Special animatable View
+      style={{
+        ...props.style,
+        opacity: fadeAnim, // Bind opacity to animated value
+      }}>
+      {props.children}
+    </Animated.View>
+  );
+};
+
+// You can then use your `FadeInView` in place of a `View` in your components:
+export default () => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+      <FadeInView
+        style={{
+          width: 250,
+          height: 50,
+          backgroundColor: 'powderblue',
+        }}>
+        <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>
+          Fading in
+        </Text>
+      </FadeInView>
+    </View>
+  );
+};
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer ext=tsx
+import {useEffect, useRef, type PropsWithChildren, type FC} from 'react';
+import {Animated, Text, View, type ViewStyle} from 'react-native';
+
+type FadeInViewProps = PropsWithChildren<{style: ViewStyle}>;
+
+const FadeInView: FC<FadeInViewProps> = props => {
+  const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
+
+  useEffect(() => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 10000,
+      useNativeDriver: true,
+    }).start();
+  }, [fadeAnim]);
+
+  return (
+    <Animated.View // Special animatable View
+      style={{
+        ...props.style,
+        opacity: fadeAnim, // Bind opacity to animated value
+      }}>
+      {props.children}
+    </Animated.View>
+  );
+};
+
+// You can then use your `FadeInView` in place of a `View` in your components:
+export default () => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+      <FadeInView
+        style={{
+          width: 250,
+          height: 50,
+          backgroundColor: 'powderblue',
+        }}>
+        <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>
+          Fading in
+        </Text>
+      </FadeInView>
+    </View>
+  );
+};
+```
+
+</TabItem>
+</Tabs>
+
+Let's break down what's happening here. In the `FadeInView` render method, a new `Animated.Value` called `fadeAnim` is initialized with `useRef`. The opacity property on the `View` is mapped to this animated value. Behind the scenes, the numeric value is extracted and used to set opacity.
+
+When the component mounts, the opacity is set to 0. Then, an easing animation is started on the `fadeAnim` animated value, which will update all of its dependent mappings (in this case, only the opacity) on each frame as the value animates to the final value of 1.
+
+This is done in an optimized way that is faster than calling `setState` and re-rendering. Because the entire configuration is declarative, we will be able to implement further optimizations that serialize the configuration and runs the animation on a high-priority thread.
+
+### Configuring animations
+
+Animations are heavily configurable. Custom and predefined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.
+
+`Animated` provides several animation types, the most commonly used one being [`Animated.timing()`](animated#timing). It supports animating a value over time using one of various predefined easing functions, or you can use your own. Easing functions are typically used in animation to convey gradual acceleration and deceleration of objects.
+
+By default, `timing` will use an easeInOut curve that conveys gradual acceleration to full speed and concludes by gradually decelerating to a stop. You can specify a different easing function by passing an `easing` parameter. Custom `duration` or even a `delay` before the animation starts is also supported.
+
+For example, if we want to create a 2-second long animation of an object that slightly backs up before moving to its final position:
+
+```tsx
+Animated.timing(this.state.xPosition, {
+  toValue: 100,
+  easing: Easing.back(),
+  duration: 2000,
+  useNativeDriver: true,
+}).start();
+```
+
+Take a look at the [Configuring animations](animated#configuring-animations) section of the `Animated` API reference to learn more about all the config parameters supported by the built-in animations.
+
+### Composing animations
+
+Animations can be combined and played in sequence or in parallel. Sequential animations can play immediately after the previous animation has finished, or they can start after a specified delay. The `Animated` API provides several methods, such as `sequence()` and `delay()`, each of which take an array of animations to execute and automatically calls `start()`/`stop()` as needed.
+
+For example, the following animation coasts to a stop, then it springs back while twirling in parallel:
+
+```tsx
+Animated.sequence([
+  // decay, then spring to start and twirl
+  Animated.decay(position, {
+    // coast to a stop
+    velocity: {x: gestureState.vx, y: gestureState.vy}, // velocity from gesture release
+    deceleration: 0.997,
+    useNativeDriver: true,
+  }),
+  Animated.parallel([
+    // after decay, in parallel:
+    Animated.spring(position, {
+      toValue: {x: 0, y: 0}, // return to start
+      useNativeDriver: true,
+    }),
+    Animated.timing(twirl, {
+      // and twirl
+      toValue: 360,
+      useNativeDriver: true,
+    }),
+  ]),
+]).start(); // start the sequence group
+```
+
+If one animation is stopped or interrupted, then all other animations in the group are also stopped. `Animated.parallel` has a `stopTogether` option that can be set to `false` to disable this.
+
+You can find a full list of composition methods in the [Composing animations](animated#composing-animations) section of the `Animated` API reference.
+
+### Combining animated values
+
+You can [combine two animated values](animated#combining-animated-values) via addition, multiplication, division, or modulo to make a new animated value.
+
+There are some cases where an animated value needs to invert another animated value for calculation. An example is inverting a scale (2x --> 0.5x):
+
+```tsx
+const a = new Animated.Value(1);
+const b = Animated.divide(1, a);
+
+Animated.spring(a, {
+  toValue: 2,
+  useNativeDriver: true,
+}).start();
+```
+
+### Interpolation
+
+Each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.
+
+A basic mapping to convert a 0-1 range to a 0-100 range would be:
+
+```tsx
+value.interpolate({
+  inputRange: [0, 1],
+  outputRange: [0, 100],
+});
+```
+
+For example, you may want to think about your `Animated.Value` as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying `style` from the example above like so:
+
+```tsx
+  style={{
+    opacity: this.state.fadeAnim, // Binds directly
+    transform: [{
+      translateY: this.state.fadeAnim.interpolate({
+        inputRange: [0, 1],
+        outputRange: [150, 0]  // 0 : 150, 0.5 : 75, 1 : 0
+      }),
+    }],
+  }}
+```
+
+[`interpolate()`](animated#interpolate) supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
+
+```tsx
+value.interpolate({
+  inputRange: [-300, -100, 0, 100, 101],
+  outputRange: [300, 0, 1, 0, 0],
+});
+```
+
+Which would map like so:
+
+```
+Input | Output
+------|-------
+  -400|    450
+  -300|    300
+  -200|    150
+  -100|      0
+   -50|    0.5
+     0|      1
+    50|    0.5
+   100|      0
+   101|      0
+   200|      0
+```
+
+`interpolate()` also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
+
+```tsx
+value.interpolate({
+  inputRange: [0, 360],
+  outputRange: ['0deg', '360deg'],
+});
+```
+
+`interpolate()` also supports arbitrary easing functions, many of which are already implemented in the [`Easing`](easing) module. `interpolate()` also has configurable behavior for extrapolating the `outputRange`. You can set the extrapolation by setting the `extrapolate`, `extrapolateLeft`, or `extrapolateRight` options. The default value is `extend` but you can use `clamp` to prevent the output value from exceeding `outputRange`.
+
+### Tracking dynamic values
+
+Animated values can also track other values by setting the `toValue` of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a `spring()` pinned on another animated value, or with `timing()` and a `duration` of 0 for rigid tracking. They can also be composed with interpolations:
+
+```tsx
+Animated.spring(follower, {toValue: leader}).start();
+Animated.timing(opacity, {
+  toValue: pan.x.interpolate({
+    inputRange: [0, 300],
+    outputRange: [1, 0],
+  }),
+  useNativeDriver: true,
+}).start();
+```
+
+The `leader` and `follower` animated values would be implemented using `Animated.ValueXY()`. `ValueXY` is a handy way to deal with 2D interactions, such as panning or dragging. It is a basic wrapper that contains two `Animated.Value` instances and some helper functions that call through to them, making `ValueXY` a drop-in replacement for `Value` in many cases. It allows us to track both x and y values in the example above.
+
+### Tracking gestures
+
+Gestures, like panning or scrolling, and other events can map directly to animated values using [`Animated.event`](animated#event). This is done with a structured map syntax so that values can be extracted from complex event objects. The first level is an array to allow mapping across multiple args, and that array contains nested objects.
+
+For example, when working with horizontal scrolling gestures, you would do the following in order to map `event.nativeEvent.contentOffset.x` to `scrollX` (an `Animated.Value`):
+
+```tsx
+ onScroll={Animated.event(
+   // scrollX = e.nativeEvent.contentOffset.x
+   [{nativeEvent: {
+        contentOffset: {
+          x: scrollX
+        }
+      }
+    }]
+ )}
+```
+
+The following example implements a horizontal scrolling carousel where the scroll position indicators are animated using the `Animated.event` used in the `ScrollView`
+
+#### ScrollView with Animated Event Example
+
+```SnackPlayer name=Animated&supportedPlatforms=ios,android
+import {
+  ScrollView,
+  Text,
+  StyleSheet,
+  View,
+  ImageBackground,
+  Animated,
+  useWindowDimensions,
+  useAnimatedValue,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const images = new Array(6).fill(
+  'https://images.unsplash.com/photo-1556740749-887f6717d7e4',
+);
+
+const App = () => {
+  const scrollX = useAnimatedValue(0);
+
+  const {width: windowWidth} = useWindowDimensions();
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.scrollContainer}>
+          <ScrollView
+            horizontal={true}
+            pagingEnabled
+            showsHorizontalScrollIndicator={false}
+            onScroll={Animated.event([
+              {
+                nativeEvent: {
+                  contentOffset: {
+                    x: scrollX,
+                  },
+                },
+              },
+            ])}
+            scrollEventThrottle={1}>
+            {images.map((image, imageIndex) => {
+              return (
+                <View
+                  style={{width: windowWidth, height: 250}}
+                  key={imageIndex}>
+                  <ImageBackground source={{uri: image}} style={styles.card}>
+                    <View style={styles.textContainer}>
+                      <Text style={styles.infoText}>
+                        {'Image - ' + imageIndex}
+                      </Text>
+                    </View>
+                  </ImageBackground>
+                </View>
+              );
+            })}
+          </ScrollView>
+          <View style={styles.indicatorContainer}>
+            {images.map((image, imageIndex) => {
+              const width = scrollX.interpolate({
+                inputRange: [
+                  windowWidth * (imageIndex - 1),
+                  windowWidth * imageIndex,
+                  windowWidth * (imageIndex + 1),
+                ],
+                outputRange: [8, 16, 8],
+                extrapolate: 'clamp',
+              });
+              return (
+                <Animated.View
+                  key={imageIndex}
+                  style={[styles.normalDot, {width}]}
+                />
+              );
+            })}
+          </View>
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  scrollContainer: {
+    height: 300,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  card: {
+    flex: 1,
+    marginVertical: 4,
+    marginHorizontal: 16,
+    borderRadius: 5,
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  textContainer: {
+    backgroundColor: 'rgba(0,0,0, 0.7)',
+    paddingHorizontal: 24,
+    paddingVertical: 8,
+    borderRadius: 5,
+  },
+  infoText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  normalDot: {
+    height: 8,
+    width: 8,
+    borderRadius: 4,
+    backgroundColor: 'silver',
+    marginHorizontal: 4,
+  },
+  indicatorContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default App;
+```
+
+When using `PanResponder`, you could use the following code to extract the x and y positions from `gestureState.dx` and `gestureState.dy`. We use a `null` in the first position of the array, as we are only interested in the second argument passed to the `PanResponder` handler, which is the `gestureState`.
+
+```tsx
+onPanResponderMove={Animated.event(
+  [null, // ignore the native event
+  // extract dx and dy from gestureState
+  // like 'pan.x = gestureState.dx, pan.y = gestureState.dy'
+  {dx: pan.x, dy: pan.y}
+])}
+```
+
+#### PanResponder with Animated Event Example
+
+```SnackPlayer name=Animated
+import {useRef} from 'react';
+import {Animated, View, StyleSheet, PanResponder, Text} from 'react-native';
+
+const App = () => {
+  const pan = useRef(new Animated.ValueXY()).current;
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
+      onPanResponderRelease: () => {
+        Animated.spring(pan, {
+          toValue: {x: 0, y: 0},
+          useNativeDriver: true,
+        }).start();
+      },
+    }),
+  ).current;
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.titleText}>Drag & Release this box!</Text>
+      <Animated.View
+        style={{
+          transform: [{translateX: pan.x}, {translateY: pan.y}],
+        }}
+        {...panResponder.panHandlers}>
+        <View style={styles.box} />
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  titleText: {
+    fontSize: 14,
+    lineHeight: 24,
+    fontWeight: 'bold',
+  },
+  box: {
+    height: 150,
+    width: 150,
+    backgroundColor: 'blue',
+    borderRadius: 5,
+  },
+});
+
+export default App;
+```
+
+### Responding to the current animation value
+
+You may notice that there is no clear way to read the current value while animating. This is because the value may only be known in the native runtime due to optimizations. If you need to run JavaScript in response to the current value, there are two approaches:
+
+- `spring.stopAnimation(callback)` will stop the animation and invoke `callback` with the final value. This is useful when making gesture transitions.
+- `spring.addListener(callback)` will invoke `callback` asynchronously while the animation is running, providing a recent value. This is useful for triggering state changes, for example snapping a bobble to a new option as the user drags it closer, because these larger state changes are less sensitive to a few frames of lag compared to continuous gestures like panning which need to run at 60 fps.
+
+`Animated` is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Check out `Animated.Value.addListener` as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.
+
+### Using the native driver
+
+The `Animated` API is designed to be serializable. By using the [native driver](/blog/2017/02/14/using-native-driver-for-animated), we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.
+
+Using the native driver for normal animations can be accomplished by setting `useNativeDriver: true` in animation config when starting it. Animations without a `useNativeDriver` property will default to false for legacy reasons, but emit a warning (and typechecking error in TypeScript).
+
+```tsx
+Animated.timing(this.state.animatedValue, {
+  toValue: 1,
+  duration: 500,
+  useNativeDriver: true, // <-- Set this to true
+}).start();
+```
+
+Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
+
+The native driver also works with `Animated.event`. This is especially useful for animations that follow the scroll position as without the native driver, the animation will always run a frame behind the gesture due to the async nature of React Native.
+
+```tsx
+<Animated.ScrollView // <-- Use the Animated ScrollView wrapper
+  onScroll={Animated.event(
+    [
+      {
+        nativeEvent: {
+          contentOffset: {y: this.state.animatedValue},
+        },
+      },
+    ],
+    {useNativeDriver: true}, // <-- Set this to true
+  )}>
+  {content}
+</Animated.ScrollView>
+```
+
+You can see the native driver in action by running the [RNTester app](https://github.com/facebook/react-native/blob/main/packages/rn-tester/), then loading the Native Animated Example. You can also take a look at the [source code](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js) to learn how these examples were produced.
+
+#### Caveats
+
+Not everything you can do with `Animated` is currently supported by the native driver. The main limitation is that you can only animate non-layout properties: things like `transform` and `opacity` will work, but Flexbox and position properties will not. When using `Animated.event`, it will only work with direct events and not bubbling events. This means it does not work with `PanResponder` but does work with things like `ScrollView#onScroll`.
+
+When an animation is running, it can prevent `VirtualizedList` components from rendering more rows. If you need to run a long or looping animation while the user is scrolling through a list, you can use `isInteraction: false` in your animation's config to prevent this issue.
+
+### Bear in mind
+
+While using transform styles such as `rotateY`, `rotateX`, and others ensure the transform style `perspective` is in place. At this time some animations may not render on Android without it. Example below.
+
+```tsx
+<Animated.View
+  style={{
+    transform: [
+      {scale: this.state.scale},
+      {rotateY: this.state.rotateY},
+      {perspective: 1000}, // without this line this Animation will not render on Android while working fine on iOS
+    ],
+  }}
+/>
+```
+
+### Additional examples
+
+The RNTester app has various examples of `Animated` in use:
+
+- [AnimatedGratuitousApp](https://github.com/facebook/react-native/tree/main/packages/rn-tester/js/examples/AnimatedGratuitousApp)
+- [NativeAnimationsExample](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js)
+
+## `LayoutAnimation` API
+
+`LayoutAnimation` allows you to globally configure `create` and `update` animations that will be used for all views in the next render/layout cycle. This is useful for doing Flexbox layout updates without bothering to measure or calculate specific properties in order to animate them directly, and is especially useful when layout changes may affect ancestors, for example a "see more" expansion that also increases the size of the parent and pushes down the row below which would otherwise require explicit coordination between the components in order to animate them all in sync.
+
+Note that although `LayoutAnimation` is very powerful and can be quite useful, it provides much less control than `Animated` and other animation libraries, so you may need to use another approach if you can't get `LayoutAnimation` to do what you want.
+
+Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`:
+
+```tsx
+UIManager.setLayoutAnimationEnabledExperimental(true);
+```
+
+```SnackPlayer name=LayoutAnimations
+import {useState} from 'react';
+import {
+  NativeModules,
+  LayoutAnimation,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  View,
+} from 'react-native';
+
+const {UIManager} = NativeModules;
+
+UIManager.setLayoutAnimationEnabledExperimental &&
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+
+export default function App() {
+  const [state, setState] = useState({
+    w: 100,
+    h: 100,
+  });
+
+  const onPress = () => {
+    // Animate the update
+    LayoutAnimation.spring();
+    setState({w: state.w + 15, h: state.h + 15});
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={[styles.box, {width: state.w, height: state.h}]} />
+      <TouchableOpacity onPress={onPress}>
+        <View style={styles.button}>
+          <Text style={styles.buttonText}>Press me!</Text>
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  box: {
+    width: 200,
+    height: 200,
+    backgroundColor: 'red',
+  },
+  button: {
+    backgroundColor: 'black',
+    paddingHorizontal: 20,
+    paddingVertical: 15,
+    marginTop: 15,
+  },
+  buttonText: {
+    color: '#fff',
+    fontWeight: 'bold',
+  },
+});
+```
+
+This example uses a preset value, you can customize the animations as you need, see [LayoutAnimation.js](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/LayoutAnimation/LayoutAnimation.js) for more information.
+
+## Additional notes
+
+### `requestAnimationFrame`
+
+`requestAnimationFrame` is a polyfill from the browser that you might be familiar with. It accepts a function as its only argument and calls that function before the next repaint. It is an essential building block for animations that underlies all of the JavaScript-based animation APIs. In general, you shouldn't need to call this yourself - the animation APIs will manage frame updates for you.
+
+### `setNativeProps`
+
+As mentioned [in the Direct Manipulation section](legacy/direct-manipulation), `setNativeProps` allows us to modify properties of native-backed components (components that are actually backed by native views, unlike composite components) directly, without having to `setState` and re-render the component hierarchy.
+
+We could use this in the Rebound example to update the scale - this might be helpful if the component that we are updating is deeply nested and hasn't been optimized with `shouldComponentUpdate`.
+
+If you find your animations with dropping frames (performing below 60 frames per second), look into using `setNativeProps` or `shouldComponentUpdate` to optimize them. Or you could run the animations on the UI thread rather than the JavaScript thread [with the useNativeDriver option](/blog/2017/02/14/using-native-driver-for-animated). You may also want to defer any computationally intensive work until after animations are complete, using the [InteractionManager](interactionmanager). You can monitor the frame rate by using the In-App Dev Menu "FPS Monitor" tool.
diff --git a/website/versioned_docs/version-0.85/appstate.md b/website/versioned_docs/version-0.85/appstate.md
index b776907d3e1..4980ef439da 100644
--- a/website/versioned_docs/version-0.85/appstate.md
+++ b/website/versioned_docs/version-0.85/appstate.md
@@ -1,122 +1,122 @@
----
-id: appstate
-title: AppState
----
-
-`AppState` can tell you if the app is in the foreground or background, and notify you when the state changes.
-
-AppState is frequently used to determine the intent and proper behavior when handling push notifications.
-
-### App States
-
-- `active` - The app is running in the foreground
-- `background` - The app is running in the background. The user is either:
-  - in another app
-  - on the home screen
-  - [Android] on another `Activity`, including temporary system activities such
-    as autofill credential pickers (even if launched by your app or the system)
-- [iOS] `inactive` - This is a state that occurs when transitioning between foreground & background, and during periods of inactivity such as entering the multitasking view, opening the Notification Center or in the event of an incoming call.
-
-For more information, see [Apple's documentation](https://developer.apple.com/documentation/uikit/app_and_scenes/managing_your_app_s_life_cycle)
-
-## Basic Usage
-
-To see the current state, you can check `AppState.currentState`, which will be kept up-to-date.
-
-:::info
-If you are using the legacy architecture, `currentState` will be `null` at launch until it is retrieved asynchronously from the native side.
-:::
-
-```SnackPlayer name=AppState%20Example
-import React, {useRef, useState, useEffect} from 'react';
-import {AppState, StyleSheet, Text} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const AppStateExample = () => {
-  const appState = useRef(AppState.currentState);
-  const [appStateVisible, setAppStateVisible] = useState(appState.current);
-
-  useEffect(() => {
-    const subscription = AppState.addEventListener('change', nextAppState => {
-      if (
-        appState.current.match(/inactive|background/) &&
-        nextAppState === 'active'
-      ) {
-        console.log('App has come to the foreground!');
-      }
-
-      appState.current = nextAppState;
-      setAppStateVisible(appState.current);
-      console.log('AppState', appState.current);
-    });
-
-    return () => {
-      subscription.remove();
-    };
-  }, []);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>Current state is: {appStateVisible}</Text>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default AppStateExample;
-```
-
-This example will only ever appear to say "Current state is: active" because the app is only visible to the user when in the `active` state. If you want to experiment with the code we recommend to use your own device instead of embedded preview.
-
----
-
-# Reference
-
-## Events
-
-### `change`
-
-This event is received when the app state has changed. The listener is called with one of [the current app state values](appstate#app-states).
-
-### `memoryWarning` <div className="label ios">iOS</div>
-
-Fires when the app receives a memory warning from the operating system.
-
-### `focus` <div className="label android">Android</div>
-
-Received when the app gains focus (the user is interacting with the app).
-
-### `blur` <div className="label android">Android</div>
-
-Received when the user is not actively interacting with the app. Useful in situations when the user pulls down the [notification drawer](https://developer.android.com/guide/topics/ui/notifiers/notifications#bar-and-drawer). `AppState` won't change but the `blur` event will get fired.
-
-## Methods
-
-### `addEventListener()`
-
-```tsx
-static addEventListener(
-  type: AppStateEvent,
-  listener: (state: AppStateStatus) => void,
-): NativeEventSubscription;
-```
-
-Sets up a function that will be called whenever the specified event type on AppState occurs. Valid values for `eventType` are
-[listed above](#events). Returns the `EventSubscription`.
-
-## Properties
-
-### `currentState`
-
-```tsx
-static currentState: AppStateStatus;
-```
+---
+id: appstate
+title: AppState
+---
+
+`AppState` can tell you if the app is in the foreground or background, and notify you when the state changes.
+
+AppState is frequently used to determine the intent and proper behavior when handling push notifications.
+
+### App States
+
+- `active` - The app is running in the foreground
+- `background` - The app is running in the background. The user is either:
+  - in another app
+  - on the home screen
+  - [Android] on another `Activity`, including temporary system activities such
+    as autofill credential pickers (even if launched by your app or the system)
+- [iOS] `inactive` - This is a state that occurs when transitioning between foreground & background, and during periods of inactivity such as entering the multitasking view, opening the Notification Center or in the event of an incoming call.
+
+For more information, see [Apple's documentation](https://developer.apple.com/documentation/uikit/app_and_scenes/managing_your_app_s_life_cycle)
+
+## Basic Usage
+
+To see the current state, you can check `AppState.currentState`, which will be kept up-to-date.
+
+:::info
+If you are using the legacy architecture, `currentState` will be `null` at launch until it is retrieved asynchronously from the native side.
+:::
+
+```SnackPlayer name=AppState%20Example
+import {useRef, useState, useEffect} from 'react';
+import {AppState, StyleSheet, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const AppStateExample = () => {
+  const appState = useRef(AppState.currentState);
+  const [appStateVisible, setAppStateVisible] = useState(appState.current);
+
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', nextAppState => {
+      if (
+        appState.current.match(/inactive|background/) &&
+        nextAppState === 'active'
+      ) {
+        console.log('App has come to the foreground!');
+      }
+
+      appState.current = nextAppState;
+      setAppStateVisible(appState.current);
+      console.log('AppState', appState.current);
+    });
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>Current state is: {appStateVisible}</Text>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default AppStateExample;
+```
+
+This example will only ever appear to say "Current state is: active" because the app is only visible to the user when in the `active` state. If you want to experiment with the code we recommend to use your own device instead of embedded preview.
+
+---
+
+# Reference
+
+## Events
+
+### `change`
+
+This event is received when the app state has changed. The listener is called with one of [the current app state values](appstate#app-states).
+
+### `memoryWarning` <div className="label ios">iOS</div>
+
+Fires when the app receives a memory warning from the operating system.
+
+### `focus` <div className="label android">Android</div>
+
+Received when the app gains focus (the user is interacting with the app).
+
+### `blur` <div className="label android">Android</div>
+
+Received when the user is not actively interacting with the app. Useful in situations when the user pulls down the [notification drawer](https://developer.android.com/guide/topics/ui/notifiers/notifications#bar-and-drawer). `AppState` won't change but the `blur` event will get fired.
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+  type: AppStateEvent,
+  listener: (state: AppStateStatus) => void,
+): NativeEventSubscription;
+```
+
+Sets up a function that will be called whenever the specified event type on AppState occurs. Valid values for `eventType` are
+[listed above](#events). Returns the `EventSubscription`.
+
+## Properties
+
+### `currentState`
+
+```tsx
+static currentState: AppStateStatus;
+```
diff --git a/website/versioned_docs/version-0.85/backhandler.md b/website/versioned_docs/version-0.85/backhandler.md
index f020f3fc7a5..c07a4c5d029 100644
--- a/website/versioned_docs/version-0.85/backhandler.md
+++ b/website/versioned_docs/version-0.85/backhandler.md
@@ -1,136 +1,136 @@
----
-id: backhandler
-title: BackHandler
----
-
-The Backhandler API detects hardware button presses for back navigation, lets you register event listeners for the system's back action, and lets you control how your application responds. It is Android-only.
-
-The event subscriptions are called in reverse order (i.e. the last registered subscription is called first).
-
-- **If one subscription returns true,** then subscriptions registered earlier will not be called.
-- **If no subscription returns true or none are registered,** it programmatically invokes the default back button functionality to exit the app.
-
-:::warning[Warning for modal users]
-If your app shows an opened `Modal`, `BackHandler` will not publish any events ([see `Modal` docs](modal#onrequestclose)).
-:::
-
-## Pattern
-
-```tsx
-const subscription = BackHandler.addEventListener(
-  'hardwareBackPress',
-  function () {
-    /**
-     * this.onMainScreen and this.goBack are just examples,
-     * you need to use your own implementation here.
-     *
-     * Typically you would use the navigator here to go to the last state.
-     */
-
-    if (!this.onMainScreen()) {
-      this.goBack();
-      /**
-       * When true is returned the event will not be bubbled up
-       * & no other back action will execute
-       */
-      return true;
-    }
-    /**
-     * Returning false will let the event to bubble up & let other event listeners
-     * or the system's default back action to be executed.
-     */
-    return false;
-  },
-);
-
-// Unsubscribe the listener on unmount
-subscription.remove();
-```
-
-## Example
-
-The following example implements a scenario where you confirm if the user wants to exit the app:
-
-```SnackPlayer name=BackHandler&supportedPlatforms=android
-import React, {useEffect} from 'react';
-import {Text, StyleSheet, BackHandler, Alert} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  useEffect(() => {
-    const backAction = () => {
-      Alert.alert('Hold on!', 'Are you sure you want to go back?', [
-        {
-          text: 'Cancel',
-          onPress: () => null,
-          style: 'cancel',
-        },
-        {text: 'YES', onPress: () => BackHandler.exitApp()},
-      ]);
-      return true;
-    };
-
-    const backHandler = BackHandler.addEventListener(
-      'hardwareBackPress',
-      backAction,
-    );
-
-    return () => backHandler.remove();
-  }, []);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.text}>Click Back button!</Text>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  text: {
-    fontSize: 18,
-    fontWeight: 'bold',
-  },
-});
-
-export default App;
-```
-
-`BackHandler.addEventListener` creates an event listener & returns a `NativeEventSubscription` object which should be cleared using `NativeEventSubscription.remove` method.
-
-## Usage with React Navigation
-
-If you are using React Navigation to navigate across different screens, you can follow their guide on [Custom Android back button behaviour](https://reactnavigation.org/docs/custom-android-back-button-handling/)
-
-## Backhandler hook
-
-[React Native Hooks](https://github.com/react-native-community/hooks#usebackhandler) has a nice `useBackHandler` hook which will simplify the process of setting up event listeners.
-
----
-
-# Reference
-
-## Methods
-
-### `addEventListener()`
-
-```tsx
-static addEventListener(
-  eventName: BackPressEventName,
-  handler: () => boolean | null | undefined,
-): NativeEventSubscription;
-```
-
----
-
-### `exitApp()`
-
-```tsx
-static exitApp();
-```
+---
+id: backhandler
+title: BackHandler
+---
+
+The Backhandler API detects hardware button presses for back navigation, lets you register event listeners for the system's back action, and lets you control how your application responds. It is Android-only.
+
+The event subscriptions are called in reverse order (i.e. the last registered subscription is called first).
+
+- **If one subscription returns true,** then subscriptions registered earlier will not be called.
+- **If no subscription returns true or none are registered,** it programmatically invokes the default back button functionality to exit the app.
+
+:::warning[Warning for modal users]
+If your app shows an opened `Modal`, `BackHandler` will not publish any events ([see `Modal` docs](modal#onrequestclose)).
+:::
+
+## Pattern
+
+```tsx
+const subscription = BackHandler.addEventListener(
+  'hardwareBackPress',
+  function () {
+    /**
+     * this.onMainScreen and this.goBack are just examples,
+     * you need to use your own implementation here.
+     *
+     * Typically you would use the navigator here to go to the last state.
+     */
+
+    if (!this.onMainScreen()) {
+      this.goBack();
+      /**
+       * When true is returned the event will not be bubbled up
+       * & no other back action will execute
+       */
+      return true;
+    }
+    /**
+     * Returning false will let the event to bubble up & let other event listeners
+     * or the system's default back action to be executed.
+     */
+    return false;
+  },
+);
+
+// Unsubscribe the listener on unmount
+subscription.remove();
+```
+
+## Example
+
+The following example implements a scenario where you confirm if the user wants to exit the app:
+
+```SnackPlayer name=BackHandler&supportedPlatforms=android
+import {useEffect} from 'react';
+import {Text, StyleSheet, BackHandler, Alert} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  useEffect(() => {
+    const backAction = () => {
+      Alert.alert('Hold on!', 'Are you sure you want to go back?', [
+        {
+          text: 'Cancel',
+          onPress: () => null,
+          style: 'cancel',
+        },
+        {text: 'YES', onPress: () => BackHandler.exitApp()},
+      ]);
+      return true;
+    };
+
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      backAction,
+    );
+
+    return () => backHandler.remove();
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.text}>Click Back button!</Text>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+});
+
+export default App;
+```
+
+`BackHandler.addEventListener` creates an event listener & returns a `NativeEventSubscription` object which should be cleared using `NativeEventSubscription.remove` method.
+
+## Usage with React Navigation
+
+If you are using React Navigation to navigate across different screens, you can follow their guide on [Custom Android back button behaviour](https://reactnavigation.org/docs/custom-android-back-button-handling/)
+
+## Backhandler hook
+
+[React Native Hooks](https://github.com/react-native-community/hooks#usebackhandler) has a nice `useBackHandler` hook which will simplify the process of setting up event listeners.
+
+---
+
+# Reference
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+  eventName: BackPressEventName,
+  handler: () => boolean | null | undefined,
+): NativeEventSubscription;
+```
+
+---
+
+### `exitApp()`
+
+```tsx
+static exitApp();
+```
diff --git a/website/versioned_docs/version-0.85/button.md b/website/versioned_docs/version-0.85/button.md
index 9fc529fc863..23501057f52 100644
--- a/website/versioned_docs/version-0.85/button.md
+++ b/website/versioned_docs/version-0.85/button.md
@@ -19,7 +19,6 @@ If this button doesn't look right for your app, you can build your own button us
 ## Example
 
 ```SnackPlayer name=Button%20Example&ext=js
-import React from 'react';
 import {StyleSheet, Button, View, Text, Alert, Platform} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.85/communication-android.md b/website/versioned_docs/version-0.85/communication-android.md
index f78dc84cf65..35aab358818 100644
--- a/website/versioned_docs/version-0.85/communication-android.md
+++ b/website/versioned_docs/version-0.85/communication-android.md
@@ -67,7 +67,6 @@ class MainActivity : ReactActivity() {
 </Tabs>
 
 ```tsx
-import React from 'react';
 import {View, Image} from 'react-native';
 
 export default class ImageBrowserApp extends React.Component {
diff --git a/website/versioned_docs/version-0.85/communication-ios.md b/website/versioned_docs/version-0.85/communication-ios.md
index f82cae7e620..89a64ff9b4c 100644
--- a/website/versioned_docs/version-0.85/communication-ios.md
+++ b/website/versioned_docs/version-0.85/communication-ios.md
@@ -33,7 +33,6 @@ RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
 ```
 
 ```tsx
-import React from 'react';
 import {View, Image} from 'react-native';
 
 export default class ImageBrowserApp extends React.Component {
diff --git a/website/versioned_docs/version-0.85/dimensions.md b/website/versioned_docs/version-0.85/dimensions.md
index 9ebb8561739..eb3673eca5b 100644
--- a/website/versioned_docs/version-0.85/dimensions.md
+++ b/website/versioned_docs/version-0.85/dimensions.md
@@ -1,154 +1,154 @@
----
-id: dimensions
-title: Dimensions
----
-
-:::info
-[`useWindowDimensions`](usewindowdimensions) is the preferred API for React components. Unlike `Dimensions`, it updates as the window's dimensions update. This works nicely with the React paradigm.
-:::
-
-```tsx
-import {Dimensions} from 'react-native';
-```
-
-You can get the application window's width and height using the following code:
-
-```tsx
-const windowWidth = Dimensions.get('window').width;
-const windowHeight = Dimensions.get('window').height;
-```
-
-:::note
-Although dimensions are available immediately, they may change (e.g due to device rotation, foldable devices etc) so any rendering logic or styles that depend on these constants should try to call this function on every render, rather than caching the value (for example, using inline styles rather than setting a value in a `StyleSheet`).
-:::
-
-If you are targeting foldable devices or devices which can change the screen size or app window size, you can use the event listener available in the Dimensions module as shown in the below example.
-
-## Example
-
-```SnackPlayer name=Dimensions%20Example
-import React, {useState, useEffect} from 'react';
-import {StyleSheet, Text, Dimensions} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const windowDimensions = Dimensions.get('window');
-const screenDimensions = Dimensions.get('screen');
-
-const App = () => {
-  const [dimensions, setDimensions] = useState({
-    window: windowDimensions,
-    screen: screenDimensions,
-  });
-
-  useEffect(() => {
-    const subscription = Dimensions.addEventListener(
-      'change',
-      ({window, screen}) => {
-        setDimensions({window, screen});
-      },
-    );
-    return () => subscription?.remove();
-  });
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.header}>Window Dimensions</Text>
-        {Object.entries(dimensions.window).map(([key, value]) => (
-          <Text>
-            {key} - {value}
-          </Text>
-        ))}
-        <Text style={styles.header}>Screen Dimensions</Text>
-        {Object.entries(dimensions.screen).map(([key, value]) => (
-          <Text>
-            {key} - {value}
-          </Text>
-        ))}
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  header: {
-    fontSize: 16,
-    marginVertical: 10,
-  },
-});
-
-export default App;
-```
-
-# Reference
-
-## Methods
-
-### `addEventListener()`
-
-```tsx
-static addEventListener(
-  type: 'change',
-  handler: ({
-    window,
-    screen,
-  }: DimensionsValue) => void,
-): EmitterSubscription;
-```
-
-Add an event handler. Supported events:
-
-- `change`: Fires when a property within the `Dimensions` object changes. The argument to the event handler is a [`DimensionsValue`](#dimensionsvalue) type object.
-
----
-
-### `get()`
-
-```tsx
-static get(dim: 'window' | 'screen'): ScaledSize;
-```
-
-Initial dimensions are set before `runApplication` is called so they should be available before any other require's are run, but may be updated later.
-
-Example: `const {height, width} = Dimensions.get('window');`
-
-**Parameters:**
-
-| Name                                                               | Type   | Description                                                                       |
-| ------------------------------------------------------------------ | ------ | --------------------------------------------------------------------------------- |
-| dim <div className="label basic required two-lines">Required</div> | string | Name of dimension as defined when calling `set`. Returns value for the dimension. |
-
-:::note
-For Android the `window` dimension will be reduced by the size of status bar (if not translucent) and bottom navigation bar.
-:::
-
-## Type Definitions
-
-### DimensionsValue
-
-**Properties:**
-
-| Name   | Type                                | Description                             |
-| ------ | ----------------------------------- | --------------------------------------- |
-| window | [ScaledSize](dimensions#scaledsize) | Size of the visible Application window. |
-| screen | [ScaledSize](dimensions#scaledsize) | Size of the device's screen.            |
-
-### ScaledSize
-
-| Type   |
-| ------ |
-| object |
-
-**Properties:**
-
-| Name      | Type   |
-| --------- | ------ |
-| width     | number |
-| height    | number |
-| scale     | number |
-| fontScale | number |
+---
+id: dimensions
+title: Dimensions
+---
+
+:::info
+[`useWindowDimensions`](usewindowdimensions) is the preferred API for React components. Unlike `Dimensions`, it updates as the window's dimensions update. This works nicely with the React paradigm.
+:::
+
+```tsx
+import {Dimensions} from 'react-native';
+```
+
+You can get the application window's width and height using the following code:
+
+```tsx
+const windowWidth = Dimensions.get('window').width;
+const windowHeight = Dimensions.get('window').height;
+```
+
+:::note
+Although dimensions are available immediately, they may change (e.g due to device rotation, foldable devices etc) so any rendering logic or styles that depend on these constants should try to call this function on every render, rather than caching the value (for example, using inline styles rather than setting a value in a `StyleSheet`).
+:::
+
+If you are targeting foldable devices or devices which can change the screen size or app window size, you can use the event listener available in the Dimensions module as shown in the below example.
+
+## Example
+
+```SnackPlayer name=Dimensions%20Example
+import {useState, useEffect} from 'react';
+import {StyleSheet, Text, Dimensions} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const windowDimensions = Dimensions.get('window');
+const screenDimensions = Dimensions.get('screen');
+
+const App = () => {
+  const [dimensions, setDimensions] = useState({
+    window: windowDimensions,
+    screen: screenDimensions,
+  });
+
+  useEffect(() => {
+    const subscription = Dimensions.addEventListener(
+      'change',
+      ({window, screen}) => {
+        setDimensions({window, screen});
+      },
+    );
+    return () => subscription?.remove();
+  });
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.header}>Window Dimensions</Text>
+        {Object.entries(dimensions.window).map(([key, value]) => (
+          <Text>
+            {key} - {value}
+          </Text>
+        ))}
+        <Text style={styles.header}>Screen Dimensions</Text>
+        {Object.entries(dimensions.screen).map(([key, value]) => (
+          <Text>
+            {key} - {value}
+          </Text>
+        ))}
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  header: {
+    fontSize: 16,
+    marginVertical: 10,
+  },
+});
+
+export default App;
+```
+
+# Reference
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+  type: 'change',
+  handler: ({
+    window,
+    screen,
+  }: DimensionsValue) => void,
+): EmitterSubscription;
+```
+
+Add an event handler. Supported events:
+
+- `change`: Fires when a property within the `Dimensions` object changes. The argument to the event handler is a [`DimensionsValue`](#dimensionsvalue) type object.
+
+---
+
+### `get()`
+
+```tsx
+static get(dim: 'window' | 'screen'): ScaledSize;
+```
+
+Initial dimensions are set before `runApplication` is called so they should be available before any other require's are run, but may be updated later.
+
+Example: `const {height, width} = Dimensions.get('window');`
+
+**Parameters:**
+
+| Name                                                               | Type   | Description                                                                       |
+| ------------------------------------------------------------------ | ------ | --------------------------------------------------------------------------------- |
+| dim <div className="label basic required two-lines">Required</div> | string | Name of dimension as defined when calling `set`. Returns value for the dimension. |
+
+:::note
+For Android the `window` dimension will be reduced by the size of status bar (if not translucent) and bottom navigation bar.
+:::
+
+## Type Definitions
+
+### DimensionsValue
+
+**Properties:**
+
+| Name   | Type                                | Description                             |
+| ------ | ----------------------------------- | --------------------------------------- |
+| window | [ScaledSize](dimensions#scaledsize) | Size of the visible Application window. |
+| screen | [ScaledSize](dimensions#scaledsize) | Size of the device's screen.            |
+
+### ScaledSize
+
+| Type   |
+| ------ |
+| object |
+
+**Properties:**
+
+| Name      | Type   |
+| --------- | ------ |
+| width     | number |
+| height    | number |
+| scale     | number |
+| fontScale | number |
diff --git a/website/versioned_docs/version-0.85/document-nodes.md b/website/versioned_docs/version-0.85/document-nodes.md
index 978ef87a1f8..6c6ab4a7452 100644
--- a/website/versioned_docs/version-0.85/document-nodes.md
+++ b/website/versioned_docs/version-0.85/document-nodes.md
@@ -1,75 +1,75 @@
----
-id: document-nodes
-title: Document nodes
----
-
-Document nodes represent a complete native view tree. Apps using native navigation would provide a separate document node for each screen. Apps not using native navigation would generally provide a single document for the whole app (similar to single-page apps on Web).
-
-```SnackPlayer ext=js&name=Document%20instance%20example
-import * as React from 'react';
-import {Text, TextInput, View} from 'react-native';
-
-function MyComponent(props) {
-  return (
-    <View ref={props.ref}>
-      <Text>Start typing below</Text>
-      <TextInput id="main-text-input" />
-    </View>
-  )
-}
-
-export default function AccessingDocument() {
-  const ref = React.useRef(null);
-
-  React.useEffect(() => {
-    // Get the main text input in the screen and focus it after initial load.
-    const element = ref.current;
-    const doc = element.ownerDocument;
-    const textInput = doc.getElementById('main-text-input');
-    textInput?.focus();
-  }, []);
-
-  return (
-    <MyComponent ref={ref} />
-  );
-}
-```
-
----
-
-## Reference
-
-### Web-compatible API
-
-From [`Document`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement):
-
-- Properties
-  - [`childElementCount`](https://developer.mozilla.org/en-US/docs/Web/API/Document/childElementCount)
-  - [`children`](https://developer.mozilla.org/en-US/docs/Web/API/Document/children)
-  - [`documentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/documentElement)
-  - [`firstElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Document/firstElementChild)
-  - [`lastElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Document/lastElementChild)
-- Methods
-  - [`getElementById()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)
-
-From [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/Node):
-
-- Properties
-  - [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)
-  - [`firstChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild)
-  - [`isConnected`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected)
-  - [`lastChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild)
-  - [`nextSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling)
-  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
-  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
-  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
-  - [`ownerDocument`](https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument)
-  - [`parentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)
-  - [`parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)
-  - [`previousSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling)
-  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
-- Methods
-  - [`compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
-  - [`contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains)
-  - [`getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)
-  - [`hasChildNodes()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes)
+---
+id: document-nodes
+title: Document nodes
+---
+
+Document nodes represent a complete native view tree. Apps using native navigation would provide a separate document node for each screen. Apps not using native navigation would generally provide a single document for the whole app (similar to single-page apps on Web).
+
+```SnackPlayer ext=js&name=Document%20instance%20example
+import {useEffect, useRef} from 'react';
+import {Text, TextInput, View} from 'react-native';
+
+function MyComponent(props) {
+  return (
+    <View ref={props.ref}>
+      <Text>Start typing below</Text>
+      <TextInput id="main-text-input" />
+    </View>
+  )
+}
+
+export default function AccessingDocument() {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    // Get the main text input in the screen and focus it after initial load.
+    const element = ref.current;
+    const doc = element.ownerDocument;
+    const textInput = doc.getElementById('main-text-input');
+    textInput?.focus();
+  }, []);
+
+  return (
+    <MyComponent ref={ref} />
+  );
+}
+```
+
+---
+
+## Reference
+
+### Web-compatible API
+
+From [`Document`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement):
+
+- Properties
+  - [`childElementCount`](https://developer.mozilla.org/en-US/docs/Web/API/Document/childElementCount)
+  - [`children`](https://developer.mozilla.org/en-US/docs/Web/API/Document/children)
+  - [`documentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/documentElement)
+  - [`firstElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Document/firstElementChild)
+  - [`lastElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Document/lastElementChild)
+- Methods
+  - [`getElementById()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)
+
+From [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/Node):
+
+- Properties
+  - [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)
+  - [`firstChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild)
+  - [`isConnected`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected)
+  - [`lastChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild)
+  - [`nextSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling)
+  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
+  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
+  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
+  - [`ownerDocument`](https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument)
+  - [`parentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)
+  - [`parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)
+  - [`previousSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling)
+  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
+- Methods
+  - [`compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
+  - [`contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains)
+  - [`getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)
+  - [`hasChildNodes()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes)
diff --git a/website/versioned_docs/version-0.85/drawerlayoutandroid.md b/website/versioned_docs/version-0.85/drawerlayoutandroid.md
index 3714318df5c..76b4c507c6a 100644
--- a/website/versioned_docs/version-0.85/drawerlayoutandroid.md
+++ b/website/versioned_docs/version-0.85/drawerlayoutandroid.md
@@ -1,323 +1,323 @@
----
-id: drawerlayoutandroid
-title: DrawerLayoutAndroid
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-React component that wraps the platform `DrawerLayout` (Android only). The Drawer (typically used for navigation) is rendered with `renderNavigationView` and direct children are the main view (where your content goes). The navigation view is initially not visible on the screen, but can be pulled in from the side of the window specified by the `drawerPosition` prop and its width can be set by the `drawerWidth` prop.
-
-## Example
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android&ext=js
-import React, {useRef, useState} from 'react';
-import {Button, DrawerLayoutAndroid, Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const drawer = useRef(null);
-  const [drawerPosition, setDrawerPosition] = useState('left');
-  const changeDrawerPosition = () => {
-    if (drawerPosition === 'left') {
-      setDrawerPosition('right');
-    } else {
-      setDrawerPosition('left');
-    }
-  };
-
-  const navigationView = () => (
-    <SafeAreaView style={[styles.container, styles.navigationContainer]}>
-      <Text style={styles.paragraph}>I'm in the Drawer!</Text>
-      <Button
-        title="Close drawer"
-        onPress={() => drawer.current.closeDrawer()}
-      />
-    </SafeAreaView>
-  );
-
-  return (
-    <SafeAreaProvider>
-      <DrawerLayoutAndroid
-        ref={drawer}
-        drawerWidth={300}
-        drawerPosition={drawerPosition}
-        renderNavigationView={navigationView}>
-        <SafeAreaView style={styles.container}>
-          <Text style={styles.paragraph}>Drawer on the {drawerPosition}!</Text>
-          <Button
-            title="Change Drawer Position"
-            onPress={() => changeDrawerPosition()}
-          />
-          <Text style={styles.paragraph}>
-            Swipe from the side or press button below to see it!
-          </Text>
-          <Button
-            title="Open drawer"
-            onPress={() => drawer.current.openDrawer()}
-          />
-        </SafeAreaView>
-      </DrawerLayoutAndroid>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingHorizontal: 16,
-  },
-  navigationContainer: {
-    backgroundColor: '#ecf0f1',
-  },
-  paragraph: {
-    padding: 16,
-    fontSize: 15,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android&ext=tsx
-import React, {useRef, useState} from 'react';
-import {
-  Button,
-  DrawerLayoutAndroid,
-  Text,
-  StyleSheet,
-  View,
-} from 'react-native';
-
-const App = () => {
-  const drawer = useRef<DrawerLayoutAndroid>(null);
-  const [drawerPosition, setDrawerPosition] = useState<'left' | 'right'>(
-    'left',
-  );
-  const changeDrawerPosition = () => {
-    if (drawerPosition === 'left') {
-      setDrawerPosition('right');
-    } else {
-      setDrawerPosition('left');
-    }
-  };
-
-  const navigationView = () => (
-    <View style={[styles.container, styles.navigationContainer]}>
-      <Text style={styles.paragraph}>I'm in the Drawer!</Text>
-      <Button
-        title="Close drawer"
-        onPress={() => drawer.current?.closeDrawer()}
-      />
-    </View>
-  );
-
-  return (
-    <DrawerLayoutAndroid
-      ref={drawer}
-      drawerWidth={300}
-      drawerPosition={drawerPosition}
-      renderNavigationView={navigationView}>
-      <View style={styles.container}>
-        <Text style={styles.paragraph}>Drawer on the {drawerPosition}!</Text>
-        <Button
-          title="Change Drawer Position"
-          onPress={() => changeDrawerPosition()}
-        />
-        <Text style={styles.paragraph}>
-          Swipe from the side or press button below to see it!
-        </Text>
-        <Button
-          title="Open drawer"
-          onPress={() => drawer.current?.openDrawer()}
-        />
-      </View>
-    </DrawerLayoutAndroid>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 16,
-  },
-  navigationContainer: {
-    backgroundColor: '#ecf0f1',
-  },
-  paragraph: {
-    padding: 16,
-    fontSize: 15,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
----
-
-# Reference
-
-## Props
-
-### [View Props](view.md#props)
-
-Inherits [View Props](view.md#props).
-
----
-
-### `drawerBackgroundColor`
-
-Specifies the background color of the drawer. The default value is `white`. If you want to set the opacity of the drawer, use rgba. Example:
-
-```tsx
-return (
-  <DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)" />
-);
-```
-
-| Type               | Required |
-| ------------------ | -------- |
-| [color](colors.md) | No       |
-
----
-
-### `drawerLockMode`
-
-Specifies the lock mode of the drawer. The drawer can be locked in 3 states:
-
-- unlocked (default), meaning that the drawer will respond (open/close) to touch gestures.
-- locked-closed, meaning that the drawer will stay closed and not respond to gestures.
-- locked-open, meaning that the drawer will stay opened and not respond to gestures. The drawer may still be opened and closed programmatically (`openDrawer`/`closeDrawer`).
-
-| Type                                             | Required |
-| ------------------------------------------------ | -------- |
-| enum('unlocked', 'locked-closed', 'locked-open') | No       |
-
----
-
-### `drawerPosition`
-
-Specifies the side of the screen from which the drawer will slide in. By default it is set to `left`.
-
-| Type                  | Required |
-| --------------------- | -------- |
-| enum('left', 'right') | No       |
-
----
-
-### `drawerWidth`
-
-Specifies the width of the drawer, more precisely the width of the view that be pulled in from the edge of the window.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `keyboardDismissMode`
-
-Determines whether the keyboard gets dismissed in response to a drag.
-
-- 'none' (the default), drags do not dismiss the keyboard.
-- 'on-drag', the keyboard is dismissed when a drag begins.
-
-| Type                    | Required |
-| ----------------------- | -------- |
-| enum('none', 'on-drag') | No       |
-
----
-
-### `onDrawerClose`
-
-Function called whenever the navigation view has been closed.
-
-| Type     | Required |
-| -------- | -------- |
-| function | No       |
-
----
-
-### `onDrawerOpen`
-
-Function called whenever the navigation view has been opened.
-
-| Type     | Required |
-| -------- | -------- |
-| function | No       |
-
----
-
-### `onDrawerSlide`
-
-Function called whenever there is an interaction with the navigation view.
-
-| Type     | Required |
-| -------- | -------- |
-| function | No       |
-
----
-
-### `onDrawerStateChanged`
-
-Function called when the drawer state has changed. The drawer can be in 3 states:
-
-- idle, meaning there is no interaction with the navigation view happening at the time
-- dragging, meaning there is currently an interaction with the navigation view
-- settling, meaning that there was an interaction with the navigation view, and the navigation view is now finishing its closing or opening animation
-
-| Type     | Required |
-| -------- | -------- |
-| function | No       |
-
----
-
-### `renderNavigationView`
-
-The navigation view that will be rendered to the side of the screen and can be pulled in.
-
-| Type     | Required |
-| -------- | -------- |
-| function | Yes      |
-
----
-
-### `statusBarBackgroundColor`
-
-Make the drawer take the entire screen and draw the background of the status bar to allow it to open over the status bar. It will only have an effect on API 21+.
-
-| Type               | Required |
-| ------------------ | -------- |
-| [color](colors.md) | No       |
-
-## Methods
-
-### `closeDrawer()`
-
-```tsx
-closeDrawer();
-```
-
-Closes the drawer.
-
----
-
-### `openDrawer()`
-
-```tsx
-openDrawer();
-```
-
-Opens the drawer.
+---
+id: drawerlayoutandroid
+title: DrawerLayoutAndroid
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+React component that wraps the platform `DrawerLayout` (Android only). The Drawer (typically used for navigation) is rendered with `renderNavigationView` and direct children are the main view (where your content goes). The navigation view is initially not visible on the screen, but can be pulled in from the side of the window specified by the `drawerPosition` prop and its width can be set by the `drawerWidth` prop.
+
+## Example
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android&ext=js
+import {useRef, useState} from 'react';
+import {Button, DrawerLayoutAndroid, Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const drawer = useRef(null);
+  const [drawerPosition, setDrawerPosition] = useState('left');
+  const changeDrawerPosition = () => {
+    if (drawerPosition === 'left') {
+      setDrawerPosition('right');
+    } else {
+      setDrawerPosition('left');
+    }
+  };
+
+  const navigationView = () => (
+    <SafeAreaView style={[styles.container, styles.navigationContainer]}>
+      <Text style={styles.paragraph}>I'm in the Drawer!</Text>
+      <Button
+        title="Close drawer"
+        onPress={() => drawer.current.closeDrawer()}
+      />
+    </SafeAreaView>
+  );
+
+  return (
+    <SafeAreaProvider>
+      <DrawerLayoutAndroid
+        ref={drawer}
+        drawerWidth={300}
+        drawerPosition={drawerPosition}
+        renderNavigationView={navigationView}>
+        <SafeAreaView style={styles.container}>
+          <Text style={styles.paragraph}>Drawer on the {drawerPosition}!</Text>
+          <Button
+            title="Change Drawer Position"
+            onPress={() => changeDrawerPosition()}
+          />
+          <Text style={styles.paragraph}>
+            Swipe from the side or press button below to see it!
+          </Text>
+          <Button
+            title="Open drawer"
+            onPress={() => drawer.current.openDrawer()}
+          />
+        </SafeAreaView>
+      </DrawerLayoutAndroid>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 16,
+  },
+  navigationContainer: {
+    backgroundColor: '#ecf0f1',
+  },
+  paragraph: {
+    padding: 16,
+    fontSize: 15,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android&ext=tsx
+import {useRef, useState} from 'react';
+import {
+  Button,
+  DrawerLayoutAndroid,
+  Text,
+  StyleSheet,
+  View,
+} from 'react-native';
+
+const App = () => {
+  const drawer = useRef<DrawerLayoutAndroid>(null);
+  const [drawerPosition, setDrawerPosition] = useState<'left' | 'right'>(
+    'left',
+  );
+  const changeDrawerPosition = () => {
+    if (drawerPosition === 'left') {
+      setDrawerPosition('right');
+    } else {
+      setDrawerPosition('left');
+    }
+  };
+
+  const navigationView = () => (
+    <View style={[styles.container, styles.navigationContainer]}>
+      <Text style={styles.paragraph}>I'm in the Drawer!</Text>
+      <Button
+        title="Close drawer"
+        onPress={() => drawer.current?.closeDrawer()}
+      />
+    </View>
+  );
+
+  return (
+    <DrawerLayoutAndroid
+      ref={drawer}
+      drawerWidth={300}
+      drawerPosition={drawerPosition}
+      renderNavigationView={navigationView}>
+      <View style={styles.container}>
+        <Text style={styles.paragraph}>Drawer on the {drawerPosition}!</Text>
+        <Button
+          title="Change Drawer Position"
+          onPress={() => changeDrawerPosition()}
+        />
+        <Text style={styles.paragraph}>
+          Swipe from the side or press button below to see it!
+        </Text>
+        <Button
+          title="Open drawer"
+          onPress={() => drawer.current?.openDrawer()}
+        />
+      </View>
+    </DrawerLayoutAndroid>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 16,
+  },
+  navigationContainer: {
+    backgroundColor: '#ecf0f1',
+  },
+  paragraph: {
+    padding: 16,
+    fontSize: 15,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+---
+
+# Reference
+
+## Props
+
+### [View Props](view.md#props)
+
+Inherits [View Props](view.md#props).
+
+---
+
+### `drawerBackgroundColor`
+
+Specifies the background color of the drawer. The default value is `white`. If you want to set the opacity of the drawer, use rgba. Example:
+
+```tsx
+return (
+  <DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)" />
+);
+```
+
+| Type               | Required |
+| ------------------ | -------- |
+| [color](colors.md) | No       |
+
+---
+
+### `drawerLockMode`
+
+Specifies the lock mode of the drawer. The drawer can be locked in 3 states:
+
+- unlocked (default), meaning that the drawer will respond (open/close) to touch gestures.
+- locked-closed, meaning that the drawer will stay closed and not respond to gestures.
+- locked-open, meaning that the drawer will stay opened and not respond to gestures. The drawer may still be opened and closed programmatically (`openDrawer`/`closeDrawer`).
+
+| Type                                             | Required |
+| ------------------------------------------------ | -------- |
+| enum('unlocked', 'locked-closed', 'locked-open') | No       |
+
+---
+
+### `drawerPosition`
+
+Specifies the side of the screen from which the drawer will slide in. By default it is set to `left`.
+
+| Type                  | Required |
+| --------------------- | -------- |
+| enum('left', 'right') | No       |
+
+---
+
+### `drawerWidth`
+
+Specifies the width of the drawer, more precisely the width of the view that be pulled in from the edge of the window.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `keyboardDismissMode`
+
+Determines whether the keyboard gets dismissed in response to a drag.
+
+- 'none' (the default), drags do not dismiss the keyboard.
+- 'on-drag', the keyboard is dismissed when a drag begins.
+
+| Type                    | Required |
+| ----------------------- | -------- |
+| enum('none', 'on-drag') | No       |
+
+---
+
+### `onDrawerClose`
+
+Function called whenever the navigation view has been closed.
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `onDrawerOpen`
+
+Function called whenever the navigation view has been opened.
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `onDrawerSlide`
+
+Function called whenever there is an interaction with the navigation view.
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `onDrawerStateChanged`
+
+Function called when the drawer state has changed. The drawer can be in 3 states:
+
+- idle, meaning there is no interaction with the navigation view happening at the time
+- dragging, meaning there is currently an interaction with the navigation view
+- settling, meaning that there was an interaction with the navigation view, and the navigation view is now finishing its closing or opening animation
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `renderNavigationView`
+
+The navigation view that will be rendered to the side of the screen and can be pulled in.
+
+| Type     | Required |
+| -------- | -------- |
+| function | Yes      |
+
+---
+
+### `statusBarBackgroundColor`
+
+Make the drawer take the entire screen and draw the background of the status bar to allow it to open over the status bar. It will only have an effect on API 21+.
+
+| Type               | Required |
+| ------------------ | -------- |
+| [color](colors.md) | No       |
+
+## Methods
+
+### `closeDrawer()`
+
+```tsx
+closeDrawer();
+```
+
+Closes the drawer.
+
+---
+
+### `openDrawer()`
+
+```tsx
+openDrawer();
+```
+
+Opens the drawer.
diff --git a/website/versioned_docs/version-0.85/easing.md b/website/versioned_docs/version-0.85/easing.md
index bb31dd0e4fa..097da0dfc8a 100644
--- a/website/versioned_docs/version-0.85/easing.md
+++ b/website/versioned_docs/version-0.85/easing.md
@@ -1,568 +1,568 @@
----
-id: easing
-title: Easing
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-The `Easing` module implements common easing functions. This module is used by [`Animated.timing()`](animated.md#timing) to convey physically believable motion in animations.
-
-You can find a visualization of some common easing functions at https://easings.net/
-
-### Predefined animations
-
-The `Easing` module provides several predefined animations through the following methods:
-
-- [`back`](easing.md#back) provides a basic animation where the object goes slightly back before moving forward
-- [`bounce`](easing.md#bounce) provides a bouncing animation
-- [`ease`](easing.md#ease) provides a basic inertial animation
-- [`elastic`](easing.md#elastic) provides a basic spring interaction
-
-### Standard functions
-
-Three standard easing functions are provided:
-
-- [`linear`](easing.md#linear)
-- [`quad`](easing.md#quad)
-- [`cubic`](easing.md#cubic)
-
-The [`poly`](easing.md#poly) function can be used to implement quartic, quintic, and other higher power functions.
-
-### Additional functions
-
-Additional mathematical functions are provided by the following methods:
-
-- [`bezier`](easing.md#bezier) provides a cubic bezier curve
-- [`circle`](easing.md#circle) provides a circular function
-- [`sin`](easing.md#sin) provides a sinusoidal function
-- [`exp`](easing.md#exp) provides an exponential function
-
-The following helpers are used to modify other easing functions.
-
-- [`in`](easing.md#in) runs an easing function forwards
-- [`inOut`](easing.md#inout) makes any easing function symmetrical
-- [`out`](easing.md#out) runs an easing function backwards
-
-## Example
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Easing%20Demo&ext=js
-import React, {useRef} from 'react';
-import {
-  Animated,
-  Easing,
-  SectionList,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const opacity = useRef(new Animated.Value(0)).current;
-
-  const animate = easing => {
-    opacity.setValue(0);
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration: 1200,
-      easing,
-      useNativeDriver: false,
-    }).start();
-  };
-
-  const size = opacity.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 80],
-  });
-
-  const animatedStyles = [
-    styles.box,
-    {
-      opacity,
-      width: size,
-      height: size,
-    },
-  ];
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container} edges={['right', 'top', 'left']}>
-        <StatusBar hidden={true} />
-        <Text style={styles.title}>
-          Press rows below to preview the Easing!
-        </Text>
-        <View style={styles.boxContainer}>
-          <Animated.View style={animatedStyles} />
-        </View>
-        <SectionList
-          style={styles.list}
-          sections={SECTIONS}
-          keyExtractor={item => item.title}
-          renderItem={({item}) => (
-            <TouchableOpacity
-              onPress={() => animate(item.easing)}
-              style={styles.listRow}>
-              <Text>{item.title}</Text>
-            </TouchableOpacity>
-          )}
-          renderSectionHeader={({section: {title}}) => (
-            <Text style={styles.listHeader}>{title}</Text>
-          )}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const SECTIONS = [
-  {
-    title: 'Predefined animations',
-    data: [
-      {title: 'Bounce', easing: Easing.bounce},
-      {title: 'Ease', easing: Easing.ease},
-      {title: 'Elastic', easing: Easing.elastic(4)},
-    ],
-  },
-  {
-    title: 'Standard functions',
-    data: [
-      {title: 'Linear', easing: Easing.linear},
-      {title: 'Quad', easing: Easing.quad},
-      {title: 'Cubic', easing: Easing.cubic},
-    ],
-  },
-  {
-    title: 'Additional functions',
-    data: [
-      {
-        title: 'Bezier',
-        easing: Easing.bezier(0, 2, 1, -1),
-      },
-      {title: 'Circle', easing: Easing.circle},
-      {title: 'Sin', easing: Easing.sin},
-      {title: 'Exp', easing: Easing.exp},
-    ],
-  },
-  {
-    title: 'Combinations',
-    data: [
-      {
-        title: 'In + Bounce',
-        easing: Easing.in(Easing.bounce),
-      },
-      {
-        title: 'Out + Exp',
-        easing: Easing.out(Easing.exp),
-      },
-      {
-        title: 'InOut + Elastic',
-        easing: Easing.inOut(Easing.elastic(1)),
-      },
-    ],
-  },
-];
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#20232a',
-  },
-  title: {
-    marginTop: 10,
-    textAlign: 'center',
-    color: '#61dafb',
-  },
-  boxContainer: {
-    height: 160,
-    alignItems: 'center',
-  },
-  box: {
-    marginTop: 32,
-    borderRadius: 4,
-    backgroundColor: '#61dafb',
-  },
-  list: {
-    backgroundColor: '#fff',
-  },
-  listHeader: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    backgroundColor: '#f4f4f4',
-    color: '#999',
-    fontSize: 12,
-    textTransform: 'uppercase',
-  },
-  listRow: {
-    padding: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Easing%20Demo&ext=tsx
-import React, {useRef} from 'react';
-import {
-  Animated,
-  Easing,
-  SectionList,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-  type EasingFunction,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const opacity = useRef(new Animated.Value(0)).current;
-
-  const animate = (easing: EasingFunction) => {
-    opacity.setValue(0);
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration: 1200,
-      easing,
-      useNativeDriver: false,
-    }).start();
-  };
-
-  const size = opacity.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 80],
-  });
-
-  const animatedStyles = [
-    styles.box,
-    {
-      opacity,
-      width: size,
-      height: size,
-    },
-  ];
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container} edges={['right', 'top', 'left']}>
-        <StatusBar hidden={true} />
-        <Text style={styles.title}>
-          Press rows below to preview the Easing!
-        </Text>
-        <View style={styles.boxContainer}>
-          <Animated.View style={animatedStyles} />
-        </View>
-        <SectionList
-          style={styles.list}
-          sections={SECTIONS}
-          keyExtractor={item => item.title}
-          renderItem={({item}) => (
-            <TouchableOpacity
-              onPress={() => animate(item.easing)}
-              style={styles.listRow}>
-              <Text>{item.title}</Text>
-            </TouchableOpacity>
-          )}
-          renderSectionHeader={({section: {title}}) => (
-            <Text style={styles.listHeader}>{title}</Text>
-          )}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const SECTIONS = [
-  {
-    title: 'Predefined animations',
-    data: [
-      {title: 'Bounce', easing: Easing.bounce},
-      {title: 'Ease', easing: Easing.ease},
-      {title: 'Elastic', easing: Easing.elastic(4)},
-    ],
-  },
-  {
-    title: 'Standard functions',
-    data: [
-      {title: 'Linear', easing: Easing.linear},
-      {title: 'Quad', easing: Easing.quad},
-      {title: 'Cubic', easing: Easing.cubic},
-    ],
-  },
-  {
-    title: 'Additional functions',
-    data: [
-      {
-        title: 'Bezier',
-        easing: Easing.bezier(0, 2, 1, -1),
-      },
-      {title: 'Circle', easing: Easing.circle},
-      {title: 'Sin', easing: Easing.sin},
-      {title: 'Exp', easing: Easing.exp},
-    ],
-  },
-  {
-    title: 'Combinations',
-    data: [
-      {
-        title: 'In + Bounce',
-        easing: Easing.in(Easing.bounce),
-      },
-      {
-        title: 'Out + Exp',
-        easing: Easing.out(Easing.exp),
-      },
-      {
-        title: 'InOut + Elastic',
-        easing: Easing.inOut(Easing.elastic(1)),
-      },
-    ],
-  },
-];
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#20232a',
-  },
-  title: {
-    marginTop: 10,
-    textAlign: 'center',
-    color: '#61dafb',
-  },
-  boxContainer: {
-    height: 160,
-    alignItems: 'center',
-  },
-  box: {
-    marginTop: 32,
-    borderRadius: 4,
-    backgroundColor: '#61dafb',
-  },
-  list: {
-    backgroundColor: '#fff',
-  },
-  listHeader: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    backgroundColor: '#f4f4f4',
-    color: '#999',
-    fontSize: 12,
-    textTransform: 'uppercase',
-  },
-  listRow: {
-    padding: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
----
-
-# Reference
-
-## Methods
-
-### `step0()`
-
-```tsx
-static step0(n: number);
-```
-
-A stepping function, returns 1 for any positive value of `n`.
-
----
-
-### `step1()`
-
-```tsx
-static step1(n: number);
-```
-
-A stepping function, returns 1 if `n` is greater than or equal to 1.
-
----
-
-### `linear()`
-
-```tsx
-static linear(t: number);
-```
-
-A linear function, `f(t) = t`. Position correlates to elapsed time one to one.
-
-https://cubic-bezier.com/#0,0,1,1
-
----
-
-### `ease()`
-
-```tsx
-static ease(t: number);
-```
-
-A basic inertial interaction, similar to an object slowly accelerating to speed.
-
-https://cubic-bezier.com/#.42,0,1,1
-
----
-
-### `quad()`
-
-```tsx
-static quad(t: number);
-```
-
-A quadratic function, `f(t) = t * t`. Position equals the square of elapsed time.
-
-https://easings.net/#easeInQuad
-
----
-
-### `cubic()`
-
-```tsx
-static cubic(t: number);
-```
-
-A cubic function, `f(t) = t * t * t`. Position equals the cube of elapsed time.
-
-https://easings.net/#easeInCubic
-
----
-
-### `poly()`
-
-```tsx
-static poly(n: number);
-```
-
-A power function. Position is equal to the Nth power of elapsed time.
-
-n = 4: https://easings.net/#easeInQuart n = 5: https://easings.net/#easeInQuint
-
----
-
-### `sin()`
-
-```tsx
-static sin(t: number);
-```
-
-A sinusoidal function.
-
-https://easings.net/#easeInSine
-
----
-
-### `circle()`
-
-```tsx
-static circle(t: number);
-```
-
-A circular function.
-
-https://easings.net/#easeInCirc
-
----
-
-### `exp()`
-
-```tsx
-static exp(t: number);
-```
-
-An exponential function.
-
-https://easings.net/#easeInExpo
-
----
-
-### `elastic()`
-
-```tsx
-static elastic(bounciness: number);
-```
-
-A basic elastic interaction, similar to a spring oscillating back and forth.
-
-Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.
-
-https://easings.net/#easeInElastic
-
----
-
-### `back()`
-
-```tsx
-static back(s)
-```
-
-Use with `Animated.parallel()` to create a basic effect where the object animates back slightly as the animation starts.
-
----
-
-### `bounce()`
-
-```tsx
-static bounce(t: number);
-```
-
-Provides a basic bouncing effect.
-
-https://easings.net/#easeInBounce
-
----
-
-### `bezier()`
-
-```tsx
-static bezier(x1: number, y1: number, x2: number, y2: number);
-```
-
-Provides a cubic bezier curve, equivalent to CSS Transitions' `transition-timing-function`.
-
-A useful tool to visualize cubic bezier curves can be found at https://cubic-bezier.com/
-
----
-
-### `in()`
-
-```tsx
-static in(easing: number);
-```
-
-Runs an easing function forwards.
-
----
-
-### `out()`
-
-```tsx
-static out(easing: number);
-```
-
-Runs an easing function backwards.
-
----
-
-### `inOut()`
-
-```tsx
-static inOut(easing: number);
-```
-
-Makes any easing function symmetrical. The easing function will run forwards for half of the duration, then backwards for the rest of the duration.
+---
+id: easing
+title: Easing
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+The `Easing` module implements common easing functions. This module is used by [`Animated.timing()`](animated.md#timing) to convey physically believable motion in animations.
+
+You can find a visualization of some common easing functions at https://easings.net/
+
+### Predefined animations
+
+The `Easing` module provides several predefined animations through the following methods:
+
+- [`back`](easing.md#back) provides a basic animation where the object goes slightly back before moving forward
+- [`bounce`](easing.md#bounce) provides a bouncing animation
+- [`ease`](easing.md#ease) provides a basic inertial animation
+- [`elastic`](easing.md#elastic) provides a basic spring interaction
+
+### Standard functions
+
+Three standard easing functions are provided:
+
+- [`linear`](easing.md#linear)
+- [`quad`](easing.md#quad)
+- [`cubic`](easing.md#cubic)
+
+The [`poly`](easing.md#poly) function can be used to implement quartic, quintic, and other higher power functions.
+
+### Additional functions
+
+Additional mathematical functions are provided by the following methods:
+
+- [`bezier`](easing.md#bezier) provides a cubic bezier curve
+- [`circle`](easing.md#circle) provides a circular function
+- [`sin`](easing.md#sin) provides a sinusoidal function
+- [`exp`](easing.md#exp) provides an exponential function
+
+The following helpers are used to modify other easing functions.
+
+- [`in`](easing.md#in) runs an easing function forwards
+- [`inOut`](easing.md#inout) makes any easing function symmetrical
+- [`out`](easing.md#out) runs an easing function backwards
+
+## Example
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Easing%20Demo&ext=js
+import {useRef} from 'react';
+import {
+  Animated,
+  Easing,
+  SectionList,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  const animate = easing => {
+    opacity.setValue(0);
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration: 1200,
+      easing,
+      useNativeDriver: false,
+    }).start();
+  };
+
+  const size = opacity.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 80],
+  });
+
+  const animatedStyles = [
+    styles.box,
+    {
+      opacity,
+      width: size,
+      height: size,
+    },
+  ];
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container} edges={['right', 'top', 'left']}>
+        <StatusBar hidden={true} />
+        <Text style={styles.title}>
+          Press rows below to preview the Easing!
+        </Text>
+        <View style={styles.boxContainer}>
+          <Animated.View style={animatedStyles} />
+        </View>
+        <SectionList
+          style={styles.list}
+          sections={SECTIONS}
+          keyExtractor={item => item.title}
+          renderItem={({item}) => (
+            <TouchableOpacity
+              onPress={() => animate(item.easing)}
+              style={styles.listRow}>
+              <Text>{item.title}</Text>
+            </TouchableOpacity>
+          )}
+          renderSectionHeader={({section: {title}}) => (
+            <Text style={styles.listHeader}>{title}</Text>
+          )}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const SECTIONS = [
+  {
+    title: 'Predefined animations',
+    data: [
+      {title: 'Bounce', easing: Easing.bounce},
+      {title: 'Ease', easing: Easing.ease},
+      {title: 'Elastic', easing: Easing.elastic(4)},
+    ],
+  },
+  {
+    title: 'Standard functions',
+    data: [
+      {title: 'Linear', easing: Easing.linear},
+      {title: 'Quad', easing: Easing.quad},
+      {title: 'Cubic', easing: Easing.cubic},
+    ],
+  },
+  {
+    title: 'Additional functions',
+    data: [
+      {
+        title: 'Bezier',
+        easing: Easing.bezier(0, 2, 1, -1),
+      },
+      {title: 'Circle', easing: Easing.circle},
+      {title: 'Sin', easing: Easing.sin},
+      {title: 'Exp', easing: Easing.exp},
+    ],
+  },
+  {
+    title: 'Combinations',
+    data: [
+      {
+        title: 'In + Bounce',
+        easing: Easing.in(Easing.bounce),
+      },
+      {
+        title: 'Out + Exp',
+        easing: Easing.out(Easing.exp),
+      },
+      {
+        title: 'InOut + Elastic',
+        easing: Easing.inOut(Easing.elastic(1)),
+      },
+    ],
+  },
+];
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#20232a',
+  },
+  title: {
+    marginTop: 10,
+    textAlign: 'center',
+    color: '#61dafb',
+  },
+  boxContainer: {
+    height: 160,
+    alignItems: 'center',
+  },
+  box: {
+    marginTop: 32,
+    borderRadius: 4,
+    backgroundColor: '#61dafb',
+  },
+  list: {
+    backgroundColor: '#fff',
+  },
+  listHeader: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    backgroundColor: '#f4f4f4',
+    color: '#999',
+    fontSize: 12,
+    textTransform: 'uppercase',
+  },
+  listRow: {
+    padding: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Easing%20Demo&ext=tsx
+import {useRef} from 'react';
+import {
+  Animated,
+  Easing,
+  SectionList,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  type EasingFunction,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  const animate = (easing: EasingFunction) => {
+    opacity.setValue(0);
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration: 1200,
+      easing,
+      useNativeDriver: false,
+    }).start();
+  };
+
+  const size = opacity.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 80],
+  });
+
+  const animatedStyles = [
+    styles.box,
+    {
+      opacity,
+      width: size,
+      height: size,
+    },
+  ];
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container} edges={['right', 'top', 'left']}>
+        <StatusBar hidden={true} />
+        <Text style={styles.title}>
+          Press rows below to preview the Easing!
+        </Text>
+        <View style={styles.boxContainer}>
+          <Animated.View style={animatedStyles} />
+        </View>
+        <SectionList
+          style={styles.list}
+          sections={SECTIONS}
+          keyExtractor={item => item.title}
+          renderItem={({item}) => (
+            <TouchableOpacity
+              onPress={() => animate(item.easing)}
+              style={styles.listRow}>
+              <Text>{item.title}</Text>
+            </TouchableOpacity>
+          )}
+          renderSectionHeader={({section: {title}}) => (
+            <Text style={styles.listHeader}>{title}</Text>
+          )}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const SECTIONS = [
+  {
+    title: 'Predefined animations',
+    data: [
+      {title: 'Bounce', easing: Easing.bounce},
+      {title: 'Ease', easing: Easing.ease},
+      {title: 'Elastic', easing: Easing.elastic(4)},
+    ],
+  },
+  {
+    title: 'Standard functions',
+    data: [
+      {title: 'Linear', easing: Easing.linear},
+      {title: 'Quad', easing: Easing.quad},
+      {title: 'Cubic', easing: Easing.cubic},
+    ],
+  },
+  {
+    title: 'Additional functions',
+    data: [
+      {
+        title: 'Bezier',
+        easing: Easing.bezier(0, 2, 1, -1),
+      },
+      {title: 'Circle', easing: Easing.circle},
+      {title: 'Sin', easing: Easing.sin},
+      {title: 'Exp', easing: Easing.exp},
+    ],
+  },
+  {
+    title: 'Combinations',
+    data: [
+      {
+        title: 'In + Bounce',
+        easing: Easing.in(Easing.bounce),
+      },
+      {
+        title: 'Out + Exp',
+        easing: Easing.out(Easing.exp),
+      },
+      {
+        title: 'InOut + Elastic',
+        easing: Easing.inOut(Easing.elastic(1)),
+      },
+    ],
+  },
+];
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#20232a',
+  },
+  title: {
+    marginTop: 10,
+    textAlign: 'center',
+    color: '#61dafb',
+  },
+  boxContainer: {
+    height: 160,
+    alignItems: 'center',
+  },
+  box: {
+    marginTop: 32,
+    borderRadius: 4,
+    backgroundColor: '#61dafb',
+  },
+  list: {
+    backgroundColor: '#fff',
+  },
+  listHeader: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    backgroundColor: '#f4f4f4',
+    color: '#999',
+    fontSize: 12,
+    textTransform: 'uppercase',
+  },
+  listRow: {
+    padding: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+---
+
+# Reference
+
+## Methods
+
+### `step0()`
+
+```tsx
+static step0(n: number);
+```
+
+A stepping function, returns 1 for any positive value of `n`.
+
+---
+
+### `step1()`
+
+```tsx
+static step1(n: number);
+```
+
+A stepping function, returns 1 if `n` is greater than or equal to 1.
+
+---
+
+### `linear()`
+
+```tsx
+static linear(t: number);
+```
+
+A linear function, `f(t) = t`. Position correlates to elapsed time one to one.
+
+https://cubic-bezier.com/#0,0,1,1
+
+---
+
+### `ease()`
+
+```tsx
+static ease(t: number);
+```
+
+A basic inertial interaction, similar to an object slowly accelerating to speed.
+
+https://cubic-bezier.com/#.42,0,1,1
+
+---
+
+### `quad()`
+
+```tsx
+static quad(t: number);
+```
+
+A quadratic function, `f(t) = t * t`. Position equals the square of elapsed time.
+
+https://easings.net/#easeInQuad
+
+---
+
+### `cubic()`
+
+```tsx
+static cubic(t: number);
+```
+
+A cubic function, `f(t) = t * t * t`. Position equals the cube of elapsed time.
+
+https://easings.net/#easeInCubic
+
+---
+
+### `poly()`
+
+```tsx
+static poly(n: number);
+```
+
+A power function. Position is equal to the Nth power of elapsed time.
+
+n = 4: https://easings.net/#easeInQuart n = 5: https://easings.net/#easeInQuint
+
+---
+
+### `sin()`
+
+```tsx
+static sin(t: number);
+```
+
+A sinusoidal function.
+
+https://easings.net/#easeInSine
+
+---
+
+### `circle()`
+
+```tsx
+static circle(t: number);
+```
+
+A circular function.
+
+https://easings.net/#easeInCirc
+
+---
+
+### `exp()`
+
+```tsx
+static exp(t: number);
+```
+
+An exponential function.
+
+https://easings.net/#easeInExpo
+
+---
+
+### `elastic()`
+
+```tsx
+static elastic(bounciness: number);
+```
+
+A basic elastic interaction, similar to a spring oscillating back and forth.
+
+Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.
+
+https://easings.net/#easeInElastic
+
+---
+
+### `back()`
+
+```tsx
+static back(s)
+```
+
+Use with `Animated.parallel()` to create a basic effect where the object animates back slightly as the animation starts.
+
+---
+
+### `bounce()`
+
+```tsx
+static bounce(t: number);
+```
+
+Provides a basic bouncing effect.
+
+https://easings.net/#easeInBounce
+
+---
+
+### `bezier()`
+
+```tsx
+static bezier(x1: number, y1: number, x2: number, y2: number);
+```
+
+Provides a cubic bezier curve, equivalent to CSS Transitions' `transition-timing-function`.
+
+A useful tool to visualize cubic bezier curves can be found at https://cubic-bezier.com/
+
+---
+
+### `in()`
+
+```tsx
+static in(easing: number);
+```
+
+Runs an easing function forwards.
+
+---
+
+### `out()`
+
+```tsx
+static out(easing: number);
+```
+
+Runs an easing function backwards.
+
+---
+
+### `inOut()`
+
+```tsx
+static inOut(easing: number);
+```
+
+Makes any easing function symmetrical. The easing function will run forwards for half of the duration, then backwards for the rest of the duration.
diff --git a/website/versioned_docs/version-0.85/element-nodes.md b/website/versioned_docs/version-0.85/element-nodes.md
index 654c870b37f..f48b808eefc 100644
--- a/website/versioned_docs/version-0.85/element-nodes.md
+++ b/website/versioned_docs/version-0.85/element-nodes.md
@@ -1,135 +1,135 @@
----
-id: element-nodes
-title: Element nodes
----
-
-Element nodes represent native components in the native view tree (similar to [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) nodes on Web).
-
-They are provided by all native components, and by many built-in components, via refs:
-
-```SnackPlayer ext=js&name=Element%20instances%20example
-import * as React from 'react';
-import { View, SafeAreaView, StyleSheet, Text } from 'react-native';
-
-const ViewWithRefs = () => {
-  const ref = React.useRef(null);
-  const [viewInfo, setViewInfo] = React.useState('');
-
-  React.useEffect(() => {
-    // `element` is an object implementing the interface described here.
-    const element = ref.current;
-    const rect = JSON.stringify(element.getBoundingClientRect());
-    setViewInfo(
-      `Bounding rect is: ${rect}.\nText content is: ${element.textContent}`,
-    );
-  }, []);
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <View ref={ref} style={styles.content}>
-        <Text>Hello world!</Text>
-      </View>
-      <Text>{viewInfo}</Text>
-    </SafeAreaView>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  content: {
-    padding: 10,
-    backgroundColor: 'gray',
-  },
-});
-
-export default ViewWithRefs;
-```
-
-:::info
-Note that some built-in components are only a container for other components (including native components). For example, `ScrollView` internally renders a native scroll view and a native view, which are accessible through the ref it provides using methods like `getNativeScrollRef()` and `getInnerViewRef()`.
-:::
-
----
-
-## Reference
-
-### Web-compatible API
-
-From [`HTMLElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement):
-
-- Properties
-  - [`offsetHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight)
-  - [`offsetLeft`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft)
-  - [`offsetParent`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent)
-  - [`offsetTop`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop)
-  - [`offsetWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth)
-- Methods
-  - [`blur()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/blur).
-  - [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus).
-    - ⚠️ The `options` parameter is not supported.
-
-From [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element):
-
-- Properties
-  - [`childElementCount`](https://developer.mozilla.org/en-US/docs/Web/API/Element/childElementCount)
-  - [`children`](https://developer.mozilla.org/en-US/docs/Web/API/Element/children)
-  - [`clientHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight)
-  - [`clientLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft)
-  - [`clientTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop)
-  - [`clientWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth)
-  - [`firstElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Element/firstElementChild)
-  - [`id`](https://developer.mozilla.org/en-US/docs/Web/API/Element/id)
-    - ℹ️ Returns the value of the `id` or `nativeID` props.
-  - [`lastElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Element/lastElementChild)
-  - [`nextElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Element/nextElementSibling)
-  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
-  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
-  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
-  - [`previousElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Element/previousElementSibling)
-  - [`scrollHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight)
-  - [`scrollLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft)
-    - ⚠️ For built-in components, only `ScrollView` instances can return a value other than zero.
-  - [`scrollTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop)
-    - ⚠️ For built-in components, only `ScrollView` instances can return a value other than zero.
-  - [`scrollWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth)
-  - [`tagName`](https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName)
-    - ℹ️ Returns a normalized native component name prefixed with `RN:`, like `RN:View`.
-  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
-- Methods
-  - [`getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)
-  - [`hasPointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/hasPointerCapture)
-  - [`setPointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture)
-  - [`releasePointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/releasePointerCapture)
-
-From [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/Node):
-
-- Properties
-  - [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)
-  - [`firstChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild)
-  - [`isConnected`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected)
-  - [`lastChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild)
-  - [`nextSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling)
-  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
-  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
-  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
-  - [`ownerDocument`](https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument)
-    - ℹ️ Will return the [document node](/docs/next/document-nodes) where this component was rendered.
-  - [`parentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)
-  - [`parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)
-  - [`previousSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling)
-  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
-- Methods
-  - [`compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
-  - [`contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains)
-  - [`getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)
-    - ℹ️ Will return a reference to itself if the component is not mounted.
-  - [`hasChildNodes()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes)
-
-### Legacy API
-
-- [`measure()`](/docs/next/legacy/direct-manipulation#measurecallback)
-- [`measureInWindow()`](/docs/next/legacy/direct-manipulation#measureinwindowcallback)
-- [`measureLayout()`](/docs/next/legacy/direct-manipulation#measurelayoutrelativetonativecomponentref-onsuccess-onfail)
-- [`setNativeProps()`](/docs/next/legacy/direct-manipulation#setnativeprops-with-touchableopacity)
+---
+id: element-nodes
+title: Element nodes
+---
+
+Element nodes represent native components in the native view tree (similar to [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) nodes on Web).
+
+They are provided by all native components, and by many built-in components, via refs:
+
+```SnackPlayer ext=js&name=Element%20instances%20example
+import {useEffect, useRef, useState} from 'react';
+import {View, SafeAreaView, StyleSheet, Text} from 'react-native';
+
+const ViewWithRefs = () => {
+  const ref = useRef(null);
+  const [viewInfo, setViewInfo] = useState('');
+
+  useEffect(() => {
+    // `element` is an object implementing the interface described here.
+    const element = ref.current;
+    const rect = JSON.stringify(element.getBoundingClientRect());
+    setViewInfo(
+      `Bounding rect is: ${rect}.\nText content is: ${element.textContent}`,
+    );
+  }, []);
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View ref={ref} style={styles.content}>
+        <Text>Hello world!</Text>
+      </View>
+      <Text>{viewInfo}</Text>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    padding: 10,
+    backgroundColor: 'gray',
+  },
+});
+
+export default ViewWithRefs;
+```
+
+:::info
+Note that some built-in components are only a container for other components (including native components). For example, `ScrollView` internally renders a native scroll view and a native view, which are accessible through the ref it provides using methods like `getNativeScrollRef()` and `getInnerViewRef()`.
+:::
+
+---
+
+## Reference
+
+### Web-compatible API
+
+From [`HTMLElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement):
+
+- Properties
+  - [`offsetHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight)
+  - [`offsetLeft`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft)
+  - [`offsetParent`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent)
+  - [`offsetTop`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop)
+  - [`offsetWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth)
+- Methods
+  - [`blur()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/blur).
+  - [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus).
+    - ⚠️ The `options` parameter is not supported.
+
+From [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element):
+
+- Properties
+  - [`childElementCount`](https://developer.mozilla.org/en-US/docs/Web/API/Element/childElementCount)
+  - [`children`](https://developer.mozilla.org/en-US/docs/Web/API/Element/children)
+  - [`clientHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight)
+  - [`clientLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft)
+  - [`clientTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop)
+  - [`clientWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth)
+  - [`firstElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Element/firstElementChild)
+  - [`id`](https://developer.mozilla.org/en-US/docs/Web/API/Element/id)
+    - ℹ️ Returns the value of the `id` or `nativeID` props.
+  - [`lastElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Element/lastElementChild)
+  - [`nextElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Element/nextElementSibling)
+  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
+  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
+  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
+  - [`previousElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Element/previousElementSibling)
+  - [`scrollHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight)
+  - [`scrollLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft)
+    - ⚠️ For built-in components, only `ScrollView` instances can return a value other than zero.
+  - [`scrollTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop)
+    - ⚠️ For built-in components, only `ScrollView` instances can return a value other than zero.
+  - [`scrollWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth)
+  - [`tagName`](https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName)
+    - ℹ️ Returns a normalized native component name prefixed with `RN:`, like `RN:View`.
+  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
+- Methods
+  - [`getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)
+  - [`hasPointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/hasPointerCapture)
+  - [`setPointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture)
+  - [`releasePointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/releasePointerCapture)
+
+From [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/Node):
+
+- Properties
+  - [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)
+  - [`firstChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild)
+  - [`isConnected`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected)
+  - [`lastChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild)
+  - [`nextSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling)
+  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
+  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
+  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
+  - [`ownerDocument`](https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument)
+    - ℹ️ Will return the [document node](/docs/next/document-nodes) where this component was rendered.
+  - [`parentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)
+  - [`parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)
+  - [`previousSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling)
+  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
+- Methods
+  - [`compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
+  - [`contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains)
+  - [`getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)
+    - ℹ️ Will return a reference to itself if the component is not mounted.
+  - [`hasChildNodes()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes)
+
+### Legacy API
+
+- [`measure()`](/docs/next/legacy/direct-manipulation#measurecallback)
+- [`measureInWindow()`](/docs/next/legacy/direct-manipulation#measureinwindowcallback)
+- [`measureLayout()`](/docs/next/legacy/direct-manipulation#measurelayoutrelativetonativecomponentref-onsuccess-onfail)
+- [`setNativeProps()`](/docs/next/legacy/direct-manipulation#setnativeprops-with-touchableopacity)
diff --git a/website/versioned_docs/version-0.85/fabric-native-components.md b/website/versioned_docs/version-0.85/fabric-native-components.md
index 2a509a7174e..6efdd572e92 100644
--- a/website/versioned_docs/version-0.85/fabric-native-components.md
+++ b/website/versioned_docs/version-0.85/fabric-native-components.md
@@ -172,7 +172,6 @@ This guide shows you how to create a Native Component that only works with the N
 Finally, you can use the new component in your app. Update your generated `App.tsx` to:
 
 ```javascript title="Demo/App.tsx"
-import React from 'react';
 import {Alert, StyleSheet, View} from 'react-native';
 import WebView from './specs/WebViewNativeComponent';
 
diff --git a/website/versioned_docs/version-0.85/flatlist.md b/website/versioned_docs/version-0.85/flatlist.md
index 56505e27ca8..a7cceaf3ada 100644
--- a/website/versioned_docs/version-0.85/flatlist.md
+++ b/website/versioned_docs/version-0.85/flatlist.md
@@ -1,861 +1,859 @@
----
-id: flatlist
-title: FlatList
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-A performant interface for rendering basic, flat lists, supporting the most handy features:
-
-- Fully cross-platform.
-- Optional horizontal mode.
-- Configurable viewability callbacks.
-- Header support.
-- Footer support.
-- Separator support.
-- Pull to Refresh.
-- Scroll loading.
-- ScrollToIndex support.
-- Multiple column support.
-
-If you need section support, use [`<SectionList>`](sectionlist.md).
-
-## Example
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Simple%20FlatList%20Example&ext=js
-import React from 'react';
-import {View, FlatList, StyleSheet, Text, StatusBar} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const DATA = [
-  {
-    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
-    title: 'First Item',
-  },
-  {
-    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
-    title: 'Second Item',
-  },
-  {
-    id: '58694a0f-3da1-471f-bd96-145571e29d72',
-    title: 'Third Item',
-  },
-];
-
-const Item = ({title}) => (
-  <View style={styles.item}>
-    <Text style={styles.title}>{title}</Text>
-  </View>
-);
-
-const App = () => (
-  <SafeAreaProvider>
-    <SafeAreaView style={styles.container}>
-      <FlatList
-        data={DATA}
-        renderItem={({item}) => <Item title={item.title} />}
-        keyExtractor={item => item.id}
-      />
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: StatusBar.currentHeight || 0,
-  },
-  item: {
-    backgroundColor: '#f9c2ff',
-    padding: 20,
-    marginVertical: 8,
-    marginHorizontal: 16,
-  },
-  title: {
-    fontSize: 32,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Simple%20FlatList%20Example&ext=tsx
-import React from 'react';
-import {View, FlatList, StyleSheet, Text, StatusBar} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const DATA = [
-  {
-    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
-    title: 'First Item',
-  },
-  {
-    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
-    title: 'Second Item',
-  },
-  {
-    id: '58694a0f-3da1-471f-bd96-145571e29d72',
-    title: 'Third Item',
-  },
-];
-
-type ItemProps = {title: string};
-
-const Item = ({title}: ItemProps) => (
-  <View style={styles.item}>
-    <Text style={styles.title}>{title}</Text>
-  </View>
-);
-
-const App = () => (
-  <SafeAreaProvider>
-    <SafeAreaView style={styles.container}>
-      <FlatList
-        data={DATA}
-        renderItem={({item}) => <Item title={item.title} />}
-        keyExtractor={item => item.id}
-      />
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: StatusBar.currentHeight || 0,
-  },
-  item: {
-    backgroundColor: '#f9c2ff',
-    padding: 20,
-    marginVertical: 8,
-    marginHorizontal: 16,
-  },
-  title: {
-    fontSize: 32,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-To render multiple columns, use the [`numColumns`](flatlist.md#numcolumns) prop. Using this approach instead of a `flexWrap` layout can prevent conflicts with the item height logic.
-
-More complex, selectable example below.
-
-- By passing `extraData={selectedId}` to `FlatList` we make sure `FlatList` itself will re-render when the state changes. Without setting this prop, `FlatList` would not know it needs to re-render any items because it is a `PureComponent` and the prop comparison will not show any changes.
-- `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=flatlist-selectable&ext=js
-import React, {useState} from 'react';
-import {
-  FlatList,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const DATA = [
-  {
-    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
-    title: 'First Item',
-  },
-  {
-    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
-    title: 'Second Item',
-  },
-  {
-    id: '58694a0f-3da1-471f-bd96-145571e29d72',
-    title: 'Third Item',
-  },
-];
-
-const Item = ({item, onPress, backgroundColor, textColor}) => (
-  <TouchableOpacity onPress={onPress} style={[styles.item, {backgroundColor}]}>
-    <Text style={[styles.title, {color: textColor}]}>{item.title}</Text>
-  </TouchableOpacity>
-);
-
-const App = () => {
-  const [selectedId, setSelectedId] = useState();
-
-  const renderItem = ({item}) => {
-    const backgroundColor = item.id === selectedId ? '#6e3b6e' : '#f9c2ff';
-    const color = item.id === selectedId ? 'white' : 'black';
-
-    return (
-      <Item
-        item={item}
-        onPress={() => setSelectedId(item.id)}
-        backgroundColor={backgroundColor}
-        textColor={color}
-      />
-    );
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <FlatList
-          data={DATA}
-          renderItem={renderItem}
-          keyExtractor={item => item.id}
-          extraData={selectedId}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: StatusBar.currentHeight || 0,
-  },
-  item: {
-    padding: 20,
-    marginVertical: 8,
-    marginHorizontal: 16,
-  },
-  title: {
-    fontSize: 32,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=flatlist-selectable&ext=tsx
-import React, {useState} from 'react';
-import {
-  FlatList,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-type ItemData = {
-  id: string;
-  title: string;
-};
-
-const DATA: ItemData[] = [
-  {
-    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
-    title: 'First Item',
-  },
-  {
-    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
-    title: 'Second Item',
-  },
-  {
-    id: '58694a0f-3da1-471f-bd96-145571e29d72',
-    title: 'Third Item',
-  },
-];
-
-type ItemProps = {
-  item: ItemData;
-  onPress: () => void;
-  backgroundColor: string;
-  textColor: string;
-};
-
-const Item = ({item, onPress, backgroundColor, textColor}: ItemProps) => (
-  <TouchableOpacity onPress={onPress} style={[styles.item, {backgroundColor}]}>
-    <Text style={[styles.title, {color: textColor}]}>{item.title}</Text>
-  </TouchableOpacity>
-);
-
-const App = () => {
-  const [selectedId, setSelectedId] = useState<string>();
-
-  const renderItem = ({item}: {item: ItemData}) => {
-    const backgroundColor = item.id === selectedId ? '#6e3b6e' : '#f9c2ff';
-    const color = item.id === selectedId ? 'white' : 'black';
-
-    return (
-      <Item
-        item={item}
-        onPress={() => setSelectedId(item.id)}
-        backgroundColor={backgroundColor}
-        textColor={color}
-      />
-    );
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <FlatList
-          data={DATA}
-          renderItem={renderItem}
-          keyExtractor={item => item.id}
-          extraData={selectedId}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: StatusBar.currentHeight || 0,
-  },
-  item: {
-    padding: 20,
-    marginVertical: 8,
-    marginHorizontal: 16,
-  },
-  title: {
-    fontSize: 32,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-This is a convenience wrapper around [`<VirtualizedList>`](virtualizedlist.md), and thus inherits its props (as well as those of [`<ScrollView>`](scrollview.md)) that aren't explicitly listed here, along with the following caveats:
-
-- Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.
-- This is a `PureComponent` which means that it will not re-render if `props` remain shallow-equal. Make sure that everything your `renderItem` function depends on is passed as a prop (e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on changes. This includes the `data` prop and parent component state.
-- In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes.
-- By default, the list looks for a `key` prop on each item and uses that for the React key. Alternatively, you can provide a custom `keyExtractor` prop.
-
----
-
-# Reference
-
-## Props
-
-### [VirtualizedList Props](virtualizedlist.md#props)
-
-Inherits [VirtualizedList Props](virtualizedlist.md#props).
-
----
-
-### <div className="label required basic">Required</div> **`renderItem`**
-
-```tsx
-renderItem({
-  item: ItemT,
-  index: number,
-  separators: {
-    highlight: () => void;
-    unhighlight: () => void;
-    updateProps: (select: 'leading' | 'trailing', newProps: any) => void;
-  }
-}): JSX.Element;
-```
-
-Takes an item from `data` and renders it into the list.
-
-Provides additional metadata like `index` if you need it, as well as a more generic `separators.updateProps` function which let you set whatever props you want to change the rendering of either the leading separator or trailing separator in case the more common `highlight` and `unhighlight` (which set the `highlighted: boolean` prop) are insufficient for your use case.
-
-| Type     |
-| -------- |
-| function |
-
-- `item` (Object): The item from `data` being rendered.
-- `index` (number): The index corresponding to this item in the `data` array.
-- `separators` (Object)
-  - `highlight` (Function)
-  - `unhighlight` (Function)
-  - `updateProps` (Function)
-    - `select` (enum('leading', 'trailing'))
-    - `newProps` (Object)
-
-Example usage:
-
-```tsx
-<FlatList
-  ItemSeparatorComponent={
-    Platform.OS !== 'android' &&
-    (({highlighted}) => (
-      <View
-        style={[style.separator, highlighted && {marginLeft: 0}]}
-      />
-    ))
-  }
-  data={[{title: 'Title Text', key: 'item1'}]}
-  renderItem={({item, index, separators}) => (
-    <TouchableHighlight
-      key={item.key}
-      onPress={() => this._onPress(item)}
-      onShowUnderlay={separators.highlight}
-      onHideUnderlay={separators.unhighlight}>
-      <View style={{backgroundColor: 'white'}}>
-        <Text>{item.title}</Text>
-      </View>
-    </TouchableHighlight>
-  )}
-/>
-```
-
----
-
-### <div className="label required basic">Required</div> **`data`**
-
-An array (or array-like list) of items to render. Other data types can be used by targeting [`VirtualizedList`](virtualizedlist.md) directly.
-
-| Type      |
-| --------- |
-| ArrayLike |
-
----
-
-### `ItemSeparatorComponent`
-
-Rendered in between each item, but not at the top or bottom. By default, `highlighted` and `leadingItem` props are provided. `renderItem` provides `separators.highlight`/`unhighlight` which will update the `highlighted` prop, but you can also add custom props with `separators.updateProps`. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
-
-| Type                         |
-| ---------------------------- |
-| component, function, element |
-
----
-
-### `ListEmptyComponent`
-
-Rendered when the list is empty. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
-
-| Type               |
-| ------------------ |
-| component, element |
-
----
-
-### `ListFooterComponent`
-
-Rendered at the bottom of all the items. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
-
-| Type               |
-| ------------------ |
-| component, element |
-
----
-
-### `ListFooterComponentStyle`
-
-Styling for internal View for `ListFooterComponent`.
-
-| Type                           |
-| ------------------------------ |
-| [View Style](view-style-props) |
-
----
-
-### `ListHeaderComponent`
-
-Rendered at the top of all the items. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
-
-| Type               |
-| ------------------ |
-| component, element |
-
----
-
-### `ListHeaderComponentStyle`
-
-Styling for internal View for `ListHeaderComponent`.
-
-| Type                           |
-| ------------------------------ |
-| [View Style](view-style-props) |
-
----
-
-### `columnWrapperStyle`
-
-Optional custom style for multi-item rows generated when `numColumns > 1`.
-
-| Type                           |
-| ------------------------------ |
-| [View Style](view-style-props) |
-
----
-
-### `extraData`
-
-A marker property for telling the list to re-render (since it implements `PureComponent`). If any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the `data` prop, stick it here and treat it immutably.
-
-| Type |
-| ---- |
-| any  |
-
----
-
-### `getItemLayout`
-
-```tsx
-(data, index) => {length: number, offset: number, index: number}
-```
-
-`getItemLayout` is an optional optimization that allows skipping the measurement of dynamic content if you know the size (height or width) of items ahead of time. `getItemLayout` is efficient if you have fixed size items, for example:
-
-```tsx
-  getItemLayout={(data, index) => (
-    {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
-  )}
-```
-
-Adding `getItemLayout` can be a great performance boost for lists of several hundred items. Remember to include separator length (height or width) in your offset calculation if you specify `ItemSeparatorComponent`.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `horizontal`
-
-If `true`, renders items next to each other horizontally instead of stacked vertically.
-
-| Type    |
-| ------- |
-| boolean |
-
----
-
-### `initialNumToRender`
-
-How many items to render in the initial batch. This should be enough to fill the screen but not much more. Note these items will never be unmounted as part of the windowed rendering in order to improve perceived performance of scroll-to-top actions.
-
-| Type   | Default |
-| ------ | ------- |
-| number | `10`    |
-
----
-
-### `initialScrollIndex`
-
-Instead of starting at the top with the first item, start at `initialScrollIndex`. This disables the "scroll to top" optimization that keeps the first `initialNumToRender` items always rendered and immediately renders the items starting at this initial index. Requires `getItemLayout` to be implemented.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `inverted`
-
-Reverses the direction of scroll. Uses scale transforms of `-1`.
-
-| Type    |
-| ------- |
-| boolean |
-
----
-
-### `keyExtractor`
-
-```tsx
-(item: ItemT, index: number) => string;
-```
-
-Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks `item.key`, then `item.id`, and then falls back to using the index, like React does.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `numColumns`
-
-Multiple columns can only be rendered with `horizontal={false}` and will zig-zag like a `flexWrap` layout. Items should all be the same height - masonry layouts are not supported.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `onRefresh`
-
-```tsx
-() => void;
-```
-
-If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the `refreshing` prop correctly.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onViewableItemsChanged`
-
-Called when the viewability of rows changes, as defined by the `viewabilityConfig` prop.
-
-| Type                                                                                                  |
-| ----------------------------------------------------------------------------------------------------- |
-| `md (callback: {changed: [ViewToken](viewtoken)[], viewableItems: [ViewToken](viewtoken)[]} => void;` |
-
----
-
-### `progressViewOffset`
-
-Set this when offset is needed for the loading indicator to show correctly.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `refreshing`
-
-Set this true while waiting for new data from a refresh.
-
-| Type    |
-| ------- |
-| boolean |
-
----
-
-### `removeClippedSubviews`
-
-:::warning
-Using this property may lead to bugs (missing content) in some circumstances - use at your own risk.
-:::
-
-When `true`, offscreen child views are removed from their native backing superview when offscreen. This may improve scroll performance for large lists. On Android the default value is `true`.
-
-| Type    |
-| ------- |
-| boolean |
-
----
-
-### `viewabilityConfig`
-
-See [`ViewabilityHelper.js`](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Lists/ViewabilityHelper.js) for flow type and further documentation.
-
-| Type              |
-| ----------------- |
-| ViewabilityConfig |
-
-`viewabilityConfig` takes a type `ViewabilityConfig` an object with following properties
-
-| Property                         | Type    |
-| -------------------------------- | ------- |
-| minimumViewTime                  | number  |
-| viewAreaCoveragePercentThreshold | number  |
-| itemVisiblePercentThreshold      | number  |
-| waitForInteraction               | boolean |
-
-At least one of the `viewAreaCoveragePercentThreshold` or `itemVisiblePercentThreshold` is required. This needs to be done in the `constructor` to avoid following error ([ref](https://github.com/facebook/react-native/issues/17408)):
-
-```
-  Error: Changing viewabilityConfig on the fly is not supported
-```
-
-```tsx
-constructor (props) {
-  super(props)
-
-  this.viewabilityConfig = {
-      waitForInteraction: true,
-      viewAreaCoveragePercentThreshold: 95
-  }
-}
-```
-
-```tsx
-<FlatList
-    viewabilityConfig={this.viewabilityConfig}
-  ...
-```
-
-#### minimumViewTime
-
-Minimum amount of time (in milliseconds) that an item must be physically viewable before the viewability callback will be fired. A high number means that scrolling through content without stopping will not mark the content as viewable.
-
-#### viewAreaCoveragePercentThreshold
-
-Percent of viewport that must be covered for a partially occluded item to count as "viewable", 0-100. Fully visible items are always considered viewable. A value of 0 means that a single pixel in the viewport makes the item viewable, and a value of 100 means that an item must be either entirely visible or cover the entire viewport to count as viewable.
-
-#### itemVisiblePercentThreshold
-
-Similar to `viewAreaCoveragePercentThreshold`, but considers the percent of the item that is visible, rather than the fraction of the viewable area it covers.
-
-#### waitForInteraction
-
-Nothing is considered viewable until the user scrolls or `recordInteraction` is called after render.
-
----
-
-### `viewabilityConfigCallbackPairs`
-
-List of `ViewabilityConfig`/`onViewableItemsChanged` pairs. A specific `onViewableItemsChanged` will be called when its corresponding `ViewabilityConfig`'s conditions are met. See `ViewabilityHelper.js` for flow type and further documentation.
-
-| Type                                   |
-| -------------------------------------- |
-| array of ViewabilityConfigCallbackPair |
-
-## Methods
-
-### `flashScrollIndicators()`
-
-```tsx
-flashScrollIndicators();
-```
-
-Displays the scroll indicators momentarily.
-
----
-
-### `getNativeScrollRef()`
-
-```tsx
-getNativeScrollRef(): React.ElementRef<typeof ScrollViewComponent>;
-```
-
-Provides a reference to the underlying scroll component
-
----
-
-### `getScrollResponder()`
-
-```tsx
-getScrollResponder(): ScrollResponderMixin;
-```
-
-Provides a handle to the underlying scroll responder.
-
----
-
-### `getScrollableNode()`
-
-```tsx
-getScrollableNode(): any;
-```
-
-Provides a handle to the underlying scroll node.
-
-### `scrollToEnd()`
-
-```tsx
-scrollToEnd(params?: {animated?: boolean});
-```
-
-Scrolls to the end of the content. May be janky without `getItemLayout` prop.
-
-**Parameters:**
-
-| Name   | Type   |
-| ------ | ------ |
-| params | object |
-
-Valid `params` keys are:
-
-- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
-
----
-
-### `scrollToIndex()`
-
-```tsx
-scrollToIndex: (params: {
-  index: number;
-  animated?: boolean;
-  viewOffset?: number;
-  viewPosition?: number;
-});
-```
-
-Scrolls to the item at the specified index such that it is positioned in the viewable area such that `viewPosition` 0 places it at the top, 1 at the bottom, and 0.5 centered in the middle.
-
-:::note
-Cannot scroll to locations outside the render window without specifying the `getItemLayout` prop.
-:::
-
-**Parameters:**
-
-| Name                                                        | Type   |
-| ----------------------------------------------------------- | ------ |
-| params <div className="label basic required">Required</div> | object |
-
-Valid `params` keys are:
-
-- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
-- 'index' (number) - The index to scroll to. Required.
-- 'viewOffset' (number) - A fixed number of pixels to offset the final target position.
-- 'viewPosition' (number) - A value of `0` places the item specified by index at the top, `1` at the bottom, and `0.5` centered in the middle.
-
----
-
-### `scrollToItem()`
-
-```tsx
-scrollToItem(params: {
-  animated?: ?boolean,
-  item: Item,
-  viewPosition?: number,
-});
-```
-
-Requires linear scan through data - use `scrollToIndex` instead if possible.
-
-:::note
-Cannot scroll to locations outside the render window without specifying the `getItemLayout` prop.
-:::
-
-**Parameters:**
-
-| Name                                                        | Type   |
-| ----------------------------------------------------------- | ------ |
-| params <div className="label basic required">Required</div> | object |
-
-Valid `params` keys are:
-
-- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
-- 'item' (object) - The item to scroll to. Required.
-- 'viewPosition' (number)
-
----
-
-### `scrollToOffset()`
-
-```tsx
-scrollToOffset(params: {
-  offset: number;
-  animated?: boolean;
-});
-```
-
-Scroll to a specific content pixel offset in the list.
-
-**Parameters:**
-
-| Name                                                        | Type   |
-| ----------------------------------------------------------- | ------ |
-| params <div className="label basic required">Required</div> | object |
-
-Valid `params` keys are:
-
-- 'offset' (number) - The offset to scroll to. In case of `horizontal` being true, the offset is the x-value, in any other case the offset is the y-value. Required.
-- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
+---
+id: flatlist
+title: FlatList
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+A performant interface for rendering basic, flat lists, supporting the most handy features:
+
+- Fully cross-platform.
+- Optional horizontal mode.
+- Configurable viewability callbacks.
+- Header support.
+- Footer support.
+- Separator support.
+- Pull to Refresh.
+- Scroll loading.
+- ScrollToIndex support.
+- Multiple column support.
+
+If you need section support, use [`<SectionList>`](sectionlist.md).
+
+## Example
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Simple%20FlatList%20Example&ext=js
+import {View, FlatList, StyleSheet, Text, StatusBar} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const DATA = [
+  {
+    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
+    title: 'First Item',
+  },
+  {
+    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
+    title: 'Second Item',
+  },
+  {
+    id: '58694a0f-3da1-471f-bd96-145571e29d72',
+    title: 'Third Item',
+  },
+];
+
+const Item = ({title}) => (
+  <View style={styles.item}>
+    <Text style={styles.title}>{title}</Text>
+  </View>
+);
+
+const App = () => (
+  <SafeAreaProvider>
+    <SafeAreaView style={styles.container}>
+      <FlatList
+        data={DATA}
+        renderItem={({item}) => <Item title={item.title} />}
+        keyExtractor={item => item.id}
+      />
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: StatusBar.currentHeight || 0,
+  },
+  item: {
+    backgroundColor: '#f9c2ff',
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Simple%20FlatList%20Example&ext=tsx
+import {View, FlatList, StyleSheet, Text, StatusBar} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const DATA = [
+  {
+    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
+    title: 'First Item',
+  },
+  {
+    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
+    title: 'Second Item',
+  },
+  {
+    id: '58694a0f-3da1-471f-bd96-145571e29d72',
+    title: 'Third Item',
+  },
+];
+
+type ItemProps = {title: string};
+
+const Item = ({title}: ItemProps) => (
+  <View style={styles.item}>
+    <Text style={styles.title}>{title}</Text>
+  </View>
+);
+
+const App = () => (
+  <SafeAreaProvider>
+    <SafeAreaView style={styles.container}>
+      <FlatList
+        data={DATA}
+        renderItem={({item}) => <Item title={item.title} />}
+        keyExtractor={item => item.id}
+      />
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: StatusBar.currentHeight || 0,
+  },
+  item: {
+    backgroundColor: '#f9c2ff',
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+To render multiple columns, use the [`numColumns`](flatlist.md#numcolumns) prop. Using this approach instead of a `flexWrap` layout can prevent conflicts with the item height logic.
+
+More complex, selectable example below.
+
+- By passing `extraData={selectedId}` to `FlatList` we make sure `FlatList` itself will re-render when the state changes. Without setting this prop, `FlatList` would not know it needs to re-render any items because it is a `PureComponent` and the prop comparison will not show any changes.
+- `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=flatlist-selectable&ext=js
+import {useState} from 'react';
+import {
+  FlatList,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const DATA = [
+  {
+    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
+    title: 'First Item',
+  },
+  {
+    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
+    title: 'Second Item',
+  },
+  {
+    id: '58694a0f-3da1-471f-bd96-145571e29d72',
+    title: 'Third Item',
+  },
+];
+
+const Item = ({item, onPress, backgroundColor, textColor}) => (
+  <TouchableOpacity onPress={onPress} style={[styles.item, {backgroundColor}]}>
+    <Text style={[styles.title, {color: textColor}]}>{item.title}</Text>
+  </TouchableOpacity>
+);
+
+const App = () => {
+  const [selectedId, setSelectedId] = useState();
+
+  const renderItem = ({item}) => {
+    const backgroundColor = item.id === selectedId ? '#6e3b6e' : '#f9c2ff';
+    const color = item.id === selectedId ? 'white' : 'black';
+
+    return (
+      <Item
+        item={item}
+        onPress={() => setSelectedId(item.id)}
+        backgroundColor={backgroundColor}
+        textColor={color}
+      />
+    );
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <FlatList
+          data={DATA}
+          renderItem={renderItem}
+          keyExtractor={item => item.id}
+          extraData={selectedId}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: StatusBar.currentHeight || 0,
+  },
+  item: {
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=flatlist-selectable&ext=tsx
+import {useState} from 'react';
+import {
+  FlatList,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+type ItemData = {
+  id: string;
+  title: string;
+};
+
+const DATA: ItemData[] = [
+  {
+    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
+    title: 'First Item',
+  },
+  {
+    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
+    title: 'Second Item',
+  },
+  {
+    id: '58694a0f-3da1-471f-bd96-145571e29d72',
+    title: 'Third Item',
+  },
+];
+
+type ItemProps = {
+  item: ItemData;
+  onPress: () => void;
+  backgroundColor: string;
+  textColor: string;
+};
+
+const Item = ({item, onPress, backgroundColor, textColor}: ItemProps) => (
+  <TouchableOpacity onPress={onPress} style={[styles.item, {backgroundColor}]}>
+    <Text style={[styles.title, {color: textColor}]}>{item.title}</Text>
+  </TouchableOpacity>
+);
+
+const App = () => {
+  const [selectedId, setSelectedId] = useState<string>();
+
+  const renderItem = ({item}: {item: ItemData}) => {
+    const backgroundColor = item.id === selectedId ? '#6e3b6e' : '#f9c2ff';
+    const color = item.id === selectedId ? 'white' : 'black';
+
+    return (
+      <Item
+        item={item}
+        onPress={() => setSelectedId(item.id)}
+        backgroundColor={backgroundColor}
+        textColor={color}
+      />
+    );
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <FlatList
+          data={DATA}
+          renderItem={renderItem}
+          keyExtractor={item => item.id}
+          extraData={selectedId}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: StatusBar.currentHeight || 0,
+  },
+  item: {
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+This is a convenience wrapper around [`<VirtualizedList>`](virtualizedlist.md), and thus inherits its props (as well as those of [`<ScrollView>`](scrollview.md)) that aren't explicitly listed here, along with the following caveats:
+
+- Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.
+- This is a `PureComponent` which means that it will not re-render if `props` remain shallow-equal. Make sure that everything your `renderItem` function depends on is passed as a prop (e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on changes. This includes the `data` prop and parent component state.
+- In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes.
+- By default, the list looks for a `key` prop on each item and uses that for the React key. Alternatively, you can provide a custom `keyExtractor` prop.
+
+---
+
+# Reference
+
+## Props
+
+### [VirtualizedList Props](virtualizedlist.md#props)
+
+Inherits [VirtualizedList Props](virtualizedlist.md#props).
+
+---
+
+### <div className="label required basic">Required</div> **`renderItem`**
+
+```tsx
+renderItem({
+  item: ItemT,
+  index: number,
+  separators: {
+    highlight: () => void;
+    unhighlight: () => void;
+    updateProps: (select: 'leading' | 'trailing', newProps: any) => void;
+  }
+}): JSX.Element;
+```
+
+Takes an item from `data` and renders it into the list.
+
+Provides additional metadata like `index` if you need it, as well as a more generic `separators.updateProps` function which let you set whatever props you want to change the rendering of either the leading separator or trailing separator in case the more common `highlight` and `unhighlight` (which set the `highlighted: boolean` prop) are insufficient for your use case.
+
+| Type     |
+| -------- |
+| function |
+
+- `item` (Object): The item from `data` being rendered.
+- `index` (number): The index corresponding to this item in the `data` array.
+- `separators` (Object)
+  - `highlight` (Function)
+  - `unhighlight` (Function)
+  - `updateProps` (Function)
+    - `select` (enum('leading', 'trailing'))
+    - `newProps` (Object)
+
+Example usage:
+
+```tsx
+<FlatList
+  ItemSeparatorComponent={
+    Platform.OS !== 'android' &&
+    (({highlighted}) => (
+      <View
+        style={[style.separator, highlighted && {marginLeft: 0}]}
+      />
+    ))
+  }
+  data={[{title: 'Title Text', key: 'item1'}]}
+  renderItem={({item, index, separators}) => (
+    <TouchableHighlight
+      key={item.key}
+      onPress={() => this._onPress(item)}
+      onShowUnderlay={separators.highlight}
+      onHideUnderlay={separators.unhighlight}>
+      <View style={{backgroundColor: 'white'}}>
+        <Text>{item.title}</Text>
+      </View>
+    </TouchableHighlight>
+  )}
+/>
+```
+
+---
+
+### <div className="label required basic">Required</div> **`data`**
+
+An array (or array-like list) of items to render. Other data types can be used by targeting [`VirtualizedList`](virtualizedlist.md) directly.
+
+| Type      |
+| --------- |
+| ArrayLike |
+
+---
+
+### `ItemSeparatorComponent`
+
+Rendered in between each item, but not at the top or bottom. By default, `highlighted` and `leadingItem` props are provided. `renderItem` provides `separators.highlight`/`unhighlight` which will update the `highlighted` prop, but you can also add custom props with `separators.updateProps`. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
+
+| Type                         |
+| ---------------------------- |
+| component, function, element |
+
+---
+
+### `ListEmptyComponent`
+
+Rendered when the list is empty. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
+
+| Type               |
+| ------------------ |
+| component, element |
+
+---
+
+### `ListFooterComponent`
+
+Rendered at the bottom of all the items. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
+
+| Type               |
+| ------------------ |
+| component, element |
+
+---
+
+### `ListFooterComponentStyle`
+
+Styling for internal View for `ListFooterComponent`.
+
+| Type                           |
+| ------------------------------ |
+| [View Style](view-style-props) |
+
+---
+
+### `ListHeaderComponent`
+
+Rendered at the top of all the items. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
+
+| Type               |
+| ------------------ |
+| component, element |
+
+---
+
+### `ListHeaderComponentStyle`
+
+Styling for internal View for `ListHeaderComponent`.
+
+| Type                           |
+| ------------------------------ |
+| [View Style](view-style-props) |
+
+---
+
+### `columnWrapperStyle`
+
+Optional custom style for multi-item rows generated when `numColumns > 1`.
+
+| Type                           |
+| ------------------------------ |
+| [View Style](view-style-props) |
+
+---
+
+### `extraData`
+
+A marker property for telling the list to re-render (since it implements `PureComponent`). If any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the `data` prop, stick it here and treat it immutably.
+
+| Type |
+| ---- |
+| any  |
+
+---
+
+### `getItemLayout`
+
+```tsx
+(data, index) => {length: number, offset: number, index: number}
+```
+
+`getItemLayout` is an optional optimization that allows skipping the measurement of dynamic content if you know the size (height or width) of items ahead of time. `getItemLayout` is efficient if you have fixed size items, for example:
+
+```tsx
+  getItemLayout={(data, index) => (
+    {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
+  )}
+```
+
+Adding `getItemLayout` can be a great performance boost for lists of several hundred items. Remember to include separator length (height or width) in your offset calculation if you specify `ItemSeparatorComponent`.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `horizontal`
+
+If `true`, renders items next to each other horizontally instead of stacked vertically.
+
+| Type    |
+| ------- |
+| boolean |
+
+---
+
+### `initialNumToRender`
+
+How many items to render in the initial batch. This should be enough to fill the screen but not much more. Note these items will never be unmounted as part of the windowed rendering in order to improve perceived performance of scroll-to-top actions.
+
+| Type   | Default |
+| ------ | ------- |
+| number | `10`    |
+
+---
+
+### `initialScrollIndex`
+
+Instead of starting at the top with the first item, start at `initialScrollIndex`. This disables the "scroll to top" optimization that keeps the first `initialNumToRender` items always rendered and immediately renders the items starting at this initial index. Requires `getItemLayout` to be implemented.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `inverted`
+
+Reverses the direction of scroll. Uses scale transforms of `-1`.
+
+| Type    |
+| ------- |
+| boolean |
+
+---
+
+### `keyExtractor`
+
+```tsx
+(item: ItemT, index: number) => string;
+```
+
+Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks `item.key`, then `item.id`, and then falls back to using the index, like React does.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `numColumns`
+
+Multiple columns can only be rendered with `horizontal={false}` and will zig-zag like a `flexWrap` layout. Items should all be the same height - masonry layouts are not supported.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `onRefresh`
+
+```tsx
+() => void;
+```
+
+If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the `refreshing` prop correctly.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onViewableItemsChanged`
+
+Called when the viewability of rows changes, as defined by the `viewabilityConfig` prop.
+
+| Type                                                                                                  |
+| ----------------------------------------------------------------------------------------------------- |
+| `md (callback: {changed: [ViewToken](viewtoken)[], viewableItems: [ViewToken](viewtoken)[]} => void;` |
+
+---
+
+### `progressViewOffset`
+
+Set this when offset is needed for the loading indicator to show correctly.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `refreshing`
+
+Set this true while waiting for new data from a refresh.
+
+| Type    |
+| ------- |
+| boolean |
+
+---
+
+### `removeClippedSubviews`
+
+:::warning
+Using this property may lead to bugs (missing content) in some circumstances - use at your own risk.
+:::
+
+When `true`, offscreen child views are removed from their native backing superview when offscreen. This may improve scroll performance for large lists. On Android the default value is `true`.
+
+| Type    |
+| ------- |
+| boolean |
+
+---
+
+### `viewabilityConfig`
+
+See [`ViewabilityHelper.js`](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Lists/ViewabilityHelper.js) for flow type and further documentation.
+
+| Type              |
+| ----------------- |
+| ViewabilityConfig |
+
+`viewabilityConfig` takes a type `ViewabilityConfig` an object with following properties
+
+| Property                         | Type    |
+| -------------------------------- | ------- |
+| minimumViewTime                  | number  |
+| viewAreaCoveragePercentThreshold | number  |
+| itemVisiblePercentThreshold      | number  |
+| waitForInteraction               | boolean |
+
+At least one of the `viewAreaCoveragePercentThreshold` or `itemVisiblePercentThreshold` is required. This needs to be done in the `constructor` to avoid following error ([ref](https://github.com/facebook/react-native/issues/17408)):
+
+```
+  Error: Changing viewabilityConfig on the fly is not supported
+```
+
+```tsx
+constructor (props) {
+  super(props)
+
+  this.viewabilityConfig = {
+      waitForInteraction: true,
+      viewAreaCoveragePercentThreshold: 95
+  }
+}
+```
+
+```tsx
+<FlatList
+    viewabilityConfig={this.viewabilityConfig}
+  ...
+```
+
+#### minimumViewTime
+
+Minimum amount of time (in milliseconds) that an item must be physically viewable before the viewability callback will be fired. A high number means that scrolling through content without stopping will not mark the content as viewable.
+
+#### viewAreaCoveragePercentThreshold
+
+Percent of viewport that must be covered for a partially occluded item to count as "viewable", 0-100. Fully visible items are always considered viewable. A value of 0 means that a single pixel in the viewport makes the item viewable, and a value of 100 means that an item must be either entirely visible or cover the entire viewport to count as viewable.
+
+#### itemVisiblePercentThreshold
+
+Similar to `viewAreaCoveragePercentThreshold`, but considers the percent of the item that is visible, rather than the fraction of the viewable area it covers.
+
+#### waitForInteraction
+
+Nothing is considered viewable until the user scrolls or `recordInteraction` is called after render.
+
+---
+
+### `viewabilityConfigCallbackPairs`
+
+List of `ViewabilityConfig`/`onViewableItemsChanged` pairs. A specific `onViewableItemsChanged` will be called when its corresponding `ViewabilityConfig`'s conditions are met. See `ViewabilityHelper.js` for flow type and further documentation.
+
+| Type                                   |
+| -------------------------------------- |
+| array of ViewabilityConfigCallbackPair |
+
+## Methods
+
+### `flashScrollIndicators()`
+
+```tsx
+flashScrollIndicators();
+```
+
+Displays the scroll indicators momentarily.
+
+---
+
+### `getNativeScrollRef()`
+
+```tsx
+getNativeScrollRef(): React.ElementRef<typeof ScrollViewComponent>;
+```
+
+Provides a reference to the underlying scroll component
+
+---
+
+### `getScrollResponder()`
+
+```tsx
+getScrollResponder(): ScrollResponderMixin;
+```
+
+Provides a handle to the underlying scroll responder.
+
+---
+
+### `getScrollableNode()`
+
+```tsx
+getScrollableNode(): any;
+```
+
+Provides a handle to the underlying scroll node.
+
+### `scrollToEnd()`
+
+```tsx
+scrollToEnd(params?: {animated?: boolean});
+```
+
+Scrolls to the end of the content. May be janky without `getItemLayout` prop.
+
+**Parameters:**
+
+| Name   | Type   |
+| ------ | ------ |
+| params | object |
+
+Valid `params` keys are:
+
+- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
+
+---
+
+### `scrollToIndex()`
+
+```tsx
+scrollToIndex: (params: {
+  index: number;
+  animated?: boolean;
+  viewOffset?: number;
+  viewPosition?: number;
+});
+```
+
+Scrolls to the item at the specified index such that it is positioned in the viewable area such that `viewPosition` 0 places it at the top, 1 at the bottom, and 0.5 centered in the middle.
+
+:::note
+Cannot scroll to locations outside the render window without specifying the `getItemLayout` prop.
+:::
+
+**Parameters:**
+
+| Name                                                        | Type   |
+| ----------------------------------------------------------- | ------ |
+| params <div className="label basic required">Required</div> | object |
+
+Valid `params` keys are:
+
+- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
+- 'index' (number) - The index to scroll to. Required.
+- 'viewOffset' (number) - A fixed number of pixels to offset the final target position.
+- 'viewPosition' (number) - A value of `0` places the item specified by index at the top, `1` at the bottom, and `0.5` centered in the middle.
+
+---
+
+### `scrollToItem()`
+
+```tsx
+scrollToItem(params: {
+  animated?: ?boolean,
+  item: Item,
+  viewPosition?: number,
+});
+```
+
+Requires linear scan through data - use `scrollToIndex` instead if possible.
+
+:::note
+Cannot scroll to locations outside the render window without specifying the `getItemLayout` prop.
+:::
+
+**Parameters:**
+
+| Name                                                        | Type   |
+| ----------------------------------------------------------- | ------ |
+| params <div className="label basic required">Required</div> | object |
+
+Valid `params` keys are:
+
+- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
+- 'item' (object) - The item to scroll to. Required.
+- 'viewPosition' (number)
+
+---
+
+### `scrollToOffset()`
+
+```tsx
+scrollToOffset(params: {
+  offset: number;
+  animated?: boolean;
+});
+```
+
+Scroll to a specific content pixel offset in the list.
+
+**Parameters:**
+
+| Name                                                        | Type   |
+| ----------------------------------------------------------- | ------ |
+| params <div className="label basic required">Required</div> | object |
+
+Valid `params` keys are:
+
+- 'offset' (number) - The offset to scroll to. In case of `horizontal` being true, the offset is the x-value, in any other case the offset is the y-value. Required.
+- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
diff --git a/website/versioned_docs/version-0.85/flexbox.md b/website/versioned_docs/version-0.85/flexbox.md
index 039a7bdf60b..b745c9684ef 100644
--- a/website/versioned_docs/version-0.85/flexbox.md
+++ b/website/versioned_docs/version-0.85/flexbox.md
@@ -1,2884 +1,2883 @@
----
-id: flexbox
-title: Layout with Flexbox
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-A component can specify the layout of its children using the Flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes.
-
-You will normally use a combination of `flexDirection`, `alignItems`, and `justifyContent` to achieve the right layout.
-
-:::caution
-Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions.
-The defaults are different, with `flexDirection` defaulting to `column` instead of `row`, `alignContent` defaulting to `flex-start` instead of `stretch`, `flexShrink` defaulting to `0` instead of `1`, the `flex` parameter only supporting a single number.
-:::
-
-## Flex
-
-[`flex`](layout-props#flex) will define how your items are going to **“fill”** over the available space along your main axis. Space will be divided according to each element's flex property.
-
-In the following example, the red, orange, and green views are all children in the container view that has `flex: 1` set. The red view uses `flex: 1` , the orange view uses `flex: 2`, and the green view uses `flex: 3` . **1+2+3 = 6**, which means that the red view will get `1/6` of the space, the orange `2/6` of the space, and the green `3/6` of the space.
-
-```SnackPlayer name=Flex%20Example
-import React from 'react';
-import {StyleSheet, View} from 'react-native';
-
-const Flex = () => {
-  return (
-    <View
-      style={[
-        styles.container,
-        {
-          // Try setting `flexDirection` to `"row"`.
-          flexDirection: 'column',
-        },
-      ]}>
-      <View style={{flex: 1, backgroundColor: 'red'}} />
-      <View style={{flex: 2, backgroundColor: 'darkorange'}} />
-      <View style={{flex: 3, backgroundColor: 'green'}} />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 20,
-  },
-});
-
-export default Flex;
-```
-
-## Flex Direction
-
-[`flexDirection`](layout-props#flexdirection) controls the direction in which the children of a node are laid out. This is also referred to as the main axis. The cross axis is the axis perpendicular to the main axis, or the axis which the wrapping lines are laid out in.
-
-- `column` (**default value**) Align children from top to bottom. If wrapping is enabled, then the next line will start to the right of the first item on the top of the container.
-
-- `row` Align children from left to right. If wrapping is enabled, then the next line will start under the first item on the left of the container.
-
-- `column-reverse` Align children from bottom to top. If wrapping is enabled, then the next line will start to the right of the first item on the bottom of the container.
-
-- `row-reverse` Align children from right to left. If wrapping is enabled, then the next line will start under the first item on the right of the container.
-
-You can learn more [here](https://www.yogalayout.dev/docs/styling/flex-direction).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Flex%20Direction&ext=js
-import React, {useState} from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
-
-const FlexDirectionBasics = () => {
-  const [flexDirection, setflexDirection] = useState('column');
-
-  return (
-    <PreviewLayout
-      label="flexDirection"
-      values={['column', 'row', 'column-reverse', 'row-reverse']}
-      selectedValue={flexDirection}
-      setSelectedValue={setflexDirection}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default FlexDirectionBasics;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Flex%20Direction&ext=tsx
-import React, {useState} from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const FlexDirectionBasics = () => {
-  const [flexDirection, setflexDirection] = useState('column');
-
-  return (
-    <PreviewLayout
-      label="flexDirection"
-      values={['column', 'row', 'column-reverse', 'row-reverse']}
-      selectedValue={flexDirection}
-      setSelectedValue={setflexDirection}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default FlexDirectionBasics;
-```
-
-</TabItem>
-</Tabs>
-
-## Layout Direction
-
-Layout [`direction`](layout-props#direction) specifies the direction in which children and text in a hierarchy should be laid out. Layout direction also affects what edge `start` and `end` refer to. By default, React Native lays out with LTR layout direction. In this mode `start` refers to left and `end` refers to right.
-
-- `LTR` (**default value**) Text and children are laid out from left to right. Margin and padding applied to the start of an element are applied on the left side.
-
-- `RTL` Text and children are laid out from right to left. Margin and padding applied to the start of an element are applied on the right side.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Flex%20Direction&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const DirectionLayout = () => {
-  const [direction, setDirection] = useState('ltr');
-
-  return (
-    <PreviewLayout
-      label="direction"
-      selectedValue={direction}
-      values={['ltr', 'rtl']}
-      setSelectedValue={setDirection}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default DirectionLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Flex%20Direction&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const DirectionLayout = () => {
-  const [direction, setDirection] = useState('ltr');
-
-  return (
-    <PreviewLayout
-      label="direction"
-      selectedValue={direction}
-      values={['ltr', 'rtl']}
-      setSelectedValue={setDirection}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default DirectionLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## Justify Content
-
-[`justifyContent`](layout-props#justifycontent) describes how to align children within the main axis of their container. For example, you can use this property to center a child horizontally within a container with `flexDirection` set to `row` or vertically within a container with `flexDirection` set to `column`.
-
-- `flex-start`(**default value**) Align children of a container to the start of the container's main axis.
-
-- `flex-end` Align children of a container to the end of the container's main axis.
-
-- `center` Align children of a container in the center of the container's main axis.
-
-- `space-between` Evenly space off children across the container's main axis, distributing the remaining space between the children.
-
-- `space-around` Evenly space off children across the container's main axis, distributing the remaining space around the children. Compared to `space-between`, using `space-around` will result in space being distributed to the beginning of the first child and end of the last child.
-
-- `space-evenly` Evenly distribute children within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.
-
-You can learn more [here](https://www.yogalayout.dev/docs/styling/justify-content).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Justify%20Content&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const JustifyContentBasics = () => {
-  const [justifyContent, setJustifyContent] = useState('flex-start');
-
-  return (
-    <PreviewLayout
-      label="justifyContent"
-      selectedValue={justifyContent}
-      values={[
-        'flex-start',
-        'flex-end',
-        'center',
-        'space-between',
-        'space-around',
-        'space-evenly',
-      ]}
-      setSelectedValue={setJustifyContent}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default JustifyContentBasics;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Justify%20Content&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const JustifyContentBasics = () => {
-  const [justifyContent, setJustifyContent] = useState('flex-start');
-
-  return (
-    <PreviewLayout
-      label="justifyContent"
-      selectedValue={justifyContent}
-      values={[
-        'flex-start',
-        'flex-end',
-        'center',
-        'space-between',
-        'space-around',
-        'space-evenly',
-      ]}
-      setSelectedValue={setJustifyContent}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default JustifyContentBasics;
-```
-
-</TabItem>
-</Tabs>
-
-## Align Items
-
-[`alignItems`](layout-props#alignitems) describes how to align children along the cross axis of their container. It is very similar to `justifyContent` but instead of applying to the main axis, `alignItems` applies to the cross axis.
-
-- `stretch` (**default value**) Stretch children of a container to match the `height` of the container's cross axis.
-
-- `flex-start` Align children of a container to the start of the container's cross axis.
-
-- `flex-end` Align children of a container to the end of the container's cross axis.
-
-- `center` Align children of a container in the center of the container's cross axis.
-
-- `baseline` Align children of a container along a common baseline. Individual children can be set to be the reference baseline for their parents.
-
-:::info
-For `stretch` to have an effect, children must not have a fixed dimension along the secondary axis. In the following example, setting `alignItems: stretch` does nothing until the `width: 50` is removed from the children.
-:::
-
-You can learn more [here](https://www.yogalayout.dev/docs/styling/align-items-self).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Align%20Items&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const AlignItemsLayout = () => {
-  const [alignItems, setAlignItems] = useState('stretch');
-
-  return (
-    <PreviewLayout
-      label="alignItems"
-      selectedValue={alignItems}
-      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
-      setSelectedValue={setAlignItems}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View
-        style={[
-          styles.box,
-          {
-            backgroundColor: 'steelblue',
-            width: 'auto',
-            minWidth: 50,
-          },
-        ]}
-      />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignItemsLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Align%20Items&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const AlignItemsLayout = () => {
-  const [alignItems, setAlignItems] = useState('stretch');
-
-  return (
-    <PreviewLayout
-      label="alignItems"
-      selectedValue={alignItems}
-      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
-      setSelectedValue={setAlignItems}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View
-        style={[
-          styles.box,
-          {
-            backgroundColor: 'steelblue',
-            width: 'auto',
-            minWidth: 50,
-          },
-        ]}
-      />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignItemsLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## Align Self
-
-[`alignSelf`](layout-props#alignself) has the same options and effect as `alignItems` but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent. `alignSelf` overrides any option set by the parent with `alignItems`.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Align%20Self&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const AlignSelfLayout = () => {
-  const [alignSelf, setAlignSelf] = useState('stretch');
-
-  return (
-    <PreviewLayout
-      label="alignSelf"
-      selectedValue={alignSelf}
-      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
-      setSelectedValue={setAlignSelf}>
-      <View
-        style={[
-          styles.box,
-          {
-            alignSelf,
-            width: 'auto',
-            minWidth: 50,
-            backgroundColor: 'powderblue',
-          },
-        ]}
-      />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={styles.container}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignSelfLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Align%20Self&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-import type {FlexAlignType} from 'react-native';
-
-const AlignSelfLayout = () => {
-  const [alignSelf, setAlignSelf] = useState<FlexAlignType>('stretch');
-
-  return (
-    <PreviewLayout
-      label="alignSelf"
-      selectedValue={alignSelf}
-      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
-      setSelectedValue={setAlignSelf}>
-      <View
-        style={[
-          styles.box,
-          {
-            alignSelf,
-            width: 'auto',
-            minWidth: 50,
-            backgroundColor: 'powderblue',
-          },
-        ]}
-      />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: FlexAlignType[];
-  selectedValue: string;
-  setSelectedValue: (value: FlexAlignType) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={styles.container}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignSelfLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## Align Content
-
-[alignContent](layout-props#aligncontent) defines the distribution of lines along the cross-axis. This only has effect when items are wrapped to multiple lines using `flexWrap`.
-
-- `flex-start` (**default value**) Align wrapped lines to the start of the container's cross axis.
-
-- `flex-end` Align wrapped lines to the end of the container's cross axis.
-
-- `stretch` (_default value when using Yoga on the web_) Stretch wrapped lines to match the height of the container's cross axis.
-
-- `center` Align wrapped lines in the center of the container's cross axis.
-
-- `space-between` Evenly space wrapped lines across the container's cross axis, distributing the remaining space between the lines.
-
-- `space-around` Evenly space wrapped lines across the container's cross axis, distributing the remaining space around the lines. Each end of the container has a half-sized space compared to the space between items.
-
-- `space-evenly` Evenly space wrapped lines across the container's cross axis, distributing the remaining space around the lines. Each space is the same size.
-
-You can learn more [here](https://www.yogalayout.dev/docs/styling/align-content).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Align%20Content&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const AlignContentLayout = () => {
-  const [alignContent, setAlignContent] = useState('flex-start');
-
-  return (
-    <PreviewLayout
-      label="alignContent"
-      selectedValue={alignContent}
-      values={[
-        'flex-start',
-        'flex-end',
-        'stretch',
-        'center',
-        'space-between',
-        'space-around',
-      ]}
-      setSelectedValue={setAlignContent}>
-      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
-      <View style={[styles.box, {backgroundColor: 'orange'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
-      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'purple'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexWrap: 'wrap',
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignContentLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Align%20Content&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const AlignContentLayout = () => {
-  const [alignContent, setAlignContent] = useState('flex-start');
-
-  return (
-    <PreviewLayout
-      label="alignContent"
-      selectedValue={alignContent}
-      values={[
-        'flex-start',
-        'flex-end',
-        'stretch',
-        'center',
-        'space-between',
-        'space-around',
-      ]}
-      setSelectedValue={setAlignContent}>
-      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
-      <View style={[styles.box, {backgroundColor: 'orange'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
-      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'purple'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexWrap: 'wrap',
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignContentLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## Flex Wrap
-
-The [`flexWrap`](layout-props#flexwrap) property is set on containers and it controls what happens when children overflow the size of the container along the main axis. By default, children are forced into a single line (which can shrink elements). If wrapping is allowed, items are wrapped into multiple lines along the main axis if needed.
-
-When wrapping lines, `alignContent` can be used to specify how the lines are placed in the container. Learn more [here](https://www.yogalayout.dev/docs/styling/flex-wrap).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Flex%20Wrap&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const FlexWrapLayout = () => {
-  const [flexWrap, setFlexWrap] = useState('wrap');
-
-  return (
-    <PreviewLayout
-      label="flexWrap"
-      selectedValue={flexWrap}
-      values={['wrap', 'nowrap']}
-      setSelectedValue={setFlexWrap}>
-      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
-      <View style={[styles.box, {backgroundColor: 'orange'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
-      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'purple'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default FlexWrapLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Flex%20Wrap&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const FlexWrapLayout = () => {
-  const [flexWrap, setFlexWrap] = useState('wrap');
-
-  return (
-    <PreviewLayout
-      label="flexWrap"
-      selectedValue={flexWrap}
-      values={['wrap', 'nowrap']}
-      setSelectedValue={setFlexWrap}>
-      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
-      <View style={[styles.box, {backgroundColor: 'orange'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
-      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'purple'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default FlexWrapLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## Flex Basis, Grow, and Shrink
-
-- [`flexBasis`](layout-props#flexbasis) is an axis-independent way of providing the default size of an item along the main axis. Setting the `flexBasis` of a child is similar to setting the `width` of that child if its parent is a container with `flexDirection: row` or setting the `height` of a child if its parent is a container with `flexDirection: column`. The `flexBasis` of an item is the default size of that item, the size of the item before any `flexGrow` and `flexShrink` calculations are performed.
-
-- [`flexGrow`](layout-props#flexgrow) describes how much space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
-
-  `flexGrow` accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the children’s `flexGrow` values.
-
-- [`flexShrink`](layout-props#flexshrink) describes how to shrink children along the main axis in the case in which the total size of the children overflows the size of the container on the main axis. `flexShrink` is very similar to `flexGrow` and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed.
-
-  `flexShrink` accepts any floating point value >= 0, with 0 being the default value (on the web, the default is 1). A container will shrink its children weighted by the children’s `flexShrink` values.
-
-You can learn more [here](https://www.yogalayout.dev/docs/styling/flex-basis-grow-shrink).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink&ext=js
-import React, {useState} from 'react';
-import {View, Text, TextInput, StyleSheet} from 'react-native';
-
-const App = () => {
-  const [powderblue, setPowderblue] = useState({
-    flexGrow: 0,
-    flexShrink: 1,
-    flexBasis: 'auto',
-  });
-  const [skyblue, setSkyblue] = useState({
-    flexGrow: 1,
-    flexShrink: 0,
-    flexBasis: 100,
-  });
-  const [steelblue, setSteelblue] = useState({
-    flexGrow: 0,
-    flexShrink: 1,
-    flexBasis: 200,
-  });
-  return (
-    <View style={styles.container}>
-      <View
-        style={[
-          styles.container,
-          {
-            flexDirection: 'row',
-            alignContent: 'space-between',
-          },
-        ]}>
-        <BoxInfo color="powderblue" {...powderblue} setStyle={setPowderblue} />
-        <BoxInfo color="skyblue" {...skyblue} setStyle={setSkyblue} />
-        <BoxInfo color="steelblue" {...steelblue} setStyle={setSteelblue} />
-      </View>
-      <View style={styles.previewContainer}>
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: powderblue.flexBasis,
-              flexGrow: powderblue.flexGrow,
-              flexShrink: powderblue.flexShrink,
-              backgroundColor: 'powderblue',
-            },
-          ]}
-        />
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: skyblue.flexBasis,
-              flexGrow: skyblue.flexGrow,
-              flexShrink: skyblue.flexShrink,
-              backgroundColor: 'skyblue',
-            },
-          ]}
-        />
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: steelblue.flexBasis,
-              flexGrow: steelblue.flexGrow,
-              flexShrink: steelblue.flexShrink,
-              backgroundColor: 'steelblue',
-            },
-          ]}
-        />
-      </View>
-    </View>
-  );
-};
-
-const BoxInfo = ({color, flexBasis, flexShrink, setStyle, flexGrow}) => (
-  <View style={[styles.row, {flexDirection: 'column'}]}>
-    <View
-      style={[
-        styles.boxLabel,
-        {
-          backgroundColor: color,
-        },
-      ]}>
-      <Text
-        style={{
-          color: '#fff',
-          fontWeight: '500',
-          textAlign: 'center',
-        }}>
-        Box
-      </Text>
-    </View>
-    <Text style={styles.label}>flexBasis</Text>
-    <TextInput
-      value={flexBasis}
-      style={styles.input}
-      onChangeText={fB =>
-        setStyle(value => ({
-          ...value,
-          flexBasis: isNaN(parseInt(fB, 10)) ? 'auto' : parseInt(fB, 10),
-        }))
-      }
-    />
-    <Text style={styles.label}>flexShrink</Text>
-    <TextInput
-      value={flexShrink}
-      style={styles.input}
-      onChangeText={fS =>
-        setStyle(value => ({
-          ...value,
-          flexShrink: isNaN(parseInt(fS, 10)) ? undefined : parseInt(fS, 10),
-        }))
-      }
-    />
-    <Text style={styles.label}>flexGrow</Text>
-    <TextInput
-      value={flexGrow}
-      style={styles.input}
-      onChangeText={fG =>
-        setStyle(value => ({
-          ...value,
-          flexGrow: isNaN(parseInt(fG, 10)) ? undefined : parseInt(fG, 10),
-        }))
-      }
-    />
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingHorizontal: 10,
-  },
-  box: {
-    flex: 1,
-    height: 50,
-    width: 50,
-  },
-  boxLabel: {
-    minWidth: 80,
-    padding: 8,
-    borderRadius: 4,
-    marginTop: 8,
-  },
-  label: {
-    marginTop: 6,
-    fontSize: 16,
-    fontWeight: '100',
-  },
-  previewContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    backgroundColor: 'aliceblue',
-  },
-  row: {
-    flex: 1,
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    marginBottom: 10,
-  },
-  input: {
-    borderBottomWidth: 1,
-    paddingVertical: 3,
-    width: 50,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink&ext=tsx
-import React, {useState} from 'react';
-import {View, Text, TextInput, StyleSheet} from 'react-native';
-import type {ViewStyle} from 'react-native';
-
-const App = () => {
-  const [powderblue, setPowderblue] = useState<ViewStyle>({
-    flexGrow: 0,
-    flexShrink: 1,
-    flexBasis: 'auto',
-  });
-  const [skyblue, setSkyblue] = useState<ViewStyle>({
-    flexGrow: 1,
-    flexShrink: 0,
-    flexBasis: 100,
-  });
-  const [steelblue, setSteelblue] = useState<ViewStyle>({
-    flexGrow: 0,
-    flexShrink: 1,
-    flexBasis: 200,
-  });
-  return (
-    <View style={styles.container}>
-      <View
-        style={[
-          styles.container,
-          {
-            flexDirection: 'row',
-            alignContent: 'space-between',
-          },
-        ]}>
-        <BoxInfo color="powderblue" {...powderblue} setStyle={setPowderblue} />
-        <BoxInfo color="skyblue" {...skyblue} setStyle={setSkyblue} />
-        <BoxInfo color="steelblue" {...steelblue} setStyle={setSteelblue} />
-      </View>
-      <View style={styles.previewContainer}>
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: powderblue.flexBasis,
-              flexGrow: powderblue.flexGrow,
-              flexShrink: powderblue.flexShrink,
-              backgroundColor: 'powderblue',
-            },
-          ]}
-        />
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: skyblue.flexBasis,
-              flexGrow: skyblue.flexGrow,
-              flexShrink: skyblue.flexShrink,
-              backgroundColor: 'skyblue',
-            },
-          ]}
-        />
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: steelblue.flexBasis,
-              flexGrow: steelblue.flexGrow,
-              flexShrink: steelblue.flexShrink,
-              backgroundColor: 'steelblue',
-            },
-          ]}
-        />
-      </View>
-    </View>
-  );
-};
-
-type BoxInfoProps = ViewStyle & {
-  color: string;
-  setStyle: React.Dispatch<React.SetStateAction<ViewStyle>>;
-};
-
-const BoxInfo = ({
-  color,
-  flexBasis,
-  flexShrink,
-  setStyle,
-  flexGrow,
-}: BoxInfoProps) => (
-  <View style={[styles.row, {flexDirection: 'column'}]}>
-    <View
-      style={[
-        styles.boxLabel,
-        {
-          backgroundColor: color,
-        },
-      ]}>
-      <Text
-        style={{
-          color: '#fff',
-          fontWeight: '500',
-          textAlign: 'center',
-        }}>
-        Box
-      </Text>
-    </View>
-    <Text style={styles.label}>flexBasis</Text>
-    <TextInput
-      value={String(flexBasis)}
-      style={styles.input}
-      onChangeText={fB =>
-        setStyle(value => ({
-          ...value,
-          flexBasis: isNaN(parseInt(fB, 10)) ? 'auto' : parseInt(fB, 10),
-        }))
-      }
-    />
-    <Text style={styles.label}>flexShrink</Text>
-    <TextInput
-      value={String(flexShrink)}
-      style={styles.input}
-      onChangeText={fS =>
-        setStyle(value => ({
-          ...value,
-          flexShrink: isNaN(parseInt(fS, 10)) ? undefined : parseInt(fS, 10),
-        }))
-      }
-    />
-    <Text style={styles.label}>flexGrow</Text>
-    <TextInput
-      value={String(flexGrow)}
-      style={styles.input}
-      onChangeText={fG =>
-        setStyle(value => ({
-          ...value,
-          flexGrow: isNaN(parseInt(fG, 10)) ? undefined : parseInt(fG, 10),
-        }))
-      }
-    />
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingHorizontal: 10,
-  },
-  box: {
-    flex: 1,
-    height: 50,
-    width: 50,
-  },
-  boxLabel: {
-    minWidth: 80,
-    padding: 8,
-    borderRadius: 4,
-    marginTop: 8,
-  },
-  label: {
-    marginTop: 6,
-    fontSize: 16,
-    fontWeight: '100',
-  },
-  previewContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    backgroundColor: 'aliceblue',
-  },
-  row: {
-    flex: 1,
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    marginBottom: 10,
-  },
-  input: {
-    borderBottomWidth: 1,
-    paddingVertical: 3,
-    width: 50,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-## Row Gap, Column Gap and Gap
-
-- [`rowGap`](layout-props#rowgap) sets the size of the gap (gutter) between an element's rows.
-
-- [`columnGap`](layout-props#columngap) sets the size of the gap (gutter) between an element's columns.
-
-- [`gap`](layout-props#gap) sets the size of the gap (gutter) between rows and columns. It is a shorthand for `rowGap` and `columnGap`.
-
-You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Row%20Gap%20and%20Column%20Gap&ext=js
-import React, {useState} from 'react';
-import {View, Text, StyleSheet, TextInput} from 'react-native';
-
-const RowGapAndColumnGap = () => {
-  const [rowGap, setRowGap] = useState(10);
-  const [columnGap, setColumnGap] = useState(10);
-
-  return (
-    <PreviewLayout
-      columnGap={columnGap}
-      handleColumnGapChange={setColumnGap}
-      rowGap={rowGap}
-      handleRowGapChange={setRowGap}>
-      <View style={[styles.box, styles.box1]} />
-      <View style={[styles.box, styles.box2]} />
-      <View style={[styles.box, styles.box3]} />
-      <View style={[styles.box, styles.box4]} />
-      <View style={[styles.box, styles.box5]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  children,
-  handleColumnGapChange,
-  handleRowGapChange,
-  rowGap,
-  columnGap,
-}) => (
-  <View style={styles.previewContainer}>
-    <View style={styles.inputContainer}>
-      <View style={styles.itemsCenter}>
-        <Text>Row Gap</Text>
-        <TextInput
-          style={styles.input}
-          value={rowGap}
-          onChangeText={v => handleRowGapChange(Number(v))}
-        />
-      </View>
-      <View style={styles.itemsCenter}>
-        <Text>Column Gap</Text>
-        <TextInput
-          style={styles.input}
-          value={columnGap}
-          onChangeText={v => handleColumnGapChange(Number(v))}
-        />
-      </View>
-    </View>
-    <View style={[styles.container, {rowGap, columnGap}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  itemsCenter: {alignItems: 'center'},
-  inputContainer: {
-    gap: 4,
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-  },
-  previewContainer: {padding: 10, flex: 1},
-  input: {
-    borderBottomWidth: 1,
-    paddingVertical: 3,
-    width: 50,
-    textAlign: 'center',
-  },
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-    flexWrap: 'wrap',
-    alignContent: 'flex-start',
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  box1: {
-    backgroundColor: 'orangered',
-  },
-  box2: {
-    backgroundColor: 'orange',
-  },
-  box3: {
-    backgroundColor: 'mediumseagreen',
-  },
-  box4: {
-    backgroundColor: 'deepskyblue',
-  },
-  box5: {
-    backgroundColor: 'mediumturquoise',
-  },
-});
-
-export default RowGapAndColumnGap;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Row%20Gap%20and%20Column%20Gap&ext=tsx
-import React, {useState} from 'react';
-import {View, Text, StyleSheet, TextInput} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const RowGapAndColumnGap = () => {
-  const [rowGap, setRowGap] = useState(10);
-  const [columnGap, setColumnGap] = useState(10);
-
-  return (
-    <PreviewLayout
-      columnGap={columnGap}
-      handleColumnGapChange={setColumnGap}
-      rowGap={rowGap}
-      handleRowGapChange={setRowGap}>
-      <View style={[styles.box, styles.box1]} />
-      <View style={[styles.box, styles.box2]} />
-      <View style={[styles.box, styles.box3]} />
-      <View style={[styles.box, styles.box4]} />
-      <View style={[styles.box, styles.box5]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  columnGap: number;
-  handleColumnGapChange: (gap: number) => void;
-  rowGap: number;
-  handleRowGapChange: (gap: number) => void;
-}>;
-
-const PreviewLayout = ({
-  children,
-  handleColumnGapChange,
-  handleRowGapChange,
-  rowGap,
-  columnGap,
-}: PreviewLayoutProps) => (
-  <View style={styles.previewContainer}>
-    <View style={styles.inputContainer}>
-      <View style={styles.itemsCenter}>
-        <Text>Row Gap</Text>
-        <TextInput
-          style={styles.input}
-          value={String(rowGap)}
-          onChangeText={v => handleRowGapChange(Number(v))}
-        />
-      </View>
-      <View style={styles.itemsCenter}>
-        <Text>Column Gap</Text>
-        <TextInput
-          style={styles.input}
-          value={String(columnGap)}
-          onChangeText={v => handleColumnGapChange(Number(v))}
-        />
-      </View>
-    </View>
-    <View style={[styles.container, {rowGap, columnGap}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  itemsCenter: {alignItems: 'center'},
-  inputContainer: {
-    gap: 4,
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-  },
-  previewContainer: {padding: 10, flex: 1},
-  input: {
-    borderBottomWidth: 1,
-    paddingVertical: 3,
-    width: 50,
-    textAlign: 'center',
-  },
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-    flexWrap: 'wrap',
-    alignContent: 'flex-start',
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  box1: {
-    backgroundColor: 'orangered',
-  },
-  box2: {
-    backgroundColor: 'orange',
-  },
-  box3: {
-    backgroundColor: 'mediumseagreen',
-  },
-  box4: {
-    backgroundColor: 'deepskyblue',
-  },
-  box5: {
-    backgroundColor: 'mediumturquoise',
-  },
-});
-
-export default RowGapAndColumnGap;
-```
-
-</TabItem>
-</Tabs>
-
-## Width and Height
-
-The `width` property specifies the width of an element's content area. Similarly, the `height` property specifies the height of an element's content area.
-
-Both `width` and `height` can take the following values:
-
-- `auto` (**default value**) React Native calculates the width/height for the element based on its content, whether that is other children, text, or an image.
-
-- `pixels` Defines the width/height in absolute pixels. Depending on other styles set on the component, this may or may not be the final dimension of the node.
-
-- `percentage` Defines the width or height in percentage of its parent's width or height, respectively.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Width%20and%20Height&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const WidthHeightBasics = () => {
-  const [widthType, setWidthType] = useState('auto');
-  const [heightType, setHeightType] = useState('auto');
-
-  return (
-    <PreviewLayout
-      widthType={widthType}
-      heightType={heightType}
-      widthValues={['auto', 300, '80%']}
-      heightValues={['auto', 200, '60%']}
-      setWidthType={setWidthType}
-      setHeightType={setHeightType}>
-      <View
-        style={{
-          alignSelf: 'flex-start',
-          backgroundColor: 'aliceblue',
-          height: heightType,
-          width: widthType,
-          padding: 15,
-        }}>
-        <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-        <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-        <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-      </View>
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  children,
-  widthType,
-  heightType,
-  widthValues,
-  heightValues,
-  setWidthType,
-  setHeightType,
-}) => (
-  <SafeAreaProvider>
-    <SafeAreaView style={{flex: 1, padding: 10}}>
-      <View style={styles.row}>
-        <Text style={styles.label}>width </Text>
-        {widthValues.map(value => (
-          <TouchableOpacity
-            key={value}
-            onPress={() => setWidthType(value)}
-            style={[styles.button, widthType === value && styles.selected]}>
-            <Text
-              style={[
-                styles.buttonLabel,
-                widthType === value && styles.selectedLabel,
-              ]}>
-              {value}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </View>
-      <View style={styles.row}>
-        <Text style={styles.label}>height </Text>
-        {heightValues.map(value => (
-          <TouchableOpacity
-            key={value}
-            onPress={() => setHeightType(value)}
-            style={[styles.button, heightType === value && styles.selected]}>
-            <Text
-              style={[
-                styles.buttonLabel,
-                heightType === value && styles.selectedLabel,
-              ]}>
-              {value}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </View>
-      {children}
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    padding: 8,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginRight: 10,
-    marginBottom: 10,
-  },
-  selected: {
-    backgroundColor: 'coral',
-    shadowOpacity: 0,
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default WidthHeightBasics;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Width%20and%20Height&ext=tsx
-import React, {useState, PropsWithChildren} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-type Dimension = 'auto' | `${number}%` | number;
-
-const WidthHeightBasics = () => {
-  const [widthType, setWidthType] = useState<Dimension>('auto');
-  const [heightType, setHeightType] = useState<Dimension>('auto');
-
-  return (
-    <PreviewLayout
-      widthType={widthType}
-      heightType={heightType}
-      widthValues={['auto', 300, '80%']}
-      heightValues={['auto', 200, '60%']}
-      setWidthType={setWidthType}
-      setHeightType={setHeightType}>
-      <View
-        style={{
-          alignSelf: 'flex-start',
-          backgroundColor: 'aliceblue',
-          height: heightType,
-          width: widthType,
-          padding: 15,
-        }}>
-        <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-        <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-        <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-      </View>
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  widthType: Dimension;
-  heightType: Dimension;
-  widthValues: Dimension[];
-  heightValues: Dimension[];
-  setWidthType: (value: Dimension) => void;
-  setHeightType: (value: Dimension) => void;
-}>;
-
-const PreviewLayout = ({
-  children,
-  widthType,
-  heightType,
-  widthValues,
-  heightValues,
-  setWidthType,
-  setHeightType,
-}: PreviewLayoutProps) => (
-  <SafeAreaProvider>
-    <SafeAreaView style={{flex: 1, padding: 10}}>
-      <View style={styles.row}>
-        <Text style={styles.label}>width </Text>
-        {widthValues.map(value => (
-          <TouchableOpacity
-            key={value}
-            onPress={() => setWidthType(value)}
-            style={[styles.button, widthType === value && styles.selected]}>
-            <Text
-              style={[
-                styles.buttonLabel,
-                widthType === value && styles.selectedLabel,
-              ]}>
-              {value}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </View>
-      <View style={styles.row}>
-        <Text style={styles.label}>height </Text>
-        {heightValues.map(value => (
-          <TouchableOpacity
-            key={value}
-            onPress={() => setHeightType(value)}
-            style={[styles.button, heightType === value && styles.selected]}>
-            <Text
-              style={[
-                styles.buttonLabel,
-                heightType === value && styles.selectedLabel,
-              ]}>
-              {value}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </View>
-      {children}
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    padding: 8,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginRight: 10,
-    marginBottom: 10,
-  },
-  selected: {
-    backgroundColor: 'coral',
-    shadowOpacity: 0,
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default WidthHeightBasics;
-```
-
-</TabItem>
-</Tabs>
-
-## Position
-
-The `position` type of an element defines how it is positioned relative to either itself, its parent, or its [containing block](./flexbox.md#the-containing-block).
-
-- `relative` (**default value**) By default, an element is positioned relatively. This means an element is positioned according to the normal flow of the layout, and then offset relative to that position based on the values of `top`, `right`, `bottom`, and `left`. The offset does not affect the position of any sibling or parent elements.
-
-- `absolute` When positioned absolutely, an element doesn't take part in the normal layout flow. It is instead laid out independent of its siblings. The position is determined based on the `top`, `right`, `bottom`, and `left` values. These values will position the element relative to its containing block.
-
-- `static` When positioned statically, an element is positioned according to the normal flow of layout, and will ignore the `top`, `right`, `bottom`, and `left` values. This `position` will also cause the element to not form a containing block for absolute descendants, unless some other superceding style prop is present (e.g. `transform`). This allows `absolute` elements to be positioned to something that is not their parent. Note that **`static` is only available on the New Architecture**.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Position&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const PositionLayout = () => {
-  const [position, setPosition] = useState('relative');
-
-  return (
-    <PreviewLayout
-      label="position"
-      selectedValue={position}
-      values={['relative', 'absolute', 'static']}
-      setSelectedValue={setPosition}>
-      <View
-        style={[
-          styles.box,
-          {
-            top: 25,
-            left: 25,
-            position,
-            backgroundColor: 'powderblue',
-          },
-        ]}
-      />
-      <View
-        style={[
-          styles.box,
-          {
-            top: 50,
-            left: 50,
-            position,
-            backgroundColor: 'skyblue',
-          },
-        ]}
-      />
-      <View
-        style={[
-          styles.box,
-          {
-            top: 75,
-            left: 75,
-            position,
-            backgroundColor: 'steelblue',
-          },
-        ]}
-      />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={styles.container}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default PositionLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Position&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const PositionLayout = () => {
-  const [position, setPosition] = useState<'relative' | 'absolute' | 'static'>(
-    'relative',
-  );
-
-  return (
-    <PreviewLayout
-      label="position"
-      selectedValue={position}
-      values={['relative', 'absolute', 'static']}
-      setSelectedValue={setPosition}>
-      <View
-        style={[
-          styles.box,
-          {
-            top: 25,
-            left: 25,
-            position,
-            backgroundColor: 'powderblue',
-          },
-        ]}
-      />
-      <View
-        style={[
-          styles.box,
-          {
-            top: 50,
-            left: 50,
-            position,
-            backgroundColor: 'skyblue',
-          },
-        ]}
-      />
-      <View
-        style={[
-          styles.box,
-          {
-            top: 75,
-            left: 75,
-            position,
-            backgroundColor: 'steelblue',
-          },
-        ]}
-      />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: Array<'relative' | 'absolute' | 'static'>;
-  selectedValue: string;
-  setSelectedValue: (value: 'relative' | 'absolute' | 'static') => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={styles.container}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default PositionLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## The Containing Block
-
-The containing block of an element is an ancestor element which controls its position and size.
-The way containing blocks work in React Native is very similar to [how they work on the web](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block), with some simplifications due to the lack of some web features.
-
-The `top`, `right`, `bottom`, and `left` values of an absolutely positioned element will be
-relative to its containing block.
-
-Percentage lengths (e.g.: `width: '50%'` or `padding: '10%'`) applied to absolutely positioned elements will be calculated relatively to the size of its containing block. For example, if the containing block is 100 points wide, then `width: 50%` on an absolutely positioned element will cause it to be 50 points wide.
-
-The following list will help you determine the containing block of any given element:
-
-- If that element has a `position` type of `relative` or `static`, then its containing block is its parent.
-- If that element has a `position` type of `absolute`, then its containing block is the nearest ancestor in which one of the following is true:
-  - It has a `position` type other than `static`
-  - It has a `transform`
-
-## Going Deeper
-
-Check out the interactive [yoga playground](https://www.yogalayout.dev/playground) that you can use to get a better understanding of flexbox.
-
-We've covered the basics, but there are many other styles you may need for layouts. The full list of props that control layout is documented [here](./layout-props.md).
-
-Additionally, you can see some examples from [Wix Engineers](https://medium.com/wix-engineering/the-full-react-native-layout-cheat-sheet-a4147802405c).
+---
+id: flexbox
+title: Layout with Flexbox
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+A component can specify the layout of its children using the Flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes.
+
+You will normally use a combination of `flexDirection`, `alignItems`, and `justifyContent` to achieve the right layout.
+
+:::caution
+Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions.
+The defaults are different, with `flexDirection` defaulting to `column` instead of `row`, `alignContent` defaulting to `flex-start` instead of `stretch`, `flexShrink` defaulting to `0` instead of `1`, the `flex` parameter only supporting a single number.
+:::
+
+## Flex
+
+[`flex`](layout-props#flex) will define how your items are going to **“fill”** over the available space along your main axis. Space will be divided according to each element's flex property.
+
+In the following example, the red, orange, and green views are all children in the container view that has `flex: 1` set. The red view uses `flex: 1` , the orange view uses `flex: 2`, and the green view uses `flex: 3` . **1+2+3 = 6**, which means that the red view will get `1/6` of the space, the orange `2/6` of the space, and the green `3/6` of the space.
+
+```SnackPlayer name=Flex%20Example
+import {StyleSheet, View} from 'react-native';
+
+const Flex = () => {
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          // Try setting `flexDirection` to `"row"`.
+          flexDirection: 'column',
+        },
+      ]}>
+      <View style={{flex: 1, backgroundColor: 'red'}} />
+      <View style={{flex: 2, backgroundColor: 'darkorange'}} />
+      <View style={{flex: 3, backgroundColor: 'green'}} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+  },
+});
+
+export default Flex;
+```
+
+## Flex Direction
+
+[`flexDirection`](layout-props#flexdirection) controls the direction in which the children of a node are laid out. This is also referred to as the main axis. The cross axis is the axis perpendicular to the main axis, or the axis which the wrapping lines are laid out in.
+
+- `column` (**default value**) Align children from top to bottom. If wrapping is enabled, then the next line will start to the right of the first item on the top of the container.
+
+- `row` Align children from left to right. If wrapping is enabled, then the next line will start under the first item on the left of the container.
+
+- `column-reverse` Align children from bottom to top. If wrapping is enabled, then the next line will start to the right of the first item on the bottom of the container.
+
+- `row-reverse` Align children from right to left. If wrapping is enabled, then the next line will start under the first item on the right of the container.
+
+You can learn more [here](https://www.yogalayout.dev/docs/styling/flex-direction).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Flex%20Direction&ext=js
+import {useState} from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+
+const FlexDirectionBasics = () => {
+  const [flexDirection, setflexDirection] = useState('column');
+
+  return (
+    <PreviewLayout
+      label="flexDirection"
+      values={['column', 'row', 'column-reverse', 'row-reverse']}
+      selectedValue={flexDirection}
+      setSelectedValue={setflexDirection}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default FlexDirectionBasics;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Flex%20Direction&ext=tsx
+import {useState} from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const FlexDirectionBasics = () => {
+  const [flexDirection, setflexDirection] = useState('column');
+
+  return (
+    <PreviewLayout
+      label="flexDirection"
+      values={['column', 'row', 'column-reverse', 'row-reverse']}
+      selectedValue={flexDirection}
+      setSelectedValue={setflexDirection}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default FlexDirectionBasics;
+```
+
+</TabItem>
+</Tabs>
+
+## Layout Direction
+
+Layout [`direction`](layout-props#direction) specifies the direction in which children and text in a hierarchy should be laid out. Layout direction also affects what edge `start` and `end` refer to. By default, React Native lays out with LTR layout direction. In this mode `start` refers to left and `end` refers to right.
+
+- `LTR` (**default value**) Text and children are laid out from left to right. Margin and padding applied to the start of an element are applied on the left side.
+
+- `RTL` Text and children are laid out from right to left. Margin and padding applied to the start of an element are applied on the right side.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Flex%20Direction&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const DirectionLayout = () => {
+  const [direction, setDirection] = useState('ltr');
+
+  return (
+    <PreviewLayout
+      label="direction"
+      selectedValue={direction}
+      values={['ltr', 'rtl']}
+      setSelectedValue={setDirection}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default DirectionLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Flex%20Direction&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const DirectionLayout = () => {
+  const [direction, setDirection] = useState('ltr');
+
+  return (
+    <PreviewLayout
+      label="direction"
+      selectedValue={direction}
+      values={['ltr', 'rtl']}
+      setSelectedValue={setDirection}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default DirectionLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## Justify Content
+
+[`justifyContent`](layout-props#justifycontent) describes how to align children within the main axis of their container. For example, you can use this property to center a child horizontally within a container with `flexDirection` set to `row` or vertically within a container with `flexDirection` set to `column`.
+
+- `flex-start`(**default value**) Align children of a container to the start of the container's main axis.
+
+- `flex-end` Align children of a container to the end of the container's main axis.
+
+- `center` Align children of a container in the center of the container's main axis.
+
+- `space-between` Evenly space off children across the container's main axis, distributing the remaining space between the children.
+
+- `space-around` Evenly space off children across the container's main axis, distributing the remaining space around the children. Compared to `space-between`, using `space-around` will result in space being distributed to the beginning of the first child and end of the last child.
+
+- `space-evenly` Evenly distribute children within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.
+
+You can learn more [here](https://www.yogalayout.dev/docs/styling/justify-content).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Justify%20Content&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const JustifyContentBasics = () => {
+  const [justifyContent, setJustifyContent] = useState('flex-start');
+
+  return (
+    <PreviewLayout
+      label="justifyContent"
+      selectedValue={justifyContent}
+      values={[
+        'flex-start',
+        'flex-end',
+        'center',
+        'space-between',
+        'space-around',
+        'space-evenly',
+      ]}
+      setSelectedValue={setJustifyContent}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default JustifyContentBasics;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Justify%20Content&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const JustifyContentBasics = () => {
+  const [justifyContent, setJustifyContent] = useState('flex-start');
+
+  return (
+    <PreviewLayout
+      label="justifyContent"
+      selectedValue={justifyContent}
+      values={[
+        'flex-start',
+        'flex-end',
+        'center',
+        'space-between',
+        'space-around',
+        'space-evenly',
+      ]}
+      setSelectedValue={setJustifyContent}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default JustifyContentBasics;
+```
+
+</TabItem>
+</Tabs>
+
+## Align Items
+
+[`alignItems`](layout-props#alignitems) describes how to align children along the cross axis of their container. It is very similar to `justifyContent` but instead of applying to the main axis, `alignItems` applies to the cross axis.
+
+- `stretch` (**default value**) Stretch children of a container to match the `height` of the container's cross axis.
+
+- `flex-start` Align children of a container to the start of the container's cross axis.
+
+- `flex-end` Align children of a container to the end of the container's cross axis.
+
+- `center` Align children of a container in the center of the container's cross axis.
+
+- `baseline` Align children of a container along a common baseline. Individual children can be set to be the reference baseline for their parents.
+
+:::info
+For `stretch` to have an effect, children must not have a fixed dimension along the secondary axis. In the following example, setting `alignItems: stretch` does nothing until the `width: 50` is removed from the children.
+:::
+
+You can learn more [here](https://www.yogalayout.dev/docs/styling/align-items-self).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Align%20Items&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const AlignItemsLayout = () => {
+  const [alignItems, setAlignItems] = useState('stretch');
+
+  return (
+    <PreviewLayout
+      label="alignItems"
+      selectedValue={alignItems}
+      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
+      setSelectedValue={setAlignItems}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View
+        style={[
+          styles.box,
+          {
+            backgroundColor: 'steelblue',
+            width: 'auto',
+            minWidth: 50,
+          },
+        ]}
+      />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignItemsLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Align%20Items&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const AlignItemsLayout = () => {
+  const [alignItems, setAlignItems] = useState('stretch');
+
+  return (
+    <PreviewLayout
+      label="alignItems"
+      selectedValue={alignItems}
+      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
+      setSelectedValue={setAlignItems}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View
+        style={[
+          styles.box,
+          {
+            backgroundColor: 'steelblue',
+            width: 'auto',
+            minWidth: 50,
+          },
+        ]}
+      />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignItemsLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## Align Self
+
+[`alignSelf`](layout-props#alignself) has the same options and effect as `alignItems` but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent. `alignSelf` overrides any option set by the parent with `alignItems`.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Align%20Self&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const AlignSelfLayout = () => {
+  const [alignSelf, setAlignSelf] = useState('stretch');
+
+  return (
+    <PreviewLayout
+      label="alignSelf"
+      selectedValue={alignSelf}
+      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
+      setSelectedValue={setAlignSelf}>
+      <View
+        style={[
+          styles.box,
+          {
+            alignSelf,
+            width: 'auto',
+            minWidth: 50,
+            backgroundColor: 'powderblue',
+          },
+        ]}
+      />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={styles.container}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignSelfLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Align%20Self&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+import type {FlexAlignType} from 'react-native';
+
+const AlignSelfLayout = () => {
+  const [alignSelf, setAlignSelf] = useState<FlexAlignType>('stretch');
+
+  return (
+    <PreviewLayout
+      label="alignSelf"
+      selectedValue={alignSelf}
+      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
+      setSelectedValue={setAlignSelf}>
+      <View
+        style={[
+          styles.box,
+          {
+            alignSelf,
+            width: 'auto',
+            minWidth: 50,
+            backgroundColor: 'powderblue',
+          },
+        ]}
+      />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: FlexAlignType[];
+  selectedValue: string;
+  setSelectedValue: (value: FlexAlignType) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={styles.container}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignSelfLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## Align Content
+
+[alignContent](layout-props#aligncontent) defines the distribution of lines along the cross-axis. This only has effect when items are wrapped to multiple lines using `flexWrap`.
+
+- `flex-start` (**default value**) Align wrapped lines to the start of the container's cross axis.
+
+- `flex-end` Align wrapped lines to the end of the container's cross axis.
+
+- `stretch` (_default value when using Yoga on the web_) Stretch wrapped lines to match the height of the container's cross axis.
+
+- `center` Align wrapped lines in the center of the container's cross axis.
+
+- `space-between` Evenly space wrapped lines across the container's cross axis, distributing the remaining space between the lines.
+
+- `space-around` Evenly space wrapped lines across the container's cross axis, distributing the remaining space around the lines. Each end of the container has a half-sized space compared to the space between items.
+
+- `space-evenly` Evenly space wrapped lines across the container's cross axis, distributing the remaining space around the lines. Each space is the same size.
+
+You can learn more [here](https://www.yogalayout.dev/docs/styling/align-content).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Align%20Content&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const AlignContentLayout = () => {
+  const [alignContent, setAlignContent] = useState('flex-start');
+
+  return (
+    <PreviewLayout
+      label="alignContent"
+      selectedValue={alignContent}
+      values={[
+        'flex-start',
+        'flex-end',
+        'stretch',
+        'center',
+        'space-between',
+        'space-around',
+      ]}
+      setSelectedValue={setAlignContent}>
+      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
+      <View style={[styles.box, {backgroundColor: 'orange'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
+      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'purple'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexWrap: 'wrap',
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignContentLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Align%20Content&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const AlignContentLayout = () => {
+  const [alignContent, setAlignContent] = useState('flex-start');
+
+  return (
+    <PreviewLayout
+      label="alignContent"
+      selectedValue={alignContent}
+      values={[
+        'flex-start',
+        'flex-end',
+        'stretch',
+        'center',
+        'space-between',
+        'space-around',
+      ]}
+      setSelectedValue={setAlignContent}>
+      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
+      <View style={[styles.box, {backgroundColor: 'orange'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
+      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'purple'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexWrap: 'wrap',
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignContentLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## Flex Wrap
+
+The [`flexWrap`](layout-props#flexwrap) property is set on containers and it controls what happens when children overflow the size of the container along the main axis. By default, children are forced into a single line (which can shrink elements). If wrapping is allowed, items are wrapped into multiple lines along the main axis if needed.
+
+When wrapping lines, `alignContent` can be used to specify how the lines are placed in the container. Learn more [here](https://www.yogalayout.dev/docs/styling/flex-wrap).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Flex%20Wrap&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const FlexWrapLayout = () => {
+  const [flexWrap, setFlexWrap] = useState('wrap');
+
+  return (
+    <PreviewLayout
+      label="flexWrap"
+      selectedValue={flexWrap}
+      values={['wrap', 'nowrap']}
+      setSelectedValue={setFlexWrap}>
+      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
+      <View style={[styles.box, {backgroundColor: 'orange'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
+      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'purple'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default FlexWrapLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Flex%20Wrap&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const FlexWrapLayout = () => {
+  const [flexWrap, setFlexWrap] = useState('wrap');
+
+  return (
+    <PreviewLayout
+      label="flexWrap"
+      selectedValue={flexWrap}
+      values={['wrap', 'nowrap']}
+      setSelectedValue={setFlexWrap}>
+      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
+      <View style={[styles.box, {backgroundColor: 'orange'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
+      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'purple'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default FlexWrapLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## Flex Basis, Grow, and Shrink
+
+- [`flexBasis`](layout-props#flexbasis) is an axis-independent way of providing the default size of an item along the main axis. Setting the `flexBasis` of a child is similar to setting the `width` of that child if its parent is a container with `flexDirection: row` or setting the `height` of a child if its parent is a container with `flexDirection: column`. The `flexBasis` of an item is the default size of that item, the size of the item before any `flexGrow` and `flexShrink` calculations are performed.
+
+- [`flexGrow`](layout-props#flexgrow) describes how much space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
+
+  `flexGrow` accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the children’s `flexGrow` values.
+
+- [`flexShrink`](layout-props#flexshrink) describes how to shrink children along the main axis in the case in which the total size of the children overflows the size of the container on the main axis. `flexShrink` is very similar to `flexGrow` and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed.
+
+  `flexShrink` accepts any floating point value >= 0, with 0 being the default value (on the web, the default is 1). A container will shrink its children weighted by the children’s `flexShrink` values.
+
+You can learn more [here](https://www.yogalayout.dev/docs/styling/flex-basis-grow-shrink).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink&ext=js
+import {useState} from 'react';
+import {View, Text, TextInput, StyleSheet} from 'react-native';
+
+const App = () => {
+  const [powderblue, setPowderblue] = useState({
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: 'auto',
+  });
+  const [skyblue, setSkyblue] = useState({
+    flexGrow: 1,
+    flexShrink: 0,
+    flexBasis: 100,
+  });
+  const [steelblue, setSteelblue] = useState({
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: 200,
+  });
+  return (
+    <View style={styles.container}>
+      <View
+        style={[
+          styles.container,
+          {
+            flexDirection: 'row',
+            alignContent: 'space-between',
+          },
+        ]}>
+        <BoxInfo color="powderblue" {...powderblue} setStyle={setPowderblue} />
+        <BoxInfo color="skyblue" {...skyblue} setStyle={setSkyblue} />
+        <BoxInfo color="steelblue" {...steelblue} setStyle={setSteelblue} />
+      </View>
+      <View style={styles.previewContainer}>
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: powderblue.flexBasis,
+              flexGrow: powderblue.flexGrow,
+              flexShrink: powderblue.flexShrink,
+              backgroundColor: 'powderblue',
+            },
+          ]}
+        />
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: skyblue.flexBasis,
+              flexGrow: skyblue.flexGrow,
+              flexShrink: skyblue.flexShrink,
+              backgroundColor: 'skyblue',
+            },
+          ]}
+        />
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: steelblue.flexBasis,
+              flexGrow: steelblue.flexGrow,
+              flexShrink: steelblue.flexShrink,
+              backgroundColor: 'steelblue',
+            },
+          ]}
+        />
+      </View>
+    </View>
+  );
+};
+
+const BoxInfo = ({color, flexBasis, flexShrink, setStyle, flexGrow}) => (
+  <View style={[styles.row, {flexDirection: 'column'}]}>
+    <View
+      style={[
+        styles.boxLabel,
+        {
+          backgroundColor: color,
+        },
+      ]}>
+      <Text
+        style={{
+          color: '#fff',
+          fontWeight: '500',
+          textAlign: 'center',
+        }}>
+        Box
+      </Text>
+    </View>
+    <Text style={styles.label}>flexBasis</Text>
+    <TextInput
+      value={flexBasis}
+      style={styles.input}
+      onChangeText={fB =>
+        setStyle(value => ({
+          ...value,
+          flexBasis: isNaN(parseInt(fB, 10)) ? 'auto' : parseInt(fB, 10),
+        }))
+      }
+    />
+    <Text style={styles.label}>flexShrink</Text>
+    <TextInput
+      value={flexShrink}
+      style={styles.input}
+      onChangeText={fS =>
+        setStyle(value => ({
+          ...value,
+          flexShrink: isNaN(parseInt(fS, 10)) ? undefined : parseInt(fS, 10),
+        }))
+      }
+    />
+    <Text style={styles.label}>flexGrow</Text>
+    <TextInput
+      value={flexGrow}
+      style={styles.input}
+      onChangeText={fG =>
+        setStyle(value => ({
+          ...value,
+          flexGrow: isNaN(parseInt(fG, 10)) ? undefined : parseInt(fG, 10),
+        }))
+      }
+    />
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 10,
+  },
+  box: {
+    flex: 1,
+    height: 50,
+    width: 50,
+  },
+  boxLabel: {
+    minWidth: 80,
+    padding: 8,
+    borderRadius: 4,
+    marginTop: 8,
+  },
+  label: {
+    marginTop: 6,
+    fontSize: 16,
+    fontWeight: '100',
+  },
+  previewContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    backgroundColor: 'aliceblue',
+  },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  input: {
+    borderBottomWidth: 1,
+    paddingVertical: 3,
+    width: 50,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink&ext=tsx
+import {useState, type Dispatch, type SetStateAction} from 'react';
+import {View, Text, TextInput, StyleSheet} from 'react-native';
+import type {ViewStyle} from 'react-native';
+
+const App = () => {
+  const [powderblue, setPowderblue] = useState<ViewStyle>({
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: 'auto',
+  });
+  const [skyblue, setSkyblue] = useState<ViewStyle>({
+    flexGrow: 1,
+    flexShrink: 0,
+    flexBasis: 100,
+  });
+  const [steelblue, setSteelblue] = useState<ViewStyle>({
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: 200,
+  });
+  return (
+    <View style={styles.container}>
+      <View
+        style={[
+          styles.container,
+          {
+            flexDirection: 'row',
+            alignContent: 'space-between',
+          },
+        ]}>
+        <BoxInfo color="powderblue" {...powderblue} setStyle={setPowderblue} />
+        <BoxInfo color="skyblue" {...skyblue} setStyle={setSkyblue} />
+        <BoxInfo color="steelblue" {...steelblue} setStyle={setSteelblue} />
+      </View>
+      <View style={styles.previewContainer}>
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: powderblue.flexBasis,
+              flexGrow: powderblue.flexGrow,
+              flexShrink: powderblue.flexShrink,
+              backgroundColor: 'powderblue',
+            },
+          ]}
+        />
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: skyblue.flexBasis,
+              flexGrow: skyblue.flexGrow,
+              flexShrink: skyblue.flexShrink,
+              backgroundColor: 'skyblue',
+            },
+          ]}
+        />
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: steelblue.flexBasis,
+              flexGrow: steelblue.flexGrow,
+              flexShrink: steelblue.flexShrink,
+              backgroundColor: 'steelblue',
+            },
+          ]}
+        />
+      </View>
+    </View>
+  );
+};
+
+type BoxInfoProps = ViewStyle & {
+  color: string;
+  setStyle: Dispatch<SetStateAction<ViewStyle>>;
+};
+
+const BoxInfo = ({
+  color,
+  flexBasis,
+  flexShrink,
+  setStyle,
+  flexGrow,
+}: BoxInfoProps) => (
+  <View style={[styles.row, {flexDirection: 'column'}]}>
+    <View
+      style={[
+        styles.boxLabel,
+        {
+          backgroundColor: color,
+        },
+      ]}>
+      <Text
+        style={{
+          color: '#fff',
+          fontWeight: '500',
+          textAlign: 'center',
+        }}>
+        Box
+      </Text>
+    </View>
+    <Text style={styles.label}>flexBasis</Text>
+    <TextInput
+      value={String(flexBasis)}
+      style={styles.input}
+      onChangeText={fB =>
+        setStyle(value => ({
+          ...value,
+          flexBasis: isNaN(parseInt(fB, 10)) ? 'auto' : parseInt(fB, 10),
+        }))
+      }
+    />
+    <Text style={styles.label}>flexShrink</Text>
+    <TextInput
+      value={String(flexShrink)}
+      style={styles.input}
+      onChangeText={fS =>
+        setStyle(value => ({
+          ...value,
+          flexShrink: isNaN(parseInt(fS, 10)) ? undefined : parseInt(fS, 10),
+        }))
+      }
+    />
+    <Text style={styles.label}>flexGrow</Text>
+    <TextInput
+      value={String(flexGrow)}
+      style={styles.input}
+      onChangeText={fG =>
+        setStyle(value => ({
+          ...value,
+          flexGrow: isNaN(parseInt(fG, 10)) ? undefined : parseInt(fG, 10),
+        }))
+      }
+    />
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 10,
+  },
+  box: {
+    flex: 1,
+    height: 50,
+    width: 50,
+  },
+  boxLabel: {
+    minWidth: 80,
+    padding: 8,
+    borderRadius: 4,
+    marginTop: 8,
+  },
+  label: {
+    marginTop: 6,
+    fontSize: 16,
+    fontWeight: '100',
+  },
+  previewContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    backgroundColor: 'aliceblue',
+  },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  input: {
+    borderBottomWidth: 1,
+    paddingVertical: 3,
+    width: 50,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+## Row Gap, Column Gap and Gap
+
+- [`rowGap`](layout-props#rowgap) sets the size of the gap (gutter) between an element's rows.
+
+- [`columnGap`](layout-props#columngap) sets the size of the gap (gutter) between an element's columns.
+
+- [`gap`](layout-props#gap) sets the size of the gap (gutter) between rows and columns. It is a shorthand for `rowGap` and `columnGap`.
+
+You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Row%20Gap%20and%20Column%20Gap&ext=js
+import {useState} from 'react';
+import {View, Text, StyleSheet, TextInput} from 'react-native';
+
+const RowGapAndColumnGap = () => {
+  const [rowGap, setRowGap] = useState(10);
+  const [columnGap, setColumnGap] = useState(10);
+
+  return (
+    <PreviewLayout
+      columnGap={columnGap}
+      handleColumnGapChange={setColumnGap}
+      rowGap={rowGap}
+      handleRowGapChange={setRowGap}>
+      <View style={[styles.box, styles.box1]} />
+      <View style={[styles.box, styles.box2]} />
+      <View style={[styles.box, styles.box3]} />
+      <View style={[styles.box, styles.box4]} />
+      <View style={[styles.box, styles.box5]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  children,
+  handleColumnGapChange,
+  handleRowGapChange,
+  rowGap,
+  columnGap,
+}) => (
+  <View style={styles.previewContainer}>
+    <View style={styles.inputContainer}>
+      <View style={styles.itemsCenter}>
+        <Text>Row Gap</Text>
+        <TextInput
+          style={styles.input}
+          value={rowGap}
+          onChangeText={v => handleRowGapChange(Number(v))}
+        />
+      </View>
+      <View style={styles.itemsCenter}>
+        <Text>Column Gap</Text>
+        <TextInput
+          style={styles.input}
+          value={columnGap}
+          onChangeText={v => handleColumnGapChange(Number(v))}
+        />
+      </View>
+    </View>
+    <View style={[styles.container, {rowGap, columnGap}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  itemsCenter: {alignItems: 'center'},
+  inputContainer: {
+    gap: 4,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+  previewContainer: {padding: 10, flex: 1},
+  input: {
+    borderBottomWidth: 1,
+    paddingVertical: 3,
+    width: 50,
+    textAlign: 'center',
+  },
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+    flexWrap: 'wrap',
+    alignContent: 'flex-start',
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  box1: {
+    backgroundColor: 'orangered',
+  },
+  box2: {
+    backgroundColor: 'orange',
+  },
+  box3: {
+    backgroundColor: 'mediumseagreen',
+  },
+  box4: {
+    backgroundColor: 'deepskyblue',
+  },
+  box5: {
+    backgroundColor: 'mediumturquoise',
+  },
+});
+
+export default RowGapAndColumnGap;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Row%20Gap%20and%20Column%20Gap&ext=tsx
+import {useState} from 'react';
+import {View, Text, StyleSheet, TextInput} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const RowGapAndColumnGap = () => {
+  const [rowGap, setRowGap] = useState(10);
+  const [columnGap, setColumnGap] = useState(10);
+
+  return (
+    <PreviewLayout
+      columnGap={columnGap}
+      handleColumnGapChange={setColumnGap}
+      rowGap={rowGap}
+      handleRowGapChange={setRowGap}>
+      <View style={[styles.box, styles.box1]} />
+      <View style={[styles.box, styles.box2]} />
+      <View style={[styles.box, styles.box3]} />
+      <View style={[styles.box, styles.box4]} />
+      <View style={[styles.box, styles.box5]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  columnGap: number;
+  handleColumnGapChange: (gap: number) => void;
+  rowGap: number;
+  handleRowGapChange: (gap: number) => void;
+}>;
+
+const PreviewLayout = ({
+  children,
+  handleColumnGapChange,
+  handleRowGapChange,
+  rowGap,
+  columnGap,
+}: PreviewLayoutProps) => (
+  <View style={styles.previewContainer}>
+    <View style={styles.inputContainer}>
+      <View style={styles.itemsCenter}>
+        <Text>Row Gap</Text>
+        <TextInput
+          style={styles.input}
+          value={String(rowGap)}
+          onChangeText={v => handleRowGapChange(Number(v))}
+        />
+      </View>
+      <View style={styles.itemsCenter}>
+        <Text>Column Gap</Text>
+        <TextInput
+          style={styles.input}
+          value={String(columnGap)}
+          onChangeText={v => handleColumnGapChange(Number(v))}
+        />
+      </View>
+    </View>
+    <View style={[styles.container, {rowGap, columnGap}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  itemsCenter: {alignItems: 'center'},
+  inputContainer: {
+    gap: 4,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+  previewContainer: {padding: 10, flex: 1},
+  input: {
+    borderBottomWidth: 1,
+    paddingVertical: 3,
+    width: 50,
+    textAlign: 'center',
+  },
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+    flexWrap: 'wrap',
+    alignContent: 'flex-start',
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  box1: {
+    backgroundColor: 'orangered',
+  },
+  box2: {
+    backgroundColor: 'orange',
+  },
+  box3: {
+    backgroundColor: 'mediumseagreen',
+  },
+  box4: {
+    backgroundColor: 'deepskyblue',
+  },
+  box5: {
+    backgroundColor: 'mediumturquoise',
+  },
+});
+
+export default RowGapAndColumnGap;
+```
+
+</TabItem>
+</Tabs>
+
+## Width and Height
+
+The `width` property specifies the width of an element's content area. Similarly, the `height` property specifies the height of an element's content area.
+
+Both `width` and `height` can take the following values:
+
+- `auto` (**default value**) React Native calculates the width/height for the element based on its content, whether that is other children, text, or an image.
+
+- `pixels` Defines the width/height in absolute pixels. Depending on other styles set on the component, this may or may not be the final dimension of the node.
+
+- `percentage` Defines the width or height in percentage of its parent's width or height, respectively.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Width%20and%20Height&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const WidthHeightBasics = () => {
+  const [widthType, setWidthType] = useState('auto');
+  const [heightType, setHeightType] = useState('auto');
+
+  return (
+    <PreviewLayout
+      widthType={widthType}
+      heightType={heightType}
+      widthValues={['auto', 300, '80%']}
+      heightValues={['auto', 200, '60%']}
+      setWidthType={setWidthType}
+      setHeightType={setHeightType}>
+      <View
+        style={{
+          alignSelf: 'flex-start',
+          backgroundColor: 'aliceblue',
+          height: heightType,
+          width: widthType,
+          padding: 15,
+        }}>
+        <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+        <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+        <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+      </View>
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  children,
+  widthType,
+  heightType,
+  widthValues,
+  heightValues,
+  setWidthType,
+  setHeightType,
+}) => (
+  <SafeAreaProvider>
+    <SafeAreaView style={{flex: 1, padding: 10}}>
+      <View style={styles.row}>
+        <Text style={styles.label}>width </Text>
+        {widthValues.map(value => (
+          <TouchableOpacity
+            key={value}
+            onPress={() => setWidthType(value)}
+            style={[styles.button, widthType === value && styles.selected]}>
+            <Text
+              style={[
+                styles.buttonLabel,
+                widthType === value && styles.selectedLabel,
+              ]}>
+              {value}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+      <View style={styles.row}>
+        <Text style={styles.label}>height </Text>
+        {heightValues.map(value => (
+          <TouchableOpacity
+            key={value}
+            onPress={() => setHeightType(value)}
+            style={[styles.button, heightType === value && styles.selected]}>
+            <Text
+              style={[
+                styles.buttonLabel,
+                heightType === value && styles.selectedLabel,
+              ]}>
+              {value}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+      {children}
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    padding: 8,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginRight: 10,
+    marginBottom: 10,
+  },
+  selected: {
+    backgroundColor: 'coral',
+    shadowOpacity: 0,
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default WidthHeightBasics;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Width%20and%20Height&ext=tsx
+import {useState, PropsWithChildren} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+type Dimension = 'auto' | `${number}%` | number;
+
+const WidthHeightBasics = () => {
+  const [widthType, setWidthType] = useState<Dimension>('auto');
+  const [heightType, setHeightType] = useState<Dimension>('auto');
+
+  return (
+    <PreviewLayout
+      widthType={widthType}
+      heightType={heightType}
+      widthValues={['auto', 300, '80%']}
+      heightValues={['auto', 200, '60%']}
+      setWidthType={setWidthType}
+      setHeightType={setHeightType}>
+      <View
+        style={{
+          alignSelf: 'flex-start',
+          backgroundColor: 'aliceblue',
+          height: heightType,
+          width: widthType,
+          padding: 15,
+        }}>
+        <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+        <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+        <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+      </View>
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  widthType: Dimension;
+  heightType: Dimension;
+  widthValues: Dimension[];
+  heightValues: Dimension[];
+  setWidthType: (value: Dimension) => void;
+  setHeightType: (value: Dimension) => void;
+}>;
+
+const PreviewLayout = ({
+  children,
+  widthType,
+  heightType,
+  widthValues,
+  heightValues,
+  setWidthType,
+  setHeightType,
+}: PreviewLayoutProps) => (
+  <SafeAreaProvider>
+    <SafeAreaView style={{flex: 1, padding: 10}}>
+      <View style={styles.row}>
+        <Text style={styles.label}>width </Text>
+        {widthValues.map(value => (
+          <TouchableOpacity
+            key={value}
+            onPress={() => setWidthType(value)}
+            style={[styles.button, widthType === value && styles.selected]}>
+            <Text
+              style={[
+                styles.buttonLabel,
+                widthType === value && styles.selectedLabel,
+              ]}>
+              {value}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+      <View style={styles.row}>
+        <Text style={styles.label}>height </Text>
+        {heightValues.map(value => (
+          <TouchableOpacity
+            key={value}
+            onPress={() => setHeightType(value)}
+            style={[styles.button, heightType === value && styles.selected]}>
+            <Text
+              style={[
+                styles.buttonLabel,
+                heightType === value && styles.selectedLabel,
+              ]}>
+              {value}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+      {children}
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    padding: 8,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginRight: 10,
+    marginBottom: 10,
+  },
+  selected: {
+    backgroundColor: 'coral',
+    shadowOpacity: 0,
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default WidthHeightBasics;
+```
+
+</TabItem>
+</Tabs>
+
+## Position
+
+The `position` type of an element defines how it is positioned relative to either itself, its parent, or its [containing block](./flexbox.md#the-containing-block).
+
+- `relative` (**default value**) By default, an element is positioned relatively. This means an element is positioned according to the normal flow of the layout, and then offset relative to that position based on the values of `top`, `right`, `bottom`, and `left`. The offset does not affect the position of any sibling or parent elements.
+
+- `absolute` When positioned absolutely, an element doesn't take part in the normal layout flow. It is instead laid out independent of its siblings. The position is determined based on the `top`, `right`, `bottom`, and `left` values. These values will position the element relative to its containing block.
+
+- `static` When positioned statically, an element is positioned according to the normal flow of layout, and will ignore the `top`, `right`, `bottom`, and `left` values. This `position` will also cause the element to not form a containing block for absolute descendants, unless some other superceding style prop is present (e.g. `transform`). This allows `absolute` elements to be positioned to something that is not their parent. Note that **`static` is only available on the New Architecture**.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Position&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const PositionLayout = () => {
+  const [position, setPosition] = useState('relative');
+
+  return (
+    <PreviewLayout
+      label="position"
+      selectedValue={position}
+      values={['relative', 'absolute', 'static']}
+      setSelectedValue={setPosition}>
+      <View
+        style={[
+          styles.box,
+          {
+            top: 25,
+            left: 25,
+            position,
+            backgroundColor: 'powderblue',
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.box,
+          {
+            top: 50,
+            left: 50,
+            position,
+            backgroundColor: 'skyblue',
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.box,
+          {
+            top: 75,
+            left: 75,
+            position,
+            backgroundColor: 'steelblue',
+          },
+        ]}
+      />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={styles.container}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default PositionLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Position&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const PositionLayout = () => {
+  const [position, setPosition] = useState<'relative' | 'absolute' | 'static'>(
+    'relative',
+  );
+
+  return (
+    <PreviewLayout
+      label="position"
+      selectedValue={position}
+      values={['relative', 'absolute', 'static']}
+      setSelectedValue={setPosition}>
+      <View
+        style={[
+          styles.box,
+          {
+            top: 25,
+            left: 25,
+            position,
+            backgroundColor: 'powderblue',
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.box,
+          {
+            top: 50,
+            left: 50,
+            position,
+            backgroundColor: 'skyblue',
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.box,
+          {
+            top: 75,
+            left: 75,
+            position,
+            backgroundColor: 'steelblue',
+          },
+        ]}
+      />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: Array<'relative' | 'absolute' | 'static'>;
+  selectedValue: string;
+  setSelectedValue: (value: 'relative' | 'absolute' | 'static') => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={styles.container}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default PositionLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## The Containing Block
+
+The containing block of an element is an ancestor element which controls its position and size.
+The way containing blocks work in React Native is very similar to [how they work on the web](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block), with some simplifications due to the lack of some web features.
+
+The `top`, `right`, `bottom`, and `left` values of an absolutely positioned element will be
+relative to its containing block.
+
+Percentage lengths (e.g.: `width: '50%'` or `padding: '10%'`) applied to absolutely positioned elements will be calculated relatively to the size of its containing block. For example, if the containing block is 100 points wide, then `width: 50%` on an absolutely positioned element will cause it to be 50 points wide.
+
+The following list will help you determine the containing block of any given element:
+
+- If that element has a `position` type of `relative` or `static`, then its containing block is its parent.
+- If that element has a `position` type of `absolute`, then its containing block is the nearest ancestor in which one of the following is true:
+  - It has a `position` type other than `static`
+  - It has a `transform`
+
+## Going Deeper
+
+Check out the interactive [yoga playground](https://www.yogalayout.dev/playground) that you can use to get a better understanding of flexbox.
+
+We've covered the basics, but there are many other styles you may need for layouts. The full list of props that control layout is documented [here](./layout-props.md).
+
+Additionally, you can see some examples from [Wix Engineers](https://medium.com/wix-engineering/the-full-react-native-layout-cheat-sheet-a4147802405c).
diff --git a/website/versioned_docs/version-0.85/handling-text-input.md b/website/versioned_docs/version-0.85/handling-text-input.md
index 6db00cae840..be56c292f03 100644
--- a/website/versioned_docs/version-0.85/handling-text-input.md
+++ b/website/versioned_docs/version-0.85/handling-text-input.md
@@ -1,48 +1,48 @@
----
-id: handling-text-input
-title: Handling Text Input
----
-
-[`TextInput`](textinput#content) is a [Core Component](intro-react-native-components) that allows the user to enter text. It has an `onChangeText` prop that takes a function to be called every time the text changed, and an `onSubmitEditing` prop that takes a function to be called when the text is submitted.
-
-For example, let's say that as the user types, you're translating their words into a different language. In this new language, every single word is written the same way: 🍕. So the sentence "Hello there Bob" would be translated as "🍕 🍕 🍕".
-
-```SnackPlayer name=Handling%20Text%20Input
-import React, {useState} from 'react';
-import {Text, TextInput, View} from 'react-native';
-
-const PizzaTranslator = () => {
-  const [text, setText] = useState('');
-  return (
-    <View style={{flex: 1, justifyContent: 'center'}}>
-      <TextInput
-        placeholder="Type here to translate!"
-        onChangeText={newText => setText(newText)}
-        defaultValue={text}
-        style={{
-          height: 40,
-          padding: 5,
-          marginHorizontal: 8,
-          borderWidth: 1,
-        }}
-      />
-      <Text style={{padding: 10, fontSize: 42}}>
-        {text
-          .split(' ')
-          .map(word => word && '🍕')
-          .join(' ')}
-      </Text>
-    </View>
-  );
-};
-
-export default PizzaTranslator;
-```
-
-In this example, we store `text` in the state, because it changes over time.
-
-There are a lot more things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the [React docs on controlled components](https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable), or the [reference docs for TextInput](textinput.md).
-
-A `TextInput` is one of many ways for the user to interact with your app. For examples of other ways to handle input, see the documentation on [how to handle touches](handling-touches.md).
-
-Now, let's take a look at [ScrollView](using-a-scrollview), another Core Component.
+---
+id: handling-text-input
+title: Handling Text Input
+---
+
+[`TextInput`](textinput#content) is a [Core Component](intro-react-native-components) that allows the user to enter text. It has an `onChangeText` prop that takes a function to be called every time the text changed, and an `onSubmitEditing` prop that takes a function to be called when the text is submitted.
+
+For example, let's say that as the user types, you're translating their words into a different language. In this new language, every single word is written the same way: 🍕. So the sentence "Hello there Bob" would be translated as "🍕 🍕 🍕".
+
+```SnackPlayer name=Handling%20Text%20Input
+import {useState} from 'react';
+import {Text, TextInput, View} from 'react-native';
+
+const PizzaTranslator = () => {
+  const [text, setText] = useState('');
+  return (
+    <View style={{flex: 1, justifyContent: 'center'}}>
+      <TextInput
+        placeholder="Type here to translate!"
+        onChangeText={newText => setText(newText)}
+        defaultValue={text}
+        style={{
+          height: 40,
+          padding: 5,
+          marginHorizontal: 8,
+          borderWidth: 1,
+        }}
+      />
+      <Text style={{padding: 10, fontSize: 42}}>
+        {text
+          .split(' ')
+          .map(word => word && '🍕')
+          .join(' ')}
+      </Text>
+    </View>
+  );
+};
+
+export default PizzaTranslator;
+```
+
+In this example, we store `text` in the state, because it changes over time.
+
+There are a lot more things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the [React docs on controlled components](https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable), or the [reference docs for TextInput](textinput.md).
+
+A `TextInput` is one of many ways for the user to interact with your app. For examples of other ways to handle input, see the documentation on [how to handle touches](handling-touches.md).
+
+Now, let's take a look at [ScrollView](using-a-scrollview), another Core Component.
diff --git a/website/versioned_docs/version-0.85/handling-touches.md b/website/versioned_docs/version-0.85/handling-touches.md
index 612287f6e10..b9604b393c0 100644
--- a/website/versioned_docs/version-0.85/handling-touches.md
+++ b/website/versioned_docs/version-0.85/handling-touches.md
@@ -25,7 +25,6 @@ This will render a blue label on iOS, and a blue rounded rectangle with light te
 Go ahead and play around with the `Button` component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right and then clicking on "Tap to Play" to preview the app.
 
 ```SnackPlayer name=Button%20Basics
-import React from 'react';
 import {Alert, Button, StyleSheet, View} from 'react-native';
 
 const ButtonBasics = () => {
@@ -86,7 +85,6 @@ In some cases, you may want to detect when a user presses and holds a view for a
 Let's see all of these in action:
 
 ```SnackPlayer name=Touchables
-import React from 'react';
 import {
   Alert,
   Platform,
diff --git a/website/versioned_docs/version-0.85/height-and-width.md b/website/versioned_docs/version-0.85/height-and-width.md
index 485667831cd..b768626716e 100644
--- a/website/versioned_docs/version-0.85/height-and-width.md
+++ b/website/versioned_docs/version-0.85/height-and-width.md
@@ -10,7 +10,6 @@ A component's height and width determine its size on the screen.
 The general way to set the dimensions of a component is by adding a fixed `width` and `height` to style. All dimensions in React Native are unitless, and represent density-independent pixels.
 
 ```SnackPlayer name=Height%20and%20Width
-import React from 'react';
 import {View} from 'react-native';
 
 const FixedDimensionsBasics = () => {
@@ -59,7 +58,6 @@ A component can only expand to fill available space if its parent has dimensions
 :::
 
 ```SnackPlayer name=Flex%20Dimensions
-import React from 'react';
 import {View} from 'react-native';
 
 const FlexDimensionsBasics = () => {
@@ -85,7 +83,6 @@ After you can control a component's size, the next step is to [learn how to lay
 If you want to fill a certain portion of the screen, but you _don't_ want to use the `flex` layout, you _can_ use **percentage values** in the component's style. Similar to flex dimensions, percentage dimensions require parent with a defined size.
 
 ```SnackPlayer name=Percentage%20Dimensions
-import React from 'react';
 import {View} from 'react-native';
 
 const PercentageDimensionsBasics = () => {
diff --git a/website/versioned_docs/version-0.85/i18nmanager.md b/website/versioned_docs/version-0.85/i18nmanager.md
index 80ccd2ccd72..2593a0e45c4 100644
--- a/website/versioned_docs/version-0.85/i18nmanager.md
+++ b/website/versioned_docs/version-0.85/i18nmanager.md
@@ -1,169 +1,168 @@
----
-id: i18nmanager
-title: I18nManager
----
-
-# I18nManager
-
-The `I18nManager` module provides utilities for managing Right-to-Left (RTL) layout support for languages like Arabic, Hebrew, and others. It provides methods to control RTL behavior and check the current layout direction.
-
-## Examples
-
-### Change positions and animations based on RTL
-
-If you absolutely position elements to align with other flexbox elements, they may not align in RTL languages. Using `isRTL` can be used to adjust alignment or animations.
-
-```SnackPlayer name=I18nManager%20Change%20Absolute%20Positions%20And%20Animations
-import React from 'react';
-import {I18nManager, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  // Change to `true` to see the effect in a non-RTL language
-  const isRTL = I18nManager.isRTL;
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView>
-        <View
-          style={{
-            position: 'absolute',
-            left: isRTL ? undefined : 0,
-            right: isRTL ? 0 : undefined,
-          }}>
-          {isRTL ? <Text>Back &gt;</Text> : <Text>&lt; Back</Text>}
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-export default App;
-```
-
-### During Development
-
-```SnackPlayer name=I18nManager%20During%20Development
-import React, {useState} from 'react';
-import {Alert, I18nManager, StyleSheet, Switch, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [rtl, setRTL] = useState(I18nManager.isRTL);
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView>
-        <View style={styles.container}>
-          <View style={styles.forceRtl}>
-            <Text>Force RTL in Development:</Text>
-            <Switch
-              value={rtl}
-              onValueChange={value => {
-                setRTL(value);
-                I18nManager.forceRTL(value);
-                Alert.alert(
-                  'Reload this page',
-                  'Please reload this page to change the UI direction! ' +
-                    'All examples in this app will be affected. ' +
-                    'Check them out to see what they look like in RTL layout.',
-                );
-              }}
-            />
-          </View>
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    padding: 20,
-  },
-  forceRtl: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-# Reference
-
-## Properties
-
-### `isRTL`
-
-```typescript
-static isRTL: boolean;
-```
-
-A boolean value indicating whether the app is currently in RTL layout mode.
-
-The value of `isRTL` is determined by the following logic:
-
-- If `forceRTL` is `true`, `isRTL` returns `true`
-- If `allowRTL` is `false`, `isRTL` returns `false`
-- Otherwise, `isRTL` will be `true` given the following:
-  - **iOS:**
-    - The user-preferred language on the device is an RTL language
-    - The application-defined localizations include the user-chosen language (as defined in the Xcode project file (`knownRegions = (...)`)
-  - **Android:**
-    - The user-preferred language on the device is an RTL language
-    - The application's `AndroidManifest.xml` defines `android:supportsRTL="true"` on the `<application>` element
-
-### `doLeftAndRightSwapInRTL`
-
-```typescript
-static doLeftAndRightSwapInRTL: boolean;
-```
-
-A boolean value indicating whether left and right style properties should be automatically swapped when in RTL mode. When enabled, left becomes right and right becomes left in RTL layouts.
-
-## Methods
-
-### `allowRTL()`
-
-```typescript
-static allowRTL: (allowRTL: boolean) => void;
-```
-
-Enables or disables RTL layout support for the application.
-
-**Parameters:**
-
-- `allowRTL` (boolean): Whether to allow RTL layout
-
-**Important Notes:**
-
-- Changes take effect on the next application start, not immediately
-- This setting is persisted across app restarts
-
-### `forceRTL()`
-
-```typescript
-static forceRTL: (forced: boolean) => void;
-```
-
-Forces the app to use RTL layout regardless of the device language settings. This is primarily useful for testing RTL layouts during development.
-
-Avoid forcing RTL in production apps as it requires a full app restart to take effect, which makes for a poor user-experience.
-
-**Parameters:**
-
-- `forced` (boolean): Whether to force RTL layout
-
-**Important Notes:**
-
-- Changes take full effect on the next application start, not immediately
-- The setting is persisted across app restarts
-- Only meant for development and testing. In production, you should either disallow RTL fully or handle it appropriately (see `isRTL`)
-
-### `swapLeftAndRightInRTL()`
-
-```typescript
-static swapLeftAndRightInRTL: (swapLeftAndRight: boolean) => void;
-```
-
-Swap left and right style properties in RTL mode. When enabled, left becomes right and right becomes left in RTL layouts. Does not affect the value of `isRTL`.
+---
+id: i18nmanager
+title: I18nManager
+---
+
+# I18nManager
+
+The `I18nManager` module provides utilities for managing Right-to-Left (RTL) layout support for languages like Arabic, Hebrew, and others. It provides methods to control RTL behavior and check the current layout direction.
+
+## Examples
+
+### Change positions and animations based on RTL
+
+If you absolutely position elements to align with other flexbox elements, they may not align in RTL languages. Using `isRTL` can be used to adjust alignment or animations.
+
+```SnackPlayer name=I18nManager%20Change%20Absolute%20Positions%20And%20Animations
+import {I18nManager, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  // Change to `true` to see the effect in a non-RTL language
+  const isRTL = I18nManager.isRTL;
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView>
+        <View
+          style={{
+            position: 'absolute',
+            left: isRTL ? undefined : 0,
+            right: isRTL ? 0 : undefined,
+          }}>
+          {isRTL ? <Text>Back &gt;</Text> : <Text>&lt; Back</Text>}
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+export default App;
+```
+
+### During Development
+
+```SnackPlayer name=I18nManager%20During%20Development
+import {useState} from 'react';
+import {Alert, I18nManager, StyleSheet, Switch, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [rtl, setRTL] = useState(I18nManager.isRTL);
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView>
+        <View style={styles.container}>
+          <View style={styles.forceRtl}>
+            <Text>Force RTL in Development:</Text>
+            <Switch
+              value={rtl}
+              onValueChange={value => {
+                setRTL(value);
+                I18nManager.forceRTL(value);
+                Alert.alert(
+                  'Reload this page',
+                  'Please reload this page to change the UI direction! ' +
+                    'All examples in this app will be affected. ' +
+                    'Check them out to see what they look like in RTL layout.',
+                );
+              }}
+            />
+          </View>
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 20,
+  },
+  forceRtl: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+# Reference
+
+## Properties
+
+### `isRTL`
+
+```typescript
+static isRTL: boolean;
+```
+
+A boolean value indicating whether the app is currently in RTL layout mode.
+
+The value of `isRTL` is determined by the following logic:
+
+- If `forceRTL` is `true`, `isRTL` returns `true`
+- If `allowRTL` is `false`, `isRTL` returns `false`
+- Otherwise, `isRTL` will be `true` given the following:
+  - **iOS:**
+    - The user-preferred language on the device is an RTL language
+    - The application-defined localizations include the user-chosen language (as defined in the Xcode project file (`knownRegions = (...)`)
+  - **Android:**
+    - The user-preferred language on the device is an RTL language
+    - The application's `AndroidManifest.xml` defines `android:supportsRTL="true"` on the `<application>` element
+
+### `doLeftAndRightSwapInRTL`
+
+```typescript
+static doLeftAndRightSwapInRTL: boolean;
+```
+
+A boolean value indicating whether left and right style properties should be automatically swapped when in RTL mode. When enabled, left becomes right and right becomes left in RTL layouts.
+
+## Methods
+
+### `allowRTL()`
+
+```typescript
+static allowRTL: (allowRTL: boolean) => void;
+```
+
+Enables or disables RTL layout support for the application.
+
+**Parameters:**
+
+- `allowRTL` (boolean): Whether to allow RTL layout
+
+**Important Notes:**
+
+- Changes take effect on the next application start, not immediately
+- This setting is persisted across app restarts
+
+### `forceRTL()`
+
+```typescript
+static forceRTL: (forced: boolean) => void;
+```
+
+Forces the app to use RTL layout regardless of the device language settings. This is primarily useful for testing RTL layouts during development.
+
+Avoid forcing RTL in production apps as it requires a full app restart to take effect, which makes for a poor user-experience.
+
+**Parameters:**
+
+- `forced` (boolean): Whether to force RTL layout
+
+**Important Notes:**
+
+- Changes take full effect on the next application start, not immediately
+- The setting is persisted across app restarts
+- Only meant for development and testing. In production, you should either disallow RTL fully or handle it appropriately (see `isRTL`)
+
+### `swapLeftAndRightInRTL()`
+
+```typescript
+static swapLeftAndRightInRTL: (swapLeftAndRight: boolean) => void;
+```
+
+Swap left and right style properties in RTL mode. When enabled, left becomes right and right becomes left in RTL layouts. Does not affect the value of `isRTL`.
diff --git a/website/versioned_docs/version-0.85/image-style-props.md b/website/versioned_docs/version-0.85/image-style-props.md
index efa0dc725e1..cbf19f996f9 100644
--- a/website/versioned_docs/version-0.85/image-style-props.md
+++ b/website/versioned_docs/version-0.85/image-style-props.md
@@ -8,7 +8,6 @@ title: Image Style Props
 ### Image Resize Mode
 
 ```SnackPlayer name=Image%20Resize%20Modes%20Example
-import React from 'react';
 import {View, Image, Text, StyleSheet, ScrollView} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -82,7 +81,6 @@ export default DisplayAnImageWithStyle;
 ### Image Border
 
 ```SnackPlayer name=Style%20BorderWidth%20and%20BorderColor%20Example
-import React from 'react';
 import {Image, StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -118,7 +116,6 @@ export default DisplayAnImageWithStyle;
 ### Image Border Radius
 
 ```SnackPlayer name=Style%20Border%20Radius%20Example
-import React from 'react';
 import {View, Image, StyleSheet, Text, ScrollView} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -184,7 +181,6 @@ export default DisplayAnImageWithStyle;
 ### Image Tint
 
 ```SnackPlayer name=Style%20tintColor%20Function%20Component
-import React from 'react';
 import {Image, StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.85/image.md b/website/versioned_docs/version-0.85/image.md
index 5f6a2a5b1ad..3f83be8c19c 100644
--- a/website/versioned_docs/version-0.85/image.md
+++ b/website/versioned_docs/version-0.85/image.md
@@ -14,7 +14,6 @@ For network and data images, you will need to manually specify the dimensions of
 ## Examples
 
 ```SnackPlayer name=Image%20Example
-import React from 'react';
 import {Image, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -61,7 +60,6 @@ export default DisplayAnImage;
 You can also add `style` to an image:
 
 ```SnackPlayer name=Styled%20Image%20Example
-import React from 'react';
 import {Image, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.85/imagebackground.md b/website/versioned_docs/version-0.85/imagebackground.md
index 6670fd3b632..d3d40b2a844 100644
--- a/website/versioned_docs/version-0.85/imagebackground.md
+++ b/website/versioned_docs/version-0.85/imagebackground.md
@@ -12,7 +12,6 @@ Note that you must specify some width and height style attributes.
 ## Example
 
 ```SnackPlayer name=ImageBackground
-import React from 'react';
 import {ImageBackground, StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.85/improvingux.md b/website/versioned_docs/version-0.85/improvingux.md
index 462f5f0ce1c..96bd508791f 100644
--- a/website/versioned_docs/version-0.85/improvingux.md
+++ b/website/versioned_docs/version-0.85/improvingux.md
@@ -1,596 +1,594 @@
----
-id: improvingux
-title: Improving User Experience
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-## Configure text inputs
-
-Entering text on touch phone is a challenge - small screen, software keyboard. But based on what kind of data you need, you can make it easier by properly configuring the text inputs:
-
-- Focus the first field automatically
-- Use placeholder text as an example of expected data format
-- Enable or disable autocapitalization and autocorrect
-- Choose keyboard type (e.g. email, numeric)
-- Make sure the return button focuses the next field or submits the form
-
-Check out [`TextInput` docs](textinput.md) for more configuration options.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=TextInput%20form%20example&ext=js
-import React, {useState, useRef} from 'react';
-import {
-  Alert,
-  Text,
-  StatusBar,
-  TextInput,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const App = () => {
-  const emailInput = useRef(null);
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-
-  const submit = () => {
-    Alert.alert(
-      `Welcome, ${name}! Confirmation email has been sent to ${email}`,
-    );
-  };
-
-  return (
-    <View style={styles.container}>
-      <StatusBar barStyle="light-content" />
-      <View style={styles.header}>
-        <Text style={styles.description}>
-          This demo shows how using available TextInput customizations can make
-          forms much easier to use. Try completing the form and notice that
-          different fields have specific optimizations and the return key
-          changes from focusing next input to submitting the form.
-        </Text>
-      </View>
-      <TextInput
-        style={styles.input}
-        value={name}
-        onChangeText={text => setName(text)}
-        placeholder="Full Name"
-        autoFocus={true}
-        autoCapitalize="words"
-        autoCorrect={true}
-        keyboardType="default"
-        returnKeyType="next"
-        onSubmitEditing={() => emailInput.current.focus()}
-        blurOnSubmit={false}
-      />
-      <TextInput
-        style={styles.input}
-        value={email}
-        onChangeText={text => setEmail(text)}
-        ref={emailInput}
-        placeholder="email@example.com"
-        autoCapitalize="none"
-        autoCorrect={false}
-        keyboardType="email-address"
-        returnKeyType="send"
-        onSubmitEditing={submit}
-        blurOnSubmit={true}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    paddingTop: 64,
-    padding: 20,
-    backgroundColor: '#282c34',
-  },
-  description: {
-    fontSize: 14,
-    color: 'white',
-  },
-  input: {
-    margin: 20,
-    marginBottom: 0,
-    height: 34,
-    paddingHorizontal: 10,
-    borderRadius: 4,
-    borderColor: '#ccc',
-    borderWidth: 1,
-    fontSize: 16,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=TextInput%20form%20example&ext=tsx
-import React, {useState, useRef} from 'react';
-import {
-  Alert,
-  Text,
-  StatusBar,
-  TextInput,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const App = () => {
-  const emailInput = useRef<TextInput>(null);
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-
-  const submit = () => {
-    Alert.alert(
-      `Welcome, ${name}! Confirmation email has been sent to ${email}`,
-    );
-  };
-
-  return (
-    <View style={styles.container}>
-      <StatusBar barStyle="light-content" />
-      <View style={styles.header}>
-        <Text style={styles.description}>
-          This demo shows how using available TextInput customizations can make
-          forms much easier to use. Try completing the form and notice that
-          different fields have specific optimizations and the return key
-          changes from focusing next input to submitting the form.
-        </Text>
-      </View>
-      <TextInput
-        style={styles.input}
-        value={name}
-        onChangeText={text => setName(text)}
-        placeholder="Full Name"
-        autoFocus={true}
-        autoCapitalize="words"
-        autoCorrect={true}
-        keyboardType="default"
-        returnKeyType="next"
-        onSubmitEditing={() => emailInput.current?.focus()}
-        blurOnSubmit={false}
-      />
-      <TextInput
-        style={styles.input}
-        value={email}
-        onChangeText={text => setEmail(text)}
-        ref={emailInput}
-        placeholder="email@example.com"
-        autoCapitalize="none"
-        autoCorrect={false}
-        keyboardType="email-address"
-        returnKeyType="send"
-        onSubmitEditing={submit}
-        blurOnSubmit={true}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    paddingTop: 64,
-    padding: 20,
-    backgroundColor: '#282c34',
-  },
-  description: {
-    fontSize: 14,
-    color: 'white',
-  },
-  input: {
-    margin: 20,
-    marginBottom: 0,
-    height: 34,
-    paddingHorizontal: 10,
-    borderRadius: 4,
-    borderColor: '#ccc',
-    borderWidth: 1,
-    fontSize: 16,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-## Manage layout when keyboard is visible
-
-Software keyboard takes almost half of the screen. If you have interactive elements that can get covered by the keyboard, make sure they are still accessible by using the [`KeyboardAvoidingView` component](keyboardavoidingview.md).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=KeyboardAvoidingView%20example&ext=js
-import React, {useState, useRef} from 'react';
-import {
-  Alert,
-  Text,
-  Button,
-  StatusBar,
-  TextInput,
-  KeyboardAvoidingView,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const App = () => {
-  const emailInput = useRef(null);
-  const [email, setEmail] = useState('');
-
-  const submit = () => {
-    emailInput.current.blur();
-    Alert.alert(`Confirmation email has been sent to ${email}`);
-  };
-
-  return (
-    <View style={styles.container}>
-      <StatusBar barStyle="light-content" />
-      <View style={styles.header}>
-        <Text style={styles.description}>
-          This demo shows how to avoid covering important UI elements with the
-          software keyboard. Focus the email input below and notice that the
-          Sign Up button and the text adjusted positions to make sure they are
-          not hidden under the keyboard.
-        </Text>
-      </View>
-      <KeyboardAvoidingView behavior="padding" style={styles.form}>
-        <TextInput
-          style={styles.input}
-          value={email}
-          onChangeText={text => setEmail(text)}
-          ref={emailInput}
-          placeholder="email@example.com"
-          autoCapitalize="none"
-          autoCorrect={false}
-          keyboardType="email-address"
-          returnKeyType="send"
-          onSubmitEditing={submit}
-          blurOnSubmit={true}
-        />
-        <View>
-          <Button title="Sign Up" onPress={submit} />
-          <Text style={styles.legal}>Some important legal fine print here</Text>
-        </View>
-      </KeyboardAvoidingView>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    paddingTop: 64,
-    padding: 20,
-    backgroundColor: '#282c34',
-  },
-  description: {
-    fontSize: 14,
-    color: 'white',
-  },
-  input: {
-    margin: 20,
-    marginBottom: 0,
-    height: 34,
-    paddingHorizontal: 10,
-    borderRadius: 4,
-    borderColor: '#ccc',
-    borderWidth: 1,
-    fontSize: 16,
-  },
-  legal: {
-    margin: 10,
-    color: '#333',
-    fontSize: 12,
-    textAlign: 'center',
-  },
-  form: {
-    flex: 1,
-    justifyContent: 'space-between',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=KeyboardAvoidingView%20example&ext=tsx
-import React, {useState, useRef} from 'react';
-import {
-  Alert,
-  Text,
-  Button,
-  StatusBar,
-  TextInput,
-  KeyboardAvoidingView,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const App = () => {
-  const emailInput = useRef<TextInput>(null);
-  const [email, setEmail] = useState('');
-
-  const submit = () => {
-    emailInput.current?.blur();
-    Alert.alert(`Confirmation email has been sent to ${email}`);
-  };
-
-  return (
-    <View style={styles.container}>
-      <StatusBar barStyle="light-content" />
-      <View style={styles.header}>
-        <Text style={styles.description}>
-          This demo shows how to avoid covering important UI elements with the
-          software keyboard. Focus the email input below and notice that the
-          Sign Up button and the text adjusted positions to make sure they are
-          not hidden under the keyboard.
-        </Text>
-      </View>
-      <KeyboardAvoidingView behavior="padding" style={styles.form}>
-        <TextInput
-          style={styles.input}
-          value={email}
-          onChangeText={text => setEmail(text)}
-          ref={emailInput}
-          placeholder="email@example.com"
-          autoCapitalize="none"
-          autoCorrect={false}
-          keyboardType="email-address"
-          returnKeyType="send"
-          onSubmitEditing={submit}
-          blurOnSubmit={true}
-        />
-        <View>
-          <Button title="Sign Up" onPress={submit} />
-          <Text style={styles.legal}>Some important legal fine print here</Text>
-        </View>
-      </KeyboardAvoidingView>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    paddingTop: 64,
-    padding: 20,
-    backgroundColor: '#282c34',
-  },
-  description: {
-    fontSize: 14,
-    color: 'white',
-  },
-  input: {
-    margin: 20,
-    marginBottom: 0,
-    height: 34,
-    paddingHorizontal: 10,
-    borderRadius: 4,
-    borderColor: '#ccc',
-    borderWidth: 1,
-    fontSize: 16,
-  },
-  legal: {
-    margin: 10,
-    color: '#333',
-    fontSize: 12,
-    textAlign: 'center',
-  },
-  form: {
-    flex: 1,
-    justifyContent: 'space-between',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-## Make tappable areas larger
-
-On mobile phones it's hard to be very precise when pressing buttons. Make sure all interactive elements are 44x44 or larger. One way to do this is to leave enough space for the element, `padding`, `minWidth` and `minHeight` style values can be useful for that. Alternatively, you can use [`hitSlop` prop](touchablewithoutfeedback.md#hitslop) to increase interactive area without affecting the layout. Here's a demo:
-
-```SnackPlayer name=HitSlop%20example
-import React from 'react';
-import {
-  Text,
-  StatusBar,
-  TouchableOpacity,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <StatusBar barStyle="light-content" />
-      <View style={styles.header}>
-        <Text style={styles.description}>
-          This demo shows how using hitSlop can make interactive elements much
-          easier to tap without changing their layout and size. Try pressing
-          each button quickly multiple times and notice which one is easier to
-          hit.
-        </Text>
-      </View>
-      <View style={styles.content}>
-        <TouchableOpacity>
-          <Text style={styles.label}>Without hitSlop</Text>
-        </TouchableOpacity>
-        <View style={styles.separator} />
-        <View style={styles.preview}>
-          <TouchableOpacity
-            hitSlop={{top: 20, left: 20, bottom: 20, right: 20}}>
-            <Text style={styles.label}>With hitSlop</Text>
-          </TouchableOpacity>
-        </View>
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    paddingTop: 64,
-    padding: 20,
-    backgroundColor: '#282c34',
-  },
-  description: {
-    fontSize: 14,
-    color: 'white',
-  },
-  content: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  label: {
-    fontSize: 18,
-    color: '#336699',
-    textAlign: 'center',
-    borderColor: '#ddd',
-    borderWidth: 1,
-  },
-  separator: {
-    height: 50,
-  },
-  preview: {
-    padding: 20,
-    backgroundColor: '#f6f6f6',
-  },
-});
-
-export default App;
-```
-
-## Use Android Ripple
-
-Android API 21+ uses the material design ripple to provide user with feedback when they touch an interactable area on the screen. React Native exposes this through the [`TouchableNativeFeedback` component](touchablenativefeedback.md). Using this touchable effect instead of opacity or highlight will often make your app feel much more fitting on the platform. That said, you need to be careful when using it because it doesn't work on iOS or on Android API < 21, so you will need to fallback to using one of the other Touchable components on iOS. You can use a library like [react-native-platform-touchable](https://github.com/react-community/react-native-platform-touchable) to handle the platform differences for you.
-
-```SnackPlayer name=Android%20Ripple%20example&supportedPlatforms=android
-import React from 'react';
-import {
-  TouchableNativeFeedback,
-  TouchableOpacity,
-  TouchableHighlight,
-  Platform,
-  Text,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const SUPPORTS_NATIVE_FEEDBACK =
-  Platform.OS === 'android' && Platform.Version >= 21;
-
-const noop = () => {};
-const defaultHitSlop = {top: 15, bottom: 15, right: 15, left: 15};
-
-const ButtonsWithNativeFeedback = () => (
-  <View style={styles.buttonContainer}>
-    <TouchableNativeFeedback
-      onPress={noop}
-      background={TouchableNativeFeedback.Ripple('#06bcee', false)}
-      hitSlop={defaultHitSlop}>
-      <View style={styles.button}>
-        <Text style={styles.text}>This is a ripple respecting borders</Text>
-      </View>
-    </TouchableNativeFeedback>
-    <TouchableNativeFeedback
-      onPress={noop}
-      background={TouchableNativeFeedback.Ripple('#06bcee', true)}
-      hitSlop={defaultHitSlop}>
-      <View style={styles.button}>
-        <Text style={styles.text}>
-          This is ripple without borders, this is more useful for icons, eg: in
-          tab bar
-        </Text>
-      </View>
-    </TouchableNativeFeedback>
-  </View>
-);
-
-const Buttons = () => (
-  <View style={styles.buttonContainer}>
-    <TouchableOpacity
-      style={styles.button}
-      onPress={noop}
-      hitSlop={defaultHitSlop}>
-      <Text style={styles.text}>This is opacity</Text>
-    </TouchableOpacity>
-    <TouchableHighlight
-      style={styles.button}
-      onPress={noop}
-      hitSlop={defaultHitSlop}
-      underlayColor="#06bcee">
-      <Text style={styles.text}>This is highlight</Text>
-    </TouchableHighlight>
-  </View>
-);
-
-const App = () => (
-  <View style={styles.container}>
-    {SUPPORTS_NATIVE_FEEDBACK ? <ButtonsWithNativeFeedback /> : <Buttons />}
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingTop: 64,
-    backgroundColor: '#fff',
-  },
-  buttonContainer: {
-    margin: 24,
-  },
-  text: {
-    fontSize: 20,
-    color: '#fff',
-    fontWeight: 'bold',
-  },
-  button: {
-    padding: 25,
-    borderRadius: 5,
-    backgroundColor: '#000',
-    marginBottom: 30,
-  },
-});
-
-export default App;
-```
-
-## Screen orientation lock
-
-Multiple screen orientations should work fine by default unless you're using `Dimensions` API and don't handle orientation changes. If you don't want to support multiple screen orientations, you can lock the screen orientation to either portrait or landscape.
-
-On iOS, in the General tab and Deployment Info section of Xcode enable the Device Orientation you want to support (ensure you have selected iPhone from the Devices menu when making the changes). For Android, open the AndroidManifest.xml file and within the activity element add `'android:screenOrientation="portrait"'` to lock to portrait or `'android:screenOrientation="landscape"'` to lock to landscape.
-
-# Learn more
-
-[Material Design](https://material.io/) and [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines) are great resources for learning more about designing for mobile platforms.
+---
+id: improvingux
+title: Improving User Experience
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+## Configure text inputs
+
+Entering text on touch phone is a challenge - small screen, software keyboard. But based on what kind of data you need, you can make it easier by properly configuring the text inputs:
+
+- Focus the first field automatically
+- Use placeholder text as an example of expected data format
+- Enable or disable autocapitalization and autocorrect
+- Choose keyboard type (e.g. email, numeric)
+- Make sure the return button focuses the next field or submits the form
+
+Check out [`TextInput` docs](textinput.md) for more configuration options.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=TextInput%20form%20example&ext=js
+import {useState, useRef} from 'react';
+import {
+  Alert,
+  Text,
+  StatusBar,
+  TextInput,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const App = () => {
+  const emailInput = useRef(null);
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+
+  const submit = () => {
+    Alert.alert(
+      `Welcome, ${name}! Confirmation email has been sent to ${email}`,
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="light-content" />
+      <View style={styles.header}>
+        <Text style={styles.description}>
+          This demo shows how using available TextInput customizations can make
+          forms much easier to use. Try completing the form and notice that
+          different fields have specific optimizations and the return key
+          changes from focusing next input to submitting the form.
+        </Text>
+      </View>
+      <TextInput
+        style={styles.input}
+        value={name}
+        onChangeText={text => setName(text)}
+        placeholder="Full Name"
+        autoFocus={true}
+        autoCapitalize="words"
+        autoCorrect={true}
+        keyboardType="default"
+        returnKeyType="next"
+        onSubmitEditing={() => emailInput.current.focus()}
+        blurOnSubmit={false}
+      />
+      <TextInput
+        style={styles.input}
+        value={email}
+        onChangeText={text => setEmail(text)}
+        ref={emailInput}
+        placeholder="email@example.com"
+        autoCapitalize="none"
+        autoCorrect={false}
+        keyboardType="email-address"
+        returnKeyType="send"
+        onSubmitEditing={submit}
+        blurOnSubmit={true}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 64,
+    padding: 20,
+    backgroundColor: '#282c34',
+  },
+  description: {
+    fontSize: 14,
+    color: 'white',
+  },
+  input: {
+    margin: 20,
+    marginBottom: 0,
+    height: 34,
+    paddingHorizontal: 10,
+    borderRadius: 4,
+    borderColor: '#ccc',
+    borderWidth: 1,
+    fontSize: 16,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=TextInput%20form%20example&ext=tsx
+import {useState, useRef} from 'react';
+import {
+  Alert,
+  Text,
+  StatusBar,
+  TextInput,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const App = () => {
+  const emailInput = useRef<TextInput>(null);
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+
+  const submit = () => {
+    Alert.alert(
+      `Welcome, ${name}! Confirmation email has been sent to ${email}`,
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="light-content" />
+      <View style={styles.header}>
+        <Text style={styles.description}>
+          This demo shows how using available TextInput customizations can make
+          forms much easier to use. Try completing the form and notice that
+          different fields have specific optimizations and the return key
+          changes from focusing next input to submitting the form.
+        </Text>
+      </View>
+      <TextInput
+        style={styles.input}
+        value={name}
+        onChangeText={text => setName(text)}
+        placeholder="Full Name"
+        autoFocus={true}
+        autoCapitalize="words"
+        autoCorrect={true}
+        keyboardType="default"
+        returnKeyType="next"
+        onSubmitEditing={() => emailInput.current?.focus()}
+        blurOnSubmit={false}
+      />
+      <TextInput
+        style={styles.input}
+        value={email}
+        onChangeText={text => setEmail(text)}
+        ref={emailInput}
+        placeholder="email@example.com"
+        autoCapitalize="none"
+        autoCorrect={false}
+        keyboardType="email-address"
+        returnKeyType="send"
+        onSubmitEditing={submit}
+        blurOnSubmit={true}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 64,
+    padding: 20,
+    backgroundColor: '#282c34',
+  },
+  description: {
+    fontSize: 14,
+    color: 'white',
+  },
+  input: {
+    margin: 20,
+    marginBottom: 0,
+    height: 34,
+    paddingHorizontal: 10,
+    borderRadius: 4,
+    borderColor: '#ccc',
+    borderWidth: 1,
+    fontSize: 16,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+## Manage layout when keyboard is visible
+
+Software keyboard takes almost half of the screen. If you have interactive elements that can get covered by the keyboard, make sure they are still accessible by using the [`KeyboardAvoidingView` component](keyboardavoidingview.md).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=KeyboardAvoidingView%20example&ext=js
+import {useState, useRef} from 'react';
+import {
+  Alert,
+  Text,
+  Button,
+  StatusBar,
+  TextInput,
+  KeyboardAvoidingView,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const App = () => {
+  const emailInput = useRef(null);
+  const [email, setEmail] = useState('');
+
+  const submit = () => {
+    emailInput.current.blur();
+    Alert.alert(`Confirmation email has been sent to ${email}`);
+  };
+
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="light-content" />
+      <View style={styles.header}>
+        <Text style={styles.description}>
+          This demo shows how to avoid covering important UI elements with the
+          software keyboard. Focus the email input below and notice that the
+          Sign Up button and the text adjusted positions to make sure they are
+          not hidden under the keyboard.
+        </Text>
+      </View>
+      <KeyboardAvoidingView behavior="padding" style={styles.form}>
+        <TextInput
+          style={styles.input}
+          value={email}
+          onChangeText={text => setEmail(text)}
+          ref={emailInput}
+          placeholder="email@example.com"
+          autoCapitalize="none"
+          autoCorrect={false}
+          keyboardType="email-address"
+          returnKeyType="send"
+          onSubmitEditing={submit}
+          blurOnSubmit={true}
+        />
+        <View>
+          <Button title="Sign Up" onPress={submit} />
+          <Text style={styles.legal}>Some important legal fine print here</Text>
+        </View>
+      </KeyboardAvoidingView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 64,
+    padding: 20,
+    backgroundColor: '#282c34',
+  },
+  description: {
+    fontSize: 14,
+    color: 'white',
+  },
+  input: {
+    margin: 20,
+    marginBottom: 0,
+    height: 34,
+    paddingHorizontal: 10,
+    borderRadius: 4,
+    borderColor: '#ccc',
+    borderWidth: 1,
+    fontSize: 16,
+  },
+  legal: {
+    margin: 10,
+    color: '#333',
+    fontSize: 12,
+    textAlign: 'center',
+  },
+  form: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=KeyboardAvoidingView%20example&ext=tsx
+import {useState, useRef} from 'react';
+import {
+  Alert,
+  Text,
+  Button,
+  StatusBar,
+  TextInput,
+  KeyboardAvoidingView,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const App = () => {
+  const emailInput = useRef<TextInput>(null);
+  const [email, setEmail] = useState('');
+
+  const submit = () => {
+    emailInput.current?.blur();
+    Alert.alert(`Confirmation email has been sent to ${email}`);
+  };
+
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="light-content" />
+      <View style={styles.header}>
+        <Text style={styles.description}>
+          This demo shows how to avoid covering important UI elements with the
+          software keyboard. Focus the email input below and notice that the
+          Sign Up button and the text adjusted positions to make sure they are
+          not hidden under the keyboard.
+        </Text>
+      </View>
+      <KeyboardAvoidingView behavior="padding" style={styles.form}>
+        <TextInput
+          style={styles.input}
+          value={email}
+          onChangeText={text => setEmail(text)}
+          ref={emailInput}
+          placeholder="email@example.com"
+          autoCapitalize="none"
+          autoCorrect={false}
+          keyboardType="email-address"
+          returnKeyType="send"
+          onSubmitEditing={submit}
+          blurOnSubmit={true}
+        />
+        <View>
+          <Button title="Sign Up" onPress={submit} />
+          <Text style={styles.legal}>Some important legal fine print here</Text>
+        </View>
+      </KeyboardAvoidingView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 64,
+    padding: 20,
+    backgroundColor: '#282c34',
+  },
+  description: {
+    fontSize: 14,
+    color: 'white',
+  },
+  input: {
+    margin: 20,
+    marginBottom: 0,
+    height: 34,
+    paddingHorizontal: 10,
+    borderRadius: 4,
+    borderColor: '#ccc',
+    borderWidth: 1,
+    fontSize: 16,
+  },
+  legal: {
+    margin: 10,
+    color: '#333',
+    fontSize: 12,
+    textAlign: 'center',
+  },
+  form: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+## Make tappable areas larger
+
+On mobile phones it's hard to be very precise when pressing buttons. Make sure all interactive elements are 44x44 or larger. One way to do this is to leave enough space for the element, `padding`, `minWidth` and `minHeight` style values can be useful for that. Alternatively, you can use [`hitSlop` prop](touchablewithoutfeedback.md#hitslop) to increase interactive area without affecting the layout. Here's a demo:
+
+```SnackPlayer name=HitSlop%20example
+import {
+  Text,
+  StatusBar,
+  TouchableOpacity,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="light-content" />
+      <View style={styles.header}>
+        <Text style={styles.description}>
+          This demo shows how using hitSlop can make interactive elements much
+          easier to tap without changing their layout and size. Try pressing
+          each button quickly multiple times and notice which one is easier to
+          hit.
+        </Text>
+      </View>
+      <View style={styles.content}>
+        <TouchableOpacity>
+          <Text style={styles.label}>Without hitSlop</Text>
+        </TouchableOpacity>
+        <View style={styles.separator} />
+        <View style={styles.preview}>
+          <TouchableOpacity
+            hitSlop={{top: 20, left: 20, bottom: 20, right: 20}}>
+            <Text style={styles.label}>With hitSlop</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 64,
+    padding: 20,
+    backgroundColor: '#282c34',
+  },
+  description: {
+    fontSize: 14,
+    color: 'white',
+  },
+  content: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  label: {
+    fontSize: 18,
+    color: '#336699',
+    textAlign: 'center',
+    borderColor: '#ddd',
+    borderWidth: 1,
+  },
+  separator: {
+    height: 50,
+  },
+  preview: {
+    padding: 20,
+    backgroundColor: '#f6f6f6',
+  },
+});
+
+export default App;
+```
+
+## Use Android Ripple
+
+Android API 21+ uses the material design ripple to provide user with feedback when they touch an interactable area on the screen. React Native exposes this through the [`TouchableNativeFeedback` component](touchablenativefeedback.md). Using this touchable effect instead of opacity or highlight will often make your app feel much more fitting on the platform. That said, you need to be careful when using it because it doesn't work on iOS or on Android API < 21, so you will need to fallback to using one of the other Touchable components on iOS. You can use a library like [react-native-platform-touchable](https://github.com/react-community/react-native-platform-touchable) to handle the platform differences for you.
+
+```SnackPlayer name=Android%20Ripple%20example&supportedPlatforms=android
+import {
+  TouchableNativeFeedback,
+  TouchableOpacity,
+  TouchableHighlight,
+  Platform,
+  Text,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const SUPPORTS_NATIVE_FEEDBACK =
+  Platform.OS === 'android' && Platform.Version >= 21;
+
+const noop = () => {};
+const defaultHitSlop = {top: 15, bottom: 15, right: 15, left: 15};
+
+const ButtonsWithNativeFeedback = () => (
+  <View style={styles.buttonContainer}>
+    <TouchableNativeFeedback
+      onPress={noop}
+      background={TouchableNativeFeedback.Ripple('#06bcee', false)}
+      hitSlop={defaultHitSlop}>
+      <View style={styles.button}>
+        <Text style={styles.text}>This is a ripple respecting borders</Text>
+      </View>
+    </TouchableNativeFeedback>
+    <TouchableNativeFeedback
+      onPress={noop}
+      background={TouchableNativeFeedback.Ripple('#06bcee', true)}
+      hitSlop={defaultHitSlop}>
+      <View style={styles.button}>
+        <Text style={styles.text}>
+          This is ripple without borders, this is more useful for icons, eg: in
+          tab bar
+        </Text>
+      </View>
+    </TouchableNativeFeedback>
+  </View>
+);
+
+const Buttons = () => (
+  <View style={styles.buttonContainer}>
+    <TouchableOpacity
+      style={styles.button}
+      onPress={noop}
+      hitSlop={defaultHitSlop}>
+      <Text style={styles.text}>This is opacity</Text>
+    </TouchableOpacity>
+    <TouchableHighlight
+      style={styles.button}
+      onPress={noop}
+      hitSlop={defaultHitSlop}
+      underlayColor="#06bcee">
+      <Text style={styles.text}>This is highlight</Text>
+    </TouchableHighlight>
+  </View>
+);
+
+const App = () => (
+  <View style={styles.container}>
+    {SUPPORTS_NATIVE_FEEDBACK ? <ButtonsWithNativeFeedback /> : <Buttons />}
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: 64,
+    backgroundColor: '#fff',
+  },
+  buttonContainer: {
+    margin: 24,
+  },
+  text: {
+    fontSize: 20,
+    color: '#fff',
+    fontWeight: 'bold',
+  },
+  button: {
+    padding: 25,
+    borderRadius: 5,
+    backgroundColor: '#000',
+    marginBottom: 30,
+  },
+});
+
+export default App;
+```
+
+## Screen orientation lock
+
+Multiple screen orientations should work fine by default unless you're using `Dimensions` API and don't handle orientation changes. If you don't want to support multiple screen orientations, you can lock the screen orientation to either portrait or landscape.
+
+On iOS, in the General tab and Deployment Info section of Xcode enable the Device Orientation you want to support (ensure you have selected iPhone from the Devices menu when making the changes). For Android, open the AndroidManifest.xml file and within the activity element add `'android:screenOrientation="portrait"'` to lock to portrait or `'android:screenOrientation="landscape"'` to lock to landscape.
+
+# Learn more
+
+[Material Design](https://material.io/) and [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines) are great resources for learning more about designing for mobile platforms.
diff --git a/website/versioned_docs/version-0.85/inputaccessoryview.md b/website/versioned_docs/version-0.85/inputaccessoryview.md
index a4f56532fa4..76220b4fd7c 100644
--- a/website/versioned_docs/version-0.85/inputaccessoryview.md
+++ b/website/versioned_docs/version-0.85/inputaccessoryview.md
@@ -1,98 +1,98 @@
----
-id: inputaccessoryview
-title: InputAccessoryView
----
-
-A component which enables customization of the keyboard input accessory view on iOS. The input accessory view is displayed above the keyboard whenever a `TextInput` has focus. This component can be used to create custom toolbars.
-
-To use this component wrap your custom toolbar with the InputAccessoryView component, and set a `nativeID`. Then, pass that `nativeID` as the `inputAccessoryViewID` of whatever `TextInput` you desire. A basic example:
-
-```SnackPlayer name=InputAccessoryView&supportedPlatforms=ios
-import React, {useState} from 'react';
-import {
-  Button,
-  InputAccessoryView,
-  ScrollView,
-  TextInput,
-  StyleSheet,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const inputAccessoryViewID = 'uniqueID';
-const initialText = '';
-
-const App = () => {
-  const [text, setText] = useState(initialText);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <ScrollView keyboardDismissMode="interactive">
-          <TextInput
-            style={styles.textInput}
-            inputAccessoryViewID={inputAccessoryViewID}
-            onChangeText={setText}
-            value={text}
-            placeholder={'Please type here…'}
-          />
-        </ScrollView>
-      </SafeAreaView>
-      <InputAccessoryView nativeID={inputAccessoryViewID}>
-        <Button onPress={() => setText(initialText)} title="Clear text" />
-      </InputAccessoryView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: 20,
-  },
-  textInput: {
-    padding: 16,
-    borderColor: 'black',
-    borderWidth: 1,
-  },
-});
-
-export default App;
-```
-
-This component can also be used to create sticky text inputs (text inputs which are anchored to the top of the keyboard). To do this, wrap a `TextInput` with the `InputAccessoryView` component, and don't set a `nativeID`. For an example, look at [InputAccessoryViewExample.js](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/InputAccessoryView/InputAccessoryViewExample.js).
-
----
-
-# Reference
-
-## Props
-
-### `backgroundColor`
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `nativeID`
-
-An ID which is used to associate this `InputAccessoryView` to specified TextInput(s).
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `style`
-
-| Type                              |
-| --------------------------------- |
-| [View Style](view-style-props.md) |
-
-# Known issues
-
-- [react-native#18997](https://github.com/facebook/react-native/issues/18997): Doesn't support multiline `TextInput`
-- [react-native#20157](https://github.com/facebook/react-native/issues/20157): Can't use with a bottom tab bar
+---
+id: inputaccessoryview
+title: InputAccessoryView
+---
+
+A component which enables customization of the keyboard input accessory view on iOS. The input accessory view is displayed above the keyboard whenever a `TextInput` has focus. This component can be used to create custom toolbars.
+
+To use this component wrap your custom toolbar with the InputAccessoryView component, and set a `nativeID`. Then, pass that `nativeID` as the `inputAccessoryViewID` of whatever `TextInput` you desire. A basic example:
+
+```SnackPlayer name=InputAccessoryView&supportedPlatforms=ios
+import {useState} from 'react';
+import {
+  Button,
+  InputAccessoryView,
+  ScrollView,
+  TextInput,
+  StyleSheet,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const inputAccessoryViewID = 'uniqueID';
+const initialText = '';
+
+const App = () => {
+  const [text, setText] = useState(initialText);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <ScrollView keyboardDismissMode="interactive">
+          <TextInput
+            style={styles.textInput}
+            inputAccessoryViewID={inputAccessoryViewID}
+            onChangeText={setText}
+            value={text}
+            placeholder={'Please type here…'}
+          />
+        </ScrollView>
+      </SafeAreaView>
+      <InputAccessoryView nativeID={inputAccessoryViewID}>
+        <Button onPress={() => setText(initialText)} title="Clear text" />
+      </InputAccessoryView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 20,
+  },
+  textInput: {
+    padding: 16,
+    borderColor: 'black',
+    borderWidth: 1,
+  },
+});
+
+export default App;
+```
+
+This component can also be used to create sticky text inputs (text inputs which are anchored to the top of the keyboard). To do this, wrap a `TextInput` with the `InputAccessoryView` component, and don't set a `nativeID`. For an example, look at [InputAccessoryViewExample.js](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/InputAccessoryView/InputAccessoryViewExample.js).
+
+---
+
+# Reference
+
+## Props
+
+### `backgroundColor`
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `nativeID`
+
+An ID which is used to associate this `InputAccessoryView` to specified TextInput(s).
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `style`
+
+| Type                              |
+| --------------------------------- |
+| [View Style](view-style-props.md) |
+
+# Known issues
+
+- [react-native#18997](https://github.com/facebook/react-native/issues/18997): Doesn't support multiline `TextInput`
+- [react-native#20157](https://github.com/facebook/react-native/issues/20157): Can't use with a bottom tab bar
diff --git a/website/versioned_docs/version-0.85/interactionmanager.md b/website/versioned_docs/version-0.85/interactionmanager.md
index f1851c75212..87aaff50674 100644
--- a/website/versioned_docs/version-0.85/interactionmanager.md
+++ b/website/versioned_docs/version-0.85/interactionmanager.md
@@ -1,422 +1,422 @@
----
-id: interactionmanager
-title: 🗑️ InteractionManager
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-:::warning[Deprecated]
-Avoid long-running work and use [`requestIdleCallback`](global-requestIdleCallback) instead.
-:::
-
-InteractionManager allows long-running work to be scheduled after any interactions/animations have completed. In particular, this allows JavaScript animations to run smoothly.
-
-Applications can schedule tasks to run after interactions with the following:
-
-```tsx
-InteractionManager.runAfterInteractions(() => {
-  // ...long-running synchronous task...
-});
-```
-
-Compare this to other scheduling alternatives:
-
-- `requestAnimationFrame()` for code that animates a view over time.
-- `setImmediate/setTimeout()` run code later, note this may delay animations.
-- `runAfterInteractions()` run code later, without delaying active animations.
-
-The touch handling system considers one or more active touches to be an 'interaction' and will delay `runAfterInteractions()` callbacks until all touches have ended or been cancelled.
-
-InteractionManager also allows applications to register animations by creating an interaction 'handle' on animation start, and clearing it upon completion:
-
-```tsx
-const handle = InteractionManager.createInteractionHandle();
-// run animation... (`runAfterInteractions` tasks are queued)
-// later, on animation completion:
-InteractionManager.clearInteractionHandle(handle);
-// queued tasks run if all handles were cleared
-```
-
-`runAfterInteractions` takes either a plain callback function, or a `PromiseTask` object with a `gen` method that returns a `Promise`. If a `PromiseTask` is supplied, then it is fully resolved (including asynchronous dependencies that also schedule more tasks via `runAfterInteractions`) before starting on the next task that might have been queued up synchronously earlier.
-
-By default, queued tasks are executed together in a loop in one `setImmediate` batch. If `setDeadline` is called with a positive number, then tasks will only be executed until the deadline (in terms of js event loop run time) approaches, at which point execution will yield via setTimeout, allowing events such as touches to start interactions and block queued tasks from executing, making apps more responsive.
-
----
-
-## Example
-
-### Basic
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useEffect} from 'react';
-import {
-  Alert,
-  Animated,
-  InteractionManager,
-  Platform,
-  StyleSheet,
-  Text,
-  useAnimatedValue,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
-
-const useFadeIn = (duration = 5000) => {
-  const opacity = useAnimatedValue(0);
-
-  // Running the animation when the component is mounted
-  useEffect(() => {
-    // Animated.timing() create a interaction handle by default, if you want to disabled that
-    // behaviour you can set isInteraction to false to disabled that.
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration,
-      useNativeDriver: true,
-    }).start();
-  }, [duration, opacity]);
-
-  return opacity;
-};
-
-const Ball = ({onShown}) => {
-  const opacity = useFadeIn();
-
-  // Running a method after the animation
-  useEffect(() => {
-    const interactionPromise = InteractionManager.runAfterInteractions(() =>
-      onShown(),
-    );
-    return () => interactionPromise.cancel();
-  }, [onShown]);
-
-  return <Animated.View style={[styles.ball, {opacity}]} />;
-};
-
-const App = () => {
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>{instructions}</Text>
-        <Ball onShown={() => Alert.alert('Animation is done')} />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  ball: {
-    width: 100,
-    height: 100,
-    backgroundColor: 'salmon',
-    borderRadius: 100,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useEffect} from 'react';
-import {
-  Alert,
-  Animated,
-  InteractionManager,
-  Platform,
-  StyleSheet,
-  Text,
-  useAnimatedValue,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
-
-const useFadeIn = (duration = 5000) => {
-  const opacity = useAnimatedValue(0);
-
-  // Running the animation when the component is mounted
-  useEffect(() => {
-    // Animated.timing() create a interaction handle by default, if you want to disabled that
-    // behaviour you can set isInteraction to false to disabled that.
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration,
-      useNativeDriver: true,
-    }).start();
-  }, [duration, opacity]);
-
-  return opacity;
-};
-
-type BallProps = {
-  onShown: () => void;
-};
-
-const Ball = ({onShown}: BallProps) => {
-  const opacity = useFadeIn();
-
-  // Running a method after the animation
-  useEffect(() => {
-    const interactionPromise = InteractionManager.runAfterInteractions(() =>
-      onShown(),
-    );
-    return () => interactionPromise.cancel();
-  }, [onShown]);
-
-  return <Animated.View style={[styles.ball, {opacity}]} />;
-};
-
-const App = () => {
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>{instructions}</Text>
-        <Ball onShown={() => Alert.alert('Animation is done')} />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  ball: {
-    width: 100,
-    height: 100,
-    backgroundColor: 'salmon',
-    borderRadius: 100,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### Advanced
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useEffect} from 'react';
-import {
-  Alert,
-  Animated,
-  InteractionManager,
-  Platform,
-  StyleSheet,
-  Text,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
-
-// You can create a custom interaction/animation and add
-// support for InteractionManager
-const useCustomInteraction = (timeLocked = 2000) => {
-  useEffect(() => {
-    const handle = InteractionManager.createInteractionHandle();
-
-    setTimeout(
-      () => InteractionManager.clearInteractionHandle(handle),
-      timeLocked,
-    );
-
-    return () => InteractionManager.clearInteractionHandle(handle);
-  }, [timeLocked]);
-};
-
-const Ball = ({onInteractionIsDone}) => {
-  useCustomInteraction();
-
-  // Running a method after the interaction
-  useEffect(() => {
-    InteractionManager.runAfterInteractions(() => onInteractionIsDone());
-  }, [onInteractionIsDone]);
-
-  return <Animated.View style={[styles.ball]} />;
-};
-
-const App = () => {
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>{instructions}</Text>
-        <Ball onInteractionIsDone={() => Alert.alert('Interaction is done')} />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  ball: {
-    width: 100,
-    height: 100,
-    backgroundColor: 'salmon',
-    borderRadius: 100,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useEffect} from 'react';
-import {
-  Alert,
-  Animated,
-  InteractionManager,
-  Platform,
-  StyleSheet,
-  Text,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
-
-// You can create a custom interaction/animation and add
-// support for InteractionManager
-const useCustomInteraction = (timeLocked = 2000) => {
-  useEffect(() => {
-    const handle = InteractionManager.createInteractionHandle();
-
-    setTimeout(
-      () => InteractionManager.clearInteractionHandle(handle),
-      timeLocked,
-    );
-
-    return () => InteractionManager.clearInteractionHandle(handle);
-  }, [timeLocked]);
-};
-
-type BallProps = {
-  onInteractionIsDone: () => void;
-};
-
-const Ball = ({onInteractionIsDone}: BallProps) => {
-  useCustomInteraction();
-
-  // Running a method after the interaction
-  useEffect(() => {
-    InteractionManager.runAfterInteractions(() => onInteractionIsDone());
-  }, [onInteractionIsDone]);
-
-  return <Animated.View style={[styles.ball]} />;
-};
-
-const App = () => {
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>{instructions}</Text>
-        <Ball onInteractionIsDone={() => Alert.alert('Interaction is done')} />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  ball: {
-    width: 100,
-    height: 100,
-    backgroundColor: 'salmon',
-    borderRadius: 100,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-# Reference
-
-## Methods
-
-### `runAfterInteractions()`
-
-```tsx
-static runAfterInteractions(task?: (() => any) | SimpleTask | PromiseTask);
-```
-
-Schedule a function to run after all interactions have completed. Returns a cancellable "promise".
-
----
-
-### `createInteractionHandle()`
-
-```tsx
-static createInteractionHandle(): Handle;
-```
-
-Notify manager that an interaction has started.
-
----
-
-### `clearInteractionHandle()`
-
-```tsx
-static clearInteractionHandle(handle: Handle);
-```
-
-Notify manager that an interaction has completed.
-
----
-
-### `setDeadline()`
-
-```tsx
-static setDeadline(deadline: number);
-```
-
-A positive number will use setTimeout to schedule any tasks after the eventLoopRunningTime hits the deadline value, otherwise all tasks will be executed in one setImmediate batch (default).
+---
+id: interactionmanager
+title: 🗑️ InteractionManager
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+:::warning[Deprecated]
+Avoid long-running work and use [`requestIdleCallback`](global-requestIdleCallback) instead.
+:::
+
+InteractionManager allows long-running work to be scheduled after any interactions/animations have completed. In particular, this allows JavaScript animations to run smoothly.
+
+Applications can schedule tasks to run after interactions with the following:
+
+```tsx
+InteractionManager.runAfterInteractions(() => {
+  // ...long-running synchronous task...
+});
+```
+
+Compare this to other scheduling alternatives:
+
+- `requestAnimationFrame()` for code that animates a view over time.
+- `setImmediate/setTimeout()` run code later, note this may delay animations.
+- `runAfterInteractions()` run code later, without delaying active animations.
+
+The touch handling system considers one or more active touches to be an 'interaction' and will delay `runAfterInteractions()` callbacks until all touches have ended or been cancelled.
+
+InteractionManager also allows applications to register animations by creating an interaction 'handle' on animation start, and clearing it upon completion:
+
+```tsx
+const handle = InteractionManager.createInteractionHandle();
+// run animation... (`runAfterInteractions` tasks are queued)
+// later, on animation completion:
+InteractionManager.clearInteractionHandle(handle);
+// queued tasks run if all handles were cleared
+```
+
+`runAfterInteractions` takes either a plain callback function, or a `PromiseTask` object with a `gen` method that returns a `Promise`. If a `PromiseTask` is supplied, then it is fully resolved (including asynchronous dependencies that also schedule more tasks via `runAfterInteractions`) before starting on the next task that might have been queued up synchronously earlier.
+
+By default, queued tasks are executed together in a loop in one `setImmediate` batch. If `setDeadline` is called with a positive number, then tasks will only be executed until the deadline (in terms of js event loop run time) approaches, at which point execution will yield via setTimeout, allowing events such as touches to start interactions and block queued tasks from executing, making apps more responsive.
+
+---
+
+## Example
+
+### Basic
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=js
+import {useEffect} from 'react';
+import {
+  Alert,
+  Animated,
+  InteractionManager,
+  Platform,
+  StyleSheet,
+  Text,
+  useAnimatedValue,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const instructions = Platform.select({
+  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
+  android:
+    'Double tap R on your keyboard to reload,\n' +
+    'Shake or press menu button for dev menu',
+});
+
+const useFadeIn = (duration = 5000) => {
+  const opacity = useAnimatedValue(0);
+
+  // Running the animation when the component is mounted
+  useEffect(() => {
+    // Animated.timing() create a interaction handle by default, if you want to disabled that
+    // behaviour you can set isInteraction to false to disabled that.
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration,
+      useNativeDriver: true,
+    }).start();
+  }, [duration, opacity]);
+
+  return opacity;
+};
+
+const Ball = ({onShown}) => {
+  const opacity = useFadeIn();
+
+  // Running a method after the animation
+  useEffect(() => {
+    const interactionPromise = InteractionManager.runAfterInteractions(() =>
+      onShown(),
+    );
+    return () => interactionPromise.cancel();
+  }, [onShown]);
+
+  return <Animated.View style={[styles.ball, {opacity}]} />;
+};
+
+const App = () => {
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>{instructions}</Text>
+        <Ball onShown={() => Alert.alert('Animation is done')} />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  ball: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'salmon',
+    borderRadius: 100,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=tsx
+import {useEffect} from 'react';
+import {
+  Alert,
+  Animated,
+  InteractionManager,
+  Platform,
+  StyleSheet,
+  Text,
+  useAnimatedValue,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const instructions = Platform.select({
+  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
+  android:
+    'Double tap R on your keyboard to reload,\n' +
+    'Shake or press menu button for dev menu',
+});
+
+const useFadeIn = (duration = 5000) => {
+  const opacity = useAnimatedValue(0);
+
+  // Running the animation when the component is mounted
+  useEffect(() => {
+    // Animated.timing() create a interaction handle by default, if you want to disabled that
+    // behaviour you can set isInteraction to false to disabled that.
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration,
+      useNativeDriver: true,
+    }).start();
+  }, [duration, opacity]);
+
+  return opacity;
+};
+
+type BallProps = {
+  onShown: () => void;
+};
+
+const Ball = ({onShown}: BallProps) => {
+  const opacity = useFadeIn();
+
+  // Running a method after the animation
+  useEffect(() => {
+    const interactionPromise = InteractionManager.runAfterInteractions(() =>
+      onShown(),
+    );
+    return () => interactionPromise.cancel();
+  }, [onShown]);
+
+  return <Animated.View style={[styles.ball, {opacity}]} />;
+};
+
+const App = () => {
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>{instructions}</Text>
+        <Ball onShown={() => Alert.alert('Animation is done')} />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  ball: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'salmon',
+    borderRadius: 100,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### Advanced
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=js
+import {useEffect} from 'react';
+import {
+  Alert,
+  Animated,
+  InteractionManager,
+  Platform,
+  StyleSheet,
+  Text,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const instructions = Platform.select({
+  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
+  android:
+    'Double tap R on your keyboard to reload,\n' +
+    'Shake or press menu button for dev menu',
+});
+
+// You can create a custom interaction/animation and add
+// support for InteractionManager
+const useCustomInteraction = (timeLocked = 2000) => {
+  useEffect(() => {
+    const handle = InteractionManager.createInteractionHandle();
+
+    setTimeout(
+      () => InteractionManager.clearInteractionHandle(handle),
+      timeLocked,
+    );
+
+    return () => InteractionManager.clearInteractionHandle(handle);
+  }, [timeLocked]);
+};
+
+const Ball = ({onInteractionIsDone}) => {
+  useCustomInteraction();
+
+  // Running a method after the interaction
+  useEffect(() => {
+    InteractionManager.runAfterInteractions(() => onInteractionIsDone());
+  }, [onInteractionIsDone]);
+
+  return <Animated.View style={[styles.ball]} />;
+};
+
+const App = () => {
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>{instructions}</Text>
+        <Ball onInteractionIsDone={() => Alert.alert('Interaction is done')} />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  ball: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'salmon',
+    borderRadius: 100,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=tsx
+import {useEffect} from 'react';
+import {
+  Alert,
+  Animated,
+  InteractionManager,
+  Platform,
+  StyleSheet,
+  Text,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const instructions = Platform.select({
+  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
+  android:
+    'Double tap R on your keyboard to reload,\n' +
+    'Shake or press menu button for dev menu',
+});
+
+// You can create a custom interaction/animation and add
+// support for InteractionManager
+const useCustomInteraction = (timeLocked = 2000) => {
+  useEffect(() => {
+    const handle = InteractionManager.createInteractionHandle();
+
+    setTimeout(
+      () => InteractionManager.clearInteractionHandle(handle),
+      timeLocked,
+    );
+
+    return () => InteractionManager.clearInteractionHandle(handle);
+  }, [timeLocked]);
+};
+
+type BallProps = {
+  onInteractionIsDone: () => void;
+};
+
+const Ball = ({onInteractionIsDone}: BallProps) => {
+  useCustomInteraction();
+
+  // Running a method after the interaction
+  useEffect(() => {
+    InteractionManager.runAfterInteractions(() => onInteractionIsDone());
+  }, [onInteractionIsDone]);
+
+  return <Animated.View style={[styles.ball]} />;
+};
+
+const App = () => {
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>{instructions}</Text>
+        <Ball onInteractionIsDone={() => Alert.alert('Interaction is done')} />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  ball: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'salmon',
+    borderRadius: 100,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+# Reference
+
+## Methods
+
+### `runAfterInteractions()`
+
+```tsx
+static runAfterInteractions(task?: (() => any) | SimpleTask | PromiseTask);
+```
+
+Schedule a function to run after all interactions have completed. Returns a cancellable "promise".
+
+---
+
+### `createInteractionHandle()`
+
+```tsx
+static createInteractionHandle(): Handle;
+```
+
+Notify manager that an interaction has started.
+
+---
+
+### `clearInteractionHandle()`
+
+```tsx
+static clearInteractionHandle(handle: Handle);
+```
+
+Notify manager that an interaction has completed.
+
+---
+
+### `setDeadline()`
+
+```tsx
+static setDeadline(deadline: number);
+```
+
+A positive number will use setTimeout to schedule any tasks after the eventLoopRunningTime hits the deadline value, otherwise all tasks will be executed in one setImmediate batch (default).
diff --git a/website/versioned_docs/version-0.85/intro-react-native-components.md b/website/versioned_docs/version-0.85/intro-react-native-components.md
index eb585964154..2f3a1449d28 100644
--- a/website/versioned_docs/version-0.85/intro-react-native-components.md
+++ b/website/versioned_docs/version-0.85/intro-react-native-components.md
@@ -43,7 +43,6 @@ React Native has many Core Components for everything from controls to activity i
 In the next section, you will start combining these Core Components to learn about how React works. Have a play with them here now!
 
 ```SnackPlayer name=Hello%20World
-import React from 'react';
 import {View, Text, Image, ScrollView, TextInput} from 'react-native';
 
 const App = () => {
diff --git a/website/versioned_docs/version-0.85/introduction.md b/website/versioned_docs/version-0.85/introduction.md
index ba782cd838c..2752b80327b 100644
--- a/website/versioned_docs/version-0.85/introduction.md
+++ b/website/versioned_docs/version-0.85/introduction.md
@@ -30,7 +30,6 @@ While we do our best to assume no prior knowledge of React, Android, or iOS deve
 This introduction lets you get started immediately in your browser with interactive examples like this one:
 
 ```SnackPlayer name=Hello%20World
-import React from 'react';
 import {Text, View} from 'react-native';
 
 const YourApp = () => {
diff --git a/website/versioned_docs/version-0.85/javascript-environment.md b/website/versioned_docs/version-0.85/javascript-environment.md
index ab041dd34cd..2149516a93b 100644
--- a/website/versioned_docs/version-0.85/javascript-environment.md
+++ b/website/versioned_docs/version-0.85/javascript-environment.md
@@ -1,109 +1,109 @@
----
-id: javascript-environment
-title: JavaScript Environment
----
-
-import TableRow from '@site/core/TableRowWithCodeBlock';
-
-## JavaScript Runtime
-
-When using React Native, you're going to be running your JavaScript code in up to three environments:
-
-- In most cases, React Native will use [Hermes](hermes), an open-source JavaScript engine optimized for React Native.
-- If Hermes is disabled, React Native will use [JavaScriptCore](https://trac.webkit.org/wiki/JavaScriptCore), the JavaScript engine that powers Safari. Note that on iOS, JavaScriptCore does not use JIT due to the absence of writable executable memory in iOS apps.
-- When using Chrome debugging, all JavaScript code runs within Chrome itself, communicating with native code via WebSockets. Chrome uses [V8](https://v8.dev/) as its JavaScript engine.
-
-While these environments are very similar, you may end up hitting some inconsistencies. It is best to avoid relying on specifics of any runtime.
-
-## JavaScript Syntax Transformers
-
-Syntax transformers make writing code more enjoyable by allowing you to use new JavaScript syntax without having to wait for support on all interpreters.
-
-React Native ships with the [Babel JavaScript compiler](https://babeljs.io). Check [Babel documentation](https://babeljs.io/docs/plugins/#transform-plugins) on its supported transformations for more details.
-
-A full list of React Native's enabled transformations can be found in [@react-native/babel-preset](https://github.com/facebook/react-native/tree/main/packages/react-native-babel-preset).
-
-<table>
-<thead>
-  <tr><th>Transformation</th><th>Code</th></tr>
-</thead>
-<tbody>
-  <tr><td className="table-heading" colSpan="2">ECMAScript 5</td></tr>
-  <TableRow name="Reserved Words" code="promise.catch(function() {...});" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2015 (ES6)</td></tr>
-  <TableRow name="Arrow functions" code="<C onPress={() => this.setState({pressed: true})} />" url="https://babeljs.io/docs/learn-es2015/#arrows" />
-  <TableRow name="Block scoping" code="let greeting = 'hi';" url="https://babeljs.io/docs/learn-es2015/#let-const" />
-  <TableRow name="Call spread" code="Math.max(...array);" url="https://babeljs.io/docs/learn-es2015/#default-rest-spread" />
-  <TableRow name="Classes" code="class C extends React.Component {render() { return <View />; }}" url="https://babeljs.io/docs/learn-es2015/#classes" />
-  <TableRow name="Computed Properties" code="const key = 'abc'; const obj = {[key]: 10};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
-  <TableRow name="Constants" code="const answer = 42;" url="https://babeljs.io/docs/learn-es2015/#let-const" />
-  <TableRow name="Destructuring" code="const {isActive, style} = this.props;" url="https://babeljs.io/docs/learn-es2015/#destructuring" />
-  <TableRow name="for…of" code="for (var num of [1, 2, 3]) {...};" url="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of" />
-  <TableRow name="Function Name" code="let number = x => x;" url="https://babeljs.io/docs/en/babel-plugin-transform-function-name" />
-  <TableRow name="Literals" code="const b = 0b11; const o = 0o7; const u = 'Hello\u{000A}\u{0009}!';" url="https://babeljs.io/docs/en/babel-plugin-transform-literals" />
-  <TableRow name="Modules" code="import React, {Component} from 'react';" url="https://babeljs.io/docs/learn-es2015/#modules" />
-  <TableRow name="Object Concise Method" code="const obj = {method() { return 10; }};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
-  <TableRow name="Object Short Notation" code="const name = 'vjeux'; const obj = {name};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
-  <TableRow name="Parameters" code="function test(x = 'hello', {a, b}, ...args) {}" url="https://babeljs.io/docs/en/babel-plugin-transform-parameters" />
-  <TableRow name="Rest Params" code="function(type, ...args) {};" url="https://github.com/sebmarkbage/ecmascript-rest-spread" />
-  <TableRow name="Shorthand Properties" code="const o = {a, b, c};" url="https://babeljs.io/docs/en/babel-plugin-transform-shorthand-properties" />
-  <TableRow name="Sticky Regex" code="const a = /o+/y;" url="https://babeljs.io/docs/en/babel-plugin-transform-sticky-regex" />
-  <TableRow name="Template Literals" code="const who = 'world'; const str = `Hello ${who}`;" url="https://babeljs.io/docs/learn-es2015/#template-strings" />
-  <TableRow name="Unicode Regex" code="const string = 'foo💩bar'; const match = string.match(/foo(.)bar/u);" url="https://babeljs.io/docs/en/babel-plugin-transform-unicode-regex" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2016 (ES7)</td></tr>
-  <TableRow name="Exponentiation Operator" code="let x = 10 ** 2;" url="https://babeljs.io/docs/en/babel-plugin-transform-exponentiation-operator" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2017 (ES8)</td></tr>
-  <TableRow name="Async Functions" code="async function doStuffAsync() {const foo = await doOtherStuffAsync();};" url="https://github.com/tc39/ecmascript-asyncawait" />
-  <TableRow name="Function Trailing Comma" code="function f(a, b, c,) {};" url="https://github.com/jeffmo/es-trailing-function-commas" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2018 (ES9)</td></tr>
-  <TableRow name="Object Spread" code="const extended = {...obj, a: 10};" url="https://github.com/tc39/proposal-object-rest-spread" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2019 (ES10)</td></tr>
-  <TableRow name="Optional Catch Binding" code="try {throw 0; } catch { doSomethingWhichDoesNotCareAboutTheValueThrown();}" url="https://babeljs.io/docs/en/babel-plugin-proposal-optional-catch-binding" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2020 (ES11)</td></tr>
-  <TableRow name="Dynamic Imports" code="const package = await import('package'); package.function()" url="https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import" />
-  <TableRow name="Nullish Coalescing Operator" code="const foo = object.foo ?? 'default';" url="https://babeljs.io/docs/en/babel-plugin-proposal-nullish-coalescing-operator" />
-  <TableRow name="Optional Chaining" code="const name = obj.user?.name;" url="https://github.com/tc39/proposal-optional-chaining" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2022 (ES13)</td></tr>
-  <TableRow name="Class Fields" code="class Bork {static a = 'foo'; static b; x = 'bar'; y;}" url="https://babeljs.io/docs/en/babel-plugin-proposal-class-properties" />
-  <tr><td className="table-heading" colSpan="2">Stage 1 Proposal</td></tr>
-  <TableRow name="Export Default From" code="export v from 'mod';" url="https://babeljs.io/docs/en/babel-plugin-proposal-export-default-from" />
-  <tr><td className="table-heading" colSpan="2">Miscellaneous</td></tr>
-  <TableRow name="Babel Template" code="template(`const %%importName%% = require(%%source%%);`);" url="https://babeljs.io/docs/en/babel-template" />
-  <TableRow name="Flow" code="function foo(x: ?number): string {};" url="https://flowtype.org/" />
-  <TableRow name="ESM to CJS" code="export default 42;" url="https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs" />
-  <TableRow name="JSX" code="<View style={{color: 'red'}} />" url="https://react.dev/learn/writing-markup-with-jsx" />
-  <TableRow name="Object Assign" code="Object.assign(a, b);" url="https://babeljs.io/docs/en/babel-plugin-transform-object-assign" />
-  <TableRow name="React Display Name" code="const bar = createReactClass({});" url="https://babeljs.io/docs/en/babel-plugin-transform-react-display-name" />
-  <TableRow name="TypeScript" code="function foo(x: {hello: true, target: 'react native!'}): string {};" url="https://www.typescriptlang.org/" />
-</tbody>
-</table>
-
-## Polyfills
-
-Many standard functions are also available on all the supported JavaScript runtimes.
-
-#### Browser
-
-- [CommonJS `require`](https://nodejs.org/docs/latest/api/modules.html)
-- `md [console.{log, warn, error, info, debug, trace, table, group, groupCollapsed, groupEnd}](https://developer.chrome.com/devtools/docs/console-api)`
-- [`XMLHttpRequest`, `fetch`](network.md#content)
-- [`{set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame`](timers.md#content)
-
-#### ECMAScript 2015 (ES6)
-
-- [`Array.from`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from)
-- `md Array.prototype.{[find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find), [findIndex](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)}`
-- [`Object.assign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
-- `md String.prototype.{[startsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith), [endsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith), [repeat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat), [includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes)}`
-
-#### ECMAScript 2016 (ES7)
-
-- `md Array.prototype.[includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)`
-
-#### ECMAScript 2017 (ES8)
-
-- `md Object.{[entries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries), [values](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values)}`
-
-#### Specific
-
-- `__DEV__`
+---
+id: javascript-environment
+title: JavaScript Environment
+---
+
+import TableRow from '@site/core/TableRowWithCodeBlock';
+
+## JavaScript Runtime
+
+When using React Native, you're going to be running your JavaScript code in up to three environments:
+
+- In most cases, React Native will use [Hermes](hermes), an open-source JavaScript engine optimized for React Native.
+- If Hermes is disabled, React Native will use [JavaScriptCore](https://trac.webkit.org/wiki/JavaScriptCore), the JavaScript engine that powers Safari. Note that on iOS, JavaScriptCore does not use JIT due to the absence of writable executable memory in iOS apps.
+- When using Chrome debugging, all JavaScript code runs within Chrome itself, communicating with native code via WebSockets. Chrome uses [V8](https://v8.dev/) as its JavaScript engine.
+
+While these environments are very similar, you may end up hitting some inconsistencies. It is best to avoid relying on specifics of any runtime.
+
+## JavaScript Syntax Transformers
+
+Syntax transformers make writing code more enjoyable by allowing you to use new JavaScript syntax without having to wait for support on all interpreters.
+
+React Native ships with the [Babel JavaScript compiler](https://babeljs.io). Check [Babel documentation](https://babeljs.io/docs/plugins/#transform-plugins) on its supported transformations for more details.
+
+A full list of React Native's enabled transformations can be found in [@react-native/babel-preset](https://github.com/facebook/react-native/tree/main/packages/react-native-babel-preset).
+
+<table>
+<thead>
+  <tr><th>Transformation</th><th>Code</th></tr>
+</thead>
+<tbody>
+  <tr><td className="table-heading" colSpan="2">ECMAScript 5</td></tr>
+  <TableRow name="Reserved Words" code="promise.catch(function() {...});" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2015 (ES6)</td></tr>
+  <TableRow name="Arrow functions" code="<C onPress={() => this.setState({pressed: true})} />" url="https://babeljs.io/docs/learn-es2015/#arrows" />
+  <TableRow name="Block scoping" code="let greeting = 'hi';" url="https://babeljs.io/docs/learn-es2015/#let-const" />
+  <TableRow name="Call spread" code="Math.max(...array);" url="https://babeljs.io/docs/learn-es2015/#default-rest-spread" />
+  <TableRow name="Classes" code="class C extends React.Component {render() { return <View />; }}" url="https://babeljs.io/docs/learn-es2015/#classes" />
+  <TableRow name="Computed Properties" code="const key = 'abc'; const obj = {[key]: 10};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
+  <TableRow name="Constants" code="const answer = 42;" url="https://babeljs.io/docs/learn-es2015/#let-const" />
+  <TableRow name="Destructuring" code="const {isActive, style} = this.props;" url="https://babeljs.io/docs/learn-es2015/#destructuring" />
+  <TableRow name="for…of" code="for (var num of [1, 2, 3]) {...};" url="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of" />
+  <TableRow name="Function Name" code="let number = x => x;" url="https://babeljs.io/docs/en/babel-plugin-transform-function-name" />
+  <TableRow name="Literals" code="const b = 0b11; const o = 0o7; const u = 'Hello\u{000A}\u{0009}!';" url="https://babeljs.io/docs/en/babel-plugin-transform-literals" />
+  <TableRow name="Modules" code="import {Component} from 'react';" url="https://babeljs.io/docs/learn-es2015/#modules" />
+  <TableRow name="Object Concise Method" code="const obj = {method() { return 10; }};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
+  <TableRow name="Object Short Notation" code="const name = 'vjeux'; const obj = {name};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
+  <TableRow name="Parameters" code="function test(x = 'hello', {a, b}, ...args) {}" url="https://babeljs.io/docs/en/babel-plugin-transform-parameters" />
+  <TableRow name="Rest Params" code="function(type, ...args) {};" url="https://github.com/sebmarkbage/ecmascript-rest-spread" />
+  <TableRow name="Shorthand Properties" code="const o = {a, b, c};" url="https://babeljs.io/docs/en/babel-plugin-transform-shorthand-properties" />
+  <TableRow name="Sticky Regex" code="const a = /o+/y;" url="https://babeljs.io/docs/en/babel-plugin-transform-sticky-regex" />
+  <TableRow name="Template Literals" code="const who = 'world'; const str = `Hello ${who}`;" url="https://babeljs.io/docs/learn-es2015/#template-strings" />
+  <TableRow name="Unicode Regex" code="const string = 'foo💩bar'; const match = string.match(/foo(.)bar/u);" url="https://babeljs.io/docs/en/babel-plugin-transform-unicode-regex" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2016 (ES7)</td></tr>
+  <TableRow name="Exponentiation Operator" code="let x = 10 ** 2;" url="https://babeljs.io/docs/en/babel-plugin-transform-exponentiation-operator" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2017 (ES8)</td></tr>
+  <TableRow name="Async Functions" code="async function doStuffAsync() {const foo = await doOtherStuffAsync();};" url="https://github.com/tc39/ecmascript-asyncawait" />
+  <TableRow name="Function Trailing Comma" code="function f(a, b, c,) {};" url="https://github.com/jeffmo/es-trailing-function-commas" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2018 (ES9)</td></tr>
+  <TableRow name="Object Spread" code="const extended = {...obj, a: 10};" url="https://github.com/tc39/proposal-object-rest-spread" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2019 (ES10)</td></tr>
+  <TableRow name="Optional Catch Binding" code="try {throw 0; } catch { doSomethingWhichDoesNotCareAboutTheValueThrown();}" url="https://babeljs.io/docs/en/babel-plugin-proposal-optional-catch-binding" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2020 (ES11)</td></tr>
+  <TableRow name="Dynamic Imports" code="const package = await import('package'); package.function()" url="https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import" />
+  <TableRow name="Nullish Coalescing Operator" code="const foo = object.foo ?? 'default';" url="https://babeljs.io/docs/en/babel-plugin-proposal-nullish-coalescing-operator" />
+  <TableRow name="Optional Chaining" code="const name = obj.user?.name;" url="https://github.com/tc39/proposal-optional-chaining" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2022 (ES13)</td></tr>
+  <TableRow name="Class Fields" code="class Bork {static a = 'foo'; static b; x = 'bar'; y;}" url="https://babeljs.io/docs/en/babel-plugin-proposal-class-properties" />
+  <tr><td className="table-heading" colSpan="2">Stage 1 Proposal</td></tr>
+  <TableRow name="Export Default From" code="export v from 'mod';" url="https://babeljs.io/docs/en/babel-plugin-proposal-export-default-from" />
+  <tr><td className="table-heading" colSpan="2">Miscellaneous</td></tr>
+  <TableRow name="Babel Template" code="template(`const %%importName%% = require(%%source%%);`);" url="https://babeljs.io/docs/en/babel-template" />
+  <TableRow name="Flow" code="function foo(x: ?number): string {};" url="https://flowtype.org/" />
+  <TableRow name="ESM to CJS" code="export default 42;" url="https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs" />
+  <TableRow name="JSX" code="<View style={{color: 'red'}} />" url="https://react.dev/learn/writing-markup-with-jsx" />
+  <TableRow name="Object Assign" code="Object.assign(a, b);" url="https://babeljs.io/docs/en/babel-plugin-transform-object-assign" />
+  <TableRow name="React Display Name" code="const bar = createReactClass({});" url="https://babeljs.io/docs/en/babel-plugin-transform-react-display-name" />
+  <TableRow name="TypeScript" code="function foo(x: {hello: true, target: 'react native!'}): string {};" url="https://www.typescriptlang.org/" />
+</tbody>
+</table>
+
+## Polyfills
+
+Many standard functions are also available on all the supported JavaScript runtimes.
+
+#### Browser
+
+- [CommonJS `require`](https://nodejs.org/docs/latest/api/modules.html)
+- `md [console.{log, warn, error, info, debug, trace, table, group, groupCollapsed, groupEnd}](https://developer.chrome.com/devtools/docs/console-api)`
+- [`XMLHttpRequest`, `fetch`](network.md#content)
+- [`{set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame`](timers.md#content)
+
+#### ECMAScript 2015 (ES6)
+
+- [`Array.from`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from)
+- `md Array.prototype.{[find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find), [findIndex](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)}`
+- [`Object.assign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
+- `md String.prototype.{[startsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith), [endsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith), [repeat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat), [includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes)}`
+
+#### ECMAScript 2016 (ES7)
+
+- `md Array.prototype.[includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)`
+
+#### ECMAScript 2017 (ES8)
+
+- `md Object.{[entries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries), [values](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values)}`
+
+#### Specific
+
+- `__DEV__`
diff --git a/website/versioned_docs/version-0.85/keyboard.md b/website/versioned_docs/version-0.85/keyboard.md
index 8560ce4999d..de1ec7b870b 100644
--- a/website/versioned_docs/version-0.85/keyboard.md
+++ b/website/versioned_docs/version-0.85/keyboard.md
@@ -1,146 +1,146 @@
----
-id: keyboard
-title: Keyboard
----
-
-`Keyboard` module to control keyboard events.
-
-### Usage
-
-The Keyboard module allows you to listen for native events and react to them, as well as make changes to the keyboard, like dismissing it.
-
-```SnackPlayer name=Keyboard%20Example&supportedPlatforms=ios,android
-import React, {useState, useEffect} from 'react';
-import {Keyboard, Text, TextInput, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const Example = () => {
-  const [keyboardStatus, setKeyboardStatus] = useState('Keyboard Hidden');
-
-  useEffect(() => {
-    const showSubscription = Keyboard.addListener('keyboardDidShow', () => {
-      setKeyboardStatus('Keyboard Shown');
-    });
-    const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
-      setKeyboardStatus('Keyboard Hidden');
-    });
-
-    return () => {
-      showSubscription.remove();
-      hideSubscription.remove();
-    };
-  }, []);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={style.container}>
-        <TextInput
-          style={style.input}
-          placeholder="Click here…"
-          onSubmitEditing={Keyboard.dismiss}
-        />
-        <Text style={style.status}>{keyboardStatus}</Text>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const style = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 36,
-  },
-  input: {
-    padding: 10,
-    borderWidth: 0.5,
-    borderRadius: 4,
-  },
-  status: {
-    padding: 16,
-    textAlign: 'center',
-  },
-});
-
-export default Example;
-```
-
----
-
-# Reference
-
-## Methods
-
-### `addListener()`
-
-```tsx
-static addListener: (
-  eventType: KeyboardEventName,
-  listener: KeyboardEventListener,
-) => EmitterSubscription;
-```
-
-The `addListener` function connects a JavaScript function to an identified native keyboard notification event.
-
-This function then returns the reference to the listener.
-
-**Parameters:**
-
-| Name                                                                     | Type     | Description                                                                    |
-| ------------------------------------------------------------------------ | -------- | ------------------------------------------------------------------------------ |
-| eventName <div className="label basic two-lines required">Required</div> | string   | The string that identifies the event you're listening for. See the list below. |
-| callback <div className="label basic two-lines required">Required</div>  | function | The function to be called when the event fires                                 |
-
-**`eventName`**
-
-This can be any of the following:
-
-- `keyboardWillShow`
-- `keyboardDidShow`
-- `keyboardWillHide`
-- `keyboardDidHide`
-- `keyboardWillChangeFrame`
-- `keyboardDidChangeFrame`
-
-:::note
-Only `keyboardDidShow` and `keyboardDidHide` events are available on Android. The events will not be fired when using Android 10 or below if your activity has `android:windowSoftInputMode` set to `adjustResize` or `adjustNothing`.
-:::
-
----
-
-### `dismiss()`
-
-```tsx
-static dismiss();
-```
-
-Dismisses the active keyboard and removes focus.
-
----
-
-### `scheduleLayoutAnimation`
-
-```tsx
-static scheduleLayoutAnimation(event: KeyboardEvent);
-```
-
-Useful for syncing TextInput (or other keyboard accessory view) size of position changes with keyboard movements.
-
----
-
-### `isVisible()`
-
-```tsx
-static isVisible(): boolean;
-```
-
-Whether the keyboard is last known to be visible.
-
----
-
-### `metrics()`
-
-```tsx
-static metrics(): KeyboardMetrics | undefined;
-```
-
-Return the metrics of the soft-keyboard if visible.
+---
+id: keyboard
+title: Keyboard
+---
+
+`Keyboard` module to control keyboard events.
+
+### Usage
+
+The Keyboard module allows you to listen for native events and react to them, as well as make changes to the keyboard, like dismissing it.
+
+```SnackPlayer name=Keyboard%20Example&supportedPlatforms=ios,android
+import {useState, useEffect} from 'react';
+import {Keyboard, Text, TextInput, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const Example = () => {
+  const [keyboardStatus, setKeyboardStatus] = useState('Keyboard Hidden');
+
+  useEffect(() => {
+    const showSubscription = Keyboard.addListener('keyboardDidShow', () => {
+      setKeyboardStatus('Keyboard Shown');
+    });
+    const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
+      setKeyboardStatus('Keyboard Hidden');
+    });
+
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={style.container}>
+        <TextInput
+          style={style.input}
+          placeholder="Click here…"
+          onSubmitEditing={Keyboard.dismiss}
+        />
+        <Text style={style.status}>{keyboardStatus}</Text>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const style = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 36,
+  },
+  input: {
+    padding: 10,
+    borderWidth: 0.5,
+    borderRadius: 4,
+  },
+  status: {
+    padding: 16,
+    textAlign: 'center',
+  },
+});
+
+export default Example;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `addListener()`
+
+```tsx
+static addListener: (
+  eventType: KeyboardEventName,
+  listener: KeyboardEventListener,
+) => EmitterSubscription;
+```
+
+The `addListener` function connects a JavaScript function to an identified native keyboard notification event.
+
+This function then returns the reference to the listener.
+
+**Parameters:**
+
+| Name                                                                     | Type     | Description                                                                    |
+| ------------------------------------------------------------------------ | -------- | ------------------------------------------------------------------------------ |
+| eventName <div className="label basic two-lines required">Required</div> | string   | The string that identifies the event you're listening for. See the list below. |
+| callback <div className="label basic two-lines required">Required</div>  | function | The function to be called when the event fires                                 |
+
+**`eventName`**
+
+This can be any of the following:
+
+- `keyboardWillShow`
+- `keyboardDidShow`
+- `keyboardWillHide`
+- `keyboardDidHide`
+- `keyboardWillChangeFrame`
+- `keyboardDidChangeFrame`
+
+:::note
+Only `keyboardDidShow` and `keyboardDidHide` events are available on Android. The events will not be fired when using Android 10 or below if your activity has `android:windowSoftInputMode` set to `adjustResize` or `adjustNothing`.
+:::
+
+---
+
+### `dismiss()`
+
+```tsx
+static dismiss();
+```
+
+Dismisses the active keyboard and removes focus.
+
+---
+
+### `scheduleLayoutAnimation`
+
+```tsx
+static scheduleLayoutAnimation(event: KeyboardEvent);
+```
+
+Useful for syncing TextInput (or other keyboard accessory view) size of position changes with keyboard movements.
+
+---
+
+### `isVisible()`
+
+```tsx
+static isVisible(): boolean;
+```
+
+Whether the keyboard is last known to be visible.
+
+---
+
+### `metrics()`
+
+```tsx
+static metrics(): KeyboardMetrics | undefined;
+```
+
+Return the metrics of the soft-keyboard if visible.
diff --git a/website/versioned_docs/version-0.85/keyboardavoidingview.md b/website/versioned_docs/version-0.85/keyboardavoidingview.md
index 55cce32cf54..cc650dd0f57 100644
--- a/website/versioned_docs/version-0.85/keyboardavoidingview.md
+++ b/website/versioned_docs/version-0.85/keyboardavoidingview.md
@@ -8,7 +8,6 @@ This component will automatically adjust its height, position, or bottom padding
 ## Example
 
 ```SnackPlayer name=KeyboardAvoidingView&supportedPlatforms=android,ios
-import React from 'react';
 import {
   View,
   KeyboardAvoidingView,
diff --git a/website/versioned_docs/version-0.85/layout-props.md b/website/versioned_docs/version-0.85/layout-props.md
index b3673e0c849..0d10649d7d6 100644
--- a/website/versioned_docs/version-0.85/layout-props.md
+++ b/website/versioned_docs/version-0.85/layout-props.md
@@ -1,1360 +1,1360 @@
----
-id: layout-props
-title: Layout Props
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-:::info
-More detailed examples about those properties can be found on the [Layout with Flexbox](flexbox) page.
-:::
-
-### Example
-
-The following example shows how different properties can affect or shape a React Native layout. You can try for example to add or remove squares from the UI while changing the values of the property `flexWrap`.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=LayoutProps%20Example&ext=js
-import React, {useState} from 'react';
-import {Button, ScrollView, StyleSheet, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [flexDirection, setFlexDirection] = useState(0);
-  const [justifyContent, setJustifyContent] = useState(0);
-  const [alignItems, setAlignItems] = useState(0);
-  const [direction, setDirection] = useState(0);
-  const [wrap, setWrap] = useState(0);
-
-  const [squares, setSquares] = useState([<Square />, <Square />, <Square />]);
-
-  const hookedStyles = {
-    flexDirection: flexDirections[flexDirection],
-    justifyContent: justifyContents[justifyContent],
-    alignItems: alignItemsArr[alignItems],
-    direction: directions[direction],
-    flexWrap: wraps[wrap],
-  };
-
-  const changeSetting = (value, options, setterFunction) => {
-    if (value === options.length - 1) {
-      setterFunction(0);
-      return;
-    }
-    setterFunction(value + 1);
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={[styles.container, styles.playingSpace, hookedStyles]}>
-          {squares.map(elem => elem)}
-        </View>
-        <ScrollView style={styles.layoutContainer}>
-          <View style={styles.controlSpace}>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Flex Direction"
-                onPress={() =>
-                  changeSetting(flexDirection, flexDirections, setFlexDirection)
-                }
-              />
-              <Text style={styles.text}>{flexDirections[flexDirection]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Justify Content"
-                onPress={() =>
-                  changeSetting(
-                    justifyContent,
-                    justifyContents,
-                    setJustifyContent,
-                  )
-                }
-              />
-              <Text style={styles.text}>{justifyContents[justifyContent]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Align Items"
-                onPress={() =>
-                  changeSetting(alignItems, alignItemsArr, setAlignItems)
-                }
-              />
-              <Text style={styles.text}>{alignItemsArr[alignItems]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Direction"
-                onPress={() =>
-                  changeSetting(direction, directions, setDirection)
-                }
-              />
-              <Text style={styles.text}>{directions[direction]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Flex Wrap"
-                onPress={() => changeSetting(wrap, wraps, setWrap)}
-              />
-              <Text style={styles.text}>{wraps[wrap]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Add Square"
-                onPress={() => setSquares([...squares, <Square />])}
-              />
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Delete Square"
-                onPress={() =>
-                  setSquares(squares.filter((v, i) => i !== squares.length - 1))
-                }
-              />
-            </View>
-          </View>
-        </ScrollView>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const flexDirections = ['row', 'row-reverse', 'column', 'column-reverse'];
-const justifyContents = [
-  'flex-start',
-  'flex-end',
-  'center',
-  'space-between',
-  'space-around',
-  'space-evenly',
-];
-const alignItemsArr = [
-  'flex-start',
-  'flex-end',
-  'center',
-  'stretch',
-  'baseline',
-];
-const wraps = ['nowrap', 'wrap', 'wrap-reverse'];
-const directions = ['inherit', 'ltr', 'rtl'];
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  layoutContainer: {
-    flex: 0.5,
-  },
-  playingSpace: {
-    backgroundColor: 'white',
-    borderColor: 'blue',
-    borderWidth: 3,
-    overflow: 'hidden',
-  },
-  controlSpace: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  buttonView: {
-    width: '50%',
-    padding: 10,
-  },
-  text: {
-    textAlign: 'center',
-  },
-});
-
-const Square = () => (
-  <View
-    style={{
-      width: 50,
-      height: 50,
-      backgroundColor: randomHexColor(),
-    }}
-  />
-);
-
-const randomHexColor = () => {
-  return '#000000'.replace(/0/g, () => {
-    return Math.round(Math.random() * 14).toString(16);
-  });
-};
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=LayoutProps%20Example&ext=tsx
-import React, {useState} from 'react';
-import {
-  Button,
-  ScrollView,
-  StyleSheet,
-  Text,
-  View,
-  FlexAlignType,
-  FlexStyle,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [flexDirection, setFlexDirection] = useState(0);
-  const [justifyContent, setJustifyContent] = useState(0);
-  const [alignItems, setAlignItems] = useState(0);
-  const [direction, setDirection] = useState(0);
-  const [wrap, setWrap] = useState(0);
-
-  const [squares, setSquares] = useState([<Square />, <Square />, <Square />]);
-
-  const hookedStyles = {
-    flexDirection: flexDirections[flexDirection],
-    justifyContent: justifyContents[justifyContent],
-    alignItems: alignItemsArr[alignItems],
-    direction: directions[direction],
-    flexWrap: wraps[wrap],
-  } as FlexStyle;
-
-  const changeSetting = (
-    value: number,
-    options: any[],
-    setterFunction: (index: number) => void,
-  ) => {
-    if (value === options.length - 1) {
-      setterFunction(0);
-      return;
-    }
-    setterFunction(value + 1);
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={[styles.container, styles.playingSpace, hookedStyles]}>
-          {squares.map(elem => elem)}
-        </View>
-        <ScrollView style={styles.layoutContainer}>
-          <View style={styles.controlSpace}>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Flex Direction"
-                onPress={() =>
-                  changeSetting(flexDirection, flexDirections, setFlexDirection)
-                }
-              />
-              <Text style={styles.text}>{flexDirections[flexDirection]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Justify Content"
-                onPress={() =>
-                  changeSetting(
-                    justifyContent,
-                    justifyContents,
-                    setJustifyContent,
-                  )
-                }
-              />
-              <Text style={styles.text}>{justifyContents[justifyContent]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Align Items"
-                onPress={() =>
-                  changeSetting(alignItems, alignItemsArr, setAlignItems)
-                }
-              />
-              <Text style={styles.text}>{alignItemsArr[alignItems]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Direction"
-                onPress={() =>
-                  changeSetting(direction, directions, setDirection)
-                }
-              />
-              <Text style={styles.text}>{directions[direction]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Flex Wrap"
-                onPress={() => changeSetting(wrap, wraps, setWrap)}
-              />
-              <Text style={styles.text}>{wraps[wrap]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Add Square"
-                onPress={() => setSquares([...squares, <Square />])}
-              />
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Delete Square"
-                onPress={() =>
-                  setSquares(squares.filter((v, i) => i !== squares.length - 1))
-                }
-              />
-            </View>
-          </View>
-        </ScrollView>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const flexDirections = [
-  'row',
-  'row-reverse',
-  'column',
-  'column-reverse',
-] as FlexStyle['flexDirection'][];
-const justifyContents = [
-  'flex-start',
-  'flex-end',
-  'center',
-  'space-between',
-  'space-around',
-  'space-evenly',
-] as FlexStyle['justifyContent'][];
-const alignItemsArr = [
-  'flex-start',
-  'flex-end',
-  'center',
-  'stretch',
-  'baseline',
-] as FlexAlignType[];
-const wraps = ['nowrap', 'wrap', 'wrap-reverse'];
-const directions = ['inherit', 'ltr', 'rtl'];
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  layoutContainer: {
-    flex: 0.5,
-  },
-  playingSpace: {
-    backgroundColor: 'white',
-    borderColor: 'blue',
-    borderWidth: 3,
-    overflow: 'hidden',
-  },
-  controlSpace: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  buttonView: {
-    width: '50%',
-    padding: 10,
-  },
-  text: {
-    textAlign: 'center',
-  },
-});
-
-const Square = () => (
-  <View
-    style={{
-      width: 50,
-      height: 50,
-      backgroundColor: randomHexColor(),
-    }}
-  />
-);
-
-const randomHexColor = () => {
-  return '#000000'.replace(/0/g, () => {
-    return Math.round(Math.random() * 14).toString(16);
-  });
-};
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
----
-
-# Reference
-
-## Props
-
-### `alignContent`
-
-`alignContent` controls how rows align in the cross direction, overriding the `alignContent` of the parent.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) for more details.
-
-| Type                                                                                                 | Required |
-| ---------------------------------------------------------------------------------------------------- | -------- |
-| enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around', 'space-evenly') | No       |
-
----
-
-### `alignItems`
-
-`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS (default: stretch).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) for more details.
-
-| Type                                                            | Required |
-| --------------------------------------------------------------- | -------- |
-| enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline') | No       |
-
----
-
-### `alignSelf`
-
-`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS (default: auto).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) for more details.
-
-| Type                                                                    | Required |
-| ----------------------------------------------------------------------- | -------- |
-| enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline') | No       |
-
----
-
-### `aspectRatio`
-
-Aspect ratio controls the size of the undefined dimension of a node.
-
-- On a node with a set width/height, aspect ratio controls the size of the unset dimension
-- On a node with a set flex basis, aspect ratio controls the size of the node in the cross axis if unset
-- On a node with a measure function, aspect ratio works as though the measure function measures the flex basis
-- On a node with flex grow/shrink, aspect ratio controls the size of the node in the cross axis if unset
-- Aspect ratio takes min/max dimensions into account
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `borderBottomWidth`
-
-`borderBottomWidth` works like `border-bottom-width` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderEndWidth`
-
-When direction is `ltr`, `borderEndWidth` is equivalent to `borderRightWidth`. When direction is `rtl`, `borderEndWidth` is equivalent to `borderLeftWidth`.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderLeftWidth`
-
-`borderLeftWidth` works like `border-left-width` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderRightWidth`
-
-`borderRightWidth` works like `border-right-width` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderStartWidth`
-
-When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. When direction is `rtl`, `borderStartWidth` is equivalent to `borderRightWidth`.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderTopWidth`
-
-`borderTopWidth` works like `border-top-width` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderWidth`
-
-`borderWidth` works like `border-width` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `bottom`
-
-`bottom` is the number of logical pixels to offset the bottom edge of this component.
-
-It works similarly to `bottom` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) for more details of how `bottom` affects layout.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `boxSizing`
-
-`boxSizing` defines how the element's various sizing props (`width`, `height`, `minWidth`, `minHeight`, etc.) are computed. If `boxSizing` is `border-box`, these sizes apply to the border box of the element. If it is `content-box`, they apply to the content box of the element. The default value is `border-box`. The [web documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) is a good source of information if you wish to learn more about how this prop works.
-
-| Type                              | Required |
-| --------------------------------- | -------- |
-| enum('border-box', 'content-box') | No       |
-
----
-
-### `columnGap`
-
-`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `direction`
-
-`direction` specifies the directional flow of the user interface. The default is `inherit`, except for root node which will have value based on the current locale.
-
-See [MDN CSS Reference](https://www.yogalayout.dev/docs/styling/layout-direction) for more details.
-
-| Type                          | Required |
-| ----------------------------- | -------- |
-| enum('inherit', 'ltr', 'rtl') | No       |
-
----
-
-### `display`
-
-`display` sets the display type of this component.
-
-It works similarly to `display` in CSS but only supports the values 'flex', 'none', and 'contents'. The default is `flex`.
-
-| Type                             | Required |
-| -------------------------------- | -------- |
-| enum('none', 'flex', 'contents') | No       |
-
----
-
-### `end`
-
-When the direction is `ltr`, `end` is equivalent to `right`. When the direction is `rtl`, `end` is equivalent to `left`.
-
-This style takes precedence over the `left` and `right` styles.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `flex`
-
-In React Native `flex` does not work the same way that it does in CSS. `flex` is a number rather than a string, and it works according to the [Yoga](https://github.com/facebook/yoga) layout engine.
-
-When `flex` is a positive number, it makes the component flexible, and it will be sized proportional to its flex value. So a component with `flex` set to `2` will take twice the space as a component with `flex` set to 1. `flex: <positive number>` equates to `flexGrow: <positive number>, flexShrink: 1, flexBasis: 0`.
-
-When `flex` is `0`, the component is sized according to `width` and `height`, and it is inflexible.
-
-When `flex` is `-1`, the component is normally sized according to `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`.
-
-`flexGrow`, `flexShrink`, and `flexBasis` work the same as in CSS.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `flexBasis`
-
-`flexBasis` is an axis-independent way of providing the default size of an item along the main axis. Setting the `flexBasis` of a child is similar to setting the `width` of that child if its parent is a container with `flexDirection: row` or setting the `height` of a child if its parent is a container with `flexDirection: column`. The `flexBasis` of an item is the default size of that item, the size of the item before any `flexGrow` and `flexShrink` calculations are performed.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `flexDirection`
-
-`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) for more details.
-
-| Type                                                   | Required |
-| ------------------------------------------------------ | -------- |
-| enum('row', 'row-reverse', 'column', 'column-reverse') | No       |
-
----
-
-### `flexGrow`
-
-`flexGrow` describes how any space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
-
-`flexGrow` accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the children’s `flexGrow` values.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `flexShrink`
-
-[`flexShrink`](layout-props#flexshrink) describes how to shrink children along the main axis in the case in which the total size of the children overflows the size of the container on the main axis. `flexShrink` is very similar to `flexGrow` and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed.
-
-`flexShrink` accepts any floating point value >= 0, with 0 being the default value. A container will shrink its children weighted by the children’s `flexShrink` values.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `flexWrap`
-
-`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS (default: nowrap).
-
-Note it does not work anymore with `alignItems: stretch` (the default), so you may want to use `alignItems: flex-start` for example (breaking change details: https://github.com/facebook/react-native/releases/tag/v0.28.0).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) for more details.
-
-| Type                                   | Required |
-| -------------------------------------- | -------- |
-| enum('wrap', 'nowrap', 'wrap-reverse') | No       |
-
----
-
-### `gap`
-
-`gap` works like `gap` in CSS. Only pixel units are supported in React Native.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `height`
-
-`height` sets the height of this component.
-
-It works similarly to `height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/height) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `inset`
-
-:::note
-`inset` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Setting `inset` has the same effect as setting each of `top`, `bottom`, `right` and `left` props.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/inset) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetBlock`
-
-:::note
-`insetBlock` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Equivalent to [`top`](layout-props#top) and [`bottom`](layout-props#bottom).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetBlockEnd`
-
-:::note
-`insetBlockEnd` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Equivalent to [`bottom`](layout-props#bottom).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetBlockStart`
-
-:::note
-`insetBlockStart` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Equivalent to [`top`](layout-props#top).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetInline`
-
-:::note
-`insetInline` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Equivalent to [`right`](layout-props#right) and [`left`](layout-props#left).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetInlineEnd`
-
-:::note
-`insetInlineEnd` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-When direction is `ltr`, `insetInlineEnd` is equivalent to [`right`](layout-props#right). When direction is `rtl`, `insetInlineEnd` is equivalent to [`left`](layout-props#left).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetInlineStart`
-
-:::note
-`insetInlineStart` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-When direction is `ltr`, `insetInlineStart` is equivalent to [`left`](layout-props#left). When direction is `rtl`, `insetInlineStart` is equivalent to [`right`](layout-props#right).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `isolation`
-
-:::note
-`isolation` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-`isolation` lets you form a [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context).
-
-There are two values:
-
-- `auto` (default): Does nothing.
-- `isolate`: Forms a stacking context.
-
-| Type                    | Required |
-| ----------------------- | -------- |
-| enum('auto', 'isolate') | No       |
-
----
-
-### `justifyContent`
-
-`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS (default: flex-start).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) for more details.
-
-| Type                                                                                      | Required |
-| ----------------------------------------------------------------------------------------- | -------- |
-| enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly') | No       |
-
----
-
-### `left`
-
-`left` is the number of logical pixels to offset the left edge of this component.
-
-It works similarly to `left` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/left) for more details of how `left` affects layout.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `margin`
-
-Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginBottom`
-
-`marginBottom` works like `margin-bottom` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginBlock`
-
-Equivalent to [`marginVertical`](layout-props#marginvertical).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginBlockEnd`
-
-Equivalent to [`marginBottom`](layout-props#marginbottom).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginBlockStart`
-
-Equivalent to [`marginTop`](layout-props#margintop).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginEnd`
-
-When direction is `ltr`, `marginEnd` is equivalent to `marginRight`. When direction is `rtl`, `marginEnd` is equivalent to `marginLeft`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginHorizontal`
-
-Setting `marginHorizontal` has the same effect as setting both `marginLeft` and `marginRight`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginInline`
-
-Equivalent to [`marginHorizontal`](layout-props#marginhorizontal).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginInlineEnd`
-
-When direction is `ltr`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginRight`). When direction is `rtl`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginLeft`).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginInlineStart`
-
-When direction is `ltr`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginLeft`). When direction is `rtl`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginRight`).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginLeft`
-
-`marginLeft` works like `margin-left` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginRight`
-
-`marginRight` works like `margin-right` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginStart`
-
-When direction is `ltr`, `marginStart` is equivalent to `marginLeft`. When direction is `rtl`, `marginStart` is equivalent to `marginRight`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginTop`
-
-`marginTop` works like `margin-top` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginVertical`
-
-Setting `marginVertical` has the same effect as setting both `marginTop` and `marginBottom`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `maxHeight`
-
-`maxHeight` is the maximum height for this component, in logical pixels.
-
-It works similarly to `max-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `maxWidth`
-
-`maxWidth` is the maximum width for this component, in logical pixels.
-
-It works similarly to `max-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `minHeight`
-
-`minHeight` is the minimum height for this component, in logical pixels.
-
-It works similarly to `min-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `minWidth`
-
-`minWidth` is the minimum width for this component, in logical pixels.
-
-It works similarly to `min-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `overflow`
-
-`overflow` controls how children are measured and displayed. `overflow: hidden` causes views to be clipped while `overflow: scroll` causes views to be measured independently of their parents' main axis. It works like `overflow` in CSS (default: visible).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) for more details.
-
-| Type                                | Required |
-| ----------------------------------- | -------- |
-| enum('visible', 'hidden', 'scroll') | No       |
-
----
-
-### `padding`
-
-Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingBottom`
-
-`paddingBottom` works like `padding-bottom` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingBlock`
-
-Equivalent to [`paddingVertical`](layout-props#paddingvertical).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingBlockEnd`
-
-Equivalent to [`paddingBottom`](layout-props#paddingbottom).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingBlockStart`
-
-Equivalent to [`paddingTop`](layout-props#paddingtop).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingEnd`
-
-When direction is `ltr`, `paddingEnd` is equivalent to `paddingRight`. When direction is `rtl`, `paddingEnd` is equivalent to `paddingLeft`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingHorizontal`
-
-Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRight`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingInline`
-
-Equivalent to [`paddingHorizontal`](layout-props#paddinghorizontal).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingInlineEnd`
-
-When direction is `ltr`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingRight`). When direction is `rtl`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingLeft`).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingInlineStart`
-
-When direction is `ltr`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingLeft`). When direction is `rtl`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingRight`).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingLeft`
-
-`paddingLeft` works like `padding-left` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingRight`
-
-`paddingRight` works like `padding-right` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingStart`
-
-When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`. When direction is `rtl`, `paddingStart` is equivalent to `paddingRight`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingTop`
-
-`paddingTop` works like `padding-top` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingVertical`
-
-Setting `paddingVertical` is like setting both of `paddingTop` and `paddingBottom`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `position`
-
-`position` in React Native is similar to [regular CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/position), but everything is set to `relative` by default.
-
-`relative` will position an element according to the normal flow of the layout. Insets (`top`, `bottom`, `left`, `right`) will offset relative to this layout.
-
-`absolute` takes the element out of the normal flow of the layout. Insets will offset relative to its [containing block](./flexbox.md#the-containing-block).
-
-`static` will position an element according to the normal flow of the layout. Insets will have no effect.
-`static` elements do not form a containing block for absolute descendants.
-
-For more information, see the [Layout with Flexbox docs](./flexbox.md#position). Also, [the Yoga documentation](https://www.yogalayout.dev/docs/styling/position) has more details on how `position` differs between React Native and CSS.
-
-| Type                                   | Required |
-| -------------------------------------- | -------- |
-| enum('absolute', 'relative', 'static') | No       |
-
----
-
-### `right`
-
-`right` is the number of logical pixels to offset the right edge of this component.
-
-It works similarly to `right` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) for more details of how `right` affects layout.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `rowGap`
-
-`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `start`
-
-When the direction is `ltr`, `start` is equivalent to `left`. When the direction is `rtl`, `start` is equivalent to `right`.
-
-This style takes precedence over the `left`, `right`, and `end` styles.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `top`
-
-`top` is the number of logical pixels to offset the top edge of this component.
-
-It works similarly to `top` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/top) for more details of how `top` affects layout.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `width`
-
-`width` sets the width of this component.
-
-It works similarly to `width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/width) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `zIndex`
-
-`zIndex` controls which components display on top of others. Normally, you don't use `zIndex`. Components render according to their order in the document tree, so later components draw over earlier ones. `zIndex` may be useful if you have animations or custom modal interfaces where you don't want this behavior.
-
-It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball.
-
-On iOS, `zIndex` may require `View`s to be siblings of each other for it to work as expected.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
+---
+id: layout-props
+title: Layout Props
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+:::info
+More detailed examples about those properties can be found on the [Layout with Flexbox](flexbox) page.
+:::
+
+### Example
+
+The following example shows how different properties can affect or shape a React Native layout. You can try for example to add or remove squares from the UI while changing the values of the property `flexWrap`.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=LayoutProps%20Example&ext=js
+import {useState} from 'react';
+import {Button, ScrollView, StyleSheet, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [flexDirection, setFlexDirection] = useState(0);
+  const [justifyContent, setJustifyContent] = useState(0);
+  const [alignItems, setAlignItems] = useState(0);
+  const [direction, setDirection] = useState(0);
+  const [wrap, setWrap] = useState(0);
+
+  const [squares, setSquares] = useState([<Square />, <Square />, <Square />]);
+
+  const hookedStyles = {
+    flexDirection: flexDirections[flexDirection],
+    justifyContent: justifyContents[justifyContent],
+    alignItems: alignItemsArr[alignItems],
+    direction: directions[direction],
+    flexWrap: wraps[wrap],
+  };
+
+  const changeSetting = (value, options, setterFunction) => {
+    if (value === options.length - 1) {
+      setterFunction(0);
+      return;
+    }
+    setterFunction(value + 1);
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={[styles.container, styles.playingSpace, hookedStyles]}>
+          {squares.map(elem => elem)}
+        </View>
+        <ScrollView style={styles.layoutContainer}>
+          <View style={styles.controlSpace}>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Flex Direction"
+                onPress={() =>
+                  changeSetting(flexDirection, flexDirections, setFlexDirection)
+                }
+              />
+              <Text style={styles.text}>{flexDirections[flexDirection]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Justify Content"
+                onPress={() =>
+                  changeSetting(
+                    justifyContent,
+                    justifyContents,
+                    setJustifyContent,
+                  )
+                }
+              />
+              <Text style={styles.text}>{justifyContents[justifyContent]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Align Items"
+                onPress={() =>
+                  changeSetting(alignItems, alignItemsArr, setAlignItems)
+                }
+              />
+              <Text style={styles.text}>{alignItemsArr[alignItems]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Direction"
+                onPress={() =>
+                  changeSetting(direction, directions, setDirection)
+                }
+              />
+              <Text style={styles.text}>{directions[direction]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Flex Wrap"
+                onPress={() => changeSetting(wrap, wraps, setWrap)}
+              />
+              <Text style={styles.text}>{wraps[wrap]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Add Square"
+                onPress={() => setSquares([...squares, <Square />])}
+              />
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Delete Square"
+                onPress={() =>
+                  setSquares(squares.filter((v, i) => i !== squares.length - 1))
+                }
+              />
+            </View>
+          </View>
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const flexDirections = ['row', 'row-reverse', 'column', 'column-reverse'];
+const justifyContents = [
+  'flex-start',
+  'flex-end',
+  'center',
+  'space-between',
+  'space-around',
+  'space-evenly',
+];
+const alignItemsArr = [
+  'flex-start',
+  'flex-end',
+  'center',
+  'stretch',
+  'baseline',
+];
+const wraps = ['nowrap', 'wrap', 'wrap-reverse'];
+const directions = ['inherit', 'ltr', 'rtl'];
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  layoutContainer: {
+    flex: 0.5,
+  },
+  playingSpace: {
+    backgroundColor: 'white',
+    borderColor: 'blue',
+    borderWidth: 3,
+    overflow: 'hidden',
+  },
+  controlSpace: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  buttonView: {
+    width: '50%',
+    padding: 10,
+  },
+  text: {
+    textAlign: 'center',
+  },
+});
+
+const Square = () => (
+  <View
+    style={{
+      width: 50,
+      height: 50,
+      backgroundColor: randomHexColor(),
+    }}
+  />
+);
+
+const randomHexColor = () => {
+  return '#000000'.replace(/0/g, () => {
+    return Math.round(Math.random() * 14).toString(16);
+  });
+};
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=LayoutProps%20Example&ext=tsx
+import {useState} from 'react';
+import {
+  Button,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+  FlexAlignType,
+  FlexStyle,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [flexDirection, setFlexDirection] = useState(0);
+  const [justifyContent, setJustifyContent] = useState(0);
+  const [alignItems, setAlignItems] = useState(0);
+  const [direction, setDirection] = useState(0);
+  const [wrap, setWrap] = useState(0);
+
+  const [squares, setSquares] = useState([<Square />, <Square />, <Square />]);
+
+  const hookedStyles = {
+    flexDirection: flexDirections[flexDirection],
+    justifyContent: justifyContents[justifyContent],
+    alignItems: alignItemsArr[alignItems],
+    direction: directions[direction],
+    flexWrap: wraps[wrap],
+  } as FlexStyle;
+
+  const changeSetting = (
+    value: number,
+    options: any[],
+    setterFunction: (index: number) => void,
+  ) => {
+    if (value === options.length - 1) {
+      setterFunction(0);
+      return;
+    }
+    setterFunction(value + 1);
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={[styles.container, styles.playingSpace, hookedStyles]}>
+          {squares.map(elem => elem)}
+        </View>
+        <ScrollView style={styles.layoutContainer}>
+          <View style={styles.controlSpace}>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Flex Direction"
+                onPress={() =>
+                  changeSetting(flexDirection, flexDirections, setFlexDirection)
+                }
+              />
+              <Text style={styles.text}>{flexDirections[flexDirection]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Justify Content"
+                onPress={() =>
+                  changeSetting(
+                    justifyContent,
+                    justifyContents,
+                    setJustifyContent,
+                  )
+                }
+              />
+              <Text style={styles.text}>{justifyContents[justifyContent]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Align Items"
+                onPress={() =>
+                  changeSetting(alignItems, alignItemsArr, setAlignItems)
+                }
+              />
+              <Text style={styles.text}>{alignItemsArr[alignItems]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Direction"
+                onPress={() =>
+                  changeSetting(direction, directions, setDirection)
+                }
+              />
+              <Text style={styles.text}>{directions[direction]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Flex Wrap"
+                onPress={() => changeSetting(wrap, wraps, setWrap)}
+              />
+              <Text style={styles.text}>{wraps[wrap]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Add Square"
+                onPress={() => setSquares([...squares, <Square />])}
+              />
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Delete Square"
+                onPress={() =>
+                  setSquares(squares.filter((v, i) => i !== squares.length - 1))
+                }
+              />
+            </View>
+          </View>
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const flexDirections = [
+  'row',
+  'row-reverse',
+  'column',
+  'column-reverse',
+] as FlexStyle['flexDirection'][];
+const justifyContents = [
+  'flex-start',
+  'flex-end',
+  'center',
+  'space-between',
+  'space-around',
+  'space-evenly',
+] as FlexStyle['justifyContent'][];
+const alignItemsArr = [
+  'flex-start',
+  'flex-end',
+  'center',
+  'stretch',
+  'baseline',
+] as FlexAlignType[];
+const wraps = ['nowrap', 'wrap', 'wrap-reverse'];
+const directions = ['inherit', 'ltr', 'rtl'];
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  layoutContainer: {
+    flex: 0.5,
+  },
+  playingSpace: {
+    backgroundColor: 'white',
+    borderColor: 'blue',
+    borderWidth: 3,
+    overflow: 'hidden',
+  },
+  controlSpace: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  buttonView: {
+    width: '50%',
+    padding: 10,
+  },
+  text: {
+    textAlign: 'center',
+  },
+});
+
+const Square = () => (
+  <View
+    style={{
+      width: 50,
+      height: 50,
+      backgroundColor: randomHexColor(),
+    }}
+  />
+);
+
+const randomHexColor = () => {
+  return '#000000'.replace(/0/g, () => {
+    return Math.round(Math.random() * 14).toString(16);
+  });
+};
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+---
+
+# Reference
+
+## Props
+
+### `alignContent`
+
+`alignContent` controls how rows align in the cross direction, overriding the `alignContent` of the parent.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) for more details.
+
+| Type                                                                                                 | Required |
+| ---------------------------------------------------------------------------------------------------- | -------- |
+| enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around', 'space-evenly') | No       |
+
+---
+
+### `alignItems`
+
+`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS (default: stretch).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) for more details.
+
+| Type                                                            | Required |
+| --------------------------------------------------------------- | -------- |
+| enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline') | No       |
+
+---
+
+### `alignSelf`
+
+`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS (default: auto).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) for more details.
+
+| Type                                                                    | Required |
+| ----------------------------------------------------------------------- | -------- |
+| enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline') | No       |
+
+---
+
+### `aspectRatio`
+
+Aspect ratio controls the size of the undefined dimension of a node.
+
+- On a node with a set width/height, aspect ratio controls the size of the unset dimension
+- On a node with a set flex basis, aspect ratio controls the size of the node in the cross axis if unset
+- On a node with a measure function, aspect ratio works as though the measure function measures the flex basis
+- On a node with flex grow/shrink, aspect ratio controls the size of the node in the cross axis if unset
+- Aspect ratio takes min/max dimensions into account
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `borderBottomWidth`
+
+`borderBottomWidth` works like `border-bottom-width` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderEndWidth`
+
+When direction is `ltr`, `borderEndWidth` is equivalent to `borderRightWidth`. When direction is `rtl`, `borderEndWidth` is equivalent to `borderLeftWidth`.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderLeftWidth`
+
+`borderLeftWidth` works like `border-left-width` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderRightWidth`
+
+`borderRightWidth` works like `border-right-width` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderStartWidth`
+
+When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. When direction is `rtl`, `borderStartWidth` is equivalent to `borderRightWidth`.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderTopWidth`
+
+`borderTopWidth` works like `border-top-width` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderWidth`
+
+`borderWidth` works like `border-width` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `bottom`
+
+`bottom` is the number of logical pixels to offset the bottom edge of this component.
+
+It works similarly to `bottom` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) for more details of how `bottom` affects layout.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `boxSizing`
+
+`boxSizing` defines how the element's various sizing props (`width`, `height`, `minWidth`, `minHeight`, etc.) are computed. If `boxSizing` is `border-box`, these sizes apply to the border box of the element. If it is `content-box`, they apply to the content box of the element. The default value is `border-box`. The [web documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) is a good source of information if you wish to learn more about how this prop works.
+
+| Type                              | Required |
+| --------------------------------- | -------- |
+| enum('border-box', 'content-box') | No       |
+
+---
+
+### `columnGap`
+
+`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `direction`
+
+`direction` specifies the directional flow of the user interface. The default is `inherit`, except for root node which will have value based on the current locale.
+
+See [MDN CSS Reference](https://www.yogalayout.dev/docs/styling/layout-direction) for more details.
+
+| Type                          | Required |
+| ----------------------------- | -------- |
+| enum('inherit', 'ltr', 'rtl') | No       |
+
+---
+
+### `display`
+
+`display` sets the display type of this component.
+
+It works similarly to `display` in CSS but only supports the values 'flex', 'none', and 'contents'. The default is `flex`.
+
+| Type                             | Required |
+| -------------------------------- | -------- |
+| enum('none', 'flex', 'contents') | No       |
+
+---
+
+### `end`
+
+When the direction is `ltr`, `end` is equivalent to `right`. When the direction is `rtl`, `end` is equivalent to `left`.
+
+This style takes precedence over the `left` and `right` styles.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `flex`
+
+In React Native `flex` does not work the same way that it does in CSS. `flex` is a number rather than a string, and it works according to the [Yoga](https://github.com/facebook/yoga) layout engine.
+
+When `flex` is a positive number, it makes the component flexible, and it will be sized proportional to its flex value. So a component with `flex` set to `2` will take twice the space as a component with `flex` set to 1. `flex: <positive number>` equates to `flexGrow: <positive number>, flexShrink: 1, flexBasis: 0`.
+
+When `flex` is `0`, the component is sized according to `width` and `height`, and it is inflexible.
+
+When `flex` is `-1`, the component is normally sized according to `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`.
+
+`flexGrow`, `flexShrink`, and `flexBasis` work the same as in CSS.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `flexBasis`
+
+`flexBasis` is an axis-independent way of providing the default size of an item along the main axis. Setting the `flexBasis` of a child is similar to setting the `width` of that child if its parent is a container with `flexDirection: row` or setting the `height` of a child if its parent is a container with `flexDirection: column`. The `flexBasis` of an item is the default size of that item, the size of the item before any `flexGrow` and `flexShrink` calculations are performed.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `flexDirection`
+
+`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) for more details.
+
+| Type                                                   | Required |
+| ------------------------------------------------------ | -------- |
+| enum('row', 'row-reverse', 'column', 'column-reverse') | No       |
+
+---
+
+### `flexGrow`
+
+`flexGrow` describes how any space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
+
+`flexGrow` accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the children’s `flexGrow` values.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `flexShrink`
+
+[`flexShrink`](layout-props#flexshrink) describes how to shrink children along the main axis in the case in which the total size of the children overflows the size of the container on the main axis. `flexShrink` is very similar to `flexGrow` and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed.
+
+`flexShrink` accepts any floating point value >= 0, with 0 being the default value. A container will shrink its children weighted by the children’s `flexShrink` values.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `flexWrap`
+
+`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS (default: nowrap).
+
+Note it does not work anymore with `alignItems: stretch` (the default), so you may want to use `alignItems: flex-start` for example (breaking change details: https://github.com/facebook/react-native/releases/tag/v0.28.0).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) for more details.
+
+| Type                                   | Required |
+| -------------------------------------- | -------- |
+| enum('wrap', 'nowrap', 'wrap-reverse') | No       |
+
+---
+
+### `gap`
+
+`gap` works like `gap` in CSS. Only pixel units are supported in React Native.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `height`
+
+`height` sets the height of this component.
+
+It works similarly to `height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/height) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `inset`
+
+:::note
+`inset` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Setting `inset` has the same effect as setting each of `top`, `bottom`, `right` and `left` props.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/inset) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetBlock`
+
+:::note
+`insetBlock` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Equivalent to [`top`](layout-props#top) and [`bottom`](layout-props#bottom).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetBlockEnd`
+
+:::note
+`insetBlockEnd` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Equivalent to [`bottom`](layout-props#bottom).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetBlockStart`
+
+:::note
+`insetBlockStart` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Equivalent to [`top`](layout-props#top).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetInline`
+
+:::note
+`insetInline` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Equivalent to [`right`](layout-props#right) and [`left`](layout-props#left).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetInlineEnd`
+
+:::note
+`insetInlineEnd` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+When direction is `ltr`, `insetInlineEnd` is equivalent to [`right`](layout-props#right). When direction is `rtl`, `insetInlineEnd` is equivalent to [`left`](layout-props#left).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetInlineStart`
+
+:::note
+`insetInlineStart` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+When direction is `ltr`, `insetInlineStart` is equivalent to [`left`](layout-props#left). When direction is `rtl`, `insetInlineStart` is equivalent to [`right`](layout-props#right).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `isolation`
+
+:::note
+`isolation` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+`isolation` lets you form a [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context).
+
+There are two values:
+
+- `auto` (default): Does nothing.
+- `isolate`: Forms a stacking context.
+
+| Type                    | Required |
+| ----------------------- | -------- |
+| enum('auto', 'isolate') | No       |
+
+---
+
+### `justifyContent`
+
+`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS (default: flex-start).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) for more details.
+
+| Type                                                                                      | Required |
+| ----------------------------------------------------------------------------------------- | -------- |
+| enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly') | No       |
+
+---
+
+### `left`
+
+`left` is the number of logical pixels to offset the left edge of this component.
+
+It works similarly to `left` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/left) for more details of how `left` affects layout.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `margin`
+
+Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginBottom`
+
+`marginBottom` works like `margin-bottom` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginBlock`
+
+Equivalent to [`marginVertical`](layout-props#marginvertical).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginBlockEnd`
+
+Equivalent to [`marginBottom`](layout-props#marginbottom).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginBlockStart`
+
+Equivalent to [`marginTop`](layout-props#margintop).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginEnd`
+
+When direction is `ltr`, `marginEnd` is equivalent to `marginRight`. When direction is `rtl`, `marginEnd` is equivalent to `marginLeft`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginHorizontal`
+
+Setting `marginHorizontal` has the same effect as setting both `marginLeft` and `marginRight`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginInline`
+
+Equivalent to [`marginHorizontal`](layout-props#marginhorizontal).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginInlineEnd`
+
+When direction is `ltr`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginRight`). When direction is `rtl`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginLeft`).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginInlineStart`
+
+When direction is `ltr`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginLeft`). When direction is `rtl`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginRight`).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginLeft`
+
+`marginLeft` works like `margin-left` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginRight`
+
+`marginRight` works like `margin-right` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginStart`
+
+When direction is `ltr`, `marginStart` is equivalent to `marginLeft`. When direction is `rtl`, `marginStart` is equivalent to `marginRight`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginTop`
+
+`marginTop` works like `margin-top` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginVertical`
+
+Setting `marginVertical` has the same effect as setting both `marginTop` and `marginBottom`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `maxHeight`
+
+`maxHeight` is the maximum height for this component, in logical pixels.
+
+It works similarly to `max-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `maxWidth`
+
+`maxWidth` is the maximum width for this component, in logical pixels.
+
+It works similarly to `max-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `minHeight`
+
+`minHeight` is the minimum height for this component, in logical pixels.
+
+It works similarly to `min-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `minWidth`
+
+`minWidth` is the minimum width for this component, in logical pixels.
+
+It works similarly to `min-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `overflow`
+
+`overflow` controls how children are measured and displayed. `overflow: hidden` causes views to be clipped while `overflow: scroll` causes views to be measured independently of their parents' main axis. It works like `overflow` in CSS (default: visible).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) for more details.
+
+| Type                                | Required |
+| ----------------------------------- | -------- |
+| enum('visible', 'hidden', 'scroll') | No       |
+
+---
+
+### `padding`
+
+Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingBottom`
+
+`paddingBottom` works like `padding-bottom` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingBlock`
+
+Equivalent to [`paddingVertical`](layout-props#paddingvertical).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingBlockEnd`
+
+Equivalent to [`paddingBottom`](layout-props#paddingbottom).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingBlockStart`
+
+Equivalent to [`paddingTop`](layout-props#paddingtop).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingEnd`
+
+When direction is `ltr`, `paddingEnd` is equivalent to `paddingRight`. When direction is `rtl`, `paddingEnd` is equivalent to `paddingLeft`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingHorizontal`
+
+Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRight`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingInline`
+
+Equivalent to [`paddingHorizontal`](layout-props#paddinghorizontal).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingInlineEnd`
+
+When direction is `ltr`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingRight`). When direction is `rtl`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingLeft`).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingInlineStart`
+
+When direction is `ltr`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingLeft`). When direction is `rtl`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingRight`).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingLeft`
+
+`paddingLeft` works like `padding-left` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingRight`
+
+`paddingRight` works like `padding-right` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingStart`
+
+When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`. When direction is `rtl`, `paddingStart` is equivalent to `paddingRight`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingTop`
+
+`paddingTop` works like `padding-top` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingVertical`
+
+Setting `paddingVertical` is like setting both of `paddingTop` and `paddingBottom`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `position`
+
+`position` in React Native is similar to [regular CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/position), but everything is set to `relative` by default.
+
+`relative` will position an element according to the normal flow of the layout. Insets (`top`, `bottom`, `left`, `right`) will offset relative to this layout.
+
+`absolute` takes the element out of the normal flow of the layout. Insets will offset relative to its [containing block](./flexbox.md#the-containing-block).
+
+`static` will position an element according to the normal flow of the layout. Insets will have no effect.
+`static` elements do not form a containing block for absolute descendants.
+
+For more information, see the [Layout with Flexbox docs](./flexbox.md#position). Also, [the Yoga documentation](https://www.yogalayout.dev/docs/styling/position) has more details on how `position` differs between React Native and CSS.
+
+| Type                                   | Required |
+| -------------------------------------- | -------- |
+| enum('absolute', 'relative', 'static') | No       |
+
+---
+
+### `right`
+
+`right` is the number of logical pixels to offset the right edge of this component.
+
+It works similarly to `right` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) for more details of how `right` affects layout.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `rowGap`
+
+`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `start`
+
+When the direction is `ltr`, `start` is equivalent to `left`. When the direction is `rtl`, `start` is equivalent to `right`.
+
+This style takes precedence over the `left`, `right`, and `end` styles.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `top`
+
+`top` is the number of logical pixels to offset the top edge of this component.
+
+It works similarly to `top` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/top) for more details of how `top` affects layout.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `width`
+
+`width` sets the width of this component.
+
+It works similarly to `width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/width) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `zIndex`
+
+`zIndex` controls which components display on top of others. Normally, you don't use `zIndex`. Components render according to their order in the document tree, so later components draw over earlier ones. `zIndex` may be useful if you have animations or custom modal interfaces where you don't want this behavior.
+
+It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball.
+
+On iOS, `zIndex` may require `View`s to be siblings of each other for it to work as expected.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
diff --git a/website/versioned_docs/version-0.85/layoutanimation.md b/website/versioned_docs/version-0.85/layoutanimation.md
index 911a247c8c7..24a7d060d1e 100644
--- a/website/versioned_docs/version-0.85/layoutanimation.md
+++ b/website/versioned_docs/version-0.85/layoutanimation.md
@@ -1,358 +1,358 @@
----
-id: layoutanimation
-title: LayoutAnimation
----
-
-Automatically animates views to their new positions when the next layout happens.
-
-A common way to use this API is to call it before updating the state hook in functional components and calling `setState` in class components.
-
-Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`:
-
-```js
-if (Platform.OS === 'android') {
-  if (UIManager.setLayoutAnimationEnabledExperimental) {
-    UIManager.setLayoutAnimationEnabledExperimental(true);
-  }
-}
-```
-
-## Example
-
-```SnackPlayer name=LayoutAnimation%20Example&supportedPlatforms=android,ios
-import React, {useState} from 'react';
-import {
-  LayoutAnimation,
-  Platform,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  UIManager,
-  View,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-if (
-  Platform.OS === 'android' &&
-  UIManager.setLayoutAnimationEnabledExperimental
-) {
-  UIManager.setLayoutAnimationEnabledExperimental(true);
-}
-const App = () => {
-  const [expanded, setExpanded] = useState(false);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={style.container}>
-        <TouchableOpacity
-          onPress={() => {
-            LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
-            setExpanded(!expanded);
-          }}>
-          <Text>Press me to {expanded ? 'collapse' : 'expand'}!</Text>
-        </TouchableOpacity>
-        {expanded && (
-          <View style={style.tile}>
-            <Text>I disappear sometimes!</Text>
-          </View>
-        )}
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const style = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    gap: 16,
-  },
-  tile: {
-    backgroundColor: 'lightgrey',
-    borderWidth: 0.5,
-    borderColor: '#d6d7da',
-    padding: 4,
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Methods
-
-### `configureNext()`
-
-```tsx
-static configureNext(
-  config: LayoutAnimationConfig,
-  onAnimationDidEnd?: () => void,
-  onAnimationDidFail?: () => void,
-);
-```
-
-Schedules an animation to happen on the next layout.
-
-#### Parameters:
-
-| Name               | Type     | Required | Description                         |
-| ------------------ | -------- | -------- | ----------------------------------- |
-| config             | object   | Yes      | See config description below.       |
-| onAnimationDidEnd  | function | No       | Called when the animation finished. |
-| onAnimationDidFail | function | No       | Called when the animation failed.   |
-
-The `config` parameter is an object with the keys below. [`create`](layoutanimation.md#create) returns a valid object for `config`, and the [`Presets`](layoutanimation.md#presets) objects can also all be passed as the `config`.
-
-- `duration` in milliseconds
-- `create`, optional config for animating in new views
-- `update`, optional config for animating views that have been updated
-- `delete`, optional config for animating views as they are removed
-
-The config that's passed to `create`, `update`, or `delete` has the following keys:
-
-- `type`, the [animation type](layoutanimation.md#types) to use
-- `property`, the [layout property](layoutanimation.md#properties) to animate (optional, but recommended for `create` and `delete`)
-- `springDamping` (number, optional and only for use with `type: Type.spring`)
-- `initialVelocity` (number, optional)
-- `delay` (number, optional)
-- `duration` (number, optional)
-
----
-
-### `create()`
-
-```tsx
-static create(duration, type, creationProp)
-```
-
-Helper that creates an object (with `create`, `update`, and `delete` fields) to pass into [`configureNext`](layoutanimation.md#configurenext). The `type` parameter is an [animation type](layoutanimation.md#types), and the `creationProp` parameter is a [layout property](layoutanimation.md#properties).
-
-**Example:**
-
-```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios
-import React, {useState} from 'react';
-import {
-  View,
-  Platform,
-  UIManager,
-  LayoutAnimation,
-  StyleSheet,
-  Button,
-} from 'react-native';
-
-if (
-  Platform.OS === 'android' &&
-  UIManager.setLayoutAnimationEnabledExperimental
-) {
-  UIManager.setLayoutAnimationEnabledExperimental(true);
-}
-
-const App = () => {
-  const [boxPosition, setBoxPosition] = useState('left');
-
-  const toggleBox = () => {
-    LayoutAnimation.configureNext({
-      duration: 500,
-      create: {type: 'linear', property: 'opacity'},
-      update: {type: 'spring', springDamping: 0.4},
-      delete: {type: 'linear', property: 'opacity'},
-    });
-    setBoxPosition(boxPosition === 'left' ? 'right' : 'left');
-  };
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.buttonContainer}>
-        <Button title="Toggle Layout" onPress={toggleBox} />
-      </View>
-      <View
-        style={[styles.box, boxPosition === 'left' ? null : styles.moveRight]}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'flex-start',
-    justifyContent: 'center',
-  },
-  box: {
-    height: 100,
-    width: 100,
-    borderRadius: 5,
-    margin: 8,
-    backgroundColor: 'blue',
-  },
-  moveRight: {
-    alignSelf: 'flex-end',
-    height: 200,
-    width: 200,
-  },
-  buttonContainer: {
-    alignSelf: 'center',
-  },
-});
-
-export default App;
-```
-
-## Properties
-
-### Types
-
-An enumeration of animation types to be used in the [`create`](layoutanimation.md#create) method, or in the `create`/`update`/`delete` configs for [`configureNext`](layoutanimation.md#configurenext). (example usage: `LayoutAnimation.Types.easeIn`)
-
-| Types         |
-| ------------- |
-| spring        |
-| linear        |
-| easeInEaseOut |
-| easeIn        |
-| easeOut       |
-| keyboard      |
-
----
-
-### Properties
-
-An enumeration of layout properties to be animated to be used in the [`create`](layoutanimation.md#create) method, or in the `create`/`update`/`delete` configs for [`configureNext`](layoutanimation.md#configurenext). (example usage: `LayoutAnimation.Properties.opacity`)
-
-| Properties |
-| ---------- |
-| opacity    |
-| scaleX     |
-| scaleY     |
-| scaleXY    |
-
----
-
-### Presets
-
-A set of predefined animation configs to pass into [`configureNext`](layoutanimation.md#configurenext).
-
-| Presets       | Value                                                                                                                                                          |
-| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| easeInEaseOut | `create(300, 'easeInEaseOut', 'opacity')`                                                                                                                      |
-| linear        | `create(500, 'linear', 'opacity')`                                                                                                                             |
-| spring        | `{duration: 700, create: {type: 'linear', property: 'opacity'}, update: {type: 'spring', springDamping: 0.4}, delete: {type: 'linear', property: 'opacity'} }` |
-
----
-
-### `easeInEaseOut`
-
-Calls `configureNext()` with `Presets.easeInEaseOut`.
-
----
-
-### `linear`
-
-Calls `configureNext()` with `Presets.linear`.
-
----
-
-### `spring`
-
-Calls `configureNext()` with `Presets.spring`.
-
-**Example:**
-
-```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios
-import React, {useState} from 'react';
-import {
-  View,
-  Platform,
-  UIManager,
-  LayoutAnimation,
-  StyleSheet,
-  Button,
-} from 'react-native';
-
-if (
-  Platform.OS === 'android' &&
-  UIManager.setLayoutAnimationEnabledExperimental
-) {
-  UIManager.setLayoutAnimationEnabledExperimental(true);
-}
-
-const App = () => {
-  const [firstBoxPosition, setFirstBoxPosition] = useState('left');
-  const [secondBoxPosition, setSecondBoxPosition] = useState('left');
-  const [thirdBoxPosition, setThirdBoxPosition] = useState('left');
-
-  const toggleFirstBox = () => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-    setFirstBoxPosition(firstBoxPosition === 'left' ? 'right' : 'left');
-  };
-
-  const toggleSecondBox = () => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
-    setSecondBoxPosition(secondBoxPosition === 'left' ? 'right' : 'left');
-  };
-
-  const toggleThirdBox = () => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
-    setThirdBoxPosition(thirdBoxPosition === 'left' ? 'right' : 'left');
-  };
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.buttonContainer}>
-        <Button title="EaseInEaseOut" onPress={toggleFirstBox} />
-      </View>
-      <View
-        style={[
-          styles.box,
-          firstBoxPosition === 'left' ? null : styles.moveRight,
-        ]}
-      />
-      <View style={styles.buttonContainer}>
-        <Button title="Linear" onPress={toggleSecondBox} />
-      </View>
-      <View
-        style={[
-          styles.box,
-          secondBoxPosition === 'left' ? null : styles.moveRight,
-        ]}
-      />
-      <View style={styles.buttonContainer}>
-        <Button title="Spring" onPress={toggleThirdBox} />
-      </View>
-      <View
-        style={[
-          styles.box,
-          thirdBoxPosition === 'left' ? null : styles.moveRight,
-        ]}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'flex-start',
-    justifyContent: 'center',
-  },
-  box: {
-    height: 100,
-    width: 100,
-    borderRadius: 5,
-    margin: 8,
-    backgroundColor: 'blue',
-  },
-  moveRight: {
-    alignSelf: 'flex-end',
-  },
-  buttonContainer: {
-    alignSelf: 'center',
-  },
-});
-
-export default App;
-```
+---
+id: layoutanimation
+title: LayoutAnimation
+---
+
+Automatically animates views to their new positions when the next layout happens.
+
+A common way to use this API is to call it before updating the state hook in functional components and calling `setState` in class components.
+
+Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`:
+
+```js
+if (Platform.OS === 'android') {
+  if (UIManager.setLayoutAnimationEnabledExperimental) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+  }
+}
+```
+
+## Example
+
+```SnackPlayer name=LayoutAnimation%20Example&supportedPlatforms=android,ios
+import {useState} from 'react';
+import {
+  LayoutAnimation,
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  UIManager,
+  View,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+if (
+  Platform.OS === 'android' &&
+  UIManager.setLayoutAnimationEnabledExperimental
+) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+const App = () => {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={style.container}>
+        <TouchableOpacity
+          onPress={() => {
+            LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
+            setExpanded(!expanded);
+          }}>
+          <Text>Press me to {expanded ? 'collapse' : 'expand'}!</Text>
+        </TouchableOpacity>
+        {expanded && (
+          <View style={style.tile}>
+            <Text>I disappear sometimes!</Text>
+          </View>
+        )}
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const style = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 16,
+  },
+  tile: {
+    backgroundColor: 'lightgrey',
+    borderWidth: 0.5,
+    borderColor: '#d6d7da',
+    padding: 4,
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `configureNext()`
+
+```tsx
+static configureNext(
+  config: LayoutAnimationConfig,
+  onAnimationDidEnd?: () => void,
+  onAnimationDidFail?: () => void,
+);
+```
+
+Schedules an animation to happen on the next layout.
+
+#### Parameters:
+
+| Name               | Type     | Required | Description                         |
+| ------------------ | -------- | -------- | ----------------------------------- |
+| config             | object   | Yes      | See config description below.       |
+| onAnimationDidEnd  | function | No       | Called when the animation finished. |
+| onAnimationDidFail | function | No       | Called when the animation failed.   |
+
+The `config` parameter is an object with the keys below. [`create`](layoutanimation.md#create) returns a valid object for `config`, and the [`Presets`](layoutanimation.md#presets) objects can also all be passed as the `config`.
+
+- `duration` in milliseconds
+- `create`, optional config for animating in new views
+- `update`, optional config for animating views that have been updated
+- `delete`, optional config for animating views as they are removed
+
+The config that's passed to `create`, `update`, or `delete` has the following keys:
+
+- `type`, the [animation type](layoutanimation.md#types) to use
+- `property`, the [layout property](layoutanimation.md#properties) to animate (optional, but recommended for `create` and `delete`)
+- `springDamping` (number, optional and only for use with `type: Type.spring`)
+- `initialVelocity` (number, optional)
+- `delay` (number, optional)
+- `duration` (number, optional)
+
+---
+
+### `create()`
+
+```tsx
+static create(duration, type, creationProp)
+```
+
+Helper that creates an object (with `create`, `update`, and `delete` fields) to pass into [`configureNext`](layoutanimation.md#configurenext). The `type` parameter is an [animation type](layoutanimation.md#types), and the `creationProp` parameter is a [layout property](layoutanimation.md#properties).
+
+**Example:**
+
+```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios
+import {useState} from 'react';
+import {
+  View,
+  Platform,
+  UIManager,
+  LayoutAnimation,
+  StyleSheet,
+  Button,
+} from 'react-native';
+
+if (
+  Platform.OS === 'android' &&
+  UIManager.setLayoutAnimationEnabledExperimental
+) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+const App = () => {
+  const [boxPosition, setBoxPosition] = useState('left');
+
+  const toggleBox = () => {
+    LayoutAnimation.configureNext({
+      duration: 500,
+      create: {type: 'linear', property: 'opacity'},
+      update: {type: 'spring', springDamping: 0.4},
+      delete: {type: 'linear', property: 'opacity'},
+    });
+    setBoxPosition(boxPosition === 'left' ? 'right' : 'left');
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.buttonContainer}>
+        <Button title="Toggle Layout" onPress={toggleBox} />
+      </View>
+      <View
+        style={[styles.box, boxPosition === 'left' ? null : styles.moveRight]}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+  },
+  box: {
+    height: 100,
+    width: 100,
+    borderRadius: 5,
+    margin: 8,
+    backgroundColor: 'blue',
+  },
+  moveRight: {
+    alignSelf: 'flex-end',
+    height: 200,
+    width: 200,
+  },
+  buttonContainer: {
+    alignSelf: 'center',
+  },
+});
+
+export default App;
+```
+
+## Properties
+
+### Types
+
+An enumeration of animation types to be used in the [`create`](layoutanimation.md#create) method, or in the `create`/`update`/`delete` configs for [`configureNext`](layoutanimation.md#configurenext). (example usage: `LayoutAnimation.Types.easeIn`)
+
+| Types         |
+| ------------- |
+| spring        |
+| linear        |
+| easeInEaseOut |
+| easeIn        |
+| easeOut       |
+| keyboard      |
+
+---
+
+### Properties
+
+An enumeration of layout properties to be animated to be used in the [`create`](layoutanimation.md#create) method, or in the `create`/`update`/`delete` configs for [`configureNext`](layoutanimation.md#configurenext). (example usage: `LayoutAnimation.Properties.opacity`)
+
+| Properties |
+| ---------- |
+| opacity    |
+| scaleX     |
+| scaleY     |
+| scaleXY    |
+
+---
+
+### Presets
+
+A set of predefined animation configs to pass into [`configureNext`](layoutanimation.md#configurenext).
+
+| Presets       | Value                                                                                                                                                          |
+| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| easeInEaseOut | `create(300, 'easeInEaseOut', 'opacity')`                                                                                                                      |
+| linear        | `create(500, 'linear', 'opacity')`                                                                                                                             |
+| spring        | `{duration: 700, create: {type: 'linear', property: 'opacity'}, update: {type: 'spring', springDamping: 0.4}, delete: {type: 'linear', property: 'opacity'} }` |
+
+---
+
+### `easeInEaseOut`
+
+Calls `configureNext()` with `Presets.easeInEaseOut`.
+
+---
+
+### `linear`
+
+Calls `configureNext()` with `Presets.linear`.
+
+---
+
+### `spring`
+
+Calls `configureNext()` with `Presets.spring`.
+
+**Example:**
+
+```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios
+import {useState} from 'react';
+import {
+  View,
+  Platform,
+  UIManager,
+  LayoutAnimation,
+  StyleSheet,
+  Button,
+} from 'react-native';
+
+if (
+  Platform.OS === 'android' &&
+  UIManager.setLayoutAnimationEnabledExperimental
+) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+const App = () => {
+  const [firstBoxPosition, setFirstBoxPosition] = useState('left');
+  const [secondBoxPosition, setSecondBoxPosition] = useState('left');
+  const [thirdBoxPosition, setThirdBoxPosition] = useState('left');
+
+  const toggleFirstBox = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setFirstBoxPosition(firstBoxPosition === 'left' ? 'right' : 'left');
+  };
+
+  const toggleSecondBox = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
+    setSecondBoxPosition(secondBoxPosition === 'left' ? 'right' : 'left');
+  };
+
+  const toggleThirdBox = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
+    setThirdBoxPosition(thirdBoxPosition === 'left' ? 'right' : 'left');
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.buttonContainer}>
+        <Button title="EaseInEaseOut" onPress={toggleFirstBox} />
+      </View>
+      <View
+        style={[
+          styles.box,
+          firstBoxPosition === 'left' ? null : styles.moveRight,
+        ]}
+      />
+      <View style={styles.buttonContainer}>
+        <Button title="Linear" onPress={toggleSecondBox} />
+      </View>
+      <View
+        style={[
+          styles.box,
+          secondBoxPosition === 'left' ? null : styles.moveRight,
+        ]}
+      />
+      <View style={styles.buttonContainer}>
+        <Button title="Spring" onPress={toggleThirdBox} />
+      </View>
+      <View
+        style={[
+          styles.box,
+          thirdBoxPosition === 'left' ? null : styles.moveRight,
+        ]}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+  },
+  box: {
+    height: 100,
+    width: 100,
+    borderRadius: 5,
+    margin: 8,
+    backgroundColor: 'blue',
+  },
+  moveRight: {
+    alignSelf: 'flex-end',
+  },
+  buttonContainer: {
+    alignSelf: 'center',
+  },
+});
+
+export default App;
+```
diff --git a/website/versioned_docs/version-0.85/legacy/direct-manipulation.md b/website/versioned_docs/version-0.85/legacy/direct-manipulation.md
index b3e7e063414..9ba739abb15 100644
--- a/website/versioned_docs/version-0.85/legacy/direct-manipulation.md
+++ b/website/versioned_docs/version-0.85/legacy/direct-manipulation.md
@@ -1,444 +1,440 @@
----
-id: direct-manipulation
-title: Direct Manipulation
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-It is sometimes necessary to make changes directly to a component without using state/props to trigger a re-render of the entire subtree. When using React in the browser for example, you sometimes need to directly modify a DOM node, and the same is true for views in mobile apps. `setNativeProps` is the React Native equivalent to setting properties directly on a DOM node.
-
-:::caution
-Use `setNativeProps` when frequent re-rendering creates a performance bottleneck!
-
-Direct manipulation will not be a tool that you reach for frequently. You will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views.
-`setNativeProps` is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about.
-
-Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate).
-:::
-
-## setNativeProps with TouchableOpacity
-
-[TouchableOpacity](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js) uses `setNativeProps` internally to update the opacity of its child component:
-
-```tsx
-const viewRef = useRef<View>();
-const setOpacityTo = useCallback(value => {
-  // Redacted: animation related code
-  viewRef.current.setNativeProps({
-    opacity: value,
-  });
-}, []);
-```
-
-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:
-
-```tsx
-<TouchableOpacity onPress={handlePress}>
-  <View>
-    <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:
-
-```tsx
-const [buttonOpacity, setButtonOpacity] = useState(1);
-return (
-  <TouchableOpacity
-    onPressIn={() => setButtonOpacity(0.5)}
-    onPressOut={() => setButtonOpacity(1)}>
-    <View style={{opacity: buttonOpacity}}>
-      <Text>Press me!</Text>
-    </View>
-  </TouchableOpacity>
-);
-```
-
-This is computationally intensive compared to the original example - React needs to re-render the component hierarchy each time the opacity changes, even though other properties of the view and its children haven't changed. Usually this overhead isn't a concern but when performing continuous animations and responding to gestures, judiciously optimizing your components can improve your animations' fidelity.
-
-If you look at the implementation of `setNativeProps` in [NativeMethodsMixin](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js) you will notice that it is a wrapper around `RCTUIManager.updateView` - this is the exact same function call that results from re-rendering - see [receiveComponent in ReactNativeBaseComponent](https://github.com/facebook/react-native/blob/fb2ec1ea47c53c2e7b873acb1cb46192ac74274e/Libraries/Renderer/oss/ReactNativeRenderer-prod.js#L5793-L5813).
-
-## Composite components and setNativeProps
-
-Composite components are not backed by a native view, so you cannot call `setNativeProps` on them. Consider this example:
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=setNativeProps%20with%20Composite%20Components&ext=js
-import React from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
-
-const MyButton = props => (
-  <View style={{marginTop: 50}}>
-    <Text>{props.label}</Text>
-  </View>
-);
-
-const App = () => (
-  <TouchableOpacity>
-    <MyButton label="Press me!" />
-  </TouchableOpacity>
-);
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=setNativeProps%20with%20Composite%20Components&ext=tsx
-import React from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
-
-const MyButton = (props: {label: string}) => (
-  <View style={{marginTop: 50}}>
-    <Text>{props.label}</Text>
-  </View>
-);
-
-const App = () => (
-  <TouchableOpacity>
-    <MyButton label="Press me!" />
-  </TouchableOpacity>
-);
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-If you run this you will immediately see this error: `Touchable child must either be native or forward setNativeProps to a native component`. This occurs because `MyButton` isn't directly backed by a native view whose opacity should be set. You can think about it like this: if you define a component with `createReactClass` you would not expect to be able to set a style prop on it and have that work - you would need to pass the style prop down to a child, unless you are wrapping a native component. Similarly, we are going to forward `setNativeProps` to a native-backed child component.
-
-#### Forward setNativeProps to a child
-
-Since the `setNativeProps` method exists on any ref to a `View` component, it is enough to forward a ref on your custom component to one of the `<View />` components that it renders. This means that a call to `setNativeProps` on the custom component will have the same effect as if you called `setNativeProps` on the wrapped `View` component itself.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Forwarding%20setNativeProps&ext=js
-import React from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
-
-const MyButton = React.forwardRef((props, ref) => (
-  <View {...props} ref={ref} style={{marginTop: 50}}>
-    <Text>{props.label}</Text>
-  </View>
-));
-
-const App = () => (
-  <TouchableOpacity>
-    <MyButton label="Press me!" />
-  </TouchableOpacity>
-);
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Forwarding%20setNativeProps&ext=tsx
-import React from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
-
-const MyButton = React.forwardRef<View, {label: string}>((props, ref) => (
-  <View {...props} ref={ref} style={{marginTop: 50}}>
-    <Text>{props.label}</Text>
-  </View>
-));
-
-const App = () => (
-  <TouchableOpacity>
-    <MyButton label="Press me!" />
-  </TouchableOpacity>
-);
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-You can now use `MyButton` inside of `TouchableOpacity`!
-
-You may have noticed that we passed all of the props down to the child view using `{...props}`. The reason for this is that `TouchableOpacity` is actually a composite component, and so in addition to depending on `setNativeProps` on its child, it also requires that the child perform touch handling. To do this, it passes on [various props](view.md#onmoveshouldsetresponder) that call back to the `TouchableOpacity` component. `TouchableHighlight`, in contrast, is backed by a native view and only requires that we implement `setNativeProps`.
-
-## setNativeProps to edit TextInput value
-
-Another very common use case of `setNativeProps` is to edit the value of the TextInput. The `controlled` prop of TextInput can sometimes drop characters when the `bufferDelay` is low and the user types very quickly. Some developers prefer to skip this prop entirely and instead use `setNativeProps` to directly manipulate the TextInput value when necessary. For example, the following code demonstrates editing the input when you tap a button:
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Clear%20text&ext=js
-import React from 'react';
-import {useCallback, useRef} from 'react';
-import {
-  StyleSheet,
-  TextInput,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-
-const App = () => {
-  const inputRef = useRef(null);
-  const editText = useCallback(() => {
-    inputRef.current.setNativeProps({text: 'Edited Text'});
-  }, []);
-
-  return (
-    <View style={styles.container}>
-      <TextInput ref={inputRef} style={styles.input} />
-      <TouchableOpacity onPress={editText}>
-        <Text>Edit text</Text>
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  input: {
-    height: 50,
-    width: 200,
-    marginHorizontal: 20,
-    borderWidth: 1,
-    borderColor: '#ccc',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Clear%20text&ext=tsx
-import React from 'react';
-import {useCallback, useRef} from 'react';
-import {
-  StyleSheet,
-  TextInput,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-
-const App = () => {
-  const inputRef = useRef<TextInput>(null);
-  const editText = useCallback(() => {
-    inputRef.current?.setNativeProps({text: 'Edited Text'});
-  }, []);
-
-  return (
-    <View style={styles.container}>
-      <TextInput ref={inputRef} style={styles.input} />
-      <TouchableOpacity onPress={editText}>
-        <Text>Edit text</Text>
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  input: {
-    height: 50,
-    width: 200,
-    marginHorizontal: 20,
-    borderWidth: 1,
-    borderColor: '#ccc',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-You can use the [`clear`](../textinput#clear) method to clear the `TextInput` which clears the current input text using the same approach.
-
-## Avoiding conflicts with the render function
-
-If you update a property that is also managed by the render function, you might end up with some unpredictable and confusing bugs because anytime the component re-renders and that property changes, whatever value was previously set from `setNativeProps` will be completely ignored and overridden.
-
-## setNativeProps & shouldComponentUpdate
-
-By [intelligently applying `shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`.
-
-## Other native methods
-
-The methods described here are available on most of the default components provided by React Native. Note, however, that they are _not_ available on composite components that aren't directly backed by a native view. This will generally include most components that you define in your own app.
-
-### measure(callback)
-
-Determines the location on screen, width, and height in the viewport of the given view and returns the values via an async callback. If successful, the callback will be called with the following arguments:
-
-- x
-- y
-- width
-- height
-- pageX
-- pageY
-
-Note that these measurements are not available until after the rendering has been completed in native. If you need the measurements as soon as possible and you don't need `pageX` and `pageY`, consider using the [`onLayout`](view.md#onlayout) property instead.
-
-Also the width and height returned by `measure()` are the width and height of the component in the viewport. If you need the actual size of the component, consider using the [`onLayout`](view.md#onlayout) property instead.
-
-### measureInWindow(callback)
-
-Determines the location of the given view in the window and returns the values via an async callback. If the React root view is embedded in another native view, this will give you the absolute coordinates. If successful, the callback will be called with the following arguments:
-
-- x
-- y
-- width
-- height
-
-### measureLayout(relativeToNativeComponentRef, onSuccess, onFail)
-
-Like `measure()`, but measures the view relative to an ancestor, specified with `relativeToNativeComponentRef` reference. This means that the returned coordinates are relative to the origin `x`, `y` of the ancestor view.
-
-:::note
-This method can also be called with a `relativeToNativeNode` handler (instead of reference), but this variant is obsolete with the new architecture.
-:::
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=measureLayout%20example&supportedPlatforms=android,ios&ext=js
-import React, {useEffect, useRef, useState} from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-
-const App = () => {
-  const textContainerRef = useRef(null);
-  const textRef = useRef(null);
-  const [measure, setMeasure] = useState(null);
-
-  useEffect(() => {
-    if (textRef.current && textContainerRef.current) {
-      textRef.current.measureLayout(
-        textContainerRef.current,
-        (left, top, width, height) => {
-          setMeasure({left, top, width, height});
-        },
-      );
-    }
-  }, [measure]);
-
-  return (
-    <View style={styles.container}>
-      <View ref={textContainerRef} style={styles.textContainer}>
-        <Text ref={textRef}>Where am I? (relative to the text container)</Text>
-      </View>
-      <Text style={styles.measure}>{JSON.stringify(measure)}</Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  textContainer: {
-    backgroundColor: '#61dafb',
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 12,
-  },
-  measure: {
-    textAlign: 'center',
-    padding: 12,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=measureLayout%20example&ext=tsx
-import React, {useEffect, useRef, useState} from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-
-type Measurements = {
-  left: number;
-  top: number;
-  width: number;
-  height: number;
-};
-
-const App = () => {
-  const textContainerRef = useRef<View>(null);
-  const textRef = useRef<Text>(null);
-  const [measure, setMeasure] = useState<Measurements | null>(null);
-
-  useEffect(() => {
-    if (textRef.current && textContainerRef.current) {
-      textRef.current?.measureLayout(
-        textContainerRef.current,
-        (left, top, width, height) => {
-          setMeasure({left, top, width, height});
-        },
-        () => {
-          console.error('measurement failed');
-        },
-      );
-    }
-  }, [measure]);
-
-  return (
-    <View style={styles.container}>
-      <View ref={textContainerRef} style={styles.textContainer}>
-        <Text ref={textRef}>Where am I? (relative to the text container)</Text>
-      </View>
-      <Text style={styles.measure}>{JSON.stringify(measure)}</Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  textContainer: {
-    backgroundColor: '#61dafb',
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 12,
-  },
-  measure: {
-    textAlign: 'center',
-    padding: 12,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### focus()
-
-Requests focus for the given input or view. The exact behavior triggered will depend on the platform and type of view.
-
-### blur()
-
-Removes focus from an input or view. This is the opposite of `focus()`.
+---
+id: direct-manipulation
+title: Direct Manipulation
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+It is sometimes necessary to make changes directly to a component without using state/props to trigger a re-render of the entire subtree. When using React in the browser for example, you sometimes need to directly modify a DOM node, and the same is true for views in mobile apps. `setNativeProps` is the React Native equivalent to setting properties directly on a DOM node.
+
+:::caution
+Use `setNativeProps` when frequent re-rendering creates a performance bottleneck!
+
+Direct manipulation will not be a tool that you reach for frequently. You will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views.
+`setNativeProps` is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about.
+
+Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate).
+:::
+
+## setNativeProps with TouchableOpacity
+
+[TouchableOpacity](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js) uses `setNativeProps` internally to update the opacity of its child component:
+
+```tsx
+const viewRef = useRef<View>();
+const setOpacityTo = useCallback(value => {
+  // Redacted: animation related code
+  viewRef.current.setNativeProps({
+    opacity: value,
+  });
+}, []);
+```
+
+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:
+
+```tsx
+<TouchableOpacity onPress={handlePress}>
+  <View>
+    <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:
+
+```tsx
+const [buttonOpacity, setButtonOpacity] = useState(1);
+return (
+  <TouchableOpacity
+    onPressIn={() => setButtonOpacity(0.5)}
+    onPressOut={() => setButtonOpacity(1)}>
+    <View style={{opacity: buttonOpacity}}>
+      <Text>Press me!</Text>
+    </View>
+  </TouchableOpacity>
+);
+```
+
+This is computationally intensive compared to the original example - React needs to re-render the component hierarchy each time the opacity changes, even though other properties of the view and its children haven't changed. Usually this overhead isn't a concern but when performing continuous animations and responding to gestures, judiciously optimizing your components can improve your animations' fidelity.
+
+If you look at the implementation of `setNativeProps` in [NativeMethodsMixin](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js) you will notice that it is a wrapper around `RCTUIManager.updateView` - this is the exact same function call that results from re-rendering - see [receiveComponent in ReactNativeBaseComponent](https://github.com/facebook/react-native/blob/fb2ec1ea47c53c2e7b873acb1cb46192ac74274e/Libraries/Renderer/oss/ReactNativeRenderer-prod.js#L5793-L5813).
+
+## Composite components and setNativeProps
+
+Composite components are not backed by a native view, so you cannot call `setNativeProps` on them. Consider this example:
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=setNativeProps%20with%20Composite%20Components&ext=js
+import {Text, TouchableOpacity, View} from 'react-native';
+
+const MyButton = props => (
+  <View style={{marginTop: 50}}>
+    <Text>{props.label}</Text>
+  </View>
+);
+
+const App = () => (
+  <TouchableOpacity>
+    <MyButton label="Press me!" />
+  </TouchableOpacity>
+);
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=setNativeProps%20with%20Composite%20Components&ext=tsx
+import {Text, TouchableOpacity, View} from 'react-native';
+
+const MyButton = (props: {label: string}) => (
+  <View style={{marginTop: 50}}>
+    <Text>{props.label}</Text>
+  </View>
+);
+
+const App = () => (
+  <TouchableOpacity>
+    <MyButton label="Press me!" />
+  </TouchableOpacity>
+);
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+If you run this you will immediately see this error: `Touchable child must either be native or forward setNativeProps to a native component`. This occurs because `MyButton` isn't directly backed by a native view whose opacity should be set. You can think about it like this: if you define a component with `createReactClass` you would not expect to be able to set a style prop on it and have that work - you would need to pass the style prop down to a child, unless you are wrapping a native component. Similarly, we are going to forward `setNativeProps` to a native-backed child component.
+
+#### Forward setNativeProps to a child
+
+Since the `setNativeProps` method exists on any ref to a `View` component, it is enough to forward a ref on your custom component to one of the `<View />` components that it renders. This means that a call to `setNativeProps` on the custom component will have the same effect as if you called `setNativeProps` on the wrapped `View` component itself.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Forwarding%20setNativeProps&ext=js
+import {forwardRef} from 'react';
+import {Text, TouchableOpacity, View} from 'react-native';
+
+const MyButton = forwardRef((props, ref) => (
+  <View {...props} ref={ref} style={{marginTop: 50}}>
+    <Text>{props.label}</Text>
+  </View>
+));
+
+const App = () => (
+  <TouchableOpacity>
+    <MyButton label="Press me!" />
+  </TouchableOpacity>
+);
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Forwarding%20setNativeProps&ext=tsx
+import {forwardRef} from 'react';
+import {Text, TouchableOpacity, View} from 'react-native';
+
+const MyButton = forwardRef<View, {label: string}>((props, ref) => (
+  <View {...props} ref={ref} style={{marginTop: 50}}>
+    <Text>{props.label}</Text>
+  </View>
+));
+
+const App = () => (
+  <TouchableOpacity>
+    <MyButton label="Press me!" />
+  </TouchableOpacity>
+);
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+You can now use `MyButton` inside of `TouchableOpacity`!
+
+You may have noticed that we passed all of the props down to the child view using `{...props}`. The reason for this is that `TouchableOpacity` is actually a composite component, and so in addition to depending on `setNativeProps` on its child, it also requires that the child perform touch handling. To do this, it passes on [various props](view.md#onmoveshouldsetresponder) that call back to the `TouchableOpacity` component. `TouchableHighlight`, in contrast, is backed by a native view and only requires that we implement `setNativeProps`.
+
+## setNativeProps to edit TextInput value
+
+Another very common use case of `setNativeProps` is to edit the value of the TextInput. The `controlled` prop of TextInput can sometimes drop characters when the `bufferDelay` is low and the user types very quickly. Some developers prefer to skip this prop entirely and instead use `setNativeProps` to directly manipulate the TextInput value when necessary. For example, the following code demonstrates editing the input when you tap a button:
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Clear%20text&ext=js
+import {useCallback, useRef} from 'react';
+import {
+  StyleSheet,
+  TextInput,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+const App = () => {
+  const inputRef = useRef(null);
+  const editText = useCallback(() => {
+    inputRef.current.setNativeProps({text: 'Edited Text'});
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <TextInput ref={inputRef} style={styles.input} />
+      <TouchableOpacity onPress={editText}>
+        <Text>Edit text</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  input: {
+    height: 50,
+    width: 200,
+    marginHorizontal: 20,
+    borderWidth: 1,
+    borderColor: '#ccc',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Clear%20text&ext=tsx
+import {useCallback, useRef} from 'react';
+import {
+  StyleSheet,
+  TextInput,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+const App = () => {
+  const inputRef = useRef<TextInput>(null);
+  const editText = useCallback(() => {
+    inputRef.current?.setNativeProps({text: 'Edited Text'});
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <TextInput ref={inputRef} style={styles.input} />
+      <TouchableOpacity onPress={editText}>
+        <Text>Edit text</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  input: {
+    height: 50,
+    width: 200,
+    marginHorizontal: 20,
+    borderWidth: 1,
+    borderColor: '#ccc',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+You can use the [`clear`](../textinput#clear) method to clear the `TextInput` which clears the current input text using the same approach.
+
+## Avoiding conflicts with the render function
+
+If you update a property that is also managed by the render function, you might end up with some unpredictable and confusing bugs because anytime the component re-renders and that property changes, whatever value was previously set from `setNativeProps` will be completely ignored and overridden.
+
+## setNativeProps & shouldComponentUpdate
+
+By [intelligently applying `shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`.
+
+## Other native methods
+
+The methods described here are available on most of the default components provided by React Native. Note, however, that they are _not_ available on composite components that aren't directly backed by a native view. This will generally include most components that you define in your own app.
+
+### measure(callback)
+
+Determines the location on screen, width, and height in the viewport of the given view and returns the values via an async callback. If successful, the callback will be called with the following arguments:
+
+- x
+- y
+- width
+- height
+- pageX
+- pageY
+
+Note that these measurements are not available until after the rendering has been completed in native. If you need the measurements as soon as possible and you don't need `pageX` and `pageY`, consider using the [`onLayout`](view.md#onlayout) property instead.
+
+Also the width and height returned by `measure()` are the width and height of the component in the viewport. If you need the actual size of the component, consider using the [`onLayout`](view.md#onlayout) property instead.
+
+### measureInWindow(callback)
+
+Determines the location of the given view in the window and returns the values via an async callback. If the React root view is embedded in another native view, this will give you the absolute coordinates. If successful, the callback will be called with the following arguments:
+
+- x
+- y
+- width
+- height
+
+### measureLayout(relativeToNativeComponentRef, onSuccess, onFail)
+
+Like `measure()`, but measures the view relative to an ancestor, specified with `relativeToNativeComponentRef` reference. This means that the returned coordinates are relative to the origin `x`, `y` of the ancestor view.
+
+:::note
+This method can also be called with a `relativeToNativeNode` handler (instead of reference), but this variant is obsolete with the new architecture.
+:::
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=measureLayout%20example&supportedPlatforms=android,ios&ext=js
+import {useEffect, useRef, useState} from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+
+const App = () => {
+  const textContainerRef = useRef(null);
+  const textRef = useRef(null);
+  const [measure, setMeasure] = useState(null);
+
+  useEffect(() => {
+    if (textRef.current && textContainerRef.current) {
+      textRef.current.measureLayout(
+        textContainerRef.current,
+        (left, top, width, height) => {
+          setMeasure({left, top, width, height});
+        },
+      );
+    }
+  }, [measure]);
+
+  return (
+    <View style={styles.container}>
+      <View ref={textContainerRef} style={styles.textContainer}>
+        <Text ref={textRef}>Where am I? (relative to the text container)</Text>
+      </View>
+      <Text style={styles.measure}>{JSON.stringify(measure)}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  textContainer: {
+    backgroundColor: '#61dafb',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 12,
+  },
+  measure: {
+    textAlign: 'center',
+    padding: 12,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=measureLayout%20example&ext=tsx
+import {useEffect, useRef, useState} from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+
+type Measurements = {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+};
+
+const App = () => {
+  const textContainerRef = useRef<View>(null);
+  const textRef = useRef<Text>(null);
+  const [measure, setMeasure] = useState<Measurements | null>(null);
+
+  useEffect(() => {
+    if (textRef.current && textContainerRef.current) {
+      textRef.current?.measureLayout(
+        textContainerRef.current,
+        (left, top, width, height) => {
+          setMeasure({left, top, width, height});
+        },
+        () => {
+          console.error('measurement failed');
+        },
+      );
+    }
+  }, [measure]);
+
+  return (
+    <View style={styles.container}>
+      <View ref={textContainerRef} style={styles.textContainer}>
+        <Text ref={textRef}>Where am I? (relative to the text container)</Text>
+      </View>
+      <Text style={styles.measure}>{JSON.stringify(measure)}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  textContainer: {
+    backgroundColor: '#61dafb',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 12,
+  },
+  measure: {
+    textAlign: 'center',
+    padding: 12,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### focus()
+
+Requests focus for the given input or view. The exact behavior triggered will depend on the platform and type of view.
+
+### blur()
+
+Removes focus from an input or view. This is the opposite of `focus()`.
diff --git a/website/versioned_docs/version-0.85/legacy/native-components-android.md b/website/versioned_docs/version-0.85/legacy/native-components-android.md
index 9443d854c53..53d9854dca8 100644
--- a/website/versioned_docs/version-0.85/legacy/native-components-android.md
+++ b/website/versioned_docs/version-0.85/legacy/native-components-android.md
@@ -1,873 +1,873 @@
----
-id: native-components-android
-title: Android Native UI Components
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-import NativeDeprecated from '../the-new-architecture/\_markdown_native_deprecation.mdx'
-
-<NativeDeprecated />
-
-There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application.
-
-Like the native module guide, this too is a more advanced guide that assumes you are somewhat familiar with Android SDK programming. This guide will show you how to build a native UI component, walking you through the implementation of a subset of the existing `ImageView` component available in the core React Native library.
-
-:::info
-You can also setup local library containing native component with one command. Read the guide to [Local libraries setup](local-library-setup) for more details.
-:::
-
-## ImageView example
-
-For this example we are going to walk through the implementation requirements to allow the use of ImageViews in JavaScript.
-
-Native views are created and manipulated by extending `ViewManager` or more commonly `SimpleViewManager` . A `SimpleViewManager` is convenient in this case because it applies common properties such as background color, opacity, and Flexbox layout.
-
-These subclasses are essentially singletons - only one instance of each is created by the bridge. They send native views to the `NativeViewHierarchyManager`, which delegates back to them to set and update the properties of the views as necessary. The `ViewManagers` are also typically the delegates for the views, sending events back to JavaScript via the bridge.
-
-To send a view:
-
-1. Create the ViewManager subclass.
-2. Implement the `createViewInstance` method
-3. Expose view property setters using `@ReactProp` (or `@ReactPropGroup`) annotation
-4. Register the manager in `createViewManagers` of the applications package.
-5. Implement the JavaScript module
-
-### 1. Create the `ViewManager` subclass
-
-In this example we create view manager class `ReactImageManager` that extends `SimpleViewManager` of type `ReactImageView`. `ReactImageView` is the type of object managed by the manager, this will be the custom native view. Name returned by `getName` is used to reference the native view type from JavaScript.
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-class ReactImageManager(
-    private val callerContext: ReactApplicationContext
-) : SimpleViewManager<ReactImageView>() {
-
-  override fun getName() = REACT_CLASS
-
-  companion object {
-    const val REACT_CLASS = "RCTImageView"
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-public class ReactImageManager extends SimpleViewManager<ReactImageView> {
-
-  public static final String REACT_CLASS = "RCTImageView";
-  ReactApplicationContext mCallerContext;
-
-  public ReactImageManager(ReactApplicationContext reactContext) {
-    mCallerContext = reactContext;
-  }
-
-  @Override
-  public String getName() {
-    return REACT_CLASS;
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 2. Implement method `createViewInstance`
-
-Views are created in the `createViewInstance` method, the view should initialize itself in its default state, any properties will be set via a follow up call to `updateView.`
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-  override fun createViewInstance(context: ThemedReactContext) =
-      ReactImageView(context, Fresco.newDraweeControllerBuilder(), null, callerContext)
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-  @Override
-  public ReactImageView createViewInstance(ThemedReactContext context) {
-    return new ReactImageView(context, Fresco.newDraweeControllerBuilder(), null, mCallerContext);
-  }
-```
-
-</TabItem>
-</Tabs>
-
-### 3. Expose view property setters using `@ReactProp` (or `@ReactPropGroup`) annotation
-
-Properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with `@ReactProp` (or `@ReactPropGroup`). Setter method should take view to be updated (of the current view type) as a first argument and property value as a second argument. Setter should be public and not return a value (i.e. return type should be `void` in Java or `Unit` in Kotlin). Property type sent to JS is determined automatically based on the type of value argument of the setter. The following type of values are currently supported (in Java): `boolean`, `int`, `float`, `double`, `String`, `Boolean`, `Integer`, `ReadableArray`, `ReadableMap`. The corresponding types in Kotlin are `Boolean`, `Int`, `Float`, `Double`, `String`, `ReadableArray`, `ReadableMap`.
-
-Annotation `@ReactProp` has one obligatory argument `name` of type `String`. Name assigned to the `@ReactProp` annotation linked to the setter method is used to reference the property on JS side.
-
-Except from `name`, `@ReactProp` annotation may take following optional arguments: `defaultBoolean`, `defaultInt`, `defaultFloat`. Those arguments should be of the corresponding type (accordingly `boolean`, `int`, `float` in Java and `Boolean`, `Int`, `Float` in Kotlin) and the value provided will be passed to the setter method in case when the property that the setter is referencing has been removed from the component. Note that "default" values are only provided for primitive types, in case when setter is of some complex type, `null` will be provided as a default value in case when corresponding property gets removed.
-
-Setter declaration requirements for methods annotated with `@ReactPropGroup` are different than for `@ReactProp`, please refer to the `@ReactPropGroup` annotation class docs for more information about it. **IMPORTANT!** in ReactJS updating the property value will result in setter method call. Note that one of the ways we can update component is by removing properties that have been set before. In that case setter method will be called as well to notify view manager that property has changed. In that case "default" value will be provided (for primitive types "default" value can be specified using `defaultBoolean`, `defaultFloat`, etc. arguments of `@ReactProp` annotation, for complex types setter will be called with value set to `null`).
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-  @ReactProp(name = "src")
-  fun setSrc(view: ReactImageView, sources: ReadableArray?) {
-    view.setSource(sources)
-  }
-
-  @ReactProp(name = "borderRadius", defaultFloat = 0f)
-  override fun setBorderRadius(view: ReactImageView, borderRadius: Float) {
-    view.setBorderRadius(borderRadius)
-  }
-
-  @ReactProp(name = ViewProps.RESIZE_MODE)
-  fun setResizeMode(view: ReactImageView, resizeMode: String?) {
-    view.setScaleType(ImageResizeMode.toScaleType(resizeMode))
-  }
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-  @ReactProp(name = "src")
-  public void setSrc(ReactImageView view, @Nullable ReadableArray sources) {
-    view.setSource(sources);
-  }
-
-  @ReactProp(name = "borderRadius", defaultFloat = 0f)
-  public void setBorderRadius(ReactImageView view, float borderRadius) {
-    view.setBorderRadius(borderRadius);
-  }
-
-  @ReactProp(name = ViewProps.RESIZE_MODE)
-  public void setResizeMode(ReactImageView view, @Nullable String resizeMode) {
-    view.setScaleType(ImageResizeMode.toScaleType(resizeMode));
-  }
-```
-
-</TabItem>
-</Tabs>
-
-### 4. Register the `ViewManager`
-
-The final step is to register the ViewManager to the application, this happens in a similar way to [Native Modules](native-modules-android.md), via the applications package member function `createViewManagers`.
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-  override fun createViewManagers(
-      reactContext: ReactApplicationContext
-  ) = listOf(ReactImageManager(reactContext))
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-  @Override
-  public List<ViewManager> createViewManagers(
-                            ReactApplicationContext reactContext) {
-    return Arrays.<ViewManager>asList(
-      new ReactImageManager(reactContext)
-    );
-  }
-```
-
-</TabItem>
-</Tabs>
-
-### 5. Implement the JavaScript module
-
-The very final step is to create the JavaScript module that defines the interface layer between Java/Kotlin and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using TypeScript, Flow, or plain old comments).
-
-```tsx title="ImageView.tsx"
-import {requireNativeComponent} from 'react-native';
-
-/**
- * Composes `View`.
- *
- * - src: Array<{url: string}>
- * - borderRadius: number
- * - resizeMode: 'cover' | 'contain' | 'stretch'
- */
-export default requireNativeComponent('RCTImageView');
-```
-
-The `requireNativeComponent` function takes the name of the native view. Note that if your component needs to do anything more sophisticated (e.g. custom event handling), you should wrap the native component in another React component. This is illustrated in the `MyCustomView` example below.
-
-## Events
-
-So now we know how to expose native view components that we can control freely from JS, but how do we deal with events from the user, like pinch-zooms or panning? When a native event occurs the native code should issue an event to the JavaScript representation of the View, and the two views are linked with the value returned from the `getId()` method.
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-class MyCustomView(context: Context) : View(context) {
-  ...
-  fun onReceiveNativeEvent() {
-    val event = Arguments.createMap().apply {
-      putString("message", "MyMessage")
-    }
-    val reactContext = context as ReactContext
-    reactContext
-        .getJSModule(RCTEventEmitter::class.java)
-        .receiveEvent(id, "topChange", event)
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-class MyCustomView extends View {
-   ...
-   public void onReceiveNativeEvent() {
-      WritableMap event = Arguments.createMap();
-      event.putString("message", "MyMessage");
-      ReactContext reactContext = (ReactContext)getContext();
-      reactContext
-          .getJSModule(RCTEventEmitter.class)
-          .receiveEvent(getId(), "topChange", event);
-    }
-}
-```
-
-</TabItem>
-</Tabs>
-
-To map the `topChange` event name to the `onChange` callback prop in JavaScript, register it by overriding the `getExportedCustomBubblingEventTypeConstants` method in your `ViewManager`:
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-class ReactImageManager : SimpleViewManager<MyCustomView>() {
-  ...
-  override fun getExportedCustomBubblingEventTypeConstants(): Map<String, Any> {
-    return mapOf(
-      "topChange" to mapOf(
-        "phasedRegistrationNames" to mapOf(
-          "bubbled" to "onChange"
-        )
-      )
-    )
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-public class ReactImageManager extends SimpleViewManager<MyCustomView> {
-    ...
-    public Map getExportedCustomBubblingEventTypeConstants() {
-        return MapBuilder.builder().put(
-            "topChange",
-            MapBuilder.of(
-                "phasedRegistrationNames",
-                MapBuilder.of("bubbled", "onChange")
-            )
-        ).build();
-    }
-}
-```
-
-</TabItem>
-</Tabs>
-
-This callback is invoked with the raw event, which we typically process in the wrapper component to make a simpler API:
-
-```tsx {8-11,13-17} title="MyCustomView.tsx"
-import {useCallback} from 'react';
-import {requireNativeComponent} from 'react-native';
-
-const RCTMyCustomView = requireNativeComponent('RCTMyCustomView');
-
-export default function MyCustomView(props: {
-  // ...
-  /**
-   * Callback that is called continuously when the user is dragging the map.
-   */
-  onChangeMessage: (message: string) => unknown;
-}) {
-  const onChange = useCallback(
-    event => {
-      props.onChangeMessage?.(event.nativeEvent.message);
-    },
-    [props.onChangeMessage],
-  );
-
-  return <RCTMyCustomView {...props} onChange={onChange} />;
-}
-```
-
-## Integration with an Android Fragment example
-
-In order to integrate existing Native UI elements to your React Native app, you might need to use Android Fragments to give you a more granular control over your native component than returning a `View` from your `ViewManager`. You will need this if you want to add custom logic that is tied to your view with the help of [lifecycle methods](https://developer.android.com/guide/fragments/lifecycle), such as `onViewCreated`, `onPause`, `onResume`. The following steps will show you how to do it:
-
-### 1. Create an example custom view
-
-First, let's create a `CustomView` class which extends `FrameLayout` (the content of this view can be any view that you'd like to render)
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin title="CustomView.kt"
-// replace with your package
-package com.mypackage
-
-import android.content.Context
-import android.graphics.Color
-import android.widget.FrameLayout
-import android.widget.TextView
-
-class CustomView(context: Context) : FrameLayout(context) {
-  init {
-    // set padding and background color
-    setPadding(16,16,16,16)
-    setBackgroundColor(Color.parseColor("#5FD3F3"))
-
-    // add default text view
-    addView(TextView(context).apply {
-      text = "Welcome to Android Fragments with React Native."
-    })
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java title="CustomView.java"
-// replace with your package
-package com.mypackage;
-
-import android.content.Context;
-import android.graphics.Color;
-import android.widget.FrameLayout;
-import android.widget.ImageView;
-import android.widget.TextView;
-
-import androidx.annotation.NonNull;
-
-public class CustomView extends FrameLayout {
-  public CustomView(@NonNull Context context) {
-    super(context);
-    // set padding and background color
-    this.setPadding(16,16,16,16);
-    this.setBackgroundColor(Color.parseColor("#5FD3F3"));
-
-    // add default text view
-    TextView text = new TextView(context);
-    text.setText("Welcome to Android Fragments with React Native.");
-    this.addView(text);
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 2. Create a `Fragment`
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin title="MyFragment.kt"
-// replace with your package
-package com.mypackage
-
-import android.os.Bundle
-import android.view.LayoutInflater
-import android.view.View
-import android.view.ViewGroup
-import androidx.fragment.app.Fragment
-
-// replace with your view's import
-import com.mypackage.CustomView
-
-class MyFragment : Fragment() {
-  private lateinit var customView: CustomView
-
-  override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
-    super.onCreateView(inflater, container, savedInstanceState)
-    customView = CustomView(requireNotNull(context))
-    return customView // this CustomView could be any view that you want to render
-  }
-
-  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
-    super.onViewCreated(view, savedInstanceState)
-    // do any logic that should happen in an `onCreate` method, e.g:
-    // customView.onCreate(savedInstanceState);
-  }
-
-  override fun onPause() {
-    super.onPause()
-    // do any logic that should happen in an `onPause` method
-    // e.g.: customView.onPause();
-  }
-
-  override fun onResume() {
-    super.onResume()
-    // do any logic that should happen in an `onResume` method
-    // e.g.: customView.onResume();
-  }
-
-  override fun onDestroy() {
-    super.onDestroy()
-    // do any logic that should happen in an `onDestroy` method
-    // e.g.: customView.onDestroy();
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java title="MyFragment.java"
-// replace with your package
-package com.mypackage;
-
-import android.os.Bundle;
-import android.view.LayoutInflater;
-import android.view.View;
-import android.view.ViewGroup;
-import androidx.fragment.app.Fragment;
-
-// replace with your view's import
-import com.mypackage.CustomView;
-
-public class MyFragment extends Fragment {
-    CustomView customView;
-
-    @Override
-    public View onCreateView(LayoutInflater inflater, ViewGroup parent, Bundle savedInstanceState) {
-        super.onCreateView(inflater, parent, savedInstanceState);
-        customView = new CustomView(this.getContext());
-        return customView; // this CustomView could be any view that you want to render
-    }
-
-    @Override
-    public void onViewCreated(View view, Bundle savedInstanceState) {
-        super.onViewCreated(view, savedInstanceState);
-        // do any logic that should happen in an `onCreate` method, e.g:
-        // customView.onCreate(savedInstanceState);
-    }
-
-    @Override
-    public void onPause() {
-        super.onPause();
-        // do any logic that should happen in an `onPause` method
-        // e.g.: customView.onPause();
-    }
-
-    @Override
-    public void onResume() {
-        super.onResume();
-       // do any logic that should happen in an `onResume` method
-       // e.g.: customView.onResume();
-    }
-
-    @Override
-    public void onDestroy() {
-        super.onDestroy();
-        // do any logic that should happen in an `onDestroy` method
-        // e.g.: customView.onDestroy();
-    }
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 3. Create the `ViewManager` subclass
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin title="MyViewManager.kt"
-// replace with your package
-package com.mypackage
-
-import android.view.Choreographer
-import android.view.View
-import android.view.ViewGroup
-import android.widget.FrameLayout
-import androidx.fragment.app.FragmentActivity
-import com.facebook.react.bridge.ReactApplicationContext
-import com.facebook.react.bridge.ReadableArray
-import com.facebook.react.uimanager.ThemedReactContext
-import com.facebook.react.uimanager.ViewGroupManager
-import com.facebook.react.uimanager.annotations.ReactPropGroup
-
-class MyViewManager(
-    private val reactContext: ReactApplicationContext
-) : ViewGroupManager<FrameLayout>() {
-  private var propWidth: Int? = null
-  private var propHeight: Int? = null
-
-  override fun getName() = REACT_CLASS
-
-  /**
-   * Return a FrameLayout which will later hold the Fragment
-   */
-  override fun createViewInstance(reactContext: ThemedReactContext) =
-      FrameLayout(reactContext)
-
-  /**
-   * Map the "create" command to an integer
-   */
-  override fun getCommandsMap() = mapOf("create" to COMMAND_CREATE)
-
-  /**
-   * Handle "create" command (called from JS) and call createFragment method
-   */
-  override fun receiveCommand(
-      root: FrameLayout,
-      commandId: String,
-      args: ReadableArray?
-  ) {
-    super.receiveCommand(root, commandId, args)
-    val reactNativeViewId = requireNotNull(args).getInt(0)
-
-    when (commandId.toInt()) {
-      COMMAND_CREATE -> createFragment(root, reactNativeViewId)
-    }
-  }
-
-  @ReactPropGroup(names = ["width", "height"], customType = "Style")
-  fun setStyle(view: FrameLayout, index: Int, value: Int) {
-    if (index == 0) propWidth = value
-    if (index == 1) propHeight = value
-  }
-
-  /**
-   * Replace your React Native view with a custom fragment
-   */
-  fun createFragment(root: FrameLayout, reactNativeViewId: Int) {
-    val parentView = root.findViewById<ViewGroup>(reactNativeViewId)
-    setupLayout(parentView)
-
-    val myFragment = MyFragment()
-    val activity = reactContext.currentActivity as FragmentActivity
-    activity.supportFragmentManager
-        .beginTransaction()
-        .replace(reactNativeViewId, myFragment, reactNativeViewId.toString())
-        .commit()
-  }
-
-  fun setupLayout(view: View) {
-    Choreographer.getInstance().postFrameCallback(object: Choreographer.FrameCallback {
-      override fun doFrame(frameTimeNanos: Long) {
-        manuallyLayoutChildren(view)
-        view.viewTreeObserver.dispatchOnGlobalLayout()
-        Choreographer.getInstance().postFrameCallback(this)
-      }
-    })
-  }
-
-  /**
-   * Layout all children properly
-   */
-  private fun manuallyLayoutChildren(view: View) {
-    // propWidth and propHeight coming from react-native props
-    val width = requireNotNull(propWidth)
-    val height = requireNotNull(propHeight)
-
-    view.measure(
-        View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
-        View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY))
-
-    view.layout(0, 0, width, height)
-  }
-
-  companion object {
-    private const val REACT_CLASS = "MyViewManager"
-    private const val COMMAND_CREATE = 1
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java title="MyViewManager.java"
-// replace with your package
-package com.mypackage;
-
-import android.view.Choreographer;
-import android.view.View;
-import android.view.ViewGroup;
-import android.widget.FrameLayout;
-
-import androidx.annotation.NonNull;
-import androidx.annotation.Nullable;
-import androidx.fragment.app.FragmentActivity;
-
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.ReadableArray;
-import com.facebook.react.common.MapBuilder;
-import com.facebook.react.uimanager.annotations.ReactProp;
-import com.facebook.react.uimanager.annotations.ReactPropGroup;
-import com.facebook.react.uimanager.ViewGroupManager;
-import com.facebook.react.uimanager.ThemedReactContext;
-
-import java.util.Map;
-
-public class MyViewManager extends ViewGroupManager<FrameLayout> {
-
-  public static final String REACT_CLASS = "MyViewManager";
-  public final int COMMAND_CREATE = 1;
-  private int propWidth;
-  private int propHeight;
-
-  ReactApplicationContext reactContext;
-
-  public MyViewManager(ReactApplicationContext reactContext) {
-    this.reactContext = reactContext;
-  }
-
-  @Override
-  public String getName() {
-    return REACT_CLASS;
-  }
-
-  /**
-   * Return a FrameLayout which will later hold the Fragment
-   */
-  @Override
-  public FrameLayout createViewInstance(ThemedReactContext reactContext) {
-    return new FrameLayout(reactContext);
-  }
-
-  /**
-   * Map the "create" command to an integer
-   */
-  @Nullable
-  @Override
-  public Map<String, Integer> getCommandsMap() {
-    return MapBuilder.of("create", COMMAND_CREATE);
-  }
-
-  /**
-   * Handle "create" command (called from JS) and call createFragment method
-   */
-  @Override
-  public void receiveCommand(
-    @NonNull FrameLayout root,
-    String commandId,
-    @Nullable ReadableArray args
-  ) {
-    super.receiveCommand(root, commandId, args);
-    int reactNativeViewId = args.getInt(0);
-    int commandIdInt = Integer.parseInt(commandId);
-
-    switch (commandIdInt) {
-      case COMMAND_CREATE:
-        createFragment(root, reactNativeViewId);
-        break;
-      default: {}
-    }
-  }
-
-  @ReactPropGroup(names = {"width", "height"}, customType = "Style")
-  public void setStyle(FrameLayout view, int index, Integer value) {
-    if (index == 0) {
-      propWidth = value;
-    }
-
-    if (index == 1) {
-      propHeight = value;
-    }
-  }
-
-  /**
-   * Replace your React Native view with a custom fragment
-   */
-  public void createFragment(FrameLayout root, int reactNativeViewId) {
-    ViewGroup parentView = (ViewGroup) root.findViewById(reactNativeViewId);
-    setupLayout(parentView);
-
-    final MyFragment myFragment = new MyFragment();
-    FragmentActivity activity = (FragmentActivity) reactContext.getCurrentActivity();
-    activity.getSupportFragmentManager()
-            .beginTransaction()
-            .replace(reactNativeViewId, myFragment, String.valueOf(reactNativeViewId))
-            .commit();
-  }
-
-  public void setupLayout(View view) {
-    Choreographer.getInstance().postFrameCallback(new Choreographer.FrameCallback() {
-      @Override
-      public void doFrame(long frameTimeNanos) {
-        manuallyLayoutChildren(view);
-        view.getViewTreeObserver().dispatchOnGlobalLayout();
-        Choreographer.getInstance().postFrameCallback(this);
-      }
-    });
-  }
-
-  /**
-   * Layout all children properly
-   */
-  public void manuallyLayoutChildren(View view) {
-      // propWidth and propHeight coming from react-native props
-      int width = propWidth;
-      int height = propHeight;
-
-      view.measure(
-              View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
-              View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY));
-
-      view.layout(0, 0, width, height);
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 4. Register the `ViewManager`
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin title="MyPackage.kt"
-// replace with your package
-package com.mypackage
-
-import com.facebook.react.ReactPackage
-import com.facebook.react.bridge.ReactApplicationContext
-import com.facebook.react.uimanager.ViewManager
-
-class MyPackage : ReactPackage {
-  ...
-  override fun createViewManagers(
-      reactContext: ReactApplicationContext
-  ) = listOf(MyViewManager(reactContext))
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java title="MyPackage.java"
-// replace with your package
-package com.mypackage;
-
-import com.facebook.react.ReactPackage;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.uimanager.ViewManager;
-
-import java.util.Arrays;
-import java.util.List;
-
-public class MyPackage implements ReactPackage {
-
-   @Override
-   public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
-       return Arrays.<ViewManager>asList(
-            new MyViewManager(reactContext)
-       );
-   }
-
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 5. Register the `Package`
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin title="MainApplication.kt"
-override fun getPackages(): List<ReactPackage> =
-    PackageList(this).packages.apply {
-        // Packages that cannot be autolinked yet can be added manually here, for example:
-        // add(MyReactNativePackage())
-        add(MyAppPackage())
-    }
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java title="MainApplication.java"
-@Override
-protected List<ReactPackage> getPackages() {
-    List<ReactPackage> packages = new PackageList(this).getPackages();
-    // Packages that cannot be autolinked yet can be added manually here, for example:
-    // packages.add(new MyReactNativePackage());
-    packages.add(new MyAppPackage());
-    return packages;
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 6. Implement the JavaScript module
-
-I. Start with custom View manager:
-
-```tsx title="MyViewManager.tsx"
-import {requireNativeComponent} from 'react-native';
-
-export const MyViewManager =
-  requireNativeComponent('MyViewManager');
-```
-
-II. Then implement custom View calling the `create` method:
-
-```tsx title="MyView.tsx"
-import React, {useEffect, useRef} from 'react';
-import {
-  PixelRatio,
-  UIManager,
-  findNodeHandle,
-} from 'react-native';
-
-import {MyViewManager} from './my-view-manager';
-
-const createFragment = viewId =>
-  UIManager.dispatchViewManagerCommand(
-    viewId,
-    // we are calling the 'create' command
-    UIManager.MyViewManager.Commands.create.toString(),
-    [viewId],
-  );
-
-export const MyView = () => {
-  const ref = useRef(null);
-
-  useEffect(() => {
-    const viewId = findNodeHandle(ref.current);
-    createFragment(viewId);
-  }, []);
-
-  return (
-    <MyViewManager
-      style={{
-        // converts dpi to px, provide desired height
-        height: PixelRatio.getPixelSizeForLayoutSize(200),
-        // converts dpi to px, provide desired width
-        width: PixelRatio.getPixelSizeForLayoutSize(200),
-      }}
-      ref={ref}
-    />
-  );
-};
-```
-
-If you want to expose property setters using `@ReactProp` (or `@ReactPropGroup`) annotation see the [ImageView example](#imageview-example) above.
+---
+id: native-components-android
+title: Android Native UI Components
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+import NativeDeprecated from '../the-new-architecture/\_markdown_native_deprecation.mdx'
+
+<NativeDeprecated />
+
+There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application.
+
+Like the native module guide, this too is a more advanced guide that assumes you are somewhat familiar with Android SDK programming. This guide will show you how to build a native UI component, walking you through the implementation of a subset of the existing `ImageView` component available in the core React Native library.
+
+:::info
+You can also setup local library containing native component with one command. Read the guide to [Local libraries setup](local-library-setup) for more details.
+:::
+
+## ImageView example
+
+For this example we are going to walk through the implementation requirements to allow the use of ImageViews in JavaScript.
+
+Native views are created and manipulated by extending `ViewManager` or more commonly `SimpleViewManager` . A `SimpleViewManager` is convenient in this case because it applies common properties such as background color, opacity, and Flexbox layout.
+
+These subclasses are essentially singletons - only one instance of each is created by the bridge. They send native views to the `NativeViewHierarchyManager`, which delegates back to them to set and update the properties of the views as necessary. The `ViewManagers` are also typically the delegates for the views, sending events back to JavaScript via the bridge.
+
+To send a view:
+
+1. Create the ViewManager subclass.
+2. Implement the `createViewInstance` method
+3. Expose view property setters using `@ReactProp` (or `@ReactPropGroup`) annotation
+4. Register the manager in `createViewManagers` of the applications package.
+5. Implement the JavaScript module
+
+### 1. Create the `ViewManager` subclass
+
+In this example we create view manager class `ReactImageManager` that extends `SimpleViewManager` of type `ReactImageView`. `ReactImageView` is the type of object managed by the manager, this will be the custom native view. Name returned by `getName` is used to reference the native view type from JavaScript.
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+class ReactImageManager(
+    private val callerContext: ReactApplicationContext
+) : SimpleViewManager<ReactImageView>() {
+
+  override fun getName() = REACT_CLASS
+
+  companion object {
+    const val REACT_CLASS = "RCTImageView"
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+public class ReactImageManager extends SimpleViewManager<ReactImageView> {
+
+  public static final String REACT_CLASS = "RCTImageView";
+  ReactApplicationContext mCallerContext;
+
+  public ReactImageManager(ReactApplicationContext reactContext) {
+    mCallerContext = reactContext;
+  }
+
+  @Override
+  public String getName() {
+    return REACT_CLASS;
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 2. Implement method `createViewInstance`
+
+Views are created in the `createViewInstance` method, the view should initialize itself in its default state, any properties will be set via a follow up call to `updateView.`
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+  override fun createViewInstance(context: ThemedReactContext) =
+      ReactImageView(context, Fresco.newDraweeControllerBuilder(), null, callerContext)
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+  @Override
+  public ReactImageView createViewInstance(ThemedReactContext context) {
+    return new ReactImageView(context, Fresco.newDraweeControllerBuilder(), null, mCallerContext);
+  }
+```
+
+</TabItem>
+</Tabs>
+
+### 3. Expose view property setters using `@ReactProp` (or `@ReactPropGroup`) annotation
+
+Properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with `@ReactProp` (or `@ReactPropGroup`). Setter method should take view to be updated (of the current view type) as a first argument and property value as a second argument. Setter should be public and not return a value (i.e. return type should be `void` in Java or `Unit` in Kotlin). Property type sent to JS is determined automatically based on the type of value argument of the setter. The following type of values are currently supported (in Java): `boolean`, `int`, `float`, `double`, `String`, `Boolean`, `Integer`, `ReadableArray`, `ReadableMap`. The corresponding types in Kotlin are `Boolean`, `Int`, `Float`, `Double`, `String`, `ReadableArray`, `ReadableMap`.
+
+Annotation `@ReactProp` has one obligatory argument `name` of type `String`. Name assigned to the `@ReactProp` annotation linked to the setter method is used to reference the property on JS side.
+
+Except from `name`, `@ReactProp` annotation may take following optional arguments: `defaultBoolean`, `defaultInt`, `defaultFloat`. Those arguments should be of the corresponding type (accordingly `boolean`, `int`, `float` in Java and `Boolean`, `Int`, `Float` in Kotlin) and the value provided will be passed to the setter method in case when the property that the setter is referencing has been removed from the component. Note that "default" values are only provided for primitive types, in case when setter is of some complex type, `null` will be provided as a default value in case when corresponding property gets removed.
+
+Setter declaration requirements for methods annotated with `@ReactPropGroup` are different than for `@ReactProp`, please refer to the `@ReactPropGroup` annotation class docs for more information about it. **IMPORTANT!** in ReactJS updating the property value will result in setter method call. Note that one of the ways we can update component is by removing properties that have been set before. In that case setter method will be called as well to notify view manager that property has changed. In that case "default" value will be provided (for primitive types "default" value can be specified using `defaultBoolean`, `defaultFloat`, etc. arguments of `@ReactProp` annotation, for complex types setter will be called with value set to `null`).
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+  @ReactProp(name = "src")
+  fun setSrc(view: ReactImageView, sources: ReadableArray?) {
+    view.setSource(sources)
+  }
+
+  @ReactProp(name = "borderRadius", defaultFloat = 0f)
+  override fun setBorderRadius(view: ReactImageView, borderRadius: Float) {
+    view.setBorderRadius(borderRadius)
+  }
+
+  @ReactProp(name = ViewProps.RESIZE_MODE)
+  fun setResizeMode(view: ReactImageView, resizeMode: String?) {
+    view.setScaleType(ImageResizeMode.toScaleType(resizeMode))
+  }
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+  @ReactProp(name = "src")
+  public void setSrc(ReactImageView view, @Nullable ReadableArray sources) {
+    view.setSource(sources);
+  }
+
+  @ReactProp(name = "borderRadius", defaultFloat = 0f)
+  public void setBorderRadius(ReactImageView view, float borderRadius) {
+    view.setBorderRadius(borderRadius);
+  }
+
+  @ReactProp(name = ViewProps.RESIZE_MODE)
+  public void setResizeMode(ReactImageView view, @Nullable String resizeMode) {
+    view.setScaleType(ImageResizeMode.toScaleType(resizeMode));
+  }
+```
+
+</TabItem>
+</Tabs>
+
+### 4. Register the `ViewManager`
+
+The final step is to register the ViewManager to the application, this happens in a similar way to [Native Modules](native-modules-android.md), via the applications package member function `createViewManagers`.
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+  override fun createViewManagers(
+      reactContext: ReactApplicationContext
+  ) = listOf(ReactImageManager(reactContext))
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+  @Override
+  public List<ViewManager> createViewManagers(
+                            ReactApplicationContext reactContext) {
+    return Arrays.<ViewManager>asList(
+      new ReactImageManager(reactContext)
+    );
+  }
+```
+
+</TabItem>
+</Tabs>
+
+### 5. Implement the JavaScript module
+
+The very final step is to create the JavaScript module that defines the interface layer between Java/Kotlin and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using TypeScript, Flow, or plain old comments).
+
+```tsx title="ImageView.tsx"
+import {requireNativeComponent} from 'react-native';
+
+/**
+ * Composes `View`.
+ *
+ * - src: Array<{url: string}>
+ * - borderRadius: number
+ * - resizeMode: 'cover' | 'contain' | 'stretch'
+ */
+export default requireNativeComponent('RCTImageView');
+```
+
+The `requireNativeComponent` function takes the name of the native view. Note that if your component needs to do anything more sophisticated (e.g. custom event handling), you should wrap the native component in another React component. This is illustrated in the `MyCustomView` example below.
+
+## Events
+
+So now we know how to expose native view components that we can control freely from JS, but how do we deal with events from the user, like pinch-zooms or panning? When a native event occurs the native code should issue an event to the JavaScript representation of the View, and the two views are linked with the value returned from the `getId()` method.
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+class MyCustomView(context: Context) : View(context) {
+  ...
+  fun onReceiveNativeEvent() {
+    val event = Arguments.createMap().apply {
+      putString("message", "MyMessage")
+    }
+    val reactContext = context as ReactContext
+    reactContext
+        .getJSModule(RCTEventEmitter::class.java)
+        .receiveEvent(id, "topChange", event)
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+class MyCustomView extends View {
+   ...
+   public void onReceiveNativeEvent() {
+      WritableMap event = Arguments.createMap();
+      event.putString("message", "MyMessage");
+      ReactContext reactContext = (ReactContext)getContext();
+      reactContext
+          .getJSModule(RCTEventEmitter.class)
+          .receiveEvent(getId(), "topChange", event);
+    }
+}
+```
+
+</TabItem>
+</Tabs>
+
+To map the `topChange` event name to the `onChange` callback prop in JavaScript, register it by overriding the `getExportedCustomBubblingEventTypeConstants` method in your `ViewManager`:
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+class ReactImageManager : SimpleViewManager<MyCustomView>() {
+  ...
+  override fun getExportedCustomBubblingEventTypeConstants(): Map<String, Any> {
+    return mapOf(
+      "topChange" to mapOf(
+        "phasedRegistrationNames" to mapOf(
+          "bubbled" to "onChange"
+        )
+      )
+    )
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+public class ReactImageManager extends SimpleViewManager<MyCustomView> {
+    ...
+    public Map getExportedCustomBubblingEventTypeConstants() {
+        return MapBuilder.builder().put(
+            "topChange",
+            MapBuilder.of(
+                "phasedRegistrationNames",
+                MapBuilder.of("bubbled", "onChange")
+            )
+        ).build();
+    }
+}
+```
+
+</TabItem>
+</Tabs>
+
+This callback is invoked with the raw event, which we typically process in the wrapper component to make a simpler API:
+
+```tsx {8-11,13-17} title="MyCustomView.tsx"
+import {useCallback} from 'react';
+import {requireNativeComponent} from 'react-native';
+
+const RCTMyCustomView = requireNativeComponent('RCTMyCustomView');
+
+export default function MyCustomView(props: {
+  // ...
+  /**
+   * Callback that is called continuously when the user is dragging the map.
+   */
+  onChangeMessage: (message: string) => unknown;
+}) {
+  const onChange = useCallback(
+    event => {
+      props.onChangeMessage?.(event.nativeEvent.message);
+    },
+    [props.onChangeMessage],
+  );
+
+  return <RCTMyCustomView {...props} onChange={onChange} />;
+}
+```
+
+## Integration with an Android Fragment example
+
+In order to integrate existing Native UI elements to your React Native app, you might need to use Android Fragments to give you a more granular control over your native component than returning a `View` from your `ViewManager`. You will need this if you want to add custom logic that is tied to your view with the help of [lifecycle methods](https://developer.android.com/guide/fragments/lifecycle), such as `onViewCreated`, `onPause`, `onResume`. The following steps will show you how to do it:
+
+### 1. Create an example custom view
+
+First, let's create a `CustomView` class which extends `FrameLayout` (the content of this view can be any view that you'd like to render)
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin title="CustomView.kt"
+// replace with your package
+package com.mypackage
+
+import android.content.Context
+import android.graphics.Color
+import android.widget.FrameLayout
+import android.widget.TextView
+
+class CustomView(context: Context) : FrameLayout(context) {
+  init {
+    // set padding and background color
+    setPadding(16,16,16,16)
+    setBackgroundColor(Color.parseColor("#5FD3F3"))
+
+    // add default text view
+    addView(TextView(context).apply {
+      text = "Welcome to Android Fragments with React Native."
+    })
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java title="CustomView.java"
+// replace with your package
+package com.mypackage;
+
+import android.content.Context;
+import android.graphics.Color;
+import android.widget.FrameLayout;
+import android.widget.ImageView;
+import android.widget.TextView;
+
+import androidx.annotation.NonNull;
+
+public class CustomView extends FrameLayout {
+  public CustomView(@NonNull Context context) {
+    super(context);
+    // set padding and background color
+    this.setPadding(16,16,16,16);
+    this.setBackgroundColor(Color.parseColor("#5FD3F3"));
+
+    // add default text view
+    TextView text = new TextView(context);
+    text.setText("Welcome to Android Fragments with React Native.");
+    this.addView(text);
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 2. Create a `Fragment`
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin title="MyFragment.kt"
+// replace with your package
+package com.mypackage
+
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import androidx.fragment.app.Fragment
+
+// replace with your view's import
+import com.mypackage.CustomView
+
+class MyFragment : Fragment() {
+  private lateinit var customView: CustomView
+
+  override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
+    super.onCreateView(inflater, container, savedInstanceState)
+    customView = CustomView(requireNotNull(context))
+    return customView // this CustomView could be any view that you want to render
+  }
+
+  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+    super.onViewCreated(view, savedInstanceState)
+    // do any logic that should happen in an `onCreate` method, e.g:
+    // customView.onCreate(savedInstanceState);
+  }
+
+  override fun onPause() {
+    super.onPause()
+    // do any logic that should happen in an `onPause` method
+    // e.g.: customView.onPause();
+  }
+
+  override fun onResume() {
+    super.onResume()
+    // do any logic that should happen in an `onResume` method
+    // e.g.: customView.onResume();
+  }
+
+  override fun onDestroy() {
+    super.onDestroy()
+    // do any logic that should happen in an `onDestroy` method
+    // e.g.: customView.onDestroy();
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java title="MyFragment.java"
+// replace with your package
+package com.mypackage;
+
+import android.os.Bundle;
+import android.view.LayoutInflater;
+import android.view.View;
+import android.view.ViewGroup;
+import androidx.fragment.app.Fragment;
+
+// replace with your view's import
+import com.mypackage.CustomView;
+
+public class MyFragment extends Fragment {
+    CustomView customView;
+
+    @Override
+    public View onCreateView(LayoutInflater inflater, ViewGroup parent, Bundle savedInstanceState) {
+        super.onCreateView(inflater, parent, savedInstanceState);
+        customView = new CustomView(this.getContext());
+        return customView; // this CustomView could be any view that you want to render
+    }
+
+    @Override
+    public void onViewCreated(View view, Bundle savedInstanceState) {
+        super.onViewCreated(view, savedInstanceState);
+        // do any logic that should happen in an `onCreate` method, e.g:
+        // customView.onCreate(savedInstanceState);
+    }
+
+    @Override
+    public void onPause() {
+        super.onPause();
+        // do any logic that should happen in an `onPause` method
+        // e.g.: customView.onPause();
+    }
+
+    @Override
+    public void onResume() {
+        super.onResume();
+       // do any logic that should happen in an `onResume` method
+       // e.g.: customView.onResume();
+    }
+
+    @Override
+    public void onDestroy() {
+        super.onDestroy();
+        // do any logic that should happen in an `onDestroy` method
+        // e.g.: customView.onDestroy();
+    }
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 3. Create the `ViewManager` subclass
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin title="MyViewManager.kt"
+// replace with your package
+package com.mypackage
+
+import android.view.Choreographer
+import android.view.View
+import android.view.ViewGroup
+import android.widget.FrameLayout
+import androidx.fragment.app.FragmentActivity
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.annotations.ReactPropGroup
+
+class MyViewManager(
+    private val reactContext: ReactApplicationContext
+) : ViewGroupManager<FrameLayout>() {
+  private var propWidth: Int? = null
+  private var propHeight: Int? = null
+
+  override fun getName() = REACT_CLASS
+
+  /**
+   * Return a FrameLayout which will later hold the Fragment
+   */
+  override fun createViewInstance(reactContext: ThemedReactContext) =
+      FrameLayout(reactContext)
+
+  /**
+   * Map the "create" command to an integer
+   */
+  override fun getCommandsMap() = mapOf("create" to COMMAND_CREATE)
+
+  /**
+   * Handle "create" command (called from JS) and call createFragment method
+   */
+  override fun receiveCommand(
+      root: FrameLayout,
+      commandId: String,
+      args: ReadableArray?
+  ) {
+    super.receiveCommand(root, commandId, args)
+    val reactNativeViewId = requireNotNull(args).getInt(0)
+
+    when (commandId.toInt()) {
+      COMMAND_CREATE -> createFragment(root, reactNativeViewId)
+    }
+  }
+
+  @ReactPropGroup(names = ["width", "height"], customType = "Style")
+  fun setStyle(view: FrameLayout, index: Int, value: Int) {
+    if (index == 0) propWidth = value
+    if (index == 1) propHeight = value
+  }
+
+  /**
+   * Replace your React Native view with a custom fragment
+   */
+  fun createFragment(root: FrameLayout, reactNativeViewId: Int) {
+    val parentView = root.findViewById<ViewGroup>(reactNativeViewId)
+    setupLayout(parentView)
+
+    val myFragment = MyFragment()
+    val activity = reactContext.currentActivity as FragmentActivity
+    activity.supportFragmentManager
+        .beginTransaction()
+        .replace(reactNativeViewId, myFragment, reactNativeViewId.toString())
+        .commit()
+  }
+
+  fun setupLayout(view: View) {
+    Choreographer.getInstance().postFrameCallback(object: Choreographer.FrameCallback {
+      override fun doFrame(frameTimeNanos: Long) {
+        manuallyLayoutChildren(view)
+        view.viewTreeObserver.dispatchOnGlobalLayout()
+        Choreographer.getInstance().postFrameCallback(this)
+      }
+    })
+  }
+
+  /**
+   * Layout all children properly
+   */
+  private fun manuallyLayoutChildren(view: View) {
+    // propWidth and propHeight coming from react-native props
+    val width = requireNotNull(propWidth)
+    val height = requireNotNull(propHeight)
+
+    view.measure(
+        View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
+        View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY))
+
+    view.layout(0, 0, width, height)
+  }
+
+  companion object {
+    private const val REACT_CLASS = "MyViewManager"
+    private const val COMMAND_CREATE = 1
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java title="MyViewManager.java"
+// replace with your package
+package com.mypackage;
+
+import android.view.Choreographer;
+import android.view.View;
+import android.view.ViewGroup;
+import android.widget.FrameLayout;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+import androidx.fragment.app.FragmentActivity;
+
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReadableArray;
+import com.facebook.react.common.MapBuilder;
+import com.facebook.react.uimanager.annotations.ReactProp;
+import com.facebook.react.uimanager.annotations.ReactPropGroup;
+import com.facebook.react.uimanager.ViewGroupManager;
+import com.facebook.react.uimanager.ThemedReactContext;
+
+import java.util.Map;
+
+public class MyViewManager extends ViewGroupManager<FrameLayout> {
+
+  public static final String REACT_CLASS = "MyViewManager";
+  public final int COMMAND_CREATE = 1;
+  private int propWidth;
+  private int propHeight;
+
+  ReactApplicationContext reactContext;
+
+  public MyViewManager(ReactApplicationContext reactContext) {
+    this.reactContext = reactContext;
+  }
+
+  @Override
+  public String getName() {
+    return REACT_CLASS;
+  }
+
+  /**
+   * Return a FrameLayout which will later hold the Fragment
+   */
+  @Override
+  public FrameLayout createViewInstance(ThemedReactContext reactContext) {
+    return new FrameLayout(reactContext);
+  }
+
+  /**
+   * Map the "create" command to an integer
+   */
+  @Nullable
+  @Override
+  public Map<String, Integer> getCommandsMap() {
+    return MapBuilder.of("create", COMMAND_CREATE);
+  }
+
+  /**
+   * Handle "create" command (called from JS) and call createFragment method
+   */
+  @Override
+  public void receiveCommand(
+    @NonNull FrameLayout root,
+    String commandId,
+    @Nullable ReadableArray args
+  ) {
+    super.receiveCommand(root, commandId, args);
+    int reactNativeViewId = args.getInt(0);
+    int commandIdInt = Integer.parseInt(commandId);
+
+    switch (commandIdInt) {
+      case COMMAND_CREATE:
+        createFragment(root, reactNativeViewId);
+        break;
+      default: {}
+    }
+  }
+
+  @ReactPropGroup(names = {"width", "height"}, customType = "Style")
+  public void setStyle(FrameLayout view, int index, Integer value) {
+    if (index == 0) {
+      propWidth = value;
+    }
+
+    if (index == 1) {
+      propHeight = value;
+    }
+  }
+
+  /**
+   * Replace your React Native view with a custom fragment
+   */
+  public void createFragment(FrameLayout root, int reactNativeViewId) {
+    ViewGroup parentView = (ViewGroup) root.findViewById(reactNativeViewId);
+    setupLayout(parentView);
+
+    final MyFragment myFragment = new MyFragment();
+    FragmentActivity activity = (FragmentActivity) reactContext.getCurrentActivity();
+    activity.getSupportFragmentManager()
+            .beginTransaction()
+            .replace(reactNativeViewId, myFragment, String.valueOf(reactNativeViewId))
+            .commit();
+  }
+
+  public void setupLayout(View view) {
+    Choreographer.getInstance().postFrameCallback(new Choreographer.FrameCallback() {
+      @Override
+      public void doFrame(long frameTimeNanos) {
+        manuallyLayoutChildren(view);
+        view.getViewTreeObserver().dispatchOnGlobalLayout();
+        Choreographer.getInstance().postFrameCallback(this);
+      }
+    });
+  }
+
+  /**
+   * Layout all children properly
+   */
+  public void manuallyLayoutChildren(View view) {
+      // propWidth and propHeight coming from react-native props
+      int width = propWidth;
+      int height = propHeight;
+
+      view.measure(
+              View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
+              View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY));
+
+      view.layout(0, 0, width, height);
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 4. Register the `ViewManager`
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin title="MyPackage.kt"
+// replace with your package
+package com.mypackage
+
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+
+class MyPackage : ReactPackage {
+  ...
+  override fun createViewManagers(
+      reactContext: ReactApplicationContext
+  ) = listOf(MyViewManager(reactContext))
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java title="MyPackage.java"
+// replace with your package
+package com.mypackage;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.Arrays;
+import java.util.List;
+
+public class MyPackage implements ReactPackage {
+
+   @Override
+   public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
+       return Arrays.<ViewManager>asList(
+            new MyViewManager(reactContext)
+       );
+   }
+
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 5. Register the `Package`
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin title="MainApplication.kt"
+override fun getPackages(): List<ReactPackage> =
+    PackageList(this).packages.apply {
+        // Packages that cannot be autolinked yet can be added manually here, for example:
+        // add(MyReactNativePackage())
+        add(MyAppPackage())
+    }
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java title="MainApplication.java"
+@Override
+protected List<ReactPackage> getPackages() {
+    List<ReactPackage> packages = new PackageList(this).getPackages();
+    // Packages that cannot be autolinked yet can be added manually here, for example:
+    // packages.add(new MyReactNativePackage());
+    packages.add(new MyAppPackage());
+    return packages;
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 6. Implement the JavaScript module
+
+I. Start with custom View manager:
+
+```tsx title="MyViewManager.tsx"
+import {requireNativeComponent} from 'react-native';
+
+export const MyViewManager =
+  requireNativeComponent('MyViewManager');
+```
+
+II. Then implement custom View calling the `create` method:
+
+```tsx title="MyView.tsx"
+import {useEffect, useRef} from 'react';
+import {
+  PixelRatio,
+  UIManager,
+  findNodeHandle,
+} from 'react-native';
+
+import {MyViewManager} from './my-view-manager';
+
+const createFragment = viewId =>
+  UIManager.dispatchViewManagerCommand(
+    viewId,
+    // we are calling the 'create' command
+    UIManager.MyViewManager.Commands.create.toString(),
+    [viewId],
+  );
+
+export const MyView = () => {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const viewId = findNodeHandle(ref.current);
+    createFragment(viewId);
+  }, []);
+
+  return (
+    <MyViewManager
+      style={{
+        // converts dpi to px, provide desired height
+        height: PixelRatio.getPixelSizeForLayoutSize(200),
+        // converts dpi to px, provide desired width
+        width: PixelRatio.getPixelSizeForLayoutSize(200),
+      }}
+      ref={ref}
+    />
+  );
+};
+```
+
+If you want to expose property setters using `@ReactProp` (or `@ReactPropGroup`) annotation see the [ImageView example](#imageview-example) above.
diff --git a/website/versioned_docs/version-0.85/legacy/native-modules-android.md b/website/versioned_docs/version-0.85/legacy/native-modules-android.md
index 82fe222f628..cec5857a441 100644
--- a/website/versioned_docs/version-0.85/legacy/native-modules-android.md
+++ b/website/versioned_docs/version-0.85/legacy/native-modules-android.md
@@ -315,7 +315,6 @@ At this point, you have set up the basic scaffolding for your native module in A
 Find a place in your application where you would like to add a call to the native module’s `createCalendarEvent()` method. Below is an example of a component, `NewModuleButton` you can add in your app. You can invoke the native module inside `NewModuleButton`'s `onPress()` function.
 
 ```tsx
-import React from 'react';
 import {NativeModules, Button} from 'react-native';
 
 const NewModuleButton = () => {
diff --git a/website/versioned_docs/version-0.85/legacy/native-modules-ios.md b/website/versioned_docs/version-0.85/legacy/native-modules-ios.md
index 6c33c64ec75..d3239e16a90 100644
--- a/website/versioned_docs/version-0.85/legacy/native-modules-ios.md
+++ b/website/versioned_docs/version-0.85/legacy/native-modules-ios.md
@@ -141,7 +141,6 @@ At this point you have set up the basic scaffolding for your native module in iO
 Find a place in your application where you would like to add a call to the native module’s `createCalendarEvent()` method. Below is an example of a component, `NewModuleButton` you can add in your app. You can invoke the native module inside `NewModuleButton`'s `onPress()` function.
 
 ```tsx
-import React from 'react';
 import {Button} from 'react-native';
 
 const NewModuleButton = () => {
diff --git a/website/versioned_docs/version-0.85/linking.md b/website/versioned_docs/version-0.85/linking.md
index ff9c1e1121e..18875244905 100644
--- a/website/versioned_docs/version-0.85/linking.md
+++ b/website/versioned_docs/version-0.85/linking.md
@@ -1,688 +1,688 @@
----
-id: linking
-title: Linking
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-`Linking` gives you a general interface to interact with both incoming and outgoing app links.
-
-Every Link (URL) has a URL Scheme, some websites are prefixed with `https://` or `http://` and the `http` is the URL Scheme. Let's call it scheme for short.
-
-In addition to `https`, you're likely also familiar with the `mailto` scheme. When you open a link with the mailto scheme, your operating system will open an installed mail application. Similarly, there are schemes for making phone calls and sending SMS. Read more about [built-in URL](#built-in-url-schemes) schemes below.
-
-Like using the mailto scheme, it's possible to link to other applications by using custom url schemes. For example, when you get a **Magic Link** email from Slack, the **Launch Slack** button is an anchor tag with an href that looks something like: `slack://secret/magic-login/other-secret`. Like with Slack, you can tell the operating system that you want to handle a custom scheme. When the Slack app opens, it receives the URL that was used to open it. This is often referred to as deep linking. Read more about how to [get the deep link](#get-the-deep-link) into your app.
-
-A custom URL scheme isn't the only way to open your application on mobile. For example, if you want to email someone a link to be opened on mobile, using a custom URL scheme isn't ideal because the user might open the email on a desktop, where the link wouldn't work. Instead, you should use standard `https` links, such as `https://www.myapp.io/records/1234546`. On mobile, these links can be configured to open your app. On Android, this feature is called **Deep Links**, while on iOS, it is known as **Universal Links**.
-
-### Built-in URL Schemes
-
-As mentioned in the introduction, there are some URL schemes for core functionality that exist on every platform. The following is a non-exhaustive list, but covers the most commonly used schemes.
-
-| Scheme           | Description                                | iOS | Android |
-| ---------------- | ------------------------------------------ | --- | ------- |
-| `mailto`         | Open mail app, eg: mailto: hello@world.dev | ✅  | ✅      |
-| `tel`            | Open phone app, eg: tel:+123456789         | ✅  | ✅      |
-| `sms`            | Open SMS app, eg: sms:+123456789           | ✅  | ✅      |
-| `https` / `http` | Open web browser app, eg: https://expo.dev | ✅  | ✅      |
-
-### Enabling Deep Links
-
-<div className="banner-native-code-required">
-  <h3>Projects with Native Code Only</h3>
-  <p>The following section only applies to projects with native code exposed. If you are using the managed Expo workflow, see the guide on <a href="https://docs.expo.dev/guides/linking/">Linking</a> in the Expo documentation for the appropriate alternative.</p>
-</div>
-
-If you want to enable deep links in your app, please read the below guide:
-
-<Tabs groupId="syntax" queryString defaultValue={constants.defaultPlatform} values={constants.platforms}>
-<TabItem value="android">
-
-:::info
-For instructions on how to add support for deep linking on Android, refer to [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](https://developer.android.com/training/app-indexing/deep-linking.html#adding-filters).
-:::
-
-If you wish to receive the intent in an existing instance of MainActivity, you may set the `launchMode` of MainActivity to `singleTask` in `AndroidManifest.xml`. See [`<activity>`](https://developer.android.com/guide/topics/manifest/activity-element.html) documentation for more information.
-
-```xml
-<activity
-  android:name=".MainActivity"
-  android:launchMode="singleTask">
-```
-
-</TabItem>
-<TabItem value="ios">
-
-:::note
-On iOS, you'll need to add the `LinkingIOS` folder into your header search paths as described in step 3 [here](linking-libraries-ios#step-3). If you also want to listen to incoming app links during your app's execution, you'll need to add the following lines to your `*AppDelegate.m`:
-
-<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
-<TabItem value="objc">
-
-```objc title="AppDelegate.mm"
-// iOS 9.x or newer
-#import <React/RCTLinkingManager.h>
-
-- (BOOL)application:(UIApplication *)application
-   openURL:(NSURL *)url
-   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
-{
-  return [RCTLinkingManager application:application openURL:url options:options];
-}
-```
-
-If your app is using [Universal Links](https://developer.apple.com/ios/universal-links/), you'll need to add the following code as well:
-
-```objc title="AppDelegate.mm"
-- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
- restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
-{
- return [RCTLinkingManager application:application
-                  continueUserActivity:userActivity
-                    restorationHandler:restorationHandler];
-}
-```
-
-</TabItem>
-<TabItem value="swift">
-
-```swift title="AppDelegate.swift"
-func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
-  return RCTLinkingManager.application(app, open: url, options: options)
-}
-```
-
-If your app is using [Universal Links](https://developer.apple.com/ios/universal-links/), you'll need to add the following code as well:
-
-```swift title="AppDelegate.swift"
-func application(
-  _ application: UIApplication,
-  continue userActivity: NSUserActivity,
-  restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
-    return RCTLinkingManager.application(
-      application,
-      continue: userActivity,
-      restorationHandler: restorationHandler
-    )
-  }
-```
-
-</TabItem>
-</Tabs>
-
-:::
-
-</TabItem>
-</Tabs>
-
-### Handling Deep Links
-
-There are two ways to handle URLs that open your app.
-
-#### 1. If the app is already open, the app is foregrounded and a Linking 'url' event is fired
-
-You can handle these events with `Linking.addEventListener('url', callback)` - it calls `callback({url})` with the linked URL
-
-#### 2. If the app is not already open, it is opened and the url is passed in as the initialURL
-
-You can handle these events with `Linking.getInitialURL()` - it returns a Promise that resolves to the URL, if there is one.
-
----
-
-## Example
-
-### Open Links and Deep Links (Universal Links)
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useCallback} from 'react';
-import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
-
-const supportedURL = 'https://google.com';
-
-const unsupportedURL = 'slack://open?team=123456';
-
-const OpenURLButton = ({url, children}) => {
-  const handlePress = useCallback(async () => {
-    // Checking if the link is supported for links with custom URL scheme.
-    const supported = await Linking.canOpenURL(url);
-
-    if (supported) {
-      // Opening the link with some app, if the URL scheme is "http" the web link should be opened
-      // by some browser in the mobile
-      await Linking.openURL(url);
-    } else {
-      Alert.alert(`Don't know how to open this URL: ${url}`);
-    }
-  }, [url]);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <OpenURLButton url={supportedURL}>Open Supported URL</OpenURLButton>
-      <OpenURLButton url={unsupportedURL}>Open Unsupported URL</OpenURLButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useCallback} from 'react';
-import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
-
-const supportedURL = 'https://google.com';
-
-const unsupportedURL = 'slack://open?team=123456';
-
-type OpenURLButtonProps = {
-  url: string;
-  children: string;
-};
-
-const OpenURLButton = ({url, children}: OpenURLButtonProps) => {
-  const handlePress = useCallback(async () => {
-    // Checking if the link is supported for links with custom URL scheme.
-    const supported = await Linking.canOpenURL(url);
-
-    if (supported) {
-      // Opening the link with some app, if the URL scheme is "http" the web link should be opened
-      // by some browser in the mobile
-      await Linking.openURL(url);
-    } else {
-      Alert.alert(`Don't know how to open this URL: ${url}`);
-    }
-  }, [url]);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <OpenURLButton url={supportedURL}>Open Supported URL</OpenURLButton>
-      <OpenURLButton url={unsupportedURL}>Open Unsupported URL</OpenURLButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### Open Custom Settings
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useCallback} from 'react';
-import {Button, Linking, StyleSheet, View} from 'react-native';
-
-const OpenSettingsButton = ({children}) => {
-  const handlePress = useCallback(async () => {
-    // Open the custom settings if the app has one
-    await Linking.openSettings();
-  }, []);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <OpenSettingsButton>Open Settings</OpenSettingsButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useCallback} from 'react';
-import {Button, Linking, StyleSheet, View} from 'react-native';
-
-type OpenSettingsButtonProps = {
-  children: string;
-};
-
-const OpenSettingsButton = ({children}: OpenSettingsButtonProps) => {
-  const handlePress = useCallback(async () => {
-    // Open the custom settings if the app has one
-    await Linking.openSettings();
-  }, []);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <OpenSettingsButton>Open Settings</OpenSettingsButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### Get the Deep Link
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useState, useEffect} from 'react';
-import {Linking, StyleSheet, Text, View} from 'react-native';
-
-const useInitialURL = () => {
-  const [url, setUrl] = useState(null);
-  const [processing, setProcessing] = useState(true);
-
-  useEffect(() => {
-    const getUrlAsync = async () => {
-      // Get the deep link used to open the app
-      const initialUrl = await Linking.getInitialURL();
-
-      // The setTimeout is just for testing purpose
-      setTimeout(() => {
-        setUrl(initialUrl);
-        setProcessing(false);
-      }, 1000);
-    };
-
-    getUrlAsync();
-  }, []);
-
-  return {url, processing};
-};
-
-const App = () => {
-  const {url: initialUrl, processing} = useInitialURL();
-
-  return (
-    <View style={styles.container}>
-      <Text>
-        {processing
-          ? 'Processing the initial url from a deep link'
-          : `The deep link is: ${initialUrl || 'None'}`}
-      </Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useState, useEffect} from 'react';
-import {Linking, StyleSheet, Text, View} from 'react-native';
-
-const useInitialURL = () => {
-  const [url, setUrl] = useState<string | null>(null);
-  const [processing, setProcessing] = useState(true);
-
-  useEffect(() => {
-    const getUrlAsync = async () => {
-      // Get the deep link used to open the app
-      const initialUrl = await Linking.getInitialURL();
-
-      // The setTimeout is just for testing purpose
-      setTimeout(() => {
-        setUrl(initialUrl);
-        setProcessing(false);
-      }, 1000);
-    };
-
-    getUrlAsync();
-  }, []);
-
-  return {url, processing};
-};
-
-const App = () => {
-  const {url: initialUrl, processing} = useInitialURL();
-
-  return (
-    <View style={styles.container}>
-      <Text>
-        {processing
-          ? 'Processing the initial url from a deep link'
-          : `The deep link is: ${initialUrl || 'None'}`}
-      </Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### Send Intents (Android)
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=android&ext=js
-import React, {useCallback} from 'react';
-import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
-
-const SendIntentButton = ({action, extras, children}) => {
-  const handlePress = useCallback(async () => {
-    try {
-      await Linking.sendIntent(action, extras);
-    } catch (e) {
-      Alert.alert(e.message);
-    }
-  }, [action, extras]);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <SendIntentButton action="android.intent.action.POWER_USAGE_SUMMARY">
-        Power Usage Summary
-      </SendIntentButton>
-      <SendIntentButton
-        action="android.settings.APP_NOTIFICATION_SETTINGS"
-        extras={[
-          {
-            key: 'android.provider.extra.APP_PACKAGE',
-            value: 'com.facebook.katana',
-          },
-        ]}>
-        App Notification Settings
-      </SendIntentButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Linking%20Example&ext=tsx
-import React, {useCallback} from 'react';
-import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
-
-type SendIntentButtonProps = {
-  action: string;
-  children: string;
-  extras?: Array<{
-    key: string;
-    value: string | number | boolean;
-  }>;
-};
-
-const SendIntentButton = ({
-  action,
-  extras,
-  children,
-}: SendIntentButtonProps) => {
-  const handlePress = useCallback(async () => {
-    try {
-      await Linking.sendIntent(action, extras);
-    } catch (e: any) {
-      Alert.alert(e.message);
-    }
-  }, [action, extras]);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <SendIntentButton action="android.intent.action.POWER_USAGE_SUMMARY">
-        Power Usage Summary
-      </SendIntentButton>
-      <SendIntentButton
-        action="android.settings.APP_NOTIFICATION_SETTINGS"
-        extras={[
-          {
-            key: 'android.provider.extra.APP_PACKAGE',
-            value: 'com.facebook.katana',
-          },
-        ]}>
-        App Notification Settings
-      </SendIntentButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-# Reference
-
-## Methods
-
-### `addEventListener()`
-
-```tsx
-static addEventListener(
-  type: 'url',
-  handler: (event: {url: string}) => void,
-): EmitterSubscription;
-```
-
-Add a handler to Linking changes by listening to the `url` event type and providing the handler.
-
----
-
-### `canOpenURL()`
-
-```tsx
-static canOpenURL(url: string): Promise<boolean>;
-```
-
-Determine whether or not an installed app can handle a given URL.
-
-The method returns a `Promise` object. When it is determined whether or not the given URL can be handled, the promise is resolved and the first parameter is whether or not it can be opened.
-
-The `Promise` will reject on Android if it was impossible to check if the URL can be opened or when targeting Android 11 (SDK 30) if you didn't specify the relevant intent queries in `AndroidManifest.xml`. Similarly on iOS, the promise will reject if you didn't add the specific scheme in the `LSApplicationQueriesSchemes` key inside `Info.plist` (see bellow).
-
-**Parameters:**
-
-| Name                                                     | Type   | Description      |
-| -------------------------------------------------------- | ------ | ---------------- |
-| url <div className="label basic required">Required</div> | string | The URL to open. |
-
-:::note
-For web URLs, the protocol (`"http://"`, `"https://"`) must be set accordingly!
-:::
-
-:::warning
-This method has limitations on iOS 9+. From [the official Apple documentation](https://developer.apple.com/documentation/uikit/uiapplication/1622952-canopenurl):
-
-- If your app is linked against an earlier version of iOS but is running in iOS 9.0 or later, you can call this method up to 50 times. After reaching that limit, subsequent calls always resolve to `false`. If the user reinstalls or upgrades the app, iOS resets the limit.
-- As of iOS 9, your app also needs to provide the `LSApplicationQueriesSchemes` key inside `Info.plist` or `canOpenURL()` will always resolve to `false`.
-  :::
-
-:::info
-When targeting Android 11 (SDK 30) you must specify the intents for the schemes you want to handle in `AndroidManifest.xml`. A list of common intents can be found [here](https://developer.android.com/guide/components/intents-common).
-
-For example to handle `https` schemes the following needs to be added to your manifest:
-
-```
-<manifest ...>
-  <queries>
-    <intent>
-      <action android:name="android.intent.action.VIEW" />
-      <data android:scheme="https"/>
-    </intent>
-  </queries>
-</manifest>
-```
-
-:::
-
----
-
-### `getInitialURL()`
-
-```tsx
-static getInitialURL(): Promise<string | null>;
-```
-
-If the app launch was triggered by an app link, it will give the link url, otherwise it will give `null`.
-
-:::info
-To support deep linking on Android, refer https://developer.android.com/training/app-indexing/deep-linking.html#handling-intents.
-:::
-
-:::tip
-`getInitialURL` may return `null` when Remote JS Debugging is active. Disable the debugger to ensure it gets passed.
-:::
-
----
-
-### `openSettings()`
-
-```tsx
-static openSettings(): Promise<void>;
-```
-
-Open the Settings app and displays the app’s custom settings, if it has any.
-
----
-
-### `openURL()`
-
-```tsx
-static openURL(url: string): Promise<any>;
-```
-
-Try to open the given `url` with any of the installed apps.
-
-You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386" on Android or "https://maps.apple.com/?ll=37.484847,-122.148386" on iOS), a contact, or any other URL that can be opened with the installed apps.
-
-The method returns a `Promise` object. If the user confirms the open dialog or the url automatically opens, the promise is resolved. If the user cancels the open dialog or there are no registered applications for the url, the promise is rejected.
-
-**Parameters:**
-
-| Name                                                     | Type   | Description      |
-| -------------------------------------------------------- | ------ | ---------------- |
-| url <div className="label basic required">Required</div> | string | The URL to open. |
-
-:::note
-This method will fail if the system doesn't know how to open the specified URL. If you're passing in a non-http(s) URL, it's best to check `canOpenURL()` first. For web URLs, the protocol (`"http://"`, `"https://"`) must be set accordingly!
-:::
-
-:::warning
-This method may behave differently in a simulator e.g. `"tel:"` links are not able to be handled in the iOS simulator as there's no access to the dialer app.
-:::
-
----
-
-### `sendIntent()` <div className="label android">Android</div>
-
-```tsx
-static sendIntent(
-  action: string,
-  extras?: Array<{key: string; value: string | number | boolean}>,
-): Promise<void>;
-```
-
-Launch an Android intent with extras.
-
-**Parameters:**
-
-| Name                                                        | Type                                                       |
-| ----------------------------------------------------------- | ---------------------------------------------------------- |
-| action <div className="label basic required">Required</div> | string                                                     |
-| extras                                                      | `Array<{key: string, value: string ｜ number ｜ boolean}>` |
+---
+id: linking
+title: Linking
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+`Linking` gives you a general interface to interact with both incoming and outgoing app links.
+
+Every Link (URL) has a URL Scheme, some websites are prefixed with `https://` or `http://` and the `http` is the URL Scheme. Let's call it scheme for short.
+
+In addition to `https`, you're likely also familiar with the `mailto` scheme. When you open a link with the mailto scheme, your operating system will open an installed mail application. Similarly, there are schemes for making phone calls and sending SMS. Read more about [built-in URL](#built-in-url-schemes) schemes below.
+
+Like using the mailto scheme, it's possible to link to other applications by using custom url schemes. For example, when you get a **Magic Link** email from Slack, the **Launch Slack** button is an anchor tag with an href that looks something like: `slack://secret/magic-login/other-secret`. Like with Slack, you can tell the operating system that you want to handle a custom scheme. When the Slack app opens, it receives the URL that was used to open it. This is often referred to as deep linking. Read more about how to [get the deep link](#get-the-deep-link) into your app.
+
+A custom URL scheme isn't the only way to open your application on mobile. For example, if you want to email someone a link to be opened on mobile, using a custom URL scheme isn't ideal because the user might open the email on a desktop, where the link wouldn't work. Instead, you should use standard `https` links, such as `https://www.myapp.io/records/1234546`. On mobile, these links can be configured to open your app. On Android, this feature is called **Deep Links**, while on iOS, it is known as **Universal Links**.
+
+### Built-in URL Schemes
+
+As mentioned in the introduction, there are some URL schemes for core functionality that exist on every platform. The following is a non-exhaustive list, but covers the most commonly used schemes.
+
+| Scheme           | Description                                | iOS | Android |
+| ---------------- | ------------------------------------------ | --- | ------- |
+| `mailto`         | Open mail app, eg: mailto: hello@world.dev | ✅  | ✅      |
+| `tel`            | Open phone app, eg: tel:+123456789         | ✅  | ✅      |
+| `sms`            | Open SMS app, eg: sms:+123456789           | ✅  | ✅      |
+| `https` / `http` | Open web browser app, eg: https://expo.dev | ✅  | ✅      |
+
+### Enabling Deep Links
+
+<div className="banner-native-code-required">
+  <h3>Projects with Native Code Only</h3>
+  <p>The following section only applies to projects with native code exposed. If you are using the managed Expo workflow, see the guide on <a href="https://docs.expo.dev/guides/linking/">Linking</a> in the Expo documentation for the appropriate alternative.</p>
+</div>
+
+If you want to enable deep links in your app, please read the below guide:
+
+<Tabs groupId="syntax" queryString defaultValue={constants.defaultPlatform} values={constants.platforms}>
+<TabItem value="android">
+
+:::info
+For instructions on how to add support for deep linking on Android, refer to [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](https://developer.android.com/training/app-indexing/deep-linking.html#adding-filters).
+:::
+
+If you wish to receive the intent in an existing instance of MainActivity, you may set the `launchMode` of MainActivity to `singleTask` in `AndroidManifest.xml`. See [`<activity>`](https://developer.android.com/guide/topics/manifest/activity-element.html) documentation for more information.
+
+```xml
+<activity
+  android:name=".MainActivity"
+  android:launchMode="singleTask">
+```
+
+</TabItem>
+<TabItem value="ios">
+
+:::note
+On iOS, you'll need to add the `LinkingIOS` folder into your header search paths as described in step 3 [here](linking-libraries-ios#step-3). If you also want to listen to incoming app links during your app's execution, you'll need to add the following lines to your `*AppDelegate.m`:
+
+<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
+<TabItem value="objc">
+
+```objc title="AppDelegate.mm"
+// iOS 9.x or newer
+#import <React/RCTLinkingManager.h>
+
+- (BOOL)application:(UIApplication *)application
+   openURL:(NSURL *)url
+   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
+{
+  return [RCTLinkingManager application:application openURL:url options:options];
+}
+```
+
+If your app is using [Universal Links](https://developer.apple.com/ios/universal-links/), you'll need to add the following code as well:
+
+```objc title="AppDelegate.mm"
+- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
+ restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
+{
+ return [RCTLinkingManager application:application
+                  continueUserActivity:userActivity
+                    restorationHandler:restorationHandler];
+}
+```
+
+</TabItem>
+<TabItem value="swift">
+
+```swift title="AppDelegate.swift"
+func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
+  return RCTLinkingManager.application(app, open: url, options: options)
+}
+```
+
+If your app is using [Universal Links](https://developer.apple.com/ios/universal-links/), you'll need to add the following code as well:
+
+```swift title="AppDelegate.swift"
+func application(
+  _ application: UIApplication,
+  continue userActivity: NSUserActivity,
+  restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
+    return RCTLinkingManager.application(
+      application,
+      continue: userActivity,
+      restorationHandler: restorationHandler
+    )
+  }
+```
+
+</TabItem>
+</Tabs>
+
+:::
+
+</TabItem>
+</Tabs>
+
+### Handling Deep Links
+
+There are two ways to handle URLs that open your app.
+
+#### 1. If the app is already open, the app is foregrounded and a Linking 'url' event is fired
+
+You can handle these events with `Linking.addEventListener('url', callback)` - it calls `callback({url})` with the linked URL
+
+#### 2. If the app is not already open, it is opened and the url is passed in as the initialURL
+
+You can handle these events with `Linking.getInitialURL()` - it returns a Promise that resolves to the URL, if there is one.
+
+---
+
+## Example
+
+### Open Links and Deep Links (Universal Links)
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
+import {useCallback} from 'react';
+import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
+
+const supportedURL = 'https://google.com';
+
+const unsupportedURL = 'slack://open?team=123456';
+
+const OpenURLButton = ({url, children}) => {
+  const handlePress = useCallback(async () => {
+    // Checking if the link is supported for links with custom URL scheme.
+    const supported = await Linking.canOpenURL(url);
+
+    if (supported) {
+      // Opening the link with some app, if the URL scheme is "http" the web link should be opened
+      // by some browser in the mobile
+      await Linking.openURL(url);
+    } else {
+      Alert.alert(`Don't know how to open this URL: ${url}`);
+    }
+  }, [url]);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <OpenURLButton url={supportedURL}>Open Supported URL</OpenURLButton>
+      <OpenURLButton url={unsupportedURL}>Open Unsupported URL</OpenURLButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
+import {useCallback} from 'react';
+import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
+
+const supportedURL = 'https://google.com';
+
+const unsupportedURL = 'slack://open?team=123456';
+
+type OpenURLButtonProps = {
+  url: string;
+  children: string;
+};
+
+const OpenURLButton = ({url, children}: OpenURLButtonProps) => {
+  const handlePress = useCallback(async () => {
+    // Checking if the link is supported for links with custom URL scheme.
+    const supported = await Linking.canOpenURL(url);
+
+    if (supported) {
+      // Opening the link with some app, if the URL scheme is "http" the web link should be opened
+      // by some browser in the mobile
+      await Linking.openURL(url);
+    } else {
+      Alert.alert(`Don't know how to open this URL: ${url}`);
+    }
+  }, [url]);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <OpenURLButton url={supportedURL}>Open Supported URL</OpenURLButton>
+      <OpenURLButton url={unsupportedURL}>Open Unsupported URL</OpenURLButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### Open Custom Settings
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
+import {useCallback} from 'react';
+import {Button, Linking, StyleSheet, View} from 'react-native';
+
+const OpenSettingsButton = ({children}) => {
+  const handlePress = useCallback(async () => {
+    // Open the custom settings if the app has one
+    await Linking.openSettings();
+  }, []);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <OpenSettingsButton>Open Settings</OpenSettingsButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
+import {useCallback} from 'react';
+import {Button, Linking, StyleSheet, View} from 'react-native';
+
+type OpenSettingsButtonProps = {
+  children: string;
+};
+
+const OpenSettingsButton = ({children}: OpenSettingsButtonProps) => {
+  const handlePress = useCallback(async () => {
+    // Open the custom settings if the app has one
+    await Linking.openSettings();
+  }, []);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <OpenSettingsButton>Open Settings</OpenSettingsButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### Get the Deep Link
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
+import {useState, useEffect} from 'react';
+import {Linking, StyleSheet, Text, View} from 'react-native';
+
+const useInitialURL = () => {
+  const [url, setUrl] = useState(null);
+  const [processing, setProcessing] = useState(true);
+
+  useEffect(() => {
+    const getUrlAsync = async () => {
+      // Get the deep link used to open the app
+      const initialUrl = await Linking.getInitialURL();
+
+      // The setTimeout is just for testing purpose
+      setTimeout(() => {
+        setUrl(initialUrl);
+        setProcessing(false);
+      }, 1000);
+    };
+
+    getUrlAsync();
+  }, []);
+
+  return {url, processing};
+};
+
+const App = () => {
+  const {url: initialUrl, processing} = useInitialURL();
+
+  return (
+    <View style={styles.container}>
+      <Text>
+        {processing
+          ? 'Processing the initial url from a deep link'
+          : `The deep link is: ${initialUrl || 'None'}`}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
+import {useState, useEffect} from 'react';
+import {Linking, StyleSheet, Text, View} from 'react-native';
+
+const useInitialURL = () => {
+  const [url, setUrl] = useState<string | null>(null);
+  const [processing, setProcessing] = useState(true);
+
+  useEffect(() => {
+    const getUrlAsync = async () => {
+      // Get the deep link used to open the app
+      const initialUrl = await Linking.getInitialURL();
+
+      // The setTimeout is just for testing purpose
+      setTimeout(() => {
+        setUrl(initialUrl);
+        setProcessing(false);
+      }, 1000);
+    };
+
+    getUrlAsync();
+  }, []);
+
+  return {url, processing};
+};
+
+const App = () => {
+  const {url: initialUrl, processing} = useInitialURL();
+
+  return (
+    <View style={styles.container}>
+      <Text>
+        {processing
+          ? 'Processing the initial url from a deep link'
+          : `The deep link is: ${initialUrl || 'None'}`}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### Send Intents (Android)
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=android&ext=js
+import {useCallback} from 'react';
+import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
+
+const SendIntentButton = ({action, extras, children}) => {
+  const handlePress = useCallback(async () => {
+    try {
+      await Linking.sendIntent(action, extras);
+    } catch (e) {
+      Alert.alert(e.message);
+    }
+  }, [action, extras]);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <SendIntentButton action="android.intent.action.POWER_USAGE_SUMMARY">
+        Power Usage Summary
+      </SendIntentButton>
+      <SendIntentButton
+        action="android.settings.APP_NOTIFICATION_SETTINGS"
+        extras={[
+          {
+            key: 'android.provider.extra.APP_PACKAGE',
+            value: 'com.facebook.katana',
+          },
+        ]}>
+        App Notification Settings
+      </SendIntentButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Linking%20Example&ext=tsx
+import {useCallback} from 'react';
+import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
+
+type SendIntentButtonProps = {
+  action: string;
+  children: string;
+  extras?: Array<{
+    key: string;
+    value: string | number | boolean;
+  }>;
+};
+
+const SendIntentButton = ({
+  action,
+  extras,
+  children,
+}: SendIntentButtonProps) => {
+  const handlePress = useCallback(async () => {
+    try {
+      await Linking.sendIntent(action, extras);
+    } catch (e: any) {
+      Alert.alert(e.message);
+    }
+  }, [action, extras]);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <SendIntentButton action="android.intent.action.POWER_USAGE_SUMMARY">
+        Power Usage Summary
+      </SendIntentButton>
+      <SendIntentButton
+        action="android.settings.APP_NOTIFICATION_SETTINGS"
+        extras={[
+          {
+            key: 'android.provider.extra.APP_PACKAGE',
+            value: 'com.facebook.katana',
+          },
+        ]}>
+        App Notification Settings
+      </SendIntentButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+# Reference
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+  type: 'url',
+  handler: (event: {url: string}) => void,
+): EmitterSubscription;
+```
+
+Add a handler to Linking changes by listening to the `url` event type and providing the handler.
+
+---
+
+### `canOpenURL()`
+
+```tsx
+static canOpenURL(url: string): Promise<boolean>;
+```
+
+Determine whether or not an installed app can handle a given URL.
+
+The method returns a `Promise` object. When it is determined whether or not the given URL can be handled, the promise is resolved and the first parameter is whether or not it can be opened.
+
+The `Promise` will reject on Android if it was impossible to check if the URL can be opened or when targeting Android 11 (SDK 30) if you didn't specify the relevant intent queries in `AndroidManifest.xml`. Similarly on iOS, the promise will reject if you didn't add the specific scheme in the `LSApplicationQueriesSchemes` key inside `Info.plist` (see bellow).
+
+**Parameters:**
+
+| Name                                                     | Type   | Description      |
+| -------------------------------------------------------- | ------ | ---------------- |
+| url <div className="label basic required">Required</div> | string | The URL to open. |
+
+:::note
+For web URLs, the protocol (`"http://"`, `"https://"`) must be set accordingly!
+:::
+
+:::warning
+This method has limitations on iOS 9+. From [the official Apple documentation](https://developer.apple.com/documentation/uikit/uiapplication/1622952-canopenurl):
+
+- If your app is linked against an earlier version of iOS but is running in iOS 9.0 or later, you can call this method up to 50 times. After reaching that limit, subsequent calls always resolve to `false`. If the user reinstalls or upgrades the app, iOS resets the limit.
+- As of iOS 9, your app also needs to provide the `LSApplicationQueriesSchemes` key inside `Info.plist` or `canOpenURL()` will always resolve to `false`.
+  :::
+
+:::info
+When targeting Android 11 (SDK 30) you must specify the intents for the schemes you want to handle in `AndroidManifest.xml`. A list of common intents can be found [here](https://developer.android.com/guide/components/intents-common).
+
+For example to handle `https` schemes the following needs to be added to your manifest:
+
+```
+<manifest ...>
+  <queries>
+    <intent>
+      <action android:name="android.intent.action.VIEW" />
+      <data android:scheme="https"/>
+    </intent>
+  </queries>
+</manifest>
+```
+
+:::
+
+---
+
+### `getInitialURL()`
+
+```tsx
+static getInitialURL(): Promise<string | null>;
+```
+
+If the app launch was triggered by an app link, it will give the link url, otherwise it will give `null`.
+
+:::info
+To support deep linking on Android, refer https://developer.android.com/training/app-indexing/deep-linking.html#handling-intents.
+:::
+
+:::tip
+`getInitialURL` may return `null` when Remote JS Debugging is active. Disable the debugger to ensure it gets passed.
+:::
+
+---
+
+### `openSettings()`
+
+```tsx
+static openSettings(): Promise<void>;
+```
+
+Open the Settings app and displays the app’s custom settings, if it has any.
+
+---
+
+### `openURL()`
+
+```tsx
+static openURL(url: string): Promise<any>;
+```
+
+Try to open the given `url` with any of the installed apps.
+
+You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386" on Android or "https://maps.apple.com/?ll=37.484847,-122.148386" on iOS), a contact, or any other URL that can be opened with the installed apps.
+
+The method returns a `Promise` object. If the user confirms the open dialog or the url automatically opens, the promise is resolved. If the user cancels the open dialog or there are no registered applications for the url, the promise is rejected.
+
+**Parameters:**
+
+| Name                                                     | Type   | Description      |
+| -------------------------------------------------------- | ------ | ---------------- |
+| url <div className="label basic required">Required</div> | string | The URL to open. |
+
+:::note
+This method will fail if the system doesn't know how to open the specified URL. If you're passing in a non-http(s) URL, it's best to check `canOpenURL()` first. For web URLs, the protocol (`"http://"`, `"https://"`) must be set accordingly!
+:::
+
+:::warning
+This method may behave differently in a simulator e.g. `"tel:"` links are not able to be handled in the iOS simulator as there's no access to the dialer app.
+:::
+
+---
+
+### `sendIntent()` <div className="label android">Android</div>
+
+```tsx
+static sendIntent(
+  action: string,
+  extras?: Array<{key: string; value: string | number | boolean}>,
+): Promise<void>;
+```
+
+Launch an Android intent with extras.
+
+**Parameters:**
+
+| Name                                                        | Type                                                       |
+| ----------------------------------------------------------- | ---------------------------------------------------------- |
+| action <div className="label basic required">Required</div> | string                                                     |
+| extras                                                      | `Array<{key: string, value: string ｜ number ｜ boolean}>` |
diff --git a/website/versioned_docs/version-0.85/modal.md b/website/versioned_docs/version-0.85/modal.md
index c929724719d..b58cd38d915 100644
--- a/website/versioned_docs/version-0.85/modal.md
+++ b/website/versioned_docs/version-0.85/modal.md
@@ -1,276 +1,276 @@
----
-id: modal
-title: Modal
----
-
-The Modal component is a basic way to present content above an enclosing view.
-
-## Example
-
-```SnackPlayer name=Modal&supportedPlatforms=android,ios
-import React, {useState} from 'react';
-import {Alert, Modal, StyleSheet, Text, Pressable, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [modalVisible, setModalVisible] = useState(false);
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.centeredView}>
-        <Modal
-          animationType="slide"
-          transparent={true}
-          visible={modalVisible}
-          onRequestClose={() => {
-            Alert.alert('Modal has been closed.');
-            setModalVisible(!modalVisible);
-          }}>
-          <View style={styles.centeredView}>
-            <View style={styles.modalView}>
-              <Text style={styles.modalText}>Hello World!</Text>
-              <Pressable
-                style={[styles.button, styles.buttonClose]}
-                onPress={() => setModalVisible(!modalVisible)}>
-                <Text style={styles.textStyle}>Hide Modal</Text>
-              </Pressable>
-            </View>
-          </View>
-        </Modal>
-        <Pressable
-          style={[styles.button, styles.buttonOpen]}
-          onPress={() => setModalVisible(true)}>
-          <Text style={styles.textStyle}>Show Modal</Text>
-        </Pressable>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  centeredView: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  modalView: {
-    margin: 20,
-    backgroundColor: 'white',
-    borderRadius: 20,
-    padding: 35,
-    alignItems: 'center',
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 4,
-    elevation: 5,
-  },
-  button: {
-    borderRadius: 20,
-    padding: 10,
-    elevation: 2,
-  },
-  buttonOpen: {
-    backgroundColor: '#F194FF',
-  },
-  buttonClose: {
-    backgroundColor: '#2196F3',
-  },
-  textStyle: {
-    color: 'white',
-    fontWeight: 'bold',
-    textAlign: 'center',
-  },
-  modalText: {
-    marginBottom: 15,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Props
-
-### [View Props](view.md#props)
-
-Inherits [View Props](view.md#props).
-
----
-
-### 🗑️ `animated`
-
-:::warning[Deprecated]
-Use the [`animationType`](modal.md#animationtype) prop instead.
-:::
-
----
-
-### `animationType`
-
-The `animationType` prop controls how the modal animates.
-
-Possible values:
-
-- `slide` slides in from the bottom
-- `fade` fades into view
-- `none` appears without an animation
-
-| Type                                | Default |
-| ----------------------------------- | ------- |
-| enum(`'none'`, `'slide'`, `'fade'`) | `none`  |
-
----
-
-### `backdropColor`
-
-The `backdropColor` of the modal (or background color of the modal's container.) Defaults to `white` if not provided and transparent is `false`. Ignored if `transparent` is `true`.
-
-| Type            | Default |
-| --------------- | ------- |
-| [color](colors) | white   |
-
----
-
-### `hardwareAccelerated` <div className="label android">Android</div>
-
-The `hardwareAccelerated` prop controls whether to force hardware acceleration for the underlying window.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `navigationBarTranslucent` <div className="label android">Android</div>
-
-The `navigationBarTranslucent` prop determines whether your modal should go under the system navigation bar. However, `statusBarTranslucent` also needs to be set to `true` to make navigation bar translucent.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `onDismiss` <div className="label ios">iOS</div>
-
-The `onDismiss` prop allows passing a function that will be called once the modal has been dismissed.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onOrientationChange` <div className="label ios">iOS</div>
-
-The `onOrientationChange` callback is called when the orientation changes while the modal is being displayed. The orientation provided is only 'portrait' or 'landscape'. This callback is also called on initial render, regardless of the current orientation.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `allowSwipeDismissal` <div className="label ios">iOS</div>
-
-Controls whether the modal can be dismissed by swiping down on iOS.
-This requires you to implement the `onRequestClose` prop to handle the dismissal.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `ref`
-
-A ref setter that will be assigned an [element node](element-nodes) when mounted.
-
----
-
-### `onRequestClose`
-
-The `onRequestClose` callback is called when the user taps the hardware back button on Android or the menu button on Apple TV. Because of this required prop, be aware that `BackHandler` events will not be emitted as long as the modal is open.
-On iOS, this callback is called when a Modal is being dismissed using a drag gesture when `presentationStyle` is `pageSheet` or `formSheet`. When `allowSwipeDismissal` is enabled this callback will be called after dismissing the modal.
-
-| Type                                                                                                                                                                                           |
-| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| function <div className="label basic required">Required</div><div className="label android">Android</div><div className="label tv">TV</div><hr />function <div className="label ios">iOS</div> |
-
----
-
-### `onShow`
-
-The `onShow` prop allows passing a function that will be called once the modal has been shown.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `presentationStyle` <div className="label ios">iOS</div>
-
-The `presentationStyle` prop controls how the modal appears (generally on larger devices such as iPad or plus-sized iPhones). See https://developer.apple.com/reference/uikit/uimodalpresentationstyle for details.
-
-Possible values:
-
-- `fullScreen` covers the screen completely
-- `pageSheet` covers portrait-width view centered (only on larger devices)
-- `formSheet` covers narrow-width view centered (only on larger devices)
-- `overFullScreen` covers the screen completely, but allows transparency
-
-| Type                                                                   | Default                                                                             |
-| ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
-| enum(`'fullScreen'`, `'pageSheet'`, `'formSheet'`, `'overFullScreen'`) | `fullScreen` if `transparent={false}`<hr />`overFullScreen` if `transparent={true}` |
-
----
-
-### `statusBarTranslucent` <div className="label android">Android</div>
-
-The `statusBarTranslucent` prop determines whether your modal should go under the system statusbar.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `supportedOrientations` <div className="label ios">iOS</div>
-
-The `supportedOrientations` prop allows the modal to be rotated to any of the specified orientations. On iOS, the modal is still restricted by what's specified in your app's Info.plist's UISupportedInterfaceOrientations field.
-
-:::note
-When using `presentationStyle` of `pageSheet` or `formSheet`, this property will be ignored on iOS.
-:::
-
-| Type                                                                                                           | Default        |
-| -------------------------------------------------------------------------------------------------------------- | -------------- |
-| array of enums(`'portrait'`, `'portrait-upside-down'`, `'landscape'`, `'landscape-left'`, `'landscape-right'`) | `['portrait']` |
-
----
-
-### `transparent`
-
-The `transparent` prop determines whether your modal will fill the entire view. Setting this to `true` will render the modal over a transparent background.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `visible`
-
-The `visible` prop determines whether your modal is visible.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `true`  |
+---
+id: modal
+title: Modal
+---
+
+The Modal component is a basic way to present content above an enclosing view.
+
+## Example
+
+```SnackPlayer name=Modal&supportedPlatforms=android,ios
+import {useState} from 'react';
+import {Alert, Modal, StyleSheet, Text, Pressable, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [modalVisible, setModalVisible] = useState(false);
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.centeredView}>
+        <Modal
+          animationType="slide"
+          transparent={true}
+          visible={modalVisible}
+          onRequestClose={() => {
+            Alert.alert('Modal has been closed.');
+            setModalVisible(!modalVisible);
+          }}>
+          <View style={styles.centeredView}>
+            <View style={styles.modalView}>
+              <Text style={styles.modalText}>Hello World!</Text>
+              <Pressable
+                style={[styles.button, styles.buttonClose]}
+                onPress={() => setModalVisible(!modalVisible)}>
+                <Text style={styles.textStyle}>Hide Modal</Text>
+              </Pressable>
+            </View>
+          </View>
+        </Modal>
+        <Pressable
+          style={[styles.button, styles.buttonOpen]}
+          onPress={() => setModalVisible(true)}>
+          <Text style={styles.textStyle}>Show Modal</Text>
+        </Pressable>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  centeredView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalView: {
+    margin: 20,
+    backgroundColor: 'white',
+    borderRadius: 20,
+    padding: 35,
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  button: {
+    borderRadius: 20,
+    padding: 10,
+    elevation: 2,
+  },
+  buttonOpen: {
+    backgroundColor: '#F194FF',
+  },
+  buttonClose: {
+    backgroundColor: '#2196F3',
+  },
+  textStyle: {
+    color: 'white',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  modalText: {
+    marginBottom: 15,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Props
+
+### [View Props](view.md#props)
+
+Inherits [View Props](view.md#props).
+
+---
+
+### 🗑️ `animated`
+
+:::warning[Deprecated]
+Use the [`animationType`](modal.md#animationtype) prop instead.
+:::
+
+---
+
+### `animationType`
+
+The `animationType` prop controls how the modal animates.
+
+Possible values:
+
+- `slide` slides in from the bottom
+- `fade` fades into view
+- `none` appears without an animation
+
+| Type                                | Default |
+| ----------------------------------- | ------- |
+| enum(`'none'`, `'slide'`, `'fade'`) | `none`  |
+
+---
+
+### `backdropColor`
+
+The `backdropColor` of the modal (or background color of the modal's container.) Defaults to `white` if not provided and transparent is `false`. Ignored if `transparent` is `true`.
+
+| Type            | Default |
+| --------------- | ------- |
+| [color](colors) | white   |
+
+---
+
+### `hardwareAccelerated` <div className="label android">Android</div>
+
+The `hardwareAccelerated` prop controls whether to force hardware acceleration for the underlying window.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `navigationBarTranslucent` <div className="label android">Android</div>
+
+The `navigationBarTranslucent` prop determines whether your modal should go under the system navigation bar. However, `statusBarTranslucent` also needs to be set to `true` to make navigation bar translucent.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `onDismiss` <div className="label ios">iOS</div>
+
+The `onDismiss` prop allows passing a function that will be called once the modal has been dismissed.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onOrientationChange` <div className="label ios">iOS</div>
+
+The `onOrientationChange` callback is called when the orientation changes while the modal is being displayed. The orientation provided is only 'portrait' or 'landscape'. This callback is also called on initial render, regardless of the current orientation.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `allowSwipeDismissal` <div className="label ios">iOS</div>
+
+Controls whether the modal can be dismissed by swiping down on iOS.
+This requires you to implement the `onRequestClose` prop to handle the dismissal.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `ref`
+
+A ref setter that will be assigned an [element node](element-nodes) when mounted.
+
+---
+
+### `onRequestClose`
+
+The `onRequestClose` callback is called when the user taps the hardware back button on Android or the menu button on Apple TV. Because of this required prop, be aware that `BackHandler` events will not be emitted as long as the modal is open.
+On iOS, this callback is called when a Modal is being dismissed using a drag gesture when `presentationStyle` is `pageSheet` or `formSheet`. When `allowSwipeDismissal` is enabled this callback will be called after dismissing the modal.
+
+| Type                                                                                                                                                                                           |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| function <div className="label basic required">Required</div><div className="label android">Android</div><div className="label tv">TV</div><hr />function <div className="label ios">iOS</div> |
+
+---
+
+### `onShow`
+
+The `onShow` prop allows passing a function that will be called once the modal has been shown.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `presentationStyle` <div className="label ios">iOS</div>
+
+The `presentationStyle` prop controls how the modal appears (generally on larger devices such as iPad or plus-sized iPhones). See https://developer.apple.com/reference/uikit/uimodalpresentationstyle for details.
+
+Possible values:
+
+- `fullScreen` covers the screen completely
+- `pageSheet` covers portrait-width view centered (only on larger devices)
+- `formSheet` covers narrow-width view centered (only on larger devices)
+- `overFullScreen` covers the screen completely, but allows transparency
+
+| Type                                                                   | Default                                                                             |
+| ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
+| enum(`'fullScreen'`, `'pageSheet'`, `'formSheet'`, `'overFullScreen'`) | `fullScreen` if `transparent={false}`<hr />`overFullScreen` if `transparent={true}` |
+
+---
+
+### `statusBarTranslucent` <div className="label android">Android</div>
+
+The `statusBarTranslucent` prop determines whether your modal should go under the system statusbar.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `supportedOrientations` <div className="label ios">iOS</div>
+
+The `supportedOrientations` prop allows the modal to be rotated to any of the specified orientations. On iOS, the modal is still restricted by what's specified in your app's Info.plist's UISupportedInterfaceOrientations field.
+
+:::note
+When using `presentationStyle` of `pageSheet` or `formSheet`, this property will be ignored on iOS.
+:::
+
+| Type                                                                                                           | Default        |
+| -------------------------------------------------------------------------------------------------------------- | -------------- |
+| array of enums(`'portrait'`, `'portrait-upside-down'`, `'landscape'`, `'landscape-left'`, `'landscape-right'`) | `['portrait']` |
+
+---
+
+### `transparent`
+
+The `transparent` prop determines whether your modal will fill the entire view. Setting this to `true` will render the modal over a transparent background.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `visible`
+
+The `visible` prop determines whether your modal is visible.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `true`  |
diff --git a/website/versioned_docs/version-0.85/navigation.md b/website/versioned_docs/version-0.85/navigation.md
index 363b48b1261..4d9586bf801 100644
--- a/website/versioned_docs/version-0.85/navigation.md
+++ b/website/versioned_docs/version-0.85/navigation.md
@@ -64,7 +64,6 @@ Now you are ready to build and run your app on the device/simulator.
 Now you can create an app with a home screen and a profile screen:
 
 ```tsx
-import * as React from 'react';
 import {createStaticNavigation} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 
diff --git a/website/versioned_docs/version-0.85/network.md b/website/versioned_docs/version-0.85/network.md
index 0c4dedcfa40..a11a1197d26 100644
--- a/website/versioned_docs/version-0.85/network.md
+++ b/website/versioned_docs/version-0.85/network.md
@@ -1,286 +1,286 @@
----
-id: network
-title: Networking
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may need to fetch a chunk of static content from another server.
-
-## Using Fetch
-
-React Native provides the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) for your networking needs. Fetch will seem familiar if you have used `XMLHttpRequest` or other networking APIs before. You may refer to MDN's guide on [Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) for additional information.
-
-### Making requests
-
-In order to fetch content from an arbitrary URL, you can pass the URL to fetch:
-
-```ts
-fetch('https://mywebsite.com/mydata.json');
-```
-
-Fetch also takes an optional second argument that allows you to customize the HTTP request. You may want to specify additional headers, or make a POST request:
-
-```ts
-fetch('https://mywebsite.com/endpoint/', {
-  method: 'POST',
-  headers: {
-    Accept: 'application/json',
-    'Content-Type': 'application/json',
-  },
-  body: JSON.stringify({
-    firstParam: 'yourValue',
-    secondParam: 'yourOtherValue',
-  }),
-});
-```
-
-Take a look at the [Fetch Request docs](https://developer.mozilla.org/en-US/docs/Web/API/Request) for a full list of properties.
-
-### Handling the response
-
-The above examples show how you can make a request. In many cases, you will want to do something with the response.
-
-Networking is an inherently asynchronous operation. Fetch method will return a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that makes it straightforward to write code that works in an asynchronous manner:
-
-```ts
-const getMoviesFromApi = () => {
-  return fetch('https://reactnative.dev/movies.json')
-    .then(response => response.json())
-    .then(json => {
-      return json.movies;
-    })
-    .catch(error => {
-      console.error(error);
-    });
-};
-```
-
-You can also use the `async` / `await` syntax in a React Native app:
-
-```ts
-const getMoviesFromApiAsync = async () => {
-  try {
-    const response = await fetch(
-      'https://reactnative.dev/movies.json',
-    );
-    const json = await response.json();
-    return json.movies;
-  } catch (error) {
-    console.error(error);
-  }
-};
-```
-
-Don't forget to catch any errors that may be thrown by `fetch`, otherwise they will be dropped silently.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Fetch%20Example&ext=js
-import React, {useEffect, useState} from 'react';
-import {ActivityIndicator, FlatList, Text, View} from 'react-native';
-
-const App = () => {
-  const [isLoading, setLoading] = useState(true);
-  const [data, setData] = useState([]);
-
-  const getMovies = async () => {
-    try {
-      const response = await fetch('https://reactnative.dev/movies.json');
-      const json = await response.json();
-      setData(json.movies);
-    } catch (error) {
-      console.error(error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    getMovies();
-  }, []);
-
-  return (
-    <View style={{flex: 1, padding: 24}}>
-      {isLoading ? (
-        <ActivityIndicator />
-      ) : (
-        <FlatList
-          data={data}
-          keyExtractor={({id}) => id}
-          renderItem={({item}) => (
-            <Text>
-              {item.title}, {item.releaseYear}
-            </Text>
-          )}
-        />
-      )}
-    </View>
-  );
-};
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Fetch%20Example&ext=tsx
-import React, {useEffect, useState} from 'react';
-import {ActivityIndicator, FlatList, Text, View} from 'react-native';
-
-type Movie = {
-  id: string;
-  title: string;
-  releaseYear: string;
-};
-
-type MoviesResponse = {
-  title: string;
-  description: string;
-  movies: Movie[];
-};
-
-const App = () => {
-  const [isLoading, setLoading] = useState(true);
-  const [data, setData] = useState<Movie[]>([]);
-
-  const getMovies = async () => {
-    try {
-      const response = await fetch('https://reactnative.dev/movies.json');
-      const json = (await response.json()) as MoviesResponse;
-      setData(json.movies);
-    } catch (error) {
-      console.error(error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    getMovies();
-  }, []);
-
-  return (
-    <View style={{flex: 1, padding: 24}}>
-      {isLoading ? (
-        <ActivityIndicator />
-      ) : (
-        <FlatList
-          data={data}
-          keyExtractor={({id}) => id}
-          renderItem={({item}) => (
-            <Text>
-              {item.title}, {item.releaseYear}
-            </Text>
-          )}
-        />
-      )}
-    </View>
-  );
-};
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-:::info
-By default, iOS 9.0 or later enforce App Transport Security (ATS). ATS requires any HTTP connection to use HTTPS. If you need to fetch from a cleartext URL (one that begins with `http`) you will first need to [add an ATS exception](integration-with-existing-apps.md#test-your-integration). If you know ahead of time what domains you will need access to, it is more secure to add exceptions only for those domains; if the domains are not known until runtime you can [disable ATS completely](publishing-to-app-store.md#1-enable-app-transport-security). Note however that from January 2017, [Apple's App Store review will require reasonable justification for disabling ATS](https://forums.developer.apple.com/thread/48979). See [Apple's documentation](https://developer.apple.com/library/ios/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html#//apple_ref/doc/uid/TP40009251-SW33) for more information.
-:::
-
-:::tip
-On Android, as of API Level 28, clear text traffic is also blocked by default. This behaviour can be overridden by setting [`android:usesCleartextTraffic`](https://developer.android.com/guide/topics/manifest/application-element#usesCleartextTraffic) in the app manifest file.
-:::
-
-## Using Other Networking Libraries
-
-The [XMLHttpRequest API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) is built into React Native. This means that you can use third party libraries such as [frisbee](https://github.com/niftylettuce/frisbee) or [axios](https://github.com/axios/axios) that depend on it, or you can use the XMLHttpRequest API directly if you prefer.
-
-```ts
-const request = new XMLHttpRequest();
-request.onreadystatechange = e => {
-  if (request.readyState !== 4) {
-    return;
-  }
-
-  if (request.status === 200) {
-    console.log('success', request.responseText);
-  } else {
-    console.warn('error');
-  }
-};
-
-request.open('GET', 'https://mywebsite.com/endpoint/');
-request.send();
-```
-
-:::warning[Caution]
-The security model for XMLHttpRequest is different than on web as there is no concept of [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) in native apps.
-:::
-
-## WebSocket Support
-
-React Native also supports [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket), a protocol which provides full-duplex communication channels over a single TCP connection.
-
-```ts
-const ws = new WebSocket('ws://host.com/path');
-
-ws.onopen = () => {
-  // connection opened
-  ws.send('something'); // send a message
-};
-
-ws.onmessage = e => {
-  // a message was received
-  console.log(e.data);
-};
-
-ws.onerror = e => {
-  // an error occurred
-  console.log(e.message);
-};
-
-ws.onclose = e => {
-  // connection closed
-  console.log(e.code, e.reason);
-};
-```
-
-## Known Issues with `fetch` and cookie based authentication
-
-The following options are currently not working with `fetch`
-
-- `redirect:manual`
-- `credentials:omit`
-
-* Having same name headers on Android will result in only the latest one being present. A temporary solution can be found here: https://github.com/facebook/react-native/issues/18837#issuecomment-398779994.
-* Cookie based authentication is currently unstable. You can view some of the issues raised here: https://github.com/facebook/react-native/issues/23185
-* As a minimum on iOS, when redirected through a `302`, if a `Set-Cookie` header is present, the cookie is not set properly. Since the redirect cannot be handled manually this might cause a scenario where infinite requests occur if the redirect is the result of an expired session.
-
-## Configuring NSURLSession on iOS
-
-For some applications it may be appropriate to provide a custom `NSURLSessionConfiguration` for the underlying `NSURLSession` that is used for network requests in a React Native application running on iOS. For instance, one may need to set a custom user agent string for all network requests coming from the app or supply `NSURLSession` with an ephemeral `NSURLSessionConfiguration`. The function `RCTSetCustomNSURLSessionConfigurationProvider` allows for such customization. Remember to add the following import to the file in which `RCTSetCustomNSURLSessionConfigurationProvider` will be called:
-
-```objectivec
-#import <React/RCTHTTPRequestHandler.h>
-```
-
-`RCTSetCustomNSURLSessionConfigurationProvider` should be called early in the application life cycle such that it is readily available when needed by React, for instance:
-
-```objectivec
--(void)application:(__unused UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
-
-  // set RCTSetCustomNSURLSessionConfigurationProvider
-  RCTSetCustomNSURLSessionConfigurationProvider(^NSURLSessionConfiguration *{
-     NSURLSessionConfiguration *configuration = [NSURLSessionConfiguration defaultSessionConfiguration];
-     // configure the session
-     return configuration;
-  });
-
-  // set up React
-  _bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
-}
-```
+---
+id: network
+title: Networking
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may need to fetch a chunk of static content from another server.
+
+## Using Fetch
+
+React Native provides the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) for your networking needs. Fetch will seem familiar if you have used `XMLHttpRequest` or other networking APIs before. You may refer to MDN's guide on [Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) for additional information.
+
+### Making requests
+
+In order to fetch content from an arbitrary URL, you can pass the URL to fetch:
+
+```ts
+fetch('https://mywebsite.com/mydata.json');
+```
+
+Fetch also takes an optional second argument that allows you to customize the HTTP request. You may want to specify additional headers, or make a POST request:
+
+```ts
+fetch('https://mywebsite.com/endpoint/', {
+  method: 'POST',
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json',
+  },
+  body: JSON.stringify({
+    firstParam: 'yourValue',
+    secondParam: 'yourOtherValue',
+  }),
+});
+```
+
+Take a look at the [Fetch Request docs](https://developer.mozilla.org/en-US/docs/Web/API/Request) for a full list of properties.
+
+### Handling the response
+
+The above examples show how you can make a request. In many cases, you will want to do something with the response.
+
+Networking is an inherently asynchronous operation. Fetch method will return a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that makes it straightforward to write code that works in an asynchronous manner:
+
+```ts
+const getMoviesFromApi = () => {
+  return fetch('https://reactnative.dev/movies.json')
+    .then(response => response.json())
+    .then(json => {
+      return json.movies;
+    })
+    .catch(error => {
+      console.error(error);
+    });
+};
+```
+
+You can also use the `async` / `await` syntax in a React Native app:
+
+```ts
+const getMoviesFromApiAsync = async () => {
+  try {
+    const response = await fetch(
+      'https://reactnative.dev/movies.json',
+    );
+    const json = await response.json();
+    return json.movies;
+  } catch (error) {
+    console.error(error);
+  }
+};
+```
+
+Don't forget to catch any errors that may be thrown by `fetch`, otherwise they will be dropped silently.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Fetch%20Example&ext=js
+import {useEffect, useState} from 'react';
+import {ActivityIndicator, FlatList, Text, View} from 'react-native';
+
+const App = () => {
+  const [isLoading, setLoading] = useState(true);
+  const [data, setData] = useState([]);
+
+  const getMovies = async () => {
+    try {
+      const response = await fetch('https://reactnative.dev/movies.json');
+      const json = await response.json();
+      setData(json.movies);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    getMovies();
+  }, []);
+
+  return (
+    <View style={{flex: 1, padding: 24}}>
+      {isLoading ? (
+        <ActivityIndicator />
+      ) : (
+        <FlatList
+          data={data}
+          keyExtractor={({id}) => id}
+          renderItem={({item}) => (
+            <Text>
+              {item.title}, {item.releaseYear}
+            </Text>
+          )}
+        />
+      )}
+    </View>
+  );
+};
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Fetch%20Example&ext=tsx
+import {useEffect, useState} from 'react';
+import {ActivityIndicator, FlatList, Text, View} from 'react-native';
+
+type Movie = {
+  id: string;
+  title: string;
+  releaseYear: string;
+};
+
+type MoviesResponse = {
+  title: string;
+  description: string;
+  movies: Movie[];
+};
+
+const App = () => {
+  const [isLoading, setLoading] = useState(true);
+  const [data, setData] = useState<Movie[]>([]);
+
+  const getMovies = async () => {
+    try {
+      const response = await fetch('https://reactnative.dev/movies.json');
+      const json = (await response.json()) as MoviesResponse;
+      setData(json.movies);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    getMovies();
+  }, []);
+
+  return (
+    <View style={{flex: 1, padding: 24}}>
+      {isLoading ? (
+        <ActivityIndicator />
+      ) : (
+        <FlatList
+          data={data}
+          keyExtractor={({id}) => id}
+          renderItem={({item}) => (
+            <Text>
+              {item.title}, {item.releaseYear}
+            </Text>
+          )}
+        />
+      )}
+    </View>
+  );
+};
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+:::info
+By default, iOS 9.0 or later enforce App Transport Security (ATS). ATS requires any HTTP connection to use HTTPS. If you need to fetch from a cleartext URL (one that begins with `http`) you will first need to [add an ATS exception](integration-with-existing-apps.md#test-your-integration). If you know ahead of time what domains you will need access to, it is more secure to add exceptions only for those domains; if the domains are not known until runtime you can [disable ATS completely](publishing-to-app-store.md#1-enable-app-transport-security). Note however that from January 2017, [Apple's App Store review will require reasonable justification for disabling ATS](https://forums.developer.apple.com/thread/48979). See [Apple's documentation](https://developer.apple.com/library/ios/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html#//apple_ref/doc/uid/TP40009251-SW33) for more information.
+:::
+
+:::tip
+On Android, as of API Level 28, clear text traffic is also blocked by default. This behaviour can be overridden by setting [`android:usesCleartextTraffic`](https://developer.android.com/guide/topics/manifest/application-element#usesCleartextTraffic) in the app manifest file.
+:::
+
+## Using Other Networking Libraries
+
+The [XMLHttpRequest API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) is built into React Native. This means that you can use third party libraries such as [frisbee](https://github.com/niftylettuce/frisbee) or [axios](https://github.com/axios/axios) that depend on it, or you can use the XMLHttpRequest API directly if you prefer.
+
+```ts
+const request = new XMLHttpRequest();
+request.onreadystatechange = e => {
+  if (request.readyState !== 4) {
+    return;
+  }
+
+  if (request.status === 200) {
+    console.log('success', request.responseText);
+  } else {
+    console.warn('error');
+  }
+};
+
+request.open('GET', 'https://mywebsite.com/endpoint/');
+request.send();
+```
+
+:::warning[Caution]
+The security model for XMLHttpRequest is different than on web as there is no concept of [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) in native apps.
+:::
+
+## WebSocket Support
+
+React Native also supports [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket), a protocol which provides full-duplex communication channels over a single TCP connection.
+
+```ts
+const ws = new WebSocket('ws://host.com/path');
+
+ws.onopen = () => {
+  // connection opened
+  ws.send('something'); // send a message
+};
+
+ws.onmessage = e => {
+  // a message was received
+  console.log(e.data);
+};
+
+ws.onerror = e => {
+  // an error occurred
+  console.log(e.message);
+};
+
+ws.onclose = e => {
+  // connection closed
+  console.log(e.code, e.reason);
+};
+```
+
+## Known Issues with `fetch` and cookie based authentication
+
+The following options are currently not working with `fetch`
+
+- `redirect:manual`
+- `credentials:omit`
+
+* Having same name headers on Android will result in only the latest one being present. A temporary solution can be found here: https://github.com/facebook/react-native/issues/18837#issuecomment-398779994.
+* Cookie based authentication is currently unstable. You can view some of the issues raised here: https://github.com/facebook/react-native/issues/23185
+* As a minimum on iOS, when redirected through a `302`, if a `Set-Cookie` header is present, the cookie is not set properly. Since the redirect cannot be handled manually this might cause a scenario where infinite requests occur if the redirect is the result of an expired session.
+
+## Configuring NSURLSession on iOS
+
+For some applications it may be appropriate to provide a custom `NSURLSessionConfiguration` for the underlying `NSURLSession` that is used for network requests in a React Native application running on iOS. For instance, one may need to set a custom user agent string for all network requests coming from the app or supply `NSURLSession` with an ephemeral `NSURLSessionConfiguration`. The function `RCTSetCustomNSURLSessionConfigurationProvider` allows for such customization. Remember to add the following import to the file in which `RCTSetCustomNSURLSessionConfigurationProvider` will be called:
+
+```objectivec
+#import <React/RCTHTTPRequestHandler.h>
+```
+
+`RCTSetCustomNSURLSessionConfigurationProvider` should be called early in the application life cycle such that it is readily available when needed by React, for instance:
+
+```objectivec
+-(void)application:(__unused UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
+
+  // set RCTSetCustomNSURLSessionConfigurationProvider
+  RCTSetCustomNSURLSessionConfigurationProvider(^NSURLSessionConfiguration *{
+     NSURLSessionConfiguration *configuration = [NSURLSessionConfiguration defaultSessionConfiguration];
+     // configure the session
+     return configuration;
+  });
+
+  // set up React
+  _bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
+}
+```
diff --git a/website/versioned_docs/version-0.85/optimizing-flatlist-configuration.md b/website/versioned_docs/version-0.85/optimizing-flatlist-configuration.md
index a81ec0c6cf6..11be2e33b7c 100644
--- a/website/versioned_docs/version-0.85/optimizing-flatlist-configuration.md
+++ b/website/versioned_docs/version-0.85/optimizing-flatlist-configuration.md
@@ -1,154 +1,154 @@
----
-id: optimizing-flatlist-configuration
-title: Optimizing FlatList Configuration
----
-
-## Terms
-
-- **VirtualizedList:** The component behind `FlatList` (React Native's implementation of the [`Virtual List`](https://bvaughn.github.io/react-virtualized/#/components/List) concept.)
-
-- **Memory consumption:** How much information about your list is being stored in memory, which could lead to an app crash.
-
-- **Responsiveness:** Application ability to respond to interactions. Low responsiveness, for instance, is when you touch on a component and it waits a bit to respond, instead of responding immediately as expected.
-
-- **Blank areas:** When `VirtualizedList` can't render your items fast enough, you may enter a part of your list with non-rendered components that appear as blank space.
-
-- **Viewport:** The visible area of content that is rendered to pixels.
-
-- **Window:** The area in which items should be mounted, which is generally much larger than the viewport.
-
-## Props
-
-Here are a list of props that can help to improve `FlatList` performance:
-
-### `removeClippedSubviews`
-
-| Type    | Default                              |
-| ------- | ------------------------------------ |
-| Boolean | `true` on Android, otherwise `false` |
-
-If `true`, views that are outside of the viewport are automatically detached from the native view hierarchy.
-
-**Pros:** This reduces time spent on the main thread, and thus reduces the risk of dropped frames, by excluding views outside of the viewport from the native rendering and drawing traversals.
-
-**Cons:** Be aware that this implementation can have bugs, such as missing content (mainly observed on iOS), especially if you are doing complex things with transforms and/or absolute positioning. Also note this does not save significant memory because the views are not deallocated, only detached.
-
-### `maxToRenderPerBatch`
-
-| Type   | Default |
-| ------ | ------- |
-| Number | 10      |
-
-It is a `VirtualizedList` prop that can be passed through `FlatList`. This controls the amount of items rendered per batch, which is the next chunk of items rendered on every scroll.
-
-**Pros:** Setting a bigger number means less visual blank areas when scrolling (increases the fill rate).
-
-**Cons:** More items per batch means longer periods of JavaScript execution potentially blocking other event processing, like presses, hurting responsiveness.
-
-### `updateCellsBatchingPeriod`
-
-| Type   | Default |
-| ------ | ------- |
-| Number | 50      |
-
-While `maxToRenderPerBatch` tells the amount of items rendered per batch, setting `updateCellsBatchingPeriod` tells your `VirtualizedList` the delay in milliseconds between batch renders (how frequently your component will be rendering the windowed items).
-
-**Pros:** Combining this prop with `maxToRenderPerBatch` gives you the power to, for example, render more items in a less frequent batch, or less items in a more frequent batch.
-
-**Cons:** Less frequent batches may cause blank areas, More frequent batches may cause responsiveness issues.
-
-### initialNumToRender
-
-| Type   | Default |
-| ------ | ------- |
-| Number | 10      |
-
-The initial amount of items to render.
-
-**Pros:** Define precise number of items that would cover the screen for every device. This can be a big performance boost for the initial render.
-
-**Cons:** Setting a low `initialNumToRender` may cause blank areas, especially if it's too small to cover the viewport on initial render.
-
-### `windowSize`
-
-| Type   | Default |
-| ------ | ------- |
-| Number | 21      |
-
-The number passed here is a measurement unit where 1 is equivalent to your viewport height. The default value is 21 (10 viewports above, 10 below, and one in between).
-
-**Pros:** Bigger `windowSize` will result in less chance of seeing blank space while scrolling. On the other hand, smaller `windowSize` will result in fewer items mounted simultaneously, saving memory.
-
-**Cons:** For a bigger `windowSize`, you will have more memory consumption. For a lower `windowSize`, you will have a bigger chance of seeing blank areas.
-
-## List items
-
-Below are some tips about list item components. They are the core of your list, so they need to be fast.
-
-### Use basic components
-
-The more complex your components are, the slower they will render. Try to avoid a lot of logic and nesting in your list items. If you are reusing this list item component a lot in your app, create a component only for your big lists and make them with as little logic and nesting as possible.
-
-### Use light components
-
-The heavier your components are, the slower they render. Avoid heavy images (use a cropped version or thumbnail for list items, as small as possible). Talk to your design team, use as little effects and interactions and information as possible in your list. Show them in your item's detail.
-
-### Use `memo()`
-
-`React.memo()` creates a memoized component that will be re-rendered only when the props passed to the component change. We can use this function to optimize the components in the FlatList.
-
-```tsx
-import React, {memo} from 'react';
-import {View, Text} from 'react-native';
-
-const MyListItem = memo(
-  ({title}: {title: string}) => (
-    <View>
-      <Text>{title}</Text>
-    </View>
-  ),
-  (prevProps, nextProps) => {
-    return prevProps.title === nextProps.title;
-  },
-);
-
-export default MyListItem;
-```
-
-In this example, we have determined that MyListItem should be re-rendered only when the title changes. We passed the comparison function as the second argument to React.memo() so that the component is re-rendered only when the specified prop is changed. If the comparison function returns true, the component will not be re-rendered.
-
-### Use cached optimized images
-
-You can use the community packages (such as [@d11/react-native-fast-image](https://github.com/ds-horizon/react-native-fast-image) from [Dream11](https://github.com/ds-horizon)) for more performant images. Every image in your list is a `new Image()` instance. The faster it reaches the `loaded` hook, the faster your JavaScript thread will be free again.
-
-### Use `getItemLayout`
-
-If all your list item components have the same height (or width, for a horizontal list), providing the [getItemLayout](flatlist#getitemlayout) prop removes the need for your `FlatList` to manage async layout calculations. This is a very desirable optimization technique.
-
-If your components have dynamic size and you really need performance, consider asking your design team if they may think of a redesign in order to perform better.
-
-### Use `keyExtractor` or `key`
-
-You can set the [`keyExtractor`](flatlist#keyextractor) to your `FlatList` component. This prop is used for caching and as the React `key` to track item re-ordering.
-
-You can also use a `key` prop in your item component.
-
-### Avoid anonymous function on `renderItem`
-
-For functional components, move the `renderItem` function outside of the returned JSX. Also, ensure that it is wrapped in a `useCallback` hook to prevent it from being recreated each render.
-
-For class components, move the `renderItem` function outside of the render function, so it won't recreate itself each time the render function is called.
-
-```tsx
-const renderItem = useCallback(({item}) => (
-   <View key={item.key}>
-      <Text>{item.title}</Text>
-   </View>
- ), []);
-
-return (
-  // ...
-  <FlatList data={items} renderItem={renderItem} />;
-  // ...
-);
-```
+---
+id: optimizing-flatlist-configuration
+title: Optimizing FlatList Configuration
+---
+
+## Terms
+
+- **VirtualizedList:** The component behind `FlatList` (React Native's implementation of the [`Virtual List`](https://bvaughn.github.io/react-virtualized/#/components/List) concept.)
+
+- **Memory consumption:** How much information about your list is being stored in memory, which could lead to an app crash.
+
+- **Responsiveness:** Application ability to respond to interactions. Low responsiveness, for instance, is when you touch on a component and it waits a bit to respond, instead of responding immediately as expected.
+
+- **Blank areas:** When `VirtualizedList` can't render your items fast enough, you may enter a part of your list with non-rendered components that appear as blank space.
+
+- **Viewport:** The visible area of content that is rendered to pixels.
+
+- **Window:** The area in which items should be mounted, which is generally much larger than the viewport.
+
+## Props
+
+Here are a list of props that can help to improve `FlatList` performance:
+
+### `removeClippedSubviews`
+
+| Type    | Default                              |
+| ------- | ------------------------------------ |
+| Boolean | `true` on Android, otherwise `false` |
+
+If `true`, views that are outside of the viewport are automatically detached from the native view hierarchy.
+
+**Pros:** This reduces time spent on the main thread, and thus reduces the risk of dropped frames, by excluding views outside of the viewport from the native rendering and drawing traversals.
+
+**Cons:** Be aware that this implementation can have bugs, such as missing content (mainly observed on iOS), especially if you are doing complex things with transforms and/or absolute positioning. Also note this does not save significant memory because the views are not deallocated, only detached.
+
+### `maxToRenderPerBatch`
+
+| Type   | Default |
+| ------ | ------- |
+| Number | 10      |
+
+It is a `VirtualizedList` prop that can be passed through `FlatList`. This controls the amount of items rendered per batch, which is the next chunk of items rendered on every scroll.
+
+**Pros:** Setting a bigger number means less visual blank areas when scrolling (increases the fill rate).
+
+**Cons:** More items per batch means longer periods of JavaScript execution potentially blocking other event processing, like presses, hurting responsiveness.
+
+### `updateCellsBatchingPeriod`
+
+| Type   | Default |
+| ------ | ------- |
+| Number | 50      |
+
+While `maxToRenderPerBatch` tells the amount of items rendered per batch, setting `updateCellsBatchingPeriod` tells your `VirtualizedList` the delay in milliseconds between batch renders (how frequently your component will be rendering the windowed items).
+
+**Pros:** Combining this prop with `maxToRenderPerBatch` gives you the power to, for example, render more items in a less frequent batch, or less items in a more frequent batch.
+
+**Cons:** Less frequent batches may cause blank areas, More frequent batches may cause responsiveness issues.
+
+### initialNumToRender
+
+| Type   | Default |
+| ------ | ------- |
+| Number | 10      |
+
+The initial amount of items to render.
+
+**Pros:** Define precise number of items that would cover the screen for every device. This can be a big performance boost for the initial render.
+
+**Cons:** Setting a low `initialNumToRender` may cause blank areas, especially if it's too small to cover the viewport on initial render.
+
+### `windowSize`
+
+| Type   | Default |
+| ------ | ------- |
+| Number | 21      |
+
+The number passed here is a measurement unit where 1 is equivalent to your viewport height. The default value is 21 (10 viewports above, 10 below, and one in between).
+
+**Pros:** Bigger `windowSize` will result in less chance of seeing blank space while scrolling. On the other hand, smaller `windowSize` will result in fewer items mounted simultaneously, saving memory.
+
+**Cons:** For a bigger `windowSize`, you will have more memory consumption. For a lower `windowSize`, you will have a bigger chance of seeing blank areas.
+
+## List items
+
+Below are some tips about list item components. They are the core of your list, so they need to be fast.
+
+### Use basic components
+
+The more complex your components are, the slower they will render. Try to avoid a lot of logic and nesting in your list items. If you are reusing this list item component a lot in your app, create a component only for your big lists and make them with as little logic and nesting as possible.
+
+### Use light components
+
+The heavier your components are, the slower they render. Avoid heavy images (use a cropped version or thumbnail for list items, as small as possible). Talk to your design team, use as little effects and interactions and information as possible in your list. Show them in your item's detail.
+
+### Use `memo()`
+
+`React.memo()` creates a memoized component that will be re-rendered only when the props passed to the component change. We can use this function to optimize the components in the FlatList.
+
+```tsx
+import {memo} from 'react';
+import {View, Text} from 'react-native';
+
+const MyListItem = memo(
+  ({title}: {title: string}) => (
+    <View>
+      <Text>{title}</Text>
+    </View>
+  ),
+  (prevProps, nextProps) => {
+    return prevProps.title === nextProps.title;
+  },
+);
+
+export default MyListItem;
+```
+
+In this example, we have determined that MyListItem should be re-rendered only when the title changes. We passed the comparison function as the second argument to React.memo() so that the component is re-rendered only when the specified prop is changed. If the comparison function returns true, the component will not be re-rendered.
+
+### Use cached optimized images
+
+You can use the community packages (such as [@d11/react-native-fast-image](https://github.com/ds-horizon/react-native-fast-image) from [Dream11](https://github.com/ds-horizon)) for more performant images. Every image in your list is a `new Image()` instance. The faster it reaches the `loaded` hook, the faster your JavaScript thread will be free again.
+
+### Use `getItemLayout`
+
+If all your list item components have the same height (or width, for a horizontal list), providing the [getItemLayout](flatlist#getitemlayout) prop removes the need for your `FlatList` to manage async layout calculations. This is a very desirable optimization technique.
+
+If your components have dynamic size and you really need performance, consider asking your design team if they may think of a redesign in order to perform better.
+
+### Use `keyExtractor` or `key`
+
+You can set the [`keyExtractor`](flatlist#keyextractor) to your `FlatList` component. This prop is used for caching and as the React `key` to track item re-ordering.
+
+You can also use a `key` prop in your item component.
+
+### Avoid anonymous function on `renderItem`
+
+For functional components, move the `renderItem` function outside of the returned JSX. Also, ensure that it is wrapped in a `useCallback` hook to prevent it from being recreated each render.
+
+For class components, move the `renderItem` function outside of the render function, so it won't recreate itself each time the render function is called.
+
+```tsx
+const renderItem = useCallback(({item}) => (
+   <View key={item.key}>
+      <Text>{item.title}</Text>
+   </View>
+ ), []);
+
+return (
+  // ...
+  <FlatList data={items} renderItem={renderItem} />;
+  // ...
+);
+```
diff --git a/website/versioned_docs/version-0.85/panresponder.md b/website/versioned_docs/version-0.85/panresponder.md
index fa6d8b8ee4e..eabd919aa1e 100644
--- a/website/versioned_docs/version-0.85/panresponder.md
+++ b/website/versioned_docs/version-0.85/panresponder.md
@@ -1,177 +1,177 @@
----
-id: panresponder
-title: PanResponder
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-`PanResponder` reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize basic multi-touch gestures.
-
-By default, `PanResponder` holds an `InteractionManager` handle to block long-running JS events from interrupting active gestures.
-
-It provides a predictable wrapper of the responder handlers provided by the [gesture responder system](gesture-responder-system.md). For each handler, it provides a new `gestureState` object alongside the native event object:
-
-```
-onPanResponderMove: (event, gestureState) => {}
-```
-
-A native event is a synthetic touch event with form of [PressEvent](pressevent).
-
-A `gestureState` object has the following:
-
-- `stateID` - ID of the gestureState- persisted as long as there's at least one touch on screen
-- `moveX` - the latest screen coordinates of the recently-moved touch
-- `moveY` - the latest screen coordinates of the recently-moved touch
-- `x0` - the screen coordinates of the responder grant
-- `y0` - the screen coordinates of the responder grant
-- `dx` - accumulated distance of the gesture since the touch started
-- `dy` - accumulated distance of the gesture since the touch started
-- `vx` - current velocity of the gesture
-- `vy` - current velocity of the gesture
-- `numberActiveTouches` - Number of touches currently on screen
-
-## Usage Pattern
-
-```tsx
-const ExampleComponent = () => {
-  const panResponder = React.useRef(
-    PanResponder.create({
-      // Ask to be the responder:
-      onStartShouldSetPanResponder: (evt, gestureState) => true,
-      onStartShouldSetPanResponderCapture: (evt, gestureState) =>
-        true,
-      onMoveShouldSetPanResponder: (evt, gestureState) => true,
-      onMoveShouldSetPanResponderCapture: (evt, gestureState) =>
-        true,
-
-      onPanResponderGrant: (evt, gestureState) => {
-        // The gesture has started. Show visual feedback so the user knows
-        // what is happening!
-        // gestureState.d{x,y} will be set to zero now
-      },
-      onPanResponderMove: (evt, gestureState) => {
-        // The most recent move distance is gestureState.move{X,Y}
-        // The accumulated gesture distance since becoming responder is
-        // gestureState.d{x,y}
-      },
-      onPanResponderTerminationRequest: (evt, gestureState) =>
-        true,
-      onPanResponderRelease: (evt, gestureState) => {
-        // The user has released all touches while this view is the
-        // responder. This typically means a gesture has succeeded
-      },
-      onPanResponderTerminate: (evt, gestureState) => {
-        // Another component has become the responder, so this gesture
-        // should be cancelled
-      },
-      onShouldBlockNativeResponder: (evt, gestureState) => {
-        // Returns whether this component should block native components from becoming the JS
-        // responder. Returns true by default. Is currently only supported on android.
-        return true;
-      },
-    }),
-  ).current;
-
-  return <View {...panResponder.panHandlers} />;
-};
-```
-
-## Example
-
-`PanResponder` works with `Animated` API to help build complex gestures in the UI. The following example contains an animated `View` component which can be dragged freely across the screen
-
-```SnackPlayer name=PanResponder
-import React, {useRef} from 'react';
-import {Animated, View, StyleSheet, PanResponder, Text} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const pan = useRef(new Animated.ValueXY()).current;
-
-  const panResponder = useRef(
-    PanResponder.create({
-      onMoveShouldSetPanResponder: () => true,
-      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
-      onPanResponderRelease: () => {
-        pan.extractOffset();
-      },
-    }),
-  ).current;
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.titleText}>Drag this box!</Text>
-        <Animated.View
-          style={{
-            transform: [{translateX: pan.x}, {translateY: pan.y}],
-          }}
-          {...panResponder.panHandlers}>
-          <View style={styles.box} />
-        </Animated.View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  titleText: {
-    fontSize: 14,
-    lineHeight: 24,
-    fontWeight: 'bold',
-  },
-  box: {
-    height: 150,
-    width: 150,
-    backgroundColor: 'blue',
-    borderRadius: 5,
-  },
-});
-
-export default App;
-```
-
-Try the [PanResponder example in RNTester](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js).
-
----
-
-# Reference
-
-## Methods
-
-### `create()`
-
-```tsx
-static create(config: PanResponderCallbacks): PanResponderInstance;
-```
-
-**Parameters:**
-
-| Name                                                        | Type   | Description |
-| ----------------------------------------------------------- | ------ | ----------- |
-| config <div className="label basic required">Required</div> | object | Refer below |
-
-The `config` object provides enhanced versions of all of the responder callbacks that provide not only the [`PressEvent`](pressevent), but also the `PanResponder` gesture state, by replacing the word `Responder` with `PanResponder` in each of the typical `onResponder*` callbacks. For example, the `config` object would look like:
-
-- `onMoveShouldSetPanResponder: (e, gestureState) => {...}`
-- `onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}`
-- `onStartShouldSetPanResponder: (e, gestureState) => {...}`
-- `onStartShouldSetPanResponderCapture: (e, gestureState) => {...}`
-- `onPanResponderReject: (e, gestureState) => {...}`
-- `onPanResponderGrant: (e, gestureState) => {...}`
-- `onPanResponderStart: (e, gestureState) => {...}`
-- `onPanResponderEnd: (e, gestureState) => {...}`
-- `onPanResponderRelease: (e, gestureState) => {...}`
-- `onPanResponderMove: (e, gestureState) => {...}`
-- `onPanResponderTerminate: (e, gestureState) => {...}`
-- `onPanResponderTerminationRequest: (e, gestureState) => {...}`
-- `onShouldBlockNativeResponder: (e, gestureState) => {...}`
-
-In general, for events that have capture equivalents, we update the gestureState once in the capture phase and can use it in the bubble phase as well.
-
-Be careful with `onStartShould*` callbacks. They only reflect updated `gestureState` for start/end events that bubble/capture to the Node. Once the node is the responder, you can rely on every start/end event being processed by the gesture and `gestureState` being updated accordingly. (numberActiveTouches) may not be totally accurate unless you are the responder.
+---
+id: panresponder
+title: PanResponder
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+`PanResponder` reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize basic multi-touch gestures.
+
+By default, `PanResponder` holds an `InteractionManager` handle to block long-running JS events from interrupting active gestures.
+
+It provides a predictable wrapper of the responder handlers provided by the [gesture responder system](gesture-responder-system.md). For each handler, it provides a new `gestureState` object alongside the native event object:
+
+```
+onPanResponderMove: (event, gestureState) => {}
+```
+
+A native event is a synthetic touch event with form of [PressEvent](pressevent).
+
+A `gestureState` object has the following:
+
+- `stateID` - ID of the gestureState- persisted as long as there's at least one touch on screen
+- `moveX` - the latest screen coordinates of the recently-moved touch
+- `moveY` - the latest screen coordinates of the recently-moved touch
+- `x0` - the screen coordinates of the responder grant
+- `y0` - the screen coordinates of the responder grant
+- `dx` - accumulated distance of the gesture since the touch started
+- `dy` - accumulated distance of the gesture since the touch started
+- `vx` - current velocity of the gesture
+- `vy` - current velocity of the gesture
+- `numberActiveTouches` - Number of touches currently on screen
+
+## Usage Pattern
+
+```tsx
+const ExampleComponent = () => {
+  const panResponder = useRef(
+    PanResponder.create({
+      // Ask to be the responder:
+      onStartShouldSetPanResponder: (evt, gestureState) => true,
+      onStartShouldSetPanResponderCapture: (evt, gestureState) =>
+        true,
+      onMoveShouldSetPanResponder: (evt, gestureState) => true,
+      onMoveShouldSetPanResponderCapture: (evt, gestureState) =>
+        true,
+
+      onPanResponderGrant: (evt, gestureState) => {
+        // The gesture has started. Show visual feedback so the user knows
+        // what is happening!
+        // gestureState.d{x,y} will be set to zero now
+      },
+      onPanResponderMove: (evt, gestureState) => {
+        // The most recent move distance is gestureState.move{X,Y}
+        // The accumulated gesture distance since becoming responder is
+        // gestureState.d{x,y}
+      },
+      onPanResponderTerminationRequest: (evt, gestureState) =>
+        true,
+      onPanResponderRelease: (evt, gestureState) => {
+        // The user has released all touches while this view is the
+        // responder. This typically means a gesture has succeeded
+      },
+      onPanResponderTerminate: (evt, gestureState) => {
+        // Another component has become the responder, so this gesture
+        // should be cancelled
+      },
+      onShouldBlockNativeResponder: (evt, gestureState) => {
+        // Returns whether this component should block native components from becoming the JS
+        // responder. Returns true by default. Is currently only supported on android.
+        return true;
+      },
+    }),
+  ).current;
+
+  return <View {...panResponder.panHandlers} />;
+};
+```
+
+## Example
+
+`PanResponder` works with `Animated` API to help build complex gestures in the UI. The following example contains an animated `View` component which can be dragged freely across the screen
+
+```SnackPlayer name=PanResponder
+import {useRef} from 'react';
+import {Animated, View, StyleSheet, PanResponder, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const pan = useRef(new Animated.ValueXY()).current;
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
+      onPanResponderRelease: () => {
+        pan.extractOffset();
+      },
+    }),
+  ).current;
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.titleText}>Drag this box!</Text>
+        <Animated.View
+          style={{
+            transform: [{translateX: pan.x}, {translateY: pan.y}],
+          }}
+          {...panResponder.panHandlers}>
+          <View style={styles.box} />
+        </Animated.View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  titleText: {
+    fontSize: 14,
+    lineHeight: 24,
+    fontWeight: 'bold',
+  },
+  box: {
+    height: 150,
+    width: 150,
+    backgroundColor: 'blue',
+    borderRadius: 5,
+  },
+});
+
+export default App;
+```
+
+Try the [PanResponder example in RNTester](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js).
+
+---
+
+# Reference
+
+## Methods
+
+### `create()`
+
+```tsx
+static create(config: PanResponderCallbacks): PanResponderInstance;
+```
+
+**Parameters:**
+
+| Name                                                        | Type   | Description |
+| ----------------------------------------------------------- | ------ | ----------- |
+| config <div className="label basic required">Required</div> | object | Refer below |
+
+The `config` object provides enhanced versions of all of the responder callbacks that provide not only the [`PressEvent`](pressevent), but also the `PanResponder` gesture state, by replacing the word `Responder` with `PanResponder` in each of the typical `onResponder*` callbacks. For example, the `config` object would look like:
+
+- `onMoveShouldSetPanResponder: (e, gestureState) => {...}`
+- `onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}`
+- `onStartShouldSetPanResponder: (e, gestureState) => {...}`
+- `onStartShouldSetPanResponderCapture: (e, gestureState) => {...}`
+- `onPanResponderReject: (e, gestureState) => {...}`
+- `onPanResponderGrant: (e, gestureState) => {...}`
+- `onPanResponderStart: (e, gestureState) => {...}`
+- `onPanResponderEnd: (e, gestureState) => {...}`
+- `onPanResponderRelease: (e, gestureState) => {...}`
+- `onPanResponderMove: (e, gestureState) => {...}`
+- `onPanResponderTerminate: (e, gestureState) => {...}`
+- `onPanResponderTerminationRequest: (e, gestureState) => {...}`
+- `onShouldBlockNativeResponder: (e, gestureState) => {...}`
+
+In general, for events that have capture equivalents, we update the gestureState once in the capture phase and can use it in the bubble phase as well.
+
+Be careful with `onStartShould*` callbacks. They only reflect updated `gestureState` for start/end events that bubble/capture to the Node. Once the node is the responder, you can rely on every start/end event being processed by the gesture and `gestureState` being updated accordingly. (numberActiveTouches) may not be totally accurate unless you are the responder.
diff --git a/website/versioned_docs/version-0.85/permissionsandroid.md b/website/versioned_docs/version-0.85/permissionsandroid.md
index ec1f486ba37..4e93941ad1f 100644
--- a/website/versioned_docs/version-0.85/permissionsandroid.md
+++ b/website/versioned_docs/version-0.85/permissionsandroid.md
@@ -17,7 +17,6 @@ If a user has previously turned off a permission that you prompt for, the OS wil
 ### Example
 
 ```SnackPlayer name=PermissionsAndroid%20Example&supportedPlatforms=android
-import React from 'react';
 import {
   Button,
   PermissionsAndroid,
diff --git a/website/versioned_docs/version-0.85/pixelratio.md b/website/versioned_docs/version-0.85/pixelratio.md
index 64e4eded49f..f298a8e73ab 100644
--- a/website/versioned_docs/version-0.85/pixelratio.md
+++ b/website/versioned_docs/version-0.85/pixelratio.md
@@ -30,7 +30,6 @@ In React Native, everything in JavaScript and within the layout engine works wit
 ## Example
 
 ```SnackPlayer name=PixelRatio%20Example
-import React from 'react';
 import {
   Image,
   PixelRatio,
diff --git a/website/versioned_docs/version-0.85/platform.md b/website/versioned_docs/version-0.85/platform.md
index 79f435ccd56..b8642658a84 100644
--- a/website/versioned_docs/version-0.85/platform.md
+++ b/website/versioned_docs/version-0.85/platform.md
@@ -6,7 +6,6 @@ title: Platform
 ## Example
 
 ```SnackPlayer name=Platform%20API%20Example&supportedPlatforms=ios,android
-import React from 'react';
 import {Platform, StyleSheet, Text, ScrollView} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.85/platformcolor.md b/website/versioned_docs/version-0.85/platformcolor.md
index 17371f76c26..040c6d2c18a 100644
--- a/website/versioned_docs/version-0.85/platformcolor.md
+++ b/website/versioned_docs/version-0.85/platformcolor.md
@@ -46,7 +46,6 @@ If you’re familiar with design systems, another way of thinking about this is
 ## Example
 
 ```SnackPlayer name=PlatformColor%20Example&supportedPlatforms=android,ios
-import React from 'react';
 import {Platform, PlatformColor, StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.85/pressable.md b/website/versioned_docs/version-0.85/pressable.md
index 590c77db974..3415bb2eb0a 100644
--- a/website/versioned_docs/version-0.85/pressable.md
+++ b/website/versioned_docs/version-0.85/pressable.md
@@ -1,268 +1,268 @@
----
-id: pressable
-title: Pressable
----
-
-Pressable is a Core Component wrapper that can detect various stages of press interactions on any of its defined children.
-
-```tsx
-<Pressable onPress={onPressFunction}>
-  <Text>I'm pressable!</Text>
-</Pressable>
-```
-
-## How it works
-
-On an element wrapped by `Pressable`:
-
-- [`onPressIn`](#onpressin) is called when a press is activated.
-- [`onPressOut`](#onpressout) is called when the press gesture is deactivated.
-
-After pressing [`onPressIn`](#onpressin), one of two things will happen:
-
-1. The person will remove their finger, triggering [`onPressOut`](#onpressout) followed by [`onPress`](#onpress).
-2. If the person leaves their finger longer than 500 milliseconds before removing it, [`onLongPress`](#onlongpress) is triggered. ([`onPressOut`](#onpressout) will still fire when they remove their finger.)
-
-<img src="/docs/assets/d_pressable_pressing.svg" width="1000" alt="Diagram of the onPress events in sequence." />
-
-Fingers are not the most precise instruments, and it is common for users to accidentally activate the wrong element or miss the activation area. To help, `Pressable` has an optional `HitRect` you can use to define how far a touch can register away from the wrapped element. Presses can start anywhere within a `HitRect`.
-
-`PressRect` allows presses to move beyond the element and its `HitRect` while maintaining activation and being eligible for a "press"—think of sliding your finger slowly away from a button you're pressing down on.
-
-:::note
-The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
-:::
-
-<figure>
-  <img src="/docs/assets/d_pressable_anatomy.svg" width="1000" alt="Diagram of HitRect and PressRect and how they work." />
-  <figcaption>
-    You can set <code>HitRect</code> with <code>hitSlop</code> and set <code>PressRect</code> with <code>pressRetentionOffset</code>.
-  </figcaption>
-</figure>
-
-:::info
-`Pressable` uses React Native's `Pressability` API. For more information around the state machine flow of Pressability and how it works, check out the implementation for [Pressability](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Pressability/Pressability.js#L350).
-:::
-
-## Example
-
-```SnackPlayer name=Pressable
-import React, {useState} from 'react';
-import {Pressable, StyleSheet, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [timesPressed, setTimesPressed] = useState(0);
-
-  let textLog = '';
-  if (timesPressed > 1) {
-    textLog = timesPressed + 'x onPress';
-  } else if (timesPressed > 0) {
-    textLog = 'onPress';
-  }
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Pressable
-          onPress={() => {
-            setTimesPressed(current => current + 1);
-          }}
-          style={({pressed}) => [
-            {
-              backgroundColor: pressed ? 'rgb(210, 230, 255)' : 'white',
-            },
-            styles.wrapperCustom,
-          ]}>
-          {({pressed}) => (
-            <Text style={styles.text}>{pressed ? 'Pressed!' : 'Press Me'}</Text>
-          )}
-        </Pressable>
-        <View style={styles.logBox}>
-          <Text testID="pressable_press_console">{textLog}</Text>
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  text: {
-    fontSize: 16,
-  },
-  wrapperCustom: {
-    borderRadius: 8,
-    padding: 6,
-  },
-  logBox: {
-    padding: 20,
-    margin: 10,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: '#f0f0f0',
-    backgroundColor: '#f9f9f9',
-  },
-});
-
-export default App;
-```
-
-## Props
-
-### `android_disableSound` <div className="label android">Android</div>
-
-If true, doesn't play Android system sound on press.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
-### `android_ripple` <div className="label android">Android</div>
-
-Enables the Android ripple effect and configures its properties.
-
-| Type                                   |
-| -------------------------------------- |
-| [RippleConfig](pressable#rippleconfig) |
-
-### `children`
-
-Either children or a function that receives a boolean reflecting whether the component is currently pressed.
-
-| Type                     |
-| ------------------------ |
-| [React Node](react-node) |
-
-### `unstable_pressDelay`
-
-Duration (in milliseconds) to wait after press down before calling `onPressIn`.
-
-| Type   |
-| ------ |
-| number |
-
-### `delayLongPress`
-
-Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
-
-| Type   | Default |
-| ------ | ------- |
-| number | `500`   |
-
-### `disabled`
-
-Whether the press behavior is disabled.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
-### `hitSlop`
-
-Sets additional distance outside of element in which a press can be detected.
-
-| Type                   |
-| ---------------------- |
-| [Rect](rect) or number |
-
-### `onHoverIn`
-
-Called when the hover is activated to provide visual feedback.
-
-| Type                                                                                                      |
-| --------------------------------------------------------------------------------------------------------- |
-| `md ({ nativeEvent: [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) }) => void` |
-
-### `onHoverOut`
-
-Called when the hover is deactivated to undo visual feedback.
-
-| Type                                                                                                      |
-| --------------------------------------------------------------------------------------------------------- |
-| `md ({ nativeEvent: [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) }) => void` |
-
-### `onLongPress`
-
-Called if the time after `onPressIn` lasts longer than 500 milliseconds. This time period can be customized with [`delayLongPress`](#delaylongpress).
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
-### `onPress`
-
-Called after `onPressOut`.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
-### `onPressIn`
-
-Called immediately when a touch is engaged, before `onPressOut` and `onPress`.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
-### `onPressMove`
-
-Called when the press location moves.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
-### `onPressOut`
-
-Called when a touch is released.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
-### `pressRetentionOffset`
-
-Additional distance outside of this view in which a touch is considered a press before `onPressOut` is triggered.
-
-| Type                   | Default                                      |
-| ---------------------- | -------------------------------------------- |
-| [Rect](rect) or number | `{bottom: 30, left: 20, right: 20, top: 20}` |
-
-### `style`
-
-Either view styles or a function that receives a boolean reflecting whether the component is currently pressed and returns view styles.
-
-| Type                                                                                            |
-| ----------------------------------------------------------------------------------------------- |
-| [View Style](view-style-props) or `md ({ pressed: boolean }) => [View Style](view-style-props)` |
-
-### `testOnly_pressed`
-
-Used only for documentation or testing (e.g. snapshot testing).
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
-## Type Definitions
-
-### RippleConfig
-
-Ripple effect configuration for the `android_ripple` property.
-
-| Type   |
-| ------ |
-| object |
-
-**Properties:**
-
-| Name       | Type            | Required | Description                                                                                                                                                                                                                                                  |
-| ---------- | --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| color      | [color](colors) | No       | Defines the color of the ripple effect.                                                                                                                                                                                                                      |
-| borderless | boolean         | No       | Defines if ripple effect should not include border.                                                                                                                                                                                                          |
-| radius     | number          | No       | Defines the radius of the ripple effect.                                                                                                                                                                                                                     |
-| foreground | boolean         | No       | Set to true to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them. |
+---
+id: pressable
+title: Pressable
+---
+
+Pressable is a Core Component wrapper that can detect various stages of press interactions on any of its defined children.
+
+```tsx
+<Pressable onPress={onPressFunction}>
+  <Text>I'm pressable!</Text>
+</Pressable>
+```
+
+## How it works
+
+On an element wrapped by `Pressable`:
+
+- [`onPressIn`](#onpressin) is called when a press is activated.
+- [`onPressOut`](#onpressout) is called when the press gesture is deactivated.
+
+After pressing [`onPressIn`](#onpressin), one of two things will happen:
+
+1. The person will remove their finger, triggering [`onPressOut`](#onpressout) followed by [`onPress`](#onpress).
+2. If the person leaves their finger longer than 500 milliseconds before removing it, [`onLongPress`](#onlongpress) is triggered. ([`onPressOut`](#onpressout) will still fire when they remove their finger.)
+
+<img src="/docs/assets/d_pressable_pressing.svg" width="1000" alt="Diagram of the onPress events in sequence." />
+
+Fingers are not the most precise instruments, and it is common for users to accidentally activate the wrong element or miss the activation area. To help, `Pressable` has an optional `HitRect` you can use to define how far a touch can register away from the wrapped element. Presses can start anywhere within a `HitRect`.
+
+`PressRect` allows presses to move beyond the element and its `HitRect` while maintaining activation and being eligible for a "press"—think of sliding your finger slowly away from a button you're pressing down on.
+
+:::note
+The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
+:::
+
+<figure>
+  <img src="/docs/assets/d_pressable_anatomy.svg" width="1000" alt="Diagram of HitRect and PressRect and how they work." />
+  <figcaption>
+    You can set <code>HitRect</code> with <code>hitSlop</code> and set <code>PressRect</code> with <code>pressRetentionOffset</code>.
+  </figcaption>
+</figure>
+
+:::info
+`Pressable` uses React Native's `Pressability` API. For more information around the state machine flow of Pressability and how it works, check out the implementation for [Pressability](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Pressability/Pressability.js#L350).
+:::
+
+## Example
+
+```SnackPlayer name=Pressable
+import {useState} from 'react';
+import {Pressable, StyleSheet, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [timesPressed, setTimesPressed] = useState(0);
+
+  let textLog = '';
+  if (timesPressed > 1) {
+    textLog = timesPressed + 'x onPress';
+  } else if (timesPressed > 0) {
+    textLog = 'onPress';
+  }
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Pressable
+          onPress={() => {
+            setTimesPressed(current => current + 1);
+          }}
+          style={({pressed}) => [
+            {
+              backgroundColor: pressed ? 'rgb(210, 230, 255)' : 'white',
+            },
+            styles.wrapperCustom,
+          ]}>
+          {({pressed}) => (
+            <Text style={styles.text}>{pressed ? 'Pressed!' : 'Press Me'}</Text>
+          )}
+        </Pressable>
+        <View style={styles.logBox}>
+          <Text testID="pressable_press_console">{textLog}</Text>
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 16,
+  },
+  wrapperCustom: {
+    borderRadius: 8,
+    padding: 6,
+  },
+  logBox: {
+    padding: 20,
+    margin: 10,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: '#f0f0f0',
+    backgroundColor: '#f9f9f9',
+  },
+});
+
+export default App;
+```
+
+## Props
+
+### `android_disableSound` <div className="label android">Android</div>
+
+If true, doesn't play Android system sound on press.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+### `android_ripple` <div className="label android">Android</div>
+
+Enables the Android ripple effect and configures its properties.
+
+| Type                                   |
+| -------------------------------------- |
+| [RippleConfig](pressable#rippleconfig) |
+
+### `children`
+
+Either children or a function that receives a boolean reflecting whether the component is currently pressed.
+
+| Type                     |
+| ------------------------ |
+| [React Node](react-node) |
+
+### `unstable_pressDelay`
+
+Duration (in milliseconds) to wait after press down before calling `onPressIn`.
+
+| Type   |
+| ------ |
+| number |
+
+### `delayLongPress`
+
+Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
+
+| Type   | Default |
+| ------ | ------- |
+| number | `500`   |
+
+### `disabled`
+
+Whether the press behavior is disabled.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+### `hitSlop`
+
+Sets additional distance outside of element in which a press can be detected.
+
+| Type                   |
+| ---------------------- |
+| [Rect](rect) or number |
+
+### `onHoverIn`
+
+Called when the hover is activated to provide visual feedback.
+
+| Type                                                                                                      |
+| --------------------------------------------------------------------------------------------------------- |
+| `md ({ nativeEvent: [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) }) => void` |
+
+### `onHoverOut`
+
+Called when the hover is deactivated to undo visual feedback.
+
+| Type                                                                                                      |
+| --------------------------------------------------------------------------------------------------------- |
+| `md ({ nativeEvent: [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) }) => void` |
+
+### `onLongPress`
+
+Called if the time after `onPressIn` lasts longer than 500 milliseconds. This time period can be customized with [`delayLongPress`](#delaylongpress).
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+### `onPress`
+
+Called after `onPressOut`.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+### `onPressIn`
+
+Called immediately when a touch is engaged, before `onPressOut` and `onPress`.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+### `onPressMove`
+
+Called when the press location moves.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+### `onPressOut`
+
+Called when a touch is released.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+### `pressRetentionOffset`
+
+Additional distance outside of this view in which a touch is considered a press before `onPressOut` is triggered.
+
+| Type                   | Default                                      |
+| ---------------------- | -------------------------------------------- |
+| [Rect](rect) or number | `{bottom: 30, left: 20, right: 20, top: 20}` |
+
+### `style`
+
+Either view styles or a function that receives a boolean reflecting whether the component is currently pressed and returns view styles.
+
+| Type                                                                                            |
+| ----------------------------------------------------------------------------------------------- |
+| [View Style](view-style-props) or `md ({ pressed: boolean }) => [View Style](view-style-props)` |
+
+### `testOnly_pressed`
+
+Used only for documentation or testing (e.g. snapshot testing).
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+## Type Definitions
+
+### RippleConfig
+
+Ripple effect configuration for the `android_ripple` property.
+
+| Type   |
+| ------ |
+| object |
+
+**Properties:**
+
+| Name       | Type            | Required | Description                                                                                                                                                                                                                                                  |
+| ---------- | --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| color      | [color](colors) | No       | Defines the color of the ripple effect.                                                                                                                                                                                                                      |
+| borderless | boolean         | No       | Defines if ripple effect should not include border.                                                                                                                                                                                                          |
+| radius     | number          | No       | Defines the radius of the ripple effect.                                                                                                                                                                                                                     |
+| foreground | boolean         | No       | Set to true to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them. |
diff --git a/website/versioned_docs/version-0.85/progressbarandroid.md b/website/versioned_docs/version-0.85/progressbarandroid.md
index d26fb2038d6..a08adfae637 100644
--- a/website/versioned_docs/version-0.85/progressbarandroid.md
+++ b/website/versioned_docs/version-0.85/progressbarandroid.md
@@ -12,7 +12,6 @@ Android-only React component used to indicate that the app is loading or there i
 ### Example
 
 ```SnackPlayer name=ProgressBarAndroid&supportedPlatforms=android
-import React from 'react';
 import {View, StyleSheet, ProgressBarAndroid, Text} from 'react-native';
 
 const App = () => {
diff --git a/website/versioned_docs/version-0.85/props.md b/website/versioned_docs/version-0.85/props.md
index 490eb214632..8b24d6dd9f1 100644
--- a/website/versioned_docs/version-0.85/props.md
+++ b/website/versioned_docs/version-0.85/props.md
@@ -10,7 +10,6 @@ Most components can be customized when they are created, with different paramete
 For example, one basic React Native component is the `Image`. When you create an image, you can use a prop named `source` to control what image it shows.
 
 ```SnackPlayer name=Props
-import React from 'react';
 import {Image} from 'react-native';
 
 const Bananas = () => {
@@ -33,7 +32,6 @@ Your own components can also use `props`. This lets you make a single component
 <TabItem value="javascript">
 
 ```SnackPlayer name=Props&ext=js
-import React from 'react';
 import {Text, View} from 'react-native';
 
 const Greeting = props => {
@@ -61,7 +59,6 @@ export default LotsOfGreetings;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Props&ext=tsx
-import React from 'react';
 import {Text, View} from 'react-native';
 
 type GreetingProps = {
diff --git a/website/versioned_docs/version-0.85/refreshcontrol.md b/website/versioned_docs/version-0.85/refreshcontrol.md
index 7f7faab6744..f65d65a0036 100644
--- a/website/versioned_docs/version-0.85/refreshcontrol.md
+++ b/website/versioned_docs/version-0.85/refreshcontrol.md
@@ -1,167 +1,167 @@
----
-id: refreshcontrol
-title: RefreshControl
----
-
-This component is used inside a ScrollView or ListView to add pull to refresh functionality. When the ScrollView is at `scrollY: 0`, swiping down triggers an `onRefresh` event.
-
-## Example
-
-```SnackPlayer name=RefreshControl&supportedPlatforms=ios,android
-import React from 'react';
-import {RefreshControl, ScrollView, StyleSheet, Text} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [refreshing, setRefreshing] = React.useState(false);
-
-  const onRefresh = React.useCallback(() => {
-    setRefreshing(true);
-    setTimeout(() => {
-      setRefreshing(false);
-    }, 2000);
-  }, []);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <ScrollView
-          contentContainerStyle={styles.scrollView}
-          refreshControl={
-            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-          }>
-          <Text>Pull down to see RefreshControl indicator</Text>
-        </ScrollView>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  scrollView: {
-    flex: 1,
-    backgroundColor: 'pink',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-
-export default App;
-```
-
-:::note
-`refreshing` is a controlled prop, this is why it needs to be set to `true` in the `onRefresh` function otherwise the refresh indicator will stop immediately.
-:::
-
----
-
-# Reference
-
-## Props
-
-### [View Props](view.md#props)
-
-Inherits [View Props](view.md#props).
-
----
-
-### <div className="label required basic">Required</div>**`refreshing`**
-
-Whether the view should be indicating an active refresh.
-
-| Type    |
-| ------- |
-| boolean |
-
----
-
-### `colors` <div className="label android">Android</div>
-
-The colors (at least one) that will be used to draw the refresh indicator.
-
-| Type                         |
-| ---------------------------- |
-| array of [colors](colors.md) |
-
----
-
-### `enabled` <div className="label android">Android</div>
-
-Whether the pull to refresh functionality is enabled.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `true`  |
-
----
-
-### `onRefresh`
-
-Called when the view starts refreshing.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `progressBackgroundColor` <div className="label android">Android</div>
-
-The background color of the refresh indicator.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `progressViewOffset`
-
-Progress view top offset.
-
-| Type   | Default |
-| ------ | ------- |
-| number | `0`     |
-
----
-
-### `size` <div className="label android">Android</div>
-
-Size of the refresh indicator.
-
-| Type                         | Default     |
-| ---------------------------- | ----------- |
-| enum(`'default'`, `'large'`) | `'default'` |
-
----
-
-### `tintColor` <div className="label ios">iOS</div>
-
-The color of the refresh indicator.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `title` <div className="label ios">iOS</div>
-
-The title displayed under the refresh indicator.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `titleColor` <div className="label ios">iOS</div>
-
-The color of the refresh indicator title.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
+---
+id: refreshcontrol
+title: RefreshControl
+---
+
+This component is used inside a ScrollView or ListView to add pull to refresh functionality. When the ScrollView is at `scrollY: 0`, swiping down triggers an `onRefresh` event.
+
+## Example
+
+```SnackPlayer name=RefreshControl&supportedPlatforms=ios,android
+import {useCallback, useState} from 'react';
+import {RefreshControl, ScrollView, StyleSheet, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [refreshing, setRefreshing] = useState(false);
+
+  const onRefresh = useCallback(() => {
+    setRefreshing(true);
+    setTimeout(() => {
+      setRefreshing(false);
+    }, 2000);
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <ScrollView
+          contentContainerStyle={styles.scrollView}
+          refreshControl={
+            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+          }>
+          <Text>Pull down to see RefreshControl indicator</Text>
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollView: {
+    flex: 1,
+    backgroundColor: 'pink',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default App;
+```
+
+:::note
+`refreshing` is a controlled prop, this is why it needs to be set to `true` in the `onRefresh` function otherwise the refresh indicator will stop immediately.
+:::
+
+---
+
+# Reference
+
+## Props
+
+### [View Props](view.md#props)
+
+Inherits [View Props](view.md#props).
+
+---
+
+### <div className="label required basic">Required</div>**`refreshing`**
+
+Whether the view should be indicating an active refresh.
+
+| Type    |
+| ------- |
+| boolean |
+
+---
+
+### `colors` <div className="label android">Android</div>
+
+The colors (at least one) that will be used to draw the refresh indicator.
+
+| Type                         |
+| ---------------------------- |
+| array of [colors](colors.md) |
+
+---
+
+### `enabled` <div className="label android">Android</div>
+
+Whether the pull to refresh functionality is enabled.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `true`  |
+
+---
+
+### `onRefresh`
+
+Called when the view starts refreshing.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `progressBackgroundColor` <div className="label android">Android</div>
+
+The background color of the refresh indicator.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `progressViewOffset`
+
+Progress view top offset.
+
+| Type   | Default |
+| ------ | ------- |
+| number | `0`     |
+
+---
+
+### `size` <div className="label android">Android</div>
+
+Size of the refresh indicator.
+
+| Type                         | Default     |
+| ---------------------------- | ----------- |
+| enum(`'default'`, `'large'`) | `'default'` |
+
+---
+
+### `tintColor` <div className="label ios">iOS</div>
+
+The color of the refresh indicator.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `title` <div className="label ios">iOS</div>
+
+The title displayed under the refresh indicator.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `titleColor` <div className="label ios">iOS</div>
+
+The color of the refresh indicator title.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
diff --git a/website/versioned_docs/version-0.85/safeareaview.md b/website/versioned_docs/version-0.85/safeareaview.md
index 8da4485ff12..1298898b64e 100644
--- a/website/versioned_docs/version-0.85/safeareaview.md
+++ b/website/versioned_docs/version-0.85/safeareaview.md
@@ -16,7 +16,6 @@ The purpose of `SafeAreaView` is to render content within the safe area boundari
 To use, wrap your top level view with a `SafeAreaView` with a `flex: 1` style applied to it. You may also want to use a background color that matches your application's design.
 
 ```SnackPlayer name=SafeAreaView&supportedPlatforms=ios
-import React from 'react';
 import {StyleSheet, Text, SafeAreaView} from 'react-native';
 
 const App = () => {
diff --git a/website/versioned_docs/version-0.85/scrollview.md b/website/versioned_docs/version-0.85/scrollview.md
index f24d99073cc..aec1d79a36b 100644
--- a/website/versioned_docs/version-0.85/scrollview.md
+++ b/website/versioned_docs/version-0.85/scrollview.md
@@ -22,7 +22,6 @@ This is where `FlatList` comes into play. `FlatList` renders items lazily, when
 ## Example
 
 ```SnackPlayer name=ScrollView%20Example
-import React from 'react';
 import {StyleSheet, Text, ScrollView, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.85/sectionlist.md b/website/versioned_docs/version-0.85/sectionlist.md
index d0e9519a301..ead40b211b9 100644
--- a/website/versioned_docs/version-0.85/sectionlist.md
+++ b/website/versioned_docs/version-0.85/sectionlist.md
@@ -21,7 +21,6 @@ If you don't need section support and want a simpler interface, use [`<FlatList>
 ## Example
 
 ```SnackPlayer name=SectionList%20Example
-import React from 'react';
 import {StyleSheet, Text, View, SectionList, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.85/settings.md b/website/versioned_docs/version-0.85/settings.md
index 01c0533d813..af0136d8257 100644
--- a/website/versioned_docs/version-0.85/settings.md
+++ b/website/versioned_docs/version-0.85/settings.md
@@ -1,103 +1,103 @@
----
-id: settings
-title: Settings
----
-
-`Settings` serves as a wrapper for [`NSUserDefaults`](https://developer.apple.com/documentation/foundation/nsuserdefaults), a persistent key-value store available only on iOS.
-
-## Example
-
-```SnackPlayer name=Settings%20Example&supportedPlatforms=ios
-import React, {useState} from 'react';
-import {Button, Settings, StyleSheet, Text} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [data, setData] = useState(() => Settings.get('data'));
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>Stored value:</Text>
-        <Text style={styles.value}>{data}</Text>
-        <Button
-          onPress={() => {
-            Settings.set({data: 'React'});
-            setData(Settings.get('data'));
-          }}
-          title="Store 'React'"
-        />
-        <Button
-          onPress={() => {
-            Settings.set({data: 'Native'});
-            setData(Settings.get('data'));
-          }}
-          title="Store 'Native'"
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  value: {
-    fontSize: 24,
-    marginVertical: 12,
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Methods
-
-### `clearWatch()`
-
-```tsx
-static clearWatch(watchId: number);
-```
-
-`watchId` is the number returned by `watchKeys()` when the subscription was originally configured.
-
----
-
-### `get()`
-
-```tsx
-static get(key: string): any;
-```
-
-Get the current value for a given `key` in `NSUserDefaults`.
-
----
-
-### `set()`
-
-```tsx
-static set(settings: Record<string, any>);
-```
-
-Set one or more values in `NSUserDefaults`.
-
----
-
-### `watchKeys()`
-
-```tsx
-static watchKeys(keys: string | array<string>, callback: () => void): number;
-```
-
-Subscribe to be notified when the value for any of the keys specified by the `keys` parameter has been changed in `NSUserDefaults`. Returns a `watchId` number that may be used with `clearWatch()` to unsubscribe.
-
-:::note
-`watchKeys()` by design ignores internal `set()` calls and fires callback only on changes preformed outside of React Native code.
-:::
+---
+id: settings
+title: Settings
+---
+
+`Settings` serves as a wrapper for [`NSUserDefaults`](https://developer.apple.com/documentation/foundation/nsuserdefaults), a persistent key-value store available only on iOS.
+
+## Example
+
+```SnackPlayer name=Settings%20Example&supportedPlatforms=ios
+import {useState} from 'react';
+import {Button, Settings, StyleSheet, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [data, setData] = useState(() => Settings.get('data'));
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>Stored value:</Text>
+        <Text style={styles.value}>{data}</Text>
+        <Button
+          onPress={() => {
+            Settings.set({data: 'React'});
+            setData(Settings.get('data'));
+          }}
+          title="Store 'React'"
+        />
+        <Button
+          onPress={() => {
+            Settings.set({data: 'Native'});
+            setData(Settings.get('data'));
+          }}
+          title="Store 'Native'"
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  value: {
+    fontSize: 24,
+    marginVertical: 12,
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `clearWatch()`
+
+```tsx
+static clearWatch(watchId: number);
+```
+
+`watchId` is the number returned by `watchKeys()` when the subscription was originally configured.
+
+---
+
+### `get()`
+
+```tsx
+static get(key: string): any;
+```
+
+Get the current value for a given `key` in `NSUserDefaults`.
+
+---
+
+### `set()`
+
+```tsx
+static set(settings: Record<string, any>);
+```
+
+Set one or more values in `NSUserDefaults`.
+
+---
+
+### `watchKeys()`
+
+```tsx
+static watchKeys(keys: string | array<string>, callback: () => void): number;
+```
+
+Subscribe to be notified when the value for any of the keys specified by the `keys` parameter has been changed in `NSUserDefaults`. Returns a `watchId` number that may be used with `clearWatch()` to unsubscribe.
+
+:::note
+`watchKeys()` by design ignores internal `set()` calls and fires callback only on changes preformed outside of React Native code.
+:::
diff --git a/website/versioned_docs/version-0.85/shadow-props.md b/website/versioned_docs/version-0.85/shadow-props.md
index d5e8a037059..91553622bd3 100644
--- a/website/versioned_docs/version-0.85/shadow-props.md
+++ b/website/versioned_docs/version-0.85/shadow-props.md
@@ -1,285 +1,285 @@
----
-id: shadow-props
-title: Shadow Props
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=js&dependencies=@react-native-community/slider
-import React, {useState} from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-import Slider from '@react-native-community/slider';
-
-const ShadowPropSlider = ({label, value, ...props}) => {
-  return (
-    <>
-      <Text>
-        {label} ({value.toFixed(2)})
-      </Text>
-      <Slider step={1} value={value} {...props} />
-    </>
-  );
-};
-
-const App = () => {
-  const [shadowOffsetWidth, setShadowOffsetWidth] = useState(0);
-  const [shadowOffsetHeight, setShadowOffsetHeight] = useState(0);
-  const [shadowRadius, setShadowRadius] = useState(0);
-  const [shadowOpacity, setShadowOpacity] = useState(0.1);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View
-          style={[
-            styles.square,
-            {
-              shadowOffset: {
-                width: shadowOffsetWidth,
-                height: -shadowOffsetHeight,
-              },
-              shadowOpacity,
-              shadowRadius,
-            },
-          ]}
-        />
-        <View style={styles.controls}>
-          <ShadowPropSlider
-            label="shadowOffset - X"
-            minimumValue={-50}
-            maximumValue={50}
-            value={shadowOffsetWidth}
-            onValueChange={setShadowOffsetWidth}
-          />
-          <ShadowPropSlider
-            label="shadowOffset - Y"
-            minimumValue={-50}
-            maximumValue={50}
-            value={shadowOffsetHeight}
-            onValueChange={setShadowOffsetHeight}
-          />
-          <ShadowPropSlider
-            label="shadowRadius"
-            minimumValue={0}
-            maximumValue={100}
-            value={shadowRadius}
-            onValueChange={setShadowRadius}
-          />
-          <ShadowPropSlider
-            label="shadowOpacity"
-            minimumValue={0}
-            maximumValue={1}
-            step={0.05}
-            value={shadowOpacity}
-            onValueChange={val => setShadowOpacity(val)}
-          />
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'space-around',
-    backgroundColor: '#ecf0f1',
-    padding: 8,
-  },
-  square: {
-    alignSelf: 'center',
-    backgroundColor: 'white',
-    borderRadius: 4,
-    height: 150,
-    shadowColor: 'black',
-    width: 150,
-  },
-  controls: {
-    paddingHorizontal: 12,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=tsx&dependencies=@react-native-community/slider
-import React, {useState} from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-import Slider, {SliderProps} from '@react-native-community/slider';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-type ShadowPropSliderProps = SliderProps & {
-  label: string;
-};
-
-const ShadowPropSlider = ({label, value, ...props}: ShadowPropSliderProps) => {
-  return (
-    <>
-      <Text>
-        {label} ({value?.toFixed(2)})
-      </Text>
-      <Slider step={1} value={value} {...props} />
-    </>
-  );
-};
-
-const App = () => {
-  const [shadowOffsetWidth, setShadowOffsetWidth] = useState(0);
-  const [shadowOffsetHeight, setShadowOffsetHeight] = useState(0);
-  const [shadowRadius, setShadowRadius] = useState(0);
-  const [shadowOpacity, setShadowOpacity] = useState(0.1);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View
-          style={[
-            styles.square,
-            {
-              shadowOffset: {
-                width: shadowOffsetWidth,
-                height: -shadowOffsetHeight,
-              },
-              shadowOpacity,
-              shadowRadius,
-            },
-          ]}
-        />
-        <View style={styles.controls}>
-          <ShadowPropSlider
-            label="shadowOffset - X"
-            minimumValue={-50}
-            maximumValue={50}
-            value={shadowOffsetWidth}
-            onValueChange={setShadowOffsetWidth}
-          />
-          <ShadowPropSlider
-            label="shadowOffset - Y"
-            minimumValue={-50}
-            maximumValue={50}
-            value={shadowOffsetHeight}
-            onValueChange={setShadowOffsetHeight}
-          />
-          <ShadowPropSlider
-            label="shadowRadius"
-            minimumValue={0}
-            maximumValue={100}
-            value={shadowRadius}
-            onValueChange={setShadowRadius}
-          />
-          <ShadowPropSlider
-            label="shadowOpacity"
-            minimumValue={0}
-            maximumValue={1}
-            step={0.05}
-            value={shadowOpacity}
-            onValueChange={val => setShadowOpacity(val)}
-          />
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'space-around',
-    backgroundColor: '#ecf0f1',
-    padding: 8,
-  },
-  square: {
-    alignSelf: 'center',
-    backgroundColor: 'white',
-    borderRadius: 4,
-    height: 150,
-    shadowColor: 'black',
-    width: 150,
-  },
-  controls: {
-    paddingHorizontal: 12,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
----
-
-# Reference
-
-There are 3 sets of shadow APIs in React Native:
-
-- `boxShadow`: A View style prop and a spec-compliant implementation of the [web style prop of the same name](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow).
-- `dropShadow`: A specific filter function available as part of the [`filter`](./view-style-props#filter) View style prop.
-- Various `shadow` props (`shadowColor`, `shadowOffset`, `shadowOpacity`, `shadowRadius`): These map directly to their native counterparts exposed by the platform-level APIs.
-
-The difference between `dropShadow` and `boxShadow` are as follows:
-
-- `dropShadow` exists as part of `filter`, whereas `boxShadow` is a standalone style prop.
-- `dropShadow` is an alpha mask, so only pixels with a positive alpha value will "cast" a shadow. `boxShadow` will cast around the border box of the element no matter it's contents (unless it is inset).
-- `dropShadow` is only available on Android, `boxShadow` is available on iOS and Android.
-- `dropShadow` cannot be inset like `boxShadow`.
-- `dropShadow` does not have the `spreadDistance` argument like `boxShadow`.
-
-Both `boxShadow` and `dropShadow` are generally more capable than the `shadow` props. The `shadow` props, however, map to native platform-level APIs, so if you only need a straightforward shadow these props are recommended. Note that only `shadowColor` works on both Android and iOS, all other `shadow` props only work on iOS.
-
-## Props
-
-### `boxShadow`
-
-See [View Style Props](./view-style-props#boxshadow) for documentation.
-
-### `dropShadow` <div className="label android">Android</div>
-
-See [View Style Props](./view-style-props#filter) for documentation.
-
-### `shadowColor`
-
-Sets the drop shadow color.
-
-This property will only work on Android API 28 and above. For similar functionality on lower Android APIs, use the [`elevation` property](view-style-props#elevation-android).
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `shadowOffset` <div className="label ios">iOS</div>
-
-Sets the drop shadow offset.
-
-| Type                                     |
-| ---------------------------------------- |
-| object: `{width: number,height: number}` |
-
----
-
-### `shadowOpacity` <div className="label ios">iOS</div>
-
-Sets the drop shadow opacity (multiplied by the color's alpha component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `shadowRadius` <div className="label ios">iOS</div>
-
-Sets the drop shadow blur radius.
-
-| Type   |
-| ------ |
-| number |
+---
+id: shadow-props
+title: Shadow Props
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=js&dependencies=@react-native-community/slider
+import {useState} from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+import Slider from '@react-native-community/slider';
+
+const ShadowPropSlider = ({label, value, ...props}) => {
+  return (
+    <>
+      <Text>
+        {label} ({value.toFixed(2)})
+      </Text>
+      <Slider step={1} value={value} {...props} />
+    </>
+  );
+};
+
+const App = () => {
+  const [shadowOffsetWidth, setShadowOffsetWidth] = useState(0);
+  const [shadowOffsetHeight, setShadowOffsetHeight] = useState(0);
+  const [shadowRadius, setShadowRadius] = useState(0);
+  const [shadowOpacity, setShadowOpacity] = useState(0.1);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View
+          style={[
+            styles.square,
+            {
+              shadowOffset: {
+                width: shadowOffsetWidth,
+                height: -shadowOffsetHeight,
+              },
+              shadowOpacity,
+              shadowRadius,
+            },
+          ]}
+        />
+        <View style={styles.controls}>
+          <ShadowPropSlider
+            label="shadowOffset - X"
+            minimumValue={-50}
+            maximumValue={50}
+            value={shadowOffsetWidth}
+            onValueChange={setShadowOffsetWidth}
+          />
+          <ShadowPropSlider
+            label="shadowOffset - Y"
+            minimumValue={-50}
+            maximumValue={50}
+            value={shadowOffsetHeight}
+            onValueChange={setShadowOffsetHeight}
+          />
+          <ShadowPropSlider
+            label="shadowRadius"
+            minimumValue={0}
+            maximumValue={100}
+            value={shadowRadius}
+            onValueChange={setShadowRadius}
+          />
+          <ShadowPropSlider
+            label="shadowOpacity"
+            minimumValue={0}
+            maximumValue={1}
+            step={0.05}
+            value={shadowOpacity}
+            onValueChange={val => setShadowOpacity(val)}
+          />
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'space-around',
+    backgroundColor: '#ecf0f1',
+    padding: 8,
+  },
+  square: {
+    alignSelf: 'center',
+    backgroundColor: 'white',
+    borderRadius: 4,
+    height: 150,
+    shadowColor: 'black',
+    width: 150,
+  },
+  controls: {
+    paddingHorizontal: 12,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=tsx&dependencies=@react-native-community/slider
+import {useState} from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+import Slider, {SliderProps} from '@react-native-community/slider';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+type ShadowPropSliderProps = SliderProps & {
+  label: string;
+};
+
+const ShadowPropSlider = ({label, value, ...props}: ShadowPropSliderProps) => {
+  return (
+    <>
+      <Text>
+        {label} ({value?.toFixed(2)})
+      </Text>
+      <Slider step={1} value={value} {...props} />
+    </>
+  );
+};
+
+const App = () => {
+  const [shadowOffsetWidth, setShadowOffsetWidth] = useState(0);
+  const [shadowOffsetHeight, setShadowOffsetHeight] = useState(0);
+  const [shadowRadius, setShadowRadius] = useState(0);
+  const [shadowOpacity, setShadowOpacity] = useState(0.1);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View
+          style={[
+            styles.square,
+            {
+              shadowOffset: {
+                width: shadowOffsetWidth,
+                height: -shadowOffsetHeight,
+              },
+              shadowOpacity,
+              shadowRadius,
+            },
+          ]}
+        />
+        <View style={styles.controls}>
+          <ShadowPropSlider
+            label="shadowOffset - X"
+            minimumValue={-50}
+            maximumValue={50}
+            value={shadowOffsetWidth}
+            onValueChange={setShadowOffsetWidth}
+          />
+          <ShadowPropSlider
+            label="shadowOffset - Y"
+            minimumValue={-50}
+            maximumValue={50}
+            value={shadowOffsetHeight}
+            onValueChange={setShadowOffsetHeight}
+          />
+          <ShadowPropSlider
+            label="shadowRadius"
+            minimumValue={0}
+            maximumValue={100}
+            value={shadowRadius}
+            onValueChange={setShadowRadius}
+          />
+          <ShadowPropSlider
+            label="shadowOpacity"
+            minimumValue={0}
+            maximumValue={1}
+            step={0.05}
+            value={shadowOpacity}
+            onValueChange={val => setShadowOpacity(val)}
+          />
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'space-around',
+    backgroundColor: '#ecf0f1',
+    padding: 8,
+  },
+  square: {
+    alignSelf: 'center',
+    backgroundColor: 'white',
+    borderRadius: 4,
+    height: 150,
+    shadowColor: 'black',
+    width: 150,
+  },
+  controls: {
+    paddingHorizontal: 12,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+---
+
+# Reference
+
+There are 3 sets of shadow APIs in React Native:
+
+- `boxShadow`: A View style prop and a spec-compliant implementation of the [web style prop of the same name](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow).
+- `dropShadow`: A specific filter function available as part of the [`filter`](./view-style-props#filter) View style prop.
+- Various `shadow` props (`shadowColor`, `shadowOffset`, `shadowOpacity`, `shadowRadius`): These map directly to their native counterparts exposed by the platform-level APIs.
+
+The difference between `dropShadow` and `boxShadow` are as follows:
+
+- `dropShadow` exists as part of `filter`, whereas `boxShadow` is a standalone style prop.
+- `dropShadow` is an alpha mask, so only pixels with a positive alpha value will "cast" a shadow. `boxShadow` will cast around the border box of the element no matter it's contents (unless it is inset).
+- `dropShadow` is only available on Android, `boxShadow` is available on iOS and Android.
+- `dropShadow` cannot be inset like `boxShadow`.
+- `dropShadow` does not have the `spreadDistance` argument like `boxShadow`.
+
+Both `boxShadow` and `dropShadow` are generally more capable than the `shadow` props. The `shadow` props, however, map to native platform-level APIs, so if you only need a straightforward shadow these props are recommended. Note that only `shadowColor` works on both Android and iOS, all other `shadow` props only work on iOS.
+
+## Props
+
+### `boxShadow`
+
+See [View Style Props](./view-style-props#boxshadow) for documentation.
+
+### `dropShadow` <div className="label android">Android</div>
+
+See [View Style Props](./view-style-props#filter) for documentation.
+
+### `shadowColor`
+
+Sets the drop shadow color.
+
+This property will only work on Android API 28 and above. For similar functionality on lower Android APIs, use the [`elevation` property](view-style-props#elevation-android).
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `shadowOffset` <div className="label ios">iOS</div>
+
+Sets the drop shadow offset.
+
+| Type                                     |
+| ---------------------------------------- |
+| object: `{width: number,height: number}` |
+
+---
+
+### `shadowOpacity` <div className="label ios">iOS</div>
+
+Sets the drop shadow opacity (multiplied by the color's alpha component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `shadowRadius` <div className="label ios">iOS</div>
+
+Sets the drop shadow blur radius.
+
+| Type   |
+| ------ |
+| number |
diff --git a/website/versioned_docs/version-0.85/share.md b/website/versioned_docs/version-0.85/share.md
index 1fc5823361f..46d0f858435 100644
--- a/website/versioned_docs/version-0.85/share.md
+++ b/website/versioned_docs/version-0.85/share.md
@@ -11,7 +11,6 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con
 <TabItem value="javascript">
 
 ```SnackPlayer name=Example&supportedPlatforms=ios,android&ext=js
-import React from 'react';
 import {Alert, Share, Button} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -51,7 +50,6 @@ export default ShareExample;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Example&supportedPlatforms=ios,android&ext=tsx
-import React from 'react';
 import {Alert, Share, Button} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.85/state.md b/website/versioned_docs/version-0.85/state.md
index bc162f44b40..ebf3ec14336 100644
--- a/website/versioned_docs/version-0.85/state.md
+++ b/website/versioned_docs/version-0.85/state.md
@@ -1,103 +1,103 @@
----
-id: state
-title: State
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-There are two types of data that control a component: `props` and `state`. `props` are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use `state`.
-
-In general, you should initialize `state` in the constructor, and then call `setState` when you want to change it.
-
-For example, let's say we want to make text that blinks all the time. The text itself gets set once when the blinking component gets created, so the text itself is a `prop`. The "whether the text is currently on or off" changes over time, so that should be kept in `state`.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=State&ext=js
-import React, {useState, useEffect} from 'react';
-import {Text, View} from 'react-native';
-
-const Blink = props => {
-  const [isShowingText, setIsShowingText] = useState(true);
-
-  useEffect(() => {
-    const toggle = setInterval(() => {
-      setIsShowingText(!isShowingText);
-    }, 1000);
-
-    return () => clearInterval(toggle);
-  });
-
-  if (!isShowingText) {
-    return null;
-  }
-
-  return <Text>{props.text}</Text>;
-};
-
-const BlinkApp = () => {
-  return (
-    <View style={{marginTop: 50}}>
-      <Blink text="I love to blink" />
-      <Blink text="Yes blinking is so great" />
-      <Blink text="Why did they ever take this out of HTML" />
-      <Blink text="Look at me look at me look at me" />
-    </View>
-  );
-};
-
-export default BlinkApp;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=State&ext=tsx
-import React, {useState, useEffect} from 'react';
-import {Text, View} from 'react-native';
-
-type BlinkProps = {
-  text: string;
-};
-
-const Blink = (props: BlinkProps) => {
-  const [isShowingText, setIsShowingText] = useState(true);
-
-  useEffect(() => {
-    const toggle = setInterval(() => {
-      setIsShowingText(!isShowingText);
-    }, 1000);
-
-    return () => clearInterval(toggle);
-  });
-
-  if (!isShowingText) {
-    return null;
-  }
-
-  return <Text>{props.text}</Text>;
-};
-
-const BlinkApp = () => {
-  return (
-    <View style={{marginTop: 50}}>
-      <Blink text="I love to blink" />
-      <Blink text="Yes blinking is so great" />
-      <Blink text="Why did they ever take this out of HTML" />
-      <Blink text="Look at me look at me look at me" />
-    </View>
-  );
-};
-
-export default BlinkApp;
-```
-
-</TabItem>
-</Tabs>
-
-In a real application, you probably won't be setting state with a timer. You might set state when you have new data from the server, or from user input. You can also use a state container like [Redux](https://redux.js.org/) or [MobX](https://mobx.js.org/) to control your data flow. In that case you would use Redux or MobX to modify your state rather than calling `setState` directly.
-
-When setState is called, BlinkApp will re-render its Component. By calling setState within the Timer, the component will re-render every time the Timer ticks.
-
-State works the same way as it does in React, so for more details on handling state, you can look at the [React.Component API](https://react.dev/reference/react/Component#setstate). At this point, you may have noticed that most of our examples use the default text color. To customize the text color, you will have to [learn about Style](style.md).
+---
+id: state
+title: State
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+There are two types of data that control a component: `props` and `state`. `props` are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use `state`.
+
+In general, you should initialize `state` in the constructor, and then call `setState` when you want to change it.
+
+For example, let's say we want to make text that blinks all the time. The text itself gets set once when the blinking component gets created, so the text itself is a `prop`. The "whether the text is currently on or off" changes over time, so that should be kept in `state`.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=State&ext=js
+import {useState, useEffect} from 'react';
+import {Text, View} from 'react-native';
+
+const Blink = props => {
+  const [isShowingText, setIsShowingText] = useState(true);
+
+  useEffect(() => {
+    const toggle = setInterval(() => {
+      setIsShowingText(!isShowingText);
+    }, 1000);
+
+    return () => clearInterval(toggle);
+  });
+
+  if (!isShowingText) {
+    return null;
+  }
+
+  return <Text>{props.text}</Text>;
+};
+
+const BlinkApp = () => {
+  return (
+    <View style={{marginTop: 50}}>
+      <Blink text="I love to blink" />
+      <Blink text="Yes blinking is so great" />
+      <Blink text="Why did they ever take this out of HTML" />
+      <Blink text="Look at me look at me look at me" />
+    </View>
+  );
+};
+
+export default BlinkApp;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=State&ext=tsx
+import {useState, useEffect} from 'react';
+import {Text, View} from 'react-native';
+
+type BlinkProps = {
+  text: string;
+};
+
+const Blink = (props: BlinkProps) => {
+  const [isShowingText, setIsShowingText] = useState(true);
+
+  useEffect(() => {
+    const toggle = setInterval(() => {
+      setIsShowingText(!isShowingText);
+    }, 1000);
+
+    return () => clearInterval(toggle);
+  });
+
+  if (!isShowingText) {
+    return null;
+  }
+
+  return <Text>{props.text}</Text>;
+};
+
+const BlinkApp = () => {
+  return (
+    <View style={{marginTop: 50}}>
+      <Blink text="I love to blink" />
+      <Blink text="Yes blinking is so great" />
+      <Blink text="Why did they ever take this out of HTML" />
+      <Blink text="Look at me look at me look at me" />
+    </View>
+  );
+};
+
+export default BlinkApp;
+```
+
+</TabItem>
+</Tabs>
+
+In a real application, you probably won't be setting state with a timer. You might set state when you have new data from the server, or from user input. You can also use a state container like [Redux](https://redux.js.org/) or [MobX](https://mobx.js.org/) to control your data flow. In that case you would use Redux or MobX to modify your state rather than calling `setState` directly.
+
+When setState is called, BlinkApp will re-render its Component. By calling setState within the Timer, the component will re-render every time the Timer ticks.
+
+State works the same way as it does in React, so for more details on handling state, you can look at the [React.Component API](https://react.dev/reference/react/Component#setstate). At this point, you may have noticed that most of our examples use the default text color. To customize the text color, you will have to [learn about Style](style.md).
diff --git a/website/versioned_docs/version-0.85/statusbar.md b/website/versioned_docs/version-0.85/statusbar.md
index 93810f7b0e0..97686cf2260 100644
--- a/website/versioned_docs/version-0.85/statusbar.md
+++ b/website/versioned_docs/version-0.85/statusbar.md
@@ -1,513 +1,513 @@
----
-id: statusbar
-title: StatusBar
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-Component to control the app's status bar. The status bar is the zone, typically at the top of the screen, that displays the current time, Wi-Fi and cellular network information, battery level and/or other status icons.
-
-### 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.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=StatusBar%20Component%20Example&supportedPlatforms=android,ios&ext=js
-import React, {useState} from 'react';
-import {
-  Button,
-  Platform,
-  StatusBar,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const STYLES = ['default', 'dark-content', 'light-content'];
-const TRANSITIONS = ['fade', 'slide', 'none'];
-
-const App = () => {
-  const [hidden, setHidden] = useState(false);
-  const [statusBarStyle, setStatusBarStyle] = useState(STYLES[0]);
-  const [statusBarTransition, setStatusBarTransition] = useState(
-    TRANSITIONS[0],
-  );
-
-  const changeStatusBarVisibility = () => setHidden(!hidden);
-
-  const changeStatusBarStyle = () => {
-    const styleId = STYLES.indexOf(statusBarStyle) + 1;
-    if (styleId === STYLES.length) {
-      setStatusBarStyle(STYLES[0]);
-    } else {
-      setStatusBarStyle(STYLES[styleId]);
-    }
-  };
-
-  const changeStatusBarTransition = () => {
-    const transition = TRANSITIONS.indexOf(statusBarTransition) + 1;
-    if (transition === TRANSITIONS.length) {
-      setStatusBarTransition(TRANSITIONS[0]);
-    } else {
-      setStatusBarTransition(TRANSITIONS[transition]);
-    }
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <StatusBar
-          animated={true}
-          backgroundColor="#61dafb"
-          barStyle={statusBarStyle}
-          showHideTransition={statusBarTransition}
-          hidden={hidden}
-        />
-        <Text style={styles.textStyle}>
-          StatusBar Visibility:{'\n'}
-          {hidden ? 'Hidden' : 'Visible'}
-        </Text>
-        <Text style={styles.textStyle}>
-          StatusBar Style:{'\n'}
-          {statusBarStyle}
-        </Text>
-        {Platform.OS === 'ios' ? (
-          <Text style={styles.textStyle}>
-            StatusBar Transition:{'\n'}
-            {statusBarTransition}
-          </Text>
-        ) : null}
-        <View style={styles.buttonsContainer}>
-          <Button
-            title="Toggle StatusBar"
-            onPress={changeStatusBarVisibility}
-          />
-          <Button
-            title="Change StatusBar Style"
-            onPress={changeStatusBarStyle}
-          />
-          {Platform.OS === 'ios' ? (
-            <Button
-              title="Change StatusBar Transition"
-              onPress={changeStatusBarTransition}
-            />
-          ) : null}
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    backgroundColor: '#ECF0F1',
-  },
-  buttonsContainer: {
-    padding: 10,
-  },
-  textStyle: {
-    textAlign: 'center',
-    marginBottom: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=StatusBar%20Component%20Example&supportedPlatforms=android,ios&ext=tsx
-import React, {useState} from 'react';
-import {
-  Button,
-  Platform,
-  StatusBar,
-  StyleSheet,
-  Text,
-  View,
-  StatusBarStyle,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const STYLES = ['default', 'dark-content', 'light-content'] as const;
-const TRANSITIONS = ['fade', 'slide', 'none'] as const;
-
-const App = () => {
-  const [hidden, setHidden] = useState(false);
-  const [statusBarStyle, setStatusBarStyle] = useState<StatusBarStyle>(
-    STYLES[0],
-  );
-  const [statusBarTransition, setStatusBarTransition] = useState<
-    'fade' | 'slide' | 'none'
-  >(TRANSITIONS[0]);
-
-  const changeStatusBarVisibility = () => setHidden(!hidden);
-
-  const changeStatusBarStyle = () => {
-    const styleId = STYLES.indexOf(statusBarStyle) + 1;
-    if (styleId === STYLES.length) {
-      setStatusBarStyle(STYLES[0]);
-    } else {
-      setStatusBarStyle(STYLES[styleId]);
-    }
-  };
-
-  const changeStatusBarTransition = () => {
-    const transition = TRANSITIONS.indexOf(statusBarTransition) + 1;
-    if (transition === TRANSITIONS.length) {
-      setStatusBarTransition(TRANSITIONS[0]);
-    } else {
-      setStatusBarTransition(TRANSITIONS[transition]);
-    }
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <StatusBar
-          animated={true}
-          backgroundColor="#61dafb"
-          barStyle={statusBarStyle}
-          showHideTransition={statusBarTransition}
-          hidden={hidden}
-        />
-        <Text style={styles.textStyle}>
-          StatusBar Visibility:{'\n'}
-          {hidden ? 'Hidden' : 'Visible'}
-        </Text>
-        <Text style={styles.textStyle}>
-          StatusBar Style:{'\n'}
-          {statusBarStyle}
-        </Text>
-        {Platform.OS === 'ios' ? (
-          <Text style={styles.textStyle}>
-            StatusBar Transition:{'\n'}
-            {statusBarTransition}
-          </Text>
-        ) : null}
-        <View style={styles.buttonsContainer}>
-          <Button
-            title="Toggle StatusBar"
-            onPress={changeStatusBarVisibility}
-          />
-          <Button
-            title="Change StatusBar Style"
-            onPress={changeStatusBarStyle}
-          />
-          {Platform.OS === 'ios' ? (
-            <Button
-              title="Change StatusBar Transition"
-              onPress={changeStatusBarTransition}
-            />
-          ) : null}
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    backgroundColor: '#ECF0F1',
-  },
-  buttonsContainer: {
-    padding: 10,
-  },
-  textStyle: {
-    textAlign: 'center',
-    marginBottom: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### 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.
-
----
-
-# Reference
-
-## Constants
-
-### `currentHeight` <div className="label android">Android</div>
-
-The height of the status bar, which includes the notch height, if present.
-
----
-
-## Props
-
-### `animated`
-
-If the transition between status bar property changes should be animated. Supported for `backgroundColor`, `barStyle` and `hidden` properties.
-
-| Type    | Required | Default |
-| ------- | -------- | ------- |
-| boolean | No       | `false` |
-
----
-
-### `backgroundColor` <div className="label android">Android</div>
-
-The background color of the status bar.
-
-:::warning
-Due to edge-to-edge enforcement introduced in Android 15, setting background color of the status bar is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
-:::
-
-| Type            | Required | Default                                                                |
-| --------------- | -------- | ---------------------------------------------------------------------- |
-| [color](colors) | No       | default system StatusBar background color, or `'black'` if not defined |
-
----
-
-### `barStyle`
-
-Sets the color of the status bar text.
-
-On Android, this will only have an impact on API versions 23 and above.
-
-| Type                                       | Required | Default     |
-| ------------------------------------------ | -------- | ----------- |
-| [StatusBarStyle](statusbar#statusbarstyle) | No       | `'default'` |
-
----
-
-### `hidden`
-
-If the status bar is hidden.
-
-| Type    | Required | Default |
-| ------- | -------- | ------- |
-| boolean | No       | `false` |
-
----
-
-### `networkActivityIndicatorVisible` <div className="label ios">iOS</div>
-
-If the network activity indicator should be visible.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
----
-
-### `showHideTransition` <div className="label ios">iOS</div>
-
-The transition effect when showing and hiding the status bar using the `hidden` prop.
-
-| Type                                               | Default  |
-| -------------------------------------------------- | -------- |
-| [StatusBarAnimation](statusbar#statusbaranimation) | `'fade'` |
-
----
-
-### `translucent` <div className="label android">Android</div>
-
-If the status bar is translucent. When translucent is set to `true`, the app will draw under the status bar. This is useful when using a semi transparent status bar color.
-
-:::warning
-Due to edge-to-edge enforcement introduced in Android 15, setting the status bar as translucent is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
-:::
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
-## Methods
-
-### `popStackEntry()`
-
-```tsx
-static popStackEntry(entry: StatusBarProps);
-```
-
-Get and remove the last StatusBar entry from the stack.
-
-**Parameters:**
-
-| Name                                                       | Type | Description                           |
-| ---------------------------------------------------------- | ---- | ------------------------------------- |
-| entry <div className="label basic required">Required</div> | any  | Entry returned from `pushStackEntry`. |
-
----
-
-### `pushStackEntry()`
-
-```tsx
-static pushStackEntry(props: StatusBarProps): StatusBarProps;
-```
-
-Push a StatusBar entry onto the stack. The return value should be passed to `popStackEntry` when complete.
-
-**Parameters:**
-
-| Name                                                       | Type | Description                                                      |
-| ---------------------------------------------------------- | ---- | ---------------------------------------------------------------- |
-| props <div className="label basic required">Required</div> | any  | Object containing the StatusBar props to use in the stack entry. |
-
----
-
-### `replaceStackEntry()`
-
-```tsx
-static replaceStackEntry(
-  entry: StatusBarProps,
-  props: StatusBarProps
-): StatusBarProps;
-```
-
-Replace an existing StatusBar stack entry with new props.
-
-**Parameters:**
-
-| Name                                                       | Type | Description                                                                  |
-| ---------------------------------------------------------- | ---- | ---------------------------------------------------------------------------- |
-| entry <div className="label basic required">Required</div> | any  | Entry returned from `pushStackEntry` to replace.                             |
-| props <div className="label basic required">Required</div> | any  | Object containing the StatusBar props to use in the replacement stack entry. |
-
----
-
-### `setBackgroundColor()` <div className="label android">Android</div>
-
-```tsx
-static setBackgroundColor(color: ColorValue, animated?: boolean);
-```
-
-Set the background color for the status bar.
-
-:::warning
-Due to edge-to-edge enforcement introduced in Android 15, setting background color of the status bar is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
-:::
-
-**Parameters:**
-
-| Name                                                       | Type    | Description               |
-| ---------------------------------------------------------- | ------- | ------------------------- |
-| color <div className="label basic required">Required</div> | string  | Background color.         |
-| animated                                                   | boolean | Animate the style change. |
-
----
-
-### `setBarStyle()`
-
-```tsx
-static setBarStyle(style: StatusBarStyle, animated?: boolean);
-```
-
-Set the status bar style.
-
-**Parameters:**
-
-| Name                                                       | Type                                       | Description               |
-| ---------------------------------------------------------- | ------------------------------------------ | ------------------------- |
-| style <div className="label basic required">Required</div> | [StatusBarStyle](statusbar#statusbarstyle) | Status bar style to set.  |
-| animated                                                   | boolean                                    | Animate the style change. |
-
----
-
-### `setHidden()`
-
-```tsx
-static setHidden(hidden: boolean, animation?: StatusBarAnimation);
-```
-
-Show or hide the status bar.
-
-**Parameters:**
-
-| Name                                                        | Type                                               | Description                                             |
-| ----------------------------------------------------------- | -------------------------------------------------- | ------------------------------------------------------- |
-| hidden <div className="label basic required">Required</div> | boolean                                            | Hide the status bar.                                    |
-| animation <div className="label ios">iOS</div>              | [StatusBarAnimation](statusbar#statusbaranimation) | Animation when changing the status bar hidden property. |
-
----
-
-### 🗑️ `setNetworkActivityIndicatorVisible()` <div className="label ios">iOS</div>
-
-:::warning[Deprecated]
-The status bar network activity indicator is not supported in iOS 13 and later. This will be removed in a future release.
-:::
-
-```tsx
-static setNetworkActivityIndicatorVisible(visible: boolean);
-```
-
-Control the visibility of the network activity indicator.
-
-**Parameters:**
-
-| Name                                                         | Type    | Description         |
-| ------------------------------------------------------------ | ------- | ------------------- |
-| visible <div className="label basic required">Required</div> | boolean | Show the indicator. |
-
----
-
-### `setTranslucent()` <div className="label android">Android</div>
-
-```tsx
-static setTranslucent(translucent: boolean);
-```
-
-Control the translucency of the status bar.
-
-:::warning
-Due to edge-to-edge enforcement introduced in Android 15, setting the status bar as translucent is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
-:::
-
-**Parameters:**
-
-| Name                                                             | Type    | Description         |
-| ---------------------------------------------------------------- | ------- | ------------------- |
-| translucent <div className="label basic required">Required</div> | boolean | Set as translucent. |
-
-## Type Definitions
-
-### StatusBarAnimation
-
-Status bar animation type for transitions on the iOS.
-
-| Type |
-| ---- |
-| enum |
-
-**Constants:**
-
-| Value     | Type   | Description     |
-| --------- | ------ | --------------- |
-| `'fade'`  | string | Fade animation  |
-| `'slide'` | string | Slide animation |
-| `'none'`  | string | No animation    |
-
----
-
-### StatusBarStyle
-
-Status bar style type.
-
-| Type |
-| ---- |
-| enum |
-
-**Constants:**
-
-| Value             | Type   | Description                                                |
-| ----------------- | ------ | ---------------------------------------------------------- |
-| `'default'`       | string | Default status bar style (dark for iOS, light for Android) |
-| `'light-content'` | string | White texts and icons                                      |
-| `'dark-content'`  | string | Dark texts and icons (requires API>=23 on Android)         |
+---
+id: statusbar
+title: StatusBar
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+Component to control the app's status bar. The status bar is the zone, typically at the top of the screen, that displays the current time, Wi-Fi and cellular network information, battery level and/or other status icons.
+
+### 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.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=StatusBar%20Component%20Example&supportedPlatforms=android,ios&ext=js
+import {useState} from 'react';
+import {
+  Button,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const STYLES = ['default', 'dark-content', 'light-content'];
+const TRANSITIONS = ['fade', 'slide', 'none'];
+
+const App = () => {
+  const [hidden, setHidden] = useState(false);
+  const [statusBarStyle, setStatusBarStyle] = useState(STYLES[0]);
+  const [statusBarTransition, setStatusBarTransition] = useState(
+    TRANSITIONS[0],
+  );
+
+  const changeStatusBarVisibility = () => setHidden(!hidden);
+
+  const changeStatusBarStyle = () => {
+    const styleId = STYLES.indexOf(statusBarStyle) + 1;
+    if (styleId === STYLES.length) {
+      setStatusBarStyle(STYLES[0]);
+    } else {
+      setStatusBarStyle(STYLES[styleId]);
+    }
+  };
+
+  const changeStatusBarTransition = () => {
+    const transition = TRANSITIONS.indexOf(statusBarTransition) + 1;
+    if (transition === TRANSITIONS.length) {
+      setStatusBarTransition(TRANSITIONS[0]);
+    } else {
+      setStatusBarTransition(TRANSITIONS[transition]);
+    }
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <StatusBar
+          animated={true}
+          backgroundColor="#61dafb"
+          barStyle={statusBarStyle}
+          showHideTransition={statusBarTransition}
+          hidden={hidden}
+        />
+        <Text style={styles.textStyle}>
+          StatusBar Visibility:{'\n'}
+          {hidden ? 'Hidden' : 'Visible'}
+        </Text>
+        <Text style={styles.textStyle}>
+          StatusBar Style:{'\n'}
+          {statusBarStyle}
+        </Text>
+        {Platform.OS === 'ios' ? (
+          <Text style={styles.textStyle}>
+            StatusBar Transition:{'\n'}
+            {statusBarTransition}
+          </Text>
+        ) : null}
+        <View style={styles.buttonsContainer}>
+          <Button
+            title="Toggle StatusBar"
+            onPress={changeStatusBarVisibility}
+          />
+          <Button
+            title="Change StatusBar Style"
+            onPress={changeStatusBarStyle}
+          />
+          {Platform.OS === 'ios' ? (
+            <Button
+              title="Change StatusBar Transition"
+              onPress={changeStatusBarTransition}
+            />
+          ) : null}
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: '#ECF0F1',
+  },
+  buttonsContainer: {
+    padding: 10,
+  },
+  textStyle: {
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=StatusBar%20Component%20Example&supportedPlatforms=android,ios&ext=tsx
+import {useState} from 'react';
+import {
+  Button,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  Text,
+  View,
+  StatusBarStyle,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const STYLES = ['default', 'dark-content', 'light-content'] as const;
+const TRANSITIONS = ['fade', 'slide', 'none'] as const;
+
+const App = () => {
+  const [hidden, setHidden] = useState(false);
+  const [statusBarStyle, setStatusBarStyle] = useState<StatusBarStyle>(
+    STYLES[0],
+  );
+  const [statusBarTransition, setStatusBarTransition] = useState<
+    'fade' | 'slide' | 'none'
+  >(TRANSITIONS[0]);
+
+  const changeStatusBarVisibility = () => setHidden(!hidden);
+
+  const changeStatusBarStyle = () => {
+    const styleId = STYLES.indexOf(statusBarStyle) + 1;
+    if (styleId === STYLES.length) {
+      setStatusBarStyle(STYLES[0]);
+    } else {
+      setStatusBarStyle(STYLES[styleId]);
+    }
+  };
+
+  const changeStatusBarTransition = () => {
+    const transition = TRANSITIONS.indexOf(statusBarTransition) + 1;
+    if (transition === TRANSITIONS.length) {
+      setStatusBarTransition(TRANSITIONS[0]);
+    } else {
+      setStatusBarTransition(TRANSITIONS[transition]);
+    }
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <StatusBar
+          animated={true}
+          backgroundColor="#61dafb"
+          barStyle={statusBarStyle}
+          showHideTransition={statusBarTransition}
+          hidden={hidden}
+        />
+        <Text style={styles.textStyle}>
+          StatusBar Visibility:{'\n'}
+          {hidden ? 'Hidden' : 'Visible'}
+        </Text>
+        <Text style={styles.textStyle}>
+          StatusBar Style:{'\n'}
+          {statusBarStyle}
+        </Text>
+        {Platform.OS === 'ios' ? (
+          <Text style={styles.textStyle}>
+            StatusBar Transition:{'\n'}
+            {statusBarTransition}
+          </Text>
+        ) : null}
+        <View style={styles.buttonsContainer}>
+          <Button
+            title="Toggle StatusBar"
+            onPress={changeStatusBarVisibility}
+          />
+          <Button
+            title="Change StatusBar Style"
+            onPress={changeStatusBarStyle}
+          />
+          {Platform.OS === 'ios' ? (
+            <Button
+              title="Change StatusBar Transition"
+              onPress={changeStatusBarTransition}
+            />
+          ) : null}
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: '#ECF0F1',
+  },
+  buttonsContainer: {
+    padding: 10,
+  },
+  textStyle: {
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### 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.
+
+---
+
+# Reference
+
+## Constants
+
+### `currentHeight` <div className="label android">Android</div>
+
+The height of the status bar, which includes the notch height, if present.
+
+---
+
+## Props
+
+### `animated`
+
+If the transition between status bar property changes should be animated. Supported for `backgroundColor`, `barStyle` and `hidden` properties.
+
+| Type    | Required | Default |
+| ------- | -------- | ------- |
+| boolean | No       | `false` |
+
+---
+
+### `backgroundColor` <div className="label android">Android</div>
+
+The background color of the status bar.
+
+:::warning
+Due to edge-to-edge enforcement introduced in Android 15, setting background color of the status bar is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
+:::
+
+| Type            | Required | Default                                                                |
+| --------------- | -------- | ---------------------------------------------------------------------- |
+| [color](colors) | No       | default system StatusBar background color, or `'black'` if not defined |
+
+---
+
+### `barStyle`
+
+Sets the color of the status bar text.
+
+On Android, this will only have an impact on API versions 23 and above.
+
+| Type                                       | Required | Default     |
+| ------------------------------------------ | -------- | ----------- |
+| [StatusBarStyle](statusbar#statusbarstyle) | No       | `'default'` |
+
+---
+
+### `hidden`
+
+If the status bar is hidden.
+
+| Type    | Required | Default |
+| ------- | -------- | ------- |
+| boolean | No       | `false` |
+
+---
+
+### `networkActivityIndicatorVisible` <div className="label ios">iOS</div>
+
+If the network activity indicator should be visible.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+---
+
+### `showHideTransition` <div className="label ios">iOS</div>
+
+The transition effect when showing and hiding the status bar using the `hidden` prop.
+
+| Type                                               | Default  |
+| -------------------------------------------------- | -------- |
+| [StatusBarAnimation](statusbar#statusbaranimation) | `'fade'` |
+
+---
+
+### `translucent` <div className="label android">Android</div>
+
+If the status bar is translucent. When translucent is set to `true`, the app will draw under the status bar. This is useful when using a semi transparent status bar color.
+
+:::warning
+Due to edge-to-edge enforcement introduced in Android 15, setting the status bar as translucent is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
+:::
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+## Methods
+
+### `popStackEntry()`
+
+```tsx
+static popStackEntry(entry: StatusBarProps);
+```
+
+Get and remove the last StatusBar entry from the stack.
+
+**Parameters:**
+
+| Name                                                       | Type | Description                           |
+| ---------------------------------------------------------- | ---- | ------------------------------------- |
+| entry <div className="label basic required">Required</div> | any  | Entry returned from `pushStackEntry`. |
+
+---
+
+### `pushStackEntry()`
+
+```tsx
+static pushStackEntry(props: StatusBarProps): StatusBarProps;
+```
+
+Push a StatusBar entry onto the stack. The return value should be passed to `popStackEntry` when complete.
+
+**Parameters:**
+
+| Name                                                       | Type | Description                                                      |
+| ---------------------------------------------------------- | ---- | ---------------------------------------------------------------- |
+| props <div className="label basic required">Required</div> | any  | Object containing the StatusBar props to use in the stack entry. |
+
+---
+
+### `replaceStackEntry()`
+
+```tsx
+static replaceStackEntry(
+  entry: StatusBarProps,
+  props: StatusBarProps
+): StatusBarProps;
+```
+
+Replace an existing StatusBar stack entry with new props.
+
+**Parameters:**
+
+| Name                                                       | Type | Description                                                                  |
+| ---------------------------------------------------------- | ---- | ---------------------------------------------------------------------------- |
+| entry <div className="label basic required">Required</div> | any  | Entry returned from `pushStackEntry` to replace.                             |
+| props <div className="label basic required">Required</div> | any  | Object containing the StatusBar props to use in the replacement stack entry. |
+
+---
+
+### `setBackgroundColor()` <div className="label android">Android</div>
+
+```tsx
+static setBackgroundColor(color: ColorValue, animated?: boolean);
+```
+
+Set the background color for the status bar.
+
+:::warning
+Due to edge-to-edge enforcement introduced in Android 15, setting background color of the status bar is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
+:::
+
+**Parameters:**
+
+| Name                                                       | Type    | Description               |
+| ---------------------------------------------------------- | ------- | ------------------------- |
+| color <div className="label basic required">Required</div> | string  | Background color.         |
+| animated                                                   | boolean | Animate the style change. |
+
+---
+
+### `setBarStyle()`
+
+```tsx
+static setBarStyle(style: StatusBarStyle, animated?: boolean);
+```
+
+Set the status bar style.
+
+**Parameters:**
+
+| Name                                                       | Type                                       | Description               |
+| ---------------------------------------------------------- | ------------------------------------------ | ------------------------- |
+| style <div className="label basic required">Required</div> | [StatusBarStyle](statusbar#statusbarstyle) | Status bar style to set.  |
+| animated                                                   | boolean                                    | Animate the style change. |
+
+---
+
+### `setHidden()`
+
+```tsx
+static setHidden(hidden: boolean, animation?: StatusBarAnimation);
+```
+
+Show or hide the status bar.
+
+**Parameters:**
+
+| Name                                                        | Type                                               | Description                                             |
+| ----------------------------------------------------------- | -------------------------------------------------- | ------------------------------------------------------- |
+| hidden <div className="label basic required">Required</div> | boolean                                            | Hide the status bar.                                    |
+| animation <div className="label ios">iOS</div>              | [StatusBarAnimation](statusbar#statusbaranimation) | Animation when changing the status bar hidden property. |
+
+---
+
+### 🗑️ `setNetworkActivityIndicatorVisible()` <div className="label ios">iOS</div>
+
+:::warning[Deprecated]
+The status bar network activity indicator is not supported in iOS 13 and later. This will be removed in a future release.
+:::
+
+```tsx
+static setNetworkActivityIndicatorVisible(visible: boolean);
+```
+
+Control the visibility of the network activity indicator.
+
+**Parameters:**
+
+| Name                                                         | Type    | Description         |
+| ------------------------------------------------------------ | ------- | ------------------- |
+| visible <div className="label basic required">Required</div> | boolean | Show the indicator. |
+
+---
+
+### `setTranslucent()` <div className="label android">Android</div>
+
+```tsx
+static setTranslucent(translucent: boolean);
+```
+
+Control the translucency of the status bar.
+
+:::warning
+Due to edge-to-edge enforcement introduced in Android 15, setting the status bar as translucent is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
+:::
+
+**Parameters:**
+
+| Name                                                             | Type    | Description         |
+| ---------------------------------------------------------------- | ------- | ------------------- |
+| translucent <div className="label basic required">Required</div> | boolean | Set as translucent. |
+
+## Type Definitions
+
+### StatusBarAnimation
+
+Status bar animation type for transitions on the iOS.
+
+| Type |
+| ---- |
+| enum |
+
+**Constants:**
+
+| Value     | Type   | Description     |
+| --------- | ------ | --------------- |
+| `'fade'`  | string | Fade animation  |
+| `'slide'` | string | Slide animation |
+| `'none'`  | string | No animation    |
+
+---
+
+### StatusBarStyle
+
+Status bar style type.
+
+| Type |
+| ---- |
+| enum |
+
+**Constants:**
+
+| Value             | Type   | Description                                                |
+| ----------------- | ------ | ---------------------------------------------------------- |
+| `'default'`       | string | Default status bar style (dark for iOS, light for Android) |
+| `'light-content'` | string | White texts and icons                                      |
+| `'dark-content'`  | string | Dark texts and icons (requires API>=23 on Android)         |
diff --git a/website/versioned_docs/version-0.85/style.md b/website/versioned_docs/version-0.85/style.md
index d847c0597cb..4890db4fbfa 100644
--- a/website/versioned_docs/version-0.85/style.md
+++ b/website/versioned_docs/version-0.85/style.md
@@ -10,7 +10,6 @@ The `style` prop can be a plain old JavaScript object. That's what we usually us
 As a component grows in complexity, it is often cleaner to use `StyleSheet.create` to define several styles in one place. Here's an example:
 
 ```SnackPlayer name=Style
-import React from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 
 const LotsOfStyles = () => {
diff --git a/website/versioned_docs/version-0.85/stylesheet.md b/website/versioned_docs/version-0.85/stylesheet.md
index 4e01391e19f..90c14b962a4 100644
--- a/website/versioned_docs/version-0.85/stylesheet.md
+++ b/website/versioned_docs/version-0.85/stylesheet.md
@@ -6,7 +6,6 @@ title: StyleSheet
 A StyleSheet is an abstraction similar to CSS StyleSheets.
 
 ```SnackPlayer name=StyleSheet
-import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -62,7 +61,6 @@ static compose(style1: Object, style2: Object): Object | Object[];
 Combines two styles such that `style2` will override any styles in `style1`. If either style is falsy, the other one is returned without allocating an array, saving allocations and maintaining reference equality for PureComponent checks.
 
 ```SnackPlayer name=Compose
-import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -123,7 +121,6 @@ static flatten(style: Array<Object extends Record<string, ViewStyle | ImageStyle
 Flattens an array of style objects, into one aggregated style object.
 
 ```SnackPlayer name=Flatten
-import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -196,7 +193,6 @@ Sets a function to use to pre-process a style property value. This is used inter
 A very common pattern is to create overlays with position absolute and zero positioning (`position: 'absolute', left: 0, right: 0, top: 0, bottom: 0`), so `absoluteFill` can be used for convenience and to reduce duplication of these repeated styles. If you want, absoluteFill can be used to create a customized entry in a StyleSheet, e.g.:
 
 ```SnackPlayer name=absoluteFill
-import React from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -257,7 +253,6 @@ export default App;
 This is defined as the width of a thin line on the platform. It can be used as the thickness of a border or division between two elements. Example:
 
 ```SnackPlayer name=hairlineWidth
-import React from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 
 const App = () => (
diff --git a/website/versioned_docs/version-0.85/switch.md b/website/versioned_docs/version-0.85/switch.md
index 4f9055c6256..20c73c69db7 100644
--- a/website/versioned_docs/version-0.85/switch.md
+++ b/website/versioned_docs/version-0.85/switch.md
@@ -1,133 +1,133 @@
----
-id: switch
-title: Switch
----
-
-Renders a boolean input.
-
-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=Switch&supportedPlatforms=android,ios
-import React, {useState} from 'react';
-import {Switch, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [isEnabled, setIsEnabled] = useState(false);
-  const toggleSwitch = () => setIsEnabled(previousState => !previousState);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Switch
-          trackColor={{false: '#767577', true: '#81b0ff'}}
-          thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
-          ios_backgroundColor="#3e3e3e"
-          onValueChange={toggleSwitch}
-          value={isEnabled}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Props
-
-### [View Props](view.md#props)
-
-Inherits [View Props](view.md#props).
-
----
-
-### `disabled`
-
-If true the user won't be able to toggle the switch.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `ios_backgroundColor` <div className="label ios">iOS</div>
-
-On iOS, custom color for the background. This background color can be seen either when the switch value is `false` or when the switch is disabled (and the switch is translucent).
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `onChange`
-
-Invoked when the user tries to change the value of the switch. Receives the change event as an argument. If you want to only receive the new value, use `onValueChange` instead.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onValueChange`
-
-Invoked when the user tries to change the value of the switch. Receives the new value as an argument. If you want to instead receive an event, use `onChange`.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `ref`
-
-A ref setter that will be assigned an [element node](element-nodes) when mounted.
-
----
-
-### `thumbColor`
-
-Color of the foreground switch grip. If this is set on iOS, the switch grip will lose its drop shadow.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `trackColor`
-
-Custom colors for the switch track.
-
-_iOS_: When the switch value is `false`, the track shrinks into the border. If you want to change the color of the background exposed by the shrunken track, use [`ios_backgroundColor`](switch.md#ios_backgroundColor).
-
-| Type                                                         |
-| ------------------------------------------------------------ |
-| `md object: {false: [color](colors), true: [color](colors)}` |
-
----
-
-### `value`
-
-The value of the switch. If true the switch will be turned on. Default value is false.
-
-| Type |
-| ---- |
-| bool |
+---
+id: switch
+title: Switch
+---
+
+Renders a boolean input.
+
+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=Switch&supportedPlatforms=android,ios
+import {useState} from 'react';
+import {Switch, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [isEnabled, setIsEnabled] = useState(false);
+  const toggleSwitch = () => setIsEnabled(previousState => !previousState);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Switch
+          trackColor={{false: '#767577', true: '#81b0ff'}}
+          thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
+          ios_backgroundColor="#3e3e3e"
+          onValueChange={toggleSwitch}
+          value={isEnabled}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Props
+
+### [View Props](view.md#props)
+
+Inherits [View Props](view.md#props).
+
+---
+
+### `disabled`
+
+If true the user won't be able to toggle the switch.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `ios_backgroundColor` <div className="label ios">iOS</div>
+
+On iOS, custom color for the background. This background color can be seen either when the switch value is `false` or when the switch is disabled (and the switch is translucent).
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `onChange`
+
+Invoked when the user tries to change the value of the switch. Receives the change event as an argument. If you want to only receive the new value, use `onValueChange` instead.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onValueChange`
+
+Invoked when the user tries to change the value of the switch. Receives the new value as an argument. If you want to instead receive an event, use `onChange`.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `ref`
+
+A ref setter that will be assigned an [element node](element-nodes) when mounted.
+
+---
+
+### `thumbColor`
+
+Color of the foreground switch grip. If this is set on iOS, the switch grip will lose its drop shadow.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `trackColor`
+
+Custom colors for the switch track.
+
+_iOS_: When the switch value is `false`, the track shrinks into the border. If you want to change the color of the background exposed by the shrunken track, use [`ios_backgroundColor`](switch.md#ios_backgroundColor).
+
+| Type                                                         |
+| ------------------------------------------------------------ |
+| `md object: {false: [color](colors), true: [color](colors)}` |
+
+---
+
+### `value`
+
+The value of the switch. If true the switch will be turned on. Default value is false.
+
+| Type |
+| ---- |
+| bool |
diff --git a/website/versioned_docs/version-0.85/systrace.md b/website/versioned_docs/version-0.85/systrace.md
index 53cfd62c7a9..9aa54fe8e18 100644
--- a/website/versioned_docs/version-0.85/systrace.md
+++ b/website/versioned_docs/version-0.85/systrace.md
@@ -10,7 +10,6 @@ title: Systrace
 `Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Capture the non-Timed JS events in EasyProfiler.
 
 ```SnackPlayer name=Systrace%20Example
-import React from 'react';
 import {Button, Text, View, StyleSheet, Systrace} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.85/text-nodes.md b/website/versioned_docs/version-0.85/text-nodes.md
index 63f195ea4b5..2818909abdc 100644
--- a/website/versioned_docs/version-0.85/text-nodes.md
+++ b/website/versioned_docs/version-0.85/text-nodes.md
@@ -1,86 +1,86 @@
----
-id: text-nodes
-title: Text nodes
----
-
-Text nodes represent raw text content on the tree (similar to [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text) nodes on Web). They are not directly accessible via `refs`, but can be accessed using methods like [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes) on element refs.
-
-```SnackPlayer ext=js&name=Text%20instances%20example
-import * as React from 'react';
-import { SafeAreaView, StyleSheet, Text } from 'react-native';
-
-const TextWithRefs = () => {
-  const ref = React.useRef(null);
-  const [viewInfo, setViewInfo] = React.useState('');
-
-  React.useEffect(() => {
-    // `textElement` is an object implementing the interface described here.
-    const textElement = ref.current;
-    const textNode = textElement.childNodes[0];
-    setViewInfo(
-      `Text content is: ${textNode.nodeValue}`,
-    );
-  }, []);
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <Text ref={ref}>
-        Hello world!
-      </Text>
-      <Text>{viewInfo}</Text>
-    </SafeAreaView>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  content: {
-    padding: 10,
-    backgroundColor: 'gray',
-  },
-});
-
-export default TextWithRefs;
-```
-
----
-
-## Reference
-
-### Web-compatible API
-
-From [`CharacterData`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData):
-
-- Properties
-  - [`data`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/data)
-  - [`length`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/length)
-  - [`nextElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/nextElementSibling)
-  - [`previousElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/previousElementSibling)
-- Methods
-  - [`substringData()`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/substringData)
-
-From [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/Node):
-
-- Properties
-  - [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)
-  - [`firstChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild)
-  - [`isConnected`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected)
-  - [`lastChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild)
-  - [`nextSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling)
-  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
-  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
-  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
-  - [`ownerDocument`](https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument)
-    - ℹ️ Will return the [document node](/docs/next/document-nodes) where this component was rendered.
-  - [`parentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)
-  - [`parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)
-  - [`previousSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling)
-  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
-- Methods
-  - [`compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
-  - [`contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains)
-  - [`getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)
-    - ℹ️ Will return a reference to itself if the component is not mounted.
-  - [`hasChildNodes()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes)
+---
+id: text-nodes
+title: Text nodes
+---
+
+Text nodes represent raw text content on the tree (similar to [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text) nodes on Web). They are not directly accessible via `refs`, but can be accessed using methods like [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes) on element refs.
+
+```SnackPlayer ext=js&name=Text%20instances%20example
+import {useEffect, useRef, useState} from 'react';
+import {SafeAreaView, StyleSheet, Text} from 'react-native';
+
+const TextWithRefs = () => {
+  const ref = useRef(null);
+  const [viewInfo, setViewInfo] = useState('');
+
+  useEffect(() => {
+    // `textElement` is an object implementing the interface described here.
+    const textElement = ref.current;
+    const textNode = textElement.childNodes[0];
+    setViewInfo(
+      `Text content is: ${textNode.nodeValue}`,
+    );
+  }, []);
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <Text ref={ref}>
+        Hello world!
+      </Text>
+      <Text>{viewInfo}</Text>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    padding: 10,
+    backgroundColor: 'gray',
+  },
+});
+
+export default TextWithRefs;
+```
+
+---
+
+## Reference
+
+### Web-compatible API
+
+From [`CharacterData`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData):
+
+- Properties
+  - [`data`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/data)
+  - [`length`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/length)
+  - [`nextElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/nextElementSibling)
+  - [`previousElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/previousElementSibling)
+- Methods
+  - [`substringData()`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/substringData)
+
+From [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/Node):
+
+- Properties
+  - [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)
+  - [`firstChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild)
+  - [`isConnected`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected)
+  - [`lastChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild)
+  - [`nextSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling)
+  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
+  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
+  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
+  - [`ownerDocument`](https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument)
+    - ℹ️ Will return the [document node](/docs/next/document-nodes) where this component was rendered.
+  - [`parentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)
+  - [`parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)
+  - [`previousSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling)
+  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
+- Methods
+  - [`compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
+  - [`contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains)
+  - [`getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)
+    - ℹ️ Will return a reference to itself if the component is not mounted.
+  - [`hasChildNodes()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes)
diff --git a/website/versioned_docs/version-0.85/text-style-props.md b/website/versioned_docs/version-0.85/text-style-props.md
index 64ffc4ef816..9605beca3dd 100644
--- a/website/versioned_docs/version-0.85/text-style-props.md
+++ b/website/versioned_docs/version-0.85/text-style-props.md
@@ -1,948 +1,948 @@
----
-id: text-style-props
-title: Text Style Props
----
-
-### Example
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=js&dependencies=@react-native-community/slider
-import React, {useState} from 'react';
-import {
-  FlatList,
-  Platform,
-  ScrollView,
-  StyleSheet,
-  Switch,
-  Text,
-  TouchableWithoutFeedback,
-  View,
-} from 'react-native';
-import Slider from '@react-native-community/slider';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const fontStyles = ['normal', 'italic'];
-const fontVariants = [
-  undefined,
-  'small-caps',
-  'oldstyle-nums',
-  'lining-nums',
-  'tabular-nums',
-  'proportional-nums',
-];
-const fontWeights = [
-  'normal',
-  'bold',
-  '100',
-  '200',
-  '300',
-  '400',
-  '500',
-  '600',
-  '700',
-  '800',
-  '900',
-];
-const textAlignments = ['auto', 'left', 'right', 'center', 'justify'];
-const textDecorationLines = [
-  'none',
-  'underline',
-  'line-through',
-  'underline line-through',
-];
-const textDecorationStyles = ['solid', 'double', 'dotted', 'dashed'];
-const textTransformations = ['none', 'uppercase', 'lowercase', 'capitalize'];
-const textAlignmentsVertical = ['auto', 'top', 'bottom', 'center'];
-const writingDirections = ['auto', 'ltr', 'rtl'];
-
-const App = () => {
-  const [fontSize, setFontSize] = useState(20);
-  const [fontStyleIdx, setFontStyleIdx] = useState(0);
-  const [fontWeightIdx, setFontWeightIdx] = useState(0);
-  const [lineHeight, setLineHeight] = useState(24);
-  const [textAlignIdx, setTextAlignIdx] = useState(0);
-  const [textDecorationLineIdx, setTextDecorationLineIdx] = useState(0);
-  const [includeFontPadding, setIncludeFontPadding] = useState(false);
-  const [textVerticalAlignIdx, setTextVerticalAlignIdx] = useState(0);
-  const [fontVariantIdx, setFontVariantIdx] = useState(0);
-  const [letterSpacing, setLetterSpacing] = useState(0);
-  const [textDecorationStyleIdx, setTextDecorationStyleIdx] = useState(0);
-  const [textTransformIdx, setTextTransformIdx] = useState(0);
-  const [writingDirectionIdx, setWritingDirectionIdx] = useState(0);
-  const [textShadowRadius, setTextShadowRadius] = useState(0);
-  const [textShadowOffset, setTextShadowOffset] = useState({
-    height: 0,
-    width: 0,
-  });
-
-  const [, ...validFontVariants] = fontVariants;
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.pargraphWrapper}>
-          <Text
-            style={[
-              styles.paragraph,
-              {
-                fontSize,
-                fontStyle: fontStyles[fontStyleIdx],
-                fontWeight: fontWeights[fontWeightIdx],
-                lineHeight,
-                textAlign: textAlignments[textAlignIdx],
-                textDecorationLine: textDecorationLines[textDecorationLineIdx],
-                textTransform: textTransformations[textTransformIdx],
-                textAlignVertical: textAlignmentsVertical[textVerticalAlignIdx],
-                fontVariant:
-                  fontVariantIdx === 0
-                    ? undefined
-                    : [validFontVariants[fontVariantIdx - 1]],
-                letterSpacing,
-                includeFontPadding,
-                textDecorationStyle:
-                  textDecorationStyles[textDecorationStyleIdx],
-                writingDirection: writingDirections[writingDirectionIdx],
-                textShadowOffset,
-                textShadowRadius,
-              },
-            ]}>
-            Lorem Ipsum is simply dummy text of the printing and typesetting
-            industry. 112 Likes
-          </Text>
-        </View>
-        <ScrollView style={{padding: 12}}>
-          <View>
-            <Text>Common platform properties</Text>
-            <CustomSlider
-              label="Text Shadow Offset - Height"
-              value={textShadowOffset.height}
-              minimumValue={-40}
-              maximumValue={40}
-              handleValueChange={val =>
-                setTextShadowOffset(prev => ({...prev, height: val}))
-              }
-            />
-            <CustomSlider
-              label="Text Shadow Offset - Width"
-              value={textShadowOffset.width}
-              minimumValue={-40}
-              maximumValue={40}
-              handleValueChange={val =>
-                setTextShadowOffset(prev => ({...prev, width: val}))
-              }
-            />
-            <CustomSlider
-              label="Font Size"
-              value={fontSize}
-              maximumValue={40}
-              handleValueChange={setFontSize}
-            />
-            <CustomPicker
-              label="Font Style"
-              data={fontStyles}
-              currentIndex={fontStyleIdx}
-              onSelected={setFontStyleIdx}
-            />
-            <CustomPicker
-              label="Font Weight"
-              data={fontWeights}
-              currentIndex={fontWeightIdx}
-              onSelected={setFontWeightIdx}
-            />
-            <CustomSlider
-              label="Line Height"
-              value={lineHeight}
-              minimumValue={10}
-              maximumValue={50}
-              handleValueChange={setLineHeight}
-            />
-            <CustomPicker
-              label="Text Align"
-              data={textAlignments}
-              currentIndex={textAlignIdx}
-              onSelected={setTextAlignIdx}
-            />
-            <CustomPicker
-              label="Text Decoration Line"
-              data={textDecorationLines}
-              currentIndex={textDecorationLineIdx}
-              onSelected={setTextDecorationLineIdx}
-            />
-            <CustomSlider
-              label="Text Shadow Radius"
-              value={textShadowRadius}
-              handleValueChange={setTextShadowRadius}
-            />
-            <CustomPicker
-              label="Font Variant"
-              data={fontVariants}
-              currentIndex={fontVariantIdx}
-              onSelected={setFontVariantIdx}
-            />
-            <CustomSlider
-              label="Letter Spacing"
-              step={0.1}
-              value={letterSpacing}
-              handleValueChange={setLetterSpacing}
-            />
-            <CustomPicker
-              label="Text Transform"
-              data={textTransformations}
-              currentIndex={textTransformIdx}
-              onSelected={setTextTransformIdx}
-            />
-          </View>
-          {Platform.OS === 'android' && (
-            <View style={styles.platformContainer}>
-              <Text style={styles.platformContainerTitle}>
-                Android only properties
-              </Text>
-              <CustomPicker
-                label="Text Vertical Align"
-                data={textAlignmentsVertical}
-                currentIndex={textVerticalAlignIdx}
-                onSelected={setTextVerticalAlignIdx}
-              />
-              <CustomSwitch
-                label="Include Font Padding"
-                handleValueChange={setIncludeFontPadding}
-                value={includeFontPadding}
-              />
-            </View>
-          )}
-          {Platform.OS === 'ios' && (
-            <View style={styles.platformContainer}>
-              <Text style={styles.platformContainerTitle}>
-                iOS only properties
-              </Text>
-              <CustomPicker
-                label="Text Decoration Style"
-                data={textDecorationStyles}
-                currentIndex={textDecorationStyleIdx}
-                onSelected={setTextDecorationStyleIdx}
-              />
-              <CustomPicker
-                label="Writing Direction"
-                data={writingDirections}
-                currentIndex={writingDirectionIdx}
-                onSelected={setWritingDirectionIdx}
-              />
-            </View>
-          )}
-        </ScrollView>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const CustomSwitch = ({label, handleValueChange, value}) => {
-  return (
-    <>
-      <Text style={styles.title}>{label}</Text>
-      <View style={{alignItems: 'flex-start'}}>
-        <Switch
-          trackColor={{false: '#767577', true: '#DAA520'}}
-          thumbColor={value ? '#DAA520' : '#f4f3f4'}
-          onValueChange={handleValueChange}
-          value={value}
-        />
-      </View>
-    </>
-  );
-};
-
-const CustomSlider = ({
-  label,
-  handleValueChange,
-  step = 1,
-  minimumValue = 0,
-  maximumValue = 10,
-  value,
-}) => {
-  return (
-    <>
-      {label && (
-        <Text style={styles.title}>{`${label} (${value.toFixed(2)})`}</Text>
-      )}
-      <View style={styles.wrapperHorizontal}>
-        <Slider
-          thumbTintColor="#06bcee"
-          minimumTrackTintColor="#64d7ffbb"
-          minimumValue={minimumValue}
-          maximumValue={maximumValue}
-          step={step}
-          onValueChange={handleValueChange}
-          value={value}
-        />
-      </View>
-    </>
-  );
-};
-
-const CustomPicker = ({label, data, currentIndex, onSelected}) => {
-  return (
-    <>
-      <Text style={styles.title}>{label}</Text>
-      <View style={styles.wrapperHorizontal}>
-        <FlatList
-          bounces
-          horizontal
-          data={data}
-          keyExtractor={item => String(item)}
-          renderItem={({item, index}) => {
-            const selected = index === currentIndex;
-            return (
-              <TouchableWithoutFeedback onPress={() => onSelected(index)}>
-                <View
-                  style={[
-                    styles.itemStyleHorizontal,
-                    selected && styles.itemSelectedStyleHorizontal,
-                  ]}>
-                  <Text
-                    style={{
-                      textAlign: 'center',
-                      color: selected ? 'black' : 'grey',
-                      fontWeight: selected ? 'bold' : 'normal',
-                    }}>
-                    {item + ''}
-                  </Text>
-                </View>
-              </TouchableWithoutFeedback>
-            );
-          }}
-        />
-      </View>
-    </>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  pargraphWrapper: {
-    backgroundColor: 'black',
-  },
-  paragraph: {
-    color: '#fff',
-    textDecorationColor: 'yellow',
-    textShadowColor: 'red',
-    textShadowRadius: 1,
-    padding: 24,
-  },
-  wrapperHorizontal: {
-    justifyContent: 'center',
-    color: 'black',
-  },
-  itemStyleHorizontal: {
-    marginRight: 10,
-    height: 50,
-    padding: 8,
-    borderWidth: 1,
-    borderColor: 'grey',
-    borderRadius: 8,
-    textAlign: 'center',
-    justifyContent: 'center',
-  },
-  itemSelectedStyleHorizontal: {
-    borderWidth: 2,
-    borderColor: '#06bcee',
-  },
-  platformContainer: {
-    marginTop: 8,
-    borderTopWidth: 1,
-  },
-  platformContainerTitle: {
-    marginTop: 8,
-  },
-  title: {
-    fontWeight: 'bold',
-    marginVertical: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=tsx&dependencies=@react-native-community/slider
-import React, {useState} from 'react';
-import {
-  FlatList,
-  Platform,
-  ScrollView,
-  StyleSheet,
-  Switch,
-  Text,
-  TouchableWithoutFeedback,
-  View,
-  TextStyle,
-} from 'react-native';
-import Slider from '@react-native-community/slider';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [fontSize, setFontSize] = useState(20);
-  const [fontStyleIdx, setFontStyleIdx] = useState(0);
-  const [fontWeightIdx, setFontWeightIdx] = useState(0);
-  const [lineHeight, setLineHeight] = useState(24);
-  const [textAlignIdx, setTextAlignIdx] = useState(0);
-  const [textDecorationLineIdx, setTextDecorationLineIdx] = useState(0);
-  const [includeFontPadding, setIncludeFontPadding] = useState(false);
-  const [textVerticalAlignIdx, setTextVerticalAlignIdx] = useState(0);
-  const [fontVariantIdx, setFontVariantIdx] = useState(0);
-  const [letterSpacing, setLetterSpacing] = useState(0);
-  const [textDecorationStyleIdx, setTextDecorationStyleIdx] = useState(0);
-  const [textTransformIdx, setTextTransformIdx] = useState(0);
-  const [writingDirectionIdx, setWritingDirectionIdx] = useState(0);
-  const [textShadowRadius, setTextShadowRadius] = useState(0);
-  const [textShadowOffset, setTextShadowOffset] = useState({
-    height: 0,
-    width: 0,
-  });
-
-  const [, ...validFontVariants] = fontVariants;
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.pargraphWrapper}>
-          <Text
-            style={[
-              styles.paragraph,
-              {
-                fontSize,
-                fontStyle: fontStyles[fontStyleIdx],
-                fontWeight: fontWeights[fontWeightIdx],
-                lineHeight,
-                textAlign: textAlignments[textAlignIdx],
-                textDecorationLine: textDecorationLines[textDecorationLineIdx],
-                textTransform: textTransformations[textTransformIdx],
-                textAlignVertical: textAlignmentsVertical[textVerticalAlignIdx],
-                fontVariant:
-                  fontVariantIdx === 0
-                    ? undefined
-                    : [validFontVariants[fontVariantIdx - 1]],
-                letterSpacing,
-                includeFontPadding,
-                textDecorationStyle:
-                  textDecorationStyles[textDecorationStyleIdx],
-                writingDirection: writingDirections[writingDirectionIdx],
-                textShadowOffset,
-                textShadowRadius,
-              } as TextStyle,
-            ]}>
-            Lorem Ipsum is simply dummy text of the printing and typesetting
-            industry. 112 Likes
-          </Text>
-        </View>
-        <ScrollView style={{padding: 12}}>
-          <View>
-            <Text>Common platform properties</Text>
-            <CustomSlider
-              label="Text Shadow Offset - Height"
-              value={textShadowOffset.height}
-              minimumValue={-40}
-              maximumValue={40}
-              handleValueChange={(val: number) =>
-                setTextShadowOffset(prev => ({...prev, height: val}))
-              }
-            />
-            <CustomSlider
-              label="Text Shadow Offset - Width"
-              value={textShadowOffset.width}
-              minimumValue={-40}
-              maximumValue={40}
-              handleValueChange={(val: number) =>
-                setTextShadowOffset(prev => ({...prev, width: val}))
-              }
-            />
-            <CustomSlider
-              label="Font Size"
-              value={fontSize}
-              maximumValue={40}
-              handleValueChange={setFontSize}
-            />
-            <CustomPicker
-              label="Font Style"
-              data={fontStyles}
-              currentIndex={fontStyleIdx}
-              onSelected={setFontStyleIdx}
-            />
-            <CustomPicker
-              label="Font Weight"
-              data={fontWeights}
-              currentIndex={fontWeightIdx}
-              onSelected={setFontWeightIdx}
-            />
-            <CustomSlider
-              label="Line Height"
-              value={lineHeight}
-              minimumValue={10}
-              maximumValue={50}
-              handleValueChange={setLineHeight}
-            />
-            <CustomPicker
-              label="Text Align"
-              data={textAlignments}
-              currentIndex={textAlignIdx}
-              onSelected={setTextAlignIdx}
-            />
-            <CustomPicker
-              label="Text Decoration Line"
-              data={textDecorationLines}
-              currentIndex={textDecorationLineIdx}
-              onSelected={setTextDecorationLineIdx}
-            />
-            <CustomSlider
-              label="Text Shadow Radius"
-              value={textShadowRadius}
-              handleValueChange={setTextShadowRadius}
-            />
-            <CustomPicker
-              label="Font Variant"
-              data={fontVariants}
-              currentIndex={fontVariantIdx}
-              onSelected={setFontVariantIdx}
-            />
-            <CustomSlider
-              label="Letter Spacing"
-              step={0.1}
-              value={letterSpacing}
-              handleValueChange={setLetterSpacing}
-            />
-            <CustomPicker
-              label="Text Transform"
-              data={textTransformations}
-              currentIndex={textTransformIdx}
-              onSelected={setTextTransformIdx}
-            />
-          </View>
-          {Platform.OS === 'android' && (
-            <View style={styles.platformContainer}>
-              <Text style={styles.platformContainerTitle}>
-                Android only properties
-              </Text>
-              <CustomPicker
-                label="Text Vertical Align"
-                data={textAlignmentsVertical}
-                currentIndex={textVerticalAlignIdx}
-                onSelected={setTextVerticalAlignIdx}
-              />
-              <CustomSwitch
-                label="Include Font Padding"
-                handleValueChange={setIncludeFontPadding}
-                value={includeFontPadding}
-              />
-            </View>
-          )}
-          {Platform.OS === 'ios' && (
-            <View style={styles.platformContainer}>
-              <Text style={styles.platformContainerTitle}>
-                iOS only properties
-              </Text>
-              <CustomPicker
-                label="Text Decoration Style"
-                data={textDecorationStyles}
-                currentIndex={textDecorationStyleIdx}
-                onSelected={setTextDecorationStyleIdx}
-              />
-              <CustomPicker
-                label="Writing Direction"
-                data={writingDirections}
-                currentIndex={writingDirectionIdx}
-                onSelected={setWritingDirectionIdx}
-              />
-            </View>
-          )}
-        </ScrollView>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-type CustomSwitchProps = {
-  label: string;
-  value: boolean;
-  handleValueChange: (value: boolean) => void;
-};
-
-const CustomSwitch = ({label, handleValueChange, value}: CustomSwitchProps) => {
-  return (
-    <>
-      <Text style={styles.title}>{label}</Text>
-      <View style={{alignItems: 'flex-start'}}>
-        <Switch
-          trackColor={{false: '#767577', true: '#DAA520'}}
-          thumbColor={value ? '#DAA520' : '#f4f3f4'}
-          onValueChange={handleValueChange}
-          value={value}
-        />
-      </View>
-    </>
-  );
-};
-
-type CustomSliderProps = {
-  label: string;
-  value: number;
-  handleValueChange: (value: number) => void;
-  step?: number;
-  minimumValue?: number;
-  maximumValue?: number;
-};
-
-const CustomSlider = ({
-  label,
-  handleValueChange,
-  step = 1,
-  minimumValue = 0,
-  maximumValue = 10,
-  value,
-}: CustomSliderProps) => {
-  return (
-    <>
-      {label && (
-        <Text style={styles.title}>{`${label} (${value.toFixed(2)})`}</Text>
-      )}
-      <View style={styles.wrapperHorizontal}>
-        <Slider
-          thumbTintColor="#06bcee"
-          minimumTrackTintColor="#64d7ffbb"
-          minimumValue={minimumValue}
-          maximumValue={maximumValue}
-          step={step}
-          onValueChange={handleValueChange}
-          value={value}
-        />
-      </View>
-    </>
-  );
-};
-
-type CustomPickerProps = {
-  label: string;
-  data?: ArrayLike<any> | null;
-  currentIndex: number;
-  onSelected: (index: number) => void;
-};
-
-const CustomPicker = ({
-  label,
-  data,
-  currentIndex,
-  onSelected,
-}: CustomPickerProps) => {
-  return (
-    <>
-      <Text style={styles.title}>{label}</Text>
-      <View style={styles.wrapperHorizontal}>
-        <FlatList
-          horizontal
-          data={data}
-          keyExtractor={item => String(item)}
-          renderItem={({item, index}: {item: string; index: number}) => {
-            const selected = index === currentIndex;
-            return (
-              <TouchableWithoutFeedback onPress={() => onSelected(index)}>
-                <View
-                  style={[
-                    styles.itemStyleHorizontal,
-                    selected && styles.itemSelectedStyleHorizontal,
-                  ]}>
-                  <Text
-                    style={{
-                      textAlign: 'center',
-                      color: selected ? 'black' : 'grey',
-                      fontWeight: selected ? 'bold' : 'normal',
-                    }}>
-                    {item + ''}
-                  </Text>
-                </View>
-              </TouchableWithoutFeedback>
-            );
-          }}
-        />
-      </View>
-    </>
-  );
-};
-
-const fontStyles = ['normal', 'italic'];
-const fontVariants = [
-  undefined,
-  'small-caps',
-  'oldstyle-nums',
-  'lining-nums',
-  'tabular-nums',
-  'proportional-nums',
-];
-const fontWeights = [
-  'normal',
-  'bold',
-  '100',
-  '200',
-  '300',
-  '400',
-  '500',
-  '600',
-  '700',
-  '800',
-  '900',
-];
-const textAlignments = ['auto', 'left', 'right', 'center', 'justify'];
-const textDecorationLines = [
-  'none',
-  'underline',
-  'line-through',
-  'underline line-through',
-];
-const textDecorationStyles = ['solid', 'double', 'dotted', 'dashed'];
-const textTransformations = ['none', 'uppercase', 'lowercase', 'capitalize'];
-const textAlignmentsVertical = ['auto', 'top', 'bottom', 'center'];
-const writingDirections = ['auto', 'ltr', 'rtl'];
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  pargraphWrapper: {
-    backgroundColor: 'black',
-  },
-  paragraph: {
-    color: '#fff',
-    textDecorationColor: 'yellow',
-    textShadowColor: 'red',
-    textShadowRadius: 1,
-    padding: 24,
-  },
-  wrapperHorizontal: {
-    justifyContent: 'center',
-    color: 'black',
-  },
-  itemStyleHorizontal: {
-    marginRight: 10,
-    height: 50,
-    padding: 8,
-    borderWidth: 1,
-    borderColor: 'grey',
-    borderRadius: 8,
-    textAlign: 'center',
-    justifyContent: 'center',
-  },
-  itemSelectedStyleHorizontal: {
-    borderWidth: 2,
-    borderColor: '#06bcee',
-  },
-  platformContainer: {
-    marginTop: 8,
-    borderTopWidth: 1,
-  },
-  platformContainerTitle: {
-    marginTop: 8,
-  },
-  title: {
-    fontWeight: 'bold',
-    marginVertical: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-# Reference
-
-## Props
-
-### `color`
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `fontFamily`
-
-| Type   |
-| ------ |
-| string |
-
-The generic font families `system-ui`, `ui-sans-serif`, `ui-serif`, `ui-monospace`, and `ui-rounded` are supported on iOS.
-
----
-
-### `fontSize`
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `fontStyle`
-
-| Type                         |
-| ---------------------------- |
-| enum(`'normal'`, `'italic'`) |
-
----
-
-### `fontWeight`
-
-Specifies font weight. The values `'normal'` and `'bold'` are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen.
-
-| Type                                                                                                                  | Default    |
-| --------------------------------------------------------------------------------------------------------------------- | ---------- |
-| enum(`'normal'`, `'bold'`, `'100'`, `'200'`, `'300'`, `'400'`, `'500'`, `'600'`, `'700'`, `'800'`, `'900'`) or number | `'normal'` |
-
----
-
-### `includeFontPadding` <div className="label android">Android</div>
-
-Set to `false` to remove extra font padding intended to make space for certain ascenders / descenders. With some fonts, this padding can make text look slightly misaligned when centered vertically. For best results also set `textAlignVertical` to `center`.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `true`  |
-
----
-
-### `fontVariant`
-
-Allows you to set all the font variants for a font. Can be set by using an array of enums or a space-separated string e.g. `'small-caps common-ligatures'`.
-
-| Type                                                                                                                 | Default |
-| -------------------------------------------------------------------------------------------------------------------- | ------- |
-| array of enum(`'small-caps'`, `'oldstyle-nums'`, `'lining-nums'`, `'tabular-nums'`, `'proportional-nums'`) or string | `[]`    |
-
----
-
-### `letterSpacing`
-
-Increase or decrease the spacing between characters. By default there is no extra letter spacing.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `lineHeight`
-
-Numeric value that controls the vertical spacing between lines of text within a text element. It specifies the distance between the baselines of consecutive lines of text.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `textAlign`
-
-Specifies text alignment. On Android, the value 'justify' is only supported on Oreo (8.0) or above (API level >= 26). The value will fallback to `left` on lower Android versions.
-
-| Type                                                         | Default  |
-| ------------------------------------------------------------ | -------- |
-| enum(`'auto'`, `'left'`, `'right'`, `'center'`, `'justify'`) | `'auto'` |
-
----
-
-### `textAlignVertical` <div className="label android">Android</div>
-
-An alias for `verticalAlign` style prop, if you use both properties, `verticalAlign` will take precedence over `textAlignVertical`
-
-| Type                                            | Default  |
-| ----------------------------------------------- | -------- |
-| enum(`'auto'`, `'top'`, `'bottom'`, `'center'`) | `'auto'` |
-
----
-
-### `textDecorationColor` <div className="label ios">iOS</div>
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `textDecorationLine`
-
-| Type                                                                        | Default  |
-| --------------------------------------------------------------------------- | -------- |
-| enum(`'none'`, `'underline'`, `'line-through'`, `'underline line-through'`) | `'none'` |
-
----
-
-### `textDecorationStyle` <div className="label ios">iOS</div>
-
-| Type                                                | Default   |
-| --------------------------------------------------- | --------- |
-| enum(`'solid'`, `'double'`, `'dotted'`, `'dashed'`) | `'solid'` |
-
----
-
-### `textShadowColor`
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `textShadowOffset`
-
-| Type                                        |
-| ------------------------------------------- |
-| object: `{width?: number, height?: number}` |
-
----
-
-### `textShadowRadius`
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `textTransform`
-
-| Type                                                         | Default  |
-| ------------------------------------------------------------ | -------- |
-| enum(`'none'`, `'uppercase'`, `'lowercase'`, `'capitalize'`) | `'none'` |
-
----
-
-### `verticalAlign` <div className="label android">Android</div>
-
-| Type                                            | Default  |
-| ----------------------------------------------- | -------- |
-| enum(`'auto'`, `'top'`, `'bottom'`, `'middle'`) | `'auto'` |
-
----
-
-### `writingDirection` <div className="label ios">iOS</div>
-
-| Type                             | Default  |
-| -------------------------------- | -------- |
-| enum(`'auto'`, `'ltr'`, `'rtl'`) | `'auto'` |
-
----
-
-### `userSelect`
-
-It allows the user to select text and to use the native copy and paste functionality. Has precedence over the `selectable` prop.
-
-| Type                                                     | Default |
-| -------------------------------------------------------- | ------- |
-| enum(`'auto'`, `'text'`, `'none'`, `'contain'`, `'all'`) | `none`  |
+---
+id: text-style-props
+title: Text Style Props
+---
+
+### Example
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=js&dependencies=@react-native-community/slider
+import {useState} from 'react';
+import {
+  FlatList,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Switch,
+  Text,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+import Slider from '@react-native-community/slider';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const fontStyles = ['normal', 'italic'];
+const fontVariants = [
+  undefined,
+  'small-caps',
+  'oldstyle-nums',
+  'lining-nums',
+  'tabular-nums',
+  'proportional-nums',
+];
+const fontWeights = [
+  'normal',
+  'bold',
+  '100',
+  '200',
+  '300',
+  '400',
+  '500',
+  '600',
+  '700',
+  '800',
+  '900',
+];
+const textAlignments = ['auto', 'left', 'right', 'center', 'justify'];
+const textDecorationLines = [
+  'none',
+  'underline',
+  'line-through',
+  'underline line-through',
+];
+const textDecorationStyles = ['solid', 'double', 'dotted', 'dashed'];
+const textTransformations = ['none', 'uppercase', 'lowercase', 'capitalize'];
+const textAlignmentsVertical = ['auto', 'top', 'bottom', 'center'];
+const writingDirections = ['auto', 'ltr', 'rtl'];
+
+const App = () => {
+  const [fontSize, setFontSize] = useState(20);
+  const [fontStyleIdx, setFontStyleIdx] = useState(0);
+  const [fontWeightIdx, setFontWeightIdx] = useState(0);
+  const [lineHeight, setLineHeight] = useState(24);
+  const [textAlignIdx, setTextAlignIdx] = useState(0);
+  const [textDecorationLineIdx, setTextDecorationLineIdx] = useState(0);
+  const [includeFontPadding, setIncludeFontPadding] = useState(false);
+  const [textVerticalAlignIdx, setTextVerticalAlignIdx] = useState(0);
+  const [fontVariantIdx, setFontVariantIdx] = useState(0);
+  const [letterSpacing, setLetterSpacing] = useState(0);
+  const [textDecorationStyleIdx, setTextDecorationStyleIdx] = useState(0);
+  const [textTransformIdx, setTextTransformIdx] = useState(0);
+  const [writingDirectionIdx, setWritingDirectionIdx] = useState(0);
+  const [textShadowRadius, setTextShadowRadius] = useState(0);
+  const [textShadowOffset, setTextShadowOffset] = useState({
+    height: 0,
+    width: 0,
+  });
+
+  const [, ...validFontVariants] = fontVariants;
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.pargraphWrapper}>
+          <Text
+            style={[
+              styles.paragraph,
+              {
+                fontSize,
+                fontStyle: fontStyles[fontStyleIdx],
+                fontWeight: fontWeights[fontWeightIdx],
+                lineHeight,
+                textAlign: textAlignments[textAlignIdx],
+                textDecorationLine: textDecorationLines[textDecorationLineIdx],
+                textTransform: textTransformations[textTransformIdx],
+                textAlignVertical: textAlignmentsVertical[textVerticalAlignIdx],
+                fontVariant:
+                  fontVariantIdx === 0
+                    ? undefined
+                    : [validFontVariants[fontVariantIdx - 1]],
+                letterSpacing,
+                includeFontPadding,
+                textDecorationStyle:
+                  textDecorationStyles[textDecorationStyleIdx],
+                writingDirection: writingDirections[writingDirectionIdx],
+                textShadowOffset,
+                textShadowRadius,
+              },
+            ]}>
+            Lorem Ipsum is simply dummy text of the printing and typesetting
+            industry. 112 Likes
+          </Text>
+        </View>
+        <ScrollView style={{padding: 12}}>
+          <View>
+            <Text>Common platform properties</Text>
+            <CustomSlider
+              label="Text Shadow Offset - Height"
+              value={textShadowOffset.height}
+              minimumValue={-40}
+              maximumValue={40}
+              handleValueChange={val =>
+                setTextShadowOffset(prev => ({...prev, height: val}))
+              }
+            />
+            <CustomSlider
+              label="Text Shadow Offset - Width"
+              value={textShadowOffset.width}
+              minimumValue={-40}
+              maximumValue={40}
+              handleValueChange={val =>
+                setTextShadowOffset(prev => ({...prev, width: val}))
+              }
+            />
+            <CustomSlider
+              label="Font Size"
+              value={fontSize}
+              maximumValue={40}
+              handleValueChange={setFontSize}
+            />
+            <CustomPicker
+              label="Font Style"
+              data={fontStyles}
+              currentIndex={fontStyleIdx}
+              onSelected={setFontStyleIdx}
+            />
+            <CustomPicker
+              label="Font Weight"
+              data={fontWeights}
+              currentIndex={fontWeightIdx}
+              onSelected={setFontWeightIdx}
+            />
+            <CustomSlider
+              label="Line Height"
+              value={lineHeight}
+              minimumValue={10}
+              maximumValue={50}
+              handleValueChange={setLineHeight}
+            />
+            <CustomPicker
+              label="Text Align"
+              data={textAlignments}
+              currentIndex={textAlignIdx}
+              onSelected={setTextAlignIdx}
+            />
+            <CustomPicker
+              label="Text Decoration Line"
+              data={textDecorationLines}
+              currentIndex={textDecorationLineIdx}
+              onSelected={setTextDecorationLineIdx}
+            />
+            <CustomSlider
+              label="Text Shadow Radius"
+              value={textShadowRadius}
+              handleValueChange={setTextShadowRadius}
+            />
+            <CustomPicker
+              label="Font Variant"
+              data={fontVariants}
+              currentIndex={fontVariantIdx}
+              onSelected={setFontVariantIdx}
+            />
+            <CustomSlider
+              label="Letter Spacing"
+              step={0.1}
+              value={letterSpacing}
+              handleValueChange={setLetterSpacing}
+            />
+            <CustomPicker
+              label="Text Transform"
+              data={textTransformations}
+              currentIndex={textTransformIdx}
+              onSelected={setTextTransformIdx}
+            />
+          </View>
+          {Platform.OS === 'android' && (
+            <View style={styles.platformContainer}>
+              <Text style={styles.platformContainerTitle}>
+                Android only properties
+              </Text>
+              <CustomPicker
+                label="Text Vertical Align"
+                data={textAlignmentsVertical}
+                currentIndex={textVerticalAlignIdx}
+                onSelected={setTextVerticalAlignIdx}
+              />
+              <CustomSwitch
+                label="Include Font Padding"
+                handleValueChange={setIncludeFontPadding}
+                value={includeFontPadding}
+              />
+            </View>
+          )}
+          {Platform.OS === 'ios' && (
+            <View style={styles.platformContainer}>
+              <Text style={styles.platformContainerTitle}>
+                iOS only properties
+              </Text>
+              <CustomPicker
+                label="Text Decoration Style"
+                data={textDecorationStyles}
+                currentIndex={textDecorationStyleIdx}
+                onSelected={setTextDecorationStyleIdx}
+              />
+              <CustomPicker
+                label="Writing Direction"
+                data={writingDirections}
+                currentIndex={writingDirectionIdx}
+                onSelected={setWritingDirectionIdx}
+              />
+            </View>
+          )}
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const CustomSwitch = ({label, handleValueChange, value}) => {
+  return (
+    <>
+      <Text style={styles.title}>{label}</Text>
+      <View style={{alignItems: 'flex-start'}}>
+        <Switch
+          trackColor={{false: '#767577', true: '#DAA520'}}
+          thumbColor={value ? '#DAA520' : '#f4f3f4'}
+          onValueChange={handleValueChange}
+          value={value}
+        />
+      </View>
+    </>
+  );
+};
+
+const CustomSlider = ({
+  label,
+  handleValueChange,
+  step = 1,
+  minimumValue = 0,
+  maximumValue = 10,
+  value,
+}) => {
+  return (
+    <>
+      {label && (
+        <Text style={styles.title}>{`${label} (${value.toFixed(2)})`}</Text>
+      )}
+      <View style={styles.wrapperHorizontal}>
+        <Slider
+          thumbTintColor="#06bcee"
+          minimumTrackTintColor="#64d7ffbb"
+          minimumValue={minimumValue}
+          maximumValue={maximumValue}
+          step={step}
+          onValueChange={handleValueChange}
+          value={value}
+        />
+      </View>
+    </>
+  );
+};
+
+const CustomPicker = ({label, data, currentIndex, onSelected}) => {
+  return (
+    <>
+      <Text style={styles.title}>{label}</Text>
+      <View style={styles.wrapperHorizontal}>
+        <FlatList
+          bounces
+          horizontal
+          data={data}
+          keyExtractor={item => String(item)}
+          renderItem={({item, index}) => {
+            const selected = index === currentIndex;
+            return (
+              <TouchableWithoutFeedback onPress={() => onSelected(index)}>
+                <View
+                  style={[
+                    styles.itemStyleHorizontal,
+                    selected && styles.itemSelectedStyleHorizontal,
+                  ]}>
+                  <Text
+                    style={{
+                      textAlign: 'center',
+                      color: selected ? 'black' : 'grey',
+                      fontWeight: selected ? 'bold' : 'normal',
+                    }}>
+                    {item + ''}
+                  </Text>
+                </View>
+              </TouchableWithoutFeedback>
+            );
+          }}
+        />
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  pargraphWrapper: {
+    backgroundColor: 'black',
+  },
+  paragraph: {
+    color: '#fff',
+    textDecorationColor: 'yellow',
+    textShadowColor: 'red',
+    textShadowRadius: 1,
+    padding: 24,
+  },
+  wrapperHorizontal: {
+    justifyContent: 'center',
+    color: 'black',
+  },
+  itemStyleHorizontal: {
+    marginRight: 10,
+    height: 50,
+    padding: 8,
+    borderWidth: 1,
+    borderColor: 'grey',
+    borderRadius: 8,
+    textAlign: 'center',
+    justifyContent: 'center',
+  },
+  itemSelectedStyleHorizontal: {
+    borderWidth: 2,
+    borderColor: '#06bcee',
+  },
+  platformContainer: {
+    marginTop: 8,
+    borderTopWidth: 1,
+  },
+  platformContainerTitle: {
+    marginTop: 8,
+  },
+  title: {
+    fontWeight: 'bold',
+    marginVertical: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=tsx&dependencies=@react-native-community/slider
+import {useState} from 'react';
+import {
+  FlatList,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Switch,
+  Text,
+  TouchableWithoutFeedback,
+  View,
+  TextStyle,
+} from 'react-native';
+import Slider from '@react-native-community/slider';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [fontSize, setFontSize] = useState(20);
+  const [fontStyleIdx, setFontStyleIdx] = useState(0);
+  const [fontWeightIdx, setFontWeightIdx] = useState(0);
+  const [lineHeight, setLineHeight] = useState(24);
+  const [textAlignIdx, setTextAlignIdx] = useState(0);
+  const [textDecorationLineIdx, setTextDecorationLineIdx] = useState(0);
+  const [includeFontPadding, setIncludeFontPadding] = useState(false);
+  const [textVerticalAlignIdx, setTextVerticalAlignIdx] = useState(0);
+  const [fontVariantIdx, setFontVariantIdx] = useState(0);
+  const [letterSpacing, setLetterSpacing] = useState(0);
+  const [textDecorationStyleIdx, setTextDecorationStyleIdx] = useState(0);
+  const [textTransformIdx, setTextTransformIdx] = useState(0);
+  const [writingDirectionIdx, setWritingDirectionIdx] = useState(0);
+  const [textShadowRadius, setTextShadowRadius] = useState(0);
+  const [textShadowOffset, setTextShadowOffset] = useState({
+    height: 0,
+    width: 0,
+  });
+
+  const [, ...validFontVariants] = fontVariants;
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.pargraphWrapper}>
+          <Text
+            style={[
+              styles.paragraph,
+              {
+                fontSize,
+                fontStyle: fontStyles[fontStyleIdx],
+                fontWeight: fontWeights[fontWeightIdx],
+                lineHeight,
+                textAlign: textAlignments[textAlignIdx],
+                textDecorationLine: textDecorationLines[textDecorationLineIdx],
+                textTransform: textTransformations[textTransformIdx],
+                textAlignVertical: textAlignmentsVertical[textVerticalAlignIdx],
+                fontVariant:
+                  fontVariantIdx === 0
+                    ? undefined
+                    : [validFontVariants[fontVariantIdx - 1]],
+                letterSpacing,
+                includeFontPadding,
+                textDecorationStyle:
+                  textDecorationStyles[textDecorationStyleIdx],
+                writingDirection: writingDirections[writingDirectionIdx],
+                textShadowOffset,
+                textShadowRadius,
+              } as TextStyle,
+            ]}>
+            Lorem Ipsum is simply dummy text of the printing and typesetting
+            industry. 112 Likes
+          </Text>
+        </View>
+        <ScrollView style={{padding: 12}}>
+          <View>
+            <Text>Common platform properties</Text>
+            <CustomSlider
+              label="Text Shadow Offset - Height"
+              value={textShadowOffset.height}
+              minimumValue={-40}
+              maximumValue={40}
+              handleValueChange={(val: number) =>
+                setTextShadowOffset(prev => ({...prev, height: val}))
+              }
+            />
+            <CustomSlider
+              label="Text Shadow Offset - Width"
+              value={textShadowOffset.width}
+              minimumValue={-40}
+              maximumValue={40}
+              handleValueChange={(val: number) =>
+                setTextShadowOffset(prev => ({...prev, width: val}))
+              }
+            />
+            <CustomSlider
+              label="Font Size"
+              value={fontSize}
+              maximumValue={40}
+              handleValueChange={setFontSize}
+            />
+            <CustomPicker
+              label="Font Style"
+              data={fontStyles}
+              currentIndex={fontStyleIdx}
+              onSelected={setFontStyleIdx}
+            />
+            <CustomPicker
+              label="Font Weight"
+              data={fontWeights}
+              currentIndex={fontWeightIdx}
+              onSelected={setFontWeightIdx}
+            />
+            <CustomSlider
+              label="Line Height"
+              value={lineHeight}
+              minimumValue={10}
+              maximumValue={50}
+              handleValueChange={setLineHeight}
+            />
+            <CustomPicker
+              label="Text Align"
+              data={textAlignments}
+              currentIndex={textAlignIdx}
+              onSelected={setTextAlignIdx}
+            />
+            <CustomPicker
+              label="Text Decoration Line"
+              data={textDecorationLines}
+              currentIndex={textDecorationLineIdx}
+              onSelected={setTextDecorationLineIdx}
+            />
+            <CustomSlider
+              label="Text Shadow Radius"
+              value={textShadowRadius}
+              handleValueChange={setTextShadowRadius}
+            />
+            <CustomPicker
+              label="Font Variant"
+              data={fontVariants}
+              currentIndex={fontVariantIdx}
+              onSelected={setFontVariantIdx}
+            />
+            <CustomSlider
+              label="Letter Spacing"
+              step={0.1}
+              value={letterSpacing}
+              handleValueChange={setLetterSpacing}
+            />
+            <CustomPicker
+              label="Text Transform"
+              data={textTransformations}
+              currentIndex={textTransformIdx}
+              onSelected={setTextTransformIdx}
+            />
+          </View>
+          {Platform.OS === 'android' && (
+            <View style={styles.platformContainer}>
+              <Text style={styles.platformContainerTitle}>
+                Android only properties
+              </Text>
+              <CustomPicker
+                label="Text Vertical Align"
+                data={textAlignmentsVertical}
+                currentIndex={textVerticalAlignIdx}
+                onSelected={setTextVerticalAlignIdx}
+              />
+              <CustomSwitch
+                label="Include Font Padding"
+                handleValueChange={setIncludeFontPadding}
+                value={includeFontPadding}
+              />
+            </View>
+          )}
+          {Platform.OS === 'ios' && (
+            <View style={styles.platformContainer}>
+              <Text style={styles.platformContainerTitle}>
+                iOS only properties
+              </Text>
+              <CustomPicker
+                label="Text Decoration Style"
+                data={textDecorationStyles}
+                currentIndex={textDecorationStyleIdx}
+                onSelected={setTextDecorationStyleIdx}
+              />
+              <CustomPicker
+                label="Writing Direction"
+                data={writingDirections}
+                currentIndex={writingDirectionIdx}
+                onSelected={setWritingDirectionIdx}
+              />
+            </View>
+          )}
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+type CustomSwitchProps = {
+  label: string;
+  value: boolean;
+  handleValueChange: (value: boolean) => void;
+};
+
+const CustomSwitch = ({label, handleValueChange, value}: CustomSwitchProps) => {
+  return (
+    <>
+      <Text style={styles.title}>{label}</Text>
+      <View style={{alignItems: 'flex-start'}}>
+        <Switch
+          trackColor={{false: '#767577', true: '#DAA520'}}
+          thumbColor={value ? '#DAA520' : '#f4f3f4'}
+          onValueChange={handleValueChange}
+          value={value}
+        />
+      </View>
+    </>
+  );
+};
+
+type CustomSliderProps = {
+  label: string;
+  value: number;
+  handleValueChange: (value: number) => void;
+  step?: number;
+  minimumValue?: number;
+  maximumValue?: number;
+};
+
+const CustomSlider = ({
+  label,
+  handleValueChange,
+  step = 1,
+  minimumValue = 0,
+  maximumValue = 10,
+  value,
+}: CustomSliderProps) => {
+  return (
+    <>
+      {label && (
+        <Text style={styles.title}>{`${label} (${value.toFixed(2)})`}</Text>
+      )}
+      <View style={styles.wrapperHorizontal}>
+        <Slider
+          thumbTintColor="#06bcee"
+          minimumTrackTintColor="#64d7ffbb"
+          minimumValue={minimumValue}
+          maximumValue={maximumValue}
+          step={step}
+          onValueChange={handleValueChange}
+          value={value}
+        />
+      </View>
+    </>
+  );
+};
+
+type CustomPickerProps = {
+  label: string;
+  data?: ArrayLike<any> | null;
+  currentIndex: number;
+  onSelected: (index: number) => void;
+};
+
+const CustomPicker = ({
+  label,
+  data,
+  currentIndex,
+  onSelected,
+}: CustomPickerProps) => {
+  return (
+    <>
+      <Text style={styles.title}>{label}</Text>
+      <View style={styles.wrapperHorizontal}>
+        <FlatList
+          horizontal
+          data={data}
+          keyExtractor={item => String(item)}
+          renderItem={({item, index}: {item: string; index: number}) => {
+            const selected = index === currentIndex;
+            return (
+              <TouchableWithoutFeedback onPress={() => onSelected(index)}>
+                <View
+                  style={[
+                    styles.itemStyleHorizontal,
+                    selected && styles.itemSelectedStyleHorizontal,
+                  ]}>
+                  <Text
+                    style={{
+                      textAlign: 'center',
+                      color: selected ? 'black' : 'grey',
+                      fontWeight: selected ? 'bold' : 'normal',
+                    }}>
+                    {item + ''}
+                  </Text>
+                </View>
+              </TouchableWithoutFeedback>
+            );
+          }}
+        />
+      </View>
+    </>
+  );
+};
+
+const fontStyles = ['normal', 'italic'];
+const fontVariants = [
+  undefined,
+  'small-caps',
+  'oldstyle-nums',
+  'lining-nums',
+  'tabular-nums',
+  'proportional-nums',
+];
+const fontWeights = [
+  'normal',
+  'bold',
+  '100',
+  '200',
+  '300',
+  '400',
+  '500',
+  '600',
+  '700',
+  '800',
+  '900',
+];
+const textAlignments = ['auto', 'left', 'right', 'center', 'justify'];
+const textDecorationLines = [
+  'none',
+  'underline',
+  'line-through',
+  'underline line-through',
+];
+const textDecorationStyles = ['solid', 'double', 'dotted', 'dashed'];
+const textTransformations = ['none', 'uppercase', 'lowercase', 'capitalize'];
+const textAlignmentsVertical = ['auto', 'top', 'bottom', 'center'];
+const writingDirections = ['auto', 'ltr', 'rtl'];
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  pargraphWrapper: {
+    backgroundColor: 'black',
+  },
+  paragraph: {
+    color: '#fff',
+    textDecorationColor: 'yellow',
+    textShadowColor: 'red',
+    textShadowRadius: 1,
+    padding: 24,
+  },
+  wrapperHorizontal: {
+    justifyContent: 'center',
+    color: 'black',
+  },
+  itemStyleHorizontal: {
+    marginRight: 10,
+    height: 50,
+    padding: 8,
+    borderWidth: 1,
+    borderColor: 'grey',
+    borderRadius: 8,
+    textAlign: 'center',
+    justifyContent: 'center',
+  },
+  itemSelectedStyleHorizontal: {
+    borderWidth: 2,
+    borderColor: '#06bcee',
+  },
+  platformContainer: {
+    marginTop: 8,
+    borderTopWidth: 1,
+  },
+  platformContainerTitle: {
+    marginTop: 8,
+  },
+  title: {
+    fontWeight: 'bold',
+    marginVertical: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+# Reference
+
+## Props
+
+### `color`
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `fontFamily`
+
+| Type   |
+| ------ |
+| string |
+
+The generic font families `system-ui`, `ui-sans-serif`, `ui-serif`, `ui-monospace`, and `ui-rounded` are supported on iOS.
+
+---
+
+### `fontSize`
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `fontStyle`
+
+| Type                         |
+| ---------------------------- |
+| enum(`'normal'`, `'italic'`) |
+
+---
+
+### `fontWeight`
+
+Specifies font weight. The values `'normal'` and `'bold'` are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen.
+
+| Type                                                                                                                  | Default    |
+| --------------------------------------------------------------------------------------------------------------------- | ---------- |
+| enum(`'normal'`, `'bold'`, `'100'`, `'200'`, `'300'`, `'400'`, `'500'`, `'600'`, `'700'`, `'800'`, `'900'`) or number | `'normal'` |
+
+---
+
+### `includeFontPadding` <div className="label android">Android</div>
+
+Set to `false` to remove extra font padding intended to make space for certain ascenders / descenders. With some fonts, this padding can make text look slightly misaligned when centered vertically. For best results also set `textAlignVertical` to `center`.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `true`  |
+
+---
+
+### `fontVariant`
+
+Allows you to set all the font variants for a font. Can be set by using an array of enums or a space-separated string e.g. `'small-caps common-ligatures'`.
+
+| Type                                                                                                                 | Default |
+| -------------------------------------------------------------------------------------------------------------------- | ------- |
+| array of enum(`'small-caps'`, `'oldstyle-nums'`, `'lining-nums'`, `'tabular-nums'`, `'proportional-nums'`) or string | `[]`    |
+
+---
+
+### `letterSpacing`
+
+Increase or decrease the spacing between characters. By default there is no extra letter spacing.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `lineHeight`
+
+Numeric value that controls the vertical spacing between lines of text within a text element. It specifies the distance between the baselines of consecutive lines of text.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `textAlign`
+
+Specifies text alignment. On Android, the value 'justify' is only supported on Oreo (8.0) or above (API level >= 26). The value will fallback to `left` on lower Android versions.
+
+| Type                                                         | Default  |
+| ------------------------------------------------------------ | -------- |
+| enum(`'auto'`, `'left'`, `'right'`, `'center'`, `'justify'`) | `'auto'` |
+
+---
+
+### `textAlignVertical` <div className="label android">Android</div>
+
+An alias for `verticalAlign` style prop, if you use both properties, `verticalAlign` will take precedence over `textAlignVertical`
+
+| Type                                            | Default  |
+| ----------------------------------------------- | -------- |
+| enum(`'auto'`, `'top'`, `'bottom'`, `'center'`) | `'auto'` |
+
+---
+
+### `textDecorationColor` <div className="label ios">iOS</div>
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `textDecorationLine`
+
+| Type                                                                        | Default  |
+| --------------------------------------------------------------------------- | -------- |
+| enum(`'none'`, `'underline'`, `'line-through'`, `'underline line-through'`) | `'none'` |
+
+---
+
+### `textDecorationStyle` <div className="label ios">iOS</div>
+
+| Type                                                | Default   |
+| --------------------------------------------------- | --------- |
+| enum(`'solid'`, `'double'`, `'dotted'`, `'dashed'`) | `'solid'` |
+
+---
+
+### `textShadowColor`
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `textShadowOffset`
+
+| Type                                        |
+| ------------------------------------------- |
+| object: `{width?: number, height?: number}` |
+
+---
+
+### `textShadowRadius`
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `textTransform`
+
+| Type                                                         | Default  |
+| ------------------------------------------------------------ | -------- |
+| enum(`'none'`, `'uppercase'`, `'lowercase'`, `'capitalize'`) | `'none'` |
+
+---
+
+### `verticalAlign` <div className="label android">Android</div>
+
+| Type                                            | Default  |
+| ----------------------------------------------- | -------- |
+| enum(`'auto'`, `'top'`, `'bottom'`, `'middle'`) | `'auto'` |
+
+---
+
+### `writingDirection` <div className="label ios">iOS</div>
+
+| Type                             | Default  |
+| -------------------------------- | -------- |
+| enum(`'auto'`, `'ltr'`, `'rtl'`) | `'auto'` |
+
+---
+
+### `userSelect`
+
+It allows the user to select text and to use the native copy and paste functionality. Has precedence over the `selectable` prop.
+
+| Type                                                     | Default |
+| -------------------------------------------------------- | ------- |
+| enum(`'auto'`, `'text'`, `'none'`, `'contain'`, `'all'`) | `none`  |
diff --git a/website/versioned_docs/version-0.85/text.md b/website/versioned_docs/version-0.85/text.md
index 3112485639c..0e72ec8c27b 100644
--- a/website/versioned_docs/version-0.85/text.md
+++ b/website/versioned_docs/version-0.85/text.md
@@ -1,781 +1,780 @@
----
-id: text
-title: Text
----
-
-A React component for displaying text.
-
-`Text` supports nesting, styling, and touch handling.
-
-In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines:
-
-```SnackPlayer name=Text%20Function%20Component%20Example
-import React, {useState} from 'react';
-import {Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const TextInANest = () => {
-  const [titleText, setTitleText] = useState("Bird's Nest");
-  const bodyText = 'This is not really a bird nest.';
-
-  const onPressTitle = () => {
-    setTitleText("Bird's Nest [pressed]");
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.baseText}>
-          <Text style={styles.titleText} onPress={onPressTitle}>
-            {titleText}
-            {'\n'}
-            {'\n'}
-          </Text>
-          <Text numberOfLines={5}>{bodyText}</Text>
-        </Text>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  baseText: {
-    fontFamily: 'Cochin',
-  },
-  titleText: {
-    fontSize: 20,
-    fontWeight: 'bold',
-  },
-});
-
-export default TextInANest;
-```
-
-## Nested text
-
-Both Android and iOS allow you to display formatted text by annotating ranges of a string with specific formatting like bold or colored text (`NSAttributedString` on iOS, `SpannableString` on Android). In practice, this is very tedious. For React Native, we decided to use the web paradigm for this, where you can nest text to achieve the same effect.
-
-```SnackPlayer name=Nested%20Text%20Example
-import React from 'react';
-import {Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const BoldAndBeautiful = () => (
-  <SafeAreaProvider>
-    <SafeAreaView style={styles.container}>
-      <Text style={styles.baseText}>
-        I am bold
-        <Text style={styles.innerText}> and red</Text>
-      </Text>
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  baseText: {
-    fontWeight: 'bold',
-  },
-  innerText: {
-    color: 'red',
-  },
-});
-
-export default BoldAndBeautiful;
-```
-
-Behind the scenes, React Native converts this to a flat `NSAttributedString` or `SpannableString` that contains the following information:
-
-```
-"I am bold and red"
-0-9: bold
-9-17: bold, red
-```
-
-## 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.
-
-```tsx
-<Text>
-  <Text>First part and </Text>
-  <Text>second part</Text>
-</Text>
-// Text container: the text will be inline, if the space allows it
-// |First part and second part|
-
-// otherwise, the text will flow as if it was one
-// |First part |
-// |and second |
-// |part       |
-
-<View>
-  <Text>First part and </Text>
-  <Text>second part</Text>
-</View>
-// View container: each text is its own block
-// |First part and|
-// |second part   |
-
-// otherwise, the text will flow in its own block
-// |First part |
-// |and        |
-// |second part|
-```
-
-## Limited Style Inheritance
-
-On the web, the usual way to set a font family and size for the entire document is to take advantage of inherited CSS properties like so:
-
-```css
-html {
-  font-family:
-    'lucida grande', tahoma, verdana, arial, sans-serif;
-  font-size: 11px;
-  color: #141823;
-}
-```
-
-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>`.
-
-```tsx
-// BAD: will raise exception, can't have a text node as child of a <View>
-<View>
-  Some text
-</View>
-
-// GOOD
-<View>
-  <Text>
-    Some text
-  </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.
-
-```tsx
-<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:
-
-```tsx
-const MyAppHeaderText = ({children}) => {
-  return (
-    <MyAppText>
-      <Text style={{fontSize: 20}}>{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.
-
-```tsx
-<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:
-
-- (Developer) React components are designed with strong isolation in mind: You should be able to drop a component anywhere in your application, trusting that as long as the props are the same, it will look and behave the same way. Text properties that could inherit from outside of the props would break this isolation.
-
-- (Implementor) The implementation of React Native is also simplified. We do not need to have a `fontFamily` field on every single element, and we do not need to potentially traverse the tree up to the root every time we display a text node. The style inheritance is only encoded inside of the native Text component and doesn't leak to other components or the system itself.
-
----
-
-# Reference
-
-## Props
-
-### `accessibilityHint`
-
-An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityLanguage` <div className="label ios">iOS</div>
-
-A value indicating which language should be used by the screen reader when the user interacts with the element. It should follow the [BCP 47 specification](https://www.rfc-editor.org/info/bcp47).
-
-See the [iOS `accessibilityLanguage` doc](https://developer.apple.com/documentation/objectivec/nsobject/1615192-accessibilitylanguage) for more information.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityLabel`
-
-Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the `Text` nodes separated by space.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityRole`
-
-Tells the screen reader to treat the currently focused on element as having a specific role.
-
-On iOS, these roles map to corresponding Accessibility Traits. Image button has the same functionality as if the trait was set to both 'image' and 'button'. See the [Accessibility guide](accessibility.md#accessibilitytraits-ios) for more information.
-
-On Android, these roles have similar functionality on TalkBack as adding Accessibility Traits does on Voiceover in iOS
-
-| Type                                                 |
-| ---------------------------------------------------- |
-| [AccessibilityRole](accessibility#accessibilityrole) |
-
----
-
-### `accessibilityState`
-
-Tells the screen reader to treat the currently focused on element as being in a specific state.
-
-You can provide one state, no state, or multiple states. The states must be passed in through an object, e.g. `{selected: true, disabled: true}`.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| [AccessibilityState](accessibility#accessibilitystate) |
-
----
-
-### `accessibilityActions`
-
-Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The `accessibilityActions` property should contain a list of action objects. Each action object should contain the field name and label.
-
-See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
-
-| Type  | Required |
-| ----- | -------- |
-| array | No       |
-
----
-
-### `onAccessibilityAction`
-
-Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.
-
-See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
-
-| Type     | Required |
-| -------- | -------- |
-| function | No       |
-
----
-
-### `accessible`
-
-When set to `true`, indicates that the view is an accessibility element.
-
-See the [Accessibility guide](accessibility#accessible-ios-android) for more information.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `true`  |
-
----
-
-### `adjustsFontSizeToFit`
-
-Specifies whether fonts should be scaled down automatically to fit given style constraints.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
----
-
-### `allowFontScaling`
-
-Specifies whether fonts should scale to respect Text Size accessibility settings.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `true`  |
-
----
-
-### `android_hyphenationFrequency` <div className="label android">Android</div>
-
-Sets the frequency of automatic hyphenation to use when determining word breaks on Android API Level 23+.
-
-| Type                                | Default  |
-| ----------------------------------- | -------- |
-| enum(`'none'`, `'normal'`,`'full'`) | `'none'` |
-
----
-
-### `aria-busy`
-
-Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-checked`
-
-Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
-| Type             | Default |
-| ---------------- | ------- |
-| boolean, 'mixed' | false   |
-
----
-
-### `aria-disabled`
-
-Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-expanded`
-
-Indicates whether an expandable element is currently expanded or collapsed.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-label`
-
-Defines a string value that labels an interactive element.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `aria-selected`
-
-Indicates whether a selectable element is currently selected or not.
-
-| Type    |
-| ------- |
-| boolean |
-
-### `dataDetectorType` <div className="label android">Android</div>
-
-Determines the types of data converted to clickable URLs in the text element. By default, no data types are detected.
-
-You can provide only one type.
-
-| Type                                                          | Default  |
-| ------------------------------------------------------------- | -------- |
-| enum(`'phoneNumber'`, `'link'`, `'email'`, `'none'`, `'all'`) | `'none'` |
-
----
-
-### `disabled` <div className="label android">Android</div>
-
-Specifies the disabled state of the text view for testing purposes.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `dynamicTypeRamp` <div className="label ios">iOS</div>
-
-The [Dynamic Type](https://developer.apple.com/documentation/uikit/uifont/scaling_fonts_automatically) ramp to apply to this element on iOS.
-
-| Type                                                                                                                                                     | Default  |
-| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
-| enum(`'caption2'`, `'caption1'`, `'footnote'`, `'subheadline'`, `'callout'`, `'body'`, `'headline'`, `'title3'`, `'title2'`, `'title1'`, `'largeTitle'`) | `'body'` |
-
----
-
-### `ellipsizeMode`
-
-When `numberOfLines` is set, this prop defines how the text will be truncated. `numberOfLines` must be set in conjunction with this prop.
-
-This can be one of the following values:
-
-- `head` - The line is displayed so that the end fits in the container and the missing text at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz"
-- `middle` - The line is displayed so that the beginning and end fit in the container and the missing text in the middle is indicated by an ellipsis glyph. "ab...yz"
-- `tail` - The line is displayed so that the beginning fits in the container and the missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..."
-- `clip` - Lines are not drawn past the edge of the text container.
-
-:::note
-On Android, when `numberOfLines` is set to a value higher than `1`, only `tail` value will work correctly.
-:::
-
-| Type                                           | Default |
-| ---------------------------------------------- | ------- |
-| enum(`'head'`, `'middle'`, `'tail'`, `'clip'`) | `tail`  |
-
----
-
-### `id`
-
-Used to locate this view from native code. Has precedence over `nativeID` prop.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `maxFontSizeMultiplier`
-
-Specifies the largest possible scale a font can reach when `allowFontScaling` is enabled. Possible values:
-
-- `null/undefined`: inherit from the parent node or the global default (0)
-- `0`: no max, ignore parent/global default
-- `>= 1`: sets the `maxFontSizeMultiplier` of this node to this value
-
-| Type   | Default     |
-| ------ | ----------- |
-| number | `undefined` |
-
----
-
-### `minimumFontScale`
-
-Specifies the smallest possible scale a font can reach when `adjustsFontSizeToFit` is enabled. (values 0.01-1.0).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nativeID`
-
-Used to locate this view from native code.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `numberOfLines`
-
-Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. Setting this property to `0` will result in unsetting this value, which means that no lines restriction will be applied.
-
-This prop is commonly used with `ellipsizeMode`.
-
-| Type   | Default |
-| ------ | ------- |
-| number | `0`     |
-
----
-
-### `onLayout`
-
-Invoked on mount and on layout changes.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
-
----
-
-### `onLongPress`
-
-This function is called on long press.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onMoveShouldSetResponder`
-
-Does this view want to "claim" touch responsiveness? This is called for every touch move on the `View` when it is not the responder.
-
-| Type                                                      |
-| --------------------------------------------------------- |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
-
----
-
-### `onPress`
-
-Function called on user press, triggered after `onPressOut`.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onPressIn`
-
-Called immediately when a touch is engaged, before `onPressOut` and `onPress`.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onPressOut`
-
-Called when a touch is released.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onResponderGrant`
-
-The View is now responding to touch events. This is the time to highlight and show the user what is happening.
-
-On Android, return true from this callback to prevent any other native components from becoming responder until this responder terminates.
-
-| Type                                                              |
-| ----------------------------------------------------------------- |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void ｜ boolean` |
-
----
-
-### `onResponderMove`
-
-The user is moving their finger.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onResponderRelease`
-
-Fired at the end of the touch.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onResponderTerminate`
-
-The responder has been taken from the `View`. Might be taken by other views after a call to `onResponderTerminationRequest`, or might be taken by the OS without asking (e.g., happens with control center/ notification center on iOS)
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onResponderTerminationRequest`
-
-Some other `View` wants to become a responder and is asking this `View` to release its responder. Returning `true` allows its release.
-
-| Type                                                      |
-| --------------------------------------------------------- |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
-
----
-
-### `onStartShouldSetResponderCapture`
-
-If a parent `View` wants to prevent a child `View` from becoming a responder on a touch start, it should have this handler which returns `true`.
-
-| Type                                                      |
-| --------------------------------------------------------- |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
-
----
-
-### `onTextLayout`
-
-Invoked on Text layout change.
-
-| Type                                                 |
-| ---------------------------------------------------- |
-| ([`TextLayoutEvent`](text#textlayoutevent)) => mixed |
-
----
-
-### `pressRetentionOffset`
-
-When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations.
-
-| Type                 |
-| -------------------- |
-| [Rect](rect), number |
-
----
-
-### `ref`
-
-A ref setter that will be assigned an [element node](element-nodes) when mounted.
-
-Note that `Text` components don't provide text nodes, the same way that paragraph elements (`<p>`) on Web are element nodes instead of text nodes. Text nodes can be found as their child nodes instead.
-
----
-
-### `role`
-
-`role` communicates the purpose of a component to the user of an assistive technology. Has precedence over the [`accessibilityRole`](text#accessibilityrole) prop.
-
-| Type                       |
-| -------------------------- |
-| [Role](accessibility#role) |
-
----
-
-### `selectable`
-
-Lets the user select text, to use the native copy and paste functionality.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
----
-
-### `selectionColor` <div className="label android">Android</div>
-
-The highlight color of the text.
-
-| Type            |
-| --------------- |
-| [color](colors) |
-
----
-
-### `style`
-
-| Type                                                                 |
-| -------------------------------------------------------------------- |
-| [Text Style](text-style-props), [View Style Props](view-style-props) |
-
----
-
-### `suppressHighlighting` <div className="label ios">iOS</div>
-
-When `true`, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
----
-
-### `testID`
-
-Used to locate this view in end-to-end tests.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `textBreakStrategy` <div className="label android">Android</div>
-
-Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced`.
-
-| Type                                            | Default       |
-| ----------------------------------------------- | ------------- |
-| enum(`'simple'`, `'highQuality'`, `'balanced'`) | `highQuality` |
-
----
-
-### `lineBreakStrategyIOS` <div className="label ios">iOS</div>
-
-Set line break strategy on iOS 14+. Possible values are `none`, `standard`, `hangul-word` and `push-out`.
-
-| Type                                                        | Default  |
-| ----------------------------------------------------------- | -------- |
-| enum(`'none'`, `'standard'`, `'hangul-word'`, `'push-out'`) | `'none'` |
-
-## Type Definitions
-
-### TextLayout
-
-`TextLayout` object is a part of [`TextLayoutEvent`](text#textlayoutevent) callback and contains the measurement data for `Text` line.
-
-#### Example
-
-```js
-{
-    capHeight: 10.496,
-    ascender: 14.624,
-    descender: 4,
-    width: 28.224,
-    height: 18.624,
-    xHeight: 6.048,
-    x: 0,
-    y: 0
-}
-```
-
-#### Properties
-
-| Name      | Type   | Optional | Description                                                         |
-| --------- | ------ | -------- | ------------------------------------------------------------------- |
-| ascender  | number | No       | The line ascender height after the text layout changes.             |
-| capHeight | number | No       | Height of capital letter above the baseline.                        |
-| descender | number | No       | The line descender height after the text layout changes.            |
-| height    | number | No       | Height of the line after the text layout changes.                   |
-| width     | number | No       | Width of the line after the text layout changes.                    |
-| x         | number | No       | Line X coordinate inside the Text component.                        |
-| xHeight   | number | No       | Distance between the baseline and median of the line (corpus size). |
-| y         | number | No       | Line Y coordinate inside the Text component.                        |
-
-### TextLayoutEvent
-
-`TextLayoutEvent` object is returned in the callback as a result of a component layout change. It contains a key called `lines` with a value which is an array containing [`TextLayout`](text#textlayout) object corresponded to every rendered text line.
-
-#### Example
-
-```js
-{
-  lines: [
-    TextLayout,
-    TextLayout,
-    // ...
-  ];
-  target: 1127;
-}
-```
-
-#### Properties
-
-| Name   | Type                                    | Optional | Description                                           |
-| ------ | --------------------------------------- | -------- | ----------------------------------------------------- |
-| lines  | array of [TextLayout](text#textlayout)s | No       | Provides the TextLayout data for every rendered line. |
-| target | number                                  | No       | The node id of the element.                           |
+---
+id: text
+title: Text
+---
+
+A React component for displaying text.
+
+`Text` supports nesting, styling, and touch handling.
+
+In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines:
+
+```SnackPlayer name=Text%20Function%20Component%20Example
+import {useState} from 'react';
+import {Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const TextInANest = () => {
+  const [titleText, setTitleText] = useState("Bird's Nest");
+  const bodyText = 'This is not really a bird nest.';
+
+  const onPressTitle = () => {
+    setTitleText("Bird's Nest [pressed]");
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.baseText}>
+          <Text style={styles.titleText} onPress={onPressTitle}>
+            {titleText}
+            {'\n'}
+            {'\n'}
+          </Text>
+          <Text numberOfLines={5}>{bodyText}</Text>
+        </Text>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  baseText: {
+    fontFamily: 'Cochin',
+  },
+  titleText: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+});
+
+export default TextInANest;
+```
+
+## Nested text
+
+Both Android and iOS allow you to display formatted text by annotating ranges of a string with specific formatting like bold or colored text (`NSAttributedString` on iOS, `SpannableString` on Android). In practice, this is very tedious. For React Native, we decided to use the web paradigm for this, where you can nest text to achieve the same effect.
+
+```SnackPlayer name=Nested%20Text%20Example
+import {Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const BoldAndBeautiful = () => (
+  <SafeAreaProvider>
+    <SafeAreaView style={styles.container}>
+      <Text style={styles.baseText}>
+        I am bold
+        <Text style={styles.innerText}> and red</Text>
+      </Text>
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  baseText: {
+    fontWeight: 'bold',
+  },
+  innerText: {
+    color: 'red',
+  },
+});
+
+export default BoldAndBeautiful;
+```
+
+Behind the scenes, React Native converts this to a flat `NSAttributedString` or `SpannableString` that contains the following information:
+
+```
+"I am bold and red"
+0-9: bold
+9-17: bold, red
+```
+
+## 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.
+
+```tsx
+<Text>
+  <Text>First part and </Text>
+  <Text>second part</Text>
+</Text>
+// Text container: the text will be inline, if the space allows it
+// |First part and second part|
+
+// otherwise, the text will flow as if it was one
+// |First part |
+// |and second |
+// |part       |
+
+<View>
+  <Text>First part and </Text>
+  <Text>second part</Text>
+</View>
+// View container: each text is its own block
+// |First part and|
+// |second part   |
+
+// otherwise, the text will flow in its own block
+// |First part |
+// |and        |
+// |second part|
+```
+
+## Limited Style Inheritance
+
+On the web, the usual way to set a font family and size for the entire document is to take advantage of inherited CSS properties like so:
+
+```css
+html {
+  font-family:
+    'lucida grande', tahoma, verdana, arial, sans-serif;
+  font-size: 11px;
+  color: #141823;
+}
+```
+
+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>`.
+
+```tsx
+// BAD: will raise exception, can't have a text node as child of a <View>
+<View>
+  Some text
+</View>
+
+// GOOD
+<View>
+  <Text>
+    Some text
+  </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.
+
+```tsx
+<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:
+
+```tsx
+const MyAppHeaderText = ({children}) => {
+  return (
+    <MyAppText>
+      <Text style={{fontSize: 20}}>{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.
+
+```tsx
+<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:
+
+- (Developer) React components are designed with strong isolation in mind: You should be able to drop a component anywhere in your application, trusting that as long as the props are the same, it will look and behave the same way. Text properties that could inherit from outside of the props would break this isolation.
+
+- (Implementor) The implementation of React Native is also simplified. We do not need to have a `fontFamily` field on every single element, and we do not need to potentially traverse the tree up to the root every time we display a text node. The style inheritance is only encoded inside of the native Text component and doesn't leak to other components or the system itself.
+
+---
+
+# Reference
+
+## Props
+
+### `accessibilityHint`
+
+An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityLanguage` <div className="label ios">iOS</div>
+
+A value indicating which language should be used by the screen reader when the user interacts with the element. It should follow the [BCP 47 specification](https://www.rfc-editor.org/info/bcp47).
+
+See the [iOS `accessibilityLanguage` doc](https://developer.apple.com/documentation/objectivec/nsobject/1615192-accessibilitylanguage) for more information.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityLabel`
+
+Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the `Text` nodes separated by space.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityRole`
+
+Tells the screen reader to treat the currently focused on element as having a specific role.
+
+On iOS, these roles map to corresponding Accessibility Traits. Image button has the same functionality as if the trait was set to both 'image' and 'button'. See the [Accessibility guide](accessibility.md#accessibilitytraits-ios) for more information.
+
+On Android, these roles have similar functionality on TalkBack as adding Accessibility Traits does on Voiceover in iOS
+
+| Type                                                 |
+| ---------------------------------------------------- |
+| [AccessibilityRole](accessibility#accessibilityrole) |
+
+---
+
+### `accessibilityState`
+
+Tells the screen reader to treat the currently focused on element as being in a specific state.
+
+You can provide one state, no state, or multiple states. The states must be passed in through an object, e.g. `{selected: true, disabled: true}`.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| [AccessibilityState](accessibility#accessibilitystate) |
+
+---
+
+### `accessibilityActions`
+
+Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The `accessibilityActions` property should contain a list of action objects. Each action object should contain the field name and label.
+
+See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
+
+| Type  | Required |
+| ----- | -------- |
+| array | No       |
+
+---
+
+### `onAccessibilityAction`
+
+Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.
+
+See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `accessible`
+
+When set to `true`, indicates that the view is an accessibility element.
+
+See the [Accessibility guide](accessibility#accessible-ios-android) for more information.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `true`  |
+
+---
+
+### `adjustsFontSizeToFit`
+
+Specifies whether fonts should be scaled down automatically to fit given style constraints.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+---
+
+### `allowFontScaling`
+
+Specifies whether fonts should scale to respect Text Size accessibility settings.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `true`  |
+
+---
+
+### `android_hyphenationFrequency` <div className="label android">Android</div>
+
+Sets the frequency of automatic hyphenation to use when determining word breaks on Android API Level 23+.
+
+| Type                                | Default  |
+| ----------------------------------- | -------- |
+| enum(`'none'`, `'normal'`,`'full'`) | `'none'` |
+
+---
+
+### `aria-busy`
+
+Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-checked`
+
+Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
+
+| Type             | Default |
+| ---------------- | ------- |
+| boolean, 'mixed' | false   |
+
+---
+
+### `aria-disabled`
+
+Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-expanded`
+
+Indicates whether an expandable element is currently expanded or collapsed.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-label`
+
+Defines a string value that labels an interactive element.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `aria-selected`
+
+Indicates whether a selectable element is currently selected or not.
+
+| Type    |
+| ------- |
+| boolean |
+
+### `dataDetectorType` <div className="label android">Android</div>
+
+Determines the types of data converted to clickable URLs in the text element. By default, no data types are detected.
+
+You can provide only one type.
+
+| Type                                                          | Default  |
+| ------------------------------------------------------------- | -------- |
+| enum(`'phoneNumber'`, `'link'`, `'email'`, `'none'`, `'all'`) | `'none'` |
+
+---
+
+### `disabled` <div className="label android">Android</div>
+
+Specifies the disabled state of the text view for testing purposes.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `dynamicTypeRamp` <div className="label ios">iOS</div>
+
+The [Dynamic Type](https://developer.apple.com/documentation/uikit/uifont/scaling_fonts_automatically) ramp to apply to this element on iOS.
+
+| Type                                                                                                                                                     | Default  |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
+| enum(`'caption2'`, `'caption1'`, `'footnote'`, `'subheadline'`, `'callout'`, `'body'`, `'headline'`, `'title3'`, `'title2'`, `'title1'`, `'largeTitle'`) | `'body'` |
+
+---
+
+### `ellipsizeMode`
+
+When `numberOfLines` is set, this prop defines how the text will be truncated. `numberOfLines` must be set in conjunction with this prop.
+
+This can be one of the following values:
+
+- `head` - The line is displayed so that the end fits in the container and the missing text at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz"
+- `middle` - The line is displayed so that the beginning and end fit in the container and the missing text in the middle is indicated by an ellipsis glyph. "ab...yz"
+- `tail` - The line is displayed so that the beginning fits in the container and the missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..."
+- `clip` - Lines are not drawn past the edge of the text container.
+
+:::note
+On Android, when `numberOfLines` is set to a value higher than `1`, only `tail` value will work correctly.
+:::
+
+| Type                                           | Default |
+| ---------------------------------------------- | ------- |
+| enum(`'head'`, `'middle'`, `'tail'`, `'clip'`) | `tail`  |
+
+---
+
+### `id`
+
+Used to locate this view from native code. Has precedence over `nativeID` prop.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `maxFontSizeMultiplier`
+
+Specifies the largest possible scale a font can reach when `allowFontScaling` is enabled. Possible values:
+
+- `null/undefined`: inherit from the parent node or the global default (0)
+- `0`: no max, ignore parent/global default
+- `>= 1`: sets the `maxFontSizeMultiplier` of this node to this value
+
+| Type   | Default     |
+| ------ | ----------- |
+| number | `undefined` |
+
+---
+
+### `minimumFontScale`
+
+Specifies the smallest possible scale a font can reach when `adjustsFontSizeToFit` is enabled. (values 0.01-1.0).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nativeID`
+
+Used to locate this view from native code.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `numberOfLines`
+
+Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. Setting this property to `0` will result in unsetting this value, which means that no lines restriction will be applied.
+
+This prop is commonly used with `ellipsizeMode`.
+
+| Type   | Default |
+| ------ | ------- |
+| number | `0`     |
+
+---
+
+### `onLayout`
+
+Invoked on mount and on layout changes.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
+
+---
+
+### `onLongPress`
+
+This function is called on long press.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onMoveShouldSetResponder`
+
+Does this view want to "claim" touch responsiveness? This is called for every touch move on the `View` when it is not the responder.
+
+| Type                                                      |
+| --------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
+
+---
+
+### `onPress`
+
+Function called on user press, triggered after `onPressOut`.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onPressIn`
+
+Called immediately when a touch is engaged, before `onPressOut` and `onPress`.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onPressOut`
+
+Called when a touch is released.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onResponderGrant`
+
+The View is now responding to touch events. This is the time to highlight and show the user what is happening.
+
+On Android, return true from this callback to prevent any other native components from becoming responder until this responder terminates.
+
+| Type                                                              |
+| ----------------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void ｜ boolean` |
+
+---
+
+### `onResponderMove`
+
+The user is moving their finger.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onResponderRelease`
+
+Fired at the end of the touch.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onResponderTerminate`
+
+The responder has been taken from the `View`. Might be taken by other views after a call to `onResponderTerminationRequest`, or might be taken by the OS without asking (e.g., happens with control center/ notification center on iOS)
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onResponderTerminationRequest`
+
+Some other `View` wants to become a responder and is asking this `View` to release its responder. Returning `true` allows its release.
+
+| Type                                                      |
+| --------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
+
+---
+
+### `onStartShouldSetResponderCapture`
+
+If a parent `View` wants to prevent a child `View` from becoming a responder on a touch start, it should have this handler which returns `true`.
+
+| Type                                                      |
+| --------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
+
+---
+
+### `onTextLayout`
+
+Invoked on Text layout change.
+
+| Type                                                 |
+| ---------------------------------------------------- |
+| ([`TextLayoutEvent`](text#textlayoutevent)) => mixed |
+
+---
+
+### `pressRetentionOffset`
+
+When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations.
+
+| Type                 |
+| -------------------- |
+| [Rect](rect), number |
+
+---
+
+### `ref`
+
+A ref setter that will be assigned an [element node](element-nodes) when mounted.
+
+Note that `Text` components don't provide text nodes, the same way that paragraph elements (`<p>`) on Web are element nodes instead of text nodes. Text nodes can be found as their child nodes instead.
+
+---
+
+### `role`
+
+`role` communicates the purpose of a component to the user of an assistive technology. Has precedence over the [`accessibilityRole`](text#accessibilityrole) prop.
+
+| Type                       |
+| -------------------------- |
+| [Role](accessibility#role) |
+
+---
+
+### `selectable`
+
+Lets the user select text, to use the native copy and paste functionality.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+---
+
+### `selectionColor` <div className="label android">Android</div>
+
+The highlight color of the text.
+
+| Type            |
+| --------------- |
+| [color](colors) |
+
+---
+
+### `style`
+
+| Type                                                                 |
+| -------------------------------------------------------------------- |
+| [Text Style](text-style-props), [View Style Props](view-style-props) |
+
+---
+
+### `suppressHighlighting` <div className="label ios">iOS</div>
+
+When `true`, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+---
+
+### `testID`
+
+Used to locate this view in end-to-end tests.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `textBreakStrategy` <div className="label android">Android</div>
+
+Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced`.
+
+| Type                                            | Default       |
+| ----------------------------------------------- | ------------- |
+| enum(`'simple'`, `'highQuality'`, `'balanced'`) | `highQuality` |
+
+---
+
+### `lineBreakStrategyIOS` <div className="label ios">iOS</div>
+
+Set line break strategy on iOS 14+. Possible values are `none`, `standard`, `hangul-word` and `push-out`.
+
+| Type                                                        | Default  |
+| ----------------------------------------------------------- | -------- |
+| enum(`'none'`, `'standard'`, `'hangul-word'`, `'push-out'`) | `'none'` |
+
+## Type Definitions
+
+### TextLayout
+
+`TextLayout` object is a part of [`TextLayoutEvent`](text#textlayoutevent) callback and contains the measurement data for `Text` line.
+
+#### Example
+
+```js
+{
+    capHeight: 10.496,
+    ascender: 14.624,
+    descender: 4,
+    width: 28.224,
+    height: 18.624,
+    xHeight: 6.048,
+    x: 0,
+    y: 0
+}
+```
+
+#### Properties
+
+| Name      | Type   | Optional | Description                                                         |
+| --------- | ------ | -------- | ------------------------------------------------------------------- |
+| ascender  | number | No       | The line ascender height after the text layout changes.             |
+| capHeight | number | No       | Height of capital letter above the baseline.                        |
+| descender | number | No       | The line descender height after the text layout changes.            |
+| height    | number | No       | Height of the line after the text layout changes.                   |
+| width     | number | No       | Width of the line after the text layout changes.                    |
+| x         | number | No       | Line X coordinate inside the Text component.                        |
+| xHeight   | number | No       | Distance between the baseline and median of the line (corpus size). |
+| y         | number | No       | Line Y coordinate inside the Text component.                        |
+
+### TextLayoutEvent
+
+`TextLayoutEvent` object is returned in the callback as a result of a component layout change. It contains a key called `lines` with a value which is an array containing [`TextLayout`](text#textlayout) object corresponded to every rendered text line.
+
+#### Example
+
+```js
+{
+  lines: [
+    TextLayout,
+    TextLayout,
+    // ...
+  ];
+  target: 1127;
+}
+```
+
+#### Properties
+
+| Name   | Type                                    | Optional | Description                                           |
+| ------ | --------------------------------------- | -------- | ----------------------------------------------------- |
+| lines  | array of [TextLayout](text#textlayout)s | No       | Provides the TextLayout data for every rendered line. |
+| target | number                                  | No       | The node id of the element.                           |
diff --git a/website/versioned_docs/version-0.85/textinput.md b/website/versioned_docs/version-0.85/textinput.md
index e6b91315ff2..f9adb52b513 100644
--- a/website/versioned_docs/version-0.85/textinput.md
+++ b/website/versioned_docs/version-0.85/textinput.md
@@ -1,1146 +1,1146 @@
----
-id: textinput
-title: TextInput
----
-
-A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.
-
-The most basic use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. A minimal example:
-
-```SnackPlayer name=TextInput%20Example
-import React from 'react';
-import {StyleSheet, TextInput} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const TextInputExample = () => {
-  const [text, onChangeText] = React.useState('Useless Text');
-  const [number, onChangeNumber] = React.useState('');
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView>
-        <TextInput
-          style={styles.input}
-          onChangeText={onChangeText}
-          value={text}
-        />
-        <TextInput
-          style={styles.input}
-          onChangeText={onChangeNumber}
-          value={number}
-          placeholder="useless placeholder"
-          keyboardType="numeric"
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  input: {
-    height: 40,
-    margin: 12,
-    borderWidth: 1,
-    padding: 10,
-  },
-});
-
-export default TextInputExample;
-```
-
-Two methods exposed via the native element are `.focus()` and `.blur()` that will focus or blur the TextInput programmatically.
-
-Note that some props are only available with `multiline={true/false}`. Additionally, border styles that apply to only one side of the element (e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if `multiline=true`. To achieve the same effect, you can wrap your `TextInput` in a `View`:
-
-```SnackPlayer name=Multiline%20TextInput%20Example
-import React from 'react';
-import {TextInput, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const MultilineTextInputExample = () => {
-  const [value, onChangeText] = React.useState('Useless Multiline Placeholder');
-
-  // If you type something in the text box that is a color,
-  // the background will change to that color.
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView
-        style={{
-          flex: 1,
-          backgroundColor: value.toLowerCase(),
-        }}>
-        <TextInput
-          editable
-          multiline
-          numberOfLines={4}
-          maxLength={40}
-          onChangeText={text => onChangeText(text)}
-          value={value}
-          style={styles.textInput}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  textInput: {
-    padding: 10,
-    borderColor: '#000',
-    borderWidth: 1,
-    margin: 12,
-  },
-});
-
-export default MultilineTextInputExample;
-```
-
-`TextInput` has a border at the bottom of its view by default. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this are to either not set height explicitly, in which case the system will take care of displaying the border in the correct position, or to not display the border by setting `underlineColorAndroid` to transparent.
-
-Note that on Android performing text selection in an input can change the app's activity `windowSoftInputMode` param to `adjustResize`. This may cause issues with components that have position: 'absolute' while the keyboard is active. To avoid this behavior either specify `windowSoftInputMode` in AndroidManifest.xml ( https://developer.android.com/guide/topics/manifest/activity-element.html ) or control this param programmatically with native code.
-
----
-
-# Reference
-
-## Props
-
-### [View Props](view.md#props)
-
-Inherits [View Props](view.md#props).
-
----
-
-### `allowFontScaling`
-
-Specifies whether fonts should scale to respect Text Size accessibility settings. The default is `true`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `autoCapitalize`
-
-Tells `TextInput` to automatically capitalize certain characters. This property is not supported by some keyboard types such as `name-phone-pad`.
-
-- `characters`: all characters.
-- `words`: first letter of each word.
-- `sentences`: first letter of each sentence (_default_).
-- `none`: don't auto capitalize anything.
-
-| Type                                             |
-| ------------------------------------------------ |
-| enum('none', 'sentences', 'words', 'characters') |
-
----
-
-### `autoComplete`
-
-Specifies autocomplete hints for the system, so it can provide autofill. On Android, the system will always attempt to offer autofill by using heuristics to identify the type of content. To disable autocomplete, set `autoComplete` to `off`.
-
-The following values work across platforms:
-
-- `additional-name`
-- `address-line1`
-- `address-line2`
-- `birthdate-day` (iOS 17+)
-- `birthdate-full` (iOS 17+)
-- `birthdate-month` (iOS 17+)
-- `birthdate-year` (iOS 17+)
-- `cc-csc` (iOS 17+)
-- `cc-exp` (iOS 17+)
-- `cc-exp-day` (iOS 17+)
-- `cc-exp-month` (iOS 17+)
-- `cc-exp-year` (iOS 17+)
-- `cc-number`
-- `country`
-- `current-password`
-- `email`
-- `family-name`
-- `given-name`
-- `honorific-prefix`
-- `honorific-suffix`
-- `name`
-- `new-password`
-- `off`
-- `one-time-code`
-- `postal-code`
-- `street-address`
-- `tel`
-- `username`
-
-<div className="label basic ios">iOS</div>
-
-The following values work on iOS only:
-
-- `cc-family-name` (iOS 17+)
-- `cc-given-name` (iOS 17+)
-- `cc-middle-name` (iOS 17+)
-- `cc-name` (iOS 17+)
-- `cc-type` (iOS 17+)
-- `nickname`
-- `organization`
-- `organization-title`
-- `url`
-
-<div className="label basic android">Android</div>
-
-The following values work on Android only:
-
-- `gender`
-- `name-family`
-- `name-given`
-- `name-middle`
-- `name-middle-initial`
-- `name-prefix`
-- `name-suffix`
-- `password`
-- `password-new`
-- `postal-address`
-- `postal-address-country`
-- `postal-address-extended`
-- `postal-address-extended-postal-code`
-- `postal-address-locality`
-- `postal-address-region`
-- `sms-otp`
-- `tel-country-code`
-- `tel-device`
-- `tel-national`
-- `username-new`
-
-| Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| enum('additional-name', 'address-line1', 'address-line2', 'birthdate-day', 'birthdate-full', 'birthdate-month', 'birthdate-year', 'cc-csc', 'cc-exp', 'cc-exp-day', 'cc-exp-month', 'cc-exp-year', 'cc-number', 'country', 'current-password', 'email', 'family-name', 'given-name', 'honorific-prefix', 'honorific-suffix', 'name', 'new-password', 'off', 'one-time-code', 'postal-code', 'street-address', 'tel', 'username', 'cc-family-name', 'cc-given-name', 'cc-middle-name', 'cc-name', 'cc-type', 'nickname', 'organization', 'organization-title', 'url', 'gender', 'name-family', 'name-given', 'name-middle', 'name-middle-initial', 'name-prefix', 'name-suffix', 'password', 'password-new', 'postal-address', 'postal-address-country', 'postal-address-extended', 'postal-address-extended-postal-code', 'postal-address-locality', 'postal-address-region', 'sms-otp', 'tel-country-code', 'tel-device', 'tel-national', 'username-new') |
-
----
-
-### `autoCorrect`
-
-If `false`, disables auto-correct. The default value is `true`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `autoFocus`
-
-If `true`, focuses the input. The default value is `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### 🗑️ `blurOnSubmit`
-
-:::warning[Deprecated]
-Note that `submitBehavior` now takes the place of `blurOnSubmit` and will override any behavior defined by `blurOnSubmit`. See [submitBehavior](textinput#submitbehavior).
-:::
-
-If `true`, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting `blurOnSubmit` to `true` means that pressing return will blur the field and trigger the `onSubmitEditing` event instead of inserting a newline into the field.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `caretHidden`
-
-If `true`, caret is hidden. The default value is `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `clearButtonMode` <div className="label ios">iOS</div>
-
-When the clear button should appear on the right side of the text view. This property is supported only for single-line TextInput component. The default value is `never`.
-
-| Type                                                       |
-| ---------------------------------------------------------- |
-| enum('never', 'while-editing', 'unless-editing', 'always') |
-
----
-
-### `clearTextOnFocus` <div className="label ios">iOS</div>
-
-If `true`, clears the text field automatically when editing begins.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `contextMenuHidden`
-
-If `true`, context menu is hidden. The default value is `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `dataDetectorTypes` <div className="label ios">iOS</div>
-
-Determines the types of data converted to clickable URLs in the text input. Only valid if `multiline={true}` and `editable={false}`. By default no data types are detected.
-
-You can provide one type or an array of many types.
-
-Possible values for `dataDetectorTypes` are:
-
-- `'phoneNumber'`
-- `'link'`
-- `'address'`
-- `'calendarEvent'`
-- `'none'`
-- `'all'`
-
-| Type                                                                                                                                                     |
-| -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), ,array of enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all') |
-
----
-
-### `defaultValue`
-
-Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `disableKeyboardShortcuts` <div className="label ios">iOS</div>
-
-If `true`, the keyboard shortcuts (undo/redo and copy buttons) are disabled.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `cursorColor` <div className="label android">Android</div>
-
-When provided it will set the color of the cursor (or "caret") in the component. Unlike the behavior of `selectionColor` the cursor color will be set independently from the color of the text selection box.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `disableFullscreenUI` <div className="label android">Android</div>
-
-When `false`, if there is a small amount of space available around a text input (e.g. landscape orientation on a phone), the OS may choose to have the user edit the text inside of a full screen text input mode. When `true`, this feature is disabled and users will always edit the text directly inside of the text input. Defaults to `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `editable`
-
-If `false`, text is not editable. The default value is `true`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `enablesReturnKeyAutomatically` <div className="label ios">iOS</div>
-
-If `true`, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `enterKeyHint`
-
-Determines what text should be shown to the return key. Has precedence over the `returnKeyType` prop.
-
-The following values work across platforms:
-
-- `done`
-- `next`
-- `search`
-- `send`
-- `go`
-
-_Android Only_
-
-The following values work on Android only:
-
-- `previous`
-
-_iOS Only_
-
-The following values work on iOS only:
-
-- `enter`
-
-| Type                                                              |
-| ----------------------------------------------------------------- |
-| enum('enter', 'done', 'next', 'previous', 'search', 'send', 'go') |
-
----
-
-### `importantForAutofill` <div className="label android">Android</div>
-
-Tells the operating system whether the individual fields in your app should be included in a view structure for autofill purposes on Android API Level 26+. Possible values are `auto`, `no`, `noExcludeDescendants`, `yes`, and `yesExcludeDescendants`. The default value is `auto`.
-
-- `auto`: Let the Android System use its heuristics to determine if the view is important for autofill.
-- `no`: This view isn't important for autofill.
-- `noExcludeDescendants`: This view and its children aren't important for autofill.
-- `yes`: This view is important for autofill.
-- `yesExcludeDescendants`: This view is important for autofill, but its children aren't important for autofill.
-
-| Type                                                                       |
-| -------------------------------------------------------------------------- |
-| enum('auto', 'no', 'noExcludeDescendants', 'yes', 'yesExcludeDescendants') |
-
----
-
-### `inlineImageLeft` <div className="label android">Android</div>
-
-If defined, the provided image resource will be rendered on the left. The image resource must be inside `/android/app/src/main/res/drawable` and referenced like
-
-```
-<TextInput
- inlineImageLeft='search_icon'
-/>
-```
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `inlineImagePadding` <div className="label android">Android</div>
-
-Padding between the inline image, if any, and the text input itself.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `inputAccessoryViewID` <div className="label ios">iOS</div>
-
-An optional identifier which links a custom [InputAccessoryView](inputaccessoryview.md) to this text input. The InputAccessoryView is rendered above the keyboard when this text input is focused.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `inputAccessoryViewButtonLabel` <div className="label ios">iOS</div>
-
-An optional label that overrides the default [InputAccessoryView](inputaccessoryview.md) button label.
-
-By default, the default button label is not localized. Use this property to provide a localized version.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `inputMode`
-
-Works like the `inputmode` attribute in HTML, it determines which keyboard to open, e.g. `numeric` and has precedence over `keyboardType`.
-
-Support the following values:
-
-- `none`
-- `text`
-- `decimal`
-- `numeric`
-- `tel`
-- `search`
-- `email`
-- `url`
-
-| Type                                                                        |
-| --------------------------------------------------------------------------- |
-| enum('decimal', 'email', 'none', 'numeric', 'search', 'tel', 'text', 'url') |
-
----
-
-### `keyboardAppearance` <div className="label ios">iOS</div>
-
-Determines the color of the keyboard.
-
-| Type                             |
-| -------------------------------- |
-| enum('default', 'light', 'dark') |
-
----
-
-### `keyboardType`
-
-Determines which keyboard to open, e.g.`numeric`.
-
-See screenshots of all the types [here](https://davidl.fr/blog/keyboard-react-native-ios-android#all-react-native-keyboard-type-examples-i-os-on-the-left-android-on-the-right).
-
-The following values work across platforms:
-
-- `default`
-- `number-pad`
-- `decimal-pad`
-- `numeric`
-- `email-address`
-- `phone-pad`
-- `url`
-
-_iOS Only_
-
-The following values work on iOS only:
-
-- `ascii-capable`
-- `numbers-and-punctuation`
-- `name-phone-pad`
-- `twitter`
-- `web-search`
-
-_Android Only_
-
-The following values work on Android only:
-
-- `visible-password`
-
-| Type                                                                                                                                                                                                    |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', 'visible-password') |
-
----
-
-### `lineBreakStrategyIOS` <div className="label ios">iOS</div>
-
-Set line break strategy on iOS 14+. Possible values are `none`, `standard`, `hangul-word` and `push-out`.
-
-| Type                                                        | Default  |
-| ----------------------------------------------------------- | -------- |
-| enum(`'none'`, `'standard'`, `'hangul-word'`, `'push-out'`) | `'none'` |
-
----
-
-### `lineBreakModeIOS` <div className="label ios">iOS</div>
-
-Set line break mode on iOS. Possible values are `wordWrapping`, `char`, `clip`, `head`, `middle` and `tail`.
-
-| Type                                                                       | Default          |
-| -------------------------------------------------------------------------- | ---------------- |
-| enum(`'wordWrapping'`, `'char'`, `'clip'`, `'head'`, `'middle'`, `'tail'`) | `'wordWrapping'` |
-
----
-
-### `maxFontSizeMultiplier`
-
-Specifies largest possible scale a font can reach when `allowFontScaling` is enabled. Possible values:
-
-- `null/undefined` (default): inherit from the parent node or the global default (0)
-- `0`: no max, ignore parent/global default
-- `>= 1`: sets the `maxFontSizeMultiplier` of this node to this value
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `maxLength`
-
-Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `multiline`
-
-If `true`, the text input can be multiple lines. The default value is `false`.
-
-:::note
-It is important to note that this aligns the text to the top on iOS, and centers it on Android. Use with `textAlignVertical` set to `top` for the same behavior in both platforms.
-:::
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `numberOfLines`
-
-:::note
-`numberOfLines` on iOS is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Sets the maximum number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `onBlur`
-
-Callback that is called when the text input is blurred.
-
-:::note
-If you are attempting to access the `text` value from `nativeEvent` keep in mind that the resulting value you get can be `undefined` which can cause unintended errors. If you are trying to find the last value of TextInput, you can use the [`onEndEditing`](textinput#onendediting) event, which is fired upon completion of editing.
-:::
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
-
----
-
-### `onChange`
-
-Callback that is called when the text input's text changes.
-
-| Type                                                  |
-| ----------------------------------------------------- |
-| (`{nativeEvent: {eventCount, target, text}}`) => void |
-
----
-
-### `onChangeText`
-
-Callback that is called when the text input's text changes. Changed text is passed as a single string argument to the callback handler.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onContentSizeChange`
-
-Callback that is called when the text input's content size changes.
-
-Only called for multiline text inputs.
-
-| Type                                                       |
-| ---------------------------------------------------------- |
-| (`{nativeEvent: {contentSize: {width, height} }}`) => void |
-
----
-
-### `onEndEditing`
-
-Callback that is called when text input ends.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onPressIn`
-
-Callback that is called when a touch is engaged.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onPressOut`
-
-Callback that is called when a touch is released.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onFocus`
-
-Callback that is called when the text input is focused.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
-
----
-
-### `onKeyPress`
-
-Callback that is called when a key is pressed. This will be called with object where `keyValue` is `'Enter'` or `'Backspace'` for respective keys and the typed-in character otherwise including `' '` for space. Fires before `onChange` callbacks. Note: on Android only the inputs from soft keyboard are handled, not the hardware keyboard inputs.
-
-| Type                                        |
-| ------------------------------------------- |
-| (`{nativeEvent: {key: keyValue} }`) => void |
-
----
-
-### `onLayout`
-
-Invoked on mount and on layout changes.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
-
----
-
-### `onScroll`
-
-Invoked on content scroll. May also contain other properties from `ScrollEvent` but on Android `contentSize` is not provided for performance reasons.
-
-| Type                                                |
-| --------------------------------------------------- |
-| (`{nativeEvent: {contentOffset: {x, y} }}`) => void |
-
----
-
-### `onSelectionChange`
-
-Callback that is called when the text input selection is changed.
-
-| Type                                                  |
-| ----------------------------------------------------- |
-| (`{nativeEvent: {selection: {start, end} }}`) => void |
-
----
-
-### `onSubmitEditing`
-
-Callback that is called when the text input's submit button is pressed.
-
-| Type                                                  |
-| ----------------------------------------------------- |
-| (`{nativeEvent: {text, eventCount, target}}`) => void |
-
-Note that on iOS this method isn't called when using `keyboardType="phone-pad"`.
-
----
-
-### `placeholder`
-
-The string that will be rendered before text input has been entered.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `placeholderTextColor`
-
-The text color of the placeholder string.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `readOnly`
-
-If `true`, text is not editable. The default value is `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `returnKeyLabel` <div className="label android">Android</div>
-
-Sets the return key to the label. Use it instead of `returnKeyType`.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `returnKeyType`
-
-Determines how the return key should look. On Android you can also use `returnKeyLabel`.
-
-_Cross platform_
-
-The following values work across platforms:
-
-- `done`
-- `go`
-- `next`
-- `search`
-- `send`
-
-_Android Only_
-
-The following values work on Android only:
-
-- `none`
-- `previous`
-
-_iOS Only_
-
-The following values work on iOS only:
-
-- `default`
-- `emergency-call`
-- `google`
-- `join`
-- `route`
-- `yahoo`
-
-| Type                                                                                                                              |
-| --------------------------------------------------------------------------------------------------------------------------------- |
-| enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo') |
-
-### `rejectResponderTermination` <div className="label ios">iOS</div>
-
-If `true`, allows TextInput to pass touch events to the parent component. This allows components such as SwipeableListView to be swipeable from the TextInput on iOS, as is the case on Android by default. If `false`, TextInput always asks to handle the input (except when disabled). The default value is `true`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `rows` <div className="label android">Android</div>
-
-Sets the number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `scrollEnabled` <div className="label ios">iOS</div>
-
-If `false`, scrolling of the text view will be disabled. The default value is `true`. Only works with `multiline={true}`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `secureTextEntry`
-
-If `true`, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is `false`. Does not work with `multiline={true}`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `selection`
-
-The start and end of the text input's selection. Set start and end to the same value to position the cursor.
-
-| Type                                  |
-| ------------------------------------- |
-| object: `{start: number,end: number}` |
-
----
-
-### `selectionColor`
-
-The highlight, selection handle and cursor color of the text input.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `selectionHandleColor` <div className="label android">Android</div>
-
-Sets the color of the selection handle. Unlike `selectionColor`, it allows the selection handle color to be customized independently of the selection's color.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `selectTextOnFocus`
-
-If `true`, all text will automatically be selected on focus.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `showSoftInputOnFocus`
-
-When `false`, it will prevent the soft keyboard from showing when the field is focused. The default value is `true`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `smartInsertDelete` <div className="label ios">iOS</div>
-
-If `false`, the iOS system will not insert an extra space after a paste operation neither delete one or two spaces after a cut or delete operation.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `true`  |
-
----
-
-### `spellCheck` <div className="label ios">iOS</div>
-
-If `false`, disables spell-check style (i.e. red underlines). The default value is inherited from `autoCorrect`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `submitBehavior`
-
-When the return key is pressed,
-
-For single line inputs:
-
-- `'newline'` defaults to `'blurAndSubmit'`
-- `undefined` defaults to `'blurAndSubmit'`
-
-For multiline inputs:
-
-- `'newline'` adds a newline
-- `undefined` defaults to `'newline'`
-
-For both single line and multiline inputs:
-
-- `'submit'` will only send a submit event and not blur the input
-- `'blurAndSubmit`' will both blur the input and send a submit event
-
-| Type                                       |
-| ------------------------------------------ |
-| enum('submit', 'blurAndSubmit', 'newline') |
-
----
-
-### `textAlign`
-
-Align the input text to the left, center, or right sides of the input field.
-
-Possible values for `textAlign` are:
-
-- `left`
-- `center`
-- `right`
-
-| Type                            |
-| ------------------------------- |
-| enum('left', 'center', 'right') |
-
----
-
-### `textContentType` <div className="label ios">iOS</div>
-
-Give the keyboard and the system information about the expected semantic meaning for the content that users enter.
-
-:::note
-[`autoComplete`](#autocomplete), provides the same functionality and is available for all platforms. You can use [`Platform.select`](/docs/next/platform#select) for differing platform behaviors.
-
-Avoid using both `textContentType` and `autoComplete`. For backwards compatibility, `textContentType` takes precedence when both properties are set.
-:::
-
-You can set `textContentType` to `username` or `password` to enable autofill of login details from the device keychain.
-
-`newPassword` can be used to indicate a new password input the user may want to save in the keychain, and `oneTimeCode` can be used to indicate that a field can be autofilled by a code arriving in an SMS.
-
-To disable autofill, set `textContentType` to `none`.
-
-Possible values for `textContentType` are:
-
-- `none`
-- `addressCity`
-- `addressCityAndState`
-- `addressState`
-- `birthdate` (iOS 17+)
-- `birthdateDay` (iOS 17+)
-- `birthdateMonth` (iOS 17+)
-- `birthdateYear` (iOS 17+)
-- `countryName`
-- `creditCardExpiration` (iOS 17+)
-- `creditCardExpirationMonth` (iOS 17+)
-- `creditCardExpirationYear` (iOS 17+)
-- `creditCardFamilyName` (iOS 17+)
-- `creditCardGivenName` (iOS 17+)
-- `creditCardMiddleName` (iOS 17+)
-- `creditCardName` (iOS 17+)
-- `creditCardNumber`
-- `creditCardSecurityCode` (iOS 17+)
-- `creditCardType` (iOS 17+)
-- `emailAddress`
-- `familyName`
-- `fullStreetAddress`
-- `givenName`
-- `jobTitle`
-- `location`
-- `middleName`
-- `name`
-- `namePrefix`
-- `nameSuffix`
-- `newPassword`
-- `nickname`
-- `oneTimeCode`
-- `organizationName`
-- `password`
-- `postalCode`
-- `streetAddressLine1`
-- `streetAddressLine2`
-- `sublocality`
-- `telephoneNumber`
-- `URL`
-- `username`
-
-| Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| enum('none', 'addressCity', 'addressCityAndState', 'addressState', 'birthdate', 'birthdateDay', 'birthdateMonth', 'birthdateYear', 'countryName', 'creditCardExpiration', 'creditCardExpirationMonth', 'creditCardExpirationYear', 'creditCardFamilyName', 'creditCardGivenName', 'creditCardMiddleName', 'creditCardName', 'creditCardNumber', 'creditCardSecurityCode', 'creditCardType', 'emailAddress', 'familyName', 'fullStreetAddress', 'givenName', 'jobTitle', 'location', 'middleName', 'name', 'namePrefix', 'nameSuffix', 'newPassword', 'nickname', 'oneTimeCode', 'organizationName', 'password', 'postalCode', 'streetAddressLine1', 'streetAddressLine2', 'sublocality', 'telephoneNumber', 'URL', 'username') |
-
----
-
-### `passwordRules` <div className="label ios">iOS</div>
-
-When using `textContentType` as `newPassword` on iOS we can let the OS know the minimum requirements of the password so that it can generate one that will satisfy them. In order to create a valid string for `PasswordRules` take a look to the [Apple Docs](https://developer.apple.com/password-rules/).
-
-:::tip
-If passwords generation dialog doesn't appear please make sure that:
-
-- AutoFill is enabled: **Settings** → **Passwords & Accounts** → toggle "On" the **AutoFill Passwords**,
-- iCloud Keychain is used: **Settings** → **Apple ID** → **iCloud** → **Keychain** → toggle "On" the **iCloud Keychain**.
-  :::
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `style`
-
-Note that not all Text styles are supported, an incomplete list of what is not supported includes:
-
-- `borderLeftWidth`
-- `borderTopWidth`
-- `borderRightWidth`
-- `borderBottomWidth`
-- `borderTopLeftRadius`
-- `borderTopRightRadius`
-- `borderBottomRightRadius`
-- `borderBottomLeftRadius`
-
-[Styles](style.md)
-
-| Type                  |
-| --------------------- |
-| [Text](text.md#style) |
-
----
-
-### `textBreakStrategy` <div className="label android">Android</div>
-
-Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced` The default value is `highQuality`.
-
-| Type                                      |
-| ----------------------------------------- |
-| enum('simple', 'highQuality', 'balanced') |
-
----
-
-### `underlineColorAndroid` <div className="label android">Android</div>
-
-The color of the `TextInput` underline.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `value`
-
-The value to show for the text input. `TextInput` is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker.
-
-| Type   |
-| ------ |
-| string |
-
-## Methods
-
-### `.focus()`
-
-```tsx
-focus();
-```
-
-Makes the native input request focus.
-
-### `.blur()`
-
-```tsx
-blur();
-```
-
-Makes the native input lose focus.
-
-### `clear()`
-
-```tsx
-clear();
-```
-
-Removes all text from the `TextInput`.
-
----
-
-### `isFocused()`
-
-```tsx
-isFocused(): boolean;
-```
-
-Returns `true` if the input is currently focused; `false` otherwise.
-
-# Known issues
-
-- [react-native#19096](https://github.com/facebook/react-native/issues/19096): Doesn't support Android's `onKeyPreIme`.
-- [react-native#19366](https://github.com/facebook/react-native/issues/19366): Calling .focus() after closing Android's keyboard via back button doesn't bring keyboard up again.
-- [react-native#26799](https://github.com/facebook/react-native/issues/26799): Doesn't support Android's `secureTextEntry` when `keyboardType="email-address"` or `keyboardType="phone-pad"`.
+---
+id: textinput
+title: TextInput
+---
+
+A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.
+
+The most basic use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. A minimal example:
+
+```SnackPlayer name=TextInput%20Example
+import {useState} from 'react';
+import {StyleSheet, TextInput} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const TextInputExample = () => {
+  const [text, onChangeText] = useState('Useless Text');
+  const [number, onChangeNumber] = useState('');
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView>
+        <TextInput
+          style={styles.input}
+          onChangeText={onChangeText}
+          value={text}
+        />
+        <TextInput
+          style={styles.input}
+          onChangeText={onChangeNumber}
+          value={number}
+          placeholder="useless placeholder"
+          keyboardType="numeric"
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  input: {
+    height: 40,
+    margin: 12,
+    borderWidth: 1,
+    padding: 10,
+  },
+});
+
+export default TextInputExample;
+```
+
+Two methods exposed via the native element are `.focus()` and `.blur()` that will focus or blur the TextInput programmatically.
+
+Note that some props are only available with `multiline={true/false}`. Additionally, border styles that apply to only one side of the element (e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if `multiline=true`. To achieve the same effect, you can wrap your `TextInput` in a `View`:
+
+```SnackPlayer name=Multiline%20TextInput%20Example
+import {useState} from 'react';
+import {TextInput, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const MultilineTextInputExample = () => {
+  const [value, onChangeText] = useState('Useless Multiline Placeholder');
+
+  // If you type something in the text box that is a color,
+  // the background will change to that color.
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView
+        style={{
+          flex: 1,
+          backgroundColor: value.toLowerCase(),
+        }}>
+        <TextInput
+          editable
+          multiline
+          numberOfLines={4}
+          maxLength={40}
+          onChangeText={text => onChangeText(text)}
+          value={value}
+          style={styles.textInput}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  textInput: {
+    padding: 10,
+    borderColor: '#000',
+    borderWidth: 1,
+    margin: 12,
+  },
+});
+
+export default MultilineTextInputExample;
+```
+
+`TextInput` has a border at the bottom of its view by default. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this are to either not set height explicitly, in which case the system will take care of displaying the border in the correct position, or to not display the border by setting `underlineColorAndroid` to transparent.
+
+Note that on Android performing text selection in an input can change the app's activity `windowSoftInputMode` param to `adjustResize`. This may cause issues with components that have position: 'absolute' while the keyboard is active. To avoid this behavior either specify `windowSoftInputMode` in AndroidManifest.xml ( https://developer.android.com/guide/topics/manifest/activity-element.html ) or control this param programmatically with native code.
+
+---
+
+# Reference
+
+## Props
+
+### [View Props](view.md#props)
+
+Inherits [View Props](view.md#props).
+
+---
+
+### `allowFontScaling`
+
+Specifies whether fonts should scale to respect Text Size accessibility settings. The default is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `autoCapitalize`
+
+Tells `TextInput` to automatically capitalize certain characters. This property is not supported by some keyboard types such as `name-phone-pad`.
+
+- `characters`: all characters.
+- `words`: first letter of each word.
+- `sentences`: first letter of each sentence (_default_).
+- `none`: don't auto capitalize anything.
+
+| Type                                             |
+| ------------------------------------------------ |
+| enum('none', 'sentences', 'words', 'characters') |
+
+---
+
+### `autoComplete`
+
+Specifies autocomplete hints for the system, so it can provide autofill. On Android, the system will always attempt to offer autofill by using heuristics to identify the type of content. To disable autocomplete, set `autoComplete` to `off`.
+
+The following values work across platforms:
+
+- `additional-name`
+- `address-line1`
+- `address-line2`
+- `birthdate-day` (iOS 17+)
+- `birthdate-full` (iOS 17+)
+- `birthdate-month` (iOS 17+)
+- `birthdate-year` (iOS 17+)
+- `cc-csc` (iOS 17+)
+- `cc-exp` (iOS 17+)
+- `cc-exp-day` (iOS 17+)
+- `cc-exp-month` (iOS 17+)
+- `cc-exp-year` (iOS 17+)
+- `cc-number`
+- `country`
+- `current-password`
+- `email`
+- `family-name`
+- `given-name`
+- `honorific-prefix`
+- `honorific-suffix`
+- `name`
+- `new-password`
+- `off`
+- `one-time-code`
+- `postal-code`
+- `street-address`
+- `tel`
+- `username`
+
+<div className="label basic ios">iOS</div>
+
+The following values work on iOS only:
+
+- `cc-family-name` (iOS 17+)
+- `cc-given-name` (iOS 17+)
+- `cc-middle-name` (iOS 17+)
+- `cc-name` (iOS 17+)
+- `cc-type` (iOS 17+)
+- `nickname`
+- `organization`
+- `organization-title`
+- `url`
+
+<div className="label basic android">Android</div>
+
+The following values work on Android only:
+
+- `gender`
+- `name-family`
+- `name-given`
+- `name-middle`
+- `name-middle-initial`
+- `name-prefix`
+- `name-suffix`
+- `password`
+- `password-new`
+- `postal-address`
+- `postal-address-country`
+- `postal-address-extended`
+- `postal-address-extended-postal-code`
+- `postal-address-locality`
+- `postal-address-region`
+- `sms-otp`
+- `tel-country-code`
+- `tel-device`
+- `tel-national`
+- `username-new`
+
+| Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| enum('additional-name', 'address-line1', 'address-line2', 'birthdate-day', 'birthdate-full', 'birthdate-month', 'birthdate-year', 'cc-csc', 'cc-exp', 'cc-exp-day', 'cc-exp-month', 'cc-exp-year', 'cc-number', 'country', 'current-password', 'email', 'family-name', 'given-name', 'honorific-prefix', 'honorific-suffix', 'name', 'new-password', 'off', 'one-time-code', 'postal-code', 'street-address', 'tel', 'username', 'cc-family-name', 'cc-given-name', 'cc-middle-name', 'cc-name', 'cc-type', 'nickname', 'organization', 'organization-title', 'url', 'gender', 'name-family', 'name-given', 'name-middle', 'name-middle-initial', 'name-prefix', 'name-suffix', 'password', 'password-new', 'postal-address', 'postal-address-country', 'postal-address-extended', 'postal-address-extended-postal-code', 'postal-address-locality', 'postal-address-region', 'sms-otp', 'tel-country-code', 'tel-device', 'tel-national', 'username-new') |
+
+---
+
+### `autoCorrect`
+
+If `false`, disables auto-correct. The default value is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `autoFocus`
+
+If `true`, focuses the input. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### 🗑️ `blurOnSubmit`
+
+:::warning[Deprecated]
+Note that `submitBehavior` now takes the place of `blurOnSubmit` and will override any behavior defined by `blurOnSubmit`. See [submitBehavior](textinput#submitbehavior).
+:::
+
+If `true`, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting `blurOnSubmit` to `true` means that pressing return will blur the field and trigger the `onSubmitEditing` event instead of inserting a newline into the field.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `caretHidden`
+
+If `true`, caret is hidden. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `clearButtonMode` <div className="label ios">iOS</div>
+
+When the clear button should appear on the right side of the text view. This property is supported only for single-line TextInput component. The default value is `never`.
+
+| Type                                                       |
+| ---------------------------------------------------------- |
+| enum('never', 'while-editing', 'unless-editing', 'always') |
+
+---
+
+### `clearTextOnFocus` <div className="label ios">iOS</div>
+
+If `true`, clears the text field automatically when editing begins.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `contextMenuHidden`
+
+If `true`, context menu is hidden. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `dataDetectorTypes` <div className="label ios">iOS</div>
+
+Determines the types of data converted to clickable URLs in the text input. Only valid if `multiline={true}` and `editable={false}`. By default no data types are detected.
+
+You can provide one type or an array of many types.
+
+Possible values for `dataDetectorTypes` are:
+
+- `'phoneNumber'`
+- `'link'`
+- `'address'`
+- `'calendarEvent'`
+- `'none'`
+- `'all'`
+
+| Type                                                                                                                                                     |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), ,array of enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all') |
+
+---
+
+### `defaultValue`
+
+Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `disableKeyboardShortcuts` <div className="label ios">iOS</div>
+
+If `true`, the keyboard shortcuts (undo/redo and copy buttons) are disabled.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `cursorColor` <div className="label android">Android</div>
+
+When provided it will set the color of the cursor (or "caret") in the component. Unlike the behavior of `selectionColor` the cursor color will be set independently from the color of the text selection box.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `disableFullscreenUI` <div className="label android">Android</div>
+
+When `false`, if there is a small amount of space available around a text input (e.g. landscape orientation on a phone), the OS may choose to have the user edit the text inside of a full screen text input mode. When `true`, this feature is disabled and users will always edit the text directly inside of the text input. Defaults to `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `editable`
+
+If `false`, text is not editable. The default value is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `enablesReturnKeyAutomatically` <div className="label ios">iOS</div>
+
+If `true`, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `enterKeyHint`
+
+Determines what text should be shown to the return key. Has precedence over the `returnKeyType` prop.
+
+The following values work across platforms:
+
+- `done`
+- `next`
+- `search`
+- `send`
+- `go`
+
+_Android Only_
+
+The following values work on Android only:
+
+- `previous`
+
+_iOS Only_
+
+The following values work on iOS only:
+
+- `enter`
+
+| Type                                                              |
+| ----------------------------------------------------------------- |
+| enum('enter', 'done', 'next', 'previous', 'search', 'send', 'go') |
+
+---
+
+### `importantForAutofill` <div className="label android">Android</div>
+
+Tells the operating system whether the individual fields in your app should be included in a view structure for autofill purposes on Android API Level 26+. Possible values are `auto`, `no`, `noExcludeDescendants`, `yes`, and `yesExcludeDescendants`. The default value is `auto`.
+
+- `auto`: Let the Android System use its heuristics to determine if the view is important for autofill.
+- `no`: This view isn't important for autofill.
+- `noExcludeDescendants`: This view and its children aren't important for autofill.
+- `yes`: This view is important for autofill.
+- `yesExcludeDescendants`: This view is important for autofill, but its children aren't important for autofill.
+
+| Type                                                                       |
+| -------------------------------------------------------------------------- |
+| enum('auto', 'no', 'noExcludeDescendants', 'yes', 'yesExcludeDescendants') |
+
+---
+
+### `inlineImageLeft` <div className="label android">Android</div>
+
+If defined, the provided image resource will be rendered on the left. The image resource must be inside `/android/app/src/main/res/drawable` and referenced like
+
+```
+<TextInput
+ inlineImageLeft='search_icon'
+/>
+```
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `inlineImagePadding` <div className="label android">Android</div>
+
+Padding between the inline image, if any, and the text input itself.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `inputAccessoryViewID` <div className="label ios">iOS</div>
+
+An optional identifier which links a custom [InputAccessoryView](inputaccessoryview.md) to this text input. The InputAccessoryView is rendered above the keyboard when this text input is focused.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `inputAccessoryViewButtonLabel` <div className="label ios">iOS</div>
+
+An optional label that overrides the default [InputAccessoryView](inputaccessoryview.md) button label.
+
+By default, the default button label is not localized. Use this property to provide a localized version.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `inputMode`
+
+Works like the `inputmode` attribute in HTML, it determines which keyboard to open, e.g. `numeric` and has precedence over `keyboardType`.
+
+Support the following values:
+
+- `none`
+- `text`
+- `decimal`
+- `numeric`
+- `tel`
+- `search`
+- `email`
+- `url`
+
+| Type                                                                        |
+| --------------------------------------------------------------------------- |
+| enum('decimal', 'email', 'none', 'numeric', 'search', 'tel', 'text', 'url') |
+
+---
+
+### `keyboardAppearance` <div className="label ios">iOS</div>
+
+Determines the color of the keyboard.
+
+| Type                             |
+| -------------------------------- |
+| enum('default', 'light', 'dark') |
+
+---
+
+### `keyboardType`
+
+Determines which keyboard to open, e.g.`numeric`.
+
+See screenshots of all the types [here](https://davidl.fr/blog/keyboard-react-native-ios-android#all-react-native-keyboard-type-examples-i-os-on-the-left-android-on-the-right).
+
+The following values work across platforms:
+
+- `default`
+- `number-pad`
+- `decimal-pad`
+- `numeric`
+- `email-address`
+- `phone-pad`
+- `url`
+
+_iOS Only_
+
+The following values work on iOS only:
+
+- `ascii-capable`
+- `numbers-and-punctuation`
+- `name-phone-pad`
+- `twitter`
+- `web-search`
+
+_Android Only_
+
+The following values work on Android only:
+
+- `visible-password`
+
+| Type                                                                                                                                                                                                    |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', 'visible-password') |
+
+---
+
+### `lineBreakStrategyIOS` <div className="label ios">iOS</div>
+
+Set line break strategy on iOS 14+. Possible values are `none`, `standard`, `hangul-word` and `push-out`.
+
+| Type                                                        | Default  |
+| ----------------------------------------------------------- | -------- |
+| enum(`'none'`, `'standard'`, `'hangul-word'`, `'push-out'`) | `'none'` |
+
+---
+
+### `lineBreakModeIOS` <div className="label ios">iOS</div>
+
+Set line break mode on iOS. Possible values are `wordWrapping`, `char`, `clip`, `head`, `middle` and `tail`.
+
+| Type                                                                       | Default          |
+| -------------------------------------------------------------------------- | ---------------- |
+| enum(`'wordWrapping'`, `'char'`, `'clip'`, `'head'`, `'middle'`, `'tail'`) | `'wordWrapping'` |
+
+---
+
+### `maxFontSizeMultiplier`
+
+Specifies largest possible scale a font can reach when `allowFontScaling` is enabled. Possible values:
+
+- `null/undefined` (default): inherit from the parent node or the global default (0)
+- `0`: no max, ignore parent/global default
+- `>= 1`: sets the `maxFontSizeMultiplier` of this node to this value
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `maxLength`
+
+Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `multiline`
+
+If `true`, the text input can be multiple lines. The default value is `false`.
+
+:::note
+It is important to note that this aligns the text to the top on iOS, and centers it on Android. Use with `textAlignVertical` set to `top` for the same behavior in both platforms.
+:::
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `numberOfLines`
+
+:::note
+`numberOfLines` on iOS is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Sets the maximum number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `onBlur`
+
+Callback that is called when the text input is blurred.
+
+:::note
+If you are attempting to access the `text` value from `nativeEvent` keep in mind that the resulting value you get can be `undefined` which can cause unintended errors. If you are trying to find the last value of TextInput, you can use the [`onEndEditing`](textinput#onendediting) event, which is fired upon completion of editing.
+:::
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
+
+---
+
+### `onChange`
+
+Callback that is called when the text input's text changes.
+
+| Type                                                  |
+| ----------------------------------------------------- |
+| (`{nativeEvent: {eventCount, target, text}}`) => void |
+
+---
+
+### `onChangeText`
+
+Callback that is called when the text input's text changes. Changed text is passed as a single string argument to the callback handler.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onContentSizeChange`
+
+Callback that is called when the text input's content size changes.
+
+Only called for multiline text inputs.
+
+| Type                                                       |
+| ---------------------------------------------------------- |
+| (`{nativeEvent: {contentSize: {width, height} }}`) => void |
+
+---
+
+### `onEndEditing`
+
+Callback that is called when text input ends.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onPressIn`
+
+Callback that is called when a touch is engaged.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onPressOut`
+
+Callback that is called when a touch is released.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onFocus`
+
+Callback that is called when the text input is focused.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
+
+---
+
+### `onKeyPress`
+
+Callback that is called when a key is pressed. This will be called with object where `keyValue` is `'Enter'` or `'Backspace'` for respective keys and the typed-in character otherwise including `' '` for space. Fires before `onChange` callbacks. Note: on Android only the inputs from soft keyboard are handled, not the hardware keyboard inputs.
+
+| Type                                        |
+| ------------------------------------------- |
+| (`{nativeEvent: {key: keyValue} }`) => void |
+
+---
+
+### `onLayout`
+
+Invoked on mount and on layout changes.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
+
+---
+
+### `onScroll`
+
+Invoked on content scroll. May also contain other properties from `ScrollEvent` but on Android `contentSize` is not provided for performance reasons.
+
+| Type                                                |
+| --------------------------------------------------- |
+| (`{nativeEvent: {contentOffset: {x, y} }}`) => void |
+
+---
+
+### `onSelectionChange`
+
+Callback that is called when the text input selection is changed.
+
+| Type                                                  |
+| ----------------------------------------------------- |
+| (`{nativeEvent: {selection: {start, end} }}`) => void |
+
+---
+
+### `onSubmitEditing`
+
+Callback that is called when the text input's submit button is pressed.
+
+| Type                                                  |
+| ----------------------------------------------------- |
+| (`{nativeEvent: {text, eventCount, target}}`) => void |
+
+Note that on iOS this method isn't called when using `keyboardType="phone-pad"`.
+
+---
+
+### `placeholder`
+
+The string that will be rendered before text input has been entered.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `placeholderTextColor`
+
+The text color of the placeholder string.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `readOnly`
+
+If `true`, text is not editable. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `returnKeyLabel` <div className="label android">Android</div>
+
+Sets the return key to the label. Use it instead of `returnKeyType`.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `returnKeyType`
+
+Determines how the return key should look. On Android you can also use `returnKeyLabel`.
+
+_Cross platform_
+
+The following values work across platforms:
+
+- `done`
+- `go`
+- `next`
+- `search`
+- `send`
+
+_Android Only_
+
+The following values work on Android only:
+
+- `none`
+- `previous`
+
+_iOS Only_
+
+The following values work on iOS only:
+
+- `default`
+- `emergency-call`
+- `google`
+- `join`
+- `route`
+- `yahoo`
+
+| Type                                                                                                                              |
+| --------------------------------------------------------------------------------------------------------------------------------- |
+| enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo') |
+
+### `rejectResponderTermination` <div className="label ios">iOS</div>
+
+If `true`, allows TextInput to pass touch events to the parent component. This allows components such as SwipeableListView to be swipeable from the TextInput on iOS, as is the case on Android by default. If `false`, TextInput always asks to handle the input (except when disabled). The default value is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `rows` <div className="label android">Android</div>
+
+Sets the number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `scrollEnabled` <div className="label ios">iOS</div>
+
+If `false`, scrolling of the text view will be disabled. The default value is `true`. Only works with `multiline={true}`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `secureTextEntry`
+
+If `true`, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is `false`. Does not work with `multiline={true}`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `selection`
+
+The start and end of the text input's selection. Set start and end to the same value to position the cursor.
+
+| Type                                  |
+| ------------------------------------- |
+| object: `{start: number,end: number}` |
+
+---
+
+### `selectionColor`
+
+The highlight, selection handle and cursor color of the text input.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `selectionHandleColor` <div className="label android">Android</div>
+
+Sets the color of the selection handle. Unlike `selectionColor`, it allows the selection handle color to be customized independently of the selection's color.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `selectTextOnFocus`
+
+If `true`, all text will automatically be selected on focus.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `showSoftInputOnFocus`
+
+When `false`, it will prevent the soft keyboard from showing when the field is focused. The default value is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `smartInsertDelete` <div className="label ios">iOS</div>
+
+If `false`, the iOS system will not insert an extra space after a paste operation neither delete one or two spaces after a cut or delete operation.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `true`  |
+
+---
+
+### `spellCheck` <div className="label ios">iOS</div>
+
+If `false`, disables spell-check style (i.e. red underlines). The default value is inherited from `autoCorrect`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `submitBehavior`
+
+When the return key is pressed,
+
+For single line inputs:
+
+- `'newline'` defaults to `'blurAndSubmit'`
+- `undefined` defaults to `'blurAndSubmit'`
+
+For multiline inputs:
+
+- `'newline'` adds a newline
+- `undefined` defaults to `'newline'`
+
+For both single line and multiline inputs:
+
+- `'submit'` will only send a submit event and not blur the input
+- `'blurAndSubmit`' will both blur the input and send a submit event
+
+| Type                                       |
+| ------------------------------------------ |
+| enum('submit', 'blurAndSubmit', 'newline') |
+
+---
+
+### `textAlign`
+
+Align the input text to the left, center, or right sides of the input field.
+
+Possible values for `textAlign` are:
+
+- `left`
+- `center`
+- `right`
+
+| Type                            |
+| ------------------------------- |
+| enum('left', 'center', 'right') |
+
+---
+
+### `textContentType` <div className="label ios">iOS</div>
+
+Give the keyboard and the system information about the expected semantic meaning for the content that users enter.
+
+:::note
+[`autoComplete`](#autocomplete), provides the same functionality and is available for all platforms. You can use [`Platform.select`](/docs/next/platform#select) for differing platform behaviors.
+
+Avoid using both `textContentType` and `autoComplete`. For backwards compatibility, `textContentType` takes precedence when both properties are set.
+:::
+
+You can set `textContentType` to `username` or `password` to enable autofill of login details from the device keychain.
+
+`newPassword` can be used to indicate a new password input the user may want to save in the keychain, and `oneTimeCode` can be used to indicate that a field can be autofilled by a code arriving in an SMS.
+
+To disable autofill, set `textContentType` to `none`.
+
+Possible values for `textContentType` are:
+
+- `none`
+- `addressCity`
+- `addressCityAndState`
+- `addressState`
+- `birthdate` (iOS 17+)
+- `birthdateDay` (iOS 17+)
+- `birthdateMonth` (iOS 17+)
+- `birthdateYear` (iOS 17+)
+- `countryName`
+- `creditCardExpiration` (iOS 17+)
+- `creditCardExpirationMonth` (iOS 17+)
+- `creditCardExpirationYear` (iOS 17+)
+- `creditCardFamilyName` (iOS 17+)
+- `creditCardGivenName` (iOS 17+)
+- `creditCardMiddleName` (iOS 17+)
+- `creditCardName` (iOS 17+)
+- `creditCardNumber`
+- `creditCardSecurityCode` (iOS 17+)
+- `creditCardType` (iOS 17+)
+- `emailAddress`
+- `familyName`
+- `fullStreetAddress`
+- `givenName`
+- `jobTitle`
+- `location`
+- `middleName`
+- `name`
+- `namePrefix`
+- `nameSuffix`
+- `newPassword`
+- `nickname`
+- `oneTimeCode`
+- `organizationName`
+- `password`
+- `postalCode`
+- `streetAddressLine1`
+- `streetAddressLine2`
+- `sublocality`
+- `telephoneNumber`
+- `URL`
+- `username`
+
+| Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| enum('none', 'addressCity', 'addressCityAndState', 'addressState', 'birthdate', 'birthdateDay', 'birthdateMonth', 'birthdateYear', 'countryName', 'creditCardExpiration', 'creditCardExpirationMonth', 'creditCardExpirationYear', 'creditCardFamilyName', 'creditCardGivenName', 'creditCardMiddleName', 'creditCardName', 'creditCardNumber', 'creditCardSecurityCode', 'creditCardType', 'emailAddress', 'familyName', 'fullStreetAddress', 'givenName', 'jobTitle', 'location', 'middleName', 'name', 'namePrefix', 'nameSuffix', 'newPassword', 'nickname', 'oneTimeCode', 'organizationName', 'password', 'postalCode', 'streetAddressLine1', 'streetAddressLine2', 'sublocality', 'telephoneNumber', 'URL', 'username') |
+
+---
+
+### `passwordRules` <div className="label ios">iOS</div>
+
+When using `textContentType` as `newPassword` on iOS we can let the OS know the minimum requirements of the password so that it can generate one that will satisfy them. In order to create a valid string for `PasswordRules` take a look to the [Apple Docs](https://developer.apple.com/password-rules/).
+
+:::tip
+If passwords generation dialog doesn't appear please make sure that:
+
+- AutoFill is enabled: **Settings** → **Passwords & Accounts** → toggle "On" the **AutoFill Passwords**,
+- iCloud Keychain is used: **Settings** → **Apple ID** → **iCloud** → **Keychain** → toggle "On" the **iCloud Keychain**.
+  :::
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `style`
+
+Note that not all Text styles are supported, an incomplete list of what is not supported includes:
+
+- `borderLeftWidth`
+- `borderTopWidth`
+- `borderRightWidth`
+- `borderBottomWidth`
+- `borderTopLeftRadius`
+- `borderTopRightRadius`
+- `borderBottomRightRadius`
+- `borderBottomLeftRadius`
+
+[Styles](style.md)
+
+| Type                  |
+| --------------------- |
+| [Text](text.md#style) |
+
+---
+
+### `textBreakStrategy` <div className="label android">Android</div>
+
+Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced` The default value is `highQuality`.
+
+| Type                                      |
+| ----------------------------------------- |
+| enum('simple', 'highQuality', 'balanced') |
+
+---
+
+### `underlineColorAndroid` <div className="label android">Android</div>
+
+The color of the `TextInput` underline.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `value`
+
+The value to show for the text input. `TextInput` is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker.
+
+| Type   |
+| ------ |
+| string |
+
+## Methods
+
+### `.focus()`
+
+```tsx
+focus();
+```
+
+Makes the native input request focus.
+
+### `.blur()`
+
+```tsx
+blur();
+```
+
+Makes the native input lose focus.
+
+### `clear()`
+
+```tsx
+clear();
+```
+
+Removes all text from the `TextInput`.
+
+---
+
+### `isFocused()`
+
+```tsx
+isFocused(): boolean;
+```
+
+Returns `true` if the input is currently focused; `false` otherwise.
+
+# Known issues
+
+- [react-native#19096](https://github.com/facebook/react-native/issues/19096): Doesn't support Android's `onKeyPreIme`.
+- [react-native#19366](https://github.com/facebook/react-native/issues/19366): Calling .focus() after closing Android's keyboard via back button doesn't bring keyboard up again.
+- [react-native#26799](https://github.com/facebook/react-native/issues/26799): Doesn't support Android's `secureTextEntry` when `keyboardType="email-address"` or `keyboardType="phone-pad"`.
diff --git a/website/versioned_docs/version-0.85/the-new-architecture/custom-cxx-types.md b/website/versioned_docs/version-0.85/the-new-architecture/custom-cxx-types.md
index 94db3e21b3f..edc490b8070 100644
--- a/website/versioned_docs/version-0.85/the-new-architecture/custom-cxx-types.md
+++ b/website/versioned_docs/version-0.85/the-new-architecture/custom-cxx-types.md
@@ -173,8 +173,8 @@ First, we need to update the `App.tsx` file to use the new method from the Turbo
 
 ```diff title="App.tsx"
 // ...
-+ const [cubicSource, setCubicSource] = React.useState('')
-+ const [cubicRoot, setCubicRoot] = React.useState(0)
++ const [cubicSource, setCubicSource] = useState('')
++ const [cubicRoot, setCubicRoot] = useState(0)
   return (
     <SafeAreaView style={styles.container}>
       <View>
@@ -366,9 +366,9 @@ To test the code in the app, we have to modify the `App.tsx` file.
 2. Replace the body of the `App()` function with the following code:
 
 ```tsx title="App.tsx (App function body replacement)"
-const [street, setStreet] = React.useState('');
-const [num, setNum] = React.useState('');
-const [isValidAddress, setIsValidAddress] = React.useState<
+const [street, setStreet] = useState('');
+const [num, setNum] = useState('');
+const [isValidAddress, setIsValidAddress] = useState<
   boolean | null
 >(null);
 
diff --git a/website/versioned_docs/version-0.85/the-new-architecture/direct-manipulation.md b/website/versioned_docs/version-0.85/the-new-architecture/direct-manipulation.md
index 6708a643cba..6035b6a64b7 100644
--- a/website/versioned_docs/version-0.85/the-new-architecture/direct-manipulation.md
+++ b/website/versioned_docs/version-0.85/the-new-architecture/direct-manipulation.md
@@ -26,7 +26,6 @@ For example, the following code demonstrates editing the input when you tap a bu
 <TabItem value="javascript">
 
 ```SnackPlayer name=setNativeProps%20on%20TextInput&ext=js
-import React from 'react';
 import {useCallback, useRef} from 'react';
 import {
   StyleSheet,
@@ -74,7 +73,6 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Clear%20text&ext=tsx
-import React from 'react';
 import {useCallback, useRef} from 'react';
 import {
   StyleSheet,
diff --git a/website/versioned_docs/version-0.85/the-new-architecture/fabric-component-native-commands.md b/website/versioned_docs/version-0.85/the-new-architecture/fabric-component-native-commands.md
index ca87360ba3a..5cb5dbd6710 100644
--- a/website/versioned_docs/version-0.85/the-new-architecture/fabric-component-native-commands.md
+++ b/website/versioned_docs/version-0.85/the-new-architecture/fabric-component-native-commands.md
@@ -107,7 +107,6 @@ Now you can use the command in the the app.
 Open the `App.tsx` file and modify it as it follows:
 
 ```diff title="App.tsx"
-import React from 'react';
 -import {Alert, StyleSheet, View} from 'react-native';
 -import WebView from '../specs/WebViewNativeComponent';
 +import {Alert, StyleSheet, Pressable, Text, View} from 'react-native';
@@ -186,7 +185,6 @@ export default App;
 Open the `App.tsx` file and modify it as it follows:
 
 ```diff title="App.jsx"
-import React from 'react';
 -import {Alert, StyleSheet, View} from 'react-native';
 -import WebView from '../specs/WebViewNativeComponent';
 +import {Alert, StyleSheet, Pressable, Text, View} from 'react-native';
diff --git a/website/versioned_docs/version-0.85/the-new-architecture/layout-measurements.md b/website/versioned_docs/version-0.85/the-new-architecture/layout-measurements.md
index cc693a99b0c..715cd42aee7 100644
--- a/website/versioned_docs/version-0.85/the-new-architecture/layout-measurements.md
+++ b/website/versioned_docs/version-0.85/the-new-architecture/layout-measurements.md
@@ -10,7 +10,7 @@ Typical code will look like this:
 
 ```tsx
 function AComponent(children) {
-  const targetRef = React.useRef(null)
+  const targetRef = useRef(null)
 
   useLayoutEffect(() => {
     targetRef.current?.measure((x, y, width, height, pageX, pageY) => {
diff --git a/website/versioned_docs/version-0.85/the-new-architecture/native-modules-custom-events.md b/website/versioned_docs/version-0.85/the-new-architecture/native-modules-custom-events.md
index 0af5bb95957..c44bbf93c16 100644
--- a/website/versioned_docs/version-0.85/the-new-architecture/native-modules-custom-events.md
+++ b/website/versioned_docs/version-0.85/the-new-architecture/native-modules-custom-events.md
@@ -134,7 +134,6 @@ Now, it's time to update the code of the App to handle the new event.
 Open the `App.tsx` file and modify it as it follows:
 
 ```diff title="App.tsx"
-import React from 'react';
 import {
 + Alert,
 + EventSubscription,
diff --git a/website/versioned_docs/version-0.85/the-new-architecture/pure-cxx-modules.md b/website/versioned_docs/version-0.85/the-new-architecture/pure-cxx-modules.md
index b7c08196290..72d03933695 100644
--- a/website/versioned_docs/version-0.85/the-new-architecture/pure-cxx-modules.md
+++ b/website/versioned_docs/version-0.85/the-new-architecture/pure-cxx-modules.md
@@ -1,503 +1,503 @@
-import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameForCurrentVersion';
-import {getCurrentVersion} from '@site/src/getCurrentVersion';
-import CodeBlock from '@theme/CodeBlock';
-
-# Cross-Platform Native Modules (C++)
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-Writing a module in C++ is the best way to share platform-agnostic code between Android and iOS. With pure C++ modules, you can write your logic only once and reuse it right away from all the platforms, without the need of writing platform-specific code.
-
-In this guide, we will go through the creation of a pure C++ Turbo Native Module:
-
-1. Create the JS specs
-2. Configure Codegen to generate the scaffolding
-3. Implement the Native logic
-4. Register the module in the Android and iOS application
-5. Test your changes in JS
-
-The rest of this guide assumes that you have created your application running the command:
-
-<CodeBlock language="bash" title="shell">
-{`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`}
-</CodeBlock>
-
-## 1. Create the JS specs
-
-Pure C++ Turbo Native Modules are Turbo Native Modules. They need a specification file (also called spec file) so that Codegen can create the scaffolding code for us. The specification file is also what we use to access the Turbo Native Module in JS.
-
-Spec files need to be written in a typed JS dialect. React Native currently supports Flow or TypeScript.
-
-1. Inside the root folder of your app, create a new folder called `specs`.
-2. Create a new file called `NativeSampleModule.ts` with the following code:
-
-:::warning
-All Native Turbo Module spec files must have the prefix `Native`, otherwise Codegen will ignore them.
-:::
-
-<Tabs groupId="tnm-specs" queryString defaultValue={constants.defaultJavaScriptSpecLanguages} values={constants.javaScriptSpecLanguages}>
-<TabItem value="flow">
-
-```ts title="specs/NativeSampleModule.ts"
-// @flow
-import type {TurboModule} from 'react-native'
-import { TurboModuleRegistry } from "react-native";
-
-export interface Spec extends TurboModule {
-  +reverseString: (input: string) => string;
-}
-
-export default (TurboModuleRegistry.getEnforcing<Spec>(
-  "NativeSampleModule"
-): Spec);
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```ts title="specs/NativeSampleModule.ts"
-import {TurboModule, TurboModuleRegistry} from 'react-native';
-
-export interface Spec extends TurboModule {
-  readonly reverseString: (input: string) => string;
-}
-
-export default TurboModuleRegistry.getEnforcing<Spec>(
-  'NativeSampleModule',
-);
-```
-
-</TabItem>
-</Tabs>
-
-## 2. Configure Codegen
-
-The next step is to configure [Codegen](what-is-codegen.mdx) in your `package.json`. Update the file to include:
-
-```json title="package.json"
-     "start": "react-native start",
-     "test": "jest"
-   },
-   // highlight-add-start
-   "codegenConfig": {
-     "name": "AppSpecs",
-     "type": "modules",
-     "jsSrcsDir": "specs",
-     "android": {
-       "javaPackageName": "com.sampleapp.specs"
-     }
-   },
-   // highlight-add-end
-   "dependencies": {
-```
-
-This configuration tells Codegen to look for spec files in the `specs` folder. It also instructs Codegen to only generate code for `modules` and to namespace the generated code as `AppSpecs`.
-
-## 3. Write the Native Code
-
-Writing a C++ Turbo Native Module allows you to share the code between Android and iOS. Therefore we will be writing the code once, and we will look into what changes we need to apply to the platforms so that the C++ code can be picked up.
-
-1. Create a folder named `shared` at the same level as the `android` and `ios` folders.
-2. Inside the `shared` folder, create a new file called `NativeSampleModule.h`.
-
-   ```cpp title="shared/NativeSampleModule.h"
-   #pragma once
-
-   #include <AppSpecsJSI.h>
-
-   #include <memory>
-   #include <string>
-
-   namespace facebook::react {
-
-   class NativeSampleModule : public NativeSampleModuleCxxSpec<NativeSampleModule> {
-   public:
-     NativeSampleModule(std::shared_ptr<CallInvoker> jsInvoker);
-
-     std::string reverseString(jsi::Runtime& rt, std::string input);
-   };
-
-   } // namespace facebook::react
-
-   ```
-
-3. Inside the `shared` folder, create a new file called `NativeSampleModule.cpp`.
-
-   ```cpp title="shared/NativeSampleModule.cpp"
-   #include "NativeSampleModule.h"
-
-   namespace facebook::react {
-
-   NativeSampleModule::NativeSampleModule(std::shared_ptr<CallInvoker> jsInvoker)
-       : NativeSampleModuleCxxSpec(std::move(jsInvoker)) {}
-
-   std::string NativeSampleModule::reverseString(jsi::Runtime& rt, std::string input) {
-     return std::string(input.rbegin(), input.rend());
-   }
-
-   } // namespace facebook::react
-   ```
-
-Let's have a look at the two files we created:
-
-- The `NativeSampleModule.h` file is the header file for a Pure C++ TurboModule. The `include` statements make sure that we include the specs that will be created by Codegen and that contains the interface and the base class we need to implement.
-- The module lives in the `facebook::react` namespace to have access to all the types that live in that namespace.
-- The class `NativeSampleModule` is the actual Turbo Native Module class and it extends the `NativeSampleModuleCxxSpec` class which contains some glue code and boilerplate code to let this class behave as a Turbo Native Module.
-- Finally, we have the constructor, that accepts a pointer to the `CallInvoker`, to communicate with JS if needed and the function's prototype we have to implement.
-
-The `NativeSampleModule.cpp` file is the actual implementation of our Turbo Native Module and implements the constructor and the method that we declared in the specs.
-
-## 4. Register the Module in the platform
-
-The next steps will let us register the module in the platform. This is the step that exposes the native code to JS so that the React Native application can finally call the native methods from the JS layer.
-
-This is the only time when we will have to write some platform-specific code.
-
-### Android
-
-To make sure that the Android app can effectively build the C++ Turbo Native Module, we need to:
-
-1. Create a `CMakeLists.txt` to access our C++ code.
-2. Modify `build.gradle` to point to the newly created `CMakeLists.txt` file.
-3. Create an `OnLoad.cpp` file in our Android app to register the new Turbo Native Module.
-
-#### 1. Create the `CMakeLists.txt` file
-
-Android uses CMake to build. CMake needs to access the files we defined in our shared folder to be able to build them.
-
-1. Create a new folder `SampleApp/android/app/src/main/jni`. The `jni` folder is where the C++ side of Android lives.
-2. Create a `CMakeLists.txt` file and add this context:
-
-```shell title="CMakeLists.txt"
-cmake_minimum_required(VERSION 3.13)
-
-# Define the library name here.
-project(appmodules)
-
-# This file includes all the necessary to let you build your React Native application
-include(${REACT_ANDROID_DIR}/cmake-utils/ReactNative-application.cmake)
-
-# Define where the additional source code lives. We need to crawl back the jni, main, src, app, android folders
-target_sources(${CMAKE_PROJECT_NAME} PRIVATE ../../../../../shared/NativeSampleModule.cpp)
-
-# Define where CMake can find the additional header files. We need to crawl back the jni, main, src, app, android folders
-target_include_directories(${CMAKE_PROJECT_NAME} PUBLIC ../../../../../shared)
-```
-
-The CMake file does the following things:
-
-- Defines the `appmodules` library, where all the app C++ code will be included.
-- Loads the base React Native's CMake file.
-- Adds the Module C++ source code that we need to build with the `target_sources` directives. By default React Native will already populate the `appmodules` library with default sources, here we include our custom one. You can see that we need to crawl back from the `jni` folder to the `shared` folder where our C++ Turbo Module lives.
-- Specifies where CMake can find the module header files. Also in this case we need to crawl back from the `jni` folder.
-
-#### 2. Modify `build.gradle` to include the custom C++ code
-
-Gradle is the tool that orchestrates the Android build. We need to tell it where it can find the `CMake` files to build the Turbo Native Module.
-
-1. Open the `SampleApp/android/app/build.gradle` file.
-2. Add the following block into the Gradle file, within the existing `android` block:
-
-```diff title="android/app/build.gradle"
-    buildTypes {
-        debug {
-            signingConfig signingConfigs.debug
-        }
-        release {
-            // Caution! In production, you need to generate your own keystore file.
-            // see https://reactnative.dev/docs/signed-apk-android.
-            signingConfig signingConfigs.debug
-            minifyEnabled enableProguardInReleaseBuilds
-            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
-        }
-    }
-
-+   externalNativeBuild {
-+       cmake {
-+           path "src/main/jni/CMakeLists.txt"
-+       }
-+   }
-}
-```
-
-This block tells the Gradle file where to look for the CMake file. The path is relative to the folder where the `build.gradle` file lives, so we need to add the path to the `CMakeLists.txt` files in the `jni` folder.
-
-#### 3. Register the new Turbo Native Module
-
-The final step is to register the new C++ Turbo Native Module in the runtime, so that when JS requires the C++ Turbo Native Module, the app knows where to find it and can return it.
-
-1. From the folder `SampleApp/android/app/src/main/jni`, run the following command:
-
-<CodeBlock language="sh" title="shell">
-{`curl -O https://raw.githubusercontent.com/facebook/react-native/${getCoreBranchNameForCurrentVersion()}/packages/react-native/ReactAndroid/cmake-utils/default-app-setup/OnLoad.cpp`}
-</CodeBlock>
-
-2. Then, modify this file as follows:
-
-```diff title="android/app/src/main/jni/OnLoad.cpp"
-#include <DefaultComponentsRegistry.h>
-#include <DefaultTurboModuleManagerDelegate.h>
-#include <autolinking.h>
-#include <fbjni/fbjni.h>
-#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
-#include <rncore.h>
-
-+ // Include the NativeSampleModule header
-+ #include <NativeSampleModule.h>
-
-//...
-
-std::shared_ptr<TurboModule> cxxModuleProvider(
-    const std::string& name,
-    const std::shared_ptr<CallInvoker>& jsInvoker) {
-  // Here you can provide your CXX Turbo Modules coming from
-  // either your application or from external libraries. The approach to follow
-  // is similar to the following (for a module called `NativeCxxModuleExample`):
-  //
-  // if (name == NativeCxxModuleExample::kModuleName) {
-  //   return std::make_shared<NativeCxxModuleExample>(jsInvoker);
-  // }
-
-+  // This code registers the module so that when the JS side asks for it, the app can return it
-+  if (name == NativeSampleModule::kModuleName) {
-+    return std::make_shared<NativeSampleModule>(jsInvoker);
-+  }
-
-  // And we fallback to the CXX module providers autolinked
-  return autolinking_cxxModuleProvider(name, jsInvoker);
-}
-
-// leave the rest of the file
-```
-
-These steps download the original `OnLoad.cpp` file from React Native, so that we can safely override it to load the C++ Turbo Native Module in the app.
-
-Once we downloaded the file, we can modify it by:
-
-- Including the header file that points to our module
-- Registering the Turbo Native Module so that when JS requires it, the app can return it.
-
-Now, you can run `yarn android` from the project root to see your app building successfully.
-
-### iOS
-
-To make sure that the iOS app can effectively build the C++ Turbo Native Module, we need to:
-
-1. Install pods and run Codegen.
-2. Add the `shared` folder to our iOS project.
-3. Register the C++ Turbo Native Module in the application.
-
-#### 1. Install Pods and Run Codegen.
-
-The first step we need to run is the usual steps we run every time we have to prepare our iOS application. CocoaPods is the tool we use to setup and install React Native dependencies and, as part of the process, it will also run Codegen for us.
-
-```bash
-cd ios
-bundle install
-bundle exec pod install
-```
-
-#### 2. Add the shared folder to the iOS project
-
-This step adds the `shared` folder to the project to make it visible to Xcode.
-
-1. Open the CocoaPods generated Xcode Workspace.
-
-```bash
-cd ios
-open SampleApp.xcworkspace
-```
-
-2. Click on the `SampleApp` project on the left and select `Add files to "Sample App"...`.
-
-![Add Files to Sample App...](/docs/assets/AddFilesToXcode1.png)
-
-3. Select the `shared` folder and click on `Add`.
-
-![Add Files to Sample App...](/docs/assets/AddFilesToXcode2.png)
-
-If you did everything right, your project on the left should look like this:
-
-![Xcode Project](/docs/assets/CxxTMGuideXcodeProject.png)
-
-#### 3. Registering the Cxx Turbo Native Module in your app
-
-To register a pure Cxx Turbo Native Module in your app, you need to:
-
-1. Create a `ModuleProvider` for the Native Module
-2. Configure the `package.json` to associate the JS module name with the ModuleProvider class.
-
-The ModuleProvider is an Objective-C++ that glues together the Pure C++ module with the rest of your iOS App.
-
-##### 3.1 Create the ModuleProvider
-
-1. From Xcode, select the `SampleApp` project and press <kbd>⌘</kbd> + <kbd>N</kbd> to create a new file.
-2. Select the `Cocoa Touch Class` template
-3. Add the name `NativeSampleModuleProvider` (keep the other field as `Subclass of: NSObject` and `Language: Objective-C`)
-4. Click Next to generate the files.
-5. Rename the `NativeSampleModuleProvider.m` to `NativeSampleModuleProvider.mm`. The `mm` extension denotes an Objective-C++ file.
-6. Implement the content of the `NativeSampleModuleProvider.h` with the following:
-
-```objc title="NativeSampleModuleProvider.h"
-
-#import <Foundation/Foundation.h>
-#import <ReactCommon/RCTTurboModule.h>
-
-NS_ASSUME_NONNULL_BEGIN
-
-@interface NativeSampleModuleProvider : NSObject <RCTModuleProvider>
-
-@end
-
-NS_ASSUME_NONNULL_END
-```
-
-This declares a `NativeSampleModuleProvider` object that conforms to the `RCTModuleProvider` protocol.
-
-7. Implement the content of the `NativeSampleModuleProvider.mm` with the following:
-
-```objc title="NativeSampleModuleProvider.mm"
-
-#import "NativeSampleModuleProvider.h"
-#import <ReactCommon/CallInvoker.h>
-#import <ReactCommon/TurboModule.h>
-#import "NativeSampleModule.h"
-
-@implementation NativeSampleModuleProvider
-
-- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
-    (const facebook::react::ObjCTurboModule::InitParams &)params
-{
-  return std::make_shared<facebook::react::NativeSampleModule>(params.jsInvoker);
-}
-
-@end
-```
-
-This code implements the `RCTModuleProvider` protocol by creating the pure C++ `NativeSampleModule` when the `getTurboModule:` method is called.
-
-##### 3.2 Update the package.json
-
-The last step consists in updating the `package.json` to tell React Native about the link between the JS specs of the Native Module and the concrete implementation of those spec in native code.
-
-Modify the `package.json` as it follows:
-
-```json title="package.json"
-     "start": "react-native start",
-     "test": "jest"
-   },
-   "codegenConfig": {
-     "name": "AppSpecs",
-     "type": "modules",
-     "jsSrcsDir": "specs",
-     "android": {
-       "javaPackageName": "com.sampleapp.specs"
-     // highlight-add-start
-     },
-     "ios": {
-        "modulesProvider": {
-          "NativeSampleModule":  "NativeSampleModuleProvider"
-        }
-     }
-     // highlight-add-end
-   },
-
-   "dependencies": {
-```
-
-At this point, you need to re-install the pods to make sure that codegen runs again to generate the new files:
-
-```bash
-# from the ios folder
-bundle exec pod install
-open SampleApp.xcworkspace
-```
-
-If you now build your application from Xcode, you should be able to build successfully.
-
-## 5. Testing your Code
-
-It's now time to access our C++ Turbo Native Module from JS. To do so, we have to modify the `App.tsx` file to import the Turbo Native Module and to call it in our code.
-
-1. Open the `App.tsx` file.
-2. Replace the content of the template with the following code:
-
-```tsx title="App.tsx"
-import React from 'react';
-import {
-  Button,
-  SafeAreaView,
-  StyleSheet,
-  Text,
-  TextInput,
-  View,
-} from 'react-native';
-import SampleTurboModule from './specs/NativeSampleModule';
-
-function App(): React.JSX.Element {
-  const [value, setValue] = React.useState('');
-  const [reversedValue, setReversedValue] = React.useState('');
-
-  const onPress = () => {
-    const revString = SampleTurboModule.reverseString(value);
-    setReversedValue(revString);
-  };
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <View>
-        <Text style={styles.title}>
-          Welcome to C++ Turbo Native Module Example
-        </Text>
-        <Text>Write down here the text you want to reverse</Text>
-        <TextInput
-          style={styles.textInput}
-          placeholder="Write your text here"
-          onChangeText={setValue}
-          value={value}
-        />
-        <Button title="Reverse" onPress={onPress} />
-        <Text>Reversed text: {reversedValue}</Text>
-      </View>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  title: {
-    fontSize: 18,
-    marginBottom: 20,
-  },
-  textInput: {
-    borderColor: 'black',
-    borderWidth: 1,
-    borderRadius: 5,
-    padding: 10,
-    marginTop: 10,
-  },
-});
-
-export default App;
-```
-
-The interesting lines in this app are:
-
-- `import SampleTurboModule from './specs/NativeSampleModule';`: this line imports the Turbo Native Module in the app,
-- `const revString = SampleTurboModule.reverseString(value);` in the `onPress` callback: this is how you can use the Turbo Native Module in your app.
-
-:::warning
-For the sake of this example and to keep it as short as possible, we directly imported the spec file in our app.
-The best practice in this case is to create a separate file to wrap the specs and use that file into your application.
-This allows you to prepare the input for the specs and gives you more control over them in JS.
-:::
-
-Congratulations, you wrote your first C++ Turbo Native Module!
-
-| <center>Android</center>                                                                             | <center>iOS</center>                                                                          |
-| ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
-| <center><img src="/docs/assets/CxxGuideAndroidVideo.gif" alt="Android Video" height="600"/></center> | <center><img src="/docs/assets/CxxGuideIOSVideo.gif" alt="iOS video" height="600" /></center> |
+import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameForCurrentVersion';
+import {getCurrentVersion} from '@site/src/getCurrentVersion';
+import CodeBlock from '@theme/CodeBlock';
+
+# Cross-Platform Native Modules (C++)
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+Writing a module in C++ is the best way to share platform-agnostic code between Android and iOS. With pure C++ modules, you can write your logic only once and reuse it right away from all the platforms, without the need of writing platform-specific code.
+
+In this guide, we will go through the creation of a pure C++ Turbo Native Module:
+
+1. Create the JS specs
+2. Configure Codegen to generate the scaffolding
+3. Implement the Native logic
+4. Register the module in the Android and iOS application
+5. Test your changes in JS
+
+The rest of this guide assumes that you have created your application running the command:
+
+<CodeBlock language="bash" title="shell">
+{`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`}
+</CodeBlock>
+
+## 1. Create the JS specs
+
+Pure C++ Turbo Native Modules are Turbo Native Modules. They need a specification file (also called spec file) so that Codegen can create the scaffolding code for us. The specification file is also what we use to access the Turbo Native Module in JS.
+
+Spec files need to be written in a typed JS dialect. React Native currently supports Flow or TypeScript.
+
+1. Inside the root folder of your app, create a new folder called `specs`.
+2. Create a new file called `NativeSampleModule.ts` with the following code:
+
+:::warning
+All Native Turbo Module spec files must have the prefix `Native`, otherwise Codegen will ignore them.
+:::
+
+<Tabs groupId="tnm-specs" queryString defaultValue={constants.defaultJavaScriptSpecLanguages} values={constants.javaScriptSpecLanguages}>
+<TabItem value="flow">
+
+```ts title="specs/NativeSampleModule.ts"
+// @flow
+import type {TurboModule} from 'react-native'
+import { TurboModuleRegistry } from "react-native";
+
+export interface Spec extends TurboModule {
+  +reverseString: (input: string) => string;
+}
+
+export default (TurboModuleRegistry.getEnforcing<Spec>(
+  "NativeSampleModule"
+): Spec);
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```ts title="specs/NativeSampleModule.ts"
+import {TurboModule, TurboModuleRegistry} from 'react-native';
+
+export interface Spec extends TurboModule {
+  readonly reverseString: (input: string) => string;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>(
+  'NativeSampleModule',
+);
+```
+
+</TabItem>
+</Tabs>
+
+## 2. Configure Codegen
+
+The next step is to configure [Codegen](what-is-codegen.mdx) in your `package.json`. Update the file to include:
+
+```json title="package.json"
+     "start": "react-native start",
+     "test": "jest"
+   },
+   // highlight-add-start
+   "codegenConfig": {
+     "name": "AppSpecs",
+     "type": "modules",
+     "jsSrcsDir": "specs",
+     "android": {
+       "javaPackageName": "com.sampleapp.specs"
+     }
+   },
+   // highlight-add-end
+   "dependencies": {
+```
+
+This configuration tells Codegen to look for spec files in the `specs` folder. It also instructs Codegen to only generate code for `modules` and to namespace the generated code as `AppSpecs`.
+
+## 3. Write the Native Code
+
+Writing a C++ Turbo Native Module allows you to share the code between Android and iOS. Therefore we will be writing the code once, and we will look into what changes we need to apply to the platforms so that the C++ code can be picked up.
+
+1. Create a folder named `shared` at the same level as the `android` and `ios` folders.
+2. Inside the `shared` folder, create a new file called `NativeSampleModule.h`.
+
+   ```cpp title="shared/NativeSampleModule.h"
+   #pragma once
+
+   #include <AppSpecsJSI.h>
+
+   #include <memory>
+   #include <string>
+
+   namespace facebook::react {
+
+   class NativeSampleModule : public NativeSampleModuleCxxSpec<NativeSampleModule> {
+   public:
+     NativeSampleModule(std::shared_ptr<CallInvoker> jsInvoker);
+
+     std::string reverseString(jsi::Runtime& rt, std::string input);
+   };
+
+   } // namespace facebook::react
+
+   ```
+
+3. Inside the `shared` folder, create a new file called `NativeSampleModule.cpp`.
+
+   ```cpp title="shared/NativeSampleModule.cpp"
+   #include "NativeSampleModule.h"
+
+   namespace facebook::react {
+
+   NativeSampleModule::NativeSampleModule(std::shared_ptr<CallInvoker> jsInvoker)
+       : NativeSampleModuleCxxSpec(std::move(jsInvoker)) {}
+
+   std::string NativeSampleModule::reverseString(jsi::Runtime& rt, std::string input) {
+     return std::string(input.rbegin(), input.rend());
+   }
+
+   } // namespace facebook::react
+   ```
+
+Let's have a look at the two files we created:
+
+- The `NativeSampleModule.h` file is the header file for a Pure C++ TurboModule. The `include` statements make sure that we include the specs that will be created by Codegen and that contains the interface and the base class we need to implement.
+- The module lives in the `facebook::react` namespace to have access to all the types that live in that namespace.
+- The class `NativeSampleModule` is the actual Turbo Native Module class and it extends the `NativeSampleModuleCxxSpec` class which contains some glue code and boilerplate code to let this class behave as a Turbo Native Module.
+- Finally, we have the constructor, that accepts a pointer to the `CallInvoker`, to communicate with JS if needed and the function's prototype we have to implement.
+
+The `NativeSampleModule.cpp` file is the actual implementation of our Turbo Native Module and implements the constructor and the method that we declared in the specs.
+
+## 4. Register the Module in the platform
+
+The next steps will let us register the module in the platform. This is the step that exposes the native code to JS so that the React Native application can finally call the native methods from the JS layer.
+
+This is the only time when we will have to write some platform-specific code.
+
+### Android
+
+To make sure that the Android app can effectively build the C++ Turbo Native Module, we need to:
+
+1. Create a `CMakeLists.txt` to access our C++ code.
+2. Modify `build.gradle` to point to the newly created `CMakeLists.txt` file.
+3. Create an `OnLoad.cpp` file in our Android app to register the new Turbo Native Module.
+
+#### 1. Create the `CMakeLists.txt` file
+
+Android uses CMake to build. CMake needs to access the files we defined in our shared folder to be able to build them.
+
+1. Create a new folder `SampleApp/android/app/src/main/jni`. The `jni` folder is where the C++ side of Android lives.
+2. Create a `CMakeLists.txt` file and add this context:
+
+```shell title="CMakeLists.txt"
+cmake_minimum_required(VERSION 3.13)
+
+# Define the library name here.
+project(appmodules)
+
+# This file includes all the necessary to let you build your React Native application
+include(${REACT_ANDROID_DIR}/cmake-utils/ReactNative-application.cmake)
+
+# Define where the additional source code lives. We need to crawl back the jni, main, src, app, android folders
+target_sources(${CMAKE_PROJECT_NAME} PRIVATE ../../../../../shared/NativeSampleModule.cpp)
+
+# Define where CMake can find the additional header files. We need to crawl back the jni, main, src, app, android folders
+target_include_directories(${CMAKE_PROJECT_NAME} PUBLIC ../../../../../shared)
+```
+
+The CMake file does the following things:
+
+- Defines the `appmodules` library, where all the app C++ code will be included.
+- Loads the base React Native's CMake file.
+- Adds the Module C++ source code that we need to build with the `target_sources` directives. By default React Native will already populate the `appmodules` library with default sources, here we include our custom one. You can see that we need to crawl back from the `jni` folder to the `shared` folder where our C++ Turbo Module lives.
+- Specifies where CMake can find the module header files. Also in this case we need to crawl back from the `jni` folder.
+
+#### 2. Modify `build.gradle` to include the custom C++ code
+
+Gradle is the tool that orchestrates the Android build. We need to tell it where it can find the `CMake` files to build the Turbo Native Module.
+
+1. Open the `SampleApp/android/app/build.gradle` file.
+2. Add the following block into the Gradle file, within the existing `android` block:
+
+```diff title="android/app/build.gradle"
+    buildTypes {
+        debug {
+            signingConfig signingConfigs.debug
+        }
+        release {
+            // Caution! In production, you need to generate your own keystore file.
+            // see https://reactnative.dev/docs/signed-apk-android.
+            signingConfig signingConfigs.debug
+            minifyEnabled enableProguardInReleaseBuilds
+            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+        }
+    }
+
++   externalNativeBuild {
++       cmake {
++           path "src/main/jni/CMakeLists.txt"
++       }
++   }
+}
+```
+
+This block tells the Gradle file where to look for the CMake file. The path is relative to the folder where the `build.gradle` file lives, so we need to add the path to the `CMakeLists.txt` files in the `jni` folder.
+
+#### 3. Register the new Turbo Native Module
+
+The final step is to register the new C++ Turbo Native Module in the runtime, so that when JS requires the C++ Turbo Native Module, the app knows where to find it and can return it.
+
+1. From the folder `SampleApp/android/app/src/main/jni`, run the following command:
+
+<CodeBlock language="sh" title="shell">
+{`curl -O https://raw.githubusercontent.com/facebook/react-native/${getCoreBranchNameForCurrentVersion()}/packages/react-native/ReactAndroid/cmake-utils/default-app-setup/OnLoad.cpp`}
+</CodeBlock>
+
+2. Then, modify this file as follows:
+
+```diff title="android/app/src/main/jni/OnLoad.cpp"
+#include <DefaultComponentsRegistry.h>
+#include <DefaultTurboModuleManagerDelegate.h>
+#include <autolinking.h>
+#include <fbjni/fbjni.h>
+#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
+#include <rncore.h>
+
++ // Include the NativeSampleModule header
++ #include <NativeSampleModule.h>
+
+//...
+
+std::shared_ptr<TurboModule> cxxModuleProvider(
+    const std::string& name,
+    const std::shared_ptr<CallInvoker>& jsInvoker) {
+  // Here you can provide your CXX Turbo Modules coming from
+  // either your application or from external libraries. The approach to follow
+  // is similar to the following (for a module called `NativeCxxModuleExample`):
+  //
+  // if (name == NativeCxxModuleExample::kModuleName) {
+  //   return std::make_shared<NativeCxxModuleExample>(jsInvoker);
+  // }
+
++  // This code registers the module so that when the JS side asks for it, the app can return it
++  if (name == NativeSampleModule::kModuleName) {
++    return std::make_shared<NativeSampleModule>(jsInvoker);
++  }
+
+  // And we fallback to the CXX module providers autolinked
+  return autolinking_cxxModuleProvider(name, jsInvoker);
+}
+
+// leave the rest of the file
+```
+
+These steps download the original `OnLoad.cpp` file from React Native, so that we can safely override it to load the C++ Turbo Native Module in the app.
+
+Once we downloaded the file, we can modify it by:
+
+- Including the header file that points to our module
+- Registering the Turbo Native Module so that when JS requires it, the app can return it.
+
+Now, you can run `yarn android` from the project root to see your app building successfully.
+
+### iOS
+
+To make sure that the iOS app can effectively build the C++ Turbo Native Module, we need to:
+
+1. Install pods and run Codegen.
+2. Add the `shared` folder to our iOS project.
+3. Register the C++ Turbo Native Module in the application.
+
+#### 1. Install Pods and Run Codegen.
+
+The first step we need to run is the usual steps we run every time we have to prepare our iOS application. CocoaPods is the tool we use to setup and install React Native dependencies and, as part of the process, it will also run Codegen for us.
+
+```bash
+cd ios
+bundle install
+bundle exec pod install
+```
+
+#### 2. Add the shared folder to the iOS project
+
+This step adds the `shared` folder to the project to make it visible to Xcode.
+
+1. Open the CocoaPods generated Xcode Workspace.
+
+```bash
+cd ios
+open SampleApp.xcworkspace
+```
+
+2. Click on the `SampleApp` project on the left and select `Add files to "Sample App"...`.
+
+![Add Files to Sample App...](/docs/assets/AddFilesToXcode1.png)
+
+3. Select the `shared` folder and click on `Add`.
+
+![Add Files to Sample App...](/docs/assets/AddFilesToXcode2.png)
+
+If you did everything right, your project on the left should look like this:
+
+![Xcode Project](/docs/assets/CxxTMGuideXcodeProject.png)
+
+#### 3. Registering the Cxx Turbo Native Module in your app
+
+To register a pure Cxx Turbo Native Module in your app, you need to:
+
+1. Create a `ModuleProvider` for the Native Module
+2. Configure the `package.json` to associate the JS module name with the ModuleProvider class.
+
+The ModuleProvider is an Objective-C++ that glues together the Pure C++ module with the rest of your iOS App.
+
+##### 3.1 Create the ModuleProvider
+
+1. From Xcode, select the `SampleApp` project and press <kbd>⌘</kbd> + <kbd>N</kbd> to create a new file.
+2. Select the `Cocoa Touch Class` template
+3. Add the name `NativeSampleModuleProvider` (keep the other field as `Subclass of: NSObject` and `Language: Objective-C`)
+4. Click Next to generate the files.
+5. Rename the `NativeSampleModuleProvider.m` to `NativeSampleModuleProvider.mm`. The `mm` extension denotes an Objective-C++ file.
+6. Implement the content of the `NativeSampleModuleProvider.h` with the following:
+
+```objc title="NativeSampleModuleProvider.h"
+
+#import <Foundation/Foundation.h>
+#import <ReactCommon/RCTTurboModule.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface NativeSampleModuleProvider : NSObject <RCTModuleProvider>
+
+@end
+
+NS_ASSUME_NONNULL_END
+```
+
+This declares a `NativeSampleModuleProvider` object that conforms to the `RCTModuleProvider` protocol.
+
+7. Implement the content of the `NativeSampleModuleProvider.mm` with the following:
+
+```objc title="NativeSampleModuleProvider.mm"
+
+#import "NativeSampleModuleProvider.h"
+#import <ReactCommon/CallInvoker.h>
+#import <ReactCommon/TurboModule.h>
+#import "NativeSampleModule.h"
+
+@implementation NativeSampleModuleProvider
+
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
+    (const facebook::react::ObjCTurboModule::InitParams &)params
+{
+  return std::make_shared<facebook::react::NativeSampleModule>(params.jsInvoker);
+}
+
+@end
+```
+
+This code implements the `RCTModuleProvider` protocol by creating the pure C++ `NativeSampleModule` when the `getTurboModule:` method is called.
+
+##### 3.2 Update the package.json
+
+The last step consists in updating the `package.json` to tell React Native about the link between the JS specs of the Native Module and the concrete implementation of those spec in native code.
+
+Modify the `package.json` as it follows:
+
+```json title="package.json"
+     "start": "react-native start",
+     "test": "jest"
+   },
+   "codegenConfig": {
+     "name": "AppSpecs",
+     "type": "modules",
+     "jsSrcsDir": "specs",
+     "android": {
+       "javaPackageName": "com.sampleapp.specs"
+     // highlight-add-start
+     },
+     "ios": {
+        "modulesProvider": {
+          "NativeSampleModule":  "NativeSampleModuleProvider"
+        }
+     }
+     // highlight-add-end
+   },
+
+   "dependencies": {
+```
+
+At this point, you need to re-install the pods to make sure that codegen runs again to generate the new files:
+
+```bash
+# from the ios folder
+bundle exec pod install
+open SampleApp.xcworkspace
+```
+
+If you now build your application from Xcode, you should be able to build successfully.
+
+## 5. Testing your Code
+
+It's now time to access our C++ Turbo Native Module from JS. To do so, we have to modify the `App.tsx` file to import the Turbo Native Module and to call it in our code.
+
+1. Open the `App.tsx` file.
+2. Replace the content of the template with the following code:
+
+```tsx title="App.tsx"
+import {type JSX, useState} from 'react';
+import {
+  Button,
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+import SampleTurboModule from './specs/NativeSampleModule';
+
+function App(): JSX.Element {
+  const [value, setValue] = useState('');
+  const [reversedValue, setReversedValue] = useState('');
+
+  const onPress = () => {
+    const revString = SampleTurboModule.reverseString(value);
+    setReversedValue(revString);
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View>
+        <Text style={styles.title}>
+          Welcome to C++ Turbo Native Module Example
+        </Text>
+        <Text>Write down here the text you want to reverse</Text>
+        <TextInput
+          style={styles.textInput}
+          placeholder="Write your text here"
+          onChangeText={setValue}
+          value={value}
+        />
+        <Button title="Reverse" onPress={onPress} />
+        <Text>Reversed text: {reversedValue}</Text>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 18,
+    marginBottom: 20,
+  },
+  textInput: {
+    borderColor: 'black',
+    borderWidth: 1,
+    borderRadius: 5,
+    padding: 10,
+    marginTop: 10,
+  },
+});
+
+export default App;
+```
+
+The interesting lines in this app are:
+
+- `import SampleTurboModule from './specs/NativeSampleModule';`: this line imports the Turbo Native Module in the app,
+- `const revString = SampleTurboModule.reverseString(value);` in the `onPress` callback: this is how you can use the Turbo Native Module in your app.
+
+:::warning
+For the sake of this example and to keep it as short as possible, we directly imported the spec file in our app.
+The best practice in this case is to create a separate file to wrap the specs and use that file into your application.
+This allows you to prepare the input for the specs and gives you more control over them in JS.
+:::
+
+Congratulations, you wrote your first C++ Turbo Native Module!
+
+| <center>Android</center>                                                                             | <center>iOS</center>                                                                          |
+| ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
+| <center><img src="/docs/assets/CxxGuideAndroidVideo.gif" alt="Android Video" height="600"/></center> | <center><img src="/docs/assets/CxxGuideIOSVideo.gif" alt="iOS video" height="600" /></center> |
diff --git a/website/versioned_docs/version-0.85/toastandroid.md b/website/versioned_docs/version-0.85/toastandroid.md
index 0d7a569235d..07f2b7b20cd 100644
--- a/website/versioned_docs/version-0.85/toastandroid.md
+++ b/website/versioned_docs/version-0.85/toastandroid.md
@@ -17,7 +17,6 @@ Starting with Android 11 (API level 30), setting the gravity has no effect on te
 :::
 
 ```SnackPlayer name=Toast%20Android%20API%20Example&supportedPlatforms=android
-import React from 'react';
 import {StyleSheet, ToastAndroid, Button, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.85/touchablehighlight.md b/website/versioned_docs/version-0.85/touchablehighlight.md
index 98ea0823783..bb0a5d234c1 100644
--- a/website/versioned_docs/version-0.85/touchablehighlight.md
+++ b/website/versioned_docs/version-0.85/touchablehighlight.md
@@ -1,215 +1,215 @@
----
-id: touchablehighlight
-title: TouchableHighlight
----
-
-:::tip
-If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
-:::
-
-A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view.
-
-The underlay comes from wrapping the child in a new View, which can affect layout, and sometimes cause unwanted visual artifacts if not used correctly, for example if the backgroundColor of the wrapped view isn't explicitly set to an opaque color.
-
-TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View.
-
-```tsx
-function MyComponent(props: MyComponentProps) {
-  return (
-    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
-      <Text>My Component</Text>
-    </View>
-  );
-}
-
-<TouchableHighlight
-  activeOpacity={0.6}
-  underlayColor="#DDDDDD"
-  onPress={() => alert('Pressed!')}>
-  <MyComponent />
-</TouchableHighlight>;
-```
-
-## Example
-
-```SnackPlayer name=TouchableHighlight%20Example
-import React, {useState} from 'react';
-import {StyleSheet, Text, TouchableHighlight, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const TouchableHighlightExample = () => {
-  const [count, setCount] = useState(0);
-  const onPress = () => setCount(count + 1);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <TouchableHighlight onPress={onPress}>
-          <View style={styles.button}>
-            <Text>Touch Here</Text>
-          </View>
-        </TouchableHighlight>
-        <View style={styles.countContainer}>
-          <Text style={styles.countText}>{count || null}</Text>
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: 10,
-  },
-  button: {
-    alignItems: 'center',
-    backgroundColor: '#DDDDDD',
-    padding: 10,
-  },
-  countContainer: {
-    alignItems: 'center',
-    padding: 10,
-  },
-  countText: {
-    color: '#FF00FF',
-  },
-});
-
-export default TouchableHighlightExample;
-```
-
----
-
-# Reference
-
-## Props
-
-### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
-
-Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
-
----
-
-### `activeOpacity`
-
-Determines what the opacity of the wrapped view should be when touch is active. The value should be between 0 and 1. Defaults to 0.85. Requires `underlayColor` to be set.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `onHideUnderlay`
-
-Called immediately after the underlay is hidden.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onShowUnderlay`
-
-Called immediately after the underlay is shown.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `ref`
-
-A ref setter that will be assigned an [element node](element-nodes) when mounted.
-
----
-
-### `style`
-
-| Type       |
-| ---------- |
-| View.style |
-
----
-
-### `underlayColor`
-
-The color of the underlay that will show through when the touch is active.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `hasTVPreferredFocus` <div className="label ios">iOS</div>
-
-_(Apple TV only)_ TV preferred focus (see documentation for the View component).
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `nextFocusDown` <div className="label android">Android</div>
-
-TV next focus down (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusForward` <div className="label android">Android</div>
-
-TV next focus forward (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusLeft` <div className="label android">Android</div>
-
-TV next focus left (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusRight` <div className="label android">Android</div>
-
-TV next focus right (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusUp` <div className="label android">Android</div>
-
-TV next focus up (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `testOnly_pressed`
-
-Handy for snapshot tests.
-
-| Type |
-| ---- |
-| bool |
+---
+id: touchablehighlight
+title: TouchableHighlight
+---
+
+:::tip
+If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
+:::
+
+A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view.
+
+The underlay comes from wrapping the child in a new View, which can affect layout, and sometimes cause unwanted visual artifacts if not used correctly, for example if the backgroundColor of the wrapped view isn't explicitly set to an opaque color.
+
+TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View.
+
+```tsx
+function MyComponent(props: MyComponentProps) {
+  return (
+    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
+      <Text>My Component</Text>
+    </View>
+  );
+}
+
+<TouchableHighlight
+  activeOpacity={0.6}
+  underlayColor="#DDDDDD"
+  onPress={() => alert('Pressed!')}>
+  <MyComponent />
+</TouchableHighlight>;
+```
+
+## Example
+
+```SnackPlayer name=TouchableHighlight%20Example
+import {useState} from 'react';
+import {StyleSheet, Text, TouchableHighlight, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const TouchableHighlightExample = () => {
+  const [count, setCount] = useState(0);
+  const onPress = () => setCount(count + 1);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <TouchableHighlight onPress={onPress}>
+          <View style={styles.button}>
+            <Text>Touch Here</Text>
+          </View>
+        </TouchableHighlight>
+        <View style={styles.countContainer}>
+          <Text style={styles.countText}>{count || null}</Text>
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#DDDDDD',
+    padding: 10,
+  },
+  countContainer: {
+    alignItems: 'center',
+    padding: 10,
+  },
+  countText: {
+    color: '#FF00FF',
+  },
+});
+
+export default TouchableHighlightExample;
+```
+
+---
+
+# Reference
+
+## Props
+
+### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
+
+Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
+
+---
+
+### `activeOpacity`
+
+Determines what the opacity of the wrapped view should be when touch is active. The value should be between 0 and 1. Defaults to 0.85. Requires `underlayColor` to be set.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `onHideUnderlay`
+
+Called immediately after the underlay is hidden.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onShowUnderlay`
+
+Called immediately after the underlay is shown.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `ref`
+
+A ref setter that will be assigned an [element node](element-nodes) when mounted.
+
+---
+
+### `style`
+
+| Type       |
+| ---------- |
+| View.style |
+
+---
+
+### `underlayColor`
+
+The color of the underlay that will show through when the touch is active.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `hasTVPreferredFocus` <div className="label ios">iOS</div>
+
+_(Apple TV only)_ TV preferred focus (see documentation for the View component).
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `nextFocusDown` <div className="label android">Android</div>
+
+TV next focus down (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusForward` <div className="label android">Android</div>
+
+TV next focus forward (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusLeft` <div className="label android">Android</div>
+
+TV next focus left (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusRight` <div className="label android">Android</div>
+
+TV next focus right (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusUp` <div className="label android">Android</div>
+
+TV next focus up (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `testOnly_pressed`
+
+Handy for snapshot tests.
+
+| Type |
+| ---- |
+| bool |
diff --git a/website/versioned_docs/version-0.85/touchablenativefeedback.md b/website/versioned_docs/version-0.85/touchablenativefeedback.md
index a7465b9f2ed..eb0a67aa03c 100644
--- a/website/versioned_docs/version-0.85/touchablenativefeedback.md
+++ b/website/versioned_docs/version-0.85/touchablenativefeedback.md
@@ -1,219 +1,219 @@
----
-id: touchablenativefeedback
-title: TouchableNativeFeedback
----
-
-:::tip
-If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
-:::
-
-A wrapper for making views respond properly to touches (Android only). On Android this component uses native state drawable to display touch feedback.
-
-At the moment it only supports having a single View instance as a child node, as it's implemented by replacing that View with another instance of RCTView node with some additional properties set.
-
-Background drawable of native feedback touchable can be customized with `background` property.
-
-## Example
-
-```SnackPlayer name=TouchableNativeFeedback%20Android%20Component%20Example&supportedPlatforms=android
-import React, {useState} from 'react';
-import {Text, View, StyleSheet, TouchableNativeFeedback} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [rippleColor, setRippleColor] = useState(randomHexColor());
-  const [rippleOverflow, setRippleOverflow] = useState(false);
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <TouchableNativeFeedback
-          onPress={() => {
-            setRippleColor(randomHexColor());
-            setRippleOverflow(!rippleOverflow);
-          }}
-          background={TouchableNativeFeedback.Ripple(
-            rippleColor,
-            rippleOverflow,
-          )}>
-          <View style={styles.touchable}>
-            <Text style={styles.text}>TouchableNativeFeedback</Text>
-          </View>
-        </TouchableNativeFeedback>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const randomHexColor = () => {
-  return '#000000'.replace(/0/g, function () {
-    return Math.round(Math.random() * 16).toString(16);
-  });
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    backgroundColor: 'black',
-    paddingHorizontal: 20,
-  },
-  touchable: {
-    flex: 0.33,
-    justifyContent: 'center',
-    backgroundColor: '#eeeeee',
-    borderColor: 'black',
-    borderWidth: 1,
-  },
-  text: {
-    alignSelf: 'center',
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Props
-
-### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
-
-Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
-
----
-
-### `background`
-
-Determines the type of background drawable that's going to be used to display feedback. It takes an object with `type` property and extra data depending on the `type`. It's recommended to use one of the static methods to generate that dictionary.
-
-| Type               |
-| ------------------ |
-| backgroundPropType |
-
----
-
-### `useForeground`
-
-Set to true to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them.
-
-Check TouchableNativeFeedback.canUseNativeForeground() first, as this is only available on Android 6.0 and above. If you try to use this on older versions you will get a warning and fallback to background.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `hasTVPreferredFocus` <div className="label android">Android</div>
-
-TV preferred focus (see documentation for the View component).
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `nextFocusDown` <div className="label android">Android</div>
-
-TV next focus down (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusForward` <div className="label android">Android</div>
-
-TV next focus forward (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusLeft` <div className="label android">Android</div>
-
-TV next focus left (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusRight` <div className="label android">Android</div>
-
-TV next focus right (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusUp` <div className="label android">Android</div>
-
-TV next focus up (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
-## Methods
-
-### `SelectableBackground()`
-
-```tsx
-static SelectableBackground(
-  rippleRadius: number | null,
-): ThemeAttributeBackgroundPropType;
-```
-
-Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.
-
----
-
-### `SelectableBackgroundBorderless()`
-
-```tsx
-static SelectableBackgroundBorderless(
-  rippleRadius: number | null,
-): ThemeAttributeBackgroundPropType;
-```
-
-Creates an object that represent android theme's default background for borderless selectable elements (`?android:attr/selectableItemBackgroundBorderless`). Available on android API level 21+. `rippleRadius` parameter controls the radius of the ripple effect.
-
----
-
-### `Ripple()`
-
-```tsx
-static Ripple(
-  color: ColorValue,
-  borderless: boolean,
-  rippleRadius?: number | null,
-): RippleBackgroundPropType;
-```
-
-Creates an object that represents ripple drawable with specified color (as a string). If property `borderless` evaluates to true the ripple will render outside of the view bounds (see native actionbar buttons as an example of that behavior). This background type is available on Android API level 21+.
-
-**Parameters:**
-
-| Name         | Type    | Required | Description                                 |
-| ------------ | ------- | -------- | ------------------------------------------- |
-| color        | string  | Yes      | The ripple color                            |
-| borderless   | boolean | Yes      | If the ripple can render outside its bounds |
-| rippleRadius | ?number | No       | controls the radius of the ripple effect    |
-
----
-
-### `canUseNativeForeground()`
-
-```tsx
-static canUseNativeForeground(): boolean;
-```
+---
+id: touchablenativefeedback
+title: TouchableNativeFeedback
+---
+
+:::tip
+If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
+:::
+
+A wrapper for making views respond properly to touches (Android only). On Android this component uses native state drawable to display touch feedback.
+
+At the moment it only supports having a single View instance as a child node, as it's implemented by replacing that View with another instance of RCTView node with some additional properties set.
+
+Background drawable of native feedback touchable can be customized with `background` property.
+
+## Example
+
+```SnackPlayer name=TouchableNativeFeedback%20Android%20Component%20Example&supportedPlatforms=android
+import {useState} from 'react';
+import {Text, View, StyleSheet, TouchableNativeFeedback} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [rippleColor, setRippleColor] = useState(randomHexColor());
+  const [rippleOverflow, setRippleOverflow] = useState(false);
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <TouchableNativeFeedback
+          onPress={() => {
+            setRippleColor(randomHexColor());
+            setRippleOverflow(!rippleOverflow);
+          }}
+          background={TouchableNativeFeedback.Ripple(
+            rippleColor,
+            rippleOverflow,
+          )}>
+          <View style={styles.touchable}>
+            <Text style={styles.text}>TouchableNativeFeedback</Text>
+          </View>
+        </TouchableNativeFeedback>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const randomHexColor = () => {
+  return '#000000'.replace(/0/g, function () {
+    return Math.round(Math.random() * 16).toString(16);
+  });
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: 'black',
+    paddingHorizontal: 20,
+  },
+  touchable: {
+    flex: 0.33,
+    justifyContent: 'center',
+    backgroundColor: '#eeeeee',
+    borderColor: 'black',
+    borderWidth: 1,
+  },
+  text: {
+    alignSelf: 'center',
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Props
+
+### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
+
+Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
+
+---
+
+### `background`
+
+Determines the type of background drawable that's going to be used to display feedback. It takes an object with `type` property and extra data depending on the `type`. It's recommended to use one of the static methods to generate that dictionary.
+
+| Type               |
+| ------------------ |
+| backgroundPropType |
+
+---
+
+### `useForeground`
+
+Set to true to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them.
+
+Check TouchableNativeFeedback.canUseNativeForeground() first, as this is only available on Android 6.0 and above. If you try to use this on older versions you will get a warning and fallback to background.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `hasTVPreferredFocus` <div className="label android">Android</div>
+
+TV preferred focus (see documentation for the View component).
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `nextFocusDown` <div className="label android">Android</div>
+
+TV next focus down (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusForward` <div className="label android">Android</div>
+
+TV next focus forward (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusLeft` <div className="label android">Android</div>
+
+TV next focus left (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusRight` <div className="label android">Android</div>
+
+TV next focus right (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusUp` <div className="label android">Android</div>
+
+TV next focus up (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+## Methods
+
+### `SelectableBackground()`
+
+```tsx
+static SelectableBackground(
+  rippleRadius: number | null,
+): ThemeAttributeBackgroundPropType;
+```
+
+Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.
+
+---
+
+### `SelectableBackgroundBorderless()`
+
+```tsx
+static SelectableBackgroundBorderless(
+  rippleRadius: number | null,
+): ThemeAttributeBackgroundPropType;
+```
+
+Creates an object that represent android theme's default background for borderless selectable elements (`?android:attr/selectableItemBackgroundBorderless`). Available on android API level 21+. `rippleRadius` parameter controls the radius of the ripple effect.
+
+---
+
+### `Ripple()`
+
+```tsx
+static Ripple(
+  color: ColorValue,
+  borderless: boolean,
+  rippleRadius?: number | null,
+): RippleBackgroundPropType;
+```
+
+Creates an object that represents ripple drawable with specified color (as a string). If property `borderless` evaluates to true the ripple will render outside of the view bounds (see native actionbar buttons as an example of that behavior). This background type is available on Android API level 21+.
+
+**Parameters:**
+
+| Name         | Type    | Required | Description                                 |
+| ------------ | ------- | -------- | ------------------------------------------- |
+| color        | string  | Yes      | The ripple color                            |
+| borderless   | boolean | Yes      | If the ripple can render outside its bounds |
+| rippleRadius | ?number | No       | controls the radius of the ripple effect    |
+
+---
+
+### `canUseNativeForeground()`
+
+```tsx
+static canUseNativeForeground(): boolean;
+```
diff --git a/website/versioned_docs/version-0.85/touchableopacity.md b/website/versioned_docs/version-0.85/touchableopacity.md
index 72af0bc5f49..0764f4787fa 100644
--- a/website/versioned_docs/version-0.85/touchableopacity.md
+++ b/website/versioned_docs/version-0.85/touchableopacity.md
@@ -1,151 +1,151 @@
----
-id: touchableopacity
-title: TouchableOpacity
----
-
-:::tip
-If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
-:::
-
-A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it.
-
-Opacity is controlled by wrapping the children in an `Animated.View`, which is added to the view hierarchy. Be aware that this can affect layout.
-
-## Example
-
-```SnackPlayer name=TouchableOpacity%20Example
-import React, {useState} from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [count, setCount] = useState(0);
-  const onPress = () => setCount(prevCount => prevCount + 1);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.countContainer}>
-          <Text>Count: {count}</Text>
-        </View>
-        <TouchableOpacity style={styles.button} onPress={onPress}>
-          <Text>Press Here</Text>
-        </TouchableOpacity>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: 10,
-  },
-  button: {
-    alignItems: 'center',
-    backgroundColor: '#DDDDDD',
-    padding: 10,
-  },
-  countContainer: {
-    alignItems: 'center',
-    padding: 10,
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Props
-
-### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
-
-Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
-
----
-
-### `style`
-
-| Type                           |
-| ------------------------------ |
-| [View.style](view-style-props) |
-
----
-
-### `activeOpacity`
-
-Determines what the opacity of the wrapped view should be when touch is active. Defaults to `0.2`.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `hasTVPreferredFocus` <div className="label ios">iOS</div>
-
-_(Apple TV only)_ TV preferred focus (see documentation for the View component).
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `nextFocusDown` <div className="label android">Android</div>
-
-TV next focus down (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusForward` <div className="label android">Android</div>
-
-TV next focus forward (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusLeft` <div className="label android">Android</div>
-
-TV next focus left (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusRight` <div className="label android">Android</div>
-
-TV next focus right (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusUp` <div className="label android">Android</div>
-
-TV next focus up (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `ref`
-
-A ref setter that will be assigned an [element node](element-nodes) when mounted.
+---
+id: touchableopacity
+title: TouchableOpacity
+---
+
+:::tip
+If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
+:::
+
+A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it.
+
+Opacity is controlled by wrapping the children in an `Animated.View`, which is added to the view hierarchy. Be aware that this can affect layout.
+
+## Example
+
+```SnackPlayer name=TouchableOpacity%20Example
+import {useState} from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [count, setCount] = useState(0);
+  const onPress = () => setCount(prevCount => prevCount + 1);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.countContainer}>
+          <Text>Count: {count}</Text>
+        </View>
+        <TouchableOpacity style={styles.button} onPress={onPress}>
+          <Text>Press Here</Text>
+        </TouchableOpacity>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#DDDDDD',
+    padding: 10,
+  },
+  countContainer: {
+    alignItems: 'center',
+    padding: 10,
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Props
+
+### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
+
+Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
+
+---
+
+### `style`
+
+| Type                           |
+| ------------------------------ |
+| [View.style](view-style-props) |
+
+---
+
+### `activeOpacity`
+
+Determines what the opacity of the wrapped view should be when touch is active. Defaults to `0.2`.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `hasTVPreferredFocus` <div className="label ios">iOS</div>
+
+_(Apple TV only)_ TV preferred focus (see documentation for the View component).
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `nextFocusDown` <div className="label android">Android</div>
+
+TV next focus down (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusForward` <div className="label android">Android</div>
+
+TV next focus forward (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusLeft` <div className="label android">Android</div>
+
+TV next focus left (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusRight` <div className="label android">Android</div>
+
+TV next focus right (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusUp` <div className="label android">Android</div>
+
+TV next focus up (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `ref`
+
+A ref setter that will be assigned an [element node](element-nodes) when mounted.
diff --git a/website/versioned_docs/version-0.85/touchablewithoutfeedback.md b/website/versioned_docs/version-0.85/touchablewithoutfeedback.md
index c7e875156df..fb0978b1ad1 100644
--- a/website/versioned_docs/version-0.85/touchablewithoutfeedback.md
+++ b/website/versioned_docs/version-0.85/touchablewithoutfeedback.md
@@ -1,531 +1,531 @@
----
-id: touchablewithoutfeedback
-title: TouchableWithoutFeedback
----
-
-:::tip
-If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
-:::
-
-Do not use unless you have a very good reason. All elements that respond to press should have a visual feedback when touched.
-
-`TouchableWithoutFeedback` supports only one child. If you wish to have several child components, wrap them in a View. Importantly, `TouchableWithoutFeedback` works by cloning its child and applying responder props to it. It is therefore required that any intermediary components pass through those props to the underlying React Native component.
-
-## Usage Pattern
-
-```tsx
-function MyComponent(props: MyComponentProps) {
-  return (
-    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
-      <Text>My Component</Text>
-    </View>
-  );
-}
-
-<TouchableWithoutFeedback onPress={() => alert('Pressed!')}>
-  <MyComponent />
-</TouchableWithoutFeedback>;
-```
-
-## Example
-
-```SnackPlayer name=TouchableWithoutFeedback
-import React, {useState} from 'react';
-import {StyleSheet, TouchableWithoutFeedback, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const TouchableWithoutFeedbackExample = () => {
-  const [count, setCount] = useState(0);
-
-  const onPress = () => {
-    setCount(count + 1);
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.countContainer}>
-          <Text style={styles.countText}>Count: {count}</Text>
-        </View>
-        <TouchableWithoutFeedback onPress={onPress}>
-          <View style={styles.button}>
-            <Text>Touch Here</Text>
-          </View>
-        </TouchableWithoutFeedback>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: 10,
-  },
-  button: {
-    alignItems: 'center',
-    backgroundColor: '#DDDDDD',
-    padding: 10,
-  },
-  countContainer: {
-    alignItems: 'center',
-    padding: 10,
-  },
-  countText: {
-    color: '#FF00FF',
-  },
-});
-
-export default TouchableWithoutFeedbackExample;
-```
-
----
-
-# Reference
-
-## Props
-
-### `accessibilityIgnoresInvertColors` <div className="label ios">iOS</div>
-
-A value indicating this view should or should not be inverted when color inversion is turned on. A value of `true` will tell the view to not be inverted even if color inversion is turned on.
-
-See the [Accessibility guide](accessibility.md#accessibilityignoresinvertcolors) for more information.
-
-| Type    |
-| ------- |
-| Boolean |
-
----
-
-### `accessible`
-
-When `true`, indicates that the view is an accessibility element. By default, all the touchable elements are accessible.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `accessibilityLabel`
-
-Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the `Text` nodes separated by space.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityLanguage` <div className="label ios">iOS</div>
-
-A value indicating which language should be used by the screen reader when the user interacts with the element. It should follow the [BCP 47 specification](https://www.rfc-editor.org/info/bcp47).
-
-See the [iOS `accessibilityLanguage` doc](https://developer.apple.com/documentation/objectivec/nsobject/1615192-accessibilitylanguage) for more information.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityHint`
-
-An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityRole`
-
-`accessibilityRole` communicates the purpose of a component to the user of an assistive technology.
-
-`accessibilityRole` can be one of the following:
-
-- `'none'` - Used when the element has no role.
-- `'button'` - Used when the element should be treated as a button.
-- `'link'` - Used when the element should be treated as a link.
-- `'search'` - Used when the text field element should also be treated as a search field.
-- `'image'` - Used when the element should be treated as an image. Can be combined with button or link, for example.
-- `'keyboardkey'` - Used when the element acts as a keyboard key.
-- `'text'` - Used when the element should be treated as static text that cannot change.
-- `'adjustable'` - Used when an element can be "adjusted" (e.g. a slider).
-- `'imagebutton'` - Used when the element should be treated as a button and is also an image.
-- `'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.
-- `'alert'` - Used when an element contains important text to be presented to the user.
-- `'checkbox'` - Used when an element represents a checkbox which can be checked, unchecked, or have mixed checked state.
-- `'combobox'` - Used when an element represents a combo box, which allows the user to select among several choices.
-- `'menu'` - Used when the component is a menu of choices.
-- `'menubar'` - Used when a component is a container of multiple menus.
-- `'menuitem'` - Used to represent an item within a menu.
-- `'progressbar'` - Used to represent a component which indicates progress of a task.
-- `'radio'` - Used to represent a radio button.
-- `'radiogroup'` - Used to represent a group of radio buttons.
-- `'scrollbar'` - Used to represent a scroll bar.
-- `'spinbutton'` - Used to represent a button which opens a list of choices.
-- `'switch'` - Used to represent a switch which can be turned on and off.
-- `'tab'` - Used to represent a tab.
-- `'tablist'` - Used to represent a list of tabs.
-- `'timer'` - Used to represent a timer.
-- `'toolbar'` - Used to represent a tool bar (a container of action buttons or components).
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityState`
-
-Describes the current state of a component to the user of an assistive technology.
-
-See the [Accessibility guide](accessibility.md#accessibilitystate-ios-android) for more information.
-
-| Type                                                                                             |
-| ------------------------------------------------------------------------------------------------ |
-| object: `{disabled: bool, selected: bool, checked: bool or 'mixed', busy: bool, expanded: bool}` |
-
----
-
-### `accessibilityActions`
-
-Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The `accessibilityActions` property should contain a list of action objects. Each action object should contain the field name and label.
-
-See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
-
-| Type  |
-| ----- |
-| array |
-
----
-
-### `aria-busy`
-
-Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-checked`
-
-Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
-| Type             | Default |
-| ---------------- | ------- |
-| boolean, 'mixed' | false   |
-
----
-
-### `aria-disabled`
-
-Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-expanded`
-
-Indicates whether an expandable element is currently expanded or collapsed.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-hidden`
-
-Indicates whether the element is hidden from assistive technologies.
-
-For example, in a window that contains sibling views `A` and `B`, setting `aria-hidden` to `true` on view `B` causes VoiceOver to ignore the `B` element and its children.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-label`
-
-Defines a string value that labels an interactive element.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `aria-live` <div className="label android">Android</div>
-
-Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
-
-- **off** Accessibility services should not announce changes to this view.
-- **polite** Accessibility services should announce changes to this view.
-- **assertive** Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
-
-| Type                                     | Default |
-| ---------------------------------------- | ------- |
-| enum(`'assertive'`, `'off'`, `'polite'`) | `'off'` |
-
----
-
-### `aria-modal` <div className="label ios">iOS</div>
-
-Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. Has precedence over the [`accessibilityViewIsModal`](#accessibilityviewismodal-ios) prop.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-selected`
-
-Indicates whether a selectable element is currently selected or not.
-
-| Type    |
-| ------- |
-| boolean |
-
-### `onAccessibilityAction`
-
-Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.
-
-See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `accessibilityValue`
-
-Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
-See the [Accessibility guide](accessibility.md#accessibilityvalue-ios-android) for more information.
-
-| Type                                                            |
-| --------------------------------------------------------------- |
-| object: `{min: number, max: number, now: number, text: string}` |
-
----
-
-### `aria-valuemax`
-
-Represents the maximum value for range-based components, such as sliders and progress bars. Has precedence over the `max` value in the `accessibilityValue` prop.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `aria-valuemin`
-
-Represents the minimum value for range-based components, such as sliders and progress bars. Has precedence over the `min` value in the `accessibilityValue` prop.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `aria-valuenow`
-
-Represents the current value for range-based components, such as sliders and progress bars. Has precedence over the `now` value in the `accessibilityValue` prop.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `aria-valuetext`
-
-Represents the textual description of the component. Has precedence over the `text` value in the `accessibilityValue` prop.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `delayLongPress`
-
-Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `delayPressIn`
-
-Duration (in milliseconds), from the start of the touch, before `onPressIn` is called.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `delayPressOut`
-
-Duration (in milliseconds), from the release of the touch, before `onPressOut` is called.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `disabled`
-
-If true, disable all interactions for this component.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `hitSlop`
-
-This defines how far your touch can start away from the button. This is added to `pressRetentionOffset` when moving off of the button.
-
-:::note
-The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
-:::
-
-| Type                   |
-| ---------------------- |
-| [Rect](rect) or number |
-
-### `id`
-
-Used to locate this view from native code. Has precedence over `nativeID` prop.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `onBlur`
-
-Invoked when the item loses focus.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
-
----
-
-### `onFocus`
-
-Invoked when the item receives focus.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
-
----
-
-### `onLayout`
-
-Invoked on mount and on layout changes.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
-
----
-
-### `onLongPress`
-
-Called if the time after `onPressIn` lasts longer than 370 milliseconds. This time period can be customized with [`delayLongPress`](#delaylongpress).
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onPress`
-
-Called when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock). The first function argument is an event in form of [PressEvent](pressevent).
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onPressIn`
-
-Called as soon as the touchable element is pressed and invoked even before onPress. This can be useful when making network requests. The first function argument is an event in form of [PressEvent](pressevent).
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onPressOut`
-
-Called as soon as the touch is released even before onPress. The first function argument is an event in form of [PressEvent](pressevent).
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `pressRetentionOffset`
-
-When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations.
-
-| Type                   |
-| ---------------------- |
-| [Rect](rect) or number |
-
----
-
-### `nativeID`
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `testID`
-
-Used to locate this view in end-to-end tests.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `touchSoundDisabled` <div className="label android">Android</div>
-
-If true, doesn't play a system sound on touch.
-
-| Type    |
-| ------- |
-| Boolean |
+---
+id: touchablewithoutfeedback
+title: TouchableWithoutFeedback
+---
+
+:::tip
+If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
+:::
+
+Do not use unless you have a very good reason. All elements that respond to press should have a visual feedback when touched.
+
+`TouchableWithoutFeedback` supports only one child. If you wish to have several child components, wrap them in a View. Importantly, `TouchableWithoutFeedback` works by cloning its child and applying responder props to it. It is therefore required that any intermediary components pass through those props to the underlying React Native component.
+
+## Usage Pattern
+
+```tsx
+function MyComponent(props: MyComponentProps) {
+  return (
+    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
+      <Text>My Component</Text>
+    </View>
+  );
+}
+
+<TouchableWithoutFeedback onPress={() => alert('Pressed!')}>
+  <MyComponent />
+</TouchableWithoutFeedback>;
+```
+
+## Example
+
+```SnackPlayer name=TouchableWithoutFeedback
+import {useState} from 'react';
+import {StyleSheet, TouchableWithoutFeedback, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const TouchableWithoutFeedbackExample = () => {
+  const [count, setCount] = useState(0);
+
+  const onPress = () => {
+    setCount(count + 1);
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.countContainer}>
+          <Text style={styles.countText}>Count: {count}</Text>
+        </View>
+        <TouchableWithoutFeedback onPress={onPress}>
+          <View style={styles.button}>
+            <Text>Touch Here</Text>
+          </View>
+        </TouchableWithoutFeedback>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#DDDDDD',
+    padding: 10,
+  },
+  countContainer: {
+    alignItems: 'center',
+    padding: 10,
+  },
+  countText: {
+    color: '#FF00FF',
+  },
+});
+
+export default TouchableWithoutFeedbackExample;
+```
+
+---
+
+# Reference
+
+## Props
+
+### `accessibilityIgnoresInvertColors` <div className="label ios">iOS</div>
+
+A value indicating this view should or should not be inverted when color inversion is turned on. A value of `true` will tell the view to not be inverted even if color inversion is turned on.
+
+See the [Accessibility guide](accessibility.md#accessibilityignoresinvertcolors) for more information.
+
+| Type    |
+| ------- |
+| Boolean |
+
+---
+
+### `accessible`
+
+When `true`, indicates that the view is an accessibility element. By default, all the touchable elements are accessible.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `accessibilityLabel`
+
+Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the `Text` nodes separated by space.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityLanguage` <div className="label ios">iOS</div>
+
+A value indicating which language should be used by the screen reader when the user interacts with the element. It should follow the [BCP 47 specification](https://www.rfc-editor.org/info/bcp47).
+
+See the [iOS `accessibilityLanguage` doc](https://developer.apple.com/documentation/objectivec/nsobject/1615192-accessibilitylanguage) for more information.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityHint`
+
+An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityRole`
+
+`accessibilityRole` communicates the purpose of a component to the user of an assistive technology.
+
+`accessibilityRole` can be one of the following:
+
+- `'none'` - Used when the element has no role.
+- `'button'` - Used when the element should be treated as a button.
+- `'link'` - Used when the element should be treated as a link.
+- `'search'` - Used when the text field element should also be treated as a search field.
+- `'image'` - Used when the element should be treated as an image. Can be combined with button or link, for example.
+- `'keyboardkey'` - Used when the element acts as a keyboard key.
+- `'text'` - Used when the element should be treated as static text that cannot change.
+- `'adjustable'` - Used when an element can be "adjusted" (e.g. a slider).
+- `'imagebutton'` - Used when the element should be treated as a button and is also an image.
+- `'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.
+- `'alert'` - Used when an element contains important text to be presented to the user.
+- `'checkbox'` - Used when an element represents a checkbox which can be checked, unchecked, or have mixed checked state.
+- `'combobox'` - Used when an element represents a combo box, which allows the user to select among several choices.
+- `'menu'` - Used when the component is a menu of choices.
+- `'menubar'` - Used when a component is a container of multiple menus.
+- `'menuitem'` - Used to represent an item within a menu.
+- `'progressbar'` - Used to represent a component which indicates progress of a task.
+- `'radio'` - Used to represent a radio button.
+- `'radiogroup'` - Used to represent a group of radio buttons.
+- `'scrollbar'` - Used to represent a scroll bar.
+- `'spinbutton'` - Used to represent a button which opens a list of choices.
+- `'switch'` - Used to represent a switch which can be turned on and off.
+- `'tab'` - Used to represent a tab.
+- `'tablist'` - Used to represent a list of tabs.
+- `'timer'` - Used to represent a timer.
+- `'toolbar'` - Used to represent a tool bar (a container of action buttons or components).
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityState`
+
+Describes the current state of a component to the user of an assistive technology.
+
+See the [Accessibility guide](accessibility.md#accessibilitystate-ios-android) for more information.
+
+| Type                                                                                             |
+| ------------------------------------------------------------------------------------------------ |
+| object: `{disabled: bool, selected: bool, checked: bool or 'mixed', busy: bool, expanded: bool}` |
+
+---
+
+### `accessibilityActions`
+
+Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The `accessibilityActions` property should contain a list of action objects. Each action object should contain the field name and label.
+
+See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
+
+| Type  |
+| ----- |
+| array |
+
+---
+
+### `aria-busy`
+
+Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-checked`
+
+Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
+
+| Type             | Default |
+| ---------------- | ------- |
+| boolean, 'mixed' | false   |
+
+---
+
+### `aria-disabled`
+
+Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-expanded`
+
+Indicates whether an expandable element is currently expanded or collapsed.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-hidden`
+
+Indicates whether the element is hidden from assistive technologies.
+
+For example, in a window that contains sibling views `A` and `B`, setting `aria-hidden` to `true` on view `B` causes VoiceOver to ignore the `B` element and its children.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-label`
+
+Defines a string value that labels an interactive element.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `aria-live` <div className="label android">Android</div>
+
+Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
+
+- **off** Accessibility services should not announce changes to this view.
+- **polite** Accessibility services should announce changes to this view.
+- **assertive** Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
+
+| Type                                     | Default |
+| ---------------------------------------- | ------- |
+| enum(`'assertive'`, `'off'`, `'polite'`) | `'off'` |
+
+---
+
+### `aria-modal` <div className="label ios">iOS</div>
+
+Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. Has precedence over the [`accessibilityViewIsModal`](#accessibilityviewismodal-ios) prop.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-selected`
+
+Indicates whether a selectable element is currently selected or not.
+
+| Type    |
+| ------- |
+| boolean |
+
+### `onAccessibilityAction`
+
+Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.
+
+See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `accessibilityValue`
+
+Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
+
+See the [Accessibility guide](accessibility.md#accessibilityvalue-ios-android) for more information.
+
+| Type                                                            |
+| --------------------------------------------------------------- |
+| object: `{min: number, max: number, now: number, text: string}` |
+
+---
+
+### `aria-valuemax`
+
+Represents the maximum value for range-based components, such as sliders and progress bars. Has precedence over the `max` value in the `accessibilityValue` prop.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `aria-valuemin`
+
+Represents the minimum value for range-based components, such as sliders and progress bars. Has precedence over the `min` value in the `accessibilityValue` prop.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `aria-valuenow`
+
+Represents the current value for range-based components, such as sliders and progress bars. Has precedence over the `now` value in the `accessibilityValue` prop.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `aria-valuetext`
+
+Represents the textual description of the component. Has precedence over the `text` value in the `accessibilityValue` prop.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `delayLongPress`
+
+Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `delayPressIn`
+
+Duration (in milliseconds), from the start of the touch, before `onPressIn` is called.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `delayPressOut`
+
+Duration (in milliseconds), from the release of the touch, before `onPressOut` is called.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `disabled`
+
+If true, disable all interactions for this component.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `hitSlop`
+
+This defines how far your touch can start away from the button. This is added to `pressRetentionOffset` when moving off of the button.
+
+:::note
+The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
+:::
+
+| Type                   |
+| ---------------------- |
+| [Rect](rect) or number |
+
+### `id`
+
+Used to locate this view from native code. Has precedence over `nativeID` prop.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `onBlur`
+
+Invoked when the item loses focus.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
+
+---
+
+### `onFocus`
+
+Invoked when the item receives focus.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
+
+---
+
+### `onLayout`
+
+Invoked on mount and on layout changes.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
+
+---
+
+### `onLongPress`
+
+Called if the time after `onPressIn` lasts longer than 370 milliseconds. This time period can be customized with [`delayLongPress`](#delaylongpress).
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onPress`
+
+Called when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock). The first function argument is an event in form of [PressEvent](pressevent).
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onPressIn`
+
+Called as soon as the touchable element is pressed and invoked even before onPress. This can be useful when making network requests. The first function argument is an event in form of [PressEvent](pressevent).
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onPressOut`
+
+Called as soon as the touch is released even before onPress. The first function argument is an event in form of [PressEvent](pressevent).
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `pressRetentionOffset`
+
+When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations.
+
+| Type                   |
+| ---------------------- |
+| [Rect](rect) or number |
+
+---
+
+### `nativeID`
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `testID`
+
+Used to locate this view in end-to-end tests.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `touchSoundDisabled` <div className="label android">Android</div>
+
+If true, doesn't play a system sound on touch.
+
+| Type    |
+| ------- |
+| Boolean |
diff --git a/website/versioned_docs/version-0.85/transforms.md b/website/versioned_docs/version-0.85/transforms.md
index 364ba3a6873..003585bac39 100644
--- a/website/versioned_docs/version-0.85/transforms.md
+++ b/website/versioned_docs/version-0.85/transforms.md
@@ -1,399 +1,398 @@
----
-id: transforms
-title: Transforms
----
-
-Transforms are style properties that will help you modify the appearance and position of your components using 2D or 3D transformations. However, once you apply transforms, the layouts remain the same around the transformed component hence it might overlap with the nearby components. You can apply margin to the transformed component, the nearby components or padding to the container to prevent such overlaps.
-
-## Example
-
-```SnackPlayer name=Transforms%20Example
-import React from 'react';
-import {ScrollView, StyleSheet, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => (
-  <SafeAreaProvider>
-    <SafeAreaView style={styles.container}>
-      <ScrollView contentContainerStyle={styles.scrollContentContainer}>
-        <View style={styles.box}>
-          <Text style={styles.text}>Original Object</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{scale: 2}],
-            },
-          ]}>
-          <Text style={styles.text}>Scale by 2</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{scaleX: 2}],
-            },
-          ]}>
-          <Text style={styles.text}>ScaleX by 2</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{scaleY: 2}],
-            },
-          ]}>
-          <Text style={styles.text}>ScaleY by 2</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{rotate: '45deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>Rotate by 45 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{rotateX: '45deg'}, {rotateZ: '45deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>Rotate X&Z by 45 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{rotateY: '45deg'}, {rotateZ: '45deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>Rotate Y&Z by 45 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{skewX: '45deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>SkewX by 45 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{skewY: '45deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>SkewY by 45 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{skewX: '30deg'}, {skewY: '30deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>Skew X&Y by 30 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{translateX: -50}],
-            },
-          ]}>
-          <Text style={styles.text}>TranslateX by -50 </Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{translateY: 50}],
-            },
-          ]}>
-          <Text style={styles.text}>TranslateY by 50 </Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [
-                {
-                  matrix: [1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
-                },
-              ],
-            },
-          ]}>
-          <Text style={styles.text}>Matrix Transform</Text>
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  scrollContentContainer: {
-    alignItems: 'center',
-    paddingBottom: 60,
-  },
-  box: {
-    height: 100,
-    width: 100,
-    borderRadius: 5,
-    marginVertical: 40,
-    backgroundColor: '#61dafb',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  text: {
-    fontSize: 14,
-    fontWeight: 'bold',
-    margin: 8,
-    color: '#000',
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Transform
-
-`transform` accepts an array of transformation objects or space-separated string values. Each object specifies the property that will be transformed as the key, and the value to use in the transformation. Objects should not be combined. Use a single key/value pair per object.
-
-The rotate transformations require a string so that the transform may be expressed in degrees (deg) or radians (rad). For example:
-
-```js
-{
-  transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}],
-}
-```
-
-The same could also be achieved using a space-separated string:
-
-```js
-{
-  transform: 'rotateX(45deg) rotateZ(0.785398rad)',
-}
-```
-
-The skew transformations require a string so that the transform may be expressed in degrees (deg). For example:
-
-```js
-{
-  transform: [{skewX: '45deg'}],
-}
-```
-
-### Matrix Transform
-
-The `matrix` transform accepts a 4x4 transformation matrix as an array of 16 numbers. This allows you to apply complex transformations that combine translation, rotation, scaling, and skewing in a single operation.
-
-The matrix is specified in column-major order:
-
-```js
-{
-  transform: [
-    {
-      matrix: [
-        scaleX,
-        skewY,
-        0,
-        0,
-        skewX,
-        scaleY,
-        0,
-        0,
-        0,
-        0,
-        1,
-        0,
-        translateX,
-        translateY,
-        0,
-        1,
-      ],
-    },
-  ];
-}
-```
-
-For example, to apply a combination of scale and skew:
-
-```js
-{
-  transform: [
-    {
-      matrix: [
-        1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
-      ],
-    },
-  ];
-}
-```
-
-:::note
-Matrix transforms are useful when you need to apply pre-calculated transformation matrices, such as those from animation libraries or when building UI editor applications. For basic transformations, it's recommended to use the individual transform properties (scale, rotate, translate, etc.) as they are more readable.
-:::
-
-| Type                                                                                                                                                                                                                                                                                                          | Required |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
-| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number}`, `{translateY: number}`, `{skewX: string}`, `{skewY: string}` or string | No       |
-
----
-
-### 🗑️ `decomposedMatrix`, `rotation`, `scaleX`, `scaleY`, `transformMatrix`, `translateX`, `translateY`
-
-:::warning[Deprecated]
-Use the [`transform`](transforms#transform) prop instead.
-:::
-
-## Transform Origin
-
-The `transformOrigin` property sets the origin for a view's transformations. The transform origin is the point around which a transformation is applied. By default, the origin of a transform is `center`.
-
-# Example
-
-```SnackPlayer name=TransformOrigin%20Example
-import React, {useEffect, useRef} from 'react';
-import {Animated, View, StyleSheet, Easing} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const rotateAnim = useRef(new Animated.Value(0)).current;
-
-  useEffect(() => {
-    Animated.loop(
-      Animated.timing(rotateAnim, {
-        toValue: 1,
-        duration: 5000,
-        easing: Easing.linear,
-        useNativeDriver: true,
-      }),
-    ).start();
-  }, [rotateAnim]);
-
-  const spin = rotateAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '360deg'],
-  });
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.transformOriginWrapper}>
-          <Animated.View
-            style={[
-              styles.transformOriginView,
-              {
-                transform: [{rotate: spin}],
-              },
-            ]}
-          />
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  transformOriginWrapper: {
-    borderWidth: 1,
-    borderColor: 'rgba(0, 0, 0, 0.5)',
-  },
-  transformOriginView: {
-    backgroundColor: 'pink',
-    width: 100,
-    height: 100,
-    transformOrigin: 'top',
-  },
-});
-
-export default App;
-```
-
-### Values
-
-Transform origin supports `px`, `percentage` and keywords `top`, `left`, `right`, `bottom`, `center` values.
-
-The `transformOrigin` property may be specified using one, two, or three values, where each value represents an offset.
-
-#### One-value syntax:
-
-- The value must be a `px`, a `percentage`, or one of the keywords `left`, `center`, `right`, `top`, and `bottom`.
-
-```js
-{
-  transformOrigin: '20px',
-  transformOrigin: 'bottom',
-}
-```
-
-#### Two-value syntax:
-
-- First value (x-offset) must be a `px`, a `percentage`, or one of the keywords `left`, `center`, and `right`.
-- The second value (y-offset) must be a `px`, a `percentage`, or one of the keywords `top`, `center`, and `bottom`.
-
-```js
-{
-  transformOrigin: '10px 2px',
-  transformOrigin: 'left top',
-  transformOrigin: 'top right',
-}
-```
-
-#### Three-value syntax:
-
-- The first two values are the same as for the two-value syntax.
-- The third value (z-offset) must be a `px`. It always represents the Z offset.
-
-```js
-{
-  transformOrigin: '2px 30% 10px',
-  transformOrigin: 'right bottom 20px',
-}
-```
-
-#### Array syntax
-
-`transformOrigin` also supports an array syntax. It makes it convenient to use it with Animated APIs. It also avoids string parsing, so should be more efficient.
-
-```js
-{
-  // Using numeric values
-  transformOrigin: [10, 30, 40],
-  // Mixing numeric and percentage values
-  transformOrigin: [10, '20%', 0],
-}
-```
-
-You may refer to MDN's guide on [Transform origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin) for additional information.
+---
+id: transforms
+title: Transforms
+---
+
+Transforms are style properties that will help you modify the appearance and position of your components using 2D or 3D transformations. However, once you apply transforms, the layouts remain the same around the transformed component hence it might overlap with the nearby components. You can apply margin to the transformed component, the nearby components or padding to the container to prevent such overlaps.
+
+## Example
+
+```SnackPlayer name=Transforms%20Example
+import {ScrollView, StyleSheet, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => (
+  <SafeAreaProvider>
+    <SafeAreaView style={styles.container}>
+      <ScrollView contentContainerStyle={styles.scrollContentContainer}>
+        <View style={styles.box}>
+          <Text style={styles.text}>Original Object</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{scale: 2}],
+            },
+          ]}>
+          <Text style={styles.text}>Scale by 2</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{scaleX: 2}],
+            },
+          ]}>
+          <Text style={styles.text}>ScaleX by 2</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{scaleY: 2}],
+            },
+          ]}>
+          <Text style={styles.text}>ScaleY by 2</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{rotate: '45deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>Rotate by 45 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{rotateX: '45deg'}, {rotateZ: '45deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>Rotate X&Z by 45 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{rotateY: '45deg'}, {rotateZ: '45deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>Rotate Y&Z by 45 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{skewX: '45deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>SkewX by 45 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{skewY: '45deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>SkewY by 45 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{skewX: '30deg'}, {skewY: '30deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>Skew X&Y by 30 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{translateX: -50}],
+            },
+          ]}>
+          <Text style={styles.text}>TranslateX by -50 </Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{translateY: 50}],
+            },
+          ]}>
+          <Text style={styles.text}>TranslateY by 50 </Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [
+                {
+                  matrix: [1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
+                },
+              ],
+            },
+          ]}>
+          <Text style={styles.text}>Matrix Transform</Text>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollContentContainer: {
+    alignItems: 'center',
+    paddingBottom: 60,
+  },
+  box: {
+    height: 100,
+    width: 100,
+    borderRadius: 5,
+    marginVertical: 40,
+    backgroundColor: '#61dafb',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    margin: 8,
+    color: '#000',
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Transform
+
+`transform` accepts an array of transformation objects or space-separated string values. Each object specifies the property that will be transformed as the key, and the value to use in the transformation. Objects should not be combined. Use a single key/value pair per object.
+
+The rotate transformations require a string so that the transform may be expressed in degrees (deg) or radians (rad). For example:
+
+```js
+{
+  transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}],
+}
+```
+
+The same could also be achieved using a space-separated string:
+
+```js
+{
+  transform: 'rotateX(45deg) rotateZ(0.785398rad)',
+}
+```
+
+The skew transformations require a string so that the transform may be expressed in degrees (deg). For example:
+
+```js
+{
+  transform: [{skewX: '45deg'}],
+}
+```
+
+### Matrix Transform
+
+The `matrix` transform accepts a 4x4 transformation matrix as an array of 16 numbers. This allows you to apply complex transformations that combine translation, rotation, scaling, and skewing in a single operation.
+
+The matrix is specified in column-major order:
+
+```js
+{
+  transform: [
+    {
+      matrix: [
+        scaleX,
+        skewY,
+        0,
+        0,
+        skewX,
+        scaleY,
+        0,
+        0,
+        0,
+        0,
+        1,
+        0,
+        translateX,
+        translateY,
+        0,
+        1,
+      ],
+    },
+  ];
+}
+```
+
+For example, to apply a combination of scale and skew:
+
+```js
+{
+  transform: [
+    {
+      matrix: [
+        1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
+      ],
+    },
+  ];
+}
+```
+
+:::note
+Matrix transforms are useful when you need to apply pre-calculated transformation matrices, such as those from animation libraries or when building UI editor applications. For basic transformations, it's recommended to use the individual transform properties (scale, rotate, translate, etc.) as they are more readable.
+:::
+
+| Type                                                                                                                                                                                                                                                                                                          | Required |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
+| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number}`, `{translateY: number}`, `{skewX: string}`, `{skewY: string}` or string | No       |
+
+---
+
+### 🗑️ `decomposedMatrix`, `rotation`, `scaleX`, `scaleY`, `transformMatrix`, `translateX`, `translateY`
+
+:::warning[Deprecated]
+Use the [`transform`](transforms#transform) prop instead.
+:::
+
+## Transform Origin
+
+The `transformOrigin` property sets the origin for a view's transformations. The transform origin is the point around which a transformation is applied. By default, the origin of a transform is `center`.
+
+# Example
+
+```SnackPlayer name=TransformOrigin%20Example
+import {useEffect, useRef} from 'react';
+import {Animated, View, StyleSheet, Easing} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const rotateAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.timing(rotateAnim, {
+        toValue: 1,
+        duration: 5000,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      }),
+    ).start();
+  }, [rotateAnim]);
+
+  const spin = rotateAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.transformOriginWrapper}>
+          <Animated.View
+            style={[
+              styles.transformOriginView,
+              {
+                transform: [{rotate: spin}],
+              },
+            ]}
+          />
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  transformOriginWrapper: {
+    borderWidth: 1,
+    borderColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  transformOriginView: {
+    backgroundColor: 'pink',
+    width: 100,
+    height: 100,
+    transformOrigin: 'top',
+  },
+});
+
+export default App;
+```
+
+### Values
+
+Transform origin supports `px`, `percentage` and keywords `top`, `left`, `right`, `bottom`, `center` values.
+
+The `transformOrigin` property may be specified using one, two, or three values, where each value represents an offset.
+
+#### One-value syntax:
+
+- The value must be a `px`, a `percentage`, or one of the keywords `left`, `center`, `right`, `top`, and `bottom`.
+
+```js
+{
+  transformOrigin: '20px',
+  transformOrigin: 'bottom',
+}
+```
+
+#### Two-value syntax:
+
+- First value (x-offset) must be a `px`, a `percentage`, or one of the keywords `left`, `center`, and `right`.
+- The second value (y-offset) must be a `px`, a `percentage`, or one of the keywords `top`, `center`, and `bottom`.
+
+```js
+{
+  transformOrigin: '10px 2px',
+  transformOrigin: 'left top',
+  transformOrigin: 'top right',
+}
+```
+
+#### Three-value syntax:
+
+- The first two values are the same as for the two-value syntax.
+- The third value (z-offset) must be a `px`. It always represents the Z offset.
+
+```js
+{
+  transformOrigin: '2px 30% 10px',
+  transformOrigin: 'right bottom 20px',
+}
+```
+
+#### Array syntax
+
+`transformOrigin` also supports an array syntax. It makes it convenient to use it with Animated APIs. It also avoids string parsing, so should be more efficient.
+
+```js
+{
+  // Using numeric values
+  transformOrigin: [10, 30, 40],
+  // Mixing numeric and percentage values
+  transformOrigin: [10, '20%', 0],
+}
+```
+
+You may refer to MDN's guide on [Transform origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin) for additional information.
diff --git a/website/versioned_docs/version-0.85/troubleshooting.md b/website/versioned_docs/version-0.85/troubleshooting.md
index 811302be504..540f38b984f 100644
--- a/website/versioned_docs/version-0.85/troubleshooting.md
+++ b/website/versioned_docs/version-0.85/troubleshooting.md
@@ -91,7 +91,6 @@ To revert the `User Search Header Paths` and `Header Search Paths` build setting
 React Native implements a polyfill for WebSockets. These [polyfills](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Core/InitializeCore.js) are initialized as part of the react-native module that you include in your application through `import React from 'react'`. If you load another module that requires WebSockets, such as [Firebase](https://github.com/facebook/react-native/issues/3645), be sure to load/require it after react-native:
 
 ```
-import React from 'react';
 import Firebase from 'firebase';
 ```
 
diff --git a/website/versioned_docs/version-0.85/turbo-native-modules.md b/website/versioned_docs/version-0.85/turbo-native-modules.md
index eeef8624578..1d41bd06ce9 100644
--- a/website/versioned_docs/version-0.85/turbo-native-modules.md
+++ b/website/versioned_docs/version-0.85/turbo-native-modules.md
@@ -1,260 +1,260 @@
----
-id: turbo-native-modules-introduction
-title: 'Native Modules: Introduction'
----
-
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import constants from '@site/core/TabsConstants';
-import CodeBlock from '@theme/CodeBlock';
-import {getCurrentVersion} from '@site/src/getCurrentVersion';
-import {TurboNativeModulesAndroid, TurboNativeModulesIOS} from './\_turbo-native-modules-components';
-
-# Native Modules
-
-Your React Native application code may need to interact with native platform APIs that aren't provided by React Native or an existing library. You can write the integration code yourself using a **Turbo Native Module**. This guide will show you how to write one.
-
-The basic steps are:
-
-1. **define a typed JavaScript specification** using one of the most popular JavaScript type annotation languages: Flow or TypeScript;
-2. **configure your dependency management system to run Codegen**, which converts the specification into native language interfaces;
-3. **write your application code** using your specification; and
-4. **write your native platform code using the generated interfaces** to write and hook your native code into the React Native runtime environment.
-
-Lets work through each of these steps by building an example Turbo Native Module. The rest of this guide assume that you have created your application running the command:
-
-<CodeBlock language="bash" title="shell">
-{`npx @react-native-community/cli@latest init TurboModuleExample --version ${getCurrentVersion()}`}
-</CodeBlock>
-
-## Native Persistent Storage
-
-This guide will show you how to write an implementation of the [Web Storage API](https://html.spec.whatwg.org/multipage/webstorage.html#dom-localstorage-dev): `localStorage`. The API is relatable to a React developer who might be writing application code on your project.
-
-To make this work on mobile, we need to use Android and iOS APIs:
-
-- Android: [SharedPreferences](https://developer.android.com/reference/android/content/SharedPreferences), and
-- iOS: [NSUserDefaults](https://developer.apple.com/documentation/foundation/nsuserdefaults).
-
-### 1. Declare Typed Specification
-
-React Native provides a tool called [Codegen](/docs/the-new-architecture/what-is-codegen), which takes a specification written in TypeScript or Flow and generates platform specific code for Android and iOS. The specification declares the methods and data types that will pass back and forth between your native code and the React Native JavaScript runtime. A Turbo Native Module is both your specification, the native code you write, and the Codegen interfaces generated from your specification.
-
-To create a specs file:
-
-1. Inside the root folder of your app, create a new folder called `specs`.
-2. Create a new file called `NativeLocalStorage.ts`.
-
-:::info
-You can see all of the types you can use in your specification and the native types that are generated in the [Appendix](/docs/appendix) documentation.
-:::
-
-:::info
-If you want to change the name of your module and the related specs file, make sure to always use 'Native' as prefix (e.g. `NativeStorage` or `NativeUsersDefault`).
-:::
-
-Here is an implementation of the `localStorage` specification:
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultJavaScriptSpecLanguage} values={constants.javaScriptSpecLanguages}>
-<TabItem value="typescript">
-
-```typescript title="specs/NativeLocalStorage.ts"
-import type {TurboModule} from 'react-native';
-import {TurboModuleRegistry} from 'react-native';
-
-export interface Spec extends TurboModule {
-  setItem(value: string, key: string): void;
-  getItem(key: string): string | null;
-  removeItem(key: string): void;
-  clear(): void;
-}
-
-export default TurboModuleRegistry.getEnforcing<Spec>(
-  'NativeLocalStorage',
-);
-```
-
-</TabItem>
-<TabItem value="flow">
-
-```flow title="NativeLocalStorage.js"
-import type {TurboModule} from 'react-native';
-import {TurboModule, TurboModuleRegistry} from 'react-native';
-
-export interface Spec extends TurboModule {
-  setItem(value: string, key: string): void;
-  getItem(key: string): ?string;
-  removeItem(key: string): void;
-  clear(): void;
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 2. Configure Codegen to run
-
-The specification is used by the React Native Codegen tools to generate platform specific interfaces and boilerplate for us. To do this, Codegen needs to know where to find our specification and what to do with it. Update your `package.json` to include:
-
-```json title="package.json"
-     "start": "react-native start",
-     "test": "jest"
-   },
-   // highlight-add-start
-   "codegenConfig": {
-     "name": "NativeLocalStorageSpec",
-     "type": "modules",
-     "jsSrcsDir": "specs",
-     "android": {
-       "javaPackageName": "com.nativelocalstorage"
-     }
-   },
-   // highlight-add-end
-   "dependencies": {
-```
-
-With everything wired up for Codegen, we need to prepare our native code to hook into our generated code.
-
-<Tabs groupId="platforms" queryString defaultValue={constants.defaultPlatform}>
-<TabItem value="android" label="Android">
-Codegen is executed through the `generateCodegenArtifactsFromSchema` Gradle task:
-
-```bash
-cd android
-./gradlew generateCodegenArtifactsFromSchema
-
-BUILD SUCCESSFUL in 837ms
-14 actionable tasks: 3 executed, 11 up-to-date
-```
-
-This is automatically run when you build your Android application.
-</TabItem>
-<TabItem value="ios" label="iOS">
-Codegen is run as part of the script phases that's automatically added to the project generated by CocoaPods.
-
-```bash
-cd ios
-bundle install
-bundle exec pod install
-```
-
-The output will look like this:
-
-```shell
-...
-Framework build type is static library
-[Codegen] Adding script_phases to ReactCodegen.
-[Codegen] Generating ./build/generated/ios/ReactCodegen.podspec.json
-[Codegen] Analyzing /Users/me/src/TurboModuleExample/package.json
-[Codegen] Searching for codegen-enabled libraries in the app.
-[Codegen] Found TurboModuleExample
-[Codegen] Searching for codegen-enabled libraries in the project dependencies.
-[Codegen] Found react-native
-...
-```
-
-</TabItem>
-</Tabs>
-
-### 3. Write Application Code using the Turbo Native Module
-
-Using `NativeLocalStorage`, here’s a modified `App.tsx` that includes some text we want persisted, an input field and some buttons to update this value.
-
-The `TurboModuleRegistry` supports 2 modes of retrieving a Turbo Native Module:
-
-- `get<T>(name: string): T | null` which will return `null` if the Turbo Native Module is unavailable.
-- `getEnforcing<T>(name: string): T` which will throw an exception if the Turbo Native Module is unavailable. This assumes the module is always available.
-
-```tsx title="App.tsx"
-import React from 'react';
-import {
-  SafeAreaView,
-  StyleSheet,
-  Text,
-  TextInput,
-  Button,
-} from 'react-native';
-
-import NativeLocalStorage from './specs/NativeLocalStorage';
-
-const EMPTY = '<empty>';
-
-function App(): React.JSX.Element {
-  const [value, setValue] = React.useState<string | null>(null);
-
-  const [editingValue, setEditingValue] = React.useState<
-    string | null
-  >(null);
-
-  React.useEffect(() => {
-    const storedValue = NativeLocalStorage?.getItem('myKey');
-    setValue(storedValue ?? '');
-  }, []);
-
-  function saveValue() {
-    NativeLocalStorage?.setItem(editingValue ?? EMPTY, 'myKey');
-    setValue(editingValue);
-  }
-
-  function clearAll() {
-    NativeLocalStorage?.clear();
-    setValue('');
-  }
-
-  function deleteValue() {
-    NativeLocalStorage?.removeItem('myKey');
-    setValue('');
-  }
-
-  return (
-    <SafeAreaView style={{flex: 1}}>
-      <Text style={styles.text}>
-        Current stored value is: {value ?? 'No Value'}
-      </Text>
-      <TextInput
-        placeholder="Enter the text you want to store"
-        style={styles.textInput}
-        onChangeText={setEditingValue}
-      />
-      <Button title="Save" onPress={saveValue} />
-      <Button title="Delete" onPress={deleteValue} />
-      <Button title="Clear" onPress={clearAll} />
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  text: {
-    margin: 10,
-    fontSize: 20,
-  },
-  textInput: {
-    margin: 10,
-    height: 40,
-    borderColor: 'black',
-    borderWidth: 1,
-    paddingLeft: 5,
-    paddingRight: 5,
-    borderRadius: 5,
-  },
-});
-
-export default App;
-```
-
-### 4. Write your Native Platform code
-
-With everything prepared, we're going to start writing native platform code. We do this in 2 parts:
-
-:::note
-This guide shows you how to create a Turbo Native Module that only works with the New Architecture. If you need to support both the New Architecture and the Legacy Architecture, please refer to our [backwards compatibility guide](https://github.com/reactwg/react-native-new-architecture/blob/main/docs/backwards-compat.md).
-:::
-
-<Tabs groupId="platforms" queryString defaultValue={constants.defaultPlatform}>
-    <TabItem value="android" label="Android">
-        <TurboNativeModulesAndroid />
-    </TabItem>
-    <TabItem value="ios" label="iOS">
-        <TurboNativeModulesIOS/>
-    </TabItem>
-</Tabs>
+---
+id: turbo-native-modules-introduction
+title: 'Native Modules: Introduction'
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import constants from '@site/core/TabsConstants';
+import CodeBlock from '@theme/CodeBlock';
+import {getCurrentVersion} from '@site/src/getCurrentVersion';
+import {TurboNativeModulesAndroid, TurboNativeModulesIOS} from './\_turbo-native-modules-components';
+
+# Native Modules
+
+Your React Native application code may need to interact with native platform APIs that aren't provided by React Native or an existing library. You can write the integration code yourself using a **Turbo Native Module**. This guide will show you how to write one.
+
+The basic steps are:
+
+1. **define a typed JavaScript specification** using one of the most popular JavaScript type annotation languages: Flow or TypeScript;
+2. **configure your dependency management system to run Codegen**, which converts the specification into native language interfaces;
+3. **write your application code** using your specification; and
+4. **write your native platform code using the generated interfaces** to write and hook your native code into the React Native runtime environment.
+
+Lets work through each of these steps by building an example Turbo Native Module. The rest of this guide assume that you have created your application running the command:
+
+<CodeBlock language="bash" title="shell">
+{`npx @react-native-community/cli@latest init TurboModuleExample --version ${getCurrentVersion()}`}
+</CodeBlock>
+
+## Native Persistent Storage
+
+This guide will show you how to write an implementation of the [Web Storage API](https://html.spec.whatwg.org/multipage/webstorage.html#dom-localstorage-dev): `localStorage`. The API is relatable to a React developer who might be writing application code on your project.
+
+To make this work on mobile, we need to use Android and iOS APIs:
+
+- Android: [SharedPreferences](https://developer.android.com/reference/android/content/SharedPreferences), and
+- iOS: [NSUserDefaults](https://developer.apple.com/documentation/foundation/nsuserdefaults).
+
+### 1. Declare Typed Specification
+
+React Native provides a tool called [Codegen](/docs/the-new-architecture/what-is-codegen), which takes a specification written in TypeScript or Flow and generates platform specific code for Android and iOS. The specification declares the methods and data types that will pass back and forth between your native code and the React Native JavaScript runtime. A Turbo Native Module is both your specification, the native code you write, and the Codegen interfaces generated from your specification.
+
+To create a specs file:
+
+1. Inside the root folder of your app, create a new folder called `specs`.
+2. Create a new file called `NativeLocalStorage.ts`.
+
+:::info
+You can see all of the types you can use in your specification and the native types that are generated in the [Appendix](/docs/appendix) documentation.
+:::
+
+:::info
+If you want to change the name of your module and the related specs file, make sure to always use 'Native' as prefix (e.g. `NativeStorage` or `NativeUsersDefault`).
+:::
+
+Here is an implementation of the `localStorage` specification:
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultJavaScriptSpecLanguage} values={constants.javaScriptSpecLanguages}>
+<TabItem value="typescript">
+
+```typescript title="specs/NativeLocalStorage.ts"
+import type {TurboModule} from 'react-native';
+import {TurboModuleRegistry} from 'react-native';
+
+export interface Spec extends TurboModule {
+  setItem(value: string, key: string): void;
+  getItem(key: string): string | null;
+  removeItem(key: string): void;
+  clear(): void;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>(
+  'NativeLocalStorage',
+);
+```
+
+</TabItem>
+<TabItem value="flow">
+
+```flow title="NativeLocalStorage.js"
+import type {TurboModule} from 'react-native';
+import {TurboModule, TurboModuleRegistry} from 'react-native';
+
+export interface Spec extends TurboModule {
+  setItem(value: string, key: string): void;
+  getItem(key: string): ?string;
+  removeItem(key: string): void;
+  clear(): void;
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 2. Configure Codegen to run
+
+The specification is used by the React Native Codegen tools to generate platform specific interfaces and boilerplate for us. To do this, Codegen needs to know where to find our specification and what to do with it. Update your `package.json` to include:
+
+```json title="package.json"
+     "start": "react-native start",
+     "test": "jest"
+   },
+   // highlight-add-start
+   "codegenConfig": {
+     "name": "NativeLocalStorageSpec",
+     "type": "modules",
+     "jsSrcsDir": "specs",
+     "android": {
+       "javaPackageName": "com.nativelocalstorage"
+     }
+   },
+   // highlight-add-end
+   "dependencies": {
+```
+
+With everything wired up for Codegen, we need to prepare our native code to hook into our generated code.
+
+<Tabs groupId="platforms" queryString defaultValue={constants.defaultPlatform}>
+<TabItem value="android" label="Android">
+Codegen is executed through the `generateCodegenArtifactsFromSchema` Gradle task:
+
+```bash
+cd android
+./gradlew generateCodegenArtifactsFromSchema
+
+BUILD SUCCESSFUL in 837ms
+14 actionable tasks: 3 executed, 11 up-to-date
+```
+
+This is automatically run when you build your Android application.
+</TabItem>
+<TabItem value="ios" label="iOS">
+Codegen is run as part of the script phases that's automatically added to the project generated by CocoaPods.
+
+```bash
+cd ios
+bundle install
+bundle exec pod install
+```
+
+The output will look like this:
+
+```shell
+...
+Framework build type is static library
+[Codegen] Adding script_phases to ReactCodegen.
+[Codegen] Generating ./build/generated/ios/ReactCodegen.podspec.json
+[Codegen] Analyzing /Users/me/src/TurboModuleExample/package.json
+[Codegen] Searching for codegen-enabled libraries in the app.
+[Codegen] Found TurboModuleExample
+[Codegen] Searching for codegen-enabled libraries in the project dependencies.
+[Codegen] Found react-native
+...
+```
+
+</TabItem>
+</Tabs>
+
+### 3. Write Application Code using the Turbo Native Module
+
+Using `NativeLocalStorage`, here’s a modified `App.tsx` that includes some text we want persisted, an input field and some buttons to update this value.
+
+The `TurboModuleRegistry` supports 2 modes of retrieving a Turbo Native Module:
+
+- `get<T>(name: string): T | null` which will return `null` if the Turbo Native Module is unavailable.
+- `getEnforcing<T>(name: string): T` which will throw an exception if the Turbo Native Module is unavailable. This assumes the module is always available.
+
+```tsx title="App.tsx"
+import {useEffect, useState, type JSX} from 'react';
+import {
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  TextInput,
+  Button,
+} from 'react-native';
+
+import NativeLocalStorage from './specs/NativeLocalStorage';
+
+const EMPTY = '<empty>';
+
+function App(): JSX.Element {
+  const [value, setValue] = useState<string | null>(null);
+
+  const [editingValue, setEditingValue] = useState<string | null>(
+    null,
+  );
+
+  useEffect(() => {
+    const storedValue = NativeLocalStorage?.getItem('myKey');
+    setValue(storedValue ?? '');
+  }, []);
+
+  function saveValue() {
+    NativeLocalStorage?.setItem(editingValue ?? EMPTY, 'myKey');
+    setValue(editingValue);
+  }
+
+  function clearAll() {
+    NativeLocalStorage?.clear();
+    setValue('');
+  }
+
+  function deleteValue() {
+    NativeLocalStorage?.removeItem('myKey');
+    setValue('');
+  }
+
+  return (
+    <SafeAreaView style={{flex: 1}}>
+      <Text style={styles.text}>
+        Current stored value is: {value ?? 'No Value'}
+      </Text>
+      <TextInput
+        placeholder="Enter the text you want to store"
+        style={styles.textInput}
+        onChangeText={setEditingValue}
+      />
+      <Button title="Save" onPress={saveValue} />
+      <Button title="Delete" onPress={deleteValue} />
+      <Button title="Clear" onPress={clearAll} />
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  text: {
+    margin: 10,
+    fontSize: 20,
+  },
+  textInput: {
+    margin: 10,
+    height: 40,
+    borderColor: 'black',
+    borderWidth: 1,
+    paddingLeft: 5,
+    paddingRight: 5,
+    borderRadius: 5,
+  },
+});
+
+export default App;
+```
+
+### 4. Write your Native Platform code
+
+With everything prepared, we're going to start writing native platform code. We do this in 2 parts:
+
+:::note
+This guide shows you how to create a Turbo Native Module that only works with the New Architecture. If you need to support both the New Architecture and the Legacy Architecture, please refer to our [backwards compatibility guide](https://github.com/reactwg/react-native-new-architecture/blob/main/docs/backwards-compat.md).
+:::
+
+<Tabs groupId="platforms" queryString defaultValue={constants.defaultPlatform}>
+    <TabItem value="android" label="Android">
+        <TurboNativeModulesAndroid />
+    </TabItem>
+    <TabItem value="ios" label="iOS">
+        <TurboNativeModulesIOS/>
+    </TabItem>
+</Tabs>
diff --git a/website/versioned_docs/version-0.85/tutorial.md b/website/versioned_docs/version-0.85/tutorial.md
index d1a92919cd7..cbd5fd11bef 100644
--- a/website/versioned_docs/version-0.85/tutorial.md
+++ b/website/versioned_docs/version-0.85/tutorial.md
@@ -1,270 +1,267 @@
----
-id: tutorial
-title: Learn the Basics
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-React Native is like React, but it uses native components instead of web components as building blocks. So to understand the basic structure of a React Native app, you need to understand some of the basic React concepts, like JSX, components, `state`, and `props`. If you already know React, you still need to learn some React Native specific stuff, like the native components. This tutorial is aimed at all audiences, whether you have React experience or not.
-
-Let's do this thing.
-
-## Hello World
-
-In accordance with the ancient traditions of our people, we must first build an app that does nothing except say "Hello, world!". Here it is:
-
-```SnackPlayer name=Hello%20World
-import React from 'react';
-import {Text, View} from 'react-native';
-
-const HelloWorldApp = () => {
-  return (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}>
-      <Text>Hello, world!</Text>
-    </View>
-  );
-};
-export default HelloWorldApp;
-```
-
-If you are feeling curious, you can play around with sample code directly in the web simulators. You can also paste it into your `App.js` file to create a real app on your local machine.
-
-## What's going on here?
-
-1. First of all, we need to import `React` to be able to use `JSX`, which will then be transformed to the native components of each platform.
-2. On line 2, we import the `Text` and `View` components from `react-native`
-
-Then we define the `HelloWorldApp` function, which is a [function component](https://react.dev/reference/react/Component) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child.
-
-The `Text` component allows us to render a text, while the `View` component renders a container. This container has several styles applied, let's analyze what each one is doing.
-
-The first style that we find is `flex: 1`, the [`flex`](layout-props#flex) prop will define how your items are going to "fill" over the available space along your main axis. Since we only have one container, it will take all the available space of the parent component. In this case, it is the only component, so it will take all the available screen space.
-
-The following style is [`justifyContent`](layout-props#justifycontent): "center". This aligns children of a container in the center of the container's main axis. Finally, we have [`alignItems`](layout-props#alignitems): "center", which aligns children of a container in the center of the container's cross axis.
-
-Some of the things in here might not look like JavaScript to you. Don't panic. _This is the future_.
-
-First of all, ES2015 (also known as ES6) is a set of improvements to JavaScript that is now part of the official standard, but not yet supported by all browsers, so often it isn't used yet in web development. React Native ships with ES2015 support, so you can use this stuff without worrying about compatibility. `import`, `export`, `const` and `from` in the example above are all ES2015 features. If you aren't familiar with ES2015, you can probably pick it up by reading through sample code like this tutorial has. If you want, [this page](https://babeljs.io/learn-es2015/) has a good overview of ES2015 features.
-
-The other unusual thing in this code example is `<View><Text>Hello world!</Text></View>`. This is JSX - a syntax for embedding XML within JavaScript. Many frameworks use a specialized templating language which lets you embed code inside markup language. In React, this is reversed. JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like `<div>` or `<span>`, you use React components. In this case, `<Text>` is a [Core Component](intro-react-native-components) that displays some text and `View` is like the `<div>` or `<span>`.
-
-## Components
-
-So this code is defining `HelloWorldApp`, a new `Component`. When you're building a React Native app, you'll be making new components a lot. Anything you see on the screen is some sort of component.
-
-## Props
-
-Most components can be customized when they are created, with different parameters. These creation parameters are called props.
-
-Your own components can also use `props`. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place. Refer to `props.YOUR_PROP_NAME` in your functional components or `this.props.YOUR_PROP_NAME` in your class components. Here's an example:
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Hello%20Props&ext=js
-import React from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-
-const styles = StyleSheet.create({
-  center: {
-    alignItems: 'center',
-  },
-});
-
-const Greeting = props => {
-  return (
-    <View style={styles.center}>
-      <Text>Hello {props.name}!</Text>
-    </View>
-  );
-};
-
-const LotsOfGreetings = () => {
-  return (
-    <View style={[styles.center, {top: 50}]}>
-      <Greeting name="Rexxar" />
-      <Greeting name="Jaina" />
-      <Greeting name="Valeera" />
-    </View>
-  );
-};
-
-export default LotsOfGreetings;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Hello%20Props&ext=tsx
-import React from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-
-const styles = StyleSheet.create({
-  center: {
-    alignItems: 'center',
-  },
-});
-
-type GreetingProps = {
-  name: string;
-};
-
-const Greeting = (props: GreetingProps) => {
-  return (
-    <View style={styles.center}>
-      <Text>Hello {props.name}!</Text>
-    </View>
-  );
-};
-
-const LotsOfGreetings = () => {
-  return (
-    <View style={[styles.center, {top: 50}]}>
-      <Greeting name="Rexxar" />
-      <Greeting name="Jaina" />
-      <Greeting name="Valeera" />
-    </View>
-  );
-};
-
-export default LotsOfGreetings;
-```
-
-</TabItem>
-</Tabs>
-
-Using `name` as a prop lets us customize the `Greeting` component, so we can reuse that component for each of our greetings. This example also uses the `Greeting` component in JSX. The power to do this is what makes React so cool.
-
-The other new thing going on here is the [`View`](view.md) component. A [`View`](view.md) is useful as a container for other components, to help control style and layout.
-
-With `props` and the basic [`Text`](text.md), [`Image`](image.md), and [`View`](view.md) components, you can build a wide variety of static screens. To learn how to make your app change over time, you need to [learn about State](#state).
-
-## State
-
-Unlike props [that are read-only](https://react.dev/reference/react/Component#props) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else.
-
-#### What's the difference between state and props in React?
-
-In a React component, the props are the variables that we pass from a parent component to a child component. Similarly, the state are also variables, with the difference that they are not passed as parameters, but rather that the component initializes and manages them internally.
-
-#### Are there differences between React and React Native to handle the state?
-
-<div className="two-columns">
-
-```tsx
-// ReactJS Counter Example using Hooks!
-
-import React, {useState} from 'react';
-
-
-
-const App = () => {
-  const [count, setCount] = useState(0);
-
-  return (
-    <div className="container">
-      <p>You clicked {count} times</p>
-      <button
-        onClick={() => setCount(count + 1)}>
-        Click me!
-      </button>
-    </div>
-  );
-};
-
-
-// CSS
-.container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-```
-
-```tsx
-// React Native Counter Example using Hooks!
-
-import React, {useState} from 'react';
-import {View, Text, Button, StyleSheet} from 'react-native';
-
-const App = () => {
-  const [count, setCount] = useState(0);
-
-  return (
-    <View style={styles.container}>
-      <Text>You clicked {count} times</Text>
-      <Button
-        onPress={() => setCount(count + 1)}
-        title="Click me!"
-      />
-    </View>
-  );
-};
-
-// React Native Styles
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-```
-
-</div>
-
-As shown above, there is no difference in handling the `state` between [React](https://react.dev/learn/state-a-components-memory) and `React Native`. You can use the state of your components both in classes and in function components using [hooks](https://react.dev/reference/react/useState)!
-
-In the following example we will show the same above counter example using classes.
-
-```SnackPlayer name=Hello%20Classes
-import React, {Component} from 'react';
-import {StyleSheet, TouchableOpacity, Text, View} from 'react-native';
-
-class App extends Component {
-  state = {
-    count: 0,
-  };
-
-  onPress = () => {
-    this.setState({
-      count: this.state.count + 1,
-    });
-  };
-
-  render() {
-    return (
-      <View style={styles.container}>
-        <TouchableOpacity style={styles.button} onPress={this.onPress}>
-          <Text>Click me</Text>
-        </TouchableOpacity>
-        <View>
-          <Text>You clicked {this.state.count} times</Text>
-        </View>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  button: {
-    alignItems: 'center',
-    backgroundColor: '#DDDDDD',
-    padding: 10,
-    marginBottom: 10,
-  },
-});
-
-export default App;
-```
+---
+id: tutorial
+title: Learn the Basics
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+React Native is like React, but it uses native components instead of web components as building blocks. So to understand the basic structure of a React Native app, you need to understand some of the basic React concepts, like JSX, components, `state`, and `props`. If you already know React, you still need to learn some React Native specific stuff, like the native components. This tutorial is aimed at all audiences, whether you have React experience or not.
+
+Let's do this thing.
+
+## Hello World
+
+In accordance with the ancient traditions of our people, we must first build an app that does nothing except say "Hello, world!". Here it is:
+
+```SnackPlayer name=Hello%20World
+import {Text, View} from 'react-native';
+
+const HelloWorldApp = () => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}>
+      <Text>Hello, world!</Text>
+    </View>
+  );
+};
+export default HelloWorldApp;
+```
+
+If you are feeling curious, you can play around with sample code directly in the web simulators. You can also paste it into your `App.js` file to create a real app on your local machine.
+
+## What's going on here?
+
+1. First of all, we need to import `React` to be able to use `JSX`, which will then be transformed to the native components of each platform.
+2. On line 2, we import the `Text` and `View` components from `react-native`
+
+Then we define the `HelloWorldApp` function, which is a [function component](https://react.dev/reference/react/Component) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child.
+
+The `Text` component allows us to render a text, while the `View` component renders a container. This container has several styles applied, let's analyze what each one is doing.
+
+The first style that we find is `flex: 1`, the [`flex`](layout-props#flex) prop will define how your items are going to "fill" over the available space along your main axis. Since we only have one container, it will take all the available space of the parent component. In this case, it is the only component, so it will take all the available screen space.
+
+The following style is [`justifyContent`](layout-props#justifycontent): "center". This aligns children of a container in the center of the container's main axis. Finally, we have [`alignItems`](layout-props#alignitems): "center", which aligns children of a container in the center of the container's cross axis.
+
+Some of the things in here might not look like JavaScript to you. Don't panic. _This is the future_.
+
+First of all, ES2015 (also known as ES6) is a set of improvements to JavaScript that is now part of the official standard, but not yet supported by all browsers, so often it isn't used yet in web development. React Native ships with ES2015 support, so you can use this stuff without worrying about compatibility. `import`, `export`, `const` and `from` in the example above are all ES2015 features. If you aren't familiar with ES2015, you can probably pick it up by reading through sample code like this tutorial has. If you want, [this page](https://babeljs.io/learn-es2015/) has a good overview of ES2015 features.
+
+The other unusual thing in this code example is `<View><Text>Hello world!</Text></View>`. This is JSX - a syntax for embedding XML within JavaScript. Many frameworks use a specialized templating language which lets you embed code inside markup language. In React, this is reversed. JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like `<div>` or `<span>`, you use React components. In this case, `<Text>` is a [Core Component](intro-react-native-components) that displays some text and `View` is like the `<div>` or `<span>`.
+
+## Components
+
+So this code is defining `HelloWorldApp`, a new `Component`. When you're building a React Native app, you'll be making new components a lot. Anything you see on the screen is some sort of component.
+
+## Props
+
+Most components can be customized when they are created, with different parameters. These creation parameters are called props.
+
+Your own components can also use `props`. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place. Refer to `props.YOUR_PROP_NAME` in your functional components or `this.props.YOUR_PROP_NAME` in your class components. Here's an example:
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Hello%20Props&ext=js
+import {Text, View, StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  center: {
+    alignItems: 'center',
+  },
+});
+
+const Greeting = props => {
+  return (
+    <View style={styles.center}>
+      <Text>Hello {props.name}!</Text>
+    </View>
+  );
+};
+
+const LotsOfGreetings = () => {
+  return (
+    <View style={[styles.center, {top: 50}]}>
+      <Greeting name="Rexxar" />
+      <Greeting name="Jaina" />
+      <Greeting name="Valeera" />
+    </View>
+  );
+};
+
+export default LotsOfGreetings;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Hello%20Props&ext=tsx
+import {Text, View, StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  center: {
+    alignItems: 'center',
+  },
+});
+
+type GreetingProps = {
+  name: string;
+};
+
+const Greeting = (props: GreetingProps) => {
+  return (
+    <View style={styles.center}>
+      <Text>Hello {props.name}!</Text>
+    </View>
+  );
+};
+
+const LotsOfGreetings = () => {
+  return (
+    <View style={[styles.center, {top: 50}]}>
+      <Greeting name="Rexxar" />
+      <Greeting name="Jaina" />
+      <Greeting name="Valeera" />
+    </View>
+  );
+};
+
+export default LotsOfGreetings;
+```
+
+</TabItem>
+</Tabs>
+
+Using `name` as a prop lets us customize the `Greeting` component, so we can reuse that component for each of our greetings. This example also uses the `Greeting` component in JSX. The power to do this is what makes React so cool.
+
+The other new thing going on here is the [`View`](view.md) component. A [`View`](view.md) is useful as a container for other components, to help control style and layout.
+
+With `props` and the basic [`Text`](text.md), [`Image`](image.md), and [`View`](view.md) components, you can build a wide variety of static screens. To learn how to make your app change over time, you need to [learn about State](#state).
+
+## State
+
+Unlike props [that are read-only](https://react.dev/reference/react/Component#props) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else.
+
+#### What's the difference between state and props in React?
+
+In a React component, the props are the variables that we pass from a parent component to a child component. Similarly, the state are also variables, with the difference that they are not passed as parameters, but rather that the component initializes and manages them internally.
+
+#### Are there differences between React and React Native to handle the state?
+
+<div className="two-columns">
+
+```tsx
+// React Counter Example using Hooks!
+
+import {useState} from 'react';
+
+
+
+const App = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="container">
+      <p>You clicked {count} times</p>
+      <button
+        onClick={() => setCount(count + 1)}>
+        Click me!
+      </button>
+    </div>
+  );
+};
+
+
+// CSS
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+```
+
+```tsx
+// React Native Counter Example using Hooks!
+
+import {useState} from 'react';
+import {View, Text, Button, StyleSheet} from 'react-native';
+
+const App = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <View style={styles.container}>
+      <Text>You clicked {count} times</Text>
+      <Button
+        onPress={() => setCount(count + 1)}
+        title="Click me!"
+      />
+    </View>
+  );
+};
+
+// React Native Styles
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+```
+
+</div>
+
+As shown above, there is no difference in handling the `state` between [React](https://react.dev/learn/state-a-components-memory) and `React Native`. You can use the state of your components both in classes and in function components using [hooks](https://react.dev/reference/react/useState)!
+
+In the following example we will show the same above counter example using classes.
+
+```SnackPlayer name=Hello%20Classes
+import {Component} from 'react';
+import {StyleSheet, TouchableOpacity, Text, View} from 'react-native';
+
+class App extends Component {
+  state = {
+    count: 0,
+  };
+
+  onPress = () => {
+    this.setState({
+      count: this.state.count + 1,
+    });
+  };
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <TouchableOpacity style={styles.button} onPress={this.onPress}>
+          <Text>Click me</Text>
+        </TouchableOpacity>
+        <View>
+          <Text>You clicked {this.state.count} times</Text>
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#DDDDDD',
+    padding: 10,
+    marginBottom: 10,
+  },
+});
+
+export default App;
+```
diff --git a/website/versioned_docs/version-0.85/usecolorscheme.md b/website/versioned_docs/version-0.85/usecolorscheme.md
index 6dc4d01517e..b3e0ac1db9d 100644
--- a/website/versioned_docs/version-0.85/usecolorscheme.md
+++ b/website/versioned_docs/version-0.85/usecolorscheme.md
@@ -21,7 +21,6 @@ The `useColorScheme` React hook provides and subscribes to color scheme updates
 ## Example
 
 ```SnackPlayer
-import React from 'react';
 import {Text, StyleSheet, useColorScheme} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.85/usewindowdimensions.md b/website/versioned_docs/version-0.85/usewindowdimensions.md
index 92bb1931d32..3e8a8077370 100644
--- a/website/versioned_docs/version-0.85/usewindowdimensions.md
+++ b/website/versioned_docs/version-0.85/usewindowdimensions.md
@@ -16,7 +16,6 @@ const {height, width} = useWindowDimensions();
 ## Example
 
 ```SnackPlayer name=useWindowDimensions&supportedPlatforms=ios,android
-import React from 'react';
 import {StyleSheet, Text, useWindowDimensions} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.85/using-a-listview.md b/website/versioned_docs/version-0.85/using-a-listview.md
index cf13fa66a6c..a5a04f40279 100644
--- a/website/versioned_docs/version-0.85/using-a-listview.md
+++ b/website/versioned_docs/version-0.85/using-a-listview.md
@@ -12,7 +12,6 @@ The `FlatList` component requires two props: `data` and `renderItem`. `data` is
 This example creates a basic `FlatList` of hardcoded data. Each item in the `data` props is rendered as a `Text` component. The `FlatListBasics` component then renders the `FlatList` and all `Text` components.
 
 ```SnackPlayer name=FlatList%20Basics
-import React from 'react';
 import {FlatList, StyleSheet, Text, View} from 'react-native';
 
 const styles = StyleSheet.create({
@@ -55,7 +54,6 @@ export default FlatListBasics;
 If you want to render a set of data broken into logical sections, maybe with section headers, similar to `UITableView` on iOS, then a [SectionList](sectionlist.md) is the way to go.
 
 ```SnackPlayer name=SectionList%20Basics
-import React from 'react';
 import {SectionList, StyleSheet, Text, View} from 'react-native';
 
 const styles = StyleSheet.create({
diff --git a/website/versioned_docs/version-0.85/using-a-scrollview.md b/website/versioned_docs/version-0.85/using-a-scrollview.md
index e4de6207a71..3ffae817bf0 100644
--- a/website/versioned_docs/version-0.85/using-a-scrollview.md
+++ b/website/versioned_docs/version-0.85/using-a-scrollview.md
@@ -8,7 +8,6 @@ The [ScrollView](scrollview.md) is a generic scrolling container that can contai
 This example creates a vertical `ScrollView` with both images and text mixed together.
 
 ```SnackPlayer name=Using%20ScrollView
-import React from 'react';
 import {Image, ScrollView, Text} from 'react-native';
 
 const logo = {
diff --git a/website/versioned_docs/version-0.85/vibration.md b/website/versioned_docs/version-0.85/vibration.md
index 44a0af2db43..bdb564ab331 100644
--- a/website/versioned_docs/version-0.85/vibration.md
+++ b/website/versioned_docs/version-0.85/vibration.md
@@ -8,7 +8,6 @@ Vibrates the device.
 ## Example
 
 ```SnackPlayer name=Vibration%20Example&supportedPlatforms=ios,android
-import React from 'react';
 import {
   Button,
   Platform,
diff --git a/website/versioned_docs/version-0.85/view-style-props.md b/website/versioned_docs/version-0.85/view-style-props.md
index 4f1c413c202..c464a3fa559 100644
--- a/website/versioned_docs/version-0.85/view-style-props.md
+++ b/website/versioned_docs/version-0.85/view-style-props.md
@@ -9,7 +9,6 @@ import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameFor
 ### Example
 
 ```SnackPlayer name=ViewStyleProps
-import React from 'react';
 import {View, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.85/view.md b/website/versioned_docs/version-0.85/view.md
index 3fd3c7fb4bd..405218dcc9b 100644
--- a/website/versioned_docs/version-0.85/view.md
+++ b/website/versioned_docs/version-0.85/view.md
@@ -12,7 +12,6 @@ The most fundamental component for building a UI, `View` is a container that sup
 This example creates a `View` that wraps two boxes with color and a text component in a row with padding.
 
 ```SnackPlayer name=View%20Example
-import React from 'react';
 import {View, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.85/virtualizedlist.md b/website/versioned_docs/version-0.85/virtualizedlist.md
index 9f80ad78258..327e665db76 100644
--- a/website/versioned_docs/version-0.85/virtualizedlist.md
+++ b/website/versioned_docs/version-0.85/virtualizedlist.md
@@ -15,7 +15,6 @@ Virtualization massively improves memory consumption and performance of large li
 <TabItem value="javascript">
 
 ```SnackPlayer name=VirtualizedListExample&ext=js
-import React from 'react';
 import {View, VirtualizedList, StyleSheet, Text, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -71,7 +70,6 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=VirtualizedListExample&ext=tsx
-import React from 'react';
 import {View, VirtualizedList, StyleSheet, Text, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.86/_fabric-native-components.jsx b/website/versioned_docs/version-0.86/_fabric-native-components.jsx
index fc6a3171a4f..69bc6f31268 100644
--- a/website/versioned_docs/version-0.86/_fabric-native-components.jsx
+++ b/website/versioned_docs/version-0.86/_fabric-native-components.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import IOSContent from './fabric-native-components-ios.md';
 import AndroidContent from './fabric-native-components-android.md';
 
diff --git a/website/versioned_docs/version-0.86/_integration-with-existing-apps-ios.md b/website/versioned_docs/version-0.86/_integration-with-existing-apps-ios.md
index 4b95571538b..f28e3c48bf9 100644
--- a/website/versioned_docs/version-0.86/_integration-with-existing-apps-ios.md
+++ b/website/versioned_docs/version-0.86/_integration-with-existing-apps-ios.md
@@ -1,655 +1,655 @@
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import constants from '@site/core/TabsConstants';
-import CodeBlock from '@theme/CodeBlock';
-import RNTemplateRepoLink from '@site/core/RNTemplateRepoLink';
-import {getTemplateBranchNameForCurrentVersion} from '@site/src/getTemplateBranchNameForCurrentVersion';
-
-## Key Concepts
-
-The keys to integrating React Native components into your iOS application are to:
-
-1. Set up the correct directory structure.
-2. Install the necessary NPM dependencies.
-3. Adding React Native to your Podfile configuration.
-4. Writing the TypeScript code for your first React Native screen.
-5. Integrate React Native with your iOS code using a `RCTRootView`.
-6. Testing your integration by running the bundler and seeing your app in action.
-
-## Using the Community Template
-
-While you follow this guide, we suggest you to use the [React Native Community Template](https://github.com/react-native-community/template/) as reference. The template contains a **minimal iOS app** and will help you understanding how to integrate React Native into an existing iOS app.
-
-## Prerequisites
-
-Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](getting-started-without-a-framework) to configure your development environment for building React Native apps for iOS.
-This guide also assumes you're familiar with the basics of iOS development such as creating a `UIViewController` and editing the `Podfile` file.
-
-### 1. Set up directory structure
-
-To ensure a smooth experience, create a new folder for your integrated React Native project, then **move your existing iOS project** to the `/ios` subfolder.
-
-## 2. Install NPM dependencies
-
-Go to the root directory and run the following command:
-
-<CodeBlock language="bash" title="shell">
-{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/package.json`}
-</CodeBlock>
-
-This will copy the `package.json` <RNTemplateRepoLink href="template/package.json">file from the Community template</RNTemplateRepoLink> to your project.
-
-Next, install the NPM packages by running:
-
-<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
-<TabItem value="npm">
-
-```shell
-npm install
-```
-
-</TabItem>
-<TabItem value="yarn">
-
-```shell
-yarn install
-```
-
-</TabItem>
-</Tabs>
-
-Installation process has created a new `node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
-
-Add `node_modules/` to your `.gitignore` file (here the <RNTemplateRepoLink href="template/_gitignore">Community default one</RNTemplateRepoLink>).
-
-### 3. Install Development tools
-
-### Command Line Tools for Xcode
-
-Install the Command Line Tools. Choose **Settings... (or Preferences...)** in the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.
-
-![Xcode Command Line Tools](/docs/assets/GettingStartedXcodeCommandLineTools.png)
-
-### CocoaPods
-
-[CocoaPods](https://cocoapods.org) is a package management tool for iOS and macOS development. We use it to add the actual React Native framework code locally into your current project.
-
-We recommend installing CocoaPods using [Homebrew](https://brew.sh/):
-
-```shell
-brew install cocoapods
-```
-
-## 4. Adding React Native to your app
-
-### Configuring CocoaPods
-
-To configure CocoaPods, we need two files:
-
-- A **Gemfile** that defines which Ruby dependencies we need.
-- A **Podfile** that defines how to properly install our dependencies.
-
-For the **Gemfile**, go to the root directory of your project and run this command
-
-<CodeBlock language="bash" title="shell">
-{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/Gemfile`}
-</CodeBlock>
-
-This will download the Gemfile from the template.
-
-:::note
-If you created your project with Xcode 16, you need to update the Gemfile as it follows:
-
-```diff
--gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
-+gem 'cocoapods', '1.16.2'
-gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
--gem 'xcodeproj', '< 1.26.0'
-+gem 'xcodeproj', '1.27.0'
-```
-
-Xcode 16 generates a project in a slightly different ways from previous versions of Xcode, and you need the latest CocoaPods and Xcodeproj gems to make it work properly.
-:::
-
-Similarly, for the **Podfile**, go to the `ios` folder of your project and run
-
-<CodeBlock language="bash" title="shell">
-{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/ios/Podfile`}
-</CodeBlock>
-
-Please use the Community Template as a reference point for the <RNTemplateRepoLink href="template/Gemfile">Gemfile</RNTemplateRepoLink> and for the <RNTemplateRepoLink href="template/ios/Podfile">Podfile</RNTemplateRepoLink>.
-
-:::note
-Remember to change <RNTemplateRepoLink href="template/ios/Podfile#L17">this line</RNTemplateRepoLink>.
-:::
-
-Now, we need to run a couple of extra commands to install the Ruby gems and the Pods.
-Navigate to the `ios` folder and run the following commands:
-
-```sh
-bundle install
-bundle exec pod install
-```
-
-The first command will install the Ruby dependencies and the second command will actually integrate the React Native code in your application so that your iOS files can import the React Native headers.
-
-## 5. Writing the TypeScript Code
-
-Now we will actually modify the native iOS application to integrate React Native.
-
-The first bit of code we will write is the actual React Native code for the new screen that will be integrated into our application.
-
-### Create a `index.js` file
-
-First, create an empty `index.js` file in the root of your React Native project.
-
-`index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `import`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it.
-
-Our `index.js` should look as follows (here the <RNTemplateRepoLink href="template/index.js">Community template file as reference</RNTemplateRepoLink>):
-
-```js
-import {AppRegistry} from 'react-native';
-import App from './App';
-
-AppRegistry.registerComponent('HelloWorld', () => App);
-```
-
-### Create a `App.tsx` file
-
-Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX](<https://en.wikipedia.org/wiki/JSX_(JavaScript)>) expressions. It contains the root React Native component that we will integrate into our iOS application (<RNTemplateRepoLink href="template/App.tsx">link</RNTemplateRepoLink>):
-
-```tsx
-import React from 'react';
-import {
-  SafeAreaView,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  useColorScheme,
-  View,
-} from 'react-native';
-
-import {
-  Colors,
-  DebugInstructions,
-  Header,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
-function App(): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
-
-  return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundStyle.backgroundColor}
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
-        <View
-          style={{
-            backgroundColor: isDarkMode
-              ? Colors.black
-              : Colors.white,
-            padding: 24,
-          }}>
-          <Text style={styles.title}>Step One</Text>
-          <Text>
-            Edit <Text style={styles.bold}>App.tsx</Text> to
-            change this screen and see your edits.
-          </Text>
-          <Text style={styles.title}>See your changes</Text>
-          <ReloadInstructions />
-          <Text style={styles.title}>Debug</Text>
-          <DebugInstructions />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  title: {
-    fontSize: 24,
-    fontWeight: '600',
-  },
-  bold: {
-    fontWeight: '700',
-  },
-});
-
-export default App;
-```
-
-Here is the <RNTemplateRepoLink href="template/App.tsx">Community template file as reference</RNTemplateRepoLink>.
-
-## 5. Integrating with your iOS code
-
-We now need to add some native code in order to start the React Native runtime and tell it to render our React components.
-
-### Requirements
-
-React Native initialization is now unbound to any specific part of an iOS app.
-
-React Native can be initialized using a class called `RCTReactNativeFactory`, that takes care of handling the React Native lifecycle for you.
-
-Once the class is initialized, you can either start a React Native view providing a `UIWindow` object, or you can ask for the factory to generate a `UIView` that you can load in any `UIViewController.`
-
-In the following example, we will create a ViewController that can load a React Native view as it's `view`.
-
-#### Create the ReactViewController
-
-Create a new file from template (<kbd>⌘</kbd>+<kbd>N</kbd>) and choose the Cocoa Touch Class template.
-
-Make sure to select `UIViewController` as the "Subclass of" field.
-
-<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
-<TabItem value="objc">
-
-Now open the `ReactViewController.m` file and apply the following changes
-
-```diff title="ReactViewController.m"
-#import "ReactViewController.h"
-+#import <React/RCTBundleURLProvider.h>
-+#import <RCTReactNativeFactory.h>
-+#import <RCTDefaultReactNativeFactoryDelegate.h>
-+#import <RCTAppDependencyProvider.h>
-
-
-@interface ReactViewController ()
-
-@end
-
-+@interface ReactNativeFactoryDelegate: RCTDefaultReactNativeFactoryDelegate
-+@end
-
--@implementation ReactViewController
-+@implementation ReactViewController {
-+  RCTReactNativeFactory *_factory;
-+  id<RCTReactNativeFactoryDelegate> _factoryDelegate;
-+}
-
- - (void)viewDidLoad {
-     [super viewDidLoad];
-     // Do any additional setup after loading the view.
-+    _factoryDelegate = [ReactNativeFactoryDelegate new];
-+    _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new];
-+    _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate];
-+    self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"];
- }
-
-@end
-
-+@implementation ReactNativeFactoryDelegate
-+
-+- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
-+{
-+  return [self bundleURL];
-+}
-+
-+- (NSURL *)bundleURL
-+{
-+#if DEBUG
-+  return [RCTBundleURLProvider.sharedSettings jsBundleURLForBundleRoot:@"index"];
-+#else
-+  return [NSBundle.mainBundle URLForResource:@"main" withExtension:@"jsbundle"];
-+#endif
-+}
-
-@end
-
-```
-
-</TabItem>
-<TabItem value="swift">
-
-Now open the `ReactViewController.swift` file and apply the following changes
-
-```diff title="ReactViewController.swift"
-import UIKit
-+import React
-+import React_RCTAppDelegate
-+import ReactAppDependencyProvider
-
-class ReactViewController: UIViewController {
-+  var reactNativeFactory: RCTReactNativeFactory?
-+  var reactNativeFactoryDelegate: RCTReactNativeFactoryDelegate?
-
-  override func viewDidLoad() {
-    super.viewDidLoad()
-+    reactNativeFactoryDelegate = ReactNativeDelegate()
-+    reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider()
-+    reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!)
-+    view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld")
-
-  }
-}
-
-+class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {
-+    override func sourceURL(for bridge: RCTBridge) -> URL? {
-+      self.bundleURL()
-+    }
-+
-+    override func bundleURL() -> URL? {
-+      #if DEBUG
-+      RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
-+      #else
-+      Bundle.main.url(forResource: "main", withExtension: "jsbundle")
-+      #endif
-+    }
-+
-+}
-```
-
-</TabItem>
-</Tabs>
-
-#### Presenting a React Native view in a rootViewController
-
-Finally, we can present our React Native view. To do so, we need a new View Controller that can host a view in which we can load the JS content.
-We already have the initial `ViewController`, and we can make it present the `ReactViewController`. There are several ways to do so, depending on your app. For this example, we assume that you have a button that presents React Native modally.
-
-<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
-<TabItem value="objc">
-
-```diff title="ViewController.m"
-#import "ViewController.h"
-+#import "ReactViewController.h"
-
-@interface ViewController ()
-
-@end
-
-- @implementation ViewController
-+@implementation ViewController {
-+  ReactViewController *reactViewController;
-+}
-
- - (void)viewDidLoad {
-   [super viewDidLoad];
-   // Do any additional setup after loading the view.
-   self.view.backgroundColor = UIColor.systemBackgroundColor;
-+  UIButton *button = [UIButton new];
-+  [button setTitle:@"Open React Native" forState:UIControlStateNormal];
-+  [button setTitleColor:UIColor.systemBlueColor forState:UIControlStateNormal];
-+  [button setTitleColor:UIColor.blueColor forState:UIControlStateHighlighted];
-+  [button addTarget:self action:@selector(presentReactNative) forControlEvents:UIControlEventTouchUpInside];
-+  [self.view addSubview:button];
-
-+  button.translatesAutoresizingMaskIntoConstraints = NO;
-+  [NSLayoutConstraint activateConstraints:@[
-+    [button.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor],
-+    [button.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor],
-+    [button.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor],
-+    [button.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
-+  ]];
- }
-
-+- (void)presentReactNative
-+{
-+  if (reactViewController == NULL) {
-+    reactViewController = [ReactViewController new];
-+  }
-+  [self presentViewController:reactViewController animated:YES];
-+}
-
-@end
-```
-
-</TabItem>
-<TabItem value="swift">
-
-```diff title="ViewController.swift"
-import UIKit
-
-class ViewController: UIViewController {
-
-+  var reactViewController: ReactViewController?
-
-  override func viewDidLoad() {
-    super.viewDidLoad()
-    // Do any additional setup after loading the view.
-    self.view.backgroundColor = .systemBackground
-
-+    let button = UIButton()
-+    button.setTitle("Open React Native", for: .normal)
-+    button.setTitleColor(.systemBlue, for: .normal)
-+    button.setTitleColor(.blue, for: .highlighted)
-+    button.addAction(UIAction { [weak self] _ in
-+      guard let self else { return }
-+      if reactViewController == nil {
-+       reactViewController = ReactViewController()
-+      }
-+      present(reactViewController!, animated: true)
-+    }, for: .touchUpInside)
-+    self.view.addSubview(button)
-+
-+    button.translatesAutoresizingMaskIntoConstraints = false
-+    NSLayoutConstraint.activate([
-+      button.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
-+      button.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
-+      button.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
-+      button.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
-+    ])
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-Make sure to disable the Sandbox scripting. To achieve this, in Xcode, click on your app, then on build settings. Filter for script and set the `User Script Sandboxing` to `NO`. This step is needed to properly switch between the Debug and Release version of the [Hermes engine](https://github.com/facebook/hermes/blob/main/README.md) that we ship with React Native.
-
-![Disable Sandboxing](/docs/assets/disable-sandboxing.png)
-
-Finally, make sure to add the `UIViewControllerBasedStatusBarAppearance` key into your `Info.plist` file, with value of `NO`.
-
-![Disable UIViewControllerBasedStatusBarAppearance](/docs/assets/disable-UIViewControllerBasedStatusBarAppearance.png)
-
-## 6. Test your integration
-
-You have completed all the basic steps to integrate React Native with your application. Now we will start the [Metro bundler](https://metrobundler.dev/) to build your TypeScript application code into a bundle. Metro's HTTP server shares the bundle from `localhost` on your developer environment to a simulator or device. This allows for [hot reloading](https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading).
-
-First, you need to create a `metro.config.js` file in the root of your project as follows:
-
-```js
-const {getDefaultConfig} = require('@react-native/metro-config');
-module.exports = getDefaultConfig(__dirname);
-```
-
-You can checkout the <RNTemplateRepoLink href="template/metro.config.js">`metro.config.js` file</RNTemplateRepoLink> from the Community template file as reference.
-
-Then, you need to create a `.watchmanconfig` file in the root of your project. The file must contain an empty json object:
-
-```sh
-echo {} > .watchmanconfig
-```
-
-Once you have the configuration file in place, you can run the bundler. Run the following command in the root directory of your project:
-
-<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
-<TabItem value="npm">
-
-```shell
-npm start
-```
-
-</TabItem>
-<TabItem value="yarn">
-
-```shell
-yarn start
-```
-
-</TabItem>
-</Tabs>
-
-Now build and run your iOS app as normal.
-
-Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display:
-
-<center><img src="/docs/assets/EmbeddedAppIOS078.gif" width="300" /></center>
-
-### Creating a release build in Xcode
-
-You can use Xcode to create your release builds too! The only additional step is to add a script that is executed when the app is built to package your JS and images into the iOS application.
-
-1. In Xcode, select your application
-2. Click on `Build Phases`
-3. Click on the `+` in the top left corner and select `New Run Script Phase`
-4. Click on the `Run Script` line and rename the Script to `Bundle React Native code and images`
-5. Paste in the text box the following script
-
-```sh title="Build React Native code and image"
-set -e
-
-WITH_ENVIRONMENT="$REACT_NATIVE_PATH/scripts/xcode/with-environment.sh"
-REACT_NATIVE_XCODE="$REACT_NATIVE_PATH/scripts/react-native-xcode.sh"
-
-/bin/sh -c "$WITH_ENVIRONMENT $REACT_NATIVE_XCODE"
-```
-
-6. Drag and drop the script before the one called `[CP] Embed Pods Frameworks`.
-
-Now, if you build your app for Release, it will work as expected.
-
-## 7. Passing initial props to the React Native view
-
-In some case, you'd like to pass some information from the Native app to JavaScript. For example, you might want to pass the user id of the currently logged user to React Native, together with a token that can be used to retrieve information from a database.
-
-This is possible by using the `initialProperties` parameter of the `view(withModuleName:initialProperty)` overload of the `RCTReactNativeFactory` class. The following steps shows you how to do it.
-
-### Update the App.tsx file to read the initial properties.
-
-Open the `App.tsx` file and add the following code:
-
-```diff title="App.tsx"
-import {
-  Colors,
-  DebugInstructions,
-  Header,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
--function App(): React.JSX.Element {
-+function App(props): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
-
-  return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundStyle.backgroundColor}
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
--       <View
--         style={{
--           backgroundColor: isDarkMode
--             ? Colors.black
--             : Colors.white,
--           padding: 24,
--         }}>
--         <Text style={styles.title}>Step One</Text>
--         <Text>
--           Edit <Text style={styles.bold}>App.tsx</Text> to
--           change this screen and see your edits.
--         </Text>
--         <Text style={styles.title}>See your changes</Text>
--         <ReloadInstructions />
--         <Text style={styles.title}>Debug</Text>
--         <DebugInstructions />
-+         <Text style={styles.title}>UserID: {props.userID}</Text>
-+         <Text style={styles.title}>Token: {props.token}</Text>
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  title: {
-    fontSize: 24,
-    fontWeight: '600',
-+   marginLeft: 20,
-  },
-  bold: {
-    fontWeight: '700',
-  },
-});
-
-export default App;
-```
-
-These changes will tell React Native that your App component is now accepting some properties. The `RCTreactNativeFactory` will take care of passing them to the component when it's rendered.
-
-### Update the Native code to pass the initial properties to JavaScript.
-
-<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
-<TabItem value="objc">
-
-Modify the `ReactViewController.mm` to pass the initial properties to JavaScript.
-
-```diff title="ReactViewController.mm"
- - (void)viewDidLoad {
-   [super viewDidLoad];
-   // Do any additional setup after loading the view.
-
-   _factoryDelegate = [ReactNativeFactoryDelegate new];
-   _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new];
-   _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate];
--  self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"];
-+  self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld" initialProperties:@{
-+    @"userID": @"12345678",
-+    @"token": @"secretToken"
-+  }];
-}
-```
-
-</TabItem>
-<TabItem value="swift">
-
-Modify the `ReactViewController.swift` to pass the initial properties to the React Native view.
-
-```diff title="ReactViewController.swift"
-  override func viewDidLoad() {
-    super.viewDidLoad()
-    reactNativeFactoryDelegate = ReactNativeDelegate()
-    reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider()
-    reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!)
--   view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld")
-+   view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld" initialProperties: [
-+     "userID": "12345678",
-+     "token": "secretToken"
-+])
-
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-3. Run your app once again. You should see the following screen after you present the `ReactViewController`:
-
-<center>
-  <img src="/docs/assets/brownfield-with-initial-props.png" width="30%" height="30%"/>
-</center>
-
-## Now what?
-
-At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native.
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import constants from '@site/core/TabsConstants';
+import CodeBlock from '@theme/CodeBlock';
+import RNTemplateRepoLink from '@site/core/RNTemplateRepoLink';
+import {getTemplateBranchNameForCurrentVersion} from '@site/src/getTemplateBranchNameForCurrentVersion';
+
+## Key Concepts
+
+The keys to integrating React Native components into your iOS application are to:
+
+1. Set up the correct directory structure.
+2. Install the necessary NPM dependencies.
+3. Adding React Native to your Podfile configuration.
+4. Writing the TypeScript code for your first React Native screen.
+5. Integrate React Native with your iOS code using a `RCTRootView`.
+6. Testing your integration by running the bundler and seeing your app in action.
+
+## Using the Community Template
+
+While you follow this guide, we suggest you to use the [React Native Community Template](https://github.com/react-native-community/template/) as reference. The template contains a **minimal iOS app** and will help you understanding how to integrate React Native into an existing iOS app.
+
+## Prerequisites
+
+Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](getting-started-without-a-framework) to configure your development environment for building React Native apps for iOS.
+This guide also assumes you're familiar with the basics of iOS development such as creating a `UIViewController` and editing the `Podfile` file.
+
+### 1. Set up directory structure
+
+To ensure a smooth experience, create a new folder for your integrated React Native project, then **move your existing iOS project** to the `/ios` subfolder.
+
+## 2. Install NPM dependencies
+
+Go to the root directory and run the following command:
+
+<CodeBlock language="bash" title="shell">
+{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/package.json`}
+</CodeBlock>
+
+This will copy the `package.json` <RNTemplateRepoLink href="template/package.json">file from the Community template</RNTemplateRepoLink> to your project.
+
+Next, install the NPM packages by running:
+
+<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
+<TabItem value="npm">
+
+```shell
+npm install
+```
+
+</TabItem>
+<TabItem value="yarn">
+
+```shell
+yarn install
+```
+
+</TabItem>
+</Tabs>
+
+Installation process has created a new `node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
+
+Add `node_modules/` to your `.gitignore` file (here the <RNTemplateRepoLink href="template/_gitignore">Community default one</RNTemplateRepoLink>).
+
+### 3. Install Development tools
+
+### Command Line Tools for Xcode
+
+Install the Command Line Tools. Choose **Settings... (or Preferences...)** in the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.
+
+![Xcode Command Line Tools](/docs/assets/GettingStartedXcodeCommandLineTools.png)
+
+### CocoaPods
+
+[CocoaPods](https://cocoapods.org) is a package management tool for iOS and macOS development. We use it to add the actual React Native framework code locally into your current project.
+
+We recommend installing CocoaPods using [Homebrew](https://brew.sh/):
+
+```shell
+brew install cocoapods
+```
+
+## 4. Adding React Native to your app
+
+### Configuring CocoaPods
+
+To configure CocoaPods, we need two files:
+
+- A **Gemfile** that defines which Ruby dependencies we need.
+- A **Podfile** that defines how to properly install our dependencies.
+
+For the **Gemfile**, go to the root directory of your project and run this command
+
+<CodeBlock language="bash" title="shell">
+{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/Gemfile`}
+</CodeBlock>
+
+This will download the Gemfile from the template.
+
+:::note
+If you created your project with Xcode 16, you need to update the Gemfile as it follows:
+
+```diff
+-gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
++gem 'cocoapods', '1.16.2'
+gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
+-gem 'xcodeproj', '< 1.26.0'
++gem 'xcodeproj', '1.27.0'
+```
+
+Xcode 16 generates a project in a slightly different ways from previous versions of Xcode, and you need the latest CocoaPods and Xcodeproj gems to make it work properly.
+:::
+
+Similarly, for the **Podfile**, go to the `ios` folder of your project and run
+
+<CodeBlock language="bash" title="shell">
+{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/ios/Podfile`}
+</CodeBlock>
+
+Please use the Community Template as a reference point for the <RNTemplateRepoLink href="template/Gemfile">Gemfile</RNTemplateRepoLink> and for the <RNTemplateRepoLink href="template/ios/Podfile">Podfile</RNTemplateRepoLink>.
+
+:::note
+Remember to change <RNTemplateRepoLink href="template/ios/Podfile#L17">this line</RNTemplateRepoLink>.
+:::
+
+Now, we need to run a couple of extra commands to install the Ruby gems and the Pods.
+Navigate to the `ios` folder and run the following commands:
+
+```sh
+bundle install
+bundle exec pod install
+```
+
+The first command will install the Ruby dependencies and the second command will actually integrate the React Native code in your application so that your iOS files can import the React Native headers.
+
+## 5. Writing the TypeScript Code
+
+Now we will actually modify the native iOS application to integrate React Native.
+
+The first bit of code we will write is the actual React Native code for the new screen that will be integrated into our application.
+
+### Create a `index.js` file
+
+First, create an empty `index.js` file in the root of your React Native project.
+
+`index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `import`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it.
+
+Our `index.js` should look as follows (here the <RNTemplateRepoLink href="template/index.js">Community template file as reference</RNTemplateRepoLink>):
+
+```js
+import {AppRegistry} from 'react-native';
+import App from './App';
+
+AppRegistry.registerComponent('HelloWorld', () => App);
+```
+
+### Create a `App.tsx` file
+
+Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX](<https://en.wikipedia.org/wiki/JSX_(JavaScript)>) expressions. It contains the root React Native component that we will integrate into our iOS application (<RNTemplateRepoLink href="template/App.tsx">link</RNTemplateRepoLink>):
+
+```tsx
+import {type JSX} from 'react';
+import {
+  SafeAreaView,
+  ScrollView,
+  StatusBar,
+  StyleSheet,
+  Text,
+  useColorScheme,
+  View,
+} from 'react-native';
+
+import {
+  Colors,
+  DebugInstructions,
+  Header,
+  ReloadInstructions,
+} from 'react-native/Libraries/NewAppScreen';
+
+function App(): JSX.Element {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const backgroundStyle = {
+    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+  };
+
+  return (
+    <SafeAreaView style={backgroundStyle}>
+      <StatusBar
+        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
+        backgroundColor={backgroundStyle.backgroundColor}
+      />
+      <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        style={backgroundStyle}>
+        <Header />
+        <View
+          style={{
+            backgroundColor: isDarkMode
+              ? Colors.black
+              : Colors.white,
+            padding: 24,
+          }}>
+          <Text style={styles.title}>Step One</Text>
+          <Text>
+            Edit <Text style={styles.bold}>App.tsx</Text> to
+            change this screen and see your edits.
+          </Text>
+          <Text style={styles.title}>See your changes</Text>
+          <ReloadInstructions />
+          <Text style={styles.title}>Debug</Text>
+          <DebugInstructions />
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 24,
+    fontWeight: '600',
+  },
+  bold: {
+    fontWeight: '700',
+  },
+});
+
+export default App;
+```
+
+Here is the <RNTemplateRepoLink href="template/App.tsx">Community template file as reference</RNTemplateRepoLink>.
+
+## 5. Integrating with your iOS code
+
+We now need to add some native code in order to start the React Native runtime and tell it to render our React components.
+
+### Requirements
+
+React Native initialization is now unbound to any specific part of an iOS app.
+
+React Native can be initialized using a class called `RCTReactNativeFactory`, that takes care of handling the React Native lifecycle for you.
+
+Once the class is initialized, you can either start a React Native view providing a `UIWindow` object, or you can ask for the factory to generate a `UIView` that you can load in any `UIViewController.`
+
+In the following example, we will create a ViewController that can load a React Native view as it's `view`.
+
+#### Create the ReactViewController
+
+Create a new file from template (<kbd>⌘</kbd>+<kbd>N</kbd>) and choose the Cocoa Touch Class template.
+
+Make sure to select `UIViewController` as the "Subclass of" field.
+
+<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
+<TabItem value="objc">
+
+Now open the `ReactViewController.m` file and apply the following changes
+
+```diff title="ReactViewController.m"
+#import "ReactViewController.h"
++#import <React/RCTBundleURLProvider.h>
++#import <RCTReactNativeFactory.h>
++#import <RCTDefaultReactNativeFactoryDelegate.h>
++#import <RCTAppDependencyProvider.h>
+
+
+@interface ReactViewController ()
+
+@end
+
++@interface ReactNativeFactoryDelegate: RCTDefaultReactNativeFactoryDelegate
++@end
+
+-@implementation ReactViewController
++@implementation ReactViewController {
++  RCTReactNativeFactory *_factory;
++  id<RCTReactNativeFactoryDelegate> _factoryDelegate;
++}
+
+ - (void)viewDidLoad {
+     [super viewDidLoad];
+     // Do any additional setup after loading the view.
++    _factoryDelegate = [ReactNativeFactoryDelegate new];
++    _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new];
++    _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate];
++    self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"];
+ }
+
+@end
+
++@implementation ReactNativeFactoryDelegate
++
++- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
++{
++  return [self bundleURL];
++}
++
++- (NSURL *)bundleURL
++{
++#if DEBUG
++  return [RCTBundleURLProvider.sharedSettings jsBundleURLForBundleRoot:@"index"];
++#else
++  return [NSBundle.mainBundle URLForResource:@"main" withExtension:@"jsbundle"];
++#endif
++}
+
+@end
+
+```
+
+</TabItem>
+<TabItem value="swift">
+
+Now open the `ReactViewController.swift` file and apply the following changes
+
+```diff title="ReactViewController.swift"
+import UIKit
++import React
++import React_RCTAppDelegate
++import ReactAppDependencyProvider
+
+class ReactViewController: UIViewController {
++  var reactNativeFactory: RCTReactNativeFactory?
++  var reactNativeFactoryDelegate: RCTReactNativeFactoryDelegate?
+
+  override func viewDidLoad() {
+    super.viewDidLoad()
++    reactNativeFactoryDelegate = ReactNativeDelegate()
++    reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider()
++    reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!)
++    view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld")
+
+  }
+}
+
++class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {
++    override func sourceURL(for bridge: RCTBridge) -> URL? {
++      self.bundleURL()
++    }
++
++    override func bundleURL() -> URL? {
++      #if DEBUG
++      RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
++      #else
++      Bundle.main.url(forResource: "main", withExtension: "jsbundle")
++      #endif
++    }
++
++}
+```
+
+</TabItem>
+</Tabs>
+
+#### Presenting a React Native view in a rootViewController
+
+Finally, we can present our React Native view. To do so, we need a new View Controller that can host a view in which we can load the JS content.
+We already have the initial `ViewController`, and we can make it present the `ReactViewController`. There are several ways to do so, depending on your app. For this example, we assume that you have a button that presents React Native modally.
+
+<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
+<TabItem value="objc">
+
+```diff title="ViewController.m"
+#import "ViewController.h"
++#import "ReactViewController.h"
+
+@interface ViewController ()
+
+@end
+
+- @implementation ViewController
++@implementation ViewController {
++  ReactViewController *reactViewController;
++}
+
+ - (void)viewDidLoad {
+   [super viewDidLoad];
+   // Do any additional setup after loading the view.
+   self.view.backgroundColor = UIColor.systemBackgroundColor;
++  UIButton *button = [UIButton new];
++  [button setTitle:@"Open React Native" forState:UIControlStateNormal];
++  [button setTitleColor:UIColor.systemBlueColor forState:UIControlStateNormal];
++  [button setTitleColor:UIColor.blueColor forState:UIControlStateHighlighted];
++  [button addTarget:self action:@selector(presentReactNative) forControlEvents:UIControlEventTouchUpInside];
++  [self.view addSubview:button];
+
++  button.translatesAutoresizingMaskIntoConstraints = NO;
++  [NSLayoutConstraint activateConstraints:@[
++    [button.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor],
++    [button.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor],
++    [button.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor],
++    [button.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
++  ]];
+ }
+
++- (void)presentReactNative
++{
++  if (reactViewController == NULL) {
++    reactViewController = [ReactViewController new];
++  }
++  [self presentViewController:reactViewController animated:YES];
++}
+
+@end
+```
+
+</TabItem>
+<TabItem value="swift">
+
+```diff title="ViewController.swift"
+import UIKit
+
+class ViewController: UIViewController {
+
++  var reactViewController: ReactViewController?
+
+  override func viewDidLoad() {
+    super.viewDidLoad()
+    // Do any additional setup after loading the view.
+    self.view.backgroundColor = .systemBackground
+
++    let button = UIButton()
++    button.setTitle("Open React Native", for: .normal)
++    button.setTitleColor(.systemBlue, for: .normal)
++    button.setTitleColor(.blue, for: .highlighted)
++    button.addAction(UIAction { [weak self] _ in
++      guard let self else { return }
++      if reactViewController == nil {
++       reactViewController = ReactViewController()
++      }
++      present(reactViewController!, animated: true)
++    }, for: .touchUpInside)
++    self.view.addSubview(button)
++
++    button.translatesAutoresizingMaskIntoConstraints = false
++    NSLayoutConstraint.activate([
++      button.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
++      button.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
++      button.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
++      button.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
++    ])
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+Make sure to disable the Sandbox scripting. To achieve this, in Xcode, click on your app, then on build settings. Filter for script and set the `User Script Sandboxing` to `NO`. This step is needed to properly switch between the Debug and Release version of the [Hermes engine](https://github.com/facebook/hermes/blob/main/README.md) that we ship with React Native.
+
+![Disable Sandboxing](/docs/assets/disable-sandboxing.png)
+
+Finally, make sure to add the `UIViewControllerBasedStatusBarAppearance` key into your `Info.plist` file, with value of `NO`.
+
+![Disable UIViewControllerBasedStatusBarAppearance](/docs/assets/disable-UIViewControllerBasedStatusBarAppearance.png)
+
+## 6. Test your integration
+
+You have completed all the basic steps to integrate React Native with your application. Now we will start the [Metro bundler](https://metrobundler.dev/) to build your TypeScript application code into a bundle. Metro's HTTP server shares the bundle from `localhost` on your developer environment to a simulator or device. This allows for [hot reloading](https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading).
+
+First, you need to create a `metro.config.js` file in the root of your project as follows:
+
+```js
+const {getDefaultConfig} = require('@react-native/metro-config');
+module.exports = getDefaultConfig(__dirname);
+```
+
+You can checkout the <RNTemplateRepoLink href="template/metro.config.js">`metro.config.js` file</RNTemplateRepoLink> from the Community template file as reference.
+
+Then, you need to create a `.watchmanconfig` file in the root of your project. The file must contain an empty json object:
+
+```sh
+echo {} > .watchmanconfig
+```
+
+Once you have the configuration file in place, you can run the bundler. Run the following command in the root directory of your project:
+
+<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
+<TabItem value="npm">
+
+```shell
+npm start
+```
+
+</TabItem>
+<TabItem value="yarn">
+
+```shell
+yarn start
+```
+
+</TabItem>
+</Tabs>
+
+Now build and run your iOS app as normal.
+
+Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display:
+
+<center><img src="/docs/assets/EmbeddedAppIOS078.gif" width="300" /></center>
+
+### Creating a release build in Xcode
+
+You can use Xcode to create your release builds too! The only additional step is to add a script that is executed when the app is built to package your JS and images into the iOS application.
+
+1. In Xcode, select your application
+2. Click on `Build Phases`
+3. Click on the `+` in the top left corner and select `New Run Script Phase`
+4. Click on the `Run Script` line and rename the Script to `Bundle React Native code and images`
+5. Paste in the text box the following script
+
+```sh title="Build React Native code and image"
+set -e
+
+WITH_ENVIRONMENT="$REACT_NATIVE_PATH/scripts/xcode/with-environment.sh"
+REACT_NATIVE_XCODE="$REACT_NATIVE_PATH/scripts/react-native-xcode.sh"
+
+/bin/sh -c "$WITH_ENVIRONMENT $REACT_NATIVE_XCODE"
+```
+
+6. Drag and drop the script before the one called `[CP] Embed Pods Frameworks`.
+
+Now, if you build your app for Release, it will work as expected.
+
+## 7. Passing initial props to the React Native view
+
+In some case, you'd like to pass some information from the Native app to JavaScript. For example, you might want to pass the user id of the currently logged user to React Native, together with a token that can be used to retrieve information from a database.
+
+This is possible by using the `initialProperties` parameter of the `view(withModuleName:initialProperty)` overload of the `RCTReactNativeFactory` class. The following steps shows you how to do it.
+
+### Update the App.tsx file to read the initial properties.
+
+Open the `App.tsx` file and add the following code:
+
+```diff title="App.tsx"
+import {
+  Colors,
+  DebugInstructions,
+  Header,
+  ReloadInstructions,
+} from 'react-native/Libraries/NewAppScreen';
+
+-function App(): React.JSX.Element {
++function App(props): React.JSX.Element {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const backgroundStyle = {
+    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+  };
+
+  return (
+    <SafeAreaView style={backgroundStyle}>
+      <StatusBar
+        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
+        backgroundColor={backgroundStyle.backgroundColor}
+      />
+      <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        style={backgroundStyle}>
+        <Header />
+-       <View
+-         style={{
+-           backgroundColor: isDarkMode
+-             ? Colors.black
+-             : Colors.white,
+-           padding: 24,
+-         }}>
+-         <Text style={styles.title}>Step One</Text>
+-         <Text>
+-           Edit <Text style={styles.bold}>App.tsx</Text> to
+-           change this screen and see your edits.
+-         </Text>
+-         <Text style={styles.title}>See your changes</Text>
+-         <ReloadInstructions />
+-         <Text style={styles.title}>Debug</Text>
+-         <DebugInstructions />
++         <Text style={styles.title}>UserID: {props.userID}</Text>
++         <Text style={styles.title}>Token: {props.token}</Text>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 24,
+    fontWeight: '600',
++   marginLeft: 20,
+  },
+  bold: {
+    fontWeight: '700',
+  },
+});
+
+export default App;
+```
+
+These changes will tell React Native that your App component is now accepting some properties. The `RCTreactNativeFactory` will take care of passing them to the component when it's rendered.
+
+### Update the Native code to pass the initial properties to JavaScript.
+
+<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
+<TabItem value="objc">
+
+Modify the `ReactViewController.mm` to pass the initial properties to JavaScript.
+
+```diff title="ReactViewController.mm"
+ - (void)viewDidLoad {
+   [super viewDidLoad];
+   // Do any additional setup after loading the view.
+
+   _factoryDelegate = [ReactNativeFactoryDelegate new];
+   _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new];
+   _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate];
+-  self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"];
++  self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld" initialProperties:@{
++    @"userID": @"12345678",
++    @"token": @"secretToken"
++  }];
+}
+```
+
+</TabItem>
+<TabItem value="swift">
+
+Modify the `ReactViewController.swift` to pass the initial properties to the React Native view.
+
+```diff title="ReactViewController.swift"
+  override func viewDidLoad() {
+    super.viewDidLoad()
+    reactNativeFactoryDelegate = ReactNativeDelegate()
+    reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider()
+    reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!)
+-   view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld")
++   view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld" initialProperties: [
++     "userID": "12345678",
++     "token": "secretToken"
++])
+
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+3. Run your app once again. You should see the following screen after you present the `ReactViewController`:
+
+<center>
+  <img src="/docs/assets/brownfield-with-initial-props.png" width="30%" height="30%"/>
+</center>
+
+## Now what?
+
+At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native.
diff --git a/website/versioned_docs/version-0.86/_integration-with-existing-apps-kotlin.md b/website/versioned_docs/version-0.86/_integration-with-existing-apps-kotlin.md
index 23414c63a3b..c5f7d6bc4a6 100644
--- a/website/versioned_docs/version-0.86/_integration-with-existing-apps-kotlin.md
+++ b/website/versioned_docs/version-0.86/_integration-with-existing-apps-kotlin.md
@@ -1,511 +1,510 @@
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import constants from '@site/core/TabsConstants';
-import CodeBlock from '@theme/CodeBlock';
-import RNTemplateRepoLink from '@site/core/RNTemplateRepoLink';
-import {getTemplateBranchNameForCurrentVersion} from '@site/src/getTemplateBranchNameForCurrentVersion';
-
-## Key Concepts
-
-The keys to integrating React Native components into your Android application are to:
-
-1. Set up the correct directory structure.
-2. Install the necessary NPM dependencies.
-3. Adding React Native to your Gradle configuration.
-4. Writing the TypeScript code for your first React Native screen.
-5. Integrate React Native with your Android code using a ReactActivity.
-6. Testing your integration by running the bundler and seeing your app in action.
-
-## Using the Community Template
-
-While you follow this guide, we suggest you to use the [React Native Community Template](https://github.com/react-native-community/template/) as reference. The template contains a **minimal Android app** and will help you understanding how to integrate React Native into an existing Android app.
-
-## Prerequisites
-
-Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](getting-started-without-a-framework) to configure your development environment for building React Native apps for Android.
-This guide also assumes you're familiar with the basics of Android development such as creating Activities and editing the `AndroidManifest.xml` file.
-
-## 1. Set up directory structure
-
-To ensure a smooth experience, create a new folder for your integrated React Native project, then **move your existing Android project** to the `/android` subfolder.
-
-## 2. Install NPM dependencies
-
-Go to the root directory and run the following command:
-
-<CodeBlock language="bash" title="shell">
-{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/package.json`}
-</CodeBlock>
-
-This will copy the `package.json` <RNTemplateRepoLink href="template/package.json">file from the Community template</RNTemplateRepoLink> to your project.
-
-Next, install the NPM packages by running:
-
-<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
-<TabItem value="npm">
-
-```shell
-npm install
-```
-
-</TabItem>
-<TabItem value="yarn">
-
-```shell
-yarn install
-```
-
-</TabItem>
-</Tabs>
-
-Installation process has created a new `node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
-
-Add `node_modules/` to your `.gitignore` file (here the <RNTemplateRepoLink href="template/_gitignore">Community default one</RNTemplateRepoLink>).
-
-## 3. Adding React Native to your app
-
-### Configuring Gradle
-
-React Native uses the React Native Gradle Plugin to configure your dependencies and project setup.
-
-First, let's edit your `settings.gradle` file by adding those lines (as suggested from the <RNTemplateRepoLink href="template/android/settings.gradle">Community template</RNTemplateRepoLink>):
-
-```groovy
-// Configures the React Native Gradle Settings plugin used for autolinking
-pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
-plugins { id("com.facebook.react.settings") }
-extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
-// If using .gradle.kts files:
-// extensions.configure<com.facebook.react.ReactSettingsExtension> { autolinkLibrariesFromCommand() }
-includeBuild("../node_modules/@react-native/gradle-plugin")
-
-// Include your existing Gradle modules here.
-// include(":app")
-```
-
-Then you need to open your top level `build.gradle` and include this line (as suggested from the <RNTemplateRepoLink href="template/android/build.gradle">Community template</RNTemplateRepoLink>):
-
-```diff
-buildscript {
-    repositories {
-        google()
-        mavenCentral()
-    }
-    dependencies {
-        classpath("com.android.tools.build:gradle:7.3.1")
-+       classpath("com.facebook.react:react-native-gradle-plugin")
-    }
-}
-```
-
-This makes sure the React Native Gradle Plugin (RNGP) is available inside your project.
-Finally, add those lines inside your Applications's `build.gradle` file (it's a different `build.gradle` file usually inside your `app` folder - you can use the <RNTemplateRepoLink href="template/android/build.gradle">Community template file as reference</RNTemplateRepoLink>):
-
-```diff
-apply plugin: "com.android.application"
-+apply plugin: "com.facebook.react"
-
-repositories {
-    mavenCentral()
-}
-
-dependencies {
-    // Other dependencies here
-+   // Note: we intentionally don't specify the version number here as RNGP will take care of it.
-+   // If you don't use the RNGP, you'll have to specify version manually.
-+   implementation("com.facebook.react:react-android")
-+   implementation("com.facebook.react:hermes-android")
-}
-
-+react {
-+   // Needed to enable Autolinking - https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
-+   autolinkLibrariesWithApp()
-+}
-```
-
-Finally, open your application `gradle.properties` files and add the following line (here the <RNTemplateRepoLink href="template/android/gradle.properties">Community template file as reference</RNTemplateRepoLink>):
-
-```diff
-+reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
-+newArchEnabled=true
-+hermesEnabled=true
-```
-
-### Configuring your manifest
-
-First, make sure you have the Internet permission in your `AndroidManifest.xml`:
-
-```diff
-<manifest xmlns:android="http://schemas.android.com/apk/res/android">
-
-+   <uses-permission android:name="android.permission.INTERNET" />
-
-    <application
-      android:name=".MainApplication">
-    </application>
-</manifest>
-```
-
-Then you need to enable [cleartext traffic](https://developer.android.com/training/articles/security-config#CleartextTrafficPermitted) in your **debug** `AndroidManifest.xml`:
-
-```diff
-<?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools">
-
-    <application
-+       android:usesCleartextTraffic="true"
-+       tools:targetApi="28"
-    />
-</manifest>
-```
-
-As usual, here the AndroidManifest.xml file from the Community template to use as a reference: <RNTemplateRepoLink href="template/android/app/src/main/AndroidManifest.xml">main</RNTemplateRepoLink> and <RNTemplateRepoLink href="template/android/app/src/debug/AndroidManifest.xml">debug</RNTemplateRepoLink>.
-
-This is needed as your application will communicate with your local bundler, [Metro](https://metrobundler.dev/), via HTTP.
-
-Make sure you add this only to your **debug** manifest.
-
-## 4. Writing the TypeScript Code
-
-Now we will actually modify the native Android application to integrate React Native.
-
-The first bit of code we will write is the actual React Native code for the new screen that will be integrated into our application.
-
-### Create a `index.js` file
-
-First, create an empty `index.js` file in the root of your React Native project.
-
-`index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `import`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it.
-
-Our index.js should look as follows (here the <RNTemplateRepoLink href="template/index.js">Community template file as reference</RNTemplateRepoLink>):
-
-```js
-import {AppRegistry} from 'react-native';
-import App from './App';
-
-AppRegistry.registerComponent('HelloWorld', () => App);
-```
-
-### Create a `App.tsx` file
-
-Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX](<https://en.wikipedia.org/wiki/JSX_(JavaScript)>) expressions. It contains the root React Native component that we will integrate into our Android application (<RNTemplateRepoLink href="template/App.tsx">link</RNTemplateRepoLink>):
-
-```tsx
-import React from 'react';
-import {
-  SafeAreaView,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  useColorScheme,
-  View,
-} from 'react-native';
-
-import {
-  Colors,
-  DebugInstructions,
-  Header,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
-function App(): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
-
-  return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundStyle.backgroundColor}
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
-        <View
-          style={{
-            backgroundColor: isDarkMode
-              ? Colors.black
-              : Colors.white,
-            padding: 24,
-          }}>
-          <Text style={styles.title}>Step One</Text>
-          <Text>
-            Edit <Text style={styles.bold}>App.tsx</Text> to
-            change this screen and see your edits.
-          </Text>
-          <Text style={styles.title}>See your changes</Text>
-          <ReloadInstructions />
-          <Text style={styles.title}>Debug</Text>
-          <DebugInstructions />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  title: {
-    fontSize: 24,
-    fontWeight: '600',
-  },
-  bold: {
-    fontWeight: '700',
-  },
-});
-
-export default App;
-```
-
-Here is the <RNTemplateRepoLink href="template/App.tsx">Community template file as reference</RNTemplateRepoLink>.
-
-## 5. Integrating with your Android code
-
-We now need to add some native code in order to start the React Native runtime and tell it to render our React components.
-
-### Updating your Application class
-
-First, we need to update your `Application` class to properly initialize React Native as follows:
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-
-<TabItem value="java">
-
-```diff
-package <your-package-here>;
-
-import android.app.Application;
-+import com.facebook.react.PackageList;
-+import com.facebook.react.ReactApplication;
-+import com.facebook.react.ReactHost;
-+import com.facebook.react.ReactNativeHost;
-+import com.facebook.react.ReactPackage;
-+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
-+import com.facebook.react.defaults.DefaultReactHost;
-+import com.facebook.react.defaults.DefaultReactNativeHost;
-+import com.facebook.soloader.SoLoader;
-+import com.facebook.react.soloader.OpenSourceMergedSoMapping
-+import java.util.List;
-
--class MainApplication extends Application {
-+class MainApplication extends Application implements ReactApplication {
-+ @Override
-+ public ReactNativeHost getReactNativeHost() {
-+   return new DefaultReactNativeHost(this) {
-+     @Override
-+     protected List<ReactPackage> getPackages() { return new PackageList(this).getPackages(); }
-+     @Override
-+     protected String getJSMainModuleName() { return "index"; }
-+     @Override
-+     public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; }
-+     @Override
-+     protected boolean isNewArchEnabled() { return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; }
-+     @Override
-+     protected Boolean isHermesEnabled() { return BuildConfig.IS_HERMES_ENABLED; }
-+   };
-+ }
-
-+ @Override
-+ public ReactHost getReactHost() {
-+   return DefaultReactHost.getDefaultReactHost(getApplicationContext(), getReactNativeHost());
-+ }
-
-  @Override
-  public void onCreate() {
-    super.onCreate();
-+   SoLoader.init(this, OpenSourceMergedSoMapping);
-+   if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
-+     DefaultNewArchitectureEntryPoint.load();
-+   }
-  }
-}
-```
-
-</TabItem>
-
-<TabItem value="kotlin">
-
-```diff
-// package <your-package-here>
-
-import android.app.Application
-+import com.facebook.react.PackageList
-+import com.facebook.react.ReactApplication
-+import com.facebook.react.ReactHost
-+import com.facebook.react.ReactNativeHost
-+import com.facebook.react.ReactPackage
-+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
-+import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
-+import com.facebook.react.defaults.DefaultReactNativeHost
-+import com.facebook.soloader.SoLoader
-+import com.facebook.react.soloader.OpenSourceMergedSoMapping
-
--class MainApplication : Application() {
-+class MainApplication : Application(), ReactApplication {
-
-+ override val reactNativeHost: ReactNativeHost =
-+      object : DefaultReactNativeHost(this) {
-+        override fun getPackages(): List<ReactPackage> = PackageList(this).packages
-+        override fun getJSMainModuleName(): String = "index"
-+        override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
-+        override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
-+        override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
-+      }
-
-+ override val reactHost: ReactHost
-+   get() = getDefaultReactHost(applicationContext, reactNativeHost)
-
-  override fun onCreate() {
-    super.onCreate()
-+   SoLoader.init(this, OpenSourceMergedSoMapping)
-+   if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
-+     load()
-+   }
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-As usual, here the <RNTemplateRepoLink href="template/android/app/src/main/java/com/helloworld/MainApplication.kt">`MainApplication.kt` Community template file as reference</RNTemplateRepoLink>.
-
-#### Creating a `ReactActivity`
-
-Finally, we need to create a new `Activity` that will extend `ReactActivity` and host the React Native code. This activity will be responsible for starting the React Native runtime and rendering the React component.
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-
-<TabItem value="java">
-
-```java
-// package <your-package-here>;
-
-import com.facebook.react.ReactActivity;
-import com.facebook.react.ReactActivityDelegate;
-import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
-import com.facebook.react.defaults.DefaultReactActivityDelegate;
-
-public class MyReactActivity extends ReactActivity {
-
-    @Override
-    protected String getMainComponentName() {
-        return "HelloWorld";
-    }
-
-    @Override
-    protected ReactActivityDelegate createReactActivityDelegate() {
-        return new DefaultReactActivityDelegate(this, getMainComponentName(), DefaultNewArchitectureEntryPoint.getFabricEnabled());
-    }
-}
-```
-
-</TabItem>
-
-<TabItem value="kotlin">
-
-```kotlin
-// package <your-package-here>
-
-import com.facebook.react.ReactActivity
-import com.facebook.react.ReactActivityDelegate
-import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
-import com.facebook.react.defaults.DefaultReactActivityDelegate
-
-class MyReactActivity : ReactActivity() {
-
-    override fun getMainComponentName(): String = "HelloWorld"
-
-    override fun createReactActivityDelegate(): ReactActivityDelegate =
-        DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
-}
-```
-
-</TabItem>
-</Tabs>
-
-As usual, here the <RNTemplateRepoLink href="template/android/app/src/main/java/com/helloworld/MainActivity.kt">`MainActivity.kt` Community template file as reference</RNTemplateRepoLink>.
-
-Whenever you create a new Activity, you need to add it to your `AndroidManifest.xml` file. You also need set the theme of `MyReactActivity` to `Theme.AppCompat.Light.NoActionBar` (or to any non-ActionBar theme) as otherwise your application will render an ActionBar on top of your React Native screen:
-
-```diff
-<manifest xmlns:android="http://schemas.android.com/apk/res/android">
-
-    <uses-permission android:name="android.permission.INTERNET" />
-
-    <application
-      android:name=".MainApplication">
-
-+     <activity
-+       android:name=".MyReactActivity"
-+       android:label="@string/app_name"
-+       android:theme="@style/Theme.AppCompat.Light.NoActionBar">
-+     </activity>
-    </application>
-</manifest>
-```
-
-Now your activity is ready to run some JavaScript code.
-
-## 6. Test your integration
-
-You have completed all the basic steps to integrate React Native with your application. Now we will start the [Metro bundler](https://metrobundler.dev/) to build your TypeScript application code into a bundle. Metro's HTTP server shares the bundle from `localhost` on your developer environment to a simulator or device. This allows for [hot reloading](https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading).
-
-First, you need to create a `metro.config.js` file in the root of your project as follows:
-
-```js
-const {getDefaultConfig} = require('@react-native/metro-config');
-module.exports = getDefaultConfig(__dirname);
-```
-
-You can checkout the <RNTemplateRepoLink href="template/metro.config.js">`metro.config.js` file</RNTemplateRepoLink> from the Community template file as reference.
-
-Once you have the configuration file in place, you can run the bundler. Run the following command in the root directory of your project:
-
-<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
-<TabItem value="npm">
-
-```shell
-npm start
-```
-
-</TabItem>
-<TabItem value="yarn">
-
-```shell
-yarn start
-```
-
-</TabItem>
-</Tabs>
-
-Now build and run your Android app as normal.
-
-Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display:
-
-<center><img src="/docs/assets/EmbeddedAppAndroidVideo.gif" width="300" /></center>
-
-### Creating a release build in Android Studio
-
-You can use Android Studio to create your release builds too! It’s as quick as creating release builds of your previously-existing native Android app.
-
-The React Native Gradle Plugin will take care of bundling the JS code inside your APK/App Bundle.
-
-If you're not using Android Studio, you can create a release build with:
-
-```
-cd android
-# For a Release APK
-./gradlew :app:assembleRelease
-# For a Release AAB
-./gradlew :app:bundleRelease
-```
-
-### Now what?
-
-At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native.
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import constants from '@site/core/TabsConstants';
+import CodeBlock from '@theme/CodeBlock';
+import RNTemplateRepoLink from '@site/core/RNTemplateRepoLink';
+import {getTemplateBranchNameForCurrentVersion} from '@site/src/getTemplateBranchNameForCurrentVersion';
+
+## Key Concepts
+
+The keys to integrating React Native components into your Android application are to:
+
+1. Set up the correct directory structure.
+2. Install the necessary NPM dependencies.
+3. Adding React Native to your Gradle configuration.
+4. Writing the TypeScript code for your first React Native screen.
+5. Integrate React Native with your Android code using a ReactActivity.
+6. Testing your integration by running the bundler and seeing your app in action.
+
+## Using the Community Template
+
+While you follow this guide, we suggest you to use the [React Native Community Template](https://github.com/react-native-community/template/) as reference. The template contains a **minimal Android app** and will help you understanding how to integrate React Native into an existing Android app.
+
+## Prerequisites
+
+Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](getting-started-without-a-framework) to configure your development environment for building React Native apps for Android.
+This guide also assumes you're familiar with the basics of Android development such as creating Activities and editing the `AndroidManifest.xml` file.
+
+## 1. Set up directory structure
+
+To ensure a smooth experience, create a new folder for your integrated React Native project, then **move your existing Android project** to the `/android` subfolder.
+
+## 2. Install NPM dependencies
+
+Go to the root directory and run the following command:
+
+<CodeBlock language="bash" title="shell">
+{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/package.json`}
+</CodeBlock>
+
+This will copy the `package.json` <RNTemplateRepoLink href="template/package.json">file from the Community template</RNTemplateRepoLink> to your project.
+
+Next, install the NPM packages by running:
+
+<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
+<TabItem value="npm">
+
+```shell
+npm install
+```
+
+</TabItem>
+<TabItem value="yarn">
+
+```shell
+yarn install
+```
+
+</TabItem>
+</Tabs>
+
+Installation process has created a new `node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
+
+Add `node_modules/` to your `.gitignore` file (here the <RNTemplateRepoLink href="template/_gitignore">Community default one</RNTemplateRepoLink>).
+
+## 3. Adding React Native to your app
+
+### Configuring Gradle
+
+React Native uses the React Native Gradle Plugin to configure your dependencies and project setup.
+
+First, let's edit your `settings.gradle` file by adding those lines (as suggested from the <RNTemplateRepoLink href="template/android/settings.gradle">Community template</RNTemplateRepoLink>):
+
+```groovy
+// Configures the React Native Gradle Settings plugin used for autolinking
+pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
+plugins { id("com.facebook.react.settings") }
+extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
+// If using .gradle.kts files:
+// extensions.configure<com.facebook.react.ReactSettingsExtension> { autolinkLibrariesFromCommand() }
+includeBuild("../node_modules/@react-native/gradle-plugin")
+
+// Include your existing Gradle modules here.
+// include(":app")
+```
+
+Then you need to open your top level `build.gradle` and include this line (as suggested from the <RNTemplateRepoLink href="template/android/build.gradle">Community template</RNTemplateRepoLink>):
+
+```diff
+buildscript {
+    repositories {
+        google()
+        mavenCentral()
+    }
+    dependencies {
+        classpath("com.android.tools.build:gradle:7.3.1")
++       classpath("com.facebook.react:react-native-gradle-plugin")
+    }
+}
+```
+
+This makes sure the React Native Gradle Plugin (RNGP) is available inside your project.
+Finally, add those lines inside your Applications's `build.gradle` file (it's a different `build.gradle` file usually inside your `app` folder - you can use the <RNTemplateRepoLink href="template/android/build.gradle">Community template file as reference</RNTemplateRepoLink>):
+
+```diff
+apply plugin: "com.android.application"
++apply plugin: "com.facebook.react"
+
+repositories {
+    mavenCentral()
+}
+
+dependencies {
+    // Other dependencies here
++   // Note: we intentionally don't specify the version number here as RNGP will take care of it.
++   // If you don't use the RNGP, you'll have to specify version manually.
++   implementation("com.facebook.react:react-android")
++   implementation("com.facebook.react:hermes-android")
+}
+
++react {
++   // Needed to enable Autolinking - https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
++   autolinkLibrariesWithApp()
++}
+```
+
+Finally, open your application `gradle.properties` files and add the following line (here the <RNTemplateRepoLink href="template/android/gradle.properties">Community template file as reference</RNTemplateRepoLink>):
+
+```diff
++reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
++newArchEnabled=true
++hermesEnabled=true
+```
+
+### Configuring your manifest
+
+First, make sure you have the Internet permission in your `AndroidManifest.xml`:
+
+```diff
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
++   <uses-permission android:name="android.permission.INTERNET" />
+
+    <application
+      android:name=".MainApplication">
+    </application>
+</manifest>
+```
+
+Then you need to enable [cleartext traffic](https://developer.android.com/training/articles/security-config#CleartextTrafficPermitted) in your **debug** `AndroidManifest.xml`:
+
+```diff
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <application
++       android:usesCleartextTraffic="true"
++       tools:targetApi="28"
+    />
+</manifest>
+```
+
+As usual, here the AndroidManifest.xml file from the Community template to use as a reference: <RNTemplateRepoLink href="template/android/app/src/main/AndroidManifest.xml">main</RNTemplateRepoLink> and <RNTemplateRepoLink href="template/android/app/src/debug/AndroidManifest.xml">debug</RNTemplateRepoLink>.
+
+This is needed as your application will communicate with your local bundler, [Metro](https://metrobundler.dev/), via HTTP.
+
+Make sure you add this only to your **debug** manifest.
+
+## 4. Writing the TypeScript Code
+
+Now we will actually modify the native Android application to integrate React Native.
+
+The first bit of code we will write is the actual React Native code for the new screen that will be integrated into our application.
+
+### Create a `index.js` file
+
+First, create an empty `index.js` file in the root of your React Native project.
+
+`index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `import`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it.
+
+Our index.js should look as follows (here the <RNTemplateRepoLink href="template/index.js">Community template file as reference</RNTemplateRepoLink>):
+
+```js
+import {AppRegistry} from 'react-native';
+import App from './App';
+
+AppRegistry.registerComponent('HelloWorld', () => App);
+```
+
+### Create a `App.tsx` file
+
+Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX](<https://en.wikipedia.org/wiki/JSX_(JavaScript)>) expressions. It contains the root React Native component that we will integrate into our Android application (<RNTemplateRepoLink href="template/App.tsx">link</RNTemplateRepoLink>):
+
+```tsx
+import {type JSX} from 'react';
+import {
+  SafeAreaView,
+  ScrollView,
+  StatusBar,
+  StyleSheet,
+  Text,
+  useColorScheme,
+  View,
+} from 'react-native';
+import {
+  Colors,
+  DebugInstructions,
+  Header,
+  ReloadInstructions,
+} from 'react-native/Libraries/NewAppScreen';
+
+function App(): JSX.Element {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const backgroundStyle = {
+    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+  };
+
+  return (
+    <SafeAreaView style={backgroundStyle}>
+      <StatusBar
+        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
+        backgroundColor={backgroundStyle.backgroundColor}
+      />
+      <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        style={backgroundStyle}>
+        <Header />
+        <View
+          style={{
+            backgroundColor: isDarkMode
+              ? Colors.black
+              : Colors.white,
+            padding: 24,
+          }}>
+          <Text style={styles.title}>Step One</Text>
+          <Text>
+            Edit <Text style={styles.bold}>App.tsx</Text> to
+            change this screen and see your edits.
+          </Text>
+          <Text style={styles.title}>See your changes</Text>
+          <ReloadInstructions />
+          <Text style={styles.title}>Debug</Text>
+          <DebugInstructions />
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 24,
+    fontWeight: '600',
+  },
+  bold: {
+    fontWeight: '700',
+  },
+});
+
+export default App;
+```
+
+Here is the <RNTemplateRepoLink href="template/App.tsx">Community template file as reference</RNTemplateRepoLink>.
+
+## 5. Integrating with your Android code
+
+We now need to add some native code in order to start the React Native runtime and tell it to render our React components.
+
+### Updating your Application class
+
+First, we need to update your `Application` class to properly initialize React Native as follows:
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+
+<TabItem value="java">
+
+```diff
+package <your-package-here>;
+
+import android.app.Application;
++import com.facebook.react.PackageList;
++import com.facebook.react.ReactApplication;
++import com.facebook.react.ReactHost;
++import com.facebook.react.ReactNativeHost;
++import com.facebook.react.ReactPackage;
++import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
++import com.facebook.react.defaults.DefaultReactHost;
++import com.facebook.react.defaults.DefaultReactNativeHost;
++import com.facebook.soloader.SoLoader;
++import com.facebook.react.soloader.OpenSourceMergedSoMapping
++import java.util.List;
+
+-class MainApplication extends Application {
++class MainApplication extends Application implements ReactApplication {
++ @Override
++ public ReactNativeHost getReactNativeHost() {
++   return new DefaultReactNativeHost(this) {
++     @Override
++     protected List<ReactPackage> getPackages() { return new PackageList(this).getPackages(); }
++     @Override
++     protected String getJSMainModuleName() { return "index"; }
++     @Override
++     public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; }
++     @Override
++     protected boolean isNewArchEnabled() { return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; }
++     @Override
++     protected Boolean isHermesEnabled() { return BuildConfig.IS_HERMES_ENABLED; }
++   };
++ }
+
++ @Override
++ public ReactHost getReactHost() {
++   return DefaultReactHost.getDefaultReactHost(getApplicationContext(), getReactNativeHost());
++ }
+
+  @Override
+  public void onCreate() {
+    super.onCreate();
++   SoLoader.init(this, OpenSourceMergedSoMapping);
++   if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
++     DefaultNewArchitectureEntryPoint.load();
++   }
+  }
+}
+```
+
+</TabItem>
+
+<TabItem value="kotlin">
+
+```diff
+// package <your-package-here>
+
+import android.app.Application
++import com.facebook.react.PackageList
++import com.facebook.react.ReactApplication
++import com.facebook.react.ReactHost
++import com.facebook.react.ReactNativeHost
++import com.facebook.react.ReactPackage
++import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
++import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
++import com.facebook.react.defaults.DefaultReactNativeHost
++import com.facebook.soloader.SoLoader
++import com.facebook.react.soloader.OpenSourceMergedSoMapping
+
+-class MainApplication : Application() {
++class MainApplication : Application(), ReactApplication {
+
++ override val reactNativeHost: ReactNativeHost =
++      object : DefaultReactNativeHost(this) {
++        override fun getPackages(): List<ReactPackage> = PackageList(this).packages
++        override fun getJSMainModuleName(): String = "index"
++        override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
++        override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
++        override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
++      }
+
++ override val reactHost: ReactHost
++   get() = getDefaultReactHost(applicationContext, reactNativeHost)
+
+  override fun onCreate() {
+    super.onCreate()
++   SoLoader.init(this, OpenSourceMergedSoMapping)
++   if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
++     load()
++   }
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+As usual, here the <RNTemplateRepoLink href="template/android/app/src/main/java/com/helloworld/MainApplication.kt">`MainApplication.kt` Community template file as reference</RNTemplateRepoLink>.
+
+#### Creating a `ReactActivity`
+
+Finally, we need to create a new `Activity` that will extend `ReactActivity` and host the React Native code. This activity will be responsible for starting the React Native runtime and rendering the React component.
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+
+<TabItem value="java">
+
+```java
+// package <your-package-here>;
+
+import com.facebook.react.ReactActivity;
+import com.facebook.react.ReactActivityDelegate;
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
+import com.facebook.react.defaults.DefaultReactActivityDelegate;
+
+public class MyReactActivity extends ReactActivity {
+
+    @Override
+    protected String getMainComponentName() {
+        return "HelloWorld";
+    }
+
+    @Override
+    protected ReactActivityDelegate createReactActivityDelegate() {
+        return new DefaultReactActivityDelegate(this, getMainComponentName(), DefaultNewArchitectureEntryPoint.getFabricEnabled());
+    }
+}
+```
+
+</TabItem>
+
+<TabItem value="kotlin">
+
+```kotlin
+// package <your-package-here>
+
+import com.facebook.react.ReactActivity
+import com.facebook.react.ReactActivityDelegate
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
+import com.facebook.react.defaults.DefaultReactActivityDelegate
+
+class MyReactActivity : ReactActivity() {
+
+    override fun getMainComponentName(): String = "HelloWorld"
+
+    override fun createReactActivityDelegate(): ReactActivityDelegate =
+        DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
+}
+```
+
+</TabItem>
+</Tabs>
+
+As usual, here the <RNTemplateRepoLink href="template/android/app/src/main/java/com/helloworld/MainActivity.kt">`MainActivity.kt` Community template file as reference</RNTemplateRepoLink>.
+
+Whenever you create a new Activity, you need to add it to your `AndroidManifest.xml` file. You also need set the theme of `MyReactActivity` to `Theme.AppCompat.Light.NoActionBar` (or to any non-ActionBar theme) as otherwise your application will render an ActionBar on top of your React Native screen:
+
+```diff
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <uses-permission android:name="android.permission.INTERNET" />
+
+    <application
+      android:name=".MainApplication">
+
++     <activity
++       android:name=".MyReactActivity"
++       android:label="@string/app_name"
++       android:theme="@style/Theme.AppCompat.Light.NoActionBar">
++     </activity>
+    </application>
+</manifest>
+```
+
+Now your activity is ready to run some JavaScript code.
+
+## 6. Test your integration
+
+You have completed all the basic steps to integrate React Native with your application. Now we will start the [Metro bundler](https://metrobundler.dev/) to build your TypeScript application code into a bundle. Metro's HTTP server shares the bundle from `localhost` on your developer environment to a simulator or device. This allows for [hot reloading](https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading).
+
+First, you need to create a `metro.config.js` file in the root of your project as follows:
+
+```js
+const {getDefaultConfig} = require('@react-native/metro-config');
+module.exports = getDefaultConfig(__dirname);
+```
+
+You can checkout the <RNTemplateRepoLink href="template/metro.config.js">`metro.config.js` file</RNTemplateRepoLink> from the Community template file as reference.
+
+Once you have the configuration file in place, you can run the bundler. Run the following command in the root directory of your project:
+
+<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
+<TabItem value="npm">
+
+```shell
+npm start
+```
+
+</TabItem>
+<TabItem value="yarn">
+
+```shell
+yarn start
+```
+
+</TabItem>
+</Tabs>
+
+Now build and run your Android app as normal.
+
+Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display:
+
+<center><img src="/docs/assets/EmbeddedAppAndroidVideo.gif" width="300" /></center>
+
+### Creating a release build in Android Studio
+
+You can use Android Studio to create your release builds too! It’s as quick as creating release builds of your previously-existing native Android app.
+
+The React Native Gradle Plugin will take care of bundling the JS code inside your APK/App Bundle.
+
+If you're not using Android Studio, you can create a release build with:
+
+```
+cd android
+# For a Release APK
+./gradlew :app:assembleRelease
+# For a Release AAB
+./gradlew :app:bundleRelease
+```
+
+### Now what?
+
+At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native.
diff --git a/website/versioned_docs/version-0.86/_turbo-native-modules-components.jsx b/website/versioned_docs/version-0.86/_turbo-native-modules-components.jsx
index 1bb5a1b5edb..9b17f011728 100644
--- a/website/versioned_docs/version-0.86/_turbo-native-modules-components.jsx
+++ b/website/versioned_docs/version-0.86/_turbo-native-modules-components.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import IOSContent from './turbo-native-modules-ios.md';
 import AndroidContent from './turbo-native-modules-android.md';
 
diff --git a/website/versioned_docs/version-0.86/accessibilityinfo.md b/website/versioned_docs/version-0.86/accessibilityinfo.md
index af69fbcfec3..c88372497d5 100644
--- a/website/versioned_docs/version-0.86/accessibilityinfo.md
+++ b/website/versioned_docs/version-0.86/accessibilityinfo.md
@@ -1,292 +1,292 @@
----
-id: accessibilityinfo
-title: AccessibilityInfo
----
-
-Sometimes it's useful to know whether or not the device has a screen reader that is currently active. The `AccessibilityInfo` API is designed for this purpose. You can use it to query the current state of the screen reader as well as to register to be notified when the state of the screen reader changes.
-
-## Example
-
-```SnackPlayer name=AccessibilityInfo%20Example&supportedPlatforms=android,ios
-import React, {useState, useEffect} from 'react';
-import {AccessibilityInfo, Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false);
-  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
-
-  useEffect(() => {
-    const reduceMotionChangedSubscription = AccessibilityInfo.addEventListener(
-      'reduceMotionChanged',
-      isReduceMotionEnabled => {
-        setReduceMotionEnabled(isReduceMotionEnabled);
-      },
-    );
-    const screenReaderChangedSubscription = AccessibilityInfo.addEventListener(
-      'screenReaderChanged',
-      isScreenReaderEnabled => {
-        setScreenReaderEnabled(isScreenReaderEnabled);
-      },
-    );
-
-    AccessibilityInfo.isReduceMotionEnabled().then(isReduceMotionEnabled => {
-      setReduceMotionEnabled(isReduceMotionEnabled);
-    });
-    AccessibilityInfo.isScreenReaderEnabled().then(isScreenReaderEnabled => {
-      setScreenReaderEnabled(isScreenReaderEnabled);
-    });
-
-    return () => {
-      reduceMotionChangedSubscription.remove();
-      screenReaderChangedSubscription.remove();
-    };
-  }, []);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.status}>
-          The reduce motion is {reduceMotionEnabled ? 'enabled' : 'disabled'}.
-        </Text>
-        <Text style={styles.status}>
-          The screen reader is {screenReaderEnabled ? 'enabled' : 'disabled'}.
-        </Text>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  status: {
-    margin: 30,
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Methods
-
-### `addEventListener()`
-
-```tsx
-static addEventListener(
-  eventName: AccessibilityChangeEventName | AccessibilityAnnouncementEventName,
-  handler: (
-    event: AccessibilityChangeEvent | AccessibilityAnnouncementFinishedEvent,
-  ) => void,
-): EmitterSubscription;
-```
-
-Add an event handler. Supported events:
-
-| Event name                                                                               | Description                                                                                                                                                                                                                                                                                              |
-| ---------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `accessibilityServiceChanged`<br/><div className="label two-lines android">Android</div> | Fires when some services such as TalkBack, other Android assistive technologies, and third-party accessibility services are enabled. The argument to the event handler is a boolean. The boolean is `true` when a some accessibility services is enabled and `false` otherwise.                          |
-| `announcementFinished`<br/><div className="label two-lines ios">iOS</div>                | Fires when the screen reader has finished making an announcement. The argument to the event handler is a dictionary with these keys:<ul><li>`announcement`: The string announced by the screen reader.</li><li>`success`: A boolean indicating whether the announcement was successfully made.</li></ul> |
-| `boldTextChanged`<br/><div className="label two-lines ios">iOS</div>                     | 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`<br/><div className="label two-lines ios">iOS</div>                    | 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`<br/><div className="label two-lines ios">iOS</div>                 | 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.                                  |
-| `reduceTransparencyChanged`<br/><div className="label two-lines ios">iOS</div>           | 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.                                                                                                         |
-| `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.                                                                                                                          |
-
----
-
-### `announceForAccessibility()`
-
-```tsx
-static announceForAccessibility(announcement: string);
-```
-
-Post a string to be announced by the screen reader.
-
----
-
-### `announceForAccessibilityWithOptions()`
-
-```tsx
-static announceForAccessibilityWithOptions(
-  announcement: string,
-  options: {queue?: boolean},
-);
-```
-
-Post a string to be announced by the screen reader with modification options. By default announcements will interrupt any existing speech, but on iOS they can be queued behind existing speech by setting `queue` to `true` in the options object.
-
-**Parameters:**
-
-| Name                                                              | Type   | Description                                                                                  |
-| ----------------------------------------------------------------- | ------ | -------------------------------------------------------------------------------------------- |
-| announcement <div className="label basic required">Required</div> | string | The string to be announced                                                                   |
-| options <div className="label basic required">Required</div>      | object | `queue` - queue the announcement behind existing speech <div className="label ios">iOS</div> |
-
----
-
-### `getRecommendedTimeoutMillis()` <div className="label android">Android</div>
-
-```tsx
-static getRecommendedTimeoutMillis(originalTimeout: number): Promise<number>;
-```
-
-Gets the timeout in millisecond that the user needs.
-This value is set in "Time to take action (Accessibility timeout)" of "Accessibility" settings.
-
-**Parameters:**
-
-| Name                                                                 | Type   | Description                                                                           |
-| -------------------------------------------------------------------- | ------ | ------------------------------------------------------------------------------------- |
-| originalTimeout <div className="label basic required">Required</div> | number | The timeout to return if "Accessibility timeout" is not set. Specify in milliseconds. |
-
----
-
-### `isAccessibilityServiceEnabled()` <div className="label android">Android</div>
-
-```tsx
-static isAccessibilityServiceEnabled(): Promise<boolean>;
-```
-
-Check whether any accessibility service is enabled. This includes TalkBack but also any third-party accessibility app that may be installed. To only check whether TalkBack is enabled, use [isScreenReaderEnabled](#isscreenreaderenabled). Returns a promise which resolves to a boolean. The result is `true` when some accessibility services is enabled and `false` otherwise.
-
-:::note
-Please use [`isScreenReaderEnabled`](#isscreenreaderenabled) if you only want to check the status of TalkBack.
-:::
-
----
-
-### `isBoldTextEnabled()` <div className="label ios">iOS</div>
-
-```tsx
-static isBoldTextEnabled(): Promise<boolean>:
-```
-
-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()` <div className="label ios">iOS</div>
-
-```tsx
-static isGrayscaleEnabled(): Promise<boolean>;
-```
-
-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()` <div className="label ios">iOS</div>
-
-```tsx
-static isInvertColorsEnabled(): Promise<boolean>;
-```
-
-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()`
-
-```tsx
-static isReduceMotionEnabled(): Promise<boolean>;
-```
-
-Query whether reduce motion is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when reduce motion is enabled and `false` otherwise.
-
----
-
-### `isReduceTransparencyEnabled()` <div className="label ios">iOS</div>
-
-```tsx
-static isReduceTransparencyEnabled(): Promise<boolean>;
-```
-
-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()`
-
-```tsx
-static isScreenReaderEnabled(): Promise<boolean>;
-```
-
-Query whether a screen reader is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when a screen reader is enabled and `false` otherwise.
-
----
-
-### `isHighTextContrastEnabled()` <div className="label android">Android</div>
-
-```tsx
-static isHighTextContrastEnabled(): Promise<boolean>
-```
-
-Query whether high text contrast is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when high text contrast is enabled and `false` otherwise.
-
----
-
-### `isDarkerSystemColorsEnabled()` <div className="label ios">iOS</div>
-
-```tsx
-static isDarkerSystemColorsEnabled(): Promise<boolean>
-```
-
-Query whether dark system colors is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when dark system colors is enabled and `false` otherwise.
-
----
-
-### `prefersCrossFadeTransitions()` <div className="label ios">iOS</div>
-
-```tsx
-static prefersCrossFadeTransitions(): Promise<boolean>;
-```
-
-Query whether reduce motion and prefer cross-fade transitions settings are currently enabled. Returns a promise which resolves to a boolean. The result is `true` when prefer cross-fade transitions is enabled and `false` otherwise.
-
----
-
-### 🗑️ `setAccessibilityFocus()`
-
-:::warning Deprecated
-Prefer using `sendAccessibilityEvent` with eventType `focus` instead.
-:::
-
-```tsx
-static setAccessibilityFocus(reactTag: number);
-```
-
-Set accessibility focus to a React component.
-
-On Android, this calls `UIManager.sendAccessibilityEvent` method with passed `reactTag` and `UIManager.AccessibilityEventTypes.typeViewFocused` arguments.
-
-:::note
-Make sure that any `View` you want to receive the accessibility focus has `accessible={true}`.
-:::
-
----
-
-### `sendAccessibilityEvent()`
-
-```tsx
-static sendAccessibilityEvent(host: HostInstance, eventType: AccessibilityEventTypes);
-```
-
-Imperatively trigger an accessibility event on a React component, like changing the focused element for a screen reader.
-
-:::note
-Make sure that any `View` you want to receive the accessibility focus has `accessible={true}`.
-:::
-
-| Name                                                           | Type                    | Description                                                                                                            |
-| -------------------------------------------------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------- |
-| host <div className="label basic required">Required</div>      | HostInstance            | The component ref to send the event to.                                                                                |
-| eventType <div className="label basic required">Required</div> | AccessibilityEventTypes | One of `'click'` (Android only), `'focus'`, `'viewHoverEnter'` (Android only), or `'windowStateChange'` (Android only) |
+---
+id: accessibilityinfo
+title: AccessibilityInfo
+---
+
+Sometimes it's useful to know whether or not the device has a screen reader that is currently active. The `AccessibilityInfo` API is designed for this purpose. You can use it to query the current state of the screen reader as well as to register to be notified when the state of the screen reader changes.
+
+## Example
+
+```SnackPlayer name=AccessibilityInfo%20Example&supportedPlatforms=android,ios
+import {useState, useEffect} from 'react';
+import {AccessibilityInfo, Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false);
+  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
+
+  useEffect(() => {
+    const reduceMotionChangedSubscription = AccessibilityInfo.addEventListener(
+      'reduceMotionChanged',
+      isReduceMotionEnabled => {
+        setReduceMotionEnabled(isReduceMotionEnabled);
+      },
+    );
+    const screenReaderChangedSubscription = AccessibilityInfo.addEventListener(
+      'screenReaderChanged',
+      isScreenReaderEnabled => {
+        setScreenReaderEnabled(isScreenReaderEnabled);
+      },
+    );
+
+    AccessibilityInfo.isReduceMotionEnabled().then(isReduceMotionEnabled => {
+      setReduceMotionEnabled(isReduceMotionEnabled);
+    });
+    AccessibilityInfo.isScreenReaderEnabled().then(isScreenReaderEnabled => {
+      setScreenReaderEnabled(isScreenReaderEnabled);
+    });
+
+    return () => {
+      reduceMotionChangedSubscription.remove();
+      screenReaderChangedSubscription.remove();
+    };
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.status}>
+          The reduce motion is {reduceMotionEnabled ? 'enabled' : 'disabled'}.
+        </Text>
+        <Text style={styles.status}>
+          The screen reader is {screenReaderEnabled ? 'enabled' : 'disabled'}.
+        </Text>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  status: {
+    margin: 30,
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+  eventName: AccessibilityChangeEventName | AccessibilityAnnouncementEventName,
+  handler: (
+    event: AccessibilityChangeEvent | AccessibilityAnnouncementFinishedEvent,
+  ) => void,
+): EmitterSubscription;
+```
+
+Add an event handler. Supported events:
+
+| Event name                                                                               | Description                                                                                                                                                                                                                                                                                              |
+| ---------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `accessibilityServiceChanged`<br/><div className="label two-lines android">Android</div> | Fires when some services such as TalkBack, other Android assistive technologies, and third-party accessibility services are enabled. The argument to the event handler is a boolean. The boolean is `true` when a some accessibility services is enabled and `false` otherwise.                          |
+| `announcementFinished`<br/><div className="label two-lines ios">iOS</div>                | Fires when the screen reader has finished making an announcement. The argument to the event handler is a dictionary with these keys:<ul><li>`announcement`: The string announced by the screen reader.</li><li>`success`: A boolean indicating whether the announcement was successfully made.</li></ul> |
+| `boldTextChanged`<br/><div className="label two-lines ios">iOS</div>                     | 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`<br/><div className="label two-lines ios">iOS</div>                    | 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`<br/><div className="label two-lines ios">iOS</div>                 | 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.                                  |
+| `reduceTransparencyChanged`<br/><div className="label two-lines ios">iOS</div>           | 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.                                                                                                         |
+| `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.                                                                                                                          |
+
+---
+
+### `announceForAccessibility()`
+
+```tsx
+static announceForAccessibility(announcement: string);
+```
+
+Post a string to be announced by the screen reader.
+
+---
+
+### `announceForAccessibilityWithOptions()`
+
+```tsx
+static announceForAccessibilityWithOptions(
+  announcement: string,
+  options: {queue?: boolean},
+);
+```
+
+Post a string to be announced by the screen reader with modification options. By default announcements will interrupt any existing speech, but on iOS they can be queued behind existing speech by setting `queue` to `true` in the options object.
+
+**Parameters:**
+
+| Name                                                              | Type   | Description                                                                                  |
+| ----------------------------------------------------------------- | ------ | -------------------------------------------------------------------------------------------- |
+| announcement <div className="label basic required">Required</div> | string | The string to be announced                                                                   |
+| options <div className="label basic required">Required</div>      | object | `queue` - queue the announcement behind existing speech <div className="label ios">iOS</div> |
+
+---
+
+### `getRecommendedTimeoutMillis()` <div className="label android">Android</div>
+
+```tsx
+static getRecommendedTimeoutMillis(originalTimeout: number): Promise<number>;
+```
+
+Gets the timeout in millisecond that the user needs.
+This value is set in "Time to take action (Accessibility timeout)" of "Accessibility" settings.
+
+**Parameters:**
+
+| Name                                                                 | Type   | Description                                                                           |
+| -------------------------------------------------------------------- | ------ | ------------------------------------------------------------------------------------- |
+| originalTimeout <div className="label basic required">Required</div> | number | The timeout to return if "Accessibility timeout" is not set. Specify in milliseconds. |
+
+---
+
+### `isAccessibilityServiceEnabled()` <div className="label android">Android</div>
+
+```tsx
+static isAccessibilityServiceEnabled(): Promise<boolean>;
+```
+
+Check whether any accessibility service is enabled. This includes TalkBack but also any third-party accessibility app that may be installed. To only check whether TalkBack is enabled, use [isScreenReaderEnabled](#isscreenreaderenabled). Returns a promise which resolves to a boolean. The result is `true` when some accessibility services is enabled and `false` otherwise.
+
+:::note
+Please use [`isScreenReaderEnabled`](#isscreenreaderenabled) if you only want to check the status of TalkBack.
+:::
+
+---
+
+### `isBoldTextEnabled()` <div className="label ios">iOS</div>
+
+```tsx
+static isBoldTextEnabled(): Promise<boolean>:
+```
+
+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()` <div className="label ios">iOS</div>
+
+```tsx
+static isGrayscaleEnabled(): Promise<boolean>;
+```
+
+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()` <div className="label ios">iOS</div>
+
+```tsx
+static isInvertColorsEnabled(): Promise<boolean>;
+```
+
+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()`
+
+```tsx
+static isReduceMotionEnabled(): Promise<boolean>;
+```
+
+Query whether reduce motion is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when reduce motion is enabled and `false` otherwise.
+
+---
+
+### `isReduceTransparencyEnabled()` <div className="label ios">iOS</div>
+
+```tsx
+static isReduceTransparencyEnabled(): Promise<boolean>;
+```
+
+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()`
+
+```tsx
+static isScreenReaderEnabled(): Promise<boolean>;
+```
+
+Query whether a screen reader is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when a screen reader is enabled and `false` otherwise.
+
+---
+
+### `isHighTextContrastEnabled()` <div className="label android">Android</div>
+
+```tsx
+static isHighTextContrastEnabled(): Promise<boolean>
+```
+
+Query whether high text contrast is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when high text contrast is enabled and `false` otherwise.
+
+---
+
+### `isDarkerSystemColorsEnabled()` <div className="label ios">iOS</div>
+
+```tsx
+static isDarkerSystemColorsEnabled(): Promise<boolean>
+```
+
+Query whether dark system colors is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when dark system colors is enabled and `false` otherwise.
+
+---
+
+### `prefersCrossFadeTransitions()` <div className="label ios">iOS</div>
+
+```tsx
+static prefersCrossFadeTransitions(): Promise<boolean>;
+```
+
+Query whether reduce motion and prefer cross-fade transitions settings are currently enabled. Returns a promise which resolves to a boolean. The result is `true` when prefer cross-fade transitions is enabled and `false` otherwise.
+
+---
+
+### 🗑️ `setAccessibilityFocus()`
+
+:::warning Deprecated
+Prefer using `sendAccessibilityEvent` with eventType `focus` instead.
+:::
+
+```tsx
+static setAccessibilityFocus(reactTag: number);
+```
+
+Set accessibility focus to a React component.
+
+On Android, this calls `UIManager.sendAccessibilityEvent` method with passed `reactTag` and `UIManager.AccessibilityEventTypes.typeViewFocused` arguments.
+
+:::note
+Make sure that any `View` you want to receive the accessibility focus has `accessible={true}`.
+:::
+
+---
+
+### `sendAccessibilityEvent()`
+
+```tsx
+static sendAccessibilityEvent(host: HostInstance, eventType: AccessibilityEventTypes);
+```
+
+Imperatively trigger an accessibility event on a React component, like changing the focused element for a screen reader.
+
+:::note
+Make sure that any `View` you want to receive the accessibility focus has `accessible={true}`.
+:::
+
+| Name                                                           | Type                    | Description                                                                                                            |
+| -------------------------------------------------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| host <div className="label basic required">Required</div>      | HostInstance            | The component ref to send the event to.                                                                                |
+| eventType <div className="label basic required">Required</div> | AccessibilityEventTypes | One of `'click'` (Android only), `'focus'`, `'viewHoverEnter'` (Android only), or `'windowStateChange'` (Android only) |
diff --git a/website/versioned_docs/version-0.86/actionsheetios.md b/website/versioned_docs/version-0.86/actionsheetios.md
index 30d1d6afea5..dc2269301d2 100644
--- a/website/versioned_docs/version-0.86/actionsheetios.md
+++ b/website/versioned_docs/version-0.86/actionsheetios.md
@@ -1,144 +1,144 @@
----
-id: actionsheetios
-title: ActionSheetIOS
----
-
-Displays native to iOS [Action Sheet](https://developer.apple.com/design/human-interface-guidelines/action-sheets) component.
-
-## Example
-
-```SnackPlayer name=ActionSheetIOS%20Example&supportedPlatforms=ios
-import React, {useState} from 'react';
-import {ActionSheetIOS, Button, StyleSheet, Text} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [result, setResult] = useState('🔮');
-
-  const onPress = () =>
-    ActionSheetIOS.showActionSheetWithOptions(
-      {
-        options: ['Cancel', 'Generate number', 'Reset'],
-        destructiveButtonIndex: 2,
-        cancelButtonIndex: 0,
-        userInterfaceStyle: 'dark',
-      },
-      buttonIndex => {
-        if (buttonIndex === 0) {
-          // cancel action
-        } else if (buttonIndex === 1) {
-          setResult(String(Math.floor(Math.random() * 100) + 1));
-        } else if (buttonIndex === 2) {
-          setResult('🔮');
-        }
-      },
-    );
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.result}>{result}</Text>
-        <Button onPress={onPress} title="Show Action Sheet" />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  result: {
-    fontSize: 64,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
-# Reference
-
-## Methods
-
-### `showActionSheetWithOptions()`
-
-```tsx
-static showActionSheetWithOptions: (
-  options: ActionSheetIOSOptions,
-  callback: (buttonIndex: number) => void,
-);
-```
-
-Display an iOS action sheet. The `options` object must contain one or more of:
-
-- `options` (array of strings) - a list of button titles (required)
-- `cancelButtonIndex` (int) - index of cancel button in `options`
-- `cancelButtonTintColor` (string) - the [color](colors) used for the change the text color of the cancel button
-- `destructiveButtonIndex` (int or array of ints) - indices of destructive buttons in `options`
-- `title` (string) - a title to show above the action sheet
-- `message` (string) - a message to show below the title
-- `anchor` (number) - the node to which the action sheet should be anchored (used for iPad)
-- `tintColor` (string) - the [color](colors) used for non-destructive button titles
-- `disabledButtonIndices` (array of numbers) - a list of button indices which should be disabled
-- `userInterfaceStyle` (string) - the interface style used for the action sheet, can be set to `light` or `dark`, otherwise the default system style will be used
-
-The 'callback' function takes one parameter, the zero-based index of the selected item.
-
-Minimal example:
-
-```tsx
-ActionSheetIOS.showActionSheetWithOptions(
-  {
-    options: ['Cancel', 'Remove'],
-    destructiveButtonIndex: 1,
-    cancelButtonIndex: 0,
-  },
-  buttonIndex => {
-    if (buttonIndex === 1) {
-      /* destructive action */
-    }
-  },
-);
-```
-
----
-
-### `dismissActionSheet()`
-
-```tsx
-static dismissActionSheet();
-```
-
-Dismisses the most upper iOS action sheet presented, if no action sheet is present a warning is displayed.
-
----
-
-### `showShareActionSheetWithOptions()`
-
-```tsx
-static showShareActionSheetWithOptions: (
-  options: ShareActionSheetIOSOptions,
-  failureCallback: (error: Error) => void,
-  successCallback: (success: boolean, method: string) => void,
-);
-```
-
-Display the iOS share sheet. The `options` object should contain one or both of `message` and `url` and can additionally have a `subject` or `excludedActivityTypes`:
-
-- `url` (string) - a URL to share
-- `message` (string) - a message to share
-- `subject` (string) - a subject for the message
-- `excludedActivityTypes` (array) - the activities to exclude from the ActionSheet
-
-:::note
-If `url` points to a local file, or is a base64-encoded uri, the file it points to will be loaded and shared directly. In this way, you can share images, videos, PDF files, etc. If `url` points to a remote file or address it must conform to URL format as described in [RFC 2396](https://www.ietf.org/rfc/rfc2396.txt). For example, a web URL without a proper protocol (HTTP/HTTPS) will not be shared.
-:::
-
-The 'failureCallback' function takes one parameter, an error object. The only property defined on this object is an optional `stack` property of type `string`.
-
-The 'successCallback' function takes two parameters:
-
-- a boolean value signifying success or failure
-- a string that, in the case of success, indicates the method of sharing
+---
+id: actionsheetios
+title: ActionSheetIOS
+---
+
+Displays native to iOS [Action Sheet](https://developer.apple.com/design/human-interface-guidelines/action-sheets) component.
+
+## Example
+
+```SnackPlayer name=ActionSheetIOS%20Example&supportedPlatforms=ios
+import {useState} from 'react';
+import {ActionSheetIOS, Button, StyleSheet, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [result, setResult] = useState('🔮');
+
+  const onPress = () =>
+    ActionSheetIOS.showActionSheetWithOptions(
+      {
+        options: ['Cancel', 'Generate number', 'Reset'],
+        destructiveButtonIndex: 2,
+        cancelButtonIndex: 0,
+        userInterfaceStyle: 'dark',
+      },
+      buttonIndex => {
+        if (buttonIndex === 0) {
+          // cancel action
+        } else if (buttonIndex === 1) {
+          setResult(String(Math.floor(Math.random() * 100) + 1));
+        } else if (buttonIndex === 2) {
+          setResult('🔮');
+        }
+      },
+    );
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.result}>{result}</Text>
+        <Button onPress={onPress} title="Show Action Sheet" />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  result: {
+    fontSize: 64,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+# Reference
+
+## Methods
+
+### `showActionSheetWithOptions()`
+
+```tsx
+static showActionSheetWithOptions: (
+  options: ActionSheetIOSOptions,
+  callback: (buttonIndex: number) => void,
+);
+```
+
+Display an iOS action sheet. The `options` object must contain one or more of:
+
+- `options` (array of strings) - a list of button titles (required)
+- `cancelButtonIndex` (int) - index of cancel button in `options`
+- `cancelButtonTintColor` (string) - the [color](colors) used for the change the text color of the cancel button
+- `destructiveButtonIndex` (int or array of ints) - indices of destructive buttons in `options`
+- `title` (string) - a title to show above the action sheet
+- `message` (string) - a message to show below the title
+- `anchor` (number) - the node to which the action sheet should be anchored (used for iPad)
+- `tintColor` (string) - the [color](colors) used for non-destructive button titles
+- `disabledButtonIndices` (array of numbers) - a list of button indices which should be disabled
+- `userInterfaceStyle` (string) - the interface style used for the action sheet, can be set to `light` or `dark`, otherwise the default system style will be used
+
+The 'callback' function takes one parameter, the zero-based index of the selected item.
+
+Minimal example:
+
+```tsx
+ActionSheetIOS.showActionSheetWithOptions(
+  {
+    options: ['Cancel', 'Remove'],
+    destructiveButtonIndex: 1,
+    cancelButtonIndex: 0,
+  },
+  buttonIndex => {
+    if (buttonIndex === 1) {
+      /* destructive action */
+    }
+  },
+);
+```
+
+---
+
+### `dismissActionSheet()`
+
+```tsx
+static dismissActionSheet();
+```
+
+Dismisses the most upper iOS action sheet presented, if no action sheet is present a warning is displayed.
+
+---
+
+### `showShareActionSheetWithOptions()`
+
+```tsx
+static showShareActionSheetWithOptions: (
+  options: ShareActionSheetIOSOptions,
+  failureCallback: (error: Error) => void,
+  successCallback: (success: boolean, method: string) => void,
+);
+```
+
+Display the iOS share sheet. The `options` object should contain one or both of `message` and `url` and can additionally have a `subject` or `excludedActivityTypes`:
+
+- `url` (string) - a URL to share
+- `message` (string) - a message to share
+- `subject` (string) - a subject for the message
+- `excludedActivityTypes` (array) - the activities to exclude from the ActionSheet
+
+:::note
+If `url` points to a local file, or is a base64-encoded uri, the file it points to will be loaded and shared directly. In this way, you can share images, videos, PDF files, etc. If `url` points to a remote file or address it must conform to URL format as described in [RFC 2396](https://www.ietf.org/rfc/rfc2396.txt). For example, a web URL without a proper protocol (HTTP/HTTPS) will not be shared.
+:::
+
+The 'failureCallback' function takes one parameter, an error object. The only property defined on this object is an optional `stack` property of type `string`.
+
+The 'successCallback' function takes two parameters:
+
+- a boolean value signifying success or failure
+- a string that, in the case of success, indicates the method of sharing
diff --git a/website/versioned_docs/version-0.86/activityindicator.md b/website/versioned_docs/version-0.86/activityindicator.md
index c9d03b73021..9b1445cbf5e 100644
--- a/website/versioned_docs/version-0.86/activityindicator.md
+++ b/website/versioned_docs/version-0.86/activityindicator.md
@@ -8,7 +8,6 @@ Displays a circular loading indicator.
 ## Example
 
 ```SnackPlayer name=ActivityIndicator%20Example
-import React from 'react';
 import {ActivityIndicator, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.86/alert.md b/website/versioned_docs/version-0.86/alert.md
index c80b62fb7a6..78b1c412e66 100644
--- a/website/versioned_docs/version-0.86/alert.md
+++ b/website/versioned_docs/version-0.86/alert.md
@@ -12,7 +12,6 @@ This is an API that works both on Android and iOS and can show static alerts. Al
 ## Example
 
 ```SnackPlayer name=Alert%20Example&supportedPlatforms=ios,android
-import React from 'react';
 import {StyleSheet, Button, Alert} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -81,7 +80,6 @@ The cancel event can be handled by providing an `onDismiss` callback property in
 ### Example <div className="label android">Android</div>
 
 ```SnackPlayer name=Alert%20Android%20Dissmissable%20Example&supportedPlatforms=android
-import React from 'react';
 import {StyleSheet, Button, Alert} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.86/animated.md b/website/versioned_docs/version-0.86/animated.md
index d4ba867028b..fce79ffaf57 100644
--- a/website/versioned_docs/version-0.86/animated.md
+++ b/website/versioned_docs/version-0.86/animated.md
@@ -16,7 +16,6 @@ Don't modify the animated value directly. You can use the [`useRef` Hook](https:
 The following example contains a `View` which will fade in and fade out based on the animated value `fadeAnim`
 
 ```SnackPlayer name=Animated%20Example
-import React from 'react';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 import {
   Animated,
diff --git a/website/versioned_docs/version-0.86/animatedvaluexy.md b/website/versioned_docs/version-0.86/animatedvaluexy.md
index 6cb44808ccf..8135c12354a 100644
--- a/website/versioned_docs/version-0.86/animatedvaluexy.md
+++ b/website/versioned_docs/version-0.86/animatedvaluexy.md
@@ -1,227 +1,227 @@
----
-id: animatedvaluexy
-title: Animated.ValueXY
----
-
-2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal [`Animated.Value`](animatedvalue), but multiplexed. Contains two regular `Animated.Value`s under the hood.
-
-## Example
-
-```SnackPlayer name=Animated.ValueXY%20Example
-import React, {useRef} from 'react';
-import {Animated, PanResponder, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const DraggableView = () => {
-  const pan = useRef(new Animated.ValueXY()).current;
-
-  const panResponder = PanResponder.create({
-    onStartShouldSetPanResponder: () => true,
-    onPanResponderMove: Animated.event([
-      null,
-      {
-        dx: pan.x, // x,y are Animated.Value
-        dy: pan.y,
-      },
-    ]),
-    onPanResponderRelease: () => {
-      Animated.spring(
-        pan, // Auto-multiplexed
-        {toValue: {x: 0, y: 0}, useNativeDriver: true}, // Back to zero
-      ).start();
-    },
-  });
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Animated.View
-          {...panResponder.panHandlers}
-          style={[pan.getLayout(), styles.box]}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  box: {
-    backgroundColor: '#61dafb',
-    width: 80,
-    height: 80,
-    borderRadius: 4,
-  },
-});
-
-export default DraggableView;
-```
-
----
-
-# Reference
-
-## Methods
-
-### `setValue()`
-
-```tsx
-setValue(value: {x: number; y: number});
-```
-
-Directly set the value. This will stop any animations running on the value and update all the bound properties.
-
-**Parameters:**
-
-| Name  | Type                     | Required | Description |
-| ----- | ------------------------ | -------- | ----------- |
-| value | `{x: number; y: number}` | Yes      | Value       |
-
----
-
-### `setOffset()`
-
-```tsx
-setOffset(offset: {x: number; y: number});
-```
-
-Sets an offset that is applied on top of whatever value is set, whether via `setValue`, an animation, or `Animated.event`. Useful for compensating things like the start of a pan gesture.
-
-**Parameters:**
-
-| Name   | Type                     | Required | Description  |
-| ------ | ------------------------ | -------- | ------------ |
-| offset | `{x: number; y: number}` | Yes      | Offset value |
-
----
-
-### `flattenOffset()`
-
-```tsx
-flattenOffset();
-```
-
-Merges the offset value into the base value and resets the offset to zero. The final output of the value is unchanged.
-
----
-
-### `extractOffset()`
-
-```tsx
-extractOffset();
-```
-
-Sets the offset value to the base value, and resets the base value to zero. The final output of the value is unchanged.
-
----
-
-### `addListener()`
-
-```tsx
-addListener(callback: (value: {x: number; y: number}) => void);
-```
-
-Adds an asynchronous listener to the value so you can observe updates from animations. This is useful because there is no way to synchronously read the value because it might be driven natively.
-
-Returns a string that serves as an identifier for the listener.
-
-**Parameters:**
-
-| Name     | Type     | Required | Description                                                                                 |
-| -------- | -------- | -------- | ------------------------------------------------------------------------------------------- |
-| callback | function | Yes      | The callback function which will receive an object with a `value` key set to the new value. |
-
----
-
-### `removeListener()`
-
-```tsx
-removeListener(id: string);
-```
-
-Unregister a listener. The `id` param shall match the identifier previously returned by `addListener()`.
-
-**Parameters:**
-
-| Name | Type   | Required | Description                        |
-| ---- | ------ | -------- | ---------------------------------- |
-| id   | string | Yes      | Id for the listener being removed. |
-
----
-
-### `removeAllListeners()`
-
-```tsx
-removeAllListeners();
-```
-
-Remove all registered listeners.
-
----
-
-### `stopAnimation()`
-
-```tsx
-stopAnimation(callback?: (value: {x: number; y: number}) => void);
-```
-
-Stops any running animation or tracking. `callback` is invoked with the final value after stopping the animation, which is useful for updating state to match the animation position with layout.
-
-**Parameters:**
-
-| Name     | Type     | Required | Description                                   |
-| -------- | -------- | -------- | --------------------------------------------- |
-| callback | function | No       | A function that will receive the final value. |
-
----
-
-### `resetAnimation()`
-
-```tsx
-resetAnimation(callback?: (value: {x: number; y: number}) => void);
-```
-
-Stops any animation and resets the value to its original.
-
-**Parameters:**
-
-| Name     | Type     | Required | Description                                      |
-| -------- | -------- | -------- | ------------------------------------------------ |
-| callback | function | No       | A function that will receive the original value. |
-
----
-
-### `getLayout()`
-
-```tsx
-getLayout(): {left: Animated.Value, top: Animated.Value};
-```
-
-Converts `{x, y}` into `{left, top}` for use in style, e.g.
-
-```tsx
-style={this.state.anim.getLayout()}
-```
-
----
-
-### `getTranslateTransform()`
-
-```tsx
-getTranslateTransform(): [
-  {translateX: Animated.Value},
-  {translateY: Animated.Value},
-];
-```
-
-Converts `{x, y}` into a useable translation transform, e.g.
-
-```tsx
-style={{
-  transform: this.state.anim.getTranslateTransform()
-}}
-```
+---
+id: animatedvaluexy
+title: Animated.ValueXY
+---
+
+2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal [`Animated.Value`](animatedvalue), but multiplexed. Contains two regular `Animated.Value`s under the hood.
+
+## Example
+
+```SnackPlayer name=Animated.ValueXY%20Example
+import {useRef} from 'react';
+import {Animated, PanResponder, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const DraggableView = () => {
+  const pan = useRef(new Animated.ValueXY()).current;
+
+  const panResponder = PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onPanResponderMove: Animated.event([
+      null,
+      {
+        dx: pan.x, // x,y are Animated.Value
+        dy: pan.y,
+      },
+    ]),
+    onPanResponderRelease: () => {
+      Animated.spring(
+        pan, // Auto-multiplexed
+        {toValue: {x: 0, y: 0}, useNativeDriver: true}, // Back to zero
+      ).start();
+    },
+  });
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Animated.View
+          {...panResponder.panHandlers}
+          style={[pan.getLayout(), styles.box]}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  box: {
+    backgroundColor: '#61dafb',
+    width: 80,
+    height: 80,
+    borderRadius: 4,
+  },
+});
+
+export default DraggableView;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `setValue()`
+
+```tsx
+setValue(value: {x: number; y: number});
+```
+
+Directly set the value. This will stop any animations running on the value and update all the bound properties.
+
+**Parameters:**
+
+| Name  | Type                     | Required | Description |
+| ----- | ------------------------ | -------- | ----------- |
+| value | `{x: number; y: number}` | Yes      | Value       |
+
+---
+
+### `setOffset()`
+
+```tsx
+setOffset(offset: {x: number; y: number});
+```
+
+Sets an offset that is applied on top of whatever value is set, whether via `setValue`, an animation, or `Animated.event`. Useful for compensating things like the start of a pan gesture.
+
+**Parameters:**
+
+| Name   | Type                     | Required | Description  |
+| ------ | ------------------------ | -------- | ------------ |
+| offset | `{x: number; y: number}` | Yes      | Offset value |
+
+---
+
+### `flattenOffset()`
+
+```tsx
+flattenOffset();
+```
+
+Merges the offset value into the base value and resets the offset to zero. The final output of the value is unchanged.
+
+---
+
+### `extractOffset()`
+
+```tsx
+extractOffset();
+```
+
+Sets the offset value to the base value, and resets the base value to zero. The final output of the value is unchanged.
+
+---
+
+### `addListener()`
+
+```tsx
+addListener(callback: (value: {x: number; y: number}) => void);
+```
+
+Adds an asynchronous listener to the value so you can observe updates from animations. This is useful because there is no way to synchronously read the value because it might be driven natively.
+
+Returns a string that serves as an identifier for the listener.
+
+**Parameters:**
+
+| Name     | Type     | Required | Description                                                                                 |
+| -------- | -------- | -------- | ------------------------------------------------------------------------------------------- |
+| callback | function | Yes      | The callback function which will receive an object with a `value` key set to the new value. |
+
+---
+
+### `removeListener()`
+
+```tsx
+removeListener(id: string);
+```
+
+Unregister a listener. The `id` param shall match the identifier previously returned by `addListener()`.
+
+**Parameters:**
+
+| Name | Type   | Required | Description                        |
+| ---- | ------ | -------- | ---------------------------------- |
+| id   | string | Yes      | Id for the listener being removed. |
+
+---
+
+### `removeAllListeners()`
+
+```tsx
+removeAllListeners();
+```
+
+Remove all registered listeners.
+
+---
+
+### `stopAnimation()`
+
+```tsx
+stopAnimation(callback?: (value: {x: number; y: number}) => void);
+```
+
+Stops any running animation or tracking. `callback` is invoked with the final value after stopping the animation, which is useful for updating state to match the animation position with layout.
+
+**Parameters:**
+
+| Name     | Type     | Required | Description                                   |
+| -------- | -------- | -------- | --------------------------------------------- |
+| callback | function | No       | A function that will receive the final value. |
+
+---
+
+### `resetAnimation()`
+
+```tsx
+resetAnimation(callback?: (value: {x: number; y: number}) => void);
+```
+
+Stops any animation and resets the value to its original.
+
+**Parameters:**
+
+| Name     | Type     | Required | Description                                      |
+| -------- | -------- | -------- | ------------------------------------------------ |
+| callback | function | No       | A function that will receive the original value. |
+
+---
+
+### `getLayout()`
+
+```tsx
+getLayout(): {left: Animated.Value, top: Animated.Value};
+```
+
+Converts `{x, y}` into `{left, top}` for use in style, e.g.
+
+```tsx
+style={this.state.anim.getLayout()}
+```
+
+---
+
+### `getTranslateTransform()`
+
+```tsx
+getTranslateTransform(): [
+  {translateX: Animated.Value},
+  {translateY: Animated.Value},
+];
+```
+
+Converts `{x, y}` into a useable translation transform, e.g.
+
+```tsx
+style={{
+  transform: this.state.anim.getTranslateTransform()
+}}
+```
diff --git a/website/versioned_docs/version-0.86/animations.md b/website/versioned_docs/version-0.86/animations.md
index ccdaa5a32bb..956e96dc2c5 100644
--- a/website/versioned_docs/version-0.86/animations.md
+++ b/website/versioned_docs/version-0.86/animations.md
@@ -1,673 +1,672 @@
----
-id: animations
-title: Animations
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface.
-
-React Native provides two complementary animation systems: [`Animated`](animations#animated-api) for granular and interactive control of specific values, and [`LayoutAnimation`](animations#layoutanimation-api) for animated global layout transactions.
-
-## `Animated` API
-
-The [`Animated`](animated) API is designed to concisely express a wide variety of interesting animation and interaction patterns in a very performant way. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and `start`/`stop` methods to control time-based animation execution.
-
-`Animated` exports six animatable component types: `View`, `Text`, `Image`, `ScrollView`, `FlatList` and `SectionList`, but you can also create your own using `Animated.createAnimatedComponent()`.
-
-For example, a container view that fades in when it is mounted may look like this:
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer ext=js
-import React, {useEffect, useRef} from 'react';
-import {Animated, Text, View} from 'react-native';
-
-const FadeInView = props => {
-  const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
-
-  useEffect(() => {
-    Animated.timing(fadeAnim, {
-      toValue: 1,
-      duration: 10000,
-      useNativeDriver: true,
-    }).start();
-  }, [fadeAnim]);
-
-  return (
-    <Animated.View // Special animatable View
-      style={{
-        ...props.style,
-        opacity: fadeAnim, // Bind opacity to animated value
-      }}>
-      {props.children}
-    </Animated.View>
-  );
-};
-
-// You can then use your `FadeInView` in place of a `View` in your components:
-export default () => {
-  return (
-    <View
-      style={{
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}>
-      <FadeInView
-        style={{
-          width: 250,
-          height: 50,
-          backgroundColor: 'powderblue',
-        }}>
-        <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>
-          Fading in
-        </Text>
-      </FadeInView>
-    </View>
-  );
-};
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer ext=tsx
-import React, {useEffect, useRef, type PropsWithChildren} from 'react';
-import {Animated, Text, View, type ViewStyle} from 'react-native';
-
-type FadeInViewProps = PropsWithChildren<{style: ViewStyle}>;
-
-const FadeInView: React.FC<FadeInViewProps> = props => {
-  const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
-
-  useEffect(() => {
-    Animated.timing(fadeAnim, {
-      toValue: 1,
-      duration: 10000,
-      useNativeDriver: true,
-    }).start();
-  }, [fadeAnim]);
-
-  return (
-    <Animated.View // Special animatable View
-      style={{
-        ...props.style,
-        opacity: fadeAnim, // Bind opacity to animated value
-      }}>
-      {props.children}
-    </Animated.View>
-  );
-};
-
-// You can then use your `FadeInView` in place of a `View` in your components:
-export default () => {
-  return (
-    <View
-      style={{
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}>
-      <FadeInView
-        style={{
-          width: 250,
-          height: 50,
-          backgroundColor: 'powderblue',
-        }}>
-        <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>
-          Fading in
-        </Text>
-      </FadeInView>
-    </View>
-  );
-};
-```
-
-</TabItem>
-</Tabs>
-
-Let's break down what's happening here. In the `FadeInView` render method, a new `Animated.Value` called `fadeAnim` is initialized with `useRef`. The opacity property on the `View` is mapped to this animated value. Behind the scenes, the numeric value is extracted and used to set opacity.
-
-When the component mounts, the opacity is set to 0. Then, an easing animation is started on the `fadeAnim` animated value, which will update all of its dependent mappings (in this case, only the opacity) on each frame as the value animates to the final value of 1.
-
-This is done in an optimized way that is faster than calling `setState` and re-rendering. Because the entire configuration is declarative, we will be able to implement further optimizations that serialize the configuration and runs the animation on a high-priority thread.
-
-### Configuring animations
-
-Animations are heavily configurable. Custom and predefined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.
-
-`Animated` provides several animation types, the most commonly used one being [`Animated.timing()`](animated#timing). It supports animating a value over time using one of various predefined easing functions, or you can use your own. Easing functions are typically used in animation to convey gradual acceleration and deceleration of objects.
-
-By default, `timing` will use an easeInOut curve that conveys gradual acceleration to full speed and concludes by gradually decelerating to a stop. You can specify a different easing function by passing an `easing` parameter. Custom `duration` or even a `delay` before the animation starts is also supported.
-
-For example, if we want to create a 2-second long animation of an object that slightly backs up before moving to its final position:
-
-```tsx
-Animated.timing(this.state.xPosition, {
-  toValue: 100,
-  easing: Easing.back(),
-  duration: 2000,
-  useNativeDriver: true,
-}).start();
-```
-
-Take a look at the [Configuring animations](animated#configuring-animations) section of the `Animated` API reference to learn more about all the config parameters supported by the built-in animations.
-
-### Composing animations
-
-Animations can be combined and played in sequence or in parallel. Sequential animations can play immediately after the previous animation has finished, or they can start after a specified delay. The `Animated` API provides several methods, such as `sequence()` and `delay()`, each of which take an array of animations to execute and automatically calls `start()`/`stop()` as needed.
-
-For example, the following animation coasts to a stop, then it springs back while twirling in parallel:
-
-```tsx
-Animated.sequence([
-  // decay, then spring to start and twirl
-  Animated.decay(position, {
-    // coast to a stop
-    velocity: {x: gestureState.vx, y: gestureState.vy}, // velocity from gesture release
-    deceleration: 0.997,
-    useNativeDriver: true,
-  }),
-  Animated.parallel([
-    // after decay, in parallel:
-    Animated.spring(position, {
-      toValue: {x: 0, y: 0}, // return to start
-      useNativeDriver: true,
-    }),
-    Animated.timing(twirl, {
-      // and twirl
-      toValue: 360,
-      useNativeDriver: true,
-    }),
-  ]),
-]).start(); // start the sequence group
-```
-
-If one animation is stopped or interrupted, then all other animations in the group are also stopped. `Animated.parallel` has a `stopTogether` option that can be set to `false` to disable this.
-
-You can find a full list of composition methods in the [Composing animations](animated#composing-animations) section of the `Animated` API reference.
-
-### Combining animated values
-
-You can [combine two animated values](animated#combining-animated-values) via addition, multiplication, division, or modulo to make a new animated value.
-
-There are some cases where an animated value needs to invert another animated value for calculation. An example is inverting a scale (2x --> 0.5x):
-
-```tsx
-const a = new Animated.Value(1);
-const b = Animated.divide(1, a);
-
-Animated.spring(a, {
-  toValue: 2,
-  useNativeDriver: true,
-}).start();
-```
-
-### Interpolation
-
-Each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.
-
-A basic mapping to convert a 0-1 range to a 0-100 range would be:
-
-```tsx
-value.interpolate({
-  inputRange: [0, 1],
-  outputRange: [0, 100],
-});
-```
-
-For example, you may want to think about your `Animated.Value` as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying `style` from the example above like so:
-
-```tsx
-  style={{
-    opacity: this.state.fadeAnim, // Binds directly
-    transform: [{
-      translateY: this.state.fadeAnim.interpolate({
-        inputRange: [0, 1],
-        outputRange: [150, 0]  // 0 : 150, 0.5 : 75, 1 : 0
-      }),
-    }],
-  }}
-```
-
-[`interpolate()`](animated#interpolate) supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
-
-```tsx
-value.interpolate({
-  inputRange: [-300, -100, 0, 100, 101],
-  outputRange: [300, 0, 1, 0, 0],
-});
-```
-
-Which would map like so:
-
-```
-Input | Output
-------|-------
-  -400|    450
-  -300|    300
-  -200|    150
-  -100|      0
-   -50|    0.5
-     0|      1
-    50|    0.5
-   100|      0
-   101|      0
-   200|      0
-```
-
-`interpolate()` also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
-
-```tsx
-value.interpolate({
-  inputRange: [0, 360],
-  outputRange: ['0deg', '360deg'],
-});
-```
-
-`interpolate()` also supports arbitrary easing functions, many of which are already implemented in the [`Easing`](easing) module. `interpolate()` also has configurable behavior for extrapolating the `outputRange`. You can set the extrapolation by setting the `extrapolate`, `extrapolateLeft`, or `extrapolateRight` options. The default value is `extend` but you can use `clamp` to prevent the output value from exceeding `outputRange`.
-
-### Tracking dynamic values
-
-Animated values can also track other values by setting the `toValue` of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a `spring()` pinned on another animated value, or with `timing()` and a `duration` of 0 for rigid tracking. They can also be composed with interpolations:
-
-```tsx
-Animated.spring(follower, {toValue: leader}).start();
-Animated.timing(opacity, {
-  toValue: pan.x.interpolate({
-    inputRange: [0, 300],
-    outputRange: [1, 0],
-  }),
-  useNativeDriver: true,
-}).start();
-```
-
-The `leader` and `follower` animated values would be implemented using `Animated.ValueXY()`. `ValueXY` is a handy way to deal with 2D interactions, such as panning or dragging. It is a basic wrapper that contains two `Animated.Value` instances and some helper functions that call through to them, making `ValueXY` a drop-in replacement for `Value` in many cases. It allows us to track both x and y values in the example above.
-
-### Tracking gestures
-
-Gestures, like panning or scrolling, and other events can map directly to animated values using [`Animated.event`](animated#event). This is done with a structured map syntax so that values can be extracted from complex event objects. The first level is an array to allow mapping across multiple args, and that array contains nested objects.
-
-For example, when working with horizontal scrolling gestures, you would do the following in order to map `event.nativeEvent.contentOffset.x` to `scrollX` (an `Animated.Value`):
-
-```tsx
- onScroll={Animated.event(
-   // scrollX = e.nativeEvent.contentOffset.x
-   [{nativeEvent: {
-        contentOffset: {
-          x: scrollX
-        }
-      }
-    }]
- )}
-```
-
-The following example implements a horizontal scrolling carousel where the scroll position indicators are animated using the `Animated.event` used in the `ScrollView`
-
-#### ScrollView with Animated Event Example
-
-```SnackPlayer name=Animated&supportedPlatforms=ios,android
-import React from 'react';
-import {
-  ScrollView,
-  Text,
-  StyleSheet,
-  View,
-  ImageBackground,
-  Animated,
-  useWindowDimensions,
-  useAnimatedValue,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const images = new Array(6).fill(
-  'https://images.unsplash.com/photo-1556740749-887f6717d7e4',
-);
-
-const App = () => {
-  const scrollX = useAnimatedValue(0);
-
-  const {width: windowWidth} = useWindowDimensions();
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.scrollContainer}>
-          <ScrollView
-            horizontal={true}
-            pagingEnabled
-            showsHorizontalScrollIndicator={false}
-            onScroll={Animated.event([
-              {
-                nativeEvent: {
-                  contentOffset: {
-                    x: scrollX,
-                  },
-                },
-              },
-            ])}
-            scrollEventThrottle={1}>
-            {images.map((image, imageIndex) => {
-              return (
-                <View
-                  style={{width: windowWidth, height: 250}}
-                  key={imageIndex}>
-                  <ImageBackground source={{uri: image}} style={styles.card}>
-                    <View style={styles.textContainer}>
-                      <Text style={styles.infoText}>
-                        {'Image - ' + imageIndex}
-                      </Text>
-                    </View>
-                  </ImageBackground>
-                </View>
-              );
-            })}
-          </ScrollView>
-          <View style={styles.indicatorContainer}>
-            {images.map((image, imageIndex) => {
-              const width = scrollX.interpolate({
-                inputRange: [
-                  windowWidth * (imageIndex - 1),
-                  windowWidth * imageIndex,
-                  windowWidth * (imageIndex + 1),
-                ],
-                outputRange: [8, 16, 8],
-                extrapolate: 'clamp',
-              });
-              return (
-                <Animated.View
-                  key={imageIndex}
-                  style={[styles.normalDot, {width}]}
-                />
-              );
-            })}
-          </View>
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  scrollContainer: {
-    height: 300,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  card: {
-    flex: 1,
-    marginVertical: 4,
-    marginHorizontal: 16,
-    borderRadius: 5,
-    overflow: 'hidden',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  textContainer: {
-    backgroundColor: 'rgba(0,0,0, 0.7)',
-    paddingHorizontal: 24,
-    paddingVertical: 8,
-    borderRadius: 5,
-  },
-  infoText: {
-    color: 'white',
-    fontSize: 16,
-    fontWeight: 'bold',
-  },
-  normalDot: {
-    height: 8,
-    width: 8,
-    borderRadius: 4,
-    backgroundColor: 'silver',
-    marginHorizontal: 4,
-  },
-  indicatorContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-
-export default App;
-```
-
-When using `PanResponder`, you could use the following code to extract the x and y positions from `gestureState.dx` and `gestureState.dy`. We use a `null` in the first position of the array, as we are only interested in the second argument passed to the `PanResponder` handler, which is the `gestureState`.
-
-```tsx
-onPanResponderMove={Animated.event(
-  [null, // ignore the native event
-  // extract dx and dy from gestureState
-  // like 'pan.x = gestureState.dx, pan.y = gestureState.dy'
-  {dx: pan.x, dy: pan.y}
-])}
-```
-
-#### PanResponder with Animated Event Example
-
-```SnackPlayer name=Animated
-import React, {useRef} from 'react';
-import {Animated, View, StyleSheet, PanResponder, Text} from 'react-native';
-
-const App = () => {
-  const pan = useRef(new Animated.ValueXY()).current;
-  const panResponder = useRef(
-    PanResponder.create({
-      onMoveShouldSetPanResponder: () => true,
-      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
-      onPanResponderRelease: () => {
-        Animated.spring(pan, {
-          toValue: {x: 0, y: 0},
-          useNativeDriver: true,
-        }).start();
-      },
-    }),
-  ).current;
-
-  return (
-    <View style={styles.container}>
-      <Text style={styles.titleText}>Drag & Release this box!</Text>
-      <Animated.View
-        style={{
-          transform: [{translateX: pan.x}, {translateY: pan.y}],
-        }}
-        {...panResponder.panHandlers}>
-        <View style={styles.box} />
-      </Animated.View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  titleText: {
-    fontSize: 14,
-    lineHeight: 24,
-    fontWeight: 'bold',
-  },
-  box: {
-    height: 150,
-    width: 150,
-    backgroundColor: 'blue',
-    borderRadius: 5,
-  },
-});
-
-export default App;
-```
-
-### Responding to the current animation value
-
-You may notice that there is no clear way to read the current value while animating. This is because the value may only be known in the native runtime due to optimizations. If you need to run JavaScript in response to the current value, there are two approaches:
-
-- `spring.stopAnimation(callback)` will stop the animation and invoke `callback` with the final value. This is useful when making gesture transitions.
-- `spring.addListener(callback)` will invoke `callback` asynchronously while the animation is running, providing a recent value. This is useful for triggering state changes, for example snapping a bobble to a new option as the user drags it closer, because these larger state changes are less sensitive to a few frames of lag compared to continuous gestures like panning which need to run at 60 fps.
-
-`Animated` is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Check out `Animated.Value.addListener` as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.
-
-### Using the native driver
-
-The `Animated` API is designed to be serializable. By using the [native driver](/blog/2017/02/14/using-native-driver-for-animated), we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.
-
-Using the native driver for normal animations can be accomplished by setting `useNativeDriver: true` in animation config when starting it. Animations without a `useNativeDriver` property will default to false for legacy reasons, but emit a warning (and typechecking error in TypeScript).
-
-```tsx
-Animated.timing(this.state.animatedValue, {
-  toValue: 1,
-  duration: 500,
-  useNativeDriver: true, // <-- Set this to true
-}).start();
-```
-
-Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
-
-The native driver also works with `Animated.event`. This is especially useful for animations that follow the scroll position as without the native driver, the animation will always run a frame behind the gesture due to the async nature of React Native.
-
-```tsx
-<Animated.ScrollView // <-- Use the Animated ScrollView wrapper
-  onScroll={Animated.event(
-    [
-      {
-        nativeEvent: {
-          contentOffset: {y: this.state.animatedValue},
-        },
-      },
-    ],
-    {useNativeDriver: true}, // <-- Set this to true
-  )}>
-  {content}
-</Animated.ScrollView>
-```
-
-You can see the native driver in action by running the [RNTester app](https://github.com/facebook/react-native/blob/main/packages/rn-tester/), then loading the Native Animated Example. You can also take a look at the [source code](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js) to learn how these examples were produced.
-
-#### Caveats
-
-Not everything you can do with `Animated` is currently supported by the native driver. The main limitation is that you can only animate non-layout properties: things like `transform` and `opacity` will work, but Flexbox and position properties will not. When using `Animated.event`, it will only work with direct events and not bubbling events. This means it does not work with `PanResponder` but does work with things like `ScrollView#onScroll`.
-
-When an animation is running, it can prevent `VirtualizedList` components from rendering more rows. If you need to run a long or looping animation while the user is scrolling through a list, you can use `isInteraction: false` in your animation's config to prevent this issue.
-
-### Bear in mind
-
-While using transform styles such as `rotateY`, `rotateX`, and others ensure the transform style `perspective` is in place. At this time some animations may not render on Android without it. Example below.
-
-```tsx
-<Animated.View
-  style={{
-    transform: [
-      {scale: this.state.scale},
-      {rotateY: this.state.rotateY},
-      {perspective: 1000}, // without this line this Animation will not render on Android while working fine on iOS
-    ],
-  }}
-/>
-```
-
-### Additional examples
-
-The RNTester app has various examples of `Animated` in use:
-
-- [AnimatedGratuitousApp](https://github.com/facebook/react-native/tree/main/packages/rn-tester/js/examples/AnimatedGratuitousApp)
-- [NativeAnimationsExample](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js)
-
-## `LayoutAnimation` API
-
-`LayoutAnimation` allows you to globally configure `create` and `update` animations that will be used for all views in the next render/layout cycle. This is useful for doing Flexbox layout updates without bothering to measure or calculate specific properties in order to animate them directly, and is especially useful when layout changes may affect ancestors, for example a "see more" expansion that also increases the size of the parent and pushes down the row below which would otherwise require explicit coordination between the components in order to animate them all in sync.
-
-Note that although `LayoutAnimation` is very powerful and can be quite useful, it provides much less control than `Animated` and other animation libraries, so you may need to use another approach if you can't get `LayoutAnimation` to do what you want.
-
-Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`:
-
-```tsx
-UIManager.setLayoutAnimationEnabledExperimental(true);
-```
-
-```SnackPlayer name=LayoutAnimations
-import React, {useState} from 'react';
-import {
-  NativeModules,
-  LayoutAnimation,
-  Text,
-  TouchableOpacity,
-  StyleSheet,
-  View,
-} from 'react-native';
-
-const {UIManager} = NativeModules;
-
-UIManager.setLayoutAnimationEnabledExperimental &&
-  UIManager.setLayoutAnimationEnabledExperimental(true);
-
-export default function App() {
-  const [state, setState] = useState({
-    w: 100,
-    h: 100,
-  });
-
-  const onPress = () => {
-    // Animate the update
-    LayoutAnimation.spring();
-    setState({w: state.w + 15, h: state.h + 15});
-  };
-
-  return (
-    <View style={styles.container}>
-      <View style={[styles.box, {width: state.w, height: state.h}]} />
-      <TouchableOpacity onPress={onPress}>
-        <View style={styles.button}>
-          <Text style={styles.buttonText}>Press me!</Text>
-        </View>
-      </TouchableOpacity>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  box: {
-    width: 200,
-    height: 200,
-    backgroundColor: 'red',
-  },
-  button: {
-    backgroundColor: 'black',
-    paddingHorizontal: 20,
-    paddingVertical: 15,
-    marginTop: 15,
-  },
-  buttonText: {
-    color: '#fff',
-    fontWeight: 'bold',
-  },
-});
-```
-
-This example uses a preset value, you can customize the animations as you need, see [LayoutAnimation.js](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/LayoutAnimation/LayoutAnimation.js) for more information.
-
-## Additional notes
-
-### `requestAnimationFrame`
-
-`requestAnimationFrame` is a polyfill from the browser that you might be familiar with. It accepts a function as its only argument and calls that function before the next repaint. It is an essential building block for animations that underlies all of the JavaScript-based animation APIs. In general, you shouldn't need to call this yourself - the animation APIs will manage frame updates for you.
-
-### `setNativeProps`
-
-As mentioned [in the Direct Manipulation section](legacy/direct-manipulation), `setNativeProps` allows us to modify properties of native-backed components (components that are actually backed by native views, unlike composite components) directly, without having to `setState` and re-render the component hierarchy.
-
-We could use this in the Rebound example to update the scale - this might be helpful if the component that we are updating is deeply nested and hasn't been optimized with `shouldComponentUpdate`.
-
-If you find your animations with dropping frames (performing below 60 frames per second), look into using `setNativeProps` or `shouldComponentUpdate` to optimize them. Or you could run the animations on the UI thread rather than the JavaScript thread [with the useNativeDriver option](/blog/2017/02/14/using-native-driver-for-animated). You may also want to defer any computationally intensive work until after animations are complete, using the [InteractionManager](interactionmanager). You can monitor the frame rate by using the In-App Dev Menu "FPS Monitor" tool.
+---
+id: animations
+title: Animations
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface.
+
+React Native provides two complementary animation systems: [`Animated`](animations#animated-api) for granular and interactive control of specific values, and [`LayoutAnimation`](animations#layoutanimation-api) for animated global layout transactions.
+
+## `Animated` API
+
+The [`Animated`](animated) API is designed to concisely express a wide variety of interesting animation and interaction patterns in a very performant way. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and `start`/`stop` methods to control time-based animation execution.
+
+`Animated` exports six animatable component types: `View`, `Text`, `Image`, `ScrollView`, `FlatList` and `SectionList`, but you can also create your own using `Animated.createAnimatedComponent()`.
+
+For example, a container view that fades in when it is mounted may look like this:
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer ext=js
+import {useEffect, useRef} from 'react';
+import {Animated, Text, View} from 'react-native';
+
+const FadeInView = props => {
+  const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
+
+  useEffect(() => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 10000,
+      useNativeDriver: true,
+    }).start();
+  }, [fadeAnim]);
+
+  return (
+    <Animated.View // Special animatable View
+      style={{
+        ...props.style,
+        opacity: fadeAnim, // Bind opacity to animated value
+      }}>
+      {props.children}
+    </Animated.View>
+  );
+};
+
+// You can then use your `FadeInView` in place of a `View` in your components:
+export default () => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+      <FadeInView
+        style={{
+          width: 250,
+          height: 50,
+          backgroundColor: 'powderblue',
+        }}>
+        <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>
+          Fading in
+        </Text>
+      </FadeInView>
+    </View>
+  );
+};
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer ext=tsx
+import {useEffect, useRef, type PropsWithChildren, type FC} from 'react';
+import {Animated, Text, View, type ViewStyle} from 'react-native';
+
+type FadeInViewProps = PropsWithChildren<{style: ViewStyle}>;
+
+const FadeInView: FC<FadeInViewProps> = props => {
+  const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
+
+  useEffect(() => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 10000,
+      useNativeDriver: true,
+    }).start();
+  }, [fadeAnim]);
+
+  return (
+    <Animated.View // Special animatable View
+      style={{
+        ...props.style,
+        opacity: fadeAnim, // Bind opacity to animated value
+      }}>
+      {props.children}
+    </Animated.View>
+  );
+};
+
+// You can then use your `FadeInView` in place of a `View` in your components:
+export default () => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+      <FadeInView
+        style={{
+          width: 250,
+          height: 50,
+          backgroundColor: 'powderblue',
+        }}>
+        <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>
+          Fading in
+        </Text>
+      </FadeInView>
+    </View>
+  );
+};
+```
+
+</TabItem>
+</Tabs>
+
+Let's break down what's happening here. In the `FadeInView` render method, a new `Animated.Value` called `fadeAnim` is initialized with `useRef`. The opacity property on the `View` is mapped to this animated value. Behind the scenes, the numeric value is extracted and used to set opacity.
+
+When the component mounts, the opacity is set to 0. Then, an easing animation is started on the `fadeAnim` animated value, which will update all of its dependent mappings (in this case, only the opacity) on each frame as the value animates to the final value of 1.
+
+This is done in an optimized way that is faster than calling `setState` and re-rendering. Because the entire configuration is declarative, we will be able to implement further optimizations that serialize the configuration and runs the animation on a high-priority thread.
+
+### Configuring animations
+
+Animations are heavily configurable. Custom and predefined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.
+
+`Animated` provides several animation types, the most commonly used one being [`Animated.timing()`](animated#timing). It supports animating a value over time using one of various predefined easing functions, or you can use your own. Easing functions are typically used in animation to convey gradual acceleration and deceleration of objects.
+
+By default, `timing` will use an easeInOut curve that conveys gradual acceleration to full speed and concludes by gradually decelerating to a stop. You can specify a different easing function by passing an `easing` parameter. Custom `duration` or even a `delay` before the animation starts is also supported.
+
+For example, if we want to create a 2-second long animation of an object that slightly backs up before moving to its final position:
+
+```tsx
+Animated.timing(this.state.xPosition, {
+  toValue: 100,
+  easing: Easing.back(),
+  duration: 2000,
+  useNativeDriver: true,
+}).start();
+```
+
+Take a look at the [Configuring animations](animated#configuring-animations) section of the `Animated` API reference to learn more about all the config parameters supported by the built-in animations.
+
+### Composing animations
+
+Animations can be combined and played in sequence or in parallel. Sequential animations can play immediately after the previous animation has finished, or they can start after a specified delay. The `Animated` API provides several methods, such as `sequence()` and `delay()`, each of which take an array of animations to execute and automatically calls `start()`/`stop()` as needed.
+
+For example, the following animation coasts to a stop, then it springs back while twirling in parallel:
+
+```tsx
+Animated.sequence([
+  // decay, then spring to start and twirl
+  Animated.decay(position, {
+    // coast to a stop
+    velocity: {x: gestureState.vx, y: gestureState.vy}, // velocity from gesture release
+    deceleration: 0.997,
+    useNativeDriver: true,
+  }),
+  Animated.parallel([
+    // after decay, in parallel:
+    Animated.spring(position, {
+      toValue: {x: 0, y: 0}, // return to start
+      useNativeDriver: true,
+    }),
+    Animated.timing(twirl, {
+      // and twirl
+      toValue: 360,
+      useNativeDriver: true,
+    }),
+  ]),
+]).start(); // start the sequence group
+```
+
+If one animation is stopped or interrupted, then all other animations in the group are also stopped. `Animated.parallel` has a `stopTogether` option that can be set to `false` to disable this.
+
+You can find a full list of composition methods in the [Composing animations](animated#composing-animations) section of the `Animated` API reference.
+
+### Combining animated values
+
+You can [combine two animated values](animated#combining-animated-values) via addition, multiplication, division, or modulo to make a new animated value.
+
+There are some cases where an animated value needs to invert another animated value for calculation. An example is inverting a scale (2x --> 0.5x):
+
+```tsx
+const a = new Animated.Value(1);
+const b = Animated.divide(1, a);
+
+Animated.spring(a, {
+  toValue: 2,
+  useNativeDriver: true,
+}).start();
+```
+
+### Interpolation
+
+Each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.
+
+A basic mapping to convert a 0-1 range to a 0-100 range would be:
+
+```tsx
+value.interpolate({
+  inputRange: [0, 1],
+  outputRange: [0, 100],
+});
+```
+
+For example, you may want to think about your `Animated.Value` as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying `style` from the example above like so:
+
+```tsx
+  style={{
+    opacity: this.state.fadeAnim, // Binds directly
+    transform: [{
+      translateY: this.state.fadeAnim.interpolate({
+        inputRange: [0, 1],
+        outputRange: [150, 0]  // 0 : 150, 0.5 : 75, 1 : 0
+      }),
+    }],
+  }}
+```
+
+[`interpolate()`](animated#interpolate) supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
+
+```tsx
+value.interpolate({
+  inputRange: [-300, -100, 0, 100, 101],
+  outputRange: [300, 0, 1, 0, 0],
+});
+```
+
+Which would map like so:
+
+```
+Input | Output
+------|-------
+  -400|    450
+  -300|    300
+  -200|    150
+  -100|      0
+   -50|    0.5
+     0|      1
+    50|    0.5
+   100|      0
+   101|      0
+   200|      0
+```
+
+`interpolate()` also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
+
+```tsx
+value.interpolate({
+  inputRange: [0, 360],
+  outputRange: ['0deg', '360deg'],
+});
+```
+
+`interpolate()` also supports arbitrary easing functions, many of which are already implemented in the [`Easing`](easing) module. `interpolate()` also has configurable behavior for extrapolating the `outputRange`. You can set the extrapolation by setting the `extrapolate`, `extrapolateLeft`, or `extrapolateRight` options. The default value is `extend` but you can use `clamp` to prevent the output value from exceeding `outputRange`.
+
+### Tracking dynamic values
+
+Animated values can also track other values by setting the `toValue` of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a `spring()` pinned on another animated value, or with `timing()` and a `duration` of 0 for rigid tracking. They can also be composed with interpolations:
+
+```tsx
+Animated.spring(follower, {toValue: leader}).start();
+Animated.timing(opacity, {
+  toValue: pan.x.interpolate({
+    inputRange: [0, 300],
+    outputRange: [1, 0],
+  }),
+  useNativeDriver: true,
+}).start();
+```
+
+The `leader` and `follower` animated values would be implemented using `Animated.ValueXY()`. `ValueXY` is a handy way to deal with 2D interactions, such as panning or dragging. It is a basic wrapper that contains two `Animated.Value` instances and some helper functions that call through to them, making `ValueXY` a drop-in replacement for `Value` in many cases. It allows us to track both x and y values in the example above.
+
+### Tracking gestures
+
+Gestures, like panning or scrolling, and other events can map directly to animated values using [`Animated.event`](animated#event). This is done with a structured map syntax so that values can be extracted from complex event objects. The first level is an array to allow mapping across multiple args, and that array contains nested objects.
+
+For example, when working with horizontal scrolling gestures, you would do the following in order to map `event.nativeEvent.contentOffset.x` to `scrollX` (an `Animated.Value`):
+
+```tsx
+ onScroll={Animated.event(
+   // scrollX = e.nativeEvent.contentOffset.x
+   [{nativeEvent: {
+        contentOffset: {
+          x: scrollX
+        }
+      }
+    }]
+ )}
+```
+
+The following example implements a horizontal scrolling carousel where the scroll position indicators are animated using the `Animated.event` used in the `ScrollView`
+
+#### ScrollView with Animated Event Example
+
+```SnackPlayer name=Animated&supportedPlatforms=ios,android
+import {
+  ScrollView,
+  Text,
+  StyleSheet,
+  View,
+  ImageBackground,
+  Animated,
+  useWindowDimensions,
+  useAnimatedValue,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const images = new Array(6).fill(
+  'https://images.unsplash.com/photo-1556740749-887f6717d7e4',
+);
+
+const App = () => {
+  const scrollX = useAnimatedValue(0);
+
+  const {width: windowWidth} = useWindowDimensions();
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.scrollContainer}>
+          <ScrollView
+            horizontal={true}
+            pagingEnabled
+            showsHorizontalScrollIndicator={false}
+            onScroll={Animated.event([
+              {
+                nativeEvent: {
+                  contentOffset: {
+                    x: scrollX,
+                  },
+                },
+              },
+            ])}
+            scrollEventThrottle={1}>
+            {images.map((image, imageIndex) => {
+              return (
+                <View
+                  style={{width: windowWidth, height: 250}}
+                  key={imageIndex}>
+                  <ImageBackground source={{uri: image}} style={styles.card}>
+                    <View style={styles.textContainer}>
+                      <Text style={styles.infoText}>
+                        {'Image - ' + imageIndex}
+                      </Text>
+                    </View>
+                  </ImageBackground>
+                </View>
+              );
+            })}
+          </ScrollView>
+          <View style={styles.indicatorContainer}>
+            {images.map((image, imageIndex) => {
+              const width = scrollX.interpolate({
+                inputRange: [
+                  windowWidth * (imageIndex - 1),
+                  windowWidth * imageIndex,
+                  windowWidth * (imageIndex + 1),
+                ],
+                outputRange: [8, 16, 8],
+                extrapolate: 'clamp',
+              });
+              return (
+                <Animated.View
+                  key={imageIndex}
+                  style={[styles.normalDot, {width}]}
+                />
+              );
+            })}
+          </View>
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  scrollContainer: {
+    height: 300,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  card: {
+    flex: 1,
+    marginVertical: 4,
+    marginHorizontal: 16,
+    borderRadius: 5,
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  textContainer: {
+    backgroundColor: 'rgba(0,0,0, 0.7)',
+    paddingHorizontal: 24,
+    paddingVertical: 8,
+    borderRadius: 5,
+  },
+  infoText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  normalDot: {
+    height: 8,
+    width: 8,
+    borderRadius: 4,
+    backgroundColor: 'silver',
+    marginHorizontal: 4,
+  },
+  indicatorContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default App;
+```
+
+When using `PanResponder`, you could use the following code to extract the x and y positions from `gestureState.dx` and `gestureState.dy`. We use a `null` in the first position of the array, as we are only interested in the second argument passed to the `PanResponder` handler, which is the `gestureState`.
+
+```tsx
+onPanResponderMove={Animated.event(
+  [null, // ignore the native event
+  // extract dx and dy from gestureState
+  // like 'pan.x = gestureState.dx, pan.y = gestureState.dy'
+  {dx: pan.x, dy: pan.y}
+])}
+```
+
+#### PanResponder with Animated Event Example
+
+```SnackPlayer name=Animated
+import {useRef} from 'react';
+import {Animated, View, StyleSheet, PanResponder, Text} from 'react-native';
+
+const App = () => {
+  const pan = useRef(new Animated.ValueXY()).current;
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
+      onPanResponderRelease: () => {
+        Animated.spring(pan, {
+          toValue: {x: 0, y: 0},
+          useNativeDriver: true,
+        }).start();
+      },
+    }),
+  ).current;
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.titleText}>Drag & Release this box!</Text>
+      <Animated.View
+        style={{
+          transform: [{translateX: pan.x}, {translateY: pan.y}],
+        }}
+        {...panResponder.panHandlers}>
+        <View style={styles.box} />
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  titleText: {
+    fontSize: 14,
+    lineHeight: 24,
+    fontWeight: 'bold',
+  },
+  box: {
+    height: 150,
+    width: 150,
+    backgroundColor: 'blue',
+    borderRadius: 5,
+  },
+});
+
+export default App;
+```
+
+### Responding to the current animation value
+
+You may notice that there is no clear way to read the current value while animating. This is because the value may only be known in the native runtime due to optimizations. If you need to run JavaScript in response to the current value, there are two approaches:
+
+- `spring.stopAnimation(callback)` will stop the animation and invoke `callback` with the final value. This is useful when making gesture transitions.
+- `spring.addListener(callback)` will invoke `callback` asynchronously while the animation is running, providing a recent value. This is useful for triggering state changes, for example snapping a bobble to a new option as the user drags it closer, because these larger state changes are less sensitive to a few frames of lag compared to continuous gestures like panning which need to run at 60 fps.
+
+`Animated` is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Check out `Animated.Value.addListener` as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.
+
+### Using the native driver
+
+The `Animated` API is designed to be serializable. By using the [native driver](/blog/2017/02/14/using-native-driver-for-animated), we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.
+
+Using the native driver for normal animations can be accomplished by setting `useNativeDriver: true` in animation config when starting it. Animations without a `useNativeDriver` property will default to false for legacy reasons, but emit a warning (and typechecking error in TypeScript).
+
+```tsx
+Animated.timing(this.state.animatedValue, {
+  toValue: 1,
+  duration: 500,
+  useNativeDriver: true, // <-- Set this to true
+}).start();
+```
+
+Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
+
+The native driver also works with `Animated.event`. This is especially useful for animations that follow the scroll position as without the native driver, the animation will always run a frame behind the gesture due to the async nature of React Native.
+
+```tsx
+<Animated.ScrollView // <-- Use the Animated ScrollView wrapper
+  onScroll={Animated.event(
+    [
+      {
+        nativeEvent: {
+          contentOffset: {y: this.state.animatedValue},
+        },
+      },
+    ],
+    {useNativeDriver: true}, // <-- Set this to true
+  )}>
+  {content}
+</Animated.ScrollView>
+```
+
+You can see the native driver in action by running the [RNTester app](https://github.com/facebook/react-native/blob/main/packages/rn-tester/), then loading the Native Animated Example. You can also take a look at the [source code](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js) to learn how these examples were produced.
+
+#### Caveats
+
+Not everything you can do with `Animated` is currently supported by the native driver. The main limitation is that you can only animate non-layout properties: things like `transform` and `opacity` will work, but Flexbox and position properties will not. When using `Animated.event`, it will only work with direct events and not bubbling events. This means it does not work with `PanResponder` but does work with things like `ScrollView#onScroll`.
+
+When an animation is running, it can prevent `VirtualizedList` components from rendering more rows. If you need to run a long or looping animation while the user is scrolling through a list, you can use `isInteraction: false` in your animation's config to prevent this issue.
+
+### Bear in mind
+
+While using transform styles such as `rotateY`, `rotateX`, and others ensure the transform style `perspective` is in place. At this time some animations may not render on Android without it. Example below.
+
+```tsx
+<Animated.View
+  style={{
+    transform: [
+      {scale: this.state.scale},
+      {rotateY: this.state.rotateY},
+      {perspective: 1000}, // without this line this Animation will not render on Android while working fine on iOS
+    ],
+  }}
+/>
+```
+
+### Additional examples
+
+The RNTester app has various examples of `Animated` in use:
+
+- [AnimatedGratuitousApp](https://github.com/facebook/react-native/tree/main/packages/rn-tester/js/examples/AnimatedGratuitousApp)
+- [NativeAnimationsExample](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js)
+
+## `LayoutAnimation` API
+
+`LayoutAnimation` allows you to globally configure `create` and `update` animations that will be used for all views in the next render/layout cycle. This is useful for doing Flexbox layout updates without bothering to measure or calculate specific properties in order to animate them directly, and is especially useful when layout changes may affect ancestors, for example a "see more" expansion that also increases the size of the parent and pushes down the row below which would otherwise require explicit coordination between the components in order to animate them all in sync.
+
+Note that although `LayoutAnimation` is very powerful and can be quite useful, it provides much less control than `Animated` and other animation libraries, so you may need to use another approach if you can't get `LayoutAnimation` to do what you want.
+
+Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`:
+
+```tsx
+UIManager.setLayoutAnimationEnabledExperimental(true);
+```
+
+```SnackPlayer name=LayoutAnimations
+import {useState} from 'react';
+import {
+  NativeModules,
+  LayoutAnimation,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  View,
+} from 'react-native';
+
+const {UIManager} = NativeModules;
+
+UIManager.setLayoutAnimationEnabledExperimental &&
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+
+export default function App() {
+  const [state, setState] = useState({
+    w: 100,
+    h: 100,
+  });
+
+  const onPress = () => {
+    // Animate the update
+    LayoutAnimation.spring();
+    setState({w: state.w + 15, h: state.h + 15});
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={[styles.box, {width: state.w, height: state.h}]} />
+      <TouchableOpacity onPress={onPress}>
+        <View style={styles.button}>
+          <Text style={styles.buttonText}>Press me!</Text>
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  box: {
+    width: 200,
+    height: 200,
+    backgroundColor: 'red',
+  },
+  button: {
+    backgroundColor: 'black',
+    paddingHorizontal: 20,
+    paddingVertical: 15,
+    marginTop: 15,
+  },
+  buttonText: {
+    color: '#fff',
+    fontWeight: 'bold',
+  },
+});
+```
+
+This example uses a preset value, you can customize the animations as you need, see [LayoutAnimation.js](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/LayoutAnimation/LayoutAnimation.js) for more information.
+
+## Additional notes
+
+### `requestAnimationFrame`
+
+`requestAnimationFrame` is a polyfill from the browser that you might be familiar with. It accepts a function as its only argument and calls that function before the next repaint. It is an essential building block for animations that underlies all of the JavaScript-based animation APIs. In general, you shouldn't need to call this yourself - the animation APIs will manage frame updates for you.
+
+### `setNativeProps`
+
+As mentioned [in the Direct Manipulation section](legacy/direct-manipulation), `setNativeProps` allows us to modify properties of native-backed components (components that are actually backed by native views, unlike composite components) directly, without having to `setState` and re-render the component hierarchy.
+
+We could use this in the Rebound example to update the scale - this might be helpful if the component that we are updating is deeply nested and hasn't been optimized with `shouldComponentUpdate`.
+
+If you find your animations with dropping frames (performing below 60 frames per second), look into using `setNativeProps` or `shouldComponentUpdate` to optimize them. Or you could run the animations on the UI thread rather than the JavaScript thread [with the useNativeDriver option](/blog/2017/02/14/using-native-driver-for-animated). You may also want to defer any computationally intensive work until after animations are complete, using the [InteractionManager](interactionmanager). You can monitor the frame rate by using the In-App Dev Menu "FPS Monitor" tool.
diff --git a/website/versioned_docs/version-0.86/appstate.md b/website/versioned_docs/version-0.86/appstate.md
index b776907d3e1..4980ef439da 100644
--- a/website/versioned_docs/version-0.86/appstate.md
+++ b/website/versioned_docs/version-0.86/appstate.md
@@ -1,122 +1,122 @@
----
-id: appstate
-title: AppState
----
-
-`AppState` can tell you if the app is in the foreground or background, and notify you when the state changes.
-
-AppState is frequently used to determine the intent and proper behavior when handling push notifications.
-
-### App States
-
-- `active` - The app is running in the foreground
-- `background` - The app is running in the background. The user is either:
-  - in another app
-  - on the home screen
-  - [Android] on another `Activity`, including temporary system activities such
-    as autofill credential pickers (even if launched by your app or the system)
-- [iOS] `inactive` - This is a state that occurs when transitioning between foreground & background, and during periods of inactivity such as entering the multitasking view, opening the Notification Center or in the event of an incoming call.
-
-For more information, see [Apple's documentation](https://developer.apple.com/documentation/uikit/app_and_scenes/managing_your_app_s_life_cycle)
-
-## Basic Usage
-
-To see the current state, you can check `AppState.currentState`, which will be kept up-to-date.
-
-:::info
-If you are using the legacy architecture, `currentState` will be `null` at launch until it is retrieved asynchronously from the native side.
-:::
-
-```SnackPlayer name=AppState%20Example
-import React, {useRef, useState, useEffect} from 'react';
-import {AppState, StyleSheet, Text} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const AppStateExample = () => {
-  const appState = useRef(AppState.currentState);
-  const [appStateVisible, setAppStateVisible] = useState(appState.current);
-
-  useEffect(() => {
-    const subscription = AppState.addEventListener('change', nextAppState => {
-      if (
-        appState.current.match(/inactive|background/) &&
-        nextAppState === 'active'
-      ) {
-        console.log('App has come to the foreground!');
-      }
-
-      appState.current = nextAppState;
-      setAppStateVisible(appState.current);
-      console.log('AppState', appState.current);
-    });
-
-    return () => {
-      subscription.remove();
-    };
-  }, []);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>Current state is: {appStateVisible}</Text>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default AppStateExample;
-```
-
-This example will only ever appear to say "Current state is: active" because the app is only visible to the user when in the `active` state. If you want to experiment with the code we recommend to use your own device instead of embedded preview.
-
----
-
-# Reference
-
-## Events
-
-### `change`
-
-This event is received when the app state has changed. The listener is called with one of [the current app state values](appstate#app-states).
-
-### `memoryWarning` <div className="label ios">iOS</div>
-
-Fires when the app receives a memory warning from the operating system.
-
-### `focus` <div className="label android">Android</div>
-
-Received when the app gains focus (the user is interacting with the app).
-
-### `blur` <div className="label android">Android</div>
-
-Received when the user is not actively interacting with the app. Useful in situations when the user pulls down the [notification drawer](https://developer.android.com/guide/topics/ui/notifiers/notifications#bar-and-drawer). `AppState` won't change but the `blur` event will get fired.
-
-## Methods
-
-### `addEventListener()`
-
-```tsx
-static addEventListener(
-  type: AppStateEvent,
-  listener: (state: AppStateStatus) => void,
-): NativeEventSubscription;
-```
-
-Sets up a function that will be called whenever the specified event type on AppState occurs. Valid values for `eventType` are
-[listed above](#events). Returns the `EventSubscription`.
-
-## Properties
-
-### `currentState`
-
-```tsx
-static currentState: AppStateStatus;
-```
+---
+id: appstate
+title: AppState
+---
+
+`AppState` can tell you if the app is in the foreground or background, and notify you when the state changes.
+
+AppState is frequently used to determine the intent and proper behavior when handling push notifications.
+
+### App States
+
+- `active` - The app is running in the foreground
+- `background` - The app is running in the background. The user is either:
+  - in another app
+  - on the home screen
+  - [Android] on another `Activity`, including temporary system activities such
+    as autofill credential pickers (even if launched by your app or the system)
+- [iOS] `inactive` - This is a state that occurs when transitioning between foreground & background, and during periods of inactivity such as entering the multitasking view, opening the Notification Center or in the event of an incoming call.
+
+For more information, see [Apple's documentation](https://developer.apple.com/documentation/uikit/app_and_scenes/managing_your_app_s_life_cycle)
+
+## Basic Usage
+
+To see the current state, you can check `AppState.currentState`, which will be kept up-to-date.
+
+:::info
+If you are using the legacy architecture, `currentState` will be `null` at launch until it is retrieved asynchronously from the native side.
+:::
+
+```SnackPlayer name=AppState%20Example
+import {useRef, useState, useEffect} from 'react';
+import {AppState, StyleSheet, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const AppStateExample = () => {
+  const appState = useRef(AppState.currentState);
+  const [appStateVisible, setAppStateVisible] = useState(appState.current);
+
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', nextAppState => {
+      if (
+        appState.current.match(/inactive|background/) &&
+        nextAppState === 'active'
+      ) {
+        console.log('App has come to the foreground!');
+      }
+
+      appState.current = nextAppState;
+      setAppStateVisible(appState.current);
+      console.log('AppState', appState.current);
+    });
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>Current state is: {appStateVisible}</Text>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default AppStateExample;
+```
+
+This example will only ever appear to say "Current state is: active" because the app is only visible to the user when in the `active` state. If you want to experiment with the code we recommend to use your own device instead of embedded preview.
+
+---
+
+# Reference
+
+## Events
+
+### `change`
+
+This event is received when the app state has changed. The listener is called with one of [the current app state values](appstate#app-states).
+
+### `memoryWarning` <div className="label ios">iOS</div>
+
+Fires when the app receives a memory warning from the operating system.
+
+### `focus` <div className="label android">Android</div>
+
+Received when the app gains focus (the user is interacting with the app).
+
+### `blur` <div className="label android">Android</div>
+
+Received when the user is not actively interacting with the app. Useful in situations when the user pulls down the [notification drawer](https://developer.android.com/guide/topics/ui/notifiers/notifications#bar-and-drawer). `AppState` won't change but the `blur` event will get fired.
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+  type: AppStateEvent,
+  listener: (state: AppStateStatus) => void,
+): NativeEventSubscription;
+```
+
+Sets up a function that will be called whenever the specified event type on AppState occurs. Valid values for `eventType` are
+[listed above](#events). Returns the `EventSubscription`.
+
+## Properties
+
+### `currentState`
+
+```tsx
+static currentState: AppStateStatus;
+```
diff --git a/website/versioned_docs/version-0.86/backhandler.md b/website/versioned_docs/version-0.86/backhandler.md
index c3c7c937541..d4c82008bef 100644
--- a/website/versioned_docs/version-0.86/backhandler.md
+++ b/website/versioned_docs/version-0.86/backhandler.md
@@ -1,136 +1,136 @@
----
-id: backhandler
-title: BackHandler
----
-
-The Backhandler API detects hardware button presses for back navigation, lets you register event listeners for the system's back action, and lets you control how your application responds. It is Android-only.
-
-The event subscriptions are called in reverse order (i.e. the last registered subscription is called first).
-
-- **If one subscription returns true,** then subscriptions registered earlier will not be called.
-- **If no subscription returns true or none are registered,** it programmatically invokes the default back button functionality to exit the app.
-
-:::warning Warning for modal users
-If your app shows an opened `Modal`, `BackHandler` will not publish any events ([see `Modal` docs](modal#onrequestclose)).
-:::
-
-## Pattern
-
-```tsx
-const subscription = BackHandler.addEventListener(
-  'hardwareBackPress',
-  function () {
-    /**
-     * this.onMainScreen and this.goBack are just examples,
-     * you need to use your own implementation here.
-     *
-     * Typically you would use the navigator here to go to the last state.
-     */
-
-    if (!this.onMainScreen()) {
-      this.goBack();
-      /**
-       * When true is returned the event will not be bubbled up
-       * & no other back action will execute
-       */
-      return true;
-    }
-    /**
-     * Returning false will let the event to bubble up & let other event listeners
-     * or the system's default back action to be executed.
-     */
-    return false;
-  },
-);
-
-// Unsubscribe the listener on unmount
-subscription.remove();
-```
-
-## Example
-
-The following example implements a scenario where you confirm if the user wants to exit the app:
-
-```SnackPlayer name=BackHandler&supportedPlatforms=android
-import React, {useEffect} from 'react';
-import {Text, StyleSheet, BackHandler, Alert} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  useEffect(() => {
-    const backAction = () => {
-      Alert.alert('Hold on!', 'Are you sure you want to go back?', [
-        {
-          text: 'Cancel',
-          onPress: () => null,
-          style: 'cancel',
-        },
-        {text: 'YES', onPress: () => BackHandler.exitApp()},
-      ]);
-      return true;
-    };
-
-    const backHandler = BackHandler.addEventListener(
-      'hardwareBackPress',
-      backAction,
-    );
-
-    return () => backHandler.remove();
-  }, []);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.text}>Click Back button!</Text>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  text: {
-    fontSize: 18,
-    fontWeight: 'bold',
-  },
-});
-
-export default App;
-```
-
-`BackHandler.addEventListener` creates an event listener & returns a `NativeEventSubscription` object which should be cleared using `NativeEventSubscription.remove` method.
-
-## Usage with React Navigation
-
-If you are using React Navigation to navigate across different screens, you can follow their guide on [Custom Android back button behaviour](https://reactnavigation.org/docs/custom-android-back-button-handling/)
-
-## Backhandler hook
-
-[React Native Hooks](https://github.com/react-native-community/hooks#usebackhandler) has a nice `useBackHandler` hook which will simplify the process of setting up event listeners.
-
----
-
-# Reference
-
-## Methods
-
-### `addEventListener()`
-
-```tsx
-static addEventListener(
-  eventName: BackPressEventName,
-  handler: () => boolean | null | undefined,
-): NativeEventSubscription;
-```
-
----
-
-### `exitApp()`
-
-```tsx
-static exitApp();
-```
+---
+id: backhandler
+title: BackHandler
+---
+
+The Backhandler API detects hardware button presses for back navigation, lets you register event listeners for the system's back action, and lets you control how your application responds. It is Android-only.
+
+The event subscriptions are called in reverse order (i.e. the last registered subscription is called first).
+
+- **If one subscription returns true,** then subscriptions registered earlier will not be called.
+- **If no subscription returns true or none are registered,** it programmatically invokes the default back button functionality to exit the app.
+
+:::warning Warning for modal users
+If your app shows an opened `Modal`, `BackHandler` will not publish any events ([see `Modal` docs](modal#onrequestclose)).
+:::
+
+## Pattern
+
+```tsx
+const subscription = BackHandler.addEventListener(
+  'hardwareBackPress',
+  function () {
+    /**
+     * this.onMainScreen and this.goBack are just examples,
+     * you need to use your own implementation here.
+     *
+     * Typically you would use the navigator here to go to the last state.
+     */
+
+    if (!this.onMainScreen()) {
+      this.goBack();
+      /**
+       * When true is returned the event will not be bubbled up
+       * & no other back action will execute
+       */
+      return true;
+    }
+    /**
+     * Returning false will let the event to bubble up & let other event listeners
+     * or the system's default back action to be executed.
+     */
+    return false;
+  },
+);
+
+// Unsubscribe the listener on unmount
+subscription.remove();
+```
+
+## Example
+
+The following example implements a scenario where you confirm if the user wants to exit the app:
+
+```SnackPlayer name=BackHandler&supportedPlatforms=android
+import {useEffect} from 'react';
+import {Text, StyleSheet, BackHandler, Alert} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  useEffect(() => {
+    const backAction = () => {
+      Alert.alert('Hold on!', 'Are you sure you want to go back?', [
+        {
+          text: 'Cancel',
+          onPress: () => null,
+          style: 'cancel',
+        },
+        {text: 'YES', onPress: () => BackHandler.exitApp()},
+      ]);
+      return true;
+    };
+
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      backAction,
+    );
+
+    return () => backHandler.remove();
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.text}>Click Back button!</Text>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+});
+
+export default App;
+```
+
+`BackHandler.addEventListener` creates an event listener & returns a `NativeEventSubscription` object which should be cleared using `NativeEventSubscription.remove` method.
+
+## Usage with React Navigation
+
+If you are using React Navigation to navigate across different screens, you can follow their guide on [Custom Android back button behaviour](https://reactnavigation.org/docs/custom-android-back-button-handling/)
+
+## Backhandler hook
+
+[React Native Hooks](https://github.com/react-native-community/hooks#usebackhandler) has a nice `useBackHandler` hook which will simplify the process of setting up event listeners.
+
+---
+
+# Reference
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+  eventName: BackPressEventName,
+  handler: () => boolean | null | undefined,
+): NativeEventSubscription;
+```
+
+---
+
+### `exitApp()`
+
+```tsx
+static exitApp();
+```
diff --git a/website/versioned_docs/version-0.86/button.md b/website/versioned_docs/version-0.86/button.md
index 9fc529fc863..23501057f52 100644
--- a/website/versioned_docs/version-0.86/button.md
+++ b/website/versioned_docs/version-0.86/button.md
@@ -19,7 +19,6 @@ If this button doesn't look right for your app, you can build your own button us
 ## Example
 
 ```SnackPlayer name=Button%20Example&ext=js
-import React from 'react';
 import {StyleSheet, Button, View, Text, Alert, Platform} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.86/communication-android.md b/website/versioned_docs/version-0.86/communication-android.md
index f78dc84cf65..35aab358818 100644
--- a/website/versioned_docs/version-0.86/communication-android.md
+++ b/website/versioned_docs/version-0.86/communication-android.md
@@ -67,7 +67,6 @@ class MainActivity : ReactActivity() {
 </Tabs>
 
 ```tsx
-import React from 'react';
 import {View, Image} from 'react-native';
 
 export default class ImageBrowserApp extends React.Component {
diff --git a/website/versioned_docs/version-0.86/communication-ios.md b/website/versioned_docs/version-0.86/communication-ios.md
index f82cae7e620..89a64ff9b4c 100644
--- a/website/versioned_docs/version-0.86/communication-ios.md
+++ b/website/versioned_docs/version-0.86/communication-ios.md
@@ -33,7 +33,6 @@ RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
 ```
 
 ```tsx
-import React from 'react';
 import {View, Image} from 'react-native';
 
 export default class ImageBrowserApp extends React.Component {
diff --git a/website/versioned_docs/version-0.86/dimensions.md b/website/versioned_docs/version-0.86/dimensions.md
index 9ebb8561739..eb3673eca5b 100644
--- a/website/versioned_docs/version-0.86/dimensions.md
+++ b/website/versioned_docs/version-0.86/dimensions.md
@@ -1,154 +1,154 @@
----
-id: dimensions
-title: Dimensions
----
-
-:::info
-[`useWindowDimensions`](usewindowdimensions) is the preferred API for React components. Unlike `Dimensions`, it updates as the window's dimensions update. This works nicely with the React paradigm.
-:::
-
-```tsx
-import {Dimensions} from 'react-native';
-```
-
-You can get the application window's width and height using the following code:
-
-```tsx
-const windowWidth = Dimensions.get('window').width;
-const windowHeight = Dimensions.get('window').height;
-```
-
-:::note
-Although dimensions are available immediately, they may change (e.g due to device rotation, foldable devices etc) so any rendering logic or styles that depend on these constants should try to call this function on every render, rather than caching the value (for example, using inline styles rather than setting a value in a `StyleSheet`).
-:::
-
-If you are targeting foldable devices or devices which can change the screen size or app window size, you can use the event listener available in the Dimensions module as shown in the below example.
-
-## Example
-
-```SnackPlayer name=Dimensions%20Example
-import React, {useState, useEffect} from 'react';
-import {StyleSheet, Text, Dimensions} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const windowDimensions = Dimensions.get('window');
-const screenDimensions = Dimensions.get('screen');
-
-const App = () => {
-  const [dimensions, setDimensions] = useState({
-    window: windowDimensions,
-    screen: screenDimensions,
-  });
-
-  useEffect(() => {
-    const subscription = Dimensions.addEventListener(
-      'change',
-      ({window, screen}) => {
-        setDimensions({window, screen});
-      },
-    );
-    return () => subscription?.remove();
-  });
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.header}>Window Dimensions</Text>
-        {Object.entries(dimensions.window).map(([key, value]) => (
-          <Text>
-            {key} - {value}
-          </Text>
-        ))}
-        <Text style={styles.header}>Screen Dimensions</Text>
-        {Object.entries(dimensions.screen).map(([key, value]) => (
-          <Text>
-            {key} - {value}
-          </Text>
-        ))}
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  header: {
-    fontSize: 16,
-    marginVertical: 10,
-  },
-});
-
-export default App;
-```
-
-# Reference
-
-## Methods
-
-### `addEventListener()`
-
-```tsx
-static addEventListener(
-  type: 'change',
-  handler: ({
-    window,
-    screen,
-  }: DimensionsValue) => void,
-): EmitterSubscription;
-```
-
-Add an event handler. Supported events:
-
-- `change`: Fires when a property within the `Dimensions` object changes. The argument to the event handler is a [`DimensionsValue`](#dimensionsvalue) type object.
-
----
-
-### `get()`
-
-```tsx
-static get(dim: 'window' | 'screen'): ScaledSize;
-```
-
-Initial dimensions are set before `runApplication` is called so they should be available before any other require's are run, but may be updated later.
-
-Example: `const {height, width} = Dimensions.get('window');`
-
-**Parameters:**
-
-| Name                                                               | Type   | Description                                                                       |
-| ------------------------------------------------------------------ | ------ | --------------------------------------------------------------------------------- |
-| dim <div className="label basic required two-lines">Required</div> | string | Name of dimension as defined when calling `set`. Returns value for the dimension. |
-
-:::note
-For Android the `window` dimension will be reduced by the size of status bar (if not translucent) and bottom navigation bar.
-:::
-
-## Type Definitions
-
-### DimensionsValue
-
-**Properties:**
-
-| Name   | Type                                | Description                             |
-| ------ | ----------------------------------- | --------------------------------------- |
-| window | [ScaledSize](dimensions#scaledsize) | Size of the visible Application window. |
-| screen | [ScaledSize](dimensions#scaledsize) | Size of the device's screen.            |
-
-### ScaledSize
-
-| Type   |
-| ------ |
-| object |
-
-**Properties:**
-
-| Name      | Type   |
-| --------- | ------ |
-| width     | number |
-| height    | number |
-| scale     | number |
-| fontScale | number |
+---
+id: dimensions
+title: Dimensions
+---
+
+:::info
+[`useWindowDimensions`](usewindowdimensions) is the preferred API for React components. Unlike `Dimensions`, it updates as the window's dimensions update. This works nicely with the React paradigm.
+:::
+
+```tsx
+import {Dimensions} from 'react-native';
+```
+
+You can get the application window's width and height using the following code:
+
+```tsx
+const windowWidth = Dimensions.get('window').width;
+const windowHeight = Dimensions.get('window').height;
+```
+
+:::note
+Although dimensions are available immediately, they may change (e.g due to device rotation, foldable devices etc) so any rendering logic or styles that depend on these constants should try to call this function on every render, rather than caching the value (for example, using inline styles rather than setting a value in a `StyleSheet`).
+:::
+
+If you are targeting foldable devices or devices which can change the screen size or app window size, you can use the event listener available in the Dimensions module as shown in the below example.
+
+## Example
+
+```SnackPlayer name=Dimensions%20Example
+import {useState, useEffect} from 'react';
+import {StyleSheet, Text, Dimensions} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const windowDimensions = Dimensions.get('window');
+const screenDimensions = Dimensions.get('screen');
+
+const App = () => {
+  const [dimensions, setDimensions] = useState({
+    window: windowDimensions,
+    screen: screenDimensions,
+  });
+
+  useEffect(() => {
+    const subscription = Dimensions.addEventListener(
+      'change',
+      ({window, screen}) => {
+        setDimensions({window, screen});
+      },
+    );
+    return () => subscription?.remove();
+  });
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.header}>Window Dimensions</Text>
+        {Object.entries(dimensions.window).map(([key, value]) => (
+          <Text>
+            {key} - {value}
+          </Text>
+        ))}
+        <Text style={styles.header}>Screen Dimensions</Text>
+        {Object.entries(dimensions.screen).map(([key, value]) => (
+          <Text>
+            {key} - {value}
+          </Text>
+        ))}
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  header: {
+    fontSize: 16,
+    marginVertical: 10,
+  },
+});
+
+export default App;
+```
+
+# Reference
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+  type: 'change',
+  handler: ({
+    window,
+    screen,
+  }: DimensionsValue) => void,
+): EmitterSubscription;
+```
+
+Add an event handler. Supported events:
+
+- `change`: Fires when a property within the `Dimensions` object changes. The argument to the event handler is a [`DimensionsValue`](#dimensionsvalue) type object.
+
+---
+
+### `get()`
+
+```tsx
+static get(dim: 'window' | 'screen'): ScaledSize;
+```
+
+Initial dimensions are set before `runApplication` is called so they should be available before any other require's are run, but may be updated later.
+
+Example: `const {height, width} = Dimensions.get('window');`
+
+**Parameters:**
+
+| Name                                                               | Type   | Description                                                                       |
+| ------------------------------------------------------------------ | ------ | --------------------------------------------------------------------------------- |
+| dim <div className="label basic required two-lines">Required</div> | string | Name of dimension as defined when calling `set`. Returns value for the dimension. |
+
+:::note
+For Android the `window` dimension will be reduced by the size of status bar (if not translucent) and bottom navigation bar.
+:::
+
+## Type Definitions
+
+### DimensionsValue
+
+**Properties:**
+
+| Name   | Type                                | Description                             |
+| ------ | ----------------------------------- | --------------------------------------- |
+| window | [ScaledSize](dimensions#scaledsize) | Size of the visible Application window. |
+| screen | [ScaledSize](dimensions#scaledsize) | Size of the device's screen.            |
+
+### ScaledSize
+
+| Type   |
+| ------ |
+| object |
+
+**Properties:**
+
+| Name      | Type   |
+| --------- | ------ |
+| width     | number |
+| height    | number |
+| scale     | number |
+| fontScale | number |
diff --git a/website/versioned_docs/version-0.86/document-nodes.md b/website/versioned_docs/version-0.86/document-nodes.md
index 978ef87a1f8..6c6ab4a7452 100644
--- a/website/versioned_docs/version-0.86/document-nodes.md
+++ b/website/versioned_docs/version-0.86/document-nodes.md
@@ -1,75 +1,75 @@
----
-id: document-nodes
-title: Document nodes
----
-
-Document nodes represent a complete native view tree. Apps using native navigation would provide a separate document node for each screen. Apps not using native navigation would generally provide a single document for the whole app (similar to single-page apps on Web).
-
-```SnackPlayer ext=js&name=Document%20instance%20example
-import * as React from 'react';
-import {Text, TextInput, View} from 'react-native';
-
-function MyComponent(props) {
-  return (
-    <View ref={props.ref}>
-      <Text>Start typing below</Text>
-      <TextInput id="main-text-input" />
-    </View>
-  )
-}
-
-export default function AccessingDocument() {
-  const ref = React.useRef(null);
-
-  React.useEffect(() => {
-    // Get the main text input in the screen and focus it after initial load.
-    const element = ref.current;
-    const doc = element.ownerDocument;
-    const textInput = doc.getElementById('main-text-input');
-    textInput?.focus();
-  }, []);
-
-  return (
-    <MyComponent ref={ref} />
-  );
-}
-```
-
----
-
-## Reference
-
-### Web-compatible API
-
-From [`Document`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement):
-
-- Properties
-  - [`childElementCount`](https://developer.mozilla.org/en-US/docs/Web/API/Document/childElementCount)
-  - [`children`](https://developer.mozilla.org/en-US/docs/Web/API/Document/children)
-  - [`documentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/documentElement)
-  - [`firstElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Document/firstElementChild)
-  - [`lastElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Document/lastElementChild)
-- Methods
-  - [`getElementById()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)
-
-From [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/Node):
-
-- Properties
-  - [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)
-  - [`firstChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild)
-  - [`isConnected`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected)
-  - [`lastChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild)
-  - [`nextSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling)
-  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
-  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
-  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
-  - [`ownerDocument`](https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument)
-  - [`parentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)
-  - [`parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)
-  - [`previousSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling)
-  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
-- Methods
-  - [`compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
-  - [`contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains)
-  - [`getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)
-  - [`hasChildNodes()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes)
+---
+id: document-nodes
+title: Document nodes
+---
+
+Document nodes represent a complete native view tree. Apps using native navigation would provide a separate document node for each screen. Apps not using native navigation would generally provide a single document for the whole app (similar to single-page apps on Web).
+
+```SnackPlayer ext=js&name=Document%20instance%20example
+import {useEffect, useRef} from 'react';
+import {Text, TextInput, View} from 'react-native';
+
+function MyComponent(props) {
+  return (
+    <View ref={props.ref}>
+      <Text>Start typing below</Text>
+      <TextInput id="main-text-input" />
+    </View>
+  )
+}
+
+export default function AccessingDocument() {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    // Get the main text input in the screen and focus it after initial load.
+    const element = ref.current;
+    const doc = element.ownerDocument;
+    const textInput = doc.getElementById('main-text-input');
+    textInput?.focus();
+  }, []);
+
+  return (
+    <MyComponent ref={ref} />
+  );
+}
+```
+
+---
+
+## Reference
+
+### Web-compatible API
+
+From [`Document`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement):
+
+- Properties
+  - [`childElementCount`](https://developer.mozilla.org/en-US/docs/Web/API/Document/childElementCount)
+  - [`children`](https://developer.mozilla.org/en-US/docs/Web/API/Document/children)
+  - [`documentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/documentElement)
+  - [`firstElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Document/firstElementChild)
+  - [`lastElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Document/lastElementChild)
+- Methods
+  - [`getElementById()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)
+
+From [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/Node):
+
+- Properties
+  - [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)
+  - [`firstChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild)
+  - [`isConnected`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected)
+  - [`lastChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild)
+  - [`nextSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling)
+  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
+  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
+  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
+  - [`ownerDocument`](https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument)
+  - [`parentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)
+  - [`parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)
+  - [`previousSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling)
+  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
+- Methods
+  - [`compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
+  - [`contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains)
+  - [`getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)
+  - [`hasChildNodes()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes)
diff --git a/website/versioned_docs/version-0.86/drawerlayoutandroid.md b/website/versioned_docs/version-0.86/drawerlayoutandroid.md
index 3714318df5c..76b4c507c6a 100644
--- a/website/versioned_docs/version-0.86/drawerlayoutandroid.md
+++ b/website/versioned_docs/version-0.86/drawerlayoutandroid.md
@@ -1,323 +1,323 @@
----
-id: drawerlayoutandroid
-title: DrawerLayoutAndroid
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-React component that wraps the platform `DrawerLayout` (Android only). The Drawer (typically used for navigation) is rendered with `renderNavigationView` and direct children are the main view (where your content goes). The navigation view is initially not visible on the screen, but can be pulled in from the side of the window specified by the `drawerPosition` prop and its width can be set by the `drawerWidth` prop.
-
-## Example
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android&ext=js
-import React, {useRef, useState} from 'react';
-import {Button, DrawerLayoutAndroid, Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const drawer = useRef(null);
-  const [drawerPosition, setDrawerPosition] = useState('left');
-  const changeDrawerPosition = () => {
-    if (drawerPosition === 'left') {
-      setDrawerPosition('right');
-    } else {
-      setDrawerPosition('left');
-    }
-  };
-
-  const navigationView = () => (
-    <SafeAreaView style={[styles.container, styles.navigationContainer]}>
-      <Text style={styles.paragraph}>I'm in the Drawer!</Text>
-      <Button
-        title="Close drawer"
-        onPress={() => drawer.current.closeDrawer()}
-      />
-    </SafeAreaView>
-  );
-
-  return (
-    <SafeAreaProvider>
-      <DrawerLayoutAndroid
-        ref={drawer}
-        drawerWidth={300}
-        drawerPosition={drawerPosition}
-        renderNavigationView={navigationView}>
-        <SafeAreaView style={styles.container}>
-          <Text style={styles.paragraph}>Drawer on the {drawerPosition}!</Text>
-          <Button
-            title="Change Drawer Position"
-            onPress={() => changeDrawerPosition()}
-          />
-          <Text style={styles.paragraph}>
-            Swipe from the side or press button below to see it!
-          </Text>
-          <Button
-            title="Open drawer"
-            onPress={() => drawer.current.openDrawer()}
-          />
-        </SafeAreaView>
-      </DrawerLayoutAndroid>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingHorizontal: 16,
-  },
-  navigationContainer: {
-    backgroundColor: '#ecf0f1',
-  },
-  paragraph: {
-    padding: 16,
-    fontSize: 15,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android&ext=tsx
-import React, {useRef, useState} from 'react';
-import {
-  Button,
-  DrawerLayoutAndroid,
-  Text,
-  StyleSheet,
-  View,
-} from 'react-native';
-
-const App = () => {
-  const drawer = useRef<DrawerLayoutAndroid>(null);
-  const [drawerPosition, setDrawerPosition] = useState<'left' | 'right'>(
-    'left',
-  );
-  const changeDrawerPosition = () => {
-    if (drawerPosition === 'left') {
-      setDrawerPosition('right');
-    } else {
-      setDrawerPosition('left');
-    }
-  };
-
-  const navigationView = () => (
-    <View style={[styles.container, styles.navigationContainer]}>
-      <Text style={styles.paragraph}>I'm in the Drawer!</Text>
-      <Button
-        title="Close drawer"
-        onPress={() => drawer.current?.closeDrawer()}
-      />
-    </View>
-  );
-
-  return (
-    <DrawerLayoutAndroid
-      ref={drawer}
-      drawerWidth={300}
-      drawerPosition={drawerPosition}
-      renderNavigationView={navigationView}>
-      <View style={styles.container}>
-        <Text style={styles.paragraph}>Drawer on the {drawerPosition}!</Text>
-        <Button
-          title="Change Drawer Position"
-          onPress={() => changeDrawerPosition()}
-        />
-        <Text style={styles.paragraph}>
-          Swipe from the side or press button below to see it!
-        </Text>
-        <Button
-          title="Open drawer"
-          onPress={() => drawer.current?.openDrawer()}
-        />
-      </View>
-    </DrawerLayoutAndroid>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 16,
-  },
-  navigationContainer: {
-    backgroundColor: '#ecf0f1',
-  },
-  paragraph: {
-    padding: 16,
-    fontSize: 15,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
----
-
-# Reference
-
-## Props
-
-### [View Props](view.md#props)
-
-Inherits [View Props](view.md#props).
-
----
-
-### `drawerBackgroundColor`
-
-Specifies the background color of the drawer. The default value is `white`. If you want to set the opacity of the drawer, use rgba. Example:
-
-```tsx
-return (
-  <DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)" />
-);
-```
-
-| Type               | Required |
-| ------------------ | -------- |
-| [color](colors.md) | No       |
-
----
-
-### `drawerLockMode`
-
-Specifies the lock mode of the drawer. The drawer can be locked in 3 states:
-
-- unlocked (default), meaning that the drawer will respond (open/close) to touch gestures.
-- locked-closed, meaning that the drawer will stay closed and not respond to gestures.
-- locked-open, meaning that the drawer will stay opened and not respond to gestures. The drawer may still be opened and closed programmatically (`openDrawer`/`closeDrawer`).
-
-| Type                                             | Required |
-| ------------------------------------------------ | -------- |
-| enum('unlocked', 'locked-closed', 'locked-open') | No       |
-
----
-
-### `drawerPosition`
-
-Specifies the side of the screen from which the drawer will slide in. By default it is set to `left`.
-
-| Type                  | Required |
-| --------------------- | -------- |
-| enum('left', 'right') | No       |
-
----
-
-### `drawerWidth`
-
-Specifies the width of the drawer, more precisely the width of the view that be pulled in from the edge of the window.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `keyboardDismissMode`
-
-Determines whether the keyboard gets dismissed in response to a drag.
-
-- 'none' (the default), drags do not dismiss the keyboard.
-- 'on-drag', the keyboard is dismissed when a drag begins.
-
-| Type                    | Required |
-| ----------------------- | -------- |
-| enum('none', 'on-drag') | No       |
-
----
-
-### `onDrawerClose`
-
-Function called whenever the navigation view has been closed.
-
-| Type     | Required |
-| -------- | -------- |
-| function | No       |
-
----
-
-### `onDrawerOpen`
-
-Function called whenever the navigation view has been opened.
-
-| Type     | Required |
-| -------- | -------- |
-| function | No       |
-
----
-
-### `onDrawerSlide`
-
-Function called whenever there is an interaction with the navigation view.
-
-| Type     | Required |
-| -------- | -------- |
-| function | No       |
-
----
-
-### `onDrawerStateChanged`
-
-Function called when the drawer state has changed. The drawer can be in 3 states:
-
-- idle, meaning there is no interaction with the navigation view happening at the time
-- dragging, meaning there is currently an interaction with the navigation view
-- settling, meaning that there was an interaction with the navigation view, and the navigation view is now finishing its closing or opening animation
-
-| Type     | Required |
-| -------- | -------- |
-| function | No       |
-
----
-
-### `renderNavigationView`
-
-The navigation view that will be rendered to the side of the screen and can be pulled in.
-
-| Type     | Required |
-| -------- | -------- |
-| function | Yes      |
-
----
-
-### `statusBarBackgroundColor`
-
-Make the drawer take the entire screen and draw the background of the status bar to allow it to open over the status bar. It will only have an effect on API 21+.
-
-| Type               | Required |
-| ------------------ | -------- |
-| [color](colors.md) | No       |
-
-## Methods
-
-### `closeDrawer()`
-
-```tsx
-closeDrawer();
-```
-
-Closes the drawer.
-
----
-
-### `openDrawer()`
-
-```tsx
-openDrawer();
-```
-
-Opens the drawer.
+---
+id: drawerlayoutandroid
+title: DrawerLayoutAndroid
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+React component that wraps the platform `DrawerLayout` (Android only). The Drawer (typically used for navigation) is rendered with `renderNavigationView` and direct children are the main view (where your content goes). The navigation view is initially not visible on the screen, but can be pulled in from the side of the window specified by the `drawerPosition` prop and its width can be set by the `drawerWidth` prop.
+
+## Example
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android&ext=js
+import {useRef, useState} from 'react';
+import {Button, DrawerLayoutAndroid, Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const drawer = useRef(null);
+  const [drawerPosition, setDrawerPosition] = useState('left');
+  const changeDrawerPosition = () => {
+    if (drawerPosition === 'left') {
+      setDrawerPosition('right');
+    } else {
+      setDrawerPosition('left');
+    }
+  };
+
+  const navigationView = () => (
+    <SafeAreaView style={[styles.container, styles.navigationContainer]}>
+      <Text style={styles.paragraph}>I'm in the Drawer!</Text>
+      <Button
+        title="Close drawer"
+        onPress={() => drawer.current.closeDrawer()}
+      />
+    </SafeAreaView>
+  );
+
+  return (
+    <SafeAreaProvider>
+      <DrawerLayoutAndroid
+        ref={drawer}
+        drawerWidth={300}
+        drawerPosition={drawerPosition}
+        renderNavigationView={navigationView}>
+        <SafeAreaView style={styles.container}>
+          <Text style={styles.paragraph}>Drawer on the {drawerPosition}!</Text>
+          <Button
+            title="Change Drawer Position"
+            onPress={() => changeDrawerPosition()}
+          />
+          <Text style={styles.paragraph}>
+            Swipe from the side or press button below to see it!
+          </Text>
+          <Button
+            title="Open drawer"
+            onPress={() => drawer.current.openDrawer()}
+          />
+        </SafeAreaView>
+      </DrawerLayoutAndroid>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 16,
+  },
+  navigationContainer: {
+    backgroundColor: '#ecf0f1',
+  },
+  paragraph: {
+    padding: 16,
+    fontSize: 15,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android&ext=tsx
+import {useRef, useState} from 'react';
+import {
+  Button,
+  DrawerLayoutAndroid,
+  Text,
+  StyleSheet,
+  View,
+} from 'react-native';
+
+const App = () => {
+  const drawer = useRef<DrawerLayoutAndroid>(null);
+  const [drawerPosition, setDrawerPosition] = useState<'left' | 'right'>(
+    'left',
+  );
+  const changeDrawerPosition = () => {
+    if (drawerPosition === 'left') {
+      setDrawerPosition('right');
+    } else {
+      setDrawerPosition('left');
+    }
+  };
+
+  const navigationView = () => (
+    <View style={[styles.container, styles.navigationContainer]}>
+      <Text style={styles.paragraph}>I'm in the Drawer!</Text>
+      <Button
+        title="Close drawer"
+        onPress={() => drawer.current?.closeDrawer()}
+      />
+    </View>
+  );
+
+  return (
+    <DrawerLayoutAndroid
+      ref={drawer}
+      drawerWidth={300}
+      drawerPosition={drawerPosition}
+      renderNavigationView={navigationView}>
+      <View style={styles.container}>
+        <Text style={styles.paragraph}>Drawer on the {drawerPosition}!</Text>
+        <Button
+          title="Change Drawer Position"
+          onPress={() => changeDrawerPosition()}
+        />
+        <Text style={styles.paragraph}>
+          Swipe from the side or press button below to see it!
+        </Text>
+        <Button
+          title="Open drawer"
+          onPress={() => drawer.current?.openDrawer()}
+        />
+      </View>
+    </DrawerLayoutAndroid>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 16,
+  },
+  navigationContainer: {
+    backgroundColor: '#ecf0f1',
+  },
+  paragraph: {
+    padding: 16,
+    fontSize: 15,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+---
+
+# Reference
+
+## Props
+
+### [View Props](view.md#props)
+
+Inherits [View Props](view.md#props).
+
+---
+
+### `drawerBackgroundColor`
+
+Specifies the background color of the drawer. The default value is `white`. If you want to set the opacity of the drawer, use rgba. Example:
+
+```tsx
+return (
+  <DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)" />
+);
+```
+
+| Type               | Required |
+| ------------------ | -------- |
+| [color](colors.md) | No       |
+
+---
+
+### `drawerLockMode`
+
+Specifies the lock mode of the drawer. The drawer can be locked in 3 states:
+
+- unlocked (default), meaning that the drawer will respond (open/close) to touch gestures.
+- locked-closed, meaning that the drawer will stay closed and not respond to gestures.
+- locked-open, meaning that the drawer will stay opened and not respond to gestures. The drawer may still be opened and closed programmatically (`openDrawer`/`closeDrawer`).
+
+| Type                                             | Required |
+| ------------------------------------------------ | -------- |
+| enum('unlocked', 'locked-closed', 'locked-open') | No       |
+
+---
+
+### `drawerPosition`
+
+Specifies the side of the screen from which the drawer will slide in. By default it is set to `left`.
+
+| Type                  | Required |
+| --------------------- | -------- |
+| enum('left', 'right') | No       |
+
+---
+
+### `drawerWidth`
+
+Specifies the width of the drawer, more precisely the width of the view that be pulled in from the edge of the window.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `keyboardDismissMode`
+
+Determines whether the keyboard gets dismissed in response to a drag.
+
+- 'none' (the default), drags do not dismiss the keyboard.
+- 'on-drag', the keyboard is dismissed when a drag begins.
+
+| Type                    | Required |
+| ----------------------- | -------- |
+| enum('none', 'on-drag') | No       |
+
+---
+
+### `onDrawerClose`
+
+Function called whenever the navigation view has been closed.
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `onDrawerOpen`
+
+Function called whenever the navigation view has been opened.
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `onDrawerSlide`
+
+Function called whenever there is an interaction with the navigation view.
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `onDrawerStateChanged`
+
+Function called when the drawer state has changed. The drawer can be in 3 states:
+
+- idle, meaning there is no interaction with the navigation view happening at the time
+- dragging, meaning there is currently an interaction with the navigation view
+- settling, meaning that there was an interaction with the navigation view, and the navigation view is now finishing its closing or opening animation
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `renderNavigationView`
+
+The navigation view that will be rendered to the side of the screen and can be pulled in.
+
+| Type     | Required |
+| -------- | -------- |
+| function | Yes      |
+
+---
+
+### `statusBarBackgroundColor`
+
+Make the drawer take the entire screen and draw the background of the status bar to allow it to open over the status bar. It will only have an effect on API 21+.
+
+| Type               | Required |
+| ------------------ | -------- |
+| [color](colors.md) | No       |
+
+## Methods
+
+### `closeDrawer()`
+
+```tsx
+closeDrawer();
+```
+
+Closes the drawer.
+
+---
+
+### `openDrawer()`
+
+```tsx
+openDrawer();
+```
+
+Opens the drawer.
diff --git a/website/versioned_docs/version-0.86/easing.md b/website/versioned_docs/version-0.86/easing.md
index bb31dd0e4fa..097da0dfc8a 100644
--- a/website/versioned_docs/version-0.86/easing.md
+++ b/website/versioned_docs/version-0.86/easing.md
@@ -1,568 +1,568 @@
----
-id: easing
-title: Easing
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-The `Easing` module implements common easing functions. This module is used by [`Animated.timing()`](animated.md#timing) to convey physically believable motion in animations.
-
-You can find a visualization of some common easing functions at https://easings.net/
-
-### Predefined animations
-
-The `Easing` module provides several predefined animations through the following methods:
-
-- [`back`](easing.md#back) provides a basic animation where the object goes slightly back before moving forward
-- [`bounce`](easing.md#bounce) provides a bouncing animation
-- [`ease`](easing.md#ease) provides a basic inertial animation
-- [`elastic`](easing.md#elastic) provides a basic spring interaction
-
-### Standard functions
-
-Three standard easing functions are provided:
-
-- [`linear`](easing.md#linear)
-- [`quad`](easing.md#quad)
-- [`cubic`](easing.md#cubic)
-
-The [`poly`](easing.md#poly) function can be used to implement quartic, quintic, and other higher power functions.
-
-### Additional functions
-
-Additional mathematical functions are provided by the following methods:
-
-- [`bezier`](easing.md#bezier) provides a cubic bezier curve
-- [`circle`](easing.md#circle) provides a circular function
-- [`sin`](easing.md#sin) provides a sinusoidal function
-- [`exp`](easing.md#exp) provides an exponential function
-
-The following helpers are used to modify other easing functions.
-
-- [`in`](easing.md#in) runs an easing function forwards
-- [`inOut`](easing.md#inout) makes any easing function symmetrical
-- [`out`](easing.md#out) runs an easing function backwards
-
-## Example
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Easing%20Demo&ext=js
-import React, {useRef} from 'react';
-import {
-  Animated,
-  Easing,
-  SectionList,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const opacity = useRef(new Animated.Value(0)).current;
-
-  const animate = easing => {
-    opacity.setValue(0);
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration: 1200,
-      easing,
-      useNativeDriver: false,
-    }).start();
-  };
-
-  const size = opacity.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 80],
-  });
-
-  const animatedStyles = [
-    styles.box,
-    {
-      opacity,
-      width: size,
-      height: size,
-    },
-  ];
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container} edges={['right', 'top', 'left']}>
-        <StatusBar hidden={true} />
-        <Text style={styles.title}>
-          Press rows below to preview the Easing!
-        </Text>
-        <View style={styles.boxContainer}>
-          <Animated.View style={animatedStyles} />
-        </View>
-        <SectionList
-          style={styles.list}
-          sections={SECTIONS}
-          keyExtractor={item => item.title}
-          renderItem={({item}) => (
-            <TouchableOpacity
-              onPress={() => animate(item.easing)}
-              style={styles.listRow}>
-              <Text>{item.title}</Text>
-            </TouchableOpacity>
-          )}
-          renderSectionHeader={({section: {title}}) => (
-            <Text style={styles.listHeader}>{title}</Text>
-          )}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const SECTIONS = [
-  {
-    title: 'Predefined animations',
-    data: [
-      {title: 'Bounce', easing: Easing.bounce},
-      {title: 'Ease', easing: Easing.ease},
-      {title: 'Elastic', easing: Easing.elastic(4)},
-    ],
-  },
-  {
-    title: 'Standard functions',
-    data: [
-      {title: 'Linear', easing: Easing.linear},
-      {title: 'Quad', easing: Easing.quad},
-      {title: 'Cubic', easing: Easing.cubic},
-    ],
-  },
-  {
-    title: 'Additional functions',
-    data: [
-      {
-        title: 'Bezier',
-        easing: Easing.bezier(0, 2, 1, -1),
-      },
-      {title: 'Circle', easing: Easing.circle},
-      {title: 'Sin', easing: Easing.sin},
-      {title: 'Exp', easing: Easing.exp},
-    ],
-  },
-  {
-    title: 'Combinations',
-    data: [
-      {
-        title: 'In + Bounce',
-        easing: Easing.in(Easing.bounce),
-      },
-      {
-        title: 'Out + Exp',
-        easing: Easing.out(Easing.exp),
-      },
-      {
-        title: 'InOut + Elastic',
-        easing: Easing.inOut(Easing.elastic(1)),
-      },
-    ],
-  },
-];
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#20232a',
-  },
-  title: {
-    marginTop: 10,
-    textAlign: 'center',
-    color: '#61dafb',
-  },
-  boxContainer: {
-    height: 160,
-    alignItems: 'center',
-  },
-  box: {
-    marginTop: 32,
-    borderRadius: 4,
-    backgroundColor: '#61dafb',
-  },
-  list: {
-    backgroundColor: '#fff',
-  },
-  listHeader: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    backgroundColor: '#f4f4f4',
-    color: '#999',
-    fontSize: 12,
-    textTransform: 'uppercase',
-  },
-  listRow: {
-    padding: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Easing%20Demo&ext=tsx
-import React, {useRef} from 'react';
-import {
-  Animated,
-  Easing,
-  SectionList,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-  type EasingFunction,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const opacity = useRef(new Animated.Value(0)).current;
-
-  const animate = (easing: EasingFunction) => {
-    opacity.setValue(0);
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration: 1200,
-      easing,
-      useNativeDriver: false,
-    }).start();
-  };
-
-  const size = opacity.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 80],
-  });
-
-  const animatedStyles = [
-    styles.box,
-    {
-      opacity,
-      width: size,
-      height: size,
-    },
-  ];
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container} edges={['right', 'top', 'left']}>
-        <StatusBar hidden={true} />
-        <Text style={styles.title}>
-          Press rows below to preview the Easing!
-        </Text>
-        <View style={styles.boxContainer}>
-          <Animated.View style={animatedStyles} />
-        </View>
-        <SectionList
-          style={styles.list}
-          sections={SECTIONS}
-          keyExtractor={item => item.title}
-          renderItem={({item}) => (
-            <TouchableOpacity
-              onPress={() => animate(item.easing)}
-              style={styles.listRow}>
-              <Text>{item.title}</Text>
-            </TouchableOpacity>
-          )}
-          renderSectionHeader={({section: {title}}) => (
-            <Text style={styles.listHeader}>{title}</Text>
-          )}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const SECTIONS = [
-  {
-    title: 'Predefined animations',
-    data: [
-      {title: 'Bounce', easing: Easing.bounce},
-      {title: 'Ease', easing: Easing.ease},
-      {title: 'Elastic', easing: Easing.elastic(4)},
-    ],
-  },
-  {
-    title: 'Standard functions',
-    data: [
-      {title: 'Linear', easing: Easing.linear},
-      {title: 'Quad', easing: Easing.quad},
-      {title: 'Cubic', easing: Easing.cubic},
-    ],
-  },
-  {
-    title: 'Additional functions',
-    data: [
-      {
-        title: 'Bezier',
-        easing: Easing.bezier(0, 2, 1, -1),
-      },
-      {title: 'Circle', easing: Easing.circle},
-      {title: 'Sin', easing: Easing.sin},
-      {title: 'Exp', easing: Easing.exp},
-    ],
-  },
-  {
-    title: 'Combinations',
-    data: [
-      {
-        title: 'In + Bounce',
-        easing: Easing.in(Easing.bounce),
-      },
-      {
-        title: 'Out + Exp',
-        easing: Easing.out(Easing.exp),
-      },
-      {
-        title: 'InOut + Elastic',
-        easing: Easing.inOut(Easing.elastic(1)),
-      },
-    ],
-  },
-];
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#20232a',
-  },
-  title: {
-    marginTop: 10,
-    textAlign: 'center',
-    color: '#61dafb',
-  },
-  boxContainer: {
-    height: 160,
-    alignItems: 'center',
-  },
-  box: {
-    marginTop: 32,
-    borderRadius: 4,
-    backgroundColor: '#61dafb',
-  },
-  list: {
-    backgroundColor: '#fff',
-  },
-  listHeader: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    backgroundColor: '#f4f4f4',
-    color: '#999',
-    fontSize: 12,
-    textTransform: 'uppercase',
-  },
-  listRow: {
-    padding: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
----
-
-# Reference
-
-## Methods
-
-### `step0()`
-
-```tsx
-static step0(n: number);
-```
-
-A stepping function, returns 1 for any positive value of `n`.
-
----
-
-### `step1()`
-
-```tsx
-static step1(n: number);
-```
-
-A stepping function, returns 1 if `n` is greater than or equal to 1.
-
----
-
-### `linear()`
-
-```tsx
-static linear(t: number);
-```
-
-A linear function, `f(t) = t`. Position correlates to elapsed time one to one.
-
-https://cubic-bezier.com/#0,0,1,1
-
----
-
-### `ease()`
-
-```tsx
-static ease(t: number);
-```
-
-A basic inertial interaction, similar to an object slowly accelerating to speed.
-
-https://cubic-bezier.com/#.42,0,1,1
-
----
-
-### `quad()`
-
-```tsx
-static quad(t: number);
-```
-
-A quadratic function, `f(t) = t * t`. Position equals the square of elapsed time.
-
-https://easings.net/#easeInQuad
-
----
-
-### `cubic()`
-
-```tsx
-static cubic(t: number);
-```
-
-A cubic function, `f(t) = t * t * t`. Position equals the cube of elapsed time.
-
-https://easings.net/#easeInCubic
-
----
-
-### `poly()`
-
-```tsx
-static poly(n: number);
-```
-
-A power function. Position is equal to the Nth power of elapsed time.
-
-n = 4: https://easings.net/#easeInQuart n = 5: https://easings.net/#easeInQuint
-
----
-
-### `sin()`
-
-```tsx
-static sin(t: number);
-```
-
-A sinusoidal function.
-
-https://easings.net/#easeInSine
-
----
-
-### `circle()`
-
-```tsx
-static circle(t: number);
-```
-
-A circular function.
-
-https://easings.net/#easeInCirc
-
----
-
-### `exp()`
-
-```tsx
-static exp(t: number);
-```
-
-An exponential function.
-
-https://easings.net/#easeInExpo
-
----
-
-### `elastic()`
-
-```tsx
-static elastic(bounciness: number);
-```
-
-A basic elastic interaction, similar to a spring oscillating back and forth.
-
-Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.
-
-https://easings.net/#easeInElastic
-
----
-
-### `back()`
-
-```tsx
-static back(s)
-```
-
-Use with `Animated.parallel()` to create a basic effect where the object animates back slightly as the animation starts.
-
----
-
-### `bounce()`
-
-```tsx
-static bounce(t: number);
-```
-
-Provides a basic bouncing effect.
-
-https://easings.net/#easeInBounce
-
----
-
-### `bezier()`
-
-```tsx
-static bezier(x1: number, y1: number, x2: number, y2: number);
-```
-
-Provides a cubic bezier curve, equivalent to CSS Transitions' `transition-timing-function`.
-
-A useful tool to visualize cubic bezier curves can be found at https://cubic-bezier.com/
-
----
-
-### `in()`
-
-```tsx
-static in(easing: number);
-```
-
-Runs an easing function forwards.
-
----
-
-### `out()`
-
-```tsx
-static out(easing: number);
-```
-
-Runs an easing function backwards.
-
----
-
-### `inOut()`
-
-```tsx
-static inOut(easing: number);
-```
-
-Makes any easing function symmetrical. The easing function will run forwards for half of the duration, then backwards for the rest of the duration.
+---
+id: easing
+title: Easing
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+The `Easing` module implements common easing functions. This module is used by [`Animated.timing()`](animated.md#timing) to convey physically believable motion in animations.
+
+You can find a visualization of some common easing functions at https://easings.net/
+
+### Predefined animations
+
+The `Easing` module provides several predefined animations through the following methods:
+
+- [`back`](easing.md#back) provides a basic animation where the object goes slightly back before moving forward
+- [`bounce`](easing.md#bounce) provides a bouncing animation
+- [`ease`](easing.md#ease) provides a basic inertial animation
+- [`elastic`](easing.md#elastic) provides a basic spring interaction
+
+### Standard functions
+
+Three standard easing functions are provided:
+
+- [`linear`](easing.md#linear)
+- [`quad`](easing.md#quad)
+- [`cubic`](easing.md#cubic)
+
+The [`poly`](easing.md#poly) function can be used to implement quartic, quintic, and other higher power functions.
+
+### Additional functions
+
+Additional mathematical functions are provided by the following methods:
+
+- [`bezier`](easing.md#bezier) provides a cubic bezier curve
+- [`circle`](easing.md#circle) provides a circular function
+- [`sin`](easing.md#sin) provides a sinusoidal function
+- [`exp`](easing.md#exp) provides an exponential function
+
+The following helpers are used to modify other easing functions.
+
+- [`in`](easing.md#in) runs an easing function forwards
+- [`inOut`](easing.md#inout) makes any easing function symmetrical
+- [`out`](easing.md#out) runs an easing function backwards
+
+## Example
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Easing%20Demo&ext=js
+import {useRef} from 'react';
+import {
+  Animated,
+  Easing,
+  SectionList,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  const animate = easing => {
+    opacity.setValue(0);
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration: 1200,
+      easing,
+      useNativeDriver: false,
+    }).start();
+  };
+
+  const size = opacity.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 80],
+  });
+
+  const animatedStyles = [
+    styles.box,
+    {
+      opacity,
+      width: size,
+      height: size,
+    },
+  ];
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container} edges={['right', 'top', 'left']}>
+        <StatusBar hidden={true} />
+        <Text style={styles.title}>
+          Press rows below to preview the Easing!
+        </Text>
+        <View style={styles.boxContainer}>
+          <Animated.View style={animatedStyles} />
+        </View>
+        <SectionList
+          style={styles.list}
+          sections={SECTIONS}
+          keyExtractor={item => item.title}
+          renderItem={({item}) => (
+            <TouchableOpacity
+              onPress={() => animate(item.easing)}
+              style={styles.listRow}>
+              <Text>{item.title}</Text>
+            </TouchableOpacity>
+          )}
+          renderSectionHeader={({section: {title}}) => (
+            <Text style={styles.listHeader}>{title}</Text>
+          )}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const SECTIONS = [
+  {
+    title: 'Predefined animations',
+    data: [
+      {title: 'Bounce', easing: Easing.bounce},
+      {title: 'Ease', easing: Easing.ease},
+      {title: 'Elastic', easing: Easing.elastic(4)},
+    ],
+  },
+  {
+    title: 'Standard functions',
+    data: [
+      {title: 'Linear', easing: Easing.linear},
+      {title: 'Quad', easing: Easing.quad},
+      {title: 'Cubic', easing: Easing.cubic},
+    ],
+  },
+  {
+    title: 'Additional functions',
+    data: [
+      {
+        title: 'Bezier',
+        easing: Easing.bezier(0, 2, 1, -1),
+      },
+      {title: 'Circle', easing: Easing.circle},
+      {title: 'Sin', easing: Easing.sin},
+      {title: 'Exp', easing: Easing.exp},
+    ],
+  },
+  {
+    title: 'Combinations',
+    data: [
+      {
+        title: 'In + Bounce',
+        easing: Easing.in(Easing.bounce),
+      },
+      {
+        title: 'Out + Exp',
+        easing: Easing.out(Easing.exp),
+      },
+      {
+        title: 'InOut + Elastic',
+        easing: Easing.inOut(Easing.elastic(1)),
+      },
+    ],
+  },
+];
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#20232a',
+  },
+  title: {
+    marginTop: 10,
+    textAlign: 'center',
+    color: '#61dafb',
+  },
+  boxContainer: {
+    height: 160,
+    alignItems: 'center',
+  },
+  box: {
+    marginTop: 32,
+    borderRadius: 4,
+    backgroundColor: '#61dafb',
+  },
+  list: {
+    backgroundColor: '#fff',
+  },
+  listHeader: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    backgroundColor: '#f4f4f4',
+    color: '#999',
+    fontSize: 12,
+    textTransform: 'uppercase',
+  },
+  listRow: {
+    padding: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Easing%20Demo&ext=tsx
+import {useRef} from 'react';
+import {
+  Animated,
+  Easing,
+  SectionList,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  type EasingFunction,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  const animate = (easing: EasingFunction) => {
+    opacity.setValue(0);
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration: 1200,
+      easing,
+      useNativeDriver: false,
+    }).start();
+  };
+
+  const size = opacity.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 80],
+  });
+
+  const animatedStyles = [
+    styles.box,
+    {
+      opacity,
+      width: size,
+      height: size,
+    },
+  ];
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container} edges={['right', 'top', 'left']}>
+        <StatusBar hidden={true} />
+        <Text style={styles.title}>
+          Press rows below to preview the Easing!
+        </Text>
+        <View style={styles.boxContainer}>
+          <Animated.View style={animatedStyles} />
+        </View>
+        <SectionList
+          style={styles.list}
+          sections={SECTIONS}
+          keyExtractor={item => item.title}
+          renderItem={({item}) => (
+            <TouchableOpacity
+              onPress={() => animate(item.easing)}
+              style={styles.listRow}>
+              <Text>{item.title}</Text>
+            </TouchableOpacity>
+          )}
+          renderSectionHeader={({section: {title}}) => (
+            <Text style={styles.listHeader}>{title}</Text>
+          )}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const SECTIONS = [
+  {
+    title: 'Predefined animations',
+    data: [
+      {title: 'Bounce', easing: Easing.bounce},
+      {title: 'Ease', easing: Easing.ease},
+      {title: 'Elastic', easing: Easing.elastic(4)},
+    ],
+  },
+  {
+    title: 'Standard functions',
+    data: [
+      {title: 'Linear', easing: Easing.linear},
+      {title: 'Quad', easing: Easing.quad},
+      {title: 'Cubic', easing: Easing.cubic},
+    ],
+  },
+  {
+    title: 'Additional functions',
+    data: [
+      {
+        title: 'Bezier',
+        easing: Easing.bezier(0, 2, 1, -1),
+      },
+      {title: 'Circle', easing: Easing.circle},
+      {title: 'Sin', easing: Easing.sin},
+      {title: 'Exp', easing: Easing.exp},
+    ],
+  },
+  {
+    title: 'Combinations',
+    data: [
+      {
+        title: 'In + Bounce',
+        easing: Easing.in(Easing.bounce),
+      },
+      {
+        title: 'Out + Exp',
+        easing: Easing.out(Easing.exp),
+      },
+      {
+        title: 'InOut + Elastic',
+        easing: Easing.inOut(Easing.elastic(1)),
+      },
+    ],
+  },
+];
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#20232a',
+  },
+  title: {
+    marginTop: 10,
+    textAlign: 'center',
+    color: '#61dafb',
+  },
+  boxContainer: {
+    height: 160,
+    alignItems: 'center',
+  },
+  box: {
+    marginTop: 32,
+    borderRadius: 4,
+    backgroundColor: '#61dafb',
+  },
+  list: {
+    backgroundColor: '#fff',
+  },
+  listHeader: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    backgroundColor: '#f4f4f4',
+    color: '#999',
+    fontSize: 12,
+    textTransform: 'uppercase',
+  },
+  listRow: {
+    padding: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+---
+
+# Reference
+
+## Methods
+
+### `step0()`
+
+```tsx
+static step0(n: number);
+```
+
+A stepping function, returns 1 for any positive value of `n`.
+
+---
+
+### `step1()`
+
+```tsx
+static step1(n: number);
+```
+
+A stepping function, returns 1 if `n` is greater than or equal to 1.
+
+---
+
+### `linear()`
+
+```tsx
+static linear(t: number);
+```
+
+A linear function, `f(t) = t`. Position correlates to elapsed time one to one.
+
+https://cubic-bezier.com/#0,0,1,1
+
+---
+
+### `ease()`
+
+```tsx
+static ease(t: number);
+```
+
+A basic inertial interaction, similar to an object slowly accelerating to speed.
+
+https://cubic-bezier.com/#.42,0,1,1
+
+---
+
+### `quad()`
+
+```tsx
+static quad(t: number);
+```
+
+A quadratic function, `f(t) = t * t`. Position equals the square of elapsed time.
+
+https://easings.net/#easeInQuad
+
+---
+
+### `cubic()`
+
+```tsx
+static cubic(t: number);
+```
+
+A cubic function, `f(t) = t * t * t`. Position equals the cube of elapsed time.
+
+https://easings.net/#easeInCubic
+
+---
+
+### `poly()`
+
+```tsx
+static poly(n: number);
+```
+
+A power function. Position is equal to the Nth power of elapsed time.
+
+n = 4: https://easings.net/#easeInQuart n = 5: https://easings.net/#easeInQuint
+
+---
+
+### `sin()`
+
+```tsx
+static sin(t: number);
+```
+
+A sinusoidal function.
+
+https://easings.net/#easeInSine
+
+---
+
+### `circle()`
+
+```tsx
+static circle(t: number);
+```
+
+A circular function.
+
+https://easings.net/#easeInCirc
+
+---
+
+### `exp()`
+
+```tsx
+static exp(t: number);
+```
+
+An exponential function.
+
+https://easings.net/#easeInExpo
+
+---
+
+### `elastic()`
+
+```tsx
+static elastic(bounciness: number);
+```
+
+A basic elastic interaction, similar to a spring oscillating back and forth.
+
+Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.
+
+https://easings.net/#easeInElastic
+
+---
+
+### `back()`
+
+```tsx
+static back(s)
+```
+
+Use with `Animated.parallel()` to create a basic effect where the object animates back slightly as the animation starts.
+
+---
+
+### `bounce()`
+
+```tsx
+static bounce(t: number);
+```
+
+Provides a basic bouncing effect.
+
+https://easings.net/#easeInBounce
+
+---
+
+### `bezier()`
+
+```tsx
+static bezier(x1: number, y1: number, x2: number, y2: number);
+```
+
+Provides a cubic bezier curve, equivalent to CSS Transitions' `transition-timing-function`.
+
+A useful tool to visualize cubic bezier curves can be found at https://cubic-bezier.com/
+
+---
+
+### `in()`
+
+```tsx
+static in(easing: number);
+```
+
+Runs an easing function forwards.
+
+---
+
+### `out()`
+
+```tsx
+static out(easing: number);
+```
+
+Runs an easing function backwards.
+
+---
+
+### `inOut()`
+
+```tsx
+static inOut(easing: number);
+```
+
+Makes any easing function symmetrical. The easing function will run forwards for half of the duration, then backwards for the rest of the duration.
diff --git a/website/versioned_docs/version-0.86/element-nodes.md b/website/versioned_docs/version-0.86/element-nodes.md
index 654c870b37f..f48b808eefc 100644
--- a/website/versioned_docs/version-0.86/element-nodes.md
+++ b/website/versioned_docs/version-0.86/element-nodes.md
@@ -1,135 +1,135 @@
----
-id: element-nodes
-title: Element nodes
----
-
-Element nodes represent native components in the native view tree (similar to [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) nodes on Web).
-
-They are provided by all native components, and by many built-in components, via refs:
-
-```SnackPlayer ext=js&name=Element%20instances%20example
-import * as React from 'react';
-import { View, SafeAreaView, StyleSheet, Text } from 'react-native';
-
-const ViewWithRefs = () => {
-  const ref = React.useRef(null);
-  const [viewInfo, setViewInfo] = React.useState('');
-
-  React.useEffect(() => {
-    // `element` is an object implementing the interface described here.
-    const element = ref.current;
-    const rect = JSON.stringify(element.getBoundingClientRect());
-    setViewInfo(
-      `Bounding rect is: ${rect}.\nText content is: ${element.textContent}`,
-    );
-  }, []);
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <View ref={ref} style={styles.content}>
-        <Text>Hello world!</Text>
-      </View>
-      <Text>{viewInfo}</Text>
-    </SafeAreaView>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  content: {
-    padding: 10,
-    backgroundColor: 'gray',
-  },
-});
-
-export default ViewWithRefs;
-```
-
-:::info
-Note that some built-in components are only a container for other components (including native components). For example, `ScrollView` internally renders a native scroll view and a native view, which are accessible through the ref it provides using methods like `getNativeScrollRef()` and `getInnerViewRef()`.
-:::
-
----
-
-## Reference
-
-### Web-compatible API
-
-From [`HTMLElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement):
-
-- Properties
-  - [`offsetHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight)
-  - [`offsetLeft`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft)
-  - [`offsetParent`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent)
-  - [`offsetTop`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop)
-  - [`offsetWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth)
-- Methods
-  - [`blur()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/blur).
-  - [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus).
-    - ⚠️ The `options` parameter is not supported.
-
-From [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element):
-
-- Properties
-  - [`childElementCount`](https://developer.mozilla.org/en-US/docs/Web/API/Element/childElementCount)
-  - [`children`](https://developer.mozilla.org/en-US/docs/Web/API/Element/children)
-  - [`clientHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight)
-  - [`clientLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft)
-  - [`clientTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop)
-  - [`clientWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth)
-  - [`firstElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Element/firstElementChild)
-  - [`id`](https://developer.mozilla.org/en-US/docs/Web/API/Element/id)
-    - ℹ️ Returns the value of the `id` or `nativeID` props.
-  - [`lastElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Element/lastElementChild)
-  - [`nextElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Element/nextElementSibling)
-  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
-  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
-  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
-  - [`previousElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Element/previousElementSibling)
-  - [`scrollHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight)
-  - [`scrollLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft)
-    - ⚠️ For built-in components, only `ScrollView` instances can return a value other than zero.
-  - [`scrollTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop)
-    - ⚠️ For built-in components, only `ScrollView` instances can return a value other than zero.
-  - [`scrollWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth)
-  - [`tagName`](https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName)
-    - ℹ️ Returns a normalized native component name prefixed with `RN:`, like `RN:View`.
-  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
-- Methods
-  - [`getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)
-  - [`hasPointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/hasPointerCapture)
-  - [`setPointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture)
-  - [`releasePointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/releasePointerCapture)
-
-From [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/Node):
-
-- Properties
-  - [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)
-  - [`firstChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild)
-  - [`isConnected`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected)
-  - [`lastChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild)
-  - [`nextSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling)
-  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
-  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
-  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
-  - [`ownerDocument`](https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument)
-    - ℹ️ Will return the [document node](/docs/next/document-nodes) where this component was rendered.
-  - [`parentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)
-  - [`parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)
-  - [`previousSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling)
-  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
-- Methods
-  - [`compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
-  - [`contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains)
-  - [`getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)
-    - ℹ️ Will return a reference to itself if the component is not mounted.
-  - [`hasChildNodes()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes)
-
-### Legacy API
-
-- [`measure()`](/docs/next/legacy/direct-manipulation#measurecallback)
-- [`measureInWindow()`](/docs/next/legacy/direct-manipulation#measureinwindowcallback)
-- [`measureLayout()`](/docs/next/legacy/direct-manipulation#measurelayoutrelativetonativecomponentref-onsuccess-onfail)
-- [`setNativeProps()`](/docs/next/legacy/direct-manipulation#setnativeprops-with-touchableopacity)
+---
+id: element-nodes
+title: Element nodes
+---
+
+Element nodes represent native components in the native view tree (similar to [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) nodes on Web).
+
+They are provided by all native components, and by many built-in components, via refs:
+
+```SnackPlayer ext=js&name=Element%20instances%20example
+import {useEffect, useRef, useState} from 'react';
+import {View, SafeAreaView, StyleSheet, Text} from 'react-native';
+
+const ViewWithRefs = () => {
+  const ref = useRef(null);
+  const [viewInfo, setViewInfo] = useState('');
+
+  useEffect(() => {
+    // `element` is an object implementing the interface described here.
+    const element = ref.current;
+    const rect = JSON.stringify(element.getBoundingClientRect());
+    setViewInfo(
+      `Bounding rect is: ${rect}.\nText content is: ${element.textContent}`,
+    );
+  }, []);
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View ref={ref} style={styles.content}>
+        <Text>Hello world!</Text>
+      </View>
+      <Text>{viewInfo}</Text>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    padding: 10,
+    backgroundColor: 'gray',
+  },
+});
+
+export default ViewWithRefs;
+```
+
+:::info
+Note that some built-in components are only a container for other components (including native components). For example, `ScrollView` internally renders a native scroll view and a native view, which are accessible through the ref it provides using methods like `getNativeScrollRef()` and `getInnerViewRef()`.
+:::
+
+---
+
+## Reference
+
+### Web-compatible API
+
+From [`HTMLElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement):
+
+- Properties
+  - [`offsetHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight)
+  - [`offsetLeft`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft)
+  - [`offsetParent`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent)
+  - [`offsetTop`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop)
+  - [`offsetWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth)
+- Methods
+  - [`blur()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/blur).
+  - [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus).
+    - ⚠️ The `options` parameter is not supported.
+
+From [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element):
+
+- Properties
+  - [`childElementCount`](https://developer.mozilla.org/en-US/docs/Web/API/Element/childElementCount)
+  - [`children`](https://developer.mozilla.org/en-US/docs/Web/API/Element/children)
+  - [`clientHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight)
+  - [`clientLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft)
+  - [`clientTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop)
+  - [`clientWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth)
+  - [`firstElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Element/firstElementChild)
+  - [`id`](https://developer.mozilla.org/en-US/docs/Web/API/Element/id)
+    - ℹ️ Returns the value of the `id` or `nativeID` props.
+  - [`lastElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Element/lastElementChild)
+  - [`nextElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Element/nextElementSibling)
+  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
+  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
+  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
+  - [`previousElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Element/previousElementSibling)
+  - [`scrollHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight)
+  - [`scrollLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft)
+    - ⚠️ For built-in components, only `ScrollView` instances can return a value other than zero.
+  - [`scrollTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop)
+    - ⚠️ For built-in components, only `ScrollView` instances can return a value other than zero.
+  - [`scrollWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth)
+  - [`tagName`](https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName)
+    - ℹ️ Returns a normalized native component name prefixed with `RN:`, like `RN:View`.
+  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
+- Methods
+  - [`getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)
+  - [`hasPointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/hasPointerCapture)
+  - [`setPointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture)
+  - [`releasePointerCapture()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/releasePointerCapture)
+
+From [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/Node):
+
+- Properties
+  - [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)
+  - [`firstChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild)
+  - [`isConnected`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected)
+  - [`lastChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild)
+  - [`nextSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling)
+  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
+  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
+  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
+  - [`ownerDocument`](https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument)
+    - ℹ️ Will return the [document node](/docs/next/document-nodes) where this component was rendered.
+  - [`parentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)
+  - [`parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)
+  - [`previousSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling)
+  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
+- Methods
+  - [`compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
+  - [`contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains)
+  - [`getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)
+    - ℹ️ Will return a reference to itself if the component is not mounted.
+  - [`hasChildNodes()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes)
+
+### Legacy API
+
+- [`measure()`](/docs/next/legacy/direct-manipulation#measurecallback)
+- [`measureInWindow()`](/docs/next/legacy/direct-manipulation#measureinwindowcallback)
+- [`measureLayout()`](/docs/next/legacy/direct-manipulation#measurelayoutrelativetonativecomponentref-onsuccess-onfail)
+- [`setNativeProps()`](/docs/next/legacy/direct-manipulation#setnativeprops-with-touchableopacity)
diff --git a/website/versioned_docs/version-0.86/fabric-native-components.md b/website/versioned_docs/version-0.86/fabric-native-components.md
index 2a509a7174e..6efdd572e92 100644
--- a/website/versioned_docs/version-0.86/fabric-native-components.md
+++ b/website/versioned_docs/version-0.86/fabric-native-components.md
@@ -172,7 +172,6 @@ This guide shows you how to create a Native Component that only works with the N
 Finally, you can use the new component in your app. Update your generated `App.tsx` to:
 
 ```javascript title="Demo/App.tsx"
-import React from 'react';
 import {Alert, StyleSheet, View} from 'react-native';
 import WebView from './specs/WebViewNativeComponent';
 
diff --git a/website/versioned_docs/version-0.86/flatlist.md b/website/versioned_docs/version-0.86/flatlist.md
index 56505e27ca8..a7cceaf3ada 100644
--- a/website/versioned_docs/version-0.86/flatlist.md
+++ b/website/versioned_docs/version-0.86/flatlist.md
@@ -1,861 +1,859 @@
----
-id: flatlist
-title: FlatList
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-A performant interface for rendering basic, flat lists, supporting the most handy features:
-
-- Fully cross-platform.
-- Optional horizontal mode.
-- Configurable viewability callbacks.
-- Header support.
-- Footer support.
-- Separator support.
-- Pull to Refresh.
-- Scroll loading.
-- ScrollToIndex support.
-- Multiple column support.
-
-If you need section support, use [`<SectionList>`](sectionlist.md).
-
-## Example
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Simple%20FlatList%20Example&ext=js
-import React from 'react';
-import {View, FlatList, StyleSheet, Text, StatusBar} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const DATA = [
-  {
-    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
-    title: 'First Item',
-  },
-  {
-    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
-    title: 'Second Item',
-  },
-  {
-    id: '58694a0f-3da1-471f-bd96-145571e29d72',
-    title: 'Third Item',
-  },
-];
-
-const Item = ({title}) => (
-  <View style={styles.item}>
-    <Text style={styles.title}>{title}</Text>
-  </View>
-);
-
-const App = () => (
-  <SafeAreaProvider>
-    <SafeAreaView style={styles.container}>
-      <FlatList
-        data={DATA}
-        renderItem={({item}) => <Item title={item.title} />}
-        keyExtractor={item => item.id}
-      />
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: StatusBar.currentHeight || 0,
-  },
-  item: {
-    backgroundColor: '#f9c2ff',
-    padding: 20,
-    marginVertical: 8,
-    marginHorizontal: 16,
-  },
-  title: {
-    fontSize: 32,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Simple%20FlatList%20Example&ext=tsx
-import React from 'react';
-import {View, FlatList, StyleSheet, Text, StatusBar} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const DATA = [
-  {
-    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
-    title: 'First Item',
-  },
-  {
-    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
-    title: 'Second Item',
-  },
-  {
-    id: '58694a0f-3da1-471f-bd96-145571e29d72',
-    title: 'Third Item',
-  },
-];
-
-type ItemProps = {title: string};
-
-const Item = ({title}: ItemProps) => (
-  <View style={styles.item}>
-    <Text style={styles.title}>{title}</Text>
-  </View>
-);
-
-const App = () => (
-  <SafeAreaProvider>
-    <SafeAreaView style={styles.container}>
-      <FlatList
-        data={DATA}
-        renderItem={({item}) => <Item title={item.title} />}
-        keyExtractor={item => item.id}
-      />
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: StatusBar.currentHeight || 0,
-  },
-  item: {
-    backgroundColor: '#f9c2ff',
-    padding: 20,
-    marginVertical: 8,
-    marginHorizontal: 16,
-  },
-  title: {
-    fontSize: 32,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-To render multiple columns, use the [`numColumns`](flatlist.md#numcolumns) prop. Using this approach instead of a `flexWrap` layout can prevent conflicts with the item height logic.
-
-More complex, selectable example below.
-
-- By passing `extraData={selectedId}` to `FlatList` we make sure `FlatList` itself will re-render when the state changes. Without setting this prop, `FlatList` would not know it needs to re-render any items because it is a `PureComponent` and the prop comparison will not show any changes.
-- `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=flatlist-selectable&ext=js
-import React, {useState} from 'react';
-import {
-  FlatList,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const DATA = [
-  {
-    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
-    title: 'First Item',
-  },
-  {
-    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
-    title: 'Second Item',
-  },
-  {
-    id: '58694a0f-3da1-471f-bd96-145571e29d72',
-    title: 'Third Item',
-  },
-];
-
-const Item = ({item, onPress, backgroundColor, textColor}) => (
-  <TouchableOpacity onPress={onPress} style={[styles.item, {backgroundColor}]}>
-    <Text style={[styles.title, {color: textColor}]}>{item.title}</Text>
-  </TouchableOpacity>
-);
-
-const App = () => {
-  const [selectedId, setSelectedId] = useState();
-
-  const renderItem = ({item}) => {
-    const backgroundColor = item.id === selectedId ? '#6e3b6e' : '#f9c2ff';
-    const color = item.id === selectedId ? 'white' : 'black';
-
-    return (
-      <Item
-        item={item}
-        onPress={() => setSelectedId(item.id)}
-        backgroundColor={backgroundColor}
-        textColor={color}
-      />
-    );
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <FlatList
-          data={DATA}
-          renderItem={renderItem}
-          keyExtractor={item => item.id}
-          extraData={selectedId}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: StatusBar.currentHeight || 0,
-  },
-  item: {
-    padding: 20,
-    marginVertical: 8,
-    marginHorizontal: 16,
-  },
-  title: {
-    fontSize: 32,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=flatlist-selectable&ext=tsx
-import React, {useState} from 'react';
-import {
-  FlatList,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-type ItemData = {
-  id: string;
-  title: string;
-};
-
-const DATA: ItemData[] = [
-  {
-    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
-    title: 'First Item',
-  },
-  {
-    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
-    title: 'Second Item',
-  },
-  {
-    id: '58694a0f-3da1-471f-bd96-145571e29d72',
-    title: 'Third Item',
-  },
-];
-
-type ItemProps = {
-  item: ItemData;
-  onPress: () => void;
-  backgroundColor: string;
-  textColor: string;
-};
-
-const Item = ({item, onPress, backgroundColor, textColor}: ItemProps) => (
-  <TouchableOpacity onPress={onPress} style={[styles.item, {backgroundColor}]}>
-    <Text style={[styles.title, {color: textColor}]}>{item.title}</Text>
-  </TouchableOpacity>
-);
-
-const App = () => {
-  const [selectedId, setSelectedId] = useState<string>();
-
-  const renderItem = ({item}: {item: ItemData}) => {
-    const backgroundColor = item.id === selectedId ? '#6e3b6e' : '#f9c2ff';
-    const color = item.id === selectedId ? 'white' : 'black';
-
-    return (
-      <Item
-        item={item}
-        onPress={() => setSelectedId(item.id)}
-        backgroundColor={backgroundColor}
-        textColor={color}
-      />
-    );
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <FlatList
-          data={DATA}
-          renderItem={renderItem}
-          keyExtractor={item => item.id}
-          extraData={selectedId}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: StatusBar.currentHeight || 0,
-  },
-  item: {
-    padding: 20,
-    marginVertical: 8,
-    marginHorizontal: 16,
-  },
-  title: {
-    fontSize: 32,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-This is a convenience wrapper around [`<VirtualizedList>`](virtualizedlist.md), and thus inherits its props (as well as those of [`<ScrollView>`](scrollview.md)) that aren't explicitly listed here, along with the following caveats:
-
-- Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.
-- This is a `PureComponent` which means that it will not re-render if `props` remain shallow-equal. Make sure that everything your `renderItem` function depends on is passed as a prop (e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on changes. This includes the `data` prop and parent component state.
-- In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes.
-- By default, the list looks for a `key` prop on each item and uses that for the React key. Alternatively, you can provide a custom `keyExtractor` prop.
-
----
-
-# Reference
-
-## Props
-
-### [VirtualizedList Props](virtualizedlist.md#props)
-
-Inherits [VirtualizedList Props](virtualizedlist.md#props).
-
----
-
-### <div className="label required basic">Required</div> **`renderItem`**
-
-```tsx
-renderItem({
-  item: ItemT,
-  index: number,
-  separators: {
-    highlight: () => void;
-    unhighlight: () => void;
-    updateProps: (select: 'leading' | 'trailing', newProps: any) => void;
-  }
-}): JSX.Element;
-```
-
-Takes an item from `data` and renders it into the list.
-
-Provides additional metadata like `index` if you need it, as well as a more generic `separators.updateProps` function which let you set whatever props you want to change the rendering of either the leading separator or trailing separator in case the more common `highlight` and `unhighlight` (which set the `highlighted: boolean` prop) are insufficient for your use case.
-
-| Type     |
-| -------- |
-| function |
-
-- `item` (Object): The item from `data` being rendered.
-- `index` (number): The index corresponding to this item in the `data` array.
-- `separators` (Object)
-  - `highlight` (Function)
-  - `unhighlight` (Function)
-  - `updateProps` (Function)
-    - `select` (enum('leading', 'trailing'))
-    - `newProps` (Object)
-
-Example usage:
-
-```tsx
-<FlatList
-  ItemSeparatorComponent={
-    Platform.OS !== 'android' &&
-    (({highlighted}) => (
-      <View
-        style={[style.separator, highlighted && {marginLeft: 0}]}
-      />
-    ))
-  }
-  data={[{title: 'Title Text', key: 'item1'}]}
-  renderItem={({item, index, separators}) => (
-    <TouchableHighlight
-      key={item.key}
-      onPress={() => this._onPress(item)}
-      onShowUnderlay={separators.highlight}
-      onHideUnderlay={separators.unhighlight}>
-      <View style={{backgroundColor: 'white'}}>
-        <Text>{item.title}</Text>
-      </View>
-    </TouchableHighlight>
-  )}
-/>
-```
-
----
-
-### <div className="label required basic">Required</div> **`data`**
-
-An array (or array-like list) of items to render. Other data types can be used by targeting [`VirtualizedList`](virtualizedlist.md) directly.
-
-| Type      |
-| --------- |
-| ArrayLike |
-
----
-
-### `ItemSeparatorComponent`
-
-Rendered in between each item, but not at the top or bottom. By default, `highlighted` and `leadingItem` props are provided. `renderItem` provides `separators.highlight`/`unhighlight` which will update the `highlighted` prop, but you can also add custom props with `separators.updateProps`. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
-
-| Type                         |
-| ---------------------------- |
-| component, function, element |
-
----
-
-### `ListEmptyComponent`
-
-Rendered when the list is empty. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
-
-| Type               |
-| ------------------ |
-| component, element |
-
----
-
-### `ListFooterComponent`
-
-Rendered at the bottom of all the items. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
-
-| Type               |
-| ------------------ |
-| component, element |
-
----
-
-### `ListFooterComponentStyle`
-
-Styling for internal View for `ListFooterComponent`.
-
-| Type                           |
-| ------------------------------ |
-| [View Style](view-style-props) |
-
----
-
-### `ListHeaderComponent`
-
-Rendered at the top of all the items. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
-
-| Type               |
-| ------------------ |
-| component, element |
-
----
-
-### `ListHeaderComponentStyle`
-
-Styling for internal View for `ListHeaderComponent`.
-
-| Type                           |
-| ------------------------------ |
-| [View Style](view-style-props) |
-
----
-
-### `columnWrapperStyle`
-
-Optional custom style for multi-item rows generated when `numColumns > 1`.
-
-| Type                           |
-| ------------------------------ |
-| [View Style](view-style-props) |
-
----
-
-### `extraData`
-
-A marker property for telling the list to re-render (since it implements `PureComponent`). If any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the `data` prop, stick it here and treat it immutably.
-
-| Type |
-| ---- |
-| any  |
-
----
-
-### `getItemLayout`
-
-```tsx
-(data, index) => {length: number, offset: number, index: number}
-```
-
-`getItemLayout` is an optional optimization that allows skipping the measurement of dynamic content if you know the size (height or width) of items ahead of time. `getItemLayout` is efficient if you have fixed size items, for example:
-
-```tsx
-  getItemLayout={(data, index) => (
-    {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
-  )}
-```
-
-Adding `getItemLayout` can be a great performance boost for lists of several hundred items. Remember to include separator length (height or width) in your offset calculation if you specify `ItemSeparatorComponent`.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `horizontal`
-
-If `true`, renders items next to each other horizontally instead of stacked vertically.
-
-| Type    |
-| ------- |
-| boolean |
-
----
-
-### `initialNumToRender`
-
-How many items to render in the initial batch. This should be enough to fill the screen but not much more. Note these items will never be unmounted as part of the windowed rendering in order to improve perceived performance of scroll-to-top actions.
-
-| Type   | Default |
-| ------ | ------- |
-| number | `10`    |
-
----
-
-### `initialScrollIndex`
-
-Instead of starting at the top with the first item, start at `initialScrollIndex`. This disables the "scroll to top" optimization that keeps the first `initialNumToRender` items always rendered and immediately renders the items starting at this initial index. Requires `getItemLayout` to be implemented.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `inverted`
-
-Reverses the direction of scroll. Uses scale transforms of `-1`.
-
-| Type    |
-| ------- |
-| boolean |
-
----
-
-### `keyExtractor`
-
-```tsx
-(item: ItemT, index: number) => string;
-```
-
-Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks `item.key`, then `item.id`, and then falls back to using the index, like React does.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `numColumns`
-
-Multiple columns can only be rendered with `horizontal={false}` and will zig-zag like a `flexWrap` layout. Items should all be the same height - masonry layouts are not supported.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `onRefresh`
-
-```tsx
-() => void;
-```
-
-If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the `refreshing` prop correctly.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onViewableItemsChanged`
-
-Called when the viewability of rows changes, as defined by the `viewabilityConfig` prop.
-
-| Type                                                                                                  |
-| ----------------------------------------------------------------------------------------------------- |
-| `md (callback: {changed: [ViewToken](viewtoken)[], viewableItems: [ViewToken](viewtoken)[]} => void;` |
-
----
-
-### `progressViewOffset`
-
-Set this when offset is needed for the loading indicator to show correctly.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `refreshing`
-
-Set this true while waiting for new data from a refresh.
-
-| Type    |
-| ------- |
-| boolean |
-
----
-
-### `removeClippedSubviews`
-
-:::warning
-Using this property may lead to bugs (missing content) in some circumstances - use at your own risk.
-:::
-
-When `true`, offscreen child views are removed from their native backing superview when offscreen. This may improve scroll performance for large lists. On Android the default value is `true`.
-
-| Type    |
-| ------- |
-| boolean |
-
----
-
-### `viewabilityConfig`
-
-See [`ViewabilityHelper.js`](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Lists/ViewabilityHelper.js) for flow type and further documentation.
-
-| Type              |
-| ----------------- |
-| ViewabilityConfig |
-
-`viewabilityConfig` takes a type `ViewabilityConfig` an object with following properties
-
-| Property                         | Type    |
-| -------------------------------- | ------- |
-| minimumViewTime                  | number  |
-| viewAreaCoveragePercentThreshold | number  |
-| itemVisiblePercentThreshold      | number  |
-| waitForInteraction               | boolean |
-
-At least one of the `viewAreaCoveragePercentThreshold` or `itemVisiblePercentThreshold` is required. This needs to be done in the `constructor` to avoid following error ([ref](https://github.com/facebook/react-native/issues/17408)):
-
-```
-  Error: Changing viewabilityConfig on the fly is not supported
-```
-
-```tsx
-constructor (props) {
-  super(props)
-
-  this.viewabilityConfig = {
-      waitForInteraction: true,
-      viewAreaCoveragePercentThreshold: 95
-  }
-}
-```
-
-```tsx
-<FlatList
-    viewabilityConfig={this.viewabilityConfig}
-  ...
-```
-
-#### minimumViewTime
-
-Minimum amount of time (in milliseconds) that an item must be physically viewable before the viewability callback will be fired. A high number means that scrolling through content without stopping will not mark the content as viewable.
-
-#### viewAreaCoveragePercentThreshold
-
-Percent of viewport that must be covered for a partially occluded item to count as "viewable", 0-100. Fully visible items are always considered viewable. A value of 0 means that a single pixel in the viewport makes the item viewable, and a value of 100 means that an item must be either entirely visible or cover the entire viewport to count as viewable.
-
-#### itemVisiblePercentThreshold
-
-Similar to `viewAreaCoveragePercentThreshold`, but considers the percent of the item that is visible, rather than the fraction of the viewable area it covers.
-
-#### waitForInteraction
-
-Nothing is considered viewable until the user scrolls or `recordInteraction` is called after render.
-
----
-
-### `viewabilityConfigCallbackPairs`
-
-List of `ViewabilityConfig`/`onViewableItemsChanged` pairs. A specific `onViewableItemsChanged` will be called when its corresponding `ViewabilityConfig`'s conditions are met. See `ViewabilityHelper.js` for flow type and further documentation.
-
-| Type                                   |
-| -------------------------------------- |
-| array of ViewabilityConfigCallbackPair |
-
-## Methods
-
-### `flashScrollIndicators()`
-
-```tsx
-flashScrollIndicators();
-```
-
-Displays the scroll indicators momentarily.
-
----
-
-### `getNativeScrollRef()`
-
-```tsx
-getNativeScrollRef(): React.ElementRef<typeof ScrollViewComponent>;
-```
-
-Provides a reference to the underlying scroll component
-
----
-
-### `getScrollResponder()`
-
-```tsx
-getScrollResponder(): ScrollResponderMixin;
-```
-
-Provides a handle to the underlying scroll responder.
-
----
-
-### `getScrollableNode()`
-
-```tsx
-getScrollableNode(): any;
-```
-
-Provides a handle to the underlying scroll node.
-
-### `scrollToEnd()`
-
-```tsx
-scrollToEnd(params?: {animated?: boolean});
-```
-
-Scrolls to the end of the content. May be janky without `getItemLayout` prop.
-
-**Parameters:**
-
-| Name   | Type   |
-| ------ | ------ |
-| params | object |
-
-Valid `params` keys are:
-
-- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
-
----
-
-### `scrollToIndex()`
-
-```tsx
-scrollToIndex: (params: {
-  index: number;
-  animated?: boolean;
-  viewOffset?: number;
-  viewPosition?: number;
-});
-```
-
-Scrolls to the item at the specified index such that it is positioned in the viewable area such that `viewPosition` 0 places it at the top, 1 at the bottom, and 0.5 centered in the middle.
-
-:::note
-Cannot scroll to locations outside the render window without specifying the `getItemLayout` prop.
-:::
-
-**Parameters:**
-
-| Name                                                        | Type   |
-| ----------------------------------------------------------- | ------ |
-| params <div className="label basic required">Required</div> | object |
-
-Valid `params` keys are:
-
-- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
-- 'index' (number) - The index to scroll to. Required.
-- 'viewOffset' (number) - A fixed number of pixels to offset the final target position.
-- 'viewPosition' (number) - A value of `0` places the item specified by index at the top, `1` at the bottom, and `0.5` centered in the middle.
-
----
-
-### `scrollToItem()`
-
-```tsx
-scrollToItem(params: {
-  animated?: ?boolean,
-  item: Item,
-  viewPosition?: number,
-});
-```
-
-Requires linear scan through data - use `scrollToIndex` instead if possible.
-
-:::note
-Cannot scroll to locations outside the render window without specifying the `getItemLayout` prop.
-:::
-
-**Parameters:**
-
-| Name                                                        | Type   |
-| ----------------------------------------------------------- | ------ |
-| params <div className="label basic required">Required</div> | object |
-
-Valid `params` keys are:
-
-- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
-- 'item' (object) - The item to scroll to. Required.
-- 'viewPosition' (number)
-
----
-
-### `scrollToOffset()`
-
-```tsx
-scrollToOffset(params: {
-  offset: number;
-  animated?: boolean;
-});
-```
-
-Scroll to a specific content pixel offset in the list.
-
-**Parameters:**
-
-| Name                                                        | Type   |
-| ----------------------------------------------------------- | ------ |
-| params <div className="label basic required">Required</div> | object |
-
-Valid `params` keys are:
-
-- 'offset' (number) - The offset to scroll to. In case of `horizontal` being true, the offset is the x-value, in any other case the offset is the y-value. Required.
-- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
+---
+id: flatlist
+title: FlatList
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+A performant interface for rendering basic, flat lists, supporting the most handy features:
+
+- Fully cross-platform.
+- Optional horizontal mode.
+- Configurable viewability callbacks.
+- Header support.
+- Footer support.
+- Separator support.
+- Pull to Refresh.
+- Scroll loading.
+- ScrollToIndex support.
+- Multiple column support.
+
+If you need section support, use [`<SectionList>`](sectionlist.md).
+
+## Example
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Simple%20FlatList%20Example&ext=js
+import {View, FlatList, StyleSheet, Text, StatusBar} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const DATA = [
+  {
+    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
+    title: 'First Item',
+  },
+  {
+    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
+    title: 'Second Item',
+  },
+  {
+    id: '58694a0f-3da1-471f-bd96-145571e29d72',
+    title: 'Third Item',
+  },
+];
+
+const Item = ({title}) => (
+  <View style={styles.item}>
+    <Text style={styles.title}>{title}</Text>
+  </View>
+);
+
+const App = () => (
+  <SafeAreaProvider>
+    <SafeAreaView style={styles.container}>
+      <FlatList
+        data={DATA}
+        renderItem={({item}) => <Item title={item.title} />}
+        keyExtractor={item => item.id}
+      />
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: StatusBar.currentHeight || 0,
+  },
+  item: {
+    backgroundColor: '#f9c2ff',
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Simple%20FlatList%20Example&ext=tsx
+import {View, FlatList, StyleSheet, Text, StatusBar} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const DATA = [
+  {
+    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
+    title: 'First Item',
+  },
+  {
+    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
+    title: 'Second Item',
+  },
+  {
+    id: '58694a0f-3da1-471f-bd96-145571e29d72',
+    title: 'Third Item',
+  },
+];
+
+type ItemProps = {title: string};
+
+const Item = ({title}: ItemProps) => (
+  <View style={styles.item}>
+    <Text style={styles.title}>{title}</Text>
+  </View>
+);
+
+const App = () => (
+  <SafeAreaProvider>
+    <SafeAreaView style={styles.container}>
+      <FlatList
+        data={DATA}
+        renderItem={({item}) => <Item title={item.title} />}
+        keyExtractor={item => item.id}
+      />
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: StatusBar.currentHeight || 0,
+  },
+  item: {
+    backgroundColor: '#f9c2ff',
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+To render multiple columns, use the [`numColumns`](flatlist.md#numcolumns) prop. Using this approach instead of a `flexWrap` layout can prevent conflicts with the item height logic.
+
+More complex, selectable example below.
+
+- By passing `extraData={selectedId}` to `FlatList` we make sure `FlatList` itself will re-render when the state changes. Without setting this prop, `FlatList` would not know it needs to re-render any items because it is a `PureComponent` and the prop comparison will not show any changes.
+- `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=flatlist-selectable&ext=js
+import {useState} from 'react';
+import {
+  FlatList,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const DATA = [
+  {
+    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
+    title: 'First Item',
+  },
+  {
+    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
+    title: 'Second Item',
+  },
+  {
+    id: '58694a0f-3da1-471f-bd96-145571e29d72',
+    title: 'Third Item',
+  },
+];
+
+const Item = ({item, onPress, backgroundColor, textColor}) => (
+  <TouchableOpacity onPress={onPress} style={[styles.item, {backgroundColor}]}>
+    <Text style={[styles.title, {color: textColor}]}>{item.title}</Text>
+  </TouchableOpacity>
+);
+
+const App = () => {
+  const [selectedId, setSelectedId] = useState();
+
+  const renderItem = ({item}) => {
+    const backgroundColor = item.id === selectedId ? '#6e3b6e' : '#f9c2ff';
+    const color = item.id === selectedId ? 'white' : 'black';
+
+    return (
+      <Item
+        item={item}
+        onPress={() => setSelectedId(item.id)}
+        backgroundColor={backgroundColor}
+        textColor={color}
+      />
+    );
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <FlatList
+          data={DATA}
+          renderItem={renderItem}
+          keyExtractor={item => item.id}
+          extraData={selectedId}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: StatusBar.currentHeight || 0,
+  },
+  item: {
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=flatlist-selectable&ext=tsx
+import {useState} from 'react';
+import {
+  FlatList,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+type ItemData = {
+  id: string;
+  title: string;
+};
+
+const DATA: ItemData[] = [
+  {
+    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
+    title: 'First Item',
+  },
+  {
+    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
+    title: 'Second Item',
+  },
+  {
+    id: '58694a0f-3da1-471f-bd96-145571e29d72',
+    title: 'Third Item',
+  },
+];
+
+type ItemProps = {
+  item: ItemData;
+  onPress: () => void;
+  backgroundColor: string;
+  textColor: string;
+};
+
+const Item = ({item, onPress, backgroundColor, textColor}: ItemProps) => (
+  <TouchableOpacity onPress={onPress} style={[styles.item, {backgroundColor}]}>
+    <Text style={[styles.title, {color: textColor}]}>{item.title}</Text>
+  </TouchableOpacity>
+);
+
+const App = () => {
+  const [selectedId, setSelectedId] = useState<string>();
+
+  const renderItem = ({item}: {item: ItemData}) => {
+    const backgroundColor = item.id === selectedId ? '#6e3b6e' : '#f9c2ff';
+    const color = item.id === selectedId ? 'white' : 'black';
+
+    return (
+      <Item
+        item={item}
+        onPress={() => setSelectedId(item.id)}
+        backgroundColor={backgroundColor}
+        textColor={color}
+      />
+    );
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <FlatList
+          data={DATA}
+          renderItem={renderItem}
+          keyExtractor={item => item.id}
+          extraData={selectedId}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: StatusBar.currentHeight || 0,
+  },
+  item: {
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+This is a convenience wrapper around [`<VirtualizedList>`](virtualizedlist.md), and thus inherits its props (as well as those of [`<ScrollView>`](scrollview.md)) that aren't explicitly listed here, along with the following caveats:
+
+- Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.
+- This is a `PureComponent` which means that it will not re-render if `props` remain shallow-equal. Make sure that everything your `renderItem` function depends on is passed as a prop (e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on changes. This includes the `data` prop and parent component state.
+- In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes.
+- By default, the list looks for a `key` prop on each item and uses that for the React key. Alternatively, you can provide a custom `keyExtractor` prop.
+
+---
+
+# Reference
+
+## Props
+
+### [VirtualizedList Props](virtualizedlist.md#props)
+
+Inherits [VirtualizedList Props](virtualizedlist.md#props).
+
+---
+
+### <div className="label required basic">Required</div> **`renderItem`**
+
+```tsx
+renderItem({
+  item: ItemT,
+  index: number,
+  separators: {
+    highlight: () => void;
+    unhighlight: () => void;
+    updateProps: (select: 'leading' | 'trailing', newProps: any) => void;
+  }
+}): JSX.Element;
+```
+
+Takes an item from `data` and renders it into the list.
+
+Provides additional metadata like `index` if you need it, as well as a more generic `separators.updateProps` function which let you set whatever props you want to change the rendering of either the leading separator or trailing separator in case the more common `highlight` and `unhighlight` (which set the `highlighted: boolean` prop) are insufficient for your use case.
+
+| Type     |
+| -------- |
+| function |
+
+- `item` (Object): The item from `data` being rendered.
+- `index` (number): The index corresponding to this item in the `data` array.
+- `separators` (Object)
+  - `highlight` (Function)
+  - `unhighlight` (Function)
+  - `updateProps` (Function)
+    - `select` (enum('leading', 'trailing'))
+    - `newProps` (Object)
+
+Example usage:
+
+```tsx
+<FlatList
+  ItemSeparatorComponent={
+    Platform.OS !== 'android' &&
+    (({highlighted}) => (
+      <View
+        style={[style.separator, highlighted && {marginLeft: 0}]}
+      />
+    ))
+  }
+  data={[{title: 'Title Text', key: 'item1'}]}
+  renderItem={({item, index, separators}) => (
+    <TouchableHighlight
+      key={item.key}
+      onPress={() => this._onPress(item)}
+      onShowUnderlay={separators.highlight}
+      onHideUnderlay={separators.unhighlight}>
+      <View style={{backgroundColor: 'white'}}>
+        <Text>{item.title}</Text>
+      </View>
+    </TouchableHighlight>
+  )}
+/>
+```
+
+---
+
+### <div className="label required basic">Required</div> **`data`**
+
+An array (or array-like list) of items to render. Other data types can be used by targeting [`VirtualizedList`](virtualizedlist.md) directly.
+
+| Type      |
+| --------- |
+| ArrayLike |
+
+---
+
+### `ItemSeparatorComponent`
+
+Rendered in between each item, but not at the top or bottom. By default, `highlighted` and `leadingItem` props are provided. `renderItem` provides `separators.highlight`/`unhighlight` which will update the `highlighted` prop, but you can also add custom props with `separators.updateProps`. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
+
+| Type                         |
+| ---------------------------- |
+| component, function, element |
+
+---
+
+### `ListEmptyComponent`
+
+Rendered when the list is empty. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
+
+| Type               |
+| ------------------ |
+| component, element |
+
+---
+
+### `ListFooterComponent`
+
+Rendered at the bottom of all the items. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
+
+| Type               |
+| ------------------ |
+| component, element |
+
+---
+
+### `ListFooterComponentStyle`
+
+Styling for internal View for `ListFooterComponent`.
+
+| Type                           |
+| ------------------------------ |
+| [View Style](view-style-props) |
+
+---
+
+### `ListHeaderComponent`
+
+Rendered at the top of all the items. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. `<SomeComponent />`).
+
+| Type               |
+| ------------------ |
+| component, element |
+
+---
+
+### `ListHeaderComponentStyle`
+
+Styling for internal View for `ListHeaderComponent`.
+
+| Type                           |
+| ------------------------------ |
+| [View Style](view-style-props) |
+
+---
+
+### `columnWrapperStyle`
+
+Optional custom style for multi-item rows generated when `numColumns > 1`.
+
+| Type                           |
+| ------------------------------ |
+| [View Style](view-style-props) |
+
+---
+
+### `extraData`
+
+A marker property for telling the list to re-render (since it implements `PureComponent`). If any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the `data` prop, stick it here and treat it immutably.
+
+| Type |
+| ---- |
+| any  |
+
+---
+
+### `getItemLayout`
+
+```tsx
+(data, index) => {length: number, offset: number, index: number}
+```
+
+`getItemLayout` is an optional optimization that allows skipping the measurement of dynamic content if you know the size (height or width) of items ahead of time. `getItemLayout` is efficient if you have fixed size items, for example:
+
+```tsx
+  getItemLayout={(data, index) => (
+    {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
+  )}
+```
+
+Adding `getItemLayout` can be a great performance boost for lists of several hundred items. Remember to include separator length (height or width) in your offset calculation if you specify `ItemSeparatorComponent`.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `horizontal`
+
+If `true`, renders items next to each other horizontally instead of stacked vertically.
+
+| Type    |
+| ------- |
+| boolean |
+
+---
+
+### `initialNumToRender`
+
+How many items to render in the initial batch. This should be enough to fill the screen but not much more. Note these items will never be unmounted as part of the windowed rendering in order to improve perceived performance of scroll-to-top actions.
+
+| Type   | Default |
+| ------ | ------- |
+| number | `10`    |
+
+---
+
+### `initialScrollIndex`
+
+Instead of starting at the top with the first item, start at `initialScrollIndex`. This disables the "scroll to top" optimization that keeps the first `initialNumToRender` items always rendered and immediately renders the items starting at this initial index. Requires `getItemLayout` to be implemented.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `inverted`
+
+Reverses the direction of scroll. Uses scale transforms of `-1`.
+
+| Type    |
+| ------- |
+| boolean |
+
+---
+
+### `keyExtractor`
+
+```tsx
+(item: ItemT, index: number) => string;
+```
+
+Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks `item.key`, then `item.id`, and then falls back to using the index, like React does.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `numColumns`
+
+Multiple columns can only be rendered with `horizontal={false}` and will zig-zag like a `flexWrap` layout. Items should all be the same height - masonry layouts are not supported.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `onRefresh`
+
+```tsx
+() => void;
+```
+
+If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the `refreshing` prop correctly.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onViewableItemsChanged`
+
+Called when the viewability of rows changes, as defined by the `viewabilityConfig` prop.
+
+| Type                                                                                                  |
+| ----------------------------------------------------------------------------------------------------- |
+| `md (callback: {changed: [ViewToken](viewtoken)[], viewableItems: [ViewToken](viewtoken)[]} => void;` |
+
+---
+
+### `progressViewOffset`
+
+Set this when offset is needed for the loading indicator to show correctly.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `refreshing`
+
+Set this true while waiting for new data from a refresh.
+
+| Type    |
+| ------- |
+| boolean |
+
+---
+
+### `removeClippedSubviews`
+
+:::warning
+Using this property may lead to bugs (missing content) in some circumstances - use at your own risk.
+:::
+
+When `true`, offscreen child views are removed from their native backing superview when offscreen. This may improve scroll performance for large lists. On Android the default value is `true`.
+
+| Type    |
+| ------- |
+| boolean |
+
+---
+
+### `viewabilityConfig`
+
+See [`ViewabilityHelper.js`](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Lists/ViewabilityHelper.js) for flow type and further documentation.
+
+| Type              |
+| ----------------- |
+| ViewabilityConfig |
+
+`viewabilityConfig` takes a type `ViewabilityConfig` an object with following properties
+
+| Property                         | Type    |
+| -------------------------------- | ------- |
+| minimumViewTime                  | number  |
+| viewAreaCoveragePercentThreshold | number  |
+| itemVisiblePercentThreshold      | number  |
+| waitForInteraction               | boolean |
+
+At least one of the `viewAreaCoveragePercentThreshold` or `itemVisiblePercentThreshold` is required. This needs to be done in the `constructor` to avoid following error ([ref](https://github.com/facebook/react-native/issues/17408)):
+
+```
+  Error: Changing viewabilityConfig on the fly is not supported
+```
+
+```tsx
+constructor (props) {
+  super(props)
+
+  this.viewabilityConfig = {
+      waitForInteraction: true,
+      viewAreaCoveragePercentThreshold: 95
+  }
+}
+```
+
+```tsx
+<FlatList
+    viewabilityConfig={this.viewabilityConfig}
+  ...
+```
+
+#### minimumViewTime
+
+Minimum amount of time (in milliseconds) that an item must be physically viewable before the viewability callback will be fired. A high number means that scrolling through content without stopping will not mark the content as viewable.
+
+#### viewAreaCoveragePercentThreshold
+
+Percent of viewport that must be covered for a partially occluded item to count as "viewable", 0-100. Fully visible items are always considered viewable. A value of 0 means that a single pixel in the viewport makes the item viewable, and a value of 100 means that an item must be either entirely visible or cover the entire viewport to count as viewable.
+
+#### itemVisiblePercentThreshold
+
+Similar to `viewAreaCoveragePercentThreshold`, but considers the percent of the item that is visible, rather than the fraction of the viewable area it covers.
+
+#### waitForInteraction
+
+Nothing is considered viewable until the user scrolls or `recordInteraction` is called after render.
+
+---
+
+### `viewabilityConfigCallbackPairs`
+
+List of `ViewabilityConfig`/`onViewableItemsChanged` pairs. A specific `onViewableItemsChanged` will be called when its corresponding `ViewabilityConfig`'s conditions are met. See `ViewabilityHelper.js` for flow type and further documentation.
+
+| Type                                   |
+| -------------------------------------- |
+| array of ViewabilityConfigCallbackPair |
+
+## Methods
+
+### `flashScrollIndicators()`
+
+```tsx
+flashScrollIndicators();
+```
+
+Displays the scroll indicators momentarily.
+
+---
+
+### `getNativeScrollRef()`
+
+```tsx
+getNativeScrollRef(): React.ElementRef<typeof ScrollViewComponent>;
+```
+
+Provides a reference to the underlying scroll component
+
+---
+
+### `getScrollResponder()`
+
+```tsx
+getScrollResponder(): ScrollResponderMixin;
+```
+
+Provides a handle to the underlying scroll responder.
+
+---
+
+### `getScrollableNode()`
+
+```tsx
+getScrollableNode(): any;
+```
+
+Provides a handle to the underlying scroll node.
+
+### `scrollToEnd()`
+
+```tsx
+scrollToEnd(params?: {animated?: boolean});
+```
+
+Scrolls to the end of the content. May be janky without `getItemLayout` prop.
+
+**Parameters:**
+
+| Name   | Type   |
+| ------ | ------ |
+| params | object |
+
+Valid `params` keys are:
+
+- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
+
+---
+
+### `scrollToIndex()`
+
+```tsx
+scrollToIndex: (params: {
+  index: number;
+  animated?: boolean;
+  viewOffset?: number;
+  viewPosition?: number;
+});
+```
+
+Scrolls to the item at the specified index such that it is positioned in the viewable area such that `viewPosition` 0 places it at the top, 1 at the bottom, and 0.5 centered in the middle.
+
+:::note
+Cannot scroll to locations outside the render window without specifying the `getItemLayout` prop.
+:::
+
+**Parameters:**
+
+| Name                                                        | Type   |
+| ----------------------------------------------------------- | ------ |
+| params <div className="label basic required">Required</div> | object |
+
+Valid `params` keys are:
+
+- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
+- 'index' (number) - The index to scroll to. Required.
+- 'viewOffset' (number) - A fixed number of pixels to offset the final target position.
+- 'viewPosition' (number) - A value of `0` places the item specified by index at the top, `1` at the bottom, and `0.5` centered in the middle.
+
+---
+
+### `scrollToItem()`
+
+```tsx
+scrollToItem(params: {
+  animated?: ?boolean,
+  item: Item,
+  viewPosition?: number,
+});
+```
+
+Requires linear scan through data - use `scrollToIndex` instead if possible.
+
+:::note
+Cannot scroll to locations outside the render window without specifying the `getItemLayout` prop.
+:::
+
+**Parameters:**
+
+| Name                                                        | Type   |
+| ----------------------------------------------------------- | ------ |
+| params <div className="label basic required">Required</div> | object |
+
+Valid `params` keys are:
+
+- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
+- 'item' (object) - The item to scroll to. Required.
+- 'viewPosition' (number)
+
+---
+
+### `scrollToOffset()`
+
+```tsx
+scrollToOffset(params: {
+  offset: number;
+  animated?: boolean;
+});
+```
+
+Scroll to a specific content pixel offset in the list.
+
+**Parameters:**
+
+| Name                                                        | Type   |
+| ----------------------------------------------------------- | ------ |
+| params <div className="label basic required">Required</div> | object |
+
+Valid `params` keys are:
+
+- 'offset' (number) - The offset to scroll to. In case of `horizontal` being true, the offset is the x-value, in any other case the offset is the y-value. Required.
+- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
diff --git a/website/versioned_docs/version-0.86/flexbox.md b/website/versioned_docs/version-0.86/flexbox.md
index 039a7bdf60b..b745c9684ef 100644
--- a/website/versioned_docs/version-0.86/flexbox.md
+++ b/website/versioned_docs/version-0.86/flexbox.md
@@ -1,2884 +1,2883 @@
----
-id: flexbox
-title: Layout with Flexbox
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-A component can specify the layout of its children using the Flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes.
-
-You will normally use a combination of `flexDirection`, `alignItems`, and `justifyContent` to achieve the right layout.
-
-:::caution
-Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions.
-The defaults are different, with `flexDirection` defaulting to `column` instead of `row`, `alignContent` defaulting to `flex-start` instead of `stretch`, `flexShrink` defaulting to `0` instead of `1`, the `flex` parameter only supporting a single number.
-:::
-
-## Flex
-
-[`flex`](layout-props#flex) will define how your items are going to **“fill”** over the available space along your main axis. Space will be divided according to each element's flex property.
-
-In the following example, the red, orange, and green views are all children in the container view that has `flex: 1` set. The red view uses `flex: 1` , the orange view uses `flex: 2`, and the green view uses `flex: 3` . **1+2+3 = 6**, which means that the red view will get `1/6` of the space, the orange `2/6` of the space, and the green `3/6` of the space.
-
-```SnackPlayer name=Flex%20Example
-import React from 'react';
-import {StyleSheet, View} from 'react-native';
-
-const Flex = () => {
-  return (
-    <View
-      style={[
-        styles.container,
-        {
-          // Try setting `flexDirection` to `"row"`.
-          flexDirection: 'column',
-        },
-      ]}>
-      <View style={{flex: 1, backgroundColor: 'red'}} />
-      <View style={{flex: 2, backgroundColor: 'darkorange'}} />
-      <View style={{flex: 3, backgroundColor: 'green'}} />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 20,
-  },
-});
-
-export default Flex;
-```
-
-## Flex Direction
-
-[`flexDirection`](layout-props#flexdirection) controls the direction in which the children of a node are laid out. This is also referred to as the main axis. The cross axis is the axis perpendicular to the main axis, or the axis which the wrapping lines are laid out in.
-
-- `column` (**default value**) Align children from top to bottom. If wrapping is enabled, then the next line will start to the right of the first item on the top of the container.
-
-- `row` Align children from left to right. If wrapping is enabled, then the next line will start under the first item on the left of the container.
-
-- `column-reverse` Align children from bottom to top. If wrapping is enabled, then the next line will start to the right of the first item on the bottom of the container.
-
-- `row-reverse` Align children from right to left. If wrapping is enabled, then the next line will start under the first item on the right of the container.
-
-You can learn more [here](https://www.yogalayout.dev/docs/styling/flex-direction).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Flex%20Direction&ext=js
-import React, {useState} from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
-
-const FlexDirectionBasics = () => {
-  const [flexDirection, setflexDirection] = useState('column');
-
-  return (
-    <PreviewLayout
-      label="flexDirection"
-      values={['column', 'row', 'column-reverse', 'row-reverse']}
-      selectedValue={flexDirection}
-      setSelectedValue={setflexDirection}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default FlexDirectionBasics;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Flex%20Direction&ext=tsx
-import React, {useState} from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const FlexDirectionBasics = () => {
-  const [flexDirection, setflexDirection] = useState('column');
-
-  return (
-    <PreviewLayout
-      label="flexDirection"
-      values={['column', 'row', 'column-reverse', 'row-reverse']}
-      selectedValue={flexDirection}
-      setSelectedValue={setflexDirection}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default FlexDirectionBasics;
-```
-
-</TabItem>
-</Tabs>
-
-## Layout Direction
-
-Layout [`direction`](layout-props#direction) specifies the direction in which children and text in a hierarchy should be laid out. Layout direction also affects what edge `start` and `end` refer to. By default, React Native lays out with LTR layout direction. In this mode `start` refers to left and `end` refers to right.
-
-- `LTR` (**default value**) Text and children are laid out from left to right. Margin and padding applied to the start of an element are applied on the left side.
-
-- `RTL` Text and children are laid out from right to left. Margin and padding applied to the start of an element are applied on the right side.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Flex%20Direction&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const DirectionLayout = () => {
-  const [direction, setDirection] = useState('ltr');
-
-  return (
-    <PreviewLayout
-      label="direction"
-      selectedValue={direction}
-      values={['ltr', 'rtl']}
-      setSelectedValue={setDirection}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default DirectionLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Flex%20Direction&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const DirectionLayout = () => {
-  const [direction, setDirection] = useState('ltr');
-
-  return (
-    <PreviewLayout
-      label="direction"
-      selectedValue={direction}
-      values={['ltr', 'rtl']}
-      setSelectedValue={setDirection}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default DirectionLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## Justify Content
-
-[`justifyContent`](layout-props#justifycontent) describes how to align children within the main axis of their container. For example, you can use this property to center a child horizontally within a container with `flexDirection` set to `row` or vertically within a container with `flexDirection` set to `column`.
-
-- `flex-start`(**default value**) Align children of a container to the start of the container's main axis.
-
-- `flex-end` Align children of a container to the end of the container's main axis.
-
-- `center` Align children of a container in the center of the container's main axis.
-
-- `space-between` Evenly space off children across the container's main axis, distributing the remaining space between the children.
-
-- `space-around` Evenly space off children across the container's main axis, distributing the remaining space around the children. Compared to `space-between`, using `space-around` will result in space being distributed to the beginning of the first child and end of the last child.
-
-- `space-evenly` Evenly distribute children within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.
-
-You can learn more [here](https://www.yogalayout.dev/docs/styling/justify-content).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Justify%20Content&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const JustifyContentBasics = () => {
-  const [justifyContent, setJustifyContent] = useState('flex-start');
-
-  return (
-    <PreviewLayout
-      label="justifyContent"
-      selectedValue={justifyContent}
-      values={[
-        'flex-start',
-        'flex-end',
-        'center',
-        'space-between',
-        'space-around',
-        'space-evenly',
-      ]}
-      setSelectedValue={setJustifyContent}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default JustifyContentBasics;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Justify%20Content&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const JustifyContentBasics = () => {
-  const [justifyContent, setJustifyContent] = useState('flex-start');
-
-  return (
-    <PreviewLayout
-      label="justifyContent"
-      selectedValue={justifyContent}
-      values={[
-        'flex-start',
-        'flex-end',
-        'center',
-        'space-between',
-        'space-around',
-        'space-evenly',
-      ]}
-      setSelectedValue={setJustifyContent}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default JustifyContentBasics;
-```
-
-</TabItem>
-</Tabs>
-
-## Align Items
-
-[`alignItems`](layout-props#alignitems) describes how to align children along the cross axis of their container. It is very similar to `justifyContent` but instead of applying to the main axis, `alignItems` applies to the cross axis.
-
-- `stretch` (**default value**) Stretch children of a container to match the `height` of the container's cross axis.
-
-- `flex-start` Align children of a container to the start of the container's cross axis.
-
-- `flex-end` Align children of a container to the end of the container's cross axis.
-
-- `center` Align children of a container in the center of the container's cross axis.
-
-- `baseline` Align children of a container along a common baseline. Individual children can be set to be the reference baseline for their parents.
-
-:::info
-For `stretch` to have an effect, children must not have a fixed dimension along the secondary axis. In the following example, setting `alignItems: stretch` does nothing until the `width: 50` is removed from the children.
-:::
-
-You can learn more [here](https://www.yogalayout.dev/docs/styling/align-items-self).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Align%20Items&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const AlignItemsLayout = () => {
-  const [alignItems, setAlignItems] = useState('stretch');
-
-  return (
-    <PreviewLayout
-      label="alignItems"
-      selectedValue={alignItems}
-      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
-      setSelectedValue={setAlignItems}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View
-        style={[
-          styles.box,
-          {
-            backgroundColor: 'steelblue',
-            width: 'auto',
-            minWidth: 50,
-          },
-        ]}
-      />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignItemsLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Align%20Items&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const AlignItemsLayout = () => {
-  const [alignItems, setAlignItems] = useState('stretch');
-
-  return (
-    <PreviewLayout
-      label="alignItems"
-      selectedValue={alignItems}
-      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
-      setSelectedValue={setAlignItems}>
-      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View
-        style={[
-          styles.box,
-          {
-            backgroundColor: 'steelblue',
-            width: 'auto',
-            minWidth: 50,
-          },
-        ]}
-      />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignItemsLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## Align Self
-
-[`alignSelf`](layout-props#alignself) has the same options and effect as `alignItems` but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent. `alignSelf` overrides any option set by the parent with `alignItems`.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Align%20Self&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const AlignSelfLayout = () => {
-  const [alignSelf, setAlignSelf] = useState('stretch');
-
-  return (
-    <PreviewLayout
-      label="alignSelf"
-      selectedValue={alignSelf}
-      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
-      setSelectedValue={setAlignSelf}>
-      <View
-        style={[
-          styles.box,
-          {
-            alignSelf,
-            width: 'auto',
-            minWidth: 50,
-            backgroundColor: 'powderblue',
-          },
-        ]}
-      />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={styles.container}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignSelfLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Align%20Self&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-import type {FlexAlignType} from 'react-native';
-
-const AlignSelfLayout = () => {
-  const [alignSelf, setAlignSelf] = useState<FlexAlignType>('stretch');
-
-  return (
-    <PreviewLayout
-      label="alignSelf"
-      selectedValue={alignSelf}
-      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
-      setSelectedValue={setAlignSelf}>
-      <View
-        style={[
-          styles.box,
-          {
-            alignSelf,
-            width: 'auto',
-            minWidth: 50,
-            backgroundColor: 'powderblue',
-          },
-        ]}
-      />
-      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: FlexAlignType[];
-  selectedValue: string;
-  setSelectedValue: (value: FlexAlignType) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={styles.container}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignSelfLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## Align Content
-
-[alignContent](layout-props#aligncontent) defines the distribution of lines along the cross-axis. This only has effect when items are wrapped to multiple lines using `flexWrap`.
-
-- `flex-start` (**default value**) Align wrapped lines to the start of the container's cross axis.
-
-- `flex-end` Align wrapped lines to the end of the container's cross axis.
-
-- `stretch` (_default value when using Yoga on the web_) Stretch wrapped lines to match the height of the container's cross axis.
-
-- `center` Align wrapped lines in the center of the container's cross axis.
-
-- `space-between` Evenly space wrapped lines across the container's cross axis, distributing the remaining space between the lines.
-
-- `space-around` Evenly space wrapped lines across the container's cross axis, distributing the remaining space around the lines. Each end of the container has a half-sized space compared to the space between items.
-
-- `space-evenly` Evenly space wrapped lines across the container's cross axis, distributing the remaining space around the lines. Each space is the same size.
-
-You can learn more [here](https://www.yogalayout.dev/docs/styling/align-content).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Align%20Content&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const AlignContentLayout = () => {
-  const [alignContent, setAlignContent] = useState('flex-start');
-
-  return (
-    <PreviewLayout
-      label="alignContent"
-      selectedValue={alignContent}
-      values={[
-        'flex-start',
-        'flex-end',
-        'stretch',
-        'center',
-        'space-between',
-        'space-around',
-      ]}
-      setSelectedValue={setAlignContent}>
-      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
-      <View style={[styles.box, {backgroundColor: 'orange'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
-      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'purple'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexWrap: 'wrap',
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignContentLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Align%20Content&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const AlignContentLayout = () => {
-  const [alignContent, setAlignContent] = useState('flex-start');
-
-  return (
-    <PreviewLayout
-      label="alignContent"
-      selectedValue={alignContent}
-      values={[
-        'flex-start',
-        'flex-end',
-        'stretch',
-        'center',
-        'space-between',
-        'space-around',
-      ]}
-      setSelectedValue={setAlignContent}>
-      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
-      <View style={[styles.box, {backgroundColor: 'orange'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
-      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'purple'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexWrap: 'wrap',
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default AlignContentLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## Flex Wrap
-
-The [`flexWrap`](layout-props#flexwrap) property is set on containers and it controls what happens when children overflow the size of the container along the main axis. By default, children are forced into a single line (which can shrink elements). If wrapping is allowed, items are wrapped into multiple lines along the main axis if needed.
-
-When wrapping lines, `alignContent` can be used to specify how the lines are placed in the container. Learn more [here](https://www.yogalayout.dev/docs/styling/flex-wrap).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Flex%20Wrap&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const FlexWrapLayout = () => {
-  const [flexWrap, setFlexWrap] = useState('wrap');
-
-  return (
-    <PreviewLayout
-      label="flexWrap"
-      selectedValue={flexWrap}
-      values={['wrap', 'nowrap']}
-      setSelectedValue={setFlexWrap}>
-      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
-      <View style={[styles.box, {backgroundColor: 'orange'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
-      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'purple'}]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default FlexWrapLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Flex%20Wrap&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const FlexWrapLayout = () => {
-  const [flexWrap, setFlexWrap] = useState('wrap');
-
-  return (
-    <PreviewLayout
-      label="flexWrap"
-      selectedValue={flexWrap}
-      values={['wrap', 'nowrap']}
-      setSelectedValue={setFlexWrap}>
-      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
-      <View style={[styles.box, {backgroundColor: 'orange'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
-      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
-      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
-      <View style={[styles.box, {backgroundColor: 'purple'}]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: string[];
-  selectedValue: string;
-  setSelectedValue: (value: string) => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default FlexWrapLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## Flex Basis, Grow, and Shrink
-
-- [`flexBasis`](layout-props#flexbasis) is an axis-independent way of providing the default size of an item along the main axis. Setting the `flexBasis` of a child is similar to setting the `width` of that child if its parent is a container with `flexDirection: row` or setting the `height` of a child if its parent is a container with `flexDirection: column`. The `flexBasis` of an item is the default size of that item, the size of the item before any `flexGrow` and `flexShrink` calculations are performed.
-
-- [`flexGrow`](layout-props#flexgrow) describes how much space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
-
-  `flexGrow` accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the children’s `flexGrow` values.
-
-- [`flexShrink`](layout-props#flexshrink) describes how to shrink children along the main axis in the case in which the total size of the children overflows the size of the container on the main axis. `flexShrink` is very similar to `flexGrow` and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed.
-
-  `flexShrink` accepts any floating point value >= 0, with 0 being the default value (on the web, the default is 1). A container will shrink its children weighted by the children’s `flexShrink` values.
-
-You can learn more [here](https://www.yogalayout.dev/docs/styling/flex-basis-grow-shrink).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink&ext=js
-import React, {useState} from 'react';
-import {View, Text, TextInput, StyleSheet} from 'react-native';
-
-const App = () => {
-  const [powderblue, setPowderblue] = useState({
-    flexGrow: 0,
-    flexShrink: 1,
-    flexBasis: 'auto',
-  });
-  const [skyblue, setSkyblue] = useState({
-    flexGrow: 1,
-    flexShrink: 0,
-    flexBasis: 100,
-  });
-  const [steelblue, setSteelblue] = useState({
-    flexGrow: 0,
-    flexShrink: 1,
-    flexBasis: 200,
-  });
-  return (
-    <View style={styles.container}>
-      <View
-        style={[
-          styles.container,
-          {
-            flexDirection: 'row',
-            alignContent: 'space-between',
-          },
-        ]}>
-        <BoxInfo color="powderblue" {...powderblue} setStyle={setPowderblue} />
-        <BoxInfo color="skyblue" {...skyblue} setStyle={setSkyblue} />
-        <BoxInfo color="steelblue" {...steelblue} setStyle={setSteelblue} />
-      </View>
-      <View style={styles.previewContainer}>
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: powderblue.flexBasis,
-              flexGrow: powderblue.flexGrow,
-              flexShrink: powderblue.flexShrink,
-              backgroundColor: 'powderblue',
-            },
-          ]}
-        />
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: skyblue.flexBasis,
-              flexGrow: skyblue.flexGrow,
-              flexShrink: skyblue.flexShrink,
-              backgroundColor: 'skyblue',
-            },
-          ]}
-        />
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: steelblue.flexBasis,
-              flexGrow: steelblue.flexGrow,
-              flexShrink: steelblue.flexShrink,
-              backgroundColor: 'steelblue',
-            },
-          ]}
-        />
-      </View>
-    </View>
-  );
-};
-
-const BoxInfo = ({color, flexBasis, flexShrink, setStyle, flexGrow}) => (
-  <View style={[styles.row, {flexDirection: 'column'}]}>
-    <View
-      style={[
-        styles.boxLabel,
-        {
-          backgroundColor: color,
-        },
-      ]}>
-      <Text
-        style={{
-          color: '#fff',
-          fontWeight: '500',
-          textAlign: 'center',
-        }}>
-        Box
-      </Text>
-    </View>
-    <Text style={styles.label}>flexBasis</Text>
-    <TextInput
-      value={flexBasis}
-      style={styles.input}
-      onChangeText={fB =>
-        setStyle(value => ({
-          ...value,
-          flexBasis: isNaN(parseInt(fB, 10)) ? 'auto' : parseInt(fB, 10),
-        }))
-      }
-    />
-    <Text style={styles.label}>flexShrink</Text>
-    <TextInput
-      value={flexShrink}
-      style={styles.input}
-      onChangeText={fS =>
-        setStyle(value => ({
-          ...value,
-          flexShrink: isNaN(parseInt(fS, 10)) ? undefined : parseInt(fS, 10),
-        }))
-      }
-    />
-    <Text style={styles.label}>flexGrow</Text>
-    <TextInput
-      value={flexGrow}
-      style={styles.input}
-      onChangeText={fG =>
-        setStyle(value => ({
-          ...value,
-          flexGrow: isNaN(parseInt(fG, 10)) ? undefined : parseInt(fG, 10),
-        }))
-      }
-    />
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingHorizontal: 10,
-  },
-  box: {
-    flex: 1,
-    height: 50,
-    width: 50,
-  },
-  boxLabel: {
-    minWidth: 80,
-    padding: 8,
-    borderRadius: 4,
-    marginTop: 8,
-  },
-  label: {
-    marginTop: 6,
-    fontSize: 16,
-    fontWeight: '100',
-  },
-  previewContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    backgroundColor: 'aliceblue',
-  },
-  row: {
-    flex: 1,
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    marginBottom: 10,
-  },
-  input: {
-    borderBottomWidth: 1,
-    paddingVertical: 3,
-    width: 50,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink&ext=tsx
-import React, {useState} from 'react';
-import {View, Text, TextInput, StyleSheet} from 'react-native';
-import type {ViewStyle} from 'react-native';
-
-const App = () => {
-  const [powderblue, setPowderblue] = useState<ViewStyle>({
-    flexGrow: 0,
-    flexShrink: 1,
-    flexBasis: 'auto',
-  });
-  const [skyblue, setSkyblue] = useState<ViewStyle>({
-    flexGrow: 1,
-    flexShrink: 0,
-    flexBasis: 100,
-  });
-  const [steelblue, setSteelblue] = useState<ViewStyle>({
-    flexGrow: 0,
-    flexShrink: 1,
-    flexBasis: 200,
-  });
-  return (
-    <View style={styles.container}>
-      <View
-        style={[
-          styles.container,
-          {
-            flexDirection: 'row',
-            alignContent: 'space-between',
-          },
-        ]}>
-        <BoxInfo color="powderblue" {...powderblue} setStyle={setPowderblue} />
-        <BoxInfo color="skyblue" {...skyblue} setStyle={setSkyblue} />
-        <BoxInfo color="steelblue" {...steelblue} setStyle={setSteelblue} />
-      </View>
-      <View style={styles.previewContainer}>
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: powderblue.flexBasis,
-              flexGrow: powderblue.flexGrow,
-              flexShrink: powderblue.flexShrink,
-              backgroundColor: 'powderblue',
-            },
-          ]}
-        />
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: skyblue.flexBasis,
-              flexGrow: skyblue.flexGrow,
-              flexShrink: skyblue.flexShrink,
-              backgroundColor: 'skyblue',
-            },
-          ]}
-        />
-        <View
-          style={[
-            styles.box,
-            {
-              flexBasis: steelblue.flexBasis,
-              flexGrow: steelblue.flexGrow,
-              flexShrink: steelblue.flexShrink,
-              backgroundColor: 'steelblue',
-            },
-          ]}
-        />
-      </View>
-    </View>
-  );
-};
-
-type BoxInfoProps = ViewStyle & {
-  color: string;
-  setStyle: React.Dispatch<React.SetStateAction<ViewStyle>>;
-};
-
-const BoxInfo = ({
-  color,
-  flexBasis,
-  flexShrink,
-  setStyle,
-  flexGrow,
-}: BoxInfoProps) => (
-  <View style={[styles.row, {flexDirection: 'column'}]}>
-    <View
-      style={[
-        styles.boxLabel,
-        {
-          backgroundColor: color,
-        },
-      ]}>
-      <Text
-        style={{
-          color: '#fff',
-          fontWeight: '500',
-          textAlign: 'center',
-        }}>
-        Box
-      </Text>
-    </View>
-    <Text style={styles.label}>flexBasis</Text>
-    <TextInput
-      value={String(flexBasis)}
-      style={styles.input}
-      onChangeText={fB =>
-        setStyle(value => ({
-          ...value,
-          flexBasis: isNaN(parseInt(fB, 10)) ? 'auto' : parseInt(fB, 10),
-        }))
-      }
-    />
-    <Text style={styles.label}>flexShrink</Text>
-    <TextInput
-      value={String(flexShrink)}
-      style={styles.input}
-      onChangeText={fS =>
-        setStyle(value => ({
-          ...value,
-          flexShrink: isNaN(parseInt(fS, 10)) ? undefined : parseInt(fS, 10),
-        }))
-      }
-    />
-    <Text style={styles.label}>flexGrow</Text>
-    <TextInput
-      value={String(flexGrow)}
-      style={styles.input}
-      onChangeText={fG =>
-        setStyle(value => ({
-          ...value,
-          flexGrow: isNaN(parseInt(fG, 10)) ? undefined : parseInt(fG, 10),
-        }))
-      }
-    />
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingHorizontal: 10,
-  },
-  box: {
-    flex: 1,
-    height: 50,
-    width: 50,
-  },
-  boxLabel: {
-    minWidth: 80,
-    padding: 8,
-    borderRadius: 4,
-    marginTop: 8,
-  },
-  label: {
-    marginTop: 6,
-    fontSize: 16,
-    fontWeight: '100',
-  },
-  previewContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    backgroundColor: 'aliceblue',
-  },
-  row: {
-    flex: 1,
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    marginBottom: 10,
-  },
-  input: {
-    borderBottomWidth: 1,
-    paddingVertical: 3,
-    width: 50,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-## Row Gap, Column Gap and Gap
-
-- [`rowGap`](layout-props#rowgap) sets the size of the gap (gutter) between an element's rows.
-
-- [`columnGap`](layout-props#columngap) sets the size of the gap (gutter) between an element's columns.
-
-- [`gap`](layout-props#gap) sets the size of the gap (gutter) between rows and columns. It is a shorthand for `rowGap` and `columnGap`.
-
-You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Row%20Gap%20and%20Column%20Gap&ext=js
-import React, {useState} from 'react';
-import {View, Text, StyleSheet, TextInput} from 'react-native';
-
-const RowGapAndColumnGap = () => {
-  const [rowGap, setRowGap] = useState(10);
-  const [columnGap, setColumnGap] = useState(10);
-
-  return (
-    <PreviewLayout
-      columnGap={columnGap}
-      handleColumnGapChange={setColumnGap}
-      rowGap={rowGap}
-      handleRowGapChange={setRowGap}>
-      <View style={[styles.box, styles.box1]} />
-      <View style={[styles.box, styles.box2]} />
-      <View style={[styles.box, styles.box3]} />
-      <View style={[styles.box, styles.box4]} />
-      <View style={[styles.box, styles.box5]} />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  children,
-  handleColumnGapChange,
-  handleRowGapChange,
-  rowGap,
-  columnGap,
-}) => (
-  <View style={styles.previewContainer}>
-    <View style={styles.inputContainer}>
-      <View style={styles.itemsCenter}>
-        <Text>Row Gap</Text>
-        <TextInput
-          style={styles.input}
-          value={rowGap}
-          onChangeText={v => handleRowGapChange(Number(v))}
-        />
-      </View>
-      <View style={styles.itemsCenter}>
-        <Text>Column Gap</Text>
-        <TextInput
-          style={styles.input}
-          value={columnGap}
-          onChangeText={v => handleColumnGapChange(Number(v))}
-        />
-      </View>
-    </View>
-    <View style={[styles.container, {rowGap, columnGap}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  itemsCenter: {alignItems: 'center'},
-  inputContainer: {
-    gap: 4,
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-  },
-  previewContainer: {padding: 10, flex: 1},
-  input: {
-    borderBottomWidth: 1,
-    paddingVertical: 3,
-    width: 50,
-    textAlign: 'center',
-  },
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-    flexWrap: 'wrap',
-    alignContent: 'flex-start',
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  box1: {
-    backgroundColor: 'orangered',
-  },
-  box2: {
-    backgroundColor: 'orange',
-  },
-  box3: {
-    backgroundColor: 'mediumseagreen',
-  },
-  box4: {
-    backgroundColor: 'deepskyblue',
-  },
-  box5: {
-    backgroundColor: 'mediumturquoise',
-  },
-});
-
-export default RowGapAndColumnGap;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Row%20Gap%20and%20Column%20Gap&ext=tsx
-import React, {useState} from 'react';
-import {View, Text, StyleSheet, TextInput} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const RowGapAndColumnGap = () => {
-  const [rowGap, setRowGap] = useState(10);
-  const [columnGap, setColumnGap] = useState(10);
-
-  return (
-    <PreviewLayout
-      columnGap={columnGap}
-      handleColumnGapChange={setColumnGap}
-      rowGap={rowGap}
-      handleRowGapChange={setRowGap}>
-      <View style={[styles.box, styles.box1]} />
-      <View style={[styles.box, styles.box2]} />
-      <View style={[styles.box, styles.box3]} />
-      <View style={[styles.box, styles.box4]} />
-      <View style={[styles.box, styles.box5]} />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  columnGap: number;
-  handleColumnGapChange: (gap: number) => void;
-  rowGap: number;
-  handleRowGapChange: (gap: number) => void;
-}>;
-
-const PreviewLayout = ({
-  children,
-  handleColumnGapChange,
-  handleRowGapChange,
-  rowGap,
-  columnGap,
-}: PreviewLayoutProps) => (
-  <View style={styles.previewContainer}>
-    <View style={styles.inputContainer}>
-      <View style={styles.itemsCenter}>
-        <Text>Row Gap</Text>
-        <TextInput
-          style={styles.input}
-          value={String(rowGap)}
-          onChangeText={v => handleRowGapChange(Number(v))}
-        />
-      </View>
-      <View style={styles.itemsCenter}>
-        <Text>Column Gap</Text>
-        <TextInput
-          style={styles.input}
-          value={String(columnGap)}
-          onChangeText={v => handleColumnGapChange(Number(v))}
-        />
-      </View>
-    </View>
-    <View style={[styles.container, {rowGap, columnGap}]}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  itemsCenter: {alignItems: 'center'},
-  inputContainer: {
-    gap: 4,
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-  },
-  previewContainer: {padding: 10, flex: 1},
-  input: {
-    borderBottomWidth: 1,
-    paddingVertical: 3,
-    width: 50,
-    textAlign: 'center',
-  },
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    maxHeight: 400,
-    flexWrap: 'wrap',
-    alignContent: 'flex-start',
-  },
-  box: {
-    width: 50,
-    height: 80,
-  },
-  box1: {
-    backgroundColor: 'orangered',
-  },
-  box2: {
-    backgroundColor: 'orange',
-  },
-  box3: {
-    backgroundColor: 'mediumseagreen',
-  },
-  box4: {
-    backgroundColor: 'deepskyblue',
-  },
-  box5: {
-    backgroundColor: 'mediumturquoise',
-  },
-});
-
-export default RowGapAndColumnGap;
-```
-
-</TabItem>
-</Tabs>
-
-## Width and Height
-
-The `width` property specifies the width of an element's content area. Similarly, the `height` property specifies the height of an element's content area.
-
-Both `width` and `height` can take the following values:
-
-- `auto` (**default value**) React Native calculates the width/height for the element based on its content, whether that is other children, text, or an image.
-
-- `pixels` Defines the width/height in absolute pixels. Depending on other styles set on the component, this may or may not be the final dimension of the node.
-
-- `percentage` Defines the width or height in percentage of its parent's width or height, respectively.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Width%20and%20Height&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const WidthHeightBasics = () => {
-  const [widthType, setWidthType] = useState('auto');
-  const [heightType, setHeightType] = useState('auto');
-
-  return (
-    <PreviewLayout
-      widthType={widthType}
-      heightType={heightType}
-      widthValues={['auto', 300, '80%']}
-      heightValues={['auto', 200, '60%']}
-      setWidthType={setWidthType}
-      setHeightType={setHeightType}>
-      <View
-        style={{
-          alignSelf: 'flex-start',
-          backgroundColor: 'aliceblue',
-          height: heightType,
-          width: widthType,
-          padding: 15,
-        }}>
-        <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-        <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-        <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-      </View>
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  children,
-  widthType,
-  heightType,
-  widthValues,
-  heightValues,
-  setWidthType,
-  setHeightType,
-}) => (
-  <SafeAreaProvider>
-    <SafeAreaView style={{flex: 1, padding: 10}}>
-      <View style={styles.row}>
-        <Text style={styles.label}>width </Text>
-        {widthValues.map(value => (
-          <TouchableOpacity
-            key={value}
-            onPress={() => setWidthType(value)}
-            style={[styles.button, widthType === value && styles.selected]}>
-            <Text
-              style={[
-                styles.buttonLabel,
-                widthType === value && styles.selectedLabel,
-              ]}>
-              {value}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </View>
-      <View style={styles.row}>
-        <Text style={styles.label}>height </Text>
-        {heightValues.map(value => (
-          <TouchableOpacity
-            key={value}
-            onPress={() => setHeightType(value)}
-            style={[styles.button, heightType === value && styles.selected]}>
-            <Text
-              style={[
-                styles.buttonLabel,
-                heightType === value && styles.selectedLabel,
-              ]}>
-              {value}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </View>
-      {children}
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    padding: 8,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginRight: 10,
-    marginBottom: 10,
-  },
-  selected: {
-    backgroundColor: 'coral',
-    shadowOpacity: 0,
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default WidthHeightBasics;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Width%20and%20Height&ext=tsx
-import React, {useState, PropsWithChildren} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-type Dimension = 'auto' | `${number}%` | number;
-
-const WidthHeightBasics = () => {
-  const [widthType, setWidthType] = useState<Dimension>('auto');
-  const [heightType, setHeightType] = useState<Dimension>('auto');
-
-  return (
-    <PreviewLayout
-      widthType={widthType}
-      heightType={heightType}
-      widthValues={['auto', 300, '80%']}
-      heightValues={['auto', 200, '60%']}
-      setWidthType={setWidthType}
-      setHeightType={setHeightType}>
-      <View
-        style={{
-          alignSelf: 'flex-start',
-          backgroundColor: 'aliceblue',
-          height: heightType,
-          width: widthType,
-          padding: 15,
-        }}>
-        <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
-        <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
-        <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
-      </View>
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  widthType: Dimension;
-  heightType: Dimension;
-  widthValues: Dimension[];
-  heightValues: Dimension[];
-  setWidthType: (value: Dimension) => void;
-  setHeightType: (value: Dimension) => void;
-}>;
-
-const PreviewLayout = ({
-  children,
-  widthType,
-  heightType,
-  widthValues,
-  heightValues,
-  setWidthType,
-  setHeightType,
-}: PreviewLayoutProps) => (
-  <SafeAreaProvider>
-    <SafeAreaView style={{flex: 1, padding: 10}}>
-      <View style={styles.row}>
-        <Text style={styles.label}>width </Text>
-        {widthValues.map(value => (
-          <TouchableOpacity
-            key={value}
-            onPress={() => setWidthType(value)}
-            style={[styles.button, widthType === value && styles.selected]}>
-            <Text
-              style={[
-                styles.buttonLabel,
-                widthType === value && styles.selectedLabel,
-              ]}>
-              {value}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </View>
-      <View style={styles.row}>
-        <Text style={styles.label}>height </Text>
-        {heightValues.map(value => (
-          <TouchableOpacity
-            key={value}
-            onPress={() => setHeightType(value)}
-            style={[styles.button, heightType === value && styles.selected]}>
-            <Text
-              style={[
-                styles.buttonLabel,
-                heightType === value && styles.selectedLabel,
-              ]}>
-              {value}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </View>
-      {children}
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    padding: 8,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginRight: 10,
-    marginBottom: 10,
-  },
-  selected: {
-    backgroundColor: 'coral',
-    shadowOpacity: 0,
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default WidthHeightBasics;
-```
-
-</TabItem>
-</Tabs>
-
-## Position
-
-The `position` type of an element defines how it is positioned relative to either itself, its parent, or its [containing block](./flexbox.md#the-containing-block).
-
-- `relative` (**default value**) By default, an element is positioned relatively. This means an element is positioned according to the normal flow of the layout, and then offset relative to that position based on the values of `top`, `right`, `bottom`, and `left`. The offset does not affect the position of any sibling or parent elements.
-
-- `absolute` When positioned absolutely, an element doesn't take part in the normal layout flow. It is instead laid out independent of its siblings. The position is determined based on the `top`, `right`, `bottom`, and `left` values. These values will position the element relative to its containing block.
-
-- `static` When positioned statically, an element is positioned according to the normal flow of layout, and will ignore the `top`, `right`, `bottom`, and `left` values. This `position` will also cause the element to not form a containing block for absolute descendants, unless some other superceding style prop is present (e.g. `transform`). This allows `absolute` elements to be positioned to something that is not their parent. Note that **`static` is only available on the New Architecture**.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Position&ext=js
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-
-const PositionLayout = () => {
-  const [position, setPosition] = useState('relative');
-
-  return (
-    <PreviewLayout
-      label="position"
-      selectedValue={position}
-      values={['relative', 'absolute', 'static']}
-      setSelectedValue={setPosition}>
-      <View
-        style={[
-          styles.box,
-          {
-            top: 25,
-            left: 25,
-            position,
-            backgroundColor: 'powderblue',
-          },
-        ]}
-      />
-      <View
-        style={[
-          styles.box,
-          {
-            top: 50,
-            left: 50,
-            position,
-            backgroundColor: 'skyblue',
-          },
-        ]}
-      />
-      <View
-        style={[
-          styles.box,
-          {
-            top: 75,
-            left: 75,
-            position,
-            backgroundColor: 'steelblue',
-          },
-        ]}
-      />
-    </PreviewLayout>
-  );
-};
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={styles.container}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default PositionLayout;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Position&ext=tsx
-import React, {useState} from 'react';
-import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
-import type {PropsWithChildren} from 'react';
-
-const PositionLayout = () => {
-  const [position, setPosition] = useState<'relative' | 'absolute' | 'static'>(
-    'relative',
-  );
-
-  return (
-    <PreviewLayout
-      label="position"
-      selectedValue={position}
-      values={['relative', 'absolute', 'static']}
-      setSelectedValue={setPosition}>
-      <View
-        style={[
-          styles.box,
-          {
-            top: 25,
-            left: 25,
-            position,
-            backgroundColor: 'powderblue',
-          },
-        ]}
-      />
-      <View
-        style={[
-          styles.box,
-          {
-            top: 50,
-            left: 50,
-            position,
-            backgroundColor: 'skyblue',
-          },
-        ]}
-      />
-      <View
-        style={[
-          styles.box,
-          {
-            top: 75,
-            left: 75,
-            position,
-            backgroundColor: 'steelblue',
-          },
-        ]}
-      />
-    </PreviewLayout>
-  );
-};
-
-type PreviewLayoutProps = PropsWithChildren<{
-  label: string;
-  values: Array<'relative' | 'absolute' | 'static'>;
-  selectedValue: string;
-  setSelectedValue: (value: 'relative' | 'absolute' | 'static') => void;
-}>;
-
-const PreviewLayout = ({
-  label,
-  children,
-  values,
-  selectedValue,
-  setSelectedValue,
-}: PreviewLayoutProps) => (
-  <View style={{padding: 10, flex: 1}}>
-    <Text style={styles.label}>{label}</Text>
-    <View style={styles.row}>
-      {values.map(value => (
-        <TouchableOpacity
-          key={value}
-          onPress={() => setSelectedValue(value)}
-          style={[styles.button, selectedValue === value && styles.selected]}>
-          <Text
-            style={[
-              styles.buttonLabel,
-              selectedValue === value && styles.selectedLabel,
-            ]}>
-            {value}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-    <View style={styles.container}>{children}</View>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 8,
-    backgroundColor: 'aliceblue',
-    minHeight: 200,
-  },
-  box: {
-    width: 50,
-    height: 50,
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  button: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderRadius: 4,
-    backgroundColor: 'oldlace',
-    alignSelf: 'flex-start',
-    marginHorizontal: '1%',
-    marginBottom: 6,
-    minWidth: '48%',
-    textAlign: 'center',
-  },
-  selected: {
-    backgroundColor: 'coral',
-    borderWidth: 0,
-  },
-  buttonLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: 'coral',
-  },
-  selectedLabel: {
-    color: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    marginBottom: 10,
-    fontSize: 24,
-  },
-});
-
-export default PositionLayout;
-```
-
-</TabItem>
-</Tabs>
-
-## The Containing Block
-
-The containing block of an element is an ancestor element which controls its position and size.
-The way containing blocks work in React Native is very similar to [how they work on the web](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block), with some simplifications due to the lack of some web features.
-
-The `top`, `right`, `bottom`, and `left` values of an absolutely positioned element will be
-relative to its containing block.
-
-Percentage lengths (e.g.: `width: '50%'` or `padding: '10%'`) applied to absolutely positioned elements will be calculated relatively to the size of its containing block. For example, if the containing block is 100 points wide, then `width: 50%` on an absolutely positioned element will cause it to be 50 points wide.
-
-The following list will help you determine the containing block of any given element:
-
-- If that element has a `position` type of `relative` or `static`, then its containing block is its parent.
-- If that element has a `position` type of `absolute`, then its containing block is the nearest ancestor in which one of the following is true:
-  - It has a `position` type other than `static`
-  - It has a `transform`
-
-## Going Deeper
-
-Check out the interactive [yoga playground](https://www.yogalayout.dev/playground) that you can use to get a better understanding of flexbox.
-
-We've covered the basics, but there are many other styles you may need for layouts. The full list of props that control layout is documented [here](./layout-props.md).
-
-Additionally, you can see some examples from [Wix Engineers](https://medium.com/wix-engineering/the-full-react-native-layout-cheat-sheet-a4147802405c).
+---
+id: flexbox
+title: Layout with Flexbox
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+A component can specify the layout of its children using the Flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes.
+
+You will normally use a combination of `flexDirection`, `alignItems`, and `justifyContent` to achieve the right layout.
+
+:::caution
+Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions.
+The defaults are different, with `flexDirection` defaulting to `column` instead of `row`, `alignContent` defaulting to `flex-start` instead of `stretch`, `flexShrink` defaulting to `0` instead of `1`, the `flex` parameter only supporting a single number.
+:::
+
+## Flex
+
+[`flex`](layout-props#flex) will define how your items are going to **“fill”** over the available space along your main axis. Space will be divided according to each element's flex property.
+
+In the following example, the red, orange, and green views are all children in the container view that has `flex: 1` set. The red view uses `flex: 1` , the orange view uses `flex: 2`, and the green view uses `flex: 3` . **1+2+3 = 6**, which means that the red view will get `1/6` of the space, the orange `2/6` of the space, and the green `3/6` of the space.
+
+```SnackPlayer name=Flex%20Example
+import {StyleSheet, View} from 'react-native';
+
+const Flex = () => {
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          // Try setting `flexDirection` to `"row"`.
+          flexDirection: 'column',
+        },
+      ]}>
+      <View style={{flex: 1, backgroundColor: 'red'}} />
+      <View style={{flex: 2, backgroundColor: 'darkorange'}} />
+      <View style={{flex: 3, backgroundColor: 'green'}} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+  },
+});
+
+export default Flex;
+```
+
+## Flex Direction
+
+[`flexDirection`](layout-props#flexdirection) controls the direction in which the children of a node are laid out. This is also referred to as the main axis. The cross axis is the axis perpendicular to the main axis, or the axis which the wrapping lines are laid out in.
+
+- `column` (**default value**) Align children from top to bottom. If wrapping is enabled, then the next line will start to the right of the first item on the top of the container.
+
+- `row` Align children from left to right. If wrapping is enabled, then the next line will start under the first item on the left of the container.
+
+- `column-reverse` Align children from bottom to top. If wrapping is enabled, then the next line will start to the right of the first item on the bottom of the container.
+
+- `row-reverse` Align children from right to left. If wrapping is enabled, then the next line will start under the first item on the right of the container.
+
+You can learn more [here](https://www.yogalayout.dev/docs/styling/flex-direction).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Flex%20Direction&ext=js
+import {useState} from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+
+const FlexDirectionBasics = () => {
+  const [flexDirection, setflexDirection] = useState('column');
+
+  return (
+    <PreviewLayout
+      label="flexDirection"
+      values={['column', 'row', 'column-reverse', 'row-reverse']}
+      selectedValue={flexDirection}
+      setSelectedValue={setflexDirection}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default FlexDirectionBasics;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Flex%20Direction&ext=tsx
+import {useState} from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const FlexDirectionBasics = () => {
+  const [flexDirection, setflexDirection] = useState('column');
+
+  return (
+    <PreviewLayout
+      label="flexDirection"
+      values={['column', 'row', 'column-reverse', 'row-reverse']}
+      selectedValue={flexDirection}
+      setSelectedValue={setflexDirection}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default FlexDirectionBasics;
+```
+
+</TabItem>
+</Tabs>
+
+## Layout Direction
+
+Layout [`direction`](layout-props#direction) specifies the direction in which children and text in a hierarchy should be laid out. Layout direction also affects what edge `start` and `end` refer to. By default, React Native lays out with LTR layout direction. In this mode `start` refers to left and `end` refers to right.
+
+- `LTR` (**default value**) Text and children are laid out from left to right. Margin and padding applied to the start of an element are applied on the left side.
+
+- `RTL` Text and children are laid out from right to left. Margin and padding applied to the start of an element are applied on the right side.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Flex%20Direction&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const DirectionLayout = () => {
+  const [direction, setDirection] = useState('ltr');
+
+  return (
+    <PreviewLayout
+      label="direction"
+      selectedValue={direction}
+      values={['ltr', 'rtl']}
+      setSelectedValue={setDirection}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default DirectionLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Flex%20Direction&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const DirectionLayout = () => {
+  const [direction, setDirection] = useState('ltr');
+
+  return (
+    <PreviewLayout
+      label="direction"
+      selectedValue={direction}
+      values={['ltr', 'rtl']}
+      setSelectedValue={setDirection}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default DirectionLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## Justify Content
+
+[`justifyContent`](layout-props#justifycontent) describes how to align children within the main axis of their container. For example, you can use this property to center a child horizontally within a container with `flexDirection` set to `row` or vertically within a container with `flexDirection` set to `column`.
+
+- `flex-start`(**default value**) Align children of a container to the start of the container's main axis.
+
+- `flex-end` Align children of a container to the end of the container's main axis.
+
+- `center` Align children of a container in the center of the container's main axis.
+
+- `space-between` Evenly space off children across the container's main axis, distributing the remaining space between the children.
+
+- `space-around` Evenly space off children across the container's main axis, distributing the remaining space around the children. Compared to `space-between`, using `space-around` will result in space being distributed to the beginning of the first child and end of the last child.
+
+- `space-evenly` Evenly distribute children within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.
+
+You can learn more [here](https://www.yogalayout.dev/docs/styling/justify-content).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Justify%20Content&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const JustifyContentBasics = () => {
+  const [justifyContent, setJustifyContent] = useState('flex-start');
+
+  return (
+    <PreviewLayout
+      label="justifyContent"
+      selectedValue={justifyContent}
+      values={[
+        'flex-start',
+        'flex-end',
+        'center',
+        'space-between',
+        'space-around',
+        'space-evenly',
+      ]}
+      setSelectedValue={setJustifyContent}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default JustifyContentBasics;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Justify%20Content&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const JustifyContentBasics = () => {
+  const [justifyContent, setJustifyContent] = useState('flex-start');
+
+  return (
+    <PreviewLayout
+      label="justifyContent"
+      selectedValue={justifyContent}
+      values={[
+        'flex-start',
+        'flex-end',
+        'center',
+        'space-between',
+        'space-around',
+        'space-evenly',
+      ]}
+      setSelectedValue={setJustifyContent}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default JustifyContentBasics;
+```
+
+</TabItem>
+</Tabs>
+
+## Align Items
+
+[`alignItems`](layout-props#alignitems) describes how to align children along the cross axis of their container. It is very similar to `justifyContent` but instead of applying to the main axis, `alignItems` applies to the cross axis.
+
+- `stretch` (**default value**) Stretch children of a container to match the `height` of the container's cross axis.
+
+- `flex-start` Align children of a container to the start of the container's cross axis.
+
+- `flex-end` Align children of a container to the end of the container's cross axis.
+
+- `center` Align children of a container in the center of the container's cross axis.
+
+- `baseline` Align children of a container along a common baseline. Individual children can be set to be the reference baseline for their parents.
+
+:::info
+For `stretch` to have an effect, children must not have a fixed dimension along the secondary axis. In the following example, setting `alignItems: stretch` does nothing until the `width: 50` is removed from the children.
+:::
+
+You can learn more [here](https://www.yogalayout.dev/docs/styling/align-items-self).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Align%20Items&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const AlignItemsLayout = () => {
+  const [alignItems, setAlignItems] = useState('stretch');
+
+  return (
+    <PreviewLayout
+      label="alignItems"
+      selectedValue={alignItems}
+      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
+      setSelectedValue={setAlignItems}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View
+        style={[
+          styles.box,
+          {
+            backgroundColor: 'steelblue',
+            width: 'auto',
+            minWidth: 50,
+          },
+        ]}
+      />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignItemsLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Align%20Items&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const AlignItemsLayout = () => {
+  const [alignItems, setAlignItems] = useState('stretch');
+
+  return (
+    <PreviewLayout
+      label="alignItems"
+      selectedValue={alignItems}
+      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
+      setSelectedValue={setAlignItems}>
+      <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View
+        style={[
+          styles.box,
+          {
+            backgroundColor: 'steelblue',
+            width: 'auto',
+            minWidth: 50,
+          },
+        ]}
+      />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignItemsLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## Align Self
+
+[`alignSelf`](layout-props#alignself) has the same options and effect as `alignItems` but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent. `alignSelf` overrides any option set by the parent with `alignItems`.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Align%20Self&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const AlignSelfLayout = () => {
+  const [alignSelf, setAlignSelf] = useState('stretch');
+
+  return (
+    <PreviewLayout
+      label="alignSelf"
+      selectedValue={alignSelf}
+      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
+      setSelectedValue={setAlignSelf}>
+      <View
+        style={[
+          styles.box,
+          {
+            alignSelf,
+            width: 'auto',
+            minWidth: 50,
+            backgroundColor: 'powderblue',
+          },
+        ]}
+      />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={styles.container}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignSelfLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Align%20Self&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+import type {FlexAlignType} from 'react-native';
+
+const AlignSelfLayout = () => {
+  const [alignSelf, setAlignSelf] = useState<FlexAlignType>('stretch');
+
+  return (
+    <PreviewLayout
+      label="alignSelf"
+      selectedValue={alignSelf}
+      values={['stretch', 'flex-start', 'flex-end', 'center', 'baseline']}
+      setSelectedValue={setAlignSelf}>
+      <View
+        style={[
+          styles.box,
+          {
+            alignSelf,
+            width: 'auto',
+            minWidth: 50,
+            backgroundColor: 'powderblue',
+          },
+        ]}
+      />
+      <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: FlexAlignType[];
+  selectedValue: string;
+  setSelectedValue: (value: FlexAlignType) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={styles.container}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignSelfLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## Align Content
+
+[alignContent](layout-props#aligncontent) defines the distribution of lines along the cross-axis. This only has effect when items are wrapped to multiple lines using `flexWrap`.
+
+- `flex-start` (**default value**) Align wrapped lines to the start of the container's cross axis.
+
+- `flex-end` Align wrapped lines to the end of the container's cross axis.
+
+- `stretch` (_default value when using Yoga on the web_) Stretch wrapped lines to match the height of the container's cross axis.
+
+- `center` Align wrapped lines in the center of the container's cross axis.
+
+- `space-between` Evenly space wrapped lines across the container's cross axis, distributing the remaining space between the lines.
+
+- `space-around` Evenly space wrapped lines across the container's cross axis, distributing the remaining space around the lines. Each end of the container has a half-sized space compared to the space between items.
+
+- `space-evenly` Evenly space wrapped lines across the container's cross axis, distributing the remaining space around the lines. Each space is the same size.
+
+You can learn more [here](https://www.yogalayout.dev/docs/styling/align-content).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Align%20Content&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const AlignContentLayout = () => {
+  const [alignContent, setAlignContent] = useState('flex-start');
+
+  return (
+    <PreviewLayout
+      label="alignContent"
+      selectedValue={alignContent}
+      values={[
+        'flex-start',
+        'flex-end',
+        'stretch',
+        'center',
+        'space-between',
+        'space-around',
+      ]}
+      setSelectedValue={setAlignContent}>
+      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
+      <View style={[styles.box, {backgroundColor: 'orange'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
+      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'purple'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexWrap: 'wrap',
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignContentLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Align%20Content&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const AlignContentLayout = () => {
+  const [alignContent, setAlignContent] = useState('flex-start');
+
+  return (
+    <PreviewLayout
+      label="alignContent"
+      selectedValue={alignContent}
+      values={[
+        'flex-start',
+        'flex-end',
+        'stretch',
+        'center',
+        'space-between',
+        'space-around',
+      ]}
+      setSelectedValue={setAlignContent}>
+      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
+      <View style={[styles.box, {backgroundColor: 'orange'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
+      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'purple'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexWrap: 'wrap',
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default AlignContentLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## Flex Wrap
+
+The [`flexWrap`](layout-props#flexwrap) property is set on containers and it controls what happens when children overflow the size of the container along the main axis. By default, children are forced into a single line (which can shrink elements). If wrapping is allowed, items are wrapped into multiple lines along the main axis if needed.
+
+When wrapping lines, `alignContent` can be used to specify how the lines are placed in the container. Learn more [here](https://www.yogalayout.dev/docs/styling/flex-wrap).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Flex%20Wrap&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const FlexWrapLayout = () => {
+  const [flexWrap, setFlexWrap] = useState('wrap');
+
+  return (
+    <PreviewLayout
+      label="flexWrap"
+      selectedValue={flexWrap}
+      values={['wrap', 'nowrap']}
+      setSelectedValue={setFlexWrap}>
+      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
+      <View style={[styles.box, {backgroundColor: 'orange'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
+      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'purple'}]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default FlexWrapLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Flex%20Wrap&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const FlexWrapLayout = () => {
+  const [flexWrap, setFlexWrap] = useState('wrap');
+
+  return (
+    <PreviewLayout
+      label="flexWrap"
+      selectedValue={flexWrap}
+      values={['wrap', 'nowrap']}
+      setSelectedValue={setFlexWrap}>
+      <View style={[styles.box, {backgroundColor: 'orangered'}]} />
+      <View style={[styles.box, {backgroundColor: 'orange'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumseagreen'}]} />
+      <View style={[styles.box, {backgroundColor: 'deepskyblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumturquoise'}]} />
+      <View style={[styles.box, {backgroundColor: 'mediumslateblue'}]} />
+      <View style={[styles.box, {backgroundColor: 'purple'}]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: string[];
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default FlexWrapLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## Flex Basis, Grow, and Shrink
+
+- [`flexBasis`](layout-props#flexbasis) is an axis-independent way of providing the default size of an item along the main axis. Setting the `flexBasis` of a child is similar to setting the `width` of that child if its parent is a container with `flexDirection: row` or setting the `height` of a child if its parent is a container with `flexDirection: column`. The `flexBasis` of an item is the default size of that item, the size of the item before any `flexGrow` and `flexShrink` calculations are performed.
+
+- [`flexGrow`](layout-props#flexgrow) describes how much space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
+
+  `flexGrow` accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the children’s `flexGrow` values.
+
+- [`flexShrink`](layout-props#flexshrink) describes how to shrink children along the main axis in the case in which the total size of the children overflows the size of the container on the main axis. `flexShrink` is very similar to `flexGrow` and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed.
+
+  `flexShrink` accepts any floating point value >= 0, with 0 being the default value (on the web, the default is 1). A container will shrink its children weighted by the children’s `flexShrink` values.
+
+You can learn more [here](https://www.yogalayout.dev/docs/styling/flex-basis-grow-shrink).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink&ext=js
+import {useState} from 'react';
+import {View, Text, TextInput, StyleSheet} from 'react-native';
+
+const App = () => {
+  const [powderblue, setPowderblue] = useState({
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: 'auto',
+  });
+  const [skyblue, setSkyblue] = useState({
+    flexGrow: 1,
+    flexShrink: 0,
+    flexBasis: 100,
+  });
+  const [steelblue, setSteelblue] = useState({
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: 200,
+  });
+  return (
+    <View style={styles.container}>
+      <View
+        style={[
+          styles.container,
+          {
+            flexDirection: 'row',
+            alignContent: 'space-between',
+          },
+        ]}>
+        <BoxInfo color="powderblue" {...powderblue} setStyle={setPowderblue} />
+        <BoxInfo color="skyblue" {...skyblue} setStyle={setSkyblue} />
+        <BoxInfo color="steelblue" {...steelblue} setStyle={setSteelblue} />
+      </View>
+      <View style={styles.previewContainer}>
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: powderblue.flexBasis,
+              flexGrow: powderblue.flexGrow,
+              flexShrink: powderblue.flexShrink,
+              backgroundColor: 'powderblue',
+            },
+          ]}
+        />
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: skyblue.flexBasis,
+              flexGrow: skyblue.flexGrow,
+              flexShrink: skyblue.flexShrink,
+              backgroundColor: 'skyblue',
+            },
+          ]}
+        />
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: steelblue.flexBasis,
+              flexGrow: steelblue.flexGrow,
+              flexShrink: steelblue.flexShrink,
+              backgroundColor: 'steelblue',
+            },
+          ]}
+        />
+      </View>
+    </View>
+  );
+};
+
+const BoxInfo = ({color, flexBasis, flexShrink, setStyle, flexGrow}) => (
+  <View style={[styles.row, {flexDirection: 'column'}]}>
+    <View
+      style={[
+        styles.boxLabel,
+        {
+          backgroundColor: color,
+        },
+      ]}>
+      <Text
+        style={{
+          color: '#fff',
+          fontWeight: '500',
+          textAlign: 'center',
+        }}>
+        Box
+      </Text>
+    </View>
+    <Text style={styles.label}>flexBasis</Text>
+    <TextInput
+      value={flexBasis}
+      style={styles.input}
+      onChangeText={fB =>
+        setStyle(value => ({
+          ...value,
+          flexBasis: isNaN(parseInt(fB, 10)) ? 'auto' : parseInt(fB, 10),
+        }))
+      }
+    />
+    <Text style={styles.label}>flexShrink</Text>
+    <TextInput
+      value={flexShrink}
+      style={styles.input}
+      onChangeText={fS =>
+        setStyle(value => ({
+          ...value,
+          flexShrink: isNaN(parseInt(fS, 10)) ? undefined : parseInt(fS, 10),
+        }))
+      }
+    />
+    <Text style={styles.label}>flexGrow</Text>
+    <TextInput
+      value={flexGrow}
+      style={styles.input}
+      onChangeText={fG =>
+        setStyle(value => ({
+          ...value,
+          flexGrow: isNaN(parseInt(fG, 10)) ? undefined : parseInt(fG, 10),
+        }))
+      }
+    />
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 10,
+  },
+  box: {
+    flex: 1,
+    height: 50,
+    width: 50,
+  },
+  boxLabel: {
+    minWidth: 80,
+    padding: 8,
+    borderRadius: 4,
+    marginTop: 8,
+  },
+  label: {
+    marginTop: 6,
+    fontSize: 16,
+    fontWeight: '100',
+  },
+  previewContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    backgroundColor: 'aliceblue',
+  },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  input: {
+    borderBottomWidth: 1,
+    paddingVertical: 3,
+    width: 50,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink&ext=tsx
+import {useState, type Dispatch, type SetStateAction} from 'react';
+import {View, Text, TextInput, StyleSheet} from 'react-native';
+import type {ViewStyle} from 'react-native';
+
+const App = () => {
+  const [powderblue, setPowderblue] = useState<ViewStyle>({
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: 'auto',
+  });
+  const [skyblue, setSkyblue] = useState<ViewStyle>({
+    flexGrow: 1,
+    flexShrink: 0,
+    flexBasis: 100,
+  });
+  const [steelblue, setSteelblue] = useState<ViewStyle>({
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: 200,
+  });
+  return (
+    <View style={styles.container}>
+      <View
+        style={[
+          styles.container,
+          {
+            flexDirection: 'row',
+            alignContent: 'space-between',
+          },
+        ]}>
+        <BoxInfo color="powderblue" {...powderblue} setStyle={setPowderblue} />
+        <BoxInfo color="skyblue" {...skyblue} setStyle={setSkyblue} />
+        <BoxInfo color="steelblue" {...steelblue} setStyle={setSteelblue} />
+      </View>
+      <View style={styles.previewContainer}>
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: powderblue.flexBasis,
+              flexGrow: powderblue.flexGrow,
+              flexShrink: powderblue.flexShrink,
+              backgroundColor: 'powderblue',
+            },
+          ]}
+        />
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: skyblue.flexBasis,
+              flexGrow: skyblue.flexGrow,
+              flexShrink: skyblue.flexShrink,
+              backgroundColor: 'skyblue',
+            },
+          ]}
+        />
+        <View
+          style={[
+            styles.box,
+            {
+              flexBasis: steelblue.flexBasis,
+              flexGrow: steelblue.flexGrow,
+              flexShrink: steelblue.flexShrink,
+              backgroundColor: 'steelblue',
+            },
+          ]}
+        />
+      </View>
+    </View>
+  );
+};
+
+type BoxInfoProps = ViewStyle & {
+  color: string;
+  setStyle: Dispatch<SetStateAction<ViewStyle>>;
+};
+
+const BoxInfo = ({
+  color,
+  flexBasis,
+  flexShrink,
+  setStyle,
+  flexGrow,
+}: BoxInfoProps) => (
+  <View style={[styles.row, {flexDirection: 'column'}]}>
+    <View
+      style={[
+        styles.boxLabel,
+        {
+          backgroundColor: color,
+        },
+      ]}>
+      <Text
+        style={{
+          color: '#fff',
+          fontWeight: '500',
+          textAlign: 'center',
+        }}>
+        Box
+      </Text>
+    </View>
+    <Text style={styles.label}>flexBasis</Text>
+    <TextInput
+      value={String(flexBasis)}
+      style={styles.input}
+      onChangeText={fB =>
+        setStyle(value => ({
+          ...value,
+          flexBasis: isNaN(parseInt(fB, 10)) ? 'auto' : parseInt(fB, 10),
+        }))
+      }
+    />
+    <Text style={styles.label}>flexShrink</Text>
+    <TextInput
+      value={String(flexShrink)}
+      style={styles.input}
+      onChangeText={fS =>
+        setStyle(value => ({
+          ...value,
+          flexShrink: isNaN(parseInt(fS, 10)) ? undefined : parseInt(fS, 10),
+        }))
+      }
+    />
+    <Text style={styles.label}>flexGrow</Text>
+    <TextInput
+      value={String(flexGrow)}
+      style={styles.input}
+      onChangeText={fG =>
+        setStyle(value => ({
+          ...value,
+          flexGrow: isNaN(parseInt(fG, 10)) ? undefined : parseInt(fG, 10),
+        }))
+      }
+    />
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 10,
+  },
+  box: {
+    flex: 1,
+    height: 50,
+    width: 50,
+  },
+  boxLabel: {
+    minWidth: 80,
+    padding: 8,
+    borderRadius: 4,
+    marginTop: 8,
+  },
+  label: {
+    marginTop: 6,
+    fontSize: 16,
+    fontWeight: '100',
+  },
+  previewContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    backgroundColor: 'aliceblue',
+  },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  input: {
+    borderBottomWidth: 1,
+    paddingVertical: 3,
+    width: 50,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+## Row Gap, Column Gap and Gap
+
+- [`rowGap`](layout-props#rowgap) sets the size of the gap (gutter) between an element's rows.
+
+- [`columnGap`](layout-props#columngap) sets the size of the gap (gutter) between an element's columns.
+
+- [`gap`](layout-props#gap) sets the size of the gap (gutter) between rows and columns. It is a shorthand for `rowGap` and `columnGap`.
+
+You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Row%20Gap%20and%20Column%20Gap&ext=js
+import {useState} from 'react';
+import {View, Text, StyleSheet, TextInput} from 'react-native';
+
+const RowGapAndColumnGap = () => {
+  const [rowGap, setRowGap] = useState(10);
+  const [columnGap, setColumnGap] = useState(10);
+
+  return (
+    <PreviewLayout
+      columnGap={columnGap}
+      handleColumnGapChange={setColumnGap}
+      rowGap={rowGap}
+      handleRowGapChange={setRowGap}>
+      <View style={[styles.box, styles.box1]} />
+      <View style={[styles.box, styles.box2]} />
+      <View style={[styles.box, styles.box3]} />
+      <View style={[styles.box, styles.box4]} />
+      <View style={[styles.box, styles.box5]} />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  children,
+  handleColumnGapChange,
+  handleRowGapChange,
+  rowGap,
+  columnGap,
+}) => (
+  <View style={styles.previewContainer}>
+    <View style={styles.inputContainer}>
+      <View style={styles.itemsCenter}>
+        <Text>Row Gap</Text>
+        <TextInput
+          style={styles.input}
+          value={rowGap}
+          onChangeText={v => handleRowGapChange(Number(v))}
+        />
+      </View>
+      <View style={styles.itemsCenter}>
+        <Text>Column Gap</Text>
+        <TextInput
+          style={styles.input}
+          value={columnGap}
+          onChangeText={v => handleColumnGapChange(Number(v))}
+        />
+      </View>
+    </View>
+    <View style={[styles.container, {rowGap, columnGap}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  itemsCenter: {alignItems: 'center'},
+  inputContainer: {
+    gap: 4,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+  previewContainer: {padding: 10, flex: 1},
+  input: {
+    borderBottomWidth: 1,
+    paddingVertical: 3,
+    width: 50,
+    textAlign: 'center',
+  },
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+    flexWrap: 'wrap',
+    alignContent: 'flex-start',
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  box1: {
+    backgroundColor: 'orangered',
+  },
+  box2: {
+    backgroundColor: 'orange',
+  },
+  box3: {
+    backgroundColor: 'mediumseagreen',
+  },
+  box4: {
+    backgroundColor: 'deepskyblue',
+  },
+  box5: {
+    backgroundColor: 'mediumturquoise',
+  },
+});
+
+export default RowGapAndColumnGap;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Row%20Gap%20and%20Column%20Gap&ext=tsx
+import {useState} from 'react';
+import {View, Text, StyleSheet, TextInput} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const RowGapAndColumnGap = () => {
+  const [rowGap, setRowGap] = useState(10);
+  const [columnGap, setColumnGap] = useState(10);
+
+  return (
+    <PreviewLayout
+      columnGap={columnGap}
+      handleColumnGapChange={setColumnGap}
+      rowGap={rowGap}
+      handleRowGapChange={setRowGap}>
+      <View style={[styles.box, styles.box1]} />
+      <View style={[styles.box, styles.box2]} />
+      <View style={[styles.box, styles.box3]} />
+      <View style={[styles.box, styles.box4]} />
+      <View style={[styles.box, styles.box5]} />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  columnGap: number;
+  handleColumnGapChange: (gap: number) => void;
+  rowGap: number;
+  handleRowGapChange: (gap: number) => void;
+}>;
+
+const PreviewLayout = ({
+  children,
+  handleColumnGapChange,
+  handleRowGapChange,
+  rowGap,
+  columnGap,
+}: PreviewLayoutProps) => (
+  <View style={styles.previewContainer}>
+    <View style={styles.inputContainer}>
+      <View style={styles.itemsCenter}>
+        <Text>Row Gap</Text>
+        <TextInput
+          style={styles.input}
+          value={String(rowGap)}
+          onChangeText={v => handleRowGapChange(Number(v))}
+        />
+      </View>
+      <View style={styles.itemsCenter}>
+        <Text>Column Gap</Text>
+        <TextInput
+          style={styles.input}
+          value={String(columnGap)}
+          onChangeText={v => handleColumnGapChange(Number(v))}
+        />
+      </View>
+    </View>
+    <View style={[styles.container, {rowGap, columnGap}]}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  itemsCenter: {alignItems: 'center'},
+  inputContainer: {
+    gap: 4,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+  previewContainer: {padding: 10, flex: 1},
+  input: {
+    borderBottomWidth: 1,
+    paddingVertical: 3,
+    width: 50,
+    textAlign: 'center',
+  },
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    maxHeight: 400,
+    flexWrap: 'wrap',
+    alignContent: 'flex-start',
+  },
+  box: {
+    width: 50,
+    height: 80,
+  },
+  box1: {
+    backgroundColor: 'orangered',
+  },
+  box2: {
+    backgroundColor: 'orange',
+  },
+  box3: {
+    backgroundColor: 'mediumseagreen',
+  },
+  box4: {
+    backgroundColor: 'deepskyblue',
+  },
+  box5: {
+    backgroundColor: 'mediumturquoise',
+  },
+});
+
+export default RowGapAndColumnGap;
+```
+
+</TabItem>
+</Tabs>
+
+## Width and Height
+
+The `width` property specifies the width of an element's content area. Similarly, the `height` property specifies the height of an element's content area.
+
+Both `width` and `height` can take the following values:
+
+- `auto` (**default value**) React Native calculates the width/height for the element based on its content, whether that is other children, text, or an image.
+
+- `pixels` Defines the width/height in absolute pixels. Depending on other styles set on the component, this may or may not be the final dimension of the node.
+
+- `percentage` Defines the width or height in percentage of its parent's width or height, respectively.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Width%20and%20Height&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const WidthHeightBasics = () => {
+  const [widthType, setWidthType] = useState('auto');
+  const [heightType, setHeightType] = useState('auto');
+
+  return (
+    <PreviewLayout
+      widthType={widthType}
+      heightType={heightType}
+      widthValues={['auto', 300, '80%']}
+      heightValues={['auto', 200, '60%']}
+      setWidthType={setWidthType}
+      setHeightType={setHeightType}>
+      <View
+        style={{
+          alignSelf: 'flex-start',
+          backgroundColor: 'aliceblue',
+          height: heightType,
+          width: widthType,
+          padding: 15,
+        }}>
+        <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+        <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+        <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+      </View>
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  children,
+  widthType,
+  heightType,
+  widthValues,
+  heightValues,
+  setWidthType,
+  setHeightType,
+}) => (
+  <SafeAreaProvider>
+    <SafeAreaView style={{flex: 1, padding: 10}}>
+      <View style={styles.row}>
+        <Text style={styles.label}>width </Text>
+        {widthValues.map(value => (
+          <TouchableOpacity
+            key={value}
+            onPress={() => setWidthType(value)}
+            style={[styles.button, widthType === value && styles.selected]}>
+            <Text
+              style={[
+                styles.buttonLabel,
+                widthType === value && styles.selectedLabel,
+              ]}>
+              {value}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+      <View style={styles.row}>
+        <Text style={styles.label}>height </Text>
+        {heightValues.map(value => (
+          <TouchableOpacity
+            key={value}
+            onPress={() => setHeightType(value)}
+            style={[styles.button, heightType === value && styles.selected]}>
+            <Text
+              style={[
+                styles.buttonLabel,
+                heightType === value && styles.selectedLabel,
+              ]}>
+              {value}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+      {children}
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    padding: 8,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginRight: 10,
+    marginBottom: 10,
+  },
+  selected: {
+    backgroundColor: 'coral',
+    shadowOpacity: 0,
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default WidthHeightBasics;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Width%20and%20Height&ext=tsx
+import {useState, PropsWithChildren} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+type Dimension = 'auto' | `${number}%` | number;
+
+const WidthHeightBasics = () => {
+  const [widthType, setWidthType] = useState<Dimension>('auto');
+  const [heightType, setHeightType] = useState<Dimension>('auto');
+
+  return (
+    <PreviewLayout
+      widthType={widthType}
+      heightType={heightType}
+      widthValues={['auto', 300, '80%']}
+      heightValues={['auto', 200, '60%']}
+      setWidthType={setWidthType}
+      setHeightType={setHeightType}>
+      <View
+        style={{
+          alignSelf: 'flex-start',
+          backgroundColor: 'aliceblue',
+          height: heightType,
+          width: widthType,
+          padding: 15,
+        }}>
+        <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
+        <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
+        <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
+      </View>
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  widthType: Dimension;
+  heightType: Dimension;
+  widthValues: Dimension[];
+  heightValues: Dimension[];
+  setWidthType: (value: Dimension) => void;
+  setHeightType: (value: Dimension) => void;
+}>;
+
+const PreviewLayout = ({
+  children,
+  widthType,
+  heightType,
+  widthValues,
+  heightValues,
+  setWidthType,
+  setHeightType,
+}: PreviewLayoutProps) => (
+  <SafeAreaProvider>
+    <SafeAreaView style={{flex: 1, padding: 10}}>
+      <View style={styles.row}>
+        <Text style={styles.label}>width </Text>
+        {widthValues.map(value => (
+          <TouchableOpacity
+            key={value}
+            onPress={() => setWidthType(value)}
+            style={[styles.button, widthType === value && styles.selected]}>
+            <Text
+              style={[
+                styles.buttonLabel,
+                widthType === value && styles.selectedLabel,
+              ]}>
+              {value}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+      <View style={styles.row}>
+        <Text style={styles.label}>height </Text>
+        {heightValues.map(value => (
+          <TouchableOpacity
+            key={value}
+            onPress={() => setHeightType(value)}
+            style={[styles.button, heightType === value && styles.selected]}>
+            <Text
+              style={[
+                styles.buttonLabel,
+                heightType === value && styles.selectedLabel,
+              ]}>
+              {value}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+      {children}
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    padding: 8,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginRight: 10,
+    marginBottom: 10,
+  },
+  selected: {
+    backgroundColor: 'coral',
+    shadowOpacity: 0,
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default WidthHeightBasics;
+```
+
+</TabItem>
+</Tabs>
+
+## Position
+
+The `position` type of an element defines how it is positioned relative to either itself, its parent, or its [containing block](./flexbox.md#the-containing-block).
+
+- `relative` (**default value**) By default, an element is positioned relatively. This means an element is positioned according to the normal flow of the layout, and then offset relative to that position based on the values of `top`, `right`, `bottom`, and `left`. The offset does not affect the position of any sibling or parent elements.
+
+- `absolute` When positioned absolutely, an element doesn't take part in the normal layout flow. It is instead laid out independent of its siblings. The position is determined based on the `top`, `right`, `bottom`, and `left` values. These values will position the element relative to its containing block.
+
+- `static` When positioned statically, an element is positioned according to the normal flow of layout, and will ignore the `top`, `right`, `bottom`, and `left` values. This `position` will also cause the element to not form a containing block for absolute descendants, unless some other superceding style prop is present (e.g. `transform`). This allows `absolute` elements to be positioned to something that is not their parent. Note that **`static` is only available on the New Architecture**.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Position&ext=js
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+const PositionLayout = () => {
+  const [position, setPosition] = useState('relative');
+
+  return (
+    <PreviewLayout
+      label="position"
+      selectedValue={position}
+      values={['relative', 'absolute', 'static']}
+      setSelectedValue={setPosition}>
+      <View
+        style={[
+          styles.box,
+          {
+            top: 25,
+            left: 25,
+            position,
+            backgroundColor: 'powderblue',
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.box,
+          {
+            top: 50,
+            left: 50,
+            position,
+            backgroundColor: 'skyblue',
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.box,
+          {
+            top: 75,
+            left: 75,
+            position,
+            backgroundColor: 'steelblue',
+          },
+        ]}
+      />
+    </PreviewLayout>
+  );
+};
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={styles.container}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default PositionLayout;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Position&ext=tsx
+import {useState} from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import type {PropsWithChildren} from 'react';
+
+const PositionLayout = () => {
+  const [position, setPosition] = useState<'relative' | 'absolute' | 'static'>(
+    'relative',
+  );
+
+  return (
+    <PreviewLayout
+      label="position"
+      selectedValue={position}
+      values={['relative', 'absolute', 'static']}
+      setSelectedValue={setPosition}>
+      <View
+        style={[
+          styles.box,
+          {
+            top: 25,
+            left: 25,
+            position,
+            backgroundColor: 'powderblue',
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.box,
+          {
+            top: 50,
+            left: 50,
+            position,
+            backgroundColor: 'skyblue',
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.box,
+          {
+            top: 75,
+            left: 75,
+            position,
+            backgroundColor: 'steelblue',
+          },
+        ]}
+      />
+    </PreviewLayout>
+  );
+};
+
+type PreviewLayoutProps = PropsWithChildren<{
+  label: string;
+  values: Array<'relative' | 'absolute' | 'static'>;
+  selectedValue: string;
+  setSelectedValue: (value: 'relative' | 'absolute' | 'static') => void;
+}>;
+
+const PreviewLayout = ({
+  label,
+  children,
+  values,
+  selectedValue,
+  setSelectedValue,
+}: PreviewLayoutProps) => (
+  <View style={{padding: 10, flex: 1}}>
+    <Text style={styles.label}>{label}</Text>
+    <View style={styles.row}>
+      {values.map(value => (
+        <TouchableOpacity
+          key={value}
+          onPress={() => setSelectedValue(value)}
+          style={[styles.button, selectedValue === value && styles.selected]}>
+          <Text
+            style={[
+              styles.buttonLabel,
+              selectedValue === value && styles.selectedLabel,
+            ]}>
+            {value}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+    <View style={styles.container}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: 'aliceblue',
+    minHeight: 200,
+  },
+  box: {
+    width: 50,
+    height: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 4,
+    backgroundColor: 'oldlace',
+    alignSelf: 'flex-start',
+    marginHorizontal: '1%',
+    marginBottom: 6,
+    minWidth: '48%',
+    textAlign: 'center',
+  },
+  selected: {
+    backgroundColor: 'coral',
+    borderWidth: 0,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: 'coral',
+  },
+  selectedLabel: {
+    color: 'white',
+  },
+  label: {
+    textAlign: 'center',
+    marginBottom: 10,
+    fontSize: 24,
+  },
+});
+
+export default PositionLayout;
+```
+
+</TabItem>
+</Tabs>
+
+## The Containing Block
+
+The containing block of an element is an ancestor element which controls its position and size.
+The way containing blocks work in React Native is very similar to [how they work on the web](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block), with some simplifications due to the lack of some web features.
+
+The `top`, `right`, `bottom`, and `left` values of an absolutely positioned element will be
+relative to its containing block.
+
+Percentage lengths (e.g.: `width: '50%'` or `padding: '10%'`) applied to absolutely positioned elements will be calculated relatively to the size of its containing block. For example, if the containing block is 100 points wide, then `width: 50%` on an absolutely positioned element will cause it to be 50 points wide.
+
+The following list will help you determine the containing block of any given element:
+
+- If that element has a `position` type of `relative` or `static`, then its containing block is its parent.
+- If that element has a `position` type of `absolute`, then its containing block is the nearest ancestor in which one of the following is true:
+  - It has a `position` type other than `static`
+  - It has a `transform`
+
+## Going Deeper
+
+Check out the interactive [yoga playground](https://www.yogalayout.dev/playground) that you can use to get a better understanding of flexbox.
+
+We've covered the basics, but there are many other styles you may need for layouts. The full list of props that control layout is documented [here](./layout-props.md).
+
+Additionally, you can see some examples from [Wix Engineers](https://medium.com/wix-engineering/the-full-react-native-layout-cheat-sheet-a4147802405c).
diff --git a/website/versioned_docs/version-0.86/handling-text-input.md b/website/versioned_docs/version-0.86/handling-text-input.md
index 6db00cae840..be56c292f03 100644
--- a/website/versioned_docs/version-0.86/handling-text-input.md
+++ b/website/versioned_docs/version-0.86/handling-text-input.md
@@ -1,48 +1,48 @@
----
-id: handling-text-input
-title: Handling Text Input
----
-
-[`TextInput`](textinput#content) is a [Core Component](intro-react-native-components) that allows the user to enter text. It has an `onChangeText` prop that takes a function to be called every time the text changed, and an `onSubmitEditing` prop that takes a function to be called when the text is submitted.
-
-For example, let's say that as the user types, you're translating their words into a different language. In this new language, every single word is written the same way: 🍕. So the sentence "Hello there Bob" would be translated as "🍕 🍕 🍕".
-
-```SnackPlayer name=Handling%20Text%20Input
-import React, {useState} from 'react';
-import {Text, TextInput, View} from 'react-native';
-
-const PizzaTranslator = () => {
-  const [text, setText] = useState('');
-  return (
-    <View style={{flex: 1, justifyContent: 'center'}}>
-      <TextInput
-        placeholder="Type here to translate!"
-        onChangeText={newText => setText(newText)}
-        defaultValue={text}
-        style={{
-          height: 40,
-          padding: 5,
-          marginHorizontal: 8,
-          borderWidth: 1,
-        }}
-      />
-      <Text style={{padding: 10, fontSize: 42}}>
-        {text
-          .split(' ')
-          .map(word => word && '🍕')
-          .join(' ')}
-      </Text>
-    </View>
-  );
-};
-
-export default PizzaTranslator;
-```
-
-In this example, we store `text` in the state, because it changes over time.
-
-There are a lot more things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the [React docs on controlled components](https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable), or the [reference docs for TextInput](textinput.md).
-
-A `TextInput` is one of many ways for the user to interact with your app. For examples of other ways to handle input, see the documentation on [how to handle touches](handling-touches.md).
-
-Now, let's take a look at [ScrollView](using-a-scrollview), another Core Component.
+---
+id: handling-text-input
+title: Handling Text Input
+---
+
+[`TextInput`](textinput#content) is a [Core Component](intro-react-native-components) that allows the user to enter text. It has an `onChangeText` prop that takes a function to be called every time the text changed, and an `onSubmitEditing` prop that takes a function to be called when the text is submitted.
+
+For example, let's say that as the user types, you're translating their words into a different language. In this new language, every single word is written the same way: 🍕. So the sentence "Hello there Bob" would be translated as "🍕 🍕 🍕".
+
+```SnackPlayer name=Handling%20Text%20Input
+import {useState} from 'react';
+import {Text, TextInput, View} from 'react-native';
+
+const PizzaTranslator = () => {
+  const [text, setText] = useState('');
+  return (
+    <View style={{flex: 1, justifyContent: 'center'}}>
+      <TextInput
+        placeholder="Type here to translate!"
+        onChangeText={newText => setText(newText)}
+        defaultValue={text}
+        style={{
+          height: 40,
+          padding: 5,
+          marginHorizontal: 8,
+          borderWidth: 1,
+        }}
+      />
+      <Text style={{padding: 10, fontSize: 42}}>
+        {text
+          .split(' ')
+          .map(word => word && '🍕')
+          .join(' ')}
+      </Text>
+    </View>
+  );
+};
+
+export default PizzaTranslator;
+```
+
+In this example, we store `text` in the state, because it changes over time.
+
+There are a lot more things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the [React docs on controlled components](https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable), or the [reference docs for TextInput](textinput.md).
+
+A `TextInput` is one of many ways for the user to interact with your app. For examples of other ways to handle input, see the documentation on [how to handle touches](handling-touches.md).
+
+Now, let's take a look at [ScrollView](using-a-scrollview), another Core Component.
diff --git a/website/versioned_docs/version-0.86/handling-touches.md b/website/versioned_docs/version-0.86/handling-touches.md
index 612287f6e10..b9604b393c0 100644
--- a/website/versioned_docs/version-0.86/handling-touches.md
+++ b/website/versioned_docs/version-0.86/handling-touches.md
@@ -25,7 +25,6 @@ This will render a blue label on iOS, and a blue rounded rectangle with light te
 Go ahead and play around with the `Button` component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right and then clicking on "Tap to Play" to preview the app.
 
 ```SnackPlayer name=Button%20Basics
-import React from 'react';
 import {Alert, Button, StyleSheet, View} from 'react-native';
 
 const ButtonBasics = () => {
@@ -86,7 +85,6 @@ In some cases, you may want to detect when a user presses and holds a view for a
 Let's see all of these in action:
 
 ```SnackPlayer name=Touchables
-import React from 'react';
 import {
   Alert,
   Platform,
diff --git a/website/versioned_docs/version-0.86/height-and-width.md b/website/versioned_docs/version-0.86/height-and-width.md
index 485667831cd..b768626716e 100644
--- a/website/versioned_docs/version-0.86/height-and-width.md
+++ b/website/versioned_docs/version-0.86/height-and-width.md
@@ -10,7 +10,6 @@ A component's height and width determine its size on the screen.
 The general way to set the dimensions of a component is by adding a fixed `width` and `height` to style. All dimensions in React Native are unitless, and represent density-independent pixels.
 
 ```SnackPlayer name=Height%20and%20Width
-import React from 'react';
 import {View} from 'react-native';
 
 const FixedDimensionsBasics = () => {
@@ -59,7 +58,6 @@ A component can only expand to fill available space if its parent has dimensions
 :::
 
 ```SnackPlayer name=Flex%20Dimensions
-import React from 'react';
 import {View} from 'react-native';
 
 const FlexDimensionsBasics = () => {
@@ -85,7 +83,6 @@ After you can control a component's size, the next step is to [learn how to lay
 If you want to fill a certain portion of the screen, but you _don't_ want to use the `flex` layout, you _can_ use **percentage values** in the component's style. Similar to flex dimensions, percentage dimensions require parent with a defined size.
 
 ```SnackPlayer name=Percentage%20Dimensions
-import React from 'react';
 import {View} from 'react-native';
 
 const PercentageDimensionsBasics = () => {
diff --git a/website/versioned_docs/version-0.86/i18nmanager.md b/website/versioned_docs/version-0.86/i18nmanager.md
index 80ccd2ccd72..2593a0e45c4 100644
--- a/website/versioned_docs/version-0.86/i18nmanager.md
+++ b/website/versioned_docs/version-0.86/i18nmanager.md
@@ -1,169 +1,168 @@
----
-id: i18nmanager
-title: I18nManager
----
-
-# I18nManager
-
-The `I18nManager` module provides utilities for managing Right-to-Left (RTL) layout support for languages like Arabic, Hebrew, and others. It provides methods to control RTL behavior and check the current layout direction.
-
-## Examples
-
-### Change positions and animations based on RTL
-
-If you absolutely position elements to align with other flexbox elements, they may not align in RTL languages. Using `isRTL` can be used to adjust alignment or animations.
-
-```SnackPlayer name=I18nManager%20Change%20Absolute%20Positions%20And%20Animations
-import React from 'react';
-import {I18nManager, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  // Change to `true` to see the effect in a non-RTL language
-  const isRTL = I18nManager.isRTL;
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView>
-        <View
-          style={{
-            position: 'absolute',
-            left: isRTL ? undefined : 0,
-            right: isRTL ? 0 : undefined,
-          }}>
-          {isRTL ? <Text>Back &gt;</Text> : <Text>&lt; Back</Text>}
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-export default App;
-```
-
-### During Development
-
-```SnackPlayer name=I18nManager%20During%20Development
-import React, {useState} from 'react';
-import {Alert, I18nManager, StyleSheet, Switch, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [rtl, setRTL] = useState(I18nManager.isRTL);
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView>
-        <View style={styles.container}>
-          <View style={styles.forceRtl}>
-            <Text>Force RTL in Development:</Text>
-            <Switch
-              value={rtl}
-              onValueChange={value => {
-                setRTL(value);
-                I18nManager.forceRTL(value);
-                Alert.alert(
-                  'Reload this page',
-                  'Please reload this page to change the UI direction! ' +
-                    'All examples in this app will be affected. ' +
-                    'Check them out to see what they look like in RTL layout.',
-                );
-              }}
-            />
-          </View>
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    padding: 20,
-  },
-  forceRtl: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-# Reference
-
-## Properties
-
-### `isRTL`
-
-```typescript
-static isRTL: boolean;
-```
-
-A boolean value indicating whether the app is currently in RTL layout mode.
-
-The value of `isRTL` is determined by the following logic:
-
-- If `forceRTL` is `true`, `isRTL` returns `true`
-- If `allowRTL` is `false`, `isRTL` returns `false`
-- Otherwise, `isRTL` will be `true` given the following:
-  - **iOS:**
-    - The user-preferred language on the device is an RTL language
-    - The application-defined localizations include the user-chosen language (as defined in the Xcode project file (`knownRegions = (...)`)
-  - **Android:**
-    - The user-preferred language on the device is an RTL language
-    - The application's `AndroidManifest.xml` defines `android:supportsRTL="true"` on the `<application>` element
-
-### `doLeftAndRightSwapInRTL`
-
-```typescript
-static doLeftAndRightSwapInRTL: boolean;
-```
-
-A boolean value indicating whether left and right style properties should be automatically swapped when in RTL mode. When enabled, left becomes right and right becomes left in RTL layouts.
-
-## Methods
-
-### `allowRTL()`
-
-```typescript
-static allowRTL: (allowRTL: boolean) => void;
-```
-
-Enables or disables RTL layout support for the application.
-
-**Parameters:**
-
-- `allowRTL` (boolean): Whether to allow RTL layout
-
-**Important Notes:**
-
-- Changes take effect on the next application start, not immediately
-- This setting is persisted across app restarts
-
-### `forceRTL()`
-
-```typescript
-static forceRTL: (forced: boolean) => void;
-```
-
-Forces the app to use RTL layout regardless of the device language settings. This is primarily useful for testing RTL layouts during development.
-
-Avoid forcing RTL in production apps as it requires a full app restart to take effect, which makes for a poor user-experience.
-
-**Parameters:**
-
-- `forced` (boolean): Whether to force RTL layout
-
-**Important Notes:**
-
-- Changes take full effect on the next application start, not immediately
-- The setting is persisted across app restarts
-- Only meant for development and testing. In production, you should either disallow RTL fully or handle it appropriately (see `isRTL`)
-
-### `swapLeftAndRightInRTL()`
-
-```typescript
-static swapLeftAndRightInRTL: (swapLeftAndRight: boolean) => void;
-```
-
-Swap left and right style properties in RTL mode. When enabled, left becomes right and right becomes left in RTL layouts. Does not affect the value of `isRTL`.
+---
+id: i18nmanager
+title: I18nManager
+---
+
+# I18nManager
+
+The `I18nManager` module provides utilities for managing Right-to-Left (RTL) layout support for languages like Arabic, Hebrew, and others. It provides methods to control RTL behavior and check the current layout direction.
+
+## Examples
+
+### Change positions and animations based on RTL
+
+If you absolutely position elements to align with other flexbox elements, they may not align in RTL languages. Using `isRTL` can be used to adjust alignment or animations.
+
+```SnackPlayer name=I18nManager%20Change%20Absolute%20Positions%20And%20Animations
+import {I18nManager, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  // Change to `true` to see the effect in a non-RTL language
+  const isRTL = I18nManager.isRTL;
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView>
+        <View
+          style={{
+            position: 'absolute',
+            left: isRTL ? undefined : 0,
+            right: isRTL ? 0 : undefined,
+          }}>
+          {isRTL ? <Text>Back &gt;</Text> : <Text>&lt; Back</Text>}
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+export default App;
+```
+
+### During Development
+
+```SnackPlayer name=I18nManager%20During%20Development
+import {useState} from 'react';
+import {Alert, I18nManager, StyleSheet, Switch, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [rtl, setRTL] = useState(I18nManager.isRTL);
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView>
+        <View style={styles.container}>
+          <View style={styles.forceRtl}>
+            <Text>Force RTL in Development:</Text>
+            <Switch
+              value={rtl}
+              onValueChange={value => {
+                setRTL(value);
+                I18nManager.forceRTL(value);
+                Alert.alert(
+                  'Reload this page',
+                  'Please reload this page to change the UI direction! ' +
+                    'All examples in this app will be affected. ' +
+                    'Check them out to see what they look like in RTL layout.',
+                );
+              }}
+            />
+          </View>
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 20,
+  },
+  forceRtl: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+# Reference
+
+## Properties
+
+### `isRTL`
+
+```typescript
+static isRTL: boolean;
+```
+
+A boolean value indicating whether the app is currently in RTL layout mode.
+
+The value of `isRTL` is determined by the following logic:
+
+- If `forceRTL` is `true`, `isRTL` returns `true`
+- If `allowRTL` is `false`, `isRTL` returns `false`
+- Otherwise, `isRTL` will be `true` given the following:
+  - **iOS:**
+    - The user-preferred language on the device is an RTL language
+    - The application-defined localizations include the user-chosen language (as defined in the Xcode project file (`knownRegions = (...)`)
+  - **Android:**
+    - The user-preferred language on the device is an RTL language
+    - The application's `AndroidManifest.xml` defines `android:supportsRTL="true"` on the `<application>` element
+
+### `doLeftAndRightSwapInRTL`
+
+```typescript
+static doLeftAndRightSwapInRTL: boolean;
+```
+
+A boolean value indicating whether left and right style properties should be automatically swapped when in RTL mode. When enabled, left becomes right and right becomes left in RTL layouts.
+
+## Methods
+
+### `allowRTL()`
+
+```typescript
+static allowRTL: (allowRTL: boolean) => void;
+```
+
+Enables or disables RTL layout support for the application.
+
+**Parameters:**
+
+- `allowRTL` (boolean): Whether to allow RTL layout
+
+**Important Notes:**
+
+- Changes take effect on the next application start, not immediately
+- This setting is persisted across app restarts
+
+### `forceRTL()`
+
+```typescript
+static forceRTL: (forced: boolean) => void;
+```
+
+Forces the app to use RTL layout regardless of the device language settings. This is primarily useful for testing RTL layouts during development.
+
+Avoid forcing RTL in production apps as it requires a full app restart to take effect, which makes for a poor user-experience.
+
+**Parameters:**
+
+- `forced` (boolean): Whether to force RTL layout
+
+**Important Notes:**
+
+- Changes take full effect on the next application start, not immediately
+- The setting is persisted across app restarts
+- Only meant for development and testing. In production, you should either disallow RTL fully or handle it appropriately (see `isRTL`)
+
+### `swapLeftAndRightInRTL()`
+
+```typescript
+static swapLeftAndRightInRTL: (swapLeftAndRight: boolean) => void;
+```
+
+Swap left and right style properties in RTL mode. When enabled, left becomes right and right becomes left in RTL layouts. Does not affect the value of `isRTL`.
diff --git a/website/versioned_docs/version-0.86/image-style-props.md b/website/versioned_docs/version-0.86/image-style-props.md
index efa0dc725e1..cbf19f996f9 100644
--- a/website/versioned_docs/version-0.86/image-style-props.md
+++ b/website/versioned_docs/version-0.86/image-style-props.md
@@ -8,7 +8,6 @@ title: Image Style Props
 ### Image Resize Mode
 
 ```SnackPlayer name=Image%20Resize%20Modes%20Example
-import React from 'react';
 import {View, Image, Text, StyleSheet, ScrollView} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -82,7 +81,6 @@ export default DisplayAnImageWithStyle;
 ### Image Border
 
 ```SnackPlayer name=Style%20BorderWidth%20and%20BorderColor%20Example
-import React from 'react';
 import {Image, StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -118,7 +116,6 @@ export default DisplayAnImageWithStyle;
 ### Image Border Radius
 
 ```SnackPlayer name=Style%20Border%20Radius%20Example
-import React from 'react';
 import {View, Image, StyleSheet, Text, ScrollView} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -184,7 +181,6 @@ export default DisplayAnImageWithStyle;
 ### Image Tint
 
 ```SnackPlayer name=Style%20tintColor%20Function%20Component
-import React from 'react';
 import {Image, StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.86/image.md b/website/versioned_docs/version-0.86/image.md
index 5f6a2a5b1ad..3f83be8c19c 100644
--- a/website/versioned_docs/version-0.86/image.md
+++ b/website/versioned_docs/version-0.86/image.md
@@ -14,7 +14,6 @@ For network and data images, you will need to manually specify the dimensions of
 ## Examples
 
 ```SnackPlayer name=Image%20Example
-import React from 'react';
 import {Image, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -61,7 +60,6 @@ export default DisplayAnImage;
 You can also add `style` to an image:
 
 ```SnackPlayer name=Styled%20Image%20Example
-import React from 'react';
 import {Image, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.86/imagebackground.md b/website/versioned_docs/version-0.86/imagebackground.md
index 6670fd3b632..d3d40b2a844 100644
--- a/website/versioned_docs/version-0.86/imagebackground.md
+++ b/website/versioned_docs/version-0.86/imagebackground.md
@@ -12,7 +12,6 @@ Note that you must specify some width and height style attributes.
 ## Example
 
 ```SnackPlayer name=ImageBackground
-import React from 'react';
 import {ImageBackground, StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.86/improvingux.md b/website/versioned_docs/version-0.86/improvingux.md
index 462f5f0ce1c..96bd508791f 100644
--- a/website/versioned_docs/version-0.86/improvingux.md
+++ b/website/versioned_docs/version-0.86/improvingux.md
@@ -1,596 +1,594 @@
----
-id: improvingux
-title: Improving User Experience
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-## Configure text inputs
-
-Entering text on touch phone is a challenge - small screen, software keyboard. But based on what kind of data you need, you can make it easier by properly configuring the text inputs:
-
-- Focus the first field automatically
-- Use placeholder text as an example of expected data format
-- Enable or disable autocapitalization and autocorrect
-- Choose keyboard type (e.g. email, numeric)
-- Make sure the return button focuses the next field or submits the form
-
-Check out [`TextInput` docs](textinput.md) for more configuration options.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=TextInput%20form%20example&ext=js
-import React, {useState, useRef} from 'react';
-import {
-  Alert,
-  Text,
-  StatusBar,
-  TextInput,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const App = () => {
-  const emailInput = useRef(null);
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-
-  const submit = () => {
-    Alert.alert(
-      `Welcome, ${name}! Confirmation email has been sent to ${email}`,
-    );
-  };
-
-  return (
-    <View style={styles.container}>
-      <StatusBar barStyle="light-content" />
-      <View style={styles.header}>
-        <Text style={styles.description}>
-          This demo shows how using available TextInput customizations can make
-          forms much easier to use. Try completing the form and notice that
-          different fields have specific optimizations and the return key
-          changes from focusing next input to submitting the form.
-        </Text>
-      </View>
-      <TextInput
-        style={styles.input}
-        value={name}
-        onChangeText={text => setName(text)}
-        placeholder="Full Name"
-        autoFocus={true}
-        autoCapitalize="words"
-        autoCorrect={true}
-        keyboardType="default"
-        returnKeyType="next"
-        onSubmitEditing={() => emailInput.current.focus()}
-        blurOnSubmit={false}
-      />
-      <TextInput
-        style={styles.input}
-        value={email}
-        onChangeText={text => setEmail(text)}
-        ref={emailInput}
-        placeholder="email@example.com"
-        autoCapitalize="none"
-        autoCorrect={false}
-        keyboardType="email-address"
-        returnKeyType="send"
-        onSubmitEditing={submit}
-        blurOnSubmit={true}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    paddingTop: 64,
-    padding: 20,
-    backgroundColor: '#282c34',
-  },
-  description: {
-    fontSize: 14,
-    color: 'white',
-  },
-  input: {
-    margin: 20,
-    marginBottom: 0,
-    height: 34,
-    paddingHorizontal: 10,
-    borderRadius: 4,
-    borderColor: '#ccc',
-    borderWidth: 1,
-    fontSize: 16,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=TextInput%20form%20example&ext=tsx
-import React, {useState, useRef} from 'react';
-import {
-  Alert,
-  Text,
-  StatusBar,
-  TextInput,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const App = () => {
-  const emailInput = useRef<TextInput>(null);
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-
-  const submit = () => {
-    Alert.alert(
-      `Welcome, ${name}! Confirmation email has been sent to ${email}`,
-    );
-  };
-
-  return (
-    <View style={styles.container}>
-      <StatusBar barStyle="light-content" />
-      <View style={styles.header}>
-        <Text style={styles.description}>
-          This demo shows how using available TextInput customizations can make
-          forms much easier to use. Try completing the form and notice that
-          different fields have specific optimizations and the return key
-          changes from focusing next input to submitting the form.
-        </Text>
-      </View>
-      <TextInput
-        style={styles.input}
-        value={name}
-        onChangeText={text => setName(text)}
-        placeholder="Full Name"
-        autoFocus={true}
-        autoCapitalize="words"
-        autoCorrect={true}
-        keyboardType="default"
-        returnKeyType="next"
-        onSubmitEditing={() => emailInput.current?.focus()}
-        blurOnSubmit={false}
-      />
-      <TextInput
-        style={styles.input}
-        value={email}
-        onChangeText={text => setEmail(text)}
-        ref={emailInput}
-        placeholder="email@example.com"
-        autoCapitalize="none"
-        autoCorrect={false}
-        keyboardType="email-address"
-        returnKeyType="send"
-        onSubmitEditing={submit}
-        blurOnSubmit={true}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    paddingTop: 64,
-    padding: 20,
-    backgroundColor: '#282c34',
-  },
-  description: {
-    fontSize: 14,
-    color: 'white',
-  },
-  input: {
-    margin: 20,
-    marginBottom: 0,
-    height: 34,
-    paddingHorizontal: 10,
-    borderRadius: 4,
-    borderColor: '#ccc',
-    borderWidth: 1,
-    fontSize: 16,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-## Manage layout when keyboard is visible
-
-Software keyboard takes almost half of the screen. If you have interactive elements that can get covered by the keyboard, make sure they are still accessible by using the [`KeyboardAvoidingView` component](keyboardavoidingview.md).
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=KeyboardAvoidingView%20example&ext=js
-import React, {useState, useRef} from 'react';
-import {
-  Alert,
-  Text,
-  Button,
-  StatusBar,
-  TextInput,
-  KeyboardAvoidingView,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const App = () => {
-  const emailInput = useRef(null);
-  const [email, setEmail] = useState('');
-
-  const submit = () => {
-    emailInput.current.blur();
-    Alert.alert(`Confirmation email has been sent to ${email}`);
-  };
-
-  return (
-    <View style={styles.container}>
-      <StatusBar barStyle="light-content" />
-      <View style={styles.header}>
-        <Text style={styles.description}>
-          This demo shows how to avoid covering important UI elements with the
-          software keyboard. Focus the email input below and notice that the
-          Sign Up button and the text adjusted positions to make sure they are
-          not hidden under the keyboard.
-        </Text>
-      </View>
-      <KeyboardAvoidingView behavior="padding" style={styles.form}>
-        <TextInput
-          style={styles.input}
-          value={email}
-          onChangeText={text => setEmail(text)}
-          ref={emailInput}
-          placeholder="email@example.com"
-          autoCapitalize="none"
-          autoCorrect={false}
-          keyboardType="email-address"
-          returnKeyType="send"
-          onSubmitEditing={submit}
-          blurOnSubmit={true}
-        />
-        <View>
-          <Button title="Sign Up" onPress={submit} />
-          <Text style={styles.legal}>Some important legal fine print here</Text>
-        </View>
-      </KeyboardAvoidingView>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    paddingTop: 64,
-    padding: 20,
-    backgroundColor: '#282c34',
-  },
-  description: {
-    fontSize: 14,
-    color: 'white',
-  },
-  input: {
-    margin: 20,
-    marginBottom: 0,
-    height: 34,
-    paddingHorizontal: 10,
-    borderRadius: 4,
-    borderColor: '#ccc',
-    borderWidth: 1,
-    fontSize: 16,
-  },
-  legal: {
-    margin: 10,
-    color: '#333',
-    fontSize: 12,
-    textAlign: 'center',
-  },
-  form: {
-    flex: 1,
-    justifyContent: 'space-between',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=KeyboardAvoidingView%20example&ext=tsx
-import React, {useState, useRef} from 'react';
-import {
-  Alert,
-  Text,
-  Button,
-  StatusBar,
-  TextInput,
-  KeyboardAvoidingView,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const App = () => {
-  const emailInput = useRef<TextInput>(null);
-  const [email, setEmail] = useState('');
-
-  const submit = () => {
-    emailInput.current?.blur();
-    Alert.alert(`Confirmation email has been sent to ${email}`);
-  };
-
-  return (
-    <View style={styles.container}>
-      <StatusBar barStyle="light-content" />
-      <View style={styles.header}>
-        <Text style={styles.description}>
-          This demo shows how to avoid covering important UI elements with the
-          software keyboard. Focus the email input below and notice that the
-          Sign Up button and the text adjusted positions to make sure they are
-          not hidden under the keyboard.
-        </Text>
-      </View>
-      <KeyboardAvoidingView behavior="padding" style={styles.form}>
-        <TextInput
-          style={styles.input}
-          value={email}
-          onChangeText={text => setEmail(text)}
-          ref={emailInput}
-          placeholder="email@example.com"
-          autoCapitalize="none"
-          autoCorrect={false}
-          keyboardType="email-address"
-          returnKeyType="send"
-          onSubmitEditing={submit}
-          blurOnSubmit={true}
-        />
-        <View>
-          <Button title="Sign Up" onPress={submit} />
-          <Text style={styles.legal}>Some important legal fine print here</Text>
-        </View>
-      </KeyboardAvoidingView>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    paddingTop: 64,
-    padding: 20,
-    backgroundColor: '#282c34',
-  },
-  description: {
-    fontSize: 14,
-    color: 'white',
-  },
-  input: {
-    margin: 20,
-    marginBottom: 0,
-    height: 34,
-    paddingHorizontal: 10,
-    borderRadius: 4,
-    borderColor: '#ccc',
-    borderWidth: 1,
-    fontSize: 16,
-  },
-  legal: {
-    margin: 10,
-    color: '#333',
-    fontSize: 12,
-    textAlign: 'center',
-  },
-  form: {
-    flex: 1,
-    justifyContent: 'space-between',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-## Make tappable areas larger
-
-On mobile phones it's hard to be very precise when pressing buttons. Make sure all interactive elements are 44x44 or larger. One way to do this is to leave enough space for the element, `padding`, `minWidth` and `minHeight` style values can be useful for that. Alternatively, you can use [`hitSlop` prop](touchablewithoutfeedback.md#hitslop) to increase interactive area without affecting the layout. Here's a demo:
-
-```SnackPlayer name=HitSlop%20example
-import React from 'react';
-import {
-  Text,
-  StatusBar,
-  TouchableOpacity,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <StatusBar barStyle="light-content" />
-      <View style={styles.header}>
-        <Text style={styles.description}>
-          This demo shows how using hitSlop can make interactive elements much
-          easier to tap without changing their layout and size. Try pressing
-          each button quickly multiple times and notice which one is easier to
-          hit.
-        </Text>
-      </View>
-      <View style={styles.content}>
-        <TouchableOpacity>
-          <Text style={styles.label}>Without hitSlop</Text>
-        </TouchableOpacity>
-        <View style={styles.separator} />
-        <View style={styles.preview}>
-          <TouchableOpacity
-            hitSlop={{top: 20, left: 20, bottom: 20, right: 20}}>
-            <Text style={styles.label}>With hitSlop</Text>
-          </TouchableOpacity>
-        </View>
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    paddingTop: 64,
-    padding: 20,
-    backgroundColor: '#282c34',
-  },
-  description: {
-    fontSize: 14,
-    color: 'white',
-  },
-  content: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  label: {
-    fontSize: 18,
-    color: '#336699',
-    textAlign: 'center',
-    borderColor: '#ddd',
-    borderWidth: 1,
-  },
-  separator: {
-    height: 50,
-  },
-  preview: {
-    padding: 20,
-    backgroundColor: '#f6f6f6',
-  },
-});
-
-export default App;
-```
-
-## Use Android Ripple
-
-Android API 21+ uses the material design ripple to provide user with feedback when they touch an interactable area on the screen. React Native exposes this through the [`TouchableNativeFeedback` component](touchablenativefeedback.md). Using this touchable effect instead of opacity or highlight will often make your app feel much more fitting on the platform. That said, you need to be careful when using it because it doesn't work on iOS or on Android API < 21, so you will need to fallback to using one of the other Touchable components on iOS. You can use a library like [react-native-platform-touchable](https://github.com/react-community/react-native-platform-touchable) to handle the platform differences for you.
-
-```SnackPlayer name=Android%20Ripple%20example&supportedPlatforms=android
-import React from 'react';
-import {
-  TouchableNativeFeedback,
-  TouchableOpacity,
-  TouchableHighlight,
-  Platform,
-  Text,
-  View,
-  StyleSheet,
-} from 'react-native';
-
-const SUPPORTS_NATIVE_FEEDBACK =
-  Platform.OS === 'android' && Platform.Version >= 21;
-
-const noop = () => {};
-const defaultHitSlop = {top: 15, bottom: 15, right: 15, left: 15};
-
-const ButtonsWithNativeFeedback = () => (
-  <View style={styles.buttonContainer}>
-    <TouchableNativeFeedback
-      onPress={noop}
-      background={TouchableNativeFeedback.Ripple('#06bcee', false)}
-      hitSlop={defaultHitSlop}>
-      <View style={styles.button}>
-        <Text style={styles.text}>This is a ripple respecting borders</Text>
-      </View>
-    </TouchableNativeFeedback>
-    <TouchableNativeFeedback
-      onPress={noop}
-      background={TouchableNativeFeedback.Ripple('#06bcee', true)}
-      hitSlop={defaultHitSlop}>
-      <View style={styles.button}>
-        <Text style={styles.text}>
-          This is ripple without borders, this is more useful for icons, eg: in
-          tab bar
-        </Text>
-      </View>
-    </TouchableNativeFeedback>
-  </View>
-);
-
-const Buttons = () => (
-  <View style={styles.buttonContainer}>
-    <TouchableOpacity
-      style={styles.button}
-      onPress={noop}
-      hitSlop={defaultHitSlop}>
-      <Text style={styles.text}>This is opacity</Text>
-    </TouchableOpacity>
-    <TouchableHighlight
-      style={styles.button}
-      onPress={noop}
-      hitSlop={defaultHitSlop}
-      underlayColor="#06bcee">
-      <Text style={styles.text}>This is highlight</Text>
-    </TouchableHighlight>
-  </View>
-);
-
-const App = () => (
-  <View style={styles.container}>
-    {SUPPORTS_NATIVE_FEEDBACK ? <ButtonsWithNativeFeedback /> : <Buttons />}
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingTop: 64,
-    backgroundColor: '#fff',
-  },
-  buttonContainer: {
-    margin: 24,
-  },
-  text: {
-    fontSize: 20,
-    color: '#fff',
-    fontWeight: 'bold',
-  },
-  button: {
-    padding: 25,
-    borderRadius: 5,
-    backgroundColor: '#000',
-    marginBottom: 30,
-  },
-});
-
-export default App;
-```
-
-## Screen orientation lock
-
-Multiple screen orientations should work fine by default unless you're using `Dimensions` API and don't handle orientation changes. If you don't want to support multiple screen orientations, you can lock the screen orientation to either portrait or landscape.
-
-On iOS, in the General tab and Deployment Info section of Xcode enable the Device Orientation you want to support (ensure you have selected iPhone from the Devices menu when making the changes). For Android, open the AndroidManifest.xml file and within the activity element add `'android:screenOrientation="portrait"'` to lock to portrait or `'android:screenOrientation="landscape"'` to lock to landscape.
-
-# Learn more
-
-[Material Design](https://material.io/) and [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines) are great resources for learning more about designing for mobile platforms.
+---
+id: improvingux
+title: Improving User Experience
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+## Configure text inputs
+
+Entering text on touch phone is a challenge - small screen, software keyboard. But based on what kind of data you need, you can make it easier by properly configuring the text inputs:
+
+- Focus the first field automatically
+- Use placeholder text as an example of expected data format
+- Enable or disable autocapitalization and autocorrect
+- Choose keyboard type (e.g. email, numeric)
+- Make sure the return button focuses the next field or submits the form
+
+Check out [`TextInput` docs](textinput.md) for more configuration options.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=TextInput%20form%20example&ext=js
+import {useState, useRef} from 'react';
+import {
+  Alert,
+  Text,
+  StatusBar,
+  TextInput,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const App = () => {
+  const emailInput = useRef(null);
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+
+  const submit = () => {
+    Alert.alert(
+      `Welcome, ${name}! Confirmation email has been sent to ${email}`,
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="light-content" />
+      <View style={styles.header}>
+        <Text style={styles.description}>
+          This demo shows how using available TextInput customizations can make
+          forms much easier to use. Try completing the form and notice that
+          different fields have specific optimizations and the return key
+          changes from focusing next input to submitting the form.
+        </Text>
+      </View>
+      <TextInput
+        style={styles.input}
+        value={name}
+        onChangeText={text => setName(text)}
+        placeholder="Full Name"
+        autoFocus={true}
+        autoCapitalize="words"
+        autoCorrect={true}
+        keyboardType="default"
+        returnKeyType="next"
+        onSubmitEditing={() => emailInput.current.focus()}
+        blurOnSubmit={false}
+      />
+      <TextInput
+        style={styles.input}
+        value={email}
+        onChangeText={text => setEmail(text)}
+        ref={emailInput}
+        placeholder="email@example.com"
+        autoCapitalize="none"
+        autoCorrect={false}
+        keyboardType="email-address"
+        returnKeyType="send"
+        onSubmitEditing={submit}
+        blurOnSubmit={true}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 64,
+    padding: 20,
+    backgroundColor: '#282c34',
+  },
+  description: {
+    fontSize: 14,
+    color: 'white',
+  },
+  input: {
+    margin: 20,
+    marginBottom: 0,
+    height: 34,
+    paddingHorizontal: 10,
+    borderRadius: 4,
+    borderColor: '#ccc',
+    borderWidth: 1,
+    fontSize: 16,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=TextInput%20form%20example&ext=tsx
+import {useState, useRef} from 'react';
+import {
+  Alert,
+  Text,
+  StatusBar,
+  TextInput,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const App = () => {
+  const emailInput = useRef<TextInput>(null);
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+
+  const submit = () => {
+    Alert.alert(
+      `Welcome, ${name}! Confirmation email has been sent to ${email}`,
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="light-content" />
+      <View style={styles.header}>
+        <Text style={styles.description}>
+          This demo shows how using available TextInput customizations can make
+          forms much easier to use. Try completing the form and notice that
+          different fields have specific optimizations and the return key
+          changes from focusing next input to submitting the form.
+        </Text>
+      </View>
+      <TextInput
+        style={styles.input}
+        value={name}
+        onChangeText={text => setName(text)}
+        placeholder="Full Name"
+        autoFocus={true}
+        autoCapitalize="words"
+        autoCorrect={true}
+        keyboardType="default"
+        returnKeyType="next"
+        onSubmitEditing={() => emailInput.current?.focus()}
+        blurOnSubmit={false}
+      />
+      <TextInput
+        style={styles.input}
+        value={email}
+        onChangeText={text => setEmail(text)}
+        ref={emailInput}
+        placeholder="email@example.com"
+        autoCapitalize="none"
+        autoCorrect={false}
+        keyboardType="email-address"
+        returnKeyType="send"
+        onSubmitEditing={submit}
+        blurOnSubmit={true}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 64,
+    padding: 20,
+    backgroundColor: '#282c34',
+  },
+  description: {
+    fontSize: 14,
+    color: 'white',
+  },
+  input: {
+    margin: 20,
+    marginBottom: 0,
+    height: 34,
+    paddingHorizontal: 10,
+    borderRadius: 4,
+    borderColor: '#ccc',
+    borderWidth: 1,
+    fontSize: 16,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+## Manage layout when keyboard is visible
+
+Software keyboard takes almost half of the screen. If you have interactive elements that can get covered by the keyboard, make sure they are still accessible by using the [`KeyboardAvoidingView` component](keyboardavoidingview.md).
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=KeyboardAvoidingView%20example&ext=js
+import {useState, useRef} from 'react';
+import {
+  Alert,
+  Text,
+  Button,
+  StatusBar,
+  TextInput,
+  KeyboardAvoidingView,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const App = () => {
+  const emailInput = useRef(null);
+  const [email, setEmail] = useState('');
+
+  const submit = () => {
+    emailInput.current.blur();
+    Alert.alert(`Confirmation email has been sent to ${email}`);
+  };
+
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="light-content" />
+      <View style={styles.header}>
+        <Text style={styles.description}>
+          This demo shows how to avoid covering important UI elements with the
+          software keyboard. Focus the email input below and notice that the
+          Sign Up button and the text adjusted positions to make sure they are
+          not hidden under the keyboard.
+        </Text>
+      </View>
+      <KeyboardAvoidingView behavior="padding" style={styles.form}>
+        <TextInput
+          style={styles.input}
+          value={email}
+          onChangeText={text => setEmail(text)}
+          ref={emailInput}
+          placeholder="email@example.com"
+          autoCapitalize="none"
+          autoCorrect={false}
+          keyboardType="email-address"
+          returnKeyType="send"
+          onSubmitEditing={submit}
+          blurOnSubmit={true}
+        />
+        <View>
+          <Button title="Sign Up" onPress={submit} />
+          <Text style={styles.legal}>Some important legal fine print here</Text>
+        </View>
+      </KeyboardAvoidingView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 64,
+    padding: 20,
+    backgroundColor: '#282c34',
+  },
+  description: {
+    fontSize: 14,
+    color: 'white',
+  },
+  input: {
+    margin: 20,
+    marginBottom: 0,
+    height: 34,
+    paddingHorizontal: 10,
+    borderRadius: 4,
+    borderColor: '#ccc',
+    borderWidth: 1,
+    fontSize: 16,
+  },
+  legal: {
+    margin: 10,
+    color: '#333',
+    fontSize: 12,
+    textAlign: 'center',
+  },
+  form: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=KeyboardAvoidingView%20example&ext=tsx
+import {useState, useRef} from 'react';
+import {
+  Alert,
+  Text,
+  Button,
+  StatusBar,
+  TextInput,
+  KeyboardAvoidingView,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const App = () => {
+  const emailInput = useRef<TextInput>(null);
+  const [email, setEmail] = useState('');
+
+  const submit = () => {
+    emailInput.current?.blur();
+    Alert.alert(`Confirmation email has been sent to ${email}`);
+  };
+
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="light-content" />
+      <View style={styles.header}>
+        <Text style={styles.description}>
+          This demo shows how to avoid covering important UI elements with the
+          software keyboard. Focus the email input below and notice that the
+          Sign Up button and the text adjusted positions to make sure they are
+          not hidden under the keyboard.
+        </Text>
+      </View>
+      <KeyboardAvoidingView behavior="padding" style={styles.form}>
+        <TextInput
+          style={styles.input}
+          value={email}
+          onChangeText={text => setEmail(text)}
+          ref={emailInput}
+          placeholder="email@example.com"
+          autoCapitalize="none"
+          autoCorrect={false}
+          keyboardType="email-address"
+          returnKeyType="send"
+          onSubmitEditing={submit}
+          blurOnSubmit={true}
+        />
+        <View>
+          <Button title="Sign Up" onPress={submit} />
+          <Text style={styles.legal}>Some important legal fine print here</Text>
+        </View>
+      </KeyboardAvoidingView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 64,
+    padding: 20,
+    backgroundColor: '#282c34',
+  },
+  description: {
+    fontSize: 14,
+    color: 'white',
+  },
+  input: {
+    margin: 20,
+    marginBottom: 0,
+    height: 34,
+    paddingHorizontal: 10,
+    borderRadius: 4,
+    borderColor: '#ccc',
+    borderWidth: 1,
+    fontSize: 16,
+  },
+  legal: {
+    margin: 10,
+    color: '#333',
+    fontSize: 12,
+    textAlign: 'center',
+  },
+  form: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+## Make tappable areas larger
+
+On mobile phones it's hard to be very precise when pressing buttons. Make sure all interactive elements are 44x44 or larger. One way to do this is to leave enough space for the element, `padding`, `minWidth` and `minHeight` style values can be useful for that. Alternatively, you can use [`hitSlop` prop](touchablewithoutfeedback.md#hitslop) to increase interactive area without affecting the layout. Here's a demo:
+
+```SnackPlayer name=HitSlop%20example
+import {
+  Text,
+  StatusBar,
+  TouchableOpacity,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="light-content" />
+      <View style={styles.header}>
+        <Text style={styles.description}>
+          This demo shows how using hitSlop can make interactive elements much
+          easier to tap without changing their layout and size. Try pressing
+          each button quickly multiple times and notice which one is easier to
+          hit.
+        </Text>
+      </View>
+      <View style={styles.content}>
+        <TouchableOpacity>
+          <Text style={styles.label}>Without hitSlop</Text>
+        </TouchableOpacity>
+        <View style={styles.separator} />
+        <View style={styles.preview}>
+          <TouchableOpacity
+            hitSlop={{top: 20, left: 20, bottom: 20, right: 20}}>
+            <Text style={styles.label}>With hitSlop</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 64,
+    padding: 20,
+    backgroundColor: '#282c34',
+  },
+  description: {
+    fontSize: 14,
+    color: 'white',
+  },
+  content: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  label: {
+    fontSize: 18,
+    color: '#336699',
+    textAlign: 'center',
+    borderColor: '#ddd',
+    borderWidth: 1,
+  },
+  separator: {
+    height: 50,
+  },
+  preview: {
+    padding: 20,
+    backgroundColor: '#f6f6f6',
+  },
+});
+
+export default App;
+```
+
+## Use Android Ripple
+
+Android API 21+ uses the material design ripple to provide user with feedback when they touch an interactable area on the screen. React Native exposes this through the [`TouchableNativeFeedback` component](touchablenativefeedback.md). Using this touchable effect instead of opacity or highlight will often make your app feel much more fitting on the platform. That said, you need to be careful when using it because it doesn't work on iOS or on Android API < 21, so you will need to fallback to using one of the other Touchable components on iOS. You can use a library like [react-native-platform-touchable](https://github.com/react-community/react-native-platform-touchable) to handle the platform differences for you.
+
+```SnackPlayer name=Android%20Ripple%20example&supportedPlatforms=android
+import {
+  TouchableNativeFeedback,
+  TouchableOpacity,
+  TouchableHighlight,
+  Platform,
+  Text,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+const SUPPORTS_NATIVE_FEEDBACK =
+  Platform.OS === 'android' && Platform.Version >= 21;
+
+const noop = () => {};
+const defaultHitSlop = {top: 15, bottom: 15, right: 15, left: 15};
+
+const ButtonsWithNativeFeedback = () => (
+  <View style={styles.buttonContainer}>
+    <TouchableNativeFeedback
+      onPress={noop}
+      background={TouchableNativeFeedback.Ripple('#06bcee', false)}
+      hitSlop={defaultHitSlop}>
+      <View style={styles.button}>
+        <Text style={styles.text}>This is a ripple respecting borders</Text>
+      </View>
+    </TouchableNativeFeedback>
+    <TouchableNativeFeedback
+      onPress={noop}
+      background={TouchableNativeFeedback.Ripple('#06bcee', true)}
+      hitSlop={defaultHitSlop}>
+      <View style={styles.button}>
+        <Text style={styles.text}>
+          This is ripple without borders, this is more useful for icons, eg: in
+          tab bar
+        </Text>
+      </View>
+    </TouchableNativeFeedback>
+  </View>
+);
+
+const Buttons = () => (
+  <View style={styles.buttonContainer}>
+    <TouchableOpacity
+      style={styles.button}
+      onPress={noop}
+      hitSlop={defaultHitSlop}>
+      <Text style={styles.text}>This is opacity</Text>
+    </TouchableOpacity>
+    <TouchableHighlight
+      style={styles.button}
+      onPress={noop}
+      hitSlop={defaultHitSlop}
+      underlayColor="#06bcee">
+      <Text style={styles.text}>This is highlight</Text>
+    </TouchableHighlight>
+  </View>
+);
+
+const App = () => (
+  <View style={styles.container}>
+    {SUPPORTS_NATIVE_FEEDBACK ? <ButtonsWithNativeFeedback /> : <Buttons />}
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: 64,
+    backgroundColor: '#fff',
+  },
+  buttonContainer: {
+    margin: 24,
+  },
+  text: {
+    fontSize: 20,
+    color: '#fff',
+    fontWeight: 'bold',
+  },
+  button: {
+    padding: 25,
+    borderRadius: 5,
+    backgroundColor: '#000',
+    marginBottom: 30,
+  },
+});
+
+export default App;
+```
+
+## Screen orientation lock
+
+Multiple screen orientations should work fine by default unless you're using `Dimensions` API and don't handle orientation changes. If you don't want to support multiple screen orientations, you can lock the screen orientation to either portrait or landscape.
+
+On iOS, in the General tab and Deployment Info section of Xcode enable the Device Orientation you want to support (ensure you have selected iPhone from the Devices menu when making the changes). For Android, open the AndroidManifest.xml file and within the activity element add `'android:screenOrientation="portrait"'` to lock to portrait or `'android:screenOrientation="landscape"'` to lock to landscape.
+
+# Learn more
+
+[Material Design](https://material.io/) and [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines) are great resources for learning more about designing for mobile platforms.
diff --git a/website/versioned_docs/version-0.86/inputaccessoryview.md b/website/versioned_docs/version-0.86/inputaccessoryview.md
index a4f56532fa4..76220b4fd7c 100644
--- a/website/versioned_docs/version-0.86/inputaccessoryview.md
+++ b/website/versioned_docs/version-0.86/inputaccessoryview.md
@@ -1,98 +1,98 @@
----
-id: inputaccessoryview
-title: InputAccessoryView
----
-
-A component which enables customization of the keyboard input accessory view on iOS. The input accessory view is displayed above the keyboard whenever a `TextInput` has focus. This component can be used to create custom toolbars.
-
-To use this component wrap your custom toolbar with the InputAccessoryView component, and set a `nativeID`. Then, pass that `nativeID` as the `inputAccessoryViewID` of whatever `TextInput` you desire. A basic example:
-
-```SnackPlayer name=InputAccessoryView&supportedPlatforms=ios
-import React, {useState} from 'react';
-import {
-  Button,
-  InputAccessoryView,
-  ScrollView,
-  TextInput,
-  StyleSheet,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const inputAccessoryViewID = 'uniqueID';
-const initialText = '';
-
-const App = () => {
-  const [text, setText] = useState(initialText);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <ScrollView keyboardDismissMode="interactive">
-          <TextInput
-            style={styles.textInput}
-            inputAccessoryViewID={inputAccessoryViewID}
-            onChangeText={setText}
-            value={text}
-            placeholder={'Please type here…'}
-          />
-        </ScrollView>
-      </SafeAreaView>
-      <InputAccessoryView nativeID={inputAccessoryViewID}>
-        <Button onPress={() => setText(initialText)} title="Clear text" />
-      </InputAccessoryView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: 20,
-  },
-  textInput: {
-    padding: 16,
-    borderColor: 'black',
-    borderWidth: 1,
-  },
-});
-
-export default App;
-```
-
-This component can also be used to create sticky text inputs (text inputs which are anchored to the top of the keyboard). To do this, wrap a `TextInput` with the `InputAccessoryView` component, and don't set a `nativeID`. For an example, look at [InputAccessoryViewExample.js](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/InputAccessoryView/InputAccessoryViewExample.js).
-
----
-
-# Reference
-
-## Props
-
-### `backgroundColor`
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `nativeID`
-
-An ID which is used to associate this `InputAccessoryView` to specified TextInput(s).
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `style`
-
-| Type                              |
-| --------------------------------- |
-| [View Style](view-style-props.md) |
-
-# Known issues
-
-- [react-native#18997](https://github.com/facebook/react-native/issues/18997): Doesn't support multiline `TextInput`
-- [react-native#20157](https://github.com/facebook/react-native/issues/20157): Can't use with a bottom tab bar
+---
+id: inputaccessoryview
+title: InputAccessoryView
+---
+
+A component which enables customization of the keyboard input accessory view on iOS. The input accessory view is displayed above the keyboard whenever a `TextInput` has focus. This component can be used to create custom toolbars.
+
+To use this component wrap your custom toolbar with the InputAccessoryView component, and set a `nativeID`. Then, pass that `nativeID` as the `inputAccessoryViewID` of whatever `TextInput` you desire. A basic example:
+
+```SnackPlayer name=InputAccessoryView&supportedPlatforms=ios
+import {useState} from 'react';
+import {
+  Button,
+  InputAccessoryView,
+  ScrollView,
+  TextInput,
+  StyleSheet,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const inputAccessoryViewID = 'uniqueID';
+const initialText = '';
+
+const App = () => {
+  const [text, setText] = useState(initialText);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <ScrollView keyboardDismissMode="interactive">
+          <TextInput
+            style={styles.textInput}
+            inputAccessoryViewID={inputAccessoryViewID}
+            onChangeText={setText}
+            value={text}
+            placeholder={'Please type here…'}
+          />
+        </ScrollView>
+      </SafeAreaView>
+      <InputAccessoryView nativeID={inputAccessoryViewID}>
+        <Button onPress={() => setText(initialText)} title="Clear text" />
+      </InputAccessoryView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 20,
+  },
+  textInput: {
+    padding: 16,
+    borderColor: 'black',
+    borderWidth: 1,
+  },
+});
+
+export default App;
+```
+
+This component can also be used to create sticky text inputs (text inputs which are anchored to the top of the keyboard). To do this, wrap a `TextInput` with the `InputAccessoryView` component, and don't set a `nativeID`. For an example, look at [InputAccessoryViewExample.js](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/InputAccessoryView/InputAccessoryViewExample.js).
+
+---
+
+# Reference
+
+## Props
+
+### `backgroundColor`
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `nativeID`
+
+An ID which is used to associate this `InputAccessoryView` to specified TextInput(s).
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `style`
+
+| Type                              |
+| --------------------------------- |
+| [View Style](view-style-props.md) |
+
+# Known issues
+
+- [react-native#18997](https://github.com/facebook/react-native/issues/18997): Doesn't support multiline `TextInput`
+- [react-native#20157](https://github.com/facebook/react-native/issues/20157): Can't use with a bottom tab bar
diff --git a/website/versioned_docs/version-0.86/interactionmanager.md b/website/versioned_docs/version-0.86/interactionmanager.md
index 8eac16a4b70..f98634581f3 100644
--- a/website/versioned_docs/version-0.86/interactionmanager.md
+++ b/website/versioned_docs/version-0.86/interactionmanager.md
@@ -1,422 +1,422 @@
----
-id: interactionmanager
-title: 🗑️ InteractionManager
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-:::warning Deprecated
-Avoid long-running work and use [`requestIdleCallback`](global-requestIdleCallback) instead.
-:::
-
-InteractionManager allows long-running work to be scheduled after any interactions/animations have completed. In particular, this allows JavaScript animations to run smoothly.
-
-Applications can schedule tasks to run after interactions with the following:
-
-```tsx
-InteractionManager.runAfterInteractions(() => {
-  // ...long-running synchronous task...
-});
-```
-
-Compare this to other scheduling alternatives:
-
-- `requestAnimationFrame()` for code that animates a view over time.
-- `setImmediate/setTimeout()` run code later, note this may delay animations.
-- `runAfterInteractions()` run code later, without delaying active animations.
-
-The touch handling system considers one or more active touches to be an 'interaction' and will delay `runAfterInteractions()` callbacks until all touches have ended or been cancelled.
-
-InteractionManager also allows applications to register animations by creating an interaction 'handle' on animation start, and clearing it upon completion:
-
-```tsx
-const handle = InteractionManager.createInteractionHandle();
-// run animation... (`runAfterInteractions` tasks are queued)
-// later, on animation completion:
-InteractionManager.clearInteractionHandle(handle);
-// queued tasks run if all handles were cleared
-```
-
-`runAfterInteractions` takes either a plain callback function, or a `PromiseTask` object with a `gen` method that returns a `Promise`. If a `PromiseTask` is supplied, then it is fully resolved (including asynchronous dependencies that also schedule more tasks via `runAfterInteractions`) before starting on the next task that might have been queued up synchronously earlier.
-
-By default, queued tasks are executed together in a loop in one `setImmediate` batch. If `setDeadline` is called with a positive number, then tasks will only be executed until the deadline (in terms of js event loop run time) approaches, at which point execution will yield via setTimeout, allowing events such as touches to start interactions and block queued tasks from executing, making apps more responsive.
-
----
-
-## Example
-
-### Basic
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useEffect} from 'react';
-import {
-  Alert,
-  Animated,
-  InteractionManager,
-  Platform,
-  StyleSheet,
-  Text,
-  useAnimatedValue,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
-
-const useFadeIn = (duration = 5000) => {
-  const opacity = useAnimatedValue(0);
-
-  // Running the animation when the component is mounted
-  useEffect(() => {
-    // Animated.timing() create a interaction handle by default, if you want to disabled that
-    // behaviour you can set isInteraction to false to disabled that.
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration,
-      useNativeDriver: true,
-    }).start();
-  }, [duration, opacity]);
-
-  return opacity;
-};
-
-const Ball = ({onShown}) => {
-  const opacity = useFadeIn();
-
-  // Running a method after the animation
-  useEffect(() => {
-    const interactionPromise = InteractionManager.runAfterInteractions(() =>
-      onShown(),
-    );
-    return () => interactionPromise.cancel();
-  }, [onShown]);
-
-  return <Animated.View style={[styles.ball, {opacity}]} />;
-};
-
-const App = () => {
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>{instructions}</Text>
-        <Ball onShown={() => Alert.alert('Animation is done')} />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  ball: {
-    width: 100,
-    height: 100,
-    backgroundColor: 'salmon',
-    borderRadius: 100,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useEffect} from 'react';
-import {
-  Alert,
-  Animated,
-  InteractionManager,
-  Platform,
-  StyleSheet,
-  Text,
-  useAnimatedValue,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
-
-const useFadeIn = (duration = 5000) => {
-  const opacity = useAnimatedValue(0);
-
-  // Running the animation when the component is mounted
-  useEffect(() => {
-    // Animated.timing() create a interaction handle by default, if you want to disabled that
-    // behaviour you can set isInteraction to false to disabled that.
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration,
-      useNativeDriver: true,
-    }).start();
-  }, [duration, opacity]);
-
-  return opacity;
-};
-
-type BallProps = {
-  onShown: () => void;
-};
-
-const Ball = ({onShown}: BallProps) => {
-  const opacity = useFadeIn();
-
-  // Running a method after the animation
-  useEffect(() => {
-    const interactionPromise = InteractionManager.runAfterInteractions(() =>
-      onShown(),
-    );
-    return () => interactionPromise.cancel();
-  }, [onShown]);
-
-  return <Animated.View style={[styles.ball, {opacity}]} />;
-};
-
-const App = () => {
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>{instructions}</Text>
-        <Ball onShown={() => Alert.alert('Animation is done')} />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  ball: {
-    width: 100,
-    height: 100,
-    backgroundColor: 'salmon',
-    borderRadius: 100,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### Advanced
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useEffect} from 'react';
-import {
-  Alert,
-  Animated,
-  InteractionManager,
-  Platform,
-  StyleSheet,
-  Text,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
-
-// You can create a custom interaction/animation and add
-// support for InteractionManager
-const useCustomInteraction = (timeLocked = 2000) => {
-  useEffect(() => {
-    const handle = InteractionManager.createInteractionHandle();
-
-    setTimeout(
-      () => InteractionManager.clearInteractionHandle(handle),
-      timeLocked,
-    );
-
-    return () => InteractionManager.clearInteractionHandle(handle);
-  }, [timeLocked]);
-};
-
-const Ball = ({onInteractionIsDone}) => {
-  useCustomInteraction();
-
-  // Running a method after the interaction
-  useEffect(() => {
-    InteractionManager.runAfterInteractions(() => onInteractionIsDone());
-  }, [onInteractionIsDone]);
-
-  return <Animated.View style={[styles.ball]} />;
-};
-
-const App = () => {
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>{instructions}</Text>
-        <Ball onInteractionIsDone={() => Alert.alert('Interaction is done')} />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  ball: {
-    width: 100,
-    height: 100,
-    backgroundColor: 'salmon',
-    borderRadius: 100,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useEffect} from 'react';
-import {
-  Alert,
-  Animated,
-  InteractionManager,
-  Platform,
-  StyleSheet,
-  Text,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
-
-// You can create a custom interaction/animation and add
-// support for InteractionManager
-const useCustomInteraction = (timeLocked = 2000) => {
-  useEffect(() => {
-    const handle = InteractionManager.createInteractionHandle();
-
-    setTimeout(
-      () => InteractionManager.clearInteractionHandle(handle),
-      timeLocked,
-    );
-
-    return () => InteractionManager.clearInteractionHandle(handle);
-  }, [timeLocked]);
-};
-
-type BallProps = {
-  onInteractionIsDone: () => void;
-};
-
-const Ball = ({onInteractionIsDone}: BallProps) => {
-  useCustomInteraction();
-
-  // Running a method after the interaction
-  useEffect(() => {
-    InteractionManager.runAfterInteractions(() => onInteractionIsDone());
-  }, [onInteractionIsDone]);
-
-  return <Animated.View style={[styles.ball]} />;
-};
-
-const App = () => {
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>{instructions}</Text>
-        <Ball onInteractionIsDone={() => Alert.alert('Interaction is done')} />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  ball: {
-    width: 100,
-    height: 100,
-    backgroundColor: 'salmon',
-    borderRadius: 100,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-# Reference
-
-## Methods
-
-### `runAfterInteractions()`
-
-```tsx
-static runAfterInteractions(task?: (() => any) | SimpleTask | PromiseTask);
-```
-
-Schedule a function to run after all interactions have completed. Returns a cancellable "promise".
-
----
-
-### `createInteractionHandle()`
-
-```tsx
-static createInteractionHandle(): Handle;
-```
-
-Notify manager that an interaction has started.
-
----
-
-### `clearInteractionHandle()`
-
-```tsx
-static clearInteractionHandle(handle: Handle);
-```
-
-Notify manager that an interaction has completed.
-
----
-
-### `setDeadline()`
-
-```tsx
-static setDeadline(deadline: number);
-```
-
-A positive number will use setTimeout to schedule any tasks after the eventLoopRunningTime hits the deadline value, otherwise all tasks will be executed in one setImmediate batch (default).
+---
+id: interactionmanager
+title: 🗑️ InteractionManager
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+:::warning Deprecated
+Avoid long-running work and use [`requestIdleCallback`](global-requestIdleCallback) instead.
+:::
+
+InteractionManager allows long-running work to be scheduled after any interactions/animations have completed. In particular, this allows JavaScript animations to run smoothly.
+
+Applications can schedule tasks to run after interactions with the following:
+
+```tsx
+InteractionManager.runAfterInteractions(() => {
+  // ...long-running synchronous task...
+});
+```
+
+Compare this to other scheduling alternatives:
+
+- `requestAnimationFrame()` for code that animates a view over time.
+- `setImmediate/setTimeout()` run code later, note this may delay animations.
+- `runAfterInteractions()` run code later, without delaying active animations.
+
+The touch handling system considers one or more active touches to be an 'interaction' and will delay `runAfterInteractions()` callbacks until all touches have ended or been cancelled.
+
+InteractionManager also allows applications to register animations by creating an interaction 'handle' on animation start, and clearing it upon completion:
+
+```tsx
+const handle = InteractionManager.createInteractionHandle();
+// run animation... (`runAfterInteractions` tasks are queued)
+// later, on animation completion:
+InteractionManager.clearInteractionHandle(handle);
+// queued tasks run if all handles were cleared
+```
+
+`runAfterInteractions` takes either a plain callback function, or a `PromiseTask` object with a `gen` method that returns a `Promise`. If a `PromiseTask` is supplied, then it is fully resolved (including asynchronous dependencies that also schedule more tasks via `runAfterInteractions`) before starting on the next task that might have been queued up synchronously earlier.
+
+By default, queued tasks are executed together in a loop in one `setImmediate` batch. If `setDeadline` is called with a positive number, then tasks will only be executed until the deadline (in terms of js event loop run time) approaches, at which point execution will yield via setTimeout, allowing events such as touches to start interactions and block queued tasks from executing, making apps more responsive.
+
+---
+
+## Example
+
+### Basic
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=js
+import {useEffect} from 'react';
+import {
+  Alert,
+  Animated,
+  InteractionManager,
+  Platform,
+  StyleSheet,
+  Text,
+  useAnimatedValue,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const instructions = Platform.select({
+  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
+  android:
+    'Double tap R on your keyboard to reload,\n' +
+    'Shake or press menu button for dev menu',
+});
+
+const useFadeIn = (duration = 5000) => {
+  const opacity = useAnimatedValue(0);
+
+  // Running the animation when the component is mounted
+  useEffect(() => {
+    // Animated.timing() create a interaction handle by default, if you want to disabled that
+    // behaviour you can set isInteraction to false to disabled that.
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration,
+      useNativeDriver: true,
+    }).start();
+  }, [duration, opacity]);
+
+  return opacity;
+};
+
+const Ball = ({onShown}) => {
+  const opacity = useFadeIn();
+
+  // Running a method after the animation
+  useEffect(() => {
+    const interactionPromise = InteractionManager.runAfterInteractions(() =>
+      onShown(),
+    );
+    return () => interactionPromise.cancel();
+  }, [onShown]);
+
+  return <Animated.View style={[styles.ball, {opacity}]} />;
+};
+
+const App = () => {
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>{instructions}</Text>
+        <Ball onShown={() => Alert.alert('Animation is done')} />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  ball: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'salmon',
+    borderRadius: 100,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=tsx
+import {useEffect} from 'react';
+import {
+  Alert,
+  Animated,
+  InteractionManager,
+  Platform,
+  StyleSheet,
+  Text,
+  useAnimatedValue,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const instructions = Platform.select({
+  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
+  android:
+    'Double tap R on your keyboard to reload,\n' +
+    'Shake or press menu button for dev menu',
+});
+
+const useFadeIn = (duration = 5000) => {
+  const opacity = useAnimatedValue(0);
+
+  // Running the animation when the component is mounted
+  useEffect(() => {
+    // Animated.timing() create a interaction handle by default, if you want to disabled that
+    // behaviour you can set isInteraction to false to disabled that.
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration,
+      useNativeDriver: true,
+    }).start();
+  }, [duration, opacity]);
+
+  return opacity;
+};
+
+type BallProps = {
+  onShown: () => void;
+};
+
+const Ball = ({onShown}: BallProps) => {
+  const opacity = useFadeIn();
+
+  // Running a method after the animation
+  useEffect(() => {
+    const interactionPromise = InteractionManager.runAfterInteractions(() =>
+      onShown(),
+    );
+    return () => interactionPromise.cancel();
+  }, [onShown]);
+
+  return <Animated.View style={[styles.ball, {opacity}]} />;
+};
+
+const App = () => {
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>{instructions}</Text>
+        <Ball onShown={() => Alert.alert('Animation is done')} />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  ball: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'salmon',
+    borderRadius: 100,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### Advanced
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=js
+import {useEffect} from 'react';
+import {
+  Alert,
+  Animated,
+  InteractionManager,
+  Platform,
+  StyleSheet,
+  Text,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const instructions = Platform.select({
+  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
+  android:
+    'Double tap R on your keyboard to reload,\n' +
+    'Shake or press menu button for dev menu',
+});
+
+// You can create a custom interaction/animation and add
+// support for InteractionManager
+const useCustomInteraction = (timeLocked = 2000) => {
+  useEffect(() => {
+    const handle = InteractionManager.createInteractionHandle();
+
+    setTimeout(
+      () => InteractionManager.clearInteractionHandle(handle),
+      timeLocked,
+    );
+
+    return () => InteractionManager.clearInteractionHandle(handle);
+  }, [timeLocked]);
+};
+
+const Ball = ({onInteractionIsDone}) => {
+  useCustomInteraction();
+
+  // Running a method after the interaction
+  useEffect(() => {
+    InteractionManager.runAfterInteractions(() => onInteractionIsDone());
+  }, [onInteractionIsDone]);
+
+  return <Animated.View style={[styles.ball]} />;
+};
+
+const App = () => {
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>{instructions}</Text>
+        <Ball onInteractionIsDone={() => Alert.alert('Interaction is done')} />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  ball: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'salmon',
+    borderRadius: 100,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=tsx
+import {useEffect} from 'react';
+import {
+  Alert,
+  Animated,
+  InteractionManager,
+  Platform,
+  StyleSheet,
+  Text,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const instructions = Platform.select({
+  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
+  android:
+    'Double tap R on your keyboard to reload,\n' +
+    'Shake or press menu button for dev menu',
+});
+
+// You can create a custom interaction/animation and add
+// support for InteractionManager
+const useCustomInteraction = (timeLocked = 2000) => {
+  useEffect(() => {
+    const handle = InteractionManager.createInteractionHandle();
+
+    setTimeout(
+      () => InteractionManager.clearInteractionHandle(handle),
+      timeLocked,
+    );
+
+    return () => InteractionManager.clearInteractionHandle(handle);
+  }, [timeLocked]);
+};
+
+type BallProps = {
+  onInteractionIsDone: () => void;
+};
+
+const Ball = ({onInteractionIsDone}: BallProps) => {
+  useCustomInteraction();
+
+  // Running a method after the interaction
+  useEffect(() => {
+    InteractionManager.runAfterInteractions(() => onInteractionIsDone());
+  }, [onInteractionIsDone]);
+
+  return <Animated.View style={[styles.ball]} />;
+};
+
+const App = () => {
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>{instructions}</Text>
+        <Ball onInteractionIsDone={() => Alert.alert('Interaction is done')} />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  ball: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'salmon',
+    borderRadius: 100,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+# Reference
+
+## Methods
+
+### `runAfterInteractions()`
+
+```tsx
+static runAfterInteractions(task?: (() => any) | SimpleTask | PromiseTask);
+```
+
+Schedule a function to run after all interactions have completed. Returns a cancellable "promise".
+
+---
+
+### `createInteractionHandle()`
+
+```tsx
+static createInteractionHandle(): Handle;
+```
+
+Notify manager that an interaction has started.
+
+---
+
+### `clearInteractionHandle()`
+
+```tsx
+static clearInteractionHandle(handle: Handle);
+```
+
+Notify manager that an interaction has completed.
+
+---
+
+### `setDeadline()`
+
+```tsx
+static setDeadline(deadline: number);
+```
+
+A positive number will use setTimeout to schedule any tasks after the eventLoopRunningTime hits the deadline value, otherwise all tasks will be executed in one setImmediate batch (default).
diff --git a/website/versioned_docs/version-0.86/intro-react-native-components.md b/website/versioned_docs/version-0.86/intro-react-native-components.md
index eb585964154..2f3a1449d28 100644
--- a/website/versioned_docs/version-0.86/intro-react-native-components.md
+++ b/website/versioned_docs/version-0.86/intro-react-native-components.md
@@ -43,7 +43,6 @@ React Native has many Core Components for everything from controls to activity i
 In the next section, you will start combining these Core Components to learn about how React works. Have a play with them here now!
 
 ```SnackPlayer name=Hello%20World
-import React from 'react';
 import {View, Text, Image, ScrollView, TextInput} from 'react-native';
 
 const App = () => {
diff --git a/website/versioned_docs/version-0.86/introduction.md b/website/versioned_docs/version-0.86/introduction.md
index ba782cd838c..2752b80327b 100644
--- a/website/versioned_docs/version-0.86/introduction.md
+++ b/website/versioned_docs/version-0.86/introduction.md
@@ -30,7 +30,6 @@ While we do our best to assume no prior knowledge of React, Android, or iOS deve
 This introduction lets you get started immediately in your browser with interactive examples like this one:
 
 ```SnackPlayer name=Hello%20World
-import React from 'react';
 import {Text, View} from 'react-native';
 
 const YourApp = () => {
diff --git a/website/versioned_docs/version-0.86/javascript-environment.md b/website/versioned_docs/version-0.86/javascript-environment.md
index ab041dd34cd..2149516a93b 100644
--- a/website/versioned_docs/version-0.86/javascript-environment.md
+++ b/website/versioned_docs/version-0.86/javascript-environment.md
@@ -1,109 +1,109 @@
----
-id: javascript-environment
-title: JavaScript Environment
----
-
-import TableRow from '@site/core/TableRowWithCodeBlock';
-
-## JavaScript Runtime
-
-When using React Native, you're going to be running your JavaScript code in up to three environments:
-
-- In most cases, React Native will use [Hermes](hermes), an open-source JavaScript engine optimized for React Native.
-- If Hermes is disabled, React Native will use [JavaScriptCore](https://trac.webkit.org/wiki/JavaScriptCore), the JavaScript engine that powers Safari. Note that on iOS, JavaScriptCore does not use JIT due to the absence of writable executable memory in iOS apps.
-- When using Chrome debugging, all JavaScript code runs within Chrome itself, communicating with native code via WebSockets. Chrome uses [V8](https://v8.dev/) as its JavaScript engine.
-
-While these environments are very similar, you may end up hitting some inconsistencies. It is best to avoid relying on specifics of any runtime.
-
-## JavaScript Syntax Transformers
-
-Syntax transformers make writing code more enjoyable by allowing you to use new JavaScript syntax without having to wait for support on all interpreters.
-
-React Native ships with the [Babel JavaScript compiler](https://babeljs.io). Check [Babel documentation](https://babeljs.io/docs/plugins/#transform-plugins) on its supported transformations for more details.
-
-A full list of React Native's enabled transformations can be found in [@react-native/babel-preset](https://github.com/facebook/react-native/tree/main/packages/react-native-babel-preset).
-
-<table>
-<thead>
-  <tr><th>Transformation</th><th>Code</th></tr>
-</thead>
-<tbody>
-  <tr><td className="table-heading" colSpan="2">ECMAScript 5</td></tr>
-  <TableRow name="Reserved Words" code="promise.catch(function() {...});" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2015 (ES6)</td></tr>
-  <TableRow name="Arrow functions" code="<C onPress={() => this.setState({pressed: true})} />" url="https://babeljs.io/docs/learn-es2015/#arrows" />
-  <TableRow name="Block scoping" code="let greeting = 'hi';" url="https://babeljs.io/docs/learn-es2015/#let-const" />
-  <TableRow name="Call spread" code="Math.max(...array);" url="https://babeljs.io/docs/learn-es2015/#default-rest-spread" />
-  <TableRow name="Classes" code="class C extends React.Component {render() { return <View />; }}" url="https://babeljs.io/docs/learn-es2015/#classes" />
-  <TableRow name="Computed Properties" code="const key = 'abc'; const obj = {[key]: 10};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
-  <TableRow name="Constants" code="const answer = 42;" url="https://babeljs.io/docs/learn-es2015/#let-const" />
-  <TableRow name="Destructuring" code="const {isActive, style} = this.props;" url="https://babeljs.io/docs/learn-es2015/#destructuring" />
-  <TableRow name="for…of" code="for (var num of [1, 2, 3]) {...};" url="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of" />
-  <TableRow name="Function Name" code="let number = x => x;" url="https://babeljs.io/docs/en/babel-plugin-transform-function-name" />
-  <TableRow name="Literals" code="const b = 0b11; const o = 0o7; const u = 'Hello\u{000A}\u{0009}!';" url="https://babeljs.io/docs/en/babel-plugin-transform-literals" />
-  <TableRow name="Modules" code="import React, {Component} from 'react';" url="https://babeljs.io/docs/learn-es2015/#modules" />
-  <TableRow name="Object Concise Method" code="const obj = {method() { return 10; }};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
-  <TableRow name="Object Short Notation" code="const name = 'vjeux'; const obj = {name};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
-  <TableRow name="Parameters" code="function test(x = 'hello', {a, b}, ...args) {}" url="https://babeljs.io/docs/en/babel-plugin-transform-parameters" />
-  <TableRow name="Rest Params" code="function(type, ...args) {};" url="https://github.com/sebmarkbage/ecmascript-rest-spread" />
-  <TableRow name="Shorthand Properties" code="const o = {a, b, c};" url="https://babeljs.io/docs/en/babel-plugin-transform-shorthand-properties" />
-  <TableRow name="Sticky Regex" code="const a = /o+/y;" url="https://babeljs.io/docs/en/babel-plugin-transform-sticky-regex" />
-  <TableRow name="Template Literals" code="const who = 'world'; const str = `Hello ${who}`;" url="https://babeljs.io/docs/learn-es2015/#template-strings" />
-  <TableRow name="Unicode Regex" code="const string = 'foo💩bar'; const match = string.match(/foo(.)bar/u);" url="https://babeljs.io/docs/en/babel-plugin-transform-unicode-regex" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2016 (ES7)</td></tr>
-  <TableRow name="Exponentiation Operator" code="let x = 10 ** 2;" url="https://babeljs.io/docs/en/babel-plugin-transform-exponentiation-operator" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2017 (ES8)</td></tr>
-  <TableRow name="Async Functions" code="async function doStuffAsync() {const foo = await doOtherStuffAsync();};" url="https://github.com/tc39/ecmascript-asyncawait" />
-  <TableRow name="Function Trailing Comma" code="function f(a, b, c,) {};" url="https://github.com/jeffmo/es-trailing-function-commas" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2018 (ES9)</td></tr>
-  <TableRow name="Object Spread" code="const extended = {...obj, a: 10};" url="https://github.com/tc39/proposal-object-rest-spread" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2019 (ES10)</td></tr>
-  <TableRow name="Optional Catch Binding" code="try {throw 0; } catch { doSomethingWhichDoesNotCareAboutTheValueThrown();}" url="https://babeljs.io/docs/en/babel-plugin-proposal-optional-catch-binding" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2020 (ES11)</td></tr>
-  <TableRow name="Dynamic Imports" code="const package = await import('package'); package.function()" url="https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import" />
-  <TableRow name="Nullish Coalescing Operator" code="const foo = object.foo ?? 'default';" url="https://babeljs.io/docs/en/babel-plugin-proposal-nullish-coalescing-operator" />
-  <TableRow name="Optional Chaining" code="const name = obj.user?.name;" url="https://github.com/tc39/proposal-optional-chaining" />
-  <tr><td className="table-heading" colSpan="2">ECMAScript 2022 (ES13)</td></tr>
-  <TableRow name="Class Fields" code="class Bork {static a = 'foo'; static b; x = 'bar'; y;}" url="https://babeljs.io/docs/en/babel-plugin-proposal-class-properties" />
-  <tr><td className="table-heading" colSpan="2">Stage 1 Proposal</td></tr>
-  <TableRow name="Export Default From" code="export v from 'mod';" url="https://babeljs.io/docs/en/babel-plugin-proposal-export-default-from" />
-  <tr><td className="table-heading" colSpan="2">Miscellaneous</td></tr>
-  <TableRow name="Babel Template" code="template(`const %%importName%% = require(%%source%%);`);" url="https://babeljs.io/docs/en/babel-template" />
-  <TableRow name="Flow" code="function foo(x: ?number): string {};" url="https://flowtype.org/" />
-  <TableRow name="ESM to CJS" code="export default 42;" url="https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs" />
-  <TableRow name="JSX" code="<View style={{color: 'red'}} />" url="https://react.dev/learn/writing-markup-with-jsx" />
-  <TableRow name="Object Assign" code="Object.assign(a, b);" url="https://babeljs.io/docs/en/babel-plugin-transform-object-assign" />
-  <TableRow name="React Display Name" code="const bar = createReactClass({});" url="https://babeljs.io/docs/en/babel-plugin-transform-react-display-name" />
-  <TableRow name="TypeScript" code="function foo(x: {hello: true, target: 'react native!'}): string {};" url="https://www.typescriptlang.org/" />
-</tbody>
-</table>
-
-## Polyfills
-
-Many standard functions are also available on all the supported JavaScript runtimes.
-
-#### Browser
-
-- [CommonJS `require`](https://nodejs.org/docs/latest/api/modules.html)
-- `md [console.{log, warn, error, info, debug, trace, table, group, groupCollapsed, groupEnd}](https://developer.chrome.com/devtools/docs/console-api)`
-- [`XMLHttpRequest`, `fetch`](network.md#content)
-- [`{set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame`](timers.md#content)
-
-#### ECMAScript 2015 (ES6)
-
-- [`Array.from`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from)
-- `md Array.prototype.{[find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find), [findIndex](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)}`
-- [`Object.assign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
-- `md String.prototype.{[startsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith), [endsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith), [repeat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat), [includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes)}`
-
-#### ECMAScript 2016 (ES7)
-
-- `md Array.prototype.[includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)`
-
-#### ECMAScript 2017 (ES8)
-
-- `md Object.{[entries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries), [values](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values)}`
-
-#### Specific
-
-- `__DEV__`
+---
+id: javascript-environment
+title: JavaScript Environment
+---
+
+import TableRow from '@site/core/TableRowWithCodeBlock';
+
+## JavaScript Runtime
+
+When using React Native, you're going to be running your JavaScript code in up to three environments:
+
+- In most cases, React Native will use [Hermes](hermes), an open-source JavaScript engine optimized for React Native.
+- If Hermes is disabled, React Native will use [JavaScriptCore](https://trac.webkit.org/wiki/JavaScriptCore), the JavaScript engine that powers Safari. Note that on iOS, JavaScriptCore does not use JIT due to the absence of writable executable memory in iOS apps.
+- When using Chrome debugging, all JavaScript code runs within Chrome itself, communicating with native code via WebSockets. Chrome uses [V8](https://v8.dev/) as its JavaScript engine.
+
+While these environments are very similar, you may end up hitting some inconsistencies. It is best to avoid relying on specifics of any runtime.
+
+## JavaScript Syntax Transformers
+
+Syntax transformers make writing code more enjoyable by allowing you to use new JavaScript syntax without having to wait for support on all interpreters.
+
+React Native ships with the [Babel JavaScript compiler](https://babeljs.io). Check [Babel documentation](https://babeljs.io/docs/plugins/#transform-plugins) on its supported transformations for more details.
+
+A full list of React Native's enabled transformations can be found in [@react-native/babel-preset](https://github.com/facebook/react-native/tree/main/packages/react-native-babel-preset).
+
+<table>
+<thead>
+  <tr><th>Transformation</th><th>Code</th></tr>
+</thead>
+<tbody>
+  <tr><td className="table-heading" colSpan="2">ECMAScript 5</td></tr>
+  <TableRow name="Reserved Words" code="promise.catch(function() {...});" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2015 (ES6)</td></tr>
+  <TableRow name="Arrow functions" code="<C onPress={() => this.setState({pressed: true})} />" url="https://babeljs.io/docs/learn-es2015/#arrows" />
+  <TableRow name="Block scoping" code="let greeting = 'hi';" url="https://babeljs.io/docs/learn-es2015/#let-const" />
+  <TableRow name="Call spread" code="Math.max(...array);" url="https://babeljs.io/docs/learn-es2015/#default-rest-spread" />
+  <TableRow name="Classes" code="class C extends React.Component {render() { return <View />; }}" url="https://babeljs.io/docs/learn-es2015/#classes" />
+  <TableRow name="Computed Properties" code="const key = 'abc'; const obj = {[key]: 10};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
+  <TableRow name="Constants" code="const answer = 42;" url="https://babeljs.io/docs/learn-es2015/#let-const" />
+  <TableRow name="Destructuring" code="const {isActive, style} = this.props;" url="https://babeljs.io/docs/learn-es2015/#destructuring" />
+  <TableRow name="for…of" code="for (var num of [1, 2, 3]) {...};" url="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of" />
+  <TableRow name="Function Name" code="let number = x => x;" url="https://babeljs.io/docs/en/babel-plugin-transform-function-name" />
+  <TableRow name="Literals" code="const b = 0b11; const o = 0o7; const u = 'Hello\u{000A}\u{0009}!';" url="https://babeljs.io/docs/en/babel-plugin-transform-literals" />
+  <TableRow name="Modules" code="import {Component} from 'react';" url="https://babeljs.io/docs/learn-es2015/#modules" />
+  <TableRow name="Object Concise Method" code="const obj = {method() { return 10; }};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
+  <TableRow name="Object Short Notation" code="const name = 'vjeux'; const obj = {name};" url="https://babeljs.io/docs/learn-es2015/#enhanced-object-literals" />
+  <TableRow name="Parameters" code="function test(x = 'hello', {a, b}, ...args) {}" url="https://babeljs.io/docs/en/babel-plugin-transform-parameters" />
+  <TableRow name="Rest Params" code="function(type, ...args) {};" url="https://github.com/sebmarkbage/ecmascript-rest-spread" />
+  <TableRow name="Shorthand Properties" code="const o = {a, b, c};" url="https://babeljs.io/docs/en/babel-plugin-transform-shorthand-properties" />
+  <TableRow name="Sticky Regex" code="const a = /o+/y;" url="https://babeljs.io/docs/en/babel-plugin-transform-sticky-regex" />
+  <TableRow name="Template Literals" code="const who = 'world'; const str = `Hello ${who}`;" url="https://babeljs.io/docs/learn-es2015/#template-strings" />
+  <TableRow name="Unicode Regex" code="const string = 'foo💩bar'; const match = string.match(/foo(.)bar/u);" url="https://babeljs.io/docs/en/babel-plugin-transform-unicode-regex" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2016 (ES7)</td></tr>
+  <TableRow name="Exponentiation Operator" code="let x = 10 ** 2;" url="https://babeljs.io/docs/en/babel-plugin-transform-exponentiation-operator" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2017 (ES8)</td></tr>
+  <TableRow name="Async Functions" code="async function doStuffAsync() {const foo = await doOtherStuffAsync();};" url="https://github.com/tc39/ecmascript-asyncawait" />
+  <TableRow name="Function Trailing Comma" code="function f(a, b, c,) {};" url="https://github.com/jeffmo/es-trailing-function-commas" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2018 (ES9)</td></tr>
+  <TableRow name="Object Spread" code="const extended = {...obj, a: 10};" url="https://github.com/tc39/proposal-object-rest-spread" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2019 (ES10)</td></tr>
+  <TableRow name="Optional Catch Binding" code="try {throw 0; } catch { doSomethingWhichDoesNotCareAboutTheValueThrown();}" url="https://babeljs.io/docs/en/babel-plugin-proposal-optional-catch-binding" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2020 (ES11)</td></tr>
+  <TableRow name="Dynamic Imports" code="const package = await import('package'); package.function()" url="https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import" />
+  <TableRow name="Nullish Coalescing Operator" code="const foo = object.foo ?? 'default';" url="https://babeljs.io/docs/en/babel-plugin-proposal-nullish-coalescing-operator" />
+  <TableRow name="Optional Chaining" code="const name = obj.user?.name;" url="https://github.com/tc39/proposal-optional-chaining" />
+  <tr><td className="table-heading" colSpan="2">ECMAScript 2022 (ES13)</td></tr>
+  <TableRow name="Class Fields" code="class Bork {static a = 'foo'; static b; x = 'bar'; y;}" url="https://babeljs.io/docs/en/babel-plugin-proposal-class-properties" />
+  <tr><td className="table-heading" colSpan="2">Stage 1 Proposal</td></tr>
+  <TableRow name="Export Default From" code="export v from 'mod';" url="https://babeljs.io/docs/en/babel-plugin-proposal-export-default-from" />
+  <tr><td className="table-heading" colSpan="2">Miscellaneous</td></tr>
+  <TableRow name="Babel Template" code="template(`const %%importName%% = require(%%source%%);`);" url="https://babeljs.io/docs/en/babel-template" />
+  <TableRow name="Flow" code="function foo(x: ?number): string {};" url="https://flowtype.org/" />
+  <TableRow name="ESM to CJS" code="export default 42;" url="https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs" />
+  <TableRow name="JSX" code="<View style={{color: 'red'}} />" url="https://react.dev/learn/writing-markup-with-jsx" />
+  <TableRow name="Object Assign" code="Object.assign(a, b);" url="https://babeljs.io/docs/en/babel-plugin-transform-object-assign" />
+  <TableRow name="React Display Name" code="const bar = createReactClass({});" url="https://babeljs.io/docs/en/babel-plugin-transform-react-display-name" />
+  <TableRow name="TypeScript" code="function foo(x: {hello: true, target: 'react native!'}): string {};" url="https://www.typescriptlang.org/" />
+</tbody>
+</table>
+
+## Polyfills
+
+Many standard functions are also available on all the supported JavaScript runtimes.
+
+#### Browser
+
+- [CommonJS `require`](https://nodejs.org/docs/latest/api/modules.html)
+- `md [console.{log, warn, error, info, debug, trace, table, group, groupCollapsed, groupEnd}](https://developer.chrome.com/devtools/docs/console-api)`
+- [`XMLHttpRequest`, `fetch`](network.md#content)
+- [`{set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame`](timers.md#content)
+
+#### ECMAScript 2015 (ES6)
+
+- [`Array.from`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from)
+- `md Array.prototype.{[find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find), [findIndex](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)}`
+- [`Object.assign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
+- `md String.prototype.{[startsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith), [endsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith), [repeat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat), [includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes)}`
+
+#### ECMAScript 2016 (ES7)
+
+- `md Array.prototype.[includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)`
+
+#### ECMAScript 2017 (ES8)
+
+- `md Object.{[entries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries), [values](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values)}`
+
+#### Specific
+
+- `__DEV__`
diff --git a/website/versioned_docs/version-0.86/keyboard.md b/website/versioned_docs/version-0.86/keyboard.md
index 8560ce4999d..de1ec7b870b 100644
--- a/website/versioned_docs/version-0.86/keyboard.md
+++ b/website/versioned_docs/version-0.86/keyboard.md
@@ -1,146 +1,146 @@
----
-id: keyboard
-title: Keyboard
----
-
-`Keyboard` module to control keyboard events.
-
-### Usage
-
-The Keyboard module allows you to listen for native events and react to them, as well as make changes to the keyboard, like dismissing it.
-
-```SnackPlayer name=Keyboard%20Example&supportedPlatforms=ios,android
-import React, {useState, useEffect} from 'react';
-import {Keyboard, Text, TextInput, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const Example = () => {
-  const [keyboardStatus, setKeyboardStatus] = useState('Keyboard Hidden');
-
-  useEffect(() => {
-    const showSubscription = Keyboard.addListener('keyboardDidShow', () => {
-      setKeyboardStatus('Keyboard Shown');
-    });
-    const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
-      setKeyboardStatus('Keyboard Hidden');
-    });
-
-    return () => {
-      showSubscription.remove();
-      hideSubscription.remove();
-    };
-  }, []);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={style.container}>
-        <TextInput
-          style={style.input}
-          placeholder="Click here…"
-          onSubmitEditing={Keyboard.dismiss}
-        />
-        <Text style={style.status}>{keyboardStatus}</Text>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const style = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 36,
-  },
-  input: {
-    padding: 10,
-    borderWidth: 0.5,
-    borderRadius: 4,
-  },
-  status: {
-    padding: 16,
-    textAlign: 'center',
-  },
-});
-
-export default Example;
-```
-
----
-
-# Reference
-
-## Methods
-
-### `addListener()`
-
-```tsx
-static addListener: (
-  eventType: KeyboardEventName,
-  listener: KeyboardEventListener,
-) => EmitterSubscription;
-```
-
-The `addListener` function connects a JavaScript function to an identified native keyboard notification event.
-
-This function then returns the reference to the listener.
-
-**Parameters:**
-
-| Name                                                                     | Type     | Description                                                                    |
-| ------------------------------------------------------------------------ | -------- | ------------------------------------------------------------------------------ |
-| eventName <div className="label basic two-lines required">Required</div> | string   | The string that identifies the event you're listening for. See the list below. |
-| callback <div className="label basic two-lines required">Required</div>  | function | The function to be called when the event fires                                 |
-
-**`eventName`**
-
-This can be any of the following:
-
-- `keyboardWillShow`
-- `keyboardDidShow`
-- `keyboardWillHide`
-- `keyboardDidHide`
-- `keyboardWillChangeFrame`
-- `keyboardDidChangeFrame`
-
-:::note
-Only `keyboardDidShow` and `keyboardDidHide` events are available on Android. The events will not be fired when using Android 10 or below if your activity has `android:windowSoftInputMode` set to `adjustResize` or `adjustNothing`.
-:::
-
----
-
-### `dismiss()`
-
-```tsx
-static dismiss();
-```
-
-Dismisses the active keyboard and removes focus.
-
----
-
-### `scheduleLayoutAnimation`
-
-```tsx
-static scheduleLayoutAnimation(event: KeyboardEvent);
-```
-
-Useful for syncing TextInput (or other keyboard accessory view) size of position changes with keyboard movements.
-
----
-
-### `isVisible()`
-
-```tsx
-static isVisible(): boolean;
-```
-
-Whether the keyboard is last known to be visible.
-
----
-
-### `metrics()`
-
-```tsx
-static metrics(): KeyboardMetrics | undefined;
-```
-
-Return the metrics of the soft-keyboard if visible.
+---
+id: keyboard
+title: Keyboard
+---
+
+`Keyboard` module to control keyboard events.
+
+### Usage
+
+The Keyboard module allows you to listen for native events and react to them, as well as make changes to the keyboard, like dismissing it.
+
+```SnackPlayer name=Keyboard%20Example&supportedPlatforms=ios,android
+import {useState, useEffect} from 'react';
+import {Keyboard, Text, TextInput, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const Example = () => {
+  const [keyboardStatus, setKeyboardStatus] = useState('Keyboard Hidden');
+
+  useEffect(() => {
+    const showSubscription = Keyboard.addListener('keyboardDidShow', () => {
+      setKeyboardStatus('Keyboard Shown');
+    });
+    const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
+      setKeyboardStatus('Keyboard Hidden');
+    });
+
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={style.container}>
+        <TextInput
+          style={style.input}
+          placeholder="Click here…"
+          onSubmitEditing={Keyboard.dismiss}
+        />
+        <Text style={style.status}>{keyboardStatus}</Text>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const style = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 36,
+  },
+  input: {
+    padding: 10,
+    borderWidth: 0.5,
+    borderRadius: 4,
+  },
+  status: {
+    padding: 16,
+    textAlign: 'center',
+  },
+});
+
+export default Example;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `addListener()`
+
+```tsx
+static addListener: (
+  eventType: KeyboardEventName,
+  listener: KeyboardEventListener,
+) => EmitterSubscription;
+```
+
+The `addListener` function connects a JavaScript function to an identified native keyboard notification event.
+
+This function then returns the reference to the listener.
+
+**Parameters:**
+
+| Name                                                                     | Type     | Description                                                                    |
+| ------------------------------------------------------------------------ | -------- | ------------------------------------------------------------------------------ |
+| eventName <div className="label basic two-lines required">Required</div> | string   | The string that identifies the event you're listening for. See the list below. |
+| callback <div className="label basic two-lines required">Required</div>  | function | The function to be called when the event fires                                 |
+
+**`eventName`**
+
+This can be any of the following:
+
+- `keyboardWillShow`
+- `keyboardDidShow`
+- `keyboardWillHide`
+- `keyboardDidHide`
+- `keyboardWillChangeFrame`
+- `keyboardDidChangeFrame`
+
+:::note
+Only `keyboardDidShow` and `keyboardDidHide` events are available on Android. The events will not be fired when using Android 10 or below if your activity has `android:windowSoftInputMode` set to `adjustResize` or `adjustNothing`.
+:::
+
+---
+
+### `dismiss()`
+
+```tsx
+static dismiss();
+```
+
+Dismisses the active keyboard and removes focus.
+
+---
+
+### `scheduleLayoutAnimation`
+
+```tsx
+static scheduleLayoutAnimation(event: KeyboardEvent);
+```
+
+Useful for syncing TextInput (or other keyboard accessory view) size of position changes with keyboard movements.
+
+---
+
+### `isVisible()`
+
+```tsx
+static isVisible(): boolean;
+```
+
+Whether the keyboard is last known to be visible.
+
+---
+
+### `metrics()`
+
+```tsx
+static metrics(): KeyboardMetrics | undefined;
+```
+
+Return the metrics of the soft-keyboard if visible.
diff --git a/website/versioned_docs/version-0.86/keyboardavoidingview.md b/website/versioned_docs/version-0.86/keyboardavoidingview.md
index 55cce32cf54..cc650dd0f57 100644
--- a/website/versioned_docs/version-0.86/keyboardavoidingview.md
+++ b/website/versioned_docs/version-0.86/keyboardavoidingview.md
@@ -8,7 +8,6 @@ This component will automatically adjust its height, position, or bottom padding
 ## Example
 
 ```SnackPlayer name=KeyboardAvoidingView&supportedPlatforms=android,ios
-import React from 'react';
 import {
   View,
   KeyboardAvoidingView,
diff --git a/website/versioned_docs/version-0.86/layout-props.md b/website/versioned_docs/version-0.86/layout-props.md
index b3673e0c849..0d10649d7d6 100644
--- a/website/versioned_docs/version-0.86/layout-props.md
+++ b/website/versioned_docs/version-0.86/layout-props.md
@@ -1,1360 +1,1360 @@
----
-id: layout-props
-title: Layout Props
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-:::info
-More detailed examples about those properties can be found on the [Layout with Flexbox](flexbox) page.
-:::
-
-### Example
-
-The following example shows how different properties can affect or shape a React Native layout. You can try for example to add or remove squares from the UI while changing the values of the property `flexWrap`.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=LayoutProps%20Example&ext=js
-import React, {useState} from 'react';
-import {Button, ScrollView, StyleSheet, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [flexDirection, setFlexDirection] = useState(0);
-  const [justifyContent, setJustifyContent] = useState(0);
-  const [alignItems, setAlignItems] = useState(0);
-  const [direction, setDirection] = useState(0);
-  const [wrap, setWrap] = useState(0);
-
-  const [squares, setSquares] = useState([<Square />, <Square />, <Square />]);
-
-  const hookedStyles = {
-    flexDirection: flexDirections[flexDirection],
-    justifyContent: justifyContents[justifyContent],
-    alignItems: alignItemsArr[alignItems],
-    direction: directions[direction],
-    flexWrap: wraps[wrap],
-  };
-
-  const changeSetting = (value, options, setterFunction) => {
-    if (value === options.length - 1) {
-      setterFunction(0);
-      return;
-    }
-    setterFunction(value + 1);
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={[styles.container, styles.playingSpace, hookedStyles]}>
-          {squares.map(elem => elem)}
-        </View>
-        <ScrollView style={styles.layoutContainer}>
-          <View style={styles.controlSpace}>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Flex Direction"
-                onPress={() =>
-                  changeSetting(flexDirection, flexDirections, setFlexDirection)
-                }
-              />
-              <Text style={styles.text}>{flexDirections[flexDirection]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Justify Content"
-                onPress={() =>
-                  changeSetting(
-                    justifyContent,
-                    justifyContents,
-                    setJustifyContent,
-                  )
-                }
-              />
-              <Text style={styles.text}>{justifyContents[justifyContent]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Align Items"
-                onPress={() =>
-                  changeSetting(alignItems, alignItemsArr, setAlignItems)
-                }
-              />
-              <Text style={styles.text}>{alignItemsArr[alignItems]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Direction"
-                onPress={() =>
-                  changeSetting(direction, directions, setDirection)
-                }
-              />
-              <Text style={styles.text}>{directions[direction]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Flex Wrap"
-                onPress={() => changeSetting(wrap, wraps, setWrap)}
-              />
-              <Text style={styles.text}>{wraps[wrap]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Add Square"
-                onPress={() => setSquares([...squares, <Square />])}
-              />
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Delete Square"
-                onPress={() =>
-                  setSquares(squares.filter((v, i) => i !== squares.length - 1))
-                }
-              />
-            </View>
-          </View>
-        </ScrollView>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const flexDirections = ['row', 'row-reverse', 'column', 'column-reverse'];
-const justifyContents = [
-  'flex-start',
-  'flex-end',
-  'center',
-  'space-between',
-  'space-around',
-  'space-evenly',
-];
-const alignItemsArr = [
-  'flex-start',
-  'flex-end',
-  'center',
-  'stretch',
-  'baseline',
-];
-const wraps = ['nowrap', 'wrap', 'wrap-reverse'];
-const directions = ['inherit', 'ltr', 'rtl'];
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  layoutContainer: {
-    flex: 0.5,
-  },
-  playingSpace: {
-    backgroundColor: 'white',
-    borderColor: 'blue',
-    borderWidth: 3,
-    overflow: 'hidden',
-  },
-  controlSpace: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  buttonView: {
-    width: '50%',
-    padding: 10,
-  },
-  text: {
-    textAlign: 'center',
-  },
-});
-
-const Square = () => (
-  <View
-    style={{
-      width: 50,
-      height: 50,
-      backgroundColor: randomHexColor(),
-    }}
-  />
-);
-
-const randomHexColor = () => {
-  return '#000000'.replace(/0/g, () => {
-    return Math.round(Math.random() * 14).toString(16);
-  });
-};
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=LayoutProps%20Example&ext=tsx
-import React, {useState} from 'react';
-import {
-  Button,
-  ScrollView,
-  StyleSheet,
-  Text,
-  View,
-  FlexAlignType,
-  FlexStyle,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [flexDirection, setFlexDirection] = useState(0);
-  const [justifyContent, setJustifyContent] = useState(0);
-  const [alignItems, setAlignItems] = useState(0);
-  const [direction, setDirection] = useState(0);
-  const [wrap, setWrap] = useState(0);
-
-  const [squares, setSquares] = useState([<Square />, <Square />, <Square />]);
-
-  const hookedStyles = {
-    flexDirection: flexDirections[flexDirection],
-    justifyContent: justifyContents[justifyContent],
-    alignItems: alignItemsArr[alignItems],
-    direction: directions[direction],
-    flexWrap: wraps[wrap],
-  } as FlexStyle;
-
-  const changeSetting = (
-    value: number,
-    options: any[],
-    setterFunction: (index: number) => void,
-  ) => {
-    if (value === options.length - 1) {
-      setterFunction(0);
-      return;
-    }
-    setterFunction(value + 1);
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={[styles.container, styles.playingSpace, hookedStyles]}>
-          {squares.map(elem => elem)}
-        </View>
-        <ScrollView style={styles.layoutContainer}>
-          <View style={styles.controlSpace}>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Flex Direction"
-                onPress={() =>
-                  changeSetting(flexDirection, flexDirections, setFlexDirection)
-                }
-              />
-              <Text style={styles.text}>{flexDirections[flexDirection]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Justify Content"
-                onPress={() =>
-                  changeSetting(
-                    justifyContent,
-                    justifyContents,
-                    setJustifyContent,
-                  )
-                }
-              />
-              <Text style={styles.text}>{justifyContents[justifyContent]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Align Items"
-                onPress={() =>
-                  changeSetting(alignItems, alignItemsArr, setAlignItems)
-                }
-              />
-              <Text style={styles.text}>{alignItemsArr[alignItems]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Direction"
-                onPress={() =>
-                  changeSetting(direction, directions, setDirection)
-                }
-              />
-              <Text style={styles.text}>{directions[direction]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Change Flex Wrap"
-                onPress={() => changeSetting(wrap, wraps, setWrap)}
-              />
-              <Text style={styles.text}>{wraps[wrap]}</Text>
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Add Square"
-                onPress={() => setSquares([...squares, <Square />])}
-              />
-            </View>
-            <View style={styles.buttonView}>
-              <Button
-                title="Delete Square"
-                onPress={() =>
-                  setSquares(squares.filter((v, i) => i !== squares.length - 1))
-                }
-              />
-            </View>
-          </View>
-        </ScrollView>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const flexDirections = [
-  'row',
-  'row-reverse',
-  'column',
-  'column-reverse',
-] as FlexStyle['flexDirection'][];
-const justifyContents = [
-  'flex-start',
-  'flex-end',
-  'center',
-  'space-between',
-  'space-around',
-  'space-evenly',
-] as FlexStyle['justifyContent'][];
-const alignItemsArr = [
-  'flex-start',
-  'flex-end',
-  'center',
-  'stretch',
-  'baseline',
-] as FlexAlignType[];
-const wraps = ['nowrap', 'wrap', 'wrap-reverse'];
-const directions = ['inherit', 'ltr', 'rtl'];
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  layoutContainer: {
-    flex: 0.5,
-  },
-  playingSpace: {
-    backgroundColor: 'white',
-    borderColor: 'blue',
-    borderWidth: 3,
-    overflow: 'hidden',
-  },
-  controlSpace: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  buttonView: {
-    width: '50%',
-    padding: 10,
-  },
-  text: {
-    textAlign: 'center',
-  },
-});
-
-const Square = () => (
-  <View
-    style={{
-      width: 50,
-      height: 50,
-      backgroundColor: randomHexColor(),
-    }}
-  />
-);
-
-const randomHexColor = () => {
-  return '#000000'.replace(/0/g, () => {
-    return Math.round(Math.random() * 14).toString(16);
-  });
-};
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
----
-
-# Reference
-
-## Props
-
-### `alignContent`
-
-`alignContent` controls how rows align in the cross direction, overriding the `alignContent` of the parent.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) for more details.
-
-| Type                                                                                                 | Required |
-| ---------------------------------------------------------------------------------------------------- | -------- |
-| enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around', 'space-evenly') | No       |
-
----
-
-### `alignItems`
-
-`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS (default: stretch).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) for more details.
-
-| Type                                                            | Required |
-| --------------------------------------------------------------- | -------- |
-| enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline') | No       |
-
----
-
-### `alignSelf`
-
-`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS (default: auto).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) for more details.
-
-| Type                                                                    | Required |
-| ----------------------------------------------------------------------- | -------- |
-| enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline') | No       |
-
----
-
-### `aspectRatio`
-
-Aspect ratio controls the size of the undefined dimension of a node.
-
-- On a node with a set width/height, aspect ratio controls the size of the unset dimension
-- On a node with a set flex basis, aspect ratio controls the size of the node in the cross axis if unset
-- On a node with a measure function, aspect ratio works as though the measure function measures the flex basis
-- On a node with flex grow/shrink, aspect ratio controls the size of the node in the cross axis if unset
-- Aspect ratio takes min/max dimensions into account
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `borderBottomWidth`
-
-`borderBottomWidth` works like `border-bottom-width` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderEndWidth`
-
-When direction is `ltr`, `borderEndWidth` is equivalent to `borderRightWidth`. When direction is `rtl`, `borderEndWidth` is equivalent to `borderLeftWidth`.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderLeftWidth`
-
-`borderLeftWidth` works like `border-left-width` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderRightWidth`
-
-`borderRightWidth` works like `border-right-width` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderStartWidth`
-
-When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. When direction is `rtl`, `borderStartWidth` is equivalent to `borderRightWidth`.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderTopWidth`
-
-`borderTopWidth` works like `border-top-width` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `borderWidth`
-
-`borderWidth` works like `border-width` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `bottom`
-
-`bottom` is the number of logical pixels to offset the bottom edge of this component.
-
-It works similarly to `bottom` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) for more details of how `bottom` affects layout.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `boxSizing`
-
-`boxSizing` defines how the element's various sizing props (`width`, `height`, `minWidth`, `minHeight`, etc.) are computed. If `boxSizing` is `border-box`, these sizes apply to the border box of the element. If it is `content-box`, they apply to the content box of the element. The default value is `border-box`. The [web documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) is a good source of information if you wish to learn more about how this prop works.
-
-| Type                              | Required |
-| --------------------------------- | -------- |
-| enum('border-box', 'content-box') | No       |
-
----
-
-### `columnGap`
-
-`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `direction`
-
-`direction` specifies the directional flow of the user interface. The default is `inherit`, except for root node which will have value based on the current locale.
-
-See [MDN CSS Reference](https://www.yogalayout.dev/docs/styling/layout-direction) for more details.
-
-| Type                          | Required |
-| ----------------------------- | -------- |
-| enum('inherit', 'ltr', 'rtl') | No       |
-
----
-
-### `display`
-
-`display` sets the display type of this component.
-
-It works similarly to `display` in CSS but only supports the values 'flex', 'none', and 'contents'. The default is `flex`.
-
-| Type                             | Required |
-| -------------------------------- | -------- |
-| enum('none', 'flex', 'contents') | No       |
-
----
-
-### `end`
-
-When the direction is `ltr`, `end` is equivalent to `right`. When the direction is `rtl`, `end` is equivalent to `left`.
-
-This style takes precedence over the `left` and `right` styles.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `flex`
-
-In React Native `flex` does not work the same way that it does in CSS. `flex` is a number rather than a string, and it works according to the [Yoga](https://github.com/facebook/yoga) layout engine.
-
-When `flex` is a positive number, it makes the component flexible, and it will be sized proportional to its flex value. So a component with `flex` set to `2` will take twice the space as a component with `flex` set to 1. `flex: <positive number>` equates to `flexGrow: <positive number>, flexShrink: 1, flexBasis: 0`.
-
-When `flex` is `0`, the component is sized according to `width` and `height`, and it is inflexible.
-
-When `flex` is `-1`, the component is normally sized according to `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`.
-
-`flexGrow`, `flexShrink`, and `flexBasis` work the same as in CSS.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `flexBasis`
-
-`flexBasis` is an axis-independent way of providing the default size of an item along the main axis. Setting the `flexBasis` of a child is similar to setting the `width` of that child if its parent is a container with `flexDirection: row` or setting the `height` of a child if its parent is a container with `flexDirection: column`. The `flexBasis` of an item is the default size of that item, the size of the item before any `flexGrow` and `flexShrink` calculations are performed.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `flexDirection`
-
-`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) for more details.
-
-| Type                                                   | Required |
-| ------------------------------------------------------ | -------- |
-| enum('row', 'row-reverse', 'column', 'column-reverse') | No       |
-
----
-
-### `flexGrow`
-
-`flexGrow` describes how any space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
-
-`flexGrow` accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the children’s `flexGrow` values.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `flexShrink`
-
-[`flexShrink`](layout-props#flexshrink) describes how to shrink children along the main axis in the case in which the total size of the children overflows the size of the container on the main axis. `flexShrink` is very similar to `flexGrow` and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed.
-
-`flexShrink` accepts any floating point value >= 0, with 0 being the default value. A container will shrink its children weighted by the children’s `flexShrink` values.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `flexWrap`
-
-`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS (default: nowrap).
-
-Note it does not work anymore with `alignItems: stretch` (the default), so you may want to use `alignItems: flex-start` for example (breaking change details: https://github.com/facebook/react-native/releases/tag/v0.28.0).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) for more details.
-
-| Type                                   | Required |
-| -------------------------------------- | -------- |
-| enum('wrap', 'nowrap', 'wrap-reverse') | No       |
-
----
-
-### `gap`
-
-`gap` works like `gap` in CSS. Only pixel units are supported in React Native.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `height`
-
-`height` sets the height of this component.
-
-It works similarly to `height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/height) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `inset`
-
-:::note
-`inset` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Setting `inset` has the same effect as setting each of `top`, `bottom`, `right` and `left` props.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/inset) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetBlock`
-
-:::note
-`insetBlock` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Equivalent to [`top`](layout-props#top) and [`bottom`](layout-props#bottom).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetBlockEnd`
-
-:::note
-`insetBlockEnd` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Equivalent to [`bottom`](layout-props#bottom).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetBlockStart`
-
-:::note
-`insetBlockStart` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Equivalent to [`top`](layout-props#top).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetInline`
-
-:::note
-`insetInline` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Equivalent to [`right`](layout-props#right) and [`left`](layout-props#left).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetInlineEnd`
-
-:::note
-`insetInlineEnd` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-When direction is `ltr`, `insetInlineEnd` is equivalent to [`right`](layout-props#right). When direction is `rtl`, `insetInlineEnd` is equivalent to [`left`](layout-props#left).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `insetInlineStart`
-
-:::note
-`insetInlineStart` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-When direction is `ltr`, `insetInlineStart` is equivalent to [`left`](layout-props#left). When direction is `rtl`, `insetInlineStart` is equivalent to [`right`](layout-props#right).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `isolation`
-
-:::note
-`isolation` is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-`isolation` lets you form a [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context).
-
-There are two values:
-
-- `auto` (default): Does nothing.
-- `isolate`: Forms a stacking context.
-
-| Type                    | Required |
-| ----------------------- | -------- |
-| enum('auto', 'isolate') | No       |
-
----
-
-### `justifyContent`
-
-`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS (default: flex-start).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) for more details.
-
-| Type                                                                                      | Required |
-| ----------------------------------------------------------------------------------------- | -------- |
-| enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly') | No       |
-
----
-
-### `left`
-
-`left` is the number of logical pixels to offset the left edge of this component.
-
-It works similarly to `left` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/left) for more details of how `left` affects layout.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `margin`
-
-Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginBottom`
-
-`marginBottom` works like `margin-bottom` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginBlock`
-
-Equivalent to [`marginVertical`](layout-props#marginvertical).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginBlockEnd`
-
-Equivalent to [`marginBottom`](layout-props#marginbottom).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginBlockStart`
-
-Equivalent to [`marginTop`](layout-props#margintop).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginEnd`
-
-When direction is `ltr`, `marginEnd` is equivalent to `marginRight`. When direction is `rtl`, `marginEnd` is equivalent to `marginLeft`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginHorizontal`
-
-Setting `marginHorizontal` has the same effect as setting both `marginLeft` and `marginRight`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginInline`
-
-Equivalent to [`marginHorizontal`](layout-props#marginhorizontal).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginInlineEnd`
-
-When direction is `ltr`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginRight`). When direction is `rtl`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginLeft`).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginInlineStart`
-
-When direction is `ltr`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginLeft`). When direction is `rtl`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginRight`).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginLeft`
-
-`marginLeft` works like `margin-left` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginRight`
-
-`marginRight` works like `margin-right` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginStart`
-
-When direction is `ltr`, `marginStart` is equivalent to `marginLeft`. When direction is `rtl`, `marginStart` is equivalent to `marginRight`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginTop`
-
-`marginTop` works like `margin-top` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `marginVertical`
-
-Setting `marginVertical` has the same effect as setting both `marginTop` and `marginBottom`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `maxHeight`
-
-`maxHeight` is the maximum height for this component, in logical pixels.
-
-It works similarly to `max-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `maxWidth`
-
-`maxWidth` is the maximum width for this component, in logical pixels.
-
-It works similarly to `max-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `minHeight`
-
-`minHeight` is the minimum height for this component, in logical pixels.
-
-It works similarly to `min-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `minWidth`
-
-`minWidth` is the minimum width for this component, in logical pixels.
-
-It works similarly to `min-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `overflow`
-
-`overflow` controls how children are measured and displayed. `overflow: hidden` causes views to be clipped while `overflow: scroll` causes views to be measured independently of their parents' main axis. It works like `overflow` in CSS (default: visible).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) for more details.
-
-| Type                                | Required |
-| ----------------------------------- | -------- |
-| enum('visible', 'hidden', 'scroll') | No       |
-
----
-
-### `padding`
-
-Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingBottom`
-
-`paddingBottom` works like `padding-bottom` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingBlock`
-
-Equivalent to [`paddingVertical`](layout-props#paddingvertical).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingBlockEnd`
-
-Equivalent to [`paddingBottom`](layout-props#paddingbottom).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingBlockStart`
-
-Equivalent to [`paddingTop`](layout-props#paddingtop).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingEnd`
-
-When direction is `ltr`, `paddingEnd` is equivalent to `paddingRight`. When direction is `rtl`, `paddingEnd` is equivalent to `paddingLeft`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingHorizontal`
-
-Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRight`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingInline`
-
-Equivalent to [`paddingHorizontal`](layout-props#paddinghorizontal).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingInlineEnd`
-
-When direction is `ltr`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingRight`). When direction is `rtl`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingLeft`).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-end) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingInlineStart`
-
-When direction is `ltr`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingLeft`). When direction is `rtl`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingRight`).
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-start) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingLeft`
-
-`paddingLeft` works like `padding-left` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingRight`
-
-`paddingRight` works like `padding-right` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingStart`
-
-When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`. When direction is `rtl`, `paddingStart` is equivalent to `paddingRight`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingTop`
-
-`paddingTop` works like `padding-top` in CSS.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `paddingVertical`
-
-Setting `paddingVertical` is like setting both of `paddingTop` and `paddingBottom`.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `position`
-
-`position` in React Native is similar to [regular CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/position), but everything is set to `relative` by default.
-
-`relative` will position an element according to the normal flow of the layout. Insets (`top`, `bottom`, `left`, `right`) will offset relative to this layout.
-
-`absolute` takes the element out of the normal flow of the layout. Insets will offset relative to its [containing block](./flexbox.md#the-containing-block).
-
-`static` will position an element according to the normal flow of the layout. Insets will have no effect.
-`static` elements do not form a containing block for absolute descendants.
-
-For more information, see the [Layout with Flexbox docs](./flexbox.md#position). Also, [the Yoga documentation](https://www.yogalayout.dev/docs/styling/position) has more details on how `position` differs between React Native and CSS.
-
-| Type                                   | Required |
-| -------------------------------------- | -------- |
-| enum('absolute', 'relative', 'static') | No       |
-
----
-
-### `right`
-
-`right` is the number of logical pixels to offset the right edge of this component.
-
-It works similarly to `right` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) for more details of how `right` affects layout.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `rowGap`
-
-`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
-
----
-
-### `start`
-
-When the direction is `ltr`, `start` is equivalent to `left`. When the direction is `rtl`, `start` is equivalent to `right`.
-
-This style takes precedence over the `left`, `right`, and `end` styles.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `top`
-
-`top` is the number of logical pixels to offset the top edge of this component.
-
-It works similarly to `top` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/top) for more details of how `top` affects layout.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `width`
-
-`width` sets the width of this component.
-
-It works similarly to `width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/width) for more details.
-
-| Type           | Required |
-| -------------- | -------- |
-| number, string | No       |
-
----
-
-### `zIndex`
-
-`zIndex` controls which components display on top of others. Normally, you don't use `zIndex`. Components render according to their order in the document tree, so later components draw over earlier ones. `zIndex` may be useful if you have animations or custom modal interfaces where you don't want this behavior.
-
-It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball.
-
-On iOS, `zIndex` may require `View`s to be siblings of each other for it to work as expected.
-
-See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) for more details.
-
-| Type   | Required |
-| ------ | -------- |
-| number | No       |
+---
+id: layout-props
+title: Layout Props
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+:::info
+More detailed examples about those properties can be found on the [Layout with Flexbox](flexbox) page.
+:::
+
+### Example
+
+The following example shows how different properties can affect or shape a React Native layout. You can try for example to add or remove squares from the UI while changing the values of the property `flexWrap`.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=LayoutProps%20Example&ext=js
+import {useState} from 'react';
+import {Button, ScrollView, StyleSheet, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [flexDirection, setFlexDirection] = useState(0);
+  const [justifyContent, setJustifyContent] = useState(0);
+  const [alignItems, setAlignItems] = useState(0);
+  const [direction, setDirection] = useState(0);
+  const [wrap, setWrap] = useState(0);
+
+  const [squares, setSquares] = useState([<Square />, <Square />, <Square />]);
+
+  const hookedStyles = {
+    flexDirection: flexDirections[flexDirection],
+    justifyContent: justifyContents[justifyContent],
+    alignItems: alignItemsArr[alignItems],
+    direction: directions[direction],
+    flexWrap: wraps[wrap],
+  };
+
+  const changeSetting = (value, options, setterFunction) => {
+    if (value === options.length - 1) {
+      setterFunction(0);
+      return;
+    }
+    setterFunction(value + 1);
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={[styles.container, styles.playingSpace, hookedStyles]}>
+          {squares.map(elem => elem)}
+        </View>
+        <ScrollView style={styles.layoutContainer}>
+          <View style={styles.controlSpace}>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Flex Direction"
+                onPress={() =>
+                  changeSetting(flexDirection, flexDirections, setFlexDirection)
+                }
+              />
+              <Text style={styles.text}>{flexDirections[flexDirection]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Justify Content"
+                onPress={() =>
+                  changeSetting(
+                    justifyContent,
+                    justifyContents,
+                    setJustifyContent,
+                  )
+                }
+              />
+              <Text style={styles.text}>{justifyContents[justifyContent]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Align Items"
+                onPress={() =>
+                  changeSetting(alignItems, alignItemsArr, setAlignItems)
+                }
+              />
+              <Text style={styles.text}>{alignItemsArr[alignItems]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Direction"
+                onPress={() =>
+                  changeSetting(direction, directions, setDirection)
+                }
+              />
+              <Text style={styles.text}>{directions[direction]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Flex Wrap"
+                onPress={() => changeSetting(wrap, wraps, setWrap)}
+              />
+              <Text style={styles.text}>{wraps[wrap]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Add Square"
+                onPress={() => setSquares([...squares, <Square />])}
+              />
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Delete Square"
+                onPress={() =>
+                  setSquares(squares.filter((v, i) => i !== squares.length - 1))
+                }
+              />
+            </View>
+          </View>
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const flexDirections = ['row', 'row-reverse', 'column', 'column-reverse'];
+const justifyContents = [
+  'flex-start',
+  'flex-end',
+  'center',
+  'space-between',
+  'space-around',
+  'space-evenly',
+];
+const alignItemsArr = [
+  'flex-start',
+  'flex-end',
+  'center',
+  'stretch',
+  'baseline',
+];
+const wraps = ['nowrap', 'wrap', 'wrap-reverse'];
+const directions = ['inherit', 'ltr', 'rtl'];
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  layoutContainer: {
+    flex: 0.5,
+  },
+  playingSpace: {
+    backgroundColor: 'white',
+    borderColor: 'blue',
+    borderWidth: 3,
+    overflow: 'hidden',
+  },
+  controlSpace: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  buttonView: {
+    width: '50%',
+    padding: 10,
+  },
+  text: {
+    textAlign: 'center',
+  },
+});
+
+const Square = () => (
+  <View
+    style={{
+      width: 50,
+      height: 50,
+      backgroundColor: randomHexColor(),
+    }}
+  />
+);
+
+const randomHexColor = () => {
+  return '#000000'.replace(/0/g, () => {
+    return Math.round(Math.random() * 14).toString(16);
+  });
+};
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=LayoutProps%20Example&ext=tsx
+import {useState} from 'react';
+import {
+  Button,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+  FlexAlignType,
+  FlexStyle,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [flexDirection, setFlexDirection] = useState(0);
+  const [justifyContent, setJustifyContent] = useState(0);
+  const [alignItems, setAlignItems] = useState(0);
+  const [direction, setDirection] = useState(0);
+  const [wrap, setWrap] = useState(0);
+
+  const [squares, setSquares] = useState([<Square />, <Square />, <Square />]);
+
+  const hookedStyles = {
+    flexDirection: flexDirections[flexDirection],
+    justifyContent: justifyContents[justifyContent],
+    alignItems: alignItemsArr[alignItems],
+    direction: directions[direction],
+    flexWrap: wraps[wrap],
+  } as FlexStyle;
+
+  const changeSetting = (
+    value: number,
+    options: any[],
+    setterFunction: (index: number) => void,
+  ) => {
+    if (value === options.length - 1) {
+      setterFunction(0);
+      return;
+    }
+    setterFunction(value + 1);
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={[styles.container, styles.playingSpace, hookedStyles]}>
+          {squares.map(elem => elem)}
+        </View>
+        <ScrollView style={styles.layoutContainer}>
+          <View style={styles.controlSpace}>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Flex Direction"
+                onPress={() =>
+                  changeSetting(flexDirection, flexDirections, setFlexDirection)
+                }
+              />
+              <Text style={styles.text}>{flexDirections[flexDirection]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Justify Content"
+                onPress={() =>
+                  changeSetting(
+                    justifyContent,
+                    justifyContents,
+                    setJustifyContent,
+                  )
+                }
+              />
+              <Text style={styles.text}>{justifyContents[justifyContent]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Align Items"
+                onPress={() =>
+                  changeSetting(alignItems, alignItemsArr, setAlignItems)
+                }
+              />
+              <Text style={styles.text}>{alignItemsArr[alignItems]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Direction"
+                onPress={() =>
+                  changeSetting(direction, directions, setDirection)
+                }
+              />
+              <Text style={styles.text}>{directions[direction]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Change Flex Wrap"
+                onPress={() => changeSetting(wrap, wraps, setWrap)}
+              />
+              <Text style={styles.text}>{wraps[wrap]}</Text>
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Add Square"
+                onPress={() => setSquares([...squares, <Square />])}
+              />
+            </View>
+            <View style={styles.buttonView}>
+              <Button
+                title="Delete Square"
+                onPress={() =>
+                  setSquares(squares.filter((v, i) => i !== squares.length - 1))
+                }
+              />
+            </View>
+          </View>
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const flexDirections = [
+  'row',
+  'row-reverse',
+  'column',
+  'column-reverse',
+] as FlexStyle['flexDirection'][];
+const justifyContents = [
+  'flex-start',
+  'flex-end',
+  'center',
+  'space-between',
+  'space-around',
+  'space-evenly',
+] as FlexStyle['justifyContent'][];
+const alignItemsArr = [
+  'flex-start',
+  'flex-end',
+  'center',
+  'stretch',
+  'baseline',
+] as FlexAlignType[];
+const wraps = ['nowrap', 'wrap', 'wrap-reverse'];
+const directions = ['inherit', 'ltr', 'rtl'];
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  layoutContainer: {
+    flex: 0.5,
+  },
+  playingSpace: {
+    backgroundColor: 'white',
+    borderColor: 'blue',
+    borderWidth: 3,
+    overflow: 'hidden',
+  },
+  controlSpace: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  buttonView: {
+    width: '50%',
+    padding: 10,
+  },
+  text: {
+    textAlign: 'center',
+  },
+});
+
+const Square = () => (
+  <View
+    style={{
+      width: 50,
+      height: 50,
+      backgroundColor: randomHexColor(),
+    }}
+  />
+);
+
+const randomHexColor = () => {
+  return '#000000'.replace(/0/g, () => {
+    return Math.round(Math.random() * 14).toString(16);
+  });
+};
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+---
+
+# Reference
+
+## Props
+
+### `alignContent`
+
+`alignContent` controls how rows align in the cross direction, overriding the `alignContent` of the parent.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) for more details.
+
+| Type                                                                                                 | Required |
+| ---------------------------------------------------------------------------------------------------- | -------- |
+| enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around', 'space-evenly') | No       |
+
+---
+
+### `alignItems`
+
+`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS (default: stretch).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) for more details.
+
+| Type                                                            | Required |
+| --------------------------------------------------------------- | -------- |
+| enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline') | No       |
+
+---
+
+### `alignSelf`
+
+`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS (default: auto).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) for more details.
+
+| Type                                                                    | Required |
+| ----------------------------------------------------------------------- | -------- |
+| enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline') | No       |
+
+---
+
+### `aspectRatio`
+
+Aspect ratio controls the size of the undefined dimension of a node.
+
+- On a node with a set width/height, aspect ratio controls the size of the unset dimension
+- On a node with a set flex basis, aspect ratio controls the size of the node in the cross axis if unset
+- On a node with a measure function, aspect ratio works as though the measure function measures the flex basis
+- On a node with flex grow/shrink, aspect ratio controls the size of the node in the cross axis if unset
+- Aspect ratio takes min/max dimensions into account
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `borderBottomWidth`
+
+`borderBottomWidth` works like `border-bottom-width` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderEndWidth`
+
+When direction is `ltr`, `borderEndWidth` is equivalent to `borderRightWidth`. When direction is `rtl`, `borderEndWidth` is equivalent to `borderLeftWidth`.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderLeftWidth`
+
+`borderLeftWidth` works like `border-left-width` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderRightWidth`
+
+`borderRightWidth` works like `border-right-width` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderStartWidth`
+
+When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. When direction is `rtl`, `borderStartWidth` is equivalent to `borderRightWidth`.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderTopWidth`
+
+`borderTopWidth` works like `border-top-width` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `borderWidth`
+
+`borderWidth` works like `border-width` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `bottom`
+
+`bottom` is the number of logical pixels to offset the bottom edge of this component.
+
+It works similarly to `bottom` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) for more details of how `bottom` affects layout.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `boxSizing`
+
+`boxSizing` defines how the element's various sizing props (`width`, `height`, `minWidth`, `minHeight`, etc.) are computed. If `boxSizing` is `border-box`, these sizes apply to the border box of the element. If it is `content-box`, they apply to the content box of the element. The default value is `border-box`. The [web documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) is a good source of information if you wish to learn more about how this prop works.
+
+| Type                              | Required |
+| --------------------------------- | -------- |
+| enum('border-box', 'content-box') | No       |
+
+---
+
+### `columnGap`
+
+`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `direction`
+
+`direction` specifies the directional flow of the user interface. The default is `inherit`, except for root node which will have value based on the current locale.
+
+See [MDN CSS Reference](https://www.yogalayout.dev/docs/styling/layout-direction) for more details.
+
+| Type                          | Required |
+| ----------------------------- | -------- |
+| enum('inherit', 'ltr', 'rtl') | No       |
+
+---
+
+### `display`
+
+`display` sets the display type of this component.
+
+It works similarly to `display` in CSS but only supports the values 'flex', 'none', and 'contents'. The default is `flex`.
+
+| Type                             | Required |
+| -------------------------------- | -------- |
+| enum('none', 'flex', 'contents') | No       |
+
+---
+
+### `end`
+
+When the direction is `ltr`, `end` is equivalent to `right`. When the direction is `rtl`, `end` is equivalent to `left`.
+
+This style takes precedence over the `left` and `right` styles.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `flex`
+
+In React Native `flex` does not work the same way that it does in CSS. `flex` is a number rather than a string, and it works according to the [Yoga](https://github.com/facebook/yoga) layout engine.
+
+When `flex` is a positive number, it makes the component flexible, and it will be sized proportional to its flex value. So a component with `flex` set to `2` will take twice the space as a component with `flex` set to 1. `flex: <positive number>` equates to `flexGrow: <positive number>, flexShrink: 1, flexBasis: 0`.
+
+When `flex` is `0`, the component is sized according to `width` and `height`, and it is inflexible.
+
+When `flex` is `-1`, the component is normally sized according to `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`.
+
+`flexGrow`, `flexShrink`, and `flexBasis` work the same as in CSS.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `flexBasis`
+
+`flexBasis` is an axis-independent way of providing the default size of an item along the main axis. Setting the `flexBasis` of a child is similar to setting the `width` of that child if its parent is a container with `flexDirection: row` or setting the `height` of a child if its parent is a container with `flexDirection: column`. The `flexBasis` of an item is the default size of that item, the size of the item before any `flexGrow` and `flexShrink` calculations are performed.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `flexDirection`
+
+`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) for more details.
+
+| Type                                                   | Required |
+| ------------------------------------------------------ | -------- |
+| enum('row', 'row-reverse', 'column', 'column-reverse') | No       |
+
+---
+
+### `flexGrow`
+
+`flexGrow` describes how any space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
+
+`flexGrow` accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the children’s `flexGrow` values.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `flexShrink`
+
+[`flexShrink`](layout-props#flexshrink) describes how to shrink children along the main axis in the case in which the total size of the children overflows the size of the container on the main axis. `flexShrink` is very similar to `flexGrow` and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed.
+
+`flexShrink` accepts any floating point value >= 0, with 0 being the default value. A container will shrink its children weighted by the children’s `flexShrink` values.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `flexWrap`
+
+`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS (default: nowrap).
+
+Note it does not work anymore with `alignItems: stretch` (the default), so you may want to use `alignItems: flex-start` for example (breaking change details: https://github.com/facebook/react-native/releases/tag/v0.28.0).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) for more details.
+
+| Type                                   | Required |
+| -------------------------------------- | -------- |
+| enum('wrap', 'nowrap', 'wrap-reverse') | No       |
+
+---
+
+### `gap`
+
+`gap` works like `gap` in CSS. Only pixel units are supported in React Native.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `height`
+
+`height` sets the height of this component.
+
+It works similarly to `height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/height) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `inset`
+
+:::note
+`inset` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Setting `inset` has the same effect as setting each of `top`, `bottom`, `right` and `left` props.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/inset) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetBlock`
+
+:::note
+`insetBlock` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Equivalent to [`top`](layout-props#top) and [`bottom`](layout-props#bottom).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetBlockEnd`
+
+:::note
+`insetBlockEnd` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Equivalent to [`bottom`](layout-props#bottom).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetBlockStart`
+
+:::note
+`insetBlockStart` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Equivalent to [`top`](layout-props#top).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetInline`
+
+:::note
+`insetInline` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Equivalent to [`right`](layout-props#right) and [`left`](layout-props#left).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetInlineEnd`
+
+:::note
+`insetInlineEnd` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+When direction is `ltr`, `insetInlineEnd` is equivalent to [`right`](layout-props#right). When direction is `rtl`, `insetInlineEnd` is equivalent to [`left`](layout-props#left).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `insetInlineStart`
+
+:::note
+`insetInlineStart` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+When direction is `ltr`, `insetInlineStart` is equivalent to [`left`](layout-props#left). When direction is `rtl`, `insetInlineStart` is equivalent to [`right`](layout-props#right).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `isolation`
+
+:::note
+`isolation` is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+`isolation` lets you form a [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context).
+
+There are two values:
+
+- `auto` (default): Does nothing.
+- `isolate`: Forms a stacking context.
+
+| Type                    | Required |
+| ----------------------- | -------- |
+| enum('auto', 'isolate') | No       |
+
+---
+
+### `justifyContent`
+
+`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS (default: flex-start).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) for more details.
+
+| Type                                                                                      | Required |
+| ----------------------------------------------------------------------------------------- | -------- |
+| enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly') | No       |
+
+---
+
+### `left`
+
+`left` is the number of logical pixels to offset the left edge of this component.
+
+It works similarly to `left` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/left) for more details of how `left` affects layout.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `margin`
+
+Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginBottom`
+
+`marginBottom` works like `margin-bottom` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginBlock`
+
+Equivalent to [`marginVertical`](layout-props#marginvertical).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginBlockEnd`
+
+Equivalent to [`marginBottom`](layout-props#marginbottom).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginBlockStart`
+
+Equivalent to [`marginTop`](layout-props#margintop).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginEnd`
+
+When direction is `ltr`, `marginEnd` is equivalent to `marginRight`. When direction is `rtl`, `marginEnd` is equivalent to `marginLeft`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginHorizontal`
+
+Setting `marginHorizontal` has the same effect as setting both `marginLeft` and `marginRight`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginInline`
+
+Equivalent to [`marginHorizontal`](layout-props#marginhorizontal).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginInlineEnd`
+
+When direction is `ltr`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginRight`). When direction is `rtl`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginLeft`).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginInlineStart`
+
+When direction is `ltr`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginLeft`). When direction is `rtl`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginRight`).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginLeft`
+
+`marginLeft` works like `margin-left` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginRight`
+
+`marginRight` works like `margin-right` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginStart`
+
+When direction is `ltr`, `marginStart` is equivalent to `marginLeft`. When direction is `rtl`, `marginStart` is equivalent to `marginRight`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginTop`
+
+`marginTop` works like `margin-top` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `marginVertical`
+
+Setting `marginVertical` has the same effect as setting both `marginTop` and `marginBottom`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `maxHeight`
+
+`maxHeight` is the maximum height for this component, in logical pixels.
+
+It works similarly to `max-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `maxWidth`
+
+`maxWidth` is the maximum width for this component, in logical pixels.
+
+It works similarly to `max-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `minHeight`
+
+`minHeight` is the minimum height for this component, in logical pixels.
+
+It works similarly to `min-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `minWidth`
+
+`minWidth` is the minimum width for this component, in logical pixels.
+
+It works similarly to `min-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `overflow`
+
+`overflow` controls how children are measured and displayed. `overflow: hidden` causes views to be clipped while `overflow: scroll` causes views to be measured independently of their parents' main axis. It works like `overflow` in CSS (default: visible).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) for more details.
+
+| Type                                | Required |
+| ----------------------------------- | -------- |
+| enum('visible', 'hidden', 'scroll') | No       |
+
+---
+
+### `padding`
+
+Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingBottom`
+
+`paddingBottom` works like `padding-bottom` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingBlock`
+
+Equivalent to [`paddingVertical`](layout-props#paddingvertical).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingBlockEnd`
+
+Equivalent to [`paddingBottom`](layout-props#paddingbottom).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingBlockStart`
+
+Equivalent to [`paddingTop`](layout-props#paddingtop).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingEnd`
+
+When direction is `ltr`, `paddingEnd` is equivalent to `paddingRight`. When direction is `rtl`, `paddingEnd` is equivalent to `paddingLeft`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingHorizontal`
+
+Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRight`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingInline`
+
+Equivalent to [`paddingHorizontal`](layout-props#paddinghorizontal).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingInlineEnd`
+
+When direction is `ltr`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingRight`). When direction is `rtl`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingLeft`).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-end) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingInlineStart`
+
+When direction is `ltr`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingLeft`). When direction is `rtl`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingRight`).
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-start) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingLeft`
+
+`paddingLeft` works like `padding-left` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingRight`
+
+`paddingRight` works like `padding-right` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingStart`
+
+When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`. When direction is `rtl`, `paddingStart` is equivalent to `paddingRight`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingTop`
+
+`paddingTop` works like `padding-top` in CSS.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `paddingVertical`
+
+Setting `paddingVertical` is like setting both of `paddingTop` and `paddingBottom`.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `position`
+
+`position` in React Native is similar to [regular CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/position), but everything is set to `relative` by default.
+
+`relative` will position an element according to the normal flow of the layout. Insets (`top`, `bottom`, `left`, `right`) will offset relative to this layout.
+
+`absolute` takes the element out of the normal flow of the layout. Insets will offset relative to its [containing block](./flexbox.md#the-containing-block).
+
+`static` will position an element according to the normal flow of the layout. Insets will have no effect.
+`static` elements do not form a containing block for absolute descendants.
+
+For more information, see the [Layout with Flexbox docs](./flexbox.md#position). Also, [the Yoga documentation](https://www.yogalayout.dev/docs/styling/position) has more details on how `position` differs between React Native and CSS.
+
+| Type                                   | Required |
+| -------------------------------------- | -------- |
+| enum('absolute', 'relative', 'static') | No       |
+
+---
+
+### `right`
+
+`right` is the number of logical pixels to offset the right edge of this component.
+
+It works similarly to `right` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) for more details of how `right` affects layout.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `rowGap`
+
+`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
+
+---
+
+### `start`
+
+When the direction is `ltr`, `start` is equivalent to `left`. When the direction is `rtl`, `start` is equivalent to `right`.
+
+This style takes precedence over the `left`, `right`, and `end` styles.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `top`
+
+`top` is the number of logical pixels to offset the top edge of this component.
+
+It works similarly to `top` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/top) for more details of how `top` affects layout.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `width`
+
+`width` sets the width of this component.
+
+It works similarly to `width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/width) for more details.
+
+| Type           | Required |
+| -------------- | -------- |
+| number, string | No       |
+
+---
+
+### `zIndex`
+
+`zIndex` controls which components display on top of others. Normally, you don't use `zIndex`. Components render according to their order in the document tree, so later components draw over earlier ones. `zIndex` may be useful if you have animations or custom modal interfaces where you don't want this behavior.
+
+It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball.
+
+On iOS, `zIndex` may require `View`s to be siblings of each other for it to work as expected.
+
+See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) for more details.
+
+| Type   | Required |
+| ------ | -------- |
+| number | No       |
diff --git a/website/versioned_docs/version-0.86/layoutanimation.md b/website/versioned_docs/version-0.86/layoutanimation.md
index 911a247c8c7..24a7d060d1e 100644
--- a/website/versioned_docs/version-0.86/layoutanimation.md
+++ b/website/versioned_docs/version-0.86/layoutanimation.md
@@ -1,358 +1,358 @@
----
-id: layoutanimation
-title: LayoutAnimation
----
-
-Automatically animates views to their new positions when the next layout happens.
-
-A common way to use this API is to call it before updating the state hook in functional components and calling `setState` in class components.
-
-Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`:
-
-```js
-if (Platform.OS === 'android') {
-  if (UIManager.setLayoutAnimationEnabledExperimental) {
-    UIManager.setLayoutAnimationEnabledExperimental(true);
-  }
-}
-```
-
-## Example
-
-```SnackPlayer name=LayoutAnimation%20Example&supportedPlatforms=android,ios
-import React, {useState} from 'react';
-import {
-  LayoutAnimation,
-  Platform,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  UIManager,
-  View,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-if (
-  Platform.OS === 'android' &&
-  UIManager.setLayoutAnimationEnabledExperimental
-) {
-  UIManager.setLayoutAnimationEnabledExperimental(true);
-}
-const App = () => {
-  const [expanded, setExpanded] = useState(false);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={style.container}>
-        <TouchableOpacity
-          onPress={() => {
-            LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
-            setExpanded(!expanded);
-          }}>
-          <Text>Press me to {expanded ? 'collapse' : 'expand'}!</Text>
-        </TouchableOpacity>
-        {expanded && (
-          <View style={style.tile}>
-            <Text>I disappear sometimes!</Text>
-          </View>
-        )}
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const style = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    gap: 16,
-  },
-  tile: {
-    backgroundColor: 'lightgrey',
-    borderWidth: 0.5,
-    borderColor: '#d6d7da',
-    padding: 4,
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Methods
-
-### `configureNext()`
-
-```tsx
-static configureNext(
-  config: LayoutAnimationConfig,
-  onAnimationDidEnd?: () => void,
-  onAnimationDidFail?: () => void,
-);
-```
-
-Schedules an animation to happen on the next layout.
-
-#### Parameters:
-
-| Name               | Type     | Required | Description                         |
-| ------------------ | -------- | -------- | ----------------------------------- |
-| config             | object   | Yes      | See config description below.       |
-| onAnimationDidEnd  | function | No       | Called when the animation finished. |
-| onAnimationDidFail | function | No       | Called when the animation failed.   |
-
-The `config` parameter is an object with the keys below. [`create`](layoutanimation.md#create) returns a valid object for `config`, and the [`Presets`](layoutanimation.md#presets) objects can also all be passed as the `config`.
-
-- `duration` in milliseconds
-- `create`, optional config for animating in new views
-- `update`, optional config for animating views that have been updated
-- `delete`, optional config for animating views as they are removed
-
-The config that's passed to `create`, `update`, or `delete` has the following keys:
-
-- `type`, the [animation type](layoutanimation.md#types) to use
-- `property`, the [layout property](layoutanimation.md#properties) to animate (optional, but recommended for `create` and `delete`)
-- `springDamping` (number, optional and only for use with `type: Type.spring`)
-- `initialVelocity` (number, optional)
-- `delay` (number, optional)
-- `duration` (number, optional)
-
----
-
-### `create()`
-
-```tsx
-static create(duration, type, creationProp)
-```
-
-Helper that creates an object (with `create`, `update`, and `delete` fields) to pass into [`configureNext`](layoutanimation.md#configurenext). The `type` parameter is an [animation type](layoutanimation.md#types), and the `creationProp` parameter is a [layout property](layoutanimation.md#properties).
-
-**Example:**
-
-```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios
-import React, {useState} from 'react';
-import {
-  View,
-  Platform,
-  UIManager,
-  LayoutAnimation,
-  StyleSheet,
-  Button,
-} from 'react-native';
-
-if (
-  Platform.OS === 'android' &&
-  UIManager.setLayoutAnimationEnabledExperimental
-) {
-  UIManager.setLayoutAnimationEnabledExperimental(true);
-}
-
-const App = () => {
-  const [boxPosition, setBoxPosition] = useState('left');
-
-  const toggleBox = () => {
-    LayoutAnimation.configureNext({
-      duration: 500,
-      create: {type: 'linear', property: 'opacity'},
-      update: {type: 'spring', springDamping: 0.4},
-      delete: {type: 'linear', property: 'opacity'},
-    });
-    setBoxPosition(boxPosition === 'left' ? 'right' : 'left');
-  };
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.buttonContainer}>
-        <Button title="Toggle Layout" onPress={toggleBox} />
-      </View>
-      <View
-        style={[styles.box, boxPosition === 'left' ? null : styles.moveRight]}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'flex-start',
-    justifyContent: 'center',
-  },
-  box: {
-    height: 100,
-    width: 100,
-    borderRadius: 5,
-    margin: 8,
-    backgroundColor: 'blue',
-  },
-  moveRight: {
-    alignSelf: 'flex-end',
-    height: 200,
-    width: 200,
-  },
-  buttonContainer: {
-    alignSelf: 'center',
-  },
-});
-
-export default App;
-```
-
-## Properties
-
-### Types
-
-An enumeration of animation types to be used in the [`create`](layoutanimation.md#create) method, or in the `create`/`update`/`delete` configs for [`configureNext`](layoutanimation.md#configurenext). (example usage: `LayoutAnimation.Types.easeIn`)
-
-| Types         |
-| ------------- |
-| spring        |
-| linear        |
-| easeInEaseOut |
-| easeIn        |
-| easeOut       |
-| keyboard      |
-
----
-
-### Properties
-
-An enumeration of layout properties to be animated to be used in the [`create`](layoutanimation.md#create) method, or in the `create`/`update`/`delete` configs for [`configureNext`](layoutanimation.md#configurenext). (example usage: `LayoutAnimation.Properties.opacity`)
-
-| Properties |
-| ---------- |
-| opacity    |
-| scaleX     |
-| scaleY     |
-| scaleXY    |
-
----
-
-### Presets
-
-A set of predefined animation configs to pass into [`configureNext`](layoutanimation.md#configurenext).
-
-| Presets       | Value                                                                                                                                                          |
-| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| easeInEaseOut | `create(300, 'easeInEaseOut', 'opacity')`                                                                                                                      |
-| linear        | `create(500, 'linear', 'opacity')`                                                                                                                             |
-| spring        | `{duration: 700, create: {type: 'linear', property: 'opacity'}, update: {type: 'spring', springDamping: 0.4}, delete: {type: 'linear', property: 'opacity'} }` |
-
----
-
-### `easeInEaseOut`
-
-Calls `configureNext()` with `Presets.easeInEaseOut`.
-
----
-
-### `linear`
-
-Calls `configureNext()` with `Presets.linear`.
-
----
-
-### `spring`
-
-Calls `configureNext()` with `Presets.spring`.
-
-**Example:**
-
-```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios
-import React, {useState} from 'react';
-import {
-  View,
-  Platform,
-  UIManager,
-  LayoutAnimation,
-  StyleSheet,
-  Button,
-} from 'react-native';
-
-if (
-  Platform.OS === 'android' &&
-  UIManager.setLayoutAnimationEnabledExperimental
-) {
-  UIManager.setLayoutAnimationEnabledExperimental(true);
-}
-
-const App = () => {
-  const [firstBoxPosition, setFirstBoxPosition] = useState('left');
-  const [secondBoxPosition, setSecondBoxPosition] = useState('left');
-  const [thirdBoxPosition, setThirdBoxPosition] = useState('left');
-
-  const toggleFirstBox = () => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-    setFirstBoxPosition(firstBoxPosition === 'left' ? 'right' : 'left');
-  };
-
-  const toggleSecondBox = () => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
-    setSecondBoxPosition(secondBoxPosition === 'left' ? 'right' : 'left');
-  };
-
-  const toggleThirdBox = () => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
-    setThirdBoxPosition(thirdBoxPosition === 'left' ? 'right' : 'left');
-  };
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.buttonContainer}>
-        <Button title="EaseInEaseOut" onPress={toggleFirstBox} />
-      </View>
-      <View
-        style={[
-          styles.box,
-          firstBoxPosition === 'left' ? null : styles.moveRight,
-        ]}
-      />
-      <View style={styles.buttonContainer}>
-        <Button title="Linear" onPress={toggleSecondBox} />
-      </View>
-      <View
-        style={[
-          styles.box,
-          secondBoxPosition === 'left' ? null : styles.moveRight,
-        ]}
-      />
-      <View style={styles.buttonContainer}>
-        <Button title="Spring" onPress={toggleThirdBox} />
-      </View>
-      <View
-        style={[
-          styles.box,
-          thirdBoxPosition === 'left' ? null : styles.moveRight,
-        ]}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'flex-start',
-    justifyContent: 'center',
-  },
-  box: {
-    height: 100,
-    width: 100,
-    borderRadius: 5,
-    margin: 8,
-    backgroundColor: 'blue',
-  },
-  moveRight: {
-    alignSelf: 'flex-end',
-  },
-  buttonContainer: {
-    alignSelf: 'center',
-  },
-});
-
-export default App;
-```
+---
+id: layoutanimation
+title: LayoutAnimation
+---
+
+Automatically animates views to their new positions when the next layout happens.
+
+A common way to use this API is to call it before updating the state hook in functional components and calling `setState` in class components.
+
+Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`:
+
+```js
+if (Platform.OS === 'android') {
+  if (UIManager.setLayoutAnimationEnabledExperimental) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+  }
+}
+```
+
+## Example
+
+```SnackPlayer name=LayoutAnimation%20Example&supportedPlatforms=android,ios
+import {useState} from 'react';
+import {
+  LayoutAnimation,
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  UIManager,
+  View,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+if (
+  Platform.OS === 'android' &&
+  UIManager.setLayoutAnimationEnabledExperimental
+) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+const App = () => {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={style.container}>
+        <TouchableOpacity
+          onPress={() => {
+            LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
+            setExpanded(!expanded);
+          }}>
+          <Text>Press me to {expanded ? 'collapse' : 'expand'}!</Text>
+        </TouchableOpacity>
+        {expanded && (
+          <View style={style.tile}>
+            <Text>I disappear sometimes!</Text>
+          </View>
+        )}
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const style = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 16,
+  },
+  tile: {
+    backgroundColor: 'lightgrey',
+    borderWidth: 0.5,
+    borderColor: '#d6d7da',
+    padding: 4,
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `configureNext()`
+
+```tsx
+static configureNext(
+  config: LayoutAnimationConfig,
+  onAnimationDidEnd?: () => void,
+  onAnimationDidFail?: () => void,
+);
+```
+
+Schedules an animation to happen on the next layout.
+
+#### Parameters:
+
+| Name               | Type     | Required | Description                         |
+| ------------------ | -------- | -------- | ----------------------------------- |
+| config             | object   | Yes      | See config description below.       |
+| onAnimationDidEnd  | function | No       | Called when the animation finished. |
+| onAnimationDidFail | function | No       | Called when the animation failed.   |
+
+The `config` parameter is an object with the keys below. [`create`](layoutanimation.md#create) returns a valid object for `config`, and the [`Presets`](layoutanimation.md#presets) objects can also all be passed as the `config`.
+
+- `duration` in milliseconds
+- `create`, optional config for animating in new views
+- `update`, optional config for animating views that have been updated
+- `delete`, optional config for animating views as they are removed
+
+The config that's passed to `create`, `update`, or `delete` has the following keys:
+
+- `type`, the [animation type](layoutanimation.md#types) to use
+- `property`, the [layout property](layoutanimation.md#properties) to animate (optional, but recommended for `create` and `delete`)
+- `springDamping` (number, optional and only for use with `type: Type.spring`)
+- `initialVelocity` (number, optional)
+- `delay` (number, optional)
+- `duration` (number, optional)
+
+---
+
+### `create()`
+
+```tsx
+static create(duration, type, creationProp)
+```
+
+Helper that creates an object (with `create`, `update`, and `delete` fields) to pass into [`configureNext`](layoutanimation.md#configurenext). The `type` parameter is an [animation type](layoutanimation.md#types), and the `creationProp` parameter is a [layout property](layoutanimation.md#properties).
+
+**Example:**
+
+```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios
+import {useState} from 'react';
+import {
+  View,
+  Platform,
+  UIManager,
+  LayoutAnimation,
+  StyleSheet,
+  Button,
+} from 'react-native';
+
+if (
+  Platform.OS === 'android' &&
+  UIManager.setLayoutAnimationEnabledExperimental
+) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+const App = () => {
+  const [boxPosition, setBoxPosition] = useState('left');
+
+  const toggleBox = () => {
+    LayoutAnimation.configureNext({
+      duration: 500,
+      create: {type: 'linear', property: 'opacity'},
+      update: {type: 'spring', springDamping: 0.4},
+      delete: {type: 'linear', property: 'opacity'},
+    });
+    setBoxPosition(boxPosition === 'left' ? 'right' : 'left');
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.buttonContainer}>
+        <Button title="Toggle Layout" onPress={toggleBox} />
+      </View>
+      <View
+        style={[styles.box, boxPosition === 'left' ? null : styles.moveRight]}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+  },
+  box: {
+    height: 100,
+    width: 100,
+    borderRadius: 5,
+    margin: 8,
+    backgroundColor: 'blue',
+  },
+  moveRight: {
+    alignSelf: 'flex-end',
+    height: 200,
+    width: 200,
+  },
+  buttonContainer: {
+    alignSelf: 'center',
+  },
+});
+
+export default App;
+```
+
+## Properties
+
+### Types
+
+An enumeration of animation types to be used in the [`create`](layoutanimation.md#create) method, or in the `create`/`update`/`delete` configs for [`configureNext`](layoutanimation.md#configurenext). (example usage: `LayoutAnimation.Types.easeIn`)
+
+| Types         |
+| ------------- |
+| spring        |
+| linear        |
+| easeInEaseOut |
+| easeIn        |
+| easeOut       |
+| keyboard      |
+
+---
+
+### Properties
+
+An enumeration of layout properties to be animated to be used in the [`create`](layoutanimation.md#create) method, or in the `create`/`update`/`delete` configs for [`configureNext`](layoutanimation.md#configurenext). (example usage: `LayoutAnimation.Properties.opacity`)
+
+| Properties |
+| ---------- |
+| opacity    |
+| scaleX     |
+| scaleY     |
+| scaleXY    |
+
+---
+
+### Presets
+
+A set of predefined animation configs to pass into [`configureNext`](layoutanimation.md#configurenext).
+
+| Presets       | Value                                                                                                                                                          |
+| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| easeInEaseOut | `create(300, 'easeInEaseOut', 'opacity')`                                                                                                                      |
+| linear        | `create(500, 'linear', 'opacity')`                                                                                                                             |
+| spring        | `{duration: 700, create: {type: 'linear', property: 'opacity'}, update: {type: 'spring', springDamping: 0.4}, delete: {type: 'linear', property: 'opacity'} }` |
+
+---
+
+### `easeInEaseOut`
+
+Calls `configureNext()` with `Presets.easeInEaseOut`.
+
+---
+
+### `linear`
+
+Calls `configureNext()` with `Presets.linear`.
+
+---
+
+### `spring`
+
+Calls `configureNext()` with `Presets.spring`.
+
+**Example:**
+
+```SnackPlayer name=LayoutAnimation&supportedPlatforms=android,ios
+import {useState} from 'react';
+import {
+  View,
+  Platform,
+  UIManager,
+  LayoutAnimation,
+  StyleSheet,
+  Button,
+} from 'react-native';
+
+if (
+  Platform.OS === 'android' &&
+  UIManager.setLayoutAnimationEnabledExperimental
+) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+const App = () => {
+  const [firstBoxPosition, setFirstBoxPosition] = useState('left');
+  const [secondBoxPosition, setSecondBoxPosition] = useState('left');
+  const [thirdBoxPosition, setThirdBoxPosition] = useState('left');
+
+  const toggleFirstBox = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setFirstBoxPosition(firstBoxPosition === 'left' ? 'right' : 'left');
+  };
+
+  const toggleSecondBox = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
+    setSecondBoxPosition(secondBoxPosition === 'left' ? 'right' : 'left');
+  };
+
+  const toggleThirdBox = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
+    setThirdBoxPosition(thirdBoxPosition === 'left' ? 'right' : 'left');
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.buttonContainer}>
+        <Button title="EaseInEaseOut" onPress={toggleFirstBox} />
+      </View>
+      <View
+        style={[
+          styles.box,
+          firstBoxPosition === 'left' ? null : styles.moveRight,
+        ]}
+      />
+      <View style={styles.buttonContainer}>
+        <Button title="Linear" onPress={toggleSecondBox} />
+      </View>
+      <View
+        style={[
+          styles.box,
+          secondBoxPosition === 'left' ? null : styles.moveRight,
+        ]}
+      />
+      <View style={styles.buttonContainer}>
+        <Button title="Spring" onPress={toggleThirdBox} />
+      </View>
+      <View
+        style={[
+          styles.box,
+          thirdBoxPosition === 'left' ? null : styles.moveRight,
+        ]}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+  },
+  box: {
+    height: 100,
+    width: 100,
+    borderRadius: 5,
+    margin: 8,
+    backgroundColor: 'blue',
+  },
+  moveRight: {
+    alignSelf: 'flex-end',
+  },
+  buttonContainer: {
+    alignSelf: 'center',
+  },
+});
+
+export default App;
+```
diff --git a/website/versioned_docs/version-0.86/legacy/direct-manipulation.md b/website/versioned_docs/version-0.86/legacy/direct-manipulation.md
index b3e7e063414..9ba739abb15 100644
--- a/website/versioned_docs/version-0.86/legacy/direct-manipulation.md
+++ b/website/versioned_docs/version-0.86/legacy/direct-manipulation.md
@@ -1,444 +1,440 @@
----
-id: direct-manipulation
-title: Direct Manipulation
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-It is sometimes necessary to make changes directly to a component without using state/props to trigger a re-render of the entire subtree. When using React in the browser for example, you sometimes need to directly modify a DOM node, and the same is true for views in mobile apps. `setNativeProps` is the React Native equivalent to setting properties directly on a DOM node.
-
-:::caution
-Use `setNativeProps` when frequent re-rendering creates a performance bottleneck!
-
-Direct manipulation will not be a tool that you reach for frequently. You will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views.
-`setNativeProps` is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about.
-
-Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate).
-:::
-
-## setNativeProps with TouchableOpacity
-
-[TouchableOpacity](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js) uses `setNativeProps` internally to update the opacity of its child component:
-
-```tsx
-const viewRef = useRef<View>();
-const setOpacityTo = useCallback(value => {
-  // Redacted: animation related code
-  viewRef.current.setNativeProps({
-    opacity: value,
-  });
-}, []);
-```
-
-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:
-
-```tsx
-<TouchableOpacity onPress={handlePress}>
-  <View>
-    <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:
-
-```tsx
-const [buttonOpacity, setButtonOpacity] = useState(1);
-return (
-  <TouchableOpacity
-    onPressIn={() => setButtonOpacity(0.5)}
-    onPressOut={() => setButtonOpacity(1)}>
-    <View style={{opacity: buttonOpacity}}>
-      <Text>Press me!</Text>
-    </View>
-  </TouchableOpacity>
-);
-```
-
-This is computationally intensive compared to the original example - React needs to re-render the component hierarchy each time the opacity changes, even though other properties of the view and its children haven't changed. Usually this overhead isn't a concern but when performing continuous animations and responding to gestures, judiciously optimizing your components can improve your animations' fidelity.
-
-If you look at the implementation of `setNativeProps` in [NativeMethodsMixin](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js) you will notice that it is a wrapper around `RCTUIManager.updateView` - this is the exact same function call that results from re-rendering - see [receiveComponent in ReactNativeBaseComponent](https://github.com/facebook/react-native/blob/fb2ec1ea47c53c2e7b873acb1cb46192ac74274e/Libraries/Renderer/oss/ReactNativeRenderer-prod.js#L5793-L5813).
-
-## Composite components and setNativeProps
-
-Composite components are not backed by a native view, so you cannot call `setNativeProps` on them. Consider this example:
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=setNativeProps%20with%20Composite%20Components&ext=js
-import React from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
-
-const MyButton = props => (
-  <View style={{marginTop: 50}}>
-    <Text>{props.label}</Text>
-  </View>
-);
-
-const App = () => (
-  <TouchableOpacity>
-    <MyButton label="Press me!" />
-  </TouchableOpacity>
-);
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=setNativeProps%20with%20Composite%20Components&ext=tsx
-import React from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
-
-const MyButton = (props: {label: string}) => (
-  <View style={{marginTop: 50}}>
-    <Text>{props.label}</Text>
-  </View>
-);
-
-const App = () => (
-  <TouchableOpacity>
-    <MyButton label="Press me!" />
-  </TouchableOpacity>
-);
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-If you run this you will immediately see this error: `Touchable child must either be native or forward setNativeProps to a native component`. This occurs because `MyButton` isn't directly backed by a native view whose opacity should be set. You can think about it like this: if you define a component with `createReactClass` you would not expect to be able to set a style prop on it and have that work - you would need to pass the style prop down to a child, unless you are wrapping a native component. Similarly, we are going to forward `setNativeProps` to a native-backed child component.
-
-#### Forward setNativeProps to a child
-
-Since the `setNativeProps` method exists on any ref to a `View` component, it is enough to forward a ref on your custom component to one of the `<View />` components that it renders. This means that a call to `setNativeProps` on the custom component will have the same effect as if you called `setNativeProps` on the wrapped `View` component itself.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Forwarding%20setNativeProps&ext=js
-import React from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
-
-const MyButton = React.forwardRef((props, ref) => (
-  <View {...props} ref={ref} style={{marginTop: 50}}>
-    <Text>{props.label}</Text>
-  </View>
-));
-
-const App = () => (
-  <TouchableOpacity>
-    <MyButton label="Press me!" />
-  </TouchableOpacity>
-);
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Forwarding%20setNativeProps&ext=tsx
-import React from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
-
-const MyButton = React.forwardRef<View, {label: string}>((props, ref) => (
-  <View {...props} ref={ref} style={{marginTop: 50}}>
-    <Text>{props.label}</Text>
-  </View>
-));
-
-const App = () => (
-  <TouchableOpacity>
-    <MyButton label="Press me!" />
-  </TouchableOpacity>
-);
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-You can now use `MyButton` inside of `TouchableOpacity`!
-
-You may have noticed that we passed all of the props down to the child view using `{...props}`. The reason for this is that `TouchableOpacity` is actually a composite component, and so in addition to depending on `setNativeProps` on its child, it also requires that the child perform touch handling. To do this, it passes on [various props](view.md#onmoveshouldsetresponder) that call back to the `TouchableOpacity` component. `TouchableHighlight`, in contrast, is backed by a native view and only requires that we implement `setNativeProps`.
-
-## setNativeProps to edit TextInput value
-
-Another very common use case of `setNativeProps` is to edit the value of the TextInput. The `controlled` prop of TextInput can sometimes drop characters when the `bufferDelay` is low and the user types very quickly. Some developers prefer to skip this prop entirely and instead use `setNativeProps` to directly manipulate the TextInput value when necessary. For example, the following code demonstrates editing the input when you tap a button:
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Clear%20text&ext=js
-import React from 'react';
-import {useCallback, useRef} from 'react';
-import {
-  StyleSheet,
-  TextInput,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-
-const App = () => {
-  const inputRef = useRef(null);
-  const editText = useCallback(() => {
-    inputRef.current.setNativeProps({text: 'Edited Text'});
-  }, []);
-
-  return (
-    <View style={styles.container}>
-      <TextInput ref={inputRef} style={styles.input} />
-      <TouchableOpacity onPress={editText}>
-        <Text>Edit text</Text>
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  input: {
-    height: 50,
-    width: 200,
-    marginHorizontal: 20,
-    borderWidth: 1,
-    borderColor: '#ccc',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Clear%20text&ext=tsx
-import React from 'react';
-import {useCallback, useRef} from 'react';
-import {
-  StyleSheet,
-  TextInput,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-
-const App = () => {
-  const inputRef = useRef<TextInput>(null);
-  const editText = useCallback(() => {
-    inputRef.current?.setNativeProps({text: 'Edited Text'});
-  }, []);
-
-  return (
-    <View style={styles.container}>
-      <TextInput ref={inputRef} style={styles.input} />
-      <TouchableOpacity onPress={editText}>
-        <Text>Edit text</Text>
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  input: {
-    height: 50,
-    width: 200,
-    marginHorizontal: 20,
-    borderWidth: 1,
-    borderColor: '#ccc',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-You can use the [`clear`](../textinput#clear) method to clear the `TextInput` which clears the current input text using the same approach.
-
-## Avoiding conflicts with the render function
-
-If you update a property that is also managed by the render function, you might end up with some unpredictable and confusing bugs because anytime the component re-renders and that property changes, whatever value was previously set from `setNativeProps` will be completely ignored and overridden.
-
-## setNativeProps & shouldComponentUpdate
-
-By [intelligently applying `shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`.
-
-## Other native methods
-
-The methods described here are available on most of the default components provided by React Native. Note, however, that they are _not_ available on composite components that aren't directly backed by a native view. This will generally include most components that you define in your own app.
-
-### measure(callback)
-
-Determines the location on screen, width, and height in the viewport of the given view and returns the values via an async callback. If successful, the callback will be called with the following arguments:
-
-- x
-- y
-- width
-- height
-- pageX
-- pageY
-
-Note that these measurements are not available until after the rendering has been completed in native. If you need the measurements as soon as possible and you don't need `pageX` and `pageY`, consider using the [`onLayout`](view.md#onlayout) property instead.
-
-Also the width and height returned by `measure()` are the width and height of the component in the viewport. If you need the actual size of the component, consider using the [`onLayout`](view.md#onlayout) property instead.
-
-### measureInWindow(callback)
-
-Determines the location of the given view in the window and returns the values via an async callback. If the React root view is embedded in another native view, this will give you the absolute coordinates. If successful, the callback will be called with the following arguments:
-
-- x
-- y
-- width
-- height
-
-### measureLayout(relativeToNativeComponentRef, onSuccess, onFail)
-
-Like `measure()`, but measures the view relative to an ancestor, specified with `relativeToNativeComponentRef` reference. This means that the returned coordinates are relative to the origin `x`, `y` of the ancestor view.
-
-:::note
-This method can also be called with a `relativeToNativeNode` handler (instead of reference), but this variant is obsolete with the new architecture.
-:::
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=measureLayout%20example&supportedPlatforms=android,ios&ext=js
-import React, {useEffect, useRef, useState} from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-
-const App = () => {
-  const textContainerRef = useRef(null);
-  const textRef = useRef(null);
-  const [measure, setMeasure] = useState(null);
-
-  useEffect(() => {
-    if (textRef.current && textContainerRef.current) {
-      textRef.current.measureLayout(
-        textContainerRef.current,
-        (left, top, width, height) => {
-          setMeasure({left, top, width, height});
-        },
-      );
-    }
-  }, [measure]);
-
-  return (
-    <View style={styles.container}>
-      <View ref={textContainerRef} style={styles.textContainer}>
-        <Text ref={textRef}>Where am I? (relative to the text container)</Text>
-      </View>
-      <Text style={styles.measure}>{JSON.stringify(measure)}</Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  textContainer: {
-    backgroundColor: '#61dafb',
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 12,
-  },
-  measure: {
-    textAlign: 'center',
-    padding: 12,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=measureLayout%20example&ext=tsx
-import React, {useEffect, useRef, useState} from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-
-type Measurements = {
-  left: number;
-  top: number;
-  width: number;
-  height: number;
-};
-
-const App = () => {
-  const textContainerRef = useRef<View>(null);
-  const textRef = useRef<Text>(null);
-  const [measure, setMeasure] = useState<Measurements | null>(null);
-
-  useEffect(() => {
-    if (textRef.current && textContainerRef.current) {
-      textRef.current?.measureLayout(
-        textContainerRef.current,
-        (left, top, width, height) => {
-          setMeasure({left, top, width, height});
-        },
-        () => {
-          console.error('measurement failed');
-        },
-      );
-    }
-  }, [measure]);
-
-  return (
-    <View style={styles.container}>
-      <View ref={textContainerRef} style={styles.textContainer}>
-        <Text ref={textRef}>Where am I? (relative to the text container)</Text>
-      </View>
-      <Text style={styles.measure}>{JSON.stringify(measure)}</Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  textContainer: {
-    backgroundColor: '#61dafb',
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 12,
-  },
-  measure: {
-    textAlign: 'center',
-    padding: 12,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### focus()
-
-Requests focus for the given input or view. The exact behavior triggered will depend on the platform and type of view.
-
-### blur()
-
-Removes focus from an input or view. This is the opposite of `focus()`.
+---
+id: direct-manipulation
+title: Direct Manipulation
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+It is sometimes necessary to make changes directly to a component without using state/props to trigger a re-render of the entire subtree. When using React in the browser for example, you sometimes need to directly modify a DOM node, and the same is true for views in mobile apps. `setNativeProps` is the React Native equivalent to setting properties directly on a DOM node.
+
+:::caution
+Use `setNativeProps` when frequent re-rendering creates a performance bottleneck!
+
+Direct manipulation will not be a tool that you reach for frequently. You will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views.
+`setNativeProps` is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about.
+
+Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate).
+:::
+
+## setNativeProps with TouchableOpacity
+
+[TouchableOpacity](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js) uses `setNativeProps` internally to update the opacity of its child component:
+
+```tsx
+const viewRef = useRef<View>();
+const setOpacityTo = useCallback(value => {
+  // Redacted: animation related code
+  viewRef.current.setNativeProps({
+    opacity: value,
+  });
+}, []);
+```
+
+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:
+
+```tsx
+<TouchableOpacity onPress={handlePress}>
+  <View>
+    <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:
+
+```tsx
+const [buttonOpacity, setButtonOpacity] = useState(1);
+return (
+  <TouchableOpacity
+    onPressIn={() => setButtonOpacity(0.5)}
+    onPressOut={() => setButtonOpacity(1)}>
+    <View style={{opacity: buttonOpacity}}>
+      <Text>Press me!</Text>
+    </View>
+  </TouchableOpacity>
+);
+```
+
+This is computationally intensive compared to the original example - React needs to re-render the component hierarchy each time the opacity changes, even though other properties of the view and its children haven't changed. Usually this overhead isn't a concern but when performing continuous animations and responding to gestures, judiciously optimizing your components can improve your animations' fidelity.
+
+If you look at the implementation of `setNativeProps` in [NativeMethodsMixin](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js) you will notice that it is a wrapper around `RCTUIManager.updateView` - this is the exact same function call that results from re-rendering - see [receiveComponent in ReactNativeBaseComponent](https://github.com/facebook/react-native/blob/fb2ec1ea47c53c2e7b873acb1cb46192ac74274e/Libraries/Renderer/oss/ReactNativeRenderer-prod.js#L5793-L5813).
+
+## Composite components and setNativeProps
+
+Composite components are not backed by a native view, so you cannot call `setNativeProps` on them. Consider this example:
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=setNativeProps%20with%20Composite%20Components&ext=js
+import {Text, TouchableOpacity, View} from 'react-native';
+
+const MyButton = props => (
+  <View style={{marginTop: 50}}>
+    <Text>{props.label}</Text>
+  </View>
+);
+
+const App = () => (
+  <TouchableOpacity>
+    <MyButton label="Press me!" />
+  </TouchableOpacity>
+);
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=setNativeProps%20with%20Composite%20Components&ext=tsx
+import {Text, TouchableOpacity, View} from 'react-native';
+
+const MyButton = (props: {label: string}) => (
+  <View style={{marginTop: 50}}>
+    <Text>{props.label}</Text>
+  </View>
+);
+
+const App = () => (
+  <TouchableOpacity>
+    <MyButton label="Press me!" />
+  </TouchableOpacity>
+);
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+If you run this you will immediately see this error: `Touchable child must either be native or forward setNativeProps to a native component`. This occurs because `MyButton` isn't directly backed by a native view whose opacity should be set. You can think about it like this: if you define a component with `createReactClass` you would not expect to be able to set a style prop on it and have that work - you would need to pass the style prop down to a child, unless you are wrapping a native component. Similarly, we are going to forward `setNativeProps` to a native-backed child component.
+
+#### Forward setNativeProps to a child
+
+Since the `setNativeProps` method exists on any ref to a `View` component, it is enough to forward a ref on your custom component to one of the `<View />` components that it renders. This means that a call to `setNativeProps` on the custom component will have the same effect as if you called `setNativeProps` on the wrapped `View` component itself.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Forwarding%20setNativeProps&ext=js
+import {forwardRef} from 'react';
+import {Text, TouchableOpacity, View} from 'react-native';
+
+const MyButton = forwardRef((props, ref) => (
+  <View {...props} ref={ref} style={{marginTop: 50}}>
+    <Text>{props.label}</Text>
+  </View>
+));
+
+const App = () => (
+  <TouchableOpacity>
+    <MyButton label="Press me!" />
+  </TouchableOpacity>
+);
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Forwarding%20setNativeProps&ext=tsx
+import {forwardRef} from 'react';
+import {Text, TouchableOpacity, View} from 'react-native';
+
+const MyButton = forwardRef<View, {label: string}>((props, ref) => (
+  <View {...props} ref={ref} style={{marginTop: 50}}>
+    <Text>{props.label}</Text>
+  </View>
+));
+
+const App = () => (
+  <TouchableOpacity>
+    <MyButton label="Press me!" />
+  </TouchableOpacity>
+);
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+You can now use `MyButton` inside of `TouchableOpacity`!
+
+You may have noticed that we passed all of the props down to the child view using `{...props}`. The reason for this is that `TouchableOpacity` is actually a composite component, and so in addition to depending on `setNativeProps` on its child, it also requires that the child perform touch handling. To do this, it passes on [various props](view.md#onmoveshouldsetresponder) that call back to the `TouchableOpacity` component. `TouchableHighlight`, in contrast, is backed by a native view and only requires that we implement `setNativeProps`.
+
+## setNativeProps to edit TextInput value
+
+Another very common use case of `setNativeProps` is to edit the value of the TextInput. The `controlled` prop of TextInput can sometimes drop characters when the `bufferDelay` is low and the user types very quickly. Some developers prefer to skip this prop entirely and instead use `setNativeProps` to directly manipulate the TextInput value when necessary. For example, the following code demonstrates editing the input when you tap a button:
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Clear%20text&ext=js
+import {useCallback, useRef} from 'react';
+import {
+  StyleSheet,
+  TextInput,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+const App = () => {
+  const inputRef = useRef(null);
+  const editText = useCallback(() => {
+    inputRef.current.setNativeProps({text: 'Edited Text'});
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <TextInput ref={inputRef} style={styles.input} />
+      <TouchableOpacity onPress={editText}>
+        <Text>Edit text</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  input: {
+    height: 50,
+    width: 200,
+    marginHorizontal: 20,
+    borderWidth: 1,
+    borderColor: '#ccc',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Clear%20text&ext=tsx
+import {useCallback, useRef} from 'react';
+import {
+  StyleSheet,
+  TextInput,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+const App = () => {
+  const inputRef = useRef<TextInput>(null);
+  const editText = useCallback(() => {
+    inputRef.current?.setNativeProps({text: 'Edited Text'});
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <TextInput ref={inputRef} style={styles.input} />
+      <TouchableOpacity onPress={editText}>
+        <Text>Edit text</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  input: {
+    height: 50,
+    width: 200,
+    marginHorizontal: 20,
+    borderWidth: 1,
+    borderColor: '#ccc',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+You can use the [`clear`](../textinput#clear) method to clear the `TextInput` which clears the current input text using the same approach.
+
+## Avoiding conflicts with the render function
+
+If you update a property that is also managed by the render function, you might end up with some unpredictable and confusing bugs because anytime the component re-renders and that property changes, whatever value was previously set from `setNativeProps` will be completely ignored and overridden.
+
+## setNativeProps & shouldComponentUpdate
+
+By [intelligently applying `shouldComponentUpdate`](https://react.dev/reference/react/Component#shouldcomponentupdate) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`.
+
+## Other native methods
+
+The methods described here are available on most of the default components provided by React Native. Note, however, that they are _not_ available on composite components that aren't directly backed by a native view. This will generally include most components that you define in your own app.
+
+### measure(callback)
+
+Determines the location on screen, width, and height in the viewport of the given view and returns the values via an async callback. If successful, the callback will be called with the following arguments:
+
+- x
+- y
+- width
+- height
+- pageX
+- pageY
+
+Note that these measurements are not available until after the rendering has been completed in native. If you need the measurements as soon as possible and you don't need `pageX` and `pageY`, consider using the [`onLayout`](view.md#onlayout) property instead.
+
+Also the width and height returned by `measure()` are the width and height of the component in the viewport. If you need the actual size of the component, consider using the [`onLayout`](view.md#onlayout) property instead.
+
+### measureInWindow(callback)
+
+Determines the location of the given view in the window and returns the values via an async callback. If the React root view is embedded in another native view, this will give you the absolute coordinates. If successful, the callback will be called with the following arguments:
+
+- x
+- y
+- width
+- height
+
+### measureLayout(relativeToNativeComponentRef, onSuccess, onFail)
+
+Like `measure()`, but measures the view relative to an ancestor, specified with `relativeToNativeComponentRef` reference. This means that the returned coordinates are relative to the origin `x`, `y` of the ancestor view.
+
+:::note
+This method can also be called with a `relativeToNativeNode` handler (instead of reference), but this variant is obsolete with the new architecture.
+:::
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=measureLayout%20example&supportedPlatforms=android,ios&ext=js
+import {useEffect, useRef, useState} from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+
+const App = () => {
+  const textContainerRef = useRef(null);
+  const textRef = useRef(null);
+  const [measure, setMeasure] = useState(null);
+
+  useEffect(() => {
+    if (textRef.current && textContainerRef.current) {
+      textRef.current.measureLayout(
+        textContainerRef.current,
+        (left, top, width, height) => {
+          setMeasure({left, top, width, height});
+        },
+      );
+    }
+  }, [measure]);
+
+  return (
+    <View style={styles.container}>
+      <View ref={textContainerRef} style={styles.textContainer}>
+        <Text ref={textRef}>Where am I? (relative to the text container)</Text>
+      </View>
+      <Text style={styles.measure}>{JSON.stringify(measure)}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  textContainer: {
+    backgroundColor: '#61dafb',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 12,
+  },
+  measure: {
+    textAlign: 'center',
+    padding: 12,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=measureLayout%20example&ext=tsx
+import {useEffect, useRef, useState} from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+
+type Measurements = {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+};
+
+const App = () => {
+  const textContainerRef = useRef<View>(null);
+  const textRef = useRef<Text>(null);
+  const [measure, setMeasure] = useState<Measurements | null>(null);
+
+  useEffect(() => {
+    if (textRef.current && textContainerRef.current) {
+      textRef.current?.measureLayout(
+        textContainerRef.current,
+        (left, top, width, height) => {
+          setMeasure({left, top, width, height});
+        },
+        () => {
+          console.error('measurement failed');
+        },
+      );
+    }
+  }, [measure]);
+
+  return (
+    <View style={styles.container}>
+      <View ref={textContainerRef} style={styles.textContainer}>
+        <Text ref={textRef}>Where am I? (relative to the text container)</Text>
+      </View>
+      <Text style={styles.measure}>{JSON.stringify(measure)}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  textContainer: {
+    backgroundColor: '#61dafb',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 12,
+  },
+  measure: {
+    textAlign: 'center',
+    padding: 12,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### focus()
+
+Requests focus for the given input or view. The exact behavior triggered will depend on the platform and type of view.
+
+### blur()
+
+Removes focus from an input or view. This is the opposite of `focus()`.
diff --git a/website/versioned_docs/version-0.86/legacy/native-components-android.md b/website/versioned_docs/version-0.86/legacy/native-components-android.md
index 9443d854c53..53d9854dca8 100644
--- a/website/versioned_docs/version-0.86/legacy/native-components-android.md
+++ b/website/versioned_docs/version-0.86/legacy/native-components-android.md
@@ -1,873 +1,873 @@
----
-id: native-components-android
-title: Android Native UI Components
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-import NativeDeprecated from '../the-new-architecture/\_markdown_native_deprecation.mdx'
-
-<NativeDeprecated />
-
-There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application.
-
-Like the native module guide, this too is a more advanced guide that assumes you are somewhat familiar with Android SDK programming. This guide will show you how to build a native UI component, walking you through the implementation of a subset of the existing `ImageView` component available in the core React Native library.
-
-:::info
-You can also setup local library containing native component with one command. Read the guide to [Local libraries setup](local-library-setup) for more details.
-:::
-
-## ImageView example
-
-For this example we are going to walk through the implementation requirements to allow the use of ImageViews in JavaScript.
-
-Native views are created and manipulated by extending `ViewManager` or more commonly `SimpleViewManager` . A `SimpleViewManager` is convenient in this case because it applies common properties such as background color, opacity, and Flexbox layout.
-
-These subclasses are essentially singletons - only one instance of each is created by the bridge. They send native views to the `NativeViewHierarchyManager`, which delegates back to them to set and update the properties of the views as necessary. The `ViewManagers` are also typically the delegates for the views, sending events back to JavaScript via the bridge.
-
-To send a view:
-
-1. Create the ViewManager subclass.
-2. Implement the `createViewInstance` method
-3. Expose view property setters using `@ReactProp` (or `@ReactPropGroup`) annotation
-4. Register the manager in `createViewManagers` of the applications package.
-5. Implement the JavaScript module
-
-### 1. Create the `ViewManager` subclass
-
-In this example we create view manager class `ReactImageManager` that extends `SimpleViewManager` of type `ReactImageView`. `ReactImageView` is the type of object managed by the manager, this will be the custom native view. Name returned by `getName` is used to reference the native view type from JavaScript.
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-class ReactImageManager(
-    private val callerContext: ReactApplicationContext
-) : SimpleViewManager<ReactImageView>() {
-
-  override fun getName() = REACT_CLASS
-
-  companion object {
-    const val REACT_CLASS = "RCTImageView"
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-public class ReactImageManager extends SimpleViewManager<ReactImageView> {
-
-  public static final String REACT_CLASS = "RCTImageView";
-  ReactApplicationContext mCallerContext;
-
-  public ReactImageManager(ReactApplicationContext reactContext) {
-    mCallerContext = reactContext;
-  }
-
-  @Override
-  public String getName() {
-    return REACT_CLASS;
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 2. Implement method `createViewInstance`
-
-Views are created in the `createViewInstance` method, the view should initialize itself in its default state, any properties will be set via a follow up call to `updateView.`
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-  override fun createViewInstance(context: ThemedReactContext) =
-      ReactImageView(context, Fresco.newDraweeControllerBuilder(), null, callerContext)
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-  @Override
-  public ReactImageView createViewInstance(ThemedReactContext context) {
-    return new ReactImageView(context, Fresco.newDraweeControllerBuilder(), null, mCallerContext);
-  }
-```
-
-</TabItem>
-</Tabs>
-
-### 3. Expose view property setters using `@ReactProp` (or `@ReactPropGroup`) annotation
-
-Properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with `@ReactProp` (or `@ReactPropGroup`). Setter method should take view to be updated (of the current view type) as a first argument and property value as a second argument. Setter should be public and not return a value (i.e. return type should be `void` in Java or `Unit` in Kotlin). Property type sent to JS is determined automatically based on the type of value argument of the setter. The following type of values are currently supported (in Java): `boolean`, `int`, `float`, `double`, `String`, `Boolean`, `Integer`, `ReadableArray`, `ReadableMap`. The corresponding types in Kotlin are `Boolean`, `Int`, `Float`, `Double`, `String`, `ReadableArray`, `ReadableMap`.
-
-Annotation `@ReactProp` has one obligatory argument `name` of type `String`. Name assigned to the `@ReactProp` annotation linked to the setter method is used to reference the property on JS side.
-
-Except from `name`, `@ReactProp` annotation may take following optional arguments: `defaultBoolean`, `defaultInt`, `defaultFloat`. Those arguments should be of the corresponding type (accordingly `boolean`, `int`, `float` in Java and `Boolean`, `Int`, `Float` in Kotlin) and the value provided will be passed to the setter method in case when the property that the setter is referencing has been removed from the component. Note that "default" values are only provided for primitive types, in case when setter is of some complex type, `null` will be provided as a default value in case when corresponding property gets removed.
-
-Setter declaration requirements for methods annotated with `@ReactPropGroup` are different than for `@ReactProp`, please refer to the `@ReactPropGroup` annotation class docs for more information about it. **IMPORTANT!** in ReactJS updating the property value will result in setter method call. Note that one of the ways we can update component is by removing properties that have been set before. In that case setter method will be called as well to notify view manager that property has changed. In that case "default" value will be provided (for primitive types "default" value can be specified using `defaultBoolean`, `defaultFloat`, etc. arguments of `@ReactProp` annotation, for complex types setter will be called with value set to `null`).
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-  @ReactProp(name = "src")
-  fun setSrc(view: ReactImageView, sources: ReadableArray?) {
-    view.setSource(sources)
-  }
-
-  @ReactProp(name = "borderRadius", defaultFloat = 0f)
-  override fun setBorderRadius(view: ReactImageView, borderRadius: Float) {
-    view.setBorderRadius(borderRadius)
-  }
-
-  @ReactProp(name = ViewProps.RESIZE_MODE)
-  fun setResizeMode(view: ReactImageView, resizeMode: String?) {
-    view.setScaleType(ImageResizeMode.toScaleType(resizeMode))
-  }
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-  @ReactProp(name = "src")
-  public void setSrc(ReactImageView view, @Nullable ReadableArray sources) {
-    view.setSource(sources);
-  }
-
-  @ReactProp(name = "borderRadius", defaultFloat = 0f)
-  public void setBorderRadius(ReactImageView view, float borderRadius) {
-    view.setBorderRadius(borderRadius);
-  }
-
-  @ReactProp(name = ViewProps.RESIZE_MODE)
-  public void setResizeMode(ReactImageView view, @Nullable String resizeMode) {
-    view.setScaleType(ImageResizeMode.toScaleType(resizeMode));
-  }
-```
-
-</TabItem>
-</Tabs>
-
-### 4. Register the `ViewManager`
-
-The final step is to register the ViewManager to the application, this happens in a similar way to [Native Modules](native-modules-android.md), via the applications package member function `createViewManagers`.
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-  override fun createViewManagers(
-      reactContext: ReactApplicationContext
-  ) = listOf(ReactImageManager(reactContext))
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-  @Override
-  public List<ViewManager> createViewManagers(
-                            ReactApplicationContext reactContext) {
-    return Arrays.<ViewManager>asList(
-      new ReactImageManager(reactContext)
-    );
-  }
-```
-
-</TabItem>
-</Tabs>
-
-### 5. Implement the JavaScript module
-
-The very final step is to create the JavaScript module that defines the interface layer between Java/Kotlin and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using TypeScript, Flow, or plain old comments).
-
-```tsx title="ImageView.tsx"
-import {requireNativeComponent} from 'react-native';
-
-/**
- * Composes `View`.
- *
- * - src: Array<{url: string}>
- * - borderRadius: number
- * - resizeMode: 'cover' | 'contain' | 'stretch'
- */
-export default requireNativeComponent('RCTImageView');
-```
-
-The `requireNativeComponent` function takes the name of the native view. Note that if your component needs to do anything more sophisticated (e.g. custom event handling), you should wrap the native component in another React component. This is illustrated in the `MyCustomView` example below.
-
-## Events
-
-So now we know how to expose native view components that we can control freely from JS, but how do we deal with events from the user, like pinch-zooms or panning? When a native event occurs the native code should issue an event to the JavaScript representation of the View, and the two views are linked with the value returned from the `getId()` method.
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-class MyCustomView(context: Context) : View(context) {
-  ...
-  fun onReceiveNativeEvent() {
-    val event = Arguments.createMap().apply {
-      putString("message", "MyMessage")
-    }
-    val reactContext = context as ReactContext
-    reactContext
-        .getJSModule(RCTEventEmitter::class.java)
-        .receiveEvent(id, "topChange", event)
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-class MyCustomView extends View {
-   ...
-   public void onReceiveNativeEvent() {
-      WritableMap event = Arguments.createMap();
-      event.putString("message", "MyMessage");
-      ReactContext reactContext = (ReactContext)getContext();
-      reactContext
-          .getJSModule(RCTEventEmitter.class)
-          .receiveEvent(getId(), "topChange", event);
-    }
-}
-```
-
-</TabItem>
-</Tabs>
-
-To map the `topChange` event name to the `onChange` callback prop in JavaScript, register it by overriding the `getExportedCustomBubblingEventTypeConstants` method in your `ViewManager`:
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin
-class ReactImageManager : SimpleViewManager<MyCustomView>() {
-  ...
-  override fun getExportedCustomBubblingEventTypeConstants(): Map<String, Any> {
-    return mapOf(
-      "topChange" to mapOf(
-        "phasedRegistrationNames" to mapOf(
-          "bubbled" to "onChange"
-        )
-      )
-    )
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java
-public class ReactImageManager extends SimpleViewManager<MyCustomView> {
-    ...
-    public Map getExportedCustomBubblingEventTypeConstants() {
-        return MapBuilder.builder().put(
-            "topChange",
-            MapBuilder.of(
-                "phasedRegistrationNames",
-                MapBuilder.of("bubbled", "onChange")
-            )
-        ).build();
-    }
-}
-```
-
-</TabItem>
-</Tabs>
-
-This callback is invoked with the raw event, which we typically process in the wrapper component to make a simpler API:
-
-```tsx {8-11,13-17} title="MyCustomView.tsx"
-import {useCallback} from 'react';
-import {requireNativeComponent} from 'react-native';
-
-const RCTMyCustomView = requireNativeComponent('RCTMyCustomView');
-
-export default function MyCustomView(props: {
-  // ...
-  /**
-   * Callback that is called continuously when the user is dragging the map.
-   */
-  onChangeMessage: (message: string) => unknown;
-}) {
-  const onChange = useCallback(
-    event => {
-      props.onChangeMessage?.(event.nativeEvent.message);
-    },
-    [props.onChangeMessage],
-  );
-
-  return <RCTMyCustomView {...props} onChange={onChange} />;
-}
-```
-
-## Integration with an Android Fragment example
-
-In order to integrate existing Native UI elements to your React Native app, you might need to use Android Fragments to give you a more granular control over your native component than returning a `View` from your `ViewManager`. You will need this if you want to add custom logic that is tied to your view with the help of [lifecycle methods](https://developer.android.com/guide/fragments/lifecycle), such as `onViewCreated`, `onPause`, `onResume`. The following steps will show you how to do it:
-
-### 1. Create an example custom view
-
-First, let's create a `CustomView` class which extends `FrameLayout` (the content of this view can be any view that you'd like to render)
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin title="CustomView.kt"
-// replace with your package
-package com.mypackage
-
-import android.content.Context
-import android.graphics.Color
-import android.widget.FrameLayout
-import android.widget.TextView
-
-class CustomView(context: Context) : FrameLayout(context) {
-  init {
-    // set padding and background color
-    setPadding(16,16,16,16)
-    setBackgroundColor(Color.parseColor("#5FD3F3"))
-
-    // add default text view
-    addView(TextView(context).apply {
-      text = "Welcome to Android Fragments with React Native."
-    })
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java title="CustomView.java"
-// replace with your package
-package com.mypackage;
-
-import android.content.Context;
-import android.graphics.Color;
-import android.widget.FrameLayout;
-import android.widget.ImageView;
-import android.widget.TextView;
-
-import androidx.annotation.NonNull;
-
-public class CustomView extends FrameLayout {
-  public CustomView(@NonNull Context context) {
-    super(context);
-    // set padding and background color
-    this.setPadding(16,16,16,16);
-    this.setBackgroundColor(Color.parseColor("#5FD3F3"));
-
-    // add default text view
-    TextView text = new TextView(context);
-    text.setText("Welcome to Android Fragments with React Native.");
-    this.addView(text);
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 2. Create a `Fragment`
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin title="MyFragment.kt"
-// replace with your package
-package com.mypackage
-
-import android.os.Bundle
-import android.view.LayoutInflater
-import android.view.View
-import android.view.ViewGroup
-import androidx.fragment.app.Fragment
-
-// replace with your view's import
-import com.mypackage.CustomView
-
-class MyFragment : Fragment() {
-  private lateinit var customView: CustomView
-
-  override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
-    super.onCreateView(inflater, container, savedInstanceState)
-    customView = CustomView(requireNotNull(context))
-    return customView // this CustomView could be any view that you want to render
-  }
-
-  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
-    super.onViewCreated(view, savedInstanceState)
-    // do any logic that should happen in an `onCreate` method, e.g:
-    // customView.onCreate(savedInstanceState);
-  }
-
-  override fun onPause() {
-    super.onPause()
-    // do any logic that should happen in an `onPause` method
-    // e.g.: customView.onPause();
-  }
-
-  override fun onResume() {
-    super.onResume()
-    // do any logic that should happen in an `onResume` method
-    // e.g.: customView.onResume();
-  }
-
-  override fun onDestroy() {
-    super.onDestroy()
-    // do any logic that should happen in an `onDestroy` method
-    // e.g.: customView.onDestroy();
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java title="MyFragment.java"
-// replace with your package
-package com.mypackage;
-
-import android.os.Bundle;
-import android.view.LayoutInflater;
-import android.view.View;
-import android.view.ViewGroup;
-import androidx.fragment.app.Fragment;
-
-// replace with your view's import
-import com.mypackage.CustomView;
-
-public class MyFragment extends Fragment {
-    CustomView customView;
-
-    @Override
-    public View onCreateView(LayoutInflater inflater, ViewGroup parent, Bundle savedInstanceState) {
-        super.onCreateView(inflater, parent, savedInstanceState);
-        customView = new CustomView(this.getContext());
-        return customView; // this CustomView could be any view that you want to render
-    }
-
-    @Override
-    public void onViewCreated(View view, Bundle savedInstanceState) {
-        super.onViewCreated(view, savedInstanceState);
-        // do any logic that should happen in an `onCreate` method, e.g:
-        // customView.onCreate(savedInstanceState);
-    }
-
-    @Override
-    public void onPause() {
-        super.onPause();
-        // do any logic that should happen in an `onPause` method
-        // e.g.: customView.onPause();
-    }
-
-    @Override
-    public void onResume() {
-        super.onResume();
-       // do any logic that should happen in an `onResume` method
-       // e.g.: customView.onResume();
-    }
-
-    @Override
-    public void onDestroy() {
-        super.onDestroy();
-        // do any logic that should happen in an `onDestroy` method
-        // e.g.: customView.onDestroy();
-    }
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 3. Create the `ViewManager` subclass
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin title="MyViewManager.kt"
-// replace with your package
-package com.mypackage
-
-import android.view.Choreographer
-import android.view.View
-import android.view.ViewGroup
-import android.widget.FrameLayout
-import androidx.fragment.app.FragmentActivity
-import com.facebook.react.bridge.ReactApplicationContext
-import com.facebook.react.bridge.ReadableArray
-import com.facebook.react.uimanager.ThemedReactContext
-import com.facebook.react.uimanager.ViewGroupManager
-import com.facebook.react.uimanager.annotations.ReactPropGroup
-
-class MyViewManager(
-    private val reactContext: ReactApplicationContext
-) : ViewGroupManager<FrameLayout>() {
-  private var propWidth: Int? = null
-  private var propHeight: Int? = null
-
-  override fun getName() = REACT_CLASS
-
-  /**
-   * Return a FrameLayout which will later hold the Fragment
-   */
-  override fun createViewInstance(reactContext: ThemedReactContext) =
-      FrameLayout(reactContext)
-
-  /**
-   * Map the "create" command to an integer
-   */
-  override fun getCommandsMap() = mapOf("create" to COMMAND_CREATE)
-
-  /**
-   * Handle "create" command (called from JS) and call createFragment method
-   */
-  override fun receiveCommand(
-      root: FrameLayout,
-      commandId: String,
-      args: ReadableArray?
-  ) {
-    super.receiveCommand(root, commandId, args)
-    val reactNativeViewId = requireNotNull(args).getInt(0)
-
-    when (commandId.toInt()) {
-      COMMAND_CREATE -> createFragment(root, reactNativeViewId)
-    }
-  }
-
-  @ReactPropGroup(names = ["width", "height"], customType = "Style")
-  fun setStyle(view: FrameLayout, index: Int, value: Int) {
-    if (index == 0) propWidth = value
-    if (index == 1) propHeight = value
-  }
-
-  /**
-   * Replace your React Native view with a custom fragment
-   */
-  fun createFragment(root: FrameLayout, reactNativeViewId: Int) {
-    val parentView = root.findViewById<ViewGroup>(reactNativeViewId)
-    setupLayout(parentView)
-
-    val myFragment = MyFragment()
-    val activity = reactContext.currentActivity as FragmentActivity
-    activity.supportFragmentManager
-        .beginTransaction()
-        .replace(reactNativeViewId, myFragment, reactNativeViewId.toString())
-        .commit()
-  }
-
-  fun setupLayout(view: View) {
-    Choreographer.getInstance().postFrameCallback(object: Choreographer.FrameCallback {
-      override fun doFrame(frameTimeNanos: Long) {
-        manuallyLayoutChildren(view)
-        view.viewTreeObserver.dispatchOnGlobalLayout()
-        Choreographer.getInstance().postFrameCallback(this)
-      }
-    })
-  }
-
-  /**
-   * Layout all children properly
-   */
-  private fun manuallyLayoutChildren(view: View) {
-    // propWidth and propHeight coming from react-native props
-    val width = requireNotNull(propWidth)
-    val height = requireNotNull(propHeight)
-
-    view.measure(
-        View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
-        View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY))
-
-    view.layout(0, 0, width, height)
-  }
-
-  companion object {
-    private const val REACT_CLASS = "MyViewManager"
-    private const val COMMAND_CREATE = 1
-  }
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java title="MyViewManager.java"
-// replace with your package
-package com.mypackage;
-
-import android.view.Choreographer;
-import android.view.View;
-import android.view.ViewGroup;
-import android.widget.FrameLayout;
-
-import androidx.annotation.NonNull;
-import androidx.annotation.Nullable;
-import androidx.fragment.app.FragmentActivity;
-
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.ReadableArray;
-import com.facebook.react.common.MapBuilder;
-import com.facebook.react.uimanager.annotations.ReactProp;
-import com.facebook.react.uimanager.annotations.ReactPropGroup;
-import com.facebook.react.uimanager.ViewGroupManager;
-import com.facebook.react.uimanager.ThemedReactContext;
-
-import java.util.Map;
-
-public class MyViewManager extends ViewGroupManager<FrameLayout> {
-
-  public static final String REACT_CLASS = "MyViewManager";
-  public final int COMMAND_CREATE = 1;
-  private int propWidth;
-  private int propHeight;
-
-  ReactApplicationContext reactContext;
-
-  public MyViewManager(ReactApplicationContext reactContext) {
-    this.reactContext = reactContext;
-  }
-
-  @Override
-  public String getName() {
-    return REACT_CLASS;
-  }
-
-  /**
-   * Return a FrameLayout which will later hold the Fragment
-   */
-  @Override
-  public FrameLayout createViewInstance(ThemedReactContext reactContext) {
-    return new FrameLayout(reactContext);
-  }
-
-  /**
-   * Map the "create" command to an integer
-   */
-  @Nullable
-  @Override
-  public Map<String, Integer> getCommandsMap() {
-    return MapBuilder.of("create", COMMAND_CREATE);
-  }
-
-  /**
-   * Handle "create" command (called from JS) and call createFragment method
-   */
-  @Override
-  public void receiveCommand(
-    @NonNull FrameLayout root,
-    String commandId,
-    @Nullable ReadableArray args
-  ) {
-    super.receiveCommand(root, commandId, args);
-    int reactNativeViewId = args.getInt(0);
-    int commandIdInt = Integer.parseInt(commandId);
-
-    switch (commandIdInt) {
-      case COMMAND_CREATE:
-        createFragment(root, reactNativeViewId);
-        break;
-      default: {}
-    }
-  }
-
-  @ReactPropGroup(names = {"width", "height"}, customType = "Style")
-  public void setStyle(FrameLayout view, int index, Integer value) {
-    if (index == 0) {
-      propWidth = value;
-    }
-
-    if (index == 1) {
-      propHeight = value;
-    }
-  }
-
-  /**
-   * Replace your React Native view with a custom fragment
-   */
-  public void createFragment(FrameLayout root, int reactNativeViewId) {
-    ViewGroup parentView = (ViewGroup) root.findViewById(reactNativeViewId);
-    setupLayout(parentView);
-
-    final MyFragment myFragment = new MyFragment();
-    FragmentActivity activity = (FragmentActivity) reactContext.getCurrentActivity();
-    activity.getSupportFragmentManager()
-            .beginTransaction()
-            .replace(reactNativeViewId, myFragment, String.valueOf(reactNativeViewId))
-            .commit();
-  }
-
-  public void setupLayout(View view) {
-    Choreographer.getInstance().postFrameCallback(new Choreographer.FrameCallback() {
-      @Override
-      public void doFrame(long frameTimeNanos) {
-        manuallyLayoutChildren(view);
-        view.getViewTreeObserver().dispatchOnGlobalLayout();
-        Choreographer.getInstance().postFrameCallback(this);
-      }
-    });
-  }
-
-  /**
-   * Layout all children properly
-   */
-  public void manuallyLayoutChildren(View view) {
-      // propWidth and propHeight coming from react-native props
-      int width = propWidth;
-      int height = propHeight;
-
-      view.measure(
-              View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
-              View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY));
-
-      view.layout(0, 0, width, height);
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 4. Register the `ViewManager`
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin title="MyPackage.kt"
-// replace with your package
-package com.mypackage
-
-import com.facebook.react.ReactPackage
-import com.facebook.react.bridge.ReactApplicationContext
-import com.facebook.react.uimanager.ViewManager
-
-class MyPackage : ReactPackage {
-  ...
-  override fun createViewManagers(
-      reactContext: ReactApplicationContext
-  ) = listOf(MyViewManager(reactContext))
-}
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java title="MyPackage.java"
-// replace with your package
-package com.mypackage;
-
-import com.facebook.react.ReactPackage;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.uimanager.ViewManager;
-
-import java.util.Arrays;
-import java.util.List;
-
-public class MyPackage implements ReactPackage {
-
-   @Override
-   public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
-       return Arrays.<ViewManager>asList(
-            new MyViewManager(reactContext)
-       );
-   }
-
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 5. Register the `Package`
-
-<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="kotlin">
-
-```kotlin title="MainApplication.kt"
-override fun getPackages(): List<ReactPackage> =
-    PackageList(this).packages.apply {
-        // Packages that cannot be autolinked yet can be added manually here, for example:
-        // add(MyReactNativePackage())
-        add(MyAppPackage())
-    }
-```
-
-</TabItem>
-<TabItem value="java">
-
-```java title="MainApplication.java"
-@Override
-protected List<ReactPackage> getPackages() {
-    List<ReactPackage> packages = new PackageList(this).getPackages();
-    // Packages that cannot be autolinked yet can be added manually here, for example:
-    // packages.add(new MyReactNativePackage());
-    packages.add(new MyAppPackage());
-    return packages;
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 6. Implement the JavaScript module
-
-I. Start with custom View manager:
-
-```tsx title="MyViewManager.tsx"
-import {requireNativeComponent} from 'react-native';
-
-export const MyViewManager =
-  requireNativeComponent('MyViewManager');
-```
-
-II. Then implement custom View calling the `create` method:
-
-```tsx title="MyView.tsx"
-import React, {useEffect, useRef} from 'react';
-import {
-  PixelRatio,
-  UIManager,
-  findNodeHandle,
-} from 'react-native';
-
-import {MyViewManager} from './my-view-manager';
-
-const createFragment = viewId =>
-  UIManager.dispatchViewManagerCommand(
-    viewId,
-    // we are calling the 'create' command
-    UIManager.MyViewManager.Commands.create.toString(),
-    [viewId],
-  );
-
-export const MyView = () => {
-  const ref = useRef(null);
-
-  useEffect(() => {
-    const viewId = findNodeHandle(ref.current);
-    createFragment(viewId);
-  }, []);
-
-  return (
-    <MyViewManager
-      style={{
-        // converts dpi to px, provide desired height
-        height: PixelRatio.getPixelSizeForLayoutSize(200),
-        // converts dpi to px, provide desired width
-        width: PixelRatio.getPixelSizeForLayoutSize(200),
-      }}
-      ref={ref}
-    />
-  );
-};
-```
-
-If you want to expose property setters using `@ReactProp` (or `@ReactPropGroup`) annotation see the [ImageView example](#imageview-example) above.
+---
+id: native-components-android
+title: Android Native UI Components
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+import NativeDeprecated from '../the-new-architecture/\_markdown_native_deprecation.mdx'
+
+<NativeDeprecated />
+
+There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application.
+
+Like the native module guide, this too is a more advanced guide that assumes you are somewhat familiar with Android SDK programming. This guide will show you how to build a native UI component, walking you through the implementation of a subset of the existing `ImageView` component available in the core React Native library.
+
+:::info
+You can also setup local library containing native component with one command. Read the guide to [Local libraries setup](local-library-setup) for more details.
+:::
+
+## ImageView example
+
+For this example we are going to walk through the implementation requirements to allow the use of ImageViews in JavaScript.
+
+Native views are created and manipulated by extending `ViewManager` or more commonly `SimpleViewManager` . A `SimpleViewManager` is convenient in this case because it applies common properties such as background color, opacity, and Flexbox layout.
+
+These subclasses are essentially singletons - only one instance of each is created by the bridge. They send native views to the `NativeViewHierarchyManager`, which delegates back to them to set and update the properties of the views as necessary. The `ViewManagers` are also typically the delegates for the views, sending events back to JavaScript via the bridge.
+
+To send a view:
+
+1. Create the ViewManager subclass.
+2. Implement the `createViewInstance` method
+3. Expose view property setters using `@ReactProp` (or `@ReactPropGroup`) annotation
+4. Register the manager in `createViewManagers` of the applications package.
+5. Implement the JavaScript module
+
+### 1. Create the `ViewManager` subclass
+
+In this example we create view manager class `ReactImageManager` that extends `SimpleViewManager` of type `ReactImageView`. `ReactImageView` is the type of object managed by the manager, this will be the custom native view. Name returned by `getName` is used to reference the native view type from JavaScript.
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+class ReactImageManager(
+    private val callerContext: ReactApplicationContext
+) : SimpleViewManager<ReactImageView>() {
+
+  override fun getName() = REACT_CLASS
+
+  companion object {
+    const val REACT_CLASS = "RCTImageView"
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+public class ReactImageManager extends SimpleViewManager<ReactImageView> {
+
+  public static final String REACT_CLASS = "RCTImageView";
+  ReactApplicationContext mCallerContext;
+
+  public ReactImageManager(ReactApplicationContext reactContext) {
+    mCallerContext = reactContext;
+  }
+
+  @Override
+  public String getName() {
+    return REACT_CLASS;
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 2. Implement method `createViewInstance`
+
+Views are created in the `createViewInstance` method, the view should initialize itself in its default state, any properties will be set via a follow up call to `updateView.`
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+  override fun createViewInstance(context: ThemedReactContext) =
+      ReactImageView(context, Fresco.newDraweeControllerBuilder(), null, callerContext)
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+  @Override
+  public ReactImageView createViewInstance(ThemedReactContext context) {
+    return new ReactImageView(context, Fresco.newDraweeControllerBuilder(), null, mCallerContext);
+  }
+```
+
+</TabItem>
+</Tabs>
+
+### 3. Expose view property setters using `@ReactProp` (or `@ReactPropGroup`) annotation
+
+Properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with `@ReactProp` (or `@ReactPropGroup`). Setter method should take view to be updated (of the current view type) as a first argument and property value as a second argument. Setter should be public and not return a value (i.e. return type should be `void` in Java or `Unit` in Kotlin). Property type sent to JS is determined automatically based on the type of value argument of the setter. The following type of values are currently supported (in Java): `boolean`, `int`, `float`, `double`, `String`, `Boolean`, `Integer`, `ReadableArray`, `ReadableMap`. The corresponding types in Kotlin are `Boolean`, `Int`, `Float`, `Double`, `String`, `ReadableArray`, `ReadableMap`.
+
+Annotation `@ReactProp` has one obligatory argument `name` of type `String`. Name assigned to the `@ReactProp` annotation linked to the setter method is used to reference the property on JS side.
+
+Except from `name`, `@ReactProp` annotation may take following optional arguments: `defaultBoolean`, `defaultInt`, `defaultFloat`. Those arguments should be of the corresponding type (accordingly `boolean`, `int`, `float` in Java and `Boolean`, `Int`, `Float` in Kotlin) and the value provided will be passed to the setter method in case when the property that the setter is referencing has been removed from the component. Note that "default" values are only provided for primitive types, in case when setter is of some complex type, `null` will be provided as a default value in case when corresponding property gets removed.
+
+Setter declaration requirements for methods annotated with `@ReactPropGroup` are different than for `@ReactProp`, please refer to the `@ReactPropGroup` annotation class docs for more information about it. **IMPORTANT!** in ReactJS updating the property value will result in setter method call. Note that one of the ways we can update component is by removing properties that have been set before. In that case setter method will be called as well to notify view manager that property has changed. In that case "default" value will be provided (for primitive types "default" value can be specified using `defaultBoolean`, `defaultFloat`, etc. arguments of `@ReactProp` annotation, for complex types setter will be called with value set to `null`).
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+  @ReactProp(name = "src")
+  fun setSrc(view: ReactImageView, sources: ReadableArray?) {
+    view.setSource(sources)
+  }
+
+  @ReactProp(name = "borderRadius", defaultFloat = 0f)
+  override fun setBorderRadius(view: ReactImageView, borderRadius: Float) {
+    view.setBorderRadius(borderRadius)
+  }
+
+  @ReactProp(name = ViewProps.RESIZE_MODE)
+  fun setResizeMode(view: ReactImageView, resizeMode: String?) {
+    view.setScaleType(ImageResizeMode.toScaleType(resizeMode))
+  }
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+  @ReactProp(name = "src")
+  public void setSrc(ReactImageView view, @Nullable ReadableArray sources) {
+    view.setSource(sources);
+  }
+
+  @ReactProp(name = "borderRadius", defaultFloat = 0f)
+  public void setBorderRadius(ReactImageView view, float borderRadius) {
+    view.setBorderRadius(borderRadius);
+  }
+
+  @ReactProp(name = ViewProps.RESIZE_MODE)
+  public void setResizeMode(ReactImageView view, @Nullable String resizeMode) {
+    view.setScaleType(ImageResizeMode.toScaleType(resizeMode));
+  }
+```
+
+</TabItem>
+</Tabs>
+
+### 4. Register the `ViewManager`
+
+The final step is to register the ViewManager to the application, this happens in a similar way to [Native Modules](native-modules-android.md), via the applications package member function `createViewManagers`.
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+  override fun createViewManagers(
+      reactContext: ReactApplicationContext
+  ) = listOf(ReactImageManager(reactContext))
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+  @Override
+  public List<ViewManager> createViewManagers(
+                            ReactApplicationContext reactContext) {
+    return Arrays.<ViewManager>asList(
+      new ReactImageManager(reactContext)
+    );
+  }
+```
+
+</TabItem>
+</Tabs>
+
+### 5. Implement the JavaScript module
+
+The very final step is to create the JavaScript module that defines the interface layer between Java/Kotlin and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using TypeScript, Flow, or plain old comments).
+
+```tsx title="ImageView.tsx"
+import {requireNativeComponent} from 'react-native';
+
+/**
+ * Composes `View`.
+ *
+ * - src: Array<{url: string}>
+ * - borderRadius: number
+ * - resizeMode: 'cover' | 'contain' | 'stretch'
+ */
+export default requireNativeComponent('RCTImageView');
+```
+
+The `requireNativeComponent` function takes the name of the native view. Note that if your component needs to do anything more sophisticated (e.g. custom event handling), you should wrap the native component in another React component. This is illustrated in the `MyCustomView` example below.
+
+## Events
+
+So now we know how to expose native view components that we can control freely from JS, but how do we deal with events from the user, like pinch-zooms or panning? When a native event occurs the native code should issue an event to the JavaScript representation of the View, and the two views are linked with the value returned from the `getId()` method.
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+class MyCustomView(context: Context) : View(context) {
+  ...
+  fun onReceiveNativeEvent() {
+    val event = Arguments.createMap().apply {
+      putString("message", "MyMessage")
+    }
+    val reactContext = context as ReactContext
+    reactContext
+        .getJSModule(RCTEventEmitter::class.java)
+        .receiveEvent(id, "topChange", event)
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+class MyCustomView extends View {
+   ...
+   public void onReceiveNativeEvent() {
+      WritableMap event = Arguments.createMap();
+      event.putString("message", "MyMessage");
+      ReactContext reactContext = (ReactContext)getContext();
+      reactContext
+          .getJSModule(RCTEventEmitter.class)
+          .receiveEvent(getId(), "topChange", event);
+    }
+}
+```
+
+</TabItem>
+</Tabs>
+
+To map the `topChange` event name to the `onChange` callback prop in JavaScript, register it by overriding the `getExportedCustomBubblingEventTypeConstants` method in your `ViewManager`:
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+class ReactImageManager : SimpleViewManager<MyCustomView>() {
+  ...
+  override fun getExportedCustomBubblingEventTypeConstants(): Map<String, Any> {
+    return mapOf(
+      "topChange" to mapOf(
+        "phasedRegistrationNames" to mapOf(
+          "bubbled" to "onChange"
+        )
+      )
+    )
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java
+public class ReactImageManager extends SimpleViewManager<MyCustomView> {
+    ...
+    public Map getExportedCustomBubblingEventTypeConstants() {
+        return MapBuilder.builder().put(
+            "topChange",
+            MapBuilder.of(
+                "phasedRegistrationNames",
+                MapBuilder.of("bubbled", "onChange")
+            )
+        ).build();
+    }
+}
+```
+
+</TabItem>
+</Tabs>
+
+This callback is invoked with the raw event, which we typically process in the wrapper component to make a simpler API:
+
+```tsx {8-11,13-17} title="MyCustomView.tsx"
+import {useCallback} from 'react';
+import {requireNativeComponent} from 'react-native';
+
+const RCTMyCustomView = requireNativeComponent('RCTMyCustomView');
+
+export default function MyCustomView(props: {
+  // ...
+  /**
+   * Callback that is called continuously when the user is dragging the map.
+   */
+  onChangeMessage: (message: string) => unknown;
+}) {
+  const onChange = useCallback(
+    event => {
+      props.onChangeMessage?.(event.nativeEvent.message);
+    },
+    [props.onChangeMessage],
+  );
+
+  return <RCTMyCustomView {...props} onChange={onChange} />;
+}
+```
+
+## Integration with an Android Fragment example
+
+In order to integrate existing Native UI elements to your React Native app, you might need to use Android Fragments to give you a more granular control over your native component than returning a `View` from your `ViewManager`. You will need this if you want to add custom logic that is tied to your view with the help of [lifecycle methods](https://developer.android.com/guide/fragments/lifecycle), such as `onViewCreated`, `onPause`, `onResume`. The following steps will show you how to do it:
+
+### 1. Create an example custom view
+
+First, let's create a `CustomView` class which extends `FrameLayout` (the content of this view can be any view that you'd like to render)
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin title="CustomView.kt"
+// replace with your package
+package com.mypackage
+
+import android.content.Context
+import android.graphics.Color
+import android.widget.FrameLayout
+import android.widget.TextView
+
+class CustomView(context: Context) : FrameLayout(context) {
+  init {
+    // set padding and background color
+    setPadding(16,16,16,16)
+    setBackgroundColor(Color.parseColor("#5FD3F3"))
+
+    // add default text view
+    addView(TextView(context).apply {
+      text = "Welcome to Android Fragments with React Native."
+    })
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java title="CustomView.java"
+// replace with your package
+package com.mypackage;
+
+import android.content.Context;
+import android.graphics.Color;
+import android.widget.FrameLayout;
+import android.widget.ImageView;
+import android.widget.TextView;
+
+import androidx.annotation.NonNull;
+
+public class CustomView extends FrameLayout {
+  public CustomView(@NonNull Context context) {
+    super(context);
+    // set padding and background color
+    this.setPadding(16,16,16,16);
+    this.setBackgroundColor(Color.parseColor("#5FD3F3"));
+
+    // add default text view
+    TextView text = new TextView(context);
+    text.setText("Welcome to Android Fragments with React Native.");
+    this.addView(text);
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 2. Create a `Fragment`
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin title="MyFragment.kt"
+// replace with your package
+package com.mypackage
+
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import androidx.fragment.app.Fragment
+
+// replace with your view's import
+import com.mypackage.CustomView
+
+class MyFragment : Fragment() {
+  private lateinit var customView: CustomView
+
+  override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
+    super.onCreateView(inflater, container, savedInstanceState)
+    customView = CustomView(requireNotNull(context))
+    return customView // this CustomView could be any view that you want to render
+  }
+
+  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+    super.onViewCreated(view, savedInstanceState)
+    // do any logic that should happen in an `onCreate` method, e.g:
+    // customView.onCreate(savedInstanceState);
+  }
+
+  override fun onPause() {
+    super.onPause()
+    // do any logic that should happen in an `onPause` method
+    // e.g.: customView.onPause();
+  }
+
+  override fun onResume() {
+    super.onResume()
+    // do any logic that should happen in an `onResume` method
+    // e.g.: customView.onResume();
+  }
+
+  override fun onDestroy() {
+    super.onDestroy()
+    // do any logic that should happen in an `onDestroy` method
+    // e.g.: customView.onDestroy();
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java title="MyFragment.java"
+// replace with your package
+package com.mypackage;
+
+import android.os.Bundle;
+import android.view.LayoutInflater;
+import android.view.View;
+import android.view.ViewGroup;
+import androidx.fragment.app.Fragment;
+
+// replace with your view's import
+import com.mypackage.CustomView;
+
+public class MyFragment extends Fragment {
+    CustomView customView;
+
+    @Override
+    public View onCreateView(LayoutInflater inflater, ViewGroup parent, Bundle savedInstanceState) {
+        super.onCreateView(inflater, parent, savedInstanceState);
+        customView = new CustomView(this.getContext());
+        return customView; // this CustomView could be any view that you want to render
+    }
+
+    @Override
+    public void onViewCreated(View view, Bundle savedInstanceState) {
+        super.onViewCreated(view, savedInstanceState);
+        // do any logic that should happen in an `onCreate` method, e.g:
+        // customView.onCreate(savedInstanceState);
+    }
+
+    @Override
+    public void onPause() {
+        super.onPause();
+        // do any logic that should happen in an `onPause` method
+        // e.g.: customView.onPause();
+    }
+
+    @Override
+    public void onResume() {
+        super.onResume();
+       // do any logic that should happen in an `onResume` method
+       // e.g.: customView.onResume();
+    }
+
+    @Override
+    public void onDestroy() {
+        super.onDestroy();
+        // do any logic that should happen in an `onDestroy` method
+        // e.g.: customView.onDestroy();
+    }
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 3. Create the `ViewManager` subclass
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin title="MyViewManager.kt"
+// replace with your package
+package com.mypackage
+
+import android.view.Choreographer
+import android.view.View
+import android.view.ViewGroup
+import android.widget.FrameLayout
+import androidx.fragment.app.FragmentActivity
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.annotations.ReactPropGroup
+
+class MyViewManager(
+    private val reactContext: ReactApplicationContext
+) : ViewGroupManager<FrameLayout>() {
+  private var propWidth: Int? = null
+  private var propHeight: Int? = null
+
+  override fun getName() = REACT_CLASS
+
+  /**
+   * Return a FrameLayout which will later hold the Fragment
+   */
+  override fun createViewInstance(reactContext: ThemedReactContext) =
+      FrameLayout(reactContext)
+
+  /**
+   * Map the "create" command to an integer
+   */
+  override fun getCommandsMap() = mapOf("create" to COMMAND_CREATE)
+
+  /**
+   * Handle "create" command (called from JS) and call createFragment method
+   */
+  override fun receiveCommand(
+      root: FrameLayout,
+      commandId: String,
+      args: ReadableArray?
+  ) {
+    super.receiveCommand(root, commandId, args)
+    val reactNativeViewId = requireNotNull(args).getInt(0)
+
+    when (commandId.toInt()) {
+      COMMAND_CREATE -> createFragment(root, reactNativeViewId)
+    }
+  }
+
+  @ReactPropGroup(names = ["width", "height"], customType = "Style")
+  fun setStyle(view: FrameLayout, index: Int, value: Int) {
+    if (index == 0) propWidth = value
+    if (index == 1) propHeight = value
+  }
+
+  /**
+   * Replace your React Native view with a custom fragment
+   */
+  fun createFragment(root: FrameLayout, reactNativeViewId: Int) {
+    val parentView = root.findViewById<ViewGroup>(reactNativeViewId)
+    setupLayout(parentView)
+
+    val myFragment = MyFragment()
+    val activity = reactContext.currentActivity as FragmentActivity
+    activity.supportFragmentManager
+        .beginTransaction()
+        .replace(reactNativeViewId, myFragment, reactNativeViewId.toString())
+        .commit()
+  }
+
+  fun setupLayout(view: View) {
+    Choreographer.getInstance().postFrameCallback(object: Choreographer.FrameCallback {
+      override fun doFrame(frameTimeNanos: Long) {
+        manuallyLayoutChildren(view)
+        view.viewTreeObserver.dispatchOnGlobalLayout()
+        Choreographer.getInstance().postFrameCallback(this)
+      }
+    })
+  }
+
+  /**
+   * Layout all children properly
+   */
+  private fun manuallyLayoutChildren(view: View) {
+    // propWidth and propHeight coming from react-native props
+    val width = requireNotNull(propWidth)
+    val height = requireNotNull(propHeight)
+
+    view.measure(
+        View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
+        View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY))
+
+    view.layout(0, 0, width, height)
+  }
+
+  companion object {
+    private const val REACT_CLASS = "MyViewManager"
+    private const val COMMAND_CREATE = 1
+  }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java title="MyViewManager.java"
+// replace with your package
+package com.mypackage;
+
+import android.view.Choreographer;
+import android.view.View;
+import android.view.ViewGroup;
+import android.widget.FrameLayout;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+import androidx.fragment.app.FragmentActivity;
+
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReadableArray;
+import com.facebook.react.common.MapBuilder;
+import com.facebook.react.uimanager.annotations.ReactProp;
+import com.facebook.react.uimanager.annotations.ReactPropGroup;
+import com.facebook.react.uimanager.ViewGroupManager;
+import com.facebook.react.uimanager.ThemedReactContext;
+
+import java.util.Map;
+
+public class MyViewManager extends ViewGroupManager<FrameLayout> {
+
+  public static final String REACT_CLASS = "MyViewManager";
+  public final int COMMAND_CREATE = 1;
+  private int propWidth;
+  private int propHeight;
+
+  ReactApplicationContext reactContext;
+
+  public MyViewManager(ReactApplicationContext reactContext) {
+    this.reactContext = reactContext;
+  }
+
+  @Override
+  public String getName() {
+    return REACT_CLASS;
+  }
+
+  /**
+   * Return a FrameLayout which will later hold the Fragment
+   */
+  @Override
+  public FrameLayout createViewInstance(ThemedReactContext reactContext) {
+    return new FrameLayout(reactContext);
+  }
+
+  /**
+   * Map the "create" command to an integer
+   */
+  @Nullable
+  @Override
+  public Map<String, Integer> getCommandsMap() {
+    return MapBuilder.of("create", COMMAND_CREATE);
+  }
+
+  /**
+   * Handle "create" command (called from JS) and call createFragment method
+   */
+  @Override
+  public void receiveCommand(
+    @NonNull FrameLayout root,
+    String commandId,
+    @Nullable ReadableArray args
+  ) {
+    super.receiveCommand(root, commandId, args);
+    int reactNativeViewId = args.getInt(0);
+    int commandIdInt = Integer.parseInt(commandId);
+
+    switch (commandIdInt) {
+      case COMMAND_CREATE:
+        createFragment(root, reactNativeViewId);
+        break;
+      default: {}
+    }
+  }
+
+  @ReactPropGroup(names = {"width", "height"}, customType = "Style")
+  public void setStyle(FrameLayout view, int index, Integer value) {
+    if (index == 0) {
+      propWidth = value;
+    }
+
+    if (index == 1) {
+      propHeight = value;
+    }
+  }
+
+  /**
+   * Replace your React Native view with a custom fragment
+   */
+  public void createFragment(FrameLayout root, int reactNativeViewId) {
+    ViewGroup parentView = (ViewGroup) root.findViewById(reactNativeViewId);
+    setupLayout(parentView);
+
+    final MyFragment myFragment = new MyFragment();
+    FragmentActivity activity = (FragmentActivity) reactContext.getCurrentActivity();
+    activity.getSupportFragmentManager()
+            .beginTransaction()
+            .replace(reactNativeViewId, myFragment, String.valueOf(reactNativeViewId))
+            .commit();
+  }
+
+  public void setupLayout(View view) {
+    Choreographer.getInstance().postFrameCallback(new Choreographer.FrameCallback() {
+      @Override
+      public void doFrame(long frameTimeNanos) {
+        manuallyLayoutChildren(view);
+        view.getViewTreeObserver().dispatchOnGlobalLayout();
+        Choreographer.getInstance().postFrameCallback(this);
+      }
+    });
+  }
+
+  /**
+   * Layout all children properly
+   */
+  public void manuallyLayoutChildren(View view) {
+      // propWidth and propHeight coming from react-native props
+      int width = propWidth;
+      int height = propHeight;
+
+      view.measure(
+              View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
+              View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY));
+
+      view.layout(0, 0, width, height);
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 4. Register the `ViewManager`
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin title="MyPackage.kt"
+// replace with your package
+package com.mypackage
+
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+
+class MyPackage : ReactPackage {
+  ...
+  override fun createViewManagers(
+      reactContext: ReactApplicationContext
+  ) = listOf(MyViewManager(reactContext))
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java title="MyPackage.java"
+// replace with your package
+package com.mypackage;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.Arrays;
+import java.util.List;
+
+public class MyPackage implements ReactPackage {
+
+   @Override
+   public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
+       return Arrays.<ViewManager>asList(
+            new MyViewManager(reactContext)
+       );
+   }
+
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 5. Register the `Package`
+
+<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin title="MainApplication.kt"
+override fun getPackages(): List<ReactPackage> =
+    PackageList(this).packages.apply {
+        // Packages that cannot be autolinked yet can be added manually here, for example:
+        // add(MyReactNativePackage())
+        add(MyAppPackage())
+    }
+```
+
+</TabItem>
+<TabItem value="java">
+
+```java title="MainApplication.java"
+@Override
+protected List<ReactPackage> getPackages() {
+    List<ReactPackage> packages = new PackageList(this).getPackages();
+    // Packages that cannot be autolinked yet can be added manually here, for example:
+    // packages.add(new MyReactNativePackage());
+    packages.add(new MyAppPackage());
+    return packages;
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 6. Implement the JavaScript module
+
+I. Start with custom View manager:
+
+```tsx title="MyViewManager.tsx"
+import {requireNativeComponent} from 'react-native';
+
+export const MyViewManager =
+  requireNativeComponent('MyViewManager');
+```
+
+II. Then implement custom View calling the `create` method:
+
+```tsx title="MyView.tsx"
+import {useEffect, useRef} from 'react';
+import {
+  PixelRatio,
+  UIManager,
+  findNodeHandle,
+} from 'react-native';
+
+import {MyViewManager} from './my-view-manager';
+
+const createFragment = viewId =>
+  UIManager.dispatchViewManagerCommand(
+    viewId,
+    // we are calling the 'create' command
+    UIManager.MyViewManager.Commands.create.toString(),
+    [viewId],
+  );
+
+export const MyView = () => {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const viewId = findNodeHandle(ref.current);
+    createFragment(viewId);
+  }, []);
+
+  return (
+    <MyViewManager
+      style={{
+        // converts dpi to px, provide desired height
+        height: PixelRatio.getPixelSizeForLayoutSize(200),
+        // converts dpi to px, provide desired width
+        width: PixelRatio.getPixelSizeForLayoutSize(200),
+      }}
+      ref={ref}
+    />
+  );
+};
+```
+
+If you want to expose property setters using `@ReactProp` (or `@ReactPropGroup`) annotation see the [ImageView example](#imageview-example) above.
diff --git a/website/versioned_docs/version-0.86/legacy/native-modules-android.md b/website/versioned_docs/version-0.86/legacy/native-modules-android.md
index 82fe222f628..cec5857a441 100644
--- a/website/versioned_docs/version-0.86/legacy/native-modules-android.md
+++ b/website/versioned_docs/version-0.86/legacy/native-modules-android.md
@@ -315,7 +315,6 @@ At this point, you have set up the basic scaffolding for your native module in A
 Find a place in your application where you would like to add a call to the native module’s `createCalendarEvent()` method. Below is an example of a component, `NewModuleButton` you can add in your app. You can invoke the native module inside `NewModuleButton`'s `onPress()` function.
 
 ```tsx
-import React from 'react';
 import {NativeModules, Button} from 'react-native';
 
 const NewModuleButton = () => {
diff --git a/website/versioned_docs/version-0.86/legacy/native-modules-ios.md b/website/versioned_docs/version-0.86/legacy/native-modules-ios.md
index 6c33c64ec75..d3239e16a90 100644
--- a/website/versioned_docs/version-0.86/legacy/native-modules-ios.md
+++ b/website/versioned_docs/version-0.86/legacy/native-modules-ios.md
@@ -141,7 +141,6 @@ At this point you have set up the basic scaffolding for your native module in iO
 Find a place in your application where you would like to add a call to the native module’s `createCalendarEvent()` method. Below is an example of a component, `NewModuleButton` you can add in your app. You can invoke the native module inside `NewModuleButton`'s `onPress()` function.
 
 ```tsx
-import React from 'react';
 import {Button} from 'react-native';
 
 const NewModuleButton = () => {
diff --git a/website/versioned_docs/version-0.86/linking.md b/website/versioned_docs/version-0.86/linking.md
index ff9c1e1121e..18875244905 100644
--- a/website/versioned_docs/version-0.86/linking.md
+++ b/website/versioned_docs/version-0.86/linking.md
@@ -1,688 +1,688 @@
----
-id: linking
-title: Linking
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-`Linking` gives you a general interface to interact with both incoming and outgoing app links.
-
-Every Link (URL) has a URL Scheme, some websites are prefixed with `https://` or `http://` and the `http` is the URL Scheme. Let's call it scheme for short.
-
-In addition to `https`, you're likely also familiar with the `mailto` scheme. When you open a link with the mailto scheme, your operating system will open an installed mail application. Similarly, there are schemes for making phone calls and sending SMS. Read more about [built-in URL](#built-in-url-schemes) schemes below.
-
-Like using the mailto scheme, it's possible to link to other applications by using custom url schemes. For example, when you get a **Magic Link** email from Slack, the **Launch Slack** button is an anchor tag with an href that looks something like: `slack://secret/magic-login/other-secret`. Like with Slack, you can tell the operating system that you want to handle a custom scheme. When the Slack app opens, it receives the URL that was used to open it. This is often referred to as deep linking. Read more about how to [get the deep link](#get-the-deep-link) into your app.
-
-A custom URL scheme isn't the only way to open your application on mobile. For example, if you want to email someone a link to be opened on mobile, using a custom URL scheme isn't ideal because the user might open the email on a desktop, where the link wouldn't work. Instead, you should use standard `https` links, such as `https://www.myapp.io/records/1234546`. On mobile, these links can be configured to open your app. On Android, this feature is called **Deep Links**, while on iOS, it is known as **Universal Links**.
-
-### Built-in URL Schemes
-
-As mentioned in the introduction, there are some URL schemes for core functionality that exist on every platform. The following is a non-exhaustive list, but covers the most commonly used schemes.
-
-| Scheme           | Description                                | iOS | Android |
-| ---------------- | ------------------------------------------ | --- | ------- |
-| `mailto`         | Open mail app, eg: mailto: hello@world.dev | ✅  | ✅      |
-| `tel`            | Open phone app, eg: tel:+123456789         | ✅  | ✅      |
-| `sms`            | Open SMS app, eg: sms:+123456789           | ✅  | ✅      |
-| `https` / `http` | Open web browser app, eg: https://expo.dev | ✅  | ✅      |
-
-### Enabling Deep Links
-
-<div className="banner-native-code-required">
-  <h3>Projects with Native Code Only</h3>
-  <p>The following section only applies to projects with native code exposed. If you are using the managed Expo workflow, see the guide on <a href="https://docs.expo.dev/guides/linking/">Linking</a> in the Expo documentation for the appropriate alternative.</p>
-</div>
-
-If you want to enable deep links in your app, please read the below guide:
-
-<Tabs groupId="syntax" queryString defaultValue={constants.defaultPlatform} values={constants.platforms}>
-<TabItem value="android">
-
-:::info
-For instructions on how to add support for deep linking on Android, refer to [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](https://developer.android.com/training/app-indexing/deep-linking.html#adding-filters).
-:::
-
-If you wish to receive the intent in an existing instance of MainActivity, you may set the `launchMode` of MainActivity to `singleTask` in `AndroidManifest.xml`. See [`<activity>`](https://developer.android.com/guide/topics/manifest/activity-element.html) documentation for more information.
-
-```xml
-<activity
-  android:name=".MainActivity"
-  android:launchMode="singleTask">
-```
-
-</TabItem>
-<TabItem value="ios">
-
-:::note
-On iOS, you'll need to add the `LinkingIOS` folder into your header search paths as described in step 3 [here](linking-libraries-ios#step-3). If you also want to listen to incoming app links during your app's execution, you'll need to add the following lines to your `*AppDelegate.m`:
-
-<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
-<TabItem value="objc">
-
-```objc title="AppDelegate.mm"
-// iOS 9.x or newer
-#import <React/RCTLinkingManager.h>
-
-- (BOOL)application:(UIApplication *)application
-   openURL:(NSURL *)url
-   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
-{
-  return [RCTLinkingManager application:application openURL:url options:options];
-}
-```
-
-If your app is using [Universal Links](https://developer.apple.com/ios/universal-links/), you'll need to add the following code as well:
-
-```objc title="AppDelegate.mm"
-- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
- restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
-{
- return [RCTLinkingManager application:application
-                  continueUserActivity:userActivity
-                    restorationHandler:restorationHandler];
-}
-```
-
-</TabItem>
-<TabItem value="swift">
-
-```swift title="AppDelegate.swift"
-func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
-  return RCTLinkingManager.application(app, open: url, options: options)
-}
-```
-
-If your app is using [Universal Links](https://developer.apple.com/ios/universal-links/), you'll need to add the following code as well:
-
-```swift title="AppDelegate.swift"
-func application(
-  _ application: UIApplication,
-  continue userActivity: NSUserActivity,
-  restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
-    return RCTLinkingManager.application(
-      application,
-      continue: userActivity,
-      restorationHandler: restorationHandler
-    )
-  }
-```
-
-</TabItem>
-</Tabs>
-
-:::
-
-</TabItem>
-</Tabs>
-
-### Handling Deep Links
-
-There are two ways to handle URLs that open your app.
-
-#### 1. If the app is already open, the app is foregrounded and a Linking 'url' event is fired
-
-You can handle these events with `Linking.addEventListener('url', callback)` - it calls `callback({url})` with the linked URL
-
-#### 2. If the app is not already open, it is opened and the url is passed in as the initialURL
-
-You can handle these events with `Linking.getInitialURL()` - it returns a Promise that resolves to the URL, if there is one.
-
----
-
-## Example
-
-### Open Links and Deep Links (Universal Links)
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useCallback} from 'react';
-import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
-
-const supportedURL = 'https://google.com';
-
-const unsupportedURL = 'slack://open?team=123456';
-
-const OpenURLButton = ({url, children}) => {
-  const handlePress = useCallback(async () => {
-    // Checking if the link is supported for links with custom URL scheme.
-    const supported = await Linking.canOpenURL(url);
-
-    if (supported) {
-      // Opening the link with some app, if the URL scheme is "http" the web link should be opened
-      // by some browser in the mobile
-      await Linking.openURL(url);
-    } else {
-      Alert.alert(`Don't know how to open this URL: ${url}`);
-    }
-  }, [url]);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <OpenURLButton url={supportedURL}>Open Supported URL</OpenURLButton>
-      <OpenURLButton url={unsupportedURL}>Open Unsupported URL</OpenURLButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useCallback} from 'react';
-import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
-
-const supportedURL = 'https://google.com';
-
-const unsupportedURL = 'slack://open?team=123456';
-
-type OpenURLButtonProps = {
-  url: string;
-  children: string;
-};
-
-const OpenURLButton = ({url, children}: OpenURLButtonProps) => {
-  const handlePress = useCallback(async () => {
-    // Checking if the link is supported for links with custom URL scheme.
-    const supported = await Linking.canOpenURL(url);
-
-    if (supported) {
-      // Opening the link with some app, if the URL scheme is "http" the web link should be opened
-      // by some browser in the mobile
-      await Linking.openURL(url);
-    } else {
-      Alert.alert(`Don't know how to open this URL: ${url}`);
-    }
-  }, [url]);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <OpenURLButton url={supportedURL}>Open Supported URL</OpenURLButton>
-      <OpenURLButton url={unsupportedURL}>Open Unsupported URL</OpenURLButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### Open Custom Settings
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useCallback} from 'react';
-import {Button, Linking, StyleSheet, View} from 'react-native';
-
-const OpenSettingsButton = ({children}) => {
-  const handlePress = useCallback(async () => {
-    // Open the custom settings if the app has one
-    await Linking.openSettings();
-  }, []);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <OpenSettingsButton>Open Settings</OpenSettingsButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useCallback} from 'react';
-import {Button, Linking, StyleSheet, View} from 'react-native';
-
-type OpenSettingsButtonProps = {
-  children: string;
-};
-
-const OpenSettingsButton = ({children}: OpenSettingsButtonProps) => {
-  const handlePress = useCallback(async () => {
-    // Open the custom settings if the app has one
-    await Linking.openSettings();
-  }, []);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <OpenSettingsButton>Open Settings</OpenSettingsButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### Get the Deep Link
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
-import React, {useState, useEffect} from 'react';
-import {Linking, StyleSheet, Text, View} from 'react-native';
-
-const useInitialURL = () => {
-  const [url, setUrl] = useState(null);
-  const [processing, setProcessing] = useState(true);
-
-  useEffect(() => {
-    const getUrlAsync = async () => {
-      // Get the deep link used to open the app
-      const initialUrl = await Linking.getInitialURL();
-
-      // The setTimeout is just for testing purpose
-      setTimeout(() => {
-        setUrl(initialUrl);
-        setProcessing(false);
-      }, 1000);
-    };
-
-    getUrlAsync();
-  }, []);
-
-  return {url, processing};
-};
-
-const App = () => {
-  const {url: initialUrl, processing} = useInitialURL();
-
-  return (
-    <View style={styles.container}>
-      <Text>
-        {processing
-          ? 'Processing the initial url from a deep link'
-          : `The deep link is: ${initialUrl || 'None'}`}
-      </Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
-import React, {useState, useEffect} from 'react';
-import {Linking, StyleSheet, Text, View} from 'react-native';
-
-const useInitialURL = () => {
-  const [url, setUrl] = useState<string | null>(null);
-  const [processing, setProcessing] = useState(true);
-
-  useEffect(() => {
-    const getUrlAsync = async () => {
-      // Get the deep link used to open the app
-      const initialUrl = await Linking.getInitialURL();
-
-      // The setTimeout is just for testing purpose
-      setTimeout(() => {
-        setUrl(initialUrl);
-        setProcessing(false);
-      }, 1000);
-    };
-
-    getUrlAsync();
-  }, []);
-
-  return {url, processing};
-};
-
-const App = () => {
-  const {url: initialUrl, processing} = useInitialURL();
-
-  return (
-    <View style={styles.container}>
-      <Text>
-        {processing
-          ? 'Processing the initial url from a deep link'
-          : `The deep link is: ${initialUrl || 'None'}`}
-      </Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### Send Intents (Android)
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Linking%20Example&supportedPlatforms=android&ext=js
-import React, {useCallback} from 'react';
-import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
-
-const SendIntentButton = ({action, extras, children}) => {
-  const handlePress = useCallback(async () => {
-    try {
-      await Linking.sendIntent(action, extras);
-    } catch (e) {
-      Alert.alert(e.message);
-    }
-  }, [action, extras]);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <SendIntentButton action="android.intent.action.POWER_USAGE_SUMMARY">
-        Power Usage Summary
-      </SendIntentButton>
-      <SendIntentButton
-        action="android.settings.APP_NOTIFICATION_SETTINGS"
-        extras={[
-          {
-            key: 'android.provider.extra.APP_PACKAGE',
-            value: 'com.facebook.katana',
-          },
-        ]}>
-        App Notification Settings
-      </SendIntentButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Linking%20Example&ext=tsx
-import React, {useCallback} from 'react';
-import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
-
-type SendIntentButtonProps = {
-  action: string;
-  children: string;
-  extras?: Array<{
-    key: string;
-    value: string | number | boolean;
-  }>;
-};
-
-const SendIntentButton = ({
-  action,
-  extras,
-  children,
-}: SendIntentButtonProps) => {
-  const handlePress = useCallback(async () => {
-    try {
-      await Linking.sendIntent(action, extras);
-    } catch (e: any) {
-      Alert.alert(e.message);
-    }
-  }, [action, extras]);
-
-  return <Button title={children} onPress={handlePress} />;
-};
-
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <SendIntentButton action="android.intent.action.POWER_USAGE_SUMMARY">
-        Power Usage Summary
-      </SendIntentButton>
-      <SendIntentButton
-        action="android.settings.APP_NOTIFICATION_SETTINGS"
-        extras={[
-          {
-            key: 'android.provider.extra.APP_PACKAGE',
-            value: 'com.facebook.katana',
-          },
-        ]}>
-        App Notification Settings
-      </SendIntentButton>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-# Reference
-
-## Methods
-
-### `addEventListener()`
-
-```tsx
-static addEventListener(
-  type: 'url',
-  handler: (event: {url: string}) => void,
-): EmitterSubscription;
-```
-
-Add a handler to Linking changes by listening to the `url` event type and providing the handler.
-
----
-
-### `canOpenURL()`
-
-```tsx
-static canOpenURL(url: string): Promise<boolean>;
-```
-
-Determine whether or not an installed app can handle a given URL.
-
-The method returns a `Promise` object. When it is determined whether or not the given URL can be handled, the promise is resolved and the first parameter is whether or not it can be opened.
-
-The `Promise` will reject on Android if it was impossible to check if the URL can be opened or when targeting Android 11 (SDK 30) if you didn't specify the relevant intent queries in `AndroidManifest.xml`. Similarly on iOS, the promise will reject if you didn't add the specific scheme in the `LSApplicationQueriesSchemes` key inside `Info.plist` (see bellow).
-
-**Parameters:**
-
-| Name                                                     | Type   | Description      |
-| -------------------------------------------------------- | ------ | ---------------- |
-| url <div className="label basic required">Required</div> | string | The URL to open. |
-
-:::note
-For web URLs, the protocol (`"http://"`, `"https://"`) must be set accordingly!
-:::
-
-:::warning
-This method has limitations on iOS 9+. From [the official Apple documentation](https://developer.apple.com/documentation/uikit/uiapplication/1622952-canopenurl):
-
-- If your app is linked against an earlier version of iOS but is running in iOS 9.0 or later, you can call this method up to 50 times. After reaching that limit, subsequent calls always resolve to `false`. If the user reinstalls or upgrades the app, iOS resets the limit.
-- As of iOS 9, your app also needs to provide the `LSApplicationQueriesSchemes` key inside `Info.plist` or `canOpenURL()` will always resolve to `false`.
-  :::
-
-:::info
-When targeting Android 11 (SDK 30) you must specify the intents for the schemes you want to handle in `AndroidManifest.xml`. A list of common intents can be found [here](https://developer.android.com/guide/components/intents-common).
-
-For example to handle `https` schemes the following needs to be added to your manifest:
-
-```
-<manifest ...>
-  <queries>
-    <intent>
-      <action android:name="android.intent.action.VIEW" />
-      <data android:scheme="https"/>
-    </intent>
-  </queries>
-</manifest>
-```
-
-:::
-
----
-
-### `getInitialURL()`
-
-```tsx
-static getInitialURL(): Promise<string | null>;
-```
-
-If the app launch was triggered by an app link, it will give the link url, otherwise it will give `null`.
-
-:::info
-To support deep linking on Android, refer https://developer.android.com/training/app-indexing/deep-linking.html#handling-intents.
-:::
-
-:::tip
-`getInitialURL` may return `null` when Remote JS Debugging is active. Disable the debugger to ensure it gets passed.
-:::
-
----
-
-### `openSettings()`
-
-```tsx
-static openSettings(): Promise<void>;
-```
-
-Open the Settings app and displays the app’s custom settings, if it has any.
-
----
-
-### `openURL()`
-
-```tsx
-static openURL(url: string): Promise<any>;
-```
-
-Try to open the given `url` with any of the installed apps.
-
-You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386" on Android or "https://maps.apple.com/?ll=37.484847,-122.148386" on iOS), a contact, or any other URL that can be opened with the installed apps.
-
-The method returns a `Promise` object. If the user confirms the open dialog or the url automatically opens, the promise is resolved. If the user cancels the open dialog or there are no registered applications for the url, the promise is rejected.
-
-**Parameters:**
-
-| Name                                                     | Type   | Description      |
-| -------------------------------------------------------- | ------ | ---------------- |
-| url <div className="label basic required">Required</div> | string | The URL to open. |
-
-:::note
-This method will fail if the system doesn't know how to open the specified URL. If you're passing in a non-http(s) URL, it's best to check `canOpenURL()` first. For web URLs, the protocol (`"http://"`, `"https://"`) must be set accordingly!
-:::
-
-:::warning
-This method may behave differently in a simulator e.g. `"tel:"` links are not able to be handled in the iOS simulator as there's no access to the dialer app.
-:::
-
----
-
-### `sendIntent()` <div className="label android">Android</div>
-
-```tsx
-static sendIntent(
-  action: string,
-  extras?: Array<{key: string; value: string | number | boolean}>,
-): Promise<void>;
-```
-
-Launch an Android intent with extras.
-
-**Parameters:**
-
-| Name                                                        | Type                                                       |
-| ----------------------------------------------------------- | ---------------------------------------------------------- |
-| action <div className="label basic required">Required</div> | string                                                     |
-| extras                                                      | `Array<{key: string, value: string ｜ number ｜ boolean}>` |
+---
+id: linking
+title: Linking
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+`Linking` gives you a general interface to interact with both incoming and outgoing app links.
+
+Every Link (URL) has a URL Scheme, some websites are prefixed with `https://` or `http://` and the `http` is the URL Scheme. Let's call it scheme for short.
+
+In addition to `https`, you're likely also familiar with the `mailto` scheme. When you open a link with the mailto scheme, your operating system will open an installed mail application. Similarly, there are schemes for making phone calls and sending SMS. Read more about [built-in URL](#built-in-url-schemes) schemes below.
+
+Like using the mailto scheme, it's possible to link to other applications by using custom url schemes. For example, when you get a **Magic Link** email from Slack, the **Launch Slack** button is an anchor tag with an href that looks something like: `slack://secret/magic-login/other-secret`. Like with Slack, you can tell the operating system that you want to handle a custom scheme. When the Slack app opens, it receives the URL that was used to open it. This is often referred to as deep linking. Read more about how to [get the deep link](#get-the-deep-link) into your app.
+
+A custom URL scheme isn't the only way to open your application on mobile. For example, if you want to email someone a link to be opened on mobile, using a custom URL scheme isn't ideal because the user might open the email on a desktop, where the link wouldn't work. Instead, you should use standard `https` links, such as `https://www.myapp.io/records/1234546`. On mobile, these links can be configured to open your app. On Android, this feature is called **Deep Links**, while on iOS, it is known as **Universal Links**.
+
+### Built-in URL Schemes
+
+As mentioned in the introduction, there are some URL schemes for core functionality that exist on every platform. The following is a non-exhaustive list, but covers the most commonly used schemes.
+
+| Scheme           | Description                                | iOS | Android |
+| ---------------- | ------------------------------------------ | --- | ------- |
+| `mailto`         | Open mail app, eg: mailto: hello@world.dev | ✅  | ✅      |
+| `tel`            | Open phone app, eg: tel:+123456789         | ✅  | ✅      |
+| `sms`            | Open SMS app, eg: sms:+123456789           | ✅  | ✅      |
+| `https` / `http` | Open web browser app, eg: https://expo.dev | ✅  | ✅      |
+
+### Enabling Deep Links
+
+<div className="banner-native-code-required">
+  <h3>Projects with Native Code Only</h3>
+  <p>The following section only applies to projects with native code exposed. If you are using the managed Expo workflow, see the guide on <a href="https://docs.expo.dev/guides/linking/">Linking</a> in the Expo documentation for the appropriate alternative.</p>
+</div>
+
+If you want to enable deep links in your app, please read the below guide:
+
+<Tabs groupId="syntax" queryString defaultValue={constants.defaultPlatform} values={constants.platforms}>
+<TabItem value="android">
+
+:::info
+For instructions on how to add support for deep linking on Android, refer to [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](https://developer.android.com/training/app-indexing/deep-linking.html#adding-filters).
+:::
+
+If you wish to receive the intent in an existing instance of MainActivity, you may set the `launchMode` of MainActivity to `singleTask` in `AndroidManifest.xml`. See [`<activity>`](https://developer.android.com/guide/topics/manifest/activity-element.html) documentation for more information.
+
+```xml
+<activity
+  android:name=".MainActivity"
+  android:launchMode="singleTask">
+```
+
+</TabItem>
+<TabItem value="ios">
+
+:::note
+On iOS, you'll need to add the `LinkingIOS` folder into your header search paths as described in step 3 [here](linking-libraries-ios#step-3). If you also want to listen to incoming app links during your app's execution, you'll need to add the following lines to your `*AppDelegate.m`:
+
+<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
+<TabItem value="objc">
+
+```objc title="AppDelegate.mm"
+// iOS 9.x or newer
+#import <React/RCTLinkingManager.h>
+
+- (BOOL)application:(UIApplication *)application
+   openURL:(NSURL *)url
+   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
+{
+  return [RCTLinkingManager application:application openURL:url options:options];
+}
+```
+
+If your app is using [Universal Links](https://developer.apple.com/ios/universal-links/), you'll need to add the following code as well:
+
+```objc title="AppDelegate.mm"
+- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
+ restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
+{
+ return [RCTLinkingManager application:application
+                  continueUserActivity:userActivity
+                    restorationHandler:restorationHandler];
+}
+```
+
+</TabItem>
+<TabItem value="swift">
+
+```swift title="AppDelegate.swift"
+func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
+  return RCTLinkingManager.application(app, open: url, options: options)
+}
+```
+
+If your app is using [Universal Links](https://developer.apple.com/ios/universal-links/), you'll need to add the following code as well:
+
+```swift title="AppDelegate.swift"
+func application(
+  _ application: UIApplication,
+  continue userActivity: NSUserActivity,
+  restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
+    return RCTLinkingManager.application(
+      application,
+      continue: userActivity,
+      restorationHandler: restorationHandler
+    )
+  }
+```
+
+</TabItem>
+</Tabs>
+
+:::
+
+</TabItem>
+</Tabs>
+
+### Handling Deep Links
+
+There are two ways to handle URLs that open your app.
+
+#### 1. If the app is already open, the app is foregrounded and a Linking 'url' event is fired
+
+You can handle these events with `Linking.addEventListener('url', callback)` - it calls `callback({url})` with the linked URL
+
+#### 2. If the app is not already open, it is opened and the url is passed in as the initialURL
+
+You can handle these events with `Linking.getInitialURL()` - it returns a Promise that resolves to the URL, if there is one.
+
+---
+
+## Example
+
+### Open Links and Deep Links (Universal Links)
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
+import {useCallback} from 'react';
+import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
+
+const supportedURL = 'https://google.com';
+
+const unsupportedURL = 'slack://open?team=123456';
+
+const OpenURLButton = ({url, children}) => {
+  const handlePress = useCallback(async () => {
+    // Checking if the link is supported for links with custom URL scheme.
+    const supported = await Linking.canOpenURL(url);
+
+    if (supported) {
+      // Opening the link with some app, if the URL scheme is "http" the web link should be opened
+      // by some browser in the mobile
+      await Linking.openURL(url);
+    } else {
+      Alert.alert(`Don't know how to open this URL: ${url}`);
+    }
+  }, [url]);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <OpenURLButton url={supportedURL}>Open Supported URL</OpenURLButton>
+      <OpenURLButton url={unsupportedURL}>Open Unsupported URL</OpenURLButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
+import {useCallback} from 'react';
+import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
+
+const supportedURL = 'https://google.com';
+
+const unsupportedURL = 'slack://open?team=123456';
+
+type OpenURLButtonProps = {
+  url: string;
+  children: string;
+};
+
+const OpenURLButton = ({url, children}: OpenURLButtonProps) => {
+  const handlePress = useCallback(async () => {
+    // Checking if the link is supported for links with custom URL scheme.
+    const supported = await Linking.canOpenURL(url);
+
+    if (supported) {
+      // Opening the link with some app, if the URL scheme is "http" the web link should be opened
+      // by some browser in the mobile
+      await Linking.openURL(url);
+    } else {
+      Alert.alert(`Don't know how to open this URL: ${url}`);
+    }
+  }, [url]);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <OpenURLButton url={supportedURL}>Open Supported URL</OpenURLButton>
+      <OpenURLButton url={unsupportedURL}>Open Unsupported URL</OpenURLButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### Open Custom Settings
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
+import {useCallback} from 'react';
+import {Button, Linking, StyleSheet, View} from 'react-native';
+
+const OpenSettingsButton = ({children}) => {
+  const handlePress = useCallback(async () => {
+    // Open the custom settings if the app has one
+    await Linking.openSettings();
+  }, []);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <OpenSettingsButton>Open Settings</OpenSettingsButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
+import {useCallback} from 'react';
+import {Button, Linking, StyleSheet, View} from 'react-native';
+
+type OpenSettingsButtonProps = {
+  children: string;
+};
+
+const OpenSettingsButton = ({children}: OpenSettingsButtonProps) => {
+  const handlePress = useCallback(async () => {
+    // Open the custom settings if the app has one
+    await Linking.openSettings();
+  }, []);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <OpenSettingsButton>Open Settings</OpenSettingsButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### Get the Deep Link
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
+import {useState, useEffect} from 'react';
+import {Linking, StyleSheet, Text, View} from 'react-native';
+
+const useInitialURL = () => {
+  const [url, setUrl] = useState(null);
+  const [processing, setProcessing] = useState(true);
+
+  useEffect(() => {
+    const getUrlAsync = async () => {
+      // Get the deep link used to open the app
+      const initialUrl = await Linking.getInitialURL();
+
+      // The setTimeout is just for testing purpose
+      setTimeout(() => {
+        setUrl(initialUrl);
+        setProcessing(false);
+      }, 1000);
+    };
+
+    getUrlAsync();
+  }, []);
+
+  return {url, processing};
+};
+
+const App = () => {
+  const {url: initialUrl, processing} = useInitialURL();
+
+  return (
+    <View style={styles.container}>
+      <Text>
+        {processing
+          ? 'Processing the initial url from a deep link'
+          : `The deep link is: ${initialUrl || 'None'}`}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=tsx
+import {useState, useEffect} from 'react';
+import {Linking, StyleSheet, Text, View} from 'react-native';
+
+const useInitialURL = () => {
+  const [url, setUrl] = useState<string | null>(null);
+  const [processing, setProcessing] = useState(true);
+
+  useEffect(() => {
+    const getUrlAsync = async () => {
+      // Get the deep link used to open the app
+      const initialUrl = await Linking.getInitialURL();
+
+      // The setTimeout is just for testing purpose
+      setTimeout(() => {
+        setUrl(initialUrl);
+        setProcessing(false);
+      }, 1000);
+    };
+
+    getUrlAsync();
+  }, []);
+
+  return {url, processing};
+};
+
+const App = () => {
+  const {url: initialUrl, processing} = useInitialURL();
+
+  return (
+    <View style={styles.container}>
+      <Text>
+        {processing
+          ? 'Processing the initial url from a deep link'
+          : `The deep link is: ${initialUrl || 'None'}`}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### Send Intents (Android)
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Linking%20Example&supportedPlatforms=android&ext=js
+import {useCallback} from 'react';
+import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
+
+const SendIntentButton = ({action, extras, children}) => {
+  const handlePress = useCallback(async () => {
+    try {
+      await Linking.sendIntent(action, extras);
+    } catch (e) {
+      Alert.alert(e.message);
+    }
+  }, [action, extras]);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <SendIntentButton action="android.intent.action.POWER_USAGE_SUMMARY">
+        Power Usage Summary
+      </SendIntentButton>
+      <SendIntentButton
+        action="android.settings.APP_NOTIFICATION_SETTINGS"
+        extras={[
+          {
+            key: 'android.provider.extra.APP_PACKAGE',
+            value: 'com.facebook.katana',
+          },
+        ]}>
+        App Notification Settings
+      </SendIntentButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Linking%20Example&ext=tsx
+import {useCallback} from 'react';
+import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
+
+type SendIntentButtonProps = {
+  action: string;
+  children: string;
+  extras?: Array<{
+    key: string;
+    value: string | number | boolean;
+  }>;
+};
+
+const SendIntentButton = ({
+  action,
+  extras,
+  children,
+}: SendIntentButtonProps) => {
+  const handlePress = useCallback(async () => {
+    try {
+      await Linking.sendIntent(action, extras);
+    } catch (e: any) {
+      Alert.alert(e.message);
+    }
+  }, [action, extras]);
+
+  return <Button title={children} onPress={handlePress} />;
+};
+
+const App = () => {
+  return (
+    <View style={styles.container}>
+      <SendIntentButton action="android.intent.action.POWER_USAGE_SUMMARY">
+        Power Usage Summary
+      </SendIntentButton>
+      <SendIntentButton
+        action="android.settings.APP_NOTIFICATION_SETTINGS"
+        extras={[
+          {
+            key: 'android.provider.extra.APP_PACKAGE',
+            value: 'com.facebook.katana',
+          },
+        ]}>
+        App Notification Settings
+      </SendIntentButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+# Reference
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+  type: 'url',
+  handler: (event: {url: string}) => void,
+): EmitterSubscription;
+```
+
+Add a handler to Linking changes by listening to the `url` event type and providing the handler.
+
+---
+
+### `canOpenURL()`
+
+```tsx
+static canOpenURL(url: string): Promise<boolean>;
+```
+
+Determine whether or not an installed app can handle a given URL.
+
+The method returns a `Promise` object. When it is determined whether or not the given URL can be handled, the promise is resolved and the first parameter is whether or not it can be opened.
+
+The `Promise` will reject on Android if it was impossible to check if the URL can be opened or when targeting Android 11 (SDK 30) if you didn't specify the relevant intent queries in `AndroidManifest.xml`. Similarly on iOS, the promise will reject if you didn't add the specific scheme in the `LSApplicationQueriesSchemes` key inside `Info.plist` (see bellow).
+
+**Parameters:**
+
+| Name                                                     | Type   | Description      |
+| -------------------------------------------------------- | ------ | ---------------- |
+| url <div className="label basic required">Required</div> | string | The URL to open. |
+
+:::note
+For web URLs, the protocol (`"http://"`, `"https://"`) must be set accordingly!
+:::
+
+:::warning
+This method has limitations on iOS 9+. From [the official Apple documentation](https://developer.apple.com/documentation/uikit/uiapplication/1622952-canopenurl):
+
+- If your app is linked against an earlier version of iOS but is running in iOS 9.0 or later, you can call this method up to 50 times. After reaching that limit, subsequent calls always resolve to `false`. If the user reinstalls or upgrades the app, iOS resets the limit.
+- As of iOS 9, your app also needs to provide the `LSApplicationQueriesSchemes` key inside `Info.plist` or `canOpenURL()` will always resolve to `false`.
+  :::
+
+:::info
+When targeting Android 11 (SDK 30) you must specify the intents for the schemes you want to handle in `AndroidManifest.xml`. A list of common intents can be found [here](https://developer.android.com/guide/components/intents-common).
+
+For example to handle `https` schemes the following needs to be added to your manifest:
+
+```
+<manifest ...>
+  <queries>
+    <intent>
+      <action android:name="android.intent.action.VIEW" />
+      <data android:scheme="https"/>
+    </intent>
+  </queries>
+</manifest>
+```
+
+:::
+
+---
+
+### `getInitialURL()`
+
+```tsx
+static getInitialURL(): Promise<string | null>;
+```
+
+If the app launch was triggered by an app link, it will give the link url, otherwise it will give `null`.
+
+:::info
+To support deep linking on Android, refer https://developer.android.com/training/app-indexing/deep-linking.html#handling-intents.
+:::
+
+:::tip
+`getInitialURL` may return `null` when Remote JS Debugging is active. Disable the debugger to ensure it gets passed.
+:::
+
+---
+
+### `openSettings()`
+
+```tsx
+static openSettings(): Promise<void>;
+```
+
+Open the Settings app and displays the app’s custom settings, if it has any.
+
+---
+
+### `openURL()`
+
+```tsx
+static openURL(url: string): Promise<any>;
+```
+
+Try to open the given `url` with any of the installed apps.
+
+You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386" on Android or "https://maps.apple.com/?ll=37.484847,-122.148386" on iOS), a contact, or any other URL that can be opened with the installed apps.
+
+The method returns a `Promise` object. If the user confirms the open dialog or the url automatically opens, the promise is resolved. If the user cancels the open dialog or there are no registered applications for the url, the promise is rejected.
+
+**Parameters:**
+
+| Name                                                     | Type   | Description      |
+| -------------------------------------------------------- | ------ | ---------------- |
+| url <div className="label basic required">Required</div> | string | The URL to open. |
+
+:::note
+This method will fail if the system doesn't know how to open the specified URL. If you're passing in a non-http(s) URL, it's best to check `canOpenURL()` first. For web URLs, the protocol (`"http://"`, `"https://"`) must be set accordingly!
+:::
+
+:::warning
+This method may behave differently in a simulator e.g. `"tel:"` links are not able to be handled in the iOS simulator as there's no access to the dialer app.
+:::
+
+---
+
+### `sendIntent()` <div className="label android">Android</div>
+
+```tsx
+static sendIntent(
+  action: string,
+  extras?: Array<{key: string; value: string | number | boolean}>,
+): Promise<void>;
+```
+
+Launch an Android intent with extras.
+
+**Parameters:**
+
+| Name                                                        | Type                                                       |
+| ----------------------------------------------------------- | ---------------------------------------------------------- |
+| action <div className="label basic required">Required</div> | string                                                     |
+| extras                                                      | `Array<{key: string, value: string ｜ number ｜ boolean}>` |
diff --git a/website/versioned_docs/version-0.86/modal.md b/website/versioned_docs/version-0.86/modal.md
index 45be2531592..4f6f4cfa50e 100644
--- a/website/versioned_docs/version-0.86/modal.md
+++ b/website/versioned_docs/version-0.86/modal.md
@@ -1,276 +1,276 @@
----
-id: modal
-title: Modal
----
-
-The Modal component is a basic way to present content above an enclosing view.
-
-## Example
-
-```SnackPlayer name=Modal&supportedPlatforms=android,ios
-import React, {useState} from 'react';
-import {Alert, Modal, StyleSheet, Text, Pressable, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [modalVisible, setModalVisible] = useState(false);
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.centeredView}>
-        <Modal
-          animationType="slide"
-          transparent={true}
-          visible={modalVisible}
-          onRequestClose={() => {
-            Alert.alert('Modal has been closed.');
-            setModalVisible(!modalVisible);
-          }}>
-          <View style={styles.centeredView}>
-            <View style={styles.modalView}>
-              <Text style={styles.modalText}>Hello World!</Text>
-              <Pressable
-                style={[styles.button, styles.buttonClose]}
-                onPress={() => setModalVisible(!modalVisible)}>
-                <Text style={styles.textStyle}>Hide Modal</Text>
-              </Pressable>
-            </View>
-          </View>
-        </Modal>
-        <Pressable
-          style={[styles.button, styles.buttonOpen]}
-          onPress={() => setModalVisible(true)}>
-          <Text style={styles.textStyle}>Show Modal</Text>
-        </Pressable>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  centeredView: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  modalView: {
-    margin: 20,
-    backgroundColor: 'white',
-    borderRadius: 20,
-    padding: 35,
-    alignItems: 'center',
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 4,
-    elevation: 5,
-  },
-  button: {
-    borderRadius: 20,
-    padding: 10,
-    elevation: 2,
-  },
-  buttonOpen: {
-    backgroundColor: '#F194FF',
-  },
-  buttonClose: {
-    backgroundColor: '#2196F3',
-  },
-  textStyle: {
-    color: 'white',
-    fontWeight: 'bold',
-    textAlign: 'center',
-  },
-  modalText: {
-    marginBottom: 15,
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Props
-
-### [View Props](view.md#props)
-
-Inherits [View Props](view.md#props).
-
----
-
-### 🗑️ `animated`
-
-:::warning Deprecated
-Use the [`animationType`](modal.md#animationtype) prop instead.
-:::
-
----
-
-### `animationType`
-
-The `animationType` prop controls how the modal animates.
-
-Possible values:
-
-- `slide` slides in from the bottom
-- `fade` fades into view
-- `none` appears without an animation
-
-| Type                                | Default |
-| ----------------------------------- | ------- |
-| enum(`'none'`, `'slide'`, `'fade'`) | `none`  |
-
----
-
-### `backdropColor`
-
-The `backdropColor` of the modal (or background color of the modal's container.) Defaults to `white` if not provided and transparent is `false`. Ignored if `transparent` is `true`.
-
-| Type            | Default |
-| --------------- | ------- |
-| [color](colors) | white   |
-
----
-
-### `hardwareAccelerated` <div className="label android">Android</div>
-
-The `hardwareAccelerated` prop controls whether to force hardware acceleration for the underlying window.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `navigationBarTranslucent` <div className="label android">Android</div>
-
-The `navigationBarTranslucent` prop determines whether your modal should go under the system navigation bar. However, `statusBarTranslucent` also needs to be set to `true` to make navigation bar translucent.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `onDismiss` <div className="label ios">iOS</div>
-
-The `onDismiss` prop allows passing a function that will be called once the modal has been dismissed.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onOrientationChange` <div className="label ios">iOS</div>
-
-The `onOrientationChange` callback is called when the orientation changes while the modal is being displayed. The orientation provided is only 'portrait' or 'landscape'. This callback is also called on initial render, regardless of the current orientation.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `allowSwipeDismissal` <div className="label ios">iOS</div>
-
-Controls whether the modal can be dismissed by swiping down on iOS.
-This requires you to implement the `onRequestClose` prop to handle the dismissal.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `ref`
-
-A ref setter that will be assigned an [element node](element-nodes) when mounted.
-
----
-
-### `onRequestClose`
-
-The `onRequestClose` callback is called when the user taps the hardware back button on Android or the menu button on Apple TV. Because of this required prop, be aware that `BackHandler` events will not be emitted as long as the modal is open.
-On iOS, this callback is called when a Modal is being dismissed using a drag gesture when `presentationStyle` is `pageSheet` or `formSheet`. When `allowSwipeDismissal` is enabled this callback will be called after dismissing the modal.
-
-| Type                                                                                                                                                                                           |
-| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| function <div className="label basic required">Required</div><div className="label android">Android</div><div className="label tv">TV</div><hr />function <div className="label ios">iOS</div> |
-
----
-
-### `onShow`
-
-The `onShow` prop allows passing a function that will be called once the modal has been shown.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `presentationStyle` <div className="label ios">iOS</div>
-
-The `presentationStyle` prop controls how the modal appears (generally on larger devices such as iPad or plus-sized iPhones). See https://developer.apple.com/reference/uikit/uimodalpresentationstyle for details.
-
-Possible values:
-
-- `fullScreen` covers the screen completely
-- `pageSheet` covers portrait-width view centered (only on larger devices)
-- `formSheet` covers narrow-width view centered (only on larger devices)
-- `overFullScreen` covers the screen completely, but allows transparency
-
-| Type                                                                   | Default                                                                             |
-| ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
-| enum(`'fullScreen'`, `'pageSheet'`, `'formSheet'`, `'overFullScreen'`) | `fullScreen` if `transparent={false}`<hr />`overFullScreen` if `transparent={true}` |
-
----
-
-### `statusBarTranslucent` <div className="label android">Android</div>
-
-The `statusBarTranslucent` prop determines whether your modal should go under the system statusbar.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `supportedOrientations` <div className="label ios">iOS</div>
-
-The `supportedOrientations` prop allows the modal to be rotated to any of the specified orientations. On iOS, the modal is still restricted by what's specified in your app's Info.plist's UISupportedInterfaceOrientations field.
-
-:::note
-When using `presentationStyle` of `pageSheet` or `formSheet`, this property will be ignored on iOS.
-:::
-
-| Type                                                                                                           | Default        |
-| -------------------------------------------------------------------------------------------------------------- | -------------- |
-| array of enums(`'portrait'`, `'portrait-upside-down'`, `'landscape'`, `'landscape-left'`, `'landscape-right'`) | `['portrait']` |
-
----
-
-### `transparent`
-
-The `transparent` prop determines whether your modal will fill the entire view. Setting this to `true` will render the modal over a transparent background.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `visible`
-
-The `visible` prop determines whether your modal is visible.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `true`  |
+---
+id: modal
+title: Modal
+---
+
+The Modal component is a basic way to present content above an enclosing view.
+
+## Example
+
+```SnackPlayer name=Modal&supportedPlatforms=android,ios
+import {useState} from 'react';
+import {Alert, Modal, StyleSheet, Text, Pressable, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [modalVisible, setModalVisible] = useState(false);
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.centeredView}>
+        <Modal
+          animationType="slide"
+          transparent={true}
+          visible={modalVisible}
+          onRequestClose={() => {
+            Alert.alert('Modal has been closed.');
+            setModalVisible(!modalVisible);
+          }}>
+          <View style={styles.centeredView}>
+            <View style={styles.modalView}>
+              <Text style={styles.modalText}>Hello World!</Text>
+              <Pressable
+                style={[styles.button, styles.buttonClose]}
+                onPress={() => setModalVisible(!modalVisible)}>
+                <Text style={styles.textStyle}>Hide Modal</Text>
+              </Pressable>
+            </View>
+          </View>
+        </Modal>
+        <Pressable
+          style={[styles.button, styles.buttonOpen]}
+          onPress={() => setModalVisible(true)}>
+          <Text style={styles.textStyle}>Show Modal</Text>
+        </Pressable>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  centeredView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalView: {
+    margin: 20,
+    backgroundColor: 'white',
+    borderRadius: 20,
+    padding: 35,
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  button: {
+    borderRadius: 20,
+    padding: 10,
+    elevation: 2,
+  },
+  buttonOpen: {
+    backgroundColor: '#F194FF',
+  },
+  buttonClose: {
+    backgroundColor: '#2196F3',
+  },
+  textStyle: {
+    color: 'white',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  modalText: {
+    marginBottom: 15,
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Props
+
+### [View Props](view.md#props)
+
+Inherits [View Props](view.md#props).
+
+---
+
+### 🗑️ `animated`
+
+:::warning Deprecated
+Use the [`animationType`](modal.md#animationtype) prop instead.
+:::
+
+---
+
+### `animationType`
+
+The `animationType` prop controls how the modal animates.
+
+Possible values:
+
+- `slide` slides in from the bottom
+- `fade` fades into view
+- `none` appears without an animation
+
+| Type                                | Default |
+| ----------------------------------- | ------- |
+| enum(`'none'`, `'slide'`, `'fade'`) | `none`  |
+
+---
+
+### `backdropColor`
+
+The `backdropColor` of the modal (or background color of the modal's container.) Defaults to `white` if not provided and transparent is `false`. Ignored if `transparent` is `true`.
+
+| Type            | Default |
+| --------------- | ------- |
+| [color](colors) | white   |
+
+---
+
+### `hardwareAccelerated` <div className="label android">Android</div>
+
+The `hardwareAccelerated` prop controls whether to force hardware acceleration for the underlying window.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `navigationBarTranslucent` <div className="label android">Android</div>
+
+The `navigationBarTranslucent` prop determines whether your modal should go under the system navigation bar. However, `statusBarTranslucent` also needs to be set to `true` to make navigation bar translucent.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `onDismiss` <div className="label ios">iOS</div>
+
+The `onDismiss` prop allows passing a function that will be called once the modal has been dismissed.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onOrientationChange` <div className="label ios">iOS</div>
+
+The `onOrientationChange` callback is called when the orientation changes while the modal is being displayed. The orientation provided is only 'portrait' or 'landscape'. This callback is also called on initial render, regardless of the current orientation.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `allowSwipeDismissal` <div className="label ios">iOS</div>
+
+Controls whether the modal can be dismissed by swiping down on iOS.
+This requires you to implement the `onRequestClose` prop to handle the dismissal.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `ref`
+
+A ref setter that will be assigned an [element node](element-nodes) when mounted.
+
+---
+
+### `onRequestClose`
+
+The `onRequestClose` callback is called when the user taps the hardware back button on Android or the menu button on Apple TV. Because of this required prop, be aware that `BackHandler` events will not be emitted as long as the modal is open.
+On iOS, this callback is called when a Modal is being dismissed using a drag gesture when `presentationStyle` is `pageSheet` or `formSheet`. When `allowSwipeDismissal` is enabled this callback will be called after dismissing the modal.
+
+| Type                                                                                                                                                                                           |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| function <div className="label basic required">Required</div><div className="label android">Android</div><div className="label tv">TV</div><hr />function <div className="label ios">iOS</div> |
+
+---
+
+### `onShow`
+
+The `onShow` prop allows passing a function that will be called once the modal has been shown.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `presentationStyle` <div className="label ios">iOS</div>
+
+The `presentationStyle` prop controls how the modal appears (generally on larger devices such as iPad or plus-sized iPhones). See https://developer.apple.com/reference/uikit/uimodalpresentationstyle for details.
+
+Possible values:
+
+- `fullScreen` covers the screen completely
+- `pageSheet` covers portrait-width view centered (only on larger devices)
+- `formSheet` covers narrow-width view centered (only on larger devices)
+- `overFullScreen` covers the screen completely, but allows transparency
+
+| Type                                                                   | Default                                                                             |
+| ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
+| enum(`'fullScreen'`, `'pageSheet'`, `'formSheet'`, `'overFullScreen'`) | `fullScreen` if `transparent={false}`<hr />`overFullScreen` if `transparent={true}` |
+
+---
+
+### `statusBarTranslucent` <div className="label android">Android</div>
+
+The `statusBarTranslucent` prop determines whether your modal should go under the system statusbar.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `supportedOrientations` <div className="label ios">iOS</div>
+
+The `supportedOrientations` prop allows the modal to be rotated to any of the specified orientations. On iOS, the modal is still restricted by what's specified in your app's Info.plist's UISupportedInterfaceOrientations field.
+
+:::note
+When using `presentationStyle` of `pageSheet` or `formSheet`, this property will be ignored on iOS.
+:::
+
+| Type                                                                                                           | Default        |
+| -------------------------------------------------------------------------------------------------------------- | -------------- |
+| array of enums(`'portrait'`, `'portrait-upside-down'`, `'landscape'`, `'landscape-left'`, `'landscape-right'`) | `['portrait']` |
+
+---
+
+### `transparent`
+
+The `transparent` prop determines whether your modal will fill the entire view. Setting this to `true` will render the modal over a transparent background.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `visible`
+
+The `visible` prop determines whether your modal is visible.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `true`  |
diff --git a/website/versioned_docs/version-0.86/navigation.md b/website/versioned_docs/version-0.86/navigation.md
index 363b48b1261..4d9586bf801 100644
--- a/website/versioned_docs/version-0.86/navigation.md
+++ b/website/versioned_docs/version-0.86/navigation.md
@@ -64,7 +64,6 @@ Now you are ready to build and run your app on the device/simulator.
 Now you can create an app with a home screen and a profile screen:
 
 ```tsx
-import * as React from 'react';
 import {createStaticNavigation} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 
diff --git a/website/versioned_docs/version-0.86/network.md b/website/versioned_docs/version-0.86/network.md
index ac014628da1..f9ee27bb972 100644
--- a/website/versioned_docs/version-0.86/network.md
+++ b/website/versioned_docs/version-0.86/network.md
@@ -1,286 +1,286 @@
----
-id: network
-title: Networking
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may need to fetch a chunk of static content from another server.
-
-## Using Fetch
-
-React Native provides the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) for your networking needs. Fetch will seem familiar if you have used `XMLHttpRequest` or other networking APIs before. You may refer to MDN's guide on [Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) for additional information.
-
-### Making requests
-
-In order to fetch content from an arbitrary URL, you can pass the URL to fetch:
-
-```ts
-fetch('https://mywebsite.com/mydata.json');
-```
-
-Fetch also takes an optional second argument that allows you to customize the HTTP request. You may want to specify additional headers, or make a POST request:
-
-```ts
-fetch('https://mywebsite.com/endpoint/', {
-  method: 'POST',
-  headers: {
-    Accept: 'application/json',
-    'Content-Type': 'application/json',
-  },
-  body: JSON.stringify({
-    firstParam: 'yourValue',
-    secondParam: 'yourOtherValue',
-  }),
-});
-```
-
-Take a look at the [Fetch Request docs](https://developer.mozilla.org/en-US/docs/Web/API/Request) for a full list of properties.
-
-### Handling the response
-
-The above examples show how you can make a request. In many cases, you will want to do something with the response.
-
-Networking is an inherently asynchronous operation. Fetch method will return a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that makes it straightforward to write code that works in an asynchronous manner:
-
-```ts
-const getMoviesFromApi = () => {
-  return fetch('https://reactnative.dev/movies.json')
-    .then(response => response.json())
-    .then(json => {
-      return json.movies;
-    })
-    .catch(error => {
-      console.error(error);
-    });
-};
-```
-
-You can also use the `async` / `await` syntax in a React Native app:
-
-```ts
-const getMoviesFromApiAsync = async () => {
-  try {
-    const response = await fetch(
-      'https://reactnative.dev/movies.json',
-    );
-    const json = await response.json();
-    return json.movies;
-  } catch (error) {
-    console.error(error);
-  }
-};
-```
-
-Don't forget to catch any errors that may be thrown by `fetch`, otherwise they will be dropped silently.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Fetch%20Example&ext=js
-import React, {useEffect, useState} from 'react';
-import {ActivityIndicator, FlatList, Text, View} from 'react-native';
-
-const App = () => {
-  const [isLoading, setLoading] = useState(true);
-  const [data, setData] = useState([]);
-
-  const getMovies = async () => {
-    try {
-      const response = await fetch('https://reactnative.dev/movies.json');
-      const json = await response.json();
-      setData(json.movies);
-    } catch (error) {
-      console.error(error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    getMovies();
-  }, []);
-
-  return (
-    <View style={{flex: 1, padding: 24}}>
-      {isLoading ? (
-        <ActivityIndicator />
-      ) : (
-        <FlatList
-          data={data}
-          keyExtractor={({id}) => id}
-          renderItem={({item}) => (
-            <Text>
-              {item.title}, {item.releaseYear}
-            </Text>
-          )}
-        />
-      )}
-    </View>
-  );
-};
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Fetch%20Example&ext=tsx
-import React, {useEffect, useState} from 'react';
-import {ActivityIndicator, FlatList, Text, View} from 'react-native';
-
-type Movie = {
-  id: string;
-  title: string;
-  releaseYear: string;
-};
-
-type MoviesResponse = {
-  title: string;
-  description: string;
-  movies: Movie[];
-};
-
-const App = () => {
-  const [isLoading, setLoading] = useState(true);
-  const [data, setData] = useState<Movie[]>([]);
-
-  const getMovies = async () => {
-    try {
-      const response = await fetch('https://reactnative.dev/movies.json');
-      const json = (await response.json()) as MoviesResponse;
-      setData(json.movies);
-    } catch (error) {
-      console.error(error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    getMovies();
-  }, []);
-
-  return (
-    <View style={{flex: 1, padding: 24}}>
-      {isLoading ? (
-        <ActivityIndicator />
-      ) : (
-        <FlatList
-          data={data}
-          keyExtractor={({id}) => id}
-          renderItem={({item}) => (
-            <Text>
-              {item.title}, {item.releaseYear}
-            </Text>
-          )}
-        />
-      )}
-    </View>
-  );
-};
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-:::info
-By default, iOS 9.0 or later enforce App Transport Security (ATS). ATS requires any HTTP connection to use HTTPS. If you need to fetch from a cleartext URL (one that begins with `http`) you will first need to [add an ATS exception](integration-with-existing-apps.md#test-your-integration). If you know ahead of time what domains you will need access to, it is more secure to add exceptions only for those domains; if the domains are not known until runtime you can [disable ATS completely](publishing-to-app-store.md#1-enable-app-transport-security). Note however that from January 2017, [Apple's App Store review will require reasonable justification for disabling ATS](https://forums.developer.apple.com/thread/48979). See [Apple's documentation](https://developer.apple.com/library/ios/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html#//apple_ref/doc/uid/TP40009251-SW33) for more information.
-:::
-
-:::tip
-On Android, as of API Level 28, clear text traffic is also blocked by default. This behaviour can be overridden by setting [`android:usesCleartextTraffic`](https://developer.android.com/guide/topics/manifest/application-element#usesCleartextTraffic) in the app manifest file.
-:::
-
-## Using Other Networking Libraries
-
-The [XMLHttpRequest API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) is built into React Native. This means that you can use third party libraries such as [frisbee](https://github.com/niftylettuce/frisbee) or [axios](https://github.com/axios/axios) that depend on it, or you can use the XMLHttpRequest API directly if you prefer.
-
-```ts
-const request = new XMLHttpRequest();
-request.onreadystatechange = e => {
-  if (request.readyState !== 4) {
-    return;
-  }
-
-  if (request.status === 200) {
-    console.log('success', request.responseText);
-  } else {
-    console.warn('error');
-  }
-};
-
-request.open('GET', 'https://mywebsite.com/endpoint/');
-request.send();
-```
-
-:::warning Caution
-The security model for XMLHttpRequest is different than on web as there is no concept of [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) in native apps.
-:::
-
-## WebSocket Support
-
-React Native also supports [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket), a protocol which provides full-duplex communication channels over a single TCP connection.
-
-```ts
-const ws = new WebSocket('ws://host.com/path');
-
-ws.onopen = () => {
-  // connection opened
-  ws.send('something'); // send a message
-};
-
-ws.onmessage = e => {
-  // a message was received
-  console.log(e.data);
-};
-
-ws.onerror = e => {
-  // an error occurred
-  console.log(e.message);
-};
-
-ws.onclose = e => {
-  // connection closed
-  console.log(e.code, e.reason);
-};
-```
-
-## Known Issues with `fetch` and cookie based authentication
-
-The following options are currently not working with `fetch`
-
-- `redirect:manual`
-- `credentials:omit`
-
-* Having same name headers on Android will result in only the latest one being present. A temporary solution can be found here: https://github.com/facebook/react-native/issues/18837#issuecomment-398779994.
-* Cookie based authentication is currently unstable. You can view some of the issues raised here: https://github.com/facebook/react-native/issues/23185
-* As a minimum on iOS, when redirected through a `302`, if a `Set-Cookie` header is present, the cookie is not set properly. Since the redirect cannot be handled manually this might cause a scenario where infinite requests occur if the redirect is the result of an expired session.
-
-## Configuring NSURLSession on iOS
-
-For some applications it may be appropriate to provide a custom `NSURLSessionConfiguration` for the underlying `NSURLSession` that is used for network requests in a React Native application running on iOS. For instance, one may need to set a custom user agent string for all network requests coming from the app or supply `NSURLSession` with an ephemeral `NSURLSessionConfiguration`. The function `RCTSetCustomNSURLSessionConfigurationProvider` allows for such customization. Remember to add the following import to the file in which `RCTSetCustomNSURLSessionConfigurationProvider` will be called:
-
-```objectivec
-#import <React/RCTHTTPRequestHandler.h>
-```
-
-`RCTSetCustomNSURLSessionConfigurationProvider` should be called early in the application life cycle such that it is readily available when needed by React, for instance:
-
-```objectivec
--(void)application:(__unused UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
-
-  // set RCTSetCustomNSURLSessionConfigurationProvider
-  RCTSetCustomNSURLSessionConfigurationProvider(^NSURLSessionConfiguration *{
-     NSURLSessionConfiguration *configuration = [NSURLSessionConfiguration defaultSessionConfiguration];
-     // configure the session
-     return configuration;
-  });
-
-  // set up React
-  _bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
-}
-```
+---
+id: network
+title: Networking
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may need to fetch a chunk of static content from another server.
+
+## Using Fetch
+
+React Native provides the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) for your networking needs. Fetch will seem familiar if you have used `XMLHttpRequest` or other networking APIs before. You may refer to MDN's guide on [Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) for additional information.
+
+### Making requests
+
+In order to fetch content from an arbitrary URL, you can pass the URL to fetch:
+
+```ts
+fetch('https://mywebsite.com/mydata.json');
+```
+
+Fetch also takes an optional second argument that allows you to customize the HTTP request. You may want to specify additional headers, or make a POST request:
+
+```ts
+fetch('https://mywebsite.com/endpoint/', {
+  method: 'POST',
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json',
+  },
+  body: JSON.stringify({
+    firstParam: 'yourValue',
+    secondParam: 'yourOtherValue',
+  }),
+});
+```
+
+Take a look at the [Fetch Request docs](https://developer.mozilla.org/en-US/docs/Web/API/Request) for a full list of properties.
+
+### Handling the response
+
+The above examples show how you can make a request. In many cases, you will want to do something with the response.
+
+Networking is an inherently asynchronous operation. Fetch method will return a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that makes it straightforward to write code that works in an asynchronous manner:
+
+```ts
+const getMoviesFromApi = () => {
+  return fetch('https://reactnative.dev/movies.json')
+    .then(response => response.json())
+    .then(json => {
+      return json.movies;
+    })
+    .catch(error => {
+      console.error(error);
+    });
+};
+```
+
+You can also use the `async` / `await` syntax in a React Native app:
+
+```ts
+const getMoviesFromApiAsync = async () => {
+  try {
+    const response = await fetch(
+      'https://reactnative.dev/movies.json',
+    );
+    const json = await response.json();
+    return json.movies;
+  } catch (error) {
+    console.error(error);
+  }
+};
+```
+
+Don't forget to catch any errors that may be thrown by `fetch`, otherwise they will be dropped silently.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Fetch%20Example&ext=js
+import {useEffect, useState} from 'react';
+import {ActivityIndicator, FlatList, Text, View} from 'react-native';
+
+const App = () => {
+  const [isLoading, setLoading] = useState(true);
+  const [data, setData] = useState([]);
+
+  const getMovies = async () => {
+    try {
+      const response = await fetch('https://reactnative.dev/movies.json');
+      const json = await response.json();
+      setData(json.movies);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    getMovies();
+  }, []);
+
+  return (
+    <View style={{flex: 1, padding: 24}}>
+      {isLoading ? (
+        <ActivityIndicator />
+      ) : (
+        <FlatList
+          data={data}
+          keyExtractor={({id}) => id}
+          renderItem={({item}) => (
+            <Text>
+              {item.title}, {item.releaseYear}
+            </Text>
+          )}
+        />
+      )}
+    </View>
+  );
+};
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Fetch%20Example&ext=tsx
+import {useEffect, useState} from 'react';
+import {ActivityIndicator, FlatList, Text, View} from 'react-native';
+
+type Movie = {
+  id: string;
+  title: string;
+  releaseYear: string;
+};
+
+type MoviesResponse = {
+  title: string;
+  description: string;
+  movies: Movie[];
+};
+
+const App = () => {
+  const [isLoading, setLoading] = useState(true);
+  const [data, setData] = useState<Movie[]>([]);
+
+  const getMovies = async () => {
+    try {
+      const response = await fetch('https://reactnative.dev/movies.json');
+      const json = (await response.json()) as MoviesResponse;
+      setData(json.movies);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    getMovies();
+  }, []);
+
+  return (
+    <View style={{flex: 1, padding: 24}}>
+      {isLoading ? (
+        <ActivityIndicator />
+      ) : (
+        <FlatList
+          data={data}
+          keyExtractor={({id}) => id}
+          renderItem={({item}) => (
+            <Text>
+              {item.title}, {item.releaseYear}
+            </Text>
+          )}
+        />
+      )}
+    </View>
+  );
+};
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+:::info
+By default, iOS 9.0 or later enforce App Transport Security (ATS). ATS requires any HTTP connection to use HTTPS. If you need to fetch from a cleartext URL (one that begins with `http`) you will first need to [add an ATS exception](integration-with-existing-apps.md#test-your-integration). If you know ahead of time what domains you will need access to, it is more secure to add exceptions only for those domains; if the domains are not known until runtime you can [disable ATS completely](publishing-to-app-store.md#1-enable-app-transport-security). Note however that from January 2017, [Apple's App Store review will require reasonable justification for disabling ATS](https://forums.developer.apple.com/thread/48979). See [Apple's documentation](https://developer.apple.com/library/ios/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html#//apple_ref/doc/uid/TP40009251-SW33) for more information.
+:::
+
+:::tip
+On Android, as of API Level 28, clear text traffic is also blocked by default. This behaviour can be overridden by setting [`android:usesCleartextTraffic`](https://developer.android.com/guide/topics/manifest/application-element#usesCleartextTraffic) in the app manifest file.
+:::
+
+## Using Other Networking Libraries
+
+The [XMLHttpRequest API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) is built into React Native. This means that you can use third party libraries such as [frisbee](https://github.com/niftylettuce/frisbee) or [axios](https://github.com/axios/axios) that depend on it, or you can use the XMLHttpRequest API directly if you prefer.
+
+```ts
+const request = new XMLHttpRequest();
+request.onreadystatechange = e => {
+  if (request.readyState !== 4) {
+    return;
+  }
+
+  if (request.status === 200) {
+    console.log('success', request.responseText);
+  } else {
+    console.warn('error');
+  }
+};
+
+request.open('GET', 'https://mywebsite.com/endpoint/');
+request.send();
+```
+
+:::warning Caution
+The security model for XMLHttpRequest is different than on web as there is no concept of [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) in native apps.
+:::
+
+## WebSocket Support
+
+React Native also supports [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket), a protocol which provides full-duplex communication channels over a single TCP connection.
+
+```ts
+const ws = new WebSocket('ws://host.com/path');
+
+ws.onopen = () => {
+  // connection opened
+  ws.send('something'); // send a message
+};
+
+ws.onmessage = e => {
+  // a message was received
+  console.log(e.data);
+};
+
+ws.onerror = e => {
+  // an error occurred
+  console.log(e.message);
+};
+
+ws.onclose = e => {
+  // connection closed
+  console.log(e.code, e.reason);
+};
+```
+
+## Known Issues with `fetch` and cookie based authentication
+
+The following options are currently not working with `fetch`
+
+- `redirect:manual`
+- `credentials:omit`
+
+* Having same name headers on Android will result in only the latest one being present. A temporary solution can be found here: https://github.com/facebook/react-native/issues/18837#issuecomment-398779994.
+* Cookie based authentication is currently unstable. You can view some of the issues raised here: https://github.com/facebook/react-native/issues/23185
+* As a minimum on iOS, when redirected through a `302`, if a `Set-Cookie` header is present, the cookie is not set properly. Since the redirect cannot be handled manually this might cause a scenario where infinite requests occur if the redirect is the result of an expired session.
+
+## Configuring NSURLSession on iOS
+
+For some applications it may be appropriate to provide a custom `NSURLSessionConfiguration` for the underlying `NSURLSession` that is used for network requests in a React Native application running on iOS. For instance, one may need to set a custom user agent string for all network requests coming from the app or supply `NSURLSession` with an ephemeral `NSURLSessionConfiguration`. The function `RCTSetCustomNSURLSessionConfigurationProvider` allows for such customization. Remember to add the following import to the file in which `RCTSetCustomNSURLSessionConfigurationProvider` will be called:
+
+```objectivec
+#import <React/RCTHTTPRequestHandler.h>
+```
+
+`RCTSetCustomNSURLSessionConfigurationProvider` should be called early in the application life cycle such that it is readily available when needed by React, for instance:
+
+```objectivec
+-(void)application:(__unused UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
+
+  // set RCTSetCustomNSURLSessionConfigurationProvider
+  RCTSetCustomNSURLSessionConfigurationProvider(^NSURLSessionConfiguration *{
+     NSURLSessionConfiguration *configuration = [NSURLSessionConfiguration defaultSessionConfiguration];
+     // configure the session
+     return configuration;
+  });
+
+  // set up React
+  _bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
+}
+```
diff --git a/website/versioned_docs/version-0.86/optimizing-flatlist-configuration.md b/website/versioned_docs/version-0.86/optimizing-flatlist-configuration.md
index a81ec0c6cf6..11be2e33b7c 100644
--- a/website/versioned_docs/version-0.86/optimizing-flatlist-configuration.md
+++ b/website/versioned_docs/version-0.86/optimizing-flatlist-configuration.md
@@ -1,154 +1,154 @@
----
-id: optimizing-flatlist-configuration
-title: Optimizing FlatList Configuration
----
-
-## Terms
-
-- **VirtualizedList:** The component behind `FlatList` (React Native's implementation of the [`Virtual List`](https://bvaughn.github.io/react-virtualized/#/components/List) concept.)
-
-- **Memory consumption:** How much information about your list is being stored in memory, which could lead to an app crash.
-
-- **Responsiveness:** Application ability to respond to interactions. Low responsiveness, for instance, is when you touch on a component and it waits a bit to respond, instead of responding immediately as expected.
-
-- **Blank areas:** When `VirtualizedList` can't render your items fast enough, you may enter a part of your list with non-rendered components that appear as blank space.
-
-- **Viewport:** The visible area of content that is rendered to pixels.
-
-- **Window:** The area in which items should be mounted, which is generally much larger than the viewport.
-
-## Props
-
-Here are a list of props that can help to improve `FlatList` performance:
-
-### `removeClippedSubviews`
-
-| Type    | Default                              |
-| ------- | ------------------------------------ |
-| Boolean | `true` on Android, otherwise `false` |
-
-If `true`, views that are outside of the viewport are automatically detached from the native view hierarchy.
-
-**Pros:** This reduces time spent on the main thread, and thus reduces the risk of dropped frames, by excluding views outside of the viewport from the native rendering and drawing traversals.
-
-**Cons:** Be aware that this implementation can have bugs, such as missing content (mainly observed on iOS), especially if you are doing complex things with transforms and/or absolute positioning. Also note this does not save significant memory because the views are not deallocated, only detached.
-
-### `maxToRenderPerBatch`
-
-| Type   | Default |
-| ------ | ------- |
-| Number | 10      |
-
-It is a `VirtualizedList` prop that can be passed through `FlatList`. This controls the amount of items rendered per batch, which is the next chunk of items rendered on every scroll.
-
-**Pros:** Setting a bigger number means less visual blank areas when scrolling (increases the fill rate).
-
-**Cons:** More items per batch means longer periods of JavaScript execution potentially blocking other event processing, like presses, hurting responsiveness.
-
-### `updateCellsBatchingPeriod`
-
-| Type   | Default |
-| ------ | ------- |
-| Number | 50      |
-
-While `maxToRenderPerBatch` tells the amount of items rendered per batch, setting `updateCellsBatchingPeriod` tells your `VirtualizedList` the delay in milliseconds between batch renders (how frequently your component will be rendering the windowed items).
-
-**Pros:** Combining this prop with `maxToRenderPerBatch` gives you the power to, for example, render more items in a less frequent batch, or less items in a more frequent batch.
-
-**Cons:** Less frequent batches may cause blank areas, More frequent batches may cause responsiveness issues.
-
-### initialNumToRender
-
-| Type   | Default |
-| ------ | ------- |
-| Number | 10      |
-
-The initial amount of items to render.
-
-**Pros:** Define precise number of items that would cover the screen for every device. This can be a big performance boost for the initial render.
-
-**Cons:** Setting a low `initialNumToRender` may cause blank areas, especially if it's too small to cover the viewport on initial render.
-
-### `windowSize`
-
-| Type   | Default |
-| ------ | ------- |
-| Number | 21      |
-
-The number passed here is a measurement unit where 1 is equivalent to your viewport height. The default value is 21 (10 viewports above, 10 below, and one in between).
-
-**Pros:** Bigger `windowSize` will result in less chance of seeing blank space while scrolling. On the other hand, smaller `windowSize` will result in fewer items mounted simultaneously, saving memory.
-
-**Cons:** For a bigger `windowSize`, you will have more memory consumption. For a lower `windowSize`, you will have a bigger chance of seeing blank areas.
-
-## List items
-
-Below are some tips about list item components. They are the core of your list, so they need to be fast.
-
-### Use basic components
-
-The more complex your components are, the slower they will render. Try to avoid a lot of logic and nesting in your list items. If you are reusing this list item component a lot in your app, create a component only for your big lists and make them with as little logic and nesting as possible.
-
-### Use light components
-
-The heavier your components are, the slower they render. Avoid heavy images (use a cropped version or thumbnail for list items, as small as possible). Talk to your design team, use as little effects and interactions and information as possible in your list. Show them in your item's detail.
-
-### Use `memo()`
-
-`React.memo()` creates a memoized component that will be re-rendered only when the props passed to the component change. We can use this function to optimize the components in the FlatList.
-
-```tsx
-import React, {memo} from 'react';
-import {View, Text} from 'react-native';
-
-const MyListItem = memo(
-  ({title}: {title: string}) => (
-    <View>
-      <Text>{title}</Text>
-    </View>
-  ),
-  (prevProps, nextProps) => {
-    return prevProps.title === nextProps.title;
-  },
-);
-
-export default MyListItem;
-```
-
-In this example, we have determined that MyListItem should be re-rendered only when the title changes. We passed the comparison function as the second argument to React.memo() so that the component is re-rendered only when the specified prop is changed. If the comparison function returns true, the component will not be re-rendered.
-
-### Use cached optimized images
-
-You can use the community packages (such as [@d11/react-native-fast-image](https://github.com/ds-horizon/react-native-fast-image) from [Dream11](https://github.com/ds-horizon)) for more performant images. Every image in your list is a `new Image()` instance. The faster it reaches the `loaded` hook, the faster your JavaScript thread will be free again.
-
-### Use `getItemLayout`
-
-If all your list item components have the same height (or width, for a horizontal list), providing the [getItemLayout](flatlist#getitemlayout) prop removes the need for your `FlatList` to manage async layout calculations. This is a very desirable optimization technique.
-
-If your components have dynamic size and you really need performance, consider asking your design team if they may think of a redesign in order to perform better.
-
-### Use `keyExtractor` or `key`
-
-You can set the [`keyExtractor`](flatlist#keyextractor) to your `FlatList` component. This prop is used for caching and as the React `key` to track item re-ordering.
-
-You can also use a `key` prop in your item component.
-
-### Avoid anonymous function on `renderItem`
-
-For functional components, move the `renderItem` function outside of the returned JSX. Also, ensure that it is wrapped in a `useCallback` hook to prevent it from being recreated each render.
-
-For class components, move the `renderItem` function outside of the render function, so it won't recreate itself each time the render function is called.
-
-```tsx
-const renderItem = useCallback(({item}) => (
-   <View key={item.key}>
-      <Text>{item.title}</Text>
-   </View>
- ), []);
-
-return (
-  // ...
-  <FlatList data={items} renderItem={renderItem} />;
-  // ...
-);
-```
+---
+id: optimizing-flatlist-configuration
+title: Optimizing FlatList Configuration
+---
+
+## Terms
+
+- **VirtualizedList:** The component behind `FlatList` (React Native's implementation of the [`Virtual List`](https://bvaughn.github.io/react-virtualized/#/components/List) concept.)
+
+- **Memory consumption:** How much information about your list is being stored in memory, which could lead to an app crash.
+
+- **Responsiveness:** Application ability to respond to interactions. Low responsiveness, for instance, is when you touch on a component and it waits a bit to respond, instead of responding immediately as expected.
+
+- **Blank areas:** When `VirtualizedList` can't render your items fast enough, you may enter a part of your list with non-rendered components that appear as blank space.
+
+- **Viewport:** The visible area of content that is rendered to pixels.
+
+- **Window:** The area in which items should be mounted, which is generally much larger than the viewport.
+
+## Props
+
+Here are a list of props that can help to improve `FlatList` performance:
+
+### `removeClippedSubviews`
+
+| Type    | Default                              |
+| ------- | ------------------------------------ |
+| Boolean | `true` on Android, otherwise `false` |
+
+If `true`, views that are outside of the viewport are automatically detached from the native view hierarchy.
+
+**Pros:** This reduces time spent on the main thread, and thus reduces the risk of dropped frames, by excluding views outside of the viewport from the native rendering and drawing traversals.
+
+**Cons:** Be aware that this implementation can have bugs, such as missing content (mainly observed on iOS), especially if you are doing complex things with transforms and/or absolute positioning. Also note this does not save significant memory because the views are not deallocated, only detached.
+
+### `maxToRenderPerBatch`
+
+| Type   | Default |
+| ------ | ------- |
+| Number | 10      |
+
+It is a `VirtualizedList` prop that can be passed through `FlatList`. This controls the amount of items rendered per batch, which is the next chunk of items rendered on every scroll.
+
+**Pros:** Setting a bigger number means less visual blank areas when scrolling (increases the fill rate).
+
+**Cons:** More items per batch means longer periods of JavaScript execution potentially blocking other event processing, like presses, hurting responsiveness.
+
+### `updateCellsBatchingPeriod`
+
+| Type   | Default |
+| ------ | ------- |
+| Number | 50      |
+
+While `maxToRenderPerBatch` tells the amount of items rendered per batch, setting `updateCellsBatchingPeriod` tells your `VirtualizedList` the delay in milliseconds between batch renders (how frequently your component will be rendering the windowed items).
+
+**Pros:** Combining this prop with `maxToRenderPerBatch` gives you the power to, for example, render more items in a less frequent batch, or less items in a more frequent batch.
+
+**Cons:** Less frequent batches may cause blank areas, More frequent batches may cause responsiveness issues.
+
+### initialNumToRender
+
+| Type   | Default |
+| ------ | ------- |
+| Number | 10      |
+
+The initial amount of items to render.
+
+**Pros:** Define precise number of items that would cover the screen for every device. This can be a big performance boost for the initial render.
+
+**Cons:** Setting a low `initialNumToRender` may cause blank areas, especially if it's too small to cover the viewport on initial render.
+
+### `windowSize`
+
+| Type   | Default |
+| ------ | ------- |
+| Number | 21      |
+
+The number passed here is a measurement unit where 1 is equivalent to your viewport height. The default value is 21 (10 viewports above, 10 below, and one in between).
+
+**Pros:** Bigger `windowSize` will result in less chance of seeing blank space while scrolling. On the other hand, smaller `windowSize` will result in fewer items mounted simultaneously, saving memory.
+
+**Cons:** For a bigger `windowSize`, you will have more memory consumption. For a lower `windowSize`, you will have a bigger chance of seeing blank areas.
+
+## List items
+
+Below are some tips about list item components. They are the core of your list, so they need to be fast.
+
+### Use basic components
+
+The more complex your components are, the slower they will render. Try to avoid a lot of logic and nesting in your list items. If you are reusing this list item component a lot in your app, create a component only for your big lists and make them with as little logic and nesting as possible.
+
+### Use light components
+
+The heavier your components are, the slower they render. Avoid heavy images (use a cropped version or thumbnail for list items, as small as possible). Talk to your design team, use as little effects and interactions and information as possible in your list. Show them in your item's detail.
+
+### Use `memo()`
+
+`React.memo()` creates a memoized component that will be re-rendered only when the props passed to the component change. We can use this function to optimize the components in the FlatList.
+
+```tsx
+import {memo} from 'react';
+import {View, Text} from 'react-native';
+
+const MyListItem = memo(
+  ({title}: {title: string}) => (
+    <View>
+      <Text>{title}</Text>
+    </View>
+  ),
+  (prevProps, nextProps) => {
+    return prevProps.title === nextProps.title;
+  },
+);
+
+export default MyListItem;
+```
+
+In this example, we have determined that MyListItem should be re-rendered only when the title changes. We passed the comparison function as the second argument to React.memo() so that the component is re-rendered only when the specified prop is changed. If the comparison function returns true, the component will not be re-rendered.
+
+### Use cached optimized images
+
+You can use the community packages (such as [@d11/react-native-fast-image](https://github.com/ds-horizon/react-native-fast-image) from [Dream11](https://github.com/ds-horizon)) for more performant images. Every image in your list is a `new Image()` instance. The faster it reaches the `loaded` hook, the faster your JavaScript thread will be free again.
+
+### Use `getItemLayout`
+
+If all your list item components have the same height (or width, for a horizontal list), providing the [getItemLayout](flatlist#getitemlayout) prop removes the need for your `FlatList` to manage async layout calculations. This is a very desirable optimization technique.
+
+If your components have dynamic size and you really need performance, consider asking your design team if they may think of a redesign in order to perform better.
+
+### Use `keyExtractor` or `key`
+
+You can set the [`keyExtractor`](flatlist#keyextractor) to your `FlatList` component. This prop is used for caching and as the React `key` to track item re-ordering.
+
+You can also use a `key` prop in your item component.
+
+### Avoid anonymous function on `renderItem`
+
+For functional components, move the `renderItem` function outside of the returned JSX. Also, ensure that it is wrapped in a `useCallback` hook to prevent it from being recreated each render.
+
+For class components, move the `renderItem` function outside of the render function, so it won't recreate itself each time the render function is called.
+
+```tsx
+const renderItem = useCallback(({item}) => (
+   <View key={item.key}>
+      <Text>{item.title}</Text>
+   </View>
+ ), []);
+
+return (
+  // ...
+  <FlatList data={items} renderItem={renderItem} />;
+  // ...
+);
+```
diff --git a/website/versioned_docs/version-0.86/panresponder.md b/website/versioned_docs/version-0.86/panresponder.md
index fa6d8b8ee4e..eabd919aa1e 100644
--- a/website/versioned_docs/version-0.86/panresponder.md
+++ b/website/versioned_docs/version-0.86/panresponder.md
@@ -1,177 +1,177 @@
----
-id: panresponder
-title: PanResponder
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-`PanResponder` reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize basic multi-touch gestures.
-
-By default, `PanResponder` holds an `InteractionManager` handle to block long-running JS events from interrupting active gestures.
-
-It provides a predictable wrapper of the responder handlers provided by the [gesture responder system](gesture-responder-system.md). For each handler, it provides a new `gestureState` object alongside the native event object:
-
-```
-onPanResponderMove: (event, gestureState) => {}
-```
-
-A native event is a synthetic touch event with form of [PressEvent](pressevent).
-
-A `gestureState` object has the following:
-
-- `stateID` - ID of the gestureState- persisted as long as there's at least one touch on screen
-- `moveX` - the latest screen coordinates of the recently-moved touch
-- `moveY` - the latest screen coordinates of the recently-moved touch
-- `x0` - the screen coordinates of the responder grant
-- `y0` - the screen coordinates of the responder grant
-- `dx` - accumulated distance of the gesture since the touch started
-- `dy` - accumulated distance of the gesture since the touch started
-- `vx` - current velocity of the gesture
-- `vy` - current velocity of the gesture
-- `numberActiveTouches` - Number of touches currently on screen
-
-## Usage Pattern
-
-```tsx
-const ExampleComponent = () => {
-  const panResponder = React.useRef(
-    PanResponder.create({
-      // Ask to be the responder:
-      onStartShouldSetPanResponder: (evt, gestureState) => true,
-      onStartShouldSetPanResponderCapture: (evt, gestureState) =>
-        true,
-      onMoveShouldSetPanResponder: (evt, gestureState) => true,
-      onMoveShouldSetPanResponderCapture: (evt, gestureState) =>
-        true,
-
-      onPanResponderGrant: (evt, gestureState) => {
-        // The gesture has started. Show visual feedback so the user knows
-        // what is happening!
-        // gestureState.d{x,y} will be set to zero now
-      },
-      onPanResponderMove: (evt, gestureState) => {
-        // The most recent move distance is gestureState.move{X,Y}
-        // The accumulated gesture distance since becoming responder is
-        // gestureState.d{x,y}
-      },
-      onPanResponderTerminationRequest: (evt, gestureState) =>
-        true,
-      onPanResponderRelease: (evt, gestureState) => {
-        // The user has released all touches while this view is the
-        // responder. This typically means a gesture has succeeded
-      },
-      onPanResponderTerminate: (evt, gestureState) => {
-        // Another component has become the responder, so this gesture
-        // should be cancelled
-      },
-      onShouldBlockNativeResponder: (evt, gestureState) => {
-        // Returns whether this component should block native components from becoming the JS
-        // responder. Returns true by default. Is currently only supported on android.
-        return true;
-      },
-    }),
-  ).current;
-
-  return <View {...panResponder.panHandlers} />;
-};
-```
-
-## Example
-
-`PanResponder` works with `Animated` API to help build complex gestures in the UI. The following example contains an animated `View` component which can be dragged freely across the screen
-
-```SnackPlayer name=PanResponder
-import React, {useRef} from 'react';
-import {Animated, View, StyleSheet, PanResponder, Text} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const pan = useRef(new Animated.ValueXY()).current;
-
-  const panResponder = useRef(
-    PanResponder.create({
-      onMoveShouldSetPanResponder: () => true,
-      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
-      onPanResponderRelease: () => {
-        pan.extractOffset();
-      },
-    }),
-  ).current;
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.titleText}>Drag this box!</Text>
-        <Animated.View
-          style={{
-            transform: [{translateX: pan.x}, {translateY: pan.y}],
-          }}
-          {...panResponder.panHandlers}>
-          <View style={styles.box} />
-        </Animated.View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  titleText: {
-    fontSize: 14,
-    lineHeight: 24,
-    fontWeight: 'bold',
-  },
-  box: {
-    height: 150,
-    width: 150,
-    backgroundColor: 'blue',
-    borderRadius: 5,
-  },
-});
-
-export default App;
-```
-
-Try the [PanResponder example in RNTester](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js).
-
----
-
-# Reference
-
-## Methods
-
-### `create()`
-
-```tsx
-static create(config: PanResponderCallbacks): PanResponderInstance;
-```
-
-**Parameters:**
-
-| Name                                                        | Type   | Description |
-| ----------------------------------------------------------- | ------ | ----------- |
-| config <div className="label basic required">Required</div> | object | Refer below |
-
-The `config` object provides enhanced versions of all of the responder callbacks that provide not only the [`PressEvent`](pressevent), but also the `PanResponder` gesture state, by replacing the word `Responder` with `PanResponder` in each of the typical `onResponder*` callbacks. For example, the `config` object would look like:
-
-- `onMoveShouldSetPanResponder: (e, gestureState) => {...}`
-- `onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}`
-- `onStartShouldSetPanResponder: (e, gestureState) => {...}`
-- `onStartShouldSetPanResponderCapture: (e, gestureState) => {...}`
-- `onPanResponderReject: (e, gestureState) => {...}`
-- `onPanResponderGrant: (e, gestureState) => {...}`
-- `onPanResponderStart: (e, gestureState) => {...}`
-- `onPanResponderEnd: (e, gestureState) => {...}`
-- `onPanResponderRelease: (e, gestureState) => {...}`
-- `onPanResponderMove: (e, gestureState) => {...}`
-- `onPanResponderTerminate: (e, gestureState) => {...}`
-- `onPanResponderTerminationRequest: (e, gestureState) => {...}`
-- `onShouldBlockNativeResponder: (e, gestureState) => {...}`
-
-In general, for events that have capture equivalents, we update the gestureState once in the capture phase and can use it in the bubble phase as well.
-
-Be careful with `onStartShould*` callbacks. They only reflect updated `gestureState` for start/end events that bubble/capture to the Node. Once the node is the responder, you can rely on every start/end event being processed by the gesture and `gestureState` being updated accordingly. (numberActiveTouches) may not be totally accurate unless you are the responder.
+---
+id: panresponder
+title: PanResponder
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+`PanResponder` reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize basic multi-touch gestures.
+
+By default, `PanResponder` holds an `InteractionManager` handle to block long-running JS events from interrupting active gestures.
+
+It provides a predictable wrapper of the responder handlers provided by the [gesture responder system](gesture-responder-system.md). For each handler, it provides a new `gestureState` object alongside the native event object:
+
+```
+onPanResponderMove: (event, gestureState) => {}
+```
+
+A native event is a synthetic touch event with form of [PressEvent](pressevent).
+
+A `gestureState` object has the following:
+
+- `stateID` - ID of the gestureState- persisted as long as there's at least one touch on screen
+- `moveX` - the latest screen coordinates of the recently-moved touch
+- `moveY` - the latest screen coordinates of the recently-moved touch
+- `x0` - the screen coordinates of the responder grant
+- `y0` - the screen coordinates of the responder grant
+- `dx` - accumulated distance of the gesture since the touch started
+- `dy` - accumulated distance of the gesture since the touch started
+- `vx` - current velocity of the gesture
+- `vy` - current velocity of the gesture
+- `numberActiveTouches` - Number of touches currently on screen
+
+## Usage Pattern
+
+```tsx
+const ExampleComponent = () => {
+  const panResponder = useRef(
+    PanResponder.create({
+      // Ask to be the responder:
+      onStartShouldSetPanResponder: (evt, gestureState) => true,
+      onStartShouldSetPanResponderCapture: (evt, gestureState) =>
+        true,
+      onMoveShouldSetPanResponder: (evt, gestureState) => true,
+      onMoveShouldSetPanResponderCapture: (evt, gestureState) =>
+        true,
+
+      onPanResponderGrant: (evt, gestureState) => {
+        // The gesture has started. Show visual feedback so the user knows
+        // what is happening!
+        // gestureState.d{x,y} will be set to zero now
+      },
+      onPanResponderMove: (evt, gestureState) => {
+        // The most recent move distance is gestureState.move{X,Y}
+        // The accumulated gesture distance since becoming responder is
+        // gestureState.d{x,y}
+      },
+      onPanResponderTerminationRequest: (evt, gestureState) =>
+        true,
+      onPanResponderRelease: (evt, gestureState) => {
+        // The user has released all touches while this view is the
+        // responder. This typically means a gesture has succeeded
+      },
+      onPanResponderTerminate: (evt, gestureState) => {
+        // Another component has become the responder, so this gesture
+        // should be cancelled
+      },
+      onShouldBlockNativeResponder: (evt, gestureState) => {
+        // Returns whether this component should block native components from becoming the JS
+        // responder. Returns true by default. Is currently only supported on android.
+        return true;
+      },
+    }),
+  ).current;
+
+  return <View {...panResponder.panHandlers} />;
+};
+```
+
+## Example
+
+`PanResponder` works with `Animated` API to help build complex gestures in the UI. The following example contains an animated `View` component which can be dragged freely across the screen
+
+```SnackPlayer name=PanResponder
+import {useRef} from 'react';
+import {Animated, View, StyleSheet, PanResponder, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const pan = useRef(new Animated.ValueXY()).current;
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
+      onPanResponderRelease: () => {
+        pan.extractOffset();
+      },
+    }),
+  ).current;
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.titleText}>Drag this box!</Text>
+        <Animated.View
+          style={{
+            transform: [{translateX: pan.x}, {translateY: pan.y}],
+          }}
+          {...panResponder.panHandlers}>
+          <View style={styles.box} />
+        </Animated.View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  titleText: {
+    fontSize: 14,
+    lineHeight: 24,
+    fontWeight: 'bold',
+  },
+  box: {
+    height: 150,
+    width: 150,
+    backgroundColor: 'blue',
+    borderRadius: 5,
+  },
+});
+
+export default App;
+```
+
+Try the [PanResponder example in RNTester](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js).
+
+---
+
+# Reference
+
+## Methods
+
+### `create()`
+
+```tsx
+static create(config: PanResponderCallbacks): PanResponderInstance;
+```
+
+**Parameters:**
+
+| Name                                                        | Type   | Description |
+| ----------------------------------------------------------- | ------ | ----------- |
+| config <div className="label basic required">Required</div> | object | Refer below |
+
+The `config` object provides enhanced versions of all of the responder callbacks that provide not only the [`PressEvent`](pressevent), but also the `PanResponder` gesture state, by replacing the word `Responder` with `PanResponder` in each of the typical `onResponder*` callbacks. For example, the `config` object would look like:
+
+- `onMoveShouldSetPanResponder: (e, gestureState) => {...}`
+- `onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}`
+- `onStartShouldSetPanResponder: (e, gestureState) => {...}`
+- `onStartShouldSetPanResponderCapture: (e, gestureState) => {...}`
+- `onPanResponderReject: (e, gestureState) => {...}`
+- `onPanResponderGrant: (e, gestureState) => {...}`
+- `onPanResponderStart: (e, gestureState) => {...}`
+- `onPanResponderEnd: (e, gestureState) => {...}`
+- `onPanResponderRelease: (e, gestureState) => {...}`
+- `onPanResponderMove: (e, gestureState) => {...}`
+- `onPanResponderTerminate: (e, gestureState) => {...}`
+- `onPanResponderTerminationRequest: (e, gestureState) => {...}`
+- `onShouldBlockNativeResponder: (e, gestureState) => {...}`
+
+In general, for events that have capture equivalents, we update the gestureState once in the capture phase and can use it in the bubble phase as well.
+
+Be careful with `onStartShould*` callbacks. They only reflect updated `gestureState` for start/end events that bubble/capture to the Node. Once the node is the responder, you can rely on every start/end event being processed by the gesture and `gestureState` being updated accordingly. (numberActiveTouches) may not be totally accurate unless you are the responder.
diff --git a/website/versioned_docs/version-0.86/permissionsandroid.md b/website/versioned_docs/version-0.86/permissionsandroid.md
index ec1f486ba37..4e93941ad1f 100644
--- a/website/versioned_docs/version-0.86/permissionsandroid.md
+++ b/website/versioned_docs/version-0.86/permissionsandroid.md
@@ -17,7 +17,6 @@ If a user has previously turned off a permission that you prompt for, the OS wil
 ### Example
 
 ```SnackPlayer name=PermissionsAndroid%20Example&supportedPlatforms=android
-import React from 'react';
 import {
   Button,
   PermissionsAndroid,
diff --git a/website/versioned_docs/version-0.86/pixelratio.md b/website/versioned_docs/version-0.86/pixelratio.md
index 64e4eded49f..f298a8e73ab 100644
--- a/website/versioned_docs/version-0.86/pixelratio.md
+++ b/website/versioned_docs/version-0.86/pixelratio.md
@@ -30,7 +30,6 @@ In React Native, everything in JavaScript and within the layout engine works wit
 ## Example
 
 ```SnackPlayer name=PixelRatio%20Example
-import React from 'react';
 import {
   Image,
   PixelRatio,
diff --git a/website/versioned_docs/version-0.86/platform.md b/website/versioned_docs/version-0.86/platform.md
index 79f435ccd56..b8642658a84 100644
--- a/website/versioned_docs/version-0.86/platform.md
+++ b/website/versioned_docs/version-0.86/platform.md
@@ -6,7 +6,6 @@ title: Platform
 ## Example
 
 ```SnackPlayer name=Platform%20API%20Example&supportedPlatforms=ios,android
-import React from 'react';
 import {Platform, StyleSheet, Text, ScrollView} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.86/platformcolor.md b/website/versioned_docs/version-0.86/platformcolor.md
index 17371f76c26..040c6d2c18a 100644
--- a/website/versioned_docs/version-0.86/platformcolor.md
+++ b/website/versioned_docs/version-0.86/platformcolor.md
@@ -46,7 +46,6 @@ If you’re familiar with design systems, another way of thinking about this is
 ## Example
 
 ```SnackPlayer name=PlatformColor%20Example&supportedPlatforms=android,ios
-import React from 'react';
 import {Platform, PlatformColor, StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.86/pressable.md b/website/versioned_docs/version-0.86/pressable.md
index 590c77db974..3415bb2eb0a 100644
--- a/website/versioned_docs/version-0.86/pressable.md
+++ b/website/versioned_docs/version-0.86/pressable.md
@@ -1,268 +1,268 @@
----
-id: pressable
-title: Pressable
----
-
-Pressable is a Core Component wrapper that can detect various stages of press interactions on any of its defined children.
-
-```tsx
-<Pressable onPress={onPressFunction}>
-  <Text>I'm pressable!</Text>
-</Pressable>
-```
-
-## How it works
-
-On an element wrapped by `Pressable`:
-
-- [`onPressIn`](#onpressin) is called when a press is activated.
-- [`onPressOut`](#onpressout) is called when the press gesture is deactivated.
-
-After pressing [`onPressIn`](#onpressin), one of two things will happen:
-
-1. The person will remove their finger, triggering [`onPressOut`](#onpressout) followed by [`onPress`](#onpress).
-2. If the person leaves their finger longer than 500 milliseconds before removing it, [`onLongPress`](#onlongpress) is triggered. ([`onPressOut`](#onpressout) will still fire when they remove their finger.)
-
-<img src="/docs/assets/d_pressable_pressing.svg" width="1000" alt="Diagram of the onPress events in sequence." />
-
-Fingers are not the most precise instruments, and it is common for users to accidentally activate the wrong element or miss the activation area. To help, `Pressable` has an optional `HitRect` you can use to define how far a touch can register away from the wrapped element. Presses can start anywhere within a `HitRect`.
-
-`PressRect` allows presses to move beyond the element and its `HitRect` while maintaining activation and being eligible for a "press"—think of sliding your finger slowly away from a button you're pressing down on.
-
-:::note
-The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
-:::
-
-<figure>
-  <img src="/docs/assets/d_pressable_anatomy.svg" width="1000" alt="Diagram of HitRect and PressRect and how they work." />
-  <figcaption>
-    You can set <code>HitRect</code> with <code>hitSlop</code> and set <code>PressRect</code> with <code>pressRetentionOffset</code>.
-  </figcaption>
-</figure>
-
-:::info
-`Pressable` uses React Native's `Pressability` API. For more information around the state machine flow of Pressability and how it works, check out the implementation for [Pressability](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Pressability/Pressability.js#L350).
-:::
-
-## Example
-
-```SnackPlayer name=Pressable
-import React, {useState} from 'react';
-import {Pressable, StyleSheet, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [timesPressed, setTimesPressed] = useState(0);
-
-  let textLog = '';
-  if (timesPressed > 1) {
-    textLog = timesPressed + 'x onPress';
-  } else if (timesPressed > 0) {
-    textLog = 'onPress';
-  }
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Pressable
-          onPress={() => {
-            setTimesPressed(current => current + 1);
-          }}
-          style={({pressed}) => [
-            {
-              backgroundColor: pressed ? 'rgb(210, 230, 255)' : 'white',
-            },
-            styles.wrapperCustom,
-          ]}>
-          {({pressed}) => (
-            <Text style={styles.text}>{pressed ? 'Pressed!' : 'Press Me'}</Text>
-          )}
-        </Pressable>
-        <View style={styles.logBox}>
-          <Text testID="pressable_press_console">{textLog}</Text>
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  text: {
-    fontSize: 16,
-  },
-  wrapperCustom: {
-    borderRadius: 8,
-    padding: 6,
-  },
-  logBox: {
-    padding: 20,
-    margin: 10,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: '#f0f0f0',
-    backgroundColor: '#f9f9f9',
-  },
-});
-
-export default App;
-```
-
-## Props
-
-### `android_disableSound` <div className="label android">Android</div>
-
-If true, doesn't play Android system sound on press.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
-### `android_ripple` <div className="label android">Android</div>
-
-Enables the Android ripple effect and configures its properties.
-
-| Type                                   |
-| -------------------------------------- |
-| [RippleConfig](pressable#rippleconfig) |
-
-### `children`
-
-Either children or a function that receives a boolean reflecting whether the component is currently pressed.
-
-| Type                     |
-| ------------------------ |
-| [React Node](react-node) |
-
-### `unstable_pressDelay`
-
-Duration (in milliseconds) to wait after press down before calling `onPressIn`.
-
-| Type   |
-| ------ |
-| number |
-
-### `delayLongPress`
-
-Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
-
-| Type   | Default |
-| ------ | ------- |
-| number | `500`   |
-
-### `disabled`
-
-Whether the press behavior is disabled.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
-### `hitSlop`
-
-Sets additional distance outside of element in which a press can be detected.
-
-| Type                   |
-| ---------------------- |
-| [Rect](rect) or number |
-
-### `onHoverIn`
-
-Called when the hover is activated to provide visual feedback.
-
-| Type                                                                                                      |
-| --------------------------------------------------------------------------------------------------------- |
-| `md ({ nativeEvent: [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) }) => void` |
-
-### `onHoverOut`
-
-Called when the hover is deactivated to undo visual feedback.
-
-| Type                                                                                                      |
-| --------------------------------------------------------------------------------------------------------- |
-| `md ({ nativeEvent: [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) }) => void` |
-
-### `onLongPress`
-
-Called if the time after `onPressIn` lasts longer than 500 milliseconds. This time period can be customized with [`delayLongPress`](#delaylongpress).
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
-### `onPress`
-
-Called after `onPressOut`.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
-### `onPressIn`
-
-Called immediately when a touch is engaged, before `onPressOut` and `onPress`.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
-### `onPressMove`
-
-Called when the press location moves.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
-### `onPressOut`
-
-Called when a touch is released.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
-### `pressRetentionOffset`
-
-Additional distance outside of this view in which a touch is considered a press before `onPressOut` is triggered.
-
-| Type                   | Default                                      |
-| ---------------------- | -------------------------------------------- |
-| [Rect](rect) or number | `{bottom: 30, left: 20, right: 20, top: 20}` |
-
-### `style`
-
-Either view styles or a function that receives a boolean reflecting whether the component is currently pressed and returns view styles.
-
-| Type                                                                                            |
-| ----------------------------------------------------------------------------------------------- |
-| [View Style](view-style-props) or `md ({ pressed: boolean }) => [View Style](view-style-props)` |
-
-### `testOnly_pressed`
-
-Used only for documentation or testing (e.g. snapshot testing).
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
-## Type Definitions
-
-### RippleConfig
-
-Ripple effect configuration for the `android_ripple` property.
-
-| Type   |
-| ------ |
-| object |
-
-**Properties:**
-
-| Name       | Type            | Required | Description                                                                                                                                                                                                                                                  |
-| ---------- | --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| color      | [color](colors) | No       | Defines the color of the ripple effect.                                                                                                                                                                                                                      |
-| borderless | boolean         | No       | Defines if ripple effect should not include border.                                                                                                                                                                                                          |
-| radius     | number          | No       | Defines the radius of the ripple effect.                                                                                                                                                                                                                     |
-| foreground | boolean         | No       | Set to true to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them. |
+---
+id: pressable
+title: Pressable
+---
+
+Pressable is a Core Component wrapper that can detect various stages of press interactions on any of its defined children.
+
+```tsx
+<Pressable onPress={onPressFunction}>
+  <Text>I'm pressable!</Text>
+</Pressable>
+```
+
+## How it works
+
+On an element wrapped by `Pressable`:
+
+- [`onPressIn`](#onpressin) is called when a press is activated.
+- [`onPressOut`](#onpressout) is called when the press gesture is deactivated.
+
+After pressing [`onPressIn`](#onpressin), one of two things will happen:
+
+1. The person will remove their finger, triggering [`onPressOut`](#onpressout) followed by [`onPress`](#onpress).
+2. If the person leaves their finger longer than 500 milliseconds before removing it, [`onLongPress`](#onlongpress) is triggered. ([`onPressOut`](#onpressout) will still fire when they remove their finger.)
+
+<img src="/docs/assets/d_pressable_pressing.svg" width="1000" alt="Diagram of the onPress events in sequence." />
+
+Fingers are not the most precise instruments, and it is common for users to accidentally activate the wrong element or miss the activation area. To help, `Pressable` has an optional `HitRect` you can use to define how far a touch can register away from the wrapped element. Presses can start anywhere within a `HitRect`.
+
+`PressRect` allows presses to move beyond the element and its `HitRect` while maintaining activation and being eligible for a "press"—think of sliding your finger slowly away from a button you're pressing down on.
+
+:::note
+The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
+:::
+
+<figure>
+  <img src="/docs/assets/d_pressable_anatomy.svg" width="1000" alt="Diagram of HitRect and PressRect and how they work." />
+  <figcaption>
+    You can set <code>HitRect</code> with <code>hitSlop</code> and set <code>PressRect</code> with <code>pressRetentionOffset</code>.
+  </figcaption>
+</figure>
+
+:::info
+`Pressable` uses React Native's `Pressability` API. For more information around the state machine flow of Pressability and how it works, check out the implementation for [Pressability](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Pressability/Pressability.js#L350).
+:::
+
+## Example
+
+```SnackPlayer name=Pressable
+import {useState} from 'react';
+import {Pressable, StyleSheet, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [timesPressed, setTimesPressed] = useState(0);
+
+  let textLog = '';
+  if (timesPressed > 1) {
+    textLog = timesPressed + 'x onPress';
+  } else if (timesPressed > 0) {
+    textLog = 'onPress';
+  }
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Pressable
+          onPress={() => {
+            setTimesPressed(current => current + 1);
+          }}
+          style={({pressed}) => [
+            {
+              backgroundColor: pressed ? 'rgb(210, 230, 255)' : 'white',
+            },
+            styles.wrapperCustom,
+          ]}>
+          {({pressed}) => (
+            <Text style={styles.text}>{pressed ? 'Pressed!' : 'Press Me'}</Text>
+          )}
+        </Pressable>
+        <View style={styles.logBox}>
+          <Text testID="pressable_press_console">{textLog}</Text>
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 16,
+  },
+  wrapperCustom: {
+    borderRadius: 8,
+    padding: 6,
+  },
+  logBox: {
+    padding: 20,
+    margin: 10,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: '#f0f0f0',
+    backgroundColor: '#f9f9f9',
+  },
+});
+
+export default App;
+```
+
+## Props
+
+### `android_disableSound` <div className="label android">Android</div>
+
+If true, doesn't play Android system sound on press.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+### `android_ripple` <div className="label android">Android</div>
+
+Enables the Android ripple effect and configures its properties.
+
+| Type                                   |
+| -------------------------------------- |
+| [RippleConfig](pressable#rippleconfig) |
+
+### `children`
+
+Either children or a function that receives a boolean reflecting whether the component is currently pressed.
+
+| Type                     |
+| ------------------------ |
+| [React Node](react-node) |
+
+### `unstable_pressDelay`
+
+Duration (in milliseconds) to wait after press down before calling `onPressIn`.
+
+| Type   |
+| ------ |
+| number |
+
+### `delayLongPress`
+
+Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
+
+| Type   | Default |
+| ------ | ------- |
+| number | `500`   |
+
+### `disabled`
+
+Whether the press behavior is disabled.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+### `hitSlop`
+
+Sets additional distance outside of element in which a press can be detected.
+
+| Type                   |
+| ---------------------- |
+| [Rect](rect) or number |
+
+### `onHoverIn`
+
+Called when the hover is activated to provide visual feedback.
+
+| Type                                                                                                      |
+| --------------------------------------------------------------------------------------------------------- |
+| `md ({ nativeEvent: [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) }) => void` |
+
+### `onHoverOut`
+
+Called when the hover is deactivated to undo visual feedback.
+
+| Type                                                                                                      |
+| --------------------------------------------------------------------------------------------------------- |
+| `md ({ nativeEvent: [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) }) => void` |
+
+### `onLongPress`
+
+Called if the time after `onPressIn` lasts longer than 500 milliseconds. This time period can be customized with [`delayLongPress`](#delaylongpress).
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+### `onPress`
+
+Called after `onPressOut`.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+### `onPressIn`
+
+Called immediately when a touch is engaged, before `onPressOut` and `onPress`.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+### `onPressMove`
+
+Called when the press location moves.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+### `onPressOut`
+
+Called when a touch is released.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+### `pressRetentionOffset`
+
+Additional distance outside of this view in which a touch is considered a press before `onPressOut` is triggered.
+
+| Type                   | Default                                      |
+| ---------------------- | -------------------------------------------- |
+| [Rect](rect) or number | `{bottom: 30, left: 20, right: 20, top: 20}` |
+
+### `style`
+
+Either view styles or a function that receives a boolean reflecting whether the component is currently pressed and returns view styles.
+
+| Type                                                                                            |
+| ----------------------------------------------------------------------------------------------- |
+| [View Style](view-style-props) or `md ({ pressed: boolean }) => [View Style](view-style-props)` |
+
+### `testOnly_pressed`
+
+Used only for documentation or testing (e.g. snapshot testing).
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+## Type Definitions
+
+### RippleConfig
+
+Ripple effect configuration for the `android_ripple` property.
+
+| Type   |
+| ------ |
+| object |
+
+**Properties:**
+
+| Name       | Type            | Required | Description                                                                                                                                                                                                                                                  |
+| ---------- | --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| color      | [color](colors) | No       | Defines the color of the ripple effect.                                                                                                                                                                                                                      |
+| borderless | boolean         | No       | Defines if ripple effect should not include border.                                                                                                                                                                                                          |
+| radius     | number          | No       | Defines the radius of the ripple effect.                                                                                                                                                                                                                     |
+| foreground | boolean         | No       | Set to true to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them. |
diff --git a/website/versioned_docs/version-0.86/progressbarandroid.md b/website/versioned_docs/version-0.86/progressbarandroid.md
index 4f165d86c46..f8810dc541a 100644
--- a/website/versioned_docs/version-0.86/progressbarandroid.md
+++ b/website/versioned_docs/version-0.86/progressbarandroid.md
@@ -12,7 +12,6 @@ Android-only React component used to indicate that the app is loading or there i
 ### Example
 
 ```SnackPlayer name=ProgressBarAndroid&supportedPlatforms=android
-import React from 'react';
 import {View, StyleSheet, ProgressBarAndroid, Text} from 'react-native';
 
 const App = () => {
diff --git a/website/versioned_docs/version-0.86/props.md b/website/versioned_docs/version-0.86/props.md
index 490eb214632..8b24d6dd9f1 100644
--- a/website/versioned_docs/version-0.86/props.md
+++ b/website/versioned_docs/version-0.86/props.md
@@ -10,7 +10,6 @@ Most components can be customized when they are created, with different paramete
 For example, one basic React Native component is the `Image`. When you create an image, you can use a prop named `source` to control what image it shows.
 
 ```SnackPlayer name=Props
-import React from 'react';
 import {Image} from 'react-native';
 
 const Bananas = () => {
@@ -33,7 +32,6 @@ Your own components can also use `props`. This lets you make a single component
 <TabItem value="javascript">
 
 ```SnackPlayer name=Props&ext=js
-import React from 'react';
 import {Text, View} from 'react-native';
 
 const Greeting = props => {
@@ -61,7 +59,6 @@ export default LotsOfGreetings;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Props&ext=tsx
-import React from 'react';
 import {Text, View} from 'react-native';
 
 type GreetingProps = {
diff --git a/website/versioned_docs/version-0.86/refreshcontrol.md b/website/versioned_docs/version-0.86/refreshcontrol.md
index 7f7faab6744..f65d65a0036 100644
--- a/website/versioned_docs/version-0.86/refreshcontrol.md
+++ b/website/versioned_docs/version-0.86/refreshcontrol.md
@@ -1,167 +1,167 @@
----
-id: refreshcontrol
-title: RefreshControl
----
-
-This component is used inside a ScrollView or ListView to add pull to refresh functionality. When the ScrollView is at `scrollY: 0`, swiping down triggers an `onRefresh` event.
-
-## Example
-
-```SnackPlayer name=RefreshControl&supportedPlatforms=ios,android
-import React from 'react';
-import {RefreshControl, ScrollView, StyleSheet, Text} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [refreshing, setRefreshing] = React.useState(false);
-
-  const onRefresh = React.useCallback(() => {
-    setRefreshing(true);
-    setTimeout(() => {
-      setRefreshing(false);
-    }, 2000);
-  }, []);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <ScrollView
-          contentContainerStyle={styles.scrollView}
-          refreshControl={
-            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-          }>
-          <Text>Pull down to see RefreshControl indicator</Text>
-        </ScrollView>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  scrollView: {
-    flex: 1,
-    backgroundColor: 'pink',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-
-export default App;
-```
-
-:::note
-`refreshing` is a controlled prop, this is why it needs to be set to `true` in the `onRefresh` function otherwise the refresh indicator will stop immediately.
-:::
-
----
-
-# Reference
-
-## Props
-
-### [View Props](view.md#props)
-
-Inherits [View Props](view.md#props).
-
----
-
-### <div className="label required basic">Required</div>**`refreshing`**
-
-Whether the view should be indicating an active refresh.
-
-| Type    |
-| ------- |
-| boolean |
-
----
-
-### `colors` <div className="label android">Android</div>
-
-The colors (at least one) that will be used to draw the refresh indicator.
-
-| Type                         |
-| ---------------------------- |
-| array of [colors](colors.md) |
-
----
-
-### `enabled` <div className="label android">Android</div>
-
-Whether the pull to refresh functionality is enabled.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `true`  |
-
----
-
-### `onRefresh`
-
-Called when the view starts refreshing.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `progressBackgroundColor` <div className="label android">Android</div>
-
-The background color of the refresh indicator.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `progressViewOffset`
-
-Progress view top offset.
-
-| Type   | Default |
-| ------ | ------- |
-| number | `0`     |
-
----
-
-### `size` <div className="label android">Android</div>
-
-Size of the refresh indicator.
-
-| Type                         | Default     |
-| ---------------------------- | ----------- |
-| enum(`'default'`, `'large'`) | `'default'` |
-
----
-
-### `tintColor` <div className="label ios">iOS</div>
-
-The color of the refresh indicator.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `title` <div className="label ios">iOS</div>
-
-The title displayed under the refresh indicator.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `titleColor` <div className="label ios">iOS</div>
-
-The color of the refresh indicator title.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
+---
+id: refreshcontrol
+title: RefreshControl
+---
+
+This component is used inside a ScrollView or ListView to add pull to refresh functionality. When the ScrollView is at `scrollY: 0`, swiping down triggers an `onRefresh` event.
+
+## Example
+
+```SnackPlayer name=RefreshControl&supportedPlatforms=ios,android
+import {useCallback, useState} from 'react';
+import {RefreshControl, ScrollView, StyleSheet, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [refreshing, setRefreshing] = useState(false);
+
+  const onRefresh = useCallback(() => {
+    setRefreshing(true);
+    setTimeout(() => {
+      setRefreshing(false);
+    }, 2000);
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <ScrollView
+          contentContainerStyle={styles.scrollView}
+          refreshControl={
+            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+          }>
+          <Text>Pull down to see RefreshControl indicator</Text>
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollView: {
+    flex: 1,
+    backgroundColor: 'pink',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default App;
+```
+
+:::note
+`refreshing` is a controlled prop, this is why it needs to be set to `true` in the `onRefresh` function otherwise the refresh indicator will stop immediately.
+:::
+
+---
+
+# Reference
+
+## Props
+
+### [View Props](view.md#props)
+
+Inherits [View Props](view.md#props).
+
+---
+
+### <div className="label required basic">Required</div>**`refreshing`**
+
+Whether the view should be indicating an active refresh.
+
+| Type    |
+| ------- |
+| boolean |
+
+---
+
+### `colors` <div className="label android">Android</div>
+
+The colors (at least one) that will be used to draw the refresh indicator.
+
+| Type                         |
+| ---------------------------- |
+| array of [colors](colors.md) |
+
+---
+
+### `enabled` <div className="label android">Android</div>
+
+Whether the pull to refresh functionality is enabled.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `true`  |
+
+---
+
+### `onRefresh`
+
+Called when the view starts refreshing.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `progressBackgroundColor` <div className="label android">Android</div>
+
+The background color of the refresh indicator.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `progressViewOffset`
+
+Progress view top offset.
+
+| Type   | Default |
+| ------ | ------- |
+| number | `0`     |
+
+---
+
+### `size` <div className="label android">Android</div>
+
+Size of the refresh indicator.
+
+| Type                         | Default     |
+| ---------------------------- | ----------- |
+| enum(`'default'`, `'large'`) | `'default'` |
+
+---
+
+### `tintColor` <div className="label ios">iOS</div>
+
+The color of the refresh indicator.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `title` <div className="label ios">iOS</div>
+
+The title displayed under the refresh indicator.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `titleColor` <div className="label ios">iOS</div>
+
+The color of the refresh indicator title.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
diff --git a/website/versioned_docs/version-0.86/safeareaview.md b/website/versioned_docs/version-0.86/safeareaview.md
index fd0d2d479c3..b8373e905a2 100644
--- a/website/versioned_docs/version-0.86/safeareaview.md
+++ b/website/versioned_docs/version-0.86/safeareaview.md
@@ -16,7 +16,6 @@ The purpose of `SafeAreaView` is to render content within the safe area boundari
 To use, wrap your top level view with a `SafeAreaView` with a `flex: 1` style applied to it. You may also want to use a background color that matches your application's design.
 
 ```SnackPlayer name=SafeAreaView&supportedPlatforms=ios
-import React from 'react';
 import {StyleSheet, Text, SafeAreaView} from 'react-native';
 
 const App = () => {
diff --git a/website/versioned_docs/version-0.86/scrollview.md b/website/versioned_docs/version-0.86/scrollview.md
index f24d99073cc..aec1d79a36b 100644
--- a/website/versioned_docs/version-0.86/scrollview.md
+++ b/website/versioned_docs/version-0.86/scrollview.md
@@ -22,7 +22,6 @@ This is where `FlatList` comes into play. `FlatList` renders items lazily, when
 ## Example
 
 ```SnackPlayer name=ScrollView%20Example
-import React from 'react';
 import {StyleSheet, Text, ScrollView, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.86/sectionlist.md b/website/versioned_docs/version-0.86/sectionlist.md
index d0e9519a301..ead40b211b9 100644
--- a/website/versioned_docs/version-0.86/sectionlist.md
+++ b/website/versioned_docs/version-0.86/sectionlist.md
@@ -21,7 +21,6 @@ If you don't need section support and want a simpler interface, use [`<FlatList>
 ## Example
 
 ```SnackPlayer name=SectionList%20Example
-import React from 'react';
 import {StyleSheet, Text, View, SectionList, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.86/settings.md b/website/versioned_docs/version-0.86/settings.md
index 01c0533d813..af0136d8257 100644
--- a/website/versioned_docs/version-0.86/settings.md
+++ b/website/versioned_docs/version-0.86/settings.md
@@ -1,103 +1,103 @@
----
-id: settings
-title: Settings
----
-
-`Settings` serves as a wrapper for [`NSUserDefaults`](https://developer.apple.com/documentation/foundation/nsuserdefaults), a persistent key-value store available only on iOS.
-
-## Example
-
-```SnackPlayer name=Settings%20Example&supportedPlatforms=ios
-import React, {useState} from 'react';
-import {Button, Settings, StyleSheet, Text} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [data, setData] = useState(() => Settings.get('data'));
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text>Stored value:</Text>
-        <Text style={styles.value}>{data}</Text>
-        <Button
-          onPress={() => {
-            Settings.set({data: 'React'});
-            setData(Settings.get('data'));
-          }}
-          title="Store 'React'"
-        />
-        <Button
-          onPress={() => {
-            Settings.set({data: 'Native'});
-            setData(Settings.get('data'));
-          }}
-          title="Store 'Native'"
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  value: {
-    fontSize: 24,
-    marginVertical: 12,
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Methods
-
-### `clearWatch()`
-
-```tsx
-static clearWatch(watchId: number);
-```
-
-`watchId` is the number returned by `watchKeys()` when the subscription was originally configured.
-
----
-
-### `get()`
-
-```tsx
-static get(key: string): any;
-```
-
-Get the current value for a given `key` in `NSUserDefaults`.
-
----
-
-### `set()`
-
-```tsx
-static set(settings: Record<string, any>);
-```
-
-Set one or more values in `NSUserDefaults`.
-
----
-
-### `watchKeys()`
-
-```tsx
-static watchKeys(keys: string | array<string>, callback: () => void): number;
-```
-
-Subscribe to be notified when the value for any of the keys specified by the `keys` parameter has been changed in `NSUserDefaults`. Returns a `watchId` number that may be used with `clearWatch()` to unsubscribe.
-
-:::note
-`watchKeys()` by design ignores internal `set()` calls and fires callback only on changes preformed outside of React Native code.
-:::
+---
+id: settings
+title: Settings
+---
+
+`Settings` serves as a wrapper for [`NSUserDefaults`](https://developer.apple.com/documentation/foundation/nsuserdefaults), a persistent key-value store available only on iOS.
+
+## Example
+
+```SnackPlayer name=Settings%20Example&supportedPlatforms=ios
+import {useState} from 'react';
+import {Button, Settings, StyleSheet, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [data, setData] = useState(() => Settings.get('data'));
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text>Stored value:</Text>
+        <Text style={styles.value}>{data}</Text>
+        <Button
+          onPress={() => {
+            Settings.set({data: 'React'});
+            setData(Settings.get('data'));
+          }}
+          title="Store 'React'"
+        />
+        <Button
+          onPress={() => {
+            Settings.set({data: 'Native'});
+            setData(Settings.get('data'));
+          }}
+          title="Store 'Native'"
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  value: {
+    fontSize: 24,
+    marginVertical: 12,
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `clearWatch()`
+
+```tsx
+static clearWatch(watchId: number);
+```
+
+`watchId` is the number returned by `watchKeys()` when the subscription was originally configured.
+
+---
+
+### `get()`
+
+```tsx
+static get(key: string): any;
+```
+
+Get the current value for a given `key` in `NSUserDefaults`.
+
+---
+
+### `set()`
+
+```tsx
+static set(settings: Record<string, any>);
+```
+
+Set one or more values in `NSUserDefaults`.
+
+---
+
+### `watchKeys()`
+
+```tsx
+static watchKeys(keys: string | array<string>, callback: () => void): number;
+```
+
+Subscribe to be notified when the value for any of the keys specified by the `keys` parameter has been changed in `NSUserDefaults`. Returns a `watchId` number that may be used with `clearWatch()` to unsubscribe.
+
+:::note
+`watchKeys()` by design ignores internal `set()` calls and fires callback only on changes preformed outside of React Native code.
+:::
diff --git a/website/versioned_docs/version-0.86/shadow-props.md b/website/versioned_docs/version-0.86/shadow-props.md
index d5e8a037059..91553622bd3 100644
--- a/website/versioned_docs/version-0.86/shadow-props.md
+++ b/website/versioned_docs/version-0.86/shadow-props.md
@@ -1,285 +1,285 @@
----
-id: shadow-props
-title: Shadow Props
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=js&dependencies=@react-native-community/slider
-import React, {useState} from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-import Slider from '@react-native-community/slider';
-
-const ShadowPropSlider = ({label, value, ...props}) => {
-  return (
-    <>
-      <Text>
-        {label} ({value.toFixed(2)})
-      </Text>
-      <Slider step={1} value={value} {...props} />
-    </>
-  );
-};
-
-const App = () => {
-  const [shadowOffsetWidth, setShadowOffsetWidth] = useState(0);
-  const [shadowOffsetHeight, setShadowOffsetHeight] = useState(0);
-  const [shadowRadius, setShadowRadius] = useState(0);
-  const [shadowOpacity, setShadowOpacity] = useState(0.1);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View
-          style={[
-            styles.square,
-            {
-              shadowOffset: {
-                width: shadowOffsetWidth,
-                height: -shadowOffsetHeight,
-              },
-              shadowOpacity,
-              shadowRadius,
-            },
-          ]}
-        />
-        <View style={styles.controls}>
-          <ShadowPropSlider
-            label="shadowOffset - X"
-            minimumValue={-50}
-            maximumValue={50}
-            value={shadowOffsetWidth}
-            onValueChange={setShadowOffsetWidth}
-          />
-          <ShadowPropSlider
-            label="shadowOffset - Y"
-            minimumValue={-50}
-            maximumValue={50}
-            value={shadowOffsetHeight}
-            onValueChange={setShadowOffsetHeight}
-          />
-          <ShadowPropSlider
-            label="shadowRadius"
-            minimumValue={0}
-            maximumValue={100}
-            value={shadowRadius}
-            onValueChange={setShadowRadius}
-          />
-          <ShadowPropSlider
-            label="shadowOpacity"
-            minimumValue={0}
-            maximumValue={1}
-            step={0.05}
-            value={shadowOpacity}
-            onValueChange={val => setShadowOpacity(val)}
-          />
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'space-around',
-    backgroundColor: '#ecf0f1',
-    padding: 8,
-  },
-  square: {
-    alignSelf: 'center',
-    backgroundColor: 'white',
-    borderRadius: 4,
-    height: 150,
-    shadowColor: 'black',
-    width: 150,
-  },
-  controls: {
-    paddingHorizontal: 12,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=tsx&dependencies=@react-native-community/slider
-import React, {useState} from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-import Slider, {SliderProps} from '@react-native-community/slider';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-type ShadowPropSliderProps = SliderProps & {
-  label: string;
-};
-
-const ShadowPropSlider = ({label, value, ...props}: ShadowPropSliderProps) => {
-  return (
-    <>
-      <Text>
-        {label} ({value?.toFixed(2)})
-      </Text>
-      <Slider step={1} value={value} {...props} />
-    </>
-  );
-};
-
-const App = () => {
-  const [shadowOffsetWidth, setShadowOffsetWidth] = useState(0);
-  const [shadowOffsetHeight, setShadowOffsetHeight] = useState(0);
-  const [shadowRadius, setShadowRadius] = useState(0);
-  const [shadowOpacity, setShadowOpacity] = useState(0.1);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View
-          style={[
-            styles.square,
-            {
-              shadowOffset: {
-                width: shadowOffsetWidth,
-                height: -shadowOffsetHeight,
-              },
-              shadowOpacity,
-              shadowRadius,
-            },
-          ]}
-        />
-        <View style={styles.controls}>
-          <ShadowPropSlider
-            label="shadowOffset - X"
-            minimumValue={-50}
-            maximumValue={50}
-            value={shadowOffsetWidth}
-            onValueChange={setShadowOffsetWidth}
-          />
-          <ShadowPropSlider
-            label="shadowOffset - Y"
-            minimumValue={-50}
-            maximumValue={50}
-            value={shadowOffsetHeight}
-            onValueChange={setShadowOffsetHeight}
-          />
-          <ShadowPropSlider
-            label="shadowRadius"
-            minimumValue={0}
-            maximumValue={100}
-            value={shadowRadius}
-            onValueChange={setShadowRadius}
-          />
-          <ShadowPropSlider
-            label="shadowOpacity"
-            minimumValue={0}
-            maximumValue={1}
-            step={0.05}
-            value={shadowOpacity}
-            onValueChange={val => setShadowOpacity(val)}
-          />
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'space-around',
-    backgroundColor: '#ecf0f1',
-    padding: 8,
-  },
-  square: {
-    alignSelf: 'center',
-    backgroundColor: 'white',
-    borderRadius: 4,
-    height: 150,
-    shadowColor: 'black',
-    width: 150,
-  },
-  controls: {
-    paddingHorizontal: 12,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
----
-
-# Reference
-
-There are 3 sets of shadow APIs in React Native:
-
-- `boxShadow`: A View style prop and a spec-compliant implementation of the [web style prop of the same name](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow).
-- `dropShadow`: A specific filter function available as part of the [`filter`](./view-style-props#filter) View style prop.
-- Various `shadow` props (`shadowColor`, `shadowOffset`, `shadowOpacity`, `shadowRadius`): These map directly to their native counterparts exposed by the platform-level APIs.
-
-The difference between `dropShadow` and `boxShadow` are as follows:
-
-- `dropShadow` exists as part of `filter`, whereas `boxShadow` is a standalone style prop.
-- `dropShadow` is an alpha mask, so only pixels with a positive alpha value will "cast" a shadow. `boxShadow` will cast around the border box of the element no matter it's contents (unless it is inset).
-- `dropShadow` is only available on Android, `boxShadow` is available on iOS and Android.
-- `dropShadow` cannot be inset like `boxShadow`.
-- `dropShadow` does not have the `spreadDistance` argument like `boxShadow`.
-
-Both `boxShadow` and `dropShadow` are generally more capable than the `shadow` props. The `shadow` props, however, map to native platform-level APIs, so if you only need a straightforward shadow these props are recommended. Note that only `shadowColor` works on both Android and iOS, all other `shadow` props only work on iOS.
-
-## Props
-
-### `boxShadow`
-
-See [View Style Props](./view-style-props#boxshadow) for documentation.
-
-### `dropShadow` <div className="label android">Android</div>
-
-See [View Style Props](./view-style-props#filter) for documentation.
-
-### `shadowColor`
-
-Sets the drop shadow color.
-
-This property will only work on Android API 28 and above. For similar functionality on lower Android APIs, use the [`elevation` property](view-style-props#elevation-android).
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `shadowOffset` <div className="label ios">iOS</div>
-
-Sets the drop shadow offset.
-
-| Type                                     |
-| ---------------------------------------- |
-| object: `{width: number,height: number}` |
-
----
-
-### `shadowOpacity` <div className="label ios">iOS</div>
-
-Sets the drop shadow opacity (multiplied by the color's alpha component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `shadowRadius` <div className="label ios">iOS</div>
-
-Sets the drop shadow blur radius.
-
-| Type   |
-| ------ |
-| number |
+---
+id: shadow-props
+title: Shadow Props
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=js&dependencies=@react-native-community/slider
+import {useState} from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+import Slider from '@react-native-community/slider';
+
+const ShadowPropSlider = ({label, value, ...props}) => {
+  return (
+    <>
+      <Text>
+        {label} ({value.toFixed(2)})
+      </Text>
+      <Slider step={1} value={value} {...props} />
+    </>
+  );
+};
+
+const App = () => {
+  const [shadowOffsetWidth, setShadowOffsetWidth] = useState(0);
+  const [shadowOffsetHeight, setShadowOffsetHeight] = useState(0);
+  const [shadowRadius, setShadowRadius] = useState(0);
+  const [shadowOpacity, setShadowOpacity] = useState(0.1);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View
+          style={[
+            styles.square,
+            {
+              shadowOffset: {
+                width: shadowOffsetWidth,
+                height: -shadowOffsetHeight,
+              },
+              shadowOpacity,
+              shadowRadius,
+            },
+          ]}
+        />
+        <View style={styles.controls}>
+          <ShadowPropSlider
+            label="shadowOffset - X"
+            minimumValue={-50}
+            maximumValue={50}
+            value={shadowOffsetWidth}
+            onValueChange={setShadowOffsetWidth}
+          />
+          <ShadowPropSlider
+            label="shadowOffset - Y"
+            minimumValue={-50}
+            maximumValue={50}
+            value={shadowOffsetHeight}
+            onValueChange={setShadowOffsetHeight}
+          />
+          <ShadowPropSlider
+            label="shadowRadius"
+            minimumValue={0}
+            maximumValue={100}
+            value={shadowRadius}
+            onValueChange={setShadowRadius}
+          />
+          <ShadowPropSlider
+            label="shadowOpacity"
+            minimumValue={0}
+            maximumValue={1}
+            step={0.05}
+            value={shadowOpacity}
+            onValueChange={val => setShadowOpacity(val)}
+          />
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'space-around',
+    backgroundColor: '#ecf0f1',
+    padding: 8,
+  },
+  square: {
+    alignSelf: 'center',
+    backgroundColor: 'white',
+    borderRadius: 4,
+    height: 150,
+    shadowColor: 'black',
+    width: 150,
+  },
+  controls: {
+    paddingHorizontal: 12,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=tsx&dependencies=@react-native-community/slider
+import {useState} from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+import Slider, {SliderProps} from '@react-native-community/slider';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+type ShadowPropSliderProps = SliderProps & {
+  label: string;
+};
+
+const ShadowPropSlider = ({label, value, ...props}: ShadowPropSliderProps) => {
+  return (
+    <>
+      <Text>
+        {label} ({value?.toFixed(2)})
+      </Text>
+      <Slider step={1} value={value} {...props} />
+    </>
+  );
+};
+
+const App = () => {
+  const [shadowOffsetWidth, setShadowOffsetWidth] = useState(0);
+  const [shadowOffsetHeight, setShadowOffsetHeight] = useState(0);
+  const [shadowRadius, setShadowRadius] = useState(0);
+  const [shadowOpacity, setShadowOpacity] = useState(0.1);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View
+          style={[
+            styles.square,
+            {
+              shadowOffset: {
+                width: shadowOffsetWidth,
+                height: -shadowOffsetHeight,
+              },
+              shadowOpacity,
+              shadowRadius,
+            },
+          ]}
+        />
+        <View style={styles.controls}>
+          <ShadowPropSlider
+            label="shadowOffset - X"
+            minimumValue={-50}
+            maximumValue={50}
+            value={shadowOffsetWidth}
+            onValueChange={setShadowOffsetWidth}
+          />
+          <ShadowPropSlider
+            label="shadowOffset - Y"
+            minimumValue={-50}
+            maximumValue={50}
+            value={shadowOffsetHeight}
+            onValueChange={setShadowOffsetHeight}
+          />
+          <ShadowPropSlider
+            label="shadowRadius"
+            minimumValue={0}
+            maximumValue={100}
+            value={shadowRadius}
+            onValueChange={setShadowRadius}
+          />
+          <ShadowPropSlider
+            label="shadowOpacity"
+            minimumValue={0}
+            maximumValue={1}
+            step={0.05}
+            value={shadowOpacity}
+            onValueChange={val => setShadowOpacity(val)}
+          />
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'space-around',
+    backgroundColor: '#ecf0f1',
+    padding: 8,
+  },
+  square: {
+    alignSelf: 'center',
+    backgroundColor: 'white',
+    borderRadius: 4,
+    height: 150,
+    shadowColor: 'black',
+    width: 150,
+  },
+  controls: {
+    paddingHorizontal: 12,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+---
+
+# Reference
+
+There are 3 sets of shadow APIs in React Native:
+
+- `boxShadow`: A View style prop and a spec-compliant implementation of the [web style prop of the same name](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow).
+- `dropShadow`: A specific filter function available as part of the [`filter`](./view-style-props#filter) View style prop.
+- Various `shadow` props (`shadowColor`, `shadowOffset`, `shadowOpacity`, `shadowRadius`): These map directly to their native counterparts exposed by the platform-level APIs.
+
+The difference between `dropShadow` and `boxShadow` are as follows:
+
+- `dropShadow` exists as part of `filter`, whereas `boxShadow` is a standalone style prop.
+- `dropShadow` is an alpha mask, so only pixels with a positive alpha value will "cast" a shadow. `boxShadow` will cast around the border box of the element no matter it's contents (unless it is inset).
+- `dropShadow` is only available on Android, `boxShadow` is available on iOS and Android.
+- `dropShadow` cannot be inset like `boxShadow`.
+- `dropShadow` does not have the `spreadDistance` argument like `boxShadow`.
+
+Both `boxShadow` and `dropShadow` are generally more capable than the `shadow` props. The `shadow` props, however, map to native platform-level APIs, so if you only need a straightforward shadow these props are recommended. Note that only `shadowColor` works on both Android and iOS, all other `shadow` props only work on iOS.
+
+## Props
+
+### `boxShadow`
+
+See [View Style Props](./view-style-props#boxshadow) for documentation.
+
+### `dropShadow` <div className="label android">Android</div>
+
+See [View Style Props](./view-style-props#filter) for documentation.
+
+### `shadowColor`
+
+Sets the drop shadow color.
+
+This property will only work on Android API 28 and above. For similar functionality on lower Android APIs, use the [`elevation` property](view-style-props#elevation-android).
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `shadowOffset` <div className="label ios">iOS</div>
+
+Sets the drop shadow offset.
+
+| Type                                     |
+| ---------------------------------------- |
+| object: `{width: number,height: number}` |
+
+---
+
+### `shadowOpacity` <div className="label ios">iOS</div>
+
+Sets the drop shadow opacity (multiplied by the color's alpha component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `shadowRadius` <div className="label ios">iOS</div>
+
+Sets the drop shadow blur radius.
+
+| Type   |
+| ------ |
+| number |
diff --git a/website/versioned_docs/version-0.86/share.md b/website/versioned_docs/version-0.86/share.md
index 1fc5823361f..46d0f858435 100644
--- a/website/versioned_docs/version-0.86/share.md
+++ b/website/versioned_docs/version-0.86/share.md
@@ -11,7 +11,6 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con
 <TabItem value="javascript">
 
 ```SnackPlayer name=Example&supportedPlatforms=ios,android&ext=js
-import React from 'react';
 import {Alert, Share, Button} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -51,7 +50,6 @@ export default ShareExample;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Example&supportedPlatforms=ios,android&ext=tsx
-import React from 'react';
 import {Alert, Share, Button} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.86/state.md b/website/versioned_docs/version-0.86/state.md
index bc162f44b40..ebf3ec14336 100644
--- a/website/versioned_docs/version-0.86/state.md
+++ b/website/versioned_docs/version-0.86/state.md
@@ -1,103 +1,103 @@
----
-id: state
-title: State
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-There are two types of data that control a component: `props` and `state`. `props` are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use `state`.
-
-In general, you should initialize `state` in the constructor, and then call `setState` when you want to change it.
-
-For example, let's say we want to make text that blinks all the time. The text itself gets set once when the blinking component gets created, so the text itself is a `prop`. The "whether the text is currently on or off" changes over time, so that should be kept in `state`.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=State&ext=js
-import React, {useState, useEffect} from 'react';
-import {Text, View} from 'react-native';
-
-const Blink = props => {
-  const [isShowingText, setIsShowingText] = useState(true);
-
-  useEffect(() => {
-    const toggle = setInterval(() => {
-      setIsShowingText(!isShowingText);
-    }, 1000);
-
-    return () => clearInterval(toggle);
-  });
-
-  if (!isShowingText) {
-    return null;
-  }
-
-  return <Text>{props.text}</Text>;
-};
-
-const BlinkApp = () => {
-  return (
-    <View style={{marginTop: 50}}>
-      <Blink text="I love to blink" />
-      <Blink text="Yes blinking is so great" />
-      <Blink text="Why did they ever take this out of HTML" />
-      <Blink text="Look at me look at me look at me" />
-    </View>
-  );
-};
-
-export default BlinkApp;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=State&ext=tsx
-import React, {useState, useEffect} from 'react';
-import {Text, View} from 'react-native';
-
-type BlinkProps = {
-  text: string;
-};
-
-const Blink = (props: BlinkProps) => {
-  const [isShowingText, setIsShowingText] = useState(true);
-
-  useEffect(() => {
-    const toggle = setInterval(() => {
-      setIsShowingText(!isShowingText);
-    }, 1000);
-
-    return () => clearInterval(toggle);
-  });
-
-  if (!isShowingText) {
-    return null;
-  }
-
-  return <Text>{props.text}</Text>;
-};
-
-const BlinkApp = () => {
-  return (
-    <View style={{marginTop: 50}}>
-      <Blink text="I love to blink" />
-      <Blink text="Yes blinking is so great" />
-      <Blink text="Why did they ever take this out of HTML" />
-      <Blink text="Look at me look at me look at me" />
-    </View>
-  );
-};
-
-export default BlinkApp;
-```
-
-</TabItem>
-</Tabs>
-
-In a real application, you probably won't be setting state with a timer. You might set state when you have new data from the server, or from user input. You can also use a state container like [Redux](https://redux.js.org/) or [MobX](https://mobx.js.org/) to control your data flow. In that case you would use Redux or MobX to modify your state rather than calling `setState` directly.
-
-When setState is called, BlinkApp will re-render its Component. By calling setState within the Timer, the component will re-render every time the Timer ticks.
-
-State works the same way as it does in React, so for more details on handling state, you can look at the [React.Component API](https://react.dev/reference/react/Component#setstate). At this point, you may have noticed that most of our examples use the default text color. To customize the text color, you will have to [learn about Style](style.md).
+---
+id: state
+title: State
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+There are two types of data that control a component: `props` and `state`. `props` are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use `state`.
+
+In general, you should initialize `state` in the constructor, and then call `setState` when you want to change it.
+
+For example, let's say we want to make text that blinks all the time. The text itself gets set once when the blinking component gets created, so the text itself is a `prop`. The "whether the text is currently on or off" changes over time, so that should be kept in `state`.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=State&ext=js
+import {useState, useEffect} from 'react';
+import {Text, View} from 'react-native';
+
+const Blink = props => {
+  const [isShowingText, setIsShowingText] = useState(true);
+
+  useEffect(() => {
+    const toggle = setInterval(() => {
+      setIsShowingText(!isShowingText);
+    }, 1000);
+
+    return () => clearInterval(toggle);
+  });
+
+  if (!isShowingText) {
+    return null;
+  }
+
+  return <Text>{props.text}</Text>;
+};
+
+const BlinkApp = () => {
+  return (
+    <View style={{marginTop: 50}}>
+      <Blink text="I love to blink" />
+      <Blink text="Yes blinking is so great" />
+      <Blink text="Why did they ever take this out of HTML" />
+      <Blink text="Look at me look at me look at me" />
+    </View>
+  );
+};
+
+export default BlinkApp;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=State&ext=tsx
+import {useState, useEffect} from 'react';
+import {Text, View} from 'react-native';
+
+type BlinkProps = {
+  text: string;
+};
+
+const Blink = (props: BlinkProps) => {
+  const [isShowingText, setIsShowingText] = useState(true);
+
+  useEffect(() => {
+    const toggle = setInterval(() => {
+      setIsShowingText(!isShowingText);
+    }, 1000);
+
+    return () => clearInterval(toggle);
+  });
+
+  if (!isShowingText) {
+    return null;
+  }
+
+  return <Text>{props.text}</Text>;
+};
+
+const BlinkApp = () => {
+  return (
+    <View style={{marginTop: 50}}>
+      <Blink text="I love to blink" />
+      <Blink text="Yes blinking is so great" />
+      <Blink text="Why did they ever take this out of HTML" />
+      <Blink text="Look at me look at me look at me" />
+    </View>
+  );
+};
+
+export default BlinkApp;
+```
+
+</TabItem>
+</Tabs>
+
+In a real application, you probably won't be setting state with a timer. You might set state when you have new data from the server, or from user input. You can also use a state container like [Redux](https://redux.js.org/) or [MobX](https://mobx.js.org/) to control your data flow. In that case you would use Redux or MobX to modify your state rather than calling `setState` directly.
+
+When setState is called, BlinkApp will re-render its Component. By calling setState within the Timer, the component will re-render every time the Timer ticks.
+
+State works the same way as it does in React, so for more details on handling state, you can look at the [React.Component API](https://react.dev/reference/react/Component#setstate). At this point, you may have noticed that most of our examples use the default text color. To customize the text color, you will have to [learn about Style](style.md).
diff --git a/website/versioned_docs/version-0.86/statusbar.md b/website/versioned_docs/version-0.86/statusbar.md
index 6345e7bf4ef..5817b8455d1 100644
--- a/website/versioned_docs/version-0.86/statusbar.md
+++ b/website/versioned_docs/version-0.86/statusbar.md
@@ -1,513 +1,513 @@
----
-id: statusbar
-title: StatusBar
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-Component to control the app's status bar. The status bar is the zone, typically at the top of the screen, that displays the current time, Wi-Fi and cellular network information, battery level and/or other status icons.
-
-### 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.
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=StatusBar%20Component%20Example&supportedPlatforms=android,ios&ext=js
-import React, {useState} from 'react';
-import {
-  Button,
-  Platform,
-  StatusBar,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const STYLES = ['default', 'dark-content', 'light-content'];
-const TRANSITIONS = ['fade', 'slide', 'none'];
-
-const App = () => {
-  const [hidden, setHidden] = useState(false);
-  const [statusBarStyle, setStatusBarStyle] = useState(STYLES[0]);
-  const [statusBarTransition, setStatusBarTransition] = useState(
-    TRANSITIONS[0],
-  );
-
-  const changeStatusBarVisibility = () => setHidden(!hidden);
-
-  const changeStatusBarStyle = () => {
-    const styleId = STYLES.indexOf(statusBarStyle) + 1;
-    if (styleId === STYLES.length) {
-      setStatusBarStyle(STYLES[0]);
-    } else {
-      setStatusBarStyle(STYLES[styleId]);
-    }
-  };
-
-  const changeStatusBarTransition = () => {
-    const transition = TRANSITIONS.indexOf(statusBarTransition) + 1;
-    if (transition === TRANSITIONS.length) {
-      setStatusBarTransition(TRANSITIONS[0]);
-    } else {
-      setStatusBarTransition(TRANSITIONS[transition]);
-    }
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <StatusBar
-          animated={true}
-          backgroundColor="#61dafb"
-          barStyle={statusBarStyle}
-          showHideTransition={statusBarTransition}
-          hidden={hidden}
-        />
-        <Text style={styles.textStyle}>
-          StatusBar Visibility:{'\n'}
-          {hidden ? 'Hidden' : 'Visible'}
-        </Text>
-        <Text style={styles.textStyle}>
-          StatusBar Style:{'\n'}
-          {statusBarStyle}
-        </Text>
-        {Platform.OS === 'ios' ? (
-          <Text style={styles.textStyle}>
-            StatusBar Transition:{'\n'}
-            {statusBarTransition}
-          </Text>
-        ) : null}
-        <View style={styles.buttonsContainer}>
-          <Button
-            title="Toggle StatusBar"
-            onPress={changeStatusBarVisibility}
-          />
-          <Button
-            title="Change StatusBar Style"
-            onPress={changeStatusBarStyle}
-          />
-          {Platform.OS === 'ios' ? (
-            <Button
-              title="Change StatusBar Transition"
-              onPress={changeStatusBarTransition}
-            />
-          ) : null}
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    backgroundColor: '#ECF0F1',
-  },
-  buttonsContainer: {
-    padding: 10,
-  },
-  textStyle: {
-    textAlign: 'center',
-    marginBottom: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=StatusBar%20Component%20Example&supportedPlatforms=android,ios&ext=tsx
-import React, {useState} from 'react';
-import {
-  Button,
-  Platform,
-  StatusBar,
-  StyleSheet,
-  Text,
-  View,
-  StatusBarStyle,
-} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const STYLES = ['default', 'dark-content', 'light-content'] as const;
-const TRANSITIONS = ['fade', 'slide', 'none'] as const;
-
-const App = () => {
-  const [hidden, setHidden] = useState(false);
-  const [statusBarStyle, setStatusBarStyle] = useState<StatusBarStyle>(
-    STYLES[0],
-  );
-  const [statusBarTransition, setStatusBarTransition] = useState<
-    'fade' | 'slide' | 'none'
-  >(TRANSITIONS[0]);
-
-  const changeStatusBarVisibility = () => setHidden(!hidden);
-
-  const changeStatusBarStyle = () => {
-    const styleId = STYLES.indexOf(statusBarStyle) + 1;
-    if (styleId === STYLES.length) {
-      setStatusBarStyle(STYLES[0]);
-    } else {
-      setStatusBarStyle(STYLES[styleId]);
-    }
-  };
-
-  const changeStatusBarTransition = () => {
-    const transition = TRANSITIONS.indexOf(statusBarTransition) + 1;
-    if (transition === TRANSITIONS.length) {
-      setStatusBarTransition(TRANSITIONS[0]);
-    } else {
-      setStatusBarTransition(TRANSITIONS[transition]);
-    }
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <StatusBar
-          animated={true}
-          backgroundColor="#61dafb"
-          barStyle={statusBarStyle}
-          showHideTransition={statusBarTransition}
-          hidden={hidden}
-        />
-        <Text style={styles.textStyle}>
-          StatusBar Visibility:{'\n'}
-          {hidden ? 'Hidden' : 'Visible'}
-        </Text>
-        <Text style={styles.textStyle}>
-          StatusBar Style:{'\n'}
-          {statusBarStyle}
-        </Text>
-        {Platform.OS === 'ios' ? (
-          <Text style={styles.textStyle}>
-            StatusBar Transition:{'\n'}
-            {statusBarTransition}
-          </Text>
-        ) : null}
-        <View style={styles.buttonsContainer}>
-          <Button
-            title="Toggle StatusBar"
-            onPress={changeStatusBarVisibility}
-          />
-          <Button
-            title="Change StatusBar Style"
-            onPress={changeStatusBarStyle}
-          />
-          {Platform.OS === 'ios' ? (
-            <Button
-              title="Change StatusBar Transition"
-              onPress={changeStatusBarTransition}
-            />
-          ) : null}
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    backgroundColor: '#ECF0F1',
-  },
-  buttonsContainer: {
-    padding: 10,
-  },
-  textStyle: {
-    textAlign: 'center',
-    marginBottom: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-### 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.
-
----
-
-# Reference
-
-## Constants
-
-### `currentHeight` <div className="label android">Android</div>
-
-The height of the status bar, which includes the notch height, if present.
-
----
-
-## Props
-
-### `animated`
-
-If the transition between status bar property changes should be animated. Supported for `backgroundColor`, `barStyle` and `hidden` properties.
-
-| Type    | Required | Default |
-| ------- | -------- | ------- |
-| boolean | No       | `false` |
-
----
-
-### `backgroundColor` <div className="label android">Android</div>
-
-The background color of the status bar.
-
-:::warning
-Due to edge-to-edge enforcement introduced in Android 15, setting background color of the status bar is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
-:::
-
-| Type            | Required | Default                                                                |
-| --------------- | -------- | ---------------------------------------------------------------------- |
-| [color](colors) | No       | default system StatusBar background color, or `'black'` if not defined |
-
----
-
-### `barStyle`
-
-Sets the color of the status bar text.
-
-On Android, this will only have an impact on API versions 23 and above.
-
-| Type                                       | Required | Default     |
-| ------------------------------------------ | -------- | ----------- |
-| [StatusBarStyle](statusbar#statusbarstyle) | No       | `'default'` |
-
----
-
-### `hidden`
-
-If the status bar is hidden.
-
-| Type    | Required | Default |
-| ------- | -------- | ------- |
-| boolean | No       | `false` |
-
----
-
-### `networkActivityIndicatorVisible` <div className="label ios">iOS</div>
-
-If the network activity indicator should be visible.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
----
-
-### `showHideTransition` <div className="label ios">iOS</div>
-
-The transition effect when showing and hiding the status bar using the `hidden` prop.
-
-| Type                                               | Default  |
-| -------------------------------------------------- | -------- |
-| [StatusBarAnimation](statusbar#statusbaranimation) | `'fade'` |
-
----
-
-### `translucent` <div className="label android">Android</div>
-
-If the status bar is translucent. When translucent is set to `true`, the app will draw under the status bar. This is useful when using a semi transparent status bar color.
-
-:::warning
-Due to edge-to-edge enforcement introduced in Android 15, setting the status bar as translucent is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
-:::
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
-## Methods
-
-### `popStackEntry()`
-
-```tsx
-static popStackEntry(entry: StatusBarProps);
-```
-
-Get and remove the last StatusBar entry from the stack.
-
-**Parameters:**
-
-| Name                                                       | Type | Description                           |
-| ---------------------------------------------------------- | ---- | ------------------------------------- |
-| entry <div className="label basic required">Required</div> | any  | Entry returned from `pushStackEntry`. |
-
----
-
-### `pushStackEntry()`
-
-```tsx
-static pushStackEntry(props: StatusBarProps): StatusBarProps;
-```
-
-Push a StatusBar entry onto the stack. The return value should be passed to `popStackEntry` when complete.
-
-**Parameters:**
-
-| Name                                                       | Type | Description                                                      |
-| ---------------------------------------------------------- | ---- | ---------------------------------------------------------------- |
-| props <div className="label basic required">Required</div> | any  | Object containing the StatusBar props to use in the stack entry. |
-
----
-
-### `replaceStackEntry()`
-
-```tsx
-static replaceStackEntry(
-  entry: StatusBarProps,
-  props: StatusBarProps
-): StatusBarProps;
-```
-
-Replace an existing StatusBar stack entry with new props.
-
-**Parameters:**
-
-| Name                                                       | Type | Description                                                                  |
-| ---------------------------------------------------------- | ---- | ---------------------------------------------------------------------------- |
-| entry <div className="label basic required">Required</div> | any  | Entry returned from `pushStackEntry` to replace.                             |
-| props <div className="label basic required">Required</div> | any  | Object containing the StatusBar props to use in the replacement stack entry. |
-
----
-
-### `setBackgroundColor()` <div className="label android">Android</div>
-
-```tsx
-static setBackgroundColor(color: ColorValue, animated?: boolean);
-```
-
-Set the background color for the status bar.
-
-:::warning
-Due to edge-to-edge enforcement introduced in Android 15, setting background color of the status bar is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
-:::
-
-**Parameters:**
-
-| Name                                                       | Type    | Description               |
-| ---------------------------------------------------------- | ------- | ------------------------- |
-| color <div className="label basic required">Required</div> | string  | Background color.         |
-| animated                                                   | boolean | Animate the style change. |
-
----
-
-### `setBarStyle()`
-
-```tsx
-static setBarStyle(style: StatusBarStyle, animated?: boolean);
-```
-
-Set the status bar style.
-
-**Parameters:**
-
-| Name                                                       | Type                                       | Description               |
-| ---------------------------------------------------------- | ------------------------------------------ | ------------------------- |
-| style <div className="label basic required">Required</div> | [StatusBarStyle](statusbar#statusbarstyle) | Status bar style to set.  |
-| animated                                                   | boolean                                    | Animate the style change. |
-
----
-
-### `setHidden()`
-
-```tsx
-static setHidden(hidden: boolean, animation?: StatusBarAnimation);
-```
-
-Show or hide the status bar.
-
-**Parameters:**
-
-| Name                                                        | Type                                               | Description                                             |
-| ----------------------------------------------------------- | -------------------------------------------------- | ------------------------------------------------------- |
-| hidden <div className="label basic required">Required</div> | boolean                                            | Hide the status bar.                                    |
-| animation <div className="label ios">iOS</div>              | [StatusBarAnimation](statusbar#statusbaranimation) | Animation when changing the status bar hidden property. |
-
----
-
-### 🗑️ `setNetworkActivityIndicatorVisible()` <div className="label ios">iOS</div>
-
-:::warning Deprecated
-The status bar network activity indicator is not supported in iOS 13 and later. This will be removed in a future release.
-:::
-
-```tsx
-static setNetworkActivityIndicatorVisible(visible: boolean);
-```
-
-Control the visibility of the network activity indicator.
-
-**Parameters:**
-
-| Name                                                         | Type    | Description         |
-| ------------------------------------------------------------ | ------- | ------------------- |
-| visible <div className="label basic required">Required</div> | boolean | Show the indicator. |
-
----
-
-### `setTranslucent()` <div className="label android">Android</div>
-
-```tsx
-static setTranslucent(translucent: boolean);
-```
-
-Control the translucency of the status bar.
-
-:::warning
-Due to edge-to-edge enforcement introduced in Android 15, setting the status bar as translucent is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
-:::
-
-**Parameters:**
-
-| Name                                                             | Type    | Description         |
-| ---------------------------------------------------------------- | ------- | ------------------- |
-| translucent <div className="label basic required">Required</div> | boolean | Set as translucent. |
-
-## Type Definitions
-
-### StatusBarAnimation
-
-Status bar animation type for transitions on the iOS.
-
-| Type |
-| ---- |
-| enum |
-
-**Constants:**
-
-| Value     | Type   | Description     |
-| --------- | ------ | --------------- |
-| `'fade'`  | string | Fade animation  |
-| `'slide'` | string | Slide animation |
-| `'none'`  | string | No animation    |
-
----
-
-### StatusBarStyle
-
-Status bar style type.
-
-| Type |
-| ---- |
-| enum |
-
-**Constants:**
-
-| Value             | Type   | Description                                                |
-| ----------------- | ------ | ---------------------------------------------------------- |
-| `'default'`       | string | Default status bar style (dark for iOS, light for Android) |
-| `'light-content'` | string | White texts and icons                                      |
-| `'dark-content'`  | string | Dark texts and icons (requires API>=23 on Android)         |
+---
+id: statusbar
+title: StatusBar
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+Component to control the app's status bar. The status bar is the zone, typically at the top of the screen, that displays the current time, Wi-Fi and cellular network information, battery level and/or other status icons.
+
+### 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.
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=StatusBar%20Component%20Example&supportedPlatforms=android,ios&ext=js
+import {useState} from 'react';
+import {
+  Button,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const STYLES = ['default', 'dark-content', 'light-content'];
+const TRANSITIONS = ['fade', 'slide', 'none'];
+
+const App = () => {
+  const [hidden, setHidden] = useState(false);
+  const [statusBarStyle, setStatusBarStyle] = useState(STYLES[0]);
+  const [statusBarTransition, setStatusBarTransition] = useState(
+    TRANSITIONS[0],
+  );
+
+  const changeStatusBarVisibility = () => setHidden(!hidden);
+
+  const changeStatusBarStyle = () => {
+    const styleId = STYLES.indexOf(statusBarStyle) + 1;
+    if (styleId === STYLES.length) {
+      setStatusBarStyle(STYLES[0]);
+    } else {
+      setStatusBarStyle(STYLES[styleId]);
+    }
+  };
+
+  const changeStatusBarTransition = () => {
+    const transition = TRANSITIONS.indexOf(statusBarTransition) + 1;
+    if (transition === TRANSITIONS.length) {
+      setStatusBarTransition(TRANSITIONS[0]);
+    } else {
+      setStatusBarTransition(TRANSITIONS[transition]);
+    }
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <StatusBar
+          animated={true}
+          backgroundColor="#61dafb"
+          barStyle={statusBarStyle}
+          showHideTransition={statusBarTransition}
+          hidden={hidden}
+        />
+        <Text style={styles.textStyle}>
+          StatusBar Visibility:{'\n'}
+          {hidden ? 'Hidden' : 'Visible'}
+        </Text>
+        <Text style={styles.textStyle}>
+          StatusBar Style:{'\n'}
+          {statusBarStyle}
+        </Text>
+        {Platform.OS === 'ios' ? (
+          <Text style={styles.textStyle}>
+            StatusBar Transition:{'\n'}
+            {statusBarTransition}
+          </Text>
+        ) : null}
+        <View style={styles.buttonsContainer}>
+          <Button
+            title="Toggle StatusBar"
+            onPress={changeStatusBarVisibility}
+          />
+          <Button
+            title="Change StatusBar Style"
+            onPress={changeStatusBarStyle}
+          />
+          {Platform.OS === 'ios' ? (
+            <Button
+              title="Change StatusBar Transition"
+              onPress={changeStatusBarTransition}
+            />
+          ) : null}
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: '#ECF0F1',
+  },
+  buttonsContainer: {
+    padding: 10,
+  },
+  textStyle: {
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=StatusBar%20Component%20Example&supportedPlatforms=android,ios&ext=tsx
+import {useState} from 'react';
+import {
+  Button,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  Text,
+  View,
+  StatusBarStyle,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const STYLES = ['default', 'dark-content', 'light-content'] as const;
+const TRANSITIONS = ['fade', 'slide', 'none'] as const;
+
+const App = () => {
+  const [hidden, setHidden] = useState(false);
+  const [statusBarStyle, setStatusBarStyle] = useState<StatusBarStyle>(
+    STYLES[0],
+  );
+  const [statusBarTransition, setStatusBarTransition] = useState<
+    'fade' | 'slide' | 'none'
+  >(TRANSITIONS[0]);
+
+  const changeStatusBarVisibility = () => setHidden(!hidden);
+
+  const changeStatusBarStyle = () => {
+    const styleId = STYLES.indexOf(statusBarStyle) + 1;
+    if (styleId === STYLES.length) {
+      setStatusBarStyle(STYLES[0]);
+    } else {
+      setStatusBarStyle(STYLES[styleId]);
+    }
+  };
+
+  const changeStatusBarTransition = () => {
+    const transition = TRANSITIONS.indexOf(statusBarTransition) + 1;
+    if (transition === TRANSITIONS.length) {
+      setStatusBarTransition(TRANSITIONS[0]);
+    } else {
+      setStatusBarTransition(TRANSITIONS[transition]);
+    }
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <StatusBar
+          animated={true}
+          backgroundColor="#61dafb"
+          barStyle={statusBarStyle}
+          showHideTransition={statusBarTransition}
+          hidden={hidden}
+        />
+        <Text style={styles.textStyle}>
+          StatusBar Visibility:{'\n'}
+          {hidden ? 'Hidden' : 'Visible'}
+        </Text>
+        <Text style={styles.textStyle}>
+          StatusBar Style:{'\n'}
+          {statusBarStyle}
+        </Text>
+        {Platform.OS === 'ios' ? (
+          <Text style={styles.textStyle}>
+            StatusBar Transition:{'\n'}
+            {statusBarTransition}
+          </Text>
+        ) : null}
+        <View style={styles.buttonsContainer}>
+          <Button
+            title="Toggle StatusBar"
+            onPress={changeStatusBarVisibility}
+          />
+          <Button
+            title="Change StatusBar Style"
+            onPress={changeStatusBarStyle}
+          />
+          {Platform.OS === 'ios' ? (
+            <Button
+              title="Change StatusBar Transition"
+              onPress={changeStatusBarTransition}
+            />
+          ) : null}
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: '#ECF0F1',
+  },
+  buttonsContainer: {
+    padding: 10,
+  },
+  textStyle: {
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+### 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.
+
+---
+
+# Reference
+
+## Constants
+
+### `currentHeight` <div className="label android">Android</div>
+
+The height of the status bar, which includes the notch height, if present.
+
+---
+
+## Props
+
+### `animated`
+
+If the transition between status bar property changes should be animated. Supported for `backgroundColor`, `barStyle` and `hidden` properties.
+
+| Type    | Required | Default |
+| ------- | -------- | ------- |
+| boolean | No       | `false` |
+
+---
+
+### `backgroundColor` <div className="label android">Android</div>
+
+The background color of the status bar.
+
+:::warning
+Due to edge-to-edge enforcement introduced in Android 15, setting background color of the status bar is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
+:::
+
+| Type            | Required | Default                                                                |
+| --------------- | -------- | ---------------------------------------------------------------------- |
+| [color](colors) | No       | default system StatusBar background color, or `'black'` if not defined |
+
+---
+
+### `barStyle`
+
+Sets the color of the status bar text.
+
+On Android, this will only have an impact on API versions 23 and above.
+
+| Type                                       | Required | Default     |
+| ------------------------------------------ | -------- | ----------- |
+| [StatusBarStyle](statusbar#statusbarstyle) | No       | `'default'` |
+
+---
+
+### `hidden`
+
+If the status bar is hidden.
+
+| Type    | Required | Default |
+| ------- | -------- | ------- |
+| boolean | No       | `false` |
+
+---
+
+### `networkActivityIndicatorVisible` <div className="label ios">iOS</div>
+
+If the network activity indicator should be visible.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+---
+
+### `showHideTransition` <div className="label ios">iOS</div>
+
+The transition effect when showing and hiding the status bar using the `hidden` prop.
+
+| Type                                               | Default  |
+| -------------------------------------------------- | -------- |
+| [StatusBarAnimation](statusbar#statusbaranimation) | `'fade'` |
+
+---
+
+### `translucent` <div className="label android">Android</div>
+
+If the status bar is translucent. When translucent is set to `true`, the app will draw under the status bar. This is useful when using a semi transparent status bar color.
+
+:::warning
+Due to edge-to-edge enforcement introduced in Android 15, setting the status bar as translucent is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
+:::
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+## Methods
+
+### `popStackEntry()`
+
+```tsx
+static popStackEntry(entry: StatusBarProps);
+```
+
+Get and remove the last StatusBar entry from the stack.
+
+**Parameters:**
+
+| Name                                                       | Type | Description                           |
+| ---------------------------------------------------------- | ---- | ------------------------------------- |
+| entry <div className="label basic required">Required</div> | any  | Entry returned from `pushStackEntry`. |
+
+---
+
+### `pushStackEntry()`
+
+```tsx
+static pushStackEntry(props: StatusBarProps): StatusBarProps;
+```
+
+Push a StatusBar entry onto the stack. The return value should be passed to `popStackEntry` when complete.
+
+**Parameters:**
+
+| Name                                                       | Type | Description                                                      |
+| ---------------------------------------------------------- | ---- | ---------------------------------------------------------------- |
+| props <div className="label basic required">Required</div> | any  | Object containing the StatusBar props to use in the stack entry. |
+
+---
+
+### `replaceStackEntry()`
+
+```tsx
+static replaceStackEntry(
+  entry: StatusBarProps,
+  props: StatusBarProps
+): StatusBarProps;
+```
+
+Replace an existing StatusBar stack entry with new props.
+
+**Parameters:**
+
+| Name                                                       | Type | Description                                                                  |
+| ---------------------------------------------------------- | ---- | ---------------------------------------------------------------------------- |
+| entry <div className="label basic required">Required</div> | any  | Entry returned from `pushStackEntry` to replace.                             |
+| props <div className="label basic required">Required</div> | any  | Object containing the StatusBar props to use in the replacement stack entry. |
+
+---
+
+### `setBackgroundColor()` <div className="label android">Android</div>
+
+```tsx
+static setBackgroundColor(color: ColorValue, animated?: boolean);
+```
+
+Set the background color for the status bar.
+
+:::warning
+Due to edge-to-edge enforcement introduced in Android 15, setting background color of the status bar is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
+:::
+
+**Parameters:**
+
+| Name                                                       | Type    | Description               |
+| ---------------------------------------------------------- | ------- | ------------------------- |
+| color <div className="label basic required">Required</div> | string  | Background color.         |
+| animated                                                   | boolean | Animate the style change. |
+
+---
+
+### `setBarStyle()`
+
+```tsx
+static setBarStyle(style: StatusBarStyle, animated?: boolean);
+```
+
+Set the status bar style.
+
+**Parameters:**
+
+| Name                                                       | Type                                       | Description               |
+| ---------------------------------------------------------- | ------------------------------------------ | ------------------------- |
+| style <div className="label basic required">Required</div> | [StatusBarStyle](statusbar#statusbarstyle) | Status bar style to set.  |
+| animated                                                   | boolean                                    | Animate the style change. |
+
+---
+
+### `setHidden()`
+
+```tsx
+static setHidden(hidden: boolean, animation?: StatusBarAnimation);
+```
+
+Show or hide the status bar.
+
+**Parameters:**
+
+| Name                                                        | Type                                               | Description                                             |
+| ----------------------------------------------------------- | -------------------------------------------------- | ------------------------------------------------------- |
+| hidden <div className="label basic required">Required</div> | boolean                                            | Hide the status bar.                                    |
+| animation <div className="label ios">iOS</div>              | [StatusBarAnimation](statusbar#statusbaranimation) | Animation when changing the status bar hidden property. |
+
+---
+
+### 🗑️ `setNetworkActivityIndicatorVisible()` <div className="label ios">iOS</div>
+
+:::warning Deprecated
+The status bar network activity indicator is not supported in iOS 13 and later. This will be removed in a future release.
+:::
+
+```tsx
+static setNetworkActivityIndicatorVisible(visible: boolean);
+```
+
+Control the visibility of the network activity indicator.
+
+**Parameters:**
+
+| Name                                                         | Type    | Description         |
+| ------------------------------------------------------------ | ------- | ------------------- |
+| visible <div className="label basic required">Required</div> | boolean | Show the indicator. |
+
+---
+
+### `setTranslucent()` <div className="label android">Android</div>
+
+```tsx
+static setTranslucent(translucent: boolean);
+```
+
+Control the translucency of the status bar.
+
+:::warning
+Due to edge-to-edge enforcement introduced in Android 15, setting the status bar as translucent is deprecated in API level 35 and setting it will have no effect. You can read more about our [edge-to-edge recommendations here](https://github.com/react-native-community/discussions-and-proposals/discussions/827).
+:::
+
+**Parameters:**
+
+| Name                                                             | Type    | Description         |
+| ---------------------------------------------------------------- | ------- | ------------------- |
+| translucent <div className="label basic required">Required</div> | boolean | Set as translucent. |
+
+## Type Definitions
+
+### StatusBarAnimation
+
+Status bar animation type for transitions on the iOS.
+
+| Type |
+| ---- |
+| enum |
+
+**Constants:**
+
+| Value     | Type   | Description     |
+| --------- | ------ | --------------- |
+| `'fade'`  | string | Fade animation  |
+| `'slide'` | string | Slide animation |
+| `'none'`  | string | No animation    |
+
+---
+
+### StatusBarStyle
+
+Status bar style type.
+
+| Type |
+| ---- |
+| enum |
+
+**Constants:**
+
+| Value             | Type   | Description                                                |
+| ----------------- | ------ | ---------------------------------------------------------- |
+| `'default'`       | string | Default status bar style (dark for iOS, light for Android) |
+| `'light-content'` | string | White texts and icons                                      |
+| `'dark-content'`  | string | Dark texts and icons (requires API>=23 on Android)         |
diff --git a/website/versioned_docs/version-0.86/style.md b/website/versioned_docs/version-0.86/style.md
index d847c0597cb..4890db4fbfa 100644
--- a/website/versioned_docs/version-0.86/style.md
+++ b/website/versioned_docs/version-0.86/style.md
@@ -10,7 +10,6 @@ The `style` prop can be a plain old JavaScript object. That's what we usually us
 As a component grows in complexity, it is often cleaner to use `StyleSheet.create` to define several styles in one place. Here's an example:
 
 ```SnackPlayer name=Style
-import React from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 
 const LotsOfStyles = () => {
diff --git a/website/versioned_docs/version-0.86/stylesheet.md b/website/versioned_docs/version-0.86/stylesheet.md
index 78918aeb374..1ac0eab9880 100644
--- a/website/versioned_docs/version-0.86/stylesheet.md
+++ b/website/versioned_docs/version-0.86/stylesheet.md
@@ -6,7 +6,6 @@ title: StyleSheet
 A StyleSheet is an abstraction similar to CSS StyleSheets.
 
 ```SnackPlayer name=StyleSheet
-import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -62,7 +61,6 @@ static compose(style1: Object, style2: Object): Object | Object[];
 Combines two styles such that `style2` will override any styles in `style1`. If either style is falsy, the other one is returned without allocating an array, saving allocations and maintaining reference equality for PureComponent checks.
 
 ```SnackPlayer name=Compose
-import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -123,7 +121,6 @@ static flatten(style: Array<Object extends Record<string, ViewStyle | ImageStyle
 Flattens an array of style objects, into one aggregated style object.
 
 ```SnackPlayer name=Flatten
-import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -196,7 +193,6 @@ Sets a function to use to pre-process a style property value. This is used inter
 A very common pattern is to create overlays with position absolute and zero positioning (`position: 'absolute', left: 0, right: 0, top: 0, bottom: 0`), so `absoluteFill` can be used for convenience and to reduce duplication of these repeated styles. If you want, absoluteFill can be used to create a customized entry in a StyleSheet, e.g.:
 
 ```SnackPlayer name=absoluteFill
-import React from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -257,7 +253,6 @@ export default App;
 This is defined as the width of a thin line on the platform. It can be used as the thickness of a border or division between two elements. Example:
 
 ```SnackPlayer name=hairlineWidth
-import React from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 
 const App = () => (
diff --git a/website/versioned_docs/version-0.86/switch.md b/website/versioned_docs/version-0.86/switch.md
index 4f9055c6256..20c73c69db7 100644
--- a/website/versioned_docs/version-0.86/switch.md
+++ b/website/versioned_docs/version-0.86/switch.md
@@ -1,133 +1,133 @@
----
-id: switch
-title: Switch
----
-
-Renders a boolean input.
-
-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=Switch&supportedPlatforms=android,ios
-import React, {useState} from 'react';
-import {Switch, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [isEnabled, setIsEnabled] = useState(false);
-  const toggleSwitch = () => setIsEnabled(previousState => !previousState);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Switch
-          trackColor={{false: '#767577', true: '#81b0ff'}}
-          thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
-          ios_backgroundColor="#3e3e3e"
-          onValueChange={toggleSwitch}
-          value={isEnabled}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Props
-
-### [View Props](view.md#props)
-
-Inherits [View Props](view.md#props).
-
----
-
-### `disabled`
-
-If true the user won't be able to toggle the switch.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `ios_backgroundColor` <div className="label ios">iOS</div>
-
-On iOS, custom color for the background. This background color can be seen either when the switch value is `false` or when the switch is disabled (and the switch is translucent).
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `onChange`
-
-Invoked when the user tries to change the value of the switch. Receives the change event as an argument. If you want to only receive the new value, use `onValueChange` instead.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onValueChange`
-
-Invoked when the user tries to change the value of the switch. Receives the new value as an argument. If you want to instead receive an event, use `onChange`.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `ref`
-
-A ref setter that will be assigned an [element node](element-nodes) when mounted.
-
----
-
-### `thumbColor`
-
-Color of the foreground switch grip. If this is set on iOS, the switch grip will lose its drop shadow.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `trackColor`
-
-Custom colors for the switch track.
-
-_iOS_: When the switch value is `false`, the track shrinks into the border. If you want to change the color of the background exposed by the shrunken track, use [`ios_backgroundColor`](switch.md#ios_backgroundColor).
-
-| Type                                                         |
-| ------------------------------------------------------------ |
-| `md object: {false: [color](colors), true: [color](colors)}` |
-
----
-
-### `value`
-
-The value of the switch. If true the switch will be turned on. Default value is false.
-
-| Type |
-| ---- |
-| bool |
+---
+id: switch
+title: Switch
+---
+
+Renders a boolean input.
+
+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=Switch&supportedPlatforms=android,ios
+import {useState} from 'react';
+import {Switch, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [isEnabled, setIsEnabled] = useState(false);
+  const toggleSwitch = () => setIsEnabled(previousState => !previousState);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Switch
+          trackColor={{false: '#767577', true: '#81b0ff'}}
+          thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
+          ios_backgroundColor="#3e3e3e"
+          onValueChange={toggleSwitch}
+          value={isEnabled}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Props
+
+### [View Props](view.md#props)
+
+Inherits [View Props](view.md#props).
+
+---
+
+### `disabled`
+
+If true the user won't be able to toggle the switch.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `ios_backgroundColor` <div className="label ios">iOS</div>
+
+On iOS, custom color for the background. This background color can be seen either when the switch value is `false` or when the switch is disabled (and the switch is translucent).
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `onChange`
+
+Invoked when the user tries to change the value of the switch. Receives the change event as an argument. If you want to only receive the new value, use `onValueChange` instead.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onValueChange`
+
+Invoked when the user tries to change the value of the switch. Receives the new value as an argument. If you want to instead receive an event, use `onChange`.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `ref`
+
+A ref setter that will be assigned an [element node](element-nodes) when mounted.
+
+---
+
+### `thumbColor`
+
+Color of the foreground switch grip. If this is set on iOS, the switch grip will lose its drop shadow.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `trackColor`
+
+Custom colors for the switch track.
+
+_iOS_: When the switch value is `false`, the track shrinks into the border. If you want to change the color of the background exposed by the shrunken track, use [`ios_backgroundColor`](switch.md#ios_backgroundColor).
+
+| Type                                                         |
+| ------------------------------------------------------------ |
+| `md object: {false: [color](colors), true: [color](colors)}` |
+
+---
+
+### `value`
+
+The value of the switch. If true the switch will be turned on. Default value is false.
+
+| Type |
+| ---- |
+| bool |
diff --git a/website/versioned_docs/version-0.86/systrace.md b/website/versioned_docs/version-0.86/systrace.md
index 53cfd62c7a9..9aa54fe8e18 100644
--- a/website/versioned_docs/version-0.86/systrace.md
+++ b/website/versioned_docs/version-0.86/systrace.md
@@ -10,7 +10,6 @@ title: Systrace
 `Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Capture the non-Timed JS events in EasyProfiler.
 
 ```SnackPlayer name=Systrace%20Example
-import React from 'react';
 import {Button, Text, View, StyleSheet, Systrace} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.86/text-nodes.md b/website/versioned_docs/version-0.86/text-nodes.md
index 63f195ea4b5..2818909abdc 100644
--- a/website/versioned_docs/version-0.86/text-nodes.md
+++ b/website/versioned_docs/version-0.86/text-nodes.md
@@ -1,86 +1,86 @@
----
-id: text-nodes
-title: Text nodes
----
-
-Text nodes represent raw text content on the tree (similar to [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text) nodes on Web). They are not directly accessible via `refs`, but can be accessed using methods like [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes) on element refs.
-
-```SnackPlayer ext=js&name=Text%20instances%20example
-import * as React from 'react';
-import { SafeAreaView, StyleSheet, Text } from 'react-native';
-
-const TextWithRefs = () => {
-  const ref = React.useRef(null);
-  const [viewInfo, setViewInfo] = React.useState('');
-
-  React.useEffect(() => {
-    // `textElement` is an object implementing the interface described here.
-    const textElement = ref.current;
-    const textNode = textElement.childNodes[0];
-    setViewInfo(
-      `Text content is: ${textNode.nodeValue}`,
-    );
-  }, []);
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <Text ref={ref}>
-        Hello world!
-      </Text>
-      <Text>{viewInfo}</Text>
-    </SafeAreaView>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  content: {
-    padding: 10,
-    backgroundColor: 'gray',
-  },
-});
-
-export default TextWithRefs;
-```
-
----
-
-## Reference
-
-### Web-compatible API
-
-From [`CharacterData`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData):
-
-- Properties
-  - [`data`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/data)
-  - [`length`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/length)
-  - [`nextElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/nextElementSibling)
-  - [`previousElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/previousElementSibling)
-- Methods
-  - [`substringData()`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/substringData)
-
-From [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/Node):
-
-- Properties
-  - [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)
-  - [`firstChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild)
-  - [`isConnected`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected)
-  - [`lastChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild)
-  - [`nextSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling)
-  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
-  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
-  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
-  - [`ownerDocument`](https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument)
-    - ℹ️ Will return the [document node](/docs/next/document-nodes) where this component was rendered.
-  - [`parentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)
-  - [`parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)
-  - [`previousSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling)
-  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
-- Methods
-  - [`compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
-  - [`contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains)
-  - [`getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)
-    - ℹ️ Will return a reference to itself if the component is not mounted.
-  - [`hasChildNodes()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes)
+---
+id: text-nodes
+title: Text nodes
+---
+
+Text nodes represent raw text content on the tree (similar to [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text) nodes on Web). They are not directly accessible via `refs`, but can be accessed using methods like [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes) on element refs.
+
+```SnackPlayer ext=js&name=Text%20instances%20example
+import {useEffect, useRef, useState} from 'react';
+import {SafeAreaView, StyleSheet, Text} from 'react-native';
+
+const TextWithRefs = () => {
+  const ref = useRef(null);
+  const [viewInfo, setViewInfo] = useState('');
+
+  useEffect(() => {
+    // `textElement` is an object implementing the interface described here.
+    const textElement = ref.current;
+    const textNode = textElement.childNodes[0];
+    setViewInfo(
+      `Text content is: ${textNode.nodeValue}`,
+    );
+  }, []);
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <Text ref={ref}>
+        Hello world!
+      </Text>
+      <Text>{viewInfo}</Text>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    padding: 10,
+    backgroundColor: 'gray',
+  },
+});
+
+export default TextWithRefs;
+```
+
+---
+
+## Reference
+
+### Web-compatible API
+
+From [`CharacterData`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData):
+
+- Properties
+  - [`data`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/data)
+  - [`length`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/length)
+  - [`nextElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/nextElementSibling)
+  - [`previousElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/previousElementSibling)
+- Methods
+  - [`substringData()`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/substringData)
+
+From [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/Node):
+
+- Properties
+  - [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)
+  - [`firstChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild)
+  - [`isConnected`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected)
+  - [`lastChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild)
+  - [`nextSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling)
+  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
+  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
+  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
+  - [`ownerDocument`](https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument)
+    - ℹ️ Will return the [document node](/docs/next/document-nodes) where this component was rendered.
+  - [`parentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)
+  - [`parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)
+  - [`previousSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling)
+  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
+- Methods
+  - [`compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
+  - [`contains()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains)
+  - [`getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)
+    - ℹ️ Will return a reference to itself if the component is not mounted.
+  - [`hasChildNodes()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes)
diff --git a/website/versioned_docs/version-0.86/text-style-props.md b/website/versioned_docs/version-0.86/text-style-props.md
index 64ffc4ef816..9605beca3dd 100644
--- a/website/versioned_docs/version-0.86/text-style-props.md
+++ b/website/versioned_docs/version-0.86/text-style-props.md
@@ -1,948 +1,948 @@
----
-id: text-style-props
-title: Text Style Props
----
-
-### Example
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=js&dependencies=@react-native-community/slider
-import React, {useState} from 'react';
-import {
-  FlatList,
-  Platform,
-  ScrollView,
-  StyleSheet,
-  Switch,
-  Text,
-  TouchableWithoutFeedback,
-  View,
-} from 'react-native';
-import Slider from '@react-native-community/slider';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const fontStyles = ['normal', 'italic'];
-const fontVariants = [
-  undefined,
-  'small-caps',
-  'oldstyle-nums',
-  'lining-nums',
-  'tabular-nums',
-  'proportional-nums',
-];
-const fontWeights = [
-  'normal',
-  'bold',
-  '100',
-  '200',
-  '300',
-  '400',
-  '500',
-  '600',
-  '700',
-  '800',
-  '900',
-];
-const textAlignments = ['auto', 'left', 'right', 'center', 'justify'];
-const textDecorationLines = [
-  'none',
-  'underline',
-  'line-through',
-  'underline line-through',
-];
-const textDecorationStyles = ['solid', 'double', 'dotted', 'dashed'];
-const textTransformations = ['none', 'uppercase', 'lowercase', 'capitalize'];
-const textAlignmentsVertical = ['auto', 'top', 'bottom', 'center'];
-const writingDirections = ['auto', 'ltr', 'rtl'];
-
-const App = () => {
-  const [fontSize, setFontSize] = useState(20);
-  const [fontStyleIdx, setFontStyleIdx] = useState(0);
-  const [fontWeightIdx, setFontWeightIdx] = useState(0);
-  const [lineHeight, setLineHeight] = useState(24);
-  const [textAlignIdx, setTextAlignIdx] = useState(0);
-  const [textDecorationLineIdx, setTextDecorationLineIdx] = useState(0);
-  const [includeFontPadding, setIncludeFontPadding] = useState(false);
-  const [textVerticalAlignIdx, setTextVerticalAlignIdx] = useState(0);
-  const [fontVariantIdx, setFontVariantIdx] = useState(0);
-  const [letterSpacing, setLetterSpacing] = useState(0);
-  const [textDecorationStyleIdx, setTextDecorationStyleIdx] = useState(0);
-  const [textTransformIdx, setTextTransformIdx] = useState(0);
-  const [writingDirectionIdx, setWritingDirectionIdx] = useState(0);
-  const [textShadowRadius, setTextShadowRadius] = useState(0);
-  const [textShadowOffset, setTextShadowOffset] = useState({
-    height: 0,
-    width: 0,
-  });
-
-  const [, ...validFontVariants] = fontVariants;
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.pargraphWrapper}>
-          <Text
-            style={[
-              styles.paragraph,
-              {
-                fontSize,
-                fontStyle: fontStyles[fontStyleIdx],
-                fontWeight: fontWeights[fontWeightIdx],
-                lineHeight,
-                textAlign: textAlignments[textAlignIdx],
-                textDecorationLine: textDecorationLines[textDecorationLineIdx],
-                textTransform: textTransformations[textTransformIdx],
-                textAlignVertical: textAlignmentsVertical[textVerticalAlignIdx],
-                fontVariant:
-                  fontVariantIdx === 0
-                    ? undefined
-                    : [validFontVariants[fontVariantIdx - 1]],
-                letterSpacing,
-                includeFontPadding,
-                textDecorationStyle:
-                  textDecorationStyles[textDecorationStyleIdx],
-                writingDirection: writingDirections[writingDirectionIdx],
-                textShadowOffset,
-                textShadowRadius,
-              },
-            ]}>
-            Lorem Ipsum is simply dummy text of the printing and typesetting
-            industry. 112 Likes
-          </Text>
-        </View>
-        <ScrollView style={{padding: 12}}>
-          <View>
-            <Text>Common platform properties</Text>
-            <CustomSlider
-              label="Text Shadow Offset - Height"
-              value={textShadowOffset.height}
-              minimumValue={-40}
-              maximumValue={40}
-              handleValueChange={val =>
-                setTextShadowOffset(prev => ({...prev, height: val}))
-              }
-            />
-            <CustomSlider
-              label="Text Shadow Offset - Width"
-              value={textShadowOffset.width}
-              minimumValue={-40}
-              maximumValue={40}
-              handleValueChange={val =>
-                setTextShadowOffset(prev => ({...prev, width: val}))
-              }
-            />
-            <CustomSlider
-              label="Font Size"
-              value={fontSize}
-              maximumValue={40}
-              handleValueChange={setFontSize}
-            />
-            <CustomPicker
-              label="Font Style"
-              data={fontStyles}
-              currentIndex={fontStyleIdx}
-              onSelected={setFontStyleIdx}
-            />
-            <CustomPicker
-              label="Font Weight"
-              data={fontWeights}
-              currentIndex={fontWeightIdx}
-              onSelected={setFontWeightIdx}
-            />
-            <CustomSlider
-              label="Line Height"
-              value={lineHeight}
-              minimumValue={10}
-              maximumValue={50}
-              handleValueChange={setLineHeight}
-            />
-            <CustomPicker
-              label="Text Align"
-              data={textAlignments}
-              currentIndex={textAlignIdx}
-              onSelected={setTextAlignIdx}
-            />
-            <CustomPicker
-              label="Text Decoration Line"
-              data={textDecorationLines}
-              currentIndex={textDecorationLineIdx}
-              onSelected={setTextDecorationLineIdx}
-            />
-            <CustomSlider
-              label="Text Shadow Radius"
-              value={textShadowRadius}
-              handleValueChange={setTextShadowRadius}
-            />
-            <CustomPicker
-              label="Font Variant"
-              data={fontVariants}
-              currentIndex={fontVariantIdx}
-              onSelected={setFontVariantIdx}
-            />
-            <CustomSlider
-              label="Letter Spacing"
-              step={0.1}
-              value={letterSpacing}
-              handleValueChange={setLetterSpacing}
-            />
-            <CustomPicker
-              label="Text Transform"
-              data={textTransformations}
-              currentIndex={textTransformIdx}
-              onSelected={setTextTransformIdx}
-            />
-          </View>
-          {Platform.OS === 'android' && (
-            <View style={styles.platformContainer}>
-              <Text style={styles.platformContainerTitle}>
-                Android only properties
-              </Text>
-              <CustomPicker
-                label="Text Vertical Align"
-                data={textAlignmentsVertical}
-                currentIndex={textVerticalAlignIdx}
-                onSelected={setTextVerticalAlignIdx}
-              />
-              <CustomSwitch
-                label="Include Font Padding"
-                handleValueChange={setIncludeFontPadding}
-                value={includeFontPadding}
-              />
-            </View>
-          )}
-          {Platform.OS === 'ios' && (
-            <View style={styles.platformContainer}>
-              <Text style={styles.platformContainerTitle}>
-                iOS only properties
-              </Text>
-              <CustomPicker
-                label="Text Decoration Style"
-                data={textDecorationStyles}
-                currentIndex={textDecorationStyleIdx}
-                onSelected={setTextDecorationStyleIdx}
-              />
-              <CustomPicker
-                label="Writing Direction"
-                data={writingDirections}
-                currentIndex={writingDirectionIdx}
-                onSelected={setWritingDirectionIdx}
-              />
-            </View>
-          )}
-        </ScrollView>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const CustomSwitch = ({label, handleValueChange, value}) => {
-  return (
-    <>
-      <Text style={styles.title}>{label}</Text>
-      <View style={{alignItems: 'flex-start'}}>
-        <Switch
-          trackColor={{false: '#767577', true: '#DAA520'}}
-          thumbColor={value ? '#DAA520' : '#f4f3f4'}
-          onValueChange={handleValueChange}
-          value={value}
-        />
-      </View>
-    </>
-  );
-};
-
-const CustomSlider = ({
-  label,
-  handleValueChange,
-  step = 1,
-  minimumValue = 0,
-  maximumValue = 10,
-  value,
-}) => {
-  return (
-    <>
-      {label && (
-        <Text style={styles.title}>{`${label} (${value.toFixed(2)})`}</Text>
-      )}
-      <View style={styles.wrapperHorizontal}>
-        <Slider
-          thumbTintColor="#06bcee"
-          minimumTrackTintColor="#64d7ffbb"
-          minimumValue={minimumValue}
-          maximumValue={maximumValue}
-          step={step}
-          onValueChange={handleValueChange}
-          value={value}
-        />
-      </View>
-    </>
-  );
-};
-
-const CustomPicker = ({label, data, currentIndex, onSelected}) => {
-  return (
-    <>
-      <Text style={styles.title}>{label}</Text>
-      <View style={styles.wrapperHorizontal}>
-        <FlatList
-          bounces
-          horizontal
-          data={data}
-          keyExtractor={item => String(item)}
-          renderItem={({item, index}) => {
-            const selected = index === currentIndex;
-            return (
-              <TouchableWithoutFeedback onPress={() => onSelected(index)}>
-                <View
-                  style={[
-                    styles.itemStyleHorizontal,
-                    selected && styles.itemSelectedStyleHorizontal,
-                  ]}>
-                  <Text
-                    style={{
-                      textAlign: 'center',
-                      color: selected ? 'black' : 'grey',
-                      fontWeight: selected ? 'bold' : 'normal',
-                    }}>
-                    {item + ''}
-                  </Text>
-                </View>
-              </TouchableWithoutFeedback>
-            );
-          }}
-        />
-      </View>
-    </>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  pargraphWrapper: {
-    backgroundColor: 'black',
-  },
-  paragraph: {
-    color: '#fff',
-    textDecorationColor: 'yellow',
-    textShadowColor: 'red',
-    textShadowRadius: 1,
-    padding: 24,
-  },
-  wrapperHorizontal: {
-    justifyContent: 'center',
-    color: 'black',
-  },
-  itemStyleHorizontal: {
-    marginRight: 10,
-    height: 50,
-    padding: 8,
-    borderWidth: 1,
-    borderColor: 'grey',
-    borderRadius: 8,
-    textAlign: 'center',
-    justifyContent: 'center',
-  },
-  itemSelectedStyleHorizontal: {
-    borderWidth: 2,
-    borderColor: '#06bcee',
-  },
-  platformContainer: {
-    marginTop: 8,
-    borderTopWidth: 1,
-  },
-  platformContainerTitle: {
-    marginTop: 8,
-  },
-  title: {
-    fontWeight: 'bold',
-    marginVertical: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=tsx&dependencies=@react-native-community/slider
-import React, {useState} from 'react';
-import {
-  FlatList,
-  Platform,
-  ScrollView,
-  StyleSheet,
-  Switch,
-  Text,
-  TouchableWithoutFeedback,
-  View,
-  TextStyle,
-} from 'react-native';
-import Slider from '@react-native-community/slider';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [fontSize, setFontSize] = useState(20);
-  const [fontStyleIdx, setFontStyleIdx] = useState(0);
-  const [fontWeightIdx, setFontWeightIdx] = useState(0);
-  const [lineHeight, setLineHeight] = useState(24);
-  const [textAlignIdx, setTextAlignIdx] = useState(0);
-  const [textDecorationLineIdx, setTextDecorationLineIdx] = useState(0);
-  const [includeFontPadding, setIncludeFontPadding] = useState(false);
-  const [textVerticalAlignIdx, setTextVerticalAlignIdx] = useState(0);
-  const [fontVariantIdx, setFontVariantIdx] = useState(0);
-  const [letterSpacing, setLetterSpacing] = useState(0);
-  const [textDecorationStyleIdx, setTextDecorationStyleIdx] = useState(0);
-  const [textTransformIdx, setTextTransformIdx] = useState(0);
-  const [writingDirectionIdx, setWritingDirectionIdx] = useState(0);
-  const [textShadowRadius, setTextShadowRadius] = useState(0);
-  const [textShadowOffset, setTextShadowOffset] = useState({
-    height: 0,
-    width: 0,
-  });
-
-  const [, ...validFontVariants] = fontVariants;
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.pargraphWrapper}>
-          <Text
-            style={[
-              styles.paragraph,
-              {
-                fontSize,
-                fontStyle: fontStyles[fontStyleIdx],
-                fontWeight: fontWeights[fontWeightIdx],
-                lineHeight,
-                textAlign: textAlignments[textAlignIdx],
-                textDecorationLine: textDecorationLines[textDecorationLineIdx],
-                textTransform: textTransformations[textTransformIdx],
-                textAlignVertical: textAlignmentsVertical[textVerticalAlignIdx],
-                fontVariant:
-                  fontVariantIdx === 0
-                    ? undefined
-                    : [validFontVariants[fontVariantIdx - 1]],
-                letterSpacing,
-                includeFontPadding,
-                textDecorationStyle:
-                  textDecorationStyles[textDecorationStyleIdx],
-                writingDirection: writingDirections[writingDirectionIdx],
-                textShadowOffset,
-                textShadowRadius,
-              } as TextStyle,
-            ]}>
-            Lorem Ipsum is simply dummy text of the printing and typesetting
-            industry. 112 Likes
-          </Text>
-        </View>
-        <ScrollView style={{padding: 12}}>
-          <View>
-            <Text>Common platform properties</Text>
-            <CustomSlider
-              label="Text Shadow Offset - Height"
-              value={textShadowOffset.height}
-              minimumValue={-40}
-              maximumValue={40}
-              handleValueChange={(val: number) =>
-                setTextShadowOffset(prev => ({...prev, height: val}))
-              }
-            />
-            <CustomSlider
-              label="Text Shadow Offset - Width"
-              value={textShadowOffset.width}
-              minimumValue={-40}
-              maximumValue={40}
-              handleValueChange={(val: number) =>
-                setTextShadowOffset(prev => ({...prev, width: val}))
-              }
-            />
-            <CustomSlider
-              label="Font Size"
-              value={fontSize}
-              maximumValue={40}
-              handleValueChange={setFontSize}
-            />
-            <CustomPicker
-              label="Font Style"
-              data={fontStyles}
-              currentIndex={fontStyleIdx}
-              onSelected={setFontStyleIdx}
-            />
-            <CustomPicker
-              label="Font Weight"
-              data={fontWeights}
-              currentIndex={fontWeightIdx}
-              onSelected={setFontWeightIdx}
-            />
-            <CustomSlider
-              label="Line Height"
-              value={lineHeight}
-              minimumValue={10}
-              maximumValue={50}
-              handleValueChange={setLineHeight}
-            />
-            <CustomPicker
-              label="Text Align"
-              data={textAlignments}
-              currentIndex={textAlignIdx}
-              onSelected={setTextAlignIdx}
-            />
-            <CustomPicker
-              label="Text Decoration Line"
-              data={textDecorationLines}
-              currentIndex={textDecorationLineIdx}
-              onSelected={setTextDecorationLineIdx}
-            />
-            <CustomSlider
-              label="Text Shadow Radius"
-              value={textShadowRadius}
-              handleValueChange={setTextShadowRadius}
-            />
-            <CustomPicker
-              label="Font Variant"
-              data={fontVariants}
-              currentIndex={fontVariantIdx}
-              onSelected={setFontVariantIdx}
-            />
-            <CustomSlider
-              label="Letter Spacing"
-              step={0.1}
-              value={letterSpacing}
-              handleValueChange={setLetterSpacing}
-            />
-            <CustomPicker
-              label="Text Transform"
-              data={textTransformations}
-              currentIndex={textTransformIdx}
-              onSelected={setTextTransformIdx}
-            />
-          </View>
-          {Platform.OS === 'android' && (
-            <View style={styles.platformContainer}>
-              <Text style={styles.platformContainerTitle}>
-                Android only properties
-              </Text>
-              <CustomPicker
-                label="Text Vertical Align"
-                data={textAlignmentsVertical}
-                currentIndex={textVerticalAlignIdx}
-                onSelected={setTextVerticalAlignIdx}
-              />
-              <CustomSwitch
-                label="Include Font Padding"
-                handleValueChange={setIncludeFontPadding}
-                value={includeFontPadding}
-              />
-            </View>
-          )}
-          {Platform.OS === 'ios' && (
-            <View style={styles.platformContainer}>
-              <Text style={styles.platformContainerTitle}>
-                iOS only properties
-              </Text>
-              <CustomPicker
-                label="Text Decoration Style"
-                data={textDecorationStyles}
-                currentIndex={textDecorationStyleIdx}
-                onSelected={setTextDecorationStyleIdx}
-              />
-              <CustomPicker
-                label="Writing Direction"
-                data={writingDirections}
-                currentIndex={writingDirectionIdx}
-                onSelected={setWritingDirectionIdx}
-              />
-            </View>
-          )}
-        </ScrollView>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-type CustomSwitchProps = {
-  label: string;
-  value: boolean;
-  handleValueChange: (value: boolean) => void;
-};
-
-const CustomSwitch = ({label, handleValueChange, value}: CustomSwitchProps) => {
-  return (
-    <>
-      <Text style={styles.title}>{label}</Text>
-      <View style={{alignItems: 'flex-start'}}>
-        <Switch
-          trackColor={{false: '#767577', true: '#DAA520'}}
-          thumbColor={value ? '#DAA520' : '#f4f3f4'}
-          onValueChange={handleValueChange}
-          value={value}
-        />
-      </View>
-    </>
-  );
-};
-
-type CustomSliderProps = {
-  label: string;
-  value: number;
-  handleValueChange: (value: number) => void;
-  step?: number;
-  minimumValue?: number;
-  maximumValue?: number;
-};
-
-const CustomSlider = ({
-  label,
-  handleValueChange,
-  step = 1,
-  minimumValue = 0,
-  maximumValue = 10,
-  value,
-}: CustomSliderProps) => {
-  return (
-    <>
-      {label && (
-        <Text style={styles.title}>{`${label} (${value.toFixed(2)})`}</Text>
-      )}
-      <View style={styles.wrapperHorizontal}>
-        <Slider
-          thumbTintColor="#06bcee"
-          minimumTrackTintColor="#64d7ffbb"
-          minimumValue={minimumValue}
-          maximumValue={maximumValue}
-          step={step}
-          onValueChange={handleValueChange}
-          value={value}
-        />
-      </View>
-    </>
-  );
-};
-
-type CustomPickerProps = {
-  label: string;
-  data?: ArrayLike<any> | null;
-  currentIndex: number;
-  onSelected: (index: number) => void;
-};
-
-const CustomPicker = ({
-  label,
-  data,
-  currentIndex,
-  onSelected,
-}: CustomPickerProps) => {
-  return (
-    <>
-      <Text style={styles.title}>{label}</Text>
-      <View style={styles.wrapperHorizontal}>
-        <FlatList
-          horizontal
-          data={data}
-          keyExtractor={item => String(item)}
-          renderItem={({item, index}: {item: string; index: number}) => {
-            const selected = index === currentIndex;
-            return (
-              <TouchableWithoutFeedback onPress={() => onSelected(index)}>
-                <View
-                  style={[
-                    styles.itemStyleHorizontal,
-                    selected && styles.itemSelectedStyleHorizontal,
-                  ]}>
-                  <Text
-                    style={{
-                      textAlign: 'center',
-                      color: selected ? 'black' : 'grey',
-                      fontWeight: selected ? 'bold' : 'normal',
-                    }}>
-                    {item + ''}
-                  </Text>
-                </View>
-              </TouchableWithoutFeedback>
-            );
-          }}
-        />
-      </View>
-    </>
-  );
-};
-
-const fontStyles = ['normal', 'italic'];
-const fontVariants = [
-  undefined,
-  'small-caps',
-  'oldstyle-nums',
-  'lining-nums',
-  'tabular-nums',
-  'proportional-nums',
-];
-const fontWeights = [
-  'normal',
-  'bold',
-  '100',
-  '200',
-  '300',
-  '400',
-  '500',
-  '600',
-  '700',
-  '800',
-  '900',
-];
-const textAlignments = ['auto', 'left', 'right', 'center', 'justify'];
-const textDecorationLines = [
-  'none',
-  'underline',
-  'line-through',
-  'underline line-through',
-];
-const textDecorationStyles = ['solid', 'double', 'dotted', 'dashed'];
-const textTransformations = ['none', 'uppercase', 'lowercase', 'capitalize'];
-const textAlignmentsVertical = ['auto', 'top', 'bottom', 'center'];
-const writingDirections = ['auto', 'ltr', 'rtl'];
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  pargraphWrapper: {
-    backgroundColor: 'black',
-  },
-  paragraph: {
-    color: '#fff',
-    textDecorationColor: 'yellow',
-    textShadowColor: 'red',
-    textShadowRadius: 1,
-    padding: 24,
-  },
-  wrapperHorizontal: {
-    justifyContent: 'center',
-    color: 'black',
-  },
-  itemStyleHorizontal: {
-    marginRight: 10,
-    height: 50,
-    padding: 8,
-    borderWidth: 1,
-    borderColor: 'grey',
-    borderRadius: 8,
-    textAlign: 'center',
-    justifyContent: 'center',
-  },
-  itemSelectedStyleHorizontal: {
-    borderWidth: 2,
-    borderColor: '#06bcee',
-  },
-  platformContainer: {
-    marginTop: 8,
-    borderTopWidth: 1,
-  },
-  platformContainerTitle: {
-    marginTop: 8,
-  },
-  title: {
-    fontWeight: 'bold',
-    marginVertical: 8,
-  },
-});
-
-export default App;
-```
-
-</TabItem>
-</Tabs>
-
-# Reference
-
-## Props
-
-### `color`
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `fontFamily`
-
-| Type   |
-| ------ |
-| string |
-
-The generic font families `system-ui`, `ui-sans-serif`, `ui-serif`, `ui-monospace`, and `ui-rounded` are supported on iOS.
-
----
-
-### `fontSize`
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `fontStyle`
-
-| Type                         |
-| ---------------------------- |
-| enum(`'normal'`, `'italic'`) |
-
----
-
-### `fontWeight`
-
-Specifies font weight. The values `'normal'` and `'bold'` are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen.
-
-| Type                                                                                                                  | Default    |
-| --------------------------------------------------------------------------------------------------------------------- | ---------- |
-| enum(`'normal'`, `'bold'`, `'100'`, `'200'`, `'300'`, `'400'`, `'500'`, `'600'`, `'700'`, `'800'`, `'900'`) or number | `'normal'` |
-
----
-
-### `includeFontPadding` <div className="label android">Android</div>
-
-Set to `false` to remove extra font padding intended to make space for certain ascenders / descenders. With some fonts, this padding can make text look slightly misaligned when centered vertically. For best results also set `textAlignVertical` to `center`.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `true`  |
-
----
-
-### `fontVariant`
-
-Allows you to set all the font variants for a font. Can be set by using an array of enums or a space-separated string e.g. `'small-caps common-ligatures'`.
-
-| Type                                                                                                                 | Default |
-| -------------------------------------------------------------------------------------------------------------------- | ------- |
-| array of enum(`'small-caps'`, `'oldstyle-nums'`, `'lining-nums'`, `'tabular-nums'`, `'proportional-nums'`) or string | `[]`    |
-
----
-
-### `letterSpacing`
-
-Increase or decrease the spacing between characters. By default there is no extra letter spacing.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `lineHeight`
-
-Numeric value that controls the vertical spacing between lines of text within a text element. It specifies the distance between the baselines of consecutive lines of text.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `textAlign`
-
-Specifies text alignment. On Android, the value 'justify' is only supported on Oreo (8.0) or above (API level >= 26). The value will fallback to `left` on lower Android versions.
-
-| Type                                                         | Default  |
-| ------------------------------------------------------------ | -------- |
-| enum(`'auto'`, `'left'`, `'right'`, `'center'`, `'justify'`) | `'auto'` |
-
----
-
-### `textAlignVertical` <div className="label android">Android</div>
-
-An alias for `verticalAlign` style prop, if you use both properties, `verticalAlign` will take precedence over `textAlignVertical`
-
-| Type                                            | Default  |
-| ----------------------------------------------- | -------- |
-| enum(`'auto'`, `'top'`, `'bottom'`, `'center'`) | `'auto'` |
-
----
-
-### `textDecorationColor` <div className="label ios">iOS</div>
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `textDecorationLine`
-
-| Type                                                                        | Default  |
-| --------------------------------------------------------------------------- | -------- |
-| enum(`'none'`, `'underline'`, `'line-through'`, `'underline line-through'`) | `'none'` |
-
----
-
-### `textDecorationStyle` <div className="label ios">iOS</div>
-
-| Type                                                | Default   |
-| --------------------------------------------------- | --------- |
-| enum(`'solid'`, `'double'`, `'dotted'`, `'dashed'`) | `'solid'` |
-
----
-
-### `textShadowColor`
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `textShadowOffset`
-
-| Type                                        |
-| ------------------------------------------- |
-| object: `{width?: number, height?: number}` |
-
----
-
-### `textShadowRadius`
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `textTransform`
-
-| Type                                                         | Default  |
-| ------------------------------------------------------------ | -------- |
-| enum(`'none'`, `'uppercase'`, `'lowercase'`, `'capitalize'`) | `'none'` |
-
----
-
-### `verticalAlign` <div className="label android">Android</div>
-
-| Type                                            | Default  |
-| ----------------------------------------------- | -------- |
-| enum(`'auto'`, `'top'`, `'bottom'`, `'middle'`) | `'auto'` |
-
----
-
-### `writingDirection` <div className="label ios">iOS</div>
-
-| Type                             | Default  |
-| -------------------------------- | -------- |
-| enum(`'auto'`, `'ltr'`, `'rtl'`) | `'auto'` |
-
----
-
-### `userSelect`
-
-It allows the user to select text and to use the native copy and paste functionality. Has precedence over the `selectable` prop.
-
-| Type                                                     | Default |
-| -------------------------------------------------------- | ------- |
-| enum(`'auto'`, `'text'`, `'none'`, `'contain'`, `'all'`) | `none`  |
+---
+id: text-style-props
+title: Text Style Props
+---
+
+### Example
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=js&dependencies=@react-native-community/slider
+import {useState} from 'react';
+import {
+  FlatList,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Switch,
+  Text,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+import Slider from '@react-native-community/slider';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const fontStyles = ['normal', 'italic'];
+const fontVariants = [
+  undefined,
+  'small-caps',
+  'oldstyle-nums',
+  'lining-nums',
+  'tabular-nums',
+  'proportional-nums',
+];
+const fontWeights = [
+  'normal',
+  'bold',
+  '100',
+  '200',
+  '300',
+  '400',
+  '500',
+  '600',
+  '700',
+  '800',
+  '900',
+];
+const textAlignments = ['auto', 'left', 'right', 'center', 'justify'];
+const textDecorationLines = [
+  'none',
+  'underline',
+  'line-through',
+  'underline line-through',
+];
+const textDecorationStyles = ['solid', 'double', 'dotted', 'dashed'];
+const textTransformations = ['none', 'uppercase', 'lowercase', 'capitalize'];
+const textAlignmentsVertical = ['auto', 'top', 'bottom', 'center'];
+const writingDirections = ['auto', 'ltr', 'rtl'];
+
+const App = () => {
+  const [fontSize, setFontSize] = useState(20);
+  const [fontStyleIdx, setFontStyleIdx] = useState(0);
+  const [fontWeightIdx, setFontWeightIdx] = useState(0);
+  const [lineHeight, setLineHeight] = useState(24);
+  const [textAlignIdx, setTextAlignIdx] = useState(0);
+  const [textDecorationLineIdx, setTextDecorationLineIdx] = useState(0);
+  const [includeFontPadding, setIncludeFontPadding] = useState(false);
+  const [textVerticalAlignIdx, setTextVerticalAlignIdx] = useState(0);
+  const [fontVariantIdx, setFontVariantIdx] = useState(0);
+  const [letterSpacing, setLetterSpacing] = useState(0);
+  const [textDecorationStyleIdx, setTextDecorationStyleIdx] = useState(0);
+  const [textTransformIdx, setTextTransformIdx] = useState(0);
+  const [writingDirectionIdx, setWritingDirectionIdx] = useState(0);
+  const [textShadowRadius, setTextShadowRadius] = useState(0);
+  const [textShadowOffset, setTextShadowOffset] = useState({
+    height: 0,
+    width: 0,
+  });
+
+  const [, ...validFontVariants] = fontVariants;
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.pargraphWrapper}>
+          <Text
+            style={[
+              styles.paragraph,
+              {
+                fontSize,
+                fontStyle: fontStyles[fontStyleIdx],
+                fontWeight: fontWeights[fontWeightIdx],
+                lineHeight,
+                textAlign: textAlignments[textAlignIdx],
+                textDecorationLine: textDecorationLines[textDecorationLineIdx],
+                textTransform: textTransformations[textTransformIdx],
+                textAlignVertical: textAlignmentsVertical[textVerticalAlignIdx],
+                fontVariant:
+                  fontVariantIdx === 0
+                    ? undefined
+                    : [validFontVariants[fontVariantIdx - 1]],
+                letterSpacing,
+                includeFontPadding,
+                textDecorationStyle:
+                  textDecorationStyles[textDecorationStyleIdx],
+                writingDirection: writingDirections[writingDirectionIdx],
+                textShadowOffset,
+                textShadowRadius,
+              },
+            ]}>
+            Lorem Ipsum is simply dummy text of the printing and typesetting
+            industry. 112 Likes
+          </Text>
+        </View>
+        <ScrollView style={{padding: 12}}>
+          <View>
+            <Text>Common platform properties</Text>
+            <CustomSlider
+              label="Text Shadow Offset - Height"
+              value={textShadowOffset.height}
+              minimumValue={-40}
+              maximumValue={40}
+              handleValueChange={val =>
+                setTextShadowOffset(prev => ({...prev, height: val}))
+              }
+            />
+            <CustomSlider
+              label="Text Shadow Offset - Width"
+              value={textShadowOffset.width}
+              minimumValue={-40}
+              maximumValue={40}
+              handleValueChange={val =>
+                setTextShadowOffset(prev => ({...prev, width: val}))
+              }
+            />
+            <CustomSlider
+              label="Font Size"
+              value={fontSize}
+              maximumValue={40}
+              handleValueChange={setFontSize}
+            />
+            <CustomPicker
+              label="Font Style"
+              data={fontStyles}
+              currentIndex={fontStyleIdx}
+              onSelected={setFontStyleIdx}
+            />
+            <CustomPicker
+              label="Font Weight"
+              data={fontWeights}
+              currentIndex={fontWeightIdx}
+              onSelected={setFontWeightIdx}
+            />
+            <CustomSlider
+              label="Line Height"
+              value={lineHeight}
+              minimumValue={10}
+              maximumValue={50}
+              handleValueChange={setLineHeight}
+            />
+            <CustomPicker
+              label="Text Align"
+              data={textAlignments}
+              currentIndex={textAlignIdx}
+              onSelected={setTextAlignIdx}
+            />
+            <CustomPicker
+              label="Text Decoration Line"
+              data={textDecorationLines}
+              currentIndex={textDecorationLineIdx}
+              onSelected={setTextDecorationLineIdx}
+            />
+            <CustomSlider
+              label="Text Shadow Radius"
+              value={textShadowRadius}
+              handleValueChange={setTextShadowRadius}
+            />
+            <CustomPicker
+              label="Font Variant"
+              data={fontVariants}
+              currentIndex={fontVariantIdx}
+              onSelected={setFontVariantIdx}
+            />
+            <CustomSlider
+              label="Letter Spacing"
+              step={0.1}
+              value={letterSpacing}
+              handleValueChange={setLetterSpacing}
+            />
+            <CustomPicker
+              label="Text Transform"
+              data={textTransformations}
+              currentIndex={textTransformIdx}
+              onSelected={setTextTransformIdx}
+            />
+          </View>
+          {Platform.OS === 'android' && (
+            <View style={styles.platformContainer}>
+              <Text style={styles.platformContainerTitle}>
+                Android only properties
+              </Text>
+              <CustomPicker
+                label="Text Vertical Align"
+                data={textAlignmentsVertical}
+                currentIndex={textVerticalAlignIdx}
+                onSelected={setTextVerticalAlignIdx}
+              />
+              <CustomSwitch
+                label="Include Font Padding"
+                handleValueChange={setIncludeFontPadding}
+                value={includeFontPadding}
+              />
+            </View>
+          )}
+          {Platform.OS === 'ios' && (
+            <View style={styles.platformContainer}>
+              <Text style={styles.platformContainerTitle}>
+                iOS only properties
+              </Text>
+              <CustomPicker
+                label="Text Decoration Style"
+                data={textDecorationStyles}
+                currentIndex={textDecorationStyleIdx}
+                onSelected={setTextDecorationStyleIdx}
+              />
+              <CustomPicker
+                label="Writing Direction"
+                data={writingDirections}
+                currentIndex={writingDirectionIdx}
+                onSelected={setWritingDirectionIdx}
+              />
+            </View>
+          )}
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const CustomSwitch = ({label, handleValueChange, value}) => {
+  return (
+    <>
+      <Text style={styles.title}>{label}</Text>
+      <View style={{alignItems: 'flex-start'}}>
+        <Switch
+          trackColor={{false: '#767577', true: '#DAA520'}}
+          thumbColor={value ? '#DAA520' : '#f4f3f4'}
+          onValueChange={handleValueChange}
+          value={value}
+        />
+      </View>
+    </>
+  );
+};
+
+const CustomSlider = ({
+  label,
+  handleValueChange,
+  step = 1,
+  minimumValue = 0,
+  maximumValue = 10,
+  value,
+}) => {
+  return (
+    <>
+      {label && (
+        <Text style={styles.title}>{`${label} (${value.toFixed(2)})`}</Text>
+      )}
+      <View style={styles.wrapperHorizontal}>
+        <Slider
+          thumbTintColor="#06bcee"
+          minimumTrackTintColor="#64d7ffbb"
+          minimumValue={minimumValue}
+          maximumValue={maximumValue}
+          step={step}
+          onValueChange={handleValueChange}
+          value={value}
+        />
+      </View>
+    </>
+  );
+};
+
+const CustomPicker = ({label, data, currentIndex, onSelected}) => {
+  return (
+    <>
+      <Text style={styles.title}>{label}</Text>
+      <View style={styles.wrapperHorizontal}>
+        <FlatList
+          bounces
+          horizontal
+          data={data}
+          keyExtractor={item => String(item)}
+          renderItem={({item, index}) => {
+            const selected = index === currentIndex;
+            return (
+              <TouchableWithoutFeedback onPress={() => onSelected(index)}>
+                <View
+                  style={[
+                    styles.itemStyleHorizontal,
+                    selected && styles.itemSelectedStyleHorizontal,
+                  ]}>
+                  <Text
+                    style={{
+                      textAlign: 'center',
+                      color: selected ? 'black' : 'grey',
+                      fontWeight: selected ? 'bold' : 'normal',
+                    }}>
+                    {item + ''}
+                  </Text>
+                </View>
+              </TouchableWithoutFeedback>
+            );
+          }}
+        />
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  pargraphWrapper: {
+    backgroundColor: 'black',
+  },
+  paragraph: {
+    color: '#fff',
+    textDecorationColor: 'yellow',
+    textShadowColor: 'red',
+    textShadowRadius: 1,
+    padding: 24,
+  },
+  wrapperHorizontal: {
+    justifyContent: 'center',
+    color: 'black',
+  },
+  itemStyleHorizontal: {
+    marginRight: 10,
+    height: 50,
+    padding: 8,
+    borderWidth: 1,
+    borderColor: 'grey',
+    borderRadius: 8,
+    textAlign: 'center',
+    justifyContent: 'center',
+  },
+  itemSelectedStyleHorizontal: {
+    borderWidth: 2,
+    borderColor: '#06bcee',
+  },
+  platformContainer: {
+    marginTop: 8,
+    borderTopWidth: 1,
+  },
+  platformContainerTitle: {
+    marginTop: 8,
+  },
+  title: {
+    fontWeight: 'bold',
+    marginVertical: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=tsx&dependencies=@react-native-community/slider
+import {useState} from 'react';
+import {
+  FlatList,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Switch,
+  Text,
+  TouchableWithoutFeedback,
+  View,
+  TextStyle,
+} from 'react-native';
+import Slider from '@react-native-community/slider';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [fontSize, setFontSize] = useState(20);
+  const [fontStyleIdx, setFontStyleIdx] = useState(0);
+  const [fontWeightIdx, setFontWeightIdx] = useState(0);
+  const [lineHeight, setLineHeight] = useState(24);
+  const [textAlignIdx, setTextAlignIdx] = useState(0);
+  const [textDecorationLineIdx, setTextDecorationLineIdx] = useState(0);
+  const [includeFontPadding, setIncludeFontPadding] = useState(false);
+  const [textVerticalAlignIdx, setTextVerticalAlignIdx] = useState(0);
+  const [fontVariantIdx, setFontVariantIdx] = useState(0);
+  const [letterSpacing, setLetterSpacing] = useState(0);
+  const [textDecorationStyleIdx, setTextDecorationStyleIdx] = useState(0);
+  const [textTransformIdx, setTextTransformIdx] = useState(0);
+  const [writingDirectionIdx, setWritingDirectionIdx] = useState(0);
+  const [textShadowRadius, setTextShadowRadius] = useState(0);
+  const [textShadowOffset, setTextShadowOffset] = useState({
+    height: 0,
+    width: 0,
+  });
+
+  const [, ...validFontVariants] = fontVariants;
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.pargraphWrapper}>
+          <Text
+            style={[
+              styles.paragraph,
+              {
+                fontSize,
+                fontStyle: fontStyles[fontStyleIdx],
+                fontWeight: fontWeights[fontWeightIdx],
+                lineHeight,
+                textAlign: textAlignments[textAlignIdx],
+                textDecorationLine: textDecorationLines[textDecorationLineIdx],
+                textTransform: textTransformations[textTransformIdx],
+                textAlignVertical: textAlignmentsVertical[textVerticalAlignIdx],
+                fontVariant:
+                  fontVariantIdx === 0
+                    ? undefined
+                    : [validFontVariants[fontVariantIdx - 1]],
+                letterSpacing,
+                includeFontPadding,
+                textDecorationStyle:
+                  textDecorationStyles[textDecorationStyleIdx],
+                writingDirection: writingDirections[writingDirectionIdx],
+                textShadowOffset,
+                textShadowRadius,
+              } as TextStyle,
+            ]}>
+            Lorem Ipsum is simply dummy text of the printing and typesetting
+            industry. 112 Likes
+          </Text>
+        </View>
+        <ScrollView style={{padding: 12}}>
+          <View>
+            <Text>Common platform properties</Text>
+            <CustomSlider
+              label="Text Shadow Offset - Height"
+              value={textShadowOffset.height}
+              minimumValue={-40}
+              maximumValue={40}
+              handleValueChange={(val: number) =>
+                setTextShadowOffset(prev => ({...prev, height: val}))
+              }
+            />
+            <CustomSlider
+              label="Text Shadow Offset - Width"
+              value={textShadowOffset.width}
+              minimumValue={-40}
+              maximumValue={40}
+              handleValueChange={(val: number) =>
+                setTextShadowOffset(prev => ({...prev, width: val}))
+              }
+            />
+            <CustomSlider
+              label="Font Size"
+              value={fontSize}
+              maximumValue={40}
+              handleValueChange={setFontSize}
+            />
+            <CustomPicker
+              label="Font Style"
+              data={fontStyles}
+              currentIndex={fontStyleIdx}
+              onSelected={setFontStyleIdx}
+            />
+            <CustomPicker
+              label="Font Weight"
+              data={fontWeights}
+              currentIndex={fontWeightIdx}
+              onSelected={setFontWeightIdx}
+            />
+            <CustomSlider
+              label="Line Height"
+              value={lineHeight}
+              minimumValue={10}
+              maximumValue={50}
+              handleValueChange={setLineHeight}
+            />
+            <CustomPicker
+              label="Text Align"
+              data={textAlignments}
+              currentIndex={textAlignIdx}
+              onSelected={setTextAlignIdx}
+            />
+            <CustomPicker
+              label="Text Decoration Line"
+              data={textDecorationLines}
+              currentIndex={textDecorationLineIdx}
+              onSelected={setTextDecorationLineIdx}
+            />
+            <CustomSlider
+              label="Text Shadow Radius"
+              value={textShadowRadius}
+              handleValueChange={setTextShadowRadius}
+            />
+            <CustomPicker
+              label="Font Variant"
+              data={fontVariants}
+              currentIndex={fontVariantIdx}
+              onSelected={setFontVariantIdx}
+            />
+            <CustomSlider
+              label="Letter Spacing"
+              step={0.1}
+              value={letterSpacing}
+              handleValueChange={setLetterSpacing}
+            />
+            <CustomPicker
+              label="Text Transform"
+              data={textTransformations}
+              currentIndex={textTransformIdx}
+              onSelected={setTextTransformIdx}
+            />
+          </View>
+          {Platform.OS === 'android' && (
+            <View style={styles.platformContainer}>
+              <Text style={styles.platformContainerTitle}>
+                Android only properties
+              </Text>
+              <CustomPicker
+                label="Text Vertical Align"
+                data={textAlignmentsVertical}
+                currentIndex={textVerticalAlignIdx}
+                onSelected={setTextVerticalAlignIdx}
+              />
+              <CustomSwitch
+                label="Include Font Padding"
+                handleValueChange={setIncludeFontPadding}
+                value={includeFontPadding}
+              />
+            </View>
+          )}
+          {Platform.OS === 'ios' && (
+            <View style={styles.platformContainer}>
+              <Text style={styles.platformContainerTitle}>
+                iOS only properties
+              </Text>
+              <CustomPicker
+                label="Text Decoration Style"
+                data={textDecorationStyles}
+                currentIndex={textDecorationStyleIdx}
+                onSelected={setTextDecorationStyleIdx}
+              />
+              <CustomPicker
+                label="Writing Direction"
+                data={writingDirections}
+                currentIndex={writingDirectionIdx}
+                onSelected={setWritingDirectionIdx}
+              />
+            </View>
+          )}
+        </ScrollView>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+type CustomSwitchProps = {
+  label: string;
+  value: boolean;
+  handleValueChange: (value: boolean) => void;
+};
+
+const CustomSwitch = ({label, handleValueChange, value}: CustomSwitchProps) => {
+  return (
+    <>
+      <Text style={styles.title}>{label}</Text>
+      <View style={{alignItems: 'flex-start'}}>
+        <Switch
+          trackColor={{false: '#767577', true: '#DAA520'}}
+          thumbColor={value ? '#DAA520' : '#f4f3f4'}
+          onValueChange={handleValueChange}
+          value={value}
+        />
+      </View>
+    </>
+  );
+};
+
+type CustomSliderProps = {
+  label: string;
+  value: number;
+  handleValueChange: (value: number) => void;
+  step?: number;
+  minimumValue?: number;
+  maximumValue?: number;
+};
+
+const CustomSlider = ({
+  label,
+  handleValueChange,
+  step = 1,
+  minimumValue = 0,
+  maximumValue = 10,
+  value,
+}: CustomSliderProps) => {
+  return (
+    <>
+      {label && (
+        <Text style={styles.title}>{`${label} (${value.toFixed(2)})`}</Text>
+      )}
+      <View style={styles.wrapperHorizontal}>
+        <Slider
+          thumbTintColor="#06bcee"
+          minimumTrackTintColor="#64d7ffbb"
+          minimumValue={minimumValue}
+          maximumValue={maximumValue}
+          step={step}
+          onValueChange={handleValueChange}
+          value={value}
+        />
+      </View>
+    </>
+  );
+};
+
+type CustomPickerProps = {
+  label: string;
+  data?: ArrayLike<any> | null;
+  currentIndex: number;
+  onSelected: (index: number) => void;
+};
+
+const CustomPicker = ({
+  label,
+  data,
+  currentIndex,
+  onSelected,
+}: CustomPickerProps) => {
+  return (
+    <>
+      <Text style={styles.title}>{label}</Text>
+      <View style={styles.wrapperHorizontal}>
+        <FlatList
+          horizontal
+          data={data}
+          keyExtractor={item => String(item)}
+          renderItem={({item, index}: {item: string; index: number}) => {
+            const selected = index === currentIndex;
+            return (
+              <TouchableWithoutFeedback onPress={() => onSelected(index)}>
+                <View
+                  style={[
+                    styles.itemStyleHorizontal,
+                    selected && styles.itemSelectedStyleHorizontal,
+                  ]}>
+                  <Text
+                    style={{
+                      textAlign: 'center',
+                      color: selected ? 'black' : 'grey',
+                      fontWeight: selected ? 'bold' : 'normal',
+                    }}>
+                    {item + ''}
+                  </Text>
+                </View>
+              </TouchableWithoutFeedback>
+            );
+          }}
+        />
+      </View>
+    </>
+  );
+};
+
+const fontStyles = ['normal', 'italic'];
+const fontVariants = [
+  undefined,
+  'small-caps',
+  'oldstyle-nums',
+  'lining-nums',
+  'tabular-nums',
+  'proportional-nums',
+];
+const fontWeights = [
+  'normal',
+  'bold',
+  '100',
+  '200',
+  '300',
+  '400',
+  '500',
+  '600',
+  '700',
+  '800',
+  '900',
+];
+const textAlignments = ['auto', 'left', 'right', 'center', 'justify'];
+const textDecorationLines = [
+  'none',
+  'underline',
+  'line-through',
+  'underline line-through',
+];
+const textDecorationStyles = ['solid', 'double', 'dotted', 'dashed'];
+const textTransformations = ['none', 'uppercase', 'lowercase', 'capitalize'];
+const textAlignmentsVertical = ['auto', 'top', 'bottom', 'center'];
+const writingDirections = ['auto', 'ltr', 'rtl'];
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  pargraphWrapper: {
+    backgroundColor: 'black',
+  },
+  paragraph: {
+    color: '#fff',
+    textDecorationColor: 'yellow',
+    textShadowColor: 'red',
+    textShadowRadius: 1,
+    padding: 24,
+  },
+  wrapperHorizontal: {
+    justifyContent: 'center',
+    color: 'black',
+  },
+  itemStyleHorizontal: {
+    marginRight: 10,
+    height: 50,
+    padding: 8,
+    borderWidth: 1,
+    borderColor: 'grey',
+    borderRadius: 8,
+    textAlign: 'center',
+    justifyContent: 'center',
+  },
+  itemSelectedStyleHorizontal: {
+    borderWidth: 2,
+    borderColor: '#06bcee',
+  },
+  platformContainer: {
+    marginTop: 8,
+    borderTopWidth: 1,
+  },
+  platformContainerTitle: {
+    marginTop: 8,
+  },
+  title: {
+    fontWeight: 'bold',
+    marginVertical: 8,
+  },
+});
+
+export default App;
+```
+
+</TabItem>
+</Tabs>
+
+# Reference
+
+## Props
+
+### `color`
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `fontFamily`
+
+| Type   |
+| ------ |
+| string |
+
+The generic font families `system-ui`, `ui-sans-serif`, `ui-serif`, `ui-monospace`, and `ui-rounded` are supported on iOS.
+
+---
+
+### `fontSize`
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `fontStyle`
+
+| Type                         |
+| ---------------------------- |
+| enum(`'normal'`, `'italic'`) |
+
+---
+
+### `fontWeight`
+
+Specifies font weight. The values `'normal'` and `'bold'` are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen.
+
+| Type                                                                                                                  | Default    |
+| --------------------------------------------------------------------------------------------------------------------- | ---------- |
+| enum(`'normal'`, `'bold'`, `'100'`, `'200'`, `'300'`, `'400'`, `'500'`, `'600'`, `'700'`, `'800'`, `'900'`) or number | `'normal'` |
+
+---
+
+### `includeFontPadding` <div className="label android">Android</div>
+
+Set to `false` to remove extra font padding intended to make space for certain ascenders / descenders. With some fonts, this padding can make text look slightly misaligned when centered vertically. For best results also set `textAlignVertical` to `center`.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `true`  |
+
+---
+
+### `fontVariant`
+
+Allows you to set all the font variants for a font. Can be set by using an array of enums or a space-separated string e.g. `'small-caps common-ligatures'`.
+
+| Type                                                                                                                 | Default |
+| -------------------------------------------------------------------------------------------------------------------- | ------- |
+| array of enum(`'small-caps'`, `'oldstyle-nums'`, `'lining-nums'`, `'tabular-nums'`, `'proportional-nums'`) or string | `[]`    |
+
+---
+
+### `letterSpacing`
+
+Increase or decrease the spacing between characters. By default there is no extra letter spacing.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `lineHeight`
+
+Numeric value that controls the vertical spacing between lines of text within a text element. It specifies the distance between the baselines of consecutive lines of text.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `textAlign`
+
+Specifies text alignment. On Android, the value 'justify' is only supported on Oreo (8.0) or above (API level >= 26). The value will fallback to `left` on lower Android versions.
+
+| Type                                                         | Default  |
+| ------------------------------------------------------------ | -------- |
+| enum(`'auto'`, `'left'`, `'right'`, `'center'`, `'justify'`) | `'auto'` |
+
+---
+
+### `textAlignVertical` <div className="label android">Android</div>
+
+An alias for `verticalAlign` style prop, if you use both properties, `verticalAlign` will take precedence over `textAlignVertical`
+
+| Type                                            | Default  |
+| ----------------------------------------------- | -------- |
+| enum(`'auto'`, `'top'`, `'bottom'`, `'center'`) | `'auto'` |
+
+---
+
+### `textDecorationColor` <div className="label ios">iOS</div>
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `textDecorationLine`
+
+| Type                                                                        | Default  |
+| --------------------------------------------------------------------------- | -------- |
+| enum(`'none'`, `'underline'`, `'line-through'`, `'underline line-through'`) | `'none'` |
+
+---
+
+### `textDecorationStyle` <div className="label ios">iOS</div>
+
+| Type                                                | Default   |
+| --------------------------------------------------- | --------- |
+| enum(`'solid'`, `'double'`, `'dotted'`, `'dashed'`) | `'solid'` |
+
+---
+
+### `textShadowColor`
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `textShadowOffset`
+
+| Type                                        |
+| ------------------------------------------- |
+| object: `{width?: number, height?: number}` |
+
+---
+
+### `textShadowRadius`
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `textTransform`
+
+| Type                                                         | Default  |
+| ------------------------------------------------------------ | -------- |
+| enum(`'none'`, `'uppercase'`, `'lowercase'`, `'capitalize'`) | `'none'` |
+
+---
+
+### `verticalAlign` <div className="label android">Android</div>
+
+| Type                                            | Default  |
+| ----------------------------------------------- | -------- |
+| enum(`'auto'`, `'top'`, `'bottom'`, `'middle'`) | `'auto'` |
+
+---
+
+### `writingDirection` <div className="label ios">iOS</div>
+
+| Type                             | Default  |
+| -------------------------------- | -------- |
+| enum(`'auto'`, `'ltr'`, `'rtl'`) | `'auto'` |
+
+---
+
+### `userSelect`
+
+It allows the user to select text and to use the native copy and paste functionality. Has precedence over the `selectable` prop.
+
+| Type                                                     | Default |
+| -------------------------------------------------------- | ------- |
+| enum(`'auto'`, `'text'`, `'none'`, `'contain'`, `'all'`) | `none`  |
diff --git a/website/versioned_docs/version-0.86/text.md b/website/versioned_docs/version-0.86/text.md
index 3112485639c..0e72ec8c27b 100644
--- a/website/versioned_docs/version-0.86/text.md
+++ b/website/versioned_docs/version-0.86/text.md
@@ -1,781 +1,780 @@
----
-id: text
-title: Text
----
-
-A React component for displaying text.
-
-`Text` supports nesting, styling, and touch handling.
-
-In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines:
-
-```SnackPlayer name=Text%20Function%20Component%20Example
-import React, {useState} from 'react';
-import {Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const TextInANest = () => {
-  const [titleText, setTitleText] = useState("Bird's Nest");
-  const bodyText = 'This is not really a bird nest.';
-
-  const onPressTitle = () => {
-    setTitleText("Bird's Nest [pressed]");
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <Text style={styles.baseText}>
-          <Text style={styles.titleText} onPress={onPressTitle}>
-            {titleText}
-            {'\n'}
-            {'\n'}
-          </Text>
-          <Text numberOfLines={5}>{bodyText}</Text>
-        </Text>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  baseText: {
-    fontFamily: 'Cochin',
-  },
-  titleText: {
-    fontSize: 20,
-    fontWeight: 'bold',
-  },
-});
-
-export default TextInANest;
-```
-
-## Nested text
-
-Both Android and iOS allow you to display formatted text by annotating ranges of a string with specific formatting like bold or colored text (`NSAttributedString` on iOS, `SpannableString` on Android). In practice, this is very tedious. For React Native, we decided to use the web paradigm for this, where you can nest text to achieve the same effect.
-
-```SnackPlayer name=Nested%20Text%20Example
-import React from 'react';
-import {Text, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const BoldAndBeautiful = () => (
-  <SafeAreaProvider>
-    <SafeAreaView style={styles.container}>
-      <Text style={styles.baseText}>
-        I am bold
-        <Text style={styles.innerText}> and red</Text>
-      </Text>
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  baseText: {
-    fontWeight: 'bold',
-  },
-  innerText: {
-    color: 'red',
-  },
-});
-
-export default BoldAndBeautiful;
-```
-
-Behind the scenes, React Native converts this to a flat `NSAttributedString` or `SpannableString` that contains the following information:
-
-```
-"I am bold and red"
-0-9: bold
-9-17: bold, red
-```
-
-## 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.
-
-```tsx
-<Text>
-  <Text>First part and </Text>
-  <Text>second part</Text>
-</Text>
-// Text container: the text will be inline, if the space allows it
-// |First part and second part|
-
-// otherwise, the text will flow as if it was one
-// |First part |
-// |and second |
-// |part       |
-
-<View>
-  <Text>First part and </Text>
-  <Text>second part</Text>
-</View>
-// View container: each text is its own block
-// |First part and|
-// |second part   |
-
-// otherwise, the text will flow in its own block
-// |First part |
-// |and        |
-// |second part|
-```
-
-## Limited Style Inheritance
-
-On the web, the usual way to set a font family and size for the entire document is to take advantage of inherited CSS properties like so:
-
-```css
-html {
-  font-family:
-    'lucida grande', tahoma, verdana, arial, sans-serif;
-  font-size: 11px;
-  color: #141823;
-}
-```
-
-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>`.
-
-```tsx
-// BAD: will raise exception, can't have a text node as child of a <View>
-<View>
-  Some text
-</View>
-
-// GOOD
-<View>
-  <Text>
-    Some text
-  </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.
-
-```tsx
-<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:
-
-```tsx
-const MyAppHeaderText = ({children}) => {
-  return (
-    <MyAppText>
-      <Text style={{fontSize: 20}}>{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.
-
-```tsx
-<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:
-
-- (Developer) React components are designed with strong isolation in mind: You should be able to drop a component anywhere in your application, trusting that as long as the props are the same, it will look and behave the same way. Text properties that could inherit from outside of the props would break this isolation.
-
-- (Implementor) The implementation of React Native is also simplified. We do not need to have a `fontFamily` field on every single element, and we do not need to potentially traverse the tree up to the root every time we display a text node. The style inheritance is only encoded inside of the native Text component and doesn't leak to other components or the system itself.
-
----
-
-# Reference
-
-## Props
-
-### `accessibilityHint`
-
-An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityLanguage` <div className="label ios">iOS</div>
-
-A value indicating which language should be used by the screen reader when the user interacts with the element. It should follow the [BCP 47 specification](https://www.rfc-editor.org/info/bcp47).
-
-See the [iOS `accessibilityLanguage` doc](https://developer.apple.com/documentation/objectivec/nsobject/1615192-accessibilitylanguage) for more information.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityLabel`
-
-Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the `Text` nodes separated by space.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityRole`
-
-Tells the screen reader to treat the currently focused on element as having a specific role.
-
-On iOS, these roles map to corresponding Accessibility Traits. Image button has the same functionality as if the trait was set to both 'image' and 'button'. See the [Accessibility guide](accessibility.md#accessibilitytraits-ios) for more information.
-
-On Android, these roles have similar functionality on TalkBack as adding Accessibility Traits does on Voiceover in iOS
-
-| Type                                                 |
-| ---------------------------------------------------- |
-| [AccessibilityRole](accessibility#accessibilityrole) |
-
----
-
-### `accessibilityState`
-
-Tells the screen reader to treat the currently focused on element as being in a specific state.
-
-You can provide one state, no state, or multiple states. The states must be passed in through an object, e.g. `{selected: true, disabled: true}`.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| [AccessibilityState](accessibility#accessibilitystate) |
-
----
-
-### `accessibilityActions`
-
-Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The `accessibilityActions` property should contain a list of action objects. Each action object should contain the field name and label.
-
-See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
-
-| Type  | Required |
-| ----- | -------- |
-| array | No       |
-
----
-
-### `onAccessibilityAction`
-
-Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.
-
-See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
-
-| Type     | Required |
-| -------- | -------- |
-| function | No       |
-
----
-
-### `accessible`
-
-When set to `true`, indicates that the view is an accessibility element.
-
-See the [Accessibility guide](accessibility#accessible-ios-android) for more information.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `true`  |
-
----
-
-### `adjustsFontSizeToFit`
-
-Specifies whether fonts should be scaled down automatically to fit given style constraints.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
----
-
-### `allowFontScaling`
-
-Specifies whether fonts should scale to respect Text Size accessibility settings.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `true`  |
-
----
-
-### `android_hyphenationFrequency` <div className="label android">Android</div>
-
-Sets the frequency of automatic hyphenation to use when determining word breaks on Android API Level 23+.
-
-| Type                                | Default  |
-| ----------------------------------- | -------- |
-| enum(`'none'`, `'normal'`,`'full'`) | `'none'` |
-
----
-
-### `aria-busy`
-
-Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-checked`
-
-Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
-| Type             | Default |
-| ---------------- | ------- |
-| boolean, 'mixed' | false   |
-
----
-
-### `aria-disabled`
-
-Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-expanded`
-
-Indicates whether an expandable element is currently expanded or collapsed.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-label`
-
-Defines a string value that labels an interactive element.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `aria-selected`
-
-Indicates whether a selectable element is currently selected or not.
-
-| Type    |
-| ------- |
-| boolean |
-
-### `dataDetectorType` <div className="label android">Android</div>
-
-Determines the types of data converted to clickable URLs in the text element. By default, no data types are detected.
-
-You can provide only one type.
-
-| Type                                                          | Default  |
-| ------------------------------------------------------------- | -------- |
-| enum(`'phoneNumber'`, `'link'`, `'email'`, `'none'`, `'all'`) | `'none'` |
-
----
-
-### `disabled` <div className="label android">Android</div>
-
-Specifies the disabled state of the text view for testing purposes.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `dynamicTypeRamp` <div className="label ios">iOS</div>
-
-The [Dynamic Type](https://developer.apple.com/documentation/uikit/uifont/scaling_fonts_automatically) ramp to apply to this element on iOS.
-
-| Type                                                                                                                                                     | Default  |
-| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
-| enum(`'caption2'`, `'caption1'`, `'footnote'`, `'subheadline'`, `'callout'`, `'body'`, `'headline'`, `'title3'`, `'title2'`, `'title1'`, `'largeTitle'`) | `'body'` |
-
----
-
-### `ellipsizeMode`
-
-When `numberOfLines` is set, this prop defines how the text will be truncated. `numberOfLines` must be set in conjunction with this prop.
-
-This can be one of the following values:
-
-- `head` - The line is displayed so that the end fits in the container and the missing text at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz"
-- `middle` - The line is displayed so that the beginning and end fit in the container and the missing text in the middle is indicated by an ellipsis glyph. "ab...yz"
-- `tail` - The line is displayed so that the beginning fits in the container and the missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..."
-- `clip` - Lines are not drawn past the edge of the text container.
-
-:::note
-On Android, when `numberOfLines` is set to a value higher than `1`, only `tail` value will work correctly.
-:::
-
-| Type                                           | Default |
-| ---------------------------------------------- | ------- |
-| enum(`'head'`, `'middle'`, `'tail'`, `'clip'`) | `tail`  |
-
----
-
-### `id`
-
-Used to locate this view from native code. Has precedence over `nativeID` prop.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `maxFontSizeMultiplier`
-
-Specifies the largest possible scale a font can reach when `allowFontScaling` is enabled. Possible values:
-
-- `null/undefined`: inherit from the parent node or the global default (0)
-- `0`: no max, ignore parent/global default
-- `>= 1`: sets the `maxFontSizeMultiplier` of this node to this value
-
-| Type   | Default     |
-| ------ | ----------- |
-| number | `undefined` |
-
----
-
-### `minimumFontScale`
-
-Specifies the smallest possible scale a font can reach when `adjustsFontSizeToFit` is enabled. (values 0.01-1.0).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nativeID`
-
-Used to locate this view from native code.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `numberOfLines`
-
-Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. Setting this property to `0` will result in unsetting this value, which means that no lines restriction will be applied.
-
-This prop is commonly used with `ellipsizeMode`.
-
-| Type   | Default |
-| ------ | ------- |
-| number | `0`     |
-
----
-
-### `onLayout`
-
-Invoked on mount and on layout changes.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
-
----
-
-### `onLongPress`
-
-This function is called on long press.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onMoveShouldSetResponder`
-
-Does this view want to "claim" touch responsiveness? This is called for every touch move on the `View` when it is not the responder.
-
-| Type                                                      |
-| --------------------------------------------------------- |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
-
----
-
-### `onPress`
-
-Function called on user press, triggered after `onPressOut`.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onPressIn`
-
-Called immediately when a touch is engaged, before `onPressOut` and `onPress`.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onPressOut`
-
-Called when a touch is released.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onResponderGrant`
-
-The View is now responding to touch events. This is the time to highlight and show the user what is happening.
-
-On Android, return true from this callback to prevent any other native components from becoming responder until this responder terminates.
-
-| Type                                                              |
-| ----------------------------------------------------------------- |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void ｜ boolean` |
-
----
-
-### `onResponderMove`
-
-The user is moving their finger.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onResponderRelease`
-
-Fired at the end of the touch.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onResponderTerminate`
-
-The responder has been taken from the `View`. Might be taken by other views after a call to `onResponderTerminationRequest`, or might be taken by the OS without asking (e.g., happens with control center/ notification center on iOS)
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onResponderTerminationRequest`
-
-Some other `View` wants to become a responder and is asking this `View` to release its responder. Returning `true` allows its release.
-
-| Type                                                      |
-| --------------------------------------------------------- |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
-
----
-
-### `onStartShouldSetResponderCapture`
-
-If a parent `View` wants to prevent a child `View` from becoming a responder on a touch start, it should have this handler which returns `true`.
-
-| Type                                                      |
-| --------------------------------------------------------- |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
-
----
-
-### `onTextLayout`
-
-Invoked on Text layout change.
-
-| Type                                                 |
-| ---------------------------------------------------- |
-| ([`TextLayoutEvent`](text#textlayoutevent)) => mixed |
-
----
-
-### `pressRetentionOffset`
-
-When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations.
-
-| Type                 |
-| -------------------- |
-| [Rect](rect), number |
-
----
-
-### `ref`
-
-A ref setter that will be assigned an [element node](element-nodes) when mounted.
-
-Note that `Text` components don't provide text nodes, the same way that paragraph elements (`<p>`) on Web are element nodes instead of text nodes. Text nodes can be found as their child nodes instead.
-
----
-
-### `role`
-
-`role` communicates the purpose of a component to the user of an assistive technology. Has precedence over the [`accessibilityRole`](text#accessibilityrole) prop.
-
-| Type                       |
-| -------------------------- |
-| [Role](accessibility#role) |
-
----
-
-### `selectable`
-
-Lets the user select text, to use the native copy and paste functionality.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
----
-
-### `selectionColor` <div className="label android">Android</div>
-
-The highlight color of the text.
-
-| Type            |
-| --------------- |
-| [color](colors) |
-
----
-
-### `style`
-
-| Type                                                                 |
-| -------------------------------------------------------------------- |
-| [Text Style](text-style-props), [View Style Props](view-style-props) |
-
----
-
-### `suppressHighlighting` <div className="label ios">iOS</div>
-
-When `true`, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | `false` |
-
----
-
-### `testID`
-
-Used to locate this view in end-to-end tests.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `textBreakStrategy` <div className="label android">Android</div>
-
-Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced`.
-
-| Type                                            | Default       |
-| ----------------------------------------------- | ------------- |
-| enum(`'simple'`, `'highQuality'`, `'balanced'`) | `highQuality` |
-
----
-
-### `lineBreakStrategyIOS` <div className="label ios">iOS</div>
-
-Set line break strategy on iOS 14+. Possible values are `none`, `standard`, `hangul-word` and `push-out`.
-
-| Type                                                        | Default  |
-| ----------------------------------------------------------- | -------- |
-| enum(`'none'`, `'standard'`, `'hangul-word'`, `'push-out'`) | `'none'` |
-
-## Type Definitions
-
-### TextLayout
-
-`TextLayout` object is a part of [`TextLayoutEvent`](text#textlayoutevent) callback and contains the measurement data for `Text` line.
-
-#### Example
-
-```js
-{
-    capHeight: 10.496,
-    ascender: 14.624,
-    descender: 4,
-    width: 28.224,
-    height: 18.624,
-    xHeight: 6.048,
-    x: 0,
-    y: 0
-}
-```
-
-#### Properties
-
-| Name      | Type   | Optional | Description                                                         |
-| --------- | ------ | -------- | ------------------------------------------------------------------- |
-| ascender  | number | No       | The line ascender height after the text layout changes.             |
-| capHeight | number | No       | Height of capital letter above the baseline.                        |
-| descender | number | No       | The line descender height after the text layout changes.            |
-| height    | number | No       | Height of the line after the text layout changes.                   |
-| width     | number | No       | Width of the line after the text layout changes.                    |
-| x         | number | No       | Line X coordinate inside the Text component.                        |
-| xHeight   | number | No       | Distance between the baseline and median of the line (corpus size). |
-| y         | number | No       | Line Y coordinate inside the Text component.                        |
-
-### TextLayoutEvent
-
-`TextLayoutEvent` object is returned in the callback as a result of a component layout change. It contains a key called `lines` with a value which is an array containing [`TextLayout`](text#textlayout) object corresponded to every rendered text line.
-
-#### Example
-
-```js
-{
-  lines: [
-    TextLayout,
-    TextLayout,
-    // ...
-  ];
-  target: 1127;
-}
-```
-
-#### Properties
-
-| Name   | Type                                    | Optional | Description                                           |
-| ------ | --------------------------------------- | -------- | ----------------------------------------------------- |
-| lines  | array of [TextLayout](text#textlayout)s | No       | Provides the TextLayout data for every rendered line. |
-| target | number                                  | No       | The node id of the element.                           |
+---
+id: text
+title: Text
+---
+
+A React component for displaying text.
+
+`Text` supports nesting, styling, and touch handling.
+
+In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines:
+
+```SnackPlayer name=Text%20Function%20Component%20Example
+import {useState} from 'react';
+import {Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const TextInANest = () => {
+  const [titleText, setTitleText] = useState("Bird's Nest");
+  const bodyText = 'This is not really a bird nest.';
+
+  const onPressTitle = () => {
+    setTitleText("Bird's Nest [pressed]");
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.baseText}>
+          <Text style={styles.titleText} onPress={onPressTitle}>
+            {titleText}
+            {'\n'}
+            {'\n'}
+          </Text>
+          <Text numberOfLines={5}>{bodyText}</Text>
+        </Text>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  baseText: {
+    fontFamily: 'Cochin',
+  },
+  titleText: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+});
+
+export default TextInANest;
+```
+
+## Nested text
+
+Both Android and iOS allow you to display formatted text by annotating ranges of a string with specific formatting like bold or colored text (`NSAttributedString` on iOS, `SpannableString` on Android). In practice, this is very tedious. For React Native, we decided to use the web paradigm for this, where you can nest text to achieve the same effect.
+
+```SnackPlayer name=Nested%20Text%20Example
+import {Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const BoldAndBeautiful = () => (
+  <SafeAreaProvider>
+    <SafeAreaView style={styles.container}>
+      <Text style={styles.baseText}>
+        I am bold
+        <Text style={styles.innerText}> and red</Text>
+      </Text>
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  baseText: {
+    fontWeight: 'bold',
+  },
+  innerText: {
+    color: 'red',
+  },
+});
+
+export default BoldAndBeautiful;
+```
+
+Behind the scenes, React Native converts this to a flat `NSAttributedString` or `SpannableString` that contains the following information:
+
+```
+"I am bold and red"
+0-9: bold
+9-17: bold, red
+```
+
+## 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.
+
+```tsx
+<Text>
+  <Text>First part and </Text>
+  <Text>second part</Text>
+</Text>
+// Text container: the text will be inline, if the space allows it
+// |First part and second part|
+
+// otherwise, the text will flow as if it was one
+// |First part |
+// |and second |
+// |part       |
+
+<View>
+  <Text>First part and </Text>
+  <Text>second part</Text>
+</View>
+// View container: each text is its own block
+// |First part and|
+// |second part   |
+
+// otherwise, the text will flow in its own block
+// |First part |
+// |and        |
+// |second part|
+```
+
+## Limited Style Inheritance
+
+On the web, the usual way to set a font family and size for the entire document is to take advantage of inherited CSS properties like so:
+
+```css
+html {
+  font-family:
+    'lucida grande', tahoma, verdana, arial, sans-serif;
+  font-size: 11px;
+  color: #141823;
+}
+```
+
+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>`.
+
+```tsx
+// BAD: will raise exception, can't have a text node as child of a <View>
+<View>
+  Some text
+</View>
+
+// GOOD
+<View>
+  <Text>
+    Some text
+  </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.
+
+```tsx
+<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:
+
+```tsx
+const MyAppHeaderText = ({children}) => {
+  return (
+    <MyAppText>
+      <Text style={{fontSize: 20}}>{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.
+
+```tsx
+<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:
+
+- (Developer) React components are designed with strong isolation in mind: You should be able to drop a component anywhere in your application, trusting that as long as the props are the same, it will look and behave the same way. Text properties that could inherit from outside of the props would break this isolation.
+
+- (Implementor) The implementation of React Native is also simplified. We do not need to have a `fontFamily` field on every single element, and we do not need to potentially traverse the tree up to the root every time we display a text node. The style inheritance is only encoded inside of the native Text component and doesn't leak to other components or the system itself.
+
+---
+
+# Reference
+
+## Props
+
+### `accessibilityHint`
+
+An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityLanguage` <div className="label ios">iOS</div>
+
+A value indicating which language should be used by the screen reader when the user interacts with the element. It should follow the [BCP 47 specification](https://www.rfc-editor.org/info/bcp47).
+
+See the [iOS `accessibilityLanguage` doc](https://developer.apple.com/documentation/objectivec/nsobject/1615192-accessibilitylanguage) for more information.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityLabel`
+
+Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the `Text` nodes separated by space.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityRole`
+
+Tells the screen reader to treat the currently focused on element as having a specific role.
+
+On iOS, these roles map to corresponding Accessibility Traits. Image button has the same functionality as if the trait was set to both 'image' and 'button'. See the [Accessibility guide](accessibility.md#accessibilitytraits-ios) for more information.
+
+On Android, these roles have similar functionality on TalkBack as adding Accessibility Traits does on Voiceover in iOS
+
+| Type                                                 |
+| ---------------------------------------------------- |
+| [AccessibilityRole](accessibility#accessibilityrole) |
+
+---
+
+### `accessibilityState`
+
+Tells the screen reader to treat the currently focused on element as being in a specific state.
+
+You can provide one state, no state, or multiple states. The states must be passed in through an object, e.g. `{selected: true, disabled: true}`.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| [AccessibilityState](accessibility#accessibilitystate) |
+
+---
+
+### `accessibilityActions`
+
+Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The `accessibilityActions` property should contain a list of action objects. Each action object should contain the field name and label.
+
+See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
+
+| Type  | Required |
+| ----- | -------- |
+| array | No       |
+
+---
+
+### `onAccessibilityAction`
+
+Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.
+
+See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+---
+
+### `accessible`
+
+When set to `true`, indicates that the view is an accessibility element.
+
+See the [Accessibility guide](accessibility#accessible-ios-android) for more information.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `true`  |
+
+---
+
+### `adjustsFontSizeToFit`
+
+Specifies whether fonts should be scaled down automatically to fit given style constraints.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+---
+
+### `allowFontScaling`
+
+Specifies whether fonts should scale to respect Text Size accessibility settings.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `true`  |
+
+---
+
+### `android_hyphenationFrequency` <div className="label android">Android</div>
+
+Sets the frequency of automatic hyphenation to use when determining word breaks on Android API Level 23+.
+
+| Type                                | Default  |
+| ----------------------------------- | -------- |
+| enum(`'none'`, `'normal'`,`'full'`) | `'none'` |
+
+---
+
+### `aria-busy`
+
+Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-checked`
+
+Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
+
+| Type             | Default |
+| ---------------- | ------- |
+| boolean, 'mixed' | false   |
+
+---
+
+### `aria-disabled`
+
+Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-expanded`
+
+Indicates whether an expandable element is currently expanded or collapsed.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-label`
+
+Defines a string value that labels an interactive element.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `aria-selected`
+
+Indicates whether a selectable element is currently selected or not.
+
+| Type    |
+| ------- |
+| boolean |
+
+### `dataDetectorType` <div className="label android">Android</div>
+
+Determines the types of data converted to clickable URLs in the text element. By default, no data types are detected.
+
+You can provide only one type.
+
+| Type                                                          | Default  |
+| ------------------------------------------------------------- | -------- |
+| enum(`'phoneNumber'`, `'link'`, `'email'`, `'none'`, `'all'`) | `'none'` |
+
+---
+
+### `disabled` <div className="label android">Android</div>
+
+Specifies the disabled state of the text view for testing purposes.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `dynamicTypeRamp` <div className="label ios">iOS</div>
+
+The [Dynamic Type](https://developer.apple.com/documentation/uikit/uifont/scaling_fonts_automatically) ramp to apply to this element on iOS.
+
+| Type                                                                                                                                                     | Default  |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
+| enum(`'caption2'`, `'caption1'`, `'footnote'`, `'subheadline'`, `'callout'`, `'body'`, `'headline'`, `'title3'`, `'title2'`, `'title1'`, `'largeTitle'`) | `'body'` |
+
+---
+
+### `ellipsizeMode`
+
+When `numberOfLines` is set, this prop defines how the text will be truncated. `numberOfLines` must be set in conjunction with this prop.
+
+This can be one of the following values:
+
+- `head` - The line is displayed so that the end fits in the container and the missing text at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz"
+- `middle` - The line is displayed so that the beginning and end fit in the container and the missing text in the middle is indicated by an ellipsis glyph. "ab...yz"
+- `tail` - The line is displayed so that the beginning fits in the container and the missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..."
+- `clip` - Lines are not drawn past the edge of the text container.
+
+:::note
+On Android, when `numberOfLines` is set to a value higher than `1`, only `tail` value will work correctly.
+:::
+
+| Type                                           | Default |
+| ---------------------------------------------- | ------- |
+| enum(`'head'`, `'middle'`, `'tail'`, `'clip'`) | `tail`  |
+
+---
+
+### `id`
+
+Used to locate this view from native code. Has precedence over `nativeID` prop.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `maxFontSizeMultiplier`
+
+Specifies the largest possible scale a font can reach when `allowFontScaling` is enabled. Possible values:
+
+- `null/undefined`: inherit from the parent node or the global default (0)
+- `0`: no max, ignore parent/global default
+- `>= 1`: sets the `maxFontSizeMultiplier` of this node to this value
+
+| Type   | Default     |
+| ------ | ----------- |
+| number | `undefined` |
+
+---
+
+### `minimumFontScale`
+
+Specifies the smallest possible scale a font can reach when `adjustsFontSizeToFit` is enabled. (values 0.01-1.0).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nativeID`
+
+Used to locate this view from native code.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `numberOfLines`
+
+Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. Setting this property to `0` will result in unsetting this value, which means that no lines restriction will be applied.
+
+This prop is commonly used with `ellipsizeMode`.
+
+| Type   | Default |
+| ------ | ------- |
+| number | `0`     |
+
+---
+
+### `onLayout`
+
+Invoked on mount and on layout changes.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
+
+---
+
+### `onLongPress`
+
+This function is called on long press.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onMoveShouldSetResponder`
+
+Does this view want to "claim" touch responsiveness? This is called for every touch move on the `View` when it is not the responder.
+
+| Type                                                      |
+| --------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
+
+---
+
+### `onPress`
+
+Function called on user press, triggered after `onPressOut`.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onPressIn`
+
+Called immediately when a touch is engaged, before `onPressOut` and `onPress`.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onPressOut`
+
+Called when a touch is released.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onResponderGrant`
+
+The View is now responding to touch events. This is the time to highlight and show the user what is happening.
+
+On Android, return true from this callback to prevent any other native components from becoming responder until this responder terminates.
+
+| Type                                                              |
+| ----------------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void ｜ boolean` |
+
+---
+
+### `onResponderMove`
+
+The user is moving their finger.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onResponderRelease`
+
+Fired at the end of the touch.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onResponderTerminate`
+
+The responder has been taken from the `View`. Might be taken by other views after a call to `onResponderTerminationRequest`, or might be taken by the OS without asking (e.g., happens with control center/ notification center on iOS)
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onResponderTerminationRequest`
+
+Some other `View` wants to become a responder and is asking this `View` to release its responder. Returning `true` allows its release.
+
+| Type                                                      |
+| --------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
+
+---
+
+### `onStartShouldSetResponderCapture`
+
+If a parent `View` wants to prevent a child `View` from becoming a responder on a touch start, it should have this handler which returns `true`.
+
+| Type                                                      |
+| --------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
+
+---
+
+### `onTextLayout`
+
+Invoked on Text layout change.
+
+| Type                                                 |
+| ---------------------------------------------------- |
+| ([`TextLayoutEvent`](text#textlayoutevent)) => mixed |
+
+---
+
+### `pressRetentionOffset`
+
+When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations.
+
+| Type                 |
+| -------------------- |
+| [Rect](rect), number |
+
+---
+
+### `ref`
+
+A ref setter that will be assigned an [element node](element-nodes) when mounted.
+
+Note that `Text` components don't provide text nodes, the same way that paragraph elements (`<p>`) on Web are element nodes instead of text nodes. Text nodes can be found as their child nodes instead.
+
+---
+
+### `role`
+
+`role` communicates the purpose of a component to the user of an assistive technology. Has precedence over the [`accessibilityRole`](text#accessibilityrole) prop.
+
+| Type                       |
+| -------------------------- |
+| [Role](accessibility#role) |
+
+---
+
+### `selectable`
+
+Lets the user select text, to use the native copy and paste functionality.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+---
+
+### `selectionColor` <div className="label android">Android</div>
+
+The highlight color of the text.
+
+| Type            |
+| --------------- |
+| [color](colors) |
+
+---
+
+### `style`
+
+| Type                                                                 |
+| -------------------------------------------------------------------- |
+| [Text Style](text-style-props), [View Style Props](view-style-props) |
+
+---
+
+### `suppressHighlighting` <div className="label ios">iOS</div>
+
+When `true`, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+---
+
+### `testID`
+
+Used to locate this view in end-to-end tests.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `textBreakStrategy` <div className="label android">Android</div>
+
+Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced`.
+
+| Type                                            | Default       |
+| ----------------------------------------------- | ------------- |
+| enum(`'simple'`, `'highQuality'`, `'balanced'`) | `highQuality` |
+
+---
+
+### `lineBreakStrategyIOS` <div className="label ios">iOS</div>
+
+Set line break strategy on iOS 14+. Possible values are `none`, `standard`, `hangul-word` and `push-out`.
+
+| Type                                                        | Default  |
+| ----------------------------------------------------------- | -------- |
+| enum(`'none'`, `'standard'`, `'hangul-word'`, `'push-out'`) | `'none'` |
+
+## Type Definitions
+
+### TextLayout
+
+`TextLayout` object is a part of [`TextLayoutEvent`](text#textlayoutevent) callback and contains the measurement data for `Text` line.
+
+#### Example
+
+```js
+{
+    capHeight: 10.496,
+    ascender: 14.624,
+    descender: 4,
+    width: 28.224,
+    height: 18.624,
+    xHeight: 6.048,
+    x: 0,
+    y: 0
+}
+```
+
+#### Properties
+
+| Name      | Type   | Optional | Description                                                         |
+| --------- | ------ | -------- | ------------------------------------------------------------------- |
+| ascender  | number | No       | The line ascender height after the text layout changes.             |
+| capHeight | number | No       | Height of capital letter above the baseline.                        |
+| descender | number | No       | The line descender height after the text layout changes.            |
+| height    | number | No       | Height of the line after the text layout changes.                   |
+| width     | number | No       | Width of the line after the text layout changes.                    |
+| x         | number | No       | Line X coordinate inside the Text component.                        |
+| xHeight   | number | No       | Distance between the baseline and median of the line (corpus size). |
+| y         | number | No       | Line Y coordinate inside the Text component.                        |
+
+### TextLayoutEvent
+
+`TextLayoutEvent` object is returned in the callback as a result of a component layout change. It contains a key called `lines` with a value which is an array containing [`TextLayout`](text#textlayout) object corresponded to every rendered text line.
+
+#### Example
+
+```js
+{
+  lines: [
+    TextLayout,
+    TextLayout,
+    // ...
+  ];
+  target: 1127;
+}
+```
+
+#### Properties
+
+| Name   | Type                                    | Optional | Description                                           |
+| ------ | --------------------------------------- | -------- | ----------------------------------------------------- |
+| lines  | array of [TextLayout](text#textlayout)s | No       | Provides the TextLayout data for every rendered line. |
+| target | number                                  | No       | The node id of the element.                           |
diff --git a/website/versioned_docs/version-0.86/textinput.md b/website/versioned_docs/version-0.86/textinput.md
index c1d62e96278..b0ffd89bddf 100644
--- a/website/versioned_docs/version-0.86/textinput.md
+++ b/website/versioned_docs/version-0.86/textinput.md
@@ -1,1146 +1,1146 @@
----
-id: textinput
-title: TextInput
----
-
-A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.
-
-The most basic use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. A minimal example:
-
-```SnackPlayer name=TextInput%20Example
-import React from 'react';
-import {StyleSheet, TextInput} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const TextInputExample = () => {
-  const [text, onChangeText] = React.useState('Useless Text');
-  const [number, onChangeNumber] = React.useState('');
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView>
-        <TextInput
-          style={styles.input}
-          onChangeText={onChangeText}
-          value={text}
-        />
-        <TextInput
-          style={styles.input}
-          onChangeText={onChangeNumber}
-          value={number}
-          placeholder="useless placeholder"
-          keyboardType="numeric"
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  input: {
-    height: 40,
-    margin: 12,
-    borderWidth: 1,
-    padding: 10,
-  },
-});
-
-export default TextInputExample;
-```
-
-Two methods exposed via the native element are `.focus()` and `.blur()` that will focus or blur the TextInput programmatically.
-
-Note that some props are only available with `multiline={true/false}`. Additionally, border styles that apply to only one side of the element (e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if `multiline=true`. To achieve the same effect, you can wrap your `TextInput` in a `View`:
-
-```SnackPlayer name=Multiline%20TextInput%20Example
-import React from 'react';
-import {TextInput, StyleSheet} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const MultilineTextInputExample = () => {
-  const [value, onChangeText] = React.useState('Useless Multiline Placeholder');
-
-  // If you type something in the text box that is a color,
-  // the background will change to that color.
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView
-        style={{
-          flex: 1,
-          backgroundColor: value.toLowerCase(),
-        }}>
-        <TextInput
-          editable
-          multiline
-          numberOfLines={4}
-          maxLength={40}
-          onChangeText={text => onChangeText(text)}
-          value={value}
-          style={styles.textInput}
-        />
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  textInput: {
-    padding: 10,
-    borderColor: '#000',
-    borderWidth: 1,
-    margin: 12,
-  },
-});
-
-export default MultilineTextInputExample;
-```
-
-`TextInput` has a border at the bottom of its view by default. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this are to either not set height explicitly, in which case the system will take care of displaying the border in the correct position, or to not display the border by setting `underlineColorAndroid` to transparent.
-
-Note that on Android performing text selection in an input can change the app's activity `windowSoftInputMode` param to `adjustResize`. This may cause issues with components that have position: 'absolute' while the keyboard is active. To avoid this behavior either specify `windowSoftInputMode` in AndroidManifest.xml ( https://developer.android.com/guide/topics/manifest/activity-element.html ) or control this param programmatically with native code.
-
----
-
-# Reference
-
-## Props
-
-### [View Props](view.md#props)
-
-Inherits [View Props](view.md#props).
-
----
-
-### `allowFontScaling`
-
-Specifies whether fonts should scale to respect Text Size accessibility settings. The default is `true`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `autoCapitalize`
-
-Tells `TextInput` to automatically capitalize certain characters. This property is not supported by some keyboard types such as `name-phone-pad`.
-
-- `characters`: all characters.
-- `words`: first letter of each word.
-- `sentences`: first letter of each sentence (_default_).
-- `none`: don't auto capitalize anything.
-
-| Type                                             |
-| ------------------------------------------------ |
-| enum('none', 'sentences', 'words', 'characters') |
-
----
-
-### `autoComplete`
-
-Specifies autocomplete hints for the system, so it can provide autofill. On Android, the system will always attempt to offer autofill by using heuristics to identify the type of content. To disable autocomplete, set `autoComplete` to `off`.
-
-The following values work across platforms:
-
-- `additional-name`
-- `address-line1`
-- `address-line2`
-- `birthdate-day` (iOS 17+)
-- `birthdate-full` (iOS 17+)
-- `birthdate-month` (iOS 17+)
-- `birthdate-year` (iOS 17+)
-- `cc-csc` (iOS 17+)
-- `cc-exp` (iOS 17+)
-- `cc-exp-day` (iOS 17+)
-- `cc-exp-month` (iOS 17+)
-- `cc-exp-year` (iOS 17+)
-- `cc-number`
-- `country`
-- `current-password`
-- `email`
-- `family-name`
-- `given-name`
-- `honorific-prefix`
-- `honorific-suffix`
-- `name`
-- `new-password`
-- `off`
-- `one-time-code`
-- `postal-code`
-- `street-address`
-- `tel`
-- `username`
-
-<div className="label basic ios">iOS</div>
-
-The following values work on iOS only:
-
-- `cc-family-name` (iOS 17+)
-- `cc-given-name` (iOS 17+)
-- `cc-middle-name` (iOS 17+)
-- `cc-name` (iOS 17+)
-- `cc-type` (iOS 17+)
-- `nickname`
-- `organization`
-- `organization-title`
-- `url`
-
-<div className="label basic android">Android</div>
-
-The following values work on Android only:
-
-- `gender`
-- `name-family`
-- `name-given`
-- `name-middle`
-- `name-middle-initial`
-- `name-prefix`
-- `name-suffix`
-- `password`
-- `password-new`
-- `postal-address`
-- `postal-address-country`
-- `postal-address-extended`
-- `postal-address-extended-postal-code`
-- `postal-address-locality`
-- `postal-address-region`
-- `sms-otp`
-- `tel-country-code`
-- `tel-device`
-- `tel-national`
-- `username-new`
-
-| Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| enum('additional-name', 'address-line1', 'address-line2', 'birthdate-day', 'birthdate-full', 'birthdate-month', 'birthdate-year', 'cc-csc', 'cc-exp', 'cc-exp-day', 'cc-exp-month', 'cc-exp-year', 'cc-number', 'country', 'current-password', 'email', 'family-name', 'given-name', 'honorific-prefix', 'honorific-suffix', 'name', 'new-password', 'off', 'one-time-code', 'postal-code', 'street-address', 'tel', 'username', 'cc-family-name', 'cc-given-name', 'cc-middle-name', 'cc-name', 'cc-type', 'nickname', 'organization', 'organization-title', 'url', 'gender', 'name-family', 'name-given', 'name-middle', 'name-middle-initial', 'name-prefix', 'name-suffix', 'password', 'password-new', 'postal-address', 'postal-address-country', 'postal-address-extended', 'postal-address-extended-postal-code', 'postal-address-locality', 'postal-address-region', 'sms-otp', 'tel-country-code', 'tel-device', 'tel-national', 'username-new') |
-
----
-
-### `autoCorrect`
-
-If `false`, disables auto-correct. The default value is `true`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `autoFocus`
-
-If `true`, focuses the input. The default value is `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### 🗑️ `blurOnSubmit`
-
-:::warning Deprecated
-Note that `submitBehavior` now takes the place of `blurOnSubmit` and will override any behavior defined by `blurOnSubmit`. See [submitBehavior](textinput#submitbehavior).
-:::
-
-If `true`, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting `blurOnSubmit` to `true` means that pressing return will blur the field and trigger the `onSubmitEditing` event instead of inserting a newline into the field.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `caretHidden`
-
-If `true`, caret is hidden. The default value is `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `clearButtonMode` <div className="label ios">iOS</div>
-
-When the clear button should appear on the right side of the text view. This property is supported only for single-line TextInput component. The default value is `never`.
-
-| Type                                                       |
-| ---------------------------------------------------------- |
-| enum('never', 'while-editing', 'unless-editing', 'always') |
-
----
-
-### `clearTextOnFocus` <div className="label ios">iOS</div>
-
-If `true`, clears the text field automatically when editing begins.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `contextMenuHidden`
-
-If `true`, context menu is hidden. The default value is `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `dataDetectorTypes` <div className="label ios">iOS</div>
-
-Determines the types of data converted to clickable URLs in the text input. Only valid if `multiline={true}` and `editable={false}`. By default no data types are detected.
-
-You can provide one type or an array of many types.
-
-Possible values for `dataDetectorTypes` are:
-
-- `'phoneNumber'`
-- `'link'`
-- `'address'`
-- `'calendarEvent'`
-- `'none'`
-- `'all'`
-
-| Type                                                                                                                                                     |
-| -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), ,array of enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all') |
-
----
-
-### `defaultValue`
-
-Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `disableKeyboardShortcuts` <div className="label ios">iOS</div>
-
-If `true`, the keyboard shortcuts (undo/redo and copy buttons) are disabled.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `false` |
-
----
-
-### `cursorColor` <div className="label android">Android</div>
-
-When provided it will set the color of the cursor (or "caret") in the component. Unlike the behavior of `selectionColor` the cursor color will be set independently from the color of the text selection box.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `disableFullscreenUI` <div className="label android">Android</div>
-
-When `false`, if there is a small amount of space available around a text input (e.g. landscape orientation on a phone), the OS may choose to have the user edit the text inside of a full screen text input mode. When `true`, this feature is disabled and users will always edit the text directly inside of the text input. Defaults to `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `editable`
-
-If `false`, text is not editable. The default value is `true`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `enablesReturnKeyAutomatically` <div className="label ios">iOS</div>
-
-If `true`, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `enterKeyHint`
-
-Determines what text should be shown to the return key. Has precedence over the `returnKeyType` prop.
-
-The following values work across platforms:
-
-- `done`
-- `next`
-- `search`
-- `send`
-- `go`
-
-_Android Only_
-
-The following values work on Android only:
-
-- `previous`
-
-_iOS Only_
-
-The following values work on iOS only:
-
-- `enter`
-
-| Type                                                              |
-| ----------------------------------------------------------------- |
-| enum('enter', 'done', 'next', 'previous', 'search', 'send', 'go') |
-
----
-
-### `importantForAutofill` <div className="label android">Android</div>
-
-Tells the operating system whether the individual fields in your app should be included in a view structure for autofill purposes on Android API Level 26+. Possible values are `auto`, `no`, `noExcludeDescendants`, `yes`, and `yesExcludeDescendants`. The default value is `auto`.
-
-- `auto`: Let the Android System use its heuristics to determine if the view is important for autofill.
-- `no`: This view isn't important for autofill.
-- `noExcludeDescendants`: This view and its children aren't important for autofill.
-- `yes`: This view is important for autofill.
-- `yesExcludeDescendants`: This view is important for autofill, but its children aren't important for autofill.
-
-| Type                                                                       |
-| -------------------------------------------------------------------------- |
-| enum('auto', 'no', 'noExcludeDescendants', 'yes', 'yesExcludeDescendants') |
-
----
-
-### `inlineImageLeft` <div className="label android">Android</div>
-
-If defined, the provided image resource will be rendered on the left. The image resource must be inside `/android/app/src/main/res/drawable` and referenced like
-
-```
-<TextInput
- inlineImageLeft='search_icon'
-/>
-```
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `inlineImagePadding` <div className="label android">Android</div>
-
-Padding between the inline image, if any, and the text input itself.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `inputAccessoryViewID` <div className="label ios">iOS</div>
-
-An optional identifier which links a custom [InputAccessoryView](inputaccessoryview.md) to this text input. The InputAccessoryView is rendered above the keyboard when this text input is focused.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `inputAccessoryViewButtonLabel` <div className="label ios">iOS</div>
-
-An optional label that overrides the default [InputAccessoryView](inputaccessoryview.md) button label.
-
-By default, the default button label is not localized. Use this property to provide a localized version.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `inputMode`
-
-Works like the `inputmode` attribute in HTML, it determines which keyboard to open, e.g. `numeric` and has precedence over `keyboardType`.
-
-Support the following values:
-
-- `none`
-- `text`
-- `decimal`
-- `numeric`
-- `tel`
-- `search`
-- `email`
-- `url`
-
-| Type                                                                        |
-| --------------------------------------------------------------------------- |
-| enum('decimal', 'email', 'none', 'numeric', 'search', 'tel', 'text', 'url') |
-
----
-
-### `keyboardAppearance` <div className="label ios">iOS</div>
-
-Determines the color of the keyboard.
-
-| Type                             |
-| -------------------------------- |
-| enum('default', 'light', 'dark') |
-
----
-
-### `keyboardType`
-
-Determines which keyboard to open, e.g.`numeric`.
-
-See screenshots of all the types [here](https://davidl.fr/blog/keyboard-react-native-ios-android#all-react-native-keyboard-type-examples-i-os-on-the-left-android-on-the-right).
-
-The following values work across platforms:
-
-- `default`
-- `number-pad`
-- `decimal-pad`
-- `numeric`
-- `email-address`
-- `phone-pad`
-- `url`
-
-_iOS Only_
-
-The following values work on iOS only:
-
-- `ascii-capable`
-- `numbers-and-punctuation`
-- `name-phone-pad`
-- `twitter`
-- `web-search`
-
-_Android Only_
-
-The following values work on Android only:
-
-- `visible-password`
-
-| Type                                                                                                                                                                                                    |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', 'visible-password') |
-
----
-
-### `lineBreakStrategyIOS` <div className="label ios">iOS</div>
-
-Set line break strategy on iOS 14+. Possible values are `none`, `standard`, `hangul-word` and `push-out`.
-
-| Type                                                        | Default  |
-| ----------------------------------------------------------- | -------- |
-| enum(`'none'`, `'standard'`, `'hangul-word'`, `'push-out'`) | `'none'` |
-
----
-
-### `lineBreakModeIOS` <div className="label ios">iOS</div>
-
-Set line break mode on iOS. Possible values are `wordWrapping`, `char`, `clip`, `head`, `middle` and `tail`.
-
-| Type                                                                       | Default          |
-| -------------------------------------------------------------------------- | ---------------- |
-| enum(`'wordWrapping'`, `'char'`, `'clip'`, `'head'`, `'middle'`, `'tail'`) | `'wordWrapping'` |
-
----
-
-### `maxFontSizeMultiplier`
-
-Specifies largest possible scale a font can reach when `allowFontScaling` is enabled. Possible values:
-
-- `null/undefined` (default): inherit from the parent node or the global default (0)
-- `0`: no max, ignore parent/global default
-- `>= 1`: sets the `maxFontSizeMultiplier` of this node to this value
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `maxLength`
-
-Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `multiline`
-
-If `true`, the text input can be multiple lines. The default value is `false`.
-
-:::note
-It is important to note that this aligns the text to the top on iOS, and centers it on Android. Use with `textAlignVertical` set to `top` for the same behavior in both platforms.
-:::
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `numberOfLines`
-
-:::note
-`numberOfLines` on iOS is only available on the [New Architecture](/architecture/landing-page)
-:::
-
-Sets the maximum number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `onBlur`
-
-Callback that is called when the text input is blurred.
-
-:::note
-If you are attempting to access the `text` value from `nativeEvent` keep in mind that the resulting value you get can be `undefined` which can cause unintended errors. If you are trying to find the last value of TextInput, you can use the [`onEndEditing`](textinput#onendediting) event, which is fired upon completion of editing.
-:::
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
-
----
-
-### `onChange`
-
-Callback that is called when the text input's text changes.
-
-| Type                                                  |
-| ----------------------------------------------------- |
-| (`{nativeEvent: {eventCount, target, text}}`) => void |
-
----
-
-### `onChangeText`
-
-Callback that is called when the text input's text changes. Changed text is passed as a single string argument to the callback handler.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onContentSizeChange`
-
-Callback that is called when the text input's content size changes.
-
-Only called for multiline text inputs.
-
-| Type                                                       |
-| ---------------------------------------------------------- |
-| (`{nativeEvent: {contentSize: {width, height} }}`) => void |
-
----
-
-### `onEndEditing`
-
-Callback that is called when text input ends.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onPressIn`
-
-Callback that is called when a touch is engaged.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onPressOut`
-
-Callback that is called when a touch is released.
-
-| Type                                                   |
-| ------------------------------------------------------ |
-| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
-
----
-
-### `onFocus`
-
-Callback that is called when the text input is focused.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
-
----
-
-### `onKeyPress`
-
-Callback that is called when a key is pressed. This will be called with object where `keyValue` is `'Enter'` or `'Backspace'` for respective keys and the typed-in character otherwise including `' '` for space. Fires before `onChange` callbacks. Note: on Android only the inputs from soft keyboard are handled, not the hardware keyboard inputs.
-
-| Type                                        |
-| ------------------------------------------- |
-| (`{nativeEvent: {key: keyValue} }`) => void |
-
----
-
-### `onLayout`
-
-Invoked on mount and on layout changes.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
-
----
-
-### `onScroll`
-
-Invoked on content scroll. May also contain other properties from `ScrollEvent` but on Android `contentSize` is not provided for performance reasons.
-
-| Type                                                |
-| --------------------------------------------------- |
-| (`{nativeEvent: {contentOffset: {x, y} }}`) => void |
-
----
-
-### `onSelectionChange`
-
-Callback that is called when the text input selection is changed.
-
-| Type                                                  |
-| ----------------------------------------------------- |
-| (`{nativeEvent: {selection: {start, end} }}`) => void |
-
----
-
-### `onSubmitEditing`
-
-Callback that is called when the text input's submit button is pressed.
-
-| Type                                                  |
-| ----------------------------------------------------- |
-| (`{nativeEvent: {text, eventCount, target}}`) => void |
-
-Note that on iOS this method isn't called when using `keyboardType="phone-pad"`.
-
----
-
-### `placeholder`
-
-The string that will be rendered before text input has been entered.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `placeholderTextColor`
-
-The text color of the placeholder string.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `readOnly`
-
-If `true`, text is not editable. The default value is `false`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `returnKeyLabel` <div className="label android">Android</div>
-
-Sets the return key to the label. Use it instead of `returnKeyType`.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `returnKeyType`
-
-Determines how the return key should look. On Android you can also use `returnKeyLabel`.
-
-_Cross platform_
-
-The following values work across platforms:
-
-- `done`
-- `go`
-- `next`
-- `search`
-- `send`
-
-_Android Only_
-
-The following values work on Android only:
-
-- `none`
-- `previous`
-
-_iOS Only_
-
-The following values work on iOS only:
-
-- `default`
-- `emergency-call`
-- `google`
-- `join`
-- `route`
-- `yahoo`
-
-| Type                                                                                                                              |
-| --------------------------------------------------------------------------------------------------------------------------------- |
-| enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo') |
-
-### `rejectResponderTermination` <div className="label ios">iOS</div>
-
-If `true`, allows TextInput to pass touch events to the parent component. This allows components such as SwipeableListView to be swipeable from the TextInput on iOS, as is the case on Android by default. If `false`, TextInput always asks to handle the input (except when disabled). The default value is `true`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `rows` <div className="label android">Android</div>
-
-Sets the number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `scrollEnabled` <div className="label ios">iOS</div>
-
-If `false`, scrolling of the text view will be disabled. The default value is `true`. Only works with `multiline={true}`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `secureTextEntry`
-
-If `true`, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is `false`. Does not work with `multiline={true}`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `selection`
-
-The start and end of the text input's selection. Set start and end to the same value to position the cursor.
-
-| Type                                  |
-| ------------------------------------- |
-| object: `{start: number,end: number}` |
-
----
-
-### `selectionColor`
-
-The highlight, selection handle and cursor color of the text input.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `selectionHandleColor` <div className="label android">Android</div>
-
-Sets the color of the selection handle. Unlike `selectionColor`, it allows the selection handle color to be customized independently of the selection's color.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `selectTextOnFocus`
-
-If `true`, all text will automatically be selected on focus.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `showSoftInputOnFocus`
-
-When `false`, it will prevent the soft keyboard from showing when the field is focused. The default value is `true`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `smartInsertDelete` <div className="label ios">iOS</div>
-
-If `false`, the iOS system will not insert an extra space after a paste operation neither delete one or two spaces after a cut or delete operation.
-
-| Type | Default |
-| ---- | ------- |
-| bool | `true`  |
-
----
-
-### `spellCheck` <div className="label ios">iOS</div>
-
-If `false`, disables spell-check style (i.e. red underlines). The default value is inherited from `autoCorrect`.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `submitBehavior`
-
-When the return key is pressed,
-
-For single line inputs:
-
-- `'newline'` defaults to `'blurAndSubmit'`
-- `undefined` defaults to `'blurAndSubmit'`
-
-For multiline inputs:
-
-- `'newline'` adds a newline
-- `undefined` defaults to `'newline'`
-
-For both single line and multiline inputs:
-
-- `'submit'` will only send a submit event and not blur the input
-- `'blurAndSubmit`' will both blur the input and send a submit event
-
-| Type                                       |
-| ------------------------------------------ |
-| enum('submit', 'blurAndSubmit', 'newline') |
-
----
-
-### `textAlign`
-
-Align the input text to the left, center, or right sides of the input field.
-
-Possible values for `textAlign` are:
-
-- `left`
-- `center`
-- `right`
-
-| Type                            |
-| ------------------------------- |
-| enum('left', 'center', 'right') |
-
----
-
-### `textContentType` <div className="label ios">iOS</div>
-
-Give the keyboard and the system information about the expected semantic meaning for the content that users enter.
-
-:::note
-[`autoComplete`](#autocomplete), provides the same functionality and is available for all platforms. You can use [`Platform.select`](/docs/next/platform#select) for differing platform behaviors.
-
-Avoid using both `textContentType` and `autoComplete`. For backwards compatibility, `textContentType` takes precedence when both properties are set.
-:::
-
-You can set `textContentType` to `username` or `password` to enable autofill of login details from the device keychain.
-
-`newPassword` can be used to indicate a new password input the user may want to save in the keychain, and `oneTimeCode` can be used to indicate that a field can be autofilled by a code arriving in an SMS.
-
-To disable autofill, set `textContentType` to `none`.
-
-Possible values for `textContentType` are:
-
-- `none`
-- `addressCity`
-- `addressCityAndState`
-- `addressState`
-- `birthdate` (iOS 17+)
-- `birthdateDay` (iOS 17+)
-- `birthdateMonth` (iOS 17+)
-- `birthdateYear` (iOS 17+)
-- `countryName`
-- `creditCardExpiration` (iOS 17+)
-- `creditCardExpirationMonth` (iOS 17+)
-- `creditCardExpirationYear` (iOS 17+)
-- `creditCardFamilyName` (iOS 17+)
-- `creditCardGivenName` (iOS 17+)
-- `creditCardMiddleName` (iOS 17+)
-- `creditCardName` (iOS 17+)
-- `creditCardNumber`
-- `creditCardSecurityCode` (iOS 17+)
-- `creditCardType` (iOS 17+)
-- `emailAddress`
-- `familyName`
-- `fullStreetAddress`
-- `givenName`
-- `jobTitle`
-- `location`
-- `middleName`
-- `name`
-- `namePrefix`
-- `nameSuffix`
-- `newPassword`
-- `nickname`
-- `oneTimeCode`
-- `organizationName`
-- `password`
-- `postalCode`
-- `streetAddressLine1`
-- `streetAddressLine2`
-- `sublocality`
-- `telephoneNumber`
-- `URL`
-- `username`
-
-| Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| enum('none', 'addressCity', 'addressCityAndState', 'addressState', 'birthdate', 'birthdateDay', 'birthdateMonth', 'birthdateYear', 'countryName', 'creditCardExpiration', 'creditCardExpirationMonth', 'creditCardExpirationYear', 'creditCardFamilyName', 'creditCardGivenName', 'creditCardMiddleName', 'creditCardName', 'creditCardNumber', 'creditCardSecurityCode', 'creditCardType', 'emailAddress', 'familyName', 'fullStreetAddress', 'givenName', 'jobTitle', 'location', 'middleName', 'name', 'namePrefix', 'nameSuffix', 'newPassword', 'nickname', 'oneTimeCode', 'organizationName', 'password', 'postalCode', 'streetAddressLine1', 'streetAddressLine2', 'sublocality', 'telephoneNumber', 'URL', 'username') |
-
----
-
-### `passwordRules` <div className="label ios">iOS</div>
-
-When using `textContentType` as `newPassword` on iOS we can let the OS know the minimum requirements of the password so that it can generate one that will satisfy them. In order to create a valid string for `PasswordRules` take a look to the [Apple Docs](https://developer.apple.com/password-rules/).
-
-:::tip
-If passwords generation dialog doesn't appear please make sure that:
-
-- AutoFill is enabled: **Settings** → **Passwords & Accounts** → toggle "On" the **AutoFill Passwords**,
-- iCloud Keychain is used: **Settings** → **Apple ID** → **iCloud** → **Keychain** → toggle "On" the **iCloud Keychain**.
-  :::
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `style`
-
-Note that not all Text styles are supported, an incomplete list of what is not supported includes:
-
-- `borderLeftWidth`
-- `borderTopWidth`
-- `borderRightWidth`
-- `borderBottomWidth`
-- `borderTopLeftRadius`
-- `borderTopRightRadius`
-- `borderBottomRightRadius`
-- `borderBottomLeftRadius`
-
-[Styles](style.md)
-
-| Type                  |
-| --------------------- |
-| [Text](text.md#style) |
-
----
-
-### `textBreakStrategy` <div className="label android">Android</div>
-
-Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced` The default value is `highQuality`.
-
-| Type                                      |
-| ----------------------------------------- |
-| enum('simple', 'highQuality', 'balanced') |
-
----
-
-### `underlineColorAndroid` <div className="label android">Android</div>
-
-The color of the `TextInput` underline.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `value`
-
-The value to show for the text input. `TextInput` is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker.
-
-| Type   |
-| ------ |
-| string |
-
-## Methods
-
-### `.focus()`
-
-```tsx
-focus();
-```
-
-Makes the native input request focus.
-
-### `.blur()`
-
-```tsx
-blur();
-```
-
-Makes the native input lose focus.
-
-### `clear()`
-
-```tsx
-clear();
-```
-
-Removes all text from the `TextInput`.
-
----
-
-### `isFocused()`
-
-```tsx
-isFocused(): boolean;
-```
-
-Returns `true` if the input is currently focused; `false` otherwise.
-
-# Known issues
-
-- [react-native#19096](https://github.com/facebook/react-native/issues/19096): Doesn't support Android's `onKeyPreIme`.
-- [react-native#19366](https://github.com/facebook/react-native/issues/19366): Calling .focus() after closing Android's keyboard via back button doesn't bring keyboard up again.
-- [react-native#26799](https://github.com/facebook/react-native/issues/26799): Doesn't support Android's `secureTextEntry` when `keyboardType="email-address"` or `keyboardType="phone-pad"`.
+---
+id: textinput
+title: TextInput
+---
+
+A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.
+
+The most basic use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. A minimal example:
+
+```SnackPlayer name=TextInput%20Example
+import {useState} from 'react';
+import {StyleSheet, TextInput} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const TextInputExample = () => {
+  const [text, onChangeText] = useState('Useless Text');
+  const [number, onChangeNumber] = useState('');
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView>
+        <TextInput
+          style={styles.input}
+          onChangeText={onChangeText}
+          value={text}
+        />
+        <TextInput
+          style={styles.input}
+          onChangeText={onChangeNumber}
+          value={number}
+          placeholder="useless placeholder"
+          keyboardType="numeric"
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  input: {
+    height: 40,
+    margin: 12,
+    borderWidth: 1,
+    padding: 10,
+  },
+});
+
+export default TextInputExample;
+```
+
+Two methods exposed via the native element are `.focus()` and `.blur()` that will focus or blur the TextInput programmatically.
+
+Note that some props are only available with `multiline={true/false}`. Additionally, border styles that apply to only one side of the element (e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if `multiline=true`. To achieve the same effect, you can wrap your `TextInput` in a `View`:
+
+```SnackPlayer name=Multiline%20TextInput%20Example
+import {useState} from 'react';
+import {TextInput, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const MultilineTextInputExample = () => {
+  const [value, onChangeText] = useState('Useless Multiline Placeholder');
+
+  // If you type something in the text box that is a color,
+  // the background will change to that color.
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView
+        style={{
+          flex: 1,
+          backgroundColor: value.toLowerCase(),
+        }}>
+        <TextInput
+          editable
+          multiline
+          numberOfLines={4}
+          maxLength={40}
+          onChangeText={text => onChangeText(text)}
+          value={value}
+          style={styles.textInput}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  textInput: {
+    padding: 10,
+    borderColor: '#000',
+    borderWidth: 1,
+    margin: 12,
+  },
+});
+
+export default MultilineTextInputExample;
+```
+
+`TextInput` has a border at the bottom of its view by default. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this are to either not set height explicitly, in which case the system will take care of displaying the border in the correct position, or to not display the border by setting `underlineColorAndroid` to transparent.
+
+Note that on Android performing text selection in an input can change the app's activity `windowSoftInputMode` param to `adjustResize`. This may cause issues with components that have position: 'absolute' while the keyboard is active. To avoid this behavior either specify `windowSoftInputMode` in AndroidManifest.xml ( https://developer.android.com/guide/topics/manifest/activity-element.html ) or control this param programmatically with native code.
+
+---
+
+# Reference
+
+## Props
+
+### [View Props](view.md#props)
+
+Inherits [View Props](view.md#props).
+
+---
+
+### `allowFontScaling`
+
+Specifies whether fonts should scale to respect Text Size accessibility settings. The default is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `autoCapitalize`
+
+Tells `TextInput` to automatically capitalize certain characters. This property is not supported by some keyboard types such as `name-phone-pad`.
+
+- `characters`: all characters.
+- `words`: first letter of each word.
+- `sentences`: first letter of each sentence (_default_).
+- `none`: don't auto capitalize anything.
+
+| Type                                             |
+| ------------------------------------------------ |
+| enum('none', 'sentences', 'words', 'characters') |
+
+---
+
+### `autoComplete`
+
+Specifies autocomplete hints for the system, so it can provide autofill. On Android, the system will always attempt to offer autofill by using heuristics to identify the type of content. To disable autocomplete, set `autoComplete` to `off`.
+
+The following values work across platforms:
+
+- `additional-name`
+- `address-line1`
+- `address-line2`
+- `birthdate-day` (iOS 17+)
+- `birthdate-full` (iOS 17+)
+- `birthdate-month` (iOS 17+)
+- `birthdate-year` (iOS 17+)
+- `cc-csc` (iOS 17+)
+- `cc-exp` (iOS 17+)
+- `cc-exp-day` (iOS 17+)
+- `cc-exp-month` (iOS 17+)
+- `cc-exp-year` (iOS 17+)
+- `cc-number`
+- `country`
+- `current-password`
+- `email`
+- `family-name`
+- `given-name`
+- `honorific-prefix`
+- `honorific-suffix`
+- `name`
+- `new-password`
+- `off`
+- `one-time-code`
+- `postal-code`
+- `street-address`
+- `tel`
+- `username`
+
+<div className="label basic ios">iOS</div>
+
+The following values work on iOS only:
+
+- `cc-family-name` (iOS 17+)
+- `cc-given-name` (iOS 17+)
+- `cc-middle-name` (iOS 17+)
+- `cc-name` (iOS 17+)
+- `cc-type` (iOS 17+)
+- `nickname`
+- `organization`
+- `organization-title`
+- `url`
+
+<div className="label basic android">Android</div>
+
+The following values work on Android only:
+
+- `gender`
+- `name-family`
+- `name-given`
+- `name-middle`
+- `name-middle-initial`
+- `name-prefix`
+- `name-suffix`
+- `password`
+- `password-new`
+- `postal-address`
+- `postal-address-country`
+- `postal-address-extended`
+- `postal-address-extended-postal-code`
+- `postal-address-locality`
+- `postal-address-region`
+- `sms-otp`
+- `tel-country-code`
+- `tel-device`
+- `tel-national`
+- `username-new`
+
+| Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| enum('additional-name', 'address-line1', 'address-line2', 'birthdate-day', 'birthdate-full', 'birthdate-month', 'birthdate-year', 'cc-csc', 'cc-exp', 'cc-exp-day', 'cc-exp-month', 'cc-exp-year', 'cc-number', 'country', 'current-password', 'email', 'family-name', 'given-name', 'honorific-prefix', 'honorific-suffix', 'name', 'new-password', 'off', 'one-time-code', 'postal-code', 'street-address', 'tel', 'username', 'cc-family-name', 'cc-given-name', 'cc-middle-name', 'cc-name', 'cc-type', 'nickname', 'organization', 'organization-title', 'url', 'gender', 'name-family', 'name-given', 'name-middle', 'name-middle-initial', 'name-prefix', 'name-suffix', 'password', 'password-new', 'postal-address', 'postal-address-country', 'postal-address-extended', 'postal-address-extended-postal-code', 'postal-address-locality', 'postal-address-region', 'sms-otp', 'tel-country-code', 'tel-device', 'tel-national', 'username-new') |
+
+---
+
+### `autoCorrect`
+
+If `false`, disables auto-correct. The default value is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `autoFocus`
+
+If `true`, focuses the input. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### 🗑️ `blurOnSubmit`
+
+:::warning Deprecated
+Note that `submitBehavior` now takes the place of `blurOnSubmit` and will override any behavior defined by `blurOnSubmit`. See [submitBehavior](textinput#submitbehavior).
+:::
+
+If `true`, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting `blurOnSubmit` to `true` means that pressing return will blur the field and trigger the `onSubmitEditing` event instead of inserting a newline into the field.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `caretHidden`
+
+If `true`, caret is hidden. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `clearButtonMode` <div className="label ios">iOS</div>
+
+When the clear button should appear on the right side of the text view. This property is supported only for single-line TextInput component. The default value is `never`.
+
+| Type                                                       |
+| ---------------------------------------------------------- |
+| enum('never', 'while-editing', 'unless-editing', 'always') |
+
+---
+
+### `clearTextOnFocus` <div className="label ios">iOS</div>
+
+If `true`, clears the text field automatically when editing begins.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `contextMenuHidden`
+
+If `true`, context menu is hidden. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `dataDetectorTypes` <div className="label ios">iOS</div>
+
+Determines the types of data converted to clickable URLs in the text input. Only valid if `multiline={true}` and `editable={false}`. By default no data types are detected.
+
+You can provide one type or an array of many types.
+
+Possible values for `dataDetectorTypes` are:
+
+- `'phoneNumber'`
+- `'link'`
+- `'address'`
+- `'calendarEvent'`
+- `'none'`
+- `'all'`
+
+| Type                                                                                                                                                     |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), ,array of enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all') |
+
+---
+
+### `defaultValue`
+
+Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `disableKeyboardShortcuts` <div className="label ios">iOS</div>
+
+If `true`, the keyboard shortcuts (undo/redo and copy buttons) are disabled.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `cursorColor` <div className="label android">Android</div>
+
+When provided it will set the color of the cursor (or "caret") in the component. Unlike the behavior of `selectionColor` the cursor color will be set independently from the color of the text selection box.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `disableFullscreenUI` <div className="label android">Android</div>
+
+When `false`, if there is a small amount of space available around a text input (e.g. landscape orientation on a phone), the OS may choose to have the user edit the text inside of a full screen text input mode. When `true`, this feature is disabled and users will always edit the text directly inside of the text input. Defaults to `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `editable`
+
+If `false`, text is not editable. The default value is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `enablesReturnKeyAutomatically` <div className="label ios">iOS</div>
+
+If `true`, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `enterKeyHint`
+
+Determines what text should be shown to the return key. Has precedence over the `returnKeyType` prop.
+
+The following values work across platforms:
+
+- `done`
+- `next`
+- `search`
+- `send`
+- `go`
+
+_Android Only_
+
+The following values work on Android only:
+
+- `previous`
+
+_iOS Only_
+
+The following values work on iOS only:
+
+- `enter`
+
+| Type                                                              |
+| ----------------------------------------------------------------- |
+| enum('enter', 'done', 'next', 'previous', 'search', 'send', 'go') |
+
+---
+
+### `importantForAutofill` <div className="label android">Android</div>
+
+Tells the operating system whether the individual fields in your app should be included in a view structure for autofill purposes on Android API Level 26+. Possible values are `auto`, `no`, `noExcludeDescendants`, `yes`, and `yesExcludeDescendants`. The default value is `auto`.
+
+- `auto`: Let the Android System use its heuristics to determine if the view is important for autofill.
+- `no`: This view isn't important for autofill.
+- `noExcludeDescendants`: This view and its children aren't important for autofill.
+- `yes`: This view is important for autofill.
+- `yesExcludeDescendants`: This view is important for autofill, but its children aren't important for autofill.
+
+| Type                                                                       |
+| -------------------------------------------------------------------------- |
+| enum('auto', 'no', 'noExcludeDescendants', 'yes', 'yesExcludeDescendants') |
+
+---
+
+### `inlineImageLeft` <div className="label android">Android</div>
+
+If defined, the provided image resource will be rendered on the left. The image resource must be inside `/android/app/src/main/res/drawable` and referenced like
+
+```
+<TextInput
+ inlineImageLeft='search_icon'
+/>
+```
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `inlineImagePadding` <div className="label android">Android</div>
+
+Padding between the inline image, if any, and the text input itself.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `inputAccessoryViewID` <div className="label ios">iOS</div>
+
+An optional identifier which links a custom [InputAccessoryView](inputaccessoryview.md) to this text input. The InputAccessoryView is rendered above the keyboard when this text input is focused.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `inputAccessoryViewButtonLabel` <div className="label ios">iOS</div>
+
+An optional label that overrides the default [InputAccessoryView](inputaccessoryview.md) button label.
+
+By default, the default button label is not localized. Use this property to provide a localized version.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `inputMode`
+
+Works like the `inputmode` attribute in HTML, it determines which keyboard to open, e.g. `numeric` and has precedence over `keyboardType`.
+
+Support the following values:
+
+- `none`
+- `text`
+- `decimal`
+- `numeric`
+- `tel`
+- `search`
+- `email`
+- `url`
+
+| Type                                                                        |
+| --------------------------------------------------------------------------- |
+| enum('decimal', 'email', 'none', 'numeric', 'search', 'tel', 'text', 'url') |
+
+---
+
+### `keyboardAppearance` <div className="label ios">iOS</div>
+
+Determines the color of the keyboard.
+
+| Type                             |
+| -------------------------------- |
+| enum('default', 'light', 'dark') |
+
+---
+
+### `keyboardType`
+
+Determines which keyboard to open, e.g.`numeric`.
+
+See screenshots of all the types [here](https://davidl.fr/blog/keyboard-react-native-ios-android#all-react-native-keyboard-type-examples-i-os-on-the-left-android-on-the-right).
+
+The following values work across platforms:
+
+- `default`
+- `number-pad`
+- `decimal-pad`
+- `numeric`
+- `email-address`
+- `phone-pad`
+- `url`
+
+_iOS Only_
+
+The following values work on iOS only:
+
+- `ascii-capable`
+- `numbers-and-punctuation`
+- `name-phone-pad`
+- `twitter`
+- `web-search`
+
+_Android Only_
+
+The following values work on Android only:
+
+- `visible-password`
+
+| Type                                                                                                                                                                                                    |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', 'visible-password') |
+
+---
+
+### `lineBreakStrategyIOS` <div className="label ios">iOS</div>
+
+Set line break strategy on iOS 14+. Possible values are `none`, `standard`, `hangul-word` and `push-out`.
+
+| Type                                                        | Default  |
+| ----------------------------------------------------------- | -------- |
+| enum(`'none'`, `'standard'`, `'hangul-word'`, `'push-out'`) | `'none'` |
+
+---
+
+### `lineBreakModeIOS` <div className="label ios">iOS</div>
+
+Set line break mode on iOS. Possible values are `wordWrapping`, `char`, `clip`, `head`, `middle` and `tail`.
+
+| Type                                                                       | Default          |
+| -------------------------------------------------------------------------- | ---------------- |
+| enum(`'wordWrapping'`, `'char'`, `'clip'`, `'head'`, `'middle'`, `'tail'`) | `'wordWrapping'` |
+
+---
+
+### `maxFontSizeMultiplier`
+
+Specifies largest possible scale a font can reach when `allowFontScaling` is enabled. Possible values:
+
+- `null/undefined` (default): inherit from the parent node or the global default (0)
+- `0`: no max, ignore parent/global default
+- `>= 1`: sets the `maxFontSizeMultiplier` of this node to this value
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `maxLength`
+
+Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `multiline`
+
+If `true`, the text input can be multiple lines. The default value is `false`.
+
+:::note
+It is important to note that this aligns the text to the top on iOS, and centers it on Android. Use with `textAlignVertical` set to `top` for the same behavior in both platforms.
+:::
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `numberOfLines`
+
+:::note
+`numberOfLines` on iOS is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Sets the maximum number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `onBlur`
+
+Callback that is called when the text input is blurred.
+
+:::note
+If you are attempting to access the `text` value from `nativeEvent` keep in mind that the resulting value you get can be `undefined` which can cause unintended errors. If you are trying to find the last value of TextInput, you can use the [`onEndEditing`](textinput#onendediting) event, which is fired upon completion of editing.
+:::
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
+
+---
+
+### `onChange`
+
+Callback that is called when the text input's text changes.
+
+| Type                                                  |
+| ----------------------------------------------------- |
+| (`{nativeEvent: {eventCount, target, text}}`) => void |
+
+---
+
+### `onChangeText`
+
+Callback that is called when the text input's text changes. Changed text is passed as a single string argument to the callback handler.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onContentSizeChange`
+
+Callback that is called when the text input's content size changes.
+
+Only called for multiline text inputs.
+
+| Type                                                       |
+| ---------------------------------------------------------- |
+| (`{nativeEvent: {contentSize: {width, height} }}`) => void |
+
+---
+
+### `onEndEditing`
+
+Callback that is called when text input ends.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onPressIn`
+
+Callback that is called when a touch is engaged.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onPressOut`
+
+Callback that is called when a touch is released.
+
+| Type                                                   |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onFocus`
+
+Callback that is called when the text input is focused.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
+
+---
+
+### `onKeyPress`
+
+Callback that is called when a key is pressed. This will be called with object where `keyValue` is `'Enter'` or `'Backspace'` for respective keys and the typed-in character otherwise including `' '` for space. Fires before `onChange` callbacks. Note: on Android only the inputs from soft keyboard are handled, not the hardware keyboard inputs.
+
+| Type                                        |
+| ------------------------------------------- |
+| (`{nativeEvent: {key: keyValue} }`) => void |
+
+---
+
+### `onLayout`
+
+Invoked on mount and on layout changes.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
+
+---
+
+### `onScroll`
+
+Invoked on content scroll. May also contain other properties from `ScrollEvent` but on Android `contentSize` is not provided for performance reasons.
+
+| Type                                                |
+| --------------------------------------------------- |
+| (`{nativeEvent: {contentOffset: {x, y} }}`) => void |
+
+---
+
+### `onSelectionChange`
+
+Callback that is called when the text input selection is changed.
+
+| Type                                                  |
+| ----------------------------------------------------- |
+| (`{nativeEvent: {selection: {start, end} }}`) => void |
+
+---
+
+### `onSubmitEditing`
+
+Callback that is called when the text input's submit button is pressed.
+
+| Type                                                  |
+| ----------------------------------------------------- |
+| (`{nativeEvent: {text, eventCount, target}}`) => void |
+
+Note that on iOS this method isn't called when using `keyboardType="phone-pad"`.
+
+---
+
+### `placeholder`
+
+The string that will be rendered before text input has been entered.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `placeholderTextColor`
+
+The text color of the placeholder string.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `readOnly`
+
+If `true`, text is not editable. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `returnKeyLabel` <div className="label android">Android</div>
+
+Sets the return key to the label. Use it instead of `returnKeyType`.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `returnKeyType`
+
+Determines how the return key should look. On Android you can also use `returnKeyLabel`.
+
+_Cross platform_
+
+The following values work across platforms:
+
+- `done`
+- `go`
+- `next`
+- `search`
+- `send`
+
+_Android Only_
+
+The following values work on Android only:
+
+- `none`
+- `previous`
+
+_iOS Only_
+
+The following values work on iOS only:
+
+- `default`
+- `emergency-call`
+- `google`
+- `join`
+- `route`
+- `yahoo`
+
+| Type                                                                                                                              |
+| --------------------------------------------------------------------------------------------------------------------------------- |
+| enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo') |
+
+### `rejectResponderTermination` <div className="label ios">iOS</div>
+
+If `true`, allows TextInput to pass touch events to the parent component. This allows components such as SwipeableListView to be swipeable from the TextInput on iOS, as is the case on Android by default. If `false`, TextInput always asks to handle the input (except when disabled). The default value is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `rows` <div className="label android">Android</div>
+
+Sets the number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `scrollEnabled` <div className="label ios">iOS</div>
+
+If `false`, scrolling of the text view will be disabled. The default value is `true`. Only works with `multiline={true}`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `secureTextEntry`
+
+If `true`, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is `false`. Does not work with `multiline={true}`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `selection`
+
+The start and end of the text input's selection. Set start and end to the same value to position the cursor.
+
+| Type                                  |
+| ------------------------------------- |
+| object: `{start: number,end: number}` |
+
+---
+
+### `selectionColor`
+
+The highlight, selection handle and cursor color of the text input.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `selectionHandleColor` <div className="label android">Android</div>
+
+Sets the color of the selection handle. Unlike `selectionColor`, it allows the selection handle color to be customized independently of the selection's color.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `selectTextOnFocus`
+
+If `true`, all text will automatically be selected on focus.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `showSoftInputOnFocus`
+
+When `false`, it will prevent the soft keyboard from showing when the field is focused. The default value is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `smartInsertDelete` <div className="label ios">iOS</div>
+
+If `false`, the iOS system will not insert an extra space after a paste operation neither delete one or two spaces after a cut or delete operation.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `true`  |
+
+---
+
+### `spellCheck` <div className="label ios">iOS</div>
+
+If `false`, disables spell-check style (i.e. red underlines). The default value is inherited from `autoCorrect`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `submitBehavior`
+
+When the return key is pressed,
+
+For single line inputs:
+
+- `'newline'` defaults to `'blurAndSubmit'`
+- `undefined` defaults to `'blurAndSubmit'`
+
+For multiline inputs:
+
+- `'newline'` adds a newline
+- `undefined` defaults to `'newline'`
+
+For both single line and multiline inputs:
+
+- `'submit'` will only send a submit event and not blur the input
+- `'blurAndSubmit`' will both blur the input and send a submit event
+
+| Type                                       |
+| ------------------------------------------ |
+| enum('submit', 'blurAndSubmit', 'newline') |
+
+---
+
+### `textAlign`
+
+Align the input text to the left, center, or right sides of the input field.
+
+Possible values for `textAlign` are:
+
+- `left`
+- `center`
+- `right`
+
+| Type                            |
+| ------------------------------- |
+| enum('left', 'center', 'right') |
+
+---
+
+### `textContentType` <div className="label ios">iOS</div>
+
+Give the keyboard and the system information about the expected semantic meaning for the content that users enter.
+
+:::note
+[`autoComplete`](#autocomplete), provides the same functionality and is available for all platforms. You can use [`Platform.select`](/docs/next/platform#select) for differing platform behaviors.
+
+Avoid using both `textContentType` and `autoComplete`. For backwards compatibility, `textContentType` takes precedence when both properties are set.
+:::
+
+You can set `textContentType` to `username` or `password` to enable autofill of login details from the device keychain.
+
+`newPassword` can be used to indicate a new password input the user may want to save in the keychain, and `oneTimeCode` can be used to indicate that a field can be autofilled by a code arriving in an SMS.
+
+To disable autofill, set `textContentType` to `none`.
+
+Possible values for `textContentType` are:
+
+- `none`
+- `addressCity`
+- `addressCityAndState`
+- `addressState`
+- `birthdate` (iOS 17+)
+- `birthdateDay` (iOS 17+)
+- `birthdateMonth` (iOS 17+)
+- `birthdateYear` (iOS 17+)
+- `countryName`
+- `creditCardExpiration` (iOS 17+)
+- `creditCardExpirationMonth` (iOS 17+)
+- `creditCardExpirationYear` (iOS 17+)
+- `creditCardFamilyName` (iOS 17+)
+- `creditCardGivenName` (iOS 17+)
+- `creditCardMiddleName` (iOS 17+)
+- `creditCardName` (iOS 17+)
+- `creditCardNumber`
+- `creditCardSecurityCode` (iOS 17+)
+- `creditCardType` (iOS 17+)
+- `emailAddress`
+- `familyName`
+- `fullStreetAddress`
+- `givenName`
+- `jobTitle`
+- `location`
+- `middleName`
+- `name`
+- `namePrefix`
+- `nameSuffix`
+- `newPassword`
+- `nickname`
+- `oneTimeCode`
+- `organizationName`
+- `password`
+- `postalCode`
+- `streetAddressLine1`
+- `streetAddressLine2`
+- `sublocality`
+- `telephoneNumber`
+- `URL`
+- `username`
+
+| Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| enum('none', 'addressCity', 'addressCityAndState', 'addressState', 'birthdate', 'birthdateDay', 'birthdateMonth', 'birthdateYear', 'countryName', 'creditCardExpiration', 'creditCardExpirationMonth', 'creditCardExpirationYear', 'creditCardFamilyName', 'creditCardGivenName', 'creditCardMiddleName', 'creditCardName', 'creditCardNumber', 'creditCardSecurityCode', 'creditCardType', 'emailAddress', 'familyName', 'fullStreetAddress', 'givenName', 'jobTitle', 'location', 'middleName', 'name', 'namePrefix', 'nameSuffix', 'newPassword', 'nickname', 'oneTimeCode', 'organizationName', 'password', 'postalCode', 'streetAddressLine1', 'streetAddressLine2', 'sublocality', 'telephoneNumber', 'URL', 'username') |
+
+---
+
+### `passwordRules` <div className="label ios">iOS</div>
+
+When using `textContentType` as `newPassword` on iOS we can let the OS know the minimum requirements of the password so that it can generate one that will satisfy them. In order to create a valid string for `PasswordRules` take a look to the [Apple Docs](https://developer.apple.com/password-rules/).
+
+:::tip
+If passwords generation dialog doesn't appear please make sure that:
+
+- AutoFill is enabled: **Settings** → **Passwords & Accounts** → toggle "On" the **AutoFill Passwords**,
+- iCloud Keychain is used: **Settings** → **Apple ID** → **iCloud** → **Keychain** → toggle "On" the **iCloud Keychain**.
+  :::
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `style`
+
+Note that not all Text styles are supported, an incomplete list of what is not supported includes:
+
+- `borderLeftWidth`
+- `borderTopWidth`
+- `borderRightWidth`
+- `borderBottomWidth`
+- `borderTopLeftRadius`
+- `borderTopRightRadius`
+- `borderBottomRightRadius`
+- `borderBottomLeftRadius`
+
+[Styles](style.md)
+
+| Type                  |
+| --------------------- |
+| [Text](text.md#style) |
+
+---
+
+### `textBreakStrategy` <div className="label android">Android</div>
+
+Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced` The default value is `highQuality`.
+
+| Type                                      |
+| ----------------------------------------- |
+| enum('simple', 'highQuality', 'balanced') |
+
+---
+
+### `underlineColorAndroid` <div className="label android">Android</div>
+
+The color of the `TextInput` underline.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `value`
+
+The value to show for the text input. `TextInput` is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker.
+
+| Type   |
+| ------ |
+| string |
+
+## Methods
+
+### `.focus()`
+
+```tsx
+focus();
+```
+
+Makes the native input request focus.
+
+### `.blur()`
+
+```tsx
+blur();
+```
+
+Makes the native input lose focus.
+
+### `clear()`
+
+```tsx
+clear();
+```
+
+Removes all text from the `TextInput`.
+
+---
+
+### `isFocused()`
+
+```tsx
+isFocused(): boolean;
+```
+
+Returns `true` if the input is currently focused; `false` otherwise.
+
+# Known issues
+
+- [react-native#19096](https://github.com/facebook/react-native/issues/19096): Doesn't support Android's `onKeyPreIme`.
+- [react-native#19366](https://github.com/facebook/react-native/issues/19366): Calling .focus() after closing Android's keyboard via back button doesn't bring keyboard up again.
+- [react-native#26799](https://github.com/facebook/react-native/issues/26799): Doesn't support Android's `secureTextEntry` when `keyboardType="email-address"` or `keyboardType="phone-pad"`.
diff --git a/website/versioned_docs/version-0.86/the-new-architecture/custom-cxx-types.md b/website/versioned_docs/version-0.86/the-new-architecture/custom-cxx-types.md
index 94db3e21b3f..edc490b8070 100644
--- a/website/versioned_docs/version-0.86/the-new-architecture/custom-cxx-types.md
+++ b/website/versioned_docs/version-0.86/the-new-architecture/custom-cxx-types.md
@@ -173,8 +173,8 @@ First, we need to update the `App.tsx` file to use the new method from the Turbo
 
 ```diff title="App.tsx"
 // ...
-+ const [cubicSource, setCubicSource] = React.useState('')
-+ const [cubicRoot, setCubicRoot] = React.useState(0)
++ const [cubicSource, setCubicSource] = useState('')
++ const [cubicRoot, setCubicRoot] = useState(0)
   return (
     <SafeAreaView style={styles.container}>
       <View>
@@ -366,9 +366,9 @@ To test the code in the app, we have to modify the `App.tsx` file.
 2. Replace the body of the `App()` function with the following code:
 
 ```tsx title="App.tsx (App function body replacement)"
-const [street, setStreet] = React.useState('');
-const [num, setNum] = React.useState('');
-const [isValidAddress, setIsValidAddress] = React.useState<
+const [street, setStreet] = useState('');
+const [num, setNum] = useState('');
+const [isValidAddress, setIsValidAddress] = useState<
   boolean | null
 >(null);
 
diff --git a/website/versioned_docs/version-0.86/the-new-architecture/direct-manipulation.md b/website/versioned_docs/version-0.86/the-new-architecture/direct-manipulation.md
index 6708a643cba..6035b6a64b7 100644
--- a/website/versioned_docs/version-0.86/the-new-architecture/direct-manipulation.md
+++ b/website/versioned_docs/version-0.86/the-new-architecture/direct-manipulation.md
@@ -26,7 +26,6 @@ For example, the following code demonstrates editing the input when you tap a bu
 <TabItem value="javascript">
 
 ```SnackPlayer name=setNativeProps%20on%20TextInput&ext=js
-import React from 'react';
 import {useCallback, useRef} from 'react';
 import {
   StyleSheet,
@@ -74,7 +73,6 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Clear%20text&ext=tsx
-import React from 'react';
 import {useCallback, useRef} from 'react';
 import {
   StyleSheet,
diff --git a/website/versioned_docs/version-0.86/the-new-architecture/fabric-component-native-commands.md b/website/versioned_docs/version-0.86/the-new-architecture/fabric-component-native-commands.md
index ca87360ba3a..5cb5dbd6710 100644
--- a/website/versioned_docs/version-0.86/the-new-architecture/fabric-component-native-commands.md
+++ b/website/versioned_docs/version-0.86/the-new-architecture/fabric-component-native-commands.md
@@ -107,7 +107,6 @@ Now you can use the command in the the app.
 Open the `App.tsx` file and modify it as it follows:
 
 ```diff title="App.tsx"
-import React from 'react';
 -import {Alert, StyleSheet, View} from 'react-native';
 -import WebView from '../specs/WebViewNativeComponent';
 +import {Alert, StyleSheet, Pressable, Text, View} from 'react-native';
@@ -186,7 +185,6 @@ export default App;
 Open the `App.tsx` file and modify it as it follows:
 
 ```diff title="App.jsx"
-import React from 'react';
 -import {Alert, StyleSheet, View} from 'react-native';
 -import WebView from '../specs/WebViewNativeComponent';
 +import {Alert, StyleSheet, Pressable, Text, View} from 'react-native';
diff --git a/website/versioned_docs/version-0.86/the-new-architecture/layout-measurements.md b/website/versioned_docs/version-0.86/the-new-architecture/layout-measurements.md
index cc693a99b0c..715cd42aee7 100644
--- a/website/versioned_docs/version-0.86/the-new-architecture/layout-measurements.md
+++ b/website/versioned_docs/version-0.86/the-new-architecture/layout-measurements.md
@@ -10,7 +10,7 @@ Typical code will look like this:
 
 ```tsx
 function AComponent(children) {
-  const targetRef = React.useRef(null)
+  const targetRef = useRef(null)
 
   useLayoutEffect(() => {
     targetRef.current?.measure((x, y, width, height, pageX, pageY) => {
diff --git a/website/versioned_docs/version-0.86/the-new-architecture/native-modules-custom-events.md b/website/versioned_docs/version-0.86/the-new-architecture/native-modules-custom-events.md
index 0af5bb95957..c44bbf93c16 100644
--- a/website/versioned_docs/version-0.86/the-new-architecture/native-modules-custom-events.md
+++ b/website/versioned_docs/version-0.86/the-new-architecture/native-modules-custom-events.md
@@ -134,7 +134,6 @@ Now, it's time to update the code of the App to handle the new event.
 Open the `App.tsx` file and modify it as it follows:
 
 ```diff title="App.tsx"
-import React from 'react';
 import {
 + Alert,
 + EventSubscription,
diff --git a/website/versioned_docs/version-0.86/the-new-architecture/pure-cxx-modules.md b/website/versioned_docs/version-0.86/the-new-architecture/pure-cxx-modules.md
index b7c08196290..72d03933695 100644
--- a/website/versioned_docs/version-0.86/the-new-architecture/pure-cxx-modules.md
+++ b/website/versioned_docs/version-0.86/the-new-architecture/pure-cxx-modules.md
@@ -1,503 +1,503 @@
-import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameForCurrentVersion';
-import {getCurrentVersion} from '@site/src/getCurrentVersion';
-import CodeBlock from '@theme/CodeBlock';
-
-# Cross-Platform Native Modules (C++)
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-Writing a module in C++ is the best way to share platform-agnostic code between Android and iOS. With pure C++ modules, you can write your logic only once and reuse it right away from all the platforms, without the need of writing platform-specific code.
-
-In this guide, we will go through the creation of a pure C++ Turbo Native Module:
-
-1. Create the JS specs
-2. Configure Codegen to generate the scaffolding
-3. Implement the Native logic
-4. Register the module in the Android and iOS application
-5. Test your changes in JS
-
-The rest of this guide assumes that you have created your application running the command:
-
-<CodeBlock language="bash" title="shell">
-{`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`}
-</CodeBlock>
-
-## 1. Create the JS specs
-
-Pure C++ Turbo Native Modules are Turbo Native Modules. They need a specification file (also called spec file) so that Codegen can create the scaffolding code for us. The specification file is also what we use to access the Turbo Native Module in JS.
-
-Spec files need to be written in a typed JS dialect. React Native currently supports Flow or TypeScript.
-
-1. Inside the root folder of your app, create a new folder called `specs`.
-2. Create a new file called `NativeSampleModule.ts` with the following code:
-
-:::warning
-All Native Turbo Module spec files must have the prefix `Native`, otherwise Codegen will ignore them.
-:::
-
-<Tabs groupId="tnm-specs" queryString defaultValue={constants.defaultJavaScriptSpecLanguages} values={constants.javaScriptSpecLanguages}>
-<TabItem value="flow">
-
-```ts title="specs/NativeSampleModule.ts"
-// @flow
-import type {TurboModule} from 'react-native'
-import { TurboModuleRegistry } from "react-native";
-
-export interface Spec extends TurboModule {
-  +reverseString: (input: string) => string;
-}
-
-export default (TurboModuleRegistry.getEnforcing<Spec>(
-  "NativeSampleModule"
-): Spec);
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```ts title="specs/NativeSampleModule.ts"
-import {TurboModule, TurboModuleRegistry} from 'react-native';
-
-export interface Spec extends TurboModule {
-  readonly reverseString: (input: string) => string;
-}
-
-export default TurboModuleRegistry.getEnforcing<Spec>(
-  'NativeSampleModule',
-);
-```
-
-</TabItem>
-</Tabs>
-
-## 2. Configure Codegen
-
-The next step is to configure [Codegen](what-is-codegen.mdx) in your `package.json`. Update the file to include:
-
-```json title="package.json"
-     "start": "react-native start",
-     "test": "jest"
-   },
-   // highlight-add-start
-   "codegenConfig": {
-     "name": "AppSpecs",
-     "type": "modules",
-     "jsSrcsDir": "specs",
-     "android": {
-       "javaPackageName": "com.sampleapp.specs"
-     }
-   },
-   // highlight-add-end
-   "dependencies": {
-```
-
-This configuration tells Codegen to look for spec files in the `specs` folder. It also instructs Codegen to only generate code for `modules` and to namespace the generated code as `AppSpecs`.
-
-## 3. Write the Native Code
-
-Writing a C++ Turbo Native Module allows you to share the code between Android and iOS. Therefore we will be writing the code once, and we will look into what changes we need to apply to the platforms so that the C++ code can be picked up.
-
-1. Create a folder named `shared` at the same level as the `android` and `ios` folders.
-2. Inside the `shared` folder, create a new file called `NativeSampleModule.h`.
-
-   ```cpp title="shared/NativeSampleModule.h"
-   #pragma once
-
-   #include <AppSpecsJSI.h>
-
-   #include <memory>
-   #include <string>
-
-   namespace facebook::react {
-
-   class NativeSampleModule : public NativeSampleModuleCxxSpec<NativeSampleModule> {
-   public:
-     NativeSampleModule(std::shared_ptr<CallInvoker> jsInvoker);
-
-     std::string reverseString(jsi::Runtime& rt, std::string input);
-   };
-
-   } // namespace facebook::react
-
-   ```
-
-3. Inside the `shared` folder, create a new file called `NativeSampleModule.cpp`.
-
-   ```cpp title="shared/NativeSampleModule.cpp"
-   #include "NativeSampleModule.h"
-
-   namespace facebook::react {
-
-   NativeSampleModule::NativeSampleModule(std::shared_ptr<CallInvoker> jsInvoker)
-       : NativeSampleModuleCxxSpec(std::move(jsInvoker)) {}
-
-   std::string NativeSampleModule::reverseString(jsi::Runtime& rt, std::string input) {
-     return std::string(input.rbegin(), input.rend());
-   }
-
-   } // namespace facebook::react
-   ```
-
-Let's have a look at the two files we created:
-
-- The `NativeSampleModule.h` file is the header file for a Pure C++ TurboModule. The `include` statements make sure that we include the specs that will be created by Codegen and that contains the interface and the base class we need to implement.
-- The module lives in the `facebook::react` namespace to have access to all the types that live in that namespace.
-- The class `NativeSampleModule` is the actual Turbo Native Module class and it extends the `NativeSampleModuleCxxSpec` class which contains some glue code and boilerplate code to let this class behave as a Turbo Native Module.
-- Finally, we have the constructor, that accepts a pointer to the `CallInvoker`, to communicate with JS if needed and the function's prototype we have to implement.
-
-The `NativeSampleModule.cpp` file is the actual implementation of our Turbo Native Module and implements the constructor and the method that we declared in the specs.
-
-## 4. Register the Module in the platform
-
-The next steps will let us register the module in the platform. This is the step that exposes the native code to JS so that the React Native application can finally call the native methods from the JS layer.
-
-This is the only time when we will have to write some platform-specific code.
-
-### Android
-
-To make sure that the Android app can effectively build the C++ Turbo Native Module, we need to:
-
-1. Create a `CMakeLists.txt` to access our C++ code.
-2. Modify `build.gradle` to point to the newly created `CMakeLists.txt` file.
-3. Create an `OnLoad.cpp` file in our Android app to register the new Turbo Native Module.
-
-#### 1. Create the `CMakeLists.txt` file
-
-Android uses CMake to build. CMake needs to access the files we defined in our shared folder to be able to build them.
-
-1. Create a new folder `SampleApp/android/app/src/main/jni`. The `jni` folder is where the C++ side of Android lives.
-2. Create a `CMakeLists.txt` file and add this context:
-
-```shell title="CMakeLists.txt"
-cmake_minimum_required(VERSION 3.13)
-
-# Define the library name here.
-project(appmodules)
-
-# This file includes all the necessary to let you build your React Native application
-include(${REACT_ANDROID_DIR}/cmake-utils/ReactNative-application.cmake)
-
-# Define where the additional source code lives. We need to crawl back the jni, main, src, app, android folders
-target_sources(${CMAKE_PROJECT_NAME} PRIVATE ../../../../../shared/NativeSampleModule.cpp)
-
-# Define where CMake can find the additional header files. We need to crawl back the jni, main, src, app, android folders
-target_include_directories(${CMAKE_PROJECT_NAME} PUBLIC ../../../../../shared)
-```
-
-The CMake file does the following things:
-
-- Defines the `appmodules` library, where all the app C++ code will be included.
-- Loads the base React Native's CMake file.
-- Adds the Module C++ source code that we need to build with the `target_sources` directives. By default React Native will already populate the `appmodules` library with default sources, here we include our custom one. You can see that we need to crawl back from the `jni` folder to the `shared` folder where our C++ Turbo Module lives.
-- Specifies where CMake can find the module header files. Also in this case we need to crawl back from the `jni` folder.
-
-#### 2. Modify `build.gradle` to include the custom C++ code
-
-Gradle is the tool that orchestrates the Android build. We need to tell it where it can find the `CMake` files to build the Turbo Native Module.
-
-1. Open the `SampleApp/android/app/build.gradle` file.
-2. Add the following block into the Gradle file, within the existing `android` block:
-
-```diff title="android/app/build.gradle"
-    buildTypes {
-        debug {
-            signingConfig signingConfigs.debug
-        }
-        release {
-            // Caution! In production, you need to generate your own keystore file.
-            // see https://reactnative.dev/docs/signed-apk-android.
-            signingConfig signingConfigs.debug
-            minifyEnabled enableProguardInReleaseBuilds
-            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
-        }
-    }
-
-+   externalNativeBuild {
-+       cmake {
-+           path "src/main/jni/CMakeLists.txt"
-+       }
-+   }
-}
-```
-
-This block tells the Gradle file where to look for the CMake file. The path is relative to the folder where the `build.gradle` file lives, so we need to add the path to the `CMakeLists.txt` files in the `jni` folder.
-
-#### 3. Register the new Turbo Native Module
-
-The final step is to register the new C++ Turbo Native Module in the runtime, so that when JS requires the C++ Turbo Native Module, the app knows where to find it and can return it.
-
-1. From the folder `SampleApp/android/app/src/main/jni`, run the following command:
-
-<CodeBlock language="sh" title="shell">
-{`curl -O https://raw.githubusercontent.com/facebook/react-native/${getCoreBranchNameForCurrentVersion()}/packages/react-native/ReactAndroid/cmake-utils/default-app-setup/OnLoad.cpp`}
-</CodeBlock>
-
-2. Then, modify this file as follows:
-
-```diff title="android/app/src/main/jni/OnLoad.cpp"
-#include <DefaultComponentsRegistry.h>
-#include <DefaultTurboModuleManagerDelegate.h>
-#include <autolinking.h>
-#include <fbjni/fbjni.h>
-#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
-#include <rncore.h>
-
-+ // Include the NativeSampleModule header
-+ #include <NativeSampleModule.h>
-
-//...
-
-std::shared_ptr<TurboModule> cxxModuleProvider(
-    const std::string& name,
-    const std::shared_ptr<CallInvoker>& jsInvoker) {
-  // Here you can provide your CXX Turbo Modules coming from
-  // either your application or from external libraries. The approach to follow
-  // is similar to the following (for a module called `NativeCxxModuleExample`):
-  //
-  // if (name == NativeCxxModuleExample::kModuleName) {
-  //   return std::make_shared<NativeCxxModuleExample>(jsInvoker);
-  // }
-
-+  // This code registers the module so that when the JS side asks for it, the app can return it
-+  if (name == NativeSampleModule::kModuleName) {
-+    return std::make_shared<NativeSampleModule>(jsInvoker);
-+  }
-
-  // And we fallback to the CXX module providers autolinked
-  return autolinking_cxxModuleProvider(name, jsInvoker);
-}
-
-// leave the rest of the file
-```
-
-These steps download the original `OnLoad.cpp` file from React Native, so that we can safely override it to load the C++ Turbo Native Module in the app.
-
-Once we downloaded the file, we can modify it by:
-
-- Including the header file that points to our module
-- Registering the Turbo Native Module so that when JS requires it, the app can return it.
-
-Now, you can run `yarn android` from the project root to see your app building successfully.
-
-### iOS
-
-To make sure that the iOS app can effectively build the C++ Turbo Native Module, we need to:
-
-1. Install pods and run Codegen.
-2. Add the `shared` folder to our iOS project.
-3. Register the C++ Turbo Native Module in the application.
-
-#### 1. Install Pods and Run Codegen.
-
-The first step we need to run is the usual steps we run every time we have to prepare our iOS application. CocoaPods is the tool we use to setup and install React Native dependencies and, as part of the process, it will also run Codegen for us.
-
-```bash
-cd ios
-bundle install
-bundle exec pod install
-```
-
-#### 2. Add the shared folder to the iOS project
-
-This step adds the `shared` folder to the project to make it visible to Xcode.
-
-1. Open the CocoaPods generated Xcode Workspace.
-
-```bash
-cd ios
-open SampleApp.xcworkspace
-```
-
-2. Click on the `SampleApp` project on the left and select `Add files to "Sample App"...`.
-
-![Add Files to Sample App...](/docs/assets/AddFilesToXcode1.png)
-
-3. Select the `shared` folder and click on `Add`.
-
-![Add Files to Sample App...](/docs/assets/AddFilesToXcode2.png)
-
-If you did everything right, your project on the left should look like this:
-
-![Xcode Project](/docs/assets/CxxTMGuideXcodeProject.png)
-
-#### 3. Registering the Cxx Turbo Native Module in your app
-
-To register a pure Cxx Turbo Native Module in your app, you need to:
-
-1. Create a `ModuleProvider` for the Native Module
-2. Configure the `package.json` to associate the JS module name with the ModuleProvider class.
-
-The ModuleProvider is an Objective-C++ that glues together the Pure C++ module with the rest of your iOS App.
-
-##### 3.1 Create the ModuleProvider
-
-1. From Xcode, select the `SampleApp` project and press <kbd>⌘</kbd> + <kbd>N</kbd> to create a new file.
-2. Select the `Cocoa Touch Class` template
-3. Add the name `NativeSampleModuleProvider` (keep the other field as `Subclass of: NSObject` and `Language: Objective-C`)
-4. Click Next to generate the files.
-5. Rename the `NativeSampleModuleProvider.m` to `NativeSampleModuleProvider.mm`. The `mm` extension denotes an Objective-C++ file.
-6. Implement the content of the `NativeSampleModuleProvider.h` with the following:
-
-```objc title="NativeSampleModuleProvider.h"
-
-#import <Foundation/Foundation.h>
-#import <ReactCommon/RCTTurboModule.h>
-
-NS_ASSUME_NONNULL_BEGIN
-
-@interface NativeSampleModuleProvider : NSObject <RCTModuleProvider>
-
-@end
-
-NS_ASSUME_NONNULL_END
-```
-
-This declares a `NativeSampleModuleProvider` object that conforms to the `RCTModuleProvider` protocol.
-
-7. Implement the content of the `NativeSampleModuleProvider.mm` with the following:
-
-```objc title="NativeSampleModuleProvider.mm"
-
-#import "NativeSampleModuleProvider.h"
-#import <ReactCommon/CallInvoker.h>
-#import <ReactCommon/TurboModule.h>
-#import "NativeSampleModule.h"
-
-@implementation NativeSampleModuleProvider
-
-- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
-    (const facebook::react::ObjCTurboModule::InitParams &)params
-{
-  return std::make_shared<facebook::react::NativeSampleModule>(params.jsInvoker);
-}
-
-@end
-```
-
-This code implements the `RCTModuleProvider` protocol by creating the pure C++ `NativeSampleModule` when the `getTurboModule:` method is called.
-
-##### 3.2 Update the package.json
-
-The last step consists in updating the `package.json` to tell React Native about the link between the JS specs of the Native Module and the concrete implementation of those spec in native code.
-
-Modify the `package.json` as it follows:
-
-```json title="package.json"
-     "start": "react-native start",
-     "test": "jest"
-   },
-   "codegenConfig": {
-     "name": "AppSpecs",
-     "type": "modules",
-     "jsSrcsDir": "specs",
-     "android": {
-       "javaPackageName": "com.sampleapp.specs"
-     // highlight-add-start
-     },
-     "ios": {
-        "modulesProvider": {
-          "NativeSampleModule":  "NativeSampleModuleProvider"
-        }
-     }
-     // highlight-add-end
-   },
-
-   "dependencies": {
-```
-
-At this point, you need to re-install the pods to make sure that codegen runs again to generate the new files:
-
-```bash
-# from the ios folder
-bundle exec pod install
-open SampleApp.xcworkspace
-```
-
-If you now build your application from Xcode, you should be able to build successfully.
-
-## 5. Testing your Code
-
-It's now time to access our C++ Turbo Native Module from JS. To do so, we have to modify the `App.tsx` file to import the Turbo Native Module and to call it in our code.
-
-1. Open the `App.tsx` file.
-2. Replace the content of the template with the following code:
-
-```tsx title="App.tsx"
-import React from 'react';
-import {
-  Button,
-  SafeAreaView,
-  StyleSheet,
-  Text,
-  TextInput,
-  View,
-} from 'react-native';
-import SampleTurboModule from './specs/NativeSampleModule';
-
-function App(): React.JSX.Element {
-  const [value, setValue] = React.useState('');
-  const [reversedValue, setReversedValue] = React.useState('');
-
-  const onPress = () => {
-    const revString = SampleTurboModule.reverseString(value);
-    setReversedValue(revString);
-  };
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <View>
-        <Text style={styles.title}>
-          Welcome to C++ Turbo Native Module Example
-        </Text>
-        <Text>Write down here the text you want to reverse</Text>
-        <TextInput
-          style={styles.textInput}
-          placeholder="Write your text here"
-          onChangeText={setValue}
-          value={value}
-        />
-        <Button title="Reverse" onPress={onPress} />
-        <Text>Reversed text: {reversedValue}</Text>
-      </View>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  title: {
-    fontSize: 18,
-    marginBottom: 20,
-  },
-  textInput: {
-    borderColor: 'black',
-    borderWidth: 1,
-    borderRadius: 5,
-    padding: 10,
-    marginTop: 10,
-  },
-});
-
-export default App;
-```
-
-The interesting lines in this app are:
-
-- `import SampleTurboModule from './specs/NativeSampleModule';`: this line imports the Turbo Native Module in the app,
-- `const revString = SampleTurboModule.reverseString(value);` in the `onPress` callback: this is how you can use the Turbo Native Module in your app.
-
-:::warning
-For the sake of this example and to keep it as short as possible, we directly imported the spec file in our app.
-The best practice in this case is to create a separate file to wrap the specs and use that file into your application.
-This allows you to prepare the input for the specs and gives you more control over them in JS.
-:::
-
-Congratulations, you wrote your first C++ Turbo Native Module!
-
-| <center>Android</center>                                                                             | <center>iOS</center>                                                                          |
-| ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
-| <center><img src="/docs/assets/CxxGuideAndroidVideo.gif" alt="Android Video" height="600"/></center> | <center><img src="/docs/assets/CxxGuideIOSVideo.gif" alt="iOS video" height="600" /></center> |
+import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameForCurrentVersion';
+import {getCurrentVersion} from '@site/src/getCurrentVersion';
+import CodeBlock from '@theme/CodeBlock';
+
+# Cross-Platform Native Modules (C++)
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+Writing a module in C++ is the best way to share platform-agnostic code between Android and iOS. With pure C++ modules, you can write your logic only once and reuse it right away from all the platforms, without the need of writing platform-specific code.
+
+In this guide, we will go through the creation of a pure C++ Turbo Native Module:
+
+1. Create the JS specs
+2. Configure Codegen to generate the scaffolding
+3. Implement the Native logic
+4. Register the module in the Android and iOS application
+5. Test your changes in JS
+
+The rest of this guide assumes that you have created your application running the command:
+
+<CodeBlock language="bash" title="shell">
+{`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`}
+</CodeBlock>
+
+## 1. Create the JS specs
+
+Pure C++ Turbo Native Modules are Turbo Native Modules. They need a specification file (also called spec file) so that Codegen can create the scaffolding code for us. The specification file is also what we use to access the Turbo Native Module in JS.
+
+Spec files need to be written in a typed JS dialect. React Native currently supports Flow or TypeScript.
+
+1. Inside the root folder of your app, create a new folder called `specs`.
+2. Create a new file called `NativeSampleModule.ts` with the following code:
+
+:::warning
+All Native Turbo Module spec files must have the prefix `Native`, otherwise Codegen will ignore them.
+:::
+
+<Tabs groupId="tnm-specs" queryString defaultValue={constants.defaultJavaScriptSpecLanguages} values={constants.javaScriptSpecLanguages}>
+<TabItem value="flow">
+
+```ts title="specs/NativeSampleModule.ts"
+// @flow
+import type {TurboModule} from 'react-native'
+import { TurboModuleRegistry } from "react-native";
+
+export interface Spec extends TurboModule {
+  +reverseString: (input: string) => string;
+}
+
+export default (TurboModuleRegistry.getEnforcing<Spec>(
+  "NativeSampleModule"
+): Spec);
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```ts title="specs/NativeSampleModule.ts"
+import {TurboModule, TurboModuleRegistry} from 'react-native';
+
+export interface Spec extends TurboModule {
+  readonly reverseString: (input: string) => string;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>(
+  'NativeSampleModule',
+);
+```
+
+</TabItem>
+</Tabs>
+
+## 2. Configure Codegen
+
+The next step is to configure [Codegen](what-is-codegen.mdx) in your `package.json`. Update the file to include:
+
+```json title="package.json"
+     "start": "react-native start",
+     "test": "jest"
+   },
+   // highlight-add-start
+   "codegenConfig": {
+     "name": "AppSpecs",
+     "type": "modules",
+     "jsSrcsDir": "specs",
+     "android": {
+       "javaPackageName": "com.sampleapp.specs"
+     }
+   },
+   // highlight-add-end
+   "dependencies": {
+```
+
+This configuration tells Codegen to look for spec files in the `specs` folder. It also instructs Codegen to only generate code for `modules` and to namespace the generated code as `AppSpecs`.
+
+## 3. Write the Native Code
+
+Writing a C++ Turbo Native Module allows you to share the code between Android and iOS. Therefore we will be writing the code once, and we will look into what changes we need to apply to the platforms so that the C++ code can be picked up.
+
+1. Create a folder named `shared` at the same level as the `android` and `ios` folders.
+2. Inside the `shared` folder, create a new file called `NativeSampleModule.h`.
+
+   ```cpp title="shared/NativeSampleModule.h"
+   #pragma once
+
+   #include <AppSpecsJSI.h>
+
+   #include <memory>
+   #include <string>
+
+   namespace facebook::react {
+
+   class NativeSampleModule : public NativeSampleModuleCxxSpec<NativeSampleModule> {
+   public:
+     NativeSampleModule(std::shared_ptr<CallInvoker> jsInvoker);
+
+     std::string reverseString(jsi::Runtime& rt, std::string input);
+   };
+
+   } // namespace facebook::react
+
+   ```
+
+3. Inside the `shared` folder, create a new file called `NativeSampleModule.cpp`.
+
+   ```cpp title="shared/NativeSampleModule.cpp"
+   #include "NativeSampleModule.h"
+
+   namespace facebook::react {
+
+   NativeSampleModule::NativeSampleModule(std::shared_ptr<CallInvoker> jsInvoker)
+       : NativeSampleModuleCxxSpec(std::move(jsInvoker)) {}
+
+   std::string NativeSampleModule::reverseString(jsi::Runtime& rt, std::string input) {
+     return std::string(input.rbegin(), input.rend());
+   }
+
+   } // namespace facebook::react
+   ```
+
+Let's have a look at the two files we created:
+
+- The `NativeSampleModule.h` file is the header file for a Pure C++ TurboModule. The `include` statements make sure that we include the specs that will be created by Codegen and that contains the interface and the base class we need to implement.
+- The module lives in the `facebook::react` namespace to have access to all the types that live in that namespace.
+- The class `NativeSampleModule` is the actual Turbo Native Module class and it extends the `NativeSampleModuleCxxSpec` class which contains some glue code and boilerplate code to let this class behave as a Turbo Native Module.
+- Finally, we have the constructor, that accepts a pointer to the `CallInvoker`, to communicate with JS if needed and the function's prototype we have to implement.
+
+The `NativeSampleModule.cpp` file is the actual implementation of our Turbo Native Module and implements the constructor and the method that we declared in the specs.
+
+## 4. Register the Module in the platform
+
+The next steps will let us register the module in the platform. This is the step that exposes the native code to JS so that the React Native application can finally call the native methods from the JS layer.
+
+This is the only time when we will have to write some platform-specific code.
+
+### Android
+
+To make sure that the Android app can effectively build the C++ Turbo Native Module, we need to:
+
+1. Create a `CMakeLists.txt` to access our C++ code.
+2. Modify `build.gradle` to point to the newly created `CMakeLists.txt` file.
+3. Create an `OnLoad.cpp` file in our Android app to register the new Turbo Native Module.
+
+#### 1. Create the `CMakeLists.txt` file
+
+Android uses CMake to build. CMake needs to access the files we defined in our shared folder to be able to build them.
+
+1. Create a new folder `SampleApp/android/app/src/main/jni`. The `jni` folder is where the C++ side of Android lives.
+2. Create a `CMakeLists.txt` file and add this context:
+
+```shell title="CMakeLists.txt"
+cmake_minimum_required(VERSION 3.13)
+
+# Define the library name here.
+project(appmodules)
+
+# This file includes all the necessary to let you build your React Native application
+include(${REACT_ANDROID_DIR}/cmake-utils/ReactNative-application.cmake)
+
+# Define where the additional source code lives. We need to crawl back the jni, main, src, app, android folders
+target_sources(${CMAKE_PROJECT_NAME} PRIVATE ../../../../../shared/NativeSampleModule.cpp)
+
+# Define where CMake can find the additional header files. We need to crawl back the jni, main, src, app, android folders
+target_include_directories(${CMAKE_PROJECT_NAME} PUBLIC ../../../../../shared)
+```
+
+The CMake file does the following things:
+
+- Defines the `appmodules` library, where all the app C++ code will be included.
+- Loads the base React Native's CMake file.
+- Adds the Module C++ source code that we need to build with the `target_sources` directives. By default React Native will already populate the `appmodules` library with default sources, here we include our custom one. You can see that we need to crawl back from the `jni` folder to the `shared` folder where our C++ Turbo Module lives.
+- Specifies where CMake can find the module header files. Also in this case we need to crawl back from the `jni` folder.
+
+#### 2. Modify `build.gradle` to include the custom C++ code
+
+Gradle is the tool that orchestrates the Android build. We need to tell it where it can find the `CMake` files to build the Turbo Native Module.
+
+1. Open the `SampleApp/android/app/build.gradle` file.
+2. Add the following block into the Gradle file, within the existing `android` block:
+
+```diff title="android/app/build.gradle"
+    buildTypes {
+        debug {
+            signingConfig signingConfigs.debug
+        }
+        release {
+            // Caution! In production, you need to generate your own keystore file.
+            // see https://reactnative.dev/docs/signed-apk-android.
+            signingConfig signingConfigs.debug
+            minifyEnabled enableProguardInReleaseBuilds
+            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+        }
+    }
+
++   externalNativeBuild {
++       cmake {
++           path "src/main/jni/CMakeLists.txt"
++       }
++   }
+}
+```
+
+This block tells the Gradle file where to look for the CMake file. The path is relative to the folder where the `build.gradle` file lives, so we need to add the path to the `CMakeLists.txt` files in the `jni` folder.
+
+#### 3. Register the new Turbo Native Module
+
+The final step is to register the new C++ Turbo Native Module in the runtime, so that when JS requires the C++ Turbo Native Module, the app knows where to find it and can return it.
+
+1. From the folder `SampleApp/android/app/src/main/jni`, run the following command:
+
+<CodeBlock language="sh" title="shell">
+{`curl -O https://raw.githubusercontent.com/facebook/react-native/${getCoreBranchNameForCurrentVersion()}/packages/react-native/ReactAndroid/cmake-utils/default-app-setup/OnLoad.cpp`}
+</CodeBlock>
+
+2. Then, modify this file as follows:
+
+```diff title="android/app/src/main/jni/OnLoad.cpp"
+#include <DefaultComponentsRegistry.h>
+#include <DefaultTurboModuleManagerDelegate.h>
+#include <autolinking.h>
+#include <fbjni/fbjni.h>
+#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
+#include <rncore.h>
+
++ // Include the NativeSampleModule header
++ #include <NativeSampleModule.h>
+
+//...
+
+std::shared_ptr<TurboModule> cxxModuleProvider(
+    const std::string& name,
+    const std::shared_ptr<CallInvoker>& jsInvoker) {
+  // Here you can provide your CXX Turbo Modules coming from
+  // either your application or from external libraries. The approach to follow
+  // is similar to the following (for a module called `NativeCxxModuleExample`):
+  //
+  // if (name == NativeCxxModuleExample::kModuleName) {
+  //   return std::make_shared<NativeCxxModuleExample>(jsInvoker);
+  // }
+
++  // This code registers the module so that when the JS side asks for it, the app can return it
++  if (name == NativeSampleModule::kModuleName) {
++    return std::make_shared<NativeSampleModule>(jsInvoker);
++  }
+
+  // And we fallback to the CXX module providers autolinked
+  return autolinking_cxxModuleProvider(name, jsInvoker);
+}
+
+// leave the rest of the file
+```
+
+These steps download the original `OnLoad.cpp` file from React Native, so that we can safely override it to load the C++ Turbo Native Module in the app.
+
+Once we downloaded the file, we can modify it by:
+
+- Including the header file that points to our module
+- Registering the Turbo Native Module so that when JS requires it, the app can return it.
+
+Now, you can run `yarn android` from the project root to see your app building successfully.
+
+### iOS
+
+To make sure that the iOS app can effectively build the C++ Turbo Native Module, we need to:
+
+1. Install pods and run Codegen.
+2. Add the `shared` folder to our iOS project.
+3. Register the C++ Turbo Native Module in the application.
+
+#### 1. Install Pods and Run Codegen.
+
+The first step we need to run is the usual steps we run every time we have to prepare our iOS application. CocoaPods is the tool we use to setup and install React Native dependencies and, as part of the process, it will also run Codegen for us.
+
+```bash
+cd ios
+bundle install
+bundle exec pod install
+```
+
+#### 2. Add the shared folder to the iOS project
+
+This step adds the `shared` folder to the project to make it visible to Xcode.
+
+1. Open the CocoaPods generated Xcode Workspace.
+
+```bash
+cd ios
+open SampleApp.xcworkspace
+```
+
+2. Click on the `SampleApp` project on the left and select `Add files to "Sample App"...`.
+
+![Add Files to Sample App...](/docs/assets/AddFilesToXcode1.png)
+
+3. Select the `shared` folder and click on `Add`.
+
+![Add Files to Sample App...](/docs/assets/AddFilesToXcode2.png)
+
+If you did everything right, your project on the left should look like this:
+
+![Xcode Project](/docs/assets/CxxTMGuideXcodeProject.png)
+
+#### 3. Registering the Cxx Turbo Native Module in your app
+
+To register a pure Cxx Turbo Native Module in your app, you need to:
+
+1. Create a `ModuleProvider` for the Native Module
+2. Configure the `package.json` to associate the JS module name with the ModuleProvider class.
+
+The ModuleProvider is an Objective-C++ that glues together the Pure C++ module with the rest of your iOS App.
+
+##### 3.1 Create the ModuleProvider
+
+1. From Xcode, select the `SampleApp` project and press <kbd>⌘</kbd> + <kbd>N</kbd> to create a new file.
+2. Select the `Cocoa Touch Class` template
+3. Add the name `NativeSampleModuleProvider` (keep the other field as `Subclass of: NSObject` and `Language: Objective-C`)
+4. Click Next to generate the files.
+5. Rename the `NativeSampleModuleProvider.m` to `NativeSampleModuleProvider.mm`. The `mm` extension denotes an Objective-C++ file.
+6. Implement the content of the `NativeSampleModuleProvider.h` with the following:
+
+```objc title="NativeSampleModuleProvider.h"
+
+#import <Foundation/Foundation.h>
+#import <ReactCommon/RCTTurboModule.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface NativeSampleModuleProvider : NSObject <RCTModuleProvider>
+
+@end
+
+NS_ASSUME_NONNULL_END
+```
+
+This declares a `NativeSampleModuleProvider` object that conforms to the `RCTModuleProvider` protocol.
+
+7. Implement the content of the `NativeSampleModuleProvider.mm` with the following:
+
+```objc title="NativeSampleModuleProvider.mm"
+
+#import "NativeSampleModuleProvider.h"
+#import <ReactCommon/CallInvoker.h>
+#import <ReactCommon/TurboModule.h>
+#import "NativeSampleModule.h"
+
+@implementation NativeSampleModuleProvider
+
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
+    (const facebook::react::ObjCTurboModule::InitParams &)params
+{
+  return std::make_shared<facebook::react::NativeSampleModule>(params.jsInvoker);
+}
+
+@end
+```
+
+This code implements the `RCTModuleProvider` protocol by creating the pure C++ `NativeSampleModule` when the `getTurboModule:` method is called.
+
+##### 3.2 Update the package.json
+
+The last step consists in updating the `package.json` to tell React Native about the link between the JS specs of the Native Module and the concrete implementation of those spec in native code.
+
+Modify the `package.json` as it follows:
+
+```json title="package.json"
+     "start": "react-native start",
+     "test": "jest"
+   },
+   "codegenConfig": {
+     "name": "AppSpecs",
+     "type": "modules",
+     "jsSrcsDir": "specs",
+     "android": {
+       "javaPackageName": "com.sampleapp.specs"
+     // highlight-add-start
+     },
+     "ios": {
+        "modulesProvider": {
+          "NativeSampleModule":  "NativeSampleModuleProvider"
+        }
+     }
+     // highlight-add-end
+   },
+
+   "dependencies": {
+```
+
+At this point, you need to re-install the pods to make sure that codegen runs again to generate the new files:
+
+```bash
+# from the ios folder
+bundle exec pod install
+open SampleApp.xcworkspace
+```
+
+If you now build your application from Xcode, you should be able to build successfully.
+
+## 5. Testing your Code
+
+It's now time to access our C++ Turbo Native Module from JS. To do so, we have to modify the `App.tsx` file to import the Turbo Native Module and to call it in our code.
+
+1. Open the `App.tsx` file.
+2. Replace the content of the template with the following code:
+
+```tsx title="App.tsx"
+import {type JSX, useState} from 'react';
+import {
+  Button,
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+import SampleTurboModule from './specs/NativeSampleModule';
+
+function App(): JSX.Element {
+  const [value, setValue] = useState('');
+  const [reversedValue, setReversedValue] = useState('');
+
+  const onPress = () => {
+    const revString = SampleTurboModule.reverseString(value);
+    setReversedValue(revString);
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View>
+        <Text style={styles.title}>
+          Welcome to C++ Turbo Native Module Example
+        </Text>
+        <Text>Write down here the text you want to reverse</Text>
+        <TextInput
+          style={styles.textInput}
+          placeholder="Write your text here"
+          onChangeText={setValue}
+          value={value}
+        />
+        <Button title="Reverse" onPress={onPress} />
+        <Text>Reversed text: {reversedValue}</Text>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 18,
+    marginBottom: 20,
+  },
+  textInput: {
+    borderColor: 'black',
+    borderWidth: 1,
+    borderRadius: 5,
+    padding: 10,
+    marginTop: 10,
+  },
+});
+
+export default App;
+```
+
+The interesting lines in this app are:
+
+- `import SampleTurboModule from './specs/NativeSampleModule';`: this line imports the Turbo Native Module in the app,
+- `const revString = SampleTurboModule.reverseString(value);` in the `onPress` callback: this is how you can use the Turbo Native Module in your app.
+
+:::warning
+For the sake of this example and to keep it as short as possible, we directly imported the spec file in our app.
+The best practice in this case is to create a separate file to wrap the specs and use that file into your application.
+This allows you to prepare the input for the specs and gives you more control over them in JS.
+:::
+
+Congratulations, you wrote your first C++ Turbo Native Module!
+
+| <center>Android</center>                                                                             | <center>iOS</center>                                                                          |
+| ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
+| <center><img src="/docs/assets/CxxGuideAndroidVideo.gif" alt="Android Video" height="600"/></center> | <center><img src="/docs/assets/CxxGuideIOSVideo.gif" alt="iOS video" height="600" /></center> |
diff --git a/website/versioned_docs/version-0.86/toastandroid.md b/website/versioned_docs/version-0.86/toastandroid.md
index 0d7a569235d..07f2b7b20cd 100644
--- a/website/versioned_docs/version-0.86/toastandroid.md
+++ b/website/versioned_docs/version-0.86/toastandroid.md
@@ -17,7 +17,6 @@ Starting with Android 11 (API level 30), setting the gravity has no effect on te
 :::
 
 ```SnackPlayer name=Toast%20Android%20API%20Example&supportedPlatforms=android
-import React from 'react';
 import {StyleSheet, ToastAndroid, Button, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.86/touchablehighlight.md b/website/versioned_docs/version-0.86/touchablehighlight.md
index 98ea0823783..bb0a5d234c1 100644
--- a/website/versioned_docs/version-0.86/touchablehighlight.md
+++ b/website/versioned_docs/version-0.86/touchablehighlight.md
@@ -1,215 +1,215 @@
----
-id: touchablehighlight
-title: TouchableHighlight
----
-
-:::tip
-If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
-:::
-
-A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view.
-
-The underlay comes from wrapping the child in a new View, which can affect layout, and sometimes cause unwanted visual artifacts if not used correctly, for example if the backgroundColor of the wrapped view isn't explicitly set to an opaque color.
-
-TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View.
-
-```tsx
-function MyComponent(props: MyComponentProps) {
-  return (
-    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
-      <Text>My Component</Text>
-    </View>
-  );
-}
-
-<TouchableHighlight
-  activeOpacity={0.6}
-  underlayColor="#DDDDDD"
-  onPress={() => alert('Pressed!')}>
-  <MyComponent />
-</TouchableHighlight>;
-```
-
-## Example
-
-```SnackPlayer name=TouchableHighlight%20Example
-import React, {useState} from 'react';
-import {StyleSheet, Text, TouchableHighlight, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const TouchableHighlightExample = () => {
-  const [count, setCount] = useState(0);
-  const onPress = () => setCount(count + 1);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <TouchableHighlight onPress={onPress}>
-          <View style={styles.button}>
-            <Text>Touch Here</Text>
-          </View>
-        </TouchableHighlight>
-        <View style={styles.countContainer}>
-          <Text style={styles.countText}>{count || null}</Text>
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: 10,
-  },
-  button: {
-    alignItems: 'center',
-    backgroundColor: '#DDDDDD',
-    padding: 10,
-  },
-  countContainer: {
-    alignItems: 'center',
-    padding: 10,
-  },
-  countText: {
-    color: '#FF00FF',
-  },
-});
-
-export default TouchableHighlightExample;
-```
-
----
-
-# Reference
-
-## Props
-
-### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
-
-Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
-
----
-
-### `activeOpacity`
-
-Determines what the opacity of the wrapped view should be when touch is active. The value should be between 0 and 1. Defaults to 0.85. Requires `underlayColor` to be set.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `onHideUnderlay`
-
-Called immediately after the underlay is hidden.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onShowUnderlay`
-
-Called immediately after the underlay is shown.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `ref`
-
-A ref setter that will be assigned an [element node](element-nodes) when mounted.
-
----
-
-### `style`
-
-| Type       |
-| ---------- |
-| View.style |
-
----
-
-### `underlayColor`
-
-The color of the underlay that will show through when the touch is active.
-
-| Type               |
-| ------------------ |
-| [color](colors.md) |
-
----
-
-### `hasTVPreferredFocus` <div className="label ios">iOS</div>
-
-_(Apple TV only)_ TV preferred focus (see documentation for the View component).
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `nextFocusDown` <div className="label android">Android</div>
-
-TV next focus down (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusForward` <div className="label android">Android</div>
-
-TV next focus forward (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusLeft` <div className="label android">Android</div>
-
-TV next focus left (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusRight` <div className="label android">Android</div>
-
-TV next focus right (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusUp` <div className="label android">Android</div>
-
-TV next focus up (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `testOnly_pressed`
-
-Handy for snapshot tests.
-
-| Type |
-| ---- |
-| bool |
+---
+id: touchablehighlight
+title: TouchableHighlight
+---
+
+:::tip
+If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
+:::
+
+A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view.
+
+The underlay comes from wrapping the child in a new View, which can affect layout, and sometimes cause unwanted visual artifacts if not used correctly, for example if the backgroundColor of the wrapped view isn't explicitly set to an opaque color.
+
+TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View.
+
+```tsx
+function MyComponent(props: MyComponentProps) {
+  return (
+    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
+      <Text>My Component</Text>
+    </View>
+  );
+}
+
+<TouchableHighlight
+  activeOpacity={0.6}
+  underlayColor="#DDDDDD"
+  onPress={() => alert('Pressed!')}>
+  <MyComponent />
+</TouchableHighlight>;
+```
+
+## Example
+
+```SnackPlayer name=TouchableHighlight%20Example
+import {useState} from 'react';
+import {StyleSheet, Text, TouchableHighlight, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const TouchableHighlightExample = () => {
+  const [count, setCount] = useState(0);
+  const onPress = () => setCount(count + 1);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <TouchableHighlight onPress={onPress}>
+          <View style={styles.button}>
+            <Text>Touch Here</Text>
+          </View>
+        </TouchableHighlight>
+        <View style={styles.countContainer}>
+          <Text style={styles.countText}>{count || null}</Text>
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#DDDDDD',
+    padding: 10,
+  },
+  countContainer: {
+    alignItems: 'center',
+    padding: 10,
+  },
+  countText: {
+    color: '#FF00FF',
+  },
+});
+
+export default TouchableHighlightExample;
+```
+
+---
+
+# Reference
+
+## Props
+
+### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
+
+Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
+
+---
+
+### `activeOpacity`
+
+Determines what the opacity of the wrapped view should be when touch is active. The value should be between 0 and 1. Defaults to 0.85. Requires `underlayColor` to be set.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `onHideUnderlay`
+
+Called immediately after the underlay is hidden.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onShowUnderlay`
+
+Called immediately after the underlay is shown.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `ref`
+
+A ref setter that will be assigned an [element node](element-nodes) when mounted.
+
+---
+
+### `style`
+
+| Type       |
+| ---------- |
+| View.style |
+
+---
+
+### `underlayColor`
+
+The color of the underlay that will show through when the touch is active.
+
+| Type               |
+| ------------------ |
+| [color](colors.md) |
+
+---
+
+### `hasTVPreferredFocus` <div className="label ios">iOS</div>
+
+_(Apple TV only)_ TV preferred focus (see documentation for the View component).
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `nextFocusDown` <div className="label android">Android</div>
+
+TV next focus down (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusForward` <div className="label android">Android</div>
+
+TV next focus forward (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusLeft` <div className="label android">Android</div>
+
+TV next focus left (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusRight` <div className="label android">Android</div>
+
+TV next focus right (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusUp` <div className="label android">Android</div>
+
+TV next focus up (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `testOnly_pressed`
+
+Handy for snapshot tests.
+
+| Type |
+| ---- |
+| bool |
diff --git a/website/versioned_docs/version-0.86/touchablenativefeedback.md b/website/versioned_docs/version-0.86/touchablenativefeedback.md
index a7465b9f2ed..eb0a67aa03c 100644
--- a/website/versioned_docs/version-0.86/touchablenativefeedback.md
+++ b/website/versioned_docs/version-0.86/touchablenativefeedback.md
@@ -1,219 +1,219 @@
----
-id: touchablenativefeedback
-title: TouchableNativeFeedback
----
-
-:::tip
-If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
-:::
-
-A wrapper for making views respond properly to touches (Android only). On Android this component uses native state drawable to display touch feedback.
-
-At the moment it only supports having a single View instance as a child node, as it's implemented by replacing that View with another instance of RCTView node with some additional properties set.
-
-Background drawable of native feedback touchable can be customized with `background` property.
-
-## Example
-
-```SnackPlayer name=TouchableNativeFeedback%20Android%20Component%20Example&supportedPlatforms=android
-import React, {useState} from 'react';
-import {Text, View, StyleSheet, TouchableNativeFeedback} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [rippleColor, setRippleColor] = useState(randomHexColor());
-  const [rippleOverflow, setRippleOverflow] = useState(false);
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <TouchableNativeFeedback
-          onPress={() => {
-            setRippleColor(randomHexColor());
-            setRippleOverflow(!rippleOverflow);
-          }}
-          background={TouchableNativeFeedback.Ripple(
-            rippleColor,
-            rippleOverflow,
-          )}>
-          <View style={styles.touchable}>
-            <Text style={styles.text}>TouchableNativeFeedback</Text>
-          </View>
-        </TouchableNativeFeedback>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const randomHexColor = () => {
-  return '#000000'.replace(/0/g, function () {
-    return Math.round(Math.random() * 16).toString(16);
-  });
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    backgroundColor: 'black',
-    paddingHorizontal: 20,
-  },
-  touchable: {
-    flex: 0.33,
-    justifyContent: 'center',
-    backgroundColor: '#eeeeee',
-    borderColor: 'black',
-    borderWidth: 1,
-  },
-  text: {
-    alignSelf: 'center',
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Props
-
-### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
-
-Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
-
----
-
-### `background`
-
-Determines the type of background drawable that's going to be used to display feedback. It takes an object with `type` property and extra data depending on the `type`. It's recommended to use one of the static methods to generate that dictionary.
-
-| Type               |
-| ------------------ |
-| backgroundPropType |
-
----
-
-### `useForeground`
-
-Set to true to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them.
-
-Check TouchableNativeFeedback.canUseNativeForeground() first, as this is only available on Android 6.0 and above. If you try to use this on older versions you will get a warning and fallback to background.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `hasTVPreferredFocus` <div className="label android">Android</div>
-
-TV preferred focus (see documentation for the View component).
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `nextFocusDown` <div className="label android">Android</div>
-
-TV next focus down (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusForward` <div className="label android">Android</div>
-
-TV next focus forward (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusLeft` <div className="label android">Android</div>
-
-TV next focus left (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusRight` <div className="label android">Android</div>
-
-TV next focus right (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusUp` <div className="label android">Android</div>
-
-TV next focus up (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
-## Methods
-
-### `SelectableBackground()`
-
-```tsx
-static SelectableBackground(
-  rippleRadius: number | null,
-): ThemeAttributeBackgroundPropType;
-```
-
-Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.
-
----
-
-### `SelectableBackgroundBorderless()`
-
-```tsx
-static SelectableBackgroundBorderless(
-  rippleRadius: number | null,
-): ThemeAttributeBackgroundPropType;
-```
-
-Creates an object that represent android theme's default background for borderless selectable elements (`?android:attr/selectableItemBackgroundBorderless`). Available on android API level 21+. `rippleRadius` parameter controls the radius of the ripple effect.
-
----
-
-### `Ripple()`
-
-```tsx
-static Ripple(
-  color: ColorValue,
-  borderless: boolean,
-  rippleRadius?: number | null,
-): RippleBackgroundPropType;
-```
-
-Creates an object that represents ripple drawable with specified color (as a string). If property `borderless` evaluates to true the ripple will render outside of the view bounds (see native actionbar buttons as an example of that behavior). This background type is available on Android API level 21+.
-
-**Parameters:**
-
-| Name         | Type    | Required | Description                                 |
-| ------------ | ------- | -------- | ------------------------------------------- |
-| color        | string  | Yes      | The ripple color                            |
-| borderless   | boolean | Yes      | If the ripple can render outside its bounds |
-| rippleRadius | ?number | No       | controls the radius of the ripple effect    |
-
----
-
-### `canUseNativeForeground()`
-
-```tsx
-static canUseNativeForeground(): boolean;
-```
+---
+id: touchablenativefeedback
+title: TouchableNativeFeedback
+---
+
+:::tip
+If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
+:::
+
+A wrapper for making views respond properly to touches (Android only). On Android this component uses native state drawable to display touch feedback.
+
+At the moment it only supports having a single View instance as a child node, as it's implemented by replacing that View with another instance of RCTView node with some additional properties set.
+
+Background drawable of native feedback touchable can be customized with `background` property.
+
+## Example
+
+```SnackPlayer name=TouchableNativeFeedback%20Android%20Component%20Example&supportedPlatforms=android
+import {useState} from 'react';
+import {Text, View, StyleSheet, TouchableNativeFeedback} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [rippleColor, setRippleColor] = useState(randomHexColor());
+  const [rippleOverflow, setRippleOverflow] = useState(false);
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <TouchableNativeFeedback
+          onPress={() => {
+            setRippleColor(randomHexColor());
+            setRippleOverflow(!rippleOverflow);
+          }}
+          background={TouchableNativeFeedback.Ripple(
+            rippleColor,
+            rippleOverflow,
+          )}>
+          <View style={styles.touchable}>
+            <Text style={styles.text}>TouchableNativeFeedback</Text>
+          </View>
+        </TouchableNativeFeedback>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const randomHexColor = () => {
+  return '#000000'.replace(/0/g, function () {
+    return Math.round(Math.random() * 16).toString(16);
+  });
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: 'black',
+    paddingHorizontal: 20,
+  },
+  touchable: {
+    flex: 0.33,
+    justifyContent: 'center',
+    backgroundColor: '#eeeeee',
+    borderColor: 'black',
+    borderWidth: 1,
+  },
+  text: {
+    alignSelf: 'center',
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Props
+
+### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
+
+Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
+
+---
+
+### `background`
+
+Determines the type of background drawable that's going to be used to display feedback. It takes an object with `type` property and extra data depending on the `type`. It's recommended to use one of the static methods to generate that dictionary.
+
+| Type               |
+| ------------------ |
+| backgroundPropType |
+
+---
+
+### `useForeground`
+
+Set to true to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them.
+
+Check TouchableNativeFeedback.canUseNativeForeground() first, as this is only available on Android 6.0 and above. If you try to use this on older versions you will get a warning and fallback to background.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `hasTVPreferredFocus` <div className="label android">Android</div>
+
+TV preferred focus (see documentation for the View component).
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `nextFocusDown` <div className="label android">Android</div>
+
+TV next focus down (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusForward` <div className="label android">Android</div>
+
+TV next focus forward (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusLeft` <div className="label android">Android</div>
+
+TV next focus left (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusRight` <div className="label android">Android</div>
+
+TV next focus right (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusUp` <div className="label android">Android</div>
+
+TV next focus up (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+## Methods
+
+### `SelectableBackground()`
+
+```tsx
+static SelectableBackground(
+  rippleRadius: number | null,
+): ThemeAttributeBackgroundPropType;
+```
+
+Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.
+
+---
+
+### `SelectableBackgroundBorderless()`
+
+```tsx
+static SelectableBackgroundBorderless(
+  rippleRadius: number | null,
+): ThemeAttributeBackgroundPropType;
+```
+
+Creates an object that represent android theme's default background for borderless selectable elements (`?android:attr/selectableItemBackgroundBorderless`). Available on android API level 21+. `rippleRadius` parameter controls the radius of the ripple effect.
+
+---
+
+### `Ripple()`
+
+```tsx
+static Ripple(
+  color: ColorValue,
+  borderless: boolean,
+  rippleRadius?: number | null,
+): RippleBackgroundPropType;
+```
+
+Creates an object that represents ripple drawable with specified color (as a string). If property `borderless` evaluates to true the ripple will render outside of the view bounds (see native actionbar buttons as an example of that behavior). This background type is available on Android API level 21+.
+
+**Parameters:**
+
+| Name         | Type    | Required | Description                                 |
+| ------------ | ------- | -------- | ------------------------------------------- |
+| color        | string  | Yes      | The ripple color                            |
+| borderless   | boolean | Yes      | If the ripple can render outside its bounds |
+| rippleRadius | ?number | No       | controls the radius of the ripple effect    |
+
+---
+
+### `canUseNativeForeground()`
+
+```tsx
+static canUseNativeForeground(): boolean;
+```
diff --git a/website/versioned_docs/version-0.86/touchableopacity.md b/website/versioned_docs/version-0.86/touchableopacity.md
index 72af0bc5f49..0764f4787fa 100644
--- a/website/versioned_docs/version-0.86/touchableopacity.md
+++ b/website/versioned_docs/version-0.86/touchableopacity.md
@@ -1,151 +1,151 @@
----
-id: touchableopacity
-title: TouchableOpacity
----
-
-:::tip
-If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
-:::
-
-A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it.
-
-Opacity is controlled by wrapping the children in an `Animated.View`, which is added to the view hierarchy. Be aware that this can affect layout.
-
-## Example
-
-```SnackPlayer name=TouchableOpacity%20Example
-import React, {useState} from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const [count, setCount] = useState(0);
-  const onPress = () => setCount(prevCount => prevCount + 1);
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.countContainer}>
-          <Text>Count: {count}</Text>
-        </View>
-        <TouchableOpacity style={styles.button} onPress={onPress}>
-          <Text>Press Here</Text>
-        </TouchableOpacity>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: 10,
-  },
-  button: {
-    alignItems: 'center',
-    backgroundColor: '#DDDDDD',
-    padding: 10,
-  },
-  countContainer: {
-    alignItems: 'center',
-    padding: 10,
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Props
-
-### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
-
-Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
-
----
-
-### `style`
-
-| Type                           |
-| ------------------------------ |
-| [View.style](view-style-props) |
-
----
-
-### `activeOpacity`
-
-Determines what the opacity of the wrapped view should be when touch is active. Defaults to `0.2`.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `hasTVPreferredFocus` <div className="label ios">iOS</div>
-
-_(Apple TV only)_ TV preferred focus (see documentation for the View component).
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `nextFocusDown` <div className="label android">Android</div>
-
-TV next focus down (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusForward` <div className="label android">Android</div>
-
-TV next focus forward (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusLeft` <div className="label android">Android</div>
-
-TV next focus left (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusRight` <div className="label android">Android</div>
-
-TV next focus right (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `nextFocusUp` <div className="label android">Android</div>
-
-TV next focus up (see documentation for the View component).
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `ref`
-
-A ref setter that will be assigned an [element node](element-nodes) when mounted.
+---
+id: touchableopacity
+title: TouchableOpacity
+---
+
+:::tip
+If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
+:::
+
+A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it.
+
+Opacity is controlled by wrapping the children in an `Animated.View`, which is added to the view hierarchy. Be aware that this can affect layout.
+
+## Example
+
+```SnackPlayer name=TouchableOpacity%20Example
+import {useState} from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const [count, setCount] = useState(0);
+  const onPress = () => setCount(prevCount => prevCount + 1);
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.countContainer}>
+          <Text>Count: {count}</Text>
+        </View>
+        <TouchableOpacity style={styles.button} onPress={onPress}>
+          <Text>Press Here</Text>
+        </TouchableOpacity>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#DDDDDD',
+    padding: 10,
+  },
+  countContainer: {
+    alignItems: 'center',
+    padding: 10,
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Props
+
+### [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props)
+
+Inherits [TouchableWithoutFeedback Props](touchablewithoutfeedback.md#props).
+
+---
+
+### `style`
+
+| Type                           |
+| ------------------------------ |
+| [View.style](view-style-props) |
+
+---
+
+### `activeOpacity`
+
+Determines what the opacity of the wrapped view should be when touch is active. Defaults to `0.2`.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `hasTVPreferredFocus` <div className="label ios">iOS</div>
+
+_(Apple TV only)_ TV preferred focus (see documentation for the View component).
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `nextFocusDown` <div className="label android">Android</div>
+
+TV next focus down (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusForward` <div className="label android">Android</div>
+
+TV next focus forward (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusLeft` <div className="label android">Android</div>
+
+TV next focus left (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusRight` <div className="label android">Android</div>
+
+TV next focus right (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `nextFocusUp` <div className="label android">Android</div>
+
+TV next focus up (see documentation for the View component).
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `ref`
+
+A ref setter that will be assigned an [element node](element-nodes) when mounted.
diff --git a/website/versioned_docs/version-0.86/touchablewithoutfeedback.md b/website/versioned_docs/version-0.86/touchablewithoutfeedback.md
index c7e875156df..fb0978b1ad1 100644
--- a/website/versioned_docs/version-0.86/touchablewithoutfeedback.md
+++ b/website/versioned_docs/version-0.86/touchablewithoutfeedback.md
@@ -1,531 +1,531 @@
----
-id: touchablewithoutfeedback
-title: TouchableWithoutFeedback
----
-
-:::tip
-If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
-:::
-
-Do not use unless you have a very good reason. All elements that respond to press should have a visual feedback when touched.
-
-`TouchableWithoutFeedback` supports only one child. If you wish to have several child components, wrap them in a View. Importantly, `TouchableWithoutFeedback` works by cloning its child and applying responder props to it. It is therefore required that any intermediary components pass through those props to the underlying React Native component.
-
-## Usage Pattern
-
-```tsx
-function MyComponent(props: MyComponentProps) {
-  return (
-    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
-      <Text>My Component</Text>
-    </View>
-  );
-}
-
-<TouchableWithoutFeedback onPress={() => alert('Pressed!')}>
-  <MyComponent />
-</TouchableWithoutFeedback>;
-```
-
-## Example
-
-```SnackPlayer name=TouchableWithoutFeedback
-import React, {useState} from 'react';
-import {StyleSheet, TouchableWithoutFeedback, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const TouchableWithoutFeedbackExample = () => {
-  const [count, setCount] = useState(0);
-
-  const onPress = () => {
-    setCount(count + 1);
-  };
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.countContainer}>
-          <Text style={styles.countText}>Count: {count}</Text>
-        </View>
-        <TouchableWithoutFeedback onPress={onPress}>
-          <View style={styles.button}>
-            <Text>Touch Here</Text>
-          </View>
-        </TouchableWithoutFeedback>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: 10,
-  },
-  button: {
-    alignItems: 'center',
-    backgroundColor: '#DDDDDD',
-    padding: 10,
-  },
-  countContainer: {
-    alignItems: 'center',
-    padding: 10,
-  },
-  countText: {
-    color: '#FF00FF',
-  },
-});
-
-export default TouchableWithoutFeedbackExample;
-```
-
----
-
-# Reference
-
-## Props
-
-### `accessibilityIgnoresInvertColors` <div className="label ios">iOS</div>
-
-A value indicating this view should or should not be inverted when color inversion is turned on. A value of `true` will tell the view to not be inverted even if color inversion is turned on.
-
-See the [Accessibility guide](accessibility.md#accessibilityignoresinvertcolors) for more information.
-
-| Type    |
-| ------- |
-| Boolean |
-
----
-
-### `accessible`
-
-When `true`, indicates that the view is an accessibility element. By default, all the touchable elements are accessible.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `accessibilityLabel`
-
-Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the `Text` nodes separated by space.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityLanguage` <div className="label ios">iOS</div>
-
-A value indicating which language should be used by the screen reader when the user interacts with the element. It should follow the [BCP 47 specification](https://www.rfc-editor.org/info/bcp47).
-
-See the [iOS `accessibilityLanguage` doc](https://developer.apple.com/documentation/objectivec/nsobject/1615192-accessibilitylanguage) for more information.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityHint`
-
-An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityRole`
-
-`accessibilityRole` communicates the purpose of a component to the user of an assistive technology.
-
-`accessibilityRole` can be one of the following:
-
-- `'none'` - Used when the element has no role.
-- `'button'` - Used when the element should be treated as a button.
-- `'link'` - Used when the element should be treated as a link.
-- `'search'` - Used when the text field element should also be treated as a search field.
-- `'image'` - Used when the element should be treated as an image. Can be combined with button or link, for example.
-- `'keyboardkey'` - Used when the element acts as a keyboard key.
-- `'text'` - Used when the element should be treated as static text that cannot change.
-- `'adjustable'` - Used when an element can be "adjusted" (e.g. a slider).
-- `'imagebutton'` - Used when the element should be treated as a button and is also an image.
-- `'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.
-- `'alert'` - Used when an element contains important text to be presented to the user.
-- `'checkbox'` - Used when an element represents a checkbox which can be checked, unchecked, or have mixed checked state.
-- `'combobox'` - Used when an element represents a combo box, which allows the user to select among several choices.
-- `'menu'` - Used when the component is a menu of choices.
-- `'menubar'` - Used when a component is a container of multiple menus.
-- `'menuitem'` - Used to represent an item within a menu.
-- `'progressbar'` - Used to represent a component which indicates progress of a task.
-- `'radio'` - Used to represent a radio button.
-- `'radiogroup'` - Used to represent a group of radio buttons.
-- `'scrollbar'` - Used to represent a scroll bar.
-- `'spinbutton'` - Used to represent a button which opens a list of choices.
-- `'switch'` - Used to represent a switch which can be turned on and off.
-- `'tab'` - Used to represent a tab.
-- `'tablist'` - Used to represent a list of tabs.
-- `'timer'` - Used to represent a timer.
-- `'toolbar'` - Used to represent a tool bar (a container of action buttons or components).
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `accessibilityState`
-
-Describes the current state of a component to the user of an assistive technology.
-
-See the [Accessibility guide](accessibility.md#accessibilitystate-ios-android) for more information.
-
-| Type                                                                                             |
-| ------------------------------------------------------------------------------------------------ |
-| object: `{disabled: bool, selected: bool, checked: bool or 'mixed', busy: bool, expanded: bool}` |
-
----
-
-### `accessibilityActions`
-
-Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The `accessibilityActions` property should contain a list of action objects. Each action object should contain the field name and label.
-
-See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
-
-| Type  |
-| ----- |
-| array |
-
----
-
-### `aria-busy`
-
-Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-checked`
-
-Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
-| Type             | Default |
-| ---------------- | ------- |
-| boolean, 'mixed' | false   |
-
----
-
-### `aria-disabled`
-
-Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-expanded`
-
-Indicates whether an expandable element is currently expanded or collapsed.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-hidden`
-
-Indicates whether the element is hidden from assistive technologies.
-
-For example, in a window that contains sibling views `A` and `B`, setting `aria-hidden` to `true` on view `B` causes VoiceOver to ignore the `B` element and its children.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-label`
-
-Defines a string value that labels an interactive element.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `aria-live` <div className="label android">Android</div>
-
-Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
-
-- **off** Accessibility services should not announce changes to this view.
-- **polite** Accessibility services should announce changes to this view.
-- **assertive** Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
-
-| Type                                     | Default |
-| ---------------------------------------- | ------- |
-| enum(`'assertive'`, `'off'`, `'polite'`) | `'off'` |
-
----
-
-### `aria-modal` <div className="label ios">iOS</div>
-
-Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. Has precedence over the [`accessibilityViewIsModal`](#accessibilityviewismodal-ios) prop.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
----
-
-### `aria-selected`
-
-Indicates whether a selectable element is currently selected or not.
-
-| Type    |
-| ------- |
-| boolean |
-
-### `onAccessibilityAction`
-
-Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.
-
-See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `accessibilityValue`
-
-Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
-See the [Accessibility guide](accessibility.md#accessibilityvalue-ios-android) for more information.
-
-| Type                                                            |
-| --------------------------------------------------------------- |
-| object: `{min: number, max: number, now: number, text: string}` |
-
----
-
-### `aria-valuemax`
-
-Represents the maximum value for range-based components, such as sliders and progress bars. Has precedence over the `max` value in the `accessibilityValue` prop.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `aria-valuemin`
-
-Represents the minimum value for range-based components, such as sliders and progress bars. Has precedence over the `min` value in the `accessibilityValue` prop.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `aria-valuenow`
-
-Represents the current value for range-based components, such as sliders and progress bars. Has precedence over the `now` value in the `accessibilityValue` prop.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `aria-valuetext`
-
-Represents the textual description of the component. Has precedence over the `text` value in the `accessibilityValue` prop.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `delayLongPress`
-
-Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `delayPressIn`
-
-Duration (in milliseconds), from the start of the touch, before `onPressIn` is called.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `delayPressOut`
-
-Duration (in milliseconds), from the release of the touch, before `onPressOut` is called.
-
-| Type   |
-| ------ |
-| number |
-
----
-
-### `disabled`
-
-If true, disable all interactions for this component.
-
-| Type |
-| ---- |
-| bool |
-
----
-
-### `hitSlop`
-
-This defines how far your touch can start away from the button. This is added to `pressRetentionOffset` when moving off of the button.
-
-:::note
-The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
-:::
-
-| Type                   |
-| ---------------------- |
-| [Rect](rect) or number |
-
-### `id`
-
-Used to locate this view from native code. Has precedence over `nativeID` prop.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `onBlur`
-
-Invoked when the item loses focus.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
-
----
-
-### `onFocus`
-
-Invoked when the item receives focus.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
-
----
-
-### `onLayout`
-
-Invoked on mount and on layout changes.
-
-| Type                                                     |
-| -------------------------------------------------------- |
-| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
-
----
-
-### `onLongPress`
-
-Called if the time after `onPressIn` lasts longer than 370 milliseconds. This time period can be customized with [`delayLongPress`](#delaylongpress).
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onPress`
-
-Called when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock). The first function argument is an event in form of [PressEvent](pressevent).
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onPressIn`
-
-Called as soon as the touchable element is pressed and invoked even before onPress. This can be useful when making network requests. The first function argument is an event in form of [PressEvent](pressevent).
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `onPressOut`
-
-Called as soon as the touch is released even before onPress. The first function argument is an event in form of [PressEvent](pressevent).
-
-| Type     |
-| -------- |
-| function |
-
----
-
-### `pressRetentionOffset`
-
-When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations.
-
-| Type                   |
-| ---------------------- |
-| [Rect](rect) or number |
-
----
-
-### `nativeID`
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `testID`
-
-Used to locate this view in end-to-end tests.
-
-| Type   |
-| ------ |
-| string |
-
----
-
-### `touchSoundDisabled` <div className="label android">Android</div>
-
-If true, doesn't play a system sound on touch.
-
-| Type    |
-| ------- |
-| Boolean |
+---
+id: touchablewithoutfeedback
+title: TouchableWithoutFeedback
+---
+
+:::tip
+If you're looking for a more extensive and future-proof way to handle touch-based input, check out the [Pressable](pressable.md) API.
+:::
+
+Do not use unless you have a very good reason. All elements that respond to press should have a visual feedback when touched.
+
+`TouchableWithoutFeedback` supports only one child. If you wish to have several child components, wrap them in a View. Importantly, `TouchableWithoutFeedback` works by cloning its child and applying responder props to it. It is therefore required that any intermediary components pass through those props to the underlying React Native component.
+
+## Usage Pattern
+
+```tsx
+function MyComponent(props: MyComponentProps) {
+  return (
+    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
+      <Text>My Component</Text>
+    </View>
+  );
+}
+
+<TouchableWithoutFeedback onPress={() => alert('Pressed!')}>
+  <MyComponent />
+</TouchableWithoutFeedback>;
+```
+
+## Example
+
+```SnackPlayer name=TouchableWithoutFeedback
+import {useState} from 'react';
+import {StyleSheet, TouchableWithoutFeedback, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const TouchableWithoutFeedbackExample = () => {
+  const [count, setCount] = useState(0);
+
+  const onPress = () => {
+    setCount(count + 1);
+  };
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.countContainer}>
+          <Text style={styles.countText}>Count: {count}</Text>
+        </View>
+        <TouchableWithoutFeedback onPress={onPress}>
+          <View style={styles.button}>
+            <Text>Touch Here</Text>
+          </View>
+        </TouchableWithoutFeedback>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#DDDDDD',
+    padding: 10,
+  },
+  countContainer: {
+    alignItems: 'center',
+    padding: 10,
+  },
+  countText: {
+    color: '#FF00FF',
+  },
+});
+
+export default TouchableWithoutFeedbackExample;
+```
+
+---
+
+# Reference
+
+## Props
+
+### `accessibilityIgnoresInvertColors` <div className="label ios">iOS</div>
+
+A value indicating this view should or should not be inverted when color inversion is turned on. A value of `true` will tell the view to not be inverted even if color inversion is turned on.
+
+See the [Accessibility guide](accessibility.md#accessibilityignoresinvertcolors) for more information.
+
+| Type    |
+| ------- |
+| Boolean |
+
+---
+
+### `accessible`
+
+When `true`, indicates that the view is an accessibility element. By default, all the touchable elements are accessible.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `accessibilityLabel`
+
+Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the `Text` nodes separated by space.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityLanguage` <div className="label ios">iOS</div>
+
+A value indicating which language should be used by the screen reader when the user interacts with the element. It should follow the [BCP 47 specification](https://www.rfc-editor.org/info/bcp47).
+
+See the [iOS `accessibilityLanguage` doc](https://developer.apple.com/documentation/objectivec/nsobject/1615192-accessibilitylanguage) for more information.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityHint`
+
+An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityRole`
+
+`accessibilityRole` communicates the purpose of a component to the user of an assistive technology.
+
+`accessibilityRole` can be one of the following:
+
+- `'none'` - Used when the element has no role.
+- `'button'` - Used when the element should be treated as a button.
+- `'link'` - Used when the element should be treated as a link.
+- `'search'` - Used when the text field element should also be treated as a search field.
+- `'image'` - Used when the element should be treated as an image. Can be combined with button or link, for example.
+- `'keyboardkey'` - Used when the element acts as a keyboard key.
+- `'text'` - Used when the element should be treated as static text that cannot change.
+- `'adjustable'` - Used when an element can be "adjusted" (e.g. a slider).
+- `'imagebutton'` - Used when the element should be treated as a button and is also an image.
+- `'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.
+- `'alert'` - Used when an element contains important text to be presented to the user.
+- `'checkbox'` - Used when an element represents a checkbox which can be checked, unchecked, or have mixed checked state.
+- `'combobox'` - Used when an element represents a combo box, which allows the user to select among several choices.
+- `'menu'` - Used when the component is a menu of choices.
+- `'menubar'` - Used when a component is a container of multiple menus.
+- `'menuitem'` - Used to represent an item within a menu.
+- `'progressbar'` - Used to represent a component which indicates progress of a task.
+- `'radio'` - Used to represent a radio button.
+- `'radiogroup'` - Used to represent a group of radio buttons.
+- `'scrollbar'` - Used to represent a scroll bar.
+- `'spinbutton'` - Used to represent a button which opens a list of choices.
+- `'switch'` - Used to represent a switch which can be turned on and off.
+- `'tab'` - Used to represent a tab.
+- `'tablist'` - Used to represent a list of tabs.
+- `'timer'` - Used to represent a timer.
+- `'toolbar'` - Used to represent a tool bar (a container of action buttons or components).
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `accessibilityState`
+
+Describes the current state of a component to the user of an assistive technology.
+
+See the [Accessibility guide](accessibility.md#accessibilitystate-ios-android) for more information.
+
+| Type                                                                                             |
+| ------------------------------------------------------------------------------------------------ |
+| object: `{disabled: bool, selected: bool, checked: bool or 'mixed', busy: bool, expanded: bool}` |
+
+---
+
+### `accessibilityActions`
+
+Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The `accessibilityActions` property should contain a list of action objects. Each action object should contain the field name and label.
+
+See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
+
+| Type  |
+| ----- |
+| array |
+
+---
+
+### `aria-busy`
+
+Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-checked`
+
+Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
+
+| Type             | Default |
+| ---------------- | ------- |
+| boolean, 'mixed' | false   |
+
+---
+
+### `aria-disabled`
+
+Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-expanded`
+
+Indicates whether an expandable element is currently expanded or collapsed.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-hidden`
+
+Indicates whether the element is hidden from assistive technologies.
+
+For example, in a window that contains sibling views `A` and `B`, setting `aria-hidden` to `true` on view `B` causes VoiceOver to ignore the `B` element and its children.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-label`
+
+Defines a string value that labels an interactive element.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `aria-live` <div className="label android">Android</div>
+
+Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
+
+- **off** Accessibility services should not announce changes to this view.
+- **polite** Accessibility services should announce changes to this view.
+- **assertive** Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
+
+| Type                                     | Default |
+| ---------------------------------------- | ------- |
+| enum(`'assertive'`, `'off'`, `'polite'`) | `'off'` |
+
+---
+
+### `aria-modal` <div className="label ios">iOS</div>
+
+Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. Has precedence over the [`accessibilityViewIsModal`](#accessibilityviewismodal-ios) prop.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
+---
+
+### `aria-selected`
+
+Indicates whether a selectable element is currently selected or not.
+
+| Type    |
+| ------- |
+| boolean |
+
+### `onAccessibilityAction`
+
+Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.
+
+See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `accessibilityValue`
+
+Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
+
+See the [Accessibility guide](accessibility.md#accessibilityvalue-ios-android) for more information.
+
+| Type                                                            |
+| --------------------------------------------------------------- |
+| object: `{min: number, max: number, now: number, text: string}` |
+
+---
+
+### `aria-valuemax`
+
+Represents the maximum value for range-based components, such as sliders and progress bars. Has precedence over the `max` value in the `accessibilityValue` prop.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `aria-valuemin`
+
+Represents the minimum value for range-based components, such as sliders and progress bars. Has precedence over the `min` value in the `accessibilityValue` prop.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `aria-valuenow`
+
+Represents the current value for range-based components, such as sliders and progress bars. Has precedence over the `now` value in the `accessibilityValue` prop.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `aria-valuetext`
+
+Represents the textual description of the component. Has precedence over the `text` value in the `accessibilityValue` prop.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `delayLongPress`
+
+Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `delayPressIn`
+
+Duration (in milliseconds), from the start of the touch, before `onPressIn` is called.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `delayPressOut`
+
+Duration (in milliseconds), from the release of the touch, before `onPressOut` is called.
+
+| Type   |
+| ------ |
+| number |
+
+---
+
+### `disabled`
+
+If true, disable all interactions for this component.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `hitSlop`
+
+This defines how far your touch can start away from the button. This is added to `pressRetentionOffset` when moving off of the button.
+
+:::note
+The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
+:::
+
+| Type                   |
+| ---------------------- |
+| [Rect](rect) or number |
+
+### `id`
+
+Used to locate this view from native code. Has precedence over `nativeID` prop.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `onBlur`
+
+Invoked when the item loses focus.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
+
+---
+
+### `onFocus`
+
+Invoked when the item receives focus.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [TargetEvent](targetevent)}) => void` |
+
+---
+
+### `onLayout`
+
+Invoked on mount and on layout changes.
+
+| Type                                                     |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
+
+---
+
+### `onLongPress`
+
+Called if the time after `onPressIn` lasts longer than 370 milliseconds. This time period can be customized with [`delayLongPress`](#delaylongpress).
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onPress`
+
+Called when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock). The first function argument is an event in form of [PressEvent](pressevent).
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onPressIn`
+
+Called as soon as the touchable element is pressed and invoked even before onPress. This can be useful when making network requests. The first function argument is an event in form of [PressEvent](pressevent).
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `onPressOut`
+
+Called as soon as the touch is released even before onPress. The first function argument is an event in form of [PressEvent](pressevent).
+
+| Type     |
+| -------- |
+| function |
+
+---
+
+### `pressRetentionOffset`
+
+When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations.
+
+| Type                   |
+| ---------------------- |
+| [Rect](rect) or number |
+
+---
+
+### `nativeID`
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `testID`
+
+Used to locate this view in end-to-end tests.
+
+| Type   |
+| ------ |
+| string |
+
+---
+
+### `touchSoundDisabled` <div className="label android">Android</div>
+
+If true, doesn't play a system sound on touch.
+
+| Type    |
+| ------- |
+| Boolean |
diff --git a/website/versioned_docs/version-0.86/transforms.md b/website/versioned_docs/version-0.86/transforms.md
index 92a75671719..59a2147ebfc 100644
--- a/website/versioned_docs/version-0.86/transforms.md
+++ b/website/versioned_docs/version-0.86/transforms.md
@@ -1,399 +1,398 @@
----
-id: transforms
-title: Transforms
----
-
-Transforms are style properties that will help you modify the appearance and position of your components using 2D or 3D transformations. However, once you apply transforms, the layouts remain the same around the transformed component hence it might overlap with the nearby components. You can apply margin to the transformed component, the nearby components or padding to the container to prevent such overlaps.
-
-## Example
-
-```SnackPlayer name=Transforms%20Example
-import React from 'react';
-import {ScrollView, StyleSheet, Text, View} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => (
-  <SafeAreaProvider>
-    <SafeAreaView style={styles.container}>
-      <ScrollView contentContainerStyle={styles.scrollContentContainer}>
-        <View style={styles.box}>
-          <Text style={styles.text}>Original Object</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{scale: 2}],
-            },
-          ]}>
-          <Text style={styles.text}>Scale by 2</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{scaleX: 2}],
-            },
-          ]}>
-          <Text style={styles.text}>ScaleX by 2</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{scaleY: 2}],
-            },
-          ]}>
-          <Text style={styles.text}>ScaleY by 2</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{rotate: '45deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>Rotate by 45 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{rotateX: '45deg'}, {rotateZ: '45deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>Rotate X&Z by 45 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{rotateY: '45deg'}, {rotateZ: '45deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>Rotate Y&Z by 45 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{skewX: '45deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>SkewX by 45 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{skewY: '45deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>SkewY by 45 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{skewX: '30deg'}, {skewY: '30deg'}],
-            },
-          ]}>
-          <Text style={styles.text}>Skew X&Y by 30 deg</Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{translateX: -50}],
-            },
-          ]}>
-          <Text style={styles.text}>TranslateX by -50 </Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [{translateY: 50}],
-            },
-          ]}>
-          <Text style={styles.text}>TranslateY by 50 </Text>
-        </View>
-
-        <View
-          style={[
-            styles.box,
-            {
-              transform: [
-                {
-                  matrix: [1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
-                },
-              ],
-            },
-          ]}>
-          <Text style={styles.text}>Matrix Transform</Text>
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  </SafeAreaProvider>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  scrollContentContainer: {
-    alignItems: 'center',
-    paddingBottom: 60,
-  },
-  box: {
-    height: 100,
-    width: 100,
-    borderRadius: 5,
-    marginVertical: 40,
-    backgroundColor: '#61dafb',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  text: {
-    fontSize: 14,
-    fontWeight: 'bold',
-    margin: 8,
-    color: '#000',
-    textAlign: 'center',
-  },
-});
-
-export default App;
-```
-
----
-
-# Reference
-
-## Transform
-
-`transform` accepts an array of transformation objects or space-separated string values. Each object specifies the property that will be transformed as the key, and the value to use in the transformation. Objects should not be combined. Use a single key/value pair per object.
-
-The rotate transformations require a string so that the transform may be expressed in degrees (deg) or radians (rad). For example:
-
-```js
-{
-  transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}],
-}
-```
-
-The same could also be achieved using a space-separated string:
-
-```js
-{
-  transform: 'rotateX(45deg) rotateZ(0.785398rad)',
-}
-```
-
-The skew transformations require a string so that the transform may be expressed in degrees (deg). For example:
-
-```js
-{
-  transform: [{skewX: '45deg'}],
-}
-```
-
-### Matrix Transform
-
-The `matrix` transform accepts a 4x4 transformation matrix as an array of 16 numbers. This allows you to apply complex transformations that combine translation, rotation, scaling, and skewing in a single operation.
-
-The matrix is specified in column-major order:
-
-```js
-{
-  transform: [
-    {
-      matrix: [
-        scaleX,
-        skewY,
-        0,
-        0,
-        skewX,
-        scaleY,
-        0,
-        0,
-        0,
-        0,
-        1,
-        0,
-        translateX,
-        translateY,
-        0,
-        1,
-      ],
-    },
-  ];
-}
-```
-
-For example, to apply a combination of scale and skew:
-
-```js
-{
-  transform: [
-    {
-      matrix: [
-        1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
-      ],
-    },
-  ];
-}
-```
-
-:::note
-Matrix transforms are useful when you need to apply pre-calculated transformation matrices, such as those from animation libraries or when building UI editor applications. For basic transformations, it's recommended to use the individual transform properties (scale, rotate, translate, etc.) as they are more readable.
-:::
-
-| Type                                                                                                                                                                                                                                                                                                          | Required |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
-| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number}`, `{translateY: number}`, `{skewX: string}`, `{skewY: string}` or string | No       |
-
----
-
-### 🗑️ `decomposedMatrix`, `rotation`, `scaleX`, `scaleY`, `transformMatrix`, `translateX`, `translateY`
-
-:::warning Deprecated
-Use the [`transform`](transforms#transform) prop instead.
-:::
-
-## Transform Origin
-
-The `transformOrigin` property sets the origin for a view's transformations. The transform origin is the point around which a transformation is applied. By default, the origin of a transform is `center`.
-
-# Example
-
-```SnackPlayer name=TransformOrigin%20Example
-import React, {useEffect, useRef} from 'react';
-import {Animated, View, StyleSheet, Easing} from 'react-native';
-import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-
-const App = () => {
-  const rotateAnim = useRef(new Animated.Value(0)).current;
-
-  useEffect(() => {
-    Animated.loop(
-      Animated.timing(rotateAnim, {
-        toValue: 1,
-        duration: 5000,
-        easing: Easing.linear,
-        useNativeDriver: true,
-      }),
-    ).start();
-  }, [rotateAnim]);
-
-  const spin = rotateAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '360deg'],
-  });
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.transformOriginWrapper}>
-          <Animated.View
-            style={[
-              styles.transformOriginView,
-              {
-                transform: [{rotate: spin}],
-              },
-            ]}
-          />
-        </View>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  transformOriginWrapper: {
-    borderWidth: 1,
-    borderColor: 'rgba(0, 0, 0, 0.5)',
-  },
-  transformOriginView: {
-    backgroundColor: 'pink',
-    width: 100,
-    height: 100,
-    transformOrigin: 'top',
-  },
-});
-
-export default App;
-```
-
-### Values
-
-Transform origin supports `px`, `percentage` and keywords `top`, `left`, `right`, `bottom`, `center` values.
-
-The `transformOrigin` property may be specified using one, two, or three values, where each value represents an offset.
-
-#### One-value syntax:
-
-- The value must be a `px`, a `percentage`, or one of the keywords `left`, `center`, `right`, `top`, and `bottom`.
-
-```js
-{
-  transformOrigin: '20px',
-  transformOrigin: 'bottom',
-}
-```
-
-#### Two-value syntax:
-
-- First value (x-offset) must be a `px`, a `percentage`, or one of the keywords `left`, `center`, and `right`.
-- The second value (y-offset) must be a `px`, a `percentage`, or one of the keywords `top`, `center`, and `bottom`.
-
-```js
-{
-  transformOrigin: '10px 2px',
-  transformOrigin: 'left top',
-  transformOrigin: 'top right',
-}
-```
-
-#### Three-value syntax:
-
-- The first two values are the same as for the two-value syntax.
-- The third value (z-offset) must be a `px`. It always represents the Z offset.
-
-```js
-{
-  transformOrigin: '2px 30% 10px',
-  transformOrigin: 'right bottom 20px',
-}
-```
-
-#### Array syntax
-
-`transformOrigin` also supports an array syntax. It makes it convenient to use it with Animated APIs. It also avoids string parsing, so should be more efficient.
-
-```js
-{
-  // Using numeric values
-  transformOrigin: [10, 30, 40],
-  // Mixing numeric and percentage values
-  transformOrigin: [10, '20%', 0],
-}
-```
-
-You may refer to MDN's guide on [Transform origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin) for additional information.
+---
+id: transforms
+title: Transforms
+---
+
+Transforms are style properties that will help you modify the appearance and position of your components using 2D or 3D transformations. However, once you apply transforms, the layouts remain the same around the transformed component hence it might overlap with the nearby components. You can apply margin to the transformed component, the nearby components or padding to the container to prevent such overlaps.
+
+## Example
+
+```SnackPlayer name=Transforms%20Example
+import {ScrollView, StyleSheet, Text, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => (
+  <SafeAreaProvider>
+    <SafeAreaView style={styles.container}>
+      <ScrollView contentContainerStyle={styles.scrollContentContainer}>
+        <View style={styles.box}>
+          <Text style={styles.text}>Original Object</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{scale: 2}],
+            },
+          ]}>
+          <Text style={styles.text}>Scale by 2</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{scaleX: 2}],
+            },
+          ]}>
+          <Text style={styles.text}>ScaleX by 2</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{scaleY: 2}],
+            },
+          ]}>
+          <Text style={styles.text}>ScaleY by 2</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{rotate: '45deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>Rotate by 45 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{rotateX: '45deg'}, {rotateZ: '45deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>Rotate X&Z by 45 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{rotateY: '45deg'}, {rotateZ: '45deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>Rotate Y&Z by 45 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{skewX: '45deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>SkewX by 45 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{skewY: '45deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>SkewY by 45 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{skewX: '30deg'}, {skewY: '30deg'}],
+            },
+          ]}>
+          <Text style={styles.text}>Skew X&Y by 30 deg</Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{translateX: -50}],
+            },
+          ]}>
+          <Text style={styles.text}>TranslateX by -50 </Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [{translateY: 50}],
+            },
+          ]}>
+          <Text style={styles.text}>TranslateY by 50 </Text>
+        </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [
+                {
+                  matrix: [1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
+                },
+              ],
+            },
+          ]}>
+          <Text style={styles.text}>Matrix Transform</Text>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  </SafeAreaProvider>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollContentContainer: {
+    alignItems: 'center',
+    paddingBottom: 60,
+  },
+  box: {
+    height: 100,
+    width: 100,
+    borderRadius: 5,
+    marginVertical: 40,
+    backgroundColor: '#61dafb',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    margin: 8,
+    color: '#000',
+    textAlign: 'center',
+  },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Transform
+
+`transform` accepts an array of transformation objects or space-separated string values. Each object specifies the property that will be transformed as the key, and the value to use in the transformation. Objects should not be combined. Use a single key/value pair per object.
+
+The rotate transformations require a string so that the transform may be expressed in degrees (deg) or radians (rad). For example:
+
+```js
+{
+  transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}],
+}
+```
+
+The same could also be achieved using a space-separated string:
+
+```js
+{
+  transform: 'rotateX(45deg) rotateZ(0.785398rad)',
+}
+```
+
+The skew transformations require a string so that the transform may be expressed in degrees (deg). For example:
+
+```js
+{
+  transform: [{skewX: '45deg'}],
+}
+```
+
+### Matrix Transform
+
+The `matrix` transform accepts a 4x4 transformation matrix as an array of 16 numbers. This allows you to apply complex transformations that combine translation, rotation, scaling, and skewing in a single operation.
+
+The matrix is specified in column-major order:
+
+```js
+{
+  transform: [
+    {
+      matrix: [
+        scaleX,
+        skewY,
+        0,
+        0,
+        skewX,
+        scaleY,
+        0,
+        0,
+        0,
+        0,
+        1,
+        0,
+        translateX,
+        translateY,
+        0,
+        1,
+      ],
+    },
+  ];
+}
+```
+
+For example, to apply a combination of scale and skew:
+
+```js
+{
+  transform: [
+    {
+      matrix: [
+        1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
+      ],
+    },
+  ];
+}
+```
+
+:::note
+Matrix transforms are useful when you need to apply pre-calculated transformation matrices, such as those from animation libraries or when building UI editor applications. For basic transformations, it's recommended to use the individual transform properties (scale, rotate, translate, etc.) as they are more readable.
+:::
+
+| Type                                                                                                                                                                                                                                                                                                          | Required |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
+| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number}`, `{translateY: number}`, `{skewX: string}`, `{skewY: string}` or string | No       |
+
+---
+
+### 🗑️ `decomposedMatrix`, `rotation`, `scaleX`, `scaleY`, `transformMatrix`, `translateX`, `translateY`
+
+:::warning Deprecated
+Use the [`transform`](transforms#transform) prop instead.
+:::
+
+## Transform Origin
+
+The `transformOrigin` property sets the origin for a view's transformations. The transform origin is the point around which a transformation is applied. By default, the origin of a transform is `center`.
+
+# Example
+
+```SnackPlayer name=TransformOrigin%20Example
+import {useEffect, useRef} from 'react';
+import {Animated, View, StyleSheet, Easing} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+  const rotateAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.timing(rotateAnim, {
+        toValue: 1,
+        duration: 5000,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      }),
+    ).start();
+  }, [rotateAnim]);
+
+  const spin = rotateAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.transformOriginWrapper}>
+          <Animated.View
+            style={[
+              styles.transformOriginView,
+              {
+                transform: [{rotate: spin}],
+              },
+            ]}
+          />
+        </View>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  transformOriginWrapper: {
+    borderWidth: 1,
+    borderColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  transformOriginView: {
+    backgroundColor: 'pink',
+    width: 100,
+    height: 100,
+    transformOrigin: 'top',
+  },
+});
+
+export default App;
+```
+
+### Values
+
+Transform origin supports `px`, `percentage` and keywords `top`, `left`, `right`, `bottom`, `center` values.
+
+The `transformOrigin` property may be specified using one, two, or three values, where each value represents an offset.
+
+#### One-value syntax:
+
+- The value must be a `px`, a `percentage`, or one of the keywords `left`, `center`, `right`, `top`, and `bottom`.
+
+```js
+{
+  transformOrigin: '20px',
+  transformOrigin: 'bottom',
+}
+```
+
+#### Two-value syntax:
+
+- First value (x-offset) must be a `px`, a `percentage`, or one of the keywords `left`, `center`, and `right`.
+- The second value (y-offset) must be a `px`, a `percentage`, or one of the keywords `top`, `center`, and `bottom`.
+
+```js
+{
+  transformOrigin: '10px 2px',
+  transformOrigin: 'left top',
+  transformOrigin: 'top right',
+}
+```
+
+#### Three-value syntax:
+
+- The first two values are the same as for the two-value syntax.
+- The third value (z-offset) must be a `px`. It always represents the Z offset.
+
+```js
+{
+  transformOrigin: '2px 30% 10px',
+  transformOrigin: 'right bottom 20px',
+}
+```
+
+#### Array syntax
+
+`transformOrigin` also supports an array syntax. It makes it convenient to use it with Animated APIs. It also avoids string parsing, so should be more efficient.
+
+```js
+{
+  // Using numeric values
+  transformOrigin: [10, 30, 40],
+  // Mixing numeric and percentage values
+  transformOrigin: [10, '20%', 0],
+}
+```
+
+You may refer to MDN's guide on [Transform origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin) for additional information.
diff --git a/website/versioned_docs/version-0.86/troubleshooting.md b/website/versioned_docs/version-0.86/troubleshooting.md
index 811302be504..540f38b984f 100644
--- a/website/versioned_docs/version-0.86/troubleshooting.md
+++ b/website/versioned_docs/version-0.86/troubleshooting.md
@@ -91,7 +91,6 @@ To revert the `User Search Header Paths` and `Header Search Paths` build setting
 React Native implements a polyfill for WebSockets. These [polyfills](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Core/InitializeCore.js) are initialized as part of the react-native module that you include in your application through `import React from 'react'`. If you load another module that requires WebSockets, such as [Firebase](https://github.com/facebook/react-native/issues/3645), be sure to load/require it after react-native:
 
 ```
-import React from 'react';
 import Firebase from 'firebase';
 ```
 
diff --git a/website/versioned_docs/version-0.86/turbo-native-modules.md b/website/versioned_docs/version-0.86/turbo-native-modules.md
index eeef8624578..1d41bd06ce9 100644
--- a/website/versioned_docs/version-0.86/turbo-native-modules.md
+++ b/website/versioned_docs/version-0.86/turbo-native-modules.md
@@ -1,260 +1,260 @@
----
-id: turbo-native-modules-introduction
-title: 'Native Modules: Introduction'
----
-
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import constants from '@site/core/TabsConstants';
-import CodeBlock from '@theme/CodeBlock';
-import {getCurrentVersion} from '@site/src/getCurrentVersion';
-import {TurboNativeModulesAndroid, TurboNativeModulesIOS} from './\_turbo-native-modules-components';
-
-# Native Modules
-
-Your React Native application code may need to interact with native platform APIs that aren't provided by React Native or an existing library. You can write the integration code yourself using a **Turbo Native Module**. This guide will show you how to write one.
-
-The basic steps are:
-
-1. **define a typed JavaScript specification** using one of the most popular JavaScript type annotation languages: Flow or TypeScript;
-2. **configure your dependency management system to run Codegen**, which converts the specification into native language interfaces;
-3. **write your application code** using your specification; and
-4. **write your native platform code using the generated interfaces** to write and hook your native code into the React Native runtime environment.
-
-Lets work through each of these steps by building an example Turbo Native Module. The rest of this guide assume that you have created your application running the command:
-
-<CodeBlock language="bash" title="shell">
-{`npx @react-native-community/cli@latest init TurboModuleExample --version ${getCurrentVersion()}`}
-</CodeBlock>
-
-## Native Persistent Storage
-
-This guide will show you how to write an implementation of the [Web Storage API](https://html.spec.whatwg.org/multipage/webstorage.html#dom-localstorage-dev): `localStorage`. The API is relatable to a React developer who might be writing application code on your project.
-
-To make this work on mobile, we need to use Android and iOS APIs:
-
-- Android: [SharedPreferences](https://developer.android.com/reference/android/content/SharedPreferences), and
-- iOS: [NSUserDefaults](https://developer.apple.com/documentation/foundation/nsuserdefaults).
-
-### 1. Declare Typed Specification
-
-React Native provides a tool called [Codegen](/docs/the-new-architecture/what-is-codegen), which takes a specification written in TypeScript or Flow and generates platform specific code for Android and iOS. The specification declares the methods and data types that will pass back and forth between your native code and the React Native JavaScript runtime. A Turbo Native Module is both your specification, the native code you write, and the Codegen interfaces generated from your specification.
-
-To create a specs file:
-
-1. Inside the root folder of your app, create a new folder called `specs`.
-2. Create a new file called `NativeLocalStorage.ts`.
-
-:::info
-You can see all of the types you can use in your specification and the native types that are generated in the [Appendix](/docs/appendix) documentation.
-:::
-
-:::info
-If you want to change the name of your module and the related specs file, make sure to always use 'Native' as prefix (e.g. `NativeStorage` or `NativeUsersDefault`).
-:::
-
-Here is an implementation of the `localStorage` specification:
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultJavaScriptSpecLanguage} values={constants.javaScriptSpecLanguages}>
-<TabItem value="typescript">
-
-```typescript title="specs/NativeLocalStorage.ts"
-import type {TurboModule} from 'react-native';
-import {TurboModuleRegistry} from 'react-native';
-
-export interface Spec extends TurboModule {
-  setItem(value: string, key: string): void;
-  getItem(key: string): string | null;
-  removeItem(key: string): void;
-  clear(): void;
-}
-
-export default TurboModuleRegistry.getEnforcing<Spec>(
-  'NativeLocalStorage',
-);
-```
-
-</TabItem>
-<TabItem value="flow">
-
-```flow title="NativeLocalStorage.js"
-import type {TurboModule} from 'react-native';
-import {TurboModule, TurboModuleRegistry} from 'react-native';
-
-export interface Spec extends TurboModule {
-  setItem(value: string, key: string): void;
-  getItem(key: string): ?string;
-  removeItem(key: string): void;
-  clear(): void;
-}
-```
-
-</TabItem>
-</Tabs>
-
-### 2. Configure Codegen to run
-
-The specification is used by the React Native Codegen tools to generate platform specific interfaces and boilerplate for us. To do this, Codegen needs to know where to find our specification and what to do with it. Update your `package.json` to include:
-
-```json title="package.json"
-     "start": "react-native start",
-     "test": "jest"
-   },
-   // highlight-add-start
-   "codegenConfig": {
-     "name": "NativeLocalStorageSpec",
-     "type": "modules",
-     "jsSrcsDir": "specs",
-     "android": {
-       "javaPackageName": "com.nativelocalstorage"
-     }
-   },
-   // highlight-add-end
-   "dependencies": {
-```
-
-With everything wired up for Codegen, we need to prepare our native code to hook into our generated code.
-
-<Tabs groupId="platforms" queryString defaultValue={constants.defaultPlatform}>
-<TabItem value="android" label="Android">
-Codegen is executed through the `generateCodegenArtifactsFromSchema` Gradle task:
-
-```bash
-cd android
-./gradlew generateCodegenArtifactsFromSchema
-
-BUILD SUCCESSFUL in 837ms
-14 actionable tasks: 3 executed, 11 up-to-date
-```
-
-This is automatically run when you build your Android application.
-</TabItem>
-<TabItem value="ios" label="iOS">
-Codegen is run as part of the script phases that's automatically added to the project generated by CocoaPods.
-
-```bash
-cd ios
-bundle install
-bundle exec pod install
-```
-
-The output will look like this:
-
-```shell
-...
-Framework build type is static library
-[Codegen] Adding script_phases to ReactCodegen.
-[Codegen] Generating ./build/generated/ios/ReactCodegen.podspec.json
-[Codegen] Analyzing /Users/me/src/TurboModuleExample/package.json
-[Codegen] Searching for codegen-enabled libraries in the app.
-[Codegen] Found TurboModuleExample
-[Codegen] Searching for codegen-enabled libraries in the project dependencies.
-[Codegen] Found react-native
-...
-```
-
-</TabItem>
-</Tabs>
-
-### 3. Write Application Code using the Turbo Native Module
-
-Using `NativeLocalStorage`, here’s a modified `App.tsx` that includes some text we want persisted, an input field and some buttons to update this value.
-
-The `TurboModuleRegistry` supports 2 modes of retrieving a Turbo Native Module:
-
-- `get<T>(name: string): T | null` which will return `null` if the Turbo Native Module is unavailable.
-- `getEnforcing<T>(name: string): T` which will throw an exception if the Turbo Native Module is unavailable. This assumes the module is always available.
-
-```tsx title="App.tsx"
-import React from 'react';
-import {
-  SafeAreaView,
-  StyleSheet,
-  Text,
-  TextInput,
-  Button,
-} from 'react-native';
-
-import NativeLocalStorage from './specs/NativeLocalStorage';
-
-const EMPTY = '<empty>';
-
-function App(): React.JSX.Element {
-  const [value, setValue] = React.useState<string | null>(null);
-
-  const [editingValue, setEditingValue] = React.useState<
-    string | null
-  >(null);
-
-  React.useEffect(() => {
-    const storedValue = NativeLocalStorage?.getItem('myKey');
-    setValue(storedValue ?? '');
-  }, []);
-
-  function saveValue() {
-    NativeLocalStorage?.setItem(editingValue ?? EMPTY, 'myKey');
-    setValue(editingValue);
-  }
-
-  function clearAll() {
-    NativeLocalStorage?.clear();
-    setValue('');
-  }
-
-  function deleteValue() {
-    NativeLocalStorage?.removeItem('myKey');
-    setValue('');
-  }
-
-  return (
-    <SafeAreaView style={{flex: 1}}>
-      <Text style={styles.text}>
-        Current stored value is: {value ?? 'No Value'}
-      </Text>
-      <TextInput
-        placeholder="Enter the text you want to store"
-        style={styles.textInput}
-        onChangeText={setEditingValue}
-      />
-      <Button title="Save" onPress={saveValue} />
-      <Button title="Delete" onPress={deleteValue} />
-      <Button title="Clear" onPress={clearAll} />
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  text: {
-    margin: 10,
-    fontSize: 20,
-  },
-  textInput: {
-    margin: 10,
-    height: 40,
-    borderColor: 'black',
-    borderWidth: 1,
-    paddingLeft: 5,
-    paddingRight: 5,
-    borderRadius: 5,
-  },
-});
-
-export default App;
-```
-
-### 4. Write your Native Platform code
-
-With everything prepared, we're going to start writing native platform code. We do this in 2 parts:
-
-:::note
-This guide shows you how to create a Turbo Native Module that only works with the New Architecture. If you need to support both the New Architecture and the Legacy Architecture, please refer to our [backwards compatibility guide](https://github.com/reactwg/react-native-new-architecture/blob/main/docs/backwards-compat.md).
-:::
-
-<Tabs groupId="platforms" queryString defaultValue={constants.defaultPlatform}>
-    <TabItem value="android" label="Android">
-        <TurboNativeModulesAndroid />
-    </TabItem>
-    <TabItem value="ios" label="iOS">
-        <TurboNativeModulesIOS/>
-    </TabItem>
-</Tabs>
+---
+id: turbo-native-modules-introduction
+title: 'Native Modules: Introduction'
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import constants from '@site/core/TabsConstants';
+import CodeBlock from '@theme/CodeBlock';
+import {getCurrentVersion} from '@site/src/getCurrentVersion';
+import {TurboNativeModulesAndroid, TurboNativeModulesIOS} from './\_turbo-native-modules-components';
+
+# Native Modules
+
+Your React Native application code may need to interact with native platform APIs that aren't provided by React Native or an existing library. You can write the integration code yourself using a **Turbo Native Module**. This guide will show you how to write one.
+
+The basic steps are:
+
+1. **define a typed JavaScript specification** using one of the most popular JavaScript type annotation languages: Flow or TypeScript;
+2. **configure your dependency management system to run Codegen**, which converts the specification into native language interfaces;
+3. **write your application code** using your specification; and
+4. **write your native platform code using the generated interfaces** to write and hook your native code into the React Native runtime environment.
+
+Lets work through each of these steps by building an example Turbo Native Module. The rest of this guide assume that you have created your application running the command:
+
+<CodeBlock language="bash" title="shell">
+{`npx @react-native-community/cli@latest init TurboModuleExample --version ${getCurrentVersion()}`}
+</CodeBlock>
+
+## Native Persistent Storage
+
+This guide will show you how to write an implementation of the [Web Storage API](https://html.spec.whatwg.org/multipage/webstorage.html#dom-localstorage-dev): `localStorage`. The API is relatable to a React developer who might be writing application code on your project.
+
+To make this work on mobile, we need to use Android and iOS APIs:
+
+- Android: [SharedPreferences](https://developer.android.com/reference/android/content/SharedPreferences), and
+- iOS: [NSUserDefaults](https://developer.apple.com/documentation/foundation/nsuserdefaults).
+
+### 1. Declare Typed Specification
+
+React Native provides a tool called [Codegen](/docs/the-new-architecture/what-is-codegen), which takes a specification written in TypeScript or Flow and generates platform specific code for Android and iOS. The specification declares the methods and data types that will pass back and forth between your native code and the React Native JavaScript runtime. A Turbo Native Module is both your specification, the native code you write, and the Codegen interfaces generated from your specification.
+
+To create a specs file:
+
+1. Inside the root folder of your app, create a new folder called `specs`.
+2. Create a new file called `NativeLocalStorage.ts`.
+
+:::info
+You can see all of the types you can use in your specification and the native types that are generated in the [Appendix](/docs/appendix) documentation.
+:::
+
+:::info
+If you want to change the name of your module and the related specs file, make sure to always use 'Native' as prefix (e.g. `NativeStorage` or `NativeUsersDefault`).
+:::
+
+Here is an implementation of the `localStorage` specification:
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultJavaScriptSpecLanguage} values={constants.javaScriptSpecLanguages}>
+<TabItem value="typescript">
+
+```typescript title="specs/NativeLocalStorage.ts"
+import type {TurboModule} from 'react-native';
+import {TurboModuleRegistry} from 'react-native';
+
+export interface Spec extends TurboModule {
+  setItem(value: string, key: string): void;
+  getItem(key: string): string | null;
+  removeItem(key: string): void;
+  clear(): void;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>(
+  'NativeLocalStorage',
+);
+```
+
+</TabItem>
+<TabItem value="flow">
+
+```flow title="NativeLocalStorage.js"
+import type {TurboModule} from 'react-native';
+import {TurboModule, TurboModuleRegistry} from 'react-native';
+
+export interface Spec extends TurboModule {
+  setItem(value: string, key: string): void;
+  getItem(key: string): ?string;
+  removeItem(key: string): void;
+  clear(): void;
+}
+```
+
+</TabItem>
+</Tabs>
+
+### 2. Configure Codegen to run
+
+The specification is used by the React Native Codegen tools to generate platform specific interfaces and boilerplate for us. To do this, Codegen needs to know where to find our specification and what to do with it. Update your `package.json` to include:
+
+```json title="package.json"
+     "start": "react-native start",
+     "test": "jest"
+   },
+   // highlight-add-start
+   "codegenConfig": {
+     "name": "NativeLocalStorageSpec",
+     "type": "modules",
+     "jsSrcsDir": "specs",
+     "android": {
+       "javaPackageName": "com.nativelocalstorage"
+     }
+   },
+   // highlight-add-end
+   "dependencies": {
+```
+
+With everything wired up for Codegen, we need to prepare our native code to hook into our generated code.
+
+<Tabs groupId="platforms" queryString defaultValue={constants.defaultPlatform}>
+<TabItem value="android" label="Android">
+Codegen is executed through the `generateCodegenArtifactsFromSchema` Gradle task:
+
+```bash
+cd android
+./gradlew generateCodegenArtifactsFromSchema
+
+BUILD SUCCESSFUL in 837ms
+14 actionable tasks: 3 executed, 11 up-to-date
+```
+
+This is automatically run when you build your Android application.
+</TabItem>
+<TabItem value="ios" label="iOS">
+Codegen is run as part of the script phases that's automatically added to the project generated by CocoaPods.
+
+```bash
+cd ios
+bundle install
+bundle exec pod install
+```
+
+The output will look like this:
+
+```shell
+...
+Framework build type is static library
+[Codegen] Adding script_phases to ReactCodegen.
+[Codegen] Generating ./build/generated/ios/ReactCodegen.podspec.json
+[Codegen] Analyzing /Users/me/src/TurboModuleExample/package.json
+[Codegen] Searching for codegen-enabled libraries in the app.
+[Codegen] Found TurboModuleExample
+[Codegen] Searching for codegen-enabled libraries in the project dependencies.
+[Codegen] Found react-native
+...
+```
+
+</TabItem>
+</Tabs>
+
+### 3. Write Application Code using the Turbo Native Module
+
+Using `NativeLocalStorage`, here’s a modified `App.tsx` that includes some text we want persisted, an input field and some buttons to update this value.
+
+The `TurboModuleRegistry` supports 2 modes of retrieving a Turbo Native Module:
+
+- `get<T>(name: string): T | null` which will return `null` if the Turbo Native Module is unavailable.
+- `getEnforcing<T>(name: string): T` which will throw an exception if the Turbo Native Module is unavailable. This assumes the module is always available.
+
+```tsx title="App.tsx"
+import {useEffect, useState, type JSX} from 'react';
+import {
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  TextInput,
+  Button,
+} from 'react-native';
+
+import NativeLocalStorage from './specs/NativeLocalStorage';
+
+const EMPTY = '<empty>';
+
+function App(): JSX.Element {
+  const [value, setValue] = useState<string | null>(null);
+
+  const [editingValue, setEditingValue] = useState<string | null>(
+    null,
+  );
+
+  useEffect(() => {
+    const storedValue = NativeLocalStorage?.getItem('myKey');
+    setValue(storedValue ?? '');
+  }, []);
+
+  function saveValue() {
+    NativeLocalStorage?.setItem(editingValue ?? EMPTY, 'myKey');
+    setValue(editingValue);
+  }
+
+  function clearAll() {
+    NativeLocalStorage?.clear();
+    setValue('');
+  }
+
+  function deleteValue() {
+    NativeLocalStorage?.removeItem('myKey');
+    setValue('');
+  }
+
+  return (
+    <SafeAreaView style={{flex: 1}}>
+      <Text style={styles.text}>
+        Current stored value is: {value ?? 'No Value'}
+      </Text>
+      <TextInput
+        placeholder="Enter the text you want to store"
+        style={styles.textInput}
+        onChangeText={setEditingValue}
+      />
+      <Button title="Save" onPress={saveValue} />
+      <Button title="Delete" onPress={deleteValue} />
+      <Button title="Clear" onPress={clearAll} />
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  text: {
+    margin: 10,
+    fontSize: 20,
+  },
+  textInput: {
+    margin: 10,
+    height: 40,
+    borderColor: 'black',
+    borderWidth: 1,
+    paddingLeft: 5,
+    paddingRight: 5,
+    borderRadius: 5,
+  },
+});
+
+export default App;
+```
+
+### 4. Write your Native Platform code
+
+With everything prepared, we're going to start writing native platform code. We do this in 2 parts:
+
+:::note
+This guide shows you how to create a Turbo Native Module that only works with the New Architecture. If you need to support both the New Architecture and the Legacy Architecture, please refer to our [backwards compatibility guide](https://github.com/reactwg/react-native-new-architecture/blob/main/docs/backwards-compat.md).
+:::
+
+<Tabs groupId="platforms" queryString defaultValue={constants.defaultPlatform}>
+    <TabItem value="android" label="Android">
+        <TurboNativeModulesAndroid />
+    </TabItem>
+    <TabItem value="ios" label="iOS">
+        <TurboNativeModulesIOS/>
+    </TabItem>
+</Tabs>
diff --git a/website/versioned_docs/version-0.86/tutorial.md b/website/versioned_docs/version-0.86/tutorial.md
index d1a92919cd7..cbd5fd11bef 100644
--- a/website/versioned_docs/version-0.86/tutorial.md
+++ b/website/versioned_docs/version-0.86/tutorial.md
@@ -1,270 +1,267 @@
----
-id: tutorial
-title: Learn the Basics
----
-
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
-React Native is like React, but it uses native components instead of web components as building blocks. So to understand the basic structure of a React Native app, you need to understand some of the basic React concepts, like JSX, components, `state`, and `props`. If you already know React, you still need to learn some React Native specific stuff, like the native components. This tutorial is aimed at all audiences, whether you have React experience or not.
-
-Let's do this thing.
-
-## Hello World
-
-In accordance with the ancient traditions of our people, we must first build an app that does nothing except say "Hello, world!". Here it is:
-
-```SnackPlayer name=Hello%20World
-import React from 'react';
-import {Text, View} from 'react-native';
-
-const HelloWorldApp = () => {
-  return (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}>
-      <Text>Hello, world!</Text>
-    </View>
-  );
-};
-export default HelloWorldApp;
-```
-
-If you are feeling curious, you can play around with sample code directly in the web simulators. You can also paste it into your `App.js` file to create a real app on your local machine.
-
-## What's going on here?
-
-1. First of all, we need to import `React` to be able to use `JSX`, which will then be transformed to the native components of each platform.
-2. On line 2, we import the `Text` and `View` components from `react-native`
-
-Then we define the `HelloWorldApp` function, which is a [function component](https://react.dev/reference/react/Component) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child.
-
-The `Text` component allows us to render a text, while the `View` component renders a container. This container has several styles applied, let's analyze what each one is doing.
-
-The first style that we find is `flex: 1`, the [`flex`](layout-props#flex) prop will define how your items are going to "fill" over the available space along your main axis. Since we only have one container, it will take all the available space of the parent component. In this case, it is the only component, so it will take all the available screen space.
-
-The following style is [`justifyContent`](layout-props#justifycontent): "center". This aligns children of a container in the center of the container's main axis. Finally, we have [`alignItems`](layout-props#alignitems): "center", which aligns children of a container in the center of the container's cross axis.
-
-Some of the things in here might not look like JavaScript to you. Don't panic. _This is the future_.
-
-First of all, ES2015 (also known as ES6) is a set of improvements to JavaScript that is now part of the official standard, but not yet supported by all browsers, so often it isn't used yet in web development. React Native ships with ES2015 support, so you can use this stuff without worrying about compatibility. `import`, `export`, `const` and `from` in the example above are all ES2015 features. If you aren't familiar with ES2015, you can probably pick it up by reading through sample code like this tutorial has. If you want, [this page](https://babeljs.io/learn-es2015/) has a good overview of ES2015 features.
-
-The other unusual thing in this code example is `<View><Text>Hello world!</Text></View>`. This is JSX - a syntax for embedding XML within JavaScript. Many frameworks use a specialized templating language which lets you embed code inside markup language. In React, this is reversed. JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like `<div>` or `<span>`, you use React components. In this case, `<Text>` is a [Core Component](intro-react-native-components) that displays some text and `View` is like the `<div>` or `<span>`.
-
-## Components
-
-So this code is defining `HelloWorldApp`, a new `Component`. When you're building a React Native app, you'll be making new components a lot. Anything you see on the screen is some sort of component.
-
-## Props
-
-Most components can be customized when they are created, with different parameters. These creation parameters are called props.
-
-Your own components can also use `props`. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place. Refer to `props.YOUR_PROP_NAME` in your functional components or `this.props.YOUR_PROP_NAME` in your class components. Here's an example:
-
-<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
-<TabItem value="javascript">
-
-```SnackPlayer name=Hello%20Props&ext=js
-import React from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-
-const styles = StyleSheet.create({
-  center: {
-    alignItems: 'center',
-  },
-});
-
-const Greeting = props => {
-  return (
-    <View style={styles.center}>
-      <Text>Hello {props.name}!</Text>
-    </View>
-  );
-};
-
-const LotsOfGreetings = () => {
-  return (
-    <View style={[styles.center, {top: 50}]}>
-      <Greeting name="Rexxar" />
-      <Greeting name="Jaina" />
-      <Greeting name="Valeera" />
-    </View>
-  );
-};
-
-export default LotsOfGreetings;
-```
-
-</TabItem>
-<TabItem value="typescript">
-
-```SnackPlayer name=Hello%20Props&ext=tsx
-import React from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-
-const styles = StyleSheet.create({
-  center: {
-    alignItems: 'center',
-  },
-});
-
-type GreetingProps = {
-  name: string;
-};
-
-const Greeting = (props: GreetingProps) => {
-  return (
-    <View style={styles.center}>
-      <Text>Hello {props.name}!</Text>
-    </View>
-  );
-};
-
-const LotsOfGreetings = () => {
-  return (
-    <View style={[styles.center, {top: 50}]}>
-      <Greeting name="Rexxar" />
-      <Greeting name="Jaina" />
-      <Greeting name="Valeera" />
-    </View>
-  );
-};
-
-export default LotsOfGreetings;
-```
-
-</TabItem>
-</Tabs>
-
-Using `name` as a prop lets us customize the `Greeting` component, so we can reuse that component for each of our greetings. This example also uses the `Greeting` component in JSX. The power to do this is what makes React so cool.
-
-The other new thing going on here is the [`View`](view.md) component. A [`View`](view.md) is useful as a container for other components, to help control style and layout.
-
-With `props` and the basic [`Text`](text.md), [`Image`](image.md), and [`View`](view.md) components, you can build a wide variety of static screens. To learn how to make your app change over time, you need to [learn about State](#state).
-
-## State
-
-Unlike props [that are read-only](https://react.dev/reference/react/Component#props) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else.
-
-#### What's the difference between state and props in React?
-
-In a React component, the props are the variables that we pass from a parent component to a child component. Similarly, the state are also variables, with the difference that they are not passed as parameters, but rather that the component initializes and manages them internally.
-
-#### Are there differences between React and React Native to handle the state?
-
-<div className="two-columns">
-
-```tsx
-// ReactJS Counter Example using Hooks!
-
-import React, {useState} from 'react';
-
-
-
-const App = () => {
-  const [count, setCount] = useState(0);
-
-  return (
-    <div className="container">
-      <p>You clicked {count} times</p>
-      <button
-        onClick={() => setCount(count + 1)}>
-        Click me!
-      </button>
-    </div>
-  );
-};
-
-
-// CSS
-.container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-```
-
-```tsx
-// React Native Counter Example using Hooks!
-
-import React, {useState} from 'react';
-import {View, Text, Button, StyleSheet} from 'react-native';
-
-const App = () => {
-  const [count, setCount] = useState(0);
-
-  return (
-    <View style={styles.container}>
-      <Text>You clicked {count} times</Text>
-      <Button
-        onPress={() => setCount(count + 1)}
-        title="Click me!"
-      />
-    </View>
-  );
-};
-
-// React Native Styles
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-```
-
-</div>
-
-As shown above, there is no difference in handling the `state` between [React](https://react.dev/learn/state-a-components-memory) and `React Native`. You can use the state of your components both in classes and in function components using [hooks](https://react.dev/reference/react/useState)!
-
-In the following example we will show the same above counter example using classes.
-
-```SnackPlayer name=Hello%20Classes
-import React, {Component} from 'react';
-import {StyleSheet, TouchableOpacity, Text, View} from 'react-native';
-
-class App extends Component {
-  state = {
-    count: 0,
-  };
-
-  onPress = () => {
-    this.setState({
-      count: this.state.count + 1,
-    });
-  };
-
-  render() {
-    return (
-      <View style={styles.container}>
-        <TouchableOpacity style={styles.button} onPress={this.onPress}>
-          <Text>Click me</Text>
-        </TouchableOpacity>
-        <View>
-          <Text>You clicked {this.state.count} times</Text>
-        </View>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  button: {
-    alignItems: 'center',
-    backgroundColor: '#DDDDDD',
-    padding: 10,
-    marginBottom: 10,
-  },
-});
-
-export default App;
-```
+---
+id: tutorial
+title: Learn the Basics
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+React Native is like React, but it uses native components instead of web components as building blocks. So to understand the basic structure of a React Native app, you need to understand some of the basic React concepts, like JSX, components, `state`, and `props`. If you already know React, you still need to learn some React Native specific stuff, like the native components. This tutorial is aimed at all audiences, whether you have React experience or not.
+
+Let's do this thing.
+
+## Hello World
+
+In accordance with the ancient traditions of our people, we must first build an app that does nothing except say "Hello, world!". Here it is:
+
+```SnackPlayer name=Hello%20World
+import {Text, View} from 'react-native';
+
+const HelloWorldApp = () => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}>
+      <Text>Hello, world!</Text>
+    </View>
+  );
+};
+export default HelloWorldApp;
+```
+
+If you are feeling curious, you can play around with sample code directly in the web simulators. You can also paste it into your `App.js` file to create a real app on your local machine.
+
+## What's going on here?
+
+1. First of all, we need to import `React` to be able to use `JSX`, which will then be transformed to the native components of each platform.
+2. On line 2, we import the `Text` and `View` components from `react-native`
+
+Then we define the `HelloWorldApp` function, which is a [function component](https://react.dev/reference/react/Component) and behaves in the same way as in React for the web. This function returns a `View` component with some styles and a`Text` as its child.
+
+The `Text` component allows us to render a text, while the `View` component renders a container. This container has several styles applied, let's analyze what each one is doing.
+
+The first style that we find is `flex: 1`, the [`flex`](layout-props#flex) prop will define how your items are going to "fill" over the available space along your main axis. Since we only have one container, it will take all the available space of the parent component. In this case, it is the only component, so it will take all the available screen space.
+
+The following style is [`justifyContent`](layout-props#justifycontent): "center". This aligns children of a container in the center of the container's main axis. Finally, we have [`alignItems`](layout-props#alignitems): "center", which aligns children of a container in the center of the container's cross axis.
+
+Some of the things in here might not look like JavaScript to you. Don't panic. _This is the future_.
+
+First of all, ES2015 (also known as ES6) is a set of improvements to JavaScript that is now part of the official standard, but not yet supported by all browsers, so often it isn't used yet in web development. React Native ships with ES2015 support, so you can use this stuff without worrying about compatibility. `import`, `export`, `const` and `from` in the example above are all ES2015 features. If you aren't familiar with ES2015, you can probably pick it up by reading through sample code like this tutorial has. If you want, [this page](https://babeljs.io/learn-es2015/) has a good overview of ES2015 features.
+
+The other unusual thing in this code example is `<View><Text>Hello world!</Text></View>`. This is JSX - a syntax for embedding XML within JavaScript. Many frameworks use a specialized templating language which lets you embed code inside markup language. In React, this is reversed. JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like `<div>` or `<span>`, you use React components. In this case, `<Text>` is a [Core Component](intro-react-native-components) that displays some text and `View` is like the `<div>` or `<span>`.
+
+## Components
+
+So this code is defining `HelloWorldApp`, a new `Component`. When you're building a React Native app, you'll be making new components a lot. Anything you see on the screen is some sort of component.
+
+## Props
+
+Most components can be customized when they are created, with different parameters. These creation parameters are called props.
+
+Your own components can also use `props`. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place. Refer to `props.YOUR_PROP_NAME` in your functional components or `this.props.YOUR_PROP_NAME` in your class components. Here's an example:
+
+<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
+<TabItem value="javascript">
+
+```SnackPlayer name=Hello%20Props&ext=js
+import {Text, View, StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  center: {
+    alignItems: 'center',
+  },
+});
+
+const Greeting = props => {
+  return (
+    <View style={styles.center}>
+      <Text>Hello {props.name}!</Text>
+    </View>
+  );
+};
+
+const LotsOfGreetings = () => {
+  return (
+    <View style={[styles.center, {top: 50}]}>
+      <Greeting name="Rexxar" />
+      <Greeting name="Jaina" />
+      <Greeting name="Valeera" />
+    </View>
+  );
+};
+
+export default LotsOfGreetings;
+```
+
+</TabItem>
+<TabItem value="typescript">
+
+```SnackPlayer name=Hello%20Props&ext=tsx
+import {Text, View, StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  center: {
+    alignItems: 'center',
+  },
+});
+
+type GreetingProps = {
+  name: string;
+};
+
+const Greeting = (props: GreetingProps) => {
+  return (
+    <View style={styles.center}>
+      <Text>Hello {props.name}!</Text>
+    </View>
+  );
+};
+
+const LotsOfGreetings = () => {
+  return (
+    <View style={[styles.center, {top: 50}]}>
+      <Greeting name="Rexxar" />
+      <Greeting name="Jaina" />
+      <Greeting name="Valeera" />
+    </View>
+  );
+};
+
+export default LotsOfGreetings;
+```
+
+</TabItem>
+</Tabs>
+
+Using `name` as a prop lets us customize the `Greeting` component, so we can reuse that component for each of our greetings. This example also uses the `Greeting` component in JSX. The power to do this is what makes React so cool.
+
+The other new thing going on here is the [`View`](view.md) component. A [`View`](view.md) is useful as a container for other components, to help control style and layout.
+
+With `props` and the basic [`Text`](text.md), [`Image`](image.md), and [`View`](view.md) components, you can build a wide variety of static screens. To learn how to make your app change over time, you need to [learn about State](#state).
+
+## State
+
+Unlike props [that are read-only](https://react.dev/reference/react/Component#props) and should not be modified, the `state` allows React components to change their output over time in response to user actions, network responses and anything else.
+
+#### What's the difference between state and props in React?
+
+In a React component, the props are the variables that we pass from a parent component to a child component. Similarly, the state are also variables, with the difference that they are not passed as parameters, but rather that the component initializes and manages them internally.
+
+#### Are there differences between React and React Native to handle the state?
+
+<div className="two-columns">
+
+```tsx
+// React Counter Example using Hooks!
+
+import {useState} from 'react';
+
+
+
+const App = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="container">
+      <p>You clicked {count} times</p>
+      <button
+        onClick={() => setCount(count + 1)}>
+        Click me!
+      </button>
+    </div>
+  );
+};
+
+
+// CSS
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+```
+
+```tsx
+// React Native Counter Example using Hooks!
+
+import {useState} from 'react';
+import {View, Text, Button, StyleSheet} from 'react-native';
+
+const App = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <View style={styles.container}>
+      <Text>You clicked {count} times</Text>
+      <Button
+        onPress={() => setCount(count + 1)}
+        title="Click me!"
+      />
+    </View>
+  );
+};
+
+// React Native Styles
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+```
+
+</div>
+
+As shown above, there is no difference in handling the `state` between [React](https://react.dev/learn/state-a-components-memory) and `React Native`. You can use the state of your components both in classes and in function components using [hooks](https://react.dev/reference/react/useState)!
+
+In the following example we will show the same above counter example using classes.
+
+```SnackPlayer name=Hello%20Classes
+import {Component} from 'react';
+import {StyleSheet, TouchableOpacity, Text, View} from 'react-native';
+
+class App extends Component {
+  state = {
+    count: 0,
+  };
+
+  onPress = () => {
+    this.setState({
+      count: this.state.count + 1,
+    });
+  };
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <TouchableOpacity style={styles.button} onPress={this.onPress}>
+          <Text>Click me</Text>
+        </TouchableOpacity>
+        <View>
+          <Text>You clicked {this.state.count} times</Text>
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#DDDDDD',
+    padding: 10,
+    marginBottom: 10,
+  },
+});
+
+export default App;
+```
diff --git a/website/versioned_docs/version-0.86/usecolorscheme.md b/website/versioned_docs/version-0.86/usecolorscheme.md
index 6dc4d01517e..b3e0ac1db9d 100644
--- a/website/versioned_docs/version-0.86/usecolorscheme.md
+++ b/website/versioned_docs/version-0.86/usecolorscheme.md
@@ -21,7 +21,6 @@ The `useColorScheme` React hook provides and subscribes to color scheme updates
 ## Example
 
 ```SnackPlayer
-import React from 'react';
 import {Text, StyleSheet, useColorScheme} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.86/usewindowdimensions.md b/website/versioned_docs/version-0.86/usewindowdimensions.md
index 92bb1931d32..3e8a8077370 100644
--- a/website/versioned_docs/version-0.86/usewindowdimensions.md
+++ b/website/versioned_docs/version-0.86/usewindowdimensions.md
@@ -16,7 +16,6 @@ const {height, width} = useWindowDimensions();
 ## Example
 
 ```SnackPlayer name=useWindowDimensions&supportedPlatforms=ios,android
-import React from 'react';
 import {StyleSheet, Text, useWindowDimensions} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.86/using-a-listview.md b/website/versioned_docs/version-0.86/using-a-listview.md
index cf13fa66a6c..a5a04f40279 100644
--- a/website/versioned_docs/version-0.86/using-a-listview.md
+++ b/website/versioned_docs/version-0.86/using-a-listview.md
@@ -12,7 +12,6 @@ The `FlatList` component requires two props: `data` and `renderItem`. `data` is
 This example creates a basic `FlatList` of hardcoded data. Each item in the `data` props is rendered as a `Text` component. The `FlatListBasics` component then renders the `FlatList` and all `Text` components.
 
 ```SnackPlayer name=FlatList%20Basics
-import React from 'react';
 import {FlatList, StyleSheet, Text, View} from 'react-native';
 
 const styles = StyleSheet.create({
@@ -55,7 +54,6 @@ export default FlatListBasics;
 If you want to render a set of data broken into logical sections, maybe with section headers, similar to `UITableView` on iOS, then a [SectionList](sectionlist.md) is the way to go.
 
 ```SnackPlayer name=SectionList%20Basics
-import React from 'react';
 import {SectionList, StyleSheet, Text, View} from 'react-native';
 
 const styles = StyleSheet.create({
diff --git a/website/versioned_docs/version-0.86/using-a-scrollview.md b/website/versioned_docs/version-0.86/using-a-scrollview.md
index e4de6207a71..3ffae817bf0 100644
--- a/website/versioned_docs/version-0.86/using-a-scrollview.md
+++ b/website/versioned_docs/version-0.86/using-a-scrollview.md
@@ -8,7 +8,6 @@ The [ScrollView](scrollview.md) is a generic scrolling container that can contai
 This example creates a vertical `ScrollView` with both images and text mixed together.
 
 ```SnackPlayer name=Using%20ScrollView
-import React from 'react';
 import {Image, ScrollView, Text} from 'react-native';
 
 const logo = {
diff --git a/website/versioned_docs/version-0.86/vibration.md b/website/versioned_docs/version-0.86/vibration.md
index 44a0af2db43..bdb564ab331 100644
--- a/website/versioned_docs/version-0.86/vibration.md
+++ b/website/versioned_docs/version-0.86/vibration.md
@@ -8,7 +8,6 @@ Vibrates the device.
 ## Example
 
 ```SnackPlayer name=Vibration%20Example&supportedPlatforms=ios,android
-import React from 'react';
 import {
   Button,
   Platform,
diff --git a/website/versioned_docs/version-0.86/view-style-props.md b/website/versioned_docs/version-0.86/view-style-props.md
index 431557883ad..562aa837ad5 100644
--- a/website/versioned_docs/version-0.86/view-style-props.md
+++ b/website/versioned_docs/version-0.86/view-style-props.md
@@ -9,7 +9,6 @@ import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameFor
 ### Example
 
 ```SnackPlayer name=ViewStyleProps
-import React from 'react';
 import {View, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.86/view.md b/website/versioned_docs/version-0.86/view.md
index 3fd3c7fb4bd..405218dcc9b 100644
--- a/website/versioned_docs/version-0.86/view.md
+++ b/website/versioned_docs/version-0.86/view.md
@@ -12,7 +12,6 @@ The most fundamental component for building a UI, `View` is a container that sup
 This example creates a `View` that wraps two boxes with color and a text component in a row with padding.
 
 ```SnackPlayer name=View%20Example
-import React from 'react';
 import {View, Text} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
diff --git a/website/versioned_docs/version-0.86/virtualizedlist.md b/website/versioned_docs/version-0.86/virtualizedlist.md
index e0a31ffb2e2..7cb55d1b5d7 100644
--- a/website/versioned_docs/version-0.86/virtualizedlist.md
+++ b/website/versioned_docs/version-0.86/virtualizedlist.md
@@ -15,7 +15,6 @@ Virtualization massively improves memory consumption and performance of large li
 <TabItem value="javascript">
 
 ```SnackPlayer name=VirtualizedListExample&ext=js
-import React from 'react';
 import {View, VirtualizedList, StyleSheet, Text, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
@@ -71,7 +70,6 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=VirtualizedListExample&ext=tsx
-import React from 'react';
 import {View, VirtualizedList, StyleSheet, Text, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';